/* ScopeLab → ferronato.me labs identity (see ../portfolio-shell.css).
   Loaded last. Only presentation: screen aspect ratios (the canvases size
   themselves from them), layout and every transition are left untouched.

   ui.mjs reads the screen/trace colours from <html>, so those variables are
   set on <html>. The chrome variables are set on <body> to beat the older
   mapping in portfolio-shell.css. The theme toggle switches html[data-theme]
   between "night" (identity default) and "day". */

html[data-theme="day"]{
  --fm-bg:#F4F1EA;--fm-panel:#FFFFFF;--fm-panel-2:#F8F6F1;--fm-sunk:#ECE8DF;
  --fm-ink:#1E2022;--fm-muted:#55575A;--fm-dim:#7A7C7E;
  --fm-rule:#D9D5CC;--fm-rule-strong:#BDB8AD;
  --fm-amber:#B57A12;--fm-amber-ink:#FFFFFF;--fm-amber-soft:rgba(181,122,18,.10);--fm-amber-line:rgba(181,122,18,.5);
  --fm-d1:#B57A12;--fm-d2:#2F6E93;--fm-d3:#2E8460;--fm-d4:#B4513A;--fm-d5:#6A55B0;--fm-d6:#6F726F;
  --fm-ok:#2E8460;--fm-warn:#B57A12;--fm-bad:#B4513A;
  --fm-shadow:0 1px 2px rgba(30,32,34,.06),0 8px 24px rgba(30,32,34,.06);
}

/* The oscilloscope screen stays a dark instrument display in both lighting
   modes, so its colours are fixed dark-palette values, not theme tokens.
   html[data-theme] outranks styles.css's :root / [data-theme] blocks. */
html[data-theme]{
  --screen:#111416;
  --grat:#24292C;
  --grat-axis:#3A3F42;
  --screen-ink:#8A8C88;
  --ch-a:#F2B654;     /* signal as generated     → amber  */
  --ch-b:#9BD5B4;     /* anything digital        → mint   */
  --ch-c:#B9A7E3;     /* after the analog path   → violet (named in chain.mjs copy) */
  --ghost:#62666A;    /* what arrived up-chain   → grey   */
  --fold:#92BED8;     /* folded copies           → blue   */
  --nyq:#E3826F;      /* Nyquist boundary        → red    */
  --ok:#9BD5B4;--warn:#F2B654;--bad:#E3826F;
  --mono:var(--fm-mono);
  --sans:var(--fm-sans);
}
html[data-theme="day"]{--ok:#2E8460;--warn:#B57A12;--bad:#B4513A}

body[data-fm-project="scope"]{
  --panel:var(--fm-bg);
  --panel-hi:var(--fm-panel-2);
  --panel-lo:var(--fm-sunk);
  --groove:var(--fm-rule);
  --edge:1px solid var(--fm-rule);
  --ink:var(--fm-ink);
  --ink-2:var(--fm-muted);
  --ink-3:var(--fm-dim);
  background:var(--fm-bg);color:var(--fm-ink);font-family:var(--fm-sans);
}
body[data-fm-project="scope"] :focus-visible{outline-color:var(--fm-amber)}
body[data-fm-project="scope"] :is(main,.colophon) a{color:var(--fm-amber)}

/* Drop the engraved-enamel highlights; the identity uses flat 1px rules. */
body[data-fm-project="scope"] :is(.measure,.controls fieldset,.field-controls,.notes > div,.colophon,
  .chain-bar,.stage,.inst-source,.lane,.front-controls fieldset){box-shadow:none}

/* ---------- shell hero + tab strip (see ../portfolio-shell.css) ----------
   The old header bar (.rail / .views / .wordmark) is gone: the brand lives in
   the hero and the six view buttons sit in the sticky nav.fm-tabs strip. They
   keep their .viewtab class and data-view attribute, which main.mjs binds; the
   readout keeps #railReadout / #lamp / #railText for bench.mjs. styles.css
   still styles .viewtab for the old bar, so the shell look is restated here. */
body[data-fm-project="scope"] .fm-hero h1{margin:0;font-weight:400;letter-spacing:-.02em}
body[data-fm-project="scope"] .fm-hero h1 .fm-h1-subject{max-width:none;margin-top:.7em;font-size:clamp(12px,1.4vw,17px);line-height:1.3}
body[data-fm-project="scope"] .fm-hero-fig figcaption strong{color:var(--fm-ink);font-weight:600}
body[data-fm-project="scope"] .fm-tabs .viewtab{
  display:inline-flex;align-items:center;gap:7px;
  margin:0;padding:13px 10px 11px;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;
  background:none;color:var(--fm-muted);box-shadow:none;
  font:500 13px/1.2 var(--fm-sans);white-space:nowrap;cursor:pointer;
}
body[data-fm-project="scope"] .fm-tabs .viewtab:hover{color:var(--fm-ink);background:rgba(255,255,255,.03)}
body[data-fm-project="scope"] .fm-tabs .viewtab.is-on{
  color:var(--fm-ink);border-bottom-color:var(--fm-amber);background:var(--fm-amber-soft);box-shadow:none;
}
body[data-fm-project="scope"] .fm-tabs .viewtab.is-on .n{color:var(--fm-amber)}
/* The live readout is the one thing allowed to shrink: the six tabs keep their
   width, the chips keep theirs, and a long "— zone 3" readout gets an ellipsis.
   Under 1100px it goes away and the tab row scrolls instead. */
body[data-fm-project="scope"] .fm-tabs .fm-tab-readout{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 0 auto;padding:0 10px;min-width:0;flex:0 1 auto;
  color:var(--fm-muted);font:500 11px/1.3 var(--fm-mono);font-variant-numeric:tabular-nums;
}
body[data-fm-project="scope"] .fm-tabs #railText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:1101px){
  body[data-fm-project="scope"] .fm-tabs .fm-tablist{flex:0 0 auto}
}
@media (max-width:1100px){
  body[data-fm-project="scope"] .fm-tabs .fm-tab-readout{display:none}
}
body[data-fm-project="scope"] .fm-tabs .lamp{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--fm-ok);box-shadow:none;
}
body[data-fm-project="scope"] .fm-tabs .fm-chip{
  height:26px;cursor:pointer;text-decoration:none;
  font:500 11px/1 var(--fm-mono);letter-spacing:.02em;
}
body[data-fm-project="scope"] .fm-tabs .fm-chip:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong)}
body[data-fm-project="scope"] .fm-tabs #themeBtn[aria-pressed="true"]{
  color:var(--fm-amber);background:var(--fm-amber-soft);border-color:var(--fm-amber-line);
}
body[data-fm-project="scope"] main{
  box-sizing:border-box;width:min(1200px,calc(100% - 40px));max-width:none;margin:0 auto;padding:30px 0 56px;
}

/* ---------- buttons ---------- */
body[data-fm-project="scope"] .chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--fm-h-ctl);padding:4px 12px;
  font:500 12.5px/1.2 var(--fm-sans);color:var(--fm-ink);
  background:var(--fm-panel);border:1px solid var(--fm-rule);border-radius:var(--fm-r-ctl);
}
body[data-fm-project="scope"] .chip:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong)}
body[data-fm-project="scope"] .chip:active{background:var(--fm-panel-2)}
body[data-fm-project="scope"] .chip.wide{padding:8px}
body[data-fm-project="scope"] .chip.ratio.is-on{
  color:var(--fm-amber);background:var(--fm-amber-soft);border-color:var(--fm-amber-line);box-shadow:none;
}

/* ---------- screens ---------- */
body[data-fm-project="scope"] :is(.screen,.stage-screen,.lane-screen){
  background:var(--screen);border:1px solid var(--fm-rule);border-radius:var(--fm-r-panel);
  overflow:hidden;box-shadow:inset 0 1px 10px rgba(0,0,0,.35);
}

/* ---------- soft keys (preset experiments) ---------- */
body[data-fm-project="scope"] .softkey-rail{
  background:var(--fm-sunk);border:1px solid var(--fm-rule);border-radius:var(--fm-r-panel);
}
body[data-fm-project="scope"] .softkey{background:var(--fm-panel);color:var(--fm-muted);font-family:var(--fm-sans)}
body[data-fm-project="scope"] .softkey b{font-weight:600;color:var(--fm-ink)}
body[data-fm-project="scope"] .softkey:hover{background:var(--fm-panel-2)}
body[data-fm-project="scope"] .softkey.is-on{
  background:var(--fm-amber-soft);box-shadow:inset 0 2px 0 var(--fm-amber);
}
body[data-fm-project="scope"] .softkey.is-on b{color:var(--fm-amber)}
body[data-fm-project="scope"] .softkey-hint,
body[data-fm-project="scope"] .fieldnote{color:var(--fm-dim)}

/* ---------- verdict + measurements ---------- */
body[data-fm-project="scope"] .verdict-head{
  font:400 22px/1.25 var(--fm-serif);letter-spacing:-.01em;
}
body[data-fm-project="scope"] .verdict-body{color:var(--fm-muted)}
body[data-fm-project="scope"] .measure dt,
body[data-fm-project="scope"] .field-result span{
  font:500 10.5px/1.3 var(--fm-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fm-dim);
}
body[data-fm-project="scope"] .measure dd,
body[data-fm-project="scope"] .field-result strong{font-family:var(--fm-mono)}

/* ---------- control column ---------- */
body[data-fm-project="scope"] .controls legend{
  font:500 10.5px/1.3 var(--fm-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fm-dim);
}
body[data-fm-project="scope"] .knob label,
body[data-fm-project="scope"] .select-row label,
body[data-fm-project="scope"] .switch{color:var(--fm-muted)}
body[data-fm-project="scope"] .knob output{font-family:var(--fm-mono);color:var(--fm-ink)}
body[data-fm-project="scope"] .knob.is-primary label{color:var(--fm-ink)}
html body[data-fm-project="scope"] .knob.is-primary output{color:var(--fm-amber)}

body[data-fm-project="scope"] input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;background:var(--fm-rule);box-shadow:none;
}
body[data-fm-project="scope"] input[type=range]::-moz-range-track{
  height:4px;border-radius:2px;background:var(--fm-rule);box-shadow:none;
}
body[data-fm-project="scope"] input[type=range]::-webkit-slider-thumb{
  width:14px;height:14px;margin-top:-5px;border-radius:50%;
  border:2px solid var(--fm-bg);background:var(--fm-ink);box-shadow:0 0 0 1px var(--fm-rule-strong);
}
body[data-fm-project="scope"] input[type=range]::-moz-range-thumb{
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--fm-bg);background:var(--fm-ink);box-shadow:0 0 0 1px var(--fm-rule-strong);
}
body[data-fm-project="scope"] .is-primary input[type=range]::-webkit-slider-thumb{background:var(--fm-amber);border-color:var(--fm-bg)}
body[data-fm-project="scope"] .is-primary input[type=range]::-moz-range-thumb{background:var(--fm-amber)}

body[data-fm-project="scope"] select{
  min-height:var(--fm-h-ctl);padding:4px 8px;
  font:400 13px var(--fm-sans);color:var(--fm-ink);
  background:var(--fm-sunk);border:1px solid var(--fm-rule);border-radius:var(--fm-r-ctl);
}
html body[data-fm-project="scope"] .switch input{accent-color:var(--fm-amber)}

body[data-fm-project="scope"] .segmented{
  background:var(--fm-rule);border:1px solid var(--fm-rule);border-radius:var(--fm-r-ctl);
}
body[data-fm-project="scope"] .segmented span{
  background:var(--fm-panel);color:var(--fm-muted);font:500 12px/1.2 var(--fm-sans);
}
body[data-fm-project="scope"] .segmented input:checked + span{
  background:var(--fm-amber-soft);color:var(--fm-amber);font-weight:600;box-shadow:inset 0 -2px 0 var(--fm-amber);
}
body[data-fm-project="scope"] .segmented input:focus-visible + span{outline-color:var(--fm-amber)}

/* ---------- headings ---------- */
body[data-fm-project="scope"] :is(.block-head h2,.stage-head h2){
  font-family:var(--fm-serif);font-weight:400;letter-spacing:-.015em;
}
body[data-fm-project="scope"] .block-head h2{font-size:24px}
body[data-fm-project="scope"] .stage-head h2{font-size:28px}
body[data-fm-project="scope"] :is(.block-head p,.stage-head p,.notes dd){color:var(--fm-muted)}
body[data-fm-project="scope"] :is(.stage-rail h3,.lane-id h3,.notes dt,.keys-block h3){
  font-family:var(--fm-sans);font-weight:600;letter-spacing:-.005em;
}
body[data-fm-project="scope"] :is(.stage-n,.lane-tier){
  font:500 10.5px/1.3 var(--fm-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fm-dim);
}
body[data-fm-project="scope"] .lane-tier{color:var(--fm-amber)}

/* ---------- signal chain / instruments ---------- */
body[data-fm-project="scope"] .stage::after{box-shadow:0 0 0 3px var(--fm-bg)}
body[data-fm-project="scope"] .stage.is-out::after{box-shadow:0 0 0 3px var(--fm-bg),inset 0 0 0 1px var(--fm-rule)}
body[data-fm-project="scope"] .stage-metric{font-family:var(--fm-mono);color:var(--fm-muted)}
body[data-fm-project="scope"] .lane-spec span{
  font-family:var(--fm-mono);color:var(--fm-muted);
  background:none;border:1px solid var(--fm-rule);border-radius:999px;padding:2px 8px;
}
body[data-fm-project="scope"] .chain-flag{color:var(--warn)}

/* ---------- reference bits ---------- */
body[data-fm-project="scope"] kbd{
  font-family:var(--fm-mono);background:var(--fm-panel-2);border-color:var(--fm-rule);color:var(--fm-ink);
}
body[data-fm-project="scope"] .lab-notice{border-left-color:var(--fm-amber-line);color:var(--fm-muted)}
body[data-fm-project="scope"] .colophon{color:var(--fm-dim)}

/* ---------- small screens ---------- */
@media (max-width:760px){
  body[data-fm-project="scope"] .fm-tabs .viewtab{padding:12px 9px 10px;font-size:12.5px}
  body[data-fm-project="scope"] .fm-tabs .viewtab .n{display:none}
  body[data-fm-project="scope"] .fm-tabs .fm-wrap{flex-wrap:wrap}
  body[data-fm-project="scope"] .fm-tabs .fm-tab-actions{width:100%;padding:0 0 8px;margin-left:0;overflow-x:auto;scrollbar-width:none}
  body[data-fm-project="scope"] .fm-tabs .fm-tab-actions::-webkit-scrollbar{display:none}
  body[data-fm-project="scope"] .fm-tabs #linkBtn,
  body[data-fm-project="scope"] .fm-tabs #themeBtn,
  body[data-fm-project="scope"] .fm-tabs #csvBtn{font-size:11px;padding:0 9px}
  body[data-fm-project="scope"] main{width:calc(100% - 28px);padding:20px 0 40px}
}