/* explore.css — the system page. Loads AFTER app.css and reuses its tokens (coal/green/gold, mono/disp/sans).
   Identity: a dark operations floor (coal) that EVIDENCE arrives into as paper. Structure is carried by rules,
   numerals and type — not by glow. Everything here reads correctly with animation switched off. */

.page-explore{background:var(--coal);color:var(--coal-ink);min-height:100vh;
  /* the only ambient texture: a faint ruled grid, like a planning sheet. one layer, no animation. */
  background-image:linear-gradient(var(--coal-2) 1px,transparent 1px),linear-gradient(90deg,var(--coal-2) 1px,transparent 1px);
  background-size:100% 96px,96px 100%;background-position:0 -1px}
.page-explore ::selection{background:var(--acc-bright);color:#07100C}
/* app.css focuses with --acc (tuned for the light desk); on coal it reads as a dark smudge */
.page-explore :focus-visible{outline:2px solid var(--acc-bright);outline-offset:2px}

/* ---------- top bar ---------- */
.x-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:11px clamp(16px,3vw,34px);
  background:rgba(14,16,19,.94);border-bottom:1px solid var(--coal-line)}
@supports (backdrop-filter:blur(6px)){.x-top{backdrop-filter:blur(6px)}}
.x-top .brand{color:#fff}
.x-nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.x-nav a{font:700 11px/1 var(--mono);letter-spacing:.16em;color:var(--coal-mute);text-decoration:none;padding:12px 11px;border-radius:var(--r-s);display:inline-flex;align-items:center;gap:7px;min-height:44px}
.x-nav a:hover{color:#fff;background:var(--coal-3)}
.x-nav a[aria-current=page]{color:var(--acc-bright);box-shadow:inset 0 -2px 0 var(--acc)}
.x-nav a.go{color:var(--coal);background:var(--acc);font-weight:800}
.x-nav a.go:hover{background:var(--acc-bright);color:#07100C}
.x-jobs{display:inline-flex;align-items:center;gap:8px;font:700 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--coal-mute);border:1px solid var(--coal-line);border-radius:var(--r-s);padding:8px 10px}
.x-jobs b{color:var(--gold);font-size:13px}
@media (max-width:860px){.x-nav a[href="#record"]{display:none}}
@media (max-width:620px){
  .x-jobs{display:none}
  .x-nav{flex-wrap:nowrap}
  .x-nav a{padding:12px 9px;letter-spacing:.08em;font-size:10px}
  .x-nav a[aria-current=page]{display:none} /* you are already on it — the label costs a row */
  .x-nav a.go{padding:12px 11px}
  .x-top .brand .wm{font-size:17px}
}

/* ---------- shared section furniture ---------- */
/* the top bar is sticky: anchored jumps must clear it instead of hiding under it */
.x-sec,.x-hero{scroll-margin-top:84px}
.x-sec{max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,76px) clamp(16px,4vw,40px) 0}
.x-sec-head{max-width:70ch;margin-bottom:clamp(20px,3vw,32px)}
.x-h2{font:700 clamp(26px,4vw,42px)/1.08 var(--disp);letter-spacing:-.015em;margin:0 0 10px;color:#fff}
.x-h2::before{content:"";display:block;width:34px;height:3px;background:var(--gold);margin-bottom:16px}
.x-sub{color:var(--coal-mute);font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.62;margin:0}
.x-sub b{color:var(--coal-ink)}
.x-note{color:var(--mute-2);font-size:13.5px}
.lg-proven{color:var(--acc-bright)}.lg-unproven{color:var(--gold)}.lg-limited{color:var(--coal-mute)}

/* ---------- 1. hero ---------- */
.x-hero{max-width:1180px;margin:0 auto;padding:clamp(34px,6vw,70px) clamp(16px,4vw,40px) 0;display:grid;gap:clamp(24px,4vw,46px);align-items:end}
@media (min-width:1040px){.x-hero{grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr)}}
.x-kicker{display:flex;align-items:center;gap:10px;font:700 11px/1 var(--mono);letter-spacing:.22em;color:var(--coal-mute);margin:0 0 20px}
.x-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--acc-bright)}
.x-h1{font:700 clamp(34px,4.6vw,60px)/1.04 var(--disp);letter-spacing:-.022em;margin:0 0 18px;color:#fff;max-width:19ch;text-wrap:balance}
.x-h1 em{font-style:normal;color:var(--acc-bright)}
.x-lede{color:var(--coal-mute);font-size:clamp(15.5px,1.75vw,19px);line-height:1.62;max-width:58ch;margin:0 0 30px}
.x-facts{display:flex;flex-wrap:nowrap;gap:0;border-top:1px solid var(--coal-line);border-bottom:1px solid var(--coal-line)}
.x-fact{display:flex;flex-direction:column;gap:5px;padding:15px clamp(12px,2vw,24px) 15px 0;margin-right:clamp(12px,2vw,24px);border-right:1px solid var(--coal-line);min-width:0}
.x-fact:last-child{border-right:0;margin-right:0;padding-right:0}
@media (max-width:520px){.x-facts{flex-wrap:wrap}.x-fact{border-right:0;padding-right:0;margin-right:22px}}
.x-fact b{font:700 clamp(24px,3vw,34px)/1 var(--disp);color:var(--gold);font-variant-numeric:tabular-nums}
.x-fact small{font:700 10px/1.4 var(--mono);letter-spacing:.16em;color:var(--coal-mute)}
/* live panel — real state only: slots in use now + the newest verified delivery. never invented. */
.x-hero-live{border:1px solid var(--coal-line);border-top:3px solid var(--acc);border-radius:0 0 var(--r-m) var(--r-m);background:var(--coal-2);display:flex;flex-direction:column;min-height:260px}
.hl-head{padding:13px 16px;border-bottom:1px solid var(--coal-line)}
.hl-live{display:inline-flex;align-items:center;gap:9px;font:700 10px/1 var(--mono);letter-spacing:.15em;color:var(--coal-mute)}
.hl-live i{width:7px;height:7px;border-radius:50%;background:var(--coal-mute);flex:0 0 auto}
.hl-live.on i{background:var(--acc-bright);animation:beat 1.6s ease-in-out infinite}
.hl-live.on{color:var(--acc-bright)}
.hl-body{padding:16px;display:flex;flex-direction:column;gap:11px;flex:1}
.hl-k{font:700 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--gold)}
.hl-amb{font:500 15.5px/1.45 var(--disp);font-style:italic;color:#fff;margin:0}
.hl-head-line{font-size:13.5px;line-height:1.55;color:var(--coal-mute);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hl-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.hl-open{display:inline-flex;align-items:center;gap:8px;font:700 10px/1 var(--mono);letter-spacing:.13em;color:var(--coal);background:var(--acc);border:0;border-radius:var(--r-s);padding:11px 13px;cursor:pointer;min-height:44px}
.hl-open:hover{background:var(--acc-bright)}
.hl-skel{height:11px;border-radius:3px;background:var(--coal-3);margin:0}
.hl-skel.s2{width:78%}.hl-skel.s3{width:54%}

/* ---------- 2. system spine ---------- */
.spine{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:22px}
.spine-line{position:absolute;left:5%;right:5%;top:13px;height:2px;background:var(--coal-line)}
.spine-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--gold));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.stn{position:relative;background:none;border:0;padding:0 4px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;color:var(--coal-mute);font-family:var(--mono);min-height:44px}
.stn-dot{width:13px;height:13px;border-radius:50%;background:var(--coal);border:2px solid var(--coal-line);margin-left:6px;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.stn-dot.gold{border-style:dashed}
.stn-n{font:700 10px/1 var(--mono);letter-spacing:.1em;color:var(--mute-2)}
.stn-t{font:700 11.5px/1.2 var(--mono);letter-spacing:.12em}
.stn:hover .stn-dot{border-color:var(--acc)}
.stn:hover .stn-t{color:var(--coal-ink)}
.stn[aria-selected=true]{color:#fff}
.stn[aria-selected=true] .stn-dot{background:var(--acc-bright);border-color:var(--acc-bright);transform:scale(1.18)}
.stn[aria-selected=true] .stn-n{color:var(--acc-bright)}
.stn[aria-selected=true] .stn-t{color:#fff}
.stn-panel{border:1px solid var(--coal-line);border-top:3px solid var(--acc);background:var(--coal-2);border-radius:0 0 var(--r-m) var(--r-m);padding:clamp(18px,3vw,30px);min-height:208px}
.stn-panel:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sp-grid{display:grid;gap:clamp(16px,3vw,34px)}
@media (min-width:860px){.sp-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.sp-h{font:700 clamp(19px,2.3vw,25px)/1.2 var(--disp);color:#fff;margin:0 0 10px}
.sp-b{color:var(--coal-mute);font-size:15px;line-height:1.62;margin:0 0 14px}
.sp-b b{color:var(--coal-ink);font-weight:600}
.sp-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sp-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--coal-mute);line-height:1.5}
.sp-list li::before{content:"◈";color:var(--gold);font-size:9px;line-height:1.7;flex:0 0 auto}
.sp-fact{border:1px solid var(--coal-line);border-left:3px solid var(--gold);background:var(--coal-3);border-radius:0 var(--r-s) var(--r-s) 0;padding:14px 16px}
.sp-fact p{margin:0 0 6px;font:700 10px/1 var(--mono);letter-spacing:.16em;color:var(--gold)}
.sp-fact div{font-size:13.5px;color:var(--coal-ink);line-height:1.55}
.sp-fact a{color:var(--acc-bright)}
.sp-live{display:inline-flex;align-items:center;gap:8px;font:700 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--coal-mute);margin-top:12px}
.sp-live i{width:7px;height:7px;border-radius:50%;background:var(--coal-mute)}
.sp-live.on i{background:var(--acc-bright);animation:beat 1.6s ease-in-out infinite}
@media (max-width:760px){
  .spine{grid-template-columns:1fr;gap:0}
  .spine-line{left:12px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .spine-line i{width:100%!important;height:0;transition:height .45s ease}
  .stn{flex-direction:row;align-items:center;gap:12px;padding:11px 0}
  .stn-dot{margin-left:6px}
}

/* ---------- 3. capabilities ---------- */
.cap-wrap{display:grid;gap:0;border:1px solid var(--coal-line);border-radius:var(--r-m);overflow:hidden;background:var(--coal-2)}
@media (min-width:900px){.cap-wrap{grid-template-columns:minmax(260px,.9fr) minmax(0,2fr)}}
.cap-index{display:flex;flex-direction:column;background:var(--coal-3);border-right:1px solid var(--coal-line)}
.cap-row{display:flex;align-items:center;gap:12px;padding:15px 16px;background:none;border:0;border-bottom:1px solid var(--coal-line);color:var(--coal-mute);cursor:pointer;text-align:left;min-height:56px;transition:background .16s ease,color .16s ease}
.cap-row:hover{background:var(--coal-2);color:var(--coal-ink)}
.cap-row[aria-selected=true]{background:var(--coal-2);color:#fff;box-shadow:inset 3px 0 0 var(--acc)}
.cap-row .t{font:600 14.5px/1.3 var(--sans);flex:1}
.cap-row .st{font:700 9px/1 var(--mono);letter-spacing:.12em;padding:5px 7px;border-radius:2px;border:1px solid currentColor;flex:0 0 auto}
.st.proven{color:var(--acc-bright)}.st.unproven{color:var(--gold)}.st.limited{color:var(--mute-2)}
.cap-detail{padding:clamp(18px,3vw,32px);min-height:330px}
.cap-detail:focus-visible{outline:2px solid var(--acc);outline-offset:-4px}
.cap-amb{font:500 clamp(18px,2.4vw,24px)/1.4 var(--disp);font-style:italic;color:#fff;margin:0 0 6px}
.cap-h{font:700 11px/1 var(--mono);letter-spacing:.18em;color:var(--coal-mute);margin:22px 0 11px;display:flex;align-items:center;gap:10px}
.cap-h::after{content:"";flex:1;height:1px;background:var(--coal-line)}
.cap-deliver{color:var(--coal-ink);font-size:15px;line-height:1.6;margin:0}
.cap-order{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;counter-reset:w}
.cap-order li{counter-increment:w;display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--sans);color:var(--coal-ink);background:var(--coal-3);border:1px solid var(--coal-line);border-radius:999px;padding:9px 13px 9px 9px}
.cap-order li::before{content:counter(w,decimal-leading-zero);font:700 9.5px/1 var(--mono);color:var(--gold);background:var(--coal);border-radius:50%;width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cap-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cap-warn{margin-top:18px;border:1px dashed var(--coal-line);border-left:3px solid var(--gold);background:rgba(217,164,65,.06);padding:13px 15px;color:var(--coal-ink);font-size:13.5px;line-height:1.55;border-radius:0 var(--r-s) var(--r-s) 0}
.cap-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn.sm{font-size:13px;padding:11px 15px;min-height:44px}

/* ---------- 4. the record ---------- */
.rec-wrap{display:grid;gap:0;border:1px solid var(--coal-line);border-radius:var(--r-m);overflow:hidden;background:var(--coal-2)}
@media (min-width:980px){.rec-wrap{grid-template-columns:minmax(280px,.85fr) minmax(0,2.15fr)}}
.rec-index{display:flex;flex-direction:column;background:var(--coal-3);border-right:1px solid var(--coal-line);max-height:640px;overflow:auto}
.rec-card{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--coal-line);padding:15px 16px;cursor:pointer;color:var(--coal-mute);transition:background .16s ease}
.rec-card:hover{background:var(--coal-2)}
.rec-card[aria-selected=true]{background:var(--coal-2);box-shadow:inset 3px 0 0 var(--gold)}
.rec-card .rc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:700 9.5px/1 var(--mono);letter-spacing:.12em}
.rec-card .rc-cap{color:var(--acc-bright)}
.rec-card .rc-date{color:var(--mute-2);margin-left:auto}
.rec-card .rc-amb{font:500 14px/1.45 var(--sans);color:var(--coal-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec-card[aria-selected=true] .rc-amb{color:#fff}
.rec-card .rc-ev{margin-top:9px;font:700 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--gold)}
.rec-file{padding:clamp(18px,3vw,32px);min-width:0}
.rec-file:focus-visible{outline:2px solid var(--acc);outline-offset:-4px}
.rf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px}
.verified{display:inline-flex;align-items:center;gap:7px;font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--acc-bright);border:1px solid rgba(20,199,142,.45);border-radius:var(--r-s);padding:7px 10px}
.verified .tk{width:13px;height:13px;border-radius:50%;background:var(--acc-bright);color:#07100C;font-size:9px;display:inline-flex;align-items:center;justify-content:center}
.rf-quote{font:500 clamp(19px,2.7vw,27px)/1.38 var(--disp);font-style:italic;color:#fff;margin:0 0 12px;padding-left:18px;border-left:3px solid var(--gold)}
.rf-tasked{color:var(--coal-mute);font-size:14.5px;line-height:1.6;margin:0 0 22px}
.rf-tabs{display:flex;gap:2px;border-bottom:1px solid var(--coal-line);margin-bottom:20px;overflow-x:auto}
.rf-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--coal-mute);font:700 10.5px/1 var(--mono);letter-spacing:.14em;padding:13px 13px;cursor:pointer;white-space:nowrap;min-height:44px}
.rf-tab:hover{color:var(--coal-ink)}
.rf-tab[aria-selected=true]{color:var(--acc-bright);border-bottom-color:var(--acc)}
.rf-pane{min-height:220px}
/* work timeline — bar width is the real share of elapsed time */
.gantt{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gantt li{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) 62px;gap:12px;align-items:center;font-size:13.5px}
.gantt .gl{color:var(--coal-ink)}
.gantt .gb{height:9px;background:var(--coal-3);border-radius:2px;overflow:hidden}
.gantt .gb i{display:block;height:100%;background:linear-gradient(90deg,var(--acc-deep),var(--acc-bright));border-radius:2px;transform-origin:left;animation:gbar .5s cubic-bezier(.2,.8,.2,1) both}
.gantt .gt{font:600 11.5px/1 var(--mono);color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}
@keyframes gbar{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
@media (max-width:620px){.gantt li{grid-template-columns:1fr 54px;grid-template-areas:"l t" "b b"}.gantt .gl{grid-area:l}.gantt .gt{grid-area:t}.gantt .gb{grid-area:b}}
.rf-head{font:600 clamp(17px,2.2vw,22px)/1.45 var(--disp);color:#fff;margin:0 0 16px}
.rf-md{max-height:460px;overflow:auto;padding-right:8px;border-left:1px solid var(--coal-line);padding-left:18px}
.rf-md.md{font-size:14.5px}
.ev-rows{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--coal-line);border:1px solid var(--coal-line);border-radius:var(--r-s);overflow:hidden}
.ev-rows li{background:var(--coal-2);padding:12px 14px;display:grid;gap:6px}
.ev-rows .c{font-size:13.5px;color:var(--coal-ink);line-height:1.5}
.ev-rows .m{display:flex;gap:10px;align-items:center;font:600 11px/1 var(--mono);color:var(--mute-2)}
.ev-rows .m a{color:var(--acc-bright);text-decoration:none}
.ev-rows .m a:hover{text-decoration:underline}
.limits{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.limits li{display:flex;gap:11px;font-size:14px;line-height:1.55;color:var(--coal-ink);background:var(--coal-3);border-left:3px solid var(--bad);padding:12px 14px;border-radius:0 var(--r-s) var(--r-s) 0}
.limits li::before{content:"!";font:700 11px/1.3 var(--mono);color:var(--bad-bright);flex:0 0 auto}
.rf-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--coal-line)}
.rec-empty{border:1px dashed var(--coal-line);border-radius:var(--r-m);padding:clamp(22px,4vw,40px);color:var(--coal-mute);font-size:15px;line-height:1.6}
.rec-empty b{color:var(--coal-ink);display:block;margin-bottom:8px;font:700 13px/1 var(--mono);letter-spacing:.14em}

/* ---------- 5. demonstrations ---------- */
.demo-grid{display:grid;gap:14px}
@media (min-width:760px){.demo-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.demo{border:1px dashed var(--coal-line);border-radius:var(--r-m);padding:20px;background:repeating-linear-gradient(135deg,var(--coal-2),var(--coal-2) 9px,rgba(217,164,65,.035) 9px,rgba(217,164,65,.035) 18px)}
.demo .dm-tag{display:inline-flex;align-items:center;gap:7px;font:700 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--gold);border:1px solid rgba(217,164,65,.4);border-radius:2px;padding:5px 8px;margin-bottom:14px}
.demo h3{font:600 17px/1.35 var(--disp);color:#fff;margin:0 0 8px}
.demo .dm-amb{font-style:italic;color:var(--coal-mute);font-size:14px;line-height:1.5;margin:0 0 14px}
.demo .dm-note{margin-top:14px;font-size:13px;line-height:1.55;color:var(--gold)}

/* ---------- 6. commission ---------- */
.x-commission{padding-bottom:clamp(40px,6vw,76px)}
.flowstrip{list-style:none;display:grid;gap:1px;margin:0 0 24px;padding:0;background:var(--coal-line);border:1px solid var(--coal-line);border-radius:var(--r-m);overflow:hidden}
@media (min-width:860px){.flowstrip{grid-template-columns:repeat(5,1fr)}}
.flowstrip li{background:var(--coal-2);padding:16px 15px;display:grid;gap:7px}
.flowstrip b{font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--acc-bright)}
.flowstrip span{font-size:13px;line-height:1.5;color:var(--coal-mute)}
.com-card{border:1px solid var(--coal-line);border-top:3px solid var(--gold);border-radius:0 0 var(--r-m) var(--r-m);background:var(--coal-2);padding:clamp(16px,3vw,26px)}
.com-meta{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.com-meta label{font:700 10.5px/1 var(--mono);letter-spacing:.18em;color:var(--coal-mute)}
.com-ctx{font:700 10px/1 var(--mono);letter-spacing:.1em;color:var(--gold);border:1px solid rgba(217,164,65,.4);border-radius:2px;padding:5px 8px;margin-left:auto}
.page-explore .job{width:100%;box-sizing:border-box;background:var(--coal);border:1px solid var(--coal-line);border-radius:var(--r-s);color:var(--coal-ink);font:500 16px/1.55 var(--sans);padding:14px 15px;resize:vertical}
.page-explore .job:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.com-foot{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-top:14px}
.com-note{font:500 12.5px/1.5 var(--mono);color:var(--coal-mute);flex:1;min-width:210px}

/* ---------- motion discipline ---------- */
.reveal{animation:fadeup .42s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){
  .reveal,.gantt .gb i{animation:none!important}
  .spine-line i,.stn-dot{transition:none!important}
  .sp-live.on i{animation:none!important}
}