#widget-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;

    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--widget-bar-height, 56px);
    padding: 0 8px 0 16px;

    background: var(--widget-bar-bg, #FFFDF5);
    border: var(--widget-bar-border, 2px solid #1A1A1A);
    border-radius: var(--widget-bar-radius, 6px);
    box-shadow: var(--widget-bar-shadow, 4px 4px 0 rgba(26, 26, 26, 0.18));
    color: var(--widget-bar-color, #1A1A1A);
    pointer-events: auto;
}

#widget-bar[hidden] { display: none; }

#widget-bar.wb-highlight {
    outline: 3px solid var(--color-highlight, #4285f4);
    outline-offset: 4px;
    animation: wb-pulse 1.5s ease-in-out infinite;
}

@keyframes wb-pulse {
    0%, 100% { outline-color: var(--color-highlight, #4285f4); }
    50%      { outline-color: var(--color-highlight-light, #5c9aff); }
}

/* ── Widget bar components ── */

.wb-label {
    font-family: var(--widget-label-font, var(--font-mono));
    font-weight: var(--widget-label-weight, 500);
    font-size: var(--widget-label-size, 10px);
    letter-spacing: var(--widget-label-tracking, 0.10em);
    text-transform: uppercase;
    color: var(--widget-label-color, var(--color-text-tertiary, #6A695F));
    white-space: nowrap;
}

.wb-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--widget-bar-color, #1A1A1A);
    min-width: 48px;
    text-align: right;
    line-height: 1;
}

.wb-unit {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-tertiary, #6A695F);
}

.wb-sep {
    width: 1px;
    align-self: stretch;
    margin: 8px 0;
    background: var(--widget-sep-color, rgba(26, 26, 26, 0.14));
    flex-shrink: 0;
}

/* Default — green stamped chip (primary affordance). Use .inactive for
   the cream-ghost secondary look. .active is an alias of the default. */
.wb-btn {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--color-success-border, #0F5C4A);
    border-radius: var(--widget-btn-radius, 4px);
    background: var(--color-success, #1F8F4E);
    color: var(--color-white, #FFFDF5);
    font-family: var(--font-family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out, transform 80ms;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-button, 2px 2px 0 rgba(26, 26, 26, 0.10));
    white-space: nowrap;
}
.wb-btn:hover {
    background: var(--color-success-hover, #177A40);
    box-shadow: 3px 3px 0 rgba(26, 26, 26, 0.15);
}
.wb-btn:active {
    transform: scale(0.97);
    box-shadow: 1px 1px 0 rgba(26, 26, 26, 0.10);
}

.wb-btn.small { height: 26px; padding: 0 10px; min-width: 48px; font-size: 11px; }

/* Engaged / "currently selected" — same green stamp as the default. */
.wb-btn.active {
    background: var(--color-success, #1F8F4E);
    color: var(--color-white, #FFFDF5);
    border-color: var(--color-success-border, #0F5C4A);
}
.wb-btn.active:hover { background: var(--color-success-hover, #177A40); }

/* "Currently off" — dark-ink stamp for binary on/off master toggles.
   Pairs with .active (green). Label carries the literal state. */
.wb-btn.off {
    background: var(--color-text, #1A1A1A);
    color: var(--color-white, #FFFDF5);
    border-color: var(--color-text, #1A1A1A);
}
.wb-btn.off:hover {
    background: var(--color-primary-hover, #333);
    border-color: var(--color-primary-hover, #333);
}

.wb-btn.inactive {
    background: var(--color-surface, #FFFDF5);
    color: var(--color-text-secondary, #43423D);
    border: 1px solid var(--color-border-strong, rgba(26, 26, 26, 0.40));
    box-shadow: none;
}
.wb-btn.inactive:hover {
    background: var(--color-surface-hover, #EDE9D9);
    color: var(--color-text, #1A1A1A);
    box-shadow: none;
}

/* Locked — outlined hairline, faded label, no shadow. Beats .off /
   .active / .inactive by source order at equal specificity. */
.wb-btn:disabled {
    background: var(--color-surface, #FFFDF5);
    border: 1px solid var(--color-border, rgba(26, 26, 26, 0.14));
    box-shadow: none;
    color: var(--color-inactive, #A8A498);
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* .toggle-on was the legacy "boolean ON" black-stamp variant. Now
   that .active is green-engaged, .toggle-on collapses into the same
   look — keep the alias so existing widgets don't break. */
.wb-btn.toggle-on {
    background: var(--color-success, #1F8F4E);
    color: var(--color-white, #FFFDF5);
    border-color: var(--color-success-border, #0F5C4A);
    box-shadow: none;
}
.wb-btn.toggle-on:hover { background: var(--color-success-hover, #177A40); }

/* ── Toggle group — outlined cluster, internal hairline dividers.
   Inside the cluster the per-button chip treatment is suppressed:
   no border, no shadow, no individual radius. The cluster itself
   carries the one outline; buttons just contribute fills + hairlines. */

.wb-toggle-group {
    display: inline-flex;
    border: 1px solid var(--color-border-strong, rgba(26, 26, 26, 0.40));
    border-radius: var(--radius-md, 4px);
    overflow: hidden;
    background: var(--widget-toggle-bg, #FFFDF5);
}

.wb-toggle-group .wb-btn {
    border: 0;
    border-right: 1px solid var(--color-border, rgba(26, 26, 26, 0.14));
    border-radius: 0;
    background: transparent;
    color: var(--color-text-secondary, #43423D);
    box-shadow: none;
}

.wb-toggle-group .wb-btn:last-child { border-right: 0; }

.wb-toggle-group .wb-btn:hover {
    background: var(--color-surface-hover, #EDE9D9);
    color: var(--color-text, #1A1A1A);
    box-shadow: none;
}

.wb-toggle-group .wb-btn.active {
    background: var(--color-success, #1F8F4E);
    color: var(--color-white, #FFFDF5);
}

.wb-toggle-group .wb-btn.active:hover {
    background: var(--color-success-hover, #177A40);
}

.wb-toggle-group .wb-btn.inactive {
    background: transparent;
    color: var(--color-text-secondary, #43423D);
    border: 0;
    border-right: 1px solid var(--color-border, rgba(26, 26, 26, 0.14));
    box-shadow: none;
}

.wb-toggle-group .wb-btn.inactive:last-child { border-right: 0; }

/* ── Spring-scale gauge ──────────────────────────────────────────
   Horizontal pill-shaped track with a dark fill that grows with the
   applied force. Tick marks overlay the track to read the scale
   visually. Mirrors K12's widget-spring-scale SVG gauge. */

.wb-gauge {
    position: relative;
    width: 140px;
    height: var(--scale-track-height, 29px);
    background: var(--scale-track-bg, #FFFDF5);
    border: var(--scale-track-border, 2px solid #0A4238);
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
}

.wb-gauge-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    background: var(--scale-fill-color, #0A4238);
    border-radius: 9999px 0 0 9999px;
    transition: width 150ms ease-out;
}

.wb-gauge-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 24.5%, var(--scale-tick-color, rgba(10, 66, 56, 0.2)) 24.5%, var(--scale-tick-color, rgba(10, 66, 56, 0.2)) 25.5%, transparent 25.5%),
        linear-gradient(90deg, transparent 49.5%, var(--scale-tick-color, rgba(10, 66, 56, 0.2)) 49.5%, var(--scale-tick-color, rgba(10, 66, 56, 0.2)) 50.5%, transparent 50.5%),
        linear-gradient(90deg, transparent 74.5%, var(--scale-tick-color, rgba(10, 66, 56, 0.2)) 74.5%, var(--scale-tick-color, rgba(10, 66, 56, 0.2)) 75.5%, transparent 75.5%);
    mix-blend-mode: multiply;
}

/* ── Indicator dots ── */

.wb-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-off, #D5D1C2);
}
.wb-indicator.on {
    background: var(--color-success, #1F8F4E);
    box-shadow: 0 0 6px rgba(31, 143, 78, 0.55);
}

@media (max-width: 480px) {
    #widget-bar {
        gap: 8px;
        padding: 0 10px;
        height: 56px;
    }
    .wb-label { font-size: 9.5px; }
    .wb-value { font-size: 18px; }
    .wb-sep { display: none; }
}