/* ============================================================================
   Baseline — one design system, for the website, the member portal and ops.
   Served from Firebase Hosting, so changing any of this is a ~20s static
   deploy and never rebuilds a container.
   Palette carried over from the existing product: lavender EDTA cap, ink,
   and a violet accent that is deliberately not the status colours.
   ========================================================================= */

:root {
  --bg: #F8F7FB;
  --bg-alt: #F1EFF6;
  --surface: #FFFFFF;
  --ink: #16141D;
  --ink-2: #4A4557;
  --ink-3: #7C7690;
  --line: #E4E0EC;
  --line-strong: #D2CCE0;

  --accent: #5B3FBF;
  --accent-hover: #4A31A3;
  --accent-ink: #FFFFFF;
  --accent-soft: #EFEBFB;
  --accent-line: #D8CEF6;
  --cap: #D8D3E4;

  --ok: #146B4F;      --ok-soft: #E2F3EC;
  --warn: #8A5A00;    --warn-soft: #FBF0DC;
  --bad: #9B2C2C;     --bad-soft: #FBE9E9;

  --serif: ui-serif, Georgia, "Iowan Old Style", Palatino, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(22,20,29,.04), 0 8px 24px -12px rgba(22,20,29,.10);
  --wrap: 1080px; --wrap-narrow: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C0A12; --bg-alt: #110E19; --surface: #161320;
    --ink: #F0EDF7; --ink-2: #B5AFC7; --ink-3: #847DA0;
    --line: #262233; --line-strong: #352E47;
    --accent: #A78BFA; --accent-hover: #C3B0FF; --accent-ink: #16141D;
    --accent-soft: #221A38; --accent-line: #3A2E5C; --cap: #494159;
    --ok: #6FD3AC; --ok-soft: #10281F;
    --warn: #E8B765; --warn-soft: #2A2010;
    --bad: #F2938C; --bad-soft: #2C1416;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

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

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

/* ---------------------------------------------------------------- type */

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.14; }
h2 { font-size: clamp(21px, 2.6vw, 27px); line-height: 1.22; }
h3 { font-size: 17px; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.lede { font-size: clamp(16px, 1.7vw, 18px); color: var(--ink-2); max-width: 62ch; margin: 0 0 28px; }
.small { font-size: 13.5px; color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }

/* ---------------------------------------------------------------- layout */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: var(--wrap-narrow); }
/* padding-block, not `padding: 60px 0`. These classes get combined with .wrap on the
   same element — `<div class="wrap section">` — and the shorthand resets the inline
   padding to zero, which takes the page's gutters with it. */
.section { padding-block: 60px; }
.section + .section { border-top: 1px solid var(--line); }
.stack > * + * { margin-top: 14px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; }
/* For cards carrying a paragraph rather than a line. Wider columns, so the measure
   is readable, and equal heights so the row does not end ragged. */
.grid.prose { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; }
.grid.prose > .card { display: flex; flex-direction: column; }
.grid.prose h3 { font-size: 16.5px; margin-bottom: 8px; }
@media (max-width: 760px) { .cols, .row-2 { grid-template-columns: 1fr; gap: 26px; } }

/* ---------------------------------------------------------------- masthead */

.masthead { border-bottom: 1px solid var(--line); background: var(--bg); }
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { display: block; height: 28px; width: auto; }
.masthead nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* :not(.btn) matters. `.masthead nav a` is more specific than `.btn`, so without it
   the nav's link colour wins and "Get started" renders as dark text on the accent. */
.masthead nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.masthead nav a:not(.btn):hover,
.masthead nav a:not(.btn)[aria-current="page"] { color: var(--ink); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 11px 22px; font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--ink-3); }
.btn.small { padding: 7px 15px; font-size: 13.5px; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- surfaces */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow);
}
/* Stacked cards want space between them; cards laid out by a grid get it from the
   gap. Without this exclusion the adjacent-sibling rule also fires inside a grid and
   pushes every card after the first down by 16px, which reads as a stagger. */
/* Only in flow. Every layout container here uses gap, so a sibling margin on top of
   that is both wrong and invisible until you look at a row and see it stepped. Written
   as an exclusion rather than a list of containers to remember, because the last two
   times this broke it was a container I had not thought of. */
:not(.grid):not(.steps):not(.stack):not(.systems) > .card + .card { margin-top: 16px; }
.card.flat { box-shadow: none; }
.card.tint { background: var(--accent-soft); border-color: var(--accent-line); box-shadow: none; }
.card h3 { margin-bottom: 6px; }
.card > :last-child { margin-bottom: 0; }

.stat { display: flex; gap: 34px; flex-wrap: wrap; }
.stat .n { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.stat .n.bad { color: var(--bad); }
.stat .k { font-size: 12.5px; color: var(--ink-3); letter-spacing: .03em; }

.step .n {
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  margin-bottom: 13px; font-variant-numeric: tabular-nums;
}

.empty {
  color: var(--ink-3); padding: 34px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--bg-alt);
}

/* ---------------------------------------------------------------- status */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.pill.ok   { background: var(--ok-soft);   color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad  { background: var(--bad-soft);  color: var(--bad); }
.pill.plain::before { display: none; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 13px 16px; vertical-align: top; }
thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); font-weight: 700; background: var(--bg-alt);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody tr + tr td { border-top: 1px solid var(--line); }
tbody tr:hover td { background: var(--bg-alt); }
td strong { font-weight: 650; }

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

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
label { display: block; font-size: 13px; font-weight: 650; margin: 0 0 6px; color: var(--ink); }
input, select, textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* A native select renders as the OS control — grey gradient, double arrow, its own
   corner radius — which is the one element on the page that ignores everything else
   here. Stripping the appearance and drawing our own chevron puts it back in the
   system. The chevron is an inline data: URI so it stays a single stylesheet with
   no extra request, and it is redeclared for dark mode because a data: URI cannot
   read a custom property. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237C7690' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
select::-ms-expand { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23847DA0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
/* The options list itself is drawn by the OS and cannot be styled; setting these
   at least stops it inheriting a white-on-white or black-on-black popup. */
select option { color: var(--ink); background: var(--surface); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input:disabled { background: var(--bg-alt); color: var(--ink-3); }
textarea { min-height: 84px; resize: vertical; }
.hint { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 0; }

/* ---------------------------------------------------------------- notices */

.notice { padding: 13px 17px; border-radius: var(--r); margin-bottom: 20px; font-size: 14.5px; border: 1px solid; }
.notice.err  { background: var(--bad-soft);  border-color: var(--bad);  color: var(--bad); }
.notice.ok   { background: var(--ok-soft);   border-color: var(--ok);   color: var(--ok); }
.notice.info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink-2); }

/* ---------------------------------------------------------------- footer */

.footer { border-top: 1px solid var(--line); padding: 34px 0; color: var(--ink-3); font-size: 13.5px; margin-top: 40px; }

/* ---------------------------------------------------------------- faq */

details { border-bottom: 1px solid var(--line); padding: 17px 0; }
details summary { cursor: pointer; font-weight: 600; list-style: none; font-size: 16px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; font-size: 19px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: 12px 0 0; color: var(--ink-2); }

/* ---------------------------------------------------------------- app page furniture */

.page { padding-block: 34px 80px; }
.page-head { margin-bottom: 30px; }
.page-head h1 { margin-bottom: 8px; }
.page-head .lede { margin-bottom: 0; }
.section-head { margin: 36px 0 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.section-head h2 { font-size: 20px; }

/* ---------------------------------------------------------------- results */

.marker { display:grid; grid-template-columns: 1.4fr 1fr 1.6fr auto; gap:16px;
  align-items:center; padding:14px 16px; }
.marker + .marker { border-top:1px solid var(--line); }
.marker:hover { background:var(--bg-alt); }
.marker .name { font-weight:600; font-size:14.5px; }
.marker .val { font-family:var(--mono); font-size:16px; font-variant-numeric:tabular-nums; }
.marker .val .u { font-size:11.5px; color:var(--ink-3); margin-left:4px; }
@media (max-width:720px){
  .marker { grid-template-columns:1fr auto; gap:8px 14px; }
  .marker .track-wrap { grid-column:1 / -1; }
}

/* Where a value sits against its reference range. The band is the range; the
   marker is the reading. Position is computed server-side and set as a custom
   property, so this stays pure CSS. */
.track { position:relative; height:8px; border-radius:999px; background:var(--bg-alt);
  border:1px solid var(--line); }
.track .band { position:absolute; top:-1px; bottom:-1px; left:26%; right:26%;
  background:var(--accent-soft); border-left:1px solid var(--accent-line);
  border-right:1px solid var(--accent-line); }
.track .pin { position:absolute; top:50%; left:var(--at,50%);
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:999px;
  background:var(--accent); border:2px solid var(--surface); }
.track.is-low  .pin { background:var(--warn); }
.track.is-high .pin { background:var(--bad); }
.track-labels { display:flex; justify-content:space-between; font-size:11px;
  color:var(--ink-3); font-family:var(--mono); margin-top:5px; }

.trend { font-size:12.5px; font-family:var(--mono); white-space:nowrap; }
.trend.better { color:var(--ok); }
.trend.worse  { color:var(--bad); }
.trend.flat   { color:var(--ink-3); }

.sysblock { border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); overflow:hidden; margin-bottom:16px; }
.sysblock > h3 { padding:13px 16px; background:var(--bg-alt);
  border-bottom:1px solid var(--line); font-family:var(--sans); font-size:12px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700; }

/* ---------------------------------------------------------------- accordions
   Sections that stack, for a record with several kinds of thing on it. Distinct
   from the FAQ `details` above: this one is a bordered panel, not a list row. */

.acc { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  margin-bottom:14px; overflow:hidden; padding:0; }
.acc > summary {
  cursor:pointer; list-style:none; padding:15px 20px;
  display:flex; align-items:center; gap:12px;
  font-weight:650; font-size:15.5px; background:var(--surface);
}
.acc > summary::-webkit-details-marker { display:none; }
/* The count is pushed right; the chevron then sits at the very end. Only the count
   carries margin-left:auto, so a section without one still puts the chevron there. */
.acc > summary .count {
  margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--ink-3); background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:2px 9px; white-space:nowrap;
}
.acc > summary .count.live { color:var(--accent); background:var(--accent-soft);
  border-color:var(--accent-line); }
.acc > summary::after {
  content:""; width:8px; height:8px; flex:none; margin-left:auto;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px); transition:transform .15s ease;
}
/* With a count present it already took the free space, so the chevron just follows it. */
.acc > summary:has(.count)::after { margin-left:0; }
.acc[open] > summary::after { transform:rotate(-135deg) translateY(-2px); }
.acc[open] > summary { border-bottom:1px solid var(--line); }
.acc > summary:hover { background:var(--bg-alt); }
.acc .acc-body { padding:20px; }
.acc .acc-body > :last-child { margin-bottom:0; }
.acc .acc-body .card { box-shadow:none; }


/* ---------------------------------------------------------------- systems
   Was an SVG, which cannot be clicked or read aloud. Now buttons, so each one can
   open the markers it covers. */
/* grid-auto-rows: 1fr, so a label that wraps to two lines does not make its card
   taller than the rest of the row. min-height alone does not do it. */
.systems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; grid-auto-rows: 1fr; }
@media (max-width: 620px) { .systems { grid-template-columns: repeat(2, 1fr); } }
.sys {
  appearance: none; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 13px; transition: border-color .15s ease, background .15s ease;
}
.sys:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.sys[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
/* Block, so the count sits above the name on every card. As inline spans they wrapped
   differently depending on how long the name was, and the row came out ragged. */
.sys { display: flex; flex-direction: column; justify-content: flex-start; min-height: 62px; }
.sys .n { display: block; font-family: var(--mono); font-size: 18px; font-weight: 600;
  color: var(--accent); line-height: 1.15; }
.sys .l { display: block; font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.3; }

/* The detail, below the grid, so a long marker list is not squeezed into a quarter. */
.sys-detail { margin-top: 14px; border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--r-lg); padding: 18px 20px; }
.sys-detail h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.sys-detail .why { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.sys-detail ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sys-detail li { font-size: 12.5px; font-family: var(--mono); background: var(--surface);
  border: 1px solid var(--accent-line); border-radius: var(--r-pill); padding: 3px 10px; }
.sys-detail li.derived { opacity: .72; font-style: italic; }

/* The two columns of the panel section, matched in height. */
/* Equal columns without stretching a card full of nothing: the column stretches, and
   the element marked .fill is the one that takes up the slack. */
.cols.even { align-items: stretch; }
.cols.even > * { display: flex; flex-direction: column; }
.cols.even .fill { flex: 1; }
.cols.even .fill > .sys-detail { height: 100%; }