/* ============================================================================
   board.css — THE CANVAS, IN DAYLIGHT.

   Loaded ONLY by views/layouts/board.hbs, after tailwind.css. Two jobs:

   1. RE-POINT THE TOKENS. Tailwind emits every theme variable at `:root`; the whole app's
      utilities (bg-panel, text-mut, border-edge) and the whole UI kit (modal/forms/toast/tooltip)
      read them. Redefining the same names on `html.bd` — specificity (0,1,1), which beats
      `:root`'s (0,1,0) regardless of source order — turns the entire component library light
      without touching one line of its markup or one class name. That is what "not re-inventing
      the wheel" means here.

   2. THE BOARD'S OWN COMPONENTS. Canvas, nodes, edges, rail, inspector, menus.

   Look: Plot Party — near-white surfaces, dotted grid, warm orange accent, soft grey hairlines.
   House rules still apply: no emoji, SVG icons only, motion on everything.
   ============================================================================ */

html.bd {
  /* ---- surfaces ---- */
  --color-ink: #f7f7f5;           /* page ground */
  --color-ink2: #fbfbfa;
  --color-panel: #ffffff;         /* cards, nodes, sidebars */
  --color-panel2: #f5f5f3;        /* inputs, raised */
  --color-panel3: #ebebe8;        /* hover */
  --color-edge: #e5e5e1;          /* hairlines */
  --color-edge2: #d2d2cc;         /* focus / hover borders */

  /* ---- type ---- */
  --color-txt: #1b1b19;
  --color-mut: #6a6a64;
  --color-dim: #9a9a93;

  /* ---- accents ---- */
  --color-accent: #ef6a2e;        /* Plot Party orange — the action colour */
  --color-accent-hi: #ff8354;
  --color-accent-dk: #d4551d;
  --color-accent2: #7c5cff;       /* violet stays the "magic"/AI colour */
  --color-gold: #b07d18;
  --color-ok: #16a34a;
  --color-warn: #d97706;
  --color-info: #2563eb;

  /* ---- UI-kit surfaces (see app.css for why these are tokens) ---- */
  --color-float: #2b2b28;         /* tooltips stay DARK on light — they read better, and every
                                     product in this space does it that way */
  --color-float2: #232320;
  --color-toast: #ffffff;
  --color-toast2: #f7f7f5;
  --color-track: #dedeD9;         /* toggle track, off */
  --color-track2: #d3d3cd;
  --color-knob: #ffffff;
  --color-knob2: #f0f0ec;
  --color-thumb2: #eeeeea;
  --color-ring: #ffffff;

  /* light-weight shadows — the dark theme's 55%-black drops look like soot on white */
  --sh-float: 0 8px 24px rgba(28, 28, 24, .18);
  --sh-toast: 0 12px 36px rgba(28, 28, 24, .14);

  /* board geometry */
  --bd-nav: 210px;
  --bd-rail: 232px;
  --bd-head: 54px;

  color-scheme: light;
}

/* the page ground is the light ink (app.css paints var(--color-ink) too; kept as the board's own rule) */
html.bd body {
  background: var(--color-ink) !important;
  color: var(--color-txt);
}
html.bd body.bd-board-page { overflow: hidden; } /* the canvas scrolls, the document never does */
html.bd main { animation: none; }  /* the page-in slide fights a pan/zoom surface */

/* The toast/tooltip inner highlight is a white 1px line — invisible-to-ugly on white. */
html.bd .sds-toast, html.bd .sds-tooltip { box-shadow: var(--sh-toast); }
html.bd .sds-tooltip { color: #f6f6f4; border-color: #3a3a35; box-shadow: var(--sh-float); }
html.bd .sds-modal { box-shadow: 0 24px 70px rgba(28, 28, 24, .22); }
html.bd .sds-modal-overlay { background: rgba(40, 40, 36, .34); }
html.bd .card { box-shadow: 0 1px 2px rgba(28,28,24,.05), 0 6px 18px rgba(28,28,24,.05); }
html.bd .btn { box-shadow: 0 1px 1px rgba(28,28,24,.05); }
html.bd .btn-primary, html.bd .btn-magic { color: #fff; }

/* The retained studio-wide utilities use the same daylight shell without inheriting the
   board canvas's fixed-height/overflow behavior. */
.bd-utility-shell {
  display: grid;
  grid-template-columns: var(--bd-nav) minmax(0, 1fr);
  min-height: 100vh;
}
.bd-utility-nav { position: sticky; top: 0; height: 100vh; }
.bd-utility-main { min-width: 0; }
/* Single-column card lists (tests, remakes, jobs) are CSS grids whose one implicit column was sized
   by its widest unbroken line: a long show title pushed every card past the page edge. */
.bd-utility-content .grid:not([class*="grid-cols-"]):not([style*="grid-template-columns"]) { grid-template-columns: minmax(0, 1fr); }
.bd-utility-content .grid > * { min-width: 0; }
.bd-utility-content {
  width: 100%; max-width: 1600px; margin: 0 auto; padding: 24px;
}

/* ============================================================================
   SHELL — nav | canvas | rail, with the header spanning the middle column
   ============================================================================ */
.bd-shell {
  display: grid;
  grid-template-columns: var(--bd-nav) minmax(0, 1fr) var(--bd-rail);
  height: 100vh;
  overflow: hidden;
}
.bd-shell.rail-closed { grid-template-columns: var(--bd-nav) minmax(0, 1fr) 0; }

/* ---- left nav ---- */
.bd-nav {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--color-panel);
  border-right: 1px solid var(--color-edge);
}
.bd-brand {
  display: flex; align-items: center; gap: 9px;
  height: var(--bd-head); padding: 0 16px; flex: none;
  border-bottom: 1px solid var(--color-edge);
  font-weight: 650; font-size: 14.5px; letter-spacing: -.01em;
  font-family: var(--font-display);
}
.bd-brand .mark { color: var(--color-accent); display: grid; place-items: center; }
.bd-nav-scroll { flex: 1; overflow-y: auto; padding: 10px 9px; }
.bd-nav-sec {
  padding: 12px 8px 5px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-dim);
}
.bd-nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border-radius: 9px; margin-bottom: 1px;
  font-size: 13px; color: var(--color-mut); cursor: pointer;
  border: 1px solid transparent; text-align: left;
  transition: background-color .14s var(--ease-smooth), color .14s var(--ease-smooth);
}
.bd-nav-item:hover { background: var(--color-panel2); color: var(--color-txt); }
.bd-nav-item.active {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent-dk); font-weight: 600;
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.bd-nav-item .ic { color: var(--color-dim); flex: none; }
.bd-nav-item.active .ic, .bd-nav-item:hover .ic { color: currentColor; }
.bd-nav-foot { padding: 11px 13px; border-top: 1px solid var(--color-edge); font-size: 11px; color: var(--color-dim); }

/* ---- centre column ---- */
.bd-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bd-head {
  height: var(--bd-head); flex: none;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-edge);
  z-index: 20;
}

/* the project switcher — the dropdown that opens a modal */
.bd-switch {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px 6px 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--color-edge); background: var(--color-panel2);
  max-width: 340px; min-width: 0;
  transition: border-color .15s var(--ease-smooth), background-color .15s var(--ease-smooth);
}
.bd-switch:hover { border-color: var(--color-edge2); background: var(--color-panel3); }
.bd-switch .cover {
  width: 24px; height: 30px; border-radius: 7px; flex: none;
  background: var(--color-panel3); border: 1px solid var(--color-edge);
  display: grid; place-items: center; color: var(--color-dim);
}
.bd-switch .txt { min-width: 0; display: flex; flex-direction: column; }
.bd-switch .t {
  display: block;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-switch .s { display: block; font-size: 10.5px; color: var(--color-dim); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-switch .caret { color: var(--color-dim); flex: none; }

.bd-crumb {
  font-size: 12.5px; color: var(--color-mut); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "Project" in the crumb is a real button now (it was a clickable span: no keyboard, no focus) */
.bd-crumb-up { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.bd-crumb-up:hover { color: var(--color-txt); }
.bd-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.bd-spend {
  font-size: 11.5px; color: var(--color-mut); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 8px; background: var(--color-panel2);
  border: 1px solid var(--color-edge);
}
.bd-jobs {
  display: none; align-items: center; gap: 7px; cursor: pointer;
  font-size: 11.5px; color: var(--color-accent-dk); font-weight: 600;
  padding: 5px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
}
.bd-jobs.on { display: inline-flex; }

/* ============================================================================
   CANVAS — the dotted infinite surface
   ============================================================================ */
.bd-canvas {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background-color: var(--color-ink);
  background-image: radial-gradient(circle at 1px 1px, #d9d9d3 1px, transparent 0);
  background-size: 22px 22px;
  background-position: 0 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.bd-canvas.panning { cursor: grabbing; }
.bd-canvas.dragging { cursor: default; }

/* the transformed world — everything is positioned in WORLD coordinates and this one element
   carries the pan/zoom matrix, so a repaint of a node never disturbs the viewport */
.bd-world {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  /* will-change is set by canvas.js only while panning/zooming (see apply()) */
}
.bd-world.animating { transition: transform .38s var(--ease-smooth); }

/* connectors live UNDER the nodes in their own SVG plane */
.bd-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 1; }
.bd-edge {
  fill: none;
  stroke: #c8c8c1;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: stroke .18s var(--ease-smooth), stroke-width .18s var(--ease-smooth);
}
.bd-edge.hot { stroke: var(--color-accent); stroke-width: 2.2; }
.bd-edge.pending { stroke-dasharray: 5 5; stroke: #cfcfc8; animation: bd-flow 1s linear infinite; }
@keyframes bd-flow { to { stroke-dashoffset: -10; } }
.bd-edge-dot { fill: #c8c8c1; }

.bd-layer { position: absolute; inset: 0; z-index: 2; }

/* ============================================================================
   NODE — the card on the canvas
   ============================================================================ */
.bd-node {
  position: absolute;
  width: 232px;
  background: var(--color-panel);
  border: 1px solid var(--color-edge);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28,28,24,.05), 0 4px 14px rgba(28,28,24,.06);
  cursor: grab;
  transition: box-shadow .18s var(--ease-smooth), border-color .18s var(--ease-smooth),
              transform .12s var(--ease-smooth);
}
.bd-node:hover { border-color: var(--color-edge2); box-shadow: 0 2px 4px rgba(28,28,24,.06), 0 10px 26px rgba(28,28,24,.10); }
.bd-node.selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent), 0 10px 26px rgba(28,28,24,.12);
}
.bd-node.dragging { cursor: grabbing; box-shadow: 0 18px 40px rgba(28,28,24,.20); z-index: 30; transition: none; }
.bd-node.busy { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.bd-node.wide { width: 300px; }
.bd-node.gallery { width: 780px; }
.bd-node.narrow { width: 190px; }

.bd-node-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 8px 11px;
  border-bottom: 1px solid var(--color-edge);
}
.bd-node.no-body .bd-node-head { border-bottom: 0; }
.bd-node-kind {
  font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-dim); display: flex; align-items: center; gap: 5px; min-width: 0;
}
.bd-node-kind .ic { color: var(--color-accent); flex: none; }
.bd-node-menu {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; color: var(--color-dim); cursor: pointer;
  border: 1px solid transparent; background: transparent;
}
.bd-node-menu:hover { background: var(--color-panel2); color: var(--color-txt); border-color: var(--color-edge); }

.bd-node-body { padding: 10px 11px 11px; }
.bd-node-title {
  font-size: 13.5px; font-weight: 640; line-height: 1.3; color: var(--color-txt);
  letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bd-node-sub {
  font-size: 11.5px; color: var(--color-mut); line-height: 1.45; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bd-node-foot {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 11px; border-top: 1px solid var(--color-edge);
  font-size: 11px; color: var(--color-mut);
}
.bd-node-metric { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 100%; min-width: 0; }
.bd-node-metric svg { flex: none; }

/* media inside a node — panel thumbnails, plates, the finished clip */
.bd-media {
  position: relative; display: block; width: 100%;
  background: var(--color-panel3);
  border-bottom: 1px solid var(--color-edge);
  overflow: hidden;
}
.bd-node-head + .bd-media { border-top: 1px solid transparent; }
.bd-media img, .bd-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-media.ar-vert { aspect-ratio: 9 / 16; }
.bd-media.ar-wide { aspect-ratio: 16 / 9; }
.bd-media.ar-sq { aspect-ratio: 1; }

.bd-media .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-dim); }
/* The play affordance lives INSIDE the frame (owner's spec): a real button, centred, that starts
   the clip in place rather than opening anything. */
.bd-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(24, 24, 20, .58); color: #fff; border: 1px solid rgba(255,255,255,.28);
  cursor: pointer; backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  transition: transform .16s var(--ease-spring), background-color .16s var(--ease-smooth), opacity .16s var(--ease-smooth);
}
.bd-play:hover { background: rgba(24, 24, 20, .78); transform: translate(-50%, -50%) scale(1.08); }
.bd-play svg { margin-left: 2px; }                 /* optical centring of a triangle */
.bd-media.playing .bd-play { opacity: 0; pointer-events: none; }
/* native controls only while it is actually playing — a control bar on a still frame is clutter */
.bd-media video::-webkit-media-controls { opacity: 0; transition: opacity .2s; }
.bd-media.playing video::-webkit-media-controls, .bd-media video:hover::-webkit-media-controls { opacity: 1; }
.bd-media.playing { cursor: default; }

/* "Retaking…" — the card keeps its existing clip, playable, under a working overlay */
.bd-working {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(2px);
  color: var(--color-accent-dk); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.bd-working .spin { color: var(--color-accent); display: grid; place-items: center; }
.bd-media .stamp {
  position: absolute; left: 7px; top: 7px;
  padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 700;
  background: rgba(24,24,20,.62); color: #fff; letter-spacing: .04em;
}

/* ---- chips ---- */
.bd-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
  background: var(--color-panel3); color: var(--color-mut);
  border: 1px solid var(--color-edge);
  white-space: nowrap;
  /* never wider than the card it sits on — a 100-character genre once ran 1,200px off the pitch */
  max-width: 100%; min-width: 0; overflow: hidden;
}
/* the label is .bd-chip-lb, not .lb: lightbox.css owns .lb (a fixed full-screen overlay) and hid every chip label */
.bd-chip .bd-chip-lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-chip .dot, .bd-chip svg { flex: none; }
.bd-chip.ok { background: color-mix(in srgb, var(--color-ok) 12%, transparent); color: #15803d; border-color: color-mix(in srgb, var(--color-ok) 26%, transparent); }
.bd-chip.warn { background: color-mix(in srgb, var(--color-warn) 14%, transparent); color: #b45309; border-color: color-mix(in srgb, var(--color-warn) 30%, transparent); }
.bd-chip.err { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-dk); border-color: color-mix(in srgb, var(--color-accent) 28%, transparent); }
.bd-chip.info { background: color-mix(in srgb, var(--color-info) 11%, transparent); color: #1d4ed8; border-color: color-mix(in srgb, var(--color-info) 25%, transparent); }
.bd-chip.live { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-dk); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.bd-chip.live .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent);
  animation: bd-pulse 1.5s var(--ease-smooth) infinite;
}
@keyframes bd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .28; } }

/* ---- pills: the members inside a CAST / PLACES node ---- */
.bd-pills { display: flex; flex-direction: column; gap: 5px; }
.bd-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 7px 4px 4px; border-radius: 9px;
  background: var(--color-panel2); border: 1px solid var(--color-edge);
  cursor: pointer; min-width: 0;
  transition: background-color .14s var(--ease-smooth), border-color .14s var(--ease-smooth);
}
.bd-pill:hover { background: var(--color-panel3); border-color: var(--color-edge2); }
.bd-pill .av {
  width: 26px; height: 26px; border-radius: 7px; flex: none; object-fit: cover;
  object-position: 50% 20%;
  background: var(--color-panel3); border: 1px solid var(--color-edge);
  display: grid; place-items: center; color: var(--color-dim);
}
.bd-pill .nm {
  font-size: 12px; font-weight: 560; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-pill .rl { font-size: 10.5px; color: var(--color-dim); margin-left: auto; flex: none; }
.bd-pill-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px; border-radius: 9px; cursor: pointer;
  border: 1px dashed var(--color-edge2); color: var(--color-mut);
  font-size: 11.5px; font-weight: 600; background: transparent;
}
.bd-pill-add:hover { border-color: var(--color-accent); color: var(--color-accent-dk); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }

/* ---- tiles: the member cards inside a CHARACTERS / SETTINGS group node.
       This is the shape from the reference product — an image-forward card, two per row, with
       the readiness flags printed on the card rather than hidden behind a click. ---- */
.bd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
/* Compact wide nodes remain 3-up. Full cast/set catalogues use a real gallery: imported shows can
   carry 50+ production presentations and sets, so stacking singleton identities vertically is
   unusable even though the underlying identity grouping is correct. */
.bd-node.wide .bd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bd-node.gallery .bd-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bd-identity-groups { display: grid; gap: 9px; }
.bd-identity-group { min-width: 0; }
.bd-identity-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 1px 5px; }
.bd-identity-label span { font-size: 10.5px; font-weight: 700; color: var(--color-txt); }
.bd-identity-label small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; color: var(--color-dim); }
.bd-node.gallery .bd-identity-groups {
  grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 8px;
}
.bd-node.gallery .bd-identity-group.single .bd-identity-label { display: none; }
.bd-node.gallery .bd-identity-group.single .bd-tiles { grid-template-columns: minmax(0, 1fr); }
.bd-node.gallery .bd-identity-group.multi {
  grid-column: span var(--identity-span);
  padding: 7px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-info) 38%, var(--color-edge));
  background: color-mix(in srgb, var(--color-info) 7%, var(--color-panel2));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-info) 58%, transparent);
}
.bd-node.gallery .bd-identity-group.multi .bd-identity-label { margin: 0 2px 7px 4px; }
.bd-node.gallery .bd-identity-group.multi .bd-identity-label span { color: #1d4ed8; }
.bd-node.gallery .bd-identity-group.multi .bd-tiles {
  grid-template-columns: repeat(var(--identity-span), minmax(0, 1fr));
}
.bd-tile {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 5px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--color-panel2); border: 1px solid var(--color-edge);
  transition: border-color .14s var(--ease-smooth), background-color .14s var(--ease-smooth), transform .14s var(--ease-smooth);
}
.bd-tile:hover { border-color: var(--color-edge2); background: var(--color-panel3); transform: translateY(-1px); }
.bd-tile.busy { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.bd-tile .ph {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 7px; overflow: hidden; background: var(--color-panel3); color: var(--color-dim);
}
.bd-tile .ph.wide { aspect-ratio: 16 / 9; }
.bd-tile .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.bd-tile .busy-dot {
  position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 999px;
  background: var(--color-accent); box-shadow: 0 0 0 2px rgba(255,255,255,.85);
  animation: bd-pulse 1.4s infinite;
}
.bd-tile .nm { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tile .sb { font-size: 10px; color: var(--color-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tile .fl { display: flex; gap: 3px; flex-wrap: wrap; }
.bd-tile .fl .bd-chip { font-size: 8.5px; padding: 1px 5px; }

/* ---- the button row on a card face ----
   Buttons wrap rather than shrink: a 232px card cannot hold four controls on one line, and
   squeezing them produces unreadable 6px labels instead of an honest second row. */
.bd-node-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.bd-cardbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 8px; cursor: pointer;
  font-size: 11px; font-weight: 600; line-height: 1;
  background: var(--color-panel2); border: 1px solid var(--color-edge); color: var(--color-txt);
  transition: background-color .14s var(--ease-smooth), border-color .14s var(--ease-smooth), transform .14s var(--ease-smooth);
}
.bd-cardbtn:hover { background: var(--color-panel3); border-color: var(--color-edge2); transform: translateY(-1px); }
.bd-cardbtn:active { transform: translateY(0); }
.bd-cardbtn.primary {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 34%, transparent);
  color: var(--color-accent-dk);
}
.bd-cardbtn.primary:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.bd-cardbtn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.bd-cardbtn svg { flex: none; }

/* ---- action node: the button that lives on the canvas ---- */
.bd-node.act-node { width: 208px; }
.bd-action {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 12px 13px; border-radius: 13px; cursor: pointer;
  background: var(--color-panel); border: 1px dashed var(--color-edge2);
  text-align: left; color: var(--color-txt);
  transition: border-color .16s var(--ease-smooth), background-color .16s var(--ease-smooth), transform .16s var(--ease-smooth);
}
.bd-action:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.bd-action .ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-dk);
}
.bd-action .t { display: block; font-size: 12.5px; font-weight: 620; line-height: 1.25; }
.bd-action .s { display: block; font-size: 10.5px; color: var(--color-dim); line-height: 1.3; margin-top: 1px; }
.bd-action.primary { border-style: solid; border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.bd-action:disabled, .bd-action.disabled { opacity: .45; cursor: not-allowed; }
.bd-action:disabled:hover, .bd-action.disabled:hover { border-color: var(--color-edge2); background: var(--color-panel); }

/* ---- progress bar inside a node (season plan, panel batches) ---- */
.bd-bar { height: 4px; border-radius: 999px; background: var(--color-panel3); overflow: hidden; margin-top: 7px; }
.bd-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .4s var(--ease-smooth); }

/* ---- group frame: a labelled region behind related nodes ---- */
.bd-group {
  position: absolute; border-radius: 20px;
  border: 1px dashed #dcdcd6;
  background: rgba(255,255,255,.42);
  pointer-events: none;
}
.bd-group .lbl {
  position: absolute; top: -9px; left: 16px; padding: 1px 8px;
  background: var(--color-ink); border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-dim);
}

/* ============================================================================
   FLOATING CANVAS CONTROLS
   ============================================================================ */
.bd-controls {
  /* bottom RIGHT: the work tray sits bottom left and hid the zoom and fit buttons whenever something was running */
  position: absolute; right: 14px; bottom: 14px; z-index: 12;
  display: flex; align-items: center; gap: 5px; padding: 5px;
  background: var(--color-panel); border: 1px solid var(--color-edge);
  border-radius: 12px; box-shadow: 0 4px 16px rgba(28,28,24,.09);
}
.bd-ctl {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: var(--color-mut); cursor: pointer; background: transparent; border: 0;
}
.bd-ctl:hover { background: var(--color-panel2); color: var(--color-txt); }
.bd-zoom-val { font-size: 11px; color: var(--color-mut); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.bd-controls .sep { width: 1px; height: 18px; background: var(--color-edge); }

.bd-toolbar {
  position: absolute; left: 50%; transform: translateX(-50%); top: 12px; z-index: 12;
  display: flex; align-items: center; gap: 6px; padding: 5px 6px;
  background: var(--color-panel); border: 1px solid var(--color-edge);
  border-radius: 12px; box-shadow: 0 4px 16px rgba(28,28,24,.09);
}
/* nothing ever fills the toolbar yet; empty, it drew a stray white pill under the header */
.bd-toolbar:empty { display: none; }

/* ============================================================================
   RIGHT RAIL — episodes as a Photoshop layer stack
   ============================================================================ */
.bd-rail {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--color-panel);
  border-left: 1px solid var(--color-edge);
}
.bd-rail-head {
  height: var(--bd-head); flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-bottom: 1px solid var(--color-edge);
  font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-dim);
}
.bd-rail-scroll { flex: 1; overflow-y: auto; padding: 9px; }
.bd-tab {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; margin-bottom: 5px; border-radius: 10px; cursor: pointer;
  background: var(--color-panel2); border: 1px solid var(--color-edge);
  text-align: left; min-width: 0;
  transition: border-color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), transform .15s var(--ease-smooth);
}
.bd-tab:hover { border-color: var(--color-edge2); transform: translateX(-1px); }
.bd-tab.active {
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
}
.bd-tab.root { background: var(--color-panel3); }
.bd-tab.root.active { background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.bd-tab .thumb {
  width: 30px; height: 40px; border-radius: 6px; flex: none;
  background: var(--color-panel3); border: 1px solid var(--color-edge);
  display: grid; place-items: center; color: var(--color-dim);
}
/* A FIXED FRAME CROPS ITS PICTURE (the switcher's show cover, the rail's episode thumbs). A grid item's height:100%
   does not resolve against the grid's own height, so a portrait thumb kept its aspect and stuck out below the box
   (owner 2026-10-15). The picture is laid over the frame instead, so it can only ever fill it. */
.bd-switch .cover, .bd-tab .thumb { position: relative; overflow: hidden; }
.bd-switch .cover > img, .bd-tab .thumb > img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 22%;
}
.bd-tab .txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.bd-tab .t { display: block; font-size: 12px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tab .s { display: block; font-size: 10.5px; color: var(--color-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tab .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--color-dim); }
.bd-tab .dot.ok { background: var(--color-ok); }
.bd-tab .dot.warn { background: var(--color-warn); }
.bd-tab .dot.live { background: var(--color-accent); animation: bd-pulse 1.5s infinite; }
.bd-rail-sec { padding: 12px 8px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-dim); }
.bd-rail-foot { padding: 9px; border-top: 1px solid var(--color-edge); }

/* ============================================================================
   INSPECTOR — the drawer that carries a node's full detail and every action
   ============================================================================ */
.bd-inspector {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw;
  background: var(--color-panel);
  border-left: 1px solid var(--color-edge);
  box-shadow: -18px 0 48px rgba(28,28,24,.12);
  z-index: 61; display: flex; flex-direction: column; /* over the work tray (60): on a phone the tray covered the footer */
  transform: translateX(100%);
  transition: transform .28s var(--ease-smooth);
}
.bd-inspector.open { transform: none; }
/* A closed drawer is off-screen, not gone: without this, Tab walked into its invisible fields and
   buttons. Visibility flips only after the slide-out finishes. */
.bd-inspector:not(.open) { visibility: hidden; transition: transform .28s var(--ease-smooth), visibility 0s linear .28s; }
.bd-insp-head > .min-w-0 { flex: 1; }
.bd-insp-head .t, .bd-insp-head .s { overflow-wrap: anywhere; }
/* Lists in the drawer (cast, sets, takes): a single-column grid sized by its CONTENT grew as wide
   as the longest unbroken role name and pushed every card past the drawer's right edge. */
.bd-insp-body .grid:not([class*="grid-cols-"]):not([style*="grid-template-columns"]) { grid-template-columns: minmax(0, 1fr); }
.bd-insp-body .grid > * { min-width: 0; }
.bd-insp-body .card .flex.gap-1 { flex-wrap: wrap; }
.bd-insp-head {
  flex: none; display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; border-bottom: 1px solid var(--color-edge);
}
.bd-insp-head .t { font-size: 15px; font-weight: 650; letter-spacing: -.01em; font-family: var(--font-display); }
.bd-insp-head .s { font-size: 11.5px; color: var(--color-mut); margin-top: 2px; }
.bd-insp-close {
  margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; color: var(--color-mut); cursor: pointer;
  background: transparent; border: 1px solid transparent;
}
.bd-insp-close:hover { background: var(--color-panel2); border-color: var(--color-edge); color: var(--color-txt); }
.bd-insp-tabs { flex: none; display: flex; gap: 3px; padding: 8px 10px 0; border-bottom: 1px solid var(--color-edge); overflow-x: auto; }
.bd-insp-tab {
  padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--color-mut);
  cursor: pointer; background: transparent; border: 0; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.bd-insp-tab:hover { color: var(--color-txt); }
.bd-insp-tab.active { color: var(--color-accent-dk); border-bottom-color: var(--color-accent); }
.bd-insp-body { flex: 1; overflow-y: auto; padding: 14px; }
.bd-insp-foot { flex: none; padding: 11px 14px; border-top: 1px solid var(--color-edge); display: flex; gap: 8px; flex-wrap: wrap; }

.bd-sec { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-dim); margin: 16px 0 7px; }
.bd-sec:first-child { margin-top: 0; }
.bd-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; font-size: 12.5px; }
.bd-kv dt { color: var(--color-dim); white-space: nowrap; }
.bd-kv dd { color: var(--color-txt); min-width: 0; overflow-wrap: anywhere; }
.bd-prose { font-size: 12.5px; line-height: 1.6; color: var(--color-txt); white-space: pre-wrap; overflow-wrap: anywhere; }
.bd-danger { border-top: 1px solid var(--color-edge); margin-top: 20px; padding-top: 14px; }

/* a grid of images (turnaround views, plates, panels) */
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.bd-grid .cell {
  position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--color-edge); background: var(--color-panel2);
}
.bd-grid .cell img { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; }
.bd-grid .cell.wide img { aspect-ratio: 16/9; }
.bd-grid .cell.canonical { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.bd-grid .cell .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px;
  font-size: 9.5px; font-weight: 600; color: #fff; background: rgba(24,24,20,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* a section whose data is still on its way */
.bd-loader { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; color: var(--color-dim); }
.bd-loader svg { animation: spin 1s linear infinite; color: var(--color-accent); flex: none; }
dd .bd-loader { padding: 0; }

/* a character's pictures: the picture opens full size, the row below says what it is and can make it the main one */
.bd-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.bd-pics .pic { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bd-pics .pic-img {
  position: relative; display: block; width: 100%; padding: 0; cursor: zoom-in;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--color-edge); background: var(--color-panel2);
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease-smooth, ease);
}
.bd-pics .pic-img:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-edge)); transform: translateY(-1px); }
.bd-pics .pic-img img { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; }
.bd-pics .pic.main .pic-img { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.bd-pics .pic-badge {
  position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--color-accent);
}
.bd-pics .pic-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bd-pics .pic-label { font-size: 11.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-pics .pic-meta .btn { padding-left: 0; }

/* an outfit's picture beside its card */
.bd-thumb {
  flex: none; width: 64px; aspect-ratio: 9/16; border-radius: 8px; overflow: hidden; padding: 0;
  border: 1px solid var(--color-edge); background: var(--color-panel2); cursor: zoom-in;
  display: grid; place-items: center; color: var(--color-dim);
}
.bd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-thumb.empty { cursor: default; }

/* a set's spot (features.js): what it is, where, and its id */
.bd-feature { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--color-edge); background: var(--color-panel); }
.bd-feature .bd-chip { flex: none; margin-top: 1px; }

/* the take that is actually in the cut, unmistakable in a list of six near-identical clips */
.bd-take-selected {
  border-color: color-mix(in srgb, var(--color-ok) 45%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ok) 15%, transparent) !important;
}

/* ---- the retake diff, reviewed like a pull request ---- */
.bd-difftop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.bd-diff {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 46vh; overflow-y: auto;
  padding: 12px; border-radius: 10px;
  background: var(--color-panel2); border: 1px solid var(--color-edge);
}
.bd-ins {
  background: color-mix(in srgb, var(--color-ok) 20%, transparent);
  color: #12703a; text-decoration: none; border-radius: 3px; padding: 1px 0;
}
.bd-del {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: #a33513; text-decoration: line-through; border-radius: 3px; padding: 1px 0;
}
.bd-changes { display: grid; gap: 9px; font-size: 12px; }
.bd-changes li {
  padding: 8px 10px; border-radius: 9px;
  background: var(--color-panel2); border: 1px solid var(--color-edge);
  list-style: none; overflow-wrap: anywhere;
}

/* ---- a clip redo's confirm: what it does, as a few calm rows (owner 2026-10-20) ---- */
.bd-facts { display: grid; gap: 8px; }
.bd-fact {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.5; color: var(--color-txt);
  background: var(--color-panel2);
  border: 1px solid var(--color-edge);
  animation: bd-fact-in .32s var(--ease-smooth, cubic-bezier(.2,.8,.2,1)) both;
}
.bd-fact:nth-child(2) { animation-delay: .04s; } .bd-fact:nth-child(3) { animation-delay: .08s; } .bd-fact:nth-child(4) { animation-delay: .12s; }
.bd-fact-ic {
  flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  color: var(--color-accent-dk); background: color-mix(in srgb, var(--color-accent) 11%, transparent);
}
.bd-fact.warn { border-color: color-mix(in srgb, var(--color-warn) 38%, transparent); background: color-mix(in srgb, var(--color-warn) 9%, var(--color-panel2)); }
.bd-fact.warn .bd-fact-ic { color: #b45309; background: color-mix(in srgb, var(--color-warn) 18%, transparent); }
@keyframes bd-fact-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bd-fact { animation: none; } }

/* ---- refresh shots: the clips a refresh renders again, each prompt change as -/+ lines (diff.js colours) ---- */
.bd-refresh { display: grid; gap: 10px; }
.bd-refresh-sum { font-size: 12.5px; color: var(--color-mut); line-height: 1.55; margin: 0; }
.bd-refresh-clip {
  padding: 10px 12px; border-radius: 12px; background: var(--color-panel); border: 1px solid var(--color-edge);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.05);
  animation: bd-fact-in .32s var(--ease-smooth, cubic-bezier(.2,.8,.2,1)) both;
}
.bd-ldiff {
  margin-top: 8px; padding: 6px 0; border-radius: 9px; max-height: 38vh; overflow-y: auto;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  background: var(--color-panel2); border: 1px solid var(--color-edge);
}
.bd-ldiff-row { display: flex; gap: 8px; padding: 1px 10px; overflow-wrap: anywhere; }
.bd-ldiff-row.del { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.bd-ldiff-row.add { background: color-mix(in srgb, var(--color-ok) 8%, transparent); }
.bd-ldiff-row.meta { color: var(--color-mut); }
.bd-ldiff-sign { flex: none; width: 10px; text-align: center; color: var(--color-dim); user-select: none; }
.bd-ldiff-row.del .bd-ldiff-sign { color: #a33513; } .bd-ldiff-row.add .bd-ldiff-sign { color: #12703a; }
.bd-ldiff-role { padding: 4px 10px 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-dim); font-family: var(--font-sans, inherit); }
.bd-chip.bd-swap { gap: 4px; }

/* ============================================================================
   CONTEXT MENU
   ============================================================================ */
.bd-menu {
  position: fixed; z-index: 90; min-width: 208px; padding: 5px;
  background: var(--color-panel); border: 1px solid var(--color-edge);
  border-radius: 11px; box-shadow: 0 14px 40px rgba(28,28,24,.18);
  animation: bd-menu-in .13s var(--ease-spring);
}
@keyframes bd-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.bd-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--color-txt); text-align: left;
  background: transparent; border: 0;
}
.bd-menu-item:hover { background: var(--color-panel2); }
.bd-menu-item .ic { color: var(--color-dim); flex: none; }
.bd-menu-item:hover .ic { color: var(--color-accent-dk); }
.bd-menu-item.danger { color: var(--color-accent-dk); }
.bd-menu-item.danger:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.bd-menu-item[disabled] { opacity: .4; cursor: not-allowed; }
.bd-menu-item .kbd { margin-left: auto; font-size: 10px; color: var(--color-dim); }
.bd-menu-sep { height: 1px; background: var(--color-edge); margin: 4px 2px; }
.bd-menu-head { padding: 6px 9px 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-dim); }

/* ============================================================================
   EMPTY STATE — the canvas before anything exists
   ============================================================================ */
.bd-empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  z-index: 3;
}
.bd-empty .inner { max-width: 520px; text-align: center; }
.bd-empty .mark {
  width: 62px; height: 62px; border-radius: 19px; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: var(--color-panel); border: 1px solid var(--color-edge);
  color: var(--color-accent); box-shadow: 0 6px 22px rgba(28,28,24,.08);
}
.bd-empty h2 { font-size: 22px; font-weight: 680; letter-spacing: -.02em; font-family: var(--font-display); }
.bd-empty p { font-size: 13.5px; color: var(--color-mut); line-height: 1.6; margin: 9px auto 22px; max-width: 420px; }
.bd-empty .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================================
   MISC
   ============================================================================ */
.bd-skel { background: linear-gradient(90deg, var(--color-panel2) 25%, var(--color-panel3) 50%, var(--color-panel2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
.bd-hint { font-size: 11.5px; color: var(--color-dim); line-height: 1.5; }
.bd-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(40,40,36,.18); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-smooth); }
.bd-scrim.on { opacity: 1; pointer-events: auto; }

/* the header's "show the rail" button exists only while the rail is closed */
.bd-rail-open { display: none; }
.bd-shell.rail-closed .bd-rail-open { display: inline-flex; }
.bd-shell.rail-closed .bd-rail { visibility: hidden; }

/* Two navigations, one list: the Board's left nav now carries every studio page (Remake, Actor
   Library, Studio Tests were unreachable from the Board). */
.bd-nav-scroll a.bd-nav-item { text-decoration: none; }

/* filter chips in the daylight look (owner 2026-10-24): white chips, the active one solid orange */
html.bd .sds-filter-chip { background: var(--color-panel); font-weight: 600; }
html.bd .sds-filter-chip.active { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }

@media (max-width: 1180px) {
  .bd-shell { grid-template-columns: 64px minmax(0, 1fr) var(--bd-rail); }
  .bd-shell.rail-closed { grid-template-columns: 64px minmax(0, 1fr) 0; }
  /* the utility pages used the same icon-only nav but kept its 210px column */
  .bd-utility-shell { grid-template-columns: 64px minmax(0, 1fr); }
  .bd-nav-item span:not(.ic) { display: none; }
  .bd-nav-item { justify-content: center; }
  .bd-brand span:not(.mark) { display: none; }
  .bd-brand { justify-content: center; padding: 0; }
  .bd-nav-sec, .bd-nav-foot { display: none; }
}

/* ============================================================================
   PHONE — one column. The nav becomes a scrollable icon strip on the utility pages and a slim
   icon column on the Board; the episode rail becomes an overlay drawer, closed by default.
   ============================================================================ */
@media (max-width: 640px) {
  /* auto + 1fr: with a short page (the 404) the 100vh grid stretched the nav strip to 240px */
  .bd-utility-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .bd-utility-nav {
    position: sticky; top: 0; z-index: 30; height: auto;
    flex-direction: row; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--color-edge);
  }
  .bd-utility-nav .bd-brand { height: 48px; width: 48px; border-bottom: 0; flex: none; }
  .bd-utility-nav .bd-nav-scroll { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 6px 8px 6px 0; scrollbar-width: none; }
  .bd-utility-nav .bd-nav-scroll::-webkit-scrollbar { display: none; }
  .bd-utility-nav .bd-nav-item { width: 40px; height: 36px; flex: none; margin: 0; }
  .bd-utility-main > .bd-head { position: static; height: 46px; padding: 0 12px; }
  .bd-utility-content { padding: 16px 14px 28px; }
  /* page headers and card heads: the title block keeps a readable width and the button group
     drops to its own line instead of squeezing the title to one word per line */
  .bd-utility-content .flex.justify-between { flex-wrap: wrap; }
  .bd-utility-content .flex.justify-between > .min-w-0,
  .bd-utility-content .flex.justify-between > .flex-1 { flex: 1 1 220px; }
  .bd-utility-content .flex.justify-between > .flex,
  .bd-utility-content .flex.justify-between > .shrink-0 { flex-wrap: wrap; flex-shrink: 1; min-width: 0; max-width: 100%; }
  .sds-test-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sds-test-steps .lbl { overflow-wrap: anywhere; }
  .bd-utility-content pre, .bd-utility-content code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .bd-utility-content table { display: block; max-width: 100%; overflow-x: auto; }
  /* list rows (Asset Library): the date column ate the row and cut every filename to "2026-1…";
     on a phone the trailing columns drop under the name instead */
  .hub-row { grid-template-columns: var(--hub-lead, 148px) minmax(0, 1fr); }
  .hub-row > :nth-child(n+3) { grid-column: 2; text-align: left; }

  .bd-shell, .bd-shell.rail-closed { grid-template-columns: 48px minmax(0, 1fr) 0; }
  .bd-nav-scroll { padding: 8px 4px; }
  .bd-nav-item { padding: 8px 0; }
  .bd-head { gap: 8px; padding: 0 8px; }
  .bd-crumb, .bd-spend { display: none; }
  .bd-jobs .word { display: none; } /* "1" with its live dot: the project title keeps the room */
  .bd-switch { flex: 1 1 auto; max-width: none; }
  .bd-rail {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: min(300px, 86vw);
    box-shadow: -18px 0 48px rgba(28,28,24,.16);
    transition: transform .26s var(--ease-smooth), visibility 0s linear 0s;
  }
  .bd-shell.rail-closed .bd-rail { transform: translateX(100%); transition: transform .26s var(--ease-smooth), visibility 0s linear .26s; }
  .bd-controls { right: 8px; bottom: 8px; }
  .bd-inspector { width: 100vw; max-width: 100vw; }
  .bd-menu { max-width: calc(100vw - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-world.animating { transition: none; }
}

/* ============================================================================
   THE STAGED EPISODE (H3, script pipeline v4) — staged.js. Read views in the drawer and the editors' forms.
   ============================================================================ */
@keyframes sg-in { from { opacity: 0; transform: translateY(3px); } }
.sg-unit, .sg-outfit, .sg-problems, .sg-slot { animation: sg-in .22s var(--ease-smooth) both; }
.sg-unit { transition: border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth); }
.sg-unit.sg-has-problems { border-color: color-mix(in srgb, var(--color-warn) 45%, var(--color-edge)); }
.sg-story { font-size: 11.5px; color: var(--color-mut); margin-top: 6px; line-height: 1.5; }
.sg-label { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-dim); margin: 10px 0 5px; }
.sg-note { font-size: 11.5px; color: var(--color-mut); margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
.sg-note b { color: var(--color-txt); font-weight: 600; margin-right: 3px; }
.sg-line {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-panel2));
  border: 1px solid color-mix(in srgb, var(--color-accent) 14%, var(--color-edge));
}
.sg-line-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.sg-to { display: inline-flex; align-items: center; gap: 3px; color: var(--color-mut); }
.sg-line-text { font-size: 13px; font-weight: 550; margin-top: 4px; line-height: 1.45; overflow-wrap: anywhere; }
.sg-person { padding: 7px 0; border-top: 1px solid var(--color-edge); }
.sg-person:first-of-type { border-top: 0; }
.sg-person-head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; }
.sg-person-head .bd-chip svg { margin-right: 2px; }
.sg-shot { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; padding: 4px 0; line-height: 1.45; }
.sg-hero { display: flex; gap: 12px; align-items: flex-start; }
.sg-hero .bd-kv { flex: 1; min-width: 0; }
.sg-set { width: 112px; aspect-ratio: 4/3; border-radius: 10px; border: 1px solid var(--color-edge); flex: none; overflow: hidden; }
.sg-set img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-row-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; padding: 4px 0; }
.sg-outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.sg-outfit { border: 1px solid var(--color-edge); border-radius: 12px; overflow: hidden; background: var(--color-panel2); font-size: 11.5px; }
.sg-outfit img, .sg-outfit-empty { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.sg-outfit-empty { display: grid; place-items: center; color: var(--color-dim); }
.sg-outfit-body { padding: 6px 8px 8px; display: grid; gap: 2px; }
.sg-problems {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.45;
  background: color-mix(in srgb, var(--color-warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warn) 28%, transparent);
}
.sg-problems-head { display: flex; align-items: center; gap: 5px; font-weight: 650; color: #b45309; margin-bottom: 3px; }
.sg-problem { padding: 2px 0; overflow-wrap: anywhere; }
.sg-units { display: grid; gap: 3px; margin-top: 8px; }
.sg-unit-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  padding: 6px 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; font-size: 12px;
  color: var(--color-txt); transition: background-color .14s var(--ease-smooth), border-color .14s var(--ease-smooth);
}
.sg-unit-row:hover { background: var(--color-panel2); border-color: var(--color-edge); }
.sg-unit-row .n { flex: none; width: 22px; font-variant-numeric: tabular-nums; color: var(--color-dim); font-weight: 650; }
.sg-unit-row .k { flex: none; width: 92px; color: var(--color-mut); font-size: 11px; }
.sg-unit-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-unit-row .w { flex: none; color: #b45309; display: inline-flex; }
.sg-unit-row.flagged { background: color-mix(in srgb, var(--color-warn) 7%, transparent); }
.sg-clock-unit { padding: 7px 0; border-top: 1px solid var(--color-edge); margin-top: 7px; }
/* editor forms */
.sg-form-row { display: grid; gap: 10px; }
.sg-form-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-slot { border: 1px solid var(--color-edge); border-radius: 12px; padding: 10px 12px 0; margin-bottom: 10px; background: color-mix(in srgb, var(--color-panel2) 55%, transparent); }
.sg-slot-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-dim); margin-bottom: 8px; }
.sg-form-errors { margin-bottom: 14px; }
.sg-form-errors:not([hidden]) {
  display: block; padding: 9px 11px; border-radius: 10px; font-size: 12px; line-height: 1.45;
  background: color-mix(in srgb, var(--color-warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warn) 30%, transparent);
  animation: sg-in .22s var(--ease-smooth) both;
}
.f-field.sg-bad .f-input, .f-field.sg-bad .f-select { border-color: color-mix(in srgb, var(--color-warn) 70%, transparent); }
@media (max-width: 640px) { .sg-form-row.cols-2, .sg-form-row.cols-3 { grid-template-columns: minmax(0, 1fr); } }

/* A PICTURE IN A PANEL OPENS FULL SIZE (inspector.js, data-zoom): every picture of the drawer, with the drawer's other
   pictures one arrow away. The button only adds the click; the picture keeps its own frame. */
.bd-pic-zoom { display: block; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: zoom-in; }
.bd-pic-zoom:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[data-zoom] img, img[data-zoom] { cursor: zoom-in; }

/* The episode's Render card (inspector.js renderCard): a clip is a head row (key, state, chain, redo) and its line under
   it, so a narrow drawer wraps the head instead of cutting the state chip or the line to one letter. */
.bd-render-sum { font-size: 12px; line-height: 1.7; }
.bd-clip-row { padding: 5px 0; }
.bd-clip-row + .bd-clip-row { border-top: 1px solid var(--color-edge); }
.bd-clip-head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.bd-clip-head .bd-chip { white-space: nowrap; }
.bd-clip-line { font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* the utility pages' "1 generating" link broke onto two lines next to a long crumb on a phone */
#jobs-indicator { white-space: nowrap; flex: none; }

/* two lines, then an ellipsis: a card title cut to one line lost everything after "Episode 1 ·" (Asset Library) */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* ---- the show on dramashow.com (board/dramashow.js): the show panel's dramashow tab and the episode's dramashow row ---- */
.ds-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--color-accent); }
.ds-link:hover { text-decoration: underline; }
.ds-err { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--color-accent-dk, var(--color-accent)); overflow-wrap: anywhere; }
.ds-err svg { flex: none; margin-top: 2px; }
.ds-note { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: #b45309; }
.ds-pills { gap: 5px; }
.ds-pills .f-pill { font-size: 11.5px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px; }
.ds-why { margin: 6px 0 0; padding: 0; list-style: none; font-size: 11px; line-height: 1.6; color: var(--color-dim); }
.ds-why b { color: var(--color-txt); font-weight: 600; margin-right: 4px; }
.ds-art { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ds-slot { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ds-art-main { border-radius: 10px; overflow: hidden; border: 1px solid var(--color-edge); background: var(--color-panel2); }
.ds-ar-poster { aspect-ratio: 3/4; }
.ds-ar-wide { aspect-ratio: 3/1; }
.ds-ar-phone { aspect-ratio: 3/4; }
.ds-thumbs .ds-draft .ds-art-img { aspect-ratio: 9/16; }
.ds-art-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ds-art-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-art-empty { height: 100%; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--color-dim); }
.ds-drafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.ds-draft { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.ds-draft .ds-art-img { border-radius: 7px; overflow: hidden; border: 1px solid var(--color-edge); aspect-ratio: 3/4; }
.ds-draft .btn { padding: 2px 6px; font-size: 10.5px; }
.ds-ep { overflow: hidden; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--color-edge); background: var(--color-panel); }
.ds-ep-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ds-ep-head .bd-chip { flex: none; white-space: nowrap; }
.ds-ep-title { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ep-head .ml-auto { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 60%; display: flex; justify-content: flex-end; }
.ds-ep-head .btn { max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; }
.ds-ep-stage { margin-top: 5px; font-size: 11px; color: var(--color-dim); }
.ds-ep .tt-bar { margin-top: 5px; }
.ds-blockers { margin: 4px 0 0 18px; padding: 0; font-size: 12px; line-height: 1.6; list-style: disc; }
/* subtitles in every dramashow language (board/subtitles.js): a chip per language, its native name on hover */
.sub-row .ds-ep-head { flex-wrap: wrap; row-gap: 5px; }
.sub-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-langs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.sub-lang { font: 600 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; cursor: default; }
a.sub-lang, button.sub-lang { cursor: pointer; }
a.sub-lang:hover, button.sub-lang:hover { filter: brightness(.95); }
.sub-lang.sub-none { opacity: .55; }
.sub-lang .sub-native { display: none; font-family: system-ui, sans-serif; font-weight: 500; }
.sub-lang:hover .sub-code, .sub-lang:focus-visible .sub-code { display: none; }
.sub-lang:hover .sub-native, .sub-lang:focus-visible .sub-native { display: inline; }

/* the recap opening (generation/recap.js): the master's timeline with the previous episode's ending marked */
.bd-recap { margin-top: 8px; }
.bd-recap-track { position: relative; height: 4px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--color-edge) 80%, transparent); }
.bd-recap-band { position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: color-mix(in srgb, var(--color-gold) 80%, transparent); transition: width .4s ease; }
.bd-recap-legend { margin-top: 6px; font-size: 11px; color: var(--color-mut); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bd-recap-key { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gold); font-weight: 600; font-variant-numeric: tabular-nums; }

/* the time marks (post/timeCards.js): the time card and the memory look, on clips and on the master's timeline */
.bd-chip.time { background: color-mix(in srgb, var(--color-gold) 13%, transparent); color: #b48a2c; border-color: color-mix(in srgb, var(--color-gold) 30%, transparent); }
.bd-chip.memory { background: color-mix(in srgb, #c08552 13%, transparent); color: #a8693a; border-color: color-mix(in srgb, #c08552 30%, transparent); }
.bd-time { margin-top: 8px; }
.bd-time-track { position: relative; height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--color-edge) 80%, transparent); }
.bd-time-look { position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: color-mix(in srgb, #c08552 70%, transparent); }
.bd-time-card { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 999px; background: color-mix(in srgb, var(--color-gold) 90%, white);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-gold) 55%, transparent); }
.bd-time-flash { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.9); }
.bd-time-key { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-time-key.card { color: var(--color-gold); }
.bd-time-key.memory { color: #c08552; }
/* the arrival's black card ("Moments later"): real black seconds of the master, outlined so it reads on a dark track */
.bd-time-black { position: absolute; top: 0; bottom: 0; min-width: 3px; background: #050505; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.bd-time-key.black { color: var(--color-txt); }