:root{
  color-scheme: light dark;

  /* Elev8 Suite, light. Read from the running app, not approximated. */
  --paper: oklch(1 0 0);
  --surface: oklch(1 0 0);
  --sunk: oklch(0.97 0 0);
  --ink: oklch(0.145 0 0);
  --mut: oklch(0.51 0 0);
  --line: oklch(0.922 0 0);

  /* The brand amber: a fill colour, with its own readable text pair. */
  --brand: oklch(0.852 0.199 91.936);
  --on-brand: oklch(0.421 0.095 57.708);
  /* Amber dark enough to read as text on paper. The brand amber is not. */
  --brass: oklch(0.55 0.13 85);

  --rust: oklch(0.577 0.245 27.325);
  --teal: oklch(0.546 0.245 262.881);

  --r-card: 14px;
  --r-ctl: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.05);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Inter", ui-monospace, Menlo, Monaco, Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper: oklch(0.145 0 0);
    --surface: oklch(0.205 0 0);
    --sunk: oklch(0.269 0 0);
    --ink: oklch(0.985 0 0);
    --mut: oklch(0.67 0 0);
    --line: oklch(1 0 0 / .1);
    --brand: oklch(0.795 0.184 86.047);
    --on-brand: oklch(0.279 0.077 58.955);
    --brass: oklch(0.852 0.199 91.936);
    --rust: oklch(0.704 0.191 22.216);
    --teal: oklch(0.707 0.165 254.624);
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--paper);color:var(--ink);
  padding:2rem 1.25rem 6rem;
  font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
}
main{max-width:74rem;margin:0 auto}

/* The single-card pages — sign-in and the authorisation notices — centre
   themselves. Selected by shape rather than by a class, so no page markup had
   to change: only those two put a card directly inside the body. */
body:has(> .card){display:grid;place-items:center;min-height:100vh;padding:1.5rem}
body:has(> .card) > .card{max-width:30rem;width:100%}
body:has(> .card) p{color:var(--mut);font-size:.9rem;margin:0 0 1.1rem}
body:has(> .card) input,
body:has(> .card) button,
body:has(> .card) .btn{width:100%}

h1{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin:0 0 .2rem}
h2{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin:1.8rem 0 .6rem}
h3{font-size:.95rem;font-weight:600;margin:0 0 .5rem}
h4{font-size:.82rem;font-weight:600;margin:.8rem 0 .3rem}
p{margin:0 0 1rem}
a{color:inherit}
.sub{color:var(--mut);font-size:.8rem;margin-top:.15rem}
p.s{color:var(--mut);margin:0 0 1.5rem;font-size:.9rem}
.mut{color:var(--mut)}
.ok{color:var(--ink);font-weight:600}
.no{color:var(--rust);font-weight:600}
.part{color:var(--brass);font-weight:600}
.err{color:var(--rust)}

code{
  font:500 .84em var(--mono);
  background:var(--sunk);color:var(--teal);
  padding:.1em .35em;border-radius:4px;
}

/* Cards. One border, one hairline shadow, 14px — the Suite's card exactly. */
.card,.panel,.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);
}
.card{padding:1.1rem 1.25rem;margin-bottom:.8rem;overflow-x:auto}
.panel{padding:.9rem 1.1rem;margin-bottom:.7rem}
.stat{padding:.9rem 1.1rem}
.card > h1:first-child{margin-bottom:.5rem}

.top{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;
  justify-content:space-between;margin-bottom:1.5rem}
.controls{display:flex;gap:.5rem;align-items:center}

/* Segmented control, as on the Suite's dashboard: pills, the active one solid. */
.lens a{display:inline-block;padding:.35rem .75rem;border:1px solid var(--line);
  border-radius:var(--r-ctl);text-decoration:none;font-size:.85rem;font-weight:500;
  background:var(--surface)}
/* The one place the brand amber appears on the dashboard. The Suite spends it on
   the primary action and nowhere else; here the basis switch IS the primary
   action, and a page with no amber at all did not read as Elev8. It stays off
   the data: no number and no severity is ever amber, or the colour would start
   meaning two things. */
.lens a.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand);font-weight:600}
.lang{font-size:.78rem;color:var(--mut)}
.lang a{text-decoration:none;border-bottom:1px dotted var(--line)}

/* Buttons. The primary action is the brand amber — the Suite uses it for
   exactly this and nothing else, which is why it stays scarce here too. */
button{
  font:inherit;font-size:.875rem;font-weight:500;
  padding:.5rem 1rem;border-radius:var(--r-ctl);border:0;
  background:var(--brand);color:var(--on-brand);cursor:pointer;
}
button:hover{filter:brightness(.96)}
/* A disabled action must not look like a live brand button with the lights
   dimmed. It goes neutral, which is what the Suite does and what actually reads
   as "not available" rather than "amber, but sad". */
button[disabled]{background:var(--sunk);color:var(--mut);cursor:not-allowed;filter:none}

/* A row of actions with its own label. Replaces three ad-hoc inline styles and
   a form that had been accidentally split across two of them. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.9rem 0 0}
.actions .label{color:var(--mut);font-size:.875rem;margin-right:.15rem}
.btn{display:flex;align-items:center;justify-content:center;gap:.6rem;
  text-decoration:none;padding:.55rem .9rem;border:1px solid var(--line);
  border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);
  font-weight:500;font-size:.9rem}
input{font:inherit;font-size:.9rem;padding:.55rem .7rem;border-radius:var(--r-ctl);
  border:1px solid var(--line);background:var(--paper);color:var(--ink);margin-bottom:.6rem}

.banner{border:1px solid var(--line);border-radius:var(--r-card);
  padding:.8rem 1rem;margin-bottom:.7rem;font-size:.9rem;background:var(--surface)}
.banner.warn{border-left:3px solid var(--rust)}
.banner.demo{border-left:3px solid var(--brand)}
.card.warn{border-left:3px solid var(--brand)}

/* Stat tiles, in the Suite's order: small muted label, then the number large. */
.stats{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  margin:1.2rem 0}
.stat .k{font-size:.78rem;color:var(--mut);font-weight:500}
.stat .v{font-size:1.75rem;font-weight:700;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;margin-top:.15rem;line-height:1.2}

table{width:100%;border-collapse:collapse;font-size:.875rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden}
/* A table already inside a card must not draw a second frame around itself. */
.card table{border:0;background:transparent;border-radius:0}
th{text-align:left;font-size:.75rem;font-weight:500;color:var(--mut);
  padding:.6rem .8rem;border-bottom:1px solid var(--line);background:transparent}
td{padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tr.open td{background:var(--sunk)}
tr.detail td{background:var(--sunk);padding:1rem}
td.num,.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.rowlink{text-decoration:none;font-weight:600}
.rowlink:hover{text-decoration:underline}

/* Badges: the Suite's are small, fully rounded and quiet unless they matter. */
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:.05rem .5rem;font-size:.7rem;color:var(--mut);margin-left:.3rem}
.tag.hold{border-color:var(--brass);color:var(--brass)}

.head{font-weight:600;margin:0 0 .8rem}
ul.gate{list-style:none;margin:0 0 .6rem;padding:0;display:flex;flex-wrap:wrap;
  gap:1rem;font-size:.86rem}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.35rem}
.dot.good{background:var(--ink)}
.dot.bad{background:var(--rust)}
.dot.unk{background:var(--line)}
ul.ev{margin:0;padding-left:1.1rem;font-size:.86rem;display:flex;
  flex-direction:column;gap:.3rem}

/* Fill shares on the shapes page. Full is neutral rather than green: a field
   that is 100% populated is normal, not an achievement. */
.full{color:var(--ink);font-weight:600}
.some{color:var(--brass);font-weight:600}
.none{color:var(--rust);font-weight:600}

/* The market comparison, as the Suite renders a delta: a small quiet chip, not a
   wall of red text. Six rows of red percentages made a portfolio with three
   findings look like an emergency, which is the opposite of the job. */
.pair{font-weight:600;font-variant-numeric:tabular-nums}
.chip{display:inline-block;border-radius:999px;padding:.05rem .45rem;margin-left:.35rem;
  font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--sunk);color:var(--mut)}
.chip.down{color:var(--rust)}
.chip.up{color:var(--ink)}

/* Opening a row must land on the row. The anchor does the work; this keeps the
   row off the very top edge so the header above it stays readable. */
tr[id]{scroll-margin-top:1rem}

svg.pot{width:100%;max-width:640px;height:auto;display:block;margin:.2rem 0}
svg.pot .lbl{font:500 12px var(--font);fill:var(--mut)}
svg.pot .val{font:600 12px var(--font);fill:var(--ink);font-variant-numeric:tabular-nums}
svg.pot .cap{font:400 11px var(--font);fill:var(--mut)}

/* The glossary. A details/summary element, so it costs no JavaScript, no extra
   page and no round trip — it is open or closed in the browser and nowhere else. */
.legend{margin-top:1.5rem;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);padding:.6rem 1.1rem}
.legend summary{cursor:pointer;font-weight:600;font-size:.9rem;padding:.35rem 0}
.legend summary::marker{color:var(--mut)}
.legend p{margin:.4rem 0 .8rem;font-size:.85rem}
.legend dl{margin:0 0 .6rem;display:grid;grid-template-columns:minmax(8rem,11rem) 1fr;
  gap:.45rem 1.2rem;font-size:.86rem}
.legend dt{font-weight:600}
.legend dd{margin:0;color:var(--mut)}
@media (max-width:44rem){
  .legend dl{grid-template-columns:1fr;gap:.1rem .8rem}
  .legend dd{margin:0 0 .5rem}
}

footer{margin-top:1.5rem;color:var(--mut);font-size:.82rem;
  display:flex;flex-wrap:wrap;gap:.9rem}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--mut)}