/* ==========================================================================
   OpenColdSpray Engineering Studio — visual system
   --------------------------------------------------------------------------
   Design language: engineering drawing sheet. Blueprint substrate, datum
   rules, condensed technical headings, tabular monospace for every number.
   The hero carries the signature: a cold-spray plume crossing the critical
   velocity datum — grey particles rebound, cyan particles bond.

   Breakpoints are ordered LARGEST FIRST so narrower rules always win:
   1440 · 1200 · 1040 · 920 (drawer) · 720 · 560 · 400
   ========================================================================== */

/* ------------------------------------------------------------- 0. Typefaces

   Bricolage Grotesque for display — headings, hero, card titles. A grotesque
   with tight, slightly irregular letterforms, which is what stops the headings
   reading as a default system stack.

   Plus Jakarta Sans for body — paragraphs, labels, buttons. Even colour and
   open apertures, so it holds up at 12-13px in dense forms without competing
   with the display face.

   IBM Plex Mono is retained for numerals only. Engineering figures need
   tabular widths so that columns of results align; a proportional font makes
   a table of velocities impossible to scan.

   IBM Plex Sans is retained solely as a fallback for glyphs the two new
   families do not contain. Neither Bricolage nor Jakarta ships Greek, and the
   interface uses eta, theta, mu, sigma and similar throughout. Without an
   explicit fallback the browser would substitute an arbitrary system font for
   those characters alone, which is visibly inconsistent mid-sentence.

   Self-hosted rather than requested from Google Fonts: the content security
   policy restricts font loading to this origin, and a third-party request
   would be blocked outright as well as costing an extra connection on first
   paint. Licensed under the SIL Open Font License — see fonts/LICENSE.txt.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/BricolageGrotesque-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/BricolageGrotesque-700.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-700.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
}

/* Greek and mathematical glyph fallback. */
@font-face {
  font-family: "OCS Symbols";
  src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+2190-21FF, U+2200-22FF, U+00B0, U+00B1, U+00D7, U+00F7;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- 1. Tokens */

:root {
  /* Brand */
  --navy-900: #06121f;
  --navy-800: #0a1a2e;
  --navy: #0b1e3d;
  --navy-2: #14335c;
  --steel: #4a7fa5;
  --cyan: #37b3e8;
  --cyan-deep: #1d7fb6;
  --orange: #e8730c;
  --green: #16885f;
  --red: #bd3b3b;
  --gold: #c98911;

  /* Light surfaces */
  --paper: #eceff4;
  --canvas: #eceff4;
  --surface: #ffffff;
  --surface-soft: #f4f7fb;
  --surface-sunken: #eef2f7;
  --ink: #0f1d2e;
  --ink-2: #33455c;
  --muted: #64778f;
  --line: #dde4ec;
  --line-strong: #c4d1de;

  /* Blueprint substrate */
  --grid-minor: rgba(74, 127, 165, .075);
  --grid-major: rgba(74, 127, 165, .13);
  --grid-size: 22px;
  --grid-major-size: 110px;

  /* Depth */
  --shadow-xs: 0 1px 2px rgba(11, 30, 61, .05);
  --shadow-sm: 0 2px 6px rgba(11, 30, 61, .06), 0 1px 2px rgba(11, 30, 61, .04);
  --shadow-md: 0 10px 26px rgba(11, 30, 61, .09), 0 2px 6px rgba(11, 30, 61, .05);
  --shadow-lg: 0 24px 60px rgba(11, 30, 61, .16), 0 4px 12px rgba(11, 30, 61, .07);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));

  /* Geometry — three radii only */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Type */
  /* "OCS Symbols" carries only Greek and maths glyphs, so it never affects
     Latin text — it simply prevents those characters falling back to an
     unrelated system font. */
  --font-sans: "Plus Jakarta Sans", "OCS Symbols", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", "OCS Symbols", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Metrics */
  --header-h: 68px;
  --sidebar-w: 274px;
  --tap: 44px;

  /* Device safe areas (viewport-fit=cover is set in the document head) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

[data-theme="dark"] {
  --paper: #060f1a;
  --canvas: #060f1a;
  --surface: #0e2138;
  --surface-soft: #0b1b2e;
  --surface-sunken: #081625;
  --ink: #e8eff6;
  --ink-2: #b7c8d9;
  --muted: #8fa4ba;
  --line: #1d3450;
  --line-strong: #2b4a69;
  --navy: #050f1c;
  --navy-2: #0e2c4c;

  --grid-minor: rgba(94, 152, 196, .055);
  --grid-major: rgba(94, 152, 196, .10);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, .38);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, .5);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));
}

/* ----------------------------------------------------------- 2. Foundation */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Was 320px with overflow-x:hidden, which clipped anything narrower and
     offered no scrollbar to reach it. The layout is verified to fit at 300px,
     and overflow is now scrollable rather than hidden so nothing can become
     unreachable. */
  min-width: 300px;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--steel); text-underline-offset: 2px; }
/* Anchors used as controls rather than as prose links. */
.nav-item, .brand, .module-card, .button, .card-link, .workflow-step { text-decoration: none; }
img { max-width: 100%; }

/* Every figure in the interface is set in tabular mono — this is an
   instrument, and columns of numbers have to align. */
.metric-value,
.workflow-step,
.badge,
.engineering-status-strip,
td, th,
.inline-code,
.otp-input,
.auth-config-code,
.hero-ring strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: fixed;
  z-index: 9999;
  left: 12px;
  top: -80px;
  padding: 11px 16px;
  border: 1px solid var(--cyan);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: top .16s ease;
}
.skip-link:focus { top: calc(var(--safe-t) + 12px); }

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

/* --------------------------------------------------------------- 3. Topbar */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: calc(var(--header-h) + var(--safe-t));
  padding: var(--safe-t) calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l));
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
@supports (backdrop-filter: blur(1px)) {
  .topbar {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
  }
}
/* Datum rule: a hairline of brand cyan pinned to the header's lower edge. */
.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--steel) 32%, transparent 72%);
  opacity: .7;
}

/* The wordmark is a wide lockup (aspect ratio 6.36:1), so it is sized by
   HEIGHT and allowed to take its natural width. At 40px tall it measures
   ~254px, which seats it neatly inside the 274px sidebar column below. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 52px;
  padding: 4px 10px;
  margin-left: -10px;
  border-radius: var(--r-md);
  transition: background .14s ease, transform .12s ease;
}
.brand:hover { background: var(--surface-soft); }
.brand:active { transform: scale(.985); }
.brand:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.brand-mark {
  width: auto;
  height: 40px;
  display: block;
  object-fit: contain;
}
/* Two marks in the DOM, swapped by the in-app theme toggle — a <picture>
   media query would follow the OS preference and ignore the toggle. */
.brand-mark-dark { display: none; }
[data-theme="dark"] .brand-mark-light { display: none; }
[data-theme="dark"] .brand-mark-dark { display: block; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-button, .unit-button, .icon-button, .menu-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}

.text-button {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
}
.text-button:hover:not(:disabled) { color: var(--ink); background: var(--surface-soft); }
.text-button:disabled { opacity: .3; cursor: default; }

.unit-button {
  min-width: 76px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.unit-button:hover { border-color: var(--steel); color: var(--steel); }

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}
.icon-button:hover { border-color: var(--steel); color: var(--steel); }
.icon-button svg { width: 17px; height: 17px; }

.account-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: border-color .14s ease;
}
.account-button:hover { border-color: var(--steel); }
.account-button[hidden] { display: none !important; }
.account-initials {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: linear-gradient(150deg, var(--navy-2), var(--navy));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .015em;
}
.account-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-caret { color: var(--muted); font-size: 10px; }

.menu-button {
  display: none;
  width: var(--tap);
  height: var(--tap);
  place-items: center;
  margin-left: -8px;
  border-radius: var(--r-md);
  color: var(--ink);
}
.menu-button:hover { background: var(--surface-soft); }
.menu-button span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 3.5px auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
body.nav-open .menu-button span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .menu-button span:nth-child(2) { opacity: 0; }
body.nav-open .menu-button span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------------------------------------------------------------- 4. Shell */

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--header-h) + var(--safe-t));
}

/* -------------------------------------------------------------- 5. Sidebar */

.sidebar {
  position: fixed;
  z-index: 50;
  top: calc(var(--header-h) + var(--safe-t));
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: var(--safe-l);
  color: #ccdcea;
  border-right: 1px solid rgba(255, 255, 255, .06);
  background-color: var(--navy-900);
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    radial-gradient(120% 55% at 0% 0%, rgba(55, 179, 232, .12), transparent 62%),
    linear-gradient(180deg, #08182b 0%, #071729 46%, #050f1c 100%);
  background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  background-clip: content-box;
}

.sidebar-search { padding: 16px 14px 8px; }
.sidebar-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  color: #f2f7fb;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%2392a9c0' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='4.6'/%3E%3Cpath d='m10 10 3.4 3.4'/%3E%3C/svg%3E") no-repeat 12px center;
  outline: none;
  font-size: 13px;
  transition: border-color .14s ease, background-color .14s ease;
}
.sidebar-search input::placeholder { color: #8ba3bb; }
.sidebar-search input:focus {
  border-color: var(--cyan);
  background-color: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 3px rgba(55, 179, 232, .16);
}
.sidebar-search input::-webkit-search-cancel-button { filter: invert(.7); }

.main-nav { padding: 4px 10px 18px; }
.nav-section { display: block; }
.nav-section[hidden] { display: none; }
.nav-section-label {
  margin: 16px 12px 6px;
  color: #6d859e;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-item {
  text-decoration: none;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 7px 11px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: #bccfe1;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  transition: background .13s ease, color .13s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(55, 179, 232, .18), rgba(55, 179, 232, .04));
  color: #fff;
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--cyan);
}
.nav-item[hidden] { display: none; }
.nav-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .035);
  color: var(--cyan);
}
.nav-icon svg { width: 15px; height: 15px; }
.nav-item.active .nav-icon {
  border-color: rgba(55, 179, 232, .38);
  background: rgba(55, 179, 232, .14);
}
.nav-empty {
  margin: 12px;
  padding: 14px 12px;
  border: 1px dashed rgba(255, 255, 255, .13);
  border-radius: var(--r-md);
  color: #8ba3bb;
  font-size: 12px;
  line-height: 1.5;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 8px;
  padding: 13px 18px calc(16px + var(--safe-b));
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #90a7bd;
  font-size: 11px;
}
.sidebar-footer small {
  grid-column: 2;
  color: #5f7893;
  font-family: var(--font-mono);
  font-size: 10px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fc98d;
  box-shadow: 0 0 0 3px rgba(63, 201, 141, .14);
}

/* ------------------------------------------------ 6. Workspace (blueprint) */

.workspace {
  position: relative;
  width: calc(100% - var(--sidebar-w));
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  margin-left: var(--sidebar-w);
  padding:
    24px
    calc(clamp(20px, 3vw, 44px) + var(--safe-r))
    calc(56px + var(--safe-b))
    calc(clamp(20px, 3vw, 44px) + var(--safe-l));
  outline: none;
  /* The drawing sheet: minor grid, major divisions, and a light falloff from
     the top edge so the header sits on a graded ground. */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .72), transparent 70%);
  background-size:
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size),
    var(--grid-major-size) var(--grid-major-size),
    var(--grid-major-size) var(--grid-major-size),
    100% 340px;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
}
[data-theme="dark"] .workspace {
  background-image:
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    radial-gradient(120% 60% at 50% 0%, rgba(55, 179, 232, .07), transparent 70%);
}

/* ---------------------------------------------------------- 7. Page header */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 14px;
}
.page-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.page-heading-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--cyan);
  background: linear-gradient(150deg, var(--navy-2), var(--navy));
  border: 1px solid rgba(55, 179, 232, .2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.page-heading-icon svg { width: 20px; height: 20px; }
.page-heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.008em;
  color: var(--ink);
}
.page-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* -------------------------------------------------------- 8. Workflow rail */

.workflow-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.workflow-bar::-webkit-scrollbar { display: none; }
.workflow-label {
  flex: 0 0 auto;
  margin-right: 3px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.workflow-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.workflow-step:hover { border-color: var(--steel); color: var(--steel); }
.workflow-step.done {
  color: var(--green);
  border-color: rgba(22, 136, 95, .34);
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}
.workflow-step.current {
  color: var(--ink);
  border-color: var(--cyan);
  box-shadow: inset 0 -2px 0 var(--cyan);
}
/* The step number sits in its own chip so the label reads as a name, not as
   part of a numbered string. */
.workflow-index {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
}
.workflow-step.done .workflow-index {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}
.workflow-step.current .workflow-index {
  background: color-mix(in srgb, var(--cyan) 18%, transparent);
  color: var(--cyan-deep);
}

.workflow-reset {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.workflow-reset:hover { color: var(--red); border-color: rgba(189, 59, 59, .4); }

/* ---------------------------------------------------------- 9. Status rail */

.engineering-status-strip {
  display: flex;
  align-items: stretch;
  margin-bottom: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  scrollbar-width: none;
}
.engineering-status-strip::-webkit-scrollbar { display: none; }
.engineering-status-strip span {
  flex: 1 0 auto;                       /* fill the rail — no dead tail */
  padding: 9px 14px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.engineering-status-strip span:last-child { border-right: 0; }
.engineering-status-strip b {
  margin-right: 6px;
  color: var(--ink);
  font-weight: 600;
}

/* ------------------------------------------------- 10. Hero — the signature */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 262px;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr);
  gap: 30px;
  margin-bottom: 20px;
  padding: clamp(28px, 3.6vw, 52px);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
  color: #fff;
  background-color: var(--navy);
  background-image: linear-gradient(118deg, #071628 0%, #0b2445 52%, #0a3055 100%);
  box-shadow: var(--shadow-lg);
}
/* Layer 1 — the plume: particles crossing the critical-velocity datum. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/static/velocity-field.svg") center / cover no-repeat;
  opacity: .85;
}
/* Layer 2 — readability wash so the headline always holds contrast. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(6, 18, 33, .9) 0%, rgba(7, 24, 44, .62) 40%, rgba(8, 34, 60, .14) 76%, transparent 100%);
}

.hero-copy { position: relative; z-index: 1; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: #7fd2f4;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange);
}
.hero h2 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.015em;
}
.hero p {
  max-width: 54ch;
  margin: 15px 0 24px;
  color: #c3d5e6;
  font-size: 14px;
  line-height: 1.6;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero-graphic { position: relative; z-index: 1; display: grid; place-items: center; }
.hero-ring {
  width: min(216px, 24vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(55, 179, 232, .1), transparent 68%);
  box-shadow: inset 0 0 60px rgba(55, 179, 232, .14), 0 0 0 22px rgba(255, 255, 255, .022);
}
.hero-ring span {
  padding: 0 18px;
  text-align: center;
  color: #cfe3f2;
  font-size: 12px;
  line-height: 1.4;
}
.hero-ring strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
}

/* -------------------------------------------------------------- 11. Buttons */

.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--steel);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: transform .12s ease, filter .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.button:hover { filter: brightness(1.07); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.button:active { transform: translateY(0); filter: brightness(.97); }
.button.primary {
  background: linear-gradient(180deg, #f0810f, var(--orange));
  box-shadow: 0 4px 14px rgba(232, 115, 12, .28);
}
.button.secondary {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.button.secondary:hover { background: rgba(255, 255, 255, .14); }
.button.outline {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.button.outline:hover { border-color: var(--steel); color: var(--steel); }
.button.ghost { background: var(--surface-soft); color: var(--steel); }
.button.danger { background: var(--red); }
.button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* ---------------------------------------------------------- 12. Module grid */

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}
.module-card {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
/* Corner tick — a drawing-sheet registration mark that resolves on hover. */
.module-card::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 13px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity .16s ease, transform .16s ease;
}
.module-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
  box-shadow: var(--shadow-md);
}
.module-card:hover::after { opacity: .85; transform: translate(0, 0); }
.module-card .card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--steel) 18%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--cyan) 9%, var(--surface));
  color: var(--steel);
}
.module-card .card-icon svg { width: 18px; height: 18px; }
.module-card h3 {
  margin: 15px 0 5px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.004em;
}
.module-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.module-card .card-link {
  margin-top: auto;
  padding-top: 13px;
  color: var(--steel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .008em;
}

/* ----------------------------------------------------------------- 13. Card */

.card {
  position: relative;
  margin-bottom: 16px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
/* Top sheen — a light edge that reads as a milled surface. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--sheen);
  opacity: .6;
  pointer-events: none;
}
.card > * { position: relative; }
.card.compact { padding: 16px; margin-bottom: 0; }
.card h2, .card h3, .card h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.006em;
}
.card h2 { margin: 0 0 6px; font-size: 20px; }
.card h3 { margin: 0 0 12px; font-size: 15px; }
.card h4 { margin: 0 0 8px; font-size: 13px; }
.card-intro { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ----------------------------------------------------------------- 14. Tabs */

.tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .13s ease, border-color .13s ease;
}
.tab-button:hover { color: var(--ink-2); }
.tab-button.active { color: var(--ink); border-color: var(--cyan); font-weight: 600; }

/* ---------------------------------------------------------------- 15. Forms */

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
}
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.field small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  outline: none;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 14px;
  transition: border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
.field input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%2364778f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--cyan);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(55, 179, 232, .15);
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  font-size: 13px;
  cursor: pointer;
}
.check-field input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--steel);
  cursor: pointer;
}

.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 12px;
}
.section-bar h2, .section-bar h3 { margin: 0; }
.section-bar > .muted { font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 18px; }
.actions.end { justify-content: flex-end; }

/* --------------------------------------------------------------- 16. Metrics */

.metrics {
  display: grid;
  /* Was repeat(4, minmax(0, 1fr)), which forced four columns regardless of the
     space available. Inside a half-width split that gave each card 65px and
     values broke one character per line. auto-fit lets the row drop to fewer
     columns instead of crushing them. */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 11px;
  margin: 16px 0;
}
.metrics.five { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }
.metric {
  position: relative;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}
/* Datum tick on the reading's left edge. */
.metric::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--steel);
  opacity: .35;
}
.metric-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.metric-value {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  display: block;
  color: var(--ink);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.metric-note { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }

/* ---------------------------------------------------------------- 17. Charts */

.result-layout {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1.7fr);
  gap: 16px;
}
.chart-card {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.chart-card h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 13px; font-weight: 600; }
/* A faint plot grid, so an empty instrument still reads as an instrument. */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: var(--r-sm);
  background-image:
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 34px 34px;
}
.chart-wrap.short { height: 288px; }
.chart-wrap.tall { height: 440px; }
canvas { display: block; width: 100%; height: 100%; max-width: 100%; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 10px;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; }

/* --------------------------------------------------------------- 18. Status */

.status-banner {
  margin: 13px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}
.status-banner strong { color: var(--ink); font-weight: 600; }
.status-banner.success { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
.status-banner.warning { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.status-banner.danger { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--surface)); }
.status-banner.info { border-left-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 7%, var(--surface)); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .008em;
}
.badge.success { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.badge.warning { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
.badge.danger { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }

/* --------------------------------------------------------------- 19. Tables */

.table-wrap {
  position: relative;
  max-width: 100%;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 12px; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 13px;
  background: var(--navy);
  color: #fff;
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  padding: 10px 13px;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
tbody tr:nth-child(even) td { background: var(--surface-soft); }
tbody tr:hover td { background: color-mix(in srgb, var(--cyan) 6%, var(--surface)); }
.empty-state {
  padding: 40px 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  box-shadow: inset 0 1px 2px rgba(11, 30, 61, .07);
}
.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--steel), var(--cyan));
}

/* ------------------------------------------------------------ 20. Utilities */

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stack { display: grid; gap: 12px; align-content: start; }
.muted { color: var(--muted); }
.fine-print { margin-top: 13px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.inline-code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  font-size: 11px;
}
.divider { height: 1px; margin: 22px 0; background: var(--line); }

.tool-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: border-color .13s ease, color .13s ease, background .13s ease;
}
.tool-chip:hover { border-color: var(--cyan); color: var(--steel); background: color-mix(in srgb, var(--cyan) 6%, var(--surface)); }
.tool-chip input { margin: 0; accent-color: var(--steel); }

.file-drop {
  display: grid;
  place-items: center;
  gap: 9px;
  min-height: 132px;
  padding: 22px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  transition: border-color .14s ease, background .14s ease;
}
.file-drop:hover { border-color: var(--steel); background: color-mix(in srgb, var(--cyan) 5%, var(--surface-sunken)); }
.file-drop input { max-width: 100%; font-size: 12px; }
.file-drop p { margin: 0; }

details.card { padding: 0; overflow: hidden; }
details.card::before { display: none; }
details.card summary {
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  transition: background .13s ease;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary::before {
  content: "+";
  display: inline-block;
  width: 16px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 600;
}
details.card[open] summary::before { content: "\2212"; }
details.card summary:hover { background: var(--surface-soft); }
details.card > p { margin: 0; padding: 0 16px 15px 32px; color: var(--muted); font-size: 13px; }

pre {
  overflow-x: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
}

/* ------------------------------------------------- 19b. Scroll affordances */

/* Tables, tab bars and the workflow rail scroll sideways on narrow screens.
   With the scrollbar hidden (and invisible by default on macOS) there was
   nothing to show that more content existed off the right edge. A fade marks
   the scrollable edge; it is applied by markScrollers() in app.js, which knows
   whether the element actually overflows and which end it is at. */
[data-scroll-x] { position: relative; }
[data-scroll-x]::after,
[data-scroll-x]::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  width: 34px;
  height: var(--scroller-h, 100%);
  /* The fade is a floated in-flow element, so its height counted towards the
     container's height. markScrollers() then measured that larger height, fed
     it back through --scroller-h, and the box grew by a couple of pixels on
     every scroll or resize event. Cancelling its own height with a negative
     margin removes it from layout entirely and breaks the loop. */
  margin-bottom: calc(-1 * var(--scroller-h, 0px));
  pointer-events: none;
  transition: opacity .18s ease;
}
[data-scroll-x]::before { left: 0; float: left; margin-right: -34px; }
[data-scroll-x]::after { right: 0; float: right; margin-left: -34px; }
[data-scroll-x]::before {
  background: linear-gradient(90deg, var(--fade-from, var(--surface)) 12%, transparent);
  opacity: 0;
}
[data-scroll-x]::after {
  background: linear-gradient(270deg, var(--fade-from, var(--surface)) 12%, transparent);
  opacity: 0;
}
[data-scroll-x="start"]::after,
[data-scroll-x="middle"]::after { opacity: 1; }
[data-scroll-x="middle"]::before,
[data-scroll-x="end"]::before { opacity: 1; }

.tabs, .workflow-bar { --fade-from: var(--paper); }
.table-wrap { --fade-from: var(--surface); }

/* A one-line hint the first time a table is genuinely too wide to fit. */
.scroll-hint {
  display: none;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.scroll-hint::before { content: "↔  "; color: var(--steel); }
.has-hidden-columns + .scroll-hint { display: block; }

/* Give the table scrollbar real presence rather than a 2px sliver. */
.table-wrap { scrollbar-width: auto; scrollbar-color: var(--line-strong) transparent; }
.table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.table-wrap::-webkit-scrollbar-track { background: var(--surface-sunken); }
.table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid var(--surface-sunken);
  border-radius: var(--r-pill);
  background: var(--line-strong);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--steel); }

/* ------------------------------------------- 20a. Uncertainty and evidence */

/* Labelled bar rows used for zone probabilities and the sensitivity tornado. */
.zone-row {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) minmax(0, 2fr) 46px;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.zone-row:last-of-type { border-bottom: 0; }
.zone-name { color: var(--ink-2); font-size: 12px; }
.zone-value {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Provenance sits in a details element so it is present but never shouting —
   unless a model is being extrapolated, in which case it opens by default. */
.provenance-card { margin-bottom: 16px; }
.provenance-card summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.provenance-card summary .badge { margin-left: auto; }
.provenance-body { padding: 0 16px 16px; }
.provenance-body .table-wrap { max-height: 340px; }
.provenance-body td:first-child { max-width: 260px; }

.case-list {
  display: grid;
  gap: 1px;
  margin: 12px 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
}
.case-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  font-size: 13px;
}
.case-row .muted { font-size: 12px; margin-top: 2px; }
.case-tick {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 560px) {
  .zone-row { grid-template-columns: minmax(84px, 1fr) minmax(0, 1.4fr) 42px; gap: 8px; }
  .zone-name { font-size: 11px; }
}

/* ----------------------------------------------------- 20b. Advisor output */

/* Model prose rendered as a document rather than a wall of pre-wrap text:
   measured line length, a datum rule down the left edge, and headings that
   sit below the card's own h3. */
.advisor-response {
  max-width: 78ch;
  padding: 4px 0 4px 18px;
  border-left: 2px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.68;
}
.advisor-response > *:first-child { margin-top: 0; }
.advisor-response > *:last-child { margin-bottom: 0; }
.advisor-response h3,
.advisor-response h4,
.advisor-response h5 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.004em;
}
.advisor-response h3 { font-size: 16px; }
.advisor-response h4 { font-size: 14px; }
.advisor-response h5 {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.advisor-response p { margin: 0 0 12px; }
.advisor-response strong { color: var(--ink); font-weight: 600; }
.advisor-response ul,
.advisor-response ol { margin: 0 0 14px; padding-left: 20px; }
.advisor-response li { margin-bottom: 7px; padding-left: 3px; }
.advisor-response li::marker { color: var(--steel); font-size: 12px; }
.advisor-response ol li::marker { font-family: var(--font-mono); font-size: 11px; }
.advisor-response .divider { margin: 18px 0; }
.advisor-response code { font-size: 12px; }

@media (max-width: 720px) {
  .advisor-response { padding-left: 13px; font-size: 13px; line-height: 1.62; }
  .advisor-response ul, .advisor-response ol { padding-left: 17px; }
}

/* ------------------------------------------------------ 21. Overlays, toast */

.loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter: blur(2px);
}
.spinner {
  width: 30px;
  height: 30px;
  margin: 22px auto;
  border: 2.5px solid var(--line);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-region {
  position: fixed;
  z-index: 120;
  right: calc(18px + var(--safe-r));
  bottom: calc(18px + var(--safe-b));
  display: grid;
  gap: 9px;
  pointer-events: none;
}
.toast {
  max-width: 360px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  animation: toast-in .2s cubic-bezier(.2, .8, .3, 1);
}
.toast.error { border-left-color: var(--red); }
.toast.success { border-left-color: var(--green); }
.toast.info { border-left-color: var(--cyan); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 14, 26, .58);
  backdrop-filter: blur(4px);
  animation: fade-in .16s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.modal {
  width: min(700px, 96vw);
  max-height: 88vh;
  max-height: 88dvh;
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modal-in .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.99); } }
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.modal-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.modal-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.modal-close:hover { background: var(--surface-soft); color: var(--ink); }

.scrim {
  position: fixed;
  z-index: 45;
  inset: calc(var(--header-h) + var(--safe-t)) 0 0 0;
  background: rgba(4, 14, 26, .5);
  backdrop-filter: blur(2px);
  animation: fade-in .16s ease;
}

.noscript {
  margin: 120px auto;
  max-width: 560px;
  padding: 24px;
  border-radius: var(--r-md);
  background: #fff;
  color: #0f1d2e;
  text-align: center;
}

/* ------------------------------------------------------ 22. Authentication */

.auth-root {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: auto;
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
.auth-root[hidden] { display: none !important; }
body.auth-mode { overflow: hidden; }
body.auth-mode > .topbar,
body.auth-mode > .app-shell,
body.auth-mode > .skip-link { display: none !important; }

.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
  background: var(--surface);
}

.auth-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 4.4vw, 66px);
  padding-left: max(clamp(30px, 4.4vw, 66px), var(--safe-l));
  color: #fff;
  background-color: var(--navy);
  background-image: linear-gradient(150deg, #061423 0%, #0a2340 54%, #093054 100%);
}
.auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/static/velocity-field.svg") center / cover no-repeat;
  opacity: .8;
}
.auth-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgba(6, 18, 33, .9) 0%, rgba(7, 24, 44, .68) 46%, rgba(9, 40, 68, .32) 100%);
}
.auth-visual > * { position: relative; z-index: 1; }

.auth-brand {
  width: fit-content;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-md);
}
/* Square mark — constrain by height, not width, or it fills the panel. */
.auth-brand img { width: auto; height: clamp(54px, 6vw, 76px); display: block; }

.auth-visual-copy { max-width: 660px; margin: clamp(34px, 7vh, 84px) 0 32px; }
.auth-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #7fd2f4;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.auth-kicker::before { content: ""; width: 24px; height: 2px; background: var(--orange); }
.auth-visual h1 {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.02em;
}
.auth-visual-copy > p {
  max-width: 52ch;
  margin: 20px 0 0;
  color: #bed2e4;
  font-size: 14px;
  line-height: 1.62;
}
.auth-engineering-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 620px;
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .11);
}
.auth-engineering-stat {
  min-height: 90px;
  padding: 17px;
  background: rgba(6, 20, 38, .68);
}
.auth-engineering-stat strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
}
.auth-engineering-stat span {
  color: #93aec6;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.auth-visual-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: #6f8ba5;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .07em;
}

.auth-panel {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(26px, 4vw, 60px);
  padding-right: max(clamp(26px, 4vw, 60px), var(--safe-r));
  background-color: var(--surface-soft);
  background-image:
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.auth-card {
  width: min(500px, 100%);
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cyan);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.auth-card-head { margin-bottom: 24px; }
.auth-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.012em;
}
.auth-card-head p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.auth-mode-tab {
  min-height: 44px;
  padding: 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .13s ease, border-color .13s ease;
}
.auth-mode-tab:hover { color: var(--ink-2); }
.auth-mode-tab.active { border-color: var(--cyan); color: var(--ink); }

.auth-form { display: grid; gap: 15px; }
.auth-form .check-field { align-items: flex-start; min-height: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-form .check-field input { margin-top: 2px; }
.auth-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  box-shadow: 0 6px 18px rgba(11, 43, 78, .22);
}
.auth-trust-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.auth-lock { color: var(--green); font-size: 13px; line-height: 1.3; }
.auth-otp-email { display: block; margin-top: 6px; color: var(--ink); font-family: var(--font-mono); font-weight: 500; }

.otp-input {
  text-align: center;
  font-family: var(--font-mono) !important;
  font-size: 24px !important;
  font-weight: 500;
  letter-spacing: .36em;
  text-indent: .36em;
}
.auth-back {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--steel);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.auth-back:hover:not(:disabled) { color: var(--cyan-deep); text-decoration: underline; }
.auth-back:disabled { color: var(--muted); cursor: default; }

.auth-error {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  color: color-mix(in srgb, var(--red) 70%, var(--ink));
  font-size: 12px;
  line-height: 1.5;
}
.auth-success {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid var(--green);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
  color: color-mix(in srgb, var(--green) 72%, var(--ink));
  font-size: 12px;
  line-height: 1.5;
}
.auth-config-code {
  display: block;
  margin: 12px 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ==========================================================================
   23. Responsive ladder — largest first, so narrower rules always win
   ========================================================================== */

@media (max-width: 1440px) {
  .hero { grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); }
}

@media (max-width: 1200px) {
  :root { --sidebar-w: 250px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-layout, .split { grid-template-columns: 1fr; }
  .metrics.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: 0; }
  .hero-ring { width: min(180px, 22vw); }
  .hero-ring strong { font-size: 36px; }
}

/* ---- Drawer navigation ---- */
@media (max-width: 920px) {
  :root { --header-h: 62px; }

  .menu-button { display: grid; }
  .topbar { gap: 10px; padding-inline: calc(14px + var(--safe-l)) calc(14px + var(--safe-r)); }
  .brand { height: 46px; padding: 3px 7px; margin-left: -7px; }
  .brand-mark { height: 30px; }

  .sidebar {
    width: min(300px, 84vw);
    transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.3, .8, .3, 1);
    box-shadow: 16px 0 46px rgba(3, 12, 24, .32);
  }
  .sidebar.open { transform: translateX(0); }
  /* Lock the page behind the drawer instead of letting it scroll away. */
  body.nav-open { overflow: hidden; }

  .workspace { width: 100%; margin-left: 0; padding-top: 20px; }

  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero-graphic { display: none; }
  .hero h2 { max-width: 22ch; }

  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid, .form-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual {
    min-height: 0;
    padding: 30px 26px 34px;
    padding-left: max(26px, var(--safe-l));
    padding-top: max(30px, calc(var(--safe-t) + 18px));
  }
  .auth-visual-copy { margin: 34px 0 10px; }
  .auth-visual h1 { font-size: clamp(28px, 6vw, 38px); }
  .auth-visual-copy > p, .auth-engineering-line, .auth-visual-foot { display: none; }
  .auth-panel { min-height: 0; padding: 30px 20px calc(48px + var(--safe-b)); }
  .auth-card { width: min(560px, 100%); }
}

@media (max-width: 720px) {
  body { font-size: 14px; }

  .workspace { padding-top: 18px; padding-bottom: calc(48px + var(--safe-b)); }
  .text-button { display: none; }
  .header-actions { gap: 5px; }

  .page-header { align-items: flex-start; }
  .page-heading { gap: 11px; }
  .page-heading-icon { width: 40px; height: 40px; }
  .page-heading-icon svg { width: 18px; height: 18px; }
  .page-heading p { font-size: 12px; }

  .hero { padding: 26px 22px; border-radius: var(--r-md); }
  .hero p { margin-bottom: 20px; font-size: 13px; }
  .hero-actions .button { flex: 1 1 auto; }

  .module-grid, .form-grid, .form-grid.two, .form-grid.four, .split { grid-template-columns: 1fr; }
  .module-card { min-height: 0; }

  .card { padding: 17px 15px; }
  .chart-card { padding: 14px 12px; }
  .chart-wrap { height: 300px; }
  .chart-wrap.short { height: 268px; }
  .chart-wrap.tall { height: 340px; }

  /* 16px stops iOS Safari zooming the viewport when a field takes focus. */
  .field input, .field select, .field textarea { font-size: 16px; min-height: var(--tap); }
  .otp-input { font-size: 22px !important; }

  .table-wrap { max-height: 420px; }
  .toast-region { left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); }
  .toast { max-width: none; }
  .modal { padding: 20px 17px; }
}

@media (max-width: 560px) {
  .topbar { padding-inline: calc(9px + var(--safe-l)) calc(9px + var(--safe-r)); gap: 6px; }
  .account-name, .account-caret { display: none; }
  .account-button { padding: 3px; border-color: transparent; background: transparent; }
  .unit-button { min-width: 62px; padding-inline: 10px; font-size: 10px; }
  .brand { padding: 3px 5px; margin-left: -5px; }
  .brand-mark { height: 25px; }

  .workspace { padding-inline: calc(13px + var(--safe-l)) calc(13px + var(--safe-r)); }
  .metrics, .metrics.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 12px; }
  .hero h2 { max-width: none; }
  .section-bar { gap: 8px; margin-top: 18px; }
  .actions .button { flex: 1 1 auto; }

  .auth-visual { padding: 24px 18px 28px; }
  .auth-brand img { height: 52px; }
  .auth-visual-copy { margin: 24px 0 4px; }
  .auth-panel { padding: 22px 13px calc(40px + var(--safe-b)); }
  .auth-card { padding: 22px 18px; }
  .auth-card-head h2 { font-size: 22px; }
}

@media (max-width: 340px) {
  .workspace { padding-inline: calc(10px + var(--safe-l)) calc(10px + var(--safe-r)); }
  .card { padding: 14px 12px; }
  .topbar { padding-inline: calc(6px + var(--safe-l)) calc(6px + var(--safe-r)); }
  .brand-mark { height: 20px; }
  .unit-button { min-width: 0; padding-inline: 7px; font-size: 9px; }
  .hero { padding: 20px 14px; }
}

@media (max-width: 360px) {
  :root { --grid-size: 18px; }
  .metrics, .metrics.five { grid-template-columns: 1fr; }
  .workflow-label { display: none; }
  .chart-wrap { height: 270px; }
  .chart-wrap.tall { height: 310px; }
  .unit-button { min-width: 0; padding-inline: 9px; }
  .brand-mark { height: 22px; }
  .hero { padding: 22px 17px; }
}

/* ------------------------------------------------ 24. Input mode & motion */

/* Coarse pointers get full-size hit targets regardless of viewport width. */
@media (hover: none) and (pointer: coarse) {
  .workflow-step,
  .workflow-reset,
  .tool-chip,
  .tab-button,
  .unit-button,
  .icon-button,
  .auth-back,
  .modal-close,
  .button,
  .nav-item,
  .sidebar-search input { min-height: var(--tap); }
  .sidebar-search input { height: var(--tap); }
  .icon-button, .modal-close { width: var(--tap); }
  .module-card:hover, .button:hover { transform: none; }
}

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

@media (prefers-contrast: more) {
  :root { --line: #9fb2c6; --line-strong: #7e94ab; --muted: #4b5f77; }
}

/* -------------------------------------------------------------- 25. Print */

@media print {
  .topbar, .sidebar, .workflow-bar, .actions, .tabs, .toast-region,
  .scrim, .engineering-status-strip, .skip-link { display: none !important; }
  .app-shell { padding: 0; }
  .workspace {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: #fff;
  }
  .card, .chart-card, .metric {
    break-inside: avoid;
    border-color: #ccc;
    box-shadow: none;
  }
  .card::before { display: none; }
  .hero { background: #fff; color: #000; box-shadow: none; }
  .hero::before, .hero::after { display: none; }
  body { background: #fff; color: #111; font-size: 11pt; }
  a { text-decoration: underline; }
}


/* ------------------------------------------------- 24. Pre-render landing */

/* Content delivered in the HTML so the page is not empty to a crawler or to a
   reader whose JavaScript has not yet run. The application replaces it on
   first render; it is styled so that the brief moment it is visible does not
   look broken. */
#staticLanding {
  max-width: 72ch;
  padding: 26px 0 8px;
  color: var(--ink-2);
}
#staticLanding h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.14;
  letter-spacing: -.012em;
}
#staticLanding h2 {
  margin: 24px 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
}
#staticLanding p { margin: 0 0 12px; line-height: 1.62; }
#staticLanding ul { margin: 0 0 14px; padding-left: 20px; }
#staticLanding li { margin-bottom: 7px; line-height: 1.55; }
#staticLanding a { color: var(--cyan-deep); }
#staticLanding small { color: var(--muted); font-size: 12px; }


/* ----------------------------------------------------- 25. Legal pages */

.legal-page { max-width: 76ch; }
.legal-meta {
  margin: -4px 0 14px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
.legal-page h3 {
  margin: 22px 0 7px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
}
.legal-page p { margin: 0 0 11px; color: var(--ink-2); line-height: 1.66; }
.legal-page .actions { margin-top: 22px; }


/* ------------------------------------------- 26. Field validation messages */

/* Replaces the native validation bubble, which auto-dismisses and is not
   announced by screen readers. These stay until the field is corrected. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--red);
  font-size: 12px;
  line-height: 1.45;
}
.field-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}
[aria-invalid="true"] {
  border-color: var(--red) !important;
}
[aria-invalid="true"]:focus-visible {
  outline-color: var(--red);
}
.check-field [aria-invalid="true"] {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Legal pages shown to a reader who is not signed in. */
body.public-only .sidebar,
body.public-only .workflow-bar,
body.public-only .header-actions .text-button,
body.public-only #accountButton { display: none; }
body.public-only .app-shell { grid-template-columns: 1fr; }
body.public-only .workspace { padding-top: 26px; }
.public-return { margin: 22px 0 8px; }


/* --------------------------------------------- 27. Illustrated module icons */

/* Raster illustrations used where there is room for the detail to read. They
   carry their own colour and soft shadow, so the navy plate used behind the
   line icons is removed rather than fighting them. */
.art-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.module-card .card-icon.is-art,
.page-heading-icon.is-art {
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.module-card .card-icon.is-art {
  width: 84px;
  height: 84px;
  margin-bottom: 2px;
}
.page-heading-icon.is-art {
  width: 54px;
  height: 54px;
  margin-right: 2px;
}

/* The illustrations are drawn for light backgrounds and several have an opaque
   white panel as part of the artwork — a monitor screen, a document, a plot
   frame. On a dark card those panels read as bright rectangles while the fully
   transparent icons do not, so the set looks inconsistent. Removing the panels
   is not possible without cutting into the artwork, so on the dark theme every
   illustration is given the same light ground instead. */
[data-theme="dark"] .module-card .card-icon.is-art,
[data-theme="dark"] .page-heading-icon.is-art {
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-md);
  background: #eef2f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
[data-theme="dark"] .page-heading-icon.is-art { padding: 5px; }

@media (max-width: 720px) {
  .module-card .card-icon.is-art { width: 64px; height: 64px; }
  .page-heading-icon.is-art { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .module-card .card-icon.is-art { width: 56px; height: 56px; }
}