/* Arthouse cinema layer. Loaded last on every page: maps the legacy per-page variables onto the tokens and
 * restyles surfaces like a film title sequence — serif display type, tracked mono credits, square frames,
 * bone-on-black with a single cinnabar accent. Presentation only. */

:root {
  --bg: var(--color-paper);
  --panel: var(--color-paper-2);
  --panel2: var(--color-paper-3);
  --line: var(--color-rule);
  --accent: var(--color-accent);
  --muted: var(--color-ink-2);
  --danger: var(--color-danger);
  --credit: 600 0.6875rem/1.2 var(--font-mono);
}

html, body { background: var(--color-paper); }
body { color: var(--color-ink); letter-spacing: 0.005em; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

/* Fine film grain over the whole workspace. */
body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Typography: serif titles, tracked mono credits. */
h1, h2, h3, header > strong, .floor-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; }
h1 { font-style: italic; }
header > strong { font-size: 1.05rem; font-style: italic; font-weight: 500; }
label:not(.btn):not(.privacy-check):not(.snap-toggle), .mini, .kpi-label, .scenario-field label, .grade-group summary, .rail-heading span, .export-label, .selection-actions-label, .field > label { font: var(--credit); letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink-3); }
.tag { border-radius: 0; border-color: var(--color-rule); color: var(--color-ink-3); letter-spacing: .14em; }

/* Header: a quiet credit line. */
header { background: var(--color-paper); border-bottom-color: var(--color-rule); }
.nav a, .workspace-nav a { border: 0; border-radius: 0; background: transparent !important; color: var(--color-ink-3); font: var(--credit); letter-spacing: .18em; text-transform: uppercase; box-shadow: inset 0 -1px 0 transparent; }
.nav a:hover, .workspace-nav a:hover { color: var(--color-ink); }
.nav a.active, .workspace-nav a.active { color: var(--color-ink); box-shadow: inset 0 -1px 0 var(--color-accent); }
.storage-switch { border-radius: 0; background: transparent; border-color: var(--color-rule); color: var(--color-ink-2); letter-spacing: .08em; }

/* Controls: square, hairline, bone primary. */
a.btn { text-decoration: none; }
.btn, button.btn, a.btn { border-radius: var(--radius-control); border-color: var(--color-rule-strong); background: transparent; color: var(--color-ink); letter-spacing: .02em; }
.btn:hover { background: var(--color-paper-3); border-color: var(--color-ink-3); }
.btn.primary, .btn.active.primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn.primary:not(:disabled):hover { background: #fff6e6; border-color: #fff6e6; box-shadow: none; }
.btn.active, .tool.active, .maker-head .toolbar .btn.active, .maker-head .toolbar .tool.active { background: transparent; border-color: var(--color-accent); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }
.btn.danger { border-color: color-mix(in oklch, var(--color-danger) 45%, var(--color-rule)); }
input, select, textarea { border-radius: var(--radius-input); background-color: var(--color-paper); border-color: var(--color-rule-strong); color: var(--color-ink); }
input[type="range"] { accent-color: var(--color-ink); }
.grade-chip { border-radius: 0; font: var(--credit); letter-spacing: .12em; text-transform: uppercase; }
.grade-chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

/* Panels: rules instead of boxes. */
.panel, .scenario-rail, .scenario-inspector, aside { background: var(--color-paper); }
.asset-card, .asset-item, .marker-card, .scenario-shell .object-row { border-radius: 0; }
.asset-card.active, .asset-item.active, .scenario-shell .object-row.is-selected { background: var(--color-paper-3); border-color: transparent; box-shadow: inset 2px 0 0 var(--color-accent); }
.asset-card img, .scenario-shell .object-row img { border-radius: 0; }
.status, #dbStatus, .scenario-status { font-family: var(--font-mono); letter-spacing: .04em; color: var(--color-ink-3); background: transparent; border-radius: 0; }

/* Dashboard: a title card and a contact sheet. */
.dashboard .hero h1, h1#projectTitle { font-size: clamp(2.4rem, 6vw, 5rem); line-height: .95; font-weight: 400; }
.dashboard .cards .card { background: transparent; }
.kpi-value { font-family: var(--font-display); font-weight: 400; }
.level-card { border-radius: 0; border-color: var(--color-rule); }
.level-card img { filter: grayscale(.25) brightness(.72); }
.level-number { border-radius: 0; background: #000000b3; color: var(--color-ink); font: var(--credit); letter-spacing: .2em; }
.level-body strong { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.25rem; }
.level-body small { font: var(--credit); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-2); }
.level-play { border-radius: 0; background: var(--color-ink); color: var(--color-paper); }
.level-card:hover, .level-card:focus-visible { border-color: var(--color-ink); box-shadow: 0 18px 40px #000c; }

/* ---------- Viewer: the screening room ---------- */
#viewerWrap { background: #000; }
/* Permanent letterbox, the frame of the film. */
.shell #viewerWrap::before, .shell #viewerWrap::after { content: ""; position: absolute; left: 0; right: 0; z-index: 8; height: clamp(14px, 5.5%, 56px); background: #000; pointer-events: none; }
.shell #viewerWrap::before { top: 0; }
.shell #viewerWrap::after { bottom: 0; }
.shell #viewerWrap > .toolbar { background: transparent; border: 0; box-shadow: none; padding: 0; }
.shell #viewerWrap > .toolbar .btn, .shell #viewerWrap > .toolbar select { border-color: #ffffff26; background: #000000a6; color: var(--color-ink); font: var(--credit); letter-spacing: .14em; text-transform: uppercase; }
.shell #viewerWrap > .toolbar .btn:hover { border-color: var(--color-ink); }
/* Scene info becomes a subtitle line. */
.shell #sceneInfo { left: 50%; right: auto; bottom: calc(clamp(14px, 5.5%, 56px) + 14px); transform: translateX(-50%); max-width: min(720px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; text-shadow: 0 1px 2px #000, 0 0 18px #000; }
.shell #sceneInfo strong { display: block; font: italic 400 1.35rem/1.2 var(--font-display); color: var(--color-ink); }
.shell #sceneInfo span { margin-top: 4px; color: var(--color-ink-2); font: var(--credit); letter-spacing: .2em; text-transform: uppercase; }
.shell #viewerWrap.presentation-idle #sceneInfo { transform: translate(-50%, .45rem); }
/* Title card in the language of opening credits. */
.scene-card-kicker { color: var(--color-ink-2); letter-spacing: .42em; font-weight: 500; }
.scene-card-title { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; text-shadow: 0 2px 30px #000; }
.scene-card-line { background: var(--color-accent); height: 1px; }
/* HUD, toasts, dialog. */
.hud-progress { border-radius: 0; background-color: #000000b3; border-color: #ffffff26; box-shadow: none; }
.hud-count { font-weight: 500; letter-spacing: .14em; }
.hud-bar { border-radius: 0; height: 2px; }
.hud-bar i { border-radius: 0; background: var(--color-ink); box-shadow: none; }
.game-toast { border-radius: 0; border-color: #ffffff26; background: #000000e6; box-shadow: 0 20px 40px #000c; }
.game-toast strong { font: italic 400 1.1rem var(--font-display); color: var(--color-ink); }
.game-toast span { font: var(--credit); letter-spacing: .18em; text-transform: uppercase; }
.game-toast.is-complete strong { color: #e2b25a; }
#viewerWrap > .detail { border-radius: 0; border-color: #ffffff26; background: #0b0a09f5; box-shadow: 0 30px 60px #000e; }
#viewerWrap > .detail .detail-head h2 { font: italic 400 1.4rem var(--font-display); }
#viewerWrap > .detail img { border-radius: 0; }
#viewerWrap > .detail #hotspotDetailNote { font-family: var(--font-display); font-size: 1rem; line-height: 1.6; color: var(--color-ink-2); }
#panoramaInspectPrompt { border-radius: 0; border-color: #ffffff2e; background: #000000b3; font: var(--credit); letter-spacing: .2em; text-transform: uppercase; }
#panoramaReticle { border-color: #ece6da66; }
#panoramaReticle::before, #panoramaReticle::after { background: #ece6da66; }
.panorama-object-label { border-radius: 0; border-color: #ffffff2e; background: #000000cc; font: var(--credit); letter-spacing: .14em; text-transform: uppercase; }
#mapPanel .floor-title { font-style: italic; }

/* ---------- Authoring stages ---------- */
.authoring-stage, .viewer-stage, #panoramaStage { border-radius: 0; }
.authoring-title h1 { font-style: italic; font-weight: 400; font-size: 1.3rem; }

@media (prefers-reduced-motion: reduce) { body::after { display: none; } }
.dashboard > .card:last-child .hero-actions .btn.primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
@media (max-width: 760px) { .game-hud { right: 8px; } .hud-bar { display: none; } }

/* Leftovers from the old teal theme: command palette, empty states, recovery banner, status rules. */
.command-palette { border-radius: 0; border-color: var(--color-rule-strong); background: var(--color-paper-2); color: var(--color-ink); }
.command-head { border-bottom-color: var(--color-rule); }
.command-list button { border-radius: 0; border-color: var(--color-rule); background: transparent; color: var(--color-ink); }
.command-list button:hover, .command-list button:focus-visible { border-color: var(--color-ink-3); background: var(--color-paper-3); }
#selectionEmpty, #inspectorEmpty, .inspector-empty, .empty { border-radius: 0; border-color: var(--color-rule-strong); color: var(--color-ink-3); }
.recovery-banner { border-radius: 0; border: var(--rule) solid var(--color-danger); background: #160c0af5; color: var(--color-ink); }
.status-line { border-bottom-color: var(--color-rule); }
.result { border-radius: 0; border-color: var(--color-rule); background: transparent; }
.result:hover { border-color: var(--color-ink-3); background: var(--color-paper-3); }
.result-type { color: var(--color-accent); }
button:disabled, .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.primary:disabled { background: transparent; border-color: var(--color-rule-strong); color: var(--color-ink-3); }

/* Touch: every control reaches 44px. */
@media (pointer: coarse) {
  summary { min-height: 44px; display: flex; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  input[type="color"] { min-height: 44px; min-width: 44px; }
}