/* MwStageStatusCard — shared "now playing" stage card (mw-ssc-*).
   The card background is the progress bar: the inline style sets a left-to-right gradient
   (accent for elapsed, darker accent for remaining). Text is white with a shadow so it stays
   legible over any stage accent colour. Used by the Stage View and the Artist Büro dashboard. */

.mw-ssc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 10px;
    /* visible so the artist-care hover popover can extend beyond the card; the progress-bar
       background stays clipped to the rounded corners via border-radius regardless. */
    overflow: visible;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: background 1s linear;
    min-height: 96px;
}

/* Lift a hovered/focused card (and thus its care popover) above sibling cards. */
.mw-ssc:hover,
.mw-ssc:focus-within { z-index: 40; }

.mw-ssc--compact {
    gap: 7px;
    padding: 12px 14px;
    min-height: 0;
    border-radius: 8px;
}

/* ── Top line ── */
.mw-ssc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mw-ssc-stage {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-ssc-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mw-ssc-goto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.72;
    text-decoration: none;
    transition: opacity 120ms ease;
}

.mw-ssc-goto:hover { opacity: 1; }

.mw-ssc-goto .mud-icon-root { font-size: 18px; }

.mw-ssc-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
}

.mw-ssc-open-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
}

.mw-ssc-open--open .mw-ssc-open-dot { background: var(--mud-palette-success); }
.mw-ssc-open--closing .mw-ssc-open-dot { background: var(--mud-palette-warning); }
.mw-ssc-open--closed .mw-ssc-open-dot { background: rgba(255, 255, 255, 0.55); }

/* ── Body (act + countdown) ── */
.mw-ssc-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.mw-ssc-actwrap { min-width: 0; flex: 1; }

.mw-ssc-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 2px;
}

.mw-ssc-label--next { opacity: 0.7; }

.mw-ssc-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
    animation: mw-ssc-pulse 2s ease-in-out infinite;
}

.mw-ssc-act {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.12;
    /* two lines then ellipsis — never a hard mid-word cut */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mw-ssc--compact .mw-ssc-act { font-size: 1.2rem; }

.mw-ssc-act--next { opacity: 0.92; }
.mw-ssc-act--idle { opacity: 0.6; font-style: italic; font-weight: 600; }

.mw-ssc-time {
    font-size: 12px;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Now-playing time range: single line, with the inline live dot (compact) */
.mw-ssc-time--range {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Between-acts "ab HH:mm · in M:SS" may wrap rather than clip */
.mw-ssc-time--flow { white-space: normal; }

.mw-ssc-countwrap { text-align: right; flex-shrink: 0; }

.mw-ssc-countdown {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mw-ssc--compact .mw-ssc-countdown { font-size: 1.9rem; }

.mw-ssc-countlabel {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}

/* ── Rahmenprogramm ── */
.mw-ssc-rahmen {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
}

.mw-ssc-rahmen-tag {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.mw-ssc-rahmen-act { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-ssc-rahmen-time { margin-left: auto; opacity: 0.85; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── Actions ── */
.mw-ssc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

/* ── Artist-care widget (collapsed row) ── */
.mw-ssc-care {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.24);
    outline: none;
    cursor: default;
}

.mw-ssc-care-icon { display: inline-flex; opacity: 0.9; flex-shrink: 0; }
.mw-ssc-care-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-ssc-care--empty .mw-ssc-care-name { font-weight: 500; font-style: italic; opacity: 0.8; }
.mw-ssc-care--empty .mw-ssc-care-name { margin-right: auto; }
.mw-ssc-care-time { margin-left: auto; font-size: 11px; opacity: 0.8; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.mw-ssc-care-chevron {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 120ms ease, transform 120ms ease;
}
.mw-ssc-care-chevron .mud-icon-root { font-size: 16px; }
.mw-ssc-care:hover .mw-ssc-care-chevron,
.mw-ssc-care:focus-within .mw-ssc-care-chevron { opacity: 0.85; transform: translateY(1px); }

/* ── Artist-care handover popover (hover/focus reveal) — opens downward: the card sits at the
   top of its consumers (artist office command-bar row below the top bar, stage view row 1),
   so upward would clip against the bars above. ── */
.mw-ssc-care-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    min-width: 244px;
    max-width: min(320px, 88vw);
    padding: 10px;
    border-radius: 12px;
    background: var(--mud-palette-surface, #14141b);
    color: var(--mud-palette-text-primary, #fff);
    text-shadow: none;
    box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.07);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 20;
}

/* invisible bridge across the gap so the pointer can travel into the popover without dropping :hover */
.mw-ssc-care-pop::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.mw-ssc-care:hover .mw-ssc-care-pop,
.mw-ssc-care:focus-within .mw-ssc-care-pop {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.mw-ssc-care-pop-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}
.mw-ssc-care-pop-icon { display: inline-flex; opacity: 0.7; }
.mw-ssc-care-pop-icon .mud-icon-root { font-size: 16px; }
.mw-ssc-care-pop-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}
.mw-ssc-care-pop-stage {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}

.mw-ssc-care-pop-divider { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 6px 2px; }

.mw-ssc-care-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px;
    border-radius: 8px;
    transition: background 120ms ease;
}
.mw-ssc-care-row:hover { background: rgba(255, 255, 255, 0.04); }
.mw-ssc-care-row--now { background: color-mix(in srgb, var(--mw-ssc-accent, #7c6cf0), transparent 86%); }

.mw-ssc-care-row-badge {
    flex-shrink: 0;
    min-width: 44px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
}
.mw-ssc-care-row--now .mw-ssc-care-row-badge { color: var(--mw-ssc-accent, #b3a8ff); opacity: 0.95; }

.mw-ssc-care-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mw-ssc-care-row-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-ssc-care-row-time { font-size: 11px; opacity: 0.65; font-variant-numeric: tabular-nums; }

.mw-ssc-care-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.mw-ssc-care-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.mw-ssc-care-act:hover { background: rgba(255, 255, 255, 0.12); }
.mw-ssc-care-act--call:hover { background: color-mix(in srgb, var(--mud-palette-success, #2e7d32), transparent 50%); color: #fff; }
.mw-ssc-care-act .mud-icon-root { font-size: 17px; }

@keyframes mw-ssc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Track cuts (mw-ssc--track) — the "Spur" card of the Artist Büro dashboard.

   The stage colour leaves the surface: it lives as an edge glow IN the border
   (docs/plans/mitware-theme/edge-glow-and-tail-corner.md) plus a 2 px progress
   rail at the bottom edge, and the freed space carries two lanes — acts on top,
   artist-care shifts below — with a live now-line.

   Two cuts: --track-compact (artist office stage row, ~200 px per card, up to
   nine stages) and --track-wide (full-width cards on phones).
   ══════════════════════════════════════════════════════════════════════════════ */

.mw-ssc.mw-ssc--track {
    --mw-ssc-surface: var(--mud-palette-surface, #14141b);
    --mw-ssc-hairline: hsla(0 0% 100% / 0.10);
    --mw-ssc-dim: hsl(240 5% 60%);
    --mw-ssc-faint: hsl(240 5% 40%);
    --mw-ssc-teal: hsl(172 60% 50%);
    --mw-ssc-amber: hsl(38 92% 62%);
    --mw-ssc-green: hsl(152 55% 56%);
    --mw-ssc-pink: hsl(322 70% 68%);
    --mw-ssc-mono: var(--mw-ab-font-mono, ui-monospace, monospace);
    --mw-ssc-progress: 0%;

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: var(--mud-palette-text-primary, #fff);
    text-shadow: none;
    transition: box-shadow 180ms ease;

    /* tail corner — points back at the stage row the card belongs to */
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 2px solid transparent;

    /* 1 fill — the plain panel tone, nothing tinted: a card must read as the same material as
       every other panel of the board · 2 corner-anchored glow in the stage colour · 3 hairline
       everywhere the glow has faded. The vertical reach (125 %) with the 76 % fade stop keeps the
       colour mathematically gone at 95 % of the height — the top edge never catches it. */
    background:
        linear-gradient(var(--mw-ssc-surface), var(--mw-ssc-surface)) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            var(--mw-ssc-accent) 0%,
            color-mix(in srgb, var(--mw-ssc-accent) 72%, transparent) 34%,
            color-mix(in srgb, var(--mw-ssc-accent) 30%, transparent) 58%,
            transparent 76%) border-box,
        linear-gradient(var(--mw-ssc-hairline), var(--mw-ssc-hairline)) border-box;

    /* 4 bloom — the colour spilling off the glowing edge, never upward */
    box-shadow:
        var(--mw-ssc-inner-light, 0 0 0 transparent),
        -5px 4px 20px -8px color-mix(in srgb, var(--mw-ssc-accent) 85%, transparent),
        0 18px 40px -26px hsla(0 0% 0% / 0.85);
}

/* While an act is running the glow burns brighter and reaches further along the bottom edge —
   the live state is carried by light, not by a coloured fill. */
.mw-ssc.mw-ssc--track.mw-ssc--live {
    background:
        linear-gradient(var(--mw-ssc-surface), var(--mw-ssc-surface)) padding-box,
        radial-gradient(155% 125% at 0% 100%,
            var(--mw-ssc-accent) 0%,
            color-mix(in srgb, var(--mw-ssc-accent) 85%, transparent) 34%,
            color-mix(in srgb, var(--mw-ssc-accent) 40%, transparent) 58%,
            transparent 76%) border-box,
        linear-gradient(var(--mw-ssc-hairline), var(--mw-ssc-hairline)) border-box;
    box-shadow:
        var(--mw-ssc-inner-light, 0 0 0 transparent),
        -6px 5px 26px -8px color-mix(in srgb, var(--mw-ssc-accent) 95%, transparent),
        0 18px 40px -26px hsla(0 0% 0% / 0.85);
}

.mw-ssc.mw-ssc--track.mw-ssc--idle { opacity: 0.82; }

.mw-ssc.mw-ssc--track-compact { gap: 5px; padding: 8px 9px 9px; }

.mw-ssc.mw-ssc--track-wide { gap: 8px; padding: 10px 12px 13px; }

/* The open dropdown lifts its whole card above the siblings of the stage row. */
.mw-ssc.mw-ssc--track:has(.mw-ssc-care--open) { z-index: 60; }

/* ── Progress rail — the only place the stage colour appears opaque ── */
.mw-ssc-rail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 0 0 14px 14px;
    background: hsla(0 0% 100% / 0.05);
    overflow: hidden;
    pointer-events: none;
}

.mw-ssc-rail > i {
    display: block;
    height: 100%;
    width: var(--mw-ssc-progress, 0%);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--mw-ssc-accent) 55%, transparent),
        var(--mw-ssc-accent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--mw-ssc-accent) 60%, transparent);
    transition: width 1s linear;
}

/* ── Head ── */
.mw-ssc-hd {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.mw-ssc-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mw-ssc--track-wide .mw-ssc-name { font-size: 11px; letter-spacing: 0.08em; }

.mw-ssc-swatch {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--mw-ssc-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--mw-ssc-accent) 75%, transparent);
}

.mw-ssc-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mw-ssc--track .mw-ssc-goto { width: 16px; height: 16px; opacity: 1; color: var(--mw-ssc-faint); border-radius: 5px; }
.mw-ssc--track .mw-ssc-goto:hover { color: var(--mud-palette-text-primary, #fff); background: hsla(0 0% 100% / 0.05); }
.mw-ssc--track .mw-ssc-goto .mud-icon-root { font-size: 13px; }
.mw-ssc--track-wide .mw-ssc-goto { width: 20px; height: 20px; }
.mw-ssc--track-wide .mw-ssc-goto .mud-icon-root { font-size: 16px; }

/* ── Alert glyphs (compact cut): everything the card used to say in words ── */
.mw-ssc-alerts { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }

.mw-ssc-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: hsla(0 0% 100% / 0.05);
    color: var(--mw-ssc-faint);
    cursor: help;
}

.mw-ssc-alert .mud-icon-root { font-size: 11px; }
.mw-ssc-alert--open { color: var(--mw-ssc-green); background: color-mix(in srgb, var(--mw-ssc-green) 13%, transparent); }
.mw-ssc-alert--closing { color: var(--mw-ssc-amber); background: color-mix(in srgb, var(--mw-ssc-amber) 15%, transparent); }
.mw-ssc-alert--closed { color: var(--mw-ssc-faint); }
.mw-ssc-alert--rahmen { color: var(--mw-ssc-pink); background: color-mix(in srgb, var(--mw-ssc-pink) 13%, transparent); }

/* Rahmenprogramm chip (wide cut) */
.mw-ssc-rz {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 10px;
    color: var(--mw-ssc-pink);
    background: color-mix(in srgb, var(--mw-ssc-pink) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mw-ssc-pink) 22%, transparent);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    overflow: hidden;
}

.mw-ssc-rz .mud-icon-root { font-size: 12px; }
.mw-ssc-rz b { color: color-mix(in srgb, var(--mw-ssc-pink), white 30%); font-weight: 600; }

.mw-ssc--track .mw-ssc-open {
    background: hsla(0 0% 100% / 0.02);
    border: 1px solid var(--mud-palette-lines-default, hsla(0 0% 100% / 0.06));
    color: var(--mw-ssc-dim);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mw-ssc--track .mw-ssc-open--closing { color: var(--mw-ssc-amber); border-color: color-mix(in srgb, var(--mw-ssc-amber) 28%, transparent); }
.mw-ssc--track .mw-ssc-open--closed { color: var(--mw-ssc-faint); }

/* ── Programme block ── */
.mw-ssc-lbl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mw-ssc-mono);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mw-ssc-faint);
}

.mw-ssc-lbl--live { color: var(--mw-ssc-accent); }

.mw-ssc--track .mw-ssc-live-dot {
    background: var(--mw-ssc-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mw-ssc-accent) 18%, transparent);
    width: 6px;
    height: 6px;
}

.mw-ssc-actline {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-ssc--track-wide .mw-ssc-actline { font-size: 18px; }

.mw-ssc-actline--idle { color: var(--mw-ssc-faint); font-style: italic; font-weight: 500; font-size: 13px; }

.mw-ssc-tm {
    font-family: var(--mw-ssc-mono);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--mw-ssc-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-ssc--track-wide .mw-ssc-tm { font-size: 10.5px; }

/* Wide cut: act + time left, countdown right */
.mw-ssc-mainrow { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.mw-ssc-mainrow-text { min-width: 0; flex: 1; }

.mw-ssc-count {
    margin-left: auto;
    flex: 0 0 auto;
    font-family: var(--mw-ssc-mono);
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Lanes ── */
.mw-ssc-tracks { display: flex; flex-direction: column; gap: 3px; margin-top: 1px; }

.mw-ssc-lane {
    position: relative;
    height: 11px;
    border-radius: 4px;
    background: hsla(0 0% 100% / 0.035);
    overflow: hidden;
}

.mw-ssc-tracks--labeled { gap: 4px; }
.mw-ssc-tracks--labeled .mw-ssc-lane { height: 16px; border-radius: 5px; }

.mw-ssc-lane-label {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 30px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    font-family: var(--mw-ssc-mono);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mw-ssc-faint);
    background: linear-gradient(90deg, var(--mw-ssc-surface) 60%, transparent);
    pointer-events: none;
}

.mw-ssc-blk {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 3px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-family: var(--mw-ssc-mono);
    font-size: 7.5px;
    color: var(--mw-ssc-dim);
    background: hsla(0 0% 100% / 0.06);
    white-space: nowrap;
    overflow: hidden;
}

.mw-ssc-tracks--labeled .mw-ssc-blk { font-size: 8.5px; padding: 0 5px; border-radius: 4px; }

.mw-ssc-lane--acts .mw-ssc-blk--on {
    background: color-mix(in srgb, var(--mw-ssc-accent) 24%, transparent);
    border-color: color-mix(in srgb, var(--mw-ssc-accent) 45%, transparent);
    color: var(--mud-palette-text-primary, #fff);
}

.mw-ssc-lane--care .mw-ssc-blk {
    background: color-mix(in srgb, var(--mw-ssc-teal) 13%, transparent);
    color: color-mix(in srgb, var(--mw-ssc-teal), white 30%);
}

.mw-ssc-lane--care .mw-ssc-blk--on {
    background: color-mix(in srgb, var(--mw-ssc-teal) 28%, transparent);
    border-color: color-mix(in srgb, var(--mw-ssc-teal) 45%, transparent);
    color: #eafffb;
}

/* An unassigned care shift — the hours nobody covers, dashed and amber in the lane */
.mw-ssc-lane--care .mw-ssc-blk--gap {
    background: color-mix(in srgb, var(--mw-ssc-amber) 16%, transparent);
    border: 1px dashed color-mix(in srgb, var(--mw-ssc-amber) 42%, transparent);
    color: var(--mw-ssc-amber);
}

.mw-ssc-nowline {
    position: absolute;
    top: -2px;
    bottom: -2px;
    z-index: 3;
    width: 1.5px;
    background: var(--mud-palette-text-primary, #fff);
    box-shadow: 0 0 8px hsla(0 0% 100% / 0.5);
    transition: left 1s linear;
}

.mw-ssc-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;
    font-family: var(--mw-ssc-mono);
    font-size: 7.5px;
    color: var(--mw-ssc-faint);
    opacity: 0.75;
}

.mw-ssc-lanefoot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mw-ssc-lanefoot .mw-ssc-ticks { flex: 1; font-size: 8.5px; margin-top: 0; }

/* ── Artist-care control on a track card ── */
.mw-ssc-care-wrap { position: relative; min-width: 0; }

.mw-ssc--track .mw-ssc-care {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px 2px 6px;
    font-size: 10.5px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, hsla(0 0% 100% / 0.06));
    background: hsla(0 0% 100% / 0.022);
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease;
}

.mw-ssc--track-wide .mw-ssc-care { font-size: 11.5px; padding: 3px 6px 3px 8px; gap: 7px; }

.mw-ssc--track .mw-ssc-care:hover,
.mw-ssc--track .mw-ssc-care--open {
    border-color: color-mix(in srgb, var(--mw-ssc-teal) 38%, transparent);
    background: color-mix(in srgb, var(--mw-ssc-teal) 7%, transparent);
}

.mw-ssc--track .mw-ssc-care-icon { color: var(--mw-ssc-teal); }
.mw-ssc--track .mw-ssc-care-icon .mud-icon-root { font-size: 13px; }
.mw-ssc--track .mw-ssc-care-name { flex: 1; font-weight: 600; }
.mw-ssc--track .mw-ssc-care--empty .mw-ssc-care-icon { color: var(--mw-ssc-amber); }
.mw-ssc--track .mw-ssc-care--empty .mw-ssc-care-name { color: var(--mw-ssc-amber); font-style: italic; font-weight: 500; opacity: 1; }
.mw-ssc--track .mw-ssc-care-time { font-family: var(--mw-ssc-mono); font-size: 9px; color: var(--mw-ssc-dim); opacity: 1; }
.mw-ssc--track .mw-ssc-care-chevron { color: var(--mw-ssc-faint); opacity: 1; }
.mw-ssc--track .mw-ssc-care-chevron .mud-icon-root { font-size: 13px; }
.mw-ssc--track .mw-ssc-care--open .mw-ssc-care-chevron { color: var(--mw-ssc-teal); transform: rotate(180deg); }

/* ══ The festival dropdown ══ */

.mw-ssc-dd-scrim { position: fixed; inset: 0; z-index: 70; }

.mw-ssc-dd {
    position: absolute;
    top: calc(100% + 8px);
    left: -1px;
    z-index: 80;
    width: min(342px, calc(100vw - 24px));
    text-align: left;
    text-shadow: none;
    color: var(--mud-palette-text-primary, #fff);
    overflow: hidden;

    /* same recipe as the card: tail corner up-left, pointing at the row it came from */
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--mw-ssc-dd-surface, var(--mw-ssc-surface)), var(--mw-ssc-dd-surface, var(--mw-ssc-surface))) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            var(--mw-ssc-accent) 0%,
            color-mix(in srgb, var(--mw-ssc-accent) 72%, transparent) 34%,
            color-mix(in srgb, var(--mw-ssc-accent) 30%, transparent) 58%,
            transparent 76%) border-box,
        linear-gradient(var(--mw-ssc-hairline), var(--mw-ssc-hairline)) border-box;
    box-shadow:
        -5px 4px 22px -8px color-mix(in srgb, var(--mw-ssc-accent) 85%, transparent),
        0 28px 60px -18px hsla(0 0% 0% / 0.8);
    animation: mw-ssc-dd-in 140ms ease;
}

@keyframes mw-ssc-dd-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

.mw-ssc-dd-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 9px;
    border-bottom: 1px solid var(--mud-palette-lines-default, hsla(0 0% 100% / 0.06));
    background: linear-gradient(color-mix(in srgb, var(--mw-ssc-accent) 6%, transparent), transparent);
}

.mw-ssc-dd-head-icon { display: inline-flex; color: var(--mw-ssc-accent); }
.mw-ssc-dd-head-icon .mud-icon-root { font-size: 17px; }

.mw-ssc-dd-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mw-ssc-dim);
}

.mw-ssc-dd-stage {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 10.5px;
    color: var(--mw-ssc-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-ssc-dd-stage .mw-ssc-swatch { width: 6px; height: 6px; }

.mw-ssc-dd-tools {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default, hsla(0 0% 100% / 0.06));
    overflow-x: auto;
    scrollbar-width: none;
}

.mw-ssc-dd-tools::-webkit-scrollbar { display: none; }

.mw-ssc-dd-chip {
    flex: 0 0 auto;
    font: inherit;
    font-size: 10.5px;
    color: var(--mw-ssc-dim);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default, hsla(0 0% 100% / 0.06));
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: color 130ms ease, border-color 130ms ease, background 130ms ease;
}

.mw-ssc-dd-chip:hover { color: var(--mud-palette-text-primary, #fff); border-color: hsla(0 0% 100% / 0.18); }

.mw-ssc-dd-chip--on {
    color: var(--mud-palette-text-primary, #fff);
    border-color: color-mix(in srgb, var(--mw-ssc-accent) 45%, transparent);
    background: color-mix(in srgb, var(--mw-ssc-accent) 12%, transparent);
}

.mw-ssc-dd-chip-n { font-family: var(--mw-ssc-mono); opacity: 0.6; margin-left: 4px; }

.mw-ssc-dd-scroll { max-height: 292px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 6px; }
.mw-ssc-dd-scroll::-webkit-scrollbar { width: 8px; }
.mw-ssc-dd-scroll::-webkit-scrollbar-track { background: transparent; }
.mw-ssc-dd-scroll::-webkit-scrollbar-thumb {
    background: hsla(0 0% 100% / 0.09);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.mw-ssc-dd-day {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 5px;
    font-family: var(--mw-ssc-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mw-ssc-faint);
    background: var(--mw-ssc-dd-surface, var(--mw-ssc-surface));
}

.mw-ssc-dd-day::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default, hsla(0 0% 100% / 0.06));
}

.mw-ssc-dd-day-cnt { opacity: 0.8; }

.mw-ssc-dd-now {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 12px;
    font-family: var(--mw-ssc-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--mw-ssc-accent);
}

.mw-ssc-dd-now::before,
.mw-ssc-dd-now::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mw-ssc-accent) 45%, transparent));
}

.mw-ssc-dd-now::after { background: linear-gradient(90deg, color-mix(in srgb, var(--mw-ssc-accent) 45%, transparent), transparent); }

.mw-ssc-dd-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
    transition: background 120ms ease;
}

.mw-ssc-dd-row:hover { background: hsla(0 0% 100% / 0.03); }
.mw-ssc-dd-row--past { opacity: 0.42; }
.mw-ssc-dd-row--past .mw-ssc-dd-name { font-weight: 400; }

.mw-ssc-dd-row--now {
    background: color-mix(in srgb, var(--mw-ssc-accent) 10%, transparent);
    box-shadow: inset 2px 0 0 var(--mw-ssc-accent);
}

.mw-ssc-dd-row--now .mw-ssc-dd-name { font-weight: 700; }
.mw-ssc-dd-row--now .mw-ssc-dd-time { color: var(--mud-palette-text-primary, #fff); }
.mw-ssc-dd-row--now .mw-ssc-dd-tag { color: var(--mw-ssc-accent); }

.mw-ssc-dd-row--gap {
    background: color-mix(in srgb, var(--mw-ssc-amber) 7%, transparent);
    box-shadow: inset 2px 0 0 var(--mw-ssc-amber);
}

.mw-ssc-dd-row--gap .mw-ssc-dd-name { color: var(--mw-ssc-amber); font-style: italic; font-weight: 500; }
.mw-ssc-dd-row--gap .mw-ssc-dd-tag { color: var(--mw-ssc-amber); }

.mw-ssc-dd-time {
    flex: 0 0 auto;
    width: 82px;
    font-family: var(--mw-ssc-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--mw-ssc-dim);
}

.mw-ssc-dd-av {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    background: color-mix(in srgb, var(--mw-ssc-teal) 16%, transparent);
    color: color-mix(in srgb, var(--mw-ssc-teal), white 35%);
    border: 1px solid color-mix(in srgb, var(--mw-ssc-teal) 28%, transparent);
}

.mw-ssc-dd-av--next {
    background: hsla(0 0% 100% / 0.05);
    color: var(--mw-ssc-dim);
    border-color: var(--mud-palette-lines-default, hsla(0 0% 100% / 0.06));
}

.mw-ssc-dd-av--gap {
    background: color-mix(in srgb, var(--mw-ssc-amber) 14%, transparent);
    color: var(--mw-ssc-amber);
    border-color: color-mix(in srgb, var(--mw-ssc-amber) 30%, transparent);
}

.mw-ssc-dd-av .mud-icon-root { font-size: 12px; }

.mw-ssc-dd-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-ssc-dd-tag {
    flex: 0 0 auto;
    font-family: var(--mw-ssc-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mw-ssc-faint);
}

.mw-ssc-dd-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; opacity: 0; transition: opacity 120ms ease; }
.mw-ssc-dd-row:hover .mw-ssc-dd-acts,
.mw-ssc-dd-row--now .mw-ssc-dd-acts { opacity: 1; }

.mw-ssc-dd-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: hsla(0 0% 100% / 0.05);
    color: var(--mw-ssc-dim);
    cursor: pointer;
    text-decoration: none;
    transition: background 130ms ease, color 130ms ease;
}

.mw-ssc-dd-act:hover { background: hsla(0 0% 100% / 0.12); color: var(--mud-palette-text-primary, #fff); }
.mw-ssc-dd-act--call:hover { background: color-mix(in srgb, var(--mw-ssc-green) 30%, transparent); color: #fff; }
.mw-ssc-dd-act .mud-icon-root { font-size: 15px; }

.mw-ssc-dd-empty { padding: 12px; font-size: 12px; font-style: italic; color: var(--mw-ssc-faint); }

.mw-ssc-dd-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--mud-palette-lines-default, hsla(0 0% 100% / 0.06));
    background: hsla(0 0% 100% / 0.015);
}

.mw-ssc-dd-sum { font-family: var(--mw-ssc-mono); font-size: 10px; color: var(--mw-ssc-faint); font-variant-numeric: tabular-nums; }

.mw-ssc-dd-foot a {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 11px;
    text-decoration: none;
    color: var(--mud-palette-primary, #b3a8ff);
    transition: background 130ms ease;
}

.mw-ssc-dd-foot a:hover { background: color-mix(in srgb, var(--mud-palette-primary, #7c6cf0) 12%, transparent); }
.mw-ssc-dd-foot a .mud-icon-root { font-size: 14px; }