/* NOMUS — Technical Minimalist.
Paper + Forest, Space Grotesk display / JetBrains Mono functional.
Flat color blocks, 1px hairlines, no shadows or gradients, 0–2px radius,
snappy linear/ease-out micro-interactions. */
/* ---------- tokens ----------
Theme contract (per theme): --bg --surface --surface-2 --border --grid
--fg --muted --accent --accent-fg --ok --danger --gold --glow
plus optional --mosaic-ink / --mosaic-mix overrides for the texture.
Default (no attribute) = paper. Batou palettes ported from batou.ai. */
:root {
/* paper (default) */
--bg: #F7F7F5;
--surface: #FFFFFF;
--surface-2: #ECECE9;
--border: rgba(58, 58, 56, 0.2);
--grid: #3A3A38;
--fg: #232522;
--muted: #6F716B;
--accent: #1A3C2B; /* Forest */
--accent-fg: #F7F7F5;
--gold: #F4D35E;
--ok: #1A3C2B;
--danger: #C0492E;
--glow: none;
--mosaic-ink: #3A3A38;
--mosaic-mix: 12%;
/* shared */
--accent-hover: color-mix(in srgb, var(--accent) 82%, white);
--display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--icon: "Nomus Icons", var(--mono);
--screen: "Courier Prime", "Courier New", Courier, monospace;
--u: 8px; /* baseline unit */
--gutter: 24px;
--margin: 32px;
--hair: 1px solid var(--border);
--r: 2px; /* sm radius — the only one allowed */
--snap: 0.12s linear;
--ease: 0.15s ease-out;
/* mosaic architecture texture: a 960px mondrian partition of interlocking
panels with crosshair marks — a MASK, so any theme can tint it via
--mosaic-ink/--mosaic-mix. Lives on the bg layer, never under text. */
--mosaic-svg: url('data:image/svg+xml,');
}
[data-theme="forest"] {
--bg: #141613; --surface: #1A1C19; --surface-2: #232520;
--border: rgba(237, 237, 234, 0.16); --grid: #EDEDEA;
--fg: #EDEDEA; --muted: #8E908A;
--accent: #9EFFBF; --accent-fg: #12271B;
--gold: #F4D35E; --ok: #9EFFBF; --danger: #FF8C69;
--glow: none; --mosaic-ink: #EDEDEA; --mosaic-mix: 8%;
}
/* neutral graphite dark — paper's true counterpart (forest & co. are tinted) */
[data-theme="dark"] {
--bg: #121212; --surface: #1A1A1A; --surface-2: #242424;
--border: rgba(237, 237, 234, 0.14); --grid: #EDEDEA;
--fg: #E8E8E5; --muted: #8A8A85;
--accent: #EDEDEA; --accent-fg: #121212;
--gold: #F4D35E; --ok: #E8E8E5; --danger: #FF8C69;
--glow: none; --mosaic-ink: #EDEDEA; --mosaic-mix: 7%;
}
/* ---- focus palettes (from batou.ai's theme system) ---- */
/* classic P3 amber phosphor: #FFB000 over near-black (VT220/Wyse 50 lineage) */
[data-theme="amber"] {
--bg: #050300; --surface: #0a0600; --surface-2: #241400;
--border: #3a2400; --grid: #4a2e00;
--fg: #ffb000; --muted: #8f5800;
--accent: #ffb000; --accent-fg: #050300;
--gold: #ffb000; --ok: #ffb000; --danger: #cc5500;
--glow: 0 0 4px rgba(255, 176, 0, 0.55), 0 0 11px rgba(255, 176, 0, 0.22);
--mosaic-ink: #ffb000; --mosaic-mix: 11%;
}
[data-theme="nord"] {
--bg: #2e3440; --surface: #272c36; --surface-2: #3b4252;
--border: #434c5e; --grid: #4c566a;
--fg: #d8dee9; --muted: #7b88a1;
--accent: #88c0d0; --accent-fg: #2e3440;
--gold: #ebcb8b; --ok: #a3be8c; --danger: #bf616a;
--glow: none; --mosaic-ink: #d8dee9; --mosaic-mix: 9%;
}
[data-theme="everforest"] {
--bg: #2d353b; --surface: #232a2e; --surface-2: #374145;
--border: #414b50; --grid: #859289;
--fg: #d3c6aa; --muted: #859289;
--accent: #a7c080; --accent-fg: #2d353b;
--gold: #dbbc7f; --ok: #83c092; --danger: #e67e80;
--glow: none; --mosaic-ink: #d3c6aa; --mosaic-mix: 9%;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/static/fonts/jetbrains-mono.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Space Grotesk";
src: url("/static/fonts/space-grotesk.woff2") format("woff2");
font-weight: 300 700;
font-display: swap;
}
@font-face {
font-family: "Nomus Icons"; /* Symbols Nerd Font, subset to the 11 rail glyphs */
src: url("/static/fonts/nomus-icons.woff2?v=2") format("woff2");
font-display: block;
}
/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbars: hairline, edge-thin, theme-tinted */
* { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-thumb { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
html, body { height: 100%; }
html { background: var(--bg); }
body {
background: transparent;
color: var(--fg);
font-family: var(--mono);
font-size: 13px;
line-height: 1.6;
display: flex;
flex-direction: column;
}
/* the mosaic texture: theme-tinted mask, fixed like a drafting table */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: color-mix(in srgb, var(--mosaic-ink, var(--accent)) var(--mosaic-mix, 10%), transparent);
-webkit-mask-image: var(--mosaic-svg);
mask-image: var(--mosaic-svg);
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
/* headings: terminal treatment for bar/label scale (mono, caps, tracked,
accent + per-theme glow); Space Grotesk stays for hero scale */
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }
.wordmark, .card h3, #stage-title, #studio-title,
.placeholder-pane h2, dialog h2, .lib-row .name {
color: var(--accent);
font-weight: 700;
text-shadow: var(--glow);
}
.card h3, #stage-title, #studio-title, dialog h2, .lib-row .name {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.1em;
}
#stage-title::before, #studio-title::before, dialog h2::before {
content: "// ";
color: var(--muted);
text-shadow: none;
}
/* buttons: no borders — flat, hover fills */
button {
font: inherit;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--fg);
background: transparent;
border: none;
border-radius: var(--r);
padding: calc(var(--u) * 0.75) calc(var(--u) * 1.5);
cursor: pointer;
transition: background var(--snap), color var(--snap);
}
button:hover { background: var(--surface-2); }
button:disabled { opacity: 0.4; cursor: default; }
button.accent {
background: var(--accent);
color: var(--accent-fg);
}
button.accent:hover { background: var(--accent-hover); }
button.quiet { color: var(--muted); }
button.quiet:hover { color: var(--fg); background: var(--surface-2); }
input, select, textarea {
font: inherit;
font-family: var(--mono);
color: var(--fg);
background: var(--surface);
border: var(--hair);
border-radius: var(--r);
padding: calc(var(--u) * 0.75) var(--u);
}
input:focus, select:focus, textarea:focus, button:focus-visible {
outline: 1px solid var(--accent);
outline-offset: -1px;
}
a { color: var(--accent); text-decoration: none; }
.dim { color: var(--muted); font-size: 12px; }
.spacer { flex: 1; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--accent-fg); }
/* technical label: mono, small, tracked, uppercase */
.nav-group-label, .badge, .chat-msg .role, #chat-head .label, .deck-label {
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ---------- header ---------- */
header {
display: flex;
align-items: baseline;
gap: var(--gutter);
padding: calc(var(--u) * 2) var(--margin);
border-bottom: var(--hair);
}
.wordmark {
font-family: var(--mono);
font-weight: 800;
font-size: 15px;
letter-spacing: 0.04em;
white-space: pre; /* keep the [ NOMUS ] spacing literal */
color: var(--accent);
text-shadow: var(--glow);
}
.wordmark .bk { color: var(--muted); font-weight: 500; text-shadow: none; }
/* topbar actions read as a terminal band */
header button.quiet {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
#crumb { color: var(--muted); font-size: 12px; }
.header-actions { margin-left: auto; display: flex; gap: var(--u); align-items: center; }
/* ---------- views ---------- */
.view { flex: 1; min-height: 0; overflow: auto; }
/* ---------- dashboard: visual project cards ---------- */
#view-dashboard { padding: calc(var(--u) * 4) var(--margin); }
#project-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: dense;
gap: var(--gutter);
}
.card {
grid-column: span 3;
cursor: pointer;
position: relative;
border: var(--hair);
background: var(--surface);
display: flex;
flex-direction: column;
transition: border-color var(--snap);
}
.card:hover { border-color: var(--grid); }
/* blueprint corner ticks — overlay so they sit above the key art.
Tick color follows scope: internal = accent, client (scope-ext) = gold. */
.card { --card-tick: var(--accent); }
.card.scope-ext { --card-tick: var(--gold); }
.card::after, .vibe-tile::after {
content: "";
position: absolute;
inset: -1px; /* register on the border line */
pointer-events: none;
background-image:
linear-gradient(var(--card-tick), var(--card-tick)),
linear-gradient(var(--card-tick), var(--card-tick)),
linear-gradient(var(--card-tick), var(--card-tick)),
linear-gradient(var(--card-tick), var(--card-tick)),
linear-gradient(var(--card-tick), var(--card-tick)),
linear-gradient(var(--card-tick), var(--card-tick)),
linear-gradient(var(--card-tick), var(--card-tick)),
linear-gradient(var(--card-tick), var(--card-tick));
background-repeat: no-repeat;
background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px,
10px 1px, 1px 10px, 10px 1px, 1px 10px;
background-position: left top, left top, right top, right top,
left bottom, left bottom, right bottom, right bottom;
}
.card .scope-tag { color: var(--gold); border-color: var(--gold); }
.card.archived { opacity: 0.55; }
/* a finished film: stated, not dimmed — the stage bar and its nudge step aside,
and the status badge drops the in-progress accent for plain foreground */
.card.complete .badge.dept { color: var(--fg); border-color: var(--fg); }
.card.complete .progress { display: none; }
.card.complete .stage-label { color: var(--fg); }
/* graduated bento tiers — span by development progress */
.card.tier-lg { grid-column: span 6; }
.card.tier-md { grid-column: span 4; }
.card.tier-sm { grid-column: span 3; }
@media (max-width: 1280px) {
.card, .card.tier-sm, .card.tier-md { grid-column: span 4; }
.card.tier-lg { grid-column: span 8; }
}
@media (max-width: 900px) {
.card, .card.tier-sm, .card.tier-md, .card.tier-lg { grid-column: span 6; }
}
@media (max-width: 620px) {
.card, .card.tier-sm, .card.tier-md, .card.tier-lg { grid-column: span 12; }
}
.card .key-art {
/* 16:9 is the floor, not a lock: when the grid row runs taller (a bigger
tier sharing the row), the art absorbs the surplus — never the body */
aspect-ratio: 16 / 9;
flex: 1 0 auto;
background: var(--surface-2);
border-bottom: var(--hair);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.card .key-art img {
width: 100%; height: 100%; object-fit: cover; display: block;
mix-blend-mode: luminosity;
opacity: 0.9;
transition: opacity var(--ease);
}
.card:hover .key-art img { mix-blend-mode: normal; opacity: 1; }
.card .key-art .placeholder {
font-family: var(--display);
font-weight: 700;
font-size: 24px;
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--muted);
text-align: center;
padding: var(--gutter);
}
.card .card-body { padding: calc(var(--u) * 2); display: flex; flex-direction: column; gap: var(--u); flex: none; }
.card h3 { font-size: 18px; font-weight: 600; line-height: 1.15; }
.card .logline {
color: var(--muted); font-size: 12px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .card-meta {
margin-top: auto;
display: flex; align-items: center; gap: var(--u);
font-size: 11px; color: var(--muted);
}
.badge {
border: var(--hair);
border-radius: var(--r);
padding: 1px 6px;
color: var(--muted);
}
.badge.dept { color: var(--accent); border-color: var(--accent); cursor: pointer; }
.badge.dept:hover { background: var(--surface-2); }
select.dept-move {
font: inherit; font-size: 10px; color: var(--accent);
background: var(--bg); border: 1px solid var(--accent); border-radius: var(--r);
}
.card .progress {
height: 2px; background: var(--surface-2); margin-top: var(--u);
}
.card .progress span { display: block; height: 100%; background: var(--accent); }
.card .stage-label { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
#empty-note { margin-top: calc(var(--u) * 10); }
#empty-note button { margin-top: calc(var(--u) * 2); }
.archived-toggle {
display: block;
margin: calc(var(--u) * 8) auto 0;
opacity: 0.4;
font-size: 12px;
}
.archived-toggle:hover { opacity: 0.85; }
.archived-toggle[hidden] { display: none; }
/* ---------- pipeline: studio-wide Kanban ---------- */
#view-pipeline { padding: calc(var(--u) * 4) var(--margin); min-height: 0; }
#pipeline-board {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--gutter);
align-items: start;
}
@media (max-width: 1100px) { #pipeline-board { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(240px, 1fr); overflow-x: auto; } }
.kb-col {
border: var(--hair);
background: var(--surface);
display: flex;
flex-direction: column;
min-height: calc(var(--u) * 24);
}
.kb-col.drag-over { border-color: var(--accent); }
.kb-col-head {
display: flex;
align-items: baseline;
gap: var(--u);
padding: var(--u) calc(var(--u) * 1.5);
border-bottom: var(--hair);
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
.kb-col-head .kb-n { color: var(--accent); }
.kb-col-head .kb-label { flex: 1; }
.kb-col-head .kb-count { color: var(--muted); }
.kb-cards {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--u);
padding: var(--u);
}
.kb-card {
border: var(--hair);
background: var(--bg);
padding: calc(var(--u) * 1.5);
cursor: grab;
display: flex;
flex-direction: column;
gap: calc(var(--u) * 0.5);
transition: border-color var(--snap);
}
.kb-card:hover { border-color: var(--grid); }
.kb-card.dragging { opacity: 0.4; cursor: grabbing; }
.kb-card-title { font-size: 13px; font-weight: 600; line-height: 1.2; }
.kb-card-logline {
color: var(--muted); font-size: 11px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kb-card-foot {
display: flex; align-items: center; gap: var(--u);
font-size: 10px; color: var(--muted); margin-top: 2px;
}
.kb-card-foot .kb-prog { margin-left: auto; }
.kb-card .progress { height: 2px; background: var(--surface-2); }
.kb-card .progress span { display: block; height: 100%; background: var(--accent); }
/* ---------- production: shot canvas ---------- */
#production-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.prod-zoom { display: flex; gap: 2px; }
#canvas-viewport {
flex: 1; min-height: 0; overflow: hidden; position: relative;
background: var(--surface);
/* dot grid, deliberately faint — --grid is near-white in some themes, so at a
full 1px hard-edged dot the field reads louder than the cards on top of it.
The two stops differ on purpose: a sub-pixel dot with a hard edge has no
falloff to antialias into and the rasterizer drops it entirely. Dial the
weight with the color-mix percentage, not the radius. */
background-image: radial-gradient(
color-mix(in srgb, var(--grid) 28%, transparent) 0.75px, transparent 1.5px);
background-size: 24px 24px;
cursor: grab; touch-action: none;
}
#canvas-viewport.panning { cursor: grabbing; }
#canvas-content {
position: absolute; top: 0; left: 0; transform-origin: 0 0;
display: flex; flex-direction: column; gap: var(--gutter); padding: var(--u);
}
.canvas-empty { padding: var(--gutter); max-width: 40ch; }
.seq-lane { border: var(--hair); background: var(--bg); width: max-content; }
.seq-head {
display: flex; align-items: center; gap: var(--u);
padding: var(--u) calc(var(--u) * 1.5); border-bottom: var(--hair);
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.seq-head .seq-name { cursor: pointer; color: var(--accent); }
.seq-head .spacer { flex: 1; }
.seq-shots { display: flex; gap: var(--u); padding: var(--u); }
.shot-card {
width: 168px; border: var(--hair); background: var(--surface);
display: flex; flex-direction: column;
}
.shot-card.has-frame { border-color: var(--grid); }
.shot-card .shot-frame {
aspect-ratio: 16 / 9; background: var(--surface-2);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.shot-card .shot-frame.empty { color: var(--muted); font-size: 22px; }
.shot-card .shot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-card .shot-name {
font-family: var(--mono); font-size: 11px; color: var(--accent);
padding: 4px calc(var(--u)); cursor: pointer;
}
.shot-card .shot-note {
font-size: 10px; padding: 0 var(--u) 4px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shot-card .shot-actions {
display: flex; gap: 2px; padding: 3px var(--u); border-top: var(--hair); margin-top: auto;
}
.shot-card .shot-actions button { font-size: 12px; padding: 1px 5px; }
/* take priority (advisory A/B/C ranking), shared by canvas + board */
.shot-pri {
font-family: var(--mono); font-weight: 700; font-size: 10px; line-height: 1;
border: 1px solid var(--border); color: var(--muted);
padding: 1px 4px; margin-left: 6px; cursor: pointer; user-select: none;
}
.shot-pri.pri-A { color: var(--accent); border-color: var(--accent); }
.shot-pri.pri-B { color: var(--fg); border-color: var(--grid); }
.shot-pri.pri-C { color: var(--muted); border-color: var(--grid); }
.shot-card:focus, .bd-card:focus { outline: 1px solid var(--accent); outline-offset: 1px; }
#prod-take-rules { font-size: 10px; }
/* status system (Layout → Animation → Edit → Done), shared by canvas + board */
.st-dot { cursor: pointer; font-size: 6px; vertical-align: middle; }
/* the dot is only clickable in Production — at 6px the glyph is too small to
hit, so pad the target there and cancel it with margin so nothing shifts.
Kept off the base rule: elsewhere .st-dot sits in flex rows where negative
margins would tighten the gaps. */
.shot-card .st-dot, .bd-card .st-dot { padding: 3px 4px; margin: -3px -4px; }
.st-layout { color: var(--muted); }
.st-animation { color: #d9a441; }
.st-edit { color: #5aa9c7; }
.st-done { color: var(--accent); }
.seq-status { display: flex; gap: 1px; }
.seq-status button { font-size: 10px; padding: 0 4px; font-family: var(--mono); }
/* view toggle */
.prod-modes { display: flex; gap: 2px; margin-right: var(--u); }
.prod-modes button.on { color: var(--accent); border-bottom: 1px solid var(--accent); }
/* board (track) — flat Swiss grid: hairline rules, no boxes */
#board-view {
flex: 1; min-height: 0; overflow: auto;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: calc(var(--gutter) * 1.5);
padding: calc(var(--u) * 3) var(--margin);
align-content: start;
}
.bd-col { display: flex; flex-direction: column; min-height: 0; }
.bd-col.drag-over .bd-cards { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bd-col-head {
display: flex; align-items: baseline; gap: var(--u);
padding-bottom: var(--u); margin-bottom: var(--u);
border-bottom: var(--hair);
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.bd-col-head .bd-label { flex: 1; }
.bd-cards { display: flex; flex-direction: column; min-height: calc(var(--u) * 8); transition: background var(--snap); }
.bd-card {
display: flex; flex-direction: column; gap: var(--u);
padding: var(--u) 0; border-bottom: var(--hair);
cursor: grab; background: none;
transition: opacity var(--snap);
}
.bd-card.dragging { opacity: 0.35; cursor: grabbing; }
.bd-row { display: flex; gap: var(--u); align-items: center; min-width: 0; }
.bd-thumb {
width: 44px; height: 25px; flex: none; background: var(--surface-2);
overflow: hidden; display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 11px;
}
.bd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bd-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bd-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bd-seq { font-size: 10px; color: var(--muted); }
.bd-name {
font-family: var(--mono); font-size: 12px; color: var(--accent);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-note { font-size: 11px; color: var(--muted); }
/* flat text verbs, the task board's card-action language. Deliberately NOT
.quiet buttons: button.quiet:hover paints a --surface-2 chip, which reads as
a control on a borderless card. Two classes + type outranks it outright
rather than relying on source order. */
.bd-actions { display: flex; align-items: center; gap: 2px; }
.bd-actions .spacer { flex: 1; }
.bd-card .bd-actions button {
font-size: 12px; line-height: 1; padding: 0 var(--u) 0 0;
background: none; border: 0; color: var(--muted); cursor: pointer;
}
.bd-card .bd-actions button:hover { color: var(--fg); background: none; }
.bd-card .bd-actions .bd-more { padding-right: 0; letter-spacing: 0.1em; }
/* the board card as a bounded kanban card: a prioritised shot takes an accent
left edge (the ⚑ language of the task board), the ring is keyboard focus */
.bd-card { border-left: 2px solid transparent; padding-left: 0; }
.bd-card.pri { border-left-color: var(--grid); padding-left: var(--u); }
.bd-card.pri-band-A { border-left-color: var(--accent); }
.bd-card.bd-kbfocus { outline: 1px solid var(--accent); outline-offset: 2px; }
.bd-card.just-done { background: var(--surface-2); }
.bd-col.cleared { outline: 1px solid var(--ok, var(--accent)); outline-offset: 4px; }
.bd-meta { cursor: pointer; }
/* due dates, both surfaces */
.bd-due, .shot-due {
font-family: var(--mono); font-size: 10px; color: var(--muted);
}
.shot-due { padding: 0 var(--u) 4px; }
.bd-due.overdue, .shot-due.overdue { color: var(--danger); }
/* the archive is a read-mostly view — dim it so it never reads as the board */
#board-view.archived-view .bd-card { opacity: 0.6; cursor: default; }
#board-view.archived-view .bd-card:hover { opacity: 1; }
.shot-card .shot-actions .spacer { flex: 1; }
/* Production ▸ Session: the pane hands off to the Animation-Director chat */
.prod-session-hint {
flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
padding: var(--gutter); color: var(--muted); text-align: center; max-width: 48ch;
margin: 0 auto; font-size: 13px; line-height: 1.6;
}
/* ---------- Gantt: project schedule + studio slate ---------- */
#schedule-pane, #slate-pane {
flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.sched-anchor-lbl { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: var(--u); }
.sched-anchor-lbl input { font-family: var(--mono); font-size: 12px; }
.sched-zoom { display: flex; gap: 2px; }
.gantt-scale { display: flex; gap: 2px; }
.gantt-scale button.on { color: var(--accent); border-bottom: 1px solid var(--accent); }
#gantt, #slate-gantt { flex: 1; min-height: 0; position: relative; }
/* ---- kanban (per-film task board) ---- */
#kanban-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#kanban-count { font-size: 12px; color: var(--muted); }
#kanban-cols {
flex: 1; min-height: 0; overflow-y: auto;
display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(var(--u) * 3);
padding: calc(var(--u) * 3); align-content: start;
}
.kanban-col { min-width: 0; }
.kanban-col h3 {
font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
color: var(--muted); padding-bottom: var(--u); border-bottom: var(--hair); margin-bottom: calc(var(--u) * 2);
}
.kanban-col .kb-col-count { color: var(--muted); margin-left: 4px; }
.kanban-col .kb-col-body { min-height: calc(var(--u) * 6); }
.kanban-col.drag-over { outline: 1px solid var(--accent); outline-offset: 4px; }
.kanban-col.cleared { outline: 1px solid var(--ok, var(--accent)); outline-offset: 4px; }
/* ---------- breakdown board (1AD element list, one column per kind) ---------- */
#breakdown-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#breakdown-cols {
flex: 1; min-height: 0; overflow: auto;
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
column-gap: calc(var(--u) * 2);
padding: calc(var(--u) * 3); align-content: start;
}
.bk-col { min-width: 0; }
.bk-col h3 {
font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
color: var(--muted); padding-bottom: var(--u); border-bottom: var(--hair);
margin-bottom: calc(var(--u) * 2); display: flex; align-items: baseline; gap: 4px;
}
.bk-col .bk-col-count { color: var(--muted); }
.bk-col .bk-col-add {
margin-left: auto; padding: 0 4px; font-size: 12px; line-height: 1;
color: var(--muted); background: none; border: 0; cursor: pointer;
}
.bk-col .bk-col-add:hover { color: var(--fg); }
.bk-card {
background: var(--surface); border: var(--hair); border-left: 2px solid transparent;
padding: var(--u) calc(var(--u) * 1.5); margin-bottom: calc(var(--u) * 1.5);
}
.bk-card .bk-head { display: flex; align-items: baseline; gap: 6px; }
.bk-card .bk-name { font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.bk-card .bk-prio {
padding: 0 4px; font-size: 10px; font-family: var(--mono); line-height: 1.4;
color: var(--muted); background: none; border: var(--hair); cursor: pointer;
}
.bk-card .bk-prio.pA { color: var(--accent); border-color: var(--accent); }
.bk-card .bk-prio.pB { color: var(--fg); }
.bk-card .bk-del {
margin-left: auto; padding: 0 2px; font-size: 12px; line-height: 1;
color: var(--muted); background: none; border: 0; cursor: pointer;
}
.bk-card .bk-del:hover { color: var(--fg); }
.bk-card .bk-scenes { font-size: 11px; color: var(--muted); cursor: pointer; margin-top: 2px; }
.bk-card .bk-note { font-size: 12px; color: var(--muted); cursor: pointer; margin-top: 2px; }
/* chat header is label-only now — controls live as typed /commands */
.chat-cmd-hint { font-size: 10px; }
/* ---------- post board (stages as kanban) ---------- */
#postboard-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#postboard-cols {
flex: 1; min-height: 0; overflow-y: auto;
display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(var(--u) * 3);
padding: calc(var(--u) * 3); align-content: start;
}
.pb-card { cursor: pointer; }
.pb-card .pb-open { font-size: 10px; margin-top: 4px; }
/* ---------- budget (deterministic proposal table) ---------- */
#budget-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#budget-table { flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--u) * 3); }
.budget-section h3 {
font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
color: var(--muted); padding-bottom: var(--u); border-bottom: var(--hair);
margin-bottom: var(--u);
}
.budget-tbl { width: 100%; border-collapse: collapse; margin-bottom: calc(var(--u) * 3); }
.budget-tbl th {
font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
color: var(--muted); text-align: left; padding: 4px 8px 4px 0; font-weight: normal;
}
.budget-tbl td { padding: 3px 8px 3px 0; font-size: 13px; border-bottom: var(--hair); }
.budget-tbl .bl-num { text-align: right; width: 72px; }
.budget-tbl th.bl-num { text-align: right; }
.budget-tbl input { width: 68px; text-align: right; font-size: 12px; }
.budget-tbl .bl-note { font-size: 11px; max-width: 28ch; }
.budget-tbl .bl-src { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.budget-tbl .src-edited { color: var(--accent); }
.budget-tbl .src-manual { color: var(--fg); }
.budget-tbl .bl-del {
padding: 0 2px; font-size: 12px; background: none; border: 0;
color: var(--muted); cursor: pointer;
}
.budget-tbl .bl-del:hover { color: var(--fg); }
.budget-total {
font-family: var(--mono); font-size: 14px; text-align: right;
padding-top: var(--u); border-top: 2px solid var(--border);
}
/* ---------- bible (reference-card grid) ---------- */
#bible-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#bible-grid { flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--u) * 3); }
.bible-section h3 {
font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
color: var(--muted); padding-bottom: var(--u); border-bottom: var(--hair);
margin-bottom: calc(var(--u) * 2);
}
.bible-section .bible-cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: calc(var(--u) * 1.5); margin-bottom: calc(var(--u) * 3);
}
.bible-card {
background: var(--surface); border: var(--hair);
padding: var(--u) calc(var(--u) * 1.5); cursor: pointer; min-width: 0;
}
.bible-card.dimmed { opacity: 0.4; }
.bible-card .bc-thumb img { width: 100%; height: 90px; object-fit: cover; display: block; margin-bottom: 4px; }
.bible-card .bc-title { font-size: 13px; overflow-wrap: anywhere; }
.bible-card .bc-sub { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.bible-card .bc-foot { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.bible-card .bc-foot .spacer { flex: 1; }
.bible-card .bc-status { font-size: 11px; }
.bible-card .bc-hide, .bible-card .bc-del {
padding: 0 2px; font-size: 11px; background: none; border: 0;
color: var(--muted); cursor: pointer;
}
.bible-card .bc-hide:hover, .bible-card .bc-del:hover { color: var(--fg); }
#bible-detail-dialog pre {
white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60ch; max-height: 50vh;
overflow-y: auto; font-size: 12px; color: var(--muted);
}
.kanban-card {
background: var(--surface); border: var(--hair); border-left: 2px solid transparent;
padding: var(--u) calc(var(--u) * 1.5); margin-bottom: calc(var(--u) * 1.5);
}
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card.priority { border-left-color: var(--accent); }
.kanban-card.kb-kbfocus { outline: 1px solid var(--accent); outline-offset: 2px; }
.kanban-card.just-done { background: var(--surface-2); }
.kanban-card .kb-head { display: flex; align-items: baseline; gap: 6px; }
.kanban-card .kb-flag { padding: 0; font-size: 12px; line-height: 1; color: var(--muted); background: none; border: 0; cursor: pointer; }
.kanban-card.priority .kb-flag { color: var(--accent); }
.kanban-card .kb-title { font-size: 14px; line-height: calc(var(--u) * 2.25); cursor: pointer; }
.kanban-card .kb-title:hover { color: var(--accent); }
.kanban-card .kb-note { font-size: 12px; line-height: calc(var(--u) * 2); margin-top: 2px; color: var(--muted); }
.kanban-card .kb-due { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.kanban-card .kb-due.overdue { color: var(--danger); }
.kanban-card .kb-actions { display: flex; align-items: center; margin-top: var(--u); }
.kanban-card .kb-actions button { padding: 0 var(--u) 0 0; font-size: 12px; background: none; border: 0; color: var(--muted); cursor: pointer; }
.kanban-card .kb-actions button:hover { color: var(--fg); }
.kanban-card .kb-actions .spacer { flex: 1; }
.gantt-scroll {
--gantt-label-w: 220px;
height: 100%; overflow: auto; background: var(--surface);
}
/* time axis — sticky header */
.gantt-head {
display: flex; position: sticky; top: 0; z-index: 3;
background: var(--bg); border-bottom: var(--hair);
}
.gantt-corner {
width: var(--gantt-label-w); flex: none; position: sticky; left: 0; z-index: 4;
background: var(--bg); border-right: var(--hair);
padding: var(--u) calc(var(--u) * 2);
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--muted);
}
.gantt-axis { position: relative; height: calc(var(--u) * 3.5); flex: none; }
.gantt-tick {
position: absolute; top: 0; bottom: 0; border-left: var(--hair);
padding: 4px 0 0 4px; font-family: var(--mono); font-size: 10px; color: var(--muted);
white-space: nowrap; box-sizing: border-box;
}
.gantt-today { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--danger); z-index: 1; }
.gantt-rows { display: flex; flex-direction: column; }
.gantt-row { display: flex; height: 26px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.gantt-deprow { height: 30px; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.gantt-rowlabel {
width: var(--gantt-label-w); flex: none; position: sticky; left: 0; z-index: 2;
background: var(--bg); border-right: var(--hair);
display: flex; align-items: center; gap: var(--u);
padding: 0 calc(var(--u) * 1.5); font-size: 12px; color: var(--fg);
overflow: hidden; white-space: nowrap;
}
.gantt-rowlabel .t { overflow: hidden; text-overflow: ellipsis; }
.gantt-rowlabel .n { margin-left: auto; font-size: 10px; }
.gantt-deplabel {
font-family: var(--mono); font-size: 11px; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--muted); cursor: pointer;
}
.gantt-deplabel .caret, .gantt-deplabel .caret-spacer { width: 12px; flex: none; font-size: 9px; }
.gantt-stagelabel .st-dot { flex: none; } /* size tracks the base .st-dot */
/* the track holds the bars; a hairline week grid via the --weekpx variable */
.gantt-track {
position: relative; flex: none; height: 100%;
background-image: repeating-linear-gradient(90deg,
color-mix(in srgb, var(--border) 60%, transparent) 0 1px,
transparent 1px var(--weekpx, 98px));
}
.gantt-bar {
position: absolute; top: 5px; height: 16px; box-sizing: border-box;
background: var(--surface); border: var(--hair); border-left: 3px solid currentColor;
border-radius: var(--r); color: var(--muted);
display: flex; align-items: center; padding: 0 5px; overflow: hidden;
font-family: var(--mono); font-size: 10px; cursor: grab; user-select: none;
}
.gantt-bar.dragging { opacity: 0.6; cursor: grabbing; }
.gantt-bar .bar-days { color: var(--fg); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-bar .bar-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.gantt-bar.violation { box-shadow: inset 0 0 0 1px var(--danger); }
.st-sched-done { color: var(--ok); }
.st-sched-active { color: #d9a441; }
.st-sched-todo { color: var(--muted); }
/* read-only department aggregate bar */
.gantt-agg {
position: absolute; top: calc(50% - 3px); height: 6px; border-radius: var(--r);
background: color-mix(in srgb, var(--accent) 40%, var(--surface-2)); cursor: default;
}
/* unscheduled → dashed "add" chip in the track */
.gantt-add {
position: absolute; left: 4px; top: 4px; height: 18px;
border: 1px dashed var(--border); background: none; color: var(--muted);
font-family: var(--mono); font-size: 10px; padding: 0 6px; cursor: pointer;
}
.gantt-add:hover { color: var(--accent); border-color: var(--accent); }
.gantt-none { position: absolute; left: 6px; top: 6px; font-size: 11px; }
/* studio slate lanes */
.slate-label.prospect .t { color: var(--gold); }
.slate-bar.project { border-left-color: var(--accent); cursor: pointer; }
.slate-bar.project .bar-days { color: var(--accent); }
.slate-bar.prospect { border: 1px dashed var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.slate-bar.prospect .bar-days { color: var(--fg); }
/* schedule / slate popover — flat, hairline, no shadow */
#sched-pop {
position: fixed; z-index: 120; background: var(--surface); border: 1px solid var(--grid);
border-radius: var(--r); padding: calc(var(--u) * 1.5);
display: flex; flex-direction: column; gap: var(--u); min-width: 220px;
max-height: calc(100vh - 24px); overflow-y: auto;
}
#sched-pop label { display: flex; align-items: center; justify-content: space-between; gap: var(--u); font-size: 12px; color: var(--muted); }
#sched-pop input { font-family: var(--mono); font-size: 12px; }
#sched-pop .sp-actions { display: flex; align-items: center; gap: var(--u); margin-top: 4px; }
#sched-pop .spacer { flex: 1; }
/* shared overflow menu (board bars) — same flat, hairline, no-shadow language */
.nm-overflow-pop {
position: fixed; z-index: 120; background: var(--surface); border: 1px solid var(--grid);
border-radius: var(--r); padding: calc(var(--u) * 0.5);
display: flex; flex-direction: column; gap: 2px; min-width: 150px;
max-height: calc(100vh - 24px); overflow-y: auto;
}
.nm-overflow-pop button { text-align: left; justify-content: flex-start; width: 100%; }
/* {note} items — facts, not actions; they used to sit inline in the pane bar */
.nm-overflow-note { padding: calc(var(--u) * 0.75) var(--u); font-size: 11px; line-height: 1.5; }
.nm-overflow-note + button { margin-top: 2px; }
/* ---------- project view: rail / editor / chat ---------- */
#view-project {
display: grid;
grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr) var(--chat-w, 400px);
/* bound the single row to the container so each column scrolls internally;
without this the row grows to the tallest column (a long chat log),
stretching the rail to match and pushing its items out of view */
grid-template-rows: minmax(0, 1fr);
overflow: hidden;
position: relative; /* anchor for the absolute column-resize handles */
transition: grid-template-columns 0.2s ease-out;
}
/* resizable columns: a thin handle sits on each of the rail↔editor and
editor↔chat boundaries. Each handle's position is bound to the very custom
property it edits, so it tracks the boundary as the width changes. */
.col-resizer {
position: absolute; top: 0; bottom: 0;
width: 8px; z-index: 6; cursor: col-resize;
}
.col-resizer::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 3px;
width: 2px; background: transparent; transition: background var(--snap);
}
.col-resizer:hover::after, .col-resizer.dragging::after { background: var(--accent); }
#rail-resizer { left: calc(var(--rail-w, 232px) - 4px); }
#chat-resizer { right: calc(var(--chat-w, 400px) - 4px); }
body.col-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.col-resizing #view-project { transition: none; } /* no track lag while dragging */
/* hide each handle wherever its column isn't the normal resizable track */
body.nm-focus #rail-resizer, body.nm-focus #chat-resizer,
body.member-mode #chat-resizer,
#view-project.chat-hidden #chat-resizer,
#view-project.chat-expanded #chat-resizer,
#view-project.concept-mode #chat-resizer { display: none; }
#view-project.chat-hidden { grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr) 0; }
#view-project.chat-hidden #chat-panel { display: none; }
/* focus mode: chat takes over the editor area, rail stays. The editor leaves
the grid entirely, so this is a 2-track template — chat auto-places to col 2 */
#view-project.chat-expanded { grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr); }
#view-project.chat-expanded #editor-pane { display: none; }
#chat-expand.active { color: var(--accent); }
/* center the reading column; percentage padding keeps the scrollbar at the
pane edge (px measure, not ch — log and form fonts differ) */
#view-project.chat-expanded #chat-panel { --chat-measure: 680px; }
#view-project.chat-expanded #chat-log,
#view-project.chat-expanded #chat-form {
padding-left: max(calc((100% - var(--chat-measure)) / 2), calc(var(--u) * 2));
padding-right: max(calc((100% - var(--chat-measure)) / 2), calc(var(--u) * 2));
}
/* ---------- explore canvas: on the Concept stage the conversation IS the
workspace — chat takes the center column, the assets panel the right.
Declared after chat-hidden/chat-expanded so concept-mode wins the cascade. */
#concept-panel { display: none; }
#view-project.concept-mode { grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr) 300px; }
#view-project.concept-mode #editor-pane { display: none; }
#view-project.concept-mode #chat-panel {
display: flex;
grid-column: 2;
--chat-measure: 680px;
}
#view-project.concept-mode #chat-log,
#view-project.concept-mode #chat-form {
padding-left: max(calc((100% - var(--chat-measure)) / 2), calc(var(--u) * 2));
padding-right: max(calc((100% - var(--chat-measure)) / 2), calc(var(--u) * 2));
}
#view-project.concept-mode #chat-expand,
#view-project.concept-mode #chat-toggle,
#view-project.concept-mode #chat-collapse-btn { display: none; }
#view-project.concept-mode #concept-panel {
display: flex;
flex-direction: column;
border-left: var(--hair);
overflow-y: auto;
padding: calc(var(--u) * 2) 0 calc(var(--u) * 4);
}
#concept-panel .cp-head {
padding: 0 calc(var(--u) * 2) var(--u);
color: var(--muted);
}
.cp-label {
padding: calc(var(--u) * 2) calc(var(--u) * 2) var(--u);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
}
.cp-item {
display: flex;
align-items: baseline;
gap: var(--u);
padding: var(--u) calc(var(--u) * 2);
cursor: pointer;
transition: background var(--snap);
}
.cp-item:hover { background: var(--surface-2); }
.cp-item .cp-dot { font-size: 9px; color: var(--border); }
.cp-item.cp-proposed .cp-dot { color: var(--muted); }
.cp-item.cp-banked .cp-dot { color: var(--accent); }
.cp-item.cp-locked .cp-dot { color: var(--gold); }
.cp-item .cp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-item .cp-kind, .cp-item .cp-status { font-size: 11px; }
#concept-cta { padding: calc(var(--u) * 2); }
#concept-cta button { width: 100%; }
#concept-panel .asset-card { margin: 0 calc(var(--u) * 2) var(--u); }
/* ---------- art direction room: the locked-style panel is the working surface
in the center column; the chat is NOT pinned here — it lives behind the ◪_◪
button and docks as the standard resizable right column (unlike Concept, which
keeps its center-chat takeover above). ---------- */
#artdir-panel { display: none; }
#view-project.artdir-mode { grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr) var(--chat-w, 400px); }
#view-project.artdir-mode.chat-hidden { grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr) 0; }
#view-project.artdir-mode #editor-pane { display: none; }
/* pin both to row 1: #chat-panel precedes #artdir-panel in the DOM, so without an
explicit row the out-of-column-order panel gets sparse-packed into row 2 */
#view-project.artdir-mode #artdir-panel {
display: flex;
flex-direction: column;
grid-column: 2;
grid-row: 1;
overflow-y: auto;
padding: calc(var(--u) * 2) 0 calc(var(--u) * 4);
}
#view-project.artdir-mode #chat-panel { grid-column: 3; grid-row: 1; }
#artdir-panel .cp-head { padding: 0 calc(var(--u) * 2) var(--u); color: var(--muted); }
#artdir-entries { flex: 1; }
.ad-card {
margin: 0 calc(var(--u) * 2) var(--u);
background: var(--surface); border: var(--hair);
padding: var(--u) calc(var(--u) * 1.5);
}
.ad-card .ad-thumbs { display: flex; gap: 4px; margin-bottom: 4px; overflow-x: auto; }
.ad-card .ad-thumbs img { height: 56px; width: auto; border: var(--hair); }
.ad-card .ad-title { font-size: 13px; display: flex; align-items: baseline; gap: 6px; }
.ad-card .ad-title .spacer { flex: 1; }
.ad-card .ad-unlock {
padding: 0 2px; font-size: 12px; line-height: 1;
color: var(--muted); background: none; border: 0; cursor: pointer;
}
.ad-card .ad-unlock:hover { color: var(--fg); }
.ad-card .ad-prompt { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.ad-card .ad-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
#artdir-actions { display: flex; flex-direction: column; gap: var(--u); padding: var(--u) calc(var(--u) * 2) 0; }
/* lock dialog: pick images from art/ */
#adl-media {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
max-height: 200px; overflow-y: auto; margin: var(--u) 0;
}
#adl-media .adl-cell { position: relative; cursor: pointer; border: 2px solid transparent; }
#adl-media .adl-cell img { width: 100%; height: 64px; object-fit: cover; display: block; }
#adl-media .adl-cell.sel { border-color: var(--accent); }
/* proposal card — in the chat transcript and the panel */
.asset-card {
border: var(--hair);
border-left: 2px solid var(--accent);
background: var(--surface);
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
margin: var(--u) 0;
}
.asset-card.banked { border-left-color: var(--gold); }
.asset-card.resolved { border-left-color: var(--border); opacity: .6; }
.asset-card .ac-head {
display: flex;
align-items: baseline;
gap: var(--u);
}
.asset-card .ac-kind {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--accent);
border: var(--hair);
padding: 1px 6px;
border-radius: var(--r);
}
.asset-card.banked .ac-kind { color: var(--gold); }
.asset-card .ac-title { font-weight: 600; flex: 1; min-width: 0; }
.asset-card .ac-status { font-size: 11px; }
.asset-card .ac-summary { margin-top: 4px; font-size: 12px; }
.asset-card .ac-actions {
display: flex;
gap: var(--u);
margin-top: var(--u);
}
.asset-card .ac-edit { margin-top: var(--u); }
.asset-card .ac-textarea {
width: 100%;
min-height: 160px;
font-family: var(--mono);
font-size: 12px;
line-height: 1.6;
background: var(--surface-2);
border: var(--hair);
padding: var(--u);
margin-bottom: var(--u);
resize: vertical;
}
.chat-msg.ephemeral { opacity: .8; }
nav#rail, nav#rail-studio {
border-right: var(--hair);
overflow-y: auto;
padding: calc(var(--u) * 2) 0 calc(var(--u) * 4);
/* column flex so the ? Guide item pins to the rail bottom */
display: flex;
flex-direction: column;
/* batou graph overlay: fine 48px accent-tinted graph paper */
background-image:
repeating-linear-gradient(0deg,
color-mix(in srgb, var(--accent) 6%, transparent) 0 1px, transparent 1px 48px),
repeating-linear-gradient(90deg,
color-mix(in srgb, var(--accent) 6%, transparent) 0 1px, transparent 1px 48px);
}
nav#rail > *, nav#rail-studio > * { flex: 0 0 auto; }
.rail-guide { margin-top: auto; padding-top: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 4); color: var(--muted); }
.nav-group-label {
color: var(--muted);
padding: calc(var(--u) * 2) calc(var(--u) * 2) var(--u);
display: flex;
align-items: baseline;
cursor: pointer;
user-select: none;
}
.nav-group-label::after {
content: "−";
margin-left: auto;
font-family: var(--mono);
}
.nav-group-label.collapsed::after { content: "+"; }
.nav-group-label:hover { color: var(--fg); }
.nav-group.collapsed { display: none; }
@keyframes nav-cascade {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.nav-item {
display: flex;
align-items: baseline;
gap: var(--u);
padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
cursor: pointer;
font-size: 13px;
color: var(--fg);
border-left: 2px solid transparent;
transition: background var(--snap);
}
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { border-left-color: var(--accent); background: var(--surface-2); }
.nav-item .num { font-size: 10px; color: var(--muted); min-width: 14px; }
.nav-item .dot { margin-left: auto; font-size: 9px; color: var(--muted); visibility: hidden; }
.nav-item.filled .dot { visibility: visible; color: var(--ok); }
.nav-item.approved .dot { visibility: visible; color: var(--gold); }
/* pipeline connectors: dots always visible in the dept tree, a 1px hairline
linking each dot to the next stage's — dashed/dim while the upstream stage is
pending, solid once it's filled, gold once approved. Flow, drawn flat.
Each row draws two half-segments anchored to the ROW (dot-x is constant from
the right edge), so the halves meet at row boundaries whatever the row height:
::after runs from this row's dot down to the row bottom (colored by THIS
stage), ::before runs from the row top up to the next dot (colored by the
PREVIOUS stage via the sibling selector). */
#dept-tree .nav-group .nav-item { position: relative; }
#dept-tree .nav-group .nav-item .dot { visibility: visible; opacity: 0.35; }
#dept-tree .nav-group .nav-item.filled .dot,
#dept-tree .nav-group .nav-item.approved .dot { opacity: 1; }
#dept-tree .nav-group .nav-item::before,
#dept-tree .nav-group .nav-item::after {
position: absolute;
right: 20px;
border-left: 1px dashed var(--muted);
opacity: 0.4;
pointer-events: none;
}
#dept-tree .nav-group .nav-item + .nav-item:not(.placeholder)::before {
content: "";
top: 0;
height: 9px;
}
#dept-tree .nav-group .nav-item:not(:last-child):not(.placeholder)::after {
content: "";
top: 19px;
bottom: 0;
}
#dept-tree .nav-group .nav-item.filled::after,
#dept-tree .nav-group .nav-item.filled + .nav-item::before {
border-left-style: solid;
border-left-color: var(--ok);
opacity: 0.7;
}
#dept-tree .nav-group .nav-item.approved::after,
#dept-tree .nav-group .nav-item.approved + .nav-item::before {
border-left-style: solid;
border-left-color: var(--gold);
opacity: 0.8;
}
/* the "…" loading row draws no segments */
#dept-tree .nav-group .nav-item.placeholder::after { content: none; }
.nav-item.placeholder { color: var(--muted); }
.nav-item.nav-action { color: var(--muted); font-size: 12px; }
.nav-item.nav-action:hover { color: var(--fg); }
.nav-item.nav-sub { padding-left: calc(var(--u) * 4); font-size: 11px; }
/* board surfaces woven into the numbered flow (Breakdown / Bible /
Schedule-Budget, and Marketing's Research / Publish) are numbered steps, so
they read the same as the draftable stages beside them — full-weight text at
the stage size, not the muted/smaller nav-action treatment. */
.nav-item.nav-surface { color: var(--fg); font-size: 13px; }
/* department tree: dept headers with their stages nested beneath */
#dept-tree .nav-item { padding-left: calc(var(--u) * 3.5); }
.dept-head { gap: var(--u); }
.dept-head .num { font-size: 10px; min-width: 14px; }
.nav-group-label .glyph, .nav-item .glyph {
font-family: var(--icon);
font-size: 12px;
min-width: 16px;
color: var(--muted);
text-align: center;
line-height: 1;
align-self: center; /* override the header/item baseline align for the icon */
}
/* keep the glyph off the label text (dept-heads already carry their own gap) */
.nav-group-label:not(.dept-head) { gap: var(--u); }
.dept-head.active .glyph, .dept-head.dept-leaf.active .glyph,
.nav-item.active .glyph { color: var(--accent); }
.nav-group-label:hover .glyph { color: inherit; }
/* ---------- minimized rail (icon-only strip) — toggled by ctrl+x m ---------- */
/* !important beats the resizer's inline --rail-w so the column collapses in every grid variant */
:root[data-rail-min="1"] #view-project { --rail-w: 52px !important; }
:root[data-rail-min="1"] #view-studio { --rail-w: 52px !important; }
:root[data-rail-min="1"] #rail-resizer { display: none; } /* can't drag while minimized */
:root[data-rail-min="1"] #rail .t,
:root[data-rail-min="1"] #rail .num,
:root[data-rail-min="1"] #rail .dot,
:root[data-rail-min="1"] #rail .nav-group-label::after,
:root[data-rail-min="1"] #rail-studio .t,
:root[data-rail-min="1"] #rail-studio .num,
:root[data-rail-min="1"] #rail-studio .dot,
:root[data-rail-min="1"] #rail-studio .nav-group-label::after { display: none; } /* labels/numbers/markers */
:root[data-rail-min="1"] #rail .nav-group,
:root[data-rail-min="1"] #rail-studio .nav-group { display: none !important; } /* all stage lists */
:root[data-rail-min="1"] #rail .nav-item:not(:has(.glyph)),
:root[data-rail-min="1"] #rail-studio .nav-item:not(:has(.glyph)) { display: none; } /* iconless rows */
/* center the surviving glyph rows in the narrow strip */
:root[data-rail-min="1"] #rail .dept-head,
:root[data-rail-min="1"] #rail .nav-group-label,
:root[data-rail-min="1"] #rail .nav-item,
:root[data-rail-min="1"] #rail-studio .nav-group-label,
:root[data-rail-min="1"] #rail-studio .nav-item { justify-content: center; gap: 0; }
:root[data-rail-min="1"] #rail .glyph,
:root[data-rail-min="1"] #rail-studio .glyph { cursor: pointer; }
.dept-head.dept-leaf::after { content: ""; }
.dept-head.dept-leaf.active { color: var(--accent); }
.dept-head.placeholder { opacity: 0.6; }
/* ---------- editor pane ---------- */
#editor-pane {
--measure: 80ch; /* shared reading-column width for editor + md preview */
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
background: var(--surface);
}
#editor-bar {
display: flex;
align-items: center;
gap: var(--u);
padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
border-bottom: var(--hair);
}
.bar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 calc(var(--u) / 2); }
/* a pane's own actions, hoisted into the one bar — setPane shows exactly one.
Shrinkable and self-scrolling so a fat group (production, assets) never pushes
Save / Focus off the right edge. No !important on display — [hidden] must win. */
.bar-group {
display: flex; align-items: center; gap: var(--u);
min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none;
}
.bar-group::-webkit-scrollbar { display: none; }
/* the title gives ground before the actions do */
#stage-title, #studio-title {
flex: 0 1 auto; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.settings-studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u); }
.settings-studio-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
/* focus mode: nothing but the page. The bar dims out and hover-reveals. */
body.nm-focus > header,
body.nm-focus #rail,
body.nm-focus #rail-studio,
body.nm-focus #chat-panel,
body.nm-focus #concept-panel,
body.nm-focus #artdir-panel,
body.nm-focus #status-line,
body.nm-focus #studio-status,
body.nm-focus #taste-flags,
body.nm-focus #chat-open-btn { display: none; }
body.nm-focus #view-project { grid-template-columns: 0 minmax(0, 1fr) 0; }
/* rail + chat are display:none in focus, so the editor would auto-place into
the zero-width column 1 — pin it to the 1fr middle track */
body.nm-focus #editor-pane { grid-column: 2; }
/* the project bar dims only when it IS stage-editor chrome — on a board it carries
the board's own actions (setPane sets body.pane-editor) */
body.nm-focus.pane-editor #view-project #editor-bar,
body.nm-focus #view-studio #editor-bar { opacity: 0; transition: opacity 0.2s ease-out; }
body.nm-focus #editor-pane:hover #editor-bar,
body.nm-focus #editor-bar:focus-within { opacity: 1; }
/* studio view: same treatment — rail is display:none, pin the pane off the 0 track.
#editor-bar is a duplicate id (project + studio bars); the dim rule above hits both,
only the hover-reveal needs the studio twin. Never getElementById("editor-bar") in JS. */
body.nm-focus #view-studio { grid-template-columns: 0 minmax(0, 1fr); }
body.nm-focus #studio-pane { grid-column: 2; }
body.nm-focus #studio-pane:hover #editor-bar,
body.nm-focus #studio-pane #editor-bar:focus-within { opacity: 1; }
body.nm-focus #studio-pane #studio-editor {
padding: calc(var(--u) * 3) max(calc((100% - 80ch) / 2), calc(var(--u) * 3));
}
/* the linear pipeline's next gap, marked in the rail — the gold edge only, no label */
#dept-tree .nav-item.next { border-left-color: var(--gold); }
#stage-nudge #nudge-draft-btn { margin: calc(var(--u) * 2) 0 var(--u); }
#stage-title, #studio-title { font-size: 16px; font-weight: 600; }
#editor {
flex: 1;
border: none;
border-radius: 0;
resize: none;
/* center the text measure via padding so the scrollbar stays at the pane edge */
padding: calc(var(--u) * 3) max(calc((100% - var(--measure)) / 2), calc(var(--u) * 3));
font-family: var(--mono);
font-size: 13px;
line-height: 1.7;
background: var(--surface);
}
/* ---------- variation compare pane ---------- */
#variations-pane {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* display:flex beats the hidden attribute — without this the closed drawer
still eats flex:1 as invisible blank space above the other panes */
#variations-pane[hidden] { display: none; }
.var-bar {
display: flex;
align-items: center;
gap: var(--u);
padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
border-bottom: var(--hair);
}
#var-cards {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: calc(var(--u) * 3);
display: grid;
gap: var(--gutter);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
align-content: start;
}
.var-card {
border: var(--hair);
background: var(--surface);
display: flex;
flex-direction: column;
min-height: 0;
}
.var-head {
display: flex;
align-items: baseline;
gap: var(--u);
padding: var(--u) calc(var(--u) * 2);
border-bottom: var(--hair);
}
.var-head .var-n { font-family: var(--mono); color: var(--accent); font-size: 12px; }
.var-angle { font-size: 12px; color: var(--muted); flex: 1; }
.var-body {
padding: calc(var(--u) * 2);
overflow-y: auto;
max-height: 44vh;
font-size: 12px;
line-height: 1.6;
}
.var-body.loading { color: var(--muted); font-style: italic; }
.var-card.error .var-body { color: var(--danger); white-space: pre-wrap; }
.var-foot { padding: var(--u) calc(var(--u) * 2); border-top: var(--hair); display: flex; align-items: center; }
/* fan-out judge: score chip, critique, and winner marker */
.var-score { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-right: auto; }
.var-critique { padding: 0 calc(var(--u) * 2) var(--u); font-size: 11px; color: var(--muted); font-style: italic; }
.var-card.var-winner { border-color: var(--accent); }
.var-badge {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
color: var(--surface); background: var(--accent); padding: 1px var(--u);
}
#editor.screenplay {
font-family: var(--screen);
font-size: 14px;
/* match the screenplay page's content width, not 80ch of Courier */
--measure: calc(46rem - var(--u) * 16);
}
#md-preview {
flex: 1;
min-height: 0;
overflow-y: auto;
/* same centered measure as the editor: toggling Preview causes no shift */
padding: calc(var(--u) * 3) max(calc((100% - var(--measure)) / 2), calc(var(--u) * 3));
}
/* pre-production design deck — starred candidates grouped by character/location */
#stage-stills {
display: flex;
flex-direction: column;
gap: var(--u);
max-height: 260px;
padding: calc(var(--u) * 2) calc(var(--u) * 3);
border-top: var(--hair);
overflow-y: auto;
}
.deck-group .deck-label { padding: 0 0 var(--u); }
.deck-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 150px));
gap: var(--gutter);
}
.deck-card { position: relative; border: var(--hair); background: var(--surface); }
.deck-card .thumb {
aspect-ratio: 1; overflow: hidden;
background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
}
.deck-card .thumb img {
width: 100%; height: 100%; object-fit: cover;
mix-blend-mode: luminosity; opacity: 0.9;
transition: opacity var(--ease);
}
.deck-card:hover .thumb img { mix-blend-mode: normal; opacity: 1; }
.deck-card .lock-btn {
position: absolute; top: 6px; right: 6px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: var(--hair);
font-size: 12px; line-height: 1; padding: 3px 6px;
color: var(--muted);
}
.deck-card .lock-btn:hover { color: var(--fg); }
.deck-card .lock-btn.on { color: var(--gold); border-color: var(--gold); }
#status-line { padding: var(--u) calc(var(--u) * 3); border-top: var(--hair); min-height: 33px; }
/* markdown body */
.md-body { font-size: 13px; }
.md-body h1, .md-body h2, .md-body h3 { margin: 1.2em 0 0.4em; line-height: 1.15; }
.md-body h1 { font-size: 24px; font-weight: 700; }
.md-body h2 { font-size: 17px; font-weight: 600; border-bottom: var(--hair); padding-bottom: 4px; }
.md-body h3 { font-size: 14px; font-weight: 600; }
.md-body p, .md-body ul, .md-body ol { margin: 0.5em 0; }
.md-body ul, .md-body ol { padding-left: 1.4em; }
.md-body code { font-size: 0.92em; background: var(--surface-2); padding: 1px 4px; border-radius: var(--r); }
.md-body pre { background: var(--surface-2); padding: var(--gutter); overflow-x: auto; margin: 0.8em 0; }
.md-body pre code { background: none; padding: 0; }
.md-body table { border-collapse: collapse; margin: 0.8em 0; width: 100%; }
.md-body th, .md-body td { border: var(--hair); padding: 6px 10px; text-align: left; font-size: 12px; }
.md-body th {
background: var(--surface-2);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
}
.md-body blockquote { border-left: 2px solid var(--accent); padding-left: var(--gutter); color: var(--muted); }
.md-body img { max-width: 100%; }
/* screenplay preview — a paper page */
#screenplay-preview {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: calc(var(--u) * 4) 0;
background: var(--surface-2);
}
.sp-page {
font-family: var(--screen);
font-size: 14px;
line-height: 1.5;
background: var(--surface);
border: var(--hair);
max-width: 46rem;
margin: 0 auto;
padding: calc(var(--u) * 6) calc(var(--u) * 8);
}
.sp-title-page { text-align: center; margin-bottom: calc(var(--u) * 8); }
.sp-title-page .sp-title { font-size: 17px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1em; }
.sp-scene {
font-weight: 700;
text-transform: uppercase;
margin: 1.6em 0 0.8em;
cursor: default;
}
.sp-scene .sp-num { color: var(--muted); font-weight: 400; margin-right: 1em; }
.sp-action { margin: 0.8em 0; white-space: pre-wrap; }
.sp-cue { margin: 1em 0 0; text-align: center; text-transform: uppercase; }
.sp-paren { text-align: center; color: var(--muted); }
.sp-dialogue { margin: 0 auto 0.8em; max-width: 24rem; white-space: pre-wrap; }
.sp-transition { text-align: right; text-transform: uppercase; margin: 1em 0; }
.sp-centered { text-align: center; margin: 1em 0; }
.sp-note { color: var(--muted); font-style: italic; }
/* ---------- placeholder departments ---------- */
.placeholder-pane {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 0 calc(var(--u) * 8);
gap: var(--u);
}
.placeholder-pane h2 {
font-size: 40px;
font-weight: 700;
line-height: 0.85;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.placeholder-pane p { color: var(--muted); max-width: 56ch; font-size: 12px; }
#stage-nudge { cursor: pointer; }
/* ---------- assets pane ---------- */
.pane { flex: 1; overflow-y: auto; padding: calc(var(--u) * 3); }
.upload-label {
display: inline-block;
background: var(--accent); color: var(--accent-fg);
border-radius: var(--r);
padding: calc(var(--u) * 0.75) calc(var(--u) * 1.5);
font-size: 12px; letter-spacing: 0.04em; cursor: pointer;
transition: background var(--snap);
}
.upload-label:hover { background: var(--accent-hover); }
#asset-grid {
display: grid;
/* fixed upper bound, not 1fr — a sparse row would otherwise stretch its
few cards to fill the width instead of staying a consistent size */
grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
gap: var(--gutter);
}
#asset-grid.dropping { outline: 2px dashed var(--accent); outline-offset: -2px; }
.asset-card { border: var(--hair); background: var(--surface); display: flex; flex-direction: column; }
.asset-card .thumb {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
background: var(--surface-2); border-bottom: var(--hair); overflow: hidden;
color: var(--muted); font-size: 12px;
}
.asset-card .thumb img {
width: 100%; height: 100%; object-fit: cover;
mix-blend-mode: luminosity;
opacity: 0.9;
transition: opacity var(--ease);
}
.asset-card:hover .thumb img { mix-blend-mode: normal; opacity: 1; }
.asset-card .thumb.audio-thumb { padding: var(--u); }
.asset-card .thumb.audio-thumb audio { width: 100%; }
.asset-card .a-name { padding: var(--u) var(--u) 0; font-size: 11px; word-break: break-all; }
.asset-card .a-meta {
padding: 0 var(--u);
font-size: 10px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.08em;
}
.asset-card .a-actions { display: flex; flex-wrap: wrap; gap: 2px; padding: var(--u); }
.asset-card .a-actions button { font-size: 10px; padding: 2px 6px; color: var(--muted); }
.asset-card .a-actions button:hover { color: var(--fg); }
.asset-card .a-actions button.icon { font-size: 12px; line-height: 1; padding: 3px 7px; }
.asset-card .a-actions button.on { color: var(--gold); }
/* folder badge + move control on gallery cards */
.asset-card .a-folder {
padding: 2px var(--u) 0; font-size: 10px; letter-spacing: .06em;
text-transform: uppercase; color: var(--accent);
}
.asset-card .a-folder.inbox { color: var(--muted); }
.asset-card .a-actions select.move {
font-size: 10px; max-width: 88px; color: var(--muted);
background: var(--surface-2); border: var(--hair); border-radius: var(--r);
}
/* ---------- asset manager: rail + zones + organize drawer ---------- */
#asset-pane { position: relative; }
.asset-manager { display: flex; gap: var(--gutter); align-items: flex-start; }
.asset-manager #asset-grid { flex: 1; min-width: 0; }
.asset-rail {
flex: 0 0 208px; align-self: stretch;
border-right: var(--hair); padding-right: var(--u);
display: flex; flex-direction: column; gap: 1px;
}
.folder-row {
display: flex; align-items: baseline; gap: var(--u);
padding: calc(var(--u) * 0.75) calc(var(--u) * 1.5);
font-size: 12px; cursor: pointer; border-left: 2px solid transparent;
}
.folder-row:hover { background: var(--surface-2); }
.folder-row.active { border-left-color: var(--accent); color: var(--fg); font-weight: 600; }
.folder-row.drop { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.folder-row .f-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.folder-row .f-count { font-size: 10px; color: var(--muted); }
.folder-row.skeleton .f-label { color: var(--fg); }
.folder-sep { height: 1px; background: var(--border); margin: var(--u) 0; }
.folder-new, .folder-reuse {
text-align: left; font-size: 11px; color: var(--muted);
padding: calc(var(--u) * 0.75) calc(var(--u) * 1.5); margin-top: 2px;
background: none; border: none; cursor: pointer;
}
.folder-new:hover, .folder-reuse:hover { color: var(--fg); }
.folder-reuse { margin-top: auto; }
.zone-chips { display: flex; gap: var(--u); margin-bottom: var(--u); }
.zone-chip {
font-size: 11px; letter-spacing: .04em; padding: 3px 10px;
border: var(--hair); border-radius: var(--r);
background: var(--surface); color: var(--muted); cursor: pointer;
}
.zone-chip:hover { color: var(--fg); }
.zone-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.asset-drawer {
position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90%;
background: var(--surface); border-left: var(--hair);
box-shadow: -8px 0 24px rgba(0,0,0,.12);
display: flex; flex-direction: column; z-index: 20; padding: var(--gutter);
overflow-y: auto;
}
.asset-drawer .drawer-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--u);
}
.asset-drawer .drawer-head h3 { font-family: var(--display); font-size: 15px; margin: 0; }
.asset-drawer .drawer-close { background: none; border: none; cursor: pointer; color: var(--muted); }
.org-list { display: flex; flex-direction: column; gap: var(--u); flex: 1; }
.org-section {
font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
color: var(--muted); margin-top: var(--u); border-bottom: var(--hair); padding-bottom: 2px;
}
.org-row {
display: flex; align-items: center; gap: var(--u);
border: var(--hair); padding: var(--u); background: var(--surface-2);
}
.org-thumb { width: 40px; height: 40px; object-fit: cover; flex: 0 0 auto; background: var(--surface); }
.org-body { flex: 1; min-width: 0; }
.org-name { font-size: 11px; word-break: break-all; }
.org-reason { font-size: 10px; }
.org-folder { font-size: 11px; max-width: 110px; }
.org-tag {
font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
color: var(--accent); border: var(--hair); padding: 1px 6px; border-radius: var(--r);
}
.drawer-foot { display: flex; align-items: center; gap: var(--u); margin-top: var(--gutter); }
/* ---------- audio board ---------- */
#audio-board { overflow-y: auto; }
.audio-group-label {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--muted);
padding: calc(var(--u) * 2) 0 var(--u);
border-bottom: var(--hair);
}
.audio-row {
display: flex; gap: var(--u); align-items: flex-start;
padding: var(--u) 0;
border-bottom: var(--hair);
}
.audio-row.kbfocus { outline: 1px solid var(--accent); outline-offset: 1px; }
.audio-row .cue-dot { flex: none; width: 14px; padding-top: 2px; font-size: 10px; }
.audio-row .cue-dot::before { content: "○"; color: var(--muted); }
.audio-row.st-generated .cue-dot::before { content: "●"; color: var(--fg); }
.audio-row.st-approved .cue-dot::before { content: "●"; color: var(--accent); }
.audio-row .cue-main { flex: 1; min-width: 0; }
.audio-row .cue-head { display: flex; gap: var(--u); align-items: baseline; }
.audio-row .cue-name { font-size: 12px; font-weight: 600; }
.audio-row .cue-scene { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.audio-row .cue-text { font-size: 12px; color: var(--fg); cursor: text; margin-top: 2px; white-space: pre-wrap; }
.audio-row .cue-text.dim { color: var(--muted); }
.audio-row audio { width: 100%; max-width: 360px; margin-top: var(--u); display: block; }
.audio-row .cue-actions { flex: none; display: flex; gap: 4px; align-items: center; }
.audio-row .cue-actions button { font-size: 10px; padding: 2px 6px; color: var(--muted); border: var(--hair); }
.audio-row .cue-actions button:hover { color: var(--fg); }
.audio-row .cue-voice { font-size: 10px; max-width: 140px; }
.audio-row.st-approved .cue-approve { color: var(--accent); border-color: var(--accent); }
.cast-table { padding: var(--u) 0; border-bottom: var(--hair); }
.cast-row { display: flex; gap: var(--u); align-items: center; padding: 2px 0; }
.cast-row .cast-name { font-size: 12px; font-weight: 600; min-width: 160px; }
.cast-row .cast-voice { font-size: 10px; max-width: 220px; }
/* ---------- design board ---------- */
#design-board { overflow-y: auto; }
.design-cols {
/* minmax(0, 1fr), not 1fr — a plain 1fr floors at min-content, so one wide card
can stretch its lane past the board */
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: calc(var(--u) * 2); align-items: start;
padding-top: var(--u);
}
.design-col { min-width: 0; }
.design-col.drag-over { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.design-card.dragging { opacity: 0.4; cursor: grabbing; }
.design-card { cursor: grab; }
.design-card.db-kbfocus { outline: 1px solid var(--accent); outline-offset: 2px; }
.design-takes {
display: flex; flex-wrap: wrap; gap: var(--u); align-items: center;
margin-top: var(--u); padding-top: var(--u); border-top: 1px dashed var(--border);
}
.design-takes .takes-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; flex-basis: 100%; }
.design-take { width: 72px; cursor: pointer; border: 1px dashed var(--border); background: var(--surface); }
.design-take img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.design-take:hover { border-color: var(--fg); }
.design-take.imported { opacity: 0.35; cursor: default; }
/* ---------- storyboard board (reuses .design-card) ---------- */
#storyboard-board { overflow-y: auto; }
/* ---------- the reel: the cut room — media bin | viewer | effects across the
top, then the lane stack (up to 3 picture layers, VO, sound, music),
inspector, transport, key legend. Chat overlays this pane rather than taking
a column: see #view-project.reel-mode below. ---------- */
#reel-pane {
display: grid; padding: 0; overflow: hidden; position: relative;
--rt-row: 30px; --rt-rows: 4;
grid-template:
"media viewer fx" minmax(0, 1fr)
"timeline timeline timeline" calc(var(--rt-rows) * var(--rt-row) + 2px)
"inspector inspector inspector" 30px
"transport transport transport" 40px
"legend legend legend" 18px
/ var(--rb-w, 244px) minmax(0, 1fr) var(--rfx-w, 236px);
}
#reel-pane.fx-collapsed { --rfx-w: 26px; }
#reel-bin {
grid-area: media; border-right: var(--hair); min-height: 0;
display: flex; flex-direction: column;
}
#reel-bin .rb-head, .rb-crumb, .rb-foot {
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 2px; color: var(--muted);
padding: var(--u) calc(var(--u) * 2) 4px; border-bottom: var(--hair);
display: flex; align-items: baseline; gap: 6px; flex: none;
}
#reel-bin .rb-head button { margin-left: auto; padding: 0 4px; }
/* the folder rail — the asset library's own tree, plus what lives outside it.
Capped so a deep folder list can never starve the file list below it. */
#rb-sources {
flex: 0 1 auto; min-height: 0; max-height: 46%; overflow-y: auto;
border-bottom: var(--hair);
}
.rb-src {
display: flex; align-items: center; gap: 8px; padding: 3px calc(var(--u) * 2);
font-size: 11px; cursor: pointer; border-left: 2px solid transparent;
}
.rb-src:hover { background: var(--surface-2); }
.rb-src.sel { border-left-color: var(--accent); color: var(--fg); }
/* the two places media lives outside the asset library, set apart from it */
.rb-src.rb-outside { border-top: var(--hair); }
.rb-src.rb-outside + .rb-src.rb-outside { border-top: none; }
.rb-src .rb-glyph { font-size: 13px; color: var(--muted); width: 16px; }
.rb-src.sel .rb-glyph { color: var(--accent); }
.rb-src .rb-src-label { flex: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.rb-src .rb-n { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.rb-crumb { text-transform: none; letter-spacing: 0; cursor: default; }
.rb-crumb span { cursor: pointer; }
.rb-crumb span:hover { color: var(--fg); }
.rb-filterrow {
display: flex; align-items: center; gap: 6px; flex: none;
padding: 2px calc(var(--u) * 2); border-bottom: var(--hair);
}
.rb-filterrow input {
flex: 1; min-width: 0; font-family: var(--mono); font-size: 11px;
border: none; background: transparent; padding: 2px 0;
}
#rb-list { flex: 1; min-height: 0; overflow-y: auto; }
.rb-row {
display: flex; align-items: center; gap: 6px; padding: 3px calc(var(--u) * 2);
font-size: 11px; cursor: pointer; border-left: 2px solid transparent;
}
.rb-row:hover { background: var(--surface-2); }
.rb-row.sel { border-left-color: var(--accent); background: var(--surface-2); }
.rb-row .rb-glyph { color: var(--muted); width: 14px; flex: none; font-size: 12px; }
.rb-row img {
width: 40px; aspect-ratio: 16/9; object-fit: cover; border: var(--hair);
flex: none;
}
.rb-row .rb-name { flex: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.rb-row .rb-meta { font-family: var(--mono); font-size: 9px; color: var(--muted); flex: none; }
.rb-row button { font-size: 10px; padding: 1px 5px; color: var(--muted); border: var(--hair); flex: none; }
.rb-row button:hover { color: var(--fg); }
.rb-foot { border-bottom: none; border-top: var(--hair); text-transform: none;
letter-spacing: 0; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; padding-bottom: var(--u); }
#reel-bin.focused { box-shadow: inset 2px 0 0 var(--accent); }
#reel-viewer {
grid-area: viewer; display: flex; align-items: center; justify-content: center;
background: #000; min-height: 0; min-width: 0; position: relative;
container-type: size; /* so the stage can fit itself to the shorter side */
}
/* the stage is exactly the 16:9 frame the render bakes, so an overlay preview
positioned as a percentage of it lands where ffmpeg will put it. Fitting a
fixed-ratio box inside a box of unknown ratio needs both dimensions: cqh
gives us the height, so the width is whichever is smaller. */
#reel-stage {
position: relative; aspect-ratio: 16/9; width: 100%; margin: auto;
width: min(100%, calc(100cqh * 16 / 9));
}
#reel-player, #reel-still {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
#reel-overlays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#reel-overlays img { position: absolute; }
#reel-overlays .rv-title {
position: absolute; font-family: var(--sans, inherit); line-height: 1.1;
white-space: pre-wrap; text-align: center;
}
#reel-viewer-note { position: absolute; }
/* effects column — three sections, dimmed where the selection can't take them */
#reel-fx {
grid-area: fx; border-left: var(--hair); min-width: 0; min-height: 0;
display: flex; flex-direction: column; overflow: hidden;
}
.rfx-head {
flex: none; display: flex; align-items: baseline; gap: 6px;
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 2px; color: var(--muted);
padding: var(--u) var(--u) 4px calc(var(--u) * 2); border-bottom: var(--hair);
}
.rfx-head button { margin-left: auto; padding: 0 4px; }
#reel-pane.fx-collapsed #rfx-title, #reel-pane.fx-collapsed #rfx-body { display: none; }
#reel-pane.fx-collapsed .rfx-head { padding: var(--u) 2px; }
#rfx-body { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: var(--u); }
.rfx-sec {
font-family: var(--mono); font-size: 9px; text-transform: uppercase;
letter-spacing: 2px; color: var(--muted);
padding: calc(var(--u) * 1.5) calc(var(--u) * 2) 2px;
display: flex; align-items: baseline; gap: 6px;
}
.rfx-sec.off { opacity: 0.35; }
.rfx-add { margin-left: auto; display: flex; gap: 3px; }
.rfx-add button {
font-size: 10px; padding: 0 4px; color: var(--muted); border: var(--hair);
}
.rfx-add button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.rfx-add button:disabled { opacity: 0.3; cursor: default; }
.rfx-fx {
margin: 2px calc(var(--u) * 2) 0; padding: 3px 0 4px; border-top: var(--hair);
font-size: 11px;
}
.rfx-fx .rfx-fx-head { display: flex; align-items: baseline; gap: 6px; }
.rfx-fx .rfx-fx-head b { font-weight: 500; }
.rfx-fx .rfx-fx-head button {
margin-left: auto; font-size: 10px; padding: 0 4px; color: var(--muted);
border: var(--hair);
}
.rfx-fx .rfx-fx-head button:hover { color: var(--danger, #c0392b); }
.rfx-p { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.rfx-p label { flex: 1; min-width: 0; color: var(--muted); font-size: 10px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-p input[type="number"], .rfx-p select { width: 68px; flex: none;
font-family: var(--mono); font-size: 11px; }
.rfx-p input[type="text"] { width: 100%; font-size: 11px; }
.rfx-p.wide { display: block; }
.rfx-empty { padding: var(--u) calc(var(--u) * 2); font-size: 11px; }
#reel-timeline {
grid-area: timeline; display: flex; border-top: var(--hair);
min-width: 0; overflow: hidden;
}
.rt-labels {
flex: none; width: 84px; display: flex; flex-direction: column;
border-right: var(--hair);
}
.rt-labels span {
height: var(--rt-row); display: flex; align-items: center; gap: 4px;
padding-left: var(--u); flex: none; cursor: pointer;
font-family: var(--mono); font-size: 9px; text-transform: uppercase;
letter-spacing: 1px; color: var(--muted); border-bottom: var(--hair);
}
.rt-labels span.active { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
#rt-scrollwrap { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
#rt-scroll { position: relative; height: 100%; min-width: 100%; }
.rt-track {
position: relative; height: var(--rt-row); border-bottom: var(--hair);
}
.rt-track.drop { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.rt-slot {
position: absolute; top: 6px; bottom: 6px; overflow: hidden;
background: var(--surface); border: var(--hair); cursor: pointer;
font-size: 10px; font-family: var(--mono); padding: 2px 4px;
white-space: nowrap; text-overflow: ellipsis;
}
.rt-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; z-index: 0; }
.rt-slot .rt-slot-label { position: relative; z-index: 1; text-shadow: 0 0 4px var(--surface); }
.rt-slot.src-shot { border-color: var(--accent); }
.rt-slot.rt-sel, .rt-clip.rt-sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.rt-vobar {
position: absolute; top: 40%; bottom: 40%; background: var(--muted);
opacity: 0.6; cursor: pointer;
}
.rt-vobar.has-file { background: var(--accent); }
.rt-clip {
position: absolute; top: 8px; bottom: 8px; background: var(--surface-2);
border: 1px solid var(--muted); cursor: grab; font-size: 10px;
font-family: var(--mono); padding: 2px 10px 2px 4px; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis;
}
.rt-clip.kind-music { border-style: dashed; }
.rt-clip.dragging { opacity: 0.6; cursor: grabbing; }
.rt-clip .rt-resize {
position: absolute; right: 0; top: 0; bottom: 0; width: 7px;
cursor: ew-resize; border-left: 1px dotted var(--muted);
}
/* picture-layer clips read as pictures: the thumbnail shows through, like a slot */
.rt-clip.rt-pic { background: var(--surface); }
.rt-clip.rt-pic img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0.45; z-index: 0;
}
.rt-clip.rt-pic .rt-clip-label {
position: relative; z-index: 1; text-shadow: 0 0 4px var(--surface);
}
.rt-fxdot { color: var(--accent); font-size: 9px; }
#rt-playhead {
position: absolute; top: 0; bottom: 0; width: 1px;
background: var(--accent); z-index: 3; pointer-events: none;
}
#reel-inspector {
grid-area: inspector; display: flex; align-items: center; gap: var(--u);
padding: 0 calc(var(--u) * 2); border-top: var(--hair); font-size: 11px;
overflow: hidden; white-space: nowrap;
}
#reel-inspector input { font-family: var(--mono); font-size: 11px; }
#reel-inspector input[type="number"] { width: 60px; }
#reel-inspector .ri-vo { flex: 1; min-width: 60px; }
#reel-inspector button { font-size: 10px; padding: 1px 6px; color: var(--muted); border: var(--hair); }
#reel-inspector button:hover { color: var(--fg); }
#reel-transport {
grid-area: transport; display: flex; align-items: center; gap: var(--u);
padding: 0 calc(var(--u) * 2); border-top: var(--hair);
}
#reel-transport #reel-time { font-family: var(--mono); font-size: 12px; min-width: 64px; }
#reel-transport select { max-width: 150px; font-size: 11px; }
/* one line, always: a label that wraps makes the bar taller than its row */
#reel-transport button { font-size: 11px; white-space: nowrap; flex: none; }
#reel-transport #reel-count {
min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
text-align: right;
}
#reel-more-menu {
position: fixed; z-index: 40; min-width: 200px;
background: var(--surface); border: var(--hair); padding: 4px 0;
}
#reel-more-menu button {
display: block; width: 100%; text-align: left; border: none;
padding: 5px calc(var(--u) * 2); font-size: 11px; white-space: nowrap;
}
#reel-more-menu button:hover { background: var(--surface-2); color: var(--accent); }
#reel-legend {
grid-area: legend; font-size: 10px; padding: 0 calc(var(--u) * 2);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
border-top: var(--hair);
}
#reel-keymap {
position: absolute; right: 24px; bottom: 70px; z-index: 6;
background: var(--surface); border: var(--hair); padding: calc(var(--u) * 2);
font-size: 11px; line-height: 1.7; max-width: 68ch;
}
/* the export menu — one door, two ways out of NOMUS */
#reel-export-menu {
position: fixed; z-index: 40; min-width: 300px;
background: var(--surface); border: var(--hair); padding: 4px 0;
}
#reel-export-menu button {
display: block; width: 100%; text-align: left; border: none;
padding: 6px calc(var(--u) * 2); font-size: 11px;
}
#reel-export-menu button:hover { background: var(--surface-2); color: var(--accent); }
#reel-export-menu .rx-note {
padding: 2px calc(var(--u) * 2) 4px; font-size: 10px; color: var(--muted);
}
/* ---------- the cut room takes the whole editor: in the Reel the chat is not a
column, it floats over the pane on the right. #view-project is already
position:relative, so the docked chat just becomes an overlay — and
#chat-resizer, which is positioned from that same right edge, keeps working.
Declared after chat-hidden / chat-expanded / concept-mode so this wins. */
#view-project.reel-mode {
grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr) 0;
}
#view-project.reel-mode #editor-pane { display: flex; }
#view-project.reel-mode #chat-panel {
display: flex; position: absolute; right: 0; top: 0; bottom: 0;
width: var(--chat-w, 400px); z-index: 20; border-left: var(--hair);
background: var(--surface); box-shadow: -8px 0 24px rgb(0 0 0 / 0.35);
}
#view-project.reel-mode.chat-hidden #chat-panel { display: none; }
/* the shared ? sheet — same language as the reel's, but pane-agnostic */
.nm-keymap {
position: fixed; right: 24px; bottom: 48px; z-index: 40;
background: var(--surface); border: var(--hair); padding: calc(var(--u) * 2);
font-size: 11px; line-height: 1.7; max-width: 68ch;
max-height: calc(100vh - 96px); overflow-y: auto;
}
#canvas-pane { display: flex; flex-direction: column; }
#canvas-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--surface); }
#canvas-tab-link { font-size: 10px; color: var(--muted); }
#canvas-tab-link:hover { color: var(--fg); }
.design-col-head {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--mono);
font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--muted);
padding: var(--u) 0;
border-bottom: var(--hair);
}
/* bounded cards in the kanban's language — a surface with a hairline and an
accent left edge when prioritised, NOT a list row that grows without limit.
The long fields (body, prompt) clamp so every card stays about the same size. */
.design-card {
background: var(--surface); border: var(--hair);
border-left: 2px solid transparent;
padding: var(--u) calc(var(--u) * 1.5);
margin-bottom: calc(var(--u) * 1.5);
overflow: hidden; /* last line of defence — nothing leaves the card */
}
.design-card.pri-card { border-left-color: var(--accent); }
.design-card .design-note,
.design-card .design-prompt {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden; cursor: pointer;
overflow-wrap: anywhere; /* a path or URL breaks instead of running out */
}
.design-card .design-note:hover, .design-card .design-prompt:hover { color: var(--fg); }
/* the secondary verbs sit behind the card's ··· — kept in the DOM so the
keyboard map (v / s / w / f / r) still reaches them */
.design-card .design-extra { display: none; }
.design-card .design-tag { font-family: var(--mono); font-size: 10px; }
.design-variant .ref-badge {
position: absolute; top: 0; left: 0;
font-family: var(--mono); font-size: 9px;
color: var(--muted); background: var(--surface);
padding: 1px 4px; border-right: var(--hair); border-bottom: var(--hair);
}
.design-card .design-actions {
display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: var(--u);
}
.design-card .design-actions button { font-size: 10px; padding: 2px 6px; color: var(--muted); border: var(--hair); }
.design-card .design-actions button:hover { color: var(--fg); }
.design-card .design-head { display: flex; gap: var(--u); align-items: center; }
/* the name holds one line and truncates; min-width:0 is what actually lets a flex
item with nowrap shrink — without it a long title shoves the chip and the
⧉ / × buttons clean out of the card */
.design-card .design-name {
font-size: 12px; font-weight: 600;
white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
flex: 0 1 auto;
}
/* Tags ellipsis rather than wrap, and give up room FIRST (shrink 8 against the
name's 1) so a short name is never truncated to "Scene…". */
.design-card .design-tag {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 0 8 auto;
}
/* the storyboard's chip is a whole scene heading, not a one-word #tag — it sits on
its own full-width line under the title so the two never compete for the row */
#storyboard-board .design-card .design-tag { display: block; margin-top: 1px; }
/* the head's buttons must never be the thing that gets squeezed */
.design-card .design-head > button { flex: 0 0 auto; }
.design-card .design-head .spacer { flex: 1 1 auto; min-width: 0; }
#storyboard-board .design-card .design-name { cursor: text; }
.design-card .design-state { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.design-card .design-pri {
font-family: var(--mono); font-size: 10px; font-weight: 600;
padding: 0 5px; border: var(--hair);
}
.design-card .design-pri.pri-A { color: var(--gold); border-color: var(--gold); }
.design-card .design-head button { font-size: 10px; padding: 2px 6px; color: var(--muted); border: var(--hair); }
.design-card .design-head button:hover { color: var(--fg); }
.design-card .design-n { font-size: 10px; }
.design-card .design-note { font-size: 11px; margin-top: 2px; }
.design-card .design-prompt {
font-family: var(--mono); font-size: 11px;
color: var(--fg); cursor: text; margin-top: var(--u); white-space: pre-wrap;
}
.design-card .design-prompt.dim { color: var(--muted); }
/* one bounded row of takes — 4 takes used to wrap into a 2×2 block and double the
card's height. Scrolls sideways instead of growing the card. */
.design-card .design-variants {
display: flex; flex-wrap: nowrap; gap: var(--u);
margin-top: var(--u); overflow-x: auto; padding-bottom: 2px;
}
.design-variant {
position: relative; width: 96px; flex: 0 0 auto; cursor: pointer;
border: var(--hair); background: var(--surface);
}
.design-variant img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.design-variant:hover { border-color: var(--fg); }
.design-variant.picked { border: 1px solid var(--gold); cursor: default; }
.design-variant .pick-badge {
position: absolute; top: 0; right: 0;
font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
color: var(--gold); background: var(--surface);
padding: 1px 4px; border-left: var(--hair); border-bottom: var(--hair);
}
/* provisional judge pick (Stage 14) — loud, confirmable, swappable */
.design-variant.judge-pick { border: 2px solid var(--accent); }
.design-variant .judge-badge {
position: absolute; top: 0; left: 0;
font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em;
color: var(--bg, #000); background: var(--accent);
padding: 1px 4px;
}
.design-card.has-judge, .has-judge { outline: 1px dashed var(--accent); outline-offset: 1px; }
/* ---------- chat panel ---------- */
#chat-panel {
border-left: var(--hair);
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0; /* let the flex column shrink so #chat-log scrolls internally */
background: var(--bg);
}
#chat-head {
display: flex; align-items: center; gap: var(--u);
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
border-bottom: var(--hair);
}
#chat-head .label { color: var(--muted); }
#chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--u) * 2); display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.chat-msg .role { color: var(--muted); margin-bottom: 2px; }
.chat-msg.user .role { color: var(--accent); }
/* speaker alignment — the standard messaging layout: the user's block hugs the
right edge, NOMUS/assistant hugs the left, so it reads at a glance who said
what. The text itself always stays left-justified (reading direction) — only
the block's placement and the role label flip to the right for the user.
Applies to all three chat surfaces (#chat-log, #studio-chat-log,
#session-log): each is a flex column, so per-role align-self is enough. */
.chat-msg { max-width: 82%; }
.chat-msg.assistant { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.chat-msg.user .role { text-align: right; }
.chat-msg .text { white-space: pre-wrap; font-size: 13px; }
.chat-msg .text .chat-img { max-width: 100%; border: var(--hair); display: block; margin: var(--u) 0; }
.chat-img-wrap { position: relative; display: inline-block; margin: var(--u) 0; }
.chat-img-wrap .chat-img { margin: 0; }
.chat-img-wrap .star-btn {
position: absolute; top: 6px; right: 6px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: var(--hair);
font-size: 14px; line-height: 1; padding: 4px 6px;
color: var(--muted);
}
.chat-img-wrap .star-btn:hover { color: var(--fg); }
.chat-img-wrap .star-btn.on { color: var(--gold); }
.chat-msg .text .chat-audio { width: 100%; display: block; margin: var(--u) 0; }
.chat-msg .text .tool-line { color: var(--muted); font-size: 11px; }
.chat-msg .text .tool-line.clickable { cursor: pointer; text-decoration: underline dotted; }
.chat-msg .text .tool-line.clickable:hover { color: var(--fg); }
.chat-msg .text .tool-line .clickable { cursor: pointer; text-decoration: underline dotted; }
.chat-msg .text .tool-line .clickable:hover { color: var(--fg); }
.chat-msg .text .receipt { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.chat-msg .text .receipt.undone > span { text-decoration: line-through; opacity: 0.6; }
.chat-msg .text .receipt .undo-chip {
font: inherit; font-size: 10px; line-height: 1; padding: 2px 6px;
color: var(--muted); background: none;
border: 1px solid var(--muted); border-radius: 3px; cursor: pointer;
}
.chat-msg .text .receipt .undo-chip:hover { color: var(--fg); border-color: var(--fg); }
.chat-msg .text .receipt .undo-chip:disabled { opacity: 0.5; cursor: default; }
.chat-msg .text .confirm-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; color: var(--gold); }
.chat-msg .text .confirm-row.cancelled, .chat-msg .text .confirm-row.confirmed { color: var(--muted); }
.chat-msg .text .confirm-row .confirm-chips { display: inline-flex; gap: 4px; }
.chat-msg .text .confirm-row .undo-chip { border-color: var(--gold); color: var(--gold); }
.chat-msg .text .confirm-row .undo-chip:hover { color: var(--fg); border-color: var(--fg); }
.chat-msg .text .confirm-row .undo-chip:disabled { opacity: 0.5; cursor: default; }
/* completed replies render as markdown; kill pre-wrap inside so margins
don't double every newline */
.chat-msg .text .md-inline { white-space: normal; }
.chat-msg .text .md-inline p { margin: 0 0 var(--u); }
.chat-msg .text .md-inline ul, .chat-msg .text .md-inline ol { margin: 0 0 var(--u); padding-left: 18px; }
.chat-msg .text .md-inline li { margin: 2px 0; }
.chat-msg .text .md-inline h1, .chat-msg .text .md-inline h2,
.chat-msg .text .md-inline h3, .chat-msg .text .md-inline h4 {
font-size: 13px; margin: var(--u) 0 4px; letter-spacing: 0.02em;
}
.chat-msg .text .md-inline pre {
overflow-x: auto; border: var(--hair); padding: var(--u); margin: 0 0 var(--u);
background: var(--surface-2); font-size: 12px;
}
.chat-msg .text .md-inline code { font-size: 12px; }
.chat-msg .text .md-inline blockquote {
border-left: 2px solid var(--muted); margin: 0 0 var(--u);
padding-left: var(--u); color: var(--muted);
}
.chat-msg .text .md-inline table { border-collapse: collapse; margin: 0 0 var(--u); font-size: 12px; }
.chat-msg .text .md-inline th, .chat-msg .text .md-inline td {
border: var(--hair); padding: 2px 6px; text-align: left;
}
.chat-msg .text .md-inline > :last-child { margin-bottom: 0; }
#chat-form { border-top: var(--hair); padding: calc(var(--u) * 2); display: flex; flex-direction: column; gap: var(--u); position: relative; }
#chat-input { resize: none; font-size: 13px; }
#chat-form .row { display: flex; gap: var(--u); align-items: center; }
#chat-form .row .dim { font-size: 10px; letter-spacing: 0.04em; }
/* slash-command / prompt-library popover (project chat + studio sessions) */
#slash-pop, #session-slash-pop, #at-pop, #at-pop-studio, #at-pop-session {
position: absolute;
bottom: 100%;
left: calc(var(--u) * 2);
right: calc(var(--u) * 2);
background: var(--surface);
border: var(--hair);
max-height: 260px;
overflow-y: auto;
z-index: 10;
}
#session-slash-pop, #at-pop-session { left: calc(var(--u) * 3); right: calc(var(--u) * 3); }
/* session attachments — chips row above the log; drop target on the pane */
#session-attach { display: flex; flex-wrap: wrap; gap: var(--u);
padding: var(--u) calc(var(--u) * 3); border-bottom: var(--hair); }
.attach-chip { display: inline-flex; align-items: center; gap: var(--u);
border: var(--hair); padding: 2px var(--u); font-size: 11px; }
.attach-chip .sz { font-size: 10px; }
.attach-chip button { font-size: 10px; padding: 0 4px; }
.attach-chip.promoted .n { color: var(--muted); }
#session-pane.dropping { outline: 2px dashed var(--accent); outline-offset: -2px; }
.slash-item { padding: var(--u) calc(var(--u) * 1.5); cursor: pointer; display: flex; gap: var(--u); align-items: baseline; }
.slash-item:hover, .slash-item.sel { background: var(--surface-2); }
.slash-item .name { font-size: 12px; }
.slash-item .desc { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#session-form { position: relative; }
/* studio chat — platform-wide overlay, available from the dashboard */
#studio-chat {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 92vw;
display: flex;
flex-direction: column;
background: var(--bg);
border-left: var(--hair);
z-index: 60;
animation: studio-chat-in 0.16s ease-out;
}
@keyframes studio-chat-in {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: none; }
}
#studio-chat .sc-head, #guide-panel .sc-head, #research-panel .sc-head, #publish-panel .sc-head {
display: flex; align-items: center; gap: var(--u);
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
border-bottom: var(--hair);
}
#studio-chat .sc-head .label, #guide-panel .sc-head .label, #research-panel .sc-head .label, #publish-panel .sc-head .label {
font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--muted);
}
/* in-app guide — same right-drawer pattern as the studio chat */
#guide-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 92vw;
display: flex;
flex-direction: column;
background: var(--bg);
border-left: var(--hair);
z-index: 60;
animation: studio-chat-in 0.16s ease-out;
}
#guide-panel[hidden] { display: none; }
#guide-toc {
border-bottom: var(--hair);
padding: var(--u) 0;
columns: 2;
column-gap: 0;
}
#guide-toc .g-item {
padding: 3px calc(var(--u) * 2);
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
cursor: pointer;
break-inside: avoid;
}
#guide-toc .g-item:hover { background: var(--surface-2); color: var(--fg); }
#guide-toc .g-item.active { color: var(--accent); }
#guide-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 4);
font-size: 13px;
}
/* /btw drawer — same right-drawer pattern as the guide/research panels */
#btw-panel {
position: fixed; top: 0; right: 0; bottom: 0;
width: 420px; max-width: 92vw;
display: flex; flex-direction: column;
background: var(--bg); border-left: var(--hair);
z-index: 60; animation: studio-chat-in 0.16s ease-out;
}
#btw-panel[hidden] { display: none; }
#btw-list {
flex: 1; min-height: 0; overflow-y: auto;
padding: calc(var(--u) * 2);
display: flex; flex-direction: column; gap: calc(var(--u) * 2);
}
.btw-empty { padding: calc(var(--u) * 2); font-size: 12px; line-height: 1.5; }
.btw-entry {
border: var(--hair); padding: calc(var(--u) * 1.5);
display: flex; flex-direction: column; gap: var(--u);
}
.btw-note { font-size: 11px; }
.btw-answer { font-size: 13px; }
.btw-actions { display: flex; gap: var(--u); }
/* injected /btw asides render as dimmed margin notes in the transcript */
#session-log .chat-msg.aside { opacity: 0.55; }
#session-log .chat-msg.aside .text { font-size: 12px; }
/* fork-from-here button — sits beside the reply button on hover */
#session-log .msg-fork {
position: absolute; top: 0; right: 34px;
opacity: 0; font-size: 12px; padding: 1px 6px;
background: none; border: var(--hair); color: var(--muted); cursor: pointer;
}
#session-log .chat-msg:hover .msg-fork { opacity: 0.6; }
#session-log .msg-fork:hover { opacity: 1; color: var(--fg); }
/* market-research drawer — same right-drawer pattern as the guide/studio chat */
#research-panel {
position: fixed; top: 0; right: 0; bottom: 0;
width: 460px; max-width: 92vw;
display: flex; flex-direction: column;
background: var(--bg); border-left: var(--hair);
z-index: 60; animation: studio-chat-in 0.16s ease-out;
}
#research-panel[hidden] { display: none; }
#research-form {
border-bottom: var(--hair);
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
display: flex; flex-direction: column; gap: var(--u);
}
#research-form textarea {
width: 100%; resize: vertical; font: inherit;
}
#research-form .row { display: flex; gap: var(--u); align-items: center; }
#research-form .row .dim { font-size: 10px; letter-spacing: 0.04em; }
#research-status {
padding: var(--u) calc(var(--u) * 2);
font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.08em;
border-bottom: var(--hair);
}
#research-list {
flex: 1; min-height: 0; overflow-y: auto;
padding: calc(var(--u) * 2);
display: flex; flex-direction: column; gap: calc(var(--u) * 2);
}
.research-card {
border: var(--hair); padding: calc(var(--u) * 1.5);
}
.research-q { font-weight: 600; font-size: 13px; }
.research-summary { font-size: 12px; color: var(--muted); margin: var(--u) 0; }
.research-finding {
font-size: 12px; padding: 6px 0; border-top: var(--hair);
}
.rv-badge {
display: inline-block; font-family: var(--mono);
font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 1px 5px; border-radius: 2px; vertical-align: middle;
}
.rv-verified { background: #1f4d2e; color: #7ee2a0; }
.rv-unconfirmed { background: var(--surface-2); color: var(--muted); }
.rv-contested { background: #5a3a12; color: #f0c274; }
.rv-claim { }
.rv-cites { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-cites a, .rv-cites span {
font-family: var(--mono); font-size: 10px; color: var(--accent);
text-decoration: none;
}
.rv-cites a:hover { text-decoration: underline; }
/* publish drawer — same right-drawer pattern */
#publish-panel {
position: fixed; top: 0; right: 0; bottom: 0;
width: 440px; max-width: 92vw;
display: flex; flex-direction: column;
background: var(--bg); border-left: var(--hair);
z-index: 60; animation: studio-chat-in 0.16s ease-out;
}
#publish-panel[hidden] { display: none; }
#publish-status {
padding: var(--u) calc(var(--u) * 2);
font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.08em;
border-bottom: var(--hair);
}
#publish-form {
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
display: flex; flex-direction: column; gap: var(--u);
border-bottom: var(--hair);
}
#publish-form textarea, #publish-form input[type="text"],
#publish-form input[type="datetime-local"] { width: 100%; font: inherit; }
#publish-form textarea { resize: vertical; }
#publish-form .row { display: flex; gap: var(--u); align-items: center; }
#publish-form .row .dim { font-size: 10px; letter-spacing: 0.04em; }
.pub-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.pub-channels { display: flex; flex-direction: column; gap: 3px; max-height: 140px; overflow-y: auto; }
.pub-channel { font-size: 12px; display: flex; align-items: center; gap: 4px; }
#publish-log { flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--u) * 2); }
.pub-log-head {
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--muted); margin-bottom: var(--u);
}
.pub-log-row { border-top: var(--hair); padding: 6px 0; font-size: 12px; }
.pub-when { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.pub-log-body { color: var(--muted); margin-top: 2px; }
#newsletter-section {
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
border-bottom: var(--hair);
display: flex; flex-direction: column; gap: var(--u);
}
.pub-section-head {
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--muted);
}
#newsletter-form { display: flex; flex-direction: column; gap: var(--u); }
#newsletter-form input[type="text"], #newsletter-form textarea { width: 100%; font: inherit; }
#newsletter-form textarea { resize: vertical; }
#newsletter-form .row { display: flex; gap: var(--u); align-items: center; }
#newsletter-form .row .dim { font-size: 10px; letter-spacing: 0.04em; }
#studio-chat-log {
flex: 1; min-height: 0; overflow-y: auto;
padding: calc(var(--u) * 2);
display: flex; flex-direction: column; gap: calc(var(--u) * 2);
}
#studio-chat-form {
border-top: var(--hair);
padding: calc(var(--u) * 2);
display: flex; flex-direction: column; gap: var(--u);
position: relative; /* anchors the @-mention popover */
}
#studio-chat-form .row { display: flex; gap: var(--u); align-items: center; }
#studio-chat-form .row .dim { font-size: 10px; letter-spacing: 0.04em; }
#studio-chat-input { resize: none; font-size: 13px; }
/* the agent's face — a black box in the corner when the chat is tucked away */
#chat-open-btn {
position: fixed;
right: 16px;
bottom: 16px;
background: #161613;
color: #F7F7F5;
border: 1px solid var(--border);
font-size: 14px;
letter-spacing: 0.05em;
padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5);
z-index: 50;
transition: background var(--snap), transform var(--ease);
}
#chat-open-btn:hover {
background: var(--accent);
color: var(--accent-fg);
transform: translateY(-2px);
}
/* ---------- studio view ---------- */
#view-studio {
display: grid;
grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr); /* bound the row so panes scroll internally, not blow out the grid */
overflow: hidden;
}
#studio-pane { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
#studio-pane #library-list { flex: 1; overflow-y: auto; padding: calc(var(--u) * 3); }
/* studio sessions — the planning chat pane */
#session-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#session-pane[hidden] { display: none; }
#session-meta { padding: 6px calc(var(--u) * 3); border-bottom: var(--hair); font-size: 11px; }
#session-meta a { color: var(--accent); }
#session-log {
flex: 1; min-height: 0; overflow-y: auto;
padding: calc(var(--u) * 3);
display: flex; flex-direction: column; gap: calc(var(--u) * 1.5);
}
/* studio session chat: a linear, Discord-style log — timestamped author
headers, activity lines inline, consecutive same-author messages grouped */
#session-log .chat-msg { position: relative; }
#session-log .chat-msg .role {
display: flex; gap: var(--u); align-items: baseline;
margin-bottom: 3px; text-transform: none;
}
#session-log .chat-msg .who { font-weight: 600; }
#session-log .chat-msg.assistant .who { color: var(--accent); }
#session-log .chat-msg.user .who { color: var(--fg); }
/* right-aligned user rows: the header (a flex row) and its inner text align right */
#session-log .chat-msg.user .role { justify-content: flex-end; }
#session-log .chat-msg.user .text { padding-left: 0; padding-right: calc(var(--u) * 1.5); }
#session-log .chat-msg .chat-time {
font-size: 10px; color: var(--muted); opacity: 0.7;
text-transform: none; letter-spacing: 0; font-weight: 400;
}
#session-log .chat-msg .text { padding-left: calc(var(--u) * 1.5); }
/* group consecutive same-author messages: hide the repeated header, tuck up.
Driven by a JS-computed .grouped class (see groupWithPrevious in
sessions.js) since CSS can't compare data-agent to the previous sibling's
value on its own — a role-only adjacency selector would wrongly merge
different committee voices (e.g. PRODUCER followed by MARKETING). */
#session-log .chat-msg.grouped > .role { display: none; }
#session-log .chat-msg.grouped { margin-top: calc(var(--u) * -1); }
/* hover-only reply affordance */
#session-log .msg-reply {
position: absolute; top: 0; right: 0;
opacity: 0; font-size: 12px; padding: 1px 6px;
background: none; border: var(--hair); color: var(--muted); cursor: pointer;
}
#session-log .chat-msg:hover .msg-reply { opacity: 0.6; }
#session-log .msg-reply:hover { opacity: 1; color: var(--fg); }
/* reply-context pill above the input */
#reply-pill {
display: flex; align-items: center; gap: var(--u);
padding: 4px var(--u); margin-bottom: 6px;
border-left: 2px solid var(--accent); background: var(--surface);
font-size: 11px; color: var(--muted);
}
#reply-pill[hidden] { display: none; }
#reply-pill .reply-pill-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reply-pill #reply-cancel { background: none; border: none; color: var(--muted); cursor: pointer; }
/* animated "thinking" dots while NOMUS's reply is still streaming */
.thinking-dots { display: inline-flex; gap: 4px; align-items: center; }
.thinking-dots i {
width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
display: inline-block; animation: thinking-bounce 1.2s infinite ease-in-out both;
}
.thinking-dots i:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking-bounce {
0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
35% { opacity: 1; transform: translateY(-3px); }
}
/* NOMUS emits `---` separators in markdown; render them as a faint hairline,
not the browser's heavy default rule, so they don't break up reading */
.chat-msg .text .md-inline hr {
border: none; border-top: var(--hair); opacity: 0.5; margin: var(--u) 0;
}
#session-form { border-top: var(--hair); padding: var(--u) calc(var(--u) * 3); display: flex; flex-direction: column; gap: 6px; }
#session-form textarea { width: 100%; resize: vertical; }
#session-form .row { display: flex; align-items: center; gap: 8px; }
#session-nav .nav-item { display: flex; gap: 6px; align-items: baseline; }
#session-nav .nav-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#session-nav .nav-item .note { margin-left: auto; font-size: 10px; flex-shrink: 0; }
#studio-pane #studio-editor {
flex: 1; border: none; border-radius: 0; resize: none;
padding: calc(var(--u) * 3);
font-size: 13px; line-height: 1.7;
background: var(--surface);
}
.lib-row {
display: flex; align-items: baseline; gap: var(--gutter);
padding: calc(var(--u) * 1.5) 0;
border-bottom: var(--hair);
cursor: pointer;
}
.lib-row .name { font-family: var(--display); font-weight: 600; font-size: 15px; min-width: 160px; }
.lib-row .desc { color: var(--muted); font-size: 12px; flex: 1; }
.lib-row .tags {
color: var(--muted); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.1em;
}
/* ---------- dialogs ---------- */
dialog {
margin: auto; /* the * reset kills the UA centering — restore it */
background: var(--surface);
color: var(--fg);
border: var(--hair);
border-radius: 0;
padding: calc(var(--u) * 3);
min-width: 460px;
max-width: 680px;
/* blueprint corner markers: four 10px L-shapes in Forest */
background-image:
linear-gradient(var(--accent), var(--accent)),
linear-gradient(var(--accent), var(--accent)),
linear-gradient(var(--accent), var(--accent)),
linear-gradient(var(--accent), var(--accent)),
linear-gradient(var(--accent), var(--accent)),
linear-gradient(var(--accent), var(--accent)),
linear-gradient(var(--accent), var(--accent)),
linear-gradient(var(--accent), var(--accent));
background-repeat: no-repeat;
background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px,
10px 1px, 1px 10px, 10px 1px, 1px 10px;
background-position: left top, left top, right top, right top,
left bottom, left bottom, right bottom, right bottom;
}
dialog::backdrop { background: rgba(26, 28, 24, 0.45); }
/* popups: quick fade-in, CRT flicker-out (state.js patches close()) */
dialog[open] { animation: dlg-in 0.12s ease-out; }
dialog[open]::backdrop { animation: dlg-backdrop-in 0.12s ease-out; }
dialog.closing { animation: dlg-flicker 0.16s linear forwards; }
dialog.closing::backdrop { animation: dlg-flicker 0.16s linear forwards; }
@keyframes dlg-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@keyframes dlg-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-flicker {
0% { opacity: 1; }
25% { opacity: 0.15; }
45% { opacity: 0.8; }
65% { opacity: 0.1; }
80% { opacity: 0.45; }
100% { opacity: 0; }
}
/* system dialog — replaces browser alert/confirm/prompt */
#sys-dialog { min-width: 380px; max-width: 480px; }
#sys-dialog p { margin-bottom: calc(var(--u) * 2); font-size: 13px; white-space: pre-wrap; }
#sys-dialog input { width: 100%; }
dialog h2 { font-size: 18px; font-weight: 700; margin-bottom: calc(var(--u) * 2); cursor: move; }
dialog h3.settings-sub {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
margin: calc(var(--u) * 2) 0 var(--u); color: var(--muted);
}
dialog label { display: flex; flex-direction: column; gap: 4px; margin-bottom: calc(var(--u) * 1.5); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
dialog label input, dialog label select, dialog label textarea { color: var(--fg); font-size: 13px; }
dialog menu { display: flex; justify-content: flex-end; gap: var(--u); margin-top: calc(var(--u) * 2); }
dialog menu button:not(.accent) { border: var(--hair); }
.settings-note { margin-bottom: var(--u); }
#settings-voice { width: 100%; font-size: 12px; line-height: 1.6; margin-bottom: var(--u); }
.cover-pick { display: flex; gap: var(--u); align-items: stretch; }
#cover-thumb {
width: 128px; aspect-ratio: 16 / 9; flex: none;
border: var(--hair); background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
font-size: 10px; overflow: hidden;
}
#cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-controls { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; flex: 1; }
.cover-controls select { width: 100%; }
.cover-controls button { align-self: flex-start; border: var(--hair); }
.provider-row { display: flex; gap: 6px; margin-bottom: 6px; }
.settings-canvas-row { display: flex; gap: 6px; margin-bottom: 6px; }
.settings-canvas-row input { flex: 1; }
.settings-spend-row { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.settings-spend-row input { width: 110px; }
.settings-danger-row { display: flex; gap: 10px; margin-bottom: 6px; }
/* pipeline stage toggles */
#pipeline-list { max-height: 50vh; overflow-y: auto; }
.pipeline-dept {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
margin: var(--u) 0 4px; border-bottom: var(--hair); padding-bottom: 2px;
}
.pipeline-row {
display: flex; flex-direction: row; align-items: center; gap: var(--u);
padding: 3px 0; margin-bottom: 0; font-size: 13px; letter-spacing: 0;
color: var(--fg); cursor: pointer;
}
.pipeline-row input[type="checkbox"] { accent-color: var(--accent); }
.pipeline-row.locked { cursor: default; opacity: 0.55; }
.pipeline-row .t { flex: 1; }
.pipeline-row .note { font-size: 11px; }
/* the Run pipeline button while a run is live (Stop ■) */
button.danger { color: var(--danger); border-color: var(--danger); }
button.danger:hover { background: var(--danger); color: var(--surface); }
.provider-row input, .provider-row select { font-size: 11px; min-width: 0; }
.provider-row .p-name { width: 90px; }
.provider-row .p-key { flex: 1; }
#history-body { display: grid; grid-template-columns: 240px 1fr; gap: var(--gutter); max-height: 50vh; }
#history-list { overflow-y: auto; }
.history-item { padding: var(--u); cursor: pointer; border-bottom: var(--hair); transition: background var(--snap); }
.history-item:hover, .history-item.active { background: var(--surface-2); }
.history-item .when { display: block; font-size: 11px; }
.history-item .msg { font-size: 11px; color: var(--muted); }
#history-preview { overflow: auto; font-family: var(--mono); font-size: 11px; white-space: pre-wrap; background: var(--surface-2); padding: var(--u); }
/* ---------- login overlay (only when auth is enabled) ---------- */
#login-overlay {
position: fixed; inset: 0;
background: var(--bg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: calc(var(--u) * 2);
z-index: 100;
}
#login-overlay .wordmark { font-size: 40px; letter-spacing: -0.03em; }
#bunker-box { display: flex; flex-direction: column; gap: var(--u); width: min(420px, 80vw); }
#bunker-box #bunker-uri { font-family: var(--mono); font-size: 12px; text-align: center; }
#bunker-toggle { font-size: 12px; }
#logout-btn {
position: fixed; left: calc(var(--u) * 1.5); bottom: calc(var(--u) * 1.5);
z-index: 50; opacity: 0.45; font-size: 15px; line-height: 1;
background: transparent; border: none;
}
#logout-btn:hover { opacity: 1; }
/* flow meter — judge-pick vs filmmaker-pick agreement */
#flow-pane { padding: calc(var(--u) * 3) var(--margin); overflow-y: auto; }
/* skills pane — the crew's craft library, .lib-row grammar */
#skills-pane { padding: calc(var(--u) * 3) var(--margin); overflow-y: auto; }
#skills-pane .lib-row.off .name,
#skills-pane .lib-row.off .desc { color: var(--muted); }
#skills-pane .lib-row .badge { margin-left: auto; white-space: nowrap; }
#skill-body { max-height: 55vh; overflow-y: auto; margin-top: calc(var(--u) * 2); }
#skill-dialog { max-width: 680px; width: 680px; }
/* vibe dashboard — sections inside #flow-pane */
.vibe-h {
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 2px; color: var(--muted);
margin: calc(var(--u) * 4) 0 var(--u); border-bottom: var(--hair);
padding-bottom: calc(var(--u) * 0.5);
}
#flow-pane .vibe-h:first-child { margin-top: 0; }
.vibe-lead { display: flex; align-items: baseline; gap: calc(var(--u) * 2);
padding: calc(var(--u) * 1.5) 0; }
.vibe-lead .flow-rate { font-size: 24px; text-align: left; }
.pulse-strip { display: flex; gap: 2px; align-items: flex-end; height: 40px;
padding-bottom: 1px; border-bottom: var(--hair); max-width: 60ch; }
.pulse-strip .flow-tick { width: 8px; } /* height set inline, scaled to peak */
.vibe-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gutter); padding: calc(var(--u) * 1.5) 0; max-width: 60ch; }
.vibe-stat .flow-rate { display: block; text-align: left; font-size: 20px; }
.vibe-stat .lbl { font-size: 11px; color: var(--muted); }
.flow-head { margin-bottom: calc(var(--u) * 3); font-size: 12px; max-width: 60ch; }
.flow-row {
display: grid;
grid-template-columns: 140px 1fr 52px;
grid-template-areas: "dept spark rate" "meta meta meta";
align-items: center;
column-gap: calc(var(--u) * 2);
padding: calc(var(--u) * 1.5) 0;
border-top: var(--hair);
}
.flow-dept { grid-area: dept; font-size: 13px; }
.flow-spark { grid-area: spark; display: flex; gap: 2px; align-items: center; }
.flow-tick { width: 6px; height: 16px; background: var(--surface-2); }
.flow-tick.hit { background: var(--accent); }
.flow-tick.miss { background: var(--surface-2); opacity: 0.6; }
.flow-rate { grid-area: rate; font-family: var(--mono); font-size: 15px; color: var(--accent); text-align: right; }
.flow-meta { grid-area: meta; font-size: 11px; margin-top: calc(var(--u) * 0.5); }
/* vibes bento — fixed 12-col grid of door-tiles; no --danger in here, ever */
#vibe-grid { display: grid; grid-template-columns: repeat(12, 1fr);
grid-auto-flow: dense; gap: var(--gutter); }
.vibe-tile {
position: relative; border: var(--hair); background: var(--surface);
padding: calc(var(--u) * 2); display: flex; flex-direction: column;
gap: var(--u); min-height: 120px; cursor: pointer;
transition: border-color var(--snap); --card-tick: var(--accent);
}
.vibe-tile:hover { border-color: var(--grid); }
.vibe-tile.static { cursor: default; }
.vibe-tile .vibe-h { margin: 0; }
.vibe-tile.t8 { grid-column: span 8; }
.vibe-tile.t6 { grid-column: span 6; }
.vibe-tile.t4 { grid-column: span 4; }
.vibe-tile.t3 { grid-column: span 3; }
.vibe-big { font-family: var(--mono); font-size: clamp(34px, 4vw, 56px);
line-height: 1; color: var(--accent); }
.vibe-tile .pulse-strip, .vibe-tile .vibe-stats { max-width: none; }
.vibe-tile .pulse-strip { height: 56px; }
.vibe-tile .pulse-strip .flow-tick { flex: 1; max-width: 12px; }
.vibe-tile .pulse-strip.mini { height: 24px; border-bottom: none; }
.vibe-tile .vibe-stats { grid-template-columns: 1fr; gap: var(--u); padding: 0; }
.vibe-tile .flow-row:first-of-type { border-top: none; }
.vibe-prog { height: 3px; background: var(--surface-2); }
.vibe-prog > i { display: block; height: 100%; background: var(--accent); }
.vibe-await { color: var(--gold); font-family: var(--mono); font-size: 11px;
white-space: nowrap; }
.vibe-pipe-row { display: grid; grid-template-columns: 1fr auto;
align-items: center; column-gap: var(--u); row-gap: 3px; padding: 3px 0; }
.vibe-pipe-row .vibe-prog { grid-column: 1 / -1; }
.vibe-pipe-row .lbl { font-size: 11px; }
.vibe-proj-title { font-family: var(--display); font-size: 15px; }
.vibe-depth { max-height: 0; opacity: 0; overflow: hidden;
font-size: 11px; color: var(--muted);
transition: max-height var(--ease), opacity var(--ease); }
.vibe-tile:hover .vibe-depth { max-height: 3em; opacity: 1; }
.vibe-tile .flow-meta { opacity: 0; transition: opacity var(--ease); }
.vibe-tile:hover .flow-meta { opacity: 1; }
.vibe-tile .spacer { flex: 1; }
@media (max-width: 1280px) {
.vibe-tile.t8 { grid-column: span 12; }
.vibe-tile.t6, .vibe-tile.t4, .vibe-tile.t3 { grid-column: span 6; }
}
@media (max-width: 620px) {
.vibe-tile, .vibe-tile.t8, .vibe-tile.t6,
.vibe-tile.t4, .vibe-tile.t3 { grid-column: span 12; }
}
/* anticipation — taste-flag strip after a draft lands */
#taste-flags {
margin: 0 var(--margin) calc(var(--u) * 2);
border: 1px solid var(--accent);
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
font-size: 12px;
}
#taste-flags .tf-head {
display: flex; align-items: center; gap: var(--u);
font-weight: 600; margin-bottom: var(--u);
}
#taste-flags .tf-head.dim { font-weight: 400; }
#taste-flags .tf-dismiss { margin-left: auto; font-size: 13px; line-height: 1; }
#taste-flags .tf-list { margin: 0; padding-left: calc(var(--u) * 2.5); }
#taste-flags .tf-list li { margin: calc(var(--u) * 0.5) 0; line-height: 1.5; }
/* -- people layer: member mode + People/Alpha panels -- */
#feedback-btn, #mysettings-btn { display: none; }
body.member-mode #feedback-btn, body.member-mode #mysettings-btn {
display: block; position: fixed; left: calc(var(--u) * 1.5);
z-index: 50; opacity: 0.55; font-size: 11px; line-height: 1;
background: transparent; border: none; white-space: nowrap;
}
body.member-mode #mysettings-btn { bottom: calc(var(--u) * 5.5); }
body.member-mode #feedback-btn { bottom: calc(var(--u) * 9); }
body.member-mode #mysettings-btn:hover,
body.member-mode #feedback-btn:hover { opacity: 1; }
/* admin chrome disappears for members — the server enforces; this is manners */
body.member-mode #settings-btn,
body.member-mode #new-project-btn,
body.member-mode #empty-new-btn,
body.member-mode #studio-btn,
body.member-mode #project-settings-btn,
body.member-mode #approve-btn,
body.member-mode #canvas-open-btn,
body.member-mode #chat-open-btn,
body.member-mode #history-restore,
body.member-mode .design-canvas,
body.member-mode .rv-lock,
body.member-mode .cue-approve,
body.member-mode .cue-gen,
body.member-mode #reel-render,
body.member-mode #asset-pane .upload-label,
body.member-mode #asset-category,
body.member-mode #asset-generate,
body.member-mode #asset-generate-audio,
body.member-mode #asset-organize,
body.member-mode .folder-new,
body.member-mode .asset-card .a-actions .move { display: none !important; }
/* the project chat is the filmmaker's dialogue with the studio */
body.member-mode #view-project { grid-template-columns: var(--rail-w, 232px) minmax(0, 1fr) 0; }
body.member-mode #chat-panel { display: none; }
.by-chip {
font-size: 9px; padding: 1px 6px; margin-left: 4px;
border: 1px solid var(--border); border-radius: 8px;
opacity: 0.75; white-space: nowrap; align-self: center;
}
.people-row {
display: flex; gap: 8px; align-items: center;
padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px;
}
.people-row .pp-name { font-weight: 600; white-space: nowrap; }
.people-row .pp-npub, .people-row .pp-scope, .people-row .pp-exp {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.people-add-row { display: flex; gap: 6px; margin: 8px 0; }
.people-add-row input { flex: 1; min-width: 0; font-size: 12px; }
.people-add-row select { max-width: 180px; font-size: 12px; }
.alpha-list {
max-height: 180px; overflow-y: auto; font-size: 11px;
border: 1px solid var(--border); padding: 6px 8px;
}
.alpha-row {
font-family: var(--mono); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; line-height: 1.6;
}
.alpha-feedback-row { padding: 4px 0; border-bottom: 1px solid var(--border); }
.alpha-feedback-row .afr-text { white-space: pre-wrap; }
#proj-journal-list {
max-height: 200px; overflow-y: auto;
border: 1px solid var(--border); padding: 2px 8px; margin-bottom: 8px;
}
.journal-row {
display: flex; gap: 8px; align-items: baseline;
padding: 3px 0; border-bottom: 1px solid var(--border); font-size: 12px;
}
.journal-row:last-child { border-bottom: none; }
.journal-row .jr-when { font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.journal-row .jr-who { font-weight: 600; white-space: nowrap; }
.journal-row .jr-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-note-row { display: flex; gap: 6px; margin: 8px 0; align-items: flex-end; }
.journal-note-row textarea { flex: 1; min-width: 0; font-size: 12px; resize: vertical; }
.journal-export-row { display: flex; gap: 6px; margin: 8px 0; align-items: center; }
.journal-export-row #journal-verify-chip { font-size: 11px; font-family: var(--mono); }
.journal-export-row .journal-bad { color: var(--danger, #c0392b); opacity: 1; }
#my-keys .my-slot-name { width: 160px; font-size: 12px; align-self: center; }
#my-storage-s3 label, #my-storage-blossom label { display: block; margin: 6px 0; }
/* ---------- spotlight — the ⌘K jump-anywhere palette ---------- */
#spotlight-dialog {
margin: 16vh auto auto;
width: min(560px, 92vw);
min-width: 0;
padding: 0;
}
#spotlight-input {
width: 100%;
box-sizing: border-box;
background: transparent;
color: var(--fg);
border: 0;
border-bottom: var(--hair);
outline: none;
font-family: var(--mono);
font-size: 13px;
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
}
#spotlight-list {
max-height: 44vh;
overflow-y: auto;
padding: calc(var(--u) * 0.5) 0;
}
#spotlight-list .slash-item .desc {
margin-left: auto;
flex-shrink: 0;
max-width: 45%;
}
/* ── LoRA board — training surface: 16:9 tiles, lower-third scrim, live bar ── */
.lora-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: calc(var(--u) * 2); padding: calc(var(--u) * 2);
}
.lora-tile {
position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
border: var(--hair); background: var(--surface-2);
}
.lora-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lora-tile:hover img { transform: scale(1.02); transition: transform 0.25s ease; }
.lora-tile.db-kbfocus { outline: 1px solid var(--accent); outline-offset: 2px; }
.lora-tile.lora-noart::before {
content: "no images yet"; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-family: var(--mono); font-size: 11px;
}
.lora-scrim {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; align-items: baseline; gap: var(--u);
padding: calc(var(--u) * 3) calc(var(--u) * 1.5) var(--u);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
color: #fff;
}
.lora-scrim .lora-name { font-family: var(--display); font-size: 14px; font-weight: 600; }
.lora-scrim .lora-kind {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
border: 1px solid rgba(255, 255, 255, 0.5); padding: 0 4px;
}
.lora-trigger { font-family: var(--mono); font-size: 11px; }
.lora-scrim .lora-trigger { color: var(--gold); }
.lora-scrim .lora-state { margin-left: auto; font-size: 10px; opacity: 0.85; }
.lora-tile.lora-published .lora-scrim .lora-state { color: var(--gold); }
.lora-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.25); }
.lora-progress i { display: block; height: 100%; background: var(--gold); transition: width 1s linear; }
/* detail */
.lora-detail { padding: calc(var(--u) * 2); display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.lora-dhead { display: flex; align-items: center; gap: var(--u); }
.lora-dhead .lora-dname { font-family: var(--display); font-size: 16px; font-weight: 600; }
.lora-dhead .lora-kind {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
border: var(--hair); padding: 0 4px; color: var(--muted);
}
.lora-dhead .lora-trigger { color: var(--accent); }
.lora-trigger.lora-editable { cursor: pointer; border-bottom: 1px dashed var(--border); }
.lora-note { font-size: 12px; }
.lora-strip-head {
display: flex; align-items: baseline; gap: var(--u);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
border-bottom: var(--hair); padding-bottom: 4px; margin-bottom: var(--u);
}
.lora-strip { display: flex; gap: var(--u); overflow-x: auto; padding-bottom: 4px; }
.lora-ds-tile {
flex: 0 0 96px; width: 96px; aspect-ratio: 1; overflow: hidden; cursor: pointer;
border: var(--hair); background: var(--surface-2); position: relative;
}
.lora-ds-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lora-ds-tile.uncaptioned::after {
content: "· · ·"; position: absolute; right: 3px; bottom: 0;
color: #fff; text-shadow: 0 0 3px #000; font-family: var(--mono); font-size: 10px;
}
.lora-ds-tile.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.lora-ds-add {
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 12px; border-style: dashed;
}
.lora-ds-add:hover { color: var(--accent); border-color: var(--accent); }
.lora-caption-row { display: flex; gap: var(--u); margin-top: var(--u); align-items: flex-start; }
.lora-cap-thumb { width: 72px; height: 72px; object-fit: cover; border: var(--hair); }
.lora-cap-text { flex: 1; font-family: var(--mono); font-size: 11px; resize: vertical; }
.lora-cap-btns { display: flex; flex-direction: column; gap: var(--u); }
.lora-runline { display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
.lora-runline .lora-progress { position: static; flex: 1; height: 4px; background: var(--surface-2); }
.lora-eta { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.lora-error { color: var(--danger); font-family: var(--mono); font-size: 11px; white-space: pre-wrap; }
/* checkpoint comparison — columns fill left→right while the Spark cooks */
.lora-compare-wrap { overflow-x: auto; }
.lora-compare { display: grid; gap: calc(var(--u) * 1.5); align-items: start; }
.lora-cmp-col { border: var(--hair); background: var(--surface); }
.lora-cmp-col.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.lora-cmp-head {
display: flex; align-items: baseline; justify-content: space-between;
padding: var(--u); border-bottom: var(--hair);
font-family: var(--mono); font-size: 11px; cursor: pointer;
}
.lora-cmp-head:hover { background: var(--surface-2); }
.lora-cmp-col.picked .lora-cmp-head { background: var(--accent); color: var(--accent-fg); }
.lora-cmp-col.picked .lora-cmp-head .dim { color: var(--accent-fg); }
.lora-cmp-tile { aspect-ratio: 1; overflow: hidden; border-top: var(--hair); }
.lora-cmp-tile:first-of-type { border-top: none; }
.lora-cmp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
/* picker dialog */
.lora-picker { width: min(860px, 92vw); max-height: 80vh; display: flex; flex-direction: column; }
.lora-picker[open] { display: flex; }
.lora-pick-head { display: flex; align-items: baseline; gap: calc(var(--u) * 1.5); margin-bottom: var(--u); }
.lora-pick-filters { display: flex; gap: 4px; }
.lora-pick-filters button.on { background: var(--accent); color: var(--accent-fg); }
.lora-pick-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: var(--u); overflow-y: auto; flex: 1; padding: 2px;
}
.lora-pick-foot { display: flex; justify-content: flex-end; gap: var(--u); margin-top: var(--u); }
.lora-log { max-width: 520px; max-height: 300px; overflow: auto; font-size: 10px; white-space: pre-wrap; }
/* LoRA dataset drop zone + hints */
.lora-dataset { padding: 2px; }
.lora-dataset.drag-over { outline: 2px dashed var(--accent); outline-offset: 4px; }
.lora-ds-hint { margin-left: auto; font-size: 9px; text-transform: none; letter-spacing: 0; }
.lora-strip-empty {
flex: 1; border: 1px dashed var(--border); padding: calc(var(--u) * 3);
font-size: 12px; line-height: 1.5; max-width: 520px;
}
/* LoRA upload progress — real per-file bar under the strip head */
.lora-upload-line { display: flex; align-items: center; gap: calc(var(--u) * 1.5); margin: var(--u) 0; }
.lora-upload-line .lora-progress { position: static; flex: 1; height: 4px; background: var(--surface-2); }
.lora-upload-label { font-family: var(--mono); font-size: 10px; white-space: nowrap; }