/* /Components/AudioPlayer.razor.rz.scp.css */
/* ==========================================================================
   JingleForge AudioPlayer Stylesheet (spec §12.1, §12.4, §12.6, §12.7, §13)
   - Mobile-first: unguarded phone/tablet base (mini-player + full-screen sheet),
     @media (min-width: 1024px) desktop enhancement (88px persistent footer)
   - Zero ad-hoc hex or px outside §13 tokens.css custom properties
   - Discrete tap targets >= var(--touch-target-min) (44px); full-sheet Play =
     var(--player-play-size) (56px); seek scrub strip = var(--seek-touch-height) (28px);
     Export button = var(--control-height) (48px)
   - :hover rules gated strictly inside @media (hover: hover) and (min-width: 1024px)
   ========================================================================== */

.audio-player-root[b-g92t371ahj] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.unreachable-banner[b-g92t371ahj],
.player-error-row[b-g92t371ahj] {
    min-height: var(--control-height);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background-color: var(--surface-warning-tint);
    border: 1px solid var(--status-warning);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.player-error-row[b-g92t371ahj] {
    background-color: var(--surface-error-tint);
    border-color: var(--status-error);
}

.player-error-message[b-g92t371ahj] {
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.btn-retry[b-g92t371ahj] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0 var(--spacing-md);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.btn-retry:active[b-g92t371ahj] {
    background-color: var(--background-surface-hover);
}

/* ============ Phone / tablet base: 64px mini-player bar (§12.4) ============ */
.mini-player-bar[b-g92t371ahj] {
    height: var(--mini-player-height);
    min-height: var(--mini-player-height);
    background-color: var(--background-surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    bottom: var(--tab-bar-height);
    z-index: 10;
}

.mini-progress-track[b-g92t371ahj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px solid var(--border-subtle);
}

.mini-progress-fill[b-g92t371ahj] {
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 2px solid var(--accent-primary);
}

.mini-player-row[b-g92t371ahj] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
}

.mini-play-btn[b-g92t371ahj],
.mini-expand-btn[b-g92t371ahj],
.sheet-close-btn[b-g92t371ahj],
.skip-btn[b-g92t371ahj],
.footer-play-btn[b-g92t371ahj] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background-color: var(--background-surface-hover);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.mini-play-btn:active:not(:disabled)[b-g92t371ahj],
.mini-expand-btn:active:not(:disabled)[b-g92t371ahj],
.sheet-close-btn:active:not(:disabled)[b-g92t371ahj],
.skip-btn:active:not(:disabled)[b-g92t371ahj],
.footer-play-btn:active:not(:disabled)[b-g92t371ahj] {
    background-color: var(--background-surface-hover);
    opacity: 0.85;
}

.mini-play-btn:disabled[b-g92t371ahj],
.skip-btn:disabled[b-g92t371ahj],
.footer-play-btn:disabled[b-g92t371ahj] {
    background-color: var(--accent-disabled);
    color: var(--text-primary);
    cursor: not-allowed;
}

.mini-track-info[b-g92t371ahj] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mini-title-row[b-g92t371ahj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
}

.mini-title[b-g92t371ahj],
.footer-track-title[b-g92t371ahj] {
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-time[b-g92t371ahj],
.footer-time[b-g92t371ahj],
.seek-time-label[b-g92t371ahj] {
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--text-secondary);
}

.job-badge[b-g92t371ahj] {
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    border: 1px solid var(--border-subtle);
    flex: none;
}

.job-badge.badge-jingle[b-g92t371ahj] {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.job-badge.badge-audition[b-g92t371ahj] {
    background-color: var(--background-surface-hover);
    color: var(--text-secondary);
}

/* ============ Phone / tablet full-screen player sheet (§12.4, §12.7) ============ */
.player-sheet-overlay[b-g92t371ahj] {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--background-base);
    z-index: 20;
    overflow-y: auto;
}

.player-sheet-overlay.expanded[b-g92t371ahj] {
    display: block;
}

.player-sheet[b-g92t371ahj] {
    min-height: 100vh;
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
}

.sheet-drag-handle[b-g92t371ahj] {
    width: var(--touch-target-min);
    height: var(--spacing-xs);
    border-radius: var(--radius-sm);
    background-color: var(--border-subtle);
    align-self: center;
}

.sheet-header[b-g92t371ahj] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sheet-track-header[b-g92t371ahj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.sheet-title-row[b-g92t371ahj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.sheet-title[b-g92t371ahj] {
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-title);
    font-weight: var(--font-title-weight);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.sheet-meta[b-g92t371ahj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    color: var(--text-secondary);
}

.sheet-seek-group[b-g92t371ahj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sheet-time-labels[b-g92t371ahj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 28px Seek-Touch-Height scrub strip (sole sub-44px touch exception per §12.7) */
.seek-strip[b-g92t371ahj] {
    height: var(--seek-touch-height);
    min-height: var(--seek-touch-height);
    display: flex;
    align-items: center;
    width: 100%;
}

.seek-range[b-g92t371ahj] {
    width: 100%;
    height: var(--seek-touch-height);
    min-height: var(--seek-touch-height);
    accent-color: var(--accent-primary);
    cursor: pointer;
    margin: 0;
}

.seek-range:disabled[b-g92t371ahj] {
    accent-color: var(--accent-disabled);
    cursor: not-allowed;
}

.sheet-transport[b-g92t371ahj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
}

/* 56px Player-Play-Size circular Play/Pause button (§12.4, §13) */
.player-play-pause[b-g92t371ahj] {
    width: var(--player-play-size);
    height: var(--player-play-size);
    min-width: var(--player-play-size);
    min-height: var(--player-play-size);
    border-radius: 50%;
    border: none;
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    font-family: var(--font-family-sans);
    font-size: var(--font-heading);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.player-play-pause:active:not(:disabled)[b-g92t371ahj] {
    background-color: var(--accent-hover);
    opacity: 0.85;
}

.player-play-pause:disabled[b-g92t371ahj] {
    background-color: var(--accent-disabled);
    color: var(--text-primary);
    cursor: not-allowed;
}

.player-spinner[b-g92t371ahj] {
    width: var(--spacing-md);
    height: var(--spacing-md);
    border: 2px solid var(--text-primary);
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: jf-player-spin-b-g92t371ahj 1s linear infinite;
}

@keyframes jf-player-spin-b-g92t371ahj {
    to { transform: rotate(360deg); }
}

/* Full-width 48px Export primary button (§12.4, §13 Control-Height) */
.export-btn[b-g92t371ahj],
.footer-export-btn[b-g92t371ahj] {
    min-height: var(--control-height);
    min-width: var(--touch-target-min);
    padding: 0 var(--spacing-md);
    background-color: var(--accent-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-on-accent);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.export-btn[b-g92t371ahj] {
    width: 100%;
}

.export-btn:active:not(:disabled)[b-g92t371ahj],
.footer-export-btn:active:not(:disabled)[b-g92t371ahj] {
    background-color: var(--accent-hover);
    opacity: 0.85;
}

.export-btn:disabled[b-g92t371ahj],
.footer-export-btn:disabled[b-g92t371ahj] {
    background-color: var(--accent-disabled);
    color: var(--text-primary);
    cursor: not-allowed;
}

/* Dual-format generated-lyrics block (§12.4, §12.7: in page scroll on phone/tablet, no nested scroller) */
.player-lyrics-block[b-g92t371ahj] {
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.lyrics-heading[b-g92t371ahj] {
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
}

.lyrics-song-list[b-g92t371ahj],
.lyrics-jingle-list[b-g92t371ahj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.lyrics-section-heading[b-g92t371ahj] {
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    font-family: var(--font-family-mono);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
}

.lyrics-line[b-g92t371ahj],
.lyrics-timestamp-row[b-g92t371ahj] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--text-primary);
}

.timestamp-chip[b-g92t371ahj] {
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    background-color: var(--background-base);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    flex: none;
}

.lyric-text[b-g92t371ahj] {
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    overflow-wrap: anywhere;
}

.lyrics-verbatim[b-g92t371ahj] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--text-primary);
}

/* Desktop footer hidden below 1024px (§12.1, §12.4) */
.player-desktop-footer[b-g92t371ahj] {
    display: none;
}

/* ============ Desktop >= 1024px: 88px persistent footer + 320px lyrics scroller (§12.4) ============ */
@media (min-width: 1024px) {
    .mini-player-bar[b-g92t371ahj],
    .player-sheet-overlay[b-g92t371ahj] {
        display: none;
    }

    .player-sheet-overlay.has-lyrics[b-g92t371ahj] {
        display: block;
        position: static;
        inset: auto;
        overflow: visible;
        background-color: transparent;
        z-index: auto;
    }

    .player-sheet-overlay.has-lyrics .player-sheet[b-g92t371ahj] {
        min-height: 0;
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .sheet-drag-handle[b-g92t371ahj],
    .sheet-header[b-g92t371ahj],
    .sheet-track-header[b-g92t371ahj],
    .sheet-seek-group[b-g92t371ahj],
    .sheet-transport[b-g92t371ahj],
    .export-btn[b-g92t371ahj] {
        display: none;
    }

    .player-desktop-footer[b-g92t371ahj] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        height: var(--player-footer-height);
        min-height: var(--player-footer-height);
        background-color: var(--background-surface);
        border-top: 1px solid var(--border-subtle);
        padding: 0 var(--spacing-lg);
    }

    .player-desktop-footer-inner[b-g92t371ahj] {
        display: grid;
        grid-template-columns: 1fr minmax(0, auto) 1fr;
        align-items: center;
        column-gap: var(--spacing-md);
        flex: 1;
        min-width: 0;
    }

    .footer-transport-group[b-g92t371ahj] {
        grid-column: 1;
        justify-self: stretch;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        min-width: auto;
    }

    .footer-time[b-g92t371ahj],
    .footer-jingle-length[b-g92t371ahj] {
        white-space: nowrap;
        flex: none;
    }

    .footer-seek-strip[b-g92t371ahj] {
        max-width: var(--sidebar-width);
        min-width: calc(var(--spacing-lg) * 5);
        flex: 1 1 auto;
    }

    .footer-track-info[b-g92t371ahj] {
        grid-column: 2;
        justify-self: center;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .footer-actions[b-g92t371ahj] {
        grid-column: 3;
        justify-self: end;
    }

    .player-empty-state[b-g92t371ahj],
    .footer-jingle-length[b-g92t371ahj] {
        font-family: var(--font-family-sans);
        font-size: var(--font-body);
        color: var(--text-secondary);
    }

    .player-empty-state[b-g92t371ahj] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .player-lyrics-block[b-g92t371ahj] {
        overflow-y: auto;
        max-height: var(--queue-dock-width);
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-spinner[b-g92t371ahj] {
        animation: none;
    }

    .btn-retry[b-g92t371ahj],
    .mini-play-btn[b-g92t371ahj],
    .mini-expand-btn[b-g92t371ahj],
    .sheet-close-btn[b-g92t371ahj],
    .skip-btn[b-g92t371ahj],
    .footer-play-btn[b-g92t371ahj],
    .player-play-pause[b-g92t371ahj],
    .export-btn[b-g92t371ahj],
    .footer-export-btn[b-g92t371ahj] {
        transition: none;
    }
}

/* Hover styles ship ONLY for fine pointers at desktop >= 1024px (§12.7) */
@media (hover: hover) and (min-width: 1024px) {
    .btn-retry:hover[b-g92t371ahj],
    .mini-play-btn:hover:not(:disabled)[b-g92t371ahj],
    .mini-expand-btn:hover:not(:disabled)[b-g92t371ahj],
    .sheet-close-btn:hover:not(:disabled)[b-g92t371ahj],
    .skip-btn:hover:not(:disabled)[b-g92t371ahj],
    .footer-play-btn:hover:not(:disabled)[b-g92t371ahj] {
        background-color: var(--background-surface-hover);
    }

    .player-play-pause:hover:not(:disabled)[b-g92t371ahj],
    .export-btn:hover:not(:disabled)[b-g92t371ahj],
    .footer-export-btn:hover:not(:disabled)[b-g92t371ahj] {
        background-color: var(--accent-hover);
    }
}
/* /Components/QueuePanel.razor.rz.scp.css */
/* ==========================================================================
   JingleForge Queue/Status Panel Stylesheet (spec §12.1, §12.2, §12.7, §13)
   - Mobile-first: unguarded phone base, min-width progressive enhancement only
   - Zero ad-hoc hex or px outside §13 tokens.css custom properties
   - Discrete tap targets >= var(--touch-target-min); buttons >= var(--control-height)
   - :hover rules gated strictly inside @media (hover: hover) and (min-width: 1024px)
   ========================================================================== */

.queue-panel[b-hmupszwmq5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

.unreachable-banner[b-hmupszwmq5],
.queue-error-banner[b-hmupszwmq5],
.queue-reconnecting-banner[b-hmupszwmq5] {
    min-height: var(--control-height);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background-color: var(--surface-warning-tint);
    border: 1px solid var(--status-warning);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.queue-error-banner[b-hmupszwmq5] {
    background-color: var(--surface-error-tint);
    border-color: var(--status-error);
}

.btn-retry[b-hmupszwmq5] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0 var(--spacing-md);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
}

.btn-retry:active[b-hmupszwmq5] {
    background-color: var(--background-surface-hover);
}

/* Skeleton loading rows (§12.2.1) */
.queue-skeleton[b-hmupszwmq5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.skeleton-row[b-hmupszwmq5] {
    min-height: var(--control-height);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    animation: jf-queue-pulse-b-hmupszwmq5 1s infinite ease-in-out;
}

.queue-empty[b-hmupszwmq5] {
    padding: var(--spacing-md);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-body);
}

/* Job list and rows (§12.2) */
.job-list[b-hmupszwmq5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.job-row[b-hmupszwmq5] {
    min-height: var(--touch-target-min);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    cursor: pointer;
}

.job-row:active[b-hmupszwmq5],
.job-row.selected[b-hmupszwmq5] {
    background-color: var(--background-surface-hover);
}

.job-row.failed[b-hmupszwmq5] {
    border-color: var(--status-error);
}

.job-row-main[b-hmupszwmq5] {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

/* Status dots (§12.2, §13 Status-Dot) */
.job-status-dot[b-hmupszwmq5] {
    width: var(--status-dot);
    height: var(--status-dot);
    border-radius: 50%;
    flex: none;
    display: inline-block;
}

.job-status-dot.status-queued[b-hmupszwmq5] {
    background-color: var(--text-secondary);
}

.job-status-dot.status-running[b-hmupszwmq5] {
    background-color: var(--accent-primary);
}

.job-status-dot.status-succeeded[b-hmupszwmq5] {
    background-color: var(--status-success);
}

.job-status-dot.status-failed[b-hmupszwmq5] {
    background-color: var(--status-error);
}

.pulse[b-hmupszwmq5] {
    animation: jf-queue-pulse-b-hmupszwmq5 1s infinite ease-in-out;
}

@keyframes jf-queue-pulse-b-hmupszwmq5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.job-running-bar[b-hmupszwmq5] {
    height: var(--spacing-xs);
    width: 100%;
    border-radius: var(--radius-sm);
    background-color: var(--accent-primary);
}

.job-title-wrap[b-hmupszwmq5] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.job-title[b-hmupszwmq5] {
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Audition & Jingle badges (§12.2, AC1.5, AC7.1) */
.job-badge[b-hmupszwmq5] {
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    border: 1px solid var(--border-subtle);
}

.job-badge.badge-jingle[b-hmupszwmq5] {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.job-badge.badge-audition[b-hmupszwmq5] {
    background-color: var(--background-surface-hover);
    color: var(--text-secondary);
}

.job-meta[b-hmupszwmq5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--text-secondary);
}

.job-play-btn[b-hmupszwmq5] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background-color: var(--accent-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-on-accent);
    font-size: var(--font-body);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.job-play-btn:active[b-hmupszwmq5] {
    background-color: var(--accent-hover);
    opacity: 0.85;
}

/* Always-visible inline failed-job error text (§12.2, §12.7: 13px Font-Mono, Status-Error, max 3 lines + >=44px More row) */
.job-error-inline[b-hmupszwmq5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.job-error-text[b-hmupszwmq5] {
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--status-error);
    white-space: pre-wrap;
    word-break: break-word;
}

.job-error-text.line-clamp-3[b-hmupszwmq5] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-error-more-btn[b-hmupszwmq5] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    align-self: flex-start;
    padding: 0 var(--spacing-sm);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    text-decoration: underline;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.job-error-more-btn:active[b-hmupszwmq5] {
    background-color: var(--background-surface-hover);
}

/* Full-screen / inline job detail (§12.1, §12.2, §12.7) */
.queue-job-detail[b-hmupszwmq5] {
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.detail-header[b-hmupszwmq5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.detail-back-btn[b-hmupszwmq5] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0 var(--spacing-sm);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    cursor: pointer;
}

.detail-back-btn:active[b-hmupszwmq5] {
    background-color: var(--background-surface-hover);
}

.detail-title-group[b-hmupszwmq5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.detail-title[b-hmupszwmq5] {
    margin: 0;
    font-size: var(--font-heading);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
}

.detail-meta[b-hmupszwmq5],
.detail-fields[b-hmupszwmq5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-body);
    color: var(--text-secondary);
}

.detail-error-full[b-hmupszwmq5] {
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--status-error);
    white-space: pre-wrap;
    word-break: break-word;
}

.job-actions[b-hmupszwmq5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn-action[b-hmupszwmq5] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    width: 100%;
    padding: 0 var(--spacing-md);
    background-color: var(--background-surface-hover);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
}

.btn-action:active[b-hmupszwmq5] {
    opacity: 0.85;
}

@media (hover: hover) and (min-width: 1024px) {
    .job-row:hover[b-hmupszwmq5] {
        background-color: var(--background-surface-hover);
    }

    .job-play-btn:hover[b-hmupszwmq5] {
        background-color: var(--accent-hover);
    }

    .btn-action:hover[b-hmupszwmq5],
    .btn-retry:hover[b-hmupszwmq5],
    .job-error-more-btn:hover[b-hmupszwmq5],
    .detail-back-btn:hover[b-hmupszwmq5] {
        background-color: var(--background-surface-hover);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   JingleForge Mobile-First Shell Stylesheet (spec §12.1, §12.4, §12.5, §12.7, §13)
   - Phone base (0–599px): unguarded rules
   - Tablet (600–1023px): @media (min-width: 600px)
   - Desktop (>=1024px): @media (min-width: 1024px)
   - Zero max-width media queries; :hover gated by @media (hover: hover) and (min-width: 1024px)
   - All colors and dimensions reference §13 CSS custom properties from tokens.css
   ========================================================================== */

/* ============ phone base (0–599px): single scroll column ============ */
.app-shell[b-gmolsa5un1] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background-base);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
}

.app-header[b-gmolsa5un1] {
    height: var(--header-height);
    padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-xs), env(safe-area-inset-right));
    background-color: var(--background-surface);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-header-title[b-gmolsa5un1] {
    margin: 0;
    font-size: var(--font-heading);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
}

.health-dot-btn[b-gmolsa5un1] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.health-dot-btn:active[b-gmolsa5un1] {
    background-color: var(--background-surface-hover);
}

.health-dot[b-gmolsa5un1] {
    width: var(--status-dot);
    height: var(--status-dot);
    border-radius: 50%;
    background-color: var(--accent-primary);
    display: inline-block;
}

.health-dot.status-online[b-gmolsa5un1] {
    background-color: var(--status-success);
}

.health-dot.status-warning[b-gmolsa5un1] {
    background-color: var(--status-warning);
}

.health-dot.status-error[b-gmolsa5un1] {
    background-color: var(--status-error);
}

.health-dot.status-connecting[b-gmolsa5un1] {
    background-color: var(--accent-primary);
    animation: jf-pulse-b-gmolsa5un1 1s infinite ease-in-out;
}

@keyframes jf-pulse-b-gmolsa5un1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.main-col[b-gmolsa5un1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.studio-row[b-gmolsa5un1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content[b-gmolsa5un1] {
    flex: 1;
    min-width: 0;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 100%;
    width: 100%;
}

.surface-heading[b-gmolsa5un1] {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-title-weight);
    color: var(--text-primary);
}

/* mini-player (§12.4): 64px Mini-Player-Height pinned above tab bar */
.mini-player[b-gmolsa5un1] {
    height: var(--mini-player-height);
    background-color: var(--background-surface);
    border-top: 2px solid var(--accent-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
    position: sticky;
    bottom: var(--tab-bar-height);
}

.mini-player-btn[b-gmolsa5un1] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-heading);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-player-btn:active[b-gmolsa5un1] {
    background-color: var(--background-surface-hover);
}

.mini-track[b-gmolsa5un1] {
    flex: 1;
    min-width: 0;
}

.mini-title[b-gmolsa5un1] {
    font-size: var(--font-body);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-time[b-gmolsa5un1] {
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--text-secondary);
}

/* bottom tab bar (§12.1): 64px Tab-Bar-Height + safe-area inset, 3 equal tabs */
.tab-bar[b-gmolsa5un1] {
    min-height: var(--tab-bar-height);
    height: var(--tab-bar-height);
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    background-color: var(--background-surface);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.tab-btn[b-gmolsa5un1] {
    flex: 1;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    background: none;
    border: none;
    border-top: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-family-sans);
    font-size: var(--font-mono);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.tab-btn:active[b-gmolsa5un1] {
    background-color: var(--background-surface-hover);
}

.tab-btn.active[b-gmolsa5un1] {
    color: var(--accent-primary);
    border-top-color: var(--accent-primary);
}

.tab-badge[b-gmolsa5un1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
}

/* desktop-only surfaces hidden on phone/tablet (§12.1) */
.sidebar[b-gmolsa5un1], .queue-dock[b-gmolsa5un1] { display: none; }

/* ============ tablet 600–1023px: centered 720px column + History master-detail ============ */
@media (min-width: 600px) {
    .content[b-gmolsa5un1] {
        max-width: var(--content-max-tablet);
        margin: 0 auto;
        width: 100%;
    }

    [b-gmolsa5un1] .history-split {
        display: flex;
        gap: 0;
    }

    [b-gmolsa5un1] .history-split .job-list {
        width: var(--sidebar-width);
        flex: none;
    }
}

/* ============ desktop >=1024px: 280px sidebar, 320px Queue dock, 88px footer ============ */
@media (min-width: 1024px) {
    .app-shell[b-gmolsa5un1] {
        flex-direction: row;
    }

    .tab-bar[b-gmolsa5un1], .mini-player[b-gmolsa5un1], .app-header[b-gmolsa5un1] { display: none; }

    .sidebar[b-gmolsa5un1] {
        display: flex;
        flex-direction: column;
        width: var(--sidebar-width);
        flex: none;
        min-height: 100vh;
        background-color: var(--background-surface);
        border-right: 1px solid var(--border-subtle);
    }

    .sidebar-brand[b-gmolsa5un1] {
        padding: var(--spacing-md);
        font-size: var(--font-heading);
        font-weight: var(--font-heading-weight);
        color: var(--text-primary);
    }

    .sidebar-nav[b-gmolsa5un1] {
        display: flex;
        flex-direction: column;
    }

    .sidebar-nav-btn[b-gmolsa5un1] {
        min-height: var(--control-height);
        min-width: var(--touch-target-min);
        background: none;
        border: none;
        color: var(--text-secondary);
        text-align: left;
        padding: 0 var(--spacing-md);
        font-family: var(--font-family-sans);
        font-size: var(--font-body);
        font-weight: var(--font-heading-weight);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar-nav-btn:active[b-gmolsa5un1] {
        background-color: var(--background-surface-hover);
    }

    .sidebar-nav-btn.active[b-gmolsa5un1] {
        color: var(--accent-primary);
        background-color: var(--background-surface-hover);
    }

    .main-col[b-gmolsa5un1] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .studio-row[b-gmolsa5un1] {
        flex: 1;
        display: flex;
        flex-direction: row;
    }

    .studio-row .content[b-gmolsa5un1] {
        flex: 1;
        max-width: none;
        margin: 0;
    }

    .queue-dock[b-gmolsa5un1] {
        display: block;
        width: var(--queue-dock-width);
        flex: none;
        border-left: 1px solid var(--border-subtle);
        padding: var(--spacing-md);
        background-color: var(--background-base);
    }

    .queue-dock-title[b-gmolsa5un1] {
        margin: 0 0 var(--spacing-sm) 0;
        font-size: var(--font-heading);
        font-weight: var(--font-heading-weight);
        color: var(--text-primary);
    }

    .health-chip[b-gmolsa5un1] {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-mono);
        color: var(--text-secondary);
    }
}

/* hover styles ship ONLY for fine pointers at desktop >= 1024px (spec §12.7) */
@media (hover: hover) and (min-width: 1024px) {
    .sidebar-nav-btn:hover[b-gmolsa5un1] {
        background-color: var(--background-surface-hover);
    }
}
/* /Pages/History.razor.rz.scp.css */
/* ==========================================================================
   JingleForge History Page Stylesheet (spec §12.1, §12.2, §12.6, §12.7, §13)
   - Mobile-first: unguarded phone base, min-width progressive enhancement only
   - Zero ad-hoc hex or px outside §13 tokens.css custom properties
   - Discrete tap targets >= var(--touch-target-min); buttons >= var(--control-height)
   - :hover rules gated strictly inside @media (hover: hover) and (min-width: 1024px)
   ========================================================================== */

.history-page[b-qnu5vr7ops] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    min-width: 0;
}

.surface-heading[b-qnu5vr7ops] {
    display: none;
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-title-weight);
    color: var(--text-primary);
}

.unreachable-banner[b-qnu5vr7ops],
.history-error-banner[b-qnu5vr7ops],
.detail-error-banner[b-qnu5vr7ops],
.daily-limit-banner[b-qnu5vr7ops] {
    min-height: var(--control-height);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background-color: var(--surface-warning-tint);
    border: 1px solid var(--status-warning);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.history-error-banner[b-qnu5vr7ops],
.detail-error-banner[b-qnu5vr7ops] {
    background-color: var(--surface-error-tint);
    border-color: var(--status-error);
}

.history-toast[b-qnu5vr7ops],
.history-queued-toast[b-qnu5vr7ops],
.history-rerender-status[b-qnu5vr7ops] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--font-body);
}

.detail-rerender-hint[b-qnu5vr7ops] {
    font-size: var(--font-body);
    color: var(--text-secondary);
}

.btn-retry[b-qnu5vr7ops] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0 var(--spacing-md);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.btn-retry:active[b-qnu5vr7ops] {
    background-color: var(--background-surface-hover);
}

.history-skeleton[b-qnu5vr7ops],
.job-list[b-qnu5vr7ops] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

.skeleton-row[b-qnu5vr7ops] {
    min-height: var(--control-height);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    animation: jf-history-pulse-b-qnu5vr7ops 1s infinite ease-in-out;
}

@keyframes jf-history-pulse-b-qnu5vr7ops {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.history-empty[b-qnu5vr7ops],
.detail-missing[b-qnu5vr7ops] {
    padding: var(--spacing-md);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-body);
}

/* Phone base (0-599px): full-screen list -> tap pushes full-screen detail (§12.1) */
.history-split[b-qnu5vr7ops] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
}

.history-split.has-selection .history-master[b-qnu5vr7ops] {
    display: none;
}

.job-row[b-qnu5vr7ops] {
    min-height: var(--touch-target-min);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.job-row:active[b-qnu5vr7ops],
.job-row.selected[b-qnu5vr7ops] {
    background-color: var(--background-surface-hover);
}

.job-row.failed[b-qnu5vr7ops] {
    border-color: var(--status-error);
}

.job-row-main[b-qnu5vr7ops] {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.job-status-dot[b-qnu5vr7ops] {
    width: var(--status-dot);
    height: var(--status-dot);
    border-radius: 50%;
    flex: none;
    display: inline-block;
}

.job-status-dot.status-queued[b-qnu5vr7ops] {
    background-color: var(--text-secondary);
}

.job-status-dot.status-running[b-qnu5vr7ops] {
    background-color: var(--accent-primary);
}

.job-status-dot.status-succeeded[b-qnu5vr7ops] {
    background-color: var(--status-success);
}

.job-status-dot.status-failed[b-qnu5vr7ops] {
    background-color: var(--status-error);
}

.pulse[b-qnu5vr7ops] {
    animation: jf-history-pulse-b-qnu5vr7ops 1s infinite ease-in-out;
}

.job-running-bar[b-qnu5vr7ops] {
    height: var(--spacing-xs);
    width: 100%;
    border-radius: var(--radius-sm);
    background-color: var(--accent-primary);
}

.job-title-wrap[b-qnu5vr7ops] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.job-title[b-qnu5vr7ops] {
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-badge[b-qnu5vr7ops] {
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    border: 1px solid var(--border-subtle);
}

.job-badge.badge-jingle[b-qnu5vr7ops] {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.job-badge.badge-audition[b-qnu5vr7ops] {
    background-color: var(--background-surface-hover);
    color: var(--text-secondary);
}

.job-meta[b-qnu5vr7ops] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--text-secondary);
}

.job-play-btn[b-qnu5vr7ops] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background-color: var(--accent-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-on-accent);
    font-size: var(--font-body);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.job-play-btn:active[b-qnu5vr7ops] {
    background-color: var(--accent-hover);
    opacity: 0.85;
}

.job-error-inline[b-qnu5vr7ops] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.job-error-text[b-qnu5vr7ops] {
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--status-error);
    background-color: var(--background-base);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

.job-error-text.line-clamp-3[b-qnu5vr7ops] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-error-more-btn[b-qnu5vr7ops] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    align-self: flex-start;
    padding: 0 var(--spacing-sm);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    text-decoration: underline;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.job-error-more-btn:active[b-qnu5vr7ops] {
    background-color: var(--background-surface-hover);
}

.btn-load-more[b-qnu5vr7ops] {
    min-height: var(--control-height);
    min-width: var(--touch-target-min);
    width: 100%;
    padding: 0 var(--spacing-md);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.btn-load-more:active:not(:disabled)[b-qnu5vr7ops] {
    background-color: var(--background-surface-hover);
}

.btn-load-more:disabled[b-qnu5vr7ops] {
    background-color: var(--accent-disabled);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Detail pane (§12.1, §12.2, §12.7) */
.job-detail[b-qnu5vr7ops] {
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
    overflow-wrap: anywhere;
}

.detail-header[b-qnu5vr7ops] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.detail-back-btn[b-qnu5vr7ops] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0 var(--spacing-sm);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.detail-back-btn:active[b-qnu5vr7ops] {
    background-color: var(--background-surface-hover);
}

.detail-title-group[b-qnu5vr7ops] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.detail-title[b-qnu5vr7ops] {
    margin: 0;
    font-size: var(--font-heading);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
}

.detail-meta[b-qnu5vr7ops],
.detail-fields[b-qnu5vr7ops],
.detail-output-metadata[b-qnu5vr7ops] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-body);
    color: var(--text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.detail-audio-sha256[b-qnu5vr7ops] {
    overflow-wrap: anywhere;
    word-break: break-all;
}

.detail-lyrics[b-qnu5vr7ops] {
    margin: var(--spacing-xs) 0 0 0;
    padding: var(--spacing-sm);
    background-color: var(--background-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-error-full[b-qnu5vr7ops] {
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    color: var(--status-error);
    background-color: var(--background-base);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

.job-actions[b-qnu5vr7ops] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn-action[b-qnu5vr7ops] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--background-surface-hover);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.btn-action:active:not(:disabled)[b-qnu5vr7ops] {
    opacity: 0.85;
}

.btn-action:disabled[b-qnu5vr7ops] {
    background-color: var(--accent-disabled);
    color: var(--text-secondary);
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-row[b-qnu5vr7ops],
    .pulse[b-qnu5vr7ops] {
        animation: none;
    }

    .job-row[b-qnu5vr7ops],
    .job-play-btn[b-qnu5vr7ops],
    .job-error-more-btn[b-qnu5vr7ops],
    .btn-load-more[b-qnu5vr7ops],
    .detail-back-btn[b-qnu5vr7ops],
    .btn-action[b-qnu5vr7ops],
    .btn-retry[b-qnu5vr7ops] {
        transition: none;
    }
}

/* Tablet & Desktop master-detail (>= 600px, spec §12.1: 280px list + fluid detail) */
@media (min-width: 600px) {
    .history-split[b-qnu5vr7ops] {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
    }

    .history-split .job-list[b-qnu5vr7ops],
    .history-split.has-selection .history-master[b-qnu5vr7ops] {
        display: flex;
        width: var(--sidebar-width);
        flex: none;
    }

    .history-split .job-detail[b-qnu5vr7ops] {
        flex: 1;
        min-width: 0;
        margin-left: var(--spacing-md);
    }
}

@media (min-width: 1024px) {
    .surface-heading[b-qnu5vr7ops] {
        display: block;
    }
}

@media (hover: hover) and (min-width: 1024px) {
    .job-row:hover[b-qnu5vr7ops],
    .btn-action:hover:not(:disabled)[b-qnu5vr7ops],
    .btn-retry:hover[b-qnu5vr7ops],
    .btn-load-more:hover:not(:disabled)[b-qnu5vr7ops],
    .job-error-more-btn:hover[b-qnu5vr7ops],
    .detail-back-btn:hover[b-qnu5vr7ops] {
        background-color: var(--background-surface-hover);
    }

    .job-play-btn:hover[b-qnu5vr7ops] {
        background-color: var(--accent-hover);
    }
}
/* /Pages/Studio.razor.rz.scp.css */
/* ==========================================================================
   JingleForge Studio Compose Page Stylesheet (spec §12.3, §12.7, §13)
   - Mobile-first: unguarded phone base, min-width progressive enhancement only
   - Zero ad-hoc hex or px outside §13 tokens.css custom properties
   - Discrete tap targets >= var(--touch-target-min); buttons >= var(--control-height)
   ========================================================================== */

.studio-page[b-w85bfk2kcc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

/* B1 & B2: In-column Studio heading uses Font-Title tokens and is desktop-only (>=1024px);
   phone/tablet (<1024px) already display "Studio" in the 56px app header. */
.surface-heading[b-w85bfk2kcc] {
    display: none;
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-title-weight);
    color: var(--text-primary);
}

.control-set[b-w85bfk2kcc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.input-group[b-w85bfk2kcc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.field-header[b-w85bfk2kcc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.field-label[b-w85bfk2kcc] {
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    color: var(--text-primary);
}

.field-summary[b-w85bfk2kcc] {
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    color: var(--text-secondary);
}

.genre-max-hint[b-w85bfk2kcc] {
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    color: var(--status-warning);
}

/* Mode & Vocal segmented toggle (§12.3, §12.7) */
.mode-toggle[b-w85bfk2kcc] {
    display: flex;
    gap: var(--spacing-xs);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
}

.mode-btn[b-w85bfk2kcc] {
    flex: 1;
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.mode-btn.active[b-w85bfk2kcc] {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.mode-btn:active[b-w85bfk2kcc] {
    background-color: var(--background-surface-hover);
}

.mode-btn.active:active[b-w85bfk2kcc] {
    background-color: var(--accent-hover);
    opacity: 0.85;
}

/* Textarea and text input (§12.3, §12.7: no nested overflow scroller on touch) */
.studio-textarea[b-w85bfk2kcc],
.studio-input[b-w85bfk2kcc] {
    width: 100%;
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
}

.studio-input[b-w85bfk2kcc] {
    min-height: var(--control-height);
}

.studio-textarea.mono[b-w85bfk2kcc] {
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
    min-height: calc(var(--control-height) * 3);
    overflow-y: hidden;
    resize: none;
    field-sizing: content;
}

/* Length range slider (§12.3, §12.7: 24px thumb inside 44px Touch-Target-Min hit strip) */
.length-slider[b-w85bfk2kcc] {
    width: 100%;
    min-height: var(--touch-target-min);
    height: var(--touch-target-min);
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.length-slider[b-w85bfk2kcc]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    border-radius: 50%;
    background-color: var(--accent-primary);
    border: none;
    cursor: pointer;
}

.length-slider[b-w85bfk2kcc]::-moz-range-thumb {
    appearance: none;
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    border-radius: 50%;
    background-color: var(--accent-primary);
    border: none;
    cursor: pointer;
}

/* Jingle chips: genres, tempo presets, themes (§12.3, §12.7, §17.1) */
.chip-grid[b-w85bfk2kcc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.chip-btn[b-w85bfk2kcc] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.chip-btn.selected[b-w85bfk2kcc] {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.chip-btn:active[b-w85bfk2kcc] {
    background-color: var(--background-surface-hover);
}

.chip-btn.selected:active[b-w85bfk2kcc] {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    opacity: 0.85;
}

.fixed-length-notice[b-w85bfk2kcc] {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
}

/* Primary & Secondary action buttons (§12.1, §12.3, §12.7, §13) */
.button-stack[b-w85bfk2kcc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn[b-w85bfk2kcc] {
    min-height: var(--control-height);
    min-width: var(--touch-target-min);
    width: 100%;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-heading-weight);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-md);
    transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.btn-generate[b-w85bfk2kcc] {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
}

.btn-generate:active:not(:disabled)[b-w85bfk2kcc] {
    background-color: var(--accent-hover);
    opacity: 0.85;
}

.btn-audition[b-w85bfk2kcc],
.btn-secondary[b-w85bfk2kcc] {
    background-color: var(--background-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.btn-audition:active:not(:disabled)[b-w85bfk2kcc],
.btn-secondary:active:not(:disabled)[b-w85bfk2kcc] {
    background-color: var(--background-surface-hover);
}

/* Disabled-state rule (AC20.2, §13): Accent-Disabled fill + Text-Secondary */
.btn-generate:disabled[b-w85bfk2kcc],
.btn-audition:disabled[b-w85bfk2kcc] {
    background-color: var(--accent-disabled);
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    cursor: not-allowed;
}

/* UI-SF2: Active in-flight button retains readable --text-primary contrast (6.78:1 on #264F66) */
.btn-generate.btn-submitting:disabled[b-w85bfk2kcc],
.btn-audition.btn-submitting:disabled[b-w85bfk2kcc] {
    color: var(--text-primary);
}

/* Button-local spinner (AC1.4, §12.3, §18 row 4) */
.btn-spinner[b-w85bfk2kcc] {
    width: var(--spacing-md);
    height: var(--spacing-md);
    border: 2px solid var(--text-primary);
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: jf-spin-b-w85bfk2kcc 0.8s linear infinite;
}

@keyframes jf-spin-b-w85bfk2kcc {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-spinner[b-w85bfk2kcc] {
        animation: none;
    }
}

/* Banners, toasts, warnings, and inline errors (§10.4, §11, §12.3, §12.6) */
.field-error[b-w85bfk2kcc],
.studio-inline-error[b-w85bfk2kcc] {
    color: var(--status-error);
    font-family: var(--font-family-mono);
    font-size: var(--font-mono);
}

.daily-limit-banner[b-w85bfk2kcc],
.unreachable-banner[b-w85bfk2kcc],
.studio-warnings[b-w85bfk2kcc] {
    background-color: var(--surface-warning-tint);
    border: 1px solid var(--status-warning);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.unreachable-banner[b-w85bfk2kcc] {
    border-color: var(--status-error);
}

.unreachable-banner-copy[b-w85bfk2kcc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.unreachable-status-label[b-w85bfk2kcc] {
    color: var(--status-error);
}

.studio-toast[b-w85bfk2kcc],
.studio-queued-toast[b-w85bfk2kcc] {
    background-color: var(--background-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-body);
}

.studio-toast[b-w85bfk2kcc] {
    border-color: var(--status-warning);
}

.studio-queued-toast[b-w85bfk2kcc] {
    border-color: var(--accent-primary);
}

@media (min-width: 1024px) {
    .surface-heading[b-w85bfk2kcc] {
        display: block;
    }
}

@media (hover: hover) and (min-width: 1024px) {
    .btn-generate:hover:not(:disabled)[b-w85bfk2kcc] {
        background-color: var(--accent-hover);
    }

    .btn-audition:hover:not(:disabled)[b-w85bfk2kcc],
    .btn-secondary:hover:not(:disabled)[b-w85bfk2kcc],
    .chip-btn:hover:not(.selected)[b-w85bfk2kcc],
    .mode-btn:hover:not(.active)[b-w85bfk2kcc] {
        background-color: var(--background-surface-hover);
    }
}