/* Catalog Explorer — Be Holden U */

:root {
    --bg:        #0a0a14;
    --bg-alt:    #11121f;
    --ink:       #ECECEC;
    --ink-soft:  #c4c4d4;
    --muted:     #7d7e95;
    --line:      rgba(255,255,255,0.08);
    --line-warm: rgba(255,255,255,0.14);
    --elec:      #3B82F6;
    --magenta:   #EC4899;
    --ember:     #F59E0B;
    --green:     #4ade80;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

#graph {
    position: fixed;
    inset: 0;
    z-index: 0;
}
#graph canvas { display: block; }

/* ---- Top HUD ---- */

.hud-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(180deg, rgba(10,10,20,0.92) 0%, rgba(10,10,20,0.6) 70%, transparent 100%);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.hud-brand {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
}
.brand-mark {
    color: var(--elec);
    font-size: 1.1em;
    line-height: 1;
}
.brand-name { letter-spacing: 0.02em; }
.brand-meta { color: var(--muted); font-size: 0.8rem; font-weight: 400; }

.hud-controls {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#search {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    width: 220px;
    outline: none;
    transition: border-color 120ms, background 120ms;
}
#search::placeholder { color: var(--muted); }
#search:focus {
    border-color: var(--elec);
    background: rgba(59,130,246,0.07);
}

.hud-mode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mode-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
}
.mode-buttons {
    display: flex;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.mode-btn {
    background: transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border: 0;
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.mode-btn:last-child { border-right: 0; }
.mode-btn:hover { background: rgba(255,255,255,0.04); color: var(--ink); }
.mode-btn.active {
    background: rgba(59,130,246,0.15);
    color: var(--ink);
}

/* ---- Filter chips ---- */

.filter-chips {
    position: fixed;
    /* Layout var driven by JS (updateHudMetrics) — falls back to the
     * previously-hardcoded 64px when the JS hasn't run yet. Lets the
     * top HUD wrap to N rows on laptops without burying the chips. */
    top: var(--hud-bottom, 64px);
    left: 0;
    right: 0;
    z-index: 8;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(180deg, rgba(10,10,20,0.85) 0%, rgba(10,10,20,0.55) 70%, transparent 100%);
    backdrop-filter: blur(8px);
    flex-wrap: wrap;
    pointer-events: auto;
}
.filter-chips .chip-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    padding-right: 0.4rem;
}
.chip {
    background: rgba(255,255,255,0.05);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.chip:hover {
    background: rgba(59,130,246,0.1);
    color: var(--ink);
    border-color: rgba(59,130,246,0.4);
}
.chip.active {
    background: rgba(236,72,153,0.18);
    border-color: rgba(236,72,153,0.5);
    color: #f9a8d4;
}
.chip.chip-clear {
    color: var(--muted);
    border-style: dashed;
    margin-left: auto;
}
.chip.chip-clear:hover { color: var(--ember); border-color: var(--ember); }

/* nudge list-view top so it sits below the chip row when 3D-only chrome is hidden */
body[data-view="list"] .filter-chips { display: none; }
body[data-view="3d"] .list-view { /* unaffected */ }

/* ---- Bottom HUD ---- */

.hud-bottom {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.7rem 1.25rem;
    background: linear-gradient(0deg, rgba(10,10,20,0.92) 0%, rgba(10,10,20,0.55) 70%, transparent 100%);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.78rem;
}
kbd {
    background: rgba(255,255,255,0.08);
    color: var(--ink);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    border: 1px solid var(--line);
}

/* ---- Side panel ---- */

#side-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 142px;     /* above bottom HUD (38) + player bar (104) */
    width: 380px;
    max-width: 90vw;
    z-index: 20;
    background: rgba(17,18,31,0.96);
    backdrop-filter: blur(12px);
    border-left: 1px solid var(--line-warm);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow-y: auto;
}
#side-panel:not(.hidden) {
    transform: translateX(0);
}
.panel-inner {
    padding: 4.5rem 1.5rem 2.5rem;
}
.panel-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.panel-close:hover {
    background: rgba(236,72,153,0.15);
    border-color: var(--magenta);
}

.panel-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.65rem;
    color: var(--magenta);
    margin: 0 0 0.6rem;
}
.panel-eyebrow.mt-lg { margin-top: 1.6rem; }
.panel-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 1.4rem;
    line-height: 1.2;
    color: var(--ink);
    border-radius: 4px;
    padding: 0.05em 0.15em;
    margin-left: -0.15em;
    cursor: text;
    transition: background-color 120ms;
}
.panel-title:hover {
    background: rgba(245, 158, 11, 0.06);
}
.panel-title:focus {
    outline: none;
    background: rgba(245, 158, 11, 0.10);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.4);
}

dl.panel-meta {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.45rem 0.75rem;
    font-size: 0.85rem;
    margin: 0;
}
dl.panel-meta dt {
    color: var(--muted);
    font-weight: 400;
}
dl.panel-meta dd {
    margin: 0;
    color: var(--ink-soft);
    font-weight: 500;
    word-break: break-word;
}

.panel-source {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--ember);
    background: rgba(245,158,11,0.06);
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(245,158,11,0.18);
    word-break: break-all;
    margin: 0 0 0.7rem;
    line-height: 1.45;
}
.copy-btn {
    background: rgba(59,130,246,0.12);
    color: var(--elec);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms;
}
.copy-btn:hover { background: rgba(59,130,246,0.22); }
.copy-btn.copied { background: rgba(74,222,128,0.18); color: var(--green); border-color: rgba(74,222,128,0.3); }

.panel-hint {
    margin-top: 2rem;
    font-size: 0.73rem;
    color: var(--muted);
    line-height: 1.5;
    border-top: 1px solid var(--line);
    padding-top: 1.2rem;
}

#side-panel.hidden { transform: translateX(100%); }

/* ---- Loading veil ---- */

.loading-veil {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 320ms ease, visibility 320ms ease;
}
.loading-veil.gone {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loading-inner { text-align: center; }
.loading-mark {
    color: var(--elec);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    animation: pulse 1.4s ease-in-out infinite;
}
.loading-text {
    color: var(--muted);
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
@keyframes pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* ---- Tooltip (3d-force-graph default) ---- */

.scene-tooltip {
    background: rgba(17,18,31,0.94) !important;
    border: 1px solid var(--line-warm) !important;
    color: var(--ink) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    backdrop-filter: blur(6px);
}

/* ---- View toggle (3D / List) ---- */

body[data-view="list"] .loading-veil { display: none; }



.view-btn {
    background: transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border: 0;
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.view-btn:last-child { border-right: 0; }
.view-btn:hover { background: rgba(255,255,255,0.04); color: var(--ink); }
.view-btn.active {
    background: rgba(236, 72, 153, 0.15);
    color: var(--ink);
}

/* ---- Home button ---- */

.icon-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--ink);
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms, border-color 120ms;
}
.icon-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--elec);
}

/* ---- Timeline / calendar view ---- */

.timeline-view {
    position: fixed;
    top: var(--content-top, 64px);
    bottom: 142px;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--bg);
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.timeline-view.hidden { display: none; }
.timeline-header {
    padding: 1.5rem 1.75rem 0.6rem;
}
.timeline-title {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}
.timeline-sub {
    color: var(--muted);
    font-size: 0.82rem;
    margin: 0.3rem 0 0;
}
.timeline-grid-wrap {
    flex: 1;
    overflow: auto;
    padding: 0.6rem 1.25rem 2rem;
}
.timeline-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink);
    font-size: 0.84rem;
}
.timeline-grid thead th {
    position: sticky;
    top: 0;
    background: rgba(10,10,20,0.96);
    backdrop-filter: blur(6px);
    color: var(--muted);
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--line-warm);
    z-index: 1;
}
.timeline-grid thead th.friday { color: var(--magenta); }
.timeline-grid tbody td {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0.55rem 0.6rem;
    vertical-align: top;
    width: 12%;
    min-width: 6rem;
}
.timeline-grid tbody td.week-of {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    width: 7rem;
    min-width: 7rem;
    white-space: nowrap;
    padding-left: 1rem;
}
.timeline-grid tbody td.friday {
    background: rgba(236,72,153,0.04);
}
.timeline-grid tbody td.is-past { opacity: 0.45; }
.timeline-grid tbody td.is-this-week {
    box-shadow: inset 0 0 0 1px rgba(245,158,11,0.5);
    background: rgba(245,158,11,0.06);
}

.tl-tile {
    display: block;
    padding: 0.45rem 0.6rem;
    background: rgba(59,130,246,0.10);
    border: 1px solid rgba(59,130,246,0.30);
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
    margin-bottom: 0.4rem;
}
.tl-tile:hover { background: rgba(59,130,246,0.22); border-color: rgba(59,130,246,0.6); }
.tl-tile.released, .tl-tile.live {
    background: rgba(251,191,36,0.14);
    border-color: rgba(251,191,36,0.5);
}
.tl-tile.released .tl-status, .tl-tile.live .tl-status { color: #fde68a; }
.tl-tile.tba {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.45);
}
.tl-tile.tba .tl-status { color: #fbbf24; }

.tl-tba-row td {
    padding: 0.6rem 0.6rem 1rem;
    border-bottom: 1px solid rgba(245,158,11,0.18);
}
.tl-tba-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(245,158,11,0.06);
    border: 1px dashed rgba(245,158,11,0.28);
    border-radius: 8px;
}
.tl-tba-banner .tl-tba-label {
    align-self: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fbbf24;
    padding: 0 0.6rem;
    font-weight: 600;
}
.tl-tba-banner .tl-tile {
    flex: 0 1 220px;
    margin-bottom: 0;
}
.tl-tile .tl-title {
    font-weight: 600;
    margin-bottom: 0.15rem;
    line-height: 1.2;
    word-break: break-word;
}
.tl-tile .tl-meta {
    font-size: 0.7rem;
    color: var(--muted);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.tl-tile .tl-status {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #f9a8d4;
}

body[data-view="timeline"] .filter-chips { display: none; }
body[data-view="timeline"] .loading-veil { display: none; }

/* ---- List / spreadsheet view ---- */

.list-view {
    position: fixed;
    top: var(--content-top, 64px);
    bottom: 142px;    /* above bottom HUD (38) + player bar (104) */
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.list-view.hidden { display: none; }

.list-table-wrap {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.list-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink);
    font-size: 0.85rem;
}

.list-table thead th {
    position: sticky;
    top: 0;
    background: rgba(10, 10, 20, 0.96);
    backdrop-filter: blur(6px);
    color: var(--muted);
    text-align: left;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--line-warm);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    z-index: 1;
}
.list-table thead th:hover {
    color: var(--ink);
    background: rgba(59, 130, 246, 0.08);
}
.list-table thead th .sort-arrow {
    margin-left: 0.3rem;
    font-size: 0.72rem;
    opacity: 0.85;
}
.list-table th.col-num,
.list-table td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.list-table th.col-flags,
.list-table td.col-flags { white-space: nowrap; }
.list-table th.col-title { padding-left: 1.25rem; }

.list-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 80ms;
}
.list-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}
.list-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.08);
}
.list-table tbody tr.selected {
    background: rgba(236, 72, 153, 0.14) !important;
    outline: 1px solid rgba(236, 72, 153, 0.55);
    outline-offset: -1px;
}
.list-table tbody tr.dim {
    opacity: 0.28;
}

.release-link {
    color: var(--magenta);
    text-decoration: none;
}
.release-link:hover { text-decoration: underline; }

.list-table td {
    padding: 0.55rem 0.9rem;
    color: var(--ink-soft);
    vertical-align: middle;
}
.list-table td.col-title {
    color: var(--ink);
    font-weight: 500;
    padding-left: 1.25rem;
}
.list-table td.col-title small {
    display: block;
    color: var(--muted);
    font-weight: 400;
    font-size: 0.72rem;
    margin-top: 1px;
}
.score-bar {
    display: inline-block;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    width: 56px;
    height: 6px;
    margin-left: 0.45rem;
    vertical-align: middle;
    overflow: hidden;
}
.score-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--elec), var(--magenta));
}
.flag-pill {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 500;
    margin-right: 0.3rem;
    background: rgba(255,255,255,0.04);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}
.flag-pill.stems { color: var(--ember); border-color: rgba(245,158,11,0.4); }
.flag-pill.live { color: var(--elec); border-color: rgba(59,130,246,0.4); }
.flag-pill.best { color: var(--magenta); border-color: rgba(236,72,153,0.4); }
.flag-pill.upd { color: var(--ink-soft); }

.status-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.05);
    color: var(--ink-soft);
}
.status-pill.released        { background: rgba(251,191,36,0.18); color: #fde68a; }
.status-pill.scheduled       { background: rgba(236,72,153,0.18); color: #f9a8d4; }
.status-pill.release-ready   { background: rgba(59,130,246,0.20); color: #93c5fd; }
.status-pill.candidate       { background: rgba(96,165,250,0.18); color: #93c5fd; }
.status-pill.sketch          { background: rgba(100,116,139,0.18); color: #cbd5e1; }
.status-pill.not-for-release { background: rgba(75,85,99,0.18); color: #9ca3af; opacity: 0.8; }
.status-pill.tba             { background: rgba(245,158,11,0.18); color: #fbbf24; }

.mood-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.05);
    color: var(--ink-soft);
}

.tags-cell {
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.3;
}
.tags-cell .tag-mini {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: rgba(59,130,246,0.18);
    color: var(--elec);
    font-size: 0.7rem;
    margin: 0 0.25rem 0.15rem 0;
}

.list-footer {
    padding: 0.55rem 1.25rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    background: rgba(10,10,20,0.85);
    border-top: 1px solid var(--line);
}

/* ---- Phase 2: annotations form ---- */

.ann-saved-flash {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    color: var(--green);
    opacity: 0;
    transition: opacity 200ms ease;
    text-transform: none;
    letter-spacing: 0;
}
.ann-saved-flash.show { opacity: 1; }

.annotation-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.4rem;
}

.ann-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ann-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
}

.ann-field select,
.ann-field textarea,
.ann-field input[type="text"],
.ann-field input[type="url"] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 120ms, background-color 120ms;
}

.ann-field select { cursor: pointer; }

.ann-field select:focus,
.ann-field textarea:focus,
.ann-field input[type="text"]:focus,
.ann-field input[type="url"]:focus {
    border-color: var(--elec);
    background: rgba(59, 130, 246, 0.07);
}

.ann-field textarea {
    resize: vertical;
    min-height: 5rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.45;
}

.ann-hint {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: 0.4rem;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}
.audio-btn {
    background: rgba(59, 130, 246, 0.16);
    color: var(--elec);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, opacity 120ms;
}
.audio-btn:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.28);
    border-color: rgba(59, 130, 246, 0.65);
}
.audio-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.audio-status {
    font-size: 0.72rem;
    color: var(--muted);
}
.audio-status.audio-status-error {
    color: #fca5a5;
}

/* Tag input */

.tag-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.4rem 0.4rem 0.4rem 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    transition: border-color 120ms, background-color 120ms;
    min-height: 2.4rem;
}
.tag-input:focus-within {
    border-color: var(--elec);
    background: rgba(59, 130, 246, 0.07);
}

.tag-pills {
    display: contents;  /* let pills participate in tag-input flex layout */
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(59, 130, 246, 0.18);
    color: var(--elec);
    border-radius: 999px;
    padding: 0.18rem 0.55rem 0.18rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.tag-pill button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    opacity: 0.65;
}
.tag-pill button:hover { opacity: 1; color: var(--magenta); }

#ann-tag-input {
    flex: 1;
    min-width: 6rem;
    background: transparent;
    border: 0;
    padding: 0.2rem;
    font-size: 0.85rem;
    color: var(--ink);
    outline: none;
}
#ann-tag-input::placeholder { color: var(--muted); }

/* Bottom actions in panel */

.panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.4rem;
}
.panel-actions .btn-secondary {
    flex: 1 1 auto;
    min-width: 9rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
}
.btn-secondary.active {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.55);
    color: var(--ember);
}
.btn-secondary {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line-warm);
    color: var(--ink);
}

/* Manual-edges list inside the side panel */

.edge-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.edge-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.18);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--ink-soft);
}
.edge-list li .edge-info { flex: 1; min-width: 0; }
.edge-list li .edge-other { color: var(--ink); font-weight: 500; word-break: break-word; }
.edge-list li .edge-label { color: var(--ember); font-size: 0.72rem; }
.edge-list li button {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.2rem;
    flex-shrink: 0;
}
.edge-list li button:hover { color: var(--magenta); }

/* Toast (transient feedback) */

.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;
    z-index: 30;
    background: rgba(17, 18, 31, 0.94);
    color: var(--ink);
    padding: 0.55rem 1rem;
    border: 1px solid var(--line-warm);
    border-radius: 8px;
    font-size: 0.8rem;
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms, transform 200ms;
}
.toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(-4px);
}

/* ---- Player bar (persistent, full-width, sits above .hud-bottom) ---- */

.player-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 38px;
    height: 104px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(180deg, rgba(15,16,28,0.78) 0%, rgba(10,10,20,0.92) 100%);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(245, 158, 11, 0.18);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.32);
    color: var(--ink);
}

.player-art {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    image-rendering: -webkit-optimize-contrast;
}

.player-meta {
    flex: 0 1 220px;
    min-width: 0;
    overflow: hidden;
}
.player-title {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink);
}
.player-sub {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.player-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 999px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, color 120ms, transform 120ms;
    padding: 0;
}
.player-btn:hover { background: rgba(255,255,255,0.06); }
.player-btn:active { transform: scale(0.94); }
.player-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.player-btn.player-play {
    width: 44px;
    height: 44px;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
    font-size: 1.15rem;
}
.player-btn.player-play:hover {
    background: rgba(245, 158, 11, 0.28);
    border-color: rgba(245, 158, 11, 0.7);
}

.player-scrub-wrap {
    flex: 1 1 auto;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.player-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    color: var(--muted);
    flex: 0 0 auto;
    min-width: 38px;
    text-align: center;
}

.player-scrub {
    position: relative;
    flex: 1 1 auto;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,0.025);
    cursor: pointer;
    user-select: none;
}
.player-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.player-progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.04));
    border-right: 1.5px solid rgba(245,158,11,0.85);
    pointer-events: none;
    transition: width 80ms linear;
}
.player-handle {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fbbf24;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(245,158,11,0.6);
    pointer-events: none;
}
.player-snap-hint {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(96, 165, 250, 0.95);
    background: rgba(59, 130, 246, 0.18);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms;
}
.player-scrub.is-snapping .player-snap-hint { opacity: 1; }

.player-rate-wrap {
    flex: 0 0 auto;
    padding: 0 0.4rem;
}
.player-rate {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    color: var(--muted);
}
.player-rate.is-changed { color: #fbbf24; }

.player-volume {
    position: relative;
    flex: 0 0 auto;
}
.player-volume-popout {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(15,16,28,0.96);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.7rem 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms, transform 120ms;
    z-index: 26;
}
.player-volume:hover .player-volume-popout,
.player-volume.is-open .player-volume-popout {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(-2px);
}
.player-volume-popout input[type="range"] {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 18px;
    height: 90px;
    margin: 0;
}

.player-queue-btn {
    flex: 0 0 auto;
}
.player-queue-btn.is-active {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

/* ---- Queue drawer (slide from right) ---- */

.queue-drawer {
    position: fixed;
    top: var(--content-top, 64px);
    right: 0;
    bottom: 142px;
    width: 340px;
    max-width: 92vw;
    z-index: 24;
    background: rgba(13,14,24,0.97);
    backdrop-filter: blur(14px);
    border-left: 1px solid var(--line-warm);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.queue-drawer[aria-hidden="false"] { transform: translateX(0); }

.queue-drawer-header {
    padding: 1.1rem 1.1rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: rgba(13,14,24,0.97);
    z-index: 1;
}
.queue-drawer-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}
.queue-close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.1rem 0.6rem;
    border-radius: 6px;
}
.queue-close:hover { color: var(--ink); background: rgba(255,255,255,0.04); }

.queue-section {
    padding: 0.5rem 0.6rem 0.7rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.queue-section h4 {
    margin: 0.4rem 0.4rem 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.queue-section.queue-now h4 { color: #fbbf24; }

.queue-clear {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    transition: background-color 120ms, color 120ms;
}
.queue-clear:hover { background: rgba(255,255,255,0.04); color: var(--ink); }

.queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.queue-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 100ms;
    user-select: none;
}
.queue-row:hover { background: rgba(255,255,255,0.04); }
.queue-row.is-current {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
}
.queue-row.is-dragging { opacity: 0.4; }
.queue-row.is-drop-target { outline: 1.5px dashed rgba(245,158,11,0.6); }

.queue-thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    flex: 0 0 auto;
    background: rgba(255,255,255,0.04);
}
.queue-row-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.queue-row-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.queue-row-sub {
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.1rem;
}
.queue-row-x {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 100ms, color 100ms;
}
.queue-row:hover .queue-row-x { opacity: 1; }
.queue-row-x:hover { color: #fca5a5; background: rgba(252,165,165,0.08); }

.queue-empty {
    padding: 0.6rem 0.7rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
}

/* ---- Filter mode toggle (next to search) ---- */

.filter-mode-toggle {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    transition: color 120ms, border-color 120ms, background-color 120ms;
}
.filter-mode-toggle:hover {
    color: var(--ink);
    border-color: rgba(245,158,11,0.45);
    background: rgba(245,158,11,0.06);
}
.filter-mode-toggle.is-hide {
    color: #fbbf24;
    border-color: rgba(245,158,11,0.5);
    background: rgba(245,158,11,0.1);
}
.filter-mode-icon {
    font-size: 0.95rem;
    line-height: 1;
}

/* Pipeline card dim state for filter-mode=dim with non-match */
.pipeline-card.is-dim { opacity: 0.32; }

/* ---- Stage indicator (7 dots) ---- */

.stage-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.stage-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    transition: background-color 120ms, box-shadow 120ms, transform 120ms;
}
.stage-dot + .stage-dot { margin-left: -1px; }
.stage-dot-on { background: rgba(96,165,250,0.5); }
.stage-dot-cur { transform: scale(1.4); }
.stage-label {
    font-size: 0.72rem;
    color: var(--muted);
    margin-left: 0.4rem;
}
td.col-stage { min-width: 160px; }

/* counts cell in list view (T/S/A) */
td .counts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

/* Per-row identicon thumbnail (left edge of list & tracks views) */
td.col-art, th.col-art {
    width: 44px;
    padding: 0.3rem 0.4rem;
}
.row-art {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
}

/* Per-row action buttons (▶ / +) at the far right */
td.col-actions, th.col-actions {
    width: 60px;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}
.row-action {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.18rem 0.45rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 100ms, border-color 100ms, background-color 100ms;
    margin-right: 0.15rem;
}
.row-action:hover {
    color: var(--ember);
    border-color: rgba(245,158,11,0.45);
    background: rgba(245,158,11,0.06);
}
.row-action:last-child { margin-right: 0; }

/* Side-panel album art at the top */
.panel-art-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
}
.panel-art-wrap {
    position: relative;
}
.panel-art {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.panel-gen-art {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,16,28,0.85);
    color: var(--ink);
    border: 1px solid rgba(245,158,11,0.4);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms, background-color 120ms, border-color 120ms;
    backdrop-filter: blur(6px);
}
.panel-art-wrap:hover .panel-gen-art,
.panel-gen-art:focus {
    opacity: 1;
}
.panel-gen-art:hover {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.7);
    color: #fbbf24;
}

/* ---- Side-panel stage section ---- */

.panel-stage {
    margin: 0.4rem 0 1.2rem;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line);
}
.panel-stage-row {
    margin-bottom: 0.55rem;
}
.panel-stage-row .stage-indicator { gap: 0.5rem; }
.panel-stage-row .stage-dot { width: 9px; height: 9px; }
.panel-stage-row .stage-label { font-size: 0.78rem; color: var(--ink); font-weight: 500; }
.panel-stage-override {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.panel-stage-override > span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.panel-stage-override select {
    background: rgba(255,255,255,0.04);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
}

/* ---- Tracks list inside side panel ---- */

.panel-counts {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: 0.3rem;
}
.panel-tracks, .panel-ableton {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.panel-track-row, .panel-ableton-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 5px;
    font-size: 0.78rem;
}
.panel-track-row.is-stem { opacity: 0.78; }
.panel-track-row.is-current { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.05); }
.panel-track-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}
.panel-track-title {
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panel-track-sub {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}
.panel-track-actions {
    display: flex;
    gap: 0.25rem;
    flex: 0 0 auto;
}
.panel-track-actions button {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.18rem 0.5rem;
    font-size: 0.72rem;
    cursor: pointer;
}
.panel-track-actions button:hover { color: var(--ink); border-color: rgba(245,158,11,0.4); }

.panel-ableton-row a {
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.panel-ableton-row a:hover { color: var(--elec); }
.panel-ableton-row .als-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.panel-ableton-row .als-display {
    color: var(--ink);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panel-ableton-row .als-mtime {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted);
}
.panel-ableton-row .als-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.25rem;
}
.panel-ableton-row .als-actions button {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.18rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1;
}
.panel-ableton-row .als-open:hover {
    color: var(--ember);
    border-color: rgba(245,158,11,0.5);
}
.panel-ableton-row .als-remove:hover {
    color: #fca5a5;
    border-color: rgba(252,165,165,0.5);
}

/* Picker / add row */
.panel-ableton-edit {
    list-style: none;
    margin-top: 0.4rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.als-add-details {
    flex: 1 1 auto;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.35rem 0.55rem;
}
.als-add-details summary {
    cursor: pointer;
    font-size: 0.74rem;
    color: var(--muted);
    user-select: none;
    list-style: none;
}
.als-add-details summary::-webkit-details-marker { display: none; }
.als-add-details[open] summary { color: var(--ember); }
.als-add-body {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.als-add-search {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
}
.als-add-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 220px;
    overflow-y: auto;
}
.als-add-result {
    padding: 0.3rem 0.45rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.74rem;
    transition: background-color 100ms;
}
.als-add-result:hover {
    background: rgba(245,158,11,0.10);
}
.als-add-result .als-display {
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.als-add-result .als-mtime {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}
.als-add-empty {
    color: var(--muted);
    font-style: italic;
    font-size: 0.74rem;
    padding: 0.3rem 0.45rem;
}
.als-reset {
    flex: 0 0 auto;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.35rem 0.55rem;
    font-size: 0.74rem;
    cursor: pointer;
}
.als-reset:hover {
    color: var(--ember);
    border-color: rgba(245,158,11,0.45);
}

/* ---- Pipeline view (Kanban) ---- */

.pipeline-view {
    position: fixed;
    top: var(--content-top, 64px);
    bottom: 142px;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pipeline-view.hidden { display: none; }
.pipeline-header {
    padding: 1.1rem 1.5rem 0.5rem;
}
.pipeline-title {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
}
.pipeline-sub { color: var(--muted); font-size: 0.78rem; margin: 0; }

.pipeline-board {
    flex: 1 1 auto;
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 1rem 1rem;
    overflow-x: auto;
    align-items: stretch;
}
.pipeline-col {
    flex: 1 0 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 120ms, background-color 120ms;
}
.pipeline-col.is-drop-over {
    border-color: rgba(245,158,11,0.6);
    background: rgba(245,158,11,0.06);
}
.pipeline-col-head {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.pipeline-col-head .col-count {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.7rem;
}
.pipeline-col-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.pipeline-card {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.4rem 0.5rem;
    background: rgba(13,14,24,0.7);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    cursor: grab;
    transition: border-color 120ms, transform 120ms;
}
.pipeline-card:hover { border-color: rgba(245,158,11,0.45); }
.pipeline-card.is-dragging { opacity: 0.4; }
.pipeline-card canvas {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex: 0 0 auto;
}
.pipeline-card-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.pipeline-card-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pipeline-card-sub {
    font-size: 0.68rem;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}

/* ---- Tracks view: same chrome as List view ---- */

.tracks-view td.col-num { font-family: 'JetBrains Mono', monospace; }
.tracks-view tr.is-stem { opacity: 0.7; }
.tracks-view tr.is-stem .col-title::after {
    content: ' · stem';
    font-size: 0.7rem;
    color: var(--muted);
    margin-left: 0.4rem;
}

/* ---- Collapsible <details> ann sections (Music details / Lyrics / etc) ---- */

.ann-section {
    margin-top: 0.5rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
}
.ann-section > summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--muted);
    user-select: none;
    list-style: none;
    padding: 0.15rem 0;
}
.ann-section > summary::-webkit-details-marker { display: none; }
.ann-section[open] > summary {
    color: var(--ember);
    border-bottom: 1px dashed rgba(245,158,11,0.18);
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
}
.ann-section .ann-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.ann-section .ann-field {
    margin: 0;
}
.ann-section .ann-field-inline {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 0.6rem;
}
.ann-section .ann-field-inline > .ann-label {
    font-size: 0.7rem;
}
.ann-section input[type="text"],
.ann-section input[type="url"],
.ann-section input[type="number"],
.ann-section select,
.ann-section textarea {
    background: rgba(255,255,255,0.04);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    font-family: inherit;
}
.ann-section textarea {
    resize: vertical;
    min-height: 4em;
    font-family: 'Inter', sans-serif;
    line-height: 1.45;
}
.ann-section input[type="number"] {
    font-family: 'JetBrains Mono', monospace;
    max-width: 80px;
}

/* ---- Credits section (song side panel) ---- */

.panel-credits {
    margin: 0.5rem 0 1.2rem;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line);
}
.credits-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
}
.credit-explicit, .credit-default {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
}
.credit-explicit { color: #fbbf24; background: rgba(245,158,11,0.15); }
.credit-default  { color: var(--muted); background: rgba(255,255,255,0.04); }
.credit-reset {
    margin-left: auto;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.18rem 0.45rem;
    font-size: 0.7rem;
    cursor: pointer;
}
.credit-reset:hover { color: var(--ember); border-color: rgba(245,158,11,0.45); }

.credit-section { margin-bottom: 0.6rem; }
.credit-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 0.3rem;
}
.credit-list {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.credit-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 5px;
    font-size: 0.8rem;
}
.credit-row.is-ghost { opacity: 0.6; }
.credit-row .credit-actions {
    margin-left: auto;
    display: flex;
    gap: 0.2rem;
}
.credit-row .credit-actions button {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    font-size: 0.72rem;
    cursor: pointer;
    line-height: 1;
}
.credit-row .credit-actions button:hover { color: var(--ember); border-color: rgba(245,158,11,0.45); }
.credit-row .credit-role {
    flex: 0 1 110px;
    background: rgba(255,255,255,0.04);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.18rem 0.4rem;
    font-size: 0.72rem;
}
.credit-row .credit-role:disabled { opacity: 0.45; }
.credit-ghost-tag {
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.credit-add-details summary {
    font-size: 0.74rem;
    color: var(--muted);
}

/* ---- Band pill (used in list view + credits) ---- */
.band-pill {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--bc, #4B5563) 25%, transparent);
    color: var(--bc, #4B5563);
    border: 1px solid color-mix(in srgb, var(--bc, #4B5563) 50%, transparent);
}

/* ---- Artist credit (used in list + credits) ---- */
.artist-credit {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--ink);
    font-size: 0.78rem;
    margin-right: 0.3rem;
}
.artist-credit small {
    color: var(--muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---- List view band/artists columns ---- */
td.col-band, th[data-sort="band"] {
    min-width: 110px;
}
td.col-artists, th[data-sort="artists"] {
    min-width: 140px;
    font-size: 0.78rem;
}

/* ---- Profiles view (artists / bands grids) ---- */

.profiles-view {
    overflow-y: auto;
}
.profiles-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.7rem;
    padding: 0.5rem 1rem 1rem;
    overflow-y: auto;
}
.profile-card {
    background: rgba(13,14,24,0.7);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--accent, rgba(245,158,11,0.5));
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    transition: border-color 120ms, transform 120ms;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.profile-card:hover { border-color: rgba(245,158,11,0.45); }
.profile-card-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.profile-name {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
}
.profile-default {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    background: rgba(255,255,255,0.05);
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
}
.profile-card-sub {
    font-size: 0.74rem;
    color: var(--muted);
}
.profile-card-bio {
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.4;
    max-height: 4.4em;
    overflow: hidden;
}
.profile-card-stats {
    display: flex;
    gap: 0.8rem;
    font-size: 0.74rem;
    color: var(--muted);
}
.profile-card-stats strong { color: var(--ink); font-weight: 600; }
.profile-card-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

/* ---- Profile overlay (artist / band side panel) ---- */
.profile-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 142px;
    width: 380px;
    max-width: 90vw;
    z-index: 22;
    background: rgba(17,18,31,0.96);
    backdrop-filter: blur(12px);
    border-left: 1px solid var(--line-warm);
    overflow-y: auto;
    transform: translateX(0);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.profile-overlay.hidden { transform: translateX(100%); }

/* ---- Review view: triage one song at a time ---- */

.review-view {
    position: fixed;
    top: var(--content-top, 64px);
    bottom: 142px;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.review-view.hidden { display: none; }

.review-header {
    padding: 0.9rem 1.5rem 0.6rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.review-progress { flex: 1 1 auto; }
.review-progress-bar {
    height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.review-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #F59E0B);
    transition: width 240ms ease-out;
}
.review-progress-text {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}

.review-controls {
    display: flex;
    gap: 0.8rem;
    flex: 0 0 auto;
}
.review-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.review-controls select {
    background: rgba(255,255,255,0.04);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
}

.review-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.2rem 1.5rem;
}
.review-empty, .review-done {
    text-align: center;
    color: var(--muted);
    padding: 4rem 2rem;
}
.review-done h2 {
    font-family: 'Space Grotesk', Inter, sans-serif;
    color: var(--ink);
    font-size: 1.4rem;
    margin: 0 0 0.5rem;
}
.review-done p {
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.5;
}

.review-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.review-art-col {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.review-art {
    width: 280px;
    height: 280px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.review-art-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
}
.review-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.review-meta-row .dim { color: var(--muted); }

.review-form-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.review-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.review-title {
    margin: 0;
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 1.6rem;
    color: var(--ink);
    word-break: break-word;
}
.stage-pill {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--ink);
    flex: 0 0 auto;
}
.stage-pill-ableton_only { background: rgba(107,114,128,0.18); color: #9ca3af; }
.stage-pill-drafts { background: rgba(96,165,250,0.18); color: #93c5fd; }
.stage-pill-polishing { background: rgba(59,130,246,0.18); color: #60a5fa; }
.stage-pill-mastered { background: rgba(168,85,247,0.18); color: #c4b5fd; }
.stage-pill-ready { background: rgba(236,72,153,0.18); color: #f9a8d4; }
.stage-pill-scheduled { background: rgba(245,158,11,0.18); color: #fbbf24; }
.stage-pill-released { background: rgba(251,191,36,0.20); color: #fde68a; }
.stage-pill-parked { background: rgba(75,85,99,0.18); color: #9ca3af; opacity: 0.8; }

.review-sub {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.review-section {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.review-section-title {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ember);
    font-weight: 500;
}

.review-section .ann-field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.review-section .ann-field-inline {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 0.6rem;
}
.review-section .ann-label {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.review-section input[type="text"],
.review-section input[type="url"],
.review-section input[type="number"],
.review-section select,
.review-section textarea {
    background: rgba(255,255,255,0.04);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
}
.review-section textarea {
    resize: vertical;
    min-height: 4em;
    line-height: 1.45;
}

.review-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.review-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
}
.review-grid-2 .ann-field, .review-grid-4 .ann-field { display: flex; flex-direction: column; }

.review-quick-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Credits & identity meta-section in Review view */
.review-meta-section {
    /* Slightly emphasised — this is the "fix the song's identity" zone */
    border-color: rgba(96,165,250,0.35);
    background: rgba(96,165,250,0.04);
}
.review-meta-section .review-section-title { color: #93c5fd; }
.rc-row {
    margin-bottom: 0.2rem;
}
.review-artist-list {
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.review-artist-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.55rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 5px;
}
.review-artist-list li.rc-empty {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
    justify-content: center;
}
.review-artist-list .rc-artist-name {
    color: var(--ink);
    flex: 0 0 auto;
    font-size: 0.85rem;
}
.review-artist-list .rc-artist-role {
    flex: 1 1 auto;
    background: rgba(255,255,255,0.04);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.22rem 0.45rem;
    font-size: 0.78rem;
}
.review-artist-list .rc-artist-remove {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1;
}
.review-artist-list .rc-artist-remove:hover {
    color: #fca5a5;
    border-color: rgba(252,165,165,0.5);
    background: rgba(252,165,165,0.08);
}

.rc-als-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
}
.rc-als-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.06);
    border-radius: 4px;
}
.rc-als-list .rc-als-path {
    flex: 1 1 auto;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
}
.rc-als-list .rc-als-remove {
    flex: 0 0 auto;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
}
.rc-als-list .rc-als-remove:hover {
    color: #fca5a5;
    border-color: rgba(252,165,165,0.5);
}

.review-cover-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.cover-cost-hint {
    font-size: 0.72rem;
    color: var(--muted);
}
.review-quick {
    background: rgba(245,158,11,0.10);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.4);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
}
.review-quick:hover {
    background: rgba(245,158,11,0.22);
    border-color: rgba(245,158,11,0.7);
}

.review-footer {
    border-top: 1px solid var(--line);
    padding: 0.7rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(13,14,24,0.7);
    backdrop-filter: blur(6px);
}
.review-shortcuts {
    color: var(--muted);
    font-size: 0.74rem;
}
.review-shortcuts kbd {
    background: rgba(255,255,255,0.06);
    color: var(--ink);
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    margin: 0 0.05rem;
}
.review-actions {
    display: flex;
    gap: 0.5rem;
}
.review-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
}
.review-btn:hover { background: rgba(255,255,255,0.04); }
.review-btn-park {
    color: #fca5a5;
    border-color: rgba(252,165,165,0.4);
}
.review-btn-park:hover { background: rgba(252,165,165,0.10); border-color: rgba(252,165,165,0.7); }

/* Park-as dropdown */
.review-park-group {
    position: relative;
    display: inline-flex;
}
.review-park-group .review-btn-park:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}
.review-park-menu-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 0.4rem;
    padding-right: 0.5rem;
    border-left-width: 1px;
    border-left-color: rgba(252,165,165,0.18);
}
.review-park-menu {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    right: 0;
    min-width: 200px;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: rgba(15, 16, 28, 0.96);
    border: 1px solid rgba(252,165,165,0.3);
    border-radius: 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    z-index: 30;
}
.review-park-menu li {
    padding: 0.45rem 0.7rem;
    border-radius: 4px;
    color: var(--ink);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 100ms;
}
.review-park-menu li:hover {
    background: rgba(252, 165, 165, 0.10);
    color: #fca5a5;
}
.review-btn-next {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.5);
    color: #fbbf24;
}
.review-btn-next:hover {
    background: rgba(245,158,11,0.30);
    border-color: rgba(245,158,11,0.8);
}

.review-state-reviewed { color: #fde68a; }
.review-state-passed { color: #fca5a5; }
.review-state-not.review-state-not { color: var(--muted); }

/* Tighter on narrow viewports */
@media (max-width: 880px) {
    .review-card { grid-template-columns: 1fr; }
    .review-art-col { flex-direction: row; align-items: flex-start; gap: 1rem; }
    .review-art { width: 160px; height: 160px; }
    .review-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ---- Star Fighter mode ---- */

.fighter-hud {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    display: none;
}
.fighter-hud[aria-hidden="false"] {
    display: block;
}
.fighter-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(245, 158, 11, 0.7);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.45), inset 0 0 6px rgba(245, 158, 11, 0.25);
}
.fighter-crosshair::before, .fighter-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(245, 158, 11, 0.7);
}
.fighter-crosshair::before {
    width: 2px; height: 10px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.fighter-crosshair::after {
    width: 10px; height: 2px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

.fighter-info {
    position: absolute;
    left: 50%;
    top: calc(50% + 36px);
    transform: translateX(-50%);
    max-width: 380px;
    pointer-events: none;
    color: var(--ink);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    text-align: center;
}
.fighter-info-prompt {
    font-size: 0.78rem;
    color: var(--muted);
    background: rgba(13, 14, 24, 0.6);
    padding: 0.4rem 0.7rem;
    border-radius: 5px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.06);
}
.fighter-info-card {
    background: rgba(13, 14, 24, 0.78);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    transition: border-color 200ms, box-shadow 200ms;
}
.fighter-info-card.locked {
    border-color: rgba(245, 158, 11, 0.65);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.3);
}
.fighter-info-title {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.fighter-info-meta {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.fighter-info-stats {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}
.fighter-info-stats .lock-on { color: #fbbf24; }
.fighter-info-stats .lock-off { color: rgba(96, 165, 250, 0.85); }

/* Crosshair gets a subtle pulse when pointer-lock is engaged */
.fighter-hud[aria-hidden="false"] .fighter-info.is-locked ~ .fighter-crosshair,
body.fighter-mode .fighter-crosshair {
    animation: fighter-crosshair-pulse 1.6s ease-in-out infinite;
}
@keyframes fighter-crosshair-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.45), inset 0 0 6px rgba(245, 158, 11, 0.25); }
    50%      { box-shadow: 0 0 22px rgba(245, 158, 11, 0.75), inset 0 0 10px rgba(245, 158, 11, 0.45); }
}

.fighter-shortcuts {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: rgba(13, 14, 24, 0.6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    color: var(--muted);
    font-size: 0.74rem;
    pointer-events: none;
}
.fighter-shortcuts kbd {
    background: rgba(255,255,255,0.06);
    color: var(--ink);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    border: 1px solid rgba(255,255,255,0.08);
    margin: 0 0.05rem;
}

/* Pilot mode hides cursor (pointer-lock); casual keeps it visible
   with a grab/grabbing cursor for drag-to-look. */
body.fighter-mode.fighter-mode-pilot #graph,
body.fighter-mode.fighter-mode-pilot #graph canvas {
    cursor: none;
}
body.fighter-mode.fighter-mode-casual #graph,
body.fighter-mode.fighter-mode-casual #graph canvas {
    cursor: grab;
}
body.fighter-mode.fighter-mode-casual #graph.fighter-dragging,
body.fighter-mode.fighter-mode-casual #graph.fighter-dragging canvas {
    cursor: grabbing;
}

/* ---- Combat HUD: shield (top-left) ---- */
.fighter-shield-panel {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(13, 14, 24, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    min-width: 200px;
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
}
.fighter-shield-label {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(96, 165, 250, 0.85);
    margin-bottom: 0.3rem;
}
.fighter-shield-bar {
    height: 6px;
    background: rgba(96, 165, 250, 0.12);
    border-radius: 3px;
    overflow: hidden;
}
.fighter-shield-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 100%);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
    transition: width 120ms linear, background 200ms;
}
.fighter-shield-fill.is-low {
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
}
.fighter-shield-fill.is-critical {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.8);
    animation: shield-critical-pulse 0.6s ease-in-out infinite;
}
@keyframes shield-critical-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
.fighter-shield-num {
    font-size: 0.7rem;
    color: var(--ink);
    margin-top: 0.25rem;
    text-align: right;
}

/* ---- Combat HUD: status (top-right) ---- */
.fighter-status-panel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(13, 14, 24, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    min-width: 160px;
    pointer-events: auto;
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.fighter-status-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.72rem;
}
.fighter-status-label {
    color: var(--muted);
    letter-spacing: 0.1em;
    font-size: 0.6rem;
}
.fighter-status-value {
    color: var(--ink);
    font-weight: 600;
}
.fighter-status-value.flash {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
}
/* Hide wave row in calm mode */
body.fighter-mode-calm #fighter-wave-row {
    display: none;
}
.fighter-status-panel .fighter-exit-btn {
    margin-top: 0.25rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    width: 100%;
}

/* The exit button used to live in its own panel — collapse the legacy
 * .fighter-controls slot now that the button is inside the status panel. */
.fighter-controls { display: none; }

/* ---- Combat HUD: gear panel (deprecated — single speed now) ---- */
.fighter-gear-panel { display: none; }
.fighter-gear-panel-legacy {
    position: absolute;
    bottom: 5.4rem;     /* clear of player bar */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-family: 'JetBrains Mono', monospace;
}
.fighter-gear-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}
.fighter-gear-pill {
    background: rgba(13, 14, 24, 0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    min-width: 130px;
    color: var(--muted);
    font-size: 0.72rem;
    transition: all 160ms;
    opacity: 0.55;
}
.fighter-gear-pill .g-num {
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.fighter-gear-pill.active {
    opacity: 1;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.6);
    color: #fbbf24;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}
.fighter-gear-pill.active .g-num { color: #fbbf24; }
.fighter-speed-readout {
    font-size: 0.7rem;
    color: var(--muted);
    background: rgba(13, 14, 24, 0.6);
    border-radius: 3px;
    padding: 0.15rem 0.5rem;
    margin-top: 0.15rem;
}

/* ---- Death banner ---- */
.fighter-death-banner {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    display: none;
    font-family: 'Space Grotesk', Inter, sans-serif;
}
.fighter-death-banner[aria-hidden="false"] {
    display: block;
    animation: death-banner-in 220ms ease-out;
}
@keyframes death-banner-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.fighter-death-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #ef4444;
    text-shadow: 0 0 24px rgba(239, 68, 68, 0.6), 0 2px 12px rgba(0,0,0,0.8);
    letter-spacing: 0.06em;
}
.fighter-death-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    margin-top: 0.4rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
    font-family: 'JetBrains Mono', monospace;
}

/* ---- Mode-select modal ---- */
.fighter-modeselect {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 14, 0.78);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 10;
}
.fighter-modeselect[aria-hidden="false"] { display: flex; }
.fighter-modeselect-card {
    background: rgba(13, 14, 24, 0.92);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 14px;
    padding: 2rem 2.4rem;
    max-width: 720px;
    width: calc(100% - 3rem);
    box-shadow: 0 20px 80px rgba(0,0,0,0.7);
    text-align: center;
    animation: modeselect-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes modeselect-in {
    from { opacity: 0; transform: scale(0.94) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.fighter-modeselect-title {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}
.fighter-modeselect-sub {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 1.6rem;
    font-family: 'JetBrains Mono', monospace;
}
.fighter-modeselect-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.fighter-modeselect-btn {
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 10px;
    padding: 1.4rem 1.2rem;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: all 180ms;
}
.fighter-modeselect-btn:hover {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2);
}
.fighter-modeselect-btn.fmsb-hostile {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.4);
}
.fighter-modeselect-btn.fmsb-hostile:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.85);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.22);
}
.fmsb-name {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    color: #fbbf24;
}
.fighter-modeselect-btn.fmsb-hostile .fmsb-name {
    color: #fca5a5;
}
.fmsb-desc {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--muted);
}
.fighter-modeselect-section-label {
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(168, 232, 232, 0.65);
    margin-bottom: 0.45rem;
    margin-top: 0.4rem;
}
.fighter-modeselect-ctrl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.fighter-modeselect-ctrl-btn {
    background: rgba(8, 12, 16, 0.32);
    border: 1px solid rgba(168, 232, 232, 0.25);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: all 160ms;
    backdrop-filter: blur(2px);
}
.fighter-modeselect-ctrl-btn:hover {
    background: rgba(168, 232, 232, 0.12);
    border-color: rgba(168, 232, 232, 0.55);
}
.fighter-modeselect-ctrl-btn.is-selected {
    background: rgba(168, 232, 232, 0.16);
    border-color: rgba(168, 232, 232, 0.85);
    box-shadow: 0 0 14px rgba(168, 232, 232, 0.18);
}
.fighter-modeselect-ctrl-btn .fmsb-name {
    color: rgba(168, 232, 232, 0.95);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.fighter-modeselect-ctrl-btn.is-selected .fmsb-name {
    color: rgba(168, 232, 232, 1);
}
.fighter-modeselect-foot {
    color: var(--muted);
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
}
.fighter-modeselect-foot kbd {
    background: rgba(255,255,255,0.06);
    color: var(--ink);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    border: 1px solid rgba(255,255,255,0.1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}

/* ---- Mobile block (shown when ?view=fighter on touch device) ---- */
.fighter-mobile-block {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 14, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 12;
    padding: 1.5rem;
}
.fighter-mobile-block[aria-hidden="false"] { display: flex; }
.fighter-mobile-card {
    background: rgba(13, 14, 24, 0.94);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 1.6rem 1.4rem;
    max-width: 420px;
    text-align: center;
}
.fighter-mobile-title {
    font-size: 1.15rem;
    color: #fbbf24;
    margin-bottom: 0.6rem;
    font-family: 'Space Grotesk', Inter, sans-serif;
}
.fighter-mobile-sub {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 1.2rem;
}
.fighter-mobile-back {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: 6px;
    padding: 0.55rem 1.2rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.fighter-mobile-back:hover {
    background: rgba(96, 165, 250, 0.32);
}

/* ---- Key guide panel (left side, toggleable) ---- */
.fighter-keyguide {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 320px;
    background: rgba(13, 14, 24, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    color: var(--ink);
    pointer-events: auto;
    font-family: 'JetBrains Mono', monospace;
    display: none;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}
.fighter-keyguide[aria-hidden="false"] {
    display: block;
    animation: keyguide-in 200ms ease-out;
}
@keyframes keyguide-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
.fighter-keyguide-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.4rem;
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: #fbbf24;
}
.fighter-keyguide-hint {
    font-size: 0.65rem;
    color: var(--muted);
    letter-spacing: 0;
}
.fighter-keyguide-section {
    margin-bottom: 0.7rem;
}
.fighter-keyguide-section:last-child { margin-bottom: 0; }
.fighter-keyguide-title {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: rgba(96, 165, 250, 0.85);
    margin-bottom: 0.35rem;
}
.kg-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    margin-bottom: 0.25rem;
    color: var(--muted);
}
.kg-row kbd {
    background: rgba(255,255,255,0.08);
    color: var(--ink);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    font-size: 0.68rem;
    font-family: 'JetBrains Mono', monospace;
    min-width: 1.2rem;
    text-align: center;
}
.kg-row .mouse-icon {
    background: rgba(96, 165, 250, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    color: #93c5fd;
    font-size: 0.7rem;
    min-width: 1.6rem;
    text-align: center;
}
.kg-row .muted { color: rgba(255,255,255,0.4); font-size: 0.7rem; }
.kg-row span:last-child { flex: 1; color: var(--muted); }

/* ---- Hide ★ Fighter tab on touch-only / coarse-pointer devices ---- */
@media (hover: none) and (pointer: coarse) {
    .fighter-tab { display: none !important; }
}

/* ============================================================
 * Casual control mode — hide the heavy cockpit HUD chrome.
 * Keeps: shield panel, status panel, target callout, reticle,
 *        cooldown rings, lead indicator, threat boxes.
 * Drops: pitch ladder, heading tape, side speed/dist tapes,
 *        gear panel, octagonal frame + corner brackets,
 *        side tick rails, velocity vector, pitch caret,
 *        damage direction arcs.
 * ============================================================ */
body.fighter-mode-casual #hud-pitch-ladder,
body.fighter-mode-casual .hud-heading-tape,
body.fighter-mode-casual .hud-tape-left,
body.fighter-mode-casual .hud-tape-right,
body.fighter-mode-casual .fighter-gear-panel,
body.fighter-mode-casual .hud-frame,
body.fighter-mode-casual .hud-frame-inner,
body.fighter-mode-casual .hud-corner,
body.fighter-mode-casual .hud-tick-rail,
body.fighter-mode-casual .hud-vvector,
body.fighter-mode-casual .hud-heading-caret,
body.fighter-mode-casual .hud-damage-dirs,
body.fighter-mode-casual #fighter-shortcuts-pilot {
    display: none !important;
}
/* In casual, the on-screen target callout sits a hair higher (no
 * cockpit frame to anchor against). */
body.fighter-mode-casual .fighter-info {
    top: calc(50% + 28px);
}

/* ============================================================
 * Release modal (workspace admin → holdenu.com Worker)
 * ============================================================ */
.release-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(5, 6, 14, 0.65);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.release-modal[aria-hidden="false"] { display: flex; }

.release-card {
    background: rgba(13, 14, 24, 0.94);
    border: 1px solid rgba(168, 232, 232, 0.4);
    border-radius: 10px;
    padding: 1.4rem 1.6rem;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                0 0 28px rgba(168, 232, 232, 0.08) inset;
    color: var(--ink);
    animation: release-card-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes release-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.release-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid rgba(168, 232, 232, 0.15);
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
}
.release-card-title {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(251, 191, 36, 1);
    margin: 0 0 0.2rem;
}
.release-card-sub {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}
.release-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ink);
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.release-close:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.release-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem;
    margin-bottom: 0.5rem;
}
.release-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.release-field-wide { grid-column: span 2; }
.release-field span {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.65rem;
    color: rgba(168, 232, 232, 0.7);
}
.release-field input,
.release-field select {
    background: rgba(8, 12, 16, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: var(--ink);
    padding: 0.5rem 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}
.release-field input:focus,
.release-field select:focus {
    outline: none;
    border-color: rgba(168, 232, 232, 0.55);
    box-shadow: 0 0 8px rgba(168, 232, 232, 0.12);
}

.release-section {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.7rem 0.9rem 0.85rem;
    margin: 0 0 0.85rem;
}
.release-section legend {
    color: rgba(168, 232, 232, 0.85);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    padding: 0 0.4rem;
}

.release-tracks {
    list-style: none;
    margin: 0 0 0.55rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 30px;
}
.release-track-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(8, 12, 16, 0.5);
    border: 1px solid rgba(168, 232, 232, 0.18);
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}
.release-track-row-deep {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}
.release-track-row-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.release-track-row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px dashed rgba(168, 232, 232, 0.12);
    padding-top: 0.4rem;
}
.release-upload-status {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}
.release-upload-status.is-pending { color: rgba(255, 255, 255, 0.45); }
.release-upload-status.is-busy    { color: rgba(168, 232, 232, 0.95); }
.release-upload-status.is-ok      { color: rgba(110, 231, 183, 0.95); }
.release-upload-status.is-err     { color: #fca5a5; }
.release-upload-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.release-upload-btn {
    background: rgba(168, 232, 232, 0.08);
    border: 1px solid rgba(168, 232, 232, 0.35);
    color: rgba(168, 232, 232, 0.95);
    border-radius: 3px;
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    line-height: 1;
}
.release-upload-btn:hover {
    background: rgba(168, 232, 232, 0.18);
    border-color: rgba(168, 232, 232, 0.7);
}
.release-upload-pick {
    display: inline-flex;
    align-items: center;
}

.release-artwork-row {
    display: flex;
    gap: 0.85rem;
    align-items: stretch;
}
.release-artwork-preview {
    width: 96px;
    height: 96px;
    border: 1px dashed rgba(168, 232, 232, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.66rem;
    text-align: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    flex: 0 0 96px;
}
.release-artwork-preview.has-image .release-artwork-placeholder { display: none; }
.release-artwork-placeholder {
    padding: 0.4rem;
    line-height: 1.3;
    font-family: 'JetBrains Mono', monospace;
}
.release-artwork-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
}
.release-track-order {
    color: rgba(168, 232, 232, 0.55);
    width: 1.4rem;
    text-align: right;
}
.release-track-title {
    flex: 1;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.release-track-stage {
    color: rgba(168, 232, 232, 0.7);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.release-track-remove {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--muted);
    width: 22px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}
.release-track-remove:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.5);
}

.release-add-track-row {
    position: relative;
}
.release-track-search {
    width: 100%;
    background: rgba(8, 12, 16, 0.6);
    border: 1px dashed rgba(168, 232, 232, 0.4);
    border-radius: 4px;
    color: var(--ink);
    padding: 0.5rem 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}
.release-track-search:focus {
    outline: none;
    border-style: solid;
    border-color: rgba(168, 232, 232, 0.7);
}
.release-track-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.2rem;
    background: rgba(8, 12, 16, 0.96);
    border: 1px solid rgba(168, 232, 232, 0.3);
    border-radius: 4px;
    list-style: none;
    padding: 0.25rem;
    max-height: 220px;
    overflow-y: auto;
    z-index: 5;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.release-track-suggest[hidden] { display: none; }
.release-track-suggest li {
    padding: 0.4rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.release-track-suggest li:hover,
.release-track-suggest li.is-active {
    background: rgba(168, 232, 232, 0.12);
}
.release-track-suggest .ts-stage {
    color: rgba(168, 232, 232, 0.6);
    font-size: 0.66rem;
}

.release-audio-note {
    color: var(--muted);
    font-size: 0.74rem;
    background: rgba(168, 232, 232, 0.06);
    border: 1px dashed rgba(168, 232, 232, 0.25);
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    margin: 0 0 0.85rem;
}

.release-status {
    min-height: 1.4rem;
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
}
.release-status.is-error { color: #fca5a5; }
.release-status.is-ok    { color: rgba(110, 231, 183, 0.95); }
.release-status.is-busy  { color: rgba(168, 232, 232, 0.85); }

.release-card-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid rgba(168, 232, 232, 0.1);
    padding-top: 0.85rem;
}
.release-card-foot button {
    padding: 0.55rem 1.1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: 'Space Grotesk', Inter, sans-serif;
    letter-spacing: 0.04em;
}
.release-card-foot .btn-primary {
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.7);
    color: #fbbf24;
}
.release-card-foot .btn-primary:hover {
    background: rgba(251, 191, 36, 0.32);
    color: #fcd34d;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.25);
}
.release-card-foot .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.release-card-foot .btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ink);
}
.release-card-foot .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Public mode hides this entirely as a safety net */
body.is-public .release-modal { display: none !important; }

/* ============================================================
 * Side-panel "released on holdenu.com" bar — cross-promo + PWYW buy
 * ============================================================ */
.panel-holdenu { margin: 0.7rem 0; }
.panel-holdenu:empty { display: none; }
.panel-holdenu-card {
    background: rgba(8, 12, 16, 0.45);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.06) inset;
    font-family: 'JetBrains Mono', monospace;
}
.panel-holdenu-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}
.panel-holdenu-tag {
    color: rgba(251, 191, 36, 1);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    font-weight: 700;
}
.panel-holdenu-rel {
    color: var(--muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 60%;
}

.panel-holdenu-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.panel-holdenu-link {
    flex: 1;
    min-width: 5.5rem;
    text-align: center;
    background: rgba(168, 232, 232, 0.06);
    border: 1px solid rgba(168, 232, 232, 0.3);
    color: rgba(168, 232, 232, 0.95);
    border-radius: 3px;
    padding: 0.35rem 0.6rem;
    font-size: 0.74rem;
    text-decoration: none;
    transition: all 120ms;
}
.panel-holdenu-link:hover {
    background: rgba(168, 232, 232, 0.18);
    border-color: rgba(168, 232, 232, 0.7);
    color: #ECECEC;
}
.panel-holdenu-link-bandcamp { border-color: rgba(99, 158, 169, 0.55); color: #aaccd8; }
.panel-holdenu-link-spotify  { border-color: rgba(110, 231, 183, 0.55); color: #99e9c0; }
.panel-holdenu-link-apple    { border-color: rgba(252, 165, 165, 0.55); color: #fcb6b6; }

.panel-holdenu-status {
    color: rgba(110, 231, 183, 0.95);
    font-size: 0.78rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.panel-holdenu-date { color: var(--muted); font-size: 0.7rem; }

/* PWYW buy form */
.panel-holdenu-buy {
    background: rgba(251, 191, 36, 0.05);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
}
.panel-holdenu-buy-label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: rgba(251, 191, 36, 0.95);
    font-size: 0.72rem;
}
.panel-holdenu-buy-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(8, 12, 16, 0.7);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
}
.panel-holdenu-buy-currency {
    color: rgba(251, 191, 36, 0.85);
    font-weight: 700;
}
.panel-holdenu-buy-row input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    padding: 0.1rem 0;
    outline: none;
}
.panel-holdenu-buy-row .btn-primary {
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.7);
    color: #fbbf24;
    border-radius: 3px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}
.panel-holdenu-buy-row .btn-primary:hover {
    background: rgba(251, 191, 36, 0.32);
}
.panel-holdenu-buy-row .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.panel-holdenu-buy-status {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--muted);
}
.panel-holdenu-buy-status.is-busy { color: rgba(168, 232, 232, 0.95); }
.panel-holdenu-buy-status.is-err  { color: #fca5a5; }

/* ============================================================
 * Public mode (holdenu.com) — hide all edit chrome. Phase 1.
 * ============================================================ */

/* Workspace-only navigation tabs */
body.is-public [data-view="review"] { display: none !important; }

/* Filter-bar workspace controls */
body.is-public #filter-mode-toggle { display: none !important; }

/* Side-panel: kill the entire annotation/edit form, the gen-art
 * button, the pipeline-stage override, and the contenteditable
 * affordances. Title still shows but isn't editable. */
body.is-public #annotation-form,
body.is-public #panel-gen-art,
body.is-public .panel-stage-override,
body.is-public #panel-stage-indicator { display: none !important; }
body.is-public #panel-title {
    cursor: default;
    /* Keep text selectable for copy, but neutralize the "click to edit"
     * affordance — JS also sets contenteditable=false. */
}
body.is-public #panel-title:hover,
body.is-public #panel-title:focus {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Artist + band views: hide creation buttons */
body.is-public .new-artist-btn,
body.is-public .new-band-btn,
body.is-public .pipeline-header-row button[id^="new-"] {
    display: none !important;
}

/* Review view affordances are inside review-view itself — blocked
 * by setView, but if any stragglers leak, neutralize them */
body.is-public .review-park-menu,
body.is-public .review-park-menu-btn { display: none !important; }

/* Audio "no playable" status: still meaningful for released tracks
 * that lack a master URL, but for silhouettes we hide audio buttons
 * entirely in the side panel. */
body.is-public .ann-audio-controls { display: none !important; }

/* ============================================================
 * Cockpit HUD — F-35 / TIE-fighter style overlay
 * ============================================================ */

/* Phosphor-cyan accent for HUD lines, amber for combat, red critical */
:root {
    --hud-cyan: 168, 232, 232;     /* rgb tuple, used with rgba(var()) */
    --hud-cyan-dim: 168, 232, 232;
    --hud-amber: 251, 191, 36;
    --hud-red: 239, 68, 68;
}

.hud-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    /* Subtle CRT-glow on every line */
    filter: drop-shadow(0 0 1.5px rgba(168, 232, 232, 0.55))
            drop-shadow(0 0 6px rgba(168, 232, 232, 0.18));
}
.hud-overlay * { vector-effect: non-scaling-stroke; }

.hud-frame {
    fill: none;
    stroke: rgba(var(--hud-cyan), 0.32);
    stroke-width: 1;
    stroke-linejoin: round;
}
.hud-frame-inner {
    stroke: rgba(var(--hud-cyan), 0.18);
    stroke-width: 0.5;
    stroke-dasharray: 1 3;
}

.hud-corner polyline {
    fill: none;
    stroke: rgba(var(--hud-cyan), 0.85);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hud-tick-rail line {
    stroke: rgba(var(--hud-cyan), 0.3);
    stroke-width: 0.4;
}
.hud-tick-marks line {
    stroke: rgba(var(--hud-cyan), 0.7);
    stroke-width: 0.7;
}
.hud-tick-marks text {
    fill: rgba(var(--hud-cyan), 0.85);
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.4px;
    text-anchor: middle;
}

.hud-pitch-ladder {
    /* Updated each frame via JS: transform attribute */
    transition: none;
}
.hud-pitch-ladder line,
.hud-pitch-ladder polyline {
    fill: none;
    stroke: rgba(var(--hud-cyan), 0.7);
    stroke-width: 0.55;
    stroke-linecap: round;
}
.hud-pitch-ladder .pitch-zero line {
    stroke: rgba(var(--hud-cyan), 0.9);
    stroke-width: 0.85;
}
.hud-pitch-ladder text {
    fill: rgba(var(--hud-cyan), 0.85);
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.4px;
}
.hud-pitch-ladder .pitch-down line {
    stroke-dasharray: 1.5 1.5;
}

.hud-heading-caret polygon {
    fill: rgba(var(--hud-amber), 0.85);
}

.hud-reticle line {
    stroke: rgba(var(--hud-amber), 0.9);
    stroke-width: 0.7;
    stroke-linecap: round;
}
.hud-reticle-dot {
    fill: rgba(var(--hud-amber), 0.95);
}
body.fighter-mode .hud-reticle line {
    animation: hud-reticle-pulse 1.6s ease-in-out infinite;
}
@keyframes hud-reticle-pulse {
    0%, 100% { stroke: rgba(var(--hud-amber), 0.85); }
    50%      { stroke: rgba(var(--hud-amber), 1); }
}

.hud-vvector circle {
    fill: none;
    stroke: rgba(120, 255, 200, 0.85);
    stroke-width: 0.6;
}
.hud-vvector line {
    stroke: rgba(120, 255, 200, 0.85);
    stroke-width: 0.6;
}

.hud-target-bracket polyline {
    fill: none;
    stroke: rgba(var(--hud-amber), 0.95);
    stroke-width: 1.3;
    stroke-linecap: round;
}
.hud-target-bracket.in-range polyline {
    stroke: rgba(var(--hud-amber), 1);
    animation: hud-target-pulse 0.9s ease-in-out infinite;
}
@keyframes hud-target-pulse {
    0%, 100% { stroke-width: 1.3; }
    50%      { stroke-width: 2.1; }
}

/* ---- Heading tape (top center) ---- */
.hud-heading-tape {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 26px;
    overflow: hidden;
    border: 1px solid rgba(var(--hud-cyan), 0.35);
    border-radius: 4px;
    background: rgba(8, 12, 16, 0.45);
    backdrop-filter: blur(4px);
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
}
.hud-heading-tape::before {
    /* Center notch indicator */
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 8px;
    background: rgba(var(--hud-amber), 0.95);
    box-shadow: 0 0 6px rgba(var(--hud-amber), 0.6);
}
.hud-heading-strip {
    position: absolute;
    inset: 0;
    color: rgba(var(--hud-cyan), 0.85);
    font-size: 0.78rem;
    text-align: left;
    white-space: nowrap;
}
.hud-heading-strip span {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -38%);
    width: 36px;
    text-align: center;
}
.hud-heading-strip span.cardinal {
    color: rgba(var(--hud-amber), 0.95);
    font-weight: 700;
}

/* ---- Side tapes (speed left, distance right) ---- */
.hud-tape {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(8, 12, 16, 0.45);
    border: 1px solid rgba(var(--hud-cyan), 0.35);
    border-radius: 4px;
    padding: 0.45rem 0.55rem;
    min-width: 76px;
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    backdrop-filter: blur(4px);
    color: rgba(var(--hud-cyan), 0.95);
    box-shadow: 0 0 12px rgba(var(--hud-cyan), 0.05) inset;
}
.hud-tape-left  { left: 1rem; }
.hud-tape-right { right: 1rem; }
.hud-tape-label {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(var(--hud-cyan), 0.6);
}
.hud-tape-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    margin: 0.15rem 0;
    color: rgba(var(--hud-cyan), 1);
    text-shadow: 0 0 6px rgba(var(--hud-cyan), 0.4);
}
.hud-tape-unit {
    font-size: 0.6rem;
    color: rgba(var(--hud-cyan), 0.55);
    letter-spacing: 0.1em;
}

/* ---- Repaint the existing top-corner panels in the cockpit palette ---- */
.fighter-shield-panel {
    background: rgba(8, 12, 16, 0.5);
    border: 1px solid rgba(var(--hud-cyan), 0.35);
    color: rgba(var(--hud-cyan), 0.95);
    backdrop-filter: blur(4px);
}
.fighter-shield-label {
    color: rgba(var(--hud-cyan), 0.65);
}
.fighter-shield-bar {
    background: rgba(var(--hud-cyan), 0.1);
}
.fighter-shield-fill {
    background: linear-gradient(90deg, rgba(var(--hud-cyan), 0.95), rgba(var(--hud-cyan), 0.7));
    box-shadow: 0 0 8px rgba(var(--hud-cyan), 0.5);
}
.fighter-status-panel {
    background: rgba(8, 12, 16, 0.5);
    border: 1px solid rgba(var(--hud-cyan), 0.35);
    backdrop-filter: blur(4px);
}
.fighter-status-label { color: rgba(var(--hud-cyan), 0.55); }
.fighter-status-value { color: rgba(var(--hud-cyan), 1); }
.fighter-status-value.flash { color: rgba(var(--hud-amber), 1); }

.fighter-gear-panel { color: rgba(var(--hud-cyan), 0.85); }
.fighter-gear-pill {
    background: rgba(8, 12, 16, 0.4);
    border-color: rgba(var(--hud-cyan), 0.25);
    color: rgba(var(--hud-cyan), 0.65);
}
.fighter-gear-pill.active {
    background: rgba(var(--hud-amber), 0.12);
    border-color: rgba(var(--hud-amber), 0.55);
    color: rgba(var(--hud-amber), 1);
    box-shadow: 0 0 12px rgba(var(--hud-amber), 0.25);
}
.fighter-speed-readout {
    color: rgba(var(--hud-cyan), 0.7);
    background: rgba(8, 12, 16, 0.4);
}

/* ---- Translucent central-text elements (target info, mode-select,
       death banner, key guide) ---- */
.fighter-info-prompt {
    display: inline-block;
    background: rgba(8, 12, 16, 0.32);
    border: 1px solid rgba(var(--hud-cyan), 0.25);
    color: rgba(var(--hud-cyan), 0.85);
    backdrop-filter: blur(2px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    padding: 0.3rem 0.7rem;
    border-radius: 3px;
}

/* ============================================================
 * Target callout — minimal, transparent, floats under reticle
 * ============================================================ */
.fighter-info-card.target-card {
    display: inline-block;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    color: rgba(var(--hud-cyan), 0.85);
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.fighter-info-card.target-card.ti-locked {
    color: rgba(var(--hud-amber), 0.95);
}
.ti-title {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}
.fighter-info-card.target-card.ti-locked .ti-title {
    color: rgba(255, 248, 220, 0.96);
    text-shadow: 0 0 6px rgba(var(--hud-amber), 0.35),
                 0 1px 4px rgba(0, 0, 0, 0.85);
}
.ti-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.66rem;
    color: rgba(var(--hud-cyan), 0.7);
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}
.ti-sep {
    color: rgba(var(--hud-cyan), 0.35);
}
.ti-meta-band {
    color: rgba(255, 255, 255, 0.85);
}
.ti-meta-stage.stage-pill-drafts    { color: rgba(252, 211, 77,  0.9); }
.ti-meta-stage.stage-pill-mastered  { color: rgba(110, 231, 183, 0.9); }
.ti-meta-stage.stage-pill-ready     { color: rgba(96, 165, 250,  0.9); }
.ti-meta-stage.stage-pill-scheduled { color: rgba(165, 180, 252, 0.9); }
.ti-meta-stage.stage-pill-released  { color: rgba(244, 114, 182, 0.9); }
.ti-meta-stage.stage-pill-parked    { color: rgba(148, 163, 184, 0.8); }
.ti-meta-range {
    color: rgba(var(--hud-cyan), 0.95);
}
.fighter-info-card.target-card.ti-locked .ti-meta-range {
    color: rgba(var(--hud-amber), 1);
}
.ti-status {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: rgba(var(--hud-amber), 0.95);
    margin-top: 0.2rem;
}

.fighter-modeselect {
    background: rgba(5, 6, 14, 0.45);
    backdrop-filter: blur(6px);
}
.fighter-modeselect-card {
    background: rgba(8, 12, 16, 0.42);
    border: 1px solid rgba(var(--hud-cyan), 0.4);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5),
                0 0 30px rgba(var(--hud-cyan), 0.1) inset;
    backdrop-filter: blur(6px);
}
.fighter-modeselect-title {
    color: rgba(var(--hud-amber), 1);
    text-shadow: 0 0 12px rgba(var(--hud-amber), 0.3);
}
.fighter-modeselect-sub {
    color: rgba(var(--hud-cyan), 0.7);
}
.fighter-modeselect-btn {
    background: rgba(8, 12, 16, 0.32);
    border: 1px solid rgba(var(--hud-cyan), 0.4);
    backdrop-filter: blur(2px);
}
.fighter-modeselect-btn:hover {
    background: rgba(var(--hud-cyan), 0.08);
    border-color: rgba(var(--hud-cyan), 0.85);
    box-shadow: 0 8px 24px rgba(var(--hud-cyan), 0.15);
}
.fighter-modeselect-btn .fmsb-name {
    color: rgba(var(--hud-cyan), 1);
}
.fighter-modeselect-btn.fmsb-hostile {
    background: rgba(var(--hud-red), 0.05);
    border-color: rgba(var(--hud-red), 0.4);
}
.fighter-modeselect-btn.fmsb-hostile:hover {
    background: rgba(var(--hud-red), 0.1);
    border-color: rgba(var(--hud-red), 0.85);
    box-shadow: 0 8px 24px rgba(var(--hud-red), 0.18);
}
.fighter-modeselect-btn.fmsb-hostile .fmsb-name {
    color: rgba(252, 165, 165, 1);
}

.fighter-death-title {
    color: rgba(var(--hud-red), 1);
    text-shadow: 0 0 24px rgba(var(--hud-red), 0.6),
                 0 2px 12px rgba(0,0,0,0.8);
    background: rgba(8, 12, 16, 0.32);
    border: 1px solid rgba(var(--hud-red), 0.5);
    border-radius: 4px;
    padding: 0.55rem 1.4rem;
    display: inline-block;
    backdrop-filter: blur(2px);
}
.fighter-death-sub {
    color: rgba(255, 255, 255, 0.78);
    background: rgba(8, 12, 16, 0.28);
    border-radius: 3px;
    padding: 0.25rem 0.7rem;
    display: inline-block;
    margin-top: 0.4rem;
    backdrop-filter: blur(2px);
}

.fighter-keyguide {
    background: rgba(8, 12, 16, 0.5);
    border: 1px solid rgba(var(--hud-cyan), 0.35);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.92);
}
.fighter-keyguide-head {
    color: rgba(var(--hud-amber), 0.95);
    border-bottom-color: rgba(var(--hud-cyan), 0.18);
}
.fighter-keyguide-title { color: rgba(var(--hud-cyan), 0.85); }

/* ---- Vignette / scanlines for that CRT cockpit feel ---- */
body.fighter-mode #graph::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 25;
    background:
        radial-gradient(ellipse at center,
            transparent 50%,
            rgba(0, 0, 0, 0.35) 100%),
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 3px);
}

/* ---- Old crosshair pulse (the SVG reticle replaces it) ---- */
.fighter-crosshair[hidden] { display: none; }

/* ============================================================
 * Combat HUD: threat boxes, arrows, hit feedback, kill feed
 * ============================================================ */

/* ---- Hostile ship threat boxes ---- */
.hud-threat-boxes .threat-box {
    fill: none;
    stroke: rgba(var(--hud-red), 0.9);
    stroke-width: 0.7;
    stroke-linecap: round;
    stroke-linejoin: miter;
}
.hud-threat-boxes .threat-corner {
    fill: none;
    stroke: rgba(var(--hud-red), 1);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: miter;
}
.hud-threat-boxes .threat-hp-bg {
    fill: rgba(0, 0, 0, 0.4);
}
.hud-threat-boxes .threat-hp {
    fill: rgba(var(--hud-red), 0.9);
}
.hud-threat-boxes .threat-label {
    fill: rgba(var(--hud-red), 1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.4px;
    text-anchor: start;
}
.hud-threat-boxes .threat-range {
    fill: rgba(var(--hud-red), 0.85);
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.0px;
    text-anchor: end;
}
.hud-threat-boxes .threat-locked .threat-corner {
    stroke-width: 1.5;
    animation: threat-locked-pulse 0.8s ease-in-out infinite;
}
@keyframes threat-locked-pulse {
    0%, 100% { stroke: rgba(var(--hud-red), 0.85); }
    50%      { stroke: rgba(var(--hud-amber), 1); }
}

/* ---- Off-screen threat arrows ---- */
.hud-threat-arrows polygon {
    fill: rgba(var(--hud-red), 0.85);
    stroke: rgba(var(--hud-red), 1);
    stroke-width: 0.4;
}
.hud-threat-arrows text {
    fill: rgba(var(--hud-red), 0.95);
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.4px;
    text-anchor: middle;
}

/* ---- Lead indicator ---- */
.hud-lead circle {
    fill: rgba(var(--hud-amber), 0.18);
    stroke: rgba(var(--hud-amber), 0.95);
    stroke-width: 0.6;
}
.hud-lead line {
    stroke: rgba(var(--hud-amber), 0.95);
    stroke-width: 0.6;
    stroke-linecap: round;
}

/* ---- Damage direction arcs ---- */
.hud-damage-dirs path {
    fill: rgba(var(--hud-red), 0.5);
    stroke: rgba(var(--hud-red), 0.95);
    stroke-width: 0.4;
    stroke-linecap: round;
}

/* ---- Weapon cooldown rings around reticle ---- */
.hud-cooldowns circle {
    transform-origin: 0 0;
}
.hud-cd-primary-bg, .hud-cd-secondary-bg {
    stroke: rgba(var(--hud-cyan), 0.18);
    stroke-width: 0.5;
    stroke-dasharray: 50 100;     /* half-arc */
}
.hud-cd-primary-bg { transform: rotate(-90deg); }
.hud-cd-secondary-bg { transform: rotate(90deg); }
.hud-cd-primary {
    stroke: rgba(var(--hud-cyan), 0.85);
    stroke-width: 1.0;
    stroke-linecap: round;
    transition: stroke-dashoffset 60ms linear;
}
.hud-cd-secondary {
    stroke: rgba(var(--hud-amber), 0.85);
    stroke-width: 1.0;
    stroke-linecap: round;
    transition: stroke-dashoffset 60ms linear;
}
.hud-cd-primary.is-cooling   { stroke: rgba(var(--hud-cyan), 0.4); }
.hud-cd-secondary.is-cooling { stroke: rgba(var(--hud-amber), 0.4); }

/* ---- Hit marker X ---- */
.hud-hitmarker line {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 1.2;
    stroke-linecap: round;
}
.hud-hitmarker.kind-kill line {
    stroke: rgba(var(--hud-amber), 1);
    stroke-width: 1.6;
}

/* ---- Kill feed (right column) ---- */
.hud-killfeed {
    position: absolute;
    top: 9.5rem;
    right: 1rem;
    width: 240px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    z-index: 5;
}
.hud-killfeed .kf-row {
    background: rgba(8, 12, 16, 0.5);
    border: 1px solid rgba(var(--hud-cyan), 0.3);
    border-radius: 3px;
    padding: 0.25rem 0.55rem;
    color: rgba(var(--hud-cyan), 0.95);
    font-size: 0.72rem;
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    animation: kf-row-in 220ms ease-out;
}
.hud-killfeed .kf-row.kf-kill {
    border-color: rgba(var(--hud-amber), 0.5);
    color: rgba(var(--hud-amber), 1);
}
.hud-killfeed .kf-row.kf-damage {
    border-color: rgba(var(--hud-red), 0.5);
    color: rgba(252, 165, 165, 0.95);
}
.hud-killfeed .kf-row.fading {
    opacity: 0;
    transition: opacity 600ms;
}
.hud-killfeed .kf-score {
    color: rgba(var(--hud-amber), 0.85);
    font-weight: 700;
}
@keyframes kf-row-in {
    from { transform: translateX(8px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* ---- Critical shield border alarm ---- */
.hud-critical-border {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 6px solid transparent;
    border-radius: 4px;
    box-shadow: inset 0 0 80px rgba(var(--hud-red), 0.0);
    transition: box-shadow 200ms;
}
.hud-critical-border[aria-hidden="false"] {
    border-color: rgba(var(--hud-red), 0.5);
    box-shadow: inset 0 0 80px rgba(var(--hud-red), 0.5);
    animation: critical-border-pulse 0.5s ease-in-out infinite;
}
@keyframes critical-border-pulse {
    0%, 100% {
        border-color: rgba(var(--hud-red), 0.4);
        box-shadow: inset 0 0 60px rgba(var(--hud-red), 0.35);
    }
    50% {
        border-color: rgba(var(--hud-red), 0.85);
        box-shadow: inset 0 0 100px rgba(var(--hud-red), 0.65);
    }
}

/* ---- Lock-warning (incoming bolt threat) ---- */
.hud-lockwarn-text {
    position: absolute;
    top: calc(50% - 100px);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(var(--hud-red), 1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    background: rgba(8, 12, 16, 0.4);
    border: 1px solid rgba(var(--hud-red), 0.7);
    border-radius: 3px;
    padding: 0.25rem 0.7rem;
    backdrop-filter: blur(2px);
    pointer-events: none;
    display: none;
    animation: lockwarn-blink 0.5s steps(2, end) infinite;
}
.hud-lockwarn-text.active { display: block; }
@keyframes lockwarn-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.45; }
}

.fighter-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    pointer-events: auto;
}
.fighter-exit-btn {
    background: rgba(13, 14, 24, 0.78);
    color: var(--ink);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color 120ms, border-color 120ms;
}
.fighter-exit-btn:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

/* When fighter mode is active, hide the rest of the chrome so the
 * 3D field is fully immersive. The HUD and player bar remain. */
body.fighter-mode .hud-top,
body.fighter-mode .hud-bottom,
body.fighter-mode .filter-chips,
body.fighter-mode #side-panel,
body.fighter-mode #queue-drawer,
body.fighter-mode #profile-overlay {
    display: none !important;
}
body.fighter-mode .player-bar {
    bottom: 0;
    opacity: 0.85;
}

/* ---- Tablet (≤720px) ---- */

@media (max-width: 720px) {
    .hud-controls { flex-wrap: wrap; gap: 0.5rem; }
    #search { flex: 1 1 100%; min-width: 0; }
    #side-panel { width: 100%; }
    .queue-drawer { width: 100%; top: 56px; }
    .hud-bottom { font-size: 0.7rem; gap: 0.6rem; padding: 0.4rem 0.6rem; }

    .player-bar { gap: 0.5rem; padding: 0.4rem 0.5rem; }
    .player-art { width: 64px; height: 64px; }
    .player-meta { flex-basis: 120px; }
    .player-rate-wrap { display: none; }
}

/* ---- iPhone / small phones (≤480px) ---- */
/* The explorer's primary UI here: List view to scan songs, player bar
 * to listen, side panel to edit, Review view for triage. Pipeline /
 * Tracks / Calendar / 3D stay accessible but scroll horizontally
 * since they're inherently wide. */

@media (max-width: 480px) {

    /* ---- Top HUD: stack vertically ---- */
    .hud-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0.5rem 0.7rem;
    }
    .hud-brand {
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .hud-brand .brand-meta {
        font-size: 0.7rem;
        white-space: normal;
        line-height: 1.3;
    }
    .hud-controls {
        flex-direction: column;
        gap: 0.4rem;
        align-items: stretch;
        width: 100%;
    }
    #search {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    .hud-mode {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hud-mode .mode-label { flex: 0 0 auto; font-size: 0.65rem; }
    .mode-buttons {
        flex: 1 1 auto;
        display: flex;
        gap: 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mode-buttons::-webkit-scrollbar { display: none; }
    .mode-btn, .view-btn {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0.35rem 0.6rem;
        font-size: 0.78rem;
    }
    #home-btn, #filter-mode-toggle {
        min-width: 36px;
        min-height: 36px;
    }

    /* ---- Filter chips: horizontal scroll ---- */
    .filter-chips {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding: 0.45rem 0.6rem;
        gap: 0.35rem;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    .filter-chips .chip { flex: 0 0 auto; min-height: 32px; }
    .chip-label { flex: 0 0 auto; }

    /* ---- List view: keep all columns, horizontal scroll ---- */
    .list-view, .tracks-view {
        top: 120px;   /* deeper under the stacked HUD */
    }
    .list-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .list-table { min-width: 700px; }   /* preserves all columns; user scrolls */
    td.col-title small { display: block; font-size: 0.66rem; }

    /* ---- 3D / Calendar / Pipeline / Profiles: deeper top + horizontal scroll ---- */
    #graph, .timeline-view, .pipeline-view, .review-view, .profiles-view {
        top: 120px;
    }
    .pipeline-board { padding: 0.4rem 0.5rem 0.6rem; }
    .pipeline-col { flex: 0 0 220px; }

    /* ---- Side panel & queue drawer: full screen ---- */
    #side-panel {
        width: 100%;
        max-width: 100%;
        bottom: 130px;   /* bar (94) + bottom hud (36) */
    }
    .panel-inner { padding: 3.5rem 1rem 2rem; }
    .panel-art { width: 160px; height: 160px; }
    .queue-drawer {
        width: 100%;
        max-width: 100%;
        top: 120px;
        bottom: 130px;
    }

    /* ---- Player bar: compact, prioritize what matters ---- */
    .player-bar {
        height: 94px;
        gap: 0.4rem;
        padding: 0.4rem 0.5rem;
        bottom: 36px;
    }
    .player-art { width: 56px; height: 56px; flex: 0 0 auto; }
    .player-meta {
        flex: 1 1 0;
        min-width: 0;
        max-width: 40%;
    }
    .player-meta .player-title { font-size: 0.84rem; }
    .player-meta .player-sub { font-size: 0.66rem; }
    .player-controls { gap: 0.15rem; }
    .player-btn { width: 34px; height: 34px; font-size: 1rem; }
    .player-btn.player-play { width: 40px; height: 40px; }
    .player-scrub-wrap {
        flex: 1 1 100%;
        order: 10;   /* push below the row of art+meta+controls */
        min-width: 0;
        gap: 0.4rem;
    }
    .player-scrub { height: 22px; }
    .player-time { font-size: 0.66rem; min-width: 30px; }
    .player-rate-wrap { display: none; }
    .player-volume { display: none; }   /* system volume is fine on iPhone */

    /* ---- Bottom HUD: compact + horizontal scroll ---- */
    .hud-bottom {
        font-size: 0.66rem;
        gap: 0.5rem;
        padding: 0.35rem 0.5rem;
        height: 36px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .hud-bottom::-webkit-scrollbar { display: none; }
    .hud-bottom span { flex: 0 0 auto; }
    .hud-bottom kbd { font-size: 0.6rem; padding: 0.05rem 0.3rem; }

    /* ---- Review view: stacks via the 880px rule already, but tighten ---- */
    .review-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding: 0.7rem 0.8rem 0.4rem;
    }
    .review-controls { flex-wrap: wrap; gap: 0.4rem; }
    .review-controls label { flex: 1 1 calc(50% - 0.2rem); }
    .review-body { padding: 0.8rem; }
    .review-card { gap: 1rem; }
    .review-art-col { gap: 0.6rem; }
    .review-art { width: 140px; height: 140px; }
    .review-art-meta { font-size: 0.72rem; }
    .review-grid-4 { grid-template-columns: 1fr 1fr; }
    .review-grid-2 { grid-template-columns: 1fr; }
    .review-section .ann-field-inline { grid-template-columns: 90px 1fr; }
    .review-footer {
        padding: 0.5rem 0.6rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .review-shortcuts { display: none; }   /* keyboard rare on phone */
    .review-actions {
        justify-content: space-between;
        gap: 0.3rem;
        flex-wrap: wrap;
    }
    .review-actions .review-btn {
        flex: 1 1 calc(33% - 0.3rem);
        min-height: 44px;
        padding: 0.5rem 0.5rem;
        font-size: 0.8rem;
    }
    .review-actions .review-btn-next {
        flex: 1 1 100%;
    }

    /* ---- Profile cards: single column ---- */
    .profiles-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        padding: 0.6rem 0.7rem;
    }
    .profile-overlay {
        width: 100%;
        max-width: 100%;
        bottom: 130px;
    }
    .pipeline-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    /* ---- Tracks view: same scroll treatment ---- */
    .tracks-view .list-table { min-width: 700px; }

    /* Touch targets — buttons sized for fingers */
    button, .chip, select, input[type="range"], .ann-field input,
    .ann-field select, .ann-field textarea {
        min-height: 36px;
    }

    /* Hide the cost-hint text under the cover-art button on phones —
     * it crowds the row. Tooltip keeps the info available. */
    .cover-cost-hint { display: none; }
}

/* ---- Pipeline header row layout (used at all widths) ---- */
.pipeline-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-right: 1.5rem;
}
.pipeline-header-title { flex: 1 1 auto; min-width: 0; }
.profile-new-btn {
    flex: 0 0 auto;
    margin-top: 0.6rem;
    background: rgba(245,158,11,0.12);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.45);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
}
.profile-new-btn:hover {
    background: rgba(245,158,11,0.25);
    border-color: rgba(245,158,11,0.7);
}