/* 3PT · design tokens + shared components. Dark-base system. Tokens live here once; leaves never
   invent colors. Cluster accents are semantic (phase of the operation); status hues are for
   provenance/status only, never for clusters. */
:root{
  --bg:#0f1216; --panel:#151a21; --card:#1a2029; --sand:#1f262f; --line:#2a323d; --line-strong:#3a4552;
  --ink:#e6e9ee; --soft:#a3adbb; --faint:#6b7684;
  --pine:#0b0e12; --pine-soft:#1c232c;                 /* nav + deep surfaces */
  --violet:#8b7cf6; --violet-soft:#241f3d;             /* cluster: orient */
  --cyan:#3aa6d9;   --cyan-soft:#12303d;               /* cluster: decide */
  --amber:#e0a33a;  --amber-soft:#3a2c12;              /* cluster: build */
  --slate:#7d8a99;  --slate-soft:#232a33;              /* cluster: record */
  --plan:#8b7cf6; --build:#e0a33a; --instrument:#3fb886; /* the three points */
  --flag:#ff6b4a;                                      /* the one "you are here / new" accent */
  --good:#3fb886; --warn:#e0a33a; --alert:#e5534b;     /* status hues */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25);
  --bp-wide:900px; --bp-mid:760px; --bp-narrow:560px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.55 var(--sans)}
.page{max-width:1180px;margin:0 auto;padding:22px 26px 60px}
header.top{margin-bottom:18px}
.eyebrow{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
h1{font:800 26px/1.15 var(--sans);color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
h2{font:800 16px/1.3 var(--sans);color:var(--ink);margin:30px 0 10px;display:flex;align-items:baseline;gap:10px}
h2 span{font:600 11.5px/1 var(--sans);color:var(--faint);letter-spacing:.02em}
h3{font:700 13.5px/1.35 var(--sans);margin:16px 0 6px}
.lede{font:italic 400 15.5px/1.5 var(--serif);color:var(--soft);margin:0;max-width:74ch}
p{max-width:78ch}
a{color:var(--cyan)}
code{font:12px/1.5 var(--mono);background:var(--sand);border-radius:5px;padding:1px 6px}
.takeaway{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);padding:14px 18px;margin:16px 0;font-size:14px}
.takeaway .t2{color:var(--soft);font-size:12.5px;margin-top:6px}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px 12px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:border-color .12s,transform .12s;position:relative}
.card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.card svg{width:22px;height:22px;display:block;margin-bottom:8px}
.card b{display:block;font-size:14px;margin-bottom:3px}
.card span{display:block;font-size:12.6px;color:var(--soft);line-height:1.45}
.card em{display:block;font:600 11px/1 var(--sans);color:var(--flag);margin-top:10px;font-style:normal}
.card.unbuilt{border-style:dashed;background:transparent;box-shadow:none}
.card.unbuilt em{color:var(--faint)}
.card .id{position:absolute;top:12px;right:13px;font:700 10px/1 var(--mono);color:var(--faint);letter-spacing:.06em}
.card .temp{position:absolute;bottom:12px;right:13px;font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* cluster color hooks: cards + headings key into the same registry via data-cluster */
[data-cluster=orient]{--accent:var(--violet);--accent-soft:var(--violet-soft)}
[data-cluster=decide]{--accent:var(--cyan);--accent-soft:var(--cyan-soft)}
[data-cluster=build]{--accent:var(--amber);--accent-soft:var(--amber-soft)}
[data-cluster=record]{--accent:var(--slate);--accent-soft:var(--slate-soft)}
.card svg{color:var(--accent,var(--soft))}
h2[data-cluster]::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);align-self:center}
/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 4px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.stat .n{font:800 26px/1 var(--sans);color:var(--ink)}
.stat .l{font:600 11px/1.3 var(--sans);color:var(--soft);margin-top:6px;letter-spacing:.02em}
/* chips + status glyphs */
.chip{display:inline-block;font:800 9.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:var(--accent-soft,var(--sand));color:var(--accent,var(--soft))}
.st{font-family:var(--mono);font-size:13px;margin-right:4px}
.st.s0{color:var(--faint)} .st.s1{color:var(--cyan)} .st.s2{color:var(--warn)} .st.s3{color:var(--good)} .st.s4{color:var(--alert)}
/* provenance badge — one component, three states, status hues only */
.pv{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;padding:1px 6px;border-radius:3px;border:1px solid;white-space:nowrap;vertical-align:middle}
.pv.d{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)}
.pv.a{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.pv.c{color:var(--alert);border-color:color-mix(in srgb,var(--alert) 45%,transparent);background:color-mix(in srgb,var(--alert) 10%,transparent)}
/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:8px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font:700 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:var(--sand)}
tr:last-child td{border-bottom:0}
/* controls */
button,.btn{font:600 12px/1 var(--sans);border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:7px;padding:7px 11px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{border-color:var(--soft)}
button.primary,.btn.primary{background:var(--flag);color:#fff;border-color:var(--flag)}
button.on{background:var(--pine-soft);border-color:var(--soft)}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.rulebox{border-left:4px solid var(--warn);background:var(--card);border-radius:8px;padding:11px 14px;margin:12px 0;font-size:13px;color:var(--soft)}
.rulebox b{color:var(--ink)}
textarea,input[type=text],select{font:13px/1.4 var(--sans);border:1px solid var(--line-strong);border-radius:7px;padding:7px 9px;background:var(--panel);color:var(--ink);width:100%}
input[type=range]{accent-color:var(--flag)}
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:0;top:100%;margin-top:4px;background:var(--pine);border:1px solid var(--line);color:#fff;font:500 11.5px/1.35 var(--sans);padding:6px 9px;border-radius:6px;white-space:normal;width:max-content;max-width:280px;z-index:10;box-shadow:var(--shadow)}
footer{margin-top:48px;color:var(--faint);font-size:12px}
footer .rule{border:0;border-top:1px solid var(--line);margin:0 0 14px}
footer .wordmark{font:800 11px/1 var(--mono);letter-spacing:.2em;color:var(--ink);margin:0 0 4px}
footer .sig{font:italic 13px/1.4 var(--serif);color:var(--soft);margin:0 0 4px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.page{padding:16px 16px 50px}}
@media(max-width:560px){.stats{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}
@media print{.stats,.bar,button{display:none!important}.page{padding:0}body{background:#fff;color:#111}.card{box-shadow:none}}