/* Biosphere. One light page, one dark surface, one accent.
   Borders exist only where a white surface meets the page, and as hairlines
   between rows of the same list. Nothing nested gets a border. */

:root{
  /* six colours */
  --page:#F5F4EF;
  --surface:#FFFFFF;
  --ink:#15181B;
  --muted:#6E747B;
  --accent:#12684F;
  --dark:#0E1412;

  /* derived from the six, not new colours */
  --ink-soft:#3D434A;
  --rule:#E3E1D9;
  --rule-soft:#EFEDE6;
  --tint:#EDEBE4;
  --on-dark:#F2F3EF;
  --on-dark-muted:#93A29B;
  --on-dark-accent:#6BE0A6;
  --on-dark-rule:rgba(255,255,255,.14);
  --flag:#8A5A12;

  /* solver series, charts only */
  --s1:#2f6fd0;--s2:#e0662c;--s3:#17a877;--s4:#d99400;--s5:#d2669a;--s6:#2a8a3d;--s7:#5646b8;--s8:#cf4340;

  --sans:'Schibsted Grotesk',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* type scale: three headings, two texts */
  --h1:clamp(2.05rem,5.2vw,3.3rem);
  --h2:1.4rem;
  --h3:1.0625rem;
  --text:1rem;
  --small:.875rem;
  --label:.6875rem;

  /* spacing scale */
  --sp1:4px;--sp2:8px;--sp3:14px;--sp4:22px;--sp5:34px;--sp6:56px;--sp7:88px;

  --r:16px;--r-s:10px;
}

*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;background:var(--page);color:var(--ink);
  font:var(--text)/1.55 var(--sans);
  padding:0 var(--sp4) var(--sp6);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:1060px;margin:0 auto}
a{color:var(--accent)}
h1,h2,h3{font-weight:600;letter-spacing:-.018em;text-wrap:balance;margin:0}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.err{color:#A63A2C;font-size:var(--small)}

/* ---------- brand bar ---------- */
.bar{display:flex;align-items:center;gap:var(--sp3);padding:var(--sp4) 0;margin-bottom:var(--sp3)}
.brand{font-size:1.0625rem;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--muted);font-weight:400;margin-left:var(--sp2);font-size:var(--small);letter-spacing:0}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp4)}
.bar nav a{color:var(--muted);text-decoration:none;font-size:var(--small);font-weight:500;white-space:nowrap}
.bar nav a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:9px 17px;border-radius:999px;border:1px solid transparent;
  font-size:var(--small);font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--surface);color:var(--ink);border-color:var(--rule);font-family:inherit;
}
.btn:hover{border-color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--page);border-color:var(--ink)}
.btn.dark:hover{background:#000}
.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.light{background:var(--on-dark);color:var(--dark);border-color:transparent}
.btn.light:hover{background:#fff}
.btn.hollow{background:transparent;color:var(--on-dark);border-color:var(--on-dark-rule)}
.btn.hollow:hover{border-color:var(--on-dark)}

/* ---------- the one dark surface ---------- */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--dark);color:var(--on-dark);
  padding:clamp(24px,3.4vw,44px);
}
.hero::after{
  content:"";position:absolute;inset:-55% -25% auto auto;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(107,224,166,.10) 0%,rgba(107,224,166,0) 62%);pointer-events:none;
}
.hero > *{position:relative}
.hero .eyebrow{
  font-family:var(--mono);font-size:var(--label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-muted);margin:0 0 var(--sp3);
}
.hero h1{font-size:var(--h1);line-height:1.08;max-width:19ch;margin:0}
.hero h1 em{font-style:normal;color:var(--on-dark-accent)}
.hero h1 .num{font-family:var(--mono);font-weight:600;letter-spacing:-.03em}
.hero p{color:var(--on-dark-muted);max-width:56ch;margin:var(--sp3) 0 0;font-size:1.02rem}
.hero p b{color:var(--on-dark);font-weight:600}
.hero p .mono{font-family:var(--mono);font-size:.95em}
.hero .actions{display:flex;gap:var(--sp2);flex-wrap:wrap;margin-top:var(--sp4)}
@media (min-width:861px){
  .hero .actions{position:absolute;margin:0;top:clamp(24px,3.4vw,44px);right:clamp(24px,3.4vw,44px);justify-content:flex-end}
  .hero .eyebrow{max-width:76ch}
}
.hero .cmd{
  margin-top:var(--sp4);font-family:var(--mono);font-size:12.5px;line-height:1.7;
  color:var(--on-dark);background:rgba(0,0,0,.34);border-radius:var(--r-s);
  padding:11px 14px;overflow-x:auto;white-space:nowrap;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
}
.hero .cmd.inline{display:inline-block;max-width:100%;-webkit-mask-image:none;mask-image:none}
.hero .cmd::-webkit-scrollbar{height:4px}
.hero .cmd::-webkit-scrollbar-thumb{background:var(--on-dark-rule);border-radius:4px}

/* the chart lives edge to edge inside the hero */
.hero figure{margin:var(--sp5) 0 0}
.hero figure svg{width:100%;height:auto;display:block;overflow:visible}
.legend{
  display:flex;gap:var(--sp4);flex-wrap:wrap;margin:var(--sp3) 0 0;
  font-family:var(--mono);font-size:12px;color:var(--on-dark-muted);
}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.legend i.line{width:18px;height:0;border-top:2px solid var(--on-dark-accent);border-radius:0}
.legend i.dash{width:18px;height:0;border-top:2px dashed var(--on-dark);border-radius:0}

/* ---------- the one-line status strip under a hero ---------- */
.statline{
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
  margin:var(--sp3) 2px 0;display:flex;gap:var(--sp3);flex-wrap:wrap;
}
.statline b{color:var(--ink);font-weight:600}

/* ---------- section rhythm: big gaps between, small gaps within ---------- */
section{margin-top:var(--sp7)}
.sec-head{display:flex;align-items:baseline;gap:var(--sp4);flex-wrap:wrap;margin:0 2px var(--sp4)}
.sec-head h2{font-size:var(--h2)}
.sec-head p{margin:0;color:var(--muted);font-size:var(--small)}
.sec-head .right{margin-left:auto;text-align:right}

/* ---------- white panel ---------- */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--sp4)}
.panel.flush{padding:var(--sp4) 0}
.panel.flush > .panel-head,.panel.flush > .tabs,.panel.flush > .pad{padding-left:var(--sp4);padding-right:var(--sp4)}
.panel-head{display:flex;align-items:flex-start;gap:var(--sp4);flex-wrap:wrap}
.panel-head .grow{min-width:0;flex:1 1 320px}

/* the one big figure: current record */
.record{margin-left:auto;text-align:right;min-width:0}
.record .k{font-family:var(--mono);font-size:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.record .v{font-family:var(--mono);font-size:clamp(1.7rem,4.6vw,2.4rem);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.record .s{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:var(--sp4);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
@media (max-width:640px){.tabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  font:inherit;font-size:var(--small);font-weight:600;background:none;border:0;
  border-bottom:2px solid transparent;padding:0 0 10px;margin-bottom:-1px;
  color:var(--muted);cursor:pointer;white-space:nowrap;
}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.tabpanel{padding-top:var(--sp4)}

/* ---------- problem rows ---------- */
.rows{padding:0}
.prow{
  display:grid;grid-template-columns:minmax(0,1fr) auto 200px;align-items:center;
  gap:var(--sp5);padding:var(--sp4);text-decoration:none;color:inherit;
  border-top:1px solid var(--rule-soft);
}
.rows .prow:first-child{border-top:0}
.prow:hover{background:#FBFAF7}
.prow h3{font-size:var(--h3);margin:0 0 2px}
.prow .sub{font-size:var(--small);color:var(--muted)}
.prow .sub b{color:var(--ink-soft);font-weight:600}
.prow .val{text-align:right;white-space:nowrap}
.prow .val .n{font-family:var(--mono);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.prow .val .of{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.prow .spark{min-width:0}
.prow .spark svg{width:100%;height:auto;display:block}
@media (max-width:760px){
  .prow{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp3) var(--sp4);padding:var(--sp4) var(--sp3)}
  .prow .spark{grid-column:1/-1}
}

/* ---------- tables ---------- */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:var(--small)}
th{
  text-align:left;font-family:var(--mono);font-size:var(--label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:0 var(--sp3) var(--sp2) 0;border-bottom:1px solid var(--rule);white-space:nowrap;
}
td{padding:13px var(--sp3) 13px 0;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums}
td.num b{font-weight:600}
th:last-child,td:last-child{padding-right:0}
.rank{font-family:var(--mono);color:var(--muted);font-size:12px;width:26px}
.when{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.tbl table{min-width:680px}
td.nowrap{white-space:nowrap}
.chev{color:var(--muted);font-size:13px;display:inline-block;transition:transform .12s ease}
tr.open .chev{transform:rotate(90deg);color:var(--ink)}
th.chevcol,td.chevcol{width:16px;padding-right:0;text-align:right}
tbody tr.open{background:#FBFAF7}
tr.expand td{padding-top:0;font-size:var(--small);color:var(--ink-soft)}
tr.expand .box{background:var(--tint);border-radius:var(--r-s);padding:var(--sp3);line-height:1.5}
tr.expand .box p{margin:0 0 var(--sp2)}
tr.expand .box p:last-child{margin:0}
tr.clickable{cursor:pointer}

/* solver identity */
.solver{display:inline-flex;align-items:center;gap:var(--sp2);white-space:nowrap;font-weight:600}
.solver img{width:22px;height:22px;border-radius:50%;background:var(--tint);flex:none}
.solver .dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.solver a{color:inherit;text-decoration:none}
.solver a:hover{text-decoration:underline}
.model{
  display:inline-block;font-family:var(--mono);font-size:11px;color:var(--muted);
  border:1px solid var(--rule);border-radius:999px;padding:2px 8px;white-space:nowrap;margin-left:var(--sp2);
}
.delta{font-family:var(--mono);font-size:12px;color:var(--muted)}
.delta.up{color:var(--accent)}

/* small state marks */
.pill{font-family:var(--mono);font-size:11px;white-space:nowrap;color:var(--muted)}
.pill.ok{color:var(--accent)}
.pill.ok::before{content:"✓ "}
.pill.warn{color:var(--flag)}
.pill.bad{color:#A63A2C}

/* ---------- prose ---------- */
.prose{max-width:62ch;color:var(--ink-soft);font-size:1.0625rem;line-height:1.62}
.prose p{margin:0 0 1.05em}
.prose p:last-child{margin:0}
.prose b{color:var(--ink)}
.prose a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
.prose h1,.prose h2,.prose h3{color:var(--ink);margin:1.6em 0 .5em;font-size:var(--h3)}
.prose h1:first-child,.prose h2:first-child{margin-top:0}
.prose code{font-size:.92em}
.prose table{font-size:var(--small)}
.prose ul,.prose ol{padding-left:1.1em}

code{font-family:var(--mono);font-size:12.5px;background:var(--tint);padding:1px 5px;border-radius:5px}
pre{
  font-family:var(--mono);font-size:12.5px;line-height:1.8;background:var(--dark);color:var(--on-dark);
  border-radius:var(--r-s);padding:var(--sp3) var(--sp4);overflow-x:auto;margin:0;
}
pre .c{color:var(--on-dark-muted)}

/* ---------- claims ---------- */
details{border-bottom:1px solid var(--rule-soft);padding:var(--sp3) 0}
details:last-of-type{border-bottom:0}
details summary{cursor:pointer;list-style:none;display:flex;gap:var(--sp3);align-items:baseline;flex-wrap:wrap}
details summary::-webkit-details-marker{display:none}
details summary .st{flex:none;width:6.5em}
details summary .stmt{flex:1 1 260px;min-width:0}
details .body{padding:var(--sp3) 0 var(--sp1);font-family:var(--mono);font-size:12px;color:var(--ink-soft);line-height:1.8}

/* evaluator list */
.evrow{padding:var(--sp3) 0;border-bottom:1px solid var(--rule-soft);font-size:var(--small)}
.evrow:last-child{border-bottom:0}
.evrow .line{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:var(--sp1);word-break:break-all}
.evrow .line b{color:var(--ink-soft);font-weight:500}

/* ---------- forms (account) ---------- */
.field{font:inherit;font-size:var(--small);padding:9px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);min-width:0}
.row{display:flex;gap:var(--sp2);flex-wrap:wrap;align-items:center}
.klabel{font-family:var(--mono);font-size:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp2)}

/* ---------- tooltip ---------- */
.tip{
  position:fixed;pointer-events:none;background:var(--ink);color:var(--page);font-size:12.5px;
  padding:9px 11px;border-radius:var(--r-s);max-width:320px;line-height:1.45;z-index:9;display:none;
}
.tip b{color:#fff}
.tip .m{font-family:var(--mono)}

/* ---------- footer ---------- */
footer{
  max-width:1060px;margin:var(--sp7) auto 0;padding-top:var(--sp3);border-top:1px solid var(--rule);
  font-size:var(--small);color:var(--muted);display:flex;gap:var(--sp4);flex-wrap:wrap;
}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}

/* ---------- phone ---------- */
@media (max-width:640px){
  :root{--h2:1.25rem;--sp6:40px;--sp7:56px}
  body{padding:0 var(--sp3) var(--sp5)}
  .brand span{display:none}
  .bar{padding:var(--sp3) 0}
  .bar nav{gap:var(--sp3)}
  .hero h1{max-width:none}
  .hero .actions .btn{flex:1 1 auto;text-align:center}
  .panel{padding:var(--sp3)}
  .panel.flush{padding:var(--sp3) 0}
  .panel.flush > .panel-head,.panel.flush > .tabs,.panel.flush > .pad{padding-left:var(--sp3);padding-right:var(--sp3)}
  .record{margin-left:0;text-align:left}
  .prose{font-size:1rem}
  footer{gap:var(--sp3)}
}
.hero p code{background:rgba(255,255,255,.14);color:inherit}