/* Berm Suite — taskcrusher-family tokens, topo-brown accent (SPEC 17). */
:root {
  --header-h: calc(58px + env(safe-area-inset-top));
  --bg: #fbfbfa; --panel: #ffffff; --ink: #1c1c1a; --muted: #6b6b66;
  --line: #e3e3df; --line-soft: #efefec;
  --accent-base: #7a4f2c; --accent-hover-base: #5f3d20;
  --accent: var(--accent-base); --accent-hover: var(--accent-hover-base);
  --accent-soft: #f5efe6; --accent-line: #e3d5c2;
  --action-base: #44546a; --action-hover-base: #36435a;
  --action: #44546a; --action-hover: #36435a;
  --ok: #3f8f4f; --down: #b03a3a; --on-action: #ffffff;
  --attn: #e07800; --attn-soft: #fbeedb;
  /* Whose comment is this. Deliberate tokens rather than color-mix on the
     accent: a 7% mix of the action colour reads as plain grey in dark mode,
     which is the confusion this was meant to end. */
  --said-you-bg: #f5efe6; --said-you-line: #e0cfb8; --said-you-ink: #7a4f2c;
  --said-agent-bg: #eaf1f9; --said-agent-line: #c3d6ea; --said-agent-ink: #3c5a80;
  --said-hal-bg: #eaf6f2; --said-hal-line: #afd5cb; --said-hal-ink: #176353;
  --check-line: #d4d4cf; --overlay-soft: rgba(28, 28, 26, .28);
  --overlay-strong: rgba(28, 28, 26, .32); --shadow: rgba(28, 28, 26, .18);
  --shadow-soft: rgba(28, 28, 26, .12); --shadow-faint: rgba(28, 28, 26, .08);
  --shadow-deep: rgba(0, 0, 0, .28); --video-stage: #1c1c1a;
  --thumbnail-empty-bg: var(--bg); --thumbnail-empty-border: #9a9992;
  --thumbnail-empty-label: #6b6b66;
  --markup-stage: #292927; --markup-input: rgba(255, 255, 255, .97);
  --danger-line: #ead0d0; --danger-soft: #fff7f7; --ok-soft: #edf6ef;
  --paper: #f6f1e4; --paper-ink: #1f1d1a; --paper-rule: rgba(83, 126, 151, .18);
  --paper-margin: rgba(217, 119, 111, .64); --paper-pencil: #8b857a;
  --paper-link: #315f86; --paper-chip: #e7dcc5; --paper-code: #ebe3d2;
  --paper-focus: rgba(122, 79, 44, .34); --paper-fade: rgba(246, 241, 228, .98);
  --z-content: 1; --z-sticky: 10; --z-status: 45; --z-header: 50;
  --z-popover: 60; --z-drawer: 70; --z-dialog: 80; --z-toast: 90;
  --z-overlay: 100; --z-overlay-toolbar: 110;
  --radius: 10px;
}
:root:not([data-theme="dark"]) {
  --accent: var(--accent-base); --accent-hover: var(--accent-hover-base);
  --action: var(--action-base); --action-hover: var(--action-hover-base);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161615; --panel: #1e1e1c; --ink: #f0efec; --muted: #9a9992;
  --line: #2e2e2b; --line-soft: #262624;
  --accent: color-mix(in srgb, var(--accent-base) 70%, var(--ink));
  --accent-hover: color-mix(in srgb, var(--accent-hover-base) 62%, var(--ink));
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 32%, transparent);
  --action: color-mix(in srgb, var(--action-base) 76%, var(--ink));
  --action-hover: color-mix(in srgb, var(--action-hover-base) 66%, var(--ink));
  --ok: #62aa70; --down: #d66a6a; --on-action: #ffffff;
  --attn: #ffab40; --attn-soft: rgba(255, 171, 64, .18);
  --said-you-bg: rgba(206, 164, 122, .15); --said-you-line: rgba(206, 164, 122, .34);
  --said-you-ink: #d8ac82;
  --said-agent-bg: rgba(122, 168, 224, .15); --said-agent-line: rgba(122, 168, 224, .36);
  --said-agent-ink: #93bbe8;
  --said-hal-bg: rgba(94, 196, 164, .14); --said-hal-line: rgba(94, 196, 164, .36);
  --said-hal-ink: #7fd3b8;
  --check-line: #555550; --overlay-soft: rgba(0, 0, 0, .5);
  --overlay-strong: rgba(0, 0, 0, .58); --shadow: rgba(0, 0, 0, .48);
  --shadow-soft: rgba(0, 0, 0, .32); --shadow-faint: rgba(0, 0, 0, .24);
  --shadow-deep: rgba(0, 0, 0, .62); --video-stage: #0f0f0e;
  --thumbnail-empty-bg: var(--video-stage); --thumbnail-empty-border: var(--line);
  --thumbnail-empty-label: #9a9992;
  --markup-stage: #121211; --markup-input: rgba(240, 239, 236, .96);
  --danger-line: color-mix(in srgb, var(--down) 38%, transparent);
  --danger-soft: color-mix(in srgb, var(--down) 10%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 11%, transparent);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.thumb-placeholder {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border-style: none; background: linear-gradient(135deg,
    color-mix(in srgb, var(--panel) 97%, white), var(--panel)); color: var(--muted);
}
.thumb-placeholder > .thumb-placeholder-icon {
  position: relative; z-index: var(--z-content); width: 28%; height: 28%; color: var(--muted);
}
.thumb-placeholder > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder > .video-cut-play-icon { display: none; }
.channel-mark {
  width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex;
  align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box;
  border: 1.5px solid var(--ch, var(--line)); border-radius: 50%;
  background: var(--ch, var(--line)); color: inherit; font-size: 9px;
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
}
.channel-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
html {
  min-height: 100%; background: var(--bg); overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
body {
  min-height: 100%; margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior-y: contain;
}
/* berm.css loads first and its body[data-berm-app] base is more specific than
   the shell's body rule. Match that specificity so installing the shared
   feedback widget cannot change Berm Suite's typography or canvas. */
body[data-berm-app] {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.b-fb-modal { box-shadow: 0 8px 28px var(--shadow); }
:root[data-theme="dark"] .b-fb-modal {
  --surface: var(--panel); --surface-2: var(--bg); --text: var(--ink);
  background: var(--panel); color: var(--ink);
}
:root[data-theme="dark"] .b-fb-modal .b-textarea,
:root[data-theme="dark"] .b-fb-modal .b-fb-drop,
:root[data-theme="dark"] .b-fb-modal .b-fb-shot-add {
  background: var(--bg); color: var(--ink);
}
body.modal-open { overflow: hidden; }
body.drawer-open {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
}
body.review-markup-open { overflow: hidden; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

/* App brand and view navigation. */
.bs-brand {
  display: inline-flex; align-items: center; gap: 9px; color: var(--ink);
  text-decoration: none;
}
.bs-brand:hover { color: var(--ink); }
.bs-brand-mark .bs-mark-accent { stroke: var(--accent); }
.bs-wordmark { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.bs-view-switcher {
  display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--line-soft);
}
.bs-view-switcher a {
  padding: 4px 12px; border-radius: 6px; color: var(--muted); font-size: 13px;
  text-decoration: none;
}
.bs-view-switcher a:hover { color: var(--accent); }
.bs-view-switcher a.is-current {
  background: var(--panel); color: var(--accent); font-weight: 600;
  box-shadow: 0 1px 2px var(--shadow-soft);
}
.bs-settings-link {
  width: 32px; height: 32px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; color: var(--muted); text-decoration: none;
}
.bs-settings-link:hover, .bs-settings-link.is-current { color: var(--accent); }
.bs-header-icon {
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.bs-header-icon:hover { color: var(--action); border-color: var(--action); }
.bs-header-icon:disabled { cursor: wait; opacity: .65; }
.bs-refresh.is-refreshing svg { animation: bs-spin .8s linear infinite; }
.pull-refresh {
  height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  gap: 7px; background: var(--bg); color: var(--muted); font-size: 11.5px;
  opacity: 0; transition: height .16s ease, opacity .16s ease;
}
body.is-pulling .pull-refresh {
  height: var(--pull-distance, 0); opacity: 1; transition: none;
}
body.is-refreshing .pull-refresh { height: 32px; opacity: 1; }
.pull-refresh-spinner {
  width: 13px; height: 13px; border: 1.5px solid var(--line);
  border-top-color: var(--action); border-radius: 50%;
}
body.is-pulling .pull-refresh-spinner { transform: rotate(90deg); }
body.is-pull-ready .pull-refresh-spinner { transform: rotate(180deg); border-top-color: var(--ok); }
body.is-refreshing .pull-refresh-spinner { animation: bs-spin .8s linear infinite; }
@keyframes bs-spin { to { transform: rotate(360deg); } }
body.inbox-active .bs-search-stub { display: none; }
body.review-active .bs-search-stub { display: none; }
body.home-active .bs-search-stub { display: none; }

/* Private appreciation dashboard, following the approved Morale artboard. */
.editor-home-view {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 22px 28px 28px;
}
.editor-home-heading {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.editor-home-avatar {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  border-radius: 50%; background: var(--line-soft); color: var(--muted);
  font-size: 14px; font-weight: 600;
}
.editor-home-heading h1 {
  margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700;
  letter-spacing: -.01em;
}
.editor-home-picker {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 12px; font-weight: 600;
}
.editor-home-picker select {
  min-height: 34px; min-width: 130px; padding: 4px 28px 4px 10px;
  border: 1px solid var(--line); border-radius: 8px; outline: 0;
  background: var(--panel); color: var(--ink); font-size: 13px;
}
.editor-home-picker select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.editor-home-status {
  margin-bottom: 12px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 13px;
}
.editor-home-status.is-error { color: var(--down); }
.editor-home-totals {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 20px;
}
.editor-home-stat {
  min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.editor-home-stat strong {
  overflow: hidden; font-size: clamp(23px, 3vw, 29px); font-weight: 700;
  line-height: 1.25; letter-spacing: -.015em; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.editor-home-stat span {
  color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.editor-home-videos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.editor-home-video {
  min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.editor-home-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 6px; background: var(--line-soft);
}
.editor-home-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.editor-home-thumb.is-placeholder::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; transform: translate(-40%, -50%);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 12px solid color-mix(in srgb, var(--muted) 55%, transparent);
}
.editor-home-video-title {
  overflow-wrap: anywhere; font-size: 13px; font-weight: 500; line-height: 1.35;
}
.editor-home-video-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.editor-home-video-views {
  min-width: 0; overflow: hidden; color: var(--muted); font-size: 11.5px;
  text-overflow: ellipsis; white-space: nowrap;
}
.editor-home-empty {
  padding: 36px 16px; border: 1px dashed var(--line); border-radius: 10px;
  color: var(--muted); font-size: 13px; text-align: center;
}
.editor-home-fineprint { margin-top: 18px; color: var(--muted); font-size: 12px; }

/* Daniel's contact-form triage surface. */
.inbox-view {
  width: 100%; max-width: 1440px; height: calc(100vh - var(--header-h)); min-height: 520px;
  margin: 0 auto; display: flex; flex-direction: column; overflow: hidden;
}
.inbox-heading {
  display: flex; align-items: baseline; gap: 12px; padding: 13px 24px 10px;
}
.inbox-heading h1 {
  margin: 0; font-size: 21px; line-height: 32px; font-weight: 700;
  letter-spacing: -.01em;
}
.inbox-heading span { color: var(--muted); font-size: 13px; }
.inbox-stage {
  min-height: 0; flex: 1; display: grid; grid-template-columns: 440px minmax(0, 1fr);
  gap: 12px; padding: 0 24px 24px;
}
.inbox-list-pane, .inbox-detail-pane {
  min-width: 0; min-height: 0; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel);
}
.inbox-list-pane { display: flex; flex-direction: column; overflow: hidden; }
.inbox-health {
  min-height: 34px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
  color: var(--muted); font-size: 11.5px; line-height: 17px;
}
.inbox-health .is-failed { color: var(--down); font-weight: 600; }
.inbox-controls {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 9px;
  border-bottom: 1px solid var(--line-soft);
}
.inbox-tabs {
  display: flex; gap: 2px; max-width: 100%; overflow-x: auto; padding: 2px;
  border-radius: 8px; background: var(--line-soft); scrollbar-width: none;
}
.inbox-tabs::-webkit-scrollbar { display: none; }
.inbox-tabs button {
  flex: 1 0 auto; padding: 4px 9px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: 12px; cursor: pointer;
}
.inbox-tabs button.is-active {
  background: var(--panel); color: var(--action); font-weight: 600;
  box-shadow: 0 1px 2px var(--shadow-soft);
}
.inbox-tabs button:focus-visible, .inbox-row:focus-visible,
.inbox-load-more:focus-visible, .inbox-verdict-row button:focus-visible,
.inbox-back:focus-visible {
  outline: 2px solid var(--action); outline-offset: 1px;
}
.inbox-search {
  height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--muted);
}
.inbox-search:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.inbox-search input {
  min-width: 0; width: 100%; padding: 0; border: 0; outline: 0;
  background: transparent; color: var(--ink); font-size: 13px;
}
.inbox-status {
  margin: 9px 10px 0; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; color: var(--muted); font-size: 12px;
}
.inbox-status.is-error { color: var(--down); }
.inbox-rows {
  min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 7px;
  overflow-y: auto; padding: 9px 10px;
}
.inbox-row {
  width: 100%; min-width: 0; min-height: 48px; display: flex; flex-direction: column; gap: 5px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}
.inbox-row:hover { border-color: var(--action); }
.inbox-row:active {
  border-color: var(--action); background: color-mix(in srgb, var(--action) 16%, var(--panel));
  transform: scale(.99);
}
.inbox-row.is-selected {
  border-color: var(--action); background: color-mix(in srgb, var(--action) 13%, var(--panel));
  box-shadow: inset 3px 0 0 var(--action);
}
.inbox-row-top { min-width: 0; display: flex; align-items: center; gap: 7px; }
.inbox-row-name {
  min-width: 0; overflow: hidden; flex: 1; font-size: 13.5px; font-weight: 700;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-chip {
  display: inline-block; max-width: 100%; overflow: visible; flex-shrink: 0;
  padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 11.5px; font-weight: 650;
  line-height: 18px; white-space: normal; overflow-wrap: anywhere;
}
.inbox-chip.is-sponsorship {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.inbox-chip.is-junk { background: var(--line-soft); }
.inbox-row-age {
  flex-shrink: 0; color: var(--muted); font-size: 11px; white-space: nowrap;
}
.inbox-delivery-dot {
  width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%;
  background: var(--muted); opacity: .72;
}
.inbox-delivery-dot.is-sent { background: var(--ok); opacity: 1; }
.inbox-delivery-dot.is-failed { background: var(--down); opacity: 1; }
.inbox-row-chevron {
  width: 16px; height: 18px; flex: 0 0 16px; display: grid; place-items: center;
  color: var(--muted);
}
.inbox-row-type { width: 100%; min-width: 0; display: flex; }
.inbox-row-summary {
  min-width: 0; overflow: hidden; color: var(--muted); font-size: 12.5px;
  line-height: 18px; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-list-empty {
  margin: auto; padding: 28px 16px; color: var(--muted); font-size: 13px;
  text-align: center;
}
.inbox-load-more {
  flex: none; min-height: 38px; margin: 8px 10px 10px; border: 1px solid var(--action);
  border-radius: 8px; background: var(--panel); color: var(--ink);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.inbox-load-more:hover, .inbox-load-more:active {
  border-color: var(--action-hover); background: color-mix(in srgb, var(--action) 12%, var(--panel));
  color: var(--ink);
}
.inbox-load-more:disabled { cursor: wait; opacity: .6; }
.inbox-detail-pane { overflow-y: auto; }
.inbox-back { display: none; }
.inbox-detail-empty {
  min-height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 30px; color: var(--muted);
  text-align: center;
}
.inbox-detail-empty-mark {
  width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 5px;
  border: 1px solid var(--accent-line); border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-size: 17px;
}
.inbox-detail-empty strong { color: var(--ink); font-size: 14px; }
.inbox-detail-empty span { font-size: 12.5px; }
.inbox-detail { min-height: 100%; display: flex; flex-direction: column; }
.inbox-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 12px;
}
.inbox-detail-header h2 {
  margin: 0; overflow-wrap: anywhere; font-size: 21px; line-height: 1.3;
  letter-spacing: -.01em;
}
.inbox-detail-header a { font-size: 13px; overflow-wrap: anywhere; }
.inbox-detail-header time {
  flex-shrink: 0; padding-top: 4px; color: var(--muted); font-size: 12px;
}
/* Inbox restructure + Meta source (docs/INBOX-META-SPEC.md) */
.inbox-triage-banner {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: 13px; font-weight: 600;
}
.inbox-chip.is-untriaged { background: var(--accent-soft); color: var(--accent); }
.inbox-chip.is-pursue { background: var(--ok-soft); color: var(--ok); }
.inbox-chip.is-archived { background: var(--line-soft); color: var(--muted); }
.inbox-chip.is-tier-vip { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.inbox-chip.is-tier-business { background: var(--ok-soft); color: var(--ok); }
.inbox-chip.is-tier-junk { background: var(--line-soft); color: var(--muted); }
.inbox-row-receipt { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.inbox-row-receipt.is-failed, .inbox-detail-receipt.is-failed { color: var(--down); }
.inbox-detail-receipt { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.inbox-source-switch {
  display: inline-flex; gap: 2px; padding: 2px; margin-left: auto;
  border-radius: 8px; background: var(--line-soft);
}
.inbox-source-switch button {
  border: 0; background: transparent; padding: 5px 14px; border-radius: 6px;
  color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer;
}
.inbox-source-switch button.is-active { background: var(--panel); color: var(--ink); }
.inbox-heading { display: flex; align-items: center; gap: 12px; }
.meta-detail { padding: 18px 20px; }
.meta-detail-handle { color: var(--muted); font-size: 13px; }
.meta-detail-actions { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.meta-view-link {
  min-height: 36px; display: inline-flex; align-items: center; padding: 0 16px;
  border-radius: 9px; background: var(--action); color: var(--on-action);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.meta-view-link:hover { background: var(--action-hover); }
.meta-hide {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.meta-detail-note { margin-top: 12px; color: var(--muted); font-size: 12.5px; }

.inbox-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 3px; }
.inbox-detail-section {
  display: flex; flex-direction: column; gap: 7px; margin: 0 22px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.inbox-summary { margin: 0; color: var(--muted); font-size: 13px; }
.inbox-message {
  color: var(--ink); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.inbox-extra-fields {
  display: grid; grid-template-columns: minmax(100px, .45fr) minmax(0, 1fr);
  gap: 6px 12px; margin: 0;
}
.inbox-extra-fields dt { color: var(--muted); font-size: 12px; }
.inbox-extra-fields dd {
  margin: 0; color: var(--ink); font-size: 13px; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.inbox-attachments { display: flex; flex-wrap: wrap; gap: 7px; }
.inbox-attachments a {
  padding: 5px 9px; border: 1px solid var(--accent-line); border-radius: 8px;
  background: var(--accent-soft); font-size: 12.5px; text-decoration: none;
}
.inbox-ledger-wrap { max-width: 100%; overflow-x: auto; }
.inbox-ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
.inbox-ledger th {
  padding: 5px 8px 5px 0; color: var(--muted); font-size: 10.5px;
  font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .04em;
}
.inbox-ledger td {
  max-width: 260px; padding: 7px 8px 7px 0; border-top: 1px solid var(--line-soft);
  overflow-wrap: anywhere; vertical-align: top;
}
.inbox-ledger td.is-sent { color: var(--ok); font-weight: 600; }
.inbox-ledger td.is-failed, .inbox-ledger-error { color: var(--down); }
.inbox-ledger td.is-pending, .inbox-ledger-empty { color: var(--muted); }
.inbox-verdict-error { margin: 12px 22px 0; color: var(--down); font-size: 13px; }
.inbox-verdict-row {
  position: sticky; bottom: 0; display: flex; align-items: center;
  justify-content: flex-end; gap: 8px;
  margin-top: auto; padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--panel);
}
.inbox-verdict-row button {
  min-width: 92px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted);
  font-weight: 600; cursor: pointer;
}
.inbox-verdict-row button:hover { border-color: var(--action); color: var(--action); }
.inbox-verdict-row button.is-active {
  border-color: var(--action); background: var(--action); color: var(--on-action);
}
.inbox-verdict-row button:disabled { cursor: wait; opacity: .6; }

/* Pipeline runway, phase tabs, and phase card grid. */
.pipeline-view { width: 100%; padding-bottom: 24px; }
.runway { display: flex; flex-direction: column; gap: 8px; padding: 4px 24px 0; }
.runway-heading { display: flex; align-items: baseline; gap: 10px; }
.runway-label { color: var(--accent); }
.runway-cadence, .runway-inventory { color: var(--muted); font-size: 12px; }
.runway-inventory { margin-left: auto; white-space: nowrap; }
.runway-inventory strong { color: var(--ink); }
.runway-slots {
  display: flex; gap: 8px; width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 3px;
}
.runway-slot {
  min-width: 190px; flex: 1 0 190px; display: flex; flex-direction: column; gap: 5px;
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.runway-slot:hover { border-color: var(--action); }
.runway-slot:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.runway-slot.is-empty {
  border: 1px dashed var(--action); background: color-mix(in srgb, var(--action) 9%, var(--panel)); color: var(--action);
}
.runway-date {
  color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.runway-slot.is-empty .runway-date { color: var(--action); }
.runway-title {
  min-height: 18px; overflow: hidden; font-size: 13px; font-weight: 500;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.channel-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink);
  font-size: 11.5px; font-weight: 650;
}
.runway-status {
  display: flex; align-items: center; gap: 5px; color: var(--muted);
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.runway-status.is-ready { color: var(--ink); font-weight: 700; }
.runway-status.is-tight, .runway-slot.is-empty .runway-status { color: var(--ink); }
.phase-tabs {
  align-self: flex-start; display: inline-flex; gap: 2px; margin: 14px 24px 12px;
  padding: 2px; border-radius: 8px; background: var(--line-soft);
}
.phase-tabs button {
  min-height: 44px; padding: 7px 16px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.phase-tabs button span { font-size: 11.5px; font-weight: 700; }
.phase-tabs button.is-drop-target {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.phase-tabs button.is-active {
  background: var(--panel); color: var(--action); font-weight: 600;
  box-shadow: 0 1px 2px var(--shadow-soft);
}
.phase-tabs button:focus-visible, .video-phase-control button:focus-visible {
  outline: 2px solid var(--action); outline-offset: 1px;
}
.pipeline-status {
  margin: 0 24px 12px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 13px;
}
.pipeline-status.is-error { color: var(--down); }
.phase-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px; padding: 0 24px;
}
.phase-mini-card {
  min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  cursor: pointer;
}
.phase-mini-card:hover, .phase-mini-card:focus-visible {
  border-color: var(--accent); outline: none;
}
.phase-mini-title { overflow-wrap: anywhere; font-size: 13px; font-weight: 500; line-height: 1.35; }
.phase-mini-meta, .phase-mini-date {
  display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px;
}
.phase-empty {
  grid-column: 1 / -1; min-height: 80px; border: 1px dashed var(--line);
  border-radius: 10px; color: var(--muted); font-size: 13px;
}

/* Crusher toolbar. */
.crusher-view { width: 100%; }
.crusher-toolbar {
  display: flex; align-items: center; gap: 14px; padding: 14px 24px 12px;
}
.crusher-toolbar h1 {
  margin: 0; font-size: 21px; line-height: 32px; font-weight: 700;
  letter-spacing: -.01em; white-space: nowrap;
}
.crusher-chevron-group { display: flex; gap: 6px; }
.crusher-toolbar button { cursor: pointer; }
.crusher-icon-button, .crusher-today, .crusher-weekends {
  height: 30px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); display: inline-flex; align-items: center;
  justify-content: center;
}
.crusher-icon-button { width: 30px; padding: 0; }
.crusher-today { padding: 0 12px; font-size: 13px; }
.crusher-weekends {
  padding: 0 10px; color: var(--muted); font-size: 12px; font-weight: 600;
}
.crusher-weekends[aria-pressed="true"] {
  color: var(--action); border-color: var(--action); background: color-mix(in srgb, var(--action) 9%, var(--panel));
}
.crusher-icon-button:hover, .crusher-today:hover, .crusher-weekends:hover {
  border-color: var(--action); color: var(--action);
}
.crusher-today:disabled {
  color: var(--muted); background: var(--bg); cursor: default; opacity: .55;
}
.crusher-toolbar-spacer { margin-left: auto; }
.crusher-add {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: var(--action); color: var(--on-action); display: inline-flex;
  align-items: center; justify-content: center;
}
.crusher-add:hover { background: var(--action-hover); }
.crusher-status {
  margin: 0 24px 10px; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 13px;
}
.crusher-status.is-error { color: var(--down); }

/* Approved two-week artboard anatomy. */
.crusher-weeks { overflow: hidden; }
.crusher-week {
  min-height: 176px; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 16px 10px;
}
.crusher-week + .crusher-week { border-top: 1px solid var(--line-soft); }
.crusher-day {
  min-width: 0; padding: 0 8px; border-left: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
}
.crusher-day:first-child { border-left: 0; }
.dayhead { display: flex; align-items: baseline; gap: 6px; padding: 8px 6px 10px; }
.dayname {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.daynum { font-size: 16px; font-weight: 700; }
.is-today .dayname { color: var(--accent); }
.daynum.today-pill {
  min-width: 28px; padding: 0 7px; border-radius: 8px;
  background: var(--accent); color: var(--on-action); text-align: center;
}
@keyframes crusher-today-wash {
  0% { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  100% { background: transparent; }
}
@keyframes crusher-today-pill {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.crusher-day.is-today-pulse { animation: crusher-today-wash 900ms ease-out; }
.crusher-day.is-today-pulse .daynum.today-pill {
  animation: crusher-today-pill 900ms ease-in-out;
}
.day-stack {
  min-height: 46px; display: flex; flex: 1; flex-direction: column; gap: 8px;
  border-radius: 8px; transition: background-color .12s ease, outline-color .12s ease;
}
.crusher-day.day-drop-target .day-stack {
  background: var(--accent-soft); outline: 1px dashed var(--accent);
  outline-offset: 3px;
}

/* Task-sized cards and exact Crusher glyph treatments. */
.tcard {
  min-width: 0; display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); transition: border-color .12s ease, opacity .12s ease;
}
.tcard:hover { border-color: var(--accent); }
.tcard.is-dragging { opacity: .35; }
.task-card, .task-card * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.task-card { position: relative; cursor: grab; touch-action: pan-y; }
.task-card.is-press-armed { transform: translateY(-2px); box-shadow: 0 5px 12px var(--shadow); }
.task-card.is-drag-source {
  border-style: dashed; filter: grayscale(1); opacity: .22; pointer-events: none;
  touch-action: none;
}
body.task-drag-active { cursor: grabbing !important; }
body.task-drag-active .crusher-weeks,
body.task-drag-active .crusher-weeks *,
body.task-drag-active .unscheduled-stack,
body.task-drag-active .unscheduled-stack * {
  cursor: grabbing !important; user-select: none; -webkit-user-select: none;
}
.task-drag-ghost {
  position: fixed; z-index: var(--z-toast); margin: 0; pointer-events: none;
  opacity: .94; transform: rotate(2deg) scale(1.03); transform-origin: center;
  box-shadow: 0 16px 40px var(--shadow); will-change: left, top, transform, opacity;
}
.task-drag-ghost.is-dropping {
  transition: left 160ms ease, top 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.task-drop-indicator {
  width: 100%; height: 2px; min-height: 2px; flex: 0 0 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft);
  pointer-events: none;
}
.task-card:focus-visible, .shoot-copy-handle:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.ttitle {
  min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 500;
  line-height: 1.35;
}
.task-card > .ttitle { width: 100%; }
.task-card .ttitle > .check,
.video-leading-glyph {
  float: left; margin: 0 9px -2px 0;
}
.task-card .ttitle > .check { position: relative; }
.task-card .ttitle > .task-memo-icon { float: left; margin-right: 4px; }
.check {
  width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; margin: 0;
  padding: 0; border: 1.6px solid var(--check-line); border-radius: 50%;
  background: var(--panel); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.check:hover { border-color: var(--ok); }
.check.check-done { border-color: var(--ok); background: var(--ok); color: var(--on-action); }
.check:disabled { cursor: wait; }
.tcard.done { opacity: .55; }
.done .ttitle { color: var(--muted); text-decoration: line-through; }
@keyframes task-check-fill {
  0% { border-color: var(--check-line); background: var(--panel); }
  100% { border-color: var(--ok); background: var(--ok); }
}
@keyframes task-check-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
@keyframes task-strike-sweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.tcard.done.is-crushing {
  padding-top: 10px; padding-bottom: 10px; opacity: 1;
}
.tcard.done.is-crushing .ttitle { position: relative; text-decoration: none; }
.tcard.done.is-crushing .ttitle::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1.5px solid currentColor; transform: scaleX(0); transform-origin: left;
  animation: task-strike-sweep 200ms ease-out forwards;
}
.task-card.is-crushing .check { animation: task-check-fill 220ms ease-out; }
.task-card.is-crushing .check svg { animation: task-check-pop 220ms ease-in-out; }
.task-card.is-collapsing {
  transition: height 260ms ease-in, padding 260ms ease-in, margin 260ms ease-in,
    border-width 260ms ease-in, opacity 260ms ease-in;
}
.tcard.done.is-crushing.is-collapsing { opacity: 0; }
.task-card.is-expanding {
  transition: height 220ms ease-out, padding 220ms ease-out, margin 220ms ease-out,
    border-width 220ms ease-out, opacity 220ms ease-out;
}
.video-card {
  position: relative; cursor: pointer; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line);
}
.video-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.video-card-details { min-width: 0; width: 100%; }
.video-leading-glyph { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.video-leading-glyph .check { margin: 0; }
.video-label-kind { display: inline-flex; align-items: center; margin-right: 4px; }
.video-label-kind .bs-icon { width: 12px; height: 12px; }
.card-kind-icon, .video-play-badge, .video-record-badge { flex-shrink: 0; margin-top: 2px; }
.video-play-badge { color: var(--ink); }
/* .bs-icon (later in this file) resets color to currentColor; outrank it. */
.bs-icon.video-record-badge, .tcard .video-record-badge { color: var(--record, #e5484d); }
.shoot-card { padding-right: 27px; }
.tcard.shoot-card { padding-right: 11px; }
.shoot-copy-handle {
  position: absolute; top: 6px; right: 6px; width: 13px; height: 13px;
  padding: 0; border: 0; border-radius: 2px; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: grab;
  opacity: 0; transition: opacity .12s ease, background-color .12s ease;
}
.shoot-card:hover .shoot-copy-handle, .shoot-copy-handle:focus-visible {
  opacity: 1;
}
.shoot-copy-handle:active { cursor: grabbing; }
.video-channel-label {
  display: block; margin-top: 2px;
  color: var(--muted); font-size: 11px; line-height: 1.35;
}
.video-channel-label .channel-mark { vertical-align: middle; margin-right: 4px; }
.video-channel-label .video-label-kind { vertical-align: middle; }
.video-subline {
  margin-top: 1px; color: var(--muted); font-size: 11px; line-height: 1.45;
}
.posted-subline { display: flex; align-items: center; gap: 5px; }

/* Weekend rails. */
.weekend-rail {
  display: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.weekend-rail:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 6px; }
.crusher-weeks.weekends-collapsed .crusher-week {
  grid-template-columns: 28px repeat(5, minmax(0, 1fr)) 28px;
}
.crusher-weeks.weekends-collapsed .day-weekend { padding: 0; }
.crusher-weeks.weekends-collapsed .day-weekend .dayhead,
.crusher-weeks.weekends-collapsed .day-weekend .day-stack { display: none; }
.crusher-weeks.weekends-collapsed .day-weekend .weekend-rail {
  min-height: 100%; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12px;
}
.crusher-weeks.weekends-collapsed .day-weekend.day-drop-target .weekend-rail {
  background: var(--accent-soft); outline: 1px dashed var(--accent); outline-offset: -2px;
}
.weekend-count {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: var(--on-action); font-size: 10px; line-height: 17px;
  font-weight: 700; text-align: center;
}

/* Unscheduled tray and sync state. */
.unscheduled { margin-top: 2px; border-top: 1px solid var(--line-soft); }
.unscheduled summary {
  padding: 8px 24px; color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: pointer; list-style-position: inside;
}
.unscheduled-stack {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px; padding: 3px 24px 12px;
}
.crusher-context-menu {
  position: fixed; z-index: var(--z-dialog); min-width: 176px; overflow: hidden; padding: 5px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  box-shadow: 0 10px 30px var(--shadow); color: var(--ink);
}
.crusher-context-menu button {
  width: 100%; min-height: 32px; display: block; padding: 5px 9px; border: 0;
  border-radius: 6px; background: transparent; color: var(--ink); font-size: 12.5px;
  text-align: left; cursor: pointer;
}
.crusher-context-menu button:hover, .crusher-context-menu button:focus-visible {
  outline: none; background: color-mix(in srgb, var(--action) 12%, var(--panel));
  color: var(--action);
}
.crusher-context-menu button.is-danger { color: var(--down); }
.crusher-context-menu button.is-danger:hover,
.crusher-context-menu button.is-danger:focus-visible { background: var(--danger-soft); }
.crusher-context-menu button:focus {
  outline: 2px solid var(--action); outline-offset: -2px;
  background: color-mix(in srgb, var(--action) 22%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action) 62%, transparent);
  color: var(--ink); opacity: 1;
}
.idea-context-menu label {
  display: flex; flex-direction: column; gap: 4px; padding: 6px 9px;
  color: var(--muted); font-size: 11px; font-weight: 650;
}
.idea-context-menu input {
  min-height: 32px; padding: 4px 7px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit;
}

/* Task create/edit modal. */
.task-modal {
  position: fixed; inset: 0; z-index: var(--z-drawer); padding: 24px;
  background: var(--overlay-soft); display: flex; align-items: center;
  justify-content: center;
}
.task-dialog {
  position: relative; width: min(520px, 100%);
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow: auto; padding: 22px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel);
  box-shadow: 0 18px 55px var(--shadow);
}
.task-modal-head, .video-modal-head {
  display: flex; align-items: center; gap: 10px;
}
.task-dialog h2 { margin: 12px 36px 16px 0; font-size: 21px; }
.modal-primary-controls { display: flex; align-items: center; gap: 4px; }
.modal-complete {
  min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px 3px 2px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 650; cursor: pointer;
}
.modal-complete:hover { background: var(--ok-soft); color: var(--ok); }
.modal-complete:disabled { cursor: default; opacity: .5; }
.modal-complete-circle {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1.7px solid var(--ok); border-radius: 50%; color: transparent;
}
.modal-complete.is-complete { color: var(--ok); }
.modal-complete.is-complete .modal-complete-circle {
  background: var(--ok); color: var(--on-action);
}
.modal-trash {
  width: 32px; height: 32px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.modal-trash:hover { background: var(--danger-soft); color: var(--down); }
.modal-trash:disabled { cursor: wait; opacity: .5; }
.modal-saved {
  margin-left: 2px; color: var(--muted); font-size: 11px; opacity: 0;
  transition: opacity .16s ease;
}
.modal-saved.is-visible { opacity: 1; }
.task-modal-close {
  position: static; width: 32px; height: 32px; margin-left: auto;
  padding: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--muted); font-size: 23px; line-height: 1;
  cursor: pointer;
}
.task-form { display: flex; flex-direction: column; gap: 7px; }
.task-form label { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.task-form input, .task-form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink);
}
.task-form textarea { resize: vertical; }
.task-form input:focus, .task-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.task-modal-error { color: var(--down); font-size: 13px; }

/* Full video card modal follows the approved card artboard anatomy. */
.video-modal {
  position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; align-items: center;
  justify-content: center; padding: 24px; background: var(--overlay-strong);
}
.video-dialog {
  width: min(780px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  box-shadow: 0 24px 70px var(--shadow);
}
.video-modal-head {
  padding: 16px 22px 0;
}
.video-status-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--line-soft); color: var(--muted); font-size: 12px; font-weight: 750;
}
.video-status-pill.is-ready, .video-status-pill.is-private,
.video-status-pill.is-live {
  border-color: color-mix(in srgb, var(--ok) 50%, var(--line));
  background: var(--ok-soft); color: var(--ok);
}
.video-status-pill.is-on_deck.is-overdue {
  border-color: color-mix(in srgb, var(--attn) 55%, var(--line));
  background: color-mix(in srgb, var(--attn) 12%, var(--panel)); color: var(--attn);
}
.video-chips {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px 0;
}
.card-chip {
  position: relative; min-width: 0; min-height: 31px; display: inline-flex;
  align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); overflow: hidden;
}
.card-chip select, .card-chip input {
  width: auto; min-width: 0; min-height: 29px; margin: 0; padding: 4px 11px;
  border: 0; border-radius: inherit; outline: 0; background: transparent;
  color: inherit; font: inherit; font-size: 12.5px; cursor: pointer;
}
.card-chip select:focus-visible, .card-chip input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.card-chip.is-empty { color: var(--muted); }
.video-channel-chip { padding-left: 10px; }
.video-channel-chip .channel-mark { width: 20px; height: 20px; flex-basis: 20px; }
.video-channel-chip select { padding-left: 0; }
.video-editor-chip select { max-width: 150px; }
.video-post-date-chip { min-width: 112px; }
.video-post-date-chip input { position: relative; z-index: 1; width: 142px; color: inherit; }
.video-post-date-chip.is-empty input { color: transparent; }
.card-chip-placeholder {
  display: none; position: absolute; z-index: 0; left: 11px; color: var(--muted);
  font-size: 12.5px; pointer-events: none;
}
.video-post-date-chip.is-empty .card-chip-placeholder { display: block; }
.video-next-action {
  display: flex; flex-direction: column; gap: 9px; margin: 14px 16px 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg);
}
.video-next-action-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
#video-next-action-text {
  min-width: 0; flex: 1; color: var(--ink); font-size: 13.5px; font-weight: 650;
  line-height: 1.4; overflow-wrap: anywhere;
}
#video-next-action-button, .video-youtube-step-error button {
  min-height: 36px; flex: 0 0 auto; padding: 6px 12px; border: 0; border-radius: 8px;
  background: var(--action); color: var(--on-action); font: inherit;
  font-size: 12.5px; font-weight: 750; cursor: pointer;
}
#video-next-action-button:disabled, .video-youtube-step-error button:disabled {
  opacity: .55; cursor: wait;
}
.video-youtube-step-error {
  display: flex; align-items: center; gap: 9px; padding-top: 8px;
  border-top: 1px solid var(--line-soft); color: var(--down); font-size: 12px;
}
.video-youtube-step-error[hidden] { display: none; }
.video-fold { margin: 0 16px; border-bottom: 1px solid var(--line-soft); }
.video-fold:first-of-type { margin-top: 14px; }
.video-fold > summary { min-height: 52px; }
.video-fold > summary .card-attachments-count {
  max-width: 70%; overflow: hidden; padding: 0; border: 0;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.video-fold-body { padding: 0 0 14px; }
.video-fold-body .video-section { padding: 10px 0 0; }
.video-fold-body.video-files-section { display: flex; flex-direction: column; gap: 10px; }
#video-fold-cuts .video-hero { margin: 0 0 10px; }
.video-fold-body .rich-toolbar { display: none; }
.video-fold-body .rich-editor-shell:focus-within .rich-toolbar { display: flex; }
.video-notes-purpose {
  margin: -2px 0 7px; color: var(--muted); font-size: 11.5px; line-height: 1.4;
}
.video-description-history {
  box-sizing: border-box; width: 100%; padding: 3px 8px 5px;
  border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11.5px;
}
.video-description-history button {
  max-width: 100%; min-height: 28px; padding: 2px 0; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: 11.5px; white-space: nowrap; cursor: pointer;
}
.video-description-history button:hover { color: var(--action); }
#video-description-history-text {
  margin-top: 4px; padding: 9px 10px; border-left: 2px solid var(--line);
  color: var(--muted); font: inherit; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.video-move-to-notes {
  flex: 0 0 auto; padding: 4px 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 7px; background: var(--panel) !important; color: var(--action) !important;
  font: inherit; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer;
}
.video-move-to-notes-scope {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px 8px;
}
.video-move-to-notes-note {
  min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.35;
}
.video-move-to-notes[hidden] + .video-move-to-notes-note { display: none; }
.video-description-box {
  overflow: hidden; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel);
}
.video-description-boundary-heading {
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
  background: var(--bg); color: var(--ink); font-size: 11.5px; font-weight: 700;
  user-select: none; -webkit-user-select: none;
}
#video-description {
  box-sizing: border-box; width: 100%; min-height: 132px; overflow: hidden;
  padding: 12px; border: 0; outline: 0; resize: none; background: transparent;
  color: var(--ink); font: inherit; line-height: 1.5;
}
#video-description:focus { border: 0; box-shadow: none; }
.video-description-angle-note {
  padding: 0 12px 10px; color: var(--down); font-size: 11.5px;
}
.video-description-tail {
  padding: 10px 12px 12px; border-top: 1px solid var(--line-soft);
  background: var(--bg); color: var(--muted); font-size: 11.5px;
  user-select: none; -webkit-user-select: none;
}
.video-description-prefix { border-top: 0; border-bottom: 1px solid var(--line-soft); }
#video-description-tail-label { margin-bottom: 7px; font-weight: 650; }
#video-description-tail-label a { color: var(--action); }
#video-description-prefix-text, #video-description-tail-text {
  color: var(--ink); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.video-description-footer {
  min-width: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 38px; padding: 4px 8px; border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.video-description-count {
  flex: 0 0 auto; min-width: 0; padding: 0 4px; color: var(--muted); font-size: 11px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.video-description-count.is-limit { color: var(--down); font-weight: 700; }

.copy-manual-selection {
  position: fixed;
  inset: 16px 16px auto;
  z-index: 1200;
  min-height: 96px;
  padding: 12px;
  border: 2px solid var(--down);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
}

.copy-manual-selection.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.video-description-migration {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  color: var(--muted); font-size: 11.5px; line-height: 1.5;
}
.video-description-migration button {
  min-height: 28px; padding: 2px 4px; border: 0; background: transparent;
  color: var(--action); font: inherit; font-weight: 650; cursor: pointer;
}
.video-description-migration button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 430px) {
  .video-description-box #video-description {
    padding-top: 10px; padding-bottom: 10px; line-height: 1.4;
  }
  .video-description-box .video-description-tail {
    padding-top: 8px; padding-bottom: 9px; font-size: 11px;
  }
  .video-description-box #video-description-tail-label { margin-bottom: 5px; }
  .video-description-box #video-description-prefix-text,
  .video-description-box #video-description-tail-text { line-height: 1.4; }
  .video-description-box .video-description-footer {
    min-height: 72px; flex-wrap: wrap; gap: 2px 8px;
  }
  .video-description-box .video-description-count {
    flex: 1 1 100%; white-space: normal;
  }
  .video-description-box .video-move-to-notes {
    min-height: 44px !important;
  }
  .video-description-box .video-move-to-notes-scope { padding-bottom: 9px; }
  .video-description-box .video-description-history button { min-height: 44px; }
  .video-description-migration button { min-height: 44px; }
}
.video-add-file {
  width: calc(100% - 32px); min-height: 48px; display: grid; place-items: center;
  margin: 14px 16px 0; padding: 8px; border: 1px dashed var(--line);
  border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
}
.video-add-file:hover, .video-add-file:focus-visible, .video-add-file.is-busy,
.video-dialog.is-file-dragging .video-add-file {
  border-color: var(--action); color: var(--action); background: var(--accent-soft);
}
.video-abkit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 10px 16px 0;
  padding: 10px 12px; border: 1px dashed var(--line); border-radius: 9px;
  color: var(--muted); font-size: 12px;
}
.video-abkit[hidden] { display: none; }
.video-abkit-note { min-width: 0; flex: 1 1 260px; }
.video-abkit-actions {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
}
.video-abkit-copy { min-width: 180px; flex: 1 1 100%; padding: 7px;
  border: 1px solid var(--line); border-radius: 7px; white-space: pre-wrap; user-select: text; }
.video-abkit a, .video-abkit button {
  min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--action); font: inherit; font-weight: 650;
  text-decoration: none; cursor: pointer;
}
.task-card-menu-wrap { position: relative; flex: 0 0 auto; }
.task-card-menu {
  position: absolute; z-index: var(--z-popover); right: 0; top: calc(100% + 4px);
  min-width: 140px; padding: 5px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); box-shadow: 0 10px 28px var(--shadow);
}
.task-card-menu[hidden] { display: none; }
.task-card-menu button {
  width: 100%; min-height: 34px; padding: 6px 9px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.task-card-menu button:hover { background: var(--line-soft); }
.task-card-menu .is-danger { color: var(--down); }
.task-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px 0; }
.task-date-chip input { width: 128px; }
.task-date-chip.is-empty input { color: transparent; }
.task-date-chip.is-empty .card-chip-placeholder { display: block; }
.task-owner-chip { padding: 4px 11px; font-size: 12.5px; }
.task-chips .task-linked-videos {
  display: flex; flex: 1 1 100%; gap: 5px; padding: 0; border: 0; background: transparent;
}
.task-form .rich-toolbar { display: none; }
.task-form .rich-editor-shell:focus-within .rich-toolbar { display: flex; }
.video-hero { margin: 14px 16px 0; }
.video-hero-empty {
  box-sizing: border-box; width: 100%; height: 112px; min-height: 88px; max-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  overflow: hidden; padding: 14px; border: 1px dashed var(--line); border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  color: var(--muted); font: inherit; cursor: default;
}
button.video-hero-empty { cursor: pointer; }
button.video-hero-empty:hover { border-color: var(--action); }
.video-hero-empty-title { color: var(--ink); font-size: 13px; font-weight: 700; }
.video-hero-empty-action {
  display: inline-flex; min-height: 32px; align-items: center; padding: 3px 11px;
  border: 1px solid var(--action); border-radius: 7px;
  background: var(--action); color: var(--on-action);
  font-size: 11.5px; font-weight: 700;
}
.video-cut-poster {
  position: relative; flex: 0 0 auto; width: 96px; aspect-ratio: 16 / 9;
  display: grid; place-items: center; overflow: hidden; padding: 0;
  border: 0; border-radius: 7px; background: var(--video-stage); color: #fff;
}
.video-cut-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-cut-poster.thumb-placeholder { color: var(--muted); }
.video-cut-poster .bs-icon { position: relative; z-index: 1; filter: drop-shadow(0 1px 3px #000); }
.video-cut.is-hero {
  position: relative; display: flex; padding: 0; overflow: visible;
  border-radius: 11px; background: var(--panel);
}
.video-cut.is-hero:not(.is-compact) { display: block; overflow: visible; }
.video-cut.is-hero:not(.is-compact) .video-cut-poster {
  width: 100%; border-radius: 10px 10px 0 0;
}
.video-cut.is-hero:not(.is-compact) .video-cut-main {
  width: 100%; min-width: 0; padding: 10px 12px 11px;
}
.video-cut.is-hero.is-compact .video-cut-main { min-width: 0; padding: 7px 9px; }
.video-cut-hero-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.video-cut-hero-label {
  flex: 0 0 auto; padding: 2px 7px; border: 1px solid currentColor;
  border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800;
  text-transform: uppercase;
}
.video-cut-hero-label.is-final { color: var(--ok); }
.video-cut-hero-title { min-width: 0; font-size: 13px; font-weight: 750; }
.video-cut-hero-meta { color: var(--muted); font-size: 11.5px; }
.video-cut-hero-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.video-cut-caption-mark { width: 5px; height: 5px; margin-left: -9px; margin-top: -19px;
  border-radius: 50%; background: var(--attn); pointer-events: none; }
.video-cut-caption-retry { border: 0; background: none; color: var(--down); font: inherit;
  font-size: 11px; cursor: pointer; }
.video-cut-public-link {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 7px; background: var(--accent-soft);
  color: var(--accent); cursor: default;
}
button.video-cut-public-link { cursor: pointer; }
.video-cut-link-status {
  min-width: 0; margin-top: 4px; color: var(--muted); font-size: 11px;
  line-height: 1.35; overflow-wrap: anywhere;
}
.video-cut-link-status:empty { display: none; }
.video-cut-playback-status {
  margin-top: 4px; color: var(--ok); font-size: 11px; font-weight: 700;
}
.video-cut-proxy-failure {
  margin-top: 5px; color: var(--down); font-size: 11px; line-height: 1.35;
  overflow-wrap: anywhere;
}
.video-cut-proxy-failure button {
  margin-left: 4px; padding: 2px 7px; border: 1px solid currentColor;
  border-radius: 5px; background: transparent; color: inherit; font: inherit;
  font-weight: 750; cursor: pointer;
}
.drive-link-chip {
  min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 4px 5px 4px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg);
}
.drive-link-main { min-width: 0; display: flex; align-items: center; gap: 6px; }
.drive-link-main > .bs-icon { flex: 0 0 auto; color: var(--accent); }
.drive-link-label { flex: 0 0 auto; font-size: 11.5px; font-weight: 750; white-space: nowrap; }
.drive-link-url {
  min-width: 70px; flex: 1 1 130px; height: 30px; padding: 4px 6px;
  border: 0; border-radius: 5px; background: var(--panel); color: var(--muted);
  font: 10.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; resize: none; text-overflow: ellipsis; white-space: nowrap;
}
.drive-link-copy, .drive-link-stop {
  min-height: 32px; flex: 0 0 auto; padding: 4px 9px; border: 0;
  border-radius: 6px; background: var(--action); color: var(--on-action);
  font: inherit; font-size: 11px; font-weight: 750; cursor: pointer;
}
.drive-link-stop { background: transparent; color: var(--down); }
.drive-link-detail { color: var(--muted); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; }
.drive-link-chip.is-pending .drive-link-main > .bs-icon { color: var(--muted); }
.video-cut-main > .drive-link-chip { margin-top: 6px; }
.video-cut-menu-wrap { position: relative; }
.video-cut-menu-toggle { width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.video-cut-menu {
  position: absolute; z-index: 4; right: 0; top: calc(100% + 4px); width: 170px;
  display: flex; flex-direction: column; padding: 5px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); box-shadow: 0 10px 28px var(--shadow);

  min-width: max-content;
}
.video-cut-menu .video-cut-download { white-space: nowrap; }
.video-cut-menu[hidden] { display: none; }
.video-cut-menu button, .video-cut-menu a {
  min-height: 34px; display: flex; align-items: center; padding: 6px 9px;
  border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit;
  font-size: 12px; text-align: left; text-decoration: none; cursor: pointer;
}
.video-cut-menu button:hover, .video-cut-menu a:hover { background: var(--line-soft); }
.video-cut-menu .is-danger { color: var(--down); }
.video-kind {
  margin-left: auto; padding: 2px 9px; border-radius: 5px; background: var(--panel);
  box-shadow: 0 1px 2px var(--shadow-soft); font-size: 11.5px; font-weight: 600;
}
.video-modal-close {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.video-modal-close:hover { background: var(--line-soft); color: var(--ink); }
.video-section { display: flex; flex-direction: column; gap: 8px; padding: 16px 22px 0; }
.video-title-section { padding-top: 8px; }
.video-title-input {
  width: 100%; padding: 8px 11px; border: 1px solid var(--accent-line);
  border-radius: 10px; background: var(--accent-soft); color: var(--ink);
  font-size: 19px; font-weight: 700; line-height: 1.3;
}
.video-fields-row { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px; }
.video-fields-row label, .video-dates-row > label {
  display: flex; flex-direction: column; gap: 5px; color: var(--muted);
  font-size: 12px; font-weight: 600;
}
.video-section input:not(.video-title-input), .video-section select, .video-section textarea {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink);
}
.video-section textarea { resize: vertical; }
.video-section input:focus, .video-section select:focus, .video-section textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.video-phase-control {
  align-self: flex-start; display: inline-flex; gap: 2px; padding: 2px;
  border-radius: 8px; background: var(--line-soft);
}
.video-phase-control button {
  padding: 4px 13px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.video-phase-control button.is-active {
  background: var(--panel); color: var(--action); font-weight: 600;
  box-shadow: 0 1px 2px var(--shadow-soft);
}
.video-dates-row { display: grid; grid-template-columns: minmax(150px, .45fr) 1fr; gap: 14px; }
.video-shoot-field { min-width: 0; }
.video-field-label { margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 600; }
.shoot-date-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 29px; }
.shoot-date-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: 12.5px;
}
.shoot-date-chip button {
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--action); line-height: 1; cursor: pointer;
}
/* Adding a shoot date is one tap on a small plus at the end of the chips,
   like the calendar's quick-add; the label, empty box and button it replaced
   took a third of a phone screen (Seth, 2026-09-10). */
.shoot-date-adder { display: inline-flex; align-items: center; gap: 6px; }
.shoot-date-add {
  width: 28px; height: 28px; padding: 0; border: 1px dashed var(--line);
  border-radius: 999px; background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.shoot-date-add:hover, .shoot-date-add:focus-visible {
  border-color: var(--action); color: var(--action);
  background: color-mix(in srgb, var(--action) 9%, var(--panel));
}
.video-section .shoot-date-adder input[type="date"] {
  width: auto; min-width: 0; padding: 4px 9px; border-radius: 999px; font-size: 12.5px;
}
.shoot-date-adder input[hidden] { display: none; }
.video-files-section { gap: 10px; }
.video-file-upload {
  display: flex; flex-direction: column; gap: 9px; padding: 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.video-upload-options { display: grid; grid-template-columns: minmax(120px, .6fr) 1.4fr; gap: 8px; }
.video-upload-options label {
  display: flex; flex-direction: column; gap: 4px; color: var(--muted);
  font-size: 11.5px; font-weight: 600;
}
.video-cut-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.video-upload-drop {
  min-height: 72px; display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 12px; border: 1px dashed var(--accent-line);
  border-radius: 9px; background: var(--panel); color: var(--muted);
  font-size: 12.5px; cursor: pointer;
}
.video-upload-drop strong { color: var(--action); }
.video-upload-drop:hover, .video-upload-drop:focus-visible,
.video-upload-drop.is-dragging {
  border-color: var(--action); outline: none; background: color-mix(in srgb, var(--action) 9%, var(--panel));
}
.video-upload-drop.is-busy { cursor: wait; opacity: .58; }
.video-upload-progress { display: flex; flex-direction: column; gap: 5px; }
.video-upload-progress.is-attachment {
  padding: 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg);
}
.video-upload-progress progress {
  width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px;
  accent-color: var(--accent);
}
.video-upload-progress-row { display: flex; align-items: center; gap: 8px; }
.video-upload-progress-row span { flex: 1; color: var(--muted); font-size: 11.5px; }
.video-upload-progress-row span.is-error { color: var(--down); }
.video-upload-progress-row button {
  padding: 2px 5px; border: 0; background: transparent; color: var(--action);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.video-files-subheading {
  margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 700;
}
.video-cuts-summary-title {
  min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px;
}
.video-cuts-summary-title > span {
  color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none;
}
.video-cuts-heading { display: flex; align-items: center; justify-content: flex-end; }
.video-cuts-heading button {
  /* The one call to action in an empty CUTS fold: the solid action button,
     not the soft tint that read as disabled (blind gate 2). */
  min-height: 32px; padding: 3px 11px; border: 1px solid var(--action);
  border-radius: 7px; background: var(--action); color: var(--on-action);
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.video-cuts-empty {
  margin-top: -3px; color: var(--muted); font-size: 12px; line-height: 1.4;
}
/* Menu-bar upload: reads as a labelled action, not another glyph. */
.bs-header-upload {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: none;
  color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.bs-header-upload:hover { border-color: var(--accent-line); color: var(--accent); }
@media (max-width: 700px) { .bs-header-upload-label { display: none; } }

.upload-modal {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-start; justify-content: center; padding: 20px;
  overflow-y: auto; background: rgba(0, 0, 0, .38);
}
/* The wrapper scrolls, not the dialog: the picker's absolutely-positioned
   panel would otherwise inflate the dialog's own scroll height and drag the
   header off screen the moment the list opened. */
.upload-dialog {
  width: min(520px, 100%); margin: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px;
}
.upload-dialog header { display: flex; align-items: center; justify-content: space-between; }
.upload-dialog h2 { margin: 0; font-size: 16px; }
.upload-dialog footer { display: flex; align-items: center; gap: 8px; }
.upload-foot-note { flex: 1; color: var(--muted); font-size: 11.5px; }

.upload-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 16px; border: 1.5px dashed var(--line); border-radius: 12px;
  color: var(--muted); cursor: pointer; text-align: center;
}
.upload-drop:hover, .upload-drop.is-over {
  border-color: var(--accent-line); color: var(--accent);
}
.upload-drop-text { font-size: 12.5px; }

.upload-active { display: flex; flex-direction: column; gap: 5px; }
.upload-active-row { display: flex; justify-content: space-between; gap: 10px; }
.upload-active-name {
  font-size: 12.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.upload-active-pct { color: var(--muted); font-size: 12px; }
.upload-active progress { width: 100%; height: 5px; }
.upload-active-note { color: var(--muted); font-size: 11px; }

.upload-field { display: block; }
.upload-field input, .upload-field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: none; color: var(--ink);
  font: inherit; font-size: 13px; resize: vertical;
}
.upload-field input::placeholder, .upload-field textarea::placeholder {
  color: var(--muted);
}

/* The slim picker: one grey line until it is touched. */
.video-pick { position: relative; }
.video-pick-line {
  width: 100%; padding: 8px 2px; border: none; border-bottom: 1px solid var(--line);
  background: none; color: var(--muted); font: inherit; font-size: 12.5px;
  text-align: left; cursor: pointer;
}
.video-pick-line:hover { color: var(--accent); border-color: var(--accent-line); }
.video-pick-line.is-set { color: var(--ink); font-weight: 600; }
.video-pick-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.video-pick-search {
  width: 100%; padding: 8px 11px; border: none;
  border-bottom: 1px solid var(--line); background: none; color: var(--ink);
  font: inherit; font-size: 12.5px;
}
.video-pick-list { max-height: 216px; overflow-y: auto; }
.video-pick-option {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 11px; border: none; background: none; color: var(--ink);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.video-pick-option:hover { background: var(--accent-soft); color: var(--accent); }
.video-pick-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-pick-phase { color: var(--muted); font-size: 10.5px; text-transform: lowercase; }
.video-pick-note { padding: 9px 11px; color: var(--muted); font-size: 12px; }

/* Cut rows: the editor's words lead; Draft/Final is the one status. */
.video-cut-title { color: var(--ink); font-weight: 700; text-decoration: none; }
a.video-cut-title:hover { color: var(--accent); }
.video-cut.is-final { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.video-cut-note { margin-top: 6px; border-left: 3px solid var(--line-soft); padding: 1px 0 1px 9px; }
.video-cut-note-who {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--muted); font-size: 12px; font-weight: 700;
}
.video-cut-note-who > span:first-child { min-width: 0; overflow-wrap: anywhere; }
details.video-cut-note > summary { list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
details.video-cut-note > summary::-webkit-details-marker { display: none; }
details.video-cut-note > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; }
details.video-cut-note[open] > summary { color: var(--ink); }
details.video-cut-note[open] > summary .card-attachments-chevron { transform: rotate(180deg); }
.video-cut-note-text {
  display: block; margin-top: 4px; color: var(--ink); font-size: 13.5px;
  line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap;
}
.video-cut-labelseg { flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 2px;
  border-radius: 8px; background: var(--line-soft); }
.video-cut-labelstop { border: 0; background: transparent; padding: 3px 12px;
  border-radius: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer; }
span.video-cut-labelstop { cursor: default; }
.video-cut-labelstop:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.video-cut-labelstop.is-active { cursor: default; font-weight: 800; }
.video-cut-labelstop.is-active.is-draft { background: var(--action); color: var(--on-action); }
.video-cut-labelstop.is-active.is-final { background: var(--ok); color: #fff; }

/* YouTube panel */
.video-youtube { margin: 14px 0 6px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); padding: 12px 14px; }
.video-youtube-heading {
  min-width: 0; display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
  font-weight: 700;
}
.video-youtube-heading > span:first-child { flex: 0 0 auto; color: var(--ink); font-size: 14px; }
.video-youtube-headline {
  min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 2px;
  font-size: 13px; overflow-wrap: anywhere;
}
.video-youtube-headline.is-ready { color: var(--ok); }
.video-youtube-headline.is-waiting { color: var(--attn); }
.video-youtube-headline.is-blocked { color: var(--down); }
.video-youtube-headline.is-done { color: var(--ok); }
.video-youtube-headline-detail { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.video-youtube-go { margin-left: auto; min-height: 32px; padding: 0 14px; border: 0;
  border-radius: 8px; background: var(--line-soft); color: var(--muted);
  font-size: 13px; font-weight: 700; cursor: not-allowed; }
.video-youtube-go.is-ready { background: var(--action); color: var(--on-action);
  cursor: pointer; }
.video-youtube-go.is-ready:hover { background: var(--action-hover); }
.video-youtube-todo { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.video-youtube-todo-item {
  min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.video-youtube-todo-text {
  min-width: 0; flex: 1 1 auto; color: var(--ink); font-size: 13.5px;
  font-weight: 650; line-height: 1.35; overflow-wrap: anywhere;
}
.video-youtube-todo-action {
  min-height: 44px; flex: 0 0 auto; padding: 0 14px; border: 1px solid var(--action);
  border-radius: 8px; background: var(--panel); color: var(--action); font: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.video-youtube-todo-action:hover { border-color: var(--action-hover); color: var(--action-hover); }
.video-youtube-todo-action:disabled { cursor: wait; opacity: .58; }
.video-youtube-calm {
  margin: 0; padding: 10px 0; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; line-height: 1.4;
}
.video-youtube-job { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.video-youtube-job progress { flex: 0 0 160px; }
.video-youtube-job span { color: var(--muted); font-size: 13px; }
.video-youtube-job-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#video-youtube-job-text { color: var(--ink); font-variant-numeric: tabular-nums; }
#video-youtube-job-rate { font-variant-numeric: tabular-nums; }
#video-youtube-job-rate.is-stalled { color: var(--attn); }
#video-youtube-job-path { font-size: 12px; }
#video-youtube-job-rate:empty, #video-youtube-job-path:empty { display: none; }
.video-youtube > .card-attachments { margin-top: 4px; border-top: 1px solid var(--line); }
.video-youtube > .card-attachments > summary { min-height: 44px; }
.video-youtube-detail-line {
  min-width: 0; padding: 5px 0; color: var(--muted); font-size: 12.5px;
  line-height: 1.4; overflow-wrap: anywhere;
}
.video-youtube-detail-line:last-child { padding-bottom: 9px; }

@media (max-width: 430px) {
  .video-youtube { padding: 12px; }
  .video-youtube-heading { align-items: stretch; flex-direction: column; }
  .video-youtube-heading > span:first-child { width: 100%; }
  .video-youtube-go { width: 100%; margin-left: 0; }
  .video-youtube-todo-item { align-items: stretch; flex-direction: column; gap: 7px; }
  .video-youtube-todo-action { width: 100%; }
  .video-youtube-todo-text, .video-youtube-calm, .video-youtube-detail-line,
  #video-youtube-job-text, #video-youtube-job-rate, #video-youtube-job-path,
  #video-upload-status { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .video-youtube-job { align-items: stretch; flex-direction: column; }
  .video-youtube-job progress { width: 100%; flex-basis: auto; }
}

.video-transfers-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.video-transfers-budget { font-weight: 500; font-size: 11px; color: var(--muted); }
.video-transfers { display: flex; flex-direction: column; gap: 6px; }
.video-transfer {
  min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 8px;
}
.video-transfer.is-error { border-color: var(--down); }
.video-transfer-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.video-transfer-meta { color: var(--muted); font-size: 11px; }
.video-transfer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.video-transfer-actions a, .video-transfer-actions button {
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: none; color: var(--ink); font-size: 11.5px; cursor: pointer;
  text-decoration: none;
}
.video-transfer-actions a:hover, .video-transfer-actions button:hover {
  border-color: var(--accent-line); color: var(--accent);
}
.video-transfer-promote {
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line));
  background: var(--ok-soft); color: var(--ok); font-weight: 700;
  border-radius: 8px; padding: 4px 12px; cursor: pointer;
}
.video-transfer-delete { color: var(--muted); }
.video-transfers-empty { margin: 0; color: var(--muted); font-size: 12.5px; }
.video-upload-hint { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; }
.video-upload-hint.is-warning { color: var(--down); }
.video-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.video-attachment {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  font-size: 12.5px; text-decoration: none;
}
.video-attachment:hover { border-color: var(--accent-line); color: var(--accent); }
.video-attachment-size { color: var(--muted); font-size: 11px; }
.video-attachment-empty { color: var(--muted); font-size: 12.5px; }
.video-cuts { display: flex; flex-direction: column; gap: 6px; }
.video-cut {
  min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
}
/* The text column keeps a real width; when the chips do not fit beside it
   they wrap beneath it. flex: 1 (basis 0) let seven chips crush the column
   to one word per line with the chips drawn over it (Seth, 2026-09-09). */
.video-cut-main {
  min-width: min(240px, 100%); flex: 1 1 auto; display: flex; flex-direction: column;
}
.video-cut-main strong, .video-cut-main .video-cut-title {
  display: block; overflow: hidden; font-size: 12.5px; line-height: 18px;
  text-overflow: ellipsis; white-space: nowrap;
}
.video-cut-main > span { color: var(--muted); font-size: 10.5px; }
.video-cut-chips {
  flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: 5px; margin-left: auto;
}
.video-cut-caption-details {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding-top: 7px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 11.5px;
}
.video-cut-caption-details[hidden] { display: none; }
.inline-caption-editor-box {
  width: 100%; overflow: hidden; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg);
}
.inline-caption-message { display: block; padding: 8px 9px; }
.inline-caption-editor-box .inline-caption-rulings { padding: 0 9px 8px; }
.inline-caption-actions {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 7px 9px;
  border-top: 1px solid var(--line-soft); background: var(--panel);
}
.inline-caption-actions:empty { display: none; }
.video-cut-label-toggle {
  background: none; font-family: inherit; cursor: pointer;
}
.video-cut-label-toggle:hover, .video-cut-label-toggle:focus-visible {
  background: var(--accent-soft);
}
.video-cut-label-toggle:disabled { opacity: 0.6; cursor: default; }
.video-cut-play { padding: 2px 4px; font-size: 11px; font-weight: 600; text-decoration: none; }
.video-cut-review {
  padding: 3px 8px; border: 1px solid var(--action); border-radius: 7px;
  background: color-mix(in srgb, var(--action) 10%, var(--panel)); color: var(--action); font-size: 11px;
  font-weight: 650; cursor: pointer;
}
.video-cut-review:hover { border-color: var(--action-hover); color: var(--action-hover); }
#video-modal-error { margin: 12px 22px 0; }
.video-comments {
  display: flex; flex-direction: column; gap: 8px; margin-top: 18px;
  padding: 18px 22px 16px; border-top: 1px solid var(--line); background: var(--bg);
}
.comment-avatar {
  width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--line-soft);
  color: var(--muted); font-size: 11px; font-weight: 600;
}
.comment-content { min-width: 0; flex: 1; }
/* Video Review — approved player-left, notes-right surface. */
.review-view {
  width: 100%; max-width: 1500px; height: calc(100vh - var(--header-h)); min-height: 560px;
  margin: 0 auto; display: flex; flex-direction: column; overflow: hidden;
}
.review-heading {
  min-height: 51px; display: flex; align-items: center; gap: 13px; padding: 10px 24px;
}
.review-back {
  min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--action); font-size: 12px; font-weight: 600; cursor: pointer;
}
.review-back:hover { border-color: var(--action); }
.review-heading-copy { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.review-heading-copy span { color: var(--muted); font-size: 13px; }
.review-heading-copy strong {
  min-width: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis;
  white-space: nowrap;
}
.review-cut-label {
  min-width: 0; max-width: 42%; margin-left: auto; overflow: hidden; padding: 3px 9px;
  border-radius: 7px; background: var(--line-soft); color: var(--muted);
  font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap;
}
.review-cut-switcher {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.review-cut-switcher select {
  max-width: 220px; height: 30px; padding: 3px 26px 3px 8px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--ink); font-size: 11.5px; text-transform: none; letter-spacing: 0;
}
.review-cut-switcher + .review-cut-label { margin-left: 0; }
.review-status {
  margin: 0 24px 10px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 12.5px;
}
.review-status.is-error { color: var(--down); }
.review-workflow, .review-what-changed {
  display: flex; align-items: center; gap: 9px; margin: 0 24px 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel);
}
.review-workflow-chip {
  flex-shrink: 0; padding: 2px 8px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700;
}
.review-workflow-chip.status-needs_review {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.review-workflow-chip.status-changes_requested {
  border-color: var(--action); background: color-mix(in srgb, var(--action) 10%, var(--panel));
  color: var(--ink);
}
.review-workflow-chip.status-approved {
  border-color: var(--ok); background: var(--ok-soft); color: var(--ink);
}
.review-workflow-progress { color: var(--muted); font-size: 12px; }
.review-workflow-actions { margin-left: auto; display: flex; gap: 6px; }
.review-workflow-actions button {
  min-height: 32px; padding: 5px 10px; border: 1px solid var(--action);
  border-radius: 7px; background: var(--action); color: var(--on-action);
  font-size: 11.5px; font-weight: 650; cursor: pointer;
}
.review-workflow-actions #review-approve {
  border-color: var(--ok); background: var(--ok);
}
.review-workflow-actions button:disabled { cursor: wait; opacity: .55; }
.review-what-changed { align-items: baseline; }
.review-what-changed span {
  flex-shrink: 0; color: var(--muted); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.review-what-changed strong { font-size: 12.5px; font-weight: 550; }
.review-stage {
  min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
  gap: 14px; padding: 0 24px 18px;
}
.review-player-column {
  min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
}
.review-video-wrap {
  width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden;
  display: grid; place-items: center; border-radius: 10px; background: var(--video-stage);
}
.review-video-wrap video { display: block; width: 100%; height: 100%; object-fit: contain; }
.review-marker-rail {
  position: relative; width: calc(100% - 20px); height: 10px; margin: -7px 10px 0;
  border-radius: 999px; background: var(--line-soft);
}
.review-marker {
  position: absolute; top: 50%; width: 10px; height: 10px; padding: 0;
  transform: translate(-50%, -50%); border: 2px solid var(--panel);
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.review-marker.is-resolved { background: var(--ok); box-shadow: 0 0 0 1px var(--ok); opacity: .7; }
.review-marker:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.review-composer {
  display: flex; flex-direction: column; gap: 7px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.review-composer-top { display: flex; align-items: baseline; gap: 10px; }
.review-composer-top label { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.review-composer-top label strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.review-composer-top > span {
  margin-left: auto; color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.review-composer textarea {
  width: 100%; min-height: 66px; resize: vertical; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; outline: none;
  background: var(--panel); color: var(--ink); line-height: 1.45;
}
.review-composer textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.review-replying, .review-markup-ready {
  display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11.5px;
}
.review-replying button, .review-markup-ready button {
  padding: 0; border: 0; background: transparent; color: var(--action); cursor: pointer;
  font-size: 11.5px; font-weight: 600;
}
.review-markup-ready {
  align-self: flex-start; padding: 3px 7px; border: 1px solid var(--accent-line);
  border-radius: 6px; background: var(--accent-soft); color: var(--accent);
}
.review-markup-ready button { margin-left: 4px; }
.review-composer-error { color: var(--down); font-size: 12px; }
.review-composer-actions { display: flex; justify-content: flex-end; gap: 7px; }
.review-composer-actions button {
  min-height: 36px; padding: 6px 11px; border-radius: 8px; font-size: 12.5px;
  font-weight: 650; cursor: pointer;
}
.review-draw { border: 1px solid var(--action); background: color-mix(in srgb, var(--action) 10%, var(--panel)); color: var(--action); }
.review-add { border: 1px solid var(--action); background: var(--action); color: var(--on-action); }
.review-add:hover { background: var(--action-hover); border-color: var(--action-hover); }
.review-add:disabled { cursor: wait; opacity: .55; }
.review-source-note { color: var(--muted); font-size: 11.5px; }
.review-notes-rail {
  min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel);
}
.review-carryover {
  padding: 8px 9px; border: 1px solid var(--accent-line); border-radius: 9px;
  background: var(--accent-soft);
}
.review-carryover-heading {
  margin-bottom: 5px; color: var(--accent); font-size: 11.5px; font-weight: 700;
}
.review-carryover-list { display: flex; flex-direction: column; gap: 4px; }
.review-carryover-thread {
  padding: 4px 6px; border-radius: 6px; background: var(--panel); font-size: 11.5px;
}
.review-carryover-thread summary { cursor: pointer; overflow-wrap: anywhere; }
.review-carryover-thread.is-resolved { opacity: .66; }
.review-carryover-thread > button {
  margin: 5px 0 2px; padding: 0; border: 0; background: transparent;
  color: var(--action); font-size: 10.5px; font-weight: 650; cursor: pointer;
}
.review-carryover-reply {
  margin: 3px 0 0 12px; padding-left: 6px; border-left: 2px solid var(--accent-line);
  color: var(--muted); font-size: 10.5px;
}
.review-notes-heading {
  display: flex; align-items: baseline; gap: 8px; padding: 0 1px 2px;
}
.review-notes-heading > div { min-width: 0; display: flex; align-items: baseline; gap: 5px; }
.review-notes-heading > div span {
  color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em;
}
.review-notes-heading > div strong {
  min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px;
  text-overflow: ellipsis; white-space: nowrap;
}
.review-notes-heading > span {
  flex-shrink: 0; margin-left: auto; color: var(--muted); font-size: 10.5px;
}
.review-notes-list { display: flex; flex-direction: column; gap: 7px; }
.review-resolved-notes { margin-top: auto; padding-top: 2px; }
.review-note {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.review-note.is-resolved { opacity: .55; }
.review-note.is-highlighted {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  animation: review-highlight 1.2s ease-in-out 2;
}
@keyframes review-highlight { 50% { background: var(--accent-soft); } }
.review-note-top { display: flex; align-items: center; gap: 7px; }
.review-timestamp {
  padding: 1px 7px; border: 0; border-radius: 5px; background: var(--line-soft);
  color: var(--muted); font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.review-timestamp:hover { background: color-mix(in srgb, var(--action) 10%, var(--panel)); color: var(--action); }
.review-note-author {
  min-width: 0; overflow: hidden; color: var(--muted); font-size: 11.5px;
  text-overflow: ellipsis; white-space: nowrap;
}
.review-resolve { position: relative; width: 18px; height: 18px; margin-left: auto; cursor: pointer; }
.review-resolve input {
  position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;
}
.review-resolve span {
  width: 18px; height: 18px; display: grid; place-items: center;
  border: 1.5px solid var(--check-line); border-radius: 50%; background: var(--panel);
}
.review-resolve svg { opacity: 0; }
.review-resolve input:checked + span { border-color: var(--ok); background: var(--ok); }
.review-resolve input:checked + span svg { opacity: 1; }
.review-resolve input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.review-resolve input:disabled + span { cursor: wait; opacity: .6; }
.review-note-body { font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-note-markup {
  display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 7px;
  background: var(--line-soft);
}
.review-note-markup:hover { border-color: var(--accent); }
.review-note-markup img {
  display: block; width: 100%; max-height: 150px; object-fit: cover;
}
.review-note-actions { display: flex; }
.review-note-actions button {
  padding: 0; border: 0; background: transparent; color: var(--muted);
  font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.review-note-actions button:hover { color: var(--action); }
.review-replies {
  display: flex; flex-direction: column; gap: 5px; margin-top: 3px; padding-left: 13px;
  border-left: 2px solid var(--accent-line);
}
.review-reply {
  display: flex; flex-direction: column; gap: 4px; padding: 6px 7px;
  border-radius: 7px; background: var(--bg);
}
.review-notes-empty { padding: 20px 8px; color: var(--muted); font-size: 12px; text-align: center; }
.review-resolved-toggle {
  flex-shrink: 0; min-height: 34px; margin-top: 1px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 11.5px;
  font-weight: 600; cursor: pointer;
}
.review-resolved-toggle:hover { border-color: var(--action); color: var(--action); }

/* Full-screen Explaino frame markup. */
.review-markup-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--video-stage);
}
.review-markup-dialog { width: 100%; height: 100dvh; display: flex; flex-direction: column; }
.review-markup-toolbar {
  z-index: var(--z-overlay-toolbar); display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.review-markup-toolbar > strong { margin-right: 3px; font-size: 13px; }
.review-markup-tools { display: flex; gap: 3px; }
.review-markup-tools button, .review-markup-actions button {
  min-height: 36px; padding: 5px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.review-markup-tools button.is-active {
  border-color: var(--action); background: var(--action); color: var(--on-action);
}
.review-markup-colors { display: flex; align-items: center; gap: 6px; }
.review-markup-colors button {
  width: 25px; height: 25px; padding: 0; border: 2px solid var(--panel);
  border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}
.review-markup-colors button[data-color="#ff3b30"] { --swatch: #ff3b30; }
.review-markup-colors button[data-color="#ffd60a"] { --swatch: #ffd60a; }
.review-markup-colors button[data-color="#34c759"] { --swatch: #34c759; }
.review-markup-colors button[data-color="#0a84ff"] { --swatch: #0a84ff; }
.review-markup-colors button[data-color="#ffffff"] { --swatch: #ffffff; }
.review-markup-colors button[data-color="#1c1c1a"] { --swatch: #1c1c1a; }
.review-markup-colors button.is-active { box-shadow: 0 0 0 2px var(--action); }
.review-markup-actions { margin-left: auto; display: flex; gap: 6px; }
.review-markup-actions .review-markup-cancel { color: var(--muted); }
.review-markup-actions .review-markup-attach {
  border-color: var(--action); background: var(--action); color: var(--on-action);
}
.review-markup-actions .review-markup-attach:disabled { cursor: wait; opacity: .55; }
.review-markup-stage {
  position: relative; min-height: 0; flex: 1; overflow: hidden; background: var(--markup-stage);
}
.review-markup-stage.xp-stage { position: relative; inset: auto; }
.review-markup-stage .xp-canvas { display: block; width: 100%; height: 100%; }
.review-markup-stage .xp-text-edit {
  position: absolute; z-index: var(--z-overlay-toolbar); margin: 0; resize: none; overflow: hidden;
  border: 2px solid var(--xp-accent, var(--accent)); border-radius: 6px;
  outline: none; background: var(--markup-input); box-shadow: 0 4px 18px var(--shadow-deep);
  font-weight: 600; text-align: center; white-space: pre; -webkit-text-fill-color: currentColor;
}
.review-markup-error {
  position: absolute; left: 50%; bottom: 14px; z-index: var(--z-overlay-toolbar); transform: translateX(-50%);
  max-width: calc(100% - 28px); padding: 7px 10px; border-radius: 7px;
  background: var(--down); color: var(--on-action); font-size: 12px;
}

/* Settings and welcome cards. */
.bs-main {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 24px 24px; max-width: 560px;
}
.settings-view { width: 100%; padding: 24px; }
.settings-shell {
  width: 100%; max-width: 1080px; margin: 0 auto; display: grid;
  grid-template-columns: 210px minmax(0, 720px); gap: 28px; align-items: start;
}
.settings-sidebar { position: sticky; top: 20px; min-width: 0; }
.settings-category-rail { min-width: 0; }
.settings-sidebar h1 {
  margin: 0 0 12px; padding: 0 10px; font-size: 22px; line-height: 1.3;
  letter-spacing: -.01em;
}
.settings-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.settings-sidebar a {
  min-height: 34px; display: flex; align-items: center; padding: 6px 10px;
  border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.settings-sidebar a:hover { color: var(--accent); background: var(--accent-soft); }
.settings-sidebar a.is-active {
  color: var(--accent); background: var(--accent-soft); font-weight: 600;
}
.settings-panes, .settings-pane { min-width: 0; align-self: start; }
.settings-pane { display: flex; flex-direction: column; gap: 12px; }
.bs-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.theme-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 12px; font-weight: 600;
}
.theme-setting select {
  min-width: 120px; height: 34px; padding: 5px 28px 5px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--ink); font-size: 12.5px;
}
.theme-setting select:focus { outline: 2px solid var(--action); outline-offset: 1px; }
.settings-you-email {
  display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
  padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.settings-you-email > label { color: var(--muted); font-size: 12px; font-weight: 600; }
.settings-you-email > div { display: flex; align-items: center; gap: 8px; }
.settings-you-email input {
  width: min(100%, 340px); min-width: 0; height: 38px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--ink); font: inherit; font-size: 13px;
}
.settings-you-email input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.settings-you-email button { min-height: 38px; flex: 0 0 auto; }
.settings-you-email .bs-note { min-height: 18px; margin: 0; }
.notifications-card { gap: 10px; }
.notification-device-section {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0 12px; border-bottom: 1px solid var(--line-soft);
}
.notification-intro, .notification-guidance { width: 100%; margin: 0; line-height: 1.45; }
.notification-install-steps { width: 100%; margin: 0; line-height: 1.6; }
.notification-secure-link { box-sizing: border-box; text-align: center; text-decoration: none; }
.notification-device-section > button { min-height: 44px; }
.notification-current-status {
  margin: 0; color: var(--ok); font-weight: 700;
}
.notification-device-list { width: 100%; display: grid; gap: 7px; }
.notification-device-empty { margin: 2px 0; }
.notification-device {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 7px 9px; border: 1px solid var(--line-soft);
  border-radius: 9px; background: var(--bg);
}
.notification-device > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notification-device strong { font-size: 13px; }
.notification-current-device { color: var(--ok); font-size: 12px; font-weight: 700; }
.notification-device button { min-height: 44px; flex: 0 0 auto; }
.notification-device button, #notification-test {
  color: var(--ink); border-color: var(--line); background: var(--panel);
}
.notification-push-off { margin: 0; color: var(--muted); }
.notification-kinds { display: grid; }
.notification-kind-head, .notification-kind-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px minmax(180px, 220px);
  align-items: center; gap: 10px;
}
.notification-kind-head {
  padding: 2px 4px 6px; color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.notification-kind-head span:not(:first-child) { text-align: center; }
.notification-kind-row { min-height: 60px; padding: 7px 4px; border-top: 1px solid var(--line-soft); }
.notification-kind-row > label:first-child {
  min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.notification-kind-row > label:first-child strong { font-size: 13px; }
.notification-kind-row > label:first-child span {
  color: var(--muted); font-size: 12px; line-height: 1.35;
}
.notification-push-target {
  position: relative; width: 44px; height: 44px; justify-self: center;
  display: grid; place-items: center; cursor: pointer;
}
.notification-push-target input {
  position: absolute; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer;
}
.notification-push-target > .notification-push-check {
  width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel); pointer-events: none;
}
.notification-push-target input:checked + .notification-push-check {
  border-color: var(--accent); background: var(--accent);
}
.notification-push-target input:checked + .notification-push-check::after {
  content: ""; display: block; width: 6px; height: 12px; margin: 3px 0 0 8px;
  border: solid var(--on-action); border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.notification-push-target input:focus-visible + .notification-push-check {
  outline: 2px solid var(--action); outline-offset: 2px;
}
.notification-control-label { display: none; }
.notification-email-target {
  min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
}
.notification-email-target select.bs-select {
  height: 44px; min-height: 44px; width: 100%; min-width: 0; max-width: 100%;
  font-size: 12px;
}
.notification-no-email { color: var(--muted); text-align: center; }
.notification-row-status { display: block; min-height: 0; font-size: 11px; line-height: 1.3; }
.notification-row-status:empty { display: none; }
.notification-email-note { margin: 2px 0 0; line-height: 1.45; }
#notification-device-status, #notification-prefs-status { min-height: 18px; margin: 0; }
.settings-feedback-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.settings-feedback-row .bs-note { margin: 3px 0 0; }
.settings-feedback-row .bs-button-secondary {
  min-height: 44px; min-width: 44px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px;
}
.bs-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.bs-body { font-size: 14px; line-height: 1.6; }
.bs-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; white-space: pre-wrap; }
.bs-error { color: var(--down); font-size: 13px; }
.bs-ok { color: var(--ok); font-weight: 600; }
.bs-warn { color: var(--accent); }
.bs-note { color: var(--muted); font-size: 13px; }
.bs-heading { margin: 0; font-size: 18px; }
.bs-subheading { margin-top: 8px; font-size: 13px; font-weight: 700; }
.bs-form { display: flex; flex-direction: column; gap: 8px; }
.bs-form input {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
}
.bs-form input:focus { outline: none; border-color: var(--accent); }
.bs-form button {
  font-weight: 600; padding: 8px 14px; border: none; border-radius: 8px;
  background: var(--action); color: var(--on-action); cursor: pointer; min-height: 44px;
}
.bs-form button:hover { background: var(--action-hover); }
.bs-invite-row { display: flex; gap: 8px; }
.bs-invite-row input { min-width: 0; flex: 1; }
.bs-perms { margin: 0; padding: 0; border: 0; }
.bs-perms legend { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.bs-perms div { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.bs-perms label { display: inline-flex; align-items: center; font-size: 13px; }
.bs-perms input {
  width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent);
}
.bs-invite-list { display: flex; flex-direction: column; }
.bs-pending-invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.settings-invite-result { flex: 1 0 100%; min-height: 15px; }
.bs-row-actions { display: flex; flex-shrink: 0; gap: 6px; }
.bs-row-actions button, .bs-link-button {
  font-size: 13px; font-weight: 600; min-height: 38px; padding: 6px 10px;
  border-radius: 8px; cursor: pointer;
}
.bs-button-secondary {
  color: var(--action); border: 1px solid var(--action); background: color-mix(in srgb, var(--action) 9%, var(--panel));
}
.bs-button-primary {
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--action);
  border-radius: 8px; background: var(--action); color: var(--on-action);
  font-weight: 650; cursor: pointer;
}
.bs-button-primary:hover { background: var(--action-hover); }
.bs-button-secondary:disabled { color: var(--muted); cursor: default; opacity: .6; }
.bs-button-danger { color: var(--down); border: 1px solid var(--line); background: var(--panel); }
.bs-welcome-main { margin: 8vh auto 0; }
.bs-welcome-card { padding: 22px; gap: 12px; }
.bs-welcome-title { margin: 0; font-size: 26px; line-height: 1.25; }
.bs-readonly { color: var(--muted); background: var(--bg) !important; }
.bs-install-steps { margin: 0; padding-left: 20px; }
.bs-install-steps li + li { margin-top: 8px; }
.bs-link-button {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-action); background: var(--action); border: 0; text-decoration: none;
}
.bs-link-button:hover { color: var(--on-action); background: var(--action-hover); }
.settings-form { gap: 12px; }
.settings-form > label, .settings-fieldset > label, .settings-form-grid label,
.settings-channel-grid label {
  min-width: 0; display: flex; flex-direction: column; gap: 5px;
  color: var(--muted); font-size: 12px; font-weight: 500;
}
.settings-form input:not([type="checkbox"]), .settings-form select, .settings-form textarea,
.settings-channel-grid input:not([type="color"]), .settings-channel-grid select,
.settings-raw-row input {
  width: 100%; min-width: 0; height: 38px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; outline: none;
  background: var(--panel); color: var(--ink); font-size: 13px;
}
.settings-form textarea { height: auto; min-height: 132px; resize: vertical; }
.settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus,
.settings-channel-grid input:focus, .settings-raw-row input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.settings-form-grid { display: grid; gap: 10px; }
.settings-form-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-form-grid-three { grid-template-columns: .7fr .8fr 1.5fr; }
.settings-fieldset { margin: 0; padding: 0; border: 0; }
.settings-fieldset legend {
  margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 500;
}
.settings-day-row { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-day-row label {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  font-size: 12px; cursor: pointer;
}
.settings-day-row input, .settings-toggle input { accent-color: var(--accent); }
.settings-toggle {
  min-height: 38px; flex-direction: row !important; align-items: center;
  align-self: end; padding: 7px 0; color: var(--ink) !important; font-size: 13px !important;
}
.settings-toggle input { width: 17px; height: 17px; margin: 0; }
.settings-warning {
  padding: 8px 10px; border: 1px solid var(--accent-line); border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
}
.settings-heading-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.settings-heading-row .bs-link-button { min-height: 38px; padding: 7px 12px; }
.settings-editor-section {
  display: flex; flex-direction: column; gap: 9px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.settings-editor-list { display: flex; flex-direction: column; gap: 8px; }
.settings-editor-card {
  position: relative; padding: 11px 12px; border: 1px solid var(--line-soft);
  border-radius: 8px; background: var(--bg);
}
.settings-field-grid { grid-template-columns: 1fr 1.5fr .75fr .55fr; }
.settings-rule-grid { grid-template-columns: 1fr .8fr 1.35fr .65fr; }
.settings-field-options { grid-column: 1 / -1; }
.settings-editor-actions {
  display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px;
}
.settings-editor-actions button {
  min-width: 36px; min-height: 32px; padding: 4px 8px; border-radius: 7px;
  font-size: 12px; font-weight: 600;
}
.settings-editor-actions button:disabled { cursor: default; opacity: .45; }
.settings-editor-empty {
  padding: 11px 12px; border: 1px dashed var(--line); border-radius: 8px;
}
.settings-routing-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--muted); font-size: 12px;
}
.settings-routing-link strong { color: var(--ink); overflow-wrap: anywhere; }
.settings-routing-link a { flex-shrink: 0; }
.settings-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 5px;
}
.settings-actions > span { margin-right: auto; }
.settings-actions button, .settings-save {
  min-height: 38px; padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.settings-save { border: 0; background: var(--action); color: var(--on-action); }
.settings-save:hover { background: var(--action-hover); }
.settings-actions button:disabled, .settings-save:disabled { opacity: .55; cursor: wait; }
.settings-account-list, .settings-channel-list, .settings-raw-list {
  display: flex; flex-direction: column;
}
.settings-agent-row { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.settings-agent-heading, .settings-agent-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.settings-agent-key-form { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-agent-key-form input { flex: 1 1 180px; min-width: 0; }
.settings-agent-keys { display: grid; gap: 7px; }
.settings-agent-key { overflow-wrap: anywhere; }
#agent-key-once { margin-top: 12px; padding: 12px; border: 1px solid var(--accent-line); border-radius: 7px; overflow-wrap: anywhere; user-select: all; }
.settings-account-row {
  display: grid; grid-template-columns: minmax(180px, .75fr) minmax(300px, 1.25fr);
  align-items: start; gap: 10px 16px;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.settings-account-row:first-child { border-top: 0; }
.settings-account-details label {
  display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.settings-account-details input {
  width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel); color: var(--ink); font-size: 13px;
  font-weight: 500; text-transform: none; letter-spacing: 0;
}
.settings-account-details input:focus { outline: none; border-color: var(--accent); }
.settings-account-details .bs-note { margin-top: 4px; overflow-wrap: anywhere; }
.settings-account-controls { display: flex; align-items: flex-start; gap: 10px; }
.settings-account-perms { display: flex; flex: 1; flex-wrap: wrap; gap: 5px; }
.settings-account-perms label, .settings-account-active {
  display: inline-flex; align-items: center; gap: 4px; min-height: 29px;
  padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); font-size: 11px; white-space: nowrap;
}
.settings-account-perms input, .settings-account-active input {
  width: 14px; height: 14px; margin: 0; accent-color: var(--accent);
}
.settings-account-active { border-color: var(--accent-line); background: var(--accent-soft); }
.settings-account-status { grid-column: 1 / -1; min-height: 15px; text-align: right; }
.settings-account-row[aria-busy="true"] { opacity: .72; }
.settings-perm-chips { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.settings-perm-chips span {
  padding: 2px 7px; border: 1px solid var(--accent-line); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 11px;
  white-space: nowrap;
}
.settings-perm-chips span.is-muted {
  border-color: var(--line); background: var(--bg); color: var(--muted);
}
.settings-channel-list { gap: 10px; margin-top: 5px; }
.settings-channel-card {
  position: relative; padding: 11px 12px 12px 15px; border: 1px solid var(--line-soft);
  border-radius: 8px; background: var(--bg); overflow: hidden;
}
.settings-channel-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--channel-color);
}
.settings-channel-heading, .settings-channel-identity {
  display: flex; align-items: center; gap: 9px;
}
.settings-channel-heading { justify-content: space-between; margin-bottom: 9px; }
.settings-channel-avatar {
  display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px;
  align-items: center; justify-content: center; border-radius: 50%;
  background: var(--channel-color); color: #fff; font-size: 14px; font-weight: 700;
  object-fit: cover;
}
.settings-channel-id { color: var(--muted); }
.settings-channel-refresh {
  min-height: 34px; padding: 5px 9px; border-radius: 8px; font-size: 12px;
}
.settings-channel-grid { grid-template-columns: 1.1fr 1fr 82px 1.45fr; }
.settings-channel-grid input[type="color"] {
  width: 100%; height: 38px; padding: 3px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); cursor: pointer;
}
.upload-presets-list { display: grid; gap: 12px; margin-top: 8px; }
.upload-preset-card { position: relative; overflow: hidden; }
.upload-preset-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--channel-color);
}
.upload-preset-card > label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.upload-preset-template { min-height: 112px; resize: vertical; }
.upload-preset-preview {
  white-space: pre-wrap; overflow-wrap: anywhere; padding: 7px 9px;
  border-left: 2px solid var(--line); background: var(--bg);
}
.upload-preset-grid { margin-top: 4px; }
.upload-preset-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.upload-preset-checks label { display: flex; align-items: center; color: var(--text); }
.settings-status-list { margin: 2px 0 4px; }
.settings-status-list > div {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line-soft);
}
.settings-status-list dt { color: var(--muted); font-size: 12px; }
.settings-status-list dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.integration-health { display: flex; flex-direction: column; }
.integration-health-row {
  display: grid; grid-template-columns: 10px 100px minmax(0, 1fr); align-items: center;
  gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px;
}
.integration-health-row:first-child { border-top: 0; }
.integration-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.integration-dot.is-ok { background: var(--ok); }
.integration-dot.is-down { background: var(--down); }
.integration-health-row .bs-note { min-width: 0; overflow-wrap: anywhere; }
.settings-readonly {
  min-height: 38px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--muted); overflow-wrap: anywhere;
}
.settings-danger-card { border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
.settings-danger-card > .bs-label { color: var(--down); }
.settings-raw-list { margin-top: 4px; border-top: 1px solid var(--line); }
.settings-raw-row {
  display: grid; grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.5fr) 130px auto;
  gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.settings-raw-row > label {
  min-width: 0; font: 12px/1.4 ui-monospace, Menlo, monospace; overflow-wrap: anywhere;
}
.settings-raw-row > .bs-note { font-size: 11px; }
.settings-raw-row button { min-height: 36px; padding: 5px 9px; }

/* The Crusher becomes a vertical day list and the modal a bottom sheet. */
@media (max-width: 899px) {
  .editor-home-view { padding: 18px 16px 24px; }
  .editor-home-heading { align-items: flex-start; flex-wrap: wrap; }
  .editor-home-heading h1 { padding-top: 4px; }
  .editor-home-picker { width: 100%; margin-left: 50px; }
  .editor-home-picker select { min-width: 0; flex: 1; }
  .editor-home-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .editor-home-stat { gap: 1px; padding: 11px 12px; }
  .editor-home-stat strong { font-size: clamp(20px, 7vw, 25px); }
  .editor-home-stat span { font-size: 11px; line-height: 1.3; }
  .editor-home-videos { grid-template-columns: 1fr; gap: 10px; }
  .review-view {
    height: auto; min-height: calc(100dvh - var(--header-h)); overflow: visible;
  }
  .review-heading { flex-wrap: wrap; padding: 9px 16px; }
  .review-heading-copy { flex: 1; }
  .review-cut-switcher { margin-left: 0; }
  .review-cut-label { width: auto; max-width: none; margin-left: 0; }
  .review-status { margin-left: 16px; margin-right: 16px; }
  .review-workflow, .review-what-changed {
    margin-left: 16px; margin-right: 16px; flex-wrap: wrap;
  }
  .review-workflow-actions { width: 100%; margin-left: 0; }
  .review-workflow-actions button { flex: 1; }
  .review-stage {
    min-height: calc(100dvh - var(--header-h) - 61px); display: flex; flex-direction: column;
    padding: 0 16px calc(88px + env(safe-area-inset-bottom)); overflow: visible;
  }
  .review-player-column { display: contents; }
  .review-video-wrap { order: 0; }
  .review-composer {
    position: sticky; bottom: env(safe-area-inset-bottom); z-index: var(--z-sticky); order: 1;
    box-shadow: 0 -6px 20px var(--shadow-faint);
  }
  .review-source-note { order: 2; }
  .review-notes-rail {
    order: 3; min-height: 280px; max-height: none; overflow: visible; margin-top: 3px;
  }
  .review-markup-toolbar { flex-wrap: wrap; }
  .review-markup-toolbar > strong { width: 100%; }
  .review-markup-actions { margin-left: auto; }
  .inbox-view { height: calc(100dvh - var(--header-h)); min-height: 430px; }
  .inbox-heading { padding: 11px 16px 9px; }
  .inbox-stage { position: relative; display: block; padding: 0; overflow: hidden; }
  .inbox-list-pane, .inbox-detail-pane {
    position: absolute; inset: 0 16px 16px; width: auto;
    transition: transform .2s ease;
  }
  .inbox-load-more { min-height: 44px; }
  .inbox-list-pane {
    padding-bottom: env(safe-area-inset-bottom); transform: translateX(0);
  }
  .inbox-detail-pane { transform: translateX(calc(100% + 32px)); }
  .inbox-view.is-detail-open .inbox-list-pane {
    transform: translateX(calc(-100% - 32px));
  }
  .inbox-view.is-detail-open .inbox-detail-pane { transform: translateX(0); }
  .inbox-back {
    position: sticky; top: 0; z-index: var(--z-sticky); min-height: 40px; width: 100%;
    display: flex; align-items: center; gap: 6px; padding: 7px 14px;
    border: 0; border-bottom: 1px solid var(--line-soft); background: var(--panel);
    color: var(--action); font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .inbox-detail-empty { min-height: calc(100% - 40px); }
  .inbox-detail-header { padding-top: 16px; }
  .runway { padding-left: 16px; padding-right: 16px; }
  .runway-heading { flex-wrap: wrap; gap: 3px 8px; }
  .runway-cadence {
    width: calc(100% - 64px); min-width: 0; overflow: hidden; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal;
    overflow-wrap: normal; word-break: normal;
  }
  .runway-inventory { width: 100%; margin-left: 0; white-space: normal; line-height: 1.4; }
  .runway-stack { flex-direction: column; gap: 8px; overflow-x: visible; padding-bottom: 0; }
  /* Compact rows on a phone: a full-width thumbnail per slot meant one week
     per screen and eight screens of scrolling (Seth: space efficient,
     especially mobile). Children are flat (date, chip, thumb, title, status),
     so place each one explicitly. */
  .runway-stack .runway-slot {
    width: 100%; min-width: 0; flex: 0 0 auto; min-height: 0;
    display: grid; gap: 3px 9px; padding: 8px 11px;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "date title" "thumb title" "thumb status";
    align-items: center;
  }
  .runway-stack .runway-date {
    grid-area: date; font-size: 10.5px; line-height: 1.2; align-self: end;
  }
  .runway-stack .channel-chip {
    grid-area: thumb; justify-self: start; align-self: start;
    font-size: 10px; padding: 0 6px;
  }
  .runway-stack .runway-thumb {
    grid-area: thumb; width: 76px; height: 43px; margin: 0; border-radius: 6px;
    align-self: center;
  }
  .runway-stack .runway-slot:not(.is-empty) .channel-chip {
    grid-area: status; justify-self: start; align-self: center;
  }
  .runway-stack .runway-title {
    grid-area: title; min-height: 0; display: -webkit-box; overflow: hidden;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal;
    overflow-wrap: anywhere; font-size: 13px; align-self: center;
  }
  .runway-stack .runway-status {
    grid-area: status; justify-self: end; align-self: center; font-size: 11px;
  }
  .runway-stack .runway-slot.is-empty {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "date chip"; min-height: 50px; align-items: center;
  }
  .runway-stack .runway-slot.is-empty .channel-chip {
    grid-area: chip; justify-self: start; align-self: center;
  }
  .phase-tabs {
    max-width: calc(100% - 32px); gap: 5px; margin: 14px 16px 8px;
    padding: 0; overflow-x: auto; background: transparent; scrollbar-width: none;
  }
  .phase-tabs::-webkit-scrollbar { display: none; }
  .phase-tabs button {
    min-height: 36px; padding: 6px 13px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--panel); white-space: nowrap;
  }
  .phase-tabs button.is-active {
    border-color: var(--ink); background: var(--ink); color: var(--bg);
    box-shadow: none;
  }
  .pipeline-sort { min-height: 36px; margin: 0 16px 12px; padding: 6px 28px 6px 10px; }
  .pipeline-status { margin-left: 16px; margin-right: 16px; }
  .phase-card-grid { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
  .crusher-toolbar { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .crusher-toolbar h1 { width: 100%; }
  .crusher-toolbar-spacer { margin-left: auto; }
  .crusher-week { display: block; min-height: 0; padding: 0 16px; }
  .crusher-week + .crusher-week { border-top: 0; }
  .crusher-day {
    min-height: 0; display: block; padding: 10px 0;
    border-top: 1px solid var(--line-soft); border-left: 0;
  }
  .crusher-week:first-child .crusher-day:first-child { border-top: 0; }
  .dayhead { padding: 0 2px 8px; }
  .day-stack { width: 100%; min-height: 46px; }
  .tcard { width: 100%; }
  .crusher-weeks.weekends-collapsed .crusher-week { display: block; }
  .crusher-weeks.weekends-collapsed .day-weekend {
    min-height: 28px; height: 28px; display: block; padding: 0;
  }
  .crusher-weeks.weekends-collapsed .day-weekend .weekend-rail {
    width: 100%; min-height: 28px; height: 28px; align-items: center; padding: 0;
  }
  .unscheduled summary { padding-left: 16px; padding-right: 16px; }
  .unscheduled-stack { display: flex; flex-direction: column; padding: 3px 16px 12px; }
  .task-modal, .video-modal { padding: 0; align-items: flex-end; }
  .task-dialog, .video-dialog {
    width: 100%; max-height: calc(100vh - env(safe-area-inset-top) - 16px);
    border-width: 1px 0 0; border-radius: 16px 16px 0 0;
  }
  .task-dialog { padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); }
  .task-date-chip input { width: auto; min-width: 9.5ch; }
  .video-fields-row { grid-template-columns: 1fr; }
  .video-dates-row { grid-template-columns: 1fr; }
  .video-upload-options { grid-template-columns: 1fr; }
  .video-cut { align-items: flex-start; flex-direction: column; }
  .video-cut.is-hero.is-compact { align-items: center; flex-flow: row nowrap; }
  .video-cut.is-hero.is-compact .video-cut-main { flex: 1 1 0; }
  .video-cut-chips { flex-wrap: wrap; }
  .video-phase-control { max-width: 100%; overflow-x: auto; }
  .video-phase-control button { white-space: nowrap; }
  .settings-view { padding: 16px; }
  .settings-shell { display: block; }
  .settings-sidebar { position: static; margin-bottom: 14px; }
  .settings-sidebar h1 { margin-bottom: 8px; padding: 0; font-size: 20px; }
  .settings-category-rail { position: relative; width: 100%; max-width: 100%; }
  .settings-category-rail::after {
    content: ""; position: absolute; top: 0; right: 0; z-index: var(--z-content);
    width: 30px; height: 44px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg));
  }
  .settings-sidebar .settings-chip-row {
    width: 100%; max-width: 100%; flex-direction: row; gap: 6px; overflow-x: auto;
    overscroll-behavior-x: contain; padding: 0 30px 2px 0; scroll-padding-right: 30px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .settings-sidebar .settings-chip-row::-webkit-scrollbar { display: none; }
  .settings-sidebar a {
    min-width: max-content; min-height: 44px; flex: 0 0 auto; padding: 9px 14px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
    overflow: visible; text-overflow: clip; white-space: nowrap;
  }
  .settings-sidebar a.is-active {
    border-color: var(--ink); background: var(--ink); color: var(--bg);
  }
  .settings-panes {
    height: auto; min-height: 0; display: grid; grid-auto-rows: max-content; align-items: start;
  }
  .settings-pane { height: max-content; min-height: 0; align-self: start; }
  .theme-setting { width: 100%; min-width: 0; align-items: center; }
  .theme-setting span { min-width: 0; flex: 1; }
  .theme-setting select { width: min(54%, 220px); min-width: 150px; flex: 0 0 auto; }
  .settings-you-email input { flex: 1; width: auto; }
  .settings-you-email input, .settings-you-email button { min-height: 44px; }
  .settings-user-name input { min-height: 44px; }
  .settings-form-grid-three, .settings-channel-grid, .settings-field-grid,
  .settings-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-raw-row { grid-template-columns: minmax(120px, .75fr) minmax(180px, 1.4fr) auto; }
  .settings-raw-row > .bs-note { display: none; }
}

@media (max-width: 600px) {
  .notification-kind-head { display: none; }
  .notification-kind-row {
    min-height: 0; grid-template-columns: minmax(0, 1fr);
    align-items: center; gap: 8px 14px; padding: 12px 0;
  }
  .notification-kind-row > label:first-child {
    grid-column: 1 / -1; gap: 3px;
  }
  .notification-control-label {
    display: inline; color: var(--muted); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
  }
  .notification-push-target {
    grid-column: 1 / -1; width: 100%; min-width: 88px; justify-self: start; display: flex;
    align-items: center; justify-content: flex-start; gap: 8px;
  }
  .notification-push-target input { right: 0; }
  .notification-push-target .notification-push-check { margin-left: auto; }
  .notification-email-target {
    grid-column: 1 / -1; width: 100%; min-width: 0; align-items: flex-start; gap: 8px;
  }
  .notification-email-target select.bs-select {
    flex: 1 1 auto; width: 100%; min-width: 0; height: 44px; min-height: 44px;
    font-size: 12px;
  }
  .notification-no-email { min-width: 24px; text-align: left; }
}

/* Pipeline inventory panels and the videos-only mode of the shared calendar. */
.pipeline-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 12px 24px 10px;
}
.pipeline-toggles { display: inline-flex; align-items: center; gap: 7px; }
.pipeline-toggle {
  min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 650; cursor: pointer;
}
.pipeline-toggle span {
  margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--line-soft);
  color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
}
.pipeline-toggle.is-active {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink);
}
.pipeline-toggle.pipeline-drop-target { box-shadow: inset 0 0 0 2px var(--accent); }
.pipeline-channels { margin-left: auto; display: flex; align-items: center; gap: 4px; height: 34px; }
.pipeline-channel {
  /* The same height as the add-video plus, so the marks and the plus centre on
     one line by construction, and a centred flex box rather than a bare
     button: WebKit seats a text child (the monogram) and an image child (the
     avatar) on different lines inside a button, and put the whole row 4 px
     low (Seth's phone, 2026-09-12). Also a real 30 px tap target. */
  width: 30px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; vertical-align: top; -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer; opacity: .35;
}
.pipeline-channel.is-active { opacity: 1; }
.pipeline-channel:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.pipeline-channel { position: relative; }
/* Positioned, not laid out: WebKit seats a button's content 4 px low whatever
   the flex centring says (real Safari, v177 cell). */
.pipeline-channel .channel-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; flex-basis: 22px;
}
.pipeline-new-idea {
  width: 34px; height: 34px; flex: 0 0 34px; margin: 0; padding: 0; display: grid;
  place-items: center; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); cursor: pointer;
}
.pipeline-status { margin: 0 24px 10px; }
.pipeline-status .pipeline-undo, .pipeline-undo {
  margin-left: 5px; padding: 0; border: 0; background: transparent; color: var(--action);
  font: inherit; font-weight: 700; cursor: pointer;
}
.pipeline-panels {
  display: flex; gap: 12px;
  align-items: start; padding: 0 24px 8px;
}
.pipeline-panel {
  min-width: 0; max-width: calc((100% - 12px) / 2); flex: 1 1 0;
  overflow: hidden; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel);
}
.pipeline-panel.pipeline-drop-target { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pipeline-panel-reason {
  padding: 7px 10px; border-bottom: 1px solid var(--line-soft);
  color: var(--down); font-size: 11.5px; line-height: 1.35;
}
.pipeline-panel-head {
  min-height: 38px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line-soft);
}
.pipeline-panel-head strong {
  font-size: 12px; text-transform: uppercase; letter-spacing: .045em;
}
.pipeline-panel-head > span { color: var(--muted); font-size: 11.5px; }
#pipeline-parked-toggle {
  margin-left: 5px; padding: 0; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 11px; cursor: pointer;
}
.pipeline-rows { max-height: 177px; overflow-y: auto; overscroll-behavior: contain; }
.pipeline-row {
  min-width: 0; min-height: 59px; display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink);
  cursor: pointer;
}
.pipeline-row:last-child { border-bottom: 0; }
.pipeline-row:hover, .pipeline-row:focus-visible { background: var(--accent-soft); outline: 0; }
.pipeline-row.is-dragging { opacity: .35; }
.pipeline-drag-image {
  position: fixed; top: -1000px; left: -1000px; z-index: -1;
  width: 220px; max-width: 220px; padding: 8px 11px;
  overflow: hidden; border: 1px solid var(--accent-line); border-radius: 8px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm);
  font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap;
}
.pipeline-row.is-parked { opacity: .55; }
.pipeline-row-thumb {
  position: relative; width: 64px; height: 36px; flex: 0 0 64px; overflow: hidden; border-radius: 5px;
  background: var(--line-soft);
}
.pipeline-row-thumb.thumb-placeholder > .thumb-placeholder-icon { width: 14px; height: 14px; }
.pipeline-row-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pipeline-row-copy { min-width: 0; flex: 1; }
.pipeline-row-title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; font-size: 13px; font-weight: 550; line-height: 1.3;
}
.pipeline-row-meta {
  min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden;
  color: var(--muted); font-size: 11px; white-space: nowrap;
}
.pipeline-row-meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pipeline-row-meta-separator { flex: 0 0 auto; }
.pipeline-row.is-overdue .pipeline-row-meta { color: var(--down); }
.pipeline-row.is-no-shoot-date .pipeline-row-meta { color: var(--attn); }
.pipeline-row-grip { flex: 0 0 auto; color: var(--muted); cursor: grab; }
.pipeline-row-menu {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  font: inherit; cursor: pointer; opacity: 0;
}
.pipeline-row:hover .pipeline-row-menu,
.pipeline-row:focus-within .pipeline-row-menu,
.pipeline-row-menu:focus-visible { opacity: 1; }
.pipeline-row-menu:hover, .pipeline-row-menu:focus-visible {
  outline: 0; background: var(--line-soft); color: var(--action);
}
@media (max-width: 699px) {
  .pipeline-row-menu { width: 44px; height: 44px; flex-basis: 44px; opacity: 1; }
}
.pipeline-panel-empty { height: 44px; margin: 8px; border: 1px dashed var(--line); border-radius: 8px; }
.calendar.is-pipeline { margin-top: 0; }
@media (min-width: 700px) {
  body.pipeline-active { overflow: hidden; }
  .pipeline-view {
    height: calc(100dvh - var(--header-h)); min-height: 0; display: flex;
    flex-direction: column; overflow: hidden; padding-bottom: 0;
  }
  .pipeline-view > .pipeline-toolbar,
  .pipeline-view > .pipeline-status,
  .pipeline-view > .pipeline-panels { flex: 0 0 auto; }
  .pipeline-view > .calendar {
    min-height: 0; flex: 1 1 auto; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-gutter: stable;
  }
  .calendar.is-pipeline .crusher-toolbar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    border-bottom: 1px solid var(--line-soft); background: var(--bg);
  }
}
.calendar.is-pipeline .video-card.is-thumb {
  display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); cursor: pointer;
}
/* Pipeline calendar state rails, in both themes: shoot = red, upcoming post =
   muted grey, public/live post = the same channel green as the Live status. */
.calendar.is-pipeline .video-card.is-thumb { border-left: 3px solid var(--muted); }
.calendar.is-pipeline .video-card.is-thumb.shoot-card { border-left-color: var(--down); }
.calendar.is-pipeline .video-card.is-thumb.live-card { border-left-color: var(--ok); }
.video-thumb-visual { min-width: 0; overflow: hidden; border-radius: 6px; }
.calendar.is-pipeline .video-thumb-picture {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 6px 6px 0 0; background: var(--line-soft);
}
.video-thumb-picture > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.video-thumb-strip {
  width: 100%; height: 28px; min-width: 0; box-sizing: border-box; display: flex; align-items: center; gap: 5px;
  padding: 3px 5px; border-top: 1px solid var(--line-soft); background: var(--panel);
  container-type: inline-size; container-name: strip;
}
.video-kind-tag {
  height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: 999px; font-size: 8.5px; font-weight: 750;
  line-height: 1; letter-spacing: .045em; text-transform: uppercase;
}
.video-kind-tag.is-shoot { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.video-kind-tag.is-post { background: color-mix(in srgb, var(--action) 14%, transparent); color: var(--action); }
.video-kind-tag .bs-icon { flex: 0 0 auto; }
.video-kind-tag.is-compact { height: 18px; padding-inline: 4px; font-size: 8px; }
.video-thumb-channel-meta {
  min-width: 20px; flex: 1 1 auto; display: inline-flex; align-items: center; gap: 4px;
  overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap;
}
.video-thumb-channel-meta .channel-mark { flex-shrink: 0; }
.video-thumb-thumtest { flex: 0 0 auto; }
.video-thumb-strip .video-live-pill { flex: 0 0 auto; }
.video-thumb-channel-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.video-thumb-channel-meta .channel-mark { width: 20px; height: 20px; flex-basis: 20px; }
.video-thumb-check { width: 18px; height: 18px; flex: 0 0 18px; background: transparent; }
.video-thumb-lock { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; color: var(--muted); }
/* YouTube's red LIVE marker; the card rail stays green to distinguish a live
   post from a red shoot. */
:root { --live-red: #d92d20; --live-red-hover: #b42318; --live-red-ink: #fff; }
.video-watch-pill {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px;
  border-radius: 999px; background: var(--live-red); color: var(--live-red-ink);
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; line-height: 1; white-space: nowrap; cursor: pointer;
}
.video-watch-pill svg { flex: 0 0 auto; }
.video-watch-pill:hover { background: var(--live-red-hover); color: var(--live-red-ink); }
.video-watch-pill:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.video-live-pill {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px;
  border: 1px solid var(--live-red); border-radius: 999px;
  background: color-mix(in srgb, var(--live-red) 10%, var(--panel)); color: var(--ink);
  font-size: 9px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase;
  text-decoration: none; line-height: 1; white-space: nowrap; cursor: pointer;
}
.video-live-dot {
  width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--live-red);
}
.video-live-pill:hover {
  border-color: var(--live-red-hover); background: var(--live-red); color: var(--live-red-ink);
}
.video-live-pill:hover .video-live-dot { background: var(--live-red-ink); }
.video-live-pill:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
/* A tight strip (five weekday columns at 1280 px leave ~157 px; the row needs
   ~161 px at full padding) compacts the tag and the LIVE pill a few pixels so
   Thumbtest never leaves the strip. The wide look is unchanged. Placed after the
   base .video-live-pill rule so it wins at equal specificity. */
@container strip (max-width: 176px) {
  .video-kind-tag { padding-inline: 3px; }
  .video-live-pill { padding: 0 4px; gap: 2px; letter-spacing: .02em; }
}
.posted-subline :is(.video-watch-pill, .video-live-pill) { margin-top: 2px; }
#video-next-action-button.is-youtube {
  background: var(--live-red); border-color: var(--live-red); color: var(--live-red-ink);
}
#video-next-action-button.is-youtube:hover { background: var(--live-red-hover); border-color: var(--live-red-hover); }
.video-thumb-thumtest {
  width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center;
  margin-left: auto; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.video-thumb-thumtest:hover, .video-thumb-thumtest:focus-visible {
  outline: 0; background: var(--accent-soft); color: var(--action);
}
.video-thumb-copy { min-width: 0; }
.calendar.is-pipeline .video-card .ttitle {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 12px; line-height: 1.3;
}
.calendar.is-pipeline .video-subline { display: flex; align-items: center; gap: 4px; }
.pipeline-quiet-week {
  align-self: flex-end; width: 26px; margin-left: -30px; border-bottom: 1px dashed var(--muted);
  opacity: .45; transform: translateY(4px);
}
.day-drop-preview {
  min-height: 36px; display: flex; align-items: center; padding: 7px 9px;
  border: 1px dashed var(--accent); border-radius: 8px; background: var(--accent-soft);
  color: var(--ink); font-size: 11px;
}
.crusher-day.day-drop-refused .day-stack {
  background: var(--danger-soft); outline: 1px dashed var(--down); outline-offset: 3px;
}
.pipeline-sheet {
  position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; align-items: flex-end;
  justify-content: center; padding: 16px 0 0; background: var(--overlay-strong);
}
.pipeline-sheet[hidden] { display: none; }
.pipeline-sheet-card {
  width: min(520px, 100%); display: grid; gap: 8px; padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  border: 1px solid var(--line); border-bottom: 0; border-radius: 15px 15px 0 0;
  background: var(--panel); box-shadow: 0 -8px 28px var(--shadow);
}
.pipeline-sheet-handle { width: 36px; height: 4px; margin: 0 auto 2px; border-radius: 3px; background: var(--line); }
.pipeline-sheet-card h2 { margin: 0 0 2px; font-size: 14px; }
.pipeline-sheet-date, .pipeline-sheet-card > button {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; text-align: left;
}
.pipeline-sheet-date input { min-width: 138px; border: 0; background: transparent; color: var(--ink); font: inherit; }
.pipeline-sheet-card > button { cursor: pointer; }
.pipeline-sheet-card > button:disabled { color: var(--muted); cursor: default; }

@media (max-width: 699px) {
  .pipeline-toolbar { gap: 6px; padding: 9px 10px 8px; }
  .pipeline-toggles { min-width: 0; flex: 1; gap: 4px; }
  .pipeline-toggle { min-width: 0; flex: 1 1 0; padding: 0 6px; font-size: 12px; white-space: nowrap; }
  .pipeline-toggle span { margin-left: 2px; padding: 1px 4px; }
  .pipeline-channels { margin-left: 0; display: flex; align-items: center; gap: 2px; height: 36px; }
  .pipeline-channel { width: 32px; height: 36px; }
  .pipeline-new-idea { flex-basis: 36px; width: 36px; height: 36px; }
  .pipeline-status { margin-left: 10px; margin-right: 10px; }
  .pipeline-panels { display: block; padding: 0 10px 5px; }
  .pipeline-panel { max-width: none; }
  .pipeline-panel-head {
    min-height: 28px; display: flex; justify-content: flex-end; padding: 4px 9px;
  }
  .pipeline-panel-head strong { display: none; }
  .pipeline-rows { max-height: 236px; }
  .pipeline-row { min-height: 59px; padding: 7px 9px; }
  .pipeline-row-thumb { width: 56px; height: 32px; flex-basis: 56px; }
  .calendar.is-pipeline .crusher-toolbar { margin-top: 2px; }
  .calendar.is-pipeline .video-card.is-thumb {
    min-height: 112px; flex-direction: row; align-items: center; gap: 10px; padding: 7px;
  }
  .calendar.is-pipeline .video-thumb-visual { width: 144px; flex: 0 0 144px; }
  .calendar.is-pipeline .video-thumb-picture { width: 144px; height: 81px; aspect-ratio: auto; }
  /* Explicit, not 100%: Safari sized the strip wider than the picture. */
  .calendar.is-pipeline .video-thumb-strip { width: 144px; box-sizing: border-box; }
  /* Keep SHOOT/POST, channel, LIVE and Thumbtest readable in the 144 px strip. */
  .calendar.is-pipeline .video-thumb-strip { gap: 3px; padding-inline: 3px; }
  .calendar.is-pipeline .video-kind-tag { padding-inline: 3px; }
  .calendar.is-pipeline .video-thumb-channel-meta { min-width: 18px; }
  .calendar.is-pipeline .video-thumb-channel-meta .channel-mark {
    width: 18px; height: 18px; flex-basis: 18px;
  }
  .calendar.is-pipeline .video-live-pill { height: 18px; padding-inline: 4px; font-size: 8.5px; }
  .calendar.is-pipeline .video-thumb-thumtest { width: 20px; height: 20px; flex-basis: 20px; }
  .calendar.is-pipeline .video-thumb-copy { flex: 1; }
  .calendar.is-pipeline .video-card .ttitle { font-size: 13px; }
}

/* Release A: a month of post dates fits below the hand-movable board. */
.pipeline-panel { max-width: none; }
.pipeline-rows { max-height: 170px; }
.calendar.is-pipeline .crusher-week { min-height: 92px; padding-bottom: 0; }
.calendar.is-pipeline .crusher-day { padding-inline: 5px; }
.calendar.is-pipeline .dayhead { padding: 4px 3px 5px; }
.calendar.is-pipeline .dayname { font-size: 10px; }
.calendar.is-pipeline .daynum { font-size: 12px; }
.calendar.is-pipeline .day-stack { gap: 3px; min-height: 54px; }
.calendar.is-pipeline .video-card.is-thumb.pipeline-month-chip {
  display: flex; flex-direction: row; align-items: center; gap: 5px;
  min-height: 35px; padding: 3px 4px; border: 1px solid var(--line);
  border-radius: 6px; border-left: 1px solid var(--line);
  background: var(--panel); cursor: pointer;
}
.calendar.is-pipeline .video-card.is-thumb.pipeline-month-chip:hover,
.calendar.is-pipeline .video-card.is-thumb.pipeline-month-chip:focus-visible {
  border-color: var(--accent); outline: none; background: var(--accent-soft);
}
.calendar.is-pipeline .pipeline-month-chip .video-thumb-picture {
  width: 48px; height: 27px; flex: 0 0 48px; aspect-ratio: auto;
  border-radius: 4px;
}
.calendar.is-pipeline .pipeline-month-chip .ttitle {
  min-width: 0; flex: 1; display: -webkit-box; overflow: hidden;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 10.5px; line-height: 1.2; font-weight: 600;
}
.calendar.is-pipeline .pipeline-month-chip .video-thumb-channel-meta {
  flex: 0 0 13px; min-width: 13px; width: 13px;
}
.calendar.is-pipeline .pipeline-month-chip .channel-mark {
  width: 12px; height: 12px; flex-basis: 12px;
}
.calendar.is-pipeline .is-empty-pipeline-day .day-stack { min-height: 32px; }
@media (max-width: 699px) {
  .calendar.is-pipeline .crusher-week {
    display: block; min-height: 0; padding: 0 10px 8px;
    border-top: 1px solid var(--line-soft);
  }
  .calendar.is-pipeline .crusher-day {
    display: block; padding: 5px 0; border: 0;
  }
  .calendar.is-pipeline .crusher-day.is-empty-pipeline-day { display: none; }
  .calendar.is-pipeline .crusher-weeks.weekends-collapsed .day-weekend {
    display: none;
  }
  .calendar.is-pipeline .dayhead { padding: 3px 4px; }
  .calendar.is-pipeline .day-stack { min-height: 0; }
  .calendar.is-pipeline .video-card.is-thumb.pipeline-month-chip {
    min-height: 44px; gap: 8px; padding: 5px;
  }
  .calendar.is-pipeline .pipeline-month-chip .video-thumb-picture {
    width: 64px; height: 36px; flex-basis: 64px;
  }
  .calendar.is-pipeline .pipeline-month-chip .ttitle { font-size: 12px; }
}

/* Batch 6D: durable card mentions and paper-trail links. */
.card-chip {
  --card-chip-color: var(--line); max-width: min(240px, 70vw); min-height: 22px;
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  margin: 0 2px; padding: 1px 6px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-chip-color) 70%, var(--line));
  border-radius: 999px; background: color-mix(in srgb, var(--card-chip-color) 8%, var(--panel));
  color: var(--ink); font-size: 11.5px; font-weight: 600; line-height: 18px;
  text-decoration: none !important; white-space: nowrap; cursor: pointer;
}
.card-chip:hover, .card-chip:focus-visible {
  border-color: var(--card-chip-color); outline: none;
  background: color-mix(in srgb, var(--card-chip-color) 13%, var(--panel));
}
.card-chip-dot {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%;
  background: var(--card-chip-color);
}
.card-chip-icon { flex: 0 0 auto; color: var(--muted); }
.card-chip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-chip-remove {
  width: 16px; height: 16px; flex: 0 0 16px; display: inline-grid; place-items: center;
  margin-right: -3px; border-radius: 50%; color: var(--muted); opacity: 0;
}
.card-chip:hover .card-chip-remove, .card-chip:focus-within .card-chip-remove,
.card-chip-remove:focus { opacity: 1; }
.card-chip-remove:hover { background: var(--danger-soft); color: var(--down); }

.card-mention-menu {
  position: fixed; z-index: var(--z-dialog); width: min(320px, calc(100vw - 16px));
  max-height: min(330px, 55vh); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 5px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: 0 12px 34px var(--shadow); color: var(--ink);
}
.card-mention-menu.is-phone-anchored { width: min(320px, calc(100vw - 16px)); }
.card-mention-option {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink); text-align: left; cursor: pointer;
}
.card-mention-option:hover, .card-mention-option.is-active {
  background: color-mix(in srgb, var(--action) 10%, var(--panel));
}
.card-mention-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.card-mention-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.card-mention-copy strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.card-mention-copy small { color: var(--muted); font-size: 10.5px; text-transform: capitalize; }
.card-mention-option.is-handle .card-mention-copy {
  display: block; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis;
  white-space: nowrap;
}
.card-mention-option.is-assistant { color: var(--action); }
.card-mention-divider { height: 1px; margin: 4px 7px; background: var(--line); }

.task-card .ttitle { flex: 1; }
.task-video-link-glyph {
  flex: 0 0 auto; min-height: 20px; display: inline-flex; align-items: center; gap: 3px;
  vertical-align: middle; margin-left: 2px;
  padding: 1px 5px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: var(--bg);
}
.task-video-link-glyph > span { width: 6px; height: 6px; border-radius: 50%; }
.task-video-link-glyph small { font-size: 9px; font-weight: 700; }

.task-linked-videos {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 7px 16px; border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.task-linked-label { margin-right: 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.linked-card-chip-shell { position: relative; display: inline-flex; align-items: center; }
.linked-card-chip-shell .card-chip { margin: 0; padding-right: 21px; }
.linked-card-remove {
  position: absolute; right: 3px; width: 17px; height: 17px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); cursor: pointer; opacity: 0;
}
.linked-card-chip-shell:hover .linked-card-remove, .linked-card-remove:focus-visible { opacity: 1; }
.linked-card-remove:hover { background: var(--danger-soft); color: var(--down); }

.video-related-list { display: flex; flex-direction: column; gap: 5px; }
.video-related-row {
  width: 100%; min-height: 46px; display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); text-align: left; cursor: pointer;
}
.video-related-row:hover, .video-related-row:focus-visible { border-color: var(--accent); outline: none; }
.video-related-status { color: var(--card-chip-color, var(--muted)); }
.video-related-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.video-related-copy strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.video-related-copy small { color: var(--muted); font-size: 10.5px; text-transform: capitalize; }
.video-related-row > .bs-icon:last-child { color: var(--muted); }

.day-quick-add {
  width: 100%; min-height: 38px; margin-top: 8px; padding: 4px 6px;
  border: 1px solid var(--action); border-radius: 8px; background: var(--panel);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 10%, transparent);
}
.quick-add-editor {
  min-height: 28px; padding: 3px 2px; outline: 0; color: var(--ink);
  font-size: 12.5px; line-height: 22px; overflow-wrap: anywhere;
}
.quick-add-editor:empty::before, .comment-composer:empty::before {
  content: attr(data-placeholder); color: var(--muted); pointer-events: none;
}
.day-quick-add.is-busy { opacity: .6; }

.task-comment-form .comment-composer {
  width: 100%; min-width: 0; min-height: 42px; padding: 3px 2px;
  border: 0; background: transparent; color: var(--ink); line-height: 20px;
  outline: none; overflow-wrap: anywhere;
}
.task-comment-form .comment-composer:focus { outline: none; }
.comment-composer[aria-disabled="true"] { opacity: .6; }

.comment-closed {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line);
  border-radius: 8px; background: var(--panel);
}
.comment-closed .bs-note { margin: 0; }

.bs-linkish {
  padding: 0; border: 0; background: none; color: var(--accent);
  font: inherit; text-align: left; text-decoration: underline; cursor: pointer;
}
.bs-linkish:disabled { opacity: .5; cursor: default; }

@media (max-width: 899px) {
  .card-chip-remove, .linked-card-remove { opacity: 1; }
  .card-mention-menu { max-height: 44vh; }
  .task-video-link-glyph { min-width: 28px; min-height: 28px; justify-content: center; }
}

@media (max-width: 480px) {
  .bs-wordmark { display: none; }
  /* Every nav destination has to be VISIBLE on a phone, not reachable by
     swiping a scroller with no affordance: Inbox and Library were being
     clipped off the right edge. Tighten the row until all five fit. */

  .bs-settings-link { font-size: 12px; }
  .bs-invite-row, .bs-pending-invite { align-items: stretch; flex-direction: column; }
  .bs-row-actions button { flex: 1; }
  .bs-welcome-main { margin-top: 3vh; }
  .settings-view { padding: 12px 14px 24px; }
  .settings-form-grid-two, .settings-form-grid-three, .settings-channel-grid,
  .settings-field-grid, .settings-rule-grid {
    grid-template-columns: 1fr;
  }
  .settings-heading-row, .settings-routing-link { align-items: stretch; flex-direction: column; }
  .settings-account-row { grid-template-columns: 1fr; }
  .settings-account-status { grid-column: 1; }
  .settings-account-controls { flex-direction: column; }
  .settings-perm-chips { justify-content: flex-start; }
  .settings-actions { flex-wrap: wrap; }
  .settings-actions > span { width: 100%; margin-right: 0; }
  .settings-status-list > div { grid-template-columns: 82px minmax(0, 1fr); }
  .settings-raw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .settings-raw-row > label, .settings-raw-row > input { grid-column: 1 / -1; }
  .inbox-heading span { display: none; }
  .inbox-row-top { gap: 5px; }
  .inbox-chip { max-width: 100%; }
  .inbox-detail-header { flex-direction: column; gap: 3px; }
  .inbox-detail-header time { padding-top: 0; }
  .inbox-verdict-row button { min-width: 82px; }
  .review-heading-copy span { display: none; }
  .review-back { padding-left: 7px; padding-right: 7px; }
  .review-composer-actions button { min-height: 40px; }
  .review-markup-tools { order: 2; flex: 1; }
  .review-markup-tools button { flex: 1; padding-left: 6px; padding-right: 6px; }
  .review-markup-colors { order: 3; width: 100%; justify-content: center; }
  .review-markup-actions { position: absolute; top: 8px; right: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .tcard, .day-stack, .shoot-copy-handle, .task-drag-ghost, .inbox-row,
  .inbox-list-pane, .inbox-detail-pane { transition: none; }
  html .review-note.is-highlighted, html .crusher-day.is-today-pulse,
  html .crusher-day.is-today-pulse .daynum.today-pill,
  html .task-card.is-crushing .check, html .task-card.is-crushing .check svg,
  html .tcard.done.is-crushing .ttitle::after,
  html .crushed-tasks-count.is-count-tick { animation: none; }
}

/* Task modal comments. */
.task-comments { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.task-comments-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 6px;
}
.task-comment { display: flex; gap: 10px; padding: 4px 0; border: 0; }
.task-comment + .task-comment { margin-top: 4px; }
.task-comment-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  font-size: 11px; color: var(--muted);
}
.task-comment-author { font-size: 12px; font-weight: 650; color: var(--ink); }
.task-comment-when { color: var(--muted); }
.task-comment-tag {
  padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--line-soft); color: var(--muted);
}
.task-comment-body { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Every comment is a bounded bubble, on the task drawer as well as the video
   one — the flat list with a hairline between entries is what made Seth's own
   words and the agent's read as one block (2026-09-01). */
.task-comment .task-comment-body {
  margin-top: 3px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 0 10px 10px 10px; background: var(--panel); font-size: 13.5px;
}
/* ...and colour says whose they are before you read the name. */
.task-comment.is-self .comment-avatar {
  background: var(--said-you-bg); color: var(--said-you-ink);
  box-shadow: inset 0 0 0 1px var(--said-you-line);
}
.task-comment.is-self .task-comment-author { color: var(--said-you-ink); }
.task-comment.is-self .task-comment-body {
  border-color: var(--said-you-line); background: var(--said-you-bg);
}
.task-comment.is-agent .comment-avatar {
  background: var(--said-agent-bg); color: var(--said-agent-ink);
  box-shadow: inset 0 0 0 1px var(--said-agent-line);
}
.task-comment.is-agent .task-comment-author { color: var(--said-agent-ink); }
.task-comment.is-agent .task-comment-tag {
  background: var(--said-agent-bg); color: var(--said-agent-ink);
}
.task-comment.is-agent .task-comment-body {
  border-color: var(--said-agent-line); background: var(--said-agent-bg);
}
.comment-attachments { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 6px; }
.comment-attachment-chip, .comment-image-attachment {
  color: var(--accent); font-size: 11px; text-decoration: none;
}
.comment-attachment-chip {
  padding: 4px 7px; border: 1px solid var(--accent-line); border-radius: 999px;
  background: var(--accent-soft);
}
.comment-image-attachment {
  display: inline-flex; flex-direction: column; gap: 3px; max-width: 220px;
  padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
}
.comment-image-attachment img {
  display: block; max-width: 100%; max-height: 160px; border-radius: 4px; object-fit: contain;
}
.comment-image-attachment span { padding: 0 2px 1px; overflow-wrap: anywhere; }
.task-comment-form {
  box-sizing: border-box; width: 100%; display: flex; flex-direction: column;
  gap: 7px; margin-top: 8px; padding: 10px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel);
}
.task-comment-form:focus-within { border-color: var(--accent); }
.task-comment-form.is-dragover {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.comment-pending-files {
  display: flex; width: 100%; flex-direction: column; gap: 6px;
}
.task-comment-form .comment-pending-chip {
  position: relative; min-width: 0; display: flex; align-items: center; gap: 7px;
  overflow: hidden; padding: 6px 7px 7px; border: 1px solid var(--action);
  border-radius: 9px; background: color-mix(in srgb, var(--action) 9%, var(--panel));
  color: var(--action); font-size: 11px; font-weight: 500;
}
.task-comment-form .comment-pending-chip[data-upload-state="failed"] {
  border-color: var(--down); color: var(--down);
  background: color-mix(in srgb, var(--down) 8%, var(--panel));
}
.task-comment-form .comment-pending-copy {
  min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px;
}
.task-comment-form .comment-pending-copy strong,
.task-comment-form .comment-pending-status {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-comment-form .comment-pending-copy strong { color: var(--ink); font-weight: 650; }
.task-comment-form .comment-pending-status { color: currentColor; }
.task-comment-form .comment-pending-action,
.task-comment-form .comment-pending-remove {
  position: relative; z-index: 1; flex: 0 0 auto; min-height: 26px; padding: 3px 6px;
  border: 0; border-radius: 6px; background: transparent; color: currentColor;
  font: inherit; font-weight: 700;
}
.task-comment-form .comment-pending-remove {
  width: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.task-comment-form .comment-pending-remove-text { width: auto; }
.comment-pending-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(to right, currentColor var(--comment-file-progress),
    transparent var(--comment-file-progress)); opacity: .7;
}
.task-comment-form input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel);
}
.task-comment-form input:focus { outline: none; border-color: var(--accent); }
.task-comment-form button { cursor: pointer; }
.task-comment-form button:disabled { opacity: .6; cursor: default; }
.comment-composer-row, .comment-composer-left, .comment-composer-right {
  min-width: 0; display: flex; align-items: center;
}
.comment-composer-row { width: 100%; justify-content: space-between; gap: 10px; }
.comment-composer-left { flex: 1; gap: 7px; }
.comment-composer-right { flex: 0 0 auto; gap: 7px; }
.task-comment-form .comment-round-button, .task-comment-form .comment-send-button {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; border-radius: 50%;
}
.task-comment-form .comment-round-button {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
}
.task-comment-form .comment-round-button:hover:not(:disabled) {
  border-color: var(--action); background: color-mix(in srgb, var(--action) 9%, var(--panel)); color: var(--action);
}
.task-comment-form .comment-send-button {
  position: relative;
  border: 1px solid var(--action); background: var(--action); color: var(--on-action);
  font-size: 22px; font-weight: 700; line-height: 1;
}
.task-comment-form .comment-send-arrow { position: relative; z-index: 1; }
.task-comment-form .comment-send-button.is-uploading {
  border-color: var(--line); color: var(--action);
  background: conic-gradient(var(--action) var(--comment-upload-progress),
    var(--line) var(--comment-upload-progress)); opacity: 1;
}
.task-comment-form .comment-send-button.is-uploading::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel);
}
.task-comment-form .comment-send-button:hover:not(:disabled) { background: var(--action-hover); }
.video-comments .task-comment + .task-comment { border-top: 0; }

/* Standalone public contact form. */
.public-form-page { min-height: 100vh; }
.public-form-header { justify-content: center; }
.public-form-main { max-width: 680px; margin: 5vh auto 0; }
.public-form-card { padding: 26px; gap: 10px; }
.public-form-card h1 { margin: 0; font-size: clamp(26px, 5vw, 36px); line-height: 1.15; }
.public-form-intro { margin: 0 0 8px; color: var(--muted); }
.form-deflections {
  margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--accent-line);
  border-radius: 8px; background: var(--accent-soft); color: var(--muted); font-size: 13px;
}
.form-deflections p { margin: 0; }
.form-deflections p + p { margin-top: 5px; }
.form-deflections strong { color: var(--ink); }
.public-contact-form { position: relative; gap: 7px; }
.form-fields { display: flex; flex-direction: column; gap: 7px; }
.public-contact-form label { margin-top: 5px; font-size: 13px; font-weight: 650; }
.public-contact-form select, .public-contact-form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit;
}
.public-contact-form select:focus, .public-contact-form textarea:focus {
  outline: none; border-color: var(--accent);
}
.public-contact-form input[type="file"] {
  padding: 9px; background: var(--bg); font-size: 13px;
}
.public-contact-form button:disabled { cursor: wait; opacity: .6; }
.form-optional { color: var(--muted); font-size: 12px; font-weight: 400; }
.form-honeypot {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important; white-space: nowrap !important;
}
.form-turnstile { min-height: 65px; margin-top: 8px; }
.form-error {
  padding: 9px 11px; border: 1px solid var(--danger-line); border-radius: 8px;
  background: var(--danger-soft);
}
.form-success { padding: 36px 12px; text-align: center; }
.form-success h2 { margin: 12px 0 0; font-size: 24px; line-height: 1.3; }
.form-success-mark {
  width: 46px; height: 46px; margin: 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 24px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .public-form-main { margin-top: 1vh; padding: 12px 14px 24px; }
  .public-form-card { padding: 20px 16px; }
}

/* YouTube-match proposals (one-time M2 confirmation). */
.proposals-list { max-height: 380px; overflow-y: auto; }
.proposal-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 7px 2px;
  border-top: 1px solid var(--line-soft); cursor: pointer;
}
.proposal-row input { margin-top: 3px; accent-color: var(--accent); }
.proposal-title { font-size: 13px; font-weight: 500; line-height: 1.35; }
.proposal-match { display: inline-flex; align-items: center; gap: 5px; }
.proposals-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.proposals-actions button {
  padding: 8px 14px; border: 0; border-radius: 8px; background: var(--action);
  color: var(--on-action); font-weight: 600; cursor: pointer;
}
.proposals-actions button:hover { background: var(--action-hover); }
.proposals-actions button:disabled { opacity: .6; cursor: default; }
.vimeo-review-label { margin-top: 16px; }
.proposals-actions .bs-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.proposals-actions .bs-button-secondary {
  border: 1px solid var(--action); background: color-mix(in srgb, var(--action) 9%, var(--panel)); color: var(--action);
}
.proposals-actions .bs-button-secondary:hover { background: color-mix(in srgb, var(--action) 18%, var(--panel)); }


/* Per-day quick add. */
.day-add {
  width: 100%; min-height: 34px; margin-top: 8px; padding: 5px 0;
  border: 1px dashed var(--line); border-radius: 8px;
  background: transparent; color: var(--muted); display: flex; align-items: center;
  justify-content: center; cursor: pointer; opacity: .5; transition: opacity .12s ease,
  border-color .12s ease, background-color .12s ease;
}
.crusher-day:hover .day-add, .day-add:focus-visible { opacity: 1; }
.day-add:hover { border-color: var(--action); color: var(--action); background: color-mix(in srgb, var(--action) 9%, var(--panel)); }
.crusher-weeks.weekends-collapsed .day-weekend .day-add { display: none; }

/* Pipeline sort control. */
.pipeline-sort {
  margin: -4px 24px 12px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted);
  font-size: 12px; align-self: flex-start;
}
@media (max-width: 899px) {
  .day-add { opacity: 1; }
}


/* Video thumbnails (live from YouTube when linked, 16:9 attachment otherwise). */
.phase-mini-thumb {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 7px; border: 1px solid var(--line-soft); background: var(--line-soft);
}


/* Attention: bell plus the count of open items waiting on you
   (docs/ATTENTION-SPEC.md). */
.bs-attention-wrap { position: relative; }
.bs-attention {
  position: relative; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.bs-attention:hover { color: var(--action); border-color: var(--action); }
.bs-attention-icon {
  position: relative; width: 22px; height: 22px; flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bs-attention-count {
  position: absolute; top: -4px; right: -7px; min-width: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--attn); color: #1c1c1a;
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.bs-attention-panel {
  position: absolute; top: 38px; right: 0; z-index: var(--z-popover); width: 330px; max-height: 420px;
  overflow-y: auto; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); box-shadow: 0 8px 28px var(--shadow);
}
.bs-attn-group {
  padding: 9px 12px 5px; color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.bs-attn-group.is-quiet { border-top: 1px solid var(--line-soft); }
.bs-attn-empty { padding: 14px 12px; }
.bs-attn-item {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  border-bottom: 1px solid var(--line-soft);
}
.bs-attn-item.is-ask .bs-attn-title::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: var(--attn); vertical-align: 1px;
}
.bs-attn-item.is-cleared { opacity: .55; }
.bs-attn-main {
  padding: 9px 0 9px 12px; border: 0; background: transparent; text-align: left;
  cursor: pointer; min-width: 0;
}
.bs-attn-main:hover { background: color-mix(in srgb, var(--action) 9%, var(--panel)); }
.bs-attn-title { font-size: 12.5px; font-weight: 600; }
.bs-attn-meta { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.bs-attn-expand {
  padding: 9px 10px; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12px;
}
.bs-attn-expand:hover { color: var(--action); }
.bs-attn-body {
  grid-column: 1 / -1; padding: 0 12px 10px; color: var(--muted);
  font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
}
.bs-attention-recent { padding-bottom: 6px; }
.bs-attn-recent-row {
  display: block; width: 100%; padding: 5px 12px; border: 0; background: transparent;
  text-align: left; color: var(--muted); font-size: 12px; cursor: pointer;
}
.bs-attn-recent-row:hover { color: var(--action); }
@media (max-width: 899px) {
  .bs-attention-panel {
    position: fixed; top: var(--header-h); left: 10px; right: 10px; width: auto;
    max-height: calc(100dvh - var(--header-h) - 10px);
  }
}


/* Mobile sheet fixes: iOS 100vh lies (URL bar), which pushed the close X off
   screen; dvh + a sticky close keep it reachable at any scroll position. */
@media (max-width: 899px) {
  .task-modal { padding: 0; align-items: flex-end; }
  .task-dialog {
    max-height: calc(100dvh - 10px);
    padding-top: 12px;
  }
  .task-modal-head {
    position: sticky; top: -12px; z-index: var(--z-sticky); margin: -2px -2px 0;
    padding: 4px 2px 6px; background: var(--panel);
  }
  .video-modal-head {
    position: sticky; top: 0; z-index: var(--z-sticky); padding-bottom: 8px;
    background: var(--panel); border-bottom: 1px solid var(--line-soft);
  }
  .task-modal-close {
    position: static; float: none; margin-left: auto; box-shadow: none;
  }
}

/* Additional Changes batch 4: compact card anatomy, rich text, and mobile Crusher. */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important; white-space: nowrap !important;
}
/* clip, NOT hidden: overflow-x hidden on html/body creates a scroll context
   that silently disables position:sticky (the header). clip just crops. */
html, body { max-width: 100%; overflow-x: clip; }

.task-dialog { width: min(680px, 100%); padding: 16px 18px 18px; }
.task-header-row { min-width: 0; gap: 7px; }
.task-title-field, .video-title-field { min-width: 120px; flex: 1; }
.task-title-field input, .task-date-field input {
  width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
}
.task-title-field input {
  padding: 7px 9px; border-color: var(--accent-line); background: var(--accent-soft);
  font-size: 17px; font-weight: 700;
}
.task-date-field {
  width: 148px; flex: 0 0 148px; display: flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 11px; font-weight: 650;
}
.task-date-field input { min-height: 34px; padding: 5px 7px; font-size: 12px; }
.task-title-field input:focus, .task-date-field input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.task-comments-jump, .task-description-toggle {
  padding: 0; border: 0; background: transparent; color: var(--action);
  font-size: 12px; font-weight: 650; cursor: pointer;
}
.task-comments-jump:hover, .task-description-toggle:hover { color: var(--action-hover); }
.task-description-shell.is-collapsed .rich-editor { max-height: 280px; overflow: hidden; }
.video-notes-shell.is-collapsed .rich-editor { max-height: 280px; overflow: hidden; }
.task-description-shell.is-collapsed::after {
  position: absolute; right: 0; bottom: 0; left: 0; height: 72px;
  background: linear-gradient(to bottom, transparent, var(--panel)); content: "";
  pointer-events: none;
}
.task-description-toggle { margin: 7px 2px 0; }
.video-notes-section { padding-top: 14px; }
.video-notes-toggle { align-self: flex-start; }
.video-notes-toggle:disabled { opacity: .45; cursor: default; }
.task-form { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.task-form > label { margin-top: 0; }

.video-dialog { width: min(860px, 100%); }
.video-modal-head { min-width: 0; padding: 12px 18px 10px; }
.video-title-input { padding: 7px 10px; font-size: 18px; }
.video-kind { flex: 0 0 auto; }
.video-section {
  gap: 7px; padding: 10px 18px; border-top: 1px solid var(--line-soft);
}
.video-meta-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
}
.video-meta-row label, .video-dates-row > label {
  min-width: 0; display: flex; flex-direction: column; gap: 4px;
  color: var(--muted); font-size: 11px; font-weight: 650;
}
.video-channel-control { position: relative; display: block; min-width: 0; }
.video-channel-control select { padding-left: 36px; }
.video-dates-row {
  display: grid; grid-template-columns: minmax(140px, .52fr) minmax(180px, 1fr);
  align-items: end; gap: 10px;
}
.video-field-label { margin-bottom: 4px; font-size: 11px; }
.shoot-date-chips { min-height: 36px; align-items: center; gap: 5px; }
.shoot-date-chip { padding-top: 3px; padding-bottom: 3px; font-size: 12px; }
#video-modal-error { margin: 10px 18px 0; }
.video-comments { margin-top: 10px; padding: 12px 18px 14px; }

.rich-editor-shell {
  overflow: hidden; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel);
}
.rich-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 5px;
  border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.rich-toolbar button {
  min-height: 28px; padding: 3px 7px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; color: var(--muted);
  font-size: 11px; cursor: pointer;
}
.rich-toolbar button:hover, .rich-toolbar button:focus-visible {
  outline: none; border-color: var(--line); background: var(--panel); color: var(--action);
}
.rich-color-control {
  margin: 0 0 0 auto !important; display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: 10.5px; font-weight: 600;
}
.rich-color-control select {
  width: auto !important; min-height: 28px; padding: 2px 22px 2px 6px !important;
  border-radius: 6px !important; font-size: 11px;
}
.rich-editor {
  min-height: 122px; padding: 9px 10px; outline: none; color: var(--ink);
  font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap;
}
.rich-editor:focus { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.rich-editor:empty::before { color: var(--muted); content: attr(data-placeholder); pointer-events: none; }
.rich-editor p, .rich-editor h1, .rich-editor h2, .rich-editor h3,
.rich-editor pre, .rich-editor ul, .rich-editor ol { margin: 0 0 7px; }
.rich-editor h1 { font-size: 1.5em; }
.rich-editor h2 { font-size: 1.3em; }
.rich-editor h3 { font-size: 1.12em; }
.rich-editor pre {
  overflow-x: auto; padding: 7px 8px; border-radius: 7px; background: var(--bg);
  white-space: pre-wrap;
}
.rich-editor :not(pre) > code {
  padding: 1px 4px; border-radius: 4px; background: var(--line-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
}
.rich-editor table { max-width: 100%; border-collapse: collapse; }
.rich-editor td, .rich-editor th { padding: 4px 6px; border: 1px solid var(--line); }

/* Notes are deliberately a light paper surface in every theme. Rules live on
   the editor only, so they stop cleanly above the in-sheet controls row. */
.paper-notes {
  position: relative; overflow: hidden; border: 1px solid rgba(85, 72, 50, .18);
  border-radius: 11px; background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 7px 20px rgba(35, 29, 20, .13), 0 1px 2px rgba(35, 29, 20, .12);
}
.paper-notes .rich-editor {
  min-height: 140px; padding: 0 14px 0 52px; color: var(--paper-ink);
  font-size: 14px; line-height: 28px;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent 35px, var(--paper-margin) 35px,
      var(--paper-margin) 36px, transparent 36px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px,
      var(--paper-rule) 27px, var(--paper-rule) 28px);
  background-attachment: local;
}
.paper-notes .rich-editor:focus {
  box-shadow: inset 0 0 0 2px var(--paper-focus);
}
.paper-notes .rich-editor:empty::before { color: var(--paper-pencil); }
.paper-notes .rich-editor::selection,
.paper-notes .rich-editor *::selection { background: rgba(213, 188, 126, .45); }
.paper-notes .rich-editor p, .paper-notes .rich-editor li,
.paper-notes .rich-editor h1, .paper-notes .rich-editor h2,
.paper-notes .rich-editor h3, .paper-notes .rich-editor pre {
  min-height: 28px; margin: 0; line-height: 28px;
}
.paper-notes .rich-editor ul, .paper-notes .rich-editor ol {
  margin: 0; padding-left: 22px;
}
.paper-notes .rich-editor h1 { font-size: 22px; }
.paper-notes .rich-editor h2 { font-size: 19px; }
.paper-notes .rich-editor h3 { font-size: 16px; }
.paper-notes .rich-editor a { color: var(--paper-link); }
.paper-notes .rich-editor [data-card-link] {
  border-color: rgba(104, 80, 42, .25); background: var(--paper-chip);
  color: #60492b;
}
.paper-notes .rich-editor pre {
  padding: 0 7px; border-radius: 6px; background: var(--paper-code);
  color: #443b2f;
}
.paper-notes .rich-code-editor {
  min-height: 140px; border: 0; border-radius: 0; background: var(--paper);
  color: var(--paper-ink); line-height: 28px;
}
.paper-notes .paper-notes-toolbar {
  min-height: 39px; display: flex; justify-content: flex-end; padding: 5px 7px;
  border-top: 1px solid rgba(85, 72, 50, .13); border-bottom: 0;
  background: var(--paper); color: var(--paper-ink);
}
.paper-notes .paper-notes-toolbar button {
  width: 28px; height: 28px; min-height: 28px; display: grid; place-items: center;
  padding: 0; color: #70685a;
}
.paper-notes .paper-notes-toolbar button:hover,
.paper-notes .paper-notes-toolbar button:focus-visible {
  border-color: rgba(85, 72, 50, .2); background: var(--paper-chip); color: #493b2c;
}
.paper-notes .rich-color-control {
  position: relative; width: 28px; height: 28px; flex: 0 0 28px;
  justify-content: center; margin: 0 !important; color: #70685a;
}
.paper-notes .rich-color-control select {
  position: absolute; inset: 0; width: 28px !important; height: 28px;
  min-height: 28px; padding: 0 !important; opacity: .001; cursor: pointer;
}
.paper-notes .rich-link-popover {
  border-color: rgba(85, 72, 50, .18); background: var(--paper);
  color: var(--paper-ink);
}
.task-description-shell.paper-notes.is-collapsed::after,
.paper-notes.is-collapsed::after {
  position: absolute; right: 0; bottom: 39px; left: 0; height: 72px;
  background: linear-gradient(to bottom, transparent, var(--paper-fade));
  content: ""; pointer-events: none;
}
@media (max-width: 430px) {
  .paper-notes .paper-notes-toolbar {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    height: 53px; min-height: 53px; max-height: 53px; padding: 4px 7px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .paper-notes .paper-notes-toolbar::-webkit-scrollbar { display: none; }
  .task-description-shell.paper-notes.is-collapsed::after,
  .paper-notes.is-collapsed::after { bottom: 53px; }
  .paper-notes .paper-notes-toolbar button,
  .paper-notes .rich-color-control {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px;
  }
  .paper-notes .rich-color-control select {
    width: 44px !important; height: 44px; min-height: 44px;
  }
}

.image-attachment-shell { position: relative; min-width: 0; margin: 0; }
.image-corner-button {
  position: absolute; top: 7px; z-index: var(--z-sticky); width: 28px; height: 28px; display: grid;
  place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--action); box-shadow: 0 2px 8px var(--shadow-soft);
  cursor: pointer; opacity: 0; transition: opacity .12s ease, background-color .12s ease;
}
.image-brush-button { left: 7px; }
.image-delete-button { right: 7px; color: var(--down); font-size: 20px; line-height: 1; }
.image-attachment-shell:hover .image-corner-button,
.image-corner-button:focus-visible { opacity: 1; }
.image-corner-button:hover { background: var(--bg); }
.comment-image-shell { max-width: 220px; }
.comment-image-shell .comment-image-attachment { max-width: 100%; }
.video-image-shell { width: min(220px, 100%); }
.video-image-attachment {
  display: flex; flex-direction: column; gap: 2px; overflow: hidden; padding: 4px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  font-size: 11px; text-decoration: none;
}
.video-image-attachment img {
  display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 5px;
  background: var(--line-soft); object-fit: cover;
}
.video-image-attachment > span { padding: 0 3px; overflow-wrap: anywhere; }
.review-note-markup-shell { width: min(320px, 100%); }
.upload-queue-pill {
  position: fixed; right: max(14px, env(safe-area-inset-right));
  top: max(14px, env(safe-area-inset-top)); bottom: auto; z-index: var(--z-toast);
  width: min(370px, calc(100% - 28px)); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 6px 9px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel);
  box-shadow: 0 8px 28px var(--shadow); color: var(--ink);
}
.video-spot {
  margin: 16px 0 24px; padding: 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); scroll-margin-top: 18px;
}
.video-spot[hidden], .video-spot [hidden], #video-legacy-controls[hidden],
.video-chat-file-choice[hidden] { display: none !important; }
#video-spot-content { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.video-spot-player { width: min(100%, 680px); aspect-ratio: 16/9; padding: 0;
  position: relative; border: 0; border-radius: 10px; overflow: hidden;
  background: #141414; color: #fff; cursor: pointer; }
.video-spot-player img { width: 100%; height: 100%; object-fit: cover; }
.video-spot-player span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 42px; text-shadow: 0 2px 12px #000; }
.video-spot-player .video-spot-variants { left: auto; right: 12px; top: 12px;
  transform: none; padding: 5px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .76); font-size: 12px; font-weight: 700; }
.thumbnail-normalization-note { position: absolute; left: 8px; bottom: 8px;
  padding: 4px 6px; border-radius: 5px; background: rgba(0,0,0,.78);
  color: white; font-size: 11px; }
.thumbnail-normalization-note button { color: inherit; border: 0; background: none;
  text-decoration: underline; cursor: pointer; font: inherit; }
.thumbnail-slot .thumbnail-normalization-note { bottom: 30px; }
.video-spot-line { display: flex; align-items: center; gap: 12px; width: 100%;
  position: relative; color: var(--muted); font-size: 13px; }
.video-spot-line > span { flex: 1; }
.video-spot-menu-button { display: grid; place-items: center; flex: 0 0 auto; }
.video-spot-menu { position: absolute; right: 0; top: 100%; z-index: 4;
  min-width: 180px; display: flex; flex-direction: column; padding: 5px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  box-shadow: 0 7px 20px var(--shadow); }
.video-spot-menu > * { text-align: left; padding: 9px; color: var(--ink);
  border: 0; background: none; text-decoration: none; cursor: pointer; }
.video-spot-primary { padding: 10px 15px; border: 0; border-radius: 9px;
  background: var(--action); color: #fff; font-weight: 650; cursor: pointer; }
.video-spot-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.video-spot-secondary { padding: 10px 15px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--ink);
  font-weight: 650; cursor: pointer; }
.video-spot-gap { display: block; border: 0; padding: 5px 0;
  color: var(--action); background: transparent; text-align: left; cursor: pointer; }
.video-spot-steps { display: grid; gap: 6px; }
.video-file-upload { width: 100%; }
.video-upload-choice { display: grid; gap: 12px; }
.video-upload-choice-heading strong { overflow-wrap: anywhere; font-size: 13px; }
.video-upload-choice label { display: flex; align-items: center; gap: 8px; }
.video-upload-choice input[type="text"] { min-width: 0; flex: 1; }
.video-chat-file-choice { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px;
  border: 1px solid var(--line); border-radius: 8px; }
.upload-queue-copy {
  grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.upload-queue-copy strong {
  min-width: 0; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap;
}
.upload-queue-copy span {
  min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.35;
  overflow-wrap: anywhere;
}
.upload-queue-pill progress {
  grid-column: 1; width: 100%; height: 6px; border: 0; border-radius: 999px;
  accent-color: var(--accent);
}
.upload-queue-card {
  grid-column: 1; color: var(--action); font-size: 11px; font-weight: 650;
  text-decoration: none;
}
.upload-queue-actions {
  grid-column: 2; grid-row: 1 / span 3; align-self: center; display: flex;
  flex-direction: column; align-items: stretch;
}
.upload-queue-actions button {
  padding: 4px 6px;
  border: 0; background: transparent; color: var(--action); font-size: 11px;
  font-weight: 650; cursor: pointer;
}
.bootstrap-reconnect, .settings-load-status {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink); font-size: 13px;
}
.bootstrap-reconnect { position: sticky; top: var(--header-h); z-index: var(--z-status); }
.bootstrap-reconnect button, .settings-load-status button { min-height: 34px; }
.settings-load-status {
  justify-content: space-between; margin-bottom: 12px; border: 1px solid var(--down);
  border-radius: 9px; background: var(--danger-soft); color: var(--down);
}
.video-upload-drop.is-busy { cursor: pointer; opacity: 1; }

@media (hover: none) {
  .image-corner-button { opacity: .92; }
}

@media (max-width: 899px) {
  .bs-wordmark { display: none; }
  .bs-brand { flex: 0 0 auto; }
  .bs-view-switcher {
    min-width: 0; min-height: 44px; flex: 1; gap: 4px; overflow-x: auto;
    padding: 0; background: transparent; scrollbar-width: none;
  }
  .bs-view-switcher::-webkit-scrollbar { display: none; }
  .bs-view-switcher a {
    min-height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center;
    padding: 0 8px; border-radius: 999px;
  }
  .bs-view-switcher a.is-current {
    background: var(--ink); color: var(--bg); box-shadow: none;
  }
  .bs-header-icon, .bs-attention, .bs-settings-link { flex: 0 0 32px; }
  .crusher-view, .crusher-toolbar, .crusher-weeks, .crusher-week, .crusher-day {
    min-width: 0; max-width: 100%;
  }
  .crusher-toolbar {
    position: sticky; top: var(--header-h); z-index: var(--z-sticky);
    overflow: hidden; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px);
  }
  .crusher-toolbar h1 { min-width: 0; overflow: hidden; font-size: 19px; text-overflow: ellipsis; }
  .crusher-week { max-width: 100%; padding-left: 12px; padding-right: 12px; }
  .crusher-weekends { padding-left: 8px; padding-right: 8px; }
  .crusher-day.is-today, .crusher-day.is-today .dayhead {
    scroll-margin-top: calc(142px + env(safe-area-inset-top));
  }
  .task-dialog { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
  .task-header-row { top: -12px; flex-wrap: wrap; padding: 7px 0 8px; }
  .task-header-row .modal-primary-controls { flex: 0 0 auto; }
  .task-title-field { order: 5; flex: 1 1 calc(100% - 156px); }
  .task-date-field { order: 5; width: 142px; flex: 0 0 142px; }
  .video-modal-head { padding: 9px 14px; gap: 6px; }
  .video-kind { display: none; }
  .video-header-row .modal-saved { display: none; }
  .video-title-input { padding: 7px 8px; font-size: 16px; }
  .video-section { padding: 9px 14px; }
  .video-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-dates-row { grid-template-columns: 1fr; align-items: end; }
  .video-post-date-field { grid-column: 1; grid-row: 1; }
  .video-shoot-field { grid-column: 1; grid-row: 2; }
  .video-phase-section { align-items: flex-start; flex-direction: column; }
  .rich-color-control { width: 100%; margin-left: 0 !important; }
  .rich-color-control select { flex: 1; }
  .video-comments { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 430px) {
  .bs-brand-mark { width: 21px; height: 21px; }
  .bs-header-icon { display: none; }
  .task-header-row .modal-complete-label { display: none; }
  .task-title-field { flex-basis: calc(100% - 140px); }
  .task-date-field { width: 126px; flex-basis: 126px; }
  .video-header-row .modal-complete-label { display: none; }
  .video-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-meta-row label:last-child { grid-column: 1 / -1; }
  .video-dates-row { grid-template-columns: 1fr; }
  .video-post-date-field, .video-shoot-field { grid-column: 1; grid-row: auto; }
}

/* Additional Changes batch 5: full-height card drawers and consistent controls. */
.icon-btn,
.modal-primary-controls .icon-btn {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--muted); line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:hover,
.modal-primary-controls .icon-btn:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--action) 10%, var(--panel)); color: var(--action);
}
.icon-btn:focus-visible,
.modal-primary-controls .icon-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}
.icon-btn:disabled { opacity: .5; cursor: default; }
.modal-trash:hover { background: var(--danger-soft) !important; color: var(--down) !important; }
.modal-complete { gap: 0; font-size: inherit; font-weight: inherit; }
.modal-complete .complete-circle-shape {
  fill: transparent; stroke: currentColor; transition: fill .12s ease, stroke .12s ease;
}
.modal-complete .complete-check { opacity: 0; }
.modal-complete.is-complete { background: var(--accent-soft); color: var(--accent); }
.modal-complete.is-complete .complete-circle-shape { fill: var(--accent); stroke: var(--accent); }
.modal-complete.is-complete .complete-check { opacity: 1; stroke: var(--on-action); }
.card-drawer-back { display: none; }
.card-drawer .card-drawer-back { display: inline-flex; }
.card-drawer-back > span:not([data-icon]) { display: none; }

.card-drawer-layer,
.task-modal.card-drawer-layer,
.video-modal.card-drawer-layer {
  position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; justify-content: flex-end;
  align-items: stretch; padding: 0; background: var(--overlay-strong);
  opacity: 0; transition: opacity 200ms ease;
}
.card-drawer-layer.is-open { opacity: 1; }
.card-drawer,
.task-dialog.card-drawer,
.video-dialog.card-drawer {
  width: min(620px, calc(100vw - 40px)); height: 100vh; height: 100dvh;
  max-height: none; margin: 0; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; background: var(--panel); box-shadow: -18px 0 55px var(--shadow);
  transform: translateX(100%); transition: transform 200ms ease;
}
.card-drawer-layer.is-open .card-drawer { transform: translateX(0); }
.card-drawer-layer.is-closing .card-drawer { transform: translateX(100%); }
.card-drawer-content {
  min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; overflow-anchor: none; -webkit-overflow-scrolling: touch;
}
.card-drawer .task-modal-head,
.card-drawer .video-modal-head {
  position: sticky; top: 0; z-index: var(--z-sticky); flex: 0 0 auto; margin: 0;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(14px);
}
.card-drawer .video-title-field { min-width: 0; flex: 1 1 auto; }
.card-drawer .video-card-menu-wrap { flex: 0 0 auto; }
.card-drawer .task-form { margin: 0; padding: 16px; border-top: 0; }
.card-drawer .task-comments { padding: 0 16px 20px; }
.card-drawer .video-section { padding-left: 16px; padding-right: 16px; }
.card-drawer .video-comments { padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); }
.card-drawer .task-modal-error { margin-left: 0; margin-right: 0; }

.rich-editor-shell { position: relative; }
.rich-toolbar button {
  width: 30px; height: 30px; min-height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.rich-toolbar button[aria-pressed="true"] {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.rich-color-control {
  position: relative; width: 30px; height: 30px; margin-left: auto !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.rich-color-control:hover { border-color: var(--line); background: var(--panel); color: var(--action); }
.rich-color-control select {
  position: absolute; inset: 0; width: 100% !important; height: 100%; padding: 0 !important;
  opacity: .01; cursor: pointer;
}
.rich-code-editor {
  width: 100%; min-height: 180px; padding: 10px; resize: vertical; border: 0;
  outline: none; background: var(--panel); color: var(--ink);
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
}
.rich-code-editor:focus { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.rich-link-popover {
  position: absolute; top: 43px; right: 7px; z-index: var(--z-sticky); display: flex; align-items: center;
  gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); box-shadow: 0 7px 22px var(--shadow-soft); font-size: 11px;
}
.rich-link-popover a, .rich-link-popover button {
  min-height: 27px; padding: 3px 7px; border: 0; border-radius: 5px;
  background: transparent; color: var(--action); text-decoration: none; cursor: pointer;
}
.rich-link-popover a:hover, .rich-link-popover button:hover { background: var(--line-soft); }
.rich-editor a { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.settings-user-modal {
  position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: 20px;
  background: var(--overlay-strong);
}
.settings-user-dialog {
  width: min(540px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  box-shadow: 0 20px 65px var(--shadow);
}
.settings-user-head, .settings-user-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.settings-user-head h2 { margin: 1px 0 0; font-size: 19px; }
.settings-user-body { display: flex; flex-direction: column; gap: 13px; padding: 16px; }
.settings-user-name { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 650; }
.settings-user-name input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
}
.settings-user-name input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-user-actions { justify-content: flex-end; border-top: 1px solid var(--line-soft); border-bottom: 0; }
.settings-user-actions button { min-height: 36px; padding: 6px 11px; border-radius: 8px; cursor: pointer; }
.settings-account-details > strong { display: block; font-size: 13.5px; }
.settings-account-controls { align-items: center; }
.settings-account-state {
  padding: 3px 7px; border-radius: 999px; background: var(--ok-soft); color: var(--ok);
  font-size: 11px; font-weight: 650;
}
.settings-account-state.is-inactive { background: var(--line-soft); color: var(--muted); }
.settings-account-edit {
  min-height: 32px; padding: 4px 10px; border-radius: 7px; cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 899px) {
  .card-drawer-layer,
  .task-modal.card-drawer-layer,
  .video-modal.card-drawer-layer { background: var(--panel); }
  .card-drawer,
  .task-dialog.card-drawer,
  .video-dialog.card-drawer {
    width: 100%; height: 100vh; height: 100dvh; max-height: none; padding: 0;
    border: 0; box-shadow: none;
  }
  .card-drawer-back { display: inline-flex; }
  .card-drawer-close { display: none !important; }
  .card-drawer .task-modal-head,
  .card-drawer .video-modal-head {
    min-height: var(--header-h); top: 0; flex-wrap: wrap;
    padding: calc(10px + env(safe-area-inset-top)) 12px 9px;
  }
  .card-drawer .modal-primary-controls { margin-left: auto; }
  .card-drawer .task-title-field { order: 5; flex: 1 1 100%; }
  .card-drawer .task-title-field { flex-basis: calc(100% - 148px); }
  .card-drawer .task-date-field { order: 5; }
  .card-drawer .task-form { padding: 14px; }
  .card-drawer .task-comments { padding: 0 14px calc(18px + env(safe-area-inset-bottom)); }
  .rich-color-control { width: 30px; margin-left: auto !important; }
  .rich-color-control select { flex: none; }
  .settings-user-modal { padding: 0; }
  .settings-user-dialog { width: 100%; max-height: 100dvh; border: 0; border-radius: 0; }
}

@media (max-width: 559px) {
  .card-drawer .video-title-field { order: 5; flex: 1 1 100%; }
  .card-drawer .video-card-menu-wrap { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .card-drawer-layer, .card-drawer { transition-duration: 0s !important; }
}

/* Card chat: a bounded transcript with a composer that stays in reach. */
.card-drawer .card-chat {
  position: relative; box-sizing: border-box; height: 420px; min-height: 420px; margin-top: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); overflow: hidden;
  display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line);
  background: var(--bg);
}
.card-chat-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.card-chat-head .task-comments-label, .card-chat-head .bs-label { margin: 0; flex: 1; }
.chat-search {
  width: 132px; min-height: 30px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel); color: var(--ink); font-size: 12px;
}
.chat-search:focus { outline: none; border-color: var(--accent); }
.card-chat-transcript {
  min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 3px 8px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.chat-older, .chat-new {
  align-self: center; flex: 0 0 auto; padding: 4px 9px; border: 0;
  background: transparent; color: var(--action); font-size: 11px; cursor: pointer;
}
.chat-new { position: absolute; align-self: flex-end; margin-top: 42px; z-index: 2;
  border: 1px solid var(--accent-line); border-radius: 999px; background: var(--panel); }
.chat-status {
  flex: 0 0 auto; min-height: 20px; padding: 2px 8px; color: var(--muted);
  font-size: 11px; line-height: 16px;
}
.chat-status.is-running::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--accent); animation: chat-pulse 1s ease-in-out infinite;
}
@keyframes chat-pulse { 50% { opacity: .25; transform: scale(.75); } }
.card-chat .task-comment-form {
  flex: 0 0 auto; margin: 0;
}
.card-chat .comment-composer {
  min-height: 42px; max-height: 112px; overflow-y: auto; white-space: pre-wrap;
}
/* Desktop: the chat fills whatever height the notes leave, never less than 420px. A fixed
   420px box left a short transcript over a large empty area in tall windows (Seth, 2026-10-09).
   Phones keep their own sizing below. */
@media (min-width: 481px) {
  .task-dialog .card-drawer-content { display: flex; flex-direction: column; }
  .task-dialog .card-drawer-content > * { flex: 0 0 auto; }
  .task-dialog .card-drawer-content > .card-chat { flex: 1 0 420px; height: auto; min-height: 420px; }
}
.chat-assistant-chip {
  position: relative; min-width: 0; max-width: 150px; flex: 0 1 auto; min-height: 34px;
  padding: 4px 10px; overflow: hidden; color: var(--ink); background: var(--bg);
  font-size: 12px; font-weight: 650; cursor: pointer;
}
.chat-assistant-text {
  min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-assistant-chip select {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; border: 0; opacity: 0; background: none; cursor: pointer;
}
.chatgpt-author-mark {
  display: inline-flex; align-items: center; color: var(--said-agent-ink);
}
.chat-bubble { display: flex; max-width: 86%; margin: 6px 0; }
.chat-bubble.is-mine { margin-left: auto; flex-direction: row-reverse; }
.chat-bubble.is-claude, .chat-bubble.is-other { margin-right: auto; }
.chat-bubble .comment-avatar { display: none; }
.chat-bubble .comment-content { max-width: 100%; }
.chat-bubble.is-mine .task-comment-meta { justify-content: flex-end; }
.chat-bubble.is-mine .task-comment-body {
  border-radius: 10px 0 10px 10px; border-color: var(--said-you-line);
  background: var(--said-you-bg);
}
.chat-bubble.is-claude .task-comment-body {
  border-color: var(--said-agent-line); background: var(--said-agent-bg);
}
.chat-author { font-weight: 650; color: var(--ink); }
.chat-imported {
  padding: 1px 5px; border-radius: 999px; background: var(--line-soft);
  color: var(--muted); font-size: 9px; text-transform: uppercase;
}
.chat-bubble.is-mine .task-comment-author { color: var(--said-you-ink); }
.chat-bubble.is-claude .task-comment-author { color: var(--said-agent-ink); }
.chat-bubble.is-hal { margin-right: auto; }
.chat-bubble.is-hal .task-comment-body {
  border-color: var(--said-hal-line); background: var(--said-hal-bg);
}
.chat-bubble.is-hal .task-comment-author { color: var(--said-hal-ink); }
.chat-bubble.is-wally { margin-right: auto; }
.chat-bubble.is-wally .comment-avatar {
  display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px;
  border-radius: 50%; background: #59468d; color: #fff;
}
.chat-bubble.is-wally .task-comment-body {
  border-color: #9c85d3; background: color-mix(in srgb, #8063bf 12%, var(--panel));
}
.chat-bubble.is-wally .task-comment-author { color: #59468d; }
.wally-author-mark {
  padding: 1px 5px; border-radius: 999px; background: #ece6fa;
  color: #59468d; font-size: 9px; font-weight: 700;
}
.hal-author-mark {
  display: inline-grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: #176353; color: white;
  font-size: 11px; font-weight: 700;
}
.card-copy-link { flex: 0 0 auto; }

@media (max-width: 480px) {
  .card-drawer .card-chat {
    width: 100%; height: min(360px, var(--chat-available-height, 360px));
    min-height: min(280px, var(--chat-available-height, 360px));
    padding-left: 12px; padding-right: 12px;
  }
  .chat-search { width: 148px; max-width: 48vw; flex: 0 1 148px; }
  .chat-bubble { max-width: 92%; }
  .card-chat .task-comment-form { gap: 6px; padding: 9px; }
  .card-chat .comment-composer { min-height: 44px; }
  .task-comment-form .comment-round-button, .task-comment-form .comment-send-button {
    width: 45px; height: 45px; min-width: 45px; min-height: 45px;
    flex: 0 0 45px;
  }
  .chat-assistant-chip { min-height: 44px; max-width: 116px; padding-left: 9px; padding-right: 9px; }
  .comment-composer-row { gap: 7px; }
  .comment-composer-left, .comment-composer-right { gap: 6px; }
}

@media (max-width: 430px) {
  .card-drawer .card-chat {
    height: calc(100vh - var(--drawer-head-h, 50px));
    height: calc(100dvh - var(--drawer-head-h, 50px));
    min-height: calc(100vh - var(--drawer-head-h, 50px));
    min-height: calc(100dvh - var(--drawer-head-h, 50px));
    padding-bottom: 0; overflow: visible;
  }
  .card-chat-transcript { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
  .card-chat .task-comment-form {
    position: -webkit-sticky; position: sticky;
    bottom: env(safe-area-inset-bottom); z-index: var(--z-sticky);
    box-shadow: 0 -10px 22px var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-chat-transcript { scroll-behavior: auto; }
  .chat-status.is-running::before { animation: none; }
}

/* Batch 6B: Library, contained overlays, notification state, and mobile reach. */
.bs-icon { display: block; flex: 0 0 auto; color: currentColor; }
.pipeline-phase-heading {
  display: flex; align-items: center; gap: 10px; margin-right: 24px;
}
.pipeline-phase-heading .phase-tabs { margin-right: 0; }
.pipeline-new-idea {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--action); border-radius: 8px;
  background: var(--action); color: var(--on-action); font-size: 12.5px;
  font-weight: 650; cursor: pointer;
}
.library-view {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px;
}
.library-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.library-heading h1 { margin: 2px 0 0; font-size: 25px; line-height: 1.2; }
.library-result-count { color: var(--muted); font-size: 12px; font-weight: 650; }
.library-migration-chip {
  margin-left: auto; padding: 4px 9px; border: 1px solid var(--accent-line);
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 650;
}
.library-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(7, minmax(104px, 140px)) auto;
  gap: 9px; margin-bottom: 15px;
}
.library-controls > label:not(.library-search) {
  display: flex; flex-direction: column; gap: 3px; color: var(--muted);
  font-size: 11px; font-weight: 650;
}
.library-controls select, .library-search {
  min-height: 44px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink);
}
.library-select { position: relative; display: block; min-width: 0; }
.library-select select {
  width: 100%; min-height: 44px; padding: 7px 34px 7px 10px;
  appearance: none; -webkit-appearance: none; outline: 0;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink); cursor: pointer;
}
.library-select select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.library-select-icon {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  display: grid; place-items: center; color: var(--muted); pointer-events: none;
}
.library-source-facet { opacity: .88; }
.library-density {
  min-width: 44px; min-height: 44px; align-self: end; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  color: var(--action); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.library-density:hover, .library-density:focus-visible {
  border-color: var(--action); outline: none;
}
.library-search {
  display: flex; align-items: center; gap: 8px; padding: 0 11px;
}
.library-search input {
  min-width: 0; width: 100%; padding: 0; border: 0; outline: 0;
  background: transparent; color: var(--ink);
}
.library-search:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.library-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--muted); font-size: 13px;
}
.library-status.is-error { border-color: var(--danger-line); color: var(--down); }
.library-status button { min-height: 32px; cursor: pointer; }
.library-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.library-grid.is-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.library-grid.is-compact .library-card { padding: 7px; }
.library-grid.is-compact .library-card-play { gap: 4px; }
.library-grid.is-compact .library-card-play > strong { font-size: 12.5px; }
.library-grid.is-compact .library-card-name { display: none; }
.library-card {
  position: relative; min-width: 0; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.library-card:hover, .library-card:focus-within {
  border-color: var(--action); outline: none;
}
.library-card-play {
  width: 100%; min-width: 0; display: flex; flex-direction: column;
  align-items: stretch; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.library-card-play:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.library-card-frame {
  width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  border-radius: 7px; background: var(--video-stage); color: var(--on-action);
}
.library-card-play > strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; }
.library-card-name, .library-card-meta {
  overflow: hidden; color: var(--muted); font-size: 11.5px;
  text-overflow: ellipsis; white-space: nowrap;
}
.library-empty {
  grid-column: 1 / -1; padding: 56px 18px; border: 1px dashed var(--line);
  border-radius: 10px; color: var(--muted); text-align: center;
}
.library-player-head {
  min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft); background: var(--panel);
}
.library-player-head > div { min-width: 0; flex: 1; }
.library-player-head h2 {
  overflow: hidden; margin: 2px 0 0; font-size: 18px; line-height: 1.3;
  text-overflow: ellipsis; white-space: nowrap;
}
.library-player-head .icon-btn { min-width: 44px; min-height: 44px; }
.library-player-content { padding: 16px; }
.library-player-content video {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px;
  background: var(--video-stage); object-fit: contain;
}
.library-playback-toolbar {
  min-height: 34px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
.library-quality-indicator {
  padding: 3px 8px; border: 1px solid var(--accent-line); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700;
}
.library-playback-toolbar button {
  min-height: 44px; padding: 7px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--action);
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.library-playback-toolbar button:hover { border-color: var(--action); }
.library-player-error { margin-top: 10px; color: var(--down); }
.caption-control {
  min-width: 34px; height: 26px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 5px; border: 1.5px solid currentColor;
  border-radius: 6px; background: var(--panel); color: var(--muted);
  font: inherit; font-size: 10px; font-weight: 850; letter-spacing: -.04em;
  line-height: 1; cursor: pointer;
}
.caption-control.caption-state-none { border-color: var(--line); color: var(--muted); }
.caption-control.caption-state-generating {
  border-color: var(--accent); color: var(--accent); animation: caption-pulse 1.35s ease-in-out infinite;
}
.caption-control.caption-state-local { border-color: var(--action); color: var(--action); }
.caption-control.caption-state-youtube {
  border-color: var(--ok); background: var(--ok); color: #fff;
}
.caption-control.caption-state-failed {
  border-color: var(--down); background: var(--danger-soft); color: var(--down);
}
.caption-control:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.video-cut .caption-control { min-width: 0; gap: 6px; padding: 0 9px; letter-spacing: 0; }
.video-cut .caption-control-label { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.library-card > .caption-control { position: absolute; z-index: 2; top: 16px; right: 16px; }
@keyframes caption-pulse { 50% { opacity: .42; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .caption-control.caption-state-generating { animation: none; }
}
.library-caption-panel {
  margin-top: 14px; padding: 12px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel);
}
.library-caption-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.library-caption-head h3 { margin: 0; font-size: 14px; }
.library-caption-head .caption-control { cursor: default; }
.library-caption-panel p { margin: 8px 0; color: var(--muted); font-size: 12.5px; }
.library-caption-rulings { margin-top: 12px; }
.library-caption-rulings h4 { margin: 0 0 7px; font-size: 12px; }
.caption-ruling {
  padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 12px;
}
.caption-ruling-heading {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px;
}
.caption-ruling-heading span, .caption-ruling-status { color: var(--muted); }
.caption-ruling-reading { margin: 3px 0; overflow-wrap: anywhere; }
.caption-ruling-actions, .caption-ruling-relocate {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.caption-ruling-actions button, .caption-ruling-actions input,
.caption-ruling-relocate input, .caption-ruling-relocate select {
  min-height: 32px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg); color: var(--ink); font: inherit;
}
.caption-ruling-actions button { color: var(--action); cursor: pointer; }
.caption-ruling-actions input, .caption-ruling-relocate input { min-width: 140px; flex: 1 1 140px; }
.caption-ruling-relocate select { max-width: 100%; flex: 1 1 220px; }
.caption-ruling-status { min-height: 16px; margin-top: 6px; }
.inline-caption-rulings { flex: 1 0 100%; width: 100%; }
.library-caption-editor-box {
  overflow: hidden; margin-top: 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg);
}
.library-caption-editor { display: flex; flex-direction: column; gap: 5px; padding: 9px; }
.library-caption-editor > span { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.library-caption-editor textarea {
  width: 100%; min-height: 180px; padding: 9px; resize: vertical;
  border: 0; border-radius: 7px; background: var(--panel);
  color: var(--ink); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.library-caption-actions {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 7px 9px;
  border-top: 1px solid var(--line-soft); background: var(--panel);
}
.library-caption-editor[hidden] + .library-caption-actions { border-top: 0; }
.library-caption-actions button, .library-caption-actions a,
.video-cut-caption-details button, .video-cut-caption-details a,
.library-variant-caption-details button, .library-variant-caption-details a {
  min-height: 32px; display: inline-flex; align-items: center; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--action); font: inherit; font-size: 11.5px; font-weight: 650;
  text-decoration: none; cursor: pointer;
}
.library-caption-actions button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 430px) {
  .library-caption-actions button, .library-caption-actions a,
  .inline-caption-actions button, .inline-caption-actions a { min-height: 44px; }
}

/* One owner queue for caption rulings, glossary holds, and delivery holds. */
.captions-view {
  width: min(1120px, 100%); margin: 0 auto; padding: 24px;
}
.captions-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.captions-heading h1 { margin: 2px 0 0; font-size: 28px; }
.captions-total {
  padding: 5px 10px; border: 1px solid var(--accent-line); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 750;
}
.captions-status {
  margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--muted); font-size: 13px;
}
.captions-status.is-error { color: var(--down); }
.captions-section {
  margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel);
}
.captions-section > header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.captions-section h2 { margin: 0; font-size: 16px; }
.captions-section h2 span { color: var(--muted); font: inherit; }
.captions-section header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.captions-section > header > span {
  min-width: 28px; padding: 3px 8px; border-radius: 999px; background: var(--line-soft);
  color: var(--muted); font-size: 12px; font-weight: 750; text-align: center;
}
.captions-settled > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; cursor: pointer; font-size: 14px; font-weight: 750;
}
.captions-settled > summary > span:last-child {
  min-width: 28px; padding: 3px 8px; border-radius: 999px; background: var(--line-soft);
  color: var(--muted); font-size: 12px; text-align: center;
}
.captions-settled[open] > summary { border-bottom: 1px solid var(--line-soft); }
.captions-list { display: flex; flex-direction: column; }
.captions-item {
  /* The actions column may take at most 60% of the row, so a long hint or a
     cue picker never squeezes the heard/suggested copy into a sliver. */
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) fit-content(60%);
  align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.captions-item:last-child { border-bottom: 0; }
.captions-item-copy { min-width: 0; }
.captions-item-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin-bottom: 5px; overflow-wrap: anywhere;
}
.captions-item-title strong { font-size: 14px; }
.captions-item-meta, .captions-item-note, .captions-item-status {
  color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere;
}
.captions-item-note { margin-top: 5px; color: var(--ink); }
.captions-item-status { min-height: 17px; margin-top: 5px; }
.captions-item-status:empty { display: none; }
.captions-reload {
  margin-left: 4px; padding: 1px 5px; border: 0; background: transparent;
  color: var(--action); font: inherit; font-weight: 700; cursor: pointer;
}
.captions-actions {
  min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px;
}
.captions-actions button, .captions-actions a, .captions-correct > input,
.captions-correct > button,
.captions-note-editor textarea {
  min-height: 36px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit;
  font-size: 12px;
}
.captions-actions button, .captions-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer;
}
.captions-actions .captions-secondary-action { color: var(--ink); }
.captions-actions .captions-primary-action, .captions-correct .captions-primary-action {
  border-color: var(--action); background: var(--action); color: var(--on-action);
}
.captions-action-hint {
  /* width: 0 + min-width: 100% keeps the hint's long text out of the column's
     intrinsic width while it still fills the actions row. */
  flex: 1 0 100%; width: 0; min-width: 100%; color: var(--muted); font-size: 11px; line-height: 1.35;
  text-align: right;
}
.captions-actions button:disabled { opacity: .55; cursor: wait; }
.captions-correct, .captions-note-editor {
  grid-column: 1 / -1; display: flex; gap: 7px; margin-top: 8px;
}
.captions-correct > input, .captions-note-editor textarea { min-width: 0; flex: 1; }
.captions-span-field { min-width: 0; flex: 1 1 180px; }
.captions-span-field > span {
  display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px;
  font-weight: 700;
}
.caption-ruling-relocate .captions-span-field input { width: 100%; min-width: 0; }
.captions-cue-picker {
  position: relative; min-width: 0; flex: 1 1 220px;
}
.captions-cue-value {
  min-height: 36px; display: block; overflow: hidden; padding: 7px 30px 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); text-overflow: ellipsis; white-space: nowrap;
}
.captions-cue-picker:focus-within .captions-cue-value {
  outline: 2px solid var(--action); outline-offset: 1px;
}
.captions-cue-picker::after {
  content: "⌄"; position: absolute; top: 50%; right: 10px; pointer-events: none;
  color: var(--ink); font-size: 16px; line-height: 1; transform: translateY(-56%);
}
.captions-ruling-item .caption-ruling-cue {
  position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; opacity: 0;
  cursor: pointer;
}
.captions-teach-choice {
  display: inline-flex; align-items: center; padding: 0 4px; color: var(--ink);
  font-size: 12px;
}
.captions-teach-choice input { min-height: 0; flex: none; }
.captions-note-editor textarea { min-height: 64px; resize: vertical; }
.captions-empty { margin: 0; padding: 22px 16px; color: var(--muted); text-align: center; }
.captions-show-more {
  min-height: 44px; margin: 10px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--action); font: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer;
}

@media (max-width: 600px) {
  .captions-view { padding: 9px 12px calc(24px + env(safe-area-inset-bottom)); }
  .captions-heading { align-items: center; margin-bottom: 9px; }
  .captions-heading h1 { font-size: 24px; }
  .captions-section > header { padding: 10px 13px; }
  .captions-item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 13px; }
  .captions-item-title { margin-bottom: 2px; }
  .captions-item-note { margin-top: 3px; }
  .captions-actions { width: 100%; justify-content: flex-start; }
  .captions-action-hint { text-align: center; }
  .captions-ruling-item .caption-ruling-relocate { margin-top: 2px; }
  .captions-ruling-item .captions-cue-picker { flex-basis: 100%; }
  .captions-actions button, .captions-actions a { min-height: 44px; flex: 1 1 auto; }
  .captions-correct, .captions-note-editor { flex-wrap: wrap; }
  .captions-correct > input, .captions-note-editor textarea {
    flex-basis: 100%; min-height: 44px;
  }
}
.library-watch-button {
  width: 100%; min-height: 180px; aspect-ratio: 16 / 9; display: flex;
  align-items: center; justify-content: center; gap: 9px; padding: 16px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--video-stage);
  color: var(--on-action); font-size: 15px; font-weight: 700; text-decoration: none;
}
.library-watch-button:hover { color: var(--on-action); border-color: var(--accent); }
.library-watch-button.is-disabled { color: var(--muted); cursor: default; }
.library-player-meta { margin: 16px 0; }
.library-player-meta > div {
  display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.library-player-meta dt { color: var(--muted); font-size: 12px; font-weight: 650; }
.library-player-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.library-download { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.library-download > label { color: var(--muted); font-size: 12px; font-weight: 650; }
.library-quality-select { width: min(170px, 100%); }
.library-download-button {
  min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 8px; background: var(--action);
  color: var(--on-action); font-weight: 650; text-decoration: none;
}
.library-download-button:hover { color: var(--on-action); background: var(--action-hover); }
.library-copy-link, .library-public-link {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer;
}
.library-public-link { width: 44px; padding: 0; color: var(--accent); background: var(--accent-soft); }
.library-public-link:disabled { opacity: 1; cursor: default; }
.library-link-status {
  flex: 1 0 100%; color: var(--muted); font-size: 12px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.library-link-status:empty { display: none; }
.library-delete-button {
  min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto; padding: 7px 12px; border: 1px solid var(--danger-line);
  border-radius: 8px; background: var(--panel); color: var(--down);
  font: inherit; font-weight: 650; cursor: pointer;
}
.library-delete-button:hover, .library-delete-button:focus-visible {
  outline: none; background: var(--danger-soft); border-color: var(--down);
}
.library-player-variants { margin: 4px 0 14px; }
.library-player-variants ul { list-style: none; margin: 6px 0 0; padding: 0; }
.library-player-variants li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px;
}
.library-player-variants li:first-child { border-top: 0; }
.library-player-variants li > a:first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.library-player-variants li > a:first-child:hover,
.library-player-variants li > a:first-child:focus-visible { text-decoration: underline; }
.library-variant-meta { margin-left: auto; color: var(--muted); white-space: nowrap; }
.library-variant-download {
  display: inline-flex; align-items: center; color: var(--muted); flex: none;
}
.library-variant-download:hover, .library-variant-download:focus-visible { color: var(--ink); }
.library-variant-caption-details {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  color: var(--muted); font-size: 11.5px;
}
.library-variant-caption-details[hidden] { display: none; }

.library-production-record {
  margin-top: 18px; border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.library-production-record summary {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 2px; color: var(--ink); font-size: 13px;
  font-weight: 700; cursor: pointer; list-style: none;
}
.library-production-record summary::-webkit-details-marker { display: none; }
.library-production-record summary:focus-visible {
  outline: 2px solid var(--action); outline-offset: 2px; border-radius: 6px;
}
.library-production-chevron { color: var(--muted); transition: transform .14s ease; }
.library-production-record[open] .library-production-chevron { transform: rotate(180deg); }
.library-production-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 16px; }
.library-production-body .bs-label { margin-bottom: 6px; }
.library-production-rich {
  color: var(--ink); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere;
}
.library-production-rich > :first-child { margin-top: 0; }
.library-production-rich > :last-child { margin-bottom: 0; }
.library-production-loading, .library-production-error,
.library-production-rail > span, .library-production-link-chips:only-child {
  color: var(--muted); font-size: 12.5px;
}
.library-production-error { color: var(--down); }
.library-production-rail {
  display: flex; gap: 8px; overflow-x: auto; padding: 1px 1px 4px;
}
.library-production-rail a {
  width: 116px; aspect-ratio: 16 / 9; flex: 0 0 116px; display: block;
  overflow: hidden; border: 1px solid var(--line); border-radius: 7px;
  background: var(--video-stage);
}
.library-production-rail img { width: 100%; height: 100%; display: block; object-fit: cover; }
.library-production-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.library-production-meta > div {
  display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.library-production-meta dt { color: var(--muted); font-size: 11.5px; font-weight: 650; }
.library-production-meta dd { min-width: 0; margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.library-production-link-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.library-production-footer { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; }
.library-production-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.public-link-history ul { margin: 0; padding: 0; list-style: none; }
.public-link-history li {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 0;
  border-top: 1px solid var(--line-soft); font-size: 12px;
}
.public-link-history li:first-child { border-top: 0; }
.public-link-history strong { color: var(--ink); font-size: 12px; }
.public-link-history span { color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.library-delete-modal {
  position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center;
  padding: 20px; background: var(--overlay-strong);
}
.library-delete-dialog {
  width: min(460px, 100%); padding: 20px; border: 1px solid var(--danger-line);
  border-radius: 13px; background: var(--panel); box-shadow: 0 20px 65px var(--shadow);
}
.library-delete-dialog h2 { margin: 4px 0 14px; font-size: 21px; line-height: 1.3; }
.library-delete-dialog p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
.library-delete-file {
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
}
.library-delete-file strong { color: var(--ink); overflow-wrap: anywhere; }
.library-delete-file span { font-size: 12.5px; }
.library-delete-error {
  margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--danger-line);
  border-radius: 8px; background: var(--danger-soft); color: var(--down); font-size: 13px;
}
.library-delete-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }
.library-delete-dialog footer button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 8px 12px; border-radius: 8px; font: inherit;
  font-weight: 650; cursor: pointer;
}
.library-delete-confirm { border: 1px solid var(--down); background: var(--down); color: var(--on-action); }
.library-delete-dialog button:disabled { cursor: wait; opacity: .6; }
.new-idea-modal {
  position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: 20px;
  background: var(--overlay-strong);
}
.new-idea-dialog {
  width: min(440px, 100%); border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); box-shadow: 0 20px 65px var(--shadow);
}
.new-idea-dialog form { display: flex; flex-direction: column; gap: 13px; padding: 16px; }
.new-idea-dialog header, .new-idea-dialog footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.new-idea-dialog h2 { margin: 0; font-size: 20px; }
.new-idea-dialog label {
  display: flex; flex-direction: column; gap: 5px; color: var(--muted);
  font-size: 12px; font-weight: 650;
}
.new-idea-dialog input, .new-idea-dialog select {
  min-height: 40px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink);
}
.new-idea-dialog footer { justify-content: flex-end; }
.new-idea-dialog footer button { min-height: 40px; }
.task-overflow {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px;
  background: var(--panel); color: var(--muted); cursor: pointer;
}
.task-overflow:hover { background: var(--line-soft); color: var(--action); }
@media (hover: hover) and (pointer: fine) {
  .task-overflow { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
  .task-overflow::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 14px;
    background: linear-gradient(to right, transparent, var(--panel)); pointer-events: none;
  }
  .task-card:hover .task-overflow, .task-card:focus-within .task-overflow {
    opacity: 1; pointer-events: auto;
  }
  .task-card:focus-within .task-overflow { transition: none; }
}
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .tcard.task-card:not(.is-crushing):not(.is-collapsing):not(.is-expanding) {
    min-height: 44px;
  }
  .task-card .check, .video-leading-glyph .check { position: relative; }
  .task-card .check::before, .video-leading-glyph .check::before {
    content: ""; position: absolute; inset: -13px; min-width: 44px; min-height: 44px;
  }
}
@media (hover: none), (pointer: coarse) {
  .task-overflow {
    width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
.bs-attention-status { padding: 9px 12px; color: var(--muted); font-size: 12px; }
.bs-attention-status.is-error { color: var(--down); }
.card-drawer-layer.is-confirming .card-drawer {
  animation: drawer-confirm 340ms ease both;
}
@keyframes drawer-confirm {
  0% { box-shadow: -18px 0 55px var(--shadow); }
  45% { box-shadow: -18px 0 55px var(--shadow), inset 5px 0 0 var(--ok); }
  100% { box-shadow: -18px 0 55px var(--shadow); }
}

/* Batch 6C: Pipeline facets, Production sub-state, smart uploads, and packaging rail. */
.pipeline-filters {
  display: flex; align-items: center; gap: 5px; max-width: calc(100% - 48px);
  margin: 0 24px 9px; overflow-x: auto; padding: 1px 0 3px;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.pipeline-filters::-webkit-scrollbar { display: none; }
.pipeline-filter-chips { display: contents; }
.pipeline-filter-all, .pipeline-filter-chip {
  min-height: 28px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted); font-size: 11.5px; cursor: pointer;
  white-space: nowrap;
}
.pipeline-filter-all:hover, .pipeline-filter-chip:hover {
  border-color: var(--action); color: var(--action);
}
.pipeline-filter-all.is-active, .pipeline-filter-chip.is-active {
  border-color: var(--action); background: var(--action); color: var(--on-action);
  font-weight: 650;
}
.pipeline-filter-dot {
  width: 7px; height: 7px; flex: 0 0 7px; border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
}
.pipeline-filter-divider {
  flex: 0 0 auto; margin-left: 4px; color: var(--muted); font-size: 10px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pipeline-filter-count {
  flex: 0 0 auto; margin-left: 3px; color: var(--muted); font-size: 10.5px;
  white-space: nowrap;
}
.pipeline-sort { margin: 0 24px 12px; }

.production-stage-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  width: max-content; max-width: 100%; padding: 2px 7px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--bg); color: var(--muted);
  font-size: 10.5px; font-weight: 650; line-height: 1.4; white-space: nowrap;
}
.production-stage-chip.is-editing {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.phase-production-chip { margin-top: 1px; }
.runway-production-chip { padding: 0; border: 0; background: transparent; }
.video-packaging-section { gap: 9px; }
.video-packaging-heading { display: flex; align-items: baseline; gap: 8px; }
.video-packaging-heading > span { color: var(--muted); font-size: 11px; }
.video-packaging-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.video-thumbtest-button {
  min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--action); font-size: 11.5px; font-weight: 650; cursor: pointer;
}
.video-thumbtest-button:hover { border-color: var(--action); background: var(--accent-soft); }
.video-thumbtest-button:disabled { color: var(--muted); cursor: default; opacity: .55; }
.packaging-empty {
  width: 100%; padding: 18px 12px; border: 1px dashed var(--line); border-radius: 8px;
  color: var(--muted); font-size: 11.5px; text-align: center;
}
.video-upload-choice {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border: 1px solid var(--accent-line); border-radius: 9px; background: var(--accent-soft);
}
.video-upload-choice-heading { display: flex; gap: 7px; min-width: 0; font-size: 12px; }
.video-upload-choice-heading > span {
  min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis;
  white-space: nowrap;
}
.video-upload-choice-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.video-upload-choice-buttons button, .video-upload-start {
  min-height: 34px; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--action);
  font-size: 12px; font-weight: 650; cursor: pointer;
}
.video-upload-choice-buttons button.is-active {
  border-color: var(--action); background: var(--action); color: var(--on-action);
}
.video-upload-choice > label {
  display: flex; flex-direction: column; gap: 4px; color: var(--muted);
  font-size: 11.5px; font-weight: 650;
}
.video-upload-start { align-self: flex-start; border-color: var(--action); }

@media (max-width: 899px) {
  .library-view { padding: 17px 16px calc(24px + env(safe-area-inset-bottom)); }
  .library-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-search { grid-column: 1 / -1; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-player-head { min-height: var(--header-h); padding-top: env(safe-area-inset-top); }
  .library-player-layer .card-drawer-back { display: inline-flex; }
  .pipeline-phase-heading { margin-right: 16px; }
  .pipeline-phase-heading .phase-tabs { flex: 1; }
  .pipeline-new-idea { flex: 0 0 auto; }
  .new-idea-modal { align-items: end; padding: 0; }
  .new-idea-dialog { width: 100%; border-width: 1px 0 0; border-radius: 12px 12px 0 0; }
  .new-idea-dialog form { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .pipeline-filters { max-width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .pipeline-sort { margin-left: 16px; margin-right: 16px; }
  .icon-btn, .modal-primary-controls .icon-btn,
  .crusher-icon-button, .crusher-add, .check, .shoot-copy-handle,
  .review-marker, .review-resolve, .phase-tabs button,
  .comment-attach-button, .task-comment-form button, .rich-toolbar button,
  .rich-color-control, .rich-link-popover a, .rich-link-popover button,
  .review-workflow-actions button, .review-composer button,
  .video-thumb-thumtest, .video-thumbtest-button {
    position: relative;
  }
  .icon-btn::before,
  .modal-primary-controls .icon-btn::before, .crusher-icon-button::before,
  .crusher-add::before, .check::before, .shoot-copy-handle::before,
  .review-marker::before, .review-resolve::before, .phase-tabs button::before,
  .comment-attach-button::before,
  .task-comment-form button::before, .rich-toolbar button::before,
  .rich-color-control::before, .rich-link-popover a::before,
  .rich-link-popover button::before, .review-workflow-actions button::before,
  .review-composer button::before, .video-thumb-thumtest::before,
  .video-thumbtest-button::before {
    content: ""; position: absolute; inset: -7px; min-width: 44px; min-height: 44px;
  }
  .check::before, .review-marker::before { inset: -13px; }
  .shoot-copy-handle::before { inset: -16px; }
  .phase-tabs button::before { inset: -4px; }
  .rich-link-popover a, .rich-link-popover button { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), textarea, select,
  [contenteditable="true"], .rich-editor, .rich-code-editor {
    font-size: 16px !important;
  }
  .library-controls > label:not(.library-search), .new-idea-dialog label,
  .video-meta-row label, .video-dates-row > label,
  .task-date-field, .settings-form label { font-size: 11px; }
}

@media (max-width: 430px) {
  .library-grid { grid-template-columns: 1fr; }
  .library-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-download { align-items: stretch; }
  .library-download > label { flex: 1 0 100%; }
  .library-quality-select { width: 100%; }
  .library-download-button, .library-copy-link, .library-delete-button {
    flex: 1 1 calc(50% - 4px); justify-content: center;
  }
  .library-public-link { flex: 0 0 44px; }
  .drive-link-main { flex-wrap: wrap; }
  .drive-link-label { flex: 1; }
  .drive-link-url {
    order: 4; flex: 1 0 100%; height: auto; min-height: 44px;
    overflow: visible; text-overflow: clip; white-space: pre-wrap;
    overflow-wrap: anywhere; word-break: break-all;
  }
  .drive-link-copy, .drive-link-stop { min-width: 44px; min-height: 44px; }
  button.video-cut-public-link { width: 44px; height: 44px; min-width: 44px; }
  .video-cut-main > .drive-link-chip { margin-top: 8px; }
  .video-cut:not(.is-hero) { align-items: stretch; gap: 8px; }
  .video-cut:not(.is-hero) .video-cut-poster { width: 100%; }
  .video-cut:not(.is-hero) .video-cut-main { width: 100%; min-width: 0; }
  .video-cut:not(.is-hero) .video-cut-hero-line { flex-wrap: wrap; }
  .video-cut:not(.is-hero) .video-cut-hero-meta {
    flex: 1 1 110px; overflow: visible; text-overflow: clip; white-space: normal;
    overflow-wrap: anywhere;
  }
  .video-cut:not(.is-hero) .video-cut-hero-actions {
    flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; margin-left: 0;
  }
  #video-hero .video-cut.is-hero.is-compact .video-cut-poster { display: none; }
  #video-hero .video-cut.is-hero.is-compact .video-cut-main {
    width: 100%; flex: 1 1 100%;
  }
  #video-hero .video-cut.is-hero.is-compact .video-cut-hero-line { flex-wrap: wrap; }
  #video-hero .video-cut.is-hero.is-compact .video-cut-hero-meta {
    flex: 1 1 110px; overflow: visible; text-overflow: clip; white-space: normal;
  }
  #library-drive-link-row { grid-template-columns: 1fr; }
  #library-drive-link-row dt, #library-drive-link-row dd { grid-column: 1; }
  #library-drive-link-row dd { margin-top: 4px; }
  .video-cut-menu-toggle { width: 36px; height: 36px; }
  .video-cut-menu { max-width: calc(100vw - 32px); min-width: 0; width: 220px; }
  .video-cut-menu button, .video-cut-menu a { min-height: 44px; white-space: normal; }
  .library-production-meta { grid-template-columns: 1fr; }
  .library-delete-modal { align-items: end; padding: 0; }
  .library-delete-dialog {
    width: 100%; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 13px 13px 0 0;
  }
  .library-delete-dialog footer { flex-direction: column-reverse; }
  .library-delete-dialog footer button { width: 100%; }
  .pipeline-phase-heading { align-items: flex-start; flex-direction: column; margin-right: 0; }
  .pipeline-new-idea { margin: 0 16px 8px; }
  /* Only the empty-state plus wants that margin: inside the toolbar it made the
     plus's margin box 44 px, so flex centring lifted it 4 px above the channel
     marks (Seth's phone, 2026-09-12). */
  .pipeline-toolbar .pipeline-new-idea { margin: 0; }
  .video-channel-control select { padding-left: 38px !important; }
}

.shell-update-pill {
  /* Top, not bottom: at the bottom it landed square on the comment composer
     and ate the caret (Seth, 2026-09-01). Nothing you type into lives up
     here, so a transient pill can sit over it harmlessly. */
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--header-h) + 10px); z-index: var(--z-toast, 900);
  padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--action); color: var(--on-action);
  font: inherit; font-size: 13.5px; font-weight: 650;
  box-shadow: 0 6px 18px var(--shadow);
}
.shell-update-pill:hover { background: var(--action-hover); }

.library-card-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.library-card-frame { position: relative; }
.library-card-frame svg { position: relative; z-index: 1;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .55)); }

/* Batch 6G: one native-control treatment, ordered packaging, and resilient cards. */
select.bs-select {
  /* height must GROW with the 16px mobile font (the iOS no-zoom rule) —
     a fixed 32px clipped the value's descenders (Seth, 2026-08-25). */
  appearance: none; -webkit-appearance: none; min-width: 0;
  height: auto; min-height: 34px; line-height: 1.3;
  padding: 7px 36px 7px 11px; border: 1px solid var(--line);
  border-radius: var(--radius); outline: 0; background-color: var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  background-size: 16px; color: var(--ink); cursor: pointer;
}
:root[data-theme="dark"] select.bs-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9992' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select.bs-select:focus-visible {
  border-color: var(--action); box-shadow: 0 0 0 3px var(--accent-soft);
}
select.bs-select:disabled { cursor: default; opacity: .58; }
.card-chip select.bs-select {
  border: 0; border-radius: inherit; background-color: transparent;
}
.card-chip select.bs-select:focus-visible { border: 0; box-shadow: none; }
.card-chip:focus-within { border-color: var(--action); }
.video-chips { gap: 6px; }
.video-chips .card-chip {
  height: 28px; min-height: 28px; font-size: 12.5px;
}
.video-chips .card-chip select.bs-select {
  height: 26px; min-height: 26px; padding: 4px 28px 4px 11px;
  font-size: 12.5px; background-position: right 8px center; background-size: 14px;
}
.video-channel-chip { padding-left: 11px; }
.video-channel-chip select.bs-select { padding-left: 0; }
.video-post-date-chip { gap: 5px; padding: 4px 11px; }
.video-post-date-text { white-space: nowrap; }
.video-post-date-chip input {
  position: absolute; inset: 0; z-index: 1; width: auto; height: auto; min-height: 0;
  padding: 0; opacity: 0; cursor: pointer;
}
.library-select-icon { display: none; }
.video-channel-control select.bs-select { padding-left: 38px; }

.phase-card-grid > *, .phase-mini-card > *, .phase-mini-meta > *,
.phase-mini-date > * { min-width: 0; max-width: 100%; }
.phase-mini-title { overflow-wrap: anywhere; word-break: break-word; }
.phase-mini-meta, .phase-mini-date {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phase-mini-meta > span, .phase-mini-date > span,
.phase-mini-card > .channel-chip {
  overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap;
}

/* Rows are flex items in a column list: without flex:none they SHRINK to
   zero and swallow the chip + preview (the old fixed 68px hid this by
   forcing height, which clipped the preview mid-glyph instead). Let each
   row take its natural height and clamp the preview to one line.
   (Seth, 2026-08-25.) */
.inbox-row { flex: none; min-height: 48px; }
.inbox-row-top, .inbox-row-type, .inbox-row-summary { flex: none; }
.inbox-row-type { overflow: visible; }
.inbox-row-summary {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; min-width: 0; color: var(--muted); font-size: 12.5px;
}
.inbox-row-top, .inbox-row-type { max-width: 100%; }
.inbox-row-type { align-items: center; overflow: hidden; }
.inbox-chip {
  min-width: 0; max-width: 100%; overflow: hidden; flex: 0 1 auto;
  text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal;
}
.video-title-input {
  box-sizing: border-box; direction: ltr; text-align: left; font-family: inherit;
  font-size: 16px; resize: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.video-kind {
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  padding: 0; color: var(--muted);
}
.thumbnail-slots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
}
.thumbnail-slot {
  position: relative; min-width: 0; min-height: 112px; margin: 0; padding: 0;
  overflow: hidden; aspect-ratio: 16 / 9; border: 1px dashed var(--line);
  border-radius: var(--radius); background: var(--bg); color: var(--muted);
}
.thumbnail-slot.is-empty,
.video-ab-thumbnail.is-empty {
  border: 1.5px dashed var(--thumbnail-empty-border);
  background: var(--thumbnail-empty-bg); color: var(--thumbnail-empty-label);
}
button.thumbnail-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer;
}
button.thumbnail-slot strong { color: var(--ink); font-size: 12px; }
button.thumbnail-slot span { font-size: 12px; font-weight: 600; }
.thumbnail-slot:hover, .thumbnail-slot:focus-visible, .thumbnail-slot.is-drop-target,
.video-ab-thumbnail.is-drop-target {
  outline: 0; border-color: var(--action); background: var(--accent-soft);
}
.thumbnail-slot.is-drop-refused,
.video-ab-thumbnail.is-drop-refused { border-color: var(--danger); }
/* Filled variant tiles: the selected tile already uses the action border, so dragging
   shows a distinct dashed ring (accept) or a danger ring (refuse) around the image. */
.video-variant-tile.is-drop-target > .thumbnail-slot {
  outline: 2px dashed var(--action); outline-offset: 2px;
}
.video-variant-tile.is-drop-refused > .thumbnail-slot {
  outline: 2px dashed var(--danger); outline-offset: 2px;
}
.thumbnail-drop-note {
  position: absolute; inset: 0; z-index: var(--z-sticky); display: grid;
  place-items: center; padding: 12px; background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--danger); font-size: 12px; font-weight: 750; text-align: center;
}
.thumbnail-slot.is-filled { border-style: solid; cursor: grab; }
.thumbnail-slot.is-filled:active { cursor: grabbing; }
.thumbnail-slot > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.thumbnail-slot-number {
  position: absolute; left: 7px; bottom: 7px; min-width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--panel); color: var(--ink); box-shadow: 0 2px 8px var(--shadow);
  font-size: 11px; font-weight: 750;
}
.thumbnail-slot .image-corner-button { opacity: 1; }
.thumbnail-swap-button {
  position: absolute; right: 7px; bottom: 7px; width: 28px; height: 28px;
  display: none; place-items: center; padding: 0; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel); color: var(--action);
  box-shadow: 0 2px 8px var(--shadow-soft); cursor: pointer;
}
.title-tests { display: flex; flex-direction: column; gap: 7px; }
.title-tests-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.title-tests-heading button, .attachment-use-thumbnail {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 30px; padding: 4px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--action);
  font-size: 11.5px; font-weight: 650; cursor: pointer;
}
.title-tests-heading button:disabled, .attachment-use-thumbnail:disabled {
  cursor: default; opacity: .5;
}
.video-alt-titles { display: flex; flex-direction: column; gap: 6px; }
.video-title-test-row {
  min-width: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr) 32px;
  align-items: center; gap: 6px;
}
.video-title-test-row > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.video-title-test-row input { grid-column: 2; }
.video-title-test-row button {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: var(--down); cursor: pointer;
}
.video-attachment-shell, .comment-attachment-shell {
  min-width: 0; display: flex; align-items: center; gap: 5px;
}
.video-attachment-shell .video-attachment,
.comment-attachment-shell .comment-attachment-chip { min-width: 0; flex: 1; }
.attachment-delete-button {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--down); cursor: pointer;
}
.attachment-use-thumbnail { width: 100%; margin-top: 5px; }

.task-memo-icon { flex: 0 0 auto; display: inline-grid; place-items: center; color: var(--accent); }
.tcard.task-drop-target { border-color: var(--action); box-shadow: 0 0 0 2px var(--accent-soft); }
.crushed-tasks { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.crushed-tasks-toggle {
  width: 100%; min-height: 32px; display: flex; align-items: center; gap: 6px;
  padding: 6px 4px; border: 0; border-top: 1px solid var(--line-soft);
  background: transparent; color: var(--muted); font-size: 12px; font-weight: 650;
  text-align: left; cursor: pointer;
}
.crushed-tasks-toggle:hover { color: var(--accent); }
.crushed-tasks-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crushed-tasks-toggle svg { flex: 0 0 auto; }
.crushed-tasks-count { margin-left: auto; font-variant-numeric: tabular-nums; }
@keyframes crushed-count-tick {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.crushed-tasks-count.is-count-tick { animation: crushed-count-tick 220ms ease-out; }
.crushed-task-list { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
/* Slimmed 2026-08-25 (Seth: "what we have now just feels heavy handed").
   Same behaviour — it still searches tasks AND video cards — but it reads as
   a line of text instead of a tinted box competing with the card body. */
.memo-fold-section {
  display: flex; flex-direction: column; gap: 6px; padding: 0;
  border: none; background: none;
}
.memo-fold-section .bs-label {
  display: flex; align-items: center; gap: 5px; color: var(--muted);
}
.memo-fold-section label[for="memo-fold-input"] { display: none; }
#memo-fold-input {
  width: 100%; padding: 8px 2px; border: none; border-bottom: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit; font-size: 12.5px;
}
#memo-fold-input::placeholder { color: var(--muted); }
#memo-fold-input:focus { outline: none; border-color: var(--accent-line); }
.memo-fold-results { max-height: 216px; display: flex; flex-direction: column; overflow-y: auto; }
.memo-fold-result {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 4px;
  border: none; border-radius: 7px; background: none;
  color: var(--ink); text-align: left; cursor: pointer;
}
.memo-fold-result:hover { background: var(--accent-soft); color: var(--accent); }
.memo-fold-result > span { min-width: 0; display: flex; flex-direction: column; }
.memo-fold-result strong, .memo-fold-result small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.memo-fold-result small { color: var(--muted); }

/* Batch 6H: runway dates, YouTube-style packaging, and compact attachments. */
.runway-heading { align-items: center; }
.runway-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }
.runway-nav button {
  min-width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--action); font: inherit; font-size: 11.5px; cursor: pointer;
}
.runway-nav button:disabled { cursor: default; opacity: .45; }
.runway-slot {
  min-width: 176px; flex-basis: 176px; cursor: pointer; transition: border-color .12s ease;
}
.runway-slot.is-empty { min-height: 74px; cursor: default; }
.runway-slot.is-drop-target { border-color: var(--action); box-shadow: 0 0 0 2px var(--accent-soft); }
.runway-thumb {
  width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 6px;
  background: var(--line-soft); object-fit: cover;
}
.runway-status {
  align-self: flex-start; width: max-content; max-width: 100%; padding: 2px 7px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.runway-status.is-ready { color: var(--ok); }
.runway-status.is-editing { border-color: var(--accent-line); color: var(--accent); }

.video-card-menu-wrap { position: relative; }
.video-card-menu {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: var(--z-popover);
  min-width: 190px; max-width: calc(100vw - 24px); padding: 8px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); box-shadow: 0 8px 24px var(--shadow);
}
.video-card-menu label {
  display: flex; flex-direction: column; gap: 5px; color: var(--muted);
  font-size: 11px; font-weight: 650;
}
.video-card-menu input { min-height: 34px; }

.video-packaging-heading { align-items: center; justify-content: space-between; }
.packaging-mode {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--line-soft);
}
.packaging-mode button {
  min-height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted);
  font: inherit; font-size: 11px; font-weight: 650; cursor: pointer;
}
.packaging-mode button.is-active {
  background: var(--panel); color: var(--action); box-shadow: 0 1px 2px var(--shadow-soft);
}
.packaging-mode button:disabled { cursor: default; opacity: .55; }
.video-packaging-layout { min-width: 0; }
.video-packaging-layout[data-mode="thumb"] .thumbnail-slots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
}
.video-packaging-layout[data-mode="title"] {
  display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 10px;
  align-items: start;
}
.video-packaging-layout[data-mode="title"] .thumbnail-slots { display: block; }
.video-packaging-layout[data-mode="title"] .video-alt-titles {
  display: flex; flex-direction: column; gap: 6px;
}
.video-packaging-layout[data-mode="package"] {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto; gap: 7px 9px;
}
.video-packaging-layout[data-mode="package"] .thumbnail-slots,
.video-packaging-layout[data-mode="package"] .video-alt-titles { display: contents; }
.video-packaging-layout[data-mode="package"] .thumbnail-slot {
  grid-column: var(--variant); grid-row: 1;
}
.video-packaging-layout[data-mode="package"] .video-title-test-row {
  grid-column: var(--variant); grid-row: 2;
  grid-template-columns: 20px minmax(0, 1fr) 28px; gap: 4px;
}
.video-packaging-layout[data-mode="package"] .video-title-test-row input {
  min-width: 0; padding-left: 7px; padding-right: 7px;
}
.thumbnail-slot { min-height: 0; }
button.thumbnail-slot { gap: 0; }
.thumbnail-slot-number { text-transform: uppercase; }

.video-attachments {
  display: flex; flex-direction: column; gap: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px;
}
.video-attachment-row {
  min-width: 0; min-height: 44px; flex: 0 0 auto; display: flex; align-items: center;
  gap: 8px; padding: 7px 7px; border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}
.video-attachment-row:last-child { border-bottom: 0; }
.video-attachment-row[draggable="true"] { cursor: grab; }
.video-attachment-preview {
  width: 44px; height: 28px; flex: 0 0 44px; display: grid; place-items: center;
  overflow: hidden; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg); color: var(--muted); text-decoration: none;
}
.video-attachment-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-attachment-glyph { display: grid; place-items: center; }
.video-attachment-copy {
  min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 7px;
}
.video-attachment-name {
  min-width: 0; overflow: hidden; flex: 0 1 auto; color: var(--ink);
  font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap;
}
.video-attachment-size { flex: 0 0 auto; white-space: nowrap; }
.video-attachment-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }
.video-attachment-actions button,
.video-attachment-actions .attachment-use-thumbnail,
.video-attachment-actions .attachment-delete-button {
  width: 28px; height: 28px; min-height: 0; flex: 0 0 28px; display: grid;
  place-items: center; margin: 0; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--action); cursor: pointer;
}
.video-attachment-actions .attachment-delete-button { color: var(--down); }
.video-attachment-actions button:hover { background: var(--line-soft); }
.video-attachment-actions button:disabled { cursor: default; opacity: .35; }
.video-attachment-row > .drive-link-chip { flex: 0 1 430px; }

@media (max-width: 620px) {
  .video-packaging-layout[data-mode="title"] { grid-template-columns: 1fr; }
  .video-packaging-layout[data-mode="package"] { gap: 5px; }
  .video-packaging-layout[data-mode="package"] .video-title-test-row {
    grid-template-columns: 16px minmax(0, 1fr); }
  .video-packaging-layout[data-mode="package"] .video-title-test-row button { display: none; }
  .video-attachment-size { display: none; }
  .video-attachment-row {
    height: auto; min-height: 44px; flex: 0 0 auto; display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto; grid-auto-rows: auto;
  }
  .video-attachment-preview { grid-column: 1; grid-row: 1; }
  .video-attachment-copy { grid-column: 2; grid-row: 1; }
  .video-attachment-actions { grid-column: 3; grid-row: 1; }
  .video-attachment-row > .drive-link-chip {
    width: 100%; grid-column: 2 / -1; grid-row: 2; margin: 0;
  }
  .packaging-mode button { padding-left: 6px; padding-right: 6px; }
}

.review-markup-overlay { padding: 12px; pointer-events: auto; }
.review-markup-dialog {
  width: min(1280px, 100%); height: calc(100dvh - 24px); margin: auto;
  overflow: hidden; border-radius: 12px; pointer-events: auto;
}
.review-markup-toolbar { position: relative; z-index: var(--z-overlay-toolbar); pointer-events: auto; }
.review-markup-stage { position: relative; z-index: 1; min-width: 0; min-height: 0; pointer-events: auto; }
.review-markup-stage .xp-canvas { position: relative; z-index: 1; pointer-events: auto; }
.review-markup-close { width: 32px; height: 32px; padding: 0; }

@media (max-width: 899px) {
  .bs-search-stub { display: none !important; }
  .thumbnail-swap-button { display: grid; }
  .image-corner-button { opacity: 1; }
  .review-markup-overlay { padding: 6px; }
  .review-markup-dialog {
    width: 100%; height: calc(100dvh - 12px); border-radius: 8px;
  }
}

@media (max-width: 430px) {
  .phase-card-grid { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  /* Three stacked full-width thumbnails pushed everything else ~630px down
     the page. A snap rail keeps them big enough to judge while costing one
     screenful instead of three (Seth: space efficient, especially mobile). */
  /* Six labelled selects stacked ~450px above the first video. Each select's
     default option already names its facet ("All years"), so the labels are
     redundant on a phone; Sort keeps its label since "Newest" alone is
     ambiguous. (Seth: space efficient, especially mobile.) */
  .library-controls > label > span:first-child { display: none; }
  .library-controls > label:nth-of-type(1) > span:first-child { display: block; }
  .library-controls { gap: 8px; }
  /* the folded-in labels ("Channel: Berm Peak") need the full width on a
     phone; two-up truncated them to "Channel: Be" (Seth, 2026-08-25). */
  .video-meta-row { grid-template-columns: 1fr; }
  .video-meta-row > label { min-width: 0; }
  .thumbnail-slots {
    display: flex; grid-template-columns: none; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none;
  }
  .thumbnail-slots::-webkit-scrollbar { display: none; }
  .thumbnail-slot {
    flex: 0 0 78%; min-height: 0; scroll-snap-align: center;
  }
  .video-title-test-row { grid-template-columns: 44px minmax(0, 1fr) 32px; }
  .inbox-controls { min-width: 0; }
  .inbox-search { width: 100%; min-width: 0; }
}

/* Completed tasks collapse to a single truncated line, reclaiming vertical
   space on busy days (Seth, 2026-08-25). Real markup: .tcard.done > .ttitle */
.tcard.done .ttitle {
  display: flex; align-items: center; min-width: 0; white-space: nowrap;
}
.tcard.done .ttitle > * { flex: 0 0 auto; }
.tcard.done .ttitle > .ttitle-text {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.tcard.done { padding-top: 5px; padding-bottom: 5px; min-height: 0; }
.tcard.done .tmeta, .tcard.done .task-card-meta { display: none; }

/* Mobile nav: at 375px the five text pills needed 329px inside a 222px rail,
   so Inbox and Library were clipped off-screen and unreachable (Seth,
   2026-08-25). Labels hide below 700px; desktop keeps icon + label. */
.bs-nav-icon { display: none; }
#nav-crusher .bs-nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
}
.bs-view-switcher a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
  .bs-nav-icon { display: inline-flex; align-items: center; justify-content: center; }
  .bs-nav-icon .bs-icon-crusher { width: 19px; height: 19px; }
  .bs-nav-label { display: none; }
  .bs-view-switcher { overflow: visible; gap: 2px; }
  .bs-view-switcher a {
    min-width: 44px; min-height: 40px; justify-content: center; padding: 6px 8px;
  }
}
/* the last inbox row must clear the sticky Load more button */
.inbox-list { padding-bottom: 6px; }

/* Page bottom: one consistent breathing space at the end of every view
   instead of the ragged gap the old Asana footer left behind. */
main { padding-bottom: 28px; }
@media (max-width: 700px) {
  main { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
.crusher-days > :last-child, .crusher-week > :last-child { margin-bottom: 0; }

/* Touch targets measured too small on a phone during the pre-launch pass
   (2026-08-26): the shoot-duplicate handle was 13px and filter chips 28px.
   Grow the HIT area without growing the visual weight — the glyphs and chip
   sizes stay as designed. */
@media (max-width: 700px) {
  .shoot-copy-handle { position: relative; }
  .shoot-copy-handle::after {
    content: ""; position: absolute; inset: -14px; border-radius: 50%;
  }
  .pipeline-filter-all, .pipeline-filter-chip { min-height: 36px; }
  .inbox-filters button, .settings-chip-row a { min-height: 36px; }
}

/* The density toggle lost its label in the text purge and was left as a lone
   icon stranded in a full-width box. Make it a proper icon button. */
.library-density-toggle, #library-density {
  width: 44px; min-width: 44px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
}

/* Inbox reply composer. Deliberately channel-neutral in name and layout: a
   Meta or Instagram reply is the same form with a different From list. */
.inbox-reply-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.inbox-reply-field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.inbox-reply-field > span { color: var(--muted); font-size: 12px; }
.inbox-reply-to { margin-bottom: 6px; }
.inbox-reply #inbox-reply-body { min-height: 130px; }
.inbox-reply-signature {
  margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--line);
  color: var(--muted); font-size: 13px; line-height: 1.45;
}
/* The real Gmail signature carries its own inline colours, chosen for the
   white background an email is read on. Previewing it on the dark app
   background hid "Berm Peak — Office" completely (near-black on near-black),
   so the preview gets the white ground the recipient will actually see. */
.inbox-reply-signature.is-rich {
  border-left: 0; padding: 12px 14px; border-radius: 8px;
  background: #ffffff; border: 1px solid var(--line);
}
.inbox-reply-signature.is-rich img { max-width: 100%; }
.inbox-reply-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
}
.inbox-reply-actions button { display: inline-flex; align-items: center; gap: 6px; }
.inbox-reply-error { margin-top: 8px; color: var(--danger, #b03a3a); font-size: 13px; }
.inbox-reply-sent {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel);
}
.inbox-reply-sent-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.inbox-reply-sent-body { font-size: 14px; line-height: 1.5; }
.inbox-reply-sent-body p { margin: 0 0 8px; }
@media (max-width: 700px) {
  .inbox-reply-fields { flex-direction: column; }
  .inbox-reply-actions button { flex: 1; justify-content: center; }
}

.reply-address-list { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 14px; }
.reply-address-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px;
}
.reply-address-row label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reply-address-row label > span { color: var(--muted); font-size: 12px; }
.reply-address-row .reply-address-signature,
.reply-address-row > .bs-note { grid-column: 1 / -1; }
@media (max-width: 700px) { .reply-address-row { grid-template-columns: 1fr; } }

/* Touch targets, second pass (2026-08-26). The interaction audit measured the
   whole app at 375px: every toolbar control was 27-34px tall, under the 44px
   guideline, which is why so much of this felt fiddly on a phone. Grow the HIT
   area with a pseudo-element instead of the control, so nothing moves or gets
   heavier visually. */
@media (max-width: 700px) {
  .crusher-icon-button, .crusher-today, .crusher-weekends, .crusher-add,
  .inbox-tabs button, .runway-nav button, .library-filters button,
  .icon-btn, .bs-header-upload {
    position: relative;
  }
  .crusher-icon-button::after, .crusher-today::after, .crusher-weekends::after,
  .crusher-add::after, .inbox-tabs button::after, .runway-nav button::after,
  .library-filters button::after, .icon-btn::after, .bs-header-upload::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  /* The day "+" and the Crushed Tasks header are full width but short. */
  .day-add, .crushed-tasks-toggle { min-height: 44px; }
}

/* ---------- Money board: the super admin's home ----------
   Seth's brief: a signal-to-noise screen that says what to work on to make
   money, and goads him into starting it. Ranked, graphical, and every figure
   traceable to a real query. */
.money-view { max-width: 1080px; margin: 0 auto; padding: 22px 24px 40px; }
.money-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.money-heading h1 { margin: 2px 0 0; font-size: 27px; letter-spacing: -.02em; }
.money-heading-side { display: flex; align-items: center; gap: 10px; }
.money-pulse { display: flex; flex-wrap: wrap; gap: 6px; }
.money-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, var(--panel));
  color: var(--muted); font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.money-chip.is-overdue {
  background: color-mix(in srgb, var(--down, #b03a3a) 16%, var(--panel));
  color: var(--down, #b03a3a);
}
.money-chip.is-due {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent);
}
.money-chip.is-paid {
  background: color-mix(in srgb, var(--up, #3f8f4f) 16%, var(--panel));
  color: var(--up, #3f8f4f);
}
.money-chip.is-blocks, .money-chip.is-promise { max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; display: inline-block; }
.money-then {
  margin: 4px 0 8px; color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.money-rank {
  flex: 0 0 22px; color: var(--muted); font-size: 12.5px; font-weight: 700;
  text-align: center;
}
.money-move-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.money-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.money-status { margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.money-streak {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent); font-size: 12.5px; font-weight: 700;
}
.money-delta { font-style: normal; font-weight: 700; }
.money-delta.is-up { color: var(--up, #3f8f4f); }
.money-delta.is-down { color: var(--down, #b03a3a); }

.money-hero {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
  padding: 18px 20px; border: 1px solid var(--accent-line, var(--line));
  border-radius: 14px; background: var(--panel);
  box-shadow: 0 10px 28px var(--shadow-faint, rgba(0,0,0,.06));
}
.money-hero-mark {
  flex: 0 0 54px; width: 54px; height: 54px; display: flex;
  align-items: center; justify-content: center; border-radius: 14px;
  background: color-mix(in srgb, var(--lever, var(--accent)) 16%, var(--panel));
  color: var(--lever, var(--accent));
}
.money-hero-copy { flex: 1; min-width: 0; }
.money-hero-kicker {
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.money-hero-copy h2 {
  margin: 3px 0 4px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em;
}
.money-hero-copy p { margin: 0; color: var(--muted); font-size: 13.5px; }
.money-hero-action {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}

.money-hero-go {
  min-height: 38px; display: inline-flex; align-items: center; padding: 0 16px;
  border-radius: 9px; background: var(--action); color: #fff;
  font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.money-hero-go:hover { background: var(--action-hover); }

.money-engine { margin-bottom: 16px; }
.money-engine-bar {
  display: flex; gap: 3px; height: 12px; margin-bottom: 8px;
  border-radius: 999px; overflow: hidden;
}
.money-engine-segment { min-width: 6px; }
.money-engine-key { display: flex; flex-wrap: wrap; gap: 12px; }
.money-engine-chip {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 12px; font-weight: 600;
}
.money-engine-dot { width: 8px; height: 8px; border-radius: 50%; }

.money-moves { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.money-move {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel);
  color: var(--ink); text-decoration: none;
  transition: border-color .12s ease, transform .12s ease;
}
.money-move:hover { border-color: var(--accent-line, var(--accent)); transform: translateX(2px); }
.money-move.is-urgent { border-color: color-mix(in srgb, var(--down, #b03a3a) 45%, var(--line)); }
.money-move-mark {
  flex: 0 0 34px; width: 34px; height: 34px; display: flex;
  align-items: center; justify-content: center; border-radius: 10px;
  background: color-mix(in srgb, var(--lever, var(--accent)) 15%, var(--panel));
  color: var(--lever, var(--accent));
}
.money-move-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.money-move-copy strong { font-size: 14px; font-weight: 650; }
.money-move-copy small { color: var(--muted); font-size: 12px; }


.money-clear {
  margin-bottom: 22px; padding: 30px 22px; border: 1px dashed var(--line);
  border-radius: 14px; background: var(--panel); text-align: center;
}
.money-clear h2 { margin: 0 0 6px; font-size: 20px; }
.money-clear p { margin: 0 auto; max-width: 420px; color: var(--muted); font-size: 13.5px; }

.money-momentum {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.money-stat {
  padding: 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel); text-align: center;
}
.money-stat strong { display: block; font-size: 20px; letter-spacing: -.02em; }
.money-stat span { color: var(--muted); font-size: 11.5px; }
.money-footnote { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }

@media (max-width: 700px) {
  .money-view { padding: 16px 14px 30px; }
  /* The badges get their own row on a phone; beside a wrapping headline they
     were squashed into circles. */
  .money-heading { flex-direction: column; align-items: stretch; gap: 10px; }
  .money-heading h1 { font-size: 24px; }
  .money-heading-side { justify-content: flex-start; }
  .money-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* This row's children could not shrink: the widest chip (260px min-content)
     plus the nowrap button exceeds a phone, and a flex item's default
     min-width:auto forbids squeezing — so the button hung off the right edge
     of the card (Seth's screenshot, 2026-08-27). Let the row wrap and the
     chip box shrink instead. */
  .money-hero-action { flex-direction: row; flex-wrap: wrap; align-items: center;
    width: 100%; justify-content: space-between; row-gap: 8px; }
  .money-hero-chips { min-width: 0; justify-content: flex-start; }
  .money-momentum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The calendar keeps going: a sentinel for the observer, and a button that
   works even when it does not. */
.crusher-more { height: 1px; margin-bottom: 26px; }

/* Safari and HTML5 drag-and-drop (2026-08-27). Dragging runway cards worked in
   Chrome and did nothing in Safari. WebKit will not start a native drag on an
   arbitrary element from `draggable` alone — it needs -webkit-user-drag, and a
   drag begun on selectable text becomes a text selection instead. Every
   element in this app that uses HTML5 DnD (as opposed to the Crusher's
   pointer-based drag, which is browser-agnostic) opts in here. */
.runway-slot[draggable="true"],
.phase-mini-card[draggable="true"],
.video-attachment-row[draggable="true"],
.thumbnail-slot[draggable="true"],
.shoot-copy-handle[draggable="true"] {
  -webkit-user-drag: element;
  user-select: none;
  -webkit-user-select: none;
}

/* Getting things back out: a download on every cut and every image. */
.video-cut-download {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--ink); font-size: 11.5px; font-weight: 600; text-decoration: none;
}
.video-cut-download:hover { border-color: var(--accent); color: var(--accent); }
.image-download-button { bottom: 6px; right: 6px; top: auto; }

/* Attention accents on crusher rows + the pinned "Needs your reply" guests. */
.tcard.has-attention { position: relative; }
.tcard.has-attention::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--attn);
  box-shadow: 0 0 5px color-mix(in srgb, var(--attn) 70%, transparent);
}
.needs-reply { margin: 0 0 14px; }
.needs-reply-title {
  margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.needs-reply-card {
  margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--accent);
  border-radius: 10px; background: var(--panel);
}
.needs-reply-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0;
  background: transparent; text-align: left; cursor: pointer;
}
.needs-reply-kind {
  padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 10.5px; font-weight: 650;
}
.needs-reply-cardtitle { font-size: 13.5px; font-weight: 650; }
.needs-reply-head:hover .needs-reply-cardtitle { color: var(--action); }
.needs-reply-meta { margin-top: 4px; color: var(--muted); font-size: 11px; }
.needs-reply-body {
  margin-top: 6px; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere;
}
.needs-reply-form { display: flex; gap: 6px; margin-top: 9px; }
.needs-reply-input {
  flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: inherit; font-size: 13px;
}
.needs-reply-form button {
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--action); font-size: 12px; font-weight: 650;
  cursor: pointer;
}
.needs-reply-form button[type="submit"] {
  border-color: var(--action); background: var(--action); color: var(--on-action);
}
.needs-reply-crush { color: var(--muted); }
.needs-reply-error { margin-top: 5px; color: var(--down); font-size: 11.5px; }

/* People-mention chips in the composer (structured tokens; flattened to
   plain text at submit — mentions[] is the channel, never the body). */
.mention-chip {
  display: inline-block; padding: 0 6px; border-radius: 999px;
  background: var(--attn-soft); color: var(--attn);
  font-weight: 650; white-space: nowrap;
}
.mention-tag { color: var(--attn); font-weight: 650; }

/* Drop ON a task = crush into it (complete + link); edges still reorder. */
.tcard.task-merge-target {
  outline: 2px solid var(--accent); outline-offset: 1px;
  background: var(--accent-soft);
}
.tcard.shoot-card[draggable="true"] { cursor: grab; }

/* Delegation chips carry the linked task's live state (spec §4). */
.card-chip-state {
  margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--line-soft); color: var(--muted);
  font-size: 10px; font-weight: 650; white-space: nowrap;
}
.card-chip-state.is-done { background: var(--ok-soft); color: var(--ok); }
.card-chip-state.is-stale { background: var(--attn-soft); color: var(--attn); }

/* Thumtest mirrors the approved canvas with the suite's existing paper,
   action, spacing, and radius tokens; only the simulated feed is dark. */
/* The mock feed follows the app theme: real YouTube has light and dark, and a
   creator in light mode wants light-mode YouTube (Seth, 2026-09-02). */
:root {
  --yt-page: #f9f9f9; --yt-thumb: #e5e5e5; --yt-title: #0f0f0f;
  --yt-byline: #606060; --yt-avatar-bg: #d3d3d3; --yt-frame-border: #e0e0e0;
  --yt-skeleton-a: #e6e6e6; --yt-skeleton-b: #f4f4f4;
}
:root[data-theme="dark"] {
  --yt-page: #0f0f0f; --yt-thumb: #353533; --yt-title: #f1f1f1;
  --yt-byline: #aaaaaa; --yt-avatar-bg: #4a4a47; --yt-frame-border: #393936;
  --yt-skeleton-a: #30302e; --yt-skeleton-b: #40403d;
}
.thumbtest-view {
  width: min(1600px, 100%); min-height: calc(100vh - var(--header-h)); margin: 0 auto;
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
}
#thumbtest-view.is-rail-collapsed { width: 100%; grid-template-columns: 1fr; }
#thumbtest-view.is-rail-collapsed .thumbtest-rail { display: none; }
.thumbtest-rail-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; min-height: 32px; margin-right: 4px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--muted); cursor: pointer;
}
.thumbtest-rail-collapse:hover { color: var(--accent); border-color: var(--accent-line); }
.thumbtest-rail-collapse span { transition: transform .15s; }
#thumbtest-view.is-rail-collapsed .thumbtest-rail-collapse span { transform: rotate(180deg); }
.thumbtest-rail {
  min-width: 0; padding: 25px 18px; border-right: 1px solid var(--line-soft);
  background: var(--panel);
}
.thumbtest-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.thumbtest-rail-head h1 { margin: 1px 0 0; font-size: 21px; line-height: 1.2; }
.thumbtest-rail-head button, .thumbtest-create, .thumbtest-toolbar > button,
.thumbtest-layout-switch button, .thumbtest-candidates header button,
.thumbtest-attribution button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); cursor: pointer;
  font-size: 12.5px; font-weight: 650;
}
.thumbtest-rail-head button, .thumbtest-create {
  border-color: var(--action); background: var(--action); color: var(--on-action);
}
.thumbtest-trash-toggle {
  display: flex; align-items: center; gap: 7px; margin: 18px 2px 9px;
  color: var(--muted); font-size: 12px; cursor: pointer;
}
.thumbtest-batch-list { display: grid; gap: 5px; }
.thumbtest-batch-row {
  width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px;
  padding: 7px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.thumbtest-batch-row:hover, .thumbtest-batch-row.is-current {
  border-color: var(--accent-line); background: var(--accent-soft);
}
.thumbtest-batch-row img, .thumbtest-batch-row .thumbtest-rail-placeholder {
  width: 48px; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--line-soft);
  object-fit: cover;
}
.thumbtest-batch-row strong, .thumbtest-batch-row span { display: block; min-width: 0; }
.thumbtest-batch-row strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.thumbtest-batch-row span { color: var(--muted); font-size: 10.5px; }
.thumbtest-rail-empty { color: var(--muted); font-size: 12px; }
.thumbtest-rail-toggle { display: none; }
.thumbtest-stage { min-width: 0; padding: 30px clamp(18px, 3.5vw, 48px) 48px; }
.thumbtest-new { width: min(760px, 100%); margin: 30px auto; }
.thumbtest-new header h1 { margin: 4px 0 5px; font-size: clamp(27px, 3vw, 38px); line-height: 1.15; }
.thumbtest-new header p { max-width: 620px; margin: 0 0 25px; color: var(--muted); }
.thumbtest-drop {
  height: 200px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; border: 1.5px dashed var(--accent-line);
  border-radius: 12px; background: var(--accent-soft); color: var(--muted); cursor: pointer;
}
.thumbtest-drop strong { color: var(--ink); font-size: 16px; }
.thumbtest-drop.is-dragging { border-color: var(--accent); }
.thumbtest-new-previews { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; }
.thumbtest-new-preview { position: relative; flex: 0 0 112px; }
.thumbtest-new-preview img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; object-fit: cover; }
.thumbtest-new-preview span {
  position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 999px;
  background: var(--overlay-strong); color: #fff; font-size: 9px;
}
.thumbtest-new-fields { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 13px; margin-top: 17px; }
.thumbtest-new-fields label, .thumbtest-channel-control { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 650; }
.thumbtest-new-fields input, .thumbtest-title-editor {
  width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink);
}
/* The selects keep .bs-select's chevron: a plain `background:` here reset
   its no-repeat and tiled the arrow across the control (Seth, 2026-09-02). */
.thumbtest-new-fields select, .thumbtest-channel-control select {
  width: 100%; min-height: 39px; padding: 8px 32px 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background-color: var(--panel); color: var(--ink);
}
.thumbtest-title-count { float: right; font-weight: 500; color: var(--muted); }
.thumbtest-title-count.is-full { color: var(--attn); }
.thumbtest-create { min-height: 41px; margin-top: 16px; padding-inline: 16px; }
.thumbtest-create:disabled { opacity: .45; cursor: default; }
.thumbtest-new-error, .thumbtest-status { margin-top: 10px; font-size: 12.5px; }
.thumbtest-new-error, .thumbtest-status.is-error { color: var(--down); }
.thumbtest-status:not(.is-error) { color: var(--muted); }
.thumbtest-health { margin: 8px 0; color: var(--muted); font-size: 11.5px; }
.thumbtest-new .thumbtest-health { margin-top: 14px; }
.thumbtest-toolbar { display: flex; align-items: end; gap: 9px; margin-bottom: 14px; }
.thumbtest-title-wrap { min-width: 180px; margin-right: auto; }
.thumbtest-inline-title {
  max-width: 460px; display: block; overflow: hidden; padding: 0; border: 0;
  background: transparent; color: var(--ink); font-size: 22px; font-weight: 720;
  line-height: 1.25; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: text;
}
.thumbtest-title-editor { min-width: min(420px, 60vw); font-size: 17px; font-weight: 650; }
.thumbtest-updated { display: block; color: var(--attn); font-size: 10.5px; }
.thumbtest-channel-control { width: 150px; }
.thumbtest-layout-switch { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 9px; }
.thumbtest-layout-switch button { min-height: 29px; padding: 4px 8px; border: 0; }
.thumbtest-layout-switch button[aria-pressed="true"] { background: var(--line-soft); color: var(--action); }
.thumbtest-add {
  min-height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; font-weight: 650;
  cursor: pointer;
}
.thumbtest-delete { width: 35px; padding: 0 !important; color: var(--down); }
.thumbtest-attribution { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.thumbtest-youtube-mark {
  width: 22px; height: 16px; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 auto; border-radius: 4px; background: #f00; color: #fff;
}
.thumbtest-attribution button { min-height: 27px; margin-left: auto; padding: 3px 8px; }
.thumbtest-feed-shell {
  width: 100%; min-height: 340px; padding: clamp(14px, 2vw, 24px); border-radius: 12px;
  outline: none; background: var(--yt-page); color: var(--yt-title);
}
.thumbtest-feed-shell:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
/* Three across on desktop, no matter the width (Seth, 2026-09-02); mobile is one. */
.thumbtest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 16px; }
.thumbtest-feed-shell.is-mobile { width: min(390px, 100%); margin-inline: auto; padding: 12px; border: 1px solid var(--yt-frame-border); border-radius: 22px; }
.thumbtest-feed-shell.is-mobile .thumbtest-grid { grid-template-columns: 1fr; gap: 17px; }
.thumbtest-feed-card { min-width: 0; }
.thumbtest-feed-card:nth-child(n+9) { display: block; }
.thumbtest-feed-shell.is-mobile .thumbtest-feed-card:nth-child(n+9) { display: none; }
.thumbtest-feed-image { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--yt-thumb); }
/* cover, not contain: hqdefault is 4:3 with the 16:9 frame letterboxed inside;
   cover crops the bars and shows the real frame (Seth's "weird crop", 2026-09-02). */
.thumbtest-feed-image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumbtest-feed-image.is-failed > img { display: none; }
.thumbtest-duration { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 3px; background: rgba(0,0,0,.78); color: #fff; font-size: 9px; font-weight: 650; }
.thumbtest-feed-meta { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-top: 12px; }
.thumbtest-avatar {
  display: inline-flex; width: 36px; height: 36px; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--yt-avatar-bg);
  color: #fff; font-size: 14px; font-weight: 700; object-fit: cover;
}
.thumbtest-feed-copy { min-width: 0; }
/* YouTube's own title metrics so wraps and truncation land where his do. */
.thumbtest-feed-title {
  display: -webkit-box; overflow: hidden; color: var(--yt-title);
  font-family: "Roboto", "Arial", sans-serif; font-size: 14px;
  font-weight: 500; line-height: 20px; text-decoration: none;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.thumbtest-own-title { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: text; }
.thumbtest-feed-byline { display: block; overflow: hidden; margin-top: 4px; color: var(--yt-byline); font-family: "Roboto", "Arial", sans-serif; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.thumbtest-own-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px; background: rgba(0,0,0,.62); opacity: 0;
  pointer-events: none; transition: opacity .12s;
}
.thumbtest-feed-card.is-own:hover .thumbtest-own-overlay,
.thumbtest-feed-card.is-own:focus-within .thumbtest-own-overlay,
.thumbtest-feed-card.is-overlay-open .thumbtest-own-overlay {
  opacity: 1; pointer-events: auto;
}
.thumbtest-own-overlay button {
  width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%;
  background: rgba(20,20,19,.76); color: #fff; cursor: pointer;
}
.thumbtest-own-overlay button > * { pointer-events: none; }  /* Safari: the icon SVG must not eat the button click */
.thumbtest-own-overlay button[data-decision="kept"] { color: #8cd49a; }
.thumbtest-own-overlay button[data-decision="eliminated"] { color: #ef9696; }
.thumbtest-own-position { min-width: 38px; color: #fff; font-size: 10px; text-align: center; }
.thumbtest-grid.is-loading .thumbtest-feed-image::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--yt-skeleton-a) 25%, var(--yt-skeleton-b) 42%, var(--yt-skeleton-a) 60%); background-size: 240% 100%; animation: thumbtest-skeleton 1.2s linear infinite;
}
@keyframes thumbtest-skeleton { to { background-position: -240% 0; } }
.thumbtest-grid-message { padding: 90px 20px; color: var(--yt-byline); text-align: center; }
.thumbtest-candidates { margin-top: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.thumbtest-candidates header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.thumbtest-candidates header > div { margin-right: auto; }
.thumbtest-candidates header > .thumbtest-strip-nav { display: flex; gap: 4px; margin-right: 0; }
.thumbtest-strip-nav button { width: 30px; padding: 0 !important; }
.thumbtest-candidates header strong, .thumbtest-candidates header span { display: block; }
.thumbtest-candidates header span { color: var(--muted); font-size: 11px; }
.thumbtest-strip { display: flex; gap: 9px; overflow-x: auto; padding: 2px; }
.thumbtest-strip-tile { position: relative; flex: 0 0 112px; padding: 3px; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; }
.thumbtest-strip-tile.is-current { border-color: var(--accent); }
.thumbtest-strip-tile.is-eliminated { opacity: .42; }
.thumbtest-strip-tile img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; object-fit: cover; }
.thumbtest-strip-state { position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 9px; }
.thumbtest-strip-undo { display: block; width: 100%; padding: 2px; border: 0; background: transparent; color: var(--accent); font-size: 10px; cursor: pointer; }
.thumbtest-picker-layer { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: 18px; background: var(--overlay-soft); }
.thumbtest-picker-dialog { width: min(520px, 100%); padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); box-shadow: 0 18px 60px var(--shadow-deep); }
.thumbtest-picker-dialog > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.thumbtest-picker-dialog h2 { margin: 2px 0 15px; font-size: 20px; }
.thumbtest-picker-line { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); text-align: left; cursor: pointer; }
.thumbtest-picker-panel { position: static; width: 100%; margin-top: 7px; box-shadow: none; }
.thumbtest-picker-panel label { display: flex; align-items: center; gap: 7px; padding: 7px 9px; }
.thumbtest-picker-panel input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.thumbtest-toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: var(--z-toast); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 28px); padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; transform: translateX(-50%); background: var(--panel); box-shadow: 0 8px 28px var(--shadow); font-size: 12.5px; }
.thumbtest-toast a { font-weight: 700; cursor: pointer; }
.caption-prompt { position: fixed; right: 18px; bottom: var(--composer-clearance, 76px); z-index: var(--z-toast); display: flex; align-items: center; gap: 9px; max-width: calc(100% - 36px); padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); box-shadow: 0 8px 28px var(--shadow); font-size: 12.5px; }
.caption-prompt.is-overlay-suppressed { display: none; }
.caption-prompt > div { display: grid; gap: 2px; }
.caption-prompt > div span { max-width: 240px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.caption-prompt button { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.caption-prompt button:last-child { color: var(--muted); }

.card-chat > .caption-prompt {
  position: static; right: auto; bottom: auto; z-index: auto; box-sizing: border-box;
  width: 100%; max-width: none; min-height: 36px; flex: 0 0 auto; gap: 7px;
  padding: 6px 8px; border-radius: 8px; box-shadow: none;
}
.card-chat > .caption-prompt > div {
  min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 5px;
  overflow: hidden; white-space: nowrap;
}
.card-chat > .caption-prompt > div strong { flex: 0 0 auto; }
.card-chat > .caption-prompt > div span {
  min-width: 0; max-width: none; flex: 1 1 auto;
}
.card-chat > .caption-prompt button { flex: 0 0 auto; padding: 4px 2px; }

@media (max-width: 600px) {
  .card-chat > .caption-prompt {
    position: sticky; bottom: calc(var(--composer-clearance, 56px) - 12px);
    z-index: var(--z-sticky); transform: translateY(-100%);
  }
}

@media (max-width: 899px) {
  .thumbtest-view { display: block; }
  .thumbtest-stage { padding: 18px 12px 40px; }
  .thumbtest-rail-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 11px 12px 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
  .thumbtest-rail { position: fixed; inset: var(--header-h) auto 0 0; z-index: var(--z-drawer); width: min(300px, 88vw); transform: translateX(-102%); transition: transform .16s ease; box-shadow: 12px 0 28px var(--shadow); }
  .thumbtest-rail.is-open { transform: translateX(0); }
  .thumbtest-toolbar { align-items: center; flex-wrap: wrap; }
  .thumbtest-title-wrap { flex: 1 0 calc(100% - 40px); }
  .thumbtest-channel-control { width: 145px; }
}
@media (max-width: 560px) {
  .thumbtest-new { margin-top: 10px; }
  .thumbtest-new-fields { grid-template-columns: 1fr; }
  .thumbtest-drop { height: 170px; }
  .thumbtest-channel-control { order: 2; width: 100%; }
  .thumbtest-layout-switch { order: 3; }
  .thumbtest-toolbar > #thumbtest-shuffle { order: 4; }
  .thumbtest-add { order: 5; }
  .thumbtest-delete { order: 6; }
  .thumbtest-candidates header { align-items: flex-start; flex-wrap: wrap; }
  .thumbtest-attribution { align-items: flex-start; }
}

/* Attachments behind a header on both card drawers (2026-09-09). Same
   <details> treatment as the Library's production record: no marker, a
   count chip, a chevron that turns, collapsed until you ask. */
.card-attachments { margin: 0; }
.card-attachments.video-fold { margin-right: 16px; margin-left: 16px; }
/* The task drawer's Files header sits AFTER the form that carries the 16 px
   inset, so it hugged the drawer edge (Seth, 2026-09-12: "super close to the
   margin"). Same inset as the fields above it, on both widths. */
.card-drawer .card-attachments.task-files { margin-right: 16px; margin-left: 16px; }
.card-attachments > summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 0; cursor: pointer; user-select: none;
  -webkit-user-select: none; border-radius: 6px;
}
.card-attachments > summary::-webkit-details-marker { display: none; }
.card-attachments > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.card-attachments > summary > .bs-label,
.card-attachments > summary > .video-files-subheading { margin: 0; }
.card-attachments-count {
  font-size: 11px; font-weight: 700; line-height: 1; color: var(--muted);
  padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.card-attachments-chevron {
  margin-left: auto; display: inline-flex; color: var(--muted);
  transition: transform .14s ease;
}
.card-attachments[open] > summary .card-attachments-chevron { transform: rotate(180deg); }
.card-attachments[open] > summary > .bs-label,
.card-attachments[open] > summary > .video-files-subheading,
.card-attachments[open] > summary .card-attachments-count { color: var(--ink); }
.card-attachments > .video-attachments { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .card-attachments-chevron { transition: none; } }
@media (max-width: 899px) {
  .card-attachments > summary { min-height: 44px; }
  /* After the desktop rule above, so the phone inset (14 px, like the form) wins. */
  .card-drawer .card-attachments.task-files { margin-right: 14px; margin-left: 14px; }
  .card-drawer .task-title-field {
    order: initial; min-width: 0; flex: 1 1 auto; flex-basis: auto;
  }
  .card-drawer .task-card-menu-wrap { margin-left: 0; }
}

.pipeline-toolbar .pipeline-new-idea {
  width: 34px; height: 34px; min-height: 34px; flex: 0 0 34px; padding: 0;
}
@media (max-width: 699px) {
  .pipeline-toolbar .pipeline-new-idea { width: 36px; height: 36px; min-height: 36px; flex-basis: 36px; }
  .video-channel-chip { flex: 1 1 90px; max-width: 108px; }
  .video-post-date-chip { flex: 0 0 134px; }
  .video-editor-chip { flex: 1 1 86px; max-width: 104px; }
  .video-chips .card-chip select.bs-select { width: 100%; }
}

/* Phone polish after the 2c/3c rounds (screenshots, 2026-09-11): chips keep
   their full text and wrap instead of truncating, the compact hero keeps
   "Cut 2" on one line and lets the by-line trail off, the empty hero sits on
   the panel tone rather than the black stage, and the pipeline toolbar wraps
   its channel dots under the toggles when the three do not fit. */
.video-cut-hero-line { flex-wrap: nowrap; }
.video-cut-hero-title { white-space: nowrap; flex: 0 0 auto; }
.video-cut-hero-meta {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.video-hero-empty { background: var(--panel); }
.calendar.is-pipeline .video-thumb-picture.thumb-placeholder,
.pipeline-row-thumb.thumb-placeholder,
.video-hero-empty.thumb-placeholder,
.video-cut-poster.thumb-placeholder,
.library-card-frame.thumb-placeholder {
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--panel) 97%, white), var(--panel));
}
@media (max-width: 699px) {
  .video-chips { flex-wrap: wrap; }
  .video-chips .card-chip { flex: 0 1 auto; max-width: 100%; }
  .video-post-date-chip { flex: 0 0 auto; }
  .video-chips .card-chip select.bs-select { width: auto; max-width: 100%; }
  .video-post-date-text { overflow: visible; text-overflow: clip; }
  .pipeline-toolbar { flex-wrap: wrap; row-gap: 6px; }
  .pipeline-toggles { flex: 1 1 auto; }
  .pipeline-channels { margin-left: 0; }
}

/* Chips show their value as text; the select is an invisible overlay. */
.video-channel-chip, .video-editor-chip { position: relative; padding: 4px 11px; gap: 6px; }
.card-chip-text { white-space: nowrap; font-size: 12.5px; line-height: 1.4; }
.card-chip.is-empty .card-chip-text { color: var(--muted); }
.card-chip-chevron { display: inline-flex; align-items: center; color: var(--muted); }
.video-channel-chip select.bs-select, .video-editor-chip select.bs-select {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none;
  min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; background-image: none;
}

/* The two compact add controls share the same optical box. Their SVG used
   to sit on the text baseline, leaving the plus visibly low and right. */
.pipeline-new-idea, .crusher-add {
  display: inline-flex; align-items: center; justify-content: center;
}
.pipeline-new-idea > span, .crusher-add > span {
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
.video-editor-chip select { max-width: none; }

/* The Packaging fold's summary already says Packaging; inside it the mode
   buttons and the Thumbtest button share one row that wraps on the phone
   instead of running off the edge (2026-09-11). */
.video-packaging-heading { justify-content: flex-start; }
.video-packaging-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.video-packaging-actions .video-thumbtest-button { margin-left: auto; }

/* One summary tile on the card; editable variants live in the A/B view. */
.video-packaging-layout {
  display: grid !important; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) !important;
  align-items: start; gap: 10px;
}
.video-ab-thumbnail-wrap { position: relative; min-width: 0; }
.video-packaging-layout .thumbnail-slots { display: block !important; }
.video-packaging-layout .video-alt-titles { display: block !important; min-width: 0; }
.video-packaging-layout .thumbnail-slot { width: 100%; aspect-ratio: 16 / 9; }
.video-packaging-layout .thumbnail-slot.is-filled { cursor: default; }
.video-packaging-layout .thumbnail-slot-number { display: none; }
.video-ab-variant-badge {
  position: absolute; left: 7px; bottom: 7px; z-index: 3; padding: 3px 7px;
  border-radius: 999px; background: rgba(20, 20, 19, .82); color: #fff;
  font-size: 10.5px; font-weight: 750; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.video-ab-menu-wrap { position: absolute; top: 6px; right: 6px; z-index: 4; }
.video-ab-menu-toggle {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .38); border-radius: 7px;
  background: rgba(20, 20, 19, .78); color: #fff; cursor: pointer;
}
.video-ab-menu {
  position: absolute; top: 34px; right: 0; min-width: 150px; padding: 5px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  box-shadow: 0 8px 24px var(--shadow); white-space: nowrap;
}
.video-ab-menu .video-thumbtest-button {
  width: 100%; min-height: 34px; justify-content: flex-start; border: 0;
}
.video-ab-published-title { position: relative; min-width: 0; }
.video-ab-published-title textarea {
  width: 100%; min-height: 44px; overflow: hidden; resize: none;
  padding: 10px 68px 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13px;
  line-height: 1.45; overflow-wrap: anywhere;
}
.video-ab-published-title textarea:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 2px var(--accent-soft);
}
.video-ab-title-copy {
  position: absolute; top: 7px; right: 7px; min-height: 30px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
  color: var(--action); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.video-ab-manual { color: var(--muted); font-size: 11.5px; }
.video-ab-open {
  align-self: flex-start; min-height: 36px; padding: 6px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--action); font: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer; margin-bottom: 16px;
}
.video-attachments-layer {
  position: fixed; inset: 0; z-index: var(--z-dialog); display: flex;
  justify-content: flex-end; background: var(--overlay-strong);
}
.video-attachments-layer[hidden] { display: none; }
.video-attachments-dialog {
  width: min(520px, 100%); height: 100%; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -12px 0 38px var(--shadow); overflow: hidden;
}
.video-attachments-dialog header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.video-attachments-dialog h2, .video-attachments-dialog h3 { margin: 0; }
.video-attachments-dialog h3 { padding: 18px 0 8px; font-size: 13px; }
.video-attachments-body { overflow: auto; padding: 0 20px 28px; }
.video-attachments-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.video-attachments-photos .video-attachment-row { display: block; min-width: 0; }
.video-attachments-photos .video-attachment-preview { display: block; width: 100%; aspect-ratio: 1; }
.video-attachments-photos .video-attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.video-attachments-photos .video-attachment-copy { overflow-wrap: anywhere; }
.video-attachment-origin, .video-attachment-missing { display: block; color: var(--muted); font-size: 11px; }
.video-attachment-missing { color: var(--danger, #e77); }
.video-attachments-handle { display: none; }
.video-attachments-body #video-attachments { overflow: visible; }
.video-attachments-body .video-attachment-row { position: relative; }
.video-attachments-body .video-attachment-copy { display: flex; flex-direction: column;
  align-items: stretch; gap: 2px; overflow: hidden; }
.video-attachments-body .video-attachment-name,
.video-attachments-body .video-attachment-origin { display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.video-attachments-body .video-attachment-origin { color: var(--muted); font-size: 11px; }
.video-attachments-body .video-attachment-actions { position: relative; display: block; z-index: 3; }
.video-attachments-body .video-attachment-actions[open] { z-index: 8; }
.video-attachments-body .video-attachment-actions summary { list-style: none; display: grid;
  place-items: center; width: 28px; height: 28px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel); color: var(--ink); cursor: pointer;
  font-size: 21px; line-height: 1; }
.video-attachments-body .video-attachment-actions summary::-webkit-details-marker { display: none; }
.video-attachments-body .video-attachment-menu { display: none; position: absolute;
  right: 0; top: 30px; min-width: 160px; padding: 4px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); box-shadow: 0 5px 18px var(--shadow); }
.video-attachments-body .video-attachment-actions[open] .video-attachment-menu { display: flex;
  flex-direction: column; }
.video-attachments-body .video-attachment-menu > * { display: block; width: 100%;
  height: auto; min-height: 32px; padding: 7px 9px; margin: 0; border: 0;
  border-radius: 4px; background: transparent; color: var(--ink); text-align: left;
  text-decoration: none; font-size: 12px; cursor: pointer; }
.video-attachments-body .video-attachment-menu > :hover { background: var(--line-soft); }
.video-attachments-body .video-attachment-menu > :disabled { opacity: .4; cursor: default; }
.video-attachments-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.video-attachments-photos .video-attachment-row { display: flex; flex-direction: column;
  align-items: stretch; gap: 3px; padding: 0; border: 0; background: transparent; }
.video-attachments-photos .video-attachment-preview { width: min(112px, 100%);
  height: auto; aspect-ratio: 1; }
.video-attachments-photos .video-attachment-copy { width: 100%; }
.video-attachments-photos .video-attachment-actions { position: absolute; top: 4px; right: 4px; }
.video-attachments-photos .video-attachment-actions[open] { position: absolute; }
@media (max-width: 899px) {
  .video-attachments-layer { align-items: end; }
  .video-attachments-dialog { width: 100%; height: auto; max-height: calc(100dvh - 20px);
    border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; }
  .video-attachments-handle { display: block; width: 40px; height: 4px; margin: 9px auto 0;
    border-radius: 3px; background: var(--line); }
}
.video-notes-file-chip { display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--accent-soft); text-decoration: none; }
.video-notes-file-chip img { width: 19px; height: 19px; object-fit: cover; border-radius: 3px; }
.video-ab-layer {
  position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center;
  padding: 20px; background: var(--overlay-strong);
}
.video-ab-dialog {
  width: min(1180px, 100%); max-height: calc(100dvh - 40px); display: flex;
  flex-direction: column; overflow: hidden; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); box-shadow: 0 22px 70px var(--shadow-deep);
}
.video-ab-head {
  display: grid; grid-template-columns: auto auto minmax(180px, 1fr) auto;
  align-items: center; gap: 10px 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.video-ab-head h2 { margin: 1px 0 0; font-size: 20px; }
.video-ab-meaning { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.video-ab-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.video-ab-head-actions > button:not(.icon-btn) {
  min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--action); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.video-ab-body { min-height: 0; overflow: auto; padding: 16px; }
.video-ab-shared { width: min(520px, 100%); margin: 0 auto 15px; }
.video-ab-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.video-ab-column { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.video-ab-column h3 {
  margin: 0; color: var(--muted); font-size: 12px; line-height: 1;
  letter-spacing: .08em;
}
.video-ab-thumbnail {
  position: relative; width: 100%; aspect-ratio: 16 / 9; display: flex;
  align-items: center; justify-content: center; gap: 6px; overflow: hidden;
  margin: 0; padding: 0; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--video-stage); color: var(--muted); font: inherit;
  font-size: 12px; cursor: pointer;
}
.video-ab-thumbnail.is-filled { border-style: solid; cursor: default; }
.video-ab-thumbnail > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-ab-thumbnail .image-corner-button { opacity: 1; }
.video-ab-thumbnail .video-ab-replace { top: 7px; left: 42px; }
.video-ab-reorder {
  position: absolute; bottom: 7px; left: 7px; z-index: var(--z-sticky);
  display: flex; gap: 4px;
}
.video-ab-reorder button {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--action); box-shadow: 0 2px 8px var(--shadow-soft); cursor: pointer;
}
.video-ab-title-field { position: relative; min-width: 0; }
.video-ab-title-field textarea {
  width: 100%; min-height: 76px; overflow: hidden; resize: none;
  padding: 10px 68px 27px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px;
  line-height: 1.45; overflow-wrap: anywhere;
}
.video-ab-title-field textarea:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 2px var(--accent-soft);
}
.video-ab-title-field .video-ab-title-count {
  position: absolute; right: 9px; bottom: 7px; color: var(--muted);
  font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.video-ab-title-field .video-ab-title-copy { top: 7px; right: 7px; }
.video-ab-mobile-note {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 12px; text-align: center;
}
.video-ab-columns.is-combinations { display: flex; flex-direction: column; gap: 10px; }
.video-ab-combination {
  display: grid; grid-template-columns: 22px minmax(120px, 220px) minmax(0, 1fr);
  align-items: start; gap: 8px; padding: 9px; border: 1px solid var(--line-soft);
  border-radius: 10px; background: var(--bg);
}
.video-ab-combination h3 { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.video-ab-combination .video-ab-thumbnail { cursor: default; }
.video-ab-combination .video-ab-thumbnail.is-filled { border-style: solid; }
.video-ab-read-title {
  min-height: 44px; display: flex; align-items: flex-start; gap: 8px; padding: 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font-size: 13px; line-height: 1.45;
}
.video-ab-read-title span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.video-ab-read-title button {
  min-width: 58px; min-height: 32px; flex: 0 0 auto; padding: 4px 7px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
  color: var(--action); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
@media (min-width: 900px) and (max-width: 1020px) {
  .video-ab-layer { padding: 12px; }
  .video-ab-dialog { max-height: calc(100dvh - 24px); }
  .video-ab-head { grid-template-columns: auto auto 1fr; }
  .video-ab-head-actions { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .video-ab-layer { align-items: end; padding: 0; }
  .video-ab-dialog {
    width: 100%; max-height: calc(100dvh - 20px); border-width: 1px 0 0;
    border-radius: 15px 15px 0 0; box-shadow: 0 -12px 38px var(--shadow);
  }
  .video-ab-head {
    grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px;
    padding: 12px 14px;
  }
  .video-ab-head > div:first-child { min-width: 0; }
  .video-ab-meaning { grid-column: 1 / -1; grid-row: 2; }
  .video-ab-head-actions { grid-column: 2; grid-row: 1; }
  .video-ab-head-actions #video-ab-close { width: 44px; height: 44px; }
  .video-ab-body { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
  .video-ab-columns { grid-template-columns: 1fr; }
  .video-ab-combination {
    grid-template-columns: 20px minmax(92px, 35%) minmax(0, 1fr);
  }
  .video-ab-read-title button { min-height: 44px; }
}
@media (max-width: 620px) {
  .video-packaging-layout {
    grid-template-columns: minmax(120px, 42%) minmax(0, 1fr) !important;
  }
}
@media (max-width: 430px) {
  .video-packaging-layout { grid-template-columns: 1fr !important; }
  .video-ab-menu-toggle, .video-ab-title-copy, .video-ab-open {
    min-width: 44px; min-height: 44px;
  }
  .video-ab-menu-toggle { width: 44px; height: 44px; }
  .video-ab-menu { top: 48px; }
  .video-ab-published-title textarea { padding-right: 78px; }
}

/* v175 shell: persistent left navigation replaces the top header on desktop. */
@media (min-width: 900px) {
  :root { --header-h: 0px; --sidebar-w: 220px; }
  .bs-app-shell { min-height: 100vh; display: flex; align-items: stretch; }
  .bs-page { min-width: 0; flex: 1 1 auto; }
  .bs-sidebar {
    position: sticky; top: 0; z-index: var(--z-header); width: var(--sidebar-w);
    height: 100vh; flex: 0 0 var(--sidebar-w); display: flex; flex-direction: column;
    gap: 7px; padding: 13px 10px 9px; border-right: 1px solid var(--line-soft);
    background: var(--bg); transition: width .14s ease, flex-basis .14s ease;
  }
  .bs-sidebar.is-rail { --sidebar-w: 60px; }
  .bs-sidebar .bs-brand {
    min-height: 38px; flex: 0 0 auto; padding: 4px 7px; overflow: hidden;
    white-space: nowrap;
  }
  .bs-sidebar .bs-brand-mark { width: 24px; height: 24px; flex: 0 0 24px; }
  .bs-sidebar.is-rail .bs-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .bs-sidebar.is-rail .bs-wordmark { display: none; }
  .bs-sidebar .bs-view-switcher {
    display: flex; flex-direction: column; gap: 2px; padding: 0; border-radius: 0;
    background: transparent;
  }
  .bs-sidebar .bs-view-switcher a,
  .bs-sidebar .bs-nav-more,
  .bs-sidebar .bs-header-upload,
  .bs-sidebar .bs-sidebar-bottom > button,
  .bs-sidebar .bs-sidebar-bottom > a,
  .bs-sidebar .bs-attention {
    width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px;
    justify-content: flex-start; padding: 7px 9px; border: 0; border-radius: 8px;
    background: transparent; color: var(--muted); font-size: 13px; font-weight: 500;
    text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .bs-sidebar .bs-sidebar-bottom > .bs-feedback-button {
    min-width: 44px; min-height: 44px;
  }
  .bs-sidebar.is-rail .bs-sidebar-bottom > .bs-feedback-button {
    width: 44px; margin-left: -2px;
  }
  .bs-sidebar .bs-view-switcher a:hover,
  .bs-sidebar .bs-nav-more:hover,
  .bs-sidebar .bs-header-upload:hover,
  .bs-sidebar .bs-sidebar-bottom > button:hover,
  .bs-sidebar .bs-sidebar-bottom > a:hover,
  .bs-sidebar .bs-attention:hover {
    border-color: transparent; background: var(--accent-soft); color: var(--accent);
  }
  .bs-sidebar .bs-view-switcher a.is-current,
  .bs-sidebar .bs-settings-link.is-current {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
    box-shadow: none;
  }
  .bs-sidebar .bs-nav-icon,
  .bs-sidebar .bs-header-upload > [data-icon],
  .bs-sidebar .bs-sidebar-bottom [data-icon] {
    width: 22px; flex: 0 0 22px; display: inline-flex; align-items: center;
    justify-content: center;
  }
  .bs-sidebar .bs-nav-more { display: none; }
  .bs-sidebar-divider { height: 1px; flex: 0 0 1px; margin: 5px 7px; background: var(--line-soft); }
  .bs-sidebar-secondary, .bs-sidebar-secondary-card { display: contents; }
  .bs-more-sheet-handle, .bs-more-sheet-head, .bs-more-links { display: none; }
  .bs-sidebar .bs-header-upload { flex: 0 0 auto; }
  .bs-sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
  .bs-sidebar-identity {
    flex: 0 0 auto; overflow: hidden; padding: 7px 9px; border-top: 1px solid var(--line-soft);
    color: var(--muted); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere;
  }
  .bs-sidebar-identity .bs-ok { color: var(--ok); font-weight: 700; }
  .bs-sidebar .bs-attention-wrap { width: 100%; }
  .bs-sidebar .bs-attention-panel {
    top: auto; right: auto; bottom: 0; left: calc(100% + 10px); width: 330px;
    max-height: min(520px, calc(100vh - 18px));
  }
  .bs-sidebar-toggle {
    width: 100%; min-height: 36px; flex: 0 0 36px; display: flex; align-items: center;
    gap: 10px; padding: 6px 9px; border: 0; border-top: 1px solid var(--line-soft);
    background: transparent; color: var(--muted); font: inherit; font-size: 12px;
    cursor: pointer;
  }
  .bs-sidebar-toggle [data-icon] { width: 22px; flex: 0 0 22px; display: grid; place-items: center; }
  .bs-sidebar.is-rail .bs-view-switcher a,
  .bs-sidebar.is-rail .bs-header-upload,
  .bs-sidebar.is-rail .bs-sidebar-bottom > button,
  .bs-sidebar.is-rail .bs-sidebar-bottom > a,
  .bs-sidebar.is-rail .bs-attention,
  .bs-sidebar.is-rail .bs-sidebar-toggle {
    justify-content: center; padding-left: 0; padding-right: 0;
  }
  .bs-sidebar.is-rail .bs-nav-label,
  .bs-sidebar.is-rail .bs-header-upload-label,
  .bs-sidebar.is-rail .bs-control-label,
  .bs-sidebar.is-rail .bs-sidebar-identity { display: none; }
  .bs-nav-badge {
    min-width: 20px; margin-left: auto; padding: 1px 6px; border-radius: 999px;
    background: var(--attn); color: #1c1c1a; font-size: 10.5px; font-weight: 700;
    line-height: 17px; text-align: center; font-variant-numeric: tabular-nums;
  }
  .bs-sidebar.is-rail .bs-nav-badge {
    position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px;
    line-height: 16px;
  }
  .bs-sidebar.is-rail #nav-inbox { position: relative; }
}

/* Phone shell: four destinations and More stay at thumb reach. The nav is
   sticky inside a fixed bottom slot so its own semantics remain sticky while
   long, window-scrolling views keep their established scroll behavior. */
.bs-phone-brand { display: none; }
@media (max-width: 899px) {
  :root {
    --phone-nav-h: calc(60px + env(safe-area-inset-bottom));
    --header-h: var(--phone-nav-h);
  }
  body { padding-bottom: var(--phone-nav-h); }
  .crusher-view { padding-bottom: calc(var(--phone-nav-h) + 12px); }
  body.nav-more-open { overflow: hidden; }
  .bs-app-shell, .bs-page { min-width: 0; width: 100%; }
  .bs-sidebar {
    position: fixed; inset: auto 0 0; z-index: var(--z-header); height: var(--phone-nav-h);
    pointer-events: none;
  }
  .bs-sidebar > .bs-brand, .bs-sidebar-divider, .bs-sidebar-toggle { display: none; }
  .bs-phone-brand {
    min-height: calc(40px + env(safe-area-inset-top)); display: flex; align-items: center;
    gap: 8px; padding: env(safe-area-inset-top) 14px 0; border-bottom: 1px solid var(--line-soft);
    background: var(--bg); color: var(--ink); text-decoration: none;
  }
  .bs-phone-brand:hover { color: var(--ink); }
  .bs-phone-brand .bs-wordmark { display: inline; font-size: 17px; }
  .bs-phone-brand .bs-mark-accent { stroke: var(--accent); }
  .bs-sidebar .bs-view-switcher {
    position: sticky; bottom: 0; width: 100%; height: var(--phone-nav-h);
    min-height: var(--phone-nav-h); display: flex; align-items: flex-start; gap: 0;
    overflow: visible; padding: 4px 6px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line); border-radius: 0; background: var(--panel);
    box-shadow: 0 -2px 12px var(--shadow-faint); pointer-events: auto;
  }
  .bs-sidebar .bs-view-switcher > a,
  .bs-sidebar .bs-view-switcher > .bs-nav-more {
    min-width: 0; min-height: 44px; flex: 1 1 20%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px; padding: 2px 1px;
    border: 0; border-radius: 8px; background: transparent; color: var(--muted);
    font: inherit; text-decoration: none; box-shadow: none; cursor: pointer;
  }
  .bs-sidebar .bs-view-switcher > a.is-current,
  .bs-sidebar .bs-view-switcher > .bs-nav-more.is-current {
    background: transparent; color: var(--accent); font-weight: 600; box-shadow: none;
  }
  .bs-sidebar .bs-view-switcher > a:hover,
  .bs-sidebar .bs-view-switcher > .bs-nav-more:hover { color: var(--accent); }
  .bs-sidebar .bs-view-switcher > #nav-home,
  .bs-sidebar .bs-view-switcher > #nav-thumbtest,
  .bs-sidebar .bs-view-switcher > #nav-captions { display: none !important; }
  .bs-sidebar .bs-nav-icon {
    width: 22px; height: 22px; display: inline-flex; align-items: center;
    justify-content: center;
  }
  .bs-sidebar .bs-nav-label { display: block; font-size: 10.5px; line-height: 13px; }
  .bs-sidebar .bs-nav-badge {
    position: absolute; top: 1px; left: calc(50% + 6px); min-width: 16px;
    padding: 0 4px; border-radius: 999px; background: var(--attn); color: #1c1c1a;
    font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .bs-sidebar #nav-inbox { position: relative; }
  .bs-sidebar-secondary { display: none; }
  .bs-sidebar-secondary.is-open {
    position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; align-items: flex-end;
    justify-content: center; padding: 16px 0 0; background: var(--overlay-strong);
    pointer-events: auto;
  }
  .bs-sidebar-secondary-card {
    width: min(520px, 100%); max-height: calc(100dvh - 20px); display: flex;
    flex-direction: column; gap: 5px; overflow-y: auto;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid var(--line); border-bottom: 0; border-radius: 15px 15px 0 0;
    background: var(--panel); box-shadow: 0 -8px 28px var(--shadow);
  }
  .bs-more-sheet-handle {
    width: 36px; height: 4px; flex: 0 0 4px; margin: 0 auto 2px;
    border-radius: 3px; background: var(--line);
  }
  .bs-more-sheet-head { min-height: 38px; display: flex; align-items: center; }
  .bs-more-sheet-head strong { font-size: 15px; }
  .bs-more-sheet-head .icon-btn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin-left: auto;
  }
  .bs-more-links, .bs-sidebar-bottom { display: flex; flex-direction: column; gap: 5px; }
  .bs-more-links a,
  .bs-sidebar-secondary .bs-header-upload,
  .bs-sidebar-secondary .bs-sidebar-bottom > button,
  .bs-sidebar-secondary .bs-sidebar-bottom > a,
  .bs-sidebar-secondary .bs-attention {
    width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: flex-start;
    gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--panel); color: var(--ink); font: inherit; font-size: 13px;
    text-align: left; text-decoration: none; cursor: pointer;
  }
  .bs-sidebar-secondary .bs-header-upload-label,
  .bs-sidebar-secondary .bs-control-label { display: inline; }
  .bs-sidebar-secondary .bs-attention-wrap { width: 100%; }
  .bs-sidebar-secondary .bs-attention-panel {
    position: static; width: 100%; max-height: 40dvh; margin-top: 5px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 9px; box-shadow: none;
  }
  .bs-sidebar-secondary .bs-sidebar-identity {
    margin-top: 3px; padding: 10px 11px; border-top: 1px solid var(--line-soft);
    color: var(--muted); font-size: 11px; line-height: 1.4;
  }
  .bs-sidebar-secondary .bs-sidebar-identity .bs-ok { color: var(--ok); font-weight: 700; }
  .settings-feedback-row { align-items: stretch; flex-direction: column; }
  .settings-feedback-row .bs-button-secondary { min-height: 44px; }
  .bootstrap-reconnect { top: 0; }
  .crusher-toolbar { top: 0; }
  .thumbtest-rail { inset: 0 auto 0 0; }
  .crusher-day.is-today, .crusher-day.is-today .dayhead { scroll-margin-top: 76px; }
  .inbox-view {
    height: calc(100dvh - 40px - env(safe-area-inset-top) - var(--phone-nav-h));
    min-height: 0;
  }
  .review-view, .thumbtest-view {
    min-height: calc(100dvh - 40px - env(safe-area-inset-top) - var(--phone-nav-h));
  }
  .card-drawer .task-modal-head,
  .card-drawer .video-modal-head {
    min-height: calc(50px + env(safe-area-inset-top));
  }
  .shell-update-pill { top: calc(10px + env(safe-area-inset-top)); }
}
@media (min-width: 700px) and (max-width: 899px) {
  .pipeline-view {
    height: calc(100dvh - 40px - env(safe-area-inset-top) - var(--phone-nav-h));
    max-height: calc(100dvh - 40px - env(safe-area-inset-top) - var(--phone-nav-h));
  }
}

/* Lane 18: the video drawer is one compact YouTube workspace. The three
   panels stay mounted so tab changes never reset playback, drafts or scroll. */
.video-dialog.card-drawer {
  width: min(1120px, 100vw);
}
.video-dialog .video-modal-head { position: relative; }
.video-card-tabs {
  min-height: 43px; flex: 0 0 43px; display: flex; align-items: end; gap: 3px;
  grid-column: 2; grid-row: 1; padding: 5px 14px 0; border-bottom: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft); background: var(--panel);
}
.video-card-tabs button {
  min-width: 76px; min-height: 37px; padding: 7px 12px; border: 0;
  border-bottom: 2px solid transparent; background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
#video-tab-chat { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#video-tab-notes { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.video-tab-notes-dot {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--action);
}
.video-tab-notes-dot[hidden] { display: none; }
.video-tab-unread {
  padding: 2px 5px; border-radius: 999px; background: var(--accent); color: var(--on-action);
  font-size: 9px; line-height: 1.2; letter-spacing: .01em; white-space: nowrap;
}
.video-card-tabs button[aria-selected="true"] {
  border-bottom-color: var(--action); color: var(--ink);
}
.video-card-tabs button:focus-visible {
  outline: 2px solid var(--action); outline-offset: -3px; border-radius: 7px 7px 0 0;
}
#video-tab-video { display: none; }
.video-modal-global-error {
  flex: 0 0 auto; margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--danger-soft);
}
.video-card-layout {
  min-height: 0; flex: 1 1 auto; display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(340px, 38fr);
  grid-template-rows: 43px minmax(0, 1fr); overflow: hidden;
}
.video-card-panel { min-width: 0; min-height: 0; }
.video-unit-panel { grid-column: 1; grid-row: 1 / 3; overflow: hidden; }
.video-unit-scroll {
  width: 100%; height: 100%; box-sizing: border-box;
  padding-bottom: var(--caption-prompt-height, 0px);
}
.video-dialog .video-comments {
  grid-column: 2; grid-row: 2; width: auto; height: auto; min-height: 0; margin: 0;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 0;
  border-left: 1px solid var(--line-soft);
}
.video-dialog .video-comments .card-chat-head { justify-content: flex-end; }
.video-dialog .video-comments .chat-search { width: min(180px, 100%); }
.video-dialog .video-notes-section {
  grid-column: 2; grid-row: 2; min-height: 0; display: flex; flex-direction: column;
  gap: 7px; overflow-y: auto; padding: 14px; border-top: 0;
  border-left: 1px solid var(--line-soft); background: var(--bg);
}
.video-dialog .video-notes-shell {
  min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column;
}
.video-dialog .video-notes-shell.is-move-target {
  animation: video-notes-move-target 900ms ease-out 1;
}
@keyframes video-notes-move-target {
  0%, 100% { border-color: rgba(85, 72, 50, .18); }
  35% { border-color: var(--action); }
}
.video-dialog .video-notes-shell .rich-editor,
.video-dialog .video-notes-shell .rich-code-editor {
  min-height: 320px; flex: 1 1 auto; overflow-y: auto;
}
.video-dialog .video-notes-shell .paper-notes-toolbar { flex: 0 0 auto; }
.video-dialog .video-notes-shell.is-collapsed .rich-editor {
  max-height: none; overflow-y: auto;
}
.video-dialog .video-notes-shell.is-collapsed::after { display: none; }
.video-unit-panel .video-hero { margin-top: 12px; }
.video-unit-panel .video-cut.is-hero:not(.is-compact) .video-cut-poster,
.video-unit-panel .video-hero-empty {
  width: min(100%, 462px); max-height: 260px; margin-right: auto; margin-left: auto;
}
.video-unit-panel .video-cut.is-hero:not(.is-compact) .video-cut-poster { aspect-ratio: 16 / 9; }
.video-unit-panel .video-hero-empty { max-height: 120px; }
.video-unit-panel .video-cut.is-hero:not(.is-compact) .video-cut-poster img {
  object-fit: contain;
}
.video-unit-scroll > .caption-prompt {
  position: sticky; right: auto; bottom: 12px; z-index: var(--z-sticky);
  width: calc(100% - 32px); min-width: 0; max-width: none; box-sizing: border-box;
  margin: 12px 16px; box-shadow: 0 8px 28px var(--shadow);
}
.video-unit-scroll > .caption-prompt > div {
  min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 5px;
  overflow: hidden; white-space: nowrap;
}
.video-unit-scroll > .caption-prompt > div strong { flex: 0 0 auto; }
.video-unit-scroll > .caption-prompt > div span {
  min-width: 0; max-width: none; flex: 1 1 auto;
}
.video-unit-scroll > .caption-prompt button {
  flex: 0 0 auto; padding: 4px 2px;
}

@media (max-width: 1199px) {
  .video-modal.card-drawer-layer { background: var(--panel); }
  .video-dialog.card-drawer {
    width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none;
    border: 0; box-shadow: none;
  }
  .video-dialog .video-modal-head {
    min-height: var(--header-h); flex-wrap: wrap;
    padding: calc(10px + env(safe-area-inset-top)) 12px 9px;
  }
  .video-dialog .card-drawer-close { display: none !important; }
  .video-card-tabs {
    min-height: 45px; flex-basis: 45px; align-items: stretch; margin-left: 0;
    grid-column: 1; grid-row: 1; padding: 0 8px; border-left: 0;
  }
  .video-card-tabs button { min-height: 44px; flex: 1 1 0; }
  #video-tab-video { display: block; }
  .video-card-layout {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 45px minmax(0, 1fr);
  }
  .video-card-panel { grid-column: 1; grid-row: 2; width: 100%; height: 100%; }
  .video-dialog .video-comments {
    grid-column: 1; grid-row: 2; width: 100%; height: 100%; min-height: 0;
    padding-top: 10px; overflow: hidden; border-left: 0;
  }
  .video-dialog .video-comments .chat-search { width: min(240px, 55vw); }
  .video-dialog .video-notes-section {
    grid-column: 1; grid-row: 2; width: 100%; height: 100%; padding: 14px;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-dialog .video-notes-shell.is-move-target {
    animation: none; border-color: var(--action);
  }
}

@media (max-width: 600px) {
  .video-dialog .video-modal-head { align-items: flex-start; flex-wrap: wrap; }
  .video-dialog .video-title-field {
    order: 5; flex: 1 0 100%; width: 100%; align-self: stretch;
  }
  .video-dialog .video-title-input {
    min-height: 32px; max-height: calc(2.6em + 16px); overflow: hidden;
    text-overflow: clip; white-space: normal;
  }
  .video-dialog .video-modal-head > .icon-btn,
  .video-dialog .video-card-menu-wrap,
  .video-dialog .video-status-pill { flex: 0 0 auto; align-self: flex-start; }
  .video-dialog .video-card-menu-wrap { margin-left: auto; }
  .video-dialog .card-drawer-close { display: inline-flex !important; }
  .video-card-tabs { padding-right: 0; padding-left: 0; }
  .video-unit-panel .video-cut.is-hero:not(.is-compact) .video-cut-poster { width: 100%; max-height: none; }
  .video-unit-panel .video-hero-empty { width: 100%; }
  .video-packaging-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .video-unit-scroll > .caption-prompt {
    left: 0; right: auto; bottom: 10px;
    width: min(calc(100% - 24px), calc(100vw - 24px)); margin: 10px 12px;
  }
  .video-dialog .video-comments .task-comment-form {
    position: static; bottom: auto; box-shadow: 0 -10px 22px var(--shadow);
  }
  .pipeline-toggles {
    width: 100%; flex: 1 1 100%; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
  .pipeline-toggles .pipeline-toggle {
    min-width: 0; display: inline-flex; align-items: center; justify-content: center;
    padding-right: 6px; padding-left: 6px;
  }
  .pipeline-toggles .pipeline-toggle span { flex: 0 0 auto; }
  .pipeline-panel-head { justify-content: space-between; }
  .pipeline-panel-head strong { display: inline; }
}

/* Lane 31: the shoot copy handle overlays the card at every width. The phone
   hit-area rules above set it position: relative, which made it a flex item
   that narrowed the title again. */
.tcard.shoot-card .shoot-copy-handle { position: absolute; }

.driver-chip {
  flex: 0 1 auto; max-width: 17rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; border-radius: 999px; border: 1px solid var(--line);
  padding: .35rem .65rem; background: var(--surface); color: var(--text);
  font: inherit; font-size: .75rem; cursor: pointer;
}
.driver-chip[data-state="pending"] { border-color: #bc8a26; }
.driver-chip[data-state="live"] { border-color: #298658; }
.driver-chip[data-state="working"] { border-color: #457fc0; }
.driver-chip[data-state="offline"] { border-color: #ad6655; }
.driver-chip::before {
  content: ""; display: inline-block; width: .45rem; height: .45rem;
  margin-right: .35rem; border-radius: 50%; background: currentColor;
  vertical-align: middle;
}
.driver-chip[data-state="pending"]::before { background: #bc8a26; }
.driver-chip[data-state="live"]::before { background: #298658; }
.driver-chip[data-state="working"]::before { background: #457fc0; }
.driver-chip[data-state="offline"]::before { background: #ad6655; }
@media (max-width: 699px) {
  .card-drawer .task-title-field { flex: 1 1 0; min-width: 0; }
  .card-drawer .task-modal-head .driver-chip {
    flex: 0 0 auto; max-width: 8.25rem; padding: .3rem .45rem;
  }
}
.chat-route-label { opacity: .72; font-size: .72rem; margin-left: .4rem; }
.driver-claim-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.driver-claim-actions button {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--ink);
  font: inherit; cursor: pointer;
}
.driver-claim-actions [role="status"] { flex-basis: 100%; }
.driver-sheet {
  position: fixed; inset: 0; z-index: var(--z-dialog); display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: var(--overlay-strong);
}
.driver-sheet-card {
  position: relative; box-sizing: border-box; width: min(480px, 100%);
  max-height: calc(100dvh - 32px); overflow: auto; padding: 24px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); color: var(--ink); box-shadow: 0 18px 48px var(--shadow);
}
.driver-sheet-handle { display: none; }
.driver-sheet-card h3 { margin: 0 72px 12px 0; font-size: 18px; line-height: 1.35; }
.driver-sheet-card h4 { margin: 22px 0 8px; font-size: 14px; }
.driver-sheet-card p { margin: 0 0 12px; line-height: 1.5; overflow-wrap: anywhere; }
.driver-sheet-card .driver-state-help, .driver-sheet-card .driver-grant-help,
.driver-enabled-help { color: var(--muted); font-size: 13px; line-height: 1.45; }
.driver-enabled-help { display: block; margin-top: -8px; }
.driver-sheet-card button, .driver-grant-form input, .driver-grant-form select {
  min-height: 44px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink); font: inherit;
}
.driver-sheet-card button { padding: 8px 12px; margin: 0 8px 8px 0; cursor: pointer; }
.driver-sheet-card .driver-sheet-close { position: absolute; top: 18px; right: 16px; margin: 0; }
.driver-hal-sheet .driver-sheet-close { position: static; float: right; }
.driver-hal-sheet p { clear: both; }
.driver-details-disclosure { border-top: 1px solid var(--line); padding-top: 12px; }
.driver-details-disclosure summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }
.driver-toast { position: fixed; z-index: var(--z-dialog); left: 50%; bottom: 28px;
  transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 12px 18px;
  border-radius: 10px; background: var(--ink); color: var(--panel);
  box-shadow: 0 8px 24px var(--shadow); text-align: center; }
.driver-toast[hidden] { display: none; }
.driver-grant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px; align-items: center; border-top: 1px solid var(--line); padding: 12px 0; }
.driver-grant-row span { overflow-wrap: anywhere; }
.driver-grant-row strong, .driver-grant-row small { display: block; }
.driver-grant-row small { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.driver-grant-toggle { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.driver-grant-toggle input, .driver-grant-form input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  flex: 0 0 38px; width: 38px; height: 22px; min-height: 22px;
  margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 999px;
  background: var(--muted); cursor: pointer; position: relative;
}
.driver-grant-toggle input::before, .driver-grant-form input[type="checkbox"]::before {
  content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px;
  border-radius: 50%; background: var(--panel); transition: transform .12s ease;
}
.driver-grant-toggle input:checked, .driver-grant-form input[type="checkbox"]:checked {
  background: var(--accent);
}
.driver-grant-toggle input:checked::before, .driver-grant-form input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}
.driver-grant-toggle input:focus-visible, .driver-grant-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.driver-grant-row button { margin: 0; }
.driver-grant-form { display: grid; gap: 10px; margin-top: 14px; }
.driver-grant-form[hidden] { display: none; }
.driver-grant-form input, .driver-grant-form select { box-sizing: border-box; width: 100%; padding: 8px 10px; }
.driver-grant-form label { display: flex; align-items: center; gap: 8px; }
.driver-grant-form .driver-expiry-label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.driver-grant-form .driver-expiry-label input { color: var(--ink); font-size: 14px; }
@media (max-width: 699px) {
  .driver-sheet { align-items: flex-end; padding: 0; }
  .driver-sheet-card { width: 100%; max-height: min(88dvh, 760px); padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -8px 28px var(--shadow); }
  .driver-sheet-handle { display: block; width: 36px; height: 4px; margin: 0 auto 16px;
    border-radius: 3px; background: var(--line); }
  .driver-grant-row { grid-template-columns: minmax(0, 1fr) auto; }
  .driver-grant-row span { grid-column: 1 / -1; }
}

/* One video card hero and the compact feed/variants controls. */
.video-spot { padding: 14px; }
#video-spot-content { width: 100%; min-width: 0; }
#video-spot-media, .video-card-packaging, #video-spot-status { width: 100%; min-width: 0; }
#video-spot-status { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.video-spot-stage { width: 100%; position: relative; display: flex; justify-content: center;
  align-items: end; gap: 8px; aspect-ratio: 16 / 9; border-radius: 11px;
  overflow: hidden; background: #17191b; }
.video-spot-stage .video-spot-player { position: absolute; inset: 0; width: 100%;
  height: 100%; border-radius: 0; }
.video-spot-stage .video-spot-player.is-thumbnail-only { cursor: default; }
.video-spot-stage .video-spot-upload-action,
.video-spot-stage .video-spot-add-thumbnail { position: relative; z-index: 1;
  margin-bottom: 14px; min-height: 44px; box-shadow: 0 2px 12px #0008; }
.video-spot-stage .video-spot-add-thumbnail { padding: 9px 12px; border: 1px solid #fff8;
  border-radius: 9px; background: #17191bd9; color: #fff; font: inherit;
  font-size: 12px; font-weight: 650; cursor: pointer; }
.video-card-packaging { padding-top: 2px; }
.video-card-packaging .video-packaging-layout { display: block !important; }
.video-card-packaging .video-alt-titles { display: block; min-width: 0; }
.video-feed-heading { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px; color: var(--muted); font-size: 11px;
  font-weight: 700; letter-spacing: .025em; }
.video-title-switches { display: flex; align-items: center; gap: 4px; }
.video-title-switches button { min-width: 30px; min-height: 30px; padding: 4px 7px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
  color: var(--muted); font: inherit; cursor: pointer; }
.video-title-switches button[aria-pressed="true"] { border-color: var(--accent-line);
  background: var(--accent-soft); color: var(--action); }
.video-card-packaging .video-ab-published-title textarea { min-height: 60px;
  max-height: 60px; font-weight: 650; font-size: 14px; line-height: 1.4;
  overflow: auto; }
.video-feed-channel { margin-top: 4px; color: var(--muted); font-size: 11px; }
.video-variants-row { display: flex; align-items: center; gap: 10px; margin-top: 12px;
  min-width: 0; }
.video-variants-row .thumbnail-slots { display: flex !important; gap: 7px;
  min-width: 0; flex: 1 1 auto; overflow-x: auto; padding: 3px 1px 7px;
  scrollbar-width: thin; }
.video-variant-tile { position: relative; flex: 0 0 112px; min-width: 0; margin: 0; }
.video-card-packaging .thumbnail-slot { display: block; width: 112px;
  min-height: 0; height: 63px; aspect-ratio: 16 / 9; border-radius: 8px;
  cursor: pointer; }
.video-card-packaging .thumbnail-slot.is-filled { cursor: pointer; }
.video-card-packaging .thumbnail-slot[aria-pressed="true"] { border: 2px solid var(--action);
  box-shadow: 0 0 0 2px var(--accent-soft); }
.video-card-packaging .thumbnail-slot-number { display: grid; left: 5px; bottom: 5px;
  width: 19px; height: 19px; min-width: 19px; background: #17191be8; color: #fff; }
.video-tile-menu-toggle { position: absolute; top: -5px; right: -5px; z-index: 1;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.video-tile-menu-toggle::before { content: ""; position: absolute; width: 26px;
  height: 26px; border: 1px solid #fff7; border-radius: 50%; background: #17191bc9; }
.video-tile-menu-toggle svg { position: relative; z-index: 1; }
.video-variant-tile .thumbnail-normalization-note { position: static; display: block;
  margin-top: 3px; padding: 0; background: none; color: var(--muted);
  font-size: 10px; line-height: 1.25; }
.video-variant-tile .thumbnail-normalization-note button { color: var(--action); }
.video-card-packaging .video-variant-add { flex: 0 0 76px; width: 76px;
  height: 63px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; border-style: dashed; color: var(--action); }
.video-variant-add span { font-size: 10px; font-weight: 700; }
.video-ab-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.video-card-packaging .video-ab-open { margin: 0; min-height: 36px; }
.video-card-packaging .video-ab-menu-wrap { position: relative; top: auto; right: auto; }
.video-card-packaging .video-ab-menu-toggle { min-height: 36px; width: 36px;
  background: var(--panel); color: var(--action); border: 1px solid var(--line); }
.video-card-packaging .video-ab-menu { top: auto; bottom: calc(100% + 4px); z-index: 20; }
.video-card-packaging .video-ab-manual { padding: 7px 9px; white-space: normal;
  max-width: 195px; }
.video-tile-menu { position: fixed; z-index: 10000; display: flex; flex-direction: column;
  min-width: 165px; max-width: calc(100vw - 16px); padding: 5px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  box-shadow: 0 8px 24px var(--shadow); }
.video-tile-menu button { min-height: 38px; padding: 7px 9px; border: 0;
  border-radius: 6px; background: none; color: var(--ink); text-align: left;
  font: inherit; font-size: 12px; cursor: pointer; }
.video-tile-menu button:hover, .video-tile-menu button:focus-visible {
  background: var(--accent-soft); color: var(--action); }
@media (max-width: 650px) {
  .video-spot { padding: 10px; }
  .video-title-switches button { min-width: 44px; min-height: 44px; }
  .video-variants-row { align-items: start; }
  .video-card-packaging .thumbnail-slot { width: 112px; height: 63px; }
  .video-variant-tile { flex-basis: 112px; }
  .video-card-packaging .video-ab-open { min-height: 44px; padding: 5px 8px; }
  .video-card-packaging .video-ab-menu-toggle { min-height: 44px; width: 44px; }
  .video-tile-menu button { min-height: 44px; }
  .video-variant-tile .thumbnail-normalization-note button { min-height: 44px; }
  .video-card-packaging .video-variant-add { flex-basis: 64px; width: 64px; }
  .video-spot-stage .video-spot-upload-action,
  .video-spot-stage .video-spot-add-thumbnail { margin-bottom: 8px; padding: 5px 8px;
    font-size: 11px; }
}

/* Public agent board */
.board-view { width: 100%; max-width: 1540px; margin: 0 auto; padding: 30px clamp(18px,3vw,46px) 48px; }
.board-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.board-header h1 { margin: 3px 0 8px; font-size: clamp(30px,3vw,42px); letter-spacing: -.035em; }
.board-header p { margin: 0; }
.board-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0,1fr); gap: 16px; min-height: min(700px,calc(100vh - 190px)); }
.board-list-pane,.board-thread-pane { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); min-width: 0; }
.board-list-pane { overflow: hidden; }
.board-list-controls { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line-soft); }
.board-list-controls input { flex: 1; min-width: 0; }
.board-list-controls button { white-space: nowrap; }
.board-list-controls .chat-search { width: 100%; min-height: 44px; font-size: 14px; }
.board-filter-segmented { display: flex; flex: 0 0 auto; padding: 2px; border-radius: 9px; background: var(--line-soft); }
.board-filter-segmented button { min-height: 40px; padding: 4px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.board-filter-segmented button[aria-pressed="true"] { background: var(--panel); color: var(--accent);
  font-weight: 700; box-shadow: 0 1px 2px var(--shadow-soft); }
.board-list { max-height: min(720px,calc(100vh - 245px)); overflow: auto; }
.board-thread-row { display: grid; width: 100%; gap: 8px; padding: 16px; background: transparent; color: var(--ink); text-align: left; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; cursor: pointer; }
.board-thread-row:hover,.board-thread-row.is-selected { background: var(--accent-soft); }
.board-thread-row.is-selected { box-shadow: inset 3px 0 0 var(--accent); }
.board-thread-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.board-thread-row-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.board-unread { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.board-faces { display: flex; padding-left: 3px; }
.board-faces .board-avatar { width: 22px; height: 22px; flex: 0 0 22px; font-size: 8px; margin-left: -3px; border: 2px solid var(--panel); }
.board-avatar { width: 34px; height: 34px; flex: 0 0 34px; aspect-ratio: 1; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: -.02em; }
.board-avatar-agent,.board-avatar-owner-agent { background: color-mix(in srgb,var(--accent) 18%,var(--panel)); }
.board-thread-pane { padding: 0; display: flex; flex-direction: column; }
.board-thread-pane > #board-thread { display: flex; flex-direction: column; min-height: 100%; }
.board-thread-pane > #board-thread[hidden] { display: none; }
.board-thread-heading { display: flex; align-items: start; gap: 14px; padding: 20px 22px 15px; border-bottom: 1px solid var(--line-soft); }
.board-thread-heading > div { flex: 1; min-width: 0; }
.board-thread-heading h2 { margin: 0 0 5px; font-size: 22px; line-height: 1.2; }
.board-thread-heading #board-back { display: none; }
.board-card-links { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 22px; }
.board-card-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 9px; margin-top: 12px; border: 1px solid var(--accent-line); border-radius: 20px; background: var(--accent-soft); color: var(--accent); font-size: 12px; text-decoration: none; }
.board-posts { flex: 1; padding: 10px 22px 25px; overflow: auto; max-height: 570px; }
.board-post { display: flex; align-items: start; gap: 11px; padding: 17px 0; border-bottom: 1px solid var(--line-soft); }
.board-post-content { flex: 1; min-width: 0; }
.board-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 12px; }
.board-post-meta strong { color: var(--ink); font-size: 14px; }
.board-kind { border: 1px solid var(--accent-line); color: var(--accent); border-radius: 10px; padding: 1px 6px; font-size: 10px; }
.board-post-body { margin: 8px 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.48; font-size: 14px; }
.board-text-button { min-height: 44px; border: 0; padding: 8px 12px; margin-right: 4px; color: var(--muted); background: transparent; font-size: 12px; }
.board-inline-editor { margin: 9px 0; }
.board-inline-editor textarea { display: block; box-sizing: border-box; width: 100%; min-height: 84px; resize: vertical; }
.board-inline-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 7px; }
.board-attachments { display: flex; gap: 8px; margin-top: 8px; }
.board-composer { margin: auto 22px 22px; }
.board-composer label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.board-editor-wrap { position: relative; }
.board-composer textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; font: inherit; }
.board-composer .comment-composer-left .bs-note { font-size: 11px; }
.board-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.board-mention-menu { position: absolute; z-index: 20; left: 0; right: 0; bottom: calc(100% + 3px); max-height: 225px; overflow: auto; padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px #0002; }
.board-mention-option { display: block; width: 100%; min-height: 44px; padding: 9px; text-align: left; border: 0; background: transparent; color: var(--ink); }
.board-mention-option:hover,.board-mention-option[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.board-view button,.board-dialog button { min-height: 44px; }
.board-composer .comment-round-button,.board-composer .comment-send-button,
.board-dialog .comment-round-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.board-attachments a { min-height: 44px; display: inline-flex; align-items: center; }
.board-empty { margin: auto; padding: 30px; color: var(--muted); text-align: center; }
.board-dialog { width: min(520px,calc(100vw - 32px)); max-height: min(700px,calc(100vh - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); }
.board-dialog::backdrop { background: #0008; }
.board-dialog h2 { margin: 4px 0 18px; }
.board-dialog label { display: grid; gap: 6px; margin: 10px 0; }
.board-dialog textarea,.board-dialog input { width: 100%; box-sizing: border-box; }
.board-dialog textarea { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); resize: vertical; }
.board-dialog textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.board-dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 20px; }
.settings-agent-add { padding: 16px; margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.settings-agent-add h3 { margin: 0 0 12px; }
.settings-agent-add-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.settings-agent-add-fields label { display: grid; gap: 5px; }
.settings-agent-add-fields input { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width:899px) {
  #nav-board { display: none !important; }
  .board-view { padding: 20px 14px 30px; }
  .board-header { margin-bottom: 16px; }
  .board-header h1 { font-size: 31px; }
  .board-header p { font-size: 12px; }
  .board-layout { display: block; min-height: 0; }
  .board-list-pane { min-height: 55vh; }
  .board-thread-pane { display: none; min-height: calc(100vh - 175px); }
  .board-has-thread .board-list-pane { display: none; }
  .board-has-thread .board-thread-pane { display: flex; }
  .board-thread-heading { padding: 15px; gap: 8px; }
  .board-thread-heading #board-back { display: inline-flex; }
  .board-thread-heading h2 { font-size: 18px; }
  .board-posts { padding: 5px 15px 20px; max-height: none; }
  .board-composer { margin: auto 15px 15px; }
  .board-card-links { padding: 0 15px; }
  .settings-agent-add-fields { grid-template-columns: 1fr; }
}