/* =============================================================
   PolyNC design tokens.
   Paletteed variables + typography + keyframes shared across
   Overview, Config and the editor. Everything the mockup spec
   called out as --var lives here. Component-local styles pull
   these via var() so we have one place to tweak.
   ============================================================= */

/* =============================================================
   Theme tokens. Dark is the default (on :root) so any page that
   loads before theme-setup JS fires still paints correctly. Light
   overrides apply when `body` gets the `theme-light` class. That
   class is toggled by MainLayout's theme button + persisted in
   localStorage under `polync-theme`.
   ============================================================= */
:root {
    /* Semantic — same across themes */
    --accent:    #227393;
    --accent-2:  #2a8cb2;
    --ok:        #6bbf85;
    --warn:      #e0b25f;
    --fault:     #e07a5f;
    --burnt:     #B3470C;

    /* Dark surfaces (default) */
    --bg0:       #0f1114;
    --bg1:       #15181c;
    --bg2:       #1c2026;
    --bg3:       #242931;
    --line:      rgba(255,255,255,0.07);
    --line-2:    rgba(255,255,255,0.14);
    --text:      #e8ecef;
    --text-dim:  #9aa5ad;
    --text-faint:#5a6670;
    --grid:      rgba(122,176,200,0.07);
    --panel:     rgba(255,255,255,0.025);
    --panel-2:   rgba(0,0,0,0.3);
    --shadow:    0 20px 60px rgba(0,0,0,0.45);
    --body-bg:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(43,58,72,0.9) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(34,115,147,0.08) 0%, transparent 50%),
        #0f1114;
}

/* Light theme override. Tokens from the Concept B tape-out README.
   Semantic colours stay — accent stays teal, burnt stays burnt etc.
   Only surfaces, text, lines and shadow flip. MudBlazor's
   IsDarkMode flips independently via PaletteLight in MainLayout. */
body.theme-light {
    --bg0:       #f3f1ec;
    --bg1:       #ffffff;
    --bg2:       #f8f6f1;
    --bg3:       #edeae3;
    --line:      rgba(0,0,0,0.09);
    --line-2:    rgba(0,0,0,0.18);
    --text:      #1a1c1f;
    --text-dim:  #5a6670;
    --text-faint:#9aa5ad;
    --grid:      rgba(34,115,147,0.10);
    --panel:     rgba(255,255,255,0.7);
    --panel-2:   rgba(255,255,255,0.85);
    --shadow:    0 12px 40px rgba(15,20,30,0.08);
    --body-bg:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(34,115,147,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(179,71,12,0.04) 0%, transparent 50%),
        #f3f1ec;
}

/* MudBlazor popovers in light theme need the light surface, otherwise
   dropdowns stay dark and clash with the rest of the page. */
body.theme-light .mud-popover,
body.theme-light .mud-popover-open,
body.theme-light .mud-list,
body.theme-light .mud-menu-list,
body.theme-light .mud-select-popover-list {
    background-color: var(--bg1) !important;
    background: var(--bg1) !important;
    color: var(--text) !important;
    border: 1px solid var(--line);
}
body.theme-light .mud-input-root,
body.theme-light .mud-input-root input,
body.theme-light .mud-input-root textarea,
body.theme-light .mud-select-root {
    color: var(--text) !important;
}
body.theme-light .mud-theme-provider {
    --mud-palette-surface: var(--bg1) !important;
}
/* MudDialog's own surface — needs to track theme so the Monaco editor
   and other dialogs don't stay dark on a light page. */
body.theme-light .mud-dialog {
    background-color: var(--bg1) !important;
    color: var(--text) !important;
}
body.theme-light .mud-dialog .mud-dialog-title,
body.theme-light .mud-dialog-content,
body.theme-light .mud-dialog-actions {
    background-color: var(--bg1) !important;
    color: var(--text) !important;
}

/* --- Font stack -------------------------------------------- */
body, html, #app, .mud-typography {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
}

.pnc-mono { font-family: 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; }
.pnc-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }

html, body, #app {
    background: var(--body-bg) !important;
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--text);
    margin: 0;
}

/* Scrollbar refinement */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   Top bar (MainLayout)
   ============================================================ */
.pnc-shell { display:flex; flex-direction:column; min-height:100vh; }

.pnc-topbar {
    display:flex; align-items:center; gap:16px;
    height:52px; padding: 0 20px;
    border-bottom:1px solid var(--line);
    background: var(--bg1);
    position:sticky; top:0; z-index:20;
}

/* Logo is now an <img> of favicon.svg — the gradient + white "P"
   lives in the SVG, so styling here is just size + glow so the mark
   matches the browser tab icon 1:1. */
.pnc-logo {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: block;
    box-shadow: 0 0 16px rgba(34,115,147,0.4);
}
.pnc-wordmark { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; color:var(--text); letter-spacing:0.01em; }

.pnc-conn-row { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-dim); }
.pnc-conn-row .pnc-chip {
    font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
    padding:2px 8px; border-radius:4px; background: var(--bg3); border: 1px solid var(--line);
}
.pnc-demo-pill {
    font-size:10px; letter-spacing:0.12em; font-weight:700;
    color: var(--burnt); border:1px solid var(--burnt);
    border-radius:4px; padding:2px 10px;
}
.pnc-ok-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow: 0 0 6px var(--ok); }
.pnc-fault-dot { width:8px; height:8px; border-radius:50%; background:var(--fault); box-shadow: 0 0 6px var(--fault); }

.pnc-tabs {
    display:flex; gap:4px; padding:4px;
    border-radius:10px; background: var(--panel); border: 1px solid var(--line);
}
.pnc-tab {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 16px; border-radius:7px;
    color:var(--text-dim); font-size:13px; font-weight:500;
    background:transparent; border:none; cursor:pointer;
    transition: all 180ms ease;
    text-decoration:none;
}
.pnc-tab:hover { color:var(--text); }
.pnc-tab.active {
    background: var(--accent); color:#fff;
    box-shadow: 0 4px 14px rgba(34,115,147,0.4);
}

.pnc-clock { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim); }

.pnc-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 120ms ease;
    font-size: 14px;
}
.pnc-theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pnc-kin-pill {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:8px;
    background: var(--panel); border:1px solid var(--line);
    font-size:12px; color:var(--text-dim);
    cursor:pointer; transition: all 120ms ease;
}
.pnc-kin-pill:hover { background: rgba(34,115,147,0.08); border-color: var(--accent); }
.pnc-kin-pill .pnc-kin-icon { color: var(--accent); }
.pnc-kin-pill .pnc-kin-value { color: var(--accent-2); font-weight:600; }

.pnc-flex { flex:1 1 auto; }

/* ============================================================
   Generic card primitive
   ============================================================ */
.pnc-card {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display:flex; flex-direction:column; gap: 12px;
}
.pnc-card-header {
    display:flex; align-items:center; gap:10px;
    font-size:14px; font-weight:600; color:var(--text);
}
.pnc-card-header .pnc-card-meta { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-faint); }
.pnc-card-header i { color: var(--accent); }

/* ============================================================
   Overview grid
   ============================================================ */
.pnc-overview {
    display:grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto 1fr auto;
    column-gap:16px; row-gap:14px;
    padding: 18px;
    box-sizing:border-box;
    min-height: calc(100vh - 52px);
}
.pnc-over-progress { grid-column: 1 / -1; }
.pnc-over-fault    { grid-column: 1 / -1; }
.pnc-over-toolpath { grid-column: 1; grid-row: 3; }
.pnc-over-side     { grid-column: 2; grid-row: 3; display:flex; flex-direction:column; gap:14px; min-width:0; }
.pnc-over-console  { grid-column: 1 / -1; }

/* ---- Progress rail ---- */
.pnc-progress-rail {
    background: var(--panel-2); border:1px solid var(--line); border-radius:14px;
    padding: 16px 20px;
    display:flex; flex-direction:column; gap:10px;
}
.pnc-progress-head { display:flex; align-items:center; gap:12px; }
.pnc-progress-head .pnc-file-name { font-size:15px; font-weight:600; color:var(--text); }
.pnc-progress-head .pnc-line-counter { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); }
.pnc-progress-head .pnc-file-link { color:var(--accent); cursor:pointer; font-size:12px; text-decoration:none; }
.pnc-progress-head .pnc-file-link:hover { text-decoration:underline; }
.pnc-progress-pct {
    font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:600;
    margin-left:auto; min-width:96px; text-align:right; color:var(--text);
}
.pnc-folder-btn {
    width:38px; height:38px; border-radius:10px;
    background: var(--panel); border:1px solid var(--line);
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--accent); cursor:pointer; font-size:16px;
    transition: all 120ms ease;
}
.pnc-folder-btn:hover { background: rgba(34,115,147,0.12); border-color: var(--accent); }

.pnc-progress-bar { position:relative; height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.pnc-progress-fill {
    height:100%; border-radius:4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 12px var(--accent);
    transition: width 400ms ease;
    position:relative;
}
.pnc-progress-fill::after {
    content:''; position:absolute; top:0; right:0; width:2px; height:100%;
    background:#fff; box-shadow: 0 0 8px #fff;
}
.pnc-progress-foot {
    display:flex; gap:18px; font-size:12px; color:var(--text-dim);
}

.pnc-status-pill {
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
}
.pnc-status-dot { width:8px; height:8px; border-radius:50%; }
.pnc-s-running  { color:var(--ok); }
.pnc-s-running .pnc-status-dot { background:var(--ok); animation:pnc-pulse-soft 1.4s ease-in-out infinite; }
.pnc-s-paused   { color:var(--warn); }
.pnc-s-paused .pnc-status-dot { background:var(--warn); }
.pnc-s-idle     { color:var(--text-faint); }
.pnc-s-idle .pnc-status-dot { background:var(--text-faint); }
.pnc-s-loaded   { color:var(--accent); }
.pnc-s-loaded .pnc-status-dot { background:var(--accent); }
.pnc-s-fault    { color:var(--fault); }
.pnc-s-fault .pnc-status-dot { background:var(--fault); animation:pnc-pulse-soft 1.4s ease-in-out infinite; }
.pnc-s-completed { color:var(--ok); }
.pnc-s-completed .pnc-status-dot { background:var(--ok); }

/* ---- Fault strip ---- */
.pnc-fault-strip {
    display:flex; align-items:center; gap:10px;
    padding:8px 14px; border-radius:10px;
    font-size:12px;
}
.pnc-fault-strip.clean {
    background: rgba(107,191,133,0.08);
    border: 1px solid rgba(107,191,133,0.20);
    color: var(--ok);
}
.pnc-fault-strip.fault {
    background: rgba(224,122,95,0.10);
    border: 1px solid rgba(224,122,95,0.35);
    color: var(--fault); font-weight:600;
}
.pnc-fault-strip.fault i { animation: pnc-pulse-soft 1.4s ease-in-out infinite; }

/* Vignette when in fault state */
.pnc-overview.faulted {
    animation: pnc-vignette 2.2s ease-in-out infinite;
}

/* ---- Axis strip ---- */
.pnc-axis-strip {
    display:grid; gap:10px;
}
.pnc-axis-card {
    background: var(--panel); border:1px solid var(--line);
    border-radius:10px; padding: 10px 12px;
    display:flex; flex-direction:column; gap:4px;
    position:relative;
}
.pnc-axis-card.absent { opacity: 0.35; }
.pnc-axis-name { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); }
.pnc-axis-unit { position:absolute; top:10px; right:12px; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint); }
.pnc-axis-val { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:600; line-height:1; color:var(--text); }
.pnc-axis-target { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent); display:flex; align-items:center; gap:4px; }
.pnc-axis-ontarget { font-size:11px; color:var(--text-faint); }

/* ---- Big controls ---- */
.pnc-big-controls {
    display:flex; gap:14px; min-height:120px;
}
.pnc-bc-btn {
    border:1px solid var(--line-2); border-radius:14px;
    display:flex; align-items:center; justify-content:center; gap:14px;
    font-size:22px; font-weight:600; letter-spacing:0.04em;
    cursor:pointer; color:var(--text); transition: all 120ms ease;
    background: var(--panel);
    padding: 0 16px;
}
.pnc-bc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pnc-bc-btn:not(:disabled):active { transform: translateY(1px); }
.pnc-bc-btn i { font-size:28px; }

.pnc-bc-start { flex: 2; }
.pnc-bc-start.running { background: linear-gradient(135deg, rgba(107,191,133,0.18), transparent); color: var(--ok); border-color: rgba(107,191,133,0.35); }
.pnc-bc-start.paused  { background: linear-gradient(135deg, rgba(224,178,95,0.18), transparent);  color: var(--warn); border-color: rgba(224,178,95,0.35); }
.pnc-bc-start.idle    { background: linear-gradient(135deg, rgba(107,191,133,0.14), transparent); color: var(--ok); border-color: rgba(107,191,133,0.28); }

.pnc-bc-stop { flex: 1; flex-direction: column; gap: 4px; font-size: 14px; letter-spacing:0.12em; }
.pnc-bc-stop i { font-size: 22px; }

.pnc-bc-estop {
    flex: 1; flex-direction: column; gap: 4px;
    border: 2px solid var(--fault); color:#fff; font-size: 11px; font-weight:700; letter-spacing:0.2em;
    background: radial-gradient(circle at 50% 40%, rgba(224,122,95,0.45), rgba(224,122,95,0.12));
    box-shadow: 0 0 30px rgba(224,122,95,0.25), inset 0 -4px 12px rgba(0,0,0,0.3);
}
.pnc-bc-estop i { font-size: 22px; }

/* ---- Metric cards ---- */
.pnc-metric-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pnc-metric {
    background: var(--panel); border:1px solid var(--line);
    border-radius:10px; padding: 12px 14px; min-height: 78px;
    display:flex; flex-direction:column; gap: 6px;
}
.pnc-metric-head { display:flex; align-items:center; gap:8px; }
.pnc-metric-head i { font-size:14px; color: var(--accent); }
.pnc-metric.burnt .pnc-metric-head i { color: var(--burnt); }
.pnc-metric.fault .pnc-metric-head i { color: var(--fault); }
.pnc-metric.ok .pnc-metric-head i { color: var(--ok); }
.pnc-metric-label { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dim); }
.pnc-metric-main { font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:600; color: var(--text); line-height: 1; }
.pnc-metric-sub { font-size: 11px; color: var(--text-dim); }
.pnc-metric-wcs-row { display:flex; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-dim); }

/* ---- Overrides ---- */
.pnc-overrides {
    background: var(--panel-2); border:1px solid var(--line);
    border-radius:12px; padding:14px;
    display:flex; flex-direction:column; gap:14px;
}
.pnc-overrides-title { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dim); }
.pnc-override {
    display:grid; grid-template-columns: 24px 1fr 56px; gap: 10px; align-items:center;
}
.pnc-override i.lead { color: inherit; }
.pnc-override.feed    i.lead { color: var(--ok); }
.pnc-override.spindle i.lead { color: var(--accent); }

.pnc-slider {
    position:relative; height:6px; background: var(--bg3); border-radius:3px;
}
.pnc-slider-fill { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background: currentColor; }
.pnc-slider-tick { position:absolute; top:-3px; height:12px; width:2px; background: var(--line-2); }
.pnc-slider input[type=range] {
    position:absolute; inset:-10px 0; width:100%; height:26px;
    opacity: 0; cursor:pointer;
}
.pnc-override-val { font-family:'JetBrains Mono',monospace; font-size:13px; text-align:right; color: var(--text); }

/* ---- Jog launcher ---- */
.pnc-jog-launch {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px; border-radius:12px;
    background: var(--panel); border:1px solid var(--line);
    color: var(--text); cursor:pointer; font-size:13px;
    transition: all 120ms ease;
}
.pnc-jog-launch:hover { background: rgba(34,115,147,0.08); border-color: var(--accent); }
.pnc-jog-launch i { color: var(--accent); font-size:16px; }
.pnc-jog-launch .pnc-step-hint { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-dim); }

/* ---- Jog drawer ---- */
.pnc-jog-drawer {
    position: fixed; top: 52px; right: 0; bottom: 0; width: 0;
    background: var(--bg2); border-left: 1px solid var(--line);
    overflow: hidden; transition: width 280ms cubic-bezier(.2,.8,.2,1);
    z-index: 30;
    display:flex; flex-direction:column;
}
.pnc-jog-drawer.open { width: 320px; padding: 16px; gap:14px; }
.pnc-jog-head { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.pnc-jog-head i { color: var(--accent); }
.pnc-jog-close { margin-left:auto; background: transparent; border:none; color: var(--text-dim); cursor:pointer; font-size:16px; }
.pnc-step-selector { display:flex; gap:6px; }
.pnc-step-btn {
    flex:1; padding:8px 0; border-radius:6px;
    background: transparent; border:1px solid var(--line);
    color: var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:12px;
    cursor:pointer;
}
.pnc-step-btn.active { background: rgba(34,115,147,0.2); border-color: var(--accent); color: var(--accent); }

.pnc-xy-pad {
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap:6px;
    max-width:260px; aspect-ratio:1;
}
.pnc-jog-btn {
    border-radius:10px; min-height:52px; font-size:18px;
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--panel); border:1px solid var(--line);
    color: var(--text); cursor:pointer;
    transition: all 100ms ease;
}
.pnc-jog-btn:hover { background: rgba(34,115,147,0.15); border-color: var(--accent); color: var(--accent); }
.pnc-jog-btn.home { background: rgba(179,71,12,0.12); color: var(--burnt); }
.pnc-jog-btn.blank { visibility: hidden; }
.pnc-za-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.pnc-za-col { display:flex; flex-direction:column; gap:6px; }

.pnc-quick-cmds { display:flex; gap:6px; margin-top:auto; }
.pnc-quick-cmd {
    flex:1; padding:8px 0; border-radius:6px;
    background: var(--panel); border:1px solid var(--line);
    font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-dim);
    cursor:pointer;
}
.pnc-quick-cmd:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Toolpath hero ---- */
.pnc-toolpath-hero {
    background: var(--panel-2); border:1px solid var(--line);
    border-radius:14px; padding:14px;
    display:flex; flex-direction:column; gap:12px;
    min-height: 0;
}
.pnc-toolpath-head { display:flex; align-items:center; gap:10px; }
.pnc-toolpath-head .title { font-size:14px; font-weight:600; }
.pnc-toolpath-head .meta  { font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-faint); }
.pnc-view-pills { margin-left:auto; display:flex; gap:4px; }
.pnc-view-pill {
    padding:4px 10px; border-radius:6px;
    background: transparent; border:1px solid var(--line);
    color: var(--text-dim); font-size:11px; cursor:pointer;
}
.pnc-view-pill.active { background: rgba(34,115,147,0.2); color: var(--accent); border-color: var(--accent); }

.pnc-toolpath-stage {
    /* Cap to 42vh so the axis strip + console at the bottom of the
       Overview page still fit above the fold on a typical 900–1080
       viewport. Grew too tall before — toolpath is cosmetic / position
       indicator, not the main readout. */
    flex:1 1 auto; min-height:200px; max-height:42vh;
    background: var(--bg0); border-radius:10px; border:1px solid var(--line);
    position:relative; overflow:hidden;
}
.pnc-toolpath-stage svg { width:100%; height:100%; display:block; }

/* ---- Console strip ---- */
.pnc-console {
    background: var(--panel-2); border:1px solid var(--line); border-radius:10px;
    padding: 8px 14px;
    display:flex; align-items:center; gap:10px;
    font-size:12px; color: var(--text-dim); min-width:0;
}
.pnc-console i { color: var(--accent); }
.pnc-console .stamp  { font-family:'JetBrains Mono',monospace; color: var(--text-faint); }
.pnc-console .line   { font-family:'JetBrains Mono',monospace; color: var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnc-console .ok     { color: var(--ok); font-family:'JetBrains Mono',monospace; }
.pnc-console .ctx    { color: var(--accent); font-weight:600; }

/* ============================================================
   Config page
   ============================================================ */
.pnc-config {
    max-width: 1400px; margin: 0 auto;
    padding: 18px 20px;
    display:flex; flex-direction:column; gap: 18px;
}
.pnc-config h1 {
    font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:600;
    margin: 0; color: var(--text);
}
.pnc-config .sub { font-size:12px; color: var(--text-dim); margin-top:-8px; }

.pnc-section {
    background: var(--bg1); border:1px solid var(--line);
    border-radius:14px; padding:18px;
    display:flex; flex-direction:column; gap:14px;
}
.pnc-section-head { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.pnc-section-head .meta { margin-left:auto; font-size:12px; color: var(--text-dim); display:flex; gap:10px; align-items:center; }
.pnc-section-head i { color: var(--accent); }

/* Kinematics picker cards */
.pnc-kin-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pnc-kin-card {
    background: var(--panel); border: 1.5px solid var(--line); border-radius: 10px;
    padding: 14px 10px; cursor:pointer; text-align:center;
    transition: all 120ms ease;
    display:flex; flex-direction:column; gap:6px; align-items:stretch;
}
.pnc-kin-card:hover { border-color: var(--line-2); }
.pnc-kin-card.active { background: rgba(34,115,147,0.15); border-color: var(--accent); }
.pnc-kin-card svg { width:100%; height:auto; }
.pnc-kin-card .name { font-size:13px; font-weight:600; color:var(--text); }
.pnc-kin-card.active .name { color: var(--accent); }
.pnc-kin-card .desc { font-size:10px; color: var(--text-faint); }

/* Stepper cards */
.pnc-axis-row {
    background: var(--panel); border:1px solid var(--line); border-radius: 10px;
    padding: 14px; display:flex; flex-direction:column; gap:10px;
}
.pnc-axis-head { display:flex; align-items:center; gap:14px; }
.pnc-axis-head .id { font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; color:var(--accent); min-width:30px; }
.pnc-axis-head .profile-btn {
    padding:6px 12px; border-radius:8px;
    background: var(--bg3); border:1px solid var(--line);
    color: var(--text); cursor:pointer; font-size:12px;
    margin-left: auto;
}
.pnc-axis-head .profile-btn:hover { border-color: var(--accent); color: var(--accent); }

.pnc-motor-row {
    display:grid; grid-template-columns: 40px 80px 1fr auto; gap:10px; align-items:center;
    padding: 6px 0; border-top: 1px solid var(--line);
}
.pnc-motor-row:first-child { border-top: 0; }
.pnc-motor-row .mid { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color: var(--accent); }
.pnc-driver-chip {
    display:inline-flex; align-items:center; justify-content:center;
    padding: 4px 10px; border-radius:7px;
    background: rgba(34,115,147,0.15); color: var(--accent);
    font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;
    cursor:pointer; border:1px solid rgba(34,115,147,0.35);
}
.pnc-invert {
    display:inline-flex; align-items:center; gap:8px;
    background: transparent; border:none; cursor:pointer; font-size:12px;
    color: var(--text-dim);
}
.pnc-invert.inverted { color: var(--burnt); }
.pnc-invert i.flipped { transform: scaleX(-1); }

/* Enable toggle */
.pnc-toggle {
    width:44px; height:24px; border-radius:12px;
    background: var(--bg3); position:relative; cursor:pointer;
    transition: background 180ms ease;
    border:1px solid var(--line);
}
.pnc-toggle .knob {
    position:absolute; top:2px; left:2px;
    width:18px; height:18px; border-radius:50%;
    background: #fff;
    transition: left 180ms ease;
}
.pnc-toggle.on { background: var(--accent); border-color: var(--accent-2); }
.pnc-toggle.on .knob { left: 22px; }
.pnc-toggle.locked { opacity:0.5; cursor:not-allowed; }

/* Chip diagram + registers */
.pnc-regs {
    display:grid; grid-template-columns: 360px 1fr; gap:18px;
    /* align-items: start lets the sticky chip actually stick — with the
       default (stretch) the chip becomes full-height and there's nothing
       to scroll relative to. */
    align-items: start;
}
.pnc-chip {
    /* One sticky card containing the chip diagram + legend pills + diff
       panel. Diff is now inside this frame, so it can never be hidden
       by the floating chip — they scroll together as a unit. Card is
       capped to viewport height with internal scroll if the combined
       content (big chip + many dirty rows) overflows. Opaque --bg1 so
       register rows behind it don't bleed through when pinned. */
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px; display: flex; flex-direction: column; gap: 8px;
    position: sticky;
    top: 68px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    z-index: 2;
    align-self: start;
}
.pnc-chip svg { width:100%; height:auto; display:block; }

/* Hit-zone overlay — transparent buttons sit above the SVG's register-
   group tiles so clicking them filters the register list. The SVG is
   emitted as MarkupString, so it can't take Blazor @onclick bindings
   directly — the overlay works around that. Buttons use percentage
   positioning mapped from the 280 × 560 viewBox so they track the
   diagram correctly at any width. */
.pnc-chip-stage { position: relative; }
.pnc-chip-hit {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.pnc-chip-hit:hover {
    background: rgba(34,115,147,0.10);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* Diff panel — sits under the chip diagram in the left column. Shows
   uncommitted register deltas for the active profile. Styling matches
   the "Unsaved Changes" tapeout:
   - vertical burnt-orange gradient fill
   - count + subtitle + actions all on one head line (so buttons don't
     drift down as more dirty rows accumulate)
   - mono diff rows with strikethrough old value, bolded new value,
     muted delta */
.pnc-diff-panel {
    /* Nested inside .pnc-chip — margin-top creates the separation below
     * the legend pills. Border-radius slightly smaller so the nested
     * card looks inset rather than overlapping the outer rounded frame. */
    margin-top: 8px;
    background: linear-gradient(180deg, rgba(179,71,12,0.16), rgba(179,71,12,0.06));
    border: 1px solid rgba(179,71,12,0.40);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.pnc-diff-head {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.pnc-diff-icon { color: var(--burnt); font-size: 13px; width: 14px; }
.pnc-diff-title { font-size: 13px; font-weight: 600; color: var(--burnt); }
.pnc-diff-sub { font-size: 11px; color: var(--text-dim); }
.pnc-diff-btn-ghost {
    background: transparent; border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 4px 10px; border-radius: 6px;
    cursor: pointer; font-size: 11px;
    transition: all 120ms ease;
}
.pnc-diff-btn-ghost:hover { color: var(--text); border-color: var(--line-2); }

/* Diff rows: mono, wider tracking so hex values read cleanly. The
   grid column set is an adaptation of the tapeout's
   `120px 100px 20px 110px 60px 1fr` — dropped the trailing
   description column so it fits in the 360 px sidebar. */
/* Diff rows never scroll internally — if there are a lot of changes,
   the panel just grows taller and the left column extends past the
   register list. No max-height, no overflow. */
.pnc-diff-rows {
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(179,71,12,0.20);
}
.pnc-diff-row {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) minmax(64px, auto) 14px minmax(64px, auto) auto;
    align-items: baseline; gap: 8px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 13px;
    padding: 4px 0;
}
.pnc-diff-name  { color: var(--accent); font-size: 13px; font-weight: 500; }
.pnc-diff-old   { color: var(--text-faint); text-decoration: line-through; }
.pnc-diff-arrow { color: var(--text-dim); }
.pnc-diff-new   { color: var(--burnt); font-weight: 600; font-size: 14px; }
.pnc-diff-delta { color: var(--text-dim); font-size: 11px; }

/* Commit button in the diff panel — solid burnt, normal-sized. Plain
   <button> instead of MudButton because MudButton's StartIcon was
   blowing up into a massive "upload tower" inside the narrow panel. */
.pnc-diff-btn-commit {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 6px;
    background: var(--burnt);
    border: 1px solid var(--burnt);
    color: #fff;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
}
.pnc-diff-btn-commit:hover:not(:disabled) { filter: brightness(1.08); }
.pnc-diff-btn-commit:disabled { opacity: 0.4; cursor: not-allowed; }
.pnc-diff-btn-commit i { font-size: 12px; }

/* `+ new` tab at the end of the profiles list — dashed outline so it
   reads as "affordance" rather than "a profile you haven't picked". */
.pnc-profile-tab-add {
    border: 1px dashed var(--line-2) !important;
    background: transparent !important;
    color: var(--text-dim) !important;
}
.pnc-profile-tab-add:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: rgba(34,115,147,0.05) !important;
}

/* Add-profile modal body */
.pnc-add-profile-modes { align-self: stretch; margin-bottom: 6px; }
.pnc-add-profile-body { display: flex; flex-direction: column; gap: 12px; }
.pnc-add-profile-body code {
    background: var(--bg3); padding: 1px 4px; border-radius: 3px;
    font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px;
}

.pnc-reg-controls { display:flex; gap:10px; align-items:center; }
.pnc-reg-filter-btn {
    padding:6px 10px; border-radius:6px;
    background: transparent; border:1px solid var(--line);
    color: var(--text-dim); font-size:12px; cursor:pointer;
}
.pnc-reg-filter-btn.active { background: rgba(34,115,147,0.15); color: var(--accent); border-color: var(--accent); }

.pnc-reg-table { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.pnc-reg-row {
    /* Value column bumped from 110 → 170 so "22.6 step/s", "1.0 µs/step",
       "51.2% Vs" etc. have room for the number + unit adornment + spin
       buttons without the MudNumericField wrapping or running the unit
       into the value. Description (1fr) absorbs the extra width hit. */
    display:grid; grid-template-columns: 54px 140px 1fr 170px 110px; gap: 10px;
    padding: 8px 12px; align-items:center;
    border-top:1px solid var(--line);
    font-size:12px; cursor:pointer;
    transition: background 120ms ease;
    position:relative;
}
.pnc-reg-row:first-child { border-top:0; }
.pnc-reg-row:hover { background: rgba(34,115,147,0.06); }
.pnc-reg-row.selected { background: rgba(34,115,147,0.12); }
.pnc-reg-row.dirty { animation: pnc-flash-bg 900ms ease-out; }
.pnc-reg-row.dirty::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--burnt);
}
.pnc-reg-addr { font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-faint); }
.pnc-reg-name { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500; color: var(--accent); }
.pnc-reg-desc { font-size:12px; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnc-reg-input {
    font-family:'JetBrains Mono',monospace; font-size:12px;
    background: var(--bg3); border:1px solid var(--line); border-radius:6px;
    color: var(--text); padding: 6px 10px;
    width: 100%; box-sizing: border-box;
}
.pnc-reg-hex { font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-faint); text-align:right; }

.pnc-diff-panel {
    background: linear-gradient(135deg, rgba(179,71,12,0.18), rgba(179,71,12,0.05));
    border: 1px solid rgba(179,71,12,0.45); border-radius:10px;
    padding: 12px 14px;
    display:flex; align-items:center; gap:10px;
    color: var(--burnt); font-weight:600;
}
.pnc-diff-panel .spacer { flex:1; }
.pnc-diff-btn { padding:6px 12px; border-radius:6px; border:1px solid rgba(179,71,12,0.55); background: transparent; color: var(--burnt); cursor:pointer; font-weight:600; font-size:12px; }
.pnc-diff-btn.primary { background: var(--burnt); color:#fff; border-color: var(--burnt); }

/* Stepper grid (per-axis cards) */
.pnc-stepper-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap:12px; }
.pnc-axis-row .pnc-axis-head { align-items:center; }
.pnc-motor-params {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:8px;
    flex:1 1 auto;
}

/* Slim save banner sitting above the Steppers section — replaces the
   old Kinematics section's top row since kinematics is now a modal. */
.pnc-save-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 18px;
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.pnc-save-hint { color: var(--text-dim); font-size: 12px; flex: 1; }

/* Modal primitives — shared by the kinematics picker and anything
   else we decide to pop over the Config page. */
.pnc-modal-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(5, 8, 12, 0.65);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: pnc-fade-in 180ms ease-out;
}
@keyframes pnc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pnc-modal {
    width: min(760px, 100%);
    max-height: 86vh;
    display: flex; flex-direction: column;
    background: var(--bg2);
    border: 1px solid var(--line-2);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.pnc-modal-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--line);
}
.pnc-modal-head i.fa-cubes-stacked { font-size: 20px; margin-top: 2px; }
.pnc-modal-head .title { font-size: 16px; font-weight: 600; color: var(--text); }
.pnc-modal-head .sub   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pnc-modal-close {
    margin-left: auto;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 16px;
    width: 32px; height: 32px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.pnc-modal-close:hover { background: var(--panel); color: var(--text); }

.pnc-modal-body {
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
}
.pnc-modal-foot {
    display: flex; justify-content: flex-end;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
}
.pnc-modal-warning {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    background: rgba(224, 178, 95, 0.10);
    border: 1px solid rgba(224, 178, 95, 0.30);
    border-radius: 10px;
    color: var(--warn);
    font-size: 12px;
}
.pnc-modal-warning i { margin-top: 2px; }

/* ============================================================
   Backups & snapshots — Config page
   ============================================================ */
.pnc-backup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 14px;
}
.pnc-backup-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
}
.pnc-backup-card.ready { border-color: rgba(107,191,133,0.22); }
.pnc-backup-card.placeholder { border-style: dashed; opacity: 0.75; }

.pnc-backup-card .head {
    display: flex; gap: 12px; align-items: flex-start;
}
.pnc-backup-card .head > i {
    font-size: 22px; color: var(--accent);
    width: 32px; display: inline-flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.pnc-backup-card.placeholder .head > i { color: var(--text-faint); }
.pnc-backup-card .title {
    font-size: 14px; font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.pnc-backup-card .sub {
    font-size: 12px; color: var(--text-dim);
    margin-top: 4px; line-height: 1.5;
}
.pnc-backup-card .actions {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.pnc-backup-card .actions .mud-file-upload { width: auto; min-width: 0; }

.pnc-badge-soon {
    display: inline-block;
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
    padding: 2px 8px; border-radius: 4px;
    background: rgba(179,71,12,0.15);
    color: var(--burnt);
    border: 1px solid rgba(179,71,12,0.35);
}

/* ============================================================
   Kinematic-group board (Config → Steppers)
   ============================================================ */
.pnc-board-section { overflow: hidden; }

/* Add-group palette — four transform icon buttons in the section head */
.pnc-add-group-palette { display: flex; gap: 6px; margin-left: 16px; }
.pnc-add-transform-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 8px;
    background: var(--panel); border: 1px solid var(--line);
    color: var(--text-dim); cursor: pointer;
    font-size: 11px; letter-spacing: 0.04em;
    transition: all 120ms ease;
}
.pnc-add-transform-btn:hover:not(:disabled) {
    border-color: var(--accent); color: var(--accent);
    background: rgba(34,115,147,0.08);
}
.pnc-add-transform-btn.armed {
    border-color: var(--accent); color: var(--accent);
    background: rgba(34,115,147,0.18);
    box-shadow: 0 0 0 1px var(--accent);
}
.pnc-add-transform-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pnc-add-transform-btn svg { width: 16px; height: 16px; }

/* Pending banner — layout-stable slot. Always rendered so the board
   underneath doesn't shift when the banner shows up. Hidden variant
   keeps the box but drops the visual + skips hit-testing. Rule:
   memory/feedback_reserve_layout_space.md — reserve space for all
   transient UI, touchscreens don't forgive layout jumps. */
.pnc-pending-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 10px;
    background: rgba(34,115,147,0.12);
    border: 1px dashed var(--accent);
    color: var(--text); font-size: 13px;
    visibility: hidden;
    pointer-events: none;
    min-height: 44px; /* reserved height — matches the active banner */
    transition: opacity 160ms ease;
    opacity: 0;
}
.pnc-pending-banner.active {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}
.pnc-pending-banner i { color: var(--accent); }
.pnc-pending-banner b.pnc-mono { color: var(--accent); }
.pnc-btn-ghost {
    padding: 6px 12px; border-radius: 6px;
    background: transparent; border: 1px solid var(--line);
    color: var(--text-dim); cursor: pointer; font-size: 12px;
}
.pnc-btn-ghost:hover { border-color: var(--fault); color: var(--fault); }

/* Board — grid of group panels. The 20px faint-line grid background
   gives the "spatial layout" cue from the design tape-out without us
   having to commit to absolute positioning yet. */
.pnc-board {
    position: relative;
    min-height: 240px;
    border-radius: 12px;
    padding: 16px;
    background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 20px 20px,
        var(--bg0);
    display: grid;
    /* 380px min fits the now-taller slot rows (8 cells × ~44px each) without
       horizontal scroll on a Surface Go 2 at its native 1080p portrait. */
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}
.pnc-board-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 36px; color: var(--text-dim); font-size: 13px;
}
.pnc-board-empty i { font-size: 28px; color: var(--text-faint); }

/* One kinematic-group panel */
.pnc-group {
    background: var(--bg2);
    border: 1px solid var(--g-accent, var(--line-2));
    border-radius: 12px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02);
    transition: all 160ms ease;
}
.pnc-group.focused {
    box-shadow: 0 0 0 2px var(--g-accent, var(--accent)), 0 8px 24px rgba(0,0,0,0.3);
}

.pnc-group-head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    min-height: 56px;
}
.pnc-group-glyph {
    width: 44px; height: 44px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03); border: 1px solid var(--line);
    color: var(--g-accent, var(--accent));
    flex-shrink: 0;
}
.pnc-group-glyph svg { width: 26px; height: 26px; }
.pnc-group-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px; font-weight: 600; color: var(--text);
    background: transparent; border: none; outline: none;
    padding: 0;
    /* Size to content (Chromium 123+), with a max-width fallback on
       browsers without field-sizing. Stops the input from stretching
       the whole flex:1 wrapper and shoving the trash icon off to the
       far edge. The outer wrapper keeps flex:1 so the trash stays
       right-aligned; the input just doesn't fill its parent. */
    width: auto;
    field-sizing: content;
    min-width: 80px;
    max-width: 240px;
    line-height: 1.2;
}
.pnc-group-name:focus { outline: 1px dashed var(--g-accent, var(--accent)); outline-offset: 2px; border-radius: 2px; }
.pnc-group-sub {
    display: flex; gap: 8px; font-size: 11px; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-top: 4px;
    line-height: 1.2;
}
.pnc-group-trash {
    background: transparent; border: 1px solid var(--line);
    color: var(--text-faint);
    cursor: pointer; padding: 10px 12px; border-radius: 8px; font-size: 14px;
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}
.pnc-group-trash:hover { color: var(--fault); border-color: var(--fault); background: rgba(224,122,95,0.08); }

/* Axis strip (mini, inside a group panel) */
.pnc-axis-strip-mini { display: flex; gap: 6px; flex-wrap: wrap; }
/* Axis pill — horizontal, baseline-aligned. Letter + unit share the
   same typographic baseline (align-items: baseline on the flex row),
   so "X" and "mm" actually line up instead of stacking like a title.
   Sized for pen/touch on Surface Go 2: 48px min-height, each half
   tappable with a 44px+ hit area. */
.pnc-axis-pill {
    display: inline-flex;
    align-items: baseline;
    padding: 0; border-radius: 10px;
    background: var(--bg3); border: 1px solid var(--g-accent, var(--line));
    min-height: 48px;
    overflow: hidden;
    transition: box-shadow 120ms ease;
}
.pnc-axis-pill.picking { box-shadow: 0 0 0 2px var(--g-accent, var(--accent)); }
.pnc-axis-letter-btn {
    font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600;
    color: var(--g-accent, var(--accent));
    background: transparent; border: none; outline: none;
    padding: 12px 14px; cursor: pointer; text-align: center;
    line-height: 1;  /* keeps the glyph on the pill's baseline */
    min-width: 44px;
}
.pnc-axis-letter-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pnc-axis-letter-btn:hover:not(:disabled) { background: rgba(34,115,147,0.08); }
.pnc-axis-unit-btn {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
    color: var(--text-dim);
    background: transparent; border: none; outline: none;
    padding: 12px 12px 12px 4px; cursor: pointer;
    line-height: 1;  /* share baseline with the letter */
    letter-spacing: 0.08em; text-transform: uppercase;
    position: static;
    min-height: 44px;
}
.pnc-axis-unit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pnc-axis-unit-btn:hover:not(:disabled) { color: var(--text); }

/* Axis-letter picker — floats above everything via a full-viewport
   backdrop. Overlay, not in-flow, so doesn't push content around.
   Backdrop catches outside-clicks to close without needing document
   listeners. */
.pnc-axis-picker-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(5,8,12,0.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: pnc-fade-in 160ms ease-out;
}
.pnc-axis-picker {
    background: var(--bg2);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    min-width: 220px;
}
.pnc-axis-picker-head {
    font-size: 11px; font-weight: 600; color: var(--text-dim);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 2px;
}
.pnc-axis-picker-row { display: flex; gap: 6px; }
.pnc-axis-picker-btn {
    width: 44px; height: 44px; border-radius: 8px;
    background: var(--bg3); border: 1px solid var(--line);
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
}
.pnc-axis-picker-btn:hover { border-color: var(--accent); color: var(--accent); }
.pnc-axis-picker-btn.current {
    background: var(--accent); color: #fff; border-color: var(--accent-2);
}
.pnc-axis-picker-btn.taken {
    opacity: 0.5; color: var(--burnt); border-color: rgba(179,71,12,0.35);
}
.pnc-axis-picker-btn.taken:hover {
    background: rgba(179,71,12,0.10); border-color: var(--burnt); color: var(--burnt);
}
.pnc-axis-picker-foot { display: flex; justify-content: flex-end; margin-top: 6px; }

/* Dashed "+ axis" pill at the end of the axis strip — same footprint as
   a real axis pill so the layout doesn't jump when one is added. */
.pnc-axis-pill.pnc-axis-add {
    border: 1px dashed var(--line-2);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    min-height: 48px;
    min-width: 48px;
    padding: 0 16px;
    align-items: center;       /* icon-only; baseline trick doesn't apply */
    justify-content: center;
}
.pnc-axis-pill.pnc-axis-add:hover {
    border-color: var(--g-accent, var(--accent));
    color: var(--g-accent, var(--accent));
    background: rgba(34,115,147,0.05);
}
.pnc-axis-pill.pnc-axis-add i { font-size: 18px; }

/* Dashed "+ motor" button at the end of a slot list. */
.pnc-slot-add {
    align-self: stretch;
    padding: 12px 14px;
    border-radius: 10px;
    background: transparent;
    border: 1px dashed var(--line-2);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    transition: all 120ms ease;
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    min-height: 48px;
}
.pnc-slot-add:hover {
    border-color: var(--g-accent, var(--accent));
    color: var(--g-accent, var(--accent));
    background: rgba(34,115,147,0.04);
}

/* Slot rows */
.pnc-slots { display: flex; flex-direction: column; gap: 4px; }
.pnc-slot-row {
    /* Default (Cartesian / Free axis): no role column — motor = driver,
       role is redundant. 6 cols: driver | profile | axis | invert | gang | remove. */
    display: grid; grid-template-columns: auto auto auto auto auto auto;
    align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--bg3); border: 1px solid var(--line);
    cursor: pointer;
    transition: all 120ms ease;
    min-width: 0;
    min-height: 48px;
}
.pnc-slot-row.with-role {
    /* Coupled transforms (CoreXY belt_a, delta arm_1 …) — role column
       is meaningful, 7 cols. Role capped so short labels don't leave
       a gap, longer ones still fit without pushing the × off-panel. */
    grid-template-columns: minmax(48px, 96px) auto auto auto auto auto auto;
}
.pnc-slot-row > * { min-width: 0; }
.pnc-slot-row.armed {
    border-color: var(--accent);
    background: rgba(34,115,147,0.10);
    animation: pnc-pulse-soft 1.4s ease-in-out infinite;
}
.pnc-slot-row.ganged { border-color: var(--burnt); }
.pnc-slot-role {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500;
    color: var(--g-accent, var(--accent));
    background: transparent; border: none; outline: none;
    padding: 8px 4px;
    width: 100%;
    /* Input defaults to ~20ch of intrinsic width which was blowing the
       row out; shrink to fit and let the grid's minmax do the sizing. */
    min-width: 0;
    min-height: 44px;
    text-overflow: ellipsis;
}
.pnc-slot-role:focus { outline: 1px dashed var(--g-accent, var(--accent)); outline-offset: 2px; border-radius: 2px; }
.pnc-slot-driver {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 12px; border-radius: 8px;
    background: var(--bg2); border: 1px solid var(--line);
    color: var(--text-dim); font-size: 13px;
    min-height: 44px;
}

/* Profile chip — shows the register profile this motor uses. Click
   opens a picker popup listing the other profiles defined on this
   config. Full touch-target sized. */
.pnc-slot-profile {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 12px; border-radius: 8px;
    background: var(--bg2); border: 1px solid var(--line);
    color: var(--text-dim); font-size: 12px; cursor: pointer;
    min-height: 44px;
    max-width: 160px;
    overflow: hidden;
    transition: all 120ms ease;
}
.pnc-slot-profile:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.pnc-slot-profile i { color: var(--accent); }
.pnc-slot-profile span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnc-slot-profile:disabled { opacity: 0.5; cursor: not-allowed; }

/* Profile picker list (inside the modal) */
.pnc-profile-picker-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 320px; overflow-y: auto;
}
.pnc-profile-picker-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 8px;
    background: var(--bg3); border: 1px solid var(--line);
    color: var(--text); cursor: pointer;
    font-size: 13px;
    min-height: 44px;
    transition: all 120ms ease;
}
.pnc-profile-picker-btn i { color: var(--accent); }
.pnc-profile-picker-btn:hover { border-color: var(--accent); background: rgba(34,115,147,0.08); }
.pnc-profile-picker-btn.current {
    background: rgba(34,115,147,0.15); border-color: var(--accent); color: var(--accent);
}
.pnc-slot-axis-chip,
.pnc-slot-invert,
.pnc-slot-gang {
    padding: 10px 14px; border-radius: 8px;
    background: transparent; border: 1px solid var(--line);
    color: var(--text-dim); cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    transition: all 120ms ease;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}
.pnc-slot-axis-chip:hover:not(:disabled) { border-color: var(--g-accent, var(--accent)); color: var(--g-accent, var(--accent)); }
/* Inverted state shows only through the fa-spin-reverse rotation on the
   sync icon — no colour / background change. The spin direction is the
   sole visual cue.
   Force animation even under prefers-reduced-motion: the direction of
   spin IS the state signal here — without animation, the user can't
   tell normal from inverted at a glance. Scoped tightly to this button
   so we don't override motion preferences for the rest of the app. */
.pnc-slot-invert i.fa-spin,
.pnc-slot-invert i.fa-spin-reverse {
    animation-name: fa-spin !important;
    animation-duration: var(--fa-animation-duration, 3s) !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    transition: none !important;
}
.pnc-slot-invert i.fa-spin-reverse { animation-direction: reverse !important; }
.pnc-slot-gang.on {
    background: rgba(179,71,12,0.14); border-color: var(--burnt); color: var(--burnt);
}
.pnc-slot-axis-chip:disabled, .pnc-slot-invert:disabled, .pnc-slot-gang:disabled { opacity: 0.4; cursor: not-allowed; }

/* Remove-slot × — unassigns the driver from this group. Only appears
   on a focused group (user has to "pick" the group first before they
   can wreck it — soft confirmation). Space is reserved at all times
   per the reserve-space rule; hidden groups just go visibility:hidden
   so the rest of the row doesn't shift when focus moves.

   Selected-state IS the strong red — no hover required. Touch has no
   hover, so using hover as the "obvious-delete" state would hide the
   cue from touch users. Pen hover just bumps the glow slightly. */
.pnc-slot-remove {
    background: var(--fault);
    border: 1px solid var(--fault);
    color: #fff;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    font-size: 16px; font-weight: 700; transition: all 120ms ease;
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px rgba(224, 122, 95, 0.4);
    visibility: hidden;
    pointer-events: none;
}
.pnc-group.focused .pnc-slot-remove {
    visibility: visible;
    pointer-events: auto;
}
.pnc-slot-remove:hover:not(:disabled) {
    box-shadow: 0 0 16px rgba(224, 122, 95, 0.7);
    filter: brightness(1.08);
}
.pnc-slot-remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   Driver rail — physical SPI chain at the bottom of the section
   ============================================================ */
.pnc-driver-rail {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 10px;
}
.pnc-rail-caption {
    display: flex; align-items: center; gap: 10px;
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.pnc-rail-chips {
    display: flex; gap: 8px; flex-wrap: wrap;
    overflow-x: auto; padding-bottom: 4px;
}
.pnc-driver-chip-rail {
    position: relative;
    flex: 0 0 auto;
    width: 80px;
    min-height: 80px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px 10px;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-dim);
    transition: all 140ms ease;
    font-family: 'JetBrains Mono', monospace;
}
.pnc-driver-chip-rail i { font-size: 20px; color: var(--text-faint); }
.pnc-driver-chip-rail .pnc-rail-role {
    font-size: 11px; color: var(--text-faint);
    letter-spacing: 0.04em; text-transform: lowercase;
    max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnc-driver-chip-rail.owned {
    border-color: var(--g-accent, var(--accent));
    color: var(--g-accent, var(--accent));
}
.pnc-driver-chip-rail.owned i { color: var(--g-accent, var(--accent)); }
.pnc-driver-chip-rail.owned .pnc-rail-role { color: var(--g-accent, var(--accent)); }
.pnc-driver-chip-rail.pending {
    animation: pnc-driver-pending 1.2s ease-in-out infinite;
}
.pnc-driver-chip-rail.armed {
    box-shadow: 0 0 0 2px var(--accent);
    animation: pnc-pulse-soft 1.2s ease-in-out infinite;
}
.pnc-driver-chip-rail:disabled { opacity: 0.4; cursor: not-allowed; }

@keyframes pnc-driver-pending {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,115,147,0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(34,115,147,0.0); }
}

/* Axis tiles — three-up grid of self-contained cards */
.pnc-axis-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.pnc-axis-tile {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 180ms ease;
}
.pnc-axis-tile.disabled { opacity: 0.65; }

.pnc-axis-tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pnc-axis-tile-head .axis-letter {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    min-width: 34px;
}
.pnc-axis-tile.disabled .axis-letter { color: var(--text-faint); }
.pnc-axis-tile-head .axis-multi {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 4px;
    background: rgba(34,115,147,0.18);
    color: var(--accent);
    letter-spacing: 0.04em;
}
.pnc-axis-tile.disabled .axis-multi { background: var(--bg3); color: var(--text-faint); }

/* Profile selector button inside a tile */
.pnc-profile-btn {
    position: relative;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 36px 10px 14px;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    transition: border-color 120ms ease, background 120ms ease;
}
.pnc-profile-btn:not(:disabled):hover { border-color: var(--accent); background: rgba(34,115,147,0.06); }
.pnc-profile-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pnc-profile-btn .pb-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-faint);
    margin-bottom: 2px;
}
.pnc-profile-btn .pb-value {
    font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600;
    color: var(--text);
}
.pnc-profile-btn > i.fa-chevron-down {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--text-dim);
}

.pnc-profile-list {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--bg1); border: 1px solid var(--line); border-radius: 8px;
    padding: 6px;
}
.pnc-profile-option {
    padding: 8px 12px; border-radius: 6px;
    background: transparent; border: none;
    color: var(--text-dim); text-align: left; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.pnc-profile-option:hover { background: rgba(34,115,147,0.10); color: var(--text); }
.pnc-profile-option.active { background: rgba(34,115,147,0.18); color: var(--accent); }

/* Axis-level summary rows (steps/mm, max speed) — keyed labels */
.pnc-axis-summary {
    display: flex; flex-direction: column; gap: 4px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    padding: 4px 0;
}
.pnc-axis-summary .row {
    display: flex; justify-content: space-between; align-items: baseline;
    color: var(--text-dim);
}
.pnc-axis-summary .row > span:last-child { color: var(--text); font-weight: 500; }

/* Motor chips inside an axis tile */
.pnc-motor-chips { display: flex; flex-direction: column; gap: 6px; }
.pnc-motor-chip {
    display: grid;
    grid-template-columns: 28px auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.pnc-motor-chip .mc-name {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    color: var(--accent);
}

.pnc-motor-remove {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-faint); padding: 2px 6px; border-radius: 4px;
    font-size: 13px;
}
.pnc-motor-remove:hover:not(:disabled) { color: var(--fault); background: rgba(224,122,95,0.08); }
.pnc-motor-remove:disabled { opacity: 0.4; cursor: not-allowed; }

.pnc-ganged {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em; font-weight: 600;
    color: var(--text-faint);
    padding: 2px 0;
}
.pnc-ganged i { font-size: 10px; }

/* Axis bottom action row */
.pnc-axis-actions { display: flex; gap: 8px; }
.pnc-add-motor, .pnc-square-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px dashed var(--line-2);
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    transition: all 120ms ease;
}
.pnc-add-motor:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: rgba(34,115,147,0.05); }
.pnc-square-btn {
    border-style: solid;
    background: rgba(34,115,147,0.10);
    color: var(--accent);
    border-color: rgba(34,115,147,0.30);
}
.pnc-square-btn:hover:not(:disabled) { background: rgba(34,115,147,0.18); border-color: var(--accent); }
.pnc-add-motor:disabled, .pnc-square-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* "add axis" tile — full-dashed, centered, same footprint as a tile */
.pnc-axis-tile-add {
    background: transparent;
    border: 1px dashed var(--line-2);
    border-radius: 12px;
    min-height: 300px;
    cursor: pointer;
    color: var(--text-dim);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    font-size: 13px;
    transition: all 120ms ease;
}
.pnc-axis-tile-add:hover:not(:disabled) {
    border-color: var(--accent); color: var(--accent);
    background: rgba(34,115,147,0.04);
}
.pnc-axis-tile-add i { font-size: 22px; }
.pnc-axis-tile-add:disabled { opacity: 0.4; cursor: not-allowed; }

/* Inverted button tweak inside tile motor-chips */
.pnc-motor-chip .pnc-invert {
    padding: 3px 10px; border-radius: 6px;
    background: var(--bg2); border: 1px solid var(--line);
    transition: all 120ms ease;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.04em;
}
.pnc-motor-chip .pnc-invert.inverted {
    background: rgba(179,71,12,0.14); border-color: rgba(179,71,12,0.35); color: var(--burnt);
}
.pnc-motor-chip .pnc-invert:disabled { opacity: 0.5; cursor: not-allowed; }

.pnc-lock-hint {
    display:inline-flex; align-items:center; gap:6px;
    padding: 3px 10px; border-radius:4px;
    background: rgba(224,178,95,0.12); color: var(--warn);
    font-size: 11px; letter-spacing: 0.08em; text-transform:uppercase; font-weight:600;
}

/* Chip-diagram legend pills */
.pnc-chip-legend {
    padding: 3px 8px; border-radius:4px;
    background: transparent; border:1px solid var(--line);
    color: var(--text-faint); font-family:'JetBrains Mono',monospace; font-size:10px;
    cursor:pointer;
}
.pnc-chip-legend:hover { color: var(--text-dim); border-color: var(--line-2); }
.pnc-chip-legend.active { background: rgba(34,115,147,0.15); color: var(--accent); border-color: var(--accent); }

.pnc-reg-expanded {
    padding: 4px 12px 14px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid var(--line);
}

/* Bit-field editor */
.pnc-bitfield { display:grid; grid-template-columns: repeat(32, 1fr); gap:2px; }
.pnc-bitcell {
    height:28px; border-radius:3px;
    background: var(--bg3); border: 1px solid var(--line);
    color: var(--text-faint);
    font-family:'JetBrains Mono',monospace; font-size:10px;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; user-select:none;
}
.pnc-bitcell.on { background: var(--accent); color:#fff; border-color: var(--accent-2); }

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes pnc-pulse-soft {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@keyframes pnc-pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.35); opacity: 0; }
}
@keyframes pnc-flash-bg {
    0%   { background: rgba(34,115,147,0.35); }
    100% { background: transparent; }
}
@keyframes pnc-vignette {
    0%, 100% { box-shadow: inset 0 0 0 rgba(224,122,95,0.0); }
    50%      { box-shadow: inset 0 0 80px rgba(224,122,95,0.35); }
}

/* ============================================================
   MudBlazor overrides
   ============================================================ */
.mud-layout, .mud-main-content, .mud-container,
.mud-paper, .mud-appbar, .mud-drawer, .mud-card,
.mud-table, .mud-toolbar, .mud-application-layout {
    background-color: transparent !important;
    background: transparent !important;
}

.mud-popover, .mud-popover-open,
.mud-list, .mud-menu-list, .mud-select-popover-list {
    background-color: var(--bg2) !important;
    background: var(--bg2) !important;
    border: 1px solid var(--line);
}

.mud-progress-linear-bar { background-color: var(--accent) !important; }
.mud-progress-circular-svg { color: var(--accent) !important; }

.mud-input-root, .mud-input-root input, .mud-input-root textarea,
.mud-select-root { color: var(--text) !important; }
.mud-input-label, .mud-input-helper-text { color: var(--text-dim) !important; }
.mud-input-outlined-border { border-color: var(--line-2) !important; }

/* The floating label for a MudBlazor outlined input sits on top of the
   outline stroke and needs an opaque backdrop so the stroke doesn't
   show through. Default picks up MudBlazor's own Surface token which
   doesn't always track our theme (especially inside dialogs in light
   mode, where the label was rendering on a dark block). Pin it to
   --bg1 explicitly so it reads correctly in both palettes. */
.mud-input-label-animated,
.mud-input-label.mud-input-label-outlined {
    background: var(--bg1) !important;
    padding: 0 4px !important;
}

:root, .mud-theme-provider { --mud-palette-surface: var(--bg1) !important; }