/* "How much bone, and how fast" (stage and grade), owner-approved and locked 2026-10-29 (Daniel: "approved, pass to lead to give to claude for
   publishing"; Codex family-c/stage-grade-v002, APPROVED-LOCK.json). Site placement of the locked style.css: every rule scoped to .dio-stage-grade,
   the h1/h2 rules moved to the component title (h3) and stage heading (h4), the review controls, page body/main/:root/button rules and the
   @font-face dropped (the site's fonts.css supplies Nunito Sans). Values are unchanged. The arch header is the site's own chart-card band
   (answer-charts.css lines 14-24): the mask is the site file assets/arch-tile.svg (sha256 cd8e28f9...), referenced from this sheet's folder,
   never a copy. The 600/350 media queries are container queries on the component. The removed grade axis label stays out (Daniel). */
.dio-stage-grade{font-family:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;color:#203846;font-synthesis:none;font-size:16px;line-height:normal}
.dio-stage-grade *{box-sizing:border-box}
.dio-stage-grade .sg-figure{margin:0;container-type:inline-size}
/* header band: the light arch field from the answer page header, quiet at the reading edge, a little stronger to the right */
.dio-stage-grade .stage-grade-header{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-stage-grade .sg-header-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
  mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
  -webkit-mask-size:179.4px 179.4px,100% 100%;mask-size:179.4px 179.4px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* resting state is the end frame: steel lines, the orange crest already past */
.dio-stage-grade .sg-header-art>i{position:absolute;inset:0;background:linear-gradient(115deg,rgba(76,114,136,.20) 0%,rgba(76,114,136,.20) 30%,rgba(76,114,136,.34) 40%,rgba(237,135,60,.55) 47%,rgba(76,114,136,.30) 54%,rgba(76,114,136,.20) 64%,rgba(76,114,136,.20) 100%);background-size:300% 100%;background-position:0 0}
.dio-stage-grade .stage-grade.is-playing .sg-header-art>i{animation:stage-grade-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes stage-grade-wave{from{background-position:100% 0}to{background-position:0 0}}

.dio-stage-grade .stage-grade{background:#f5f7f7}.dio-stage-grade .stage-grade-header{overflow:hidden}
.dio-stage-grade .stage-grade-header h3.sg-title{position:relative;margin:0;font-family:inherit;color:inherit;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.dio-stage-grade .sg-body{padding:26px 28px 28px}
.dio-stage-grade h4.sg-axis-title{font-family:inherit;color:inherit;font-size:18px;line-height:1.4;font-weight:500;margin:0 0 12px;letter-spacing:-.012em}
.dio-stage-grade .sg-scale{display:flex;align-items:center;gap:10px;margin:0 6px 16px 28%;color:#536f80;font-size:14px;line-height:1.4}
.dio-stage-grade .sg-scale-line{position:relative;flex:1;min-width:0;height:1px;background:#8ba1ae}.dio-stage-grade .sg-scale-line::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid #6b899b;border-right:1px solid #6b899b;transform:rotate(45deg)}
.dio-stage-grade .sg-matrix{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;font-size:16px;line-height:1.35;margin:0}.dio-stage-grade .sg-grade-col{width:28%}.dio-stage-grade .sg-stage-col{width:18%}
.dio-stage-grade .sg-matrix th,.dio-stage-grade .sg-matrix td{padding:5px;text-align:center;vertical-align:middle;border:0;background:none;color:inherit}.dio-stage-grade .sg-matrix thead th{font-size:24px;line-height:1.3;font-weight:600;height:50px;padding-top:10px;padding-bottom:10px}
.dio-stage-grade .sg-matrix thead th:first-child,.dio-stage-grade .sg-matrix thead td:first-child{padding:0}.dio-stage-grade .sg-matrix tbody th{padding:8px 12px 8px 0;text-align:left;font-size:16px;font-weight:600}.dio-stage-grade .sg-matrix tbody th span{display:block;font-size:14px;font-weight:400;line-height:1.5;color:#536b79;margin-top:2px}
.dio-stage-grade .sg-cell{display:block;min-height:54px;background:linear-gradient(180deg,#e9eff2,#dce6eb);border:1px solid #ccd9e0;border-radius:2px}
.dio-stage-grade .sg-matrix .sg-focus{background:#fbefe5}.dio-stage-grade .sg-matrix .sg-focus-start{border-left:1px solid #dcaf8b}.dio-stage-grade .sg-matrix .sg-focus-end{border-right:1px solid #dcaf8b}.dio-stage-grade .sg-matrix thead .sg-focus{border-top:1px solid #dcaf8b;padding-top:10px}
.dio-stage-grade .sg-focus .sg-cell{background:linear-gradient(180deg,#f5dfcc,#efd0b6);border-color:#dfb796}
.dio-stage-grade .sg-matrix tfoot td{padding:14px 9px 16px;font-size:15px;line-height:1.45;font-weight:500}.dio-stage-grade .sg-matrix tfoot .sg-focus{border:1px solid #dcaf8b;border-top:0}
.dio-stage-grade .sg-matrix tfoot td:first-child{padding:0}.dio-stage-grade .sg-full-arch{display:block;max-width:180px;margin:auto}
.dio-stage-grade p.sg-note{margin:0;padding:22px 28px 24px;background:#eaf0f3;border-top:1px solid #d5e0e6;font-size:16px;line-height:1.55;font-weight:400;color:inherit}
.dio-stage-grade figcaption.sg-caption{font-size:13px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0;margin:0}.dio-stage-grade .sg-caption a{color:inherit;text-decoration-color:#9aadb8;text-underline-offset:3px}
.dio-stage-grade .sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dio-stage-grade .stage-grade.is-playing .sg-matrix tbody tr{animation:sg-arrive .7s cubic-bezier(.22,.7,.25,1) .3s both}.dio-stage-grade .stage-grade.is-playing .sg-matrix tbody tr:nth-child(2){animation-delay:.65s}.dio-stage-grade .stage-grade.is-playing .sg-matrix tbody tr:nth-child(3){animation-delay:1s}.dio-stage-grade .stage-grade.is-playing .sg-full-arch{animation:sg-arrive .7s ease 1.6s both}.dio-stage-grade .stage-grade.is-playing .sg-note{animation:sg-arrive .7s ease 2.6s both}@keyframes sg-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dio-stage-grade .stage-grade.is-paused *{animation-play-state:paused!important}
@container (max-width:600px){
 .dio-stage-grade .stage-grade-header h3.sg-title{font-size:23px}
 .dio-stage-grade .sg-body{padding:23px 20px 24px}
 .dio-stage-grade h4.sg-axis-title{font-size:17px}
 .dio-stage-grade .sg-matrix thead th{font-size:22px}
 .dio-stage-grade .sg-matrix th,.dio-stage-grade .sg-matrix td{padding-inline:4px}
 .dio-stage-grade .sg-matrix tbody th{font-size:15px;padding-right:8px}
 .dio-stage-grade .sg-cell{min-height:50px}
 .dio-stage-grade .sg-matrix tfoot td{font-size:14px;padding:13px 8px 15px}
 .dio-stage-grade p.sg-note{padding:21px 20px 23px}
 .dio-stage-grade figcaption.sg-caption{padding-inline:4px}
}
@container (max-width:350px){
 .dio-stage-grade .stage-grade-header{padding-inline:20px}
 .dio-stage-grade .sg-body{padding-inline:16px}
 .dio-stage-grade .sg-matrix th,.dio-stage-grade .sg-matrix td{padding-inline:3px}
 .dio-stage-grade .sg-matrix tbody th{padding-left:0;padding-right:4px}
 .dio-stage-grade .sg-matrix tfoot td{padding-inline:6px}
 .dio-stage-grade p.sg-note{padding-inline:16px}
 .dio-stage-grade .sg-scale{gap:8px;margin-right:4px}
}
html:is(.reduce-motion,.dio-alive-off) .dio-stage-grade .stage-grade *{animation:none!important}
.dio-stage-grade .stage-grade:not(.is-playing) .sg-header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-stage-grade .stage-grade *{animation:none!important}.dio-stage-grade .sg-header-art>i{background-position:0 0!important}}
@media print{.dio-stage-grade .stage-grade *{animation:none!important}}
/* Replay / Still view controls restored 2026-11-11 (Daniel: animations get pause or replay; GPT 21:37Z).
   Same look as the where-bar and plan-b controls: one row above the figure, right side, wrapping on narrow widths; real buttons at least 44 px
   tall with a visible focus ring; hidden in print. Every rule is scoped to this widget. */
.dio-stage-grade .controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0;max-width:none}
.dio-stage-grade .controls[hidden]{display:none}
/* 2026-11-11 audit: the controls take the finish of the site's animation toggle (2px steel border, 6px corners, ink focus ring) so every animation's controls match */
.dio-stage-grade .controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;cursor:pointer}
.dio-stage-grade .controls button:hover{background:#f1f5f6}.dio-stage-grade .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-stage-grade .controls button[aria-pressed=true]{background:#e6edf0}.dio-stage-grade .controls button:disabled{opacity:.55;cursor:default}
@media print{.dio-stage-grade .controls{display:none!important}}