/* Section 02: subsystem map (FigureFrame s02-subsystems) and the
   "Selected achieved throughput" panel views. The shell loads this file only
   on Section 2's page; every rule is still scoped to .s02-stack or .s02-tp.
   Kit tokens from site.css. */

/* ---------- Layer colours: the figure's green/purple/yellow/blue/orange/gray, tuned for cream ----------
   The caption names these hues, so they stay identifiable: each tile is a
   cream card with a 3px stripe in its layer's hue and a fill of at most 8%. */
.s02-stack [data-layer="config"]{--l-fill:#e3eedb;--l-line:#8bad76;--l-deep:#3f6830}
.s02-stack [data-layer="orchestration"]{--l-fill:#ece3f2;--l-line:#a68abd;--l-deep:#5e3f7e}
.s02-stack [data-layer="model"]{--l-fill:#f9eec6;--l-line:#d3b555;--l-deep:#73590c}
.s02-stack [data-layer="runtime"]{--l-fill:#e0e9f5;--l-line:#86a3cb;--l-deep:#335888}
.s02-stack [data-layer="support"]{--l-fill:#fce3cd;--l-line:#dfa05c;--l-deep:#874c0f}
.s02-stack [data-layer="substrate"]{--l-fill:#ecebe7;--l-line:#a2a19c;--l-deep:#474643}

/* ---------- Map frame ---------- */
/* Lists, list items and quotes inside these components are UI, not prose. */
.report-content :is(.s02-stack,.s02-tp) :is(ul,ol){list-style:none;margin:0;padding:0}
.report-content :is(.s02-stack,.s02-tp) li{margin:0}
.report-content :is(.s02-stack,.s02-tp) li:not(.s02-tp-card){padding-left:0}
.report-content .s02-stack blockquote.s02-quote{margin:0 0 14px;padding:2px 0 2px 14px;border-left:2px solid var(--teal-line);font-size:15px;line-height:1.55;color:var(--ink-soft)}
.s02-stack{container:s02stack/inline-size;--s02-gap:10px;font-size:15px;line-height:1.5;color:var(--ink)}
.s02-stack p{margin:0}
.report-content .s02-stack .s02-fig-title{margin:2px 0 14px;font-size:clamp(21px,2.1vw,27px);font-weight:400;line-height:1.2;letter-spacing:-.022em;color:var(--ink-deep);text-wrap:balance}
.s02-stack-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 16px}
.s02-legend-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s02-legend{display:flex;flex-wrap:wrap;gap:6px}
.s02-chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px 0 9px;border:1px solid var(--line);border-radius:999px;background:var(--cream-hi);color:var(--ink-soft);font-size:12.5px;font-weight:700;line-height:1.2;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.s02-chip:hover{border-color:var(--line-strong);color:var(--ink)}
.s02-chip.is-related{border-color:var(--ink);color:var(--ink)}
.s02-chip[aria-pressed="true"]{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--cream-hi)}
.s02-swatch{display:inline-block;flex:none;width:11px;height:11px;border-radius:3px;background:var(--l-line);box-shadow:inset 0 0 0 1px rgba(28,43,51,.12)}
.s02-chip-tiny{display:none}
@container s02stack (max-width:560px){.s02-chip-name{display:none}.s02-chip-tiny{display:inline}.s02-chip{padding:0 10px 0 8px;font-size:12px}.s02-legend-label{width:100%}}
.s02-chip[aria-pressed="true"] .s02-swatch{box-shadow:inset 0 0 0 1.5px var(--cream-hi)}

.s02-stack-body{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
/* 2026-11-02: the details panel sits under the map at every width, so the map gets the full width. */
@container s02stack (min-width:780px){
 .s02-detail{padding:18px 22px 16px}
 .s02-detail-name{font-size:20px}
}
.s02-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:10px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--cream-hi);color:var(--teal-deep);font-size:12.5px;font-weight:700}
.s02-back[hidden]{display:none}

/* ---------- Diagram: the drawio geometry as a CSS grid ---------- */
.s02-diagram{container:s02diagram/inline-size;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream-hi);box-shadow:var(--shadow-card)}
.s02-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s02-gap);
 grid-template-areas:"config config config config config" "train train train train train" "moe moe moe prec opt" "ddp ep pp act comp" "ddp ep pp sym ckpt" "div div div div div" "sub sub sub sub sub"}
.s02-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:86px;margin:0;padding:12px 8px 10px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--l-line) 7%,var(--cream-hi));box-shadow:inset 0 3px 0 var(--l-line);color:var(--ink);font-size:13.5px;font-weight:700;line-height:1.28;text-align:center;overflow-wrap:break-word;hyphens:manual;
 transition:opacity .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}
.s02-tile[style*="grid-area:config"]{min-height:44px;flex-direction:row;gap:12px}
.s02-tile[style*="grid-area:train"]{min-height:64px}
.s02-tile[style*="grid-area:moe"]{min-height:72px}
.s02-tile-name{display:block;max-width:100%}
.s02-tile-refs{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--l-deep);font-variant-numeric:tabular-nums}
.s02-tile:hover{border-color:var(--l-line);box-shadow:inset 0 3px 0 var(--l-line),0 1px 2px rgba(10,43,53,.08),0 6px 16px rgba(10,43,53,.1);transform:translateY(-1px)}
.s02-tile.is-current{border-color:var(--ink-deep);box-shadow:inset 0 3px 0 var(--l-line),0 0 0 1.5px var(--ink-deep),0 8px 20px rgba(10,43,53,.12);transform:translateY(-1px)}
.s02-tile[aria-pressed="true"]::after{content:'';position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.s02-tile.is-dim{opacity:.3}
.s02-tile.is-dim:hover{opacity:.7}
.s02-divider{height:0;margin:6px 2px;border-top:2.5px dashed var(--ink-soft);opacity:.75}
.s02-substrate{padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--l-line) 6%,var(--cream));transition:opacity .2s var(--ease),box-shadow .2s var(--ease)}
.s02-substrate-label{margin:0 0 10px!important;text-align:center;font-size:13px;font-weight:700;color:var(--l-deep);letter-spacing:.02em}
.s02-substrate-grid{display:grid;grid-template-columns:.72fr 1fr 1.1fr;gap:var(--s02-gap);grid-template-areas:"py cu cut" "py nc nv"}
.s02-substrate .s02-tile{min-height:44px;flex-direction:row;flex-wrap:wrap;gap:4px 10px}
.s02-substrate .s02-tile[style*="grid-area:py"]{min-height:0;flex-direction:column}
.s02-stack.has-focus-layer:not([data-focus-layer="substrate"]) .s02-substrate{background:var(--cream-hi)}
.s02-stack[data-focus-layer="substrate"] .s02-substrate{box-shadow:0 0 0 1.5px var(--ink-deep)}

/* Narrow frames: keep the layer order, reflow the columns. */
@container s02diagram (max-width:640px) and (min-width:561px){
 .s02-tile{font-size:12.5px;padding:9px 6px}
}
@container s02diagram (max-width:560px){
 .s02-grid{grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-areas:"config config config config config config" "train train train train train train" "moe moe moe moe moe moe" "ddp ddp ep ep pp pp" "prec prec prec opt opt opt" "act act act comp comp comp" "sym sym sym ckpt ckpt ckpt" "div div div div div div" "sub sub sub sub sub sub"}
 .s02-tile{min-height:68px;font-size:13px;padding:9px 7px}
 .s02-tile[style*="grid-area:config"]{flex-direction:column;gap:4px;min-height:52px}
 .s02-tile[style*="grid-area:ddp"],.s02-tile[style*="grid-area:ep"],.s02-tile[style*="grid-area:pp"]{min-height:104px}
 .s02-substrate-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"py py" "cu cut" "nc nv"}
 .s02-substrate .s02-tile[style*="grid-area:py"]{min-height:48px;flex-direction:row}
 .s02-substrate .s02-tile{flex-direction:column;gap:3px;min-height:56px}
}
@container s02diagram (max-width:400px){
 .s02-diagram{padding:12px}
 .s02-stack{--s02-gap:8px}
 .s02-tile{font-size:12.5px;padding:8px 5px}
}

/* ---------- Details ---------- */
.s02-details{min-width:0}
.s02-detail{padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream-hi);box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.s02-detail+.s02-detail{margin-top:12px}
.s02-stack.is-ready .s02-detail+.s02-detail{margin-top:0}
.s02-detail::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--l-line,var(--teal))}
.s02-detail[hidden]{display:none}
.s02-detail.is-entering{animation:s02-in .18s var(--ease)}
@keyframes s02-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.s02-detail-layer{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--l-deep,var(--muted))}
.s02-detail-colour{flex-basis:100%;padding-left:19px;letter-spacing:.02em;text-transform:none;font-weight:400;color:var(--muted)}
.s02-detail-name{margin:8px 0 12px!important;font-size:20px;line-height:1.3;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.s02-quote{margin:0 0 14px;padding:2px 0 2px 14px;border-left:2px solid var(--teal-line);font-size:15px;line-height:1.55;color:var(--ink-soft)}
.s02-quote p{margin:0}
.s02-quote footer{margin-top:4px;font-size:11.5px;color:var(--muted)}
.s02-detail-label{margin:0 0 6px!important;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s02-detail-none,.s02-hint-text{font-size:14.5px;line-height:1.55;color:var(--muted)}
.s02-detail--hint::before{background:linear-gradient(var(--pink),var(--teal))}
.s02-hint-keys{margin:14px 0 0;display:grid;gap:8px;font-size:13px;line-height:1.4}
.s02-hint-keys div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:baseline}
.s02-hint-keys dt{font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.s02-hint-keys dd{margin:0;color:var(--muted)}
@media (hover:none){.s02-hint-keys .s02-key-kbd{display:none}}
.s02-pin-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.s02-links,.s02-members{list-style:none;margin:0;padding:0}
.s02-links li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.s02-links li:first-child{border-top:0;padding-top:2px}
.s02-link-ref{grid-column:1;grid-row:1/span 2;font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.s02-link-ref a{font-size:14px}
.s02-link-title{grid-column:2;color:var(--ink)}
.s02-link-part{grid-column:2;font-size:11.5px;color:var(--muted)}
.s02-members li+li{border-top:1px solid var(--line)}
.s02-member{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:6px 2px;border:0;background:none;color:var(--ink);font-size:14px;font-weight:700;line-height:1.3;text-align:left;border-radius:6px}
.s02-member:hover{color:var(--teal-deep)}
.s02-member-refs{margin-left:auto;padding-left:10px;font-size:11.5px;color:var(--muted);white-space:nowrap}

/* Without JavaScript every subsystem's details stay listed below the map. */
.s02-stack:not(.is-ready) .s02-detail--layer,.s02-stack:not(.is-ready) .s02-detail--hint{display:none}
.s02-stack:not(.is-ready) .s02-details{position:static}
.s02-stack:not(.is-ready) .s02-stack-body{grid-template-columns:minmax(0,1fr)}
.s02-stack:not(.is-ready) :is(.s02-legend,.s02-legend-label){display:none}
@container s02stack (min-width:640px){.s02-stack:not(.is-ready) .s02-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.s02-stack:not(.is-ready) .s02-detail+.s02-detail{margin-top:0}}

/* ---------- Selected achieved throughput panel ---------- */
.report-content>.s02-tp{grid-column:wide}
.s02-tp{container:s02tp/inline-size;margin:3em 0 3.2em;padding-top:16px;border-top:1px solid var(--ink);min-width:0}
.s02-tp p{margin:0}
/* Head as in figure frames: badge and view switch, then the title and its metadata. */
.s02-tp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 12px}
.s02-tp-bar .figure-frame-badge{font-size:12px;line-height:1.4}
.s02-tp-head{margin:0 0 16px}
.report-content .s02-tp .s02-tp-title{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.012em;color:var(--ink-deep)}
.s02-tp-title strong{font-weight:700}
.s02-tp-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin-top:4px!important;font-size:13px;line-height:1.5;color:var(--muted)}
.s02-tp-meta>*+*::before{content:'·';padding:0 8px;color:var(--muted)}
.s02-tp-hw{font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
.s02-tp-unit-line{color:var(--muted)}
.s02-tp-views{display:inline-flex;padding:3px;border-radius:999px;background:var(--cream-lo);border:1px solid var(--line)}
.s02-tp-views button{min-height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:12.5px;font-weight:700;line-height:1;transition:background .2s,color .2s,box-shadow .2s}
.s02-tp-views button[aria-pressed="true"]{background:var(--cream-hi);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),0 1px 3px rgba(10,43,53,.12)}
.s02-tp-views button:hover{color:var(--ink)}
.s02-tp-view[hidden]{display:none!important}
.s02-tp-view.is-entering{animation:s02-in .26s var(--ease)}
.s02-tp>.table-frame{margin:0 0 4px}
.s02-tp-note{margin-top:14px!important;font-size:14.5px;line-height:1.62;color:var(--muted);max-width:calc(var(--measure) + 120px)}
.s02-tp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:12px!important;font-size:12.5px;line-height:1.5;color:var(--muted)}
.s02-tp-key{display:inline-block;flex:none}
.s02-tp-keys{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin-right:8px}
.s02-tp-short{display:none}
.s02-tp-key--bar{width:22px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--teal) 40%,var(--cream-lo) 40%)}
.s02-tp-key--active{width:10px;height:10px;border-radius:50%;background:var(--teal)}
.s02-tp-key--total{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:var(--cream-hi);margin-left:8px}

/* Cards */
.s02-tp-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.report-content .s02-tp .s02-tp-card{padding:18px 12px 16px}
.s02-tp-card{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream-hi);box-shadow:var(--shadow-card);text-align:center;font-variant-numeric:tabular-nums;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.s02-tp-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 2px 4px rgba(10,43,53,.06),0 14px 32px rgba(10,43,53,.1)}
.s02-tp-size{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.s02-tp-params{margin-top:6px!important;font-size:15.5px;font-weight:700;line-height:1.3;white-space:nowrap}
.s02-tp-active{font-size:12.5px;color:var(--muted)}
.s02-tp-active strong{color:var(--ink-soft)}
.s02-tp-value{display:flex;align-items:baseline;gap:4px;margin-top:12px!important;color:var(--ink-deep);line-height:1}
.s02-tp-num{font-size:36px;font-weight:400;letter-spacing:-.02em}
.s02-tp-unit{font-size:11.5px;font-weight:700}
.s02-tp-meter{position:relative;width:100%;max-width:150px;height:6px;margin:10px 0 6px;border-radius:3px;background:var(--cream-lo);overflow:hidden}
.s02-tp-meter span{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 100%);border-radius:3px;background:var(--teal);transition:width .9s var(--ease)}
.s02-tp.is-waiting .s02-tp-meter span{width:0}
.s02-tp-mfu{font-size:13px;color:var(--ink-soft)}
.s02-tp-mfu strong{color:var(--ink)}
.s02-tp-experts{margin-top:10px!important;padding-top:10px;border-top:1px solid var(--line);width:100%;font-size:12.5px;color:var(--ink-soft)}
.s02-tp-config{margin-top:2px!important;font-size:12.5px;color:var(--muted);white-space:nowrap}
/* Precision tags use the table's own colours (the PDF's green and red, read
   from the converted cell), the same in all three views. */
.s02-tp-prec{display:inline-block;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--prec,var(--teal-deep)) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--prec,var(--teal-deep)) 30%,transparent);color:var(--prec,var(--teal-deep));font-size:11px;font-weight:700;letter-spacing:.04em}

/* Scale: active and total parameters on one log axis */
.s02-tp-scale{padding:16px 18px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream-hi);box-shadow:var(--shadow-card)}
.s02-tp-axis,.s02-tp-row{display:grid;grid-template-columns:118px minmax(0,1fr) 128px;column-gap:18px;align-items:center}
.s02-tp-axis{margin-bottom:4px;font-size:11px;color:var(--muted)}
.s02-tp-axis-name{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;line-height:1.3}
.s02-tp-axis-value{text-align:right;font-weight:700;letter-spacing:.02em;font-size:11px;line-height:1.3}
.s02-tp-ticks{position:relative;height:16px}
.s02-tp-tick{position:absolute;top:0;transform:translateX(-50%);font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-soft)}
.s02-tp-rows{list-style:none;margin:0;padding:0}
.s02-tp-row{padding:10px 0;border-top:1px solid var(--line);transition:background-color .15s}
.s02-tp-row:hover{background:var(--teal-wash)}
.s02-tp-row-name{display:flex;align-items:center;gap:8px;font-size:14.5px}
.s02-tp-track{position:relative;height:52px}
.s02-tp-grid{position:absolute;top:0;bottom:0;width:0;border-left:1px dotted var(--line-strong)}
.s02-tp-span{position:absolute;top:22px;height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),rgba(28,43,51,.55))}
.s02-tp-pt{position:absolute;top:22px;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%}
.s02-tp-pt--active{background:var(--teal)}
.s02-tp-pt--total{background:var(--cream-hi);border:2.5px solid var(--ink)}
.s02-tp-lab{position:absolute;top:32px;transform:translateX(-50%);font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.s02-tp-lab--active{color:var(--teal-deep)}
.s02-tp-lab--total{color:var(--ink)}
.s02-tp-ratio{position:absolute;top:1px;transform:translateX(-50%);font-size:10.5px;color:var(--muted);white-space:nowrap}
.s02-tp-row-value{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;font-variant-numeric:tabular-nums}
.s02-tp-row-value strong{font-size:20px;font-weight:400;color:var(--ink-deep)}
.s02-tp-row-value span{font-size:11.5px;color:var(--muted)}

/* Medium widths: cards wrap into two rows of a 6-column grid. */
@container s02tp (max-width:820px){
 .s02-tp-cards{grid-template-columns:repeat(6,minmax(0,1fr))}
 .s02-tp-card{grid-column:span 2}
 .s02-tp-card:nth-child(4){grid-column:2/span 2}
}
/* Phones: one compact row per operating point. */
@container s02tp (max-width:560px){
 .s02-tp-cards{grid-template-columns:minmax(0,1fr);gap:10px}
 .s02-tp-card,.s02-tp-card:nth-child(4){grid-column:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"size value" "params meter" "active mfu" "experts config";column-gap:14px;row-gap:1px;align-items:center;text-align:left}
 .report-content .s02-tp .s02-tp-card{padding:12px 14px 10px}
 .s02-tp-size{grid-area:size}
 .s02-tp-params{grid-area:params;margin-top:0!important;font-size:15px}
 .s02-tp-active{grid-area:active}
 .s02-tp-value{grid-area:value;justify-self:end;margin:0!important}
 .s02-tp-num{font-size:30px}
 .s02-tp-meter{grid-area:meter;justify-self:end;width:104px;margin:3px 0}
 .s02-tp-mfu{grid-area:mfu;justify-self:end;font-size:12.5px}
 .s02-tp-experts{grid-area:experts;margin-top:8px!important;padding-top:7px;width:auto;text-align:left}
 .s02-tp-config{grid-area:config;justify-self:stretch;text-align:right;margin-top:8px!important;padding-top:7px;border-top:1px solid var(--line)}
 .s02-tp-scale{padding:12px 12px 10px}
 .s02-tp-axis,.s02-tp-row{grid-template-columns:58px minmax(0,1fr) 62px;column-gap:10px}
 .s02-tp-long{display:none}
 .s02-tp-short{display:inline}
 .s02-tp-row-name{flex-direction:column;align-items:flex-start;gap:3px;font-size:13.5px}
 .s02-tp-axis-name{display:none}
 .s02-tp-axis-value{grid-column:3;font-size:10px}
 .s02-tp-ticks{grid-column:2}
 .s02-tp-row-value strong{font-size:17px}
 .s02-tp-row-value span{font-size:10.5px;text-align:right}
 .s02-tp-ratio{display:none}
 .s02-tp-lab{font-size:10.5px}
}

@media(prefers-reduced-motion:reduce){
 .s02-tile,.s02-chip,.s02-tp-card,.s02-tp-meter span{transition:none!important}
 .s02-tile:hover,.s02-tile.is-current,.s02-tp-card:hover{transform:none}
 .s02-detail.is-entering,.s02-tp-view.is-entering{animation:none}
}
@media print{
 .s02-stack-top .s02-legend,.s02-tp-bar{display:none!important}
 .s02-detail[hidden],.s02-tp-view[hidden]{display:block!important}
}

@media(forced-colors:active){
 .s02-tile{border:1px solid CanvasText}
 .s02-tile.is-current,.s02-tile[aria-pressed="true"],.s02-chip[aria-pressed="true"],.s02-tp-views button[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-2px}
 .s02-swatch,.s02-tp-meter span{forced-color-adjust:none}
}
/* 2026-11-02: the details panel keeps one height (the tallest detail) so the page
   does not jump as the reader picks layers and subsystems. All details share one
   grid cell; inactive ones stay laid out but invisible. */
.s02-stack.is-ready .s02-details{display:grid;grid-template-columns:minmax(0,1fr)}
.s02-stack.is-ready .s02-details>.s02-detail{grid-area:1/1;margin:0}
.s02-stack.is-ready .s02-details>.s02-detail[hidden]{display:block;visibility:hidden;pointer-events:none}
.s02-stack.is-ready .s02-details>.s02-back{grid-area:2/1;justify-self:start}