/* STAND-IN · 02 Probe. Everything is scoped under .probe so it can live inside index.html or on its own page.
   Tokens and fonts come from ../tokens.css. */
.probe{--gutter:var(--pad,clamp(16px,3.2vw,48px));max-width:1360px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--gutter) clamp(32px,4vw,56px);color:var(--text);font:400 16px/1.55 var(--sans);overflow-x:clip}
.probe *,.probe *::before,.probe *::after{box-sizing:border-box}
.probe :is(h2,p,ul,ol,dl,dd){margin:0;padding:0}
.probe :is(ul,ol){list-style:none}
.probe button{font:inherit;color:inherit;cursor:pointer}
.probe [hidden]{display:none!important}
.probe .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.probe .pb-title{font:400 clamp(28px,3vw,42px)/1.12 var(--serif);letter-spacing:-.012em;max-width:30ch;text-wrap:balance}
.probe .pb-title em{font-style:italic;color:var(--muted)}
.probe .pb-eyebrow,.probe .pb-label,.probe .pb-label-right{font:400 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.probe .pb-eyebrow{color:var(--ochre);margin-bottom:8px}
.probe .pb-label-rust{color:var(--rust)}
.probe .mark{display:inline-grid;place-items:center;width:16px;height:16px;border:1.5px solid var(--rust);border-radius:50%;font:600 12px/1 var(--mono);margin-right:6px;vertical-align:-3px;letter-spacing:0}
.probe .intro{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:14px;flex-wrap:wrap}
.probe .intro-text{flex:1 1 360px}
.probe .switch{display:inline-flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 10px;min-height:44px}
.probe .switch:hover{border-color:var(--muted)}
.probe .switch-label{font:400 14px/1.2 var(--mono);letter-spacing:.02em}
.probe .switch-track{position:relative;width:40px;height:24px;border-radius:999px;background:var(--line);border:1px solid var(--na);transition:background .3s ease-out}
.probe .switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .3s ease-out,background .3s ease-out}
.probe .switch[aria-checked="true"] .switch-track{background:color-mix(in srgb,var(--ochre) 28%,transparent);border-color:var(--ochre)}
.probe .switch[aria-checked="true"] .switch-knob{transform:translateX(16px);background:var(--ochre)}
.probe .grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:24px;align-items:start}
.probe .col{display:flex;flex-direction:column;gap:16px;min-width:0}
.probe .block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0}
.probe .block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.probe .block-map{padding:12px}
.probe .map{position:relative;width:100%;aspect-ratio:5/4;border-radius:8px;overflow:hidden;background:var(--bg);touch-action:manipulation}
.probe .map-img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.probe .map-img-2026{opacity:0}
.probe .map-overlay{position:absolute;inset:0}
.probe .line-strip{position:absolute;width:56px;transform:translateX(-50%);cursor:crosshair;border-radius:6px;touch-action:manipulation}
.probe .line-strip::before{content:"";position:absolute;left:50%;top:12px;bottom:12px;border-left:2px dashed var(--text);transform:translateX(-1px);filter:drop-shadow(0 0 2px var(--bg)) drop-shadow(0 0 1px var(--bg))}
.probe .line-strip.is-ctrl::before{border-left-style:solid;border-left-color:var(--water)}
.probe .line-strip:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.probe .line-end{position:absolute;transform:translate(10px,-50%);background:color-mix(in srgb,var(--bg) 86%,transparent);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font:400 12px/1.3 var(--mono);white-space:nowrap;pointer-events:none;color:var(--text)}
.probe .line-name{position:absolute;transform:translate(10px,-50%);background:color-mix(in srgb,var(--bg) 86%,transparent);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font:600 12px/1.3 var(--mono);letter-spacing:.04em;white-space:nowrap;pointer-events:none}
.probe .line-name.is-ctrl{border-color:var(--water);color:var(--water)}
.probe .ghost{position:absolute;left:50%;width:22px;height:0;border-top:2px solid var(--ochre);transform:translate(-50%,-1px);pointer-events:none;opacity:0}
.probe .line-strip:hover .ghost{opacity:.9}
.probe .pt{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.probe .pt-sel{width:20px;height:20px;border-radius:50%;background:var(--ochre);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--ochre);z-index:3}
.probe .pt-click{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg);border:2px solid var(--text);font:600 12px/1 var(--mono);color:var(--text);z-index:2}
.probe .pt-click.is-ctrl{border-color:var(--water);color:var(--water)}
.probe .pt-pop{animation:probe-pop .3s ease-out}
@keyframes probe-pop{from{transform:translate(-50%,-50%) scale(.4)}to{transform:translate(-50%,-50%) scale(1)}}
.probe .map-hint{margin:10px 4px 2px;color:var(--muted);font-size:16px;min-height:1.55em}
.probe .time{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 14px;margin:12px 4px 0}
.probe .time-end{background:none;border:0;padding:4px 0;text-align:left;display:flex;flex-direction:column;min-height:44px;justify-content:center}
.probe .time-end-r{text-align:right;align-items:flex-end}
.probe .time-year{font:600 16px/1.1 var(--mono)}
.probe .time-sub{font:400 12px/1.3 var(--mono);color:var(--muted)}
.probe .time-end:hover .time-year{color:var(--ochre)}
.probe input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
.probe input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--na)}
.probe input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--na)}
.probe input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--ochre);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--ochre)}
.probe input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ochre);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--ochre)}
.probe .time-now{margin:0 4px 2px;font:400 14px/1.4 var(--mono);color:var(--muted);min-height:1.4em}
.probe .notes{display:grid;gap:6px;margin:10px 0 12px}
.probe .notes li{font:400 14px/1.45 var(--mono);color:var(--muted)}
.probe .notes b{font-weight:600;color:var(--text)}
.probe .note-main{color:var(--text);font-size:16px;line-height:1.55;border-left:2px solid var(--ochre);padding-left:12px}
.probe .readout-point{font:400 14px/1.4 var(--mono);color:var(--muted);margin-bottom:12px}
.probe .dems{display:grid;gap:0}
.probe .dem{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 16px;padding:10px 0;border-top:1px solid var(--line)}
.probe .dem:first-child{border-top:0;padding-top:0}
.probe .dem dt{font:600 16px/1.3 var(--sans)}
.probe .dem .dem-meta{grid-column:1;font:400 14px/1.4 var(--mono);color:var(--muted)}
.probe .dem dd{grid-column:2;grid-row:1 / span 2;align-self:center;font:400 34px/1 var(--mono);letter-spacing:-.02em;text-align:right;white-space:nowrap}
.probe .dem dd small{font-size:16px;color:var(--muted);margin-left:4px;letter-spacing:0}
.probe .dem dd.empty{color:var(--muted)}
.probe .dem.flash dd{animation:probe-flash .4s ease-out}
@keyframes probe-flash{from{color:var(--ochre)}to{color:var(--text)}}
.probe .coords{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.probe .coords dt{font:400 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.probe .coords dd{font:400 16px/1.4 var(--mono)}
.probe .separate-note{margin-top:12px;font-size:16px;color:var(--muted)}
.probe .counter{font:400 clamp(18px,1.7vw,22px)/1.3 var(--mono);margin-top:10px;overflow-wrap:anywhere}
.probe .counter-ctrl{color:var(--water)}
.probe .counter-note{margin-top:8px;font-size:16px;color:var(--muted)}
.probe .chart{margin-top:10px}
.probe .chart + .chart{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.probe .chart-title{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;font:400 14px/1.4 var(--mono)}
.probe .chart-title b{font-weight:600}
.probe .chart-title span{color:var(--muted)}
.probe .chart svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.probe .chart svg text{font-family:var(--mono);font-size:12px;fill:var(--muted)}
.probe .chart .grid-l{stroke:var(--line);stroke-width:1}
.probe .chart .axis-l{stroke:var(--na);stroke-width:1}
.probe .chart .series{fill:none;stroke:var(--ochre);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.probe .chart .series-ctrl{stroke:var(--water)}
.probe .chart .sel-rule{stroke:var(--text);stroke-width:1;stroke-dasharray:3 3}
.probe .chart .sel-dot{fill:var(--ochre);stroke:var(--bg);stroke-width:2}
.probe .chart .click-dot{fill:var(--bg);stroke:var(--text);stroke-width:2}
.probe .chart .hit{fill:transparent;cursor:crosshair}
.probe .chart-cap{margin-top:6px;font:400 12px/1.4 var(--mono);color:var(--muted)}
.probe .link-btn{background:none;border:0;padding:6px 0;font:400 14px/1 var(--mono);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.probe .link-btn:hover{color:var(--ochre)}
.probe .clicks-empty{color:var(--muted);font-size:16px}
.probe .clicks{display:grid;gap:0}
.probe .click-row{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 4px;border-radius:0}
.probe .clicks li:first-child .click-row{border-top:0}
.probe .click-row:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.probe .click-row[aria-current="true"]{background:color-mix(in srgb,var(--ochre) 9%,transparent)}
.probe .click-n{grid-row:1 / span 2;align-self:start;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--text);font:600 12px/1 var(--mono)}
.probe .click-n.is-ctrl{border-color:var(--water);color:var(--water)}
.probe .click-where{font:400 14px/1.4 var(--mono)}
.probe .click-vals{display:flex;flex-wrap:wrap;gap:2px 16px;font:400 14px/1.45 var(--mono);color:var(--muted)}
.probe .click-vals b{font-weight:600;color:var(--text)}
.probe .block-cannot{border-color:color-mix(in srgb,var(--rust) 55%,transparent)}
.probe .block-cannot p{margin-top:8px}
.probe .pb-foot{max-width:1360px;margin:0 auto;padding:8px var(--gutter) 40px;display:grid;gap:8px;color:var(--muted);font-size:14px;line-height:1.5}
.probe .pb-foot p{max-width:100ch}
@media (max-width:959px){
  .probe .grid{display:flex;flex-direction:column;gap:16px}
  .probe .col{display:contents}
  .probe .block-map{order:1}
  .probe .block-readout{order:2}
  .probe .block-counter{order:3}
  .probe .block-profile{order:4}
  .probe .block-clicks{order:5}
  .probe .block-cannot{order:7}
}
@media (max-width:520px){
  .probe .dem dd{font-size:30px}
  .probe .time{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .probe .time input[type=range]{grid-column:1 / -1;grid-row:1}
  .probe .time-end{grid-row:2}
  .probe .block{padding:14px}
  .probe .block-map{padding:8px}
  .probe .coords{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .probe .coords dd{font-size:14px}
}

/* reading text in the probe is 16 px; only pure labels and the chart caption stay smaller */
.probe .readout-point,.probe .time-now,.probe .notes li,.probe .dem .dem-meta,.probe .chart-title,.probe .click-where,.probe .click-vals,.probe .counter-note,.probe .switch-label{font-size:16px;line-height:1.45}
.probe .chart-cap,.probe .pb-foot{font-size:14px}
.probe .pb-foot{margin-top:24px;color:var(--muted);display:grid;gap:8px;max-width:100ch}
.probe .pb-foot p:empty{display:none}
@media (prefers-reduced-motion:reduce){
  .probe *,.probe *::before,.probe *::after{animation:none!important;transition:none!important}
}

/* P1: the first model is the large number; imagery notes sit directly under the map */
.probe .dem-hero dd{font-size:clamp(48px,5vw,64px)}
.probe .dem-hero dd small{font-size:20px}
.probe .map-notes{margin:14px 4px 4px;padding-top:14px;border-top:1px solid var(--line)}
.probe .block-map{display:flex;flex-direction:column}
@media (max-width:520px){.probe .dem-hero dd{font-size:46px}}
.probe .pb-foot{margin:28px 0 0;padding:0;max-width:100ch}