/*
 * The recorder: a 1958 home studio console. Tokens, fonts, buttons and lamps come from theme.css;
 * this file lays out the app. State is never colour alone: lamps and rims carry it, the words say it.
 */

:root {
    /* Scope colours, read by app.js on every frame. */
    --scope-bg: var(--ground-sunk);
    --scope-live: var(--burnt-deep);
    --scope-idle: var(--ink-faint);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --scope-live: var(--burnt); }
}

body {
    min-height: 100vh;
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 640px) {
    body { padding: 16px 16px 24px; gap: 16px; }
}

.mono,
.timer,
.level-scale,
.level-readout,
.check-value,
.check-target,
kbd {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---------- Masthead: the parabolic arc cap ---------- */

.masthead {
    --fill: var(--surface);
    --rim-hi: var(--copper-hi);
    --rim-mid: var(--copper);
    --rim-lo: var(--copper-lo);
    padding: 40px clamp(20px, 7%, 72px) 18px;
    border: 2px solid transparent;
    border-bottom-width: 0;
    border-radius: var(--shape-arc);
    background:
        linear-gradient(var(--fill), var(--fill)) padding-box,
        linear-gradient(180deg, var(--rim-hi), var(--rim-mid) 50%, var(--rim-lo)) border-box;
    box-shadow: 0 2px 0 var(--copper-lo);
    text-align: center;
}

.masthead h1 {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
}

.tagline {
    max-width: 62ch;
    margin: 10px auto 0;
    color: var(--ink-muted);
}

.status-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 28px;
    margin-top: 20px;
}

/* The on-air lamp: lit poppy while recording, mustard while busy, celadon when ready. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking);
}
.status-row > div:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.status-row > div:first-child .status { color: var(--ink); }

.status::before {
    content: '';
    --lens: var(--ground-sunk);
    width: 18px;
    height: 18px;
    border: 2px solid var(--copper);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--lens-hi, transparent) 0 18%, var(--lens) 60%);
    box-shadow: inset 0 1px 0 var(--copper-hi), 0 0 var(--glow, 0) var(--lens);
}
body[data-state="READY"] .status::before,
body[data-state="PAUSED"] .status::before { --lens: var(--celadon); --lens-hi: var(--surface); --glow: 8px; }
body[data-state="RECORDING"] .status::before { --lens: var(--poppy); --lens-hi: var(--surface); --glow: 12px; animation: glow 1.6s ease-in-out infinite; }
body[data-state="PREROLL"] .status::before,
body[data-state="ROOMTONE"] .status::before,
body[data-state="STOPPING"] .status::before,
body[data-state="EXPORTING"] .status::before { --lens: var(--mustard); --lens-hi: var(--surface); --glow: 8px; animation: glow 1.6s ease-in-out infinite; }

@keyframes glow {
    50% { box-shadow: inset 0 1px 0 var(--copper-hi), 0 0 2px var(--lens); }
}

/* The timer is an instrument well. */
.timer {
    --fill: var(--ground-sunk);
    padding: 4px 18px;
    border: 2px solid transparent;
    border-radius: var(--shape-instrument);
    background:
        linear-gradient(var(--fill), var(--fill)) padding-box,
        linear-gradient(180deg, var(--copper-hi), var(--copper) 50%, var(--copper-lo)) border-box;
    box-shadow: inset 0 3px 6px color-mix(in srgb, var(--copper-lo) 45%, transparent), 0 1px 0 var(--copper-hi);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}
body[data-state="RECORDING"] .timer { color: var(--ink); }

/* ---------- Cassette: purely visual; reels turn while recording or playing the pre-roll ---------- */

.cassette {
    --tape: 0;
    width: 150px;
    height: auto;
    flex: none;
    filter: drop-shadow(0 2px 0 var(--copper-lo));
}

.cassette .shell { fill: var(--surface); stroke: var(--copper); stroke-width: 2; }
.cassette .screw { fill: var(--ground-sunk); stroke: var(--copper); stroke-width: 1; }
.cassette .label { fill: var(--wheat); }
.cassette .stripe { fill: var(--rose); }
.cassette .side { fill: var(--copper-lo); font-family: var(--font-mono); font-weight: 700; font-size: 11px; }
.cassette .window { fill: var(--ground-sunk); stroke: var(--copper-lo); stroke-width: 1.5; }
.cassette .tape { stroke: var(--copper-lo); stroke-width: 1.5; }
.cassette .pack { fill: var(--copper-lo); }
.cassette .hub-ring { fill: var(--surface); stroke: var(--copper); stroke-width: 1.5; }
.cassette .hub-teeth { stroke: var(--copper); stroke-width: 1.5; stroke-linecap: round; }
.cassette .mouth { fill: var(--ground-sunk); stroke: var(--copper); stroke-width: 1.5; }
.cassette .hole { fill: var(--surface); stroke: var(--copper); stroke-width: 1; }

/* The tape moves from the left reel to the right one as the take grows. */
.cassette .pack,
.cassette .rewind,
.cassette .hub {
    transform-box: fill-box;
    transform-origin: center;
}
.cassette .pack { transition: transform 600ms ease-out; }
.cassette .reel-left .pack { transform: scale(calc(1 - 0.5 * var(--tape))); }
.cassette .reel-right .pack { transform: scale(calc(0.5 + 0.5 * var(--tape))); }

/* Paused rather than removed, so the reels stop where they are instead of snapping back. */
.cassette .hub { animation: reel-spin 1.8s linear infinite paused; }
body[data-state="RECORDING"] .cassette .hub,
body[data-state="PREROLL"] .cassette .hub { animation-play-state: running; }

.cassette.rewinding .rewind { animation: reel-rewind 0.7s cubic-bezier(.3, 0, .4, 1); }

@keyframes reel-spin { to { transform: rotate(360deg); } }
@keyframes reel-rewind { to { transform: rotate(-1080deg); } }

@media (max-width: 640px) {
    .cassette { width: 120px; }
}

/* ---------- Restore banner ---------- */

.restore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 24px;
    border: 2px solid var(--mustard);
    border-radius: 28px 10px 28px 10px;
    background: var(--surface);
    box-shadow: 0 6px 16px var(--shadow);
}
#restore-text::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    border: 2px solid var(--copper);
    border-radius: 50%;
    background: var(--mustard);
    box-shadow: 0 0 8px var(--mustard);
    vertical-align: -1px;
}
.restore-actions { display: flex; gap: 10px; }

/* ---------- Layout: two lozenge panels ---------- */

.layout {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

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

.panel {
    --fill: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 32px;
    border: 2px solid transparent;
    border-radius: var(--shape-lozenge);
    background:
        linear-gradient(var(--fill), var(--fill)) padding-box,
        linear-gradient(180deg, var(--copper-hi), var(--copper) 50%, var(--copper-lo)) border-box;
    box-shadow: 0 2px 0 var(--copper-lo), 0 6px 16px var(--shadow);
}

@media (max-width: 640px) {
    .panel { padding: 20px 18px 24px; border-radius: 32px 12px 32px 12px; }
}

.panel-title {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--copper);
    box-shadow: 0 1px 0 var(--copper-hi);
    font-size: 1.1875rem;
}

/* ---------- Transport ---------- */

.transport {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
}

@media (max-width: 640px) {
    .transport { grid-template-columns: 1fr; }
}

.btn-record { font-size: 1.1875rem; min-height: 52px; }

/* Stumble cuts audio: poppy rims it, never fills it. */
.btn-record[data-mode="stumble"]:not(:disabled),
.btn-record[data-mode="stumble"]:not(:disabled):is(:hover, :active) {
    --fill: var(--surface);
    --rim-hi: var(--poppy);
    --rim-mid: var(--poppy);
    --rim-lo: var(--poppy);
    --rim-width: 3px;
    color: var(--ink);
    box-shadow: 0 2px 0 var(--copper-lo), 0 6px 16px var(--shadow);
}

.btn-small { min-height: 40px; padding: 0.3rem 1rem; font-size: 0.9375rem; align-self: flex-start; }

/* ---------- Messages: a lamp plus the words ---------- */

.message {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    min-height: 1.55em;
    color: var(--ink);
}
.message:empty { display: none; }
.message[data-tone]:not([data-tone=""])::before {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    border: 2px solid var(--copper);
    border-radius: 50%;
    background: var(--lens);
    box-shadow: 0 0 6px var(--lens);
    transform: translateY(1px);
}
.message[data-tone="pass"] { --lens: var(--celadon); }
.message[data-tone="warn"] { --lens: var(--mustard); }
.message[data-tone="fail"] { --lens: var(--poppy); }

/* ---------- Level meter: an instrument well ---------- */

.level {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
}

.level-track {
    position: relative;
    height: 18px;
    border: 2px solid transparent;
    border-radius: var(--shape-instrument);
    background:
        linear-gradient(to right, var(--sage) 0%, var(--sage) 72%, var(--mustard) 88%, var(--poppy) 100%) padding-box,
        linear-gradient(180deg, var(--copper-hi), var(--copper) 50%, var(--copper-lo)) border-box;
    overflow: hidden;
}

/* --level and --hold (0..1 across -60..0 dB) are set by app.js; the mask hides the unlit part. */
.level-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(var(--level, 0) * 100%);
    background: var(--ground-sunk);
    box-shadow: inset 0 3px 5px color-mix(in srgb, var(--copper-lo) 40%, transparent);
}

.level-hold {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--hold, 0) * 100%);
    width: 3px;
    background: var(--ink);
}

.level-scale {
    grid-column: 1;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.level-readout {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 13ch;
    justify-content: flex-end;
    font-weight: 700;
}

.level-clip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    visibility: hidden;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.level-clip::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--copper);
    border-radius: 50%;
    background: var(--poppy);
    box-shadow: 0 0 8px var(--poppy);
}
.level[data-clip="true"] .level-clip { visibility: visible; }

@media (max-width: 640px) {
    .level { grid-template-columns: 1fr; }
    .level-readout { grid-row: auto; grid-column: 1; justify-content: space-between; }
    .level-scale span:nth-child(even) { visibility: hidden; }
}

/* ---------- Scope ---------- */

.scope {
    position: relative;
    height: 132px;
    border: 2px solid transparent;
    border-radius: var(--shape-instrument);
    background:
        linear-gradient(var(--scope-bg), var(--scope-bg)) padding-box,
        linear-gradient(180deg, var(--copper-hi), var(--copper) 50%, var(--copper-lo)) border-box;
    box-shadow: inset 0 3px 6px color-mix(in srgb, var(--copper-lo) 45%, transparent), 0 1px 0 var(--copper-hi);
    overflow: hidden;
}

.scope canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mustard) 22%, transparent);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    color: var(--ink);
    text-align: center;
    padding: 0 16px;
}

/* ---------- Hotkeys: rules, not cards ---------- */

.hotkeys h3 {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

.hotkeys dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
}

.hotkeys dt,
.hotkeys dd {
    padding: 12px 0;
    border-top: 1px solid var(--copper);
}

.hotkeys dt { padding-right: 18px; }

/* A keycap: a small copper-rimmed key. */
kbd {
    display: inline-block;
    min-width: 5.5ch;
    padding: 2px 10px;
    border: 2px solid var(--copper);
    border-radius: 8px;
    background: var(--ground);
    box-shadow: 0 2px 0 var(--copper-lo);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
}

.hotkeys dd { margin: 0; color: var(--ink-muted); }
.hotkeys dd strong { color: var(--ink); }

.hint {
    margin: 12px 0 0;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

/* ---------- ACX checks: instrument wells with a lamp ---------- */

.check {
    --fill: var(--ground);
    --rim-hi: var(--copper-hi);
    --rim-mid: var(--copper);
    --rim-lo: var(--copper-lo);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 2px solid transparent;
    border-radius: var(--shape-instrument);
    background:
        linear-gradient(var(--fill), var(--fill)) padding-box,
        linear-gradient(180deg, var(--rim-hi), var(--rim-mid) 50%, var(--rim-lo)) border-box;
    box-shadow: 0 1px 0 var(--copper-hi);
}

.check-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.check-label::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--copper);
    border-radius: 50%;
    background: var(--lens, var(--ground-sunk));
    box-shadow: 0 0 var(--glow, 0) var(--lens, transparent);
}

.check-target { font-size: 0.75rem; color: var(--ink-muted); }

.check-value {
    font-size: 1.1875rem;
    font-weight: 700;
}

.check-note {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.check[data-result="pass"] { --lens: var(--celadon); --glow: 7px; }
.check[data-result="warn"] { --lens: var(--mustard); --glow: 7px; --rim-hi: var(--mustard); --rim-mid: var(--mustard); }
.check[data-result="fail"] { --lens: var(--poppy); --glow: 7px; --rim-hi: var(--poppy); --rim-mid: var(--poppy); --rim-lo: var(--poppy); }

/* ---------- Export ---------- */

.btn-export { width: 100%; font-size: 1.1875rem; min-height: 52px; }

.export-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.export-progress progress {
    width: 100%;
    height: 12px;
    accent-color: var(--burnt-deep);
}

.report {
    padding: 4px 2px;
    font-size: 0.9375rem;
}

.report h3 {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.report ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.report li {
    padding: 8px 0;
    border-top: 1px solid var(--copper);
    font-family: var(--font-mono);
    font-size: 0.875rem;
}
.report li.pass::first-letter,
.report li.fail::first-letter { font-weight: 700; }

.report .notes { color: var(--ink-muted); margin-top: 8px; font-size: 0.875rem; }

.report-wav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--copper);
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.report-next { margin: 12px 0 0; font-size: 0.875rem; color: var(--ink-muted); }

/* ---------- Footer ---------- */

.footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 14px;
    border-top: 1px solid var(--copper);
    box-shadow: inset 0 1px 0 var(--copper-hi);
    font-size: 0.875rem;
    color: var(--ink-muted);
}
.footer > div:first-child { font-family: var(--font-mono); font-size: 0.8125rem; }
.footer-links { display: flex; gap: 18px; }
.disclaimer { flex-basis: 100%; }