/* =====================================================================
   THEME: every colour, font and layout size lives here.
   js/theme.js reads these variables for the 3D scene and the charts.
   ===================================================================== */
:root{
  /* palette (design brief, Lens 2026-10-17) */
  --bg:#07090D; --bg-center:#0E131B;
  --panel:rgba(15,20,28,.88); --panel-solid:#0F141C; --border:#1E2633; --radius:12px;
  --txt:#E6EDF5; --dim:#8A97A8; --focus:rgba(255,255,255,.9);
  --mag:#38D6FF;          /* magnetic field Φ  (identity colour) */
  --die:#FFB547;          /* dielectric field Ψ (identity colour) */
  --dollard:#B48CFF;      /* interpretation layer */
  --source:#2A3340;       /* coil, wires, magnet: matte */
  --magnet-n:#3B4658; --magnet-s:#2A3340;
  --equi:#8A97A8; --equi-opacity:0.35; --equi-mid-opacity:0.1; --flow:#38D6FF;   /* flow sprites use the magnetic identity colour */
  --diel-grid:#8A97A8; --diel-grid-opacity:0.06;
  --scene-grid:#18202C; --scene-grid-minor:#10161F; --scene-floor:#0B1017; --scene-dust:#273142;
  --chart-bg:#0B1017; --chart-axis:#1E2633; --chart-text:#8A97A8; --chart-font:500 24px "JetBrains Mono", ui-monospace, monospace;
  --chart-font-px:12; --chart-font-weight:500; --chart-font-family:"JetBrains Mono", ui-monospace, monospace; /* chart labels in CSS px (≥11) */
  --cite:#AFC3DA; --quote-bg:#12161E;
  /* typography */
  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* layout */
  --left-w:280px; --right-w:300px; --strip-h:160px; --gap:10px;
  --sheet-peek:120px; --sheet-open:70vh; --ro-row-h:132px; /* phone: stage = 100svh − readout row − peek */
  --og-subtitle:#C9D3DF; --og-band:rgba(7,9,13,.6);
  /* 3D tuning read by js/theme.js */
  --bloom-strength:0.8; --bloom-radius:0.4; --bloom-threshold:0.2;
  --line-px:2.6; --line-px-cage:1.6;
}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../vendor/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(../vendor/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../vendor/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../vendor/fonts/inter-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../vendor/fonts/inter-greek-600-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../vendor/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(../vendor/fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../vendor/fonts/jetbrains-mono-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(../vendor/fonts/jetbrains-mono-greek-600-normal.woff2) format("woff2");unicode-range:U+0370-03FF}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:400 13px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--cite)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mag{color:var(--mag)} .die{color:var(--die)}

/* ---------- desktop grid ---------- */
#app{display:grid;grid-template-columns:var(--left-w) 1fr var(--right-w);gap:var(--gap);padding:var(--gap);height:100vh}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow-y:auto;padding:14px;backdrop-filter:blur(10px)}
#center{display:grid;grid-template-rows:1fr var(--strip-h);gap:var(--gap);min-width:0;min-height:0}
#stage{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:radial-gradient(ellipse at 50% 50%,var(--bg-center),var(--bg) 70%);min-height:0}
#c{width:100%;height:100%;display:block;touch-action:none}
#strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);min-height:0}
.chartbox{margin:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;display:flex;flex-direction:column;min-width:0;min-height:0}
.chartbox figcaption i,.chartbox figcaption .sym{text-transform:none}
.chartbox figcaption{font:600 12px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart{flex:1;width:100%;min-height:0;display:block;background:var(--chart-bg);border-radius:8px}

/* ---------- type ---------- */
.ph{font:600 12px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:4px 0 10px}
#formulas .ph{margin-top:18px}
.lede{color:var(--dim);margin:0 0 10px;font-size:13px}
.note{font-size:12px;color:var(--dim);margin:6px 0}
#titleBox{position:absolute;left:16px;top:12px;pointer-events:none;z-index:3;max-width:60%}
#titleBox h1{margin:0;font:600 20px var(--font-ui);letter-spacing:.01em}
#titleBox p{margin:2px 0 0;color:var(--dim);font-size:13px}

/* ---------- controls ---------- */
.ctl{margin:12px 0}
.ctl>label{display:block;font:500 13px var(--font-ui)}
.ctl>label output,.ctl>label b{float:right}
.ctl>label sub{font-size:.75em}
.ctl output{font:600 13px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--txt)}
.ctl.mag output{color:var(--mag)} .ctl.die output{color:var(--die)}
.ctl.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
label.chk{display:flex;align-items:center;gap:7px;font:500 13px var(--font-ui);cursor:pointer;min-height:32px}
label.chk input{width:18px;height:18px;accent-color:var(--txt)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;--fill:50%;--c:var(--txt);margin:2px 0}
.ctl.mag input[type=range]{--c:var(--mag)} .ctl.die input[type=range]{--c:var(--die)}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c) var(--fill),var(--border) var(--fill))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c) var(--fill),var(--border) var(--fill))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--c);border:3px solid var(--panel-solid);margin-top:-8px;box-shadow:0 0 0 1px var(--c)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--c);border:3px solid var(--panel-solid)}
button.mini,.presets button,.tabs button,.views button{background:var(--panel-solid);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;font:500 12px var(--font-ui);color:var(--txt)}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.presets button.on{border-color:var(--die);color:var(--die)}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tabs button.on{border-color:var(--focus)}
.views{position:absolute;top:12px;right:12px;z-index:4;display:flex;gap:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:3px}
.views button{border:none;background:transparent;padding:7px 12px;font:600 13px var(--font-ui);color:var(--dim);min-height:36px}
.views button.on.mag{background:rgba(56,214,255,.14);color:var(--mag)}
.views button.on.die{background:rgba(255,181,71,.14);color:var(--die)}
.dwrap{border-top:1px solid var(--border);padding-top:10px;margin-top:16px}
.dtoggle input{accent-color:var(--dollard)}
body.dollard .dtoggle{color:var(--dollard)}
select{background:var(--panel-solid);border:1px solid var(--border);border-radius:6px;padding:6px;width:100%}

/* ---------- readout cards ---------- */
.cards{display:flex;flex-direction:column;gap:8px}
.card-ro{background:var(--panel-solid);border:1px solid var(--border);border-left:3px solid var(--dim);border-radius:10px;padding:8px 10px}
.card-ro.mag{border-left-color:var(--mag)} .card-ro.die{border-left-color:var(--die)}
.card-ro .lbl{font:600 11.5px var(--font-ui);font-variant:all-small-caps;letter-spacing:.06em;color:var(--dim);font-size:13px}
.card-ro .val{font:600 22px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--txt);transition:color .15s}
.card-ro.mag .val.flash{color:var(--mag)} .card-ro.die .val.flash{color:var(--die)}
.card-ro .fx{font:400 13px var(--font-mono);color:var(--dim)}
.card-ro .sub{font:400 12px var(--font-mono);color:var(--dim)}
.card-ro .dl{display:none;font:500 12px var(--font-ui);color:var(--dollard);margin-top:2px}
body.dollard .card-ro.dl-on{border-left-color:var(--dollard)} body.dollard .card-ro.dl-on .dl{display:block}
a.cite{display:inline-block;font-size:12px;color:var(--cite);text-decoration:none;border-bottom:1px dotted var(--cite);margin-top:3px}
a.cite:hover{color:#fff}
span.cite{font-size:12px;color:var(--dim)}

/* ---------- formula panels ---------- */
.f{background:var(--panel-solid);border:1px solid var(--border);border-left:3px solid var(--dim);border-radius:8px;padding:8px 10px;margin:8px 0}
.f.mag{border-left-color:var(--mag)} .f.die{border-left-color:var(--die)} .f.std{border-left-color:#3A4556}
.f .eq{font:600 14px var(--font-mono);color:var(--txt)}
.f .eq .val{font:600 13px var(--font-mono);color:var(--txt);margin-left:8px;opacity:.85}
.f.mag .eq .val{color:var(--mag)} .f.die .eq .val{color:var(--die)}
.f .what{font-size:12.5px;color:var(--dim)}
blockquote{margin:8px 0;padding:6px 10px;border-left:3px solid var(--border);background:var(--quote-bg);color:var(--txt);font:italic 13px/1.45 var(--font-ui);border-radius:0 6px 6px 0}
blockquote a.cite,blockquote span.cite{font-style:normal}
.plain{background:var(--panel-solid);border:1px solid var(--border);border-left:3px solid var(--txt);border-radius:8px;padding:8px 10px;font-size:12.5px;margin:8px 0}
.styl{background:var(--panel-solid);border:1px dashed var(--dim);border-radius:8px;padding:8px 10px;font-size:12.5px;margin:8px 0;color:var(--dim)}
.styl b{color:var(--txt)}
.tag{font:600 11px var(--font-ui);border:1px solid var(--dim);color:var(--dim);border-radius:4px;padding:0 4px;margin-left:4px;text-transform:uppercase;letter-spacing:.06em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
table.ro{width:100%;border-collapse:collapse;font:400 12.5px var(--font-mono);font-variant-numeric:tabular-nums}
table.ro td{padding:3px 2px;border-bottom:1px solid var(--border)}
table.ro td:last-child{text-align:right}
#bhChart{width:100%;height:auto;aspect-ratio:7/3.4}
#dollardBox{margin-top:12px}
#dollardBox blockquote{border-left-color:var(--dollard)}
#dollardBox .dhead{border:1px solid var(--dollard);color:var(--dollard);border-radius:8px;padding:8px 10px;font-size:12.5px}
#dollardBox .dhead b{color:var(--txt)}

/* ---------- field-view overlays ---------- */
#dollardBadge{position:absolute;left:16px;top:66px;z-index:4;background:rgba(180,140,255,.14);border:1px solid var(--dollard);color:var(--dollard);border-radius:999px;padding:5px 12px;font:500 12.5px var(--font-ui)}
#dollardBadge b{font-weight:600}
#dollardBadge a{color:var(--dollard)}
#hint{position:absolute;left:50%;transform:translateX(-50%);bottom:36px;color:var(--txt);background:var(--panel);border:1px solid var(--border);padding:6px 12px;border-radius:999px;font-size:12.5px;pointer-events:none;z-index:3;white-space:nowrap;transition:opacity .6s}
#hint.fade{opacity:0}
#credit{position:absolute;left:16px;right:16px;bottom:10px;font-size:12px;color:var(--dim);z-index:3;text-align:center}
#credit a{color:var(--dim)}
#probe{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:6px 8px;font:400 12px var(--font-mono);z-index:6;font-variant-numeric:tabular-nums;min-width:160px}
#legend{position:absolute;left:16px;bottom:64px;font-size:12px;color:var(--dim);z-index:3;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:6px 9px;max-width:300px}
#legend .sw{display:inline-block;width:22px;height:0;border-top:3px solid;vertical-align:middle;margin-right:6px}
#loading{position:absolute;top:58px;right:14px;font-size:12px;color:var(--dim);background:var(--panel);padding:3px 10px;border-radius:12px;z-index:4;opacity:0;transition:opacity .2s}
#loading.on{opacity:1}
#sheetHandle{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal .card{background:var(--panel-solid);border:1px solid var(--border);border-radius:14px;max-width:760px;max-height:88vh;overflow:auto;padding:18px 22px;position:relative}
.modal .close{position:absolute;right:10px;top:8px;background:none;border:none;color:var(--txt);font-size:26px;cursor:pointer;min-width:44px;min-height:44px}
.modal li{margin:4px 0}
.modal h2{font:600 18px var(--font-ui)} .modal h3{font:600 12px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-top:16px}

/* OG / poster mode (used to render og.png) */
body.og #controls, body.og #readouts, body.og #strip, body.og #hint, body.og #legend, body.og #loading, body.og #probe{display:none!important}
body.og #app{grid-template-columns:1fr;padding:0}
body.og #center{grid-template-rows:1fr}
body.og #stage{border:none;border-radius:0}
body.og #titleBox{left:40px;top:34px} body.og #titleBox h1{font-size:46px} body.og #titleBox p{font-size:20px;max-width:640px}
body.og #credit{font-size:16px;bottom:22px}

/* ---------- tablet ---------- */
@media (max-width:1180px) and (min-width:768px){
  :root{--left-w:250px;--right-w:270px}
  #strip{grid-template-columns:repeat(2,1fr)} #strip .chartbox:nth-child(3){display:none}
  #legend{display:none}
}
/* ---------- phone (<768px): stage on top, readout row, bottom sheet ---------- */
@media (max-width:767px){
  html,body{height:auto}
  body{font-size:14px;padding-bottom:calc(var(--sheet-peek) + 10px)}
  #app{display:block;padding:0;height:auto}
  #center{display:block}
  #stage{height:var(--stage-h-mobile);border-radius:0;border:none;border-bottom:1px solid var(--border)}
  #titleBox{left:12px;top:14px;max-width:44%} #titleBox h1{font-size:18px} #titleBox p{display:none}
  .views{top:10px;right:10px} .views button{min-height:44px;padding:8px 10px}
  #dollardBadge{left:12px;right:12px;top:64px;bottom:auto;font-size:12px;text-align:center}
  #hint{display:none} #legend{display:none} #credit{font-size:12px;bottom:8px}
  #strip{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
  .chartbox{height:170px}
  #readouts{background:none;border:none;padding:10px 0 0;overflow:visible;backdrop-filter:none}
  #readouts>.ph{display:none}
  #roCards{flex-direction:row;overflow-x:auto;gap:8px;padding:0 10px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .card-ro{flex:0 0 72%;scroll-snap-align:start}
  .card-ro .val{font-size:22px}
  #formulas{display:none}
  #sheetExtra #formulas{display:block}
  #controls{position:fixed;left:0;right:0;bottom:0;height:var(--sheet-open);z-index:30;border-radius:16px 16px 0 0;border-bottom:none;padding:0;overflow:hidden;
    transform:translateY(calc(var(--sheet-open) - var(--sheet-peek)));transition:transform .28s cubic-bezier(.2,.8,.2,1);background:var(--panel-solid);box-shadow:0 -10px 30px rgba(0,0,0,.5)}
  #controls.open{transform:translateY(0)}
  #sheetHandle{display:flex;flex-direction:column;align-items:center;gap:6px;height:52px;justify-content:center;cursor:grab;touch-action:none;border-bottom:1px solid var(--border)}
  #sheetHandle span{width:44px;height:5px;border-radius:3px;background:var(--dim)}
  #sheetHandle b{font:600 12px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
  #sheetBody{height:calc(100% - 52px);overflow-y:auto;padding:4px 14px 30px;overscroll-behavior:contain}
  input[type=range]{height:44px}
  label.chk{min-height:44px} button.mini,.presets button,.tabs button{min-height:44px;padding:8px 12px;font-size:13px}
  .lede,.note,a.cite,.f .what,.styl,.plain{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- design review 1 ---------- */
.kicker{display:none}
#credit .short{display:none}
.card-ro .more{display:block}
/* Dollard notes under the readouts (collapsed: first quote only) */
#dollardBox .dl-h{color:var(--dollard)}
#dollardBox details.dmore summary{cursor:pointer;color:var(--dollard);font:600 12.5px var(--font-ui);padding:6px 0;list-style:none}
#dollardBox details.dmore summary::before{content:"▸ "} #dollardBox details.dmore[open] summary::before{content:"▾ "}
body.dollard .card-ro.dl-on{border-left:3px solid var(--dollard)}
#sheetHead{display:none}
/* og poster: no UI chrome, brighter subtitle, caption on a gradient band */
body.og .views,body.og #dollardBadge{display:none!important}
body.og #titleBox p{color:var(--og-subtitle)}
body.og .kicker{display:block;margin-top:6px;font:600 15px var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mag)}
body.og #credit{left:0;right:0;bottom:0;padding:44px 16px 22px;background:linear-gradient(to bottom,rgba(7,9,13,0),var(--og-band) 55%,var(--og-band));color:#C9D3DF}
@media (max-width:767px){
  #stage{height:calc(100svh - var(--ro-row-h) - var(--sheet-peek));min-height:300px}
  body{padding-bottom:var(--sheet-peek)}
  #readouts{height:var(--ro-row-h);padding:10px 0 10px!important}
  #roCards{padding:0 10px!important;align-items:flex-start;height:100%;overflow-y:hidden}
  .card-ro{flex:0 0 72vw!important;max-height:112px;overflow:hidden;padding:8px 12px;cursor:pointer}
  .card-ro .lbl{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card-ro .val{font-size:28px!important;line-height:36px}
  .card-ro .fx{font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card-ro .more{display:none}
  .card-ro::after{content:"tap for source";display:block;font:500 12px var(--font-ui);color:var(--dim);line-height:18px}
  .card-ro.open{max-height:none;position:relative;z-index:5}
  .card-ro.open .more{display:block} .card-ro.open::after{content:none}
  #roCards:has(.card-ro.open){overflow:visible}
  #credit .long{display:none} #credit .short{display:inline}
  #credit{white-space:nowrap;font-size:12px}
  #hint{display:block;bottom:30px;font-size:12px}
  #legend{display:none}
  /* sheet header: Dollard toggle visible in the 120 px peek */
  #sheetHead{display:flex;align-items:center;justify-content:center;height:56px;border-bottom:1px solid var(--border)}
  #sheetHead .dtoggle{min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:999px;font:600 13px var(--font-ui)}
  body.dollard #sheetHead .dtoggle{border-color:var(--dollard)}
  #sheetHandle{height:40px!important;gap:4px!important}
  #sheetBody{height:calc(100% - 96px)!important}
  /* slider rows ≈ 64 px: label/value line, then a 44 px track */
  .ctl{margin:1px 0}
  .ctl>label{height:18px;line-height:18px}
  input[type=range]{height:44px;margin:0;display:block;width:100%}
}
@media (prefers-reduced-motion:reduce){#hint{transition:none}}

/* ---- "Drag me" affordance on the magnet (magnetic view only; never intercepts pointer events) ---- */
#dragCue{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2;opacity:1;transition:opacity .3s ease}
#dragCue[hidden]{display:none}
#dragCue.gone{opacity:0}
#dragCue .ring{position:absolute;left:0;top:0;width:var(--d,56px);height:var(--d,56px);margin:calc(var(--d,56px) / -2) 0 0 calc(var(--d,56px) / -2);border-radius:50%;
  border:2px solid var(--mag);box-shadow:0 0 14px rgba(56,214,255,.55),inset 0 0 10px rgba(56,214,255,.25);animation:cuePulse 1.6s ease-in-out infinite;pointer-events:none}
#dragCue.quiet .ring{animation:cuePulseQuiet 2.6s ease-in-out infinite}
#dragCue .pill{position:absolute;top:0;left:calc(var(--d,56px) / 2 + 10px);transform:translateY(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;
  background:rgba(7,9,13,.86);color:var(--mag);border:1px solid rgba(56,214,255,.55);border-radius:999px;padding:5px 11px 5px 8px;
  font:600 13px var(--font-ui);letter-spacing:.01em;box-shadow:0 2px 12px rgba(0,0,0,.45);transition:opacity .3s ease;pointer-events:none}
#dragCue.flip .pill{left:auto;right:calc(var(--d,56px) / 2 + 10px)}
#dragCue.quiet .pill{opacity:0}
#dragCue .pill svg{flex:none;display:block}
@keyframes cuePulse{0%,100%{transform:scale(.92);opacity:.95}50%{transform:scale(1.12);opacity:.45}}
@keyframes cuePulseQuiet{0%,100%{transform:scale(.97);opacity:.45}50%{transform:scale(1.06);opacity:.2}}
@media (prefers-reduced-motion:reduce){#dragCue .ring,#dragCue.quiet .ring{animation:none;opacity:.8}#dragCue.quiet .ring{opacity:.45}}
#hint b.mag{color:var(--mag);font-weight:600}
body.og #dragCue{display:none!important}