/* ═══ TECH TREE — the Science Advisor ═════════════════════════════════
   Uses the site tokens from site.css, so light and dark follow it.
   Status hues: known = mint, researching = sky, not yet discovered =
   faint ink on a dashed edge, abandoned = lilac, struck through.       */

.tt-hero .page-hero-grid { padding-block: clamp(44px, 7vh, 84px) clamp(30px, 5vh, 56px); }
.tt-deck-note { font: 500 11px/1.6 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

.tt-shell { overflow-x: clip; padding-block: 28px 72px; --tt-k: var(--mint); --tt-r: var(--sky); --tt-n: var(--ink-faint); --tt-a: var(--lilac); --tt-card: color-mix(in srgb, var(--night-2) 88%, transparent); }

.tt-s-known { --c: var(--tt-k); }
.tt-s-researching { --c: var(--tt-r); }
.tt-s-not-yet-discovered { --c: var(--tt-n); }
.tt-s-abandoned { --c: var(--tt-a); }

/* legend + statechart */
.tt-legend { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; padding: 16px 0 18px; border-bottom: 1px solid var(--hairline); }
.tt-legend-keys { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.tt-key { display: inline-flex; gap: 8px; align-items: center; font: 600 11px/1.5 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.tt-key i, .tt-pill i, .tt-chip i, .tt-node-meta i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.tt-s-not-yet-discovered.tt-key i, .tt-pill.tt-s-not-yet-discovered i, .tt-chip.tt-s-not-yet-discovered i, .tt-s-not-yet-discovered .tt-node-meta i { background: transparent; border: 1.5px dashed var(--c); }
.tt-s-researching.tt-key i, .tt-pill.tt-s-researching i, .tt-chip.tt-s-researching i, .tt-s-researching .tt-node-meta i { background: conic-gradient(var(--c) 0 60%, transparent 60%); border: 1px solid var(--c); }
.tt-chart-note { flex: 1 1 320px; font-size: var(--fs-300); color: var(--ink-dim); }
.tt-chart-note summary { cursor: pointer; font: 600 11px/1.5 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-bright); }
.tt-statechart { width: 100%; max-width: 520px; display: block; margin: 12px 0 6px; }
.tt-statechart text { font: 500 13px var(--grotesk); fill: var(--ink); text-anchor: middle; }
.tt-statechart .tt-sc-lab { font-size: 11px; fill: var(--ink-faint); }
.tt-sc-state { fill: none; stroke: var(--c); stroke-width: 1.5; }
.tt-sc-state.tt-s-not-yet-discovered { stroke-dasharray: 4 3; }
.tt-sc-edge { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; }
.tt-sc-head { fill: var(--ink-faint); }

/* level switch */
.tt-levels { display: flex; gap: 0; margin: 24px 0 18px; border: 1px solid var(--hairline-strong); border-radius: 3px; width: fit-content; max-width: 100%; }
.tt-levels button { font: 600 12px/1.4 var(--grotesk); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); background: none; border: 0; padding: 10px 16px; cursor: pointer; }
.tt-levels button + button { border-left: 1px solid var(--hairline-strong); }
.tt-levels button b { font-family: "Dregg Hand", var(--grotesk); font-size: 18px; color: var(--brass); margin-right: 6px; font-weight: 500; }
.tt-levels button[aria-pressed="true"] { color: var(--ink); background: var(--brass-faint); }

.tt-howto { color: var(--ink-dim); font-size: var(--fs-300); max-width: 68ch; }
.tt-h2 { font-size: var(--fs-600); margin: 46px 0 6px; }

/* ── LEVEL I: era map ─────────────────────────────────────────────── */
.tt-eramap { display: grid; gap: 4px; margin-top: 14px; }
.tt-em-row { display: grid; grid-template-columns: minmax(170px, 1.25fr) repeat(6, minmax(0, 1fr)); gap: 4px; }
.tt-em-head { position: sticky; top: 64px; z-index: 2; background: var(--night-1); padding-block: 6px; }
.tt-em-corner { font: 600 10px/1.4 var(--grotesk); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); align-self: end; }
.tt-em-era { font: 600 12px/1.25 var(--grotesk); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border-top: 2px solid var(--brass-line); padding-top: 6px; }
.tt-em-era small { display: block; font: 400 11.5px/1.35 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-faint); margin-top: 3px; }
.tt-em-num { display: block; font: 500 20px/1 "Dregg Hand", var(--grotesk); color: var(--brass); margin-bottom: 2px; }
.tt-em-proj button, .tt-em-cell button { width: 100%; height: 100%; text-align: left; background: var(--tt-card); border: 1px solid var(--hairline); border-radius: 3px; padding: 10px; color: var(--ink); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 6px; }
.tt-em-proj button:hover, .tt-em-cell button:hover { border-color: var(--brass-line); }
.tt-em-proj b { font: 400 19px/1.15 var(--display); }
.tt-em-proj small { font-size: 12.5px; line-height: 1.4; color: var(--ink-dim); }
.tt-em-n, .tt-em-count { font: 500 10.5px/1.4 var(--grotesk); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.tt-em-names { font-size: 12.5px; line-height: 1.35; color: var(--ink-dim); }
.tt-em-empty { border: 1px dashed var(--hairline); border-radius: 3px; min-height: 40px; opacity: .5; }
.tt-pips { display: flex; flex-wrap: wrap; gap: 3px; }
.tt-pips i { width: 8px; height: 8px; border-radius: 1px; background: var(--c); }
.tt-pips i.tt-s-not-yet-discovered { background: transparent; outline: 1px dashed var(--c); outline-offset: -1px; }
.tt-pips i.tt-s-abandoned { opacity: .55; }
.tt-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--hairline); }
.tt-bar span { background: var(--c); }
.tt-bar .tt-s-not-yet-discovered { background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 5px); }

/* relations */
.tt-relations { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.tt-rel-svg { width: 100%; height: auto; }
.tt-rel-edge { fill: none; stroke: var(--violet); opacity: .6; }
.tt-rel-ported { stroke: var(--brass); stroke-dasharray: 7 4; }
.tt-rel-head { fill: var(--ink-faint); }
.tt-rel-node { cursor: pointer; }
.tt-rel-node rect { fill: var(--night-2); stroke: var(--brass-line); }
.tt-rel-node:hover rect, .tt-rel-node:focus rect { stroke: var(--brass-bright); }
.tt-rel-node text { font: 600 12.5px var(--grotesk); fill: var(--ink); text-anchor: middle; letter-spacing: .04em; }
.tt-rel-list { list-style: none; padding: 0; margin: 0; font-size: var(--fs-300); }
.tt-rel-list li { padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.tt-rel-list span { display: block; color: var(--ink-faint); font: 500 11px/1.5 var(--grotesk); letter-spacing: .08em; text-transform: uppercase; }

/* goals */
.tt-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.tt-goal { border: 1px solid var(--hairline-strong); border-left: 2px solid var(--brass); border-radius: 0 4px 4px 0; padding: 16px 18px; background: var(--tt-card); }
.tt-goal h3 { font-size: var(--fs-600); margin: 0 0 6px; }
.tt-goal p { font-size: var(--fs-300); color: var(--ink-dim); }
.tt-goal-proj { font: 600 10.5px/1.4 var(--grotesk) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-bright) !important; margin: 0 0 4px; }
.tt-goal-frac { display: flex; flex-direction: column; gap: 6px; font: 500 11px/1.5 var(--grotesk); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.tt-meter { display: block; height: 4px; background: var(--hairline-strong); border-radius: 2px; overflow: hidden; }
.tt-meter span { display: block; height: 100%; background: var(--mint); }
.tt-path { list-style: none; counter-reset: p; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 4px; }
.tt-path li { display: flex; align-items: center; gap: 4px; }
.tt-path li + li::before { content: "→"; color: var(--ink-faint); font-size: 12px; }
.tt-goal-go, .tt-show { font: 600 11px/1.4 var(--grotesk); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-bright); background: none; border: 1px solid var(--brass-line); border-radius: 2px; padding: 7px 12px; cursor: pointer; }
.tt-goal-go:hover, .tt-show:hover { background: var(--brass-faint); }

/* chips & pills */
.tt-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1.3 var(--grotesk); color: var(--ink); background: none; border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 3px 10px 3px 8px; cursor: pointer; text-align: left; }
.tt-chip:hover { border-color: var(--c); }
.tt-chip small { color: var(--ink-faint); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.tt-chip.tt-s-abandoned { text-decoration: line-through; text-decoration-color: var(--c); }
.tt-pill { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px/1.6 var(--grotesk); letter-spacing: .11em; text-transform: uppercase; color: var(--c); border: 1px solid var(--c); border-radius: 2px; padding: 2px 9px 2px 7px; }

/* ── LEVEL II: the tree ───────────────────────────────────────────── */
.tt-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin-bottom: 12px; }
.tt-controls label { display: flex; flex-direction: column; gap: 4px; font: 600 10.5px/1.4 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.tt-controls select, .tt-controls input { font: 500 14px/1.3 var(--grotesk); color: var(--ink); background: var(--night-2); border: 1px solid var(--hairline-strong); border-radius: 3px; padding: 6px 9px; line-height: 1.45; height: auto; max-width: 72vw; }
.tt-controls input { width: 200px; }
.tt-goal-meter { font-size: var(--fs-300); color: var(--ink-dim); border-left: 2px solid var(--brass); padding: 4px 0 4px 12px; max-width: 80ch; }

.tt-tree-scroll { position: relative; overflow-x: auto; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 0 0 18px; -webkit-overflow-scrolling: touch;
  width: 100vw; margin-left: calc(50% - 50vw); padding-inline: max(16px, calc((100vw - 1200px) / 2 - 80px)); }
.tt-canvas { position: relative; width: max-content; min-width: 100%; }
.tt-tree { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 214px; gap: 52px; padding: 0 28px 0 4px; width: max-content; z-index: 1; }
.tt-wires { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; z-index: 0; overflow: visible; }
.tt-col { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.tt-col-empty { opacity: .45; }
.tt-col-head { position: sticky; top: 0; font: 600 12px/1.3 var(--grotesk); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-top: 2px solid var(--brass-line); padding: 6px 0 8px; margin: 0; background: var(--night-1); z-index: 2; }
.tt-col-head span { font: 500 20px/1 "Dregg Hand", var(--grotesk); color: var(--brass); margin-right: 8px; }
.tt-group { font: 600 10px/1.4 var(--grotesk); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-bright); margin: 8px 0 -4px; }

.tt-node { position: relative; display: flex; flex-direction: column; gap: 5px; text-align: left; font: inherit; color: var(--ink); background: var(--night-2); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-left: 3px solid var(--c); border-radius: 2px 6px 6px 2px; padding: 9px 11px; cursor: pointer; transition: opacity .15s, box-shadow .15s, border-color .15s; }
.tt-node:hover { box-shadow: 0 0 0 1px var(--c); }
.tt-node:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.tt-node.tt-l-domain { background: color-mix(in srgb, var(--c) 10%, var(--night-2)); }
.tt-node.tt-l-domain .tt-node-title { font: 400 18px/1.15 var(--display); }
.tt-node.tt-l-feature { padding: 6px 10px; }
.tt-node.tt-l-feature .tt-node-title { font-size: 13.5px; }
.tt-node.tt-s-not-yet-discovered { border-style: dashed; border-left-style: dashed; background: transparent; }
.tt-node.tt-s-not-yet-discovered .tt-node-title { color: var(--ink-dim); }
.tt-node.tt-s-abandoned { opacity: .62; }
.tt-node.tt-s-abandoned .tt-node-title { text-decoration: line-through; text-decoration-color: var(--c); }
.tt-node-title { font: 500 15px/1.25 var(--serif); }
.tt-node-meta { display: flex; align-items: center; gap: 6px; font: 600 10px/1.4 var(--grotesk); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.tt-node-deps { font: 500 10.5px/1.3 var(--grotesk); letter-spacing: .04em; color: var(--ink-faint); }

.tt-dim-rest .tt-node:not(.tt-onpath):not(.tt-match):not(.tt-sel) { border-color: var(--hairline); }
.tt-dim-rest .tt-node:not(.tt-onpath):not(.tt-match):not(.tt-sel) > * { opacity: .3; }
.tt-dim-wires .tt-w:not(.tt-w-path):not(.tt-w-hot) { opacity: .12; }
.tt-node.tt-onpath { box-shadow: 0 0 0 2px var(--brass-bright), 0 0 18px var(--brass-faint); }
.tt-node.tt-match { box-shadow: 0 0 0 2px var(--violet-bright); }
.tt-node.tt-sel { box-shadow: 0 0 0 2px var(--ink); }
.tt-node.tt-nb { box-shadow: 0 0 0 1px var(--ink-dim); }

.tt-w { fill: none; stroke: var(--ink-faint); stroke-width: 1.15; opacity: .45; }
.tt-w-enables { stroke-dasharray: 5 4; }
.tt-w-supersedes { stroke: var(--lilac); stroke-dasharray: 2 3; }
.tt-w-ported { stroke: var(--brass); stroke-dasharray: 7 4; }
.tt-w-path { stroke: var(--brass-bright); stroke-width: 2.6 !important; opacity: .95; }
.tt-w-hot { stroke: var(--ink); opacity: .9; }
.tt-wires marker path { fill: var(--ink-faint); }
.tt-narrow-note { display: none; }

/* ── LEVEL III: detail drawer ─────────────────────────────────────── */
.tt-detail { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); overflow-y: auto; background: var(--night-2); border-left: 1px solid var(--brass-line); box-shadow: -24px 0 60px rgba(0, 0, 0, .35); padding: 26px 26px 40px; }
.tt-detail:focus { outline: none; }
.tt-detail h2 { font-size: var(--fs-700); margin: 6px 0 10px; }
.tt-detail h3 { font: 600 11px/1.5 var(--grotesk); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-bright); margin: 22px 0 8px; }
.tt-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; font-size: 24px; line-height: 1; background: none; border: 1px solid var(--hairline-strong); border-radius: 50%; color: var(--ink); cursor: pointer; }
.tt-crumbs { font: 500 11px/1.5 var(--grotesk); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding-right: 44px; margin: 0; }
.tt-crumbs button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; color: var(--brass-bright); cursor: pointer; }
.tt-d-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font: 500 11px/1.5 var(--grotesk); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.tt-priv { color: var(--sand); border: 1px solid var(--sand); padding: 1px 6px; border-radius: 2px; }
.tt-d-desc { font-size: var(--fs-450); line-height: 1.5; }
.tt-d-goals { font-size: var(--fs-300); color: var(--ink-dim); border-left: 2px solid var(--brass); padding-left: 10px; }
.tt-elist, .tt-evlist, .tt-prov { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.tt-elist li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tt-ek { font: 600 9.5px/1.4 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); min-width: 74px; }
.tt-inf { font: 500 10px var(--grotesk); color: var(--sand); letter-spacing: .08em; text-transform: uppercase; }
.tt-evlist li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 2px 6px; font-size: 13px; }
.tt-evlist a, .tt-evlist code { font: 12.5px/1.4 var(--mono); overflow-wrap: anywhere; }
.tt-ev-note { grid-column: 2; color: var(--ink-dim); font-size: 12.5px; }
.tt-prov li { font-size: 14px; line-height: 1.45; color: var(--ink-dim); border-left: 1px solid var(--hairline-strong); padding-left: 10px; }
.tt-prov time, .tt-dates time { display: block; font: 500 10.5px/1.5 var(--mono); color: var(--ink-faint); }
.tt-dates time { display: inline; }
.tt-dates { font-size: 13px; color: var(--ink-dim); }
.tt-inf-note { margin-top: 20px; font-size: 12.5px; color: var(--sand); }

/* list + method */
.tt-list { margin-top: 46px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.tt-list summary { cursor: pointer; font: 600 12px/1.5 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-bright); }
.tt-list h3 { font-size: var(--fs-600); margin: 28px 0 4px; }
.tt-list h4 { font: 600 11px/1.5 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 0 4px; }
.tt-list ul { padding-left: 18px; font-size: var(--fs-300); }
.tt-li-status { font: 600 9.5px var(--grotesk); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.tt-method { margin-top: 40px; max-width: 72ch; font-size: var(--fs-300); color: var(--ink-dim); border-top: 1px solid var(--hairline); padding-top: 18px; }

/* ── narrow screens: stack the era map and the tree ───────────────── */
@media (max-width: 860px) {
  .tt-em-head { display: none; }
  .tt-em-row { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 10px; }
  .tt-em-proj { grid-column: 1 / -1; }
  .tt-em-empty { display: none; }
  .tt-em-cell button::before { content: attr(data-era-title); font: 600 10px/1.3 var(--grotesk); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-bright); }
  .tt-relations { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tt-tree-scroll { overflow: visible; border: 0; width: auto; margin-left: 0; padding-inline: 0; }
  .tt-canvas { width: auto; }
  .tt-tree { display: flex; flex-direction: column; width: auto; gap: 18px; padding: 0; }
  .tt-col-empty { display: none; }
  .tt-wires { display: none; }
  .tt-narrow-note { display: block; }
  .tt-controls label { flex: 1 1 140px; }
  .tt-controls select, .tt-controls input { width: 100%; max-width: none; }
  .tt-levels { width: 100%; }
  .tt-levels button { flex: 1; padding: 10px 8px; }
  .tt-detail { top: auto; left: 0; width: 100vw; max-height: 78vh; border-left: 0; border-top: 1px solid var(--brass-line); border-radius: 12px 12px 0 0; padding: 22px 16px 34px; box-shadow: 0 -24px 60px rgba(0, 0, 0, .35); }
  .tt-goals { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-color-scheme: light) {
  .tt-detail { box-shadow: -18px 0 50px rgba(56, 48, 38, .16); }
  .tt-node { background: #f8f5ec; }
  .tt-node.tt-s-not-yet-discovered { background: transparent; }
  .tt-em-proj button, .tt-em-cell button, .tt-goal { background: rgba(250, 247, 240, .7); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-node { transition: none; }
}