/* PWS M2 Standalone HMI v0.2 — match the mockup palette */

:root {
    --bg-deep:      #0B1426;
    --bg-panel:     #142036;
    --bg-panel-hi:  #1B2942;          /* 3rd elevation step (panel-on-panel / hover) */
    --bg-strip:     #1A2A44;
    --bg-tile:      #1F2E47;
    --border:       #2A3A55;
    --border-soft:  #213353;          /* lighter border for inner dividers */
    --text:         #E5EEF7;
    --text-muted:   #E5EEF7;
    --text-label:   #E5EEF7;
    --accent-green: #3FD17C;
    --accent-green-dim: #2A8C57;
    --accent-blue:  #5DA8E0;
    --accent-blue-bright: #3B82F6;
    --accent-amber: #F2B144;
    --accent-red:   #E15555;
    --pws-navy:     #1B3A5C;
    /* Modern v2 — consistent geometry + shadow */
    --radius-md:    10px;
    --radius-sm:    6px;
    --shadow-elev1: 0 1px 0 0 rgba(255,255,255,0.04) inset,
                    0 1px 2px 0 rgba(0,0,0,0.30);
    --shadow-pressed: inset 0 2px 4px 0 rgba(0,0,0,0.45),
                      inset 0 -1px 0 0 rgba(255,255,255,0.06);
    --motion-fast:  140ms;
    --motion-med:   220ms;
    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-deep);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    min-height: 100vh;
    /* Tabular figures so all numerics column-align — critical for
       at-a-glance comparison of REF vs ACT, sprays, shape values. */
    font-feature-settings: 'tnum' 1, 'cv11' 1, 'ss03' 1;
    font-variant-numeric: tabular-nums;
}

/* Modern v2 — global panel polish: consistent radius, subtle elevation,
   smooth border-color transitions on hover. Applied to every .panel so
   the whole HMI breathes with the same geometry. */
.panel {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elev1);
    transition: border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}

/* Modern v2 — bar-chart and gauge transitions: heights ease into new
   values instead of snapping, so the operator perceives continuous flow.
   Disabled for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    rect.bar-anim,
    .gg-fill,
    .gauge-bar-fill {
        transition: height var(--motion-med) var(--ease-out),
                    y var(--motion-med) var(--ease-out),
                    width var(--motion-med) var(--ease-out);
    }
}

/* Modern v2 — alarm-strip soft pulse on fault so it draws the eye
   without strobing. Three-second cycle, subtle 6% opacity dip. */
@keyframes alarm-soft-pulse {
    0%, 100% { filter: brightness(1.00); }
    50%      { filter: brightness(1.18); }
}
.alarm-strip.alarm-fault {
    animation: alarm-soft-pulse 3s ease-in-out infinite;
}

/* Modern v2 — empty-state placeholder for the X-Ray trend chart
   (and any future chart with the same pattern). Centered grey text
   with a soft pulsing dot. Shown when the underlying data buffer
   has nothing to plot yet. */
.trend-wrap {
    position: relative;
}
.trend-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6F87A0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(11, 20, 38, 0.55) 0%,
        rgba(11, 20, 38, 0.85) 100%);
    border-radius: var(--radius-sm);
}
.trend-empty.hidden { display: none; }
.trend-empty-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-blue);
    box-shadow: 0 0 0 0 rgba(93, 168, 224, 0.55);
    animation: dot-pulse 1.4s ease-out infinite;
}
@keyframes dot-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(93, 168, 224, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(93, 168, 224, 0.00); }
    100% { box-shadow: 0 0 0 0   rgba(93, 168, 224, 0.00); }
}

/* (Header-strip sparklines removed — overlapped the value text and
   read as visual noise. Reverting to plain text-only cells.) */

/* ===== Top bar ===== */
.topbar {
    /* Grid with three equal columns guarantees the mill title is centered
       on the page regardless of the two logos' differing widths. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;          /* tight — let logos define the height */
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
}
.topbar > .customer { justify-self: start; }
.topbar > .title    { justify-self: center; text-align: center; }
.topbar > .brand    { justify-self: end; }
.customer-name {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    display: inline-block;
    padding: 4px 0;
}
.customer {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.customer-logo {
    /* Chance Aluminum logo is a wide horizontal banner (1625:307 ≈ 5.29:1).
       At 70 px tall it renders ~370 px wide — taller than the title would
       force the banner to dominate the header; smaller would make the
       lettering unreadable. */
    height: 70px;
    width: auto;
    display: block;
    object-fit: contain;
    aspect-ratio: 1625 / 307;
}
.title {
    font-size: 80px;          /* sized so the text cap-height roughly matches the 110-px logos */
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--text);
    line-height: 1;           /* kill the extra line-box height that adds visible padding */
}
.brand-name {
    font-size: 11px;
    color: var(--text-muted);
}
.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.brand-logo {
    height: 110px;            /* same height as .customer-logo, no extra vertical spacing */
    width: auto;
    display: block;
    object-fit: contain;
    /* PWS full logo (transparent PNG, padded so content fills ~75 % of height,
       matching Arconic logo's internal padding ratio) — 1014:504 ≈ 2.01:1 */
    aspect-ratio: 1014 / 504;
}

/* ===== Alarm strip ===== */
.alarm-strip {
    padding: 3px 24px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
}
.alarm-strip.alarm-ok {
    background: rgba(63, 209, 124, 0.12);
    color: var(--accent-green);
}
.alarm-strip.alarm-warn {
    background: rgba(242, 177, 68, 0.18);
    color: var(--accent-amber);
}
.alarm-strip.alarm-fault {
    background: var(--accent-red);
    color: white;
    animation: alarm-flash 1.5s ease-in-out infinite;
}
@keyframes alarm-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* ===== Tabs ===== */
.tabs {
    display: flex;
    gap: 4px;
    padding: 5px 24px 0;
    background: var(--bg-deep);
}
.tab {
    background: var(--bg-panel);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-bottom: none;
    padding: 6px 14px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    /* Modern v2 — flex layout so an inline-SVG icon can sit next to
       the label, with a small gap. Tabs without an icon still center
       the label cleanly. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out);
}
.tab .tab-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}
.tab:hover {
    color: var(--text);
    background: var(--bg-panel-hi);
    border-color: var(--border-soft);
}
.tab.active {
    background: var(--accent-blue-bright);
    color: white;
    border-color: var(--accent-blue-bright);
    box-shadow: 0 -1px 0 0 rgba(255,255,255,0.18) inset,
                0 6px 14px -8px rgba(59,130,246,0.55);
}
.tab.active .tab-icon { opacity: 1; }

/* ===== Persistent mode-button row ===== */
.mode-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    background: var(--bg-strip);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.mode-row-label {
    font-size: 11px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.mode-row-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 6px;
}
.mode-pill {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    /* Modern v2 — faint raised feel on inactive chips so the active one
       reads as the "pressed" state. */
    box-shadow: var(--shadow-elev1);
    transition: background var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out);
}
.mode-pill:hover:not(.active) {
    background: var(--bg-panel-hi);
    border-color: var(--border-soft);
}
.mode-pill:active { transform: scale(0.97); }
/* Active-pill base — solid fill, black text. Per-mode colors override
   below via the data-mode-num attribute. */
.mode-pill.active {
    color: #000;
    font-weight: 700;
    box-shadow: var(--shadow-pressed);
}
/* AUTO (mode 2) — green */
.mode-pill[data-mode-num="2"].active {
    background: var(--accent-green);
    border-color: var(--accent-green);
    box-shadow: var(--shadow-pressed),
                0 0 0 1px var(--accent-green) inset;
}
/* MANUAL (mode 1) — blue */
.mode-pill[data-mode-num="1"].active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: var(--shadow-pressed),
                0 0 0 1px var(--accent-blue) inset;
}
/* PRESET (mode 3) — yellow / amber */
.mode-pill[data-mode-num="3"].active {
    background: var(--accent-amber);
    border-color: var(--accent-amber);
    box-shadow: var(--shadow-pressed),
                0 0 0 1px var(--accent-amber) inset;
}
/* TEST (mode 4) — fall back to green (no specific spec yet). */
.mode-pill[data-mode-num="4"].active {
    background: var(--accent-green);
    border-color: var(--accent-green);
}
/* OFF (mode 0) — neutral grey-amber, since OFF is a fault-adjacent state. */
.mode-pill[data-mode-num="0"].active {
    background: var(--text-muted);
    border-color: var(--text-muted);
}
.mode-pill.procedural {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: transparent;
    margin-left: 4px;
}
.mode-pill.procedural:hover {
    background: var(--accent-blue);
    color: var(--bg-deep);
}
.mode-pill.procedural:active {
    transform: scale(0.96);
}
.mode-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-green);
    margin-left: 4px;
}

/* Spray Mode pills moved into the Spray Levels panel header — compact
   variant so they fit on one line with the panel title. */
.header-mode-row {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: -3px;
    text-transform: none;
    letter-spacing: 0;
}
.header-mode-label {
    font-size: 10px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-right: 4px;
}
.header-mode-row .mode-pill {
    padding: 2px 9px;
    font-size: 9.5px;
    border-radius: 10px;
    letter-spacing: 0.04em;
}

/* ===== Strip (header telemetry) ===== */
.strip {
    display: flex;
    align-items: center;
    background: var(--bg-strip);
    padding: 5px 24px;
    gap: 24px;
    border-bottom: 1px solid var(--border);
}
.cell {
    display: flex;
    flex-direction: column;
    min-width: 80px;
}
.cell label {
    font-size: 10px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.cell span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.rolling-cell { margin-left: auto; }

/* Right-side cluster: Coils-on-WRs tile + Rolling badge on the same
   horizontal line, pushed to the far right of the header strip. */
.right-stack {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.right-stack .stack-cell {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 10px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.right-stack .stack-cell label {
    font-size: 14px;            /* matches the value font size */
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    white-space: nowrap;
    font-weight: 500;           /* not bold — number stays bold */
}
.right-stack .stack-cell span {
    font-size: 14px;
    font-weight: 700;           /* number stays bold */
    color: var(--text);
}
.right-stack .stack-cell.rolling-cell {
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 0;
}
.badge {
    background: var(--accent-green);
    color: var(--bg-deep);
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
}
.badge.idle { background: var(--text-label); }

/* ===== Demo controls (header right-stack) ===== */
/* Three buttons that drive the demo:
   - sim-toggle: master STOPPED/ROLLING switch
   - disturb-toggle: enable/disable continuous disturbances
   - inject-one-btn: one-shot disturbance trigger              */
.demo-controls-cell {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.demo-toggle,
.demo-disturb-btn,
.demo-inject-btn {
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Master sim toggle */
.demo-toggle.stopped {
    background: var(--accent-red);
    color: white;
    border-color: var(--accent-red);
}
.demo-toggle.rolling {
    background: var(--accent-green);
    color: var(--bg-deep);
    border-color: var(--accent-green);
}
.demo-toggle:hover { filter: brightness(1.08); }

/* Disturbance enable toggle — amber outlined when OFF,
   amber filled when ON */
.demo-disturb-btn {
    background: transparent;
    color: var(--accent-amber);
    border-color: var(--accent-amber);
}
.demo-disturb-btn.on {
    background: var(--accent-amber);
    color: var(--bg-deep);
    border-color: var(--accent-amber);
}
.demo-disturb-btn:hover:not(.disabled) { filter: brightness(1.12); }
.demo-disturb-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* One-shot inject button — neutral until armed; flashes briefly
   when an inject window is in progress */
.demo-inject-btn {
    background: var(--bg-tile);
    color: var(--text);
    border-color: var(--border);
}
.demo-inject-btn:hover:not(.disabled) {
    background: var(--bg-panel);
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}
.demo-inject-btn.active {
    background: var(--accent-amber);
    color: var(--bg-deep);
    border-color: var(--accent-amber);
}
.demo-inject-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Speed-mode buttons disabled while sim is STOPPED */
.speed-btn.demo-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== Main content ===== */
.content {
    padding: 8px 24px 40px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== Process tab layout ===== */
.process-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.process-left, .process-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.process-right .panel { flex: 1; }

/* ===== Panels ===== */
.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
section[data-panel="sprays"] .panel-grid {
    grid-template-columns: 1fr 1fr;
}
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
}
.panel.placeholder {
    text-align: center;
    color: var(--text-muted);
    padding: 80px 16px;
    font-style: italic;
}
.panel h3 {
    margin: 0 0 8px 0;
    font-size: 14px;          /* bumped 11 → 14 — panel header readability */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.panel h3 .subtle {
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-label);
    font-weight: 400;
    font-size: 10px;
    margin-left: 8px;
}

/* ===== Bar charts ===== */
.bar-chart {
    width: 100%;
    height: 150px;
    display: block;
}
.bar-chart.tall { height: 270px; }
.schematic {
    width: 100%;
    height: 340px;             /* sized so schematic-panel + speed buttons align with shape-map column */
    display: block;
}

/* ===== Shape map (coil history heatmap) ===== */
.strip-map-wrap {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.strip-map-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
    width: 32px;
    font-size: 10px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.strip-map-yaxis .ds-label { color: var(--accent-amber); font-weight: 700; }
.strip-map-yaxis .os-label { color: var(--accent-amber); font-weight: 700; }
.strip-map-yaxis .centre-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
}
.strip-map {
    flex: 1;
    width: 100%;
    height: 260px;
    background: #0B1426;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.strip-map.compact {
    height: 170px;
}

/* ===== Vidimon tab ===== */
.vidimon-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
}
.vidimon-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vidimon-side .panel {
    flex: 1;                  /* stretch each side panel to fill the vertical space */
    display: flex;
    flex-direction: column;
}
.vidimon-table-panel { overflow: hidden; }
.vidimon-table {
    /* Fills the panel width — columns spread out for readability. */
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;                  /* bumped 14 → 17 */
    font-variant-numeric: tabular-nums;
}
.vidimon-table thead th {
    background: var(--bg-tile);
    color: var(--text-muted);
    text-align: right;
    font-weight: 600;
    padding: 7px 22px;                /* wider column gap */
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.15;
}
.vidimon-table thead th:first-child {
    text-align: left;
    color: var(--accent-amber);
}
.vidimon-table tbody td {
    padding: 5px 22px;                /* matches header */
    border-bottom: 1px solid #1A2540;
    text-align: right;
    color: var(--text);
}
.vidimon-table tbody td:first-child {
    text-align: left;
    color: var(--accent-amber);
    font-weight: 700;
    font-size: 17px;
}
.vidimon-table tbody tr.os-edge,
.vidimon-table tbody tr.ds-edge { background: rgba(58, 74, 102, 0.18); }
.vidimon-table tbody tr.os-edge td:first-child,
.vidimon-table tbody tr.ds-edge td:first-child { color: #6F87A0; }
.vidimon-table tbody tr.os-edge td:not(:first-child),
.vidimon-table tbody tr.ds-edge td:not(:first-child) { color: #6F87A0; }
.vidimon-table .new-calib { color: var(--accent-green); font-weight: 600; }
.vidimon-table .new-calib::before {
    content: '«  ';
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 400;
}

.vidimon-gauges-row {
    /* Flex with center justification + narrow fixed-width tiles, so each
       bargraph hugs its bar instead of stretching across 1/3 of the panel. */
    display: flex;
    justify-content: center;
    gap: 8px;
}
.vidimon-mini-gauge {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px;
    text-align: center;
    height: 140px;
    width: 110px;                     /* narrow — hugs the bar */
    flex: 0 0 110px;                  /* don't grow / shrink */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vidimon-perms, .vidimon-pdi {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;          /* bumped 12 → 16 */
    flex: 1;                  /* stretch to fill the panel vertically */
}
.vidimon-perms td, .vidimon-pdi td {
    padding: 8px 10px;        /* taller rows */
    border-bottom: 1px solid var(--border);
}
.vidimon-perms td:first-child,
.vidimon-pdi td:first-child { color: var(--text-muted); }
.vidimon-perms td:last-child,
.vidimon-pdi td:last-child {
    text-align: right;
    color: var(--accent-green);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vidimon-perms .perm-ok { color: var(--accent-green); }
.vidimon-perms .perm-fault { color: var(--accent-red); }

.vidimon-cal-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
}
.vidimon-cal-row .cal-label { color: var(--text-muted); }
.vidimon-cal-row .cal-value {
    color: var(--accent-green);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vidimon-cal-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.cal-btn {
    background: transparent;
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
    padding: 12px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.cal-btn:hover {
    background: var(--accent-red);
    color: white;
}
.cal-btn.save {
    border-color: var(--text-muted);
    color: var(--text-muted);
}
.cal-btn.save:hover { background: var(--text-muted); color: var(--bg-deep); }
.vidimon-cal-status {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}
.cal-status-pass {
    color: var(--accent-green);
    font-weight: 700;
}

/* ===== Speed Schedule graph ===== */
.speed-graph {
    width: 100%;
    height: 160px;
    background: #0B1426;
    display: block;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.strip-map-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    margin-left: 38px;
    font-size: 10px;
    color: var(--text-muted);
}
.legend-end { color: var(--text-label); }
.scale-gradient {
    flex: 1;
    height: 10px;
    border-radius: 2px;
    /* RE-FLIPPED (2026-05-18 evening): Wavy/Hot on the LEFT = RED end,
       Tight/Cold on the RIGHT = BLUE end. Matches the new colorForShape()
       polarity (NEGATIVE I-units = loose / wavy = hot = red). */
    background: linear-gradient(to right,
        rgb(225,80,80) 0%,
        rgb(240,200,60) 21%,
        rgb(160,220,80) 39%,
        rgb(60,210,120) 61%,
        rgb(40,180,210) 79%,
        rgb(20,80,200) 100%);
}
.legend-range {
    margin-left: 6px;
    color: var(--text-label);
    font-variant-numeric: tabular-nums;
}

/* ===== Permissives tab ===== */
.perm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.perm-block {
    /* Each permissive logic block uses the standard .panel chrome. */
    display: flex;
    flex-direction: column;
}
.perm-block-title {
    color: var(--accent-amber);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.perm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.perm-table td {
    padding: 6px 4px;
    color: var(--text);
    vertical-align: middle;
}
.perm-table td:first-child {
    width: 24px;
    text-align: center;
}
.perm-or-row td {
    padding: 4px 0;
}
.perm-or-divider {
    text-align: center;
    color: var(--text-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-style: italic;
}
.perm-wrap-value {
    color: var(--text-muted);
    font-size: 14px;
    padding-top: 12px;
}
.perm-wrap-deg {
    color: var(--accent-green);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}

/* ===== AFC (Automatic Flatness Control) loop enable buttons ===== */
.afc-row {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    background: var(--bg-strip);
    border: 1px solid var(--border);
    border-radius: 4px;
    justify-content: center;
}
.afc-btn {
    flex: 1;
    padding: 8px 16px;
    background: var(--bg-tile);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-transform: none;
    transition: background 0.15s;
}
.afc-btn:hover { background: var(--bg-panel); }
.afc-btn.active {
    background: var(--accent-green);
    color: var(--bg-deep);
    border-color: var(--accent-green);
}

/* ===== Setup tab (Coil Schedule) ===== */
.setup-twin-grid {
    display: grid;
    grid-template-columns: 720px 720px;   /* fixed-width panels — wider to fit 22-px font */
    gap: 24px;
    justify-content: center;              /* center the pair on the page */
}
/* Each Setup panel: title centered, contents sized to content */
.setup-twin-grid > .panel > h3 {
    text-align: center;
}
.setup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 22px;            /* bumped 17 → 22 — fills more vertical space */
    margin-top: 8px;
}
.setup-table-single col.setup-col-label { width: 230px; }
/* Label text right-aligned, single-line (no wrap), tight to the input. */
.setup-table-single tbody td:first-child {
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
}
/* Inline unit label that sits inside the input cell, after the input. */
.setup-table-single .inline-unit {
    color: var(--text-muted);
    font-size: 18px;            /* matched to the larger setup-table font */
    margin-left: 10px;
    display: inline-block;
    min-width: 60px;
    text-align: left;
}
/* Input column fixed-width AND content right-aligned within it. The
   THREAD <inp> RUN <inp> Entry Tension row defines the column's right
   edge — every other row's input value also ends at that same X, and
   the unit label sits immediately to the right (left-justified in
   the unit column). Result: units form a clean vertical column lined
   up with the Entry Tension "lbs" label. */
.setup-table-single col.setup-col-input { width: 400px; }
.setup-table-single col.setup-col-unit  { width: auto; }
.setup-table-single tbody td:nth-child(2) {
    /* Flex layout packs every element in the input cell (input + optional
       THREAD/RUN labels + optional inline unit) tight to the RIGHT edge
       of the column — so the Coil ID / Alloy Code text inputs land at
       the same X as every other row's input value. */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.setup-table-single .setup-unit {
    text-align: left;
    padding-left: 8px;
}
.setup-table thead th {
    background: var(--bg-tile);
    color: var(--text);
    font-weight: 700;
    padding: 6px 12px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.setup-table tbody td {
    padding: 14px 14px;         /* taller rows — fills more vertical space */
    border-bottom: 1px solid rgba(42,58,85,0.45);
    color: var(--text);
    vertical-align: middle;
}
.setup-table tbody td:first-child {
    color: var(--text-muted);
    font-weight: 600;
    width: 200px;
}
.setup-table .setup-unit {
    color: var(--text-label);
    font-size: 12px;
    width: 70px;
}
.setup-table .setup-row-derived td {
    color: var(--text-label);
    font-style: italic;
}
.setup-input {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 22px;            /* matched to .setup-table */
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    width: 150px;
    text-align: right;
}
.setup-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}
.setup-input.setup-input-narrow { width: 120px; }   /* fits 4-digit values at 22-px font */
.setup-input.setup-input-tiny   { width: 80px; }
select.setup-input {
    text-align: left;
    padding-right: 4px;
    width: auto;            /* size to fit the widest option (e.g. "Feedforward & Feedback") */
    min-width: 150px;
}
.setup-thr-run-label, .setup-bte-label {
    color: var(--text-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
    margin-left: 4px;
}
.setup-toggle {
    background: transparent;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
}
.setup-toggle.active {
    background: var(--accent-green);
    color: var(--bg-deep);
}
.setup-action-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    justify-content: center;     /* center buttons on the page */
}
.setup-action-btn {
    background: var(--bg-tile);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.setup-action-btn:hover {
    background: var(--bg-panel);
    border-color: var(--accent-blue);
}

/* ===== Speed control row under mill schematic ===== */
.speed-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--bg-strip);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.speed-mode-label {
    font-size: 10px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-right: 6px;
    flex: 1;
}
.speed-mode-label #speed-mode-display {
    color: var(--accent-green);
    font-weight: 700;
    margin-left: 4px;
}
/* Status-row groups: MILL STATUS (mode buttons) and CYLINDER STATUS
   (display-only indicators). Each group is wrapped in a bordered
   rectangle so the operator can see them as distinct sets. */
.status-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(11, 20, 38, 0.35);
}
.status-group + .status-group {
    margin-left: 16px;
}
.status-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-right: 4px;
}
.status-group-label > span {
    color: var(--accent-green);
    margin-left: 4px;
}

/* Mill-status indicators (VENT / VENT RESET / POSITION / LOAD) — these
   are display-only status pills, NOT buttons. No hover effect, no
   pointer cursor. Each carries a small "state dot" that lights up when
   the indicator is active. */
.mill-state-ind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-tile);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    user-select: none;
    cursor: default;
    min-width: 130px;
    text-align: center;
    white-space: nowrap;
}
/* Dot indicator removed — pills are coloured outlines by default and
   only fill in the background when explicitly .active (lit). */
.mill-state-ind .state-dot { display: none; }

/* Tone applies to BORDER + TEXT at all times (outlined look). */
.mill-state-ind.tone-red {
    border-color: var(--accent-red);
    color: var(--accent-red);
}
.mill-state-ind.tone-amber {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}
.mill-state-ind.tone-green {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* .active = lit / filled — only applied to indicators whose physical
   state is genuinely on (e.g., POSITION mode pinned for the demo).
   Fills the pill background with the tone colour and inverts text to
   dark for contrast. */
.mill-state-ind.active {
    background: var(--accent-green);
    color: var(--bg-deep);
    border-color: var(--accent-green);
}
.mill-state-ind.tone-red.active {
    background: var(--accent-red);
    color: var(--bg-deep);
    border-color: var(--accent-red);
}
.mill-state-ind.tone-amber.active {
    background: var(--accent-amber);
    color: var(--bg-deep);
    border-color: var(--accent-amber);
}
.mill-state-ind.tone-green.active {
    background: var(--accent-green);
    color: var(--bg-deep);
    border-color: var(--accent-green);
}

/* ROLLING badge red variant — used when passState is COMPLETE (mill stopped) */
.badge.stopped {
    background: var(--accent-red);
    color: white;
}

/* Pass-phase chip (auto coil-cycle state machine) */
.pass-phase-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--bg-tile);
    color: var(--text);
    border: 1px solid var(--border);
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}
.pass-phase-chip.phase-thread   { background: rgba( 59,130,246,0.20); color: #B7D6FF; border-color: var(--accent-blue-bright); }
.pass-phase-chip.phase-run      { background: rgba( 63,209,124,0.22); color: #C8F2D6; border-color: var(--accent-green); }
.pass-phase-chip.phase-establish{ background: rgba(242,177, 68,0.22); color: #FDE3B3; border-color: var(--accent-amber); }
.pass-phase-chip.phase-complete { background: rgba(225, 85, 85,0.22); color: #FFD1D1; border-color: var(--accent-red); }

.speed-btn {
    background: var(--bg-tile);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.speed-btn:hover {
    background: var(--bg-panel);
    color: var(--text);
}
.speed-btn.active {
    background: transparent;
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* Per-mode button colors — STOP red, THREAD blue, RUN green, HOLD yellow.
   Border + label use the mode colour at all times; active state fills
   the background with the same colour for high-contrast emphasis. */
.speed-btn[data-mode="STOP"]   { color: var(--accent-red);   border-color: var(--accent-red);   }
.speed-btn[data-mode="THREAD"] { color: var(--accent-blue);  border-color: var(--accent-blue);  }
.speed-btn[data-mode="RUN"]    { color: var(--accent-green); border-color: var(--accent-green); }
.speed-btn[data-mode="HOLD"]   { color: var(--accent-amber); border-color: var(--accent-amber); }
.speed-btn[data-mode="STOP"]:hover   { background: rgba(225,85,85,0.12); }
.speed-btn[data-mode="THREAD"]:hover { background: rgba(93,168,224,0.15); }
.speed-btn[data-mode="RUN"]:hover    { background: rgba(63,209,124,0.15); }
.speed-btn[data-mode="HOLD"]:hover   { background: rgba(242,177,68,0.18); }
.speed-btn[data-mode="STOP"].active {
    background: var(--accent-red);   color: var(--bg-deep); border-color: var(--accent-red);
}
.speed-btn[data-mode="THREAD"].active {
    background: var(--accent-blue);  color: var(--bg-deep); border-color: var(--accent-blue);
}
.speed-btn[data-mode="RUN"].active {
    background: var(--accent-green); color: var(--bg-deep); border-color: var(--accent-green);
}
.speed-btn[data-mode="HOLD"].active {
    background: var(--accent-amber); color: var(--bg-deep); border-color: var(--accent-amber);
}

/* Meas / Error toggle on shape map panel header */
.shape-map-toggle {
    float: right;
    display: inline-flex;
    gap: 4px;
    margin-top: -2px;
}
.map-toggle {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 3px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.map-toggle.active {
    background: transparent;
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* Actual / Error toggle on the Shape Profile + Actual Shape bar charts.
   Mirrors the .shape-map-toggle visual treatment so the two toggles read
   as the same control idiom across the screen. */
.shape-bar-toggle {
    float: right;
    display: inline-flex;
    gap: 4px;
    margin-top: -2px;
}
.bar-toggle {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 3px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.bar-toggle.active {
    background: transparent;
    border-color: var(--accent-green);
    color: var(--accent-green);
}
/* X-Ray scale cycle button — pinned to the top-right corner of its
   panel via absolute positioning so the position is invariant to any
   wrapping of the panel-header title / subtitle text. */
.xray-scale {
    position: absolute;
    top: 8px;
    right: 12px;
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    min-width: 60px;
    text-align: center;
    box-sizing: border-box;
    z-index: 2;
}
.xray-scale:hover {
    background: rgba(242, 177, 68, 0.12);
}
/* Ensure the X-Ray panel is the positioning context for the button. */
.panel:has(.xray-scale) {
    position: relative;
}

/* ===== X-ray gauge feedback trend chart ===== */
.trend-chart {
    width: 100%;
    height: 180px;
    display: block;
    background: #000;
    border-radius: 4px;
}
.trend-legend {
    display: flex;
    gap: 28px;
    margin-top: 6px;
    font-size: 17px;            /* bumped +2 from 15 per operator request */
    color: var(--text-muted);
    /* Entry on the LEFT, exit on the RIGHT — full-width justification */
    justify-content: space-between;
    padding: 0 12px;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-swatch {
    width: 14px;
    height: 3px;
    display: inline-block;
    border-radius: 1px;
}
.swatch-cyan { background: #5DDCE8; }
.swatch-yellow { background: #F2D544; }
/* Instantaneous values match the trace colour — cyan for entry,
   yellow for exit — so the eye links the readout to the line. */
.legend-entry span:last-child { color: #5DDCE8; }
.legend-exit  span:last-child { color: #F2D544; }
.legend-item span:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    display: inline-block;
}

/* ===== Vertical gauges ===== */
/* Legacy layout (5 single gauges) — kept for any non-Coastal callers */
.gauges-row:not(.gauges-row-coastal) {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

/* Coastal3 layout — 6 named groups, each holding 1-2 sub-gauges.
   Variable column widths sized roughly by sub-gauge count. */
.gauges-row-coastal {
    display: grid;
    /* Column order: Entry Tension(1) | Mill Speed(1) | Roll Bend(1) | Total Load(2) | AGC Corrs(1) | Roll Gap(2) | Exit Tension(1) */
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr 1fr;
    gap: 8px;
}
.gauge-group {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.gauge-group .gg-title {
    font-size: 15px;            /* 11 → 15 */
    color: var(--text);         /* white text */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}
.gauge-group .gg-bars {
    display: flex;
    gap: 6px;
    flex: 1;
    min-height: 200px;
}
.gauge-group .gg-bars .gauge {
    flex: 1;
    padding: 0;
    height: auto;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
}
/* When a control loop is actively correcting via this gauge (bend
   actively moving, tilt actively trimming load / gap), highlight the
   gauge with a yellow caution outline + matching pulsing glow so the
   operator sees which actuator the AFC is currently driving. */
@keyframes correcting-pulse {
    0%   { box-shadow: 0 0 4px var(--accent-amber); }
    50%  { box-shadow: 0 0 14px var(--accent-amber); }
    100% { box-shadow: 0 0 4px var(--accent-amber); }
}
/* Flash the spray bars at zones where the spray loop is actively
   correcting a localised shape error. Cycles opacity so the operator's
   eye is drawn to the spray demand spike that matches the disturbance
   peak in the same zones. */
@keyframes spray-flash {
    0%, 100% { opacity: 1.0; }
    50%      { opacity: 0.35; }
}
.spray-bar-flash {
    animation: spray-flash 0.6s ease-in-out infinite;
}

.gauge.correcting,
.gauge-group.correcting,
.panel.correcting {
    /* Use outline so layout doesn't shift; outline-offset pulls it
       slightly inside the cell so it doesn't bleed into neighbours. */
    outline: 2px solid var(--accent-amber);
    outline-offset: -2px;
    border-radius: 6px;
    animation: correcting-pulse 1.6s ease-in-out infinite;
}
.gauge-group .gg-sub-labels {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;            /* 9 → 13 */
    color: var(--text);         /* white text */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    font-weight: 600;
}
.gauge-group .gg-sub-labels span {
    flex: 1;
}

/* Single-gauge legacy block (still used when not inside a gauge-group) */
.gauges-row:not(.gauges-row-coastal) .gauge {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 6px;
    height: 220px;
    display: flex;
    flex-direction: column;
}

/* Profile-driven visibility — hide elements when the required subsystem
   is disabled in the active mill profile. Toggled by hmi.js based on
   /api/profile.subsystems flags. */
.hidden { display: none !important; }

/* Numeric-only stat tiles — used for Shape RMS, coil diameters, length */
.num-indicator {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
.num-indicator .ni-label {
    font-size: 10px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.num-indicator .ni-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-green);
    font-variant-numeric: tabular-nums;
    line-height: 1.0;
}
.num-indicator .ni-unit {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}
.num-indicator.warn .ni-value {
    color: #F2C744;
}
.num-indicator.alarm .ni-value {
    color: #E15555;
}

/* ===== Shape target controls ===== */
.target-controls {
    margin-bottom: 12px;
}
.target-control-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 4px 0;
}
.target-control-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    flex: 1;
}
.target-control-divider {
    width: 1px;
    background: var(--border);
    margin: 0 4px;
}
.tc-label {
    font-size: 11px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    min-width: 45px;
}
.tc-btn {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    transition: background 0.1s;
}
.tc-btn:hover { background: var(--accent-blue-bright); color: white; }
.tc-btn:active { transform: scale(0.96); }
.tc-btn.preset {
    background: transparent;
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    min-width: 75px;
    font-size: 12px;
}
.tc-btn.preset:hover {
    background: var(--accent-amber);
    color: var(--bg-deep);
}
.tc-value {
    text-align: center;
    min-width: 100px;
}
.tc-value.boxed {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 12px;
    min-width: 90px;
}
.tc-value-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-green);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tc-value-unit {
    font-size: 9.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Compact variant for Process-tab placement — much smaller + centered.
   Single-row layout, narrow value box, tight buttons. Fits between
   Actual Shape and Shape Map without pushing the heatmap off-screen. */
.target-controls.compact { padding: 8px 12px; }
.target-controls.compact h3 { margin-bottom: 4px; font-size: 10px; }
.target-controls.compact .target-control-row {
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}
.target-controls.compact .target-control-group {
    padding: 0 6px;
    gap: 4px;
    flex: 0 0 auto;
}
.target-controls.compact .tc-label {
    font-size: 10px;
    min-width: 30px;
}
.target-controls.compact .tc-btn {
    min-width: 26px;
    padding: 3px 8px;
    font-size: 12px;
}
.target-controls.compact .tc-btn.preset {
    min-width: 50px;
    font-size: 10px;
    padding: 3px 8px;
}
.target-controls.compact .tc-value.boxed {
    padding: 2px 8px;
    min-width: 50px;
}
.target-controls.compact .tc-value-num { font-size: 16px; line-height: 1.1; }
.target-controls.compact .tc-value-unit { display: none; }
.target-controls.compact .target-control-divider {
    height: 22px;
    margin: 0 2px;
}

/* Inline variant used inside the Actual Shape panel on Process tab.
   Compact, centered, no panel chrome — sits directly under the bars. */
.target-control-row.inline {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.target-control-row.inline .target-control-group {
    padding: 0 6px;
    gap: 6px;
}
.target-control-row.inline .tc-btn {
    min-width: 28px;
    padding: 4px 10px;
    font-size: 13px;
}
.target-control-row.inline .tc-value.boxed {
    padding: 3px 12px;
    min-width: 60px;
}
.target-control-row.inline .tc-value-num { font-size: 18px; line-height: 1.1; }
.target-control-row.inline .tc-value-unit { display: none; }
.target-control-row.inline .target-control-divider {
    height: 24px;
}
.target-control-row.inline .tc-label {
    font-size: 11px;
    font-weight: 700;
}

/* ===== Stats tables ===== */
.stats {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.stats td {
    padding: 5px 4px;
    border-bottom: 1px solid var(--border);
}
.stats td:first-child { color: var(--text-muted); }
.stats td:last-child {
    text-align: right;
    color: var(--accent-green);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.stats tr:last-child td { border-bottom: none; }

/* ===== Bottom bar ===== */
.bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    padding: 5px 24px;
    font-size: 11px;
    display: flex;
    gap: 12px;
    z-index: 100;
}
.bottombar .spacer { flex: 1; }
#status-conn.connected { color: var(--accent-green); }
#status-conn.disconnected { color: var(--accent-red); }

/* Sprays-tab action hint — larger / brighter than the generic .subtle
   so the click-to-override affordance reads clearly. Used in the
   spray-chart panel header only. */
.action-hint {
    text-transform: none;
    letter-spacing: 0;
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 13px;
    margin-left: 14px;
}

/* ===== Spray zone editor (click-to-override) ===== */
/* Container must be positioned for the absolute editor to anchor to it. */
.panel-with-zone-editor { position: relative; }

.spray-zone-editor {
    position: absolute;
    top: 48px;       /* clear the panel <h3> header */
    right: 14px;     /* right edge of the manual editor panel */
    background: rgba(11, 20, 38, 0.96);
    border: 1px solid var(--accent-blue-bright);
    border-radius: 6px;
    padding: 14px 18px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    z-index: 50;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.spray-zone-editor.hidden { display: none; }
.sze-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.sze-zone-title {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sze-zone-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-blue-bright);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.sze-slider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    width: 36px;
    height: 180px;
    background: transparent;
    accent-color: var(--accent-blue-bright);
}
.sze-buttons {
    display: flex;
    gap: 6px;
    width: 100%;
}
.sze-btn {
    flex: 1;
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sze-btn:hover {
    background: var(--accent-blue-bright);
    color: white;
    border-color: var(--accent-blue-bright);
}

/* The Sprays-tab panel containing the spray chart needs to be a
   positioning context for the absolutely-positioned editor */
section[data-panel="sprays"] .panel:first-child {
    position: relative;
}

/* ===== Manual Pattern editor bar ===== */
.manual-pattern-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 4px 4px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.manual-pattern-bar .mp-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.manual-pattern-bar .mp-label {
    font-size: 10px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-right: 4px;
}
.manual-pattern-bar .mp-btn {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.manual-pattern-bar .mp-btn:hover {
    border-color: var(--accent-blue-bright);
    color: var(--text);
}
.manual-pattern-bar .mp-mirror.active {
    background: transparent;
    border-color: var(--accent-green);
    color: var(--accent-green);
}
.manual-pattern-bar .mp-slot {
    min-width: 28px;
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}
.manual-pattern-bar .mp-slot.empty {
    border-color: var(--border);
    color: var(--text-label);
    cursor: not-allowed;
    opacity: 0.55;
}
.manual-pattern-bar .mp-save {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
.manual-pattern-bar .mp-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
}
/* Apply button — prominent green, signals "push to controller" */
.manual-pattern-bar .mp-apply {
    background: var(--accent-green);
    color: var(--bg-deep);
    border-color: var(--accent-green);
    font-weight: 700;
    padding: 6px 16px;
}
.manual-pattern-bar .mp-apply:hover {
    background: var(--accent-green-dim);
    border-color: var(--accent-green-dim);
}
.manual-pattern-bar .mp-apply.mp-applied {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* ===== Numbered slot grid for saved manual patterns ===== */
.manual-pattern-slots {
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--bg-strip);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.mps-header {
    display: grid;
    grid-template-columns: 32px 1fr 180px;
    align-items: center;
    gap: 8px;
    padding: 2px 4px 4px;
    font-size: 10px;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.mps-col-actions { text-align: right; }
.mps-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto auto;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
}
.mps-row + .mps-row {
    border-top: 1px solid rgba(42,58,85,0.4);
}
.mps-num {
    color: var(--text-label);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.mps-name {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;
    width: 100%;
    font-family: inherit;
}
.mps-name:focus {
    outline: none;
    border-color: var(--accent-blue);
}
.mps-name::placeholder {
    color: var(--text-label);
    font-style: italic;
}
.mps-load.empty {
    opacity: 0.45;
}
.mps-delete {
    color: var(--accent-red);
    border-color: rgba(225,85,85,0.35);
}
.mps-delete:hover {
    background: rgba(225,85,85,0.12);
}

/* Editor +/- buttons flanking the slider */
.sze-slider-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}
.sze-step {
    width: 36px;
    height: 28px;
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--accent-blue-bright);
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.sze-step:hover {
    border-color: var(--accent-blue-bright);
    background: rgba(59, 130, 246, 0.12);
}
.sze-mirror-hint {
    color: var(--accent-green);
    font-size: 11px;
    margin-left: 8px;
}
.sze-mirror-hint.hidden { display: none; }

/* ===== Engineering Ctrl+H inspector ===== */
.inspect-tooltip {
    position: fixed;
    z-index: 1000;
    background: #0B1426;
    border: 1px solid var(--accent-amber);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    max-width: 360px;
}
.inspect-tooltip .tooltip-tag {
    font-family: 'Consolas', 'Menlo', monospace;
    color: var(--accent-amber);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px;
}
.inspect-tooltip .tooltip-desc {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}
.inspect-tooltip .tooltip-rw {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(143,166,191,0.25);
    font-size: 11px;
    line-height: 1.5;
}
.inspect-tooltip .tooltip-rw-label {
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    font-weight: 600;
}
.inspect-tooltip .tooltip-rw-val {
    color: var(--text);
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 11px;
}
.inspect-tooltip.hidden { display: none; }

body.inspect-mode [data-tag] {
    outline: 1px dashed transparent;
    cursor: help !important;
}
body.inspect-mode [data-tag]:hover {
    outline: 1px dashed var(--accent-amber);
    background-color: rgba(242, 177, 68, 0.06);
}

.inspect-badge {
    background: var(--accent-amber);
    color: var(--bg-deep);
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 10px;
    margin-left: 12px;
    letter-spacing: 0.05em;
}
.inspect-badge.hidden { display: none; }

/* ===== Diagnostics tab ===== */
.diag-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 12px;
}
.diag-btn {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text-bright);
    padding: 18px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, border-color 0.1s;
}
.diag-btn:hover {
    background: var(--bg-panel);
    border-color: var(--accent-green);
    color: var(--accent-green);
}
.diag-page.hidden { display: none; }
.diag-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
}
.diag-page-header h2 {
    margin: 0;
    color: var(--text-bright);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.diag-back {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
}
.diag-back:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* ===== Roll Load Cylinders sub-page ===== */
.rlc-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.rlc-status h3,
.rlc-servo h3,
.rlc-mode h3 {
    text-align: center;
}
.rlc-indicators {
    /* Sized to content + centered inside the panel — rows stay
       internally left-justified (dot left, text right). */
    width: auto;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 12px;
}
.rlc-indicators td {
    padding: 4px 6px;
    color: var(--text-bright);
}
.rlc-indicators td:first-child {
    width: 22px;
    text-align: center;
}
.ind {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2A3A55;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
}
.ind-green {
    background: radial-gradient(circle at 30% 30%, #6FE89A, #2A8C57);
    box-shadow: 0 0 4px rgba(63, 209, 124, 0.6);
}
.ind-red {
    background: radial-gradient(circle at 30% 30%, #FF7A7A, #B33636);
    box-shadow: 0 0 4px rgba(225, 85, 85, 0.6);
}
.ind-off {
    background: #2A3A55;
}

.rlc-servo-row {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    padding: 6px 0;
}
.rlc-meter-wrap {
    text-align: center;
}
.rlc-meter {
    width: 140px;
    height: 110px;
    display: block;
}
.rlc-meter-label {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.rlc-mill-speed {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-tile);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
}
.rlc-mill-speed-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rlc-mill-speed-val {
    font-size: 18px;
    color: var(--accent-green);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rlc-mill-speed-val .unit {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 4px;
}

.rlc-pos-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.rlc-side-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: stretch;
}
.rlc-load {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.rlc-bar-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rlc-bar-units {
    font-size: 10px;
    color: var(--text-muted);
}
.rlc-vbar {
    width: 38px;
    height: 220px;
    display: block;
}
.rlc-vbar.wide {
    width: 38px;
}
.rlc-pos {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rlc-pos-title {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}
.rlc-pos-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}
.rlc-pos-vals {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rlc-val-row {
    display: grid;
    grid-template-columns: auto 36px 1fr auto;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
}
.rlc-load-num {
    color: var(--accent-amber);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
}
.rlc-load-unit {
    color: var(--text-muted);
    font-size: 10px;
}
.rlc-val-label {
    color: var(--text-bright);
    font-weight: 600;
}
.rlc-val-num {
    color: var(--accent-green);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

.rlc-trends {
    padding: 8px;
}
.rlc-trend-row {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.rlc-trend {
    width: 100%;
    height: 160px;
    background: #2A3A55;
    border-radius: 3px;
    display: block;
}
.rlc-trend-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rlc-trend-side-label {
    font-size: 16px;
    color: var(--text-bright);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.rlc-legend {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.rlc-leg-red {
    background: #E15555;
    width: 14px;
    height: 8px;
    border-radius: 1px;
    display: inline-block;
}
.rlc-leg-blue {
    background: #4A90D9;
    width: 14px;
    height: 8px;
    border-radius: 1px;
    display: inline-block;
}

/* ===== Bending / Tilt tab (BLISS II only) ============================ */
/* Layout adapted from VAI SPY Mill Stand Control + Dual Cylinder Position
   Measurement — DS / NDS dual-column pattern for hydraulic stand actuators. */

.bending-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}
.bending-trend-panel { grid-column: 1 / span 2; }

.bending-table,
.tilt-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.bending-table th,
.bending-table td,
.tilt-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.bending-table th {
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 600;
    text-align: right;
    padding-bottom: 4px;
}
.bending-table th:first-child { text-align: left; }
.bending-table td:nth-child(n+2),
.tilt-table td:nth-child(2) {
    text-align: right;
    font-weight: 600;
    color: var(--text);
}
.bt-label {
    color: var(--text-muted);
    font-weight: 400;
}
.bt-ref { color: #E15555; }
.bt-act { color: #5DA8E0; }
.bt-act-big {
    font-size: 18px;
    color: #5DA8E0;
}

.bending-mode-toggle {
    float: right;
    display: inline-flex;
    gap: 4px;
    margin-top: -2px;
}
.bmode-btn,
.tmode-btn {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.bmode-btn.active,
.tmode-btn.active {
    background: transparent;
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* Manual jog buttons — red triangle pattern from Siemens reference */
.bending-jog,
.tilt-jog {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.bjog-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.bjog-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.bjog-divider {
    width: 1px;
    height: 56px;
    background: var(--border);
}
.jog-btn {
    background: var(--bg-tile);
    border: 1px solid var(--border);
    color: #E15555;
    padding: 6px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.jog-btn:hover {
    border-color: #E15555;
}
.jog-tilt {
    font-size: 11px;
    color: var(--text);
    padding: 8px 14px;
}

.tilt-visual {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.tilt-svg {
    width: 100%;
    height: 90px;
    display: block;
}

.bending-trend {
    width: 100%;
    height: 180px;
    display: block;
}


/* ===== M2 build: bottom-row gauge strip ===========================
   Keep ONLY Entry Tension, Mill Speed, Exit Tension at their original
   1fr column width. Hide the BLISS gauges; remaining 3 gauges auto-
   place into the first 3 columns; cols 4-9 stay blank on the right. */
.gauges-row-coastal {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.gauges-row-coastal .gauge-group[data-group="roll-bend"],
.gauges-row-coastal .gauge-group[data-group="total-load"],
.gauges-row-coastal .gauge-group[data-group="agc-corrs"],
.gauges-row-coastal .gauge-group[data-group="roll-gap"] {
    display: none !important;
}

/* M2 X-ray feedback: hide the ENTRY trace + legend; exit gauge only. */
.legend-entry { display: none !important; }

/* M2 build: center the MILL STATUS row under the mill schematic
   (CYLINDER STATUS removed). */
.speed-control-row.m2-center { justify-content: center; }

/* M2 build: hide the TILT control inside Actual Shape panels.
   (Targeted strip — keeps everything else visible.) */
.target-control-divider[data-requires="bending"],
.target-control-group[data-tag^="OCP_TILT_ADJUST"] {
    display: none !important;
}

/* M2 build: hide the Bending / Tilt tab button + its panel content. */
.tab[data-tab="bending"],
.tab-panel[data-panel="bending"] {
    display: none !important;
}

/* M2 build: hide the AFC enable row (AFC Bend / AFC Steer / AFC Sprays). */
.afc-row { display: none !important; }

/* M2 build: hide the Diagnostics and Trends tab buttons + panels. */
.tab[data-tab="diagnostics"],
.tab[data-tab="trends"],
.tab-panel[data-panel="diagnostics"],
.tab-panel[data-panel="trends"] {
    display: none !important;
}

/* M2 build: do not box the SPRAY LEVELS panel when a spray
   correction is in progress. */
#process-sprays.correcting,
.panel:has(#process-sprays).correcting {
    outline: none !important;
    animation: none !important;
}

/* M2 build: center the BOW + EDGE row under the Actual Shape chart.
   With the TILT control hidden, group BOW and EDGE close together
   in the middle of the row instead of pinning them to the edges. */
.target-control-row {
    justify-content: center;
}
.target-control-row .target-control-group {
    flex: 0 0 auto;       /* don't stretch — keep natural width */
}
.target-control-row .target-control-group + .target-control-group {
    margin-left: 32px;    /* small gap between BOW and EDGE */
}

/* M2 first-drop "Process tab only for Santiago" hide-rule REMOVED
   2026-05-20 — Setup / Permissives / Shape / Sprays / Vidimon tabs and
   panels are now visible again per the Dennis-demo / full-fidelity work.
   Bending/Tilt and Diagnostics/Trends remain hidden via the rules above. */