/* Timing·Lab → ferronato.me labs identity (see ../portfolio-shell.css).
   Loaded last. Tokens are set on :root as well as body because the canvas
   code reads them from document.documentElement. Semantics kept:
   clock = amber, data = blue, ok = mint, violation = coral, alt path = violet.
   Canvas text keeps Archivo: the font is hard-coded in the script. */

:root,
body[data-fm-project="fpga-timing"]{
  --paper:var(--fm-bg);
  --panel:var(--fm-panel);
  --plot:var(--fm-sunk);
  --ink:var(--fm-ink);
  --muted:var(--fm-muted);
  --faint:var(--fm-dim);
  --rule:var(--fm-rule);
  --grid:#2C3033;
  --data:var(--fm-d2);
  --clk:var(--fm-d1);
  --bad:var(--fm-bad);
  --ok:var(--fm-ok);
  --alt:var(--fm-d5);
  --sans:var(--fm-sans);
  --mono:var(--fm-mono);
}

body[data-fm-project="fpga-timing"]{font-family:var(--fm-sans);color:var(--fm-ink)}
body[data-fm-project="fpga-timing"] :focus-visible{outline-color:var(--fm-amber)}

/* ---------- masthead ---------- */
body[data-fm-project="fpga-timing"] .lede{color:var(--fm-muted)}
body[data-fm-project="fpga-timing"] .hero-wave{border-top:1px solid var(--fm-rule-strong)}

/* ---------- section tabs ---------- */
body[data-fm-project="fpga-timing"] .topic-nav{
  background:linear-gradient(180deg,rgba(32,35,38,.94),rgba(25,27,29,.94));
  border-bottom:1px solid var(--fm-rule);
}
body[data-fm-project="fpga-timing"] .navlinks a{
  font-family:var(--fm-sans);font-size:13px;font-weight:500;
  color:var(--fm-muted);border-radius:0;border-bottom-width:2px;
}
body[data-fm-project="fpga-timing"] .navlinks a:hover{color:var(--fm-ink);background:none}
body[data-fm-project="fpga-timing"] .navlinks a.on{color:var(--fm-ink);background:none;border-bottom-color:var(--fm-amber)}

/* ---------- section heads ---------- */
body[data-fm-project="fpga-timing"] .sec-n{
  font-family:var(--fm-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fm-amber);
}
body[data-fm-project="fpga-timing"] .sec-n .ti{width:16px;height:16px}
body[data-fm-project="fpga-timing"] .sec-head p{color:var(--fm-muted)}
body[data-fm-project="fpga-timing"] h3,
body[data-fm-project="fpga-timing"] .scope-h h3,
body[data-fm-project="fpga-timing"] .rail h3,
body[data-fm-project="fpga-timing"] .full h3,
body[data-fm-project="fpga-timing"] .schem-cap h3{font-family:var(--fm-sans);font-weight:600;font-stretch:100%}
body[data-fm-project="fpga-timing"] .summary h3{
  font-family:var(--fm-serif);font-weight:400;font-stretch:100%;font-size:24px;letter-spacing:-.01em;
  border-bottom:1px solid var(--fm-rule-strong);
}
body[data-fm-project="fpga-timing"] .pager{border-top:1px solid var(--fm-rule-strong)}
body[data-fm-project="fpga-timing"] .pager span{font-family:var(--fm-serif);font-weight:400;font-stretch:100%}
body[data-fm-project="fpga-timing"] .pager small{font-family:var(--fm-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fm-dim)}

/* ---------- panels, plots, readouts ---------- */
body[data-fm-project="fpga-timing"] .rail{
  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="fpga-timing"] canvas,
body[data-fm-project="fpga-timing"] .schem-wrap{border-radius:var(--fm-r-panel);border-color:var(--fm-rule)}
body[data-fm-project="fpga-timing"] .readouts{border-top:1px solid var(--fm-rule-strong)}
body[data-fm-project="fpga-timing"] .m-l,
body[data-fm-project="fpga-timing"] .cg-l,
body[data-fm-project="fpga-timing"] .presets .lbl{
  font-family:var(--fm-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fm-dim);
}
body[data-fm-project="fpga-timing"] .m-v{font-family:var(--fm-mono);font-weight:500;font-stretch:100%;font-size:24px;letter-spacing:-.02em}
body[data-fm-project="fpga-timing"] .rail .m-v{font-size:20px}
body[data-fm-project="fpga-timing"] #cEffect .m-v{font-size:19px}
body[data-fm-project="fpga-timing"] .aside,
body[data-fm-project="fpga-timing"] .note{color:var(--fm-dim)}
body[data-fm-project="fpga-timing"] .eq,
body[data-fm-project="fpga-timing"] pre.code{background:var(--fm-sunk);border-color:var(--fm-rule);border-radius:var(--fm-r-ctl)}
body[data-fm-project="fpga-timing"] .callout{border-left-width:2px;border-radius:0 var(--fm-r-ctl) var(--fm-r-ctl) 0}

/* ---------- controls ---------- */
body[data-fm-project="fpga-timing"] .control label,
body[data-fm-project="fpga-timing"] .chk{font-size:13px;font-weight:500;color:var(--fm-muted)}
body[data-fm-project="fpga-timing"] .val{font-family:var(--fm-mono);font-weight:500;font-size:12.5px}
body[data-fm-project="fpga-timing"] .chk input{accent-color:var(--fm-amber)}
body[data-fm-project="fpga-timing"] select,
body[data-fm-project="fpga-timing"] .cfilter input{
  min-height:var(--fm-h-ctl);background:var(--fm-sunk);border:1px solid var(--fm-rule);border-radius:var(--fm-r-ctl);
  font-size:13px;padding:5px 10px;color:var(--fm-ink);
}
body[data-fm-project="fpga-timing"] .cfilter input:focus-visible{outline-color:var(--fm-amber)}
body[data-fm-project="fpga-timing"] .btn{
  min-height:var(--fm-h-ctl);padding:5px 12px;
  font-family:var(--fm-sans);font-size:12.5px;font-weight:500;
  background:var(--fm-panel-2);border:1px solid var(--fm-rule);border-radius:var(--fm-r-ctl);color:var(--fm-ink);
}
body[data-fm-project="fpga-timing"] .btn:hover{border-color:var(--fm-rule-strong)}
body[data-fm-project="fpga-timing"] .btn.active{background:var(--fm-amber-soft);color:var(--fm-amber);border-color:var(--fm-amber-line)}
body[data-fm-project="fpga-timing"] .btn.ghost{background:none;border-color:transparent;color:var(--fm-muted)}
body[data-fm-project="fpga-timing"] .btn.ghost:hover{color:var(--fm-ink);border-color:var(--fm-rule)}
body[data-fm-project="fpga-timing"] .btn.mono{font-family:var(--fm-mono);font-size:12px}
body[data-fm-project="fpga-timing"] .copy{font-family:var(--fm-sans);font-weight:500;background:var(--fm-panel-2);border-color:var(--fm-rule);border-radius:var(--fm-r-ctl)}

/* ---------- chips / pills ---------- */
body[data-fm-project="fpga-timing"] .chip{font-family:var(--fm-mono);font-size:11px;font-weight:500;border:1px solid color-mix(in srgb,currentColor 40%,transparent);background:transparent}
body[data-fm-project="fpga-timing"] .pill{font-family:var(--fm-mono);font-size:11px;font-weight:500;border-color:var(--fm-rule)}

/* ---------- tables + footer ---------- */
body[data-fm-project="fpga-timing"] .tbl th{
  font-family:var(--fm-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fm-dim);
  border-bottom:1px solid var(--fm-rule-strong);
}
body[data-fm-project="fpga-timing"] .tbl td{border-bottom-color:var(--fm-rule)}
body[data-fm-project="fpga-timing"] .summary dt{font-weight:600}
body[data-fm-project="fpga-timing"] .summary dd{color:var(--fm-muted)}
body[data-fm-project="fpga-timing"] footer{color:var(--fm-dim)}