:root{
  --paper:#E4E7E1;
  --paper-2:#EDEFE9;
  --ink:#16211F;
  --ink-60:#5C6663;
  --ink-35:#969D99;
  --rule:#CBD0C8;
  --rule-faint:#D8DCD5;
  --petrol:#16536B;
  --oxide:#A34733;

  --fs-display:clamp(2.6rem,7vw,5.2rem);
  --gap:clamp(14px,2vw,24px);
  --panel-w:305px;

  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* plotting-paper grid */
  background-image:
    linear-gradient(var(--rule-faint) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-faint) 1px,transparent 1px);
  background-size:100% 28px,28px 100%;
}

/* ── masthead ─────────────────────────────── */
.masthead{
  padding:clamp(26px,5vw,60px) var(--gap) 0;
  max-width:1560px;margin:0 auto;
}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);display:flex;align-items:center;gap:9px;
}
.rec{
  width:7px;height:7px;border-radius:50%;background:var(--oxide);
  animation:blip 2.6s ease-in-out infinite;flex:none;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

h1{
  font-size:var(--fs-display);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.92;
  margin:.18em 0 .1em;
}
.standfirst{
  max-width:60ch;color:var(--ink-60);font-size:clamp(.95rem,1.5vw,1.08rem);margin:0 0 6px;
}
.standfirst strong{color:var(--ink);font-family:var(--mono);font-weight:500}

/* ── layout ───────────────────────────────── */
.rig{
  max-width:1560px;margin:0 auto;
  padding:clamp(18px,3vw,34px) var(--gap) 0;
  display:grid;
  grid-template-columns:var(--panel-w) minmax(0,1fr);
  gap:var(--gap);
  align-items:start;
}
@media(max-width:900px){
  .rig{grid-template-columns:1fr}
  :root{--panel-w:100%}
  .plotcol{order:-1}          /* chart before controls on a small screen */
}

/* ── panel ────────────────────────────────── */
.panel{
  background:var(--paper-2);
  border:1px solid var(--rule);
  position:sticky;top:var(--gap);
}
@media(max-width:900px){.panel{position:static}}

.block{padding:16px 16px 18px;border-bottom:1px solid var(--rule)}
.block:last-child{border-bottom:0}
.blockhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}

.lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-60);display:block;margin-bottom:9px;
}
.blockhead .lbl{margin-bottom:0}

/* search */
.searchwrap{position:relative}
#q{
  width:100%;padding:9px 32px 9px 11px;
  font:inherit;font-size:14px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-radius:0;
}
#q:focus{outline:2px solid var(--petrol);outline-offset:-1px}
.searchwrap kbd{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;color:var(--ink-35);
  border:1px solid var(--rule);padding:1px 5px;pointer-events:none;
}
#q:focus + kbd{display:none}

.results{max-height:250px;overflow:auto;margin-top:8px}
.results:empty{display:none}
.res{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;text-align:left;background:none;border:0;
  padding:6px 8px;cursor:pointer;font:inherit;color:var(--ink);
  border-left:2px solid transparent;
}
.res:hover,.res:focus-visible{background:var(--paper);border-left-color:var(--petrol);outline:none}
.res[aria-selected="true"]{opacity:.4}
.res .nm{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .vl{font-family:var(--mono);font-size:11.5px;color:var(--ink-60);flex:none}

/* legend */
.legend{list-style:none;margin:10px 0 0;padding:0}
.legend li{
  display:flex;align-items:center;gap:9px;
  padding:5px 0;border-bottom:1px dotted var(--rule);
}
.legend li:last-child{border-bottom:0}
.pen{width:16px;height:3px;flex:none}
.legend .nm{flex:1;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend .inf{
  font-family:var(--mono);font-size:10px;color:var(--ink-35);flex:none;
  border:1px solid var(--rule);padding:0 4px;
}
.legend .x{
  background:none;border:0;cursor:pointer;color:var(--ink-35);
  font-size:16px;line-height:1;padding:0 2px;flex:none;
}
.legend .x:hover{color:var(--oxide)}
.empty{color:var(--ink-35);font-size:13px;margin:10px 0 0}
.empty.gone{display:none}

/* buttons */
.mini{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink-60);
  padding:4px 8px;cursor:pointer;
}
.mini:hover{border-color:var(--petrol);color:var(--petrol)}
.mini.wide{display:block;width:100%;margin-bottom:7px;padding:8px}
.mini.wide:last-child{margin-bottom:0}
.miniacts{display:flex;gap:5px}

.segmented{display:flex;border:1px solid var(--rule)}
.seg{
  flex:1;font-family:var(--mono);font-size:11px;
  background:var(--paper);border:0;border-right:1px solid var(--rule);
  color:var(--ink-60);padding:7px 2px;cursor:pointer;
}
.seg:last-child{border-right:0}
.seg.on{background:var(--ink);color:var(--paper-2)}
.hint{font-size:11.5px;color:var(--ink-35);margin:8px 0 0}

.row-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:3px 0;cursor:pointer}
.row-toggle input{accent-color:var(--petrol);width:15px;height:15px}

/* ── plot ─────────────────────────────────── */
.plotcol{min-width:0}
.plotframe{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--rule);
  height:clamp(390px,56vh,660px);
}
#chart{display:block;width:100%;height:100%;touch-action:pan-y}

.readout{
  position:absolute;pointer-events:none;
  background:var(--ink);color:var(--paper-2);
  padding:9px 11px;font-family:var(--mono);font-size:11.5px;line-height:1.65;
  min-width:180px;z-index:3;
}
.readout .d{color:var(--ink-35);letter-spacing:.08em;text-transform:uppercase;font-size:10px;margin-bottom:5px}
.readout .r{display:flex;justify-content:space-between;gap:14px;white-space:nowrap}
.readout .sw{display:inline-block;width:7px;height:7px;margin-right:6px}
.readout .as{color:#C9A227}

.loading{
  position:absolute;inset:auto 0 0 0;padding:7px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-60);background:var(--paper);border-top:1px solid var(--rule);
}

/* ── timeline ─────────────────────────────── */
.timeline{
  background:var(--paper-2);border:1px solid var(--rule);border-top:0;
  padding:14px 18px 10px;
}
.tlhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.tlhead .lbl{margin-bottom:0}
.rangeout{font-family:var(--mono);font-size:12.5px;color:var(--ink)}

.slider{position:relative;height:22px}
.track{position:absolute;top:9px;left:0;right:0;height:3px;background:var(--rule)}
.fill{position:absolute;top:0;bottom:0;background:var(--petrol)}
.slider input[type=range]{
  position:absolute;top:0;left:0;width:100%;height:22px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;cursor:grab;
  width:13px;height:19px;background:var(--paper-2);
  border:1.5px solid var(--ink);border-radius:0;
}
.slider input[type=range]::-moz-range-thumb{
  pointer-events:auto;cursor:grab;
  width:11px;height:17px;background:var(--paper-2);
  border:1.5px solid var(--ink);border-radius:0;
}
.slider input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--petrol);outline-offset:2px}
.slider input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--petrol);outline-offset:2px}

.ticks{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;color:var(--ink-35);
  margin-top:2px;
}

/* ── notice + foot ────────────────────────── */
.notice{
  border:1px solid var(--rule);border-top:0;
  border-left:3px solid var(--oxide);
  background:var(--paper-2);
  padding:14px 18px;font-size:13px;line-height:1.62;color:var(--ink-60);
  max-width:none;
}
.notice strong{color:var(--ink)}
.notice em{font-style:normal;border-bottom:1px dashed var(--ink-35)}

.foot{
  max-width:1560px;margin:0 auto;
  padding:26px var(--gap) 40px;
  font-size:12px;color:var(--ink-35);
}
.foot p{max-width:75ch;margin:0}
.foot a{color:var(--ink-60)}

/* ── touch + small screens ────────────────── */
@media(pointer:coarse){
  .slider{height:32px}
  .track{top:14px}
  .slider input[type=range]{height:32px}
  .slider input[type=range]::-webkit-slider-thumb{width:22px;height:28px}
  .slider input[type=range]::-moz-range-thumb{width:20px;height:26px}
  .res{padding:11px 8px}
  .legend li{padding:10px 0}
  .legend .x{font-size:20px;padding:0 6px}
  .mini{padding:9px 11px}
  .seg{padding:11px 2px}
  .row-toggle{padding:7px 0}
  .row-toggle input{width:18px;height:18px}
  .searchwrap kbd{display:none}
}

@media(max-width:640px){
  :root{--fs-display:clamp(2.1rem,10vw,3.1rem);--gap:12px}
  .plotframe{height:clamp(300px,46vh,440px)}
  .segmented{flex-wrap:wrap}
  .seg{flex:1 0 50%;border-bottom:1px solid var(--rule)}
  .seg:nth-child(2){border-right:0}
  .seg:nth-child(3),.seg:nth-child(4){border-bottom:0}
  .timeline{padding:12px 12px 8px}
  .tlhead{flex-direction:column;align-items:flex-start;gap:4px}
  .rangeout{font-size:11.5px}
  .ticks span:nth-child(even){display:none}
  .notice{padding:12px 13px;font-size:12.5px}
  .readout{font-size:11px;padding:8px 10px;min-width:0;max-width:calc(100vw - 40px)}
  .results{max-height:200px}
  body{background-size:100% 24px,24px 100%}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}