/* Terascope AI: shared look for the content pages (index.html, decisions.html, data.html), in the brand of https://www.terascope.live/.
   Tokens live in tokens.css (also used by the map pages and nav.js). Owner: Frontend. The top bar comes from nav.js (sets --nav-h).
   Keep these class names: the UI tests select on .tag.real, .lab.*, .stage, .fp, .md-h and friends. */
@import url("tokens.css");
* { box-sizing: border-box; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nav-h, 0px) + 12px); }
html { background: var(--bg); }
body { margin: 0; padding-top: var(--nav-h, 0px); font: 14px/1.6 var(--f); color: var(--tx); -webkit-font-smoothing: antialiased; min-height: 100vh;
  background: linear-gradient(oklch(0.26 0 0 / .9), oklch(0.26 0 0 / .97) 60%), url("vendor/img/road-network.jpg") center top / 1600px auto fixed, var(--bg); }
a { color: var(--t-orange); text-decoration-color: oklch(0.733 0.163 54 / .4); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.01em; font-weight: 700; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 30px 24px 56px; counter-reset: sec; }
.muted, small { color: var(--tx-2); }
.ok { color: var(--good); } .bad { color: var(--bad); } .mid { color: var(--warn); }
.num, td.n, .mono { font-variant-numeric: tabular-nums; }
code, .fp { font-family: var(--code); font-size: 11.5px; background: oklch(1 0 0 / .05); border: 1px solid var(--line); padding: 0 5px; border-radius: 5px; color: var(--tx-2); }
.fp { cursor: help; }
svg.lucide { width: 16px; height: 16px; stroke-width: 2; flex: none; vertical-align: -3px; }
/* the short red-orange bar under page titles, as on the site */
.tbar { width: 120px; height: 4px; background: var(--cta); margin: 18px 0 0; }

/* cards: charcoal glass for data; .light for marketing-style blocks (white card, dark text, red icon badges) */
.card { background: oklch(0.29 0 0 / .82); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--sh), var(--hi); }
.card.light { background: var(--paper); color: var(--paper-tx); border-color: transparent; border-radius: 7px; box-shadow: none; backdrop-filter: none; }
.card.light .muted, .card.light p, .card.light small { color: var(--paper-muted); }
/* inside a white card the data colours darken so text stays above 4.5:1 */
.card.light a { color: oklch(0.5 0.19 31); }
.card.light a.term { color: inherit; text-decoration-color: oklch(0.6 0 0); }
.card.light .tag.real, .card.light .lab.measured, .card.light .lab.counted { color: oklch(0.48 0.16 255); background: oklch(0.714 0.143 255 / .16); box-shadow: inset 0 0 0 1px oklch(0.55 0.15 255 / .4); }
.card.light .tag.sim, .card.light .lab.calibrated { color: oklch(0.5 0.14 54); background: oklch(0.733 0.163 54 / .18); box-shadow: inset 0 0 0 1px oklch(0.6 0.15 54 / .45); }
.card.light .tag.mix, .card.light .lab.other { color: oklch(0.42 0 0); background: oklch(0 0 0 / .06); box-shadow: inset 0 0 0 1px oklch(0 0 0 / .15); }
.card.light .lab.estimated { color: oklch(0.47 0.1 84); background: oklch(0.837 0.164 84 / .25); }
.card.light .lab.assumed { color: oklch(0.5 0.19 31); background: oklch(0.605 0.205 31 / .14); }
.card.light .chips span { color: oklch(0.45 0.15 255); background: oklch(0.714 0.143 255 / .16); box-shadow: none; }
.card.light .chips span.old { color: oklch(0.47 0.1 84); background: oklch(0.837 0.164 84 / .25); }
.card.light .key small, .card.light .muted { color: var(--paper-muted); }
.card.light b { color: var(--paper-tx); }
.badge-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--cta); color: #fff; display: grid; place-items: center; flex: none; }
.badge-ic svg.lucide { width: 18px; height: 18px; vertical-align: 0; }
/* section eyebrows: "01 / HOW IT WORKS" in the brand orange */
.sec-h { font: 600 11.5px/1.2 var(--f); color: var(--t-orange); text-transform: uppercase; letter-spacing: .03em; margin: 40px 0 14px; }
.sec-h::before { counter-increment: sec; content: counter(sec, decimal-leading-zero) " / "; }
.eyebrow, .pg-h p.eyebrow { font: 600 11.5px/1.2 var(--f); color: var(--t-orange); text-transform: uppercase; letter-spacing: .03em; max-width: none; }

/* buttons: pills. The default is the red-orange CTA (white, bold, uppercase); .ghost is a light outline; .secondary a blue outline */
button, .btn { font: 700 11.5px/1 var(--f); letter-spacing: .04em; text-transform: uppercase; height: 40px; padding: 0 20px; border-radius: var(--pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  white-space: nowrap; color: #fff; background: var(--cta); transition: filter .15s, background .15s, border-color .15s, transform .15s; }
button:hover, .btn:hover { filter: brightness(1.08); }
button:active, .btn:active { transform: translateY(1px); }
button.ghost, .btn.ghost { background: transparent; color: var(--tx); border-color: oklch(1 0 0 / .35); }
button.ghost:hover, .btn.ghost:hover { border-color: var(--tx); filter: none; }
button.secondary, .btn.secondary { background: transparent; color: var(--t-orange); border-color: oklch(0.733 0.163 54 / .6); }
button:disabled { opacity: .45; cursor: default; filter: none; }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--t-orange); outline-offset: 3px; }

/* tags: provenance marks, the same on every page; the word is always there and the dot shape differs
   (REAL a circle, SIMULATED a diamond) so they never rely on colour alone */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px; border-radius: var(--pill); font: 700 9.5px/1 var(--f); letter-spacing: .07em;
  vertical-align: 1px; margin-left: 6px; white-space: nowrap; color: var(--tx-2); background: oklch(1 0 0 / .07); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tag.real { color: var(--real); background: var(--real-bg); box-shadow: inset 0 0 0 1px var(--real-line); }
.tag.sim { color: var(--sim); background: var(--sim-bg); box-shadow: inset 0 0 0 1px var(--sim-line); }
.tag.sim::before { border-radius: 1px; transform: rotate(45deg); width: 5px; height: 5px; }
.tag.mix { color: var(--tx-2); }
.tag.sample { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--chg-line); }
.tag.rec { color: var(--good); background: var(--good-bg); box-shadow: inset 0 0 0 1px oklch(0.546 0.145 155 / .5); }
.pilltag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--pill); background: var(--cta); color: #fff; font: 700 10px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; }
/* input labels: counted / measured, estimated, assumed, calibrated */
.lab { display: inline-block; font: 600 11px/1.7 var(--f); padding: 0 9px; border-radius: var(--pill); white-space: nowrap; }
.lab.counted, .lab.measured { background: var(--real-bg); color: var(--real); } .lab.estimated { background: var(--warn-bg); color: var(--warn); }
.lab.assumed { background: var(--bad-bg); color: var(--bad); } .lab.calibrated { background: var(--sim-bg); color: var(--sim); }
.lab.other { background: oklch(1 0 0 / .07); color: var(--tx-2); }
/* stage badges */
.stage { display: inline-block; font: 600 11px/1.8 var(--f); padding: 0 10px; border-radius: var(--pill); white-space: nowrap; background: oklch(1 0 0 / .07); color: var(--tx-2); }
.stage.proposed { background: var(--real-bg); color: var(--real); } .stage.in_review { background: var(--warn-bg); color: var(--warn); }
.stage.decided { background: var(--good-bg); color: var(--good); }
/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
th { color: var(--tx-3); font: 600 10.5px var(--f); text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; }
.tw { overflow-x: auto; }
.note { font-size: 13px; color: var(--tx-2); margin: 6px 0; }
.note.info, .note.warn, .note.off { padding: 10px 13px; border-radius: var(--r-sm); color: var(--tx); border: 1px solid; }
.note.info { background: var(--real-bg); border-color: var(--real-line); }
.note.warn { background: var(--bad-bg); border-color: oklch(0.605 0.205 31 / .45); }
.note.off { background: oklch(1 0 0 / .04); border-color: var(--line-2); }
.spin { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--t-orange); border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* markdown (md.js) */
.md p { margin: 6px 0; } .md ul, .md ol { margin: 6px 0; padding-left: 22px; } .md li { margin: 2px 0; }
.md-h { font-weight: 700; margin: 14px 0 6px; } .md-h1 { font-size: 20px; } .md-h2 { font-size: 16px; } .md-h3, .md-h4 { font-size: 14px; }
.md pre { background: oklch(0 0 0 / .3); border: 1px solid var(--line); padding: 10px; border-radius: 8px; overflow: auto; font: 12px var(--code); }
.md-q { border-left: 3px solid var(--t-orange); padding-left: 12px; color: var(--tx-2); margin: 8px 0; }
.md-t th { text-transform: none; letter-spacing: 0; font: 600 12px var(--f); color: var(--tx-2); }
.md-tw { overflow-x: auto; } .md-t { margin: 6px 0; } .md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
@media (max-width: 820px) { .wrap { padding: 20px 14px 36px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print {
  html, body { background: #fff !important; padding-top: 0; color: #111; }
  .card { box-shadow: none; backdrop-filter: none; border-color: #ddd; background: #fff; }
  button, .btn { box-shadow: none; }
  .noprint { display: none !important; }
}