/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-t36kt6ez4r],
.components-reconnect-repeated-attempt-visible[b-t36kt6ez4r],
.components-reconnect-failed-visible[b-t36kt6ez4r],
.components-pause-visible[b-t36kt6ez4r],
.components-resume-failed-visible[b-t36kt6ez4r],
.components-rejoining-animation[b-t36kt6ez4r] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-t36kt6ez4r],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-t36kt6ez4r],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-t36kt6ez4r],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-t36kt6ez4r],
#components-reconnect-modal.components-reconnect-retrying[b-t36kt6ez4r],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-t36kt6ez4r],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-t36kt6ez4r],
#components-reconnect-modal.components-reconnect-failed[b-t36kt6ez4r],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-t36kt6ez4r] {
    display: block;
}


#components-reconnect-modal[b-t36kt6ez4r] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-t36kt6ez4r 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-t36kt6ez4r 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-t36kt6ez4r 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-t36kt6ez4r]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-t36kt6ez4r 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-t36kt6ez4r {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-t36kt6ez4r {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-t36kt6ez4r {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-t36kt6ez4r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-t36kt6ez4r] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-t36kt6ez4r] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-t36kt6ez4r] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-t36kt6ez4r] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-t36kt6ez4r] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-t36kt6ez4r] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-t36kt6ez4r 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-t36kt6ez4r] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-t36kt6ez4r {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================================
   Live Production dashboard — Asetrix skin.
   Lean, compact, full-bleed. Uses the shell's Asetrix design tokens directly
   (--accent, --surface, --text, --border, --radius*, --shadow*, --font*),
   so it tracks the app theme (light/dark) automatically.
   ============================================================================ */

.scale-dashboard[b-vge9guvasa] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.25rem 0.25rem 1.5rem;
    font-family: var(--font);
    color: var(--text);
    min-height: 100%;
}

/* ── Compact toolbar ──────────────────────────────────────────────────── */
.sd-toolbar[b-vge9guvasa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sd-toolbar-left[b-vge9guvasa] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.sd-eyebrow[b-vge9guvasa] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text3);
}
.sd-live[b-vge9guvasa], .sd-clock[b-vge9guvasa], .sd-activity[b-vge9guvasa] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 28px;
    padding: 0 0.6rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text2);
}
.sd-live[b-vge9guvasa] { color: var(--text3); }
.sd-live.is-live[b-vge9guvasa] {
    color: var(--accent);
    border-color: var(--badge-accent-border);
    background: var(--badge-accent-bg);
}
.sd-live-dot[b-vge9guvasa] {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text3);
}
.sd-live.is-live .sd-live-dot[b-vge9guvasa] {
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5);
    animation: sd-pulse-b-vge9guvasa 2s infinite;
}
.sd-clock i[b-vge9guvasa], .sd-activity i[b-vge9guvasa] { width: 13px; height: 13px; opacity: 0.7; }
.sd-clock[b-vge9guvasa] { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 0.74rem; }
.sd-activity.is-active[b-vge9guvasa] { color: var(--accent); }

.sd-refresh[b-vge9guvasa] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 32px;
    padding: 0 0.85rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.sd-refresh i[b-vge9guvasa] { width: 15px; height: 15px; }
.sd-refresh:hover:not(:disabled)[b-vge9guvasa] { background: var(--surface2); border-color: var(--border2); }
.sd-refresh:disabled[b-vge9guvasa] { opacity: 0.6; cursor: default; }
.sd-spin[b-vge9guvasa] { animation: sd-spin-b-vge9guvasa 0.9s linear infinite; }

/* ── Loading ──────────────────────────────────────────────────────────── */
.scale-loading-state[b-vge9guvasa] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem; padding: 5rem 1rem; color: var(--text2);
}
.scale-loading-spinner[b-vge9guvasa] {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid var(--border); border-top-color: var(--accent);
    animation: sd-spin-b-vge9guvasa 0.8s linear infinite;
}
.scale-loading-text[b-vge9guvasa] { font-size: 0.9rem; color: var(--text2); }

/* ── Layout — controls + KPIs on top (full width), tables below ──────────── */
.scale-main-layout[b-vge9guvasa] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Cards (shared surface language) ──────────────────────────────────── */
.scale-control-panel[b-vge9guvasa],
.scale-content-area[b-vge9guvasa],
.scale-mobile-controls[b-vge9guvasa] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.scale-control-panel[b-vge9guvasa] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
}
/* "Control Panel / Manage your view settings" label not needed up top */
.scale-panel-header[b-vge9guvasa] { display: none; }
.scale-panel-title[b-vge9guvasa] {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--text);
}
.scale-panel-title i[b-vge9guvasa] { width: 17px; height: 17px; color: var(--accent); }
.scale-panel-subtitle[b-vge9guvasa] { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--text3); }

/* Period control row — date nav (left) + Hourly/Daily/Monthly tabs (right) */
.scale-time-card[b-vge9guvasa] {
    display: flex; flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 0; margin: 0; background: transparent;
}
.scale-period-display[b-vge9guvasa] { text-align: left; margin: 0; flex: 0 0 auto; }
.scale-period-display h3[b-vge9guvasa] {
    margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.scale-period-display p[b-vge9guvasa] { margin: 0.1rem 0 0; font-size: 0.7rem; color: var(--text3); }

.scale-time-navigation[b-vge9guvasa] {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0; flex: 0 0 auto;
}
.scale-nav-btn[b-vge9guvasa] {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--text2); cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.scale-nav-btn i[b-vge9guvasa] { width: 15px; height: 15px; }
.scale-nav-btn:hover:not(:disabled)[b-vge9guvasa] { background: var(--surface3); color: var(--text); border-color: var(--border2); }
.scale-nav-btn:disabled[b-vge9guvasa] { opacity: 0.4; cursor: default; }
.scale-date-display[b-vge9guvasa] {
    flex: 0 0 auto; min-width: 108px; text-align: center; font-size: 0.82rem; font-weight: 600;
    color: var(--text); font-variant-numeric: tabular-nums;
    padding: 0.35rem 0.6rem; border-radius: var(--radius-sm);
    background: var(--surface2); border: 1px solid var(--border);
}

/* Segmented period tabs — pushed to the right of the control row, on top */
.scale-period-tabs[b-vge9guvasa] {
    display: grid; grid-template-columns: repeat(3, minmax(82px, auto)); gap: 3px;
    margin-left: auto; flex: 0 0 auto;
    padding: 3px; background: var(--surface3); border-radius: var(--radius);
}
.scale-period-tab[b-vge9guvasa] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    height: 34px; border: none; background: transparent; cursor: pointer;
    border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600;
    color: var(--text2); transition: all var(--dur) var(--ease);
}
.scale-period-tab i[b-vge9guvasa] { width: 14px; height: 14px; }
.scale-period-tab:hover[b-vge9guvasa] { color: var(--text); }
.scale-period-tab.active[b-vge9guvasa] {
    background: var(--brand-gradient); color: #fff;
    box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb), 0.5); font-weight: 700;
}
.scale-period-tab.active i[b-vge9guvasa] { color: #fff; opacity: 0.95; }

/* KPI metric cards — auto-fit row, full width (room to breathe, no truncation) */
.scale-stats-grid[b-vge9guvasa] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.85rem; }
.scale-stat-card[b-vge9guvasa] { padding: 0.95rem 1.1rem; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); }
.scale-stat-header[b-vge9guvasa] { display: flex; align-items: center; gap: 0.6rem; }
.scale-stat-icon[b-vge9guvasa] {
    width: 34px; height: 34px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--badge-accent-bg); color: var(--accent);
}
.scale-stat-icon i[b-vge9guvasa] { width: 17px; height: 17px; }
.stat-target .scale-stat-icon[b-vge9guvasa] { background: var(--badge-info-bg); color: var(--info); }
.stat-time .scale-stat-icon[b-vge9guvasa] { background: var(--badge-warning-bg); color: var(--warning); }
.scale-stat-info[b-vge9guvasa] { min-width: 0; }
.scale-stat-label[b-vge9guvasa] {
    margin: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text3); line-height: 1.25;
}
.scale-stat-value[b-vge9guvasa] {
    margin: 0.15rem 0 0; font-size: 1.5rem; font-weight: 700; color: var(--text);
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.01em;
}
.scale-stat-progress[b-vge9guvasa] { margin-top: 0.6rem; }
.scale-progress-info[b-vge9guvasa] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.scale-progress-label[b-vge9guvasa] { font-size: 0.68rem; color: var(--text3); font-weight: 600; }
.scale-progress-value[b-vge9guvasa] { font-size: 0.72rem; color: var(--text2); font-weight: 700; font-variant-numeric: tabular-nums; }
.scale-progress-bar[b-vge9guvasa] { height: 5px; border-radius: var(--radius-full); background: var(--surface3); overflow: hidden; }
.scale-progress-fill[b-vge9guvasa] {
    height: 100%; border-radius: var(--radius-full);
    background: var(--accent); transition: width 0.5s var(--ease);
}
.stat-target .scale-progress-fill[b-vge9guvasa] { background: var(--info); }

/* Target chase toggle — slim inline strip */
.scale-target-chase[b-vge9guvasa] { padding: 0.5rem 0.85rem; margin: 0; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); max-width: 280px; }
.scale-toggle-container[b-vge9guvasa] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.scale-toggle-label[b-vge9guvasa] { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--text2); }
.scale-toggle-label i[b-vge9guvasa] { width: 15px; height: 15px; color: var(--accent); }
.scale-toggle-switch[b-vge9guvasa] { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.scale-toggle-switch input[b-vge9guvasa] { opacity: 0; width: 0; height: 0; }
.scale-toggle-slider[b-vge9guvasa] {
    position: absolute; inset: 0; cursor: pointer; border-radius: var(--radius-full);
    background: var(--surface3); border: 1px solid var(--border); transition: all var(--dur) var(--ease);
}
.scale-toggle-slider[b-vge9guvasa]::before {
    content: ""; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px;
    border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease);
}
.scale-toggle-switch input:checked + .scale-toggle-slider[b-vge9guvasa] { background: var(--accent); border-color: var(--accent); }
.scale-toggle-switch input:checked + .scale-toggle-slider[b-vge9guvasa]::before { transform: translateX(18px); }

/* ── View tabs (Production tables | Performance chart) ────────────────── */
.scale-view-tabs[b-vge9guvasa] {
    display: inline-flex; gap: 0.25rem; padding: 0.28rem;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-full); margin-bottom: 1rem;
}
.scale-view-tab[b-vge9guvasa] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    border: none; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text3);
    padding: 0.5rem 1.05rem; border-radius: var(--radius-full);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.scale-view-tab i[b-vge9guvasa] { width: 15px; height: 15px; }
.scale-view-tab:hover[b-vge9guvasa] { color: var(--text); }
.scale-view-tab.active[b-vge9guvasa] {
    background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
    padding: calc(0.5rem - 1px) calc(1.05rem - 1px);
}
@media (max-width: 640px) {
    .scale-view-tabs[b-vge9guvasa] { display: flex; width: 100%; }
    .scale-view-tab[b-vge9guvasa] { flex: 1; justify-content: center; }
}

/* When the performance chart is the whole tab it gets more presence. */
.sd-perf.sd-perf-tab[b-vge9guvasa] { padding: 1.4rem 1.5rem 1.1rem; }
.sd-perf.sd-perf-tab .sd-perf-title h2[b-vge9guvasa] { font-size: 1.4rem; }
.sd-perf.sd-perf-tab .sd-kpi-num[b-vge9guvasa] { font-size: 1.7rem; }

/* ── Plant performance chart card ─────────────────────────────────────── */
.sd-perf[b-vge9guvasa] {
    position: relative; overflow: hidden;
    background:
        radial-gradient(640px 200px at 8% -30%, rgba(var(--accent-rgb), 0.10), transparent 62%),
        linear-gradient(180deg, var(--surface), var(--surface2));
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.04);
    padding: 1.1rem 1.2rem 0.9rem;
}
.sd-perf-head[b-vge9guvasa] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.sd-perf-title h2[b-vge9guvasa] { margin: 0; font-family: var(--font-display, 'Fraunces', serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.sd-perf-sub[b-vge9guvasa] { display: block; font-size: 0.72rem; color: var(--text3); margin-top: 0.15rem; }
.sd-perf-kpis[b-vge9guvasa] { display: flex; gap: 1.6rem; }
.sd-kpi[b-vge9guvasa] { text-align: right; }
.sd-kpi-num[b-vge9guvasa] { display: block; font-family: var(--font-display, 'Fraunces', serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.sd-kpi-dim[b-vge9guvasa] { color: var(--text2); }
.sd-kpi-pos[b-vge9guvasa] { color: var(--success); }
.sd-kpi-neg[b-vge9guvasa] { color: var(--danger); }
.sd-kpi-lbl[b-vge9guvasa] { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text3); margin-top: 0.2rem; }

/* Uniform-scaled SVG: full width, height follows the viewBox aspect (no stretch),
   capped so it stays a tidy band on very wide screens. */
.sd-perf[b-vge9guvasa]  .ms-chart, .sd-perf .ms-chart[b-vge9guvasa] { width: 100%; height: auto; max-height: 440px; display: block; }
.sd-perf-legend[b-vge9guvasa] { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.45rem; font-size: 0.7rem; color: var(--text3); }
.sd-perf-legend span[b-vge9guvasa] { display: inline-flex; align-items: center; gap: 0.4rem; }
.sd-perf-legend i[b-vge9guvasa] { display: inline-block; }
.sd-lg-bar[b-vge9guvasa] { width: 9px; height: 9px; border-radius: 2.5px; background: var(--accent); opacity: 0.75; }
.sd-lg-line[b-vge9guvasa] { width: 16px; height: 2px; border-radius: 2px; background: var(--accent); }
.sd-lg-dash[b-vge9guvasa] { width: 16px; height: 0; border-top: 2px dashed var(--text3); }
.sd-lg-hi[b-vge9guvasa] { width: 9px; height: 9px; border-radius: 2.5px; background: var(--warning); opacity: 0.85; }

@media (max-width: 640px) {
    .sd-perf[b-vge9guvasa] { padding: 0.9rem 0.8rem 0.7rem; }
    .sd-perf[b-vge9guvasa]  .ms-chart, .sd-perf .ms-chart[b-vge9guvasa] { max-height: 300px; }
    .sd-perf-kpis[b-vge9guvasa] { gap: 1rem; width: 100%; justify-content: space-between; }
    .sd-kpi[b-vge9guvasa] { text-align: left; }
    .sd-kpi-num[b-vge9guvasa] { font-size: 1.15rem; }
}

/* ── Content / production analytics ───────────────────────────────────── */
.scale-content-area[b-vge9guvasa] { padding: 1rem; min-width: 0; }
.scale-content-header[b-vge9guvasa] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap; margin-bottom: 0.85rem;
}
.scale-content-title[b-vge9guvasa] { display: flex; align-items: center; gap: 0.5rem; }
.scale-content-title i[b-vge9guvasa] { width: 18px; height: 18px; color: var(--accent); }
.scale-content-title h2[b-vge9guvasa] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.scale-content-count[b-vge9guvasa] {
    font-size: 0.72rem; font-weight: 700; color: var(--accent);
    background: var(--badge-accent-bg); border: 1px solid var(--badge-accent-border);
    padding: 0.25rem 0.6rem; border-radius: var(--radius-full);
}

/* Group filter chips */
.scale-group-filter[b-vge9guvasa] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.scale-gf-chip[b-vge9guvasa] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    height: 30px; padding: 0 0.8rem; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text2); font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: all var(--dur) var(--ease); white-space: nowrap;
}
.scale-gf-chip i[b-vge9guvasa] { width: 13px; height: 13px; }
.scale-gf-chip:hover[b-vge9guvasa] { border-color: var(--border2); color: var(--text); background: var(--surface2); }
.scale-gf-chip.active[b-vge9guvasa] {
    background: var(--brand-gradient); color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb), 0.5);
}

/* Sections + tables */
.scale-table-wrapper[b-vge9guvasa] { display: flex; flex-direction: column; gap: 1rem; }
.scale-section[b-vge9guvasa] {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--surface);
}

/* Performance ramp. Deliberately NOT the cyan accent: accent = brand/interaction,
   this ramp = "are we hitting target". Keeping them separate stops a dense grid
   reading as one undifferentiated wash of blue. */
.sd-band-under[b-vge9guvasa] { --perf: var(--perf-under); }
.sd-band-near[b-vge9guvasa]  { --perf: var(--perf-near); }
.sd-band-on[b-vge9guvasa]    { --perf: var(--perf-on); }
.sd-band-none[b-vge9guvasa]  { --perf: var(--text3); }

/* Group card: a hairline of its own performance colour down the left edge, so a
   struggling plant area is findable before you read a single number. */
.scale-section.sd-card[b-vge9guvasa] { position: relative; }
.scale-section.sd-card[b-vge9guvasa]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--perf, var(--border2)); opacity: 0.9;
}
.scale-section-header[b-vge9guvasa] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.55rem 0.9rem 0.55rem 1.05rem; margin: 0;
    background: var(--surface2); border-bottom: 1px solid var(--border);
}
.scale-section-header h2[b-vge9guvasa] {
    display: flex; align-items: center; gap: 0.5rem; margin: 0;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text);
}
.sd-card-tick[b-vge9guvasa] { width: 7px; height: 7px; border-radius: 2px; background: var(--perf, var(--text3)); flex: none; }
.scale-section-header i[b-vge9guvasa] { width: 15px; height: 15px; color: var(--accent); }

/* Group roll-up in the card header: act / tar plus the % badge. */
.sd-card-stat[b-vge9guvasa] {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.78rem;
}
.sd-card-act[b-vge9guvasa] { color: var(--text); font-weight: 700; }
.sd-card-sep[b-vge9guvasa] { color: var(--text3); }
.sd-card-tar[b-vge9guvasa] { color: var(--text3); }
.sd-card-pct[b-vge9guvasa] {
    margin-left: 0.35rem; padding: 0.1rem 0.4rem; border-radius: var(--radius-full);
    font-size: 0.7rem; font-weight: 700; color: var(--perf, var(--text2));
    background: color-mix(in srgb, var(--perf, var(--text3)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--perf, var(--text3)) 26%, transparent);
}

/* Plant summary rail: the headline answer, above the breakdown. */
.sd-summary[b-vge9guvasa] {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.25rem;
    padding: 0.85rem 1.15rem; margin-bottom: 0.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.sd-summary[b-vge9guvasa]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--perf, var(--accent));
}
.sd-sum-hero[b-vge9guvasa] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sd-sum-label[b-vge9guvasa] {
    font-size: 0.63rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--text3);
}
.sd-sum-value[b-vge9guvasa] {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: clamp(1.65rem, 4vw, 2.35rem); font-weight: 700; line-height: 1.05;
    color: var(--text); letter-spacing: -0.02em;
}
.sd-sum-value em[b-vge9guvasa] { font-style: normal; font-size: 0.42em; font-weight: 600; color: var(--text3); margin-left: 0.28rem; }
.sd-sum-target[b-vge9guvasa] { font-size: 0.72rem; color: var(--text3); font-variant-numeric: tabular-nums; }

/* Pace ring: one glance says whether the plant is on target. */
.sd-sum-ring[b-vge9guvasa] { position: relative; width: 76px; height: 76px; flex: none; display: grid; place-items: center; }
.sd-sum-ring svg[b-vge9guvasa] { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sd-ring-bg[b-vge9guvasa] { fill: none; stroke: var(--surface3); stroke-width: 5; }
.sd-ring-fg[b-vge9guvasa] {
    fill: none; stroke: var(--perf, var(--accent)); stroke-width: 5; stroke-linecap: round;
    transition: stroke-dasharray var(--dur-lg) var(--ease);
}
.sd-ring-num[b-vge9guvasa] {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 1.02rem; font-weight: 700; color: var(--text); line-height: 1;
}
.sd-ring-num em[b-vge9guvasa] { font-style: normal; font-size: 0.62em; color: var(--text3); }
.sd-ring-lbl[b-vge9guvasa] {
    position: absolute; bottom: 9px; font-size: 0.53rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text3);
}

.sd-sum-meta[b-vge9guvasa] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 132px; }
.sd-meta-row[b-vge9guvasa] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sd-meta-k[b-vge9guvasa] { font-size: 0.65rem; color: var(--text3); font-weight: 600; }
.sd-meta-v[b-vge9guvasa] {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 0.84rem; font-weight: 700; color: var(--text);
}
.sd-meta-v em[b-vge9guvasa] { font-style: normal; color: var(--text3); font-weight: 600; font-size: 0.85em; }
.sd-meta-v.is-pos[b-vge9guvasa] { color: var(--success); }
.sd-meta-v.is-neg[b-vge9guvasa] { color: var(--danger); }
.sd-meta-bar[b-vge9guvasa] { height: 4px; border-radius: var(--radius-full); background: var(--surface3); overflow: hidden; }
.sd-meta-bar span[b-vge9guvasa] {
    display: block; height: 100%; background: var(--accent); border-radius: inherit;
    transition: width var(--dur-lg) var(--ease);
}

@media (max-width: 720px) {
    .sd-summary[b-vge9guvasa] { grid-template-columns: 1fr auto; gap: 0.85rem 1rem; padding: 0.75rem 0.9rem; }
    .sd-sum-meta[b-vge9guvasa] { grid-column: 1 / -1; min-width: 0; }
}

/* Secondary (HUSK) group — its own grid stacked below the seed grid in a section */
.scale-subsection[b-vge9guvasa] { border-top: 1px solid var(--border); }
.scale-subheader[b-vge9guvasa] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.9rem; margin: 0;
    background: var(--surface2); border-bottom: 1px solid var(--border);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text2);
}
.scale-subheader i[b-vge9guvasa] { width: 14px; height: 14px; color: var(--accent); }

.scale-table[b-vge9guvasa] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

/* Fixed column geometry. Every section renders the SAME colgroup, so ACT/TAR/VAR/%/
   Pace/child sit at identical x-positions in every card — previously each table
   auto-sized its own columns and nothing lined up down the page. */
.scale-table.sd-grid[b-vge9guvasa] { table-layout: fixed; }
.sd-col-name[b-vge9guvasa]  { width: auto; }
.sd-col-num[b-vge9guvasa]   { width: 8.5rem; }
.sd-col-pct[b-vge9guvasa]   { width: 5.5rem; }
.sd-col-pace[b-vge9guvasa]  { width: 9rem; }
.sd-col-child[b-vge9guvasa] { width: 8.5rem; }

/* Child-group column (Husk / Crude In) — the child's tonnes on its PARENT's row.
   The husk belongs to that seed line, so it reads as one fact instead of a second
   table. A rule separates it from the parent's own figures. */
.sd-child-h[b-vge9guvasa], .sd-child-cell[b-vge9guvasa] { border-left: 2px solid var(--border2) !important; }
.sd-child-cell[b-vge9guvasa] {
    color: var(--text2); font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.scale-total-row .sd-child-cell[b-vge9guvasa] { font-weight: 700; color: var(--text); }
.scale-table th[b-vge9guvasa], .scale-table td[b-vge9guvasa] {
    padding: 0.5rem 0.6rem; text-align: right; white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.scale-table tr:last-child td[b-vge9guvasa], .scale-table tr:last-child th[b-vge9guvasa] { border-bottom: none; }

/* Column-group header (SEED / HUSK) */
.scale-group-header[b-vge9guvasa] {
    text-align: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text3);
    background: var(--surface2); padding: 0.45rem 0.6rem;
}
/* Column labels (ACT/TAR/VAR/%). Scoped to <thead> ONLY.
   ⚠ Do NOT reintroduce `tr:first-child th` here. The header row now lives in
   <thead>, so the first row of <tbody> is ALSO a `tr:first-child` (first child of
   its own parent) — that selector therefore hit the first SCALE row in every
   group and rendered its name at 0.64rem in muted --text3, making row one look
   shrunken next to the rest. (Same class of bug as the earlier nth-child(2) one.) */
.scale-table thead th[b-vge9guvasa] {
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text3);
    background: var(--surface); padding-top: 0.45rem; padding-bottom: 0.45rem;
}
.scale-table thead th:first-child[b-vge9guvasa] { text-align: left; }

/* Belt-and-braces: the name cell is a <th> inside <tbody>, so make its intended
   type explicit rather than relying on nothing else matching it. */
.scale-table tbody th.scale-name-cell[b-vge9guvasa] {
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0; color: var(--text);
    background: transparent;
}

/* Scale name cell — width:1% + nowrap shrinks the column to its content so the
   full name always shows; the numeric columns share the remaining width. */
.scale-name-cell[b-vge9guvasa] {
    text-align: left !important; font-weight: 600; padding-right: 1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scale-name-wrapper[b-vge9guvasa] { display: inline-flex; align-items: center; gap: 0.5rem; }
.scale-name-text[b-vge9guvasa] { color: var(--text); font-weight: 600; }
.scale-status-indicator[b-vge9guvasa] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text3); }
.scale-status-indicator.online[b-vge9guvasa] { background: var(--success); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.12); }
.scale-status-indicator.stale[b-vge9guvasa] { background: var(--warning); }
.scale-status-indicator.offline[b-vge9guvasa] { background: var(--danger); }

/* Value cells */
.scale-table td[b-vge9guvasa] { color: var(--text2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.scale-value-cell[b-vge9guvasa] { color: var(--text); font-weight: 600; }
.scale-value-positive[b-vge9guvasa] { color: var(--success); }
.scale-value-negative[b-vge9guvasa] { color: var(--danger); }
.scale-group-border-left[b-vge9guvasa] { border-left: 1px solid var(--border); }

/* Per-row pace gauge. The functional heart of the redesign: % as a SHAPE.
   Scanning one column of bars finds the scales that are behind far faster than
   reading nine separate numbers. */
.sd-pace-h[b-vge9guvasa] { width: 130px; }
.sd-pace-cell[b-vge9guvasa] { width: 130px; padding-left: 0.4rem !important; padding-right: 0.9rem !important; }
.sd-pace[b-vge9guvasa] {
    position: relative; display: block; height: 7px; width: 100%;
    background: var(--surface3); border-radius: var(--radius-full);
    /* NO overflow:hidden — it is this element's own containing block, so it clipped
       the 100% tick below into nothing. The fill inherits the radius, so it stays
       inside the track without needing the clip. */
}
/* the 100% mark - a real reference line, so "over target" is visible, not inferred */
.sd-pace[b-vge9guvasa]::after {
    content: ""; position: absolute; right: 0; top: -2px; bottom: -2px; width: 2px;
    background: var(--text3); border-radius: 1px; z-index: 1; opacity: 0.55;
}
.sd-pace-fill[b-vge9guvasa] {
    display: block; height: 100%; border-radius: inherit;
    background: var(--perf, var(--text3));
    transition: width var(--dur-lg) var(--ease);
}
.sd-pace-strong[b-vge9guvasa] { height: 9px; }
.sd-pace.sd-band-on .sd-pace-fill[b-vge9guvasa] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--perf) 40%, transparent); }

/* Row states */
.scale-table tbody tr:hover td[b-vge9guvasa], .scale-table tr:hover td[b-vge9guvasa] { background: var(--row-hover); }
.scale-total-row td[b-vge9guvasa], .scale-total-row th[b-vge9guvasa] {
    background: var(--surface2); font-weight: 700; color: var(--text);
    border-top: 1px solid var(--border2);
}
.scale-total-row .scale-name-cell[b-vge9guvasa] { color: var(--text); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
.scale-value-updated[b-vge9guvasa] { animation: sd-flash-b-vge9guvasa 1.2s var(--ease); }

/* ── Mobile controls (shown on phones) ────────────────────────────────── */
.scale-mobile-controls[b-vge9guvasa] { display: none; padding: 0.85rem; }
.scale-mobile-header[b-vge9guvasa] { margin-bottom: 0.6rem; }
.scale-mobile-title[b-vge9guvasa] { margin: 0; font-size: 0.95rem; font-weight: 700; }
.scale-mobile-stats[b-vge9guvasa] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.7rem; }
.scale-mobile-stat[b-vge9guvasa] { text-align: center; padding: 0.5rem 0.25rem; border-radius: var(--radius-sm); background: var(--surface2); }
.scale-mobile-stat-value[b-vge9guvasa] { font-size: 1rem; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.scale-mobile-stat-label[b-vge9guvasa] { margin: 0.1rem 0 0; font-size: 0.6rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.scale-mobile-period[b-vge9guvasa] { text-align: center; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; }
.scale-mobile-timenav[b-vge9guvasa] { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.7rem; }
.scale-mobile-date[b-vge9guvasa] { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.scale-mobile-nav[b-vge9guvasa] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--surface3); border-radius: var(--radius); }
.scale-mobile-nav button[b-vge9guvasa] {
    height: 34px; border: none; background: transparent; border-radius: var(--radius-sm);
    font-size: 0.78rem; font-weight: 600; color: var(--text2); cursor: pointer;
}
.scale-mobile-nav button.active[b-vge9guvasa] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-xs); font-weight: 700; }

/* ── Notification toast ───────────────────────────────────────────────── */
.scale-notification[b-vge9guvasa] {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2000;
    display: flex; align-items: flex-start; gap: 0.7rem; max-width: 340px;
    padding: 0.8rem 0.9rem; border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: all var(--dur-lg) var(--ease);
}
.scale-notification-show[b-vge9guvasa] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scale-notification-icon[b-vge9guvasa] {
    width: 30px; height: 30px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--badge-accent-bg); color: var(--accent);
}
.scale-notification-icon i[b-vge9guvasa] { width: 17px; height: 17px; }
.scale-notification-success .scale-notification-icon[b-vge9guvasa] { background: var(--badge-accent-bg); color: var(--success); }
.scale-notification-error .scale-notification-icon[b-vge9guvasa] { background: var(--badge-danger-bg); color: var(--danger); }
.scale-notification-warning .scale-notification-icon[b-vge9guvasa] { background: var(--badge-warning-bg); color: var(--warning); }
.scale-notification-info .scale-notification-icon[b-vge9guvasa] { background: var(--badge-info-bg); color: var(--info); }
.scale-notification-title[b-vge9guvasa] { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.scale-notification-message[b-vge9guvasa] { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--text2); }
.scale-notification-close[b-vge9guvasa] {
    margin-left: auto; background: transparent; border: none; color: var(--text3);
    cursor: pointer; padding: 0.1rem; display: inline-flex;
}
.scale-notification-close i[b-vge9guvasa] { width: 15px; height: 15px; }

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes sd-spin-b-vge9guvasa { to { transform: rotate(360deg); } }
@keyframes sd-pulse-b-vge9guvasa { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.45); } 70% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); } }
@keyframes sd-flash-b-vge9guvasa { 0% { background: var(--badge-accent-bg); } 100% { background: transparent; } }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .scale-main-layout[b-vge9guvasa] { grid-template-columns: 1fr; }
    .scale-control-panel[b-vge9guvasa] { position: static; }
}
@media (max-width: 768px) {
    .scale-content-area[b-vge9guvasa] { padding: 0.75rem; }
    .scale-table th[b-vge9guvasa], .scale-table td[b-vge9guvasa] { padding: 0.45rem 0.4rem; font-size: 0.78rem; }
    .sd-eyebrow[b-vge9guvasa] { display: none; }
    .scale-notification[b-vge9guvasa] { left: 1rem; right: 1rem; max-width: none; }
}
@media (min-width: 769px) {
    .scale-mobile-controls[b-vge9guvasa] { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   asetrix dark-glam — radial accent glow + blurred orb "illustration",
   metric-style KPI cards, and mobile-first (fits 400px).
   ════════════════════════════════════════════════════════════════════════ */

.scale-dashboard[b-vge9guvasa] { position: relative; isolation: isolate; }
.scale-dashboard[b-vge9guvasa]::before {
    content: ""; position: absolute; inset: -8% -4% auto -4%; height: 380px; z-index: -1;
    background: radial-gradient(900px 320px at 50% -42%, rgba(var(--accent-rgb), 0.10), transparent 62%);
    pointer-events: none;
}
.scale-dashboard[b-vge9guvasa]::after {
    content: ""; position: absolute; top: -50px; right: 5%; width: 20rem; height: 20rem; z-index: -1;
    background: rgba(var(--accent-rgb), 0.12); filter: blur(90px); border-radius: 50%;
    opacity: 0.55; pointer-events: none;
}

/* KPI cards → asetrix .metric: left gradient bar + hover lift */
.scale-stat-card[b-vge9guvasa] {
    position: relative; overflow: hidden;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.scale-stat-card[b-vge9guvasa]::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
    background: var(--brand-gradient);
}
.scale-stat-card:hover[b-vge9guvasa] { transform: translateY(-2px); border-color: var(--badge-accent-border); box-shadow: var(--shadow-md); }


/* ── Mobile-first: keep the table GRID; SEED + each HUSK group are already
   separate tables (≤5 cols each, so they fit ~360px). Just tighten + let a row
   scroll horizontally as a safety net. ≤460px tighten chips/refresh. ── */
@media (max-width: 600px) {
    .scale-dashboard[b-vge9guvasa] { padding: 0.15rem 0.1rem 1.25rem; }
    .scale-content-area[b-vge9guvasa] { padding: 0.7rem; }
    .sd-toolbar-left[b-vge9guvasa] { gap: 0.4rem; }
    .scale-content-header[b-vge9guvasa] { gap: 0.5rem; }
    .scale-dashboard[b-vge9guvasa]::after { width: 14rem; height: 14rem; }

    /* control bar stacks cleanly on phones (fits 400px) */
    .scale-control-panel[b-vge9guvasa] { padding: 0.8rem; }
    .scale-time-card[b-vge9guvasa] { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .scale-time-navigation[b-vge9guvasa] { justify-content: space-between; }
    .scale-date-display[b-vge9guvasa] { flex: 1 1 auto; }
    .scale-period-tabs[b-vge9guvasa] { margin-left: 0; width: 100%; grid-template-columns: repeat(3, 1fr); }

    /* keep tables as grids; tighten so the 5 columns fit small screens */
    .scale-table[b-vge9guvasa] { font-size: 0.78rem; }
    .scale-table th[b-vge9guvasa], .scale-table td[b-vge9guvasa] { padding: 0.45rem 0.4rem; }
    .scale-name-cell[b-vge9guvasa] { padding-right: 0.6rem; white-space: normal; width: auto; }
    .scale-section-header[b-vge9guvasa], .scale-subheader[b-vge9guvasa] { padding-left: 0.7rem; padding-right: 0.7rem; }
}
@media (max-width: 400px) {
    .scale-content-area[b-vge9guvasa] { padding: 0.55rem; }
    .scale-group-filter[b-vge9guvasa] { gap: 0.3rem; }
    .scale-gf-chip[b-vge9guvasa] { height: 28px; padding: 0 0.65rem; font-size: 0.74rem; }
    .sd-refresh span[b-vge9guvasa] { display: none; }
    .sd-refresh[b-vge9guvasa] { padding: 0 0.55rem; }
    .scale-table[b-vge9guvasa] { font-size: 0.72rem; }
    .scale-table th[b-vge9guvasa], .scale-table td[b-vge9guvasa] { padding: 0.4rem 0.3rem; }
}

/* On phones the gauge column is the first thing to go: the ACT/TAR/VAR/% numbers
   still carry the full story and horizontal space is precious. */
@media (max-width: 860px) {
    .sd-pace-h[b-vge9guvasa], .sd-pace-cell[b-vge9guvasa] { display: none; }
    .sd-col-num[b-vge9guvasa] { width: 6rem; }
    .sd-col-pct[b-vge9guvasa] { width: 4.25rem; }
}
@media (max-width: 620px) {
    .sd-child-h[b-vge9guvasa], .sd-child-cell[b-vge9guvasa] { display: none; }
    .sd-col-num[b-vge9guvasa] { width: 5rem; }
    .sd-col-pct[b-vge9guvasa] { width: 3.6rem; }
    .scale-name-cell[b-vge9guvasa] { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE LAYOUT (<= 640px)
   A 7-column grid cannot fit a phone: with fixed column widths the numeric
   columns ate the width and squeezed the scale name to nothing, so you could
   read the names and not the figures. Below this width each scale STOPS being
   a table row and becomes a compact card — name + the big ACT number on one
   line, its pace bar under it, then TAR / VAR / % / Husk as small labelled
   figures. Nothing is hidden and nothing scrolls sideways.
   Placed last in the file so it beats the >=620px rules that hide the pace and
   child columns on tablet.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    .scale-table.sd-grid[b-vge9guvasa],
    .scale-table.sd-grid tbody[b-vge9guvasa] { display: block; table-layout: auto; width: 100%; }
    .scale-table.sd-grid thead[b-vge9guvasa] { display: none; }          /* labels move onto the cells */
    .scale-table.sd-grid colgroup[b-vge9guvasa] { display: none; }        /* fixed widths must not apply */

    .scale-table.sd-grid tr[b-vge9guvasa] {
        display: flex; flex-wrap: wrap; align-items: baseline;
        gap: 0.1rem 0.55rem;
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--border);
    }
    .scale-table.sd-grid tr:last-child[b-vge9guvasa] { border-bottom: none; }

    .scale-table.sd-grid th[b-vge9guvasa],
    .scale-table.sd-grid td[b-vge9guvasa] {
        display: block; border: none; padding: 0; text-align: left;
        white-space: nowrap; background: none;
    }

    /* line 1 — who, and the number that matters */
    .scale-table.sd-grid .scale-name-cell[b-vge9guvasa] {
        flex: 1 1 auto; min-width: 0; font-size: 0.88rem; padding: 0;
        overflow: hidden; text-overflow: ellipsis;
    }
    .scale-table.sd-grid .scale-value-cell[b-vge9guvasa] {
        flex: 0 0 auto; margin-left: auto; text-align: right;
        font-size: 1.35rem; font-weight: 700; line-height: 1.05;
        color: var(--text); letter-spacing: -0.02em;
    }

    /* line 2 — the pace bar, full width. Re-shown here: on a phone the bar is
       the fastest read on the card, and it costs one line. */
    .scale-table.sd-grid .sd-pace-cell[b-vge9guvasa] {
        display: block !important;
        flex: 1 1 100%; padding: 0.3rem 0 0.15rem !important;
    }
    .scale-table.sd-grid .sd-pace[b-vge9guvasa] { height: 8px; }

    /* line 3 — the supporting figures, each with its column label */
    .scale-table.sd-grid td[data-l][b-vge9guvasa] {
        flex: 0 0 auto;
        font-size: 0.86rem; font-weight: 650;
        font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    }
    .scale-table.sd-grid td[data-l][b-vge9guvasa]::before {
        content: attr(data-l);
        display: block;
        font-family: var(--font);
        font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
        text-transform: uppercase; color: var(--text3);
        margin-bottom: -0.05rem;
    }
    /* the child column (Husk / Crude In) comes back on phones as another figure */
    .scale-table.sd-grid .sd-child-cell[b-vge9guvasa] {
        display: block !important; border-left: none !important;
        margin-left: auto; text-align: right;
    }
    /* an empty child cell must not reserve space or print a stray label */
    .scale-table.sd-grid .sd-child-cell:empty[b-vge9guvasa] { display: none !important; }

    /* group total row reads as the card's footer */
    .scale-table.sd-grid .scale-total-row[b-vge9guvasa] {
        background: var(--surface2); border-top: 1px solid var(--border2);
    }
    .scale-table.sd-grid .scale-total-row .scale-name-cell[b-vge9guvasa] { font-size: 0.72rem; }

    /* card chrome */
    .scale-section-header[b-vge9guvasa] { padding: 0.5rem 0.75rem 0.5rem 0.9rem; }
    .scale-table-wrapper[b-vge9guvasa] { gap: 0.7rem; }

    /* summary rail: hero and ring side by side, meta underneath */
    .sd-summary[b-vge9guvasa] { padding: 0.7rem 0.8rem; gap: 0.6rem 0.9rem; }
    .sd-sum-ring[b-vge9guvasa] { width: 64px; height: 64px; }
    .sd-sum-value[b-vge9guvasa] { font-size: 1.85rem; }
}

/* Very small phones — trim the type a little further, keep the structure. */
@media (max-width: 380px) {
    .scale-table.sd-grid .scale-value-cell[b-vge9guvasa] { font-size: 1.2rem; }
    .scale-table.sd-grid td[data-l][b-vge9guvasa] { font-size: 0.8rem; }
    .scale-table.sd-grid tr[b-vge9guvasa] { padding: 0.55rem 0.6rem; gap: 0.1rem 0.45rem; }
}
/* /Components/Pages/ScaleDetail.razor.rz.scp.css */
/* ============================================================================
   Per-scale detail — the page a recipient lands on from their hourly report.
   Reuses the dashboard's token language (asetrix cyan/zinc + the theme-paired
   performance ramp) so arriving here from the e-mail feels like the same system.
   ========================================================================== */

.sx-page[b-f3mjwtase7] {
    display: flex; flex-direction: column; gap: 0.9rem;
    font-family: var(--font, 'Inter', system-ui, sans-serif);
    --perf: var(--text3);
}
.sx-band-under[b-f3mjwtase7] { --perf: var(--perf-under, var(--danger)); }
.sx-band-near[b-f3mjwtase7]  { --perf: var(--perf-near,  var(--warning)); }
.sx-band-on[b-f3mjwtase7]    { --perf: var(--perf-on,    var(--success)); }
.sx-band-none[b-f3mjwtase7]  { --perf: var(--accent); }

/* ── Loading / message states ────────────────────────────────────────────── */
.sx-load[b-f3mjwtase7] { display: flex; align-items: center; gap: 0.7rem; padding: 3rem 1rem; justify-content: center; color: var(--text3); }
.sx-spinner[b-f3mjwtase7] {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border); border-top-color: var(--accent);
    animation: sx-spin-b-f3mjwtase7 0.9s linear infinite;
}
@keyframes sx-spin-b-f3mjwtase7 { to { transform: rotate(360deg); } }

.sx-msg[b-f3mjwtase7] {
    display: flex; gap: 0.85rem; align-items: flex-start; margin: 1.5rem 0;
    padding: 1rem 1.15rem; border-radius: var(--radius-lg);
    background: var(--surface2); border: 1px solid var(--border);
}
.sx-msg svg[b-f3mjwtase7], .sx-msg i[b-f3mjwtase7] { width: 20px; height: 20px; color: var(--warning); flex: none; }
.sx-msg strong[b-f3mjwtase7] { display: block; color: var(--text); }
.sx-msg span[b-f3mjwtase7] { color: var(--text3); font-size: 0.85rem; }
.sx-msg-deny svg[b-f3mjwtase7], .sx-msg-deny i[b-f3mjwtase7] { color: var(--danger); }

/* ── Hero: what this scale is + how fast it is running ───────────────────── */
.sx-hero[b-f3mjwtase7] {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem 1.5rem;
    padding: 1.05rem 1.25rem; border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.sx-hero[b-f3mjwtase7]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--perf);
}
.sx-back[b-f3mjwtase7] {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-bottom: 0.35rem;
    font-size: 0.72rem; font-weight: 650; color: var(--text3); text-decoration: none;
    letter-spacing: 0.03em;
}
.sx-back:hover[b-f3mjwtase7] { color: var(--accent); }
.sx-back svg[b-f3mjwtase7], .sx-back i[b-f3mjwtase7] { width: 14px; height: 14px; }

.sx-hero-id h1[b-f3mjwtase7] {
    margin: 0; font-size: clamp(1.35rem, 3.2vw, 1.9rem); font-weight: 700;
    letter-spacing: -0.015em; color: var(--text); line-height: 1.1;
}
.sx-tags[b-f3mjwtase7] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.sx-tag[b-f3mjwtase7] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.68rem; font-weight: 650; padding: 0.16rem 0.5rem;
    border-radius: var(--radius-full); background: var(--surface3); color: var(--text2);
    border: 1px solid var(--border);
}
.sx-dot[b-f3mjwtase7] { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sx-tag-on[b-f3mjwtase7]   { color: var(--success); border-color: color-mix(in srgb, var(--success) 32%, transparent); }
.sx-tag-warn[b-f3mjwtase7] { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.sx-tag-off[b-f3mjwtase7]  { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 32%, transparent); }

.sx-hero-rate[b-f3mjwtase7] { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.sx-rate-lbl[b-f3mjwtase7] {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text3);
}
.sx-rate-val[b-f3mjwtase7] {
    font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums;
    font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; line-height: 1.05;
    color: var(--text); letter-spacing: -0.02em;
}
.sx-rate-val em[b-f3mjwtase7] { font-style: normal; font-size: 0.4em; font-weight: 600; color: var(--text3); margin-left: 0.28rem; }
.sx-rate-sub[b-f3mjwtase7] { font-size: 0.7rem; color: var(--text3); margin-top: 0.1rem; }

/* ── Range tabs ──────────────────────────────────────────────────────────── */
.sx-ranges[b-f3mjwtase7] { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.sx-range[b-f3mjwtase7] {
    appearance: none; cursor: pointer;
    padding: 0.4rem 0.85rem; border-radius: var(--radius-full);
    font-size: 0.76rem; font-weight: 650; font-family: inherit;
    background: var(--surface2); color: var(--text2); border: 1px solid var(--border);
    transition: background var(--dur, 200ms), color var(--dur, 200ms), border-color var(--dur, 200ms);
}
.sx-range:hover[b-f3mjwtase7] { color: var(--text); border-color: var(--border2); }
.sx-range.is-on[b-f3mjwtase7] { background: var(--accent); color: #fff; border-color: var(--accent); }
.sx-range:focus-visible[b-f3mjwtase7] { outline: 2px solid var(--accent); outline-offset: 2px; }
.sx-range-note[b-f3mjwtase7] {
    margin-left: auto; font-size: 0.7rem; color: var(--text3);
    font-variant-numeric: tabular-nums;
}

/* ── KPI strip ───────────────────────────────────────────────────────────── */
.sx-kpis[b-f3mjwtase7] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; }
.sx-kpi[b-f3mjwtase7] {
    padding: 0.75rem 0.95rem; border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border);
}
.sx-kpi-lbl[b-f3mjwtase7] {
    display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--text3); margin-bottom: 0.28rem;
}
.sx-kpi-val[b-f3mjwtase7] {
    display: block; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums;
    font-size: 1.25rem; font-weight: 700; color: var(--text); line-height: 1.1;
}
.sx-kpi-val em[b-f3mjwtase7] { font-style: normal; font-size: 0.55em; font-weight: 600; color: var(--text3); margin-left: 0.22rem; }
.sx-kpi-hero[b-f3mjwtase7] { background: var(--surface2); border-color: var(--border2); }
.sx-kpi-hero .sx-kpi-val[b-f3mjwtase7] { font-size: 1.6rem; color: var(--perf); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.sx-card[b-f3mjwtase7] {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.sx-card-head[b-f3mjwtase7] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
    padding: 0.65rem 0.95rem; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.sx-card-head h2[b-f3mjwtase7] {
    margin: 0; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text);
}
.sx-card-sub[b-f3mjwtase7] { font-size: 0.68rem; color: var(--text3); }

.sx-chart[b-f3mjwtase7] { padding: 0.85rem 0.95rem 0.2rem; }
.sx-chart .ms-chart[b-f3mjwtase7] { width: 100%; height: auto; max-height: 260px; display: block; }
.sx-legend[b-f3mjwtase7] {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
    padding: 0 0.95rem 0.8rem; font-size: 0.68rem; color: var(--text3);
}
.sx-legend span[b-f3mjwtase7] { display: inline-flex; align-items: center; gap: 0.4rem; }
.sx-lg-bar[b-f3mjwtase7]  { width: 9px; height: 9px; border-radius: 2.5px; background: var(--accent); opacity: 0.75; display: inline-block; }
.sx-lg-line[b-f3mjwtase7] { width: 16px; height: 2px; border-radius: 2px; background: var(--accent); display: inline-block; }
.sx-lg-dash[b-f3mjwtase7] { width: 16px; height: 0; border-top: 2px dashed var(--text3); display: inline-block; }

.sx-split[b-f3mjwtase7] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; align-items: start; }
@media (max-width: 900px) { .sx-split[b-f3mjwtase7] { grid-template-columns: 1fr; } }

/* ── Breakdown list ──────────────────────────────────────────────────────── */
.sx-breakdown[b-f3mjwtase7] { margin: 0; padding: 0.25rem 0; }
.sx-breakdown > div[b-f3mjwtase7] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.42rem 0.95rem; border-bottom: 1px solid var(--border);
}
.sx-breakdown > div:last-child[b-f3mjwtase7] { border-bottom: none; }
.sx-breakdown dt[b-f3mjwtase7] { margin: 0; font-size: 0.76rem; color: var(--text2); }
.sx-breakdown dd[b-f3mjwtase7] {
    margin: 0; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums;
    font-size: 0.8rem; font-weight: 600; color: var(--text);
}
.sx-bd-total[b-f3mjwtase7] { background: var(--surface2); }
.sx-bd-total dt[b-f3mjwtase7] { font-weight: 700; color: var(--text); }
.sx-bd-total dd[b-f3mjwtase7] { font-weight: 700; }
.is-pos[b-f3mjwtase7] { color: var(--success); }
.is-neg[b-f3mjwtase7] { color: var(--danger); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.sx-scroll[b-f3mjwtase7] { max-height: 340px; overflow: auto; }
.sx-table[b-f3mjwtase7] { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.sx-table thead th[b-f3mjwtase7] {
    position: sticky; top: 0; z-index: 1;
    text-align: left; padding: 0.45rem 0.95rem;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text3); background: var(--surface); border-bottom: 1px solid var(--border);
}
.sx-table td[b-f3mjwtase7] { padding: 0.4rem 0.95rem; border-bottom: 1px solid var(--border); color: var(--text2); }
.sx-table tbody tr:last-child td[b-f3mjwtase7] { border-bottom: none; }
.sx-table .num[b-f3mjwtase7] {
    text-align: right; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums;
}
.sx-table tbody tr:hover td[b-f3mjwtase7] { background: var(--row-hover, rgba(0,0,0,0.02)); }

.sx-empty[b-f3mjwtase7] { padding: 1.6rem 1rem; text-align: center; color: var(--text3); font-size: 0.82rem; }

@media (max-width: 640px) {
    .sx-hero[b-f3mjwtase7] { flex-direction: column; align-items: flex-start; }
    .sx-hero-rate[b-f3mjwtase7] { align-items: flex-start; text-align: left; }
    .sx-range-note[b-f3mjwtase7] { margin-left: 0; flex-basis: 100%; }
}
/* /Components/Pages/Scales.razor.rz.scp.css */
/* ============================================================================
   /scales — the meter register. Grouped by plant area rather than one flat
   table, because "which scales are in Seed" is the question people actually
   arrive with. Shares the dashboard's token language.
   ========================================================================== */

.sl-head[b-ls1nhr72uy] {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-bottom: 1rem;
}
.sl-head h1[b-ls1nhr72uy] {
    margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700;
    letter-spacing: -0.015em; color: var(--text);
}
.sl-sub[b-ls1nhr72uy] { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--text3); }
.sl-head-actions[b-ls1nhr72uy] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sl-count[b-ls1nhr72uy] {
    font-size: 0.76rem; color: var(--text3); margin-right: 0.25rem;
    font-variant-numeric: tabular-nums;
}
.sl-count strong[b-ls1nhr72uy] { color: var(--text); font-weight: 700; font-size: 0.95rem; }
.sl-count em[b-ls1nhr72uy] { font-style: normal; margin-left: 0.15rem; }

/* ── states ──────────────────────────────────────────────────────────────── */
.sl-load[b-ls1nhr72uy] { display: flex; align-items: center; gap: 0.7rem; justify-content: center; padding: 3rem 1rem; color: var(--text3); }
.sl-spinner[b-ls1nhr72uy] {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border); border-top-color: var(--accent);
    animation: sl-spin-b-ls1nhr72uy 0.9s linear infinite;
}
@keyframes sl-spin-b-ls1nhr72uy { to { transform: rotate(360deg); } }
.sl-empty[b-ls1nhr72uy] {
    padding: 3rem 1rem; text-align: center; color: var(--text3);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}

/* ── group cards ─────────────────────────────────────────────────────────── */
.sl-groups[b-ls1nhr72uy] { display: flex; flex-direction: column; gap: 0.85rem; }
.sl-card[b-ls1nhr72uy] {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.sl-card-head[b-ls1nhr72uy] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
    padding: 0.6rem 0.95rem; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.sl-card-head h2[b-ls1nhr72uy] {
    margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text);
}
.sl-card-n[b-ls1nhr72uy] { font-size: 0.68rem; color: var(--text3); font-variant-numeric: tabular-nums; }

/* ── rows ────────────────────────────────────────────────────────────────── */
.sl-rows[b-ls1nhr72uy] { display: flex; flex-direction: column; }
.sl-row[b-ls1nhr72uy] {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 7.5rem 4rem auto;
    align-items: center; gap: 0.75rem;
    padding: 0.55rem 0.95rem; border-bottom: 1px solid var(--border);
    transition: background 160ms ease;
}
.sl-row:last-child[b-ls1nhr72uy] { border-bottom: none; }
.sl-row:hover[b-ls1nhr72uy] { background: var(--row-hover, rgba(0,0,0,0.02)); }
.sl-row.is-off[b-ls1nhr72uy] { opacity: 0.5; }

.sl-num[b-ls1nhr72uy] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 1.5rem; padding: 0 0.4rem;
    border-radius: var(--radius-sm); background: var(--surface3); color: var(--text3);
    font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 700;
    font-variant-numeric: tabular-nums; border: 1px solid var(--border);
}

.sl-name[b-ls1nhr72uy] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.88rem; font-weight: 650; color: var(--text); text-decoration: none;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-name svg[b-ls1nhr72uy], .sl-name i[b-ls1nhr72uy] {
    width: 13px; height: 13px; color: var(--text3); opacity: 0;
    transform: translate(-2px, 2px); transition: opacity 160ms ease, transform 160ms ease;
}
.sl-name:hover[b-ls1nhr72uy] { color: var(--accent); }
.sl-name:hover svg[b-ls1nhr72uy], .sl-name:hover i[b-ls1nhr72uy] { opacity: 1; transform: none; color: var(--accent); }
.sl-name:focus-visible[b-ls1nhr72uy] { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.sl-state[b-ls1nhr72uy] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; font-weight: 650; color: var(--text2);
}
.sl-dot[b-ls1nhr72uy] { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sl-state.is-active[b-ls1nhr72uy] { color: var(--success); }
.sl-state.is-disabled[b-ls1nhr72uy] { color: var(--danger); }

.sl-pri[b-ls1nhr72uy] {
    font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums;
    font-size: 0.74rem; color: var(--text3); text-align: right;
}

.sl-actions[b-ls1nhr72uy] { display: inline-flex; gap: 0.3rem; justify-content: flex-end; }
.sl-icon[b-ls1nhr72uy] {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border-radius: var(--radius-sm);
    background: transparent; border: 1px solid transparent; color: var(--text3);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.sl-icon svg[b-ls1nhr72uy], .sl-icon i[b-ls1nhr72uy] { width: 15px; height: 15px; }
.sl-icon:hover[b-ls1nhr72uy] { background: var(--surface3); color: var(--text); border-color: var(--border); }
.sl-icon.is-on[b-ls1nhr72uy] { color: var(--success); }
.sl-icon:focus-visible[b-ls1nhr72uy] { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 760px) {
    .sl-row[b-ls1nhr72uy] { grid-template-columns: 2.6rem minmax(0, 1fr) auto; row-gap: 0.35rem; }
    .sl-state[b-ls1nhr72uy] { grid-column: 2; font-size: 0.66rem; }
    .sl-pri[b-ls1nhr72uy] { display: none; }
    .sl-actions[b-ls1nhr72uy] { grid-row: 1 / span 2; grid-column: 3; }
}