/* ferronato.me labs identity — Quantum Mechanics Lab.
   The page's canvas code reads its colours from :root (readTheme()), so the
   identity values are set on :root as well as used by the chrome below.
   The phase colour wheel is generated in JS and is left alone. */

:root:has(> body[data-fm-project="quantum"]){
  --paper:var(--fm-bg);--plate:var(--fm-panel);--ink:var(--fm-ink);--muted:var(--fm-muted);
  --faint:var(--fm-rule);--grid:#303436;--accent:var(--fm-amber);--pot:#52575A;--detector:#0B0E10;
  --t1:var(--fm-d1);--t2:var(--fm-d2);--t3:var(--fm-d3);
  --serif:var(--fm-serif);--sans:var(--fm-sans);
  color-scheme:dark;
}

body[data-fm-project="quantum"]{
  background:var(--fm-bg);
  font:400 16.5px/1.6 var(--fm-sans);
}

/* ---------- hero ---------- */
body[data-fm-project="quantum"] .hero h1{font-weight:400;letter-spacing:-.025em}
body[data-fm-project="quantum"] .hero .tag{font-family:var(--fm-sans);color:var(--fm-muted)}
body[data-fm-project="quantum"] .hero figcaption{font:400 13px/1.5 var(--fm-sans);color:var(--fm-dim)}

/* ---------- experiment tabs: muted, active = ink + amber underline ---------- */
body[data-fm-project="quantum"] .toc{
  padding-top:0;padding-bottom:0;
  background:linear-gradient(180deg,var(--fm-panel),var(--fm-bg));
  border-top:1px solid var(--fm-rule);
  border-bottom:1px solid var(--fm-rule);
}
body[data-fm-project="quantum"] .toc ol{gap:2px}
body[data-fm-project="quantum"] .toc a{
  gap:8px;
  padding:15px 12px 13px;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--fm-muted);
  font:500 13px/1.2 var(--fm-sans);
}
body[data-fm-project="quantum"] .toc a .n{font:500 11px/1 var(--fm-mono);color:var(--fm-dim)}
body[data-fm-project="quantum"] .toc a:hover{color:var(--fm-ink);border-color:transparent;border-bottom-color:var(--fm-rule-strong)}
body[data-fm-project="quantum"] .toc a.on,
body[data-fm-project="quantum"] .toc a[aria-selected="true"]{
  color:var(--fm-ink);
  background:transparent;
  border-color:transparent;
  border-bottom-color:var(--fm-amber);
}
body[data-fm-project="quantum"] .toc a.on .n,
body[data-fm-project="quantum"] .toc a[aria-selected="true"] .n{color:var(--fm-amber)}

/* ---------- section text ---------- */
body[data-fm-project="quantum"] .preface p{color:var(--fm-muted)}
body[data-fm-project="quantum"] .preface strong{color:var(--fm-ink);font-weight:600}
body[data-fm-project="quantum"] h2{font-weight:400}
body[data-fm-project="quantum"] .num{font-family:var(--fm-serif);color:var(--fm-amber)}
body[data-fm-project="quantum"] .lede{color:var(--fm-muted)}
body[data-fm-project="quantum"] .notes{font-size:15.5px;line-height:1.62;color:var(--fm-ink)}
body[data-fm-project="quantum"] .notes .eq{font-family:var(--fm-serif)}
body[data-fm-project="quantum"] .notes .fine{font:400 13px/1.55 var(--fm-sans);color:var(--fm-dim)}

/* ---------- plates (panels) ---------- */
body[data-fm-project="quantum"] .plate{
  background:var(--fm-panel);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-panel);
  box-shadow:var(--fm-shadow);
}
body[data-fm-project="quantum"] .lab{font:600 12.5px/1.3 var(--fm-sans);color:var(--fm-ink)}
body[data-fm-project="quantum"] .hint{font:400 12.5px/1.45 var(--fm-sans);color:var(--fm-dim)}

/* readouts: label = mono kicker, value = mono */
body[data-fm-project="quantum"] .ro dt{font:500 10.5px/1.2 var(--fm-mono);letter-spacing:.06em;color:var(--fm-dim)}
body[data-fm-project="quantum"] .ro dd{font:500 17px/1.2 var(--fm-mono);color:var(--fm-ink)}

/* sliders */
body[data-fm-project="quantum"] .ctl label{font:400 12.5px/1.3 var(--fm-sans);color:var(--fm-muted)}
body[data-fm-project="quantum"] .ctl output{font-family:var(--fm-mono);font-weight:500;color:var(--fm-ink)}

/* ---------- buttons ---------- */
body[data-fm-project="quantum"] .seg{
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
  background:var(--fm-panel);
}
body[data-fm-project="quantum"] .seg button{
  min-height:var(--fm-h-ctl);
  padding:0 12px;
  border-right:1px solid var(--fm-rule);
  color:var(--fm-muted);
  font:500 12.5px/1 var(--fm-sans);
}
body[data-fm-project="quantum"] .seg button:hover:not([aria-pressed="true"]){color:var(--fm-ink);background:var(--fm-panel-2)}
body[data-fm-project="quantum"] .seg button[aria-pressed="true"]{
  background:var(--fm-amber-soft);
  color:var(--fm-amber);
  box-shadow:inset 0 0 0 1px var(--fm-amber-line);
}
body[data-fm-project="quantum"] .btn{
  min-height:var(--fm-h-ctl);
  padding:0 12px;
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
  background:var(--fm-panel);
  color:var(--fm-ink);
  font:500 12.5px/1 var(--fm-sans);
}
body[data-fm-project="quantum"] .btn:hover{border-color:var(--fm-rule-strong);background:var(--fm-panel-2)}
body[data-fm-project="quantum"] .btn.go{
  background:var(--fm-amber);
  border-color:var(--fm-amber);
  color:var(--fm-amber-ink);
  font-weight:600;
}
body[data-fm-project="quantum"] .btn.go:hover{filter:none;background:#F5C36F;border-color:#F5C36F}

body[data-fm-project="quantum"] footer{font:400 13px/1.5 var(--fm-sans);color:var(--fm-dim)}

@media (max-width:640px){
  body[data-fm-project="quantum"]{font-size:16px}
  body[data-fm-project="quantum"] .toc a{padding:13px 10px 11px}
}