/* Cheercast Routine List — tokens (production).
   Adapted from the Claude Design handoff (docs/Cheercast - Routine List/).
   Token grammar from post-list-v2: --bg/--panel/--surface/--fg/--accent etc.

   Scoping: all token definitions are anchored to .cc-routine-list (and its
   data-theme/data-brand variants) so they don't leak into Breakdance or any
   other component on the host page. The list's own children resolve these
   tokens via inheritance from the root .cc-routine-list element.

   Brand colour: --pagetheme is set by Breakdance per page (CCAU blue, CCRW
   purple, EP-event pages can override). The list never hardcodes a brand —
   it inherits whatever the host page defines. If --pagetheme is not set on
   the page, the --accent fallback below kicks in (CCAU blue).             */

/* Light is the default. The same token blocks are matched by BOTH the
   routine list (.cc-routine-list) and a generic .cc-theme class — apply
   .cc-theme (+ data-theme / data-brand) to any Breakdance section to give
   its children the palette. A future light/dark toggle just flips
   data-theme on the .cc-theme element and everything follows. */
.cc-routine-list,
.cc-routine-list[data-theme="light"],
.cc-theme,
.cc-theme[data-theme="light"] {
  --bg:               #f7f7f5;
  --panel:            #ffffff;
  --surface:          #f4f4f3;
  --surface-2:        #ebebe9;
  --surface-3:        #e0e0dd;
  --hover:            #efefed;

  --border:           #e7e7e3;
  --border-2:         #d6d6d2;
  --border-3:         #b8b8b3;
  --border-strong:    #b8b8b3;

  --fg:               #1a1a1a;
  --fg-2:             #404040;
  --fg-3:             #6b6b6b;
  --fg-4:             #999999;

  /* --pagetheme overrides the brand default (CCAU blue here, CCRW purple via
     [data-brand="ccrw"]). Everything accent-y derives from --accent, so the
     whole accent system follows the page theme — no per-brand tint overrides. */
  --accent:           var(--pagetheme, #3169f7);
  --accent-hi:        color-mix(in oklab, var(--accent) 80%, black 20%);
  --accent-fg:        #ffffff;
  --accent-soft:      color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-soft-2:    color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-border:    color-mix(in srgb, var(--accent) 25%, transparent);

  --warn:             #b45309;
  --warn-soft:        rgba(180, 83, 9, 0.10);

  /* Status colours (semantic, brand-independent). --danger = live / delete,
     --good = onsite / online, --info = remote. The dark block re-tunes --warn
     for legibility; these reds/greens/blues read on both themes. */
  --danger:           #f43f5e;
  --danger-soft:      rgba(244, 63, 94, 0.12);
  --good:             #2bbf86;
  --good-soft:        rgba(43, 191, 134, 0.14);
  --info:             #6aa9ff;
  --info-soft:        rgba(106, 169, 255, 0.14);

  --radius:           8px;
  --radius-sm:        6px;
  --radius-lg:        12px;
  --shadow-pop:       0 10px 30px rgba(20, 14, 0, 0.10), 0 2px 6px rgba(20, 14, 0, 0.05);

  --font-ui:          "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:        "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* CCRW's only difference from CCAU is the brand DEFAULT: purple instead of
   blue, used when a page sets no --pagetheme. A page theme overrides it, and
   every tint derives from --accent (base/dark rules) — so the accent system
   follows --pagetheme regardless of brand. */
.cc-routine-list[data-brand="ccrw"],
.cc-theme[data-brand="ccrw"] {
  --accent:           var(--pagetheme, #4E00FF);
}

.cc-routine-list[data-theme="dark"],
.cc-theme[data-theme="dark"] {
  --bg:               #0f0f10;
  --panel:            #17181b;
  --surface:          #1c1d20;
  --surface-2:        #232427;
  --surface-3:        #2a2c30;
  --hover:            #1f2024;

  --border:           #232427;
  --border-2:         #2a2c30;
  --border-3:         #3a3d42;
  --border-strong:    #4a4e55;

  --fg:               #f4f5f7;
  --fg-2:             #c8ccd2;
  --fg-3:             #9aa0a8;
  --fg-4:             #6c727b;

  /* Accent text/outlines (--accent-hi) lighten with white on dark so accent
     text/icons stay legible (the base darkens with black — illegible on dark,
     e.g. the annotation-count chip). Tints derive from --accent (the page
     theme), alphas bumped so they register against the dark surface. */
  --accent-hi:        color-mix(in oklab, var(--accent) 58%, white 42%);
  --accent-soft:      color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-soft-2:    color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-border:    color-mix(in srgb, var(--accent) 46%, transparent);

  /* Warning: the light #b45309 is too dark to read on dark surfaces — use a
     brighter amber (matches the per-routine dark theme) for the upload pill
     and other warn-tinted chips. */
  --warn:             #f5a524;
  --warn-soft:        rgba(245, 165, 36, 0.14);

  /* Status -soft fills get a touch more alpha to register on the dark surface. */
  --danger-soft:      rgba(244, 63, 94, 0.16);
  --good-soft:        rgba(43, 191, 134, 0.18);
  --info-soft:        rgba(106, 169, 255, 0.18);
}

/* (No CCRW-dark accent block needed any more — the dark rules derive every
   tint from --accent, and the CCRW brand only changes --accent's fallback.) */

/* Convenience: a .cc-theme element defaults its own text to the resolved
   foreground so Breakdance chrome reads correctly without setting colour on
   every child. Background stays Breakdance's call (var(--bg) page, var(--panel)
   cards). */
.cc-theme {
  color: var(--fg);
}

/* Mono utility — scoped to .cc-routine-list to avoid global .mono collisions. */
.cc-routine-list .cc-mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
}

/* Loading spinner for the AJAX results fetch. */
.cc-routine-list .cc-spinner {
  width: 26px; height: 26px;
  border: 2.5px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cc-spin 0.7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Keyboard focus rings — visible only for keyboard users. */
.cc-routine-list button:focus-visible,
.cc-routine-list input:focus-visible,
.cc-routine-list select:focus-visible,
.cc-routine-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 5px;
}

/* Slide-out secondary action.
   - revealMode="hover": shows on row hover (video download).
   - revealMode="active": shows ONLY when the pill is active (gallery open),
     never on hover — so closing the drawer retracts it immediately.        */
.cc-routine-list .cc-slide-secondary {
  display: flex;
  overflow: hidden;
  width: 0;
  transition: width 160ms ease-out;
}
.cc-routine-row:hover .cc-slide-pill[data-reveal="hover"] .cc-slide-secondary { width: 32px; }
.cc-slide-pill[data-active="1"] .cc-slide-secondary { width: 32px; }
.cc-slide-pill:focus-within .cc-slide-secondary { width: 32px; }
/* Force open on touch devices (no hover) — only the hover-reveal ones;
   the gallery download still gates on the drawer being open. */
@media (hover: none) {
  .cc-slide-pill[data-reveal="hover"] .cc-slide-secondary { width: 32px; }
}

/* ── Responsive list layout — container queries on the list panel ──
   Aligned with Breakdance default breakpoints:
     Desktop          ≥ 1120px   →  wide / inline cells, labels on
     Tablet (L + P)   768–1119   →  stacked cells, icon-only pills
     Phone landscape  ≤ 767px    →  (separate mobile design — labels back via
                                     @media (hover: none) which catches touch)
   This is a per-LIST decision, not per-viewport — a sidebar-narrow list on
   a wide page still gets the stacked layout.                          */
.cc-routine-list {
  container-type: inline-size;
  container-name: cc-list;
}

/* Cells stack (primary over secondary) by default. The inline-vs-stacked
   decision is made ONCE at the list level (below) so every row flips together
   and never individually — and the grid tracks give every row identical
   column widths. */
.cc-routine-list .cc-data-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cc-routine-list .cc-cell-primary,
.cc-routine-list .cc-cell-secondary {
  /* Wrap instead of clip — text reflows to a second line, capped at 2 lines. */
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cc-routine-list .cc-cell-primary  { font-size: 13px;   font-weight: 500; color: var(--fg); }
.cc-routine-list .cc-cell-primary[data-owns="1"] { font-weight: 600; }
.cc-routine-list .cc-cell-primary[data-tabular="1"] { font-variant-numeric: tabular-nums; }
.cc-routine-list .cc-cell-primary[data-nobreak="1"] { white-space: nowrap; -webkit-line-clamp: 1; }
.cc-routine-list .cc-cell-secondary { font-size: 11.5px; font-weight: 400; color: var(--fg-4); }

/* List wide enough for content to sit inline → ALL cells in ALL rows flip to
   "primary · secondary" together. Narrower → all stack together. */
@container cc-list (min-width: 1120px) {
  .cc-routine-list .cc-data-cell {
    flex-direction: row;
    align-items: baseline;
    gap: 0;
  }
  .cc-routine-list .cc-data-cell > .cc-cell-secondary::before {
    content: '·';
    margin: 0 6px;
    color: var(--fg-4);
  }
  .cc-routine-list .cc-routine-row { padding-top: 8px !important;  padding-bottom: 8px !important; }
  .cc-routine-list .cc-list-header { padding-top: 6px !important;  padding-bottom: 6px !important; }
}

/* ── Filter dropdowns inline by default; collapse into drawer at tablet ── */
.cc-routine-list .cc-filter-dropdowns {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-width: 0;
}
.cc-routine-list .cc-filters-toggle { display: none; }

@container cc-list (max-width: 1119px) {
  /* Hide inline dropdowns; show drawer toggle. When toggled open, dropdowns
     reflow into their own row below the search/toggle. */
  .cc-routine-list .cc-filter-dropdowns {
    display: none;
    flex-basis: 100%;
    order: 9;
  }
  .cc-routine-list .cc-filter-dropdowns[data-open="1"] {
    display: flex;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
  }
  .cc-routine-list .cc-filters-toggle { display: inline-flex; }
}

/* Mobile (< 700) — the filter sheet is the only filter UI. Force the
   inline drawer hidden even if data-open=1 was left over from a prior
   wider viewport state, otherwise both surfaces would be live and
   editable in parallel. */
@container cc-list (max-width: 699px) {
  .cc-routine-list .cc-filter-dropdowns,
  .cc-routine-list .cc-filter-dropdowns[data-open="1"] {
    display: none;
  }
}

/* Action cell is its own container — the pills' labels show only when the
   action SECTION has room for them (~175px), independent of list/page width. */
.cc-routine-list .cc-actions { container: cc-actions / inline-size; }
@container cc-actions (max-width: 175px) {
  .cc-routine-list .cc-pill-label { display: none; }
}

/* Pagination — desktop pager inline; mobile "load more" below 768. */
@container cc-list (max-width: 767px) {
  .cc-routine-list .cc-pager-desktop { display: none !important; }
  .cc-routine-list .cc-pager-mobile  { display: flex !important; }
}

/* Desktop row swap markers — actual rules live AFTER the unconditional
   .cc-routine-row { display: grid } block below so they win on cascade. */
.cc-routine-list .cc-mobile-row { display: none; }

/* ── Mobile row layout ───────────────────────────────────────── */
.cc-routine-list .cc-mobile-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.cc-routine-list .cc-mobile-row-top {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.cc-routine-list .cc-mobile-id-rail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 8px 4px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.cc-routine-list .cc-mobile-id-rail[data-owns="0"] {
  background: var(--accent-soft);
  color: var(--accent-hi);
  border: 1px solid var(--accent-border);
}
.cc-routine-list .cc-mobile-id-rail[data-owns="1"] {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
}
.cc-routine-list .cc-mobile-row-data {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-routine-list .cc-mobile-row-line1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.cc-routine-list .cc-mobile-team {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.cc-routine-list .cc-mobile-team[data-owns="1"] { font-weight: 600; }
.cc-routine-list .cc-mobile-program {
  min-width: 0;
  flex-shrink: 1;
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-routine-list .cc-mobile-time {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.cc-routine-list .cc-mobile-row-line2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cc-routine-list .cc-mobile-meta-left,
.cc-routine-list .cc-mobile-meta-right {
  font-size: 11.5px;
  color: var(--fg-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-routine-list .cc-mobile-meta-left  { flex: 1; min-width: 0; }
.cc-routine-list .cc-mobile-meta-right { flex-shrink: 0; }

/* Mobile row actions — full-width split pills below the data section. */
.cc-routine-list .cc-mobile-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.cc-routine-list .cc-mobile-pill {
  flex: 1;
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  overflow: hidden;
}
.cc-routine-list .cc-mobile-pill[data-active="1"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.cc-routine-list .cc-mobile-pill-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  background: transparent;
  color: var(--fg-2);
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
}
.cc-routine-list .cc-mobile-pill[data-active="1"] .cc-mobile-pill-primary {
  color: var(--accent-hi);
}
.cc-routine-list .cc-mobile-pill-divider {
  width: 1px;
  flex-shrink: 0;
  background: var(--border-2);
}
.cc-routine-list .cc-mobile-pill[data-active="1"] .cc-mobile-pill-divider {
  background: var(--accent-border);
}
.cc-routine-list .cc-mobile-pill-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  padding: 0;
  background: transparent;
  color: var(--fg-3);
  border: none;
  cursor: pointer;
  font: inherit;
}

/* ── Bottom-sheet filter UI (mobile) ─────────────────────────────
   Slides up from the bottom of the viewport. Replaces the inline
   filter dropdown drawer at narrow panel widths (per the brief). Lives
   outside the .cc-routine-list scope (viewport-fixed overlay) — uses
   its own --bs-* scoped tokens so it can render correctly on dark or
   light host pages.                                                   */
.cc-filter-sheet {
  --bs-panel:        #ffffff;
  --bs-surface:      #f4f4f3;
  --bs-surface-2:    #ebebe9;
  --bs-border:       #e7e7e3;
  --bs-border-2:     #d6d6d2;
  --bs-border-3:     #b8b8b3;
  --bs-fg:           #1a1a1a;
  --bs-fg-3:         #6b6b6b;
  --bs-fg-4:         #999999;
  --bs-accent:       var(--pagetheme, #3169f7);
  --bs-accent-fg:    #ffffff;

  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  font-family: var(--font-ui, "Geist", system-ui, sans-serif);
  color: var(--bs-fg);
}
.cc-filter-sheet[data-open="1"] { display: flex; }

.cc-filter-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 17, 0.45);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cc-filter-sheet[data-open="1"] .cc-filter-sheet-backdrop {
  opacity: 1;
}

.cc-filter-sheet-panel {
  position: relative;
  width: 100%;
  max-height: 78dvh;
  display: flex;
  flex-direction: column;
  background: var(--bs-panel);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cc-filter-sheet[data-open="1"] .cc-filter-sheet-panel {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cc-filter-sheet-backdrop,
  .cc-filter-sheet-panel {
    transition: none;
  }
}

.cc-filter-sheet-drag-zone {
  flex-shrink: 0;
  padding: 8px 0 6px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cc-filter-sheet[data-dragging="1"] .cc-filter-sheet-drag-zone {
  cursor: grabbing;
}
.cc-filter-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--bs-border-3);
  border-radius: 2px;
  margin: 0 auto;
  flex-shrink: 0;
}
.cc-filter-sheet[data-dragging="1"] .cc-filter-sheet-panel {
  transform: translateY(var(--cc-sheet-drag-y, 0px));
  transition: none;
}
.cc-filter-sheet[data-dragging="1"] .cc-filter-sheet-backdrop {
  opacity: var(--cc-sheet-drag-progress, 1);
  transition: none;
}

.cc-filter-sheet-body {
  overflow-y: auto;
  flex: 1;
  padding: 4px 16px 16px;
  -webkit-overflow-scrolling: touch;
}

.cc-filter-sheet-section {
  padding-top: 16px;
}
.cc-filter-sheet-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bs-fg-4);
  margin-bottom: 10px;
}

.cc-filter-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-sheet-chip {
  padding: 7px 14px;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border-2);
  border-radius: 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--bs-fg);
  cursor: pointer;
  white-space: nowrap;
}
.cc-sheet-chip[data-selected="1"] {
  background: var(--bs-accent);
  border-color: var(--bs-accent);
  color: var(--bs-accent-fg);
}

/* Searchable checklist for long filters (Division, Program). */
.cc-filter-sheet-checklist {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border-2);
  border-radius: 8px;
  max-height: 240px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cc-sheet-checklist-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bs-border);
  color: var(--bs-fg-3);
}
.cc-sheet-checklist-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--bs-fg);
  padding: 4px 0;
}
.cc-sheet-checklist-options {
  overflow-y: auto;
  padding: 4px;
}
.cc-sheet-checklist-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--bs-fg);
  text-align: left;
}
.cc-sheet-checklist-option[data-selected="1"] {
  background: rgba(49, 105, 247, 0.08);
  font-weight: 500;
}
.cc-sheet-checklist-option .cc-sheet-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--bs-border-2);
  background: transparent;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-accent-fg);
}
.cc-sheet-checklist-option[data-selected="1"] .cc-sheet-checkbox {
  border-color: var(--bs-accent);
  background: var(--bs-accent);
}
.cc-sheet-checklist-empty {
  padding: 16px;
  text-align: center;
  color: var(--bs-fg-4);
  font-size: 12.5px;
}

.cc-filter-sheet-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--bs-border);
  background: var(--bs-panel);
  flex-shrink: 0;
}
.cc-sheet-clear {
  flex: 1;
  height: 42px;
  background: var(--bs-surface);
  color: var(--bs-fg);
  border: 1px solid var(--bs-border-2);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.cc-sheet-show {
  flex: 2;
  height: 42px;
  background: var(--bs-accent);
  color: var(--bs-accent-fg);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
/* While the count is being recalculated, gently pulse just the
   number so the stale value stays readable but visibly "thinking".
   JS toggles data-loading on the sheet when filter changes are
   debounced and AJAX is in flight. */
.cc-filter-sheet[data-loading="1"] .cc-sheet-show [data-cc-sheet-count] {
  animation: cc-sheet-show-pulse 1.2s ease-in-out infinite;
}
@keyframes cc-sheet-show-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-filter-sheet[data-loading="1"] .cc-sheet-show [data-cc-sheet-count] {
    animation: none;
    opacity: 0.6;
  }
}

/* ── Photo gallery bottom sheet (mobile only) ─────────────────────
   Viewport-fixed overlay. Same --bs-* token approach as the filter
   sheet — sheet renders correctly on dark host pages without picking
   up the routine list's panel colour. Panel takes ~92% of dvh — the
   grid is the dominant content so it needs the height. JS swaps the
   data-open attr; CSS transitions handle the slide + fade. JS also
   sets --cc-photo-sheet-drag-y during pointer drag to translate the
   panel and dim the backdrop with the finger. */
.cc-photo-sheet {
  --bs-panel:        #ffffff;
  --bs-surface:      #f4f4f3;
  --bs-surface-2:    #ebebe9;
  --bs-border:       #e7e7e3;
  --bs-border-2:     #d6d6d2;
  --bs-border-3:     #b8b8b3;
  --bs-fg:           #1a1a1a;
  --bs-fg-3:         #6b6b6b;
  --bs-fg-4:         #999999;
  --bs-accent:       var(--pagetheme, #3169f7);
  --bs-accent-fg:    #ffffff;

  position: fixed;
  inset: 0;
  z-index: 9600;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  font-family: var(--font-ui, "Geist", system-ui, sans-serif);
  color: var(--bs-fg);
}
.cc-photo-sheet[data-open="1"] { display: flex; }

.cc-photo-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 17, 0.45);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cc-photo-sheet[data-open="1"] .cc-photo-sheet-backdrop {
  opacity: 1;
}
/* Drag overrides the backdrop fade — JS sets --cc-sheet-drag-progress
   (0 = closed, 1 = fully open) during pointer drag. Shared with the
   filter sheet so a single wireSheetDrag helper covers both. */
.cc-photo-sheet[data-dragging="1"] .cc-photo-sheet-backdrop {
  opacity: var(--cc-sheet-drag-progress, 1);
  transition: none;
}

.cc-photo-sheet-panel {
  position: relative;
  width: 100%;
  height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--bs-panel);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.cc-photo-sheet[data-open="1"] .cc-photo-sheet-panel {
  transform: translateY(0);
}
.cc-photo-sheet[data-dragging="1"] .cc-photo-sheet-panel {
  transform: translateY(var(--cc-sheet-drag-y, 0px));
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .cc-photo-sheet-backdrop,
  .cc-photo-sheet-panel {
    transition: none;
  }
}

.cc-photo-sheet-drag-zone {
  flex-shrink: 0;
  border-bottom: 1px solid var(--bs-border);
  background: var(--bs-panel);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cc-photo-sheet[data-dragging="1"] .cc-photo-sheet-drag-zone {
  cursor: grabbing;
}
.cc-photo-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--bs-border-3);
  border-radius: 2px;
  margin: 8px auto 6px;
}
.cc-photo-sheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 12px;
}
.cc-photo-sheet-titles {
  flex: 1;
  min-width: 0;
}
.cc-photo-sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-fg);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-photo-sheet-sub {
  font-size: 11.5px;
  color: var(--bs-fg-4);
  margin-top: 2px;
}
.cc-photo-sheet-sub .cc-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.cc-photo-sheet-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cc-photo-sheet-zip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  background: var(--bs-accent);
  color: var(--bs-accent-fg);
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.cc-photo-sheet-zip:disabled {
  opacity: 0.55;
  cursor: progress;
}
.cc-photo-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--bs-surface);
  color: var(--bs-fg);
  border: 1px solid var(--bs-border-2);
  border-radius: 7px;
  cursor: pointer;
}

.cc-photo-sheet-grid-wrap {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}
.cc-photo-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}
.cc-photo-sheet-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bs-surface-2);
  position: relative;
}
.cc-photo-sheet-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc-photo-sheet-loading,
.cc-photo-sheet-empty,
.cc-photo-sheet-error {
  padding: 32px 16px;
  text-align: center;
  color: var(--bs-fg-3);
  font-size: 13px;
}
.cc-photo-sheet-loading-status {
  margin-bottom: 10px;
}
.cc-photo-sheet-progress {
  height: 4px;
  width: min(220px, 70%);
  margin: 0 auto;
  background: var(--bs-surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.cc-photo-sheet-progress-bar {
  height: 100%;
  background: var(--bs-accent);
  transition: width 200ms ease-out;
}

/* ── Pagination — desktop pager + mobile Load More ────────────────
   Container query (above) toggles which is shown; defaults define each
   pager's layout when visible. */
.cc-routine-list .cc-pagination {
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.cc-routine-list .cc-pager-desktop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}
.cc-routine-list .cc-pager-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
}
.cc-routine-list .cc-pager-per-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fg-3);
}
/* Per-page dropdown — same popover pattern as filter dropdowns + sort. */
.cc-routine-list .cc-per-page-dropdown {
  position: relative;
}
.cc-routine-list .cc-per-page-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 11px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: background 100ms, border-color 100ms;
}
.cc-routine-list .cc-per-page-trigger:hover,
.cc-routine-list .cc-per-page-dropdown[data-open="1"] .cc-per-page-trigger {
  background: var(--surface-2);
  border-color: var(--border-3);
}
/* The pagination strip sits at the bottom of the panel, and the panel
   has overflow:hidden for the rounded corners — so a position:absolute
   popover would be clipped. Use position:fixed instead, escape the
   panel's stacking context entirely. JS sets top/left inline at open
   time based on the trigger's rect + direction. */
.cc-per-page-pop {
  position: fixed;
  min-width: 100px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border-3);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  z-index: 9000;
  display: none;
}
.cc-routine-list .cc-per-page-dropdown[data-open="1"] .cc-per-page-pop {
  display: block;
}
.cc-routine-list .cc-per-page-dropdown[data-open="1"] .cc-per-page-pop {
  display: block;
}
.cc-routine-list .cc-per-page-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  background: transparent;
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
}
.cc-routine-list .cc-per-page-option[data-selected="1"] {
  background: var(--accent-soft);
  font-weight: 500;
}
.cc-routine-list .cc-pager-spacer { flex: 1; }
.cc-routine-list .cc-pager-range {
  font-size: 11.5px;
  color: var(--fg-3);
}
.cc-routine-list .cc-pager-range-num {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.cc-routine-list .cc-pager-of {
  color: var(--fg-4);
  margin: 0 4px;
}
.cc-routine-list .cc-pager-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}
.cc-routine-list .cc-pager-page-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.cc-routine-list .cc-pager-page-btn[disabled] {
  cursor: default;
  opacity: 0.5;
}
.cc-routine-list .cc-pager-page {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 26px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--fg-2);
}
.cc-routine-list .cc-pager-page-label,
.cc-routine-list .cc-pager-page-of-inner { color: var(--fg-4); }
.cc-routine-list .cc-pager-page-current,
.cc-routine-list .cc-pager-page-total {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
}
.cc-routine-list .cc-pager-page-current { color: var(--fg); font-weight: 600; }
.cc-routine-list .cc-load-more-btn {
  width: 100%;
  height: 42px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.cc-routine-list .cc-load-more-btn[hidden] { display: none; }
.cc-routine-list .cc-pager-showing {
  font-size: 11.5px;
  color: var(--fg-3);
}
.cc-routine-list .cc-pager-showing-num {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

/* ── Sticky list header + rows ────────────────────────────────────
   Grid columns are computed PHP-side per-row as CSS custom properties
   (--row-grid-wide / -mid / -tight) since they depend on which optional
   columns (Division, Event) are visible in the current data scope. The
   tier selection is then a pure CSS container-query swap.            */
.cc-routine-list .cc-list-header,
.cc-routine-list .cc-routine-row {
  display: grid;
  /* Default to tight; container queries below pick mid/wide. */
  grid-template-columns: var(--row-grid-tight);
  gap: 14px;
  align-items: center;
}

.cc-routine-list .cc-list-header {
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.cc-routine-list .cc-list-header .cc-col-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-4);
}
.cc-routine-list .cc-list-header .cc-col-label[data-align="right"] {
  text-align: right;
}

.cc-routine-list .cc-routine-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition: background 100ms;
}
.cc-routine-list .cc-routine-row:hover {
  background: var(--surface);
}

@container cc-list (min-width: 700px) {
  .cc-routine-list .cc-list-header,
  .cc-routine-list .cc-routine-row {
    grid-template-columns: var(--row-grid-mid);
  }
}
@container cc-list (min-width: 1120px) {
  .cc-routine-list .cc-list-header,
  .cc-routine-list .cc-routine-row {
    grid-template-columns: var(--row-grid-wide);
  }
}

/* Below 700px — hide the desktop grid + header, show the mobile row.
   Placed AFTER the unconditional `.cc-routine-row { display: grid }` rule
   above so this wins on cascade (same specificity, later in file). */
@container cc-list (max-width: 699px) {
  .cc-routine-list .cc-routine-row,
  .cc-routine-list .cc-list-header { display: none; }
  .cc-routine-list .cc-mobile-row  { display: block; }
}

/* ── ID chip ───────────────────────────────────────────────────── */
.cc-routine-list .cc-id-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: background 100ms;
}
.cc-routine-list .cc-id-chip[data-owns="0"] {
  background: var(--accent-soft);
  color: var(--accent-hi);
  border: 1px solid var(--accent-border);
}
.cc-routine-list .cc-routine-row:hover .cc-id-chip[data-owns="0"] {
  background: var(--accent-soft-2);
}
.cc-routine-list .cc-id-chip[data-owns="1"] {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
}

/* ── Action cell ─ slide pills (Watch / Gallery) ──────────────── */
.cc-routine-list .cc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  min-height: 28px;
}

/* Onsite-only routine (recorded, on the box, Mux not ready yet). The server
   can't see the LAN probe, so the row carries BOTH the action pills and an
   "Uploading…" chip; CSS picks based on data-cc-onsite-connected on the app
   root. Default (remote, or before the probe resolves): chip shown, pills
   hidden — the routine genuinely isn't reachable. Onsite-connected: the file
   is on the box, so show the real actions and drop the chip. */
.cc-uploading-chip {
  display: none;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--warn-border, color-mix(in oklab, var(--warn) 30%, transparent));
  border-radius: 5px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cc-uploading-spin { animation: ccSpin 0.9s linear infinite; flex-shrink: 0; }
@keyframes ccSpin { to { transform: rotate(360deg); } }

.cc-routine-list .cc-actions[data-cc-onsite-only="1"] > .cc-slide-pill,
.cc-routine-list .cc-mobile-actions[data-cc-onsite-only="1"] > .cc-mobile-pill {
  display: none;
}
.cc-routine-list .cc-actions[data-cc-onsite-only="1"] .cc-uploading-chip,
.cc-routine-list .cc-mobile-actions[data-cc-onsite-only="1"] .cc-uploading-chip {
  display: inline-flex;
}
.cc-judging-post[data-cc-onsite-connected="yes"] .cc-actions[data-cc-onsite-only="1"] > .cc-slide-pill {
  display: inline-flex;
}
.cc-judging-post[data-cc-onsite-connected="yes"] .cc-mobile-actions[data-cc-onsite-only="1"] > .cc-mobile-pill {
  display: flex;
}
.cc-judging-post[data-cc-onsite-connected="yes"] .cc-actions[data-cc-onsite-only="1"] .cc-uploading-chip,
.cc-judging-post[data-cc-onsite-connected="yes"] .cc-mobile-actions[data-cc-onsite-only="1"] .cc-uploading-chip {
  display: none;
}

/* Outer slide-pill — primary at rest, secondary slides out from the right
   edge on row hover (CSS rule already in place above). active="1" keeps
   the secondary visible (used by the gallery pill when the drawer is open). */
.cc-routine-list .cc-slide-pill {
  display: inline-flex;
  align-items: stretch;
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  overflow: hidden;
  transition: background 100ms, border-color 100ms;
}
.cc-routine-list .cc-slide-pill[data-active="1"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.cc-routine-list .cc-pill-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  background: transparent;
  color: var(--fg-2);
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
}
.cc-routine-list .cc-slide-pill[data-active="1"] .cc-pill-primary {
  color: var(--accent-hi);
}

/* 1px vertical divider between primary and secondary halves of the pill.
   flex-shrink:0 is required — under flex pressure it would otherwise
   collapse to 0px. */
.cc-routine-list .cc-slide-pill-divider {
  width: 1px;
  flex-shrink: 0;
  background: var(--border-2);
}
.cc-routine-list .cc-slide-pill[data-active="1"] .cc-slide-pill-divider {
  background: var(--accent-border);
}

.cc-routine-list .cc-pill-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: transparent;
  color: var(--fg-3);
  border: none;
  cursor: pointer;
  font: inherit;
}

/* ── Annotation-count cell (judging surface) ──────────────────────
   Informational, not a CTA: soft-accent chip with a bolt glyph + count,
   em-dash when none. Left-aligned in its column. */
.cc-routine-list .cc-anno-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.cc-routine-list .cc-anno-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 34px;
  height: 20px;
  padding: 0 7px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-hi);
}
.cc-routine-list .cc-anno-empty {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-4);
}
/* Mobile card: the chip rides next to the time in line 1. The chip takes
   the auto-margin (pushing it + the time to the right); the time then sits
   directly after it via the existing line-1 gap. */
.cc-routine-list .cc-mobile-anno {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
}
.cc-routine-list .cc-mobile-anno + .cc-mobile-time {
  margin-left: 0;
}

/* Clickable rows (the row's video can be watched) get a pointer cursor.
   Action buttons stop click propagation so they don't fire row click too. */
.cc-routine-list .cc-routine-row[data-cc-row-clickable="1"] {
  cursor: pointer;
}

/* ── Gallery drawer ───────────────────────────────────────────────
   Sibling of the row. Slides open via grid-template-rows 0fr → 1fr.
   The inner element holds the thumbnail grid (or loading / progress
   / error / empty state). One drawer open at a time per list — the
   JS layer enforces that.                                            */
.cc-routine-list .cc-gallery-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
  background: var(--surface);
}
.cc-routine-list .cc-gallery-drawer[data-open="1"] {
  grid-template-rows: 1fr;
  border-bottom: 1px solid var(--border);
}
.cc-routine-list .cc-gallery-drawer-inner {
  overflow: hidden;
  min-height: 0;
}

.cc-routine-list .cc-gallery-drawer-thumbs {
  max-height: 260px;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

/* Mobile close button at the bottom of the drawer — hidden by default
   (desktop keeps the row's Gallery pill within reach via inner scroll),
   shown at narrow widths where the page scrolls and the user may have
   scrolled past the row. */
.cc-routine-list .cc-gallery-drawer-close-mobile {
  display: none;
}

/* Mobile gallery drawer behaviour — placed AFTER the unconditional thumb
   styles above so the cascade falls our way (same specificity, later in
   the file wins). Nested inner scrolling on touch is awkward; let the
   page handle the scroll. Surface a Close button at the bottom so the
   user can dismiss the drawer without scrolling back up to the pill. */
@container cc-list (max-width: 699px) {
  .cc-routine-list .cc-gallery-drawer-thumbs {
    max-height: none;
    overflow-y: visible;
  }
  .cc-routine-list .cc-gallery-drawer-close-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 12px 14px;
    height: 42px;
    width: calc(100% - 24px);
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
  }
}
.cc-routine-list .cc-gallery-thumb {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  display: block;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}
.cc-routine-list .cc-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Loading / progress / empty / error states inside the drawer. */
.cc-routine-list .cc-gallery-drawer-loading,
.cc-routine-list .cc-gallery-drawer-empty,
.cc-routine-list .cc-gallery-drawer-error {
  padding: 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-3);
}
.cc-routine-list .cc-gallery-drawer-loading-status {
  margin-bottom: 8px;
}
.cc-routine-list .cc-gallery-drawer-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
  max-width: 240px;
  margin: 0 auto;
}
.cc-routine-list .cc-gallery-drawer-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 240ms ease;
  width: 0;
}

/* ── Video modal — always-dark ──────────────────────────────────
   Fixed-position overlay, rendered alongside the list panel. Always
   dark regardless of the site's theme; only the accent follows
   --pagetheme (cascaded from the host page). Plyr controls inherit
   this via the --plyr-* custom properties below.
   Note: the modal is intentionally outside .cc-routine-list scope (it's
   a viewport-level overlay) — selectors below use .cc-video-modal as
   the root, not .cc-routine-list .cc-video-modal.                    */
.cc-video-modal {
  --vm-bg:           #0a0a0c;
  --vm-surface:      #17181b;
  --vm-surface-2:    #232427;
  --vm-border:       #2a2c30;
  --vm-fg:           #f4f5f7;
  --vm-fg-2:         #c8ccd2;
  --vm-fg-3:         #9aa0a8;
  --vm-fg-4:         #6c727b;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui, "Geist", system-ui, sans-serif);
}
.cc-video-modal[data-open="1"] {
  display: flex;
}

.cc-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cc-video-modal-content {
  position: relative;
  /* Modal width is capped THREE ways:
       1) 95vw — never wider than the viewport
       2) 1100px — hard ceiling for huge displays
       3) (90svh - 100px titlebar allowance) × 16/9
          — keeps the 16:9 stage + titlebar inside the viewport on
          short screens (landscape phones). svh = smallest viewport
          height (most conservative on iOS where chrome can take a
          chunk of vh). 100px covers the titlebar in its tallest
          (two-line meta + buttons) state. */
  width: min(95vw, 1100px, calc((90svh - 100px) * 16 / 9));
  max-height: 90svh;
  display: flex;
  flex-direction: column;
  background: var(--vm-bg);
  border: 1px solid var(--vm-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--vm-fg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.cc-video-modal-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--vm-surface);
  border-bottom: 1px solid var(--vm-border);
}

.cc-video-modal .cc-id-chip {
  background: var(--pagetheme, #3169f7);
  color: #fff;
  border: 1px solid var(--pagetheme, #3169f7);
  min-width: 44px;
  height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-video-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.cc-video-modal-team {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vm-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-video-modal-meta-line {
  font-size: 11.5px;
  color: var(--vm-fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-video-modal-angles {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--vm-surface-2);
  border: 1px solid var(--vm-border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  height: 28px;
}
.cc-video-modal-angles[hidden] { display: none; }
.cc-video-modal-angle {
  padding: 0 10px;
  background: transparent;
  color: var(--vm-fg-3);
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.cc-video-modal-angle + .cc-video-modal-angle {
  border-left: 1px solid var(--vm-border);
}
.cc-video-modal-angle[data-active="1"] {
  background: var(--pagetheme, #3169f7);
  color: #fff;
}

.cc-video-modal-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--vm-surface-2);
  color: var(--vm-fg-2);
  border: 1px solid var(--vm-border);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  flex-shrink: 0;
}
.cc-video-modal-iconbtn:hover {
  background: var(--pagetheme, #3169f7);
  color: #fff;
  border-color: var(--pagetheme, #3169f7);
}
.cc-video-modal-iconbtn[hidden] { display: none; }

.cc-video-modal-stage {
  position: relative;
  background: var(--vm-bg);
  /* Plyr's wrapper inside this stage maintains 16:9 itself via
     padding-bottom: 56.25%, so the stage doesn't need an aspect-ratio
     override — it just hosts Plyr and its internal sizing. */
}
.cc-video-modal-stage video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Plyr theme overrides — keep Plyr's dark surfaces, swap brand colour. */
.cc-video-modal .plyr {
  --plyr-color-main: var(--pagetheme, #3169f7);
  --plyr-video-control-color: #fff;
  --plyr-video-control-color-hover: #fff;
}

/* ── Filter strip 1 — search + dropdowns + Filters toggle + Clear ── */
.cc-routine-list .cc-filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.cc-routine-list .cc-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  flex: 1 1 220px;
  min-width: 160px;
  /* The wrap is a <label> — global theme rules give it a margin-bottom
     that knocks it 4px out of vertical alignment with the sibling
     Filters button. Force margin to zero so flex align-items: center on
     the strip actually centers both items. */
  margin: 0;
}
.cc-routine-list .cc-search-input-wrap svg {
  flex-shrink: 0;
  color: var(--fg-3);
}
.cc-routine-list .cc-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-size: 12.5px;
  font-family: inherit;
  min-width: 0;
}
.cc-routine-list .cc-search-input::placeholder { color: var(--fg-3); }
/* type="search" inputs get a native WebKit cancel X on top of our themed
   clear affordances — hide it on all the list's search fields (main search,
   filter-dropdown search, sheet checklist search; the sheet is portaled to
   <body>, hence no .cc-routine-list scope). */
.cc-search-input::-webkit-search-cancel-button,
.cc-filter-dropdown-search-input::-webkit-search-cancel-button,
.cc-sheet-checklist-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.cc-routine-list .cc-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--fg-3);
  cursor: pointer;
}
.cc-routine-list .cc-search-clear[hidden] { display: none; }

/* ── Multi-select filter dropdown ─────────────────────────────── */
.cc-routine-list .cc-filter-dropdown {
  position: relative;
  flex-shrink: 0;
}
.cc-routine-list .cc-filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 11px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}
/* Tight line-heights on the label + value so flex centring aligns
   their visual centres (not the loose line-box centres — which left
   the uppercase label sitting 1-2px higher than the value). */
.cc-routine-list .cc-filter-dropdown-trigger > .cc-filter-dropdown-label,
.cc-routine-list .cc-filter-dropdown-trigger > .cc-filter-dropdown-value {
  line-height: 1;
}
.cc-routine-list .cc-filter-dropdown-trigger[data-active="1"] {
  background: var(--surface-2);
  border-color: var(--accent-border);
}
.cc-routine-list .cc-filter-dropdown-trigger[data-open="1"] {
  border-color: var(--border-3);
}
.cc-routine-list .cc-filter-dropdown-label {
  color: var(--fg-4);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.cc-routine-list .cc-filter-dropdown-value {
  color: var(--fg-3);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-routine-list .cc-filter-dropdown-trigger[data-active="1"] .cc-filter-dropdown-value {
  color: var(--accent-hi);
}
.cc-routine-list .cc-filter-dropdown-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cc-routine-list .cc-filter-dropdown-chev {
  color: var(--fg-3);
  transition: transform 120ms;
}
.cc-routine-list .cc-filter-dropdown-trigger[data-open="1"] .cc-filter-dropdown-chev {
  transform: rotate(180deg);
}

.cc-routine-list .cc-filter-dropdown-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 170px;
  max-width: 300px;
  background: var(--panel);
  border: 1px solid var(--border-3);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  z-index: 20;
  display: none;
  flex-direction: column;
  max-height: 360px;
}
.cc-routine-list .cc-filter-dropdown[data-open="1"] .cc-filter-dropdown-pop {
  display: flex;
}
.cc-routine-list .cc-filter-dropdown-search {
  padding: 6px;
  border-bottom: 1px solid var(--border);
}
.cc-routine-list .cc-filter-dropdown-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  background: var(--surface);
  border-radius: 5px;
}
.cc-routine-list .cc-filter-dropdown-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
}
.cc-routine-list .cc-filter-dropdown-options {
  overflow-y: auto;
  padding: 4px;
  flex: 1;
}
.cc-routine-list .cc-filter-dropdown-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  background: transparent;
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
}
.cc-routine-list .cc-filter-dropdown-option[data-selected="1"] {
  background: var(--accent-soft);
  font-weight: 500;
}
.cc-routine-list .cc-filter-dropdown-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-3);
  background: transparent;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-fg);
}
.cc-routine-list .cc-filter-dropdown-option[data-selected="1"] .cc-filter-dropdown-check {
  border-color: var(--accent);
  background: var(--accent);
}
.cc-routine-list .cc-filter-dropdown-option-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-routine-list .cc-filter-dropdown-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--fg-3);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
}
.cc-routine-list .cc-filter-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.cc-routine-list .cc-filter-dropdown-empty {
  padding: 14px 8px;
  font-size: 12px;
  color: var(--fg-4);
  text-align: center;
}

/* ── Filters drawer toggle (visible at tablet via container query) ── */
.cc-routine-list .cc-filters-toggle {
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.cc-routine-list .cc-filters-toggle[data-active="1"] {
  background: var(--surface-2);
  border-color: var(--accent-border);
}

/* ── Clear-all button (only when filters/search active) ─────────── */
.cc-routine-list .cc-filter-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  background: transparent;
  color: var(--fg-3);
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.cc-routine-list .cc-filter-clear-all[hidden] { display: none; }

/* ── Active filter chips + Clear button (row 2 inside filter strip) ──
   On desktop the wrapper is display:contents so the Clear button
   behaves as a direct flex child of .cc-filter-strip (inline with the
   filter dropdowns, original layout). On mobile the wrapper becomes
   a flex line with flex-basis:100% so it drops to its own row below
   search/Filters — chips fill the remaining width, Clear sits at the
   right. JS sets [hidden] when no filter / search is active. */
.cc-routine-list .cc-filter-strip-row2 {
  display: contents;
}
@container cc-list (max-width: 699px) {
  .cc-routine-list .cc-filter-strip-row2 {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
}

.cc-routine-list .cc-active-chips {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
.cc-routine-list .cc-active-chips:empty { display: none !important; }
@container cc-list (max-width: 699px) {
  .cc-routine-list .cc-active-chips { display: flex; }
}
.cc-routine-list .cc-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 6px 0 8px;
  background: var(--accent-soft);
  color: var(--fg);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}
.cc-routine-list .cc-active-chip-label {
  color: var(--fg-4);
  font-weight: 500;
}
.cc-routine-list .cc-active-chip-value {
  color: var(--fg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cc-routine-list .cc-active-chip svg {
  color: var(--fg-3);
  flex-shrink: 0;
  margin-left: 2px;
}
.cc-routine-list .cc-active-chip:hover svg { color: var(--fg); }

/* ── Results strip 2 — view switch + count + sort + refresh ────── */
.cc-routine-list .cc-results-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

/* Judging surface: a list title + upload-latency pill replace the My/All
   toggle on the left of the results strip. */
.cc-routine-list .cc-results-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cc-routine-list .cc-results-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}
.cc-routine-list .cc-results-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cc-routine-list .cc-results-pill-upload {
  background: var(--warn-soft);
  border: 1px solid color-mix(in oklab, var(--warn) 30%, transparent);
  color: var(--warn);
}
/* Mobile: keep the title, drop the latency pill to save room. */
@container cc-list (max-width: 699px) {
  .cc-routine-list .cc-results-pill-upload { display: none; }
}

/* Mobile (< 700) — drop the redundant count (the mobile pager below
   shows "Showing X of Y") and the "Sort:" prefix label so the strip
   contents fit at narrow viewports without the sort trigger getting
   clipped by .cc-routine-list's overflow:hidden. Strip also allowed
   to wrap as a safety net for ultra-narrow widths. */
@container cc-list (max-width: 699px) {
  .cc-routine-list .cc-results-strip {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 12px;
  }
  .cc-routine-list .cc-results-count { display: none; }
  .cc-routine-list .cc-sort-label-text { display: none; }
}

/* My / All segmented switch */
.cc-routine-list .cc-view-switch {
  display: inline-flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  flex-shrink: 0;
  height: 30px;
}
.cc-routine-list .cc-view-switch-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--fg-3);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}
.cc-routine-list .cc-view-switch-tab + .cc-view-switch-tab {
  border-left: 1px solid var(--border-2);
}
.cc-routine-list .cc-view-switch-tab[data-selected="1"] {
  background: var(--surface-2);
  color: var(--accent-hi);
  font-weight: 600;
}
.cc-routine-list .cc-view-switch-count {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--fg-4);
  font-weight: 600;
}
.cc-routine-list .cc-view-switch-tab[data-selected="1"] .cc-view-switch-count {
  color: var(--accent-hi);
}

.cc-routine-list .cc-results-spacer { flex: 1; }

.cc-routine-list .cc-results-count {
  font-size: 11.5px;
  color: var(--fg-3);
  flex-shrink: 0;
  padding: 0 6px;
}
.cc-routine-list .cc-results-count-num {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  font-weight: 500;
}
.cc-routine-list .cc-results-count-of {
  color: var(--fg-4);
}

/* Sort dropdown — same popover pattern as filter dropdowns. */
.cc-routine-list .cc-sort-dropdown { position: relative; }
.cc-routine-list .cc-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.cc-routine-list .cc-sort-label-text { color: var(--fg-4); }
/* Note: position:fixed (not absolute) so the popover escapes the
   .cc-routine-list overflow:hidden clip at narrow widths. JS sets top
   / bottom / right at click time from the trigger's rect. */
.cc-routine-list .cc-sort-pop {
  position: fixed;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border-3);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  z-index: 9700;
  display: none;
}
.cc-routine-list .cc-sort-dropdown[data-open="1"] .cc-sort-pop {
  display: block;
}
.cc-routine-list .cc-sort-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  background: transparent;
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
}
.cc-routine-list .cc-sort-option[data-selected="1"] {
  background: var(--accent-soft);
  font-weight: 500;
}
/* Render the check icon on every option (PHP no longer guards on
   $is_sel), then hide for non-selected so JS doesn't have to inject
   the SVG when sort changes. Use visibility (not display:none) so the
   trailing-icon column stays the same width across all options. */
.cc-routine-list .cc-sort-option:not([data-selected="1"]) .cc-sort-option-check {
  visibility: hidden;
}

/* Refresh button — icon-only, far right */
.cc-routine-list .cc-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--surface);
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

/* ── Results region — blur+spinner overlay during AJAX fetch ────── */
.cc-routine-list .cc-results-region {
  position: relative;
}
.cc-routine-list .cc-results-region > .cc-results-inner {
  transition: opacity 120ms;
}
.cc-routine-list .cc-results-region[data-loading="1"] > .cc-results-inner {
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
}
.cc-routine-list .cc-results-region > .cc-spinner-overlay {
  display: none;
  position: absolute;
  inset: 0;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  pointer-events: none;
}
.cc-routine-list .cc-results-region[data-loading="1"] > .cc-spinner-overlay {
  display: flex;
}

/* ── Connection chip — standalone styles ──────────────────────────
   The per-routine page styles the chip under .ccr-judging-container; the
   [cc-connection-chip] shortcode renders it inside .cc-connection-chip-mount
   instead, so reproduce the look here against OUR tokens (resolved from the
   themed .cc-theme ancestor). Scoped to the mount so it never collides with
   the per-routine chip. --accent-text there maps to our --accent-hi. */
.cc-connection-chip-mount { display: inline-flex; }
.cc-connection-chip-mount .ccr-conn-chip { position: relative; }
.cc-connection-chip-mount .ccr-conn-chip-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 10px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border-2); border-radius: 5px;
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.cc-connection-chip-mount .ccr-conn-chip[data-open="true"] .ccr-conn-chip-trigger,
.cc-connection-chip-mount .ccr-conn-chip-trigger:hover {
  background: var(--surface-2); border-color: var(--border-strong);
}
.cc-connection-chip-mount .ccr-conn-chip-dot,
.cc-connection-chip-mount .ccr-conn-chip-footer-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent);
  transition: background 140ms, box-shadow 140ms;
}
.cc-connection-chip-mount .ccr-conn-chip[data-status="connected"] .ccr-conn-chip-dot,
.cc-connection-chip-mount .ccr-conn-chip[data-status="connected"] .ccr-conn-chip-footer-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cc-connection-chip-mount .ccr-conn-chip[data-status="online"] .ccr-conn-chip-dot,
.cc-connection-chip-mount .ccr-conn-chip[data-status="online"] .ccr-conn-chip-footer-dot {
  background: var(--info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent);
}
.cc-connection-chip-mount .ccr-conn-chip[data-status="offline"] .ccr-conn-chip-dot,
.cc-connection-chip-mount .ccr-conn-chip[data-status="offline"] .ccr-conn-chip-footer-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.cc-connection-chip-mount .ccr-conn-chip-label { color: var(--fg-2); }
.cc-connection-chip-mount .ccr-conn-chip-sep { color: var(--fg-4); }
.cc-connection-chip-mount .ccr-conn-chip-mode { text-transform: capitalize; }
.cc-connection-chip-mount .ccr-conn-chip-chevron { color: var(--fg-3); flex: none; transition: transform 120ms; }
.cc-connection-chip-mount .ccr-conn-chip[data-open="true"] .ccr-conn-chip-chevron { transform: rotate(180deg); }
.cc-connection-chip-mount .ccr-conn-chip-popover {
  position: absolute; top: 30px; right: 0; width: 320px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 8px; box-shadow: var(--shadow-pop); overflow: hidden; padding: 6px; z-index: 50;
}
.cc-connection-chip-mount .ccr-conn-chip-popover[hidden] { display: none; }
.cc-connection-chip-mount .ccr-conn-chip-popover-header {
  padding: 8px 10px 6px; font-size: 11px; font-weight: 600; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cc-connection-chip-mount .ccr-conn-chip-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; background: transparent; border: none; border-radius: 5px;
  color: var(--fg); text-align: left; cursor: pointer; font-family: inherit;
  transition: background 100ms;
}
.cc-connection-chip-mount .ccr-conn-chip-option:hover { background: var(--hover); }
.cc-connection-chip-mount .ccr-conn-chip-option-radio {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); box-sizing: border-box;
  background: transparent; position: relative; transition: border-color 100ms;
}
.cc-connection-chip-mount .ccr-conn-chip-option[aria-checked="true"] .ccr-conn-chip-option-radio { border-color: var(--accent-hi); }
.cc-connection-chip-mount .ccr-conn-chip-option[aria-checked="true"] .ccr-conn-chip-option-radio::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent-hi);
}
.cc-connection-chip-mount .ccr-conn-chip-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-connection-chip-mount .ccr-conn-chip-option-title { font-size: 13px; font-weight: 500; color: var(--fg); }
.cc-connection-chip-mount .ccr-conn-chip-option-desc { font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }
.cc-connection-chip-mount .ccr-conn-chip-popover-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 4px; padding: 10px; border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1; color: var(--fg-3); text-align: center;
}

/* ── Live-stream panel ([cc-live-stream] / coordinated hero) ───────── */
@keyframes ccPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.cc-stream-panel {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cc-stream-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
/* .cc-stream-dot / .cc-stream-badge are kept for the real, status-driven
   indicator that lands with the Mux integration (live / offline / ended).
   Until then the bar shows a neutral broadcast glyph, not a status claim. */
.cc-stream-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
  animation: ccPulse 1.6s ease-in-out infinite;
}
.cc-stream-icon { color: var(--fg-3); flex: none; }
.cc-stream-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.cc-stream-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 4px;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.cc-stream-bar-spacer { flex: 1; }
.cc-stream-frame { position: relative; background: #000; }
.cc-stream-frame iframe { display: block; }
.cc-stream-empty {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; padding: 12px;
}
.cc-stream-empty-title { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.cc-stream-empty-sub { font-size: 11.5px; color: var(--fg-4); }
.cc-stream-muted-overlay {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.cc-stream-panel[data-muted="1"] .cc-stream-muted-overlay { display: flex; }
.cc-stream-muted-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: #fff; font-size: 11.5px; font-weight: 500;
}

/* ── Recent-uploads rail ([cc-recent-uploads] / coordinated rail) ───── */
.cc-recent {
  container-type: inline-size;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Header band — same bar as the live-stream / live-capture panels it sits
   beside (12px 14px, bottom border, 13px title). */
.cc-recent-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cc-recent-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cc-recent-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.cc-recent-empty { font-size: 12px; color: var(--fg-4); padding: 12px 14px; }
/* Default = full-width horizontal strip: 5 cards across (one row). */
.cc-recent-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px; }
/* Smaller / tablet widths (e.g. the recent strip stacked under a hero): drop
   to 3 across — the extra two are hidden. */
@container (max-width: 940px) {
  .cc-recent-strip { grid-template-columns: repeat(3, 1fr); }
  .cc-recent-strip > .cc-recent-card:nth-child(n+4) { display: none; }
}
/* Narrow (the column beside the live stream, or mobile): vertical rail, all
   5 cards, scrolls internally if it runs past the stream's height. */
@container (max-width: 520px) {
  .cc-recent { min-height: 0; }
  .cc-recent-strip {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .cc-recent-strip > .cc-recent-card:nth-child(n+4) { display: block; }
}
.cc-recent-card {
  display: block; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  text-decoration: none;
  transition: background 100ms, border-color 100ms;
}
.cc-recent-card:hover { background: var(--surface); }
.cc-recent-card.is-new { background: var(--accent-soft); border-color: var(--accent-border); }
.cc-recent-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.cc-recent-id {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 18px; padding: 0 6px;
  background: var(--accent-soft); color: var(--accent-hi);
  border: 1px solid var(--accent-border); border-radius: 4px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
}
.cc-recent-new {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px;
  background: var(--accent); color: var(--accent-fg);
  border-radius: 4px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.cc-recent-card-spacer { flex: 1; }
.cc-recent-anno {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--accent-hi);
}
.cc-recent-time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); }
.cc-recent-team {
  font-size: 12px; font-weight: 500; color: var(--fg); margin-bottom: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-recent-meta {
  font-size: 10.5px; color: var(--fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Scrollbars ──────────────────────────────────────────────────────
   Match the routine viewer's treatment (thin, dark thumb, transparent
   track), but token-driven so they follow light/dark. Applies to every
   scrollable inside themed surfaces (recent rail, capture pending list,
   help drawer, list internals). */
.cc-theme,
.cc-theme *,
.cc-routine-list,
.cc-routine-list * {
  scrollbar-width: thin;
  scrollbar-color: var(--border-3) transparent;
}
.cc-theme *::-webkit-scrollbar,
.cc-routine-list *::-webkit-scrollbar { width: 10px; height: 10px; }
.cc-theme *::-webkit-scrollbar-track,
.cc-routine-list *::-webkit-scrollbar-track { background: transparent; }
.cc-theme *::-webkit-scrollbar-thumb,
.cc-routine-list *::-webkit-scrollbar-thumb {
  background: var(--border-3);
  border-radius: 10px;
  border: 2px solid var(--bg);
}
.cc-theme *::-webkit-scrollbar-thumb:hover,
.cc-routine-list *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* The PAGE scrollbar on EP post pages — tokens aren't in scope on <html>,
   so mirror the palette values, keyed off the app's theme attribute (adapts
   when the light/dark toggle lands). */
html:has(.cc-judging-post[data-theme="dark"]) {
  scrollbar-width: thin;
  scrollbar-color: #3a3d42 #0f0f10;
}
html:has(.cc-judging-post[data-theme="dark"])::-webkit-scrollbar { width: 12px; }
html:has(.cc-judging-post[data-theme="dark"])::-webkit-scrollbar-track { background: #0f0f10; }
html:has(.cc-judging-post[data-theme="dark"])::-webkit-scrollbar-thumb {
  background: #3a3d42; border-radius: 10px; border: 2px solid #0f0f10;
}
html:has(.cc-judging-post[data-theme="dark"])::-webkit-scrollbar-thumb:hover { background: #4a4e55; }
html:has(.cc-judging-post[data-theme="light"]) {
  scrollbar-width: thin;
  scrollbar-color: #b8b8b3 #f7f7f5;
}
html:has(.cc-judging-post[data-theme="light"])::-webkit-scrollbar { width: 12px; }
html:has(.cc-judging-post[data-theme="light"])::-webkit-scrollbar-track { background: #f7f7f5; }
html:has(.cc-judging-post[data-theme="light"])::-webkit-scrollbar-thumb {
  background: #b8b8b3; border-radius: 10px; border: 2px solid #f7f7f5;
}
html:has(.cc-judging-post[data-theme="light"])::-webkit-scrollbar-thumb:hover { background: #9a9a95; }

/* ── Coordinated EP judging app ([cc-judging-post]) ─────────────────── */
/* Named container (cc-app) so rules inside nested containers (e.g. the
   recent rail, itself a container) can still query the APP's width. */
.cc-judging-post {
  container: cc-app / inline-size;
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
}

/* ── App header (event identity + controls) ──────────────────────────
   The EP post pages have no global site header, so this is the page header. */
.cc-jp-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.cc-jp-banner {
  width: 80px; height: 44px; flex: none;
  border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%,
              color-mix(in srgb, var(--accent) 75%, transparent) 60%,
              color-mix(in srgb, var(--accent) 56%, transparent) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.cc-jp-banner-logo { width: 100%; height: 100%; object-fit: cover; }
.cc-jp-banner-mark {
  font-size: 16px; font-weight: 800; color: #fff;
  letter-spacing: -0.4px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.cc-jp-event { min-width: 0; flex: 1 1 auto; }
.cc-jp-event-name {
  font-size: 15px; font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-jp-event-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font-size: 11.5px; color: var(--fg-3); flex-wrap: wrap;
}
.cc-jp-event-sep { color: var(--fg-4); }
.cc-jp-event-date { font-family: var(--font-mono); }

.cc-jp-help {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px 0 9px;
  background: transparent; color: var(--fg-2);
  border: 1px solid transparent; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  flex: none;
}
.cc-jp-help:hover,
.cc-jp-help[aria-expanded="true"] {
  background: var(--surface-2); color: var(--fg); border-color: var(--border-2);
}

.cc-jp-profile { position: relative; flex: none; }
.cc-jp-profile-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 9px 0 3px;
  background: transparent; color: var(--fg);
  border: 1px solid transparent; border-radius: 16px;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.cc-jp-profile-trigger:hover,
.cc-jp-profile[data-open="true"] .cc-jp-profile-trigger {
  background: var(--surface-2); border-color: var(--border-2);
}
.cc-jp-profile-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-2);
  font-size: 10.5px; font-weight: 600; color: var(--fg-2);
}
.cc-jp-profile-role { color: var(--fg-3); font-size: 11.5px; }
.cc-jp-profile-chevron { color: var(--fg-3); transition: transform 120ms; }
.cc-jp-profile[data-open="true"] .cc-jp-profile-chevron { transform: rotate(180deg); }
.cc-jp-profile-menu {
  position: absolute; top: 38px; right: 0; z-index: 31;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 9px;
  box-shadow: var(--shadow-pop);
  padding: 4px;
}
.cc-jp-profile-id {
  padding: 10px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.cc-jp-profile-name { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.cc-jp-profile-sub { font-size: 11px; color: var(--fg-3); margin-top: 1px; word-break: break-word; }
/* Override the host theme's `a { color: accent; text-decoration: underline }`
   (out-specifies the base rule) — menu items read as plain rows. */
.cc-theme a.cc-jp-profile-item,
.cc-theme a.cc-jp-profile-item:hover,
.cc-theme a.cc-jp-profile-item:focus {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  border-radius: 5px; color: var(--fg); text-decoration: none;
  font-size: 12.5px;
}
.cc-theme a.cc-jp-profile-item:hover { background: var(--hover); }

/* Narrow: let the header wrap rather than overflow. */
@container (max-width: 560px) {
  .cc-jp-header { gap: 10px; padding: 12px 14px; }
  .cc-jp-banner { width: 56px; height: 38px; }
  .cc-jp-help span { display: none; }
}

/* ── Help & Support drawer ───────────────────────────────────────────
   Portaled to <body> (escapes the app's container-type); the portal wrapper
   carries the theme but has no box of its own (its children are fixed). */
.cc-jp-help-portal { display: contents; }
.cc-jp-help-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.4);
}
.cc-jp-help-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: 420px; max-width: 92vw;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border-2);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.5);
}
/* Clear the WP admin bar when an admin previews (judges have none). */
body.admin-bar .cc-jp-help-drawer { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .cc-jp-help-drawer { top: 46px; }
}
.cc-jp-help-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cc-jp-help-title { font-size: 14px; font-weight: 600; color: var(--fg); }
.cc-jp-help-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; color: var(--fg-2);
  border: 1px solid transparent; border-radius: 5px; cursor: pointer;
}
.cc-jp-help-close:hover { background: var(--surface-2); color: var(--fg); }
.cc-jp-help-body { flex: 1; overflow-y: auto; padding: 16px; }

.cc-jp-help-slack {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; margin-bottom: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  font-size: 12px; color: var(--fg); line-height: 1.5;
}
.cc-jp-help-slack-title { font-weight: 600; margin-bottom: 3px; }
.cc-jp-help-mono { font-family: var(--font-mono); color: var(--accent-hi); }

.cc-jp-help-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--fg-4); margin: 4px 4px 8px;
}
.cc-jp-help-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px; padding: 10px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.cc-jp-help-card-lead {
  display: flex; align-items: center; gap: 7px; margin-bottom: 2px;
  font-size: 11.5px; color: var(--fg-2);
}

/* Copyable field (label · value · copy) */
.cc-jp-copy {
  display: flex; align-items: stretch; height: 32px; min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.cc-jp-copy-label {
  display: flex; align-items: center; padding: 0 10px; min-width: 64px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--fg-4);
  background: var(--panel);
  border-right: 1px solid var(--border);
}
.cc-jp-copy-value {
  flex: 1; display: flex; align-items: center; padding: 0 10px; min-width: 0;
  font-size: 12.5px; color: var(--fg); font-weight: 500;
  user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-jp-copy-value.is-mono { font-family: var(--font-mono); }
.cc-jp-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; flex: none;
  background: transparent; color: var(--fg-3);
  border: none; border-left: 1px solid var(--border); cursor: pointer;
}
.cc-jp-copy-btn:hover { background: var(--hover); }
.cc-jp-copy-btn.is-copied { color: var(--accent-hi); }

/* ── Live-capture strip (onsite-connected annotators' hero) ──────────── */
.cc-live-capture {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
}
.cc-lc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 16%, transparent) 0%,
              color-mix(in srgb, var(--accent) 6%, transparent) 100%);
  border-bottom: 1px solid var(--accent-border);
  white-space: nowrap;
}
.cc-lc-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cc-lc-title { font-size: 12px; font-weight: 600; color: var(--fg); }
.cc-lc-sub { font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; }
.cc-lc-spacer { flex: 1; }
.cc-lc-clock {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: var(--bg);
  border: 1px solid var(--border-2); border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
}
.cc-lc-paused {
  display: none; align-items: center; gap: 6px;
  padding: 3px 9px;
  background: var(--warn-soft, rgba(245, 165, 36, 0.12));
  border: 1px solid rgba(245, 165, 36, 0.30);
  border-radius: 5px;
  font-size: 10.5px; color: var(--warn, #f5a524); font-weight: 600;
  letter-spacing: 0.3px; text-transform: uppercase;
}
/* Popup open: pause capture (the popup owns the judge's attention). */
.cc-live-capture[data-disabled="1"] .cc-lc-paused { display: inline-flex; }
.cc-live-capture[data-disabled="1"] .cc-lc-clock { display: none; }
.cc-live-capture[data-disabled="1"] .cc-lc-body {
  opacity: 0.4; filter: saturate(0.6); pointer-events: none;
}

.cc-lc-body {
  flex: 1; min-height: 0; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: opacity 180ms, filter 180ms;
}
.cc-lc-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-lc-slot {
  display: flex; align-items: stretch; height: 42px;
  background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 7px;
  overflow: hidden;
}
.cc-lc-slot[data-set="1"] { border-color: var(--accent-border); }
.cc-lc-slot-icon {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px;
  background: var(--panel); color: var(--fg-3);
  border-right: 1px solid var(--border);
}
.cc-lc-slot[data-set="1"] .cc-lc-slot-icon {
  background: var(--accent-soft); color: var(--accent-hi);
  border-right-color: var(--accent-border);
}
.cc-lc-slot-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 12px;
}
.cc-lc-slot-label {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--fg-4);
}
.cc-lc-slot-value { font-size: 11px; color: var(--fg-4); }
.cc-lc-slot[data-set="1"] .cc-lc-slot-value {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg);
  font-weight: 500; line-height: 1;
}
.cc-lc-slot-set {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: var(--surface-2); color: var(--fg);
  border: none; border-left: 1px solid var(--border-2);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cc-lc-slot-set:hover { background: var(--hover); }
.cc-lc-slot-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px;
  background: transparent; color: var(--fg-3);
  border: none; border-left: 1px solid var(--border-2); cursor: pointer;
}
.cc-lc-slot-clear:hover { background: var(--hover); color: var(--fg); }
.cc-lc-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--bg);
  border: 1px solid var(--border-2); border-radius: 3px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: var(--fg-3);
}
.cc-lc-key-invert {
  width: 18px; height: 18px;
  background: rgba(255, 255, 255, 0.16);
  border: none; color: inherit; font-size: 10px; font-weight: 700;
}

.cc-lc-capture {
  display: flex; align-items: stretch;
  height: 40px; width: 100%; padding: 0;
  background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 7px;
  overflow: hidden; cursor: pointer; text-align: left;
  font: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 3px 10px color-mix(in srgb, var(--accent) 28%, transparent);
}
.cc-lc-capture:hover { background: var(--accent-hi); }
.cc-lc-capture-keycell {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.18);
  border-right: 1px solid rgba(0, 0, 0, 0.20);
}
.cc-lc-capture-label {
  flex: 1; display: flex; align-items: center;
  padding: 0 14px;
  font-size: 13.5px; font-weight: 600;
}
.cc-lc-capture-plus { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; }

.cc-lc-pending {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
}
.cc-lc-pending-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--fg-4);
}
.cc-lc-pending-ico { color: var(--accent-hi); flex: none; }
.cc-lc-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 15px; padding: 0 4px;
  background: var(--accent-soft); color: var(--accent-hi);
  border: 1px solid var(--accent-border); border-radius: 7px;
  font-family: var(--font-mono);
}
.cc-lc-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 10px 6px;
  font-size: 11.5px; color: var(--fg-4); text-align: center; line-height: 1.5;
}
.cc-lc-list {
  max-height: 200px;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.cc-lc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 5px;
}
.cc-lc-row-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none; color: var(--fg-2);
}
.cc-lc-row-ico.is-marker { color: var(--accent-hi); }
.cc-lc-row-clock { font-family: var(--font-mono); font-size: 12px; color: var(--fg); font-weight: 500; }
.cc-lc-row-label { font-size: 11px; color: var(--fg-3); }
.cc-lc-row-spacer { flex: 1; }
.cc-lc-row-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  background: var(--warn-soft, rgba(245, 165, 36, 0.12));
  border: 1px solid rgba(245, 165, 36, 0.28);
  border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--warn, #f5a524);
}
.cc-lc-row-badge-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--warn, #f5a524);
}
/* Remove a still-pending marker (misclick / orphan). Muted at rest, brightens
   on hover — always present so an accidental marker is one tap away, but it
   shouldn't compete with the markers themselves. */
.cc-lc-row-del {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 20px; height: 20px; margin-left: 2px; padding: 0;
  background: transparent; border: none; border-radius: 4px;
  color: var(--fg-4); cursor: pointer;
  opacity: 0.55; transition: opacity 100ms, color 100ms, background 100ms;
}
.cc-lc-row:hover .cc-lc-row-del { opacity: 1; }
.cc-lc-row-del:hover { color: var(--danger, #e5484d); background: color-mix(in oklab, var(--danger, #e5484d) 14%, transparent); opacity: 1; }
.cc-lc-row-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }

/* FAQ accordion */
.cc-jp-help-faq { display: flex; flex-direction: column; gap: 6px; }
.cc-jp-faq-item {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
}
.cc-jp-faq-q {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  background: transparent; border: none; text-align: left;
  color: var(--fg); cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 500;
  /* Reserved so the open-state separator doesn't shift the layout. */
  border-bottom: 1px solid transparent;
}
.cc-jp-faq-q > span { flex: 1; }
.cc-jp-faq-chevron { color: var(--fg-3); flex: none; transition: transform 140ms; }
.cc-jp-faq-q[aria-expanded="true"] .cc-jp-faq-chevron { transform: rotate(180deg); }
/* Open: separator under the question + breathing room above the answer (the
   question's focus outline was otherwise sitting flush on the answer text). */
.cc-jp-faq-q[aria-expanded="true"] { border-bottom-color: var(--border); }
.cc-jp-faq-a {
  padding: 10px 12px 12px;
  font-size: 12px; color: var(--fg-2); line-height: 1.55;
}
/* Wysiwyg content (jcp_help_faqs answers / jcp_support_message) — scale the
   block elements to the drawer's small type. */
.cc-jp-faq-a p,
.cc-jp-help-slack p { margin: 0 0 8px; }
.cc-jp-faq-a p:last-child,
.cc-jp-help-slack p:last-child { margin-bottom: 0; }
.cc-jp-faq-a h3,
.cc-jp-faq-a h4,
.cc-jp-faq-a h5 {
  margin: 12px 0 5px;
  /* Fully reset — the host theme styles headings (display face / italics). */
  font-family: inherit; font-style: normal; text-transform: none;
  letter-spacing: 0;
  font-size: 12px; font-weight: 600; color: var(--fg); line-height: 1.4;
}
.cc-jp-faq-a ul,
.cc-jp-faq-a ol { margin: 0 0 8px; padding-left: 18px; }
.cc-jp-faq-a li { margin: 0 0 3px; }
.cc-jp-faq-a a,
.cc-jp-help-slack a { color: var(--accent-hi); }

/* Hero: stream (flex) + recent rail (fixed narrow column). Stacks below the
   tablet breakpoint, where the recent side becomes a full-width strip via its
   own container query. */
.cc-jp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}
.cc-jp-hero-main { min-width: 0; }
.cc-jp-hero-side { min-width: 0; }
@container (max-width: 1024px) {
  .cc-jp-hero { grid-template-columns: 1fr; }
}

/* Location re-flow. Both states are always in the DOM so the connection chip
   can switch between them live (routine-list.js mirrors the mode onto
   data-cc-location). Only onsite + no annotation access drops the stream: the
   recent rail then spans the full width and becomes a horizontal strip (via
   its own container query). Remote — and onsite annotators — keep the stream
   hero. */
.cc-judging-post[data-cc-location="onsite"][data-cc-access="no"] .cc-jp-hero {
  grid-template-columns: 1fr;
}
.cc-judging-post[data-cc-location="onsite"][data-cc-access="no"] .cc-jp-hero-main {
  display: none;
}

/* Live capture replaces the stream for create-access judges who are GENUINELY
   onsite-connected (the frontend.js probe — reachable now or within 30 min —
   not merely the chip preference). data-cc-onsite-connected is client-driven;
   the capture markup only exists for create-access users.

   Capture mode stretches: the strip and the recent rail are equal height
   (design: alignItems stretch when onsite capture), with the rail's five
   cards setting the row and the pending-annotations box absorbing the strip's
   extra space. Stream mode keeps align-items: start (the rail height-caps to
   the 16:9 player instead). */
.cc-jp-hero-capture { display: none; }
.cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-jp-hero-stream { display: none; }
.cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-jp-hero { align-items: stretch; }
.cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-jp-hero-main {
  display: flex; flex-direction: column; min-height: 0;
}
.cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-jp-hero-capture {
  display: flex; flex: 1; min-height: 0;
}
.cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-live-capture {
  flex: 1; min-width: 0;
}
.cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-jp-hero-side .cc-recent {
  height: 100%; min-height: 0;
}
/* Wide two-column hero: cap the pending list at ~10 rows and scroll past
   that, rather than absorbing the full stretched height (which let it grow
   tall enough to push the routine list below the fold). The list shrinks to
   fit when there are fewer markers; the container above keeps the strip's
   bordered band intact. A min-height on the pending block keeps the capture
   area a prominent, stable feature even when empty / the rail is short — it's
   the onsite judge's primary surface, so it shouldn't collapse to a sliver. */
@container (min-width: 1025px) {
  .cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-lc-list {
    flex: 0 1 auto; min-height: 0; max-height: 21rem;
  }
  .cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-lc-pending {
    min-height: 13rem;
  }
}

/* ── Onsite live-stream overlay (fallback rewind surface) ─────────────
   Onsite judges' hero is capture (or the strip), so the stream opens on
   demand from the recent-uploads header as a viewport-capped 16:9 overlay.
   The open button only exists in those two app states — when the stream
   hero is visible (remote) it stays hidden. */
.cc-recent-openstream {
  display: none; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px 0 8px; flex: none;
  background: var(--surface); color: var(--fg-2);
  border: 1px solid var(--border-2); border-radius: 5px;
  font: inherit; font-size: 11px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.cc-recent-openstream:hover { background: var(--hover); color: var(--fg); }
.cc-recent-openstream-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--danger);
  animation: ccPulse 1.6s ease-in-out infinite;
}
.cc-judging-post[data-cc-access="yes"][data-cc-onsite-connected="yes"] .cc-recent-openstream,
.cc-judging-post[data-cc-location="onsite"][data-cc-access="no"] .cc-recent-openstream {
  display: inline-flex;
}

.cc-stream-overlay-portal { display: contents; }
.cc-stream-overlay-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 8, 12, 0.78);
}
.cc-stream-overlay {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 91;
  width: min(92vw, calc((100vh - 132px) * 16 / 9));
  background: var(--panel);
  border: 1px solid var(--border-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.cc-stream-overlay-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cc-stream-overlay-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--danger);
  animation: ccPulse 1.6s ease-in-out infinite;
}
.cc-stream-overlay-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.cc-stream-overlay-sub { font-size: 11.5px; color: var(--fg-3); }
.cc-jp-header-spacer { flex: 1; }
.cc-stream-overlay-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex: none;
  background: var(--surface-2); color: var(--fg-2);
  border: 1px solid var(--border-2); border-radius: 6px; cursor: pointer;
}
.cc-stream-overlay-close:hover { background: var(--hover); color: var(--fg); }
.cc-stream-overlay-frame { width: 100%; }

/* ── Theatre mode (wide stream hero only) ────────────────────────────
   Collapse the recent rail; the stream goes full width, capped to the
   viewport (handoff: "theatre mode caps the player to the viewport so judges
   never scroll to see it"), with a reopen pill in the stream bar. The
   affordances only exist on the wide two-column STREAM hero — not stacked
   (≤1024px), not live-capture, not the onsite no-access strip. */
.cc-recent-head-spacer { flex: 1; }
.cc-recent-collapse {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; flex: none;
  background: transparent; color: var(--fg-3);
  border: 1px solid transparent; border-radius: 5px; cursor: pointer;
}
.cc-recent-collapse:hover { background: var(--hover); color: var(--fg); }
.cc-stream-reopen {
  display: none; align-items: center; gap: 7px;
  height: 28px; padding: 0 8px 0 10px; flex: none;
  background: var(--surface); color: var(--fg-2);
  border: 1px solid var(--border-2); border-radius: 6px;
  font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.cc-stream-reopen:hover { background: var(--hover); color: var(--fg); }
.cc-stream-reopen-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent);
}
.cc-stream-reopen-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent-soft); color: var(--accent-hi);
  border: 1px solid var(--accent-border); border-radius: 8px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
}
@container cc-app (min-width: 1025px) {
  .cc-judging-post:not([data-cc-access="yes"][data-cc-onsite-connected="yes"]):not([data-cc-location="onsite"][data-cc-access="no"]) .cc-jp-hero-side .cc-recent-collapse {
    display: inline-flex;
  }
  .cc-judging-post[data-cc-theatre="1"]:not([data-cc-access="yes"][data-cc-onsite-connected="yes"]):not([data-cc-location="onsite"][data-cc-access="no"]) .cc-jp-hero {
    grid-template-columns: 1fr;
  }
  .cc-judging-post[data-cc-theatre="1"]:not([data-cc-access="yes"][data-cc-onsite-connected="yes"]):not([data-cc-location="onsite"][data-cc-access="no"]) .cc-jp-hero-side {
    display: none;
  }
  .cc-judging-post[data-cc-theatre="1"]:not([data-cc-access="yes"][data-cc-onsite-connected="yes"]):not([data-cc-location="onsite"][data-cc-access="no"]) .cc-stream-reopen {
    display: inline-flex;
  }
  /* Viewport cap: the 16:9 embed's height follows its width, so cap the
     panel's width to what (viewport minus page chrome) allows. Centred in
     the now-full-width row. */
  .cc-judging-post[data-cc-theatre="1"]:not([data-cc-access="yes"][data-cc-onsite-connected="yes"]):not([data-cc-location="onsite"][data-cc-access="no"]) .cc-jp-hero-main .cc-stream-panel {
    width: 100%;
    max-width: min(100%, calc((100vh - 200px) * 16 / 9));
    margin: 0 auto;
  }
}

/* Judging surface: the "On Demand routines" title bar (results strip) sits
   ABOVE the search + filter strip. Both are flex children of .cc-routine-list,
   so a negative order lifts the title bar to the top. */
.cc-routine-list[data-cc-surface="judging"] .cc-results-strip { order: -1; }

/* Judging ≤820px (container): drop the Annotations column so the row + action
   pill never clip (handoff §7). Effective over 700–820px — below 700 the list
   swaps to mobile cards, which carry their own annotation chip. The count
   still surfaces in the popup and the recent cards. */
@container cc-list (max-width: 820px) {
  .cc-routine-list[data-cc-surface="judging"] .cc-list-header,
  .cc-routine-list[data-cc-surface="judging"] .cc-routine-row {
    grid-template-columns: var(--row-grid-noanno, var(--row-grid-mid));
  }
  .cc-routine-list[data-cc-surface="judging"] .cc-anno-cell,
  .cc-routine-list[data-cc-surface="judging"] .cc-col-label[data-cc-col="anno"] {
    display: none;
  }
}

/* Recent cards are <a> elements — override the host theme's link underline
   (its `a { text-decoration: underline }` can out-specify the base rule). */
.cc-theme a.cc-recent-card,
.cc-theme a.cc-recent-card:hover,
.cc-theme a.cc-recent-card:focus,
.cc-theme a.cc-recent-card:visited { text-decoration: none; }