/* The Terminator Index — tech tree
   Implements docs/specs/07-tech-tree.md, from CD's brief and prototype.
   Single dark theme, deliberately: the design commits to one visual world, so
   every colour is painted explicitly and nothing is inherited from the host. */

:root{
  --ground:#0B0B0C;
  --rule:#26262B;
  --rule-dim:#1B1B1F;
  --body:#EDEBE4;
  --meta:#8A8A82;          /* do not go darker: 9px text below this fails AA here */

  /* status. Reserved, and they mean one thing. Never category identity. */
  --on-track:#7FE04C;
  --more-efforts:#E8B33C;
  --not-on-track:#FF6B5A;
  --gate:#FF3B00;
  --gated:#FF8A5A;

  /* recency */
  --hot:#FF5C4D; --warm:#FF9A3C; --mid:#E8C93C; --cool:#6E9AD8; --cold:#5A6470;

  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:Archivo,'Helvetica Neue',Arial,sans-serif;
  --display:Michroma,Archivo,sans-serif;

  /* the tree grid. Identical on the header and every row variant, or they
     de-align. Fixed columns total 412px; past ~420 the last column clips at a
     900px viewport. */
  --cols:minmax(0,1fr) 116px 130px 70px 96px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--body);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:#FF6BC0; text-decoration:none}
a:hover{color:#FFA3D8}
.wrap{max-width:1340px; margin:0 auto; padding:0 36px}
:focus-visible{outline:2px solid #FF6BC0; outline-offset:2px}

/* ── masthead ─────────────────────────────────────────────────── */
.mast{padding:56px 0 24px}
.mast-grid{display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:end}
.wordmark{
  font-family:var(--display); font-size:34px; line-height:1.2;
  letter-spacing:-.01em; white-space:nowrap;
}
.strap{font-size:15px; line-height:1.6; color:#A8A69E; margin-top:16px}
.reckey{display:flex; flex-direction:column; gap:7px}
.reckey-label{font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--meta)}
.reckey-bars{display:flex; gap:5px; align-items:flex-start}
.reckey-bars>div{flex:1}
.reckey-bars .chip{height:5px}
.reckey-bars .txt{font-family:var(--mono); font-size:7.5px; color:var(--meta); margin-top:5px; white-space:nowrap}

/* ── the tree ─────────────────────────────────────────────────── */
.tree{border:1px solid var(--rule); margin-bottom:22px}
.thead{
  display:grid; grid-template-columns:var(--cols); gap:14px;
  padding:11px 20px; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--meta);
}
.thead .r{text-align:right}

.node{border-bottom:1px solid var(--rule-dim)}
.row{
  display:grid; grid-template-columns:var(--cols); gap:14px;
  padding:11px 20px; cursor:pointer; align-items:center;
  background:none; border:0; width:100%; text-align:left; font:inherit; color:inherit;
}
.row:hover .nm{text-decoration:underline; text-underline-offset:3px}
.node.d0>.row{padding-top:17px; padding-bottom:17px}
.node.d1>.row{padding-top:13px; padding-bottom:13px}

.cell-node{display:flex; align-items:baseline; gap:11px; row-gap:5px; flex-wrap:wrap}
.mark{font-family:var(--mono); font-size:12px; width:9px; flex:none}
.nm{flex:0 1 auto; min-width:0; overflow-wrap:anywhere}
.node.d0 .nm{font-family:var(--display); font-size:11px; font-weight:400}
.node.d1 .nm{font-size:13.5px; font-weight:600}
.node.d2 .nm{font-size:13px; font-weight:400}
.mission{font-size:12.5px; color:var(--meta); flex:0 1 auto; min-width:0}
.rowmeta{font-family:var(--mono); font-size:8.5px; color:var(--meta); flex:none; white-space:nowrap}
.flag{font-family:var(--mono); font-size:8.5px; color:#FF7A66; flex:none; white-space:nowrap}

.cell-state{font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; white-space:nowrap}
.cell-bar{background:var(--rule)}
.cell-bar>div{height:100%}
.node.d0 .cell-bar{height:8px}
.node.d1 .cell-bar{height:6px}
.node.d2 .cell-bar{height:4px}
.cell-reading{font-family:var(--mono); text-align:right; font-size:11.5px}
.node.d0 .cell-reading{font-size:13px}
.cell-moved{display:flex; align-items:center; justify-content:flex-end; gap:7px}
.cell-moved i{width:6px; height:6px; flex:none; display:block}
.cell-moved span{font-family:var(--mono); font-size:8.5px; white-space:nowrap}

/* ── hero (families) ──────────────────────────────────────────── */
.hero{display:grid; grid-template-columns:minmax(240px,.72fr) 1fr; align-items:stretch; border-top:1px solid var(--dim)}
.plate{position:relative; min-height:290px; overflow:hidden}
.plate img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.12); mix-blend-mode:multiply;
}
.plate .wash{position:absolute; inset:0; mix-blend-mode:lighten}
.plate .cap{
  position:absolute; left:0; right:0; bottom:0; padding:13px 17px;
  font-family:var(--mono); font-size:8px; letter-spacing:.06em; line-height:1.6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero-body{padding:36px 40px; display:flex; flex-direction:column; justify-content:center}
.kicker{font-family:var(--display); font-size:9px; letter-spacing:.16em}
.hed{font-size:24px; line-height:1.28; font-weight:600; letter-spacing:-.015em; margin-top:13px; max-width:27ch; text-wrap:pretty}
.big{font-family:var(--mono); font-size:38px; font-weight:500; letter-spacing:-.03em; margin-top:18px; line-height:1}
.big-label{font-family:var(--mono); font-size:9.5px; margin-top:7px; letter-spacing:.1em}
.blurb{font-size:14.5px; line-height:1.62; margin-top:18px; max-width:54ch; text-wrap:pretty; opacity:.9}

/* ── card (mid-tier) ──────────────────────────────────────────── */
.card{display:grid; grid-template-columns:168px 1fr; gap:26px; padding:22px 26px 24px; border-top:1px solid var(--dim)}
.card .plate{min-height:0; height:128px}
.card .cap{padding:7px 9px; font-size:7px}
.card .blurb{margin-top:0; font-size:15px; max-width:68ch; opacity:1}
.facts{display:flex; gap:26px; margin-top:15px; flex-wrap:wrap; font-family:var(--mono); font-size:9px}

/* ── plain ────────────────────────────────────────────────────── */
.plain{padding:18px 26px 20px; border-top:1px solid var(--dim); display:grid; grid-template-columns:1fr minmax(220px,300px); gap:40px}
.plain .blurb{margin-top:0; font-size:14.5px; max-width:70ch; opacity:1}
.footmeta{font-family:var(--mono); font-size:8.5px; line-height:2; white-space:pre-line}

/* ── leaf (measurements) ──────────────────────────────────────── */
.leaf{border-top:1px solid var(--dim); padding:24px 26px 28px; display:grid; grid-template-columns:1fr minmax(250px,320px); gap:44px}
.lab{font-family:var(--mono); font-size:9px; letter-spacing:.14em}
.lab+.lab{margin-top:18px}
.prose{font-size:14.5px; line-height:1.62; margin-top:8px; max-width:62ch; text-wrap:pretty}
.gapwrap{margin-top:24px; max-width:540px}
.gaptrack{position:relative; height:20px; margin-top:9px}
.gaptrack .axisline{position:absolute; left:0; right:0; top:9px; height:1px}
.gaptrack .fill{position:absolute; left:0; top:6px; height:7px}
.gaptrack .capL{position:absolute; left:0; top:2px; width:2px; height:15px}
.gaptrack .capR{position:absolute; top:2px; width:2px; height:15px}
.axis{position:relative; height:24px}
.axis .t{position:absolute; top:0}
.axis .tick{width:1px}
.axis .tlab{font-family:var(--mono); font-size:8.5px; margin-top:4px; white-space:nowrap}
.nowline{font-family:var(--mono); font-size:9.5px; margin-top:10px; line-height:1.7}
.src{padding:11px 0 10px; border-top:1px solid var(--dim)}
.src-top{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.src-date{font-family:var(--mono); font-size:9px}
.src-kind{font-family:var(--mono); font-size:8px; letter-spacing:.06em; white-space:nowrap}
.src-text{font-size:12.5px; line-height:1.45; margin-top:5px}
.src-org{font-family:var(--mono); font-size:8.5px; margin-top:5px}
.src-via{font-family:var(--mono); font-size:8.5px; color:#FF6BC0; margin-top:4px}
.submit{font-family:var(--mono); font-size:8.5px; color:#FF6BC0; margin-top:11px; display:inline-block}
.indlist{margin-top:16px}
.ind{display:grid; grid-template-columns:1fr auto; gap:14px; padding:7px 0; border-top:1px solid var(--dim); align-items:baseline}
.ind .m{font-size:12.5px; line-height:1.4}
.ind .v{font-family:var(--mono); font-size:9.5px; white-space:nowrap; text-align:right}

/* ── footer ───────────────────────────────────────────────────── */
.treefoot{
  padding:15px 20px; font-family:var(--mono); font-size:9px; letter-spacing:.06em;
  color:var(--meta); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.treefoot button,.treefoot a{background:none;border:0;padding:0;font:inherit;color:#FF6BC0;cursor:pointer}
.treefoot button:hover,.treefoot a:hover{color:#FFA3D8}
.pagefoot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding-bottom:120px; font-family:var(--mono); font-size:9px;
  letter-spacing:.06em; color:var(--meta);
}

@media(max-width:900px){
  .wrap{padding:0 18px}
  :root{--cols:minmax(0,1fr) 92px 62px}
  .thead .h-progress,.thead .h-moved,.cell-bar,.cell-moved{display:none}
  .mast-grid{grid-template-columns:1fr; gap:24px; align-items:start}
  .wordmark{white-space:normal; font-size:24px}
  .hero,.card,.plain,.leaf{grid-template-columns:1fr; gap:20px}
  .plate{min-height:180px}
  .hero-body{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}