/* Interface faces: Sora carries headings and the brand, Inter carries body and data. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/gateway/assets/fonts/sora-variable.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/gateway/assets/fonts/inter-variable.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/gateway/assets/fonts/barlow-condensed-regular.ttf") format("truetype");
}

/* Channel browser shell: one explicit rail contract for every browsing route. */
.ce-channel-switcher {
  display: flex;
  min-width: 0;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-behavior: smooth;
}
.ce-channel-switcher a {
  display: flex;
  min-width: 10.5rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--colour-text);
  text-decoration: none;
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}
.ce-channel-switcher a:hover {
  background: color-mix(in srgb, var(--colour-raised-2) 60%, transparent);
}
.ce-channel-switcher a[aria-current="true"] {
  border-color: var(--colour-border);
  background: var(--colour-raised-2);
}
.ce-channel-switcher a[aria-current="true"] img,
.ce-channel-switcher a[aria-current="true"] .ce-channel-switcher__initials {
  box-shadow: 0 0 0 1px var(--colour-border-strong);
}
.ce-channel-switcher img,
.ce-channel-switcher__initials {
  display: grid;
  width: 2.125rem;
  height: 2.125rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--colour-raised-2);
  object-fit: cover;
  font-size: var(--font-size-11);
  font-weight: 700;
}
.ce-channel-switcher a > span:last-child {
  min-width: 0;
}
.ce-channel-switcher strong,
.ce-channel-switcher small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ce-channel-switcher small {
  margin-top: 0.125rem;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-channels-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(22.5rem, 0.88fr);
  gap: 1.125rem;
}
.ce-roster--home,
.ce-home-work {
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-surface);
}
.ce-home-panel-heading,
.ce-home-work > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 1.125rem;
  border-bottom: 1px solid var(--colour-border);
}
.ce-home-panel-heading h2,
.ce-home-work h2,
.ce-home-panel-heading p,
.ce-home-work header p,
.ce-home-work__empty p {
  margin: 0;
}
.ce-home-panel-heading h2,
.ce-home-work h2 {
  font-size: var(--font-size-18);
}
.ce-home-panel-heading p,
.ce-home-work header p,
.ce-home-work__empty p,
.ce-home-work__item small,
.ce-home-work footer span {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}
.ce-home-panel-heading a {
  font-size: var(--font-size-14);
  font-weight: 700;
  text-decoration: none;
}
.ce-roster--home .ce-channel-choice {
  min-height: 6.25rem;
  grid-template-columns: 3.125rem 3rem minmax(0, 1fr) auto;
  padding: var(--space-3) 1.125rem;
}
.ce-roster--home .ce-channel-choice[aria-current="true"] {
  background: transparent;
  box-shadow: inset 3px 0 var(--colour-focus);
}
.ce-channel-choice__latest {
  display: block;
  width: 3rem;
  height: 3.625rem;
  border-radius: var(--radius-small);
  background: var(--colour-media);
  object-fit: cover;
}
.ce-channel-choice__latest--empty {
  border: 1px solid var(--colour-border);
}
.ce-roster__settings {
  padding: 0 1.125rem var(--space-2);
}
.ce-roster__evidence {
  margin: 0;
  padding: var(--space-3) 1.125rem 0;
  color: var(--colour-caution);
  font-size: var(--font-size-12);
}
.ce-home-work {
  align-self: start;
}
.ce-home-work > header {
  display: block;
}
.ce-home-work__list {
  display: grid;
}
.ce-home-work__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 1.125rem;
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-text);
  text-decoration: none;
}
.ce-home-work__item:hover {
  background: var(--colour-raised-2);
}
.ce-home-work__item strong,
.ce-home-work__item small {
  display: block;
}
.ce-home-work__item svg {
  width: 1.125rem;
  color: var(--colour-focus);
}
.ce-home-work__dot {
  width: 0.5625rem;
  height: 0.5625rem;
  margin-top: 0.375rem;
  border-radius: 50%;
  background: var(--colour-focus);
}
.ce-home-work__dot--draft {
  background: var(--colour-positive);
}
.ce-home-work__dot--ready {
  background: var(--colour-caution);
}
.ce-home-work__empty {
  padding: var(--space-6) 1.125rem;
}
.ce-home-work footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 1.125rem;
  background: color-mix(in srgb, var(--colour-raised) 72%, var(--colour-bg));
}

@media (min-width: 1100px) {
  body.app-layout--channel-browser {
    --studio-rail-width: 15.375rem;
    --app-sticky-header-height: 0rem;
  }
  body.app-layout--channel-browser .app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding: 0 var(--space-8) var(--space-8)
      calc(var(--studio-rail-width) + var(--space-8));
  }
  body.app-layout--channel-browser .app-main {
    flex: 1 0 auto;
  }
  body.app-layout--channel-browser .ce-environment {
    margin-top: auto;
    padding-top: var(--space-8);
  }
  body.app-layout--channel-browser .app-header {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--studio-rail-width);
    min-height: 100dvh;
    padding: 1.375rem 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    border: 0;
    border-right: 1px solid var(--colour-border);
    background: color-mix(in srgb, var(--colour-bg) 92%, var(--colour-surface));
    overflow-y: auto;
  }
  body.app-layout--channel-browser .app-mark {
    gap: var(--space-2);
    min-height: 2.125rem;
    margin: 0 0 var(--space-5);
    padding-inline: var(--space-2);
  }
  body.app-layout--channel-browser .app-mark > span:not(.app-brand) {
    width: 2.125rem;
    height: 2.125rem;
  }
  body.app-layout--channel-browser .app-brand {
    display: block;
    font: 600 var(--font-size-16) / 1.2 var(--font-display);
    letter-spacing: var(--tracking-tight);
  }
  body.app-layout--channel-browser .app-brand small {
    display: none;
  }
  body.app-layout--channel-browser .app-header__action {
    order: 1;
    width: 100%;
  }
  body.app-layout--channel-browser .ce-channel-switcher {
    display: grid;
    max-height: calc(5 * 3.25rem + 4 * var(--space-2));
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
  }
  body.app-layout--channel-browser .ce-channel-switcher a {
    width: 100%;
    min-width: 0;
  }
  body.app-layout--channel-browser .top-nav {
    order: 2;
    width: 100%;
    margin-top: var(--space-6);
    overflow: visible;
  }
  body.app-layout--channel-browser .top-nav ul {
    display: grid;
    gap: var(--space-1);
    width: 100%;
    padding: 0;
  }
  body.app-layout--channel-browser .top-nav a {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    justify-content: flex-start;
    padding-inline: var(--space-3);
    gap: var(--space-3);
  }
  body.app-layout--channel-browser .top-nav a .ui-icon {
    opacity: 0.8;
  }
  body.app-layout--channel-browser .top-nav a[aria-current="page"] .ui-icon {
    opacity: 1;
  }
  body.app-layout--channel-browser .top-nav a[aria-current="page"] {
    background: var(--colour-raised-2);
    color: var(--colour-text);
    box-shadow: inset 0 0 0 1px var(--colour-border);
  }
  body.app-layout--channel-browser .app-main {
    width: 100%;
    max-width: 93rem;
    margin-inline: auto;
    padding-top: 1.625rem;
  }
}

@media (max-width: 68.75rem) {
  body.app-layout--channel-browser .app-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  body.app-layout--channel-browser .app-header__action {
    grid-column: 1 / -1;
  }
  .ce-channels-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 42.5rem) {
  .ce-roster--home .ce-channel-choice {
    grid-template-columns: 2.75rem 2.5rem minmax(0, 1fr);
  }
  .ce-roster--home .ce-channel-choice__arrow {
    display: none;
  }
  .ce-channel-choice__latest {
    width: 2.5rem;
    height: 3rem;
  }
}

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/gateway/assets/fonts/anton-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Bungee";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/gateway/assets/fonts/bungee-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/gateway/assets/fonts/barlow-condensed-semibold.ttf") format("truetype");
}

:root {
  --colour-tone-mega-a: #c026d3;
  --colour-tone-mega-b: #7c3aed;
  --colour-tone-mega-c: #4f46e5;
  --colour-tone-mega-ink: #ffffff;
  --colour-tone-mega-glow: rgb(124 58 237 / 45%);
  --colour-card-inset: rgb(255 255 255 / 5%);
  --colour-card-shade: rgb(0 0 0 / 72%);
  --colour-glass-border: rgb(255 255 255 / 14%);
  --colour-glass: rgb(8 10 14 / 62%);
  --colour-glass-shadow: rgb(0 0 0 / 35%);
  --colour-glass-strong: rgb(8 10 14 / 70%);
  --colour-tone-hot-glow: rgb(255 214 10 / 40%);
  --colour-glass-bar: rgb(8 10 14 / 78%);
  --colour-tone-cold: #ff6b6b;
  --colour-tone-cold-ink: #1a0b0b;
  --colour-tone-cool: #ffb35c;
  --colour-tone-cool-ink: #1d1305;
  --colour-tone-warm: #54d98c;
  --colour-tone-warm-ink: #04150c;
  --colour-tone-blue: #7fb6ff;
  --colour-tone-blue-ink: #04101f;
  --colour-tone-hot: #ffd60a;
  --colour-tone-hot-ink: #000000;
  color-scheme: dark;
  --font-sans:
    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-display: "Sora", var(--font-sans);
  --text-display: 2.5rem;
  --text-h1: 1.75rem;
  --text-h2: 1.125rem;
  --text-h3: 0.875rem;
  --text-body: 0.875rem;
  --text-meta: 0.75rem;
  --text-micro: 0.6875rem;
  --tracking-display: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.06em;
  --font-ranking-impact: "Anton", sans-serif;
  --font-ranking-arcade: "Bungee", sans-serif;
  --font-size-12: 0.75rem;
  --font-size-11: 0.6875rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-40: 2.5rem;
  --font-size-48: 3rem;
  --font-size-56: 3.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-small: 0.375rem;
  --radius-control: 0.5rem;
  --radius-card: 0.75rem;
  --radius-panel: 0.75rem;
  --radius-feature: 0.75rem;
  --radius-media: 1rem;
  --radius-pill: 999px;
  /* Surface ladder: ground, raised, panel, floating. Borders are light, not lines. */
  --colour-bg: #0e0f12;
  --colour-raised: #15171b;
  --colour-raised-2: #1c1f25;
  --colour-surface: #15171b;
  --colour-surface-2: #1b1e24;
  --colour-surface-3: #23272e;
  --colour-border: rgb(255 255 255 / 8%);
  --colour-control-border: #6c7380;
  --colour-border-strong: rgb(255 255 255 / 14%);
  --colour-text: #f4f5f7;
  --colour-muted: #a3a8b3;
  --colour-focus: #67a4df;
  --colour-action: #b92332;
  --colour-action-hover: #c92d3d;
  --colour-action-wash: #b923321f;
  --colour-action-ink: #ffffff;
  --colour-action-text: #ffffff;
  --colour-editor-action: #b92332;
  --colour-editor-action-hover: #c42e3c;
  --colour-editor-action-border: #d44a57;
  --colour-selection: #67a4df;
  --colour-selection-border: #67a4df;
  --colour-selection-wash: #67a4df24;
  --colour-positive: #63d7b0;
  --colour-positive-bg: #11392f;
  --colour-caution: #e7bd72;
  --colour-caution-bg: #372c17;
  --colour-bookmark: #e2b84b;
  --colour-bookmark-bg: #33270c;
  --colour-danger: #ed6b86;
  --colour-danger-bg: #421c29;
  --colour-info: #73afe8;
  --colour-info-bg: #17283a;
  --colour-raised-accent: #1c1f25;
  --colour-media: #020305;
  --colour-overlay: #010205d9;
  --colour-soft-border: rgb(255 255 255 / 10%);
  --colour-shadow: #000000b3;
  --colour-horizon-cobalt: #4091f3;
  --colour-horizon-violet: #8c68e8;
  --colour-horizon-rose: #c94361;
  --colour-horizon-magenta: #b9558c;
  /* Effect families: one hue each, equal lightness and chroma (OKLCH 0.78 /
     0.12), so they read as one set. They mark which family an effect belongs
     to, on its glyph and label dot only; never an action (red) or a selection
     (blue). Blur has no hue: the one free slot, a slate blue at 245 degrees,
     sits 4 degrees from the selection blue (--colour-selection, 249). */
  --colour-fx-zoom: #3aced6;
  --colour-fx-impact: #e4ac59;
  --colour-fx-time: #c3a5f9;
  --colour-fx-subject: #7ccd8e;
  --colour-overlay-card: #020204;
  --colour-overlay-text: #ffffff;
  --colour-overlay-red: #ff4650;
  --colour-overlay-yellow: #ffd60a;
  --colour-overlay-green: #54d98c;
  --colour-overlay-blue: #55a7ff;
  --colour-ranking-shade-top: #03060c1a;
  --colour-ranking-shade-bottom: #03060cd9;
  --colour-ranking-badge: #03060cb8;
  --colour-canvas: #070a0f;
  --colour-discover-media: #020304;
  --colour-discover-ignore: #df999f;
  --colour-discover-icon-shade: rgb(5 7 10 / 45%);
  --colour-discover-icon-hover: rgb(5 7 10 / 65%);
  --colour-discover-reach-bg: #925900;
  --colour-discover-reach: #fff1c9;
  --colour-discover-play-hover: #19477e;
  --colour-discover-below-bg: #431f25;
  --colour-discover-below: #ffacb6;
  --colour-discover-notable-bg: #3d3019;
  --colour-discover-notable: #ffd384;
  --colour-discover-strong-bg: #163a2c;
  --colour-discover-strong: #83e3b1;
  --colour-discover-exceptional-bg: #192e4f;
  --colour-discover-exceptional: #9bc3ff;
  --colour-discover-breakout-bg: #34244d;
  --colour-discover-breakout: #d9b9ff;
  --colour-discover-play-shade: rgb(5 7 10 / 88%);
  --colour-discover-duration-shade: rgb(5 7 10 / 92%);
  --colour-ground: #030509;
  --focus-ring: 0 0 0 2px var(--colour-bg), 0 0 0 5px var(--colour-focus);
  --colour-highlight: rgb(255 255 255 / 14%);
  --colour-highlight-strong: rgb(255 255 255 / 18%);
  --shadow-mark: 0 0.25rem 0.75rem -0.25rem rgb(185 35 50 / 50%);
  --shadow-raised:
    0 0.5rem 1.5rem -0.5rem rgb(0 0 0 / 60%), 0 0 0 1px rgb(255 255 255 / 4%);
  --shadow-panel:
    0 1.25rem 3.5rem -1rem rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 6%);
  --font-body: var(--font-sans);
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --app-sticky-header-height: 4.25rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--colour-bg);
  color: var(--colour-text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--colour-bg);
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

a {
  color: var(--colour-info);
  text-underline-offset: 0.2em;
}

::selection {
  background: var(--colour-action);
  color: var(--colour-action-text);
}

/* Choice menus belong to the system too: where the browser lets a select be
   styled, its picker is a dark rounded panel with the shared focus ring. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]):not([size])::picker(select) {
    width: anchor-size(width);
    min-width: anchor-size(width);
    margin-top: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius-control);
    background: var(--colour-surface-3);
    color: var(--colour-text);
    box-shadow: var(--shadow-panel);
  }
  select:not([multiple]):not([size])::picker-icon {
    color: var(--colour-muted);
  }
  select:not([multiple]):not([size]) option {
    padding: var(--space-2) var(--space-3);
    border-radius: calc(var(--radius-control) - var(--space-1));
    color: var(--colour-muted);
    font-weight: 500;
  }
  select:not([multiple]):not([size]) option:is(:hover, :focus-visible) {
    background: var(--colour-raised-2);
    outline: 0;
  }
  select:not([multiple]):not([size]) option:checked {
    color: var(--colour-text);
    font-weight: 600;
  }
  select:not([multiple]):not([size]) option::checkmark {
    color: var(--colour-focus);
  }
}

* {
  scrollbar-color: var(--colour-control-border) var(--colour-bg);
  scrollbar-width: thin;
}

input,
textarea {
  caret-color: var(--colour-action);
}

::placeholder {
  color: var(--colour-muted);
  opacity: 1;
}

:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset: var(--space-3) auto auto var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--colour-editor-action);
  color: var(--colour-action-ink);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  width: min(100%, 112rem);
  margin-inline: auto;
  padding: 0 var(--space-8) var(--space-10);
}

.app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.25rem;
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-bg);
}

.app-mark {
  display: inline-flex;
  gap: var(--space-2);
  width: auto;
  height: 2.5rem;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-display);
  font-size: var(--font-size-18);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.app-mark > span:not(.app-brand) {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-control);
  background: var(--colour-action);
  color: var(--colour-action-ink);
  font-family: var(--font-display);
  font-size: var(--font-size-14);
  font-weight: 700;
  letter-spacing: -0.04em;
  box-shadow:
    inset 0 1px 0 var(--colour-highlight-strong),
    var(--shadow-mark);
}

.ui-icon {
  flex: 0 0 auto;
  vertical-align: middle;
}

.top-nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.top-nav ul {
  display: flex;
  gap: var(--space-1);
  width: max-content;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
}

.top-nav a {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  color: var(--colour-muted);
  font-size: var(--font-size-14);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.top-nav a:hover {
  background: color-mix(in srgb, var(--colour-raised-2) 60%, transparent);
  color: var(--colour-text);
}

.top-nav a[aria-current="page"] {
  background: var(--colour-raised-2);
  color: var(--colour-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--colour-border);
}

.top-nav a:focus-visible,
.ce-channel-switcher a:focus-visible {
  box-shadow: var(--focus-ring);
}

.top-nav__count {
  display: inline-grid;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-left: var(--space-2);
  place-items: center;
  padding-inline: var(--space-1);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
}

.app-header__action:empty {
  display: none;
}

.status-strip {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-2);
  overflow-x: auto;
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.status-strip__item {
  display: inline-flex;
  gap: var(--space-1);
  white-space: nowrap;
}

.status-strip__item strong {
  color: var(--colour-text);
}

.status-strip__item--positive strong {
  color: var(--colour-positive);
}

.status-strip__item--caution strong {
  color: var(--colour-caution);
}

.app-main {
  padding-block: var(--space-6);
}

.page-header {
  max-width: 54rem;
  margin-bottom: var(--space-6);
}

h2 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

.page-header h1 {
  margin: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  text-wrap: balance;
}

.page-header__description {
  max-width: 46rem;
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
}

.ui-stack {
  display: grid;
  gap: var(--space-4);
}

.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-4);
}

.ui-section {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-top: 1px solid var(--colour-border);
}

.ui-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.ui-section h2 {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-24);
}

.eyebrow {
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.button,
.icon-button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--colour-raised-2);
  color: var(--colour-text);
  text-decoration: none;
  white-space: nowrap;
}

.button:hover:not([disabled]):not([aria-busy="true"]) {
  border-color: var(--colour-control-border);
  background: var(--colour-surface-3);
}

.button--primary {
  border-color: var(--colour-action);
  background: var(--colour-action);
  color: var(--colour-action-text);
  box-shadow: inset 0 1px 0 var(--colour-highlight);
}

.button--primary:focus-visible {
  box-shadow:
    var(--focus-ring),
    inset 0 1px 0 var(--colour-highlight);
}

.button--primary:hover:not([disabled]):not([aria-busy="true"]) {
  border-color: var(--colour-action-hover);
  background: var(--colour-action-hover);
}

.button--secondary {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}

.button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--colour-text);
}

.button--ghost:hover:not([disabled]):not([aria-busy="true"]) {
  border-color: transparent;
  background: var(--colour-raised-2);
}

.button--danger {
  border-color: var(--colour-danger);
  background: var(--colour-danger-bg);
  color: var(--colour-danger);
}

.button[disabled],
.button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.66;
}

.action-group,
.card__actions,
.drawer__actions,
.state-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.card {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-surface);
}

.card--compact {
  grid-template-columns: minmax(12rem, 2fr) minmax(12rem, 3fr) auto;
  align-items: center;
  padding: var(--space-3);
}

.card--detailed {
  padding: var(--space-6);
}

.card__header h2,
.card__header h3,
.state-panel h2,
.drawer h2 {
  margin: 0;
  font-size: var(--font-size-20);
  line-height: 1.2;
}

.card__header--with-bookmark {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-items: start;
}

.card__header--with-bookmark > :not(.opportunity-card__bookmark) {
  grid-column: 1;
}

.card__body,
.card__body p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card__workflow {
  display: flex;
  align-items: center;
}

.card--detailed .card__actions {
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.status-badge {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid currentcolor;
  border-radius: var(--radius-pill);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
}

.status-badge__mark {
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid currentcolor;
  border-radius: 50%;
}

.status-badge--positive {
  color: var(--colour-positive);
}

.status-badge--caution {
  color: var(--colour-caution);
}

.status-badge--danger {
  color: var(--colour-danger);
}

.status-badge--info {
  color: var(--colour-info);
}

.status-badge--explained {
  position: relative;
  cursor: help;
  text-decoration: underline dotted
    color-mix(in srgb, currentcolor 55%, transparent);
  text-underline-offset: 0.2em;
}

.status-badge--explained::after {
  position: absolute;
  z-index: 20;
  inset: auto auto calc(100% + var(--space-2)) 0;
  width: min(14rem, calc(100vw - var(--space-8)));
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  box-shadow: var(--shadow-raised);
  color: var(--colour-text);
  content: attr(data-tooltip);
  font-size: var(--font-size-12);
  font-weight: 600;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  text-decoration: none;
  transform: translateY(var(--space-1));
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) ease;
  white-space: normal;
}

.status-badge--explained:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.scanner-card .card__workflow .status-badge--explained:last-child::after {
  right: 0;
  left: auto;
}

.metric-chip {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0 var(--space-2);
  align-items: baseline;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.metric-chip__label,
.metric-chip__comparison {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.metric-chip__comparison {
  grid-column: 1 / -1;
}

.metric-chip strong {
  font-variant-numeric: tabular-nums;
}

.metric-chip--positive strong {
  color: var(--colour-positive);
}

.metric-chip--caution strong {
  color: var(--colour-caution);
}

.metric-chip--danger strong {
  color: var(--colour-danger);
}

.metric-chip--info strong {
  color: var(--colour-info);
}

.form-field {
  display: grid;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--font-size-14);
  font-weight: 700;
}

.form-field input {
  width: 100%;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.form-field select {
  width: 100%;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.muted,
.competitor-last-posted {
  color: var(--colour-muted);
}

.filter-bar {
  display: grid;
  grid-template-columns:
    minmax(12rem, 2fr) repeat(3, minmax(9rem, 1fr))
    auto auto;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
}

.filter-bar__count {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
}

.action-status {
  flex-basis: 100%;
  min-height: 1.25rem;
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.action-status:empty {
  display: none;
}

.preview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-6);
}

.preview-summary span {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
  color: var(--colour-muted);
}

.preview-summary strong {
  color: var(--colour-text);
  font-size: var(--font-size-24);
  font-variant-numeric: tabular-nums;
}

.panel-form,
.intake-panel,
.sync-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
}

.panel-form {
  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 2fr) auto;
  align-items: end;
}

.intake-panel,
.sync-panel {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr);
  align-items: center;
}

.intake-panel h2,
.sync-panel h2,
.group-card h3,
.competitor-name,
.find-repair-card h3,
.find-ready-row h3 {
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: 700;
}

.intake-panel--batch {
  align-items: stretch;
  background:
    linear-gradient(
        90deg,
        var(--colour-horizon-cobalt),
        var(--colour-horizon-violet),
        var(--colour-horizon-rose)
      )
      top / 100% 2px no-repeat,
    var(--colour-raised);
}

.intake-panel__intro {
  display: grid;
  max-width: 42rem;
  align-content: start;
  gap: var(--space-2);
}

.batch-intake__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  list-style: none;
}

.batch-intake__assurances li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.batch-intake__assurances li::before {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--colour-positive);
  content: "";
}

.intake-panel--batch form {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--space-3);
}

.batch-intake__label-row,
.batch-intake__actions,
.batch-intake__progress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.batch-intake__label-row > span,
.batch-intake__actions > span {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.batch-intake__field textarea {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  line-height: 1.45;
}

.batch-intake__field textarea::placeholder {
  color: color-mix(in srgb, var(--colour-muted) 82%, transparent);
}

.batch-intake__actions .button {
  min-width: 12rem;
}

.intake-panel--batch form[data-processing="true"] .batch-intake__field,
.intake-panel--batch form[data-processing="true"] .batch-intake__actions {
  opacity: 0.62;
}

.intake-panel--batch form[data-processing="true"] textarea {
  cursor: progress;
}

.batch-intake__progress {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid
    color-mix(in srgb, var(--colour-horizon-cobalt) 28%, var(--colour-border));
  border-radius: var(--radius-card);
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--colour-horizon-violet) 12%, transparent),
      transparent 46%
    ),
    color-mix(in srgb, var(--colour-raised-2) 86%, transparent);
}

.batch-intake__progress[hidden] {
  display: none;
}

.batch-intake__progress-head {
  flex-wrap: nowrap;
  align-items: start;
}

.batch-intake__progress-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.batch-intake__progress-copy > span {
  color: var(--colour-info);
  font-size: var(--font-size-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.batch-intake__progress-copy > strong {
  font-size: var(--font-size-16);
  line-height: 1.25;
}

.batch-intake__progress-copy > small {
  overflow: hidden;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-intake__progress-percent {
  flex: 0 0 auto;
  color: var(--colour-text);
  font-size: var(--font-size-24);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.batch-intake__track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--colour-raised-2);
  box-shadow: inset 0 0 0 1px var(--colour-border);
}

.batch-intake__track i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--colour-horizon-cobalt),
    var(--colour-horizon-violet),
    var(--colour-horizon-rose)
  );
  border-radius: inherit;
  box-shadow: 0 0 var(--space-3)
    color-mix(in srgb, var(--colour-horizon-violet) 44%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-standard) cubic-bezier(0.16, 1, 0.3, 1);
}

.batch-intake__progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.batch-intake__progress-stats > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.batch-intake__progress-stats dt {
  overflow: hidden;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-intake__progress-stats dd {
  margin: 0;
  color: var(--colour-text);
  font-size: var(--font-size-16);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.batch-intake__progress-stats > div:nth-child(2) dd {
  color: var(--colour-positive);
}

.batch-intake__progress-stats > div:nth-child(3) dd,
.batch-intake__progress-stats > div:nth-child(4) dd {
  color: var(--colour-caution);
}

.intake-panel p,
.sync-panel p,
.group-card p,
.competitor-row p,
.find-repair-card p,
.find-ready-row p {
  margin: var(--space-1) 0 0;
}

.group-grid,
.find-repair-list,
.find-ready-list {
  display: grid;
  gap: var(--space-3);
}

.group-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.group-card,
.find-ready-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised-2);
}

.group-edit {
  min-width: min(100%, 18rem);
}

.group-edit summary {
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 700;
}

.group-edit form {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-block: var(--space-3);
}

.archived-groups summary {
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 700;
}

.archived-groups li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.avatar-image,
.avatar-fallback {
  display: grid;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--colour-raised-2);
  color: var(--colour-info);
  font-weight: 900;
  object-fit: cover;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.check-row {
  display: flex;
  min-height: 2.75rem;
  gap: var(--space-2);
  align-items: center;
}

.check-row input {
  width: 1.25rem;
  height: 1.25rem;
}

.competitor-group-grid,
.competitor-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-4);
}

.competitor-group-grid {
  align-items: start;
}

.competitor-group-card,
.competitor-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
}

.competitor-group-card {
  display: flex;
  flex-direction: column;
}

.competitor-card__media {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(
      circle at 30% 20%,
      var(--colour-selection-wash),
      transparent 50%
    ),
    linear-gradient(145deg, var(--colour-raised-accent), var(--colour-media));
}

.competitor-group-card h3,
.competitor-card h3 {
  margin: 0;
  font-size: var(--font-size-20);
  line-height: 1.2;
}

.competitor-card__header p,
.competitor-card__notice {
  margin: var(--space-1) 0 0;
  color: var(--colour-muted);
}

.competitor-create-group {
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
}

.competitor-create-group > summary,
.group-drawer-settings > summary {
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 700;
}

.competitor-create-group .panel-form {
  margin-top: var(--space-3);
}

.competitor-card-tools {
  display: grid;
  grid-template-columns: minmax(12rem, 24rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.competitor-card-tools label {
  grid-column: 1;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-transform: uppercase;
}

.competitor-card-tools input {
  grid-column: 1;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.competitor-card-tools p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--colour-muted);
}

.competitor-card {
  display: flex;
  flex-direction: column;
}

.competitor-card__media {
  min-height: 9rem;
  border-bottom: 1px solid var(--colour-border);
}

.group-avatar-grid {
  display: grid;
  width: 7rem;
  height: 7rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--colour-soft-border);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--colour-raised) 88%, transparent);
  box-shadow: 0 var(--space-2) var(--space-4) var(--colour-shadow);
}

.group-avatar {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--colour-soft-border);
  border-radius: 35%;
  background: var(--colour-raised-2);
  color: var(--colour-text);
  font-size: var(--font-size-12);
  font-weight: 900;
  object-fit: cover;
}

.group-avatar--empty {
  background:
    radial-gradient(circle, var(--colour-soft-border) 0 18%, transparent 20%)
      center / 1.25rem 1.25rem,
    var(--colour-raised-2);
}

.competitor-group-card__count {
  position: absolute;
  inset: var(--space-2) var(--space-2) auto auto;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--colour-soft-border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--colour-bg) 82%, transparent);
  color: var(--colour-info);
  font-size: var(--font-size-12);
  font-weight: 700;
}

.competitor-card__avatar {
  width: 5.5rem;
  height: 5.5rem;
  border: 3px solid var(--colour-soft-border);
  border-radius: 50%;
  background: var(--colour-raised-2);
  color: var(--colour-text);
  font-size: var(--font-size-24);
  font-weight: 900;
  object-fit: cover;
}

.competitor-card__avatar--fallback {
  display: grid;
  place-items: center;
}

.competitor-card__health {
  position: absolute;
  inset: var(--space-2) var(--space-2) auto auto;
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--colour-bg) 82%, transparent);
}

.competitor-card__header,
.competitor-card__metrics,
.competitor-card__notice,
.competitor-card__groups,
.group-members-trigger,
.competitor-card > .membership-empty {
  margin-inline: var(--space-4);
}

.competitor-card__header {
  padding-top: var(--space-4);
}

.competitor-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding-block: var(--space-3);
}

.competitor-card__metrics .metric-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: var(--space-2);
}

.competitor-card__metrics .metric-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-card__metrics .metric-chip__label {
  min-height: 2.4em;
  line-height: 1.2;
}

.competitor-object-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-4);
}

.competitor-object-actions .button {
  min-width: 0;
  padding-inline: var(--space-2);
  text-align: center;
}

.competitor-object-actions > .button:first-child {
  grid-column: 1 / -1;
}

.competitor-card__groups,
.group-members-trigger {
  margin-bottom: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.group-popover-trigger,
.group-members-trigger {
  display: flex;
  width: calc(100% - var(--space-8));
  min-height: 2.875rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-text);
  font-weight: 700;
  text-align: left;
}

.group-popover-trigger {
  width: 100%;
}

.group-popover-trigger:hover,
.group-members-trigger:hover {
  border-color: var(--colour-info);
  background: var(--colour-selection-wash);
}

.group-popover-trigger > span {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.group-popover-trigger > strong,
.group-members-trigger > strong {
  display: grid;
  min-width: 1.75rem;
  min-height: 1.75rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--colour-raised-2);
  color: var(--colour-info);
  font-size: var(--font-size-12);
}

.group-popover {
  position: fixed;
  z-index: 30;
  inset: auto;
  visibility: hidden;
  max-height: min(28rem, calc(100dvh - var(--space-6)));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
  color: var(--colour-text);
  box-shadow: 0 1rem 3rem var(--colour-shadow);
}

.group-popover[data-positioned="true"] {
  visibility: visible;
  animation: group-popover-in 120ms ease-out;
}

.group-popover::backdrop {
  background: transparent;
}

.group-popover > header {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}

.group-popover h4,
.group-popover p {
  margin: 0;
}

.group-popover h4 {
  margin-top: var(--space-1);
  font-size: var(--font-size-16);
}

.group-popover > footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--colour-border);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.group-popover__search,
.group-members-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-2);
}

.group-popover__search {
  padding: var(--space-3) var(--space-4) 0;
}

.group-popover__search label,
.group-members-search label {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-transform: uppercase;
}

.group-popover__search input,
.group-members-search input {
  grid-column: 1 / -1;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.group-popover__search p,
.group-members-search p {
  grid-column: 2;
  grid-row: 1;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.group-quick-list,
.group-member-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.group-popover > .group-quick-list {
  max-height: 18rem;
  padding: var(--space-3) var(--space-4);
  overflow-y: auto;
}

.group-quick-row,
.group-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-height: 3.25rem;
  padding: var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.group-quick-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.group-quick-row--included {
  border-color: color-mix(
    in srgb,
    var(--colour-positive) 55%,
    var(--colour-border)
  );
  background: color-mix(
    in srgb,
    var(--colour-positive) 8%,
    var(--colour-raised-2)
  );
}

.group-quick-row__mark {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--colour-raised);
  color: var(--colour-info);
  font-weight: 900;
}

.group-quick-row--included .group-quick-row__mark {
  background: var(--colour-positive);
  color: var(--colour-bg);
}

.group-quick-row span,
.group-member-row > span {
  min-width: 0;
}

.group-quick-row strong,
.group-member-row strong,
.group-quick-row small,
.group-member-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-quick-row small,
.group-member-row small {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.group-quick-row .button,
.group-member-row .button {
  min-width: 5rem;
}

.group-member-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.group-member-avatar {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--colour-soft-border);
  border-radius: 50%;
  background: var(--colour-raised);
  color: var(--colour-text);
  font-size: var(--font-size-12);
  font-weight: 900;
  object-fit: cover;
}

.group-quick-row .action-status,
.group-member-row .action-status {
  grid-column: 1 / -1;
}

.group-quick-row[hidden],
.group-member-row[hidden] {
  display: none;
}

.drawer.group-members-drawer {
  inset: 0;
  width: min(40rem, calc(100% - var(--space-8)));
  height: min(44rem, calc(100% - var(--space-8)));
  max-height: calc(100% - var(--space-8));
  margin: auto;
}

.drawer__surface.group-members-drawer__surface {
  overflow: hidden;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-panel);
  box-shadow: -1rem 0 3rem var(--colour-shadow);
}

.group-members-drawer__header {
  align-items: flex-start;
}

.group-members-drawer__identity {
  display: flex;
  min-width: 0;
  gap: var(--space-3);
  align-items: center;
}

.group-members-drawer__identity h2,
.group-members-drawer__identity p {
  margin: 0;
}

.group-members-drawer__identity h2 {
  margin-top: var(--space-1);
  overflow: hidden;
  font-size: var(--font-size-20);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-members-drawer__identity h2 + p {
  margin-top: var(--space-1);
  color: var(--colour-muted);
}

.group-avatar-grid--small {
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-media);
  box-shadow: none;
}

.group-members-search {
  position: sticky;
  z-index: 2;
  top: calc(var(--space-6) * -1);
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised) 96%, transparent);
  backdrop-filter: blur(0.75rem);
}

.group-member-list {
  gap: var(--space-3);
}

.group-drawer-settings {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-border);
}

.group-drawer-settings > summary {
  display: flex;
  align-items: center;
}

.group-drawer-settings > form,
.group-drawer-settings > section {
  margin-top: var(--space-4);
}

.group-members-drawer .drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.group-members-drawer .drawer__actions .button {
  flex: 1 1 12rem;
}

.group-option-search-empty,
.group-member-search-empty {
  margin: var(--space-3) var(--space-4);
}

.group-member-search-empty {
  margin: var(--space-4) 0;
}

.competitor-search-empty {
  grid-column: 1 / -1;
}

.sync-panel {
  margin-top: var(--space-8);
  border-color: var(--colour-control-border);
}

.find-repair-card {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
}

.find-repair-card__media {
  display: grid;
  min-height: 12rem;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-info);
  font-size: var(--font-size-32);
  font-weight: 900;
}

.find-repair-card__media video {
  width: 100%;
  height: 100%;
  max-height: 18rem;
  object-fit: cover;
}

.find-repair-card__copy {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.file-button {
  position: relative;
  overflow: hidden;
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-field__hint,
.form-field__error {
  margin: 0;
  font-size: var(--font-size-12);
}

.form-field__hint {
  color: var(--colour-muted);
}

.form-field__error {
  color: var(--colour-danger);
}

.form-field--error input {
  border-color: var(--colour-danger);
}

.inline-notice,
.state-panel {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
}

.inline-notice {
  padding: var(--space-4);
  color: var(--colour-info);
}

.inline-notice p {
  margin: var(--space-1) 0 0;
  color: var(--colour-text);
}

.inline-notice--positive {
  color: var(--colour-positive);
}

.inline-notice--caution {
  color: var(--colour-caution);
}

.inline-notice--danger {
  color: var(--colour-danger);
}

.state-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6);
  color: var(--colour-muted);
}

.state-panel__symbol {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: var(--space-2);
  border: 2px solid currentcolor;
  border-radius: 50%;
}

.state-panel p {
  margin: var(--space-2) 0;
}

.state-panel--stale,
.state-panel--partial,
.state-panel--unavailable {
  color: var(--colour-caution);
}

.state-panel--recoverable-error,
.state-panel--fatal-error {
  color: var(--colour-danger);
}

.state-panel--loading .state-panel__symbol {
  border-right-color: transparent;
  animation: ui-spin 800ms linear infinite;
}

.state-panel__progress {
  color: var(--colour-text);
  font-variant-numeric: tabular-nums;
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(36rem, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colour-text);
}

.drawer::backdrop {
  background: var(--colour-overlay);
}

.drawer__surface {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  border-left: 1px solid var(--colour-control-border);
  background: var(--colour-raised);
}

.drawer__header,
.drawer__actions {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.drawer__actions {
  border-top: 1px solid var(--colour-border);
  border-bottom: 0;
}

.drawer__body {
  overflow-y: auto;
  padding: var(--space-6);
}

.icon-button {
  background: transparent;
  color: var(--colour-text);
  font-size: var(--font-size-24);
}

.skeleton {
  display: grid;
  gap: var(--space-2);
  min-height: 5rem;
}

.skeleton > span[aria-hidden="true"] {
  display: block;
  border-radius: var(--radius-control);
  background: linear-gradient(
    90deg,
    var(--colour-raised-2),
    var(--colour-border),
    var(--colour-raised-2)
  );
  background-size: 200% 100%;
  animation: ui-shimmer 1.5s linear infinite;
}

@keyframes ui-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes ui-shimmer {
  to {
    background-position: -200% 0;
  }
}

@keyframes group-popover-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 47.5rem) {
  .app-shell {
    padding-inline: var(--space-4);
  }

  .app-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .app-header__action {
    grid-column: 1 / -1;
    padding-bottom: var(--space-3);
  }

  .card--compact {
    grid-template-columns: 1fr;
  }

  .action-group,
  .card__actions,
  .drawer__actions,
  .state-panel__actions {
    align-items: stretch;
  }

  .action-group .button,
  .card__actions .button,
  .drawer__actions .button,
  .state-panel__actions .button {
    flex: 1 1 12rem;
  }

  .filter-bar,
  .panel-form,
  .intake-panel,
  .sync-panel,
  .find-repair-card {
    grid-template-columns: 1fr;
  }

  .preview-summary {
    grid-template-columns: 1fr;
  }

  .group-card,
  .find-ready-row,
  .archived-groups li {
    align-items: stretch;
    flex-direction: column;
  }

  .competitor-card-tools {
    grid-template-columns: 1fr;
  }

  .competitor-card-tools label,
  .competitor-card-tools input,
  .competitor-card-tools p {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 40rem) {
  .top-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .top-nav ul {
    display: flex;
    width: max-content;
    padding-inline: 0;
  }

  .top-nav a {
    white-space: nowrap;
  }
}

@media (max-width: 30rem) {
  .app-shell {
    padding-inline: var(--space-3);
  }

  .app-mark {
    display: none;
  }

  .app-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .drawer {
    width: 100%;
  }

  .group-members-drawer {
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
  }

  .group-members-drawer__surface {
    border-radius: 0;
  }
}

/* Gated Scan v2: density, facets, retained detail and momentum. */
body:has([data-scanner-root]) .app-main {
  padding-top: var(--space-6);
}

body:has([data-scanner-root]) .page-header {
  max-width: none;
  margin-bottom: var(--space-4);
}

body:has([data-scanner-root]) .page-header h1 {
  margin: 0 0 var(--space-2);
}

body:has([data-scanner-root]) .page-header__description {
  max-width: 72ch;
  margin: 0;
}

.discover-data-note {
  display: flex;
  min-height: 1.5rem;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.discover-data-note > span {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--colour-positive);
}

.discover-data-note p {
  margin: 0;
}

.discover-data-note--stale > span {
  background: var(--colour-caution);
}

.discover-data-note--unavailable > span {
  background: var(--colour-muted);
}

.discover-data-note__warning {
  color: var(--colour-caution);
}

.discover-data-note__warning::before {
  content: "·";
  margin-right: var(--space-2);
}

.discover-controls {
  position: sticky;
  top: var(--app-sticky-header-height);
  z-index: 18;
  display: grid;
  gap: 0;
  margin-bottom: var(--space-8);
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-surface);
  box-shadow: 0 1rem 3rem -2.25rem var(--colour-shadow);
  isolation: isolate;
}

.discover-controls::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--colour-horizon-cobalt),
    var(--colour-horizon-violet) 52%,
    var(--colour-horizon-rose)
  );
  content: "";
  pointer-events: none;
}

.discover-controls__top {
  display: grid;
  grid-template-columns: auto minmax(16rem, 1fr) minmax(12rem, 16rem) auto;
  gap: 0;
  align-items: stretch;
  min-height: 4.5rem;
}

.discover-controls__status {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised) 76%, transparent);
}

.density-switch,
.active-filters,
.lane-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.scanner-toolbar {
  display: contents;
}

.discover-controls__top .scanner-toolbar > .button {
  grid-column: 4;
  grid-row: 1;
}

.scanner-queues {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  gap: 0;
  border-right: 1px solid var(--colour-border);
}

.scanner-queue-tab {
  position: relative;
  display: inline-flex;
  min-height: 100%;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-right: 1px solid var(--colour-border);
  border-radius: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.scanner-queue-tab:hover {
  color: var(--colour-text);
}

.scanner-queue-tab[aria-current="true"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--colour-horizon-cobalt) 20%, transparent),
    transparent
  );
  color: var(--colour-action-text);
}

.scanner-queue-tab[aria-current="true"]::after {
  position: absolute;
  inset: auto var(--space-3) 0;
  height: 2px;
  background: var(--colour-horizon-cobalt);
  content: "";
}

.scanner-queue-tab[data-queue="bookmarked"][aria-current="true"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--colour-horizon-rose) 18%, transparent),
    transparent
  );
  color: var(--colour-text);
}

.scanner-queue-tab[data-queue="bookmarked"][aria-current="true"]::after {
  background: var(--colour-horizon-rose);
}

.scanner-queue-tab[data-queue="bookmarked"] strong {
  color: color-mix(in srgb, var(--colour-horizon-rose) 72%, var(--colour-text));
}

.scanner-queue-tab strong {
  min-width: 1.5rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-info);
  font-size: var(--font-size-12);
  text-align: center;
}

.density-switch {
  padding: var(--space-1);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised);
}

.density-switch button,
.lane-button {
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--colour-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.density-switch button {
  padding-inline: var(--space-3);
}

.density-switch button[aria-pressed="true"],
.lane-button[aria-pressed="true"] {
  border-color: var(--colour-selection-border);
  background: var(--colour-info-bg);
  color: var(--colour-text);
}

.scanner-query-form {
  display: contents;
}

.scanner-search {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.scanner-search > div {
  position: relative;
  display: grid;
  height: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border-right: 1px solid var(--colour-border);
}

.scanner-search svg,
.filter-option-search svg,
.scanner-filter-trigger svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.scanner-search svg {
  margin-left: var(--space-4);
  color: var(--colour-muted);
}

.scanner-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: var(--space-3);
  border: 0;
  background: transparent;
  color: var(--colour-text);
}

.scanner-search input:focus {
  outline: 0;
  box-shadow: none;
}

.scanner-search__submit {
  min-width: 4.5rem;
  height: calc(100% - var(--space-3));
  margin-right: var(--space-2);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-text);
  font-weight: 700;
  cursor: pointer;
}

.scanner-sort {
  display: block;
  grid-column: 3;
  grid-row: 1;
}

.scanner-sort select {
  width: 100%;
  height: 100%;
  padding-inline: var(--space-4);
  border: 0;
  border-right: 1px solid var(--colour-border);
  border-radius: 0;
  background: var(--colour-surface);
  color: var(--colour-text);
}

.scanner-filter-trigger {
  display: inline-flex;
  min-width: 8rem;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.scanner-filter-trigger strong {
  min-width: 1.5rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-control);
  background: var(--colour-horizon-rose);
  color: var(--colour-action-text);
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
}

.active-filters {
  flex-wrap: wrap;
  margin-top: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--colour-border);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-text);
  text-decoration: none;
}

.opportunity-drawer {
  width: min(100%, 34rem);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colour-text);
}

.filter-drawer::backdrop,
.opportunity-drawer::backdrop {
  background: var(--colour-overlay);
  backdrop-filter: blur(8px);
}

.filter-drawer__surface,
.opportunity-drawer__surface {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid var(--colour-control-border);
  background: var(--colour-bg);
  box-shadow: calc(-1 * var(--space-6)) 0 var(--space-16) var(--colour-shadow);
}

.filter-drawer__surface > header,
.filter-drawer__surface > footer,
.opportunity-drawer__header,
.opportunity-drawer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--colour-border);
}

.filter-drawer__surface > footer,
.opportunity-drawer__actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: auto;
  border-top: 1px solid var(--colour-border);
  border-bottom: 0;
}

.filter-drawer {
  width: min(calc(100% - var(--space-8)), 88rem);
  max-width: none;
  height: min(82dvh, 50rem);
  max-height: none;
  margin: calc(var(--space-16) + var(--space-4) + var(--space-1)) auto auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--colour-text);
}

.filter-drawer[open] {
  animation: cue-console-enter var(--motion-standard)
    cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cue-console-enter {
  from {
    filter: blur(5px);
    opacity: 0.82;
    transform: translateY(-0.75rem) scale(0.992);
  }

  to {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.filter-drawer__surface {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
  box-shadow: 0 2rem 6rem -1.5rem var(--colour-shadow);
}

.filter-drawer__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-surface);
}

.filter-drawer__header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.filter-drawer__header p {
  max-width: 60ch;
  margin: var(--space-1) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.filter-drawer__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: var(--space-2);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.filter-drawer__summary span {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
}

.filter-drawer__summary strong {
  color: var(--colour-text);
  font-variant-numeric: tabular-nums;
}

.filter-drawer .icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.filter-workspace {
  display: grid;
  min-height: 0;
  grid-template-columns: 15rem minmax(0, 1fr);
  overflow: hidden;
}

.filter-facet-index {
  min-height: 0;
  padding-block: var(--space-2);
  overflow-y: auto;
  border-right: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-bg) 78%, var(--colour-raised));
}

.filter-facet-index a {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-muted);
  font-weight: 700;
  text-decoration: none;
}

.filter-facet-index a:hover,
.filter-facet-index a:focus-visible {
  background: var(--colour-raised-accent);
  color: var(--colour-text);
}

.filter-facet-index strong {
  min-width: 1.5rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-control);
  background: var(--colour-horizon-cobalt);
  color: var(--colour-action-text);
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.filter-facet-panels {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.filter-facet {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  scroll-margin-top: var(--space-2);
}

.detail-provenance summary,
.momentum-exclusions summary {
  min-height: 2.75rem;
  padding-block: var(--space-2);
  font-weight: 700;
  cursor: pointer;
}

.filter-facet > header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-24);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.filter-facet > header p {
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  line-height: 1.4;
}

.filter-facet__body {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
}

.filter-facet .check-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 2.75rem;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-surface);
  cursor: pointer;
}

.filter-facet .check-row:has(input:checked) {
  border-color: var(--colour-horizon-cobalt);
  background: color-mix(
    in srgb,
    var(--colour-horizon-cobalt) 15%,
    var(--colour-surface)
  );
}

.filter-facet .check-row small {
  color: var(--colour-muted);
  font-variant-numeric: tabular-nums;
}

.filter-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2);
}

.filter-option-search {
  display: grid;
  min-height: 2.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-bg);
}

.filter-option-search svg {
  margin-left: var(--space-3);
  color: var(--colour-muted);
}

.filter-option-search input {
  min-width: 0;
  height: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
}

.filter-option-search input:focus {
  outline: 0;
  box-shadow: none;
}

.filter-option-scroll {
  display: grid;
  max-height: 16rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  overflow-y: auto;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  overscroll-behavior: contain;
  scrollbar-color: var(--colour-control-border) transparent;
  scrollbar-gutter: stable;
}

.filter-option-section {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.filter-option-section h4 {
  position: sticky;
  z-index: 1;
  top: calc(-1 * var(--space-1));
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  background: var(--colour-raised-2);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.filter-option-empty {
  grid-column: 1 / -1;
  margin: var(--space-4);
  color: var(--colour-muted);
  text-align: center;
}

.filter-select {
  display: grid;
  gap: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
}

.filter-select select {
  width: 100%;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-surface);
  color: var(--colour-text);
  cursor: pointer;
}

.filter-date-range {
  border: 0;
}

.filter-date-range summary {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--colour-info);
  font-size: var(--font-size-12);
  font-weight: 700;
  cursor: pointer;
}

.filter-date-range[open] summary {
  margin-bottom: var(--space-2);
}

.date-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.date-range label {
  display: grid;
  gap: var(--space-1);
}

.filter-drawer__surface > footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--colour-border);
  background: var(--colour-surface);
}

.filter-drawer__surface > footer p {
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.scanner-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: var(--space-3);
  align-items: start;
  margin-block: var(--space-4);
}

[data-scanner-root][data-density="detailed"] .scanner-results {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.scanner-results .scanner-card {
  display: flex;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  align-self: start;
}

.scanner-results .card--compact .density-detailed-only {
  display: none;
}

.scanner-card .card__header {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.scanner-card .card__header h2,
.scanner-card .card__header h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-14);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.scanner-card .eyebrow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__source-link {
  color: inherit;
  text-decoration: none;
}

.card__source-link:hover {
  color: var(--colour-info);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.card__source-link:focus-visible {
  border-radius: var(--radius-control);
  outline: 2px solid var(--colour-focus);
  outline-offset: 3px;
}

.scanner-card__meta {
  padding-inline: var(--space-3);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.scanner-card .card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-3);
}

.scanner-card .metric-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 0;
  padding: var(--space-2);
}

.find-card .metric-chip {
  padding-inline: var(--space-1);
}

.scanner-card .metric-chip__label,
.scanner-card .metric-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner-card .metric-chip strong {
  font-size: var(--font-size-14);
}

.scanner-card .card__workflow {
  display: flex;
  min-height: 2.5rem;
  padding: 0 var(--space-3) var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-1);
}

.media-card__notice {
  padding: 0 var(--space-3) var(--space-3);
}

.media-card__notice .inline-notice {
  padding: var(--space-2);
  font-size: var(--font-size-12);
}

.scanner-card__detail {
  display: grid;
  gap: var(--space-1);
  min-height: 5.25rem;
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.scanner-card__detail p {
  margin: 0;
}

.scanner-card .card__actions,
.scanner-card.card--detailed .card__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: auto;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.scanner-card .card__actions .button {
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  font-size: var(--font-size-12);
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner-card .card__actions .action-status {
  grid-column: 1 / -1;
}

[data-scanner-root] .scanner-opportunity-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.scanner-results .scanner-opportunity-card {
  display: grid;
  min-height: 20rem;
  grid-template-columns: 10.75rem minmax(0, 1fr);
  border-color: color-mix(
    in srgb,
    var(--colour-control-border) 76%,
    transparent
  );
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-standard) ease,
    transform var(--motion-standard) cubic-bezier(0.16, 1, 0.3, 1);
}

.scanner-results .scanner-opportunity-card:hover {
  border-color: color-mix(
    in srgb,
    var(--colour-action) 46%,
    var(--colour-border)
  );
  box-shadow: 0 var(--space-2) var(--space-6) var(--colour-shadow);
  transform: translateY(-2px);
}

.scanner-opportunity-card > .opportunity-card-media {
  width: 100%;
  height: 100%;
  min-height: 20rem;
  aspect-ratio: auto;
  border-right: 1px solid var(--colour-border);
  border-bottom: 0;
}

.scanner-opportunity-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.scanner-opportunity-card .card__header {
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.scanner-opportunity-card .card__header h2 {
  font-size: var(--font-size-16);
  line-height: 1.32;
  -webkit-line-clamp: 3;
}

.scanner-opportunity-card__channel {
  margin: 0;
  overflow: hidden;
  color: var(--colour-positive);
  font-size: var(--font-size-12);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.scanner-opportunity-card .scanner-card__meta {
  margin-top: var(--space-1);
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.opportunity-signal {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.9fr) minmax(0, 1.1fr);
  margin-inline: var(--space-4);
  border-block: 1px solid var(--colour-border);
}

.opportunity-signal__hero {
  display: grid;
  align-content: center;
  gap: 0;
  min-width: 0;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-right: 1px solid var(--colour-border);
}

.opportunity-signal__hero > span,
.opportunity-signal__facts dt {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.opportunity-signal__hero strong {
  overflow: hidden;
  color: var(--colour-text);
  font-size: clamp(var(--font-size-24), 2.3vw, var(--font-size-32));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-signal__hero--positive strong {
  color: var(--colour-positive);
}

.opportunity-signal__hero--info strong {
  color: var(--colour-info);
}

.opportunity-signal__hero--caution strong {
  color: var(--colour-caution);
}

.opportunity-signal__hero--danger strong {
  color: var(--colour-danger);
}

.opportunity-signal__hero small {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.25;
}

.opportunity-signal__facts {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-3);
}

.opportunity-signal__facts > div {
  min-width: 0;
}

.opportunity-signal__facts dt,
.opportunity-signal__facts dd {
  margin: 0;
}

.opportunity-signal__facts dd {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
  overflow: hidden;
  color: var(--colour-text);
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.confidence-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--colour-muted);
}

.confidence-dot--positive {
  background: var(--colour-positive);
}

.confidence-dot--info {
  background: var(--colour-info);
}

.confidence-dot--caution {
  background: var(--colour-caution);
}

.scanner-opportunity-card .card__workflow {
  min-height: 0;
  padding: var(--space-3) var(--space-4) 0;
}

.scanner-opportunity-card .card__actions,
.scanner-opportunity-card.card--detailed .card__actions {
  grid-template-columns: minmax(6.5rem, 1.4fr) minmax(4.75rem, 1fr) auto;
  margin-top: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 0;
}

.scanner-opportunity-card .card__actions .button {
  padding-inline: var(--space-3);
}

.opportunity-card-media {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  place-items: center;
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-media);
}

.media-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.opportunity-card-media__play .media-icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
  stroke: none;
}

.opportunity-card-media__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--colour-text);
  cursor: pointer;
}

.opportunity-card-media__trigger img,
.opportunity-card-media iframe,
.opportunity-card-media__preview {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.opportunity-card-media__trigger img {
  object-fit: cover;
}

.opportunity-card-media__preview {
  z-index: 1;
  object-fit: cover;
}

.opportunity-card-media__platform {
  position: absolute;
  z-index: 2;
  inset: auto auto var(--space-2) var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--colour-text) 24%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--colour-bg) 84%, transparent);
  color: var(--colour-text);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-transform: capitalize;
}

.opportunity-card-media__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(
    145deg,
    var(--colour-raised-2),
    var(--colour-raised-accent)
  );
  color: var(--colour-muted);
  font-size: var(--font-size-32);
  font-weight: 900;
}

.opportunity-card-media__play {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--colour-text) 27%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--colour-bg) 68%, transparent);
  color: color-mix(in srgb, var(--colour-text) 88%, transparent);
  transform: translate(-50%, -50%);
  transition:
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.opportunity-card-media__trigger:hover .opportunity-card-media__play,
.opportunity-card-media__trigger:focus-visible .opportunity-card-media__play {
  border-color: color-mix(in srgb, var(--colour-text) 55%, transparent);
  background: color-mix(in srgb, var(--colour-bg) 84%, transparent);
  transform: translate(-50%, -50%) scale(1.06);
}

.opportunity-card-media__source {
  position: absolute;
  z-index: 2;
  inset: var(--space-2) var(--space-2) auto auto;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--colour-text) 27%, transparent);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--colour-bg) 82%, transparent);
  color: var(--colour-text);
  font-size: var(--font-size-20);
  font-weight: 900;
  text-decoration: none;
}

.opportunity-card-media__utility {
  position: absolute;
  z-index: 2;
  inset: var(--space-2) auto auto var(--space-2);
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--colour-text) 27%, transparent);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--colour-bg) 86%, transparent);
  box-shadow: 0 var(--space-1) var(--space-4) var(--colour-shadow);
  color: var(--colour-text);
  font: inherit;
  font-size: var(--font-size-12);
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(0.5rem);
}

.opportunity-card__bookmark {
  position: relative;
  z-index: 3;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  grid-column: 2;
  grid-row: 1 / span 3;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--colour-text) 27%, transparent);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--colour-bg) 78%, transparent);
  box-shadow: 0 var(--space-1) var(--space-4) var(--colour-shadow);
  color: var(--colour-bookmark);
  cursor: pointer;
  backdrop-filter: blur(0.5rem);
  transition:
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.opportunity-card__bookmark:hover,
.opportunity-card__bookmark:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--colour-bookmark) 72%,
    var(--colour-text)
  );
  background: color-mix(in srgb, var(--colour-bookmark-bg) 72%, transparent);
  color: color-mix(in srgb, var(--colour-bookmark) 82%, var(--colour-text));
  transform: translateY(-1px);
}

.opportunity-card__bookmark[aria-pressed="true"] {
  border-color: color-mix(
    in srgb,
    var(--colour-bookmark) 76%,
    var(--colour-text)
  );
  background: color-mix(in srgb, var(--colour-bookmark) 22%, var(--colour-bg));
  color: var(--colour-bookmark);
}

.opportunity-card__bookmark[aria-pressed="true"] .media-icon {
  fill: currentColor;
}

.opportunity-card__bookmark.is-saving {
  opacity: 0.62;
  transform: scale(0.94);
}

.opportunity-card__bookmark::after {
  position: absolute;
  z-index: 6;
  inset: calc(100% + var(--space-2)) 0 auto auto;
  width: max-content;
  max-width: 12rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  box-shadow: var(--shadow-raised);
  color: var(--colour-text);
  content: attr(data-tooltip);
  font-size: var(--font-size-12);
  font-weight: 700;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--space-1)));
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.opportunity-card__bookmark:hover::after,
.opportunity-card__bookmark:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.bookmark-label {
  display: inline-flex;
  width: fit-content;
  min-height: 1.75rem;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(
    in srgb,
    var(--colour-bookmark) 16%,
    var(--colour-raised-2)
  );
  color: color-mix(in srgb, var(--colour-bookmark) 78%, var(--colour-text));
  font-size: var(--font-size-12);
  font-weight: 700;
  line-height: 1;
}

.bookmark-label[hidden] {
  display: none;
}

.bookmark-label .media-icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}

.scanner-opportunity-card__body > .bookmark-label {
  margin-inline: var(--space-4);
}

.library-card > .bookmark-label {
  margin-inline: var(--space-3);
}

.scanner-card--bookmarked,
.momentum-card--bookmarked {
  border-color: color-mix(
    in srgb,
    var(--colour-bookmark) 38%,
    var(--colour-border)
  );
}

.bookmark-confirmed .bookmark-label {
  animation: bookmark-confirmed 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bookmark-confirmed {
  0% {
    clip-path: inset(0 100% 0 0 round var(--radius-pill));
  }
  100% {
    clip-path: inset(0 0 0 0 round var(--radius-pill));
  }
}

.opportunity-card-media__utility:hover,
.opportunity-card-media__utility:focus-visible {
  border-color: var(--colour-selection-border);
  background: var(--colour-info-bg);
}

.opportunity-card-media__utility--icon {
  width: 2.75rem;
  padding: 0;
  border-color: color-mix(in srgb, var(--colour-danger) 48%, transparent);
  background: color-mix(in srgb, var(--colour-danger) 16%, var(--colour-bg));
  color: color-mix(in srgb, var(--colour-danger) 86%, var(--colour-text));
  font-size: var(--font-size-18);
  opacity: 0.9;
}

.opportunity-card-media__utility--icon:hover,
.opportunity-card-media__utility--icon:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--colour-danger) 72%,
    var(--colour-text)
  );
  background: color-mix(in srgb, var(--colour-danger) 24%, var(--colour-bg));
  color: var(--colour-text);
  opacity: 1;
}

.opportunity-card-media__utility--icon::after {
  position: absolute;
  z-index: 6;
  inset: calc(100% + var(--space-2)) auto auto 0;
  width: max-content;
  max-width: 10rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  box-shadow: var(--shadow-raised);
  color: var(--colour-text);
  content: attr(data-tooltip);
  font-size: var(--font-size-12);
  font-weight: 700;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--space-1)));
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.opportunity-card-media__utility--icon:hover::after,
.opportunity-card-media__utility--icon:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.scanner-card--optimistic-removing {
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.scanner-card--discarded .opportunity-card-media__trigger img {
  filter: saturate(0.65) brightness(0.8);
}

.opportunity-card-media:has(.opportunity-card-media__trigger:focus-visible),
.opportunity-card-media:has(iframe:focus-visible) {
  box-shadow: inset var(--focus-ring);
}

.opportunity-card-media--poster-unavailable .opportunity-card-media__fallback {
  color: var(--colour-caution);
}

.manual-card-media:has(video:focus-visible) {
  box-shadow: inset var(--focus-ring);
}

.load-more {
  display: flex;
  margin: var(--space-3) auto;
}

.discover-results-section {
  scroll-margin-top: calc(var(--space-16) + var(--space-8));
  padding-top: var(--space-8);
  border-top: 1px solid var(--colour-border);
}

.discover-results-section__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.discover-results-section__header h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}

.discover-results-section__header p {
  max-width: 68ch;
  margin: 0;
  color: var(--colour-muted);
}

.discover-results-section__header > span {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  white-space: nowrap;
}

.discover-results-section__header > span strong {
  color: var(--colour-text);
  font-size: var(--font-size-20);
  font-variant-numeric: tabular-nums;
}

.discover-results-section > .scanner-results {
  margin-top: 0;
}

.momentum-shelf {
  position: relative;
  scroll-margin-top: calc(var(--space-16) + var(--space-8));
  margin: 0 0 var(--space-12);
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-feature);
  background: var(--colour-raised);
}

.momentum-shelf::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--colour-horizon-cobalt),
    var(--colour-horizon-violet) 52%,
    var(--colour-horizon-rose)
  );
  content: "";
}

.momentum-shelf--unavailable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--colour-caution) 52%, transparent);
  border-radius: var(--radius-panel);
  background: color-mix(
    in srgb,
    var(--colour-caution-bg) 62%,
    var(--colour-raised)
  );
}

.momentum-shelf--unavailable h2,
.momentum-shelf--unavailable p {
  margin-block: var(--space-1) 0;
}

.momentum-shelf__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.momentum-shelf__header h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}

.momentum-shelf__header p {
  max-width: 68ch;
  margin: 0;
  color: var(--colour-muted);
}

.momentum-shelf__meta {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: var(--space-2);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  line-height: 1.25;
  text-align: right;
}

.momentum-shelf__meta > span {
  display: grid;
}

.momentum-shelf__meta > span strong {
  color: var(--colour-text);
  font-size: var(--font-size-20);
  font-variant-numeric: tabular-nums;
}

.momentum-shelf__meta a {
  color: var(--colour-info);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.lane-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-block: 0 var(--space-4);
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-border);
}

.momentum-shelf__content {
  scroll-margin-top: calc(var(--app-sticky-header-height) + var(--space-6));
}

.momentum-shelf__content[hidden] {
  display: none;
}

.momentum-disclosure {
  display: flex;
  justify-content: center;
  margin-top: calc(-1 * var(--space-1));
  margin-bottom: var(--space-4);
}

.momentum-disclosure .button {
  min-width: min(100%, 13rem);
  min-height: 2.75rem;
  color: var(--colour-info);
}

.lane-button {
  --lane-accent: var(--colour-horizon-cobalt);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  height: auto;
  min-height: 6.25rem;
  padding: var(--space-3);
  border: 0;
  border-radius: 0;
  background: var(--colour-surface);
  color: var(--colour-muted);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.lane-button::after {
  position: absolute;
  inset: auto var(--space-3) 0;
  height: 3px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--lane-accent);
  content: "";
  opacity: 0;
  transform: scaleX(0.6);
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-standard) cubic-bezier(0.16, 1, 0.3, 1);
}

.lane-button:hover {
  background: var(--colour-raised);
  color: var(--colour-text);
}

.lane-button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--lane-accent) 15%, var(--colour-surface));
  color: var(--colour-text);
}

.lane-button[aria-pressed="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.lane-button__icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.lane-icon__guide {
  opacity: 0.35;
  stroke-dasharray: 2 3;
}

.lane-button[aria-pressed="true"] .lane-button__icon {
  color: var(--lane-accent);
}

.lane-button:nth-child(2) {
  --lane-accent: var(--colour-horizon-violet);
}

.lane-button:nth-child(3) {
  --lane-accent: var(--colour-horizon-magenta);
}

.lane-button:nth-child(4) {
  --lane-accent: var(--colour-horizon-rose);
}

.lane-button__copy {
  min-width: 0;
}

.lane-button__copy,
.lane-button small {
  display: block;
}

.lane-button__copy > strong {
  color: var(--colour-text);
  font-size: var(--font-size-14);
}

.lane-button small {
  margin-top: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 500;
  line-height: 1.3;
}

.lane-button > b {
  align-self: start;
  color: var(--colour-text);
  font-size: var(--font-size-20);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.momentum-list {
  display: grid;
  gap: var(--space-3);
}

.momentum-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
  overflow-wrap: anywhere;
}

.momentum-card > .opportunity-card-media {
  width: 100%;
  height: 100%;
  min-height: 14.75rem;
  aspect-ratio: auto;
  border-right: 1px solid var(--colour-border);
  border-bottom: 0;
}

.momentum-card__body {
  display: flex;
  min-width: 0;
  padding: var(--space-3);
  flex-direction: column;
}

.momentum-card__body header {
  min-width: 0;
}

.momentum-card__channel {
  margin: 0 0 var(--space-1);
  overflow: hidden;
  color: var(--colour-positive);
  font-size: var(--font-size-12);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.momentum-card h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-16);
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.momentum-card__meaning {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.momentum-card__meaning p {
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  line-height: 1.35;
}

.momentum-card__signal {
  color: var(--colour-positive);
  font-size: var(--font-size-20);
  line-height: 1.1;
}

.momentum-card--resurging .momentum-card__signal {
  color: var(--colour-caution);
}

.momentum-card--newly_uploaded .momentum-card__signal {
  color: var(--colour-info);
}

.momentum-change {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-block: var(--space-2);
  border-block: 1px solid var(--colour-border);
}

.momentum-change__row {
  display: grid;
  grid-template-columns: minmax(4rem, 0.8fr) max-content 2.5rem max-content;
  gap: var(--space-1);
  align-items: center;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.momentum-change__row strong,
.momentum-current-stat strong,
.momentum-history strong {
  color: var(--colour-text);
  font-size: var(--font-size-14);
  font-variant-numeric: tabular-nums;
}

.momentum-change__row strong:last-child {
  color: var(--colour-positive);
}

.momentum-change__arrow {
  width: 2.5rem;
  fill: none;
  stroke: var(--colour-control-border);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.momentum-history {
  display: grid;
  grid-template-columns:
    max-content minmax(1.25rem, 1fr) max-content minmax(1.25rem, 1fr)
    max-content;
  align-items: center;
  margin-top: var(--space-3);
  padding-block: var(--space-2);
  border-block: 1px solid var(--colour-border);
  text-align: center;
}

.momentum-history span {
  display: grid;
}

.momentum-history small {
  color: var(--colour-muted);
  font-size: 0.6875rem;
}

.momentum-history i {
  height: 1px;
  background: var(--colour-control-border);
}

.momentum-history__dip strong {
  color: var(--colour-caution);
}

.momentum-current-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-block: var(--space-2);
  border-block: 1px solid var(--colour-border);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.momentum-current-stat strong {
  color: var(--colour-info);
  font-size: var(--font-size-20);
}

.momentum-card__freshness {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.momentum-card__freshness span + span::before {
  margin-right: var(--space-2);
  color: var(--colour-control-border);
  content: "·";
}

.momentum-card__also {
  margin: var(--space-1) 0 0;
  color: var(--colour-info);
  font-size: var(--font-size-12);
  font-weight: 700;
}

.momentum-card__actions {
  display: flex;
  gap: var(--space-2);
  align-items: start;
  margin-top: auto;
  padding-top: var(--space-3);
}

.momentum-card__actions > .button {
  min-height: 2.75rem;
  flex: 0 0 auto;
  padding-inline: var(--space-3);
  font-size: var(--font-size-12);
}

.momentum-card__evidence {
  min-width: 0;
  flex: 1;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.momentum-card__evidence summary {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--colour-info);
  font-weight: 700;
  cursor: pointer;
}

.momentum-card__evidence p {
  margin: var(--space-2) 0 0;
}

.momentum-card__evidence ul {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-4);
}

.momentum-card__evidence li {
  line-height: 1.4;
}

.momentum-view-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.momentum-view-all p {
  margin: 0;
}

.momentum-collapse {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-border);
}

.momentum-collapse .button {
  min-width: min(100%, 15rem);
}

@media (min-width: 70rem) {
  .momentum-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .momentum-shelf__header {
    align-items: start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .momentum-shelf__meta {
    justify-items: start;
    text-align: left;
  }

  .momentum-shelf__meta > span {
    display: flex;
    gap: var(--space-1);
    align-items: baseline;
  }

  .lane-switcher {
    grid-template-columns: 1fr;
  }

  .lane-button {
    min-height: 5.25rem;
  }

  .momentum-card {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .momentum-card > .opportunity-card-media {
    min-height: 16rem;
  }

  .momentum-change__row {
    grid-template-columns:
      minmax(3.25rem, 0.8fr)
      max-content 1.75rem max-content;
  }

  .momentum-change__arrow {
    width: 1.75rem;
  }

  .momentum-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .momentum-card__actions > .button {
    width: 100%;
  }
}

.opportunity-drawer {
  width: min(100%, 46rem);
}

.opportunity-drawer__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow: auto;
  overflow-wrap: anywhere;
}

.opportunity-drawer__header h2 {
  margin: 0;
}

.detail-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.detail-identity p {
  margin-block: 0 var(--space-1);
}

.detail-avatar {
  display: grid;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-pill);
  background: var(--colour-raised-2);
  font-weight: 900;
}

.detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-player {
  display: grid;
  place-items: center;
  min-height: 20rem;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-card);
  background: var(--colour-media);
}

.detail-player iframe {
  width: 100%;
  height: min(68vh, 40rem);
  border: 0;
  border-radius: inherit;
}

.detail-poster {
  position: relative;
  width: 100%;
  min-height: 20rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: var(--colour-raised-2);
  color: var(--colour-text);
  cursor: pointer;
}

.detail-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-poster__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--colour-muted);
}

.detail-poster__action {
  position: absolute;
  z-index: 1;
  inset: auto auto var(--space-4) 50%;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--colour-action);
  color: var(--colour-action-ink);
  font-weight: 900;
  transform: translateX(-50%);
}

.detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.detail-summary,
.detail-calculation,
.detail-states {
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised-2);
}

.detail-summary h3,
.detail-calculation h3,
.detail-states h3 {
  margin-top: 0;
}

.detail-summary p:last-child {
  margin-bottom: 0;
}

.detail-definition-list {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.detail-definition-list dt {
  color: var(--colour-muted);
  font-weight: 700;
}

.detail-definition-list dd {
  margin: 0;
}

.detail-provenance {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
}

.detail-technical {
  margin-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.detail-technical label,
.detail-technical textarea {
  display: block;
  width: 100%;
}

.detail-technical textarea {
  margin-top: var(--space-2);
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-12);
}

.task-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--colour-muted);
  font-size: var(--font-size-14);
}

[hidden] {
  display: none !important;
}

.analysis-builder,
.analysis-module-list,
.analysis-scope-list,
.approval-summary,
.approval-action {
  display: grid;
  gap: var(--space-3);
}

.analysis-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.analysis-progress li {
  display: flex;
  min-width: 0;
  min-height: 3.5rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
}

.analysis-progress li span,
.analysis-module__number {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--colour-action);
  color: var(--colour-action-ink);
  font-size: var(--font-size-12);
  font-weight: 900;
}

.analysis-step {
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: linear-gradient(
    150deg,
    var(--colour-raised),
    var(--colour-raised-2)
  );
}

.analysis-step .ui-section__header p:last-child {
  max-width: 48rem;
  color: var(--colour-muted);
}

.scope-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) !important;
}

.scope-mode-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  min-height: 6rem;
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
  cursor: pointer;
}

.scope-mode-card:has(input:checked) {
  border-color: var(--colour-info);
  background: var(--colour-info-bg);
  box-shadow: inset 0 0 0 1px var(--colour-info);
}

.scope-mode-card input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
}

.scope-mode-card strong,
.scope-mode-card small {
  display: block;
}

.scope-mode-card small {
  margin-top: var(--space-1);
  color: var(--colour-muted);
}

.analysis-channel-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  margin-top: var(--space-3);
}

.analysis-selected-count {
  min-width: 6.5rem;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-info);
  font-weight: 700;
  text-align: center;
}

.analysis-builder fieldset {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  border: 0;
}

.analysis-builder fieldset > legend {
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.analysis-builder summary {
  min-height: 2.75rem;
  padding-block: var(--space-2);
  font-weight: 700;
  cursor: pointer;
}

.analysis-scope-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-height: 27rem;
  overflow: auto;
  padding: var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-bg);
}

.analysis-scope-list .check-row {
  min-height: 3.75rem;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
}

.analysis-scope-list .check-row:has(input:checked) {
  border-color: var(--colour-info);
  background: var(--colour-info-bg);
}

.analysis-unavailable-channels {
  margin-top: var(--space-3);
}

.analysis-channel-picker > summary [data-selected-channel-count] {
  margin-left: var(--space-2);
  color: var(--colour-info);
}

.analysis-scope-list small,
.analysis-module small {
  display: block;
  margin-top: var(--space-1);
  color: var(--colour-muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

.analysis-module {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
  cursor: pointer;
}

.analysis-module:has(input:checked) {
  border-color: var(--colour-info);
  background: var(--colour-info-bg);
}

.analysis-module:has(input:disabled) {
  cursor: default;
}

.analysis-module input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
}

.analysis-module__copy strong,
.analysis-module__copy small {
  display: block;
}

.analysis-module__copy > small {
  margin-top: var(--space-1);
}

.analysis-module__result {
  color: var(--colour-text) !important;
  font-weight: 700;
}

.analysis-module__status {
  color: var(--colour-info) !important;
  font-weight: 700;
}

.analysis-budget-field {
  max-width: 34rem;
  padding: var(--space-4);
  border: 1px solid var(--colour-info);
  border-radius: var(--radius-card);
  background: var(--colour-info-bg);
}

.analysis-budget-field input {
  max-width: 16rem;
  font-size: var(--font-size-24);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.analysis-advanced,
.analysis-technical {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
}

.analysis-advanced > summary,
.analysis-technical > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.analysis-advanced > summary span {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 600;
}

.analysis-method-note {
  margin-bottom: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.analysis-builder__actions,
.approval-action {
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
}

.analysis-builder__actions {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.analysis-builder__actions .action-status {
  grid-column: 1 / -1;
  margin: 0;
}

.analysis-plan {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-color: var(--colour-positive);
}

.analysis-plan-ready {
  margin-bottom: var(--space-4);
}

.analysis-plan-ready p {
  margin-bottom: 0;
}

.analysis-plan-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.analysis-plan-metric {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised-2);
}

.analysis-plan-metric--primary {
  border-color: var(--colour-positive);
  background: var(--colour-positive-bg);
}

.analysis-plan-metric span,
.analysis-plan-metric small {
  color: var(--colour-muted);
}

.analysis-plan-metric strong {
  font-size: var(--font-size-32);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.analysis-plan-modules {
  display: grid;
  gap: var(--space-2);
}

.analysis-plan-module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised);
}

.analysis-plan-module p,
.analysis-plan-module small {
  margin: var(--space-1) 0 0;
  color: var(--colour-muted);
}

.analysis-plan-module > small {
  grid-column: 1 / -1;
}

.analysis-plan-save {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-border);
}

.analysis-plan-save p {
  margin: 0;
  color: var(--colour-muted);
}

.analysis-review-hero {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--colour-positive);
  border-radius: var(--radius-panel);
  background: var(--colour-positive-bg);
}

.error-summary {
  padding: var(--space-4);
  border: 1px solid var(--colour-danger);
  border-radius: var(--radius-panel);
  background: var(--colour-danger-bg);
}

.error-summary h2,
.error-summary p,
.approval-action h2,
.approval-action p {
  margin: 0;
}

.analysis-cost-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
}

.analysis-cost-table {
  width: 100%;
  min-width: 64rem;
  border-collapse: collapse;
  background: var(--colour-raised);
  font-variant-numeric: tabular-nums;
}

.analysis-cost-table caption {
  padding: var(--space-3) var(--space-4);
  color: var(--colour-muted);
  font-weight: 700;
  text-align: left;
}

.analysis-cost-table th,
.analysis-cost-table td {
  padding: var(--space-3);
  border-top: 1px solid var(--colour-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.analysis-cost-table thead th,
.analysis-cost-table tfoot th,
.analysis-cost-table tfoot td {
  background: var(--colour-raised-2);
}

.analysis-plan__summary {
  color: var(--colour-muted);
  font-weight: 700;
}

.approval-summary,
.approval-action {
  margin-block: var(--space-6);
}

.approval-summary dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-3);
  margin: 0;
}

.approval-summary dl > div {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised);
}

.approval-summary dt {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-transform: uppercase;
}

.approval-summary dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.legacy-player {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.legacy-player__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--colour-text);
  cursor: pointer;
}

.legacy-player__trigger img,
.legacy-player iframe,
.find-repair-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.legacy-player__trigger span {
  position: absolute;
  inset: 50% auto auto 50%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--colour-bg);
  font-weight: 700;
  translate: -50% -50%;
}

.legacy-player:has(.legacy-player__trigger:focus-visible),
.legacy-player:has(iframe:focus-visible),
.file-button:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.legacy-progress {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.legacy-progress__track {
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--colour-raised-2);
}

.legacy-progress__track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--colour-action);
  transition: width var(--motion-standard) linear;
}

.legacy-find-details {
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
  overflow-wrap: anywhere;
}

.legacy-find-details summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--colour-info);
  font-weight: 700;
  cursor: pointer;
}

.legacy-find-details ol {
  padding-inline-start: var(--space-6);
}

.action-status[data-state="error"] {
  color: var(--colour-danger);
}

@media (max-width: 67.5rem) {
  [data-scanner-root] .scanner-opportunity-grid {
    grid-template-columns: 1fr;
  }

  .scanner-results .card--compact {
    grid-template-columns: 1fr;
  }

  .scanner-results .scanner-opportunity-card {
    grid-template-columns: 10rem minmax(0, 1fr);
  }

  .scanner-results .card--compact .card__body {
    grid-template-columns: 5.5rem 1fr;
  }
}

@media (max-width: 47.5rem) {
  body:has(.app-header__action:not(:empty)) {
    --app-sticky-header-height: 8.25rem;
  }

  .discover-controls__top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
  }

  .discover-controls__top .scanner-queues {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .discover-controls__top .discover-data-note {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .discover-controls__top .scanner-toolbar > .button {
    grid-column: 2;
    grid-row: 3;
    min-height: 3.25rem;
    border-top: 1px solid var(--colour-border);
  }

  .scanner-search {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 3.5rem;
    border-top: 1px solid var(--colour-border);
  }

  .scanner-sort {
    grid-column: 1;
    grid-row: 3;
    min-height: 3.25rem;
    border-top: 1px solid var(--colour-border);
  }

  .scanner-sort select {
    border-right: 0;
  }

  .discover-results-section__header {
    align-items: start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .discover-results-section,
  .momentum-shelf {
    scroll-margin-top: calc(var(--space-16) * 3);
  }

  .momentum-shelf {
    padding: var(--space-4);
  }

  .momentum-shelf--unavailable {
    align-items: stretch;
    flex-direction: column;
  }

  .scanner-results .scanner-opportunity-card {
    min-height: 18rem;
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }

  .scanner-opportunity-card > .opportunity-card-media {
    min-height: 18rem;
  }

  .scanner-opportunity-card .card__actions,
  .scanner-opportunity-card.card--detailed .card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scanner-opportunity-card .card__actions .button--ghost:last-of-type {
    grid-column: 1 / -1;
  }

  .scanner-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .scanner-query-form {
    grid-template-columns: 1fr;
  }

  .scanner-search,
  .scanner-sort {
    flex: none;
    width: 100%;
  }

  .scanner-result-count {
    margin-left: 0;
  }

  .scanner-queues {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .scanner-queue-tab {
    width: 100%;
    justify-content: center;
    gap: var(--space-1);
    padding-inline: var(--space-2);
    font-size: var(--font-size-12);
  }

  .scanner-queue-tab__wide-label {
    display: none;
  }

  .lane-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scanner-results .card--detailed {
    grid-template-columns: 1fr;
  }

  .scanner-results .card--detailed > * {
    grid-column: 1;
  }

  .filter-drawer,
  .opportunity-drawer {
    width: 100%;
  }

  .filter-drawer {
    height: 100dvh;
    margin: 0;
  }

  .filter-drawer__surface {
    border: 0;
    border-radius: 0;
  }

  .filter-drawer__header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-3) var(--space-4);
  }

  .filter-drawer__summary {
    grid-column: 1;
    grid-row: 2;
    justify-content: start;
  }

  .filter-drawer__header .icon-button {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .filter-workspace {
    display: block;
    overflow-y: auto;
  }

  .filter-facet-index {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    padding: 0;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--colour-border);
  }

  .filter-facet-index a {
    min-width: max-content;
    min-height: 3rem;
    border-right: 1px solid var(--colour-border);
    border-bottom: 0;
  }

  .filter-facet-panels {
    overflow: visible;
  }

  .filter-facet {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }

  .filter-choice-grid,
  .filter-option-scroll {
    grid-template-columns: 1fr;
  }

  .filter-drawer__surface > footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-3) var(--space-4);
  }

  .filter-drawer__surface > footer p {
    display: none;
  }

  .detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-mode-grid,
  .analysis-plan-overview,
  .analysis-builder__actions {
    grid-template-columns: 1fr;
  }

  .analysis-builder__actions .action-status {
    grid-column: 1;
  }

  .analysis-step,
  .analysis-plan,
  .analysis-review-hero {
    padding: var(--space-4);
  }

  .analysis-cost-table-wrap {
    overflow: visible;
    border: 0;
  }

  .analysis-cost-table {
    min-width: 0;
    background: transparent;
  }

  .analysis-cost-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .analysis-cost-table tbody,
  .analysis-cost-table tfoot,
  .analysis-cost-table tr,
  .analysis-cost-table th,
  .analysis-cost-table td {
    display: block;
    width: 100%;
  }

  .analysis-cost-table tr {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-card);
    background: var(--colour-raised);
  }

  .analysis-cost-table th,
  .analysis-cost-table td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.7fr) minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
  }

  .analysis-cost-table [data-label]::before {
    content: attr(data-label);
    color: var(--colour-muted);
    font-size: var(--font-size-12);
    font-weight: 700;
    text-transform: uppercase;
  }
}

@media (max-width: 30rem) {
  .scanner-results .scanner-opportunity-card {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .scanner-opportunity-card .card__header {
    padding: var(--space-3) var(--space-3) var(--space-2);
  }

  .scanner-opportunity-card .card__header h2 {
    font-size: var(--font-size-14);
  }

  .opportunity-signal {
    grid-template-columns: 1fr;
    margin-inline: var(--space-3);
  }

  .opportunity-signal__hero {
    padding: var(--space-2) 0;
    border-right: 0;
    border-bottom: 1px solid var(--colour-border);
  }

  .opportunity-signal__hero strong {
    font-size: var(--font-size-24);
  }

  .opportunity-signal__facts {
    padding: var(--space-2) 0;
  }

  .scanner-opportunity-card .card__workflow {
    padding: var(--space-2) var(--space-3) 0;
  }

  .scanner-opportunity-card .card__actions,
  .scanner-opportunity-card.card--detailed .card__actions {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .date-range,
  .lane-switcher,
  .detail-metrics,
  .scanner-results .card--compact .card__body {
    grid-template-columns: 1fr;
  }

  .scanner-search > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .discover-controls {
    padding: var(--space-3) 0 var(--space-4);
  }

  .scanner-query-heading {
    align-items: start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .density-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-progress,
  .analysis-channel-tools,
  .analysis-plan-module {
    grid-template-columns: 1fr;
  }

  .analysis-progress li {
    min-height: 3rem;
  }

  .analysis-selected-count {
    width: 100%;
    text-align: left;
  }

  .analysis-module {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .analysis-module__number {
    display: none;
  }

  .analysis-plan-module > small {
    grid-column: 1;
  }

  .detail-player {
    min-height: 15rem;
  }

  .detail-poster {
    min-height: 15rem;
  }

  .detail-definition-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Idea Workbench: focused choose -> develop -> make flow. */
.workbench-source-layout,
.workbench-detail-grid {
  display: grid;
  gap: var(--space-6);
}

.workbench-source-layout > *,
.workbench-detail-grid > * {
  min-width: 0;
}

.workbench-player {
  position: relative;
  display: grid;
  min-width: 0;
  width: 100%;
  min-height: 24rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-media);
}

.workbench-player iframe,
.workbench-player video,
.workbench-player img {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: inherit;
  border: 0;
  object-fit: contain;
}

.workbench-player img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0.7;
}

.workbench-player .button {
  position: relative;
  z-index: 1;
}

.metric-chip-row,
.workbench-audience,
.workbench-directions,
.workbench-deliverables {
  display: grid;
  gap: var(--space-3);
}

.metric-chip-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbench-audience article {
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised-2);
}

.workbench-audience p {
  margin-bottom: 0;
  color: var(--colour-muted);
}

.workbench-controls {
  display: grid;
  gap: var(--space-4);
  align-items: end;
  margin-top: var(--space-6);
}

.workbench-controls select {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-bg);
}

.workbench-controls[aria-busy="true"] select,
.workbench-controls[aria-busy="true"] button {
  cursor: wait;
  opacity: 0.65;
}

.workbench-direction {
  position: relative;
  display: grid;
  min-height: 18rem;
  gap: var(--space-3);
  align-content: start;
  width: 100%;
  overflow: hidden;
  color: var(--colour-text);
  text-align: left;
}

.workbench-direction__select {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.workbench-direction__select:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.workbench-direction__select > strong {
  font-size: var(--font-size-24);
  line-height: 1.15;
}

.workbench-direction__select > span {
  display: block;
  width: 100%;
}

.workbench-direction small {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workbench-direction.is-selected {
  background: color-mix(
    in srgb,
    var(--colour-info-bg) 52%,
    var(--colour-raised)
  );
}

.workbench-direction.is-primary {
  border-color: var(--colour-selection-border);
}

.workbench-direction.is-primary::before,
.workbench-direction.is-supporting::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--colour-horizon-cobalt),
    var(--colour-horizon-violet),
    var(--colour-horizon-rose)
  );
  content: "";
}

.workbench-direction.is-supporting {
  border-color: var(--colour-horizon-violet);
  background: color-mix(
    in srgb,
    var(--colour-horizon-violet) 8%,
    var(--colour-raised)
  );
}

.workbench-direction__topline {
  display: flex !important;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.workbench-direction__topline .eyebrow {
  width: auto;
}

.workbench-direction__role {
  width: auto !important;
  padding: var(--space-1) var(--space-2);
  border: 1px solid currentcolor;
  border-radius: var(--radius-control);
  color: var(--colour-info);
  font-size: var(--font-size-11);
  font-weight: 700;
  line-height: 1.35;
}

.workbench-direction__controls {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.workbench-direction__controls > .button {
  width: fit-content;
  min-height: 2.75rem;
}

.workbench-steering {
  min-width: 0;
}

.workbench-steering summary {
  min-height: 2.75rem;
  padding: var(--space-2) 0;
  color: var(--colour-action-text);
  cursor: pointer;
}

.workbench-steering summary span,
.workbench-steering summary small {
  display: block;
  margin: 0;
}

.workbench-steering summary span {
  font-weight: 700;
}

.workbench-steering summary small {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.workbench-steering__body {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.workbench-steering__body label {
  color: var(--colour-text);
  font-size: var(--font-size-13);
  font-weight: 700;
}

.workbench-steering__body textarea {
  width: 100%;
  min-height: 6.75rem;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-bg);
  color: var(--colour-text);
  caret-color: var(--colour-focus);
  font: inherit;
  line-height: 1.45;
}

.workbench-steering__body textarea:focus-visible {
  border-color: var(--colour-focus);
  outline: 0;
  box-shadow: var(--focus-ring);
}

.workbench-steering__body textarea:disabled {
  cursor: wait;
  opacity: 0.58;
}

.workbench-steering__body > small {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.workbench-detail {
  scroll-margin-top: var(--space-6);
}

.workbench-detail pre,
.workbench-pack-field pre {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font: inherit;
}

.workbench-detail .card--compact {
  min-width: 0;
  grid-template-columns: 1fr;
}

.workbench-detail > .inline-notice,
.workbench-detail > .workbench-controls,
.workbench-production {
  margin-top: var(--space-6);
}

.workbench-production {
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(
        90deg,
        var(--colour-horizon-cobalt),
        var(--colour-horizon-violet),
        var(--colour-horizon-rose)
      )
      top / 100% 2px no-repeat,
    var(--colour-raised);
}

.workbench-production__header {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  border-bottom: 1px solid var(--colour-border);
}

.workbench-production__header h2 {
  margin: 0;
  font-size: var(--font-size-32);
  line-height: 1;
}

.workbench-production__header p {
  max-width: 62ch;
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
}

.workbench-production__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}

.workbench-production__status .muted {
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
}

.workbench-production__header > .button {
  min-height: 2.75rem;
}

.workbench-copy-all {
  display: grid;
  gap: var(--space-1);
  justify-items: end;
}

.workbench-copy-all .button {
  min-height: 2.75rem;
}

.workbench-copy-all small {
  max-width: 22rem;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  text-align: right;
}

.workbench-pack-core {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
  border-bottom: 1px solid var(--colour-border);
}

.workbench-pack-field--overlay {
  border-right: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-horizon-cobalt) 7%, transparent);
}

.workbench-pack-field--clip {
  background: color-mix(in srgb, var(--colour-raised-2) 52%, transparent);
}

.workbench-pack-field--clip pre {
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: 1.5;
}

.workbench-pack-field__helper {
  font-size: var(--font-size-12);
  line-height: 1.4;
}

.workbench-pack-publishing__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised-2) 28%, transparent);
}

.workbench-pack-publishing__header h3,
.workbench-pack-publishing__header p {
  margin: 0;
}

.workbench-pack-publishing__header h3 {
  font-size: var(--font-size-18);
}

.workbench-pack-publishing__header p {
  color: var(--colour-muted);
  font-size: var(--font-size-14);
}

.workbench-pack-sheet {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(18rem, 0.84fr) minmax(0, 1.16fr);
  grid-template-rows: auto 1fr;
}

.workbench-pack-sheet--without-description {
  grid-template-columns: minmax(0, 1fr);
}

.workbench-pack-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
}

.workbench-pack-field__header {
  display: flex;
  min-width: 0;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.workbench-pack-field__header h3 {
  margin: 0;
  font-size: var(--font-size-14);
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.25;
  text-transform: uppercase;
}

.workbench-pack-field__header .button {
  min-width: 4.75rem;
  min-height: 2.75rem;
  flex: 0 0 auto;
}

.workbench-pack-field__header--overlay {
  flex-wrap: wrap;
  align-items: flex-start;
}

.workbench-pack-field__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.workbench-overlay-preview {
  display: grid;
  min-height: 17rem;
  gap: 0.12em;
  align-content: center;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: 1px solid color-mix(in srgb, white 14%, transparent);
  border-radius: var(--radius-card);
  background: var(--colour-overlay-card);
  color: var(--colour-overlay-text);
}

.workbench-overlay-preview__line {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(var(--font-size-18), 1.8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}

.workbench-overlay-preview [data-overlay-tone="white"] {
  color: var(--colour-overlay-text);
}

.workbench-overlay-preview [data-overlay-tone="red"] {
  color: var(--colour-overlay-red);
}

.workbench-overlay-preview [data-overlay-tone="yellow"] {
  color: var(--colour-overlay-yellow);
}

.workbench-overlay-preview [data-overlay-tone="green"] {
  color: var(--colour-overlay-green);
}

.workbench-overlay-preview [data-overlay-tone="blue"] {
  color: var(--colour-overlay-blue);
}

.workbench-overlay-preview[contenteditable="true"] {
  min-height: 19rem;
  border-color: var(--colour-focus);
  caret-color: var(--colour-overlay-text);
  cursor: text;
  outline: 0;
  box-shadow: var(--focus-ring);
}

.workbench-overlay-preview[contenteditable="true"]::selection,
.workbench-overlay-preview[contenteditable="true"] *::selection {
  background: color-mix(in srgb, var(--colour-focus) 45%, transparent);
  color: var(--colour-overlay-text);
}

.workbench-overlay-editor {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised-2);
}

.workbench-overlay-editor > div:first-child {
  min-width: 0;
}

.workbench-overlay-editor strong {
  display: block;
  margin-bottom: var(--space-1);
}

.workbench-overlay-editor p {
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.workbench-overlay-palette,
.workbench-overlay-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.workbench-overlay-palette {
  grid-column: 1;
}

.workbench-overlay-editor__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: flex-end;
}

.workbench-overlay-palette .button {
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-inline: var(--space-3);
}

.workbench-overlay-palette .button span {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid color-mix(in srgb, currentcolor 40%, transparent);
  border-radius: 50%;
  background: currentcolor;
}

.workbench-overlay-palette [data-overlay-tone-choice="yellow"] {
  color: var(--colour-overlay-yellow);
}

.workbench-overlay-palette [data-overlay-tone-choice="red"] {
  color: var(--colour-overlay-red);
}

.workbench-overlay-palette [data-overlay-tone-choice="green"] {
  color: var(--colour-overlay-green);
}

.workbench-overlay-palette [data-overlay-tone-choice="blue"] {
  color: var(--colour-overlay-blue);
}

.workbench-pack-field--overlay.is-editing .workbench-overlay-export-meta {
  opacity: 0.55;
}

.workbench-overlay-export-meta {
  display: grid;
  gap: var(--space-1);
}

.workbench-overlay-export-meta > .muted:last-child {
  max-width: 72ch;
  font-size: var(--font-size-12);
  line-height: 1.45;
}

.workbench-overlay-saved {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  margin-inline-start: var(--space-2);
  padding-inline: var(--space-2);
  border: 1px solid var(--colour-positive);
  border-radius: var(--radius-control);
  color: var(--colour-positive);
  font-size: var(--font-size-12);
  font-weight: 700;
  vertical-align: middle;
}

.workbench-pack-field--overlay [data-overlay-export-status]:empty {
  display: none;
}

.workbench-pack-field pre,
.workbench-pack-field p,
.workbench-pack-field ol,
.workbench-pack-field dl {
  margin: 0;
}

.workbench-pack-field--title {
  grid-column: 1;
  grid-row: 1;
}

.workbench-pack-field--title pre {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(var(--font-size-24), 3vw, var(--font-size-32));
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.workbench-pack-field--comment {
  grid-column: 1;
  grid-row: 2;
  border-top: 1px solid var(--colour-border);
}

.workbench-pack-field--comment pre {
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: 1.5;
}

.workbench-pack-field--description {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-left: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised-2) 38%, transparent);
}

.workbench-pack-field--description pre {
  max-width: 72ch;
  line-height: 1.58;
}

.workbench-pack-intent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.workbench-pack-intent > div {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.workbench-pack-intent dt {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
}

.workbench-pack-intent dd {
  margin: 0;
  color: var(--colour-text);
  font-weight: 700;
}

.workbench-pack-options {
  border-top: 1px solid var(--colour-border);
}

.workbench-pack-options details + details {
  border-top: 1px solid var(--colour-border);
}

.workbench-pack-options summary {
  min-height: 4.5rem;
  padding: var(--space-4) var(--space-6);
  color: var(--colour-text);
  cursor: pointer;
}

.workbench-pack-options summary::marker {
  color: var(--colour-action-text);
}

.workbench-pack-options summary span,
.workbench-pack-options summary small {
  display: inline;
}

.workbench-pack-options summary span {
  font-weight: 700;
}

.workbench-pack-options summary small {
  margin-left: var(--space-2);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.workbench-pack-options details[open] > summary {
  border-bottom: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised-2) 52%, transparent);
}

.workbench-pack-alternates__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workbench-pack-alternates__grid > * + * {
  border-left: 1px solid var(--colour-border);
}

.workbench-pack-alternates__grid ol {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-6);
}

.workbench-pack-refine__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.workbench-pack-refine__body > p {
  max-width: 68ch;
  margin: 0;
  color: var(--colour-muted);
}

.workbench-pack-refine .action-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.workbench-pack-refine .action-group form {
  display: grid;
  gap: var(--space-2);
}

.workbench-selection-bar {
  position: sticky;
  z-index: 4;
  bottom: var(--space-3);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  max-width: 50rem;
  margin: var(--space-8) auto 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--colour-raised) 92%, transparent);
  box-shadow: 0 var(--space-4) var(--space-12) var(--colour-shadow);
  backdrop-filter: blur(1rem);
}

.workbench-selection-bar small,
.workbench-selection-bar strong {
  display: block;
}

.workbench-selection-bar small {
  color: var(--colour-muted);
}

@media (min-width: 47.5rem) {
  .workbench-source-layout {
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  }

  .workbench-detail-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }

  .workbench-controls {
    grid-template-columns: repeat(2, minmax(10rem, 1fr)) auto;
  }

  .workbench-audience,
  .workbench-directions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.49rem) {
  .workbench-player {
    min-height: 18rem;
    aspect-ratio: 16 / 9;
  }

  .workbench-controls .button,
  .workbench-selection-bar .button {
    min-height: 2.75rem;
  }

  .workbench-selection-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .workbench-production__header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .workbench-production__header > .button {
    width: 100%;
  }

  .workbench-copy-all {
    justify-items: stretch;
  }

  .workbench-copy-all .button {
    width: 100%;
  }

  .workbench-copy-all small {
    max-width: none;
    text-align: left;
  }

  .workbench-pack-core,
  .workbench-pack-sheet,
  .workbench-pack-alternates__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .workbench-pack-field,
  .workbench-pack-field--overlay,
  .workbench-pack-field--clip,
  .workbench-pack-field--title,
  .workbench-pack-field--comment,
  .workbench-pack-field--description {
    grid-column: 1;
    grid-row: auto;
    padding: var(--space-4);
    border-top: 1px solid var(--colour-border);
    border-left: 0;
  }

  .workbench-pack-field--overlay {
    border-right: 0;
  }

  .workbench-pack-field__header--overlay {
    align-items: stretch;
  }

  .workbench-pack-field__actions {
    width: 100%;
    justify-content: stretch;
  }

  .workbench-pack-field__actions .button {
    min-width: 0;
    flex: 1 1 calc(50% - var(--space-2));
  }

  .workbench-pack-field__actions [data-edit-overlay] {
    flex-basis: 100%;
  }

  .workbench-overlay-editor {
    grid-template-columns: 1fr;
  }

  .workbench-overlay-palette,
  .workbench-overlay-editor__actions {
    grid-column: 1;
    grid-row: auto;
  }

  .workbench-overlay-editor__actions {
    justify-content: stretch;
  }

  .workbench-overlay-editor__actions .button {
    flex: 1 1 8rem;
  }

  .workbench-overlay-preview {
    min-height: 0;
    padding: var(--space-4) var(--space-3);
  }

  .workbench-overlay-preview__line {
    font-size: clamp(1.02rem, 4.6vw, var(--font-size-20));
  }

  .workbench-pack-core > :first-child,
  .workbench-pack-sheet > :first-child,
  .workbench-pack-alternates__grid > :first-child {
    border-top: 0;
  }

  .workbench-pack-alternates__grid > * + * {
    border-left: 0;
  }

  .workbench-pack-field__header {
    align-items: center;
  }

  .workbench-pack-field--title pre {
    max-width: none;
    font-size: clamp(var(--font-size-24), 8vw, var(--font-size-32));
  }

  .workbench-pack-options summary {
    padding-inline: var(--space-4);
  }

  .workbench-pack-publishing__header {
    padding-inline: var(--space-4);
  }

  .workbench-pack-options summary span,
  .workbench-pack-options summary small {
    display: block;
  }

  .workbench-pack-options summary small {
    margin: var(--space-1) 0 0;
  }

  .workbench-pack-refine__body {
    padding-inline: var(--space-4);
  }

  .workbench-pack-refine .action-group,
  .workbench-pack-refine .action-group form,
  .workbench-pack-refine .action-group .button {
    width: 100%;
  }
}

/* Channel Engine preview: the selected channel reads as one programming slate. */
.ce-home,
.ce-area {
  font-variant-numeric: tabular-nums;
}

body:has(.ce-home) {
  min-width: 0;
  overflow-x: clip;
}

body:has(.ce-home) .app-shell {
  width: 100%;
  max-width: 96rem;
}

body:has(.ce-home) .app-main {
  padding-block: var(--space-6);
}

body:has(.ce-home) .page-header {
  margin-bottom: var(--space-6);
}

.ce-home h2,
.ce-home h3,
.ce-home h4,
.ce-area h2,
.ce-area h3,
.ce-context strong {
  text-wrap: balance;
}

.ce-portfolio {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-height: 35rem;
  grid-template-columns: minmax(13rem, 0.23fr) minmax(0, 0.77fr);
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-feature);
  background: var(--colour-surface);
  box-shadow: none;
}

.ce-portfolio--private {
  min-height: 0;
}

.ce-section-heading {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}

.ce-section-heading h2,
.ce-section-heading h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-16);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ce-section-heading span {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-roster {
  min-width: 0;
  background: color-mix(in srgb, var(--colour-raised) 78%, var(--colour-bg));
}

.ce-rail {
  min-width: 0;
  border-right: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised) 78%, var(--colour-bg));
}

.ce-roster nav {
  display: grid;
}

.ce-channel-choice {
  display: grid;
  min-height: 5.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-text);
  text-decoration: none;
  transition:
    background-color var(--motion-standard) cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow var(--motion-standard) cubic-bezier(0.16, 1, 0.3, 1);
}

.ce-channel-choice:hover {
  background: var(--colour-raised-2);
}

.ce-channel-choice[aria-current="true"] {
  background: var(--colour-raised-accent);
  box-shadow: none;
}

.ce-channel-choice strong,
.ce-channel-choice small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ce-channel-choice small {
  margin-top: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-channel-choice__arrow {
  color: var(--colour-focus);
  font-size: var(--font-size-20);
}

.ce-avatar {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--colour-soft-border);
  border-radius: 50%;
  background: var(--colour-raised-2);
  color: var(--colour-text);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
}

img.ce-avatar {
  display: block;
  object-fit: cover;
}

.ce-avatar--large {
  width: 4rem;
  height: 4rem;
  font-size: var(--font-size-20);
}

.ce-programme {
  min-width: 0;
  background: var(--colour-bg);
}

.ce-programme__header {
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
}

.ce-programme__identity {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
}

.ce-programme__identity h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-28);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ce-programme__identity p {
  margin: var(--space-1) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
  line-height: 1.2;
}

.ce-channel-settings {
  margin-top: var(--space-3);
  max-width: 34rem;
}

.ce-channel-settings summary {
  width: fit-content;
  min-height: 2rem;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  cursor: pointer;
}

.ce-channel-settings[open] summary {
  color: var(--colour-text);
}

.ce-channel-settings > p {
  max-width: 40ch;
  font-size: var(--font-size-12);
  line-height: 1.4;
}

.ce-channel-settings .ce-channel-type {
  flex-wrap: wrap;
}

.ce-channel-type {
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ce-channel-type label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ce-channel-type label > span,
.ce-channel-type small {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 600;
}

.ce-channel-type select {
  min-height: 2rem;
  padding: var(--space-1) var(--space-8) var(--space-1) var(--space-2);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background-color: var(--colour-surface);
  color: var(--colour-text);
  font-size: var(--font-size-12);
  font-weight: 600;
}

.ce-channel-type select[aria-busy="true"] {
  color: var(--colour-muted);
  cursor: wait;
}

.ce-channel-type small:focus {
  outline: none;
}

.ce-channel-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: color-mix(in srgb, var(--colour-raised-2) 80%, var(--colour-bg));
}

.ce-pulse-metric {
  display: grid;
  gap: calc(var(--space-1) / 2);
  min-width: 0;
  padding: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}

.ce-pulse-metric + .ce-pulse-metric {
  border-left: 1px solid var(--colour-border);
}

.ce-pulse-metric span,
.ce-pulse-metric small {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-pulse-metric strong {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: clamp(var(--font-size-24), 2.4vw, var(--font-size-32));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ce-pulse-metric--stale strong,
.ce-pulse-metric--stale small {
  color: var(--colour-caution);
}

.ce-pulse-metric--unavailable strong {
  color: var(--colour-muted);
  font-size: var(--font-size-20);
}

.ce-channel-pulse__note {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-programme__body {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(16rem, 0.86fr);
}

.ce-programme__body--private {
  grid-template-columns: minmax(0, 1fr);
}

.ce-programme__body--private .ce-published-short__media {
  aspect-ratio: 9 / 12;
}

.ce-programme__body--private .ce-published__rows {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4);
}

.ce-programme__body--private .ce-published-short {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
}

.ce-programme__body--private .ce-published-short > svg {
  display: none;
}

.ce-programme__body--private .ce-published-short__media {
  border: 0;
  border-radius: var(--radius-card);
}

.ce-programme__body--private .ce-published-short__copy {
  padding: 0 var(--space-2) var(--space-3);
}

.ce-programme__body--private .ce-published-short__copy > strong {
  line-height: 1.45;
}

.ce-programme__body--private .ce-published-short dl {
  display: flex;
  gap: var(--space-6);
}

.ce-programme__primary {
  min-width: 0;
}

.ce-format-slate,
.ce-published,
.ce-next {
  min-width: 0;
}

.ce-next {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(15rem, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised);
}

.ce-next--compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  font-size: var(--font-size-13);
}

.ce-next--compact > span {
  color: var(--colour-muted);
}

.ce-next--compact > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 60rem) {
  .ce-next--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

.ce-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ce-next > div {
  display: grid;
  gap: var(--space-1);
}

.ce-next > div > span {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ce-next > div > strong {
  font-family: var(--font-display);
  font-size: var(--font-size-24);
  font-weight: 600;
  line-height: 1.05;
}

.ce-next p {
  max-width: 42ch;
  margin-block: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
}

.ce-next > div > p {
  font-size: var(--font-size-12);
}

.ce-next .button svg,
.ce-programme__header .button svg {
  margin-left: var(--space-2);
}

.button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--colour-muted);
}

.button--quiet:hover {
  border-color: var(--colour-control-border);
  color: var(--colour-text);
}

.ce-format-row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.38fr) minmax(0, 1fr);
  gap: calc(var(--space-4) + var(--space-1));
  margin: var(--space-4);
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--colour-horizon-cobalt) 48%, var(--colour-border));
  border-radius: var(--radius-card);
  background: var(--colour-raised-2);
  box-shadow: 0 1rem 2.5rem -1.5rem var(--colour-shadow);
}

.ce-format-row__media {
  min-height: 11rem;
  background: var(--colour-media);
}

.ce-format-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 11rem;
  object-fit: cover;
  object-position: right center;
}

.ce-format-row__copy {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
}

.ce-format-row__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ce-format-row h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-32);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ce-format-row p {
  max-width: 55ch;
  margin: 0;
  color: var(--colour-muted);
}

.ce-format-row dl,
.ce-area-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.ce-format-row dl div,
.ce-area-facts div {
  padding-top: var(--space-2);
  border-top: 1px solid var(--colour-border);
}

.ce-format-row dt,
.ce-area-facts dt {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-format-row dd,
.ce-area-facts dd {
  margin: var(--space-1) 0 0;
}

.ce-boundary {
  margin: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-surface);
}

.ce-boundary strong {
  color: var(--colour-caution);
}

.ce-boundary p {
  max-width: 68ch;
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
}

.ce-published {
  border-left: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised) 72%, var(--colour-bg));
}

.ce-published__heading {
  align-items: stretch;
}

.ce-published__heading > div {
  display: grid;
  align-content: center;
}

.ce-published__heading > div > span {
  margin-top: calc(var(--space-1) / 2);
}

.ce-published__heading > a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-1);
  color: var(--colour-focus);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-decoration: none;
}

.ce-published__heading > a:hover {
  color: var(--colour-text);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.ce-published__heading > a svg {
  width: 1rem;
  height: 1rem;
}

.ce-published__rows {
  display: grid;
}

.ce-published-short {
  display: grid;
  min-width: 0;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-text);
  text-decoration: none;
  transition: background-color var(--motion-fast) ease-out;
}

.ce-published-short:hover {
  background: var(--colour-raised-2);
}

.ce-published-short__media {
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--colour-soft-border);
  border-radius: var(--radius-control);
}

.ce-published-short__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ce-published-short__copy {
  min-width: 0;
}

.ce-published-short__copy > strong,
.ce-published-short__copy > span,
.ce-published-short__copy > small {
  display: block;
}

.ce-published-short__copy > strong {
  overflow: hidden;
  font-size: var(--font-size-14);
  text-overflow: ellipsis;
  white-space: normal;
}

.ce-published-short__copy > span,
.ce-published-short__copy > small {
  margin-top: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-published-short dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}

.ce-published-short dl div {
  min-width: 0;
}

.ce-published-short dt {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-published-short dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: var(--font-size-20);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
}

.ce-published-stat--unavailable {
  color: var(--colour-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-12);
  font-weight: 500;
}

.ce-published-short > svg {
  color: var(--colour-focus);
}

.ce-published__empty {
  padding: var(--space-6) var(--space-4);
}

.ce-published__empty p {
  max-width: 44ch;
  color: var(--colour-muted);
}

.ce-archived {
  border-top: 1px solid var(--colour-border);
}

.ce-archived summary {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
}

.ce-archived article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--colour-border);
}

.ce-archived article strong,
.ce-archived article small {
  display: block;
}

.ce-archived article small {
  color: var(--colour-muted);
}

.ce-context {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  overflow-x: auto;
  border-bottom: 1px solid var(--colour-border);
  white-space: nowrap;
}

.ce-context__back {
  color: var(--colour-muted);
}

.ce-context__divider {
  color: var(--colour-control-border);
}

.ce-context__summary {
  margin-left: var(--space-4);
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.ce-channel-navigation {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(34vw, 26rem);
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.ce-channel-navigation a {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  color: var(--colour-muted);
  text-decoration: none;
}

.ce-channel-navigation a:hover {
  color: var(--colour-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ce-channel-navigation strong {
  min-width: 0;
  overflow: hidden;
  color: var(--colour-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 47.5rem) {
  .ce-channel-navigation {
    max-width: 100%;
  }
}

@media (max-width: 30rem) {
  body:has(.ce-channel-navigation)
    .top-nav:has([data-nav-id="competitors"])
    ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: space-between;
    width: 100%;
    gap: 0;
    padding-inline: 0;
  }

  body:has(.ce-channel-navigation) .top-nav:has([data-nav-id="competitors"]) a {
    min-height: 2.75rem;
    padding-inline: var(--space-2);
    font-size: var(--font-size-12);
  }
}

.ce-area-panel {
  display: grid;
  min-height: 28rem;
  align-content: start;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-feature);
  background:
    linear-gradient(120deg, var(--colour-raised-2), transparent 72%),
    var(--colour-surface);
  box-shadow: 0 1.5rem 3.5rem -2rem var(--colour-shadow);
}

.ce-area-panel h2 {
  max-width: 18ch;
  margin: var(--space-6) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.ce-area-panel > p {
  max-width: 68ch;
  margin: 0;
  color: var(--colour-muted);
}

.ce-area-panel .ce-boundary {
  width: min(100%, 46rem);
  margin: var(--space-8) 0 0;
}

.ce-area-panel__measure {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--colour-border);
}

.ce-area-panel__measure span {
  color: var(--colour-muted);
}

.ce-area-panel__measure strong {
  max-width: 70%;
  font-family: var(--font-display);
  font-size: var(--font-size-32);
  font-weight: 600;
  text-align: right;
}

.ce-area-facts {
  width: min(100%, 46rem);
}

.ce-empty {
  display: grid;
  min-height: 28rem;
  place-content: center;
  justify-items: start;
  padding: var(--space-8);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-feature);
  background: var(--colour-surface);
}

.ce-empty h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-48);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ce-empty p {
  max-width: 58ch;
  color: var(--colour-muted);
}

.ce-add-dialog {
  width: min(calc(100% - 2rem), 38rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-feature);
  background: var(--colour-surface-3);
  color: var(--colour-text);
  box-shadow: var(--shadow-panel);
}

.ce-add-dialog::backdrop {
  background: var(--colour-overlay);
  backdrop-filter: blur(0.25rem);
}

.ce-dialog__close {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4) 0;
}

.ce-add-form {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-6) var(--space-6);
}

.ce-add-form header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-32);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ce-add-form header p,
.ce-add-form label small {
  color: var(--colour-muted);
}

.ce-add-form > label,
.ce-add-form fieldset {
  display: grid;
  gap: var(--space-2);
}

.ce-add-form input[type="text"],
.ce-add-form input:not([type]) {
  min-height: 2.75rem;
}

.ce-add-form > label > input {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-bg);
}

.ce-add-form fieldset {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
}

.ce-format-choice {
  display: flex;
  min-height: 3.75rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  cursor: pointer;
}

.ce-format-choice + .ce-format-choice {
  border-top: 1px solid var(--colour-border);
}

.ce-format-choice input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--colour-horizon-cobalt);
}

.ce-format-choice strong,
.ce-format-choice small {
  display: block;
}

.ce-add-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@keyframes ce-slate-in {
  from {
    clip-path: inset(0 0 100% 0);
    filter: blur(0.35rem);
  }
  to {
    clip-path: inset(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ce-programme {
    animation: ce-slate-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@media (max-width: 63.99rem) {
  .ce-portfolio {
    grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 0.66fr);
  }

  .ce-channel-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ce-pulse-metric:nth-child(3) {
    border-left: 0;
  }

  .ce-next {
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr);
  }

  .ce-next__actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 47.49rem) {
  body:has(.ce-home) .app-shell {
    padding-inline: var(--space-6);
  }

  body:has(.ce-home) .app-shell,
  body:has(.ce-home) .app-main,
  .ce-home,
  .ce-portfolio,
  .ce-programme {
    min-width: 0;
    max-width: 100%;
  }

  body:has(.ce-home) .page-header__description {
    overflow-wrap: anywhere;
  }

  .ce-portfolio {
    display: flex;
    flex-direction: column;
  }

  .ce-rail {
    display: contents;
  }

  .ce-roster {
    order: 1;
    border-right: 0;
    border-bottom: 1px solid var(--colour-border);
  }

  .ce-programme {
    order: 2;
  }

  .ce-archived {
    order: 3;
  }

  .ce-roster nav {
    display: flex;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .ce-channel-choice {
    width: min(78vw, 18rem);
    min-width: 0;
    flex: 0 0 auto;
    border-right: 1px solid var(--colour-border);
    scroll-snap-align: start;
  }

  .ce-channel-choice[aria-current="true"] {
    box-shadow: inset 0 -2px var(--colour-horizon-cobalt);
  }

  .ce-programme__header {
    align-items: stretch;
    flex-direction: column;
    padding: var(--space-4);
  }

  .ce-channel-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ce-programme__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-next__actions {
    grid-column: auto;
  }

  .ce-published {
    border-top: 1px solid var(--colour-border);
    border-left: 0;
  }

  .ce-format-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-format-row__media {
    min-height: 10rem;
  }

  .ce-format-row__media img {
    min-height: 10rem;
    aspect-ratio: 16 / 9;
  }

  .ce-format-row__copy {
    padding: 0 var(--space-4) var(--space-4);
  }

  .ce-format-row__title {
    align-items: flex-start;
    flex-direction: column;
  }

  .ce-format-row dl,
  .ce-area-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-published-short {
    grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  }

  .ce-context__fact {
    margin-left: var(--space-2);
  }

  .ce-area-panel__measure {
    align-items: flex-start;
    flex-direction: column;
  }

  .ce-area-panel__measure strong {
    max-width: 100%;
    text-align: left;
  }

  .ce-archived article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ce-archived article .button,
  .ce-archived article .action-status {
    grid-column: 1 / -1;
  }

  .ce-add-form {
    padding: 0 var(--space-4) var(--space-4);
  }
}

/* Smart Workbench: a source-anchored creative flow. */
body:has(.smart-workbench) .app-main {
  width: min(100%, 96rem);
  padding-top: var(--space-3);
}

body:has(.smart-workbench) .page-header {
  max-width: 70rem;
  margin-bottom: var(--space-4);
}

body:has(.smart-workbench) .page-header h1 {
  max-width: none;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.045em;
}

.smart-workbench {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
  padding-bottom: var(--space-10);
}

body:has(.smart-workbench) .app-header {
  position: static;
}

.smart-workbench-chrome {
  position: sticky;
  z-index: 18;
  top: var(--space-2);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--colour-canvas) 94%, transparent);
  box-shadow: 0 18px 42px var(--colour-shadow);
  backdrop-filter: blur(14px);
}

.smart-workbench-utilities {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 3rem;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised);
}

.smart-workbench-save-state {
  display: flex;
  min-width: 0;
  gap: var(--space-2);
  align-items: center;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.smart-workbench-save-state > span {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--colour-positive);
}

.smart-workbench-save-state strong {
  color: var(--colour-positive);
}

.smart-workbench-save-state small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-workbench-stepper {
  overflow: hidden;
}

.smart-workbench-stepper__summary {
  display: none;
}

.smart-workbench-stepper__track {
  height: 3px;
  background: var(--colour-raised-2);
}

.smart-workbench-stepper__track > span {
  display: block;
  height: 100%;
  background: var(--colour-action);
}

.smart-workbench-stepper ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.smart-workbench-stepper li + li {
  border-left: 1px solid var(--colour-border);
}

.smart-workbench-stepper button {
  display: flex;
  width: 100%;
  min-height: 4.25rem;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--colour-muted);
  text-align: left;
}

.smart-workbench-stepper button:not(:disabled) {
  cursor: pointer;
}

.smart-workbench-stepper button:not(:disabled):hover,
.smart-workbench-stepper button:focus-visible,
.smart-workbench-stepper li.is-viewed button {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}

.smart-workbench-stepper button:disabled {
  opacity: 0.52;
}

.smart-step__number {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentcolor;
  border-radius: 50%;
  font-size: var(--font-size-12);
  font-weight: 700;
}

[data-step-state="complete"] .smart-step__number,
.is-viewed .smart-step__number {
  border-color: var(--colour-selection-border);
  background: var(--colour-selection);
  color: var(--colour-bg);
}

.smart-step__copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.smart-step__copy strong {
  font-size: var(--font-size-14);
}

.smart-step__copy small {
  overflow: hidden;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-workbench-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  align-items: start;
}

.smart-source-dock {
  position: sticky;
  top: 8.75rem;
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
}

.smart-source-dock > summary {
  position: relative;
  display: grid;
  min-height: 4.75rem;
  gap: var(--space-1);
  padding: var(--space-4) calc(var(--space-4) + var(--space-8)) var(--space-4)
    var(--space-4);
  cursor: pointer;
  list-style: none;
}

.smart-source-dock > summary::after {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  color: var(--colour-action-text);
  content: "+";
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
}

.smart-source-dock[open] > summary::after {
  content: "−";
}

.smart-source-dock > summary::-webkit-details-marker {
  display: none;
}

.smart-source-dock > summary strong,
.smart-source-dock > summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-source-dock > summary strong {
  font-size: var(--font-size-14);
}

.smart-source-dock > summary small {
  color: var(--colour-muted);
}

.smart-source-dock__body {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.smart-source-dock .workbench-player {
  width: min(100%, 14rem);
  min-height: 0;
  max-height: 25rem;
  justify-self: center;
  margin-top: var(--space-3);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-card);
}

.smart-source-dock .workbench-player iframe,
.smart-source-dock .workbench-player video,
.smart-source-dock .workbench-player img {
  min-height: 0;
}

.smart-source-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--colour-border);
}

.smart-source-metrics > span {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.smart-source-metrics > span + span {
  border-left: 1px solid var(--colour-border);
}

.smart-source-metrics small,
.smart-opportunity small,
.smart-brief-grid small {
  color: var(--colour-info);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.smart-opportunity {
  padding: var(--space-3);
  border-top: 1px solid var(--colour-selection-border);
  background: var(--colour-selection-wash);
}

.smart-opportunity p {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-14);
  line-height: 1.45;
}

.smart-creator-brief,
.smart-source-evidence,
.smart-analysis-notes {
  border-top: 1px solid var(--colour-border);
}

.smart-creator-brief > summary,
.smart-source-evidence > summary,
.smart-analysis-notes > summary {
  min-height: 2.75rem;
  padding-block: var(--space-3);
  cursor: pointer;
  color: var(--colour-action-text);
  font-weight: 700;
}

.smart-creator-brief dl,
.smart-brief-grid {
  display: grid;
  gap: var(--space-3);
}

.smart-creator-brief dl {
  margin: 0 0 var(--space-3);
}

.smart-creator-brief dl > div {
  display: grid;
  gap: var(--space-1);
}

.smart-creator-brief dt {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.smart-creator-brief dd {
  margin: 0;
  font-size: var(--font-size-14);
}

.smart-source-evidence .workbench-audience {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

.smart-source-evidence article {
  padding: var(--space-2) 0;
}

.smart-source-evidence p {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-12);
}

.smart-workbench-canvas {
  min-width: 0;
}

.smart-workbench-stage {
  min-width: 0;
  scroll-margin-top: 7.5rem;
}

.smart-stage-heading {
  max-width: 58rem;
  margin-bottom: var(--space-6);
}

.smart-stage-heading h2 {
  max-width: 22ch;
  margin: var(--space-1) 0 var(--space-2);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.smart-stage-heading p:last-child {
  max-width: 68ch;
  margin: 0;
  color: var(--colour-muted);
}

.smart-stage-heading--split {
  display: flex;
  max-width: none;
  gap: var(--space-5);
  justify-content: space-between;
  align-items: end;
}

.smart-brief-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smart-brief-grid article {
  display: grid;
  gap: var(--space-2);
  min-height: 8rem;
  padding: var(--space-4);
  border-top: 1px solid var(--colour-border-strong);
  background: var(--colour-raised);
}

.smart-analysis-notes {
  margin-top: var(--space-5);
}

.smart-analysis-notes ul {
  display: grid;
  gap: var(--space-2);
  padding-left: calc(var(--space-4) + var(--space-1));
}

.smart-finished-route {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--colour-border-strong);
}

.smart-finished-route strong {
  font-size: var(--font-size-20);
}

.smart-finished-route p {
  max-width: 58ch;
  margin: var(--space-1) 0 0;
  color: var(--colour-muted);
}

.smart-workbench .workbench-directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.smart-workbench .workbench-direction {
  min-height: 25rem;
  padding: 0;
  border-color: var(--colour-border);
  background: var(--colour-raised);
  transition:
    transform 140ms ease,
    border-color 140ms ease;
}

.smart-workbench .workbench-direction:hover {
  transform: translateY(-2px);
  border-color: var(--colour-border-strong);
}

.smart-workbench .workbench-direction.is-primary {
  border-color: var(--colour-selection-border);
  box-shadow: inset 0 3px 0 var(--colour-selection);
}

.smart-workbench .workbench-direction__select {
  gap: var(--space-3);
  padding: var(--space-5);
}

.smart-workbench .workbench-direction__select > strong {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -0.02em;
}

.smart-workbench .workbench-direction__hook {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--colour-selection) 40%, transparent);
  border-radius: 0;
  background: var(--colour-selection-wash);
  color: var(--colour-text);
  font-size: var(--font-size-18);
  font-weight: 780;
  line-height: 1.32;
}

.smart-workbench .workbench-direction__hook small,
.smart-workbench [data-direction-spine] small {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--colour-info);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.smart-workbench .workbench-direction__controls {
  padding: 0 var(--space-4) var(--space-4);
}

.smart-decision-shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
  box-shadow: var(--shadow-panel);
}

.smart-decision-shelf > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.smart-decision-shelf small {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.smart-decision-shelf strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-decision-shelf > small {
  grid-column: 1 / 3;
}

.smart-workbench .workbench-regenerate {
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--colour-border);
  border-radius: 0;
  background: transparent;
}

.smart-understand-form,
.smart-workbench .workbench-controls[data-develop-form] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  max-width: 52rem;
  padding: clamp(var(--space-4), 4vw, var(--space-7));
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
}

.smart-intent-primary textarea {
  min-height: 7rem;
  font-size: var(--font-size-16);
}

.smart-understand-form label > span {
  color: var(--colour-muted);
  font-weight: 500;
}

.smart-understand-form textarea,
.smart-workbench textarea {
  resize: vertical;
}

.smart-guardrails,
.smart-generation-settings {
  border-top: 1px solid var(--colour-border);
}

.smart-guardrails > summary,
.smart-generation-settings > summary {
  min-height: 2.75rem;
  padding-block: var(--space-3);
  cursor: pointer;
  color: var(--colour-action-text);
  font-weight: 700;
}

.smart-guardrails__fields,
.smart-generation-settings__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.smart-paid-action {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border-strong);
}

.smart-paid-action p {
  margin: var(--space-1) 0 0;
}

.smart-source-assist,
.smart-local-note {
  max-width: 52rem;
  font-size: var(--font-size-12);
}

.smart-workbench .workbench-detail {
  display: grid;
  gap: var(--space-4);
}

.smart-workbench .workbench-detail > .ui-section__header {
  padding: var(--space-4);
  border-top: 1px solid var(--colour-border-strong);
  background: var(--colour-raised);
}

.smart-workbench .workbench-detail > .ui-section__header h3 {
  margin: var(--space-1) 0;
  font-size: var(--font-size-24);
}

.smart-workbench .workbench-detail-grid,
.smart-workbench .workbench-fact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smart-workbench .workbench-development {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.smart-workbench .workbench-development > .inline-notice {
  max-width: 52rem;
}

.smart-workbench .workbench-production {
  margin-top: 0;
}

.smart-copy-workspace .workbench-pack-core {
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.45fr);
}

.smart-copy-slate {
  display: grid;
  gap: var(--space-5);
  max-width: 66rem;
}

.smart-copy-slate__intro {
  max-width: 46rem;
}

.smart-copy-slate__intro > strong {
  font-size: var(--font-size-20);
}

.smart-copy-slate__intro p {
  margin: var(--space-2) 0;
  color: var(--colour-muted);
}

.smart-copy-slate fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.smart-copy-slate legend {
  margin-bottom: var(--space-3);
  font-weight: 700;
}

.smart-copy-drafts {
  border-block: 1px solid var(--colour-border-strong);
}

.smart-copy-draft {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  cursor: pointer;
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.smart-copy-draft:last-child {
  border-bottom: 0;
}

.smart-copy-draft:hover {
  background: color-mix(in srgb, var(--colour-focus) 7%, transparent);
}

.smart-copy-draft:has(input:checked) {
  background: color-mix(in srgb, var(--colour-focus) 12%, var(--colour-raised));
  box-shadow: inset 3px 0 0 var(--colour-focus);
}

.smart-copy-draft:focus-within {
  outline: 2px solid var(--colour-focus);
  outline-offset: -2px;
}

.smart-copy-draft > input {
  grid-row: 1 / span 4;
  margin-top: var(--space-1);
  accent-color: var(--colour-focus);
}

.smart-copy-draft__heading {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.smart-copy-draft__text {
  grid-column: 2 / -1;
  white-space: pre-wrap;
  font-size: var(--font-size-18);
  font-weight: 700;
  line-height: 1.35;
}

.smart-copy-draft__meta {
  grid-column: 3;
  grid-row: 1;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  white-space: nowrap;
}

.smart-copy-draft__distinction,
.smart-copy-draft > small {
  grid-column: 2 / -1;
}

.smart-copy-draft__distinction {
  color: var(--colour-text);
}

.smart-copy-draft > small {
  color: var(--colour-muted);
}

.smart-publishing-review {
  margin-top: var(--space-5);
  border-top: 1px solid var(--colour-border-strong);
  padding-top: var(--space-4);
}

.smart-publishing-review summary {
  min-height: 2.75rem;
  cursor: pointer;
}

.smart-publishing-review > summary {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-weight: 700;
  list-style: none;
}

.smart-publishing-review > summary::-webkit-details-marker {
  display: none;
}

.smart-publishing-review > summary::after {
  content: "›";
  color: var(--colour-muted);
  font-size: var(--font-size-20);
  transition: transform 140ms ease;
}

.smart-publishing-review[open] > summary::after {
  transform: rotate(90deg);
}

.smart-publishing-review > summary small {
  margin-left: auto;
  color: var(--colour-muted);
  font-weight: 500;
}

.smart-publishing-review summary:focus-visible {
  border-radius: var(--radius-control);
  outline: 2px solid var(--colour-focus);
  outline-offset: 2px;
}

.smart-publishing-review__decisions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.smart-publishing-review__decisions article {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding-left: var(--space-3);
  border-left: 2px solid var(--colour-focus);
}

.smart-publishing-review__decisions small {
  color: var(--colour-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.smart-publishing-review__decisions p {
  margin: 0;
  color: var(--colour-muted);
}

.smart-publishing-review__candidates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.smart-publishing-review__candidates ul {
  padding-left: var(--space-5);
}

.smart-publishing-review__candidates li + li {
  margin-top: var(--space-2);
}

.smart-finish-complete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(
        90deg,
        var(--colour-horizon-cobalt),
        var(--colour-horizon-violet),
        var(--colour-horizon-rose)
      )
      top / 100% 2px no-repeat,
    color-mix(in srgb, var(--colour-raised-2) 72%, var(--colour-ground));
}

.smart-finish-complete[data-workbench-usage-state="used"] {
  background:
    linear-gradient(var(--colour-positive), var(--colour-positive)) top / 100%
      2px no-repeat,
    color-mix(in srgb, var(--colour-positive) 5%, var(--colour-raised));
}

.smart-finish-complete__copy {
  min-width: 0;
}

.smart-finish-complete__copy h3 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--font-size-28);
  line-height: 1;
}

.smart-finish-complete__copy > p {
  max-width: 68ch;
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
}

.smart-finish-complete__action {
  display: grid;
  min-width: min(100%, 13rem);
  gap: var(--space-2);
  justify-items: stretch;
}

.smart-finish-complete__action .button {
  min-height: 2.75rem;
}

.smart-finish-complete__action .action-status {
  max-width: 28ch;
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  text-align: right;
}

.smart-upcoming {
  max-width: 42rem;
  padding: var(--space-6);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-panel);
  color: var(--colour-muted);
}

.smart-upcoming strong {
  color: var(--colour-text);
}

.smart-upcoming p {
  margin-bottom: 0;
}

.smart-workbench .workbench-selection-bar {
  display: none;
}

@media (max-width: 63.99rem) {
  .smart-workbench-layout {
    grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr);
  }

  .smart-workbench .workbench-directions,
  .smart-workbench .workbench-detail-grid,
  .smart-workbench .workbench-fact-grid,
  .smart-copy-workspace .workbench-pack-core {
    grid-template-columns: minmax(0, 1fr);
  }

  .smart-publishing-review__decisions,
  .smart-publishing-review__candidates {
    grid-template-columns: minmax(0, 1fr);
  }

  .smart-finish-complete {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .smart-finish-complete__action {
    min-width: 0;
  }

  .smart-finish-complete__action .button {
    width: 100%;
  }

  .smart-finish-complete__action .action-status {
    max-width: none;
    text-align: left;
  }

  .smart-decision-shelf {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .smart-decision-shelf > small {
    grid-column: 1;
  }
}

@media (max-width: 47.49rem) {
  body:has(.smart-workbench) .app-shell {
    padding-inline: var(--space-3);
  }

  .smart-workbench {
    gap: var(--space-4);
  }

  .smart-copy-draft {
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: var(--space-3);
  }

  .smart-copy-draft__meta {
    grid-column: 2;
    grid-row: auto;
    white-space: normal;
  }

  .smart-workbench-chrome {
    top: var(--space-1);
    margin-inline: calc(var(--space-3) * -1);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .smart-workbench-stepper {
    border-radius: 0;
  }

  .smart-workbench-utilities {
    padding-inline: var(--space-3);
  }

  .smart-workbench-save-state small,
  .workbench-reset--persistent > summary small {
    display: none;
  }

  .smart-workbench-stepper ol {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(7.5rem, 1fr));
  }

  .smart-workbench-stepper button {
    min-height: 3.75rem;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .smart-step__number {
    width: 1.75rem;
    height: 1.75rem;
  }

  .smart-step__copy small {
    display: none;
  }

  .smart-workbench-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .smart-source-dock {
    position: static;
  }

  .smart-source-dock .workbench-player {
    width: min(100%, 11rem);
    max-height: 19.5rem;
  }

  .smart-stage-heading {
    margin-bottom: var(--space-4);
  }

  .smart-stage-heading--split,
  .smart-paid-action,
  .smart-finished-route {
    align-items: stretch;
    flex-direction: column;
  }

  .smart-finished-route .button {
    width: 100%;
  }

  .smart-stage-heading h2 {
    font-size: clamp(1.7rem, 9vw, 2.25rem);
  }

  .smart-brief-grid,
  .smart-workbench .workbench-directions,
  .smart-guardrails__fields,
  .smart-generation-settings__fields,
  .smart-workbench .workbench-detail-grid,
  .smart-workbench .workbench-fact-grid,
  .smart-copy-workspace .workbench-pack-core {
    grid-template-columns: minmax(0, 1fr);
  }

  .smart-workbench .workbench-direction {
    min-height: 0;
  }

  .smart-workbench .workbench-direction__select {
    padding: var(--space-4);
  }

  .smart-decision-shelf {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    box-shadow: 0 18px 48px var(--colour-shadow);
  }

  .smart-decision-shelf > div:nth-of-type(2),
  .smart-decision-shelf > small {
    display: none;
  }

  .smart-decision-shelf .button,
  .smart-paid-action .button {
    width: 100%;
  }

  .smart-understand-form,
  .smart-workbench .workbench-controls[data-develop-form] {
    padding: var(--space-4);
  }

  .smart-workbench .workbench-selection-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Live Idea Workbench: dense, source-led review surface. */
body:has(.workbench-page) .app-main {
  padding-block: var(--space-4) 0;
}

body:has(.workbench-page) .page-header {
  max-width: none;
  margin-bottom: var(--space-4);
}

body:has(.workbench-page) .page-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.workbench-page {
  min-width: 0;
  max-width: 100%;
  padding-bottom: calc(var(--space-16) + var(--space-4));
}

.workbench-page .ui-section {
  gap: var(--space-3);
  padding-block: var(--space-6);
}

.workbench-source > .card {
  gap: var(--space-3);
  padding: var(--space-4);
}

.workbench-source .card__header h2 {
  font-size: var(--font-size-20);
}

.workbench-page .workbench-source-layout {
  gap: var(--space-4);
  align-items: start;
}

.workbench-page .workbench-player {
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
}

.workbench-page .workbench-player iframe,
.workbench-page .workbench-player video,
.workbench-page .workbench-player img {
  min-height: 0;
}

.workbench-source .ui-stack {
  gap: var(--space-3);
}

.workbench-source .inline-notice,
.workbench-source .workbench-audience article {
  padding: var(--space-3);
}

.workbench-source .inline-notice p,
.workbench-source .workbench-audience p {
  margin-top: var(--space-1);
}

.workbench-page .workbench-directions {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.workbench-directions__state {
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  text-align: right;
}

.workbench-directions__state p {
  margin: 0;
}

.workbench-page .workbench-direction {
  min-height: 0;
  gap: var(--space-3);
  padding: var(--space-4);
}

.workbench-page .workbench-direction__select > strong {
  font-size: var(--font-size-20);
}

.workbench-direction__hook {
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--colour-selection) 46%, transparent);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: color-mix(in srgb, var(--colour-selection-wash) 62%, transparent);
}

.workbench-direction__signals {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.workbench-direction__signals > span {
  display: inline-grid;
  min-width: 0;
  gap: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-pill);
  background: var(--colour-raised-2);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  line-height: 1.35;
}

.workbench-direction__signals small {
  margin: 0;
  color: var(--colour-info);
  font-size: var(--font-size-11);
  letter-spacing: 0.04em;
}

.workbench-direction__action {
  margin-top: auto;
  color: var(--colour-info);
  font-weight: 700;
}

.workbench-selection-summary {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-2);
  border-block: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised-2) 54%, transparent);
}

.workbench-selection-summary > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}

.workbench-selection-summary > div + div {
  border-left: 1px solid var(--colour-border);
}

.workbench-selection-summary small {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.workbench-selection-summary strong {
  overflow-wrap: anywhere;
}

.workbench-selection-summary > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--colour-border);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.workbench-page .workbench-detail {
  scroll-margin-top: 5.5rem;
}

.workbench-page .workbench-detail-grid {
  gap: var(--space-4);
  align-items: start;
}

.workbench-copy-stage {
  align-self: start;
  min-height: 0;
  padding: calc(var(--space-4) + var(--space-1));
}

.workbench-copy-stage h3,
.workbench-copy-stage p,
.workbench-copy-stage pre,
.workbench-fact-grid h3,
.workbench-fact-grid p {
  margin: 0;
}

.workbench-copy-stage > strong {
  font-size: var(--font-size-16);
}

.workbench-copy-stage pre {
  margin-block: var(--space-3);
  font-size: 1.0625rem;
  line-height: 1.45;
}

.workbench-fact-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.workbench-fact-grid--production {
  margin-top: var(--space-4);
}

.workbench-page .workbench-fact-grid .card--compact {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  align-content: start;
  align-items: start;
  padding: var(--space-3);
}

.workbench-fact-grid h3 {
  font-size: var(--font-size-14);
  line-height: 1.3;
}

.workbench-fact-grid p {
  font-size: var(--font-size-14);
  line-height: 1.45;
}

.workbench-development {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
}

.workbench-development .inline-notice {
  padding: var(--space-3);
}

.workbench-development .inline-notice p {
  margin-top: var(--space-1);
}

.workbench-page .workbench-controls {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: 0;
}

.workbench-page .workbench-controls label {
  display: grid;
  gap: var(--space-1);
}

.workbench-page .workbench-controls [data-cost-note] {
  margin: 0;
}

.workbench-page .workbench-controls [data-action-progress],
.workbench-page .workbench-controls [data-action-status] {
  grid-column: 1 / -1;
}

.workbench-page .workbench-production {
  margin-top: var(--space-4);
}

.workbench-page .workbench-regenerate {
  padding-block: var(--space-3);
}

.workbench-regenerate > summary {
  cursor: pointer;
  color: var(--colour-action-text);
  font-weight: 700;
}

.workbench-regenerate__body {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.workbench-regenerate__body > p {
  margin: 0;
}

.workbench-reset {
  width: fit-content;
  max-width: 44rem;
  margin: calc(var(--space-2) * -1) 0 var(--space-2);
  color: var(--colour-muted);
}

.workbench-reset--persistent {
  position: relative;
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  margin: 0;
}

.workbench-reset--persistent > summary {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  color: var(--colour-text);
}

.workbench-reset--persistent > summary:hover,
.workbench-reset--persistent > summary:focus-visible,
.workbench-reset--persistent[open] > summary {
  border-color: var(--colour-selection-border);
  background: var(--colour-raised-2);
}

.workbench-reset--persistent .workbench-reset__body {
  position: absolute;
  z-index: 24;
  top: calc(100% + var(--space-2));
  right: 0;
  display: grid;
  width: min(34rem, calc(100vw - var(--space-6)));
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-panel);
  background: var(--colour-raised-2);
  box-shadow: 0 20px 48px var(--colour-shadow);
}

.workbench-reset--persistent .workbench-reset__body > strong {
  color: var(--colour-text);
  font-family: var(--font-display);
  font-size: var(--font-size-24);
  line-height: 1;
}

.workbench-reset > summary {
  display: inline-flex;
  min-height: 2.75rem;
  gap: var(--space-2);
  align-items: center;
  cursor: pointer;
  color: var(--colour-muted);
  font-weight: 700;
}

.workbench-reset > summary small {
  font-weight: 500;
}

.workbench-reset__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--colour-border);
}

.workbench-reset__body > p {
  max-width: 68ch;
  margin: 0;
}

.workbench-reset[data-open],
.workbench-reset[open] {
  width: min(100%, 44rem);
}

.workbench-reset.workbench-reset--persistent,
.workbench-reset.workbench-reset--persistent[open] {
  width: auto;
  max-width: none;
}

.workbench-reset.workbench-reset--persistent > summary {
  color: var(--colour-text);
}

@media (max-width: 47.49rem) {
  .workbench-reset.workbench-reset--persistent {
    position: static;
  }

  .workbench-reset--persistent .workbench-reset__body {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: auto;
    left: var(--space-3);
    width: calc(100vw - var(--space-6));
  }
}

.workbench-reset [data-reset-form][data-armed="true"] .button[type="submit"] {
  border-color: var(--colour-danger);
  color: var(--colour-danger);
}

.workbench-page .workbench-selection-bar {
  position: fixed;
  z-index: 30;
  right: auto;
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  width: min(62rem, calc(100% - var(--space-6)));
  min-height: 3.75rem;
  max-width: none;
  gap: var(--space-3);
  align-items: center;
  flex-direction: row;
  margin: 0;
  padding: var(--space-2);
  transform: translateX(-50%);
}

.workbench-selection-bar__summary {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-4);
  flex: 1;
  padding-left: var(--space-2);
}

.workbench-selection-bar__summary > span {
  min-width: 0;
}

.workbench-selection-bar__summary > small {
  grid-column: 1 / -1;
}

.workbench-selection-bar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-page .workbench-selection-bar .button {
  min-width: max-content;
  min-height: 2.75rem;
}

@media (min-width: 47.5rem) {
  .workbench-page .workbench-source-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
  }

  .workbench-page .workbench-player {
    width: min(100%, 13.5rem);
    max-height: 24rem;
    justify-self: center;
    aspect-ratio: 9 / 16;
  }

  .workbench-source .workbench-audience {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workbench-page .workbench-directions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .workbench-page .workbench-directions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workbench-page .workbench-detail-grid {
    grid-template-columns: minmax(20rem, 0.9fr) minmax(0, 1.1fr);
  }

  .workbench-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench-development {
    grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1.58fr);
    align-items: end;
  }

  .workbench-page .workbench-controls[data-develop-form] {
    grid-template-columns:
      minmax(10rem, 1.3fr) minmax(7rem, 0.7fr) auto
      minmax(13rem, auto);
  }

  .workbench-page .workbench-controls[data-regenerate-form] {
    grid-template-columns:
      minmax(9rem, 0.8fr) minmax(10rem, 1.2fr) minmax(7rem, 0.7fr)
      minmax(13rem, auto);
  }
}

@media (max-width: 47.49rem) {
  body:has(.workbench-page) .app-shell {
    padding-inline: var(--space-3);
  }

  body:has(.workbench-page) .page-header__description {
    font-size: var(--font-size-14);
  }

  .workbench-source > .card,
  .workbench-page .workbench-direction,
  .workbench-copy-stage,
  .workbench-development {
    padding: var(--space-3);
  }

  .workbench-directions-section .ui-section__header {
    align-items: start;
  }

  .workbench-directions__state {
    justify-items: start;
    text-align: left;
  }

  .workbench-direction__topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .workbench-direction__controls > .button {
    width: 100%;
  }

  .workbench-selection-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .workbench-selection-summary > div + div {
    border-top: 1px solid var(--colour-border);
    border-left: 0;
  }

  .workbench-selection-summary > p {
    grid-column: 1;
  }

  .workbench-selection-bar__summary {
    gap: 0 var(--space-2);
    padding-left: 0;
  }

  .workbench-selection-bar__summary small {
    font-size: 0.6875rem;
  }

  .workbench-selection-bar__summary strong {
    font-size: var(--font-size-12);
  }

  .workbench-page .workbench-selection-bar .button {
    max-width: 10.5rem;
    padding-inline: var(--space-3);
    font-size: var(--font-size-12);
  }
}

/* Final Smart Workbench precedence over retained legacy Workbench rules. */
body .smart-workbench {
  padding-bottom: var(--space-10);
}

body .smart-workbench .workbench-player {
  width: min(100%, 14rem);
  min-height: 0;
  max-height: 25rem;
  aspect-ratio: 9 / 16;
}

body .smart-workbench .workbench-directions,
body .smart-workbench .workbench-detail-grid,
body .smart-workbench .workbench-fact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .smart-workbench .workbench-controls[data-develop-form] {
  grid-template-columns: minmax(0, 1fr);
}

body .smart-workbench .workbench-selection-bar {
  display: none;
}

@media (max-width: 63.99rem) {
  body .smart-workbench .workbench-directions,
  body .smart-workbench .workbench-detail-grid,
  body .smart-workbench .workbench-fact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.49rem) {
  body .smart-workbench {
    padding-bottom: var(--space-8);
  }

  body .smart-workbench .workbench-player {
    width: min(100%, 11rem);
    max-height: 19.5rem;
  }

  body .smart-workbench .workbench-direction,
  body .smart-workbench .workbench-copy-stage,
  body .smart-workbench .workbench-development {
    padding: 0;
  }
}

/* Channel Engine Create: one channel-scoped production ledger. */
body:has(.ce-create) {
  min-width: 0;
  overflow-x: clip;
}

body:has(.ce-create) .app-shell {
  width: 100%;
  max-width: 96rem;
}

body:has(.ce-create) .app-main {
  padding-block: var(--space-6);
}

body:has(.ce-create) .page-header {
  margin-bottom: var(--space-6);
}

.ce-create-notice .inline-notice {
  border-left-width: 1px;
  background:
    linear-gradient(var(--colour-positive), var(--colour-positive)) top / 100%
      2px no-repeat,
    var(--colour-raised);
}

.ce-create {
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-feature);
  background: var(--colour-bg);
  box-shadow: 0 1.5rem 3.5rem -2rem var(--colour-shadow);
  font-variant-numeric: tabular-nums;
}

.ce-create__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, auto);
  align-items: end;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised);
}

.ce-create__header h2,
.ce-create-ledger__header h2,
.ce-create-row h3,
.ce-create-template h3,
.ce-create-ledger__empty h3,
.ce-create-ledger__unavailable h2 {
  text-wrap: balance;
}

.ce-create__header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-32);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ce-create__header p {
  max-width: 66ch;
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
}

.ce-create__header > div:last-child {
  display: grid;
  justify-items: end;
}

.ce-create__header > div:last-child span,
.ce-create__header > div:last-child small {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-create__header > div:last-child strong {
  margin-block: calc(var(--space-1) / 2);
  font-size: var(--font-size-14);
}

.ce-create__workspace {
  display: grid;
  min-height: 34rem;
  grid-template-columns: minmax(14rem, 0.24fr) minmax(0, 0.76fr);
}

.ce-create-queues {
  min-width: 0;
  border-right: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised) 78%, var(--colour-bg));
}

.ce-create-queues a {
  display: grid;
  min-height: 4.75rem;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-text);
  text-decoration: none;
  transition:
    background-color var(--motion-standard) cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow var(--motion-standard) cubic-bezier(0.16, 1, 0.3, 1);
}

.ce-create-queues a:hover {
  background: var(--colour-raised-2);
}

.ce-create-queues a[aria-current="page"] {
  background: var(--colour-raised-accent);
  box-shadow: inset 2px 0 var(--colour-horizon-cobalt);
}

.ce-create-queues svg,
.ce-create-ledger__empty svg,
.ce-create-row__media--missing svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ce-create-queues a > svg {
  color: var(--colour-muted);
}

.ce-create-queues a[aria-current="page"] > svg {
  color: var(--colour-focus);
}

.ce-create-queues a > span,
.ce-create-queues strong,
.ce-create-queues small {
  display: block;
  min-width: 0;
}

.ce-create-queues strong {
  font-size: var(--font-size-14);
}

.ce-create-queues small {
  margin-top: calc(var(--space-1) / 2);
  overflow: hidden;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  line-height: 1.3;
}

.ce-create-queues b {
  display: grid;
  min-width: 1.75rem;
  min-height: 1.75rem;
  place-items: center;
  padding-inline: var(--space-1);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-surface);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-create-ledger {
  min-width: 0;
  background: var(--colour-surface);
}

.ce-create-ledger__header {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-bg);
}

.ce-create-ledger__header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-24);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.ce-create-ledger__header p {
  max-width: 68ch;
  margin: var(--space-1) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-create-ledger__header > span {
  flex: 0 0 auto;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-create-ledger__body {
  display: grid;
}

.ce-create-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 7.5rem minmax(18rem, 1fr) minmax(14rem, 0.6fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-raised) 70%, var(--colour-bg));
  transition: background-color var(--motion-fast) ease-out;
}

.ce-create-row:hover {
  background: var(--colour-raised-2);
}

.ce-create-row__media {
  display: block;
  width: 7.5rem;
  min-height: 10.5rem;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--colour-soft-border);
  border-radius: var(--radius-control);
  background: var(--colour-media);
}

.ce-create-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ce-create-row__media--missing {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  color: var(--colour-muted);
}

.ce-create-row__media--missing small {
  max-width: 8ch;
  font-size: var(--font-size-12);
  text-align: center;
}

.ce-create-row__core {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--space-3);
}

.ce-create-row__topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3);
}

.ce-create-row__topline > div {
  min-width: 0;
}

.ce-create-row__topline span,
.ce-create-row__next > span,
.ce-create-row__action > span,
.ce-create-publication > span,
.ce-create-template > div:first-child > span,
.ce-create-ledger__unavailable > span {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.ce-create-row h3 {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--font-size-32);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ce-create-row__core > p {
  max-width: 58ch;
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
}

.ce-create-row__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.ce-create-row__facts div {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--colour-border);
}

.ce-create-row__facts dt {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-create-row__facts dd {
  margin: calc(var(--space-1) / 2) 0 0;
  overflow: hidden;
  font-size: var(--font-size-13);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ce-create-readiness {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.ce-create-readiness > span:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.ce-create-readiness strong,
.ce-create-readiness small {
  font-size: var(--font-size-12);
}

.ce-create-readiness small {
  color: var(--colour-muted);
  text-align: right;
}

.ce-create-readiness--ready strong {
  color: var(--colour-positive);
}

.ce-create-readiness--partial strong {
  color: var(--colour-caution);
}

.ce-create-readiness__track {
  display: block;
  height: 0.25rem;
  overflow: hidden;
  background: var(--colour-border);
}

.ce-create-readiness__track > span {
  display: block;
  height: 100%;
  background: var(--colour-caution);
}

.ce-create-readiness--ready .ce-create-readiness__track > span {
  background: var(--colour-positive);
}

.ce-create-row__outcome {
  display: grid;
  min-width: 0;
  align-content: space-between;
  gap: var(--space-4);
  padding-left: var(--space-4);
  border-left: 1px solid var(--colour-border);
}

.ce-create-publication,
.ce-create-row__next,
.ce-create-row__action {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.ce-create-publication strong,
.ce-create-row__next strong {
  font-size: var(--font-size-14);
  line-height: 1.3;
}

.ce-create-publication small,
.ce-create-row__deferred {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  line-height: 1.35;
}

.ce-create-publication--verified strong {
  color: var(--colour-positive);
}

.ce-create-publication--attested strong {
  color: var(--colour-caution);
}

.ce-create-publication a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-1);
  color: var(--colour-focus);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-decoration: none;
}

.ce-create-publication a:hover {
  color: var(--colour-text);
  text-decoration: underline;
}

.ce-create-publication a svg,
.ce-create-row__action .button svg {
  width: 1rem;
  height: 1rem;
}

.ce-create-row__action .button {
  width: 100%;
  justify-content: space-between;
}

.ce-create-row__action .action-status {
  margin: 0;
}

.ce-create-template {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--colour-raised);
}

.ce-create-template h3 {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--font-size-32);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ce-create-template > div:first-child p {
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
}

.ce-create-template .ce-boundary {
  grid-column: 1 / -1;
  margin: var(--space-4) 0 0;
}

.ce-create-ledger__empty,
.ce-create-ledger__unavailable {
  display: grid;
  min-height: 27rem;
  align-content: center;
  justify-content: center;
  padding: var(--space-8);
}

.ce-create-ledger__empty {
  grid-template-columns: auto minmax(0, 34rem);
  gap: var(--space-4);
}

.ce-create-ledger__empty > svg {
  color: var(--colour-muted);
}

.ce-create-ledger__empty h3,
.ce-create-ledger__unavailable h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-32);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ce-create-ledger__empty p,
.ce-create-ledger__unavailable > p {
  max-width: 58ch;
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
}

.ce-create-ledger__unavailable {
  justify-items: start;
}

.ce-create-ledger__unavailable h2 {
  max-width: 15ch;
  margin-top: var(--space-2);
  font-size: var(--font-size-48);
}

.ce-create-ledger__unavailable .ce-boundary {
  max-width: 44rem;
  margin: var(--space-8) 0 0;
}

.ce-create__truth {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--colour-border);
  background: var(--colour-bg);
  font-size: var(--font-size-12);
}

.ce-create__truth strong {
  color: var(--colour-caution);
}

.ce-create__truth span {
  color: var(--colour-muted);
}

@media (max-width: 63.99rem) {
  .ce-create__workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-create-queues {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--colour-border);
  }

  .ce-create-queues a {
    min-height: 4.5rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    border-right: 1px solid var(--colour-border);
    border-bottom: 0;
    padding-inline: var(--space-3);
  }

  .ce-create-queues a[aria-current="page"] {
    box-shadow: inset 0 -2px var(--colour-horizon-cobalt);
  }

  .ce-create-queues small {
    display: none;
  }
}

@media (max-width: 47.49rem) {
  body:has(.ce-create) .app-shell {
    padding-inline: var(--space-3);
  }

  .ce-create__header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .ce-create__header > div:last-child {
    justify-items: start;
  }

  .ce-create-queues {
    display: flex;
    overflow-x: auto;
  }

  .ce-create-queues a {
    min-width: 8rem;
  }

  .ce-create-ledger__header {
    align-items: start;
  }

  .ce-create-row {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .ce-create-row__media {
    width: 5.25rem;
    min-height: 9.25rem;
  }

  .ce-create-row__topline {
    display: grid;
  }

  .ce-create-row h3 {
    font-size: var(--font-size-24);
  }

  .ce-create-row__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .ce-create-row__outcome {
    grid-column: 1 / -1;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--colour-border);
    border-left: 0;
  }

  .ce-create-template {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .ce-create-template .ce-boundary {
    grid-column: 1;
  }

  .ce-create__truth {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-create-queues a,
  .ce-create-row {
    transition: none;
  }
}

/* Channel Engine: Ranking-first assembly studio */

body:has(.ce-ranking-studio) .app-shell {
  width: 100%;
  max-width: 100rem;
}

body:has(.ce-ranking-studio) .app-main {
  padding-block: var(--space-3);
}

body:has(.ce-ranking-studio) .status-strip {
  display: none;
}

body:has(.ce-ranking-studio) .page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--space-5);
  max-width: none;
  margin-bottom: var(--space-3);
}

body:has(.ce-ranking-studio) .page-header h1 {
  margin: 0;
  font-size: var(--font-size-40);
}

.ce-ranking-studio {
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-feature);
  background: var(--colour-bg);
  box-shadow: 0 1.5rem 3.5rem -2rem var(--colour-shadow);
  font-variant-numeric: tabular-nums;
}

.ce-ranking-studio button,
.ce-ranking-studio input,
.ce-ranking-studio textarea {
  accent-color: var(--colour-horizon-cobalt);
}

.ce-ranking-studio__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised);
}

.ce-ranking-studio__draft,
.ce-ranking-studio__header h2,
.ce-ranking-studio__header p,
.ce-rank-sources h2,
.ce-rank-sources p,
.ce-rank-assembly h2,
.ce-rank-assembly h3,
.ce-rank-assembly p,
.ce-rank-preview h2,
.ce-rank-preview p,
.ce-ranking-studio__truth strong,
.ce-ranking-studio__truth span {
  margin: 0;
}

.ce-ranking-studio__draft {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--colour-caution);
  font-size: var(--font-size-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ce-ranking-studio__header h2,
.ce-rank-assembly > header h2,
.ce-rank-preview > header h2,
.ce-rank-sources > header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-wrap: balance;
}

.ce-ranking-studio__header h2 {
  font-size: var(--font-size-28);
}

.ce-ranking-studio__header p {
  margin-top: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.ce-ranking-studio__global {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}

.ce-ranking-studio__global > label,
.ce-ranking-studio__global > span {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.ce-ranking-studio__global > label {
  cursor: pointer;
}

.ce-ranking-studio__global svg,
.ce-rank-sources svg,
.ce-rank-cut svg,
.ce-rank-preview svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.ce-ranking-studio__global > label > span,
.ce-ranking-studio__global > span > span {
  display: grid;
  gap: var(--space-1);
}

.ce-ranking-studio__global strong,
.ce-ranking-studio__global small {
  line-height: 1.15;
}

.ce-ranking-studio__global small {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-ranking-studio__global b {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-ranking-studio__bench {
  display: grid;
  grid-template-columns: minmax(13.5rem, 0.68fr) minmax(32rem, 1.7fr) minmax(
      17rem,
      0.72fr
    );
  height: 35rem;
}

.ce-rank-sources,
.ce-rank-preview {
  min-width: 0;
  background: var(--colour-raised);
}

.ce-rank-sources {
  overflow-y: auto;
  border-right: 1px solid var(--colour-border);
}

.ce-rank-tool-panel > header,
.ce-rank-assembly > header,
.ce-rank-preview > header {
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}

.ce-rank-tool-panel > header {
  justify-content: flex-start;
}

.ce-rank-tool-panel > header > span {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  color: var(--colour-info);
}

.ce-rank-tool-panel > header h2,
.ce-rank-assembly > header h2,
.ce-rank-preview > header h2 {
  font-size: var(--font-size-24);
}

.ce-rank-tool-panel > header p,
.ce-rank-assembly > header p,
.ce-rank-preview > header p {
  margin-top: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.35;
}

.ce-rank-tool-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-canvas);
}

.ce-rank-tool-tabs button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--colour-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-12);
  font-weight: 700;
}

.ce-rank-tool-tabs button:hover {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}

.ce-rank-tool-tabs button[aria-selected="true"] {
  border-color: var(--colour-border-strong);
  background: var(--colour-raised);
  box-shadow: inset 0 -2px 0 var(--colour-horizon-cobalt);
  color: var(--colour-text);
}

.ce-rank-tool-tabs button:focus-visible {
  outline: 2px solid var(--colour-focus);
  outline-offset: 1px;
}

.ce-rank-tool-tabs svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ce-rank-tool-panel[hidden] {
  display: none;
}

.ce-rank-source-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--colour-border);
}

.ce-rank-source-tabs button {
  min-height: 2.75rem;
  padding: var(--space-2);
  border: 0;
  border-right: 1px solid var(--colour-border);
  background: transparent;
  color: var(--colour-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-11);
  font-weight: 700;
}

.ce-rank-source-tabs button:last-child {
  border-right: 0;
}

.ce-rank-source-tabs button[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--colour-horizon-cobalt);
  color: var(--colour-text);
}

.ce-rank-source-panel {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  max-height: calc(35rem - 7rem);
  overflow-y: auto;
  padding: var(--space-3);
}

.ce-rank-source-panel[hidden] {
  display: none;
}

.ce-rank-source {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--colour-border);
}

.ce-rank-source img {
  width: 3rem;
  height: 4rem;
  grid-row: 1 / span 2;
  border-radius: var(--radius-control);
  object-fit: cover;
}

.ce-rank-source > div,
.ce-rank-pasted-source > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.ce-rank-source span,
.ce-rank-pasted-source span {
  color: var(--colour-info);
  font-size: var(--font-size-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ce-rank-source strong,
.ce-rank-pasted-source strong {
  overflow: hidden;
  font-size: var(--font-size-12);
  line-height: 1.3;
  text-overflow: ellipsis;
}

.ce-rank-source small,
.ce-rank-pasted-source small {
  overflow: hidden;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.3;
  text-overflow: ellipsis;
}

.ce-rank-source button,
.ce-rank-pasted-source button {
  min-height: 2.75rem;
  grid-column: 2;
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colour-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-11);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--colour-horizon-cobalt);
  text-underline-offset: 0.25rem;
}

.ce-rank-source-boundary,
.ce-rank-source-empty {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.45;
}

.ce-rank-url-form {
  display: grid;
  gap: var(--space-3);
}

.ce-rank-url-form > label,
.ce-rank-inspector label {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 700;
}

.ce-rank-url-form > div:first-of-type {
  display: grid;
  gap: var(--space-2);
}

.ce-rank-url-form input,
.ce-rank-inspector input,
.ce-rank-inspector textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  background: var(--colour-bg);
  color: var(--colour-text);
  font: inherit;
  font-size: var(--font-size-12);
}

.ce-rank-url-form input,
.ce-rank-inspector input {
  padding: 0 var(--space-3);
}

.ce-rank-inspector textarea {
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

.ce-rank-url-form p {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.45;
}

.ce-rank-pasted-source {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.ce-rank-pasted-source button {
  grid-column: 1;
}

.ce-rank-style {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--colour-canvas);
}

.ce-rank-style > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-2);
}

.ce-rank-style h3,
.ce-rank-style p {
  margin: 0;
}

.ce-rank-style h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-20);
  font-weight: 600;
}

.ce-rank-style > header p,
.ce-rank-style > header > span,
.ce-rank-style label,
.ce-rank-style legend {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 700;
}

.ce-rank-style > header > span {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ce-rank-style__fonts {
  display: grid;
  gap: var(--space-2);
}

.ce-rank-style__fonts label {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.ce-rank-style select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  background: var(--colour-bg);
  color: var(--colour-text);
  font-size: var(--font-size-11);
}

.ce-rank-style__base-colours,
.ce-rank-style__rank-colours {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.ce-rank-style__base-colours label,
.ce-rank-style__rank-colours label {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}

.ce-rank-style input[type="color"] {
  width: 100%;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: var(--space-1);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  background: var(--colour-bg);
  cursor: pointer;
}

.ce-rank-style fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ce-rank-style legend {
  margin-bottom: var(--space-2);
}

.ce-rank-style__rank-colours {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ce-rank-style .action-status {
  min-height: 1rem;
  font-size: var(--font-size-11);
}

.ce-rank-assembly {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--colour-bg);
}

.ce-rank-assembly > header p strong {
  color: var(--colour-text);
}

.ce-rank-assembly ol {
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ce-rank-entry {
  border-bottom: 1px solid var(--colour-border);
}

.ce-rank-entry.is-selected {
  background: color-mix(in srgb, var(--colour-horizon-cobalt) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--colour-horizon-cobalt);
}

.ce-rank-entry__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.ce-rank-entry__select {
  display: grid;
  min-width: 0;
  min-height: 3.5rem;
  grid-template-columns: 2.5rem 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.ce-rank-entry__rank {
  color: var(--colour-text);
  font-family: var(--font-display);
  font-size: var(--font-size-24);
  font-weight: 600;
  text-align: center;
}

.ce-rank-entry__select img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-control);
  object-fit: cover;
}

.ce-rank-entry__copy {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
}

.ce-rank-entry__copy strong {
  overflow: hidden;
  font-size: var(--font-size-13);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ce-rank-entry__copy small {
  grid-column: 1;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-rank-entry__copy em {
  overflow: hidden;
  grid-column: 1 / -1;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-style: normal;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ce-rank-entry__moves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  border-left: 1px solid var(--colour-border);
}

.ce-rank-entry__moves button {
  display: grid;
  width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  border: 0;
  border-right: 1px solid var(--colour-border);
  background: transparent;
  color: var(--colour-muted);
  cursor: pointer;
}

.ce-rank-entry__moves button:last-child {
  border-right: 0;
}

.ce-rank-entry__moves button:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.ce-rank-entry__moves svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.ce-rank-cut {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3) 0 var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised-2);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-rank-cut > span,
.ce-rank-cut label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.ce-rank-cut label {
  min-height: 2.75rem;
  cursor: pointer;
}

.ce-rank-cut label span {
  overflow: hidden;
  max-width: 30rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ce-ranking-studio.is-voiceover-muted .ce-rank-cut {
  opacity: 0.42;
}

.ce-rank-inspector {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1.6fr)
    minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised);
}

.ce-rank-inspector > header {
  display: flex;
  grid-column: 1 / -1;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.ce-rank-inspector > header span,
.ce-rank-inspector > header small {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ce-rank-inspector > header h3 {
  margin-top: var(--space-1);
  font-size: var(--font-size-16);
}

.ce-rank-inspector > label,
.ce-rank-trim label,
.ce-rank-voiceover-field {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.ce-rank-inspector > label > input {
  height: 2.75rem;
}

.ce-rank-trim {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: var(--space-2);
}

.ce-rank-trim legend {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 700;
}

.ce-rank-trim legend strong {
  color: var(--colour-text);
  font-size: var(--font-size-11);
  font-variant-numeric: tabular-nums;
}

.ce-rank-trim__rail {
  position: relative;
  height: 2.75rem;
  touch-action: none;
}

.ce-rank-trim__rail > span {
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  left: 0;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--colour-border-strong);
}

.ce-rank-trim__rail .ce-rank-trim__selection {
  right: calc(100% - var(--trim-end));
  left: var(--trim-start);
  background: var(--colour-horizon-cobalt);
}

.ce-rank-trim__rail input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.ce-rank-trim__rail input[type="range"]:active,
.ce-rank-trim__rail input[type="range"]:focus-visible {
  z-index: 4;
}

.ce-rank-trim__rail input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.ce-rank-trim__rail input[type="range"]::-webkit-slider-thumb {
  width: 44px;
  height: 44px;
  margin-top: -20px;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--colour-text) 0 7px,
    var(--colour-bg) 7px 9px,
    transparent 9px
  );
  box-shadow: none;
  cursor: ew-resize;
  filter: drop-shadow(0 2px 4px var(--colour-shadow));
  pointer-events: auto;
  transition:
    filter var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.ce-rank-trim__rail input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
}

.ce-rank-trim__rail input[type="range"]::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--colour-text) 0 7px,
    var(--colour-bg) 7px 9px,
    transparent 9px
  );
  box-shadow: none;
  cursor: ew-resize;
  filter: drop-shadow(0 2px 4px var(--colour-shadow));
  pointer-events: auto;
  transition:
    filter var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.ce-rank-trim__rail input[type="range"]:hover::-webkit-slider-thumb {
  background: radial-gradient(
    circle,
    var(--colour-focus) 0 7px,
    var(--colour-bg) 7px 9px,
    transparent 9px
  );
  transform: scale(1.12);
}

.ce-rank-trim__rail input[type="range"]:hover::-moz-range-thumb {
  background: radial-gradient(
    circle,
    var(--colour-focus) 0 7px,
    var(--colour-bg) 7px 9px,
    transparent 9px
  );
  transform: scale(1.12);
}

.ce-rank-trim__rail input[type="range"]:focus-visible::-webkit-slider-thumb {
  background: radial-gradient(
    circle,
    var(--colour-focus) 0 7px,
    var(--colour-bg) 7px 9px,
    transparent 9px 12px,
    var(--colour-focus) 12px 14px,
    transparent 14px
  );
  transform: scale(1.12);
}

.ce-rank-trim__rail input[type="range"]:focus-visible::-moz-range-thumb {
  background: radial-gradient(
    circle,
    var(--colour-focus) 0 7px,
    var(--colour-bg) 7px 9px,
    transparent 9px 12px,
    var(--colour-focus) 12px 14px,
    transparent 14px
  );
  transform: scale(1.12);
}

.ce-rank-trim__rail input[type="range"]:focus-visible {
  outline: 0;
}

.ce-rank-trim.is-duration-unavailable .ce-rank-trim__rail {
  opacity: 0.42;
}

.ce-rank-trim__readouts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: var(--space-2);
}

.ce-rank-trim__readouts label:last-child span {
  text-align: right;
}

.ce-rank-trim__readouts > span {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-variant-numeric: tabular-nums;
}

.ce-rank-trim__readouts > span strong {
  color: var(--colour-text);
}

.ce-rank-voiceover-field {
  grid-column: 3;
}

.ce-rank-voiceover-field textarea {
  height: 2.75rem;
  resize: none;
}

.ce-rank-inspector .action-status {
  min-height: 1rem;
  grid-column: 1 / -1;
  font-size: var(--font-size-11);
}

.ce-rank-timeline {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.ce-rank-timeline > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.ce-rank-timeline h3 {
  font-size: var(--font-size-14);
}

.ce-rank-timeline p {
  margin-top: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-rank-timeline__track {
  display: flex;
  min-height: 3rem;
  align-items: stretch;
  gap: var(--space-1);
}

.ce-rank-timeline__track button {
  display: flex;
  min-width: 2.8rem;
  flex: var(--clip-weight) 1 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-text);
  cursor: pointer;
  font: inherit;
}

.ce-rank-timeline__track button:first-child {
  border-color: var(--colour-horizon-cobalt);
}

.ce-rank-timeline__track button span {
  font-weight: 700;
}

.ce-rank-timeline__track button small {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-rank-timeline__track i {
  display: grid;
  width: 1.2rem;
  place-items: center;
  color: var(--colour-caution);
  font-size: var(--font-size-11);
  font-style: normal;
  font-weight: 900;
  writing-mode: vertical-rl;
}

.ce-rank-preview {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  border-left: 1px solid var(--colour-border);
}

.ce-rank-preview > header > span {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-pill);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 700;
  text-transform: uppercase;
}

.ce-rank-phone {
  position: relative;
  container-type: inline-size;
  width: auto;
  max-width: calc(100% - var(--space-6));
  height: min(20rem, calc(100% - var(--space-4)));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  margin: var(--space-2) auto;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-panel);
  background: var(--colour-bg);
  box-shadow: 0 1rem 2.5rem -1.5rem var(--colour-shadow);
}

.ce-rank-phone img,
.ce-rank-phone__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ce-rank-phone img {
  object-fit: cover;
  transition:
    opacity 180ms ease-out,
    transform 300ms ease-out;
}

.ce-rank-phone__shade {
  background: linear-gradient(
    180deg,
    var(--colour-ranking-shade-top) 30%,
    var(--colour-ranking-shade-bottom) 100%
  );
}

.ce-rank-phone > h3,
.ce-rank-phone__ladder,
.ce-rank-phone > small {
  position: absolute;
  z-index: 1;
}

.ce-rank-phone > h3 {
  top: 5%;
  right: 5%;
  left: 5%;
  margin: 0;
  color: var(--ranking-headline-colour);
  font-size: clamp(0.65rem, 7cqi, 1.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  paint-order: stroke fill;
  text-align: center;
  text-shadow: 0 1px 0 var(--ranking-outline-colour);
  text-transform: uppercase;
  text-wrap: balance;
  -webkit-text-stroke: clamp(0.7px, 0.58cqi, 1.3px)
    var(--ranking-outline-colour);
}

.ce-rank-phone > h3 span,
.ce-rank-phone > h3 strong {
  display: inline;
}

.ce-rank-phone > h3 strong {
  display: inline;
  margin-left: 0.18em;
  color: var(--ranking-accent-colour);
  font: inherit;
}

.ce-rank-phone[data-headline-font="anton"] > h3,
.ce-rank-phone[data-rank-font="anton"] .ce-rank-phone__ladder b,
.ce-rank-phone[data-entry-font="anton"] .ce-rank-phone__ladder span {
  font-family: var(--font-ranking-impact);
}

.ce-rank-phone[data-headline-font="barlow_condensed"] > h3,
.ce-rank-phone[data-rank-font="barlow_condensed"] .ce-rank-phone__ladder b,
.ce-rank-phone[data-entry-font="barlow_condensed"] .ce-rank-phone__ladder span {
  font-family: var(--font-display);
}

.ce-rank-phone[data-headline-font="bungee"] > h3,
.ce-rank-phone[data-rank-font="bungee"] .ce-rank-phone__ladder b,
.ce-rank-phone[data-entry-font="bungee"] .ce-rank-phone__ladder span {
  font-family: var(--font-ranking-arcade);
}

.ce-rank-phone__ladder {
  top: 25%;
  right: 5%;
  left: 8%;
  display: grid;
  gap: min(0.8cqi, var(--space-1));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ce-rank-phone__ladder li {
  display: grid;
  min-height: clamp(1.3rem, 12cqi, 2.6rem);
  grid-template-columns: clamp(1.2rem, 10.5cqi, 2.2rem) minmax(0, 1fr);
  align-items: center;
  gap: min(1.6cqi, var(--space-2));
}

.ce-rank-phone__ladder b,
.ce-rank-phone__ladder span {
  paint-order: stroke fill;
  text-shadow: 0 1px 0 var(--ranking-outline-colour);
  -webkit-text-stroke: clamp(0.65px, 0.56cqi, 1.2px)
    var(--ranking-outline-colour);
}

.ce-rank-phone__ladder b {
  color: var(--rank-colour);
  font-size: clamp(0.72rem, 7.5cqi, 1.5rem);
  font-weight: 400;
  line-height: 1;
}

.ce-rank-phone__ladder span {
  overflow: hidden;
  color: var(--colour-overlay-text);
  font-size: clamp(0.48rem, 4.5cqi, 0.95rem);
  font-weight: 600;
  line-height: 1.05;
  opacity: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  transform: translateX(calc(var(--space-1) * -1));
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-standard) cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.ce-rank-phone__ladder li.is-active span {
  opacity: 1;
  transform: translateX(0);
}

.ce-rank-phone > small {
  right: 7%;
  bottom: 4%;
  color: color-mix(in srgb, var(--colour-text) 72%, transparent);
  font-size: clamp(0.42rem, 3.7cqi, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ce-rank-preview__transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}

.ce-rank-preview__transport .button {
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  font-size: var(--font-size-11);
}

.ce-rank-preview__steps {
  display: flex;
  gap: var(--space-1);
}

.ce-rank-preview__transport > span {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
}

.ce-rank-preview__transport small {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-rank-preview__build {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.ce-rank-preview__build > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ce-rank-preview__build > div > span {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  color: var(--colour-caution);
}

.ce-rank-preview__build p {
  display: grid;
  gap: var(--space-1);
}

.ce-rank-preview__build small {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.4;
}

.ce-rank-preview__build .action-status {
  min-height: 0;
  font-size: var(--font-size-11);
}

.ce-ranking-studio__truth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--colour-border);
  background: var(--colour-raised);
}

.ce-ranking-studio__truth strong {
  color: var(--colour-positive);
  font-size: var(--font-size-12);
}

.ce-ranking-studio__truth span {
  max-width: 72ch;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  text-align: right;
}

.ce-create-format-boundary {
  display: grid;
  max-width: 52rem;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-feature);
  background:
    linear-gradient(
        90deg,
        var(--colour-horizon-cobalt),
        var(--colour-horizon-violet),
        var(--colour-horizon-rose)
      )
      top / 100% 2px no-repeat,
    var(--colour-raised);
}

.ce-create-format-boundary > span {
  color: var(--colour-caution);
  font-size: var(--font-size-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ce-create-format-boundary h2,
.ce-create-format-boundary p {
  margin: 0;
}

.ce-create-format-boundary h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-40);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-wrap: balance;
}

.ce-create-format-boundary p {
  max-width: 68ch;
  color: var(--colour-muted);
  line-height: 1.6;
}

.ce-create-format-boundary .button {
  justify-self: start;
}

@media (max-width: 80rem) {
  .ce-ranking-studio__bench {
    grid-template-columns: minmax(12rem, 0.6fr) minmax(28rem, 1.5fr) minmax(
        15rem,
        0.7fr
      );
  }

  .ce-ranking-studio__global small,
  .ce-rank-entry__copy em {
    display: none;
  }

  .ce-rank-phone {
    width: min(12rem, calc(100% - var(--space-5)));
  }
}

@media (max-width: 66rem) {
  .ce-ranking-studio__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-ranking-studio__global {
    flex-wrap: wrap;
  }

  .ce-ranking-studio__bench {
    height: auto;
    grid-template-columns: 13.5rem minmax(0, 1fr);
  }

  .ce-rank-sources,
  .ce-rank-assembly,
  .ce-rank-preview {
    min-height: 35rem;
  }

  .ce-rank-preview {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 1fr);
    border-top: 1px solid var(--colour-border);
    border-left: 0;
  }

  .ce-rank-preview > header {
    grid-column: 1 / -1;
  }

  .ce-rank-phone {
    grid-row: 2 / span 2;
  }
}

@media (max-width: 44rem) {
  body:has(.ce-ranking-studio) .page-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  body:has(.ce-ranking-studio) .page-header h1 {
    font-size: var(--font-size-40);
  }

  .ce-ranking-studio__header,
  .ce-ranking-studio__truth {
    padding-inline: var(--space-4);
  }

  .ce-ranking-studio__bench {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-rank-sources {
    border-right: 0;
    border-bottom: 1px solid var(--colour-border);
  }

  .ce-rank-source-panel {
    max-height: 18rem;
  }

  .ce-rank-assembly > header {
    align-items: flex-start;
  }

  .ce-rank-entry__select {
    grid-template-columns: 2.25rem 3rem minmax(0, 1fr);
    gap: var(--space-2);
  }

  .ce-rank-entry__select img {
    width: 3rem;
    height: 3rem;
  }

  .ce-rank-cut {
    padding-left: var(--space-3);
  }

  .ce-rank-cut > span strong,
  .ce-rank-cut label span {
    max-width: 13rem;
  }

  .ce-rank-inspector {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-rank-inspector > header,
  .ce-rank-voiceover-field,
  .ce-rank-inspector .action-status {
    grid-column: 1;
  }

  .ce-rank-timeline__track {
    overflow-x: auto;
  }

  .ce-rank-timeline__track button {
    flex: 0 0 5rem;
  }

  .ce-rank-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-rank-phone {
    grid-row: auto;
  }

  .ce-ranking-studio__truth {
    display: grid;
  }

  .ce-ranking-studio__truth span {
    text-align: left;
  }
}

/* Channel Engine Performance: a continuous published-Short review desk. */
body:has(.ce-performance) {
  min-width: 0;
  overflow-x: clip;
}

body:has(.ce-performance) .app-shell {
  width: min(100%, 104rem);
  max-width: none;
}

body:has(.ce-performance) .app-main {
  padding-block: var(--space-5);
}

body:has(.ce-performance) .page-header {
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

body:has(.ce-performance.is-private) .page-header h1 {
  font-size: var(--font-size-28);
  line-height: 1.1;
}

body:has(.ce-performance.is-private) .page-header p {
  font-size: var(--font-size-14);
}

body:has(.ce-performance.is-private) .page-header__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

body:has(.ce-performance.is-private) .page-header__avatar {
  position: relative;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: 50%;
  background: var(--colour-raised-2);
  color: var(--colour-text);
  font-size: var(--font-size-18);
  font-weight: 600;
}

body:has(.ce-performance.is-private) .page-header__avatar img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:has(.ce-performance.is-private) .page-header__description strong {
  color: var(--colour-text);
  font-weight: 600;
}

.ce-performance {
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-feature);
  background: var(--colour-surface);
  color: var(--colour-text);
  color-scheme: dark;
  scrollbar-color: var(--colour-control-border) var(--colour-surface);
}

.ce-performance svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ce-performance-status {
  display: grid;
  min-height: 3.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(19rem, 1.35fr);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised);
}

.ce-performance-status > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.ce-performance-status > span + span {
  border-left: 1px solid var(--colour-border);
}

.ce-performance-status strong {
  color: var(--colour-text);
  font-weight: 600;
}

.ce-performance-status i {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--colour-positive);
  box-shadow: 0 0.18rem 0.45rem
    color-mix(in srgb, var(--colour-positive) 35%, transparent);
}

.ce-performance-status__readiness {
  justify-content: space-between;
}

.ce-performance-status__readiness > span {
  display: grid;
  gap: calc(var(--space-1) / 2);
}

.ce-performance-status__readiness > span > strong {
  color: var(--colour-focus);
}

.ce-performance-status__readiness.is-blocked > span > strong {
  color: var(--colour-caution);
}

.ce-performance-status__sample-note {
  color: var(--colour-positive);
  font-size: var(--font-size-11);
  font-weight: 600;
}

.ce-performance-status__sample-note.is-failed {
  color: var(--colour-danger);
}

.ce-performance-status__sample-note:focus {
  outline: 3px solid var(--colour-focus);
  outline-offset: 2px;
}

.ce-performance-status__readiness .button {
  min-height: 2.75rem;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  font-size: var(--font-size-12);
}

/* Current totals share one ruled surface; observation windows stay explicit. */
.ce-performance-status.ce-performance-status--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 4rem;
  background: var(--colour-surface);
}

.ce-performance-status--compact > span + span {
  border-left: 0;
}

.ce-performance-status__source[data-performance-demo-label] {
  color: var(--colour-caution);
}

.ce-performance-status__source {
  padding-left: var(--space-3);
  border-left: 1px solid var(--colour-border);
}

.ce-performance-status--compact .ce-performance-status__readiness {
  gap: var(--space-4);
}

.ce-performance-status--compact .ce-performance-status__readiness > span {
  display: block;
  font-size: var(--font-size-12);
}

.ce-performance-status--compact
  .ce-performance-status__readiness
  > span
  > strong {
  color: var(--colour-text);
}

.ce-performance-status--compact
  .ce-performance-status__sample-note:not(:empty) {
  display: block;
  margin-top: var(--space-1);
}

.ce-performance-pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--colour-raised-1);
}

.ce-performance-pulse > section {
  min-width: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.ce-performance-pulse > section + section {
  border-left: 1px solid var(--colour-border);
}

.ce-performance-pulse h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-size-13);
  font-weight: 600;
  color: var(--colour-muted);
}

.ce-performance-pulse__total {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ce-performance-pulse__definition,
.ce-performance-pulse__pending {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-12);
  color: var(--colour-muted);
  line-height: 1.45;
}

.ce-performance-pulse__change {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-14);
  font-variant-numeric: tabular-nums;
}

.ce-performance-pulse__change > span:last-child {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  align-self: center;
}

.ce-performance-overview .is-positive {
  color: var(--colour-positive);
}
.ce-performance-overview .is-negative {
  color: var(--colour-danger);
}
.ce-performance-overview .is-unavailable {
  color: var(--colour-muted);
}

.ce-performance-pulse__periods {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
}

.ce-performance-pulse__periods > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-12);
}

.ce-performance-pulse__periods dt {
  color: var(--colour-muted);
}
.ce-performance-pulse__periods dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ce-performance-pulse__at-least {
  color: var(--colour-muted);
}

.ce-performance-overview__details {
  border-block: 1px solid var(--colour-border);
  font-size: var(--font-size-12);
  color: var(--colour-muted);
}

.ce-performance-overview__details > summary {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  color: var(--colour-text);
}

.ce-performance-overview__details > summary > span {
  float: right;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-performance-overview__details > div {
  display: grid;
  gap: var(--space-5);
  padding: 0 var(--space-4) var(--space-4);
}

.ce-performance-overview__notes {
  max-width: 76ch;
}

.ce-performance-overview__notes > p:first-child {
  margin-top: 0;
}

.ce-performance-overview__mobile-label {
  display: none;
}

.ce-performance-pulse__changes {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colour-focus);
  font: inherit;
  font-size: var(--font-size-12);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.ce-performance-pulse__changes:hover {
  color: var(--colour-text);
}

.ce-performance-pulse__changes:focus-visible {
  outline: 2px solid var(--colour-focus);
  outline-offset: 2px;
}

.ce-performance-overview__details > summary {
  scroll-margin-top: calc(var(--app-sticky-header-height) + var(--space-4));
}

.ce-performance-overview__details p {
  line-height: 1.55;
}
.ce-performance-overview__table {
  overflow-x: auto;
}

.ce-performance-overview__details table {
  width: 100%;
  border-collapse: collapse;
}
.ce-performance-overview__details caption {
  text-align: left;
  color: var(--colour-text);
  margin-bottom: var(--space-2);
}
.ce-performance-overview__details th,
.ce-performance-overview__details td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--colour-border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ce-performance-overview__details th:first-child {
  text-align: left;
}
.ce-performance-overview__details td {
  color: var(--colour-text);
}

.ce-performance summary:focus-visible {
  outline: 2px solid var(--colour-focus);
  outline-offset: -2px;
}

.ce-performance-back {
  display: none;
}
.ce-performance-description {
  font-size: var(--font-size-13);
}
.ce-performance-description summary {
  cursor: pointer;
  padding-block: var(--space-2);
}
.ce-performance-description p {
  color: var(--colour-muted);
  line-height: 1.6;
  margin: var(--space-2) 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ce-performance-scope-note {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-performance-commands {
  display: grid;
  min-height: 4.5rem;
  grid-template-columns: minmax(0, 1.56fr) minmax(24rem, 1fr);
  border-bottom: 1px solid var(--colour-border);
}

.ce-performance-controls,
.ce-performance-search-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.ce-performance-controls {
  border-right: 1px solid var(--colour-border);
}

.ce-performance-control-label {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-transform: uppercase;
}

.ce-performance-search-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2);
}

.ce-performance-search {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-input);
  color: var(--colour-muted);
}

.ce-performance-search:focus-within {
  border-color: var(--colour-horizon-cobalt);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--colour-horizon-cobalt) 22%, transparent);
  color: var(--colour-text);
}

.ce-performance-search input {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--colour-text);
}

.ce-performance-commands fieldset {
  display: flex;
  min-width: max-content;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
}

.ce-performance-commands legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ce-performance-commands fieldset label {
  cursor: pointer;
}

.ce-performance-commands fieldset input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ce-performance-commands fieldset span {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  color: var(--colour-muted);
  font-size: var(--font-size-13);
  font-weight: 600;
}

.ce-performance-commands fieldset label:hover span {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}

.ce-performance-commands fieldset input:focus-visible + span {
  box-shadow: var(--focus-ring);
}

.ce-performance-commands fieldset input:checked + span {
  background: color-mix(
    in srgb,
    var(--colour-horizon-cobalt) 16%,
    var(--colour-raised-2)
  );
  color: var(--colour-text);
}

.ce-performance-sort {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: var(--space-2);
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.ce-performance-sort select {
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  color-scheme: dark;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background-color: var(--colour-raised-2);
  color: var(--colour-text);
  font: inherit;
  font-size: var(--text-body);
}

.ce-performance-sort select option {
  background-color: var(--colour-raised-2);
  color: var(--colour-text);
}

.ce-performance-clear {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--colour-muted);
  font-size: var(--text-body);
  font-weight: 600;
  text-decoration: none;
}

.ce-performance-clear:hover {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}

.ce-performance-desk {
  display: grid;
  min-height: 45rem;
  grid-template-columns: minmax(0, 1.56fr) minmax(24rem, 1fr);
}

.ce-performance-catalogue {
  min-width: 0;
  border-right: 1px solid var(--colour-border);
}

.ce-performance-catalogue > header {
  display: flex;
  min-height: 3.75rem;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}

.ce-performance-catalogue > header h2,
.ce-performance-catalogue > header p {
  margin: 0;
}

.ce-performance-catalogue > header h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-18);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ce-performance-catalogue > header p {
  margin-top: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-performance-selection-note {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  background: color-mix(in srgb, var(--colour-caution) 8%, transparent);
  color: var(--colour-muted);
  font-size: var(--font-size-13);
}

.ce-performance-rows {
  display: grid;
}

.ce-performance-row {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 7.2rem;
  grid-template-columns:
    4rem minmax(11rem, 1fr) minmax(13rem, auto)
    5.5rem 1.25rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  color: inherit;
  text-decoration: none;
  transition:
    background-color 160ms ease-out,
    box-shadow 160ms ease-out;
}

.ce-performance-row:hover {
  background: var(--colour-raised-1);
}

.ce-performance-row:focus-visible,
.ce-performance-row:has(.ce-performance-row__select:focus-visible) {
  z-index: 1;
  outline: 2px solid var(--colour-focus);
  outline-offset: -3px;
}

.ce-performance-row__select {
  color: inherit;
  text-decoration: none;
}

.ce-performance-row__select::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ce-performance-row__select:focus-visible {
  outline: none;
}

.ce-performance-row.is-selected {
  background: color-mix(
    in srgb,
    var(--colour-horizon-cobalt) 8%,
    var(--colour-surface)
  );
  box-shadow: inset 1px 0 0 var(--colour-horizon-cobalt);
}

.ce-performance-row__poster {
  width: 3.35rem;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: calc(var(--radius-control) - 2px);
  background: var(--colour-raised-2);
}

.ce-performance-row__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ce-performance.is-private .ce-performance-row__poster {
  width: 6rem;
  aspect-ratio: 16 / 9;
}

.ce-performance.is-private .ce-performance-row {
  min-height: 6rem;
  grid-template-columns: 6rem minmax(0, 1fr) 4.5rem 5.75rem 1rem;
}

.ce-performance.is-private .ce-performance-row dl {
  grid-template-columns: minmax(0, 1fr);
}

.ce-performance.is-private .ce-performance-row__copy strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.4;
}

.ce-performance-row__copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.ce-performance-row__copy strong,
.ce-performance-row__copy small,
.ce-performance-row__copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ce-performance-row__copy strong {
  font-size: var(--font-size-14);
  font-weight: 600;
}

.ce-performance-row__copy small {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}

.ce-performance-row__copy > span {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-performance-row dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(3.5rem, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.ce-performance-stat dt {
  margin-bottom: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ce-performance-stat dd {
  margin: 0;
  color: var(--colour-text);
  font-size: var(--font-size-13);
  font-weight: 600;
}

.ce-performance-stat.is-unavailable dd {
  max-width: 18ch;
  color: var(--colour-caution);
  font-size: var(--font-size-11);
  font-weight: 500;
  line-height: 1.3;
}

.ce-performance-row__result {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.ce-performance-row__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-style: normal;
  line-height: 1.25;
}

.ce-performance-row__state svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--colour-horizon-cobalt);
}

.ce-performance-relative-badge {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: baseline;
  gap: calc(var(--space-1) / 2);
  padding: calc(var(--space-1) / 2) var(--space-2);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  white-space: nowrap;
}

.ce-performance-relative-badge strong {
  color: var(--colour-text);
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
}

.ce-performance-relative-badge small {
  color: inherit;
  font-size: inherit;
}

.ce-performance-relative-badge.is-below {
  border-color: color-mix(in srgb, var(--colour-danger) 44%, transparent);
  background: color-mix(in srgb, var(--colour-danger) 10%, transparent);
  color: color-mix(in srgb, var(--colour-danger) 78%, var(--colour-text));
}

.ce-performance-relative-badge.is-notable {
  border-color: color-mix(in srgb, var(--colour-caution) 48%, transparent);
  background: color-mix(in srgb, var(--colour-caution) 11%, transparent);
  color: var(--colour-caution);
}

.ce-performance-relative-badge.is-strong {
  border-color: color-mix(in srgb, var(--colour-positive) 48%, transparent);
  background: color-mix(in srgb, var(--colour-positive) 11%, transparent);
  color: var(--colour-positive);
}

.ce-performance-relative-badge.is-exceptional {
  border-color: color-mix(
    in srgb,
    var(--colour-horizon-cobalt) 45%,
    transparent
  );
  background: color-mix(in srgb, var(--colour-horizon-cobalt) 12%, transparent);
  color: var(--colour-focus);
}

.ce-performance-relative-badge.is-breakout {
  border-color: color-mix(
    in srgb,
    var(--colour-horizon-violet) 58%,
    transparent
  );
  background: color-mix(in srgb, var(--colour-horizon-violet) 15%, transparent);
  color: color-mix(
    in srgb,
    var(--colour-horizon-violet) 76%,
    var(--colour-text)
  );
}

.ce-performance-relative-badge.is-pending {
  color: var(--colour-muted);
}

.ce-performance-row > svg {
  color: var(--colour-muted);
}

.ce-performance-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  max-width: 42rem;
  padding: var(--space-6);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
  text-align: left;
}
.ce-performance-empty strong {
  font: 600 var(--text-h2) / 1.25 var(--font-display);
  letter-spacing: var(--tracking-tight);
}
.ce-performance-empty .button {
  margin-top: var(--space-2);
}
.ce-performance-catalogue .ce-performance-empty,
.ce-home-library-grid .ce-performance-empty {
  grid-column: 1 / -1;
}

.ce-performance-empty p {
  max-width: 40ch;
  margin-bottom: 0;
  color: var(--colour-muted);
}

.ce-performance-inspector {
  min-width: 0;
  scroll-margin-top: calc(var(--app-sticky-header-height) + var(--space-4));
  background: var(--colour-raised-1);
}

.ce-performance-inspector__hero {
  position: relative;
  height: 8rem;
  overflow: hidden;
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised-2);
}

.ce-performance-inspector__hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--colour-bg) 65%, transparent),
    transparent 42%
  );
  content: "";
  pointer-events: none;
}

.ce-performance-inspector__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.ce-performance-inspector__hero > span {
  position: absolute;
  z-index: 1;
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--colour-positive) 45%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--colour-bg) 76%, transparent);
  color: var(--colour-positive);
  font-size: var(--font-size-11);
  font-weight: 600;
}

.ce-performance-inspector__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.ce-performance-inspector__body header > span,
.ce-performance-relative > span {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ce-performance-inspector__body header h2 {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--font-size-24);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.ce-performance-inspector__body header p {
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-13);
  line-height: 1.55;
}

.ce-performance-inspector__meta,
.ce-performance-inspector__stats,
.ce-performance-evidence dl {
  margin: 0;
}

.ce-performance-inspector__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block: 1px solid var(--colour-border);
}

.ce-performance-inspector__meta div:last-child {
  text-align: right;
}

.ce-performance-inspector__meta dt,
.ce-performance-evidence dt {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-performance-inspector__meta dd,
.ce-performance-evidence dd {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-12);
}

.ce-performance-inspector__meta dd small {
  display: block;
  margin-top: calc(var(--space-1) / 2);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-performance-inspector__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.ce-performance-inspector__stats .ce-performance-stat dd {
  font-size: var(--font-size-18);
}

.ce-performance-inspector__stats .ce-performance-stat.is-unavailable dd {
  font-size: var(--font-size-11);
}

.ce-performance-relative {
  padding: var(--space-3) 0;
  border-block: 1px solid var(--colour-border);
}

.ce-performance-relative strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--colour-caution);
  font-size: var(--font-size-14);
}

.ce-performance-relative.is-below strong {
  color: var(--colour-danger);
}

.ce-performance-relative.is-strong strong {
  color: var(--colour-positive);
}

.ce-performance-relative.is-exceptional strong {
  color: var(--colour-info);
}

.ce-performance-relative.is-breakout strong {
  color: var(--colour-horizon-violet);
}

.ce-performance-relative p {
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  line-height: 1.5;
}

.ce-performance-evidence {
  border-bottom: 1px solid var(--colour-border);
}

.ce-performance-evidence summary {
  min-height: 2.75rem;
  cursor: pointer;
  color: var(--colour-muted);
  font-size: var(--font-size-13);
  font-weight: 600;
}

.ce-performance-evidence summary:hover {
  color: var(--colour-text);
}

.ce-performance-evidence dl {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.ce-performance-evidence dl div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
}

.ce-performance-evidence dd {
  overflow-wrap: anywhere;
}

.ce-performance-create-bridge {
  display: grid;
  gap: var(--space-2);
}

.ce-performance-create-bridge .button {
  width: 100%;
  gap: var(--space-2);
}

.ce-performance-create-bridge p {
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.45;
}

.ce-performance-create-bridge .action-status {
  color: var(--colour-positive);
}

.ce-performance-inspector--empty {
  display: grid;
  min-height: 25rem;
  place-content: center;
  padding: var(--space-8);
  text-align: center;
}

.ce-performance-inspector--empty p {
  max-width: 36ch;
  color: var(--colour-muted);
}

.ce-performance > footer {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--colour-border);
  background: var(--colour-raised-1);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-performance > footer strong {
  color: var(--colour-text);
}

.ce-public-preflight {
  width: min(calc(100% - 2rem), 44rem);
  max-width: none;
  max-height: min(46rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-panel);
  background: var(--colour-raised);
  box-shadow: 0 2rem 5rem -1.4rem var(--colour-shadow);
  color: var(--colour-text);
}

.ce-public-preflight::backdrop {
  background: color-mix(in srgb, var(--colour-bg) 82%, transparent);
}

.ce-public-preflight > form {
  display: grid;
  max-height: inherit;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.ce-public-preflight__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-surface);
}

.ce-public-preflight__header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-32);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}

.ce-public-preflight__header p {
  max-width: 64ch;
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-13);
  line-height: 1.5;
}

.ce-public-preflight__header .ce-public-preflight__readiness {
  margin-top: var(--space-3);
  color: var(--colour-positive);
  font-size: var(--font-size-11);
  font-weight: 600;
}

.ce-public-preflight__header .ce-public-preflight__readiness.is-blocked {
  color: var(--colour-caution);
}

.ce-public-preflight__close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-input);
  color: var(--colour-muted);
  cursor: pointer;
}

.ce-public-preflight__close:hover {
  color: var(--colour-text);
}

.ce-public-preflight__close:focus-visible {
  outline: 3px solid var(--colour-focus);
  outline-offset: 2px;
}

.ce-public-preflight__body {
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: var(--colour-control-border) var(--colour-surface);
}

.ce-public-preflight__details code {
  overflow-wrap: anywhere;
  color: var(--colour-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-11);
}

.ce-public-preflight__details .is-unavailable {
  color: var(--colour-caution);
  line-height: 1.35;
}

.ce-public-preflight__changes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--colour-border);
}

.ce-public-preflight__changes > section,
.ce-public-preflight__details {
  padding: var(--space-5) var(--space-6);
}

.ce-public-preflight__changes > section + section {
  border-left: 1px solid var(--colour-border);
}

.ce-public-preflight h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-20);
  font-weight: 600;
  line-height: 1.1;
}

.ce-public-preflight__changes p,
.ce-public-preflight__details > p {
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-13);
  line-height: 1.5;
}

.ce-public-preflight__changes small {
  display: block;
  margin-top: var(--space-3);
  color: var(--colour-focus);
  font-size: var(--font-size-11);
  font-weight: 600;
}

.ce-public-preflight__safety {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-text);
  font-size: var(--font-size-13);
  line-height: 1.5;
}

.ce-public-preflight__details {
  padding-block: var(--space-3);
}

.ce-public-preflight__details summary {
  min-height: 2.75rem;
  cursor: pointer;
  color: var(--colour-muted);
  font-size: var(--font-size-13);
  font-weight: 600;
}

.ce-public-preflight__details summary:hover {
  color: var(--colour-text);
}

.ce-public-preflight__details dl {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.ce-public-preflight__details dl > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--colour-border);
}

.ce-public-preflight__details dt {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
}

.ce-public-preflight__details dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-12);
}

.ce-public-preflight__footer {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--colour-border);
  background: var(--colour-surface);
}

.ce-public-preflight__footer .button:disabled {
  border-color: var(--colour-border-strong);
  background: var(--colour-raised-2);
  color: var(--colour-muted);
  opacity: 1;
  cursor: not-allowed;
}

@media (max-width: 74rem) {
  .ce-performance-commands {
    grid-template-columns: minmax(0, 1.35fr) minmax(21rem, 1fr);
  }

  .ce-performance-controls {
    flex-wrap: wrap;
  }

  .ce-performance-sort {
    margin-left: 0;
  }

  .ce-performance-desk {
    grid-template-columns: minmax(0, 1.35fr) minmax(21rem, 1fr);
  }

  .ce-performance-row {
    grid-template-columns:
      3.5rem minmax(10rem, 1fr) 8rem 6.5rem
      1.25rem;
  }

  .ce-performance-row dl {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .ce-performance.is-private .ce-performance-row {
    grid-template-columns: 4.5rem minmax(0, 1fr) 3.5rem 5rem 0.75rem;
    gap: var(--space-2);
  }

  .ce-performance.is-private .ce-performance-row__poster {
    width: 4.5rem;
  }
}

@media (max-width: 52rem) {
  .ce-performance-commands {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-performance-controls {
    border-right: 0;
    border-bottom: 1px solid var(--colour-border);
  }

  .ce-performance-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ce-performance-status > span:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--colour-border);
  }

  .ce-performance-status > span:nth-child(4) {
    border-top: 1px solid var(--colour-border);
  }

  .ce-performance-desk {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-performance-catalogue {
    border-right: 0;
  }

  .ce-performance-inspector {
    border-top: 1px solid var(--colour-border);
  }
}

@media (max-width: 32rem) {
  .ce-performance-status > span:nth-child(3),
  .ce-performance-status__readiness {
    grid-column: 1 / -1;
  }

  .ce-performance-status__readiness {
    border-left: 0 !important;
    border-top: 1px solid var(--colour-border);
  }

  .ce-performance-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
  }

  .ce-performance-commands fieldset {
    grid-column: 1 / -1;
    width: 100%;
    overflow-x: auto;
  }

  .ce-performance-sort {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .ce-performance-sort select {
    flex: 1;
  }

  .ce-performance-search-tools {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ce-performance-clear {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .ce-performance-row {
    grid-template-columns: 3rem minmax(0, 1fr) 1.25rem;
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .ce-performance.is-private .ce-performance-row {
    grid-template-columns: 3rem minmax(0, 1fr) 1.25rem;
  }

  .ce-performance.is-private .ce-performance-row__poster {
    width: 3rem;
  }

  .ce-performance-row dl,
  .ce-performance-row__result {
    display: none;
  }

  .ce-performance-inspector__body {
    padding: var(--space-4);
  }

  .ce-performance-inspector__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-performance-evidence dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ce-performance > footer {
    align-items: start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .ce-public-preflight {
    width: calc(100% - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
    border-radius: var(--radius-card);
  }

  .ce-public-preflight__header,
  .ce-public-preflight__sample,
  .ce-public-preflight__changes > section,
  .ce-public-preflight__safety,
  .ce-public-preflight__details,
  .ce-public-preflight__footer {
    padding-inline: var(--space-4);
  }

  .ce-public-preflight__header {
    gap: var(--space-3);
  }

  .ce-public-preflight__header h2 {
    font-size: var(--font-size-24);
  }

  .ce-public-preflight__changes {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-public-preflight__footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .ce-public-preflight__changes > section + section {
    border-top: 1px solid var(--colour-border);
    border-left: 0;
  }

  .ce-public-preflight__footer .button {
    width: 100%;
  }

  .ce-public-preflight__details dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-rank-phone img {
    transition: none;
  }
}

/* Ranking Create: focused desktop workspace */

body:has(.ce-ranking-studio) .app-shell {
  max-width: 112rem;
}

body:has(.ce-ranking-studio) .app-main {
  padding-block: var(--space-2);
}

.ce-ranking-studio {
  border-radius: var(--radius-panel);
}

.ce-ranking-studio__header {
  min-height: 4.5rem;
  padding: var(--space-2) var(--space-4);
}

.ce-ranking-studio__draft {
  margin-bottom: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  letter-spacing: 0.06em;
}

.ce-ranking-studio__header h2 {
  margin-top: 0;
  font-size: var(--font-size-24);
}

.ce-ranking-studio__header p {
  margin-top: 0;
  font-size: var(--font-size-11);
}

.ce-ranking-studio__global {
  gap: var(--space-2);
}

.ce-ranking-studio__global > label,
.ce-ranking-studio__global > span {
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-3);
  border-color: var(--colour-border-strong);
  background: var(--colour-bg);
}

.ce-ranking-studio__global > label > span,
.ce-ranking-studio__global > span > span {
  gap: 0;
}

.ce-ranking-studio__global strong {
  font-size: var(--font-size-11);
}

.ce-ranking-studio__global small {
  font-size: var(--font-size-11);
}

.ce-ranking-studio__bench {
  grid-template-columns: 15.5rem minmax(36rem, 1fr) 19rem;
  height: clamp(39rem, calc(100dvh - 12.75rem), 47rem);
  min-height: 39rem;
}

.ce-rank-sources,
.ce-rank-preview {
  background: color-mix(in srgb, var(--colour-raised) 70%, var(--colour-bg));
}

.ce-rank-sources {
  position: relative;
  overflow: hidden;
}

.ce-rank-tool-panel {
  min-height: 0;
}

.ce-rank-tool-panel > header,
.ce-rank-assembly > header,
.ce-rank-preview > header {
  min-height: 3.75rem;
  padding: var(--space-2) var(--space-3);
}

.ce-rank-tool-panel > header > span {
  width: 2rem;
  height: 2rem;
}

.ce-rank-tool-panel > header h2,
.ce-rank-assembly > header h2,
.ce-rank-preview > header h2 {
  font-size: var(--font-size-20);
}

.ce-rank-tool-panel > header p,
.ce-rank-assembly > header p,
.ce-rank-preview > header p {
  font-size: var(--font-size-11);
}

.ce-rank-source-tabs button {
  padding-inline: var(--space-1);
  font-size: var(--font-size-11);
}

.ce-rank-source-panel {
  max-height: calc(100dvh - 24rem);
  gap: var(--space-2);
  padding: var(--space-3);
}

.ce-rank-source {
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
}

.ce-rank-source img {
  width: 3.25rem;
  height: 4.25rem;
}

.ce-rank-source button,
.ce-rank-pasted-source button {
  min-height: 2.25rem;
  padding-inline: 0;
}

.ce-rank-source-announcer {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  left: var(--space-3);
  margin: 0;
  color: var(--colour-positive);
  font-size: var(--font-size-11);
  line-height: 1.35;
}

.ce-rank-style {
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: transparent;
}

.ce-rank-style > header {
  align-items: center;
}

.ce-rank-style > header p {
  margin-top: var(--space-1);
}

.ce-rank-style fieldset {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.ce-rank-style legend {
  margin: 0;
  color: var(--colour-text);
  font-size: var(--font-size-11);
}

.ce-rank-style__fonts label {
  grid-template-columns: 3.8rem minmax(0, 1fr);
}

.ce-rank-style__base-colours,
.ce-rank-style__rank-colours {
  gap: var(--space-1);
}

.ce-rank-reset {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colour-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-11);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--colour-border-strong);
  text-underline-offset: 0.22rem;
}

.ce-rank-reset:hover {
  color: var(--colour-text);
  text-decoration-color: var(--colour-horizon-cobalt);
}

.ce-rank-reset:focus-visible {
  outline: 2px solid var(--colour-focus);
  outline-offset: 2px;
}

.ce-rank-assembly {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.ce-rank-assembly ol {
  display: grid;
  min-height: 0;
  align-content: start;
  overflow: visible;
}

.ce-rank-entry {
  min-width: 0;
}

.ce-rank-entry.is-selected {
  background: color-mix(in srgb, var(--colour-horizon-cobalt) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--colour-horizon-cobalt);
}

.ce-rank-entry__select {
  min-height: 3.15rem;
  grid-template-columns: 2.25rem 2.5rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
}

.ce-rank-entry__select img {
  width: 2.5rem;
  height: 2.5rem;
}

.ce-rank-entry__rank {
  font-size: var(--font-size-20);
}

.ce-rank-entry__copy {
  gap: 0 var(--space-2);
}

.ce-rank-entry__copy strong {
  font-size: var(--font-size-12);
}

.ce-rank-entry__copy em {
  color: color-mix(in srgb, var(--colour-muted) 78%, transparent);
  font-size: 0.56rem;
}

.ce-rank-entry__moves button {
  width: 2.75rem;
  min-height: 3.15rem;
}

.ce-rank-inspector {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid
    color-mix(in srgb, var(--colour-horizon-cobalt) 45%, var(--colour-border));
  border-bottom: 0;
  background: color-mix(
    in srgb,
    var(--colour-horizon-cobalt) 5%,
    var(--colour-raised)
  );
}

.ce-rank-entry.is-selected > .ce-rank-inspector {
  display: grid;
}

.ce-rank-inspector > header {
  align-items: center;
}

.ce-rank-inspector > header span {
  color: var(--colour-info);
  font-size: 0.56rem;
}

.ce-rank-inspector > header h3 {
  margin-top: 0;
  font-size: var(--font-size-13);
}

.ce-rank-inspector__work {
  display: grid;
  grid-template-columns: minmax(8rem, 0.85fr) minmax(16rem, 1.6fr) minmax(
      10rem,
      1fr
    );
  align-items: start;
  gap: var(--space-3);
}

.ce-rank-screen-field,
.ce-rank-voiceover-field > label:last-of-type {
  display: grid;
  gap: var(--space-1);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 700;
}

.ce-rank-screen-field input {
  height: 2.75rem;
}

.ce-rank-trim {
  gap: var(--space-1);
}

.ce-rank-trim legend > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ce-rank-trim__rail {
  height: 2.25rem;
}

.ce-rank-trim__readouts input {
  min-height: 2.35rem;
  height: 2.35rem;
  padding-inline: var(--space-2);
  font-size: var(--font-size-11);
}

.ce-rank-trim__readouts > span {
  padding-bottom: var(--space-1);
}

.ce-rank-voiceover-field {
  display: grid;
  grid-column: auto;
  gap: var(--space-1);
}

.ce-rank-voiceover-toggle {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  gap: var(--space-2);
  color: var(--colour-text);
  cursor: pointer;
  font-size: var(--font-size-11);
  font-weight: 700;
}

.ce-rank-voiceover-toggle input {
  width: auto;
  min-height: 0;
}

.ce-rank-inspector.is-opening .ce-rank-voiceover-toggle,
.ce-rank-inspector.is-opening .ce-rank-voiceover-field > label:last-of-type {
  display: none;
}

.ce-rank-voiceover-field textarea {
  height: 2.75rem;
  min-height: 2.75rem;
  resize: none;
}

.ce-rank-voiceover-field p {
  margin: var(--space-2) 0 0;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.35;
}

.ce-rank-inspector .action-status {
  min-height: 0;
}

.ce-rank-timeline {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.ce-rank-timeline > header {
  align-items: center;
  margin-bottom: var(--space-2);
}

.ce-rank-timeline > header > p {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.ce-rank-timeline__track {
  min-height: 2.75rem;
}

.ce-rank-timeline__track button {
  border-color: transparent;
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
}

.ce-rank-timeline__track button:first-child {
  border-color: transparent;
}

.ce-rank-timeline__track button.is-selected {
  border-color: var(--colour-horizon-cobalt);
  background: color-mix(
    in srgb,
    var(--colour-horizon-cobalt) 14%,
    var(--colour-raised-2)
  );
  box-shadow: inset 0 -2px 0 var(--colour-horizon-cobalt);
}

.ce-rank-timeline__track i {
  width: 0.85rem;
  font-size: 0.5rem;
}

.ce-rank-preview {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.ce-rank-preview > header > span {
  display: none;
}

.ce-rank-phone {
  width: min(13.5rem, calc(100% - var(--space-5)));
  max-width: none;
  height: min(24rem, calc(100% - var(--space-3)));
  margin: var(--space-2) auto var(--space-1);
}

.ce-rank-preview__transport {
  align-items: end;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.ce-rank-preview__steps {
  display: grid;
  grid-template-columns: repeat(2, 2.75rem);
}

.ce-rank-preview__steps .button {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
}

.ce-rank-preview__steps .button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ce-rank-preview__build {
  gap: var(--space-2);
  padding: var(--space-3);
}

.ce-rank-preview__build .button {
  width: 100%;
}

.ce-rank-preview__build .action-status {
  color: var(--colour-positive);
  line-height: 1.35;
}

@media (max-width: 80rem) {
  .ce-ranking-studio__bench {
    grid-template-columns: 14rem minmax(32rem, 1fr) 17rem;
  }

  .ce-rank-inspector__work {
    grid-template-columns: minmax(7rem, 0.75fr) minmax(15rem, 1.6fr) minmax(
        9rem,
        1fr
      );
  }
}

@media (max-width: 66rem) {
  .ce-ranking-studio__bench {
    height: auto;
    grid-template-columns: 14rem minmax(32rem, 1fr);
  }

  .ce-rank-preview {
    min-height: 36rem;
  }
}

@media (max-width: 44rem) {
  .ce-ranking-studio__bench {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-rank-inspector__work {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-rank-source-panel {
    max-height: 18rem;
  }
}

/* Channel Engine Discover: retained research, scoped to one owned channel. */
/* Discover contact sheet: media first, one active player, evidence on demand. */
body:has(.ce-discover) .app-shell {
  width: min(100%, 84rem);
}
body:has(.ce-discover) .ce-context {
  min-height: 2.5rem;
  padding-block: var(--space-2);
}
body:has(.ce-discover) .ce-context__summary {
  display: none;
}
body:has(.ce-discover) .page-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-block: var(--space-3);
}
body:has(.ce-discover) .page-header h1 {
  font-size: var(--text-h1);
  line-height: 1.15;
  margin: 0;
}
body:has(.ce-discover) .page-header__description {
  margin: 0;
  font-size: var(--font-size-14);
}
body:has(.ce-discover) .app-main {
  padding-top: 0;
}
.ce-discover {
  color: var(--colour-text);
}
.ce-discover-channel {
  font-size: var(--font-size-13);
  color: var(--colour-muted);
  text-decoration: none;
}
.ce-discover-channel:hover {
  color: var(--colour-text);
  text-decoration: underline;
}
.ce-discover svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ce-discover a,
.ce-discover button,
.ce-discover summary {
  text-underline-offset: 0.2em;
}
.ce-discover :is(a, button, summary, input, select):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.ce-discover [hidden] {
  display: none !important;
}
.ce-discover-command {
  position: sticky;
  top: var(--app-sticky-header-height, 4rem);
  z-index: 12;
  background: var(--colour-bg);
  border-bottom: 1px solid var(--colour-border-strong);
}
.ce-discover-command__views,
.ce-discover-command__views nav {
  display: flex;
  align-items: center;
}
.ce-discover-command__views {
  justify-content: space-between;
  gap: var(--space-3);
}
.ce-discover-view {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 2.5rem;
  border-bottom: 2px solid transparent;
  color: var(--colour-muted);
  font-size: var(--font-size-14);
  font-weight: 600;
  text-decoration: none;
}
.ce-discover-view:first-child {
  padding-left: 0;
}
.ce-discover-view[aria-current="page"] {
  border-color: var(--colour-focus);
  color: var(--colour-text);
}
.ce-discover-view:hover {
  color: var(--colour-text);
}
.ce-discover-view > span {
  font-size: var(--font-size-12);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--colour-muted);
}
.ce-discover-freshness {
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  white-space: nowrap;
}
.ce-discover-results__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding-block: 0;
}
.ce-discover-results__intro > p {
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}
.ce-discover-results__intro > p strong {
  color: var(--colour-text);
  font-weight: 500;
}
.ce-discover-comparison {
  display: block;
  margin-top: var(--space-1);
}
.ce-discover-saved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin-left: auto;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  text-decoration: none;
}
.ce-discover-saved:hover {
  color: var(--colour-text);
}
.ce-discover-saved + .ce-discover-guide {
  margin-left: var(--space-4);
}
.ce-discover-guide {
  font-size: var(--font-size-12);
  margin-left: auto;
}
.ce-discover-guide[open] {
  flex-basis: 100%;
}
.ce-discover-guide > summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  color: var(--colour-muted);
  cursor: pointer;
  list-style: none;
}
.ce-discover-guide > summary::-webkit-details-marker,
.ce-discover-study > summary::-webkit-details-marker {
  display: none;
}
.ce-discover-guide__body {
  max-width: 72ch;
  margin: var(--space-3) 0 var(--space-3) auto;
  padding: var(--space-4);
  background: var(--colour-raised);
  font-size: var(--font-size-14);
  line-height: 1.6;
}
.ce-discover-guide__body p {
  margin-block: 0 var(--space-3);
}
.ce-discover-guide__body p:last-child {
  margin-bottom: 0;
}
.ce-discover-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3);
}
.ce-discover-lanes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
}
.ce-discover-lanes a {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-12);
  text-decoration: none;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--colour-border);
  color: var(--colour-muted);
}
.ce-discover-lanes a[aria-current="true"] {
  background: var(--colour-raised-2);
  color: var(--colour-text);
  border-color: var(--colour-focus);
}
.ce-discover-lanes a:hover {
  color: var(--colour-text);
  border-color: var(--colour-border-strong);
}
.ce-discover-lanes span {
  font-variant-numeric: tabular-nums;
}
.ce-discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-7) var(--space-4);
  align-items: start;
}
.ce-discover-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised);
}
.ce-discover-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--colour-discover-media);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.ce-discover-card__media > img {
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.ce-discover-card__media > iframe,
.ce-discover-card__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--colour-discover-media);
}
.ce-discover-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  color: var(--colour-overlay-text);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ce-discover-play > span:first-child {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--colour-discover-play-shade);
  transition:
    background 180ms ease-out,
    transform 180ms ease-out;
}
.ce-discover-play svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
  stroke: none;
}
.ce-discover-play__label {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  font-size: var(--font-size-12);
  background: var(--colour-discover-play-shade);
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.ce-discover-play:hover > span:first-child,
.ce-discover-play:focus-visible > span:first-child {
  background: var(--colour-discover-play-hover);
  transform: scale(1.08);
}
.ce-discover-play:hover .ce-discover-play__label,
.ce-discover-play:focus-visible .ce-discover-play__label {
  opacity: 1;
}
.ce-discover-play:focus-visible {
  outline-offset: -4px;
}
.ce-discover-duration {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  padding: 2px var(--space-1);
  border-radius: var(--radius-control);
  color: var(--colour-overlay-text);
  background: var(--colour-discover-duration-shade);
  font-size: var(--font-size-11);
  line-height: 1.5;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ce-discover-card[data-playing]
  :is(.ce-discover-duration, .ce-discover-card__reach) {
  display: none;
}
.ce-discover-card[data-playing] .ce-discover-card__media {
  outline: 2px solid var(--colour-focus);
  outline-offset: 2px;
}
.ce-discover-card__body {
  padding: var(--space-2);
}
.ce-discover-card__signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.ce-discover-card__reach {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1);
  border-radius: var(--radius-control);
  color: var(--colour-discover-reach);
  background: var(--colour-discover-reach-bg);
  font-size: var(--font-size-11);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ce-discover-card__reach svg {
  width: 0.75rem;
  height: 0.75rem;
}
.ce-discover-card__signal time {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  white-space: nowrap;
}
.ce-discover-card__signal .ce-discover-ratio {
  padding: 2px var(--space-1);
  gap: 2px;
}
.ce-discover-card__signal .ce-discover-ratio strong {
  font-size: var(--font-size-11);
  font-weight: 600;
}
.ce-discover-card__signal svg {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
}
/* The multiplier chip: one component on My channel, Discover and Competitors.
   Bands map to the tone scale; the 100×+ "mega" tier keeps its gradient. */
.ce-discover-ratio {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 3px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--colour-glass-strong);
  color: var(--colour-text);
  font: 700 var(--font-size-11) / 1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: none;
}
.ce-discover-ratio strong {
  font-size: var(--font-size-13);
  font-weight: 700;
}
/* The multiplier explains itself in place: hover or focus the chip. */
.ce-discover-ratio[data-tip] {
  position: relative;
  cursor: help;
}
.ce-discover-ratio[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: calc(100% + var(--space-2));
  width: max-content;
  max-width: 16rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  background: var(--colour-surface-3);
  box-shadow: var(--shadow-panel);
  color: var(--colour-text);
  font: 400 var(--font-size-12) / 1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: normal;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}
.ce-discover-ratio[data-tip]:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateY(0);
}
.ce-discover-ratio[data-tip]:focus-visible {
  box-shadow: var(--focus-ring);
}
.ce-discover-ratio.is-below {
  background: var(--colour-tone-cold);
  color: var(--colour-tone-cold-ink);
}
.ce-discover-ratio.is-notable {
  background: var(--colour-tone-cool);
  color: var(--colour-tone-cool-ink);
}
.ce-discover-ratio.is-strong {
  background: var(--colour-tone-warm);
  color: var(--colour-tone-warm-ink);
}
.ce-discover-ratio.is-exceptional {
  background: var(--colour-tone-blue);
  color: var(--colour-tone-blue-ink);
}
.ce-discover-ratio.is-breakout {
  background: var(--colour-tone-hot);
  color: var(--colour-tone-hot-ink);
}
.ce-discover-card h3 {
  margin: 0;
  min-height: 2.7em;
  font-family: var(--font-sans);
  font-size: var(--font-size-13);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ce-discover-card__byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.5;
}
.ce-discover-card__byline a {
  min-width: 0;
  flex: 1;
  color: var(--colour-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  min-height: 1.5rem;
}
.ce-discover-card__byline a:hover {
  color: var(--colour-text);
  text-decoration: underline;
}
.ce-discover-card__byline > span {
  flex: none;
}
.ce-discover-card__subscribers {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ce-discover-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}
.ce-discover-card__actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  min-height: 2rem;
  padding: var(--space-1) 2px;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ce-discover-card__actions .ce-discover-create {
  border-color: var(--colour-glass-border);
  background: var(--colour-glass-strong);
  color: var(--colour-overlay-text);
}
.ce-discover-card__actions :is(a, button):hover {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}
.ce-discover-card__actions .ce-discover-create:hover {
  background: var(--colour-raised-2);
  color: var(--colour-action-ink);
}
.ce-discover-card__actions .ce-discover-create.ce-discover-continue {
  border-color: color-mix(in srgb, var(--colour-positive) 60%, transparent);
  background: var(--colour-positive-bg);
  color: var(--colour-positive);
}
.ce-discover-card__actions .ce-discover-create.ce-discover-continue:hover {
  background: var(--colour-positive);
  color: var(--colour-action-ink);
}
.ce-discover-card__actions .ce-discover-create:disabled {
  opacity: 0.65;
  cursor: wait;
}
.ce-discover-card__actions [data-discover-stop] {
  flex-basis: 100%;
}
@media (pointer: coarse), (max-width: 40rem) {
  .ce-discover-card__actions :is(a, button),
  .ce-discover-card__byline a {
    min-height: 2.75rem;
  }
}
.ce-discover-player-status:empty {
  display: none;
}
.ce-discover-player-status {
  margin-top: var(--space-2);
  font-size: var(--font-size-11);
  color: var(--colour-muted);
  line-height: 1.5;
}
.ce-discover-study {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 3;
}
.ce-discover-study > summary {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--colour-overlay-text);
  cursor: pointer;
  list-style: none;
}
.ce-discover-study > summary svg {
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  padding: calc(var(--space-2) + 1px);
  border-radius: var(--radius-control);
  background: var(--colour-discover-icon-shade);
}
.ce-discover-study > summary:hover svg,
.ce-discover-study[open] > summary svg {
  background: var(--colour-discover-icon-hover);
}
.ce-discover-study__body:not([popover]) {
  width: min(28rem, calc(100vw - 4rem));
  max-height: 28rem;
  padding: var(--space-3);
  background: var(--colour-raised-2);
  overflow: auto;
}
.ce-discover-guide[open] > summary svg {
  transform: rotate(180deg);
}
.ce-discover-study__body {
  font-size: var(--font-size-13);
  line-height: 1.6;
  overflow-wrap: anywhere;
  padding-bottom: var(--space-4);
}
.ce-discover-study__body[popover] {
  position: fixed;
  inset: auto;
  width: min(32rem, calc(100vw - 24px));
  max-height: min(42rem, calc(100dvh - 24px));
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
  background: var(--colour-raised-2);
  color: var(--colour-text);
  overflow: auto;
  overscroll-behavior: contain;
  font-size: var(--font-size-14);
}
.ce-discover-study-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin: 0 0 var(--space-3) auto;
  padding: var(--space-2) var(--space-3);
  background: var(--colour-raised);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--colour-text);
  font: inherit;
  font-size: var(--font-size-13);
  cursor: pointer;
}
.ce-discover-study-close:focus-visible {
  box-shadow: none;
}
.ce-discover-study h4 {
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  margin: 0 0 var(--space-3);
}
.ce-discover-study__body p {
  margin: 0 0 var(--space-3);
}
.ce-discover-note {
  color: var(--colour-muted);
}
.ce-discover-description {
  white-space: pre-wrap;
}
.ce-discover-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.ce-discover-detail-stats dt {
  font-size: var(--font-size-11);
  color: var(--colour-muted);
}
.ce-discover-detail-stats dd {
  margin: 0;
  font-size: var(--font-size-13);
  font-variant-numeric: tabular-nums;
}
.ce-discover-study__prompt {
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-3);
}
.ce-discover-study__prompt strong {
  display: block;
}
.ce-discover-provenance {
  font-size: var(--font-size-11);
  color: var(--colour-muted);
}
.ce-discover-provenance summary {
  cursor: pointer;
  padding-block: var(--space-2);
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}
/* One empty/error composition: a title, one sentence, one action, on a quiet
   dashed panel. Discover, Create, Competitors, My channel and Ideas share it. */
.ce-discover-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  max-width: 42rem;
  padding: var(--space-6);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
  text-align: left;
  margin-block: var(--space-6);
}
.ce-discover-empty h2 {
  margin: 0;
  font: 600 var(--text-h2) / 1.25 var(--font-display);
  letter-spacing: var(--tracking-tight);
}
.ce-discover-empty p {
  max-width: 42ch;
  margin: 0;
  color: var(--colour-muted);
  line-height: 1.5;
}
.ce-discover-empty .button {
  margin-top: var(--space-2);
}
.ce-discover-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-8);
  font-size: var(--font-size-13);
}
.ce-discover-pagination [aria-disabled] {
  color: var(--colour-muted);
  opacity: 0.65;
}
.ce-discover-boundary {
  padding-block: var(--space-4);
  border-top: 1px solid var(--colour-border);
  font-size: var(--font-size-11);
  color: var(--colour-muted);
}
@media (max-width: 68rem) {
  .ce-discover-tools {
    gap: var(--space-3);
  }
}
@media (max-width: 50rem) {
  .ce-discover-tools {
    flex-wrap: wrap;
  }
  .ce-discover-search {
    flex: 1 1 100%;
    margin: 0;
  }
  .ce-discover-freshness {
    font-size: var(--font-size-11);
  }
  body:has(.ce-discover) .page-header {
    display: block;
  }
  body:has(.ce-discover) .page-header__description {
    margin-top: var(--space-2);
  }
}
@media (max-width: 32rem) {
  .ce-discover-results__intro > p {
    flex-basis: 100%;
    padding-top: var(--space-2);
  }
  .ce-discover-saved {
    margin-left: 0;
  }
  .ce-discover-saved + .ce-discover-guide {
    margin-left: auto;
  }
  .ce-discover-command {
    position: static;
  }
  .ce-discover-command__views {
    flex-wrap: wrap;
  }
  .ce-discover-freshness {
    padding-bottom: var(--space-2);
  }
  .ce-discover-tools > label {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .ce-discover-tools select {
    flex: 1;
    max-width: 17rem;
  }
  .ce-discover-channel {
    max-width: 7rem;
    display: block;
    font-size: var(--font-size-11);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ce-discover-play > span:first-child,
  .ce-discover-play__label {
    transition: none;
  }
}

/* Discover freshness stays beside the same explicit refresh action. */
.ce-discover-refresh {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
  min-width: 0;
}
.ce-discover-refresh .ce-discover-freshness {
  font-size: var(--font-size-14);
  padding: 0;
}
.ce-discover-refresh-button,
.ce-discover-refresh-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-text);
  font: inherit;
  font-size: var(--font-size-14);
  font-weight: 600;
  cursor: pointer;
}
.ce-discover-refresh button:hover:not(:disabled) {
  border-color: var(--colour-control-border);
  background: var(--colour-surface-3);
}
.ce-discover-refresh button:disabled {
  opacity: 0.65;
  cursor: default;
}
.ce-discover-refresh-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.ce-discover-refresh-message {
  color: var(--colour-muted);
  font-size: var(--font-size-14);
  flex-basis: 100%;
  text-align: end;
}
.ce-discover-refresh-message:empty {
  display: none;
}
.ce-discover-refresh-apply {
  color: var(--colour-focus);
}
.ce-discover-refresh-apply[hidden] {
  display: none;
}
.ce-discover-refresh[data-refreshing] svg {
  animation: discover-refresh-turn 1.2s linear infinite;
}
@keyframes discover-refresh-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ce-discover-refresh[data-refreshing] svg {
    animation: none;
  }
}
@media (max-width: 50rem) {
  .ce-discover-command__views {
    flex-wrap: wrap;
  }
  .ce-discover-refresh {
    justify-content: flex-start;
  }
  .ce-discover-refresh-message {
    text-align: start;
  }
}

/* Discover command bar: one baseline, quiet controls, anchored choices. */
.ce-discover-tools {
  display: block;
  padding-block: var(--space-2);
  border-top: 1px solid var(--colour-border);
  color-scheme: dark;
}
.ce-discover-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ce-discover-search {
  display: flex;
  align-items: stretch;
  flex: 1 1 16rem;
  min-width: 11rem;
  background: var(--colour-raised);
  border-radius: var(--radius-card);
}
.ce-discover-search label {
  flex: 1;
  min-width: 0;
}
.ce-discover-search input {
  min-height: 2.75rem;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  color: var(--colour-text);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-13);
  caret-color: var(--colour-focus);
}
.ce-discover-search input::placeholder {
  color: var(--colour-muted);
  opacity: 1;
}
.ce-discover-search button {
  flex: 0 0 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--colour-muted);
  border: 0;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: transparent;
  cursor: pointer;
}
.ce-discover-search:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}
.ce-discover-search input:focus-visible {
  outline: none;
  box-shadow: none;
}
.ce-discover-search button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-control);
}
.ce-discover-picker-button:focus-visible,
.ce-discover-more > summary:focus-visible,
.ce-discover-more__heading button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.ce-discover-quick-filters {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.ce-discover-sort,
.ce-discover-facet {
  min-width: 0;
}
.ce-discover-toolbar > .ce-discover-sort {
  flex: 0 1 auto;
  max-width: 15rem;
}
.ce-discover-quick-filters .is-enhanced > span {
  display: none;
}
.ce-discover-picker-button,
.ce-discover-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--colour-text);
  font: inherit;
  font-size: var(--font-size-13);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease-out;
}
.ce-discover-picker-button > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ce-discover-picker-button svg,
.ce-discover-more summary svg {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
}
.ce-discover-sort .ce-discover-picker-button {
  background: var(--colour-raised);
  width: 100%;
}
.ce-discover-picker-button:hover,
.ce-discover-more > summary:hover {
  background: var(--colour-raised-2);
}
.ce-discover-picker-button[aria-expanded="true"],
.ce-discover-more[open] > summary {
  background: var(--colour-raised-accent);
  color: var(--colour-focus);
}
.ce-discover-facet.is-active .ce-discover-picker-button {
  color: var(--colour-focus);
  background: var(--colour-raised-accent);
}
.ce-discover-more {
  position: relative;
  flex: none;
}
.ce-discover-more > summary {
  list-style: none;
}
.ce-discover-more > summary::-webkit-details-marker {
  display: none;
}
.ce-discover-filter-count {
  color: var(--colour-focus);
  font-variant-numeric: tabular-nums;
}
.ce-discover-more__panel,
.ce-discover-choice-menu {
  color-scheme: dark;
  box-sizing: border-box;
  margin: 0;
  color: var(--colour-text);
  background: var(--colour-raised-2);
  border: 0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--colour-border-strong) var(--colour-raised-2);
  scrollbar-width: thin;
}
.ce-discover-choice-menu {
  position: fixed;
  inset: auto;
  min-width: 13rem;
  width: max-content;
  max-width: calc(100vw - 24px);
  max-height: min(26rem, calc(100dvh - 24px));
  padding: var(--space-1);
}
.ce-discover-choice-menu:popover-open {
  display: grid;
  gap: var(--space-1);
}
.ce-discover-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  color: var(--colour-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  text-align: left;
  font: inherit;
  font-size: var(--font-size-13);
  cursor: pointer;
}
.ce-discover-choice::before {
  content: "";
  flex: 0 0 0.75rem;
  width: 0.75rem;
  height: 0.5rem;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  transform: translateY(-2px) rotate(-45deg);
}
.ce-discover-choice[aria-selected="true"]::before {
  border-color: var(--colour-focus);
}
.ce-discover-choice:hover,
.ce-discover-choice:focus-visible {
  color: var(--colour-text);
  background: var(--colour-raised-accent);
  outline: 0;
  box-shadow: none;
}
.ce-discover-more__panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  width: 23rem;
  max-width: calc(100vw - 24px);
  padding: var(--space-4);
}
.has-custom-pickers .ce-discover-more__panel {
  position: fixed;
  inset: 0 auto auto 0;
  overflow-anchor: none;
}
.ce-discover-more__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ce-discover-more__heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.ce-discover-more__heading button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--colour-muted);
  background: transparent;
  cursor: pointer;
}
.ce-discover-more__heading button:hover {
  color: var(--colour-text);
  background: var(--colour-raised);
}
.ce-discover-more__fields,
.ce-discover-more__mobile .ce-discover-quick-filters {
  display: grid;
  gap: var(--space-3);
}
.ce-discover-more__mobile:not(:empty) {
  margin-bottom: var(--space-3);
}
.ce-discover-more__panel .ce-discover-facet {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}
.ce-discover-more__panel .ce-discover-facet > span {
  display: block;
  font-size: var(--font-size-13);
  color: var(--colour-muted);
}
.ce-discover-more__panel .ce-discover-picker-button {
  justify-content: space-between;
  background: var(--colour-raised);
}
.ce-discover-more__note {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-12);
  color: var(--colour-muted);
}
.ce-discover-tools select {
  min-height: 2.75rem;
  max-width: 100%;
  padding: var(--space-2);
  color: var(--colour-text);
  background: var(--colour-raised-2);
  color-scheme: dark;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
}
.ce-discover-tools select option {
  color: var(--colour-text);
  background: var(--colour-raised-2);
}
.ce-discover-clear {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--colour-focus);
  font-size: var(--font-size-12);
  text-underline-offset: 0.2em;
}
@media (max-width: 67rem) {
  .ce-discover-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ce-discover-search {
    grid-column: 1 / -1;
  }
  .ce-discover-toolbar > .ce-discover-sort {
    max-width: none;
  }
  .ce-discover-sort .ce-discover-picker-button {
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ce-discover-picker-button,
  .ce-discover-more > summary {
    transition: none;
  }
}
.ce-discover-bookmark {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colour-overlay-text);
  cursor: pointer;
  border-radius: var(--radius-control);
}
.ce-discover-bookmark > span {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-control);
  background: var(--colour-discover-icon-shade);
  transition: background 160ms ease-out;
}
.ce-discover-bookmark svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: round;
}
.ce-discover-bookmark:hover > span {
  background: var(--colour-discover-icon-hover);
}
.ce-discover-bookmark[aria-pressed="true"] {
  color: var(--colour-bookmark);
}
.ce-discover-bookmark[aria-pressed="true"] svg {
  fill: currentColor;
}
.ce-discover-bookmark[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
}
.ce-discover-idea-status:empty {
  display: none;
}
.ce-discover-idea-status {
  margin-top: var(--space-2);
  font-size: var(--font-size-12);
  color: var(--colour-text);
}
.ce-discover-idea-status a {
  color: var(--colour-focus);
  text-underline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
  .ce-discover-bookmark > span {
    transition: none;
  }
}

.ce-discover-ignore {
  position: absolute;
  top: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--colour-discover-ignore);
  cursor: pointer;
}
.ce-discover-ignore > span {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-control);
  background: var(--colour-discover-icon-shade);
}
.ce-discover-ignore:hover > span {
  background: var(--colour-discover-icon-hover);
}
.ce-discover-ignore:disabled {
  opacity: 0.65;
  cursor: wait;
}

.ce-discover-study > summary {
  position: relative;
}
[data-discover-tooltip]::after {
  content: attr(data-discover-tooltip);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 11rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  box-shadow: var(--shadow-raised);
  color: var(--colour-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  visibility: hidden;
}
.ce-discover-bookmark[data-discover-tooltip]::after {
  right: 0;
  left: auto;
}
.ce-discover-ignore[data-discover-tooltip]::after {
  left: 50%;
  transform: translateX(-50%);
}
[data-discover-tooltip]:focus-visible:not([data-tooltip-dismissed])::after {
  visibility: visible;
}
@media (hover: hover) {
  [data-discover-tooltip]:hover:not([data-tooltip-dismissed])::after {
    visibility: visible;
  }
}

/* The My channel pulse and selected upload keep their meaning on small screens. */
@media (max-width: 74rem) {
  .ce-performance.is-private .ce-performance-desk {
    grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr);
  }
  .ce-performance-status--compact
    .ce-performance-status__source:not([data-performance-demo-label]) {
    display: none;
  }
  .ce-performance-pulse > section {
    padding-inline: var(--space-4);
  }
}

@media (max-width: 52rem) {
  .ce-performance.is-private .ce-performance-desk {
    grid-template-columns: minmax(0, 1fr);
  }
  .ce-performance.is-private .ce-performance-rows {
    max-height: 32rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ce-performance-back {
    display: inline-flex;
    width: fit-content;
    min-height: 2.75rem;
    align-items: center;
    color: var(--colour-focus);
    font-size: var(--font-size-13);
    text-underline-offset: 0.2em;
  }
  .ce-performance-overview__details > summary > span {
    display: block;
    float: none;
    margin-top: var(--space-2);
    line-height: 1.4;
  }
  .ce-performance-status--compact .ce-performance-status__readiness > span {
    max-width: 11rem;
  }
  .ce-performance-pulse__total {
    font-size: 1.75rem;
  }
}

@media (max-width: 32rem) {
  .ce-performance-status.ce-performance-status--compact {
    grid-template-columns: minmax(0, 1fr);
  }
  .ce-performance-status--compact > span:first-child {
    padding-bottom: 0;
  }
  .ce-performance-status--compact .ce-performance-status__readiness {
    border-top: 0;
  }
  .ce-performance-pulse {
    grid-template-columns: minmax(0, 1fr);
  }
  .ce-performance-pulse > section {
    padding: var(--space-4);
  }
  .ce-performance-pulse > section + section {
    border-left: 0;
    border-top: 1px solid var(--colour-border);
  }
  .ce-performance-pulse__total {
    font-size: 2rem;
  }
  .ce-performance-pulse__change {
    margin-top: var(--space-3);
  }
  .ce-performance.is-private .ce-performance-row {
    grid-template-columns: 4.5rem minmax(0, 1fr) 5rem;
    gap: var(--space-2);
    min-height: 7rem;
  }
  .ce-performance.is-private .ce-performance-row__poster {
    width: 4.5rem;
    grid-row: 1 / 3;
  }
  .ce-performance.is-private .ce-performance-row__copy {
    grid-column: 2 / -1;
  }
  .ce-performance.is-private .ce-performance-row dl {
    display: grid;
    grid-column: 2;
    grid-row: 2;
  }
  .ce-performance.is-private .ce-performance-row dl > div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }
  .ce-performance.is-private .ce-performance-row__result {
    display: flex;
    grid-column: 3;
    grid-row: 2;
  }
  .ce-performance.is-private .ce-performance-row > svg {
    display: none;
  }
  .ce-performance.is-private .ce-performance-inspector__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ce-performance.is-private
    .ce-performance-inspector__stats
    .ce-performance-stat
    dd {
    font-size: var(--font-size-18);
  }
}

@media (min-width: 74rem) {
  .ce-performance-overview__details > div {
    grid-template-columns: minmax(0, 1.7fr) minmax(20rem, 1fr);
    align-items: start;
  }
}

@media (max-width: 32rem) {
  .ce-performance-overview__details table,
  .ce-performance-overview__details tbody {
    display: block;
  }
  .ce-performance-overview__details thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ce-performance-overview__details caption {
    display: block;
  }
  .ce-performance-overview__details tbody tr {
    display: grid;
    grid-template-columns: minmax(4rem, 0.8fr) repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--colour-border);
  }
  .ce-performance-overview__details tbody th,
  .ce-performance-overview__details tbody td {
    padding: 0;
    border: 0;
    align-self: end;
  }
  .ce-performance-overview__mobile-label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--colour-muted);
    font-size: var(--font-size-11);
    font-weight: 400;
  }
  .ce-performance-overview__details .ce-performance-overview__interval {
    grid-column: 1 / -1;
    text-align: left;
    line-height: 1.45;
    color: var(--colour-muted);
  }
  .ce-performance-overview__interval .ce-performance-overview__mobile-label {
    display: inline;
    margin-right: var(--space-2);
  }
}

.ce-performance-relative-badge--labelled {
  display: grid;
  gap: 0;
  white-space: normal;
  line-height: 1.25;
}
.ce-performance-relative-badge--labelled small {
  font-size: var(--font-size-11);
}
.ce-performance-relative--historical > strong {
  font-size: var(--font-size-20);
}
.ce-performance-relative .ce-performance-relative__meaning {
  margin-top: var(--space-1);
  color: var(--colour-text);
  font-size: var(--font-size-13);
}
.ce-performance-relative__benchmark {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
}
.ce-performance-relative__benchmark dt {
  color: var(--colour-muted);
}
.ce-performance-relative__benchmark dd {
  margin: var(--space-1) 0 0;
  color: var(--colour-text);
}
.ce-performance-peer-observations {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-4);
}
.ce-performance-momentum h3 {
  margin: 0;
  font-size: var(--font-size-12);
  font-weight: 600;
}
.ce-performance-momentum p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  font-size: var(--font-size-13);
  font-variant-numeric: tabular-nums;
}
.ce-performance-momentum p > span {
  color: var(--colour-muted);
}
.ce-performance-momentum small,
.ce-performance-momentum-unavailable {
  color: var(--colour-muted);
  font-size: var(--font-size-11);
  line-height: 1.5;
}
.ce-performance-momentum-unavailable {
  margin: 0;
}

.ce-performance-tracking {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-3);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}
.ce-performance-tracking > span > strong {
  margin-left: var(--space-1);
}
.ce-performance-tracking small:not(:empty) {
  display: block;
  flex-basis: 100%;
  color: var(--colour-caution);
}
.ce-performance-tracking__action {
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--colour-focus);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.ce-performance-tracking__action:hover {
  color: var(--colour-text);
}
.ce-performance-tracking__action:focus-visible {
  outline: 2px solid var(--colour-focus);
  outline-offset: -2px;
}
.ce-performance-tracking__action:disabled {
  color: var(--colour-muted);
  cursor: wait;
}
@media (max-width: 74rem) {
  .ce-performance-status--compact
    > span:first-child:has(.ce-performance-tracking) {
    align-items: start;
    flex-direction: column;
    gap: 0;
  }
  .ce-performance-tracking {
    margin-left: 0;
  }
}

.ce-discover-card[data-local-preview] .ce-discover-card__media > img {
  object-fit: contain;
}

.ce-discover-preview-unavailable {
  display: grid;
  height: 100%;
  place-content: center;
  padding: var(--space-4);
  color: var(--colour-text-muted);
  text-align: center;
}

/* Channel workspaces share a compact identity line; evidence keeps its own freshness. */
body:has(.ce-channel-navigation) .page-header h1 {
  font-size: var(--font-size-28);
  line-height: 1.1;
}
body:has(.ce-channel-navigation) .page-header {
  margin-bottom: var(--space-6);
}
.ce-environment {
  margin-top: var(--space-8);
  padding-block: var(--space-4);
  border-top: 1px solid var(--colour-border);
  color: var(--colour-muted);
  font-size: var(--font-size-12);
}
.ce-channel-navigation a:focus-visible {
  outline: 2px solid var(--colour-focus);
  outline-offset: 3px;
  border-radius: var(--radius-control);
}

.ce-workspace-return {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-3) / 2);
  min-height: 2.75rem;
  margin-bottom: var(--space-3);
  color: var(--colour-muted);
  font-size: var(--font-size-13);
  text-decoration: none;
}
.ce-workspace-return svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ce-workspace-return:hover {
  color: var(--colour-text);
}
.ce-workspace-return:focus-visible {
  outline: 2px solid var(--colour-focus);
  outline-offset: 3px;
}

/* Private channel destinations share one rail; editors may widen their work area. */
body:has(.ce-channel-navigation):has(.app-main) .app-shell {
  width: min(100%, 96rem);
  max-width: none;
}
body:has(.ce-channel-navigation):has(.ce-ranking-studio) .app-shell {
  width: min(100%, 112rem);
}
body:has(.ce-channel-navigation) .app-header {
  width: 100%;
  max-width: 93rem;
  margin-inline: auto;
}

/* Reference-led channel navigation. Editing keeps its full-width working desk. */
.app-brand {
  display: none;
}
@media (min-width: 1100px) {
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    ) {
    --studio-rail-width: 14rem;
    --app-sticky-header-height: 0rem;
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .app-shell {
    width: 100%;
    padding: 0 var(--space-6) var(--space-8)
      calc(var(--studio-rail-width) + var(--space-6));
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .app-header {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--studio-rail-width);
    max-width: none;
    min-height: 100dvh;
    padding: var(--space-5) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-6);
    border: 0;
    border-right: 1px solid var(--colour-border);
    overflow-y: auto;
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .app-brand {
    display: grid;
    gap: var(--space-1);
    font: 600 1rem/1.2 var(--font-sans);
  }
  .app-brand small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--colour-muted);
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .app-mark {
    gap: var(--space-2);
    padding: 0 var(--space-2);
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .app-header__action {
    order: 1;
    padding: var(--space-3);
    border-bottom: 1px solid var(--colour-border);
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .ce-channel-navigation {
    max-width: 100%;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .ce-channel-navigation
    > span {
    display: none;
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .ce-channel-navigation
    strong {
    width: 100%;
    order: -1;
    font-size: 1rem;
    white-space: normal;
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .top-nav {
    order: 2;
    width: 100%;
    overflow: visible;
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .top-nav
    ul {
    display: grid;
    gap: var(--space-2);
    width: 100%;
  }
  body:has(.ce-channel-navigation):not(
      :has(
        [data-ranking-editor],
        [data-text-video-editor],
        .me-workspace--editor,
        .sc-workspace [data-sc="session"]:not([hidden])
      )
    )
    .top-nav
    a {
    display: flex;
    width: 100%;
    min-height: 3rem;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
}

/* Channel actions stay beside the workspace they affect. */
.ce-channel-switcher__row {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-1);
}
.ce-channel-switcher__row .ce-channel-remove {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  transform: translateY(-50%);
  background: var(--colour-raised-2);
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}
.ce-channel-switcher__row:is(:hover, :focus-within) .ce-channel-remove {
  opacity: 1;
}
.ce-channel-switcher__row a {
  flex: 1;
}
.ce-channel-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--colour-muted);
  cursor: pointer;
}
.ce-channel-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ce-channel-icon:hover {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}
.ce-channel-remove:hover {
  color: var(--colour-danger);
}
.ce-channel-add {
  justify-self: start;
  margin-left: var(--space-2);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-control);
}
.ce-channel-add:hover {
  border-style: solid;
}

.ce-channel-confirm {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  width: min(100%, 28rem);
  margin: var(--space-6) auto;
  padding: var(--space-6);
  text-align: center;
}
.ce-channel-confirm__identity {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}
.ce-channel-confirm__identity .ce-avatar {
  width: 96px;
  height: 96px;
  font-size: var(--font-size-32);
}
.ce-channel-confirm h2,
.ce-channel-confirm p {
  margin: 0;
}
.ce-channel-confirm p {
  color: var(--colour-muted);
}
.ce-channel-confirm form {
  width: 100%;
}
.ce-channel-confirm form .button {
  width: 100%;
}
.ce-channel-confirm .action-status:empty {
  display: none;
}
.ce-channel-confirm__alternatives {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.ce-channel-confirm__alternatives form {
  width: auto;
  flex: 1;
}
.ce-channel-confirm__alternatives .button {
  padding-inline: var(--space-3);
}
.ce-channel-confirm__identity h2 {
  overflow-wrap: anywhere;
}

/* Media card v2 — shared by Discover, Live search, Bookmarks and Saved inspiration.
   The image carries the evidence (views, multiplier); text stays quiet; actions
   appear over the image on hover or focus so the grid reads as footage first. */
.ce-discover-card {
  container-type: inline-size;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ce-discover-card__media {
  border-radius: var(--radius-media);
  box-shadow: 0 1px 0 var(--colour-card-inset) inset;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ce-discover-card:hover .ce-discover-card__media {
  transform: translateY(-3px);
}
.ce-discover-card__media::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  z-index: 1;
  background: linear-gradient(to top, var(--colour-card-shade), transparent);
  pointer-events: none;
}
.ce-discover-card[data-playing] .ce-discover-card__media::after {
  display: none;
}
/* Hover-scrub (src/client/hover-scrub.ts), shared by Discover and Create
   cards: frames of the Short sit directly above the poster and below every
   control; a thin bar marks the pointer's place along the Short. */
.hover-scrub {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hover-scrub > * {
  visibility: hidden;
}
.hover-scrub > :is(img, video) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hover-scrub.is-scrubbing > :is(.is-current, .hover-scrub__bar),
.hover-scrub.is-scrubbing[data-ready] > video {
  visibility: visible;
}
.hover-scrub__bar {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 2px;
  background: var(--colour-overlay-text);
  transform: scaleX(var(--hover-scrub-at, 0));
  transform-origin: left;
}
[data-playing] .hover-scrub {
  display: none;
}
.ce-discover-card[data-local-preview] .hover-scrub > video {
  object-fit: contain;
}
.ce-discover-card__reach {
  left: 0.55rem;
  bottom: 0.55rem;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-2);
  border: 1px solid var(--colour-glass-border);
  border-radius: var(--radius-pill);
  color: var(--colour-overlay-text);
  background: var(--colour-glass);
  box-shadow: 0 4px 14px var(--colour-glass-shadow);
  backdrop-filter: blur(14px) saturate(1.4);
  font-size: var(--font-size-13);
}
.ce-discover-card__reach strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ce-discover-card__reach svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: var(--colour-overlay-yellow);
  stroke: none;
}
.ce-discover-duration {
  top: 1.2rem;
  right: 3rem;
  bottom: auto;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.ce-discover-card:is(:hover, :focus-within) .ce-discover-duration {
  opacity: 1;
}
.ce-discover-card__body {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) calc(var(--space-1) / 2) 0;
}
.ce-discover-card h3 {
  min-height: 0;
  font-size: var(--font-size-13);
  font-weight: 600;
}
.ce-discover-card__byline {
  gap: var(--space-1);
  min-height: 0;
}
.ce-discover-card__byline a {
  flex: 0 1 auto;
  min-height: 0;
}
.ce-discover-card__byline > span::before {
  content: "· ";
  opacity: 0.6;
}
.ce-discover-card__signal {
  min-height: 0;
}
/* The multiplier sits on the image, opposite the view count. */
.ce-discover-card__signal .ce-discover-ratio {
  position: absolute;
  z-index: 3;
  right: 0.55rem;
  top: calc(100cqw * 16 / 9 - 2.35rem);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px var(--colour-glass-shadow);
}
.ce-discover-card__signal .ce-discover-ratio strong {
  font-size: var(--font-size-13);
  font-weight: 700;
}
.ce-discover-card__signal .ce-discover-ratio svg {
  display: none;
}
.ce-discover-card__signal time svg {
  display: none;
}

/* Actions float over the lower image on hover or keyboard focus. */
@media (hover: hover) and (pointer: fine) {
  /* Each action is its own pill over the image's bottom shade, anchored to
     the image's bottom edge so an extra row (Add to idea) grows upwards. */
  .ce-discover-card__actions {
    position: absolute;
    z-index: 4;
    left: 0.5rem;
    right: 0.5rem;
    top: calc(100cqw * 16 / 9 - 0.5rem);
    gap: calc(var(--space-1) * 1.5);
    margin: 0;
    opacity: 0;
    transform: translateY(calc(-100% + 6px));
    transition:
      opacity 0.2s ease-out,
      transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
  }
  .ce-discover-card:is(:hover, :focus-within) .ce-discover-card__actions {
    opacity: 1;
    transform: translateY(calc(-100% - 3px));
    pointer-events: auto;
  }
  .ce-discover-card:is(:hover, :focus-within) .ce-discover-card__reach {
    opacity: 0;
  }
  /* The multiplier makes room for the tray and stays reachable: it rises
     above the actions, and its explanation opens above it. */
  .ce-discover-card__signal .ce-discover-ratio {
    transition:
      top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow var(--motion-fast) ease;
  }
  .ce-discover-card:is(:hover, :focus-within)
    .ce-discover-card__signal
    .ce-discover-ratio {
    z-index: 5;
    top: calc(100cqw * 16 / 9 - 5rem);
  }
  .ce-discover-card__actions :is(a, button) {
    min-height: 2rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--colour-glass-border);
    border-radius: var(--radius-control);
    background: var(--colour-glass-strong);
    backdrop-filter: blur(12px) saturate(1.4);
    color: var(--colour-overlay-text);
    font-size: var(--font-size-12);
    font-weight: 600;
    transition:
      background-color 0.15s ease-out,
      border-color 0.15s ease-out;
  }
  .ce-discover-card__actions :is(a, button):hover {
    border-color: color-mix(
      in srgb,
      var(--colour-overlay-text) 28%,
      transparent
    );
    background: var(--colour-glass-bar);
    color: var(--colour-overlay-text);
  }
  .ce-discover-card__actions .ce-discover-create {
    flex: 1 1 0;
    border-color: transparent;
    box-shadow: 0 4px 14px
      color-mix(in srgb, var(--colour-card-shade) 50%, transparent);
  }
  .ce-discover-card__actions .ce-discover-create:hover {
    border-color: transparent;
  }
  .ce-discover-card__actions .ce-discover-create.ce-discover-continue {
    border-color: color-mix(in srgb, var(--colour-positive) 55%, transparent);
    background: var(--colour-positive-bg);
    color: var(--colour-positive);
  }
  .ce-discover-card__actions .ce-discover-create.ce-discover-continue:hover {
    border-color: var(--colour-positive);
    background: var(--colour-positive-bg);
    color: var(--colour-positive);
  }
  .ce-discover-card__actions .ce-discover-add {
    order: -1;
    flex-basis: 100%;
  }
  /* The secondary link only needs to say where it goes. */
  .ce-discover-card__actions a:not(.ce-discover-create) {
    flex: 0 0 auto;
    gap: var(--space-1);
    padding-inline: var(--space-3) var(--space-2);
  }
  .ce-discover-card__actions a[href*="youtube.com"]:not(.ce-discover-create) {
    gap: calc(var(--space-1) / 2); /* applied twice around the hidden label */
    font-size: 0;
  }
  .ce-discover-card__actions
    a[href*="youtube.com"]:not(.ce-discover-create)::before {
    content: "YouTube";
    font-size: var(--font-size-12);
  }
  .ce-discover-card__actions a[target="_blank"]::after {
    content: "↗";
    font-size: var(--font-size-12);
    opacity: 0.7;
  }
  /* The narrowest cards keep "Continue idea" on one line. */
  @container (max-width: 14rem) {
    .ce-discover-card__actions .ce-discover-create {
      padding-inline: var(--space-2);
    }
    .ce-discover-card__actions a:not(.ce-discover-create) {
      padding-inline: calc(var(--space-2) * 1.25);
    }
    .ce-discover-card__actions a[target="_blank"]::after {
      display: none;
    }
  }
  /* While playing, the actions float over the top of the video so the
     grid below never moves; YouTube's own controls stay clear at the bottom. */
  .ce-discover-card[data-playing] .ce-discover-card__actions {
    top: var(--space-2);
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .ce-discover-card[data-playing]
    .ce-discover-card__actions
    a:not(.ce-discover-create) {
    display: none;
  }
  .ce-discover-card[data-playing]
    .ce-discover-card__actions
    [data-discover-stop] {
    flex: 0 0 auto;
    padding-inline: var(--space-3);
    font-size: 0;
  }
  .ce-discover-card[data-playing]
    .ce-discover-card__actions
    [data-discover-stop]::after {
    content: "Stop";
    font-size: var(--font-size-12);
  }
  .ce-discover-card[data-playing]
    .ce-discover-card__actions
    [data-discover-stop]
    svg {
    width: var(--space-3);
    height: var(--space-3);
    margin-right: var(--space-1);
    fill: currentColor;
  }
}
/* Playback hints stay available to screen readers without shifting the grid. */
.ce-discover-card [data-player-status] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ce-discover-card :is(.ce-discover-card__reach, .ce-discover-ratio) {
  transition: opacity 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ce-discover-card__media,
  .ce-discover-card__actions {
    transition: none;
  }
}

/* 100×+ "mega" outliers: beyond gold, a vivid magenta→violet→cyan chip. */
.ce-discover-ratio.is-mega,
.ce-competitor-multiplier.is-mega {
  background: linear-gradient(
    120deg,
    var(--colour-tone-mega-a),
    var(--colour-tone-mega-b) 55%,
    var(--colour-tone-mega-c)
  );
  color: var(--colour-tone-mega-ink);
  box-shadow: 0 0.25rem 0.75rem -0.25rem var(--colour-tone-mega-glow);
}

/* Export notices: an MP4 that finished while the creator was elsewhere stays
   in the top-right corner of every page, inside the header band, until it is
   downloaded or dismissed. */
.ce-export-notices {
  position: fixed;
  top: var(--space-2);
  right: var(--space-4);
  z-index: 200;
  display: grid;
  gap: var(--space-2);
  width: min(23rem, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}
/* Narrower windows wrap the header under it, so keep the navigation clear. */
@media (max-width: 64rem) {
  .ce-export-notices {
    top: auto;
    bottom: var(--space-4);
  }
}
.ce-export-notice {
  --notice-tone: var(--colour-positive);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  align-items: center;
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2);
  overflow: hidden;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-feature);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--notice-tone) 12%, var(--colour-raised-2)),
    var(--colour-raised) 60%
  );
  box-shadow:
    0 1rem 2rem -0.75rem var(--colour-shadow),
    0 0.125rem 0.375rem var(--colour-glass-shadow);
  color: var(--colour-text);
  pointer-events: auto;
}
.ce-export-notice--failed {
  --notice-tone: var(--colour-danger);
}
.ce-export-notice.is-leaving {
  pointer-events: none;
}
.ce-export-notice__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--notice-tone) 16%, transparent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--notice-tone) 45%, transparent);
  color: var(--notice-tone);
}
.ce-export-notice__body {
  display: grid;
  min-width: 0;
}
.ce-export-notice__heading {
  font-size: var(--font-size-13);
  font-weight: 700;
  line-height: 1.3;
}
.ce-export-notice__title {
  overflow: hidden;
  color: var(--colour-muted);
  font-size: var(--font-size-12);
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.ce-export-notice__title:hover {
  color: var(--colour-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ce-export-notice__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--colour-editor-action-border);
  border-radius: var(--radius-control);
  background: var(--colour-action);
  color: var(--colour-action-text);
  font-size: var(--font-size-13);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--motion-fast) ease;
}
.ce-export-notice__download:hover {
  background: var(--colour-editor-action-hover);
}
.ce-export-notice__close {
  grid-column: 4;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--colour-muted);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.ce-export-notice__close:hover {
  background: color-mix(in srgb, var(--colour-text) 8%, transparent);
  color: var(--colour-text);
}
.ce-export-notice :focus-visible {
  outline: 2px solid var(--colour-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  /* One entrance: the card glides in sharpening, the badge pops with a ring,
     the tick draws itself and a sheen of the tone crosses the card. */
  .ce-export-notice.is-arriving {
    animation: ce-export-notice-in 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .ce-export-notice.is-arriving::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 30%,
      color-mix(in srgb, var(--notice-tone) 20%, transparent) 50%,
      transparent 70%
    );
    content: "";
    pointer-events: none;
    animation: ce-export-notice-sheen 1200ms 240ms cubic-bezier(0.45, 0, 0.2, 1)
      both;
  }
  .ce-export-notice.is-arriving .ce-export-notice__badge {
    animation: ce-export-notice-pop 560ms 140ms
      cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .ce-export-notice.is-arriving .ce-export-notice__badge::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--notice-tone);
    content: "";
    animation: ce-export-notice-ring 1000ms 340ms cubic-bezier(0.16, 1, 0.3, 1)
      both;
  }
  .ce-export-notice.is-arriving .ce-export-notice__tick {
    stroke-dasharray: 1;
    animation: ce-export-notice-tick 420ms 380ms cubic-bezier(0.65, 0, 0.35, 1)
      both;
  }
  .ce-export-notice.is-leaving {
    animation: ce-export-notice-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ce-export-notice.is-arriving {
    animation: ce-export-notice-fade 200ms ease-out both;
  }
  .ce-export-notice.is-leaving {
    animation: ce-export-notice-fade 160ms ease-in reverse both;
  }
}
@keyframes ce-export-notice-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateX(1.5rem) scale(0.96);
  }
}
@keyframes ce-export-notice-out {
  to {
    opacity: 0;
    transform: translateX(1rem) scale(0.98);
  }
}
@keyframes ce-export-notice-fade {
  from {
    opacity: 0;
  }
}
@keyframes ce-export-notice-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes ce-export-notice-ring {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}
@keyframes ce-export-notice-tick {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ce-export-notice-sheen {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* Editing keeps the same left rail as browsing, collapsed to icons so the desk
   has the width. One shell, two densities: nothing moves when a draft opens.
   The .app-shell rule carries :has(.app-main) so it outranks the full-width
   editor rules in channel-engine-text-video.css and channel-engine-ranking.css. */
@media (min-width: 1100px) {
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor])) {
    --studio-rail-width: 4rem;
    --app-sticky-header-height: 0rem;
  }
  body:has(
      .tv-workspace:is([data-ranking-editor], [data-text-video-editor])
    ):has(.app-main)
    .app-shell {
    width: 100%;
    max-width: none;
    padding: 0 var(--space-4) var(--space-5)
      calc(var(--studio-rail-width) + var(--space-4));
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .app-header {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-5);
    width: var(--studio-rail-width);
    min-height: 100dvh;
    padding: var(--space-5) var(--space-3);
    border: 0;
    border-right: 1px solid var(--colour-border);
    background: var(--colour-bg);
    overflow: visible;
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .app-mark {
    gap: 0;
    height: auto;
    padding: 0;
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .app-mark
    > span:not(.app-brand) {
    width: 2.125rem;
    height: 2.125rem;
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .app-brand,
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .app-header__action,
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .top-nav__count {
    display: none;
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .top-nav {
    width: 100%;
    overflow: visible;
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .top-nav
    ul {
    display: grid;
    gap: var(--space-1);
    width: 100%;
    padding: 0;
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .top-nav
    a {
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    margin-inline: auto;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .top-nav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body:has(.tv-workspace:is([data-ranking-editor], [data-text-video-editor]))
    .top-nav
    a
    .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 1;
  }
}