/* ---------------------------------------------------------------------
   SCIENTIFIC TAB — ported from showroom/css/main.css. Token alias shim:
   every --ms-X name used by the ported classes below is aliased to this
   app's own equivalent token, so the copied rules need no rewriting and
   automatically track light/dark theme + density the same way the rest
   of this app already does. Ported class names (.ms-*) do not collide
   with anything this app already defines. Everything below is scoped
   under #tab-scientific except where the selector already includes a
   unique class name (safe by construction, since no other tab uses
   ms-* classes) -- see css-utilities.css's h2/h3 fix for the one place
   a bare element selector needed explicit scoping.
   --------------------------------------------------------------------- */
#tab-scientific {
  --ms-paper: var(--bg);
  --ms-surface: var(--surface);
  --ms-ink: var(--ink);
  --ms-ink-soft: var(--ink-soft);
  --ms-line: var(--line);
  --ms-grid: var(--line);
  --ms-amber: var(--accent);
  --ms-amber-text: var(--accent);
  --ms-brand-2: var(--accent-2);
  --ms-accent-ink: var(--on-accent);
  --ms-shadow: var(--shadow-card);
  --ms-radius: var(--radius);
  --ms-radius-sm: var(--radius-sm);
  --ms-sans: var(--sans);
  --ms-display: var(--display);
  --ms-mono: var(--mono);
  --ms-structural: #0f9d6b;
  --ms-conditional: #0d78c9;
  --ms-instructional: #a86f07;
  --ms-none: #d6455f;
}
:root[data-theme="dark"] #tab-scientific {
  --ms-structural: #35c98d; --ms-conditional: #4fa8e8; --ms-instructional: #d9a441; --ms-none: #ff6b81;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tab-scientific {
    --ms-structural: #35c98d; --ms-conditional: #4fa8e8; --ms-instructional: #d9a441; --ms-none: #ff6b81;
  }
}
.ms-sr-only, .ms-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.ms-container { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.1rem, 3vw, 2rem); }
#contact .ms-container { max-width: 44rem; }

.ms-eyebrow {
  font-family: var(--ms-display); /* reference: kickers set in the display face, not mono */
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ms-ink-soft);
  margin: 0 0 .6rem;
}
#hero .ms-eyebrow { margin-bottom: 1.5rem; }

.ms-lede {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  max-width: 58ch;
  color: var(--ms-ink-soft);
  margin: 0 0 2rem;
}
#problem .ms-lede { margin-bottom: 3rem; }
#reference-impl .ms-lede { max-width: 46rem; margin-bottom: 2.5rem; }
#documents .ms-lede { max-width: 50rem; margin-bottom: 2.5rem; }

/* key-note — small connective sentence introducing a code/label vocabulary, 03/problem */
.ms-key-note { font-size: .9rem; max-width: 52ch; color: var(--ms-ink-soft); margin: -.4rem 0 1.3rem; }
#problem .ms-def-grid--four { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

#tab-scientific h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; }
#tab-scientific h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
/* 2026-08-22: brought up to the reference's own hero-title scale
   (its clamp tops out at 4.6rem/~73.6px desktop) — this showroom's
   H1 is a full two-sentence line rather than the reference's four
   words, so the top end is held a touch under that figure to keep a
   ~90-character headline from overwhelming the viewport, while still
   landing unmistakably in the same register instead of the previous
   3.1rem cap. max-width widened alongside it so the larger type still
   gets a reasonable line count instead of wrapping word-by-word. */
#hero h1 { font-size: clamp(2.1rem, 1.1rem + 4.6vw, 4.3rem); line-height: 1.08; letter-spacing: -.015em; max-width: 24ch; margin: 0 0 1.75rem; }
/* hero accent word — reference's own signature device: the headline's
   landing word rendered in a gradient text-fill using the same two
   accent stops as the primary button / nav progress bar, rather than
   flat ink like the rest of the line. */
.ms-hero-accent {
  background: linear-gradient(92deg, var(--ms-amber), var(--ms-brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#problem h2, #contact h2 { max-width: 26ch; }
#evaluation h2, #domains h2 { max-width: 38rem; }
#reference-impl h2 { max-width: 34rem; }
#documents h2 { max-width: 36rem; }

/* buttons — hero, reference-impl, footer, doc downloads all share this.
   Two-tier CTA shape ported from the reference site's .btn-primary/
   .btn-ghost: gradient fill + soft shadow on primary, bordered surface
   on secondary, both on the rounded --ms-radius-sm corner and both
   lifting 1px on hover rather than just brightening in place. */
.ms-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  font-family: var(--ms-sans); font-weight: 600; font-size: 1rem; text-decoration: none;
  padding: .85rem 1.4rem; border: 2px solid transparent; border-radius: 11px; line-height: 1.2;
  color: var(--ms-ink); cursor: pointer;
}
.ms-btn-primary {
  background: linear-gradient(120deg, var(--ms-amber), var(--ms-brand-2));
  color: var(--ms-accent-ink); border-color: transparent;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ms-amber) 35%, transparent);
}
:root[data-theme="dark"] .ms-btn-primary,
:root:not([data-theme="light"]) .ms-btn-primary { color: var(--ms-accent-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ms-btn-primary { color: var(--ms-accent-ink); }
}
.ms-btn-secondary { background: var(--ms-surface); color: var(--ms-ink); border-color: var(--ms-line); }
.ms-btn-secondary:hover { border-color: var(--ms-amber); }
.ms-btn:not(.ms-btn-primary):not(.ms-btn-secondary) { border-color: var(--ms-line); }
.ms-btn:not(.ms-btn-primary):hover { border-color: var(--ms-amber); }
.ms-btn-meta { font-family: var(--ms-sans); font-weight: 400; font-size: .72rem; letter-spacing: .04em; opacity: .72; }
@media (prefers-reduced-motion: no-preference) {
  .ms-btn { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease; }
}
.ms-btn:hover { transform: translateY(-1px); text-decoration: none; }
.ms-btn-primary:hover { filter: brightness(1.06); }

/* credit line (dl of candidate/supervisor/programme) — hero + documents */
.ms-credit-line { display: grid; gap: .5rem; }
.ms-credit-row { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; font-size: .92rem; }
.ms-credit-row dt {
  font-family: var(--ms-sans); font-weight: 600; color: var(--ms-ink-soft); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; padding-top: .15rem;
}
.ms-credit-row dd { margin: 0; }
@media (max-width: 30rem) {
  .ms-credit-row { grid-template-columns: 1fr; gap: .15rem; }
}

/* bridge link — the "continue to next section" affordance, 02/06/07/08/09 */
.ms-bridge { max-width: 58ch; font-size: 1rem; margin: 0 0 1rem; padding-top: 2rem; border-top: 1px solid var(--ms-line); }
#problem .ms-bridge, #documents .ms-bridge { padding-top: 0; border-top: none; }
.ms-bridge-link { margin: 0; }
.ms-bridge-link a {
  font-family: var(--ms-sans); font-weight: 600; font-size: .92rem; color: var(--ms-ink);
  text-decoration: none; border-bottom: 2px solid var(--ms-amber-text); padding-bottom: .1rem;
}
.ms-bridge-link a:hover { color: var(--ms-amber-text); }
@media (prefers-reduced-motion: no-preference) {
  .ms-bridge-link a { transition: color .15s ease; }
}

/* honesty note — the callout style used to flag a limitation candidly, 06/08 */
.ms-honesty-note {
  font-size: .95rem; max-width: 50rem; padding: 1rem 1.2rem; background: var(--ms-surface);
  border: 1px solid var(--ms-line); border-left: 3px solid var(--ms-amber);
  border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0; margin: 0 0 2.5rem;
}
.ms-honesty-note strong { font-weight: 700; }

/* stat strip — the compact "N / M" tile row shared by 06 and 07 */
.ms-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1px;
  background: var(--ms-line); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden;
  margin: 0 0 1.75rem; padding: 0;
}
.ms-stat { background: var(--ms-surface); padding: 1.1rem 1.1rem 1.2rem; }
.ms-stat .ms-stat-num { font-family: var(--ms-display); font-weight: 700; font-size: 1.5rem; display: block; }
.ms-stat .ms-stat-num .ms-stat-amber { color: var(--ms-amber-text); }
.ms-stat .ms-stat-label { font-size: .8rem; color: var(--ms-ink-soft); margin-top: .2rem; display: block; }

.ms-section, .ms-taxonomy, .ms-catalogue {
  /* 2026-08-22 finishing pass: dropped the tiled blueprint-grid
     background-image here — the reference has no grid/dot texture
     anywhere, flat/solid section backgrounds only (see build notes
     at the top of this file for the fuller record). --ms-grid stays
     defined and in use for hairline borders (.ms-topbar, .ms-bw-zone
     dividers, etc.), just no longer tiled as a decorative pattern. */
  background: var(--ms-paper);
  color: var(--ms-ink);
  font-family: var(--ms-sans);
  line-height: 1.55;
  padding: clamp(2rem, 5vw, 4.5rem) 0;
}
#hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0; }
#footer, .ms-footer {
  background: var(--ms-surface);
  background-image: none;
  border-top: 1px solid var(--ms-line);
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.ms-taxonomy, .ms-catalogue {
  max-width: 62rem; margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 3rem);
}
/* ---------------------------------------------------------------------
   8. SECTION 02 — PROBLEM
   --------------------------------------------------------------------- */

#problem h3 { font-size: clamp(1.2rem, 2.3vw, 1.5rem); margin: 0 0 1.4rem; }
#problem .ms-screens { display: grid; gap: clamp(2.75rem, 5.5vw, 4rem); }
#problem .ms-screen { padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--ms-line); }

#problem .ms-def-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
#problem .ms-def-card {
  background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
  padding: 1.4rem 1.4rem 1.6rem; border-left: 3px solid var(--ms-line);
}
#problem .ms-def-card--boundary { border-left-color: var(--ms-amber); }
#problem .ms-def-icon { color: var(--ms-ink); display: block; margin-bottom: .75rem; }
#problem .ms-def-card--boundary .ms-def-icon { color: var(--ms-amber-text); }
#problem .ms-def-label {
  font-family: var(--ms-display); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ms-ink-soft); margin: 0 0 .5rem;
}
#problem .ms-def-card--boundary .ms-def-label { color: var(--ms-amber-text); }
#problem .ms-def-text { margin: 0; font-size: 1rem; }

/* stat-card pattern ported from the reference hero's .stat-chip: a
   translucent, blurred glass tile rather than a flat bordered box. */
#problem .ms-stat-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); margin-bottom: 2.25rem; }
#problem .ms-stat-tile {
  padding: 1.4rem 1.4rem 1.6rem; border-radius: var(--ms-radius);
  background: color-mix(in srgb, var(--ms-surface) 78%, transparent);
  border: 1px solid var(--ms-line); border-top: 3px solid var(--ms-line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--ms-shadow);
}
#problem .ms-stat-tile--boundary { border-top-color: var(--ms-amber); }
#problem .ms-stat-num { margin: 0 0 .55rem; display: flex; align-items: baseline; gap: .5rem; }
#problem .ms-stat-figure { font-family: var(--ms-display); font-weight: 700; font-size: 2.8rem; line-height: 1; }
#problem .ms-stat-tile--boundary .ms-stat-figure { color: var(--ms-amber-text); }
#problem .ms-stat-unit { font-family: var(--ms-sans); font-size: .82rem; color: var(--ms-ink-soft); }
#problem .ms-stat-caption { margin: 0; font-size: .96rem; max-width: 26ch; }

#problem .ms-bar { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; margin-bottom: 1.1rem; border: 1px solid var(--ms-line); }
#problem .ms-bar-seg--none { background: var(--ms-none); }
#problem .ms-bar-seg--instructional { background: var(--ms-instructional); }
#problem .ms-bar-seg--conditional { background: var(--ms-conditional); }
#problem .ms-bar-seg--structural { background: var(--ms-structural); }

#problem .ms-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
#problem .ms-legend-item { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .1rem .55rem; }
#problem .ms-legend-icon { color: var(--ms-ink-soft); align-self: center; grid-row: 1 / span 2; }
#problem .ms-legend-item:last-child .ms-legend-icon { color: var(--ms-amber-text); }
#problem .ms-legend-label { font-weight: 600; font-size: .92rem; }
#problem .ms-legend-value { font-family: var(--ms-sans); font-weight: 600; font-size: .85rem; color: var(--ms-ink-soft); justify-self: end; }
#problem .ms-legend-desc { grid-column: 2 / span 2; font-size: .85rem; color: var(--ms-ink-soft); }
@media (max-width: 30rem) {
  #problem .ms-legend-item { grid-template-columns: auto 1fr; }
  #problem .ms-legend-value { justify-self: start; }
}

#problem .ms-pullquote { margin: 0 0 1.6rem; padding: 1.6rem 1.8rem; border-left: 3px solid var(--ms-amber); background: var(--ms-surface); border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0; }
#problem .ms-pullquote p { font-weight: 600; font-size: clamp(1.1rem, 2.1vw, 1.4rem); line-height: 1.4; margin: 0 0 .8rem; }
#problem .ms-pullquote footer { font-family: var(--ms-sans); font-size: .8rem; color: var(--ms-ink-soft); }

/* ---------------------------------------------------------------------
   9. SECTION 04 — TAXONOMY (levels + supervision-determinant accordion)
   --------------------------------------------------------------------- */

.ms-taxonomy-heading, .ms-catalogue-heading { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.15; margin: 0 0 1.1rem; max-width: 26ch; }
.ms-taxonomy-intro, .ms-catalogue-intro { max-width: 58ch; font-size: 1.05rem; line-height: 1.65; color: var(--ms-ink-soft); margin: 0 0 2.25rem; }

.ms-block { padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--ms-line); margin-top: clamp(2rem, 4vw, 3rem); }
.ms-block:first-of-type { margin-top: 0; }
.ms-block-heading { font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0 0 .6rem; }
.ms-block-lede { max-width: 58ch; font-size: 1rem; line-height: 1.6; color: var(--ms-ink-soft); margin: 0 0 1.75rem; }

.ms-formula {
  font-family: var(--ms-mono); font-size: clamp(.95rem, 1.6vw, 1.15rem);
  background: var(--ms-surface); border-left: 4px solid var(--ms-amber); border-radius: var(--ms-radius);
  padding: 1rem 1.25rem; max-width: 46rem; margin: 0 0 2.5rem; overflow-x: auto;
}

/* the 3-level taxonomy cards */
.ms-level-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); margin: 0 0 3rem; }
.ms-level-card { background: var(--ms-surface); padding: 1.5rem; border-radius: var(--ms-radius); border-top: 4px solid var(--ms-line); display: flex; flex-direction: column; gap: .85rem; }
.ms-level-card--boundary { border-top-color: var(--ms-amber); }
.ms-level-icon line, .ms-level-icon path { stroke: var(--ms-ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.ms-level-card--boundary .ms-level-icon .ms-level-icon-bar { stroke: var(--ms-amber); stroke-width: 4; }
.ms-level-kicker { font-family: var(--ms-display); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-ink-soft); margin: 0; }
.ms-level-id { color: var(--ms-ink); font-family: var(--ms-display); font-weight: 700; }
.ms-level-heading { font-weight: 700; font-size: 1.15rem; margin: 0; }
.ms-level-def { margin: 0; font-size: .96rem; }
.ms-level-test { margin: .15rem 0 0; font-size: .9rem; color: var(--ms-ink-soft); border-top: 1px solid var(--ms-line); padding-top: .75rem; }
.ms-level-test strong { color: var(--ms-ink); font-weight: 600; }
.ms-level-stat { margin-top: auto; font-family: var(--ms-sans); font-size: .85rem; background: var(--ms-paper); border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); padding: .65rem .75rem; }
.ms-level-stat strong { display: block; font-family: var(--ms-sans); font-weight: 700; font-size: 1.05rem; margin-bottom: .15rem; }

/* supervision-determinant accordion */
.ms-accordion { border-top: 1px solid var(--ms-line); }
.ms-det { border-bottom: 1px solid var(--ms-line); }
.ms-det-summary {
  list-style: none; padding: 1rem .1rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem .9rem; font-weight: 600; font-size: 1rem;
}
.ms-det-summary::-webkit-details-marker { display: none; }
.ms-det-summary::before { content: "+"; font-family: var(--ms-sans); font-weight: 400; color: var(--ms-amber-text); width: 1rem; flex: none; }
.ms-det[open] .ms-det-summary::before { content: "\2013"; }
.ms-det-summary:hover { background: var(--ms-surface); }
.ms-det-id { font-family: var(--ms-display); font-weight: 700; color: var(--ms-ink-soft); font-size: .85rem; }
.ms-det-chip { font-family: var(--ms-sans); font-weight: 600; font-size: .72rem; color: var(--ms-ink-soft); border: 1px solid var(--ms-line); border-radius: 999px; padding: .15rem .5rem; white-space: nowrap; }
.ms-det-chip--good { color: var(--ms-structural); border-color: color-mix(in srgb, var(--ms-structural) 50%, var(--ms-line)); background: color-mix(in srgb, var(--ms-structural) 12%, transparent); }
.ms-det-chip--warn { color: var(--ms-instructional); border-color: color-mix(in srgb, var(--ms-instructional) 50%, var(--ms-line)); background: color-mix(in srgb, var(--ms-instructional) 12%, transparent); }
.ms-det-chip--bad { color: var(--ms-none); border-color: color-mix(in srgb, var(--ms-none) 50%, var(--ms-line)); background: color-mix(in srgb, var(--ms-none) 12%, transparent); }
.ms-det-body { padding: 0 .1rem 1.5rem 1.9rem; font-size: .95rem; max-width: 46rem; }
.ms-det-dl { display: grid; grid-template-columns: 9rem 1fr; gap: .6rem 1.1rem; margin: 0; }
.ms-det-dl dt { font-family: var(--ms-sans); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ms-ink-soft); padding-top: .15rem; }
.ms-det-dl dd { margin: 0; line-height: 1.55; }
.ms-det-dl code, .ms-det-body code { font-size: .87em; background: var(--ms-surface); padding: .05em .32em; border-radius: var(--ms-radius-sm); }
@media (max-width: 34rem) {
  .ms-det-dl { grid-template-columns: 1fr; }
  .ms-det-dl dt { padding-top: .6rem; }
}
@media (max-width: 30rem) { .ms-det-summary { font-size: .95rem; } }

/* ---------------------------------------------------------------------
   9b. SECTION 03 — BOUNDARY (the L(a,G) widget)
   Ported from the widget-authoring stylesheet (sections/taxonomy-
   catalogue.css) so this page needs only the one main.css link the
   brief specifies. Two changes versus that source on the way in, both
   contrast fixes: .ms-bw-marker-tag on the floor marker and the range
   slider's own focus ring used var(--ms-accent) (raw amber, 2.91:1 on
   paper — fails the 3:1 non-text/UI minimum); both now use
   var(--ms-amber-text) instead, matching every other AA fix in this
   file. Progressive enhancement: .ms-bw-table is the complete, no-
   script content; js/widgets.js reads it as its only data source, then
   reveals .ms-bw-interactive (a plain [hidden] attribute in the
   markup, not a rule here, so it stays correct even if this
   stylesheet fails to load) and hides the table via .ms-bw-js.
   --------------------------------------------------------------------- */
.ms-boundary-widget { margin: 0 0 .5rem; }

.ms-bw-table { width: 100%; border-collapse: collapse; font-size: .84rem; background: var(--ms-surface); border-radius: var(--ms-radius); overflow: hidden; }
.ms-bw-table caption { text-align: left; }
.ms-bw-table th, .ms-bw-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--ms-line); text-align: left; font-weight: 400; }
.ms-bw-table thead th { font-family: var(--ms-sans); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ms-ink-soft); }
.ms-bw-table tbody th { font-weight: 600; white-space: nowrap; }
.ms-bw-table tbody tr:last-child th, .ms-bw-table tbody tr:last-child td { border-bottom: 0; }
.ms-bw-table code { font-family: var(--ms-mono); font-size: .92em; }
@media (max-width: 34rem) {
  .ms-bw-table { display: block; overflow-x: auto; }
}

.ms-bw-js .ms-bw-table { display: none; }

.ms-bw-interactive { margin-top: .25rem; }

.ms-bw-track {
  position: relative; display: flex; height: 5.5rem; margin: 0 0 1.75rem;
  border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden; background: var(--ms-surface);
}
.ms-bw-zone {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--ms-display); font-weight: 700; font-size: 1.1rem; color: var(--ms-ink-soft);
  border-right: 1px dashed var(--ms-line);
}
.ms-bw-zone:last-child { border-right: 0; }
.ms-bw-zone-label small {
  display: block; font-family: var(--ms-sans); font-weight: 400; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ms-ink-soft); margin-top: .2rem;
}

/* Both markers share one positioning rule: centred in the third named by
   the --zone custom property (0 = Level I, 1 = II, 2 = III), set inline
   once for the floor (fixed, never touched by JS — the point being made
   is literal) and updated by widgets.js for the ceiling on every slider
   move. */
.ms-bw-floor-marker, .ms-bw-ceiling-marker {
  position: absolute; top: .5rem; bottom: .5rem; width: 3px; border-radius: var(--ms-radius-sm);
  left: calc((var(--zone, 1) + 0.5) * (100% / 3)); transform: translateX(-50%);
}
.ms-bw-floor-marker { background: var(--ms-amber); z-index: 2; }
.ms-bw-ceiling-marker { background: var(--ms-ink); z-index: 1; opacity: .82; }
@media (prefers-reduced-motion: no-preference) {
  .ms-bw-ceiling-marker { transition: left .3s ease; }
}
.ms-bw-marker-tag {
  position: absolute; left: 50%; transform: translate(-50%, -100%);
  top: -.4rem; white-space: nowrap;
  font-family: var(--ms-sans); font-weight: 600; font-size: .66rem;
  background: var(--ms-paper); border: 1px solid currentColor; border-radius: var(--ms-radius-sm); padding: .15rem .4rem;
}
.ms-bw-floor-marker .ms-bw-marker-tag { color: var(--ms-amber-text); }
.ms-bw-ceiling-marker .ms-bw-marker-tag { color: var(--ms-ink); top: auto; bottom: -.4rem; transform: translate(-50%, 100%); }

.ms-bw-slider-label {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem;
  font-family: var(--ms-sans); font-weight: 600; font-size: .92rem; margin: 0 0 .6rem;
}
.ms-bw-slider-value { font-family: var(--ms-sans); font-weight: 400; color: var(--ms-ink-soft); }

.ms-bw-slider { width: 100%; margin: 0 0 1.1rem; accent-color: var(--ms-amber); }
.ms-bw-slider:focus-visible { outline: 3px solid var(--ms-amber-text); outline-offset: 3px; }

.ms-bw-readout {
  font-size: .95rem; line-height: 1.55; padding: .9rem 1.05rem; background: var(--ms-surface);
  border-left: 4px solid var(--ms-ink-soft); border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0; margin: 0; min-height: 1.3em;
}
.ms-bw-readout[data-governing="ceiling"] { border-left-color: var(--ms-amber); }
.ms-bw-readout strong { font-weight: 700; }
.ms-bw-readout code { font-family: var(--ms-mono); font-size: .9em; background: var(--ms-paper); border-radius: var(--ms-radius-sm); padding: .05em .3em; }

/* ---------------------------------------------------------------------
   10. SECTION 05 — GUARDRAIL CATALOGUE (the 12-layer map)
   --------------------------------------------------------------------- */

ul.ms-enforcement-legend {
  list-style: none; margin: 0 0 3rem; padding: 1.25rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  background: var(--ms-surface); border-radius: var(--ms-radius);
}
.ms-enforcement-item { display: flex; gap: .65rem; align-items: flex-start; }
.ms-enforcement-icon line, .ms-enforcement-icon path { stroke: var(--ms-ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.ms-enforcement-item--boundary .ms-enforcement-icon .ms-level-icon-bar { stroke: var(--ms-amber); stroke-width: 4; }
.ms-enforcement-item--none .ms-enforcement-icon { opacity: .4; }
.ms-enforcement-icon { flex: none; margin-top: .15rem; }
.ms-enforcement-label { font-weight: 700; font-size: .92rem; margin: 0 0 .2rem; }
.ms-enforcement-desc { font-size: .83rem; color: var(--ms-ink-soft); margin: 0; line-height: 1.5; }

/* the 12-layer map: one collapsible card per layer, ordered furthest
   from the model (identity/infra) to closest (prose instruction) */
.ms-layer-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(19.5rem, 100%), 1fr)); margin: 0 0 2rem; }
.ms-layer { background: var(--ms-surface); border-radius: var(--ms-radius); border-left: 4px solid var(--ms-line); overflow: hidden; }
.ms-layer--boundary { border-left-color: var(--ms-amber); }
.ms-layer-summary { list-style: none; padding: 1rem 1.1rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .7rem; }
.ms-layer-summary::-webkit-details-marker { display: none; }
.ms-layer-summary:hover { background: var(--ms-paper); }
.ms-layer-num { font-family: var(--ms-display); font-weight: 700; font-size: 1.05rem; flex: none; }
.ms-layer-name { font-weight: 600; flex: 1 1 8rem; min-width: 8rem; }
.ms-layer-count { font-family: var(--ms-sans); font-size: .8rem; color: var(--ms-ink-soft); flex: none; }
.ms-layer-summary::after { content: "+"; font-family: var(--ms-sans); color: var(--ms-amber-text); margin-left: auto; flex: none; }
.ms-layer[open] .ms-layer-summary::after { content: "\2013"; }
.ms-layer-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--ms-line); }
.ms-layer-blurb { font-size: .92rem; line-height: 1.55; margin: .9rem 0; }
.ms-layer-boundary-note {
  font-family: var(--ms-sans); font-size: .8rem; color: var(--ms-amber-text);
  border: 1px dashed var(--ms-amber-text); border-radius: var(--ms-radius-sm); padding: .5rem .65rem; margin: .9rem 0 0;
}
ul.ms-layer-mix { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.ms-layer-mix-chip { font-family: var(--ms-sans); font-size: .72rem; color: var(--ms-ink-soft); }
.ms-layer-examples { font-size: .85rem; margin: 0; padding: 0; list-style: none; }
.ms-layer-ex { display: block; margin: .4rem 0; padding-left: .9rem; border-left: 2px solid var(--ms-line); }
.ms-layer-ex-tag { font-size: .72rem; color: var(--ms-ink-soft); }
/* population-status pill (present/partial/proposed) inside a catalogue
   example line — reference's own .pop-tag/.pop-present/.pop-partial/
   .pop-proposed pattern, reusing this file's existing four-way
   enforcement palette rather than new colours. */
.ms-status {
  display: inline-block; font-family: var(--ms-sans); font-weight: 700; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .05em; padding: .1rem .45rem; border-radius: 999px;
}
.ms-status--good { color: var(--ms-structural); background: color-mix(in srgb, var(--ms-structural) 14%, transparent); }
.ms-status--warn { color: var(--ms-instructional); background: color-mix(in srgb, var(--ms-instructional) 14%, transparent); }
.ms-status--neutral { color: var(--ms-ink-soft); background: color-mix(in srgb, var(--ms-ink-soft) 12%, transparent); }

ul.ms-cat-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: 1px;
  background: var(--ms-line); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden;
  margin-top: 2.5rem; list-style: none; padding: 0;
}
.ms-cat-stat { background: var(--ms-surface); padding: 1.15rem 1.15rem 1.3rem; }
.ms-cat-stat-num { font-family: var(--ms-display); font-weight: 700; font-size: 1.6rem; display: block; }
.ms-cat-stat-num--accent { color: var(--ms-amber-text); }
.ms-cat-stat-label { font-size: .8rem; color: var(--ms-ink-soft); margin-top: .25rem; display: block; }
.ms-cat-stat-label code { font-size: .95em; }

/* ---------------------------------------------------------------------
   11. SECTION 06 — EVALUATION (the composite-index dashboard)
   --------------------------------------------------------------------- */

#evaluation code { font-family: var(--ms-mono); }

#evaluation .ms-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .9rem;
  margin: 0 0 2.5rem; padding: 1.2rem; background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
}
#evaluation .ms-legend-item, #domains .ms-legend-item { display: flex; gap: .65rem; align-items: flex-start; }
#evaluation .ms-legend-item svg { flex: none; margin-top: .2rem; color: var(--ms-ink); }
#evaluation .ms-legend-item b { display: block; font-size: .92rem; font-family: var(--ms-sans); }
#evaluation .ms-legend-item p { margin: .15rem 0 0; font-size: .83rem; color: var(--ms-ink-soft); }

/* the eight composite-index cards */
#evaluation .ms-ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19.5rem, 100%), 1fr)); gap: 1rem; margin: 0 0 2rem; }
#evaluation .ms-ci-card { background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
#evaluation .ms-ci-card[data-readiness="derivable"] { border-top: 3px solid var(--ms-ink-soft); }
#evaluation .ms-ci-card[data-readiness="absent"] { border-top: 3px dashed var(--ms-line); }
#evaluation .ms-ci-card[data-readiness="available"] { border-top: 3px solid var(--ms-amber); }
#evaluation .ms-ci-card[data-inverted="true"] { border-color: var(--ms-amber-text); }
#evaluation .ms-ci-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
#evaluation .ms-ci-id { font-family: var(--ms-display); font-weight: 700; font-size: 1.05rem; }
#evaluation .ms-ci-badge { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ms-sans); font-weight: 600; font-size: .74rem; color: var(--ms-ink-soft); border: 1px solid var(--ms-line); border-radius: 999px; padding: .15rem .5rem; }
#evaluation .ms-ci-badge svg { flex: none; color: var(--ms-ink); }
#evaluation .ms-ci-inverted {
  display: flex; align-items: center; gap: .5rem; font-family: var(--ms-sans); font-size: .78rem; color: var(--ms-amber-text);
  border: 1px dashed var(--ms-amber-text); border-radius: var(--ms-radius-sm); padding: .45rem .6rem; margin: 0; order: -1;
}
#evaluation .ms-ci-inverted svg { flex: none; }
#evaluation .ms-ci-name { font-weight: 700; }
#evaluation .ms-ci-purpose { font-size: .92rem; margin: 0; }
#evaluation .ms-ci-range { font-size: .85rem; color: var(--ms-ink-soft); margin: 0; border-top: 1px solid var(--ms-line); padding-top: .6rem; }
#evaluation .ms-ci-range-label { font-family: var(--ms-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--ms-ink-soft); display: block; margin-bottom: .2rem; }
#evaluation details.ms-ci-formula-toggle { margin-top: auto; }
#evaluation details.ms-ci-formula-toggle summary { font-family: var(--ms-sans); font-weight: 600; font-size: .78rem; color: var(--ms-amber-text); list-style: none; }
#evaluation details.ms-ci-formula-toggle summary::-webkit-details-marker { display: none; }
#evaluation details.ms-ci-formula-toggle summary::before { content: "+ "; }
#evaluation details.ms-ci-formula-toggle[open] summary::before { content: "\2013 "; }
#evaluation .ms-ci-formula { font-family: var(--ms-mono); font-size: .78rem; background: var(--ms-paper); border-radius: var(--ms-radius-sm); padding: .55rem .65rem; margin: .5rem 0 0; overflow-x: auto; white-space: nowrap; }

/* ---------------------------------------------------------------------
   12. SECTION 07 — APPLICABILITY DOMAINS (the domain grid)
   --------------------------------------------------------------------- */

#domains code { font-family: var(--ms-mono); }
#domains .ms-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .9rem;
  margin: 0 0 2.5rem; padding: 1.2rem; background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
}
#domains .ms-legend-item svg { flex: none; margin-top: .2rem; }
#domains .ms-legend-item b { display: block; font-size: .92rem; }
#domains .ms-legend-item p { margin: .15rem 0 0; font-size: .83rem; color: var(--ms-ink-soft); }
#domains .ms-legend-icon-live { color: var(--ms-amber-text); }
#domains .ms-legend-icon-illustrative { color: var(--ms-ink-soft); }

#domains .ms-domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1rem; margin: 0 0 2.5rem; }
#domains .ms-domain-card { background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
#domains .ms-domain-card[data-instrumented="true"] { border-top: 3px solid var(--ms-amber-text); }
#domains .ms-domain-card[data-instrumented="false"] { border-top: 3px dashed var(--ms-line); }
#domains .ms-domain-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
#domains .ms-domain-id { font-family: var(--ms-display); font-weight: 700; font-size: 1.02rem; flex: none; }
#domains .ms-domain-name { font-weight: 700; margin: 0; flex: 1 1 10rem; }
#domains .ms-domain-badge { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ms-sans); font-weight: 600; font-size: .72rem; border-radius: 999px; padding: .2rem .5rem; white-space: nowrap; }
#domains .ms-domain-badge svg { flex: none; }
#domains .ms-domain-badge--instrumented { color: var(--ms-amber-text); border: 1px solid var(--ms-amber-text); }
#domains .ms-domain-badge--illustrative { color: var(--ms-ink-soft); border: 1px solid var(--ms-line); }
#domains .ms-domain-def { font-size: .9rem; margin: 0; }
#domains .ms-domain-level { font-size: .8rem; color: var(--ms-ink-soft); margin: auto 0 0; border-top: 1px solid var(--ms-line); padding-top: .55rem; }
#domains .ms-domain-level-label { font-family: var(--ms-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; color: var(--ms-ink-soft); display: block; margin-bottom: .15rem; }

#domains .ms-footnote { font-size: .88rem; max-width: 52rem; color: var(--ms-ink-soft); margin: 0 0 2.5rem; }

/* ---------------------------------------------------------------------
   13. SECTION 08 — REFERENCE IMPLEMENTATION
   --------------------------------------------------------------------- */

#reference-impl code { font-family: var(--ms-mono); }

#reference-impl .ms-topology { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 1.5rem; padding: 1rem; color: var(--ms-ink-soft); }
#reference-impl .ms-topology-node { font-family: var(--ms-sans); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); padding: .4rem .7rem; background: var(--ms-surface); color: var(--ms-ink); }
#reference-impl .ms-topology-link { flex: none; color: var(--ms-amber); }
/* the two node labels plus the connector need ~467px on one line;
   below that, stack them instead of letting the row overflow */
@media (max-width: 30rem) {
  #reference-impl .ms-topology { flex-direction: column; gap: .5rem; }
  #reference-impl .ms-topology-link { transform: rotate(90deg); }
}

#reference-impl .ms-box-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); margin: 0 0 2rem; }
#reference-impl .ms-box-card { background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: 1.4rem 1.4rem 1.6rem; border-left: 3px solid var(--ms-line); }
#reference-impl .ms-box-card--boundary { border-left-color: var(--ms-amber); }
#reference-impl .ms-box-label { font-family: var(--ms-display); font-size: .78rem; color: var(--ms-ink-soft); letter-spacing: .03em; margin: 0 0 .5rem; }
#reference-impl .ms-box-card--boundary .ms-box-label { color: var(--ms-amber-text); }
#reference-impl .ms-box-card p { margin: 0 0 .5rem; font-size: .96rem; }
#reference-impl .ms-box-card ul { margin: .4rem 0 0; padding-left: 1.15rem; font-size: .94rem; }
#reference-impl .ms-box-card li { margin: 0 0 .45rem; }
#reference-impl .ms-box-card li:last-child { margin-bottom: 0; }

#reference-impl .ms-crossbox { font-size: 1rem; max-width: 52rem; margin: 0 0 2.25rem; }
#reference-impl .ms-crossbox code { font-size: .88em; background: var(--ms-surface); border-radius: var(--ms-radius-sm); padding: .05em .3em; }

/* capabilities — the honest product-feature list, 08/reference-impl */
#reference-impl .ms-capabilities { margin: 0 0 2.25rem; }
#reference-impl .ms-capabilities h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
#reference-impl .ms-capabilities-lede { font-size: .95rem; color: var(--ms-ink-soft); max-width: 50rem; margin: 0 0 1rem; }
#reference-impl .ms-capability-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
#reference-impl .ms-capability-list li { background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); padding: .85rem 1rem; font-size: .9rem; }
#reference-impl .ms-capability-list b { display: block; font-family: var(--ms-sans); font-size: .92rem; margin-bottom: .25rem; }
#reference-impl .ms-capability-list code { font-size: .88em; background: var(--ms-paper); border-radius: var(--ms-radius-sm); padding: .05em .3em; }

#reference-impl .ms-mode-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .9rem;
  margin: 0 0 2rem; padding: 1.2rem; background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
}
#reference-impl .ms-mode-item { display: flex; gap: .65rem; align-items: flex-start; }
#reference-impl .ms-mode-item svg { flex: none; margin-top: .2rem; color: var(--ms-ink); }
#reference-impl .ms-mode-item--enforced svg { color: var(--ms-amber-text); }
#reference-impl .ms-mode-item b { display: block; font-size: .92rem; font-family: var(--ms-sans); }
#reference-impl .ms-mode-item p { margin: .15rem 0 0; font-size: .85rem; color: var(--ms-ink-soft); }

#reference-impl .ms-cta-block { margin: 0 0 2.5rem; }
#reference-impl .ms-cta-caption { font-family: var(--ms-sans); font-size: .8rem; color: var(--ms-ink-soft); margin: .6rem 0 0; }

/* ---------------------------------------------------------------------
   12. THE GUARDRAIL LAB (js/lab.js) — flagship interactive, unnumbered,
   sits between 05 (catalogue) and 06 (evaluation).

   Mechanics adapted from the reference research-site build this showroom
   ported js/lab.js from. Every class on the STATIC wrapper markup below
   uses this file's own ms-lab-/ms-cs-/ms-stage- prefixes. A handful of
   classes are left exactly as-is on purpose — .cs-btn, .cs-title,
   .cs-grcount, .cs-dist, .dist-s/.dist-c/.dist-i/.dist-n, .wall-brick,
   .b-s/.b-c/.b-i, .puck, .travel, .resolved-block, .resolved-pass,
   .fade, .verdict, .log-verdict, .log-name, .tick — because js/lab.js
   creates those specific elements at runtime and hardcodes those exact
   class strings; renaming them here would just silently unstyle them.
   Selectors below scope each one under its ms- prefixed container
   instead of renaming it.

   Radius (var(--ms-radius) shell, matching .ms-layer/.ms-bw-track;
   var(--ms-radius-sm) inner panel and control, matching .ms-bw-readout/
   #evaluation .ms-legend/.ms-btn) matches this file's existing card
   idiom exactly. Pre-2026-08-22 this section deliberately avoided
   box-shadow and color-mix() to match the rest of the file; the
   2026-08-22 reskin pass introduced both site-wide (buttons, the new
   nav bar, --ms-shadow) porting the reference's own mechanism, so the
   "wall block" pulse below still uses its original plain background-
   colour keyframe only because that specific glow effect was never
   revisited, not because color-mix()/box-shadow remain off-limits.
   --------------------------------------------------------------------- */

.ms-lab-shell {
  margin-top: .5rem; border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
  background: var(--ms-surface); overflow: hidden;
}

.ms-lab-controls {
  padding: 1.15rem clamp(1rem, 3vw, 1.6rem); border-bottom: 1px solid var(--ms-line);
  display: flex; flex-direction: column; gap: .9rem;
}
.ms-cs-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.ms-cs-picker .cs-btn {
  font-family: var(--ms-display); font-weight: 600; font-size: .8rem;
  border: 1px solid var(--ms-line); background: var(--ms-paper); color: var(--ms-ink);
  border-radius: var(--ms-radius-sm); padding: .4rem .65rem; cursor: pointer;
}
.ms-cs-picker .cs-btn:hover { border-color: var(--ms-ink-soft); }
.ms-cs-picker .cs-btn[aria-checked="true"] {
  background: var(--ms-amber); color: var(--ms-accent-ink); border-color: var(--ms-amber);
}
.ms-cs-picker .cs-btn:focus-visible { outline: 3px solid var(--ms-amber-text); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ms-cs-picker .cs-btn { transition: border-color .15s ease; }
}

.ms-cs-readout { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-size: .88rem; }
.ms-cs-readout .cs-title { font-family: var(--ms-display); font-weight: 700; }
.ms-cs-readout .cs-grcount { color: var(--ms-ink-soft); font-size: .82rem; }
.ms-cs-readout .cs-dist {
  display: flex; height: .6rem; border-radius: 999px; overflow: hidden; background: var(--ms-line);
  flex: 1 1 10rem; min-width: 8rem; max-width: 21rem;
}
.ms-cs-readout .cs-dist span { height: 100%; }
.ms-cs-readout .dist-s { background: var(--ms-structural); }
.ms-cs-readout .dist-c { background: var(--ms-conditional); }
.ms-cs-readout .dist-i { background: var(--ms-instructional); }
.ms-cs-readout .dist-n { background: var(--ms-none); }
@media (prefers-reduced-motion: no-preference) {
  .ms-cs-readout .cs-dist span { transition: width .5s ease; }
}

.ms-lab-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ms-lab-play { min-width: 7rem; align-items: center; justify-content: center; }
.ms-lab-play:focus-visible { outline: 3px solid var(--ms-amber-text); outline-offset: 2px; }

.ms-lab-toggle { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .88rem; font-weight: 500; }
.ms-lab-toggle input { position: absolute; opacity: 0; width: 2.4rem; height: 1.3rem; margin: 0; cursor: pointer; }
.ms-lab-toggle-track {
  width: 2.4rem; height: 1.3rem; border-radius: 999px; background: var(--ms-paper);
  border: 1px solid var(--ms-line); position: relative; flex: none;
}
.ms-lab-toggle-track::after {
  content: ""; position: absolute; top: .12rem; left: .12rem; width: .95rem; height: .95rem;
  border-radius: 50%; background: var(--ms-ink-soft);
}
.ms-lab-toggle input:checked + .ms-lab-toggle-track { background: var(--ms-none); border-color: var(--ms-none); }
.ms-lab-toggle input:checked + .ms-lab-toggle-track::after { transform: translateX(1.1rem); background: var(--ms-surface); }
.ms-lab-toggle input:focus-visible + .ms-lab-toggle-track { outline: 3px solid var(--ms-amber-text); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ms-lab-toggle-track, .ms-lab-toggle-track::after { transition: background .2s ease, transform .2s ease; }
}

.ms-lab-speed { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 500; }
.ms-lab-speed input { accent-color: var(--ms-amber); width: 6.5rem; }
.ms-lab-speed input:focus-visible { outline: 3px solid var(--ms-amber-text); outline-offset: 2px; }

.ms-stage {
  position: relative; height: 14.4rem; background: var(--ms-paper);
  border-bottom: 1px solid var(--ms-line); overflow: hidden;
}
.ms-stage-label {
  font-family: var(--ms-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ms-ink-soft);
}
.ms-stage-agents {
  position: absolute; left: .9rem; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; width: 3.4rem;
}
.ms-stage-agent-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--ms-amber); }
@media (prefers-reduced-motion: no-preference) {
  .ms-stage-agent-dot { animation: ms-agent-pulse 2.2s ease-in-out infinite; }
  .ms-stage-agent-dot:nth-child(2) { animation-delay: .5s; }
  .ms-stage-agent-dot:nth-child(3) { animation-delay: 1.1s; }
}
@keyframes ms-agent-pulse { 50% { transform: scale(1.35); opacity: .75; } }

.ms-stage-wall {
  position: absolute; left: 68%; top: .75rem; bottom: .75rem; width: 2.9rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem; border-radius: var(--ms-radius-sm);
}
.ms-stage-wall .ms-stage-label { writing-mode: vertical-rl; }
.ms-stage-wall-bricks {
  flex: 1; width: .9rem; border-radius: .45rem; background: var(--ms-line);
  overflow: hidden; display: flex; flex-direction: column-reverse;
}
.ms-stage-wall-bricks .wall-brick { width: 100%; }
.ms-stage-wall-bricks .wall-brick.b-s { background: var(--ms-structural); }
.ms-stage-wall-bricks .wall-brick.b-c { background: var(--ms-conditional); }
.ms-stage-wall-bricks .wall-brick.b-i { background: var(--ms-instructional); }
.ms-stage-world { position: absolute; right: .75rem; top: 0; bottom: 0; display: flex; align-items: center; }
.ms-stage-lanes { position: absolute; left: 5rem; right: 0; top: 0; bottom: 0; }

.ms-stage-lanes .puck {
  position: absolute; left: 0; top: var(--lane, 40%);
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ms-display); font-weight: 600; font-size: .68rem;
  padding: .25rem .55rem; border-radius: 999px;
  background: var(--ms-surface); border: 1px solid var(--ms-line);
  white-space: nowrap; will-change: transform, opacity; z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .ms-stage-lanes .puck { transition: transform var(--dur, 900ms) linear, opacity .4s ease; }
}
.ms-stage-lanes .puck::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--pc, var(--ms-ink-soft));
}
.ms-stage-lanes .puck.travel { transform: translateX(var(--dist)); }
.ms-stage-lanes .puck .verdict { font-size: .6rem; font-weight: 700; letter-spacing: .05em; color: var(--pc); }
.ms-stage-lanes .puck.resolved-block { transform: translateX(calc(var(--dist) - 1.6rem)) scale(.94); border-color: var(--ms-structural); }
.ms-stage-lanes .puck.resolved-pass { transform: translateX(calc(var(--dist) + var(--past, 11rem))); }
.ms-stage-lanes .puck.fade { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ms-stage-wall.wall-flash { animation: ms-wall-flash .5s ease; }
}
@keyframes ms-wall-flash { 30% { background-color: var(--ms-structural); } }

.ms-lab-readout {
  padding: 1.15rem clamp(1rem, 3vw, 1.6rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.1rem 1.6rem;
}
.ms-lab-counters { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ms-lab-counter { background: var(--ms-paper); border-radius: var(--ms-radius-sm); padding: .6rem .8rem; }
.ms-lab-counter-num { display: block; font-family: var(--ms-display); font-weight: 700; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.ms-lab-counter-num.tick { animation: ms-num-pop .3s ease; }
@keyframes ms-num-pop { 40% { transform: scale(1.18); } }
.ms-lab-counter-label { font-size: .74rem; color: var(--ms-ink-soft); }
.ms-lab-counter--warn .ms-lab-counter-num { color: var(--ms-none); }
.ms-lab-counter--good .ms-lab-counter-num { color: var(--ms-structural); }
.ms-lab-counter--info .ms-lab-counter-num { color: var(--ms-conditional); }

.ms-lab-insight { font-size: .92rem; font-weight: 500; margin: 0 0 .7rem; }
.ms-lab-log {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: .35rem; max-height: 10.5rem; overflow: hidden;
}
.ms-lab-log li {
  font-size: .78rem; padding: .4rem .6rem; border-radius: var(--ms-radius-sm); background: var(--ms-paper);
  display: flex; gap: .5rem; align-items: baseline; border-left: 3px solid var(--lc, var(--ms-line));
}
@media (prefers-reduced-motion: no-preference) {
  .ms-lab-log li { animation: ms-log-in .3s ease; }
}
@keyframes ms-log-in { from { opacity: 0; transform: translateY(-.4rem); } }
.ms-lab-log .log-verdict { font-weight: 700; font-size: .68rem; letter-spacing: .05em; color: var(--lc); flex: none; min-width: 7.4rem; }
.ms-lab-log .log-name { color: var(--ms-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ms-lab-caption { font-size: .85rem; color: var(--ms-ink-soft); margin: .9rem 0 0; }

@media (max-width: 47.5rem) {
  .ms-lab-readout { grid-template-columns: 1fr; }
  .ms-stage-wall { left: 62%; }
}
button.ms-btn:disabled{opacity:.6;cursor:not-allowed;}

/* Formula rendering: KaTeX output block, centred with a little breathing
   room so it reads as a real equation rather than inline code. */
#tab-scientific .katex-formula { display: inline-block; font-size: 1.05em; }
#tab-scientific .ms-formula .katex-formula,
#tab-scientific .ms-ci-formula .katex-formula { display: block; margin: .4rem 0; overflow-x: auto; }

/* Intro row: title + lede on the left, lang/share controls on the right. */
#tab-scientific .sci-intro { padding: 0 0 1.75rem; border-bottom: 1px solid var(--ms-line); margin-bottom: 2rem; }
#tab-scientific .sci-intro-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
#tab-scientific .sci-intro-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: .3rem 0 .6rem; }
#tab-scientific .sci-intro-lede { max-width: 56ch; color: var(--ms-ink-soft); font-size: .96rem; margin: 0; }
#tab-scientific .sci-intro-actions { display: flex; gap: .6rem; flex: none; flex-wrap: wrap; }
#tab-scientific .sci-lang-btn .sci-lang-current { font-weight: 700; }
#tab-scientific .sci-lang-btn .sci-lang-other { opacity: .6; }

/* Public-share panel (Workstream 2) mounts here. */
#sci-share-panel:not([hidden]) {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 1.1rem 1.3rem; margin: 0 0 2rem;
}