/* TrenchFu design system: components. Rules marked (apex) are copied from apex-v4-proto/index.html; the .dp page frame is the door layout built from them.
   Requires tokens.css. Fonts: Big Shoulders Display 700-900 and IBM Plex Mono 400-600 (the door template carries the Google Fonts link). */

/* ---------- header + ticker (apex) ---------- */
main.dp{position:relative;z-index:1;overflow-x:clip;padding-top:var(--stk)}
.stk{position:fixed;top:0;left:0;right:0;z-index:30}
header.top{height:var(--hh);display:flex;align-items:center;gap:18px;padding:0 28px;border-bottom:1px solid var(--hair);background:rgba(5,6,10,.9);backdrop-filter:blur(6px)}
.mark{font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.mark span{color:var(--copper)}
header.top .where{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top .where b{color:var(--door,var(--live));font-weight:500}
header.top nav{margin-left:auto;display:flex;gap:6px}
header.top nav a{font-size:12px;padding:4px 9px;border:1px solid var(--hair);border-radius:2px;text-decoration:none;color:var(--dim)}
header.top nav a:hover{color:var(--ink);border-color:var(--hair2)}
header.top nav a.go{color:var(--void);background:var(--copper);border-color:var(--copper);font-weight:600}
header.top nav a.go:hover{background:#f3bd97;color:var(--void)}
.strip{overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hair);background:rgba(7,9,14,.92);backdrop-filter:blur(6px)}
.strip::-webkit-scrollbar{display:none}
.strip .tk{display:flex;width:max-content;min-width:100%;height:34px}
.ti{display:flex;align-items:center;gap:8px;padding:0 20px;border-right:1px solid var(--hair);font-size:12px;white-space:nowrap}
.ti .k{font-style:normal;color:var(--dim);font-size:12px}
.ti .v{font-weight:600;color:var(--c,var(--ink))}
@media (max-width:1100px){header.top{padding:0 14px;gap:10px}header.top .where{display:none}header.top nav a:nth-child(n+2){display:none}}

/* ---------- section frame (door pages): the stratum rules of the apex without the rail ---------- */
.sec{--tone:var(--door,var(--copper));position:relative;padding:72px var(--gutter) 72px;border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,color-mix(in oklab,var(--tone) 8%,transparent),color-mix(in oklab,var(--tone) 3%,transparent))}
.sec>.wrap{position:relative;max-width:var(--wrap);margin:0 auto}
.sec h2{font-family:var(--disp);font-weight:800;font-size:var(--fs-h2);line-height:.9;text-transform:uppercase;letter-spacing:.005em;color:var(--ink);max-width:16em}
.sec h2 em{font-style:normal;color:var(--tone);text-shadow:0 0 28px color-mix(in oklab,var(--tone) 50%,transparent)}
.layer-id{position:relative;display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.layer-id .depth{font-size:12px;color:var(--tone)}
.layer-id .when{font-size:12px;color:var(--dim)}
.truth{position:relative;margin:18px 0 28px;max-width:62ch;color:var(--dim);font-size:13px}
.truth b{color:var(--ink);font-weight:500}
.dp p a,.dp .kv a,.dp .truth a{color:var(--door,var(--live));text-underline-offset:3px}
.dp code{font-family:var(--mono);color:var(--ink);background:rgba(200,220,240,.07);padding:0 .3em;overflow-wrap:anywhere}
.dp pre{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-md);padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink);max-width:100%;margin-bottom:12px}
.dp .truth+.truth,.dp p.truth{margin-top:0}
.grid{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.9fr);gap:28px;align-items:start}
.grid.one{grid-template-columns:minmax(0,1fr)}
.grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid>*{min-width:0}
@media (max-width:1100px){.grid,.grid.two{grid-template-columns:minmax(0,1fr)}.sec{padding:56px var(--gutter-sm) 56px}}

/* ---------- panel, provenance line, quote, exit (apex) ---------- */
.panel{background:linear-gradient(180deg,rgba(12,16,24,.92),rgba(9,12,18,.92));border:1px solid var(--hair);border-radius:3px;position:relative;margin-bottom:14px}
.panel>.ph{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--hair);font-size:12px;color:var(--dim);flex-wrap:wrap}
.panel>.ph .lit{width:6px;height:6px;border-radius:50%;background:var(--tone);box-shadow:0 0 8px var(--tone);flex:none}
.panel>.ph .src{margin-left:auto;color:var(--faint);font-size:12px}
.panel .pb{padding:14px 14px 16px;overflow-x:auto}
.quote{border-left:2px solid var(--tone);padding:4px 0 4px 14px;margin-bottom:18px}
.quote p{font-size:15px;line-height:1.5;color:var(--ink)}
.quote .who{margin-top:6px;font-size:12px;color:var(--dim)}
.quote .who b{color:var(--tone);font-weight:500}
.prov{color:var(--faint)!important;font-size:12px!important}
.exit{display:inline-flex;align-items:center;gap:8px;margin:6px 6px 0 0;padding:7px 11px;border:1px solid color-mix(in oklab,var(--door) 55%,transparent);color:var(--door);
  font-size:12px;text-decoration:none;border-radius:2px;background:color-mix(in oklab,var(--door) 7%,transparent)}
.exit:hover{background:color-mix(in oklab,var(--door) 16%,transparent)}
.exit .st{color:var(--dim);font-size:12px}

/* ---------- kpi grid (apex) + key/value rows + chips ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin-bottom:14px}
.kpis>div{background:var(--panel);padding:12px 14px}
.kpis .v{font-size:21px;font-weight:600;color:var(--ink)}
.kpis .v.t{color:var(--tone)}
.kpis .l{font-size:12px;color:var(--dim);margin-top:2px}
.kv{border-top:1px solid var(--hair)}
.kv .row{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:4px 16px;padding:7px 8px;border-bottom:1px solid var(--hair);font-size:12px}
.kv .k{color:var(--dim)}
.kv .v{overflow-wrap:anywhere}
.kv .v small{display:block;color:var(--faint);font-size:12px}
@media (max-width:560px){.kv .row{grid-template-columns:minmax(0,1fr)}}
.chip{display:inline-block;padding:1px 6px;font-size:12px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.chip.dash{border-style:dashed}
.ok{color:var(--settled)} .no{color:var(--miss)} .seal{color:var(--sealed)} .lv{color:var(--live)} .pr{color:var(--proposed)} .lt{color:var(--later)} .cu{color:var(--copper)} .dr{color:var(--door)}
.sub{font-size:12px;color:var(--dim);margin:12px 0 5px}
.faint{color:var(--faint)}

/* ---------- door card (apex .door) ---------- */
.doors{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(190px,auto);gap:14px;margin-top:30px}
@media (max-width:1100px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.doors{grid-template-columns:minmax(0,1fr)}}
.door-card{--door:var(--later);position:relative;display:block;padding:18px;border:1px solid color-mix(in oklab,var(--door) 40%,transparent);border-radius:3px;text-decoration:none;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in oklab,var(--door) 14%,transparent),transparent 60%),var(--panel);min-height:190px;transition:transform .25s,border-color .25s}
.door-card:hover,.door-card:focus-visible{transform:translateY(-3px);border-color:var(--door)}
.door-card .n{font-family:var(--disp);font-weight:800;font-size:clamp(34px,3.6vw,52px);text-transform:uppercase;color:var(--door);line-height:.95}
.door-card .w{margin-top:10px;color:var(--ink);font-size:13px;max-width:30ch}
.door-card .s{position:absolute;left:18px;bottom:14px;font-size:12px;color:var(--dim)}
.door-card .s b{color:var(--door);font-weight:500}

/* ---------- hero + buttons (apex .hero/.btn, door-sized: one line, one diagram slot) ---------- */
.d-hero{position:relative;padding:56px var(--gutter) 56px;border-bottom:1px solid var(--hair);overflow:hidden;
  background:radial-gradient(70% 80% at 85% 20%,color-mix(in oklab,var(--door,var(--copper)) 11%,transparent),transparent 70%),radial-gradient(60% 70% at 0% 100%,color-mix(in oklab,var(--live) 6%,transparent),transparent 70%)}
.d-hero>.wrap{position:relative;max-width:var(--wrap);margin:0 auto}
.d-hero h1{font-family:var(--disp);font-weight:900;font-size:var(--fs-h1);line-height:.84;text-transform:uppercase;letter-spacing:-.012em;color:var(--door,var(--ink));text-shadow:0 0 38px color-mix(in oklab,var(--door,var(--copper)) 45%,transparent);max-width:7.2em}
.d-hero .sub-line{margin:24px 0 0;max-width:56ch;font-size:15px;line-height:1.6;color:#aebacb}
.d-hero .sub-line.two{margin-top:10px;font-size:13px;color:var(--dim)}
.d-hero .slot{margin-top:32px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--hair2);border-radius:2px;color:var(--ink);transition:box-shadow .3s,border-color .3s,background .3s,color .3s}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--door,var(--copper));border-color:var(--door,var(--copper));color:var(--void)}
@media (max-width:1100px){.d-hero{padding:40px 28px}.d-hero h1{font-size:clamp(46px,10.5vw,104px);max-width:none}}
@media (max-width:700px){.d-hero{padding:28px 16px 32px}.d-hero h1{font-size:clamp(40px,12.6vw,64px)}.d-hero .sub-line{margin:14px 0 0;font-size:13px;line-height:1.5}.d-hero .slot{margin-top:20px}.actions{margin-top:14px;gap:8px}.btn{flex:1 1 140px;justify-content:center;padding:11px 12px}}

/* ---------- roots list (apex .roots-list) ---------- */
.roots-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.roots-list li{position:relative;padding:14px 14px 40px;border:1px solid var(--hair);border-top:2px solid var(--faint);border-radius:3px;min-height:150px}
.roots-list li.live{border-top:4px solid var(--door,var(--copper));border-color:color-mix(in oklab,var(--door,var(--copper)) 45%,transparent)}
.roots-list .n{font-family:var(--disp);font-weight:800;font-size:24px;line-height:1;text-transform:uppercase;color:var(--ink)}
.roots-list li.live .n{color:var(--door,var(--copper))}
.roots-list .w{margin-top:8px;font-size:12px;color:var(--ink)}
.roots-list .s{position:absolute;left:14px;bottom:12px;font-size:12px;color:var(--dim)}
.roots-list li.live .s{color:var(--door,var(--copper))}
.roots-list a{text-decoration:none}
.roots-list a:hover .n{text-decoration:underline;text-underline-offset:4px}
@media (max-width:560px){.roots-list{grid-template-columns:minmax(0,1fr);gap:0;border-left:2px solid var(--door,var(--copper));margin-left:6px}.roots-list li{border:0;border-bottom:1px solid var(--hair);border-radius:0;min-height:0;padding:14px 0 36px 18px}.roots-list li.live{border:0;border-bottom:1px solid var(--hair)}}

/* ---------- hover card + tether (apex #tcard/#tether) ---------- */
#tcard{position:fixed;z-index:60;width:292px;pointer-events:none;opacity:0;transition:opacity .15s;padding:10px 12px;font-size:12px;line-height:1.45;background:rgba(8,11,17,.97);border:1px solid var(--cc,var(--live));border-radius:3px;box-shadow:0 0 24px color-mix(in oklab,var(--cc,var(--live)) 30%,transparent)}
#tcard.on{opacity:1}
#tcard .h{font-size:12px;letter-spacing:.07em;color:var(--cc,var(--live));margin-bottom:3px}
#tcard .b{color:var(--ink)}
#tcard .c{margin-top:5px;color:var(--dim);font-size:12px}
#tcard .c b{color:var(--faint);font-weight:500}
#tether{position:fixed;inset:0;width:100%;height:100%;z-index:59;pointer-events:none}
@media (max-width:700px){#tcard{left:8px!important;right:8px;width:auto;top:auto!important;bottom:8px}#tether{display:none}}

/* ---------- instrument primitives (apex): marks, core, roots, seeds ---------- */
.mk{--mc:var(--ink);position:absolute;width:28px;height:44px;padding:0;border:0;background:none;color:var(--mc);cursor:help;transition:opacity .6s calc(var(--n)*14ms),transform .6s calc(var(--n)*14ms)}
.mk svg{display:block;width:100%;height:100%;overflow:visible;transition:filter .2s,transform .2s}
.mk:hover svg,.mk:focus-visible svg,.mk.on svg{filter:drop-shadow(0 0 5px currentColor);transform:scale(1.2)}
.keyrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px;margin-top:6px}
.keyrow div{display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:center;font-size:12px;color:var(--dim)}
.keyrow svg{width:22px;height:34px;overflow:visible;color:var(--mc)}
svg text{font-family:var(--mono)}
.core{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.core svg{display:block;width:100%;height:auto}
.core figcaption{margin-top:8px;text-align:center;font-size:12px;color:var(--dim);min-height:1.6em}
.core figcaption b{color:var(--ink);font-weight:500}
.core .scan{animation:scan var(--dur,2.5s) linear both}
@keyframes scan{from{transform:translate(0,0);opacity:1}92%{opacity:1}to{transform:var(--to);opacity:0}}
.core .hm{transform-box:fill-box;animation:markin .45s ease-out var(--dl) backwards}
.core .hm.h{transform-origin:left center}.core .hm.v{transform-origin:center top}
@keyframes markin{from{opacity:0;transform:scale(.05,1)}35%{opacity:1;filter:brightness(2.4)}}
.core .hm.v{animation-name:markinv}
@keyframes markinv{from{opacity:0;transform:scale(1,.05)}35%{opacity:1;filter:brightness(2.4)}}
.core.still *{animation:none!important}.core.still .scan{display:none}
.rt-svg{display:block;width:100%;min-width:600px;height:auto;overflow:visible}
.rt-svg text{font-family:var(--mono);fill:var(--dim);font-size:12px}
.rt-svg .root{fill:none;stroke-width:1;opacity:.6;stroke-dasharray:var(--l) var(--l);stroke-dashoffset:0;transition:opacity .2s}
.reveal.in .rt-svg .root{animation:rootgrow 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rootgrow{from{stroke-dashoffset:var(--l)}to{stroke-dashoffset:0}}
.rt-svg .axl,.rt-svg .stem{stroke:var(--hair2);stroke-width:1}
.rt-svg .seed{cursor:pointer;outline:none}
.rt-svg .seed .h{fill:transparent}
.rt-svg .seed .s{stroke-width:1.2;transition:r .15s}
.rt-svg .seed:hover .s,.rt-svg .seed:focus-visible .s,.rt-svg .seed.on .s{stroke:#fff;stroke-width:1.8}
@media (prefers-reduced-motion:reduce){.reveal.in .rt-svg .root{animation:none!important}.rt-svg .root,.rt-svg .seed .s{transition:none}}
.diagram{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-md);padding:18px 16px;overflow-x:auto}
.diagram svg{display:block;width:100%;min-width:600px;height:auto}
@media (max-width:560px){.diagram{padding:12px 8px}}

/* ---------- footer ---------- */
.dp footer{padding:28px var(--gutter);display:flex;gap:10px 28px;flex-wrap:wrap;color:var(--dim);font-size:12px}
.dp footer a{color:var(--door,var(--live))}
@media (max-width:1100px){.dp footer{padding:24px var(--gutter-sm)}}

/* ---------- door body text ---------- */
.dp p{max-width:62ch;margin-bottom:12px;font-size:13px}
.dp p.d{color:var(--dim)}
.dp .prov{margin-top:14px}
.dp .hide{display:none}
.sec .layer-id{margin-bottom:12px}
.sec h2{margin-bottom:22px;padding-top:2px}
.sec h2+.truth,.sec h2+p{margin-top:0}