/* ============================================================================
   BOF Digital Twin — operator dashboard design system
   Dark (default) + light themes via html[data-theme].
   Self-hosted Inter typography, hand-rolled SVG charts, CSS only.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("assets/fonts/InterVariable.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root,
html[data-theme="dark"] {
    /* Brand — Danieli Corus orange kept; surfaces are black/charcoal (no blue shell). */
    --dc-orange: #ef3e23;
    --dc-blue: #1f3465;
    --dc-orange-rgb: 239, 62, 35;
    --dc-blue-rgb: 31, 52, 101;
    --neutral-rgb: 255, 255, 255;

    /* Surfaces — black and charcoal shades */
    --bg: #050505;
    --bg-raised: #0c0c0c;
    --panel: #121212;
    --panel-2: #1a1a1a;
    --border: rgba(var(--neutral-rgb), 0.12);
    --border-strong: rgba(var(--neutral-rgb), 0.22);

    /* Text */
    --text: #ececec;
    --text-dim: #a8a8a8;
    --text-faint: #747474;
    --text-strong: #ffffff;

    --molten-1: var(--dc-orange);
    --molten-2: #ff8a4c;
    --molten-glow: rgba(var(--dc-orange-rgb), 0.32);
    --steel-blue: #cfcfcf;
    --steel-blue-dim: rgba(var(--neutral-rgb), 0.18);

    /* Status */
    --ok: #3fd068;
    --ok-dim: rgba(63, 208, 104, 0.12);
    --warn: #e8b13f;
    --warn-dim: rgba(232, 177, 63, 0.12);
    --bad: #ff5c5c;
    --bad-dim: rgba(255, 92, 92, 0.12);

    --card-bg: linear-gradient(165deg, #171717 0%, #101010 100%);
    --card-border: rgba(var(--neutral-rgb), 0.12);
    --card-title: rgba(236, 236, 236, 0.92);
    --card-title-border: rgba(var(--neutral-rgb), 0.10);
    --kpi-label: rgba(255, 179, 154, 0.75);
    --sidebar-bg: #0a0a0a;
    --sidebar-border: rgba(var(--dc-orange-rgb), 0.28);
    --sidebar-section: rgba(255, 179, 154, 0.7);
    --sidebar-nav: rgba(236, 236, 236, 0.78);
    --sidebar-nav-hover-bg: rgba(var(--neutral-rgb), 0.06);
    --sidebar-nav-hover: #ffffff;
    --sidebar-nav-active-bg: linear-gradient(90deg, rgba(var(--dc-orange-rgb), 0.28), rgba(var(--dc-orange-rgb), 0.06));
    --sidebar-nav-active-border: rgba(var(--dc-orange-rgb), 0.55);
    --sidebar-nav-active: #ffffff;
    --sidebar-badge-bg: rgba(var(--dc-orange-rgb), 0.16);
    --sidebar-badge-fg: #ffb39a;
    --sidebar-badge-border: rgba(var(--dc-orange-rgb), 0.28);
    --sidebar-user-bg: rgba(var(--neutral-rgb), 0.04);
    --sidebar-user-border: rgba(var(--neutral-rgb), 0.10);
    --sidebar-divider: rgba(var(--neutral-rgb), 0.10);
    --sidebar-toggle-bg: rgba(var(--dc-orange-rgb), 0.12);
    --sidebar-toggle-border: rgba(var(--neutral-rgb), 0.16);
    --sidebar-toggle-fg: #ffffff;
    --sidebar-toggle-bar-bg: rgba(var(--neutral-rgb), 0.08);
    --sidebar-toggle-bar-border: rgba(var(--neutral-rgb), 0.18);
    --brand-name: #fff;
    --brand-sub: rgba(255, 179, 154, 0.8);
    --body-glow-1: rgba(var(--dc-orange-rgb), 0.06);
    --body-glow-2: transparent;
    --vessel-stage-bg: #050505;
    --vessel-hud-bg: rgba(12, 12, 12, 0.88);
    --badge-info-fg: #e5e5e5;
    --topbar-bg: #0a0a0a;
    --topbar-border: rgba(var(--dc-orange-rgb), 0.22);
    --placeholder-bg:
        radial-gradient(ellipse at 40% 35%, rgba(239, 62, 35, 0.10), transparent 55%),
        linear-gradient(165deg, #141414 0%, #0a0a0a 55%, #111111 100%);
    --row-hover: rgba(var(--neutral-rgb), 0.05);
    --hp-surface: rgba(0, 0, 0, 0.28);
    --spark-surface: rgba(0, 0, 0, 0.32);
    --topbar-label: rgba(255, 179, 154, 0.85);
    --surface-page: #050505;
    --surface-card: linear-gradient(165deg, #171717 0%, #101010 100%);
    --surface-subtle: rgba(var(--neutral-rgb), 0.04);
    --surface-muted: rgba(var(--neutral-rgb), 0.03);
    --surface-hover: rgba(var(--neutral-rgb), 0.05);
    --surface-selected: rgba(var(--dc-orange-rgb), 0.14);
    --surface-warning: linear-gradient(90deg, rgba(232, 177, 63, 0.14), rgba(8, 8, 8, 0.55));
    --surface-info: rgba(var(--neutral-rgb), 0.12);
    --surface-control: rgba(18, 18, 18, 0.92);
    --surface-profile: radial-gradient(500px 220px at 100% 0%, rgba(var(--dc-orange-rgb), 0.10), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel));
    --surface-hero: radial-gradient(700px 300px at 90% 0%, rgba(239, 62, 35, 0.10), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel));
    --surface-progress: radial-gradient(520px 160px at 100% 0%, rgba(239, 62, 35, 0.06), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel));
    --surface-chart: var(--bg-raised);
    --surface-clock: var(--panel);
    --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --card-top-border: var(--card-border);
    --kpi-top-border: rgba(var(--dc-orange-rgb), 0.55);
    --plain-badge-bg: rgba(var(--neutral-rgb), 0.08);
    --plain-badge-border: rgba(var(--neutral-rgb), 0.14);
    --elevated-shadow: none;
    --on-control: #ececec;
    --on-accent: #ffffff;
    --accent-soft: rgba(var(--neutral-rgb), 0.10);
    --accent-soft-strong: rgba(var(--neutral-rgb), 0.18);
    --model-m1-accent: #f0f0f0;

    /* Chart palette — consumed by inline SVG in DashboardSvg, so it must be theme-aware. */
    --chart-ink: #f4f4f4;
    --chart-track: #242424;
    --chart-grid: #2b2b2b;
    --chart-grid-strong: #3d3d3d;
    --chart-axis: #4d4d4d;
    --chart-text: #bdbdbd;
    --chart-text-faint: #8f8f8f;
    --chart-halo: #0b0b0b;
    --chart-series: #e8e8e8;
    --chart-ok: #3fd068;
    --chart-measured: #ffb300;
    --chart-alert: #ef3e23;

    --radius: 8px;
    --radius-sm: 6px;
    --shell-sidebar: 240px;
    --shell-topbar: 56px;
    --shell-sidebar-compact: 64px;

    --font: "Inter", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;

    /* One family across the console. --mono is kept as an alias rather than deleted:
       it still marks "this is a figure, not prose", and that distinction is now carried
       by OpenType features and weight instead of by a second typeface. */
    --mono: var(--font);
    color-scheme: dark;
}

html[data-theme="light"] {
    --bg: #ffffff;
    --bg-raised: #ffffff;
    --panel: #ffffff;
    --panel-2: #f4f7fb;
    --border: rgba(var(--dc-blue-rgb), 0.20);
    --border-strong: rgba(var(--dc-blue-rgb), 0.34);

    --text: #18233a;
    --text-dim: #45557a;
    --text-faint: #64749a;
    --text-strong: #0b1326;

    --molten-1: var(--dc-orange);
    --molten-2: #d6451f;
    --molten-glow: rgba(var(--dc-orange-rgb), 0.16);
    --steel-blue: #2f4f99;
    --steel-blue-dim: rgba(var(--dc-blue-rgb), 0.35);

    --ok: #15803d;
    --ok-dim: rgba(21, 128, 61, 0.14);
    --warn: #a16207;
    --warn-dim: rgba(161, 98, 7, 0.14);
    --bad: #b91c1c;
    --bad-dim: rgba(185, 28, 28, 0.12);

    --card-bg: #ffffff;
    --card-border: rgba(var(--dc-blue-rgb), 0.16);
    --card-title: rgba(31, 52, 101, 0.92);
    --card-title-border: rgba(var(--dc-blue-rgb), 0.12);
    --kpi-label: rgba(var(--dc-orange-rgb), 0.9);
    --sidebar-bg: #f5f7fb;
    --sidebar-border: rgba(var(--dc-blue-rgb), 0.14);
    --sidebar-section: rgba(var(--dc-blue-rgb), 0.55);
    --sidebar-nav: #314261;
    --sidebar-nav-hover-bg: rgba(var(--dc-blue-rgb), 0.06);
    --sidebar-nav-hover: #0b1326;
    --sidebar-nav-active-bg: rgba(var(--dc-orange-rgb), 0.10);
    --sidebar-nav-active-border: rgba(var(--dc-orange-rgb), 0.35);
    --sidebar-nav-active: #0b1326;
    --sidebar-badge-bg: rgba(var(--dc-orange-rgb), 0.12);
    --sidebar-badge-fg: #c2410c;
    --sidebar-badge-border: rgba(var(--dc-orange-rgb), 0.28);
    --sidebar-user-bg: #ffffff;
    --sidebar-user-border: rgba(var(--dc-blue-rgb), 0.14);
    --sidebar-divider: rgba(var(--dc-blue-rgb), 0.12);
    --sidebar-toggle-bg: rgba(var(--dc-blue-rgb), 0.06);
    --sidebar-toggle-border: rgba(var(--dc-blue-rgb), 0.18);
    --sidebar-toggle-fg: #1f3465;
    --sidebar-toggle-bar-bg: rgba(var(--dc-blue-rgb), 0.08);
    --sidebar-toggle-bar-border: rgba(var(--dc-blue-rgb), 0.22);
    --brand-name: #0b1326;
    --brand-sub: #5b6b88;
    --body-glow-1: transparent;
    --body-glow-2: transparent;
    --vessel-stage-bg: #e8eef8;
    --vessel-hud-bg: rgba(255, 255, 255, 0.9);
    --badge-info-fg: #1f3465;
    --topbar-bg: #ffffff;
    --topbar-border: rgba(var(--dc-blue-rgb), 0.16);
    --placeholder-bg:
        radial-gradient(ellipse at 40% 35%, rgba(239, 62, 35, 0.10), transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(31, 52, 101, 0.10), transparent 50%),
        linear-gradient(165deg, #eef2f9 0%, #dfe6f2 55%, #e9eef7 100%);
    --row-hover: rgba(31, 52, 101, 0.07);
    --hp-surface: rgba(31, 52, 101, 0.05);
    --spark-surface: #f6f8fc;
    --topbar-label: rgba(var(--dc-orange-rgb), 0.9);
    --surface-page: #ffffff;
    --surface-card: #ffffff;
    --surface-subtle: #f7f9fc;
    --surface-muted: #f3f6fb;
    --surface-hover: rgba(var(--dc-blue-rgb), 0.05);
    --surface-selected: rgba(var(--dc-blue-rgb), 0.09);
    --surface-warning: #fffaf0;
    --surface-info: rgba(var(--dc-blue-rgb), 0.09);
    --surface-control: rgba(255, 255, 255, 0.92);
    --surface-profile: radial-gradient(500px 220px at 100% 0%, rgba(var(--dc-blue-rgb), 0.08), transparent 55%), #ffffff;
    --surface-hero: #ffffff;
    --surface-progress: #ffffff;
    --surface-chart: #f8fafd;
    --surface-clock: var(--panel-2);
    --card-shadow: 0 1px 3px rgba(31, 52, 101, 0.10);
    --card-top-border: rgba(var(--dc-blue-rgb), 0.18);
    --kpi-top-border: rgba(var(--dc-orange-rgb), 0.75);
    --plain-badge-bg: rgba(var(--dc-blue-rgb), 0.08);
    --plain-badge-border: rgba(var(--dc-blue-rgb), 0.18);
    --elevated-shadow: 0 2px 8px rgba(31, 52, 101, 0.07);
    --on-control: var(--dc-blue);
    --on-accent: #ffffff;
    --accent-soft: rgba(var(--dc-blue-rgb), 0.10);
    --accent-soft-strong: rgba(var(--dc-blue-rgb), 0.18);
    --model-m1-accent: #4568b2;

    --chart-ink: #16203a;
    --chart-track: #e9eef6;
    --chart-grid: #e3e9f2;
    --chart-grid-strong: #cbd5e3;
    --chart-axis: #aab8cb;
    --chart-text: #5a6a86;
    --chart-text-faint: #8493ab;
    --chart-halo: #ffffff;
    --chart-series: #2f4f99;
    --chart-ok: #157f3c;
    --chart-measured: #b45309;
    --chart-alert: #c2321a;
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(1000px 480px at 90% -8%, var(--body-glow-1), transparent 58%),
        radial-gradient(900px 600px at -8% 100%, var(--body-glow-2), transparent 58%),
        var(--surface-page);
    color: var(--text);
    font-family: var(--font);
    font-optical-sizing: auto;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--steel-blue); text-decoration: none; }
a:hover { color: var(--dc-orange); }

/* Visible keyboard focus for nav, buttons, links, rows. */
.nav-item:focus-visible,
.sidebar-user:focus-visible,
.mh-family-btn:focus-visible,
.ah-node-row:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--dc-orange);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Respect reduced motion for live pulses and row flashes. */
@media (prefers-reduced-motion: reduce) {
    .live-dot,
    .row-in,
    .demo-mode-banner,
    .coming-soon-banner {
        animation: none !important;
        transition: none !important;
    }
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-faint);
    margin: 0 0 10px;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--dc-orange); }
.breadcrumb-sep { color: var(--text-faint); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* Shared empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 18px;
    text-align: center;
    color: var(--text-dim);
}
.empty-state .empty-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--steel-blue);
}
.empty-state p { margin: 0; font-size: 13px; }
.empty-state .empty-cta { margin-top: 4px; }

.alarm-ack {
    cursor: pointer;
    font: inherit;
    background: transparent;
}
.alarm-ack:hover {
    border-color: var(--dc-orange);
    color: var(--dc-orange);
}

/* ── App shell ─────────────────────────────────────────────────────────── */

.shell {
    display: grid;
    grid-template-columns: var(--shell-sidebar) 1fr;
    grid-template-rows: var(--shell-topbar) auto 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar banner"
        "sidebar main";
    height: 100vh;
    transition: grid-template-columns 0.2s ease;
}
.demo-mode-banner {
    grid-area: banner;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 7px 18px;
    border-bottom: 1px solid rgba(232, 177, 63, 0.35);
    background: var(--surface-warning);
    font-size: 12.5px;
    color: var(--text-dim);
}
.demo-mode-banner .spacer { flex: 1; }
.demo-mode-banner .faint { color: var(--text-faint); }

.coming-soon-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 8px 14px;
    border: 1px solid rgba(232, 177, 63, 0.4);
    border-radius: var(--radius);
    background: var(--surface-warning);
    font-size: 12.5px;
    color: var(--text-dim);
}
.coming-soon-banner .spacer { flex: 1; }
.coming-soon-banner .faint { color: var(--text-faint); }

.vessel-coming-soon {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    pointer-events: none;
}
.vessel-stage-full .vessel-coming-soon {
    right: 52px; /* clear fullscreen control on Asset Twin */
}
.vessel-coming-soon .badge {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vessel-stage-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--placeholder-bg);
}

.vessel-placeholder-msg {
    position: relative;
    z-index: 1;
    max-width: 360px;
    text-align: center;
    padding: 22px 24px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}

.vessel-placeholder-msg p {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.45;
}

.overview-vessel-panel .vessel-placeholder-msg::before {
    content: "3D";
    display: block;
    margin: 0 auto 12px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: var(--accent-soft);
    color: var(--text-strong);
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 800;
    line-height: 56px;
    letter-spacing: 0.04em;
}
.export-btn {
    cursor: pointer;
    font: inherit;
    border: 1px solid var(--border-strong);
}
.export-btn:hover { border-color: var(--steel-blue); color: var(--text-strong); }
a.mono { color: var(--steel-blue); text-decoration: none; }
a.mono:hover { text-decoration: underline; }

/* Collapse via checkbox + :has (no InteractiveServer on layout — Body cannot serialize). */
.sidebar-collapse-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.shell:has(.sidebar-collapse-check:checked) {
    --shell-sidebar: var(--shell-sidebar-compact);
    grid-template-columns: var(--shell-sidebar) 1fr;
}

/* Sidebar */
.sidebar {
    grid-area: sidebar;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 0 0 14px;
    overflow-y: auto;
    overflow-x: hidden;
}

.brand {
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--sidebar-divider);
    margin-bottom: 8px;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Original logo on white chip — readable on navy sidebar */
.brand-chip {
    display: block;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 0 18px var(--molten-glow);
    flex: 1;
    min-width: 0;
}

.brand-chip img {
    display: block;
    width: 100%;
    max-width: 156px;
    height: auto;
}

.brand-logo {
    display: block;
    width: 100%;
    max-width: 156px;
    height: auto;
}

.brand-name {
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 12px;
    color: var(--brand-name);
}
.brand-sub {
    font-size: 11px;
    color: var(--brand-sub);
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.brand-text { min-width: 0; }

/* Compact menu — symbols only */
.shell:has(.sidebar-collapse-check:checked) .brand {
    padding: 12px 8px 10px;
    margin-bottom: 6px;
}
.shell:has(.sidebar-collapse-check:checked) .brand-text,
.shell:has(.sidebar-collapse-check:checked) .brand-logo,
.shell:has(.sidebar-collapse-check:checked) .brand-chip,
.shell:has(.sidebar-collapse-check:checked) .nav-label,
.shell:has(.sidebar-collapse-check:checked) .nav-badge,
.shell:has(.sidebar-collapse-check:checked) .nav-section-label,
.shell:has(.sidebar-collapse-check:checked) .sidebar-foot,
.shell:has(.sidebar-collapse-check:checked) .sidebar-user-meta,
.shell:has(.sidebar-collapse-check:checked) .sidebar-toggle-text {
    display: none !important;
}
.shell:has(.sidebar-collapse-check:checked) .brand-row {
    justify-content: center;
}
/* Compact menu keeps the brand symbol in place of the full logo */
.brand-chip-compact {
    display: none;
    padding: 6px 7px;
    flex: none;
}
.brand-chip-compact img { max-width: 34px; }
.shell:has(.sidebar-collapse-check:checked) .brand-chip-compact {
    display: block !important;
}
.shell:has(.sidebar-collapse-check:checked) .nav-item {
    justify-content: center;
    margin: 3px 8px;
    padding: 12px 0;
    gap: 0;
}
.shell:has(.sidebar-collapse-check:checked) .nav-item svg {
    width: 22px;
    height: 22px;
    opacity: 1;
}
.shell:has(.sidebar-collapse-check:checked) .sidebar-user {
    justify-content: center;
    margin-left: 8px;
    margin-right: 8px;
    padding: 10px 0;
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--sidebar-toggle-border);
    background: var(--sidebar-toggle-bg);
    color: var(--sidebar-toggle-fg);
    cursor: pointer;
    flex: none;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    user-select: none;
}
.sidebar-toggle:hover {
    color: var(--sidebar-toggle-fg);
    border-color: rgba(var(--dc-orange-rgb), 0.55);
    background: rgba(var(--dc-orange-rgb), 0.18);
}
.sidebar-toggle-bar {
    margin-right: 4px;
    padding: 0;
    width: 36px;
    background: var(--sidebar-toggle-bar-bg);
    border-color: var(--sidebar-toggle-bar-border);
    color: var(--sidebar-toggle-fg);
}
.sidebar-toggle-bar:hover {
    background: rgba(var(--dc-orange-rgb), 0.16);
    border-color: rgba(var(--dc-orange-rgb), 0.45);
    color: var(--dc-orange);
}
.sidebar-toggle-text {
    line-height: 1;
}
.icon-when-collapsed,
.text-when-collapsed { display: none; }
.shell:has(.sidebar-collapse-check:checked) .icon-when-expanded,
.shell:has(.sidebar-collapse-check:checked) .text-when-expanded { display: none; }
.shell:has(.sidebar-collapse-check:checked) .icon-when-collapsed { display: block; }
.shell:has(.sidebar-collapse-check:checked) .text-when-collapsed { display: none; }

.nav-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sidebar-section);
    padding: 14px 18px 6px;
}

.sidebar a.nav-item,
.sidebar .nav-item {
    color: var(--sidebar-nav);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 1px 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-weight: 500;
    border: 1px solid transparent;
    /* Do not transition color — theme toggles must flip text instantly. */
    transition: background 0.15s, border-color 0.15s;
}

.sidebar a.nav-item:hover,
.sidebar .nav-item:hover,
.nav-item:hover {
    background: var(--sidebar-nav-hover-bg);
    color: var(--sidebar-nav-hover);
}

.sidebar a.nav-item.active,
.sidebar .nav-item.active,
.nav-item.active {
    background: var(--sidebar-nav-active-bg);
    border-color: var(--sidebar-nav-active-border);
    color: var(--sidebar-nav-active);
    box-shadow: inset 3px 0 0 var(--dc-orange);
}

.nav-item svg { width: 17px; height: 17px; flex: none; opacity: 0.95; }

.nav-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    background: var(--sidebar-badge-bg);
    color: var(--sidebar-badge-fg);
    border: 1px solid var(--sidebar-badge-border);
}

.sidebar-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--sidebar-user-border);
    border-radius: var(--radius-sm);
    background: var(--sidebar-user-bg);
    color: var(--sidebar-nav);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.sidebar-user:hover,
.sidebar-user.active {
    background: var(--panel-2);
    border-color: var(--border-strong);
    color: var(--text);
}
.sidebar-user-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--dc-blue), rgba(var(--dc-orange-rgb), 0.55));
    border: 1px solid rgba(var(--dc-orange-rgb), 0.45);
    color: var(--text);
}
.sidebar-user-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sidebar-user-name {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 11px;
    color: var(--text-faint);
}

.sidebar-foot {
    padding: 12px 18px 0;
    border-top: 1px solid var(--sidebar-border);
    font-size: 11px;
    color: var(--brand-sub);
    line-height: 1.6;
}

/* Top bar */
.topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 22px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    backdrop-filter: blur(8px);
}

.topbar-title { font-size: 15px; font-weight: 650; }
.topbar-crumb { color: var(--text-faint); font-weight: 400; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.topbar-site {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.topbar-site-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.topbar-site-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--topbar-label);
}
.topbar-site-value {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-site-page .topbar-site-value {
    color: var(--text-dim);
    font-weight: 550;
}
.topbar-site-sep {
    width: 1px;
    height: 28px;
    background: var(--border-strong);
    flex: none;
}

.clock {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-dim);
    padding: 5px 10px;
    background: var(--surface-clock);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Main area */
.main {
    grid-area: main;
    overflow-y: auto;
    padding: 20px 24px 40px;
    background: var(--surface-page);
}

.page-head { margin: 2px 0 18px; }
.page-head h1 {
    font-size: 20px;
    margin: 0 0 4px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-strong);
}
.page-head .muted { margin: 0; max-width: 62ch; }

/* ── Primitives ────────────────────────────────────────────────────────── */

.muted { color: var(--text-dim); font-size: 12.5px; }
.faint { color: var(--text-faint); }
.mono { font-family: var(--mono); }

.card {
    background: var(--surface-card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    border-top: 2px solid var(--card-top-border);
    box-shadow: var(--card-shadow);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--card-title);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-title-border);
}

.card-title .spacer { margin-left: auto; }

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
    .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid.cols-3 { grid-template-columns: 1fr; }
    .grid.cols-2 { grid-template-columns: 1fr; }
}

/* KPI cards */
.kpi { display: flex; flex-direction: column; gap: 6px; }
.card.kpi {
    border-top-color: var(--kpi-top-border);
}
.kpi-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kpi-label);
}
.kpi-value {
    font-size: 28px;
    font-weight: 750;
    font-family: var(--mono);
    letter-spacing: -0.02em;
    color: var(--text-strong);
}
.kpi-value .unit { font-size: 13px; color: var(--text-dim); font-weight: 550; margin-left: 3px; }
.kpi-sub { font-size: 11.5px; color: var(--text-dim); }

/* Badges + status */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 650;
    padding: 3px 9px;
    border-radius: 99px;
    border: 1px solid transparent;
}

.badge.ok    { background: var(--ok-dim);   color: var(--ok);   border-color: rgba(63, 208, 104, 0.3); }
.badge.warn  { background: var(--warn-dim); color: var(--warn); border-color: rgba(232, 177, 63, 0.3); }
.badge.bad   { background: var(--bad-dim);  color: var(--bad);  border-color: rgba(255, 92, 92, 0.3); }
.badge.info  { background: var(--surface-info); color: var(--badge-info-fg); border-color: var(--border-strong); }
.badge.plain { background: var(--plain-badge-bg); color: var(--text-dim); border-color: var(--plain-badge-border); }

.live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(63, 208, 104, 0.5);
    vertical-align: middle;
    margin-right: 2px;
    animation: pulse 1.4s infinite, blink-dot 1.4s infinite;
}

.live-dot.idle { background: var(--text-faint); animation: none; box-shadow: none; opacity: 1; }

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(63, 208, 104, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(63, 208, 104, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 208, 104, 0); }
}

@keyframes blink-dot {
    0%, 100% { opacity: 1; }
    45%      { opacity: 1; }
    55%      { opacity: 0.25; }
}

/* ── Tables ────────────────────────────────────────────────────────────── */

table { border-collapse: collapse; width: 100%; font-size: 12.8px; }

th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}

td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--row-hover); }
tbody tr:first-child { animation: row-in 0.5s ease-out; }

@keyframes row-in {
    from { background: rgba(239, 62, 35, 0.16); }
    to   { background: transparent; }
}

td .num { font-family: var(--mono); }
.val-strong { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.hit  { color: var(--ok); font-weight: 700; }
.miss { color: var(--text-faint); font-weight: 700; }

/* ── Charts / SVG ──────────────────────────────────────────────────────── */

.chart-frame { width: 100%; }
.chart-frame svg { width: 100%; height: auto; display: block; }

/* Hero panel */
.hero {
    border: 1px solid var(--border-strong);
    background: var(--surface-hero);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.hero-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.hero-heat { font-size: 21px; font-weight: 800; font-family: var(--mono); letter-spacing: -0.01em; }

.stat-row { display: flex; gap: 26px; flex-wrap: wrap; margin: 10px 0 4px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.stat-value { font-size: 21px; font-weight: 750; font-family: var(--mono); color: var(--text); }
.stat-value.molten { color: var(--molten-2); text-shadow: 0 0 16px var(--molten-glow); }
.stat-value.blue { color: var(--steel-blue); }
.stat-value .unit { font-size: 12px; color: var(--text-dim); margin-left: 2px; }

/* 3D vessel page */
.vessel-stage {
    position: relative;
    height: min(66vh, 640px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 38%, rgba(28, 42, 68, 0.55), transparent 62%),
        var(--vessel-stage-bg);
}
.vessel-stage::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.48);
    z-index: 1;
}
.vessel-stage .vessel-hud,
.vessel-stage .vessel-fs-btn {
    z-index: 2;
}

.vessel-stage canvas { display: block; width: 100%; height: 100%; }

.vessel-hud {
    position: absolute;
    top: 14px; left: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.vessel-hud .card { padding: 10px 14px; background: var(--vessel-hud-bg); backdrop-filter: blur(6px); }

.vessel-note {
    position: absolute;
    bottom: 14px; left: 14px; right: 14px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

.vessel-stage-full {
    height: min(78vh, 780px);
}

.vessel-fs-btn {
    position: absolute;
    top: 14px; right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--surface-control);
    backdrop-filter: blur(6px);
    color: var(--on-control);
    cursor: pointer;
}
.vessel-fs-btn:hover {
    color: #fff;
    border-color: rgba(var(--dc-orange-rgb), 0.55);
    background: rgba(var(--dc-orange-rgb), 0.28);
}

.vessel-stage:fullscreen {
    height: 100%;
    border: none;
    border-radius: 0;
}
.vessel-stage:fullscreen canvas {
    width: 100%;
    height: 100%;
}

.vessel-stage-dash {
    height: min(52vh, 480px);
    border-radius: var(--radius-sm);
}
.ent-vessel-panel .vessel-stage-dash { min-height: 320px; }

/* Enterprise /views dashboard composition */
.ent-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ent-head-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ent-primary {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.85fr);
    gap: 14px;
    align-items: stretch;
}
.ent-dash-3 {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr) minmax(320px, 1fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 14px;
}
.ent-charts-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
}
.ent-charts-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
}
.ent-priority-telemetry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ent-priority-telemetry .ent-panel-chart { min-height: 220px; }
.ent-charts-3 .ent-panel-chart,
.ent-charts-2 .ent-panel-chart {
    min-height: 200px;
}
@media (max-width: 1200px) {
    .ent-charts-3,
    .ent-charts-2 { grid-template-columns: 1fr; }
}
.ent-recent-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
}
.ent-recent-3 .card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ent-recent-3 .card-title { flex-shrink: 0; }
.ent-recent-3 table { font-size: 12px; min-width: 320px; }

/* Horizontal scroll for dense prediction tables — keeps card width stable */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0 -2px;
    padding-bottom: 2px;
}
.table-scroll table { width: max-content; min-width: 100%; }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb {
    background: var(--accent-soft-strong);
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.ent-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.ent-pt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
}
.ent-pt-grid .ent-panel {
    min-height: 0;
}
.pt-kpi { margin-bottom: 14px; }
.pt-chart-lg { min-height: 240px; }
.pt-scatter { min-height: 280px; justify-content: center; }
.pt-scatter svg { max-width: 360px; }
.pt-carbon-stats .stat-value { font-size: 18px; }
.pt-carbon-stats .stat-value .unit { font-size: 11px; }
@media (max-width: 1200px) {
    .ent-pt-grid { grid-template-columns: 1fr; }
}
.ent-ops-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
}

/* Asset Twin + Asset Hierarchy */
.ent-asset-chrome {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ent-asset-chrome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 0;
}
.ent-asset-chrome-left,
.ent-asset-chrome-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.ent-asset-chrome-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.ent-asset-chrome .ent-asset-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.ent-asset-chrome .badge { font-size: 10.5px; padding: 2px 7px; }
.ent-asset-chrome .heat-progress {
    margin-bottom: 0;
}
.ent-asset-identity {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--hp-surface);
}
.ent-asset-id-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ent-asset-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.ent-asset-id-meta {
    margin-top: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ent-asset-twin-layout {
    /* Single column since the side panel was removed: the scene IS the page. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}
.ent-asset-twin-layout .vessel-stage-full { min-height: min(68vh, 640px); }
.ent-asset-side { min-width: 0; }
.ent-asset-side-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ent-asset-side-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
/* System Health */
.sh-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 12px;
    align-items: start;
}
.sh-table { min-width: 720px; }
.sh-target {
    font-size: 11.5px;
    color: var(--text-dim);
    max-width: 220px;
    word-break: break-word;
}
.sh-side { min-width: 0; }
.sh-endpoint-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.sh-endpoint {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
}
.sh-endpoint-top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.sh-endpoint-name { font-size: 13px; font-weight: 650; }
.sh-endpoint-path {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    word-break: break-all;
}
.sh-note {
    font-size: 12px;
    line-height: 1.45;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.sh-note p { margin: 0 0 8px; }
@media (max-width: 980px) {
    .sh-layout { grid-template-columns: 1fr; }
}

/* Model Health — family + variant registry */
.ent-kpi-strip.mh-kpi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}
.mh-kpi-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    min-height: 108px;
}
.mh-kpi-card .kpi-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mh-kpi-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-height: 32px;
}
.mh-kpi-value-row .kpi-value {
    font-size: 26px;
    line-height: 1;
    margin: 0;
}
.mh-kpi-value-row .badge {
    flex-shrink: 0;
}
.mh-kpi-gap .kpi-value { color: var(--warn, #e0a54f); }

.mh-layout {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}
.mh-families,
.mh-detail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mh-families .card-title,
.mh-detail .card-title {
    flex-shrink: 0;
    align-items: center;
    min-height: 28px;
    margin-bottom: 10px;
}
.mh-detail .card-title > span:first-child {
    white-space: nowrap;
}
.mh-detail .card-title .badge {
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh-family-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mh-family-btn {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    text-align: left;
    padding: 12px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    color: var(--text);
    cursor: pointer;
}
.mh-family-btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.mh-family-btn.active {
    border-color: var(--border-strong);
    background: var(--surface-selected);
}
.mh-family-id {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 750;
    color: var(--steel-blue);
    line-height: 1;
}
.mh-family-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.mh-family-name {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
}
.mh-family-sub {
    font-size: 11px;
    line-height: 1.25;
}
.mh-family-ver {
    flex-shrink: 0;
    white-space: nowrap;
}

.mh-detail .table-scroll {
    flex: 1;
    min-height: 0;
}
.mh-variant-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}
.mh-variant-table th,
.mh-variant-table td {
    vertical-align: middle;
    padding: 9px 12px;
    text-align: left;
}
.mh-variant-table th.num,
.mh-variant-table td.num {
    text-align: right;
}
.mh-variant-table th:nth-child(1),
.mh-variant-table td:nth-child(1) { width: 78px; }
.mh-variant-table th:nth-child(2),
.mh-variant-table td:nth-child(2) { width: 104px; }
.mh-variant-table th:nth-child(4),
.mh-variant-table td:nth-child(4) { width: 148px; }
.mh-variant-table th:nth-child(5),
.mh-variant-table td:nth-child(5) { width: 96px; }
.mh-variant-table th:nth-child(6),
.mh-variant-table td:nth-child(6) { width: 108px; }
.mh-variant-table th:nth-child(7),
.mh-variant-table td:nth-child(7) { width: 84px; }
.mh-variant-table tbody tr { cursor: pointer; }
.mh-variant-table tbody tr:hover td { background: var(--surface-hover); }
.mh-variant-table tbody tr.mh-row-selected td {
    background: var(--surface-selected);
}
.mh-variant-table th:first-child,
.mh-variant-table td:first-child {
    border-left: 3px solid transparent;
    padding-left: 9px;
}
.mh-variant-table tbody tr.mh-row-active td:first-child {
    border-left-color: var(--ok);
}
.mh-arch {
    font-size: 12px;
    color: var(--text-dim);
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mh-fat-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.mh-action {
    text-align: right;
    white-space: nowrap;
}
.mh-variant-card {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-subtle);
}
.mh-variant-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.mh-variant-card-title {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--mono);
}
.mh-variant-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.mh-variant-stats .stat {
    min-width: 0;
}
.mh-variant-stats .stat-value {
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
}
.mh-variant-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}
.mh-prov {
    border-style: dashed;
    background: var(--surface-muted);
}
.mh-prov-value {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
    .mh-layout { grid-template-columns: 1fr; }
    .mh-variant-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ent-hierarchy-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}
.ent-hierarchy-tree { min-height: 480px; }
.ent-hierarchy-detail-body { display: flex; flex-direction: column; gap: 10px; }
.ah-detail-name { margin: 0; font-size: 22px; font-weight: 700; }
.ah-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ah-linked { display: flex; flex-direction: column; gap: 6px; }
.ah-linked-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ah-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ah-tree { list-style: none; margin: 0; padding: 0; }
.ah-node { margin: 0; }
.ah-node-row {
    display: grid;
    grid-template-columns: 22px 72px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px 6px calc(8px + var(--ah-depth, 0) * 14px);
    border-radius: 6px;
    cursor: pointer;
}
.ah-node-row:hover { background: var(--surface-hover); }
.ah-node.selected > .ah-node-row {
    background: var(--surface-selected);
    outline: 1px solid var(--border-strong);
}
.ah-twist {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}
.ah-twist-leaf { display: inline-block; width: 22px; }
.ah-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.ah-name { font-size: 13px; font-weight: 600; }
.ah-tag { font-size: 11px; color: var(--text-dim); }
.ah-row-click { cursor: pointer; }
.ah-row-click:hover { background: var(--surface-hover); }
@media (max-width: 1100px) {
    .ent-asset-twin-layout,
    .ent-hierarchy-layout { grid-template-columns: 1fr; }
}
.ent-fat-trend {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 0;
}
.ent-fat-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: center;
}
.ent-fat-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ent-fat-meta .stat-value { font-size: 22px; line-height: 1.1; }
.ent-fat-spark {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--spark-surface);
}
.ent-fat-spark svg { width: 100%; height: 42px; }
.ent-fat-caption { margin: 0; font-size: 11px; }
.ent-recent-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1400px) {
    .ent-recent-3:not(.ent-recent-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ent-recent-3:not(.ent-recent-2) > .card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
    .ent-recent-3,
    .ent-recent-2 { grid-template-columns: 1fr; }
    .ent-recent-3 > .card:last-child { grid-column: auto; }
    .ent-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ent-kpi-strip.mh-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ent-ops-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ent-recent-3 table { font-size: 11.5px; }
    .ent-recent-3 th,
    .ent-recent-3 td { padding: 6px 8px; }
    .col-time { display: none; }
    .ent-kpi-strip { grid-template-columns: 1fr 1fr; }
    .ent-kpi-strip.mh-kpi { grid-template-columns: 1fr; }
}
.ent-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.ent-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}
.ent-panel-chart {
    flex: 1;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: var(--surface-chart);
    padding: 12px;
}
.ent-panel-chart svg {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.ent-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}
.ent-stat-inline {
    gap: 18px;
    margin: 0;
}
.ent-stat-inline .stat-value { font-size: 20px; }
.ent-vessel-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-bottom: 12px;
}
.ent-vessel-panel .vessel-stage { margin-top: 4px; flex: 1; min-height: 280px; }
.ent-side-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.ent-stat-col {
    flex-direction: column;
    gap: 14px;
    margin: 4px 0 0;
}
.ent-stat-col .stat-value { font-size: 22px; }

/* Heat Progress — enterprise stage rail (Idle → Tapping) */
.heat-progress {
    --hp-idle: #8b93a7;
    --hp-charging: #c47a3a;
    --hp-blowing: #c23a2e;
    --hp-sampling: #6b5ea8;
    --hp-tapping: #3fd068;
    /* Everything already passed reads in one quiet tone, whichever stage it was. */
    --hp-done: var(--steel-blue);
    margin-bottom: 12px;
    padding: 12px 16px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-progress);
}
.heat-progress-compact { padding: 10px 12px 12px; margin-bottom: 10px; }
.heat-progress-minimal {
    padding: 6px 10px 8px;
    margin-bottom: 0;
    background: var(--hp-surface);
}
.heat-progress-minimal .heat-progress-top {
    margin-bottom: 6px;
    gap: 8px;
}
.heat-progress-minimal .heat-progress-mini {
    padding: 2px 8px;
    gap: 8px;
}
.heat-progress-minimal .heat-mini-label { display: none; }
.heat-progress-minimal .heat-rail {
    padding: 0 2px;
}
.heat-progress-minimal .heat-rail-item { gap: 0; }
.heat-progress-minimal .heat-rail-node {
    width: 14px;
    height: 14px;
}
.heat-progress-minimal .heat-rail-core {
    width: 6px;
    height: 6px;
}
.heat-progress-minimal .heat-rail-track { top: 8px; }
.heat-progress-live { border-color: rgba(63, 208, 104, 0.22); }
.heat-progress-done { border-color: rgba(63, 208, 104, 0.4); }

.heat-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.heat-progress-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.heat-progress-caption {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.heat-progress-heat {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
}
/* The clock was a bare mm:ss with nothing saying what it counted. */
.heat-progress-elapsed {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    color: var(--text-faint);
}

.heat-progress-elapsed-label,
.heat-progress-stage {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.heat-progress-stage {
    padding-left: 10px;
    border-left: 1px solid var(--border);
    color: var(--text-dim);
}

/* Available to any component that needs text for assistive tech only. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.heat-progress-mini {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--hp-surface);
}
.heat-mini {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}
.heat-mini-sep {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.12);
}
.heat-mini-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.heat-mini-value {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 750;
    color: var(--text);
}
.heat-mini-value .unit {
    font-size: 9px;
    font-weight: 600;
    margin-left: 3px;
    color: var(--text-faint);
}
.heat-mini-value.molten { color: var(--molten-2); }

/* Stage rail */
.heat-rail {
    list-style: none;
    margin: 0;
    padding: 2px 4px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
}
.heat-rail-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.heat-rail-node {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid var(--border);
    background: var(--surface-progress);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.heat-rail-core {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}
.heat-rail-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: center;
    line-height: 1.2;
}

/* Stage colour is driven by STATE, not by which stage it is. Four unrelated hues strung
   across one control read as decoration; here the completed trail is one quiet tone, the
   stage in progress carries its own process colour (blowing really is hot), and what has
   not started stays out of the way. One saturated hue on screen at a time. */

.heat-rail-item.pending .heat-rail-node { border-color: var(--border); }
.heat-rail-item.pending .heat-rail-core { background: transparent; }
.heat-rail-item.pending .heat-rail-label { color: var(--text-faint); }

.heat-rail-item.done .heat-rail-node { border-color: var(--hp-done, var(--steel-blue)); }
.heat-rail-item.done .heat-rail-core { background: var(--hp-done, var(--steel-blue)); }
.heat-rail-item.done .heat-rail-label { color: var(--text-dim); }

.heat-rail-item.active .heat-rail-label {
    color: var(--hp-stage);
    font-weight: 800;
}
.heat-rail-item.active .heat-rail-node {
    border-color: var(--hp-stage);
    box-shadow: 0 0 0 4px var(--hp-stage-soft), 0 0 14px var(--hp-stage-glow);
}
.heat-rail-item.active .heat-rail-core {
    background: var(--hp-stage);
    width: 9px;
    height: 9px;
}

/* Per-stage accent, applied only to whichever stage is currently active. */
.heat-rail-item[data-phase="idle"] {
    --hp-stage: var(--hp-idle);
    --hp-stage-soft: rgba(139, 147, 167, 0.18);
    --hp-stage-glow: rgba(139, 147, 167, 0.35);
}
.heat-rail-item[data-phase="charging"] {
    --hp-stage: var(--hp-charging);
    --hp-stage-soft: rgba(196, 122, 58, 0.18);
    --hp-stage-glow: rgba(196, 122, 58, 0.4);
}
.heat-rail-item[data-phase="blowing"] {
    --hp-stage: var(--hp-blowing);
    --hp-stage-soft: rgba(194, 58, 46, 0.18);
    --hp-stage-glow: rgba(194, 58, 46, 0.45);
}
.heat-rail-item[data-phase="sampling"] {
    --hp-stage: var(--hp-sampling);
    --hp-stage-soft: rgba(107, 94, 168, 0.18);
    --hp-stage-glow: rgba(107, 94, 168, 0.4);
}
.heat-rail-item[data-phase="tapping"] {
    --hp-stage: var(--hp-tapping);
    --hp-stage-soft: rgba(63, 208, 104, 0.2);
    --hp-stage-glow: rgba(63, 208, 104, 0.55);
}

/* Continuous fill behind the stages. It runs between the first and last node centres —
   10% either side of a five-column rail — so 0% sits on Idle and 100% on Tapping. */
.heat-rail-wrap { position: relative; }

.heat-rail-track {
    position: absolute;
    top: 13px;
    left: 10%;
    right: 10%;
    height: 2px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
    z-index: 0;
}

.heat-rail-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--hp-done, var(--steel-blue));
    transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .heat-rail-fill { transition: none; }
}

@media (max-width: 1100px) {
    .ent-primary { grid-template-columns: 1fr; }
    .ent-dash-3 { grid-template-columns: 1fr 1fr; }
    .ent-dash-3 .ent-vessel-panel { grid-column: 1 / -1; }
    .ent-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
    .heat-progress-top { flex-direction: column; align-items: flex-start; }
    .heat-progress-mini { flex-wrap: wrap; border-radius: 10px; }
}
@media (max-width: 800px) {
    .ent-dash-3 { grid-template-columns: 1fr; }
    .ent-dash-3 .ent-vessel-panel { grid-column: auto; }
}

/* Operator profile (/views/profile) */
.profile-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--surface-profile);
}
.profile-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #2a2a2a, rgba(239, 62, 35, 0.45));
    border: 1px solid var(--border-strong);
    color: var(--on-accent);
}
.profile-hero-name {
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.profile-hero-role {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 2px;
}
.profile-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.profile-hero-shift {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}
.profile-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    margin: 0;
}
.profile-dl dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 2px;
}
.profile-dl dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 550;
}
.profile-shift-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.profile-shift-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-shift-value {
    font-size: 13.5px;
    font-weight: 650;
}
.profile-row-today td { background: rgba(63, 208, 104, 0.06); }
.profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    font-size: 13px;
}
.profile-notes li {
    display: block;
    color: var(--text-dim);
    line-height: 1.45;
}
@media (max-width: 900px) {
    .profile-hero { grid-template-columns: 1fr; }
    .profile-dl { grid-template-columns: 1fr; }
    .profile-shift-grid { grid-template-columns: 1fr 1fr; }
}

/* Blazor plumbing */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid var(--bad); }
.validation-message { color: var(--bad); }

#blazor-error-ui {
    background: var(--warn);
    color: #241a00;
    bottom: 0; left: 0;
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-weight: 600;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: var(--bad-dim);
    border: 1px solid var(--bad);
    border-radius: var(--radius-sm);
    padding: 1rem;
    color: var(--text);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

/* Enterprise operations overview */
.overview-model-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 12px 0 14px;
}

.overview-model-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    box-shadow: var(--elevated-shadow);
}

.overview-model-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--model-accent);
}

.overview-model-card.model-m1 { --model-accent: var(--model-m1-accent); }
.overview-model-card.model-m2 { --model-accent: var(--dc-orange); }
.overview-model-card.model-m3 { --model-accent: #219653; }

.model-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid var(--card-title-border);
}

.model-card-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.model-card-head h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.model-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-card-actions > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-dim);
    font-size: 15px;
}

.model-card-actions > a:hover {
    border-color: var(--model-accent);
    color: var(--model-accent);
}

.model-readout {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 18px 12px;
}

.model-readout-label {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.model-readout-value {
    color: var(--text-strong);
    font-family: var(--mono);
    font-size: clamp(23px, 1.7vw, 29px);
    font-weight: 620;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums slashed-zero;
}

.model-readout-value small {
    margin-left: 5px;
    color: var(--text-faint);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
}

/* Chart sits flush inside the card: one shaded band, no nested panel. */
.model-chart {
    margin: 0;
    padding: 2px 10px 6px;
    background: var(--surface-chart);
    border-top: 1px solid var(--card-title-border);
    border-bottom: 1px solid var(--card-title-border);
}

.model-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.model-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.model-metrics > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 14px;
    min-width: 0;
}

.model-metrics > div + div {
    border-left: 1px solid var(--card-title-border);
}

.model-metrics dt {
    overflow: hidden;
    color: var(--text-faint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-metrics dd {
    margin: 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums slashed-zero;
    white-space: nowrap;
}

.model-metrics dd span {
    margin-left: 3px;
    color: var(--text-faint);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
}

.model-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 10px 18px;
    border-top: 1px solid var(--card-title-border);
    background: var(--surface-subtle);
    color: var(--text-dim);
    font-size: 11px;
}

.status-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.status-text::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.status-good { color: var(--ok); }
.status-alert { color: var(--bad); }

.overview-model-card > .empty-state {
    margin: auto;
    padding: 26px 18px;
}

/* Asset Twin stand-in: a small 3D viewport frame, not the delivery GLB. */
.asset-3d-placeholder {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text);
    box-shadow: var(--elevated-shadow);
}

.asset-3d-placeholder:hover {
    border-color: var(--steel-blue);
    color: var(--text);
}

.asset-3d-viewport {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 176px;
    padding: 16px;
    border-right: 1px solid var(--card-title-border);
    background:
        repeating-linear-gradient(0deg, var(--surface-subtle) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, var(--surface-subtle) 0 1px, transparent 1px 22px),
        var(--placeholder-bg);
}

.asset-3d-viewport svg {
    width: 100%;
    max-width: 168px;
    height: auto;
    color: var(--text-faint);
}

.asset-3d-viewport .badge {
    position: absolute;
    top: 10px;
    left: 12px;
}

.asset-3d-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    padding: 18px 20px;
    min-width: 0;
}

.asset-3d-kicker {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.asset-3d-body strong {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 700;
}

.asset-3d-body small {
    max-width: 56ch;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
}

.asset-3d-cta {
    margin-top: 4px;
    color: var(--steel-blue);
    font-size: 12px;
    font-weight: 700;
}

/* ---- Customisable overview flow ---------------------------------------------------- */
/* Every panel on the overview is a slot the operator can hide or move, so the page can no
   longer hard-code which blocks share a row. DashboardLayoutState decides the span; the
   grid only has to honour it, and full-width slots span both columns. */

.ovw-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.ovw-slot { min-width: 0; display: flex; flex-direction: column; }
.ovw-slot > * { flex: 1 1 auto; }
.ovw-slot[data-span="full"] { grid-column: 1 / -1; }

@media (max-width: 1200px) {
    .ovw-flow { grid-template-columns: minmax(0, 1fr); }
}

/* Slot gap owns the vertical rhythm now, so panels must not also carry their own margin
   or the rows sit on different baselines. */
.ovw-slot > .asset-3d-placeholder,
.ovw-slot > .heat-progress,
.ovw-slot > .overview-model-grid { margin: 0; }

/* Compact density: the panels keep their structure and give up padding, which is what an
   operator running two converters on one screen is actually asking for. */
.ovw.is-compact .ovw-flow { gap: 8px; }
.ovw.is-compact .card { padding: 9px 11px; }
.ovw.is-compact .overview-model-grid { gap: 8px; }
.ovw.is-compact .model-chart { margin: 4px 0; }
.ovw.is-compact .asset-3d-stacked .asset-3d-viewport { min-height: 150px; }
.ovw.is-compact .heat-progress { padding: 8px 12px 10px; }

/* At half width the side-by-side split would squeeze the viewport to a strip, so the
   scene takes the full column and the caption sits under it. */
.asset-3d-stacked { grid-template-columns: minmax(0, 1fr); }

.asset-3d-stacked .asset-3d-viewport {
    min-height: 200px;
    border-right: 0;
    border-bottom: 1px solid var(--card-title-border);
}

.asset-3d-stacked .asset-3d-body { padding: 14px 18px 16px; }

/* Band verdict beside a value: glyph and colour together, never colour alone. */
.band-mark {
    margin-left: 5px;
    font-weight: 700;
}

.band-mark[data-state="hit"] { color: var(--ok); }
.band-mark[data-state="miss"] { color: var(--bad); }
.band-mark[data-state="pending"] { color: var(--text-faint); }

.ovh-foot {
    margin: 8px 0 0;
    color: var(--text-faint);
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 960px) {
    .overview-model-grid {
        grid-template-columns: 1fr;
    }

    .asset-3d-placeholder {
        grid-template-columns: 1fr;
    }

    .asset-3d-viewport {
        border-right: 0;
        border-bottom: 1px solid var(--card-title-border);
    }
}

/* Dense enterprise console — matches the approved overview reference. */
.shell {
    --shell-sidebar: 205px;
    --shell-topbar: 50px;
}

.sidebar {
    background: var(--sidebar-bg);
    border-right-color: var(--sidebar-border);
}

.brand {
    padding: 12px 14px 10px;
    margin-bottom: 4px;
}

.brand-chip {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.brand-chip img {
    width: 142px;
    max-width: 100%;
}

.brand-chip-full {
    display: flex;
    align-items: center;
    gap: 7px;
}

.brand-chip-full img {
    width: 28px;
    height: 20px;
    object-fit: contain;
}

.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: var(--brand-name);
    line-height: 1;
    white-space: nowrap;
}

.brand-wordmark strong {
    font-size: 11px;
    font-style: italic;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.brand-wordmark em {
    /* Was Georgia — a serif, and the only one in the console. It approximated the
       CORUS half of the lockup; the weight and tracking below already carry that
       contrast, and assets/danieli-corus-logo.svg is the artwork of record when exact
       brand fidelity is wanted. */
    font-family: var(--font);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.brand-name {
    margin-top: 10px;
    font-size: 11px;
}

.brand-sub {
    margin-top: 1px;
    font-size: 9px;
    color: var(--brand-sub);
}

.nav-section-label {
    padding: 11px 14px 4px;
    font-size: 8.5px;
    color: var(--sidebar-section);
}

.nav-item {
    gap: 9px;
    margin: 1px 8px;
    padding: 7px 9px;
    font-size: 11.5px;
    border-radius: 5px;
}

.nav-item svg {
    width: 14px;
    height: 14px;
}

.nav-item.active {
    background: var(--sidebar-nav-active-bg);
    border-color: var(--sidebar-nav-active-border);
    box-shadow: inset 2px 0 0 var(--dc-orange);
}

.nav-badge {
    padding: 1px 5px;
    font-size: 8px;
}

.sidebar-user {
    margin: auto 8px 6px;
    padding: 7px 8px;
    background: var(--sidebar-user-bg);
    border-color: var(--sidebar-user-border);
}

.sidebar-user-avatar {
    width: 28px;
    height: 28px;
}

.sidebar-user-name { font-size: 10px; }
.sidebar-user-role { font-size: 8.5px; }

.topbar {
    gap: 12px;
    padding: 0 16px;
}

.topbar-site {
    gap: 11px;
}

.topbar-site-label {
    font-size: 8px;
}

.topbar-site-value {
    font-size: 11px;
}

.topbar-site-sep {
    height: 24px;
}

.topbar-right {
    gap: 7px;
}

.topbar-right .badge,
.ent-head-meta .badge {
    padding: 5px 11px;
    font-size: 11.5px;
}

.topbar-right .live-dot,
.model-card-actions .live-dot {
    width: 6px;
    height: 6px;
}

.clock {
    padding: 4px 7px;
    font-size: 9px;
}

.theme-toggle,
.sidebar-toggle-bar {
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.main {
    padding: 13px 18px 28px;
    background: var(--surface-page);
}

.page-head {
    margin: 0 0 10px;
}

.page-head h1 {
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 720;
}

.page-head .muted {
    font-size: 9.5px;
}

.ent-head-meta {
    gap: 10px;
}

.heat-progress {
    margin-bottom: 10px;
    padding: 8px 12px 9px;
    border-radius: 7px;
}

.heat-progress-top {
    margin-bottom: 7px;
}

.heat-progress-caption { font-size: 11px; }
.heat-progress-heat { font-size: 10px; }
.heat-progress-elapsed { font-size: 9px; }
.heat-progress-mini {
    gap: 7px;
    padding: 2px 8px;
    font-size: 9px;
}
.heat-rail-label { font-size: 8px; }
.heat-rail-node { width: 16px; height: 16px; }
.heat-rail-core { width: 6px; height: 6px; }

.overview-model-grid {
    gap: 10px;
    margin: 10px 0 12px;
}

.overview-model-card {
    border-radius: 7px;
}

.overview-model-card::before {
    height: 3px;
}

.model-card-head {
    padding: 13px 14px 9px;
}

.model-card-kicker {
    margin-bottom: 2px;
    font-size: 9px;
}

.model-card-head h2 {
    font-size: 15px;
}

.model-card-actions {
    gap: 5px;
}

.model-card-actions .badge {
    padding: 2px 6px;
    font-size: 9px;
}

.model-card-actions > a {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    font-size: 14px;
}

.model-readout {
    padding: 11px 14px 9px;
}

.model-readout-label {
    font-size: 9px;
}

.model-readout-value {
    font-size: clamp(21px, 1.6vw, 26px);
}

.model-readout-value small {
    margin-left: 4px;
    font-size: 10.5px;
}

.model-metrics > div {
    gap: 3px;
    padding: 9px 11px;
}

.model-metrics dt {
    font-size: 8.5px;
}

.model-metrics dd {
    font-size: 12.5px;
}

.model-card-foot {
    padding: 8px 14px;
    font-size: 10px;
}

.status-text::before {
    width: 5px;
    height: 5px;
}

.model-chart {
    padding: 2px 8px 4px;
}

.ent-ops-2 {
    gap: 10px;
    margin-bottom: 10px;
}

.ent-ops-2 .card,
.ovw-flow .card {
    padding: 11px 13px;
}

.ent-ops-2 .card-title,
.ovw-flow .card-title {
    margin-bottom: 8px;
    padding-bottom: 7px;
    font-size: 9px;
}

.ent-fat-trend {
    gap: 7px;
    padding-top: 0;
}

.ent-fat-row {
    grid-template-columns: 100px 1fr;
    gap: 8px;
}

.ent-fat-meta .stat-value {
    font-size: 16px;
}

.ent-fat-spark {
    min-height: 30px;
    padding: 3px 7px;
}

.ent-fat-spark svg {
    height: 30px;
}

.ent-fat-caption {
    font-size: 8px;
}

.ent-ops-2 table,
.ovw-flow table {
    font-size: 9px;
}

.ent-ops-2 th,
.ovw-flow th {
    padding: 4px 6px;
    font-size: 7.5px;
}

.ent-ops-2 td,
.ovw-flow td {
    padding: 3px 6px;
}

/* Global readability pass — shared by every route in both themes. */
body {
    font-size: 16px;
}

.shell {
    --shell-sidebar: 220px;
    --shell-topbar: 54px;
}

.brand-wordmark strong { font-size: 13px; }
.brand-wordmark em { font-size: 14px; }
.brand-chip-full img { width: 32px; height: 23px; }
.brand-name { font-size: 12px; }
.brand-sub { font-size: 10px; }

.nav-section-label {
    padding-top: 13px;
    font-size: 9.5px;
}

.nav-item {
    padding: 8px 10px;
    font-size: 13.5px;
}

.nav-item svg {
    width: 16px;
    height: 16px;
}

.nav-badge { font-size: 9px; }
.sidebar-user-name { font-size: 11px; }
.sidebar-user-role { font-size: 9.5px; }

.topbar-site-label { font-size: 9px; }
.topbar-site-value { font-size: 13px; }
.topbar-right .badge { font-size: 9.5px; }
.clock { font-size: 10px; }

.main {
    padding: 16px 20px 32px;
}

.page-head,
.ent-head {
    margin-bottom: 13px;
}

.page-head h1 {
    font-size: 22px;
}

.page-head .muted,
.muted {
    font-size: 13px;
}

.card-title {
    font-size: 12.5px;
}

.badge {
    font-size: 10.5px;
}

.kpi-label,
.stat-label {
    font-size: 10.5px;
}

.kpi-sub {
    font-size: 12px;
}

.stat-value {
    font-size: 22px;
}

table {
    font-size: 13.5px;
}

th {
    font-size: 10px;
}

input,
select,
textarea,
button {
    font-size: 13px;
}

.heat-progress-caption { font-size: 12.5px; }
.heat-progress-heat { font-size: 11.5px; }
.heat-progress-elapsed { font-size: 10.5px; }
.heat-progress-mini { font-size: 10.5px; }
.heat-rail-label { font-size: 9px; }

.model-card-kicker { font-size: 9.5px; }
.model-card-head h2 { font-size: 16px; }
.model-card-actions .badge { font-size: 9px; }
.model-readout-label { font-size: 9px; }
.model-readout-value { font-size: clamp(22px, 1.6vw, 27px); }
.model-readout-value small { font-size: 11px; }
.model-metrics dt { font-size: 8.5px; }
.model-metrics dd { font-size: 13px; }
.model-card-foot { font-size: 10px; }

.asset-3d-body strong { font-size: 14px; }
.asset-3d-body small { font-size: 11.5px; }

.ent-ops-2 .card-title { font-size: 10.5px; }
.ent-fat-meta .stat-value { font-size: 18px; }
.ent-fat-caption { font-size: 9px; }
.ent-ops-2 table { font-size: 11px; }
.ent-ops-2 th { font-size: 9px; }

/* Shared content behavior; colors come only from the global theme tokens. */
html,
body,
.shell,
.main {
    background-color: var(--surface-page);
}

.table-scroll,
.chart-frame,
.ent-fat-spark {
    color: var(--text);
}

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-info);
    color: var(--text);
    cursor: pointer;
}
.theme-toggle:hover {
    border-color: var(--dc-orange);
    color: var(--dc-orange);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.theme-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.theme-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.theme-choice:hover { border-color: var(--steel-blue); }
.theme-choice.is-active {
    border-color: var(--dc-orange);
    box-shadow: 0 0 0 1px rgba(var(--dc-orange-rgb), 0.35);
    background: rgba(var(--dc-orange-rgb), 0.10);
    color: var(--text-strong);
}

/* New Views helpers */
.view-segment {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.view-segment a,
.view-segment button {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    border-radius: 99px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
}
.view-segment a:hover,
.view-segment button:hover { color: var(--text); border-color: var(--steel-blue); }
.view-segment a.is-active,
.view-segment button.is-active {
    color: var(--dc-orange);
    border-color: rgba(var(--dc-orange-rgb), 0.55);
    background: rgba(var(--dc-orange-rgb), 0.10);
}

.shift-heat-list { display: flex; flex-direction: column; gap: 8px; }
.shift-heat-row {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
}
.shift-heat-row .mono { font-weight: 650; }
@media (max-width: 900px) {
    .shift-heat-row { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   Dashboard customiser — shared by the Operations Overview and the concepts
   ==========================================================================

   Lifted out of concepts.css once the shipped overview grew a "Customise view":
   that page never loads the concept stylesheet, and a control that looks different
   depending on which screen you opened it from is not one control.

   The rules below were written against the concept token names, so the wrapper
   maps them onto the console's own tokens rather than restating every rule. */

.cx-customize {
    --cx-mono: var(--mono);
    --cx-text: var(--text);
    --cx-dim: var(--text-dim);
    --cx-faint: var(--text-faint);
    --cx-surface: var(--surface-card);
    --cx-surface-2: var(--surface-subtle);
    --cx-line: var(--border);
    --cx-line-strong: var(--border-strong);
    --cx-accent: var(--steel-blue);
}

/* ==========================================================================
   Customiser
   ========================================================================== */

.cx-customize { position: relative; }

/* Deliberately weighted: this was previously a small button buried in the
   metadata strip and went unnoticed. It is an action, so it looks like one. */
.cx-customize-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cx-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--cx-accent);
    background: var(--cx-surface);
    border: 1.5px solid currentColor;
    padding: 8px 14px;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}

.cx-customize-trigger:hover { background: var(--cx-surface-2); }
.cx-customize-trigger[aria-expanded="true"] { background: var(--cx-surface-2); }
.cx-customize-trigger svg { flex: none; }

.cx-customize-count {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cx-warn);
    border: 1px solid currentColor;
    padding: 1px 6px;
}

.cx-customize-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    right: 0;
    width: min(400px, calc(100vw - 48px));
    background: var(--cx-surface);
    border: 1px solid var(--cx-line-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    padding: 16px 18px 14px;
    text-align: left;
}

.cx-customize-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.cx-customize-title {
    font-family: var(--cx-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cx-dim);
    margin: 0;
    font-weight: 600;
}

.cx-customize-close {
    background: none; border: 0;
    color: var(--cx-faint);
    font-size: 14px; cursor: pointer;
    padding: 2px 4px; line-height: 1;
}

.cx-customize-close:hover { color: var(--cx-text); }

.cx-customize-group { border: 0; margin: 0 0 14px; padding: 0; }

.cx-customize-legend {
    font-family: var(--cx-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cx-faint);
    padding: 0;
    margin-bottom: 8px;
    font-weight: 600;
}

.cx-customize-list { list-style: none; margin: 0; padding: 0; }

.cx-customize-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cx-line);
}

.cx-customize-row[data-hidden="true"] .cx-customize-rowlabel { color: var(--cx-faint); text-decoration: line-through; }

.cx-customize-move { display: inline-flex; gap: 4px; }

.cx-move {
    font-family: var(--cx-mono);
    font-size: 12px;
    line-height: 1;
    width: 24px;
    height: 24px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-line-strong);
    color: var(--cx-dim);
    cursor: pointer;
}

.cx-move:hover:not(:disabled) { border-color: var(--cx-accent); color: var(--cx-accent); }
.cx-move:disabled { opacity: .3; cursor: default; }

.cx-customize-hint {
    font-size: 11.5px;
    color: var(--cx-faint);
    margin: 8px 0 0;
    line-height: 1.4;
}

.cx-customize-row:last-child { border-bottom: 0; }
.cx-customize-row input { margin-top: 3px; accent-color: var(--cx-accent); }
.cx-customize-rowtext { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.cx-customize-rowlabel { font-size: 13.5px; color: var(--cx-text); }
.cx-customize-rownote { font-size: 11.5px; color: var(--cx-faint); line-height: 1.4; }

.cx-customize-seg { display: inline-flex; border: 1px solid var(--cx-line-strong); }

.cx-seg {
    font-family: var(--cx-mono);
    font-size: 11.5px;
    padding: 5px 12px;
    background: none;
    border: 0;
    color: var(--cx-dim);
    cursor: pointer;
}

.cx-seg + .cx-seg { border-left: 1px solid var(--cx-line-strong); }
.cx-seg.is-active { background: var(--cx-surface-2); color: var(--cx-text); font-weight: 600; }

.cx-customize-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cx-line);
}

.cx-customize-saved { font-family: var(--cx-mono); font-size: 10.5px; color: var(--cx-faint); }

/* Reset lives beside the customiser because that is its only shipped use; ConceptB's
   export button borrows the same look. */
.cx-btn {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text);
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    padding: 5px 11px;
    cursor: pointer;
    line-height: 1.3;
}

.cx-btn:hover { border-color: var(--steel-blue); color: var(--steel-blue); }


/* ==========================================================================
   Page header meta — state, context, actions
   ==========================================================================

   Previously one row of identical 9px pills carrying three different kinds of
   thing: the live process state, the heat's identity, and two actions. At that
   size nothing led, and a control looked exactly like a label. Each role now has
   its own treatment, and everything here clears a 30px target height. */

.ent-head-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* State leads: it is the one thing here that changes on its own. */
.head-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: var(--ok-dim);
    color: var(--ok);
    border: 1px solid rgba(63, 208, 104, 0.32);
    white-space: nowrap;
}

/* A tapped heat is finished, not running — the dot stops pulsing with it. */
.head-state[data-state="done"] .live-dot { animation: none; }

/* Context is metadata, so it is labelled rather than dressed as a control. */
.head-facts {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
    overflow: hidden;
}

.head-fact {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-height: 32px;
    padding: 3px 14px;
    text-decoration: none;
    color: inherit;
}

.head-fact + .head-fact { border-left: 1px solid var(--border); }

a.head-fact:hover { background: var(--surface-card); }
a.head-fact:hover .head-fact-value { color: var(--steel-blue); }

.head-fact-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1;
}

.head-fact-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.2;
    white-space: nowrap;
}

/* Actions look like actions — bordered, accent-coloured, and the same height as
   everything else in the row. */
.head-actions { display: inline-flex; align-items: center; gap: 8px; }

.head-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface-card);
    color: var(--steel-blue);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.head-action:hover {
    border-color: var(--steel-blue);
    background: var(--surface-subtle);
}

@media (max-width: 720px) {
    .head-facts { flex: 1 1 100%; }
    .head-actions { flex-wrap: wrap; }
}

/* ==========================================================================
   Side-nav health dots
   ==========================================================================

   One dot per destination that has a real condition behind it, so an operator can
   see from the nav whether anything needs them. Sized to read at a glance without
   competing with the label, and never the only carrier of meaning — NavHealthDot
   puts the same state in the accessible name. */

.nav-health {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-left: auto;
    background: var(--text-faint);
    box-shadow: 0 0 0 2px var(--sidebar-health-ring, transparent);
}

/* A badge already claimed margin-left:auto; the dot then sits beside it, not adrift. */
.nav-badge + .nav-health { margin-left: 8px; }

.nav-health[data-state="healthy"] {
    background: var(--ok);
    --sidebar-health-ring: rgba(63, 208, 104, 0.18);
}

.nav-health[data-state="warning"] {
    background: var(--warn);
    --sidebar-health-ring: rgba(232, 177, 63, 0.2);
}

.nav-health[data-state="critical"] {
    background: var(--bad);
    --sidebar-health-ring: rgba(255, 92, 92, 0.22);
}

/* Collapsed rail: the label is gone, so the dot rides the icon's top-right corner
   rather than being pushed off the edge by margin-left:auto. */
.shell:has(.sidebar-collapse-check:checked) .nav-item { position: relative; }

.shell:has(.sidebar-collapse-check:checked) .nav-health {
    position: absolute;
    top: 5px;
    right: 6px;
    margin-left: 0;
    width: 8px;
    height: 8px;
}

/* ==========================================================================
   WebGL Asset Twin viewport
   ==========================================================================

   The Unity build brings its own canvas, loader and progress bar, so the stage
   only has to give it room and get out of the way. The HUD keeps its z-index so
   live readouts stay legible over the scene. */

.vessel-stage-webgl {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #0b0b0b;
}

.vessel-webgl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.vessel-stage-webgl .vessel-hud { position: relative; z-index: 2; }

/* The health dot competes with the label for the row's width; letting the label wrap
   turns a one-line nav item into two. The label truncates instead — the full text is
   already on the item's title attribute. */
.nav-item .nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Collapsed sidebar — brand mark
   ==========================================================================

   The compact chip was sized by `.brand-chip-compact img { max-width: 34px }`,
   but the later dense-pass rule `.brand-chip img { width: 142px; max-width: 100% }`
   matches the same element at the SAME specificity and therefore won: the mark
   rendered 142px wide in a 64px rail and was cropped to a fragment.

   These rules are scoped to the collapsed shell, so they outrank both by
   specificity rather than by source order — the fix does not depend on staying
   at the bottom of the file. */

.shell:has(.sidebar-collapse-check:checked) .brand {
    display: flex;
    justify-content: center;
    padding: 12px 6px 10px;
}

.shell:has(.sidebar-collapse-check:checked) .brand-row {
    width: 100%;
    justify-content: center;
}

.shell:has(.sidebar-collapse-check:checked) .brand-chip-compact {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    /* The mark carries its own colours and needs a light ground to read on the
       dark shell; at this size the plate also gives it a deliberate edge rather
       than letting it float. */
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 14px var(--molten-glow);
    flex: none;
}

.shell:has(.sidebar-collapse-check:checked) .brand-chip-compact img {
    width: 28px;
    max-width: 28px;
    height: auto;
    display: block;
}

/* ==========================================================================
   Process Twin — compact
   ==========================================================================

   Eleven panels on one page. At the console's default card padding and chart
   heights the third model sat two screens below the fold, which defeats the point
   of a page that exists to compare M1, M2 and M3 side by side.

   Scoped to .pt-compact so the same primitives keep their normal size everywhere
   else — this is a density decision about one page, not a restyle of the console. */

.pt-compact .card { padding: 10px 12px; }
.pt-compact .card-title { margin-bottom: 7px; padding-bottom: 6px; }
.pt-compact .ent-panel-body { gap: 7px; }
.pt-compact .ent-panel-foot { margin-top: 7px; padding-top: 7px; }

/* Grid gaps and the space between bands. */
.pt-compact .ent-pt-grid,
.pt-compact .ent-dash-3,
.pt-compact .ent-charts-2,
.pt-compact .ent-charts-3,
.pt-compact .ent-kpi-strip { gap: 9px; margin-bottom: 9px !important; }

/* Chart wells were sized by min-height, so the shorter SVGs alone would not have
   reclaimed the space — the well would simply have gained whitespace. */
.pt-compact .pt-chart-lg { min-height: 0; }
.pt-compact .pt-scatter { min-height: 0; }
.pt-compact .pt-scatter svg { max-width: 260px; }
.pt-compact .ent-charts-2 .ent-panel-chart { min-height: 0; }
.pt-compact .ent-panel-chart { padding: 6px 8px; }

/* KPI strip: the four headline figures do not need card-sized padding to read. */
.pt-compact .kpi { padding: 9px 12px; }
.pt-compact .kpi-label { font-size: 9.5px; }
.pt-compact .kpi-value { font-size: 24px; line-height: 1.1; }
.pt-compact .kpi-sub { font-size: 10.5px; }

/* Readout rows above each chart. */
.pt-compact .stat-value { font-size: 17px; }
.pt-compact .pt-carbon-stats .stat-value { font-size: 15px; }
.pt-compact .ent-panel-foot .muted { font-size: 10.5px; }

/* Tables inside the panels (FAT exceptions). */
.pt-compact table { font-size: 11px; }
.pt-compact th { padding: 5px 7px; font-size: 8.5px; }
.pt-compact td { padding: 4px 7px; }


/* ==========================================================================
   Typography — figures
   ==========================================================================

   Tabular figures everywhere, so digits occupy equal advance widths and columns
   of numbers line up down the page. Inherited, so it reaches SVG chart labels too
   without each chart opting in. */

/* Inter carries tnum, zero and case (confirmed against the shipped woff2). Together
   they are what lets one family do the work two were doing:
     tnum — equal advance widths, so columns of figures line up down the page
     zero — slashed zero, so CNV2-24820 cannot be misread as CNV2-2482O
     case — uppercase-aware spacing for the console's micro-labels
   Set on :root and inherited, so SVG chart text is covered without opting in. */
:root {
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: "tnum" 1, "zero" 1, "case" 1;
}

/* Figures: the face no longer separates them from prose, so weight and alignment do. */
.mono,
.num,
td .num,
.val-strong,
.stat-value,
.kpi-value,
code, pre, kbd, samp {
    font-family: var(--font);
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: -0.005em;
}


/* ==========================================================================
   One family — the leaks
   ==========================================================================

   Form controls do not inherit font-family: a <button>, <select> or <input> with
   no explicit family falls back to the UA default, which is Arial. That was every
   picker and checkbox on every page, invisible until the whole console was swept
   rather than one panel. */

button, input, select, textarea, optgroup {
    font: inherit;
    font-variant-numeric: inherit;
}

/* SVG <text> does not inherit from the page unless the root svg asks for it, and a
   chart that forgets falls back to the UA serif. Belt and braces over the charts'
   own font-family="inherit". */
svg text { font-family: var(--font); }

/* ============================================================================
   Sign-in
   ----------------------------------------------------------------------------
   Rendered by AuthLayout, outside the console shell — no sidebar, no topbar.
   .login-shell / .login-card were referenced by the old markup and never defined
   anywhere in this file, so the page had been shipping unstyled.

   Every rule here works without a Blazor circuit: the form is statically
   rendered so it can post and receive the auth cookie, which rules out any
   state that needs JS.
   ========================================================================== */

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(1100px 620px at 12% -10%, rgba(var(--dc-orange-rgb), 0.10), transparent 60%),
        radial-gradient(900px 540px at 105% 110%, rgba(var(--dc-orange-rgb), 0.06), transparent 62%),
        var(--bg);
}

.auth-page {
    width: 100%;
    max-width: 940px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

/* -- identity panel ------------------------------------------------------- */

.auth-brand {
    display: flex;
    flex-direction: column;
    padding: 44px 40px;
    background: linear-gradient(165deg, #151515 0%, #0b0b0b 100%);
    border-right: 1px solid var(--border);
    position: relative;
}

/* The one piece of brand colour, as a hairline rather than a fill. */
.auth-brand::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--molten-1), var(--molten-2), transparent);
}

.auth-brand-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
    margin-bottom: 26px;
}

.auth-brand-mark img { width: 28px; height: 28px; }

.auth-brand-title {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 640;
    letter-spacing: -0.012em;
    color: var(--text-strong);
}

.auth-brand-sub {
    margin: 8px 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-dim);
}

.auth-brand-facts {
    margin: 30px 0 0;
    display: grid;
    gap: 16px;
}

.auth-brand-facts div { display: grid; gap: 3px; }

.auth-brand-facts dt {
    font-size: 0.66rem;
    font-weight: 620;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.auth-brand-facts dd {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text);
}

.auth-brand-foot {
    margin: auto 0 0;
    padding-top: 28px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* -- form panel ----------------------------------------------------------- */

.auth-form-panel {
    display: flex;
    flex-direction: column;
    padding: 44px 40px;
}

.auth-head h1 {
    margin: 0;
    font-size: 1.42rem;
    font-weight: 640;
    letter-spacing: -0.014em;
    color: var(--text-strong);
}

.auth-head-sub {
    margin: 7px 0 0;
    font-size: 0.84rem;
    color: var(--text-dim);
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 22px 0 0;
    padding: 11px 13px;
    border-radius: 8px;
    background: var(--bad-dim);
    border: 1px solid rgba(255, 92, 92, 0.32);
    color: var(--bad);
    font-size: 0.82rem;
    line-height: 1.5;
}

.auth-alert svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }

.auth-form {
    margin-top: 26px;
    display: grid;
    gap: 16px;
}

.auth-field { display: grid; gap: 7px; }

.auth-field label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.auth-field input {
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.auth-field input::placeholder { color: var(--text-faint); }

/* Visible focus is not decoration here — a control-room terminal is often driven
   by keyboard, and the browser default ring disappears against this surface. */
.auth-field input:focus-visible {
    outline: none;
    border-color: var(--molten-1);
    box-shadow: 0 0 0 3px var(--molten-glow);
}

/* Do not paint a field red before it has been submitted; :invalid alone fires
   while the user is still typing the first character. */
.auth-field input:user-invalid {
    border-color: rgba(255, 92, 92, 0.55);
}

.auth-submit {
    margin-top: 6px;
    width: 100%;
    padding: 11px 16px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 620;
    color: #fff;
    background: linear-gradient(180deg, var(--molten-2) 0%, var(--molten-1) 100%);
    border: 1px solid rgba(var(--dc-orange-rgb), 0.55);
    border-radius: 8px;
    cursor: pointer;
    transition: filter 120ms ease, box-shadow 120ms ease;
}

.auth-submit:hover { filter: brightness(1.07); }

.auth-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--molten-glow);
}

.auth-submit:active { filter: brightness(0.95); }

.auth-foot {
    margin-top: auto;
    padding-top: 30px;
    display: grid;
    gap: 8px;
}

.auth-notice {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--text-faint);
}

.auth-help {
    margin: 0;
    font-size: 0.74rem;
    color: var(--text-faint);
}

/* -- narrow viewports ------------------------------------------------------
   The identity panel is aria-hidden and carries no information the form needs,
   so it is dropped rather than stacked: on a tablet in a control room the form
   should be reachable without scrolling past a logo. */

@media (max-width: 760px) {
    .auth-page { grid-template-columns: 1fr; max-width: 440px; }
    .auth-brand { display: none; }
    .auth-form-panel { padding: 36px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-field input,
    .auth-submit { transition: none; }
}

/* ============================================================================
   Administration
   ----------------------------------------------------------------------------
   The admin pages were built against .form-grid, .link and a set of status
   conventions that were never defined anywhere in this file, so every form on
   every admin page rendered as unstyled browser defaults — exactly as the login
   page did before it was fixed.

   These pages are used rarely and consequentially: a mis-click revokes access or
   renames the converter that every heat is matched against. The design therefore
   favours legibility and separation over density — generous label and control
   spacing, destructive actions visually distinct from routine ones, and a result
   banner that says whether the last thing you did actually worked.
   ========================================================================== */

/* The SAME surface as every other panel in the console — .card's tokens, its radius,
   its accent top border and its shadow. This originally invented its own flat surface,
   which is why the admin pages read as a different application to the one around them. */
.admin-section {
    background: var(--surface-card);
    border: 1px solid var(--card-border);
    border-top: 2px solid var(--card-top-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}

.admin-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--card-title-border);
}

.admin-section-head h2 {
    margin: 0;
    font-size: 13px;
    text-transform: none;
    font-weight: 640;
    letter-spacing: -0.008em;
    color: var(--card-title);
}

.admin-section-note {
    margin: 4px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-dim);
}

.admin-section-body {
    padding: 16px 18px;
}

.admin-section-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--card-title-border);
    background: rgba(var(--neutral-rgb), 0.02);
}

/* -- forms ----------------------------------------------------------------
   The label column is sized to the longest label rather than to a fraction, so
   controls line up whatever the labels happen to say. */

.form-grid {
    display: grid;
    grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
    gap: 14px 18px;
    align-items: center;
    max-width: 720px;
}

.form-grid > label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    justify-self: start;
}

.form-grid > input[type="text"],
.form-grid > input[type="password"],
.form-grid > input[type="time"],
.form-grid > input[type="number"],
.form-grid > input:not([type]),
.form-grid > select {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* A checkbox stretched across the control column is a 700px click target that
   reads as a rendering fault. */
.form-grid > input[type="checkbox"] {
    width: 18px;
    height: 18px;
    justify-self: start;
    accent-color: var(--molten-1);
    cursor: pointer;
}

.admin-section input:focus-visible,
.admin-section select:focus-visible {
    outline: none;
    border-color: var(--molten-1);
    box-shadow: 0 0 0 3px var(--molten-glow);
}

/* -- buttons ---------------------------------------------------------------
   Three weights, because these pages mix "save this" with "revoke that". */

.admin-section button {
    padding: 9px 15px;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 560;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, filter 120ms ease;
}

.admin-section button:hover:not(:disabled) {
    border-color: var(--molten-1);
}

.admin-section button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-section button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--molten-glow);
}

.admin-section button.primary {
    color: #fff;
    background: linear-gradient(180deg, var(--molten-2) 0%, var(--molten-1) 100%);
    border-color: rgba(var(--dc-orange-rgb), 0.55);
    font-weight: 620;
}

.admin-section button.primary:hover:not(:disabled) {
    filter: brightness(1.07);
}

/* Destructive actions read as destructive BEFORE they are clicked. */
.admin-section button.danger {
    color: var(--bad);
    background: var(--bad-dim);
    border-color: rgba(255, 92, 92, 0.32);
}

/* The revoke affordance inside a grant chip. */
.admin-section button.link {
    padding: 0 0 0 6px;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--text-faint);
    background: none;
    border: none;
    cursor: pointer;
}

.admin-section button.link:hover {
    color: var(--bad);
}

/* -- tables ---------------------------------------------------------------- */

.admin-section .grid {
    width: 100%;
    border-collapse: collapse;
}

.admin-section .grid th {
    padding: 9px 12px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 640;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.admin-section .grid td {
    padding: 11px 12px;
    font-size: 0.86rem;
    color: var(--text);
    border-bottom: 1px solid var(--card-title-border);
    vertical-align: middle;
}

.admin-section .grid tbody tr:last-child td {
    border-bottom: none;
}

.admin-section .grid tbody tr:hover td {
    background: rgba(var(--neutral-rgb), 0.03);
}

.admin-section .grid td input {
    max-width: 260px;
}

/* Row actions stay together and do not wrap mid-pair. */
.admin-row-actions {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

/* -- status ---------------------------------------------------------------- */

.admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    background: var(--panel-2);
}

.admin-pill.on {
    color: var(--ok);
    background: var(--ok-dim);
    border-color: rgba(63, 208, 104, 0.3);
}

.admin-pill.off {
    color: var(--text-faint);
}

.admin-pill.none {
    color: var(--warn);
    background: var(--warn-dim);
    border-color: rgba(232, 177, 63, 0.3);
}

/* A grant: the role, its scope, and the way to take it away. */
.admin-grant {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 2px 4px 2px 0;
    padding: 3px 6px 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
}

.admin-grant-scope {
    color: var(--text-faint);
}

/* -- result banner ---------------------------------------------------------
   Every write here returns a reason when it is refused, and the pages rendered
   that reason in the same neutral grey as a success. An administrator could
   revoke nothing and read "That is the last administrator grant" as
   confirmation that it worked. */

.admin-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    border: 1px solid var(--border-strong);
    background: var(--panel);
    color: var(--text);
}

.admin-notice.ok {
    color: var(--ok);
    background: var(--ok-dim);
    border-color: rgba(63, 208, 104, 0.32);
}

.admin-notice.bad {
    color: var(--bad);
    background: var(--bad-dim);
    border-color: rgba(255, 92, 92, 0.32);
}

.admin-notice.warn {
    color: var(--warn);
    background: var(--warn-dim);
    border-color: rgba(232, 177, 63, 0.32);
}

.admin-notice svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.admin-empty {
    padding: 28px 20px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--text-faint);
}

@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .form-grid > label {
        margin-top: 6px;
    }

    .admin-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-section button,
    .admin-section input,
    .admin-section select {
        transition: none;
    }
}

/* An admin table must never widen the page. The audit trail carries JSON in two
   columns, so it scrolls inside its own section rather than pushing the layout. */
.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

/* Before/after payloads: readable at a glance, full text on hover, and never
   allowed to set the table width. */
.admin-json {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.76rem;
    color: var(--text-dim);
}

/* The subtitle line under a page heading. Used on five pages and defined on none of
   them, so it has been rendering at body size and body colour — indistinguishable
   from the content below it. */
.page-head .sub,
p.sub {
    margin: 5px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-dim);
}

/* The Overview card's live 3D viewport: the iframe fills the slot the schematic occupied,
   tall enough that the vessel reads as a scene rather than a thumbnail. */
.asset-3d-viewport-webgl {
    padding: 0;
    min-height: 320px;
    background: #000;
}

.asset-3d-webgl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.asset-3d-live .asset-3d-cta {
    margin-top: 6px;
}

/* Overview 3D card with the caption removed: the link row stays compact. */
.asset-3d-body-slim {
    padding: 8px 14px;
    justify-content: flex-end;
}

/* Sign-out: styled as the last nav item; the form wrapper adds no box of its own. */
.sidebar-signout { margin: 2px 0 0; }
.sidebar-signout-btn {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}