/* ===========================================================================
   TerraTester — visual system  ·  "Blueprint"
   ---------------------------------------------------------------------------
   A premium, technical identity drawn from the subject's own world: an
   engineering document. Cool titanium paper, one drafting blue, a coordinate
   grid, and monospaced labels/figures. It reads as a spec sheet, not a
   brochure.

   Three rules run through the whole file:

     1. One accent — drafting blue — spent sparingly: a rule, an active state,
        one primary button per screen. An accent used everywhere is decoration.
     2. Geometry is tight. Radius is 2px; cards carry drafting corner-ticks
        rather than soft rounding.
     3. Display in Space Grotesk, body in Inter, every label and figure in IBM
        Plex Mono. The monospace is the technical signal and is used on purpose.
   =========================================================================== */

/* ---------------------------------------------------------------- fonts ---
   Self-hosted so the strict Content-Security-Policy (default-src 'self') is
   never widened to a third party. Latin subset only.
   ------------------------------------------------------------------------ */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"), url("/assets/fonts/space-grotesk-latin-400-normal.woff") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"), url("/assets/fonts/space-grotesk-latin-500-normal.woff") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"), url("/assets/fonts/space-grotesk-latin-600-normal.woff") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"), url("/assets/fonts/space-grotesk-latin-700-normal.woff") format("woff"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"), url("/assets/fonts/inter-latin-400-normal.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"), url("/assets/fonts/inter-latin-500-normal.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"), url("/assets/fonts/inter-latin-600-normal.woff") format("woff"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"), url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff") format("woff"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"), url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff") format("woff"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"), url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff") format("woff"); }

:root {
  /* ink & structure */
  --ink:        #0d1722;   /* darkest — footer ground */
  --navy:       #14263a;   /* display headings, figures */
  --navy-deep:  #0e2136;   /* dark anchor bands: sign-in brand, CTA */
  --slate:      #5a6a78;   /* secondary text, labels */
  --blue:       #33526b;   /* links, lede */

  /* accent — drafting blue */
  --accent:      #2b52d6;
  --accent-deep: #1e3fb0;
  --accent-soft: #5b7ce0;

  /* grounds */
  --paper:      #e9edf1;
  --paper-alt:  #eef2f6;
  --card:       #ffffff;

  /* lines */
  --line:        #d4dce4;
  --line-strong: #b9c5d0;

  /* text on dark bands */
  --on-dark:      #e9eef4;
  --on-dark-soft: #a7b6c6;

  /* semantic */
  --ok:   #1f7a4d;
  --warn: #b07d18;
  --bad:  #c0392b;

  /* utility tints */
  --th-bg:  #eef2f6;
  --hover:  rgba(43, 82, 214, 0.045);
  --focus:  rgba(43, 82, 214, 0.16);
  --grid:   rgba(43, 82, 214, 0.06);

  --gutter:  1.5rem;
  --measure: 36rem;
  --bar-h:   3.9rem;
  --drawer-w: min(15rem, 88vw);
  --shell:   78rem;

  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-card:    0 1px 2px rgba(14, 33, 54, 0.05), 0 10px 26px rgba(14, 33, 54, 0.06);
  --shadow-overlay: 0 20px 44px rgba(14, 33, 54, 0.20);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--bar-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 var(--body);
  overflow-wrap: break-word;
  text-align: left;
}

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--accent); color: #fff; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: 0;
  color: var(--navy);
}

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

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 80;
  background: var(--navy-deep); color: var(--on-dark);
  padding: 0.6rem 1rem;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- top bar --
   Light chrome. A hairline-ruled white bar with the brand chip at left; the
   burger sits at the top right and the panel it opens is a left drawer.
   ------------------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem var(--gutter);
  background: var(--card);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
  min-width: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
  font: 700 0.9rem/1 var(--mono);
  letter-spacing: 0;
}

.brand-name {
  font: 500 0.6rem/1 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right { display: flex; align-items: center; gap: 0.9rem; }

.topbar-user {
  display: none;
  font: 500 0.64rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.inline-form { margin: 0; }

.nav-toggle,
.site-nav-toggle {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
}

.nav-toggle span,
.site-nav-toggle span {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"],
.site-nav-toggle[aria-expanded="true"] { border-color: var(--accent); }

.nav-toggle[aria-expanded="true"] span:nth-child(1),
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2),
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3),
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------- overlay navigation */

.shell { position: relative; }

/* The panel is a drawer anchored to the left edge and slid off-screen until
   opened. The burger that controls it sits at the top right; the two need not
   be adjacent because the drawer is fixed to the viewport, not to the button. */
.sidebar {
  position: fixed;
  top: var(--bar-h);
  left: 0;
  bottom: 0;
  z-index: 45;
  width: var(--drawer-w);
  padding: 0.85rem 0.85rem 1rem;
  background: var(--card);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.26s ease, visibility 0.26s ease;
}

.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Account actions sit at the foot of the rail, always visible. */
.sidebar-account { flex: none; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.account-id { display: flex; flex-direction: column; gap: 1px; padding: 0.2rem 0.7rem 0.6rem; }
.account-name { font: 600 0.85rem/1.25 var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-email { font: 400 0.72rem/1.2 var(--body); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-logout { margin: 0; }
.nav-link--button { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; }

.sidebar.is-open { visibility: visible; transform: translateX(0); }

/* Dim the page beside an open drawer. The scrim is placed to the RIGHT of the
   panel (left edge at the drawer's width) rather than across the whole viewport,
   so it never paints over the panel itself — the panel keeps its solid white
   background. pointer-events:none lets a tap on the dimmed area fall through to
   the document handler that closes the panel, so no scrim element or extra
   script is needed. */
/* No page scrim: the drawer is a clean white panel with a border and drop
   shadow, and an outside tap still closes it via the document handler in app.js.
   A scrim sized against the viewport (100vw) is avoided on purpose — with a
   vertical scrollbar present it overflows horizontally by the scrollbar width. */

.nav-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--navy);
  text-decoration: none;
  font: 500 0.9rem/1.2 var(--body);
  padding: 0.6rem 0.7rem;
  border-radius: 7px;
  transition: background 0.15s ease;
}

.nav-ico { flex: none; width: 1.15rem; height: 1.15rem; color: var(--navy); }
.nav-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A whisper of background on hover — colour and icon stay put, so there is no
   mouse-over "event", just a calm affordance. Overrides the global a:hover. */
.nav-link:hover { background: rgba(20, 38, 58, 0.05); color: var(--navy); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The active item is the only strong state: a soft accent pill, held on hover. */
.nav-link.is-active,
.nav-link.is-active:hover { background: rgba(43, 82, 214, 0.10); color: var(--accent); font-weight: 600; }
.nav-link.is-active .nav-ico { color: var(--accent); }

.nav-list--top { margin-bottom: 0.35rem; }

/* Collapsible sections. Native <details>, so the open/closed state needs no
   JavaScript and stays accessible; only the active section renders `open`. */
.nav-group { margin: 0; }

.nav-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  list-style: none;
  border-radius: 7px;
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  user-select: none;
}
.nav-group__head::-webkit-details-marker { display: none; }
.nav-group__head:hover { background: rgba(20, 38, 58, 0.04); }
.nav-group__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav-group__chev { flex: none; color: var(--slate); transition: transform 0.18s ease; }
.nav-group[open] > .nav-group__head .nav-group__chev { transform: rotate(180deg); }
.nav-group .nav-list { padding: 0 0 0.4rem; }
.nav-group:not([open]) > .nav-list { display: none; }

.nav-section-label {
  display: block;
  margin: 0 0 0.35rem 0.7rem;
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
}

/* -------------------------------------------------------------- content ---
   Left-aligned, one column, the density a working screen needs.
   ------------------------------------------------------------------------ */

.main {
  max-width: var(--shell);
  margin: 0;
  padding: 2rem var(--gutter) 5rem;
  text-align: left;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.page-header > div { min-width: 0; }

.eyebrow {
  display: block;
  margin: 0 0 0.7rem;
  font: 500 0.62rem/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.page-title .badge { vertical-align: middle; margin-left: 0.5rem; }

.page-subtitle {
  margin: 0.6rem 0 0;
  max-width: var(--measure);
  color: var(--slate);
  font-size: 1rem;
}

/* ---------------------------------------------------------------- panels -- */

.panel,
.form-card {
  margin: 0 0 2rem;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1.5rem;
}

/* Two columns once there is room, so a form uses the container instead of a
   narrow ribbon down the left. Wide controls (long text, choice lists, the
   action row) span both columns. */
@media (min-width: 45rem) {
  .form-card { grid-template-columns: 1fr 1fr; }
}

.form-card > .field { max-width: none; }
.form-card > .form-actions,
.form-card > fieldset,
.form-card > p,
.form-card > h2,
.form-card > .check-row,
.form-card > .field--wide { grid-column: 1 / -1; }
.form-card > .field:has(textarea) { grid-column: 1 / -1; }

.panel-title,
.section-title {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.panel-title .badge { vertical-align: middle; margin-left: 0.4rem; }
.panel-title + .field-hint, .panel-title + p { margin-top: 0; }

.panel-narrow { max-width: 34rem; }
.panel-subtitle {
  margin: 1.5rem 0 0.35rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
}

.dashboard-section { margin-top: 2.5rem; }
.dashboard-section > .section-title { margin-bottom: 1rem; }

/* Read-only key/value summary (profile account details). */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.2rem 1.5rem;
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--th-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.detail { display: flex; flex-direction: column; gap: 2px; padding: 0.4rem 0; }
.detail-label { margin: 0; font: 600 0.58rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.detail-value { margin: 0; font: 400 0.95rem/1.4 var(--body); color: var(--ink); overflow-wrap: anywhere; }

.form-section {
  margin: 2rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.kv { margin: 0; display: grid; gap: 0; }

.kv > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.kv dt { font: 500 0.62rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.kv dd { margin: 0; margin-left: auto; text-align: right; font-size: 0.95rem; }

.card-grid { display: grid; gap: 1.5rem; margin: 0 0 2rem; }

/* Cards carry drafting corner-ticks (top-left, bottom-right) — the blueprint
   signature — in place of a coloured top bar. */
.stat-card,
.feature,
.example-card { position: relative; }

.stat-card::before, .feature::before, .example-card::before,
.stat-card::after,  .feature::after,  .example-card::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1.5px solid var(--accent);
  opacity: 0.55;
  pointer-events: none;
}
.stat-card::before, .feature::before, .example-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.stat-card::after,  .feature::after,  .example-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.stat-card {
  margin: 0;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
}

.stat-label { display: block; font: 500 0.6rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); }

.stat-value {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.stat-note { display: block; margin-top: 0.45rem; font-size: 0.85rem; color: var(--slate); }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block;
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover, .btn:focus-visible { border-color: var(--accent); color: var(--accent); }

.btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

.btn-quiet { border-color: transparent; color: var(--slate); padding-left: 0.6rem; padding-right: 0.6rem; }
.btn-quiet:hover, .btn-quiet:focus-visible { color: var(--accent); border-color: var(--line-strong); }

.btn-sm { font-size: 0.6rem; padding: 0.55rem 0.9rem; letter-spacing: 0.12em; }
.btn-block { display: block; width: 100%; }

/* Ghost button used on the light hero. */
.btn-onaurora { color: var(--navy); border-color: var(--line-strong); }
.btn-onaurora:hover, .btn-onaurora:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }

.topbar .btn { color: var(--slate); border-color: var(--line-strong); }
.topbar .btn:hover, .topbar .btn:focus-visible { color: var(--accent); border-color: var(--accent); }

.form-actions,
.hero-actions,
.filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.form-actions form { margin: 0; }

/* ----------------------------------------------------------------- forms -- */

.field { display: block; margin: 0 0 1.35rem; max-width: var(--measure); }

.field-label,
.field > span:first-child {
  display: block;
  margin-bottom: 0.45rem;
  font: 500 0.62rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.input,
.table-filter {
  width: 100%;
  font: 400 1rem/1.5 var(--body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus,
.table-filter:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

textarea.input { resize: vertical; min-height: 7rem; }

.field-hint {
  display: block;
  margin-top: 0.45rem;
  max-width: var(--measure);
  font-size: 0.85rem;
  color: var(--slate);
}

.field-inline { margin: 0; max-width: 14rem; }
.input-inline { max-width: 14rem; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.filter-bar .filter-actions { margin: 0; }

/* ---------------------------------------------------------------- tables --
   One table style. Headers are sort links, the row beneath them filters each
   column, and below 52rem every row becomes a stacked card using the
   data-label attribute the shared partial always emits.
   ------------------------------------------------------------------------ */

.table-shell { margin: 0 0 2rem; }

.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}

.table { width: 100%; border-collapse: collapse; table-layout: auto; text-align: left; font-size: 0.92rem; }

.table th,
.table td {
  text-align: left;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.table thead th {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  font: 600 0.58rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--th-bg);
  white-space: normal;
}

/* Keep the row of action controls compact so it never widens the table. */
.col-actions .inline-form { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.col-actions .inline-form .btn { flex: none; }
.col-actions .input-inline,
.col-actions select.input {
  flex: none;          /* a flex item select otherwise shrinks to its arrow */
  width: 9rem;
  max-width: none;
  padding: 0.4rem 0.5rem;
  font-size: 0.82rem;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover); }

.table-empty { padding: 2.5rem 1rem; color: var(--slate); font-style: italic; }

.col-actions { width: 1%; white-space: nowrap; }

.table-sort { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; }
.table-sort:hover { color: var(--accent); }

.table-sort__mark {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.25;
}

.table-sort.is-sorted { color: var(--accent); }
.table-sort.is-sorted .table-sort__mark { opacity: 1; }
.table-sort.is-asc .table-sort__mark { border-top: 0; border-bottom: 5px solid currentColor; }

/* The filter row sits at the top of the head, above the column names. It is a
   pale input band; each field fills its column and Apply sits at the far right. */
.table-filters td {
  padding: 0.6rem 0.7rem;
  background: var(--card);
  border-bottom: 1px solid var(--line-strong);
  vertical-align: middle;
}

.table-filters__apply { text-align: right; white-space: nowrap; }
.table-filters__apply .btn { width: auto; }

.table-filter { font-size: 0.85rem; padding: 0.45rem 0.6rem; }

.table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.25rem;
}

.table-foot__actions { display: flex; gap: 0.5rem; }

/* ------------------------------------------------------------ pagination -- */

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; }

.pagination-summary {
  margin: 0;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--slate);
}

.perpage { display: inline-flex; align-items: center; gap: 0.5rem; }
.perpage-label { font: 500 0.62rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }

.perpage-select {
  font: 500 0.8rem/1 var(--mono);
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}
.perpage-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.pagination-list { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.55rem;
  text-decoration: none;
  font: 500 0.82rem/1 var(--mono);
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pagination-link:hover { border-color: var(--accent); color: var(--accent); }
.pagination-link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination-link.is-disabled { opacity: 0.4; pointer-events: none; }
.pagination-arrow { padding: 0; }
.pagination-arrow svg { display: block; }

/* ---------------------------------------------------------------- badges -- */

.badge {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  font: 500 0.58rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.badge-ok    { color: var(--ok);     background: rgba(31, 122, 77, 0.08); }
.badge-fail  { color: var(--bad);    background: rgba(192, 57, 43, 0.08); }
.badge-hold  { color: var(--warn);   background: rgba(176, 125, 24, 0.10); }
.badge-brand { color: var(--accent); background: rgba(43, 82, 214, 0.08); }
.badge-muted { color: var(--slate);  background: rgba(90, 106, 120, 0.08); }

/* ---------------------------------------------------------------- alerts -- */

.alert {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
  border-radius: 2px;
  font-size: 0.95rem;
}

.alert-success { border-left-color: var(--ok); }
.alert-error   { border-left-color: var(--bad); }

.check-row { display: flex; align-items: center; gap: 0.6rem; }
.check { display: flex; align-items: center; gap: 0.6rem; }

/* ------------------------------------------------------------ chain, cards */

/* The five links in the chain are a real sequence — sample to certificate — so
   they read left-to-right as numbered boxes, one step per box, stacking on
   narrow screens. Column count is set in the wide-screen blocks below. */
.chain { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: 1fr; }

.chain-step {
  display: block;
  padding: 1.5rem 1.35rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
}

.chain-index { display: block; margin-bottom: 0.6rem; font: 600 1rem/1 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.chain-title { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.01em; }
.chain-step p { margin: 0; font-size: 0.9rem; color: var(--slate); }

.figure-note, .example-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--slate); }

.example-grid { display: grid; gap: 1.5rem; margin: 0 0 2rem; }

.example-card {
  margin: 0;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
}

.example-card-title { margin: 0 0 0.5rem; font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; }
.example-verdict { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ landing page */

.body-landing { background: var(--paper); }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--card);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.site-nav-inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem var(--gutter);
}

.site-nav-links {
  position: fixed;
  top: var(--bar-h);
  left: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: var(--drawer-w);
  padding: 0.85rem;
  background: var(--card);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.26s ease, visibility 0.26s ease;
}

.site-nav-links.is-open { visibility: visible; transform: translateX(0); }

.site-nav-links a {
  color: var(--slate);
  text-decoration: none;
  font: 500 0.9rem/1.2 var(--body);
  padding: 0.6rem 0.7rem;
  border-radius: 7px;
  transition: background 0.15s ease;
}

.site-nav-links a:hover, .site-nav-links a:focus-visible { background: rgba(20, 38, 58, 0.05); color: var(--slate); }

/* The top-bar sign-in is a normal primary button (white on blue, mono),
   vertically centred in the bar like every other control. */
.site-nav-cta { white-space: nowrap; }

/* Hero — an engineering sheet: cool paper under a faint coordinate grid. */
.hero {
  position: relative;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(180deg, #eef2f6 0%, var(--paper) 100%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 4rem var(--gutter) 5rem;
  display: grid;
  gap: 3rem;
}

.hero .eyebrow { color: var(--accent); }

.hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 4.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.hero-lede { margin: 1.6rem 0 0; max-width: 34rem; color: var(--slate); font-size: 1.08rem; }

.hero-copy { min-width: 0; }

.hero-stats { display: grid; gap: 1rem; margin: 0; padding: 0; }

.hero-stats > div {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
}

.hero-stats dt {
  font: 500 0.6rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.hero-stats dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.section { padding: 4.5rem 0; }
.section-inner { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.section-alt { background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-lede { margin: 0 0 2.5rem; max-width: var(--measure); font-size: 1.08rem; color: var(--blue); }

.feature-grid { display: grid; gap: 1.5rem; }

.feature {
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
}

.feature-title { margin: 0 0 0.6rem; font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; }

/* Dark anchor bands — the deep blueprint navy gives the light page weight. */
.cta {
  background:
    radial-gradient(90% 120% at 85% 100%, rgba(43, 82, 214, 0.4), transparent 60%),
    var(--navy-deep);
  color: var(--on-dark);
}

.cta-inner { max-width: var(--shell); margin: 0 auto; padding: 4.5rem var(--gutter); }
.cta-title { margin: 0 0 1rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; }
.cta-lede { margin: 0 0 2rem; max-width: var(--measure); color: var(--on-dark-soft); }

.site-footer { background: var(--ink); color: var(--on-dark-soft); }

.site-footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2.25rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: baseline;
  font: 500 0.64rem/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer-note { margin: 0; margin-right: auto; }

/* ----------------------------------------------------------- charts (svg) -- */

.chart-figure { margin: 0 0 1.5rem; }
.chart { width: 100%; height: auto; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart-point { fill: var(--navy); }
.chart-mean { stroke: var(--slate); stroke-dasharray: 4 3; stroke-width: 1.5; }
.chart-spec { stroke: var(--accent); stroke-width: 1.5; }
.chart-limit { stroke: var(--bad); stroke-dasharray: 2 3; stroke-width: 1.5; }
.chart-tag { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--slate); }
.chart-tag-mean { fill: var(--slate); }
.chart-tag-spec { fill: var(--accent); }
.chart-tag-limit { fill: var(--bad); }

/* -------------------------------------------------------- split (sign in) -- */

.body-split { background: var(--navy-deep); }

.split { display: grid; min-height: 100vh; }

.split-brand {
  padding: 3rem var(--gutter);
  background:
    radial-gradient(110% 90% at 88% 12%, rgba(43, 82, 214, 0.35), transparent 60%),
    linear-gradient(168deg, #123 0%, var(--navy-deep) 60%, #0a1a2e 100%);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-eyebrow { font: 500 0.6rem/1 var(--mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-soft); }
.split-title { margin: 0.75rem 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(2.1rem, 1.6rem + 2.6vw, 3.2rem); line-height: 1.02; letter-spacing: -0.02em; }
.split-headline { margin: 0.75rem 0 0; font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; }
.split-subtitle, .split-lede { margin: 1rem 0 0; max-width: 28rem; color: var(--on-dark-soft); }
.split-points { margin: 2rem 0 0; padding: 0; list-style: none; }
.split-point { padding: 0.75rem 0; border-bottom: 1px solid rgba(233, 238, 244, 0.16); font-size: 0.95rem; }
.split-footer { margin: 2rem 0 0; font: 500 0.62rem/1.6 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); }

.split-form { display: flex; align-items: center; justify-content: flex-start; padding: 3rem var(--gutter); background: var(--paper); }
.split-form-inner { width: 100%; max-width: 26rem; text-align: left; }

/* --------------------------------------------------------------- errors --- */

.body-bare { background: var(--paper); }

.error-shell { max-width: 52rem; margin: 0 auto; padding: 4rem var(--gutter); text-align: left; }
.error-status { font-family: var(--display); font-weight: 600; font-size: 4rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent); margin: 0; }
.error-message { margin: 0.75rem 0 2rem; color: var(--slate); }

/* ------------------------------------------------------------ wider screens */

@media (min-width: 48rem) {
  :root { --gutter: 2.5rem; --bar-h: 4.25rem; }

  .topbar-user { display: inline; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .chain { grid-template-columns: repeat(3, 1fr); }
  .example-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .main { padding: 2.5rem var(--gutter) 6rem; }
}

@media (min-width: 60rem) {
  :root { --gutter: 3.5rem; }

  .hero-inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; padding: 6rem var(--gutter) 7rem; gap: 4.5rem; }
  .hero-stats { grid-template-columns: 1fr; }
  .section { padding: 6rem 0; }
}

/* Signed-in shell only. At 1000px and up the navigation is a permanent rail on
   the left and the burger disappears; below that it stays the drawer defined
   above. 62.5rem == 1000px, the same width the toggle's data-breakpoint uses to
   auto-close on resize. The public landing nav uses .site-nav-* classes and is
   deliberately not matched here, so it keeps its burger at every width. */
@media (min-width: 62.5rem) {
  /* Signed-in shell: dock the sidebar as a permanent rail. */
  .sidebar {
    width: 15rem;
    transform: none;
    visibility: visible;
    box-shadow: none;
    transition: none;
  }
  .sidebar.is-open::after { content: none; }
  .main { margin-left: 15rem; }
  .topbar .nav-toggle { display: none; }

  /* Public landing: the section links sit inline in the bar and the burger is
     retired. Below this width they collapse back to the left drawer. Order puts
     the links before the sign-in button; the brand's auto margin holds the
     whole group to the right. */
  .site-nav-toggle { display: none; }
  .site-nav-links {
    position: static;
    inset: auto;
    order: 2;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .site-nav-links a { padding: 0.35rem 0; border-radius: 0; }
  .site-nav-links a:hover, .site-nav-links a:focus-visible { background: transparent; color: var(--accent); }
  .site-nav-links.is-open::after { content: none; }
  .site-nav-cta { order: 3; }

  /* The chain becomes the full five-across sequence. */
  .chain { grid-template-columns: repeat(5, 1fr); }
}

/* Below this the table stops being a grid and becomes stacked cards. Every
   cell carries its own label, so nothing depends on the reader remembering
   which column they were in. */
@media (max-width: 52rem) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }

  .table thead { display: none; }

  .table tr { padding: 0.5rem 0; border-bottom: 1px solid var(--line-strong); }

  .table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 1rem;
    border: 0;
    text-align: left;
  }

  .table td::before {
    content: attr(data-label);
    flex: none;
    font: 500 0.58rem/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
  }

  .table .table-empty { justify-content: flex-start; }
  .table .table-empty::before { content: none; }

  .col-actions { width: auto; }
  .table-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}