/* Observation Ladder — an instrument, not a dashboard.
   No cards, no shadows, almost no radii. Hairlines and space do the separating;
   type and aligned numerals do the hierarchy. One restrained hue. */

:root{
  --paper:#FBFBF9;
  --ink:#14161A;
  --ink-2:#4A4F58;
  --ink-3:#8B9099;
  --rule:#E5E5E1;
  --rule-2:#CFCFC9;
  --accent:#3A4E7A;
  --pass:#2F6B4F;
  --partial:#8C6620;
  --fail:#A33B47;
  --f-ui:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --measure:66ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0D0E11;
    --ink:#EAEAE6;
    --ink-2:#A9AEB6;
    --ink-3:#767C86;
    --rule:#24262B;
    --rule-2:#3A3D44;
    --accent:#93A6D8;
    --pass:#69C295;
    --partial:#D3A559;
    --fail:#DE8490;
  }
}
:root[data-theme="dark"]{
  --paper:#0D0E11;
  --ink:#EAEAE6;
  --ink-2:#A9AEB6;
  --ink-3:#767C86;
  --rule:#24262B;
  --rule-2:#3A3D44;
  --accent:#93A6D8;
  --pass:#69C295;
  --partial:#D3A559;
  --fail:#DE8490;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:15px;line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.014em;text-wrap:balance}
p{margin:0}
a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--rule-2)}
a:hover{text-decoration-color:var(--accent)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.eyebrow{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .in{
  max-width:1140px;margin:0 auto;padding:22px 32px 20px;
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
}
.wordmark{font-size:16px;font-weight:600;letter-spacing:-.01em}
.tagline{color:var(--ink-3);font-size:13px;max-width:52ch}
.masthead .sp{margin-left:auto;display:flex;gap:18px;align-items:baseline}
.util{font-size:12px;color:var(--ink-3);text-decoration:none;background:none;border:0;padding:0}
.util:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- shell ---------- */
.shell{
  max-width:1140px;margin:0 auto;padding:0 32px 72px;
  display:grid;grid-template-columns:236px minmax(0,1fr);
}
.rail{
  position:sticky;top:0;align-self:start;
  padding:30px 30px 30px 0;border-right:1px solid var(--rule);
  max-height:100vh;overflow-y:auto;
}
main{padding:30px 0 0 34px;min-width:0}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;padding:0 22px 60px}
  .rail{position:static;border-right:0;border-bottom:1px solid var(--rule);padding:22px 0;max-height:none}
  main{padding:26px 0 0}
}

/* ---------- ladder ---------- */
.railhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.rungs{list-style:none;margin:0;padding:0}
.rungs li + li{margin-top:1px}
.rung{
  display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:baseline;
  width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;
  padding:7px 8px 8px 10px;color:var(--ink-3);line-height:1.3;
}
.rung:hover{color:var(--ink-2)}
.rung[aria-current="true"]{border-left-color:var(--accent);color:var(--ink)}
.rung .n{font-family:var(--f-mono);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
.rung[aria-current="true"] .n{color:var(--accent)}
.rung .t{font-size:13.5px}
.rung .tier{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;opacity:.75}
.rung .mark{color:var(--pass);font-family:var(--f-mono);font-size:11px;margin-left:5px}

.trend{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.trend .eyebrow{display:block;margin-bottom:10px}
.spark{width:100%;height:70px;display:block}
.trendnote{font-size:11px;color:var(--ink-3);margin-top:8px;font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- sections ---------- */
.sec{padding:0 0 34px}
.sec + .sec{padding-top:34px;border-top:1px solid var(--rule)}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.sechead h2{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* brief */
.briefnum{font-family:var(--f-mono);font-size:44px;font-weight:300;letter-spacing:-.03em;color:var(--rule-2);line-height:1;font-variant-numeric:tabular-nums}
.brieftop{display:flex;gap:18px;align-items:flex-start}
.brieftitle h1{font-size:27px;letter-spacing:-.02em;margin-bottom:5px}
.scope{color:var(--ink-2);max-width:var(--measure);margin-top:12px}
.trains{margin-top:16px;max-width:var(--measure)}
.trains .eyebrow{display:block;margin-bottom:4px}
.trains p{color:var(--ink-2);font-size:14px}
.guard{
  margin-top:16px;max-width:var(--measure);font-size:13.5px;color:var(--fail);
  padding-left:13px;border-left:2px solid var(--fail);
}

/* forms */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
@media (max-width:620px){.grid2{grid-template-columns:1fr}}
label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin-bottom:6px}
label .hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3);opacity:.85}
input[type=text],input[type=password],textarea,select{
  width:100%;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--rule-2);border-radius:0;
  padding:6px 0 7px;font-family:inherit;font-size:14.5px;line-height:1.55;
}
input:focus,textarea:focus,select:focus{outline:0;border-bottom-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.55}
textarea{resize:vertical;min-height:74px}
textarea.big{min-height:250px}
textarea.mono,input.mono{font-family:var(--f-mono);font-size:13px;line-height:1.75}
.field{margin-top:22px}
.field.first{margin-top:0}
.chk{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--ink-2);margin-top:14px;text-transform:none;letter-spacing:0;font-weight:400}
.chk input{margin:0;accent-color:var(--accent)}

.row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:26px}
.btn{
  border:0;background:var(--ink);color:var(--paper);
  border-radius:2px;padding:10px 20px;font-weight:500;font-size:14px;letter-spacing:.01em;
}
.btn:hover{opacity:.86}
.btn.ghost{background:transparent;color:var(--ink-2);border:0;padding:10px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--rule-2)}
.btn.ghost:hover{color:var(--ink);text-decoration-color:var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.saveflag{font-size:11.5px;color:var(--ink-3);font-family:var(--f-mono)}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));border-top:1px solid var(--rule)}
.metric{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule)}
.metric .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.metric .v{
  font-family:var(--f-mono);font-size:23px;font-weight:400;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-top:6px;line-height:1;color:var(--ink);
}
.metric .band{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-top:5px}
.v.ok{color:var(--pass)} .v.warn{color:var(--partial)} .v.bad{color:var(--fail)}

.flags{margin-top:22px;display:flex;flex-direction:column;gap:12px;max-width:var(--measure)}
.flag{display:grid;grid-template-columns:74px 1fr;gap:14px;font-size:13.5px;color:var(--ink-2)}
.flag .tag{
  font-family:var(--f-mono);font-size:10px;font-weight:500;text-transform:uppercase;
  letter-spacing:.08em;color:var(--fail);padding-top:3px;
}
.flag.warn .tag{color:var(--partial)}
.flag b{color:var(--ink);font-weight:600}

table.items{width:100%;border-collapse:collapse;margin-top:6px}
table.items td{border-bottom:1px solid var(--rule);padding:12px 10px 12px 0;vertical-align:baseline;font-size:14px}
table.items td.num{width:24px;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
table.items td.verdict{width:96px;text-align:right;white-space:nowrap}
table.items td b{font-weight:500}
.why{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px;max-width:60ch}
.pill{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding-bottom:2px;border-bottom:1.5px solid currentColor}
.pill.pass{color:var(--pass)} .pill.partial{color:var(--partial)} .pill.fail{color:var(--fail)} .pill.na{color:var(--ink-3);border-bottom-style:dotted}

.next{margin-top:28px;max-width:var(--measure);padding-left:14px;border-left:2px solid var(--accent)}
.next .eyebrow{display:block;margin-bottom:5px;color:var(--accent)}
.next p{color:var(--ink);font-size:15px}

.readout{margin-top:10px;max-width:var(--measure);font-size:15px;line-height:1.68;color:var(--ink-2)}
.readout h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 8px}
.readout h4:first-child{margin-top:4px}
.readout p{margin:0 0 12px}
.readout ul{margin:0 0 12px;padding-left:18px}
.readout li{margin-bottom:5px}
.readout code{font-family:var(--f-mono);font-size:12.5px}
.thinking{color:var(--ink-3)}

.foot{max-width:1140px;margin:0 auto;padding:0 32px 56px;color:var(--ink-3);font-size:12px;max-width:1140px}
.foot p{max-width:74ch}
.hidden{display:none!important}

/* ---------- gate ---------- */
.gate{min-height:100%;display:grid;place-items:center;padding:24px}
.gatecard{width:100%;max-width:330px}
.gatecard .eyebrow{display:block;margin-bottom:10px}
.gatecard h1{font-size:22px;margin-bottom:8px;letter-spacing:-.02em}
.gatecard p.sub{color:var(--ink-3);font-size:13.5px;margin:0 0 26px}
.gatecard .err{color:var(--fail);font-size:12.5px;min-height:18px;margin-top:12px;font-family:var(--f-mono)}
.gatecard .row{margin-top:20px}