/* =================================================================
   cdripper.css — CD Ripper view (sidebar entry: "CD Ripper").
   Visually consistent with the device-detail view: rounded surfaces,
   muted text on info rows, accent-tinted action button.
   ================================================================= */

.cdripper-view {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 0 24px 0;
}

.cdripper-head h2 { margin: 0 0 4px 0; }
.cdripper-head p  { margin: 0; color: var(--text-muted); font-size: 13px; }

.cdripper-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--overlay-hover);
}

/* CD-specific mini-player. Anchored just below the hero whenever a
   CD track is currently playing through the app's audio element.
   Mirrors the bottom transport bar's information density but in a
   single horizontal strip the user can scan while filling in tags. */
.cdplayer-miniplayer {
    display: grid;
    grid-template-columns: 56px 1fr 1.5fr auto;
    align-items: center;
    column-gap: 14px;
    padding: 10px 14px;
    margin: 12px 0 0 0;
    border: 1px solid rgba(var(--accent-primary-rgb), 0.45);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(var(--accent-cyan-rgb), 0.04));
}
.cdmini-cover {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-overlay);
    flex: 0 0 auto;
}
.cdmini-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 22px;
}
.cdmini-info { min-width: 0; }
.cdmini-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdmini-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdmini-sep { opacity: 0.5; margin: 0 4px; }
.cdmini-progress {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    column-gap: 8px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.cdmini-time-cur, .cdmini-time-tot { text-align: center; }
.cdmini-bar {
    height: 4px;
    background: var(--overlay-active);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.cdmini-bar-fill {
    height: 100%;
    background: var(--accent-primary, #ff6b35);
    border-radius: 2px;
    transition: width 120ms linear;
    width: 0%;
}
.cdmini-bar:hover { background: var(--border-strong); }
.cdmini-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cdmini-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: background 0.12s, transform 0.12s;
}
.cdmini-btn:hover { background: var(--overlay-active); }
.cdmini-btn:disabled { opacity: 0.35; cursor: default; }
.cdmini-btn:disabled:hover { background: transparent; }
.cdmini-play-pause {
    background: var(--accent-primary, #ff6b35) !important;
    color: var(--text-on-accent);
    width: 38px;
    height: 38px;
    font-size: 14px;
}
.cdmini-play-pause:hover { transform: scale(1.06); }

/* Rip-options modal — appears when the user clicks "Rip N tracks to
   library". The format / quality / advanced controls used to live in
   the main view; moving them to a modal keeps the CD Player view
   focused on listening + tagging. */
.cdripper-rip-modal-content {
    width: min(620px, 92vw);
    max-height: 90vh;
}
.cdripper-rip-modal-content .settings-modal-body { overflow-y: auto; }
.cdr-rip-modal-intro {
    margin: 0 0 14px 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Release picker — shown when MusicBrainz returns multiple matches
   for the same disc id. List of selectable cards; each card is a
   self-contained button so keyboard navigation Just Works. */
.cdripper-picker-content { width: min(640px, 92vw); max-height: 85vh; }
.cdripper-picker-content .settings-modal-body { overflow-y: auto; }
.cdr-picker-intro {
    margin: 0 0 14px 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.cdr-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cdr-picker-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 10px 14px;
    background: var(--overlay-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.cdr-picker-row:hover {
    background: rgba(var(--accent-primary-rgb), 0.10);
    border-color: rgba(var(--accent-primary-rgb), 0.45);
    transform: translateY(-1px);
}
.cdr-picker-row:focus-visible {
    outline: 2px solid var(--accent-primary, #ff6b35);
    outline-offset: 2px;
}
.cdr-picker-cover {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: var(--surface-overlay);
    background-size: cover;
    background-position: center;
}
.cdr-picker-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 26px;
}
.cdr-picker-info { min-width: 0; }
.cdr-picker-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdr-picker-sub {
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* Source-spec banner — first thing the user sees after detecting a
   disc. Surfaces the immutable CD-DA spec (16-bit / 44.1 kHz / Stereo)
   plus a one-paragraph explanation of what FLAC's compression-level
   knob actually controls (file size only, never fidelity). */
.cdripper-source-spec {
    padding: 12px 14px;
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.45);
    border-radius: 10px;
    background: rgba(var(--accent-cyan-rgb), 0.06);
}
.cdr-source-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.cdr-source-line {
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.cdr-source-line strong { color: var(--accent-cyan, #00bcd4); font-weight: 600; }
.cdr-source-hint {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

/* One-line dynamic hint that swaps text whenever the user changes
   the format or quality dropdown. Less prominent than the banner,
   but always visible right where they made the change. */
.cdr-format-hint {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    padding: 4px 2px 0 2px;
}
.cdr-format-hint strong { color: var(--text-primary); }

/* Per-format advanced controls. Each codec gets its own card with
   format-appropriate knobs (compression level / VBR mode / bitrate /
   channels / etc.). Live in a single #cdr-advanced container that
   gets its innerHTML replaced when the format changes. */
.cdr-advanced { margin-top: 4px; }
.cdr-adv-card {
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--overlay-hover);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cdr-adv-card-info {
    background: rgba(var(--accent-cyan-rgb), 0.05);
    border-color: rgba(var(--accent-cyan-rgb), 0.30);
}
.cdr-adv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cdr-adv-row[hidden] { display: none; }
.cdr-adv-row .prefs-label { min-width: 110px; flex: 0 0 auto; }
.cdr-adv-row .prefs-input { flex: 0 1 240px; }
.cdr-adv-row input[type="range"] { flex: 1 1 200px; max-width: 320px; }
.cdr-adv-row input[type="number"] { width: 100px; }
.cdr-adv-value {
    color: var(--accent-cyan, #00bcd4);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
}
.cdr-radio-row {
    display: inline-flex;
    gap: 16px;
    flex-wrap: wrap;
}
.cdr-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 13px;
}
.cdr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}
.cdr-adv-hint {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}
.cdr-adv-hint strong { color: var(--text-primary); }

/* Per-track output stats shown in the status column once a track
   finishes encoding. The 'lossless' tag turns FLAC / WAV results
   into something the user can scan at a glance. */
.cdr-col-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.cdr-stat-codec {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 11px;
}
.cdr-stat-bitrate, .cdr-stat-size {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}
.cdr-stat-tag {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cdr-stat-tag-lossless {
    background: rgba(var(--accent-cyan-rgb), 0.18);
    color: var(--accent-cyan);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.35);
}
.cdr-stat-done { color: var(--state-success); font-weight: 700; }
.cdr-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cdr-row .prefs-label { min-width: 64px; }
.cdr-row .prefs-input { flex: 0 1 240px; }
.cdr-overrides .prefs-input { flex: 0 0 auto; min-width: 140px; }
.cdr-secure-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
    margin-left: auto;
    cursor: pointer;
}

.cdripper-loading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--overlay-hover);
}
.cdripper-loading-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: cdr-spin 0.8s linear infinite;
    flex: 0 0 auto;
}
@keyframes cdr-spin { to { transform: rotate(360deg); } }
.cdripper-loading-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 14px;
}

.cdripper-error {
    padding: 14px 16px;
    border: 1px solid rgba(var(--state-danger-rgb), 0.55);
    border-radius: 10px;
    background: rgba(var(--state-danger-rgb), 0.08);
    color: var(--text-primary);
}
.cdripper-error h3 { margin: 0 0 6px 0; font-size: 15px; }
.cdripper-error p  { margin: 0 0 6px 0; font-size: 13px; }
.cdripper-error-hint  { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.cdripper-error-tips  { color: var(--text-muted); font-size: 11.5px; line-height: 1.5; margin-top: 8px !important; }
.cdripper-error-msg   { color: var(--text-primary); font-family: Consolas, "SF Mono", monospace; font-size: 12px; }
.cdripper-error-probe {
    margin: 8px 0;
    padding: 8px 10px;
    background: var(--overlay-active);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-primary);
    font-family: Consolas, "SF Mono", monospace;
}
.cdripper-error-probe .cdr-key { color: var(--text-muted); margin-right: 4px; }
.cdripper-error-probe .cdr-ok  { color: var(--state-success); }
.cdripper-error-probe .cdr-bad { color: var(--state-danger); }
.cdripper-error-probe .cdr-probe-version { color: var(--text-muted); margin-top: 4px; font-size: 11px; }
.cdripper-error-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.cdripper-disc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: rgba(var(--accent-primary-rgb), 0.06);
}
.cdripper-disc-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.cdripper-disc-meta {
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 2px;
}
.cdripper-disc-meta code {
    font-size: 11.5px;
    background: var(--overlay-selected);
    padding: 2px 6px;
    border-radius: 4px;
}
.cdripper-disc-actions { display: flex; gap: 8px; }

.cdripper-album-tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}
.cdripper-album-tags .prefs-field { margin: 0; }

/* =================================================================
   CD Player view — album-detail-style hero + clean track list.
   Replaces the form-heavy "tag-every-row" rip wizard look so the
   page reads as a music player first, with rip as one decisive
   action button.
   ================================================================= */

.cdplayer-hero {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 18px 18px 18px 18px;
    margin-top: 4px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.06), rgba(var(--accent-cyan-rgb), 0.04));
}
.cdplayer-cover {
    width: 180px;
    height: 180px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: radial-gradient(circle at 35% 35%, #6c6c6c, #1a1a24 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
/* Stylised CD disc inside the cover surface — pure CSS so it works
   without any image asset. The hub gives it the "punched centre"
   look so it reads as a CD, not an LP. */
.cdplayer-cover-disc {
    width: 84%;
    height: 84%;
    border-radius: 50%;
    background: conic-gradient(from 90deg at 50% 50%,
        #2c2c34, #5a5a66, #2c2c34, #5a5a66, #2c2c34);
    box-shadow: inset 0 0 0 2px var(--overlay-active), 0 0 18px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cdplayer-cover-disc-hub {
    width: 32%;
    height: 32%;
    border-radius: 50%;
    background: var(--bg-card, #1a1a24);
    box-shadow: inset 0 0 0 2px var(--overlay-hover);
}
/* Cover-art variant — once we've fetched the front cover from CAA,
   the placeholder CSS disc swaps for the actual image. Same dimensions
   so the layout doesn't shift. */
.cdplayer-cover-art {
    background-color: var(--surface-overlay);
    background-size: cover;
    background-position: center;
}
.cdplayer-cover-art .cdplayer-cover-disc { display: none; }
/* While a probe is running, the inner disc spins like a real CD-ROM.
   Subtle but immediately reads as "the drive is doing something". */
.cdplayer-cover-loading .cdplayer-cover-disc {
    animation: cdplayer-spin 1.6s linear infinite;
}
.cdplayer-cover-spinner {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-strong);
    border-top-color: var(--accent-primary, #ff6b35);
    border-radius: 50%;
    animation: cdr-spin 0.8s linear infinite;
    z-index: 2;
}
@keyframes cdplayer-spin { to { transform: rotate(360deg); } }
/* Hero placeholder text — visible greyer than real album titles so
   the user can tell the difference between "no disc inserted" and
   "loaded album with title 'No disc'". */
.cdplayer-title-placeholder, .cdplayer-artist-placeholder {
    color: var(--text-muted);
    font-style: normal;
    padding: 4px 0;
}
.cdplayer-hero-empty   .cdplayer-cover-disc { opacity: 0.45; }
.cdplayer-hero-loading .cdplayer-cover { background: radial-gradient(circle at 35% 35%, #2c2c34, #0a0a0f 70%); }
.cdplayer-hero-error   .cdplayer-cover-disc { opacity: 0.30; }
.cdplayer-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cdplayer-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
/* Inline-edit inputs that look like plain text. No border, no
   background until focused — only when the user clicks does the
   field reveal itself as editable. Same trick as Notion / Linear. */
.cdplayer-title, .cdplayer-artist, .cdplayer-meta-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: 4px 6px;
    border-radius: 6px;
    width: 100%;
    transition: background 0.12s, border-color 0.12s;
}
.cdplayer-title  { font-size: 28px; font-weight: 700; line-height: 1.1; }
.cdplayer-artist { font-size: 16px; color: var(--text-secondary, #ccc); }
.cdplayer-title:hover, .cdplayer-artist:hover, .cdplayer-meta-input:hover {
    background: var(--overlay-hover);
}
.cdplayer-title:focus, .cdplayer-artist:focus, .cdplayer-meta-input:focus {
    outline: none;
    background: var(--overlay-selected);
    border-color: var(--accent-primary, #ff6b35);
}
.cdplayer-title::placeholder, .cdplayer-artist::placeholder,
.cdplayer-meta-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}
.cdplayer-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12.5px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.cdplayer-meta-input { width: 100px; font-size: 12.5px; padding: 2px 6px; }
.cdplayer-meta-genre { width: 140px; }
.cdplayer-meta-sep { opacity: 0.5; }
.cdplayer-meta-spec, .cdplayer-meta-discid { font-variant-numeric: tabular-nums; }
.cdplayer-meta-discid code {
    background: var(--overlay-selected);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.cdplayer-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Rip-options disclosure — collapsed by default; the user only
   touches it when they want to deselect tracks or talk codecs. */
.cdplayer-options {
    margin-top: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
}
.cdplayer-options summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-muted);
    user-select: none;
}
.cdplayer-options summary:hover { background: var(--overlay-hover); color: var(--text-primary); }
.cdplayer-options[open] summary { border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
.cdplayer-options-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cdplayer-option-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 13px;
}
.cdplayer-options-hint {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}

/* Track list — Spotify / Apple Music vibe: track number on the left,
   replaced by a play triangle on hover. Title is editable inline
   (borderless until focused). Selection-checkbox lives at the far
   right where it can be ignored unless the user wants partial rips. */
.cdplayer-tracks {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}
.cdplayer-track-row {
    display: grid;
    grid-template-columns: 36px 1fr 1fr 110px 60px 28px 22px;
    align-items: center;
    column-gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    border-radius: 6px;
    position: relative;
}
.cdplayer-track-row:last-child { border-bottom: none; }
.cdplayer-track-row:hover { background: var(--overlay-hover); }
.cdplayer-track-num {
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.12s;
}
.cdplayer-track-play {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--accent-primary, #ff6b35);
    color: var(--text-on-accent);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    padding-left: 2px;
    opacity: 0;
    transition: opacity 0.12s, transform 0.12s;
}
.cdplayer-track-row:hover .cdplayer-track-play { opacity: 1; }
.cdplayer-track-row:hover .cdplayer-track-num  { opacity: 0; }
.cdplayer-track-play:hover { transform: translateY(-50%) scale(1.08); }

.cdplayer-track-title, .cdplayer-track-artist {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    width: 100%;
    transition: background 0.12s, border-color 0.12s;
}
.cdplayer-track-artist { color: var(--text-muted); font-size: 12.5px; }
.cdplayer-track-title:hover, .cdplayer-track-artist:hover { background: var(--overlay-selected); }
.cdplayer-track-title:focus, .cdplayer-track-artist:focus {
    outline: none;
    background: var(--overlay-selected);
    border-color: var(--accent-primary, #ff6b35);
}
.cdplayer-track-title::placeholder, .cdplayer-track-artist::placeholder {
    color: var(--text-muted);
    font-style: italic;
}
.cdplayer-track-status {
    color: var(--text-muted);
    font-size: 11.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdplayer-track-dur {
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cdplayer-track-edit {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}
.cdplayer-track-row:hover .cdplayer-track-edit { opacity: 1; }
.cdplayer-track-edit:hover {
    background: var(--overlay-active);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}
/* Visual flag when this track has any extra tags attached. Stays
   visible even without hover so the user can scan which rows have
   overrides set. */
.cdplayer-track-edit.has-override {
    color: var(--accent-primary, #ff6b35);
    opacity: 1;
}
.cdplayer-track-edit.has-override::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary, #ff6b35);
    transform: translate(10px, -10px);
    pointer-events: none;
}

.cdplayer-track-check {
    margin: 0;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s;
}
.cdplayer-track-row:hover .cdplayer-track-check { opacity: 1; }

/* Per-track tag editor modal — focused form for the fields that are
   too niche to fit inline in the track row (composer / conductor /
   performer / orchestra / work / year / genre / comment). Title +
   artist are duplicated here for completeness but the inline row
   inputs remain the source of truth between rip-time renders. */
.cdripper-track-edit-content {
    max-width: 760px;
    width: 94%;
}
.cdr-tedit-intro {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 0 0 14px 0;
}
/* Section header — visual separator between "Core", "Classical /
   Composition", "People", and "Comment" groups. Mirrors the library
   tag editor's section-list layout. */
.cdr-tedit-section-head {
    margin: 14px 0 6px 0;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
}
.cdr-tedit-section-head:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
/* 6-col grid driven by per-field span (cdr-tedit-span-N). Same layout
   primitives the library tag editor uses. */
.cdr-tedit-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px 14px;
}
.cdr-tedit-label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--text-muted);
    gap: 4px;
    grid-column: span 3;
    min-width: 0;
}
.cdr-tedit-label .prefs-input {
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
}
.cdr-tedit-label-text {
    font-weight: 500;
    color: var(--text-muted);
}
.cdr-tedit-hint {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.75;
}
.cdr-tedit-span-1 { grid-column: span 1; }
.cdr-tedit-span-2 { grid-column: span 2; }
.cdr-tedit-span-3 { grid-column: span 3; }
.cdr-tedit-span-4 { grid-column: span 4; }
.cdr-tedit-span-5 { grid-column: span 5; }
.cdr-tedit-span-6 { grid-column: span 6; }
.cdr-tedit-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}
.cdr-tedit-spacer { flex: 1 1 auto; }

/* Quick-search prompt — pops up before the OnlineLookup modal when
   the CD has zero tags filled in, so the user can type what to
   search for without having to discover that the hero inputs are
   the seeds. Compact, three-row layout. */
.cdripper-quicksearch-content {
    max-width: 480px;
    width: 92%;
}
.cdr-quicksearch-intro {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 0 0 14px 0;
    line-height: 1.45;
}
.cdr-quicksearch-label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--text-muted);
    gap: 4px;
    margin-bottom: 10px;
}
.cdr-quicksearch-label .prefs-input {
    font-size: 14px;
    color: var(--text-primary);
}
.cdr-quicksearch-row {
    display: flex;
    gap: 14px;
}
.cdr-quicksearch-half { flex: 1 1 0; }
.cdr-quicksearch-hint {
    color: var(--text-muted);
    font-size: 11.5px;
    margin: 12px 0 0 0;
    line-height: 1.5;
    opacity: 0.85;
}

/* Whole-rip progress ribbon ------------------------------------------
   Pinned strip below the hero whenever a rip is in flight. Sticks to
   the top of the scroll container so the user can scroll the track
   list and still see total %, ETA, and the Cancel button. */
.cdripper-rip-ribbon {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 2fr) auto;
    align-items: center;
    column-gap: 16px;
    margin: 12px 0 14px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg,
                rgba(var(--accent-primary-rgb),0.12),
                rgba(var(--accent-primary-rgb),0.04));
    border: 1px solid rgba(var(--accent-primary-rgb),0.35);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
}
.cdrib-headline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cdrib-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-primary, #ff6b35);
    letter-spacing: 0.02em;
}
.cdrib-sub {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdrib-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cdrib-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--overlay-active);
    overflow: hidden;
}
.cdrib-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-primary, #ff6b35);
    border-radius: 999px;
    transition: width 0.25s ease-out;
}
.cdrib-numbers {
    display: flex;
    gap: 6px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.cdrib-sep { opacity: 0.55; }
.cdrib-cancel {
    align-self: center;
    white-space: nowrap;
}

/* Cancelling state — fade the ribbon and lock the button so the user
   doesn't double-click while ripengine is shutting down ffmpeg. */
.cdripper-rip-ribbon-cancelling {
    opacity: 0.7;
    border-color: var(--border-subtle);
    background: var(--overlay-hover);
}
.cdripper-rip-ribbon-cancelling .cdrib-bar-fill {
    background: var(--text-muted);
}
.cdripper-rip-ribbon-cancelling .cdrib-cancel[disabled] {
    cursor: progress;
    opacity: 0.6;
}

/* Currently-playing track gets the same accent treatment the rest of
   the app uses for "now playing" rows — soft tint + thicker bottom
   border. Play button stays visible (not just on hover) and pulses
   gently to read as "this is the one playing". */
.cdplayer-track-row.playing {
    background: rgba(var(--accent-primary-rgb), 0.10);
    box-shadow: box-shadow: none;
}
.cdplayer-track-row.playing .cdplayer-track-num    { opacity: 0; }
.cdplayer-track-row.playing .cdplayer-track-play   { opacity: 1; animation: cdr-playing-pulse 1.6s ease-in-out infinite; }
.cdplayer-track-row.playing .cdplayer-track-title  { color: var(--accent-primary, #ff6b35); font-weight: 600; }
@keyframes cdr-playing-pulse {
    0%, 100% { transform: translateY(-50%) scale(1);   box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb),0.45); }
    50%      { transform: translateY(-50%) scale(1.06); box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb),0.10); }
}

.cdripper-tracks {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
}
.cdripper-track-head,
.cdripper-track-row {
    display: grid;
    grid-template-columns: 40px 40px 36px 1fr 1fr 70px 130px;
    align-items: center;
    column-gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
}
/* Per-track play button — sized to fit the dedicated column and
   styled like a tonal accent action. The icon is a Unicode triangle
   (▶) so we don't need to hydrate an SVG from this column. */
.cdr-track-play {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--accent-primary-rgb), 0.18);
    color: var(--accent-primary, #ff6b35);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    padding: 0;
    padding-left: 2px;     /* visually centre the triangle */
}
.cdr-track-play:hover {
    background: var(--accent-primary, #ff6b35);
    color: var(--text-on-accent);
    transform: scale(1.05);
}
.cdr-col-play { width: 36px; }
.cdripper-track-head {
    background: var(--overlay-hover);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-subtle);
}
.cdripper-track-row {
    border-bottom: 1px solid var(--border-subtle);
}
.cdripper-track-row:last-child { border-bottom: none; }
.cdripper-track-row .prefs-input {
    height: 28px;
    padding: 4px 8px;
    font-size: 12.5px;
}
.cdr-col-num   { color: var(--text-muted); text-align: right; }
.cdr-col-dur   { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.cdr-col-status {
    color: var(--text-muted);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}