/* ferronato.me labs identity — EM Field Lab.
   Maps static/style.css chrome onto the shared tokens in ../portfolio-shell.css.
   Canvas/WebGL drawing and the charge colours (--pos/--neg) are data and stay. */

body[data-fm-project="em-fields"]{
  --sans:var(--fm-sans);
  --mono:var(--fm-mono);
  --line:var(--fm-rule);
  --line-strong:var(--fm-rule-strong);
  /* tokens the later "flux/probes" block expects but the page never defined */
  --rule:var(--fm-rule);
  --dim:var(--fm-dim);
  background:var(--fm-bg);
  font-family:var(--fm-sans);
}

/* ---------- shell: hero + transport strip ----------
   The brand lives in the shared hero; the old .topbar is gone. The sticky
   .fm-tabs strip carries the live readouts (left) and Step / Reset / Play
   (right) because this lab is a single instrument with no views. */
body[data-fm-project="em-fields"]{--em-strip-h:46px}
body[data-fm-project="em-fields"] .fm-lede i,
body[data-fm-project="em-fields"] .fm-hero-key i:not([style]),
body[data-fm-project="em-fields"] figcaption i{font-style:italic;font-family:var(--fm-serif);font-size:1.08em}
/* the <i>c</i> in the legend is text, not a swatch */
body[data-fm-project="em-fields"] .fm-hero-key i:not([style]){display:inline;width:auto;height:auto;background:none;border-radius:0}
body[data-fm-project="em-fields"] .fm-hero-cv{background:var(--fm-sunk);border-radius:var(--fm-r-panel)}

body[data-fm-project="em-fields"] .em-transport .fm-wrap{min-height:var(--em-strip-h);padding:8px 0;gap:6px}
body[data-fm-project="em-fields"] .em-transport .fm-tablist{gap:6px;padding:2px 0}
body[data-fm-project="em-fields"] .em-transport .fm-chip{min-width:84px;justify-content:center}
body[data-fm-project="em-fields"] .em-transport .fm-tab-readout{padding-left:10px}
body[data-fm-project="em-fields"] .em-transport button.fm-chip{
  min-height:26px;
  padding:0 12px;
  border:1px solid var(--fm-rule);
  border-radius:999px;
  background:var(--fm-panel);
  color:var(--fm-ink);
  font:500 12px/1 var(--fm-sans);
  min-width:0;
}
body[data-fm-project="em-fields"] .em-transport button.fm-chip:hover{border-color:var(--fm-rule-strong);background:var(--fm-panel-2)}
body[data-fm-project="em-fields"] .em-transport button.fm-chip.primary{
  min-width:72px;
  background:var(--fm-amber);
  border-color:var(--fm-amber);
  color:var(--fm-amber-ink);
  font-weight:600;
}
body[data-fm-project="em-fields"] .em-transport button.fm-chip.primary:hover{background:var(--fm-amber-hi);border-color:var(--fm-amber-hi)}
body[data-fm-project="em-fields"] .em-transport button.fm-chip.primary.running{
  background:var(--fm-amber-soft);
  border-color:var(--fm-amber-line);
  color:var(--fm-amber);
}
/* the error banner sits under the sticky strip */
body[data-fm-project="em-fields"] .banner{margin:12px auto 0;width:min(1200px,calc(100% - 40px))}
/* side panels stay sticky, now below the strip instead of the viewport top */
body[data-fm-project="em-fields"] .workspace{padding-top:14px}
body[data-fm-project="em-fields"] .panel{top:calc(var(--em-strip-h) + 10px);max-height:calc(100vh - var(--em-strip-h) - 20px)}

/* ---------- buttons ---------- */
body[data-fm-project="em-fields"] button{
  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="em-fields"] button:hover{border-color:var(--fm-rule-strong);background:var(--fm-panel-2)}
body[data-fm-project="em-fields"] button.primary{
  background:var(--fm-amber);
  border-color:var(--fm-amber);
  color:var(--fm-amber-ink);
  font-weight:600;
}
body[data-fm-project="em-fields"] button.primary:hover{background:#F5C36F;border-color:#F5C36F}
body[data-fm-project="em-fields"] button.primary.running{
  background:var(--fm-amber-soft);
  border-color:var(--fm-amber-line);
  color:var(--fm-amber);
}
body[data-fm-project="em-fields"] button.armed{background:var(--fm-amber-soft);border-color:var(--fm-amber-line);color:var(--fm-amber)}
body[data-fm-project="em-fields"] button.danger{color:var(--fm-bad);border-color:rgba(227,130,111,.4)}
/* charge-sign tints match the canvas charge colours */
body[data-fm-project="em-fields"] button.tint-pos{border-color:rgba(255,122,98,.45)}
body[data-fm-project="em-fields"] button.tint-neg{border-color:rgba(90,169,255,.45)}
body[data-fm-project="em-fields"] button.icon{min-height:26px;padding:0 8px}
body[data-fm-project="em-fields"] button:focus-visible,
body[data-fm-project="em-fields"] input:focus-visible,
body[data-fm-project="em-fields"] select:focus-visible,
body[data-fm-project="em-fields"] summary:focus-visible{outline:2px solid var(--fm-amber);outline-offset:2px}

/* ---------- chips ---------- */
body[data-fm-project="em-fields"] .chip{
  min-height:24px;
  padding:0 9px;
  border:1px solid var(--fm-rule);
  border-radius:999px;
  color:var(--fm-muted);
  font:500 11px/1 var(--fm-mono);
}

/* ---------- inputs ---------- */
body[data-fm-project="em-fields"] select,
body[data-fm-project="em-fields"] input[type="number"]{
  min-height:var(--fm-h-ctl);
  background:var(--fm-sunk);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
  color:var(--fm-ink);
  font:400 12.5px/1.2 var(--fm-mono);
}
body[data-fm-project="em-fields"] select:hover,
body[data-fm-project="em-fields"] input[type="number"]:hover{border-color:var(--fm-rule-strong)}
body[data-fm-project="em-fields"] input[type="range"],
body[data-fm-project="em-fields"] input[type="checkbox"]{accent-color:var(--fm-amber)}

/* ---------- panels ---------- */
body[data-fm-project="em-fields"] .panel,
body[data-fm-project="em-fields"] .stage-card{
  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="em-fields"] .block{border-bottom-color:var(--fm-rule)}
body[data-fm-project="em-fields"] .block h2{
  font:500 10.5px/1.2 var(--fm-mono);
  letter-spacing:.12em;
  color:var(--fm-dim);
}
body[data-fm-project="em-fields"] .field > span,
body[data-fm-project="em-fields"] .slider > span,
body[data-fm-project="em-fields"] .check{color:var(--fm-muted);font-size:12px}
body[data-fm-project="em-fields"] .slider em{font-family:var(--fm-mono);color:var(--fm-ink);font-size:11.5px}
body[data-fm-project="em-fields"] .blurb{
  color:var(--fm-muted);
  border-left-color:var(--fm-amber-line);
  font-size:12.5px;
}
body[data-fm-project="em-fields"] .note,
body[data-fm-project="em-fields"] .empty,
body[data-fm-project="em-fields"] .fineprint{color:var(--fm-dim)}
body[data-fm-project="em-fields"] .note strong{color:var(--fm-ink)}
body[data-fm-project="em-fields"] summary{color:var(--fm-amber);font-size:12px}
body[data-fm-project="em-fields"] .eq{color:var(--fm-ink)}
body[data-fm-project="em-fields"] .eq.small{color:var(--fm-muted)}

/* ---------- stage ---------- */
body[data-fm-project="em-fields"] .stage-toolbar{
  background:var(--fm-panel-2);
  border-bottom-color:var(--fm-rule);
}
/* view modes → tabs: muted, active = amber */
body[data-fm-project="em-fields"] .modes{
  background:var(--fm-sunk);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
}
body[data-fm-project="em-fields"] .modes button{
  min-height:26px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  color:var(--fm-muted);
  font:500 12px/1 var(--fm-mono);
}
body[data-fm-project="em-fields"] .modes button:hover{background:transparent;color:var(--fm-ink)}
body[data-fm-project="em-fields"] .modes button.active{
  background:var(--fm-amber-soft);
  border-color:var(--fm-amber-line);
  color:var(--fm-amber);
  box-shadow:none;
}
body[data-fm-project="em-fields"] .legend{
  background:var(--fm-panel-2);
  border-bottom-color:var(--fm-rule);
  color:var(--fm-muted);
  font-size:12px;
}
body[data-fm-project="em-fields"] .stage-controls{border-bottom-color:var(--fm-rule)}

/* ---------- readouts ---------- */
body[data-fm-project="em-fields"] .readouts{background:var(--fm-rule)}
body[data-fm-project="em-fields"] .readouts article{background:var(--fm-panel)}
body[data-fm-project="em-fields"] .readouts span{
  font:500 10.5px/1.2 var(--fm-mono);
  letter-spacing:.12em;
  color:var(--fm-dim);
}
body[data-fm-project="em-fields"] .readouts strong{font-family:var(--fm-mono);color:var(--fm-ink)}
body[data-fm-project="em-fields"] .status{color:var(--fm-dim);border-top-color:var(--fm-rule)}
body[data-fm-project="em-fields"] .vitals > div{border-top-color:var(--fm-rule)}
body[data-fm-project="em-fields"] .vitals dt,
body[data-fm-project="em-fields"] .readout-list dt{color:var(--fm-dim)}
/* --ink is this page's background colour, so the readout values need ink explicitly */
body[data-fm-project="em-fields"] .readout-list dd{color:var(--fm-ink);font-family:var(--fm-mono)}
body[data-fm-project="em-fields"] .badge{font-family:var(--fm-mono)}
body[data-fm-project="em-fields"] .tooltip{
  background:var(--fm-panel);
  border-color:var(--fm-rule-strong);
  border-radius:var(--fm-r-ctl);
  color:var(--fm-ink);
}
body[data-fm-project="em-fields"] .chart,
body[data-fm-project="em-fields"] .polar{
  background:var(--fm-sunk);
  border-color:var(--fm-rule);
  border-radius:var(--fm-r-ctl);
}
body[data-fm-project="em-fields"] .polar{border-radius:50%}
body[data-fm-project="em-fields"] .chart-legend{color:var(--fm-muted)}
body[data-fm-project="em-fields"] .banner{
  border-color:var(--fm-amber-line);
  border-radius:var(--fm-r-ctl);
  background:var(--fm-amber-soft);
  color:var(--fm-ink);
}

@media (max-width:640px){
  body[data-fm-project="em-fields"] .em-transport .fm-chip{min-width:0}
  body[data-fm-project="em-fields"] .em-transport .fm-tab-actions{padding-left:8px}
  body[data-fm-project="em-fields"] .em-transport button.fm-chip{padding:0 9px}
  body[data-fm-project="em-fields"] .modes button{padding:0 7px;font-size:11px}
}