/* Notion-style design tokens (the same as the other apps). Tailwind reads these through @theme in index.php. */
:root {
    color-scheme: light;

    --bg: #ffffff;
    --ink: #37352f;
    --ink-2: rgba(55, 53, 47, 0.65);
    --ink-3: rgba(55, 53, 47, 0.4);
    --line: rgba(55, 53, 47, 0.09);
    --hover: rgba(55, 53, 47, 0.06);
    --accent: #2383e2;
    --danger: #d44c47;
    --good: #448361;
    --skeleton: rgba(55, 53, 47, 0.07);

    --menu-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 3px 6px, rgba(15, 15, 15, 0.2) 0 9px 24px;

    --gray-bg: #e3e2e0;   --gray-ink: #32302c;   --gray-dot: #91918e;
    --blue-bg: #d3e5ef;   --blue-ink: #183347;   --blue-dot: #5b97bd;
    --green-bg: #dbeddb;  --green-ink: #1c3829;  --green-dot: #6c9b7d;
    --yellow-bg: #fdecc8; --yellow-ink: #402c1b; --yellow-dot: #cb9433;
    --red-bg: #ffe2dd;    --red-ink: #5d1715;    --red-dot: #e16f64;
    --purple-bg: #e8deee; --purple-ink: #412454; --purple-dot: #9a6dd7;
    --orange-bg: #fadec9; --orange-ink: #49290e; --orange-dot: #d9730d;
    --pink-bg: #f5e0e9;   --pink-ink: #4c2337;   --pink-dot: #c14c8a;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg: #191919;
        --ink: rgba(255, 255, 255, 0.81);
        --ink-2: rgba(255, 255, 255, 0.46);
        --ink-3: rgba(255, 255, 255, 0.28);
        --line: rgba(255, 255, 255, 0.094);
        --hover: rgba(255, 255, 255, 0.055);
        --danger: #ff7369;
        --good: #5bb37f;
        --skeleton: rgba(255, 255, 255, 0.07);

        --menu-shadow: rgba(255, 255, 255, 0.094) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 9px 24px;

        --gray-bg: #373737;   --gray-ink: rgba(255, 255, 255, 0.81); --gray-dot: #7f7f7f;
        --blue-bg: #28456c;   --blue-ink: rgba(255, 255, 255, 0.81); --blue-dot: #4f8fd6;
        --green-bg: #2b593f;  --green-ink: rgba(255, 255, 255, 0.81); --green-dot: #4f9768;
        --yellow-bg: #89632a; --yellow-ink: rgba(255, 255, 255, 0.81); --yellow-dot: #c19138;
        --red-bg: #6e3630;    --red-ink: rgba(255, 255, 255, 0.81); --red-dot: #d1584b;
        --purple-bg: #492f64; --purple-ink: rgba(255, 255, 255, 0.81); --purple-dot: #9d68d3;
        --orange-bg: #854c1d; --orange-ink: rgba(255, 255, 255, 0.81); --orange-dot: #d27b2d;
        --pink-bg: #69314c;   --pink-ink: rgba(255, 255, 255, 0.81); --pink-dot: #d15796;
    }
}

body {
    background: var(--bg);
    color: var(--ink);
    /* Keep content clear of the notch in landscape (viewport-fit=cover) */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Rows and buttons show their own pressed state instead of the grey tap flash */
    -webkit-tap-highlight-color: transparent;
}

/* Native dropdown lists: the selects are transparent with grey text, and their options would inherit that, which
   leaves them faint or invisible on the list's own background (Windows, dark mode). Give the list solid colours. */
select option,
select optgroup {
    background-color: var(--bg);
    color: var(--ink);
}


/* ---------- Video editor ---------- */

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
    opacity: 0.35;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The page is the app: a top bar, then the editor filling the rest of the screen */
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Nothing on the timeline yet: the editing buttons wait */
.is-empty .needs-project {
    pointer-events: none;
    opacity: 0.35;
}

.bar-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--ink-2);
}

/* a button with a word beside its icon */
.bar-btn.wide {
    gap: 6px;
    width: auto;
    padding: 0 8px;
    font-size: 13px;
}

.bar-btn:hover:not(:disabled) {
    background: var(--hover);
    color: var(--ink);
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.primary-btn:hover {
    filter: brightness(0.94);
}

.plain-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
}

.plain-btn:hover {
    background: var(--hover);
}

.plain-btn.hidden,
.primary-btn.hidden {
    display: none;
}

.plain-btn[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

/* Files of a remembered project that have to be opened again */
#notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    background: var(--yellow-bg);
    color: var(--yellow-ink);
    font-size: 13px;
}

#notice.hidden {
    display: none;
}

/* ----- Layout: (picture, buttons, timeline) | settings ----- */
#editor {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-w, 340px);
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--line);
}

#work {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* The picture's area: grey, so a dark video and a white one both stand out */
#stage {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px;
    overflow: hidden;
    background: var(--hover);
}

#preview {
    display: block;
    max-width: 100%;
    max-height: 100%;
    background: #000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    touch-action: none;
}

#preview.hidden {
    display: none;
}

#empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body:not(.is-empty) #empty {
    display: none;
}

#transport {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 44px;
    padding: 0 8px;
    border-top: 1px solid var(--line);
}

#zoom {
    accent-color: var(--accent);
}

/* The timeline is one canvas (app.js draws the ruler, the tracks and the playhead and works out what is pressed) */
#timeline {
    position: relative;
    flex-shrink: 0;
    height: 232px;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid var(--line);
}

#tl {
    display: block;
    width: 100%;
    touch-action: none;
}

#drop-hint {
    position: fixed;
    inset: 12px;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--accent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    color: var(--accent);
    font-weight: 600;
    pointer-events: none;
}

#drop-hint.hidden {
    display: none;
}

/* ----- Settings ----- */
#panel {
    overflow-y: auto;
    border-left: 1px solid var(--line);
    font-size: 13px;
}

#panel-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

#panel-tabs button {
    flex: 1;
    height: 38px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
}

#panel-tabs button:hover {
    color: var(--ink);
}

#panel-tabs button[aria-selected="true"] {
    border-bottom-color: var(--accent);
    color: var(--ink);
}

#panel[data-tab="media"] .panel-section:not([data-tab="media"]),
#panel[data-tab="edit"] .panel-section:not([data-tab="edit"]),
#panel[data-tab="project"] .panel-section:not([data-tab="project"]),
#panel[data-tab="export"] .panel-section:not([data-tab="export"]) {
    display: none;
}

.panel-section {
    padding: 14px 14px 20px;
}

.panel-section h2 {
    margin-bottom: 8px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 500;
}

.panel-section h2.item-title {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.panel-section hr {
    margin: 16px -14px;
    border-color: var(--line);
}

.note {
    margin-top: 8px;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 1.35;
}

.note.hidden {
    display: none;
}

.segmented {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--hover);
}

.segmented.wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.segmented button {
    flex: 1;
    height: 28px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 13px;
    white-space: nowrap;
}

/* The Video tab is all folding groups: the first one starts at the top */
.media-groups.v-groups {
    margin-top: 0;
}

.media-groups.v-groups > .group:first-child {
    margin-top: -14px;
    border-top: 0;
}

/* The Video tab's choices in even rows: Shape is 3 + 3 (the first one takes two), Background the same */
#shape,
#bg {
    grid-template-columns: repeat(3, 1fr);
}

#shape button:first-child,
#bg button[data-bg="gradient"] {
    grid-column: span 2;
}

#shape button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#shape button[data-shape]:not([data-shape="auto"])::before {
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    content: "";
}

#shape button[data-shape="16:9"]::before {
    width: 16px;
    height: 9px;
}

#shape button[data-shape="9:16"]::before {
    width: 9px;
    height: 16px;
}

#shape button[data-shape="1:1"]::before {
    width: 12px;
    height: 12px;
}

#shape button[data-shape="4:5"]::before {
    width: 11px;
    height: 14px;
}

.segmented button[aria-checked="true"] {
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.menu {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 30;
    width: 250px;
    padding: 4px;
    border-radius: 8px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
    font-size: 14px;
}

.menu.hidden {
    display: none;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 6px;
    text-align: left;
}

.menu-item:hover,
.menu-item:focus-visible {
    background: var(--hover);
}

.field {
    display: block;
    margin-top: 10px;
    color: var(--ink-2);
    font-size: 12px;
}

.field input,
.field textarea,
.field select {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}

.field input[type="color"] {
    height: 32px;
    padding: 2px;
}

.field textarea {
    resize: vertical;
}

.field.hidden {
    display: none;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    accent-color: var(--accent);
}

/* A slider on one line: its name, the buttons for keyframes when it has them, the slider, its value */
.slider {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    margin-top: 6px;
    color: var(--ink-2);
    font-size: 12px;
}

.slider > span {
    flex: 0 0 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slider:has(.key-btn) > span {
    flex-basis: 68px;
}

.slider output {
    flex: 0 0 40px;
    order: 4;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.slider input {
    flex: 1;
    order: 3;
    min-width: 0;
    accent-color: var(--accent);
}

.slider .key-btn {
    flex: none;
    margin-left: -2px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.row .plain-btn {
    flex: 1;
    white-space: nowrap;
}

/* nine places to put words or a picture: the corners, the sides and the middle */
.places {
    display: grid;
    grid-template-columns: repeat(3, 28px);
    gap: 3px;
    margin-top: 6px;
}

.places button {
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.places button:hover {
    background: var(--hover);
}

/* the colour board's wheels, three in a row */
.wheels {
    display: flex;
    gap: 8px;
}

.wheels div {
    flex: 1;
    color: var(--ink-2);
    font-size: 11px;
    text-align: center;
}

.wheels canvas {
    display: block;
    width: 100%;
    max-width: 110px;
    margin: 0 auto 2px;
    aspect-ratio: 1;
    cursor: crosshair;
    touch-action: none;
}

/* looks saved by the owner: a name to press and a small × */
.own-looks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.own-looks span {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
}

.own-looks button {
    padding: 4px 8px;
}

.own-looks button + button {
    padding: 4px 6px;
    border-left: 1px solid var(--line);
    color: var(--ink-3);
}

.own-looks button:hover {
    background: var(--hover);
}

/* colour labels: a row of dots, the first one for none */
.label-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.label-row button {
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.label-row button[aria-checked="true"] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ----- Inside a compound clip: a bar over the top of the picture (nest.js) ----- */
#nest-bar {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transform: translateX(-50%);
}

#nest-bar.hidden {
    display: none;
}

/* ----- The angle viewer: every angle of a multicam, on the stage's left (a phone: its top) ----- */
#angles {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(44%, 560px);
    padding: 8px;
    border-right: 1px solid var(--line);
    background: var(--bg);
}

#angles.hidden {
    display: none;
}

#angles-grid {
    flex: 1;
    width: 100%;
    min-height: 0;
    border-radius: 6px;
    background: #000000;
    cursor: pointer;
}

.angles-whole {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ink-2);
}

#stage.has-angles {
    padding-left: calc(min(44%, 560px) + 12px);
}

.compact #angles {
    right: 0;
    bottom: auto;
    width: auto;
    height: 46%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
}

.compact #stage.has-angles {
    align-items: flex-end;
    padding-left: 0;
}

/* ----- The viewer: one file over the picture, to mark the part to add ----- */
#viewer {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg);
}

#viewer.hidden {
    display: none;
}

.viewer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.viewer-row .plain-btn,
.viewer-row .primary-btn {
    flex: none;
}

/* The viewer's second close, at the end of the add buttons, outlined like them */
#viewer-done {
    border: 1px solid var(--line);
}

/* Frame steps, the line break before In / Out / All and the rating toggle are a phone's (a keyboard has ← → and room) */
.viewer-step,
.viewer-break,
#viewer-rate {
    display: none;
}

/* On a phone the four ways to add go on a row of their own, sharing its width; so do In, Out, All */
.compact .viewer-row > span.flex-1:empty,
.compact .viewer-row > .viewer-break {
    display: block;
    flex-basis: 100%;
    height: 0;
}

.compact .viewer-step,
.compact #viewer-rate {
    display: inline-flex;
}

.compact #viewer .bar-btn {
    width: 40px;
    height: 40px;
}

.compact #viewer-time {
    flex: 1;
    font-size: 13px;
    text-align: right;
}

.compact #viewer-in,
.compact #viewer-out,
.compact #viewer-clear {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
}

/* The rating buttons stay folded behind the tag button on a phone */
.compact #viewer-rates {
    display: none;
}

.compact #viewer.rates-open #viewer-rates {
    display: flex;
}

.compact #viewer-rate[aria-pressed="true"] {
    color: var(--accent);
}

/* The picked clip's bar is put away while the viewer is open: the viewer has its own buttons */
.compact.viewing #actions {
    display: none;
}

.compact .viewer-row [data-view-add] {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

#viewer-box {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #000000;
    font-size: 48px;
}

#viewer-box video,
#viewer-box img {
    max-width: 100%;
    max-height: 100%;
}

#viewer-box audio {
    display: none;
}

#viewer-bar {
    width: 100%;
    height: 36px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--hover);
    cursor: col-resize;
    touch-action: none;
}

#viewer-file {
    padding: 3px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
}

#viewer-file:hover,
#viewer-file:focus {
    border-color: var(--line);
}

#viewer-bin {
    max-width: 130px;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
}

#viewer-fav[aria-pressed="true"] {
    color: #e2a400;
}

#viewer-fav[aria-pressed="true"] svg {
    fill: currentColor;
}

#viewer-play[aria-pressed="true"] {
    color: var(--accent);
}

/* a picture has no length to mark; a sound has no picture to place */
.compact #viewer-bar {
    height: 48px;
}

#viewer.still #viewer-bar,
#viewer.still .timed,
#viewer.sound .picture {
    display: none;
}

/* ----- The mixer (Video tab): a row for the master and one for each track ----- */
.mix-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
}

.mix-name {
    flex-shrink: 0;
    width: 52px;
    color: var(--ink-2);
}

.mix-row input[type="range"] {
    flex: 1;
    min-width: 0;
}

.mix-row input.mix-pan {
    flex: none;
    width: 46px;
}

.mix-row output {
    flex-shrink: 0;
    width: 36px;
    color: var(--ink-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mix-row button {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
}

.mix-row button[data-mix-flag="muted"][aria-pressed="true"] {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.mix-row button[data-mix-flag="solo"][aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.mix-limit {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    width: 100px;
    color: var(--ink-2);
}

/* the pad a tone is drawn on */
#eq-pad {
    display: block;
    width: 100%;
    margin: 10px 0 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
}

/* ----- The index of the timeline (Video tab) ----- */
.index-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    text-align: left;
}

.index-row:hover {
    background: var(--hover);
}

.index-row.on {
    background: var(--hover);
    font-weight: 600;
}

.index-row.off {
    opacity: 0.5;
}

.index-t {
    flex-shrink: 0;
    width: 44px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.index-k {
    flex-shrink: 0;
    width: 22px;
    color: var(--ink-3);
}

#index-list {
    max-height: 320px;
    overflow-y: auto;
}

/* ----- Media list ----- */
.media-item [data-act="view"] {
    cursor: pointer;
}

.media-thumb {
    position: relative;
}

.media-thumb canvas.skim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.media-thumb {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 40px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--hover);
    font-size: 18px;
}

.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-item.is-missing .media-name {
    color: var(--danger);
}

.media-item .bar-btn {
    width: 28px;
    height: 28px;
}

/* ----- Export in progress ----- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 15, 15, 0.5);
}

.modal.hidden {
    display: none;
}

.modal-card {
    width: 100%;
    max-width: 380px;
    padding: 18px;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
}

/* The keys window (?): columns of kinds, each a list of key and what it does */
.keys-card {
    display: flex;
    flex-direction: column;
    max-width: 980px;
    max-height: calc(100vh - 32px);
}

.keys-list {
    min-height: 0;
    margin: 12px -4px 0;
    padding: 0 4px;
    overflow-y: auto;
    display: grid;
    column-gap: 28px;
    align-items: start;
}

.keys-group {
    margin-bottom: 16px;
}

.keys-group h3 {
    margin-bottom: 4px;
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.keys-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.keys-row > span:first-child {
    flex: 1;
    min-width: 0;
}

.keys-row > span:last-child {
    flex-shrink: 0;
    text-align: right;
}

.keys-card kbd {
    display: inline-block;
    min-width: 20px;
    margin-left: 2px;
    padding: 0 5px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--hover);
    font: 11.5px/18px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    text-align: center;
    white-space: nowrap;
}

.keys-row .text-ink-2 {
    margin-left: 3px;
    font-size: 12px;
}

.keys-card .note a {
    color: var(--accent);
}

.progress {
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--hover);
}

#export-bar {
    width: 0;
    height: 100%;
    background: var(--accent);
}

/* The frame being made, small, beside the title */
#export-thumb {
    flex: none;
    max-width: 112px;
    max-height: 72px;
    border-radius: 4px;
    background: #000;
}

#export-thumb.hidden,
.check.hidden,
.pair.hidden,
#exp-file-more.hidden,
#export-veil.hidden,
#batch-box.hidden,
.segmented button.hidden {
    display: none;
}

#export-pct,
#export-stats {
    font-variant-numeric: tabular-nums;
}

/* The export's window put away: the editor shows through but takes no presses; the chip brings the window back */
#export-veil {
    position: fixed;
    inset: 0;
    z-index: 50;
    cursor: progress;
}

#export-chip {
    position: absolute;
    top: 8px;
    left: 50%;
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    background: var(--accent);
    box-shadow: var(--menu-shadow);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

.check-list {
    margin-top: 10px;
    padding-left: 18px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.4;
    list-style: disc;
}

.check-list li + li {
    margin-top: 6px;
}

/* ----- Export tab ----- */
.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* what the file will be: size, frames a second, codecs, length, about how big */
.summary {
    margin-top: 14px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--hover);
    color: var(--ink);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.summary:empty {
    display: none;
}

.note.warn {
    color: var(--orange-dot);
}

#batch-box {
    margin-top: 8px;
    padding: 4px 10px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
}

#batch-box .check {
    margin-top: 8px;
}

.plain-select {
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}

/* ----- Recording ----- */
#rec-bar {
    position: fixed;
    top: 56px;
    left: 50%;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
}

#rec-bar.hidden {
    display: none;
}

#rec-view {
    width: 120px;
    border-radius: 6px;
    background: #000;
}

#rec-view.hidden {
    display: none;
}

.rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger);
    animation: rec-blink 1.2s infinite;
}

@keyframes rec-blink {
    50% { opacity: 0.25; }
}

.toast {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 60;
    max-width: calc(100vw - 32px);
    padding: 8px 14px;
    transform: translateX(-50%);
    border-radius: 8px;
    background: #2f2f2f;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.toast.hidden {
    display: none;
}

/* The Edit tab's groups (Speed, Sound, Crop…): a line between them */

.field.first {
    margin-top: 0;
}

/* The Filter strip: the clip in every look, four across (one row that scrolls sideways on a phone) */
.looks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
}

.look {
    min-width: 0;
    color: var(--ink-2);
    font-size: 11px;
    text-align: center;
}

.look canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: var(--hover);
}

.look span {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.look:hover {
    color: var(--ink);
}

.look[aria-checked="true"] {
    color: var(--accent);
    font-weight: 600;
}

.look[aria-checked="true"] canvas {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.look-amt.hidden {
    display: none;
}

/* Over the picture: the scopes in a corner, the loudness meter down the right side */
#scopes {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 240px;
    height: 170px;
    max-width: 45%;
    border-radius: 6px;
    pointer-events: none;
}

#scopes.hidden {
    display: none;
}

#meter {
    position: absolute;
    top: 16px;
    right: 3px;
    bottom: 16px;
    width: 9px;
    height: calc(100% - 32px);
    pointer-events: none;
}

.is-empty #meter {
    display: none;
}

/* Stickers, shapes and split-screen layouts to add: small squares in rows */
.sticker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sticker-grid > button:not(.plain-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 20px;
    line-height: 1;
}

.sticker-grid > button:not(.plain-btn):hover {
    background: var(--hover);
    color: var(--ink);
}

#layouts > button:not(.plain-btn),
#sticker-panel .sticker-grid > button[data-shape],
#sticker-panel .sticker-grid > button[data-anim] {
    width: 48px;
    border: 1px solid var(--line);
}

#sticker-panel .sticker-grid > button canvas {
    width: 42px;
    height: 30px;
}

/* The Stickers panel: emoji can be many, so their grids scroll */
#stickers,
#sticker-found {
    max-height: 260px;
    overflow-y: auto;
}

.sticker-sub {
    margin-bottom: 4px;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 500;
}

/* Yours: the pictures kept in this browser, each with a × to forget it */
.own-sticker {
    position: relative;
}

.own-sticker > button[data-own] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: var(--hover);
    overflow: hidden;
}

.own-sticker img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.own-forget {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--ink);
    color: var(--bg);
    font-size: 12px;
    line-height: 18px;
    opacity: 0;
}

.own-sticker:hover .own-forget,
.own-forget:focus-visible,
.compact .own-forget {
    opacity: 1;
}

/* The pen's bar, over the top of the picture while drawing */
#draw-bar {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
    transform: translateX(-50%);
}

#draw-bar.hidden {
    display: none;
}

#draw-bar .pens {
    display: flex;
    gap: 4px;
}

#draw-bar .pens button {
    width: 20px;
    height: 20px;
    border: 1px solid var(--line);
    border-radius: 50%;
}

#draw-bar input[type="color"] {
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
}

#draw-bar input[type="range"] {
    width: 70px;
    accent-color: var(--accent);
}

#draw-bar .plain-btn,
#draw-bar .primary-btn {
    height: 28px;
    padding: 0 10px;
}

/* The crop box's bar, over the top of the picture while the box is open */
#crop-bar {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    width: max-content;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
    transform: translateX(-50%);
}

#crop-bar.hidden {
    display: none;
}

#crop-bar select {
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}

#crop-size {
    min-width: 0;
    color: var(--ink-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#crop-bar .crop-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ink);
    font-size: 13px;
    white-space: nowrap;
}

#crop-bar .crop-zoom.hidden {
    display: none;
}

#crop-bar .crop-zoom input {
    accent-color: var(--accent);
}

#crop-bar .plain-btn,
#crop-bar .primary-btn {
    height: 28px;
    padding: 0 10px;
}

/* A side of the crop: the slider, then a box to type its % */
.slider > .crop-num {
    display: flex;
    flex: 0 0 54px;
    order: 4;
    align-items: center;
    gap: 2px;
    color: var(--ink-2);
}

.slider .crop-num input {
    flex: 1;
    order: 0;
    width: 0;
    height: 22px;
    padding: 0 3px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
}

.slider .crop-num input::-webkit-inner-spin-button,
.slider .crop-num input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.crop-size {
    margin: 8px 0 0;
    color: var(--ink-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

#stage.is-drawing #preview {
    cursor: crosshair;
}

/* Backgrounds to add: a row of swatches */
.backdrop {
    flex: none;
    width: 34px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 5px;
}

.backdrop:hover {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* The ◇ beside a setting that can have keyframes: ◆ once it has some, blue when one is at the playhead */
.key-btn {
    width: 20px;
    height: 18px;
    margin-left: 4px;
    border-radius: 4px;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 18px;
    vertical-align: top;
}

.key-btn:hover {
    background: var(--hover);
    color: var(--ink);
}

.key-btn[data-state="some"] {
    color: var(--ink);
}

.key-btn[data-state="on"] {
    color: var(--accent);
}

.key-btn.key-reset {
    margin-left: 0;
    font-size: 13px;
}

.row > .key-btn {
    flex: none;
    margin-left: 0;
}

.row > .note {
    align-self: center;
}

/* The picked item's keyframes, as a list in the Keyframes group */
.key-list {
    margin-top: 10px;
}

.key-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 2px 2px 2px 4px;
    border-radius: 6px;
}

.key-row.on {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.key-go {
    flex: none;
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.key-go:hover {
    background: var(--hover);
}

.key-what {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ink-2);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.key-row select {
    flex: none;
    width: 78px;
    padding: 3px 2px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
}

.key-row input {
    flex: none;
    width: 62px;
    padding: 3px 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Markers, in the Video tab */
.marker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.marker-dot {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.marker-time {
    flex: none;
    padding: 2px 4px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.marker-time:hover,
.marker-x:hover {
    background: var(--hover);
}

.marker-row input {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
}

.marker-x {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--ink-2);
}

.plain-btn:disabled,
.primary-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

#project-menu,
#history-menu {
    position: fixed;
    z-index: 60;
}

/* steps that were undone: still there to go forward to */
#history-menu .undone {
    color: var(--ink-3);
}

/* Tabs over a long list (looks, transitions, effects): one row that scrolls sideways */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    scrollbar-width: none;
}

.compact .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.chips::-webkit-scrollbar {
    display: none;
}

.chips button {
    flex: none;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: var(--hover);
    color: var(--ink-2);
    font-size: 12px;
    white-space: nowrap;
}

.chips button[aria-selected="true"] {
    background: var(--ink);
    color: var(--bg);
}

.looks .hidden,
.trans .hidden {
    display: none;
}

/* The kinds of transition, in their groups */
.trans h3 {
    margin: 10px 0 5px;
    color: var(--ink-3);
    font-size: 11px;
}

.trans > div:not(.hidden) > h3:first-child {
    margin-top: 0;
}

.trans > div:not(.hidden) ~ div:not(.hidden) > h3:first-child,
.trans > div:not(.hidden) ~ div:not(.hidden) > .trans-row:first-child {
    margin-top: 10px;
}

.trans-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.trans-row button {
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    white-space: nowrap;
}

.trans-row button:hover {
    background: var(--hover);
}

.trans-row button[aria-checked="true"] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

/* the group a press on a cut's button has brought up */
#edit .group.flash > h2:first-child {
    animation: group-flash 0.9s;
}

@keyframes group-flash {
    0%, 60% {
        color: var(--accent);
    }
}

/* A track's menu opens where its name was pressed */
#track-menu {
    position: fixed;
    top: 0;
    right: auto;
    z-index: 40;
    width: 230px;
}

#actions,
#sheet-head,
#big-btn,
#split-grip {
    display: none;
}

/* ----- Phones (body.compact: a narrow or a short screen, set by app.js) -----
   The picture, the buttons, the timeline with the playhead in its middle, and a bar of actions. The settings are
   a sheet that slides up over the timeline, so the picture stays in view while a slider is moved. */
.compact {
    touch-action: manipulation;
}

.compact #editor {
    display: flex;
    flex-direction: column;
}

.compact #work {
    flex: 1;
}

/* the picture edge to edge; the timeline's height is the owner's (--tl-h, set by dragging #split-grip) */
.compact #stage {
    padding: 0;
}

.compact #timeline {
    height: var(--tl-h, clamp(140px, 28dvh, 260px));
}

.compact #transport {
    position: relative;
    gap: 2px;
    padding: 0 4px;
}

/* a pill on the line between the picture and the play buttons: drag it to share the height between them */
.compact #split-grip {
    position: absolute;
    top: -11px;
    left: 50%;
    z-index: 2;
    display: block;
    width: 84px;
    height: 22px;
    transform: translateX(-50%);
    touch-action: none;
}

#split-grip::after {
    position: absolute;
    top: 9px;
    left: 26px;
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--ink-3);
    content: "";
}

.compact.landscape #split-grip,
.compact.big-preview #split-grip {
    display: none;
}

.compact #split-btn,
.compact #delete-btn,
.compact #text-btn,
.compact #fx-btn,
.compact #zoom-out,
.compact #zoom-in,
.compact #zoom {
    display: none;
}

.compact #big-btn {
    display: inline-flex;
}

/* the header on a phone: Undo, Redo, ⋯ and Export; the rest is in the ⋯ menu, so the project's name has room */
#more-btn {
    display: none;
}

.compact #more-btn {
    display: inline-flex;
}

.compact #help-btn,
.compact #history-btn,
.compact #reset-btn {
    display: none;
}

.menu-item:disabled {
    color: var(--ink-3);
}

/* The Media list's buttons get a word under their icon on a phone */
.bar-lbl,
#exp-more-btn {
    display: none;
}

.compact .media-item .bar-btn {
    flex-direction: column;
    gap: 1px;
    width: auto;
    min-width: 44px;
    height: 44px;
}

.compact .bar-lbl {
    display: block;
    font-size: 10px;
    line-height: 1;
}

/* A phone's Export sheet: where it is going, the quality, the summary and Export first; the rest behind "More choices" */
.compact section[data-tab="export"] {
    display: flex;
    flex-direction: column;
}

.compact section[data-tab="export"] > * {
    order: 10;
}

.compact section[data-tab="export"]:not(.exp-open) > :not(.exp-keep),
.compact section[data-tab="export"]:not(.exp-open) #exp-pair {
    display: none;
}

.compact section[data-tab="export"] > .field.first {
    order: 1;
}

.compact #exp-quality-wrap {
    order: 2;
}

.compact #exp-caps-row,
.compact #exp-range-row {
    order: 3;
}

.compact #exp-summary,
.compact #exp-warn {
    order: 4;
}

.compact #export-btn {
    order: 5;
    height: 44px;
    font-size: 15px;
}

.compact #exp-more-btn {
    display: block;
    order: 6;
}

.compact .exp-last {
    order: 11;
}

#big-btn[aria-pressed="true"] {
    background: var(--hover);
    color: var(--accent);
}

.compact #actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    scrollbar-width: none;
}

.compact #actions::-webkit-scrollbar {
    display: none;
}

/* the ends fade where there is more to scroll to (barEdges()) */
.compact #actions.fade-r {
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.compact #actions.fade-l {
    mask-image: linear-gradient(to right, transparent, #000 40px);
}

.compact #actions.fade-l.fade-r {
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.act {
    flex: 0 0 auto;
    min-width: 68px;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--hover);
    font-size: 14px;
    white-space: nowrap;
}

.act.strong {
    background: var(--accent);
    color: #fff;
    font-weight: 500;
}

.act.danger {
    color: var(--danger);
}

.compact #panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    max-height: 52dvh;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(105%);
    border-left: 0;
    border-radius: 14px 14px 0 0;
    background: var(--bg);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    transition: transform 0.18s;
}

.compact.sheet-open #panel {
    transform: none;
}

/* The sheet's heights (app.js, setSheet()): its content up to about half the screen, full (a set height), or only
   its head ("min"). While it is open the picture takes the space above it: the bar is behind it, and so is the
   timeline unless the sheet is small. */
.compact #panel {
    overscroll-behavior: contain;
    transition: transform 0.18s, height 0.18s;
}

.compact.sheet-full #panel,
.compact.sheet-drag #panel {
    max-height: none;
}

.compact.sheet-drag #panel {
    transition: none;
}

.compact.sheet-min #panel {
    overflow: hidden;
}

.compact:not(.landscape).sheet-open #editor {
    padding-bottom: var(--sheet-h, 52dvh);
}

.compact:not(.landscape).sheet-open #actions,
.compact:not(.landscape).sheet-open.tl-gone:not(.sheet-min) #timeline,
.compact.sheet-open:not(.sheet-min) #split-grip {
    display: none;
}

/* under a sheet the timeline stays, shorter (fitSplit()), with the picked item's track in it */
.compact:not(.landscape).sheet-open:not(.sheet-min) #timeline {
    height: var(--tl-sheet, 76px);
}

.compact #sheet-head {
    touch-action: none;
}

.compact #sheet-tabs {
    touch-action: pan-x;
}

.compact #panel-tabs {
    display: none;
}

.compact #sheet-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 14px 6px 4px 14px;
    border-bottom: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    background: var(--bg);
}

#sheet-grip {
    position: absolute;
    top: 0;
    left: 50%;
    width: 120px;
    height: 18px;
    transform: translateX(-50%);
    touch-action: none;
}

#sheet-grip::after {
    position: absolute;
    top: 6px;
    left: 40px;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--ink-3);
    content: "";
}

/* one group at a time in the sheet; its buttons (Split, Copy, Delete) are in the bar */
.compact #edit .edit-head,
.compact #edit .group > h2:first-child,
.compact #edit.one .group:not(.only) {
    display: none;
}

.compact #edit.one .group.only {
    margin: 0;
    padding: 0;
    border-top: 0;
}

.compact .slider input {
    height: 28px;
}

.compact .key-btn {
    width: 30px;
    height: 24px;
    font-size: 15px;
    line-height: 24px;
}

.compact .looks {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    margin: 0 -14px;
    padding: 3px 14px 6px;
}

.compact .look {
    flex: 0 0 68px;
}

.compact .chips button {
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 13px;
}

.compact .trans-row button {
    min-width: 44px;
    height: 36px;
}

.compact .toast {
    bottom: calc(76px + env(safe-area-inset-bottom));
}

.compact .modal {
    align-items: flex-end;
    padding: 0;
}

.compact .modal-card {
    max-width: none;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
}

.compact .progress {
    height: 10px;
    border-radius: 5px;
}

/* a phone: the editor has pinches of its own (the timeline, the picture), so the page itself never zooms; and two
   fingers anywhere round the picture pinch a picked Video 1 clip */
body.compact {
    touch-action: pan-x pan-y;
}

.compact #stage {
    touch-action: none;
}

.compact.big-preview #timeline,
.compact.big-preview #actions {
    display: none;
}

/* a phone on its side: the picture on the left, the timeline on the right */
.compact.landscape header {
    height: 36px;
}

.compact.landscape:not(.big-preview) #work {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}

.compact.landscape:not(.big-preview) #stage {
    grid-row: 1 / span 2;
}

.compact.landscape #timeline {
    height: auto;
}

.compact.landscape #actions {
    padding: 4px 8px;
}

.compact.landscape .act {
    height: 36px;
}

/* on its side with a sheet open: the picture, the play bar and a short timeline down the left, beside the sheet */
.compact.landscape.sheet-open:not(.sheet-min):not(.big-preview) #work {
    grid-template-columns: 42%;
    grid-template-rows: minmax(0, 1fr) auto minmax(90px, 34%);
}

.compact.landscape.sheet-open:not(.sheet-min):not(.big-preview) #stage {
    grid-row: auto;
}

.compact.landscape.sheet-open:not(.sheet-min) #actions {
    display: none;
}

.compact.landscape #panel {
    left: 42%;
    max-height: 100dvh;
    border-radius: 14px 0 0 0;
}

/* The curve of a clip's colours: a square to press and drag points on */
#curve-pad {
    display: block;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
    margin: 10px auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;
}

/* Colour by colour: a dot for each colour that can be changed */
.band-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.band-row button {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.band-row button[aria-checked="true"] {
    outline-color: var(--ink);
}

/* a colour that has been changed */
.band-row button.changed::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #ffffff;
}

.compact .band-row button {
    width: 34px;
    height: 34px;
}

.compact .band-row button.changed::after {
    inset: 12px;
}

/* picking the green screen's colour in the picture */
#preview.picking {
    cursor: crosshair;
}

/* ----- Groups that fold, sections, tips, the side bar's width ----- */

/* a group's title is a button that folds it; the "i" beside it holds its help */
.group-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-section h2 .fold {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.fold::before {
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left-color: var(--ink-3);
    border-right-width: 0;
    transform: rotate(90deg);
    transition: transform 0.12s;
    content: "";
}

.group.closed .fold::before {
    transform: none;
}

.group.closed > .group-body,
#edit .group.off-sec {
    display: none;
}

.group.closed > .group-head {
    margin-bottom: 0;
}

.group-body > :first-child,
.group-body > .field:first-child,
.group-body > .slider:first-child,
.group-body > .check:first-child {
    margin-top: 0;
}

#edit .group + .group,
#edit .edit-head + .group,
#edit .secs + .group,
.media-groups .group {
    margin: 12px -14px 0;
    padding: 12px 14px 0;
    border-top: 1px solid var(--line);
}

.media-groups {
    margin-top: 14px;
}

/* The Edit tab's top: the picked item on one line and the section chips, pinned under the tabs while it scrolls */
.edit-top {
    position: sticky;
    top: 38px;
    z-index: 1;
    margin: -14px -14px 0;
    padding: 10px 14px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

#edit .edit-top + .group {
    margin: 0;
    padding-top: 12px;
}

.compact #edit .edit-top {
    display: none;
}

.edit-head {
    display: flex;
    align-items: center;
    gap: 2px;
}

.edit-thumb {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 28px;
    margin-right: 6px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--hover);
    color: var(--ink-2);
}

.edit-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-name {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    margin-right: 2px;
}

.panel-section .edit-name h2.item-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.25;
}

.edit-len {
    color: var(--ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.edit-head .bar-btn {
    width: 28px;
    height: 28px;
}

.edit-head .bar-btn.danger:hover {
    color: var(--danger);
}

.edit-top .chips.secs {
    margin-top: 10px;
}

/* the sections of a clip's settings */
.chips.secs {
    margin: 12px 0 0;
}

.chips.secs button {
    flex: 1;
    height: 28px;
}

.info {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-3);
    font-size: 10px;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

.info:hover {
    border-color: var(--ink-3);
    color: var(--ink);
}

#tip {
    position: fixed;
    z-index: 80;
    max-width: 250px;
    padding: 6px 9px;
    border-radius: 6px;
    background: #2f2f2f;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* The first-run steps on a phone (refreshHint()): above the bar, or under Export for the last one */
#hint {
    position: fixed;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 16px);
    padding: 8px 6px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);     /* so it stands out on the dark theme's timeline too */
    border-radius: 10px;
    background: #2f2f2f;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

#hint.hidden {
    display: none;
}

#hint.hint-low {
    left: 8px;
}

#hint.hint-top {
    top: 56px;
    right: 8px;
}

#hint::after {
    content: '';
    position: absolute;
    border: 7px solid transparent;
}

#hint.hint-low::after {
    top: 100%;
    left: 30px;
    border-top-color: #2f2f2f;
}

#hint.hint-top::after {
    bottom: 100%;
    right: 40px;
    border-bottom-color: #2f2f2f;
}

#hint .hint-step {
    flex-shrink: 0;
    color: #b8b8b8;
    font-size: 12px;
}

#hint .hint-x {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #d0d0d0;
    font-size: 20px;
    line-height: 1;
}

#tip.hidden {
    display: none;
}

#panel-grip {
    position: absolute;
    top: 0;
    right: calc(var(--panel-w, 340px) - 3px);
    bottom: 0;
    z-index: 4;
    width: 6px;
    cursor: col-resize;
    touch-action: none;
}

#panel-grip:hover,
#panel-grip:active {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
}

#sheet-tabs {
    display: none;
}

/* phones: everything a little bigger for a finger */
.compact #panel-grip,
.compact #edit .secs {
    display: none;
}

.compact #edit .group.closed > .group-body {
    display: block;
}

.compact #edit.one .group.only {
    display: block;
}

.compact .slider {
    min-height: 40px;
    font-size: 13px;
}

.compact .slider > span {
    flex-basis: 100px;
}

.compact .slider > .crop-num {
    flex-basis: 62px;
}

.compact .slider .crop-num input {
    height: 30px;
    font-size: 16px;
}

.compact .slider:has(.key-btn) > span {
    flex-basis: 84px;
}

.compact .info {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.compact #tip {
    max-width: min(300px, calc(100vw - 24px));
    font-size: 13px;
}

/* the bar's buttons with a small picture over their name */
.act.has-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 58px;
    height: 50px;
    padding: 0 8px;
    font-size: 11px;
}

.act:not(.has-icon) {
    height: 50px;
}

.compact #sheet-head {
    flex-wrap: wrap;
}

.compact #sheet-title {
    flex: none;
}

.compact #sheet-tabs:not(.hidden) {
    display: flex;
    order: 5;
    width: 100%;
    margin: 6px 0 6px;
}


/* ----- The guide (guide.php): a page of text that scrolls, unlike the editor ----- */
body.guide {
    display: block;
    height: auto;
    min-height: 100%;
    overflow: visible;
    font: 15px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.guide main {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 20px 64px;
}

.guide h1 {
    margin: 10px 0 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.guide h2 {
    margin: 34px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 18px;
    font-weight: 600;
    scroll-margin-top: 8px;
}

.guide h3 {
    margin: 22px 0 6px;
    font-size: 16px;
    font-weight: 600;
}

.guide p,
.guide ul,
.guide ol {
    margin: 8px 0;
}

.guide ul,
.guide ol {
    padding-left: 22px;
}

.guide ul {
    list-style: disc;
}

.guide ol {
    list-style: decimal;
}

.guide li {
    margin: 5px 0;
}

.guide b {
    font-weight: 600;
}

.guide a {
    color: var(--accent);
}

.guide a:hover {
    text-decoration: underline;
}

.guide-lead,
.guide-back {
    color: var(--ink-2);
}

/* the index: two columns where there is room */
.guide-index {
    columns: 2;
    column-gap: 32px;
    margin-top: 16px;
    padding: 14px 18px 14px 40px;
    border-radius: 8px;
    background: var(--hover);
}

.guide-index li {
    margin: 3px 0;
    break-inside: avoid;
}

.guide kbd {
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--hover);
    font: 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: nowrap;
}

.guide-table {
    overflow-x: auto;
}

.guide table {
    width: 100%;
    border-collapse: collapse;
}

.guide th,
.guide td {
    padding: 7px 10px 7px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.guide th {
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 500;
}

.guide td:first-child {
    white-space: nowrap;
}

@media (max-width: 560px) {
    .guide-index {
        columns: 1;
    }

    .guide td:first-child {
        white-space: normal;
    }
}

/* ----- Final Cut's tools, second round (pro.js) ----- */
/* the precision editor: one cut over the picture */
#precision {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
}

#precision.hidden {
    display: none;
}

#prec-canvas {
    width: 100%;
    height: min(240px, 60%);
    min-height: 120px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--hover);
    touch-action: none;
    cursor: ew-resize;
}

#prec-zoom {
    width: 90px;
}

#prec-edge {
    flex: none;
}

#prec-edge button {
    padding: 4px 8px;
    font-size: 12px;
}

/* typing a time (Ctrl+P, Ctrl+L, or a press on the time) */
#timebox {
    position: fixed;
    z-index: 60;
    width: auto;
    padding: 8px 10px;
}

#time {
    cursor: text;
}

#time b {
    font-weight: inherit;
}

/* on a phone the time is larger, the playhead's darker than the length */
.compact #time {
    font-size: 14px;
}

.compact #time b {
    color: var(--ink);
    font-weight: 600;
}

/* On a phone the box spans the screen, so it never runs off its edge */
.compact #timebox {
    left: 8px !important;
    right: 8px;
}

.compact #timebox input {
    flex: 1;
    min-width: 0;
}

/* the viewer's ratings and keywords */
.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
}

.tag-chip.fav {
    border-color: #3fae4e;
}

.tag-chip.rej {
    border-color: #e5484d;
}

.tag-chip button {
    padding: 1px 7px;
    color: var(--ink-2);
}

.tag-chip button + button {
    padding-left: 3px;
    color: var(--ink-3);
}

.tag-chip button:hover {
    background: var(--hover);
}

/* takes of an audition, speed parts, roles */
.take-list,
.seg-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.take-row {
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 13px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.take-row[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
}

.seg-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.seg-n {
    width: 14px;
    color: var(--ink-3);
}

.seg-t {
    flex: 1;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.seg-row select {
    padding: 2px 4px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
}

.seg-gap {
    width: 22px;
}

.role-row .mix-name {
    width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.mix-row button[data-role-flag="muted"][aria-pressed="true"] {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.mix-row button[data-role-flag="solo"][aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

#key-lanes {
    display: block;
    width: 100%;
    margin-top: 8px;
    border-radius: 6px;
    touch-action: none;
}

#key-lanes.hidden {
    display: none;
}

/* ----- CapCut's quicker tools (smart.js, record.js) ----- */
/* Styling picked words: a row of small buttons under the Words box */
.mark-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.mark-row .plain-btn {
    padding: 3px 8px;
    font-size: 12px;
}

.mark-row input[type="color"] {
    width: 30px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
}

.mark-label {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--ink-2);
}

/* AutoCut's window: the files to use, in a list that scrolls */
.autocut-card {
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.autocut-files {
    max-height: 160px;
    overflow-y: auto;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.autocut-files .check {
    margin-top: 4px;
    min-width: 0;
}

.prompt-card {
    max-width: 480px;
}

/* The teleprompter: the words scrolling over the top of the page while recording, its buttons on a row under them */
#prompter {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 44;        /* under the recording bar */
    display: flex;
    flex-direction: column;
    width: min(760px, 100vw);
    height: 42vh;
    transform: translateX(-50%);
    border-radius: 0 0 12px 12px;
    background: #111;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

#prompter.hidden {
    display: none;
}

.prompter-view {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#prompter-text {
    padding: 0 28px;
    font-weight: 600;
    line-height: 1.4;
    white-space: pre-wrap;
    text-align: center;
    will-change: transform;
}

/* a line where the words should be read, a third of the way down */
.prompter-view::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    z-index: 1;
    border-top: 2px solid rgba(255, 212, 0, 0.6);
    pointer-events: none;
}

.prompter-bar {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    gap: 8px;
    padding: 6px 8px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.prompter-bar .bar-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

/* On a phone the recording bar is a strip along the bottom, the camera small at its start and Stop in reach */
.compact #rec-bar {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: none;
}

.compact #rec-view {
    width: 84px;
}

.compact #rec-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.compact #rec-stop {
    min-width: 76px;
    min-height: 40px;
}

/* the recording bar goes to the bottom while the words show, so it never covers them */
body.prompting #rec-bar {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
}

/* On a phone, recording with the words is a screen of its own: the words at the top (by the front camera), the
   camera's picture under them, the time and Stop at the bottom */
.compact.prompting #prompter {
    left: 0;
    width: 100vw;
    height: 44dvh;
    padding-top: env(safe-area-inset-top);
    transform: none;
    border-radius: 0;
    box-shadow: none;
}

.compact.prompting #prompter-text {
    padding: 0 18px;
}

.compact .prompter-bar .bar-btn {
    width: 48px;
    height: 40px;
    font-size: 18px;
}

.compact.prompting #rec-bar {
    left: 0;
    right: 0;
    width: 100vw;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    bottom: 0;
    transform: none;
    border-radius: 0;
    color: #fff;
    background: #111;
    box-shadow: none;
}

.compact.prompting #rec-bar.cam {
    top: 44dvh;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.compact.prompting #rec-bar.cam #rec-view {
    grid-column: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 10px;
}

.compact.prompting #rec-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.compact.prompting #rec-time {
    color: rgba(255, 255, 255, 0.75);
}

.compact.prompting #rec-stop {
    min-width: 84px;
    min-height: 40px;
}

#rec-count {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: min(40vw, 260px);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

#rec-count.hidden {
    display: none;
}

#rec-view.mirrored {
    transform: scaleX(-1);
}