/* Signal Chain Studio → ferronato.me labs identity.
   Loaded last. Chrome only. The canvases read their colours and font from
   :root (--ch1..8, --ink*, --screen, --f-data) through getComputedStyle,
   so :root is deliberately left alone and the trace colours keep their
   meaning. Everything here is scoped to the body. */

body[data-fm-project="rf-filters"]{
  --chassis:var(--fm-bg);
  --panel:var(--fm-panel);
  --panel-2:var(--fm-panel-2);
  --rail:var(--fm-rule);
  --rail-hi:var(--fm-rule-strong);
  --screen:#111416;
  --ink:var(--fm-ink);--ink-dim:var(--fm-muted);--ink-faint:var(--fm-dim);
  --amber:var(--fm-amber);
  --warn:var(--fm-bad);--ok:var(--fm-ok);
  --f-disp:var(--fm-sans);
  --f-body:var(--fm-sans);
  --r:var(--fm-r-ctl);
  background:var(--fm-bg);
}

/* ---------- page layout ----------
   Shell order: breadcrumb → hero (brand + animation) → sticky control strip
   → the instrument grid (rail · main / measurement bar) → related labs.
   The strip is sticky at the top, so the instrument fills whatever is left
   of the viewport below it; --sc-strip is measured by a small script. */
/* The page scrolls as a document: the inline html/body{height:100%} would make
   body the sticky strip's 100vh containing block and the strip would scroll away. */
html:has(body[data-fm-project="rf-filters"]){height:auto}
body[data-fm-project="rf-filters"]{overflow:visible;height:auto;min-height:100%}
body[data-fm-project="rf-filters"] .app{
  height:max(560px,calc(100vh - var(--sc-strip,66px)));
  min-height:0;
  border-top:0;
}
@media (max-width:1000px){
  body[data-fm-project="rf-filters"] .app{
    height:auto;min-height:0;
    grid-template-rows:auto minmax(70vh,auto) auto;
    grid-template-areas:"rail" "main" "foot";
    overflow:visible;
  }
  /* the self-test table would otherwise grow the content-sized main row */
  body[data-fm-project="rf-filters"] #testOut{max-height:46vh}
}

/* ---------- hero ---------- */
body[data-fm-project="rf-filters"] .fm-hero{font-size:14px}
body[data-fm-project="rf-filters"] .fm-hero-fig figcaption strong{color:var(--fm-ink);font-weight:600}
body[data-fm-project="rf-filters"] .fm-hero-fig figcaption sub{font-size:.75em}
body[data-fm-project="rf-filters"] .fm-hero-cv{touch-action:manipulation}

/* ---------- control strip (nav.fm-tabs) ----------
   A single-instrument lab: the strip carries the global settings at the left
   and the transport (Running · Single · Step · Clear) as chips at the right. */
body[data-fm-project="rf-filters"] .fm-tabs .fm-wrap{gap:12px}
body[data-fm-project="rf-filters"] .fm-tabs .globals{
  margin:0;flex-wrap:nowrap;align-items:flex-end;gap:18px;
  padding:9px 2px 10px;
}
body[data-fm-project="rf-filters"] .fm-tabs .gfield{gap:5px}
body[data-fm-project="rf-filters"] .fm-tabs .gfield>span{white-space:nowrap}
body[data-fm-project="rf-filters"] .fm-tabs .gfield>span b{color:var(--fm-amber);font-weight:500}
body[data-fm-project="rf-filters"] .fm-tabs .gfield input[type=range]{height:var(--fm-h-ctl);margin:0}
body[data-fm-project="rf-filters"] .fm-tabs .fm-tab-actions{gap:6px;padding:8px 0 8px 12px}
body[data-fm-project="rf-filters"] .fm-tabs .fm-tab-actions .btn{
  min-height:26px;padding:0 12px;
  border:1px solid var(--fm-rule);border-radius:999px;
  background:color-mix(in srgb,var(--fm-panel) 80%,transparent);
  color:var(--fm-muted);
  font:500 11.5px/1 var(--fm-mono);letter-spacing:.02em;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
body[data-fm-project="rf-filters"] .fm-tabs .fm-tab-actions .btn:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong);background:var(--fm-panel-2)}
body[data-fm-project="rf-filters"] .fm-tabs .fm-tab-actions .btn.on{
  color:var(--fm-amber);border-color:var(--fm-amber-line);background:var(--fm-amber-soft);box-shadow:none;
}
@media (max-width:760px){
  body[data-fm-project="rf-filters"] .fm-tabs .fm-wrap{flex-wrap:wrap;gap:0}
  body[data-fm-project="rf-filters"] .fm-tabs .globals{flex:1 1 100%;padding:10px 2px 8px}
  body[data-fm-project="rf-filters"] .fm-tabs .fm-tab-actions{margin-left:0;padding:0 0 10px;width:100%;overflow-x:auto;scrollbar-width:none}
  body[data-fm-project="rf-filters"] .fm-tabs .fm-tab-actions .btn{flex:0 0 auto}
}

/* ---------- scrollbars ---------- */
body[data-fm-project="rf-filters"] ::-webkit-scrollbar-thumb{background:var(--fm-rule-strong);border:2px solid var(--fm-bg)}
body[data-fm-project="rf-filters"] ::-webkit-scrollbar-thumb:hover{background:#5A5E60}

/* ---------- kickers / labels ---------- */
body[data-fm-project="rf-filters"] .gfield>span,
body[data-fm-project="rf-filters"] .ctl>label,
body[data-fm-project="rf-filters"] .f-lab span,
body[data-fm-project="rf-filters"] .tests th{
  font-family:var(--fm-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fm-dim);
}
body[data-fm-project="rf-filters"] .f-lab span{font-size:9.5px;letter-spacing:.1em;color:var(--fm-muted)}
body[data-fm-project="rf-filters"] .ctl>label.chk,
body[data-fm-project="rf-filters"] .chk{
  font:400 12px/1.3 var(--fm-sans);
  letter-spacing:0;
  text-transform:none;
  color:var(--fm-muted);
}

/* ---------- inputs ---------- */
body[data-fm-project="rf-filters"] select,
body[data-fm-project="rf-filters"] input[type=text],
body[data-fm-project="rf-filters"] input[type=number]{
  background:var(--fm-sunk);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
  color:var(--fm-ink);
}
body[data-fm-project="rf-filters"] .globals select{height:var(--fm-h-ctl);padding:0 8px;font-size:12px}
body[data-fm-project="rf-filters"] select:hover,
body[data-fm-project="rf-filters"] input[type=text]:hover,
body[data-fm-project="rf-filters"] input[type=number]:hover{border-color:var(--fm-rule-strong)}
body[data-fm-project="rf-filters"] select:focus,
body[data-fm-project="rf-filters"] input[type=text]:focus,
body[data-fm-project="rf-filters"] input[type=number]:focus{border-color:var(--fm-amber-line);box-shadow:0 0 0 2px var(--fm-amber-soft)}
body[data-fm-project="rf-filters"] input[type=range]::-webkit-slider-runnable-track{
  height:4px;background:var(--fm-sunk);border:1px solid var(--fm-rule);border-radius:999px;
}
body[data-fm-project="rf-filters"] input[type=range]::-webkit-slider-thumb{
  width:12px;height:12px;margin-top:-5px;border-radius:50%;
  background:var(--fm-ink);border:2px solid var(--fm-bg);
}
body[data-fm-project="rf-filters"] input[type=range]:hover::-webkit-slider-thumb{background:var(--fm-amber)}
body[data-fm-project="rf-filters"] input[type=range]::-moz-range-track{height:4px;background:var(--fm-sunk);border:1px solid var(--fm-rule);border-radius:999px}
body[data-fm-project="rf-filters"] input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--fm-ink);border:2px solid var(--fm-bg)}

/* ---------- buttons ---------- */
body[data-fm-project="rf-filters"] .btn{
  min-height:var(--fm-h-ctl);
  padding:0 12px;
  background:var(--fm-panel-2);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
  font:500 12.5px/1.2 var(--fm-sans);
  letter-spacing:0;
  text-transform:none;
  color:var(--fm-ink);
}
body[data-fm-project="rf-filters"] .btn:hover{background:var(--fm-panel-2);border-color:var(--fm-rule-strong)}
body[data-fm-project="rf-filters"] .btn.on{
  background:var(--fm-amber-soft);
  border-color:var(--fm-amber-line);
  color:var(--fm-amber);
  box-shadow:none;
}
body[data-fm-project="rf-filters"] .btn.sm{min-height:24px;padding:0 9px;font-size:12px}
body[data-fm-project="rf-filters"] .btn.icon{min-height:22px;padding:0 6px;font-family:var(--fm-mono);font-size:11px}

/* ---------- chain rail ---------- */
body[data-fm-project="rf-filters"] .rail-col{background:var(--fm-panel);border-right:1px solid var(--fm-rule)}
body[data-fm-project="rf-filters"] .rail-head,
body[data-fm-project="rf-filters"] .panel-head{
  min-height:44px;
  background:var(--fm-panel-2);
  border-bottom:1px solid var(--fm-rule);
}
body[data-fm-project="rf-filters"] .rail-head{padding:8px 14px}
body[data-fm-project="rf-filters"] .panel-head{padding:6px 12px}
body[data-fm-project="rf-filters"] .rail-head h2,
body[data-fm-project="rf-filters"] .panel-head h2{
  font:600 13px/1.3 var(--fm-sans);
  letter-spacing:0;
  text-transform:none;
  color:var(--fm-ink);
}
body[data-fm-project="rf-filters"] .rail-head .count{font-family:var(--fm-mono);font-size:10.5px;color:var(--fm-dim)}
body[data-fm-project="rf-filters"] .stage::before{background:var(--fm-panel)}
body[data-fm-project="rf-filters"] .card{
  background:var(--fm-panel-2);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-panel);
}
body[data-fm-project="rf-filters"] .card:hover{border-color:var(--fm-rule-strong)}
body[data-fm-project="rf-filters"] .card.open{box-shadow:var(--fm-shadow)}
body[data-fm-project="rf-filters"] .card-head{padding:7px 9px}
body[data-fm-project="rf-filters"] .card-head .kind{
  font:600 12.5px/1.3 var(--fm-sans);
  letter-spacing:0;
  text-transform:none;
}
body[data-fm-project="rf-filters"] .card-head .tag{font-family:var(--fm-mono);font-size:10px;color:var(--fm-muted)}
body[data-fm-project="rf-filters"] .card-head .idx{border-color:var(--fm-rule);border-radius:4px;font-family:var(--fm-mono);color:var(--fm-dim)}
body[data-fm-project="rf-filters"] .spark{border-top-color:var(--fm-rule)}
body[data-fm-project="rf-filters"] .card-body{border-top-color:var(--fm-rule)}
body[data-fm-project="rf-filters"] .note{font-family:var(--fm-mono);color:var(--fm-dim)}
body[data-fm-project="rf-filters"] .add-zone select{height:var(--fm-h-ctl);font:400 12.5px var(--fm-sans)}

/* ---------- instrument panels ---------- */
body[data-fm-project="rf-filters"] .panel{background:var(--fm-panel);border-bottom:1px solid var(--fm-rule)}
body[data-fm-project="rf-filters"] .screen-wrap{
  border-radius:0;
  box-shadow:inset 0 0 0 1px var(--fm-rule);
}
body[data-fm-project="rf-filters"] .ctl-bar,
body[data-fm-project="rf-filters"] .summary{
  background:var(--fm-panel);
  border-top:1px solid var(--fm-rule);
}
body[data-fm-project="rf-filters"] .summary{background:var(--fm-panel-2);border-top:0;border-bottom:1px solid var(--fm-rule);font-family:var(--fm-mono)}
body[data-fm-project="rf-filters"] .ctl .val{font-family:var(--fm-mono);font-size:11px;color:var(--fm-ink)}
body[data-fm-project="rf-filters"] .hint{font-family:var(--fm-mono);color:var(--fm-dim)}

/* Pane tabs → identity tabs: muted text, active = ink + amber underline. */
body[data-fm-project="rf-filters"] .tabs{gap:2px;align-self:stretch;align-items:stretch;margin-bottom:-7px}
body[data-fm-project="rf-filters"] .tab,
body[data-fm-project="rf-filters"] .tab:last-child{
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:4px 10px 6px;
  font:500 13px/1.2 var(--fm-sans);
  letter-spacing:0;
  text-transform:none;
  color:var(--fm-muted);
}
body[data-fm-project="rf-filters"] .tab:hover{color:var(--fm-ink)}
body[data-fm-project="rf-filters"] .tab.on{background:none;box-shadow:none;color:var(--fm-ink);border-bottom-color:var(--fm-amber)}

/* Trace toggles → identity chips (border colour stays the trace colour). */
body[data-fm-project="rf-filters"] .chip{
  padding:3px 10px 3px 8px;
  border-radius:999px;
  font:500 10.5px/1.3 var(--fm-mono);
  letter-spacing:.02em;
  text-transform:none;
  background:var(--fm-panel);
  color:var(--fm-muted);
}
body[data-fm-project="rf-filters"] .chip:hover{background:var(--fm-panel-2);color:var(--fm-ink)}

/* ---------- measurement bar ---------- */
body[data-fm-project="rf-filters"] .meas{background:var(--fm-sunk);border-top:1px solid var(--fm-rule)}
body[data-fm-project="rf-filters"] .mcard{
  border-right:1px solid var(--fm-rule);
  border-radius:0;
  background:transparent;
  padding:7px 12px;
}
body[data-fm-project="rf-filters"] .mcard .mh b{font:600 12px/1.3 var(--fm-sans);letter-spacing:0;text-transform:none}
body[data-fm-project="rf-filters"] .mgrid{font-family:var(--fm-mono)}
body[data-fm-project="rf-filters"] .mgrid i{color:var(--fm-dim)}

/* ---------- self-test ---------- */
body[data-fm-project="rf-filters"] .tests{font-family:var(--fm-mono)}
body[data-fm-project="rf-filters"] .tests th{border-bottom-color:var(--fm-rule)}
body[data-fm-project="rf-filters"] .tests td{border-bottom-color:var(--fm-rule)}
body[data-fm-project="rf-filters"] .badge{border-radius:999px;font-family:var(--fm-mono);box-shadow:none}
body[data-fm-project="rf-filters"] .badge.pass{background:rgba(155,213,180,.12);border-color:rgba(155,213,180,.4)}
body[data-fm-project="rf-filters"] .badge.fail{background:rgba(227,130,111,.13);border-color:rgba(227,130,111,.45)}

/* The preset picker is a <select> built by the script; its intrinsic width
   follows the longest preset name and pushed past the rail. */
body[data-fm-project="rf-filters"] .rail-head select{max-width:160px;height:28px;padding:0 8px;font:400 12px var(--fm-sans)}
body[data-fm-project="rf-filters"] .rail-head .count{white-space:nowrap}

/* Phones: stop wide rail content from widening the single column. */
@media (max-width:1000px){
  body[data-fm-project="rf-filters"] .app{grid-template-columns:minmax(0,1fr)}
}