/* CreativePulse — Filament
   A cutting-room language on semantic tokens.
   Not a SaaS dashboard. Not a generate-button product. */

:root {
    --rail: 252px;
    --top: 76px;
    --font-serif: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;
    --font-sans: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
    --forest: #1b2a24;
    --cream: #e8dcc8;
    --brass: #c4a46a;
    --ember: #8c2f2b;
    --iron: #2a2118;
}

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

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

html {
    transition: background-color 180ms ease, color 180ms ease;
}

body {
    position: relative;
}

a {
    color: inherit;
    text-decoration: none;
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
figure {
    margin: 0;
}

em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent-hot);
}

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

.grain {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.mono {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.quiet {
    color: var(--fg-subtle);
}

.display,
.display-sm {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.display {
    font-size: clamp(40px, 5vw, 64px);
}

.display-sm {
    font-size: clamp(32px, 4vw, 46px);
}

.lede {
    color: var(--fg-muted);
    font-weight: 300;
    font-size: 17px;
    max-width: 36rem;
}

.lede.narrow {
    max-width: 32rem;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    margin: 8px 0 10px;
}

/* Gate / sign-in -------------------------------------------------------- */

.gate {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 70% 50% at 18% 40%, var(--accent-dim), transparent 55%),
        var(--bg);
}

.letterbox,
.letterbox-end {
    position: fixed;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 4;
    background: var(--letterbox);
}

.letterbox-end {
    top: auto;
    bottom: 0;
}

.gate-grid {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    padding: 72px 72px 80px;
    gap: 72px;
    align-items: center;
}

.gate-copy h1 {
    font-family: var(--font-serif);
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 18px 0 22px;
}

.gate-points {
    margin-top: 36px;
    padding: 0;
    list-style: none;
    color: var(--fg-muted);
}

.gate-points li {
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 15px;
}

.gate-panel {
    border: 1px solid var(--border);
    background: var(--glass);
    backdrop-filter: blur(20px);
    padding: 36px 36px 28px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.mark-inline {
    margin-bottom: 28px;
}

.mark-serif {
    font-family: var(--font-serif);
    font-size: 22px;
}

.mark-sans {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    margin-left: 6px;
    color: var(--accent);
}

.gate-panel h2 {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 20px;
}

.gate-form {
    display: grid;
    gap: 16px;
}

.gate-form label {
    display: grid;
    gap: 6px;
}

.gate-form label span,
.brand-switch .eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.field,
.gate-form input,
.brand-switch select,
.upload input[type="text"],
.search input,
.competitor input,
.competitor select,
.lib-find input,
.lib-browse input,
.lib-browse select,
.lib-form input,
.lib-form select,
.brief input,
.brief select,
.lock-form input,
.lock-form select,
.studio-brief input,
.studio-brief select,
.studio-brief textarea,
.clip-row input[type="number"] {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    outline: none;
}

.clip-row input[type="number"] {
    width: 88px;
}

.gate-form input:focus,
.brand-switch select:focus,
.upload input[type="text"]:focus,
.search input:focus,
.competitor input:focus,
.competitor select:focus,
.lib-find input:focus,
.lib-browse input:focus,
.lib-browse select:focus,
.lib-form input:focus,
.lib-form select:focus,
.brief input:focus,
.brief select:focus,
.studio-brief input:focus,
.studio-brief select:focus,
.studio-brief textarea:focus,
.lock-form input:focus,
.lock-form select:focus {
    border-color: var(--accent);
}

.btn-filament {
    margin-top: 8px;
    border: 0;
    background: var(--accent);
    color: var(--on-accent);
    padding: 12px 18px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.btn-filament:hover {
    background: var(--accent-hot);
}

.btn-filament:disabled {
    opacity: 1;
    cursor: not-allowed;
    background: transparent;
    color: var(--fg-subtle);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.form-error {
    color: var(--alert);
    margin-bottom: 12px;
}

.gate-note {
    margin-top: 22px;
}

/* Public cinema -------------------------------------------------------- */

.cinema {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
}

.cinema-nav {
    position: absolute;
    top: 18px;
    left: 28px;
    z-index: 12;
    display: flex;
    align-items: baseline;
    gap: 28px;
}

.cinema-enter-link {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(237, 230, 218, 0.78);
}

.cinema-enter-link:hover {
    color: #e0c089;
}

.cinema-nav .mark-serif {
    color: #ede6da;
}

.cinema-nav .mark-sans {
    color: #e0c089;
}

.cinema-nav .mark {
    padding: 0;
}

.cinema-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #0b0a09;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.cinema-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.cinema-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8, 6, 4, 0.12) 0%, rgba(8, 6, 4, 0.28) 55%, rgba(8, 6, 4, 0.62) 100%),
        linear-gradient(90deg, rgba(8, 6, 4, 0.28) 0%, transparent 48%);
}

.cinema-hero-copy {
    position: relative;
    z-index: 2;
    color: #ede6da;
    max-width: 40rem;
}

.cinema-hero-copy {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 72px 88px;
}

.cinema-hero-copy h1 {
    font-family: var(--font-serif);
    font-size: clamp(52px, 7vw, 92px);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.03em;
    margin: 16px 0 18px;
}

.cinema-hero-copy .eyebrow,
.cinema-hero-copy .lede,
.cinema-credit {
    color: rgba(237, 230, 218, 0.68);
}

.cinema-hero-copy em {
    color: #e0c089;
}

.cinema-hero-body {
    max-width: 34rem;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(237, 230, 218, 0.82);
    margin: 8px 0 28px;
}

.cinema-hero-btn {
    align-self: flex-start;
    text-decoration: none;
}

.cinema-credit {
    margin-top: 22px;
}

.cinema-credit a,
.reel-credit {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cinema-credit a:hover,
.reel-credit:hover {
    color: var(--accent);
}

.cinema-beats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    padding: 72px 72px 24px;
}

.cinema-beats h2 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    margin: 10px 0 12px;
}

.cinema-beats p:last-child {
    color: var(--fg-muted);
    font-weight: 300;
}

.cinema-rooms {
    padding: 24px 72px 16px;
}

.cinema-rooms dl {
    margin-top: 20px;
}

.cinema-rooms dl > div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
}

.cinema-rooms dt {
    font-family: var(--font-serif);
    font-size: 22px;
}

.cinema-rooms dd {
    color: var(--fg-muted);
    font-weight: 300;
}

.cinema-enter {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    padding: 64px 72px 120px;
    align-items: center;
    scroll-margin-top: 28px;
}

.cinema-enter-copy h2 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 400;
    margin: 12px 0 16px;
}

/* Reel ----------------------------------------------------------------- */

.reel {
    padding: 48px 72px 32px;
}

.reel-head {
    max-width: 36rem;
    margin-bottom: 28px;
}

.reel-head .section-title {
    margin-top: 8px;
}

.reel-head a {
    color: var(--accent);
    margin: 0;
}

.reel-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    grid-auto-flow: dense;
}

.reel-cell {
    margin: 0;
}

.reel-cell--wide {
    grid-column: span 3;
}

.reel-cell--portrait,
.reel-cell--square {
    grid-column: span 2;
}

.reel-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: #100e0c;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}

.reel-cell--wide .reel-frame {
    aspect-ratio: 16 / 9;
}

.reel-cell--portrait .reel-frame {
    aspect-ratio: 3 / 4;
}

.reel-cell--square .reel-frame {
    aspect-ratio: 1;
}

.reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.reel-cell figcaption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px 0;
    color: var(--fg-subtle);
    font-size: 12px;
}

.reel-cell:hover .reel-frame {
    border-color: var(--border-strong);
}

/* App chrome ------------------------------------------------------------ */

.app {
    display: grid;
    grid-template-columns: var(--rail) 1fr;
    min-height: 100vh;
}

.rail {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 28px 18px 20px;
    border-right: 1px solid var(--border);
    background: var(--bg-rail);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mark {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    padding: 0 6px;
}

.mark-rule {
    display: block;
    flex: 1 0 100%;
    width: 28px;
    max-width: 28px;
    height: 2px;
    margin: 10px 0 0;
    background: var(--accent);
    border-radius: 2px;
}

.brand-switch {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.brand-switch select {
    margin-top: 8px;
    appearance: none;
    cursor: pointer;
}

.brand-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--fg-subtle);
    font-size: 12px;
}

.nav {
    display: grid;
    gap: 2px;
}

.nav .eyebrow {
    margin: 16px 6px 6px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    font-size: 14px;
}

.nav-link:hover {
    color: var(--fg);
    background: var(--accent-dim);
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}

.nav-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.nav-link.is-current {
    color: var(--accent-hot);
    background: var(--accent-dim);
    font-weight: 500;
}

.rail-foot {
    margin-top: auto;
    padding: 0 6px;
}

.stage {
    min-width: 0;
}

.top {
    position: sticky;
    top: 0;
    z-index: 6;
    min-height: var(--top);
    padding: 16px 36px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background: var(--glass);
    backdrop-filter: blur(16px);
}

.top-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.top-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.chip {
    border: 1px solid var(--border-strong);
    padding: 5px 9px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
    border-radius: 999px;
    background: var(--surface);
}

.chip-quiet,
.chip.is-on {
    border-color: var(--accent);
    color: var(--accent-hot);
}

.chip-info {
    border-color: color-mix(in oklab, var(--info) 50%, var(--border));
    color: var(--info);
}

.chip-ledger {
    border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
    color: var(--accent-hot);
}

.chip-tier.is-isolated {
    border-color: color-mix(in oklab, var(--warn) 55%, var(--border));
    color: var(--warn);
}

.chip-tier.is-pooled {
    border-color: color-mix(in oklab, var(--info) 55%, var(--border));
    color: var(--info);
}

.who {
    font-size: 13px;
    color: var(--fg-muted);
}

.text-btn,
.text-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0.04em;
}

.text-link {
    display: inline-block;
    margin-top: 14px;
}

.main {
    padding: 36px 36px 72px;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 36px;
}

.page-head .display-sm {
    margin-top: 8px;
}

/* Theme switcher ------------------------------------------------------- */

.theme-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.theme-tools--gate,
.theme-tools--public {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 12;
}

.theme-scheme,
.theme-trigger {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--fg);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.theme-scheme {
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
}

.theme-scheme svg {
    width: 18px;
    height: 18px;
}

.theme-scheme[data-scheme="dark"] .icon-sun,
.theme-scheme[data-scheme="light"] .icon-moon {
    display: none;
}

.theme-trigger {
    min-height: 36px;
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.theme-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 220px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.theme-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--fg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
}

.theme-choice:hover,
.theme-choice[aria-pressed="true"] {
    background: var(--accent-dim);
}

.theme-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background:
        linear-gradient(135deg, var(--choice-bg) 50%, var(--choice-accent) 50%);
}

/* Pulse ---------------------------------------------------------------- */

.hero {
    margin-bottom: 40px;
}

.hero .display {
    margin: 12px 0 16px;
}

.slate-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 56px;
}

.slate {
    padding: 22px 22px 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.slate--fatigue {
    border-top: 3px solid var(--alert);
}

.slate--underpowered {
    border-top: 3px solid var(--warn);
}

.slate--signoff {
    border-top: 3px solid var(--ok);
}

.slate-kicker {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.slate--fatigue .slate-kicker { color: var(--alert); }
.slate--underpowered .slate-kicker { color: var(--warn); }
.slate--signoff .slate-kicker { color: var(--ok); }

.slate h3,
.node h3,
.pair h3,
.gate-card h3 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 10px;
}

.slate p {
    color: var(--fg-muted);
    font-weight: 300;
}

.slate-meta {
    margin-top: auto;
    padding-top: 18px;
    color: var(--fg-subtle);
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.stat-line {
    display: flex;
    gap: 28px;
    margin: 18px 0 8px;
}

.stat-line dt {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.stat-line dd {
    font-family: var(--font-serif);
    font-size: 32px;
    margin: 4px 0 0;
}

.genome-list {
    list-style: none;
    padding: 0;
    margin-top: 16px;
}

.genome-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    color: var(--fg-muted);
}

.genome-list span {
    color: var(--fg-subtle);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Library -------------------------------------------------------------- */

.lib-head {
    align-items: flex-start;
    margin-bottom: 28px;
}

.lib-head .lede {
    margin-top: 14px;
}

.lib-find {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    min-width: min(340px, 100%);
}

.lib-find .btn-filament {
    margin-top: 0;
}

.studio-note {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid color-mix(in oklab, var(--accent, #c4a46a) 40%, var(--border));
    background: color-mix(in oklab, var(--accent, #c4a46a) 10%, var(--surface));
    border-radius: var(--radius-sm, 6px);
    color: var(--fg);
}

.studio-note-quiet {
    background: transparent;
    border-color: var(--border);
    color: var(--fg-muted);
}

.studio-note + .studio-note {
    margin-top: -8px;
}

.lib-notice {
    margin: -8px 0 24px;
    padding: 12px 14px;
    border: 1px solid color-mix(in oklab, var(--alert) 45%, var(--border));
    background: color-mix(in oklab, var(--alert) 8%, var(--surface));
    border-radius: var(--radius);
}

.lib-intake {
    margin-bottom: 36px;
}

.lib-intake-head {
    margin-bottom: 14px;
}

.lib-intake-head .section-title {
    margin: 6px 0 0;
}

.lib-switch {
    position: relative;
}

.lib-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lib-switch-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.lib-tab {
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg-muted);
    cursor: pointer;
    font-size: 14px;
}

.lib-tab:hover {
    color: var(--fg);
    background: var(--accent-dim);
}

#lib-path-file:focus-visible ~ .lib-switch-tabs [for="lib-path-file"],
#lib-path-rival:focus-visible ~ .lib-switch-tabs [for="lib-path-rival"],
#lib-path-official:focus-visible ~ .lib-switch-tabs [for="lib-path-official"] {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

#lib-path-file:checked ~ .lib-switch-tabs [for="lib-path-file"],
#lib-path-rival:checked ~ .lib-switch-tabs [for="lib-path-rival"],
#lib-path-official:checked ~ .lib-switch-tabs [for="lib-path-official"] {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent-hot);
    font-weight: 500;
}

.lib-switch-panels {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px 22px;
}

.lib-panel {
    display: none;
}

#lib-path-file:checked ~ .lib-switch-panels .lib-panel-file,
#lib-path-rival:checked ~ .lib-switch-panels .lib-panel-rival,
#lib-path-official:checked ~ .lib-switch-panels .lib-panel-official {
    display: block;
}

.lib-panel-why {
    margin: 0 0 16px;
    color: var(--fg-muted);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.45;
    max-width: 42rem;
}

.lib-form {
    display: grid;
    gap: 14px 16px;
    align-items: end;
}

.lib-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.lib-form .btn-filament {
    margin-top: 0;
}

.lib-form-file {
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) auto;
    max-width: 52rem;
}

.lib-form-rival {
    grid-template-columns: 1fr 1fr 1fr;
}

.lib-form-official {
    grid-template-columns: minmax(200px, 1fr) 88px auto;
    max-width: 44rem;
}

.lib-form-official .lib-status {
    grid-column: 1 / -1;
}

.lib-form input[type="file"] {
    width: 100%;
    padding: 9px 10px;
    font-size: 13px;
    color: var(--fg-muted);
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
}

.lib-status {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-subtle);
}

.lib-status.is-closed {
    padding: 10px 12px;
    border: 1px solid color-mix(in oklab, var(--warn) 45%, var(--border));
    background: color-mix(in oklab, var(--warn) 8%, var(--surface));
    color: var(--fg-muted);
    border-radius: var(--radius-sm);
}

.lib-shelf {
    padding-top: 4px;
}

.lib-shelf-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 0 0 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.lib-shelf-head .section-title {
    margin: 6px 0 8px;
}

.lib-shelf-head .text-link {
    margin-top: 0;
}

.lib-views {
    display: flex;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
}

.lib-view {
    padding: 8px 14px;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--fg-muted);
}

.lib-view:hover {
    color: var(--fg);
    background: var(--accent-dim);
}

.lib-view.is-on {
    background: var(--accent-dim);
    color: var(--accent-hot);
    font-weight: 500;
}

.lib-browse {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: end;
    margin: 0 0 22px;
}

.lib-browse label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.lib-browse input[type="search"] {
    min-width: min(220px, 100%);
}

.lib-browse select {
    min-width: 132px;
}

.lib-browse .btn-filament {
    margin-top: 0;
}

.frame-date {
    display: block;
    margin-top: 8px;
    color: var(--fg-subtle);
}

.lib-lines {
    display: grid;
    gap: 8px;
}

.lib-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.lib-line-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    background-color: var(--iron);
    background-size: cover;
    background-position: center;
}

.lib-line-thumb--tone {
    background: var(--iron);
}

.lib-line-copy h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 4px;
}

.lib-line-copy h3 a:hover {
    color: var(--accent-hot);
}

.lib-line-date {
    color: var(--fg-subtle);
    white-space: nowrap;
}

.lib-line-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.lib-line-actions .text-link,
.lib-line-actions form {
    margin: 0;
}

.lib-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}

.lib-lines + .lib-pager,
.frame-grid + .lib-pager {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.lib-pager .text-link {
    margin-top: 0;
}

.lib-pager-status {
    color: var(--fg-subtle);
}

.lib-pager-pages {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.lib-pager-pages a,
.lib-pager-pages span {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 13px;
}

.lib-pager-pages span[aria-current="page"] {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent-hot);
}

.lib-tidy {
    margin-top: 12px;
}

.lib-tidy .btn-filament {
    margin-top: 0;
}

.lib-empty {
    padding: 36px 22px;
    margin-bottom: 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    text-align: center;
    color: var(--fg);
}

.lib-empty .quiet {
    margin-top: 6px;
}

.lib-empty .text-link {
    margin-top: 0;
}

.lib-rivals {
    margin-top: 40px;
}

.brief {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.brief label {
    display: grid;
    gap: 8px;
}

.brief-wide {
    grid-column: span 2;
}

.brief .btn-filament {
    margin-top: 0;
}

.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filters .chip {
    background: transparent;
    cursor: pointer;
}

.frame-grid {
    column-count: 3;
    column-gap: 18px;
}

.frame {
    break-inside: avoid;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--surface);
}

.frame-field {
    flex: 1;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.frame-field h3 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    max-width: 12ch;
    line-height: 1.1;
}

.frame-kind,
.frame-dur {
    color: var(--fg-subtle);
}

.gen-cost {
    font-variant-numeric: tabular-nums;
}

.frame-dur {
    margin-top: 10px;
}

.tone-forest .frame-field { background: var(--forest); color: var(--cream); }
.tone-brass .frame-field { background: #3a2e18; color: var(--brass); }
.tone-cream .frame-field { background: var(--cream); color: var(--forest); }
.tone-ember .frame-field { background: var(--ember); color: var(--cream); }
.tone-iron .frame-field { background: var(--iron); color: var(--cream); }

.frame-photo {
    min-height: inherit;
    background-size: cover;
    background-position: center;
    color: var(--cream);
    text-shadow: 0 1px 16px rgba(11, 10, 9, 0.75);
}

.frame-preview {
    background: var(--iron);
    color: var(--cream);
}

.frame-video {
    display: block;
    width: 100%;
    max-height: 420px;
    background: #141210;
}

.frame-caption {
    padding: 16px 18px 8px;
}

.frame-caption h3 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    max-width: 12ch;
    line-height: 1.1;
    margin: 6px 0 0;
}

.frame-prompt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    padding: 4px 14px 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-muted);
    max-width: 46ch;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.frame-spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 4px 14px 12px;
    margin: 0;
}

.frame-spec div {
    min-width: 0;
}

.frame-spec dt {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fg-subtle);
}

.frame-spec dd {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--fg);
    overflow-wrap: anywhere;
}

.frame-audio {
    width: 100%;
    margin-top: 12px;
}

.frame-actions {
    display: flex;
    gap: 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}

.frame-actions .text-link {
    margin-top: 0;
}

.aspect-9-16 { min-height: 420px; }
.aspect-2-3 { min-height: 420px; }
.aspect-3-4 { min-height: 400px; }
.aspect-16-9 { min-height: 260px; }
.aspect-1-1 { min-height: 340px; }
.aspect-4-5 { min-height: 380px; }
.aspect-4-3 { min-height: 280px; }
.aspect-3-2 { min-height: 280px; }
.aspect-21-9 { min-height: 200px; }
.aspect-custom { min-height: 280px; }

.genome-chips {
    list-style: none;
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--bg-rail);
}

.genome-chips li {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    border: 1px solid var(--border);
    padding: 3px 6px;
    border-radius: 6px;
}

/* Studio --------------------------------------------------------------- */

.graph {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 28px 0 8px;
}

.graph-rule {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 52%;
    height: 1px;
    background: var(--border-strong);
}

.node {
    position: relative;
    z-index: 1;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    min-height: 180px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.node-accent {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-dim), var(--surface));
}

.canvas-note {
    margin-top: 28px;
}

/* Assembly cutting room ------------------------------------------------ */

.cut {
    display: grid;
    gap: 22px;
}

.cut-head {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.cut-meta {
    color: var(--fg-subtle);
    margin-top: 8px;
}

.cut-switch {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.cut-field {
    display: grid;
    gap: 6px;
    min-width: 220px;
}

.cut-field select,
.cut-field input,
.cut-new input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.cut-new {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.cut-alert {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in oklab, var(--alert) 50%, var(--border));
    background: color-mix(in oklab, var(--alert) 10%, var(--surface));
    color: var(--alert);
    border-radius: var(--radius);
}

.cut-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 820px) {
    .cut-board {
        grid-template-columns: 1fr;
    }

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

.cut-stage {
    --safe-top: 0.08;
    --safe-bottom: 0.14;
    --safe-left: 0.06;
    --safe-right: 0.06;
    --box-x: 0.08;
    --box-y: 0.78;
    --box-w: 0.8;
    --box-h: 0.06;
    background: var(--iron);
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.cut-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cut-stage[data-aspect="9:16"] .cut-frame {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
}

.cut-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #141210;
}

.cut-video.is-idle {
    opacity: 0;
    pointer-events: none;
}

.cut-safe {
    position: absolute;
    inset: 0;
    border-style: solid;
    border-color: rgb(0 0 0 / 0.38);
    border-width: calc(var(--safe-top) * 100%) calc(var(--safe-right) * 100%) calc(var(--safe-bottom) * 100%) calc(var(--safe-left) * 100%);
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.cut-caption {
    position: absolute;
    left: calc(var(--box-x) * 100%);
    top: calc(var(--box-y) * 100%);
    width: calc(var(--box-w) * 100%);
    margin: 0;
    padding: 6px 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    background: rgb(0 0 0 / 0.45);
    pointer-events: none;
}

.cut-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--cream);
    margin: 0;
}

.cut-frames {
    display: grid;
    gap: 10px;
    align-content: start;
}

.cut-place {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 10px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-subtle);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.cut-place.is-on {
    border-color: var(--accent);
    color: var(--fg);
}

.cut-place-box {
    display: block;
    background: var(--iron);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.cut-place-box[data-ratio="16:9"] {
    width: 72px;
    height: 40px;
}

.cut-place-box[data-ratio="9:16"] {
    width: 28px;
    height: 50px;
}

.cut-transport {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cut-tc {
    min-width: 8rem;
}

.timeline {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--iron) 88%, var(--surface));
    padding: 16px 16px 20px;
    border-radius: var(--radius);
    color: var(--cream);
}

.tl-gutter {
    width: 36px;
}

.tl-lane {
    position: relative;
    min-height: 168px;
}

.tl-ruler {
    height: 8px;
    margin-bottom: 6px;
    background-image: repeating-linear-gradient(
        90deg,
        rgb(255 255 255 / 0.18) 0 1px,
        transparent 1px 28px
    );
}

.tl-head {
    position: relative;
    height: 18px;
    color: rgb(255 255 255 / 0.45);
    margin-bottom: 10px;
}

.tl-head .mono {
    position: absolute;
    transform: translateX(-50%);
}

.tl-track {
    position: relative;
    height: 36px;
    margin: 8px 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.tl-track-audio {
    height: 42px;
}

.tl-label {
    position: absolute;
    left: -40px;
    top: 10px;
    color: rgb(255 255 255 / 0.4);
    width: 36px;
}

.tl-clip {
    position: absolute;
    left: calc(var(--in) * 1%);
    width: calc(var(--span) * 1%);
    top: 6px;
    height: 22px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 12px;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    box-sizing: border-box;
    max-width: 100%;
}

.tl-clip.is-on {
    box-shadow: 0 0 0 2px #fff;
}

.tl-clip.is-b { background: var(--cream); color: var(--forest); }
.tl-clip.is-c { background: var(--ok); color: var(--on-accent); }
.tl-clip.is-d { background: var(--surface-2); color: var(--fg); }
.tl-clip.is-e {
    background: transparent;
    color: rgb(255 255 255 / 0.8);
    border: 1px solid rgb(255 255 255 / 0.28);
    cursor: text;
}

.tl-clip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.tl-handle {
    width: 6px;
    align-self: stretch;
    cursor: ew-resize;
    background: rgb(255 255 255 / 0.35);
    border-radius: 2px;
}

.tl-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    width: 100%;
    height: 28px;
}

.playhead {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: calc(var(--in, 0) * 1%);
    width: 2px;
    background: var(--alert);
    z-index: 3;
    cursor: ew-resize;
}

.tl-mark {
    position: absolute;
    top: 26px;
    left: calc(var(--in) * 1%);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.tl-empty {
    margin: 6px 0 0;
    color: rgb(255 255 255 / 0.45);
    font-size: 13px;
}

.cut-bin-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cut-bin-item {
    padding: 8px 12px;
    border: 1px dashed var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-sm);
    cursor: grab;
    font-size: 13px;
}

.clip-edit {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 18px 20px;
    margin: 0;
    border-radius: var(--radius);
}

.clip-panel {
    display: none;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.clip-panel.is-on {
    display: block;
}

.clip-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.clip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: end;
    margin-bottom: 10px;
}

.clip-grid label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: var(--fg-subtle);
}

.clip-grid input,
.clip-grid select {
    width: 110px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

.clip-grid.wide input,
.clip-grid.wide select {
    width: min(420px, 100%);
}

.clip-verbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cut-render {
    margin: 0;
}

.cut-advanced {
    color: var(--fg-subtle);
}

.cut-advanced summary {
    cursor: pointer;
    margin-bottom: 10px;
}

.cut-result {
    display: grid;
    gap: 22px;
}

.cut-outputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.cut-output {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 14px;
    border-radius: var(--radius);
}

.cut-output-video {
    display: block;
    width: 100%;
    max-height: 360px;
    background: #141210;
    margin: 10px 0;
}

.cut-output[data-aspect="9:16"] .cut-output-video {
    max-width: 220px;
}

.review-play {
    display: grid;
    gap: 16px;
    margin: 18px 0;
}

.review-play video {
    width: 100%;
    max-height: 320px;
    background: #141210;
}

/* Monitor / experiments ------------------------------------------------ */

.mon-head {
    align-items: flex-start;
    margin-bottom: 20px;
}

.mon-head .lede {
    margin-top: 14px;
    max-width: 38rem;
}

.mon-read {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin: 0 0 28px;
}

.mon-read-form .btn-filament,
.mon-agree .btn-filament,
.mon-mmp-form .btn-filament {
    margin-top: 0;
}

.mon-read .quiet {
    max-width: 32rem;
}

.mon-alert {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 20px 22px;
    margin-bottom: 36px;
    border: 1px solid color-mix(in oklab, var(--alert) 45%, var(--border));
    background: color-mix(in oklab, var(--alert) 8%, var(--surface));
    border-radius: var(--radius);
}

.mon-alert .section-title {
    margin: 6px 0 8px;
}

.mon-alert-status {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--alert);
    white-space: nowrap;
}

.mon-block {
    margin: 0 0 40px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.mon-block-head {
    margin-bottom: 18px;
}

.mon-block-head .section-title {
    margin: 6px 0 8px;
}

.mon-card {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 26px 28px;
    max-width: 44rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.mon-card h3 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    margin: 6px 0 16px;
    max-width: 36rem;
}

.mon-card-slim {
    margin-top: 12px;
}

.mon-card-slim h3,
.mon-card-slim p:not(.eyebrow) {
    margin-bottom: 0;
}

.mon-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    margin: 14px 0 8px;
}

.mon-card .genome-chips {
    background: transparent;
    padding: 0;
}

.mon-chips-change li {
    border-color: color-mix(in oklab, var(--alert) 40%, var(--border));
    color: var(--alert);
}

.mon-agree {
    margin-top: 18px;
}

.mon-earlier {
    margin-top: 16px;
    max-width: 44rem;
}

.mon-earlier summary {
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 14px;
}

.mon-earlier ul {
    list-style: none;
    padding: 12px 0 0;
    margin: 0;
}

.mon-earlier li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    color: var(--fg-muted);
    font-size: 14px;
}

.mon-empty {
    padding: 28px 22px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    text-align: center;
}

.mon-empty .quiet {
    margin-top: 6px;
}

.mon-pair article {
    min-height: 100%;
}

.mon-side.is-win {
    border-top: 3px solid var(--ok);
}

.mon-side.is-lose {
    border-top: 3px solid var(--alert);
}

.mon-side .mono {
    margin-top: 14px;
}

.mon-pattern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.mon-pattern .genome-chips {
    background: transparent;
    padding: 0;
}

.mon-change-note {
    margin-top: 16px;
}

.mon-spend {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 40rem;
}

.mon-spend li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.mon-spend strong {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    min-width: 4.5rem;
}

.mon-mmp {
    margin: 8px 0 12px;
    padding: 22px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
}

.mon-mmp .mon-block-head {
    margin-bottom: 16px;
}

.mon-mmp-form {
    display: grid;
    grid-template-columns: minmax(160px, 220px) auto;
    gap: 12px 16px;
    align-items: end;
    max-width: 32rem;
}

.mon-mmp-form label {
    display: grid;
    gap: 6px;
}

.mon-mmp .lib-status {
    margin-top: 14px;
}

.alert-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 18px 20px;
    border: 1px solid color-mix(in oklab, var(--alert) 45%, var(--border));
    background: color-mix(in oklab, var(--alert) 8%, var(--surface));
    border-radius: var(--radius);
    margin-bottom: 32px;
}

.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.pair article {
    border: 1px solid var(--border);
    padding: 20px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.slope {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    margin: 22px 0 12px;
}

.slope span {
    flex: 1;
    height: var(--h);
    background: var(--ok);
    border-radius: 4px 4px 0 0;
}

.slope.is-down span {
    background: var(--alert);
}

.power {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 36px;
    align-items: center;
    padding: 8px 0 28px;
}

.power-meter {
    position: relative;
    height: auto;
    background: transparent;
    border: 0;
    padding-top: 14px;
}

.power-meter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.power-fill {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 10px;
    max-width: calc(100% - 2px);
    background: var(--accent);
    border-radius: 999px;
}

.power-meter .mono {
    margin-top: 10px;
    color: var(--fg-subtle);
}

.exp-head {
    align-items: flex-start;
    margin-bottom: 20px;
}

.exp-head .lede {
    margin-top: 14px;
    max-width: 38rem;
}

.exp-now .mon-card {
    max-width: 48rem;
}

.exp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 18px;
    margin: 22px 0 8px;
}

.exp-stats dt {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.exp-stats dd {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    margin: 4px 0 0;
}

.exp-verdict {
    margin: 12px 0 0;
    color: var(--fg-muted);
}

.exp-verdict.is-short {
    color: var(--alert);
}

.exp-reason {
    margin-top: 12px;
}

.exp-meter {
    margin-top: 18px;
}

.exp-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 32px;
    margin: 0 0 18px;
}

.exp-tally dt {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.exp-tally dd {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    margin: 4px 0 0;
}

.exp-list {
    max-width: 48rem;
}

.exp-list li {
    display: grid;
    gap: 6px;
}

.exp-list .chip {
    justify-self: start;
}

.exp-foot {
    margin: 8px 0 0;
    max-width: 36rem;
}

/* Brand / ledger / review ---------------------------------------------- */

.brand-head {
    align-items: flex-start;
    margin-bottom: 28px;
}

.brand-head .lede {
    margin-top: 14px;
}

.brand-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.brand-meta .text-link {
    margin-top: 0;
}

.brand-onboard {
    margin-bottom: 28px;
}

.brand-onboard.is-update {
    margin: 36px 0 0;
}

.brand-onboard h3,
.brand-kit .studio-panel h3,
.brand-floor .studio-panel h3 {
    max-width: 24ch;
}

.brand-read {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 18px;
}

.brand-read .btn-filament,
.brand-compose .btn-filament,
.brand-draft .btn-filament {
    margin-top: 0;
}

.brand-field {
    display: grid;
    gap: 8px;
}

.brand-field input,
.brand-field select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    outline: none;
}

.brand-field input:focus,
.brand-field select:focus {
    border-color: var(--accent);
}

.brand-draft {
    margin-bottom: 28px;
}

.brand-draft form {
    margin: 0;
}

.brand-kit {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    margin-bottom: 36px;
}

.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.swatch span {
    display: block;
    height: 92px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.swatch p {
    margin-top: 8px;
    color: var(--fg-subtle);
}

.type-spec {
    margin: 12px 0 8px;
    color: var(--fg-muted);
}

.type-sample {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
    max-width: 16ch;
}

.brand-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.brand-section-head .section-title {
    margin: 6px 0 8px;
}

.brand-section-head .lede {
    max-width: 36rem;
}

.brand-claims,
.brand-seeds {
    margin-bottom: 36px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.brand-claim-list,
.brand-seed-list,
.brand-people,
.brand-notes,
.brand-tasks {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.brand-claim-list li,
.brand-tasks li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.brand-claim-list li p,
.brand-notes li p {
    margin: 0;
}

.brand-claim-status {
    flex-shrink: 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.brand-claim-status.is-unverified {
    color: var(--warn);
}

.brand-claim-status.is-verified {
    color: var(--ok);
}

.brand-more {
    margin-top: 4px;
}

.brand-more summary {
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 12px 0;
    list-style: none;
}

.brand-more summary::-webkit-details-marker {
    display: none;
}

.brand-more summary::after {
    content: " +";
    color: var(--accent);
}

.brand-more[open] summary::after {
    content: " −";
}

.brand-seed-list li {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.brand-seed-list a {
    overflow-wrap: anywhere;
}

.brand-seed-list a:hover {
    color: var(--accent);
}

.brand-floor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 8px;
}

.brand-people {
    margin: 4px 0 18px;
}

.brand-person {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.brand-person strong {
    display: block;
    font-weight: 500;
}

.brand-notes li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.brand-notes strong {
    display: block;
    font-size: 13px;
    color: var(--fg-subtle);
    margin-bottom: 4px;
}

.brand-compose {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.brand-compose + .brand-compose {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

.brand-compose .btn-ghost {
    margin-top: 0;
    justify-self: start;
}

.kit {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    margin-bottom: 40px;
}

.claims ul {
    list-style: none;
    padding: 0;
    margin: 14px 0;
}

.claims li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.scroll-x {
    --scroll-x-fade: var(--bg);
    position: relative;
}

.scroll-x-hint {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.65rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--fg-subtle);
}

.scroll-x-hint-icon {
    position: relative;
    flex: 0 0 1.7rem;
    width: 1.7rem;
    height: 0.7rem;
}

.scroll-x-hint-icon::before,
.scroll-x-hint-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0.42rem;
    height: 0.42rem;
    border-inline-start: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
}

.scroll-x-hint-icon::before {
    left: 0.12rem;
    transform: translateY(-50%) rotate(45deg);
}

.scroll-x-hint-icon::after {
    right: 0.12rem;
    transform: translateY(-50%) rotate(-135deg);
}

.scroll-x-frame {
    position: relative;
}

.scroll-x-pane {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--fg-subtle) transparent;
}

.scroll-x-pane:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.scroll-x-frame::before,
.scroll-x-frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.4rem;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.scroll-x-frame::before {
    left: 0;
    background: linear-gradient(to right, var(--scroll-x-fade), transparent);
}

.scroll-x-frame::after {
    right: 0;
    background: linear-gradient(to left, var(--scroll-x-fade), transparent);
}

.scroll-x.is-overflow .scroll-x-hint {
    display: flex;
}

.scroll-x[data-edge="start"] .scroll-x-frame::after,
.scroll-x[data-edge="mid"] .scroll-x-frame::after,
.scroll-x[data-edge="end"] .scroll-x-frame::before,
.scroll-x[data-edge="mid"] .scroll-x-frame::before {
    opacity: 1;
}

@media (max-width: 900px) {
    .scroll-x-pane .ledger th,
    .scroll-x-pane .ledger td {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .scroll-x.is-overflow .scroll-x-hint-icon {
        animation: scroll-x-nudge 1.6s ease-in-out infinite;
    }
}

@keyframes scroll-x-nudge {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(4px);
    }
}

.ledger {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.ledger th,
.ledger td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
}

.ledger th {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    font-weight: 500;
}

.led-head {
    align-items: flex-start;
    margin-bottom: 20px;
}

.led-head .lede {
    margin-top: 14px;
    max-width: 38rem;
}

.led-week {
    padding-top: 8px;
    border-top: 0;
}

.led-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px 16px;
    max-width: 52rem;
}

.led-stats dt {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.led-stats dd {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    margin: 4px 0 0;
}

.led-card {
    max-width: 44rem;
}

.led-job-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
    margin: 18px 0 8px;
}

.led-job-meta dt {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.led-job-meta dd {
    margin: 4px 0 0;
    font-size: 15px;
}

.led-fallback {
    margin: 14px 0 0;
    color: var(--fg-muted);
}

.led-fallback .mon-label {
    display: inline;
    margin: 0 8px 0 0;
}

.led-accept {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px 12px;
    margin-top: 18px;
}

.led-accept label {
    display: grid;
    gap: 6px;
}

.led-accept select,
.led-accept-slim select {
    min-width: 8rem;
}

.led-accept .btn-filament {
    margin-top: 0;
}

.led-accept-slim {
    margin-top: 4px;
}

.led-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 48rem;
}

.led-list li {
    display: grid;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.led-list .chip {
    justify-self: start;
}

.led-foot {
    margin: 8px 0 0;
    max-width: 36rem;
}

.studio-head {
    margin-bottom: 20px;
    align-items: flex-start;
}

.studio-head .lede {
    margin-top: 12px;
}

.studio-path {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.studio-path li {
    display: grid;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.studio-path strong {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.studio-path span {
    color: var(--fg-muted);
    font-size: 14px;
    max-width: 38ch;
}

.studio-work {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.48fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.studio-next {
    display: grid;
    grid-template-columns: 1.15fr 0.92fr 0.92fr;
    gap: 18px;
    margin: 0 0 28px;
}

.studio-grid,
.studio-grid.slim {
    display: grid;
    gap: 18px;
    margin: 8px 0 36px;
}

.studio-grid {
    grid-template-columns: 1fr 1.2fr 1fr;
}

.studio-grid.slim {
    grid-template-columns: 1fr 1fr;
}

.studio-panel {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 22px 22px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.studio-panel h3 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    margin: 8px 0 10px;
    max-width: 28ch;
}

.studio-brief-panel h3,
.studio-look h3 {
    max-width: none;
}

.studio-lead {
    color: var(--fg-muted);
    margin-bottom: 16px;
    max-width: 46ch;
}

.studio-look .studio-more {
    margin-top: 16px;
}

.lock-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.lock-list li {
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.lock-pick {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px 0;
    cursor: pointer;
}

.lock-pick input {
    margin-top: 4px;
    accent-color: var(--accent);
}

.lock-pick strong {
    display: block;
    font-weight: 500;
}

.lock-pick .quiet,
.lock-pick .mono {
    display: block;
    margin-top: 2px;
}

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

.lock-form label,
.studio-brief label {
    display: grid;
    gap: 8px;
}

.lock-check {
    grid-template-columns: auto 1fr;
    align-items: center;
    font-size: 13px;
    color: var(--fg-muted);
}

.field-hint {
    font-size: 12px;
    color: var(--fg-subtle);
    line-height: 1.4;
}

.studio-brief {
    display: grid;
    gap: 16px;
}

.studio-brief-top,
.studio-format {
    display: grid;
    gap: 12px 16px;
}

.studio-brief-top {
    grid-template-columns: 1fr 1fr;
}

.studio-format {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.studio-prompt textarea {
    min-height: 128px;
    resize: vertical;
    line-height: 1.45;
}

.studio-suffix {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.studio-suffix span {
    font-size: 12px;
    color: var(--fg-subtle);
}

.studio-more {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.studio-more summary {
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 13px;
    letter-spacing: 0.04em;
    list-style: none;
}

.studio-more summary::-webkit-details-marker {
    display: none;
}

.studio-more summary::after {
    content: " +";
    color: var(--accent);
}

.studio-more[open] summary::after {
    content: " −";
}

.studio-more .studio-format,
.studio-more .lock-form {
    margin-top: 14px;
}

.studio-more .studio-format {
    grid-template-columns: 1fr 1fr;
}

a.btn-filament {
    display: inline-block;
    text-decoration: none;
    margin-top: 0;
}

.studio-go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.studio-go-actions,
.cut-render-go {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.notify-done {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--fg-muted);
    cursor: pointer;
    user-select: none;
}

.studio-go .btn-filament {
    margin-top: 0;
}

.studio-go .field-hint {
    max-width: 28ch;
}

.studio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.studio-actions .btn-ghost,
.studio-actions .btn-filament,
.studio-look .btn-ghost,
.studio-look .btn-filament,
.canvas-stage .btn-ghost,
.lock-form .btn-ghost {
    margin-top: 0;
}

.studio-model {
    margin: 0;
}

.board + .board {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.shot-strip {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: grid;
    gap: 6px;
}

.shot-strip li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.motion-path {
    width: 100%;
    height: 92px;
    color: var(--accent);
    margin: 8px 0 12px;
}

.canvas-stage {
    background:
        linear-gradient(180deg, var(--accent-dim), transparent 40%),
        var(--surface);
}

.btn-ghost {
    margin-top: 12px;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--fg);
    padding: 8px 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.page-head.tight {
    margin-top: 36px;
}

/* Playables ------------------------------------------------------------ */

.play-head {
    align-items: flex-start;
    margin-bottom: 20px;
}

.play-head .lede {
    margin-top: 12px;
    max-width: 42rem;
}

.play-work {
    display: grid;
    grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 40px;
}

.play-work .studio-panel h3 {
    max-width: none;
}

.play-go {
    margin-top: 8px;
}

.play-go .btn-filament {
    margin-top: 0;
}

.play-checks {
    margin-bottom: 0;
}

.play-note {
    border-color: color-mix(in oklab, var(--ok) 45%, var(--border));
    background: color-mix(in oklab, var(--ok) 8%, var(--surface));
}

.play-ledger-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
}

.play-ledger-head h3 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-top: 6px;
}

.play-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.play-card {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 24px 24px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.play-card.is-pass {
    border-top: 3px solid var(--ok);
}

.play-card.is-fail {
    border-top: 3px solid var(--alert);
}

.play-card h3 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.15;
    margin: 8px 0 6px;
}

.play-verdict {
    color: var(--fg-muted);
    margin-bottom: 8px;
}

.play-reason {
    color: var(--alert);
    font-size: 14px;
    margin-top: 4px;
}

.play-outcome {
    margin-top: auto;
    padding-top: 16px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.play-outcome.is-ok {
    color: var(--ok);
}

.play-outcome.is-alert {
    color: var(--alert);
}

.play-empty {
    border: 1px dashed var(--border-strong);
    background: var(--surface);
    padding: 32px 28px;
    border-radius: var(--radius);
}

.play-empty h3 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    margin: 8px 0 10px;
    max-width: 28ch;
}

.play-history {
    margin-top: 22px;
}

.play-history summary {
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.play-history ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.play-history li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.play-history strong {
    font-weight: 500;
}

.gate-card {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 28px;
    max-width: 720px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.provenance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
    margin: 22px 0;
}

.provenance dt {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.provenance dd {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--info);
    flex-shrink: 0;
}

.prov--ok .status-dot { background: var(--ok); }
.prov--warn .status-dot { background: var(--warn); }
.prov--alert .status-dot { background: var(--alert); }
.prov--info .status-dot { background: var(--info); }

@media (max-width: 1280px) {
    .studio-format {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-next {
        grid-template-columns: 1fr 1fr;
    }

    .studio-next .canvas-stage {
        grid-column: 1 / -1;
    }
}

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

    .rail {
        position: relative;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 16px 16px;
        gap: 14px;
    }

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

    .nav .eyebrow {
        display: none;
    }

    .nav-link {
        padding: 8px 12px;
    }

    .rail-foot {
        display: none;
    }

    .frame-grid {
        column-count: 1;
    }

    .lib-form-file,
    .lib-form-rival,
    .lib-form-official,
    .lib-find,
    .lib-shelf-head,
    .brief,
    .brand-read,
    .brand-section-head {
        grid-template-columns: 1fr;
    }

    .lib-find .btn-filament {
        justify-self: start;
    }

    .lib-line {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .lib-line-date,
    .lib-line-actions {
        grid-column: 2;
    }

    .lib-browse label,
    .lib-browse .btn-filament {
        flex: 1 1 140px;
    }

    .gate-grid,
    .slate-row,
    .graph,
    .split,
    .pair,
    .mon-pattern,
    .mon-mmp-form,
    .mon-alert,
    .mon-read,
    .mon-spend li,
    .power,
    .kit,
    .brand-kit,
    .brand-floor,
    .studio-grid,
    .studio-grid.slim,
    .studio-path,
    .play-work,
    .play-grid,
    .studio-work,
    .studio-next,
    .studio-brief-top,
    .studio-format,
    .studio-more .studio-format,
    .cinema-beats,
    .cinema-enter,
    .cinema-rooms dl > div {
        grid-template-columns: 1fr;
    }

    .play-history li {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .play-history li .quiet {
        grid-column: 2;
    }

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

    .reel-cell--wide,
    .reel-cell--portrait,
    .reel-cell--square {
        grid-column: span 1;
    }

    .gate-grid,
    .main,
    .top,
    .cinema-hero-copy,
    .cinema-beats,
    .reel,
    .cinema-rooms,
    .cinema-enter {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cinema-nav {
        left: 16px;
    }

    .cinema-hero-copy {
        padding-bottom: 64px;
    }

    .top-right {
        gap: 8px;
    }

    .page-head,
    .mon-head,
    .exp-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .exp-stats,
    .led-stats,
    .led-job-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.review-public {
    background: var(--bg);
    color: var(--fg);
    min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
    html {
        transition: none;
    }
}