/* ========================= SECTION HEADER ========================= */
.shead{display:grid;gap:1.15rem;margin-bottom:clamp(2rem,4.5vw,3.5rem);max-width:min(100%,44rem)}
.shead__idx{display:flex;align-items:center;gap:.85rem;color:var(--yellow)}
.shead__num{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.2em}
.shead__rule{height:1px;flex:1;background:linear-gradient(90deg,var(--yellow),transparent);opacity:.5;max-width:9rem}
.shead__kicker{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.shead h2{margin-top:-.1em}
.shead__lede{font-size:var(--t-lede);color:var(--text-2);line-height:1.5;max-width:38rem}
.shead__lede strong{color:var(--text)}

/* ========================= CITATIONS ========================= */
.cite{
  font-family:var(--mono);font-size:.62em;font-weight:600;line-height:1;
  vertical-align:super;text-decoration:none;color:var(--yellow);
  padding:.15em .3em;margin-left:.15em;border-radius:2px;
  background:var(--yellow-glow);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
  white-space:nowrap;
}
.cite:hover,.cite:focus-visible{background:var(--yellow);color:#000}
:target > .src__head{color:var(--yellow)}
.srcline{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--text-3);
  text-transform:uppercase;display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;
}
.srcline b{color:var(--text-2);font-weight:500}

/* ========================= FIGURE ========================= */
.fig{display:grid;gap:1rem;position:relative}
.fig__frame{
  position:relative;background:
    linear-gradient(180deg,var(--surface) 0%,var(--surface) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1rem,2.6vw,2rem);overflow:hidden;
}
.fig__frame--flush{padding:0}
.fig__cap{
  display:flex;gap:.9rem;align-items:flex-start;
  font-size:.82rem;line-height:1.5;color:var(--text-3);max-width:52rem;
}
.fig__cap b{color:var(--text-2);font-weight:500}
.fig__cap::before{
  content:"";flex:none;width:1.6rem;height:1px;background:var(--line-2);margin-top:.68em;
}

/* ========================= CALLOUT / ARITHMETIC ========================= */
.note{
  border-left:2px solid var(--line-2);padding:.15rem 0 .15rem 1.1rem;
  font-size:.9rem;line-height:1.6;color:var(--text-3);max-width:44rem;
}
.note b{color:var(--text-2);font-weight:500}
.note--math{border-left-color:var(--yellow)}
.note--math .note__tag{color:var(--yellow)}
.note__tag{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-4);margin-bottom:.3rem;
}

/* ========================= STAT ========================= */
.stat{display:grid;gap:.35rem;align-content:start}
.stat__val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.5rem);letter-spacing:-.035em;line-height:1;color:var(--text)}
.stat__val--y{color:var(--yellow)}
.stat__val--r{color:var(--red)}
.stat__val--c{color:var(--cyan)}
.stat__lab{font-size:.82rem;color:var(--text-3);line-height:1.4;max-width:20rem}

.statrow{display:grid;gap:clamp(1.4rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr))}

/* ========================= PULL QUOTE ========================= */
.pq{position:relative;padding:clamp(1.4rem,3vw,2.2rem) 0;max-width:46rem}
.pq__mark{position:absolute;top:0;left:-.06em;font-family:var(--serif);font-size:6rem;line-height:1;color:var(--yellow);opacity:.16;pointer-events:none}
.pq blockquote{font-family:var(--serif);font-size:clamp(1.4rem,3.1vw,2.15rem);line-height:1.22;letter-spacing:-.015em;color:var(--text);position:relative}
.pq figcaption{margin-top:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pq figcaption b{color:var(--yellow);font-weight:500}

/* ========================= CONTROLS ========================= */
.ctrls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ctrls__lab{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4);margin-right:.15rem}

.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.46rem .78rem;border:1px solid var(--line-2);border-radius:100px;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.04em;
  color:var(--text-2);background:var(--surface);
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
  white-space:nowrap;
}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--text);color:var(--void);border-color:var(--text)}
.chip__dot{width:.5rem;height:.5rem;border-radius:100px;background:currentColor;flex:none}
.chip__n{font-size:.66rem;opacity:.6;font-variant-numeric:tabular-nums}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.62rem 1rem;border:1px solid var(--line-2);border-radius:var(--radius);
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);background:var(--surface);
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.btn:hover:not(:disabled){border-color:var(--text-2);color:var(--text);background:var(--surface-2)}
.btn:disabled{opacity:.34;cursor:not-allowed}
.btn--primary{background:var(--yellow);color:#000;border-color:var(--yellow)}
.btn--primary:hover:not(:disabled){background:var(--yellow-2);border-color:var(--yellow-2);color:#000}
.btn--danger{border-color:var(--red-deep);color:var(--red)}
.btn--danger:hover:not(:disabled){border-color:var(--red);background:var(--red-deep);color:var(--red-2)}
.btn__ico{width:.8rem;height:.8rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

select.sel{
  appearance:none;-webkit-appearance:none;
  padding:.46rem 2rem .46rem .78rem;border:1px solid var(--line-2);border-radius:100px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--text-2);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a5abba' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .7rem center/.6rem;
  cursor:pointer;
}
select.sel:hover{border-color:var(--text-3);color:var(--text)}

/* range */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer;height:1.5rem;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-2);border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:var(--line-2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:1rem;height:1rem;margin-top:-.44rem;
  border-radius:100px;background:var(--yellow);border:2px solid var(--bg);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:1rem;height:1rem;border-radius:100px;background:var(--yellow);border:2px solid var(--bg);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--yellow-glow)}
input[type=range]:focus-visible{outline:none;box-shadow:none}

/* ========================= STATUS LEGEND ========================= */
.key{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--text-3)}
.key span{display:inline-flex;align-items:center;gap:.45rem}
.key i{width:.62rem;height:.62rem;border-radius:2px;flex:none;font-style:normal}
.key .k-in{background:var(--cyan)}
.key .k-out{background:transparent;border:1px dashed var(--slate)}
.key .k-dis{background:repeating-linear-gradient(45deg,var(--amber) 0 2px,transparent 2px 4px);border:1px solid var(--amber)}

/* ========================= EMPTY STATE ========================= */
.empty{
  display:grid;place-items:center;gap:.7rem;text-align:center;
  padding:clamp(2rem,6vw,4rem) 1rem;border:1px dashed var(--line-2);border-radius:var(--radius-lg);
  color:var(--text-3);
}
.empty__t{font-family:var(--serif);font-size:1.35rem;color:var(--text-2)}
.empty__d{font-size:.85rem;max-width:26rem}

/* ========================= PROGRESS RAIL ========================= */
.rail{
  position:fixed;left:max(.9rem,env(safe-area-inset-left));top:50%;transform:translateY(-50%);
  z-index:40;display:grid;gap:.34rem;padding:.55rem .4rem;
  background:rgba(10,11,16,.62);backdrop-filter:blur(9px);border:1px solid var(--line-soft);border-radius:100px;
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease);
}
.rail.is-on{opacity:1;pointer-events:auto}
.rail a{
  display:block;position:relative;width:1.1rem;height:.55rem;border-radius:2px;
}
.rail a::before{
  content:"";position:absolute;left:.28rem;right:.28rem;top:.22rem;height:2px;border-radius:2px;
  background:var(--line-2);transition:background var(--dur-1) var(--ease),left var(--dur-2) var(--ease),right var(--dur-2) var(--ease);
}
.rail a:hover::before{background:var(--text-3)}
.rail a[aria-current="true"]::before{background:var(--yellow);left:0;right:0}
.rail a span{
  position:absolute;left:calc(100% + .55rem);top:50%;transform:translateY(-50%) translateX(-4px);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);
  padding:.24rem .5rem;border-radius:3px;opacity:0;pointer-events:none;
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:1080px){.rail{display:none}}

.topbar{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:41;background:transparent;
}
.topbar__fill{height:100%;width:0;background:var(--yellow);transform-origin:0 50%;transition:width 90ms linear}

/* ========================= REDACTION MOTIF ========================= */
.redact{
  position:relative;display:inline-block;border-radius:1px;
  transition:color var(--dur-2) var(--ease);
}
.redact::after{
  content:"";position:absolute;left:-.14em;right:-.14em;top:-.06em;bottom:-.04em;
  background:var(--text);border-radius:1px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--dur-2) var(--ease);
}
.redact.is-on{color:transparent}
.redact.is-on::after{transform:scaleX(1)}