/* The four-pane shell (web/shell.py, PAP-81; INDY_SHELL=1).

   Under the title bar, left to right: the nav (1), Indy (2), the page (3)
   and the controls (4); with ?chat=rhs (kept per browser) Indy sits on the
   right: nav, page, controls, Indy. The canvas's widths are the defaults; a
   drag on a splitter sets --sh-nav / --sh-indy / --sh-ctl on <html>
   (shell.js), and a fold is a class on <html> (sh-fold-nav, ip-closed for
   Indy, sh-fold-ctl) that narrows the pane's COLUMN (--sh-*-col) to a
   strip whatever width was dragged. Both come back before the first paint
   from localStorage 'indy.shell'.

   The page keeps the document's own scroll, as every room expects (sticky
   inspectors, keep-place.js): the side panes stick under the header and
   scroll inside themselves. A full-bleed tool (body.page-canvas) keeps its
   100vh column; the shell then fills what the header leaves. */

:root {
  --sh-nav: 248px; --sh-indy: 360px; --sh-ctl: 320px; --sh-fold: 48px; --sh-gap: 7px; --sh-top: 0px;
  --sh-nav-col: var(--sh-nav); --sh-indy-col: var(--sh-indy); --sh-ctl-col: var(--sh-ctl);
}
html.sh-fold-nav { --sh-nav-col: var(--sh-fold); }
html.ip-closed  { --sh-indy-col: var(--sh-fold); }
html.sh-fold-ctl { --sh-ctl-col: var(--sh-fold); }
/* The controls pane is there only when a page has controls (Didier,
   2026-10-14): a shot's bench, the board's inspector once a panel is
   picked, the scene's and the picture's inspectors, the script's notes. It
   comes in open; a fold lasts the page. Empty, it and its splitter are gone. */
html.sh-ctl-none .shell {
  grid-template-columns: var(--sh-nav-col) var(--sh-gap) var(--sh-indy-col) var(--sh-gap) minmax(0, 1fr);
  grid-template-areas: "nav s1 indy s2 page";
}
html.sh-ctl-none.sh-chat-rhs .shell {
  grid-template-columns: var(--sh-nav-col) var(--sh-gap) minmax(0, 1fr) var(--sh-gap) var(--sh-indy-col);
  grid-template-areas: "nav s1 page s2 indy";
}
html.sh-ctl-none .shell-ctl, html.sh-ctl-none .shell-split[data-split="s3"] { display: none; }
/* Before sign-in (shell.build_signed_out): the nav and the page, no Indy. */
html.sh-out .shell {
  grid-template-columns: var(--sh-nav-col) var(--sh-gap) minmax(0, 1fr);
  grid-template-areas: "nav s1 page";
}
html.sh-out .shell-indy, html.sh-out .shell-split[data-split="s2"] { display: none; }
/* the sign-in card (login.html), in the shell's own type and paper button */
.signin {
  max-width: 24rem; margin: 16vh auto 2rem; padding: 1.75rem 1.75rem 1.5rem; box-sizing: border-box;
  background: var(--g2); border: 1px solid var(--line); border-radius: 10px;
}
.signin h1 { margin: 0 0 .6rem; font: 500 1.35rem/1.25 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.signin p { margin: 0; font: 400 .92rem/1.5 var(--body); color: var(--ink-dim); }
.signin .signin__go { display: flex; justify-content: center; width: 100%; margin-top: 1.25rem; box-sizing: border-box; }
.signin p.signin__note { margin-top: 1rem; font-size: .8rem; color: var(--ink-faint); }

/* ---- the frame ----------------------------------------------------------- */
/* No title bar under the shell (Didier, 2026-10-14): pane 1 carries the
   mark, the film's name, the parts and your account. */
html body.has-shell > .site-header { display: none; }
.shell {
  display: grid; align-items: start;
  grid-template-columns: var(--sh-nav-col) var(--sh-gap) var(--sh-indy-col) var(--sh-gap) minmax(0, 1fr) var(--sh-gap) var(--sh-ctl-col);
  grid-template-areas: "nav s1 indy s2 page s3 ctl";
  min-height: calc(100vh - var(--sh-top));
}
/* the chat on the right (?chat=rhs): nav, the page, the controls, Indy */
html.sh-chat-rhs .shell {
  grid-template-columns: var(--sh-nav-col) var(--sh-gap) minmax(0, 1fr) var(--sh-gap) var(--sh-ctl-col) var(--sh-gap) var(--sh-indy-col);
  grid-template-areas: "nav s1 page s2 ctl s3 indy";
}
.shell-nav { grid-area: nav; } .shell-indy { grid-area: indy; } .shell-page { grid-area: page; } .shell-ctl { grid-area: ctl; }
.shell-split[data-split="s1"] { grid-area: s1; } .shell-split[data-split="s2"] { grid-area: s2; } .shell-split[data-split="s3"] { grid-area: s3; }
/* The page-flow pages (script, brief, develop, flow) are a viewport-tall
   column like the canvas: body.page-flow hides the window's scroll, so the
   shell must fit the window and the paper scrolls inside it. Without this the
   page pane grows to the whole script and nothing scrolls (2026-10-16). */
body.page-canvas .shell, body.page-flow .shell { flex: 1; min-height: 0; align-items: stretch; }
.shell-pane { min-width: 0; box-sizing: border-box; }
.shell-nav, .shell-indy, .shell-ctl {
  position: sticky; top: var(--sh-top); height: calc(100vh - var(--sh-top));
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: transparent transparent;
  display: flex; flex-direction: column;
  background: var(--g2); color: var(--ink); font-family: var(--body);
}
.shell-nav:hover, .shell-indy:hover, .shell-ctl:hover { scrollbar-color: rgba(239,230,214,.22) transparent; }
.shell-page { display: flex; flex-direction: column; min-height: calc(100vh - var(--sh-top)); }
body.page-canvas .shell-page, body.page-flow .shell-page { min-height: 0; }
body.page-canvas .shell-page > main, body.page-flow .shell-page > main { flex: 1; min-height: 0; }

/* the page's own width rule holds inside its pane */
body.has-shell main { width: 100%; }

/* ---- the splitters ------------------------------------------------------- */
.shell-split {
  position: sticky; top: var(--sh-top); height: calc(100vh - var(--sh-top));
  cursor: col-resize; background: var(--g1); user-select: none; touch-action: none;
  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
}
.shell-split:hover, .shell-split:focus-visible, .shell-split.is-live { background: var(--g4); outline: none; }
.shell-split.is-idle { cursor: default; }
body.sh-dragging { cursor: col-resize; user-select: none; }
body.sh-dragging iframe, body.sh-dragging canvas { pointer-events: none; }

/* ---- a pane's head and fold ---------------------------------------------- */
.shell-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 44px; padding: 0 .5rem 0 1rem; flex: none;
  border-bottom: 1px solid var(--line);
  font: 500 .72rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}
.shell-head__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-fold {
  flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--ink-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.shell-fold:hover { background: var(--g4); color: var(--ink); }
.shell-fold:focus-visible { outline: 2px solid var(--chrome); outline-offset: -2px; }
.shell-fold .icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The chevron points at the edge the pane folds to; folded, away from it,
   as the way back. The glyph points right. The nav is always on the left,
   the controls on the right, Indy on whichever side the chat is. */
.shell-nav .shell-fold .icon { transform: rotate(180deg); }
html.sh-fold-nav .shell-nav .shell-fold .icon { transform: none; }
.shell-ctl .shell-fold .icon { transform: none; }
html.sh-fold-ctl .shell-ctl .shell-fold .icon { transform: rotate(180deg); }
.shell-indy .shell-fold .icon { transform: rotate(180deg); }
html.ip-closed .shell-indy .shell-fold .icon { transform: none; }
html.sh-chat-rhs .shell-indy .shell-fold .icon { transform: none; }
html.sh-chat-rhs.ip-closed .shell-indy .shell-fold .icon { transform: rotate(180deg); }

/* folded: the head stands on end, the rest is gone */
html.sh-fold-nav .shell-nav > :not(.shell-head):not(.shell-film):not(.shell-foot),
html.ip-closed .shell-indy > :not(.shell-head),
html.sh-fold-ctl .shell-ctl > :not(.shell-head) { display: none; }
html.sh-fold-nav .shell-nav .shell-head,
html.ip-closed .shell-indy .shell-head,
html.sh-fold-ctl .shell-ctl .shell-head { flex-direction: column; justify-content: flex-start; padding: .5rem 0; border-bottom: 0; gap: .75rem; }
html.sh-fold-nav .shell-nav .shell-head__name,
html.ip-closed .shell-indy .shell-head__name,
html.sh-fold-ctl .shell-ctl .shell-head__name { writing-mode: vertical-rl; order: 2; max-height: 40vh; }

/* ---- 1 · the nav ---------------------------------------------------------- */
/* first row: the mark, the tally light, the fold */
.shell-top { padding-left: .75rem; gap: .35rem; }
.shell-brand { display: inline-flex; align-items: center; margin-right: auto; opacity: .9; }
.shell-brand:hover { opacity: 1; }
.shell-brand img { display: block; width: 22px; height: 22px; }
.shell-top .tally-anchor { display: inline-flex; }
.shell-top .tally { height: 28px; }
/* the film's name, a menu: overview, all films, rename */
.shell-film { flex: none; border-bottom: 1px solid var(--line); }
.shell-film__name {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 44px; padding: 0 .75rem 0 1rem; cursor: pointer;
  font: 500 .95rem/1.3 var(--body); color: var(--paper-ink);
}
.shell-film__name::-webkit-details-marker { display: none; }
.shell-film__name:hover { background: var(--g3); }
.shell-film__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-film__caret { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s; }
.shell-film[open] > .shell-film__name .shell-film__caret, .shell-account[open] > .shell-account__name .shell-film__caret { transform: rotate(-90deg); }
.shell-film__menu { display: flex; flex-direction: column; padding: 0 0 .5rem; }
.shell-film__item {
  display: block; width: 100%; box-sizing: border-box; text-align: left; padding: .4rem 1rem .4rem 1.6rem; border: 0; background: none; cursor: pointer;
  color: var(--ink); text-decoration: none; font: 400 .9rem/1.35 var(--body);
}
.shell-film__item:hover { background: var(--g3); color: var(--paper-ink); }
/* the seven parts: one open, the rest a name */
.shell-parts { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .25rem 0 .75rem; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.shell-parts:hover { scrollbar-color: rgba(239,230,214,.22) transparent; }
.shell-part { border-top: 1px solid rgba(239,230,214,.06); }
.shell-part:first-child { border-top: 0; }
/* the head: the part's name (a link to its overview) and, beside it, the
   chevron that opens or folds the part on the page you are on */
.shell-part__bar { display: flex; align-items: center; padding-right: .55rem; }
.shell-part__bar:hover { background: var(--g3); }
.shell-part__head {
  display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  padding: .6rem .25rem .6rem 1rem; border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none;
  font: 600 .74rem/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}
.shell-part__head.is-later { cursor: default; color: var(--ink-ghost); }
.shell-part__head.is-later:hover { color: var(--ink-ghost); }
.shell-part__head:hover { color: var(--ink); }
.shell-part__head:focus-visible, .shell-part__fold:focus-visible { outline: 2px solid var(--chrome); outline-offset: -2px; }
.shell-part__head[aria-current] { color: var(--paper-ink); }   /* the part you are in, open or folded */
.shell-part.is-later .shell-part__head { color: var(--ink-ghost); }
/* the part's key, a keycap like the ? list's (.shell-keys kbd), lit on the part you are in */
.shell-part__key {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 .2rem; box-sizing: border-box;
  border: 1px solid var(--line-strong, var(--line)); border-bottom-width: 2px; border-radius: 4px; background: var(--g1);
  color: inherit; font: 500 .66rem/1 var(--mono, monospace); letter-spacing: 0; text-transform: none;
}
.shell-part__head[aria-current] .shell-part__key { border-color: var(--paper-dim); }
.shell-part__head.is-later .shell-part__key { border-color: var(--line); background: none; }
.shell-part__fold {
  flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 5px; background: none; color: var(--ink-dim); cursor: pointer;
}
.shell-part__fold:hover { background: var(--g4); color: var(--paper-ink); }
.shell-part__caret { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: none; transition: transform .15s; opacity: .7; }
.shell-part.is-open .shell-part__caret { transform: rotate(90deg); }
.shell-part__body { padding: 0 0 .5rem; }
.shell-part__body[hidden] { display: none; }
.shell-rooms { list-style: none; margin: 0 0 .25rem; padding: 0; }
.shell-room {
  display: block; padding: .35rem 1rem .35rem 1.6rem; color: var(--ink); text-decoration: none;
  font: 400 .92rem/1.35 var(--body);
}
a.shell-room:hover { background: var(--g3); }
.shell-room.is-here { color: var(--paper-ink); box-shadow: inset 2px 0 0 var(--paper-ink); }
.shell-room.is-later { color: var(--ink-ghost); }
/* the foot: the workspace, your account */
.shell-foot { flex: none; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.shell-foot__row {
  display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: 0 .75rem 0 1rem;
  color: var(--ink); text-decoration: none; font: 400 .85rem/1.3 var(--body); cursor: default;
}
a.shell-foot__row, summary.shell-foot__row { cursor: pointer; }
a.shell-foot__row:hover, summary.shell-foot__row:hover { background: var(--g3); color: var(--paper-ink); }
.shell-foot__text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-foot__kind { flex: none; font: 500 .62rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.shell-account { border-top: 1px solid rgba(239,230,214,.06); }
.shell-account__name { list-style: none; min-height: 44px; }
.shell-account__name::-webkit-details-marker { display: none; }
.shell-avatar { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--g4); display: inline-flex; align-items: center; justify-content: center; font: 500 .7rem/1 var(--body); color: var(--paper-ink); }
.shell-account__menu .shell-film__item { padding-left: 1rem; }
/* the reading language (INDY_LANGUAGES=1): the title bar's toggle, here
   because the shell hides the bar (partials/ui_lang_toggle.html) */
.shell-lang .ui-lang-toggle { margin: 0; }
/* folded: the strip keeps the mark, the light, the fold, the film's name
   on end and the account's avatar at the foot */
html.sh-fold-nav .shell-nav .shell-top { flex-direction: column; justify-content: flex-start; padding: .5rem 0; border-bottom: 0; gap: .6rem; }
html.sh-fold-nav .shell-nav .shell-brand { margin-right: 0; }
html.sh-fold-nav .shell-nav .shell-top .tally-count { display: none; }
html.sh-fold-nav .shell-nav .shell-film { border-bottom: 0; }
html.sh-fold-nav .shell-nav .shell-film__name { padding: .25rem 0; justify-content: center; }
html.sh-fold-nav .shell-nav .shell-film__text { writing-mode: vertical-rl; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); max-height: 40vh; }
html.sh-fold-nav .shell-nav .shell-film__caret, html.sh-fold-nav .shell-nav .shell-film__menu { display: none; }
html.sh-fold-nav .shell-nav .shell-foot { margin-top: auto; border-top: 0; }
html.sh-fold-nav .shell-nav .shell-foot__row:not(.shell-account__name) { display: none; }
html.sh-fold-nav .shell-nav .shell-account { border-top: 0; }
html.sh-fold-nav .shell-nav .shell-account__name { justify-content: center; padding: .5rem 0; }
html.sh-fold-nav .shell-nav .shell-account__name .shell-foot__text, html.sh-fold-nav .shell-nav .shell-account__name .shell-film__caret, html.sh-fold-nav .shell-nav .shell-account__menu { display: none; }
.shell-index { list-style: none; margin: 0; padding: 0 0 .25rem; }
.shell-index__kids { list-style: none; margin: .1rem 0 .3rem; padding: 0; }
.shell-index__row--kid { padding-left: 2.2rem; font-size: .82rem; }
.shell-index__row--kid .shell-index__n { min-width: 2.2rem; }
.shell-index__label {
  margin: .75rem 1rem .25rem; font: 500 .66rem/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.shell-index ul { list-style: none; margin: 0; padding: 0; }
.shell-index__row {
  display: flex; gap: .55rem; align-items: baseline; padding: .3rem 1rem; color: var(--ink); text-decoration: none;
  font: 400 .88rem/1.35 var(--body); overflow: hidden; white-space: nowrap;
}
.shell-index__row:hover { background: var(--g3); }
.shell-index__row.is-here { color: var(--paper-ink); box-shadow: inset 2px 0 0 var(--paper-ink); }
.shell-index__n { flex: none; min-width: 1.6rem; font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.shell-index__row.is-here .shell-index__n { color: inherit; }
.shell-index__meta { overflow: hidden; text-overflow: ellipsis; }
/* the character page's own rail, kept: a picture and a name per row */
.shell-index__row--pic { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .65rem; align-items: center; padding: .3rem 1rem; white-space: normal; }
.shell-index__thumb { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--g3); position: relative; }
.shell-index__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shell-index__empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-ghost); font-size: 1.1rem; }
.shell-index__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-index__row--pic .shell-index__meta { grid-column: 2; font-size: .74rem; color: var(--ink-faint); }
.shell-ways { list-style: none; margin: .35rem 0 .25rem; padding: 0; }
.shell-way {
  display: block; padding: .35rem 1rem .35rem 1.6rem; color: var(--ink); text-decoration: none;
  font: 400 .92rem/1.35 var(--body);
}
a.shell-way:hover { background: var(--g3); }
.shell-way.is-here { color: var(--paper-ink); box-shadow: inset 2px 0 0 var(--paper-ink); }
/* the page's own tools, moved in by shell.js: the board's header controls */
.shell-tools:empty { display: none; }
.shell-tools { padding: .25rem .9rem .6rem; }
.shell-tools .shell-adopted.page-head-actions { flex-wrap: wrap; align-items: center; gap: .4rem; }
body.has-shell #board-head.shell-away-tools { display: none; }
/* the board's controls beside the page's title (Didier, 2026-10-14) */
.pane-bar__tools { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.pane-bar__tools:empty { display: none; }
.pane-bar__tools .shell-adopted.page-head-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }
.pane-bar__tools .page-head-actions .btn, .pane-bar__tools .page-head-actions button, .pane-bar__tools .page-head-actions summary.btn { height: 28px; min-height: 0; }
/* + (new shot) and bring a board in drop from their own button, right edge
   under it, never centred over the bar (the centring shift put the form over
   its own button and past the window's right edge) */
.pane-bar__tools .new-shot-pop:not(.board-cut-pop) { position: relative; }
.pane-bar__tools .new-shot-pop:not(.board-cut-pop)[open] > form { position: absolute; top: calc(100% + .4rem); right: 0; left: auto; transform: none; max-width: calc(100vw - 2rem); }
/* the cut list drops from its button, under the bar, never off the top */
.pane-bar__tools .board-cut-pop[open] > form { top: 3rem; right: 1rem; left: auto; transform: none; }
/* ---- the character page (Didier, 2026-10-14) ------------------------------
   Pictures in the middle, in the order the work happens: the look first and
   largest with its ring beside it, the turnaround and the model side by
   side, then the voice. Words and levers on the right: who they are, the
   cast tier, then the look's inspector. The head bar goes: its byline sits
   beside the title, its buttons beside that. */
.pane-bar__sub { color: var(--ink-faint); margin-left: -.4rem; }
.pane-bar__sub:empty { display: none; }
.pane-bar__sub .shell-adopted.room-byline { margin: 0; font: inherit; }
body.has-shell .room-head { display: none; }
.pane-bar__tools .shell-adopted.room-actions { display: flex; align-items: center; gap: .4rem; margin: 0; }
.pane-bar__tools .room-actions .room-back-btn, .pane-bar__tools .room-actions [data-open-brief],
.pane-bar__tools .room-actions a[href*="/canvas"] { display: none; }
.pane-bar__tools .room-actions .btn, .pane-bar__tools .room-actions summary.btn { height: 28px; min-height: 0; }
.pane-bar__tools .room-actions .add-drawer-body { text-transform: none; letter-spacing: 0; font-size: .9rem; }
/* who they are, then the cast, then the inspector, in the controls */
.shell-ctl .shell-adopted#st-who { padding: .9rem 1rem .6rem; border-bottom: 1px solid var(--line); }
.shell-ctl .shell-adopted#st-who .stn-head { margin: 0 0 .6rem; }
.shell-ctl .shell-adopted#st-who .stn-head h2 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.shell-ctl .shell-adopted#st-who .stn-num, .shell-ctl .shell-adopted#st-who .stn-sub { display: none; }
/* the words in their squircle, 20px inside it, room between the fields and
   the footer ruled off (vault/86 step 10) */
.shell-ctl .shell-adopted#st-who .room-desc {
  margin: 0; padding: 20px 20px 16px; border: 0; border-radius: 15px; background: var(--box-bg);
  box-shadow: 0 8px 14px -6px rgba(0,0,0,.34), 0 26px 34px -18px rgba(0,0,0,.3), inset 0 0 0 1px var(--box-line);
}
.shell-ctl .shell-adopted#st-who .room-kv { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.shell-ctl .shell-adopted#st-who .room-kv dt { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .14em; color: var(--ink-faint); }
.shell-ctl .shell-adopted#st-who .room-kv dd { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; margin: 0 0 18px; max-width: none; font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--ink); }
.shell-ctl .shell-adopted#st-who .room-kv dd:first-of-type { font-size: 17px; color: var(--display-ink); }
.shell-ctl .shell-adopted#st-who .room-fold { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.shell-ctl .shell-adopted.room-tier { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.shell-ctl .shell-adopted.room-tier::before { content: "Cast"; font: 500 .74rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.shell-ctl .shell-adopted.room-tier .dd-select { width: 100%; }
/* the page, one column (vault/86): the design (the look and the
   turnaround as one), its Variations line, the model, then the voice */
body.has-shell .shell-page { container-type: inline-size; }
body.has-shell main:has(> #st-look) > * { min-width: 0; }
/* the roll-out line and the status line that stood above the look are not
   drawn under the shell (Didier, 2026-10-14): Indy's pane says what the
   design still needs, and roll out has its own page */
body.has-shell main > .rail-said, body.has-shell main > .room-needs { display: none; }
/* no rule and no gap above the look: it is the top of the page */
body.has-shell #st-look { border-top: 0; margin-top: 0; padding-top: .25rem; }
/* the stations are not numbered under the shell: the words moved to the
   inspector, so the count no longer runs 01 to 05 down the page */
body.has-shell .stn-num { display: none; }
/* the look: the hero with its verdict under it, as wide as the page allows
   up to a portrait of 560px; the ring of pictures is Variations below */
body.has-shell .work-2up { container-type: inline-size; grid-template-columns: minmax(0, 1fr); }
/* the look's inspector is not drawn: the note on the picture (the brush
   under the hero, the feedback modal) is the way to change it (Didier,
   2026-10-14). Its form stays in the page for the modal to send. */
body.has-shell .work-2up > .pane-insp { display: none; }
/* the hero at the full width of the page, its own height, no frame and no
   bars around it (Didier, 2026-10-14): the fixed-height viewer box is the
   old three-pane room's, not this page's */
body.has-shell .work.work-2up { height: auto; min-height: 0; border: 0; background: transparent; margin: 0 0 1rem; }
body.has-shell .work-2up > .pane-view { padding: 0; overflow: visible; }
body.has-shell .work-2up > .pane-view > .well-focus { display: block; max-width: none; aspect-ratio: auto; height: auto; padding: 0; background: transparent; overflow: visible; }
body.has-shell .work-2up > .pane-view > .well-focus > a { display: block; max-height: none; }
body.has-shell .work-2up > .pane-view > .well-focus img.thumb { display: block; width: 100%; height: auto; max-height: none; border-radius: 6px; }
/* Talk it through, on the page: once the panes are in, the three doors go;
   the chat sits in Indy's pane and the card in the inspector, and what is
   left of the panes on the page takes no room */
body.has-shell #talk-panes:empty { display: none; }
body.has-shell #start:has(#talk-panes:not(:empty)) > .start-doors,
body.has-shell #start:has(#talk-panes:not(:empty)) > .room-start-sub { display: none; }
body.has-shell #talk-panes > .dev-cols.shell-away-talk.shell-away-card { display: none; }
body.has-shell #talk-panes > .dev-cols { height: auto; min-height: 0; }
body.has-shell #start.is-writing > .start-doors, body.has-shell #start.is-writing > .room-start-sub { display: none; }
body.has-shell #write-panes.shell-away-write { display: none; }
.shell-indy .shell-adopted.dev-chat { height: auto; min-height: 0; }
.shell-indy .shell-adopted .write-composer { display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
.shell-indy .shell-adopted .write-composer textarea { min-height: 8rem; }
.shell-indy .shell-adopted .write-composer .btn { align-self: flex-start; height: auto; min-height: 44px; }
.shell-indy .shell-adopted.dev-chat > h3 { display: none; }
.shell-ctl .shell-adopted.dev-rail { height: auto; min-height: 0; padding: .8rem 1rem; }
.shell-ctl .shell-adopted.dev-rail .box { padding: 0; border: 0; background: none; }
/* Variations: one closed line under the design (vault/86 step 5); open,
   the tray as it was */
body.has-shell #st-variations:not(:has(#variations-slot > .tray)) { display: none; }
.stn-head--fold { cursor: pointer; list-style: none; }
.stn-head--fold::-webkit-details-marker { display: none; }
.stn-fold__caret { width: 14px; height: 14px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s; }
.stn-fold[open] > .stn-head--fold .stn-fold__caret { transform: rotate(-90deg); }
body.has-shell #variations-slot > .tray { border-top: 0; padding-top: 0; margin: 0; }
body.has-shell .tray-filter { flex-wrap: wrap; row-gap: .4rem; }
body.has-shell .tray-strip { --tray-th: 132px; display: block; overflow: visible; }
body.has-shell .tray-strip .tgroup { margin: 0 0 1rem; }
body.has-shell .tray .grid { grid-template-columns: repeat(auto-fill, minmax(var(--tray-th), 1fr)); gap: 12px; }
/* the strip's own rule makes its rows a flex line that never wraps, so a
   group wider than the page ran off its right edge: here they wrap */
body.has-shell .tray-strip .grid { display: grid; }

/* ---- the character page, mock B (vault/86, Brett 2026-10-14) -------------
   The look and the turnaround as one unit with one sign-off; Variations as
   one closed line under it; the model the page's width; the voice as a card
   that plays a real line. Sizes, type and spacing are the mock's. */
body.has-shell #st-look .stn-head, body.has-shell #st-model .stn-head, body.has-shell #st-voice .stn-head { margin: 0 0 16px; }
body.has-shell #st-model, body.has-shell #st-voice { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.stn.is-opt .stn-state { color: var(--ink-faint); }
/* the quiet press and the paper one, the mock's two buttons beside the plain */
body.has-shell .btn.btn-quiet, body.has-shell .btn-quiet { background: none; border-color: transparent; box-shadow: none; color: var(--ink-dim); }
body.has-shell .btn-quiet:hover:not(:disabled) { color: var(--ink); border-color: var(--btn-line); }
body.has-shell .btn.btn-paper { background: var(--paper-ink); border-color: var(--paper-ink); color: #161616; box-shadow: none; }
body.has-shell .btn.btn-paper:hover:not(:disabled) { background: var(--display-ink); border-color: var(--display-ink); color: #161616; }
body.has-shell :is(#st-look, #st-variations, #st-model, #st-voice) .btn .icon { width: 16px; height: 16px; }
/* the unit: one frame, one seam, its own words under each plate */
body.has-shell .work-2up > .pane-view:has(> .du) { display: block; }
.du { border-radius: 18px; background: var(--g2); overflow: hidden;
  box-shadow: 0 8px 14px -6px rgba(0,0,0,.34), 0 26px 34px -18px rgba(0,0,0,.3), inset 0 0 0 1px var(--box-line); }
.du-pair, .du-caps { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7917fr); gap: 3px; }
.du-pair { background: #0f0f0f; }
.du-plate { display: block; min-width: 0; background: #7d7d7d; }
.du-look { aspect-ratio: 4 / 5; }
.du-turn { aspect-ratio: 1376 / 768; }
.du-plate > a { display: block; width: 100%; height: 100%; }
.du-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.du-look img { object-position: 50% 40%; }
/* a place or a prop: the look alone, at most 70vh tall and the page wide
   (vault/86 step 4), never the full width at its own height */
.du-solo-plate { display: flex; justify-content: center; background: #0f0f0f; }
.du-solo-plate > a { width: auto; height: auto; max-width: 100%; }
.du-solo-plate img { width: auto; height: auto; max-width: 100%; max-height: 70vh; object-fit: contain; }
.du-solo .du-cap .vstrip { flex-wrap: nowrap; }
.du-turn.is-empty { background: var(--g1); display: grid; place-items: center; }
.du-well { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; text-align: center; }
.du-well p { margin: 0; max-width: 34ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); }
.du-cap { min-width: 0; padding: 12px 14px; }
.du-cap .ident { margin: 0; gap: 4px 10px; font-size: 13px; color: var(--ink-faint); }
.du-cap .ident b { font-family: var(--label); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.du-cap .ident span { font-size: 13px; color: var(--ink-faint); }
.du-cap .ident .ident-not { color: var(--warn); }
.du-cap .vstrip { margin-top: 10px; }
/* the verdict strip under the left plate: ONE row of icons at any width the
   plate has (Brett, 2026-10-14). The master tick is its box alone, its name
   in the tooltip and for a screen reader. */
.du-caps > .du-cap:first-child { padding-left: 12px; padding-right: 12px; }
.du-caps > .du-cap:first-child .vstrip { flex-wrap: nowrap; gap: 2px; }
.du-caps > .du-cap:first-child .vstrip-sep { display: none; }
.du-caps > .du-cap:first-child .vstrip :is(.btn-icon, .master-tick, .more-menu > summary) { width: 24px; min-width: 24px; height: 24px; min-height: 0; padding: 0; gap: 0; justify-content: center; }
.du-caps > .du-cap:first-child .vstrip :is(.btn-icon, .more-menu > summary) .icon { width: 14px; height: 14px; }
.du-caps > .du-cap:first-child .vstrip .master-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.du-cap .du-make { margin-top: 10px; }
.du-cap .du-make .btn { padding: 0 12px; margin-left: -12px; }
.du-cap .iter-results:empty { display: none; }
.du-sign { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.du-sign form { margin: 0; display: inline-flex; }
.du.du-sign-only { margin-top: 14px; }
.du.du-sign-only .du-sign { border-top: 0; }
.du-said { margin-right: auto; font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); }
.du-said b { color: var(--ok); font-weight: 500; }
.du-sign .du-unlock { width: var(--control-h); height: var(--control-h); padding: 0; }
/* the head's lock and the room's line above it: the sign-off row says both */
body.has-shell .pane-bar__tools .room-actions form:has(> .btn-lock) { display: none; }
/* Variations, closed: three small, how many, swap the look */
.du-others { margin-top: 14px; }
.du-others-line { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--g2); box-shadow: inset 0 0 0 1px var(--box-line); }
.du-others-line::-webkit-details-marker { display: none; }
.du-others-strip { display: flex; gap: 6px; flex: none; }
.du-others-strip img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; opacity: .85; }
.du-others-said { font-size: 13.5px; color: var(--ink-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-others-swap { margin-left: auto; flex: none; }
.du-others .du-when-open, .du-others[open] .du-when-shut { display: none; }
.du-others[open] .du-when-open { display: inline; }
.du-others[open] > .stn-body { margin-top: 16px; }
/* the model: the viewer the page's width, one bar under it */
.mv { border-radius: 18px; overflow: hidden; background: radial-gradient(120% 90% at 50% 35%, #2b2b2b 0%, #161616 60%, #0e0e0e 100%);
  box-shadow: 0 8px 14px -6px rgba(0,0,0,.34), 0 26px 34px -18px rgba(0,0,0,.3), inset 0 0 0 1px var(--box-line); }
.mv-view { width: 100%; height: clamp(360px, 55vh, 600px); margin: 0; }
.mv-view canvas { display: block; }
.mv.is-empty .mv-view { height: 160px; display: grid; place-items: center; }
.mv-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--g2); }
.mv-bar form { margin: 0; display: inline-flex; }
.mv-file { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: var(--ink); white-space: nowrap; }
.mv-bar > .btn, .mv-bar > form { flex: none; }
#shell .mv-variants .chip.is-current { color: var(--display-ink); box-shadow: inset 0 0 0 1px var(--paper-dim); border-color: var(--paper-dim); }
.mv-how { flex: 1 1 0; min-width: 3em; font-size: 13px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#shell .mv-bar .drop-zone { aspect-ratio: auto; height: var(--control-h); flex-direction: row; gap: 8px; padding: 0 14px; border: 1px solid transparent; background: none;
  font-family: var(--label); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
#shell .mv-bar .drop-zone .icon { width: 16px; height: 16px; }
#shell .mv-bar .drop-zone.is-over { color: var(--ink); border-color: var(--line-strong); }
.mv-variants { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 12px; background: var(--g2); }
/* the status under the bar takes room only when it says something */
.mv > div:empty, .mv #model-status:not(:has(> *)) { display: none; }
.mv #model-status:has(> *) { padding: 0 18px 12px; background: var(--g2); }
/* the voice: the cast card */
.vs .vc { border-radius: 18px; background: var(--box-bg); padding: 22px 24px 18px;
  box-shadow: 0 8px 14px -6px rgba(0,0,0,.34), 0 26px 34px -18px rgba(0,0,0,.3), inset 0 0 0 1px var(--box-line); }
.vc-top { display: flex; align-items: center; gap: 16px; }
.vc-play, .vaud-play { flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; }
.vc-play { width: 52px; height: 52px; border: 0; background: var(--paper-ink); color: #161616; }
.vc-play:hover { background: var(--display-ink); color: #161616; }
.vc-play.is-off { background: var(--g4); color: var(--ink-faint); cursor: default; }
.vplay-ico { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.vplay-ico .is-pause, .is-playing > .vplay-ico .is-play { display: none; }
.is-playing > .vplay-ico .is-pause { display: inline; }
.vc-name { min-width: 0; font-size: 24px; font-weight: 400; line-height: 1.15; color: var(--display-ink); }
.vc-name small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-dim); }
.vwave { position: relative; display: flex; align-items: center; gap: 2px; height: 72px; margin: 20px 0 6px; cursor: pointer; }
.vwave[hidden] { display: none; }
.vwave i { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--ink-ghost); transition: background .08s; }
.vwave i.on { background: var(--paper-ink); }
.vwave:not([data-drawn]) { background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.vwave-head { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; border-radius: 1px; background: var(--chrome); opacity: 0; pointer-events: none; }
.vwave.is-playing .vwave-head { opacity: 1; }
.vwave-sm { height: 34px; margin: 12px 0 4px; gap: 1.5px; }
.vc-cap { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-dim); }
.vc-cap q { color: var(--ink); quotes: none; }
.vc-shot { margin-right: .6em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.vc-t { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.vc-acts { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.vc-acts form { margin: 0; display: inline-flex; }
.vc-acts .grow { flex: 1 1 auto; }
.vc-said { font-size: 13px; color: var(--warn); }
.vc-said:empty { display: none; }
.vc.is-uncast .vc-top .vc-said { margin-left: auto; }
/* what you're after, and what the search read in it */
.vfind { margin-top: 28px; }
.vfind h3 { margin: 0 0 10px; font-family: var(--body); font-size: 16px; font-weight: 500; letter-spacing: .01em; text-transform: none; color: var(--display-ink); }
.vbrief { border-radius: 18px; background: var(--g2); box-shadow: inset 0 0 0 1px var(--box-line); padding: 18px 20px 16px; }
.vbrief-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.vbrief-head label { font-size: 13px; color: var(--ink-faint); }
.vbrief-said { margin-left: auto; font-size: 13px; color: var(--warn); }
.vbrief textarea { display: block; width: 100%; min-height: calc(5 * 1.55em); resize: none; overflow: hidden; border: 0; outline: 0; padding: 0; background: transparent; box-shadow: none;
  color: var(--ink); font: inherit; font-size: 16px; line-height: 1.55; }
.vbrief-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.vbrief-read { margin-right: 4px; font-size: 13px; color: var(--ink-faint); }
.vchip { position: relative; display: inline-flex; align-items: center; height: 30px; border-radius: 15px; background: var(--g3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.vchip select, .vchip input { height: 30px; margin: 0; padding: 0 28px 0 12px; border: 0; border-radius: 15px; outline: 0; background: transparent; box-shadow: none;
  -webkit-appearance: none; appearance: none; font: 400 13.5px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.vchip input { width: 9em; padding-right: 12px; cursor: text; text-transform: capitalize; }
.vchip input::placeholder { color: var(--ink-faint); text-transform: none; }
.vchip .icon { position: absolute; right: 10px; width: 12px; height: 12px; transform: rotate(90deg); color: var(--ink-faint); pointer-events: none; }
.vchip.is-ghost { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.vchip.is-ghost select, .vchip.is-ghost input { color: var(--ink-faint); }
.vbrief-go { margin-left: auto; display: flex; gap: 8px; }
.vsearched { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); }
/* the auditions, two across */
.vauds { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vauds:empty { display: none; }
.vaud-empty { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--ink-faint); }
.vaud { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px 14px; border-radius: 16px; background: var(--g2); box-shadow: inset 0 0 0 1px var(--box-line); }
.vaud[hidden] { display: none; }
.vaud.is-cast { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent); }
.vaud-top { display: flex; align-items: center; gap: 12px; }
.vaud-play { width: 38px; height: 38px; border: 0; background: var(--g4); color: var(--display-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.vaud-play .vplay-ico { width: 14px; height: 14px; }
.vaud-play:hover { color: var(--display-ink); background: var(--g4); box-shadow: inset 0 0 0 1px var(--ink-faint); }
.vaud-name { min-width: 0; font-size: 15.5px; line-height: 1.25; color: var(--display-ink); overflow-wrap: anywhere; }
.vaud-name small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }
.vaud-desc, .vaud-none { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vaud-none { margin-top: 12px; color: var(--ink-faint); }
.vaud-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.vaud-foot .vc-t { margin-right: auto; }
.vaud-foot form { margin: 0; }
.vaud-now { font-family: var(--label); font-weight: 600; font-size: 11.2px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.vaud.vaud-more { height: auto; min-height: 120px; justify-content: center; align-items: center; background: none; border: 0; box-shadow: inset 0 0 0 1px var(--line);
  font: 400 13.5px/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-faint); white-space: normal; }
.vaud.vaud-more:hover { color: var(--ink); }
/* the room's line under the voice: In scenes, one quiet row as in the mock;
   the scene numbers are in the fold, not on the row */
body.has-shell #gallery { margin-top: 44px; border: 0; border-radius: 14px; background: var(--g2); box-shadow: inset 0 0 0 1px var(--box-line); --gl-r: 14px; }
body.has-shell #gallery > summary { min-height: 0; padding: 14px 18px; gap: 14px; }
body.has-shell #gallery > summary b { font: 400 13.5px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-dim); }
body.has-shell #gallery > summary .meta { font-size: 13.5px; }
body.has-shell #gallery > summary .scene-pills { display: none; }

/* the timeline's right column (its inspector over the docked shot bench) in the controls */
body.has-shell #tl-app.shell-away-tlr { grid-template-columns: minmax(0, 1fr) 0; }
.shell-ctl .shell-adopted#tl-right { border-left: 0; flex: 1 1 auto; min-height: 0; }
/* the script's and the brief's page title ("Script", "Brief") says what the
   lit room already says; their paper's acts sit under Story the same way */
body.has-shell .flow-page-head { display: none; }
body.has-shell .flow { padding-top: 1rem; }
/* the script's and the brief's acts beside the page's title (Didier, 2026-10-14) */
.pane-bar__tools .shell-adopted.paper__acts {
  --pp-bg: var(--g2); --pp-ink: var(--paper-ink); --pp-dim: var(--paper-dim);
  display: flex; align-items: center; gap: .9rem;
}
.pane-bar__tools .shell-adopted.paper__acts .paper__link { font-size: .66rem; }
.pane-bar__tools .shell-adopted.paper__acts .paper__refine, .pane-bar__tools .shell-adopted.paper__acts .paper__save { height: 28px; padding: 0 .7rem 0 .35rem; font-size: .64rem; gap: .4rem; order: 1; }
.pane-bar__tools .shell-adopted.paper__acts .paper__refine img { width: 20px; height: 20px; }
body.has-shell .paper__head--title.shell-away-acts .paper__title { align-items: flex-start; text-align: left; }
body.has-shell .paper__head--title.shell-away-acts .paper__eyebrow { justify-content: flex-start; }

/* the tally's panel, the Running strip at the top of Indy's pane (not a
   floating modal: Didier, 2026-10-14) */
.shell-running { display: block; flex: none; }
.shell-running:empty { display: none; }
.shell-running .tally-panel { position: static; width: auto; max-width: none; margin: .6rem .6rem 0; border-radius: 8px; animation: none; }
.shell-running .tally-scroll { max-height: 40vh; }
/* the strip itself: one row per job */
.shell-running .tally-strip { border-color: rgba(217,164,65,.35); background: #1a1813; padding: 0; max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.shell-running .tally-strip::before { display: none; }
.strip-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; font: 500 .66rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.strip-head.is-live { color: #d9a441; }
.strip-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .5; }
.strip-head.is-live .strip-dot { opacity: 1; animation: strip-breathe 2.4s ease-in-out infinite; }
@keyframes strip-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.strip-n { color: var(--ink-faint); }
.strip-close { margin-left: auto; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--ink-faint); font-size: 1rem; line-height: 1; cursor: pointer; }
.strip-close:hover { background: var(--g4); color: var(--ink); }
.strip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; align-items: baseline; padding: .5rem .75rem .6rem; border-top: 1px solid rgba(239,230,214,.08); font-size: .84rem; }
.strip-what { color: var(--paper-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.strip-what:hover { text-decoration: underline; }
.strip-code { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.strip-when { color: var(--ink-dim); font-size: .76rem; white-space: nowrap; }
.strip-sub { grid-column: 1 / -1; color: var(--ink-faint); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-why { color: var(--warn, #d98a5a); white-space: normal; }
.strip-line { grid-column: 1 / -1; display: block; height: 2px; border-radius: 2px; background: rgba(239,230,214,.12); overflow: hidden; margin-top: .2rem; }
.strip-line__fill { display: block; height: 100%; width: 40%; background: #d9a441; animation: strip-run 1.6s ease-in-out infinite; }
.strip-line__fill.is-waiting { width: 100%; background: rgba(239,230,214,.18); animation: none; }
@keyframes strip-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.strip-stop { grid-column: 2; justify-self: end; margin: 0; }
.strip-mini { border: 1px solid rgba(239,230,214,.25); background: none; color: var(--ink-dim); border-radius: 999px; font-size: .66rem; padding: .1rem .5rem; cursor: pointer; }
.strip-mini:hover { color: var(--ink); border-color: var(--ink); }
.strip-grp { padding: .5rem .75rem .1rem; border-top: 1px solid rgba(239,230,214,.08); font: 500 .62rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.strip-row.is-landed .strip-what { color: var(--ink); }
.strip-new { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #d9a441; margin-left: .3rem; }
.strip-empty, .strip-err { margin: 0; padding: .4rem .75rem .7rem; font-size: .8rem; color: var(--ink-faint); border-top: 1px solid rgba(239,230,214,.08); }
.strip-err { color: var(--warn, #d98a5a); }
.strip-money { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .5rem .75rem .6rem; border-top: 1px solid rgba(239,230,214,.08); font-size: .7rem; color: var(--ink-faint); }

/* ---- 2 · Indy: the panel sits in its pane, not over the page -------------- */
html body.has-shell.has-indy-panel, html body.has-shell.has-indy-panel:has(> .design-rail) { padding-left: 0; --frame-left: 0px; }
html body.has-shell.has-indy-panel > .site-header { margin-left: 0; }
html body.has-shell .site-header > .brand--tab { width: auto; margin-right: 0; }
html body.has-shell .site-header > .brand--tab ~ .title-bar-rule { display: inline-block; }
body.has-shell > .design-rail { display: none; }
body.has-shell .indy-panel {
  position: static; width: auto; height: auto; flex: 1; min-height: 0;
  border-right: 0; box-shadow: none; background: none;
}
html.ip-closed body.has-shell .indy-panel, body.has-shell .indy-panel[hidden] { display: none !important; }
body.has-shell .shell-indy .shell-head__name { color: var(--paper-ink); }

/* a page's own pieces, moved into the panes (shell.js adopt): the
   conversation into Indy's, the notes and the inspector into the controls */
.shell-indy .shell-adopted {
  display: flex; flex-direction: column; flex: 1; min-height: 0; max-width: none;
  padding: .75rem 1rem 1rem; opacity: 1 !important; overflow: visible;
}
.shell-indy .shell-adopted > * { min-width: 0; }
.shell-indy .shell-adopted .dev-log { flex: 1; min-height: 0; height: auto; max-height: none; }
.shell-indy .shell-adopted .dev-msg { max-width: none; }
.shell-indy .shell-adopted .dev-composer { margin-top: .75rem; }
.shell-indy .shell-adopted .done-chat__head { margin-bottom: .5rem; }
.shell-ctl .shell-adopted {
  flex: none; width: auto !important; max-width: none; height: auto !important; max-height: none !important;
  position: static !important; padding: .75rem 1rem 1rem; overflow: visible; border: 0; box-sizing: border-box;
}
.shell-ctl .shell-adopted.draft-notes { gap: 1.25rem; }
.shell-ctl .shell-adopted.pane-insp { background: none; }
body.has-shell .flow-cols.shell-away-chat,
body.has-shell .flow-cols--angle.shell-away-chat,
body.has-shell .flow-cols.shell-away-notes,
body.has-shell .flow-cols--draft.shell-away-chat.shell-away-notes { grid-template-columns: minmax(0, 1fr); }
body.has-shell .flow-cols--draft.shell-away-chat:not(.shell-away-notes) { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }
body.has-shell .flow-cols--draft.shell-away-notes:not(.shell-away-chat) { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); }
body.has-shell .done-grid.shell-away-chat, body.has-shell .done-grid.is-refining.shell-away-chat { grid-template-columns: minmax(0, 1fr); }
body.has-shell .done-grid.shell-away-chat .flow-paper { padding: 0; }
/* the character room's frame stays inside its pane; its inspector is pane 4 */
body.has-shell .work { width: auto; margin: 1rem 0 1.5rem; }
body.has-shell .work.work-2up.shell-away-insp { grid-template-columns: minmax(0, 1fr); }
.shell-ctl .shell-adopted.pane-insp .pane-h { position: static; }
/* the board's inspector (rooms-board.js fills it): pane 4, not a fixed column */
.shell-ctl .shell-adopted.rv-ins { z-index: auto; background: none; border-left: 0; }
body.has-shell.board-rooms main, body.has-shell.board-rooms.rv-ins-open main { padding-right: var(--page-gutter); }
html:not(.ip-closed) body.has-shell.has-indy-panel.board-rooms.rv-ins-open { padding-right: 0; }
html:not(.ip-closed) body.has-shell.has-indy-panel.board-rooms.rv-ins-open > .site-header { margin-right: 0; }
/* the shot bench's side column, the scene's and the reference's inspectors */
body.has-shell .bench-body.shell-away-bench { grid-template-columns: minmax(0, 1fr); }
.shell-ctl .shell-adopted.bench-side { top: auto; }
body.has-shell .sd.shell-away-sdins { grid-template-columns: minmax(14rem, calc(22rem * var(--sd-z, 1))) minmax(0, 1fr); }
/* two columns here even where rooms.css stacks the scene, so the sheet keeps
   its edge to drag and its scale (rooms.css .sd-grip) */
@container scene (max-width: 844px) {
  body.has-shell .sd.shell-away-sdins .sd-script { position: relative; }
  body.has-shell .sd.shell-away-sdins .sd-grip { display: flex; }
  body.has-shell .sd.shell-away-sdins .screenplay.scene-screenplay { font-size: calc(12px * var(--sd-z, 1)); }
}
body.has-shell .rd.shell-away-rdins { grid-template-columns: minmax(0, 1fr); }
.shell-ctl .shell-adopted.sd-ins { border: 0; border-radius: 0; background: none; }
/* rails the global left pane now carries: the research folders, the canvas's sidebar */
body.has-shell .rail-sticky, body.has-shell .canvas-sidebar { display: none; }

/* ---- 3 · the page's bar --------------------------------------------------- */
.pane-bar {
  position: sticky; top: var(--sh-top); z-index: 60; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: 0 var(--page-gutter);
  background: var(--g2); border-bottom: 1px solid var(--line);
  font: 500 .72rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}
body.page-canvas .pane-bar { position: static; }
.pane-bar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pane-switch {
  display: inline-flex; flex: none; padding: 2px; border-radius: 7px; background: var(--g1); box-shadow: inset 0 0 0 1px var(--line);
}
.pane-switch__opt {
  padding: .3rem .7rem; border-radius: 5px; color: var(--ink-dim); text-decoration: none;
  font: 500 .7rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
}
.pane-switch__opt:hover { color: var(--ink); }
.pane-switch__opt.is-current { background: var(--g4); color: var(--paper-ink); }
body.has-shell .flashes { margin: .75rem var(--page-gutter) 0; }
body.has-shell .site-footer { margin-top: auto; }

/* ---- 4 · controls ---------------------------------------------------------- */
.shell-ctl__body { padding: 1rem; font-size: .9rem; }
.shell-empty { margin: 1rem; color: var(--ink-faint); font: 400 .85rem/1.4 var(--body); }

/* ---- narrow windows: the panes stack under the page ----------------------- */
@media (max-width: 1100px) {
  .shell { display: flex; flex-direction: column; min-height: 0; align-items: stretch; }
  .shell-split { display: none; }
  .shell-nav, .shell-indy, .shell-ctl { position: static; height: auto; max-height: 50vh; width: auto; }
  .shell-nav { order: 1; max-height: none; }
  .shell-page { order: 2; min-height: 0; }
  .shell-indy { order: 3; }
  .shell-ctl { order: 4; }
  html.sh-fold-nav .shell-nav .shell-tools { display: none; }
html.sh-fold-nav .shell-nav .shell-head, html.ip-closed .shell-indy .shell-head, html.sh-fold-ctl .shell-ctl .shell-head { flex-direction: row; padding: 0 .5rem 0 1rem; }
  html.sh-fold-nav .shell-nav .shell-head__name, html.ip-closed .shell-indy .shell-head__name, html.sh-fold-ctl .shell-ctl .shell-head__name { writing-mode: horizontal-tb; order: 0; max-height: none; }
  .pane-bar { position: static; }
}

/* rename, on the overview's bar */
.pane-rename { position: relative; flex: none; }
.pane-rename > summary { list-style: none; cursor: pointer; display: inline-block; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 999px; font: inherit; color: var(--ink-dim); }
.pane-rename > summary::-webkit-details-marker { display: none; }
.pane-rename > summary:hover { color: var(--ink); border-color: var(--ink-faint); }
.pane-rename__form {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 320px; padding: .8rem; box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--g2); border: 1px solid var(--line-strong, var(--line)); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  text-transform: none; letter-spacing: 0; font: 400 .9rem/1.3 var(--body);
}
.pane-rename__form input[type=text] { flex: 1 1 160px; min-width: 0; font: inherit; padding: .4rem .5rem; background: var(--g1); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; }
.pane-rename__form .btn { flex: none; }
.pane-rename__note { flex: 1 1 100%; font-size: .74rem; color: var(--ink-faint); }

/* ---- the keyboard (?) ----------------------------------------------------- */
.shell-keys {
  position: fixed; top: 12px; right: 12px; z-index: 300; width: 320px; max-width: calc(100vw - 24px);
  background: var(--g2); color: var(--ink); border: 1px solid var(--line-strong, var(--line)); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); font-family: var(--body);
}
.shell-keys[hidden] { display: none; }
.shell-keys__head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .6rem .6rem 1rem; border-bottom: 1px solid var(--line); font: 500 .68rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.shell-keys__close { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--ink-faint); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.shell-keys__close:hover { background: var(--g4); color: var(--ink); }
.shell-keys__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem .9rem; margin: 0; padding: .9rem 1rem .5rem; font-size: .84rem; line-height: 1.4; }
.shell-keys__list dt { white-space: nowrap; color: var(--ink-dim); }
.shell-keys__list dd { margin: 0; color: var(--ink); }
.shell-keys kbd { display: inline-block; min-width: 1.3em; padding: .05em .4em; border: 1px solid var(--line-strong, var(--line)); border-bottom-width: 2px; border-radius: 4px; background: var(--g1); color: var(--paper-ink); font: 500 .78rem/1.4 var(--mono, monospace); text-align: center; }
.shell-keys__note { margin: 0; padding: .3rem 1rem .9rem; font-size: .74rem; color: var(--ink-faint); }

/* ---- the character page under glass (INDY_GLASS): the same corners and the
   mock's two buttons. Glass draws every corner from --gl-r and every control
   as a glass face, so the page names its own radii and keeps the paper fill
   and the quiet press (vault/86). */
body.glass :is(.du, .mv, .vs .vc, .vbrief) { --gl-r: 18px; }
body.glass .vaud { --gl-r: 16px; }
body.glass :is(.shell-ctl .shell-adopted#st-who .room-desc) { --gl-r: 15px; }
body.glass :is(.du-others-line) { --gl-r: 12px; }
body.glass :is(.vchip, .vchip select, .vchip input) { --gl-r: 15px; }
body.glass :is(.du-others-strip img) { --gl-r: 6px; }
body.glass :is(.vwave i) { --gl-r: 2px; }
body.glass :is(.vc-play, .vaud-play) { --gl-r: 999px; }
body.glass.glass-squircle :is(.vc-play, .vaud-play, .vchip, .vchip select, .vchip input) { corner-shape: round; }
body.glass #shell .btn.btn-paper, body.glass #shell .vc-play:not(.is-off) {
  background: var(--paper-ink) !important; border-color: var(--paper-ink) !important; box-shadow: none !important; color: #161616;
}
body.glass #shell .btn.btn-paper:hover:not(:disabled), body.glass #shell .vc-play:not(.is-off):hover {
  background: var(--display-ink) !important; border-color: var(--display-ink) !important; color: #161616;
}
body.glass #shell .btn.btn-quiet { background: none !important; border-color: transparent !important; box-shadow: none !important; }
body.glass #shell .btn.btn-quiet:hover:not(:disabled) { background: var(--g3) !important; }
body.glass #shell .vaud-play { background: var(--g4) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line-strong) !important; }
body.glass #shell :is(.vbrief textarea, .vchip select, .vchip input) { box-shadow: none; background: transparent; }