/* The UA stylesheet's [hidden] rule is namespaced to HTML, so it does not
   match an inline SVG sprite. Without this the sprite occupies layout. */
svg[hidden] { display: none !important; }

/* Jhome SEO — app shell design system.
 *
 * Direction: tech-green-dark-mode-modern. An analyst's instrument, not a
 * marketing site: matte near-black surfaces, hairline framing, mono system
 * labels, and one signal-green accent that only ever marks live state.
 *
 * Every colour, radius, and duration used anywhere in this file is declared
 * once on :root below. If a component needs a new value, add it here first.
 */

:root {
  /* Surfaces. Off-black, never #000, tinted a few degrees toward the accent. */
  --bg: #0a0c10;
  --surface: #10141a;
  --surface-2: #161b23;
  --line: #212934;
  --line-strong: #2c3644;

  /* Ink. --ink-faint is the floor: 4.6:1 on --bg, so fine print never needs
     opacity to sit back. Muting a token with opacity breaks contrast. */
  --ink: #e8edf3;
  --ink-muted: #98a4b4;
  --ink-faint: #6f7c8d;

  /* Signal. --accent-rgb carries the same colour as channels so components can
     derive tints with rgb(var(--accent-rgb) / N%) instead of a second literal. */
  --accent: #22c58b;
  --accent-rgb: 34 197 139;
  --accent-soft: #7fe0bb;

  /* Mobile bottom-tab chrome — Trading Jay values, verbatim, accent swapped. */
  --nav-bg: #0a0c14;
  --nav-line: #1e2535;
  --nav-idle: #718096;
  --nav-tile: #141720;
  --nav-tile-label: #a0aec0;
  --nav-handle: #2d3748;
  --drawer-bg: #0d0f18;
  --nav-h: 60px;
  --scrim: rgb(0 0 0 / 55%);
  --danger: #f0616d;
  --danger-rgb: 240 97 109;

  /* Type. System faces only: nothing is fetched at request time. */
  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;

  --text-body: 1.0625rem; /* 17px */
  --text-lead: 1.3125rem; /* 21px */
  --text-fine: 0.875rem; /* 14px floor */
  --leading: 1.6;

  /* Shape. Cards top out at 14px; the drawer keeps its 18px house value. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-drawer: 18px;

  /* Rhythm. Tight inside a group, generous between sections. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 112px;

  --measure: 62ch;
  --shell-max: 1080px;

  /* Motion. Functional only: feedback on touch, never entrances. */
  --t-micro: 160ms;
  --t-state: 220ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration-color: rgb(var(--accent-rgb) / 45%);
  text-underline-offset: 3px;
  transition: color var(--t-micro) var(--ease-out);
}

a:hover {
  color: var(--accent-soft);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 620;
}

p {
  margin: 0;
}

/* ---------------------------------------------------------------- shell -- */

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The page stretches with flex, never 100vh — a 100vh page pushes the brand
   credit below the fold on every single screen. */
.shell__page {
  flex: 1;
}

.shell__credit {
  flex: none;
  border-top: 1px solid var(--line);
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--text-fine);
  color: var(--ink-faint);
}

.shell__credit a {
  color: inherit;
  text-decoration: none;
}

.shell__credit a:hover {
  color: var(--ink-muted);
  text-decoration: underline;
}

.wrap {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: calc(-1 * var(--s-9));
  z-index: 50;
  background: var(--accent);
  color: var(--bg);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-weight: 640;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--s-4);
  color: var(--bg);
}

/* ------------------------------------------------------------- wordmark -- */

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mark__glyph {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex: none;
}

.mark:hover {
  color: var(--ink);
}

/* ------------------------------------------------------------ desktop nav -- */

.topnav {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 64px;
}

.topnav__links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.topnav__link {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  transition:
    color var(--t-micro) var(--ease-out),
    background-color var(--t-micro) var(--ease-out);
}

.topnav__link:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.topnav__link[aria-current="page"] {
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 10%);
}

/* --ink-faint clears 4.5:1 on --bg but measures 4.35:1 on --surface, and the
   top rail is --surface. This control takes the muted step for that reason.
   Never solve it by fading a lighter token with opacity. */
.topnav__signout {
  background: none;
  border: 0;
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--t-micro) var(--ease-out);
}

.topnav__signout:hover {
  color: var(--danger);
}

.topnav__side {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

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

.masthead {
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  height: 64px;
}

.hero {
  padding: var(--s-9) 0 var(--s-8);
}

.hero__title {
  font-size: clamp(2.25rem, 5.4vw, 3.5rem);
  max-width: 18ch;
}

.hero__lead {
  margin-top: var(--s-5);
  max-width: var(--measure);
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--ink-muted);
}

.hero__action {
  margin-top: var(--s-7);
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-6);
  font: inherit;
  font-weight: 640;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-micro) var(--ease-out),
    transform var(--t-micro) var(--ease-out);
}

.btn:hover {
  background: var(--accent-soft);
  color: var(--bg);
}

.btn:active {
  transform: scale(0.985);
}

.btn:disabled {
  background: var(--surface-2);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* The report spec. A definition list, framed like a datasheet: one hairline
   between rows, a mono term column, prose in the second column. */
.spec {
  border-top: 1px solid var(--line);
  padding: var(--s-8) 0;
}

.spec__title {
  font-size: 1.5rem;
}

.spec__list {
  margin: var(--s-6) 0 0;
  display: grid;
  gap: 0;
}

.spec__row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--s-6);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}

.spec__row:first-child {
  border-top: 0;
}

.spec__term {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.spec__def {
  margin: 0;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* Engines. A framed panel, deliberately a different layout family from the
   stacked hero and the two-column datasheet above it. */
.engines {
  border-top: 1px solid var(--line);
  padding: var(--s-8) 0 var(--s-9);
}

.engines__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: center;
}

.engines__copy {
  max-width: var(--measure);
}

.engines__title {
  font-size: 1.25rem;
}

.engines__body {
  margin-top: var(--s-3);
  color: var(--ink-muted);
}

.engines__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.engines__chip {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------- mobile bottom tabs -- */

.mobilenav,
.drawer,
.drawer__scrim {
  display: none;
}

.mobilenav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-line);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}

.mobilenav__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  background: none;
  border: 0;
  font: inherit;
  color: var(--nav-idle);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-micro) var(--ease-out);
}

.mobilenav__tab svg {
  width: 1.15rem;
  height: 1.15rem;
}

.mobilenav__tab span {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mobilenav__tab:hover {
  color: var(--accent-soft);
}

.mobilenav__tab.is-active {
  color: var(--accent);
}

.drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--scrim);
  border: 0;
  padding: 0;
}

.drawer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 46;
  background: var(--drawer-bg);
  border: 1px solid var(--nav-line);
  border-bottom: 0;
  border-radius: var(--r-drawer) var(--r-drawer) 0 0;
  padding: var(--s-3) var(--s-4)
    calc(var(--s-4) + var(--nav-h) + env(safe-area-inset-bottom));
}

.drawer__handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--nav-handle);
  margin: 0 auto var(--s-5);
}

.drawer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  background: var(--nav-tile);
  border: 1px solid var(--nav-line);
  border-radius: 12px;
  padding: var(--s-4);
  text-decoration: none;
  color: var(--nav-tile-label);
  transition:
    border-color var(--t-micro) var(--ease-out),
    color var(--t-micro) var(--ease-out);
}

.drawer__tile svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--accent);
}

.drawer__tile span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drawer__tile[aria-current="page"] {
  background: rgb(var(--accent-rgb) / 12%);
  border-color: rgb(var(--accent-rgb) / 35%);
  color: var(--accent);
}

.drawer__tile[aria-current="page"] svg {
  color: var(--accent);
}

.drawer__tile--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  background: rgb(var(--danger-rgb) / 10%);
  border-color: rgb(var(--danger-rgb) / 32%);
  color: var(--danger);
}

.drawer__tile--wide svg {
  color: var(--danger);
}

.drawer__tile--wide form {
  flex: 1;
  margin: 0;
}

/* The button, not the form, has to be the full-width hit target: a block-level
   wrapper does not make the control inside it fill. */
.drawer__signout {
  display: block;
  width: 100%;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* ------------------------------------------------------------ responsive -- */

/* House rule: the bottom-tab nav starts at retina-iPad width, not phone
   width. Tablet users get the chunkier tab UX on purpose. */
@media (max-width: 1024px) {
  .topnav__links,
  .topnav__signout {
    display: none;
  }

  .mobilenav {
    display: flex;
  }

  .drawer.is-open,
  .drawer__scrim.is-open {
    display: block;
  }

  /* Keep the brand credit clear of the fixed tab bar. */
  .shell--navigated .shell__credit {
    margin-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  .spec__row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .engines__panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero {
    padding: var(--s-7) 0 var(--s-6);
  }
}

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

/* ======================================================== app screens ==== */
/* Added for the workspace, competitor and question-set screens. Same
 * language as the landing datasheet above: hairline framing, a mono column
 * for machine-readable values, and the accent reserved for live state. No new
 * colour, radius, or duration is introduced here — everything resolves to a
 * token declared on :root. */

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

.page {
  padding-top: var(--s-7);
  padding-bottom: var(--s-8);
}

.page__head {
  max-width: var(--measure);
}

.page__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.page__back {
  color: var(--ink-faint);
  text-decoration: none;
}

.page__back:hover {
  color: var(--accent-soft);
  text-decoration: underline;
}

.page__title {
  margin-top: var(--s-3);
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
}

.page__lead {
  margin-top: var(--s-4);
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- roster --- */
/* Workspaces read as instrument rows, not as a card grid: identity on the
   left, the measured value in the mono column, actions on the right. */

.roster {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.roster__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem auto;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}

.roster__name {
  font-size: 1.25rem;
}

.roster__domain {
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.roster__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.readout__value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.readout__label {
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.readout__delta {
  margin-top: var(--s-2);
  font-size: var(--text-fine);
  color: var(--ink-muted);
}

/* A measured change carries a direction; an unmeasured workspace carries a
   sentence. Neither is ever rendered as a bare 0. */
.readout__delta.is-up {
  color: var(--accent-soft);
}

.readout__delta.is-down {
  color: var(--danger);
}

.readout__empty {
  font-size: var(--text-fine);
  color: var(--ink-faint);
}

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

.panel {
  margin-top: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.panel__title {
  font-size: 1.25rem;
}

.panel__body {
  margin-top: var(--s-3);
  max-width: var(--measure);
  color: var(--ink-muted);
}

.empty {
  margin-top: var(--s-7);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

/* Inside a panel the empty state sits on the panel's own ground, so it needs
   the deeper surface to stay legible as a distinct block. */
.empty--inset {
  margin-top: var(--s-5);
  background: var(--bg);
}

.empty__title {
  font-size: 1.125rem;
}

.empty__body {
  margin-top: var(--s-3);
  max-width: var(--measure);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------- rows --- */

.rows {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.rows__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.rows__item form {
  margin: 0;
}

.rows__name {
  font-weight: 620;
  overflow-wrap: anywhere;
}

/* Also inside a panel, so also --ink-muted rather than --ink-faint. */
.rows__meta {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

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

.form {
  margin-top: var(--s-5);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.form__action {
  margin-top: var(--s-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --ink-faint measures 4.35:1 on --surface, below the 4.5 floor, even though
   it clears it on --bg. Hints live inside a panel, so they take the muted
   step instead. Never solve this by fading a lighter token with opacity. */
.field__hint {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* Sits directly under the field it rejects. Colour is not the only signal —
   the copy says what is wrong and that nothing was saved — so it still reads
   on a monochrome display. */
.field__error {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--danger);
  max-width: var(--measure);
}

.field__error code {
  font-family: var(--font-mono);
}

.input {
  width: 100%;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  font: inherit;
  font-size: var(--text-body);
  color: var(--ink);
  transition:
    border-color var(--t-micro) var(--ease-out),
    background-color var(--t-micro) var(--ease-out);
}

.input::placeholder {
  color: var(--ink-faint);
}

.input:hover {
  border-color: var(--ink-faint);
}

.input:focus-visible {
  border-color: var(--accent);
  outline-offset: 1px;
}

select.input {
  appearance: none;
  padding-right: var(--s-7);
  /* The arrow is drawn in the box's own ground rather than fetched, so the
     control looks identical offline. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* -------------------------------------------------------- button kinds --- */

.btn--quiet {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: var(--s-2) var(--s-4);
  font-size: 0.9375rem;
}

.btn--quiet:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

.btn--danger {
  background: none;
  border: 1px solid rgb(var(--danger-rgb) / 32%);
  color: var(--danger);
  padding: var(--s-2) var(--s-4);
  font-size: 0.9375rem;
  font-weight: 620;
}

.btn--danger:hover {
  background: rgb(var(--danger-rgb) / 12%);
  color: var(--danger);
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .roster__item {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .rows__item {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .form__grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================== prompt set ======== */

.page__meta {
  margin-top: var(--s-3);
  font-size: var(--text-fine);
  color: var(--ink-faint);
}

/* A five-column table cannot narrow past its content, so it scrolls inside
   its own box. Without this the page body scrolls sideways on a phone. */
.tablewrap {
  margin-top: var(--s-7);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.grid {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  text-align: left;
}

.grid th {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.grid td {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.grid tbody tr:last-child td {
  border-bottom: 0;
}

.grid__question {
  min-width: 18rem;
  line-height: 1.5;
}

/* Panel ground again, so --ink-muted rather than --ink-faint. */
.grid__meta {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--ink-muted);
  white-space: nowrap;
}

.grid__status form {
  margin: 0;
}

/* A paused question is dimmed on its metadata only. The question itself stays
   at full contrast: it is still readable content, not disabled chrome. */
.grid tr.is-paused .grid__meta {
  color: var(--ink-faint);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: var(--s-1) var(--s-4);
  font: inherit;
  font-size: var(--text-fine);
  font-weight: 620;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--t-state) var(--ease-out),
    color var(--t-state) var(--ease-out);
}

.toggle__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

/* The accent marks live state and nothing else, so it appears here only when
   the question is actually being asked on the next run. */
.toggle.is-on {
  border-color: rgb(var(--accent-rgb) / 40%);
  color: var(--accent);
}

.toggle:hover {
  border-color: var(--ink-faint);
}

.toggle.is-on:hover {
  border-color: var(--accent);
  color: var(--accent-soft);
}

.code {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 0 var(--s-2);
  color: var(--ink);
}

.sample {
  margin: var(--s-4) 0 0;
  overflow-x: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  line-height: 1.7;
  color: var(--ink-muted);
}

input[type="file"].input {
  padding: var(--s-2) var(--s-3);
  line-height: 2;
  cursor: pointer;
}

input[type="file"].input::file-selector-button {
  margin-right: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  cursor: pointer;
}

input[type="file"].input::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ==================================================== dashboard ========= */
/* The reporting screens: overview, run detail, tokens. Same instrument
 * language as everything above — hairline framing, a mono column for machine
 * readable values, the accent reserved for live state — extended with a
 * gauge rail and a plotted trend. No new colour, radius, or duration is
 * introduced; every value resolves to a token declared on :root.
 *
 * Contrast note that applies throughout this block: --ink-faint clears 4.5:1
 * on --bg but only reaches 4.35:1 on --surface, so anything sitting on a
 * panel takes --ink-muted instead. Never fade a lighter token with opacity to
 * get the same effect. */

/* --------------------------------------------------------- token badge -- */

.token-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: var(--s-1) var(--s-4);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color var(--t-micro) var(--ease-out);
}

.token-badge:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.token-badge__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.token-badge__value {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 640;
  color: var(--accent);
}

/* An unknown balance is not a low one. It reads as neutral ink so it cannot be
   mistaken for a live figure. */
.token-badge.is-unknown .token-badge__value {
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- header --- */

.page__head--wide {
  max-width: none;
}

.page__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.page__bar .page__lead {
  max-width: var(--measure);
}

.page__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.page__actions form {
  margin: 0;
}

/* --------------------------------------------------------- method note -- */

/* Required copy, so it is set at reading size on the page ground rather than
   tucked into a tooltip. */
.method {
  margin-top: var(--s-6);
  border-left: 2px solid rgb(var(--accent-rgb) / 45%);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading);
  color: var(--ink-muted);
}

.method__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------- gauges --- */

/* One framed rail split by hairlines, not three floating cards. The figures
   belong to a single reading and are shown as one instrument. */
.readings {
  margin-top: var(--s-7);
}

.gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.gauges--single {
  grid-template-columns: 1fr;
}

.gauge {
  padding: var(--s-6);
  border-left: 1px solid var(--line);
}

.gauge:first-child {
  border-left: 0;
}

.gauge__value {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* "Not measured" is a sentence, not a reading, so it is not set in the
   instrument face and never carries the live-state accent. */
.gauge__value--empty {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 620;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.gauge__label {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.gauge__note {
  margin-top: var(--s-3);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.gauge__delta {
  margin-top: var(--s-3);
  font-size: 1rem;
  color: var(--ink-muted);
}

.gauge__delta.is-up {
  color: var(--accent-soft);
}

.gauge__delta.is-down {
  color: var(--danger);
}

/* Coverage is not fine print. It is the line that stops a provider outage
   being read as a collapse in the client's visibility. */
.coverage {
  margin-top: var(--s-4);
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading);
  color: var(--ink-muted);
}

.shortfall {
  margin-top: var(--s-6);
  border: 1px solid rgb(var(--danger-rgb) / 32%);
  background: rgb(var(--danger-rgb) / 10%);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  max-width: var(--measure);
  font-size: var(--text-body);
  color: var(--ink);
}

/* -------------------------------------------------------------- trend --- */

.trend {
  display: flex;
  align-items: stretch;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.trend__chart {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.trend__rule {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trend__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend__dot {
  fill: var(--accent);
}

.trend__scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: var(--s-1) 0;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--ink-muted);
}

/* ------------------------------------------------------------ sources --- */

.sources,
.advice,
.runlog {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.sources__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem 9rem;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.sources__domain {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.sources__owner {
  font-size: 1rem;
  color: var(--ink-muted);
}

.sources__count {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--ink-muted);
  text-align: right;
}

/* ------------------------------------------------------------- advice --- */

.advice__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}

.advice__priority {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.advice__title {
  font-size: 1.125rem;
}

.advice__body {
  margin-top: var(--s-2);
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading);
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- runlog --- */

.runlog__row {
  display: grid;
  grid-template-columns: 14rem 10rem minmax(0, 1fr) 8rem;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.runlog__when {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
}

.runlog__trigger,
.runlog__coverage {
  font-size: 1rem;
  color: var(--ink-muted);
}

.runlog__score {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
  text-align: right;
}

/* --------------------------------------------------------- run detail --- */

.cell {
  margin-top: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.cell__prompt {
  font-size: 1.25rem;
  max-width: var(--measure);
}

.cell__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.cell__engine,
.cell__state,
.cell__latency {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cell__engine {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 2px var(--s-3);
  color: var(--ink);
}

.cell__state.is-ok {
  color: var(--accent);
}

.cell__state.is-bad {
  color: var(--danger);
}

.cell__error {
  margin-top: var(--s-4);
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading);
  color: var(--ink-muted);
}

/* The answer verbatim. This is the evidence the whole product rests on, so it
   is set as reading copy, not as a code sample. */
.answer {
  margin-top: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cell__derived {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-5);
}

.cell__subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cell__none {
  margin-top: var(--s-3);
  font-size: 1rem;
  color: var(--ink-muted);
}

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
}

.tag {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

/* The accent marks the tracked brand and nothing else on these lists. */
.tag--brand {
  border-color: rgb(var(--accent-rgb) / 40%);
  color: var(--accent);
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .gauges {
    grid-template-columns: 1fr;
  }

  .gauge {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .gauge:first-child {
    border-top: 0;
  }

  .sources__row,
  .runlog__row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .sources__count,
  .runlog__score {
    text-align: left;
  }

  .cell__derived {
    grid-template-columns: 1fr;
  }
}

/* ================================================ recommendations ======= */
/* Each item is one framed row carrying its own receipts. The evidence block is
 * a native <details>, so it opens with scripting unavailable and needs no
 * JavaScript to be readable. Same instrument language as the dashboard: no new
 * colour, radius, or duration. */

.actions {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}

.action {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

/* A closed item stays fully legible. Only its framing recedes: dimming the
   text would put the record below the contrast floor to make a visual point. */
.action.is-closed {
  border-style: dashed;
}

.action__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.action__priority,
.action__kind,
.action__state {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.action__priority {
  color: var(--accent);
}

.action__kind {
  color: var(--ink-muted);
}

.action__state {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 2px var(--s-3);
  color: var(--ink-muted);
}

.action__title {
  margin-top: var(--s-3);
  font-size: 1.25rem;
  max-width: var(--measure);
}

.action__body {
  margin-top: var(--s-3);
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading);
  color: var(--ink-muted);
}

.action__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
}

/* ----------------------------------------------------------- evidence --- */

.evidence {
  margin-top: var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}

.evidence__summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
}

.evidence__summary:hover {
  color: var(--accent);
}

.evidence__count {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-muted);
}

.evidence__row {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.evidence__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
}

.evidence__prompt {
  font-size: 1rem;
  font-weight: 620;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.evidence__engine {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 2px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* The excerpt is the receipt, so it is set as reading copy rather than as a
   code sample or a caption. */
.evidence__answer {
  margin: var(--s-3) 0 0;
  border-left: 2px solid var(--line-strong);
  padding-left: var(--s-5);
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.evidence__link {
  margin-top: var(--s-3);
  font-size: 1rem;
}

.evidence__gone {
  margin-top: var(--s-4);
  max-width: var(--measure);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ==================================================== reports ledger ==== */
/* The agency's own screen. One framed rail of rows, same instrument language
 * as the dashboard: no new colour, radius, or duration is introduced here. */

.ledger {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line);
}

.ledger__row:first-child {
  border-top: 0;
}

.ledger__when {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
}

/* Not fine print: whether a client's link still works is the first thing an
   agency needs from this row. --ink-muted rather than --ink-faint, because it
   sits on the panel ground where the faint token no longer clears 4.5:1. */
.ledger__life {
  margin-top: var(--s-1);
  font-size: var(--text-fine);
  color: var(--ink-muted);
}

.ledger__life.is-expired {
  color: var(--danger);
}

.ledger__share {
  min-width: 0;
}

.ledger__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ledger__link {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink-muted);
}

.ledger__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Prose the agency is meant to read, so it is set at reading size rather than
   at the fine-print size the shorter meta lines elsewhere use. */
.ledger__note {
  margin-top: var(--s-4);
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading);
  color: var(--ink-muted);
}

.ledger__note--after {
  margin-top: var(--s-5);
}

/* ================================================ white-label share ===== */
/* The one screen that wears the agency's accent instead of ours. Everything
 * below inherits --accent from the wrapper's inline custom properties, so the
 * gauges, the method rule and the source list recolour with no second
 * stylesheet and no !important anywhere. */

.share__head {
  max-width: var(--measure);
}

.share__brand {
  margin-top: var(--s-3);
  font-size: clamp(2rem, 4.4vw, 3rem);
  color: var(--accent);
}

.share__issued {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--ink-muted);
}

/* The public page has no navigation above it, so the header would otherwise
   start hard against the top of the viewport. */
.share {
  padding-top: var(--s-8);
}

@media (max-width: 900px) {
  .ledger__row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--s-4);
  }
}