/* Episode editor, laid out like the "Éditeur" mockup: dark header, player and tracks, zone review,
   transcription next to the Finitions panel, export bar, and the episode's history on the side.
   Tokens come from css/app.css (dark and light themes): no hard-coded colours here. */
:root {
    --hl-hesitation: var(--zone-hesitation);
    --hl-filler: var(--zone-filler);
    --hl-silence: var(--zone-silence);
    --hl-offtopic: var(--zone-offtopic);
    --hl-manual: var(--zone-manual);
    --hl-overlap: var(--zone-overlap);
    --lane-label: 196px;
}

/* The editor uses the whole width: the sidebar gives way to the editor header */
.shell.editor-mode .sidebar { display: none; }
.shell.editor-mode .content { padding: 0; gap: 0; }
#editor-view { display: flex; flex-direction: column; min-height: 100vh; }
#editor-view.hidden { display: none; }

kbd {
    padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .8;
    font: 600 11px var(--font-mono);
}

/* ------------------------------------------------------------ Header */
#project-bar {
    background: var(--inverse); color: var(--on-inverse); padding: 10px 24px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
}
#back-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--target-min);
    color: var(--on-inverse-soft); text-decoration: none; font-size: 14px; font-weight: 500;
}
#back-link:hover { color: var(--on-inverse); }
.editor-title { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; min-width: 0; }
#project-name {
    flex: 0 1 360px; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid transparent;
    border-radius: var(--radius-sm); background: transparent; color: var(--on-inverse);
    font: 600 18px var(--font-display);
}
#project-name:hover, #project-name:focus { border-color: var(--inverse-border); background: var(--inverse-raised); }
#save-status { font-size: 13px; color: var(--on-inverse-muted); white-space: nowrap; }
#save-status[data-status="saved"]::before { content: '✓ '; color: var(--on-inverse-ok); }
#save-status[data-status="error"] { color: var(--on-inverse-error); }
.editor-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.editor-steps .sep { color: var(--on-inverse-muted); }
.editor-steps .step {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill);
    color: var(--on-inverse-muted); text-decoration: none;
}
.editor-steps .step.done::before { content: '✓'; }
.editor-steps .step.is-running::before {
    content: ''; display: inline-block; width: 10px; height: 10px;
    border: 2px solid var(--inverse-border); border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.editor-steps a.step { color: var(--on-inverse-soft); }
.editor-steps a.step:hover { background: var(--inverse-hover); }
.editor-steps .step[aria-current="step"] { background: var(--accent); color: var(--on-accent); padding: 6px 12px; }
.editor-steps .step.later { opacity: .6; cursor: help; }
#project-bar .theme-toggle {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; padding: 0;
    border: 1px solid var(--inverse-border); border-radius: var(--radius-md); background: transparent; color: var(--on-inverse-soft); cursor: pointer;
}
#project-bar .theme-toggle:hover { color: var(--on-inverse); border-color: var(--on-inverse-muted); }
#editor-avatar { width: 32px; height: 32px; font-size: 13px; border: 2px solid var(--inverse); }

/* ------------------------------------------------------------ Layout */
.editor-layout { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px 24px; align-items: flex-start; }
.editor-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ed-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ed-card h2 { font-size: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tb {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--target-min);
    min-width: var(--target-min); padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink); font: 600 14px var(--font-sans); cursor: pointer; white-space: nowrap;
}
.tb:hover:not(:disabled) { border-color: var(--ink-muted); }
.tb:disabled { opacity: .5; cursor: not-allowed; }
.tb.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.tb.dark { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.tb.dark:hover:not(:disabled) { background: var(--solid-hover); border-color: var(--solid-hover); }

/* ------------------------------------------------------------ Player and tracks */
#player-card { overflow: hidden; }
#audio-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
}
#play-pause-btn { background: var(--solid); border-color: var(--solid); color: var(--on-solid); min-width: 92px; }
#play-pause-btn:hover:not(:disabled) { background: var(--solid-hover); border-color: var(--solid-hover); }
#play-time { font: 600 15px var(--font-mono); padding: 0 6px; }
#play-time span { color: var(--ink-muted); font-weight: 400; }
.inline-option { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); font-size: 14px; cursor: pointer; }
.inline-option input { width: 18px; height: 18px; accent-color: var(--accent); }
#waveform-toolbar { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
#waveform-toolbar input[type="range"] { width: 140px; accent-color: var(--ink); }
#zoom-value { font: 13px var(--font-mono); color: var(--ink-muted); min-width: 56px; }

/* Rows share a label column, so the main waveform and the lanes have the same width (same scale) */
.wave-row, .track-row { display: flex; border-bottom: 1px solid var(--divider); }
.wave-row { position: relative; }
/* Over the waveform while the server prepares the tracks (a long episode takes a minute the first time) */
#wave-loading {
    position: absolute; inset: 0 0 0 var(--lane-label); z-index: 5;
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
    background: var(--scrim); color: var(--ink-soft); font-size: 14px; text-align: center;
}
#wave-loading.hidden { display: none; }
#wave-loading.is-error { color: var(--danger-text); }
#wave-loading.is-error .spinner { display: none; }
.lane-label {
    flex: none; width: var(--lane-label); padding: 8px 12px; display: flex; flex-direction: column; gap: 6px;
    border-right: 1px solid var(--divider); background: var(--surface-sunken); font-size: 13px; color: var(--ink-muted);
}
.lane-label strong { font-size: 14px; color: var(--ink); }
#waveform-container { flex: 1; min-width: 0; }
@media (max-width: 700px) {
    :root { --lane-label: 120px; }
}

#waveform-container .wavesurfer-region { cursor: pointer; }
/* Resize handles: only on the hovered or selected zone, wide enough to grab */
#waveform-container .wavesurfer-handle {
    width: 6px !important; background: var(--accent) !important; opacity: 0; transition: opacity 0.1s;
}
#waveform-container .wavesurfer-region:hover .wavesurfer-handle,
#waveform-container .wavesurfer-region.is-selected .wavesurfer-handle { opacity: 1; }
#waveform-container .wavesurfer-region.is-cut {
    background-image: repeating-linear-gradient(135deg, var(--zone-cut) 0 4px, transparent 4px 9px);
}
#waveform-container .wavesurfer-region.type-filler {
    border-left: 1px solid var(--accent); border-right: 1px solid var(--accent);
}
/* Inside a removed zone: already handled, shown faded */
#waveform-container .wavesurfer-region.is-covered { opacity: 0.35; }
#waveform-container .wavesurfer-region.is-kept { box-shadow: inset 0 -4px 0 var(--keep-border); }
#waveform-container .wavesurfer-region.is-selected {
    outline: 2px solid var(--ink); outline-offset: -2px; z-index: 4 !important;
}
#waveform-container .wavesurfer-region.is-hovered {
    outline: 2px dashed var(--ink); outline-offset: -2px; filter: saturate(3) brightness(0.85); z-index: 5 !important;
}
#waveform-container .wavesurfer-region.has-mutes { box-shadow: inset 0 -4px 0 var(--zone-has-mutes); }

/* Multitrack */
body:not(.is-multitrack) .multitrack-only { display: none !important; }
body.is-multitrack .single-only { display: none !important; }
#tracks-warning {
    padding: 8px 14px; background: var(--status-editing-bg); color: var(--status-editing-fg); font-size: 14px; border-bottom: 1px solid var(--divider);
}
.track-row .lane-label { border-left: 4px solid var(--track-color); }
.track-row.is-silent .track-lane { opacity: 0.35; }
.track-name {
    width: 100%; min-height: 32px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; font: 600 14px var(--font-sans); color: var(--ink);
}
.track-name:hover, .track-name:focus { border-color: var(--border-strong); background: var(--surface); }
.track-buttons { display: flex; align-items: center; gap: 4px; }
.track-buttons kbd { margin-right: 2px; color: var(--ink-muted); }
.track-toggle {
    min-width: 36px; min-height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink); font: 700 12px var(--font-sans); cursor: pointer;
}
.track-toggle.track-mute.active { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.track-toggle.track-solo.active { background: var(--solo); border-color: var(--solo); color: var(--on-solo); }
.track-gain { width: 100%; accent-color: var(--track-color); }
.track-gain-label { font: 12px var(--font-mono); color: var(--ink-muted); }
.track-denoise { font-size: 12px; font-weight: 600; color: var(--ink-muted); line-height: 1.3; }
.track-denoise.is-on { color: var(--status-exported-fg); }
.track-lane { flex: 1; min-width: 0; cursor: pointer; }
.track-lane .wavesurfer-region.lane-mute {
    background: repeating-linear-gradient(135deg, var(--zone-muted) 0 4px, var(--zone-muted-gap) 4px 8px) !important;
}
.track-lane .wavesurfer-region.lane-cut {
    background: repeating-linear-gradient(135deg, var(--zone-cut) 0 4px, transparent 4px 9px) !important;
}

#legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; font-size: 13px; color: var(--ink-soft); }
#legend .swatch {
    display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
    border-radius: 3px; border: 1px solid var(--swatch-border);
}
#legend .swatch-filler { background: var(--hl-filler); border-color: var(--accent); }
#legend .swatch-cut { background: repeating-linear-gradient(135deg, var(--zone-cut) 0 3px, var(--surface) 3px 6px); }
#legend .swatch-kept { background: var(--surface); box-shadow: inset 0 -4px 0 var(--keep-border); }
#legend .swatch-muted { background: repeating-linear-gradient(135deg, var(--zone-muted) 0 3px, var(--surface) 3px 6px); }

/* ------------------------------------------------------------ Zone review */
#zone-nav { padding: 14px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.zone-nav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#zone-filter {
    min-height: var(--target-min); padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    font: 14px var(--font-sans); background: var(--surface); color: var(--ink);
}
#zone-nav button.decision.keep { border-color: var(--keep-border); color: var(--keep); }
#zone-nav button.decision.keep.active { background: var(--keep-border); color: var(--on-keep); }
#zone-nav button.decision.cut { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
#zone-nav button.decision.cut:not(.active) { background: var(--surface); color: var(--danger-text); }
#zone-counter { font: 600 14px var(--font-mono); min-width: 64px; text-align: center; }
#zone-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-soft); min-width: 0; flex: 1 1 280px; }
.zone-badge {
    padding: 2px 8px; border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--ink); border: 1px solid var(--swatch-border);
}
.zone-badge.type-silence { background: var(--hl-silence); }
.zone-badge.type-hesitation { background: var(--hl-hesitation); }
.zone-badge.type-filler { background: var(--hl-filler); border-color: var(--accent); }
.zone-badge.type-offtopic { background: var(--hl-offtopic); }
.zone-badge.type-manual { background: var(--hl-manual); }
.zone-badge.type-overlap { background: var(--hl-overlap); }
.zone-time { font-family: var(--font-mono); font-weight: 600; }
.zone-excerpt { font-style: italic; color: var(--ink-muted); }
.zone-reason {
    flex-basis: 100%; padding: 4px 8px; border-left: 3px solid var(--hl-offtopic); background: var(--surface-sunken);
    font-size: 13px;
}
.zone-covered-note { flex-basis: 100%; color: var(--danger-text); font-size: 13px; }
#zone-summary { margin-left: auto; color: var(--ink-muted); font-size: 13px; }
.zone-help { flex-basis: 100%; color: var(--ink-muted); font-size: 12px; }
.zone-help kbd { opacity: .6; }
.zone-mutes-label { color: var(--ink-soft); }
.track-mute-btn { min-height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-left: 4px solid var(--track-color); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; font: 500 13px var(--font-sans); }
.track-mute-btn.active { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.track-mute-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------ Transcription + Finitions */
.ed-split { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
#transcript-card { flex: 3 1 420px; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
#transcription-container {
    height: 320px; overflow-y: auto; font-size: 15px; line-height: 1.8;
}
#transcription-container .word { display: inline-block; }
#transcription-container .word[data-zones] { cursor: pointer; }
#transcription-container .hesitation,
#transcription-container .filler,
#transcription-container .silence,
#transcription-container .offtopic { padding: 0 2px; border-radius: 3px; }
#transcription-container .silence { background-color: var(--hl-silence); }
#transcription-container .offtopic { background-color: var(--hl-offtopic); }
#transcription-container .manual { background-color: var(--hl-manual); }
#transcription-container .overlap { background-color: var(--hl-overlap); }
/* Word-level markers last: the most specific */
#transcription-container .hesitation { background-color: var(--hl-hesitation); }
#transcription-container .filler { background-color: var(--hl-filler); outline: 1px solid var(--accent); }
#transcription-container .word.is-cut { text-decoration: line-through; text-decoration-color: var(--danger); opacity: 0.55; }
#transcription-container .word.is-current { outline: 2px solid var(--ink); }
.transcription-placeholder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-soft); }
.transcription-placeholder small { flex-basis: 100%; color: var(--ink-muted); }
.transcription-placeholder.is-error { color: var(--danger-text); }
.transcription-progress {
    flex-basis: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden;
    background: var(--progress-track); accent-color: var(--accent); appearance: none;
}
.transcription-progress::-webkit-progress-bar { background: var(--progress-track); }
.transcription-progress::-webkit-progress-value { background: var(--accent); }
.transcription-progress::-moz-progress-bar { background: var(--accent); }
.spinner {
    width: 16px; height: 16px; border: 3px solid var(--progress-track); border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.8s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
#correction-container { display: flex; flex-direction: column; gap: 8px; }
#correction-container textarea {
    width: 100%; height: 140px; padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    resize: vertical; font: 14px/1.5 var(--font-sans); background: var(--surface); color: var(--ink);
}
#correction-container .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

#finishing-panel {
    flex: 2 1 320px; min-width: 0; padding: 14px; border: 2px solid var(--ink);
    display: flex; flex-direction: column; gap: 14px;
}
#finishing-panel .card-head { justify-content: flex-start; }
.step-pill { background: var(--solid); color: var(--on-solid); font-size: 11px; padding: 2px 8px; }
.fin-block { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.fin-block:last-child { border-bottom: 0; padding-bottom: 0; }
.fin-title { font-weight: 600; font-size: 14px; }
.fin-note { font-size: 13px; color: var(--ink-muted); margin: 0; }
.fin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.fin-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-row .controls { display: flex; align-items: center; gap: 6px; flex: none; }
.fin-select {
    min-height: 36px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font: 13px var(--font-sans); background: var(--surface); color: var(--ink);
}
.fin-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.filler-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filler-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: 500 13px var(--font-sans); cursor: pointer;
}
.filler-chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.filler-chip.is-on { background: var(--hl-filler); border-color: var(--accent); }
.filler-chip .count { font-family: var(--font-mono); color: var(--ink-muted); }
.fin-block details summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: 32px; display: flex; align-items: center; }
.control-group { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 13px; }
.control-group .control-label, .control-group label { font-weight: 600; }
.control-group .value { font-family: var(--font-mono); color: var(--ink-muted); }
.control-group input[type="range"] { width: 100%; max-width: 240px; accent-color: var(--ink); }
#topic-info { font-size: 13px; color: var(--ink-soft); }
#topic-info .retry-btn { margin-left: 4px; }
.loudness-result { font-size: 13px; color: var(--status-exported-fg); font-weight: 600; }

/* ------------------------------------------------------------ Export bar */
#editor-export {
    background: var(--inverse); color: var(--on-inverse); border-radius: var(--radius-lg); padding: 14px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
#duration-summary { display: flex; flex-direction: column; gap: 2px; flex: 1 1 280px; }
#duration-summary .main { font-weight: 600; }
#duration-summary .sub { font-size: 13px; color: var(--on-inverse-soft); }
#export-result { display: block; font-size: 13px; line-height: 1.5; color: var(--on-inverse-soft); flex: 1 1 260px; }
#export-result .spinner { display: inline-block; vertical-align: -3px; margin-right: 6px; }
#export-result a { color: var(--accent-on-inverse); font-weight: 600; }
#export-result[data-status="error"] { color: var(--on-inverse-error); }
#export-btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#export-btn:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
#status { font-size: 13px; color: var(--ink-muted); padding: 0 4px; }

/* ------------------------------------------------------------ Episode history */
#episode-history {
    flex: 1 1 280px; min-width: 0; max-width: 100%; padding: 14px; display: flex; flex-direction: column; gap: 14px;
}
@media (min-width: 1100px) { #episode-history { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; } }
#episode-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.45; }
#episode-history-list .detail { font-size: 12px; color: var(--ink-muted); }
#episode-history-list .muted { color: var(--ink-muted); }
#episode-history-link { font-size: 14px; font-weight: 600; }
#undo-btn { white-space: normal; text-align: center; line-height: 1.3; padding: 6px 12px; }

/* ------------------------------------------------------------ Read-only (viewers) */
.read-only #export-btn, .read-only #correction-container, .read-only #toggle-correction, .read-only .retry-btn,
.read-only #manual-tag-btn, .read-only .decision, .read-only #zone-reset, .read-only #finishing-panel .edit-only,
.read-only #undo-btn { display: none !important; }
.read-only #project-name, .read-only .track-name { pointer-events: none; }
.read-only #finishing-panel select, .read-only #finishing-panel input { pointer-events: none; opacity: .7; }

/* ------------------------------------------------------------ VU meters (js/vumeter.js) */
/* Colour zones at -12 and -3 dBFS on a -48..+3 dB bar: (48-12)/51 = 70.6 %, (48-3)/51 = 88.2 %, 0 dBFS at 94.1 % */
.vu { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vu-row { display: flex; align-items: center; gap: 6px; }
.vu-bar {
    position: relative; flex: 1; height: 10px; border-radius: 3px; overflow: hidden;
    background: linear-gradient(90deg, var(--meter-ok) 0%, var(--meter-ok-high) 70.6%, var(--meter-warn) 70.6%, var(--meter-warn) 88.2%, var(--meter-clip-low) 88.2%, var(--meter-clip) 100%);
}
.vu-compact .vu-bar { height: 8px; }
/* Covers the part of the bar above the current level, so the colours stay at their dB */
.vu-mask { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; background: var(--meter-track); }
.vu-hold { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.vu-hold.is-hot { background: var(--danger); }
.vu-hold.hidden { display: none; }
.vu-clip {
    flex: none; min-width: 34px; height: 18px; padding: 0 4px; border-radius: 3px; border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink-faint); font: 700 10px var(--font-sans); letter-spacing: 0.04em; cursor: default;
}
.vu-clip.is-on { background: var(--meter-clip); border-color: var(--meter-clip); color: var(--on-accent); cursor: pointer; }
.vu-scale { position: relative; height: 11px; margin-right: 40px; font: 9px var(--font-mono); color: var(--ink-muted); }
.vu-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.vu-scale span:first-child { transform: none; }
.vu-readout {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px;
    font: 11px var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.vu.is-clipped .vu-peak { color: var(--danger-text); font-weight: 700; }
#master-meter:empty { display: none; }

/* After an export: listen to it or go back to editing, then the integrated player */
#export-done, #export-player {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding-top: 12px; border-top: 1px solid var(--inverse-border);
}
#export-done.hidden, #export-player.hidden { display: none; }
.export-done-text { flex: 1 1 240px; font-size: 14px; color: var(--on-inverse-soft); }
.export-done-text strong { color: var(--on-inverse); }
#export-listen-btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#export-listen-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
#editor-export .tb.ghost { background: transparent; border-color: var(--inverse-border); color: var(--on-inverse); }
#editor-export .tb.ghost:hover { background: var(--inverse-hover); }
.export-player-title { font-weight: 600; font-size: 14px; }
#export-audio { flex: 1 1 320px; min-width: 0; height: 40px; }
#export-player-download { color: var(--accent-on-inverse); font-weight: 600; font-size: 14px; }
#export-result .link-button {
    padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent-on-inverse);
    text-decoration: underline; cursor: pointer;
}
#archived-note { flex: 1 1 260px; margin: 0; font-size: 13px; color: var(--on-inverse-soft); }
#archived-note.hidden { display: none; }
#archived-note a { color: var(--accent-on-inverse); font-weight: 600; }
/* Speech average (silences excluded): blue mark on the bar, same colour in the readout and legend */
.vu-avg { position: absolute; top: -1px; bottom: -1px; width: 3px; margin-left: -1.5px; background: var(--meter-avg); box-shadow: 0 0 0 1px var(--meter-avg-ring); }
.vu-avg.hidden { display: none; }
.vu-avg-text { color: var(--meter-avg-text); font-weight: 600; }
.vu-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 11px; color: var(--ink-muted);
}
.vu-legend span { display: inline-flex; align-items: center; gap: 4px; }
.vu-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.vu-legend .sw-level { background: linear-gradient(90deg, var(--meter-ok-high) 0 50%, var(--meter-warn) 50%); }
.vu-legend .sw-hold { width: 2px; background: var(--ink); border-radius: 0; }
.vu-legend .sw-avg { width: 3px; background: var(--meter-avg); border-radius: 0; }
.vu-avg-reset {
    padding: 0; border: 0; background: none; font: inherit; color: var(--accent-link); text-decoration: underline; cursor: pointer;
}
/* Level matching of the speakers */
#match-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 14px;
    border-bottom: 1px solid var(--divider); background: var(--surface-sunken); font-size: 13px;
}
#match-note { color: var(--ink-muted); font-size: 12px; }
.read-only #auto-match { pointer-events: none; }

/* Post-credits marker: where the show's end credits go in at export (a draggable line) */
#waveform-container .wavesurfer-region.post-credits-marker {
    background: none !important; border-left: 3px solid var(--mark-credits); cursor: ew-resize; z-index: 5; overflow: visible;
}
#waveform-container .wavesurfer-region.post-credits-marker::after {
    content: 'Post-générique'; position: absolute; top: 2px; left: 3px; padding: 1px 6px; border-radius: 0 4px 4px 0;
    background: var(--mark-credits); color: var(--on-solid); font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none;
}
#legend .swatch-post-credits { background: var(--surface); border: none; box-shadow: inset 3px 0 0 var(--mark-credits); border-radius: 0; }
#credits-note { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--on-inverse-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#credits-note.hidden { display: none; }
#credits-note a { color: var(--accent-on-inverse); font-weight: 600; }
#credits-note strong { color: var(--on-inverse-violet); }