.startup-screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 64px);
  background: var(--canvas);
  color: var(--ink);
}
.startup-card {
  width: min(100%, 640px);
  padding: clamp(20px, 5vw, 48px);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--paper);
}
.startup-card h1 {
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  line-height: 1.15;
}
.startup-intro {
  color: var(--muted);
}
.startup-tip {
  min-height: 5em;
  font-size: 1.125rem;
  line-height: 1.6;
  margin-block: 28px;
}
.startup-tip-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.startup-tip-controls button {
  min-height: 44px;
}
.startup-steps {
  padding-left: 20px;
  line-height: 1.8;
  color: var(--muted);
}
.startup-steps [data-step-state="ready"] {
  color: var(--ink);
  font-weight: 600;
}

:root {
  color-scheme: light;
  --step--1: 0.75rem;
  --step-0: 0.875rem;
  --step-1: 1rem;
  --step-2: 1.25rem;
  --step-3: 1.5625rem;
  --step-4: 1.953rem;
  --font-size-hidden: 0;
  --font-size-compass: 0.5rem;
  --font-size-monogram: 0.5rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --pad-generous: clamp(20px, 6vw, 72px);
  --pad-fluid-inline: clamp(16px, 4vw, 32px);
  --ink: #17202a;
  /* Darkened from #66717e (4.47:1 on the warm canvas) and again from #656f7c
     (4.45:1 on --paper-3, 4.34:1 on --accent-soft): secondary copy sits on
     tab strips and status tints too, and every one of those pairs must clear
     the 4.5 floor tests/classroom-client-dark-theme.test.js measures. */
  --muted: #56606c;
  --line: #d9d9d4;
  --line-strong: #80898f;
  --paper: #ffffff;
  /* Raised and inset surfaces (cards within cards, code boxes, table heads)
     were hardcoded light greys; as tokens they follow the theme. */
  --paper-2: #f4f5f4;
  --paper-3: #eceeed;
  --canvas: #f5f5f3;
  /* Companion and hosted panels read --surface, which no block defined, so
     their #fff fallback stayed white in the dark theme. */
  --surface: var(--paper);
  --surface-raised: var(--paper);
  /* Text on an accent or status fill. White in light; near-black in dark,
     where the fills lighten to stay legible as text on dark paper. */
  --on-accent: #ffffff;
  --on-fill: #ffffff;
  /* Secondary body copy (notices, report narrative) and the teal summary
     copy were hardcoded; as tokens they lighten with the theme. */
  --ink-soft: #34404b;
  --ink-report: #34404b;
  --teal-ink: #315c54;
  --amber-ink: #6d4700;
  /* The tinted report readout, the pastel status borders and the seat-state
     fills were hardcoded light values that stayed light under the dark
     tokens; as tokens they follow the theme. */
  --readout-tint: #f3f8f5;
  --readout-line: #c8d8d2;
  --teal-line: #95c9bc;
  --amber-line: #dfbf78;
  --danger-line: #dda0a7;
  /* P104.640 colour system: neutrals carry structure; one indigo primary
     means "act here / you are here"; teal, amber, danger and info appear
     only when the state they name is true. The crimson is the logo's alone. */
  --brand: #c61f46;
  --accent: #2f4fb0;
  --accent-dark: #243d8a;
  --accent-soft: #eaeefa;
  --teal: #0b6b5f;
  --teal-soft: #e3f4f1;
  /* Darkened from #9a6400, which measured 4.37:1 on --paper-3 and 4.40:1
     on --teal-soft where pending-status copy is set. */
  --amber: #8a5a00;
  --status-yellow: #8a5a00;
  --amber-soft: #fff2d6;
  --danger: #b3261e;
  --danger-soft: #fcebea;
  --guide-see: #5b3fa8;
  --guide-see-soft: #f1ecfb;
  --guide-see-line: #c7b5ff;
  --info: #3d5a73;
  --info-soft: #e8eef3;
  --pedagogy: #2f4fb0;
  --weight-body: 400;
  --weight-label: 600;
  --weight-strong: 600;
  --weight-heading: 700;
  /* P104.639 type scale, one level per role: page title (--font-size-display)
     > page heading > section heading > group heading > field label > value >
     help and meta. Three weights: body, label/value, heading. */
  --text-page: var(--step-3);
  --text-section: var(--step-2);
  --text-group: var(--step-1);
  --text-label: var(--step--1);
  --text-value: var(--step-1);
  --text-key: var(--step-2);
  --text-meta: var(--step--1);
  --leading-tight: 1.3;
  --leading-meta: 1.45;
  --dur-tap: 150ms;
  --dur-state: 150ms;
  --dur-reveal: 180ms;
  --dur-route: 240ms;
  --stagger: 40ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --map-ocean: #0a2a45;
  --map-ocean-mid: #0f3c5f;
  --map-ocean-shallow: #14507a;
  --map-coast: #6f8f9e;
  --map-wave: #bfe3f5;
  /* WCAG relative luminance, computed at the generator's measured peak alpha
     (128/255 = 0.502, buildCoastalField at this HEAD): ocean L=0.0215,
     land L=0.0281, this color composited over ocean at peak alpha L=0.0270 —
     below land. Low-green blue (luminance is 71% green) so the "lighter sea"
     read comes from hue/saturation, not brightness — see PEAK_BRIGHTNESS. */
  --map-coast-shallow: #0b3070;
  /* Darkened one step from the brief's #213440 neutral so exact Crimson
     #f2687f clears the 4.5:1 map contrast gate without retuning company hues. */
  --map-land: #1f313c;
  --map-border: #6d8591;
  --radius: 7px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-pop:
    0 18px 48px -12px rgb(16 24 32 / 28%), 0 2px 6px rgb(16 24 32 / 8%);
  --shadow: 0 2px 9px rgb(24 35 44 / 4%);
  --font-display: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-size-display: clamp(2.5rem, 5vw, 4rem);
  --font-size-section: clamp(1.75rem, 3vw, 2.25rem);
  --font-size-verdict: clamp(2rem, 5vw, 3.5rem);
  --font-size-verdict-mobile: clamp(2rem, 10vw, 3rem);
  --font-size-signal: clamp(1.1rem, 2vw, 1.75rem);
  --font-size-narrative: 17px;
  --font-size-chart-value: 1.75rem;
  --glass-tint: rgb(255 255 255 / 78%);
  --glass-dark-tint: rgb(10 24 34 / 82%);
  /* Cap blur at 22px to preserve map/scroll context and avoid expensive
     full-surface blur on classroom laptops. */
  --glass-blur: 22px;
  --glass-saturation: 170%;
  --glass-highlight: rgb(255 255 255 / 78%);
  --glass-shadow: 0 2px 9px rgb(24 35 44 / 8%);
  /* Decision 55 is legibility-first. The tint composites over whatever the
     material floats above; the darkest real backdrop is --map-ocean, which at
     78% resolves to rgb(202 204 206). The page palette's secondary colors
     measure 3.09-3.54:1 there, so glass carries its own darker text tokens
     (4.68-5.24:1). scripts/classroom_contrast_inventory.mjs computes every
     pair over every real fill and fails the build below 4.5. */
  --glass-muted: #4a5560;
  --glass-accent: #2f4fb0;
  --glass-teal: #075f59;
  --glass-surface: rgb(255 255 255 / 64%);
  --glass-surface-top: rgb(255 255 255 / 80%);
  --glass-surface-strong: rgb(255 255 255 / 84%);
  --glass-edge: rgb(255 255 255 / 72%);
  --glass-edge-outer: rgb(23 32 42 / 18%);
  --glass-inner-light:
    inset 0 1px 0 rgb(255 255 255 / 95%),
    inset 0 0 0 1px rgb(255 255 255 / 45%),
    inset 0 -1px 0 rgb(255 255 255 / 30%);
  --glass-depth:
    0 1px 2px rgb(16 24 32 / 6%), 0 14px 34px -14px rgb(16 24 32 / 22%);
  --glass-focus: 0 0 0 3px rgb(47 79 176 / 32%);
  /* P104.639: lighter, more saturated washes than the brand inks, so the
     tint reads through the glass while the canvas keeps its luminance: at
     each wash's peak, muted, accent, teal and amber copy set
     directly on the canvas still clear 4.5:1. */
  --ambient-a: rgb(72 196 178 / 12%);
  --ambient-b: rgb(255 128 160 / 10%);
  --ambient-c: rgb(128 148 255 / 10%);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 100%;
  letter-spacing: 0;
}

/* Dark theme (V-07). Token-driven: the same names, redefined. It follows the
   OS through prefers-color-scheme unless the page pins data-theme="light",
   and data-theme="dark" forces it regardless of the OS. The two blocks are
   kept byte-identical by tests/classroom-client-dark-theme.test.js, which
   also measures the ten most-used text pairs against the 4.5:1 floor. The
   map tokens stay as they are: the map was already a dark surface. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6ecf1;
  --muted: #a9b6c1;
  --line: #2c3d4a;
  --line-strong: #6f8394;
  --paper: #152230;
  --paper-2: #1b2a38;
  --paper-3: #22333f;
  --canvas: #0d1620;
  --on-accent: #0d1620;
  --on-fill: #0d1620;
  --ink-soft: #cfd8df;
  --ink-report: #cfd8df;
  --teal-ink: #9fe3da;
  --amber-ink: #ffd48a;
  --readout-tint: #122a30;
  --readout-line: #345856;
  --teal-line: #2f6f66;
  --amber-line: #8a6a2a;
  --danger-line: #8a4b52;
  --brand: #ff7f99;
  --accent: #9db0ff;
  --accent-dark: #c2cdff;
  --accent-soft: #1e2a52;
  --teal: #5fd1c5;
  --teal-soft: #0f3330;
  --amber: #f2b64f;
  --status-yellow: var(--amber);
  --amber-soft: #3b2b0d;
  --danger: #ff8f95;
  --danger-soft: #3f1c20;
  --guide-see: #c7b5ff;
  --guide-see-soft: #251d40;
  --guide-see-line: #7258a3;
  --info: #a9c4dc;
  --info-soft: #1a2c3b;
  --pedagogy: #9db0ff;
  --shadow: 0 2px 9px rgb(0 0 0 / 40%);
  --shadow-pop: 0 18px 48px -12px rgb(0 0 0 / 60%), 0 2px 6px rgb(0 0 0 / 40%);
  --glass-tint: rgb(21 34 48 / 82%);
  --glass-highlight: rgb(255 255 255 / 18%);
  --glass-shadow: 0 2px 9px rgb(0 0 0 / 35%);
  --glass-muted: #b7c3cd;
  --glass-accent: #9db0ff;
  --glass-teal: #7ee0d5;
  --glass-surface: rgb(21 34 48 / 68%);
  --glass-surface-top: rgb(29 45 61 / 76%);
  --glass-surface-strong: rgb(24 38 53 / 86%);
  --glass-edge: rgb(255 255 255 / 16%);
  --glass-edge-outer: rgb(255 255 255 / 12%);
  --glass-inner-light:
    inset 0 1px rgb(255 255 255 / 16%), inset 0 0 0 1px rgb(255 255 255 / 7%);
  --glass-depth: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -14px rgb(0 0 0 / 60%);
  --glass-focus: 0 0 0 3px rgb(157 176 255 / 40%);
  --ambient-a: rgb(95 209 197 / 15%);
  --ambient-b: rgb(255 127 153 / 11%);
  --ambient-c: rgb(170 180 255 / 14%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e6ecf1;
    --muted: #a9b6c1;
    --line: #2c3d4a;
    --line-strong: #6f8394;
    --paper: #152230;
    --paper-2: #1b2a38;
    --paper-3: #22333f;
    --canvas: #0d1620;
    --on-accent: #0d1620;
    --on-fill: #0d1620;
    --ink-soft: #cfd8df;
    --ink-report: #cfd8df;
    --teal-ink: #9fe3da;
    --amber-ink: #ffd48a;
    --readout-tint: #122a30;
    --readout-line: #345856;
    --teal-line: #2f6f66;
    --amber-line: #8a6a2a;
    --danger-line: #8a4b52;
    --brand: #ff7f99;
    --accent: #9db0ff;
    --accent-dark: #c2cdff;
    --accent-soft: #1e2a52;
    --teal: #5fd1c5;
    --teal-soft: #0f3330;
    --amber: #f2b64f;
    --status-yellow: var(--amber);
    --amber-soft: #3b2b0d;
    --danger: #ff8f95;
    --danger-soft: #3f1c20;
    --info: #a9c4dc;
    --info-soft: #1a2c3b;
    --pedagogy: #9db0ff;
    --shadow: 0 2px 9px rgb(0 0 0 / 40%);
    --shadow-pop:
      0 18px 48px -12px rgb(0 0 0 / 60%), 0 2px 6px rgb(0 0 0 / 40%);
    --glass-tint: rgb(21 34 48 / 82%);
    --glass-highlight: rgb(255 255 255 / 18%);
    --glass-shadow: 0 2px 9px rgb(0 0 0 / 35%);
    --glass-muted: #b7c3cd;
    --glass-accent: #9db0ff;
    --glass-teal: #7ee0d5;
    --glass-surface: rgb(21 34 48 / 68%);
    --glass-surface-top: rgb(29 45 61 / 76%);
    --glass-surface-strong: rgb(24 38 53 / 86%);
    --glass-edge: rgb(255 255 255 / 16%);
    --glass-edge-outer: rgb(255 255 255 / 12%);
    --glass-inner-light:
      inset 0 1px rgb(255 255 255 / 16%), inset 0 0 0 1px rgb(255 255 255 / 7%);
    --glass-depth:
      0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -14px rgb(0 0 0 / 60%);
    --glass-focus: 0 0 0 3px rgb(157 176 255 / 40%);
    --ambient-a: rgb(95 209 197 / 15%);
    --ambient-b: rgb(255 127 153 / 11%);
    --ambient-c: rgb(170 180 255 / 14%);
  }
}

/* P104.272(4): the round-4 opacities, restored for anyone who has asked the
   OS for less transparency. The surfaces above are more see-through so the
   glass reads as glass; this keeps the pre-round-5 solidity available on
   request instead of forcing it on everyone. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-surface: rgb(255 255 255 / 88%);
    --glass-surface-top: rgb(255 255 255 / 97%);
    --glass-surface-strong: rgb(255 255 255 / 95%);
  }

  :root[data-theme="dark"] {
    --glass-surface: rgb(21 34 48 / 90%);
    --glass-surface-top: rgb(29 45 61 / 94%);
    --glass-surface-strong: rgb(24 38 53 / 96%);
  }
}

@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-surface: rgb(21 34 48 / 90%);
    --glass-surface-top: rgb(29 45 61 / 94%);
    --glass-surface-strong: rgb(24 38 53 / 96%);
  }
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("./assets/fonts/source-serif-4-latin.woff2") format("woff2");
}

.glass,
.glass-dark,
.topbar.glass,
.round-chip.glass,
.topbar-actions.glass {
  border: 1px solid var(--glass-highlight);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

.glass,
.topbar.glass,
.round-chip.glass,
.topbar-actions.glass {
  --muted: var(--glass-muted);
  --accent: var(--glass-accent);
  --teal: var(--glass-teal);

  color: var(--ink);
  background: var(--glass-tint);
}

/* The sticky bar is full-bleed, so it keeps the page hairline instead of the
   glass edge (the highlight measures 1.07:1 on the canvas) and no corner
   radius. */
.topbar.glass {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.glass-dark {
  color: #ffffff;
  background: var(--glass-dark-tint);
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass-dark,
  .topbar.glass,
  .round-chip.glass,
  .topbar-actions.glass {
    color: var(--ink);
    background: var(--paper);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .glass,
  .glass-dark,
  .topbar.glass,
  .round-chip.glass,
  .topbar-actions.glass {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--canvas);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--canvas);
  font-weight: var(--weight-body);
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button,
select,
input,
textarea {
  min-width: 0;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--paper);
}

:where(fieldset) {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}
:where(a:not([class])) {
  color: var(--accent);
}
:where(
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"]
) {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
}

.figure {
  font-variant-numeric: tabular-nums lining-nums;
}
.dateline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 16px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.figure[data-changed="true"] {
  position: relative;
}
.figure[data-changed="true"]::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: var(--pedagogy);
  content: "";
  animation: figure-change-underline 600ms linear both;
  animation-delay: calc(var(--stagger) * var(--figure-stagger-index, 0));
}
@keyframes figure-change-underline {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.scroll-region,
.table-scroll,
.comparison-table-scroll,
.gradebook-scroll,
.participation-table-wrap,
.financial-table,
.market-analysis-company-table {
  overflow-x: auto;
  scrollbar-gutter: stable;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 24px),
    transparent
  );
}

.scroll-region[data-scrolled-end="true"],
.table-scroll[data-scrolled-end="true"],
.comparison-table-scroll[data-scrolled-end="true"],
.gradebook-scroll[data-scrolled-end="true"],
.participation-table-wrap[data-scrolled-end="true"],
.financial-table[data-scrolled-end="true"],
.market-analysis-company-table[data-scrolled-end="true"] {
  mask-image: none;
}

.scroll-region:focus-visible,
.table-scroll:focus-visible,
.comparison-table-scroll:focus-visible,
.gradebook-scroll:focus-visible,
.participation-table-wrap:focus-visible,
.financial-table:focus-visible,
.market-analysis-company-table:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Painted by index.html before any module runs: the same viewport-high box
   the welcome and classroom shells fill, with the topbar band and the
   two-column workspace grid already in place, so the first render swaps
   content inside a box that does not move. */
.app-boot {
  display: grid;
  grid-template-rows: minmax(68px, auto) minmax(0, 1fr);
  background: var(--paper);
}
.app-boot-topbar {
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.app-boot-layout {
  display: grid;
  grid-template-columns: minmax(220px, 256px) minmax(0, 1fr);
  gap: 24px;
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 64px;
}
.app-boot-nav {
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
}
.app-boot-main {
  display: grid;
  min-height: 320px;
  place-items: center;
}
.app-loading {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step-0);
}
@media (max-width: 900px) {
  .app-boot-layout {
    grid-template-columns: minmax(0, 1fr);
    width: min(1500px, calc(100% - 32px));
  }
  .app-boot-nav {
    display: none;
  }
}

/* Out of flow, so the wait notice appearing or clearing moves nothing that
   is already on the page; the height matches one line of .notice. */
.calculation-wait {
  position: fixed;
  z-index: 30;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-width: 640px;
  min-height: 46px;
  margin-inline: auto;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

/* A short wait on one control (beginBusy): the links read as unavailable
   (aria-disabled keeps them focusable), the busy one stays at full strength
   and shows a small ring. With reduced motion the ring holds still beside
   the "Opening…" label. */
.role-workspace-navigation-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.role-workspace-navigation-link[aria-disabled="true"][aria-busy="true"] {
  cursor: progress;
  opacity: 1;
}
.busy-indicator {
  display: inline-block;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
}
@media (prefers-reduced-motion: no-preference) {
  .busy-indicator {
    animation: busy-indicator-turn 0.8s linear infinite;
  }
  @keyframes busy-indicator-turn {
    to {
      transform: rotate(1turn);
    }
  }
}

/* Holds the room the create form takes once the catalog arrives, so the
   instructor panel does not grow under the pointer. */
.setup-catalog-loading {
  display: grid;
  min-height: 36rem;
  place-items: center;
  color: var(--ink-soft);
}

/* Three real columns. The side tracks floor at their own min-content (the
   widest single utility, never a fixed 210px) so the round title in the
   middle track is never painted over by a neighbour; the two glass panels
   hug their content (justify-self) instead of filling a whole track and
   butting against the title. Holds from 1024 to 1920 px without overlap;
   the 900px query below collapses to two columns. */
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
  column-gap: 16px;
  align-items: center;
  min-height: 68px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--brand);
  border-radius: 6px;
  color: var(--brand);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}

.brand-copy {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
}
.brand-copy strong,
.brand-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-copy strong {
  font-size: var(--step-0);
}
.brand-copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.topbar .brand-copy > span {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.round-chip {
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  padding: 6px 14px;
  text-align: center;
}
.round-chip strong {
  overflow-wrap: normal;
}
.round-chip strong,
.round-chip span {
  display: block;
}
.round-chip strong {
  font-size: var(--step-0);
}
.round-chip .round-identity {
  white-space: nowrap;
}
.round-chip span {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--step--1);
  text-transform: uppercase;
}
.round-chip .round-identity span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  text-transform: none;
}
.round-chip .round-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
  text-transform: none;
}
.round-chip .round-status span {
  display: inline;
  margin: 0;
  text-transform: none;
}
.round-chip .round-status [data-round-kind-tag] {
  display: inline-block;
  text-transform: lowercase;
}
.round-status [data-round-kind-tag]::first-letter {
  text-transform: uppercase;
}
.round-chip .round-clock {
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--step-2);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  white-space: nowrap;
}
.round-chip .round-clock-warning {
  color: var(--amber);
}
.round-chip .round-clock-closed {
  color: var(--danger);
}

/* The status row (navigation toggle, operator, presence, sync) stacks over
   the controls row; both right-align and the panel hugs the wider row, so
   its glass edge stops well short of the centred title at every width. */
.topbar-actions {
  display: grid;
  justify-self: end;
  justify-items: end;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px;
}
.topbar-status,
.topbar-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.presence,
.sync-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--step--1);
  white-space: nowrap;
}
.header-connection {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}
.header-utilities {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.header-utilities > :not(:first-child) {
  border-left: 1px solid var(--line);
}
.header-utilities :is(.theme-toggle, .icon-button, .topbar-courses) {
  border-block: 0;
  border-right: 0;
  border-radius: 0;
  background: transparent;
}
.header-utilities [data-account-menu] {
  position: relative;
}
.header-utilities summary {
  padding: 8px 10px;
  white-space: nowrap;
}
.header-utilities [data-account-menu] > .projector-toggle {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1;
  white-space: nowrap;
}
.sync-state[data-sync-mode="saving"] {
  color: var(--pedagogy);
}
.sync-state[data-sync-mode="synced"] {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 400ms linear;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.status-dot.local {
  background: var(--amber);
}
.status-dot.error {
  background: var(--danger);
}

.icon-button,
.help-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
  font-weight: var(--weight-strong);
}

.help-button {
  border-radius: 50%;
  color: var(--muted);
  font-size: var(--step--1);
}
.icon-button:hover,
.help-button:hover {
  border-color: var(--line-strong);
  background: var(--paper-2);
}

/* Help bubbles (P104.107): the "?" beside a defined term opens a short,
   plain-language definition in place. The button is drawn smaller than the
   dialog help button so it reads as a definition, not a page of help; the
   ::before keeps its touch target at 44px. Colours come from the theme
   tokens, so the bubble follows dark mode without its own overrides. */
.help-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.help-bubble-button {
  position: relative;
  width: 26px;
  height: 26px;
  min-width: 26px;
  font-size: var(--step--1);
  line-height: 1;
}
.help-bubble-button::before {
  content: "";
  position: absolute;
  inset: -9px;
}
.help-bubble[data-open] .help-bubble-button {
  border-color: var(--ink);
  color: var(--ink);
}
.help-bubble-panel {
  position: absolute;
  top: var(--help-bubble-top, calc(100% + 6px));
  /* The gutter nudge moves the box itself: a phone layout viewport is sized
     from untransformed boxes, so a translate would still widen the page. */
  left: var(--help-bubble-shift, 0px);
  z-index: 30;
  width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
}
.help-bubble-panel[hidden] {
  display: none;
}
.help-bubble-panel-end {
  left: auto;
  right: calc(0px - var(--help-bubble-shift, 0px));
}
.help-bubble-disclosure {
  position: relative;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 16px;
}
.help-bubble-disclosure > .help-bubble-panel {
  position: static;
  width: 100%;
  max-width: 100%;
  scroll-margin-block: 16px;
  animation: none;
  transform: none;
}
.help-bubble-disclosure-close {
  min-height: 44px;
  margin-top: 6px;
}
.help-bubble-term {
  display: block;
  margin-bottom: 4px;
  font-weight: var(--weight-strong);
}
.help-bubble-panel p {
  margin: 0;
}
.help-bubble-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.help-bubble-heading > h1,
.help-bubble-heading > h2,
.help-bubble-heading > h3,
.help-bubble-heading > h4 {
  margin: 0;
}
dt .help-bubble,
th .help-bubble,
label .help-bubble {
  margin-left: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .help-bubble-panel {
    animation: help-bubble-in 120ms ease-out;
  }
  @keyframes help-bubble-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
.definition-chip {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px dotted var(--pedagogy);
  color: var(--pedagogy);
  background: transparent;
  font-size: inherit;
  font-weight: var(--weight-label);
  line-height: 1.2;
  text-align: left;
}
.margin-note {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.definition-chip:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.definition-chip:focus-visible {
  outline-color: var(--pedagogy);
  box-shadow: 0 0 0 4px var(--paper);
}
.shortcut-sheet {
  display: grid;
  gap: 18px;
}
.shortcut-group {
  display: grid;
  gap: 7px;
}
.shortcut-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shortcut-group dl {
  display: grid;
  gap: 7px;
  margin: 0;
}
.shortcut-group dl > div {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 14px;
  align-items: center;
}
.shortcut-group dt,
.shortcut-group dd {
  margin: 0;
}
.shortcut-group dd {
  color: var(--ink);
}
kbd {
  display: inline-block;
  min-width: 28px;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--ink);
  background: var(--paper);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  text-align: center;
}

.topbar-tutorial,
.topbar-courses,
.tutorial-launch,
.projector-toggle,
.theme-toggle {
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}

.topbar-tutorial:hover,
.topbar-courses:hover,
.tutorial-launch:hover,
.projector-toggle:hover,
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.workspace {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 64px;
}

.workspace-layout {
  display: grid;
  grid-template-columns: minmax(220px, 256px) minmax(0, 1fr);
  gap: 24px;
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
}

.workspace-layout > .workspace {
  width: 100%;
  margin: 0;
}

.workspace-layout:has(.role-workspace-navigation[data-collapsed="true"]) {
  grid-template-columns: minmax(0, 1220px);
  justify-content: center;
}

.role-workspace-navigation {
  position: sticky;
  top: calc(
    var(--workspace-topbar-height, 174px) + var(--companion-dock-height, 0px) +
      12px
  );
  align-self: start;
  max-height: calc(
    100dvh - var(--workspace-topbar-height, 174px) -
      var(--companion-dock-height, 0px) - 24px
  );
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
}

.role-workspace-navigation[data-collapsed="true"] {
  display: none;
}

/* The open desktop sidebar already lists each section's progress, so the
   Home tiles only show while it is hidden (clarity F15). */
.workspace-layout:has(
    .role-workspace-navigation[data-collapsed="false"][data-mobile-drawer="false"]
  )
  .department-progress[data-decision-overall-progress] {
  display: none;
}

.role-workspace-navigation-list,
.role-workspace-navigation-children {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.role-workspace-navigation-item {
  display: grid;
  gap: 4px;
}

.role-workspace-navigation-children {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.role-workspace-navigation-link,
.role-workspace-navigation-group,
.workspace-navigation-toggle,
.workspace-navigation-close {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: var(--weight-strong);
  text-align: left;
}

.role-workspace-navigation-link,
.workspace-navigation-close {
  width: 100%;
  padding: 7px 10px;
}

/* A decision link stacks its name over its progress line so the two never
   run together (visually or in the accessible name) and each wraps inside
   the drawer or sidebar width instead of widening it. */
.role-workspace-navigation-link[data-decision-tab] {
  display: grid;
  gap: 4px;
}

.role-workspace-navigation-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.decision-section-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}

.decision-section-progress small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-section-progress progress {
  flex: 1 1 64px;
  min-width: 0;
}

.role-workspace-navigation-link .decision-section-progress {
  font-weight: 400;
}

.role-workspace-navigation-group {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  color: var(--ink);
}

.role-workspace-navigation-link:hover,
.role-workspace-navigation-link:focus-visible,
.role-workspace-navigation-link[aria-current="page"],
.workspace-navigation-toggle:hover,
.workspace-navigation-toggle:focus-visible,
.workspace-navigation-close:hover,
.workspace-navigation-close:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--paper);
}

.workspace-navigation-toggle {
  padding: 7px 10px;
  white-space: nowrap;
}

.workspace-navigation-close {
  display: none;
}

.round-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 10px 0 22px;
}

.registered-greeting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 18px;
  align-items: baseline;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-color: var(--readout-line);
  border-left: 3px solid var(--teal);
  background: var(--teal-soft);
}

.registered-greeting .eyebrow {
  color: var(--teal);
}
.registered-greeting p {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-1);
  line-height: 1.35;
}

/* Narrative copy is intentionally editorial; figures and controls remain
   sans-serif so the type system distinguishes evidence from explanation. */
.registered-greeting p,
.market-analysis-context strong,
.market-analysis-debrief-section p,
.coaching-section p,
.performance-readout p,
.performance-readout li {
  max-width: 72ch;
}

.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  margin-bottom: 7px;
  font-size: var(--step-4);
  line-height: 1.08;
}
h2 {
  margin-bottom: 6px;
  font-size: var(--step-2);
  line-height: 1.25;
}

/* Decision 52 scopes Source Serif 4 to the round verdict and display headlines;
   everything else — dialogs, the ported map chrome, the decision form, the
   instructor console — stays system sans. Apply .display-heading to opt a
   heading in; never restyle the bare h1/h2 elements. */
.display-heading {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--font-size-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.round-header h1 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--font-size-section);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h3 {
  margin-bottom: 5px;
  font-size: var(--step-1);
}
p {
  color: var(--muted);
  line-height: 1.55;
}

.phase-rail {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--glass-highlight);
  border-radius: 12px;
  color: var(--ink);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: 0 10px 28px rgb(23 32 42 / 12%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.phase-rail ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phase-rail li {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border-top: 2px solid var(--line);
  color: var(--muted);
}

.phase-rail li[data-phase-state="complete"] {
  border-color: var(--teal);
  color: var(--ink);
}

.phase-rail li[data-phase-state="current"] {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--glass-highlight);
}

@media (max-width: 650px) {
  .phase-rail ol {
    grid-template-columns: 1fr;
  }

  .phase-rail li {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .phase-rail {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.phase-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-3);
}

.tabs button {
  min-height: 44px;
  padding: 7px 16px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}

.tabs button[aria-selected="true"] {
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

.workspace-page > [data-workspace-page-heading] {
  margin: 0 0 14px;
}

.workspace-decision-form {
  display: grid;
  gap: 20px;
}

.workspace-decision-section {
  display: grid;
  gap: 14px;
}

.workspace-decision-section h3 {
  margin: 0;
  font-size: var(--step-1);
}

.workforce-fields {
  display: grid;
  gap: 18px;
}
.workforce-subsection {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.workforce-subsection:first-child {
  padding-top: 0;
  border-top: 0;
}
.workforce-subsection h4 {
  margin: 0;
  font-size: var(--step-0);
}
.workforce-advanced {
  margin-top: 2px;
}
.workforce-advanced > summary {
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.workforce-role-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.workforce-role-table th,
.workforce-role-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.workforce-role-table thead th {
  color: var(--muted);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.workforce-role-table th[scope="row"] {
  color: var(--ink);
  font-weight: var(--weight-label);
}
.workforce-role-table input[type="number"] {
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
}
.workforce-role-table input[type="number"]:disabled {
  background: var(--paper-3);
}
.workforce-cost-summary {
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--paper-3);
  color: var(--ink);
}
.workforce-cost-summary strong {
  font-size: var(--step-0);
}
.workforce-cost-summary p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.band {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.band:first-child {
  border-top: 0;
}
.band-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.band-head > div {
  min-width: 0;
}
.band-head p {
  margin: 0;
  font-size: var(--step--1);
}
.partnership-outcomes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.title-with-help {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  box-shadow: 0 2px 9px rgb(24 35 44 / 4%);
}

.panel-body {
  padding: 20px;
}

.scenario-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 24px;
  align-items: center;
  padding: 20px;
  border-left: 4px solid var(--line-strong);
}

.scenario-band p {
  margin-bottom: 0;
}
.scenario-context {
  padding-left: 20px;
  border-left: 1px solid var(--line);
  font-size: var(--step--1);
}
.scenario-context span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.action-row {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
}
/* Keep the territory choice readable within each action card. */
.action-row .field-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.action-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.action-row-head strong {
  font-size: var(--step--1);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.forecast-direction-field {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.forecast-direction-field legend {
  max-width: 72ch;
  padding: 0;
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: var(--weight-label);
}
.forecast-direction-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.forecast-direction-option {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
}
.forecast-direction-option:has(input:checked) {
  border-color: var(--pedagogy);
  color: var(--pedagogy);
  background: color-mix(in srgb, var(--pedagogy) 7%, var(--paper));
}
.forecast-direction-option input {
  accent-color: var(--pedagogy);
}
.forecast-direction-private {
  margin: 8px 0 0;
}
.field-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.field-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}
.field.wide {
  grid-column: 1 / -1;
}
.field label {
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-label-row label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.field label.inline-help {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field select,
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
  transition: border-bottom-color 400ms linear;
}
.field textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
}
.field select:disabled,
.field input:disabled,
.field textarea:disabled {
  background: var(--paper-3);
}
.field small {
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.field[data-ink-state="pending"] select,
.field[data-ink-state="pending"] input[type="text"],
.field[data-ink-state="pending"] input[type="password"],
.field[data-ink-state="pending"] input[type="number"],
.field[data-ink-state="pending"] textarea {
  border-bottom-color: var(--pedagogy);
}
.field[data-ink-state="settled"] select,
.field[data-ink-state="settled"] input[type="text"],
.field[data-ink-state="settled"] input[type="password"],
.field[data-ink-state="settled"] input[type="number"],
.field[data-ink-state="settled"] textarea {
  border-bottom-color: var(--line-strong);
}

.number-wrap {
  position: relative;
}
.number-wrap input {
  padding-right: 42px;
}
.number-wrap span {
  position: absolute;
  top: 50%;
  right: 11px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  transform: translateY(-50%);
  pointer-events: none;
}

.enterprise-overview {
  margin: 8px 0 0;
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
}
.enterprise-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 12px;
}
.enterprise-overview-head h2 {
  margin: 0;
}
.compact-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
}
.compact-metrics > div {
  min-width: 0;
  padding: 11px 13px;
  border-left: 1px solid var(--line);
}
.compact-metrics > div:first-child {
  border-left: 0;
}
.compact-metrics span,
.compact-metrics strong {
  display: block;
}
.compact-metrics span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.compact-metrics strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
}
.capital-market-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
}
.capital-market-strip > div {
  min-width: 0;
  padding: 10px 12px;
  border-left: 1px solid var(--line);
}
.capital-market-strip > div:first-child {
  border-left: 0;
}
.capital-market-strip span,
.capital-market-strip strong {
  display: block;
}
.capital-market-strip span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.capital-market-strip strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
}

.planning-benchmarks {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
}
.planning-benchmark-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 9px;
}
.planning-benchmark-head strong {
  font-size: var(--step--1);
}
.planning-benchmark-head span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.planning-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.planning-benchmark {
  min-width: 0;
  min-height: 72px;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.planning-benchmark span,
.planning-benchmark strong,
.planning-benchmark small {
  display: block;
}
.planning-benchmark span {
  min-height: 26px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  line-height: 1.3;
}
.planning-benchmark strong {
  margin-top: 3px;
  font-size: var(--step--1);
}
.planning-benchmark small {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--step--1);
}
.planning-benchmark.in-range strong {
  color: var(--ink);
}
.planning-benchmark.below strong,
.planning-benchmark.above strong {
  color: var(--amber);
}

.allocation-block {
  margin-top: 18px;
}
.allocation-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.allocation-head strong {
  font-size: var(--step--1);
}
.allocation-head span,
.allocation-status {
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.allocation-head .valid {
  color: var(--teal);
}
.allocation-head .invalid {
  color: var(--danger);
}
.allocation-status {
  margin-top: 13px;
  color: var(--muted);
}

.changed-marker {
  justify-self: start;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pedagogy);
  color: var(--on-fill);
  font-size: var(--step--2, 0.75rem);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ai-rebuild {
  display: grid;
  gap: 10px;
}
.ai-rebuild .new-this-round,
.ai-rebuild .decision-unlock-chip {
  justify-self: start;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pedagogy);
  color: var(--on-fill);
  font-size: var(--step--2, 0.75rem);
  font-weight: var(--weight-strong);
}

.section-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.reset-section-button {
  white-space: nowrap;
}
.reset-section-button:disabled {
  opacity: 0.55;
}

.round-budget-summary {
  margin: 4px 0 18px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--paper-3);
  color: var(--ink);
  font-size: var(--step--1);
}
.round-budget-summary.tight {
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.round-budget-summary.over_budget {
  background: var(--danger-soft);
  color: var(--danger);
}
.round-budget-line {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--step--1);
}
.round-budget-label {
  color: var(--ink);
  font-weight: var(--weight-strong);
}

.research-planner {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.research-planner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.research-planner-head h3 {
  margin: 0;
  font-size: var(--step--1);
}
.research-planner-head > span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.research-cost {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--teal-line);
  border-radius: 5px;
  color: var(--teal-ink);
  background: var(--teal-soft);
  font-size: var(--step--1);
}
.research-cost.invalid {
  border-color: var(--danger-line);
  color: var(--danger);
  background: var(--danger-soft);
}
.research-empty {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.range-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(48px, max-content);
  gap: 10px;
  align-items: center;
  min-height: 42px;
}
.range-wrap output {
  text-align: right;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

details.decision-section {
  border-top: 1px solid var(--line);
}
details.decision-section {
  scroll-margin-top: 82px;
}
details.decision-section > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-weight: var(--weight-strong);
}
details.decision-section > summary::-webkit-details-marker {
  display: none;
}
details.decision-section > summary::after {
  content: "+";
  color: var(--muted);
  font-size: var(--step-1);
}
details.decision-section[open] > summary::after {
  content: "−";
}
details.decision-section .details-body {
  position: relative;
  padding: 0 0 20px;
}
/* Heading left, help button right. The row began as a button-only strip in
   the collapsible sections, so it was right-aligned; the workspace sections
   put their h3 in the same row and inherited that alignment (ISS-007). A
   lone button keeps the right edge. */
.section-help-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: -3px 0 8px;
}
.section-help-row > h3,
.section-help-row > h4 {
  margin: 0;
}
.section-help-row > :only-child {
  margin-left: auto;
}

.decision-surface {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.decision-form {
  --sync-rail: 276px;
  padding-right: calc(20px + var(--sync-rail));
  padding-bottom: 24px;
}

.round-guide {
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-2);
}
.round-guide-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.round-guide-head h2 {
  margin: 0;
}
.change-summary {
  display: grid;
  min-width: 190px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--readout-line);
  border-radius: 6px;
  background: var(--teal-soft);
}
.change-summary strong {
  font-size: var(--step-2);
}
.change-summary span {
  color: var(--teal-ink);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  line-height: 1.3;
}
.round-checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.round-checklist li {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.round-checklist li > span {
  display: grid;
  width: 26px;
  height: 26px;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--on-fill);
  font-size: var(--step--1);
}
.round-checklist li.complete > span {
  border-color: var(--teal);
  background: var(--teal);
}
.round-checklist strong {
  overflow-wrap: anywhere;
  font-size: var(--step--1);
  line-height: 1.25;
}
.round-checklist small {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--step--1);
}
.change-detail {
  margin: 11px 0 0;
  font-size: var(--step--1);
}

.department-progress {
  margin: 16px 0 4px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-2);
}
.department-progress > div p {
  margin: 0;
  font-size: var(--step--1);
}
.department-progress ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.department-progress button {
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}
.department-progress button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.department-progress button > span {
  display: grid;
  width: 24px;
  height: 24px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--accent);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.department-progress button strong {
  font-size: var(--step--1);
}
.department-progress button small {
  color: var(--muted);
  font-size: var(--step--1);
}

.decision-footer {
  position: sticky;
  z-index: 10;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  width: calc(var(--sync-rail) - 16px);
  margin-right: calc(-1 * var(--sync-rail));
  margin-left: auto;
}

.decision-footer > * {
  min-width: 0;
  max-width: 100%;
}
/* The sticky rail stays below the measured top bar (shellViews.js), and only
   the memo scrolls so Save and Submit remain in view however long it grows. */
@media (min-width: 901px) {
  .decision-footer {
    top: calc(
      var(--workspace-topbar-height, 174px) +
        var(--companion-dock-height, 0px) + 12px
    );
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    max-height: calc(
      100dvh - var(--workspace-topbar-height, 174px) -
        var(--companion-dock-height, 0px) - 24px
    );
    overflow-y: auto;
  }
  .decision-footer > * {
    flex-shrink: 0;
  }
  .decision-footer .cfo-signoff {
    flex: 0 1 auto;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* A 100% basis here is the whole column height, pushing the note past the
     rail's bottom edge. */
  .decision-footer .cash-impact-note {
    flex-basis: auto;
  }
}
.submit-review {
  width: 100%;
  display: grid;
  gap: var(--space-2);
  font-size: var(--step--1);
}
.submit-review h3,
.submit-review p {
  margin: 0;
}
.submit-review h3 {
  font-size: var(--step-0);
}
.submit-review ul {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.submit-review ul ul {
  padding-left: var(--space-5);
}
.required-checklist > ul > li {
  display: grid;
  grid-template-columns: 1.25em 1fr;
  align-items: baseline;
}
.required-checklist > ul > li > ul {
  grid-column: 2;
}
.checklist-done .checklist-mark {
  color: var(--teal-ink);
}
.checklist-todo .checklist-mark {
  color: var(--danger);
  font-weight: 700;
}
.submit-review [data-checklist-fix] {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.round-changes summary,
[data-round-changes-title],
[data-checklist-verdict],
[data-round-changes-rest] {
  color: var(--muted);
}
[data-checklist-cuts].notice.warning,
[data-receipt-cuts].notice.warning {
  border-color: var(--amber-ink);
}
.cfo-signoff {
  flex-basis: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  font-size: var(--step--1);
}
/* Red is reserved for an unfunded plan: the cover levers render only then. */
.cfo-signoff:has(.cfo-signoff-levers) {
  border-left-color: var(--danger);
}
.cfo-signoff-thin {
  border-left-color: var(--amber);
}
.cfo-signoff p {
  margin: 4px 0 0;
}
.cfo-signoff-levers {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}
.cfo-signoff-lever {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cfo-signoff-lever button {
  flex: 0 0 92px;
}
.cfo-signoff-lever span {
  flex: 1;
}
.decision-footer .sync-state {
  align-items: flex-start;
  white-space: normal;
  overflow-wrap: anywhere;
}
.decision-footer .sync-state > span {
  min-width: 0;
}
.decision-footer button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.form-screen {
  display: grid;
  gap: var(--space-4);
}
.screen-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.screen-section > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  cursor: pointer;
  list-style-position: inside;
}
.screen-section > summary .eyebrow {
  color: var(--muted);
}
.screen-help-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: calc(-1 * var(--space-2)) var(--space-2);
}
.screen-intro {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  color: var(--ink-soft);
}
.screen-section > :not(summary) {
  margin-inline: var(--space-4);
}
.screen-continue {
  min-height: 44px;
  justify-self: end;
}
.screen-continue:disabled {
  opacity: 0.65;
}
.split-bar {
  margin: var(--space-4) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.split-bar > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  cursor: pointer;
}
.split-bar [data-allocation-total] {
  color: var(--muted);
}
.split-bar [data-allocation-total].valid {
  color: var(--teal-ink);
}
.split-bar [data-allocation-total].invalid {
  color: var(--amber-ink);
}
.split-bar-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}
/* An open definition stays inside its field, so a phone-width third of the
   row would leave it a few words wide. */
@media (max-width: 600px) {
  .split-bar-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fence-ledger {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-left: 3px solid var(--line-strong);
  background: var(--paper-3);
  color: var(--ink-soft);
}
.what-moved {
  display: grid;
  gap: var(--space-3);
}
.what-moved h2,
.what-moved h3,
.what-moved p {
  margin: 0;
}
.what-moved-intro,
.what-moved-pipe p {
  color: var(--ink-soft);
}
.what-moved-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.what-moved-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr 0.7fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.what-moved-row > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.what-moved-row strong {
  color: var(--ink);
}
.what-moved-row span {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.lag-tag {
  min-height: 24px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--step--1);
}
.what-moved-pipe {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.concerns-card,
.internal-report {
  display: grid;
  gap: var(--space-3);
}
.concerns-card h2,
.concerns-card p,
.internal-report h2,
.internal-report p,
.internal-report h3 {
  margin: 0;
}
.concerns-list,
.internal-report-blocks {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.concern-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr 1.2fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.concern-row span,
.internal-report-tier {
  color: var(--ink-soft);
}
.internal-report-block {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.your-company-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.your-company-card h2,
.your-company-card dl,
.your-company-card dt,
.your-company-card dd {
  margin: 0;
}
.your-company-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
}
.your-company-card dt {
  color: var(--muted);
  text-transform: capitalize;
}
.your-company-card dd {
  color: var(--ink);
}

.primary,
.secondary,
.quiet,
.danger-button {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.primary {
  border: 1px solid var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}
.primary:hover:not(:disabled) {
  background: var(--accent-dark);
}
.secondary {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--paper);
}
.quiet {
  border: 0;
  color: var(--muted);
  background: transparent;
}
.danger-button {
  border: 1px solid var(--danger-line);
  color: var(--danger);
  background: var(--danger-soft);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.button-row.end {
  justify-content: flex-end;
}

.notice {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  background: var(--paper-2);
  font-size: var(--step--1);
  line-height: 1.45;
}
.notice.success {
  border-color: var(--teal-line);
  background: var(--teal-soft);
}
.submit-seal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}
.submit-seal-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid
    color-mix(in srgb, var(--seal-accent, var(--accent)) 12%, var(--line));
  border-radius: 50%;
  background: color-mix(
    in srgb,
    var(--seal-accent, var(--accent)) 12%,
    var(--paper)
  );
  animation: seal-press var(--dur-reveal) var(--ease-spring) both;
}
.submit-seal-mark .company-logo {
  width: 16px;
  height: 16px;
  color: var(--seal-accent, var(--accent));
}
.submit-seal-company {
  display: block;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* U3 publish, submit, and first-load cues use state-marked surfaces. The
   timings are explicit so the choreography stays inspectable and never
   depends on a timer or a layout transition. */
.classroom-load-choreography [data-load-stage="sentence"] {
  animation: classroom-load-sentence 160ms var(--ease-out) 160ms both;
}
.classroom-load-choreography [data-load-stage="identity"] {
  animation: classroom-load-identity 240ms var(--ease-out) 320ms both;
}
.classroom-load-choreography [data-load-stage="action"] {
  animation: classroom-load-action 240ms var(--ease-out) 560ms both;
}
.classroom-load-choreography [data-load-stage="action"] button,
.classroom-load-choreography [data-load-stage="action"] input,
.classroom-load-choreography [data-load-stage="action"] select,
.classroom-load-choreography [data-load-stage="action"] textarea {
  animation: none;
  transition: none;
}
@keyframes classroom-load-sentence {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes classroom-load-identity {
  from {
    opacity: 0.98;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes classroom-load-action {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.publish-stage,
.submit-choreography [data-submit-stage] {
  animation-fill-mode: both;
  animation-timing-function: var(--ease-out);
}
.publish-choreography .publish-stage-status {
  animation: publish-stage-status 120ms var(--ease-out) 0ms both;
}
.publish-choreography .publish-stage-scorecard {
  animation: publish-stage-reveal 180ms var(--ease-out) 120ms both;
}
.publish-choreography .publish-stage-rank {
  --publish-row-stagger: 40ms;
  animation: publish-stage-reveal 240ms var(--ease-out) 300ms both;
}
.publish-choreography .publish-stage-rank .leader-row {
  animation: publish-rank-row 180ms var(--ease-out)
    calc(300ms + var(--publish-row-delay, 0ms)) both;
}
.publish-choreography .publish-stage-rank .publish-changed-figure {
  --publish-row-stagger: 40ms;
  animation: publish-changed-figure 180ms var(--ease-out)
    calc(300ms + var(--publish-row-delay, var(--publish-row-stagger))) both;
}
.publish-choreography .publish-stage-causal {
  animation: publish-stage-reveal 360ms var(--ease-out) 540ms both;
}
.publish-choreography .publish-stage-settle {
  animation: publish-stage-reveal 120ms var(--ease-out) 900ms both;
}
.publish-stage-status-copy {
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.publish-stage-status-copy strong {
  font-size: var(--step-1);
}
.publish-stage-status-copy > span:last-child {
  color: var(--muted);
  font-size: var(--step--1);
}
@keyframes publish-stage-status {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes publish-stage-reveal {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes publish-rank-row {
  from {
    opacity: 0;
    transform: translateX(-3px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes publish-changed-figure {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

.submit-choreography .submit-stage-receipt {
  animation: submit-stage-receipt 240ms var(--ease-out) 240ms both;
}
.submit-choreography [data-submit-stage="row-saved"] .action-row {
  animation: submit-row-saved 160ms var(--ease-out) 80ms both;
}
.submit-choreography [data-submit-stage="next-action"] {
  animation: submit-next-action 240ms var(--ease-out) 480ms both;
}
@keyframes submit-stage-receipt {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes submit-row-saved {
  from {
    border-color: var(--line);
    box-shadow: 0 0 0 0 transparent;
  }
  to {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgb(8 118 111 / 12%);
  }
}
@keyframes submit-next-action {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classroom-load-choreography [data-load-stage],
  .classroom-load-choreography [data-load-stage] *,
  .publish-choreography .publish-stage,
  .publish-choreography .publish-stage *,
  .submit-choreography [data-submit-stage],
  .submit-choreography [data-submit-stage] * {
    animation: none !important;
    animation-delay: 0s !important;
    transition: none !important;
    transform: none !important;
  }
  .map-leader-mark {
    animation: none !important;
    opacity: 1 !important;
  }
  .map-viewport {
    transition: none !important;
  }
}

@keyframes seal-press {
  from {
    transform: scale(0.94);
    opacity: 0.65;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.notice.warning {
  border-color: var(--amber-line);
  background: var(--amber-soft);
}
.notice.error {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}
.notice strong {
  display: block;
  margin-bottom: 3px;
}

.conflict-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.conflict-fields {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.conflict-field {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.conflict-field legend {
  padding: 0 6px;
  font-weight: var(--weight-strong);
}
.conflict-field p {
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.draft-history {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.draft-history-head,
.revision-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.draft-history-head > div:first-child,
.revision-list li > div {
  display: grid;
  gap: 3px;
}
.draft-history span,
.revision-list span {
  color: var(--muted);
  font-size: var(--step--1);
}
.revision-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.revision-list li {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.revision-seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--teal) !important;
  font-weight: var(--weight-strong);
}
.revision-seal-mark {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
  border-radius: 50%;
  background: var(--teal-soft);
  font-size: var(--step--1) !important;
  line-height: 1;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.metric {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.metric span,
.metric strong {
  display: block;
}
.metric span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.metric strong {
  margin-top: 9px;
  overflow-wrap: anywhere;
  font-size: var(--step-1);
}

.company-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--company-color, var(--muted));
}
.company-logo {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.company-logo.small {
  width: 18px;
  height: 18px;
}
.company-logo.assignment-logo {
  width: 26px;
  height: 26px;
}
.status-label {
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: capitalize;
}
.status-label.submitted,
.status-label.approved {
  color: var(--teal);
}
.status-label.pending,
.status-label.not_started {
  color: var(--amber);
}
.status-label.unfunded {
  display: block;
  color: var(--amber);
  text-transform: none;
}

.instructor-roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.instructor-roster-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.instructor-roster-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.instructor-roster-head > div {
  min-width: 0;
}
.instructor-roster-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px;
}
.instructor-roster-actions > button {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
}
.instructor-roster-head h3,
.instructor-roster-head p {
  margin: 0;
  overflow-wrap: anywhere;
}
.instructor-roster-head h3 {
  font-size: var(--step--1);
}
.instructor-roster-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.participant-seat-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.participant-seat {
  display: grid;
  grid-template-columns: minmax(min(8rem, 100%), 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  min-height: 58px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.participant-seat:last-child {
  border-bottom: 0;
}
.participant-seat.claimed {
  border-left-color: var(--line-strong);
  background: var(--paper-2);
}
.participant-seat.connected {
  border-left-color: var(--teal);
  background: var(--teal-soft);
}
.participant-seat:focus {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.participant-seat-identity strong,
.participant-seat-identity span {
  display: block;
}
.participant-seat-identity strong {
  font-size: var(--step--1);
}
.participant-seat-identity span {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--step--1);
}
.participant-seat-actions {
  flex-wrap: wrap;
}
.participant-release {
  min-height: 44px;
  padding: 7px 9px;
  font-size: var(--step--1);
}
.participant-rotate {
  min-height: 44px;
  padding: 7px 9px;
  font-size: var(--step--1);
}
.participant-reassign {
  min-height: 44px;
  padding: 7px 9px;
  font-size: var(--step--1);
}
.participant-access-feedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.instructor-roster-card > .participant-access-feedback {
  padding: 4px 12px 10px;
}
.participant-reassignment {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  margin: 4px 0 8px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper-2);
}
.participant-reassignment > p {
  margin: 0;
  line-height: 1.45;
}
.participant-reassignment-ack {
  padding: 10px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
}
.participant-reassignment-ack label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.4;
}
.participant-reassignment-ack input[type="text"] {
  margin-top: 8px;
}
.participant-access-feedback.success {
  color: var(--teal-ink);
}
.participant-access-feedback.error {
  color: var(--danger);
}
.entry-mode {
  margin-bottom: 15px;
}
.entry-mode button {
  flex: 1;
}
.text-button {
  width: fit-content;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-decoration: underline;
}
.participation-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin-top: 14px;
}
.participation-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.participation-table th,
.participation-table td {
  min-height: 44px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.participation-table thead th {
  color: var(--muted);
  background: var(--paper-2);
  font-size: var(--step--1);
  text-transform: uppercase;
}
.participation-table tbody th {
  font-weight: var(--weight-strong);
}

.decision-comparison {
  display: grid;
  gap: 18px;
}
.comparison-mobile-sort,
.map-mobile-quick-picks {
  display: none;
}
/* The picks sit on the map shell, which stays #0a2a45 in both themes, so the
   generic quiet button's --muted ink (2.3:1 there) is replaced with fixed
   light ink and a 3:1 edge. */
.map-mobile-quick-picks button {
  border: 1px solid #8aa5bd;
  border-radius: 5px;
  color: #eef4f8;
  background: rgb(255 255 255 / 8%);
}
.map-mobile-quick-picks button[aria-pressed="true"] {
  border-color: #ffffff;
  background: rgb(255 255 255 / 20%);
}
.comparison-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  outline-offset: 4px;
}
.comparison-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.comparison-table th,
.comparison-table td {
  min-height: 48px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.comparison-table thead th {
  color: var(--muted);
  background: var(--paper-2);
  font-size: var(--step--1);
  text-transform: uppercase;
}
.comparison-table tbody th {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
}
.comparison-table tbody tr.selected {
  background: var(--accent-soft);
}
.comparison-company-text {
  display: grid;
  gap: 2px;
}
.comparison-presence {
  color: var(--muted);
}
.comparison-table td:nth-child(3) {
  min-width: 210px;
}
.sort-button {
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: inherit;
  font-weight: var(--weight-strong);
  text-transform: inherit;
}
.review-team-button {
  min-height: 44px;
  padding: 7px 9px;
  white-space: nowrap;
}
.team-detail {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-2);
}
.team-detail-head {
  margin-bottom: 10px;
}
.team-detail-head h3 {
  margin: 0;
}
.team-detail .decision-review-card {
  width: 100%;
}
.decision-review-card {
  width: auto;
  max-width: 330px;
  flex: 0 0 min(330px, 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.decision-review-head {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 64px;
  padding: 11px 13px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.decision-review-head h3 {
  margin: 0;
}
.decision-review-head div > span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--step--1);
}
.decision-review-head > strong {
  max-width: 92px;
  text-align: right;
}
.decision-review-group {
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
}
.decision-review-group h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--step--1);
  text-transform: uppercase;
}
.decision-review-group dl,
.review-brief dl {
  margin: 0;
}
.decision-review-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
  gap: 9px;
  padding: 4px 0;
  font-size: var(--step--1);
  line-height: 1.4;
}
.decision-review-row dt {
  color: var(--muted);
}
.decision-review-row dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-strong);
}
.review-empty {
  min-height: 150px;
  padding: 24px 13px;
  color: var(--muted);
  font-size: var(--step--1);
}
.review-brief {
  padding: 11px 13px;
}
.review-brief > summary {
  cursor: pointer;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.review-brief > summary,
.technical-details > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
}
.review-brief dl {
  margin-top: 10px;
}

.map-shell {
  overflow: hidden;
  border: 1px solid #1f3440;
  border-radius: 7px;
  background: var(--map-ocean);
  box-shadow: 0 14px 35px rgb(8 22 31 / 18%);
}
.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  color: white;
  background: #101f2a;
  border-bottom: 1px solid #2d4350;
}
.map-toolbar-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.map-toolbar strong {
  font-size: var(--step--1);
}
.map-toolbar span {
  color: #b7c8d1;
  font-size: var(--step--1);
}
.map-toolbar label {
  color: #b7c8d1;
}
.map-toolbar .definition-chip {
  color: #b9c4ff;
  border-bottom-color: #b9c4ff;
}
.map-toolbar .definition-chip:hover {
  color: white;
  border-bottom-color: white;
}
.map-toolbar-copy > [data-map-status] {
  min-height: 1lh;
}
.map-tools {
  container: map-tools / inline-size;
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 8px 16px;
  color: white;
  background: #0d1a24;
  border-bottom: 1px solid #2d4350;
}
.map-zoom-controls,
.map-layer-toggles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.map-zoom-button,
.map-layer-toggle {
  display: inline-flex;
  min-width: 34px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid #4b6470;
  border-radius: 999px;
  color: #d7e3e7;
  background: #172b36;
  font: inherit;
  font-size: var(--step--1);
  line-height: 1;
  cursor: pointer;
}
.map-zoom-button:hover,
.map-zoom-button:focus-visible,
.map-layer-toggle:hover,
.map-layer-toggle:focus-visible,
.map-layer-toggle.active {
  border-color: #d8e8eb;
  color: white;
  background: #2b4755;
}
/* Off is an unfilled chip and on is the filled one, not a strikethrough. */
.map-layer-toggle:not(.active) {
  color: #8fa4ad;
}
.map-layer-toggle:not(.active, :hover, :focus-visible) {
  background: transparent;
}
@media (any-pointer: coarse) {
  .map-zoom-button,
  .map-layer-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}
.map-zoom-level {
  min-width: 3.5ch;
  color: #d7e3e7;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.map-zoom-button:focus-visible,
.map-layer-toggle:focus-visible,
.map-detail-toggles-summary:focus-visible,
.map-leader-panel-toggle:focus-visible,
.map-leader-table-sort:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* The four detail toggles sit inline with the rest when the map toolbar
   itself is at least 880px wide (the toggle group unwraps: both it and its
   body become `display: contents`, so its buttons are plain flex items of
   .map-layer-toggles), and become a collapsible "Map detail" popover below
   that width (M3, review round 2: a real <details> hides its body
   regardless of display, so the group is a plain button/div pair with
   aria-expanded, not <details>/<summary>; F1, review round 3: the toolbar's
   own width decides, not the viewport, so the toggles unwrap only when the
   toolbar has room). */
@container map-tools (min-width: 880px) {
  .map-detail-toggles,
  .map-detail-toggles-body {
    display: contents;
  }
  .map-detail-toggles-summary {
    display: none;
  }
}
@container map-tools (max-width: 879.98px) {
  .map-detail-toggles {
    display: inline-flex;
    position: relative;
  }
  .map-detail-toggles-summary {
    display: inline-flex;
    min-width: 34px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #4b6470;
    border-radius: 999px;
    color: #d7e3e7;
    background: #172b36;
    font: inherit;
    font-size: var(--step--1);
    line-height: 1;
    cursor: pointer;
    width: max-content;
  }
  .map-detail-toggles-summary svg {
    transition: transform 200ms var(--ease-out);
  }
  .map-detail-toggles-summary[aria-expanded="true"] svg {
    transform: rotate(90deg);
  }
  .map-detail-toggles-summary[aria-expanded="true"] {
    border-color: #d8e8eb;
    color: white;
    background: #2b4755;
  }
  /* The popover: opening it must not move the toolbar or the stage below
     it (M3), so it is positioned absolutely rather than adding a row. */
  .map-detail-toggles-body {
    display: none;
  }
  @keyframes map-detail-toggles-reveal {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .map-detail-toggles-summary[aria-expanded="true"] + .map-detail-toggles-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    gap: 4px;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 6;
    padding: 8px;
    max-width: calc(100vw - 32px);
    border: 1px solid #4b6470;
    border-radius: 12px;
    background: var(--glass-dark-tint);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur))
      saturate(var(--glass-saturation));
    animation: map-detail-toggles-reveal var(--dur-reveal) var(--ease-out) both;
  }
  .map-detail-toggles-body .map-layer-toggle {
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .map-detail-toggles-summary svg {
      transition: none;
    }
    .map-detail-toggles-summary[aria-expanded="true"]
      + .map-detail-toggles-body {
      animation: none;
    }
  }
}
.map-leader-panel {
  border-top: 1px solid #2c414c;
  color: #d7e3e7;
  background: #101f2a;
}
.map-leader-panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 10px 16px;
}
.map-leader-panel-toggle {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid #4b6470;
  border-radius: 999px;
  color: #d7e3e7;
  background: #172b36;
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}
.map-leader-panel-toggle:hover,
.map-leader-panel-toggle:focus-visible,
.map-leader-panel[data-expanded="true"] .map-leader-panel-toggle {
  border-color: #d8e8eb;
  color: white;
  background: #2b4755;
}
.map-leader-panel-summary {
  color: #b7c8d1;
  font-size: var(--step--1);
}
.map-leader-table-scroll {
  max-height: 420px;
  overflow: auto;
  border-top: 1px solid #2c414c;
}
.map-leader-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.map-leader-table th,
.map-leader-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #22363f;
  text-align: left;
  vertical-align: top;
}
.map-leader-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #b7c8d1;
  background: #101f2a;
  font-weight: var(--weight-strong);
}
.map-leader-table tbody th {
  color: white;
  font-weight: var(--weight-label);
}
.map-leader-table td.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.map-leader-table-sort {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}
.map-leader-table-sort.active::after {
  content: " ↕";
}
[aria-sort="ascending"] .map-leader-table-sort::after {
  content: " ↑";
}
[aria-sort="descending"] .map-leader-table-sort::after {
  content: " ↓";
}
.map-leader-table-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--company-color, #80919a);
  vertical-align: middle;
}
/* The map card takes the whole content width (P104.94): the workspace
   caps that hold prose to a readable measure do not apply to the map page.
   Desktop only: on a phone the :has() specificity would beat the phone
   workspace widths and shrink the full-bleed shell instead. */
@media (min-width: 651px) {
  .workspace:has(> .map-shell),
  .workspace:has(> * > .map-shell) {
    width: min(1500px, calc(100% - 32px));
  }
  .workspace-layout:has(.map-shell) {
    width: min(1720px, calc(100% - 48px));
  }
  .workspace-layout:has(.role-workspace-navigation[data-collapsed="true"]):has(
      .map-shell
    ) {
    grid-template-columns: minmax(0, 1500px);
  }
}
.map-stage-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
  align-items: stretch;
  /* The key column is capped at the plate's own height (stage width × 0.52,
     with the key's 220px track removed from the container width) and scrolls
     inside it, so the taller key can no longer stretch the row and letterbox
     the map into a 1000×520 plate floating in 350px of empty ocean
     (P104.94: "the map is too small"). */
  container-type: inline-size;
}
.map-stage-layout > .map-legend {
  max-height: max(310px, calc((100cqw - 220px) * 0.52));
  overflow-y: auto;
  scrollbar-width: thin;
}
.map-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  /* The grid stretches the stage to the key's height; without the cap the
     aspect ratio turns that height into a width that overruns the key column
     and paints the map over the Company key. */
  max-width: 100%;
  aspect-ratio: 1000 / 520;
  min-height: 310px;
  overflow: hidden;
  background: var(--map-ocean);
  isolation: isolate;
}
.world-svg {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.map-scrollport {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.map-scrollport:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.map-scroll-surface > .world-svg {
  position: sticky;
  top: 0;
  left: 0;
}
.map-ocean {
  fill: transparent;
}
.map-coast {
  fill: var(--map-coast-shallow);
  pointer-events: none;
}
.map-coast-texture {
  image-rendering: pixelated;
}
.map-graticule {
  fill: none;
  stroke: #7fb3cf;
  stroke-width: 0.65;
  opacity: 0.18;
}
.map-land {
  fill: none;
  stroke: var(--map-coast);
  stroke-width: 0.7;
  fill-rule: evenodd;
}
/* Water of a drawn strait over the coarse base coastline (P104.630). */
.map-strait {
  fill: var(--map-ocean);
  stroke: none;
}
.map-region {
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  fill: var(--region-fill, #6f7d84);
  fill-opacity: var(--region-opacity, 0.18);
  stroke: var(--region-stroke, #93aab6);
  stroke-width: 0.55;
  fill-rule: evenodd;
  vector-effect: non-scaling-stroke;
  transition:
    fill-opacity 160ms ease,
    stroke 160ms ease;
}
/* The region group's fill and stroke inherit into two paths: the dissolved
   rings are filled, and only the outline edges are stroked (S2). */
.map-region-fill {
  stroke: none;
}
.map-region-edge {
  fill: none;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.map-region.controlled {
  stroke: color-mix(in srgb, var(--region-fill) 70%, white);
  stroke-width: 1.15;
  paint-order: stroke fill;
}
.map-region.led.market-leader {
  stroke: var(--region-stroke, var(--region-fill));
  stroke-width: 0.9;
  paint-order: stroke fill;
}
.map-region.led {
  stroke: var(--region-fill, #80919a);
  stroke-width: 1;
  stroke-dasharray: none;
  paint-order: stroke fill;
}
.map-region.fragmented,
.map-region.unavailable {
  stroke-dasharray: 3 2;
}
.map-region.company-presence {
  fill: var(--region-fill);
  fill-opacity: var(--highlight-intensity, var(--region-opacity));
}
.map-region.contested {
  color: var(--map-border);
}
.map-contested-pattern {
  color: var(--map-border);
}
.map-region.unavailable {
  color: var(--map-border);
  fill: var(--map-land);
  stroke: var(--map-border);
}
/* !important for the same reason as the highlight below: the inline
   presentation stroke otherwise hid every HQ ring. The selection rule comes
   later, so a selected HQ territory still shows the selection. */
.map-region.map-hq-ring {
  stroke: var(--hq-ring-color, currentColor) !important;
  stroke-width: 1.6px !important;
  stroke-dasharray: 6 3 !important;
  stroke-linecap: round;
  paint-order: stroke fill;
}
/* A home region (P104.630): a small HQ and the surrounding market that is
   its company's own second market, outlined as one shape on the HQ layer. */
.map-home-region {
  fill: none;
  stroke: var(--hq-ring-color, currentColor);
  stroke-width: 1.3px;
  stroke-dasharray: 4 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Callout ring around a flag whose HQ is too small to see at world zoom. */
.map-hq-callout {
  fill: none;
  stroke: var(--hq-ring-color, currentColor);
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
}
.map-home-region.company-dimmed,
.map-hq-callout.company-dimmed {
  opacity: 0.4;
}
/* The presentation writes fill and stroke inline on every region, so the
   hover and selection highlight must be !important or it never shows. */
.map-region:hover,
.map-region.selected {
  fill: color-mix(in srgb, var(--region-fill, #6f7d84) 55%, #ffffff) !important;
  fill-opacity: 0.55 !important;
  stroke: #ffffff !important;
  stroke-width: 2.5px !important;
  stroke-dasharray: none !important;
}
.map-region.selected {
  fill-opacity: 0.7 !important;
  stroke-width: 3px !important;
}
.map-region.selected {
  fill-opacity: 0.72;
}
.map-region.company-dimmed,
.map-marker.company-dimmed,
.hq-flag.company-dimmed,
.map-leader-mark.company-dimmed {
  opacity: 0.4;
}
/* Zoom viewport (P104.94). Moved by a CSS transform only; the group carries
   no SVG transform attribute, so nothing here can be overridden (SD-1540).
   Marks and labels inside it are counter-scaled by the zoom controller and
   keep a constant screen size. */
.map-viewport {
  transform-origin: 0 0;
  transition: transform 220ms var(--ease-out);
}
/* Continuous input (wheel/drag/pinch/Safari gesture) drives the transform
   every frame; a transition would fight that and lag behind the pointer. */
.world-svg[data-map-gesture="active"] .map-viewport {
  transition: none;
}
.map-zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgb(6 24 38 / 78%);
  font-size: var(--step--1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.map-zoom-hint[data-visible="true"] {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .map-zoom-hint {
    transition: none;
  }
}
.world-svg {
  touch-action: pan-y;
}
.world-svg[data-map-zoomed="true"] {
  touch-action: none;
  cursor: grab;
}
.world-svg[data-map-zoomed="true"]:active {
  cursor: grabbing;
}
.map-layer-hidden {
  display: none;
}
/* Level-of-detail (P104.244/245): city/terrain/pennant layers a deeper zoom
   train plugs in mark themselves data-map-lod-min="1|2|3" and toggle by this
   one SVG attribute — never by re-rendering per zoom step. */
[data-map-lod-min] {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms var(--ease-out),
    visibility 0s linear 200ms;
}
.world-svg[data-map-lod="1"] [data-map-lod-min="1"],
.world-svg[data-map-lod="2"]
  :is([data-map-lod-min="1"], [data-map-lod-min="2"]),
.world-svg[data-map-lod="3"] [data-map-lod-min] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  [data-map-lod-min] {
    transition: none;
  }
}
/* A city label that collides with a pennant on both sides (M2, P104.244
   review round 1) hides at LOD 3 while its dot stays put. The label carries
   [data-map-lod-max] itself, not [data-map-lod-min] (that lives on its
   anchor <g>), so it needs its own transition rather than inheriting the
   rule above (S1, review round 2): reveal fades opacity in at once,
   the hide below fades opacity out first and only then drops visibility. */
.world-svg [data-map-lod-max] {
  transition:
    opacity 200ms var(--ease-out),
    visibility 0s linear 0s;
}
.world-svg[data-map-lod="3"] [data-map-lod-max="2"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease-out),
    visibility 0s linear 200ms;
}
@media (prefers-reduced-motion: reduce) {
  /* Must outrank the LOD 3 hide rule's (0,3,0) fade above. */
  .world-svg [data-map-lod-max],
  .world-svg[data-map-lod] [data-map-lod-max] {
    transition: none;
  }
}
/* Leadership marks (P104.109): a 15 px disc with the leader's initials for
   control, a ring with the initials for a lead without control, a dashed
   ring for a contest. The mark takes the pointer for its tooltip and selects
   its territory on click, like the polygon under it. */
.map-leader-mark {
  --pennant-final-opacity: 1;
  cursor: pointer;
  color: var(--region-stroke, #d4dde1);
  opacity: 0;
  animation: market-leader-pennant-plant 240ms var(--ease-out) 300ms both;
}
.map-leader-mark.company-dimmed {
  --pennant-final-opacity: 0.4;
  opacity: 0.4;
}
.map-leader-mark-shape {
  paint-order: stroke;
}
.map-leader-mark-control .map-leader-mark-shape {
  stroke: var(--map-ocean);
}
.map-leader-mark-leader .map-leader-mark-shape {
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 55%));
}
.map-leader-mark-contested .map-leader-mark-shape {
  opacity: 0.85;
}
.map-leader-mark-code {
  font-family: inherit;
  font-size: var(--font-size-compass);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  fill: currentColor;
  stroke: var(--map-ocean);
  stroke-width: 2px;
  paint-order: stroke;
  pointer-events: none;
  user-select: none;
}
.map-leader-mark-control .map-leader-mark-code {
  fill: var(--map-ocean);
  stroke: none;
}
.map-mark-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 4px 8px;
  border: 1px solid #4b6470;
  border-radius: 5px;
  color: white;
  background: #0d1a24;
  font-size: var(--step--1);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
  transform: translate(
    calc(var(--tooltip-x, 0px) - 50%),
    calc(var(--tooltip-y, 0px) - 100% - 10px)
  );
}
.map-mark-tooltip[data-placement="below"] {
  transform: translate(
    calc(var(--tooltip-x, 0px) - 50%),
    calc(var(--tooltip-y, 0px) + 10px)
  );
}
.map-mark-tooltip[hidden] {
  display: none;
}
/* The compact mark key beside the layer toggles: three sample marks drawn by
   the same function as the map's marks, plus the HQ flag. */
.map-layer-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  color: #d7e3e7;
  font-size: var(--step--1);
}
.map-layer-legend[hidden] {
  display: none;
}
.map-layer-legend-item {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}
.map-layer-legend-sample {
  flex: none;
  overflow: visible;
  color: #d7e3e7;
}
.map-layer-legend-sample .map-leader-mark-code {
  stroke: #0d1a24;
}
.map-layer-legend-sample circle[fill="currentColor"] + .map-leader-mark-code {
  fill: #0d1a24;
  stroke: none;
}
@keyframes market-leader-pennant-plant {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--pennant-final-opacity, 1);
  }
}
.map-marker {
  pointer-events: none;
  fill: var(--marker-fill, #d4dde1);
  stroke: var(--marker-stroke, #fff);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.map-marker.controlled {
  stroke-width: 1.2;
}
.map-marker.led {
  fill: #d4dde1;
  stroke: var(--marker-stroke, #80919a);
  stroke-width: 2;
  stroke-dasharray: none;
}
.map-marker.fragmented,
.map-marker.unavailable {
  stroke-dasharray: 3 2;
}
.map-marker.company-presence {
  fill: var(--marker-fill);
  fill-opacity: var(--highlight-intensity, var(--region-opacity));
}
.map-marker.map-highlight-dimmed {
  fill: var(--map-border);
}
.map-marker-interactive {
  pointer-events: auto;
  cursor: pointer;
}
.map-marker-interactive:hover,
.map-marker-interactive.selected {
  stroke-width: 2.2;
  stroke: white;
}
.map-marker-interactive:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--map-ocean);
}
/* P104.249: focus never draws its own box on the region path (an outline
   on an SVG path paints its bounding box, even under plain :focus once a
   script-driven selection moves focus outside a :focus-visible gesture);
   the selection outline layer below is the focus ring instead. */
.map-region:focus,
.map-region:focus-visible {
  outline: none;
  box-shadow: none;
}
.map-label {
  fill: #dce9f0;
  stroke: rgb(6 24 38 / 78%);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
  letter-spacing: 0.02em;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-anchor: middle;
  pointer-events: none;
}
/* P104.249/250: selection = the territory's own dissolved outline, cloned
   into a pointer-events:none layer above the tint so it survives zoom/pan
   with the same transform and never overdraws a shared edge. */
.map-selection-layer {
  pointer-events: none;
}
.map-selection-halo {
  fill: none;
  stroke: rgb(255 255 255 / 26%);
  stroke-width: 7px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 1;
}
.map-selection-outline {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* B1 (V2-map-2 review): a normalized dash over a multi-contour path leaves
     contours undrawn, so the resting outline never carries a dash; only the
     entering draw-in does, and mapView.js drops the class on animationend. */
  stroke-dasharray: none;
}
/* P104.246: the draw-in/halo-fade animation is keyed on this class, added
   only when the selection actually changes (mapView.js), so a full
   re-render with the same selection renders the static end state instead
   of replaying the animation. M1: it exists only when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .map-selection-halo.map-selection-enter {
    opacity: 0;
    animation: map-selection-halo 320ms var(--ease-out) 60ms forwards;
  }
  .map-selection-outline.map-selection-enter {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: map-selection-draw 380ms var(--ease-out) forwards;
  }
}
@keyframes map-selection-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes map-selection-halo {
  to {
    opacity: 1;
  }
}
.world-svg:has(.map-region.selected:focus-visible) .map-selection-outline {
  stroke: #ffd479;
  stroke-width: 2.6px;
}
.world-svg:has(.map-region.selected:focus-visible) .map-selection-halo {
  stroke: rgb(255 212 121 / 30%);
}
/* Map detail layers by zoom level (P104.244/245/246): fade gating comes from
   the shared [data-map-lod-min] rule above; these are the visual styles
   only. Cities and terrain read as texture, never a border (P104.250). */
.map-city-dot {
  fill: #e8f1f5;
  stroke: rgb(6 24 38 / 80%);
  stroke-width: 0.8px;
  vector-effect: non-scaling-stroke;
}
.map-city-label {
  fill: #dce9f0;
  font-size: var(--step--2, 0.7rem);
  stroke: rgb(6 24 38 / 78%);
  stroke-width: 2.5px;
  paint-order: stroke;
  stroke-linejoin: round;
}
.map-range,
.map-range-ticks {
  fill: none;
  stroke: #b9c9d1;
  stroke-opacity: 0.32;
  stroke-width: 0.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map-contested-mark-ring {
  fill: rgb(6 24 38 / 72%);
  stroke: rgb(255 212 121 / 55%);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.map-contested-mark-glyph {
  stroke: #ffd479;
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map-contested-crest-segment {
  fill-opacity: 0.85;
  stroke: rgb(6 24 38 / 72%);
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
}
.map-contested-crest-rim {
  fill: none;
  stroke: #e0a72c;
  stroke-width: 1.4px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map-contested-crest-count-disc {
  fill: #1c3350;
}
.map-contested-crest-count {
  fill: #e0a72c;
  font-size: var(--font-size-compass);
  font-weight: 700;
}
.map-pennant-badge {
  stroke: rgb(6 24 38 / 55%);
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
}
.map-overlay {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 8px;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.map-stat {
  padding: 8px 10px;
  border: 1px solid #4b6470;
  border-radius: 5px;
  color: white;
  background: rgb(9 21 29 / 86%);
}
.map-stat span,
.map-stat strong {
  display: block;
}
.map-stat span {
  color: #9fb2bc;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.map-stat strong {
  margin-top: 3px;
  font-size: var(--step--1);
}
.map-legend {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  padding: 14px;
  color: #bdcbd2;
  background: rgb(10 21 29 / 88%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-left-color: #293e49;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    0 12px 28px rgb(0 0 0 / 32%);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  font-size: var(--step--1);
}
.map-shell .map-inspector {
  color: white;
  background: rgb(16 31 42 / 88%);
  border-color: rgb(255 255 255 / 18%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    0 12px 28px rgb(0 0 0 / 32%);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
@media (prefers-reduced-transparency: reduce) {
  .map-legend,
  .map-shell .map-inspector {
    background: #0a151d;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .map-leader-mark {
    color: CanvasText;
    fill: CanvasText;
    animation: none;
    opacity: 1;
  }
  .map-leader-mark-shape {
    stroke: CanvasText;
  }
  .map-leader-mark-control .map-leader-mark-shape {
    fill: CanvasText;
  }
  .map-leader-mark-code {
    fill: CanvasText;
    stroke: Canvas;
  }
  .map-leader-mark-control .map-leader-mark-code {
    fill: Canvas;
  }
  .map-mark-tooltip,
  .map-layer-legend {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
  .map-cue-shape {
    stroke: CanvasText;
  }
  .map-cue-control,
  .map-cue-leadership {
    fill: CanvasText;
    fill-opacity: 0.26;
    stroke: currentColor;
  }
  .map-cue-copy {
    color: CanvasText;
  }
  .map-legend {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .map-shell .map-inspector {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .map-leader-mark.company-dimmed {
    opacity: 1;
  }
}
.map-key-heading {
  display: grid;
  gap: 3px;
  padding-bottom: 6px;
  border-bottom: 1px solid #293e49;
}
.map-key-heading strong {
  color: white;
  font-size: var(--step--1);
}
.map-key-heading span,
.map-key-note {
  color: #9fb2bc;
  font-size: var(--step--1);
  line-height: 1.4;
}
.map-key-entry {
  display: grid;
  grid-template-columns: 10px 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 30px;
}
.map-key-entry.company-dimmed .map-key-swatch,
.map-key-entry.company-dimmed .company-logo {
  opacity: 0.4;
}
.map-key-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.map-key-copy strong,
.map-key-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-key-copy strong {
  color: #edf5f7;
  font-size: var(--step--1);
}
.map-key-local-incumbent .map-key-copy {
  grid-column: 3;
}
.map-key-local-incumbent .map-key-copy strong {
  white-space: normal;
}
.map-key-status {
  color: #9fb2bc;
  font-size: var(--step--1);
}
.map-key-swatch {
  width: 10px;
  height: 18px;
  border-radius: 2px;
  background: var(--company-color, #80919a);
  border: 1px solid #d4e0e4;
}
.map-key-note {
  margin: 4px 0 0;
  display: grid;
  gap: 4px;
}
.map-cue-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}
.map-cue-swatch {
  display: block;
  width: 34px;
  height: 20px;
  overflow: visible;
  color: currentColor;
}
.map-cue-shape {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.map-cue-control {
  fill: currentColor;
  stroke: none;
}
.map-cue-hq {
  stroke-width: 1.4;
  stroke-dasharray: 4 2;
}
.map-cue-leadership {
  fill: currentColor;
  fill-opacity: 0.26;
  stroke: currentColor;
  stroke-width: 1.2;
}
.map-cue-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.25;
}
.map-legend .map-cue-copy {
  color: #edf5f7;
}
.map-cue-detail {
  color: #9fb2bc;
  font-size: var(--step--2, 0.75rem);
  line-height: 1.3;
}
.map-unplaced {
  padding: 10px 14px 12px;
  border-top: 1px solid #2c414c;
  color: #d7e3e7;
  background: #101f2a;
}
.map-unplaced-copy {
  margin: 0 0 8px;
  font-size: var(--step--1);
}
.map-unplaced-copy strong {
  color: #edf5f7;
}
.map-unplaced-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.map-unplaced-territory {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #4b6470;
  border-radius: 999px;
  color: #d7e3e7;
  background: #172b36;
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}
.map-unplaced-territory:hover,
.map-unplaced-territory:focus-visible,
.map-unplaced-territory.selected {
  border-color: #d8e8eb;
  color: white;
  background: #2b4755;
}
.map-company-highlights {
  display: flex;
  min-width: 0;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #2d4350;
}
.map-highlight-company-row,
.map-highlight-mode-row,
.map-gradient-legend {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.map-highlight-company-row {
  flex: 1 1 auto;
}
.map-highlight-label {
  color: #9fb2bc;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.map-highlight-company,
.map-highlight-mode,
.map-highlight-clear {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid #4b6470;
  border-radius: 999px;
  color: #d7e3e7;
  background: #172b36;
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}
.map-highlight-company:hover,
.map-highlight-company:focus-visible,
.map-highlight-mode:hover,
.map-highlight-mode:focus-visible,
.map-highlight-clear:hover,
.map-highlight-clear:focus-visible,
.map-highlight-company.active,
.map-highlight-mode.active {
  border-color: #d8e8eb;
  color: white;
  background: #2b4755;
}
.map-highlight-company:disabled,
.map-highlight-mode:disabled,
.map-highlight-clear:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.map-highlight-company small {
  color: #9edbd1;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.map-highlight-company-swatch {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--company-color, #80919a);
}
.map-highlight-clear {
  border-color: #80919a;
  background: transparent;
}
.map-gradient-legend {
  justify-content: flex-end;
}
.map-gradient-step {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 3px;
  color: #c9d6da;
  font-size: var(--step--1);
  white-space: nowrap;
}
.map-gradient-step i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #d4e0e4;
  border-radius: 2px;
  background: color-mix(
    in srgb,
    var(--highlight-color, #3fb5a8) var(--legend-percent, 100%),
    #101f2a
  );
}
.map-key-entry.company-highlight-selected {
  outline: 1px solid #d8e8eb;
  outline-offset: 3px;
}
.map-help-key {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}
.map-help-key .map-key-copy strong {
  color: var(--ink);
}
.map-legend .company-logo {
  width: 14px;
  height: 14px;
}
.map-inspector {
  border-top: 1px solid #2c414c;
  color: white;
  background: #101f2a;
}
.map-inspector-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 0.9fr);
  gap: 24px;
  align-items: end;
  padding: 18px 20px;
}
.map-inspector-title span {
  color: #9db0ba;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.map-inspector-title h2 {
  margin: 5px 0 0;
  color: white;
  font-size: var(--step-1);
}
.map-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
.map-summary div {
  min-width: 0;
}
.map-summary dt {
  color: #9db0ba;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.map-summary dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.map-composition {
  margin: 0;
  padding: 0 20px 17px;
  color: #bdcbd2;
  font-size: var(--step--1);
  line-height: 1.5;
}
.map-geometry-disclosure {
  margin: 0;
  padding: 0 20px 17px;
  color: #f1d59a;
  font-size: var(--step--1);
  line-height: 1.45;
}
.map-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  border-top: 1px solid #2c414c;
}
.culture-profile,
.territory-context {
  min-width: 0;
  padding: 18px 20px 20px;
}
.territory-context {
  border-left: 1px solid #2c414c;
}
.map-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.map-panel-head h3,
.territory-context h3 {
  margin: 0;
  color: white;
  font-size: var(--step--1);
}
.map-panel-head .help-button {
  color: #c7d4da;
  background: #172a35;
  border-color: #48606c;
}
.culture-grid {
  margin-top: 13px;
}
.culture-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(90px, 1.2fr) 30px;
  gap: 10px;
  align-items: center;
  min-height: 36px;
}
.culture-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.culture-label strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  white-space: normal;
}
.culture-label span {
  color: #839ba6;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.culture-track,
.share-track {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: #2b404b;
}
.culture-track i {
  display: block;
  width: var(--culture-value);
  height: 100%;
  background: #d8e2e6;
}
.culture-track-unavailable,
.share-track-unavailable {
  border: 1px dashed var(--map-border);
  background: transparent;
}
.culture-value {
  color: #d8e2e6;
  font-size: var(--step--1);
  text-align: right;
}
.map-profile-note {
  margin: 12px 0 0;
  color: #8299a4;
  font-size: var(--step--1);
}
.map-home-region-note {
  margin: 12px 0 0;
  color: #d8e2e6;
  font-size: var(--step--1);
}
.territory-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 13px;
  background: #2b404b;
  border: 1px solid #2b404b;
}
.territory-facts > div {
  min-width: 0;
  min-height: 58px;
  padding: 10px 11px;
  background: #132630;
}
.territory-facts > div.wide {
  grid-column: 1 / -1;
}
.territory-facts span,
.territory-facts strong {
  display: block;
}
.territory-facts span {
  color: #8fa5af;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.territory-facts strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
}
.share-heading {
  margin-top: 18px !important;
}
.territory-share-list {
  margin-top: 9px;
}
.territory-share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px 10px;
  align-items: center;
  min-height: 29px;
  margin-bottom: 10px;
}
.share-company {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #c4d1d7;
  font-size: var(--step--1);
}
.share-company-name {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.share-company > .help-bubble {
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  overflow: visible;
}
.share-company .company-logo {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.share-track i {
  display: block;
  width: var(--company-share);
  height: 100%;
  background: var(--company-color);
}
.territory-share-row > strong {
  font-size: var(--step--1);
  text-align: right;
  white-space: nowrap;
}
.territory-share-row.unavailable > strong {
  color: #9fb2bc;
  font-size: var(--step--1);
}
.map-loading {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  color: #b9cad3;
  text-align: center;
}
.map-loading p {
  margin: 0;
  max-width: 42ch;
  color: #b9cad3;
  font-size: var(--step-0);
}
.surveying-loader {
  width: min(240px, 70%);
  height: auto;
  overflow: visible;
}
.surveying-loader-graticule {
  fill: none;
  stroke: #6d8591;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: survey-graticule 400ms var(--ease-out) both;
}
.surveying-loader-land {
  fill: var(--map-land);
  stroke: var(--map-border);
  stroke-width: 1;
  opacity: 0;
  animation: survey-territories 180ms var(--ease-out) 400ms forwards;
}
.surveying-loader-territory {
  fill: #d4dde1;
  opacity: 0;
  animation: survey-territories 180ms var(--ease-out)
    calc(400ms + var(--survey-delay, 0ms)) forwards;
}
@keyframes survey-graticule {
  from {
    stroke-dashoffset: 40;
    opacity: 0.2;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
}
@keyframes survey-territories {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.map-compass {
  pointer-events: none;
}
.map-compass-needle {
  pointer-events: auto;
  transform-box: fill-box;
  transform-origin: center;
}
.map-compass-needle.compass-whimsy {
  animation: compass-whimsy 900ms var(--ease-out) both;
}
.map-compass-cross {
  fill: none;
  stroke: #9fb2bc;
  stroke-width: 0.7;
}
.map-compass-north {
  fill: #cbd9de;
  stroke: none;
}
.map-compass-label {
  fill: #cbd9de;
  font-size: var(--font-size-compass);
  font-weight: var(--weight-strong);
  text-anchor: middle;
}
@keyframes compass-whimsy {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(720deg);
  }
}

.market-analysis-dashboard {
  display: grid;
  gap: 18px;
}
.market-analysis-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}
.published-round-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.published-round-nav button {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: var(--paper);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.published-round-nav button:hover,
.published-round-nav button:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
}
.published-round-nav button.active {
  color: var(--on-accent);
  border-color: var(--accent);
  background: var(--accent);
}
.market-analysis-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--readout-line);
  border-radius: 7px;
  background: linear-gradient(135deg, var(--readout-tint), var(--paper));
}
.market-analysis-context strong,
.market-analysis-context p {
  display: block;
}
.market-analysis-context strong {
  margin-top: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-1);
}
.market-analysis-context p {
  margin: 6px 0 0;
  color: var(--ink-report);
  font-size: var(--step--1);
  line-height: 1.5;
}
.market-analysis-enterprise-context {
  padding-left: 14px;
  border-left: 1px solid var(--readout-line);
}
.market-analysis-enterprise-context span,
.market-analysis-enterprise-context strong,
.market-analysis-enterprise-context small {
  display: block;
}
.market-analysis-enterprise-context span {
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.market-analysis-enterprise-context strong {
  font-family: inherit;
  font-size: var(--step--1);
}
.market-analysis-enterprise-context small {
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.market-analysis-kpis {
  margin-top: 0;
}
.market-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.market-analysis-panel {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.market-analysis-panel .performance-section-head {
  align-items: start;
}
.market-analysis-panel .performance-section-head p {
  text-align: left;
}
.market-analysis-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.5;
}
.market-analysis-movement-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  counter-reset: market-movement;
}
.market-analysis-movement-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.market-analysis-movement-list li > div,
.market-analysis-movement-list li span {
  display: block;
}
.market-analysis-movement-list li span {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--step--1);
}
.market-analysis-movement-list .positive,
.market-analysis-company-row .positive {
  color: var(--teal);
}
.market-analysis-movement-list .negative,
.market-analysis-company-row .negative {
  color: var(--danger);
}
.market-analysis-company-table {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.market-analysis-company-row {
  display: grid;
  grid-template-columns: minmax(145px, 1.3fr) 46px 80px 100px 100px;
  gap: 10px;
  align-items: center;
  min-width: 530px;
  min-height: 45px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.market-analysis-company-head {
  min-height: 36px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.market-analysis-company-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.market-analysis-company-name > span:not(.company-swatch) {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.market-analysis-company-row > span:not(:first-child) {
  text-align: right;
}
.market-analysis-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.market-analysis-status {
  margin: 0;
}
.market-analysis-empty {
  padding: 16px;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  font-size: var(--step--1);
}

/* Private coaching is a quiet editorial margin, not another dashboard card.
   It is the only post-publication disclosure that uses the spring easing. */
.coaching-disclosure {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 18px 0 2px;
  border-top: 1px solid var(--line);
}
.coaching-disclosure-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.coaching-disclosure-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.coaching-disclosure-title .eyebrow {
  margin-bottom: 3px;
  color: var(--pedagogy);
}
.coaching-disclosure-title h4 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-1);
  line-height: 1.25;
}
.coaching-lens {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--pedagogy) 55%, var(--line));
  border-radius: 50%;
  color: var(--pedagogy);
  background: color-mix(in srgb, var(--pedagogy) 8%, var(--paper));
  font-size: var(--step--1);
}
.coaching-toggle {
  max-width: 100%;
  color: var(--pedagogy);
  border-color: color-mix(in srgb, var(--pedagogy) 45%, var(--line-strong));
}
.coaching-toggle:hover:not(:disabled) {
  color: var(--pedagogy);
  border-color: var(--pedagogy);
  background: color-mix(in srgb, var(--pedagogy) 7%, var(--paper));
}
.coaching-summary {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--step-0);
}
.coaching-disclosure-body {
  display: grid;
  gap: 16px;
  padding: 14px 0 4px 44px;
  border-left: 2px solid var(--pedagogy);
}
.coaching-disclosure-body:not([hidden]) {
  animation: coaching-reveal var(--dur-reveal) var(--ease-spring) both;
}
.coaching-sections {
  display: grid;
  gap: 14px;
}
.coaching-section {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
.coaching-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.coaching-section h5 {
  margin: 0;
  color: var(--pedagogy);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.coaching-section p {
  margin: 6px 0 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-1);
  line-height: 1.5;
}
.coaching-evidence-note {
  color: var(--muted) !important;
  font-family: inherit !important;
  font-size: var(--step--1) !important;
}
.coaching-unavailable {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
}
@keyframes coaching-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.round-verdict {
  margin: 0 0 24px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.round-verdict .eyebrow {
  margin-bottom: 8px;
  color: var(--teal);
}
.round-verdict-title {
  max-width: 30ch;
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--font-size-verdict);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.round-verdict-copy {
  max-width: 62ch;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: var(--font-size-narrative);
  line-height: 1.55;
}
.round-verdict-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
.round-verdict-signal {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 14px 12px 12px;
  background: var(--paper);
}
.round-verdict-signal-label {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.round-verdict-signal-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--font-size-signal);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-strong);
  line-height: 1.1;
}
.round-verdict-signal[data-direction="positive"] .round-verdict-signal-value {
  color: var(--teal);
}
.round-verdict-signal[data-direction="negative"] .round-verdict-signal-value {
  color: var(--amber);
}
.round-verdict-signal[data-availability="not_yet_published"]
  .round-verdict-signal-value,
.round-verdict-signal[data-availability="unavailable"]
  .round-verdict-signal-value {
  color: var(--muted);
  font-size: var(--step-1);
  font-weight: var(--weight-label);
}
@media (max-width: 680px) {
  .round-verdict-signals {
    grid-template-columns: minmax(0, 1fr);
  }
  .round-verdict-title {
    font-size: var(--font-size-verdict-mobile);
  }
}
@media (prefers-reduced-motion: reduce) {
  .round-verdict,
  .round-verdict * {
    animation: none;
    transition: none;
  }
}

.leaderboard {
  border-top: 1px solid var(--line);
}
.results-view .compact-metrics span,
.results-view .metric span {
  font-size: var(--step--1);
}
.leader-row {
  display: grid;
  grid-template-columns: 36px 18px minmax(120px, 1fr) 100px;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.leader-row strong:last-child {
  text-align: right;
}
.your-round-result {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line);
}
.your-round-result .field-availability {
  margin-left: auto;
}

.financial-table {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.financial-row {
  display: grid;
  min-width: 720px;
  grid-template-columns:
    minmax(150px, 1.4fr) repeat(4, minmax(90px, 1fr))
    minmax(90px, 0.8fr);
  gap: 12px;
  align-items: center;
  min-height: 47px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.financial-row.selected {
  background: var(--accent-soft);
}
.financial-head {
  min-height: 36px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.financial-status {
  font-weight: var(--weight-strong);
  text-transform: capitalize;
}
.financial-status.strong,
.financial-status.stable {
  color: var(--teal);
}
.financial-status.strained,
.financial-status.distressed {
  color: var(--danger);
}
.winning-standard {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--teal-line);
  border-radius: 6px;
  background: var(--teal-soft);
  font-size: var(--step--1);
  line-height: 1.45;
}
.gradebook-scroll {
  overflow-x: auto;
  outline-offset: 4px;
}
.gradebook-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.gradebook-table th,
.gradebook-table td {
  height: 44px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.gradebook-table thead th {
  height: 38px;
  color: var(--muted);
  background: var(--paper-2);
  font-size: var(--step--1);
  text-transform: uppercase;
}
.gradebook-table tbody th {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.financial-snapshot-head {
  margin-top: 22px;
}
.component-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.component-grid > div,
.component-grid > article {
  min-width: 0;
  min-height: 74px;
  padding: 12px;
  border-left: 1px solid var(--line);
}
.scorecard-component {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.scorecard-component:first-child {
  border-left: 0;
}
.scorecard-component-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
}
.scorecard-component-head h4 {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--step-0);
}
.scorecard-influence {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: lowercase;
}
.scorecard-inputs,
.scorecard-band,
.scorecard-direction,
.scorecard-mechanism,
.scorecard-breakdown {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.45;
}
.scorecard-inputs,
.scorecard-mechanism {
  color: var(--muted);
}
.scorecard-breakdown {
  max-width: 78ch;
  margin-top: 14px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}
.component-grid > div:first-child,
.component-grid > article:first-child {
  border-left: 0;
}
.component-grid span,
.component-grid strong {
  display: block;
}
.component-grid span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.component-grid strong {
  margin-top: 8px;
  font-size: var(--step--1);
}

.performance-report-list {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.company-performance-report {
  border-bottom: 1px solid var(--line);
}
.company-performance-report > summary {
  position: relative;
  padding: 15px 34px 15px 0;
  cursor: pointer;
  list-style: none;
}
.performance-report-list .company-performance-report > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
}
.company-performance-report > summary::-webkit-details-marker {
  display: none;
}
.company-performance-report > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--muted);
  font-size: var(--step-1);
  transform: translateY(-50%);
}
.company-performance-report[open] > summary::after {
  content: "−";
}
.company-performance-report:not(details) > .performance-report-summary {
  padding: 17px 0;
}
.performance-report-summary {
  display: grid;
  grid-template-columns: 18px minmax(130px, 1fr) 80px 90px;
  gap: 10px;
  align-items: center;
  min-height: 28px;
  font-size: var(--step--1);
}
.performance-report-summary > span:nth-last-child(2),
.performance-report-summary > span:last-child {
  text-align: right;
}
.performance-report-body {
  padding-bottom: 20px;
}
.capstone-debrief {
  width: 100%;
}
.capstone-debrief-list {
  display: grid;
  width: 100%;
  gap: 16px;
  border-top: 0;
}
.capstone-debrief-card {
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.capstone-debrief-summary {
  grid-template-columns: 18px minmax(0, 1fr) minmax(180px, auto);
  font-size: var(--step--1);
}
.capstone-debrief-summary > span {
  text-align: right;
  font-weight: var(--weight-strong);
}
.capstone-debrief-body {
  width: 100%;
  padding: 12px 0 0;
}
.capstone-debrief-body > p {
  max-width: none;
  margin: 0 0 12px;
  font-size: var(--step--1);
  line-height: 1.55;
}
.capstone-debrief-body .decision-review-group {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.capstone-debrief-body .report-story {
  width: 100%;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.capstone-debrief-body .report-story h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--font-size-section);
  font-weight: 700;
  line-height: 1.08;
}
.capstone-debrief-body .report-story ul {
  margin-top: 0;
  font-size: var(--font-size-narrative);
  line-height: 1.55;
}
.gatefold {
  position: relative;
  margin-top: 12px;
  border-top: 1px solid var(--line-strong);
}
.gatefold-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  min-height: 52px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}
.gatefold-summary::-webkit-details-marker {
  display: none;
}
.gatefold-summary strong {
  font-size: var(--step-1);
  font-weight: var(--weight-strong);
}
.gatefold-summary > span:last-child {
  color: var(--muted);
  font-size: var(--step--1);
}
.gatefold-body {
  position: relative;
  transform-origin: top center;
  animation: gatefold-open var(--dur-route) var(--ease-out) both;
}
.gatefold-body::before {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--line-strong),
    transparent
  );
  box-shadow: 0 0 12px rgb(23 32 42 / 14%);
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-route) var(--ease-out);
}
.gatefold[open] .gatefold-body::before {
  opacity: 1;
}
@keyframes gatefold-open {
  from {
    opacity: 0.7;
    transform: scaleY(0.6);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
.performance-readout {
  margin: 4px 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--readout-line);
  border-radius: 7px;
  background: linear-gradient(135deg, var(--readout-tint), var(--paper));
}
.report-story {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0;
  margin-top: 10px;
}
.report-story article {
  min-width: 0;
  padding: 4px 18px;
  border-left: 1px solid var(--readout-line);
}
.report-story article:first-child {
  padding-left: 0;
  border-left: 0;
}
.report-story article > span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.performance-readout h3 {
  max-width: 760px;
  margin: 7px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-1);
  line-height: 1.25;
}
.performance-readout p,
.performance-readout li {
  max-width: 880px;
  margin: 7px 0 0;
  color: var(--ink-report);
  font-size: var(--step--1);
  line-height: 1.5;
}
.report-story ul {
  margin: 7px 0 0;
  padding-left: 17px;
}
.report-diagnostics {
  padding: 0;
}
.report-diagnostics > summary {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-weight: var(--weight-strong);
}
.report-diagnostics > summary::-webkit-details-marker {
  display: none;
}
.report-diagnostics > summary::after {
  content: "+";
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--muted);
  font-size: var(--step-1);
}
.report-diagnostics[open] > summary::after {
  content: "−";
}
.report-diagnostics > summary small {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.report-diagnostic-body {
  padding: 4px 0 20px;
}
.technical-details {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.technical-details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.performance-section {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.performance-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 13px;
}
.performance-section-head h3,
.performance-section-head p {
  margin: 0;
}
.performance-section-head p {
  max-width: 620px;
  font-size: var(--step--1);
  text-align: right;
}

.statement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.statement-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.statement-panel h4 {
  margin: 0;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  font-size: var(--step--1);
}
.statement-rows {
  padding: 5px 12px 8px;
}
.statement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 28px;
  align-items: center;
  color: var(--ink-report);
  font-size: var(--step--1);
}
.statement-row strong {
  text-align: right;
  color: var(--ink);
}
.statement-row.subtotal {
  margin-top: 3px;
  border-top: 1px solid var(--line);
}
.statement-row.total {
  margin-top: 3px;
  border-top: 1px solid var(--line);
  font-weight: var(--weight-strong);
}
.statement-row.grand-total {
  margin-top: 4px;
  border-top: 2px solid var(--ink);
  font-weight: var(--weight-strong);
}
.statement-note {
  margin: 0;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--paper-2);
  font-size: var(--step--1);
}
.ratio-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ratio-grid > div {
  min-width: 0;
  padding: 10px;
  border-left: 1px solid var(--line);
}
.ratio-grid > div:first-child {
  border-left: 0;
}
.ratio-grid span,
.ratio-grid strong {
  display: block;
}
.ratio-grid span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.ratio-grid strong {
  margin-top: 5px;
  font-size: var(--step--1);
}
.capital-markets-report {
  scroll-margin-top: 76px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.capital-markets-report h4 {
  margin: 0;
  font-size: var(--step--1);
}
.capital-market-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 12px;
  border: 1px solid var(--line);
}
.capital-market-summary .metric {
  min-width: 0;
  padding: 10px;
  border-left: 1px solid var(--line);
}
.capital-market-summary .metric span {
  font-size: var(--step--1);
}
.capital-market-summary .metric:first-child {
  border-left: 0;
}
.capital-market-pricing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
  border: 1px solid var(--line);
}
.capital-market-pricing > div {
  min-width: 0;
  padding: 10px;
  border-left: 1px solid var(--line);
}
.capital-market-pricing > div:first-child {
  border-left: 0;
}
.capital-market-pricing span,
.capital-market-pricing strong {
  display: block;
}
.capital-market-pricing span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.capital-market-pricing strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
}
.capital-market-driver-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.capital-driver-panel {
  padding: 11px;
  border: 1px solid var(--line);
}
.capital-driver-panel > strong {
  display: block;
  margin-bottom: 9px;
  font-size: var(--step--1);
}
.capital-driver-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) 1fr 28px;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
  font-size: var(--step--1);
}
.capital-driver-track {
  height: 5px;
  background: var(--paper-3);
}
.capital-driver-track i {
  display: block;
  height: 100%;
  background: var(--teal);
}
.capital-driver-row b {
  text-align: right;
  font-size: var(--step--1);
}
.accounting-check {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: var(--step--1);
}
.accounting-check.balanced {
  border-color: var(--teal-line);
  background: var(--teal-soft);
}
.accounting-check.unbalanced {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.research-results {
  min-width: 0;
}
.research-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
}
.research-summary-grid > div {
  min-width: 0;
  min-height: 82px;
  padding: 11px 12px;
  border-left: 1px solid var(--line);
}
.research-summary-grid > div:first-child {
  border-left: 0;
}
.research-summary-grid span,
.research-summary-grid strong,
.research-summary-grid small {
  display: block;
}
.research-summary-grid span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.research-summary-grid strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
}
.research-summary-grid small {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.3;
}
.research-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.research-chart {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.research-chart.wide {
  grid-column: 1 / -1;
}
.research-chart h4,
.research-quotes h4 {
  margin: 0 0 12px;
  font-size: var(--step--1);
}
.research-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.research-chart-head span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.nps-stack {
  display: flex;
  width: 100%;
  height: 18px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-3);
}
.nps-stack i {
  display: block;
  width: var(--response-share);
  height: 100%;
}
.nps-stack .detractors,
.nps-legend .detractors i {
  background: var(--danger);
}
.nps-stack .passives,
.nps-legend .passives i {
  background: var(--amber);
}
.nps-stack .promoters,
.nps-legend .promoters i {
  background: var(--teal);
}
.nps-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}
.nps-legend > span {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: var(--step--1);
}
.nps-legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.nps-legend strong {
  color: var(--ink);
}
.rating-histogram {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
  height: 150px;
  align-items: end;
}
.rating-histogram > div {
  display: grid;
  grid-template-rows: 122px 18px;
  gap: 5px;
  min-width: 0;
  text-align: center;
}
.rating-count {
  position: relative;
  display: flex;
  z-index: 0;
  align-items: flex-start;
  justify-content: center;
  height: 122px;
  color: var(--muted);
  font-size: var(--step--1);
}
.rating-count::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 1px;
  bottom: 0;
  left: 1px;
  height: var(--rating-height);
  min-height: 2px;
  background: var(--muted);
}
.rating-histogram strong {
  font-size: var(--step--1);
}
.research-analysis {
  align-items: start;
}
.segment-chart,
.relationship-chart,
.theme-chart {
  display: grid;
  gap: 7px;
}
.signed-chart-row {
  display: grid;
  grid-template-columns: minmax(105px, 0.8fr) minmax(90px, 1.2fr) 42px minmax(
      60px,
      auto
    );
  gap: 8px;
  align-items: center;
  min-height: 26px;
}
.signed-chart-row > span,
.theme-chart span {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--step--1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signed-chart-row > strong,
.theme-chart strong {
  font-size: var(--step--1);
  text-align: right;
}
.signed-chart-row > small {
  color: var(--muted);
  font-size: var(--step--1);
}
.signed-track {
  position: relative;
  height: 7px;
  background: linear-gradient(
    to right,
    var(--paper-3) 0 49.7%,
    var(--line-strong) 49.7% 50.3%,
    var(--paper-3) 50.3% 100%
  );
}
.signed-track i {
  position: absolute;
  top: 0;
  left: var(--bar-left);
  width: var(--bar-width);
  height: 100%;
}
.signed-track i.positive {
  background: var(--teal);
}
.signed-track i.negative {
  background: var(--danger);
}
.research-qualitative {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
  margin-top: 12px;
}
.theme-chart > div {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(80px, 1.2fr) 30px;
  gap: 8px;
  align-items: center;
  min-height: 26px;
}
.theme-track {
  height: 7px;
  background: var(--paper-3);
}
.theme-track i {
  display: block;
  width: var(--theme-width);
  height: 100%;
  background: var(--muted);
}
.research-quotes {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.quote-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.quote-list blockquote {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border-left: 3px solid var(--line-strong);
  background: var(--paper-2);
}
.quote-list p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.45;
}
.quote-list footer {
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--step--1);
}
.research-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.department-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.department-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.department-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.department-card-head h4 {
  margin: 0;
}
.department-card-head strong {
  color: var(--muted);
  font-size: var(--step--1);
}
.department-card > p {
  min-height: 42px;
  margin: 6px 0 12px;
  font-size: var(--step--1);
}
.department-measures {
  border-top: 1px solid var(--line);
}
.department-measures > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.department-measures span {
  color: var(--muted);
  font-size: var(--step--1);
}
.department-measures strong {
  font-size: var(--step--1);
  text-align: right;
}
.department-measures small {
  color: var(--muted);
  font-size: var(--step--1);
}
.department-measures .measure-target {
  grid-column: 1;
}
.department-measures .measure-change {
  grid-column: 2;
  text-align: right;
}
.department-measures > div:has(.change-arrow) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.department-measures .change-arrow {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
}
.department-measures .change-arrow + .measure-change {
  grid-column: 3;
  grid-row: 1;
}
.department-measures .in_range strong {
  color: var(--teal);
}
.department-measures .below strong,
.department-measures .above strong {
  color: var(--amber);
}

.effect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
}
.effect-grid > div {
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.effect-grid > div:nth-child(4n) {
  border-right: 0;
}
.effect-grid > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}
.effect-grid span,
.effect-grid strong {
  display: block;
}
.effect-grid span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.effect-grid strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
}

.welcome {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  background: var(--paper);
}
.welcome.welcome-marketing {
  grid-template-columns: minmax(0, 1fr);
}
.welcome-marketing .welcome-intro {
  min-height: 100vh;
  min-height: 100dvh;
}
.welcome-intro {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--pad-generous);
  padding-inline: var(--pad-fluid-inline);
  background:
    radial-gradient(circle at 82% 16%, rgb(125 150 255 / 26%), transparent 26%),
    radial-gradient(circle at 16% 92%, rgb(29 192 181 / 16%), transparent 30%),
    linear-gradient(145deg, #1c3037 0%, #17242b 48%, #101d23 100%);
  color: white;
}
.welcome-intro::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
}
.welcome-intro::before {
  position: absolute;
  top: 8%;
  right: -12rem;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgb(194 205 255 / 30%);
  border-radius: 46% 54% 59% 41%;
  box-shadow:
    0 0 0 4.5rem rgb(125 150 255 / 4%),
    0 0 0 9rem rgb(34 191 180 / 3%);
  content: "";
}
.welcome-intro > * {
  position: relative;
  z-index: 1;
}
.welcome-intro .brand-mark {
  width: 46px;
  height: 46px;
  color: #ff6689;
  border-color: #ff6689;
}
.welcome-login .brand[href] {
  color: inherit;
  text-decoration: none;
}
.welcome-intro .brand-copy .welcome-brand-kind,
.welcome-intro .brand-copy .welcome-brand-purpose {
  display: block;
  color: #d7e3e6;
}
.welcome-intro .brand-copy .welcome-brand-purpose {
  max-width: 42ch;
  margin-top: 6px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
}
.welcome-title {
  max-width: 680px;
  margin: auto 0;
}
.welcome-hero {
  margin: auto 0;
}
.welcome-hero .welcome-title {
  margin: 0;
}
.welcome-marketing .welcome-hero {
  display: grid;
  width: 100%;
  max-width: 680px;
  margin: auto;
  padding-block: 36px;
}
.welcome-marketing .welcome-title {
  width: 100%;
  justify-self: center;
  text-align: center;
}
.welcome-marketing .welcome-title :is(h1, p, .founder-quote) {
  margin-inline: auto;
}
.welcome-marketing .welcome-title h1 {
  font-size: clamp(2.4rem, 4vw, 4.1rem);
}
.welcome-marketing .landing-choices {
  justify-content: center;
}
.welcome-marketing :is(.landing-choices, .welcome-briefing) {
  margin-inline: auto;
}
.welcome-marketing :is(.founder-quote, .welcome-briefing-point) {
  text-align: left;
}
@media (min-width: 901px) {
  .welcome-marketing .welcome-hero:has(> .welcome-gameplay:not([hidden])) {
    max-width: 1360px;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(24px, 3.5vw, 56px);
    padding-block: clamp(32px, 6vh, 64px);
  }
  .welcome-marketing .welcome-intro > .brand {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
  }
  .welcome-marketing .welcome-hero > .welcome-gameplay {
    margin-top: 30px;
  }
  .welcome-marketing
    .welcome-hero:has(> .welcome-gameplay:not([hidden]))
    :is(.landing-choices, .founder-quote) {
    margin-top: 28px;
  }
  .welcome-marketing
    .welcome-hero:has(> .welcome-gameplay:not([hidden]))
    .welcome-title {
    text-align: left;
  }
  .welcome-marketing
    .welcome-hero:has(> .welcome-gameplay:not([hidden]))
    .welcome-title
    :is(h1, p, .founder-quote) {
    margin-inline: 0;
  }
  .welcome-marketing
    .welcome-hero:has(> .welcome-gameplay:not([hidden]))
    .landing-choices {
    justify-content: flex-start;
  }
}
.welcome-title .eyebrow {
  color: #b7c8d1;
}
.welcome-title h1 {
  max-width: 620px;
  margin-bottom: 18px;
  font-size: clamp(3.1rem, 4.65vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.welcome-title p {
  max-width: 580px;
  color: #d7e3e6;
  font-size: clamp(1rem, 1.05vw, 1.13rem);
  line-height: 1.56;
}
.landing-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.landing-choice {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgb(226 232 255 / 48%);
  border-radius: 999px;
  color: #fff;
  background: rgb(6 21 27 / 35%);
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.landing-choice > span:first-child {
  color: #c2cdff;
  font-size: 1rem;
  line-height: 1;
}
.landing-choice:hover {
  border-color: #c2cdff;
  color: #fff;
  background: rgb(157 176 255 / 20%);
}
.landing-choice:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgb(24 196 182 / 52%);
}
.landing-choice.primary {
  border-color: #8ea2ff;
  background: #2f4fb0;
}
.landing-choice.primary:hover {
  border-color: #c2cdff;
  background: #3a5cc6;
}
.founder-quote {
  max-width: 58ch;
  margin: 20px 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid #24c4b6;
}
.founder-quote p {
  margin: 0;
  color: #e5f4f2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-0);
  line-height: 1.45;
}
.founder-quote cite {
  display: block;
  margin-top: 7px;
  color: #9bc8c3;
  font-size: var(--step--1);
  font-style: normal;
  font-weight: var(--weight-strong);
}
.welcome-briefing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}
.welcome-briefing-point {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgb(204 235 236 / 32%);
  border-radius: 8px;
  background: rgb(5 16 20 / 42%);
}
.welcome-briefing-point strong {
  color: #fff;
  font-size: var(--step--1);
}
.welcome-briefing-point span {
  color: #d0e0e2;
  font-size: 0.79rem;
  line-height: 1.42;
}
.training-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.training-step {
  padding: 13px 0;
  border-top: 1px solid #506169;
}
.training-step span {
  display: block;
  margin-bottom: 7px;
  color: #b7c8d1;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.training-step strong {
  font-size: var(--step--1);
  line-height: 1.35;
}
.welcome-foot {
  max-width: 58ch;
  color: #b3c8ce;
  font-size: var(--step--1);
}
.welcome-tutorial {
  margin-top: 26px;
  border-color: #71838b;
  color: #fff;
  background: transparent;
}
.welcome-tutorial:hover {
  border-color: #c2cdff;
  color: #fff;
  background: rgb(157 176 255 / 12%);
}

/* Keep the welcome background; use the same card for course and account access. */
.welcome:not(.welcome-marketing) .welcome-access .access-panel {
  max-width: 440px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 16px 40px rgb(17 37 43 / 10%);
}

.hosted-entry-flow.hosted-sign-in {
  gap: 10px;
}

.welcome-access
  :is(#hosted-auth-title, #hosted-local-auth-title, #hosted-entry-title) {
  margin: 0;
  font-size: clamp(var(--step-3), 2.5vw, var(--step-4));
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.welcome-access
  :is(#hosted-auth-title, #hosted-local-auth-title):focus-visible {
  outline: 0;
  box-shadow: none;
}

.hosted-sign-in .hosted-auth-choices {
  gap: 12px;
}

.hosted-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 7px 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.hosted-auth-divider::before,
.hosted-auth-divider::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.hosted-sign-in .hosted-local-auth-form {
  gap: 14px;
}

.welcome-access .access-form input {
  min-height: 48px;
  border-radius: 8px;
  font-size: var(--step-1);
}

.welcome-access .access-form .primary {
  min-height: 48px;
  margin: 0;
  border-radius: 8px;
  font-size: var(--step-0);
}

.hosted-sign-in .hosted-local-auth-form .unverified-email-label {
  margin: 0;
}

.hosted-sign-in .hosted-auth-recovery {
  justify-self: end;
  min-height: 24px;
  margin-top: -5px;
}

.hosted-auth-signup {
  margin: 8px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--step-0);
}

.hosted-auth-signup .text-button {
  display: inline;
  padding: 0;
  font-size: inherit;
}

.hosted-auth-back {
  justify-self: center;
  margin-top: 12px;
  color: var(--muted);
}

.company-swatch.company-logo-monogram {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid var(--company-color, var(--muted));
  border-radius: 7px;
  color: var(--company-monogram-foreground, var(--paper));
  background: var(--company-color, var(--muted));
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.05em;
  line-height: 1;
}
.company-swatch.company-logo-monogram.small {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border-radius: 5px;
  font-size: var(--font-size-monogram);
  letter-spacing: 0;
}
.join-company-choices {
  display: grid;
  gap: 6px;
  margin-top: -8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
}
.join-company-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.join-company-choice-copy,
.hosted-company-option-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.join-company-choice-copy {
  display: grid;
  gap: 2px;
}
.join-company-choice-copy strong,
.hosted-company-option-heading strong {
  overflow-wrap: anywhere;
}
.join-company-choice-copy span {
  color: var(--muted);
  font-size: var(--step--1);
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .welcome:not(.welcome-marketing) .access-panel {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 24px rgb(17 37 43 / 10%);
  }
}

/* An endless loop is allowed here only because the sign-in landing is not a
   working page; the drift is slow and never runs under reduced motion
   (P104.246). */
@media (prefers-reduced-motion: no-preference) {
  .welcome-intro::before {
    animation: landing-orbit 16s ease-in-out infinite alternate;
  }
  .welcome-intro::after {
    animation: landing-grid-drift 28s linear infinite;
  }
}

@keyframes landing-orbit {
  from {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  to {
    transform: rotate(20deg) translate3d(-28px, 20px, 0);
  }
}
@keyframes landing-grid-drift {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      42px 42px,
      42px 42px;
  }
}

.welcome-access {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-content: center;
  padding: var(--pad-generous);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--paper) 14%, var(--canvas)),
      var(--canvas)
    ),
    var(--canvas);
}
/* A soft panel behind the access column, shown only while a landing
   button has opened it; the section is not rendered when it closes. */
.welcome-access-open .welcome-access::before {
  position: absolute;
  z-index: -1;
  inset: clamp(12px, 2vw, 28px);
  border: 1px solid rgb(125 150 255 / 18%);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgb(125 150 255 / 14%), transparent 62%),
    linear-gradient(160deg, rgb(34 191 180 / 9%), transparent 70%);
  pointer-events: none;
  content: "";
}
@media (prefers-reduced-motion: no-preference) {
  .welcome-access-open .welcome-access::before {
    animation: landing-access-backdrop 360ms ease-out;
  }
}
@keyframes landing-access-backdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.access-panel {
  width: min(500px, 100%);
  margin: 0 auto;
}
.welcome-access .access-panel {
  position: relative;
  z-index: 1;
}
/* Owner 2026-10-13 (rel6 item 4): the gameplay preview lengthens the intro
   column of the login and access views; the access card stays centred in the
   first screen instead of sliding down the taller row. */
@media (min-width: 901px) {
  .welcome:not(.welcome-marketing) .welcome-access {
    grid-template-rows: minmax(
      min-content,
      calc(100dvh - 2 * var(--pad-generous))
    );
    align-content: start;
  }
  .welcome:not(.welcome-marketing) .welcome-access > .access-panel {
    align-self: center;
  }
}
.welcome-gameplay {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(204 235 236 / 40%);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 20px 48px rgb(0 0 0 / 24%);
}
.welcome-gameplay-label {
  margin: 0;
  padding: 14px 18px;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
/* The preview poster is a captured classroom workspace; behind the sign-in
   card it reads as a live workspace bleeding through. Display none also keeps
   the observer from ever starting the video. */
.welcome-access .welcome-gameplay {
  display: none;
}
.welcome-gameplay-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}
.welcome-gameplay-poster,
.welcome-gameplay-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.welcome-gameplay-video {
  opacity: 0;
  transition: opacity 280ms ease;
}
.welcome-gameplay[data-gameplay-state="playing"] .welcome-gameplay-video,
.welcome-gameplay[data-gameplay-state="paused"] .welcome-gameplay-video[src] {
  opacity: 1;
}
.welcome-gameplay-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--paper);
}
.welcome-gameplay-copy {
  min-width: 0;
}
.welcome-gameplay-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  line-height: 1.25;
}
.welcome-gameplay-detail {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.welcome-gameplay-toggle {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  font-size: var(--step--1);
}
@media (prefers-reduced-motion: no-preference) {
  .welcome-gameplay[data-gameplay-phase="0"] .welcome-gameplay-copy,
  .welcome-gameplay[data-gameplay-phase="2"] .welcome-gameplay-copy {
    animation: welcome-gameplay-copy-a 280ms ease;
  }
  .welcome-gameplay[data-gameplay-phase="1"] .welcome-gameplay-copy,
  .welcome-gameplay[data-gameplay-phase="3"] .welcome-gameplay-copy {
    animation: welcome-gameplay-copy-b 280ms ease;
  }
}
@keyframes welcome-gameplay-copy-a {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
@keyframes welcome-gameplay-copy-b {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-gameplay-video {
    transition: none;
  }
}
.welcome-access .access-panel > .eyebrow {
  color: var(--muted);
}
.access-panel h2 {
  font-size: var(--step-3);
}
.access-panel > p {
  margin-bottom: 24px;
}
.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-3);
}
.mode-switch button {
  min-height: 39px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.mode-switch button.active {
  color: var(--ink);
  background: var(--paper);
}
.access-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
}
.access-form .primary {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
}
.form-hint {
  /* Layouts own spacing; hints can directly follow text or controls. */
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.setup-group {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.setup-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}
.setup-heading h3,
.setup-heading p {
  margin: 0;
}
.setup-heading h3 {
  font-size: var(--step--1);
}
.setup-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.setup-step {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--on-fill);
  background: var(--ink);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.game-length-group .field {
  margin-left: 38px;
}
.setup-advanced {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.setup-advanced > summary {
  min-height: 44px;
  padding: 12px 14px;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.setup-advanced-body {
  display: grid;
  gap: 14px;
  padding: 2px 14px 14px;
}
.check-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 44px;
  padding: 8px 0;
}
.check-row input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}
.check-row strong,
.check-row small {
  display: block;
}
.check-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

.assignment-builder {
  max-height: min(52vh, 470px);
  max-height: min(52dvh, 470px);
  overflow: auto;
  border-top: 1px solid var(--line);
}
.assignment-row {
  display: grid;
  grid-template-columns: 28px minmax(92px, 1fr) auto 94px;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid var(--line);
}
.access-form .assignment-row {
  grid-template-columns: 28px minmax(0, 1fr) 94px;
  padding: 8px 0;
}
.access-form .assignment-row .segmented {
  grid-column: 2 / -1;
}
.access-form .assignment-row .seat-count-field {
  grid-column: 3;
  grid-row: 1;
}
.assignment-row strong {
  font-size: var(--step--1);
}
.assignment-company span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--step--1);
}
.segmented {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper-3);
}
.segmented button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: 3px;
  color: var(--muted);
  background: transparent;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}
.segmented button.active {
  color: var(--ink);
  background: var(--paper);
}
.seat-count-field {
  gap: 3px;
}
.seat-count-field label {
  font-size: var(--step--1);
  line-height: 1.2;
}
.seat-count-field select {
  min-height: 44px;
  padding: 7px 22px 7px 8px;
  font-size: var(--step--1);
}

.team-roster-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px 18px;
  align-items: start;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.team-roster-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.team-roster-heading > div:last-child {
  min-width: 0;
}
.team-roster-strip h2,
.team-roster-strip p {
  margin: 0;
}
.team-roster-strip h2 {
  font-size: var(--step--1);
}
.team-roster-strip p {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.seat-progress {
  font-size: var(--step--1);
  white-space: nowrap;
}
.seat-roster {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seat-roster li {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--canvas);
  font-size: var(--step--1);
}
.seat-roster li.claimed {
  border-color: var(--amber-line);
  color: var(--ink);
  background: var(--amber-soft);
}
.seat-roster li.connected {
  border-color: var(--teal-line);
  color: var(--ink);
  background: var(--teal-soft);
}
.seat-roster small {
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.codes-overlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(12 23 30 / 72%);
}
.codes-sheet {
  width: min(720px, 100%);
  max-height: 90vh;
  max-height: 90dvh;
  overflow: auto;
  padding: 22px;
  border-radius: 7px;
  background: var(--paper);
  box-shadow: 0 30px 80px rgb(0 0 0 / 30%);
}
.codes-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.code-box {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper-2);
}
.code-box span,
.code-box strong {
  display: block;
}
.code-box span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}
.code-box strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--step--1);
}
.code-list {
  border-top: 1px solid var(--line);
}
.code-team {
  border-bottom: 1px solid var(--line);
}
.code-team-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  align-items: center;
  background: var(--canvas);
}
.code-team-head span {
  color: var(--muted);
  font-size: var(--step--1);
}
.code-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.code-team .code-row {
  padding-left: 12px;
}
.code-team .code-row:last-child {
  border-bottom: 0;
}
.code-row code {
  text-align: right;
  font-weight: var(--weight-strong);
}

dialog {
  width: min(470px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
}
dialog::backdrop {
  background: rgb(18 29 36 / 55%);
}
.help-dialog {
  max-height: min(640px, calc(100vh - 32px));
  max-height: min(640px, calc(100dvh - 32px));
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.dialog-head h2 {
  margin: 0;
  font-size: var(--step-1);
}
.dialog-body {
  max-height: min(540px, calc(100vh - 150px));
  max-height: min(540px, calc(100dvh - 150px));
  overflow: auto;
  padding: 18px;
}
.dialog-body p {
  margin: 0;
  line-height: 1.55;
  white-space: pre-line;
}
.dialog-body p + p {
  margin-top: 12px;
}
.action-dialog-form {
  margin: 0;
}
.action-dialog-body {
  display: grid;
  gap: 18px;
}
.action-dialog-rationale {
  display: grid;
  gap: 7px;
}
.action-dialog-rationale textarea {
  min-height: 96px;
  resize: vertical;
}
/* `display: grid` above outranks the user agent's [hidden] rule, which is
   how Begin review, Calculate round and Publish results showed an unlabelled
   rationale box with only its hint (ISS-014). */
.action-dialog-rationale[hidden] {
  display: none;
}
.field-hint {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--step--1);
}
.field-error {
  color: var(--danger);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.field-error[hidden] {
  display: none;
}
.action-confirmation-dialog .dialog-actions {
  gap: 8px;
}

#tutorial-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: min(760px, calc(100vh - 32px));
  max-height: min(760px, calc(100dvh - 32px));
}
.tutorial-body {
  display: grid;
  gap: 0;
  padding: 8px 18px 18px;
  overflow: auto;
}
.tutorial-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.tutorial-step h3 {
  margin: 0 0 4px;
  font-size: var(--step--1);
}
.tutorial-step p {
  margin: 0;
  font-size: var(--step--1);
}
.tutorial-step-visual {
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.tutorial-step-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.tutorial-number {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}
.tutorial-note {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 13px 14px;
  border-left: 3px solid var(--teal);
  background: var(--teal-soft);
  font-size: var(--step--1);
  line-height: 1.45;
}
.tutorial-note strong {
  font-size: var(--step--1);
  text-transform: uppercase;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}

.error-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--danger);
  font-size: var(--step--1);
  line-height: 1.45;
}
.empty-state {
  padding: 40px 20px;
  text-align: center;
}
.empty-state p {
  max-width: 520px;
  margin: 7px auto 0;
}
.hash {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--step--1);
}

@media (max-width: 900px) {
  .workspace-layout {
    width: min(1220px, calc(100% - 32px));
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
  }

  .welcome {
    grid-template-columns: 1fr;
  }
  .welcome-intro {
    min-height: auto;
    padding: var(--pad-generous) 24px;
  }
  .welcome-title {
    margin: 64px 0 28px;
  }
  .welcome-title h1 {
    font-size: clamp(2.55rem, 9vw, 4.35rem);
    letter-spacing: -0.03em;
  }
  /* Owner 2026-10-13 10:12: stacked, the access card leads; the login view
     keeps its brand and title above the card. The preview follows the card
     (entryViews renders it after the access section at this width). */
  .welcome-access-open:not(.welcome-login) .welcome-access {
    order: -1;
  }
  .welcome > .welcome-gameplay {
    width: auto;
    margin: 0 16px 24px;
  }
  .welcome-marketing .welcome-gameplay {
    display: none;
  }
  .welcome-briefing {
    grid-template-columns: 1fr;
    max-width: 580px;
  }
  .welcome-briefing-point {
    grid-template-columns: minmax(132px, 0.42fr) 1fr;
    align-items: start;
  }
  .landing-choices {
    max-width: 580px;
  }
  .welcome-access {
    min-height: 620px;
    padding: var(--pad-generous) 24px;
  }
  .topbar {
    grid-template-columns: 1fr auto;
  }
  .round-chip {
    display: block;
    min-width: 0;
    max-width: 190px;
  }
  .round-chip strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scenario-band {
    grid-template-columns: 1fr;
  }
  .scenario-context {
    padding: 15px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .field-grid.four,
  .field-grid.five,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .instructor-roster-grid {
    grid-template-columns: 1fr;
  }
  .component-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .component-grid > div:nth-child(4),
  .component-grid > article:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .component-grid > div:nth-child(5),
  .component-grid > div:nth-child(6),
  .component-grid > article:nth-child(5),
  .component-grid > article:nth-child(6) {
    border-top: 1px solid var(--line);
  }
  .statement-grid {
    grid-template-columns: 1fr;
  }
  .research-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .research-summary-grid > div:nth-child(4) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .research-summary-grid > div:nth-child(5) {
    border-top: 1px solid var(--line);
  }
  .research-qualitative {
    grid-template-columns: 1fr;
  }
  .capital-market-strip,
  .capital-market-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .capital-market-strip > div:nth-child(4),
  .capital-market-summary .metric:nth-child(4) {
    border-left: 0;
  }
  .capital-market-strip > div:nth-child(n + 4),
  .capital-market-summary .metric:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }
  .capital-market-pricing {
    grid-template-columns: 1fr 1fr;
  }
  .capital-market-pricing > div:nth-child(3) {
    border-left: 0;
  }
  .capital-market-pricing > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .ratio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ratio-grid > div:nth-child(5) {
    border-left: 0;
  }
  .ratio-grid > div:nth-child(n + 5) {
    border-top: 1px solid var(--line);
  }
  .effect-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .decision-form {
    padding-right: 20px;
  }
  .decision-footer {
    position: static;
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }
  .round-checklist,
  .department-progress ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-story {
    grid-template-columns: 1fr;
  }
  .report-story article {
    padding: 14px 0;
    border-top: 1px solid var(--readout-line);
    border-left: 0;
  }
  .report-story article:first-child {
    border-top: 0;
  }
  .effect-grid > div:nth-child(4n) {
    border-right: 1px solid var(--line);
  }
  .effect-grid > div:nth-child(3n) {
    border-right: 0;
  }
  .effect-grid > div:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
  .map-inspector-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .map-profile-layout {
    grid-template-columns: 1fr;
  }
  .territory-context {
    border-top: 1px solid #2c414c;
    border-left: 0;
  }
  .map-stage-layout {
    grid-template-columns: 1fr;
  }
  .map-stage-layout > .map-legend {
    max-height: none;
    overflow-y: visible;
  }
  .map-legend {
    border-top: 1px solid #293e49;
    border-left: 0;
  }
  .market-analysis-head,
  .market-analysis-context,
  .market-analysis-grid {
    grid-template-columns: 1fr;
  }
  .published-round-nav {
    justify-content: flex-start;
  }
  .market-analysis-enterprise-context {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--readout-line);
    border-left: 0;
  }
  .coaching-disclosure-body {
    padding-left: 18px;
  }
}

@media (max-width: 650px) {
  /* Keep the expanded People role breakdown inside the phone form. As with
     responsive report tables, each row becomes a labelled record. The header
     stays visible because it contains the Hires and Training help controls. */
  .workforce-role-table,
  .workforce-role-table :is(thead, tbody) {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .workforce-role-table thead tr {
    display: flex;
    flex-wrap: wrap;
  }
  .workforce-role-table thead th {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .workforce-role-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .workforce-role-table tbody :is(th, td) {
    display: block;
    min-width: 0;
    padding: var(--space-2) 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .workforce-role-table td[data-label]::before {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--muted);
    content: attr(data-label);
  }
  .workforce-role-table input[type="number"] {
    min-width: 0;
  }
  .comparison-mobile-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .comparison-mobile-sort select,
  .comparison-mobile-sort button,
  .map-mobile-quick-picks button {
    min-height: 44px;
  }
  .map-mobile-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .workspace-layout {
    display: block;
    width: min(100% - 20px, 1220px);
  }

  .workspace-layout > .workspace {
    width: 100%;
  }

  .role-workspace-navigation[data-mobile-drawer="true"] {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    width: min(320px, calc(100vw - 32px));
    max-height: 100dvh;
    min-height: 100dvh;
    padding: 16px;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: 16px 0 32px rgb(0 0 0 / 18%);
  }

  .workspace-navigation-close {
    display: block;
    margin: 0 0 10px;
  }

  h1 {
    font-size: var(--step-3);
  }
  .workspace {
    width: min(100% - 20px, 1220px);
    padding-top: 12px;
  }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 60px;
    padding: 8px 10px;
  }
  .round-chip {
    max-width: 160px;
    text-align: right;
  }
  .round-chip .round-clock {
    font-size: var(--step-1);
  }
  .round-chip > span:not(.round-clock):not(.round-calendar) {
    display: none;
  }
  .topbar-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .brand-copy span,
  .presence {
    display: none;
  }
  .header-connection .presence {
    display: inline-flex;
  }
  .topbar-actions,
  .topbar-status,
  .topbar-controls {
    gap: 6px;
    min-width: 0;
  }
  .sync-state {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: flex-start;
    white-space: normal;
  }
  .sync-state > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .topbar-tutorial {
    width: 34px;
    padding: 0;
    font-size: var(--font-size-hidden);
  }
  .topbar-tutorial::after {
    content: "i";
    font-size: var(--step--1);
    font-weight: var(--weight-strong);
  }
  .tutorial-step {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
  }
  .round-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .band-head {
    flex-direction: column;
    align-items: stretch;
  }
  .band-head > button {
    align-self: flex-start;
    max-width: 100%;
    white-space: normal;
  }
  .registered-greeting {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .action-grid,
  .field-grid,
  .field-grid.three,
  .field-grid.four,
  .field-grid.five,
  .metric-grid {
    grid-template-columns: 1fr;
  }
  .compact-metrics {
    grid-template-columns: 1fr;
  }
  .compact-metrics > div:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .compact-metrics > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }
  .compact-metrics > div:nth-child(5) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .component-grid {
    grid-template-columns: 1fr;
  }
  .component-grid > div:nth-child(odd),
  .component-grid > article:nth-child(odd) {
    border-left: 0;
  }
  .component-grid > div:nth-child(n + 3),
  .component-grid > article:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .conflict-banner,
  .decision-footer {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  /* In this wrapping column footer a 100% basis is a full column height, so
     Save and the sync state wrap into a second column off-screen. */
  .decision-footer .cfo-signoff,
  .decision-footer .cash-impact-note {
    flex-basis: auto;
  }
  .decision-footer .button-row {
    justify-content: stretch;
  }
  .decision-footer button {
    flex: 1;
  }
  .participant-seat {
    grid-template-columns: 1fr;
  }
  .participant-release {
    justify-self: start;
  }
  .assignment-row {
    grid-template-columns: 28px minmax(0, 1fr) 94px;
    padding: 8px 0;
  }
  .assignment-row .segmented {
    grid-column: 2 / -1;
  }
  .assignment-row .seat-count-field {
    grid-column: 3;
    grid-row: 1;
  }
  .team-roster-strip {
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .seat-progress,
  .seat-roster {
    grid-column: 1;
  }
  .seat-progress {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .seat-roster li {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
  .seat-roster li > span,
  .seat-roster small {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .round-guide-head {
    display: grid;
  }
  .change-summary {
    min-width: 0;
  }
  .round-checklist,
  .department-progress ol {
    grid-template-columns: 1fr;
  }
  .decision-form {
    padding-bottom: 20px;
  }
  .decision-review-card {
    width: 100%;
    flex-basis: auto;
  }
  .performance-report-summary {
    grid-template-columns: 18px minmax(100px, 1fr) 62px;
  }
  .performance-report-list .company-performance-report > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .performance-report-list
    .company-performance-report
    > summary
    > span:nth-of-type(2) {
    grid-column: 1 / -1;
  }
  .performance-report-summary > span:last-child {
    grid-column: 2 / -1;
    text-align: left;
  }
  .capstone-debrief-card {
    padding: 15px 14px;
  }
  .capstone-debrief-summary {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .capstone-debrief-summary > span {
    grid-column: 2;
    text-align: left;
  }
  .capstone-debrief-body .report-story {
    grid-template-columns: 1fr;
  }
  .capstone-debrief-body .report-story ul {
    margin-top: 8px;
  }
  .performance-section-head {
    display: block;
  }
  .performance-section-head p {
    margin-top: 4px;
    text-align: left;
  }
  .department-grid {
    grid-template-columns: 1fr;
  }
  .capital-market-strip,
  .capital-market-summary {
    grid-template-columns: 1fr 1fr;
  }
  .capital-market-strip > div,
  .capital-market-summary .metric {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .capital-market-strip > div:nth-child(odd),
  .capital-market-summary .metric:nth-child(odd) {
    border-left: 0;
  }
  .capital-market-strip > div:nth-child(-n + 2),
  .capital-market-summary .metric:nth-child(-n + 2) {
    border-top: 0;
  }
  .capital-market-driver-grid {
    grid-template-columns: 1fr;
  }
  .capital-driver-row {
    grid-template-columns: minmax(100px, 0.8fr) 1fr 26px;
  }
  .department-card > p {
    min-height: 0;
  }
  .ratio-grid {
    grid-template-columns: 1fr;
  }
  .ratio-grid > div,
  .ratio-grid > div:nth-child(5) {
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }
  .ratio-grid > div:nth-child(odd) {
    border-left: 0;
  }
  .ratio-grid > div:nth-child(-n + 2) {
    border-top: 0;
  }
  .accounting-check {
    display: grid;
  }
  .research-planner-head,
  .research-cost {
    align-items: flex-start;
    flex-direction: column;
  }
  .research-summary-grid {
    grid-template-columns: 1fr;
  }
  .research-summary-grid > div {
    border-top: 1px solid var(--line);
  }
  .research-summary-grid > div:nth-child(odd) {
    border-left: 0;
  }
  .research-summary-grid > div:nth-child(-n + 2) {
    border-top: 0;
  }
  .research-chart-grid {
    grid-template-columns: 1fr;
  }
  .research-chart.wide {
    grid-column: auto;
  }
  .quote-list {
    grid-template-columns: 1fr;
  }
  .signed-chart-row {
    grid-template-columns: minmax(92px, 0.8fr) minmax(70px, 1.2fr) 38px;
  }
  .signed-chart-row > small {
    display: none;
  }
  .winning-standard {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .effect-grid {
    grid-template-columns: 1fr;
  }
  .effect-grid > div:nth-child(3n) {
    border-right: 1px solid var(--line);
  }
  .effect-grid > div:nth-child(2n) {
    border-right: 0;
  }
  .effect-grid > div:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }
  .effect-grid > div:last-child {
    border-bottom: 0;
  }
  .training-steps {
    grid-template-columns: 1fr;
  }
  .training-step {
    padding: 10px 0;
  }
  .codes-callout {
    grid-template-columns: 1fr;
  }
  .map-stage {
    min-height: 260px;
    aspect-ratio: auto;
  }
  /* Full-bleed map on a phone (P104.94): the shell spans the viewport edge
     to edge and the toolbar with the zoom and layer controls stays pinned. */
  .map-shell {
    margin-inline: -10px;
    border-inline: 0;
    border-radius: 0;
  }
  /* The zoom and layer bar stays pinned below the sticky 60px topbar (56px
     under 420px) while the plate and the table scroll. */
  .map-tools {
    position: sticky;
    z-index: 5;
    top: 60px;
    padding-inline: 10px;
  }
  /* On a phone the paired selector is the primary map control. The plate
     remains available below it as a secondary, pinch-zoomable reference. */
  .map-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }
  .map-leader-table th,
  .map-leader-table td {
    padding: 6px 8px;
  }
  .map-toolbar .map-territory-selector {
    order: -1;
  }
  .map-toolbar .title-with-help,
  .map-toolbar > span {
    min-width: 0;
  }
  .map-toolbar .title-with-help {
    order: 0;
  }
  .map-toolbar > span {
    order: 1;
  }
  .map-overlay {
    grid-template-columns: 1fr;
  }
  .map-stat:not([data-map-stat="controlled"]) {
    display: none;
  }
  .map-inspector-head,
  .culture-profile,
  .territory-context {
    padding-right: 14px;
    padding-left: 14px;
  }
  .map-composition,
  .map-geometry-disclosure {
    padding-right: 14px;
    padding-left: 14px;
  }
  .map-summary {
    gap: 8px;
  }
  .culture-row {
    grid-template-columns: minmax(126px, 1fr) minmax(70px, 1fr) 28px;
    gap: 8px;
  }
  .territory-facts {
    grid-template-columns: 1fr 1fr;
  }
  .coaching-disclosure-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .coaching-toggle {
    width: 100%;
  }

  /* Wide evidence tables become labelled records on a phone. The table
     elements and scope attributes remain in the DOM for assistive technology;
     only their visual boxes change below the responsive threshold. */
  .participation-table-wrap,
  .comparison-table-scroll,
  .gradebook-scroll,
  .financial-table {
    overflow-x: visible;
    scrollbar-gutter: auto;
    mask-image: none;
  }

  .participation-table,
  .comparison-table,
  .gradebook-table {
    width: 100%;
    min-width: 0;
    border-top: 0;
  }

  .participation-table thead,
  .comparison-table thead,
  .gradebook-table thead,
  .financial-table .financial-head {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .participation-table tbody tr,
  .comparison-table tbody tr,
  .gradebook-table tbody tr {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
    gap: 4px 12px;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .participation-table tbody th,
  .participation-table tbody td,
  .comparison-table tbody th,
  .comparison-table tbody td,
  .gradebook-table tbody th,
  .gradebook-table tbody td {
    display: contents;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 7px 0;
    text-align: left;
    vertical-align: middle;
  }

  .participation-table tbody th::before,
  .participation-table tbody td::before,
  .comparison-table tbody th::before,
  .comparison-table tbody td::before,
  .gradebook-table tbody th::before,
  .gradebook-table tbody td::before {
    grid-column: 1;
    align-self: center;
    color: var(--muted);
    font-size: var(--step--1);
    font-weight: var(--weight-label);
    overflow-wrap: anywhere;
    content: attr(data-label);
  }

  .comparison-table tbody th > .comparison-company {
    display: flex;
    grid-column: 2;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .comparison-company {
    overflow-wrap: anywhere;
  }

  .financial-table .financial-row:not(.financial-head) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    min-width: 0;
    padding: 8px 0;
  }

  .financial-table .financial-row:not(.financial-head) > * {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    align-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 4px 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .financial-table .financial-row:not(.financial-head) > *::before {
    color: var(--muted);
    font-size: var(--step--1);
    font-weight: var(--weight-label);
    content: attr(data-label);
  }
}

/* Hosted course enrollment (M8). The hosted surface deliberately reuses the
   classroom type and color system while making role, play mode, and company
   selection persistent at every supported breakpoint. */
.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;
}

.hosted-entry-flow {
  display: grid;
  gap: 18px;
}

.hosted-entry-heading h3,
.hosted-entry-flow > h3,
.hosted-entry-flow > p,
.hosted-entry-heading p {
  margin-bottom: 0;
}

.hosted-entry-flow .field input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
}

.hosted-primary-action,
.hosted-wide-action {
  width: 100%;
  min-height: 48px;
}

.hosted-entry-separator {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.hosted-entry-separator::before {
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  content: "";
}

.hosted-entry-separator span {
  z-index: 1;
  padding: 0 12px;
  background: var(--paper);
}

.hosted-instructor-link {
  justify-self: center;
}

.notice.hosted-status {
  border-left-color: var(--teal);
  background: var(--teal-soft);
}

.hosted-confirmation-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--readout-line);
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--teal-soft) 78%, transparent),
      color-mix(in srgb, var(--paper) 96%, transparent)
    ),
    var(--paper);
  box-shadow: 0 12px 34px rgb(23 32 42 / 9%);
}

.hosted-confirmation-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 84px;
  height: 4px;
  background: var(--accent);
  content: "";
}

.hosted-course-monogram {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 9px;
  color: var(--on-fill);
  background: var(--ink);
  font-size: var(--step-0);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
}

.hosted-confirmation-copy h4 {
  margin: 0 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-2);
}

.hosted-confirmation-copy dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.hosted-confirmation-copy dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.4fr);
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid rgb(8 118 111 / 18%);
}

.hosted-confirmation-copy dt,
.hosted-confirmation-copy dd {
  margin: 0;
}

.hosted-confirmation-copy dt {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.hosted-confirmation-copy dd {
  color: var(--ink);
  font-weight: var(--weight-strong);
}

.privacy-note {
  padding-left: 12px;
  border-left: 2px solid var(--teal);
}

.hosted-auth-choices {
  display: grid;
  gap: 10px;
}

.google-auth-button,
.apple-auth-button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  font-size: var(--step-0);
  font-weight: var(--weight-strong);
}

.google-auth-button:hover:not(:disabled) {
  border-color: var(--ink);
  background: #f2f2f2;
}

.apple-auth-button {
  border-color: #000;
  color: #fff;
  background: #000;
}

.apple-auth-button:hover:not(:disabled) {
  border-color: #222;
  background: #222;
}

@font-face {
  font-family: "SD Google Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-500-latin.woff2") format("woff2");
}

.google-auth-button {
  border-color: #747775;
  color: #1f1f1f;
  background: #fff;
  font-family: "SD Google Sans", Arial, sans-serif;
  font-weight: 500;
}

.auth-provider-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
}

.auth-provider-icon img {
  display: block;
  object-fit: contain;
}

.unverified-email-banner {
  color: var(--amber-ink);
  background: var(--amber-soft);
}

.unverified-email-label {
  margin: -8px 0 0;
  line-height: 1.45;
}

.hosted-course-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hosted-course-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-2);
}

.hosted-course-list strong,
.hosted-course-list span {
  display: block;
}

.hosted-course-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--step--1);
}

.hosted-observer-callout {
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  background: var(--paper-2);
}

.hosted-fail-closed {
  justify-items: start;
  padding: 20px;
  border: 1px solid var(--danger-line);
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  background: var(--danger-soft);
}

.hosted-fail-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: var(--on-fill);
  background: var(--danger);
  font-size: var(--step-2);
  font-weight: 700;
}

.hosted-play-mode-fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.hosted-play-mode-fieldset legend {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  padding: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}

.hosted-play-mode-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--paper);
  cursor: pointer;
}

.hosted-play-mode-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.hosted-play-mode-option input {
  margin-top: 3px;
  accent-color: var(--accent);
}

.hosted-play-mode-option strong,
.hosted-play-mode-option small {
  display: block;
}

.hosted-grading-panel .gradebook-policy-form {
  margin-top: 0;
}

.hosted-play-mode-option small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.4;
}

.hosted-classroom-panel {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--amber-line);
  border-radius: 8px;
  background: var(--amber-soft);
}

.hosted-classroom-panel h4,
.hosted-classroom-panel p {
  margin: 0;
}

.hosted-course-code {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.hosted-course-code > span {
  color: var(--muted);
  font-size: var(--step-0);
}

.hosted-course-code code {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.hosted-course-code button {
  margin-left: auto;
}

.hosted-history-course-picker,
.hosted-history-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.hosted-history-course-picker h4,
.hosted-history-panel h4,
.hosted-history-panel p {
  margin: 0;
}

.hosted-owned-course-list,
.hosted-code-history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hosted-owned-course-list li,
.hosted-code-history-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.hosted-owned-course-list span,
.hosted-owned-course-list small,
.hosted-code-history-list span,
.hosted-code-history-list small {
  display: block;
}

.hosted-contract-status {
  display: grid;
  gap: 8px;
  margin: 0;
}

.hosted-contract-status > div {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr);
  gap: 12px;
}

.hosted-contract-status dd {
  margin: 0;
  font-weight: 700;
}

.hosted-course-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(
      circle at 90% 2%,
      color-mix(in srgb, var(--teal-soft) 75%, transparent),
      transparent 30rem
    ),
    var(--canvas);
}

.hosted-course-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  min-height: 72px;
  padding: 10px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.hosted-course-nav {
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-3);
}

.hosted-course-nav button {
  min-height: 44px;
  padding: 8px 13px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}

.hosted-course-nav button.active,
.hosted-course-nav button:hover {
  color: var(--ink);
  background: var(--paper);
}

.hosted-course-nav .hosted-team-nav-action {
  color: var(--on-fill);
  background: var(--teal);
}

.hosted-course-nav .hosted-team-nav-action:hover {
  color: var(--on-fill);
  background: var(--teal-ink);
}

.hosted-role-pill {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.hosted-role-pill.observer {
  color: var(--amber-ink);
  background: var(--amber-soft);
}

.hosted-role-pill.player {
  color: var(--teal-ink);
  background: var(--teal-soft);
}

.hosted-course-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 68px) 0 80px;
}

.hosted-course-schedule {
  margin: 22px 0;
}

.hosted-schedule-phase-tabs,
.hosted-schedule-controls,
.hosted-schedule-plan-list {
  display: grid;
  gap: 10px;
}

.hosted-schedule-phase-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 16px 0;
}

.hosted-schedule-phase-tabs button.active {
  color: var(--on-fill);
  background: var(--teal);
}

.hosted-schedule-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hosted-schedule-plan-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hosted-schedule-plan-list li {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.hosted-schedule-plan-list li.empty {
  border-style: dashed;
}

.hosted-schedule-round-select,
.hosted-schedule-plan-detail {
  display: grid;
  gap: 4px;
}

.hosted-schedule-round-select {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.hosted-schedule-plan-detail small {
  color: var(--muted);
}

@media (max-width: 720px) {
  .hosted-schedule-controls,
  .hosted-schedule-plan-list li {
    grid-template-columns: 1fr;
  }
}

.hosted-course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.7fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: end;
  margin-bottom: 24px;
}

.hosted-course-hero h1 {
  max-width: 14ch;
  margin-bottom: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-4);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.hosted-status-card {
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.hosted-status-card.player {
  border-left-color: var(--teal);
}

.hosted-status-card span,
.hosted-status-card strong {
  display: block;
}

.hosted-status-card span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.hosted-status-card strong {
  margin: 6px 0;
  font-size: var(--step-2);
}

.hosted-status-card p {
  margin: 0;
  font-size: var(--step--1);
}

.hosted-course-notice,
.unverified-email-banner {
  margin-bottom: 16px;
}

.unverified-email-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 12px 14px;
  border-left: 4px solid var(--amber);
}
.unverified-email-banner > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hosted-landing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hosted-landing-card {
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 4px 16px rgb(23 32 42 / 5%);
}

.hosted-landing-card.prominent {
  grid-row: span 2;
  border-top: 4px solid var(--teal);
}

.hosted-landing-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-3);
}

.hosted-mode-facts {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

.hosted-company-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
  margin-top: 18px;
}

.hosted-company-options button {
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper-2);
  font-weight: var(--weight-strong);
  text-align: left;
}

.company-descriptor {
  display: block;
  margin: 6px 0 0;
  font-size: var(--step-0);
  font-weight: var(--weight-normal, 400);
  line-height: 1.5;
}

.hosted-company-options button:hover,
.hosted-company-options button.selected {
  border-color: var(--teal);
  color: var(--teal-ink);
  background: var(--teal-soft);
}

.hosted-observer-callout strong,
.hosted-observer-callout span {
  display: block;
}

.hosted-observer-callout span {
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

@media (max-width: 960px) {
  .hosted-course-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hosted-course-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .hosted-role-pill {
    grid-column: 2;
    grid-row: 1;
  }

  .hosted-course-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .hosted-confirmation-card,
  .hosted-confirmation-copy dl > div,
  .hosted-play-mode-fieldset,
  .hosted-course-list li,
  .hosted-owned-course-list li,
  .hosted-code-history-list li,
  .hosted-contract-status > div,
  .hosted-landing-grid {
    grid-template-columns: 1fr;
  }

  .hosted-owned-course-list li,
  .hosted-code-history-list li {
    align-items: stretch;
    flex-direction: column;
  }

  .hosted-course-monogram {
    width: 44px;
    height: 44px;
  }

  .hosted-confirmation-copy dl > div {
    gap: 3px;
  }

  .hosted-confirmation-actions,
  .hosted-confirmation-actions button {
    width: 100%;
  }

  .hosted-course-topbar {
    gap: 10px;
    padding: 8px 10px;
  }

  .hosted-course-nav {
    margin: 0 -10px -8px;
    padding: 6px 10px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  .hosted-course-nav button {
    flex: 0 1 auto;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hosted-course-main {
    width: min(100% - 20px, 1180px);
    padding-top: 32px;
  }

  .hosted-course-hero h1 {
    font-size: var(--step-4);
  }

  .hosted-landing-card.prominent {
    grid-row: auto;
  }

  .hosted-company-options {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1400px) {
  .hosted-course-main {
    width: min(1320px, calc(100% - 80px));
  }

  .hosted-course-hero {
    min-height: 360px;
  }

  .hosted-course-hero h1 {
    font-size: var(--step-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hosted-course-shell *,
  .hosted-entry-flow * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Projector distance is a reading context, not an invitation to add density.
   Give the room more air while keeping the same single visual system. */
@media (min-width: 1400px) {
  .workspace {
    width: min(1320px, calc(100% - 64px));
    padding-top: 32px;
  }
  .band {
    padding: 32px 0;
  }
  .band-head {
    margin-bottom: 24px;
  }
  .panel-body {
    padding: 24px;
  }
  .decision-form.panel-body {
    padding-right: calc(24px + var(--sync-rail));
  }
  .map-stage {
    min-height: 360px;
  }
}

@media (min-width: 1100px) {
  .title-with-help,
  .field-label-row {
    position: relative;
  }
  .margin-note {
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(100% + 24px);
    width: max-content;
    max-width: 180px;
    align-items: flex-start;
  }
  .margin-note .definition-chip {
    min-height: 0;
    padding: 2px 0;
    font-size: var(--step--1);
    line-height: 1.35;
    white-space: normal;
  }
  .title-with-help .margin-note + .margin-note {
    top: 32px;
  }
  /* A .field is not a positioning context, so an absolute note inside one
     would be placed against the page instead of its control. */
  .map-toolbar .margin-note,
  .field > .margin-note {
    position: static;
    width: auto;
    max-width: none;
    align-items: center;
  }
  .coaching-disclosure {
    width: min(100%, 880px);
    margin-left: auto;
    padding-left: 24px;
    border-left: 2px solid var(--pedagogy);
  }
  .coaching-disclosure-body {
    padding-left: 0;
    border-left: 0;
  }
}
@media screen and (min-width: 1100px) {
  [data-results-tab="overview"] .results-dashboard { gap: 6px; }
  [data-results-tab="overview"] .results-standing { padding: 8px 12px; }
  [data-results-tab="overview"] .results-standing > p { margin-bottom: 4px; }
  [data-results-tab="overview"] .results-overview-score > span { display: inline; margin-left: 6px; }
  [data-results-tab="overview"] .results-standing > p[title] { display: inline; margin-left: 6px; }
  [data-results-tab="overview"] .results-perspective-tile { padding: 8px; }
  [data-results-tab="overview"] .results-headline-tile { padding: 8px; }
  [data-results-tab="overview"] .results-headline-tile > span:first-child { min-height: 32px; }
  [data-results-tab="overview"] .results-story-card { padding: 8px 12px; }
  [data-results-tab="overview"] .results-story-card :is(p,li) { margin: 4px 0; line-height: 1.3; }
}

@media (max-width: 420px) {
  .welcome-intro,
  .welcome-access {
    padding: 20px 16px;
    padding-inline: var(--pad-fluid-inline);
  }
  .workspace {
    width: min(100% - 12px, 1220px);
    padding-top: 8px;
  }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 56px;
    padding: 7px 8px;
  }
  .topbar-actions {
    min-width: 0;
  }
  .topbar-actions .secondary,
  .topbar-actions .tertiary {
    min-width: 44px;
    padding-inline: 10px;
  }
  .welcome-title {
    margin: 28px 0 18px;
  }
  .welcome-title h1 {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }
  .welcome-title p {
    font-size: var(--step-1);
  }
  .landing-choices {
    display: grid;
    grid-template-columns: 1fr;
  }
  .landing-choice {
    width: 100%;
  }
  .welcome-briefing-point {
    grid-template-columns: 1fr;
  }
  .welcome-access {
    min-height: auto;
  }
  .welcome-access .button-row,
  .welcome-access .field-grid,
  .welcome-access .action-grid {
    grid-template-columns: 1fr;
  }
  .welcome-access .button-row {
    align-items: stretch;
    flex-direction: column;
  }
  .welcome-access button,
  .welcome-access input,
  .welcome-access select {
    min-height: 44px;
  }
  .training-steps {
    gap: 8px;
    margin-top: 20px;
  }
  .panel-body,
  .band {
    padding-right: 14px;
    padding-left: 14px;
  }
  .decision-review-card {
    min-width: 0;
    padding: 12px;
  }
  .map-stage {
    min-height: 224px;
  }
  .map-toolbar {
    padding-inline: 12px;
  }
  .map-tools {
    top: 56px;
  }
  .map-key {
    grid-template-columns: 1fr;
  }
  .map-key-entry {
    min-height: 44px;
  }
  .financial-row,
  .market-analysis-company-row {
    min-width: 0;
  }
  .instructor-roster-actions {
    flex-direction: column;
  }
  .instructor-roster-actions > button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-tap: 0.01ms;
    --dur-state: 0.01ms;
    --dur-reveal: 0.01ms;
    --dur-route: 0.01ms;
    --stagger: 0ms;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .coaching-disclosure-body {
    animation: none;
    transform: none;
  }
  .gatefold-body {
    animation: none;
    transform: scaleY(1);
  }
  .surveying-loader-graticule,
  .surveying-loader-land {
    animation: none;
    opacity: 1;
  }
  .surveying-loader-territory {
    animation: none;
    opacity: 1;
  }
  .map-compass-needle {
    animation: none !important;
  }
  .coaching-toggle:active:not(:disabled) {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #4f5965;
    --line: #9ca5ad;
    --line-strong: #68747e;
  }

  /* N5/F1 (V1-glass review 3): the light boost above gives --line-strong
     4.79:1 once substituted for --glass-edge-outer, but the dark theme had
     no matching boost, so the same substitution measured only 2.22:1 on
     .secondary's glass surface -- below the 3:1 non-text floor. */
  :root[data-theme="dark"] {
    --line-strong: #8397a8;
  }

  :focus-visible {
    outline-width: 4px;
  }
  .primary,
  .secondary,
  .icon-button,
  .help-button,
  .tabs button,
  .department-progress button,
  .sort-button,
  .review-team-button,
  summary {
    border-width: 2px;
  }
  .tabs button[aria-selected="true"],
  .department-progress button.active,
  .comparison-table tbody tr.selected {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}

/* F1 (V1-glass review 4): the dark boost above only applies with
   data-theme="dark" pinned; theme.js leaves data-theme unset in automatic
   mode, so the OS-dark + Increase Contrast combination -- the actual
   default for most users who ask for more contrast -- fell through to the
   unboosted --line-strong (1.4:1 on .secondary's glass edge before ux-audit
   lane 5 raised the plain token to clear 3:1). */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line-strong: #8397a8;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
    box-shadow: 0 0 0 4px Canvas;
  }
  .map-marker-interactive:focus-visible {
    outline-color: Highlight;
    box-shadow: 0 0 0 4px Canvas;
  }
  .map-region:focus,
  .map-region:focus-visible {
    outline: none;
  }
  .map-selection-outline {
    stroke: Highlight;
  }
  .map-selection-halo {
    stroke: transparent;
  }
  .scroll-region,
  .comparison-table-scroll,
  .gradebook-scroll,
  .participation-table-wrap,
  .financial-table,
  .market-analysis-company-table {
    mask-image: none;
  }
  .primary,
  .secondary,
  .icon-button,
  .help-button,
  .tabs button,
  .department-progress button,
  .sort-button,
  .review-team-button,
  summary {
    border: 2px solid ButtonText;
  }
  .tabs button[aria-selected="true"],
  .department-progress button.active,
  .comparison-table tbody tr.selected {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
  .status-dot {
    border: 2px solid CanvasText;
    background: Canvas;
  }
  .round-checklist li.complete > span,
  .department-progress button > span {
    border: 2px solid Highlight;
    color: HighlightText;
    background: Highlight;
  }
  .draft-history,
  .revision-list li {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }
  .draft-history span,
  .revision-list span {
    color: CanvasText;
  }
  .financial-status,
  .status-label,
  .allocation-head .valid,
  .allocation-head .invalid {
    color: CanvasText;
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
  .map-shell,
  .map-inspector,
  .map-toolbar {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }
  .map-legend,
  .map-key-heading,
  .market-analysis-context {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }
  .registered-greeting {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }
  .map-key-swatch {
    border-color: CanvasText;
    background: Canvas;
  }
  .published-round-nav button {
    border-color: ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }
  .published-round-nav button.active {
    border-color: Highlight;
    color: HighlightText;
    background: Highlight;
  }
  .coaching-lens,
  .coaching-toggle,
  .coaching-disclosure {
    border-color: CanvasText;
    color: CanvasText;
  }
  .coaching-lens {
    background: Canvas;
  }
  .coaching-disclosure-body {
    border-color: Highlight;
  }
}

/* Phase 5 presentation primitives. Company colors are supplied by the
   protected profile projection; this stylesheet does not duplicate them. */
.company-mark {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  color: var(--company-accent, currentColor);
  fill: currentColor;
}
.operator-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  gap: 2px;
  padding: 5px 5px 4px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--operator-accent, var(--line-strong)),
      transparent 48%
    );
  border-bottom: 2px solid var(--operator-accent, var(--line-strong));
  border-radius: 10px;
  color: var(--operator-accent, var(--ink));
  background: color-mix(
    in srgb,
    var(--operator-accent, var(--paper)) 8%,
    var(--paper)
  );
}
.operator-card:not(.operator-card-instructor):not(.operator-card-no-name) {
  width: 60px;
  flex-basis: 60px;
}
.operator-card-mark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  color: currentColor;
}
.operator-card .company-profile-mark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border: 0;
  border-radius: 0;
  color: currentColor;
}
.operator-card .company-profile-mark path {
  fill: currentColor;
}
.operator-card-no-name .operator-card-mark {
  grid-column: 1 / -1;
  justify-self: center;
}
.operator-card-tombstoned {
  border-style: dashed;
  opacity: 0.82;
}
.operator-card-initials {
  align-self: end;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  line-height: 1;
  letter-spacing: 0.03em;
}
.operator-card-institution {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
}
.topbar-actions .operator-card {
  margin-right: 2px;
}
.revision-list .operator-card {
  align-self: start;
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  gap: 0;
  padding: 2px;
  border-radius: 4px;
  border-bottom-width: 1px;
}
.revision-list .operator-card-mark,
.revision-list .operator-card .company-profile-mark {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
}
.profile-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.profile-card-heading strong {
  min-width: 0;
}

/* The planted flag group carries an SVG transform attribute; a CSS
   transform (animated or static) would replace it and drop the flag onto
   the SVG origin, so every transform below targets the inner cloth only.
   The flag rests by default (P104.103); it waves on hover and at the final
   publish, and never under reduced motion. */
.hq-flag {
  pointer-events: auto;
  /* Highlighting a company fills its HQ territory in the flag's own color;
     the white cloth edge and this dark halo keep the flag readable on it. */
  filter: drop-shadow(0 0 1px #0c1822) drop-shadow(0 0 0.5px #0c1822);
}
.hq-flag-cloth {
  transform-box: fill-box;
  transform-origin: left center;
}
.hq-flag:hover .hq-flag-cloth,
.map-shell-final-publish .hq-flag-cloth {
  animation: hq-pennant-wave 2.4s ease-in-out 2;
}
.hq-flag:nth-of-type(even) .hq-flag-cloth {
  animation-delay: -1.7s;
}
.hq-flag-cloth-shape {
  fill: currentColor;
  stroke: #ffffff;
  stroke-width: 1;
}
.hq-flag-pole {
  stroke-width: 1.6;
}
.hq-flag-mark {
  pointer-events: none;
}
@keyframes hq-pennant-wave {
  0%,
  100% {
    transform: skewY(0deg) scaleX(1);
  }
  50% {
    transform: skewY(-1.5deg) scaleX(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-region,
  .map-marker,
  .map-highlight-company,
  .map-highlight-mode,
  .map-highlight-clear {
    transition: none;
  }
  .hq-flag:hover .hq-flag-cloth,
  .map-shell-final-publish .hq-flag-cloth {
    animation: none;
  }
}

@media (forced-colors: active) {
  .company-mark,
  .hq-flag {
    color: CanvasText;
    fill: CanvasText;
  }
  .operator-card {
    border-color: CanvasText;
    border-bottom-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }
  .operator-card-initials,
  .operator-card-institution {
    color: CanvasText;
  }
  .hq-flag-mark {
    fill: Canvas;
  }
  .map-region.contested,
  .map-region.unavailable,
  .map-region.led,
  .map-region.fragmented,
  .map-region.company-presence,
  .map-region {
    color: CanvasText;
    fill: Canvas;
    stroke: CanvasText;
  }
  .map-region.selected,
  .map-region:hover,
  .map-marker-interactive.selected,
  .map-marker-interactive:hover {
    fill: Highlight !important;
    stroke: Highlight !important;
  }
  .hq-flag-cloth-shape {
    fill: CanvasText;
    stroke: Canvas;
  }
  .map-marker,
  .map-marker.led,
  .map-marker.company-presence,
  .map-marker.unavailable {
    fill: CanvasText;
    stroke: Canvas;
  }
  .map-graticule,
  .map-label,
  .map-compass-cross,
  .map-compass-north {
    stroke: CanvasText;
    fill: CanvasText;
  }
  .map-ocean {
    fill: Canvas;
    stroke: CanvasText;
  }
  .map-land {
    fill: none;
    stroke: CanvasText;
  }
  .map-strait {
    fill: Canvas;
  }
  .map-coast {
    display: none;
  }
  .map-stat,
  .map-loading,
  .map-inspector,
  .map-composition,
  .map-geometry-disclosure,
  .culture-profile,
  .territory-context {
    color: CanvasText;
    background: Canvas;
  }
  .map-stat span,
  .map-key-heading span,
  .map-key-note,
  .map-key-status,
  .map-inspector-title span,
  .map-summary dt,
  .culture-label span,
  .culture-value,
  .territory-facts span,
  .share-company,
  .territory-share-row.unavailable > strong {
    color: CanvasText;
  }
  .map-stat,
  .map-key-heading,
  .map-key-swatch,
  .map-legend,
  .map-inspector,
  .map-profile-layout,
  .culture-track,
  .share-track,
  .territory-facts,
  .territory-facts > div {
    border-color: CanvasText;
    background: Canvas;
  }
  .map-key-copy strong,
  .map-inspector-title h2,
  .map-panel-head h3,
  .territory-context h3 {
    color: CanvasText;
  }
  .map-key-swatch,
  .culture-track i,
  .share-track i {
    background: CanvasText;
  }
  .company-logo,
  .company-mark,
  .share-company .company-logo,
  .map-legend .company-logo {
    color: CanvasText !important;
    fill: CanvasText !important;
    filter: none;
  }
  .map-contested-pattern,
  .map-contested-hatch-line {
    color: CanvasText;
    stroke: CanvasText;
  }
  .map-marker.unavailable {
    fill: Canvas;
    stroke: CanvasText;
  }
  .map-region.company-presence,
  .map-marker.company-presence {
    fill: Highlight;
    fill-opacity: 1;
    stroke: Highlight;
  }
  .map-highlight-company,
  .map-highlight-mode,
  .map-highlight-clear {
    border-color: ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }
  .map-highlight-company.active,
  .map-highlight-mode.active,
  .map-highlight-company:focus-visible,
  .map-highlight-mode:focus-visible,
  .map-highlight-clear:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .map-highlight-company-swatch,
  .map-gradient-step i {
    border-color: CanvasText;
    background: CanvasText;
  }
  .map-region.company-dimmed,
  .map-marker.company-dimmed,
  .hq-flag.company-dimmed {
    opacity: 1;
    stroke-dasharray: 4 2;
  }
  .map-key-entry.company-dimmed .map-key-swatch,
  .map-key-entry.company-dimmed .company-logo {
    opacity: 1;
  }
}

/* Phase 6 metric dashboard and debrief. */
.field-availability {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}
.field-availability-message {
  flex-basis: 100%;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.field-availability.availability-state-not_yet_published {
  min-width: 60px;
  padding: 3px 6px;
  border: 1px dashed var(--line-strong);
}
.field-availability.availability-state-role_filtered {
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: var(--canvas);
}
.field-availability.availability-state-role_filtered::before {
  content: "⌑";
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1;
}
.field-availability.availability-state-not_modeled {
  padding: 3px 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 90%, var(--line));
}
.report-sparkline {
  display: inline-flex;
  width: 60px;
  min-width: 60px;
  min-height: 16px;
  align-items: center;
  vertical-align: middle;
}
.report-sparkline-svg {
  display: block;
  width: 60px;
  height: 16px;
  overflow: visible;
  color: var(--pedagogy);
}
.sparkline-line {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sparkline-hairline {
  stroke: var(--line-strong);
  stroke-width: 0.75;
  stroke-dasharray: 1 1;
}
.sparkline-final-dot {
  fill: currentColor;
  stroke: var(--paper);
  stroke-width: 0.5;
}
.capstone-evidence-card {
  display: contents;
}
.market-analysis-metric-report {
  display: grid;
  gap: 18px;
}
.market-analysis-snapshot-meta {
  display: grid;
  gap: 5px;
  align-content: start;
  padding-left: 14px;
  border-left: 1px solid var(--readout-line);
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.market-analysis-metric-sections {
  display: grid;
  gap: 22px;
}
.market-analysis-metric-section {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.market-analysis-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.market-analysis-metric-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 142px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.market-analysis-metric-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}
.market-analysis-metric-heading h4 {
  margin: 0;
  font-family: inherit;
  font-size: var(--step--1);
  line-height: 1.3;
}
.market-analysis-metric-card .help-button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
}
.market-analysis-metric-value {
  display: block;
  min-height: 1.35em;
  font-size: var(--step-1);
  line-height: 1.3;
}
.market-analysis-metric-state {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.market-analysis-metric-limitation {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.availability-state-not_modeled,
.availability-state-not_yet_published,
.availability-state-role_filtered {
  background: color-mix(in srgb, var(--paper) 92%, var(--line));
}
.availability-state-not_modeled .market-analysis-metric-value,
.availability-state-not_yet_published .market-analysis-metric-value,
.availability-state-role_filtered .market-analysis-metric-value {
  color: var(--muted);
  font-size: var(--step--1);
}
.market-analysis-debrief {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.market-analysis-debrief-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.market-analysis-debrief-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.market-analysis-debrief-section h4 {
  margin: 0 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step--1);
}
.market-analysis-debrief-section p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.market-analysis-debrief-section ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: var(--step--1);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .market-analysis-snapshot-meta {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--readout-line);
    border-left: 0;
  }
  .market-analysis-debrief-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  .market-analysis-dashboard {
    color: #000;
    background: #fff;
  }
  .market-analysis-dashboard .published-round-nav,
  .market-analysis-dashboard .help-button,
  .market-analysis-dashboard .market-analysis-status,
  .market-analysis-dashboard .market-analysis-empty {
    display: none;
  }
  .market-analysis-dashboard .market-analysis-context,
  .market-analysis-dashboard .market-analysis-metric-card,
  .market-analysis-dashboard .market-analysis-debrief-section {
    border-color: #000;
    background: #fff;
  }
  .market-analysis-dashboard .market-analysis-context {
    grid-template-columns: 1fr 220px;
  }
  .market-analysis-dashboard .market-analysis-metric-card,
  .market-analysis-dashboard .market-analysis-debrief-section {
    break-inside: avoid;
  }
  .market-analysis-dashboard .market-analysis-metric-heading,
  .market-analysis-dashboard .market-analysis-debrief-section h4 {
    break-after: avoid;
  }
  .market-analysis-dashboard .market-analysis-metric-limitation,
  .market-analysis-dashboard .market-analysis-snapshot-meta,
  .market-analysis-dashboard .market-analysis-metric-state {
    color: #000;
  }
  .market-analysis-dashboard .report-sparkline-svg {
    color: #000;
  }
  .market-analysis-dashboard .sparkline-line,
  .market-analysis-dashboard .sparkline-hairline {
    stroke: #000;
    stroke-dasharray: none;
  }
  .market-analysis-dashboard .market-analysis-provenance {
    border-top: 1px solid #000;
    padding-top: 8px;
  }
}

/* Results structure: a compact edition bar, readable report column and index. */
.report-bar {
  position: sticky;
  z-index: 30;
  /* Set inline per render (reportBar.js) to the workspace topbar's own
     measured height — the topbar is also `position: sticky; top: 0`, and
     without this the two would land on the same stuck coordinate (M3). */
  top: calc(var(--report-bar-top, 0px) + var(--companion-dock-height, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  padding: 0.45rem max(1rem, calc((100vw - 74rem) / 2));
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
}
.report-bar-primary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.35rem;
}
.report-round-switcher {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  /* Lets this row shrink below its buttons' combined width inside the
     no-wrap .report-bar-primary row, so it scrolls internally instead of
     the buttons being squeezed (and their labels wrapped/clipped, N4). */
  min-width: 0;
}
.report-edition-segment,
.report-step,
.report-print {
  min-height: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.4rem;
  padding: 0.3rem 0.55rem;
  color: var(--ink);
  background: var(--paper);
  flex: none;
  white-space: nowrap;
}
.report-bar-name {
  white-space: nowrap;
}
.report-edition-segment[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
}
.report-edition-select,
.report-index-disclosure {
  display: none;
}
.report-bar-status {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}
/* Anchored to .report-bar (itself `position: sticky`, so it is the
   containing block for an absolutely positioned descendant) rather than
   `position: fixed` against the raw viewport: a fixed top offset cannot
   track the bar's real height, which varies by role and width (M3 —
   the instructor bar wraps taller and the index used to paint over the
   workspace topbar). `top`/`left` sit flush with the bar's own rendered
   bottom and right edges (report-bar spans exactly the reading column,
   since .results-report-layout's padding-right reserves this rail), so
   the rail tracks the column instead of a viewport-width formula that can
   drift out of sync with it. */
.report-section-index {
  position: absolute;
  top: 100%;
  left: 100%;
  margin-left: 2rem;
  z-index: 10;
  display: grid;
  gap: 0.35rem;
  width: 12rem;
  max-height: calc(100vh - 10rem);
  overflow: auto;
  font-size: var(--step-0);
}
.report-section-index a {
  color: var(--ink);
  text-decoration: none;
}
.report-section-index a[aria-current="true"] {
  font-weight: 700;
}
.report-index-marker {
  color: var(--muted);
}
.results-report-layout {
  box-sizing: border-box;
  width: min(100% - 2rem, 70rem);
  margin: 1.25rem auto 5rem;
  padding-right: 14rem;
  scroll-margin-top: 5rem;
}
.report-section {
  margin: 0 0 2rem;
  scroll-margin-top: 6rem;
}
.report-section-disclosure > summary {
  cursor: pointer;
  color: var(--muted);
}
.report-section-content {
  padding-top: 0.65rem;
}
.report-section-disclosure[open] > summary {
  margin-bottom: 0.25rem;
}
.results-report-layout .round-report-controls,
.results-report-layout .round-report-section-nav {
  display: none;
}
.report-section-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.8rem;
}
.report-section-heading h2 {
  margin: 0;
  font-size: clamp(var(--step-2), 2vw, var(--step-3));
  /* The section index scrolls this element (by id) directly into view;
     scroll-margin only applies to the scrolled-to element itself, not an
     ancestor, so it has to live here rather than on .report-section, or the
     sticky report bar covers the heading it just navigated to. 8rem clears
     the bar's tallest measured state (two status lines plus the edition
     switcher row, ~104px at 1440). */
  scroll-margin-top: 8rem;
}
.report-section-disclosure > summary.report-section-heading {
  color: inherit;
  list-style: none;
}
.report-section-disclosure
  > summary.report-section-heading::-webkit-details-marker {
  display: none;
}
.report-section-disclosure > summary.report-section-heading::after {
  content: "";
  margin-left: auto;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}
.report-section-disclosure[open] > summary.report-section-heading::after {
  transform: rotate(45deg);
}
.report-table-reveal {
  min-height: 44px;
  margin: 0.6rem 0;
}
.report-verdict {
  font-size: var(--step-2);
}
.report-verdict-sentence {
  font-family: var(--font-serif, serif);
  font-weight: 600;
}
.report-verdict-score {
  margin: 0 0 0.35rem;
  font-size: var(--step-3);
  font-weight: 700;
}
.report-drivers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0.75rem;
}
.report-driver {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
}
.report-driver-label {
  color: var(--muted);
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.report-driver-fact {
  margin: 0;
}
.report-scorecard {
  display: grid;
  gap: 0.75rem;
}
.report-scorecard-table {
  width: 100%;
}
.report-what-moved {
  display: grid;
  gap: 0.5rem;
}
.report-what-moved-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
}
.report-move-up::before {
  content: "▲ ";
  color: var(--teal);
}
.report-move-down::before {
  content: "▼ ";
  color: var(--danger);
}
.report-move-flat::before {
  content: "— ";
  color: var(--muted);
}

@media (max-width: 1099px) {
  .results-report-layout {
    padding-right: 0;
  }
  .report-section-index {
    display: none;
  }
  .report-index-disclosure {
    display: block;
  }
  .report-index-disclosure .report-section-index {
    position: static;
    display: grid;
    width: auto;
    margin-left: 0;
    max-height: none;
  }
}
@media (max-width: 599px) {
  .report-bar {
    padding: 0.25rem 0.4rem;
  }
  .report-bar-primary {
    min-height: 2.8rem;
    gap: 0.2rem;
  }
  .report-round-switcher {
    display: none;
  }
  .report-edition-select {
    display: block;
    width: min(7rem, 30vw);
  }
  .report-step {
    min-width: 2rem;
    padding: 0.2rem;
  }
  .report-bar-name {
    display: none;
  }
  .report-scorecard:has(> .report-scorecard-table) {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: auto;
  }
  .report-index-disclosure {
    margin-left: auto;
  }
  .results-report-layout {
    width: calc(100% - 1rem);
    margin-top: 0.75rem;
  }
  .report-what-moved-row {
    grid-template-columns: 1fr;
  }
  .round-report-territories .round-report-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .round-report-territories .round-report-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
  }
  .round-report-territories .round-report-table tbody td,
  .round-report-territories .round-report-table tbody th {
    display: grid;
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .round-report-territories .round-report-table tbody td::before {
    color: var(--muted);
    content: attr(data-label);
  }
}
@media print {
  .report-bar {
    position: static;
    border: 0;
  }
  .report-section-index,
  .report-index-disclosure,
  .report-print,
  .report-step,
  .report-round-switcher,
  .report-edition-select {
    display: none !important;
  }
  .results-report-layout {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .report-section,
  .report-section details {
    break-inside: auto;
  }
  .report-section details:not([open]) > *:not(summary) {
    display: block !important;
  }
  .round-report-territories tr[hidden] {
    display: table-row !important;
  }
  .report-table-reveal {
    display: none;
  }
  /* Each section starts its own page, with its heading pinned to the top:
     the printed equivalent of a repeated per-page header (§8). */
  .report-section {
    break-before: page;
    page-break-before: always;
  }
  .report-section:first-of-type {
    break-before: auto;
    page-break-before: auto;
  }
  .report-section-heading {
    break-after: avoid;
    page-break-after: avoid;
  }
}

/* Published results: the Wire, D13 scorecard, and alliance record share the
   same paper-and-ink language as the decision workspace. */
.results-reveal {
  display: grid;
  gap: var(--space-4);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--accent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent-soft) 72%, transparent),
      color-mix(in srgb, var(--paper) 94%, transparent)
    ),
    var(--paper);
  box-shadow: var(--shadow);
}
.results-reveal .dateline {
  margin-bottom: 0;
}
.results-reveal-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
}
.results-reveal-kicker {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.results-reveal h1,
.results-reveal h2 {
  margin: var(--space-1) 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--step-2), 3vw, var(--step-4));
  line-height: 1.05;
}
.results-reveal-headline {
  max-width: 34ch;
}
.results-reveal-deck {
  max-width: 62ch;
  margin: var(--space-2) 0 0;
  color: var(--ink-report);
  line-height: 1.5;
}
.results-reveal-score {
  min-width: 9rem;
  padding: var(--space-3);
  border-left: 2px solid var(--accent);
  background: var(--paper);
  text-align: right;
}
.results-reveal-score span,
.results-reveal-score strong {
  display: block;
}
.results-reveal-score span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.results-reveal-score strong {
  margin-top: var(--space-1);
  font-size: var(--step-3);
  font-variant-numeric: tabular-nums;
}
.results-reveal-prompt {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}
.results-change-summary {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  background: var(--teal-soft);
}
.results-change-summary h2,
.results-change-summary h3,
.results-change-summary p {
  margin: 0;
}
.results-change-summary h2,
.results-change-summary h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-1);
}
.results-change-summary ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.2rem;
  color: var(--teal-ink);
  line-height: 1.45;
}
.results-evidence-disclosure {
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.results-evidence-disclosure > summary {
  padding: var(--space-4);
  color: var(--ink);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-1);
  font-weight: var(--weight-strong);
}
.results-evidence-disclosure > summary::marker {
  color: var(--accent);
}
.results-evidence-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--line);
}

.creator-wire {
  display: grid;
  gap: var(--space-4);
  max-width: 74ch;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.creator-wire-masthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 3px double var(--ink);
}
.creator-wire-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--ink);
  color: var(--paper);
  background: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-1);
  font-weight: var(--weight-strong);
}
.creator-wire-masthead h2,
.creator-wire-masthead p {
  margin: 0;
}
.creator-wire-masthead h2 {
  margin-top: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-3);
  line-height: 1;
}
.creator-wire-masthead p {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--step--1);
}
.creator-wire-edition {
  align-self: start;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  text-align: right;
}
.creator-wire .dateline {
  margin-bottom: 0;
}
.creator-wire-public,
.creator-wire-subscriptions {
  display: grid;
  gap: var(--space-3);
}
.creator-wire-public > h3,
.creator-wire-subscriptions > h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-2);
}
.creator-wire-items {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.creator-wire-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.creator-wire-item:first-child {
  padding-top: var(--space-3);
}
.creator-wire-item h3,
.creator-wire-item p {
  margin: 0;
}
.creator-wire-item h3 {
  max-width: 38ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-2);
  line-height: 1.15;
  text-wrap: balance;
}
.creator-wire-item:first-child h3 {
  font-size: var(--step-3);
}
.creator-wire-item > p:not(.creator-wire-byline) {
  max-width: 66ch;
  color: var(--ink-report);
  line-height: 1.5;
}
.creator-wire-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
  color: var(--muted);
  font-size: var(--step--1);
}
.creator-wire-byline-label {
  color: var(--ink);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.creator-wire-byline-name {
  color: var(--ink);
  font-weight: var(--weight-strong);
}
.creator-wire-byline-role {
  color: var(--muted);
}
/* Photos sit in the initials chip's ring (r=60 of 128); files are pre-cropped face-centred squares. */
.creator-portrait,
.creator-avatar {
  box-sizing: border-box;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
  outline: 1px solid currentColor;
}
.creator-portrait {
  width: 128px;
  height: 128px;
  padding: 4px;
  outline-offset: -4px;
}
.creator-avatar {
  width: 1.75em;
  height: 1.75em;
  margin-inline-end: 0.4em;
  padding: 1px;
  outline-offset: -1px;
  vertical-align: middle;
}
.creator-partnership-portrait {
  width: 48px;
  height: 48px;
  padding: 2px;
  outline-offset: -2px;
}
.creator-wire-analyst-brief {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--amber-line);
  border-left: 4px solid var(--amber);
  background: var(--amber-soft);
}
.creator-wire-tier {
  display: grid;
  gap: var(--space-1);
}
.creator-wire-tier h3,
.creator-wire-tier-label {
  margin: 0;
}
.creator-wire-tier h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-2);
}
.creator-wire-tier-label {
  color: var(--amber);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.creator-wire-locked {
  margin: 0;
  border-color: var(--amber-line);
  color: var(--amber);
  background: var(--amber-soft);
}

.student-metrics-scorecard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.student-metrics-scorecard > .band-head {
  margin-bottom: 0;
}
.student-metrics-scorecard > .band-head h3 {
  color: var(--ink);
}
.student-metrics-scorecard > div > label,
.student-metrics-scorecard > label {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.student-metrics-scorecard select {
  max-width: 24rem;
  margin-top: var(--space-1);
}
.student-metrics-area {
  display: grid;
  gap: var(--space-3);
}
.student-metrics-dashboard,
.student-metrics-dashboard-area {
  display: grid;
  gap: var(--space-3);
}
.student-metrics-dashboard {
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--ink);
}
.student-metrics-dashboard h3,
.student-metrics-dashboard h4 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
}
.student-metrics-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}
.student-metrics-area h3,
.student-metrics-rivals h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-2);
}
.student-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  align-items: start;
  gap: var(--space-3);
}
.student-metrics-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  background: var(--paper);
}
.student-metrics-cell[data-metric-status="not_available"] {
  border-top-color: var(--line-strong);
  background: var(--canvas);
}
.student-metrics-cell-head {
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: start;
}
.student-metrics-label {
  min-width: 0;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  line-height: 1.3;
}
.student-metrics-value {
  overflow-wrap: anywhere;
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.student-metrics-change,
.student-metrics-rank {
  color: var(--teal);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.student-metrics-rank {
  color: var(--ink);
  font-weight: var(--weight-strong);
}

/* P104.1220: hybrid metric families and perspective view share one card grammar. */
.metric-scorecard-body {
  container-type: inline-size;
  container-name: metric-scorecard;
  color: var(--ink);
  min-width: 0;
}
.metric-scorecard-controls,
.metric-scorecard-controls > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.metric-scorecard-controls {
  justify-content: space-between;
  margin: 24px 0;
}
.metric-scorecard-controls button {
  min-height: 44px;
  font-size: 14px;
}
.metric-scorecard-controls button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.metric-scorecard-group {
  gap: 0;
  min-width: 0;
  scroll-margin-top: 96px;
}
.metric-scorecard-group + .metric-scorecard-group {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.metric-scorecard-group > h3,
.metric-scorecard-group > h4,
.metric-perspective-panel h3,
.metric-standing-strip h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
}
.metric-group-purpose {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}
.metric-perspective-body .metric-scorecard-group > h4 {
  font-family: inherit;
  font-size: 15px;
}
.metric-standing-value small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
.metric-group-benchmark {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.metric-scorecard-group .student-metrics-grid {
  margin-top: 16px;
}
.metric-scorecard-body .student-metrics-cell {
  position: relative;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.metric-scorecard-body .student-metrics-cell-head {
  min-height: 24px;
  padding-right: 36px;
  align-items: center;
}
.metric-scorecard-body .student-metrics-label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.metric-card-value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.metric-scorecard-body .student-metrics-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}
.metric-card-direction-glyph {
  display: none;
}
.metric-scorecard-body .metric-card-word-value {
  font-size: 18px;
}
.metric-card-scale,
.metric-card-direction,
.metric-card-footer {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.metric-card-subline {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.metric-scorecard-body .student-metrics-change {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.metric-scorecard-body .student-metrics-rank {
  justify-self: start;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.metric-card-footer {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.metric-scorecard-body .student-metrics-definition {
  border: 0;
  font-size: 14px;
}
.metric-scorecard-body .student-metrics-definition:not([open]) {
  height: 0;
}
.metric-scorecard-body .metric-card-help {
  position: absolute;
  top: 6px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  list-style: none;
}
.metric-card-help::-webkit-details-marker {
  display: none;
}
.metric-card-help > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
}
.metric-card-help:focus-visible,
.metric-group-more > summary:focus-visible,
.metric-perspective-panel > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.metric-card-help-panel {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.metric-card-help-panel dt {
  color: var(--ink);
  font-weight: 600;
}
.metric-card-help-panel dd {
  margin: 0 0 8px;
}
.metric-group-more {
  margin-top: 12px;
  min-width: 0;
}
.metric-group-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.metric-group-more > summary::before {
  content: "+";
  margin-right: 8px;
}
.metric-group-more[open] > summary::before {
  content: "−";
}
.metric-group-more > summary::-webkit-details-marker {
  display: none;
}
.metric-group-detail {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: var(--paper-2);
  font-size: 14px;
  line-height: 1.5;
}

/* Keep statement meanings readable inside the existing horizontal scroller. */
.metric-statement-table th:last-child,
.metric-statement-table td:last-child {
  min-width: 16ch;
}

.metric-group-detail h4 {
  margin-top: 0;
  color: var(--ink);
}
.metric-standing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: start;
  margin-top: 16px;
}
.metric-standing-tile {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow-wrap: anywhere;
}
.metric-standing-tile[data-metric-id] > .metric-standing-label {
  padding-right: 28px;
}
.metric-standing-label,
.metric-standing-basis {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.metric-standing-label {
  font-weight: 600;
}
.metric-standing-value {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.metric-perspective-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.metric-perspective-panel[data-perspective="S"] {
  border-style: dashed;
  background: transparent;
}
.metric-perspective-panel > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: 72px;
  padding: 16px 24px;
  cursor: pointer;
}
.metric-perspective-score {
  color: var(--ink);
  font-size: 28px;
  font-weight: 700;
}
.metric-perspective-change {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.metric-perspective-score small,
.metric-perspective-hint {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
.metric-perspective-body {
  padding: 24px;
  border-top: 1px solid var(--line);
}
.metric-scorecard-body[data-density="compact"] .student-metrics-grid {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 8px;
}
.metric-scorecard-body[data-density="compact"] .student-metrics-cell {
  padding: 12px;
  gap: 6px;
}
.metric-scorecard-body[data-density="compact"] .student-metrics-value {
  font-size: 22px;
}
.metric-scorecard-body[data-density="compact"] .metric-card-direction-glyph {
  display: inline;
  font-size: 14px;
  color: var(--muted);
}
.metric-scorecard-body[data-density="compact"] .metric-card-direction {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.metric-scorecard-body[data-density="compact"] .metric-card-subline {
  display: none;
}
@container metric-scorecard (max-width: 720px) {
  .student-metrics-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .metric-scorecard-body[data-density="compact"] .student-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric-standing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric-perspective-body,
  .metric-perspective-panel > summary {
    padding: 16px;
  }
}

.pro-forma {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--line);
  background: var(--canvas);
}
.pro-forma-estimate-label,
.pro-forma-assumption,
.pro-forma-values {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.35;
}
.pro-forma-estimate-label {
  font-weight: var(--weight-strong);
}
.pro-forma-assumption {
  color: var(--muted);
}
.pro-forma-bar {
  position: relative;
  height: 1rem;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(
    135deg,
    var(--paper),
    var(--paper) 3px,
    var(--line) 3px,
    var(--line) 4px
  );
}
.pro-forma-segment {
  position: absolute;
  top: 0;
  bottom: 0;
}
.pro-forma-segment--current {
  left: 0;
  width: var(--pro-forma-current);
  background: var(--teal);
}
.pro-forma-segment--gain {
  left: var(--pro-forma-current);
  width: var(--pro-forma-change);
  border-left: 2px solid var(--ink);
  background: color-mix(in srgb, var(--teal) 38%, var(--paper));
}
.pro-forma-segment--decrease {
  right: 0;
  width: var(--pro-forma-change);
  border-left: 2px dashed var(--ink);
  background: color-mix(in srgb, var(--teal) 25%, var(--paper));
}
.pro-forma--rivals-repeat .pro-forma-segment {
  opacity: 0.68;
}
.pro-forma-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-variant-numeric: tabular-nums;
}
.pro-forma-values strong {
  color: var(--ink);
}
.student-metrics-definition {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.student-metrics-definition summary {
  padding-top: var(--space-2);
  color: var(--ink);
  cursor: pointer;
  font-weight: var(--weight-strong);
}
.student-metrics-definition p {
  margin: var(--space-1) 0 0;
}
.student-metrics-operands,
.student-metrics-missing {
  overflow-wrap: anywhere;
}
.student-metrics-rivals {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.student-metrics-rivals .table-scroll,
.territory-leadership .table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.student-metrics-rivals table,
.territory-leadership-table {
  width: 100%;
  border-collapse: collapse;
}
.student-metrics-rivals th,
.student-metrics-rivals td,
.territory-leadership-table th,
.territory-leadership-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.student-metrics-rivals thead,
.territory-leadership-table thead {
  color: var(--paper);
  background: var(--ink);
}
.student-metrics-rivals tbody tr:nth-child(even),
.territory-leadership-table tbody tr:nth-child(even) {
  background: var(--paper-2);
}
.h25-cards {
  display: grid;
  gap: var(--space-4);
}
.h25-cards > h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-2);
}
.h25-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}
.report-card {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  background: var(--paper);
}
.report-card h3,
.report-card p {
  margin: 0;
}
.report-card h3 {
  font-size: var(--step-1);
}
.report-card__secondary {
  color: var(--muted);
  font-size: var(--step--1);
}
.report-card a {
  color: var(--teal-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.territory-leadership {
  display: grid;
  gap: var(--space-4);
}
.territory-leadership > .band-head {
  margin-bottom: 0;
}
.territory-leadership-table .numeric-cell,
.territory-leadership-table td:first-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.alliance-report {
  display: grid;
  gap: var(--space-4);
}
.alliance-report > .band-head {
  margin-bottom: 0;
}
.alliance-agreements-view {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  border-left: 3px solid var(--teal);
}
.alliance-agreements-view h2,
.alliance-agreements-intro {
  margin: 0;
}
.alliance-agreements-intro {
  max-width: 70ch;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.alliance-agreements-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.alliance-agreements-list li {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  line-height: 1.45;
}
.alliance-commitments {
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--teal);
  background: var(--canvas);
}
.alliance-commitment-choices {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  background: var(--paper);
}
.alliance-commitment-choices legend {
  padding: 0 var(--space-1);
  color: var(--ink);
  font-weight: var(--weight-strong);
}
.alliance-commitment-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  align-items: start;
  padding: var(--space-2);
  border-top: 1px solid var(--line);
}
.alliance-commitment-choice input {
  margin-top: 3px;
}
.alliance-commitment-choice span {
  font-weight: var(--weight-strong);
}
.alliance-commitment-choice small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.4;
}

/* Strategic Dominance V2 evidence: canonical values, table-first accessibility. */
.v2-metric-grid,
.v2-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.v2-metric,
.v2-chart-card {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.85rem;
  background: var(--paper);
}

.v2-metric span,
.v2-metric small {
  display: block;
}

.v2-metric strong {
  overflow-wrap: anywhere;
  display: block;
  margin-block: 0.25rem;
  font-size: var(--step-2);
}

.v2-data-table,
.v2-value-curve-table {
  width: 100%;
  border-collapse: collapse;
}

.v2-share-table {
  display: grid;
  gap: 0.5rem;
}

.v2-share-table > h3,
.v2-share-table > p {
  margin: 0;
}

.v2-share-table > p,
.v2-participant-role {
  color: var(--muted);
}

.v2-data-table caption {
  padding-block: 0.35rem 0.65rem;
  color: var(--muted);
  text-align: left;
}

.v2-data-table thead {
  background: var(--ink);
  color: var(--paper);
}

.v2-data-table tbody tr:nth-child(even) {
  background: var(--paper-2);
}

.v2-data-table tbody tr:hover {
  background: var(--accent-soft);
}

.v2-participant-name {
  min-width: 12rem;
}

.v2-participant-role {
  min-width: 11rem;
}

.v2-numeric-cell {
  min-width: 7.25rem;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

.v2-evidence-view .table-scroll,
.v2-analytics .table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.v2-chart-card {
  min-width: 0;
}

.v2-data-table th,
.v2-data-table td,
.v2-value-curve-table th,
.v2-value-curve-table td {
  padding: 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.v2-ksf {
  border-top: 0.25rem double currentColor;
  font-weight: 800;
}

.v2-strategic-map {
  width: 100%;
  min-height: 22rem;
  border: 1px solid var(--line);
  background: var(--canvas);
}

.v2-map-leader {
  stroke: var(--ink);
  stroke-width: 1;
}

.v2-map-label-background {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1;
}

.v2-bubble-label {
  fill: var(--ink);
  font-family: monospace;
  font-size: 16px;
}

.v2-strategic-map g[data-key-focused="true"] circle,
.v2-map-annotation[data-key-focused="true"] .v2-map-leader {
  stroke: var(--accent);
  stroke-width: 5;
}

.v2-map-annotation[data-key-focused="true"] .v2-map-label-background {
  stroke: var(--accent);
  stroke-width: 3;
}

.v2-chart-key {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

.v2-chart-labels {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.v2-chart-labels li {
  display: grid;
  grid-template-columns: 1.5rem minmax(8rem, 0.7fr) minmax(0, 1fr);
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.45rem 0.55rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.35;
}

.v2-chart-labels li strong {
  color: var(--ink);
}

.v2-chart-labels[data-annotation-rail="true"] {
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid var(--line);
}

.v2-chart-labels li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.v2-chart-label-marker {
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--paper);
  background: var(--ink);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  line-height: 1;
}

.v2-bubble {
  fill: var(--accent-soft);
  stroke: var(--ink);
  stroke-width: 2;
}

.v2-bubble-other_fringe {
  stroke-dasharray: 6 4;
}

.v2-strategic-map g:focus circle {
  stroke: var(--accent);
  stroke-width: 5;
}

.v2-payout-control {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) auto;
  gap: 0.75rem;
  align-items: center;
}

/* Spans any grid it is ever placed in and never overflows its box: the
   control's own three columns need more than one quarter of the decision
   form, which is how it came to be drawn over the allocation inputs
   (ISS-004). */
.creator-payout-control {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0 0 14px;
}

.v2-override-toggle {
  grid-column: 1 / -1;
}

[data-projector-mode="true"] .v2-evidence-view,
[data-projector-mode="true"] .v2-analytics {
  font-size: var(--step-2);
  max-width: none;
}

[data-projector-mode="true"] .workspace {
  max-width: none;
  padding-inline: clamp(2rem, 4vw, 6rem);
}

[data-projector-mode="true"] .topbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

[data-projector-mode="true"] .round-chip,
[data-projector-mode="true"] .topbar-status,
[data-projector-mode="true"] .topbar-controls > :not(.projector-toggle) {
  display: none;
}

[data-projector-mode="true"] .v2-metric-grid,
[data-projector-mode="true"] .v2-scorecard-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

[data-projector-mode="true"] .v2-analytics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

[data-projector-mode="true"] .v2-strategic-map {
  min-height: 24rem;
}

@media (max-width: 1100px) {
  [data-projector-mode="true"] .v2-metric-grid,
  [data-projector-mode="true"] .v2-scorecard-grid,
  [data-projector-mode="true"] .v2-analytics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .results-reveal-heading,
  .creator-wire-masthead {
    grid-template-columns: 1fr;
  }

  .results-reveal-score {
    border-top: 2px solid var(--accent);
    border-left: 0;
    text-align: left;
  }

  .creator-wire-edition {
    justify-self: start;
    text-align: left;
  }

  .v2-payout-control {
    grid-template-columns: 1fr;
  }

  .v2-override-toggle {
    grid-column: auto;
  }

  .v2-strategic-map {
    min-height: 16rem;
  }

  .v2-chart-labels li {
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }

  .v2-chart-labels li > span:last-child {
    grid-column: 2;
  }
}

@media (forced-colors: active) {
  .results-reveal,
  .creator-wire,
  .student-metrics-cell,
  .alliance-agreements-view,
  .alliance-commitment-choices,
  .results-evidence-disclosure {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .results-reveal-kicker,
  .creator-wire-byline-label,
  .creator-wire-byline-name,
  .creator-wire-tier-label,
  .student-metrics-definition summary {
    color: CanvasText;
  }

  .creator-wire-mark,
  .creator-wire-analyst-brief,
  .results-change-summary,
  .pro-forma,
  .pro-forma-bar {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }

  .pro-forma-segment {
    border-color: CanvasText;
    background: CanvasText;
  }

  .v2-bubble {
    fill: Canvas;
    stroke: CanvasText;
  }

  .v2-chart-label-marker {
    border-color: CanvasText;
    color: Canvas;
    background: CanvasText;
  }

  .v2-chart-labels li strong,
  .v2-chart-key {
    color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-evidence-view *,
  .v2-analytics * {
    scroll-behavior: auto;
    transition: none;
  }
}

@media (forced-colors: active) {
  .market-analysis-metric-card,
  .market-analysis-debrief-section {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }
  .market-analysis-snapshot-meta {
    border-color: CanvasText;
    color: CanvasText;
  }
  .availability-state-not_modeled,
  .availability-state-not_yet_published,
  .availability-state-role_filtered {
    background: Canvas;
  }
  .field-availability.availability-state-not_yet_published,
  .field-availability.availability-state-role_filtered {
    border-color: CanvasText;
  }
  .report-sparkline-svg {
    color: CanvasText;
  }
  .sparkline-line,
  .sparkline-hairline {
    stroke: CanvasText;
  }
  .sparkline-final-dot {
    fill: CanvasText;
    stroke: Canvas;
  }
  .market-analysis-metric-limitation,
  .market-analysis-metric-state,
  .market-analysis-debrief-section p {
    color: CanvasText;
  }
}

/* The debrief is a document as well as a screen. Keep the paper ground,
   preserve metric definitions with their figures, and remove navigation chrome
   without hiding provenance or text equivalents. */
@media print {
  :root {
    color-scheme: light;
  }
  html,
  body,
  .app-shell,
  .workspace {
    color: #000;
    background: #fff;
  }
  .topbar,
  .tabs,
  .help-button,
  .shortcut-sheet,
  .published-round-nav,
  .market-analysis-status,
  .market-analysis-empty,
  .coaching-toggle,
  button,
  input,
  select,
  textarea {
    display: none !important;
  }
  .workspace {
    width: 100%;
    padding: 0;
  }
  .band,
  .panel,
  .market-analysis-metric-section,
  .market-analysis-debrief-section,
  .metric,
  .company-performance-report,
  .report-story article {
    break-inside: avoid;
  }
  .dateline {
    color: #000;
    border-color: #000;
  }
  .market-analysis-metric-card,
  .market-analysis-debrief-section,
  .market-analysis-context {
    border-color: #000;
    background: #fff;
  }
  .market-analysis-metric-limitation,
  .market-analysis-metric-state,
  .market-analysis-provenance,
  .market-analysis-snapshot-meta,
  .market-analysis-debrief-section p {
    color: #000;
  }
  .market-analysis-metric-heading {
    break-after: avoid;
  }
  .figure {
    color: #000;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .sparkline {
    color: #000;
  }
  .sparkline polyline,
  .sparkline path,
  .sparkline line {
    stroke: #000;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: var(--step--1);
  }
}

.gradebook-view {
  display: grid;
  gap: 16px;
}

.gradebook-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.gradebook-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.gradebook-table th,
.gradebook-table td {
  padding: 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

/* rel6-instr F01: the 720px minimum above loads after the phone record
   layout (max-width: 650px block), so on a phone it undid that layout and
   widened the whole workspace. Phones keep the labelled records. */
@media (max-width: 650px) {
  .gradebook-table {
    min-width: 0;
  }

  .gradebook-scroll {
    padding-inline: 12px;
  }
}

.finance-plan-controls,
.finance-plan-unavailable {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
}

.finance-plan-controls h4,
.finance-plan-controls p,
.finance-plan-unavailable p {
  margin: 0;
}

.finance-plan-terms {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.financial-statements-panel {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.financial-statements-panel h4,
.financial-statements-panel h5,
.financial-statements-panel p {
  margin: 0;
}

.financial-forecast-panel,
.financial-forecast-results,
.financial-forecast-quarter {
  display: grid;
  gap: 12px;
}

.financial-forecast-panel {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.financial-forecast-panel h4,
.financial-forecast-panel h5,
.financial-forecast-panel h6,
.financial-forecast-panel p {
  margin: 0;
}

.financial-forecast-quarter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
}

.financial-forecast-quarter {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
}

.financial-forecast-quarter dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.financial-forecast-quarter dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.financial-forecast-quarter dt {
  color: var(--muted);
}

.financial-forecast-quarter dd {
  margin: 0;
  text-align: right;
}

.financial-forecast-events {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  overflow-wrap: anywhere;
}

.financial-statement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Legacy, forecast and published statements share their host's capacity:
   decision columns can be narrow even in a wide viewport. */
.financial-forecast-results,
.pro-forma-view,
.financial-statements-panel {
  container: forecast-results / inline-size;
}

@container forecast-results (max-width: 44rem) {
  .financial-statement-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-proforma-statements] .financial-statement-section {
  container: statement / inline-size;
  min-width: 0;
  overflow-x: auto;
}

[data-proforma-statements] table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

[data-proforma-statements] caption {
  margin-bottom: 8px;
  font-weight: var(--weight-strong);
  text-align: left;
}

[data-proforma-statements] th,
[data-proforma-statements] td {
  padding: 6px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

[data-proforma-statements] th:first-child {
  text-align: left;
}

/* Too narrow for three columns: each line becomes the label on its own row
   with both values side by side under short headings from data-column. */
@container statement (max-width: 20rem) {
  [data-proforma-statements] table,
  [data-proforma-statements] caption,
  [data-proforma-statements] tbody {
    display: block;
  }

  [data-proforma-statements] thead {
    display: none;
  }

  [data-proforma-statements] tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  [data-proforma-statements] tbody th,
  [data-proforma-statements] tbody td {
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }

  [data-proforma-statements] tbody th {
    grid-column: 1 / -1;
  }

  [data-proforma-statements] tbody td {
    white-space: nowrap;
  }

  [data-proforma-statements] tbody td::before {
    content: attr(data-column);
    display: block;
    color: var(--muted);
    font-size: var(--step--1);
    white-space: normal;
  }
}

.financial-statement-section {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
}

.financial-statement-section dl,
.student-preview-values {
  display: grid;
  gap: 6px;
  margin: 0;
}

.financial-statement-section dl > div,
.student-preview-values > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.financial-statement-section dl > div {
  /* Keep figures intact; place them below labels only when both cannot fit. */
  flex-wrap: wrap;
}

.financial-statement-section dt {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.financial-statement-section dt,
.student-preview-values dt {
  color: var(--muted);
}

.financial-statement-section dd,
.student-preview-values dd {
  margin: 0;
  text-align: right;
}

.financial-statement-section dd {
  flex-shrink: 0;
  margin-inline-start: auto;
  white-space: nowrap;
}

.financial-statement-comparison {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.student-preview-values dd .student-preview-values {
  margin-top: 6px;
}

.student-preview-list {
  margin: 0;
  padding-left: 20px;
}

.student-preview-workspace {
  width: min(1080px, calc(100% - 48px));
  margin: 24px auto 64px;
}

.student-preview,
.student-preview-banner,
.student-preview-limitations {
  display: grid;
  gap: 12px;
}

.student-preview-banner {
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--canvas);
}

.student-preview h2,
.student-preview h3,
.student-preview p {
  margin: 0;
}

.student-preview-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.student-preview-nav-link {
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  text-decoration: underline;
  text-decoration-color: transparent;
}

.student-preview-nav-link:hover {
  text-decoration-color: currentColor;
}

.student-preview-limitations {
  padding: 14px;
  border-left: 3px solid var(--line-strong);
  background: var(--canvas);
}

.instructor-draft-editor {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding: 16px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--paper);
}

.instructor-draft-editor > h3,
.instructor-draft-editor > p {
  margin: 0;
}

.live-cash-panel {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.live-cash-panel h4,
.live-cash-panel p {
  margin: 0;
}

/* The body swaps between a one-line status and the three-row values list on
   every edit; reserving the three-row height keeps the budget inputs below
   from jumping under the cursor. */
.live-cash-panel > :last-child {
  min-height: calc(3lh + 12px);
}

.live-cash-values {
  display: grid;
  gap: 6px;
  margin: 0;
}

.live-cash-values > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 12px;
}

/* Usable Funds and Remaining close each step of the ladder. */
.live-cash-values > .live-cash-total {
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-weight: var(--weight-strong);
}

.live-cash-values > .live-cash-total dt {
  color: inherit;
}

.live-cash-values dt {
  color: var(--muted);
}

.live-cash-values dd {
  margin: 0 0 0 auto;
  text-align: right;
}

.live-cash-estimate {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: var(--step--1);
}

.live-cash-note {
  color: var(--muted);
}

/* What the latest change moved, under the CFO memo in the decision footer. */
.cash-impact-note {
  position: relative;
  flex-basis: 100%;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal-line);
  border-radius: 6px;
  background: var(--paper);
  font-size: var(--step--1);
  overflow-wrap: anywhere;
}

.cash-impact-note p,
.cash-impact-note ul {
  margin: 0;
}

.cash-impact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  padding: 0;
  list-style: none;
}

.cash-impact-dismiss {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 24px;
  min-height: 24px;
  color: var(--muted);
  font-size: var(--step-0);
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cash-impact-note {
    animation: cash-impact-in 160ms var(--ease-out);
  }
}

@keyframes cash-impact-in {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}

.territory-chooser {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.territory-chooser h3,
.territory-chooser p {
  margin: 0;
}

.territory-chooser-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.territory-chooser-options > li {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
}

.territory-chooser-options > li[data-territory-selected] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.territory-chooser-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}

.territory-chooser-heading small {
  color: var(--muted);
}

.territory-chooser-badge {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--on-accent);
  background: var(--accent);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
}

.territory-chooser-facts {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.territory-chooser-terms {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: var(--step--1);
}

.territory-chooser-terms > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.territory-chooser-terms dt {
  color: var(--muted);
}

.territory-chooser-terms dd {
  margin: 0;
  text-align: right;
}

.territory-chooser-search {
  display: grid;
  gap: 6px;
  max-width: 28rem;
}

.territory-chooser-search input {
  min-width: 0;
}

.territory-chooser-results {
  display: grid;
  gap: 10px;
}

.territory-chooser-count {
  color: var(--muted);
  font-size: var(--step--1);
}

.territory-chooser-pinned {
  display: grid;
  gap: 8px;
}

.territory-chooser-pinned h4 {
  margin: 0;
  font-size: var(--step-0);
}

.territory-chooser-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.territory-chooser-group > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.territory-chooser-group[open] > summary {
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
}

.territory-chooser-group-count {
  color: var(--muted);
  font-size: var(--step--1);
}

.territory-chooser-group > .territory-chooser-options {
  padding: 10px 12px;
}

@media (max-width: 650px) {
  .territory-chooser-terms > div {
    display: grid;
  }

  .territory-chooser-terms dd {
    text-align: left;
  }

  .financial-statement-grid {
    grid-template-columns: 1fr;
  }

  .financial-forecast-quarter dl > div {
    display: grid;
  }

  .financial-forecast-quarter dd {
    text-align: left;
  }

  .student-preview-values > div {
    display: grid;
  }

  .student-preview-values dd {
    text-align: left;
  }
}

/* Companion (Unit/Editor) — packet U7. One insertion block; idle motion
   reuses --dur-route/--ease-out so the existing reduced-motion rule above
   (which forces animation-duration to 0.01ms globally) removes it with no
   extra rule needed here. */
.companion-card {
  --companion-size: clamp(44px, 4.2vw, 96px);
  position: relative;
  display: flex;
  gap: max(10px, calc(var(--companion-size) * 0.22));
  align-items: flex-start;
  padding: 14px;
  margin: 14px 0;
  background: var(--glass-tint, var(--paper));
  backdrop-filter: var(--glass-blur, none);
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 7px;
  box-shadow: var(--glass-shadow, 0 1px 2px rgb(23 32 42 / 8%));
}
/* The walking figure is position: fixed, so the slot must hold its own
   height or the stacked phone card collapses when the Unit leaves. */
.companion-figure-slot {
  flex: 0 0 auto;
  width: var(--companion-size);
  min-height: calc(var(--companion-size) * 1.25);
}
.companion-figure {
  width: 100%;
  height: auto;
  display: block;
}
.companion-body {
  flex: 1 1 auto;
  min-width: 0;
}
.companion-message {
  margin: 4px 0 10px;
}
.companion-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.companion-control {
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}
.companion-restore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}
.companion-mark {
  width: 24px;
  height: 24px;
}
.companion-unit-lens {
  animation: companion-unit-blink calc(var(--dur-route) * 12) var(--ease-out) 1;
}
.companion-editor-pen {
  animation: companion-editor-tilt calc(var(--dur-route) * 14) var(--ease-out) 1;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes companion-unit-blink {
  0%,
  88%,
  100% {
    opacity: 1;
  }
  94% {
    opacity: 0.55;
  }
}
@keyframes companion-editor-tilt {
  0%,
  85%,
  100% {
    transform: translateY(0);
  }
  92% {
    transform: translateY(-1.5px);
  }
}
/* The spec's snippet named ".classroom-shell"; the real shell root class
   (shellViews.js:66) is "app-shell" — corrected here so the pause actually
   matches instead of silently never firing. */
.app-shell:has(input:focus, textarea:focus, select:focus) .companion-unit-lens,
.app-shell:has(input:focus, textarea:focus, select:focus)
  .companion-editor-pen {
  animation-play-state: paused;
}
/* Companion 2.5-D, expression and walk (P104.77). The figure is layered SVG
   under one perspective: the root takes the pointer tilt, and each named
   layer parallaxes along its own --layer-depth, which is what reads as
   depth without WebGL, a bundler or a runtime dependency. Body language and
   the delight are CSS only; the face itself is a DOM swap, so it still
   changes when every animation is off. */
/* The perspective is a function on the figure's own transform, not a
   `perspective` property on the slot: a slot perspective would make the slot
   the containing block of the position:fixed walking figure, so the viewport
   coordinates walk.js measures would land in the wrong place (SD-1440). */
.companion-figure {
  transform: perspective(420px) rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transition: transform var(--dur-state) var(--ease-out);
  will-change: transform;
}
.companion-layer {
  transform: translateZ(var(--layer-depth, 0px))
    translateX(calc(var(--parallax, 0) * var(--layer-depth, 0px) * 0.25));
  transition: transform var(--dur-state) var(--ease-out);
}
.companion-figure[data-companion-motion="live"] {
  animation: companion-breathe 4.8s cubic-bezier(0.37, 0, 0.63, 1) 2;
  scale: 1 var(--breath, 1);
}
.companion-figure[data-companion-motion="live"][data-companion-body="bounce"] {
  animation:
    companion-breathe 4.8s cubic-bezier(0.37, 0, 0.63, 1) 2,
    companion-bounce calc(var(--dur-route) * 5) var(--ease-out) 2;
}
.companion-figure[data-companion-motion="live"][data-companion-body="lean"] {
  animation:
    companion-breathe 4.8s cubic-bezier(0.37, 0, 0.63, 1) 2,
    companion-lean calc(var(--dur-route) * 14) var(--ease-out) 1;
}
.companion-figure[data-companion-motion="live"][data-companion-body="wave"]
  .companion-unit-arm-right {
  animation: companion-wave 900ms cubic-bezier(0.45, 0, 0.2, 1) 1;
  transform-box: view-box;
  transform-origin: var(--arm-pivot-x, 69px) var(--arm-pivot-y, 62px);
}
/* The Unit's gestures (life.js row 6): a toggled data-life-gesture attribute
   drives one CSS keyframe play, timed and eased the same as the P104.246
   bar — never the elastic/bounce curves a cartoon take would use. */
.companion-figure[data-life-gesture="wave"] .companion-unit-arm-right {
  animation: companion-wave 900ms cubic-bezier(0.45, 0, 0.2, 1) 1;
  transform-box: view-box;
  transform-origin: var(--arm-pivot-x, 69px) var(--arm-pivot-y, 62px);
}
.companion-figure[data-life-gesture="nod"] .companion-layer-head {
  animation: companion-nod 520ms var(--ease-out) 1;
  transform-box: view-box;
  transform-origin: 48px 52px;
}
.companion-sparks {
  opacity: 0;
}
.companion-figure[data-companion-delight] .companion-sparks {
  opacity: 1;
}
.companion-figure[data-companion-delight] .companion-sparks circle {
  animation: companion-spark calc(var(--dur-route) * 4) var(--ease-out) both;
  animation-delay: calc(var(--spark-index, 0) * 60ms);
  transform-box: fill-box;
  transform-origin: center;
}
.companion-figure[data-companion-delight="hat-tip"] {
  animation: companion-bow calc(var(--dur-route) * 7) var(--ease-out) 1;
}
.companion-figure[data-companion-delight="tiny-hop"] {
  animation: companion-hop calc(var(--dur-route) * 5) var(--ease-out) 2;
}
/* The walk: the figure leaves its perch for the measured free margins only
   (walk.js), so it is positioned against the viewport while it ambles. */
.companion-figure[data-companion-walking] {
  position: fixed;
  left: var(--walk-x, 0);
  top: var(--walk-y, 0);
  width: var(--walk-w, var(--companion-size));
  height: var(--walk-h, calc(var(--companion-size) * 1.25));
  z-index: 3;
  transition:
    left calc(var(--dur-route) * 4) var(--ease-out),
    top calc(var(--dur-route) * 4) var(--ease-out);
  animation: companion-walk-bob calc(var(--dur-route) * 3) var(--ease-out) 2;
}
.companion-figure[data-companion-walking="left"] {
  scale: -1 1;
}
/* Mirrored and still breathing: the facing mirror is the x factor, the breath
   the y factor, so the two compose instead of one replacing the other. */
.companion-figure[data-companion-motion="live"][data-companion-walking="left"] {
  scale: -1 var(--breath, 1);
}
/* The CFO guide (cfoGuide.js, P104.362): beside the memo the Unit faces it
   and raises its right arm to point, and holds still so it may speak
   (P104.331). Under reduced motion the pose is simply set, never animated. */
/* Two attributes, so this outranks the expression body rules
   ([data-companion-motion][data-companion-body]): the pointing pose must hold
   still, and those rules would keep the ambient body loops running. */
.companion-figure[data-companion-pointing][data-companion-walking] {
  z-index: 11;
  animation: none;
}
/* The memo sits in the sticky decision footer (z-index 10); the guided Unit
   and its bubble paint above it, or they would point from under it. */
.companion-card:has(.companion-figure[data-companion-guide])
  .companion-life-bubble {
  z-index: 11;
}
.companion-figure[data-companion-pointing="left"][data-companion-walking] {
  scale: -1 1;
}
.companion-figure[data-companion-pointing][data-companion-walking]
  .companion-unit-arm-right {
  animation: none;
  rotate: -80deg;
  transform-box: view-box;
  transform-origin: var(--arm-pivot-x, 69px) var(--arm-pivot-y, 62px);
  transition: rotate var(--dur-state) var(--ease-out);
}
/* Calm and static: every animation and transition off, but the transform
   reset reaches only the two animated layers (the root tilt and the layer
   parallax). A blanket `*` reset would override the authored SVG transform
   attributes that place the chest mark, tilt the brows and rotate the
   Editor's groups, corrupting the very static figure it means to keep
   (SD-1442). */
.companion-figure[data-companion-motion="calm"],
.companion-figure[data-companion-motion="calm"] *,
.companion-figure[data-companion-motion="static"],
.companion-figure[data-companion-motion="static"] * {
  animation: none;
  transition: none;
}
.companion-figure[data-companion-motion="calm"],
.companion-figure[data-companion-motion="calm"] .companion-layer,
.companion-figure[data-companion-motion="static"],
.companion-figure[data-companion-motion="static"] .companion-layer {
  transform: none;
}
.companion-calm[data-companion-calm="on"] {
  border-color: var(--line-strong, var(--line));
  font-weight: 600;
}
/* Ambient breathing is the one continuous, symmetric motion in the whole
   figure (P104.246: "slow and subtle for ambient") — a sine-like ease
   in/out rather than the spring-flavoured --ease-out every triggered
   motion below uses, because it never needs to feel like it is arriving
   anywhere. */
/* The breath animates a registered number, not `scale` itself: `scale` also
   carries the walking figure's facing mirror, and an animation on it wins over
   the `scale: -1 1` declaration, so a live Unit walking left used to snap back
   to facing right (SD-FABLE-0407). Registering the property is what keeps the
   interpolation smooth; an unregistered custom property would jump at 50%. */
@property --breath {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@keyframes companion-breathe {
  0%,
  100% {
    --breath: 1;
  }
  50% {
    --breath: 1.012;
  }
}
@keyframes companion-bounce {
  0%,
  100% {
    translate: 0 0;
  }
  35% {
    translate: 0 -4px;
  }
  70% {
    translate: 0 0;
  }
}
@keyframes companion-lean {
  0%,
  100% {
    rotate: 0deg;
  }
  50% {
    rotate: -3deg;
  }
}
/* Two dignified cycles inside [-12deg, 10deg] about the shoulder — not the
   wide cartoon swing this used to be (P104.246: no exaggerated takes). */
@keyframes companion-wave {
  0%,
  100% {
    rotate: 0deg;
  }
  12.5% {
    rotate: -12deg;
  }
  37.5% {
    rotate: 10deg;
  }
  62.5% {
    rotate: -12deg;
  }
  87.5% {
    rotate: 10deg;
  }
}
@keyframes companion-nod {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 2px;
    rotate: 4deg;
  }
}
@keyframes companion-spark {
  0% {
    scale: 0.2;
    opacity: 0;
  }
  40% {
    scale: 1.1;
    opacity: 1;
  }
  100% {
    scale: 1.6;
    opacity: 0;
  }
}
@keyframes companion-bow {
  0%,
  100% {
    rotate: 0deg;
    translate: 0 0;
  }
  45% {
    rotate: 8deg;
    translate: 0 3px;
  }
}
@keyframes companion-hop {
  0%,
  100% {
    translate: 0 0;
  }
  40% {
    translate: 0 -4px;
  }
}
@keyframes companion-walk-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .companion-figure,
  .companion-figure * {
    animation: none;
    transition: none;
  }
  .companion-layer {
    transform: none;
  }
  /* Scoped to the companion's own gesture attribute, never a blanket
     transform: none (VISUAL-COMMON row 6). */
  [data-life-gesture] * {
    animation: none !important;
  }
}
/* The Unit's decorative reaction bubble (life.js, P104.299G): aria-hidden;
   the one announcement is the card's live region. bubblePlacement.js puts it
   beside the figure wherever the figure is (parked: absolute in the card;
   walking: fixed in the viewport) on the first side clear of controls. */
.companion-life-bubble {
  position: absolute;
  left: var(--bubble-x, calc(var(--companion-size) + 24px));
  top: var(--bubble-y, 10px);
  z-index: 4;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 12px;
  background: var(--glass-tint, var(--paper));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturation));
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 12px;
  box-shadow:
    var(--glass-shadow, 0 1px 2px rgb(23 32 42 / 8%)),
    0 6px 18px rgb(23 32 42 / 12%);
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  translate: 0 4px;
  scale: 0.96;
  transform-origin: left center;
  transition:
    opacity 220ms var(--ease-out),
    translate 220ms var(--ease-out),
    scale 220ms var(--ease-out);
}
.companion-life-bubble[data-life-bubble-anchor="viewport"] {
  position: fixed;
}
.companion-life-bubble[data-life-bubble-compact] {
  max-width: min(180px, calc(100vw - 16px));
}
.companion-life-bubble[data-life-bubble-side="left"] {
  transform-origin: right center;
}
.companion-life-bubble[data-life-bubble-side="above"] {
  transform-origin: center 100%;
}
.companion-life-bubble[data-life-bubble-side="below"] {
  transform-origin: center 0;
}
.companion-life-bubble::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 2px;
  rotate: 45deg;
}
.companion-life-bubble[data-life-bubble-side="right"]::before {
  left: 0;
  top: calc(var(--bubble-tail, calc(var(--companion-size) * 0.28)) - 5px);
  translate: -50% 0;
  border-top-color: transparent;
  border-right-color: transparent;
}
.companion-life-bubble[data-life-bubble-side="left"]::before {
  left: 100%;
  top: calc(var(--bubble-tail, calc(var(--companion-size) * 0.28)) - 5px);
  translate: -50% 0;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.companion-life-bubble[data-life-bubble-side="above"]::before {
  top: 100%;
  left: calc(var(--bubble-tail, calc(var(--companion-size) * 0.375)) - 5px);
  translate: 0 -50%;
  border-top-color: transparent;
  border-left-color: transparent;
}
.companion-life-bubble[data-life-bubble-side="below"]::before {
  top: 0;
  left: calc(var(--bubble-tail, calc(var(--companion-size) * 0.375)) - 5px);
  translate: 0 -50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.companion-life-bubble[data-life-bubble="shown"] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
.companion-life-bubble[data-life-bubble="replace"] {
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.companion-life-bubble[data-life-bubble="exit"] {
  opacity: 0;
  translate: 0 0;
  scale: 1;
  transition: opacity 160ms var(--ease-out);
}
.companion-card[data-life-speaking="over-card"] .companion-body > .eyebrow,
.companion-card[data-life-speaking="over-card"] .companion-message {
  opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .companion-life-bubble {
    transition: none;
    translate: 0 0;
    scale: 1;
  }
}
.companion-library-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}
.companion-library-table th,
.companion-library-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.companion-library-fields {
  color: var(--muted);
  font-size: var(--step--1);
}
.companion-library-phrasings {
  margin: 0;
  padding-left: 18px;
}
/* The tutorial dialog now carries a third action (the companion re-enable),
   so its action row needs the same spacing the confirmation dialog uses. */
#tutorial-dialog .dialog-actions {
  gap: 8px;
}
@media (max-width: 650px) {
  .companion-card {
    flex-direction: column;
  }
}

/* Map catalog states (NEW-01): a muted base geography instead of a black
   void, with the cause and, when it can help, a retry control. */
.map-catalog-state {
  position: relative;
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
}
.map-catalog-state[data-map-geography="true"] {
  display: block;
  padding: 0;
}
.map-catalog-state .map-stage-muted {
  min-height: 360px;
  opacity: 0.55;
  filter: saturate(0.6);
}
.map-catalog-state[data-map-geography="true"] .map-catalog-status {
  position: absolute;
  inset: auto 0 0 0;
}
.map-catalog-status {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 20px 24px 26px;
  color: #e6eef2;
  background: linear-gradient(
    to top,
    rgb(12 24 34 / 96%) 0%,
    rgb(12 24 34 / 82%) 70%,
    rgb(12 24 34 / 0%) 100%
  );
  text-align: center;
}
.map-catalog-title {
  margin: 0;
  max-width: 48ch;
  color: #ffffff;
  font-size: var(--step-0);
  font-weight: var(--weight-strong);
}
.map-catalog-detail {
  margin: 0;
  max-width: 56ch;
  color: #b9cad3;
  font-size: var(--step--1);
}
.map-catalog-retry {
  margin-top: 4px;
  color: #ffffff;
  border-color: #6d8591;
  background: transparent;
}
.map-catalog-retry:hover {
  border-color: #ffffff;
  background: rgb(255 255 255 / 8%);
}

/* Codes sheet (NEW-05): a framed dialog whose header close and footer
   action stay in view while the seat roster scrolls between them. */
.codes-sheet-framed {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
}
.codes-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 22px 12px;
  border-bottom: 1px solid var(--line);
}
.codes-sheet-head h2 {
  margin: 0;
}
.codes-close {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: var(--step-2);
  line-height: 1;
  cursor: pointer;
}
.codes-close:hover,
.codes-close:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}
.codes-sheet-body {
  min-height: 0;
  overflow: auto;
  padding: 12px 22px 16px;
}
.codes-sheet-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/* Instructor Student view (UX-452): one small control above the team's own
   workspace; everything below it is the team's unchanged view. */
.team-view-return-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 12px;
  margin: 8px var(--pad-fluid-inline) 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.team-view-return-control-error {
  justify-content: flex-start;
  padding: 8px 12px;
  border: 1px solid var(--danger-line);
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--ink);
}

.team-view-return {
  min-width: max-content;
  white-space: nowrap;
}

.decision-field-attribution {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--step--2);
}

/* Editioned Strategic Dominance Operating Review. Tables remain the primary
   representation so the same document is usable on screen and on paper. */
.round-report {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px var(--pad-fluid-inline) 64px;
  background: var(--paper);
}
.round-report-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ink);
}
.round-report-header h1,
.round-report-section-heading h2 {
  margin: 0;
  font-family: var(--font-display);
}
.round-report-deck,
.round-report-section-heading > p:last-child {
  max-width: 72ch;
  margin: 0;
  color: var(--ink-soft);
}
.round-report-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.round-report-controls button,
.round-report-controls select {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
}
.edition-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}
.edition-nav-current {
  text-align: center;
}
.edition-nav-previous {
  justify-self: start;
}
.edition-nav-next {
  justify-self: end;
}
.edition-nav button {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
}
.round-report-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  margin: 0;
}
.round-report-identity div {
  padding: 10px;
  border: 1px solid var(--line);
}
.round-report-identity dt,
.round-report-identity dd {
  margin: 0;
}
.round-report-identity dt {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  text-transform: uppercase;
}
.round-report-identity dd {
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.round-report-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.round-report-section-nav a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.round-report-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.round-report-page-break {
  break-before: page;
  page-break-before: always;
}
.round-report-section:first-of-type {
  break-before: auto;
  page-break-before: auto;
}
.round-report-section-heading {
  display: grid;
  gap: 4px;
}
.round-report-section-heading .eyebrow {
  margin: 0;
  color: var(--muted);
}
.round-report-movement,
.round-report-disclosure-note,
.round-report-empty {
  margin: 0;
  color: var(--ink-soft);
}
.round-report-ledger-grid,
.round-report-statement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}
.round-report-statement-stack {
  display: grid;
  gap: 12px;
}
.round-report-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
}
.round-report-tile p,
.round-report-tile h3,
.round-report-tile strong,
.round-report-tile small {
  margin: 0;
}
.round-report-tile strong {
  font-size: var(--step-2);
}
.round-report-disclosure {
  display: inline-block;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
}
/* Each wrap is an inline-size container, so a wide table scrolls inside it
   instead of widening the report. The caption cue follows the wrap's
   observed data-overflowing state, so it appears whenever the table is
   wider than its wrap, whether from the minimum width or from content. */
.round-report-table-wrap {
  container-type: inline-size;
  overflow-x: auto;
}
.round-report-table-wrap:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
@media screen {
  .round-report-table-wrap[data-overflowing="true"]
    .round-report-table
    caption::after {
    content: "Scroll sideways for more columns →";
    display: block;
    color: var(--muted);
    font-size: var(--step--1);
    font-weight: var(--weight-label);
  }
}
.round-report-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--paper);
}
.round-report-fields .round-report-table {
  min-width: 0;
}
.round-report-fields .round-report-table tbody th {
  white-space: normal;
  overflow-wrap: anywhere;
}
.round-report-fields .round-report-table td.figure {
  white-space: nowrap;
}
/* A disclosed field keeps its amount beside the label, then its disclosure
   below them when the table's own available width is narrow. */
@container (max-width: 599px) {
  .round-report-fields .round-report-table:has(thead th:nth-child(3)) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .round-report-fields .round-report-table:has(thead th:nth-child(3)) tbody {
    display: block;
  }
  .round-report-fields .round-report-table:has(thead th:nth-child(3)) tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
  }
  .round-report-fields
    .round-report-table:has(thead th:nth-child(3))
    tbody
    :is(th, td) {
    min-width: 0;
  }
  .round-report-fields
    .round-report-table:has(thead th:nth-child(3))
    tbody
    td:last-child {
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
  }
  .round-report-fields
    .round-report-table:has(thead th:nth-child(3))
    tbody
    td:last-child::before {
    content: attr(data-label);
    margin-right: 0.5em;
    font-weight: var(--weight-label);
  }
}
.round-report-table caption {
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: var(--weight-strong);
  text-align: left;
}
.round-report-table th,
.round-report-table td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.round-report-table thead th {
  color: var(--ink);
  background: var(--paper-2);
  font-size: var(--step--1);
}
.round-report-table tbody th {
  font-weight: var(--weight-strong);
}
.round-report-newsroom-items {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 24px;
}
.round-report-newsroom-items li {
  padding-left: 6px;
}
.round-report-newsroom-items p {
  margin: 4px 0 0;
  color: var(--ink-soft);
}

@media print {
  @page {
    /* auto follows the printer tray, so Letter and A4 both paginate */
    size: auto;
    margin: 0.55in;
  }
  .round-report-controls,
  .round-report-section-nav,
  .topbar,
  .workspace-page > h2 {
    display: none !important;
  }
  .round-report {
    max-width: none;
    padding: 0;
    color: #000;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .round-report-page-break {
    break-before: page;
    page-break-before: always;
  }
  .round-report-table thead {
    display: table-header-group;
  }
  .round-report-table tr,
  .round-report-tile {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .round-report-table th,
  .round-report-table td,
  .round-report-identity div,
  .round-report-tile {
    border-color: #000;
  }
  .round-report-section-heading > p:last-child,
  .round-report-deck,
  .round-report-movement,
  .round-report-disclosure-note,
  .round-report-empty,
  .round-report-newsroom-items p {
    color: #000;
  }
}

.decision-status-stack {
  display: contents;
}
.decision-status {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.decision-status + .disclosure-panel-shell {
  margin-top: var(--space-3);
}
.decision-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.decision-status-title {
  margin: 0;
  font-size: var(--step-0);
  font-weight: var(--weight-strong);
}
.decision-status-summary {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}
.decision-status-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: var(--space-2);
}
.decision-status-area {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name dot" "count count";
  gap: 2px var(--space-1);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    border-color var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out);
}
.decision-status-cfo {
  cursor: default;
}
.decision-status-pinned {
  margin-top: var(--space-3);
}
.decision-status-pinned h3 {
  margin: 0 0 var(--space-2);
  color: var(--danger);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (hover: hover) {
  .decision-status-area:hover {
    background: var(--paper-2);
    border-color: var(--muted);
  }
}
.decision-status-area[aria-expanded="true"] {
  border-color: var(--ink);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.decision-status-area:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.decision-status-name {
  grid-area: name;
  font-weight: var(--weight-strong);
  font-size: var(--step--1);
}
.decision-status-count {
  grid-area: count;
  color: var(--muted);
  font-size: var(--step--1);
}
.decision-status-dot {
  grid-area: dot;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18);
}
[data-status-tone="red"] .decision-status-dot {
  background: var(--danger);
}
[data-status-tone="yellow"] .decision-status-dot {
  background: var(--status-yellow);
}
[data-status-tone="green"] .decision-status-dot {
  background: var(--teal);
}
.decision-status-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.decision-status-detail h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.decision-status-col:first-child h3 {
  color: var(--teal);
}
.decision-status-col:last-child h3 {
  color: var(--danger);
}
.decision-status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}
.decision-status-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
}
.decision-status-done .decision-status-mark {
  color: var(--teal);
}
.decision-status-remaining .decision-status-mark {
  width: 9px;
  height: 9px;
  flex: none;
  border: 1.5px solid var(--danger);
  border-radius: 50%;
}
.decision-status-empty {
  color: var(--muted);
}
@keyframes decision-status-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.decision-status-detail.is-entering {
  animation: decision-status-in 180ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .decision-status-detail.is-entering {
    animation: none;
  }
}
@media (max-width: 600px) {
  .decision-status {
    padding: var(--space-3) var(--space-2);
  }
  .decision-status-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .decision-status-area {
    padding: 8px 6px;
  }
  .decision-status-dot {
    width: 8px;
    height: 8px;
  }
}
@media (max-width: 383px) {
  .decision-status-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 601px) and (max-width: 1180px) {
  .decision-status-areas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.disclosure-panel-shell {
  position: relative;
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}
.disclosure-panel-shell > .help-bubble {
  position: absolute;
  z-index: 2;
  top: var(--space-4);
  left: calc(var(--space-4) + 1.15em + 12.5em + 6px);
  font-size: var(--step-0);
}
.disclosure-panel {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}
.disclosure-panel > summary {
  cursor: pointer;
  font-weight: var(--weight-strong);
  font-size: var(--step-0);
  list-style-position: outside;
  margin-left: 1.15em;
}
.disclosure-panel > summary::marker {
  color: var(--accent);
}
.disclosure-panel[open] > summary {
  margin-bottom: var(--space-4);
}
@media (max-width: 600px) {
  .disclosure-panel {
    padding: var(--space-3) var(--space-2);
  }
  .disclosure-panel-shell > .help-bubble {
    top: var(--space-3);
    left: calc(var(--space-2) + 1.15em + 12.5em + 6px);
  }
}
.disclosure-tables table {
  width: 100%;
  border-collapse: collapse;
}
.disclosure-tables caption,
.disclosure-tables thead th {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  text-align: left;
}
.disclosure-tables th[scope="row"] {
  text-align: left;
}
.disclosure-tables th,
.disclosure-tables td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.disclosure-panel-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.disclosure-panel-search-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.disclosure-panel-search-label {
  font-size: var(--step--1);
  color: var(--muted);
  font-weight: var(--weight-label);
}
.disclosure-panel-search {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step--1);
}
.disclosure-panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.disclosure-panel-chip {
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  cursor: pointer;
  transition:
    background var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out);
}
.disclosure-panel-chip:hover {
  color: var(--ink);
  border-color: var(--pedagogy);
}
.disclosure-panel-chip:focus-visible {
  outline: 2px solid var(--pedagogy);
  outline-offset: 2px;
}
.disclosure-panel-chip[aria-pressed="true"] {
  background: var(--pedagogy);
  border-color: var(--pedagogy);
  color: var(--on-accent);
}
.disclosure-panel-count {
  align-self: flex-end;
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}
.disclosure-panel-empty {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--step--1);
}

.help-bubble-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.help-bubble-close {
  display: inline-grid;
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: -8px -10px 0 0;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: var(--step-3);
  line-height: 1;
}
.help-bubble-terms dt {
  font-weight: 600;
}
.help-bubble-terms dd {
  margin: 0 0 6px;
}
.field > .decision-help-bubble[data-placement="field"] {
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
}
.decision-help-bubble[data-placement="field"] > .help-bubble-panel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  max-width: 100%;
  margin-top: 6px;
  transform: none;
}
/* An open field or metric-card definition takes its own full-width row under
   the label, so the label keeps its width instead of being squeezed beside
   a panel that sits in flow. */
.field-label-row,
.market-analysis-metric-heading {
  flex-wrap: wrap;
}
.field-label-row > label,
.market-analysis-metric-heading > h4 {
  flex: 1 1 0;
}
.field-label-row > .decision-help-bubble[data-placement="field"],
.market-analysis-metric-heading
  > .decision-help-bubble[data-placement="field"] {
  display: contents;
}
.field-label-row
  > .decision-help-bubble[data-placement="field"]
  > .help-bubble-panel,
.market-analysis-metric-heading
  > .decision-help-bubble[data-placement="field"]
  > .help-bubble-panel {
  flex: 0 0 100%;
  box-sizing: border-box;
}
/* A glossary "?" inside a hint paragraph sits directly above the control it
   explains, so its definition opens in flow rather than floating over it. */
.form-screen p .help-bubble[data-open] {
  display: inline;
}
.form-screen p .help-bubble > .help-bubble-panel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  display: block;
  width: auto;
  max-width: 100%;
  margin-top: 6px;
}
.form-screen p .help-bubble > .help-bubble-panel[hidden] {
  display: none;
}
.screen-section {
  position: relative;
}
.screen-section > summary {
  padding-right: 56px;
}
.screen-section > .screen-help-terms {
  position: absolute;
  top: 8px;
  right: 10px;
  margin: 0;
}
.screen-help-terms > .decision-help-bubble {
  display: inline-flex;
}
@media (max-width: 599px) {
  .screen-section > .screen-help-terms {
    position: static;
    display: block;
    width: auto;
    margin: 0 12px 8px;
  }
  .screen-help-terms > .decision-help-bubble,
  .decision-help-bubble[data-placement="inline"] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: auto;
  }
  .decision-help-bubble[data-placement="inline"] > .help-bubble-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: 100%;
    align-self: stretch;
    margin-top: 6px;
    transform: none;
  }
  /* max-width pins the row to the initial containing block: with only
     left/right it follows a phone layout viewport that an overhanging element
     has widened, and then holds that overflow open itself. */
  .decision-footer .button-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100vw;
    z-index: 20;
    margin: 0;
    padding: 8px 16px max(8px, env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
  /* Keep a live decision update in view above the fixed Save row. */
  .decision-footer .cash-impact-note {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 32px);
    z-index: 21;
  }
  .form-screen {
    padding-bottom: 72px;
  }
  /* A backdrop-filter or a transform on an ancestor becomes the containing
     block of a fixed descendant, which would leave Save at the page end. The
     load animation's fill-mode "both" keeps an identity transform on the form. */
  .decision-footer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .classroom-load-choreography
    .workspace-decision-form[data-load-stage="action"] {
    animation-fill-mode: backwards;
  }
}

/* Glass system (P104.244): shared ambient canvas, card surfaces (glass
   without blur) and blurred floating chrome, plus solid fallbacks for
   reduced transparency, forced colors, no backdrop-filter support and
   print. Selectors here intentionally restate earlier rules so the glass
   material always wins the cascade without touching those rules in place. */
body {
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 10% 14%, var(--ambient-a), transparent 72%),
    radial-gradient(50rem 36rem at 96% 34%, var(--ambient-b), transparent 72%),
    radial-gradient(56rem 40rem at 46% 100%, var(--ambient-c), transparent 72%);
}

:is(
  .panel,
  .metric,
  .report-card,
  .department-card,
  .round-verdict,
  .statement-panel,
  .capital-markets-report,
  .research-chart,
  .v2-chart-card,
  .v2-metric,
  .market-analysis-metric-card,
  .market-analysis-debrief-section,
  .financial-statements-panel,
  .financial-forecast-panel,
  .live-cash-panel,
  .creator-wire,
  .decision-review-card,
  .instructor-roster-card,
  .hosted-landing-card,
  .hosted-status-card,
  .welcome,
  .capstone-debrief-card,
  .territory-chooser,
  .planning-benchmark,
  .round-checklist,
  .department-progress,
  .draft-history,
  .setup-group,
  .join-company-choice,
  .instructor-draft-editor,
  .results-reveal-score
) {
  background: linear-gradient(
    180deg,
    var(--glass-surface-top),
    var(--glass-surface)
  );
  box-shadow: var(--glass-inner-light), var(--glass-depth);
}
.market-analysis-metric-card:is(
  .availability-state-not_modeled,
  .availability-state-not_yet_published,
  .availability-state-role_filtered
) {
  background: color-mix(in srgb, var(--paper) 92%, var(--line));
}

.topbar {
  background: var(--glass-tint);
  border-bottom-color: var(--glass-edge-outer);
  box-shadow: var(--glass-inner-light);
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
.role-workspace-navigation {
  background: var(--glass-tint);
  border-color: var(--glass-edge-outer);
  box-shadow: var(--glass-inner-light), var(--glass-depth);
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
.help-bubble-panel {
  background: var(--glass-tint);
  border-color: var(--glass-edge-outer);
  box-shadow: var(--glass-inner-light), var(--glass-depth);
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
dialog {
  background: var(--glass-surface-strong);
  border-color: var(--glass-edge-outer);
  box-shadow:
    var(--glass-inner-light),
    0 24px 60px -20px rgb(8 14 20 / 45%);
}
dialog::backdrop {
  background: rgb(8 14 20 / 38%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.map-overlay .map-stat {
  background: var(--glass-dark-tint);
  border-color: rgb(255 255 255 / 14%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 8px 20px -10px rgb(0 0 0 / 55%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  color: #ffffff;
}

.field select,
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field textarea {
  background: var(--glass-surface-strong);
  box-shadow: inset 0 1px 2px rgb(16 24 32 / 8%);
  transition:
    border-bottom-color 400ms linear,
    box-shadow var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out);
}
.field select:focus-visible,
.field input[type="text"]:focus-visible,
.field input[type="password"]:focus-visible,
.field input[type="number"]:focus-visible,
.field textarea:focus-visible {
  box-shadow:
    var(--glass-focus),
    inset 0 1px 2px rgb(16 24 32 / 8%);
}
.secondary {
  background: var(--glass-surface-strong);
  border-color: var(--glass-edge-outer);
  box-shadow:
    var(--glass-inner-light),
    0 1px 2px rgb(16 24 32 / 8%);
  transition:
    box-shadow var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out);
}
.secondary.map-catalog-retry {
  border-color: #6d8591;
  background: transparent;
  box-shadow: none;
}
.secondary.map-catalog-retry:hover {
  border-color: #ffffff;
  background: rgb(255 255 255 / 8%);
}
.secondary.coaching-toggle {
  border-color: color-mix(in srgb, var(--pedagogy) 45%, var(--line-strong));
}
.primary {
  background-color: var(--accent);
  background-image: linear-gradient(
    180deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 80%, var(--accent-dark))
  );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 1px 2px rgb(16 24 32 / 20%);
  transition:
    box-shadow var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out);
}
.primary:hover:not(:disabled) {
  background-image: none;
  background-color: var(--accent-dark);
}
.landing-choice.primary:hover {
  background: #3a5cc6;
}

@media (prefers-reduced-motion: reduce) {
  .field select,
  .field input[type="text"],
  .field input[type="password"],
  .field input[type="number"],
  .field textarea,
  .secondary,
  .primary {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  :root,
  :root[data-theme="dark"] {
    --glass-edge-outer: var(--line-strong);
  }
}

/* F1 (V1-glass review 4): same substitution, for the automatic-dark
   selector that the pinned-theme rule above does not reach. */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-edge-outer: var(--line-strong);
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active), print {
  body::before {
    display: none;
  }
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .topbar,
  .role-workspace-navigation,
  .help-bubble-panel,
  dialog {
    background: var(--paper);
  }
  .map-overlay .map-stat {
    background: var(--map-ocean);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :is(
    .panel,
    .metric,
    .report-card,
    .department-card,
    .round-verdict,
    .statement-panel,
    .capital-markets-report,
    .research-chart,
    .v2-chart-card,
    .v2-metric,
    .market-analysis-metric-card,
    .market-analysis-debrief-section,
    .financial-statements-panel,
    .financial-forecast-panel,
    .live-cash-panel,
    .creator-wire,
    .decision-review-card,
    .instructor-roster-card,
    .hosted-landing-card,
    .hosted-status-card,
    .welcome,
    .capstone-debrief-card,
    .territory-chooser,
    .planning-benchmark,
    .round-checklist,
    .department-progress,
    .draft-history,
    .setup-group,
    .join-company-choice,
    .instructor-draft-editor,
    .results-reveal-score,
    .role-workspace-navigation,
    .help-bubble-panel,
    dialog
  ) {
    background: var(--paper);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .topbar {
    background: var(--paper);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :is(
    .field select,
    .field input[type="text"],
    .field input[type="password"],
    .field input[type="number"],
    .field textarea
  ) {
    background: var(--paper);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .secondary {
    background: var(--paper);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .secondary.map-catalog-retry {
    background: transparent;
  }
  .map-overlay .map-stat {
    background: var(--map-ocean);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  :is(
    .panel,
    .metric,
    .report-card,
    .department-card,
    .round-verdict,
    .statement-panel,
    .capital-markets-report,
    .research-chart,
    .v2-chart-card,
    .v2-metric,
    .market-analysis-metric-card,
    .market-analysis-debrief-section,
    .financial-statements-panel,
    .financial-forecast-panel,
    .live-cash-panel,
    .creator-wire,
    .decision-review-card,
    .instructor-roster-card,
    .hosted-landing-card,
    .hosted-status-card,
    .welcome,
    .capstone-debrief-card,
    .territory-chooser,
    .planning-benchmark,
    .round-checklist,
    .department-progress,
    .draft-history,
    .setup-group,
    .join-company-choice,
    .instructor-draft-editor,
    .results-reveal-score,
    .topbar,
    .role-workspace-navigation,
    .help-bubble-panel,
    dialog,
    .field select,
    .field input[type="text"],
    .field input[type="password"],
    .field input[type="number"],
    .field textarea
  ) {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .map-overlay .map-stat {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media print {
  :is(
    .panel,
    .metric,
    .report-card,
    .department-card,
    .round-verdict,
    .statement-panel,
    .capital-markets-report,
    .research-chart,
    .v2-chart-card,
    .v2-metric,
    .market-analysis-metric-card,
    .market-analysis-debrief-section,
    .financial-statements-panel,
    .financial-forecast-panel,
    .live-cash-panel,
    .creator-wire,
    .decision-review-card,
    .instructor-roster-card,
    .hosted-landing-card,
    .hosted-status-card,
    .welcome,
    .capstone-debrief-card,
    .territory-chooser,
    .planning-benchmark,
    .round-checklist,
    .department-progress,
    .draft-history,
    .setup-group,
    .join-company-choice,
    .instructor-draft-editor,
    .results-reveal-score
  ) {
    background: var(--paper);
    box-shadow: none;
  }
}

/* End of glass system (P104.244) */

/* Type hierarchy and polish (P104.639). One scale for every decision page,
   report and instructor screen: page heading > section heading > group
   heading > field label > value > help and meta, three weights. Sizes,
   weights and colours only; the vertical rhythm of the student decision
   pages belongs to the density pass. */
.form-screen .screen-section > summary strong {
  font-size: var(--text-section);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
}
.form-screen .screen-section :is(h2, h3, h4, legend),
.form-screen .title-with-help > :is(h2, h3, h4) {
  color: var(--ink);
  font-size: var(--text-group);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
}

/* Field labels: every label pattern the department modules use reads at the
   same size, weight and ink, including the label rows written as a heading
   and the ones set inside a wrapping label. */
.form-screen
  :is(
    .field-label-row > label,
    .field-label-row > span:not(.help-bubble),
    .capital-return-field > .field-label-row > h3,
    .operating-model-fields > .field-label-row > label
  ) {
  color: var(--ink-soft);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: var(--leading-tight);
}
/* The heading above a capital-return field already names it; the wrapping
   label's own copy stays for assistive technology only. */
.form-screen .capital-return-field > label.field > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-screen
  :is(
    .capital-return-field > label.field,
    .capital-structure-fields > label.field:has(> input + span)
  ) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2);
}
.form-screen
  .capital-structure-fields
  > label.field:has(> input + span)
  > :not(input, input + span) {
  grid-column: 1 / -1;
}
.form-screen label.field > input + span,
.form-screen .number-wrap > span {
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}

/* Values: the decision itself is the strongest thing in a field. */
.form-screen
  .field
  :is(select, input[type="text"], input[type="number"], textarea),
.form-screen :is(.domicile-fields > select, .operating-model-fields select) {
  color: var(--ink);
  font-size: var(--text-value);
  font-variant-numeric: tabular-nums;
}
.form-screen .field input[type="number"] {
  font-weight: var(--weight-strong);
}
.form-screen :is(.domicile-fields > select, .operating-model-fields select),
.field
  :is(
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"],
    input[type="email"]
  ),
.course-rename > input[type="text"] {
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--glass-surface-strong);
  box-shadow: inset 0 1px 2px rgb(16 24 32 / 8%);
}
.form-screen .domicile-fields > select {
  width: 100%;
  margin-top: var(--space-2);
}
.form-screen .operating-model-fields select {
  margin-left: var(--space-2);
}

/* Help and meta: quieter than the label above it, never larger. */
.form-screen
  :is(
    .field small,
    .field-hint,
    .field-readout,
    .field-price-hint,
    .current-split,
    .capital-return-field > p,
    .loan-aid > p,
    .financial-forecast-panel > p,
    .live-cash-panel > p,
    .operating-model-fields > p,
    .sd-integration-readout > p,
    .contingency-readiness
  ) {
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--weight-body);
  line-height: var(--leading-meta);
}
.form-screen .contingency-readiness {
  margin-block: var(--space-2) 0;
  padding-left: 1.25rem;
}

.form-screen .standing-decisions > summary {
  min-height: 44px;
  padding-block: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: var(--leading-tight);
}

/* Statement titles were browser-default h5/h6 sizes, two levels off the
   scale. */
.financial-statement-section > h5 {
  color: var(--ink);
  font-size: var(--text-label);
  font-weight: var(--weight-heading);
}
.loan-statement-row > h6 {
  color: var(--ink-soft);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}

/* Key numbers read first on the funds panel. */
.live-cash-values dd {
  color: var(--ink);
  font-size: var(--text-key);
  font-weight: var(--weight-heading);
  font-variant-numeric: tabular-nums;
}
.live-cash-values dt {
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--weight-label);
}

/* The funding-application button had no class and fell back to the
   browser's default button. */
.form-screen .alternative-funding-family > button:not([class]) {
  min-height: 44px;
  margin-top: var(--space-3);
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  background: var(--glass-surface-strong);
  box-shadow:
    var(--glass-inner-light),
    0 1px 2px rgb(16 24 32 / 8%);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
}

/* Section steps sit on the glass panel instead of an opaque fill, so the
   ambient wash reads through the whole form. */
.form-screen .screen-section {
  background: color-mix(in srgb, var(--paper-2) 55%, transparent);
  box-shadow: var(--glass-inner-light);
}

/* Page headings sit one level above every section heading on the page;
   report sections had outranked the page they belong to. */
.workspace-page > h2 {
  font-size: var(--text-page);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
}
.report-section-heading h2 {
  font-size: var(--step-2);
}

/* Results. */
.report-back-to-top {
  color: var(--muted);
  font-size: var(--text-meta);
  text-underline-offset: 3px;
}
.report-back-to-top:hover {
  color: var(--ink);
}
.report-section-disclosure > summary {
  font-size: var(--text-meta);
  font-weight: var(--weight-label);
}
.emergency-funding-panel {
  overflow-x: auto;
}
:where(.results-view, .strategy-report-vrio, .emergency-funding-panel)
  :where(table) {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
:where(.results-view, .strategy-report-vrio, .emergency-funding-panel)
  :where(th, td) {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
:where(.results-view, .strategy-report-vrio, .emergency-funding-panel)
  :where(thead th) {
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--weight-label);
}
:where(.results-view, .strategy-report-vrio, .emergency-funding-panel)
  :where(caption) {
  padding-bottom: var(--space-2);
  color: var(--muted);
  font-size: var(--text-meta);
  text-align: left;
}

/* Instructor console. */
.course-rename {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  max-width: 36rem;
}
.course-rename > label {
  color: var(--ink-soft);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}
.course-rename > input[type="text"] {
  width: 100%;
}
.course-rename > .form-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-meta);
}
.setup-editor fieldset {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.setup-editor legend {
  padding-inline: var(--space-1);
  color: var(--ink-soft);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}
.round-schedule .field > span:first-child {
  color: var(--ink-soft);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}

/* Pressed and hover states for every button family. */
.secondary:hover:not(:disabled),
.form-screen .alternative-funding-family > button:not([class]):hover {
  border-color: var(--ink-soft);
}
:is(.primary, .secondary, .quiet, .danger-button):active:not(:disabled),
.form-screen .alternative-funding-family > button:not([class]):active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  :is(.primary, .secondary, .quiet, .danger-button):active:not(:disabled),
  .form-screen .alternative-funding-family > button:not([class]):active {
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .form-screen .screen-section {
    background: var(--paper-2);
    box-shadow: none;
  }
}
@media (forced-colors: active) {
  .form-screen .screen-section {
    background: Canvas;
    box-shadow: none;
  }
}

/* End of type hierarchy and polish (P104.639) */

/* Clarity pass (P104.640, clarity-hunt-453 CSS findings). Layout only; the
   colours come from the tokens above. */
.topbar-actions.glass {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The expanded sidebar already lists every section's progress. */
.workspace-layout:has(
    .role-workspace-navigation[data-mobile-drawer="false"][data-collapsed="false"]
  )
  .department-progress {
  display: none;
}
.cfo-signoff-lever {
  display: grid;
  gap: 2px;
}
.cfo-signoff-lever button {
  width: 100%;
}
.round-report-statement-grid {
  grid-template-columns: minmax(0, 1fr);
}
.financial-statement-grid {
  align-items: start;
}
.investment-register-state {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0;
}
.investment-register-state dt {
  color: var(--muted);
  font-size: var(--text-meta);
}
.investment-register-state dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.report-scorecard-table caption {
  text-align: left;
}
.report-scorecard-table :is(th, td) {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.report-scorecard-table thead th {
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--weight-label);
}
.team-detail .decision-review-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  max-width: none;
}
.team-detail .decision-review-card > :not(.decision-review-group) {
  grid-column: 1 / -1;
}
.round-deadline-table {
  width: 100%;
  border-collapse: collapse;
}
.round-deadline-table caption {
  caption-side: bottom;
  padding-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-meta);
  text-align: left;
}
.round-deadline-table :is(th, td) {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.round-deadline-table thead th {
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--weight-label);
}
.gradebook-view.panel {
  padding: var(--space-4);
}
/* Once the join or create form is open, the hero's primary steps back so
   the form's own Continue is the one primary on screen. */
body:has(.welcome-access) .landing-choice.primary {
  border-color: rgb(226 232 255 / 48%);
  background: rgb(6 21 27 / 35%);
}

/* "Results are published" is news, not success: the neutral info notice. */
.notice.round-results-announcement {
  border-color: color-mix(in srgb, var(--info) 30%, var(--paper));
  background: var(--info-soft);
}
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--accent);
}

/* End of clarity pass (P104.640) */

/* Realized-strategy donut (P104.374): Okabe-Ito colour-blind-safe hues; dark
   paper swaps in sky blue to keep 3:1. */
.realized-strategy {
  --rs-blue: #0072b2;
  --rs-grey: #8a939c;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

:root[data-theme="dark"] .realized-strategy {
  --rs-blue: #56b4e9;
  --rs-grey: #7d8994;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .realized-strategy {
    --rs-blue: #56b4e9;
    --rs-grey: #7d8994;
  }
}

.realized-strategy [data-strategy="differentiation"] {
  --rs: var(--rs-blue);
}

.realized-strategy [data-strategy="cost_leadership"] {
  --rs: #e69f00;
}

.realized-strategy [data-strategy="value_innovation"] {
  --rs: #009e73;
}

.realized-strategy [data-strategy="stuck"] {
  --rs: #d55e00;
}

.realized-strategy [data-strategy="unclear"] {
  --rs: var(--rs-grey);
}

.realized-strategy-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.realized-strategy-header p {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.realized-strategy-eyebrow {
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.realized-strategy-label {
  margin: 0;
  font-size: var(--font-size-signal);
}

.realized-strategy-tone {
  padding: 2px var(--space-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  color: var(--muted);
  background: var(--paper-3);
}

.realized-strategy-tone-strong {
  color: var(--teal-ink);
  background: var(--teal-soft);
  border-color: var(--teal-line);
}

.realized-strategy-tone-stuck {
  color: var(--amber-ink);
  background: var(--amber-soft);
  border-color: var(--amber-line);
}

.realized-strategy-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-5);
}

.realized-strategy-figure {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  margin: 0;
}

.realized-strategy-donut {
  width: min(100%, 220px);
}

.realized-strategy-fill {
  fill: var(--rs);
}

.realized-strategy-segment,
.realized-strategy-hatch-line {
  stroke: var(--paper);
  stroke-width: 2;
}

.realized-strategy-track {
  fill: none;
  stroke: var(--paper-3);
  stroke-width: 30;
}

.realized-strategy-donut text {
  fill: currentColor;
}

.realized-strategy-center-value {
  font-size: var(--font-size-chart-value);
  font-weight: var(--weight-strong);
}

.realized-strategy-center-caption {
  font-size: var(--step--1);
}

.realized-strategy-legend {
  display: grid;
  width: min(100%, 280px);
  padding: 0;
  list-style: none;
}

.realized-strategy-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.realized-strategy-legend-value {
  margin-left: auto;
  font-weight: var(--weight-strong);
}

.realized-strategy-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-strong);
  background: var(--rs);
}

.realized-strategy [data-strategy="unclear"] .realized-strategy-swatch {
  background: repeating-linear-gradient(
    45deg,
    var(--rs) 0 3px,
    var(--paper) 3px 4px
  );
}

.realized-strategy-explainer {
  display: grid;
  gap: var(--space-3);
  max-width: 62ch;
}

.realized-strategy-explainer p {
  margin: 0;
}

.realized-strategy-nudge {
  padding-left: var(--space-3);
  border-left: 3px solid var(--line-strong);
}

.realized-strategy-table {
  margin-top: var(--space-2);
  border-collapse: collapse;
}

.realized-strategy-table th,
.realized-strategy-table td {
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--line);
}

.realized-strategy-table td {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.realized-strategy-table th,
.realized-strategy-table caption {
  text-align: left;
}

@media (forced-colors: active) {
  /* The hues are the data, as on the market map, so they are kept. */
  .realized-strategy-donut,
  .realized-strategy-swatch {
    forced-color-adjust: none;
  }

  .realized-strategy-segment {
    stroke: Canvas;
  }
}

/* Page-scoped Unit and Scholar panels: the figure stays inside its own art
   well, so neither flight nor speech can overlap classroom text. */
.companion-card[data-page-companion-hidden] {
  display: none;
}
.companion-call-button {
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--line, #cbd3dc);
  border-radius: 999px;
  color: var(--ink, #17212b);
  background: var(--surface, #fff);
  font: inherit;
  font-size: var(--step--1);
}
.companion-page-panel {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0.7rem 1rem;
  align-items: center;
  width: min(100%, 38rem);
  min-height: 7.3rem;
  margin: 0.5rem 0 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line, #cbd3dc);
  border-radius: 1rem;
  background: var(--surface, #fff);
  color: var(--ink, #17212b);
  box-shadow: 0 6px 20px rgb(20 35 50 / 8%);
}
.companion-page-heading {
  display: contents;
}
.companion-page-heading h2 {
  align-self: end;
  margin: 0;
  font-size: var(--step--1);
}
.companion-page-dismiss {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--step-2);
  line-height: 1;
}
.companion-page-art {
  position: relative;
  grid-row: 1 / span 2;
  width: 4.25rem;
  height: 4.5rem;
  overflow: visible;
  transform-origin: 50% 80%;
}
.companion-page-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/*
 * The Envoy is a compact matte ceramic/graphite SVG, with compositor-only
 * motion in its art well so it never crosses into the tip or controls.
 */
.scholar-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  border: 0;
  background: transparent;
}
.scholar-stage .companion-scholar-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: companion-scholar-glide 16s ease-in-out 1 forwards;
  transform-origin: 50% 55%;
  will-change: transform;
}
.companion-scholar-hover {
  animation: companion-scholar-hover 4.2s cubic-bezier(0.37, 0, 0.63, 1) 2
    alternate forwards;
  transform-box: view-box;
  transform-origin: 60px 75px;
}
.companion-scholar-halo-under {
  animation: companion-scholar-ring 8s linear 1;
  transform-box: view-box;
  transform-origin: 60px 128px;
}
.companion-scholar-shadow {
  animation: companion-scholar-shadow 4.2s ease-in-out 2 alternate;
  transform-box: view-box;
  transform-origin: 60px 148px;
}
.companion-scholar-arm {
  animation: companion-scholar-arm 4.2s ease-in-out 2 alternate forwards;
  transform-box: view-box;
  transform-origin: 60px 74px;
}
.companion-scholar-arm-right {
  animation-delay: -2.1s;
}
.companion-scholar-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: companion-scholar-blink 6.2s ease-in-out 1;
}
.companion-scholar-eyes {
  animation: companion-scholar-glance 9.4s ease-in-out 1;
  transform-box: view-box;
  transform-origin: 60px 29.5px;
}
.companion-scholar-ticker {
  animation: companion-scholar-ticker 2.8s linear 2 alternate;
}
.companion-scholar-visor,
.companion-scholar-chest-light {
  animation: companion-scholar-breathe 3.6s ease-in-out 2 alternate forwards;
}
.companion-scholar-lens {
  opacity: 0;
  animation: companion-scholar-read 18s ease-in-out 1 forwards;
}
.companion-scholar-lens-line {
  animation: companion-scholar-scan 3.6s linear 2 alternate;
}
.companion-scholar-called-halo {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 60px 3px;
}
.companion-scholar-svg[data-scholar-called="true"]
  .companion-scholar-called-halo {
  animation: companion-scholar-call-ring 1.55s cubic-bezier(0.2, 0.7, 0.15, 1)
    both;
}
.companion-scholar-svg[data-scholar-called="true"] .companion-scholar-visor {
  animation: companion-scholar-call-light 1.1s ease-out both;
}
.companion-scholar-svg[data-scholar-called="true"] .companion-scholar-lens {
  opacity: 0;
  animation: none;
}
.companion-scholar-arriving {
  animation: companion-scholar-arrive 760ms cubic-bezier(0.2, 0.7, 0.15, 1) both;
}
@keyframes companion-scholar-arrive {
  from {
    transform: translate(0.75rem, 0.5rem) scale(0.94);
    opacity: 0.25;
  }
  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
/*
 * Two perch points inside the art well: the drawn Envoy is ~27px wide in the
 * 68px well, so a 10px glide each way keeps it inside the well and clear of
 * the 1rem gutter to the tip (review M2, N2). It rests at each perch.
 */
@keyframes companion-scholar-glide {
  0%,
  18%,
  100% {
    transform: translateX(-10px);
  }
  50%,
  68% {
    transform: translateX(10px);
  }
}
@keyframes companion-scholar-hover {
  from {
    transform: translateY(1px);
  }
  to {
    transform: translateY(-1.5px);
  }
}
@keyframes companion-scholar-ring {
  to {
    transform: rotate(360deg);
  }
}
@keyframes companion-scholar-shadow {
  to {
    transform: scale(0.9);
    opacity: 0.55;
  }
}
@keyframes companion-scholar-arm {
  from {
    translate: 0 0.5px;
  }
  to {
    translate: 0 -1px;
  }
}
@keyframes companion-scholar-blink {
  0%,
  94%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.12);
  }
}
@keyframes companion-scholar-glance {
  0%,
  24%,
  100% {
    transform: translateX(0);
  }
  30%,
  36% {
    transform: translateX(1.8px);
  }
  72%,
  78% {
    transform: translateX(-1.2px);
  }
}
@keyframes companion-scholar-ticker {
  to {
    transform: translateX(-7px);
  }
}
@keyframes companion-scholar-read {
  0%,
  64%,
  100% {
    opacity: 0;
    transform: translateY(2px);
  }
  69%,
  92% {
    opacity: 0.82;
    transform: translateY(0);
  }
}
@keyframes companion-scholar-scan {
  to {
    transform: translateY(2px);
    opacity: 0.35;
  }
}
@keyframes companion-scholar-call-ring {
  0% {
    opacity: 0;
    transform: rotate(-140deg) scale(0.38);
  }
  20% {
    opacity: 1;
    transform: rotate(0deg) scale(1.08);
  }
  100% {
    opacity: 0.72;
    transform: rotate(360deg) scale(1);
  }
}
@keyframes companion-scholar-breathe {
  from {
    opacity: 0.82;
  }
  to {
    opacity: 1;
  }
}
@keyframes companion-scholar-call-light {
  0%,
  100% {
    opacity: 1;
  }
  60% {
    opacity: 0.72;
  }
}
.scholar-stage[data-visibility="hidden"] .companion-scholar-svg,
.companion-page-panel[data-motion="calm"] .companion-scholar-svg,
.companion-page-panel[data-motion="calm"] .companion-scholar-svg * {
  animation-play-state: paused !important;
}
.companion-page-panel[data-motion="calm"]
  .companion-scholar-svg
  .companion-scholar-called-halo {
  opacity: 0;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .companion-scholar-svg,
  .companion-scholar-svg * {
    animation: none !important;
    will-change: auto;
  }
}
@media (max-width: 560px) {
  .scholar-stage .companion-scholar-svg {
    max-width: 3.8rem;
  }
}
.companion-page-body {
  grid-column: 2 / -1;
  min-width: 0;
}
.companion-page-tip {
  margin: 0 0 0.45rem;
  line-height: 1.4;
}
.companion-page-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.companion-page-controls button {
  min-height: 1.9rem;
  border: 1px solid var(--line, #cbd3dc);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  color: inherit;
  background: var(--surface, #fff);
  font: inherit;
  font-size: var(--step--1);
}
.companion-motion-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
}
.companion-motion-label input {
  width: 6.5rem;
}
/*
 * The Unit is a real painted SVG rig (`unitFigure.js`), not a CSS-drawn
 * capsule: its shape lives in SVG markup, not here. What is left here is
 * motion, and each node has exactly one transform owner (review S4): the
 * Unit's Wander is driven by the Web Animations API in `unitCanvas.js`
 * (`art.fly`) when it is available, and by the `companion-unit-arriving`
 * keyframe below only in the fallback branch where it is not (that branch
 * never runs alongside a WAAPI animation on the same node). The Scholar's
 * Envoy (`.scholar-stage` above) is CSS-animated and paused by the same
 * Calm, hidden and reduced-motion rules.
 */
/* The flame group carries its nozzle placement as an SVG transform attribute;
 * a CSS transform on it would replace that placement, so only the inner body
 * is animated, scaling from its own top edge. */
/* The rig's edges were drawn for a white panel; on the dark paper and glass
 * they are relit so the silhouette clears 3:1 (tests/visual-hierarchy-453).
 * The light theme keeps the approved hex through each var() fallback. */
:root[data-theme="dark"] .companion-unit-flight {
  --unit-outline: #9aa6b2;
  --unit-pack-edge: #7f8b97;
  --unit-rubber-edge: #7f8b97;
  --unit-nozzle-edge: #7f8b97;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .companion-unit-flight {
    --unit-outline: #9aa6b2;
    --unit-pack-edge: #7f8b97;
    --unit-rubber-edge: #7f8b97;
    --unit-nozzle-edge: #7f8b97;
  }
}
/* The owner-kept Unit jetpack keeps its flame burning while it flies: its
   pace is the student's own motion level, and Calm and reduced motion both
   stop it. */
.companion-unit-flight .flame .flame-body {
  animation: companion-unit-thrust 360ms ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center top;
}
.companion-unit-flight[data-motion-level="gentle"] .flame .flame-body {
  animation-duration: 6s;
}
.companion-unit-flight[data-motion-level="steady"] .flame .flame-body {
  animation-duration: 3.4s;
}
.companion-unit-flight[data-motion-level="lively"] .flame .flame-body {
  animation-duration: 2.2s;
}
.companion-unit-arriving {
  animation: companion-unit-arrive 900ms cubic-bezier(0.2, 0.7, 0.15, 1) both;
}
.companion-page-panel[data-motion="calm"] .companion-page-art,
.companion-page-panel[data-motion="calm"] .flame .flame-body {
  animation: none !important;
}
@keyframes companion-unit-arrive {
  from {
    transform: translate(1.5rem, 1rem) rotate(14deg);
    opacity: 0.25;
  }
  to {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
}
@keyframes companion-unit-thrust {
  to {
    transform: scaleY(1.2);
  }
}
@media (max-width: 560px) {
  .companion-page-panel {
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: 0.5rem 0.6rem;
    padding: 0.55rem;
  }
  .companion-page-art {
    transform: scale(0.88);
    transform-origin: 50% 50%;
  }
  .companion-page-controls {
    gap: 0.35rem;
  }
  .companion-motion-label input {
    width: 4.5rem;
  }
  .companion-call-button {
    font-size: var(--step--1);
    padding-inline: 0.45rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .companion-page-art,
  .companion-unit-arriving,
  .flame .flame-body {
    animation: none !important;
  }
}
.decision-history-panel {
  display: grid;
  gap: 0.75rem;
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 0.75rem;
  background: var(--surface-raised, #fff);
}

.decision-history-heading,
.decision-history-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.decision-history-heading h3 {
  margin: 0;
}

.decision-history-panel select {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.decision-history-scroll {
  max-width: 100%;
  overflow: auto;
}

.decision-history-scroll table {
  width: 100%;
  border-collapse: collapse;
}

.decision-history-scroll th,
.decision-history-scroll td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--line, #cbd5e1);
  text-align: left;
  vertical-align: top;
}

.decision-history-open {
  margin-inline-start: 0.5rem;
  font-size: var(--step--1);
}

@media (max-width: 640px) {
  .decision-history-panel {
    padding: 0.75rem;
  }

  .decision-history-pagination {
    flex-wrap: wrap;
  }
}

/* Docs guide (P104.1233): layout consumes the existing content model. */
:root {
  --guide-body: 1.0625rem;
  --guide-title: clamp(1.9rem, 4cqi, 2.6rem);
  --guide-lead: 1.15rem;
  --guide-subheading: 1.1rem;
  --guide-callout-body: 0.97rem;
  --guide-section-size: 1.55rem;
  --guide-leading: 1.65;
  --guide-measure: calc(var(--guide-body) * 35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --guide-see: #c7b5ff;
    --guide-see-soft: #251d40;
    --guide-see-line: #7258a3;
  }
}
.guide-view { container: guide / inline-size; }
.guide-docs {
  display: grid;
  min-block-size: 100dvh;
  grid-template-columns: 272px minmax(0, 1fr) 216px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.guide-docs > * { min-inline-size: 0; }
.guide-docs .guide-document {
  display: block;
  min-inline-size: 0;
  padding: 24px 32px 64px;
  font-size: var(--guide-body);
  line-height: var(--guide-leading);
}
.guide-docs [hidden] { display: none !important; }
.guide-docs .guide-section > :is(p, ul, ol, dl, div, aside),
.guide-docs .guide-step-path { max-inline-size: var(--guide-measure); }
.guide-docs .guide-section > :is(.guide-lifecycle, .guide-decisions-block, .guide-table-scroll) { max-inline-size: 52em; }
.guide-docs .guide-section { font-size: var(--guide-body); line-height: var(--guide-leading); }
.guide-docs .guide-section p { font-size: inherit; line-height: inherit; }
.guide-docs .guide-section .guide-step-why { font-size: var(--step--1); }
.guide-docs .guide-section-depth-1 > h2 {
  font-family: var(--font-display);
  font-size: var(--guide-title);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 12px 0 24px;
}
.guide-docs .guide-section h3 {
  font-family: var(--font-display);
  font-size: var(--guide-section-size);
  line-height: 1.2;
  margin-block: 28px 16px;
}
.guide-breadcrumbs, .guide-page-meta { color: var(--muted); font-size: var(--step--1); }
.guide-docs .guide-section-depth-1 > p:first-of-type { font-size: var(--guide-lead); color: var(--ink-soft); }
.guide-nav-home, .guide-rail {
  position: sticky;
  top: calc(var(--topbar-height, 174px) + 16px);
  max-block-size: calc(100dvh - var(--topbar-height, 174px) - 32px);
  overflow: auto;
  padding: 16px;
  font-size: var(--step--1);
}
.guide-nav-home { border-inline-end: 1px solid var(--line); }
.guide-sidenav { font-size: var(--step--1); }
.guide-docs .guide-switch { display: flex; width: 100%; margin-bottom: 12px; }
.guide-docs .guide-switch-option { flex: 1; min-block-size: 44px; padding: 6px; }
.guide-search-label { display: block; margin-bottom: 16px; }
.guide-docs input[type="search"], .guide-dialog input[type="search"] {
  inline-size: 100%; min-block-size: 44px; background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 12px;
}
.guide-nav-group > summary {
  cursor: pointer; min-block-size: 44px; align-content: center;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted);
}
.guide-docs .guide-toc-summary { display: none; }
.guide-docs .guide-toc-collapse { display: contents; }
.guide-docs .guide-toc a {
  display: flex; gap: 8px; align-items: center; min-block-size: 44px;
  padding: 6px 8px; border-inline-start: 2px solid transparent; border-radius: 7px; color: var(--ink-soft);
}
.guide-nav-title { flex: 1; }
.guide-nav-minutes { color: var(--muted); white-space: nowrap; font-size: var(--step--2); }
.guide-docs .guide-toc a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent-dark); border-inline-start-color: var(--accent); font-weight: 600;
}
.guide-docs .guide-nav-pinned a[aria-current="page"] { background: var(--teal-soft); color: var(--teal-ink); border-inline-start-color: var(--teal); }
.guide-nav-pinned > a::before { content: "▷"; color: var(--teal); }
.guide-docs .guide-nav-children a { padding-inline-start: 20px; font-size: var(--step--2); }
.guide-docs mark { color: inherit; background: var(--amber-soft); }
.guide-rail-title { text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; }
.guide-heading-list ul { list-style: none; padding: 0; }
.guide-heading-list a { display: block; min-block-size: 44px; padding: 8px 10px; color: var(--muted); border-inline-start: 2px solid var(--line); text-decoration: none; }
.guide-heading-list a[aria-current] { color: var(--accent-dark); border-color: var(--accent); font-weight: 600; }
.guide-rail-actions { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.guide-rail-actions button { min-block-size: 44px; text-align: start; color: var(--ink-soft); background: none; border: none; cursor: pointer; }
.guide-heading-anchor::before { content: "#"; }
.guide-docs :is(h2, h3, h4):has(> .guide-heading-anchor) { position: relative; padding-inline-end: 1.2em; }
.guide-heading-anchor { position: absolute; inset-block-start: 0; inset-inline-end: 0; opacity: 0; border: none; background: transparent; color: var(--accent); cursor: pointer; font: inherit; }
:is(h2, h3, h4, [data-guide-anchor]):hover > .guide-heading-anchor, .guide-heading-anchor:focus-visible { opacity: 1; }
.guide-docs .landed { border-radius: 6px; animation: guide-land 2.4s ease-out; }
@keyframes guide-land { from { background: var(--accent-soft); } to { background: transparent; } }
.guide-onpage-inline, .guide-bottom-bar { display: none; }
.guide-page-turn { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; border-top: 1px solid var(--line); padding-top: 16px; font-size: var(--step--1); }
.guide-page-turn a { flex: 1; min-block-size: 44px; }
.guide-docs .guide-callout {
  --guide-tone: var(--info); --guide-tint: var(--info-soft);
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px;
  border: 1px solid var(--guide-tone); border-inline-start-width: 4px;
  background: var(--guide-tint); border-radius: 10px; box-shadow: none;
  padding: 14px 16px; font-size: var(--guide-callout-body); line-height: 1.6;
}
.guide-docs .guide-callout > :not(.guide-callout-icon) { grid-column: 2; margin-block: 0; }
.guide-docs .guide-callout > .guide-callout-icon {
  grid-column: 1; grid-row: 1 / span 2; inline-size: 28px; block-size: 28px;
  display: grid; place-items: center; border-radius: 8px; color: var(--guide-tone);
  background: var(--paper); font-size: var(--step-1);
}
.guide-docs .guide-callout-label { color: var(--guide-tone); font-size: var(--step--2); }
.guide-docs .guide-callout-tip { --guide-tone: var(--teal); --guide-tint: var(--teal-soft); }
.guide-docs .guide-callout-warning { --guide-tone: var(--amber); --guide-tint: var(--amber-soft); }
.guide-docs .guide-callout-honesty { --guide-tone: var(--muted); --guide-tint: var(--paper-2); border-style: dashed; border-inline-start-style: solid; }
.guide-docs .guide-callout-button { --guide-tone: var(--accent); --guide-tint: var(--accent-soft); }
.guide-docs .guide-callout-students-see { --guide-tone: var(--guide-see); --guide-tint: var(--guide-see-soft); border-color: var(--guide-see-line); border-inline-start-color: var(--guide-see); }
.guide-button-label { display: inline-block; border: 1px solid var(--accent); border-radius: 999px; background: var(--paper); color: var(--accent); padding: 4px 12px; font-weight: 600; }
.guide-docs .guide-steps, .guide-docs .guide-lifecycle { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.guide-docs :is(.guide-step, .guide-lifecycle-step) { position: relative; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 16px; }
.guide-docs .guide-step { padding-inline-start: 64px; }
.guide-step > .guide-step-number { position: absolute; inset-inline-start: 16px; top: 16px; }
.guide-step-number { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; color: var(--accent-dark); background: var(--accent-soft); font-weight: 700; flex-shrink: 0; }
.guide-step-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.guide-step-duration { font-size: var(--step--2); color: var(--muted); border: 1px solid var(--line); background: var(--paper-2); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.guide-step-why { color: var(--muted); font-size: var(--step--1); }
.guide-step-why strong { display: block; color: var(--ink); }
.guide-step-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.guide-step-actions label { display: flex; gap: 8px; min-block-size: 44px; align-items: center; cursor: pointer; }
.guide-step-actions input { inline-size: 18px; block-size: 18px; }
.guide-docs .guide-step-done { border-color: var(--teal); background: var(--teal-soft); }
.guide-step-done .guide-step-number { color: var(--teal-ink); background: var(--paper); }
.guide-progress { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--muted); font-size: var(--step--1); }
.guide-progress progress { max-inline-size: 16rem; inline-size: 45%; accent-color: var(--teal); }
.guide-docs .guide-section .guide-lifecycle-step-name { display: flex; gap: 12px; align-items: center; margin-top: 0; font-family: var(--font-body); font-size: var(--guide-subheading); }
.guide-lifecycle-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide-formula-icon::before { content: "ƒ"; }
.guide-formula-icon { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; background: var(--accent-soft); color: var(--accent-dark); border-radius: 8px; margin-right: 10px; font-family: var(--font-display); font-style: italic; }
.guide-docs .guide-formula { box-shadow: none; }
.guide-docs [data-guide-document="instructor"] .guide-table-scroll :is(th, td):first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--paper); }
.guide-docs [data-guide-document="instructor"] .guide-table-scroll th:first-child { background: var(--paper-2); }
.guide-formula-example > summary { cursor: pointer; min-block-size: 44px; align-content: center; font-weight: 600; }
.guide-term { padding: 0; border: none; border-bottom: 1px dotted currentColor; background: none; color: var(--accent-dark); font: inherit; cursor: pointer; }
.guide-dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px; max-block-size: 78dvh; inline-size: min(540px, calc(100vw - 32px)); }
.guide-dialog::backdrop { background: rgb(8 14 20 / 45%); }
.guide-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.guide-dialog-body { overflow: auto; }
.guide-dialog .guide-sidenav { display: block; position: static; max-block-size: none; border: none; padding: 0; }
.guide-glossary-drawer { margin: 16px 16px 16px auto; max-block-size: calc(100dvh - 32px); block-size: calc(100dvh - 32px); }
.guide-glossary-entry { border-bottom: 1px solid var(--line); padding-block: 16px; }
.guide-glossary-entry h3 { margin-top: 0; }
@container guide (max-width: 1120px) {
  .guide-docs { grid-template-columns: 248px minmax(0, 1fr); }
  .guide-rail { display: none; }
  .guide-onpage-inline { display: block; font-size: var(--step--1); }
  .guide-onpage-inline > summary { min-block-size: 44px; cursor: pointer; align-content: center; }
  .guide-docs .guide-document { padding-inline: 24px; }
}
@container guide (max-width: 720px) {
  .guide-docs { display: block; }
  .guide-nav-home { display: none; }
  .guide-docs .guide-document { padding: 18px 16px 120px; }
  .guide-onpage-inline { display: none; }
  .guide-bottom-bar { display: flex; position: fixed; bottom: 12px; left: 16px; right: 16px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); z-index: 80; }
  .guide-bottom-bar button { flex: 1; min-block-size: 48px; border: none; border-radius: 10px; color: var(--ink-soft); background: none; cursor: pointer; font-size: var(--step--1); }
  .guide-bottom-bar button[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-dark); }
  .guide-nav-sheet, .guide-glossary-drawer { margin: auto 0 0; inline-size: 100%; max-inline-size: 100%; max-block-size: 78dvh; border-radius: 20px 20px 0 0; block-size: auto; }
  .guide-nav-sheet::before { content: ""; display: block; inline-size: 40px; block-size: 4px; border-radius: 4px; background: var(--muted); margin: 0 auto 12px; }
  .guide-lifecycle-pair { grid-template-columns: 1fr; }
  .guide-docs .guide-step { padding: 16px; padding-top: 60px; }
  .guide-docs .guide-decision-table :is(thead) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .guide-docs .guide-decision-table :is(tbody, tr, td) { display: block; inline-size: 100%; }
  .guide-docs .guide-decision-table tr { border: 1px solid var(--line); border-radius: 10px; margin-block: 12px; }
  .guide-docs .guide-decision-table td { border: none; overflow-wrap: anywhere; }
  .guide-docs .guide-decision-table td::before { content: attr(data-l); display: block; font-weight: 700; color: var(--muted); font-size: var(--step--2); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-docs .landed { animation: none; background: var(--accent-soft); }
  .guide-print-button:hover { transform: none; }
}
@media print {
  body:has([data-guide-document]) :is(.guide-nav-home, .guide-rail, .guide-bottom-bar, .guide-dialog, .guide-onpage-inline, .guide-page-turn, .guide-heading-anchor, .guide-step-actions, .guide-progress, [data-guide-tools]) { display: none; }
  body:has([data-guide-document]) .guide-docs { display: block; border: none; }
  body:has([data-guide-document]) .guide-docs .guide-document { padding: 0; }
  body:has([data-guide-document]) .guide-docs .guide-callout { background: #fff; color: #000; border-color: #000; }
  body:has([data-guide-document]) .guide-docs .guide-callout-label { color: #000; }
  body:has([data-guide-document]) .guide-breadcrumbs::before { content: "Open in the app: Guide › "; }
}
/* P104.1232: button-system first slice and approved Direction A. */
.sd-button {
  --h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--h);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: var(--weight-label);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    box-shadow var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out);
}
.sd-button svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.sd-button.primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 var(--primary-highlight),
    0 1px 2px rgb(16 24 32 / 20%);
}
.sd-button.primary:hover:not(:disabled, [aria-disabled="true"]),
.sd-button.primary.is-hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.sd-button.secondary {
  color: var(--ink);
  background: var(--glass-surface-strong);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgb(16 24 32 / 8%);
}
.sd-button.secondary:hover:not(:disabled, [aria-disabled="true"]),
.sd-button.secondary.is-hover {
  background: var(--paper-2);
  border-color: var(--ink);
}
.sd-text {
  padding-inline: 6px;
  color: var(--accent);
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.sd-text:hover:not(:disabled, [aria-disabled="true"]),
.sd-text.is-hover {
  text-decoration-color: currentColor;
  background: var(--accent-soft);
}
.sd-text.sd-danger {
  color: var(--danger);
  text-decoration-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.sd-text.sd-danger:hover:not(:disabled),
.sd-text.sd-danger.is-hover {
  background: var(--danger-soft);
  text-decoration-color: currentColor;
}
.sd-destructive {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-line);
}
.sd-destructive:hover:not(:disabled, [aria-disabled="true"]),
.sd-destructive.is-hover {
  border-color: var(--danger);
}
.sd-danger-solid {
  color: var(--on-fill);
  background: var(--danger);
  border-color: var(--danger);
}
.sd-danger-solid:hover:not(:disabled, [aria-disabled="true"]),
.sd-danger-solid.is-hover {
  background: color-mix(in srgb, var(--danger) 85%, var(--ink));
}
.sd-button:disabled,
.sd-button[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--paper-3);
  border-color: var(--line);
  box-shadow: none;
  text-decoration: none;
}
.sd-text:disabled,
.sd-text[aria-disabled="true"] {
  background: transparent;
  border-color: transparent;
}
.sd-icon {
  width: 44px;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}
.sd-icon:hover:not(:disabled),
.sd-icon.is-hover {
  background: var(--paper-2);
  border-color: var(--line-strong);
}
.sd-icon.round {
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-weight: 700;
}
.sd-icon.sd-ghost {
  border-color: transparent;
  background: transparent;
}
.sd-icon.sd-ghost:hover {
  background: var(--paper-2);
}
.sd-button.is-focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--paper);
}
/* Chip / toggle: 32px visual pill inside a 44px hit area (::before). */
.sd-toggle {
  --h: 32px;
  min-height: 32px;
  margin-block: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line-strong);
  font-size: var(--step--1);
}
.sd-toggle::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}
.sd-toggle:hover:not(:disabled),
.sd-toggle.is-hover {
  background: var(--paper-2);
}
.sd-toggle[aria-pressed="true"],
.sd-toggle[aria-checked="true"],
.sd-toggle[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.sd-toggle[aria-pressed="true"]::after,
.sd-toggle[aria-checked="true"]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  order: -1;
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.btn-group.end {
  justify-content: flex-end;
}

/* ───────── Status chips (display only, not buttons) ───────── */
.schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  line-height: 1.3;
  color: var(--muted);
  background: var(--paper-2);
  white-space: normal;
}
.schedule-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.schedule-chip.scheduled {
  color: var(--teal-ink);
  background: var(--teal-soft);
  border-color: var(--teal-line);
}
.schedule-chip.open {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.schedule-chip.auto {
  color: var(--info);
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
}
.schedule-chip.unsaved {
  color: var(--amber-ink);
  background: var(--amber-soft);
  border-color: var(--amber-line);
  border-style: dashed;
}
.schedule-chip.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-line);
}
.schedule-chip.played {
  color: var(--muted);
  background: var(--paper-3);
}
.schedule-chip.none::before {
  background: transparent;
  border: 1.5px solid currentColor;
}

.schedule-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 20px;
}
.schedule-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.schedule-page-head h2 {
  font-size: var(--text-page);
  font-weight: var(--weight-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.schedule-page-sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--step-0);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}
.schedule-page-sub strong {
  color: var(--ink);
  font-weight: 600;
}
.schedule-page-sub .sd-text {
  min-height: 44px;
  padding: 2px 6px;
  font-size: var(--step-0);
}
.schedule-explainer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: var(--step-0);
}
.schedule-explainer svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--info);
  margin-top: 1px;
}
.schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.schedule-toolbar .count {
  font-size: var(--step-0);
  color: var(--muted);
}
.schedule-toolbar .count strong {
  color: var(--ink);
}
.schedule-reason {
  font-size: var(--step--1);
  color: var(--muted);
}
.schedule-toolbar-reason {
  text-align: right;
  margin-top: 2px;
}

/* Banners */
.schedule-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: var(--step-0);
}
.schedule-banner p {
  flex: 1 1 260px;
}
.schedule-banner.sd-danger {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--ink);
}
.schedule-banner.sd-danger strong {
  color: var(--danger);
}
.schedule-banner.success {
  background: var(--teal-soft);
  border-color: var(--teal-line);
}

/* ───────── Direction A: round rows ───────── */
.schedule-rows {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.schedule-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: border-color var(--dur-state) var(--ease-out);
}
.schedule-row.is-current {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.schedule-row.is-editing {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    var(--shadow);
}
.schedule-row.is-unsaved {
  border-color: var(--amber-line);
}
.schedule-row.is-error {
  border-color: var(--danger-line);
}
.schedule-row.is-played {
  background: var(--paper-2);
  box-shadow: none;
}
.schedule-row-main {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
}
.schedule-row-id h3 {
  font-size: var(--text-group);
  font-weight: 700;
  line-height: 1.3;
}
.schedule-row-id .schedule-round-kind {
  font-size: var(--step--1);
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}
.schedule-row-id .now {
  color: var(--accent);
  font-weight: 700;
}
.schedule-row-status {
  display: grid;
  gap: 4px;
  min-width: 0;
  justify-items: start;
}
.schedule-row-status .schedule-row-meta {
  font-size: var(--step--1);
  color: var(--muted);
}
.schedule-row-status .err {
  font-size: var(--step--1);
  color: var(--danger);
  font-weight: 600;
}
.schedule-row-actions {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.schedule-played-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 4px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  color: var(--muted);
  font-size: var(--step-0);
}

/* Editor */
.schedule-editor {
  border-top: 1px solid var(--line);
  padding: 18px;
  display: grid;
  gap: 18px;
}
.schedule-picker {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.schedule-editor-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.schedule-summary {
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.schedule-summary strong {
  color: var(--ink);
}
.schedule-field-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: none;
}
.schedule-inline-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--step-0);
  font-weight: 600;
}

/* Calendar picker */
.schedule-calendar {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px;
  background: var(--paper);
}
.schedule-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.schedule-calendar-head h4 {
  font-size: var(--step-1);
  font-weight: 700;
}
.schedule-calendar-head .schedule-calendar-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.schedule-calendar table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.schedule-calendar th {
  padding: 6px 0;
  font-size: var(--step--1);
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}
.schedule-calendar td {
  padding: 1px;
  text-align: center;
}
.schedule-day {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 40px;
  max-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--step-0);
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.schedule-day:hover:not([aria-disabled="true"], [aria-pressed="true"]) {
  background: var(--paper-2);
}
.schedule-day.outside {
  color: var(--muted);
  font-weight: 400;
}
.schedule-day.today {
  border-color: var(--line-strong);
}
.schedule-day[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.schedule-day[aria-disabled="true"] {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent);
}
.schedule-day .schedule-day-dot {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--teal);
}
.schedule-day[aria-pressed="true"] .schedule-day-dot {
  background: var(--on-accent);
}
.schedule-picker-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: var(--step--1);
  color: var(--muted);
}
.schedule-picker-legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 5px;
}

/* Time field */
.schedule-time {
  --font-size-schedule-time: 1.75rem;
  display: grid;
  gap: 14px;
}
.schedule-time-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  width: fit-content;
}
.schedule-time-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.schedule-time-segment {
  width: 2.4ch;
  padding: 6px 2px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: center;
  font-size: var(--font-size-schedule-time);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.schedule-time-segment:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--accent-soft);
  color: var(--accent);
}
.schedule-time-colon {
  font-size: var(--font-size-schedule-time);
  font-weight: 700;
  color: var(--muted);
}
.schedule-period {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
}
.schedule-zone-note {
  font-size: var(--step--1);
  color: var(--muted);
}
.schedule-quick-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

/* Save bar */
.schedule-savebar {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow-pop);
}
.schedule-savebar p {
  flex: 1 1 220px;
  font-size: var(--step-0);
}
.schedule-savebar p strong {
  color: var(--amber-ink);
}

/* Empty state */
.schedule-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 22px 24px;
  margin-bottom: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--paper);
}
.schedule-empty h2 {
  font-size: var(--text-section);
}
.schedule-empty p {
  color: var(--ink-soft);
  font-size: var(--step-0);
  max-width: 60ch;
}

.schedule-timeline {
  display: grid;
  gap: 16px;
  min-width: 0;
  color: var(--ink);
}
.schedule-timeline h2,
.schedule-timeline h3,
.schedule-timeline h4,
.schedule-timeline p {
  margin: 0;
}
.schedule-header-main {
  position: relative;
  min-width: 0;
}
.schedule-timeline .help-bubble-button {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-pill);
}
.schedule-page-sub .sd-text {
  min-height: 44px;
}
.schedule-unsaved-count {
  color: var(--amber-ink);
  font-weight: 600;
}
.schedule-row-main {
  grid-template-columns: 148px minmax(0, 1fr) auto;
}
.schedule-calendar table {
  min-width: 308px;
}
.schedule-calendar td {
  padding: 0;
}
.schedule-day {
  width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: none;
  padding: 0;
}
.schedule-day[aria-disabled="true"] {
  color: var(--muted);
}
.schedule-time-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.schedule-time-input > span {
  font-size: var(--font-size-schedule-time);
  font-weight: 700;
  color: var(--muted);
}
.schedule-time-input input {
  min-height: 44px;
}
.schedule-inline-error[hidden] {
  display: none;
}
.schedule-empty {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.schedule-zone-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  display: grid;
  gap: 12px;
  width: min(380px, calc(100vw - 48px));
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.schedule-zone-popover[hidden] {
  display: none;
}
.schedule-zone-popover select {
  width: 100%;
  min-height: 44px;
}
.schedule-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.schedule-dialog::backdrop {
  background: rgb(13 22 32 / 55%);
}
.schedule-dialog-body {
  display: grid;
  gap: 12px;
  padding: 22px 24px 8px;
  font-size: var(--step-0);
}
.schedule-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 12px;
  padding: 14px 24px 20px;
}
.schedule-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--step--1);
}
.schedule-preview li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
}
.schedule-toolbar {
  display: grid;
  gap: 4px;
  align-content: start;
}
.sd-button {
  font-size: var(--step-0);
  font-weight: 600;
}
.sd-button.primary {
  background-image: none;
}
.sd-button.secondary {
  border-color: var(--line-strong);
}
@media (max-width: 900px) {
  .schedule-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .schedule-row-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 14px;
  }
  .schedule-row-actions {
    justify-content: flex-start;
  }
  .schedule-editor {
    padding: 8px;
  }
  .schedule-calendar {
    padding: 0;
    border: 0;
  }
  .schedule-calendar-head {
    flex-wrap: wrap;
  }
  .schedule-toolbar {
    width: 100%;
  }
  .schedule-savebar .button-row {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sd-button,
  .schedule-row {
    transition: none;
  }
}

.schedule-banner.error {
  background: var(--danger-soft);
  border-color: var(--danger-line);
}
.schedule-banner.success {
  background: var(--teal-soft);
  border-color: var(--teal-line);
}
.sd-button.sd-toggle {
  font-size: var(--step--1);
}
.schedule-calendar th,
.schedule-calendar td {
  border: 0;
  background: transparent;
}
.schedule-calendar-head h4 {
  margin: 0;
}
.schedule-row-meta,
.schedule-round-kind {
  font-size: var(--step--1);
  color: var(--muted);
}

/* The deadline acknowledgement shares the first button-system slice. */
.schedule-acknowledgement-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.schedule-acknowledgement-check input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
}
.schedule-acknowledgement {
  display: grid;
  gap: 12px;
}
.sd-confirmation .dialog-actions {
  gap: 12px;
}

/* The new deadline guide subsection follows the same explicit theme ink. */
@media screen {
  .guide-section[aria-labelledby="guide-automatic-deadlines"] {
    color: var(--ink);
  }
}

/* Guide (V7, P104.251): student and instructor in-app guide. */
.guide-view {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  scroll-margin-top: calc(var(--topbar-height, 174px) + var(--space-3, 1rem));
}
.guide-view > * {
  min-inline-size: 0;
}
.workspace-page:has(> .guide-view) {
  scroll-margin-top: calc(var(--topbar-height, 174px) + var(--space-3, 1rem));
}
.guide-print-button {
  justify-self: start;
  border: 1px solid var(--glass-edge-outer, var(--line));
  background: var(--glass-surface, var(--paper));
  color: inherit;
  border-radius: 999px;
  padding: 0.4em 1.1em;
  cursor: pointer;
  transition: transform var(--dur-state) var(--ease-out);
}
.guide-print-button:hover {
  transform: translateY(-1px);
}
.guide-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--glass-edge-outer, var(--line));
  background: var(--glass-surface, var(--paper));
  border-radius: 999px;
  width: fit-content;
}
.guide-switch-option {
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.35em 0.9em;
  cursor: pointer;
}
.guide-switch-option.selected {
  background: var(--accent-soft, var(--line));
  font-weight: var(--weight-strong, 600);
}
.guide-document {
  display: block;
}
.guide-document > h1[tabindex="-1"]:focus {
  outline: none;
}
.guide-document > h1,
.guide-document [id^="guide-"] {
  scroll-margin-top: calc(var(--topbar-height, 174px) + var(--space-3, 1rem));
}
@media (min-width: 1024px) {
  .guide-document {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-5, 2rem);
    align-items: start;
  }
  .guide-document > h1,
  .guide-document > .guide-intent {
    grid-column: 1 / -1;
  }
  .guide-document > .guide-toc {
    grid-column: 1;
    position: sticky;
    top: calc(var(--topbar-height, 174px) + var(--space-3, 1rem));
    align-self: start;
    max-height: calc(
      100vh - var(--topbar-height, 174px) - 2 * var(--space-3, 1rem)
    );
    overflow: auto;
  }
  .guide-document > .guide-toc .guide-toc-summary {
    display: none;
  }
  .guide-document > .guide-toc .guide-toc-collapse {
    display: contents;
  }
  .guide-document > .guide-section {
    grid-column: 2;
  }
}
.guide-toc-summary {
  cursor: pointer;
  font-weight: var(--weight-strong, 600);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
}
.guide-toc-summary::-webkit-details-marker {
  display: none;
}
.guide-toc-summary::after {
  content: "›";
  display: inline-block;
  transition: transform var(--dur-state) var(--ease-out);
}
.guide-toc-collapse[open] > .guide-toc-summary::after {
  transform: rotate(90deg);
}
.guide-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25em;
}
.guide-toc-depth-2 {
  padding-inline-start: 1em;
}
.guide-section > p,
.guide-section > ul,
.guide-section > ol:not(.guide-lifecycle),
.guide-section > .guide-definitions,
.guide-section > .guide-callout,
.guide-section > .guide-tips,
.guide-section > .guide-formula,
.guide-section > .guide-example,
.guide-section > .guide-checklist,
.guide-section > .guide-faq,
.guide-section > .guide-coming {
  max-inline-size: 72ch;
}
.guide-callout,
.guide-formula,
.guide-example,
.guide-tips,
.guide-decisions-block,
.guide-coming {
  background: var(--glass-surface, var(--paper));
  border: 1px solid var(--glass-edge-outer, var(--line));
  box-shadow: var(--glass-inner-light, none), var(--glass-depth, var(--shadow));
  border-radius: 12px;
  padding: var(--space-3, 1rem);
  margin-block: var(--space-3, 1rem);
}
.guide-callout {
  border-inline-start-width: 3px;
}
.guide-callout-tip,
.guide-callout-note,
.guide-callout-honesty {
  border-inline-start-color: var(--line-strong);
}
.guide-callout-warning {
  border-inline-start-color: var(--amber);
}
.guide-callout-label {
  display: block;
  font-weight: var(--weight-strong, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: 0.4em;
}
.guide-formula-lines {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--paper) 92%, var(--line));
  border-radius: 8px;
  padding: 0.75em;
}
.guide-formula-variables {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 0.25em 0.75em;
}
.guide-step,
.guide-lifecycle-step {
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-2, 0.75rem);
}
.guide-lifecycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3, 1rem);
}
@media (min-width: 1024px) {
  .guide-lifecycle {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}
.guide-lifecycle-label {
  color: var(--muted);
  font-weight: 600;
}
.guide-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35em;
}
.guide-checklist li {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
}
.guide-table-scroll {
  overflow-x: auto;
  margin-block: var(--space-3, 1rem);
}
.guide-table-scroll table {
  border-collapse: collapse;
  width: 100%;
}
.guide-table-scroll th,
.guide-table-scroll td {
  border: 1px solid var(--line);
  padding: 0.5em 0.75em;
  text-align: start;
  vertical-align: top;
}
.guide-decision-options {
  color: var(--muted);
  margin: 0.2em 0 0;
}
.guide-coming-chip {
  display: inline-block;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  margin-block-end: 0.5em;
  font-size: var(--step--1, inherit);
}
.guide-faq-item {
  border-block-end: 1px solid var(--line);
  padding-block: 0.5em;
}
.guide-toc a {
  color: var(--muted);
  text-decoration: none;
}
.guide-toc a:hover,
.guide-toc a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}
.guide-definitions dd,
.guide-glossary dd {
  margin-inline-start: 0;
  margin-block-end: var(--space-2);
  line-height: 1.6;
  color: var(--muted);
}
.guide-definitions dt,
.guide-glossary dt {
  font-weight: var(--weight-strong);
  margin-block-start: var(--space-2);
}
@media (forced-colors: active) {
  .guide-callout,
  .guide-formula,
  .guide-example,
  .guide-tips,
  .guide-decisions-block,
  .guide-coming,
  .guide-print-button,
  .guide-switch {
    border: 1px solid CanvasText;
  }
}
@media print {
  body:has([data-guide-document]) {
    background: #fff;
    color: #000;
  }
  body:has([data-guide-document]) .topbar,
  body:has([data-guide-document]) .role-workspace-navigation,
  body:has([data-guide-document]) .workspace-navigation-toggle,
  body:has([data-guide-document]) .companion-card,
  body:has([data-guide-document]) .guide-switch,
  body:has([data-guide-document]) .guide-toc-summary,
  body:has([data-guide-document]) .guide-print-button {
    display: none;
  }
  body:has([data-guide-document]) .guide-toc-collapse {
    display: contents;
  }
  body:has([data-guide-document]) .guide-document {
    display: block;
  }
  body:has([data-guide-document]) .guide-callout,
  body:has([data-guide-document]) .guide-formula,
  body:has([data-guide-document]) .guide-example,
  body:has([data-guide-document]) .guide-tips,
  body:has([data-guide-document]) .guide-decisions-block,
  body:has([data-guide-document]) tr {
    break-inside: avoid;
    box-shadow: none;
    border-color: #000;
  }
  body:has([data-guide-document]) h2 {
    break-before: page;
  }
  body:has([data-guide-document])
    .guide-document
    > .guide-section:first-of-type
    > h2 {
    break-before: auto;
  }
  body:has([data-guide-document]) .guide-table-scroll {
    overflow: visible;
  }
  body:has([data-guide-document]) a[href^="#"]::after {
    content: none;
  }
}

/* density-453: one vertical rhythm for the student decision pages and
   Results. Field spacing sits on the field itself (not on its neighbour) so
   fields that share a grid row stay aligned; help text that follows a field
   pulls back up to it. */
:root {
  --rhythm-label: var(--space-2);
  --rhythm-hint: var(--space-1);
  --rhythm-field: var(--space-4);
  --rhythm-group: var(--space-6);
  --rhythm-line: 1.55;
  /* Help and meta copy keeps the quieter size from the hierarchy pass but
     the same open leading as body copy. */
  --leading-meta: var(--rhythm-line);
}
.form-screen .field {
  gap: var(--rhythm-label);
  margin-block-end: var(--rhythm-field);
}
.form-screen :is(td, th) .field {
  margin-block-end: 0;
}
.form-screen
  .field
  + :is(.field-hint, .field-readout, .field-price-hint, .field-warning, small) {
  margin-block-start: calc(var(--rhythm-hint) - var(--rhythm-field));
}
.form-screen :is(p, small, li, .field-hint, .field-readout),
:is(main[data-report-root], .results-with-strategy-reports) :is(p, li) {
  line-height: var(--rhythm-line);
}
.form-screen :is(h3, h4) {
  margin-block: var(--rhythm-group) var(--rhythm-label);
  line-height: 1.3;
}
.form-screen :is(h3, h4):first-child {
  margin-block-start: 0;
}
.form-screen :is(.alternative-funding-family, .legal-entry-territory) {
  margin-block-start: var(--rhythm-group);
  padding-block-start: var(--rhythm-field);
  border-top: 1px solid var(--line);
}
.decision-group {
  margin-block: var(--rhythm-field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.decision-group > summary {
  min-height: 44px;
  margin-left: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-1);
  list-style-position: outside;
  color: var(--ink);
  cursor: pointer;
}
.decision-group-title {
  font-weight: var(--weight-strong);
}
.decision-group-status {
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: 999px;
  color: var(--ink);
  background: var(--accent-soft);
  font-size: var(--step--1);
}
.decision-group-detail {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.decision-group-body {
  padding: var(--space-2) var(--space-4) var(--space-4);
}
.form-screen :where(section, fieldset):not(:first-child),
.form-screen :where(p, small) + :where(.field, section, fieldset) {
  margin-block-start: var(--rhythm-group);
}
.form-screen :where(p, small) + .field {
  margin-block-start: var(--rhythm-field);
}
@media (max-width: 599px) {
  /* Wordy report tables already scroll sideways; a floor on the column width
     keeps each cell to a few lines instead of one word per line. */
  :is(main[data-report-root], .results-with-strategy-reports)
    .table-scroll
    > table
    :is(th, td) {
    min-width: 7.5rem;
  }
}
/* P104.720: one reading rhythm for the published edition. All data stays in
   the existing renderers; only the report host adopts this card/table grammar. */
.results-report-layout {
  container: published-report / inline-size;
  padding-right: 12rem;
  line-height: var(--leading-meta);
}
.results-report-layout .report-bar {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}
.results-report-layout .report-section-index {
  width: 10rem;
  margin-left: var(--space-5);
  gap: var(--space-2);
  font-size: var(--text-meta);
}
.results-report-layout .report-section {
  margin-bottom: var(--space-6);
  min-width: 0;
}
.results-report-layout .report-section-heading {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}
.results-report-layout .report-section-content,
.results-report-layout
  :is(
    .report-money-content,
    .report-departments-content,
    .report-markets-content,
    .report-conditions-content,
    .report-research-content,
    .report-appendix-content
  ) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
}
.results-report-layout .report-verdict {
  font-size: var(--step-0);
}
.results-report-layout .report-verdict-sentence {
  max-width: 56ch;
  margin: var(--space-2) 0 var(--space-5);
  color: var(--ink);
  font-size: var(--step-3);
  line-height: var(--leading-tight);
}
.results-report-layout .report-verdict-band {
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}
.results-report-layout
  :is(
    .report-driver,
    .report-card,
    .round-report-tile,
    .financial-statement-section,
    .v2-chart-card,
    .v2-metric,
    .market-analysis-metric-card
  ) {
  min-width: 0;
  min-height: 0;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-surface);
  box-shadow: var(--glass-inner-light);
  font-size: var(--step-0);
}
.results-report-layout .report-driver-label {
  font-size: var(--text-meta);
  font-weight: var(--weight-label);
  text-transform: none;
  letter-spacing: normal;
}
.results-report-layout :is(.report-driver-fact, .report-card__secondary) {
  font-size: var(--step-0);
  line-height: var(--leading-meta);
}
.results-report-layout :is(.band, .financial-statements-panel, .round-report) {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
}
/* Owner audit 2026-10-13 (hotfix rel6-ui item 9): strategy-report cards are
   bare .panel with no .panel-body, so their text met the card border. */
.results-report-layout
  :is(
    .strategy-report-vrio,
    .strategy-report-five-forces,
    .strategy-report-pestel,
    .strategy-report.panel
  ) {
  padding: var(--space-4);
}
.results-report-layout :is(.strategy-report-force-list, .swot-quadrants) {
  display: grid;
  gap: var(--space-3);
}
.results-report-layout :is(.strategy-report-force, .swot-quadrant) > * {
  margin-block: 0 var(--space-2);
}
.results-report-layout :is(.strategy-report-force, .swot-quadrant) > :last-child {
  margin-bottom: 0;
}
.results-report-layout :is(.band-head h2, .round-report-header h1) {
  font-size: var(--step-2);
  line-height: var(--leading-tight);
}
.results-report-layout .financial-statement-grid {
  align-items: start;
}
.results-report-layout details.financial-statement-section {
  display: block;
}
.results-report-layout .financial-statement-section > summary {
  cursor: pointer;
}
.results-report-layout .financial-statement-section > summary h5 {
  display: inline;
  margin: 0;
  font-size: var(--text-label);
}
.results-report-layout .financial-statement-section[open] > summary {
  margin-bottom: var(--space-4);
}
.results-report-layout :is(data, .figure, dd) {
  font-variant-numeric: tabular-nums;
}
.results-report-layout .report-what-moved-row {
  display: table-row;
}
.results-report-layout .report-responsive-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
}
.results-report-layout .report-responsive-table :is(th, td) {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
}
.results-report-layout .report-responsive-table thead th {
  color: var(--muted);
  background: var(--paper-2);
  font-size: var(--text-meta);
  font-weight: var(--weight-label);
}
.results-report-layout .report-responsive-table caption {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--text-meta);
  text-align: left;
}
/* Owner 2026-10-13: a report table never splits a word. Each column keeps
   its longest word; a table wider than its column scrolls inside its own
   focusable region, faded at the cut edge while more columns lie beyond.
   !important outranks the per-table wrapping rules written before this. */
.results-report-layout :is(th, td),
.results-report-layout :is(th, td) * {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: manual !important;
}
.results-report-layout .report-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.results-report-layout .report-table-scroll:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.results-report-layout
  .report-table-scroll[data-overflowing="true"]:not(
    [data-scrolled-end="true"]
  ) {
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 32px),
    transparent
  );
}
@media (max-width: 1099px) {
  .results-report-layout {
    padding-right: 0;
  }
  .results-report-layout .report-index-disclosure .report-section-index {
    width: auto;
    margin-left: 0;
  }
}
/* The report can be narrow even on a desktop with workspace navigation.
   Stack cells at the report's width, leaving the table/row/header semantics
   explicitly attached by resultsLayout.js for assistive technology. */
@container published-report (max-width: 44rem) {
  .report-responsive-table,
  .report-responsive-table :is(tbody, tfoot) {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .report-responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .report-responsive-table :is(tbody, tfoot) tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--glass-surface);
  }
  .results-report-layout
    .report-responsive-table
    :is(tbody, tfoot)
    :is(th, td) {
    display: block;
    min-width: 0;
    padding: var(--space-1) 0;
    border: 0;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .report-responsive-table :is(tbody, tfoot) td[data-label]::before {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--muted);
    font-size: var(--text-meta);
    font-weight: var(--weight-label);
    content: attr(data-label);
  }
  .results-report-layout
    .round-report-table-wrap
    .round-report-table
    caption::after {
    content: none;
  }
}
@media print {
  .results-report-layout {
    container-type: normal;
  }
  .results-report-layout .report-responsive-table {
    display: table;
  }
  .results-report-layout
    :is(
      .report-driver,
      .report-card,
      .round-report-tile,
      .financial-statement-section,
      .v2-chart-card,
      .v2-metric,
      .market-analysis-metric-card
    ) {
    background: var(--paper);
    box-shadow: none;
  }
}
.results-report-layout .report-table-disclosure {
  min-width: 0;
  max-width: 100%;
}
.results-report-layout .report-table-disclosure > summary {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--text-group);
  font-weight: var(--weight-label);
  cursor: pointer;
}
.results-report-layout .report-table-disclosure[open] > summary {
  margin-bottom: var(--space-3);
}
/* Native details uses an anonymous content box. An inline-size-contained
   table wrap inside a grid details can shrink that box to zero width. */
.results-report-layout details.round-report-section {
  display: block;
}
.results-report-layout details.round-report-section > :not(summary) {
  margin-top: var(--space-4);
}
.results-report-layout .round-report-table-wrap {
  width: 100%;
  min-width: 0;
}
@media print {
  .results-report-layout .report-table-disclosure > .report-responsive-table {
    display: table !important;
  }
}
/* Auto inline margins let a grid item use its min-content width. The report
   contains inline-size containers, so that intrinsic width can be zero. */
.results-report-layout .round-report {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* The round debrief uses the existing semantic tokens. Paid report selectors
   are deliberately absent. Direction glyphs and words accompany every state. */
.basic-round-report,
.private-round-debrief {
  color: var(--ink);
  background: var(--paper);
}
.basic-report-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.basic-report-figure,
.private-debrief-company {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--space-1);
  padding: var(--space-4);
}
.basic-report-figure h3 {
  font-size: var(--text-label);
  margin-block: 0 var(--space-2);
}
.basic-report-value {
  display: block;
  font-size: var(--text-key);
  font-weight: var(--weight-heading);
}
.basic-report-change,
.basic-report-figure details {
  font-size: var(--text-meta);
}
.basic-round-report small {
  display: block;
  color: var(--muted);
}
.basic-round-report details {
  margin-block: var(--space-3);
}
.basic-round-report summary {
  cursor: pointer;
  font-weight: var(--weight-heading);
}
.basic-report-discussion,
.basic-report-callout {
  border-left: var(--space-1) solid var(--teal);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-2);
}
.basic-round-report .debrief-severity-watch,
.private-round-debrief .debrief-severity-watch {
  color: var(--amber);
  border-left: var(--space-1) solid var(--amber);
  padding: var(--space-3);
  font-weight: var(--weight-heading);
}
.basic-round-report .debrief-severity-act {
  color: var(--accent);
  border-left: var(--space-1) solid var(--accent);
  padding: var(--space-3);
  font-weight: var(--weight-heading);
}
.basic-round-report .debrief-delta-positive,
.private-round-debrief .debrief-delta-positive {
  color: var(--teal);
  font-weight: var(--weight-heading);
}
.basic-round-report .debrief-delta-negative,
.private-round-debrief .debrief-delta-negative {
  color: var(--danger);
  font-weight: var(--weight-heading);
}
.basic-round-report .debrief-delta-neutral,
.private-round-debrief .debrief-delta-neutral {
  color: var(--ink);
  font-weight: var(--weight-heading);
}
.private-debrief-companies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.private-debrief-score {
  font-weight: var(--weight-heading);
}
@media (max-width: 600px) {
  .basic-report-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .private-debrief-companies {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media print {
  .basic-report-figure,
  .private-debrief-company {
    break-inside: avoid;
  }
  .private-round-debrief details:not([open]) > *:not(summary) {
    display: block !important;
  }
}

/* Example gradebook (P104.1230); all values are fictional and export is off. */
.gradebook-example {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.gradebook-example-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--amber-line);
  border-radius: var(--radius);
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.gradebook-example-banner p {
  flex: 1 1 260px;
  margin: 0;
}
.gradebook-example-banner strong,
.gradebook-example-banner span {
  display: block;
}
.gradebook-example-policy,
.gradebook-example-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}
.gradebook-example-rule,
.gradebook-example-summary > div {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.gradebook-example-summary {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.gradebook-example-summary span,
.gradebook-example-summary strong,
.gradebook-example-summary small,
.gradebook-example-grid small {
  display: block;
}
.gradebook-example-summary span,
.gradebook-example-summary small,
.gradebook-example-grid small {
  color: var(--muted);
  font-size: var(--step--1);
}
.gradebook-example-summary strong {
  font: 600 var(--step-2) var(--font-display);
}
.gradebook-example-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}
.gradebook-example-toolbar label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  max-width: 100%;
}
.gradebook-example-toolbar input[type="search"],
.gradebook-example-toolbar select {
  max-width: 100%;
  min-width: 0;
}
.gradebook-example-toolbar [aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}
.gradebook-example-grid-host {
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
}
.gradebook-example-grid {
  width: 100%;
  min-width: 1040px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.gradebook-example-grid caption {
  text-align: left;
  padding: var(--space-3);
  color: var(--muted);
}
.gradebook-example-grid th,
.gradebook-example-grid td {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.gradebook-example-grid thead th {
  background: var(--paper-2);
}
.gradebook-example-grid th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--paper);
  box-shadow: 1px 0 0 var(--line);
  min-width: 160px;
}
.gradebook-example-grid thead th:first-child {
  background: var(--paper-2);
}
.gradebook-example-grid thead button {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font-weight: 600;
}
.gradebook-example-grid thead button::after {
  content: " ↕";
}
.gradebook-example-grid [aria-sort="ascending"] button::after {
  content: " ↑";
}
.gradebook-example-grid [aria-sort="descending"] button::after {
  content: " ↓";
}
.gradebook-example-team {
  display: flex;
  gap: var(--space-2);
}
.gradebook-example-team button {
  flex: none;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
}
.gradebook-example-grid .gradebook-example-future {
  color: var(--muted);
  background: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    var(--paper-2) 6px 8px
  );
}
.gradebook-example-grid .gradebook-example-flag {
  color: var(--amber-ink);
}
.gradebook-example-drill {
  position: sticky;
  left: 0;
  width: min(850px, calc(100cqw - 24px));
  white-space: normal;
  text-align: left;
}
.gradebook-example-drill table {
  width: 100%;
  border-collapse: collapse;
}
@media (max-width: 650px) {
  .gradebook-example-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gradebook-example-toolbar > label:has(input[type="search"]),
  .gradebook-example-toolbar > label:has(select) {
    width: 100%;
  }
}
.gradebook-example-toolbar button {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}
.gradebook-example-toolbar button[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.gradebook-example-toolbar input[type="search"],
.gradebook-example-toolbar select {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.gradebook-example-toolbar > label:has(input[type="search"]),
.gradebook-example-toolbar > label:has(select) {
  flex-direction: column;
  align-items: start;
  font-size: var(--step--1);
}
/* P104.1231: the consoles disclose from a top dock without moving the form. */
:root {
  --companion-dock-height: 0px;
}
:root:has(.companion-dock-host) {
  --companion-dock-height: 40px;
}
.companion-dock-host {
  display: contents;
}
.companion-dock {
  position: sticky;
  top: var(--workspace-topbar-height, 0px);
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface, var(--paper));
  color: var(--ink);
}
.companion-dock button {
  min-height: 30px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: inherit;
  font: inherit;
  font-size: var(--step--1);
}
.companion-dock .companion-dock-name {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  font-weight: var(--weight-strong);
}
.companion-dock .companion-dock-calm[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: var(--weight-strong);
}
.companion-dock .companion-page-art {
  width: 28px;
  height: 32px;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
  grid-column: auto;
  grid-row: auto;
}
.companion-dock-teaser {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--step--1);
}
/* Owner 2026-10-13: the console sits in the page flow and pushes the
   workspace down; it never overlays navigation or headings. */
.companion-console.companion-page-panel {
  display: block;
  position: relative;
  width: min(560px, calc(100% - 48px));
  min-height: 0;
  margin: 12px 24px;
  padding: 16px;
  background: var(--surface, var(--paper));
}
.companion-console[hidden] {
  display: none;
}
.companion-console h2 {
  margin: 0 32px 8px 0;
  font-size: var(--step-0);
}
.companion-console .companion-page-tip {
  margin: 0 0 12px;
}
.companion-console .companion-page-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 32px;
  min-height: 32px;
}
.companion-phone-dock {
  display: none;
}
@media (width < 760px) {
  :root:has(.companion-dock-host) {
    --companion-dock-height: 0px;
  }
  .companion-dock {
    display: none;
  }
  .companion-phone-dock {
    display: inline-flex;
  }
  .companion-console.companion-page-panel {
    width: calc(100% - 32px);
    margin: 12px 16px;
  }
}

/* P104.1231/1234: a body-level layer gives the flight transform one owner. */
.companion-flyer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 18;
  /* rel6 A3: twice the old 48 × 64 (FLYER_SIZE in unitControls.js). */
  width: 96px;
  height: 128px;
  overflow: clip;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.companion-flyer[hidden] {
  display: none;
}
.companion-flyer .companion-page-art {
  width: 96px;
  height: 128px;
}
.companion-flyer .scholar-stage .companion-scholar-svg {
  animation: none;
}
.companion-flyer .flame .flame-body {
  animation: none !important;
}
.companion-flyer[data-state="docked"] {
  pointer-events: auto;
}
.companion-flyer[data-motion="moving"][data-skin="unit"][data-state="docked"]
  .companion-page-art {
  animation: companion-flight-bob var(--bob-s, 3s) ease-in-out infinite
    alternate !important;
}
.companion-flyer[data-skin="scholar"][data-state="docked"] .companion-page-art {
  animation: companion-flight-bob var(--bob-s, 3s) ease-in-out 2 alternate;
}
/* Owner 2026-10-13 (rel6 A5): an airborne figure carries its tip; in Calm
   (or perched) the tip stays in the dock strip. */
.companion-flyer-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 18;
  max-width: min(260px, calc(100vw - 16px));
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, var(--paper));
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.35;
  box-shadow: 0 6px 18px rgb(20 35 50 / 12%);
  pointer-events: none;
  will-change: transform;
}
.companion-flyer-tip[hidden] {
  display: none;
}
body:has(.companion-flyer-tip:not([hidden])) .companion-dock-teaser {
  visibility: hidden;
}
@keyframes companion-flight-bob {
  to {
    transform: translateY(var(--bob-px, 2px));
  }
}
.companion-motion-note {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Published Results, Direction A — owner P104.1237. */
.results-report-layout { min-width: 0; padding-right: 0; }
.results-report-layout .report-bar {
  position: static; display: block; padding: 0 0 12px; background: transparent;
  border: 0; box-shadow: none; margin-bottom: 8px;
}
.results-report-layout .report-bar-primary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.results-report-layout .report-bar h1 { font: 700 var(--step-4)/1.15 var(--font-display); margin: 0 auto 0 0; }
.results-report-layout .report-bar-name { display: inline; font-size: var(--step-0); }
.results-report-layout .report-bar-name[hidden] { display: none; }
.results-current-context { margin: 8px 0; }
.results-current-context > summary { min-height: 44px; padding: 10px 14px; font-size: var(--step-0); cursor: pointer; }
.results-report-layout .report-bar-status { display: inline; margin-left: 8px; font-size: var(--step-0); }
.report-edition-picker { position: relative; border: 0; }
.report-edition-picker > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); font-size: var(--step-0); }
.report-edition-picker .report-round-switcher { display: grid; position: absolute; right: 0; top: 100%; z-index: 12; padding: 8px; min-width: 180px; max-height: 50vh; overflow: auto; background: var(--paper); border: 1px solid var(--line-strong); box-shadow: var(--shadow); border-radius: 8px; }
.results-report-layout button { min-height: 44px; }
.results-report-layout .instructor-evidence-selection { display: flex; gap: 8px; align-items: center; margin: 0; padding: 0; border: 0; }
.results-report-layout .instructor-evidence-selection select { max-width: 180px; min-height: 44px; }
.results-layout-toggle { display: flex; align-items: center; gap: 4px; font-size: var(--step-0); margin: 0; }
.results-layout-toggle button { padding: 0 12px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; }
.results-layout-toggle button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.results-tabbar { position: sticky; top: var(--results-top, 130px); z-index: 7; display: flex; gap: 8px; align-items: center; min-width: 0; background: var(--canvas); border-bottom: 1px solid var(--line-strong); margin-bottom: 16px; }
.results-tabstrip { display: flex; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: thin; }
.results-tabstrip button { min-height: 48px; flex: none; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 7px 7px 0 0; background: transparent; font-size: var(--step-0); font-weight: 600; color: var(--muted); white-space: nowrap; }
.results-tabstrip button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); background: var(--paper); }
.results-tabstrip button[aria-disabled="true"] { color: var(--muted); opacity: .7; cursor: not-allowed; }
.results-definitions { order: 1; flex: none; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); padding: 0 12px; font-size: var(--step-0); color: var(--ink); }
.results-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; align-items: start; }
.results-panes, .results-reading-layout { min-width: 0; }
.results-tab-panel[hidden] { display: none; }
.results-print-heading { display: none; }
.results-report-layout .report-section { margin: 0; padding: 0; min-width: 0; }
.results-section-header { margin-bottom: 12px; }
.results-section-header > div { display: flex; align-items: center; gap: 8px; }
.results-section-header > .report-section-heading { padding: 0; margin: 0; border: 0; }
.results-section-header h2 { font: 700 var(--step-3)/1.25 var(--font-display); margin: 0; }
.results-purpose { margin: 4px 0; max-width: 72ch; font-size: var(--step-1); color: var(--ink-soft); }
.results-benchmark { margin: 4px 0; max-width: 80ch; font-size: var(--step-0); color: var(--muted); }
.results-report-layout .report-section-index { display: grid; position: sticky; top: calc(var(--results-top, 130px) + 64px); width: auto; margin: 0; padding: 0; gap: 2px; max-height: 70vh; overflow-y: auto; }
.results-report-layout .report-section-index a { min-height: 36px; display: flex; align-items: center; border-left: 2px solid var(--line); padding: 4px 10px; font-size: var(--step-0); text-decoration: none; color: var(--ink-soft); }
.results-report-layout .report-section-index a[aria-current="true"] { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.report-index-title { font-family: inherit; font-weight: 600; font-size: var(--step-0); line-height: 1.3; color: var(--muted); padding: 0 10px; }
.results-report-layout :is(h2,h3,h4,h5) { scroll-margin-top: calc(var(--results-top, 130px) + 110px); }
.results-dashboard { display: grid; gap: 12px; }
.results-dashboard h3 { margin: 0; font: 700 var(--step-2)/1.25 var(--font-display); }
.results-standing-grid { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr); gap: 12px; }
.results-standing { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.results-standing > p { margin: 0 0 6px; font-size: var(--step-0); line-height: 1.35; }
.results-standing .results-overview-score { font-size: var(--step-3); line-height: 1.15; }
.results-overview-score > span { display: block; font-size: var(--step-0); line-height: 1.3; margin-top: 4px; }
.results-overview-score data { font: 700 var(--step-4)/1 var(--font-display); }
.results-band { font-size: var(--step-0); background: var(--paper-2); padding: 3px 8px; border-radius: 999px; }
.results-perspective-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.results-perspective-tile, .results-headline-tile { display: grid; gap: 6px; align-content: start; padding: 12px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--paper); text-decoration: none; font-size: var(--step-0); }
.results-perspective-tile data { font-size: var(--step-3); font-weight: 700; }
.results-headline-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.results-headline-tile { padding: 10px 8px; }
.results-headline-tile > span:first-child { min-height: 38px; line-height: 1.35; }
.results-headline-tile > data { font-size: var(--step-1); font-weight: 700; overflow-wrap: anywhere; }
.results-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.results-story-card { color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; min-width: 0; }
.results-story-card :is(p,li) { font-size: var(--step-0); color: var(--ink-soft); line-height: 1.4; margin: 6px 0; }
.results-story-card li { list-style-position: inside; }
.results-evidence-chip { display: inline-block; font-size: var(--step-0); background: var(--amber-soft); color: var(--amber); padding: 2px 8px; border-radius: 999px; margin-top: 8px; }
.results-also { display: flex; gap: 8px; flex-wrap: wrap; }
.results-also a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--step-0); text-decoration: none; }
.results-recorded-evidence > summary { min-height: 44px; font-size: var(--step-0); cursor: pointer; padding: 8px 0; }
.results-more { margin: 12px 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.results-more > summary { min-height: 44px; padding: 10px 14px; cursor: pointer; font-size: var(--step-0); font-weight: 600; }
.results-more[open] > :not(summary) { margin: 12px; }
.results-report-layout .round-report-table caption::after { content: none !important; }
.results-private-records > summary { min-height: 44px; padding: 10px 14px; cursor: pointer; font-size: var(--step-0); }
.round-results-workspace:has([data-results-tab="history"][hidden]) > .results-private-records { display: none; }
.results-outline { display: none; }
.results-report-layout[data-results-layout="outline"] .results-tabbar { display: none; }
.results-report-layout[data-results-layout="outline"] .results-reading-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
.results-report-layout[data-results-layout="outline"] .results-outline { display: block; position: sticky; top: var(--results-top, 130px); max-height: 75vh; overflow-y: auto; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.results-outline summary, .results-outline button, .results-outline a { min-height: 44px; display: flex; align-items: center; font-size: var(--step-0); padding: 6px 10px; cursor: pointer; }
.results-outline a { padding-left: 18px; }
.results-outline [aria-current] { color: var(--accent); font-weight: 700; }
.results-glossary { position: fixed; margin: 0 0 0 auto; top: 0; right: 0; width: min(520px, calc(100vw - 48px)); height: 100vh; max-height: 100vh; padding: 24px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); overflow: auto; }
.results-glossary::backdrop { background: rgb(0 0 0 / 35%); }
.strategy-report-direction, .strategy-report-direction-word { margin-inline-start: 0.35em; }
.strategy-report-direction-word { color: var(--muted); }
.strategy-report-head { display: flex; align-items: center; gap: var(--space-2); }
.strategy-report-vrio-training { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--accent); background: var(--paper-2); color: var(--ink); }
/* Close stays reachable at any scroll depth; the strip left of the panel is a
   backdrop target on phones, where the panel would otherwise cover the page. */
.results-glossary header { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: -24px; z-index: 1; margin: -24px -24px 0; padding: 24px 24px 8px; background: var(--paper); }
.results-glossary input { width: 100%; min-height: 44px; margin: 8px 0; }
.results-glossary dt { font-weight: 700; font-size: var(--step-1); margin-top: 16px; }
.results-glossary dd { margin: 6px 0 0; font-size: var(--step-0); line-height: 1.5; }
@media (max-width: 760px) {
  body:has(.results-report-layout) .topbar { position: relative; }
  .results-tabbar { top: 0; gap: 4px; }
  .results-tabstrip { scrollbar-width: none; }
  .results-tabstrip button { padding: 0 10px; }
  .results-definitions { max-width: 104px; padding: 0 6px; }
  .results-panel-grid { display: flex; flex-direction: column; gap: 0; }
  .results-panel-grid > .report-section { width: 100%; }
  .results-report-layout .report-section-index { order: -1; position: sticky; top: 48px; z-index: 6; width: 100%; flex-direction: row; display: flex; max-height: none; overflow-x: auto; background: var(--canvas); border-bottom: 1px solid var(--line); padding: 4px 0; margin-bottom: 12px; }
  .results-report-layout .report-section-index a { flex: none; min-height: 44px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
  .report-index-title { display: none; }
  .results-report-layout :is(h2,h3,h4,h5) { scroll-margin-top: 110px; }
  .results-standing-grid, .results-story-grid { grid-template-columns: minmax(0, 1fr); }
  .results-perspective-tiles, .results-headline-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-report-layout[data-results-layout="outline"] .results-reading-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .results-report-layout[data-results-layout="outline"] .results-outline { position: static; max-height: 260px; }
  .results-report-layout .report-bar-primary { flex-wrap: wrap; }
  .results-report-layout .report-bar-status { display: block; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .results-report-layout, .results-report-layout * { scroll-behavior: auto; }
}
@media print {
  .results-report-layout .report-bar-name[hidden] { display: inline !important; }
  .results-private-records { display: block !important; }
  .results-report-layout :is(.results-tabbar,.results-outline,.results-layout-toggle,.report-section-index,.results-glossary,.report-edition-picker,.report-print,.report-copy-link,.report-next,.instructor-evidence-selection) { display: none !important; }
  .results-report-layout .results-tab-panel { display: block !important; break-before: page; }
  .results-report-layout .results-tab-panel:first-child { break-before: auto; }
  .results-report-layout .results-print-heading { display: block; font: 700 var(--step-3)/1.2 var(--font-display); }
  .results-report-layout .results-panel-grid, .results-report-layout[data-results-layout="outline"] .results-reading-layout { display: block; }
  .results-report-layout details > :not(summary) { display: block !important; }
}
.results-cash-bridge { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); margin-bottom: 16px; }
.results-cash-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) minmax(80px, 1fr); gap: 12px; align-items: center; font-size: var(--step-0); margin: 8px 0; }
.results-cash-row dd { text-align: right; margin: 0; }
.results-cash-bar { height: 18px; }
.results-cash-bar i { display: block; height: 100%; border-radius: 3px; }
.results-period-toggle, .results-territory-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.results-territory-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 12px 0; }
.results-territory-tile { display: grid; padding: 8px; min-height: 44px; font-size: var(--step-0); border: 1px solid var(--line); border-radius: 5px; background: var(--paper-2); color: var(--ink); }
.results-territory-tile[data-share-band="3"], .results-territory-tile[data-share-band="4"] { background: var(--accent-soft); border-color: var(--accent); }
@media print { .results-territory-pagination { display: none; } }
.results-territory-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.results-territory-tile { width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 3px; }
.results-territory-tile[data-share-band="1"] { background: var(--accent-soft); }
.results-territory-tile[data-share-band="2"] { border-color: var(--accent); background: var(--accent-soft); }
.results-territory-tile[data-share-band="3"] { background: var(--accent); opacity: .75; }
.results-territory-tile[data-share-band="4"] { background: var(--accent); }
@media (max-width: 760px) { .results-territory-tile { width: 44px; height: 44px; min-height: 44px; } }
@media print { .results-period-toggle { display: none; } .results-period-body[hidden] { display: block !important; } }
@media print { .report-edition-picker { display: none !important; } }
.results-instructor-standings { padding: 10px 14px; border: 1px solid var(--accent); border-left-width: 4px; border-radius: var(--radius); background: var(--accent-soft); font-size: var(--step-0); }

/* Published choreography belongs to the dashboard; later tabs stay settled. */
.results-report-layout.publish-choreography [data-results-tab]:not([data-results-tab="overview"]) .publish-stage,
.results-report-layout.publish-choreography [data-results-tab]:not([data-results-tab="overview"]) .publish-stage * {
  animation: none !important;
  transition: none !important;
}
.results-report-layout.publish-choreography .results-recorded-evidence .publish-stage,
.results-report-layout.publish-choreography .results-recorded-evidence .publish-stage * {
  animation: none !important;
  transition: none !important;
}

@media (min-width: 1100px) {
  [data-results-tab="overview"] .results-section-header { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
  [data-results-tab="overview"] .results-section-header > div { grid-row: span 2; }
  [data-results-tab="overview"] .results-section-header > p { margin: 0; }
}

/* Guide scorecard connections disclose names and navigation only. */
.guide-area-scorecard {
  padding: 20px;
  margin-block: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}
.guide-docs .guide-area-scorecard > h3 { margin-top: 0; }
.guide-scorecard-perspectives,
.guide-scorecard-links,
.guide-scorecard-lags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.guide-scorecard-perspective,
.guide-scorecard-lags li {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--muted);
  font-size: var(--step--1);
}
.guide-area-scorecard .is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #fff);
}
.guide-area-scorecard .is-secondary {
  border-color: var(--accent);
  color: var(--accent-dark);
}
.guide-scorecard-cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.guide-scorecard-cells > div { min-width: 0; }
.guide-scorecard-cell-label { margin-block: 12px; }
.guide-scorecard-links button {
  min-height: 44px;
  padding: 8px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}
.guide-scorecard-tradeoff {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
@container guide (max-width: 720px) {
  .guide-scorecard-cells { grid-template-columns: 1fr; }
  .guide-area-scorecard { padding: 16px; }
}