/* Smith·Lab → ferronato.me labs identity.
   Loaded last. Chrome only: the chart, wave and knob colours are drawn by
   the script (hard-coded Smith-chart conventions: red = impedance,
   cyan = admittance, lime = trace) and are left untouched here. */

body[data-fm-project="smith-charts"]{
  --sans:var(--fm-sans);
  --mono:var(--fm-mono);
  --bg:var(--fm-bg);--bg2:var(--fm-sunk);
  --panel:var(--fm-panel);--panel2:var(--fm-panel-2);
  --line:var(--fm-rule);--line2:var(--fm-rule-strong);
  --ink:var(--fm-ink);--ink2:var(--fm-muted);--ink3:var(--fm-dim);
  --mark:var(--fm-amber);
  --good:var(--fm-ok);--bad:var(--fm-bad);
  font-size:14.5px;
}

/* ---------- global inputs toolbar + status strip (under the tab strip) ---------- */
body[data-fm-project="smith-charts"] .fm-globals .globals{gap:12px 16px}
body[data-fm-project="smith-charts"] .field.sm input{--w:76px}
body[data-fm-project="smith-charts"] .field.wide input,
body[data-fm-project="smith-charts"] .field.wide select{--w:160px}

/* ---------- fields ---------- */
body[data-fm-project="smith-charts"] .field{gap:4px}
body[data-fm-project="smith-charts"] .field label,
body[data-fm-project="smith-charts"] .cap,
body[data-fm-project="smith-charts"] .readout .k,
body[data-fm-project="smith-charts"] .statusbar .k,
body[data-fm-project="smith-charts"] table.tbl th,
body[data-fm-project="smith-charts"] .grp td{
  font-family:var(--fm-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fm-dim);
}
body[data-fm-project="smith-charts"] .field input,
body[data-fm-project="smith-charts"] .field select,
body[data-fm-project="smith-charts"] .el input{
  background:var(--fm-sunk);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
  color:var(--fm-ink);
}
body[data-fm-project="smith-charts"] .field input,
body[data-fm-project="smith-charts"] .field select{height:var(--fm-h-ctl);padding:0 9px;font-size:12.5px}
body[data-fm-project="smith-charts"] .field input:hover,
body[data-fm-project="smith-charts"] .field select:hover,
body[data-fm-project="smith-charts"] .el input:hover{border-color:var(--fm-rule-strong)}
body[data-fm-project="smith-charts"] .field input:focus,
body[data-fm-project="smith-charts"] .field select:focus,
body[data-fm-project="smith-charts"] .el input:focus{border-color:var(--fm-amber-line)}

/* ---------- status strip ---------- */
body[data-fm-project="smith-charts"] .statusbar{background:transparent;border-bottom:0}
body[data-fm-project="smith-charts"] .statusbar .s{border-right-color:var(--fm-rule);padding:7px 14px 7px 0;margin-right:14px}
body[data-fm-project="smith-charts"] .statusbar .s:last-child{border-right:0;margin-right:0}
body[data-fm-project="smith-charts"] .statusbar .k{font-size:9.5px}
body[data-fm-project="smith-charts"] .statusbar .v{font-family:var(--fm-mono);color:var(--fm-ink)}

/* ---------- panels ---------- */
body[data-fm-project="smith-charts"] .card,
body[data-fm-project="smith-charts"] .chartwrap,
body[data-fm-project="smith-charts"] details.learn{
  background:var(--fm-panel);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-panel);
}
body[data-fm-project="smith-charts"] .card > h2{
  padding:10px 13px;
  background:var(--fm-panel-2);
  border-bottom:1px solid var(--fm-rule);
  font:600 13px/1.3 var(--fm-sans);
  letter-spacing:0;
  text-transform:none;
  color:var(--fm-ink);
}
body[data-fm-project="smith-charts"] .cap b{font-family:var(--fm-mono);color:var(--fm-muted)}
body[data-fm-project="smith-charts"] .readout{background:var(--fm-rule)}
body[data-fm-project="smith-charts"] .readout div{background:var(--fm-panel)}
body[data-fm-project="smith-charts"] .readout .k{font-size:10px}
body[data-fm-project="smith-charts"] .readout .v{font-family:var(--fm-mono)}
body[data-fm-project="smith-charts"] .hint{color:var(--fm-dim);font-size:12.5px}
body[data-fm-project="smith-charts"] .interp,
body[data-fm-project="smith-charts"] .why{
  background:var(--fm-panel);
  border-color:var(--fm-rule);
  border-radius:var(--fm-r-panel);
  color:var(--fm-muted);
}
body[data-fm-project="smith-charts"] .interp{border-left-color:var(--fm-amber)}
body[data-fm-project="smith-charts"] .knobs{border-color:var(--fm-rule);background:var(--fm-rule);border-radius:var(--fm-r-panel)}
body[data-fm-project="smith-charts"] .knob{background:var(--fm-panel)}
body[data-fm-project="smith-charts"] .knob.act{background:var(--fm-panel-2)}
body[data-fm-project="smith-charts"] .knob .kn{font:600 14px/1.3 var(--fm-sans)}
body[data-fm-project="smith-charts"] .knob output{font-family:var(--fm-mono)}
body[data-fm-project="smith-charts"] .legend{color:var(--fm-muted)}
body[data-fm-project="smith-charts"] table.tbl{font-family:var(--fm-mono)}
body[data-fm-project="smith-charts"] table.tbl th,
body[data-fm-project="smith-charts"] table.tbl td{border-bottom-color:var(--fm-rule)}
body[data-fm-project="smith-charts"] .grp td{background:var(--fm-panel-2)}

/* ---------- network cascade ---------- */
body[data-fm-project="smith-charts"] .el{
  background:var(--fm-sunk);
  border-color:var(--fm-rule);
  border-radius:var(--fm-r-ctl);
}
body[data-fm-project="smith-charts"] .el.hot{border-color:var(--fm-amber-line);background:var(--fm-amber-soft)}
body[data-fm-project="smith-charts"] .el .nm{font-family:var(--fm-sans)}
body[data-fm-project="smith-charts"] .empty{border-color:var(--fm-rule-strong);border-radius:var(--fm-r-ctl);color:var(--fm-dim)}

/* ---------- buttons, segmented control, chips ---------- */
body[data-fm-project="smith-charts"] .btn,
body[data-fm-project="smith-charts"] .seg button{
  min-height:var(--fm-h-ctl);
  font:500 12.5px/1.2 var(--fm-sans);
}
body[data-fm-project="smith-charts"] .btn{
  padding:0 12px;
  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="smith-charts"] .btn:hover{border-color:var(--fm-rule-strong);color:var(--fm-ink)}
body[data-fm-project="smith-charts"] .btn.primary{
  background:var(--fm-amber);border-color:var(--fm-amber);color:var(--fm-amber-ink);font-weight:600;
}
body[data-fm-project="smith-charts"] .btn.primary:hover{filter:brightness(1.06);color:var(--fm-amber-ink)}
body[data-fm-project="smith-charts"] .btn.ghost{background:transparent}
body[data-fm-project="smith-charts"] .btn.tiny{min-height:24px;padding:0 8px;font-size:12px}
body[data-fm-project="smith-charts"] .seg{border-color:var(--fm-rule);border-radius:var(--fm-r-ctl);background:var(--fm-panel-2)}
body[data-fm-project="smith-charts"] .seg button{padding:0 13px;color:var(--fm-muted)}
body[data-fm-project="smith-charts"] .seg button:hover{color:var(--fm-ink)}
body[data-fm-project="smith-charts"] .seg button + button{border-left-color:var(--fm-rule)}
body[data-fm-project="smith-charts"] .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="smith-charts"] .chip{
  padding:4px 11px;
  background:var(--fm-panel-2);
  border-color:var(--fm-rule);
  font:500 11px/1.3 var(--fm-mono);
  color:var(--fm-muted);
}
body[data-fm-project="smith-charts"] .chip:hover{border-color:var(--fm-amber-line);color:var(--fm-ink)}
body[data-fm-project="smith-charts"] .chip.z{border-left-color:var(--z)}
body[data-fm-project="smith-charts"] .chip.y{border-left-color:var(--y)}
body[data-fm-project="smith-charts"] .chip.t{border-left-color:var(--trace)}
body[data-fm-project="smith-charts"] label.check{font-size:13px;color:var(--fm-muted)}
body[data-fm-project="smith-charts"] .pill{font-family:var(--fm-mono);border-radius:999px;padding:1px 8px}
body[data-fm-project="smith-charts"] .pill.pass{background:rgba(155,213,180,.13)}
body[data-fm-project="smith-charts"] .pill.fail{background:rgba(227,130,111,.15)}

/* ---------- learn ---------- */
body[data-fm-project="smith-charts"] details.learn > summary{font:600 14.5px/1.35 var(--fm-sans);color:var(--fm-ink)}
body[data-fm-project="smith-charts"] details.learn > summary::before{color:var(--fm-amber)}
body[data-fm-project="smith-charts"] details.learn .body{color:var(--fm-muted)}

body[data-fm-project="smith-charts"] footer.foot{border-top-color:var(--fm-rule);color:var(--fm-dim)}

/* Phones: a three-column field grid instead of a row wider than the screen. */
@media (max-width:600px){
  body[data-fm-project="smith-charts"] .fm-globals .globals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
  body[data-fm-project="smith-charts"] .fm-globals .field.wide{grid-column:span 3}
  body[data-fm-project="smith-charts"] .statusbar .s{max-width:100%;padding:5px 10px 5px 0;margin-right:10px}
  body[data-fm-project="smith-charts"] .field input,
  body[data-fm-project="smith-charts"] .field select{width:100%;min-width:0}
  body[data-fm-project="smith-charts"] .cap{flex-wrap:wrap}
  body[data-fm-project="smith-charts"] .cap b{white-space:normal}
  body[data-fm-project="smith-charts"] main{width:calc(100% - 28px);padding-top:12px}
}

/* Panel captions: keep the kicker on one line inside the 1200px shell column. */
body[data-fm-project="smith-charts"] .cap{flex-wrap:wrap;row-gap:4px}
body[data-fm-project="smith-charts"] .cap>span{white-space:nowrap}
body[data-fm-project="smith-charts"] .cap b{white-space:normal;text-align:right}