/* =========================================================
   THSE RECORDER v1.2
   UX FOUNDATION
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {
    --bg-page: #03080b;
    --bg-header: #071014;
    --bg-sidebar: #081115;
    --bg-panel: #0b151a;
    --bg-panel-soft: #0d191f;
    --bg-field: #071014;
    --bg-field-hover: #0a171c;
    --bg-viewer: #020608;
    --bg-overlay: rgba(2, 8, 11, 0.88);
    --bg-viewer-bar: rgba(5, 12, 15, 0.96);
    --bg-placeholder: #020708;
    --viewer-glow: rgba(18, 35, 42, 0.28);
    --placeholder-glow: rgba(34, 64, 72, 0.18);
    --placeholder-line: rgba(238, 243, 241, 0.70);
    --stage-grid: rgba(255, 255, 255, 0.014);
    --bg-header-top: rgba(11, 23, 28, 0.98);
    --bg-header-bottom: rgba(6, 14, 18, 0.98);
    --bg-sidebar-top: rgba(10, 21, 26, 0.98);
    --bg-sidebar-bottom: rgba(7, 15, 19, 0.98);
    --bg-footer-top: rgba(7, 15, 19, 0.98);
    --bg-footer-bottom: rgba(5, 11, 14, 0.99);
    --bg-menu: #0a1419;
    --bg-dialog: #091318;
    --bg-tooltip: #13100a;
    --bg-track: #071014;
    --scroll-thumb: rgba(183, 208, 214, 0.22);
    --scroll-thumb-hover: rgba(183, 208, 214, 0.36);
    /* Notices (toasts): cyan glass in Original; palettes restyle them. */
    --toast-rgb: 127, 211, 242;
    --toast-bg: rgba(6, 16, 21, 0.94);
    --toast-text: #d9f3fc;
    --toast-text-soft: rgba(217, 243, 252, 0.7);
    --toast-text-strong: #ffffff;
    --toast-shadow: rgba(0, 0, 0, 0.45);
    /* Button hover: the fill that glides in (see BUTTON HOVER). */
    --sweep-neutral: rgba(255, 255, 255, 0.06);

    --line-soft: rgba(185, 216, 222, 0.09);
    --line-medium: rgba(185, 216, 222, 0.17);
    --line-strong: rgba(185, 216, 222, 0.3);

    --text-primary: #e6eeee;
    --text-secondary: #9aabad;
    --text-muted: #74888c;
    --text-faint: #55686c;

    --accent-rgb: 217, 164, 65;
    --accent-strong-rgb: 240, 189, 85;
    --accent: #d9a441;
    --accent-soft: rgba(var(--accent-rgb), 0.12);
    --accent-medium: rgba(var(--accent-rgb), 0.26);
    --accent-strong: #f0bd55;
    /* Accent as text (labels, active tabs) and text on accent fills
       (primary buttons): each palette keeps them readable. */
    --accent-ink: var(--accent);
    --accent-ink-strong: var(--accent-strong);
    --accent-hover: var(--accent-strong);
    --on-accent: #15130e;
    --on-danger: #190707;

    --success: #6fd49a;
    --success-rgb: 111, 212, 154;
    --success-soft: rgba(111, 212, 154, 0.12);
    /* The done step of the workflow (header). */
    --success-chip: rgba(111, 212, 154, 0.14);

    --warning: #e1b85a;
    --warning-soft: rgba(225, 184, 90, 0.12);

    --danger: #e46c6c;
    --danger-soft: rgba(228, 108, 108, 0.12);

    --info: #77b6d7;
    --info-soft: rgba(119, 182, 215, 0.12);

    --hud-white: rgba(248, 250, 249, 0.995);
    --hud-muted: rgba(238, 243, 241, 0.84);
    --hud-line: rgba(238, 243, 241, 0.70);
    --hud-line-soft: rgba(238, 243, 241, 0.40);
    --hud-rec: #ff4a43;

    --font-ui:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-mono:
        "IBM Plex Mono",
        "Roboto Mono",
        Consolas,
        "Courier New",
        monospace;

    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;

    --shadow-small:
        0 4px 16px rgba(0, 0, 0, 0.22);

    --shadow-medium:
        0 16px 48px rgba(0, 0, 0, 0.34);

    --shadow-large:
        0 24px 80px rgba(0, 0, 0, 0.5);

    --header-height: 56px;
    --viewer-toolbar-height: 54px;
    --viewer-footer-height: 34px;

    --sidebar-width: 390px;
    --sidebar-min-width: 300px;
    --sidebar-max-width: 520px;
    --resizer-width: 7px;

    --field-height: 38px;
    --button-height: 38px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;

    --transition-fast: 120ms ease;
    --transition-medium: 220ms ease;
}


/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    height: 100%;
    color-scheme: dark;
    background: var(--bg-page);
}

body {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(41, 75, 83, 0.1),
            transparent 36%
        ),
        var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: calc(14px * var(--text-scale, 1));
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

button,
summary,
select {
    -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
summary,
select,
input[type="checkbox"] {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

img,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
select,
textarea,
button {
    outline: none;
}

textarea {
    resize: vertical;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--accent-medium);
    color: var(--text-primary);
}


/* =========================================================
   03. SCROLLBARS
   ========================================================= */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(
            var(--scroll-thumb),
            var(--scroll-thumb)
        )
        padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            var(--scroll-thumb-hover),
            var(--scroll-thumb-hover)
        )
        padding-box;
}


/* =========================================================
   04. ACCESSIBILITY
   ========================================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Keyboard focus: a clear gold ring (never shown for mouse clicks). */
:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 1px;
}

.noscript-message {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 32px;
    background: var(--bg-page);
    color: var(--text-primary);
    text-align: center;
}


/* =========================================================
   05. APPLICATION SHELL
   ========================================================= */

.app-shell {
    display: grid;
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    min-height: 520px;
    overflow: hidden;
}

.workspace {
    display: grid;
    /* The panel grows with Settings › Text size (never past 62 % of
       the window), so larger text keeps fitting. */
    grid-template-columns:
        min(calc(var(--sidebar-width) * var(--text-scale, 1)), 62vw)
        var(--resizer-width)
        minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   06. APPLICATION HEADER
   ========================================================= */

.app-header {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns:
        minmax(230px, 1fr)
        auto
        minmax(230px, 1fr);
    align-items: center;
    min-width: 0;
    height: var(--header-height);
    padding: 0 14px;
    border-bottom: 1px solid var(--line-medium);
    background:
        linear-gradient(
            180deg,
            var(--bg-header-top),
            var(--bg-header-bottom)
        );
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}

.app-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

/* App icon: the dark tile reads as an app icon against the header. */
.app-brand__icon {
    display: block;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.35);
    user-select: none;
}

.app-brand__text {
    min-width: 0;
}

.app-brand__text strong,
.app-brand__text span {
    display: block;
}

.app-brand__text strong {
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(12px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.16em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-brand__text span {
    margin-top: 2px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.13em;
}

.app-header__center {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.workflow-status {
    display: flex;
    align-items: center;
    gap: 18px;
}

.workflow-status__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 92px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid transparent;
    color: var(--text-faint);
    font-family: var(--font-mono);
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

/* Connector between steps: fills once the step before it is done. */
.workflow-status__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 16px;
    height: 1px;
    background: var(--line-medium);
    transition: background var(--transition-fast);
}

.workflow-status__step.is-complete:not(:last-child)::after {
    height: 2px;
    background: var(--success);
}

/* Done: a green step, readable on every palette. */
.workflow-status__step.is-complete {
    border-color: rgba(var(--success-rgb), 0.55);
    background: var(--success-chip);
    color: var(--success);
    box-shadow: 0 0 12px rgba(var(--success-rgb), 0.14);
}

.workflow-status__step.is-complete .workflow-status__label {
    font-weight: 800;
}

/* Done: ✓ replaces the step number. */
.workflow-status__step.is-complete .workflow-status__number {
    font-size: 0;
}

.workflow-status__step.is-complete .workflow-status__number::before {
    content: "✓";
    font-size: calc(11px * var(--text-scale, 1));
    font-weight: 800;
}

/* Current step: gold with a soft glow. */
.workflow-status__step.is-active {
    border-color: var(--accent-medium);
    background: var(--accent-soft);
    color: var(--accent-ink-strong);
    box-shadow:
        0 0 14px rgba(var(--accent-rgb), 0.16),
        inset 0 0 8px rgba(var(--accent-rgb), 0.06);
}

.workflow-status__number {
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.workflow-status__label {
    font-size: calc(10.5px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.14em;
}

.app-header__actions {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    gap: 6px;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 74px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.015);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.icon-button:hover {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-primary);
}

.icon-button[aria-pressed="true"] {
    border-color: var(--accent-medium);
    background: var(--accent-soft);
    color: var(--accent-ink-strong);
}

.icon-button__label {
    font-size: calc(10px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.1em;
}


/* =========================================================
   07. SIDEBAR
   ========================================================= */

.sidebar {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--line-soft);
    background:
        linear-gradient(
            180deg,
            var(--bg-sidebar-top),
            var(--bg-sidebar-bottom)
        );
}

.sidebar-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 8px 0;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, 0.08);
}

.sidebar-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.sidebar-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
}

.sidebar-tab.is-active {
    border-bottom-color: var(--accent);
    color: var(--accent-ink-strong);
}

.sidebar-tab__index {
    font-size: calc(10px * var(--text-scale, 1));
    opacity: 0.58;
}

.sidebar-tab__label {
    font-size: calc(10.5px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.12em;
}

.sidebar-utilities {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid var(--line-soft);
}

.text-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.09em;
    transition: color var(--transition-fast);
}

.text-button:hover {
    color: var(--accent-ink-strong);
}

.sidebar-panels {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.sidebar-panel {
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
}

.sidebar-panel.is-active {
    display: block;
}


/* =========================================================
   08. SIDEBAR RESIZER
   ========================================================= */

.sidebar-resizer {
    position: relative;
    z-index: 24;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    cursor: col-resize;
    background: var(--bg-page);
    transition: background var(--transition-fast);
}

.sidebar-resizer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
}

.sidebar-resizer span {
    display: block;
    width: 1px;
    height: 38px;
    background: var(--line-medium);
    transition:
        height var(--transition-fast),
        background var(--transition-fast);
}

.sidebar-resizer:hover,
.sidebar-resizer.is-dragging {
    background: rgba(var(--accent-rgb), 0.06);
}

.sidebar-resizer:hover span,
.sidebar-resizer.is-dragging span {
    height: 76px;
    background: var(--accent);
}


/* =========================================================
   09. FORM SECTIONS
   ========================================================= */

.record-form {
    display: grid;
    gap: 8px;
}

.form-section {
    overflow: clip;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.012);
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.form-section:hover {
    border-color: var(--line-medium);
}

.form-section[open] {
    background: rgba(255, 255, 255, 0.018);
}

.form-section__summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 39px;
    padding: 0 12px;
    list-style: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.1em;
    user-select: none;
}

.form-section__summary::-webkit-details-marker {
    display: none;
}

.form-section__summary::after {
    content: "+";
    position: absolute;
    right: 11px;
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    font-size: calc(14px * var(--text-scale, 1));
    font-weight: 400;
    transition: transform var(--transition-fast);
}

.form-section[open] > .form-section__summary::after {
    content: "−";
}

.form-section__summary > span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 86px;
}

.section-index {
    color: var(--accent-ink);
    font-size: calc(10px * var(--text-scale, 1));
}

.section-state {
    position: absolute;
    right: 34px;
    color: var(--text-faint);
    font-size: calc(9.5px * var(--text-scale, 1));
    font-weight: 600;
    letter-spacing: 0.1em;
}

.form-section__content {
    display: grid;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--line-soft);
}

.section-note {
    padding: 9px 10px;
    border-left: 2px solid var(--info);
    background: var(--info-soft);
    color: var(--text-secondary);
    font-size: calc(11px * var(--text-scale, 1));
    line-height: 1.5;
}


/* =========================================================
   10. FORMS
   ========================================================= */

.form-grid {
    display: grid;
    gap: 10px;
}

.form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* align-content: start keeps label and control at their natural
   height when the neighbour field is taller (e.g. it shows a hint). */
.form-field {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 5px;
}

.form-field label,
.field-label-row label {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.required-mark {
    color: var(--accent-ink);
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.character-counter {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
}

input,
select,
textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-field);
    color: var(--text-primary);
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

input,
select {
    height: var(--field-height);
    padding: 0 10px;
}

/* Sliders keep their native track: field padding/border would shrink it. */
input[type="range"],
input[type="range"]:hover,
input[type="range"]:focus {
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    accent-color: var(--accent);
}

textarea {
    min-height: 86px;
    padding: 9px 10px;
    line-height: 1.5;
}

input:hover,
select:hover,
textarea:hover {
    background: var(--bg-field-hover);
    border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}

select {
    appearance: none;
    padding-right: 30px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 11px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

input[type="date"],
input[type="time"] {
    color-scheme: dark;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.field-error {
    min-height: 0;
    color: var(--danger);
    font-size: calc(10px * var(--text-scale, 1));
}

.field-error:empty {
    display: none;
}

.inline-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 2px;
}

.small-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.015);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(9px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.small-action-button::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

.small-action-button:hover:not(:disabled) {
    border-color: var(--accent-medium);
    background: var(--accent-soft);
    color: var(--accent-ink-strong);
}

.small-action-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* After SAVE: the output card is brought into view and marked. */
.generation-panel.is-spotlit {
    border-color: var(--accent-medium);
    box-shadow: 0 0 0 1px var(--accent-soft), 0 0 22px rgba(var(--accent-rgb), 0.12);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}


/* =========================================================
   11. SESSION STEPPER
   ========================================================= */

.stepper {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
}

.stepper input {
    border-radius: 0;
    text-align: center;
    font-family: var(--font-mono);
}

.stepper__button {
    border: 1px solid var(--line-medium);
    background: var(--bg-field);
    color: var(--text-secondary);
    font-size: calc(16px * var(--text-scale, 1));
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.stepper__button:first-child {
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.stepper__button:last-child {
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.stepper__button:hover {
    border-color: var(--accent-medium);
    background: var(--accent-soft);
    color: var(--accent-ink-strong);
}


/* =========================================================
   12. BUTTONS
   ========================================================= */

.primary-button,
.secondary-button,
.danger-button,
.footer-action-button,
.viewer-tool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-height);
    padding: 0 13px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.1em;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.primary-button {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.primary-button:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.secondary-button {
    border: 1px solid var(--line-medium);
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-secondary);
}

.secondary-button:hover:not(:disabled) {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.danger-button {
    border: 1px solid var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}

.danger-button:hover {
    background: var(--danger);
    color: var(--on-danger);
}

.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.danger-button:active:not(:disabled),
.footer-action-button:active:not(:disabled),
.viewer-tool-button:active:not(:disabled) {
    transform: translateY(1px);
}

.primary-button:disabled,
.secondary-button:disabled,
.footer-action-button:disabled {
    opacity: 0.35;
}

.primary-button--wide,
.secondary-button--wide {
    width: 100%;
}

/* PROJECTS panel (LIBRARY tab). */
.projects-panel {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.012);
}

.projects-panel__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.projects-panel__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-soft);
}

.projects-panel__row strong {
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.06em;
}

.projects-panel__row span {
    overflow: hidden;
    color: var(--text-primary);
    font-size: calc(12px * var(--text-scale, 1));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projects-panel__row small,
.projects-panel__empty {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.08em;
}

.projects-panel__form {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 6px;
}

.projects-panel__form input {
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-xs);
    background: var(--bg-field);
    color: var(--text-primary);
    font-size: calc(11px * var(--text-scale, 1));
}

.projects-panel__form button {
    min-height: 30px;
    padding: 0 12px;
}

/* Drag & drop footage onto the empty viewer. */
.viewer-canvas.is-drop-target .video-placeholder {
    outline: 1px dashed var(--accent);
    outline-offset: -12px;
    background:
        radial-gradient(circle at center, rgba(var(--accent-rgb), 0.14), transparent 60%),
        var(--bg-placeholder);
}

.viewer-canvas.is-drop-target .video-placeholder::after {
    content: "DROP FOOTAGE HERE";
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--accent-ink-strong);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
}

/* LOAD FOOTAGE and REMOVE share the row. */
.source-load-actions {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 8px;
}

.button-grid {
    display: grid;
    gap: 8px;
}

.button-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.button-grid__wide {
    grid-column: 1 / -1;
}


/* =========================================================
   13. SWITCH
   ========================================================= */

.switch-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 9px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.012);
}

.switch-field > span:first-child {
    display: grid;
    gap: 3px;
}

.switch-field strong {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.switch-field small {
    color: var(--text-muted);
    font-size: calc(10px * var(--text-scale, 1));
}

.switch-control {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
}

.switch-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.switch-control__track {
    position: absolute;
    inset: 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg-track);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.switch-control__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}

.switch-control input:checked + .switch-control__track {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.switch-control input:checked + .switch-control__track::after {
    transform: translateX(16px);
    background: var(--accent);
}


/* =========================================================
   14. RECORD PREVIEW CARD
   ========================================================= */

.record-preview-card {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(
            135deg,
            rgba(var(--accent-rgb), 0.06),
            transparent 55%
        ),
        var(--bg-field);
}

.record-preview-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.record-preview-card__id,
.record-preview-card__status,
.record-preview-card__meta,
.record-preview-card__location,
.record-preview-card__source {
    font-family: var(--font-mono);
}

.record-preview-card__id {
    color: var(--accent-ink);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.08em;
}

.record-preview-card__status {
    color: var(--text-muted);
    font-size: calc(9.5px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.record-preview-card__project {
    overflow: hidden;
    color: var(--text-primary);
    font-size: calc(12px * var(--text-scale, 1));
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.record-preview-card__meta {
    display: flex;
    gap: 6px;
    color: var(--text-secondary);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.08em;
}

.record-preview-card__location,
.record-preview-card__source {
    overflow: hidden;
    color: var(--text-muted);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   15. SOURCE LOAD PANEL
   ========================================================= */

.source-load-panel,
.generation-panel,
.library-backup-panel {
    display: grid;
    gap: 11px;
    margin-bottom: 8px;
    padding: 13px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-md);
    background:
        linear-gradient(
            135deg,
            rgba(119, 182, 215, 0.05),
            transparent 58%
        ),
        rgba(255, 255, 255, 0.014);
}

.source-load-panel__heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Long file names must shorten (ellipsis), never widen the panel. */
.source-load-panel > * {
    min-width: 0;
}

.source-load-panel__heading > div {
    min-width: 0;
}

.source-load-panel__heading strong {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    font-size: calc(12px * var(--text-scale, 1));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.source-load-panel__description,
.generation-panel__status p,
.library-backup-panel p {
    margin: 0;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
    line-height: 1.55;
}

.section-eyebrow {
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.14em;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    padding: 0 7px;
    border: 1px solid var(--line-medium);
    border-radius: 999px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.1em;
}

.status-badge[data-status="ready"] {
    border-color: rgba(111, 212, 154, 0.32);
    background: var(--success-soft);
    color: var(--success);
}

.status-badge[data-status="warning"] {
    border-color: rgba(225, 184, 90, 0.32);
    background: var(--warning-soft);
    color: var(--warning);
}

.status-badge[data-status="error"] {
    border-color: rgba(228, 108, 108, 0.32);
    background: var(--danger-soft);
    color: var(--danger);
}


/* =========================================================
   16. METADATA
   ========================================================= */

.metadata-list,
.diagnostic-list {
    display: grid;
    margin: 0;
}

.metadata-row,
.diagnostic-row {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.4fr);
    align-items: center;
    min-height: 31px;
    gap: 10px;
    border-bottom: 1px solid var(--line-soft);
}

.metadata-row:last-child,
.diagnostic-row:last-child {
    border-bottom: 0;
}

.metadata-row dt,
.diagnostic-row dt {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.metadata-row dd,
.diagnostic-row dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.metadata-confidence {
    margin-left: 4px;
    color: var(--warning);
    font-size: calc(9.5px * var(--text-scale, 1));
}


/* =========================================================
   17. DIAGNOSTIC
   ========================================================= */

.diagnostic-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.012);
}

.diagnostic-summary__indicator {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--text-faint);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.025);
}

.diagnostic-summary strong {
    display: block;
    font-size: calc(11px * var(--text-scale, 1));
}

.diagnostic-summary p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: calc(10px * var(--text-scale, 1));
    line-height: 1.45;
}

.diagnostic-summary[data-risk="low"] {
    border-color: rgba(111, 212, 154, 0.25);
    background: var(--success-soft);
}

.diagnostic-summary[data-risk="low"]
.diagnostic-summary__indicator {
    background: var(--success);
}

.diagnostic-summary[data-risk="medium"] {
    border-color: rgba(225, 184, 90, 0.25);
    background: var(--warning-soft);
}

.diagnostic-summary[data-risk="medium"]
.diagnostic-summary__indicator {
    background: var(--warning);
}

.diagnostic-summary[data-risk="high"] {
    border-color: rgba(228, 108, 108, 0.25);
    background: var(--danger-soft);
}

.diagnostic-summary[data-risk="high"]
.diagnostic-summary__indicator {
    background: var(--danger);
}

.diagnostic-row dd[data-status="ready"] {
    color: var(--success);
}

.diagnostic-row dd[data-status="warning"] {
    color: var(--warning);
}

.diagnostic-row dd[data-status="error"] {
    color: var(--danger);
}

.diagnostic-warning-list {
    display: grid;
    gap: 6px;
}

.diagnostic-warning {
    padding: 8px 9px;
    border-left: 2px solid var(--warning);
    background: var(--warning-soft);
    color: var(--text-secondary);
    font-size: calc(10px * var(--text-scale, 1));
    line-height: 1.45;
}


/* =========================================================
   18. GENERATION PANEL
   ========================================================= */

.generation-panel {
    margin-top: 8px;
}

.generation-panel__status strong {
    display: block;
    margin-top: 4px;
    font-size: calc(12px * var(--text-scale, 1));
}


/* =========================================================
   19. LIBRARY CONTROLS
   ========================================================= */

.library-controls {
    display: grid;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.012);
}

.search-field {
    position: relative;
}

.search-field__icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.search-field input {
    padding-left: 31px;
    padding-right: 32px;
}

.search-field__clear {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 27px;
    height: 27px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    font-size: calc(17px * var(--text-scale, 1));
}

.search-field__clear:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.library-result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 7px;
    border-top: 1px solid var(--line-soft);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.08em;
}


/* =========================================================
   20. RECORD LIBRARY
   ========================================================= */

.record-library {
    margin-top: 8px;
}

.record-library__list {
    display: grid;
    gap: 8px;
}

.empty-state {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    min-height: 170px;
    padding: 22px 20px;
    border: 1px dashed var(--line-medium);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    text-align: center;
}

.empty-state__symbol {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
    border: 1px solid var(--line-medium);
    border-radius: 50%;
    font-family: var(--font-mono);
    color: var(--text-faint);
}

.empty-state strong {
    color: var(--text-secondary);
    font-size: calc(11px * var(--text-scale, 1));
}

.empty-state p {
    max-width: 250px;
    margin: 2px 0 6px;
    font-size: calc(10px * var(--text-scale, 1));
    line-height: 1.5;
}

.library-backup-panel {
    margin-top: 8px;
    margin-bottom: 0;
}



/* =========================================================
   21. SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 7px;
    padding: 8px 10px;
    border-top: 1px solid var(--line-medium);
    background:
        linear-gradient(
            180deg,
            var(--bg-footer-top),
            var(--bg-footer-bottom)
        );
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.16);
}

.sidebar-footer__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.status-line {
    overflow: hidden;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--text-scale, 1));
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.status-line[data-status="saved"],
.status-line[data-status="ready"] {
    color: var(--success);
}

.status-line[data-status="warning"],
.status-line[data-status="modified"] {
    color: var(--warning);
}

.status-line[data-status="error"] {
    color: var(--danger);
}

.sidebar-footer__actions {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 6px;
}

#newRecordButton {
    grid-column: 1 / -1;
}

.footer-action-button {
    border: 1px solid var(--line-medium);
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-secondary);
}

.footer-action-button:hover {
    border-color: var(--accent-medium);
    background: var(--accent-soft);
    color: var(--accent-ink-strong);
}

.footer-action-button--menu {
    justify-content: space-between;
}

.app-message {
    min-height: 13px;
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: calc(10.5px * var(--text-scale, 1));
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-message[data-type="success"] {
    color: var(--success);
}

.app-message[data-type="warning"] {
    color: var(--warning);
}

.app-message[data-type="error"] {
    color: var(--danger);
}


/* =========================================================
   22. DROPDOWN
   ========================================================= */

.dropdown {
    position: relative;
    min-width: 0;
}

.dropdown > button {
    width: 100%;
}

.dropdown-menu {
    position: absolute;
    z-index: 70;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 180px;
    padding: 5px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-md);
    background: var(--bg-menu);
    box-shadow: var(--shadow-medium);
}

.dropdown-menu button {
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    text-align: left;
}

.dropdown-menu button:hover {
    background: var(--accent-soft);
    color: var(--accent-ink-strong);
}


/* =========================================================
   23. VIEWER
   ========================================================= */

.viewer {
    position: relative;
    display: grid;
    grid-template-rows:
        var(--viewer-toolbar-height)
        minmax(0, 1fr)
        var(--viewer-footer-height);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 44%,
            var(--viewer-glow),
            transparent 54%
        ),
        var(--bg-viewer);
}

.viewer-toolbar {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 16px;
    padding: 0 13px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-viewer-bar);
}

.viewer-toolbar__source {
    /* The dot and the state (READY…) share the first row, centered on
       each other whatever the font; the file name goes under. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    column-gap: 9px;
    row-gap: 2px;
}

.viewer-toolbar__source > div {
    display: contents;
}

.viewer-toolbar__source .viewer-state {
    grid-column: 2;
    grid-row: 1;
}

.viewer-toolbar__source .source-file-name {
    grid-column: 2;
    grid-row: 2;
}

/* Status dot: green ready · red playing, recording or error · yellow
   paused · amber loading or generating (faster) · grey stopped. It
   always pulses: a ring of its own color grows and fades. */
.viewer-state-dot {
    --pulse: 2.2s;
    position: relative;
    flex: 0 0 auto;
    grid-column: 1;
    grid-row: 1;
    /* Capitals sit above the line's middle: meet their center. */
    top: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    color: var(--text-faint);
    background: currentColor;
    /* A fine dark rim keeps it visible on light palettes too. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22), 0 0 6px currentColor;
}

.viewer-state-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    animation: viewer-state-ring var(--pulse) ease-out infinite;
}

.viewer-state-dot[data-status="ready"] {
    color: var(--success);
}

.viewer-state-dot[data-status="playing"],
.viewer-state-dot[data-status="recording"] {
    --pulse: 1s;
    color: var(--hud-rec);
}

.viewer-state-dot[data-status="paused"] {
    --pulse: 1.6s;
    color: #e8c547;
}

.viewer-state-dot[data-status="processing"],
.viewer-state-dot[data-status="loading"] {
    --pulse: 0.9s;
    color: var(--warning);
}

.viewer-state-dot[data-status="error"] {
    --pulse: 1.2s;
    color: var(--danger);
}

.viewer-state-dot[data-status="stopped"] {
    --pulse: 2.6s;
    color: var(--text-muted);
}

@keyframes viewer-state-ring {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

    80%,
    100% {
        opacity: 0;
        transform: scale(2.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .viewer-state-dot::after {
        animation: none;
    }
}

.viewer-state,
.source-file-name {
    display: block;
    font-family: var(--font-mono);
}

.viewer-state {
    color: var(--text-muted);
    font-size: calc(9.5px * var(--text-scale, 1));
    line-height: 1.25;
    letter-spacing: 0.11em;
}

.source-file-name {
    max-width: min(46vw, 680px);
    overflow: hidden;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.viewer-toolbar__controls {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
}

.viewer-zoom-control select {
    width: 78px;
    height: 31px;
    padding-left: 8px;
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
}

.viewer-tool-button {
    min-height: 31px;
    border: 1px solid var(--line-medium);
    background: transparent;
    color: var(--text-muted);
}

.viewer-tool-button:hover {
    border-color: var(--line-strong);
    color: var(--text-primary);
}


/* =========================================================
   24. VIEWER STAGE
   ========================================================= */

.viewer-stage {
    position: relative;
    display: grid;
    /* "safe" keeps an oversized (zoomed) picture scrollable from its edge. */
    place-items: safe center;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: clamp(10px, 1.8vw, 24px);
    overscroll-behavior: contain;
}

.viewer-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            var(--stage-grid) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--stage-grid) 1px,
            transparent 1px
        );
    background-size: 42px 42px;
    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 80%
        );
}

.viewer-canvas {
    position: relative;
    isolation: isolate;
    width: min(
        100%,
        calc(
            (100dvh - var(--header-height) - var(--viewer-toolbar-height) - var(--viewer-footer-height) - 44px)
            * 16 / 9
        )
    );
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--line-medium);
    /* Rounded window: the picture, HUD and empty viewer are clipped to
       it (the exported video keeps its square corners). */
    border-radius: var(--radius-lg);
    background: #000;
    /* The black picture area stays inside the frame line. */
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.015),
        var(--shadow-large);
    transform-origin: center center;
}

/* Zoom (js/ui.js): FILL covers the whole viewer, DETAIL is twice the
   FIT size; both may scroll. Without footage the viewer stays at FIT. */
#viewerCanvas[data-zoom="fill"]:not(:has(> .video-placeholder:not([hidden]))) {
    width: var(--viewer-zoom-width, 100%);
    max-width: none;
}

#viewerCanvas[data-zoom="detail"]:not(:has(> .video-placeholder:not([hidden]))) {
    width: var(--viewer-zoom-width, 200%);
    max-width: none;
}

.video-preview {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
}

/* Output formats: the viewer takes the aspect ratio of the export. */
.viewer-canvas[data-composition="canvas-9-16"] { --ar: 0.5625; aspect-ratio: 9 / 16; }
.viewer-canvas[data-composition="canvas-4-5"] { --ar: 0.8; aspect-ratio: 4 / 5; }
.viewer-canvas[data-composition="canvas-1-1"] { --ar: 1; aspect-ratio: 1 / 1; }
.viewer-canvas[data-composition="canvas-4-3"] { --ar: 1.3333; aspect-ratio: 4 / 3; }
.viewer-canvas[data-composition="canvas-2-39"] { --ar: 2.39; aspect-ratio: 2.39 / 1; }

.viewer-canvas[data-composition^="canvas-"]:not([data-composition="canvas-16-9"]) {
    width: min(
        100%,
        calc(
            (100dvh - var(--header-height) - var(--viewer-toolbar-height) - var(--viewer-footer-height) - 44px)
            * var(--ar)
        )
    );
}

.viewer-canvas[data-fit="cover"] .video-preview,
.viewer-canvas[data-fit="cover"] .video-look-preview {
    object-fit: cover;
    object-position: var(--framing, 50%) var(--framing, 50%);
}

.visually-hidden-select {
    position: absolute !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.format-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.format-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 50px;
    height: 50px;
    padding: 5px 6px;
    border: 1px solid var(--line-medium);
    border-radius: 4px;
    background: var(--bg-field);
    color: var(--text-secondary);
    font: 600 calc(11px * var(--text-scale, 1))/1 var(--font-mono);
    letter-spacing: 0.06em;
    cursor: pointer;
}

.format-chip__box {
    display: block;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    opacity: 0.85;
}

.format-chip__box--source {
    border-style: dashed;
}

.format-chip:hover {
    border-color: var(--accent);
}

.format-chip.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-ink-strong);
}

.viewer-canvas[data-composition="source-aspect"] {
    aspect-ratio: auto;
    max-height: 100%;
}

.viewer-canvas[data-composition="source-aspect"]
.video-preview {
    position: relative;
    height: auto;
    max-height: 100%;
}

/* The controls panel spans the whole video: shade only its bottom
   strip, or tall zooms show a dark band across the picture. */
.video-preview::-webkit-media-controls-panel {
    background:
        linear-gradient(
            transparent calc(100% - 96px),
            rgba(0, 0, 0, 0.72)
        );
}


/* =========================================================
   25. VIDEO PLACEHOLDER
   ========================================================= */

.video-placeholder {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            var(--placeholder-glow),
            transparent 52%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.015),
            transparent
        ),
        var(--bg-placeholder);
}

.video-placeholder__reticle {
    position: absolute;
    inset: 10%;
    opacity: 0.26;
}

.video-placeholder__reticle span {
    position: absolute;
    width: 52px;
    height: 52px;
}

.video-placeholder__reticle span:nth-child(1) {
    top: 0;
    left: 0;
    border-top: 1.25px solid var(--placeholder-line);
    border-left: 1.25px solid var(--placeholder-line);
}

.video-placeholder__reticle span:nth-child(2) {
    top: 0;
    right: 0;
    border-top: 1.25px solid var(--placeholder-line);
    border-right: 1.25px solid var(--placeholder-line);
}

.video-placeholder__reticle span:nth-child(3) {
    right: 0;
    bottom: 0;
    border-right: 1.25px solid var(--placeholder-line);
    border-bottom: 1.25px solid var(--placeholder-line);
}

.video-placeholder__reticle span:nth-child(4) {
    bottom: 0;
    left: 0;
    border-bottom: 1.25px solid var(--placeholder-line);
    border-left: 1.25px solid var(--placeholder-line);
}

.video-placeholder__content {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    max-width: 360px;
    padding: 28px;
    text-align: center;
}

.video-placeholder__content strong {
    margin-top: 8px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: clamp(12px, 1.2vw, 17px);
    letter-spacing: 0.14em;
}

.video-placeholder__content p {
    margin: 9px 0 17px;
    color: var(--text-muted);
    font-size: clamp(10px, 0.85vw, 12px);
    line-height: 1.55;
}


/* =========================================================
   26. HUD BASE
   ========================================================= */

.hud-layer {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    font-family: var(--font-mono);
    user-select: none;
}

.hud-frame-layer {
    z-index: 4;
}

.hud-metadata-layer {
    z-index: 5;
    color: var(--hud-white);
    text-shadow: var(
        --hud-shadow,
        0 1px 1px rgba(0, 0, 0, 1),
        0 0 3px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 0, 0, 0.62)
    );
}

.hud-label {
    color: var(--hud-muted);
    font-size: min(calc(0.46 * var(--hud-vw, 1vw)), 8.5px);
    font-weight: 600;
    letter-spacing: 0.12em;
}


/* =========================================================
   27. HUD CORNERS
   ========================================================= */

.hud-corner {
    position: absolute;
    width: clamp(20px, 3.2%, 56px);
    height: clamp(20px, 5.7%, 56px);
    opacity: 0.92;
}

.hud-corner--top-left {
    top: 4.8%;
    left: 3.1%;
    border-top: 1.25px solid var(--hud-line);
    border-left: 1.25px solid var(--hud-line);
}

.hud-corner--top-right {
    top: 4.8%;
    right: 3.1%;
    border-top: 1.25px solid var(--hud-line);
    border-right: 1.25px solid var(--hud-line);
}

.hud-corner--bottom-left {
    bottom: 5.2%;
    left: 3.1%;
    border-bottom: 1.25px solid var(--hud-line);
    border-left: 1.25px solid var(--hud-line);
}

.hud-corner--bottom-right {
    right: 3.1%;
    bottom: 5.2%;
    border-right: 1.25px solid var(--hud-line);
    border-bottom: 1.25px solid var(--hud-line);
}


/* =========================================================
   28. HUD RULERS
   ========================================================= */

.hud-ruler {
    position: absolute;
    left: 17%;
    width: 66%;
    height: 8px;
    overflow: hidden;
    opacity: 0.84;
}

.hud-ruler--top {
    top: 4.6%;
    border-top: 1.2px solid var(--hud-line-soft);
}

.hud-ruler--bottom {
    bottom: 5%;
    border-bottom: 1.2px solid var(--hud-line-soft);
}

.hud-ruler span {
    display: block;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(2.5% - 1px),
            var(--hud-line) calc(2.5% - 1px),
            var(--hud-line) 2.5%
        );
    background-size: 100% 55%;
    background-repeat: no-repeat;
}

.hud-ruler--top span {
    background-position: top;
}

.hud-ruler--bottom span {
    background-position: bottom;
}


/* =========================================================
   29. HUD SIDE SCALES
   ========================================================= */

.hud-scale {
    position: absolute;
    top: 27%;
    width: 8px;
    height: 46%;
    overflow: hidden;
    opacity: 0.46;
}

.hud-scale--left {
    left: 3.05%;
    border-left: 1px solid var(--hud-line-soft);
}

.hud-scale--right {
    right: 3.05%;
    border-right: 1px solid var(--hud-line-soft);
}

.hud-scale span {
    display: block;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent calc(7.5% - 1px),
            var(--hud-line) calc(7.5% - 1px),
            var(--hud-line) 7.5%
        );
    background-repeat: no-repeat;
}

.hud-scale--left span {
    background-position: left;
    background-size: 55% 100%;
}

.hud-scale--right span {
    background-position: right;
    background-size: 55% 100%;
}


/* =========================================================
   30. HUD ARROWS
   ========================================================= */

.hud-arrow {
    display: none !important;
}

.hud-arrow--top {
    top: 4.2%;
    left: 50%;
    transform: translateX(-50%);
    border-right: 4px solid transparent;
    border-bottom: 6px solid var(--hud-line);
    border-left: 4px solid transparent;
}

.hud-arrow--bottom {
    bottom: 4.7%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 6px solid var(--hud-line);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.hud-arrow--left {
    top: 50%;
    left: 2.8%;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-right: 6px solid var(--hud-line);
    border-bottom: 4px solid transparent;
}

.hud-arrow--right {
    top: 50%;
    right: 2.8%;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--hud-line);
}


/* =========================================================
   31. HUD OPTICAL CENTER
   ========================================================= */

.hud-optical-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(22px, 3.6%, 52px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    opacity: 0.30;
}

.hud-optical-center__horizontal,
.hud-optical-center__vertical,
.hud-optical-center__circle {
    position: absolute;
}

.hud-optical-center__horizontal {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            var(--hud-line) 0 39%,
            transparent 39% 61%,
            var(--hud-line) 61% 100%
        );
}

.hud-optical-center__vertical {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background:
        linear-gradient(
            180deg,
            var(--hud-line) 0 39%,
            transparent 39% 61%,
            var(--hud-line) 61% 100%
        );
}

.hud-optical-center__circle {
    inset: 28%;
    border: 1px solid var(--hud-line-soft);
    border-radius: 50%;
}

.hud-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(calc(0.18 * var(--hud-vw, 1vw)), 2.5px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--hud-white);
    opacity: 0.46;
}


/* =========================================================
   32. HUD REC MODULE
   ========================================================= */

.hud-rec-module {
    position: absolute;
    top: 7.2%;
    left: 5.1%;
    display: flex;
    align-items: center;
    gap: min(calc(0.5 * var(--hud-vw, 1vw)), 8px);
    color: var(--hud-white);
    font-size: min(calc(0.58 * var(--hud-vw, 1vw)), 10px);
    font-weight: 700;
    letter-spacing: 0.13em;
}

.hud-rec-dot {
    width: min(calc(0.55 * var(--hud-vw, 1vw)), 9px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

.hud-rec-module[data-state="rec"]
.hud-rec-dot,
.hud-rec-dot.is-recording {
    background: var(--hud-rec);
    box-shadow: 0 0 10px rgba(255, 74, 67, 0.65);
    animation: hud-rec-pulse 1s ease-in-out infinite;
}

.hud-rec-module[data-state="pause"]
.hud-rec-dot {
    border-radius: 1px;
    background: var(--warning);
}


/* =========================================================
   33. HUD RECORDING MODULE
   ========================================================= */

.hud-recording-module {
    position: absolute;
    top: 7.1%;
    right: 5.4%;
    display: grid;
    min-width: 20%;
    gap: min(calc(0.95 * var(--hud-vw, 1vw)), 15px);
}

.hud-recording-module__row {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: end;
    gap: min(calc(0.28 * var(--hud-vw, 1vw)), 5px);
}

.hud-recording-module__row strong {
    overflow: hidden;
    color: var(--hud-white);
    font-size: min(calc(0.72 * var(--hud-vw, 1vw)), 12.5px);
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.12;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   34. HUD PROJECT MODULE
   ========================================================= */

.hud-project-module {
    position: absolute;
    bottom: 14.7%;
    left: 6.2%;
    display: grid;
    max-width: 38%;
    gap: min(calc(0.50 * var(--hud-vw, 1vw)), 8px);
    justify-items: start;
}

.hud-project-code {
    color: var(--hud-white);
    font-size: min(calc(1.62 * var(--hud-vw, 1vw)), 28px);
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1;
}

.hud-project-name {
    overflow: hidden;
    margin-top: clamp(2px, calc(0.14 * var(--hud-vw, 1vw)), 3px);
    color: var(--hud-white);
    font-size: min(calc(0.68 * var(--hud-vw, 1vw)), 11.5px);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   35. HUD SESSION MODULE
   ========================================================= */

.hud-session-module {
    position: absolute;
    bottom: 14.65%;
    left: 50%;
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    min-width: clamp(110px, 13%, 190px);
    gap: min(calc(0.46 * var(--hud-vw, 1vw)), 8px);
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.hud-session-module span {
    display: block;
    width: 100%;
    color: var(--hud-muted);
    font-size: min(calc(0.62 * var(--hud-vw, 1vw)), 10.5px);
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1;
    text-align: center;
}

.hud-session-module strong {
    display: block;
    width: 100%;
    color: var(--hud-white);
    font-size: min(calc(0.62 * var(--hud-vw, 1vw)), 10.5px);
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1;
    text-align: center;
}


/* =========================================================
   36. HUD TIMER MODULE
   ========================================================= */

.hud-timer-module {
    position: absolute;
    right: 6.2%;
    bottom: 14.55%;
    display: grid;
    width: clamp(150px, 20%, 315px);
    justify-items: stretch;
    gap: min(calc(0.44 * var(--hud-vw, 1vw)), 7px);
    text-align: right;
}

.hud-timer-module strong {
    display: block;
    width: 100%;
    color: var(--hud-white);
    font-size: min(calc(1.28 * var(--hud-vw, 1vw)), 22px);
    font-weight: 400;
    letter-spacing: 0.07em;
    line-height: 1;
    text-align: right;
}


/* =========================================================
   37. HUD TECHNICAL STRIP
   ========================================================= */

.hud-technical-strip {
    position: absolute;
    right: 5.1%;
    bottom: 6.8%;
    left: 5.1%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: min(calc(3 * var(--hud-vw, 1vw)), 34px);
    border-top: 1.2px solid var(--hud-line-soft);
    border-bottom: 1.2px solid var(--hud-line-soft);
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--hud-tint, rgba(0, 0, 0, 0.18)),
            transparent
        );
}

.hud-technical-item {
    display: grid;
    align-content: center;
    min-width: 0;
    gap: min(calc(0.30 * var(--hud-vw, 1vw)), 5px);
    padding: 0 min(calc(0.7 * var(--hud-vw, 1vw)), 12px);
    border-right: 1px solid var(--hud-line-soft);
}

.hud-technical-item:last-child {
    border-right: 0;
}

.hud-technical-item span {
    color: var(--hud-muted);
    font-size: min(calc(0.44 * var(--hud-vw, 1vw)), 8px);
    font-weight: 600;
    letter-spacing: 0.11em;
}

.hud-technical-item strong {
    overflow: hidden;
    color: var(--hud-white);
    font-size: min(calc(0.60 * var(--hud-vw, 1vw)), 10.5px);
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   38. EXPORT OVERLAY
   ========================================================= */

.export-overlay {
    position: absolute;
    z-index: 50;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(
            circle at center,
            rgba(22, 42, 50, 0.28),
            transparent 44%
        ),
        var(--bg-overlay);
    backdrop-filter: blur(7px);
}

.export-overlay__panel {
    width: min(100%, 420px);
    padding: 22px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent
        ),
        var(--bg-dialog);
    box-shadow: var(--shadow-large);
}

.export-overlay__panel strong {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: calc(13px * var(--text-scale, 1));
    letter-spacing: 0.08em;
}

.export-overlay__panel > p {
    margin: 8px 0 17px;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
    line-height: 1.55;
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.progress-bar__fill {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-strong)
        );
    transition: width 180ms linear;
}

.export-progress-data {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
}

.export-progress-estimate {
    margin: 6px 0 16px;
    color: var(--text-muted);
    font-size: calc(10.5px * var(--text-scale, 1));
}


/* =========================================================
   39. VIEWER FOOTER
   ========================================================= */

.viewer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 12px;
    padding: 0 13px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-viewer-bar);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--text-scale, 1));
    letter-spacing: 0.08em;
}

.viewer-footer__status {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.viewer-footer__version {
    flex: 0 0 auto;
    color: var(--text-muted);
}


/* =========================================================
   40. DIALOGS
   ========================================================= */

.app-dialog {
    width: min(92vw, 480px);
    padding: 0;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-lg);
    background: var(--bg-dialog);
    color: var(--text-primary);
    box-shadow: var(--shadow-large);
}

.app-dialog::backdrop {
    background: rgba(1, 5, 7, 0.78);
    backdrop-filter: blur(5px);
}

.app-dialog form {
    padding: 22px;
}

.app-dialog h2 {
    margin: 7px 0 8px;
    font-size: calc(18px * var(--text-scale, 1));
    font-weight: 600;
}

.app-dialog p {
    margin: 0 0 15px;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
    line-height: 1.6;
}

.app-dialog > form > strong {
    display: block;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-field);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.import-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.import-summary > div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-field);
}

.import-summary span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--text-scale, 1));
    letter-spacing: 0.07em;
}

.import-summary strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(15px * var(--text-scale, 1));
}


/* =========================================================
   41. TOASTS
   ========================================================= */

/* Notifications (js/ui.js showToast): light-blue HUD cards that rise
   in and fade down. Type is shown by the left edge colour. */
.toast-message {
    --toast-accent: rgb(var(--toast-rgb));
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 10px 10px 10px 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--toast-rgb), 0.34);
    border-radius: var(--radius-md);
    background:
        linear-gradient(90deg, rgba(var(--toast-rgb), 0.12), rgba(var(--toast-rgb), 0.03) 60%),
        var(--toast-bg);
    box-shadow:
        0 10px 28px var(--toast-shadow),
        0 0 18px rgba(var(--toast-rgb), 0.12),
        inset 0 1px 0 rgba(var(--toast-rgb), 0.14);
    backdrop-filter: blur(6px);
    color: var(--toast-text);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.04em;
    line-height: 1.45;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
    filter: blur(3px);
    transition:
        opacity 260ms ease,
        transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1.05),
        filter 260ms ease;
}

/* Accent edge and a light sweep on arrival. */
.toast-message::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--toast-accent);
    box-shadow: 0 0 10px var(--toast-accent);
}

.toast-message::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(var(--toast-rgb), 0.18) 50%, transparent 70%);
    transform: translateX(-110%);
    pointer-events: none;
}

.toast-message.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.toast-message.is-visible::after {
    animation: toast-sweep 900ms ease-out 120ms 1 both;
}

.toast-message.is-leaving {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    filter: blur(2px);
    transition-duration: 300ms;
}

.toast-message[data-type="success"] { --toast-accent: rgb(var(--toast-rgb)); }
.toast-message[data-type="warning"] { --toast-accent: var(--warning); }
.toast-message[data-type="error"] { --toast-accent: var(--danger); border-color: rgba(228, 108, 108, 0.4); }

.toast-message > span {
    flex: 1;
    min-width: 0;
}

.toast-message__close {
    flex: none;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(var(--toast-rgb), 0.25);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--toast-text-soft);
    font-size: calc(13px * var(--text-scale, 1));
    line-height: 1;
    cursor: pointer;
}

.toast-message__close:hover {
    border-color: rgba(var(--toast-rgb), 0.6);
    color: var(--toast-text-strong);
}

@keyframes toast-sweep {
    to { transform: translateX(110%); }
}

@media (prefers-reduced-motion: reduce) {
    .toast-message {
        transform: none;
        filter: none;
        transition: opacity 150ms linear;
    }

    .toast-message.is-visible::after {
        animation: none;
    }
}

/* Top right, under the header: notices never cover the HUD's timer and
   technical strip at the bottom of the picture. Above HOME too, so a
   notice (e.g. RELOAD for a new version) can be used there. */
.toast-region {
    position: fixed;
    z-index: 1100;
    top: calc(var(--header-height, 56px) + 10px);
    right: 14px;
    display: grid;
    width: min(360px, calc(100vw - 28px));
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-md);
    background: rgba(8, 18, 23, 0.96);
    box-shadow: var(--shadow-medium);
    pointer-events: auto;
    animation: toast-enter 220ms ease;
}

.toast__indicator {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--info);
}

.toast[data-type="success"] .toast__indicator {
    background: var(--success);
}

.toast[data-type="warning"] .toast__indicator {
    background: var(--warning);
}

.toast[data-type="error"] .toast__indicator {
    background: var(--danger);
}

.toast strong {
    display: block;
    font-size: calc(10px * var(--text-scale, 1));
}

.toast p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: calc(10.5px * var(--text-scale, 1));
}


/* =========================================================
   43. DENSITY MODES
   ========================================================= */

.app-shell[data-density="compact"] {
    --field-height: 34px;
    --button-height: 34px;
}

.app-shell[data-density="compact"]
.form-section__summary {
    min-height: 35px;
}

.app-shell[data-density="compact"]
.form-section__content {
    gap: 9px;
    padding: 9px 10px;
}

.app-shell[data-density="compact"]
.record-form {
    gap: 6px;
}

.app-shell[data-density="compact"]
.form-grid {
    gap: 7px;
}

.app-shell[data-density="compact"]
textarea {
    min-height: 70px;
}

.app-shell[data-density="compact"]
.sidebar-panel {
    padding: 8px;
}

.app-shell[data-density="comfortable"] {
    --field-height: 42px;
    --button-height: 42px;
}

.app-shell[data-density="comfortable"]
.form-section__content {
    gap: 15px;
    padding: 15px;
}

.app-shell[data-density="comfortable"]
.record-form {
    gap: 11px;
}


/* =========================================================
   44. VIEW MODES
   ========================================================= */

.app-shell[data-view-mode="focus-viewer"]
.workspace {
    grid-template-columns: 0 0 minmax(0, 1fr);
}

.app-shell[data-view-mode="focus-viewer"]
.sidebar,
.app-shell[data-view-mode="focus-viewer"]
.sidebar-resizer {
    visibility: hidden;
    pointer-events: none;
}

.app-shell[data-view-mode="focus-record"]
.workspace {
    grid-template-columns:
        minmax(420px, 52vw)
        var(--resizer-width)
        minmax(320px, 1fr);
}

.app-shell[data-view-mode="focus-record"]
.viewer-canvas {
    width: min(
        100%,
        calc(
            (100dvh - var(--header-height) - var(--viewer-toolbar-height) - var(--viewer-footer-height) - 64px)
            * var(--ar, 1.7778)
        )
    );
}


/* =========================================================
   45. FULLSCREEN
   ========================================================= */

.viewer:fullscreen,
.viewer.is-fullscreen {
    width: 100%;
    height: 100%;
    background: #000;
}

.viewer:fullscreen .viewer-toolbar,
.viewer:fullscreen .viewer-footer,
.viewer.is-fullscreen .viewer-toolbar,
.viewer.is-fullscreen .viewer-footer {
    position: absolute;
    z-index: 60;
    right: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--transition-medium);
}

.viewer:fullscreen .viewer-toolbar,
.viewer.is-fullscreen .viewer-toolbar {
    top: 0;
}

.viewer:fullscreen .viewer-footer,
.viewer.is-fullscreen .viewer-footer {
    bottom: 0;
}

.viewer:fullscreen:hover .viewer-toolbar,
.viewer:fullscreen:hover .viewer-footer,
.viewer.is-fullscreen:hover .viewer-toolbar,
.viewer.is-fullscreen:hover .viewer-footer {
    opacity: 1;
}

.viewer:fullscreen .viewer-stage,
.viewer.is-fullscreen .viewer-stage {
    width: 100%;
    height: 100%;
    padding: 0;
}

.viewer:fullscreen .viewer-canvas,
.viewer.is-fullscreen .viewer-canvas {
    width: min(100%, calc(100vh * 16 / 9));
    max-height: 100%;
    border: 0;
}

/* The viewer's FULLSCREEN (the stage): the picture and its HUD fill
   the screen in the export's proportions. */
.viewer-stage:fullscreen {
    padding: 0;
    background: #000;
}

.viewer-stage:fullscreen .viewer-canvas {
    width: min(100vw, calc(100vh * var(--ar, 1.7778)));
    max-width: 100vw;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
}


/* =========================================================
   46. ANIMATIONS
   ========================================================= */

@keyframes hud-rec-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.38;
        transform: scale(0.84);
    }
}

@keyframes viewer-state-pulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.025);
    }

    50% {
        opacity: 0.45;
        box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0.04);
    }
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   47. LARGE DESKTOPS
   ========================================================= */

@media (min-width: 1700px) {
    :root {
        --sidebar-width: 430px;
    }

    .app-header {
        padding-inline: 18px;
    }

    .sidebar-panel {
        padding: 12px;
    }

    .viewer-stage {
        padding: 28px;
    }
}


/* =========================================================
   48. LAPTOPS — 1366 × 768
   ========================================================= */

@media (max-width: 1450px), (max-height: 820px) {
    :root {
        --header-height: 50px;
        --viewer-toolbar-height: 48px;
        --viewer-footer-height: 30px;
        --sidebar-width: 360px;
    }

    .app-header {
        padding-inline: 10px;
    }

    .app-brand__text span {
        display: none;
    }

    .workflow-status__step {
        min-width: 82px;
        height: 28px;
        padding-inline: 8px;
    }

    .icon-button {
        min-width: 65px;
        height: 29px;
        padding-inline: 8px;
    }

    .sidebar-tab {
        height: 34px;
    }

    .sidebar-utilities {
        padding-block: 5px;
    }

    .viewer-stage {
        padding: 10px;
    }

    .viewer-canvas {
        width: min(
            100%,
            calc(
                (100dvh - var(--header-height) - var(--viewer-toolbar-height) - var(--viewer-footer-height) - 22px)
                * 16 / 9
            )
        );
    }
}


/* =========================================================
   49. MEDIUM SCREENS
   ========================================================= */

@media (max-width: 1120px) {
    :root {
        --sidebar-width: 340px;
    }

    .app-header {
        grid-template-columns: minmax(200px, 1fr) auto;
    }

    .app-header__center {
        display: none;
    }

    .form-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   50. TABLETS AND NARROW DESKTOPS
   ========================================================= */

@media (max-width: 860px) {
    body {
        overflow: auto;
    }

    .app-shell {
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    .app-header {
        position: sticky;
        top: 0;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-header__actions .icon-button__label {
        display: none;
    }

    .app-header__actions .icon-button {
        min-width: 34px;
        width: 34px;
        padding: 0;
    }

    .workspace {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        overflow: visible;
    }

    .sidebar {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line-medium);
    }

    .sidebar-resizer {
        display: none;
    }

    .sidebar-panels {
        min-height: 540px;
        max-height: none;
    }

    .sidebar-panel {
        height: auto;
        max-height: 620px;
    }

    .viewer {
        min-height: 66dvh;
    }

    .app-shell[data-view-mode="focus-viewer"]
    .workspace,
    .app-shell[data-view-mode="focus-record"]
    .workspace {
        grid-template-columns: 1fr;
    }

    .app-shell[data-view-mode="focus-viewer"]
    .sidebar {
        display: none;
    }

    .app-shell[data-view-mode="focus-record"]
    .viewer {
        min-height: 420px;
    }

    .viewer-canvas {
        width: min(100%, calc((66dvh - 90px) * 16 / 9));
    }
}


/* =========================================================
   51. MOBILE
   ========================================================= */

@media (max-width: 560px) {
    :root {
        --header-height: 48px;
    }

    .app-header {
        padding-inline: 8px;
    }

    .app-brand__text strong {
        font-size: calc(10px * var(--text-scale, 1));
    }

    .app-header__actions {
        gap: 3px;
    }

    .sidebar-tabs {
        padding-inline: 5px;
    }

    .sidebar-tab__index {
        display: none;
    }

    .sidebar-tab__label {
        font-size: calc(10px * var(--text-scale, 1));
    }

    .sidebar-utilities {
        justify-content: space-between;
    }

    .sidebar-panel {
        padding: 7px;
        max-height: none;
    }

    .form-grid--two,
    .form-grid--three,
    .button-grid--two,
    .sidebar-footer__actions {
        grid-template-columns: 1fr;
    }

    .library-record-card__actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sidebar-footer__status {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .viewer {
        min-height: 58dvh;
    }

    .viewer-toolbar {
        gap: 6px;
        padding-inline: 8px;
    }

    .source-file-name {
        max-width: 38vw;
    }

    .viewer-toolbar__controls {
        gap: 3px;
    }

    .viewer-tool-button {
        min-width: 31px;
        width: 31px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        font-size: 0;
    }

    .viewer-tool-button::before {
        color: var(--text-muted);
        font-size: calc(12px * var(--text-scale, 1));
    }

    #resetViewerButton::before {
        content: "↺";
    }

    #fullscreenButton::before {
        content: "⛶";
    }

    .viewer-footer {
        padding-inline: 8px;
    }

    .viewer-footer__version {
        display: none;
    }

    .dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .import-summary {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   52. VERY SHORT VIEWPORTS
   ========================================================= */

@media (max-height: 680px) and (min-width: 861px) {
    :root {
        --header-height: 46px;
        --viewer-toolbar-height: 44px;
        --viewer-footer-height: 28px;
        --field-height: 32px;
        --button-height: 32px;
    }

    .app-brand__text span,
    .icon-button__label {
        display: none;
    }

    .icon-button {
        min-width: 32px;
        width: 32px;
        padding: 0;
    }

    .sidebar-tab {
        height: 31px;
    }

    .sidebar-utilities {
        padding-block: 4px;
    }

    .form-section__summary {
        min-height: 32px;
    }

    .form-section__content {
        gap: 7px;
        padding: 8px;
    }

    .sidebar-footer {
        gap: 5px;
        padding-block: 6px;
    }

    .app-message {
        display: none;
    }

    .viewer-stage {
        padding: 7px;
    }

    .viewer-canvas {
        width: min(
            100%,
            calc(
                (100dvh - var(--header-height) - var(--viewer-toolbar-height) - var(--viewer-footer-height) - 16px)
                * 16 / 9
            )
        );
    }
}




/* =========================================================
   THSE HUD — CORRECTED HIERARCHY
   ========================================================= */

/* Keep actual PROJECT label if present and make it readable. */
.hud-project-module > .hud-label,
.hud-project-module > span:first-child {
    color: var(--hud-muted);
    font-size: min(calc(0.60 * var(--hud-vw, 1vw)), 10.5px);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
}

/* SESSION hierarchy uses the real children:
   first child = SESSION
   strong = dynamic session number
   last child = dynamic record type tag (LOG/LAB/INT/ARCH)
*/
.hud-session-module > span:first-child {
    order: 1;
}

.hud-session-module > strong {
    order: 2;
}

.hud-session-module > span:last-child {
    order: 3;
    font-size: min(calc(0.52 * var(--hud-vw, 1vw)), 9px);
}

/* TIMER label keeps the real text but visually normalizes it to TIMER. */
.hud-timer-module > .hud-label,
.hud-timer-module > span:first-child {
    width: 100%;
    color: var(--hud-muted);
    font-size: min(calc(0.60 * var(--hud-vw, 1vw)), 10.5px);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: right;
}

/* Unit guide below the fixed-width timer.
   This remains a CSS bridge until the HTML is split into four real cells. */
.hud-timer-module::after {
    content: "HR       MIN       SEC       FR";
    display: block;
    width: 100%;
    color: var(--hud-muted);
    font-size: min(calc(0.43 * var(--hud-vw, 1vw)), 7.5px);
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1;
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}

/* Preserve rulers/scales/ticks; only arrowheads are removed. */
.hud-ruler,
.hud-scale,
.hud-ruler--top,
.hud-ruler--bottom,
.hud-scale--left,
.hud-scale--right {
    visibility: visible;
}

/* Optical center stays present but subordinate. */
.hud-optical-center__horizontal,
.hud-optical-center__vertical {
    opacity: 0.72;
}

.hud-optical-center__circle {
    opacity: 0.62;
}

/* =========================================================
   HUD RESPONSIVE SAFETY
   ========================================================= */






/* =========================================================
   THSE HUD — MICRO REFINEMENT
   Project / Session / Timer balance
   ========================================================= */

/* SESSION block:
   top line = SESSION + dynamic number
   second line = dynamic record type tag (LOG/LAB/INT/ARCH)
*/
.hud-session-module > * {
    width: 100%;
    margin: 0;
    text-align: center !important;
}

.hud-session-module > span:first-child {
    order: 1;
    color: var(--hud-muted);
    font-size: min(calc(0.62 * var(--hud-vw, 1vw)), 10.5px);
    font-weight: 600;
    letter-spacing: 0.11em;
}

.hud-session-module > strong {
    order: 2;
    color: var(--hud-white);
    font-size: min(calc(0.62 * var(--hud-vw, 1vw)), 10.5px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    text-align: center !important;
}

/* If the record type is the last span, keep it identical in size to SESSION #. */
.hud-session-module > span:last-child {
    order: 3;
    color: var(--hud-white);
    font-size: min(calc(0.62 * var(--hud-vw, 1vw)), 10.5px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    text-align: center !important;
}


/* TIMER — replace visual ELAPSED label with TIMER without touching JS logic. */
.hud-timer-module > .hud-label,
.hud-timer-module > span:first-child {
    width: 100%;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1;
    text-align: right;
}

.hud-timer-module > .hud-label::after,
.hud-timer-module > span:first-child::after {
    content: "TIMER";
    color: var(--hud-muted);
    font-size: min(calc(0.62 * var(--hud-vw, 1vw)), 10.5px);
    font-weight: 600;
    letter-spacing: 0.11em;
}

/* Timer value becomes lighter and more proportional to the neighboring modules. */
.hud-timer-module strong {
    font-size: min(calc(1.28 * var(--hud-vw, 1vw)), 22px) !important;
    font-weight: 400 !important;
    letter-spacing: 0.07em !important;
}

/* Keep unit identifiers below timer, but visually subordinate. */
.hud-timer-module::after {
    font-size: min(calc(0.41 * var(--hud-vw, 1vw)), 7px);
    font-weight: 500;
    letter-spacing: 0.03em;
}


/* Keep Project / Session / Timer on a common visual baseline. */
.hud-project-module {
    bottom: 14.7%;
}

.hud-session-module {
    bottom: 14.65%;
}

.hud-timer-module {
    bottom: 14.55%;
}


/* =========================================================
   RESPONSIVE SAFETY — MICRO REFINEMENT
   ========================================================= */




/* =========================================================
   53. PRINT STYLES
   ========================================================= */

/* Documents print from their own frame (js/record-sheet.js). */
@media print {
    .app-shell,
    .toast-region,
    dialog {
        display: none !important;
    }
}


/* =========================================================
   54. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================
   SESSION MODULE ORDER OVERRIDE
   LOG/LAB/INT/ARCH
   SESSION 002
   ========================================================== */

.hud-session-module{
    display:grid !important;
    grid-template-rows:auto auto !important;
    justify-items:center !important;
    align-items:center !important;
}

#hudRecordTag{
    order:1 !important;
}

#hudSession{
    order:2 !important;
}

/* ==========================================================
   HUD TIMER — OPTICAL HORIZONTAL ADJUSTMENT
   ========================================================== */

#hudTimer {
    transform: translateX(6px);
}

.hud-timer-module::after {
    transform: translateX(6px);
}

/* =========================================================
   LIVE LOOK PREVIEW
   Source footage only — HUD remains unaffected.
   All active Looks are now drawn by the shared GPU pipeline.
========================================================= */

.video-preview[data-look="none"],
.video-preview[data-look="cinematic"],
.video-preview[data-look="blue"],
.video-preview[data-look="grain"],
.video-preview[data-look="retro"] {
    filter: none;
}

/* =========================================================
   GPU LOOK PREVIEW
   Look canvas above footage, below documentary HUD.
========================================================= */

.video-look-preview {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
    pointer-events: none;
}

.video-look-preview[hidden] {
    display: none;
}

.video-preview--look-active {
    opacity: 0;
}

.look-preview-controls {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 12px 8px;
    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.8)
        );
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--hud-white);
    opacity: 0;
    transition: opacity 160ms ease;
}

.viewer-canvas:hover .look-preview-controls,
.look-preview-controls:focus-within {
    opacity: 1;
}

.look-preview-controls[hidden] {
    display: none;
}

.look-preview-controls__button {
    min-width: 34px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.45);
    color: inherit;
    font: inherit;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.look-preview-controls__button:hover {
    border-color: var(--accent);
    color: var(--accent-ink-strong);
}

.look-preview-controls__time {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.look-preview-controls__seek {
    flex: 1;
    min-width: 60px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* =========================================================
   HUD 9:16 CORRECTIONS (F02.8)
   ---------------------------------------------------------
   Same HUD, same styles. In the narrow vertical frame the
   bottom modules and the 6-column strip overlapped, so they
   are only repositioned: the strip wraps into 2 rows of 3 and
   the modules above it move up so nothing overlaps.
   ========================================================= */

.viewer-canvas[data-hud-layout="vertical"] .hud-technical-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.viewer-canvas[data-hud-layout="vertical"] .hud-technical-item {
    padding-top: min(calc(0.35 * var(--hud-vw, 1vw)), 6px);
    padding-bottom: min(calc(0.35 * var(--hud-vw, 1vw)), 6px);
}

.viewer-canvas[data-hud-layout="vertical"] .hud-technical-item:nth-child(3n) {
    border-right: 0;
}

.viewer-canvas[data-hud-layout="vertical"] .hud-technical-item:nth-child(-n + 3) {
    border-bottom: 1px solid var(--hud-line-soft);
}

/* Project (left) and timer (right) sit above the strip, which keeps its
   position. The strip height follows the text size (vw, capped), so the
   offset does too: strip bottom (6.8%) + strip height + gap. */
.viewer-canvas[data-hud-layout="vertical"] .hud-project-module {
    bottom: calc(6.8% + min(calc(4.4 * var(--hud-vw, 1vw)), 74px));
    max-width: 50%;
}

.viewer-canvas[data-hud-layout="vertical"] .hud-timer-module {
    bottom: calc(6.8% + min(calc(4.4 * var(--hud-vw, 1vw)), 74px));
}

/* Session centered in its own row above the timer. */
.viewer-canvas[data-hud-layout="vertical"] .hud-session-module {
    bottom: calc(6.8% + min(calc(4.4 * var(--hud-vw, 1vw)), 74px) + min(calc(4.2 * var(--hud-vw, 1vw)), 62px));
}


/* Smaller timer in 9:16; the module shrinks to the timer so the unit
   guide (HR MIN SEC FR) stays aligned under it. */
.viewer-canvas[data-hud-layout="vertical"] .hud-timer-module {
    width: max-content;
}

.viewer-canvas[data-hud-layout="vertical"] .hud-timer-module strong {
    font-size: min(calc(0.92 * var(--hud-vw, 1vw)), 16px) !important;
}

.viewer-canvas[data-hud-layout="vertical"] .hud-timer-module::after {
    font-size: min(calc(0.36 * var(--hud-vw, 1vw)), 6.5px);
}

/* 9:16: lighter top metadata; record type/session larger and lower,
   still above the project row. */
.viewer-canvas[data-hud-layout="vertical"] .hud-recording-module {
    gap: min(calc(0.7 * var(--hud-vw, 1vw)), 11px);
}

.viewer-canvas[data-hud-layout="vertical"] .hud-recording-module .hud-label {
    font-size: min(calc(0.38 * var(--hud-vw, 1vw)), 7px);
}

.viewer-canvas[data-hud-layout="vertical"] .hud-recording-module__row strong {
    font-size: min(calc(0.58 * var(--hud-vw, 1vw)), 10.5px);
}

.viewer-canvas[data-hud-layout="vertical"] .hud-session-module {
    bottom: calc(6.8% + min(calc(4.4 * var(--hud-vw, 1vw)), 74px) + min(calc(2.9 * var(--hud-vw, 1vw)), 42px));
}

.viewer-canvas[data-hud-layout="vertical"] .hud-session-module > span,
.viewer-canvas[data-hud-layout="vertical"] .hud-session-module > strong {
    font-size: min(calc(0.7 * var(--hud-vw, 1vw)), 11.5px) !important;
}

/* 9:16: slimmer technical grid (less inner space, same lines and type). */
.viewer-canvas[data-hud-layout="vertical"] .hud-technical-item {
    gap: min(calc(0.14 * var(--hud-vw, 1vw)), 2.5px);
    padding: min(calc(0.2 * var(--hud-vw, 1vw)), 3.5px) min(calc(0.55 * var(--hud-vw, 1vw)), 9px);
}

.viewer-canvas[data-hud-layout="vertical"] .hud-technical-item span,
.viewer-canvas[data-hud-layout="vertical"] .hud-technical-item strong {
    line-height: 1.1;
}

.viewer-canvas[data-hud-layout="vertical"] .hud-technical-strip {
    min-height: 0;
}


/* Fit = Blurred background (Preview). */
.video-blur-backdrop {
    position: absolute;
    z-index: 0;
    inset: -15%;
    width: 130%;
    max-width: none;
    height: 130%;
    max-height: none;
    display: none;
    object-fit: cover;
    filter: blur(14px) brightness(0.62);
    pointer-events: none;
}

.viewer-canvas[data-fit="blur"] .video-blur-backdrop {
    display: block;
}

.viewer-canvas[data-fit="blur"] .video-preview,
.viewer-canvas[data-fit="blur"] .video-look-preview {
    object-fit: contain;
    background: transparent;
}


/* 2.39:1: same HUD; the shorter frame put project/session/timer on top of
   the technical strip, so they sit above it by the strip height + gap. */
.viewer-canvas[data-hud-layout="cinema"] .hud-project-module,
.viewer-canvas[data-hud-layout="cinema"] .hud-session-module,
.viewer-canvas[data-hud-layout="cinema"] .hud-timer-module {
    bottom: calc(6.8% + min(calc(4 * var(--hud-vw, 1vw)), 44px) + 8px);
}

/* 2.39:1: project and timer a touch lower; record type/session unchanged. */
.viewer-canvas[data-hud-layout="cinema"] .hud-project-module,
.viewer-canvas[data-hud-layout="cinema"] .hud-timer-module {
    bottom: calc(6.8% + min(calc(4 * var(--hud-vw, 1vw)), 44px) + 3px);
}

/* Timer block as wide as its digits, so HR MIN SEC FR sit under their
   pairs in the Preview (the export already aligns them to the digits). */
.hud-timer-module {
    width: max-content !important;
}


/* Library storage meter (F03). */
.storage-meter {
    display: grid;
    gap: 6px;
    margin: 8px 0 12px;
    font-family: var(--font-mono);
}

.storage-meter__row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted, #9aa4a1);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.storage-meter__row span:last-child {
    color: var(--text-primary, #e9ecea);
}

.storage-meter__bar {
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(202, 224, 229, 0.12);
}

.storage-meter__bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 300ms ease;
}

.storage-meter__bar[data-level="warning"] span {
    background: var(--warning, #e1b85a);
}

.storage-meter__bar[data-level="critical"] span {
    background: #ff4a43;
}

.storage-meter small {
    color: var(--text-faint, #6f7a77);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.storage-meter__capacity {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.storage-meter__capacity input {
    width: 92px;
    height: 28px;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: calc(11px * var(--text-scale, 1));
}

.storage-meter__bar {
    background: var(--line-medium);
}


/* Library cards (F03 stage 5). */
.record-library-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px 11px;
    padding: 9px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.012);
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.record-library-card:hover {
    border-color: var(--line-medium);
    background-color: rgba(255, 255, 255, 0.022);
}

.record-library-card.is-active {
    border-color: var(--accent-medium);
    box-shadow: inset 2px 0 0 var(--accent);
}

.record-library-card.is-selected {
    border-color: var(--info);
    background-color: var(--info-soft);
}

.record-library-card__media {
    position: relative;
    align-self: start;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-xs);
    background: var(--bg-viewer);
}

.record-library-card__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.record-library-card__placeholder {
    display: grid;
    height: 100%;
    place-items: center;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.14em;
}

.record-library-card__select {
    position: absolute;
    top: 3px;
    left: 3px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 3px;
    background: rgba(2, 8, 11, 0.72);
    cursor: pointer;
}

.record-library-card__select input {
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: var(--info);
    cursor: pointer;
}

.record-library-card__body {
    display: grid;
    min-width: 0;
    gap: 3px;
    align-content: start;
}

.record-library-card__header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.record-library-card__header strong {
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-library-card__status {
    flex: none;
    padding: 1px 5px;
    border: 1px solid var(--line-medium);
    border-radius: 3px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.record-library-card__status[data-status="saved"] {
    border-color: rgba(111, 212, 154, 0.35);
    color: var(--success);
}

.record-library-card__status[data-status="modified"] {
    border-color: rgba(225, 184, 90, 0.4);
    color: var(--warning);
}

.record-library-card__unsaved {
    margin: 2px 0 0;
    color: var(--warning);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.record-library-card__unsaved::before {
    content: "● ";
    animation: viewer-state-pulse 1.6s ease-in-out infinite;
}

.record-library-card__project {
    overflow: hidden;
    margin: 0;
    color: var(--text-primary);
    font-size: calc(12.5px * var(--text-scale, 1));
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-library-card__meta,
.record-library-card__source {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    gap: 2px 5px;
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.04em;
}

.record-library-card__source span:first-child {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-library-card__meta i,
.record-library-card__source i {
    color: var(--text-faint);
    font-style: normal;
}

.record-library-card__actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 4px;
}

.record-library-card__action {
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.1em;
    cursor: pointer;
}

.record-library-card__action:hover {
    border-color: var(--line-strong);
    color: var(--text-primary);
}

.record-library-card__action.is-primary {
    border-color: var(--accent-medium);
    color: var(--accent-ink);
}

.record-library-card__action.is-primary:hover {
    background: var(--accent-soft);
}

.record-library-card__action.is-danger {
    margin-left: auto;
}

.record-library-card__action.is-danger:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* Tooltip card (js/tooltip.js). */
.thse-tooltip {
    --arrow-x: 50%;
    position: fixed;
    z-index: 1000;
    max-width: 240px;
    padding: 7px 10px;
    border: 1px solid var(--accent-medium);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--bg-tooltip), var(--bg-panel));
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(var(--accent-rgb), 0.06),
        inset 0 1px 0 rgba(var(--accent-strong-rgb), 0.12);
    color: var(--accent-ink-strong);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--text-scale, 1));
    letter-spacing: 0.08em;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.97);
    top: 0;
    left: 0;
    will-change: translate, transform, opacity;
    transition:
        opacity 80ms ease,
        transform 100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.thse-tooltip[data-placement="below"] {
    transform: translateY(-4px) scale(0.97);
}

.thse-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.thse-tooltip::after {
    content: "";
    position: absolute;
    left: clamp(10px, var(--arrow-x), calc(100% - 10px));
    bottom: -5px;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--accent-medium);
    border-bottom: 1px solid var(--accent-medium);
    background: var(--bg-panel);
    transform: translateX(-50%) rotate(45deg);
}

.thse-tooltip[data-placement="below"]::after {
    top: -5px;
    bottom: auto;
    border: 0;
    border-top: 1px solid var(--accent-medium);
    border-left: 1px solid var(--accent-medium);
    background: var(--bg-tooltip);
}

@media (prefers-reduced-motion: reduce) {
    .thse-tooltip {
        transition: opacity 100ms linear;
        transform: none;
    }
}

/* Fields still needed to save (hovering a disabled SAVE). */
.form-field.needs-attention input,
.form-field.needs-attention textarea {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Refused action: short horizontal shake. */
@keyframes thse-deny-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

.is-denied {
    animation: thse-deny-shake 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .is-denied {
        animation: none;
    }
}

/* Groups, progressive loading and batch bar. */
.library-group {
    display: grid;
    gap: 8px;
}

.library-group[open] {
    margin-bottom: 6px;
}

.library-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--line-medium);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--text-scale, 1));
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.library-group__header::-webkit-details-marker {
    display: none;
}

.library-group__header::before {
    content: "▾";
    margin-right: 6px;
    color: var(--text-faint);
}

.library-group:not([open]) .library-group__header::before {
    content: "▸";
}

.library-group__header span:first-child {
    flex: 1;
}

.library-group__count {
    color: var(--text-faint);
}

.library-session {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0 14px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.14em;
}

.library-session::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-soft);
    order: 1;
}

.library-session__count {
    order: 2;
    color: var(--text-faint);
}

.library-more {
    min-height: 32px;
    border: 1px dashed var(--line-medium);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.12em;
    cursor: pointer;
}

.library-more:hover {
    border-color: var(--line-strong);
    color: var(--text-primary);
}

.library-batch {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border: 1px solid var(--info);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--info);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.library-batch[hidden] {
    display: none;
}

.library-batch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.library-batch__actions button {
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.1em;
    cursor: pointer;
}

.library-batch__actions button:hover {
    color: var(--text-primary);
    border-color: var(--line-strong);
}

.library-batch__actions button.is-danger:hover {
    border-color: var(--danger);
    color: var(--danger);
}


/* Record log (F03). */
.journal {
    margin-top: 14px;
    gap: 8px;
}

.journal__list {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.journal__list li {
    display: grid;
    gap: 3px;
    padding: 7px 9px;
    border-left: 2px solid var(--accent-medium, rgba(var(--accent-rgb), 0.26));
    background: rgba(255, 255, 255, 0.02);
}

.journal__list time {
    color: var(--text-muted, #9aa4a1);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

.journal__list p {
    margin: 0;
    font-size: calc(12px * var(--text-scale, 1));
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Suggestion lists in the interface style (js/combobox.js). */
.combo {
    position: relative;
    display: block;
}

.combo > input {
    width: 100%;
    padding-right: 34px;
}

.combo__toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 30px;
    border: 0;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: transparent;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.combo__toggle:hover,
.combo.is-open .combo__toggle {
    color: var(--accent-ink);
}

.combo__list {
    position: fixed;
    z-index: 1200;
    max-height: 260px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--accent-medium);
    border-radius: var(--radius-xs);
    background: var(--bg-panel);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
    animation: combo-in 0.12s ease-out;
    scrollbar-width: thin;
}

@keyframes combo-in {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
}

.combo__option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
}

.combo__option strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--text-scale, 1));
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.combo__option span {
    overflow: hidden;
    font-size: calc(11.5px * var(--text-scale, 1));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combo__option small {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.combo__option:hover,
.combo__option.is-active {
    background: var(--accent-soft);
}

.combo__option:hover strong,
.combo__option.is-active strong,
.combo__option.is-current strong {
    color: var(--accent-ink-strong);
}

.combo__option--extra:first-child {
    margin-top: 0;
    border-top: 0;
}

.combo__option--extra {
    margin-top: 3px;
    border-top: 1px dashed var(--line-medium);
    border-radius: 0 0 3px 3px;
}

.combo__option--extra strong {
    color: var(--accent-ink);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}


/* =========================================================
   F04 STAGE 3 · SHORTCUTS, SFX VOLUME, ACCESSIBILITY
   ========================================================= */

.switch-control input:focus-visible + .switch-control__track {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

.icon-button--square {
    min-width: 32px;
    width: 32px;
    padding: 0;
    font-size: calc(13px * var(--text-scale, 1));
    font-weight: 700;
}

/* SFX volume: opens under the SFX button. */
.sfx-popover {
    position: fixed;
    z-index: 1300;
    display: grid;
    gap: 8px;
    width: 200px;
    padding: 12px 14px;
    border: 1px solid var(--accent-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
    animation: combo-in 0.12s ease-out;
}

.sfx-popover[hidden] {
    display: none;
}

.sfx-popover__label {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.14em;
}

.sfx-popover__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
}

.sfx-range output {
    color: var(--accent-ink-strong);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    text-align: right;
}

.sfx-range input[type="range"] {
    width: 100%;
    height: 18px;
    margin: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.sfx-range input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent) var(--fill, 70%), var(--line-medium) var(--fill, 70%));
}

.sfx-range input[type="range"]::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -5px;
    border: 2px solid var(--bg-panel);
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 0 1px var(--accent);
    appearance: none;
}

.sfx-range input[type="range"]::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: var(--line-medium);
}

.sfx-range input[type="range"]::-moz-range-progress {
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
}

.sfx-range input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: 2px solid var(--bg-panel);
    border-radius: 50%;
    background: var(--accent-strong);
}

/* Shortcut guide. */
/* Two columns so the whole guide fits a laptop screen at 125 %. */
.shortcuts-dialog {
    width: min(94vw, 760px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.shortcuts-dialog form {
    padding: 18px 22px;
}

.shortcuts-dialog h2 {
    margin-bottom: 4px;
}

.shortcut-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px 26px;
    margin: 8px 0 14px;
}

@media (max-width: 640px) {
    .shortcut-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.shortcut-group h3 {
    margin: 0 0 6px;
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.shortcut-group dl {
    display: grid;
    margin: 0;
}

.shortcut-group dl > div {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--line-soft);
}

.shortcut-group dt {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: calc(10px * var(--text-scale, 1));
}

.shortcut-group dd {
    margin: 0;
    color: var(--text-secondary);
    font-size: calc(11.5px * var(--text-scale, 1));
}

.shortcut-group kbd {
    min-width: 20px;
    padding: 2px 6px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    text-align: center;
}

/* Reduced motion (Windows: Settings › Accessibility › Visual effects). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.shortcut-column {
    display: grid;
    gap: 14px;
}


/* =========================================================
   F04 STAGE 4 · FIELD HINTS AND GENERATION SUMMARY
   ========================================================= */

.field-hint {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: calc(10.5px * var(--text-scale, 1));
    line-height: 1.4;
}

.field-hint::before {
    content: "· ";
}

.field-hint[data-level="warn"] {
    color: var(--warning);
}

.field-hint[data-level="warn"]::before {
    content: "▲ ";
    font-size: calc(9.5px * var(--text-scale, 1));
}

.field-hint[data-level="error"] {
    color: var(--danger, #e06a5f);
}

.field-hint[data-level="error"]::before {
    content: "✕ ";
    font-size: calc(10.5px * var(--text-scale, 1));
}

.summary-dialog {
    width: min(94vw, 720px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.summary-dialog form {
    padding: 18px 22px;
}

.summary-attentions {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(225, 184, 90, 0.35);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    background: rgba(225, 184, 90, 0.06);
}

.summary-attentions strong {
    color: var(--warning);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.14em;
}

.summary-attentions ul {
    display: grid;
    gap: 4px;
    margin: 7px 0 0;
    padding-left: 16px;
    color: var(--text-primary);
    font-size: calc(11.5px * var(--text-scale, 1));
    line-height: 1.45;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 26px;
    margin: 10px 0 12px;
}

.summary-grid section:last-child {
    grid-column: 1 / -1;
}

.summary-grid h3 {
    margin: 0 0 6px;
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.summary-grid dl {
    display: grid;
    margin: 0;
}

.summary-grid dl > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--line-soft);
}

.summary-grid dt {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.summary-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: calc(11.5px * var(--text-scale, 1));
}

.summary-note {
    margin: 0 0 12px !important;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
}

@media (max-width: 640px) {
    .summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* A date in 2125 (see js/preflight.js): a soft light-blue glow that
   rises, holds, and fades slowly, 7 times (like fairy lights on
   their gentle pulse setting). It also takes over the focus ring
   and the hover, so the gold styles never hide it. */
.form-field.is-lore input,
.form-field.is-lore input:focus,
.form-field.is-lore input:focus-visible {
    outline-color: rgba(143, 214, 255, 0.5);
    animation: lore-glow 1714ms ease-in-out 7; /* 12 s in all */
}

.form-field.is-lore input:hover {
    background: rgba(143, 214, 255, 0.07);
    color: #d8f1ff;
}

@keyframes lore-glow {
    0%, 100% {
        border-color: var(--line-medium);
        box-shadow: none;
    }

    30%, 60% {
        border-color: #8fd6ff;
        box-shadow: 0 0 0 1px rgba(143, 214, 255, 0.45), 0 0 16px rgba(143, 214, 255, 0.32);
    }
}


/* Recording date: DD/MM/YYYY while editing, 29 SEP 2026 otherwise
   (js/date-field.js), with the browser's calendar on ▦. */
.date-field {
    position: relative;
    display: block;
}

.date-field > input[type="text"] {
    width: 100%;
    padding-right: 36px;
}

.date-field__calendar {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.date-field__calendar svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
}

.date-field__calendar:hover {
    color: var(--accent-ink);
}

.date-field__picker {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* LIBRARY tab during the date detail (js/app.js): the same rhythm as
   the fields, only a faint light-blue light. */
.sidebar-tab.is-lore {
    animation: lore-tab-glow 1714ms ease-in-out 7;
}

@keyframes lore-tab-glow {
    0%, 100% {
        text-shadow: none;
        box-shadow: none;
    }

    30%, 60% {
        color: #bfe8ff;
        text-shadow: 0 0 8px rgba(143, 214, 255, 0.35);
        box-shadow: inset 0 -2px 0 rgba(143, 214, 255, 0.35);
    }
}

/* The revealed built-in card: its outline glows light blue, slower
   and silent, until its LOAD is pressed (js/app.js). */
.record-library-card.is-lore-card {
    animation: lore-card-glow 3.4s ease-in-out infinite;
}

@keyframes lore-card-glow {
    0%, 100% {
        border-color: var(--line-medium);
        box-shadow: none;
    }

    35%, 65% {
        border-color: rgba(143, 214, 255, 0.75);
        box-shadow: 0 0 0 1px rgba(143, 214, 255, 0.3), 0 0 18px rgba(143, 214, 255, 0.18);
    }
}


/* =========================================================
   F04 STAGE 5 · 04 PROJECTS TAB
   ========================================================= */

.projects-panel__note {
    margin: -2px 0 2px;
    color: var(--text-muted);
    font-size: calc(10.5px * var(--text-scale, 1));
    line-height: 1.45;
}

.projects-panel__row {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}

.register-action {
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.08em;
    cursor: pointer;
}

.register-action:hover:not(:disabled) {
    border-color: var(--accent-medium);
    color: var(--accent-ink-strong);
}

.register-action--danger:hover:not(:disabled) {
    border-color: rgba(228, 108, 108, 0.5);
    color: var(--danger);
}

.register-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.projects-panel__edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-column: 1 / -1;
    gap: 6px;
    width: 100%;
}

.projects-panel__edit:has(input + input) {
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
}

.projects-panel__edit input {
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-xs);
    background: var(--bg-field);
    color: var(--text-primary);
    font-size: calc(11px * var(--text-scale, 1));
}

.projects-panel__error {
    grid-column: 1 / -1;
    color: var(--danger);
    font-size: calc(10.5px * var(--text-scale, 1));
}

.projects-panel__error:empty {
    display: none;
}

#fileTypeInput {
    width: 100%;
}

/* Former names under a register entry (saved records may use them). */
.register-former {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
    font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   F04 STAGE 6 · RECENTLY DELETED, UNDO, ONE TAB
   ========================================================= */

.projects-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.trash-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.trash-row strong {
    font-size: calc(10px * var(--text-scale, 1));
}

.toast-message__action {
    flex: none;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(var(--toast-rgb), 0.55);
    border-radius: var(--radius-xs);
    background: rgba(var(--toast-rgb), 0.1);
    color: var(--toast-text);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.toast-message__action:hover {
    background: rgba(var(--toast-rgb), 0.22);
}

.app-dialog__body {
    padding: 22px;
}


/* Settings (F04 stage 7). */
.settings-dialog {
    width: min(94vw, 520px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.settings-dialog form {
    display: grid;
    gap: 12px;
    padding: 18px 22px;
}

.settings-dialog h2 {
    margin-bottom: 0;
}

.settings-group {
    display: grid;
    gap: 6px;
}

.settings-group h3 {
    margin: 0 0 2px;
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.settings-range__control {
    display: grid;
    grid-template-columns: 150px 38px;
    align-items: center;
    gap: 10px;
}

.settings-select {
    width: auto;
    min-width: 132px;
    min-height: 32px;
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: calc(11px * var(--text-scale, 1));
    letter-spacing: 0.08em;
}

.settings-dialog .dialog-actions {
    margin-top: 4px;
}

/* Grouped notices: the same message again shows ×N. */
.toast-message > .toast-message__count {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid var(--line-medium);
    border-radius: 999px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.06em;
}

.toast-message.is-bumped {
    animation: toast-bump 0.28s ease-out;
}

@keyframes toast-bump {
    40% { transform: translateX(-4px); }
}

/* The search field has its own clear button: hide the browser's. */
input[type="search"]::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}


/* =========================================================
   F06 · LIBRARY FOLDER
   ========================================================= */

.library-folder__status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 8px;
    font-family: var(--font-mono);
}

.library-folder__status strong {
    color: var(--text-primary);
    font-size: calc(11px * var(--text-scale, 1));
    letter-spacing: 0.08em;
}

.library-folder__status small {
    grid-column: 2;
    overflow: hidden;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-folder__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
}

.library-folder-panel[data-state="connected"] .library-folder__dot {
    background: var(--success);
    box-shadow: 0 0 8px rgba(111, 212, 154, 0.55);
}

.library-folder-panel[data-state="syncing"] .library-folder__dot {
    background: var(--info);
    animation: library-folder-pulse 1s ease-in-out infinite alternate;
}

.library-folder-panel[data-state="reconnect"] .library-folder__dot,
.library-folder-panel[data-state="unavailable"] .library-folder__dot {
    background: var(--warning);
}

@keyframes library-folder-pulse {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .library-folder-panel[data-state="syncing"] .library-folder__dot {
        animation: none;
    }
}

/* Rendered video from the library folder: covers the live viewer,
   whose HUD is already burned into this video. */
.rendered-player {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: clamp(10px, 1.8vw, 24px);
    background: var(--bg-viewer);
}

.rendered-player[hidden] {
    display: none;
}

.rendered-player__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.rendered-player__label {
    overflow: hidden;
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rendered-player__video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #000;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}

/* Plan mark in the HUD (F07): burned into the export like the rest. */
.hud-plan-mark {
    position: absolute;
    z-index: 2;
    color: var(--hud-white);
    font-family: var(--font-mono);
    letter-spacing: 0.22em;
    pointer-events: none;
    white-space: nowrap;
}

.hud-plan-mark[hidden] {
    display: none;
}

.hud-plan-mark[data-mark="line"] {
    top: 3.2%;
    left: 50%;
    transform: translateX(-50%);
    font-size: min(calc(0.62 * var(--hud-vw, 1vw)), 11px);
    opacity: 0.82;
}

.hud-plan-mark[data-mark="discreet"] {
    top: 2.4%;
    left: 2.2%;
    font-size: min(calc(0.46 * var(--hud-vw, 1vw)), 8px);
    opacity: 0.55;
}

/* Not included in the plan (F07): visibly unavailable, reason on hover. */
.record-library-card__action:disabled,
.format-chip:disabled {
    opacity: 0.36;
    cursor: not-allowed;
}


/* =========================================================
   F07 · HOME (account, plan, enter)
   ========================================================= */

.home-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), 0.08), transparent 55%),
        var(--bg-page);
}

.home-screen[hidden] {
    display: none;
}

.home-card {
    display: grid;
    gap: 18px;
    width: min(420px, 100%);
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.home-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-brand img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
}

.home-brand h1 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(18px * var(--text-scale, 1));
    letter-spacing: 0.24em;
}

.home-brand p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: calc(12px * var(--text-scale, 1));
}

.home-plan {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--bg-panel-soft);
}

.home-plan strong {
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: calc(14px * var(--text-scale, 1));
    letter-spacing: 0.16em;
}

.home-plan small {
    color: var(--text-secondary);
    font-size: calc(11.5px * var(--text-scale, 1));
    line-height: 1.5;
}

.home-signin {
    display: grid;
    gap: 10px;
}

.home-signin[hidden],
.home-account[hidden] {
    display: none;
}

.home-signin .form-field {
    display: grid;
    gap: 4px;
}

.home-signin .form-field span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--text-scale, 1));
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-signin input {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--bg-field);
    font: inherit;
}

.home-signin input:focus {
    border-color: var(--accent);
    outline: none;
}

.home-message {
    min-height: 1.4em;
    margin: 0;
    color: var(--text-secondary);
    font-size: calc(11.5px * var(--text-scale, 1));
    line-height: 1.45;
}

.home-message[data-level="error"] {
    color: var(--danger);
}

.home-message[data-level="success"] {
    color: var(--success);
}

.home-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.home-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
}

.home-account {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: calc(12px * var(--text-scale, 1));
}

.home-enter {
    min-height: 44px;
    letter-spacing: 0.2em;
}

.home-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.12em;
}

.home-footer__links {
    display: flex;
    gap: 10px;
}

.home-footer a {
    color: var(--text-muted);
    text-decoration: none;
}

.home-footer a:hover {
    color: var(--accent-ink);
}

@media (max-width: 420px) {
    .home-actions {
        grid-template-columns: 1fr;
    }
}

.settings-link {
    display: inline-grid;
    place-items: center;
    margin-left: 6px;
    text-decoration: none;
}

.home-signin .form-field[hidden] {
    display: none;
}

/* HOME · plans and payments */
.home-billing {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.home-billing[hidden] {
    display: none;
}

.home-cycle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.home-cycle__option,
.home-plan-option {
    min-height: 34px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--bg-field);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.12em;
    cursor: pointer;
}

.home-cycle__option[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent-ink);
}

.home-plan-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.home-plan-option {
    display: grid;
    gap: 3px;
    padding: 8px 6px;
    text-align: center;
}

.home-plan-option strong {
    color: var(--text-primary);
    font-size: calc(11px * var(--text-scale, 1));
    letter-spacing: 0.16em;
}

.home-plan-option small {
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
    letter-spacing: 0.04em;
}

.home-plan-option:hover:not(:disabled),
.home-cycle__option:hover:not(:disabled) {
    border-color: var(--accent);
}

.home-plan-option[data-current="true"] {
    border-color: var(--accent);
}

.home-plan-option[data-current="true"] small {
    color: var(--accent-ink);
}

.home-plan-option:disabled,
.home-cycle__option:disabled {
    cursor: default;
}

@media (max-width: 420px) {
    .home-plan-options {
        grid-template-columns: 1fr;
    }
}

/* HOME · account actions read as buttons */
.home-account__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.home-account__actions > button {
    flex: 1 1 auto;
    min-height: 32px;
    padding: 0 12px;
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.12em;
}

.home-account__actions > button[hidden],
.home-cycle[hidden],
.home-plan-options[hidden] {
    display: none;
}

/* Account limit dialog (computers, libraries) */
.limit-list {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}

.limit-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-panel-soft);
}

.limit-list li span {
    display: grid;
    gap: 2px;
}

.limit-list li small,
.limit-note {
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale, 1));
}

.limit-list li button {
    min-height: 30px;
    padding: 0 12px;
    font-size: calc(10px * var(--text-scale, 1));
}

/* RECORD WITH CAMERA */
.camera-live {
    z-index: 2;
    transform: scaleX(1);
}

.camera-live[hidden] {
    display: none;
}

.camera-bar {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: var(--viewer-footer-height);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-panel-soft);
}

.camera-bar[hidden] {
    display: none;
}

.camera-bar__field {
    display: grid;
    gap: 3px;
    min-width: 150px;
    flex: 1 1 160px;
}

.camera-bar__field--short {
    flex: 0 1 120px;
    min-width: 110px;
}

.camera-bar__field span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.camera-bar__field select {
    min-height: 32px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--bg-field);
    font: inherit;
    font-size: calc(11px * var(--text-scale, 1));
}

.camera-bar__info {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    align-self: center;
}

.camera-bar__timer {
    margin-left: auto;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(14px * var(--text-scale, 1));
    letter-spacing: 0.1em;
    align-self: center;
}

.camera-bar[data-state="recording"] .camera-bar__timer {
    color: var(--danger);
}

.camera-bar__rec {
    min-width: 96px;
    min-height: 34px;
}

.camera-bar .camera-bar__rec.is-recording {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
    animation: camera-rec-pulse 1.2s ease-in-out infinite;
}

@keyframes camera-rec-pulse {
    50% { opacity: 0.72; }
}

.video-placeholder__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.video-placeholder__actions .secondary-button {
    min-width: 210px;
    margin: 0;
}

/* Camera bar: settings fold away to a REC pill over the picture */
.camera-bar {
    transition:
        left 220ms ease,
        right 220ms ease,
        bottom 220ms ease,
        padding 220ms ease,
        border-radius 220ms ease,
        background-color 220ms ease;
}

.camera-bar__toggle {
    align-self: center;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--bg-field);
    font-size: calc(13px * var(--text-scale, 1));
    line-height: 1;
    cursor: pointer;
}

.camera-bar__toggle:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
}

.camera-bar[data-collapsed="true"] {
    left: auto;
    right: 16px;
    bottom: calc(var(--viewer-footer-height) + 14px);
    padding: 6px 8px;
    border: 1px solid var(--line-medium);
    border-radius: 999px;
    background: rgba(5, 10, 12, 0.72);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.camera-bar[data-collapsed="true"] .camera-bar__field,
.camera-bar[data-collapsed="true"] .camera-bar__info,
.camera-bar[data-collapsed="true"] #cameraCloseButton {
    display: none;
}

.camera-bar[data-collapsed="true"] .camera-bar__timer {
    margin-left: 4px;
    font-size: calc(13px * var(--text-scale, 1));
}

.camera-bar[data-collapsed="true"] .camera-bar__toggle,
.camera-bar[data-collapsed="true"] .camera-bar__rec {
    border-radius: 999px;
}

.camera-bar[data-collapsed="true"] .camera-bar__rec {
    min-width: 84px;
    min-height: 30px;
}

/* Camera bar order: settings · status · REC · CLOSE · fold (always at
   the right edge, also on the folded pill). Everything sits on the
   same line as the fields' boxes. */
.camera-bar {
    align-items: flex-end;
    gap: 10px;
}

.camera-bar__field select,
.camera-bar__rec,
.camera-bar__close,
.camera-bar__toggle {
    height: 34px;
    min-height: 34px;
}

.camera-bar__close {
    padding: 0 14px;
}

.camera-bar__toggle {
    width: 34px;
}

.camera-bar__status {
    display: grid;
    gap: 3px;
    justify-items: end;
    margin-left: auto;
    min-width: 120px;
}

.camera-bar__status .camera-bar__info {
    min-height: 12px;
    font-size: calc(10.5px * var(--text-scale, 1));
    letter-spacing: 0.08em;
    align-self: auto;
}

.camera-bar__status .camera-bar__timer {
    display: flex;
    align-items: center;
    height: 34px;
    margin-left: 0;
    font-size: calc(16px * var(--text-scale, 1));
}

.camera-bar[data-collapsed="true"] .camera-bar__status {
    min-width: 0;
    margin-left: 0;
}

.camera-bar[data-collapsed="true"] .camera-bar__status .camera-bar__timer {
    height: 30px;
    padding: 0 4px;
    font-size: calc(13px * var(--text-scale, 1));
}

.camera-bar[data-collapsed="true"] .camera-bar__toggle {
    width: 30px;
    height: 30px;
    min-height: 30px;
}

@media (max-width: 980px) {
    .camera-bar__status {
        margin-left: 0;
    }
}

/* One line at every viewer width: the fields give way first. */
.camera-bar {
    flex-wrap: nowrap;
}

.camera-bar .camera-bar__field {
    min-width: 0;
    flex: 1 1 150px;
}

.camera-bar .camera-bar__field--short {
    flex: 0 0 96px;
}

.camera-bar__field select {
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
}

.camera-bar__status {
    flex: 0 0 auto;
    min-width: 92px;
}

.camera-bar__rec,
.camera-bar__close,
.camera-bar__toggle {
    flex: 0 0 auto;
}

/* Narrow viewer: settings on one line, controls under them. */
@media (max-width: 1040px) {
    .camera-bar:not([data-collapsed="true"]) {
        flex-wrap: wrap;
    }

    .camera-bar:not([data-collapsed="true"]) .camera-bar__field {
        flex: 1 1 30%;
        min-width: 110px;
    }

    .camera-bar:not([data-collapsed="true"]) .camera-bar__status {
        margin-left: auto;
    }
}

/* The fold button sits on the same line as REC and CLOSE. */
.camera-bar .camera-bar__toggle {
    align-self: flex-end;
}

.camera-bar[data-collapsed="true"] .camera-bar__toggle {
    align-self: center;
}


/* =========================================================
   NOTIFICATION HISTORY (bell in the header)
   ========================================================= */

.notification-bell {
    position: relative;
}

.notification-bell svg {
    display: block;
}

.notification-bell[data-unseen="true"]::after {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 0 2px var(--bg-header);
    content: "";
}

.notification-history {
    position: fixed;
    z-index: 1300;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(360px, calc(100vw - 16px));
    max-height: min(480px, calc(100vh - 80px));
    border: 1px solid var(--accent-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
    animation: combo-in 0.12s ease-out;
}

.notification-history[hidden] {
    display: none;
}

.notification-history__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.14em;
}

.notification-history__header .secondary-button {
    min-height: 26px;
    padding: 0 10px;
    font-size: calc(10px * var(--text-scale, 1));
}

.notification-history__list {
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
}

.notification-history__row {
    display: grid;
    gap: 4px;
    padding: 9px 14px 9px 12px;
    border-left: 2px solid var(--info);
}

.notification-history__row + .notification-history__row {
    border-top: 1px solid var(--line-soft);
}

.notification-history__row[data-type="success"] { border-left-color: var(--success); }
.notification-history__row[data-type="warning"] { border-left-color: var(--warning); }
.notification-history__row[data-type="error"] { border-left-color: var(--danger); }

.notification-history__meta {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--text-scale, 1));
    letter-spacing: 0.12em;
}

.notification-history__row p {
    margin: 0;
    color: var(--text-secondary);
    font-size: calc(12px * var(--text-scale, 1));
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.notification-history__empty {
    padding: 18px 14px;
    color: var(--text-muted);
    font-size: calc(12px * var(--text-scale, 1));
}


/* =========================================================
   PALETTES (Settings › Palette)
   ---------------------------------------------------------
   Original is :root above. Each palette swaps the panel's tokens,
   the viewer's included (empty viewer, toolbar, footer); the picture
   itself stays black and the HUD keeps its color (it follows the
   palette only with HUD COLOR › Theme).
   ========================================================= */

:root[data-palette="pink"] {
    --bg-viewer: #080406;
    --bg-viewer-bar: rgba(18, 9, 14, 0.96);
    --bg-placeholder: #0c0609;
    --viewer-glow: rgba(232, 111, 164, 0.07);
    --placeholder-glow: rgba(232, 111, 164, 0.1);
    --placeholder-line: rgba(243, 231, 238, 0.7);
    --bg-page: #0b0609;
    --bg-header: #12090e;
    --bg-sidebar: #12090e;
    --bg-panel: #170c13;
    --bg-panel-soft: #1b0f17;
    --bg-field: #10080d;
    --bg-field-hover: #170c13;
    --bg-overlay: rgba(11, 6, 9, 0.88);
    --bg-header-top: rgba(26, 13, 21, 0.98);
    --bg-header-bottom: rgba(15, 8, 12, 0.98);
    --bg-sidebar-top: rgba(23, 12, 19, 0.98);
    --bg-sidebar-bottom: rgba(16, 8, 13, 0.98);
    --bg-footer-top: rgba(16, 8, 13, 0.98);
    --bg-footer-bottom: rgba(12, 6, 10, 0.99);
    --bg-menu: #1a0e16;
    --bg-dialog: #160b12;
    --bg-tooltip: #22101a;
    --bg-track: #10080d;
    --scroll-thumb: rgba(236, 190, 214, 0.22);
    --scroll-thumb-hover: rgba(236, 190, 214, 0.36);

    --line-soft: rgba(236, 190, 214, 0.09);
    --line-medium: rgba(236, 190, 214, 0.17);
    --line-strong: rgba(236, 190, 214, 0.3);

    --text-primary: #f7e4ee;
    --text-secondary: #d2a9bf;
    --text-muted: #a87c95;
    --text-faint: #7a5a6c;

    --accent-rgb: 232, 111, 164;
    --accent-strong-rgb: 246, 146, 192;
    --accent: #e86fa4;
    --accent-soft: rgba(232, 111, 164, 0.12);
    --accent-medium: rgba(232, 111, 164, 0.28);
    --accent-strong: #f692c0;

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #2c0f20;
    --toast-ink: #fbe7f1;
    --toast-ink-soft: rgba(251, 231, 241, 0.72);
    --success: #7ddca5;
    --success-rgb: 125, 220, 165;
    --success-soft: rgba(125, 220, 165, 0.12);
}

:root[data-palette="light"] {
    color-scheme: light;

    --bg-viewer: #ebe7dc;
    --bg-viewer-bar: rgba(255, 255, 255, 0.96);
    --bg-placeholder: #f8f6f0;
    --viewer-glow: rgba(184, 134, 43, 0.08);
    --placeholder-glow: rgba(184, 134, 43, 0.1);
    --placeholder-line: rgba(18, 17, 16, 0.6);
    --stage-grid: rgba(30, 26, 18, 0.035);

    --bg-page: #f3f0e8;
    --bg-header: #ffffff;
    --bg-sidebar: #faf8f3;
    --bg-panel: #ffffff;
    --bg-panel-soft: #f6f3ec;
    --bg-field: #ffffff;
    --bg-field-hover: #f8f5ee;
    --bg-overlay: rgba(243, 240, 232, 0.9);
    --bg-header-top: rgba(255, 255, 255, 0.98);
    --bg-header-bottom: rgba(250, 248, 243, 0.98);
    --bg-sidebar-top: rgba(250, 248, 243, 0.98);
    --bg-sidebar-bottom: rgba(244, 241, 233, 0.98);
    --bg-footer-top: rgba(250, 248, 243, 0.98);
    --bg-footer-bottom: rgba(244, 241, 233, 0.99);
    --bg-menu: #ffffff;
    --bg-dialog: #ffffff;
    --bg-tooltip: #fbf3e2;
    --bg-track: #e7e2d6;
    --scroll-thumb: rgba(30, 26, 18, 0.22);
    --scroll-thumb-hover: rgba(30, 26, 18, 0.38);

    --line-soft: rgba(30, 26, 18, 0.09);
    --line-medium: rgba(30, 26, 18, 0.17);
    --line-strong: rgba(30, 26, 18, 0.32);

    --text-primary: #121110;
    --text-secondary: #3f3b33;
    --text-muted: #6a6457;
    --text-faint: #8d877a;

    --accent-rgb: 184, 134, 43;
    --accent-strong-rgb: 143, 100, 22;
    --accent: #b8862b;
    --accent-soft: rgba(184, 134, 43, 0.12);
    --accent-medium: rgba(184, 134, 43, 0.34);
    --accent-strong: #8f6416;
    --accent-ink: #84590f;
    --accent-ink-strong: #6b470a;
    --accent-hover: #cc9a3d;
    --on-danger: #ffffff;

    --success: #11683a;
    --success-soft: rgba(17, 104, 58, 0.12);
    --warning: #a8781c;
    --warning-soft: rgba(168, 120, 28, 0.1);
    --danger: #c0392b;
    --danger-soft: rgba(192, 57, 43, 0.1);
    --info: #2f7aa3;
    --info-soft: rgba(47, 122, 163, 0.1);

    --shadow-small: 0 4px 16px rgba(40, 32, 16, 0.08);
    --shadow-medium: 0 16px 48px rgba(40, 32, 16, 0.12);
    --shadow-large: 0 24px 80px rgba(40, 32, 16, 0.18);

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #17140d;
    --toast-ink: #f7f0e1;
    --toast-ink-soft: rgba(247, 240, 225, 0.75);
    --success-rgb: 17, 104, 58;
    --success-chip: #d3efdc;
}

/* Light palettes: native date and time pickers in light. */
:root[data-palette="light"] input[type="date"],
:root[data-palette="light"] input[type="time"],
:root[data-palette="bubblegum"] input[type="date"],
:root[data-palette="bubblegum"] input[type="time"],
:root[data-palette="sky"] input[type="date"],
:root[data-palette="sky"] input[type="time"],
:root[data-palette="wheat"] input[type="date"],
:root[data-palette="wheat"] input[type="time"],
:root[data-palette="sunflower"] input[type="date"],
:root[data-palette="sunflower"] input[type="time"] {
    color-scheme: light;
}

/* Bubblegum: light, bubblegum pink on soft pink, plum text. */
:root[data-palette="bubblegum"] {
    color-scheme: light;

    --bg-page: #fff0f6;
    --bg-header: #ffffff;
    --bg-sidebar: #fff6fa;
    --bg-panel: #ffffff;
    --bg-panel-soft: #ffeef6;
    --bg-field: #ffffff;
    --bg-field-hover: #fff4f9;
    --bg-overlay: rgba(255, 240, 246, 0.9);
    --bg-header-top: rgba(255, 255, 255, 0.98);
    --bg-header-bottom: rgba(255, 244, 249, 0.98);
    --bg-sidebar-top: rgba(255, 246, 250, 0.98);
    --bg-sidebar-bottom: rgba(255, 236, 245, 0.98);
    --bg-footer-top: rgba(255, 246, 250, 0.98);
    --bg-footer-bottom: rgba(255, 236, 245, 0.99);
    --bg-menu: #ffffff;
    --bg-dialog: #ffffff;
    --bg-tooltip: #ffe8f2;
    --bg-track: #ffd3e6;
    --scroll-thumb: rgba(122, 28, 80, 0.22);
    --scroll-thumb-hover: rgba(122, 28, 80, 0.38);

    --bg-viewer: #ffe4f0;
    --bg-viewer-bar: rgba(255, 255, 255, 0.96);
    --bg-placeholder: #fff6fa;
    --viewer-glow: rgba(255, 79, 154, 0.1);
    --placeholder-glow: rgba(255, 79, 154, 0.12);
    --placeholder-line: rgba(58, 16, 41, 0.55);
    --stage-grid: rgba(122, 28, 80, 0.04);

    --line-soft: rgba(122, 28, 80, 0.1);
    --line-medium: rgba(122, 28, 80, 0.18);
    --line-strong: rgba(122, 28, 80, 0.32);

    --text-primary: #6a1449;
    --text-secondary: #842a5e;
    --text-muted: #995678;
    --text-faint: #a4708f;

    --accent-rgb: 255, 79, 154;
    --accent-strong-rgb: 224, 51, 127;
    --accent: #ff4f9a;
    --accent-soft: rgba(255, 79, 154, 0.12);
    --accent-medium: rgba(255, 79, 154, 0.34);
    --accent-strong: #e0337f;
    --accent-ink: #b8124f;
    --accent-ink-strong: #940c40;
    --accent-hover: #ff74b2;
    --on-accent: #2a0a1c;
    --on-danger: #ffffff;

    --success: #11683a;
    --success-soft: rgba(17, 104, 58, 0.12);
    --warning: #b0731a;
    --warning-soft: rgba(176, 115, 26, 0.1);
    --danger: #c62845;
    --danger-soft: rgba(198, 40, 69, 0.1);
    --info: #8a4fd6;
    --info-soft: rgba(138, 79, 214, 0.1);

    --shadow-small: 0 4px 16px rgba(122, 28, 80, 0.08);
    --shadow-medium: 0 16px 48px rgba(122, 28, 80, 0.12);
    --shadow-large: 0 24px 80px rgba(122, 28, 80, 0.18);

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #4b1032;
    --toast-ink: #ffe6f2;
    --toast-ink-soft: rgba(255, 230, 242, 0.75);
    --success-rgb: 17, 104, 58;
    --success-chip: #ccefd9;
}

:root[data-palette="mono"] {
    --bg-viewer: #000000;
    --bg-viewer-bar: rgba(7, 7, 7, 0.96);
    --bg-placeholder: #050505;
    --viewer-glow: rgba(255, 255, 255, 0.04);
    --placeholder-glow: rgba(255, 255, 255, 0.05);
    --placeholder-line: rgba(242, 242, 242, 0.7);
    --bg-page: #000000;
    --bg-header: #070707;
    --bg-sidebar: #080808;
    --bg-panel: #0d0d0d;
    --bg-panel-soft: #111111;
    --bg-field: #060606;
    --bg-field-hover: #0f0f0f;
    --bg-overlay: rgba(0, 0, 0, 0.88);
    --bg-header-top: rgba(14, 14, 14, 0.98);
    --bg-header-bottom: rgba(6, 6, 6, 0.98);
    --bg-sidebar-top: rgba(12, 12, 12, 0.98);
    --bg-sidebar-bottom: rgba(7, 7, 7, 0.98);
    --bg-footer-top: rgba(7, 7, 7, 0.98);
    --bg-footer-bottom: rgba(4, 4, 4, 0.99);
    --bg-menu: #101010;
    --bg-dialog: #0b0b0b;
    --bg-tooltip: #161616;
    --bg-track: #060606;
    --scroll-thumb: rgba(255, 255, 255, 0.22);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.38);

    --line-soft: rgba(255, 255, 255, 0.09);
    --line-medium: rgba(255, 255, 255, 0.18);
    --line-strong: rgba(255, 255, 255, 0.32);

    --text-primary: #f2f2f2;
    --text-secondary: #a8a8a8;
    --text-muted: #7c7c7c;
    --text-faint: #6e6e6e;

    --accent-rgb: 230, 230, 230;
    --accent-strong-rgb: 255, 255, 255;
    --accent: #e6e6e6;
    --accent-soft: rgba(230, 230, 230, 0.1);
    --accent-medium: rgba(230, 230, 230, 0.26);
    --accent-strong: #ffffff;

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #1c1c1c;
    --toast-ink: #f4f4f4;
    --toast-ink-soft: rgba(244, 244, 244, 0.72);
    --success: #7fe0a6;
    --success-rgb: 127, 224, 166;
    --success-soft: rgba(127, 224, 166, 0.12);
}


/* Sky: light, sky blue on airy white-blue, navy text. */
:root[data-palette="sky"] {
    color-scheme: light;

    --bg-page: #bfe2f8;
    --bg-header: #d9effc;
    --bg-sidebar: #cfe9fa;
    --bg-panel: #e2f2fd;
    --bg-panel-soft: #d2eafb;
    --bg-field: #f2f9ff;
    --bg-field-hover: #e9f5fe;
    --bg-overlay: rgba(191, 226, 248, 0.9);
    --bg-header-top: rgba(222, 241, 253, 0.98);
    --bg-header-bottom: rgba(206, 233, 251, 0.98);
    --bg-sidebar-top: rgba(210, 235, 251, 0.98);
    --bg-sidebar-bottom: rgba(194, 227, 249, 0.98);
    --bg-footer-top: rgba(206, 233, 251, 0.98);
    --bg-footer-bottom: rgba(192, 226, 248, 0.99);
    --bg-menu: #eaf6fe;
    --bg-dialog: #e2f2fd;
    --bg-tooltip: #d2eafb;
    --bg-track: #b3d9f2;
    --scroll-thumb: rgba(14, 58, 92, 0.22);
    --scroll-thumb-hover: rgba(14, 58, 92, 0.38);

    --bg-viewer: #b4dcf6;
    --bg-viewer-bar: rgba(214, 238, 252, 0.96);
    --bg-placeholder: #d8eefc;
    --viewer-glow: rgba(255, 255, 255, 0.35);
    --placeholder-glow: rgba(255, 255, 255, 0.5);
    --placeholder-line: rgba(13, 42, 64, 0.55);
    --stage-grid: rgba(14, 58, 92, 0.04);

    --line-soft: rgba(14, 58, 92, 0.1);
    --line-medium: rgba(14, 58, 92, 0.18);
    --line-strong: rgba(14, 58, 92, 0.32);

    --text-primary: #0e416b;
    --text-secondary: #265a84;
    --text-muted: #3c6a90;
    --text-faint: #4f7899;

    --accent-rgb: 40, 152, 224;
    --accent-strong-rgb: 18, 113, 178;
    --accent: #2898e0;
    --accent-soft: rgba(40, 152, 224, 0.16);
    --accent-medium: rgba(40, 152, 224, 0.42);
    --accent-strong: #1271b2;
    --accent-ink: #0b5d94;
    --accent-ink-strong: #074775;
    --accent-hover: #4aaceb;
    --on-accent: #041d31;
    --on-danger: #ffffff;

    --success: #0f6435;
    --success-soft: rgba(15, 100, 53, 0.12);
    --warning: #a06a12;
    --warning-soft: rgba(160, 106, 18, 0.1);
    --danger: #c0392b;
    --danger-soft: rgba(192, 57, 43, 0.1);
    --info: #1f6fa8;
    --info-soft: rgba(31, 111, 168, 0.1);

    --shadow-small: 0 4px 16px rgba(14, 58, 92, 0.08);
    --shadow-medium: 0 16px 48px rgba(14, 58, 92, 0.12);
    --shadow-large: 0 24px 80px rgba(14, 58, 92, 0.18);

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #0b2c48;
    --toast-ink: #e2f3ff;
    --toast-ink-soft: rgba(226, 243, 255, 0.75);
    --success-rgb: 15, 100, 53;
    --success-chip: #c6ecd4;
}

/* Jungle: dark, deep jungle green, leaf-green accent. */
:root[data-palette="jungle"] {
    --bg-page: #04100a;
    --bg-header: #07160d;
    --bg-sidebar: #08170e;
    --bg-panel: #0b1d12;
    --bg-panel-soft: #0e2216;
    --bg-field: #06130b;
    --bg-field-hover: #0b1c11;
    --bg-overlay: rgba(4, 16, 10, 0.88);
    --bg-header-top: rgba(12, 32, 20, 0.98);
    --bg-header-bottom: rgba(6, 20, 12, 0.98);
    --bg-sidebar-top: rgba(11, 29, 18, 0.98);
    --bg-sidebar-bottom: rgba(7, 21, 13, 0.98);
    --bg-footer-top: rgba(7, 21, 13, 0.98);
    --bg-footer-bottom: rgba(5, 16, 10, 0.99);
    --bg-menu: #0d2015;
    --bg-dialog: #0a1b10;
    --bg-tooltip: #102717;
    --bg-track: #06130b;
    --scroll-thumb: rgba(170, 226, 188, 0.22);
    --scroll-thumb-hover: rgba(170, 226, 188, 0.36);

    --bg-viewer: #030c07;
    --bg-viewer-bar: rgba(7, 21, 13, 0.96);
    --bg-placeholder: #06140b;
    --viewer-glow: rgba(74, 196, 116, 0.08);
    --placeholder-glow: rgba(74, 196, 116, 0.1);
    --placeholder-line: rgba(226, 242, 231, 0.7);

    --line-soft: rgba(170, 226, 188, 0.09);
    --line-medium: rgba(170, 226, 188, 0.17);
    --line-strong: rgba(170, 226, 188, 0.3);

    --text-primary: #e2f5e6;
    --text-secondary: #a3cfae;
    --text-muted: #79a685;
    --text-faint: #557a5e;

    --accent-rgb: 74, 196, 116;
    --accent-strong-rgb: 120, 224, 152;
    --accent: #4ac474;
    --accent-soft: rgba(74, 196, 116, 0.12);
    --accent-medium: rgba(74, 196, 116, 0.28);
    --accent-strong: #78e098;
    --on-accent: #03140a;

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #0f2c1a;
    --toast-ink: #e2f6e7;
    --toast-ink-soft: rgba(226, 246, 231, 0.72);
    --success: #b3ef6e;
    --success-rgb: 179, 239, 110;
    --success-soft: rgba(179, 239, 110, 0.12);
}

/* Volcano: dark earth brown, terracotta and lava orange. */
:root[data-palette="volcano"] {
    --bg-page: #120a06;
    --bg-header: #190e08;
    --bg-sidebar: #1a0f09;
    --bg-panel: #20130c;
    --bg-panel-soft: #25170f;
    --bg-field: #160c07;
    --bg-field-hover: #1f120b;
    --bg-overlay: rgba(18, 10, 6, 0.88);
    --bg-header-top: rgba(36, 21, 13, 0.98);
    --bg-header-bottom: rgba(23, 13, 8, 0.98);
    --bg-sidebar-top: rgba(32, 19, 12, 0.98);
    --bg-sidebar-bottom: rgba(23, 13, 8, 0.98);
    --bg-footer-top: rgba(23, 13, 8, 0.98);
    --bg-footer-bottom: rgba(17, 9, 5, 0.99);
    --bg-menu: #24160e;
    --bg-dialog: #1e120b;
    --bg-tooltip: #2b170c;
    --bg-track: #160c07;
    --scroll-thumb: rgba(236, 196, 170, 0.22);
    --scroll-thumb-hover: rgba(236, 196, 170, 0.36);

    --bg-viewer: #0d0704;
    --bg-viewer-bar: rgba(23, 13, 8, 0.96);
    --bg-placeholder: #150b06;
    --viewer-glow: rgba(226, 104, 50, 0.08);
    --placeholder-glow: rgba(226, 104, 50, 0.11);
    --placeholder-line: rgba(246, 231, 220, 0.7);

    --line-soft: rgba(236, 196, 170, 0.09);
    --line-medium: rgba(236, 196, 170, 0.17);
    --line-strong: rgba(236, 196, 170, 0.3);

    --text-primary: #f9e6d8;
    --text-secondary: #d9ab8d;
    --text-muted: #ae8366;
    --text-faint: #7e5d48;

    --accent-rgb: 226, 104, 50;
    --accent-strong-rgb: 255, 142, 77;
    --accent: #e26832;
    --accent-soft: rgba(226, 104, 50, 0.13);
    --accent-medium: rgba(226, 104, 50, 0.3);
    --accent-strong: #ff8e4d;
    --accent-ink: #f07a42;
    --on-accent: #1a0802;

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #33170a;
    --toast-ink: #fde8da;
    --toast-ink-soft: rgba(253, 232, 218, 0.72);
    --success: #86dba0;
    --success-rgb: 134, 219, 160;
    --success-soft: rgba(134, 219, 160, 0.12);
}

/* Wheat: light cream and beige, wheat-gold accent, brown text. */
:root[data-palette="wheat"] {
    color-scheme: light;

    --bg-page: #f5eedd;
    --bg-header: #fffaf0;
    --bg-sidebar: #faf4e6;
    --bg-panel: #fffbf3;
    --bg-panel-soft: #f6eedd;
    --bg-field: #fffdf8;
    --bg-field-hover: #fbf5e9;
    --bg-overlay: rgba(245, 238, 221, 0.9);
    --bg-header-top: rgba(255, 250, 240, 0.98);
    --bg-header-bottom: rgba(250, 244, 230, 0.98);
    --bg-sidebar-top: rgba(250, 244, 230, 0.98);
    --bg-sidebar-bottom: rgba(243, 234, 214, 0.98);
    --bg-footer-top: rgba(250, 244, 230, 0.98);
    --bg-footer-bottom: rgba(243, 234, 214, 0.99);
    --bg-menu: #fffbf3;
    --bg-dialog: #fffbf3;
    --bg-tooltip: #f6ead2;
    --bg-track: #e8dcc2;
    --scroll-thumb: rgba(74, 56, 30, 0.22);
    --scroll-thumb-hover: rgba(74, 56, 30, 0.38);

    --bg-viewer: #ece2cb;
    --bg-viewer-bar: rgba(255, 250, 240, 0.96);
    --bg-placeholder: #fbf6ea;
    --viewer-glow: rgba(201, 162, 101, 0.12);
    --placeholder-glow: rgba(201, 162, 101, 0.14);
    --placeholder-line: rgba(46, 36, 22, 0.55);
    --stage-grid: rgba(74, 56, 30, 0.04);

    --line-soft: rgba(74, 56, 30, 0.1);
    --line-medium: rgba(74, 56, 30, 0.18);
    --line-strong: rgba(74, 56, 30, 0.32);

    --text-primary: #523519;
    --text-secondary: #6b4a28;
    --text-muted: #7d6040;
    --text-faint: #8a7457;

    --accent-rgb: 201, 162, 101;
    --accent-strong-rgb: 166, 126, 66;
    --accent: #c9a265;
    --accent-soft: rgba(201, 162, 101, 0.16);
    --accent-medium: rgba(201, 162, 101, 0.42);
    --accent-strong: #a67e42;
    --accent-ink: #80602a;
    --accent-ink-strong: #654a1d;
    --accent-hover: #d6b47e;
    --on-accent: #2b2115;
    --on-danger: #ffffff;

    --success: #24702f;
    --success-soft: rgba(36, 112, 47, 0.12);
    --warning: #9a6512;
    --warning-soft: rgba(154, 101, 18, 0.1);
    --danger: #b3412e;
    --danger-soft: rgba(179, 65, 46, 0.1);
    --info: #3d6f92;
    --info-soft: rgba(61, 111, 146, 0.1);

    --shadow-small: 0 4px 16px rgba(74, 56, 30, 0.08);
    --shadow-medium: 0 16px 48px rgba(74, 56, 30, 0.12);
    --shadow-large: 0 24px 80px rgba(74, 56, 30, 0.18);

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #3b2d18;
    --toast-ink: #f9eedb;
    --toast-ink-soft: rgba(249, 238, 219, 0.75);
    --success-rgb: 36, 112, 47;
    --success-chip: #d2e8c6;
}

/* Sunflower: light pastel yellow, sunflower accent, dark brown text. */
:root[data-palette="sunflower"] {
    color-scheme: light;

    --bg-page: #f7df85;
    --bg-header: #fcecaa;
    --bg-sidebar: #fbe79a;
    --bg-panel: #fff1b8;
    --bg-panel-soft: #fae6a0;
    --bg-field: #fffae0;
    --bg-field-hover: #fff5c9;
    --bg-overlay: rgba(247, 223, 133, 0.9);
    --bg-header-top: rgba(253, 239, 180, 0.98);
    --bg-header-bottom: rgba(250, 229, 150, 0.98);
    --bg-sidebar-top: rgba(252, 235, 165, 0.98);
    --bg-sidebar-bottom: rgba(248, 225, 138, 0.98);
    --bg-footer-top: rgba(251, 232, 158, 0.98);
    --bg-footer-bottom: rgba(247, 222, 131, 0.99);
    --bg-menu: #fff4c6;
    --bg-dialog: #fff1b8;
    --bg-tooltip: #fae6a0;
    --bg-track: #ecd27a;
    --scroll-thumb: rgba(84, 66, 10, 0.22);
    --scroll-thumb-hover: rgba(84, 66, 10, 0.38);

    --bg-viewer: #f3d977;
    --bg-viewer-bar: rgba(252, 236, 170, 0.96);
    --bg-placeholder: #fcedb0;
    --viewer-glow: rgba(255, 250, 225, 0.4);
    --placeholder-glow: rgba(255, 250, 225, 0.55);
    --placeholder-line: rgba(47, 40, 14, 0.55);
    --stage-grid: rgba(84, 66, 10, 0.04);

    --line-soft: rgba(84, 66, 10, 0.1);
    --line-medium: rgba(84, 66, 10, 0.19);
    --line-strong: rgba(84, 66, 10, 0.33);

    --text-primary: #633f00;
    --text-secondary: #7a5306;
    --text-muted: #87631a;
    --text-faint: #86692a;

    --accent-rgb: 233, 154, 18;
    --accent-strong-rgb: 201, 128, 6;
    --accent: #e99a12;
    --accent-soft: rgba(233, 154, 18, 0.18);
    --accent-medium: rgba(201, 128, 6, 0.45);
    --accent-strong: #c98006;
    --accent-ink: #7a4c00;
    --accent-ink-strong: #5e3a00;
    --accent-hover: #f2ad35;
    --on-accent: #2e1f02;
    --on-danger: #ffffff;

    --success: #1d6b2c;
    --success-soft: rgba(29, 107, 44, 0.12);
    --warning: #9a6200;
    --warning-soft: rgba(154, 98, 0, 0.1);
    --danger: #b8392b;
    --danger-soft: rgba(184, 57, 43, 0.1);
    --info: #3b6a9c;
    --info-soft: rgba(59, 106, 156, 0.1);

    --shadow-small: 0 4px 16px rgba(84, 66, 10, 0.08);
    --shadow-medium: 0 16px 48px rgba(84, 66, 10, 0.12);
    --shadow-large: 0 24px 80px rgba(84, 66, 10, 0.18);

    /* Notices: a dark version of the palette, light text. */
    --toast-dark: #3a2c05;
    --toast-ink: #fff4c8;
    --toast-ink-soft: rgba(255, 244, 200, 0.75);
    --success-rgb: 29, 107, 44;
    --success-chip: #cfe9b4;
}


/* Notices follow the palette: a dark version of it (so they stand out
   on light panels too), light text and the palette's accent. */
:root[data-palette] {
    --toast-rgb: var(--accent-rgb);
    --toast-bg: var(--toast-dark);
    --toast-text: var(--toast-ink);
    --toast-text-soft: var(--toast-ink-soft);
    --toast-text-strong: #ffffff;
    --toast-shadow: rgba(0, 0, 0, 0.38);
    --sweep-neutral: var(--accent-soft);
}

/* Hover in the palette's color (Original keeps its own). */
:root[data-palette] :is(
    .icon-button,
    .secondary-button:not(:disabled),
    .viewer-tool-button,
    .search-field__clear,
    .record-library-card__action:not(.is-danger):not(:disabled),
    .library-more,
    .library-batch__actions button:not(.is-danger),
    .format-chip:not(:disabled),
    .register-action:not(.register-action--danger):not(:disabled),
    .camera-bar__toggle
):hover {
    border-color: var(--accent-medium);
    color: var(--accent-ink-strong);
}

:root[data-palette] .sidebar-tab:hover {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

:root[data-palette] .record-library-card:hover {
    border-color: var(--accent-medium);
    background-color: rgba(var(--accent-rgb), 0.06);
}


/* =========================================================
   CLOSE (X) of every pop-up window
   ========================================================= */

.dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: calc(17px * var(--text-scale, 1));
    line-height: 1;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast);
}

.dialog-close:hover,
.dialog-close:focus-visible {
    border-color: var(--accent-medium);
    background: var(--accent-soft);
    color: var(--accent-ink-strong);
}

.dialog-close--inline {
    position: static;
    width: 26px;
    height: 26px;
    font-size: calc(15px * var(--text-scale, 1));
}

.notification-history__tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Titles leave room for the X. */
.app-dialog:has(> .dialog-close) > form > h2 {
    padding-right: 36px;
}


/* =========================================================
   BUTTON HOVER: the fill glides in diagonally from the top left,
   the button lifts
   ========================================================= */

:root :is(
    .primary-button,
    .secondary-button,
    .danger-button,
    .icon-button,
    .viewer-tool-button,
    .small-action-button,
    .footer-action-button,
    .record-library-card__action,
    .register-action,
    .library-more,
    .format-chip
) {
    --sweep: var(--sweep-neutral);
    /* A diagonal fill with a soft edge, parked off the bottom right;
       on hover it glides in from the top left corner. */
    background-image: linear-gradient(135deg, var(--sweep) 0 44%, transparent 58% 100%);
    background-repeat: no-repeat;
    background-size: 300% 300%;
    background-position: 100% 100%;
    transition:
        background-position 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        background-color 420ms ease,
        border-color 260ms ease,
        color 260ms ease,
        transform 260ms ease,
        box-shadow 260ms ease;
}

:root .primary-button { --sweep: var(--accent-hover); }
:root .danger-button { --sweep: var(--danger); }
:root .record-library-card__action.is-danger,
:root .register-action--danger { --sweep: var(--danger-soft); }

:root :is(
    .primary-button,
    .secondary-button,
    .danger-button,
    .icon-button,
    .viewer-tool-button,
    .small-action-button,
    .footer-action-button,
    .record-library-card__action,
    .register-action,
    .library-more,
    .format-chip
):hover:not(:disabled) {
    background-image: linear-gradient(135deg, var(--sweep) 0 44%, transparent 58% 100%);
    background-repeat: no-repeat;
    background-size: 300% 300%;
    background-position: 0 0;
    transform: translateY(-2px);
    box-shadow: 0 7px 16px -8px rgba(var(--accent-rgb), 0.6);
}

/* The color under the sweep stays until the sweep covers it. */
:root .primary-button:hover:not(:disabled) {
    background-color: var(--accent);
}

:root .danger-button:hover:not(:disabled) {
    background-color: var(--danger-soft);
}

:root :is(
    .primary-button,
    .secondary-button,
    .danger-button,
    .icon-button,
    .viewer-tool-button,
    .small-action-button,
    .footer-action-button,
    .record-library-card__action,
    .register-action,
    .library-more,
    .format-chip
):active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    :root :is(
        .primary-button,
        .secondary-button,
        .danger-button,
        .icon-button,
        .viewer-tool-button,
        .small-action-button,
        .footer-action-button,
        .record-library-card__action,
        .register-action,
        .library-more,
        .format-chip
    ) {
        transition: none;
    }

    :root :is(
        .primary-button,
        .secondary-button,
        .danger-button,
        .icon-button,
        .viewer-tool-button,
        .small-action-button,
        .footer-action-button,
        .record-library-card__action,
        .register-action,
        .library-more,
        .format-chip
    ):hover:not(:disabled) {
        transform: none;
    }
}


/* =========================================================
   FUTURISTIC FINISH (2026-10-25)
   Every motion here stops with the system's "reduce motion".
   ========================================================= */

/* 1 · Tabs: one indicator glides to the open tab. */
.sidebar-tabs {
    position: relative;
    --tab: 0;
}

.sidebar-tabs:has(> .sidebar-tab:nth-child(2).is-active) { --tab: 1; }
.sidebar-tabs:has(> .sidebar-tab:nth-child(3).is-active) { --tab: 2; }
.sidebar-tabs:has(> .sidebar-tab:nth-child(4).is-active) { --tab: 3; }

.sidebar-tab.is-active {
    border-bottom-color: transparent;
}

.sidebar-tabs::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: calc(8px + (100% - 16px) / 4 * var(--tab));
    width: calc((100% - 16px) / 4);
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
    pointer-events: none;
    transition: left 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2 · Sections open and close smoothly. */
@supports selector(::details-content) {
    :root {
        interpolate-size: allow-keywords;
    }

    details::details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        transition:
            block-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
            opacity 260ms ease,
            content-visibility 320ms allow-discrete;
    }

    details[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* Touch screens: sections open with a fade only (no height animation,
   which makes a phone lay out the whole page on every frame). */
@supports selector(::details-content) {
    @media (pointer: coarse) {
        details::details-content {
            transition:
                opacity 220ms ease,
                content-visibility 220ms allow-discrete;
        }
    }
}

/* 5 · HUD corner marks: on library cards (hover, selected) and on
   the field being typed in. Drawn as backgrounds: no extra elements. */
:root {
    --hud-mark: 9px;
    --hud-mark-line: 1.5px;
}

.record-library-card,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea {
    --mark: transparent;
    background-image:
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark));
    background-repeat: no-repeat;
    background-size:
        var(--hud-mark) var(--hud-mark-line), var(--hud-mark-line) var(--hud-mark),
        var(--hud-mark) var(--hud-mark-line), var(--hud-mark-line) var(--hud-mark),
        var(--hud-mark) var(--hud-mark-line), var(--hud-mark-line) var(--hud-mark),
        var(--hud-mark) var(--hud-mark-line), var(--hud-mark-line) var(--hud-mark);
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
}

.record-library-card:hover,
.record-library-card.is-selected,
.record-library-card.is-active,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus {
    --mark: var(--accent);
}

/* 8 · The field being typed in glows in the palette's color. */
input:focus,
select:focus,
textarea:focus {
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.14),
        0 0 18px rgba(var(--accent-rgb), 0.22);
}

/* 3 · Library cards: a glow follows the pointer (js/app.js sets
   --glow-x / --glow-y). */
.record-library-card {
    position: relative;
    isolation: isolate;
}

.record-library-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        180px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(var(--accent-rgb), 0.16),
        transparent 70%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.record-library-card:hover::after {
    opacity: 1;
}

/* 6 · The empty viewer waits for a signal: a scan line sweeps it. */
.video-placeholder::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -20% 0 auto;
    height: 18%;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(var(--accent-rgb), 0.07) 70%,
        rgba(var(--accent-rgb), 0.22) 98%,
        transparent
    );
    pointer-events: none;
    animation: viewer-scan 5.5s linear infinite;
}

@keyframes viewer-scan {
    from { transform: translateY(0); }
    to { transform: translateY(720%); }
}

/* 7 · Export progress: a segmented instrument bar with phases. */
.export-overlay .progress-bar {
    height: 12px;
    border-radius: 3px;
    background: rgba(var(--accent-rgb), 0.12);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 12px);
    mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 12px);
}

.export-overlay .progress-bar__fill {
    border-radius: 0;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
}

#exportProgressPercent {
    color: var(--accent-ink-strong);
    font-size: calc(15px * var(--text-scale, 1));
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.export-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--text-scale, 1));
    letter-spacing: 0.14em;
}

.export-phases span {
    padding: 4px 0;
    border-top: 2px solid var(--line-medium);
    color: var(--text-faint);
    transition: color 300ms ease, border-color 300ms ease;
}

.export-phases span.is-done {
    border-top-color: var(--success);
    color: var(--success);
}

.export-phases span.is-current {
    border-top-color: var(--accent);
    color: var(--accent-ink-strong);
}

/* 9 · Glass: pop-ups, menus and notices blur what is behind them,
   and a very fine grain gives the surfaces some texture. */
.app-dialog,
.notification-history,
.sfx-popover,
.dropdown-menu {
    background-color: color-mix(in srgb, var(--bg-dialog) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
}

.app-dialog::backdrop {
    backdrop-filter: blur(6px);
}

.toast-message {
    backdrop-filter: blur(12px) saturate(1.2);
}

body::after {
    content: "";
    position: fixed;
    z-index: 2000;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* 10 · HOME: frame marks, a scan that sweeps constantly while HOME is
   open, and a boot sequence every time HOME appears (start, reload,
   SETTINGS › HOME, sign out: js/home.js adds .is-booting). HOME keeps
   these even with the system's reduce-motion: they are slow and
   gentle, and they are HOME's identity. */
.home-card {
    position: relative;
    overflow: hidden;
}

.home-card::before,
.home-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.home-card::before {
    inset: 10px;
    border-radius: calc(var(--radius-lg) - 4px);
    background:
        linear-gradient(var(--accent), var(--accent)) left top / 18px 1.5px,
        linear-gradient(var(--accent), var(--accent)) left top / 1.5px 18px,
        linear-gradient(var(--accent), var(--accent)) right top / 18px 1.5px,
        linear-gradient(var(--accent), var(--accent)) right top / 1.5px 18px,
        linear-gradient(var(--accent), var(--accent)) left bottom / 18px 1.5px,
        linear-gradient(var(--accent), var(--accent)) left bottom / 1.5px 18px,
        linear-gradient(var(--accent), var(--accent)) right bottom / 18px 1.5px,
        linear-gradient(var(--accent), var(--accent)) right bottom / 1.5px 18px;
    background-repeat: no-repeat;
    opacity: 0.7;
}

/* The constant scan. */
.home-card::after {
    inset: -30% 0 auto;
    height: 30%;
    background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.16), transparent);
    animation: home-scan 4.8s linear infinite;
}

/* The boot sequence. */
.home-card.is-booting::before {
    animation: home-marks 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.home-card.is-booting > * {
    animation: home-line 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.home-card.is-booting > :nth-child(1) { animation-delay: 80ms; }
.home-card.is-booting > :nth-child(2) { animation-delay: 200ms; }
.home-card.is-booting > :nth-child(3) { animation-delay: 320ms; }
.home-card.is-booting > :nth-child(4) { animation-delay: 440ms; }
.home-card.is-booting > :nth-child(n + 5) { animation-delay: 560ms; }

@keyframes home-marks {
    from { opacity: 0; inset: 40px; }
    to { opacity: 0.7; inset: 10px; }
}

@keyframes home-scan {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(480%); opacity: 0; }
}

@keyframes home-line {
    from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* SETTINGS › Scan line off: the line fades out while it keeps
   moving (and fades back in when turned on). */
.video-placeholder::before {
    transition: opacity 900ms ease;
}

:root[data-viewer-scan="off"] .video-placeholder::before {
    opacity: 0;
}

/* Number tickers (js/ui.js animateText): digits stay one width. */
#storageMeterText,
#libraryResultCount,
.export-progress-data {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-tabs::after,
    details::details-content {
        transition: none;
    }

    .video-placeholder::before {
        animation: none;
    }

    .video-placeholder::before {
        display: none;
    }
}

/* 11 · Command palette (Ctrl+K). */
.command-palette {
    width: min(92vw, 560px);
    margin-top: 12vh;
}

.command-palette form {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.command-palette #commandInput {
    height: 44px;
    font-size: calc(14px * var(--text-scale, 1));
}

.command-list {
    max-height: min(52vh, 420px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.command-list__item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.command-list__item[aria-selected="true"] {
    border-color: var(--accent-medium);
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

.command-list__group {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--text-scale, 1));
    letter-spacing: 0.14em;
}

.command-list__item strong {
    color: var(--text-primary);
    font-size: calc(13px * var(--text-scale, 1));
    font-weight: 500;
}

.command-list__item[aria-selected="true"] strong {
    color: var(--accent-ink-strong);
}

.command-list__item kbd {
    padding: 2px 6px;
    border: 1px solid var(--line-medium);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--text-scale, 1));
}

.command-list__empty {
    padding: 14px 10px;
    color: var(--text-muted);
    font-size: calc(12px * var(--text-scale, 1));
}

.command-palette__hint {
    margin: 0;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--text-scale, 1));
    letter-spacing: 0.1em;
}

/* =========================================================
   UX AUDIT (2026-10-25)
   ========================================================= */

/* Commands chip in the header: Ctrl+K is visible, not a secret. */
.command-chip {
    min-width: 0;
    border-color: var(--accent-medium);
    color: var(--accent-ink);
}

.command-chip svg {
    display: block;
}

/* Header labels stay on one line. */
.icon-button__label {
    white-space: nowrap;
}

/* Small text buttons (EXPAND ALL, COLLAPSE ALL…): a 28 px tall click
   area around the same small text. */
.text-button {
    padding: 8px 6px;
    margin: -8px -6px;
}

.toast-message__close {
    width: 28px;
    height: 28px;
}

/* HOME keeps its gentle scan and boot even with reduce-motion (the
   global rule in "54. REDUCED MOTION" would freeze them). */
@media (prefers-reduced-motion: reduce) {
    .home-card::after {
        animation-duration: 4.8s !important;
        animation-iteration-count: infinite !important;
    }

    .home-card.is-booting::before {
        animation-duration: 700ms !important;
    }

    .home-card.is-booting > * {
        animation-duration: 520ms !important;
    }
}

/* SCAN button by FIT: lit when the scan line is on. */
.viewer-scan-button {
    gap: 7px;
}

.viewer-scan-button__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-faint);
    transition: background 200ms ease, box-shadow 200ms ease;
}

.viewer-scan-button[aria-pressed="true"] {
    border-color: var(--accent-medium);
    color: var(--accent-ink);
}

.viewer-scan-button[aria-pressed="true"] .viewer-scan-button__dot {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}

/* =========================================================
   HEADER TOOLS: folded behind one button, unfold to the left
   ========================================================= */

.header-tools {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.header-tools__list {
    /* Apple-like unfold: the real width animates (interpolate-size),
       with iOS's ease-out curve; the buttons arrive in a cascade. */
    --tools-ease: cubic-bezier(0.32, 0.72, 0, 1);
    interpolate-size: allow-keywords;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    overflow: hidden;
    /* Room for the buttons' lift and glow on hover. */
    padding: 6px 2px;
    margin: -6px -2px;
    transition:
        width 560ms var(--tools-ease),
        padding 560ms var(--tools-ease),
        margin 560ms var(--tools-ease);
}

.header-tools[data-open="false"] .header-tools__list {
    width: 0;
    padding-inline: 0;
    margin-inline: 0;
    pointer-events: none;
    transition-duration: 380ms;
}

.header-tools__list > * {
    flex: none;
}

/* The cascade uses animations, not transitions, so the buttons keep
   their own hover (sweep and lift). Nearest to the toggle first. */
.header-tools[data-open="true"] .header-tools__list > * {
    animation: header-tool-in 520ms var(--tools-ease) backwards;
}

.header-tools[data-open="true"] .header-tools__list > :nth-last-child(1) { animation-delay: 40ms; }
.header-tools[data-open="true"] .header-tools__list > :nth-last-child(2) { animation-delay: 75ms; }
.header-tools[data-open="true"] .header-tools__list > :nth-last-child(3) { animation-delay: 110ms; }
.header-tools[data-open="true"] .header-tools__list > :nth-last-child(4) { animation-delay: 145ms; }
.header-tools[data-open="true"] .header-tools__list > :nth-last-child(5) { animation-delay: 180ms; }
.header-tools[data-open="true"] .header-tools__list > :nth-last-child(6) { animation-delay: 215ms; }
.header-tools[data-open="true"] .header-tools__list > :nth-last-child(n + 7) { animation-delay: 250ms; }

/* Folding: all together, quickly. */
.header-tools[data-open="false"] .header-tools__list > * {
    animation: header-tool-out 200ms ease-in forwards;
}

@keyframes header-tool-in {
    from {
        opacity: 0;
        transform: translateX(14px) scale(0.92);
        filter: blur(4px);
    }
}

@keyframes header-tool-out {
    to {
        opacity: 0;
        filter: blur(3px);
    }
}

.header-tools__toggle {
    position: relative;
}

.header-tools__toggle svg {
    display: block;
    transition: transform 560ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Open: the triangle turns to point right (fold back). */
.header-tools[data-open="true"] .header-tools__toggle svg {
    transform: rotate(180deg);
}

.header-tools[data-open="true"] .header-tools__toggle {
    border-color: var(--accent-medium);
    color: var(--accent-ink);
}

/* Folded: new notifications show on the toggle. */
.header-tools[data-open="false"]:has(#notificationsButton[data-unseen="true"]) .header-tools__toggle::after {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 0 2px var(--bg-header);
    content: "";
}

/* FX: marks a visual effect (no effect on records or videos). */
.fx-tag {
    display: inline-block;
    padding: 1px 4px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: calc(7.5px * var(--text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    vertical-align: middle;
    opacity: 0.75;
}

/* SCAN on: the button keeps its hovered look (filled, lit edge, glow)
   for as long as the effect is on. */
:root .viewer-scan-button[aria-pressed="true"] {
    --sweep: var(--accent-soft);
    border-color: var(--accent-medium);
    background-position: 0 0;
    color: var(--accent-ink-strong);
    box-shadow: 0 7px 16px -8px rgba(var(--accent-rgb), 0.6);
}


/* =========================================================
   PHONES AND TABLETS (touch layout)
   ---------------------------------------------------------
   Upright phones and tablets: the viewer stays at the top and
   shrinks while the record scrolls (js/field-layout.js); phones
   get the field bar at the bottom. Phones held sideways: viewer
   left, record right. Touch screens get 44 px targets.
   ========================================================= */

@property --viewer-band {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

.field-bar {
    display: none;
}

/* Touch: fingers, not a mouse. */
@media (pointer: coarse) {
    :root,
    .app-shell {
        --field-height: 44px;
        --button-height: 44px;
    }

    .sidebar-tab,
    .footer-action-button,
    .small-action-button {
        min-height: 44px;
    }

    .viewer-tool-button,
    .app-header .icon-button,
    .header-tools__toggle {
        min-width: 40px;
        min-height: 40px;
    }
}

@media (max-width: 1100px) and (orientation: portrait) {
    /* Tablets up to 1100 px wide (e.g. 1024 × 1366) stack as well. */
    body {
        overflow: auto;
    }

    .app-shell {
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    .app-header {
        position: sticky;
        top: 0;
    }

    .sidebar-resizer {
        display: none;
    }

    .sidebar {
        border-right: 0;
    }

    :root {
        --viewer-band: min(calc(100vw * 9 / 16), 44dvh);
        --viewer-footer-height: 0px;
    }

    /* The browser must not move the page while the viewer shrinks. */
    html,
    body {
        overflow-anchor: none;
    }

    .workspace {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .viewer {
        position: sticky;
        z-index: 30;
        top: var(--header-height);
        order: -1;
        min-height: 0;
        border-bottom: 1px solid var(--line-medium);
    }

    /* Small viewer: the picture is scaled (GPU), never resized, so the
       video, the Look and the HUD are not redrawn while it shrinks.
       --viewer-k comes from js/field-layout.js. */
    .app-shell[data-viewer-compact="true"] .viewer-stage {
        height: calc(var(--viewer-band) * var(--viewer-k, 0.6) + 8px);
    }

    .app-shell[data-viewer-compact="true"] .viewer-canvas {
        transform: scale(var(--viewer-k, 0.6));
    }

    .app-shell[data-viewer-compact="true"] .viewer-stage {
        cursor: zoom-in;
    }

    /* Typing: the viewer steps aside for the keyboard. */
    .app-shell:has(.sidebar :is(input, textarea):focus) .viewer {
        position: relative;
        top: auto;
    }

    .viewer-footer {
        display: none;
    }

    .viewer-stage {
        height: calc(var(--viewer-band) + 8px);
        padding: 4px 8px;
        overflow: hidden;
        place-items: start center;
    }

    .viewer-canvas {
        transform-origin: 50% 0;
        transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .viewer-canvas,
    .viewer-canvas[data-composition^="canvas-"]:not([data-composition="canvas-16-9"]),
    .app-shell[data-view-mode="focus-record"] .viewer-canvas {
        width: min(100%, calc(var(--viewer-band) * var(--ar, 1.7778)));
    }

    .viewer-canvas[data-composition="source-aspect"] {
        max-height: var(--viewer-band);
    }

    /* Camera settings under the picture, not over it (folded, the REC
       pill still floats on the picture). */
    .viewer {
        grid-template-rows: var(--viewer-toolbar-height) auto auto;
    }

    .camera-bar:not([data-collapsed="true"]) {
        position: relative;
        bottom: auto;
    }

    .sidebar {
        display: block;
        overflow: visible;
    }

    .sidebar-panels,
    .sidebar-panel {
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .sidebar-footer {
        position: sticky;
        z-index: 25;
        bottom: 0;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .sidebar-footer__actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #newRecordButton {
        grid-column: auto;
    }

    /* Notices at the bottom, clear of the tabs and the viewer. */
    .toast-region {
        top: auto;
        right: 12px;
        bottom: calc(120px + env(safe-area-inset-bottom));
        left: 12px;
        width: auto;
    }
}

/* Upright: the empty viewer keeps its two buttons in view. */
@media (max-width: 1100px) and (orientation: portrait) {
    .video-placeholder__content {
        max-width: none;
        padding: 10px;
    }

    .video-placeholder__content p,
    .video-placeholder__content .section-eyebrow {
        display: none;
    }

    .video-placeholder__content strong {
        margin: 0 0 10px;
    }

    .video-placeholder__actions .secondary-button {
        min-width: 0;
        padding-inline: 14px;
    }
}

/* Phones: the two buttons one above the other, same width, inside the
   viewer's corner marks. */
@media (max-width: 600px) and (orientation: portrait) {
    .video-placeholder__actions {
        display: grid;
        grid-template-columns: min(220px, 64vw);
        gap: 8px;
    }

    .video-placeholder__actions .secondary-button {
        width: 100%;
        min-height: 40px;
        padding-inline: 10px;
    }
}

/* Phones: the header tools open as a panel under the header, and SCAN
   keeps its dot and FX tag when the toolbar shows icons only. */
@media (max-width: 600px) {
    /* Above the sticky viewer, so the tools panel shows over it. */
    .app-header {
        z-index: 70;
    }

    .header-tools {
        position: relative;
    }

    .header-tools .header-tools__list,
    .header-tools[data-open="true"] .header-tools__list {
        position: absolute;
        z-index: 80;
        top: calc(100% + 10px);
        right: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: max-content;
        max-width: calc(100vw - 16px);
        margin: 0;
        padding: 8px;
        border: 1px solid var(--line-medium);
        border-radius: var(--radius-lg);
        background: var(--bg-header);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    }

    .header-tools[data-open="false"] .header-tools__list {
        display: none;
    }
}

@media (max-width: 560px) {
    #viewerScanButton {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        width: auto;
        padding-inline: 8px;
    }

    #viewerScanButton .fx-tag {
        color: var(--text-muted);
        font-size: calc(9px * var(--text-scale, 1));
    }

    #viewerScanButton[aria-pressed="true"] .fx-tag {
        color: var(--accent-ink-strong);
    }
}

/* Phones upright: the field bar replaces NEW / SAVE in the panel. */
@media (max-width: 600px) and (orientation: portrait) {
    .field-bar {
        position: fixed;
        z-index: 60;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        padding: 6px 6px max(6px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line-medium);
        background: var(--bg-header);
        box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.28);
    }

    .field-bar__button {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 3px;
        min-height: 52px;
        padding: 4px 2px;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius-md, 8px);
        background: var(--bg-panel-soft);
        color: var(--text-muted);
        font-family: var(--font-mono);
        font-size: calc(9.5px * var(--text-scale, 1));
        font-weight: 700;
        letter-spacing: 0.08em;
        -webkit-tap-highlight-color: transparent;
        transition: transform 140ms ease, background-color 160ms ease, color 160ms ease;
    }

    .field-bar__button svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .field-bar__button:active:not(:disabled) {
        transform: scale(0.94);
    }

    .field-bar__button:disabled {
        opacity: 0.4;
    }

    .field-bar__button--primary:not(:disabled) {
        border-color: var(--accent-medium);
        background: var(--accent-soft);
        color: var(--accent-ink-strong);
    }

    .field-bar__button--primary svg {
        fill: currentColor;
    }

    .field-bar__button.is-armed {
        border-color: rgba(228, 108, 108, 0.6);
        color: #ff8a8a;
    }

    .field-bar__button.is-recording {
        border-color: #e05252;
        background: #c63c3c;
        color: #fff;
        animation: field-rec-pulse 1.4s ease-in-out infinite;
    }

    @keyframes field-rec-pulse {
        50% { box-shadow: 0 0 0 5px rgba(224, 82, 82, 0.25); }
    }

    /* Room for the bar under the last panel and the panel footer. */
    .app-shell {
        padding-bottom: calc(66px + env(safe-area-inset-bottom));
    }

    .sidebar-footer {
        position: relative;
        bottom: auto;
    }

    #newRecordButton,
    #saveRecordButton {
        display: none;
    }

    .sidebar-footer__actions {
        grid-template-columns: 1fr;
    }

    .toast-region {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* Phones held sideways: viewer left, record right. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
    :root {
        --header-height: 44px;
        --viewer-toolbar-height: 42px;
        --viewer-footer-height: 0px;
    }

    body {
        overflow: hidden;
    }

    .app-shell {
        height: 100dvh;
        overflow: hidden;
    }

    .app-header__center {
        display: none;
    }

    .workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) min(46vw, 400px);
        grid-template-rows: minmax(0, 1fr);
        height: calc(100dvh - var(--header-height));
        overflow: hidden;
    }

    .viewer {
        position: relative;
        top: auto;
        order: -1;
        min-height: 0;
        grid-template-rows: var(--viewer-toolbar-height) minmax(0, 1fr);
    }

    .viewer-footer,
    .sidebar-resizer {
        display: none;
    }

    .viewer-stage {
        padding: 4px 6px;
    }

    .viewer-canvas,
    .viewer-canvas[data-composition^="canvas-"]:not([data-composition="canvas-16-9"]),
    .app-shell[data-view-mode="focus-record"] .viewer-canvas {
        width: min(
            100%,
            calc((100dvh - var(--header-height) - var(--viewer-toolbar-height) - 10px) * var(--ar, 1.7778))
        );
    }

    .camera-bar {
        bottom: 0;
    }

    .sidebar {
        display: block;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 0;
        border-left: 1px solid var(--line-medium);
    }

    .sidebar-panels,
    .sidebar-panel {
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .sidebar-footer {
        position: sticky;
        z-index: 25;
        bottom: 0;
    }

    .sidebar-footer {
        gap: 4px;
        padding: 6px 8px;
    }

    .sidebar-footer__status,
    .app-message {
        display: none;
    }

    .sidebar-footer__actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #newRecordButton {
        grid-column: auto;
    }

    .footer-action-button {
        min-height: 40px;
    }

    .toast-region {
        top: auto;
        right: 12px;
        bottom: 12px;
        width: min(360px, 46vw);
    }
}


/* Phones held sideways: the same field tools as upright — the field
   bar under the record (right column), the empty viewer's two buttons
   one above the other, and the viewer toolbar as icons. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
    .field-bar {
        position: fixed;
        z-index: 60;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        width: min(46vw, 400px);
        padding: 5px 6px max(5px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line-medium);
        border-left: 1px solid var(--line-medium);
        background: var(--bg-header);
        box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.28);
    }

    .field-bar__button {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 2px;
        min-height: 46px;
        padding: 3px 2px;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius-md, 8px);
        background: var(--bg-panel-soft);
        color: var(--text-muted);
        font-family: var(--font-mono);
        font-size: calc(9px * var(--text-scale, 1));
        font-weight: 700;
        letter-spacing: 0.08em;
        -webkit-tap-highlight-color: transparent;
        transition: transform 140ms ease, background-color 160ms ease, color 160ms ease;
    }

    .field-bar__button svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .field-bar__button:active:not(:disabled) {
        transform: scale(0.94);
    }

    .field-bar__button:disabled {
        opacity: 0.4;
    }

    .field-bar__button--primary:not(:disabled) {
        border-color: var(--accent-medium);
        background: var(--accent-soft);
        color: var(--accent-ink-strong);
    }

    .field-bar__button--primary svg {
        fill: currentColor;
    }

    .field-bar__button.is-armed {
        border-color: rgba(228, 108, 108, 0.6);
        color: #ff8a8a;
    }

    .field-bar__button.is-recording {
        border-color: #e05252;
        background: #c63c3c;
        color: #fff;
        animation: field-rec-pulse-side 1.4s ease-in-out infinite;
    }

    @keyframes field-rec-pulse-side {
        50% { box-shadow: 0 0 0 5px rgba(224, 82, 82, 0.25); }
    }

    /* Room for the bar at the end of the record; NEW / SAVE live in it. */
    .sidebar {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    .sidebar-footer {
        position: relative;
        bottom: auto;
    }

    #newRecordButton,
    #saveRecordButton {
        display: none;
    }

    .sidebar-footer__actions {
        grid-template-columns: 1fr;
    }

    .toast-region {
        bottom: calc(66px + env(safe-area-inset-bottom));
    }

    /* Empty viewer: title and the two buttons only. */
    .video-placeholder__content {
        max-width: none;
        padding: 8px;
    }

    .video-placeholder__content p,
    .video-placeholder__content .section-eyebrow {
        display: none;
    }

    .video-placeholder__content strong {
        margin: 0 0 10px;
    }

    .video-placeholder__actions {
        display: grid;
        grid-template-columns: min(220px, 30vw);
        gap: 8px;
    }

    .video-placeholder__actions .secondary-button {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding-inline: 10px;
    }

    /* Viewer toolbar as icons: the file name keeps its room. */
    .viewer-tool-button {
        min-width: 40px;
        width: 40px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        font-size: 0;
    }

    .viewer-tool-button::before {
        color: var(--text-muted);
        font-size: calc(13px * var(--text-scale, 1));
    }

    #resetViewerButton::before {
        content: "↺";
    }

    #fullscreenButton::before {
        content: "⛶";
    }

    #viewerScanButton {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        width: auto;
        padding-inline: 8px;
    }

    #viewerScanButton .fx-tag {
        color: var(--text-muted);
        font-size: calc(9px * var(--text-scale, 1));
    }

    #viewerScanButton[aria-pressed="true"] .fx-tag {
        color: var(--accent-ink-strong);
    }

    .source-file-name {
        max-width: 22vw;
    }
}


/* =========================================================
   VIEWER TOOLS FOLD
   ---------------------------------------------------------
   A narrow viewer (phones, a wide panel on a small window) folds
   SCAN · zoom · RESET · FULLSCREEN behind ◀, like the header tools,
   so the state and the file name are not cut. Wide: all shown.
   ========================================================= */

.viewer-toolbar {
    container: viewerbar / inline-size;
}

.viewer-tools__list {
    display: flex;
    align-items: center;
    gap: 6px;
}

.viewer-tools__toggle {
    display: none;
}

@container viewerbar (max-width: 640px) {
    .viewer-tools__list {
        --tools-ease: cubic-bezier(0.32, 0.72, 0, 1);
        interpolate-size: allow-keywords;
        width: auto;
        overflow: hidden;
        padding: 6px 2px;
        margin: -6px -2px;
        transition:
            width 560ms var(--tools-ease),
            padding 560ms var(--tools-ease),
            margin 560ms var(--tools-ease);
    }

    .viewer-toolbar__controls[data-open="false"] .viewer-tools__list {
        width: 0;
        padding-inline: 0;
        margin-inline: 0;
        pointer-events: none;
        transition-duration: 380ms;
    }

    .viewer-tools__list > * {
        flex: none;
    }

    .viewer-toolbar__controls[data-open="true"] .viewer-tools__list > * {
        animation: header-tool-in 520ms var(--tools-ease) backwards;
    }

    .viewer-toolbar__controls[data-open="true"] .viewer-tools__list > :nth-last-child(1) { animation-delay: 40ms; }
    .viewer-toolbar__controls[data-open="true"] .viewer-tools__list > :nth-last-child(2) { animation-delay: 80ms; }
    .viewer-toolbar__controls[data-open="true"] .viewer-tools__list > :nth-last-child(3) { animation-delay: 120ms; }
    .viewer-toolbar__controls[data-open="true"] .viewer-tools__list > :nth-last-child(4) { animation-delay: 160ms; }

    .viewer-toolbar__controls[data-open="false"] .viewer-tools__list > * {
        animation: header-tool-out 200ms ease-in forwards;
    }

    #viewerToolsToggle {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 36px;
        min-width: 36px;
        padding: 0;
        color: var(--text-muted);
        font-size: inherit;
    }

    #viewerToolsToggle::before {
        content: none;
    }

    #viewerToolsToggle svg {
        display: block;
        transition: transform 560ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .viewer-toolbar__controls[data-open="true"] #viewerToolsToggle {
        border-color: var(--accent-medium);
        color: var(--accent-ink);
    }

    .viewer-toolbar__controls[data-open="true"] #viewerToolsToggle svg {
        transform: rotate(180deg);
    }

    /* Folded with SCAN on: a small dot on ◀ says the effect is on. */
    .viewer-toolbar__controls[data-open="false"]:has(#viewerScanButton[aria-pressed="true"]) #viewerToolsToggle::after {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent-strong);
        content: "";
    }

    #viewerToolsToggle {
        position: relative;
    }

    .source-file-name {
        max-width: none;
    }
}

@media (pointer: coarse) {
    #viewerToolsToggle {
        min-width: 40px;
        min-height: 40px;
    }
}

/* The project fields start empty: their hints fit the half-width box. */
#projectCode::placeholder {
    font-size: calc(12.5px * var(--text-scale, 1));
}