/* ============================================================================
   NexoraMFG design system, applied.

   Every value below is the design system's own, copied from its tokens.json
   (`test/fixtures/nexoramfg-tokens.json` holds that file; a test compares this
   stylesheet against it and fails when the two drift apart). Nothing here is
   approximated and nothing is invented: a colour this application needs and
   the system does not define would be a gap to take back to the system, not a
   hex to choose here.

   The system's BOM-tree, row-hover and engine-status tokens are deliberately
   absent — this application has no such surfaces, and a token nothing paints
   is a promise the stylesheet cannot keep. The same test lists them, so an
   omission stays a decision rather than an oversight.

   Fonts are SERVED FROM THIS APPLICATION, not from a font CDN. The system
   specifies Archivo and IBM Plex; Actuator_Calc runs offline on a factory VPS,
   so the woff2 files ship in public/fonts (latin subset, SIL Open Font License
   1.1, licences beside them). Nothing is fetched from the network.
   ========================================================================== */

@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/archivo-800.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plex-sans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plex-sans-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plex-sans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/plex-sans-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plex-mono-600.woff2) format('woff2')}

:root{
  /* ---- colour ---- */
  --bg:#eef2f7;
  --card:#ffffff;
  --line:#e3e9f1;
  --line2:#eef2f8;
  --ink:#18283a;
  --ink2:#3b4d62;
  --muted:#65768a;
  --faint:#8a99ab;
  --accent:#1657d0;
  --accentd:#1148a8;
  --accent2:#39b6ed;
  --on-accent:#ffffff;
  --ember:#e1572b;
  --emberbg:#fdeee8;
  --ok:#1a8f4d;
  --okbg:#e9f7ef;
  --warn:#9a6700;
  --warnbg:#fdf6e3;
  --err:#c23a2a;
  --errbg:#fdeceb;
  --info-border:#cdddf7;
  --info-bg:#f2f7ff;
  --adv-warn-border:#e7d8a8;
  --adv-warn-bg:#fbf3da;
  --adv-err-border:#f0b9b1;
  --adv-err-bg:#fde8e8;
  --danger:#b42318;
  --warn-strong:#8a5a00;
  --pill-bg:#e8f0fb;
  --chip-on-bg:#eef4ff;
  --code-bg:#eef2f8;
  --banner-bg:#f4f8fd;
  --editor-bg:#f8fafc;
  --row-err:#fdecec;
  --row-warn:#fff6e6;
  --row-err-rule:#d9534f;
  --row-warn-rule:#e0a106;
  --chip-neutral-bg:#eef2f7;
  --chip-neutral-ink:#333344;
  --chip-ok-bg:#dcefe7;
  --chip-ok-ink:#1a7f37;
  --chip-warn-bg:#fdf1dc;
  --chip-bad-bg:#fbe4e2;

  /* ---- spacing ---- */
  --space-chip:4px;
  --space-row4:8px;
  --space-field:10px;
  --space-card:16px;
  --space-card-x:18px;
  --space-page-x:20px;

  /* ---- radius ---- */
  --radius-code:4px;
  --radius-input:6px;
  --radius-button-sm:7px;
  --radius-advisory:8px;
  --radius-button:9px;
  --radius-node:10px;
  --radius-card:12px;
  --radius-pill:20px;

  /* ---- depth ---- */
  --shadow-card:0 1px 2px rgba(20,40,70,.05), 0 10px 30px -16px rgba(20,40,70,.16);
  --shadow-button:0 6px 16px -10px #1657d0;
  --shadow-button-hover:0 10px 22px -10px #1657d0;
  --shadow-tab-active:0 6px 16px -8px #1657d0;
  --shadow-tabbar:0 2px 6px -4px rgba(20,40,70,.25);
  --shadow-float:0 10px 26px -14px rgba(20,40,70,.35);
  --shadow-node:4px 4px 0 #1657d0;

  /* ---- type ---- */
  --font-display:'Archivo',system-ui,'Segoe UI',sans-serif;
  --font-ui:'IBM Plex Sans',system-ui,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  /* ---- the names the studio's own rules use ---- */
  --grad:linear-gradient(100deg,#1657d0,#39b6ed);
  --r:var(--radius-card);
  --shadow:var(--shadow-card);
  --pillbg:var(--pill-bg);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:14px/1.5 var(--font-ui);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased}
[hidden]{display:none !important}

h1,h2,h3,h4,.tab{font-family:var(--font-display);letter-spacing:-.01em}

/* ---------- header ---------- */
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:12px 20px;
  display:flex;align-items:center;gap:16px 26px;flex-wrap:wrap}
.brand{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);
  margin-right:auto;display:flex;align-items:center;gap:10px}
.brand-logo{height:30px;width:auto}
.brand-logo-missing{height:30px;line-height:30px;padding:0 10px;border:1px dashed var(--line);
  color:var(--faint);font-size:11px;font-family:var(--font-ui);font-weight:500}
.who{font-size:12.5px;color:var(--muted)}
.who b{color:var(--ink2);font-weight:600}
.rev{display:inline-block;background:var(--pillbg);color:var(--accent);border-radius:20px;
  padding:1px 9px;font-size:11px;font-weight:600;font-family:var(--font-mono)}
.rev.pre{background:var(--chip-warn-bg);color:var(--warn)}

/* ---------- tabs ---------- */
.tabs{background:var(--card);border-bottom:1px solid var(--line);padding:9px 16px;
  position:sticky;top:0;z-index:9;box-shadow:var(--shadow-tabbar);
  display:flex;flex-wrap:wrap;gap:var(--space-chip)}
.tabs button{padding:6px 15px;cursor:pointer;font-weight:700;font-size:13px;
  color:var(--muted);border:0;border-bottom:2.5px solid transparent;background:transparent;
  border-radius:0;font-family:var(--font-display);box-shadow:none}
.tabs button:hover{color:var(--accent);transform:none}
.tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}

.wrap{max-width:1240px;margin:0 auto;padding:18px 20px 80px}
.lede{color:var(--muted);font-size:13px;margin:0 0 16px;max-width:64ch}

/* ---------- cards ---------- */
.panel,.typecard,.unit{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:var(--space-card) var(--space-card-x);
  margin-bottom:var(--space-card);box-shadow:var(--shadow-card)}
.panel h2,.typecard h2{font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--accentd);margin:0 0 12px;border-bottom:1px solid var(--line);
  padding-bottom:9px}
h3{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  margin:12px 0 6px;font-weight:700}
h1{font-size:20px;margin:0 0 6px;color:var(--ink)}

/* ---------- buttons ---------- */
button.action{font-family:var(--font-display);font-weight:600;font-size:13.5px;
  border:1px solid transparent;background:var(--grad);color:var(--on-accent);padding:8px 15px;
  border-radius:var(--radius-button);cursor:pointer;box-shadow:var(--shadow-button);
  transition:transform .12s ease,box-shadow .12s ease}
button.action:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:var(--shadow-button-hover)}
button.action:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.action:focus-visible{outline:2px solid var(--accentd);outline-offset:2px}
button.ghost{background:var(--card);color:var(--accent);border-color:var(--line);box-shadow:none}
button.ghost:hover:not(:disabled){border-color:var(--accent);transform:none}
button.tiny,button.sm{padding:4px 9px;font-size:12px;border-radius:var(--radius-button-sm);
  box-shadow:none}
button.danger{background:var(--card);color:var(--err);border-color:var(--line);box-shadow:none}
button.danger:hover:not(:disabled){border-color:var(--err);transform:none}
.btnrow,.btns{display:flex;gap:var(--space-row4);flex-wrap:wrap;margin-top:var(--space-field)}

/* Segmented control, built from the studio's pill treatment. */
.seg{display:flex;gap:var(--space-chip);flex-wrap:wrap}
.seg button{flex:0 1 auto;text-align:center;padding:8px 13px;cursor:pointer;
  color:var(--accent);font-weight:600;font-size:12.5px;white-space:nowrap;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-button);font-family:var(--font-display);
  box-shadow:none;transition:border-color .12s ease}
.seg button:hover{border-color:var(--accent)}
.seg button[aria-pressed=true]{background:var(--grad);color:var(--on-accent);
  border-color:transparent;box-shadow:var(--shadow-tab-active)}

/* ---------- forms ---------- */
label{display:block;font-size:12px;color:var(--muted);margin:8px 0 2px}
input,select,textarea{width:100%;padding:7px 8px;border:1px solid var(--line);
  border-radius:var(--radius-input);font:inherit;background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{line-height:1.6;resize:vertical;min-height:150px;font-family:var(--font-mono);
  font-size:12.5px}
.field{margin-bottom:var(--space-field)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-field)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-field)}
@media(max-width:760px){.grid4{grid-template-columns:1fr 1fr}}
.cols{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.sticky{position:sticky;top:64px}
@media(max-width:900px){.sticky{position:static}}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{text-align:left;padding:5px 7px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600}
td.num,th.num{text-align:right}
/* The roll-up total: separated from the rows above it by weight and a rule, so
   a printed summary does not read as one more line item. */
tfoot td{border-top:2px solid var(--line);border-bottom:none;color:var(--ink)}
tr.tot td{background:var(--line2)}
tbody tr.chosen td{background:var(--chip-on-bg)}
tbody tr.dead td{color:var(--faint)}
.scroll,.tablescroll{overflow-x:auto}

/* ---------- status ---------- */
.msg{padding:9px 12px;border-radius:var(--radius-input);font-size:13px;margin-bottom:14px;
  border:1px solid var(--info-border);background:var(--info-bg);color:var(--ink2)}
.msg.warn{background:var(--adv-warn-bg);border-color:var(--adv-warn-border);color:var(--warn)}
.msg.bad{background:var(--adv-err-bg);border-color:var(--adv-err-border);color:var(--danger)}
.msg.ok{background:var(--okbg);border-color:var(--chip-ok-bg);color:var(--ok)}
.warn{color:var(--warn);font-weight:600;font-size:12.5px}
.note{font-size:12px;color:var(--muted);margin:6px 0 0}
.badge{display:inline-block;font-size:11.5px;padding:3px 9px;border-radius:14px;
  border:1px solid transparent;background:var(--chip-neutral-bg);color:var(--chip-neutral-ink);
  font-weight:600;line-height:1.3}
.badge-active{color:var(--chip-ok-ink);background:var(--chip-ok-bg)}
.badge-draft{color:var(--chip-neutral-ink);background:var(--chip-neutral-bg)}
.badge-inactive{color:var(--warn);background:var(--chip-warn-bg)}
.badge-voided{color:var(--danger);background:var(--chip-bad-bg)}
.pill{display:inline-block;background:var(--pill-bg);color:var(--accent);
  border-radius:var(--radius-pill);
  padding:1px 9px;font-size:11px;font-weight:600;font-family:var(--font-mono)}

/* ---------- results ---------- */
.summary{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;margin-bottom:14px;
  font-size:12.5px;color:var(--muted)}
.summary b{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-size:15px;
  display:block}
.unit{padding:0;overflow:hidden}
.unit-head{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;
  padding:13px 16px;cursor:pointer;text-align:left;width:100%;background:none;border:0;
  font:inherit;box-shadow:none;color:inherit}
.unit-head:hover{background:var(--line2);transform:none}
.unit-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:620px){
  .unit-head{grid-template-columns:76px 1fr;gap:12px}
  .pick{grid-column:1/-1;text-align:left;border-top:1px solid var(--line);padding-top:10px}
}
.ref{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)}
.dims{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.pick{text-align:right;font-size:12.5px}
.pick .big{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--accentd);
  display:block}
.pick .sub{color:var(--muted);font-size:12px}
.detail{border-top:1px solid var(--line);padding:4px 16px 14px}
svg.grid{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-advisory)}
.empty{border:1px dashed var(--line);border-radius:var(--radius-card);padding:34px 20px;
  text-align:center;color:var(--muted);font-size:13.5px;background:var(--card)}
.assume{border-left:3px solid var(--accent2);background:var(--banner-bg);
  border-radius:var(--radius-node);padding:10px 14px;margin:22px 0 0;
  font-size:12.5px;color:var(--ink2)}
.assume p{margin:5px 0}
code{font-family:var(--font-mono);font-size:12px;background:var(--code-bg);color:var(--ink2);
  padding:1px 5px;border-radius:var(--radius-code)}

/* ---------- sign in ---------- */
.login{max-width:360px;margin:11vh auto 0;padding:0 20px}
.login h1{font-size:19px}
.build{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);margin:0}

/* ---- engineering rules: folded cards, copy, workbook import ---- */
.ruletools{align-items:center;margin:4px 0 10px}
.ruletools input[type=search]{width:auto;min-width:220px;flex:0 1 260px}
.rulegroup{margin:0 0 12px}
.rulegroup>summary,.rulecard>summary{cursor:pointer;list-style:revert;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-button);background:var(--card)}
.rulegroup>summary{background:var(--line2);font-weight:600}
.rulegroup[open]>summary{margin-bottom:8px}
.rulecard{margin:0 0 8px 14px}
.rulecard[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.rulecard>.typecard{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.rulekey{font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.rulemeta{font-size:12px;color:var(--muted)}
.rulewarn{font-size:12px;color:var(--warn);font-weight:600}
.copybar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0 0 12px;
  padding:0 0 12px;border-bottom:1px dashed var(--line)}
.copybar .field{margin:0;min-width:240px}
.applyto{border:1px solid var(--line);border-radius:var(--radius-advisory);padding:10px 12px;
  margin:0 0 12px;background:var(--editor-bg)}
.applyto .checks{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0}
.applyto .checks label{font-family:var(--font-mono);font-size:12px;display:flex;gap:6px;align-items:center}
.applyto .checks input{width:auto}
.tiny-select{width:auto;max-width:260px;padding:3px 6px;font-size:12px}
.tznote{color:var(--muted);font-size:12px}
.rowmuted td{opacity:.62}
.badge-inactive{background:var(--chip-warn-bg);color:var(--warn)}
.changes summary{cursor:pointer;color:var(--accentd);font-size:12px}
.changes ul{margin:6px 0 0 16px;padding:0;font-size:12px;color:var(--ink2)}
.changes li{margin:2px 0}
@media (max-width:640px){.rulecard{margin-left:0}.ruletools input[type=search]{min-width:0;flex:1 1 100%}}

/* ---------- dashboard (rc.27): existing tokens only, no new colour ---------- */
.dash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:var(--space-card)}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:12px 14px;box-shadow:var(--shadow-card);border-left:4px solid var(--line)}
.tile.ok{border-left-color:var(--ok)}
.tile.warn{border-left-color:var(--warn)}
.tile.bad{border-left-color:var(--danger)}
.tile .k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tile .v{font-family:var(--font-display);font-size:19px;font-weight:700;margin:4px 0 2px;color:var(--ink)}
.attn{list-style:none;margin:0;padding:0}
.attn li{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius-input);
  padding:9px 12px;margin:0 0 8px;background:var(--card)}
.attn li.act{border-left-color:var(--danger)}
.attn li.watch{border-left-color:var(--warn)}
.attn .t{font-weight:600;color:var(--ink);font-size:13.5px}
.attn .d{font-size:12.5px;color:var(--ink2);margin-top:3px}
.attn .m{font-size:11.5px;color:var(--muted);margin:4px 0 6px}
.meter{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:4px;max-width:160px}
.meter>span{display:block;height:100%;background:var(--ok)}

/* ---------- dashboard activity (rc.28): existing tokens only ---------- */
.dash-period{display:flex;gap:var(--space-chip);flex-wrap:wrap;margin:0 0 12px}
.dash-period button{padding:7px 12px;cursor:pointer;color:var(--accent);font-weight:600;font-size:12.5px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-button);font-family:var(--font-display)}
.dash-period button:hover{border-color:var(--accent)}
.dash-period button[aria-pressed=true]{background:var(--grad);color:var(--on-accent);border-color:transparent}
.tile.kpi .v{font-family:var(--font-ui);font-weight:600;font-size:24px}
.dash-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:4px 0 8px}
.dash-charts.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.chart{margin:0;min-width:0}
.chart figcaption{font-size:12.5px;font-weight:600;color:var(--ink2);margin:0 0 6px}
.colchart{width:100%;height:auto;display:block}
.colchart .bar{fill:var(--accent)}
.colchart .grid{stroke:var(--line);stroke-width:1}
.colchart .axis{stroke:var(--line2);stroke-width:1}
.colchart .tick{fill:var(--muted);font-size:10.5px;font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.colchart .hit{fill:transparent;cursor:default;outline:none}
.colchart .hit:hover,.colchart .hit:focus{fill:var(--line);fill-opacity:.45}
.hbars{display:grid;gap:6px}
.hrow{display:grid;grid-template-columns:minmax(70px,38%) 1fr auto;align-items:center;gap:8px;
  font-size:12.5px;padding:2px 0;border-radius:var(--radius-input);outline:none}
.hrow:hover,.hrow:focus{background:var(--bg)}
.hl{color:var(--ink2);overflow-wrap:anywhere}
.htrack{display:block;height:14px}
.hbar{display:block;height:14px;min-width:2px;background:var(--accent);border-radius:0 4px 4px 0}
.hv{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.tableview{margin:6px 0 0;font-size:12px}
.tableview summary{cursor:pointer;color:var(--accentd)}
.tableview table{margin-top:6px}
.dash-tip{position:absolute;z-index:40;transform:translate(-50%,-100%);pointer-events:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-input);
  box-shadow:var(--shadow-float);padding:6px 10px;font-size:12px;color:var(--ink2);white-space:nowrap}
.dash-tip strong{display:block;color:var(--ink);font-size:14px}

/* ---------- performance charts (line curves) ---------- */
.perfcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:4px 0}
.linechart{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-advisory)}
.linechart .grid{stroke:var(--line2);stroke-width:1}
.linechart .axis{stroke:var(--line);stroke-width:1}
.linechart .curve{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.linechart .curve2{fill:none;stroke:var(--accent2);stroke-width:2;stroke-dasharray:5 3;stroke-linejoin:round}
.linechart .pt{fill:var(--ember);stroke:#fff;stroke-width:1.5}
.linechart .tick{fill:var(--muted);font-size:9px;font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.linechart .axttl{fill:var(--muted);font-size:9.5px;font-family:var(--font-ui)}
.chart-legend{font-size:11px;color:var(--muted);margin:2px 0 0}
.chart-legend .k{display:inline-block;width:16px;height:0;border-top:2px solid var(--accent);vertical-align:middle;margin-right:4px}
.chart-legend .k2{border-top:2px dashed var(--accent2)}
.engprev{margin-top:8px}