/* Homo Sapiens Under AI — the Observatory.
   One concept everywhere: a dark planetarium rail; instruments are smoked glass
   floating over the living scene. Fraunces speaks, Azeret Mono measures. */

:root{
  --base:#05070d; --surface:rgba(10,14,24,0.62); --surface-solid:#0c111d;
  --surface-alt:rgba(255,255,255,0.03);
  --hairline:rgba(255,255,255,0.08); --strong:rgba(255,255,255,0.16);
  --ink:#e6e8ee; --ink2:#b8bccb; --ink3:#7e8497; --ink4:#535869;
  --lapis:#6ea0ec; --lapis-deep:#8eb8f4; --lapis-soft:rgba(110,160,236,0.12); --lapis-glow:rgba(110,160,236,0.4);
  --gold:#d4b46a; --gold-soft:rgba(212,180,106,0.16);
  --serif:"Fraunces",Georgia,serif;
  --mono:"Azeret Mono",ui-monospace,monospace;
  --rail-w:304px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--base);color:var(--ink);font:13px/1.55 var(--mono);overflow:hidden}
#app{position:relative;width:100vw;height:100vh;overflow:hidden}

/* the scene is the room */
#scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

/* ---------- headline ---------- */
#banner{position:absolute;top:0;left:0;right:0;z-index:4;padding:22px 28px 46px;text-align:center;pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,7,13,0.85) 0%, rgba(5,7,13,0.45) 55%, transparent 100%)}
#brand{font:500 10px/1 var(--mono);letter-spacing:0.42em;color:var(--ink3);margin-bottom:12px}
#brand::before,#brand::after{content:"";display:inline-block;width:34px;height:1px;background:var(--hairline);vertical-align:middle;margin:0 14px}
#scenario-sentence{font:italic 300 clamp(17px,2.1vw,25px)/1.35 var(--serif);font-variation-settings:"opsz" 40;
  color:var(--ink);max-width:1080px;margin:0 auto;text-wrap:balance;
  text-shadow:0 2px 24px rgba(5,7,13,0.9)}

/* ---------- glass rails ---------- */
.rail{position:absolute;top:96px;bottom:118px;width:var(--rail-w);z-index:3;overflow-y:auto;overflow-x:hidden;
  background:var(--surface);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--hairline);border-radius:14px;padding:16px 14px;
  transition:transform .45s cubic-bezier(.22,.8,.24,1), opacity .45s;
  scrollbar-width:thin;scrollbar-color:var(--ink4) transparent}
#rail-left{left:18px}
#rail-left.closed{transform:translateX(calc(-100% - 26px));opacity:0;pointer-events:none}

/* central ribbon chart: every indicator as its own line over the scene */
#overlay-mount{position:absolute;left:calc(var(--rail-w) + 44px);right:26px;top:128px;bottom:150px;
  z-index:2;pointer-events:none}
#overlay-mount canvas{width:100%;height:100%;display:block}
#breach-box{position:absolute;top:222px;right:0;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#overlay-mount #reckoning{position:absolute;top:-14px;right:-8px;width:212px;height:228px;opacity:0.92;pointer-events:none}
#overlay-mount #ribbon-chart{pointer-events:auto;cursor:crosshair}
.rail::-webkit-scrollbar{width:4px}
.rail::-webkit-scrollbar-thumb{background:var(--ink4);border-radius:2px}

.rail-tab{position:absolute;top:50%;z-index:4;transform:translateY(-50%);
  writing-mode:vertical-rl;text-orientation:mixed;
  font:500 9px/1 var(--mono);letter-spacing:0.34em;color:var(--ink3);
  background:rgba(10,14,24,0.7);border:1px solid var(--hairline);border-radius:8px;
  padding:14px 5px;cursor:pointer;transition:color .2s,border-color .2s}
.rail-tab:hover{color:var(--lapis);border-color:var(--lapis)}
#toggle-left{left:0;border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}
#toggle-right{right:0;border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}

/* ---------- monumental year ---------- */
#year-big{position:absolute;left:50%;bottom:108px;transform:translateX(-50%);z-index:1;pointer-events:none;
  font:300 clamp(80px,11vw,150px)/0.85 var(--serif);font-variation-settings:"opsz" 144;
  color:transparent;-webkit-text-stroke:1px rgba(212,180,106,0.5);
  letter-spacing:0.04em;font-variant-numeric:tabular-nums;
  text-shadow:0 0 80px rgba(212,180,106,0.12)}

/* ---------- transport ---------- */
#timeline{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:16px;width:min(720px,72vw);
  background:var(--surface);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--hairline);border-radius:999px;padding:12px 22px}
#timeline button{font:500 10px/1 var(--mono);letter-spacing:0.28em;color:var(--ink);
  background:transparent;border:1px solid var(--strong);border-radius:999px;padding:9px 18px;cursor:pointer;
  transition:all .2s}
#run-btn{border-color:var(--gold);color:var(--gold)}
#run-btn:hover{background:var(--gold);color:#05070d;box-shadow:0 0 24px rgba(212,180,106,0.35)}
#pause-btn:hover{border-color:var(--lapis);color:var(--lapis)}
#scrub-wrap{flex:1 1 auto;position:relative;padding-top:2px}
#scrubber{width:100%;appearance:none;-webkit-appearance:none;height:2px;border-radius:1px;
  background:linear-gradient(to right,var(--lapis) 0%,var(--lapis) var(--prog,0%),var(--strong) var(--prog,0%));outline:none}
#scrubber::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:2px solid #05070d;box-shadow:0 0 14px rgba(212,180,106,0.6);cursor:grab}
#scrubber::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #05070d;cursor:grab}
#ticks{display:flex;justify-content:space-between;font:300 8px/1 var(--mono);letter-spacing:0.12em;color:var(--ink4);margin-top:6px}
#year-label{font:500 13px/1 var(--mono);color:var(--gold);font-variant-numeric:tabular-nums;min-width:42px;text-align:right}

/* ---------- result: the intertitle ---------- */
#result-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:min(620px,86vw);background:rgba(7,10,18,0.88);backdrop-filter:blur(26px);
  border:1px solid var(--strong);border-radius:18px;padding:38px 42px;
  box-shadow:0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,180,106,0.08) inset;
  font-family:var(--serif)}
#result-card h2{font:600 30px/1.1 var(--serif);font-variation-settings:"opsz" 90;letter-spacing:0.06em;margin-bottom:8px}
#result-card p{font:300 15.5px/1.65 var(--serif);color:var(--ink2)}

/* ---------- lever rail components (consumed by controls.js) ---------- */
.group{margin-bottom:10px;border:1px solid var(--hairline);border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.02)}
.group>summary{cursor:pointer;padding:11px 12px;font:500 11px/1.3 var(--mono);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink2);list-style:none;display:flex;justify-content:space-between;align-items:center}
.group>summary::-webkit-details-marker{display:none}
.group>summary::after{content:"+";color:var(--ink4);font-size:13px}
.group[open]>summary{border-bottom:1px solid var(--hairline);color:var(--lapis)}
.group[open]>summary::after{content:"\2212"}
.lever{padding:10px 12px}
.lever label{display:flex;justify-content:space-between;align-items:center;font:300 12.5px/1.4 var(--mono);color:var(--ink2);margin-bottom:6px}
.lever label .val,.lever label span:last-child{color:var(--lapis);font-weight:500;font-variant-numeric:tabular-nums}
.lever input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:2px;border-radius:1px;background:var(--strong);outline:none;accent-color:var(--lapis)}
.lever input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--lapis);cursor:grab;transition:box-shadow .2s}
.lever input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 10px var(--lapis-glow)}
.lever input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--lapis);border:none;cursor:grab}
.lever select{width:100%;font:300 11px var(--mono);padding:6px 8px;background:var(--surface-solid);color:var(--ink);
  border:1px solid var(--hairline);border-radius:6px;outline:none}
.seg{display:flex;gap:5px}
.seg-opt{flex:1;padding:8px 4px;font:400 11.5px/1 var(--mono);letter-spacing:0.04em;color:var(--ink3);
  background:transparent;border:1px solid var(--hairline);border-radius:8px;cursor:pointer;
  transition:all .15s;text-transform:capitalize}
.seg-opt:hover{border-color:var(--strong);color:var(--ink)}
.seg-opt.on{border-color:var(--gold);color:var(--gold);background:var(--gold-soft);font-weight:600;
  box-shadow:0 0 12px rgba(212,180,106,0.2)}
.seg-hint{font:300 11px/1.5 var(--mono);color:var(--ink2);margin-top:7px;min-height:28px}
/* floating lever explainer */
#lever-tip{position:fixed;z-index:30;width:300px;pointer-events:none;opacity:0;transform:translateX(-6px);
  transition:opacity .18s,transform .18s;background:rgba(9,13,23,0.94);backdrop-filter:blur(18px);
  border:1px solid var(--strong);border-left:2px solid var(--gold);border-radius:10px;padding:14px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,0.55)}
#lever-tip.show{opacity:1;transform:translateX(0)}
#lever-tip .tip-title{font:500 12px/1.3 var(--mono);letter-spacing:0.08em;color:var(--gold);margin-bottom:6px;text-transform:uppercase}
#lever-tip .tip-body{font:300 13px/1.55 var(--mono);color:var(--ink)}
#lever-tip .tip-source{font:300 10.5px/1.4 var(--mono);color:var(--ink4);margin-top:8px;border-top:1px solid var(--hairline);padding-top:7px}
.lever-ends{display:flex;justify-content:space-between;gap:10px;font:300 10.5px/1.4 var(--mono);
  color:var(--ink4);margin-top:5px}
.lever-ends span{transition:opacity .2s,color .2s}
.band{width:6px;height:6px;border-radius:50%;display:inline-block;margin-left:6px;vertical-align:middle}
.band.narrow{background:var(--lapis)} .band.medium{background:var(--gold)} .band.wide{background:var(--ink4)}
.preset-chip{display:inline-block;margin:2px;padding:6px 11px;font:400 10px/1 var(--mono);letter-spacing:0.06em;
  border:1px solid var(--hairline);border-radius:999px;cursor:pointer;background:transparent;color:var(--ink2);transition:all .18s}
.preset-chip:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px rgba(212,180,106,0.18)}
.tooltip{position:relative;cursor:help;border-bottom:1px dotted var(--ink4)}
canvas.chart{width:100%;height:64px;display:block}
.breach{background:rgba(120,30,30,0.25);border:1px solid rgba(220,90,90,0.4);color:#e89a9a;border-radius:8px;
  padding:8px 10px;font:400 11px var(--mono);margin-bottom:8px}

/* dashboard cards inherit glass */
#rail-right h3,#rail-right .panel-title{font:500 10px/1.3 var(--mono);letter-spacing:0.2em;text-transform:uppercase;color:var(--ink3)}

@media (prefers-reduced-motion: reduce){
  .rail,{transition:none}
}
@media (max-width: 980px){
  :root{--rail-w:262px}
  #year-big{display:none}
}