:root {
  color-scheme: dark;

  /* ---- Brand ----------------------------------------------------------
     Primary:   #FFDD00 yellow, #081F28 navy, #FEFBF6 cream
     Secondary: #4D0614 burgundy, #8BB0FF periwinkle, #858000 olive
     Dark mode is a near-black navy: surfaces step up from the brand navy's
     hue, low enough in saturation that media still reads true, and the
     brand colours carry the accents. Navy stays as the
     ink on yellow fills, the brand's own pairing. */
  --navy: #081f28;
  --cream: #fefbf6;
  --yellow: #ffdd00;
  --burgundy: #4d0614;
  --periwinkle: #8bb0ff;
  --olive: #858000;

  /* Surfaces, deepest to most raised */
  --shell: #03090d;
  --bg: #06121a;
  --surface: #0b1b24;
  --surface-2: #10232d;
  --surface-3: #172c37;
  --line: #1b313c;
  --line-strong: #284250;

  /* Text. Cream, then cool greys that sit with the navy; --ink-3 still
     clears 5:1 on --surface-3. */
  --ink: #fefbf6;
  --ink-2: #c2cbcf;
  --ink-3: #8d9ba3;

  --accent: var(--yellow);
  --accent-ink: var(--navy);
  /* The accent as text, icon or thin line on a UI surface. Identical to the
     yellow here; light mode swaps in a dark olive because yellow on cream
     is ~1.3:1 and disappears. Fills keep --accent in both themes. */
  --accent-text: var(--yellow);
  /* The olive is the yellow's muted sibling. At ~4.6:1 on black it is still a
     fill colour, never text - so it backs the yellow, never carries it. */
  --accent-soft: color-mix(in srgb, var(--olive) 42%, var(--bg));
  --info: var(--periwinkle);
  /* Periwinkle as a fill behind navy text. Separate from --info because
     light mode needs a darker blue for text, but the fill still works. */
  --info-fill: var(--periwinkle);

  /* Approved/rejected need a semantic pair. The burgundy carries rejected as
     a fill, but at ~1.3:1 on black it cannot be text, so --danger is a
     legible tint of the same hue. Green is the one non-brand colour here:
     nothing in the palette reads as "approved". */
  --ok: #5cd6a0;
  --danger: #ff8598;
  --danger-fill: var(--burgundy);

  /* Type scale. 11px is the floor for anything a person has to read. */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 22px;

  /* Media surround. Kept near-black in dark mode and a quiet warm grey in
     light mode - never white, which would skew how a reviewer reads colour. */
  --stage: var(--shell);
  --stage-deep: #02070a;
  /* Chips and hints that sit on top of media are always dark with light
     text, whatever the theme, because the image underneath can be anything. */
  --overlay: rgba(2, 8, 12, .82);
  --overlay-ink: var(--cream);
  --topbar-bg: color-mix(in srgb, var(--bg) 92%, transparent);
  --scrim: rgba(2, 8, 12, .66);
  --backdrop: rgba(2, 8, 12, .8);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 18px 60px rgba(1, 5, 8, .6), 0 2px 8px rgba(1, 5, 8, .4);
  --shadow-sm: 0 8px 26px rgba(1, 5, 8, .5);
  --sidebar-width: 248px;
}

/* ---- Light theme --------------------------------------------------------
   Cream as the page, white as raised surfaces, navy as ink. Every status and
   accent colour that is used as text is darkened to clear 4.5:1 on cream. */
:root[data-theme="light"] {
  color-scheme: light;

  --shell: #f6f2ea;
  --bg: #fefbf6;
  --surface: #ffffff;
  --surface-2: #f6f3ed;
  --surface-3: #ede8df;
  --line: #e7e1d6;
  --line-strong: #d5cdbf;

  --ink: #081f28;
  --ink-2: #3a4d55;
  --ink-3: #62737a;

  --accent-text: #6b5d00;
  --accent-soft: color-mix(in srgb, var(--yellow) 26%, var(--bg));
  --info: #3456b5;
  --ok: #117a50;
  --danger: #b3213f;
  --danger-fill: #f5cdd5;

  --stage: #ece8e0;
  --stage-deep: #e2ddd3;
  --topbar-bg: color-mix(in srgb, var(--bg) 90%, transparent);
  --scrim: rgba(8, 31, 40, .32);
  --backdrop: rgba(8, 31, 40, .42);

  --shadow: 0 18px 50px rgba(8, 31, 40, .14), 0 2px 6px rgba(8, 31, 40, .08);
  --shadow-sm: 0 6px 20px rgba(8, 31, 40, .1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* The UA rule for [hidden] is display:none, which any component rule with its
   own display silently beat. Several controls were visible while the JS
   believed they were hidden. */
[hidden] { display: none !important; }

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .fill, .fill { fill: currentColor; stroke: none; }
svg.flip { transform: rotate(180deg); }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Keyboard users could not see where they were; nothing had a focus style. */
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 9px 13px; border-radius: var(--radius-sm); color: var(--accent-ink); background: var(--accent); font-size: var(--text-sm); font-weight: 650; transform: translateY(-160%); transition: transform .18s; }
.skip-link:focus { transform: none; }

/* ============================== Sidebar ================================= */

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--sidebar-width); display: flex; flex-direction: column;
  padding: 16px 12px 12px; background: var(--shell); border-right: 1px solid var(--line);
  transition: transform .24s ease;
}
.workspace-switcher { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 2px 5px 20px; }
.workspace-switcher > div:nth-child(2) { min-width: 0; }
.workspace-switcher strong { display: block; overflow: hidden; color: var(--ink); font-size: var(--text-md); text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher small { display: flex; align-items: center; gap: 6px; margin-top: 2px; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); white-space: nowrap; }
.workspace-switcher small span { overflow: hidden; text-overflow: ellipsis; }
.brand-mark { display: block; width: 34px; height: 34px; }

.icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.icon-button:hover { color: var(--ink); background: var(--surface-3); }
.icon-button.quiet svg { width: 16px; height: 16px; }
.icon-button.bordered { color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--surface-2); }
.mobile-only { display: none; }

.browse-panel { display: flex; flex-direction: column; min-height: 0; }
.browse-title { padding: 0 10px 6px; }
.browse-title > span { color: var(--ink-3); font-size: var(--text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.browse-list { display: grid; align-content: start; gap: 1px; min-height: 0; overflow-y: auto; padding: 0 2px 2px; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.browse-row { display: flex; align-items: center; gap: 2px; }
.browse-toggle, .browse-toggle-spacer { flex: none; width: 22px; height: 34px; }
.browse-toggle { display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); color: var(--ink-3); background: transparent; cursor: pointer; }
.browse-toggle:hover { color: var(--ink); background: var(--surface-2); }
.browse-toggle svg { width: 12px; height: 12px; transition: transform .15s; }
.browse-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.browse-value { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; flex: 1; min-width: 0; min-height: 34px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); color: var(--ink-2); background: transparent; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.browse-value:hover { color: var(--ink); background: var(--surface-2); }
.browse-value.active { color: var(--ink); background: var(--surface-3); font-weight: 600; }
.browse-value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Counts are reference, not controls - plain muted numbers, no chip. */
.browse-value b { color: var(--ink-3); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.browse-root { font-size: var(--text-md); }
.my-reviews-link { flex: none; margin: 0 2px 16px; }
.my-reviews-link > span { display: flex; align-items: center; gap: 9px; }
.my-reviews-link svg { width: 15px; height: 15px; flex: none; }
/* The one count in the sidebar that asks for action, so it stands out. */
.my-reviews-link b { min-width: 20px; padding: 1px 6px; border-radius: 999px; color: var(--accent-ink); background: var(--accent); font-weight: 700; text-align: center; }
.my-reviews-toggle { height: auto; margin: 6px 0 0 -8px; padding: 4px 8px; font-weight: 500; }
.browse-children { display: grid; gap: 1px; padding-left: 22px; }
.browse-loading { padding: 10px; color: var(--ink-3); font-size: var(--text-sm); }
.read-only-mark { display: grid; color: var(--ink-3); }
.read-only-mark svg { width: 13px; height: 13px; }
/* Production folders and the assets in them can be opened, never changed. */
.library-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.read-only-badge { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); background: var(--surface-2); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.read-only-badge svg { width: 12px; height: 12px; }
.read-only-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-sm); }
.read-only-note svg { flex: none; width: 14px; height: 14px; }
.review-screen.read-only .comment-composer,
.review-screen.read-only .annotation-tools [data-tool]:not([data-tool="pointer"]),
.review-screen.read-only #clearMarkup,
.review-screen.read-only #clickHint,
.review-screen.read-only .comment-action,
.review-screen.read-only .comment-resolve { display: none; }
.review-screen.read-only .decision-button:disabled { cursor: not-allowed; }

.sidebar-spacer { flex: 1; min-height: 12px; }
.live-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ok); }
.live-dot.offline { background: var(--danger); }
.profile-row { display: grid; grid-template-columns: 30px minmax(0,1fr) repeat(3, auto); gap: 4px 8px; align-items: center; width: 100%; padding: 12px 4px 2px 7px; border-top: 1px solid var(--line); color: var(--ink-2); }
.profile-row span:first-child { display: grid; place-items: center; }
.profile-row strong, .profile-row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-row strong, .profile-row small { display: block; }
.profile-row strong { color: var(--ink); font-size: var(--text-sm); }
.profile-row small { margin-top: 1px; color: var(--ink-3); font-size: var(--text-xs); }

.avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; overflow: hidden; border-radius: 50%; color: var(--cream); font-size: var(--text-xs); font-weight: 700; }
.avatar-mention-0 { color: var(--accent-ink); background: var(--info); }
.avatar-mention-1 { color: var(--accent-ink); background: var(--accent); }
.avatar-mention-2 { color: var(--cream); background: var(--burgundy); }
.avatar-group { color: var(--ink); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Sits over the panel's border; the visible line only appears on hover/drag. */
.resize-handle { position: absolute; z-index: 5; top: 0; bottom: 0; width: 9px; cursor: col-resize; touch-action: none; }
.resize-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background .15s; }
.resize-handle:hover::after, .resize-handle:focus-visible::after, .is-resizing .resize-handle::after { left: 3px; width: 3px; background: var(--accent-text); }
.resize-handle:focus-visible { outline: none; }
#sidebarResize { right: -5px; }
#panelResize { left: -5px; }
/* Stops text selection and iframe/video pointer grabs mid-drag. */
.is-resizing { cursor: col-resize; user-select: none; }
.is-resizing *:not(.resize-handle) { pointer-events: none; }
.is-resizing .sidebar, .is-resizing .main-content { transition: none; }
.sidebar-scrim { position: fixed; z-index: 35; inset: 0; background: var(--scrim); }

/* ============================== Top bar ================================= */

.main-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(14px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; }
.topbar-left { flex: 1; min-width: 0; gap: 8px; }
.topbar-actions { flex: none; gap: 10px; }
.global-search { display: flex; align-items: center; width: min(420px, 100%); height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: box-shadow .2s, border-color .2s; }
.global-search:hover { border-color: var(--line-strong); }
.global-search:focus-within { border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent); }
.global-search svg { width: 16px; height: 16px; color: var(--ink-3); }
.global-search input { flex: 1; min-width: 0; padding: 0 8px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: var(--text-sm); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
kbd { flex: none; padding: 2px 5px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink-3); background: var(--bg); font-family: inherit; font-size: var(--text-xs); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 650; cursor: pointer; transition: transform .12s, background .15s, border-color .15s; }
.button:active { transform: translateY(1px); }
.button svg { width: 16px; height: 16px; }
.button.primary { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.button.primary:hover { background: color-mix(in srgb, var(--yellow) 82%, var(--cream)); }
.button.primary:disabled { color: var(--ink-3); border-color: var(--line); background: var(--surface-2); cursor: not-allowed; }
.button.secondary { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.button.secondary:hover { border-color: var(--info); background: var(--surface-3); }
.button.text-button { color: var(--ink-2); background: transparent; }
.button.text-button:hover { color: var(--ink); background: var(--surface-2); }
.mobile-menu, .mobile-search-button { display: none; }

/* ============================ Library screen ============================ */

.library-screen { max-width: 1560px; margin: 0 auto; padding: 28px 28px 72px; }
.library-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.library-headline { min-width: 0; }
.library-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.library-crumbs button { padding: 0; border: 0; color: var(--ink-3); background: transparent; font-size: var(--text-sm); cursor: pointer; }
.library-crumbs button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.library-crumbs span { display: grid; color: var(--ink-3); }
.library-crumbs svg { width: 12px; height: 12px; }
.library-hero h1 { margin: 0; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.15; letter-spacing: -.025em; }
.library-hero p { margin: 6px 0 0; color: var(--ink-3); font-size: var(--text-md); font-variant-numeric: tabular-nums; }

/* Content type sits under the folder title as the way into a campaign, so it
   reads as navigation - filled chips - rather than the outlined status pills. */
.category-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.category-bar[hidden] { display: none; }
.category-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 8px; background: var(--surface-2);
  color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.category-pill:hover { color: var(--ink); background: var(--surface-3); }
.category-pill b { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.category-pill.is-unset span { font-style: italic; }
.category-pill.active { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }
.category-pill.active b { color: var(--accent-text); }

/* Approval status is the whole point of the tool, so it leads the toolbar -
   one row of pills that doubles as the status filter. */
.library-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 22px 0 16px; }
.status-bar { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.status-tile {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--ink-2); font-size: var(--text-sm); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.status-tile:hover { border-color: var(--line-strong); color: var(--ink); }
.status-tile b { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.status-tile i { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.status-tile[data-status="not_reviewed"] i { background: var(--ink-3); }
.status-tile[data-status="in_review"] i { background: var(--info); }
.status-tile[data-status="approved"] i { background: var(--ok); }
.status-tile[data-status="rejected"] i { background: var(--danger); }
.status-tile.active { border-color: var(--ink); color: var(--ink); background: var(--surface-3); font-weight: 600; }
.status-tile.active b { color: var(--ink-2); }
.status-tile.is-mine svg { width: 13px; height: 13px; flex: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 16px; }
.active-filters:empty { display: none; }
.active-filters button { display: inline-flex; flex: none; gap: 6px; align-items: center; min-height: 30px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); background: var(--surface-2); font-size: var(--text-sm); cursor: pointer; }
.active-filters button:hover { border-color: var(--info); }
.active-filters button span { color: var(--ink-3); }
.active-filters button svg { width: 12px; height: 12px; color: var(--ink-3); }
.view-actions { display: flex; align-items: center; gap: 8px; }
.filter-button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); background: var(--surface); font-size: var(--text-sm); cursor: pointer; }
.filter-button:hover { color: var(--ink); border-color: var(--line-strong); }
.filter-button svg { width: 15px; height: 15px; }
.filter-button b { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 6px; color: var(--accent-ink); background: var(--accent); font-size: var(--text-xs); }
.sort-control { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); background: var(--surface); }
.sort-control:hover { border-color: var(--line-strong); }
.sort-control:focus-within { border-color: var(--info); }
.sort-control svg { width: 15px; height: 15px; flex: none; }
.sort-control select { border: 0; outline: 0; color: var(--ink); background: transparent; font-size: var(--text-sm); cursor: pointer; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.segmented button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 6px; color: var(--ink-3); background: transparent; cursor: pointer; }
.segmented button:hover { color: var(--ink); }
.segmented button.active { color: var(--ink); background: var(--surface-3); }
.segmented svg { width: 15px; height: 15px; }

/* ============================== Asset grid ============================== */

.asset-grid { display: block; }
/* Groups are tall; letting the browser skip layout and paint for the ones
   off-screen is the difference between a smooth and a stuttering scroll at
   241 assets. */
.market-group { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.market-group + .market-group { margin-top: 30px; }

.group-header {
  position: sticky; top: 60px; z-index: 5;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 2px; margin-bottom: 14px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--bg); color: var(--ink); text-align: left; cursor: pointer;
}
.group-header:hover .group-title { color: var(--info); }
.group-chevron { display: grid; flex: none; color: var(--ink-3); transition: transform .18s; }
.group-chevron svg { width: 15px; height: 15px; }
.group-header[aria-expanded="true"] .group-chevron { transform: rotate(90deg); }
.group-heading { min-width: 0; flex: 1; }
.group-title { display: block; overflow: hidden; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.group-path { display: block; margin-top: 2px; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.group-count { flex: none; min-width: 24px; color: var(--ink-3); font-size: var(--text-sm); text-align: right; font-variant-numeric: tabular-nums; }
.group-statuses { display: flex; flex: none; gap: 4px; }
.group-statuses i { width: 6px; height: 16px; border-radius: 3px; }
.group-statuses i.not_reviewed { background: color-mix(in srgb, var(--ink-2) 38%, var(--bg)); }
.group-statuses i.in_review { background: var(--info); }
.group-statuses i.approved { background: var(--ok); }
.group-statuses i.rejected { background: var(--danger); }

.group-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; }
.asset-card { min-width: 0; }
.asset-grid.first-paint .asset-card { animation: card-in .3s both; }
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.asset-preview {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.asset-card:hover .asset-preview { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
/* Assets are padded, never cropped - a reviewer needs the whole frame. */
.asset-preview img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--surface-2); }
.preview-top { position: absolute; z-index: 2; top: 8px; right: 8px; left: 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; pointer-events: none; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px; border: 1px solid; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.status-pill::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.status-pill.not-reviewed { color: var(--ink-2); border-color: color-mix(in srgb, var(--ink-2) 24%, transparent); background: color-mix(in srgb, var(--ink-2) 6%, var(--surface)); }
.status-pill.in-review { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 10%, var(--surface)); }
.status-pill.approved { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.status-pill.rejected { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); background: color-mix(in srgb, var(--danger-fill) 50%, var(--surface)); }

.duration-badge, .comment-badge { position: absolute; z-index: 2; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 7px; border-radius: 6px; color: var(--overlay-ink); background: var(--overlay); font-size: var(--text-xs); }
.version-badge { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 22px; padding: 0 7px; border-radius: 6px; color: var(--overlay-ink); background: var(--overlay); font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.version-badge svg { width: 12px; height: 12px; }
.duration-badge { right: 8px; font-variant-numeric: tabular-nums; }
.comment-badge { left: 8px; }
.duration-badge svg, .comment-badge svg { width: 11px; height: 11px; }

.asset-info { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; padding: 9px 2px 0; }
.asset-info > :not(.card-reviewers) { grid-column: 1; }
.card-reviewers { display: flex; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.list-view .card-reviewers { grid-row: 1; }
.asset-info strong { display: block; overflow: hidden; color: var(--ink); font-size: var(--text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.asset-info small { display: block; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

.asset-grid.list-view .group-asset-grid { grid-template-columns: 1fr; gap: 0; }
.list-headings, .list-view .asset-card { display: grid; grid-template-columns: 72px minmax(160px, 1fr) minmax(120px, .45fr) minmax(100px, .35fr) 124px; gap: 14px; align-items: center; }
.list-headings { padding: 0 4px 8px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.list-view .asset-card { min-height: 76px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.list-view .asset-card:hover { background: color-mix(in srgb, var(--surface-2) 62%, transparent); }
.list-view .asset-preview { aspect-ratio: 4 / 3; border-radius: 7px; }
.list-view .preview-top, .list-view .comment-badge, .list-view .duration-badge { display: none; }
.list-view .asset-info { padding: 0; }
.list-view .asset-info small { display: none; }
.list-file, .list-updated { display: none; }
.list-view .list-file, .list-view .list-updated { display: block; min-width: 0; overflow: hidden; color: var(--ink-2); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.list-view .list-file small { display: block; color: var(--ink-3); font-size: var(--text-xs); }
.list-view .list-status { justify-self: start; }
.list-view .list-status { display: inline-flex; }
.list-status { display: none; }
.render-progress { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); background: var(--surface); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.grid-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; }
.grid-skeleton i { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 260% 100%; animation: shimmer 1.3s infinite linear; }
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }

.empty-state { padding: 64px 0; color: var(--ink-2); text-align: center; }
.empty-state > div { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; color: var(--info); background: var(--surface); }
.empty-state h2 { margin: 0 0 5px; color: var(--ink); font-size: var(--text-xl); }
.empty-state p { margin: 0 0 18px; font-size: var(--text-md); }

/* =========================== Review workspace =========================== */

.review-screen { position: fixed; z-index: 100; inset: 0; display: grid; grid-template-rows: 58px 1fr; color: var(--ink); background: var(--shell); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.review-screen.open { opacity: 1; visibility: visible; }
.review-topbar { position: relative; z-index: 20; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.review-titlebar, .review-actions, .review-center-tools { display: flex; align-items: center; }
.review-titlebar { min-width: 0; gap: 8px; }
.review-title { min-width: 0; }
.review-title strong, .review-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-title strong { color: var(--ink); font-size: var(--text-md); }
.review-title span { color: var(--ink-3); font-size: var(--text-xs); }
.review-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--ink-2); background: transparent; cursor: pointer; transition: background .15s, color .15s; }
.review-icon:hover { color: var(--ink); background: var(--surface-3); }
.review-icon[aria-pressed="true"] { color: var(--accent-text); background: var(--surface-3); }
.review-icon svg { width: 18px; height: 18px; }
.review-icon.small { width: 30px; height: 30px; }
.review-icon.small svg { width: 15px; height: 15px; }
.review-center-tools { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.review-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; color: var(--ink-2); background: transparent; font-size: var(--text-sm); cursor: pointer; }
.review-tool:hover:not(:disabled) { color: var(--ink); background: var(--surface-3); }
.review-tool:disabled { color: var(--ink-3); opacity: .45; cursor: not-allowed; }
.review-tool svg { width: 14px; height: 14px; }
.review-position { min-width: 96px; padding: 0 6px; color: var(--ink-2); font-size: var(--text-sm); text-align: center; font-variant-numeric: tabular-nums; }
.review-actions { justify-self: end; gap: 6px; }

.decision-wrap, .reviewers-wrap { position: relative; }

/* Avatars overlap in a stack, on cards and on the review screen's reviewer button. */
.card-reviewers .avatar, .avatar-stack .avatar { width: 22px; height: 22px; font-size: 9px; box-shadow: 0 0 0 2px var(--bg); }
.card-reviewers .avatar + .avatar, .avatar-stack .avatar + .avatar { margin-left: -6px; }
.card-reviewers .avatar.is-me { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }
.avatar-more { color: var(--ink-2); background: var(--surface-3); }
.avatar-stack { display: flex; }
.avatar-stack:empty { display: none; }

.reviewers-button { display: inline-flex; align-items: center; gap: 7px; max-width: 200px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); background: transparent; font-size: var(--text-sm); cursor: pointer; }
.reviewers-button:hover:not(:disabled) { color: var(--ink); background: var(--surface-3); }
.reviewers-button:disabled { cursor: not-allowed; }
.reviewers-button > svg { width: 14px; height: 14px; flex: none; }
.reviewers-button:has(.avatar-stack:not(:empty)) > svg { display: none; }
.reviewers-button #reviewersLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reviewers-button .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--bg); }

.reviewers-menu { position: absolute; z-index: 50; top: 42px; right: 0; display: grid; gap: 6px; width: 290px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.reviewers-menu input[type="search"] { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-2); font: inherit; font-size: var(--text-sm); }
.reviewer-list { max-height: 280px; overflow-y: auto; }
.reviewer-option { display: grid; grid-template-columns: 16px 26px minmax(0,1fr); gap: 9px; align-items: center; padding: 7px; border-radius: 6px; cursor: pointer; }
.reviewer-option:hover { background: var(--surface-3); }
.reviewer-option input { margin: 0; accent-color: var(--accent); }
.reviewer-option .avatar { width: 26px; height: 26px; }
.reviewer-option strong { display: block; overflow: hidden; color: var(--ink); font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.reviewer-option strong small { color: var(--ink-3); font-weight: 400; }
.reviewer-option > span:last-child small { display: block; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.reviewer-empty { padding: 10px 8px; color: var(--ink-3); font-size: var(--text-sm); }
.decision-button { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-2); text-align: left; cursor: pointer; }
.decision-button:hover { background: var(--surface-3); }
.decision-button:disabled { opacity: .6; cursor: progress; }
.decision-button svg { width: 14px; height: 14px; color: var(--ink-3); transform: rotate(90deg); }
.decision-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: currentColor; }
.decision-label-wrap { display: grid; min-width: 0; }
.decision-label-wrap small { color: var(--ink-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.decision-label-wrap > span { font-size: var(--text-sm); font-weight: 650; line-height: 1.3; white-space: nowrap; }
.decision-button.not-reviewed { color: var(--ink-2); }
.decision-button.in-review { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.decision-button.approved { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.decision-button.rejected { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.decision-button.not-reviewed .decision-label-wrap > span,
.decision-button.in-review .decision-label-wrap > span,
.decision-button.approved .decision-label-wrap > span,
.decision-button.rejected .decision-label-wrap > span { color: currentColor; }

.decision-menu { position: absolute; z-index: 50; top: 42px; right: 0; width: 262px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.decision-menu button { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 9px 8px; border: 0; border-radius: var(--radius-sm); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.decision-menu button:hover { background: var(--surface-3); }
.decision-menu strong { display: block; font-size: var(--text-md); font-weight: 600; }
.decision-menu .current { color: var(--ink-3); font-size: var(--text-xs); }
.decision-menu .decision-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); font-style: normal; }
.decision-menu .decision-icon svg { width: 15px; height: 15px; }
.decision-icon.not-reviewed { color: var(--ink-2); background: color-mix(in srgb, var(--ink-2) 12%, var(--bg)); }
.decision-icon.in-review { color: var(--info); background: color-mix(in srgb, var(--info) 16%, var(--bg)); }
.decision-icon.approved { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--bg)); }
.decision-icon.rejected { color: var(--danger); background: color-mix(in srgb, var(--danger-fill) 70%, var(--bg)); }
.decision-hint { padding: 7px 9px 5px; color: var(--ink-3); font-size: var(--text-xs); border-top: 1px solid var(--line); margin-top: 4px; }

.review-workspace { display: grid; grid-template-columns: 52px minmax(0, 1fr) var(--panel-width, 340px); min-height: 0; }
.review-workspace.comments-hidden { grid-template-columns: 52px minmax(0, 1fr) 0; }
.review-workspace.comments-hidden .comments-panel { display: none; }
.annotation-tools { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-right: 1px solid var(--line); background: var(--bg); }
.annotation-tools button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--ink-3); background: transparent; cursor: pointer; }
.annotation-tools button:hover { color: var(--ink); background: var(--surface-3); }
.annotation-tools button.active { color: var(--accent-text); background: var(--surface-3); box-shadow: inset 2px 0 var(--accent-text); }
.annotation-tools button::after { content: attr(data-tooltip); position: absolute; z-index: 100; top: 50%; left: 44px; width: max-content; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: var(--surface); font-size: var(--text-xs); opacity: 0; pointer-events: none; transform: translate(3px,-50%); transition: opacity .15s, transform .15s; }
.annotation-tools button:hover::after, .annotation-tools button:focus-visible::after { opacity: 1; transform: translate(0,-50%); }
.annotation-tools svg { width: 17px; height: 17px; }
.annotation-tools > span { flex: 1; }

.media-column { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; background: var(--shell); }
/* container-type: size lets the frame below size itself from the stage in
   cqh units. Chaining max-height:100% through auto-height ancestors never
   resolves, so a 9:16 asset used to overflow and get clipped by the stage. */
.media-stage { position: relative; container-type: size; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; padding: 22px 28px; background: var(--stage); }
/* The frame is exactly the fitted media box: the narrower of the stage width
   and (stage height x asset ratio). Pin coordinates are percentages of this
   frame, so it has to match what the reviewer can actually see - hence
   object-fit: contain into a frame that already has the asset's ratio. */
.media-frame {
  position: relative;
  aspect-ratio: var(--asset-ratio, 1.5);
  width: min(100%, calc(100cqh * var(--asset-ratio, 1.5)));
  line-height: 0;
  box-shadow: var(--shadow-sm);
  user-select: none;
  touch-action: none;
}
.media-frame.comment-mode { cursor: crosshair; }
.media-frame.draw-mode { cursor: crosshair; }
/* Zoom transforms the frame from its centre; the stage already clips it. */
.media-frame { transform-origin: center; }
.media-stage.is-zoomed .media-frame:not(.comment-mode):not(.draw-mode) { cursor: grab; }
.media-stage.is-panning, .media-stage.is-panning .media-frame { cursor: grabbing !important; }
.zoom-controls { position: absolute; z-index: 11; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-sm); color: var(--overlay-ink); background: var(--overlay); backdrop-filter: blur(8px); opacity: .72; transition: opacity .15s; }
.zoom-controls:hover, .zoom-controls:focus-within, .is-zoomed .zoom-controls { opacity: 1; }
.zoom-controls .review-icon { color: inherit; font-size: 17px; line-height: 1; }
.zoom-level { min-width: 50px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; color: inherit; background: transparent; font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; }
.zoom-level:disabled, .zoom-controls .review-icon:disabled { cursor: default; opacity: .5; }
.zoom-level:not(:disabled):hover { background: rgba(255,255,255,.1); }
.media-stage:has(.compare-stage:not([hidden])) .zoom-controls { display: none; }
/* No min-width here: it used to stretch 9:16 video into a landscape box. */
.media-frame img, .media-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.media-frame video { background: var(--stage-deep); }
.media-loader { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--stage-deep) 60%, transparent); }
.media-loader span { width: 26px; height: 26px; border: 2px solid var(--line-strong); border-top-color: var(--accent-text); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


.pin-layer, .drawing-layer { position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.annotation-pin { position: absolute; display: grid; place-items: center; width: calc(26px / var(--zoom, 1)); height: calc(26px / var(--zoom, 1)); border: calc(2px / var(--zoom, 1)) solid var(--cream); border-radius: 50% 50% 50% 2px; color: var(--accent-ink); background: var(--accent); box-shadow: 0 3px 10px rgba(2,10,14,.42); font-size: calc(var(--text-xs) / var(--zoom, 1)); font-weight: 800; line-height: 1; transform: translate(-50%,-90%) rotate(-45deg); cursor: pointer; pointer-events: auto; }
.annotation-pin span { transform: rotate(45deg); }
.annotation-pin.pending-pin { background: var(--info-fill); }
.click-hint { position: absolute; z-index: 10; bottom: 16px; left: 50%; padding: 9px 13px; border: 0; border-radius: var(--radius-sm); color: var(--overlay-ink); background: var(--overlay); backdrop-filter: blur(8px); font-size: var(--text-sm); line-height: 1; opacity: 0; pointer-events: none; transform: translate(-50%,8px); transition: opacity .18s, transform .18s; }
.media-stage:has(.comment-mode) .click-hint { opacity: 1; transform: translate(-50%,0); }

.transport { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 15px; border-top: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: var(--text-sm); }
.transport-play { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 7px; color: var(--accent-ink); background: var(--accent); cursor: pointer; }
.transport-play svg { width: 14px; height: 14px; }
.time-read { flex: none; min-width: 42px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.timeline { position: relative; flex: 1; height: 20px; cursor: ew-resize; touch-action: none; }
.timeline::before { content: ''; position: absolute; top: 8px; right: 0; left: 0; height: 5px; border-radius: 4px; background: var(--line-strong); }
.timeline-progress { position: absolute; top: 8px; left: 0; width: 0; height: 5px; border-radius: 4px; background: var(--accent-text); pointer-events: none; }
.timeline-progress::after { content: ''; position: absolute; top: 50%; right: -6px; width: 13px; height: 13px; border: 2px solid var(--bg); border-radius: 50%; background: var(--accent-text); transform: translateY(-50%); }
.timeline-ranges { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.timeline-pin { position: absolute; top: 5px; width: 9px; height: 9px; border: 1.5px solid var(--bg); border-radius: 50%; background: var(--info-fill); }
.timeline-comment-range { position: absolute; top: 7px; height: 7px; border-radius: 4px; background: var(--info-fill); box-shadow: 0 0 0 1px var(--bg); }
.audio-button[aria-pressed="true"] { color: var(--accent-text); background: var(--surface-3); }

.version-strip { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; min-width: 0; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg); }
.filmstrip { display: flex; min-width: 0; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.film-shift { display: grid; place-items: center; width: 40px; height: 56px; flex: none; padding: 0; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink-2); background: var(--surface-2); cursor: pointer; }
.film-shift:hover { color: var(--ink); background: var(--surface-3); }
.film-shift svg { width: 16px; height: 16px; }
.film-shift[data-filmshift^="-"] svg { transform: rotate(180deg); }
.film-thumb { position: relative; width: 86px; height: 56px; padding: 0; flex: none; overflow: hidden; border: 2px solid transparent; border-radius: 7px; background: var(--surface-2); cursor: pointer; }
.film-thumb img { width: 100%; height: 100%; object-fit: contain; opacity: .6; transition: opacity .15s; }
.film-thumb.active { border-color: var(--accent-text); }
.film-thumb.active img, .film-thumb:hover img { opacity: 1; }
.film-thumb i { position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border: 1px solid rgba(2,10,14,.45); border-radius: 50%; }
.film-thumb i.not_reviewed { background: var(--ink-2); }
.film-thumb i.in_review { background: var(--info); }
.film-thumb i.approved { background: var(--ok); }
.film-thumb i.rejected { background: var(--danger); }

/* ============================ Comments panel ============================ */

.comments-panel { position: relative; display: grid; grid-template-rows: 50px minmax(0,1fr); grid-template-columns: minmax(0,1fr); min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
.comments-header { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); }
/* Three tabs overran the close button in the 300px tablet panel; they now
   scroll sideways instead of colliding. */
.panel-tabs { display: flex; align-self: stretch; gap: 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs button { position: relative; flex: none; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--ink-3); background: transparent; font-size: var(--text-md); cursor: pointer; }
.panel-tabs button:hover { color: var(--ink-2); }
.panel-tabs button.active { color: var(--ink); font-weight: 650; }
.panel-tabs button.active::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--accent-text); }
.panel-tabs b { display: inline-grid; place-items: center; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 6px; color: var(--ink-2); background: var(--surface-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.panel-tabs button.active b { color: var(--accent-ink); background: var(--accent); }
.panel-pane { display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 0; }
.comments-header .review-icon { align-self: center; }
.details-pane { grid-template-rows: minmax(0,1fr); overflow-y: auto; }
.details-list { display: grid; grid-template-columns: 1fr; align-content: start; gap: 0; margin: 0; padding: 6px 16px 18px; }
.details-list > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.details-list dt { color: var(--ink-3); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; }
.details-list dd { margin: 3px 0 0; color: var(--ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
.comments-list { min-height: 0; overflow-y: auto; padding: 6px 14px 16px; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.comment { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.comment-head { display: flex; align-items: baseline; gap: 7px; }
.comment-head strong { color: var(--ink); font-size: var(--text-sm); }
.comment-head span { color: var(--ink-3); font-size: var(--text-xs); }
.comment p { margin: 5px 0 8px; color: var(--ink-2); font-size: var(--text-md); line-height: 1.5; overflow-wrap: anywhere; }
.comment-meta { display: flex; align-items: center; gap: 6px; }
.comment-time { display: inline-flex; gap: 5px; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink-2); background: var(--surface-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; }
.comment-time:hover { color: var(--accent-ink); border-color: var(--info-fill); background: var(--info-fill); }
.comment-time::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-text); }
.comment-resolve { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; color: var(--ink-3); background: transparent; font-size: var(--text-xs); cursor: pointer; }
.comment-resolve:hover { color: var(--ok); border-color: var(--line-strong); background: var(--surface-2); }
.comment-resolve svg { width: 13px; height: 13px; }
.comment-action { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; color: var(--ink-3); background: transparent; font-size: var(--text-xs); cursor: pointer; }
.comment-action:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.comment-action svg { width: 13px; height: 13px; }
/* Replies sit under their thread, indented to the parent's text column. */
.comment-thread { border-bottom: 1px solid var(--line); }
.comment-thread > .comment { border-bottom: 0; }
.comment-replies { margin: -4px 0 0 38px; padding-left: 10px; border-left: 2px solid var(--line); }
.comment-reply { padding: 8px 2px; border-bottom: 0; }
.comment-reply p { margin-bottom: 4px; }
.resolved-comment + .comment-replies { opacity: .55; }
.mention { color: var(--info); font-weight: 650; }
.resolved-comment { opacity: .55; }
.resolved-comment p { text-decoration: line-through; }
.resolved-comment .comment-resolve { color: var(--ok); }
.empty-comments { padding: 26px 4px; color: var(--ink-2); font-size: var(--text-md); }
.empty-comments strong { display: block; margin-bottom: 5px; color: var(--ink); }
.empty-comments p { margin: 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; }

.comment-composer { padding: 10px 13px 13px; border-top: 1px solid var(--line); background: var(--bg); }
.reply-context { display: flex; justify-content: space-between; align-items: center; min-height: 28px; margin: 0 1px; padding: 0 6px 0 10px; border-radius: 7px 7px 0 0; color: var(--accent-text); background: var(--accent-soft); font-size: var(--text-xs); }
.reply-context button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; color: inherit; background: transparent; cursor: pointer; }
.reply-context svg { width: 12px; height: 12px; }
.composer-box { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.composer-box:focus-within { border-color: var(--info); }
.reply-context:not([hidden]) + .composer-box { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.composer-box textarea { width: 100%; min-height: 46px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: var(--text-md); line-height: 1.45; }
.composer-actions { grid-column: 2; display: flex; align-items: center; justify-content: space-between; }
.composer-actions > span { display: flex; gap: 3px; }
.composer-actions > span button { display: grid; place-items: center; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 5px; color: var(--ink-3); background: transparent; font-size: var(--text-md); cursor: pointer; }
.composer-actions > span button:hover { color: var(--ink); background: var(--surface-3); }
.composer-actions > span button.active { color: var(--accent-ink); background: var(--accent); }
.composer-actions > span button svg { width: 14px; height: 14px; }
.send-button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--accent-ink); background: var(--info-fill); font-size: var(--text-sm); font-weight: 650; cursor: pointer; }
.send-button:hover { background: color-mix(in srgb, var(--info-fill) 80%, var(--cream)); }
.send-button kbd { border: 0; color: color-mix(in srgb, var(--navy) 65%, transparent); background: transparent; }

.mention-menu { position: absolute; z-index: 30; right: 8px; bottom: 44px; left: 42px; max-height: 210px; overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.mention-menu button { display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: center; width: 100%; padding: 7px; border: 0; border-radius: 6px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.mention-menu button:hover { background: var(--surface-3); }
.mention-menu .avatar { width: 26px; height: 26px; }
.mention-menu strong, .mention-menu small { display: block; }
.mention-menu strong { font-size: var(--text-sm); }
.mention-menu small { color: var(--ink-3); font-size: var(--text-xs); }
.mention-menu p { margin: 8px; color: var(--ink-3); font-size: var(--text-sm); }


/* ------------------------------ Versions ------------------------------- */

/* Cloudinary version history is linear, so this is a timeline rather than a
   tree: newest first, current marked, each older entry viewable on the stage
   or comparable against the current one. */
.version-pane { grid-template-rows: minmax(0,1fr); }
.version-list { min-height: 0; overflow-y: auto; padding: 10px 14px 16px; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.version-note { margin: 0 0 12px; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; }
.version-note strong { color: var(--ink-2); font-weight: 600; }
.version-item { position: relative; padding: 0 0 14px 22px; }
/* The connecting spine that makes the list read as a history. */
.version-item::before { content: ''; position: absolute; top: 16px; bottom: 0; left: 4px; width: 1px; background: var(--line); }
.version-item:last-child::before { display: none; }
.version-item > i { position: absolute; top: 5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.version-item.is-current > i { background: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent); }
.version-item.is-viewing > i { background: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent); }
.version-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.version-head strong { color: var(--ink); font-size: var(--text-md); font-weight: 650; }
.version-tag { padding: 2px 6px; border-radius: 5px; color: var(--accent-ink); background: var(--accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.version-tag.viewing { color: var(--accent-ink); background: var(--info-fill); }
.version-meta { margin: 3px 0 0; color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.version-actions { display: flex; gap: 6px; margin-top: 8px; }
.version-actions { flex-wrap: wrap; }
/* Sizes live on the meta line directly above, so the buttons stay short
   enough not to wrap inside a 340px panel. */
.version-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink-2); background: var(--surface-2); font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }
.version-actions button:hover:not(:disabled) { color: var(--ink); border-color: var(--info); }
.version-actions button:disabled { opacity: .45; cursor: not-allowed; }
.version-actions button.active { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.version-actions svg { width: 12px; height: 12px; }
.version-empty { color: var(--ink-3); font-size: var(--text-sm); line-height: 1.55; }

/* ------------------------------- Compare -------------------------------- */

.compare-toggle { gap: 7px; height: 36px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.compare-toggle[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.compare-toggle:disabled { opacity: .4; }

/* The previous version sits on top, clipped to the handle position. Both
   images fill a frame that already carries the current asset's ratio, so the
   two line up pixel for pixel. */
/* Clipped, not resized. Sizing the layer to 50% and fitting the image inside
   it scaled the previous version into half the frame, so the two versions did
   not line up - which is the entire point of a comparison. clip-path leaves
   both images laid out at full frame size and only limits what is painted. */
.compare-layer { position: absolute; z-index: 5; inset: 0; clip-path: inset(0 50% 0 0); }
.compare-layer img { display: block; width: 100%; height: 100%; object-fit: contain; }
.compare-handle { position: absolute; z-index: 6; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--cream); cursor: ew-resize; touch-action: none; }
.compare-handle span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--cream); border-radius: 50%; background: color-mix(in srgb, var(--navy) 72%, transparent); box-shadow: 0 2px 12px rgba(2,10,14,.5); transform: translate(-50%,-50%); backdrop-filter: blur(3px); }
.compare-handle span::before, .compare-handle span::after { content: ''; position: absolute; width: 6px; height: 6px; border-top: 1.5px solid var(--cream); border-left: 1.5px solid var(--cream); }
.compare-handle span::before { left: 9px; transform: rotate(-45deg); }
.compare-handle span::after { right: 9px; transform: rotate(135deg); }
.compare-handle:focus-visible span { border-color: var(--info); }
.compare-tags { position: absolute; z-index: 7; top: 10px; right: 10px; left: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.compare-tags b { padding: 4px 9px; border-radius: 6px; background: var(--overlay); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.compare-tags .tag-old { color: var(--periwinkle); }
.compare-tags .tag-new { color: var(--yellow); }
.compare-tags b.muted { color: var(--overlay-ink); opacity: .45; }
/* Pins and markup belong to the current version; they would misread over a
   split view, so they are hidden while comparing. */
.media-frame.comparing .pin-layer, .media-frame.comparing .drawing-layer { display: none; }
/* Video pins and markups only show around the frame they were left on. */
.pin-layer .off-frame, .drawing-layer .off-frame, .drawing-layer.off-frame { display: none; }
.media-frame.comparing { cursor: default; }

/* Viewing an older version is a state a reviewer must not miss, since a
   decision taken against the wrong version is worse than no decision. */
.version-banner { position: absolute; z-index: 9; top: 10px; left: 50%; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border: 1px solid color-mix(in srgb, var(--periwinkle) 45%, transparent); border-radius: var(--radius-sm); color: var(--periwinkle); background: var(--overlay); box-shadow: var(--shadow-sm); font-size: var(--text-sm); backdrop-filter: blur(6px); transform: translateX(-50%); white-space: nowrap; }
.version-banner button { min-height: 24px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--periwinkle) 45%, transparent); border-radius: 5px; color: var(--periwinkle); background: transparent; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.version-banner button:hover { color: var(--accent-ink); background: var(--periwinkle); }


/* ------------------------- Side-by-side compare ------------------------- */

/* Modelled on Frame.io: two panes, each with its own version selector, under
   one shared transport. Seeing both cuts at the same timecode is the whole
   job, so a flip between them was the wrong interaction. */
.compare-stage { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 10px; width: 100%; height: 100%; min-height: 0; }
.compare-bar { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: center; }
.pane-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pane-head[data-pane="b"] { justify-content: flex-end; }
.pane-name { min-width: 0; flex: 1; overflow: hidden; color: var(--ink); font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pane-head[data-pane="b"] .pane-name { text-align: right; }
.pane-close { display: grid; place-items: center; width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: 5px; color: var(--ink-3); background: transparent; cursor: pointer; }
.pane-close:hover { color: var(--ink); background: var(--surface-3); }
.pane-close svg { width: 13px; height: 13px; }

.version-pill { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 24px; padding: 0 5px 0 7px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink-2); background: var(--surface-2); cursor: pointer; }
.version-pill:hover { color: var(--ink); border-color: var(--info); }
.version-pill b { font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.version-pill svg { width: 11px; height: 11px; transform: rotate(90deg); }
.version-pill[aria-expanded="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }

.compare-center { display: flex; gap: 3px; flex: none; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.compare-ctl { position: relative; display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 6px; color: var(--ink-3); background: transparent; cursor: pointer; }
.compare-ctl:hover { color: var(--ink); background: var(--surface-3); }
.compare-ctl[aria-pressed="true"] { color: var(--accent-ink); background: var(--info-fill); }
.compare-ctl svg { width: 15px; height: 15px; }
.compare-ctl::after { content: attr(data-tooltip); position: absolute; z-index: 40; top: 34px; left: 50%; width: max-content; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink); background: var(--surface); font-size: var(--text-xs); opacity: 0; pointer-events: none; transform: translate(-50%,-3px); transition: opacity .15s, transform .15s; }
.compare-ctl:hover::after { opacity: 1; transform: translate(-50%,0); }

.compare-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.compare-pane { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--stage-deep); }
.compare-pane img, .compare-pane video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.split-layout-toggle { position: absolute; z-index: 15; top: 12px; right: 12px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); }
.pane-loader { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--stage-deep) 60%, transparent); }
.pane-loader span { width: 24px; height: 24px; border: 2px solid var(--line-strong); border-top-color: var(--accent-text); border-radius: 50%; animation: spin .7s linear infinite; }
.pane-unavailable { max-width: 34ch; margin: 0; padding: 0 18px; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; text-align: center; }

/* ---------------------------- Version menu ------------------------------ */

.version-menu { position: absolute; z-index: 60; width: 280px; max-height: 60vh; overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.version-menu button { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 7px; border: 0; border-radius: var(--radius-sm); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.version-menu button:hover:not(:disabled) { background: var(--surface-3); }
.version-menu button:disabled { opacity: .45; cursor: not-allowed; }
.version-menu .vm-pill { display: grid; place-items: center; height: 22px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink-2); background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.version-menu button.current .vm-pill { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.version-menu strong { display: block; overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.version-menu small { display: block; color: var(--ink-3); font-size: var(--text-xs); }
.version-menu .vm-check { color: var(--info); }
.version-menu .vm-check svg { width: 15px; height: 15px; }
.version-menu hr { margin: 5px 3px; border: 0; border-top: 1px solid var(--line); }
.version-menu .vm-action { grid-template-columns: 20px minmax(0,1fr); color: var(--ink-2); font-size: var(--text-sm); }
.version-menu .vm-action svg { width: 15px; height: 15px; }
.version-menu .vm-note { margin: 4px 7px 6px; color: var(--ink-3); font-size: var(--text-xs); line-height: 1.45; }

.rate-control { display: flex; align-items: center; flex: none; }
.rate-control select { height: 26px; padding: 0 2px; border: 0; border-radius: 5px; outline: 0; color: var(--ink-2); background: transparent; font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; }
.rate-control select:hover { color: var(--ink); background: var(--surface-3); }
#loopButton[aria-pressed="true"] { color: var(--accent-text); background: var(--surface-3); }

/* ================================ Modals ================================ */

.modal { max-width: none; max-height: none; padding: 0; border: 0; background: transparent; }
.modal::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); animation: fade-in .18s both; }
.modal[open] { display: grid; place-items: center; width: 100%; height: 100%; }
@keyframes fade-in { from { opacity: 0; } }
.modal-card { width: min(700px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--line-strong); border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); animation: modal-in .2s both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 14px; }
.modal-header h2 { margin: 3px 0 0; font-size: var(--text-2xl); letter-spacing: -.02em; }
.modal-eyebrow { color: var(--info); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.modal-copy { margin: -4px 24px 20px; color: var(--ink-2); font-size: var(--text-md); line-height: 1.5; }
.modal-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 24px; border-top: 1px solid var(--line); background: var(--bg); }
.modal-footer > span { color: var(--ink-3); font-size: var(--text-sm); }
.modal-footer > div { display: flex; gap: 8px; }

.upload-dropzone { margin: 14px 24px 20px; padding: 40px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); text-align: center; }
.upload-dropzone.dragging { border-color: var(--accent-text); background: var(--accent-soft); }
.upload-dropzone > div { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: var(--radius); color: var(--info); background: var(--surface-3); }
.upload-dropzone h3 { margin: 0; font-size: var(--text-lg); }
.upload-dropzone p { margin: 6px auto 16px; max-width: 46ch; color: var(--ink-2); font-size: var(--text-md); }
.upload-list { display: grid; gap: 8px; margin: 0 24px 20px; padding: 0; list-style: none; }
.upload-list li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); }
.upload-list strong { display: block; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.upload-list small { color: var(--ink-3); font-size: var(--text-xs); }
.upload-list .state { flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.upload-list li.done .state { color: var(--ok); }
.upload-list li.failed .state { color: var(--danger); }
.upload-list li.unchanged .state { color: var(--ink-3); }
.upload-list li.unchanged .bar span { background: var(--ink-3); }
.upload-list .bar { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.upload-list .bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .2s; }
.upload-list li.done .bar span { background: var(--ok); }
.upload-list li.failed .bar span { background: var(--danger); }
.upload-metadata-error { margin: -4px 24px 16px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line-strong)); border-radius: var(--radius-sm); color: var(--ink); background: color-mix(in srgb, var(--danger) 16%, var(--surface-2)); font-size: var(--text-sm); }
.upload-metadata-form select:invalid { color: var(--ink-3); }
.comment-version { padding: 2px 6px; border-radius: 999px; color: var(--ink-2); background: var(--surface-3); font-size: var(--text-xs); font-weight: 700; }
.upload-plan { display: grid; gap: 6px; max-height: min(44vh, 420px); overflow: auto; margin: 0 24px 18px; padding: 0; list-style: none; }
.upload-plan-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); }
.upload-plan-file { min-width: 0; }
.upload-plan-file strong { display: block; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.upload-plan-file small { color: var(--ink-3); font-size: var(--text-xs); }
.upload-plan-tag { padding: 3px 8px; border-radius: 999px; color: var(--ink-2); background: var(--surface-3); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.upload-plan-tag.is-version { color: var(--accent-text); background: var(--accent-soft); }
.upload-plan-match { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink-2); font-size: var(--text-xs); cursor: pointer; }
.upload-plan-match input { flex: none; margin: 0; accent-color: var(--accent); }
.upload-plan-match img { flex: none; width: 40px; height: 30px; border-radius: 4px; object-fit: contain; background: var(--stage-deep); }
.upload-plan-match span { min-width: 0; overflow-wrap: anywhere; }
.upload-plan-match b { color: var(--ink); font-weight: 600; }
.upload-plan-match em { display: block; color: var(--ink-3); font-style: normal; }
.upload-metadata-section h3 { margin: 4px 24px 12px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 700; }

.filter-modal-card { width: min(720px, calc(100vw - 32px)); }
.filter-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding: 0 24px 24px; }
.filter-form-grid label { display: grid; gap: 6px; }
.filter-form-grid label > span { color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }
.filter-form-grid select, .filter-form-grid input[type="text"] { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: 0; color: var(--ink); background: var(--surface-2); font-size: var(--text-md); }
.filter-form-grid select:focus, .filter-form-grid input[type="text"]:focus { border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 20%, transparent); }
.filter-form-grid select:disabled { color: var(--ink-3); opacity: .7; }
.metadata-conditions { grid-column: 1 / -1; margin: 0; }
.filter-form-grid input[type="number"], .filter-form-grid input[type="date"] { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-2); font-size: var(--text-md); }
/* Multi-value (set) fields span the row; Cloudinary's chips become checkboxes. */
.upload-set { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.upload-set legend { padding: 0 4px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }
.upload-set label { display: inline-flex !important; align-items: center; gap: 6px; color: var(--ink); font-size: var(--text-sm); }
.upload-set p { margin: 0; color: var(--ink-3); font-size: var(--text-sm); }

/* ================================ Toasts ================================ */

.toast-region { position: fixed; z-index: 999; right: 18px; bottom: 18px; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 36px)); }
.toast { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); animation: toast-in .22s both; }
.toast.leaving { animation: toast-out .2s both; }
.confetti-canvas { position: fixed; inset: 0; z-index: 300; width: 100vw; height: 100vh; pointer-events: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(5px); } }
.toast i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--accent-ink); background: var(--info-fill); }
.toast i svg { width: 14px; height: 14px; }
/* An error used to arrive wearing a green tick. */
.toast.error i { color: var(--cream); background: var(--danger); }
.toast.error { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.toast strong, .toast small { display: block; }
.toast strong { font-size: var(--text-md); }
.toast small { margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.45; }

/* ============================== Responsive ============================== */

/* ---- Subtitles ---------------------------------------------------------
   The stage overlay mirrors Cloudinary's burn-in: sizes are fractions of the
   frame height (see SUBTITLE_CANVAS_HEIGHT), so line length on screen matches
   the render. It is a preview; the render check is the real output. */
.subtitle-layer { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; padding: 0 4%; container-type: size; pointer-events: none; line-height: 1.2; }
.subtitle-layer[hidden], .subtitle-layer span[hidden] { display: none; }
.subtitle-layer span { max-width: 100%; color: #fff; font-family: 'Gellix Subtitle', 'Helvetica Neue', Arial, sans-serif; font-size: calc(var(--subtitle-scale, .059) * 100cqh); font-weight: 700; text-align: center; text-shadow: .12cqh .12cqh .35cqh rgba(0,0,0,.72); white-space: pre-line; overflow-wrap: anywhere; }
.media-frame.comparing .subtitle-layer { display: none; }

.review-tool[aria-pressed="true"] { color: var(--accent-text); background: var(--surface-3); }
.button.small { height: 28px; padding: 0 11px; font-size: var(--text-xs); }
.button.small svg { width: 13px; height: 13px; }

.subtitles-pane { grid-template-rows: auto minmax(0,1fr) auto; grid-template-columns: minmax(0,1fr); min-width: 0; }
.subtitle-toolbar { display: grid; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.subtitle-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: var(--text-xs); }
.subtitle-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; color: var(--ink-2); background: var(--surface-2); font-size: var(--text-xs); font-weight: 650; }
.subtitle-chip svg { width: 12px; height: 12px; }
.subtitle-chip.machine { color: var(--info); background: color-mix(in srgb, var(--info) 14%, var(--bg)); }
.subtitle-chip.unsaved { color: var(--accent-text); background: var(--accent-soft); }
.subtitle-chip.approved { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--bg)); }
.subtitle-actions { display: flex; align-items: center; gap: 4px; }
.subtitle-actions .button { margin-left: auto; }

.cue-list { min-height: 0; overflow-y: auto; padding: 6px 8px 12px; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.cue-row { display: grid; gap: 5px; padding: 8px 8px 9px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.cue-row + .cue-row { margin-top: 2px; }
.cue-row:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.cue-row:focus-within { border-color: var(--line-strong); background: var(--surface-2); }
.cue-row.is-active { border-color: color-mix(in srgb, var(--accent-text) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cue-head { display: flex; align-items: center; gap: 2px; }
.cue-seek { display: inline-flex; align-items: center; gap: 4px; min-width: 34px; height: 24px; padding: 0 6px 0 4px; border: 0; border-radius: 6px; color: var(--ink-3); background: transparent; font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; }
.cue-seek svg { width: 11px; height: 11px; }
.cue-seek:hover, .cue-row.is-active .cue-seek { color: var(--accent-text); }
.cue-time { width: 57px; height: 24px; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; color: var(--ink-2); background: transparent; font: inherit; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.cue-time:hover { border-color: var(--line-strong); }
.cue-time:focus { border-color: var(--info); outline: 0; color: var(--ink); background: var(--bg); }
.cue-arrow { color: var(--ink-3); font-size: var(--text-xs); }
.cue-mini { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid transparent; border-radius: 5px; color: var(--ink-3); background: transparent; font-size: var(--text-xs); text-decoration: none; cursor: pointer; }
.cue-mini:hover:not(:disabled) { color: var(--ink); border-color: var(--line-strong); background: var(--surface-3); }
.cue-mini:disabled { opacity: .35; cursor: not-allowed; }
.cue-mini.danger:hover { color: var(--danger); }
.cue-mini svg { width: 12px; height: 12px; }
.cue-mini.edge { min-width: 18px; padding: 0 3px; font-family: ui-monospace, monospace; }
.cue-tools { display: inline-flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .12s; }
.cue-row:hover .cue-tools, .cue-row:focus-within .cue-tools, .cue-row.is-active .cue-tools { opacity: 1; }
@media (hover: none) { .cue-tools { opacity: 1; } }
.cue-flag { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); font-size: 10px; font-style: normal; font-weight: 800; }
.cue-text { width: 100%; min-height: 30px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--bg); font: inherit; font-size: var(--text-md); line-height: 1.4; resize: none; overflow: hidden; }
.cue-text:focus { border-color: var(--info); outline: 0; }
.cue-row.is-low .cue-text { border-color: color-mix(in srgb, var(--accent-text) 45%, var(--line)); }
.cue-warning { color: var(--accent-text); font-size: var(--text-xs); }

.subtitle-footer { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.subtitle-footer-links { display: inline-flex; gap: 2px; margin-right: auto; }

.subtitle-empty { display: grid; justify-items: start; align-content: start; gap: 8px; padding: 26px 18px; color: var(--ink-2); font-size: var(--text-md); }
.subtitle-empty strong { color: var(--ink); }
.subtitle-empty p { margin: 0; line-height: 1.5; }
.subtitle-empty small { color: var(--ink-3); font-size: var(--text-xs); }
.subtitle-empty .button { margin-top: 6px; }
.subtitle-spinner { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--accent-text); border-radius: 50%; animation: spin .8s linear infinite; }

@media (max-width: 1220px) {
  .review-workspace { grid-template-columns: 50px minmax(0,1fr) var(--panel-width, 320px); }
  .topbar { padding-inline: 20px; }
  .library-screen { padding-inline: 20px; }
  .list-headings, .list-view .asset-card { grid-template-columns: 72px minmax(160px, 1fr) minmax(100px, .45fr) 124px; }
  .list-headings span:nth-child(4), .list-view .list-updated { display: none; }
}
/* Button labels go before the position control does - prev/next is how
   reviewers move through a set, so it stays visible down to phone width. */
@media (max-width: 1100px) {
  .review-actions .review-tool span, .reviewers-button:has(.avatar-stack:not(:empty)) #reviewersLabel { display: none; }
}
@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .main-content { margin-left: 0; }
  .mobile-menu, .mobile-only { display: grid; }
  .review-workspace { grid-template-columns: 46px minmax(0,1fr) var(--panel-width, 300px); }
  #sidebarResize { display: none; }
}
@media (max-width: 760px) {
  #panelResize { display: none; }
  .topbar { min-height: 56px; padding-inline: 14px; }
  .mobile-search-button { display: grid; flex: none; }
  .global-search { display: none; }
  .topbar.mobile-search-open #addAssetButton { display: none; }
  .topbar.mobile-search-open .global-search { display: flex; flex: 1; width: auto; min-width: 0; }
  .topbar.mobile-search-open .global-search kbd { display: none; }
  .library-screen { padding: 18px 14px 56px; }
  .library-hero h1 { font-size: 20px; }
  .library-hero p { font-size: var(--text-sm); }
  .library-toolbar { gap: 10px; margin-top: 16px; }
  /* One scrollable strip rather than wrapped rows: the counts stay
     glanceable without pushing every asset below the fold. */
  .status-bar { order: 2; flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .status-bar::-webkit-scrollbar { display: none; }
  .status-tile { flex: none; white-space: nowrap; }
  .category-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .category-bar::-webkit-scrollbar { display: none; }
  .category-pill { flex: none; white-space: nowrap; }
  .view-actions { order: 1; width: 100%; justify-content: space-between; }
  .group-asset-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
  .list-headings, .list-view .asset-card { grid-template-columns: 64px minmax(0, 1fr) 108px; gap: 10px; }
  .list-headings span:nth-child(3), .list-view .list-file { display: none; }
  .list-view .asset-card { min-height: 68px; }
  .list-view .list-status { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
  .render-progress { flex-direction: column; text-align: center; }
  .group-header { top: 56px; }
  .review-screen { grid-template-rows: auto minmax(0,1fr); }
  .review-topbar { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 45px 40px; gap: 0 8px; padding: 4px 10px 7px; }
  .review-titlebar { width: 100%; }
  .review-title { flex: 1; max-width: none; }
  .review-center-tools { display: flex; grid-column: 2; justify-self: end; }
  .review-position { min-width: 55px; padding: 0 3px; font-size: var(--text-xs); }
  .review-actions { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; }
  .review-actions .decision-wrap { min-width: 0; margin-left: auto; }
  .reviewers-menu { position: fixed; top: auto; right: 16px; left: 16px; width: auto; margin-top: 6px; }
  .review-actions .decision-button { max-width: min(170px, calc(100vw - 156px)); }
  .review-actions .decision-label-wrap > span { display: block; overflow: hidden; text-overflow: ellipsis; }
  .review-workspace { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto min(34vh, 320px); }
  .review-workspace.comments-hidden { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto 0; }
  .annotation-tools { grid-column: 1; grid-row: 2; flex-direction: row; justify-content: center; min-width: 0; overflow-x: auto; padding: 3px 8px; border-right: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .annotation-tools button { flex: none; width: 40px; height: 38px; }
  .annotation-tools > span { display: none; }
  .annotation-tools button::after { top: auto; bottom: 44px; left: 50%; transform: translate(-50%,3px); }
  .annotation-tools button:hover::after { transform: translate(-50%,0); }
  .media-column { grid-column: 1; grid-row: 1; }
  .comments-panel { grid-column: 1; grid-row: 3; border-top: 0; border-left: 0; }
  .version-strip { display: none; }
  .media-stage { padding: 10px; }
  .compare-toggle span { display: none; }
  .compare-panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .compare-bar { grid-template-columns: 1fr auto; }
  .compare-bar .pane-head[data-pane="b"] { grid-column: 1; }
  .compare-center { grid-row: 1; grid-column: 2; }
  .version-menu { width: min(280px, calc(100vw - 32px)); }
  .rate-control { display: none; }
  .compare-toggle { padding: 0 9px; }
  .version-list { padding: 10px 12px 14px; }
  .empty-comments { padding: 8px 4px; }
  .filter-form-grid { grid-template-columns: 1fr; }
  .toast-region { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
@media (max-width: 360px) {
  .review-actions { gap: 3px; }
  .review-actions .decision-label-wrap small { display: none; }
}

/* ------------------------------------------------------------------ login */

.login-screen { display: grid; place-items: center; min-height: 100dvh; padding: 24px; background: var(--bg); }
.login-card { width: min(360px, 100%); padding: 28px 24px 24px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.login-card .brand-mark { margin: 0 auto 16px; }
.login-card h1 { margin: 0; font-size: var(--text-xl); }
.login-subtitle { margin: 6px 0 18px; color: var(--ink-2); font-size: var(--text-sm); }
.login-error { margin: 0 0 14px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--burgundy) 55%, var(--line-strong)); border-radius: var(--radius-sm); color: var(--ink); background: color-mix(in srgb, var(--burgundy) 30%, var(--surface)); font-size: var(--text-sm); text-align: left; }
.login-status { margin: 14px 0 0; color: var(--ink-2); font-size: var(--text-sm); text-align: left; }
.login-google { display: flex; width: 100%; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--ink-3); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login-form { display: grid; gap: 8px; text-align: left; }
.login-form label { color: var(--ink-2); font-size: var(--text-xs); }
.login-form input { height: 38px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-2); font-size: var(--text-sm); }
.login-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-form .button { width: 100%; margin-top: 4px; }

/* People and groups (admin). */
.people-modal { width: min(760px, calc(100vw - 32px)); }
.people-tabs { display: flex; gap: 4px; margin: 0 24px; border-bottom: 1px solid var(--line); }
.people-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 38px; margin-bottom: -1px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; color: var(--ink-2); background: none; font-size: var(--text-md); font-weight: 650; cursor: pointer; }
.people-tabs button.active { color: var(--ink); border-bottom-color: var(--accent); }
.people-tabs b { min-width: 20px; padding: 1px 6px; border-radius: 999px; color: var(--ink-2); background: var(--surface-2); font-size: var(--text-xs); }
.people-panel { padding: 18px 24px 24px; }
.people-panel label > span, .people-panel legend { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }
.people-panel input[type="email"], .people-panel input[type="search"], .people-panel input:not([type]), .people-panel select, .people-panel textarea { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: 0; color: var(--ink); background: var(--surface-2); font: inherit; font-size: var(--text-md); }
.people-panel textarea { height: auto; padding: 8px 10px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); }
.people-panel :is(input, select, textarea):focus { border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 20%, transparent); }
.people-panel input[readonly] { color: var(--ink-3); }
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: end; }
.check-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.check-chips legend { width: 100%; }
.invite-groups { grid-column: 1 / -1; }
.check-chip { position: relative; display: inline-flex; cursor: pointer; }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip span { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); background: var(--surface-2); font-size: var(--text-sm); }
.check-chip input:checked + span { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.check-chip input:focus-visible + span { outline: 2px solid var(--info); outline-offset: 2px; }
.people-hint { margin: 12px 0 14px; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; }
.member-list { display: grid; margin-top: 10px; }
.member-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 100px 120px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.member-who { min-width: 0; }
.member-who strong, .member-who > small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.member-who strong { font-size: var(--text-md); }
.member-who strong small { color: var(--ink-3); font-weight: 500; }
.member-who > small { margin-top: 2px; color: var(--ink-3); font-size: var(--text-xs); }
.member-groups { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.member-groups i { padding: 1px 7px; border-radius: 999px; color: var(--ink-2); background: var(--surface-3); font-size: var(--text-xs); font-style: normal; }
.member-row select { height: 32px; }
.member-row .button { justify-self: end; }
.button.danger { color: var(--bg); border-color: var(--danger); background: var(--danger); }
.people-empty { margin: 18px 0; color: var(--ink-3); font-size: var(--text-md); }
.group-list { display: grid; gap: 8px; margin-top: 14px; }
.group-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.group-card strong { font-size: var(--text-md); }
.group-card code { color: var(--ink-3); font-size: var(--text-sm); }
.group-card p { margin: 4px 0 0; color: var(--ink-3); font-size: var(--text-sm); }
.group-form { display: grid; gap: 18px; }
.group-form h3 { margin: 0; font-size: var(--text-lg); }
.group-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.group-access { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.group-access > label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--text-md); cursor: pointer; }
.group-folders { display: grid; gap: 6px; margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.group-folders .button { justify-self: start; margin-bottom: 6px; }
.group-folders .people-hint { margin: 0; }
.group-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.group-form-actions > div { display: flex; gap: 8px; }
@media (max-width: 640px) {
  .invite-form { grid-template-columns: 1fr auto; }
  .invite-email { grid-column: 1 / -1; }
  .member-row { grid-template-columns: 28px minmax(0, 1fr) 90px; }
  .member-row .button, .member-row .member-remove-spacer { grid-column: 2 / -1; justify-self: start; }
  .group-form-row { grid-template-columns: 1fr; }
  .people-panel { padding: 16px; }
  .people-tabs { margin: 0 16px; }
}