/* =====================================================================
   MeridianSeal showroom — site-wide stylesheet
   Concept A "Boundary Line", reskinned onto the NeurIPS 2026
   "Architectural Governance of Agentic AI" materials-site design
   system (source of truth: epi-unisinos-neurips2026.falconng.com and
   its /materials/website/css/main.css). Same --ms-* token NAMES as
   before, values now sourced from that reference: indigo/purple brand
   (--ms-amber replaced the gold accent with the reference's --brand,
   #5a63e8 light / #8b93ff dark; --ms-amber-text is an alias of it, the
   reference brand hue is already text-safe with no separate darkened
   variant needed), the same four-way structural/conditional/
   instructional/none enforcement palette, Space Grotesk added as the
   display face for headings/kickers/id labels alongside the existing
   Inter body and IBM Plex Mono/JetBrains Mono label-and-code faces
   (kept — the reference has no mono face of its own, but this
   showroom's AC-xxx/L0x id-chip and code-block texture predates this
   pass and was not asked to be removed), plus a 14px/9px rounded-
   component radius scale, a soft elevation shadow and a fixed,
   blurred nav bar with a scroll-progress bar, all lifted from the
   same reference. Blueprint-grid texture, the step-shifted logo mark,
   the composite-index dashboard (06), the 12-layer guardrail map (05),
   the domain grid (07) and the taxonomy cards (04) are unchanged in
   structure, plus every shared primitive (buttons, eyebrows, stat
   blocks, bridge links, credit lines, honesty notes) reused across the
   eleven sections.

   Loading model: one <link rel="stylesheet" href="/css/main.css"> in
   <head>, sections assembled as plain markup with NO per-section
   <style> block (the /sections/*.html fragments carry an inline
   duplicate of an earlier draft of these rules for standalone preview
   only — see /preview/*.html — the deployed page should not repeat
   them). Selectors below intentionally mirror the ids and classes
   already fixed by the section markup (#hero, #problem, .ms-taxonomy,
   .ms-domain-card, etc.) so this file is a drop-in.

   Fonts: this stylesheet references the stacks only. <head> must load
   Inter, Space Grotesk, IBM Plex Sans, IBM Plex Mono and JetBrains
   Mono from Google Fonts (see /preview/*.html for the exact <link>,
   and index.html's own <head> for the deployed one) — the system-stack
   fallbacks below keep the page fully legible if that fails.

   Contrast fixes applied here versus the section drafts (see build
   report for the full numeric verification):
     - Raw --ms-amber (#BF892A) on --ms-paper (#F5F7FB) is 2.87:1 — it
       fails both AA text (4.5:1) and the 3:1 non-text/UI-component
       minimum (WCAG 1.4.11). Several drafts used it for
       :focus-visible outlines and hover link colour in the light
       theme. Every such use below is switched to --ms-amber-text (a
       same-hue, darkened variant, #8B631E, 5.02:1 on paper / 5.38:1
       on surface), and --ms-amber stays reserved for large fills,
       thick borders and the logo, matched everywhere by an
       icon+label so colour is never the only signal.
     - .ms-eyebrow in the 04/05 draft carried the amber accent as a
       decorative kicker on every section label — that is the one
       accent-only-for-boundaries rule breaking itself, since a routine
       "05 — Guardrail catalogue" label is not a boundary element. Reset
       to the ink-soft treatment used by the other nine sections.
     - Auto-fill/auto-fit grids using minmax(19.5rem,1fr)-class tracks
       overflow horizontally below ~360px (iPhone SE/older Android at
       320–375px, minus container padding, is narrower than one track).
       Every multi-column grid below uses minmax(min(Xrem,100%),1fr) so
       the minimum track can never exceed the viewport.

   2026-08-22 pass (live-tested at 390px with Playwright):
     - --ms-amber (light mode) brightened from #BF892A to #DAAA56: same
       hue/saturation (H38° S64%), lightness +14pp (45.7%→59.7%). This
       token is a fill colour only (buttons, highlights, the logo bar);
       --ms-accent-ink is what sits on top of it and still clears
       7.9:1, comfortably past the 3:1 UI-component/large-text bar this
       usage is held to. --ms-amber-text (the separate AA body-text
       variant, #8B631E, computed against --ms-paper/--ms-surface) was
       re-checked and is unaffected — left as-is.
     - Base code/pre/kbd/samp rule gained overflow-wrap: anywhere plus
       a word-break: break-word fallback so a long unbroken token in
       running prose wraps instead of forcing the page wide. This is
       inert wherever a block deliberately stays single-line via its
       own white-space: nowrap + overflow-x: auto (.ms-formula, the
       .ms-ci-formula composite-index formulas) — nowrap already wins
       over overflow-wrap, verified empirically, so those keep
       scrolling horizontally inside their own container exactly as
       before rather than wrapping mid-formula.
     - #reference-impl .ms-topology (the plane/unisinos host-topology
       diagram) is a single-row flex layout whose two node labels plus
       the connecting glyph need ~467px to sit on one line; below that
       (≤30rem / 480px) it stacks to a column instead and the connector
       glyph rotates 90° to match, which is what was overflowing the
       viewport by ~4px at 390px.

   2026-08-22 reskin pass (design-system port from the NeurIPS 2026
   materials site, epi-unisinos-neurips2026.falconng.com):
     - Every hex value above this line is superseded. --ms-amber and
       --ms-amber-text are no longer a gold fill + a separately
       darkened AA-text variant of it — both now hold the reference's
       --brand value directly (#5A63E8 light / #8B93FF dark), which the
       reference already verified as safe for both large fills (paired
       with --ms-accent-ink, its --on-brand) and standalone text/icon
       use at that colour's own contrast on --ms-paper/--ms-surface, so
       the two tokens are declared as one aliasing the other rather
       than two independent literals that could drift apart.
     - New tokens, not present before this pass: --ms-brand-2 (the
       reference's second gradient stop, used with --ms-amber for the
       hero-accent text gradient and the primary-button fill),
       --ms-shadow (soft elevation, reference's --shadow), --ms-radius /
       --ms-radius-sm (14px / 9px rounded-component scale, reference's
       --radius / --radius-sm), --ms-nav-h (62px, the fixed top bar's
       height, used for both its own layout and every section's
       scroll-margin-top), and --ms-display (the Space Grotesk display
       stack, reference's --font-display). None of these vary by theme
       except through the colour tokens they reference.
     - --ms-structural/--ms-conditional/--ms-instructional/--ms-none
       (the four-way enforcement palette) now hold the reference's own
       values for that same four-way scale, light and dark, in place of
       this file's earlier independently-chosen hues.
     - --ms-grid (the decorative blueprint-grid texture line colour)
       now aliases the reference's --line-soft rather than its own
       literal, matching the reference's own use of the softer line
       token for decorative/structural chrome versus the firmer --line
       for real borders and dividers.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. RESET
   --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--ms-display); } /* reference: Space Grotesk for display/headings */
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ---------------------------------------------------------------------
   2. DESIGN TOKENS — Concept A "Boundary Line"
   Three-state model: OS light (default), OS dark (media query, unless
   overridden), manual override via [data-theme] on <html> written by
   #theme-toggle. Hue is constant across themes; only lightness moves.
   --------------------------------------------------------------------- */

:root {
  /* -- light (default) -- values ported from the NeurIPS 2026
     materials-site design system (epi-unisinos-neurips2026.falconng.com,
     css/main.css :root). Names unchanged from this file's own earlier
     draft; only the colours moved. */
  --ms-paper:      #F6F7FC;  /* page background — reference --bg */
  --ms-surface:     #FFFFFF; /* card / raised-block background — reference --surface */
  --ms-ink:         #171C2B; /* primary text — reference --text */
  --ms-ink-soft:    #59647C; /* secondary / muted text — reference --muted */
  --ms-grid:        #E5E9F5; /* blueprint-grid texture lines (decorative) — reference --line-soft */
  --ms-line:        #D9DFEF; /* hairline borders/dividers — reference --line */
  --ms-amber:       #5A63E8; /* boundary/threshold accent — fills, thick borders, the logo. Reference --brand (indigo). Never body text except via --ms-amber-text below, which is the same value: the reference brand hue is already AA-safe standalone, no separate darkened variant needed. */
  --ms-amber-text:  var(--ms-amber);
  --ms-accent-ink:  #FFFFFF; /* text/icon drawn ON a full-strength accent fill — button labels, selection highlight — reference --on-brand */
  --ms-brand-2:     #9A55E0; /* second gradient stop paired with --ms-amber — reference --brand-2 */
  --ms-shadow:      0 16px 44px rgba(23, 28, 43, 0.12); /* reference --shadow */
  --ms-radius:      14px; /* reference --radius — theme-invariant */
  --ms-radius-sm:   9px;  /* reference --radius-sm — theme-invariant */
  --ms-nav-h:       62px; /* fixed top bar height — reference --nav-h */

  --ms-structural:    #0F9D6B; /* guardrail-enforcement scale — structural (positive green) — reference --structural */
  --ms-conditional:   #0D78C9; /* guardrail-enforcement scale — conditional (royal blue) — reference --conditional */
  --ms-instructional: #A86F07; /* guardrail-enforcement scale — instructional (warning amber-orange) — reference --instructional */
  --ms-none:          #D6455F; /* guardrail-enforcement scale — none (negative red) — reference --none */

  --ms-sans: "Inter", -apple-system, BlinkMacSystemFont, "IBM Plex Sans", sans-serif;
  --ms-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "IBM Plex Sans", sans-serif; /* headings, kickers, id labels — reference --font-display */
  --ms-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* aliases matching the alternate token names used by an earlier
     04/05 draft (taxonomy-catalogue.css) — kept so either naming
     scheme resolves to the same rendered colour if that file is ever
     loaded alongside this one. */
  --ms-bg: var(--ms-paper);
  --ms-fg: var(--ms-ink);
  --ms-fg-muted: var(--ms-ink-soft);
  --ms-accent: var(--ms-amber);
  --ms-raised: var(--ms-surface);
  --ms-hairline: var(--ms-line);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ms-paper:     #0A0D14;
    --ms-surface:   #131A2A;
    --ms-ink:       #E9EDF6;
    --ms-ink-soft:  #9AA6BF;
    --ms-grid:      #1D2740;
    --ms-line:      #263149;
    --ms-amber:     #8B93FF;
    --ms-amber-text:var(--ms-amber);
    --ms-accent-ink:#0A0D14;
    --ms-brand-2:   #C08BFF;
    --ms-shadow:    0 18px 50px rgba(0, 0, 0, 0.45);

    --ms-structural:    #3DDC97;
    --ms-conditional:   #4DB8FF;
    --ms-instructional: #FFC24D;
    --ms-none:          #FF6B81;
  }
}
:root[data-theme="dark"] {
  --ms-paper:     #0A0D14;
  --ms-surface:   #131A2A;
  --ms-ink:       #E9EDF6;
  --ms-ink-soft:  #9AA6BF;
  --ms-grid:      #1D2740;
  --ms-line:      #263149;
  --ms-amber:     #8B93FF;
  --ms-amber-text:var(--ms-amber);
  --ms-accent-ink:#0A0D14;
  --ms-brand-2:   #C08BFF;
  --ms-shadow:    0 18px 50px rgba(0, 0, 0, 0.45);

  --ms-structural:    #3DDC97;
  --ms-conditional:   #4DB8FF;
  --ms-instructional: #FFC24D;
  --ms-none:          #FF6B81;
}
/* :root[data-theme="light"] needs no explicit block: the base :root
   values above already are light, and the dark-media block is guarded
   by :not([data-theme="light"]), so a manual "light" choice on a
   dark-OS system falls straight through to the light defaults. */

/* ---------------------------------------------------------------------
   3. BASE ELEMENTS
   --------------------------------------------------------------------- */

html {
  background: var(--ms-paper);
  color-scheme: light dark;
}
body {
  background: var(--ms-paper);
  color: var(--ms-ink);
  font-family: var(--ms-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
code, pre, kbd, samp { font-family: var(--ms-mono); overflow-wrap: anywhere; word-break: break-word; }
hr { border: none; border-top: 1px solid var(--ms-line); margin: 2rem 0; }
details > summary { cursor: pointer; }
::selection { background: var(--ms-amber); color: var(--ms-accent-ink); }
:root[data-theme="dark"] ::selection,
:root:not([data-theme="light"]) ::selection { color: var(--ms-accent-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::selection { color: var(--ms-accent-ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Focus-visible baseline: every interactive element gets the same,
   AA-verified, per-theme-correct ring unless a component below states
   a more specific one. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--ms-amber-text);
  outline-offset: 2px;
  border-radius: var(--ms-radius-sm);
}

/* ---------------------------------------------------------------------
   4. UTILITIES shared across every section
   --------------------------------------------------------------------- */

/* reveal-on-scroll, ported from the reference's .reveal/.reveal.in.
   js/reveal.js applies .ms-reveal-init to a curated set of existing
   selectors at boot (never in markup — a no-JS visitor sees every
   section fully rendered with no extra edits needed to this page's
   hundreds of elements) and adds .ms-reveal-in via IntersectionObserver
   as each one scrolls into view. */
.ms-reveal-init { opacity: 0; transform: translateY(22px); }
.ms-reveal-init.ms-reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .ms-reveal-init { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-reveal-init { opacity: 1; transform: none; }
}

.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; }

h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; }
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; }

/* ---------------------------------------------------------------------
   5. SECTION SHELL — blueprint-grid canvas, per-id padding
   --------------------------------------------------------------------- */

.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);
}
/* placeholder shell for the interactive boundary section (03), built
   elsewhere — picked up for free via the .ms-section class it will
   carry, matching every other section's own convention. */

/* ---------------------------------------------------------------------
   5b. TOP BAR — persistent nav (section links, lang/theme toggles,
   console launch). Ported from the reference site's .topnav: fixed
   (not sticky) with a blurred translucent background so page content
   is visible scrolling underneath it, a section nav-link strip with
   the reference's own horizontal-scroll-instead-of-wrap fallback
   (.ms-nav-links) plus a burger dropdown below --ms-nav-links-bp, a
   scroll-progress bar, and an active-section highlight (scrollspy) —
   see js/app.js's initNav(). Every in-page anchor still needs a
   scroll-margin-top equal to the bar's height, same reasoning as
   before, now driven by --ms-nav-h so the fixed bar's real height and
   the scroll offset can never drift apart.
   --------------------------------------------------------------------- */
.ms-topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: color-mix(in srgb, var(--ms-paper) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ms-grid);
}
.ms-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--ms-nav-h); padding-top: .5rem; padding-bottom: .5rem;
}
.ms-topbar-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ms-ink); flex: none; }
.ms-topbar-brand-text { font-family: var(--ms-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.ms-topbar-brand:hover { text-decoration: none; }

/* #site-nav (.ms-nav-links) now holds THREE children: .ms-nav-scroll
   (the horizontally-scrolling section-link strip), #lang-toggle and
   .ms-topbar-launch (the console CTA) — moved in here 2026-08-22 so
   the <860px rule further down, which turns #site-nav itself into the
   off-canvas drawer, carries them into the drawer for free. No
   duplicate ids, no extra JS: they are the same single elements in
   both states, just repositioned by ordinary flex layout. */
.ms-nav-links {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  margin: 0 auto 0 clamp(.5rem, 3vw, 2rem);
}
.ms-nav-scroll {
  display: flex; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  /* Fades both edges rather than hard-clipping a link when the strip is
     narrower than its content (reference relies on overflow-x alone;
     the fade makes "there is more, scroll" legible here too). */
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.ms-nav-scroll::-webkit-scrollbar { display: none; }
.ms-nav-links a {
  color: var(--ms-ink-soft); font-family: var(--ms-sans); font-size: .82rem; font-weight: 500;
  padding: 7px 8px; border-radius: var(--ms-radius-sm); white-space: nowrap; text-decoration: none;
}
.ms-nav-links a:hover { color: var(--ms-ink); text-decoration: none; background: var(--ms-paper); }
.ms-nav-links a.ms-nav-active { color: var(--ms-amber-text); background: color-mix(in srgb, var(--ms-amber) 12%, transparent); }
.ms-nav-links > #lang-toggle,
.ms-nav-links > .ms-topbar-launch { flex: none; }

.ms-topbar-controls { display: flex; align-items: center; gap: .6rem; flex: none; }
.ms-topbar-launch { padding: .55rem 1rem; font-size: .88rem; }

button.ms-nav-burger { display: none; } /* element+class beats the later, unconditional .ms-toggle-btn{display:inline-flex} rule */
@media (max-width: 860px) {
  button.ms-nav-burger { display: inline-flex; }
  /* Persistent mobile header collapses to the reference's own two-icon
     pattern (theme toggle + hamburger) — the language toggle's text
     label goes icon-only here too, matching; its full EN/PT-BR label
     is still there once the drawer opens (not this rule's scope, see
     .ms-nav-links > #lang-toggle below). */
  .ms-topbar #theme-toggle .ms-toggle-label { display: none; }
  .ms-nav-links {
    position: absolute; top: calc(var(--ms-nav-h) + 3px); right: 10px; left: 10px;
    flex-direction: column; align-items: stretch; gap: .3rem; background: var(--ms-surface);
    border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
    padding: 8px; box-shadow: var(--ms-shadow);
    display: none;
  }
  .ms-nav-links.ms-nav-open { display: flex; }
  .ms-nav-links a { color: var(--ms-ink); }
  .ms-nav-scroll {
    flex-direction: column; overflow-x: visible;
    mask-image: none; -webkit-mask-image: none; /* the edge-fade is a desktop scroll-strip hint only */
  }
  .ms-nav-links > #lang-toggle,
  .ms-nav-links > .ms-topbar-launch { width: 100%; justify-content: center; align-items: center; }
  .ms-nav-links > #lang-toggle { margin-top: .3rem; border-top: 1px solid var(--ms-line); padding-top: .65rem; }
}
@media (max-width: 640px) {
  .ms-topbar-brand-text { font-size: .92rem; }
}

/* scroll-progress bar under the top bar */
.ms-nav-progress-track { height: 3px; background: transparent; }
.ms-nav-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ms-amber), var(--ms-brand-2));
}
@media (prefers-reduced-motion: no-preference) {
  .ms-nav-progress-bar { transition: width 80ms linear; }
}

section[id], footer[id], .ms-det, .ms-layer { scroll-margin-top: calc(var(--ms-nav-h) + .75rem); }
body { padding-top: 0; }
#hero { padding-top: calc(var(--ms-nav-h) + clamp(2rem, 6vw, 4.5rem)); }

/* ---------------------------------------------------------------------
   6. LOGO MARK & WORDMARK — the step-shifted boundary glyph
   --------------------------------------------------------------------- */

.ms-wordmark { display: flex; align-items: center; gap: .6rem; margin: 0 0 2.25rem; }
#footer .ms-wordmark { gap: .55rem; margin-bottom: 1rem; }
.ms-mark { color: var(--ms-ink); display: block; flex: none; }
.ms-mark-bar { stroke: var(--ms-amber); fill: var(--ms-amber); }
.ms-wordmark-text { font-family: var(--ms-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; }
#footer .ms-wordmark-text { font-size: 1.1rem; }

/* ---------------------------------------------------------------------
   7. SECTION 01 — HERO
   --------------------------------------------------------------------- */

#hero .ms-tagline {
  font-family: var(--ms-sans); font-size: .95rem; line-height: 1.6; max-width: 46ch;
  padding-left: 1rem; border-left: 3px solid var(--ms-amber); margin: 0 0 2.75rem;
}
#hero .ms-tagline-label {
  display: block; color: var(--ms-ink-soft); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: .35rem;
}
#hero .ms-credit-line { margin: 0 0 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--ms-line); max-width: 44rem; }
#hero .ms-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------------------------------------------------------------------
   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)
   --------------------------------------------------------------------- */

.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;
}
.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); }

.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; }

#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; }

/* ---------------------------------------------------------------------
   14. SECTION 09 — DOCUMENT SET
   --------------------------------------------------------------------- */

#documents .ms-doc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(19.5rem, 100%), 1fr)); margin: 0 0 3rem; }
#documents .ms-doc-card {
  background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
  padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .65rem; border-top: 3px solid var(--ms-line);
}
#documents .ms-doc-card[data-doc="D0"],
#documents .ms-doc-card[data-doc="D2"] { border-top-color: var(--ms-amber); }
#documents .ms-doc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
#documents .ms-doc-id { font-family: var(--ms-display); font-weight: 700; font-size: 1.05rem; }
#documents .ms-doc-order { 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; text-transform: uppercase; letter-spacing: .03em; }
#documents .ms-doc-title { font-weight: 700; font-size: 1rem; margin: 0; }
#documents .ms-doc-desc { font-size: .9rem; margin: 0; color: var(--ms-ink); flex-grow: 1; }
#documents .ms-doc-downloads { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--ms-line); }
#documents .ms-doc-dl {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  font-family: var(--ms-sans); font-weight: 600; font-size: .85rem; text-decoration: none; color: var(--ms-ink);
  border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); padding: .4rem .65rem; flex: 1 1 8rem;
}
#documents .ms-doc-dl:hover { border-color: var(--ms-amber-text); color: var(--ms-amber-text); }
#documents .ms-doc-dl-meta { font-family: var(--ms-sans); font-weight: 400; font-size: .68rem; color: var(--ms-ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  #documents .ms-doc-dl { transition: border-color .15s ease, color .15s ease; }
}

#documents .ms-cite { padding-top: 2rem; border-top: 1px solid var(--ms-line); max-width: 52rem; margin: 0 0 2.5rem; }
#documents .ms-cite .ms-credit-line { margin: 1.1rem 0 1rem; }
#documents .ms-cite-note { font-size: .88rem; color: var(--ms-ink-soft); max-width: 48rem; margin: 0; }

/* ---------------------------------------------------------------------
   15. SECTION 10 — CONTACT
   Markup for #contact-form-root is owned by the JS/backend slice; the
   rules below give any standard form control it injects a themed,
   accessible baseline for free, and keep the section usable even with
   JS disabled if the root ships a plain <form action="/api/contact">.
   --------------------------------------------------------------------- */

#contact #contact-form-root { min-height: .5rem; }
#contact .ms-field { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1.25rem; max-width: 34rem; }
#contact .ms-field label { font-weight: 600; font-size: .92rem; }
#contact .ms-field .ms-field-hint { font-size: .8rem; color: var(--ms-ink-soft); }
#contact input[type="text"],
#contact input[type="email"],
#contact textarea,
#contact select {
  background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm);
  padding: .65rem .8rem; font-size: .96rem; color: var(--ms-ink); width: 100%;
}
#contact textarea { min-height: 8rem; resize: vertical; }
#contact input::placeholder, #contact textarea::placeholder { color: var(--ms-ink-soft); opacity: 1; }
#contact button[type="submit"] {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ms-sans); font-weight: 600;
  font-size: 1rem; padding: .85rem 1.4rem; border: 2px solid var(--ms-amber); border-radius: var(--ms-radius-sm);
  background: var(--ms-amber); color: var(--ms-accent-ink);
}
:root[data-theme="dark"] #contact button[type="submit"],
:root:not([data-theme="light"]) #contact button[type="submit"] { color: var(--ms-accent-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #contact button[type="submit"] { color: var(--ms-accent-ink); }
}
#contact [aria-live] { font-size: .92rem; margin-top: .75rem; }
#contact [role="alert"], #contact .ms-field-error { color: var(--ms-amber-text); font-size: .85rem; }

/* ---------------------------------------------------------------------
   16. SECTION 11 — FOOTER
   --------------------------------------------------------------------- */

#footer .ms-footer-grid { display: grid; gap: 2.25rem; grid-template-columns: 1.3fr 1fr; margin: 0 0 2rem; }
@media (max-width: 40rem) { #footer .ms-footer-grid { grid-template-columns: 1fr; } }

#footer .ms-footer-affil { font-size: .92rem; max-width: 34rem; color: var(--ms-ink-soft); margin: 0 0 1.3rem; }
#footer .ms-footer-affil a { color: var(--ms-ink); }

#footer .ms-unisinos-link { display: inline-block; line-height: 0; border-radius: var(--ms-radius-sm); }
#footer .ms-unisinos-link img { display: block; max-width: 100%; height: auto; }

#footer .ms-footer-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
#footer .ms-toggle-row { display: flex; flex-wrap: wrap; gap: .6rem; }
/* .ms-toggle-btn is shared with .ms-topbar (see TOP BAR section below) —
   deliberately unscoped so the persistent top-bar controls and the
   footer's mirrored shortcuts (#footer-lang-toggle / #footer-theme-toggle,
   which forward clicks to the real #lang-toggle / #theme-toggle rather
   than duplicating their ids — see the inline script at the end of the
   page) render identically. */
.ms-toggle-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ms-sans); font-weight: 600; font-size: .85rem; color: var(--ms-ink);
  background: var(--ms-paper); border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm);
  padding: .5rem .75rem; cursor: pointer;
}
.ms-toggle-btn:hover { border-color: var(--ms-amber); }
.ms-lang-current { color: var(--ms-ink); }
.ms-lang-other { color: var(--ms-ink-soft); font-weight: 400; }

/* theme-toggle sun/moon swap, ported from the reference's #theme-toggle
   icon-btn: both icons live in the DOM, [data-theme] and the OS media
   query decide which one shows. Default (no attribute, OS not dark) is
   light, so the moon (switch-to-dark) shows by default here — the
   reference is dark-first so its default shows the sun; the visible
   icon is always the action's target state either way. */
.ms-icon-sun { display: none; }
.ms-icon-moon { display: block; }
:root[data-theme="dark"] .ms-icon-sun { display: block; }
:root[data-theme="dark"] .ms-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ms-icon-sun { display: block; }
  :root:not([data-theme="light"]) .ms-icon-moon { display: none; }
}
#footer .ms-btn { font-size: .92rem; padding: .65rem 1.1rem; border-color: var(--ms-line); }
#footer .ms-btn:hover { border-color: var(--ms-ink); }

#footer .ms-footer-bottom { padding-top: 1.5rem; border-top: 1px solid var(--ms-line); }
#footer .ms-footer-copy { font-size: .82rem; color: var(--ms-ink-soft); margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ms-toggle-btn, #footer .ms-btn, .ms-topbar-launch { transition: border-color .15s ease, filter .15s ease; }
}

/* ---------------------------------------------------------------------
   17. PRINT
   A dissertation showroom gets printed by examiners. Keep the record,
   drop the chrome; the amber accent already carries an icon+label
   pair everywhere so it degrades fine to greyscale.
   --------------------------------------------------------------------- */

@media print {
  .ms-section, .ms-taxonomy, .ms-catalogue { background-image: none; }
  .ms-topbar, #footer .ms-toggle-row, #reference-impl .ms-topology { display: none; }
  .ms-btn, #footer .ms-btn { border: 1px solid #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; font-weight: 400; }
  a[href^="#"]::after { content: ""; }
}

/* --- Contact form (js/contact.js-rendered) --- */
.ms-contact-form{display:flex;flex-direction:column;gap:1.1rem;max-width:32rem;}
.ms-field{display:flex;flex-direction:column;gap:.35rem;}
.ms-field-label{font-family:var(--ms-sans);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ms-ink-soft);}
.ms-field-input{
  font-family:var(--ms-sans);font-size:1rem;padding:.7rem .85rem;
  border:1px solid var(--ms-line);border-radius:var(--ms-radius-sm);background:var(--ms-surface);color:var(--ms-ink);
}
.ms-field-input:focus-visible{outline:3px solid var(--ms-amber);outline-offset:1px;border-color:var(--ms-amber);}
textarea.ms-field-input{resize:vertical;min-height:8rem;}
.ms-honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.ms-turnstile-mount{min-height:1px;}
.ms-contact-status{font-size:.92rem;min-height:1.4em;margin:0;}
.ms-contact-status--success{color:#2E7D4F;}
.ms-contact-status--error{color:#B3261E;}
.ms-contact-status--info{color:var(--ms-ink-soft);}
:root[data-theme="dark"] .ms-contact-status--success{color:#7FD99B;}
:root[data-theme="dark"] .ms-contact-status--error{color:#FF8A80;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ms-contact-status--success{color:#7FD99B;}
  :root:not([data-theme="light"]) .ms-contact-status--error{color:#FF8A80;}
}

/* ---------------------------------------------------------------------
   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;}
