/* ============================================================ base */

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  font: 400 14px/1.45 var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body::after { /* film grain */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--accent-soft); }

.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================ controls */

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
button:disabled { opacity: 0.45; cursor: default; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-m);
  font-weight: 520;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--bg-sunk); }
.btn.outline { border-color: var(--line-strong); }
.btn.solid { background: var(--ink); color: var(--bg); font-weight: 560; }
.btn.solid:hover:not(:disabled) { background: var(--ink); opacity: 0.88; }
.btn.accent { background: var(--accent); color: var(--accent-ink); font-weight: 580; }
.btn.accent:hover:not(:disabled) { background: var(--accent); filter: brightness(1.06); }
.btn.danger { color: var(--danger); }
.btn.icon { width: 28px; padding: 0; justify-content: center; }
.btn svg { width: 15px; height: 15px; flex: none; }

.seg {
  display: inline-flex;
  background: var(--bg-sunk);
  border-radius: var(--r-m);
  padding: 2px;
  gap: 2px;
}
.seg button {
  height: 24px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 540;
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--bg-raise);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--pill);
  border: 1px solid var(--pill-line);
  border-radius: var(--r-m);
  padding: 6px 9px;
  outline: none;
  transition: border-color var(--t-fast);
}
input:focus, textarea:focus { border-color: var(--line-strong); }

/* The comment field (views/commentfield.js): a text field that shows bold,
   italic, links and @-chips in place of their markup */
.cfield {
  font: inherit;
  color: var(--ink);
  background: var(--pill);
  border: 1px solid var(--pill-line);
  border-radius: var(--r-m);
  padding: 6px 9px;
  outline: none;
  transition: border-color var(--t-fast);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  cursor: text;
}
.cfield:focus { border-color: var(--line-strong); }
.cfield[contenteditable="false"] { opacity: 0.6; cursor: default; }
.cfield:empty::before,
.cfield:has(> br:only-child)::before {
  content: attr(placeholder);
  color: var(--ink-3);
  pointer-events: none;
}
.cfield a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.cfield .mention { cursor: default; }

.field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

kbd {
  font: 500 10.5px var(--mono);
  color: var(--ink-2);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 560;
  background: var(--bg-sunk);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip.mono { font-family: var(--mono); font-weight: 500; }
.chip .x { opacity: 0.6; cursor: pointer; font-size: 12px; line-height: 1; }
.chip .x:hover { opacity: 1; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ============================================================ topbar */

.topbar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  z-index: 20;
}
.topbar .crumbs {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin-right: 4px;
}
.topbar .crumbs a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.topbar .crumbs a:hover { color: var(--ink); }
.topbar .crumbs .sep { color: var(--ink-3); font-size: 12px; }
.topbar .crumbs .here {
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .spacer { flex: 1; }
.wordmark {
  font-weight: 740;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.wordmark .mark {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--accent);
  display: inline-grid;
  place-items: center;
}
.wordmark .mark::before {
  content: "";
  width: 9px; height: 6px;
  border-radius: 1.5px;
  background: var(--accent-ink);
}

.ver-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-m);
  border: 1px solid var(--line-strong);
  font: 500 12px var(--mono);
  white-space: nowrap;
}
.ver-chip svg { width: 12px; height: 12px; flex: none; transform: rotate(90deg); opacity: 0.6; }
.pop .mi svg, .cmt svg, .composer svg { width: 14px; height: 14px; flex: none; }
svg { max-width: 100%; }
.ver-chip:hover { background: var(--bg-sunk); }
.ver-chip .hero { color: var(--accent-text); font-weight: 700; }
/* comparison controls: their own compact module beside the version chip */
.toolbar .compare-tools-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  padding: 0 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
}
.toolbar .compare-tools-bar button {
  width: 24px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.toolbar .compare-tools-bar button:hover:not(:disabled) {
  background: var(--bg-sunk);
  color: var(--ink);
}
.toolbar .compare-tools-bar button:disabled { opacity: 0.38; }
.toolbar .compare-tools-bar button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.toolbar .compare-tools-bar svg { width: 13px; height: 13px; }

.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.conn-dot.off { background: var(--ink-3); }

/* two-row workspace chrome: header (nav/title) + toolbar (views & functions) */
.chrome { position: relative; z-index: 20; }
.chrome .topbar.hdr { height: 42px; }
.toolbar {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.toolbar .spacer { flex: 1; }
/* The four views as tall browser-style tabs. The strip is an opaque plate in
   the chrome colour that rises from the tools row into the empty center of
   the header, so the header rule simply stops under it; only the active tab
   is outlined, filled with the canvas colour and extended one pixel through
   the toolbar rule, so it reads as attached to the page below. Nothing else
   about the toolbar's flow changes: the left and right groups still lay out
   around the strip. */
.toolbar .seg.center {
  --tab-strip-h: 62px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 21;
  /* Intrinsic width: an absolutely positioned box measured from left:50%
     would otherwise shrink to half the toolbar and squeeze its labels. */
  width: max-content;
  height: var(--tab-strip-h);
  padding: 4px 6px 0;
  gap: 4px;
  align-items: flex-end;
  background: var(--bg);
  border-radius: 14px 14px 0 0;
}
.toolbar .seg.center button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 0.85vw, 10px);
  white-space: nowrap;
  height: calc(var(--tab-strip-h) - 4px);
  padding: 0 clamp(12px, 2.6vw - 5px, 26px);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: transparent;
  /* The platform's own sans (San Francisco, Segoe) at medium weight: the
     four names read as titles without a voice of their own. Text, icons and
     spacing are fluid so the strip stays near half the window; the tab's
     height and padding hold. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(12.5px, 1.25vw, 15px);
  font-weight: 500;
  letter-spacing: 0;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  box-shadow: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.toolbar .seg.center button:hover { background: var(--bg-sunk); color: var(--ink); }
.toolbar .seg.center button[aria-pressed="true"] {
  height: calc(var(--tab-strip-h) - 3px);
  margin-bottom: -1px;
  background: var(--bg-sunk);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
.toolbar .seg.center svg { width: clamp(16px, 1.65vw, 20px); height: clamp(16px, 1.65vw, 20px); flex: none; }
.toolbar .seg.center button[aria-pressed="true"] svg { color: var(--accent); }
/* the title never runs under the strip: the header's center belongs to it */
.chrome .topbar.hdr .crumbs { max-width: calc(50% - clamp(230px, 25vw + 50px, 330px)); overflow: hidden; }
.chrome .topbar.hdr .crumbs a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================ tooltips */

.tip {
  position: fixed;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 540;
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  white-space: nowrap;
  animation: fade-in 100ms ease-out;
}
.tip.key-only { padding: 4px 5px; }
.tip .k {
  font: 550 9.5px var(--mono);
  border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent);
  padding: 0 4px;
  border-radius: 3px;
  line-height: 14px;
}

/* ============================================================ popover / dialog */

.pop-scrim { position: fixed; inset: 0; z-index: 50; }
.pop {
  position: fixed;
  z-index: 51;
  min-width: 200px;
  max-width: 340px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-pop);
  padding: 5px;
  /* Quick and plain: a menu that eases in over a long overshoot reads as a
     slow app, not a fluid one (Nathan, 2026-09-10). */
  animation: pop-in 90ms ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-3px) scale(0.985); } }
.pop .mi {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border-radius: var(--r-m);
  font-size: 13px;
  font-weight: 500;
}
.pop .mi:hover { background: var(--bg-sunk); }
.pop .mi.danger { color: var(--danger); }
.pop .mi .hint { margin-left: auto; font: 400 11px var(--mono); color: var(--ink-3); }
.pop .rule { height: 1px; background: var(--line); margin: 5px 4px; }
.pop .acct-id { padding: 7px 9px 4px; font: 500 11.5px var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.pop .mi:disabled { opacity: 0.4; cursor: default; }
.pop .mi:disabled:hover { background: transparent; }
/* A pointer-opened menu focuses its first item silently; the ring appears
   once the keyboard takes over (ui.js popover). */
.pop[data-pointer-open] .mi:focus-visible { outline: none; }
.pop.script-edit-pop {
  width: 240px;
  max-width: calc(100vw - 16px);
  max-height: min(480px, calc(100dvh - 16px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.script-edit-pop .title { letter-spacing: 0; }
.script-edit-pop .script-speaker-name { min-width: 0; overflow-wrap: anywhere; }
.script-edit-pop [aria-checked="false"] .hint { visibility: hidden; }

/* version menu — versions scroll, the action footer stays put */
.pop .ver-rows { max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.pop .ver-compare-foot {
  margin: 5px -5px -5px;
  padding: 5px 6px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
}
.pop .ver-compare-hint {
  grid-column: 1 / -1;
  padding-left: 5px;
  font: 500 11px var(--sans);
  color: var(--ink-3);
}
.pop .ver-import-toggle { grid-column: 1; justify-self: start; }
.pop .ver-compare-action { grid-column: 2; justify-self: end; }
.pop .ver-footer-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-m);
  font: 600 11.5px var(--sans);
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.pop .ver-footer-action:hover { background: var(--bg-sunk); color: var(--ink); }
.pop .ver-compare-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.pop .ver-footer-action svg { width: 13px; height: 13px; flex: none; }
.pop .ver-comparing {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font: 650 8.5px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.pop .ver-comparing:hover { background: var(--accent); color: var(--accent-ink); }
.ver-chip .ver-compare-tag { color: var(--accent-text); font-weight: 650; }
.acct-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 650 10px var(--sans);
}
.pop .pad { padding: 8px 9px; }
.pop .title {
  font-size: 11px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  padding: 7px 9px 3px;
}
.pop.comment-filter-pop {
  max-height: calc(100vh - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
}
/* The comment filter: search leads, then sort and author, then quick chips
   under small labels, then the remaining lists folded behind a summary, then
   Reset. Tags wear the chip they wear on every card. */
.cf-search-row { position: relative; display: flex; align-items: center; margin: 2px 2px 4px; }
.cf-search-row > svg {
  position: absolute;
  left: 9px;
  width: 13px;
  height: 13px;
  color: var(--ink-3);
  pointer-events: none;
}
.cf-search {
  width: 100%;
  height: 30px;
  padding: 0 10px 0 28px;
  border: 1px solid var(--pill-line);
  border-radius: var(--r-m);
  background: var(--pill);
  color: var(--ink);
  font: 500 12.5px var(--sans);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color var(--t-fast);
}
.cf-search:focus { border-color: var(--line-strong); }
.cf-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cf-section { display: grid; gap: 5px; padding: 6px 4px 5px; }
.cf-label {
  padding-left: 3px;
  font: 640 9.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cf-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 580;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.cf-chip svg { width: 12px; height: 12px; flex: none; }
.cf-chip:hover { background: var(--bg-well); color: var(--ink); }
.cf-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.tag-chip.cf-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
}
/* Facet rows unfurl on hover or focus: at rest only the chosen chips show, or
   "Any" when none is chosen, so the popover stays quiet */
.cf-chips.cf-unfurl { min-height: 24px; border-radius: 4px; }
.cf-unfurl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-unfurl .cf-any {
  display: none;
  align-items: center;
  height: 22px;
  padding-left: 3px;
  font: 400 11px var(--mono);
  color: var(--ink-3);
}
.cf-unfurl:not(.has-pick):not(:hover):not(:focus-within) .cf-any { display: inline-flex; }
.cf-unfurl:not(:hover):not(:focus-within) > button:not([aria-pressed="true"]) { display: none; }
@media (hover: none) {
  .cf-unfurl .cf-any { display: none !important; }
  .cf-unfurl > button { display: inline-flex !important; }
}
.tag-chip.cf-tag[aria-pressed="true"],
.tag-chip.cf-tag[aria-pressed="true"]:hover { background: var(--accent); color: var(--accent-ink); }
.seg.cf-seg { width: 100%; display: flex; }
.seg.cf-seg button { flex: 1; height: 24px; padding: 0 6px; font-size: 11.5px; }
.cf-groups { display: grid; gap: 1px; padding: 2px 0; }
.cf-disclosure {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: var(--r-m);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 520;
  text-align: left;
}
.cf-disclosure:hover { background: var(--bg-sunk); }
.cf-disclosure .cf-summary {
  margin-left: auto;
  font: 400 10.5px var(--mono);
  color: var(--ink-3);
}
.cf-disclosure.active .cf-summary { color: var(--accent-text); font-weight: 600; }
.cf-disclosure > svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--ink-3);
  transition: transform var(--t-fast);
}
.cf-disclosure.open > svg { transform: rotate(180deg); }
.cf-list { max-height: 176px; overflow-y: auto; padding: 0 0 4px 8px; scrollbar-width: thin; }
.cf-list[hidden] { display: none; }
.cf-list .mi { padding: 5px 8px; font-size: 12px; }
.cf-list .cf-option { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-reset:disabled { opacity: 0.4; }
/* Fixed-header quick filters: the resting colour chip is hollow while every
   Shot colour shows; a tag chip inside a row is a label, not a control. */
.pop .mi-swatches .sw-chip.any {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.pop .mi .tag-chip { pointer-events: none; }

.dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--scrim);
  display: grid;
  place-items: center;
  animation: fade-in 140ms ease-out;
}
@keyframes fade-in { from { opacity: 0; } }
.dialog {
  width: min(440px, calc(100vw - 40px));
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  padding: 18px;
  animation: pop-in 150ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.dialog h2 { font-size: 15px; font-weight: 680; letter-spacing: -0.01em; margin-bottom: 12px; }
.dialog .row { display: flex; gap: 8px; align-items: center; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialog.wide { width: min(640px, calc(100vw - 40px)); }
.share-dialog .row > input { min-width: 0; }
.share-dialog .share-copy { border-color: transparent; }
.share-dialog .share-title {
  margin-bottom: 2px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.share-dialog .share-subtitle {
  margin-bottom: 12px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 560;
}
.share-dialog .share-link-rule {
  height: 1px;
  margin: 12px 0;
  background: var(--line);
}
.share-dialog .share-links { display: grid; gap: 6px; }
.share-dialog .share-password { flex: 1; min-width: 0; }
@media (max-width: 360px) {
  .share-dialog .share-create-row { flex-wrap: wrap; justify-content: flex-end; }
  .share-dialog .share-password { flex: 1 0 100%; }
}
/* project branding: one small mark beside the project name everywhere */
.crumb-logo {
  height: 20px;
  max-width: 72px;
  object-fit: contain;
  border-radius: 4px;
  margin-right: 2px;
}
.phead-logo {
  align-self: center;
  height: 18px;
  max-width: 64px;
  object-fit: contain;
  border-radius: 4px;
}
.intro-logo {
  height: 44px;
  max-width: 160px;
  object-fit: contain;
  justify-self: start;
  border-radius: 6px;
}
.settings-logo {
  display: inline-flex;
  align-items: center;
  min-width: 34px;
  height: 26px;
}
.settings-logo img {
  height: 26px;
  max-width: 96px;
  object-fit: contain;
  border-radius: 4px;
}
.settings-logo .muted { font-size: 11.5px; }

/* poster picker: every current Shot as a selectable tile */
.poster-dialog { min-width: 430px; }
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.poster-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--thumb-bed);
  border: 2px solid transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.poster-tile img { width: 100%; height: 100%; object-fit: cover; }
.poster-tile:hover { border-color: var(--line-strong); }
.poster-tile[aria-pressed="true"] { border-color: var(--accent); }
.poster-tile .poster-num {
  position: absolute;
  top: 4px;
  left: 6px;
  font: 620 10px var(--mono);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.poster-tile.auto span {
  font: 560 11px var(--mono);
  color: var(--ink-3);
}

/* project settings dialog: label left, controls right, one row per fact */
.project-settings {
  width: min(520px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.project-settings .settings-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.project-settings .settings-row .lbl {
  font-size: 11.5px;
  font-weight: 580;
  color: var(--ink-2);
}
.project-settings .settings-row .ctl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.project-settings .settings-scale {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.project-settings .settings-scale input[type="range"] { width: 150px; }
.project-settings .settings-row .seg { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 520px) {
  .project-settings .settings-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

.video-settings { width: min(360px, calc(100vw - 40px)); }
.video-settings .actions { flex-wrap: wrap; }
.view-toggles { border: 0; padding: 0; margin: 0; min-width: 0; }
.view-toggles legend { padding: 0 0 6px; font-size: 11.5px; color: var(--ink-2); }
.view-toggles label {
  display: flex; align-items: center; gap: 8px; min-height: 32px;
  font-size: 12px; cursor: pointer;
}
.view-toggles input { margin: 0; width: 15px; height: 15px; accent-color: var(--accent); }
.view-toggles svg { width: 16px; height: 16px; flex: 0 0 16px; }
.view-toggles label.unavailable { opacity: 0.45; cursor: default; }
.view-toggle-row { display: flex; align-items: center; gap: 4px; position: relative; }
.view-toggle-row label { flex: 1; min-width: 0; }
.view-drag-handle { display: grid; place-items: center; width: 24px; height: 32px; flex: none; color: var(--ink-3); }
.view-drag-handle[draggable="true"] { cursor: grab; }
.view-drag-handle svg { transform: rotate(90deg); }
.view-toggle-row.dragging { opacity: 0.45; }
.view-toggle-row.drop-before { box-shadow: 0 -2px var(--accent); }
.view-toggle-row.drop-after { box-shadow: 0 2px var(--accent); }
.view-order-button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; color: var(--ink-2); }
.view-order-button:hover:not(:disabled) { background: var(--bg-sunk); color: var(--ink); }
.view-order-button:disabled { opacity: 0.25; }
.share-link-settings .view-toggles { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 14px; }
.share-link-settings .view-toggles label { min-width: 90px; }
.share-link-settings .share-start-view { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.share-link-settings .share-start-view > span { font-size: 11.5px; color: var(--ink-2); }
.share-dialog .share-view-seg { flex-wrap: wrap; }

/* boolean settings are active/inactive pills, never checkboxes */
.state-pill {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 580;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.state-pill:hover:not(:disabled) { background: var(--bg-well); }
.state-pill[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.state-pill[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--accent);
  filter: brightness(1.06);
}
.state-pill:disabled { opacity: 0.5; cursor: default; }
/* multi-selection: on some of the selected, not all */
.state-pill[aria-pressed="mixed"] {
  background: color-mix(in srgb, var(--accent) 35%, var(--bg-sunk));
  color: var(--ink);
}

.share-dialog .share-link {
  display: grid;
  gap: 6px;
}
.share-dialog .share-link-settings {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: var(--r-m);
  background: var(--bg-sunk);
}
.share-dialog .share-view-seg button { padding: 4px 9px; font-size: 11px; }
.share-dialog .share-settings-reset {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-3);
  padding: 4px 6px;
  border-radius: var(--r-s);
  cursor: pointer;
}
.share-dialog .share-settings-reset:hover { color: var(--ink); background: var(--bg-well); }
.share-dialog .share-settings-toggle { position: relative; }
.share-dialog .share-settings-toggle[aria-pressed="true"] { color: var(--accent-text); }
.share-dialog .share-custom-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.share-dialog .share-link-scope {
  cursor: pointer;
  border: 0;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 580;
  white-space: nowrap;
}
.share-dialog .share-link-scope.all {
  background: var(--accent);
  color: var(--accent-ink);
}
.alt-import-fields { display: grid; gap: 10px; }
.alt-import-fields .alt-range { align-items: end; }
.alt-import-fields .alt-range label { flex: 1; display: grid; gap: 4px; }
.alt-import-fields .alt-range input { width: 100%; font-family: var(--mono); }
.check-row { display: flex; align-items: center; gap: 7px; font-size: 13px; }

/* export dialog — options + live preview of what's about to leave */
.export-dialog .exp-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.export-dialog .exp-formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
}
.export-dialog .exp-formats button { padding-inline: 7px; }
.exp-deck-options {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding-block: 10px;
  border-block: 1px solid var(--line);
}
.exp-option-row { display: flex; align-items: center; gap: 12px; }
.exp-option-label {
  min-width: 88px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 580;
}
.exp-toggle-row { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-prev {
  margin-top: 12px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  max-height: 320px;
  overflow: auto;
}
.exp-prev pre {
  font: 400 11px/1.65 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding: 12px 14px;
}
.exp-prev pre.plain { font: 400 13px/1.62 var(--sans); }
.exp-frame-wrap { height: 320px; overflow: hidden; position: relative; }
.exp-frame {
  width: 900px;
  height: 492px;
  border: 0;
  transform: scale(0.653);
  transform-origin: top left;
  pointer-events: none;
}
.exp-name { font: 500 10.5px var(--mono); color: var(--ink-3); margin-top: 8px; }
.exp-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  padding: 12px;
}
.exp-image { min-width: 0; }
.exp-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-s);
  background: var(--thumb-bed);
}
.exp-image span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font: 500 10.5px var(--mono);
}
.exp-empty { padding: 36px 14px; text-align: center; color: var(--ink-3); }

@media (max-width: 560px) {
  .export-dialog .exp-top { align-items: flex-start; }
  .export-dialog .exp-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.review-file-total {
  margin: -4px 0 10px;
  color: var(--ink-3);
  font: 500 11px var(--mono);
}
.review-files { border-top: 1px solid var(--line); }
.review-file-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(92px, 0.7fr) minmax(150px, 1.4fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 9px 2px;
}
.review-file-version { display: flex; align-items: center; gap: 7px; min-width: 0; }
.review-file-version .hero {
  color: var(--accent-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 650;
}
.review-file-facts { color: var(--ink-2); font: 500 11px var(--mono); }
.review-file-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.review-file-actions .btn { min-height: 30px; }
.review-file-lock { min-width: 58px; text-align: center; color: var(--ink-3); font-size: 11px; }

.dialog.version-manager-dialog {
  width: min(820px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
}
.version-manager-body {
  min-height: 120px;
  overflow: auto;
  margin-top: 4px;
}
.version-manager-body[aria-busy="true"] { opacity: 0.58; pointer-events: none; }
.version-manager-loading { padding: 42px 0; text-align: center; }
.version-manager-list { border-top: 1px solid var(--line); }
.version-manager-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 64px minmax(92px, 0.65fr) minmax(170px, 1.5fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.version-manager-row.archived { background: var(--bg-sunk); color: var(--ink-2); }
.version-order { width: 64px; display: flex; gap: 2px; }
.version-order .btn.icon { width: 29px; height: 29px; min-height: 29px; }
.version-order .btn.icon:disabled { opacity: 0.22; }
.version-manager-name { display: flex; align-items: center; min-width: 0; gap: 7px; }
.version-manager-name .mono { font-size: 12px; font-weight: 700; }
.version-checkpoint {
  min-width: 0;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.version-manager-facts {
  min-width: 0;
  color: var(--ink-3);
  font: 500 11px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.version-manager-actions {
  min-width: 130px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.version-disabled-action { display: inline-flex; }
.version-current { min-width: 82px; text-align: center; color: var(--ink-3); font-size: 11px; }
.version-manager-section {
  padding: 18px 2px 7px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font: 650 10px var(--mono);
  text-transform: uppercase;
}

@media (max-width: 660px) {
  .version-manager-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 7px;
  }
  .version-manager-facts { grid-column: 2 / -1; grid-row: 2; padding-bottom: 3px; }
  .version-manager-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    flex-wrap: wrap;
  }
}

.import-actions { flex-wrap: wrap; }
.import-engine {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  font-size: 10px;
  line-height: 18px;
  color: var(--ink-3);
}
.import-engine::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.import-engine.online::before { background: var(--accent); }
.import-pending-content {
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.import-spinner {
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: import-spin 1s linear infinite;
}
.import-filename { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; color: var(--ink-3); }
.import-meter { width: 180px; height: 3px; overflow: hidden; background: var(--line); border-radius: 2px; }
.import-meter i { display: block; width: var(--import-progress); height: 100%; background: var(--accent); }
.import-percent { min-height: 16px; font: 11px var(--mono); color: var(--ink-3); }
@keyframes import-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .import-spinner { animation: none; } }

.dialog.frameio-import-dialog {
  width: min(780px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
}
.frameio-import-source {
  color: var(--ink-2);
  font: 500 11px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frameio-import-summary {
  margin-top: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.frameio-import-warnings { margin-top: 8px; }
.frameio-import-warning {
  color: var(--danger);
  font-size: 11.5px;
  line-height: 1.45;
}
.frameio-import-rows {
  min-height: 160px;
  max-height: 380px;
  margin-top: 12px;
  overflow: auto;
  border-block: 1px solid var(--line);
}
.frameio-import-row {
  min-width: 660px;
  min-height: 36px;
  display: grid;
  grid-template-columns: 78px 62px 90px minmax(230px, 1fr) 70px;
  gap: 9px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.frameio-import-row.head {
  min-height: 30px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-raise);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}
.frameio-import-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frameio-import-row.skipped { color: var(--ink-3); }
.frameio-import-body { color: var(--ink-2); }
.frameio-import-result { color: var(--ink-3); font-weight: 600; }
.frameio-import-row.new .frameio-import-result { color: var(--accent-text); }
.frameio-import-row.updated .frameio-import-result { color: var(--danger); }
/* Align cuts to XML: three narrow columns, no horizontal scroll needed. */
.cutlist-options { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cutlist-tracks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cutlist-tracks:empty { display: none; }
.frameio-import-row.cutlist-row { min-width: 0; grid-template-columns: 96px 96px 1fr; }
.frameio-import-row.cutlist-row.added .frameio-import-result { color: var(--accent-text); }
.frameio-import-row.cutlist-row.removed .frameio-import-result { color: var(--danger); }
.frameio-import-row.cutlist-row.snapped .frameio-import-result { color: var(--ink); }
.frameio-import-row.cutlist-row.skipped { color: var(--ink-3); }
.frameio-import-warning.blocked { color: var(--danger); font-weight: 600; }
.frameio-import-empty {
  min-height: 158px;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}

/* ============================================================ toast */

.toasts {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 24px);
}
.toast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 530;
  max-width: calc(100vw - 24px);
  box-shadow: var(--shadow-pop);
  animation: toast-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast > span:first-child { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.toast .action,
.toast .close {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.toast .action {
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 3px 7px;
  font: inherit;
}
.toast .action:disabled { opacity: 0.55; cursor: default; }
.toast .close { width: 22px; height: 22px; padding: 3px; }
.toast .close svg { width: 14px; height: 14px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast .bar {
  width: 90px; height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.toast .bar i { display: block; height: 100%; background: var(--accent); transition: width 300ms linear; }
@media (max-width: 480px) {
  .toast .bar { order: 2; flex: 1 0 100%; }
}

/* ============================================================ workspace layout */

.app { height: 100%; display: flex; flex-direction: column; }
.work { flex: 1; display: flex; min-height: 0; position: relative; }
.canvas-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; container-type: inline-size; }
.work.tracker-mode .tray { display: none; }
.work.tracker-mode .canvas-wrap { width: 100%; }
.canvas {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg-sunk);
  position: relative;
}
/* The Timeline scrolls in its own region below the persistent player. */
.canvas.tl-host { display: flex; flex-direction: column; }
.canvas.tl-host .tl { flex: 1 0 auto; }
.canvas.tl-host.tl-scroll-bumper { overscroll-behavior-x: contain; }

.old-version-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 550;
}
.old-version-note .mono { color: var(--ink-2); }

.canvas-foot {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--bg);
  font: 500 11px var(--mono);
  color: var(--ink-2);
}
.canvas-foot .foot-details {
  display: flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
}
.canvas-foot .spacer { flex: 1; }
.canvas-foot .zoom { display: flex; align-items: center; gap: 7px; }
.canvas-foot .zoom input[type="range"] {
  width: 132px;
  margin: 0;
}
.board-scale-range {
  position: relative;
  width: 132px;
  height: 16px;
  display: grid;
  align-items: center;
}
.board-scale-range input[type="range"] {
  position: relative;
  z-index: 2;
  width: 100%;
}
.board-scale-notches {
  position: absolute;
  z-index: 1;
  left: 6px;
  right: 6px;
  top: 50%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}
.board-scale-notches > span {
  width: 2px;
  height: 8px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink) 34%, var(--bg));
}
.canvas-foot .zpct { min-width: 36px; text-align: right; }
.canvas-foot button { color: var(--ink-2); border-radius: 5px; padding: 3px 7px; font: 500 11px var(--mono); }
.canvas-foot .fitb { display: inline-flex; align-items: center; padding: 3px 5px; }
.canvas-foot .fitb svg { width: 14px; height: 14px; }
.canvas-foot button:hover { background: var(--bg-sunk); color: var(--ink); }
.canvas-foot button[aria-pressed="true"] { color: var(--accent-text); }
.canvas-foot.tracker-foot { justify-content: flex-start; }
.tracker-foot-count { white-space: nowrap; }

/* ============================================================ review player */

.review-player { flex: none; min-width: 0; }
.review-player.native {
  --subtitle-h: 0px;
  position: relative;
  height: calc(var(--float-h) + 108px + var(--subtitle-h));
  background: var(--bg);
}
.review-player.native.has-subtitles { --subtitle-h: 50px; }
.player-timeline-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--ink-2) 26%, transparent);
  z-index: 1;
  pointer-events: none;
}
.player-timeline-flag {
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  z-index: 13;
  pointer-events: none;
  opacity: 0.82;
}

/* One instrument strip rises gently from the ruler, not a floating pill. */
.player-ruler-dock {
  position: absolute;
  bottom: 0;
  left: var(--player-inset-left, 0px);
  right: var(--player-inset-right, 0px);
  height: 40px;
  display: flex;
  justify-content: center;
  z-index: 12;
  pointer-events: none;
}
.player-ruler-dock[hidden] { display: none; }
.player-ruler-dock::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  border-bottom: 1px solid var(--line);
}
.player-ruler-module {
  --ruler-shoulder: 42px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 40px;
}
.player-ruler-module::before,
.player-ruler-module::after {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--ruler-shoulder)) 0;
  pointer-events: none;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.review-shuttle {
  flex: none;
  height: 80px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
}
.review-shuttle > .player-ruler-dock { position: relative; inset: auto; width: 100%; flex: none; }
.review-shuttle > .player-tcbox { align-self: center; }
.review-shuttle .player-focus[hidden], .review-shuttle .playback-setting[hidden] { display: none; }
.review-shuttle .player-ruler-module { --ruler-shoulder: 22px; padding-inline: 4px; }
.player-ruler-module::before {
  background: var(--shuttle-surface, var(--bg-sunk));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 40' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 40C22 40 25 0 54 0H446C475 0 478 40 500 40Z'/%3E%3C/svg%3E");
}
.player-ruler-module::after {
  background: var(--line);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 40' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='white' stroke-width='1' vector-effect='non-scaling-stroke' d='M0 39.5C22 39.5 25 .5 54 .5H446C475 .5 478 39.5 500 39.5'/%3E%3C/svg%3E");
}
.player-tcbox {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  z-index: 11;
  isolation: isolate;
  width: max-content;
  padding: 6px 28px;
  font: 600 14.5px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  pointer-events: auto;
  white-space: nowrap;
  letter-spacing: 0;
}
.player-tcbox::before,
.player-tcbox::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.player-tcbox::before {
  background: var(--shuttle-surface, var(--bg-sunk));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0C14 0 16 4 22 16C28 28 32 32 46 32H154C168 32 172 28 178 16C184 4 186 0 200 0Z'/%3E%3C/svg%3E");
}
.player-tcbox::after {
  background: var(--line);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='white' stroke-width='1' vector-effect='non-scaling-stroke' d='M0 .5C14 .5 16 4 22 16C28 28 32 31.5 46 31.5H154C168 31.5 172 28 178 16C184 4 186 .5 200 .5'/%3E%3C/svg%3E");
}
.player-tc-readout { display: block; font: inherit; }
.player-tc-readout:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.player-tcbox .player-tc-input {
  display: block;
  text-align: center;
  width: 11ch;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.player-tcbox.editing::after { background: var(--accent); }
.player-tcbox:has([aria-invalid="true"])::after { background: var(--danger); }
.canvas-wrap:has(.player-tcbox.editing) :is(.player-timeline-flag, .player-timeline-cursor, .tl-cursor) {
  visibility: hidden;
}
.player-tcbox .tc-frames {
  color: var(--ink-2);
  font-weight: 400;
}

.player-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050505;
}
/* The review window has its own vertical space above the Timeline. */
.canvas-wrap { --float-h: clamp(170px, 26vh, 300px); }
@media (max-height: 760px) {
  .canvas-wrap { --float-h: clamp(120px, 19vh, 210px); }
}
/* The floating wrapper holds the Shot details row below the window; the box
   itself takes the video's real aspect (set from metadata as --video-ar), so
   playback is never cropped; if a width clamp ever bites, object-fit
   letterboxes instead. Only the faint hover cursor enters, behind the picture. */
.player-float { display: contents; } /* external mode: the stage flows as before */
/* Auto margins keep the media centered without altering overlay coordinates. */
.player-float.float {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 12px;
  left: var(--player-inset-left, 0px);
  right: var(--player-inset-right, 0px);
  width: fit-content;
  margin-inline: auto;
  pointer-events: none;
}
.canvas-wrap.script-side .player-alt-thumbnails { display: none; }
.canvas-wrap.script-side .player-alt-nav.prev { right: auto; left: 8px; }
.canvas-wrap.script-side .player-alt-nav.next { left: auto; right: 8px; }
.player-stage-wrap { display: contents; }
.player-stage-wrap.float {
  position: relative;
  display: block;
  flex: none;
  height: var(--float-h);
  width: auto;
  aspect-ratio: var(--video-ar, 16 / 9);
}
.player-shotmeta {
  position: relative;
  z-index: 11; /* the details row reads above the faint hover guide */
  align-self: stretch;
  height: 40px;
  min-width: min(280px, calc(100cqw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font: 520 10.5px var(--mono);
  color: var(--ink-2);
  pointer-events: auto;
}
.player-shotmeta[hidden] { display: none; }
.player-shotmeta .shot {
  grid-column: 1;
  grid-row: 1;
  color: var(--ink);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-meta-end {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.player-meta-end .st-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-shotmeta .frame-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.player-shotmeta .frame-actions[hidden] { display: none; }
.player-shotmeta .frame-actions button {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink-2);
}
.player-shotmeta .frame-actions button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--bg-well);
}
.player-shotmeta .frame-actions button:disabled { opacity: 0.38; }
.player-shotmeta .frame-actions svg { width: 13px; height: 13px; }
.player-shotmeta .st-chip {
  height: 17px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  font: 650 9px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.player-shotmeta .st-chip.ghost {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--ink-3);
}
.player-stage.float {
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100%;
  border-radius: var(--r-window);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow-pop);
  /* Only the resize grip and playback-specific controls take pointer input. */
  pointer-events: none;
}
.player-float.float .corner-grip,
.player-stage.float .player-error,
.player-stage.float .player-external { pointer-events: auto; }
.player-alt-nav,
.player-alt-tools button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-raise);
  color: var(--ink-2);
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.player-alt-nav {
  position: absolute;
  top: calc((var(--float-h) / 2) - 17px);
  z-index: 11;
}
.player-alt-nav.prev { right: calc(100% + 12px); }
.player-alt-nav.next { left: calc(100% + 12px); }
.player-alt-nav:hover,
.player-alt-tools button:hover:not(:disabled) { background: var(--bg-well); color: var(--ink); }
.player-alt-nav svg,
.player-alt-tools svg { width: 16px; height: 16px; }
.player-alt-tools {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 29px;
  z-index: 11;
  display: grid;
  gap: 5px;
  pointer-events: auto;
}
.player-alt-tools button:disabled { opacity: 0.38; }
.player-alt-tools button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.player-alt-tools button:last-child[aria-pressed="true"] svg path { fill: currentColor; }
.player-alt-thumbnails {
  position: absolute;
  top: 0;
  right: calc(100% + 58px);
  z-index: 11;
  display: grid;
  grid-template-columns: repeat(
    var(--alt-thumbnail-columns, 1),
    var(--alt-thumbnail-width, 68px)
  );
  grid-template-rows: repeat(var(--alt-thumbnail-rows, 1), auto);
  grid-auto-flow: column;
  gap: 5px;
  max-height: var(--float-h);
  overflow-y: auto;
  padding: 1px;
  pointer-events: auto;
  scrollbar-width: thin;
}
.player-alt-thumbnails[hidden] { display: none; }
.player-alt-thumbnail {
  position: relative;
  width: var(--alt-thumbnail-width, 68px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 5px;
  background: #050505;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.player-alt-thumbnail img,
.player-alt-thumbnail .missing {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  object-fit: cover;
  opacity: 0.4;
  transition: opacity var(--t-fast);
}
.player-alt-thumbnail:hover img,
.player-alt-thumbnail:hover .missing { opacity: 0.68; }
.player-alt-thumbnail.active img,
.player-alt-thumbnail.active .missing { opacity: 1; }
.player-alt-thumbnail .missing { color: rgba(244, 242, 237, 0.7); }
.player-alt-thumbnail .missing svg { width: 17px; height: 17px; }
.player-alt-thumbnail .favorite {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.72);
  color: #f4f2ed;
  pointer-events: none;
}
.player-alt-thumbnail .alt-label {
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: 1;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(5, 5, 5, 0.72);
  color: rgba(244, 242, 237, 0.82);
  font: 650 8px var(--mono);
  letter-spacing: 0;
  pointer-events: none;
}
.player-alt-thumbnail.active .alt-label { color: #f4f2ed; }
.player-alt-thumbnail .favorite svg { width: 10px; height: 10px; }
.player-alt-thumbnail .favorite svg path { fill: currentColor; }
.player-alt-thumbnail:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-height: 760px) {
  .player-alt-nav.prev { right: auto; left: 8px; }
  .player-alt-nav.next { left: auto; right: 8px; }
  .player-alt-nav { background: rgba(10, 10, 10, 0.72); color: #f4f2ed; }
}
.player-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
  z-index: 1;
}
.player-comment-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: #050505;
  pointer-events: none;
}
.player-comment-preview[hidden] { display: none; }
.player-comment-image { position: relative; }
.player-comment-image img { display: block; width: 100%; height: 100%; }
.player-comment-drawing {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.player-stage.external {
  height: 52px;
  background: #11100f;
  color: #f4f2ed;
  border-bottom: 1px solid var(--line);
}
.corner-grip {
  /* concentric with the shared --r-window corner (18px): arc 25 = 18 + 7,
     box 44 = 18 + 26, arc center 32 = 18 + 14 in from the box edges the
     -14px offsets hang past the window corner */
  --grip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M2 37H12A25 25 0 0 0 37 12V2' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  position: absolute;
  width: 44px;
  height: 44px;
  z-index: 12;
  cursor: nwse-resize;
  color: var(--ink-2);
  opacity: var(--grip-opacity);
  transition: opacity var(--t-fast), color var(--t-fast);
  touch-action: none;
}
.corner-grip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--grip-mask) center / 100% 100% no-repeat;
  mask: var(--grip-mask) center / 100% 100% no-repeat;
}
.corner-grip:hover,
.corner-grip:active { color: var(--ink); opacity: 0.9; }
.player-corner-grip {
  --grip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 27H6A21 21 0 0 0 27 6V2' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  width: 32px;
  height: 32px;
  right: -10px;
  bottom: -10px;
  pointer-events: auto;
}

/* ---- comparison: dual review windows. The row wrapper stays
   display:contents until side-by-side needs a real flex row; in split mode
   the slave video overlays the master stage behind a clip-path, and the
   divider is the only new interactive element on the otherwise
   pointer-transparent window. No transform/z-index ever lands on the float
   wrapper (stacking-context lesson above). */
.player-stage-row { display: contents; }
.player-float.float .player-stage-row.compare-side {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: var(--float-h);
}
.player-stage-row.compare-side .player-stage-wrap.float { height: 100%; }
.player-compare-missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(244, 242, 237, 0.5);
  font: 520 10.5px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.player-compare-missing[hidden] { display: none; }
.player-ver-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(5, 5, 5, 0.72);
  color: rgba(244, 242, 237, 0.9);
  font: 600 12px var(--sans);
  letter-spacing: 0;
  pointer-events: none;
}
.player-ver-tag[hidden] { display: none; }
.player-ver-tag.split-side { left: auto; right: 8px; }
/* Audio and the floating shared clock share one compact row below the pair. */
.player-float.comparing .player-shotmeta { height: 40px; padding: 0; align-items: start; pointer-events: none; }
.player-float.comparing .player-meta-end { display: none; }
.player-float.comparing .player-tcbox { margin-top: 4px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-sunk); }
.player-float.comparing .player-tcbox::before, .player-float.comparing .player-tcbox::after { display: none; }
.player-volume[hidden] { display: none; }
.player-compare-audio {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  justify-self: center;
  max-width: 100%;
  min-width: 0;
  z-index: 11;
  padding: 2px 8px 4px;
  isolation: isolate;
  pointer-events: auto;
}
.player-compare-audio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-sunk); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; }
.player-compare-audio[hidden] { display: none; }
.player-compare-audio .player-volume { padding-right: 0; min-width: 0; }
.player-compare-audio .player-volume input[type="range"] { width: 64px; min-width: 16px; flex-shrink: 1; }
.player-compare-audio input[type="range"]:not([hidden]) { margin-right: 5px; }
.player-compare-audio input[hidden] { display: none; }
.player-compare-audio.slave { grid-column: 3; }
.player-stage.compare-split video.compare-slave {
  z-index: 2;
  clip-path: inset(0 0 0 var(--split-x, 50%));
}
.player-split-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split-x, 50%);
  width: 18px;
  margin-left: -9px;
  z-index: 12;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
.player-split-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(244, 242, 237, 0.6);
  box-shadow: 0 0 0 0.5px rgba(5, 5, 5, 0.4);
}
.player-split-divider .handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 32px;
  margin: -16px 0 0 -6px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.78);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.player-split-divider .handle::before {
  content: "";
  position: absolute;
  inset: 8px 4.5px;
  border-inline: 1px solid rgba(244, 242, 237, 0.75);
}

/* playback and volume sit directly beneath the review window */
.player-transport {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  z-index: 1;
  pointer-events: auto;
}
.player-transport button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
}
.player-transport button:hover:not(:disabled) { color: var(--ink); background: var(--bg-sunk); }
.player-transport button:disabled { opacity: 0.4; }
.player-transport svg { width: 15px; height: 15px; }
.player-transport .tp-play { width: 36px; height: 36px; color: var(--ink); }
.player-transport .tp-play svg { width: 17px; height: 17px; }
/* the loop control rides the transport; green while a loop is armed */
.player-transport .player-loop[aria-pressed="true"] {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
}
.player-transport .transport-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--line);
}
.player-volume {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 7px;
}
.player-volume button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
}
.player-volume button:hover { color: var(--ink); background: var(--bg-sunk); }
.player-volume svg { width: 15px; height: 15px; }
.player-volume input[type="range"] { width: 82px; }
.player-subtitles {
  flex: none;
  align-self: stretch;
  height: 48px;
  padding: 4px 10px;
  display: grid;
  place-items: center;
  text-align: center;
  font: 500 13px/16px var(--sans);
  color: var(--ink);
  overflow-wrap: anywhere;
  pointer-events: auto;
}
.player-subtitles[hidden] { display: none; }
.player-float > .player-subtitles {
  height: 50px;
  padding-block: 2px;
  font-size: 15.6px;
  line-height: 19.2px;
  pointer-events: none;
}
.player-float > .player-subtitles .player-subtitle-text { padding-block: 2px; }
.player-subtitle-text {
  max-width: 100%;
  max-height: 100%;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-sunk);
  overflow-y: auto;
}
.player-subtitle-text:empty { display: none; }
.player-subtitle-text[hidden] { display: none; }
.player-subtitle-text.loop-passage { width: min(100%, var(--loop-caption-width, 100%)); overflow: hidden; }
.player-caption-line { display: block; white-space: nowrap; }
.player-caption-word { border-radius: 3px; transition: background 80ms linear; }
.player-caption-word.speaking { background: color-mix(in srgb, var(--ok) 18%, transparent); }
@media (prefers-reduced-motion: reduce) { .player-caption-word { transition: none; } }
.playback-settings { display: flex; flex: none; align-items: center; gap: 2px; }
.playback-setting { width: 34px; height: 30px; flex: none; font: 600 10px var(--mono); }
.playback-cc span { border: 1px solid currentColor; border-radius: 3px; padding: 1px 2px; }
.playback-setting[aria-pressed="true"] { color: var(--accent-text); }
.playback-speed-pop {
  --range-thumb-size: 12px;
  --range-fill-color: var(--accent);
  --range-thumb-color: var(--accent);
  padding: 16px 12px 12px;
}
.playback-speed-pop input { display: block; width: 100%; margin: 0; padding: 0; border: 0; }
.playback-rate-labels {
  position: relative;
  height: 14px;
  margin: 4px calc(var(--range-thumb-size) / 2) 0;
  font: 500 10px/14px var(--mono);
}
.playback-rate-labels span { position: absolute; transform: translateX(-50%); }
.canvas-foot .playback-settings { margin-left: 12px; }
@container (max-width: 560px) {
  .player-tcbox { padding: 5px 24px; font-size: 12px; }
  .player-shotmeta { gap: 4px; }
  .player-meta-end .st-chip { display: none; }
  .player-ruler-module { --ruler-shoulder: 24px; padding-inline: 4px; }
  .player-transport { gap: 0; }
  .player-transport button { width: 26px; height: 30px; }
  .player-transport .tp-play { width: 30px; height: 34px; }
  .player-transport .transport-sep { margin-inline: 3px; }
  .player-transport .player-volume { gap: 2px; padding-right: 0; }
  .player-transport .player-volume input[type="range"] { width: 44px; }
  /* Script and picture share the upper row; details and controls need the
     full canvas width rather than the narrow remaining picture column. */
  .canvas-wrap.script-side .player-float.float { width: auto; }
  .canvas-wrap.script-side .player-float > :is(.player-shotmeta, .player-subtitles) {
    position: relative;
    align-self: center;
    width: calc(100cqw - 24px);
    left: calc((var(--player-inset-right, 0px) - var(--player-inset-left, 0px)) / 2);
  }
  .canvas-wrap.script-side .player-ruler-dock { left: 0; right: 0; }
}
@container (max-width: 380px) {
  .player-ruler-module { --ruler-shoulder: 16px; padding-inline: 2px; }
  .player-transport button { width: 24px; }
  .player-transport .tp-play { width: 28px; }
  .player-transport .player-volume input[type="range"] { width: 32px; }
}
.player-volume input[type="range"] {
  --range-fill-color: color-mix(in srgb, var(--ink) 42%, transparent);
  --range-thumb-color: var(--ink-2);
}
.player-volume input[type="range"]:hover,
.player-volume input[type="range"]:focus-visible {
  --range-fill-color: var(--accent);
  --range-thumb-color: var(--accent);
}
.canvas-foot .zoom input[type="range"] {
  --range-fill-color: var(--accent);
  --range-thumb-color: var(--accent);
}

/* Playback ranges share their track/thumb geometry, including speed stops. */
.playback-speed-pop input[type="range"],
.player-volume input[type="range"],
.canvas-foot .zoom input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 16px;
  background: transparent;
}
.playback-speed-pop input[type="range"]::-webkit-slider-runnable-track,
.player-volume input[type="range"]::-webkit-slider-runnable-track,
.canvas-foot .zoom input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--range-fill-color) 0 var(--range-fill, 0%),
    color-mix(in srgb, var(--ink) 20%, transparent) var(--range-fill, 0%) 100%);
}
.playback-speed-pop input[type="range"]::-webkit-slider-thumb,
.player-volume input[type="range"]::-webkit-slider-thumb,
.canvas-foot .zoom input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--range-thumb-size, 12px);
  height: var(--range-thumb-size, 12px);
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--range-thumb-color);
}
.playback-speed-pop input[type="range"]::-moz-range-track,
.player-volume input[type="range"]::-moz-range-track,
.canvas-foot .zoom input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--range-fill-color) 0 var(--range-fill, 0%),
    color-mix(in srgb, var(--ink) 20%, transparent) var(--range-fill, 0%) 100%);
}
.playback-speed-pop input[type="range"]::-moz-range-thumb,
.player-volume input[type="range"]::-moz-range-thumb,
.canvas-foot .zoom input[type="range"]::-moz-range-thumb {
  width: var(--range-thumb-size, 12px);
  height: var(--range-thumb-size, 12px);
  border: 0;
  border-radius: 50%;
  background: var(--range-thumb-color);
}
.playback-speed-pop input[type="range"]:focus-visible,
.player-volume input[type="range"]:focus-visible,
.canvas-foot .zoom input[type="range"]:focus-visible { outline: none; }
.playback-speed-pop input[type="range"]:focus-visible::-webkit-slider-thumb,
.player-volume input[type="range"]:focus-visible::-webkit-slider-thumb,
.canvas-foot .zoom input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.playback-speed-pop input[type="range"]:focus-visible::-moz-range-thumb,
.player-volume input[type="range"]:focus-visible::-moz-range-thumb,
.canvas-foot .zoom input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.player-external { text-decoration: none; background: #f4f2ed; color: #11100f; }
.player-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d8d4cb;
  background: #11100f;
  font-size: 12px;
  z-index: 4;
}
.player-error + .player-external:not([hidden]) { position: absolute; margin-top: 48px; }

/* ============================================================ script window */
/* One shared Script window; the Video shell supplies measured below-C1,
   side-column, or centered-overlay coordinates. Open state belongs to each
   view for the session, while the preferred resizable height persists. */

.script-pane {
  position: absolute;
  left: var(--script-left, 50%);
  top: var(--script-top, auto);
  bottom: 96px;
  transform: translateX(-50%);
  width: var(--script-w, min(620px, calc(100% - 48px)));
  height: var(--script-h, 200px);
  display: flex;
  flex-direction: column;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-pop);
  z-index: 11; /* Script always reads above the paused playhead (z10). */
  overflow: hidden;
}
.script-pane[data-layout="below"],
.script-pane[data-layout="side"],
.script-pane[data-layout="overlay"] { bottom: auto; }
.script-pane[data-layout="below"] { transform: translateX(-50%); }
.script-pane[data-layout="side"] { transform: none; }
.script-pane[data-layout="overlay"] { transform: translate(-50%, -50%); }
.sp-grip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
  z-index: 2;
}
.script-pane[data-layout="below"] .sp-grip,
.script-pane[data-layout="overlay"] .sp-grip { top: auto; bottom: 0; }
.script-pane[data-layout="side"] .sp-grip { display: none; }
.sp-grip:hover { background: var(--accent-soft); }
.sp-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 5px 14px;
  border-bottom: 1px solid var(--line);
}
.sp-head .t {
  font: 650 11.5px var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.sp-head .spacer { flex: 1; }
.sp-head .btn.icon[aria-pressed="true"],
.toolbar .btn.icon[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-soft); }
.sp-sgchip {
  font: 600 10.5px var(--mono);
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 9px;
}
.sp-sgchip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.sp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 7px 6px 10px; }
.sp-body.editing { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.sp-lines { display: grid; gap: 1px; }
.sp-line {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 10px 3px 26px;
  border-radius: var(--r-s);
  font-size: 13px;
  line-height: 1.45;
}
.sp-line.go { cursor: pointer; }
.sp-line:hover { background: var(--bg-sunk); }
.sp-line.cur { background: var(--accent-soft); }
.sp-who {
  flex: none;
  min-width: 42px;
  font: 650 9.5px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sp-line.cur .sp-who { color: var(--accent-text); }
.sp-text { color: var(--ink); min-width: 0; }
.sp-text a { color: var(--accent-text); }
.sp-dot {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 9px;
  height: 9px;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 7.5px var(--mono);
  display: grid;
  place-items: center;
}
.sp-edit {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  font: 450 13px/1.55 var(--sans);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 10px 12px;
}
.sp-edit:focus { outline: none; border-color: var(--line-strong); }
.legacy-script-dialog .sp-edit { height: min(360px, 45vh); }
.sp-editbar { flex: none; display: flex; align-items: center; gap: 8px; }
.sp-editbar .hint { font: 500 10.5px var(--mono); color: var(--ink-3); }
.sp-editbar .spacer { flex: 1; }
.sp-sgs {
  display: grid;
  gap: 10px;
  margin: 2px 4px 12px;
  padding: 10px 12px;
  background: var(--bg-sunk);
  border-radius: var(--r-m);
}
.sp-sg { display: grid; gap: 3px; }
.sp-sghead { display: flex; align-items: center; gap: 8px; }
.sp-sghead .k {
  font: 650 9.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-well);
  color: var(--ink-2);
}
.sp-sghead .k.add { color: var(--ok); }
.sp-sghead .k.remove { color: var(--danger); }
.sp-sghead .spacer { flex: 1; }
.sp-sgold { font-size: 12px; color: var(--ink-3); text-decoration: line-through; }
.sp-sgnew { font-size: 12.5px; color: var(--ink); white-space: pre-line; }
.sp-sgclear {
  justify-self: end;
  font: 550 11px var(--sans);
  color: var(--ink-2);
  padding: 3px 8px;
  border-radius: var(--r-s);
}
.sp-sgclear:hover { background: var(--bg-well); color: var(--ink); }
.sp-empty { display: grid; gap: 10px; place-items: center; padding: 26px 0; }
.sp-empty .muted { font-size: 12.5px; color: var(--ink-2); }
.sp-empty .row { display: flex; gap: 8px; }

@media (max-width: 520px) {
  .canvas-wrap.script-side .player-volume input[type="range"] { display: none; }
  .canvas-wrap.script-side .player-transport { gap: 0; }
}

/* ============================================================ timeline */

.tl {
  position: relative;
  min-width: 100%;
  width: max-content;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
}
.tl-rows { position: relative; margin-block: auto; }
/* With playback, tracks sit just below their ruler; proxy-free boards retain
   their centered stack. No player-sized spacer lives inside the Timeline. */
.tl.top { padding-bottom: 24px; }
.tl.top .tl-rows { margin-block: 0; }
.timeline-start-gutter {
  width: var(--gutter-w, 52px);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  border-radius: 8px;
}
.timeline-start-gutter svg { width: 14px; height: 14px; opacity: 0; pointer-events: none; }
.timeline-start-gutter:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.timeline-start-gutter:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
.timeline-start-gutter:is(:hover, :focus-visible) svg { opacity: 0.65; }
.player-start-gutter { position: absolute; left: 0; top: 0; bottom: 0; }
.review-player:not(.native) .player-start-gutter { display: none; }
.tl-end-gutter { position: sticky; left: 0; flex: 1; min-height: 24px; }

.tl-row.rl { position: sticky; top: 0; z-index: 7; }
.tl-ruler {
  height: 26px;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
  cursor: crosshair;
  touch-action: pan-y; /* a finger drag scrubs; vertical still scrolls */
}
.tl-ruler .tl-lane { height: 100%; } /* ticks anchor to bottom — lane must fill the ruler */
.tl-tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 6px;
  background: var(--line-strong);
}
.tl-tick.major { height: 11px; }
.tl-tick .tc {
  position: absolute;
  bottom: 10px;
  left: 4px;
  font: 500 9.5px var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tl-row { display: flex; position: relative; }
.tl-gutter {
  position: sticky;
  left: 0;
  z-index: 4;
  width: var(--gutter-w);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 560 9.5px var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: var(--bg-sunk);
  text-transform: uppercase;
  writing-mode: horizontal-tb;
}
/* Primary clicks unfold tracks; context clicks open display commands. */
.tl-gutter.click { cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.tl-gutter.click:hover { color: var(--ink); background: var(--bg-well); }
.tl-lane { position: relative; flex: 1; }

/* row heights are user-draggable from the gutter edge (persisted) */
.tl-row.video { height: var(--rowh-video, 84px); margin-top: 10px; }
.tl-row.alt { height: var(--rowh-alt, 52px); margin-top: 10px; }
.tl-row.alt + .tl-row.video { margin-top: 0; }
.tl-row.comments { height: 28px; margin-top: 4px; }
.tl-row.comments .tl-lane::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--comment-duration, 0px);
  pointer-events: none;
  background: color-mix(in srgb, var(--bg-sunk) 84%, var(--ink) 3%);
}
.tl-gutter.c1-toggle {
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.tl-gutter.c1-toggle:hover,
.tl-gutter.c1-toggle:focus-visible {
  color: var(--ink);
  background: var(--bg-well);
}
.tl-gutter.c1-toggle.active {
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-sunk));
}
.tl-row.comments.overview .tl-gutter.c1-toggle {
  align-items: flex-start;
  padding-top: 9px;
}
.tl-row.tx { height: var(--rowh-tx, 52px); margin-top: 2px; }
.tl-row.audio { height: var(--rowh-audio, 46px); margin-top: 6px; }
.tl-row.audio.av { height: var(--rowh-av, 30px); margin-top: 4px; }

/* comparison lane — the compare version's structure as read-only grey
   reference between the ruler and the V2/V1 stack. Fixed modest height:
   no drag persistence in v1, no selection, no status, no comments. */
.tl-row.compare { height: 44px; margin-top: 10px; }
/* lowercase v-number: "v3" is a version tag, not a V3 lane */
.tl-row.compare .tl-gutter { text-transform: none; }
.tl-row.compare .tl-gutter .ver-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  width: 24px;
  padding: 4px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font: 650 10px var(--sans);
  letter-spacing: 0;
}
.tl-row.compare .tl-gutter .ver-tag svg { width: 16px; height: 14px; flex: none; }
.tl-cmp-clip {
  position: absolute;
  top: 2px;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--ink) 13%, var(--bg-raise));
  border-radius: var(--r-s);
  overflow: hidden;
  cursor: pointer;
  transition: background var(--t-fast);
}
.tl-cmp-clip:hover { background: color-mix(in srgb, var(--ink) 22%, var(--bg-raise)); }
.tl-cmp-clip .clip-head {
  flex: none;
  height: 13px;
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.tl-cmp-clip .cnum {
  font: 600 8.5px var(--mono);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.tl-cmp-clip .clip-body {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0 3px 3px;
  overflow: hidden;
}
.tl-cmp-clip .clip-body img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  border-radius: 3px;
  background: var(--thumb-bed);
  filter: grayscale(1);
  opacity: 0.55;
  pointer-events: none;
}
.tl-cmp-clip:hover .clip-body img { opacity: 0.75; }
.tl-rows.compare-audio-elsewhere .tl-row.video .tl-lane { filter: grayscale(1); opacity: .6; }
.tl-rows.compare-audio-elsewhere .tl-cmp-clip { background: color-mix(in srgb, var(--shot-color) 25%, var(--bg-raise)); }
.tl-rows.compare-audio-elsewhere .tl-cmp-clip .clip-body img { filter: none; opacity: 1; }
.tl-track.av { cursor: pointer; }
/* NLE-style track divider: the full row-bottom edge drags the row height.
   Lives on the row (not the sticky gutter) so compositor hit-testing works. */
.row-grip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9px;
  cursor: ns-resize;
  z-index: 6;
}
.row-grip::after {
  content: "";
  position: absolute;
  left: 6px;
  width: 40px;
  top: 3px;
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.row-grip:hover::after { opacity: 1; }

/* A shot module: colored track header (number) over a framed thumbnail.
   The 3px colored frame marks clip bounds; the thumbnail keeps its own
   aspect, hangs left, and crops when the shot is narrower than it. */
.tl-clip {
  --clip-tint: var(--shot-color, var(--shot-blue));
  position: absolute;
  top: 2px;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--clip-tint) 30%, var(--bg-raise));
  border-radius: var(--r-s);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  background: color-mix(in srgb, var(--clip-tint) 68%, var(--bg-raise));
}
.tl-clip .clip-head {
  flex: none;
  height: 15px;
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.tl-clip .clip-body {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0 3px 3px;
  overflow: hidden;
}
.tl-clip .clip-body img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  border-radius: 3px;
  background: var(--thumb-bed);
  pointer-events: none;
}
.tl-clip .edge {
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 7px;
  cursor: ew-resize;
  opacity: 0;
  z-index: 6;
}
.tl-clip:hover .edge { opacity: 1; }
.tl-clip .edge::after {
  content: "";
  position: absolute;
  top: 20%; bottom: 20%; right: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.tl-clip .st-line {
  position: absolute;
  inset: 0;
  border-radius: var(--r-s);
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--st-color);
  transition: box-shadow var(--t-fast);
}
/* hovering a statused shot — or the playback head crossing it — thickens
   its inner status stroke */
.tl-clip:hover .st-line,
.tl-clip.playing .st-line { box-shadow: inset 0 0 0 5px var(--st-color); }
/* hover and selection lighten the module's own color — no competing strokes;
   the green .playing inner stroke stays the only line on the media clock */
.tl-clip:hover { background: color-mix(in srgb, var(--clip-tint) 80%, var(--bg-raise)); }
.tl-clip.sel {
  background: color-mix(in srgb, var(--clip-tint) 94%, var(--bg-raise));
  box-shadow: var(--shadow-pop);
  z-index: 2;
}
.tl-clip.sel::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.62);
  pointer-events: none;
  z-index: 4;
}
:root[data-theme="light"] .tl-clip {
  background: color-mix(in srgb, var(--clip-tint) 72%, var(--bg-raise));
}
:root[data-theme="light"] .tl-clip:hover {
  background: color-mix(in srgb, var(--clip-tint) 84%, var(--bg-raise));
}
:root[data-theme="light"] .tl-clip.sel {
  background: color-mix(in srgb, var(--clip-tint) 94%, var(--bg-raise));
}
:root[data-theme="light"] .tl-clip.sel::before {
  border-color: rgba(20, 20, 20, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}
:root[data-theme="dark"] .tl-clip.sel .cnum {
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}
:root[data-theme="light"] .tl-clip .cnum {
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38);
}
/* a selected statused shot floods with its status color: thumbnail hides,
   the status name sits smack in the center */
.tl-clip .st-flood {
  display: flex;
  visibility: hidden;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 650 9.5px var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
.tl-clip .st-flood span { flex: none; white-space: nowrap; }
.tl-lane.retiming .tl-clip { transition: none; }
.tl-clip.stat.sel { background: var(--st-color); }
.tl-clip.stat.sel .clip-body img { visibility: hidden; }
.tl-clip.stat.sel .st-line { display: none; }
.tl-clip.stat.sel:not(.status-outside) .st-flood { visibility: visible; }
/* the shot under the playback head — a quiet echo of the green head line,
   stroked INSIDE the module so neighbors never get grazed */
.tl-clip.playing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ok) 55%, transparent);
  pointer-events: none;
  z-index: 3;
}
.tl-clip.sel.playing::after {
  inset: 3px;
  z-index: 5;
}
.tl-clip .cnum {
  font: 600 9px var(--mono);
  color: var(--ink);
  opacity: 0.88;
  letter-spacing: 0.04em;
}

.tl-comment-pill {
  position: absolute;
  top: 3px;
  height: 22px;
  min-width: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 7px;
  border-radius: 6px;
  font: 620 9px var(--mono);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.tl-comment-add {
  position: absolute;
  top: 3px;
  height: 22px;
  display: grid;
  place-items: center;
  min-width: 3px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-raise));
  color: var(--accent-text);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.tl-comment-add:hover,
.tl-comment-add:focus-visible {
  opacity: 0.62;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-raise));
}
@media (hover: none) {
  .tl-comment-add { opacity: 0.62; }
}
.tl-comment-add svg { width: 12px; height: 12px; }
.tl-comment-label { display: flex; align-items: center; transition: opacity var(--t-fast); }
.tl-comment-label svg { width: 12px; height: 12px; flex: none; }
.tl-comment-pill.compact { padding: 0; }
.tl-comment-plus {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.tl-comment-plus svg { width: 12px; height: 12px; }
.tl-comment-pill[data-comment-action]:is(:hover, :focus-visible) .tl-comment-label { opacity: 0; }
.tl-comment-pill[data-comment-action]:is(:hover, :focus-visible) .tl-comment-plus { opacity: 1; }
.tl-comment-pill:hover {
  background: color-mix(in srgb, var(--author-color) 26%, var(--bg-raise));
  z-index: 2;
}
.tl-comment-pill.linked {
  background: color-mix(in srgb, var(--author-color) 26%, var(--bg-raise));
  z-index: 2;
}
.tl-comment-pill.done { opacity: 0.52; }
:root[data-theme="light"] .tl-comment-pill.done { opacity: 0.64; }
.tl-inline-comment {
  position: absolute;
  top: calc(var(--comment-pill-rows-height, 28px) + 3px);
  z-index: 13;
  border-radius: 8px;
  background: var(--bg-raise);
  box-shadow: var(--shadow-pop);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tl-inline-threads { display: flex; flex-direction: column; gap: 8px; padding: 8px; max-height: 220px; overflow-y: auto; }
.tl-inline-threads[hidden] { display: none; }
.tl-inline-threads:not([hidden]) + .composer.inline { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.tl-inline-threads .cmt { box-shadow: none; }
.tl-inline-comment .composer.inline {
  border: 0;
  border-radius: 8px;
  padding: 8px;
  gap: 6px;
  background: var(--bg-raise);
  box-shadow: none;
}
.tl-inline-comment .composer.inline .target,
.tl-inline-comment .composer.inline .hint { display: none; }
.tl-inline-comment .composer.inline.has-drawing .target { display: flex; }
.tl-inline-comment .composer.inline .attach-thumbs img { height: 32px; }
.tl-inline-comment .composer.inline .cfield {
  min-height: 32px;
  background: var(--bg-sunk);
  border-color: transparent;
}
.tl-inline-comment .composer.inline .cfield:focus { border-color: var(--accent); }
.tl-row.comments.overview .tl-comment-pill {
  bottom: auto;
  height: 22px;
}
.tl-comment-overview {
  position: absolute;
  top: var(--comment-pill-rows-height, 28px);
  left: 0;
  right: 0;
  min-height: 1px;
}
.tl-comment-overview.layout-pending { visibility: hidden; }
.tl-comment-links {
  position: absolute;
  inset: 0 auto auto 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.tl-comment-link {
  fill: none;
  stroke: color-mix(in srgb, var(--ink-3) 46%, transparent);
  stroke-width: 1.15px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.72;
  transition: stroke var(--t-fast), stroke-width var(--t-fast), opacity var(--t-fast);
}
.tl-comment-link.active {
  stroke: var(--accent);
  stroke-width: 1.6px;
  opacity: 0.92;
}
.tl-comment-overview-card {
  position: absolute;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--bg-raise);
  box-shadow: var(--shadow);
  z-index: 2;
}
.tl-comment-overview-card .cthread { gap: 4px; }
.tl-comment-overview-card .cmt {
  padding: 3px 0;
  border-radius: 0;
  background: transparent;
}
.tl-comment-overview-card .cmt.active { background: transparent; }
.tl-comment-overview-card .cmt.reply {
  margin-left: 12px;
  padding: 6px 8px;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--bg-sunk) 48%, var(--bg-raise));
}
.tl-rows .tl-row.audio.av,
.tl-rows .tl-row.tx { transition: opacity var(--t-fast); }
.tl-rows.shot-focus .tl-row.audio.av,
.tl-rows.shot-focus .tl-row.tx { opacity: 0.5; }
/* the compare side owns audio: the master's picture-audio and transcript
   grey out — they no longer describe what is being heard */
.tl-rows.compare-audio-elsewhere .tl-row.audio.av,
.tl-rows.compare-audio-elsewhere .tl-row.tx {
  opacity: 0.4;
  filter: grayscale(1);
}

.tl-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  display: flex;
  align-items: center;
  background: var(--tx-pill);
  border: 0;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.tl-pill span { overflow: hidden; text-overflow: ellipsis; }
.tl-pill.empty span { visibility: hidden; }
.tl-row.tx.overview .tl-pill { top: 6px; }
.tl-row.tx.overview .tl-pill.condensed {
  top: 0;
  bottom: auto;
  height: 3px;
  padding: 0;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink-3) 28%, transparent);
}
.tl-row.tx.overview .tl-pill.condensed:hover,
.tl-row.tx.overview .tl-pill.condensed.sel { background: var(--accent); }
.tl-pill:hover {
  background: color-mix(in srgb, var(--ink) 7%, var(--tx-pill));
  color: var(--ink);
  z-index: 2;
}
.tl-pill.sel {
  background: color-mix(in srgb, var(--accent) 20%, var(--tx-pill));
  color: var(--ink);
  z-index: 2;
}
/* long lines wrap into as many smaller lines as the (draggable) TX row
   height affords (--tx-lines); when even that overflows, the tail fades out
   instead of ellipsizing */
.tl-pill.two span, .tl-pill.fade span {
  white-space: normal;
  overflow-wrap: normal;
  text-wrap: balance;
  font-size: 10px;
  line-height: 1.32;
  display: block;
  max-height: calc(var(--tx-lines, 2) * 1.32em);
}
/* Never strand a letter from a short word. Older engines without limits
   keep whole words; supported engines may hyphenate 10+ letters, 4 per side. */
@supports (hyphenate-limit-chars: 10 4 4) {
  .tl-pill.two span, .tl-pill.fade span {
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
}
.tl-pill.fade span {
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 96%);
}
.tl-row.tx.detail-open { z-index: 6; }
.tl-tx-detail {
  position: absolute;
  top: calc(100% + 5px);
  z-index: 8;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--bg-raise);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  line-height: 1.42;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.tl-tx-detail::before {
  content: "";
  position: absolute;
  top: -4px;
  left: calc(var(--tx-detail-anchor, 16px) - 4px);
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--bg-raise);
  transform: rotate(45deg);
}

.tl-track {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: var(--pill);
  border: 0;
  border-radius: var(--r-s);
  overflow: hidden;
  cursor: pointer;
  transition: background var(--t-fast);
}
.tl-track canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-track .tname {
  position: absolute;
  left: 6px; top: 3px;
  font: 550 9.5px var(--mono);
  letter-spacing: 0.05em;
  color: var(--ink-2);
  text-transform: uppercase;
  pointer-events: none;
}
.tl-track .tl-track-commands {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--pill) 88%, transparent);
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.tl-track .tl-track-commands svg { width: 14px; height: 14px; }
.tl-track:hover .tl-track-commands,
.tl-track:focus-within .tl-track-commands { opacity: 1; }
.tl-track .tl-track-commands:hover,
.tl-track .tl-track-commands:focus-visible { background: var(--bg-raise); }
@media (hover: none) {
  .tl-track .tl-track-commands { opacity: 1; }
  /* long-press surfaces (touch.js): no iOS save sheet or selection
     magnifier during the hold; desktop selection is unchanged */
  .tl-clip, .tl-alt, .tl-pill, .tl-track, .board-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}
.tl-track.sel { background: color-mix(in srgb, var(--accent) 16%, var(--pill)); }

.tl-alt {
  position: absolute;
  inset-block: 2px;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-s);
  color: var(--ink-2);
  cursor: pointer;
}
.tl-alt.empty {
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--ink-3) 8%, var(--bg-sunk));
  font: 560 10px var(--mono);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.tl-alt.empty svg { width: 14px; height: 14px; flex: none; }
.tl-alt.empty:hover, .tl-alt.drag { border-color: var(--ink-2); color: var(--ink); }
.tl-alt.drag { background: color-mix(in srgb, var(--accent) 14%, var(--bg-raise)); }
.tl-alt.ready {
  inset-block: 2px;
  justify-content: center;
  overflow: visible;
  border: 0;
  background: transparent;
}
.tl-alt.ready:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-alt .alt-stack {
  --alt-fill: color-mix(in srgb, var(--alt-color, var(--shot-blue)) 30%, var(--bg-raise));
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  display: grid;
  grid-template-rows: repeat(var(--alt-layers, 3), 7px);
  gap: 1px;
  border-radius: var(--r-s);
}
.tl-alt .alt-pancake {
  min-width: 0;
  border-radius: var(--r-s);
  background: var(--alt-fill);
  transition: background var(--t-fast);
}
.tl-alt.ready:hover .alt-stack {
  --alt-fill: color-mix(in srgb, var(--alt-color, var(--shot-blue)) 42%, var(--bg-raise));
}
.tl-alt.ready.sel .alt-stack {
  --alt-fill: color-mix(in srgb, var(--alt-color, var(--shot-blue)) 82%, var(--bg-raise));
}
.tl-alt-hover {
  position: absolute;
  top: -17px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--bg);
  font: 550 9.5px var(--mono);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 4;
}
.tl-alt.ready:hover + .tl-alt-hover,
.tl-alt.ready:focus-visible + .tl-alt-hover { opacity: 1; }

/* ---- M1: Sections — editor-drawn spans of the cut (docs/SECTIONS_BRIEF.md).
   One fixed row above V2/V1; while comparing, the compare cut's Sections sit
   read-only on M2 above the compare lane. Bars take the Shot tint mixes: 68%
   at rest, 80% under the pointer, 94% selected with no outline. */
.tl-row.sections { height: 26px; margin-top: 10px; }
.tl-row.sections + .tl-row.alt,
.tl-row.sections + .tl-row.video,
.tl-row.sections + .tl-row.compare { margin-top: 4px; }
.tl-row.sections.compare .tl-gutter { color: var(--ink-3); }
.tl-section {
  --section-tint: var(--section-color, var(--shot-blue));
  position: absolute;
  inset-block: 3px 0;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
  /* A tab over the Shots, not another Shot: rounded top, square bottom,
     a translucent fill at rest that fills in under the pointer. */
  border-radius: var(--r-s) var(--r-s) 0 0;
  background: color-mix(in srgb, var(--section-tint) 20%, transparent);
  color: #fff;
  font: 550 11px/1 var(--sans);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.tl-section:hover { background: color-mix(in srgb, var(--section-tint) 40%, transparent); }
.tl-section.sel {
  background: color-mix(in srgb, var(--section-tint) 55%, transparent);
  box-shadow: var(--shadow-pop);
  z-index: 2;
}
.tl-section.dragging { box-shadow: var(--shadow-pop); z-index: 3; opacity: 0.92; }
.tl-section.preview { pointer-events: none; opacity: 0.6; }
.tl-section[hidden] { display: none; }
.tl-section.narrow { padding: 0; }
.tl-section.narrow .tl-section-label { display: none; }
.tl-section:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-section.compare {
  background: color-mix(in srgb, var(--section-tint) 14%, transparent);
  color: var(--ink-2);
}
.tl-section.compare:hover { background: color-mix(in srgb, var(--section-tint) 28%, transparent); }
/* The name rests at half strength without its shadow and comes forward with
   the bar under the pointer or while selected. */
.tl-section-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.5;
  transition: opacity var(--t-fast);
}
.tl-section:hover .tl-section-label,
.tl-section.sel .tl-section-label,
.tl-section.dragging .tl-section-label {
  opacity: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.tl-section-edge { position: absolute; inset-block: 0; width: 10px; cursor: ew-resize; }
.tl-section-edge.start { left: 0; }
.tl-section-edge.end { right: 0; }
.tl-section-edge::after {
  content: "";
  position: absolute;
  inset-block: 5px;
  left: 3px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.78);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.tl-section-edge.end::after { left: auto; right: 3px; }
/* Only the edge under the pointer shows its grab bar (Nathan, 2026-09-10),
   and it stays while that edge is being dragged. */
.tl-section-edge:hover::after,
.tl-section-edge.active::after { opacity: 1; }
.tl-section-rename {
  flex: 1;
  min-width: 60px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font: inherit;
  text-shadow: none;
  outline: none;
}
/* ⌘-drag: the Section about to be drawn, the loop draft's blue so the two
   drags read as one family; it snaps to cuts on release. */
.tl-section-draft {
  position: absolute;
  top: -6px;
  bottom: -2px;
  z-index: 6;
  pointer-events: none;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 2px solid var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* On a light ground the translucent fills are pale, so the label is ink
   until the bar is selected and saturated. */
:root[data-theme="light"] .tl-section { color: var(--ink); }
:root[data-theme="light"] .tl-section:hover .tl-section-label,
:root[data-theme="light"] .tl-section.sel .tl-section-label,
:root[data-theme="light"] .tl-section.dragging .tl-section-label { text-shadow: none; }
:root[data-theme="light"] .tl-section.compare { color: var(--ink-2); }

/* ---- Sections in Board, Frame and Tracker (docs/SECTIONS_BRIEF.md,
   rulings 9–11). The same tint mixes as the M1 bars. */
/* Board: a Section is the tint of its cards and, while the pointer rests
   on one of them, a tab on the group's first card that names it (a bare
   colour tab when unnamed). The Board's flow is untouched. */
.board-card.in-section:not(.sel):not(:hover) {
  background: color-mix(in srgb, var(--section-color) 9%, var(--bg-raise));
}
.board-section-tag {
  position: absolute;
  top: -12px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 20px;
  max-width: calc(100% - 20px);
  padding: 0 9px;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--section-color, var(--shot-blue)) 78%, var(--bg-raise));
  color: #fff;
  font: 550 11px/1 var(--sans);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), box-shadow var(--t-fast);
}
.board-section-tag.show,
.board-section-tag.sel { opacity: 1; pointer-events: auto; }
.board-section-tag.sel {
  background: color-mix(in srgb, var(--section-color, var(--shot-blue)) 94%, var(--bg-raise));
  box-shadow: var(--shadow-pop);
}
.board-section-tag.bare { top: -8px; min-width: 26px; height: 10px; padding: 0; }
.board-section-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.board-section-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Frame: the bar row shares the strip's columns and scrolls with it. */
.frame-strip { --fs-w: 56px; }
.fs-sections {
  display: grid;
  grid-template-columns: repeat(var(--fs-count, 1), var(--fs-w));
  gap: 5px;
  width: max-content;
  height: 4px;
  margin: 5px auto 0;
}
.fs-bar {
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--section-color, var(--shot-blue));
  opacity: 0.35;
  cursor: pointer;
}
.fs-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tracker: a 12 px column left of Shot; both stay pinned while the grid
   scrolls sideways. Negative top margins bridge the row gap so a Section's
   colour runs unbroken down its visible rows. */
.tracker-grid-head > .tracker-section-head {
  position: sticky;
  left: 0;
  z-index: 9;
  padding: 0;
  background: transparent;
}
.tracker-grid.has-sections .tracker-grid-head > .tracker-section-head + .tracker-fixed-head {
  position: sticky;
  left: 16px;
  z-index: 9;
  background: var(--tracker-head-bg);
}
.tracker-grid.has-sections .tracker-shot-cell { left: 16px; }
/* The task list is placed by column number (3 / 6 without the Section
   column); with the column leading every row it moves one over. */
.tracker-section-cell {
  position: sticky;
  left: 0;
  z-index: 5;
  min-width: 0;
  overflow: hidden;
  border-radius: 0;
  background: color-mix(in srgb, var(--section-color, var(--shot-blue)) 20%, transparent);
  transition: background var(--t-fast);
}
/* Resting on any cell of a Section lights the whole run, the M1 strengths. */
.tracker-section-cell.hot { background: color-mix(in srgb, var(--section-color, var(--shot-blue)) 40%, transparent); }
.tracker-section-cell.blank { background: transparent; }
.tracker-section-cell:not(.first):not(.blank) { margin-top: -4px; }
/* Rounded on the left only, square against the Shot column, like the M1 tabs. */
.tracker-section-cell.first { border-radius: 6px 0 0 0; }
.tracker-section-cell.last { border-radius: 0 0 0 6px; }
.tracker-section-cell.first.last { border-radius: 6px 0 0 6px; }

.tl-cursor {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--ink-2) 64%, transparent);
  opacity: 0.62;
  pointer-events: none;
  z-index: 6;
}
.tl-cursor .flag,
.player-timeline-flag,
.tl-playback-head .flag {
  height: 20px;
  padding: 2px 5px;
  border-radius: 3px;
  font: 550 11px / 16px var(--mono);
  white-space: nowrap;
}
.tl-cursor .flag,
.player-timeline-flag {
  background: var(--ink-2);
  color: var(--bg);
}
.tl-cursor .flag {
  position: absolute;
  top: 2px;
  left: 3px;
}

/* floating comment panel — C1 hover/selection, Shot click, Board card click */
.cmt-pop {
  position: fixed;
  z-index: 55;
  width: 300px;
  overflow: visible;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  display: grid;
  gap: 6px;
  animation: pop-in 90ms ease-out;
}
.cmt-pop-body {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.cmt-pop-add {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-3px);
  transition: opacity var(--t-fast), transform var(--t-fast), filter var(--t-fast);
}
.cmt-pop:hover .cmt-pop-add,
.cmt-pop:focus-within .cmt-pop-add {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cmt-pop-add:hover { filter: brightness(1.08); }
@media (hover: none) {
  .cmt-pop-add { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cmt-pop-add svg { width: 14px; height: 14px; }
/* Popup roots stay flat like single comments; replies alone become the
   subordinate boxes, so hierarchy never changes the root's visual level. */
.cmt-pop { padding: 8px 10px; }
.cmt-pop .cthread { gap: 4px; }
.cmt-pop .cmt { border: 0; background: transparent; border-radius: 0; padding: 3px 0; }
.cmt-pop .cmt.active { background: transparent; }
.cmt-pop .cthread + .cthread {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.cmt-pop .cmt.reply {
  border: 0;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--bg-sunk) 48%, var(--bg-raise));
  margin-left: 12px;
  padding: 6px 8px;
}

/* shot start TC — revealed above the block on hover */
.tl-stc {
  position: absolute;
  left: var(--shot-start);
  top: -17px;
  font: 550 9.5px var(--mono);
  background: var(--ink);
  color: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 4;
  white-space: nowrap;
}
.tl-clip:hover + .tl-stc { opacity: 1; }
.tl-lane.status-rail .tl-clip:not(.status-active):hover + .tl-stc { opacity: 0; }
.tl-stc.offscreen { visibility: hidden; }
.shot-status-label { display: none; }
.tl-clip.status-outside.sel.status-active + .tl-stc {
  left: var(--status-left);
  background: var(--st-color);
  color: #fff;
  padding: 2px 6px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 1;
  z-index: 5;
}
.tl-clip.status-outside.sel.status-active + .tl-stc .shot-start-tc { display: none; }
.tl-clip.status-outside.sel.status-active + .tl-stc .shot-status-label { display: inline; }

/* The playback head stays below the player; hover has a faint upper extension. */
.tl.paused .tl-playback-head { z-index: 10; }
.tl-cursor { z-index: 10; }

/* shot palette row inside the clip context menu */
/* Shot menu state rows (views/shotmenu.js). Each reads at rest as the Shot's
   current state and reveals its choices on hover or keyboard focus: the
   status badge (click to change), the colour chip with its palette, and the
   Re-cut item with its level segment. Hidden choices keep their box so the
   row never jumps, and they stay focusable for arrow-key navigation. */
.pop .mi-status .st-chip {
  height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  font: 650 9.5px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pop .mi-status .st-chip.ghost {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--ink-3);
}
.pop .mi-status .hint { opacity: 0; transition: opacity var(--t-fast); }
.pop .mi-status:hover .hint,
.pop:not([data-pointer-open]) .mi-status:focus-visible .hint { opacity: 1; }
.pop .mi-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: var(--r-m);
}
.pop .mi-swatches:hover,
.pop .mi-swatches:focus-within { background: var(--bg-sunk); }
/* At rest the colour pill matches the status badge's footprint; it collapses
   as the palette fades in beside it. */
.pop .mi-swatches .sw-chip {
  flex: none;
  width: 56px;
  height: 18px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--sw);
  transition: width var(--t-fast);
}
.pop .mi-swatches:hover .sw-chip,
.pop .mi-swatches:focus-within .sw-chip { width: 28px; }
.pop .mi-swatches .sw-chip.mixed {
  background: repeating-linear-gradient(135deg, var(--line-strong) 0 3px, transparent 3px 6px);
}
.pop .mi-swatches .sw {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sw);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.pop .mi-swatches:hover .sw,
.pop .mi-swatches:focus-within .sw {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.pop .mi-swatches .sw:hover { transform: scale(1.15); }
/* the ring is an outline, so it stays concentric at every pixel density */
.pop .mi-swatches .sw.cur { outline: 2px solid var(--sw); outline-offset: 2px; }
.pop .mi-swatches .sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pop .mi-levels {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 9px;
  border-radius: var(--r-m);
}
.pop .mi-levels:hover,
.pop .mi-levels:focus-within { background: var(--bg-sunk); }
.pop .mi-levels .lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.pop .mi-levels .lbl svg { width: 14px; height: 14px; flex: none; }
.pop .mi-levels .seg {
  margin-left: auto;
  background: var(--bg-raise);
  opacity: 0;
  transform: translateX(4px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.pop .mi-levels:hover .seg,
.pop .mi-levels:focus-within .seg {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.pop .mi-levels .seg button { height: 22px; font-size: 11px; padding: 0 9px; }
.pop .mi-levels .seg button.cur,
.pop .mi-levels .seg button.cur:hover {
  background: transparent;
  color: var(--ink-3);
  outline: 1px dashed var(--ink-3);
  outline-offset: -1px;
  cursor: default;
}

/* playback-limited region: a quiet band behind the stack */
.tl-loop-region {
  position: absolute;
  top: -6px;
  bottom: -2px;
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-radius: var(--r-s);
  pointer-events: none;
  z-index: 1;
}
.tl-loop-region.draft {
  z-index: 6;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 2px solid var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Option-drag on negative space: the region the Timeline is about to fill
   the width with. Same blue family as the loop draft, dashed so the two
   gestures never read as one. */
.tl-zoom-region.draft {
  position: absolute;
  top: -6px;
  bottom: -2px;
  z-index: 6;
  pointer-events: none;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1.5px dashed var(--accent);
}
.tl-loop-chip {
  position: sticky;
  top: 33px;
  right: 10px;
  align-self: flex-end;
  z-index: 11;
  height: 22px;
  margin-bottom: -22px; /* pinned indicator — takes no room in the stack */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  font: 600 10px var(--mono);
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--ok);
  border-radius: 11px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.tl-loop-chip svg { width: 12px; height: 12px; }
.tl-loop-chip:hover { filter: brightness(1.08); }

/* sole Timeline position indicator: the media's presented time */
.tl-playback-head {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ok);
  pointer-events: none;
  z-index: 8;
  will-change: transform;
}
.tl-playback-head .flag {
  position: absolute;
  top: calc(var(--tl-scroll-top, 0px) + 26px);
  left: 4px;
  transform: translateY(-50%);
  font-weight: 620;
  background: color-mix(in srgb, var(--ok) 88%, #000);
  color: #fff;
}

/* ============================================================ board */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--board-size, 218px), 100%), 1fr));
  gap: 14px;
  padding: 18px;
  /* rows stretch: every card in a row matches the tallest one */
}
.board-card {
  background: var(--bg-raise);
  border: 0;
  border-radius: var(--r-m);
  padding: 7px;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  position: relative;
}
.board-card:hover { background: color-mix(in srgb, var(--ink) 4%, var(--bg-raise)); box-shadow: var(--shadow); }
.board-card.sel { background: color-mix(in srgb, var(--accent) 18%, var(--bg-raise)); box-shadow: var(--shadow); }
.board-card.playing { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 70%, transparent), var(--shadow); }
.board-card.dragging { opacity: 0.35; }
.board-card .im {
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--thumb-bed);
}
.board-card .im.ph { aspect-ratio: 16 / 9; }
.board-card .im img { width: 100%; height: auto; }
.board-card .im > video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: none;
}
.board-card .im .st-line {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--r-m);
  box-shadow: inset 0 0 0 4px var(--st-color);
  pointer-events: none;
  transition: box-shadow var(--t-fast);
}
.board-card:hover .im .st-line,
.board-card.playing .im .st-line { box-shadow: inset 0 0 0 6px var(--st-color); }
.board-card .st-chip {
  position: absolute;
  right: 7px; bottom: 7px;
  z-index: 4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 7px;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  transition: opacity var(--t-fast);
}
.board-card .st-chip.ghost { opacity: 0; }
.board-card:hover .st-chip.ghost, .board-card.sel .st-chip.ghost { opacity: 1; }
@media (hover: none) {
  .board-card .st-chip.ghost { opacity: 1; }
}
.board-cbdg {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 5;
  min-width: 27px;
  height: 27px;
  padding: 0 7px;
  border-radius: 999px;
  border: 0;
  font: 650 9.5px var(--mono);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(5px);
  cursor: pointer;
  transition: transform var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.board-cbdg:hover { transform: scale(1.1); }
.board-card.sel .board-cbdg.done { opacity: 1; }
.board-cbdg.done { opacity: 0.58; }
.board-loop-mark {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 4;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ok);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.board-loop-mark svg { width: 12px; height: 12px; }
.frame-meta .st-chip { cursor: pointer; }
.board-card .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 3px 2px;
}
.board-card .meta .tc { font: 500 10px var(--mono); color: var(--ink-3); }
.board-card .meta .lbl {
  font-size: 12px;
  font-weight: 560;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.board-card:hover .meta .lbl,
.board-card.sel .meta .lbl {
  color: color-mix(in srgb, var(--shot-color, var(--shot-blue)) 74%, var(--ink));
}
/* Retain the transcript's layout while the shared caption replaces its ink. */
.board-card .caps { position: relative; min-height: 48px; padding: 2px 3px 3px; display: grid; gap: 3px; }
.board-card .caps > .player-subtitles { position: absolute; inset: 0; }
.board-card .caps:has(> .player-subtitles:not([hidden])) > .cap { visibility: hidden; }
.board-card .cap {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.board-card .cap .cont { color: var(--ink-3); }
.board-card .cap .pickup { opacity: 0.4; }
.board-drop-ind {
  position: absolute;
  top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  z-index: 5;
  pointer-events: none;
}
.board-add {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-l);
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10.2;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 540;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.board-add:hover { border-color: var(--accent); color: var(--accent-text); }

/* ============================================================ frame view */

.frame-view {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 74px 28px;
  position: relative;
}

/* shot selector tray — hangs from the tools bar, pinned while scrolling */
.frame-strip {
  position: sticky;
  top: 0;
  z-index: 12;
  align-self: stretch;
  margin: 0 -74px;
  padding: 18px 14px 8px; /* the Board's top margin above the thumbnails */
  background: var(--bg-sunk); /* the active tab's fill, so the two join */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
}
.frame-strip .fs-row {
  display: flex;
  gap: 5px;
  width: max-content;
  margin-inline: auto;
}

.frame-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  width: fit-content;
  min-width: min(680px, 100%);
  max-width: min(1600px, 100%);
}

/* the image pins beneath the tray; later content scrolls underneath it */
.frame-pin {
  --frame-subtitle-h: 0px;
  --frame-shuttle-h: 0px;
  position: sticky;
  top: var(--frame-strip-h, 56px); /* the strip's measured height */
  z-index: 11;
  background: var(--bg-sunk);
  padding-bottom: 10px;
}
.frame-pin.has-playback { --frame-shuttle-h: 80px; }
.frame-shuttle { position: relative; height: calc(var(--frame-shuttle-h) + var(--frame-subtitle-h)); background: var(--bg-sunk); --shuttle-surface: var(--bg); }
.review-player.has-subtitles ~ .canvas .frame-pin.has-playback { --frame-subtitle-h: 48px; }
.frame-stage-wrap {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.frame-stage-wrap.resized { width: min(var(--frame-width), 100%); }
.frame-stage-wrap.resized .frame-stage { width: 100%; }
.frame-stage-wrap.resized .frame-stage > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}
.frame-corner-grip {
  /* shares the default .corner-grip mask — both windows use --r-window */
  right: -14px;
  bottom: -14px;
}
.frame-stage {
  position: relative;
  max-width: 100%;
  border-radius: var(--r-window);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  background: var(--thumb-bed);
}
.frame-stage > img { display: block; max-height: 60vh; width: auto; height: auto; max-width: 100%; }
.design-overlay { position: absolute; pointer-events: none; }
.design-overlay > img { display: block; width: 100%; height: 100%; max-height: none; }
.design-overlay.editable { pointer-events: auto; cursor: move; touch-action: none; outline: 1px dashed var(--accent); }
.frame-stage .draw { pointer-events: none; }
.frame-stage.drawing .design-overlay { pointer-events: none; }
.overlay-grip { position: absolute; right: 0; top: 0; width: 24px; height: 24px; padding: 3px; cursor: nwse-resize; background: var(--accent); color: white; }
.overlay-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.overlay-controls label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.overlay-controls input { width: 110px; }
.frame-stage.overlay-drop { outline: 3px solid var(--accent); }
.review-home { max-width: 1200px; width: 100%; margin: 0 auto; }
.review-home-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.review-home h1 { font-size: 24px; font-weight: 650; }
.review-home h2 { font-size: 17px; margin-bottom: 12px; }
.review-link-form { display: flex; gap: 8px; max-width: 600px; margin-bottom: 24px; }
.review-link-form input { min-width: 0; flex: 1; }
.review-home-group { margin: 28px 0; }
.recent-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.recent-review { min-width: 0; color: var(--ink); text-decoration: none; }
.recent-review-image { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: var(--thumb-bed); border-radius: 6px; }
.recent-review-image img { width: 100%; height: 100%; object-fit: cover; }
.recent-review-image svg { width: 40px; height: 40px; }
.recent-review-name { display: block; margin-top: 8px; overflow-wrap: anywhere; }
.frame-stage svg.draw { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-stage.drawing { cursor: crosshair; touch-action: none; } /* armed tool owns the finger */
/* shot-loop playback: the borrowed media element covers the still's box */
.frame-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 2;
}
.frame-stage.playing img { visibility: hidden; }
.frame-stage.playing.borrow-pending img { visibility: visible; }
.frame-stage > video.borrow-pending,
.board-card .im > video.borrow-pending { opacity: 0; }
.frame-stage.playing svg.draw { visibility: hidden; }
/* extend mode: neighbor shots get a quiet grey shade while they play */
.frame-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--shade);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.frame-stage.dim .frame-shade { opacity: 1; }
.frame-extend[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.frame-extend[aria-pressed="true"]:hover { background: var(--accent); }
.frame-nav {
  position: absolute;
  top: calc((100% - 10px - var(--frame-subtitle-h) - var(--frame-shuttle-h)) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 60px; height: 92px;
  border-radius: var(--r-l);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  font-size: 44px;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.frame-nav:hover { background: var(--bg); color: var(--ink); }
.frame-nav.prev { left: -72px; }
.frame-nav.next { right: -72px; }
.frame-meta {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 500 12px var(--mono);
  color: var(--ink-2);
}
.frame-meta .spacer { flex: 1; }
.frame-meta .shot {
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--shot-color, var(--shot-blue));
  color: #fff;
  font-weight: 650;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
}
.frame-meta .frame-download {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink-2);
}
.frame-meta .frame-download:hover:not(:disabled) { color: var(--ink); background: var(--bg-well); }
.frame-meta .frame-download:disabled { opacity: 0.38; }
.frame-meta .frame-download svg { width: 14px; height: 14px; }
.frame-meta .st-chip {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #fff; padding: 3px 8px; border-radius: 5px;
}
/* transcript pills under the frame, left aligned like the timeline */
.frame-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}
.fr-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  background: var(--tx-pill);
  border: 0;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background var(--t-fast), color var(--t-fast);
}
.fr-pill:hover {
  background: color-mix(in srgb, var(--ink) 7%, var(--tx-pill));
  color: var(--ink);
}
.fr-pill .cont { color: var(--ink-3); }

/* composer: tools row · resizable text field · send row */
.frame-composer {
  position: relative; /* anchors the "#" and "@" completer */
  display: grid;
  gap: 8px;
  background: var(--bg-raise);
  border: 0;
  border-radius: 12px;
  padding: 9px 10px 10px;
  box-shadow: var(--shadow);
}
.frame-composer .tools { display: flex; align-items: center; gap: 4px; }
.frame-composer .btn.icon[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.frame-composer .vr { width: 1px; height: 16px; background: var(--line); margin: 0 2px; flex: none; }
.frame-composer .cfield {
  width: 100%;
  min-height: 46px;
  max-height: 40vh;
  font-size: 13px;
  line-height: 1.45;
}
.frame-composer .send-row { display: flex; align-items: center; gap: 8px; }
.frame-composer .send-row .spacer { flex: 1; }
.frame-cmts { display: grid; gap: 8px; }
.fs {
  flex: none;
  width: var(--fs-w, 56px);
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.55;
  cursor: pointer;
  background: var(--thumb-bed);
  transition: opacity var(--t-fast), box-shadow var(--t-fast);
}
.fs:hover { opacity: 0.85; }
.fs.cur { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.fs img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================ comment tray */

.tray {
  position: relative;
  width: var(--tray-current-w, var(--tray-w));
  flex: none;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--bg);
  min-height: 0;
  overflow: visible;
  transition: width 180ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.tray.resizing { transition: none; }
.tray.collapsed { width: var(--tray-peek-w, 36px); }
/* The grab tab: room around a 16px icon, soft outer corners, and a barely
   rounded base where it meets the tray. The Dock's tab mirrors it. */
.tray-toggle {
  position: absolute;
  left: -34px;
  top: 9px;
  z-index: 22;
  width: 34px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 10px 3px 3px 10px;
  background: var(--bg);
  color: var(--ink-2);
  box-shadow: -3px 2px 8px rgba(0, 0, 0, 0.12);
  transition: color var(--t-fast), background var(--t-fast);
}
.tray-toggle:hover { color: var(--ink); background: var(--bg-raise); }
.tray-toggle svg { width: 16px; height: 16px; }
.tray-resize {
  position: absolute;
  left: -5px;
  top: 48px;
  bottom: 0;
  z-index: 21;
  width: 10px;
  cursor: ew-resize;
  touch-action: none;
}
.tray-resize::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.tray-resize:hover::after,
.tray-resize:focus-visible::after,
.tray.resizing .tray-resize::after { opacity: 0.55; }
.tray-resize:focus-visible { outline: none; }
.tray.collapsed .tray-resize { display: none; }
.tray-peek {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 58px 6px 12px;
  background: var(--bg);
  cursor: pointer;
  overflow: hidden;
}
.tray.collapsed .tray-peek { display: flex; }
.tray-peek-card {
  flex: none;
  height: 28px;
  width: 100%;
  border-radius: 7px 0 0 7px;
  background: var(--bg-raise);
  opacity: 0.72;
}
.tray-peek:hover .tray-peek-card {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-raise));
}
.tray.collapsed .tray-head,
.tray.collapsed .tray-list,
.tray.collapsed .composer { display: none; }
.tray-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
}
.tray-head .t { font-size: 13px; font-weight: 680; letter-spacing: -0.01em; }
.tray-head .count { font: 500 11px var(--mono); color: var(--ink-3); }
.comment-selection-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  min-height: 38px;
  padding: 2px 12px 6px;
  border-bottom: 1px solid var(--line);
}
.comment-selection-bar[hidden], .comment-select-check[hidden],
.tray-head .comment-select-mode[hidden] { display: none; }
.tray.collapsed .comment-selection-bar { display: none; }
.comment-selection-count {
  flex: 1;
  min-width: 0;
  font: 500 11px var(--mono);
  color: var(--ink-2);
  white-space: nowrap;
}
.comment-selection-bar .btn.icon { width: 28px; height: 28px; padding: 6px; flex: none; }
.comment-selection-bar svg { width: 14px; height: 14px; }
.comment-selection-bar button:disabled { opacity: 0.3; cursor: default; }
.comment-select-check {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-3);
  background: var(--bg-sunk);
  cursor: pointer;
}
.comment-select-check[aria-checked="false"] svg { visibility: hidden; }
.comment-select-check[aria-checked="true"],
.comment-select-check[aria-checked="mixed"] { background: var(--accent-soft); color: var(--accent-text); }
.comment-select-check[aria-checked="mixed"] svg { display: none; }
.comment-select-check[aria-checked="mixed"]::after {
  content: "";
  width: 8px;
  height: 2px;
  background: currentColor;
}
.tray-head .comment-select-mode[aria-pressed="true"] { color: var(--accent-text); }
.tray-list .cthread.bulk-selected > .cmt { background: var(--accent-soft); opacity: 1; }
.tray-list .cthread.bulk-selected > .cmt.reply {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.selecting-comments .tray-list .foot :is(.rp, .del, .ck, .dk, .tag-chip.add),
.selecting-comments .tray-list .cmt.reply .del { visibility: hidden; }
.selecting-comments .tray-list .tag-chip:not(.add) { opacity: 1; }
.tray-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tray-list .cthread {
  flex: none;
  overflow: visible;
  background: transparent;
}
.tray-list .cmt {
  border: 0;
  border-radius: var(--r-m);
  background: var(--bg-raise);
}
.tray-list .cmt.hl,
.tray-list .cmt.callout { background: var(--accent-soft); box-shadow: none; }
.tray-list .cmt.reply {
  margin-left: 16px;
  padding: 7px 9px;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--bg-sunk) 38%, transparent);
}
.tray-empty {
  margin: auto;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
  padding: 30px 20px;
}

/* shared comment atoms — used by the tray, timeline popups, and Comments view */
.who { min-width: 0; font-size: 12px; font-weight: 660; }
.author-pill, .tl-comment-pill, .board-cbdg {
  --author-color: var(--ink-2);
  color: color-mix(in srgb, var(--author-color) 60%, var(--ink));
  background: color-mix(in srgb, var(--author-color) 14%, var(--bg-raise));
}
.author-pill {
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 16px;
}
.who-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who.owner {
  display: inline-flex;
  flex-flow: row wrap;
  align-items: baseline;
  column-gap: 5px;
  row-gap: 2px;
  max-width: 100%;
}
.who-role {
  flex: none;
  font: 640 8px var(--mono);
  letter-spacing: 0.08em;
  color: var(--accent-text);
  line-height: 1;
}
.when {
  font: 400 10px var(--mono);
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.cmt:hover .when, .cmv-card:hover .when { opacity: 1; }
.anchor-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 10px var(--mono);
  color: var(--ink-2);
  background: var(--bg-sunk);
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.anchor-chip:hover { color: var(--accent-text); }
.anchor-chip.gone { text-decoration: line-through; opacity: 0.7; }
.comment-menu-label { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.comment-menu-detail {
  color: var(--ink-3);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.anchor-chip.anchor-target.shot {
  color: color-mix(in srgb, var(--anchor-color) 82%, var(--ink));
  background: color-mix(in srgb, var(--anchor-color) 22%, var(--bg-sunk));
}
.anchor-chip.anchor-target.shot.status:not(.tray-shot-status) {
  color: #fff;
  background: var(--anchor-color);
}
.anchor-chip.anchor-target.shot:hover { color: var(--ink); }
.anchor-chip.anchor-target.shot.status:hover { color: #fff; filter: brightness(1.08); }
.tray-list .anchor-chip.tray-shot-status {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  color: var(--ink-2);
  background: transparent;
}
.tray-shot-status > span {
  grid-area: 1 / 1;
  justify-self: end;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tray-shot-status .anchor-name { background: var(--bg-sunk); }
.tray-shot-status .anchor-status { display: none; color: #fff; background: var(--anchor-color); }
.tray-list .cmt:is(:hover, :focus-within, .active, .hl, .callout) .tray-shot-status .anchor-name,
.tray-list .tray-shot-status:is(.shot-selected, .shot-hover) .anchor-name {
  color: #fff;
  background: var(--anchor-color);
}
.tray-shot-status:is(:hover, :focus-visible) .anchor-name { visibility: hidden; }
.tray-shot-status:is(:hover, :focus-visible) .anchor-status { display: block; }
/* Separate dynamic selectors keep WebKit's :has() hover invalidation reliable. */
.tray-list .head-anchor:has(.tray-shot-status:hover) .anchor-tc,
.tray-list .head-anchor:has(.tray-shot-status:focus-visible) .anchor-tc {
  display: none;
}

/* card foot: brush + target chip left · delete / resolved-by (hover) · check */
.foot { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.foot .spacer { flex: 1; }
.mark-ic { display: inline-flex; color: var(--accent-text); }
.mark-ic svg { width: 13px; height: 13px; }
.cmt .del,
.cmv-card .del {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cmt .del svg, .cmv-card .del svg { width: 10px; height: 10px; }
.cmt:hover .del, .cmv-card:hover .del,
.cmt .del:focus-visible, .cmv-card .del:focus-visible { opacity: 1; }
.cmt .del:hover, .cmv-card .del:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.foot .by { font: 400 10px var(--mono); color: var(--ink-3); opacity: 0; transition: opacity var(--t-fast); }
.cmt:hover .foot .by, .cmv-card:hover .foot .by { opacity: 1; }
.ck {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast),
              border-color var(--t-fast), color var(--t-fast);
}
.ck svg { width: 11px; height: 11px; }
.cmt:hover .ck, .cmv-card:hover .ck, .resolved .ck { opacity: 1; }
.ck:hover { border-color: var(--ok); color: var(--ok); }

/* comment tags: one quiet department chip per root (EDIT · SOUND · VFX ·
   GFX · COLOR). Auto tags read quieter than chosen ones; an untagged root
   reveals a "#" entry point on hover like the other foot actions. */
.tag-chip {
  flex: none;
  border: 0;
  font: 620 9.5px var(--mono);
  letter-spacing: 0;
  color: var(--ink-2);
  background: var(--bg-sunk);
  border-radius: 5px;
  padding: 3px 6px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.tag-chip:hover:not(:disabled) { color: var(--ink); background: var(--line); }
.tag-chip:disabled { cursor: default; }
.tag-chip.auto { opacity: 0.62; }
.tag-chip.auto:hover:not(:disabled) { opacity: 1; }
.tag-chip.add { opacity: 0; pointer-events: none; padding-inline: 7px; }
.cmt:hover .tag-chip.add,
.tag-chip.add:focus-visible { opacity: 1; pointer-events: auto; }
.pop.tag-pop { min-width: 0; }
.cmt .body .tag-ref {
  font-weight: 620;
  color: var(--ink);
  background: var(--bg-sunk);
  border-radius: 4px;
  padding: 0 3px;
}
/* @-mentions: a person reads as a quiet chip; a key file reads as a link
   and opens what it names (the Script window, a Dock item) */
.mention {
  font-weight: 620;
  color: var(--ink);
  background: var(--bg-sunk);
  border-radius: 4px;
  padding: 0 3px;
  white-space: nowrap;
}
.mention.file {
  color: var(--accent-text);
  background: var(--accent-soft);
  cursor: pointer;
}
.mention.file:hover,
.mention.file:focus-visible { text-decoration: underline; outline: none; }

/* composer "#" autocomplete — floats just above the text field */
.tag-complete {
  position: absolute;
  left: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 92px;
  padding: 4px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
}
.tag-complete { min-width: 170px; max-width: 280px; max-height: 208px; overflow-y: auto; }
.tag-complete button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  text-align: left;
  font: 500 11px var(--mono);
  color: var(--ink-2);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.tag-complete button svg { width: 12px; height: 12px; flex: none; }
.tag-complete button .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-complete button .hint {
  margin-left: auto;
  padding-left: 8px;
  font-size: 9.5px;
  color: var(--ink-3);
}
.tag-complete button.on,
.tag-complete button:hover { background: var(--bg-sunk); color: var(--ink); }
.resolved .ck { background: var(--ok); border-color: var(--ok); color: #fff; }
.foot .rp {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.foot .rp svg { width: 11px; height: 11px; }
.cmt:hover .foot .rp, .cmv-card:hover .foot .rp { opacity: 1; }
.foot .rp:hover { color: var(--accent-text); background: var(--accent-soft); }
.foot .dk {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.foot .dk svg { width: 11px; height: 11px; }
.cmt:hover .foot .dk, .cmv-card:hover .foot .dk,
.foot .dk:focus-visible { opacity: 1; }
.foot .dk:hover { color: var(--accent-text); background: var(--accent-soft); }
/* touch has no hover: card actions and hover-only metadata sit at rest */
@media (hover: none) {
  .cmt .when,
  .cmt .del,
  .cmt .foot .by,
  .cmt .ck,
  .cmt .foot .rp, .cmt .foot .dk { opacity: 1; }
  .cmt .tag-chip.add { opacity: 1; pointer-events: auto; }
}

/* threads: replies tuck under their root, one indent level, no anchors */
.cthread { display: grid; min-width: 0; gap: 4px; }
.cmt.reply {
  margin-left: 16px;
  padding: 6px 9px 5px;
  background: var(--bg);
}
.cmt.reply .who { font-size: 11px; }
.cmt.reply .body { margin-top: 2px; font-size: 12.5px; }
.cmv-replies { display: grid; gap: 4px; margin-top: 7px; }
.reply-box { position: relative; display: flex; gap: 6px; margin-left: 16px; }
.reply-box .cfield {
  flex: 1;
  min-width: 0;
  min-height: 28px;
  max-height: 84px;
  font: 450 12.5px/1.4 var(--sans);
  background: var(--bg-raise);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  padding: 5px 9px;
}
.reply-box .cfield:focus { outline: none; border-color: var(--accent); }
.reply-box .nm {
  width: 90px;
  font: 450 12px var(--sans);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 5px 8px;
}

.cmt {
  min-width: 0;
  background: var(--bg-raise);
  border: 0;
  border-radius: var(--r-l);
  padding: 9px 10px 8px;
  cursor: pointer; /* the card itself jumps to its shot / moment */
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.cmt.flash { animation: cmt-flash 1.4s ease-out; }
@keyframes cmt-flash {
  0%, 45% { background: color-mix(in srgb, var(--accent) 18%, var(--bg-raise)); }
}
.cmt.hl {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-raise));
  box-shadow: none;
}
.cmt.active {
  background: color-mix(in srgb, var(--ink) 5%, var(--bg-raise));
}
.cmt .head { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.cmt .head-author {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  gap: 7px;
}
.cmt .head-author .who { flex: 0 1 auto; }
.cmt .head-author .when { flex: none; margin-top: 1px; }
.cmt .head-anchor {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 5px;
}
.cmt .body { margin-top: 5px; font-size: 13px; line-height: 1.5; overflow-wrap: break-word; }
.cmt .body a { color: var(--accent-text); text-decoration: none; }
.cmt .body a:hover { text-decoration: underline; }
.cmt .imgs { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.cmt .imgs img {
  height: 76px;
  border-radius: 6px;
  cursor: zoom-in;
  border: 0;
}
.cmt .foot { margin-top: 7px; }
.cmt.resolved { opacity: 0.62; }

/* composer */
.composer {
  position: relative; /* anchors the "#" tag autocomplete */
  border-top: 1px solid var(--line);
  padding: 9px 10px 10px;
  display: grid;
  gap: 7px;
  background: var(--bg);
}
.composer-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.comment-identity {
  min-width: 0;
  width: 140px;
  max-width: 100%;
  height: 24px;
  padding: 2px 5px;
  font-size: 12px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
}
.comment-identity.account {
  width: auto;
  height: auto;
  min-height: 24px;
  text-align: left;
  overflow-wrap: anywhere;
  font-weight: 560;
}
.comment-identity:hover { border-color: var(--line); }
.comment-identity:focus { border-color: var(--line-strong); }
.composer-head .comment-identity { flex: 1 1 100px; }
.composer .target { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; gap: 6px; min-height: 20px; flex-wrap: wrap; }
.composer .target .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.composer .target .chip.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 620; }
.comment-send { width: 74px; flex: none; justify-content: center; padding-inline: 6px; }
.composer .cfield {
  min-height: 34px;
  max-height: 130px;
  line-height: 1.45;
  font-size: 13px;
}
.tray .composer .cfield { border-color: transparent; }
.tray .composer .cfield:focus { border-color: var(--line-strong); }
.composer .bar { display: flex; align-items: center; gap: 6px; }
.composer .bar .spacer { flex: 1; }
.composer .attach-thumbs,
.frame-composer .attach-thumbs { display: flex; gap: 5px; flex-wrap: wrap; }
.composer .attach-thumbs .at,
.frame-composer .attach-thumbs .at { position: relative; }
.composer .attach-thumbs img,
.frame-composer .attach-thumbs img { height: 40px; border-radius: 5px; border: 0; }
.composer .attach-thumbs .rm,
.frame-composer .attach-thumbs .rm {
  position: absolute;
  top: -5px; right: -5px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 9px;
  display: grid;
  place-items: center;
}
.frame-composer .attach-thumbs .rm { top: 2px; right: 2px; }
.composer .hint { font-size: 10.5px; color: var(--ink-3); }

/* ============================================================ filters */

.comment-state {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: 6px;
  width: 72px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 570;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  background: transparent;
}
.comment-state svg { width: 12px; height: 12px; flex: none; }
.comment-state:hover, .comment-state[aria-expanded="true"] { background: var(--bg-sunk); }
.pop.comment-state-pop { min-width: 0; }
.comment-state-pop [aria-checked="false"] .hint { visibility: hidden; }

.tray-head .fbtn {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink-2);
}
.tray-head .fbtn:hover { background: var(--bg-sunk); color: var(--ink); }
.tray-head .fbtn svg { width: 14px; height: 14px; }
.tray-head .fbtn.on { color: var(--accent-text); }
.tray-head .fbtn.on::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.pop .mi .ed { font: 640 8px var(--mono); letter-spacing: 0.08em; color: var(--accent-text); }

/* ============================================================ Tracker */

.tracker {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.tracker-toolbar {
  flex: none;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--bg-sunk); /* the active tab's fill, so the two join */
}
.tracker-toolbar > .spacer { flex: 1; }
.tracker-filter {
  position: relative;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink-2);
}
.tracker-filter:hover { background: var(--bg-sunk); color: var(--ink); }
.tracker-filter svg { width: 14px; height: 14px; }
.tracker-filter.on { color: var(--accent-text); }
.tracker-filter.on::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.tracker-columns-button {
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 5px;
  color: var(--ink-2);
  font-size: 10.5px;
}
.tracker-columns-button:hover { background: var(--bg-sunk); color: var(--ink); }
.tracker-columns-button svg { width: 13px; height: 13px; }
.tracker-state {
  height: 26px;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 6px;
  background: var(--bg-sunk);
}
.tracker-state button {
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--ink-2);
}
.tracker-state button[aria-pressed="true"] {
  background: var(--bg-raise);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09);
}
.tracker-scope {
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-text);
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 650;
}
.tracker-scope:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tracker-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
}
.tracker-grid {
  min-width: 860px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 0 4px 4px;
}
.tracker-grid-head,
.tracker-row {
  display: grid;
  grid-template-columns: var(--tracker-columns);
  column-gap: 4px;
}
.tracker-grid-head {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 34px;
  padding: 3px 0;
  background: var(--bg);
  font: 620 10px var(--mono);
  color: var(--ink-2);
}
.tracker-grid-head > div,
.tracker-grid-head > button {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 5px;
  background: var(--tracker-head-bg);
}
/* The headers sit darker than the ground in the dark theme (Nathan,
   2026-09-10); the light theme keeps its sunk tone. */
.tracker-grid { --tracker-head-bg: color-mix(in srgb, var(--bg-sunk) 60%, #000); }
:root[data-theme="light"] .tracker-grid { --tracker-head-bg: var(--bg-sunk); }
.tracker-grid-head > .tracker-fixed-head:first-child {
  position: sticky;
  left: 0;
  z-index: 9;
  background: var(--tracker-head-bg);
}
.tracker-fixed-head > span,
.tracker-column-head {
  min-width: 0;
}
.tracker-column-head {
  grid-row: 1;
  gap: 6px;
  text-align: left;
  color: inherit;
  cursor: default;
}
.tracker-column-head[draggable="true"] { cursor: grab; }
.tracker-fixed-head.tracker-column-head { cursor: pointer; }
.tracker-column-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracker-column-head > svg {
  width: 12px;
  height: 12px;
  margin-left: auto;
  opacity: 0;
}
.tracker-column-head:hover > svg,
.tracker-column-head:focus-visible > svg { opacity: 0.7; }
.tracker-resize-handle {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: -4px;
  bottom: 4px;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.tracker-resize-handle::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 3px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--line-strong);
  opacity: 0;
}
.tracker-resize-handle:hover::after,
.tracker-resizing .tracker-resize-handle::after { opacity: 0.8; }
.tracker-resizing { cursor: col-resize !important; user-select: none; }
.tracker-filter-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.tracker-row {
  min-height: 76px;
  align-items: stretch;
  --tracker-cell-bg: var(--bg-raise);
}
.tracker-grid.large .tracker-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 76px;
}
.tracker-row.status-fill {
  --tracker-cell-bg: color-mix(in srgb, var(--tracker-row-color) 8%, var(--bg-raise));
}
.tracker-shot-cell,
.tracker-status-cell,
.tracker-custom-cell,
.tracker-script-cell,
.tracker-task-cell,
.tracker-tag-cell,
.tracker-owner-cell,
.tracker-no-task,
.tracker-tag-empty,
.tracker-owner-empty {
  border-radius: 6px;
  background: var(--tracker-cell-bg);
  transition: background var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}
.tracker-shot-cell {
  background: color-mix(in srgb, var(--shot-color, var(--shot-blue)) 22%, var(--bg-raise));
}
.tracker-row.status-fill .tracker-shot-cell {
  background: var(--tracker-cell-bg);
}
.tracker-shot-cell:hover,
.tracker-cell:hover,
.tracker-task-cell:hover,
.tracker-no-task:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--tracker-cell-bg));
}
.tracker-shot-cell:hover {
  background: color-mix(in srgb, var(--accent) 6%, color-mix(in srgb, var(--shot-color, var(--shot-blue)) 22%, var(--bg-raise)));
}
.tracker-row.status-fill .tracker-shot-cell:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--tracker-cell-bg));
}
.tracker-shot-cell {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px;
  text-align: center;
}
.tracker-shot-cell.general { justify-content: flex-start; padding-top: 13px; }
.tracker-thumb {
  position: relative;
  width: min(100%, 168px);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: var(--thumb-bed);
}
.tracker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tracker-thumb-empty { color: var(--ink-3); }
.tracker-thumb-empty svg { width: 16px; height: 16px; }
.tracker-shot-number,
.tracker-shot-time {
  position: absolute;
  top: 5px;
  z-index: 1;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(15, 14, 13, 0.72);
  color: #f7f5f1;
  backdrop-filter: blur(4px);
  line-height: 1.2;
}
.tracker-shot-number {
  left: 5px;
  font: 700 9px var(--mono);
}
.tracker-shot-time {
  right: 5px;
  font: 560 8.5px var(--mono);
}
.tracker-shot-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--ink-3);
}
.tracker-status-cell,
.tracker-owner-cell {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  text-align: left;
  color: var(--ink-2);
  cursor: default;
}
.tracker-status-cell.muted { color: var(--ink-3); }
.tracker-cell.selected {
  position: relative;
  z-index: 2;
  background: var(--accent-soft);
}
.tracker-status-cell.has-status,
.tracker-custom-cell.status.has-status {
  justify-content: center;
  background: var(--status-color);
  color: var(--status-ink);
  text-align: center;
}
.tracker-status-cell.has-status:hover,
.tracker-custom-cell.status.has-status:hover { filter: brightness(1.06) saturate(1.04); }
.tracker-status-cell.has-status.selected,
.tracker-custom-cell.status.has-status.selected { filter: brightness(1.11) saturate(1.08); }
.tracker-status {
  max-width: 100%;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracker-unassigned { color: var(--ink-3); font-size: 11px; }
.video-search {
  position: absolute;
  z-index: 45;
  top: 10px;
  left: 10px;
  width: min(480px, calc(100% - 20px));
  max-height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raise);
  color: var(--ink);
  box-shadow: 0 8px 24px #0002;
  overflow: hidden;
}
.video-search[hidden] { display: none; }
.video-search-bar { display: flex; align-items: center; gap: 4px; padding: 7px; border-bottom: 1px solid var(--line); }
.video-search-bar > svg { width: 15px; height: 15px; flex: none; margin: 0 4px; }
.video-search-bar input { min-width: 0; flex: 1; border: 0; background: transparent; padding: 5px 8px; color: inherit; font-size: 12px; }
.video-search-bar input::-webkit-search-cancel-button { display: none; }
.video-search-bar .btn { flex: none; width: 26px; height: 28px; padding: 4px; }
.video-search-count { flex: none; font: 10px var(--mono); color: var(--ink-3); }
.video-search-results { overflow: auto; max-height: 280px; overscroll-behavior: contain; }
.video-search-result { width: 100%; display: block; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; }
.video-search-result:hover, .video-search-result[aria-current="true"] { background: var(--accent-soft); }
.video-search-location { display: flex; justify-content: space-between; gap: 8px; font: 10px var(--mono); color: var(--ink-2); margin-bottom: 4px; }
.video-search-text { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.video-search-text mark { color: inherit; background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 2px; }
.video-search-match { color: inherit; background: color-mix(in srgb, var(--accent) 36%, transparent); border-radius: 2px; }
.tl-pill.search-hit { box-shadow: inset 0 0 0 1px var(--accent); }
.video-search-empty { padding: 16px 12px; font-size: 12px; color: var(--ink-3); }
.video-search-notice { display: flex; gap: 8px; align-items: center; padding: 8px; border-top: 1px solid var(--line); font-size: 11px; }
.video-search-notice[hidden] { display: none; }
.video-search-notice .btn { margin-left: auto; flex: none; }

.dock-note-dialog { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.note-header { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.note-header h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.note-status { font-size: 11px; color: var(--ink-2); }
.note-header .btn { flex: none; }
.dock-note-dialog > input { margin: 12px; width: calc(100% - 24px); }
.note-toolbar { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.note-tool { width: 30px; height: 30px; padding: 6px; }
.note-tool[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.note-redo svg { transform: scaleX(-1); }
.note-body { padding: 16px; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-body p { margin: 0 0 8px; min-height: 1.65em; }
.note-body ul, .note-body ol { margin: 0 0 8px; padding-left: 24px; }
.note-body li { margin: 3px 0; }
.note-body blockquote { margin: 0 0 0 24px; padding: 0; border: 0; }
.note-reader, .note-editor { flex: 1; min-height: min(200px, 30dvh); overflow: auto; overscroll-behavior: contain; }
.note-editor { outline: none; box-shadow: inset 0 0 0 1px transparent; }
.note-editor:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.note-latest { border-top: 1px solid var(--line); max-height: 180px; overflow: auto; flex: none; }
.note-latest summary { cursor: pointer; padding: 10px 16px; font-size: 12px; }
.note-problem { padding: 8px 16px; color: var(--ink-2); font-size: 12px; }
.dock-note-dialog .actions { padding: 12px; margin: 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dock-note-dialog [hidden] { display: none; }
.note-drafts { display: flex; flex-direction: column; gap: 8px; }
.note-drafts .btn { justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; }

.tracker-task-list {
  grid-column: var(--tracker-task-start) / var(--tracker-task-end);
  min-width: 0;
  display: grid;
  grid-template-columns: var(--tracker-task-columns);
  gap: 4px;
  align-content: start;
}
.tracker-task-list.is-empty {
  align-content: stretch;
}
.tracker-task-list.single {
  align-content: stretch;
}
.tracker-script-cell {
  min-width: 0;
  padding: 10px 12px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.6;
  user-select: text;
  overflow-wrap: anywhere;
}
.tracker-script-line + .tracker-script-line { margin-top: 8px; }
.tracker-custom-cell {
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: flex-start;
  padding: 11px 10px;
  color: var(--ink-2);
}
.tracker-custom-cell.date,
.tracker-custom-cell.status { align-items: center; }
.tracker-custom-cell.image {
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.tracker-custom-cell.muted { color: var(--ink-3); }
.tracker-text-value {
  min-width: 0;
  max-height: 7.2em;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink);
}
.tracker-text-value a { color: var(--accent-text); text-decoration: none; }
.tracker-text-value a:hover { text-decoration: underline; }
.tracker-text-inline {
  width: 100%;
  min-height: 44px;
  max-height: 180px;
  padding: 3px 2px;
  resize: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 11.5px/1.45 var(--sans);
}
.tracker-text-inline:focus { outline: none; }
.tracker-date-value {
  display: grid;
  gap: 4px;
  color: var(--ink-2);
  font: 400 10.5px var(--mono);
}
.tracker-date-value strong { color: var(--ink); font-weight: 700; }
.tracker-image-preview {
  width: min(100%, 280px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 5px;
  background: var(--thumb-bed);
}
.tracker-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.tracker-custom-cell.image.drag-over {
  background: var(--accent-soft);
  transform: scale(0.99);
}
.tracker-task-cell,
.tracker-tag-cell,
.tracker-owner-cell,
.tracker-no-task,
.tracker-tag-empty,
.tracker-owner-empty {
  min-height: 76px;
}
.tracker-tag-cell {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  color: var(--ink-2);
  cursor: default;
}
.tracker-task-cell { position: relative; min-width: 0; padding: 7px 9px; }
.tracker-task-cell .cthread { height: 100%; align-content: start; }
.tracker-task-cell .cmt {
  height: 100%;
  padding: 7px 8px;
  background: transparent;
}
.tracker-task-list.single .tracker-task-cell .cthread:not(.threaded) .cmt {
  display: flex;
  flex-direction: column;
}
.tracker-task-list.single .tracker-task-cell .cthread:not(.threaded) .foot {
  margin-top: auto;
  padding-top: 7px;
}
.tracker-task-cell .cmt:hover,
.tracker-task-cell .cmt.active { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tracker-task-cell .cmt.reply {
  height: auto;
  background: color-mix(in srgb, var(--bg-sunk) 38%, transparent);
}
.tracker-task-cell .body { font-size: 12.5px; }
/* A menu preview temporarily wins over each surface's resting/selected fill. */
.cmt.author-preview,
.cmt.author-preview.active,
.tracker-task-cell .cmt.author-preview { background: var(--accent-soft); box-shadow: none; }
/* Attachments keep their own shape, as in every other comment surface: a
   lone image gets the larger preview inside width and height caps, never a
   forced box (a portrait image once sat letterboxed in a 16:9 bed here). */
.tracker-task-cell .imgs img { height: 54px; width: auto; }
.tracker-task-cell .imgs img:only-child {
  width: auto;
  height: auto;
  max-width: min(100%, 220px);
  max-height: 124px;
}
.tracker-task-cell .anchor-tc { font-size: 8.5px; }
.tracker-owner-cell {
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
}
.tracker-owner-pills {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tracker-owner-pill {
  max-width: 100%;
  min-width: 0;
  display: inline-flex;
  flex-flow: row wrap;
  align-items: baseline;
  column-gap: 5px;
  row-gap: 2px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.25;
}
.tracker-owner-pill-name {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracker-owner-pill .who-role { font-size: 7.5px; }
.tracker-no-task,
.tracker-owner-empty {
  display: flex;
  align-items: center;
  padding: 10px;
  color: var(--ink-3);
}
.tracker-add-task {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink-3);
}
.tracker-add-task:hover { background: var(--bg-sunk); color: var(--accent-text); }
.tracker-add-task svg { width: 13px; height: 13px; }
/* A Shot with comments takes another from the Timeline popup's round +,
   resting at the foot of its last comment until the row is hovered. */
.tracker-add-task.hover {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateX(-50%) translateY(3px);
  transition: opacity var(--t-fast), transform var(--t-fast), filter var(--t-fast);
}
.tracker-add-task.hover:hover {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.08);
}
.tracker-row:hover .tracker-add-task.hover,
.tracker-add-task.hover:focus-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
  .tracker-add-task.hover { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* The + hosts the shared composer; it keeps the tray's look inside the pop. */
.pop.tracker-composer-pop {
  width: 360px;
  max-width: calc(100vw - 16px);
  padding: 0;
  overflow: hidden;
}
.tracker-composer-pop .composer {
  border-top: 0;
  padding: 10px 12px 12px;
  background: var(--bg-raise);
}
.tracker-composer-pop .composer .cfield { min-height: 58px; }
.tracker-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 12px;
}
.tracker-owner-choices {
  max-height: 260px;
  display: grid;
  gap: 2px;
  overflow-y: auto;
  padding: 3px 5px;
}
.tracker-owner-choices .state-pill {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  height: auto;
  min-height: 26px;
  padding-block: 4px;
}
.tracker-owner-choices .state-pill .who-role { font-size: 7.5px; }
.tracker-owner-choices .state-pill[aria-pressed="true"] .who-role { color: var(--accent-ink); }
.tracker-owner-entry { display: flex; gap: 6px; padding: 6px; }
.tracker-owner-entry input { flex: 1; min-width: 0; }
.tracker-column-toggle.off { color: var(--ink-3); }
.tracker-column-toggle.off svg { opacity: 0.35; }
.tracker-option-swatch {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.tracker-date-entry { padding: 7px; }
.tracker-date-entry input { width: 100%; }
.tracker-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 4px 7px 7px;
}
.dialog.tracker-status-dialog {
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
}
.dialog.tracker-status-dialog.project {
  width: min(560px, calc(100vw - 32px));
}
.tracker-option-list {
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: min(52vh, 380px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
  display: grid;
  gap: 6px;
}
.tracker-option-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
}
.tracker-option-row > input[type="text"] { width: 100%; min-width: 0; }
.tracker-project-statuses { width: 100%; }
.tracker-project-status-row {
  grid-template-columns: 28px minmax(120px, 1fr) auto 28px;
}
.tracker-row-fill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: 11px;
}
.tracker-row-fill input { accent-color: var(--accent); }
.tracker-option-row input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 3px;
  border: 0;
  background: transparent;
}
.tracker-option-row .btn.icon { width: 28px; height: 28px; }
.tracker-add-option {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 11px;
}
.tracker-add-option:hover { color: var(--accent-text); }
.tracker-add-option svg { width: 13px; height: 13px; }
/* presets sit bottom-left of the status dialog, the dialog's own actions
   keep the right */
.tracker-status-actions { flex-wrap: wrap; align-items: center; }
.tracker-preset-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.tracker-preset-bar select {
  max-width: 160px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
}
.tracker-preset-bar .btn { padding: 0 8px; font-size: 12px; }
.tracker-preset-bar .btn.icon { padding: 0; }
.tracker-preset-bar [hidden] { display: none; }
/* an empty image cell: a quiet centred glyph is the only picker trigger, so
   the rest of the cell selects without opening a file dialog */
.tracker-image-add {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink-3);
  opacity: 0.55;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.tracker-image-add svg { width: 16px; height: 16px; }
.tracker-image-add:hover:not(:disabled),
.tracker-image-add:focus-visible {
  opacity: 1;
  color: var(--accent-text);
  background: var(--bg-sunk);
}
.tracker-image-add:disabled { cursor: default; opacity: 0.35; }
/* the gap a dragged header will land in */
.tracker-drop-mark {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--bg);
  pointer-events: none;
  z-index: 10;
}
.tracker-section-cell:not(.blank) { cursor: pointer; }
/* the toolbar search: one field over the whole sheet */
.tracker-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 200px;
  height: 26px;
}
.tracker-search > svg {
  position: absolute;
  left: 8px;
  width: 12px;
  height: 12px;
  color: var(--ink-3);
  pointer-events: none;
}
.tracker-search-input {
  width: 100%;
  height: 26px;
  padding: 0 24px 0 25px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--bg-raise);
  color: var(--ink);
  font: 500 11.5px var(--sans);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.tracker-search-input::placeholder { color: var(--ink-3); }
.tracker-search-input:hover { border-color: var(--line); }
.tracker-search-input:focus { border-color: var(--line-strong); }
.tracker-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tracker-search-clear {
  position: absolute;
  right: 4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--ink-3);
}
.tracker-search-clear:hover { color: var(--ink); background: var(--bg-sunk); }
.tracker-search-clear svg { width: 10px; height: 10px; }
@media (max-width: 520px) {
  .dialog.tracker-status-dialog,
  .dialog.tracker-status-dialog.project {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 16px;
  }
  .tracker-project-status-row {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    grid-template-areas:
      "color name remove"
      ". fill fill";
  }
  .tracker-project-status-row > input[type="color"] { grid-area: color; }
  .tracker-project-status-row > input[type="text"] { grid-area: name; }
  .tracker-project-status-row > .tracker-row-fill { grid-area: fill; }
  .tracker-project-status-row > .btn.icon { grid-area: remove; }
}
/* ==================================================== intro splash (tour) */

.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  isolation: isolate;
  touch-action: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
.intro-splash.ready { opacity: 1; }
.intro-splash[data-step="welcome"] { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.intro-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-shade-fill { fill: color-mix(in srgb, var(--bg) 83%, transparent); }
.intro-highlight {
  position: absolute;
  border-radius: 8px;
  background: #3670ff;
  opacity: .02;
  animation: intro-blue-pulse 4.8s ease-in-out infinite;
  pointer-events: none;
}
.intro-highlight.context { background: none; animation: none; opacity: 0; }
.intro-view-active {
  position: absolute;
  border-radius: 6px;
  background: rgb(54 112 255 / 20%);
  pointer-events: none;
}
@keyframes intro-blue-pulse {
  0%, 100% { opacity: .02; }
  50% { opacity: .33; }
}
.intro-card {
  position: absolute;
  width: min(332px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raise);
  box-shadow: var(--shadow-pop);
  outline: none;
  display: grid;
  gap: 18px;
  transition: left 280ms cubic-bezier(.2,.8,.2,1), top 280ms cubic-bezier(.2,.8,.2,1);
}
.intro-copy { display: grid; gap: 10px; min-width: 0; }
.intro-card.compact { padding: 16px; gap: 14px; }
.intro-card.compact .intro-title { font-size: 17px; }
.intro-card.compact .intro-body { font-size: 12px; }
.intro-card.compact .intro-nav { gap: 2px; }
.intro-card.compact .intro-nav .btn.accent { min-width: 74px; }
.intro-splash[data-step="views"] .intro-card { width: min(500px, calc(100vw - 24px)); }
.intro-splash[data-step="welcome"] .intro-card { width: min(420px, calc(100vw - 24px)); }
.intro-view-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
.intro-view-map[hidden] { display: none; }
.intro-view-map > div { display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 6px; background: var(--bg-sunk); }
.intro-view-map dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: var(--ink); }
.intro-view-map dt svg { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
.intro-view-map dd { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.intro-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intro-label { font-size: 10px; font-weight: 650; color: var(--accent-text); text-transform: uppercase; }
.intro-label[hidden] { display: none; }
.intro-count { margin-left: auto; color: var(--ink-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.intro-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 680;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.intro-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.intro-body[hidden] { display: none; }
.intro-progress { display: flex; gap: 4px; }
.intro-progress span {
  flex: 1;
  height: 2px;
  background: var(--line);
  transition: background var(--t-fast);
}
.intro-progress span.on { background: var(--accent); }
.intro-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.intro-nav { display: flex; gap: 8px; align-items: center; }
.intro-nav .btn.accent { min-width: 90px; min-height: 36px; justify-content: center; }
.intro-back { width: 32px; height: 36px; }
.intro-back:disabled { opacity: .2; cursor: default; }
.intro-skip {
  font-size: 11px;
  color: var(--ink-3);
  min-height: 36px;
  cursor: pointer;
}
.intro-skip:hover { color: var(--ink); }
.intro-card button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body:has(.intro-splash) > .toasts { visibility: hidden; }
.app[data-intro-step] .help-fab { visibility: hidden; }
.app[data-intro-step="feedback-add"] .tl-comment-add[data-selected="true"] { opacity: 1; }
.app[data-intro-step="feedback-add"] .tl-comment-pill[data-selected="true"] .tl-comment-label { opacity: 0; }
.app[data-intro-step="feedback-add"] .tl-comment-pill[data-selected="true"] .tl-comment-plus { opacity: 1; }
.app[data-intro-step="tray"] .tray { transition-duration: 480ms; }
.app[data-intro-phase="tray-press"] .tray-toggle { animation: intro-chevron-press 480ms ease-in-out both; }
@keyframes intro-chevron-press {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(.86); background: var(--accent); color: white; }
}
@media (max-width: 700px) {
  .intro-view-map > div { padding: 10px; }
  .intro-view-map dd { font-size: 11px; }
}
@media (min-width: 701px) and (max-height: 520px) {
  .intro-splash[data-step="views"] .intro-card { width: min(760px, calc(100vw - 24px)); }
  .intro-view-map { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 700px), (max-height: 520px) {
  .intro-card { padding: 18px; gap: 14px; }
  .intro-title { font-size: 18px; }
  .intro-body { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-splash, .intro-card, .intro-progress span { transition: none; }
  .intro-highlight { animation: none; opacity: .17; }
  .app[data-intro-step="tray"] .tray { transition: none; }
  .app[data-intro-phase="tray-press"] .tray-toggle { animation: none; }
}

/* ============================================================ focus mode */

/* ` clears the panels but keeps the review instruments: the ruler, the
   timecode box, and the playhead (grey here — the color belongs to the full
   workspace) stay, so seeking and reading time still work. The Timeline
   remains the active view beneath — loops, stepping, Space, and live state
   keep working — so this is presentation only and never persists. */
.app.focus-mode .old-version-note,
.app.focus-mode .canvas-foot,
.app.focus-mode .tray,
.app.focus-mode .help-fab,
.app.focus-mode .help-pop,
.app.focus-mode .player-shotmeta .shot,
.app.focus-mode .player-shotmeta .st-chip,
.app.focus-mode .player-shotmeta .frame-set-image,
.app.focus-mode .player-alt-nav,
.app.focus-mode .player-alt-tools,
.app.focus-mode .player-alt-thumbnails,
.app.focus-mode .tl-rows,
.app.focus-mode .tl-comment-overview,
.app.focus-mode .tl-loop-chip,
.app.focus-mode .corner-grip { display: none; }
.app.focus-mode .canvas-wrap { background: var(--bg-sunk); }
/* both top bars stay reachable at a whisper */
.app.focus-mode .chrome {
  opacity: 0.25;
  transition: opacity var(--t-fast);
}
.app.focus-mode .chrome:hover,
.app.focus-mode .chrome:focus-within { opacity: 1; }
/* Focus uses neutral position lines in the lower Timeline. */
.app.focus-mode .tl-playback-head { background: var(--line-strong); }
.app.focus-mode .tl-playback-head .flag {
  background: var(--line-strong);
  color: var(--ink);
}
.app.focus-mode .tl.paused .tl-playback-head { z-index: 8; }
.app.focus-mode .tl-cursor { z-index: 8; }
/* the Script window may open, but it can never rise over the playback
   window: the player reserves a bottom band for it (see
   --focus-script-reserve) and the pane stays inside that band */
.app.focus-mode .script-pane {
  left: 50%;
  top: auto;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 48px));
  max-height: 240px;
}
/* Focus keeps the same top alignment and expands within its reserved space. */
.app.focus-mode .player-float.float { top: 12px; }
/* pause projection: the current Shot's threads hang below the transport
   WITHOUT joining the wrapper's height — the window must not re-center
   when a comment appears */
.player-focus-comments { display: none; }
.app.focus-mode .player-focus-comments {
  display: flex;
  justify-content: center;
  position: absolute;
  top: calc(100% + 60px);
  left: 0;
  right: 0;
  pointer-events: none;
}
/* Duration-true Shot bars below the ruler share its horizontal geometry.
   Their own layer keeps the following canvas from covering the projection. */
.player-focus-lane-slot { display: none; }
.app.focus-mode .player-focus-lane-slot {
  display: grid;
  gap: 3px;
  position: absolute;
  top: calc(100% + 38px);
  left: 0;
  right: 0;
  pointer-events: none;
}
.app.focus-mode .player-focus-lane-slot[hidden] { display: none; }
.player-focus-lane,
.player-focus-sections {
  position: relative;
  z-index: 7;
  height: 6px;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
}
.player-focus-lane[hidden],
.player-focus-sections[hidden] { display: none; }
/* Sections keep a thinner whisper of their own above the Shots. */
.player-focus-sections { height: 4px; opacity: 0.7; }
.player-focus-sections span {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-radius: 2px;
}
.player-focus-lane span {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--shot-blue);
}
.player-focus-comments .cmt-pop.hosted {
  position: static;
  margin-top: 12px;
  width: min(540px, calc(100vw - 48px));
  max-height: 120px;
  overflow-y: auto;
  pointer-events: auto;
}

/* ============================================================ home (projects) */

.home {
  height: 100%;
  overflow-y: auto;
  padding: 34px clamp(18px, 6vw, 90px) 80px;
}
/* Home: one portrait poster per project — a centered, near-square wall;
   videos live one click in. Tight windows drop columns and scroll. */
.home.wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px clamp(18px, 4vw, 60px);
}
.home-spacer { flex: 1 1 0; min-height: 14px; }
/* the wall rides slightly high of true center so the action block below
   reads as part of one optically balanced composition */
.home-spacer.top { flex: 0.68 1 0; }
.proj-wall {
  display: grid;
  grid-template-columns: repeat(var(--wall-cols, 3), var(--proj-card-w, 250px));
  gap: 22px;
  justify-content: center;
}
/* New Project sits centered between the wall and the window bottom; once
   the wall itself needs scrolling it becomes a floating corner button. */
.home-actions {
  flex: 1 1 0;
  min-height: 128px;
  display: grid;
  place-items: center;
}
/* spacious sibling of the + Video / + Folder tiles, sized as an action */
.new-project-tile {
  padding: 22px 52px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-l);
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 560;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.new-project-tile:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
.home.overflowing .home-actions { visibility: hidden; }
.home-fab { display: none; }
.home.overflowing .home-fab {
  display: inline-flex;
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 40;
  box-shadow: var(--shadow-pop);
}
.proj-card {
  position: relative;
  width: var(--proj-card-w, 250px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--thumb-bed);
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.proj-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-pop);
  transform: translateY(-2px);
}
.proj-card .im {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.proj-card .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 340ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.proj-card:hover .im img { transform: scale(1.025); }
.proj-card .im .logo-fallback {
  width: 44%;
  height: auto;
  max-height: 40%;
  object-fit: contain;
}
.proj-card .monogram {
  font-size: 64px;
  font-weight: 760;
  letter-spacing: -0.03em;
  color: var(--ink-3);
}
.proj-card .meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 62px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
  color: #fff;
}
.proj-card.noimg .meta { background: none; color: var(--ink-2); }
.proj-card.noimg .meta .name { text-shadow: none; }
.proj-card .meta .name {
  flex: 1; /* stretch to the true available width so the fitter measures it */
  min-width: 0;
  font-size: 30px; /* fitProjectNames scales down single-word overflow only */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* only reachable at the scale floor: break rather than clip a word that
     is still too wide at the minimum size */
  overflow-wrap: anywhere;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
/* the count waits top-right until the card is engaged */
.proj-card .count {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}
.proj-card:hover .count,
.proj-card:focus-visible .count { opacity: 1; }
.proj-card.noimg .count { background: var(--bg-well); color: var(--ink-2); }
.proj-card .mini-logo {
  height: 18px;
  max-width: 48px;
  object-fit: contain;
  border-radius: 3px;
  flex: none;
  margin-bottom: 2px;
}

.proj { margin-bottom: 40px; }
.proj .phead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.proj .phead h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.proj .phead .n { font: 500 10.5px var(--mono); color: var(--ink-3); }
.proj .phead .spacer { flex: 1; }
/* the section menu waits quietly until the section is engaged */
.proj .phead .btn.icon { opacity: 0; transition: opacity var(--t-fast); }
.proj:hover .phead .btn.icon,
.proj:focus-within .phead .btn.icon { opacity: 1; }
.vid-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
/* Poster-first cards: the frame IS the card, identity rides a quiet scrim. */
.vid-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--thumb-bed);
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.vid-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-pop);
  transform: translateY(-2px);
}
.vid-card[draggable="true"] { cursor: grab; }
.vid-card.is-dragging {
  opacity: 0.42;
  transform: scale(0.985);
  box-shadow: none;
}
.vid-card.is-merge-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-pop);
  transform: translateY(-2px) scale(1.01);
}
.project-drop-ind {
  position: absolute;
  z-index: 8;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--bg), var(--shadow);
  pointer-events: none;
}
.vid-card .im {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.vid-card .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 340ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.vid-card:hover .im img { transform: scale(1.025); }
.vid-card .noimg {
  font: 500 10.5px var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.09em;
}
/* an imageless card has nothing to protect — no scrim, quiet ink instead */
.vid-card.noimg .meta { background: none; color: var(--ink-2); }
.vid-card.noimg .meta .name { text-shadow: none; }
.vid-card.noimg .meta .facts { color: var(--ink-3); }
.vid-card .meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 28px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  color: #fff;
}
.vid-card .meta .dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.vid-card .meta .name {
  min-width: 0;
  font-size: 13px;
  font-weight: 640;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.vid-card .meta .facts {
  margin-left: auto;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.74);
  white-space: nowrap;
}
.video-menu-title {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pop .video-status-item { opacity: 0.5; }
.vid-card .badge {
  position: absolute;
  top: 9px;
  right: 9px;
  font: 620 10px var(--mono);
  color: var(--accent-ink);
  background: var(--accent);
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
/* folder tiles share the poster grid but read as containers, not media */
.folder-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: var(--bg-raise);
  cursor: pointer;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  place-items: center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.folder-tile:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.folder-tile.is-video-drop {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow);
  transform: translateY(-2px);
}
.folder-tile > svg {
  width: 34px;
  height: 34px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.folder-tile .meta {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.folder-art { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 2px; place-items: center; background: var(--thumb-bed); overflow: hidden; }
.folder-art.count-0, .folder-art.count-1 { grid-template-columns: minmax(0, 1fr); }
.folder-art img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.folder-art.logo img { object-fit: contain; padding: 18px; }
.folder-art > svg { width: 34px; height: 34px; color: var(--ink-3); }
.folder-art-dialog { width: min(440px, calc(100vw - 32px)); }
.folder-art-preview { aspect-ratio: 16 / 9; margin: 14px 0; overflow: hidden; border-radius: 6px; }
.folder-art-dialog select { width: 100%; }
.folder-tile .meta .name {
  min-width: 0;
  font-size: 13px;
  font-weight: 640;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-tile .meta .facts {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}
.phead-path {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.phead-path .sep { color: var(--ink-3); font-size: 12px; }
.phead-path .here { font-size: 13.5px; font-weight: 650; }
.phead-crumb {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: var(--r-s);
  padding: 0 2px;
}
.phead-crumb:hover { color: var(--ink); }
.phead-crumb.is-video-drop {
  color: var(--accent-text);
  box-shadow: 0 2px 0 var(--accent);
}
.phead-crumb.root h2 { display: inline; }
.folder-picker .folder-picker-rows {
  display: grid;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
}
.folder-picker .mi svg { flex: none; }

.new-tile {
  aspect-ratio: 16 / 9;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-l);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 540;
  cursor: pointer;
}
.new-tile:hover { border-color: var(--accent); color: var(--accent-text); }

.combine-video-dialog .summary {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.combine-video-dialog .detail {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ============================================================ auth pages */

.gate {
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 500px at 20% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.gate form {
  width: 300px;
  display: grid;
  gap: 10px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.gate .wordmark { margin-bottom: 8px; font-size: 17px; }
.gate .err { color: var(--danger); font-size: 12px; min-height: 16px; }

/* ============================================================ drop overlay */

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  display: grid;
  place-items: center;
}
.drop-overlay .inner {
  position: absolute;
  inset: 14px;
  border: 2px dashed var(--accent);
  border-radius: 18px;
  display: grid;
  place-items: center;
}
.drop-overlay .msg {
  background: var(--bg-raise);
  border-radius: 12px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 640;
  box-shadow: var(--shadow-pop);
}
.drop-overlay .msg .sub { font-size: 12px; font-weight: 450; color: var(--ink-2); margin-top: 3px; }

/* ============================================================ lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: var(--scrim);
  display: grid;
  place-items: center;
  cursor: zoom-out;
  animation: fade-in 130ms ease-out;
}
.lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
}

/* ============================================================ empty states */

.empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-3);
}
.empty .big { font-size: 15px; font-weight: 620; color: var(--ink-2); margin-bottom: 5px; }
.empty .small { font-size: 12.5px; }
.empty kbd { margin: 0 2px; }

/* ============================================================ deck (print) */

.deck { height: 100%; overflow-y: auto; background: var(--bg-sunk); }
.deck-inner { max-width: 820px; margin: 0 auto; padding: 30px 20px 80px; }
.deck-bar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 14px; }
.deck-cover {
  padding: 36px 28px 40px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
}
.deck-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  margin-bottom: 26px;
  font-size: 15px;
  font-weight: 680;
}
.deck-brand img {
  width: auto;
  height: 34px;
  max-width: 150px;
  object-fit: contain;
}
.deck-cover .k {
  font: 600 10px var(--mono);
  letter-spacing: 0;
  color: var(--accent-text);
  text-transform: uppercase;
}
.deck-cover h1 { font-size: 34px; font-weight: 780; letter-spacing: 0; margin: 8px 0 4px; }
.deck-cover .sub { font: 500 13px var(--mono); color: var(--ink-2); }
.deck-item {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
  break-inside: avoid;
}
.deck-item.deck-thumb-small {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.deck-item .im { position: relative; border-radius: 6px; overflow: hidden; background: var(--thumb-bed); }
.deck-item .im > img { width: 100%; height: auto; }
.deck-item .im svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.deck-thumb-large .deck-content { margin-top: 11px; }
.deck-item .row { display: flex; gap: 10px; align-items: baseline; }
.deck-item .tc { font: 560 11px var(--mono); color: var(--accent-text); }
.deck-item .lbl { font-size: 12px; font-weight: 650; }
.deck-item .who { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.deck-item .body { margin-top: 5px; font-size: 14px; line-height: 1.55; }
.deck-item .imgs { display: flex; gap: 6px; margin-top: 9px; }
.deck-item .imgs img { height: 90px; border-radius: 6px; }
.deck-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.deck-fact { min-width: 0; }
.deck-fact .key {
  display: block;
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}
.deck-fact .value {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.deck-fact.status .value::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--fact-color, var(--ink-3));
}
.deck-fact.image img {
  height: 58px;
  width: auto;
  max-width: 100%;
  margin-top: 4px;
  border-radius: 4px;
  object-fit: contain;
}
.deck-reply {
  margin-top: 9px;
  padding: 8px 10px;
  background: var(--bg-sunk);
  border-radius: 6px;
  font-size: 12.5px;
}
.deck-reply .who { margin: 0; }

@media (max-width: 700px) {
  .deck-item.deck-thumb-small { grid-template-columns: 1fr; }
  .deck-facts { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .toolbar {
    gap: 4px;
    padding-inline: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar .spacer { display: none; }
  /* Narrow screens keep the compact in-row pill: the scrolling toolbar
     clips anything that rises above it, and the header has no spare center. */
  .toolbar .seg.center {
    position: static;
    transform: none;
    flex: none;
    height: auto;
    padding: 2px;
    gap: 2px;
    align-items: stretch;
    background: var(--bg-sunk);
    border-radius: var(--r-m);
  }
  .toolbar .seg button { padding-inline: 6px; font-size: 11.5px; }
  .toolbar .seg.center button {
    gap: 4px;
    height: 24px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 540;
    letter-spacing: 0;
  }
  .toolbar .seg.center button[aria-pressed="true"] {
    height: 24px;
    background: var(--bg-raise);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  }
  .toolbar .seg.center button[aria-pressed="true"] svg { color: inherit; }
  .toolbar .seg.center svg { width: 12px; height: 12px; }
  .chrome .topbar.hdr .crumbs { max-width: none; overflow: visible; }
  .toolbar .ver-chip { max-width: 34px; padding-inline: 7px; flex: none; }
  .toolbar .ver-chip .muted, .toolbar .ver-chip svg,
  .toolbar .ver-chip .ver-compare-tag { display: none; }
  .toolbar .btn.outline {
    width: 28px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    flex: none;
  }
  .toolbar .btn.outline svg { width: 15px; height: 15px; }
  .work { flex-direction: column; }
  .canvas-wrap { width: 100%; flex: 0 0 64%; min-height: 0; }
  .work.tracker-mode .canvas-wrap { flex: 1 1 auto; }
  .tray {
    width: 100% !important;
    flex: 1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .tray-toggle, .tray-resize, .tray-peek { display: none !important; }
  .tray.collapsed .tray-head { display: flex; }
  .tray.collapsed .tray-list { display: flex; }
  .tray.collapsed .comment-selection-bar:not([hidden]) { display: flex; }
  .tray.collapsed .composer { display: grid; }
  .tray.selecting-comments .tray-composer-slot { display: none; }
  .canvas-wrap { --float-h: clamp(130px, 20vh, 210px); }
  .player-alt-nav.prev { right: auto; left: 8px; }
  .player-alt-nav.next { left: auto; right: 8px; }
  .player-alt-nav { background: rgba(10, 10, 10, 0.72); color: #f4f2ed; }
  .player-alt-tools { left: calc(100% + 6px); }
  .player-alt-thumbnails { display: none; }
  .player-volume input[type="range"] { width: 56px; }
  .canvas-wrap .help-fab { bottom: 43px; }
  .frame-view { padding-inline: 12px; }
  .frame-strip { margin-inline: -12px; }
  .frame-col { width: 100%; min-width: 0; max-width: 100%; }
  .frame-meta { gap: 14px; }
  .frame-meta > span { white-space: nowrap; }
  .frame-nav.prev { left: 8px; }
  .frame-nav.next { right: 8px; }
  .frame-nav {
    color: #f4f2ed;
    background: rgba(17, 16, 15, 0.6);
  }
  .canvas-foot { gap: 6px; padding-inline: 6px; }
  .canvas-foot .foot-details { gap: 9px; }
  .canvas-foot .foot-details > span:first-child { display: none; }
  .canvas-foot .zoom { gap: 4px; }
  .canvas-foot .zoom input[type="range"] { width: 92px; }
  .board-scale-range { width: 92px; }
  .canvas-foot .zpct { min-width: 30px; }
  .canvas-foot.tracker-foot > span:first-child { display: inline; }
  .tracker-toolbar {
    min-height: 40px;
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tracker-toolbar::-webkit-scrollbar { display: none; }
  .tracker-toolbar > .spacer { min-width: 4px; }
  .tracker-grid { min-width: 820px; }
  .review-file-row {
    grid-template-columns: minmax(72px, 0.7fr) minmax(110px, 1fr);
    gap: 5px 10px;
  }
  .review-file-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .review-file-lock { text-align: left; }
}

@media (max-width: 420px) {
  .topbar { padding-inline: 8px; gap: 7px; }
  .topbar .crumbs { gap: 6px; }
  .topbar .crumbs a { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@page { margin: 0.55in; }

@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --accent: #173fd1;
    --accent-text: #173fd1;
    --bg: #fff;
    --bg-raise: #fff;
    --bg-sunk: #f2f2f2;
    --ink: #1e1e1e;
    --ink-2: #5e5e5e;
    --ink-3: #777;
    --line: #ddd;
    --line-strong: #bbb;
    --thumb-bed: #ddd;
  }
  body { overflow: visible; background: #fff; }
  body::after { display: none; }
  .topbar, .deck-bar, .toasts { display: none !important; }
  .deck { overflow: visible; background: #fff; }
  .deck-inner { max-width: none; padding: 0; }
  .deck-cover { border-bottom-color: #bbb; }
  .deck-item { border: 1px solid #ddd; box-shadow: none; }
  .deck-item, .deck-fact.status .value::before { print-color-adjust: exact; }
}

/* ============================================================ help pop-in */

.help-fab {
  position: absolute;
  left: 14px;
  bottom: 48px;
  z-index: 15;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font: 600 13px var(--mono);
  box-shadow: var(--shadow);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.help-fab:hover { color: var(--ink); border-color: var(--ink-3); }
.help-fab[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.help-pop {
  position: absolute;
  left: 14px;
  bottom: 86px;
  z-index: 15;
  width: 272px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-pop);
  padding: 12px 14px 13px;
  transform-origin: bottom left;
  animation: help-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes help-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
.help-pop .title {
  font-size: 10px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.help-pop .hk {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 5px 10px;
  font-size: 12px;
  align-items: baseline;
}
.help-pop .hk .k { font: 550 10.5px var(--mono); color: var(--ink-2); }
.help-pop .tips { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }

@media (max-width: 540px) {
  /* Give the named views one uninterrupted row instead of scrolling
     the last tab out of reach behind the surrounding tools. */
  .toolbar { height: auto; min-height: 68px; flex-wrap: wrap; padding-block: 4px; }
  .toolbar .seg.center { order: -1; flex: 1 0 100%; justify-content: center; }
  .toolbar .spacer { display: block; }
}

/* ============================================================ misc */

.spin {
  width: 14px; height: 14px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* People + API tokens dialogs */
.mem-list, .tok-list {
  display: grid; gap: 3px;
  margin: 10px 0 2px;
  max-height: 320px; overflow: auto;
}
.mem-row, .tok-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-m);
  background: var(--bg-sunk);
}
.mem-row.pending { opacity: 0.72; }
.mem-row .who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mem-row .name, .tok-row .name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tok-row .name { flex: 1; }
.mem-row .sub, .tok-row .sub, .mem-list > .sub, .tok-list > .sub {
  font-size: 12px; opacity: 0.62;
}
.mem-row .role {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  opacity: 0.72;
}
.mem-invite, .tok-new { display: flex; gap: 8px; margin-top: 10px; }
.mem-invite input, .tok-new input { flex: 1; min-width: 0; }
.mem-invite select { font: inherit; }
.tok-reveal { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tok-reveal:not(:empty) { margin-top: 10px; }
.tok-reveal input { flex: 1; min-width: 220px; }
.tok-reveal .sub { width: 100%; font-size: 12px; opacity: 0.62; }

/* ============================================================ dock */
/* A skinny shelf of key links and files, each a tinted tile. A files button
   in the tools bar unfurls it; the chevron at the top of the stack tucks it
   away. On Timeline the open stack floats in the empty gutter above V1 while
   it fits there (.overlay) and the canvas keeps its width; otherwise it takes
   a column of its own (.column). The link shows on hover. */

.dock {
  --dock-w: 56px;
  /* Positioned, never a stacking context: its controls must outrank the
     canvas floats and sticky headers the way the comments tray's do. */
  position: relative;
  flex: none;
  width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 0 solid var(--line);
  background: var(--bg);
}
/* A column extends inward from the tray. Its width tweens only for a
   deliberate toggle (views/dock.js sets the class for one run); a
   layout-mode change lands in a single frame. */
.dock.column { width: var(--dock-w); border-left-width: 1px; }
.dock.column.collapsed { width: 0; border-left-width: 0; }
.dock.column.animating { transition: width 180ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.dock.absent { display: none; }
/* The tab slot: under the tray's tab (9px + 42px + 8px). */
.work { --side-tab-top: 59px; }
/* The grab tab is the comments tray's, one slot lower, hanging off the
   tray's inner edge; the tray's own tab never moves for it. Open, it widens
   to the shelf's width and the tiles appear beneath it. */
.dock-tab {
  position: absolute;
  right: -1px; /* over the tray's border, level with the tray's own tab */
  top: var(--side-tab-top, 59px);
  z-index: 22;
  width: 34px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 10px 3px 3px 10px;
  background: var(--bg);
  color: var(--ink-2);
  box-shadow: -3px 2px 8px rgba(0, 0, 0, 0.12);
  transition: color var(--t-fast), background var(--t-fast);
}
.dock-tab:hover { color: var(--ink); background: var(--bg-raise); }
.dock-tab svg { width: 15px; height: 15px; }
/* Open, the tab widens leftward until it is flush with the tiles' left edge:
   1px over the tray's border, the tiles' 6px inset, and a 40px tile. */
.dock:not(.collapsed) .dock-tab { width: 47px; }
/* In Tracker the tray is away and the shelf is a fixed column: no tab, and
   the tiles start at the top. */
.dock.pinned .dock-tab { display: none; }
.dock.pinned .dock-list { padding-top: 9px; }
/* The unfurl: the tab widens, then the tiles wipe down out of it; folding
   runs the other way round. */
.dock.animating .dock-tab {
  transition: width 140ms cubic-bezier(0.3, 0.7, 0.4, 1), color var(--t-fast), background var(--t-fast);
}
.dock.collapsed.animating .dock-tab {
  transition: width 140ms 100ms cubic-bezier(0.3, 0.7, 0.4, 1), color var(--t-fast), background var(--t-fast);
}
.dock-list {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  /* Tiles sit beneath the tab, centred on it. */
  align-items: flex-end;
  gap: 8px;
  padding: calc(var(--side-tab-top, 59px) + 50px) 6px 8px 0;
  clip-path: inset(0 0 0 0);
}
.dock-list::-webkit-scrollbar { display: none; }
.dock.collapsed .dock-list { clip-path: inset(0 0 100% 0); visibility: hidden; }
.dock.animating .dock-list { transition: clip-path 180ms 80ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.dock.collapsed.animating .dock-list {
  transition: clip-path 160ms cubic-bezier(0.3, 0.7, 0.4, 1), visibility 0s 160ms;
}
/* Floating, the tiles hang beneath the tab off the tray's inner edge and the
   canvas keeps its width. */
.dock.overlay { width: 0; border: 0; background: transparent; z-index: 8; }
.dock.overlay .dock-list {
  position: absolute;
  right: 0;
  top: calc(var(--side-tab-top, 59px) + 46px);
  width: 52px;
  flex: none;
  align-items: center;
  padding: 4px 6px 8px;
  overflow: visible;
}
.dock-tile {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  /* The mark carries its colour; the tint arrives under the pointer. */
  color: color-mix(in srgb, var(--dock-color, var(--shot-blue)) 80%, var(--ink));
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 0;
  transition: transform var(--t-fast), background var(--t-fast);
}
.dock-tile:hover, .dock-tile:focus-visible {
  transform: translateY(-1px) scale(1.04);
  background: color-mix(in srgb, var(--dock-color, var(--shot-blue)) 28%, var(--bg-raise));
}
.dock-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dock-tile svg { width: 20px; height: 20px; }
.dock-tile.hidden { opacity: 0.4; }
.dock-script[aria-pressed="true"] {
  background: color-mix(in srgb, var(--dock-color, var(--shot-blue)) 40%, var(--bg-raise));
  color: var(--ink);
}
.dock-add {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.dock-add:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 11%, transparent); }
.dock-add svg { width: 16px; height: 16px; }
.dock.column.drop { box-shadow: inset 0 0 0 2px var(--accent); }
.dock.drop .dock-add { background: var(--accent-soft); color: var(--accent-text); }
.dock-card {
  position: fixed;
  z-index: 40; /* above the canvas floats, below every scrim (50) */
  max-width: 280px;
  padding: 8px 8px 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-m);
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
/* The card opens leftward from the tile, so its text ranges right, toward it.
   A link carries the link mark before its provider's name. */
.dock-card-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.dock-card .t, .dock-card .d { display: flex; align-items: center; gap: 5px; max-width: 100%; }
.dock-card .t > span, .dock-card .d > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-card .t svg, .dock-card .d svg { width: 12px; height: 12px; flex: none; }
.dock-card .t {
  font-size: 12.5px;
  font-weight: 620;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-card .d {
  font: 500 11px var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-card-menu {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.dock-card-menu:hover { background: var(--bg-sunk); color: var(--ink); }
.dock-card-menu svg { width: 14px; height: 14px; }
.pop .dock-section {
  padding: 7px 9px 3px;
  font: 600 10.5px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dock-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 9px 6px; }
.dock-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--dock-color);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  padding: 0;
}
.dock-swatch[aria-pressed="true"] { border-color: var(--ink); }
.dock-swatch.auto { background: transparent; border: 1.5px dashed var(--ink-3); box-shadow: none; }
.dock-swatch.auto[aria-pressed="true"] { border-style: solid; border-color: var(--ink); }
.dock-glyphs {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 3px;
  padding: 4px 9px 6px;
}
.dock-glyphs button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  padding: 0;
}
.dock-glyphs button:hover { background: var(--bg-sunk); color: var(--ink); }
.dock-glyphs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.dock-glyphs button.auto { border: 1px dashed var(--ink-3); }
.dock-glyphs button.auto[aria-pressed="true"] { border-color: transparent; }
.dock-glyphs svg { width: 15px; height: 15px; }
.dock-form-error { min-height: 16px; font-size: 12px; color: var(--danger); }
.app.focus-mode .dock { display: none; }

/* A grab tab protrudes 34px into the canvas: the Board, whose cards reach
   the right edge, gives it that much room. */
@media (min-width: 701px) {
  .work:has(.dock:not(.absent)) .board { padding-right: 42px; }
}

@media (max-width: 700px) {
  /* Open, the shelf is a strip above the canvas; closed, it takes nothing. */
  .dock, .dock.overlay, .dock.column {
    position: static;
    order: -1;
    width: 100% !important;
    height: auto;
    flex: none;
    flex-direction: row;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .dock.animating { transition: none; }
  /* Like the tray, a compact layout shows what the shelf holds regardless
     of the desktop fold; an empty editor shelf takes nothing. */
  .dock.collapsed:not(.has-items) { display: none; }
  .dock-tab, .dock-card { display: none !important; }
  .dock-list, .dock.overlay .dock-list,
  .dock.column.collapsed .dock-list, .dock.overlay.collapsed .dock-list {
    position: static;
    flex: 1;
    width: auto;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    visibility: visible;
    clip-path: none;
    transition: none;
  }
  .dock-tile, .dock-add { width: 36px; height: 36px; border-radius: 10px; }
  .dock-tile svg { width: 18px; height: 18px; }
}
/* Transcript corrections share the Script window and ordinary dialogs. */
.transcript-replace { width:min(620px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.transcript-replace input[type="text"] { width:100%; min-width:0; }
.replace-field { display:grid; gap:5px; margin-bottom:12px; font-size:12px; }
.speakers-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 8px; }
.speakers-dialog h2 { letter-spacing: 0; }
.speaker-name-list { display: grid; gap: 12px; }
.speaker-name-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.speaker-name-label { display: grid; gap: 3px; overflow-wrap: anywhere; font-size: 13px; }
.speaker-name-label .muted { font-size: 11px; }
.speaker-name-row input { width: 100%; min-width: 0; }
.speaker-analysis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.speaker-analysis:not(:has(> :not([hidden]))) { display: none; }
.speaker-error { margin-top: 12px; font-size: 12px; color: var(--danger); }
.replace-options { flex-wrap:wrap; gap:6px; }
.replace-options label { display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; margin-right:10px; }
.replace-preview { max-height:280px; overflow:auto; }
.replace-line { padding:8px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.replace-line del { color:var(--ink-3); }
.replace-rule { gap:10px; padding:8px 0; overflow-wrap:anywhere; }