/**
 * CardLarrikin ? base styles
 * Dark background, purple accents, subtle glow, modern dashboard look.
 */

:root {
  --bg-dark: #0a0a0f;
  --bg-card: #12121a;
  --bg-elevated: #1a1a24;
  --border-subtle: rgba(155, 4, 219, 0.28);
  /* Luke semantic palette (Style Editor targets) */
  --cl-colour-regular: #9b04db;
  --cl-colour-highlight: #ff8103;
  --cl-colour-active: #e200a3;
  --cl-colour-accent: #6d1dc6;
  --cl-colour-contrast: #fbdd49;
  --cl-colour-alt: #ff1c6a;
  /* Info / Ximilar identity marker (Identify Overview borders) */
  --cl-colour-info: #3b82f6;
  /* Legacy aliases ? keep existing --accent / --active consumers working */
  --accent: var(--cl-colour-regular);
  --accent-dim: var(--cl-colour-accent);
  --active: var(--cl-colour-active);
  --active-dim: color-mix(in srgb, var(--cl-colour-active) 72%, #000);
  --highlight: var(--cl-colour-highlight);
  --inactive-bg: #b7b7bd;
  --inactive-text: #111827;
  --inactive-border: #8b8b93;
  --accent-glow: color-mix(in srgb, var(--cl-colour-regular) 35%, transparent);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --danger: var(--error);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-glow: 0 0 20px var(--accent-glow);
  --transition: 0.2s ease;
  /* Rail-template viewport math (browser only; not OS taskbar). Navbar + main vertical padding from .main-container */
  --cl-navbar-height: 4.5rem;
  --cl-main-padding-block: 3rem;
  --cl-page-max: 1440px;
  --cl-search-rail-min: 15rem;
  --cl-search-rail-max: 22rem;
  /* Display text gradient (Larrikin Events logo energy ? reusable site-wide) */
  --cl-text-gradient-from: #e200a3;
  --cl-text-gradient-via: #9b04db;
  --cl-text-gradient-to: #22d3ee;
  --cl-text-gradient-angle: 100deg;
  /* Fixed footer strip ? keep in sync with .cl-footer-bar min-height + padding */
  --cl-footer-bar-height: 2.75rem;
  /* Shell (navbar/footer) above ordinary overlays; debug modal above shell */
  --cl-ui-shell-z: 10100;
  /* Modals below shell, above sticky toolbars / page chrome */
  --cl-modal-z: 10050;
  /* Sticky under-nav action strips — above scrolling content, below modals */
  --cl-sticky-under-nav-z: 9000;
  /* Mobile nav drawer ? above shell; aligns with cart FAB band */
  --cl-nav-drawer-z: 10150;
  /* Store peek tab ? left chrome; below drawer, above page content */
  --cl-store-tab-z: 10090;
  --cl-debug-unstick-z: 10200;
  --cl-rail-width: 204px;
  --cl-rail-gap: 0.9rem;
  /* Workspace mode tabs: Highlight ? Alt ? Active progression */
  --cl-mode-step-0: var(--cl-colour-highlight);
  --cl-mode-step-1: color-mix(in srgb, var(--cl-colour-highlight) 52%, var(--cl-colour-alt) 48%);
  --cl-mode-step-2: var(--cl-colour-alt);
  --cl-mode-step-3: color-mix(in srgb, var(--cl-colour-alt) 48%, var(--cl-colour-active) 52%);
  --cl-mode-step-4: var(--cl-colour-active);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* App default scrollbars (purple theme; all scrollable regions inherit) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.75) rgba(30, 27, 45, 0.35);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: rgba(30, 27, 45, 0.35);
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.95), rgba(109, 40, 217, 0.85));
  border-radius: 6px;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: #a78bfa;
}

/* ----- Navbar ----- */
.navbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: var(--cl-ui-shell-z);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.navbar-brand-text {
  display: inline-block;
}
.cl-brand-logo--nav {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.hero-brand-row {
  margin-bottom: 0.75rem;
}
.cl-brand-logo--wide {
  display: block;
  max-width: min(92vw, 420px);
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.navbar-brand:hover {
  color: var(--text);
  text-shadow: 0 0 12px var(--accent-glow);
}

/* Larrikin Hub ? approved navbar/logo modifiers (cl-navbar--hub, cl-brand-logo--hub-*).
   Reuse the shared .navbar structure; these only adjust logo sizing/spacing so the Hub
   header stays the same height and behaviour as the CardLarrikin navbar. */
.cl-navbar--hub {
  gap: 1.25rem;
}
.cl-brand-logo--hub-short {
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.cl-brand-logo--hub-long {
  height: 2.4rem;
  max-height: calc(var(--cl-navbar-height) - 2rem);
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* Larrikin Events Hub ? sibling shell to Hub (cl-navbar--events, logo modifiers). */
.cl-navbar--events {
  gap: 0.75rem;
}
.cl-brand-logo--events-long {
  height: clamp(1.85rem, 5.5vw, 2.55rem);
  max-height: calc(var(--cl-navbar-height) - 1.6rem);
  width: auto;
  max-width: min(52vw, 14rem);
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.cl-brand-logo--events-icon {
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.cl-nav-link-text {
  display: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cl-navbar--events .cl-nav-desktop .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
@media (min-width: 1100px) {
  .cl-navbar--events .cl-nav-desktop .cl-nav-link-text {
    display: inline;
  }
}
@media (max-width: 480px) {
  .cl-navbar--events .navbar-brand--hub {
    min-width: 0;
  }
}

/* Events Hub home ? full-bleed hero (no main padding / no double width wrap) */
main.cl-events-home-main {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip;
}
main.cl-events-home-main .cl-surface-hero--bleed {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
main.cl-events-home-main .cl-page-stack--after-hero {
  width: 90%;
  max-width: 1440px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* Viewport lives on <main>; page root exposes children to flex layout */
main.cl-main-container.cl-page-shell-viewport > .cl-events-page-root {
  display: contents;
}

/* ?? Global: gradient display text (cl-text--gradient) ?? */
.cl-text--gradient {
  background-image: linear-gradient(
    var(--cl-text-gradient-angle),
    var(--cl-text-gradient-from) 0%,
    var(--cl-text-gradient-via) 48%,
    var(--cl-text-gradient-to) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ?? Global: bento layout (cl-bento) ? fills, then stacks ?? */
.cl-bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.cl-bento__cell {
  min-width: 0;
}
.cl-bento__cell--span-2 {
  grid-column: auto;
}
@media (min-width: 720px) {
  .cl-bento--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cl-bento--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cl-bento--2 .cl-bento__cell--span-2,
  .cl-bento--3 .cl-bento__cell--span-2 {
    grid-column: span 2;
  }
}
@media (min-width: 1100px) {
  .cl-bento--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cl-bento--4 .cl-bento__cell--span-2 {
    grid-column: span 2;
  }
}
.cl-bento--dense {
  gap: 0.75rem;
}

/* ?? Global: event browse card (cl-event-card) ?? */
.cl-event-card-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 560px) {
  .cl-event-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .cl-event-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .cl-event-card-row--wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cl-event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cl-event-card:hover,
.cl-event-card:focus-within {
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, #000 22%, transparent);
}
/* Featured row enter ? stagger children after section reveal */
.cl-event-card-row--stagger > li {
  animation: cl-reveal-up 0.55s ease-out both;
}
.cl-event-card-row--stagger > li:nth-child(1) { animation-delay: 0.05s; }
.cl-event-card-row--stagger > li:nth-child(2) { animation-delay: 0.12s; }
.cl-event-card-row--stagger > li:nth-child(3) { animation-delay: 0.19s; }
.cl-event-card-row--stagger > li:nth-child(4) { animation-delay: 0.26s; }
.cl-event-card-row--stagger > li:nth-child(n+5) { animation-delay: 0.32s; }
.cl-event-card__media {
  --cl-event-card-tone: var(--cl-colour-active);
  --cl-event-card-tone-2: var(--cl-colour-accent);
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--cl-event-card-tone) 28%, transparent),
      color-mix(in srgb, var(--cl-event-card-tone-2) 35%, var(--bg-elevated)));
  overflow: hidden;
}
.cl-event-card__media[data-cl-cal-colour="accent"] {
  --cl-event-card-tone: var(--cl-colour-accent);
  --cl-event-card-tone-2: var(--cl-colour-highlight);
}
.cl-event-card__media[data-cl-cal-colour="highlight"] {
  --cl-event-card-tone: var(--cl-colour-highlight);
  --cl-event-card-tone-2: var(--cl-colour-accent);
}
.cl-event-card__media[data-cl-cal-colour="alt"] {
  --cl-event-card-tone: var(--cl-colour-alt);
  --cl-event-card-tone-2: var(--cl-colour-active);
}
.cl-event-card__media[data-cl-cal-colour="regular"],
.cl-event-card__media[data-cl-cal-colour="default"] {
  --cl-event-card-tone: var(--cl-colour-regular);
  --cl-event-card-tone-2: var(--cl-colour-accent);
}
.cl-event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cl-event-card__date {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.75rem;
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  background: rgba(10, 10, 15, 0.82);
  color: var(--text);
  line-height: 1.1;
  text-align: center;
}
.cl-event-card__date-dow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cl-event-card__date-day {
  font-size: 1.15rem;
  font-weight: 800;
}
.cl-event-card__date-mon {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cl-event-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 0.9rem 1rem;
  flex: 1;
}
.cl-event-card__game {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cl-colour-active) 80%, var(--text));
}
.cl-event-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.cl-event-card__meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}
.cl-event-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cl-event-card__actions {
  margin-top: auto;
  padding-top: 0.65rem;
}

/* ?? Global: highlight / value notes row (cl-highlight-notes) ?? */
.cl-highlight-notes {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .cl-highlight-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .cl-highlight-notes--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cl-highlight-notes__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.35rem 0.15rem;
}
.cl-highlight-notes__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cl-colour-active) 18%, transparent);
  color: color-mix(in srgb, var(--cl-colour-active) 85%, #fff);
  font-size: 0.95rem;
}
.cl-highlight-notes__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.cl-highlight-notes__text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ?? Global: surface hero (full-bleed landing plane) ?? */
.cl-surface-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(72vh, 40rem);
  border-radius: 0;
  overflow: hidden;
  color: var(--text);
}
@media (max-width: 640px) {
  .cl-surface-hero {
    min-height: min(62vh, 28rem);
  }
}
.cl-surface-hero--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.cl-surface-hero__plane {
  position: absolute;
  inset: 0;
  background-color: #0a0a12;
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 40%, color-mix(in srgb, var(--cl-colour-active) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 80%, color-mix(in srgb, var(--cl-colour-accent) 18%, transparent), transparent 65%),
    linear-gradient(160deg, #12121c 0%, #0a0a10 55%, #140a18 100%);
  background-size: cover;
  background-position: center;
}
.cl-surface-hero__plane--photo {
  background-image:
    linear-gradient(100deg, rgba(6, 6, 12, 0.75), rgba(6, 6, 12, 0.2)),
    var(--cl-surface-hero-image);
  background-size: cover;
  background-position: center;
}
.cl-surface-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(6, 6, 12, 0.88) 0%,
    rgba(6, 6, 12, 0.55) 42%,
    rgba(6, 6, 12, 0.25) 100%
  );
  pointer-events: none;
}

/* Generic framed media panel — photo/cover plane + veil for intro tiles, cards, etc. */
.cl-media-panel {
  --cl-media-panel-image: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}
/* Beat .cl-frame-grid > .cl-container-frame { overflow-y: auto } so the cover never scrolls. */
.cl-frame-grid > .cl-container-frame.cl-media-panel {
  overflow: hidden;
}
.cl-media-panel__plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0a0a12;
  background-image: var(--cl-media-panel-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.cl-media-panel__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(6, 6, 12, 0.62);
}
.cl-media-panel__veil--dark {
  background: linear-gradient(
    160deg,
    rgba(6, 6, 12, 0.78) 0%,
    rgba(6, 6, 12, 0.68) 48%,
    rgba(6, 6, 12, 0.74) 100%
  );
}
.cl-media-panel__veil--heavy {
  background: rgba(6, 6, 12, 0.88);
}
.cl-media-panel__content {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.cl-media-panel--center {
  justify-content: center;
  align-items: center;
}
.cl-media-panel--center > .cl-media-panel__content {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cl-media-panel--center .cl-title-container,
.cl-media-panel--center .cl-title-row {
  justify-content: center;
  text-align: center;
}
.cl-media-panel .cl-page-title,
.cl-media-panel .cl-page-subtitle,
.cl-media-panel .cl-surface-hero__brand-text {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.cl-surface-hero__body {
  position: relative;
  z-index: 1;
  width: min(92%, 1440px);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.5rem) clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 40rem;
  animation: cl-surface-hero-in 0.7s ease-out both;
}
.cl-surface-hero__brand {
  display: block;
  height: clamp(2.35rem, 7vw, 4rem);
  width: auto;
  max-width: min(100%, 22rem);
  object-fit: contain;
}
.cl-surface-hero__brand--nexus {
  height: clamp(3.1rem, 9vw, 5.25rem);
  max-width: min(100%, 28rem);
}
.cl-surface-hero__brand-text {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.cl-surface-hero__title {
  margin: 0;
  font-size: clamp(1.7rem, 5.2vw, 2.85rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}
.cl-surface-hero__title-accent {
  display: inline;
}
.cl-surface-hero__lead {
  margin: 0;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  line-height: 1.45;
  color: color-mix(in srgb, #fff 78%, transparent);
  max-width: 32rem;
}
.cl-surface-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.35rem;
}
@keyframes cl-surface-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Soft section enter (Featured / notes) */
.cl-reveal {
  animation: cl-reveal-up 0.65s ease-out both;
}
.cl-reveal--delay {
  animation-delay: 0.12s;
}
.cl-reveal--delay-2 {
  animation-delay: 0.22s;
}
@keyframes cl-reveal-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-surface-hero__body,
  .cl-reveal,
  .cl-reveal--delay,
  .cl-reveal--delay-2,
  .cl-event-card-row--stagger > li {
    animation: none;
  }
  .cl-event-card:hover,
  .cl-event-card:focus-within,
  .cl-enrol-list__item:hover,
  .cl-cta-band:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ?? Global: CTA / social band ?? */
.cl-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--cl-colour-active) 12%, var(--bg-card)),
      color-mix(in srgb, var(--cl-colour-accent) 10%, var(--bg-elevated))
    );
  transition: border-color var(--transition), transform var(--transition);
}
.cl-cta-band:hover {
  border-color: color-mix(in srgb, var(--cl-colour-active) 40%, var(--border-subtle));
  transform: translateY(-1px);
}
.cl-cta-band__copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: min(100%, 16rem);
  flex: 1 1 14rem;
}
.cl-cta-band__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.cl-cta-band__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.cl-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
@media (max-width: 560px) {
  .cl-cta-band {
    flex-direction: column;
    align-items: stretch;
  }
  .cl-cta-band__actions {
    width: 100%;
  }
  .cl-cta-band__actions .cl-btn,
  .cl-cta-band__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Events home scroll stack (not viewport-locked) */
.cl-page-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 720px) {
  .cl-page-stack {
    gap: 1.5rem;
  }
}
.cl-page-stack--after-hero {
  margin-top: 1.25rem;
}
@media (min-width: 720px) {
  .cl-page-stack--after-hero {
    margin-top: 1.5rem;
  }
}

/* Quiet spacing after status copy ? prefer over inline margin styles */
.cl-status-line + .cl-btn-row,
.cl-field-stack + .cl-status-line {
  margin-top: 0.85rem;
}
.cl-status-line + .cl-status-line {
  margin-top: 0.35rem;
}

/* Anchor links clear sticky Events / Hub navbar */
#cl-events-featured,
#cl-events-yours {
  scroll-margin-top: calc(var(--cl-navbar-height, 3.5rem) + 0.75rem);
}

/* Pill chips (not action buttons) */
.cl-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Disabled-looking controls that are not real buttons */
.btn.cl-btn[aria-disabled="true"],
span.btn.cl-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* ?? Global: calendar publish toggles (cl-cal-toggles) ?? */
.cl-cal-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  align-items: center;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}
.cl-cal-toggles__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.88rem;
  color: var(--text);
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius);
  transition: background-color var(--transition), opacity var(--transition);
}
.cl-cal-toggles__item:hover {
  background: color-mix(in srgb, var(--cl-colour-active) 10%, transparent);
}
.cl-cal-toggles__item:focus-within {
  outline: 2px solid color-mix(in srgb, var(--cl-colour-active) 70%, transparent);
  outline-offset: 2px;
}
.cl-cal-toggles__item:has(.cl-cal-toggles__input:not(:checked)) {
  opacity: 0.55;
}
.cl-cal-toggles__input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--cl-colour-active);
  cursor: pointer;
}
.cl-cal-toggles__swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--cl-cal-colour, var(--cl-colour-regular));
  flex-shrink: 0;
}
.cl-cal-toggles__label {
  font-weight: 600;
}
.cl-cal-toggles__item[data-cl-cal-colour="accent"] { --cl-cal-colour: var(--cl-colour-accent); }
.cl-cal-toggles__item[data-cl-cal-colour="highlight"] { --cl-cal-colour: var(--cl-colour-highlight); }
.cl-cal-toggles__item[data-cl-cal-colour="alt"] { --cl-cal-colour: var(--cl-colour-alt); }
.cl-cal-toggles__item[data-cl-cal-colour="regular"],
.cl-cal-toggles__item[data-cl-cal-colour="default"] { --cl-cal-colour: var(--cl-colour-regular); }
@media (max-width: 560px) {
  .cl-cal-toggles {
    gap: 0.4rem 0.55rem;
    margin-left: -0.15rem;
    margin-right: -0.15rem;
  }
  .cl-cal-toggles__label {
    font-size: 0.82rem;
  }
}

/* ?? Global: enrolment list (cl-enrol-list) ?? */
.cl-enrol-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.cl-enrol-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  border-left: 3px solid var(--cl-enrol-tone, var(--cl-colour-regular));
  transition: border-color var(--transition), transform var(--transition);
}
.cl-enrol-list__item:hover {
  border-color: color-mix(in srgb, var(--cl-colour-active) 35%, var(--border-subtle));
  transform: translateY(-1px);
}
.cl-enrol-list__item[data-cl-cal-colour="accent"] { --cl-enrol-tone: var(--cl-colour-accent); }
.cl-enrol-list__item[data-cl-cal-colour="highlight"] { --cl-enrol-tone: var(--cl-colour-highlight); }
.cl-enrol-list__item[data-cl-cal-colour="alt"] { --cl-enrol-tone: var(--cl-colour-alt); }
.cl-enrol-list__item[data-cl-cal-colour="regular"],
.cl-enrol-list__item[data-cl-cal-colour="default"] { --cl-enrol-tone: var(--cl-colour-regular); }
.cl-enrol-list__main {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 14rem;
}
.cl-enrol-list__day {
  flex-shrink: 0;
  min-width: 3.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.cl-enrol-list__body {
  min-width: 0;
}
.cl-enrol-list__title {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
}
.cl-enrol-list__title:hover,
.cl-enrol-list__title:focus-visible {
  color: color-mix(in srgb, var(--cl-colour-active) 70%, var(--text));
}
.cl-enrol-list__title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cl-colour-active) 70%, transparent);
  outline-offset: 2px;
  border-radius: 2px;
}
.cl-enrol-list__meta {
  margin: 0.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  align-items: center;
}
.cl-enrol-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 0 1 auto;
}
@media (max-width: 480px) {
  .cl-enrol-list__item {
    align-items: stretch;
  }
  .cl-enrol-list__actions {
    width: 100%;
  }
  .cl-enrol-list__actions .cl-btn,
  .cl-enrol-list__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.cl-field-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 28rem;
  width: 100%;
}

/* Play Event Room — room-ops layout (clocks/seats stay until shared list-row extract) */
.cl-play-room__phase-row {
  margin-bottom: 0.35rem;
}
.cl-play-room__join {
  gap: 0.75rem;
  max-width: 28rem;
  margin-top: 0.75rem;
}
.cl-play-room__life-heading {
  margin-top: 1.25rem;
}
.cl-play-room__run-actions {
  margin: 0.65rem 0 1rem;
}
.cl-play-room__board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .cl-play-room__board {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.cl-play-room__board-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 650;
}
.cl-play-room__seat-list,
.cl-play-room__table-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.cl-play-room__seat,
.cl-play-room__table {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.cl-play-room__seat--locked {
  border-left: 3px solid var(--cl-colour-accent, var(--accent));
}
.cl-play-room__seat--teamed {
  border-left: 3px solid color-mix(in srgb, var(--cl-colour-accent, var(--accent)) 55%, transparent);
}
.cl-play-room__seat--dropped {
  opacity: 0.55;
}
.cl-life-tracker__side--shared {
  max-width: 22rem;
}
.cl-play-room__seat-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 8rem;
  flex: 1 1 10rem;
}
.cl-play-room__seat-name {
  font-weight: 650;
}
.cl-play-room__seat-meta {
  font-size: 0.82rem;
  opacity: 0.85;
}
.cl-play-room__seat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.cl-play-room__seat-table-input {
  width: 3.5rem;
  text-align: center;
  padding: 0.3rem 0.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: inherit;
}
.cl-play-room__enrol-details {
  margin-top: 1.25rem;
}
.cl-play-room__enrol-details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.cl-play-room__clock--phase {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, transparent);
}
.cl-play-room__clock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin: 0 0 1.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cl-colour-accent, var(--accent)) 12%, transparent),
    transparent 70%
  );
}
.cl-play-room__clock-display {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 8rem;
}
.cl-play-room__clock-round {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
}
.cl-play-room__clock-time {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 750;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cl-play-room__clock-time.is-low {
  color: var(--error, #c2410c);
}
.cl-play-room__clock-time.is-paused {
  opacity: 0.75;
}
.cl-play-room__clock-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.cl-play-room__clock-mins-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.cl-play-room__clock-mins {
  width: 4rem;
  text-align: center;
  padding: 0.35rem 0.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: inherit;
}
.cl-play-room__standings-block {
  margin-top: 1.15rem;
}
.cl-play-room__standings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cl-play-room__standing {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.55rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.cl-play-room__standing-rank {
  font-weight: 750;
  opacity: 0.75;
}
.cl-play-room__standing-name {
  font-weight: 650;
}
.cl-play-room__standing-record {
  font-size: 0.85rem;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cl-play-room__announce {
  border-left: 3px solid var(--cl-colour-highlight, #c9a227);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cl-colour-highlight, #c9a227) 14%, transparent),
    transparent 70%
  );
}
.cl-play-room__announce .cl-status-line {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}
.cl-play-room__announce-edit {
  margin: 0 0 1rem;
}
.cl-play-room__announce-input {
  flex: 1 1 14rem;
  min-width: 12rem;
}
.cl-play-room__clock--pick {
  border-color: color-mix(in srgb, var(--cl-colour-highlight, #c9a227) 40%, transparent);
}
.cl-play-room__clock--readonly .cl-play-room__clock-time {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
}
.cl-play-room__public-clocks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cl-play-room--display .cl-play-room__public-clocks {
  gap: 1rem;
}
.cl-play-room--display .cl-page-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.cl-play-room--display .cl-play-room__clock--readonly .cl-play-room__clock-time {
  font-size: clamp(3rem, 12vw, 6.5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
}
.cl-play-room--display .cl-play-room__board--display {
  gap: 1.5rem;
}
.cl-play-room--display .cl-play-room__table,
.cl-play-room--display .cl-play-room__standing {
  padding: 0.85rem 1rem;
  font-size: 1.05rem;
}
.cl-play-room--display .cl-play-room__seat-name,
.cl-play-room--display .cl-play-room__standing-name {
  font-size: 1.15rem;
}
@media (min-width: 900px) {
  .cl-play-room--display .cl-play-room__board--display {
    grid-template-columns: 1.2fr 1fr;
  }
}
.cl-play-room--display .cl-play-room__announce .cl-status-line {
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  line-height: 1.25;
}
.cl-play-room--display .cl-play-room__announce {
  padding: 1rem 1.15rem;
}
.cl-life-tracker__value.is-bump {
  animation: cl-life-bump 0.28s ease-out;
}
@keyframes cl-life-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-life-tracker__value.is-bump { animation: none; }
}

/* Profile hero (shared Hub + player) — midnight arcade surfaces */
.cl-profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding: 1.5rem 1rem 1.75rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(
      ellipse 90% 80% at 12% 20%,
      color-mix(in srgb, var(--cl-colour-highlight) 18%, transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 70% 70% at 88% 80%,
      color-mix(in srgb, var(--cl-colour-active) 14%, transparent),
      transparent 60%
    ),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--bg-elevated) 88%, var(--cl-colour-accent)) 0%,
      var(--bg-card) 100%
    );
  border: 1px solid color-mix(in srgb, var(--cl-colour-highlight) 28%, var(--border-subtle));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  animation: cl-profile-hero-in 0.55s ease-out both;
}
.cl-profile-hero--inline {
  flex-direction: row;
  text-align: left;
  align-items: center;
  margin-bottom: 0;
}
.cl-profile-hero--inline .cl-profile-hero__identity {
  min-width: 0;
  flex: 1 1 auto;
}

@keyframes cl-profile-hero-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cl-profile-hero__photo-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cl-profile-hero__photo-btn:hover,
.cl-profile-hero__photo-btn:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-colour-highlight) 40%, transparent);
  outline: none;
}

.cl-profile-hero__photo-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--cl-colour-highlight) 65%, var(--border-subtle));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background: color-mix(in srgb, var(--bg-elevated) 90%, #fff 4%);
}
.cl-profile-hero--inline .cl-profile-hero__photo-ring {
  width: clamp(4.5rem, 22vw, 7rem);
  height: clamp(4.5rem, 22vw, 7rem);
}

.cl-profile-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cl-profile-hero__photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
}

.cl-profile-accent-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.cl-profile-accent-swatch {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0;
  cursor: pointer;
}

.cl-profile-accent-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cl-profile-accent-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.cl-profile-accent-preset {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0;
  cursor: pointer;
}

.cl-profile-accent-preset.is-selected {
  border-color: #fff;
  outline: 2px solid var(--cl-colour-highlight);
  outline-offset: 2px;
}

.cl-display-pic__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #fff;
  text-transform: uppercase;
}

/* Table/chip mini display picture ? button-height circular avatar */
.cl-display-pic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  padding: 0;
  cursor: default;
  vertical-align: middle;
}

.cl-display-pic--mini {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
}

.cl-display-pic--md {
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  min-height: 3.25rem;
}

.cl-display-pic--lg {
  width: 5rem;
  height: 5rem;
  min-width: 5rem;
  min-height: 5rem;
}

.cl-display-pic--mini img,
.cl-display-pic--md img,
.cl-display-pic--lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* display:block above would otherwise defeat the hidden attribute and flash a broken-image icon. */
.cl-display-pic img[hidden],
.cl-display-pic img:not([src]),
.cl-display-pic img[src=""] {
  display: none;
}

.cl-display-pic--mini .cl-display-pic__fallback {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

.cl-display-pic--md .cl-display-pic__fallback {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.65);
}

.cl-display-pic--lg .cl-display-pic__fallback {
  font-size: 1.65rem;
  color: rgba(255, 255, 255, 0.65);
}

button.cl-display-pic {
  cursor: pointer;
}

button.cl-display-pic:hover,
button.cl-display-pic:focus-visible {
  border-color: color-mix(in srgb, var(--cl-colour-highlight) 45%, var(--border-subtle));
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl-colour-highlight) 20%, transparent);
}

.cl-profile-hero__nickname-row {
  width: min(100%, 28rem);
  position: relative;
  padding-top: 0.35rem;
}

.cl-profile-hero__divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--cl-colour-highlight) 55%, transparent) 20%,
    color-mix(in srgb, var(--cl-colour-accent) 45%, transparent) 80%,
    transparent
  );
  margin-bottom: 0.85rem;
}

.cl-profile-hero__nickname {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--cl-colour-contrast);
  text-shadow: 0 0 18px color-mix(in srgb, var(--cl-colour-highlight) 35%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  transition: color 0.15s ease, background 0.15s ease;
}

.cl-profile-hero__nickname:hover,
.cl-profile-hero__nickname:focus-visible {
  color: var(--cl-colour-highlight);
  background: color-mix(in srgb, var(--cl-colour-highlight) 10%, transparent);
  outline: none;
}

.cl-profile-hero__teams {
  width: min(100%, 32rem);
  min-height: 2.5rem;
}

.cl-profile-hero__team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.cl-profile-hero__team-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 5.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--cl-radius-md, 8px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cl-profile-hero__team-code {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent, #ffc44d);
}

.cl-profile-hero__team-name {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.2;
}

.cl-profile-hero__teams-empty {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}

/* Larrikin Hub ? home staff summary (cl-hub-home-*) */
.cl-hub-home-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 0;
}

[data-cl-page="larrikin-hub-home"] .cl-hub-home-hero {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  /* Mobile/stacked: content-sized. Fill-height is desktop-only (see min-width 981). */
  height: auto;
  min-height: 0;
  padding: 1.35rem 1rem 1.35rem;
}

.cl-hub-home-layout__hero {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

.cl-hub-home-layout__hero > .cl-hub-home-hero {
  flex: 0 0 auto;
}

.cl-hub-home-layout__roster {
  min-width: 0;
  /* Keep Recent sales / roster usable under the clipped page shell on mobile. */
  flex: 1 1 auto;
  min-height: min(42vh, 22rem);
}

.cl-hub-home-hero__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  width: 100%;
}

.cl-hub-home-hero__owner {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
}

.cl-hub-home-hero__identity .cl-hub-home-week__actions {
  margin-top: 0.15rem;
  justify-content: center;
}

@media (min-width: 981px) {
  .cl-hub-home-layout {
    display: grid;
    grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }

  .cl-hub-home-layout__hero {
    flex: unset;
    min-height: 0;
    height: 100%;
  }

  .cl-hub-home-layout__hero > .cl-hub-home-hero {
    flex: 1 1 auto;
  }

  [data-cl-page="larrikin-hub-home"] .cl-hub-home-hero {
    height: 100%;
    min-height: 100%;
    gap: 0;
    margin-bottom: 0;
    padding: 1.5rem 0.95rem 1.35rem;
  }

  [data-cl-page="larrikin-hub-home"] .cl-hub-home-hero--settlement {
    min-height: 100%;
  }

  [data-cl-page="larrikin-hub-home"] .cl-hub-home-hero .cl-profile-hero__photo-ring {
    width: 6.5rem;
    height: 6.5rem;
  }

  [data-cl-page="larrikin-hub-home"] .cl-hub-home-hero .cl-profile-hero__team-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cl-hub-home-welcome {
    font-size: 1.4rem;
    line-height: 1.25;
  }

  .cl-hub-home-layout__roster {
    overflow-y: auto;
    min-height: 0;
  }

  .cl-hub-home-settlement {
    margin-top: auto;
  }
}

.cl-hub-home-hero__photo-link {
  display: inline-flex;
  border-radius: 50%;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.cl-hub-home-hero__photo-link:hover,
.cl-hub-home-hero__photo-link:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
}

.cl-hub-home-welcome {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--text, #eef2ff);
  text-align: center;
}

.cl-hub-home-welcome span {
  color: var(--cl-colour-regular, #a78bfa);
}

.cl-hub-home-sections {
  gap: 1rem;
}

.cl-hub-home-week__range {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.cl-hub-home-shift-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.cl-hub-home-shift {
  display: grid;
  grid-template-columns: minmax(8.5rem, 11rem) 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
  .cl-hub-home-shift {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

.cl-hub-home-shift__day {
  font-weight: 600;
  color: var(--text, #eef2ff);
}

.cl-hub-home-shift__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.cl-hub-home-shift__team {
  font-weight: 600;
  color: var(--cl-colour-regular, #a78bfa);
}

.cl-hub-home-shift__position {
  color: rgba(255, 255, 255, 0.55);
}

.cl-hub-home-week__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cl-profile-details {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0;
}

.cl-profile-details__row {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-profile-details__row dt {
  margin: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

.cl-profile-details__row dd {
  margin: 0;
  color: var(--text, #eef2ff);
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-nav a,
.navbar-nav .nav-link {
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
}
.navbar-nav .nav-icon {
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navbar-nav .nav-icon i {
  color: inherit;
  font-size: 1.05rem;
}
.navbar-nav a:hover,
.navbar-nav .nav-link:hover {
  color: var(--text);
  background: rgba(139, 92, 246, 0.2);
}
.navbar-nav a.active,
.navbar-nav .nav-link.active {
  color: var(--accent);
  font-weight: 600;
  background: rgba(139, 92, 246, 0.25);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow);
}
.navbar-nav .nav-link.active .nav-icon,
.navbar-nav .nav-link.active .nav-icon i {
  color: inherit;
}

.nav-sep {
  color: var(--text-muted);
  opacity: 0.5;
  user-select: none;
}

/* ---------------------------------------------------------------------------
   cl-nav-drawer ? mobile hamburger + drawer (CL + Hub).
   Desktop: icon row unchanged. ?768px: hamburger; drawer slides down under nav.
   #2: .cl-nav-condensed-tabs lives in .cl-nav-shell-end (right of brand, beside hamburger).
   --------------------------------------------------------------------------- */
.cl-nav-shell {
  flex-wrap: nowrap;
  gap: 0.65rem;
}

.cl-nav-shell-end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 5.5rem);
}

.cl-nav-condensed-tabs {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(46vw, 11.5rem);
  display: none;
}

.cl-nav-condensed-tabs--active {
  display: block;
}

/* ---------------------------------------------------------------------------
   cl-tab-condensed ? #2a navbar page-tab picker (binds real [data-cl-mode-tab]).
   --------------------------------------------------------------------------- */
.cl-tab-condensed {
  --cl-tab-condensed-tone: var(--cl-colour-highlight);
  --cl-tab-condensed-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --cl-tab-condensed-ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --cl-tab-condensed-dur: 0.55s;
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.cl-tab-condensed__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
  min-height: 2.15rem;
  padding: 0.28rem 0.65rem 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-tab-condensed-tone) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-tab-condensed-tone) 18%, var(--bg-card));
  color: var(--text);
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition:
    border-color 0.35s var(--cl-tab-condensed-ease-out),
    background-color 0.35s var(--cl-tab-condensed-ease-out),
    color 0.35s var(--cl-tab-condensed-ease-out);
}

.cl-tab-condensed__trigger:hover,
.cl-tab-condensed__trigger:focus-visible {
  border-color: color-mix(in srgb, var(--cl-tab-condensed-tone) 70%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-tab-condensed-tone) 26%, var(--bg-card));
}

.cl-tab-condensed--open .cl-tab-condensed__trigger {
  border-color: color-mix(in srgb, var(--cl-tab-condensed-tone) 80%, var(--border-subtle));
}

.cl-tab-condensed__swatch {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--cl-tab-condensed-tone);
}

.cl-tab-condensed__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.cl-tab-condensed__chevron {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.72rem;
  transition: transform 0.45s var(--cl-tab-condensed-ease-out);
}

.cl-tab-condensed--open .cl-tab-condensed__chevron {
  transform: rotate(180deg);
  color: var(--text);
}

.cl-tab-condensed__picker {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cl-nav-drawer-z) - 10);
  pointer-events: none;
  display: none;
  background: transparent;
}

.cl-tab-condensed__picker[hidden] {
  display: none !important;
}

.cl-tab-condensed__picker.is-preparing,
.cl-tab-condensed__picker.is-open,
.cl-tab-condensed__picker.is-closing {
  display: block !important;
}

.cl-tab-condensed__picker.is-open {
  pointer-events: auto;
}

.cl-tab-condensed__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(6, 6, 10, 0.38);
  opacity: 0;
  transition: opacity var(--cl-tab-condensed-dur) var(--cl-tab-condensed-ease-in);
  -webkit-tap-highlight-color: transparent;
}

.cl-tab-condensed__picker.is-preparing .cl-tab-condensed__backdrop,
.cl-tab-condensed__picker.is-closing .cl-tab-condensed__backdrop {
  opacity: 0;
}

.cl-tab-condensed__picker.is-open .cl-tab-condensed__backdrop {
  opacity: 1;
  transition-timing-function: var(--cl-tab-condensed-ease-out);
}

.cl-tab-condensed__panel {
  position: absolute;
  top: var(--cl-navbar-height);
  left: 0.65rem;
  right: 0.65rem;
  max-height: min(60vh, calc(100vh - var(--cl-navbar-height) - var(--cl-footer-bar-height) - 1rem));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42);
  padding: 0.45rem;
  transform-origin: top center;
  transform: translate3d(0, -0.85rem, 0) scaleY(0.92);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    transform var(--cl-tab-condensed-dur) var(--cl-tab-condensed-ease-in),
    opacity var(--cl-tab-condensed-dur) var(--cl-tab-condensed-ease-in),
    clip-path var(--cl-tab-condensed-dur) var(--cl-tab-condensed-ease-in);
}

.cl-tab-condensed__picker.is-preparing .cl-tab-condensed__panel,
.cl-tab-condensed__picker.is-closing .cl-tab-condensed__panel {
  transform: translate3d(0, -0.85rem, 0) scaleY(0.92);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}

.cl-tab-condensed__picker.is-open .cl-tab-condensed__panel {
  transform: translate3d(0, 0, 0) scaleY(1);
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-timing-function: var(--cl-tab-condensed-ease-out);
}

.cl-tab-condensed__list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.cl-tab-condensed__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.cl-tab-condensed__option:hover,
.cl-tab-condensed__option:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--cl-tab-tone, var(--cl-colour-accent)) 16%, var(--bg-elevated));
  outline: none;
}

.cl-tab-condensed__option.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--cl-tab-tone, var(--cl-colour-active)) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-tab-tone, var(--cl-colour-active)) 22%, var(--bg-card));
}

.cl-tab-condensed__option-swatch {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--cl-tab-tone, var(--cl-colour-highlight));
}

.cl-tab-condensed__option-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* When condensed tabs are bound, hide the page title-row tab / calendar strip on mobile. */
@media (max-width: 768px) {
  [data-cl-mode-shell][data-cl-tab-condensed-bound] .cl-title-row--mode > nav.cl-mode-tabs,
  [data-cl-mode-shell][data-cl-tab-condensed-bound] .cl-title-row--mode > .cl-title-nav-drop {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-tab-condensed__trigger,
  .cl-tab-condensed__chevron,
  .cl-tab-condensed__backdrop,
  .cl-tab-condensed__panel {
    transition: none !important;
  }

  .cl-tab-condensed__panel {
    transform: none;
    clip-path: none;
  }
}

/* Mode / tab / roster switch ? soft fade out ? fade in (cl_mode_fade.js). */
[data-cl-tab-work-area],
[data-cl-rail-work-area],
[data-cl-cal-roster-section],
[data-cl-mode-fade-target],
.cl-tab-work-area {
  transition: opacity 0.28s ease;
}

.is-cl-mode-fading-out {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.is-cl-mode-fading-in {
  animation: cl-mode-fade-in 0.3s ease;
}

@keyframes cl-mode-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-cl-tab-work-area],
  [data-cl-rail-work-area],
  [data-cl-cal-roster-section],
  [data-cl-mode-fade-target],
  .cl-tab-work-area,
  .is-cl-mode-fading-out,
  .is-cl-mode-fading-in {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Soft Loader ? global container thinking swap (cl_soft_loader.js). */
.cl-soft-loader {
  position: relative;
}

.cl-soft-loader__content {
  transition: opacity 0.18s ease;
}

/* Fill remaining sticky/viewport height (e.g. rail shells inside soft-loader). */
.cl-soft-loader__content--fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cl-soft-loader__content--fill > .cl-rail-template--shell {
  flex: 1 1 auto;
  min-height: 0;
}

.cl-soft-loader--busy {
  min-height: 12rem;
}

.cl-soft-loader__content.is-cl-soft-loader-out {
  opacity: 0;
  pointer-events: none;
}

.cl-soft-loader__content.is-cl-soft-loader-in {
  animation: cl-soft-loader-in 0.22s ease;
}

.cl-soft-loader__thinker {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  pointer-events: none;
}

.cl-soft-loader__thinker[hidden] {
  display: none !important;
}

@keyframes cl-soft-loader-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-soft-loader__content,
  .cl-soft-loader__content.is-cl-soft-loader-out,
  .cl-soft-loader__content.is-cl-soft-loader-in {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}

.cl-nav-menu-toggle {
  --cl-nav-toggle-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
  transition: color 0.45s var(--cl-nav-toggle-ease);
}

.cl-nav-menu-toggle:hover,
.cl-nav-menu-toggle:focus,
.cl-nav-menu-toggle:focus-visible,
.cl-nav-menu-toggle:active,
.cl-nav-shell--drawer-open .cl-nav-menu-toggle,
.cl-nav-shell--drawer-open .cl-nav-menu-toggle:hover,
.cl-nav-shell--drawer-open .cl-nav-menu-toggle:focus-visible {
  /* No filled square ? colour change only */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  outline: none;
  color: var(--text);
}

.cl-nav-shell--drawer-open .cl-nav-menu-toggle {
  color: var(--accent);
}

.cl-nav-menu-toggle .nav-icon {
  display: inline-flex;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-nav-shell--drawer-open .cl-nav-menu-toggle .nav-icon {
  transform: rotate(90deg);
}

.cl-nav-menu-toggle .nav-icon i {
  font-size: 1.15rem;
}

.cl-nav-drawer {
  --cl-nav-drawer-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --cl-nav-drawer-ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --cl-nav-drawer-dur: 0.62s;
  position: fixed;
  inset: 0;
  z-index: var(--cl-nav-drawer-z);
  pointer-events: none;
  display: none;
  background: transparent;
}

.cl-nav-drawer[hidden] {
  display: none !important;
}

/* Only paint the overlay while preparing / open / closing ? never a bare visible frame. */
.cl-nav-drawer.is-preparing,
.cl-nav-drawer.is-open,
.cl-nav-drawer.is-closing {
  display: block !important;
}

.cl-nav-drawer.is-open {
  pointer-events: auto;
}

.cl-nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 10, 0.42);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--cl-nav-drawer-dur) var(--cl-nav-drawer-ease-in);
  -webkit-tap-highlight-color: transparent;
}

.cl-nav-drawer.is-preparing .cl-nav-drawer__backdrop,
.cl-nav-drawer.is-closing .cl-nav-drawer__backdrop {
  opacity: 0;
}

.cl-nav-drawer.is-open .cl-nav-drawer__backdrop {
  opacity: 1;
  transition-timing-function: var(--cl-nav-drawer-ease-out);
}

.cl-nav-drawer__panel {
  position: absolute;
  top: var(--cl-navbar-height);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--cl-navbar-height) - var(--cl-footer-bar-height));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42);
  padding: 0.65rem 0.85rem 0.95rem;
  transform-origin: top center;
  transform: translate3d(0, -1.25rem, 0) scaleY(0.88);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    transform var(--cl-nav-drawer-dur) var(--cl-nav-drawer-ease-in),
    opacity var(--cl-nav-drawer-dur) var(--cl-nav-drawer-ease-in),
    clip-path var(--cl-nav-drawer-dur) var(--cl-nav-drawer-ease-in);
  will-change: transform, opacity, clip-path;
}

.cl-nav-drawer.is-preparing .cl-nav-drawer__panel,
.cl-nav-drawer.is-closing .cl-nav-drawer__panel {
  transform: translate3d(0, -1.25rem, 0) scaleY(0.88);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}

.cl-nav-drawer.is-open .cl-nav-drawer__panel {
  transform: translate3d(0, 0, 0) scaleY(1);
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-timing-function: var(--cl-nav-drawer-ease-out);
}

.cl-nav-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.cl-nav-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 2.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0;
  transform: translate3d(0, -0.55rem, 0);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    opacity 0.4s var(--cl-nav-drawer-ease-out),
    transform 0.48s var(--cl-nav-drawer-ease-out);
}

.cl-nav-drawer.is-open .cl-nav-drawer__link {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.cl-nav-drawer.is-preparing .cl-nav-drawer__link,
.cl-nav-drawer.is-closing .cl-nav-drawer__link {
  opacity: 0;
  transform: translate3d(0, -0.4rem, 0);
  transition-duration: 0.22s;
  transition-timing-function: var(--cl-nav-drawer-ease-in);
}

.cl-nav-drawer.is-open .cl-nav-drawer__list > li:nth-child(1) .cl-nav-drawer__link { transition-delay: 0.1s; }
.cl-nav-drawer.is-open .cl-nav-drawer__list > li:nth-child(2) .cl-nav-drawer__link { transition-delay: 0.16s; }
.cl-nav-drawer.is-open .cl-nav-drawer__list > li:nth-child(3) .cl-nav-drawer__link { transition-delay: 0.22s; }
.cl-nav-drawer.is-open .cl-nav-drawer__list > li:nth-child(4) .cl-nav-drawer__link { transition-delay: 0.28s; }
.cl-nav-drawer.is-open .cl-nav-drawer__list > li:nth-child(5) .cl-nav-drawer__link { transition-delay: 0.34s; }
.cl-nav-drawer.is-open .cl-nav-drawer__list > li:nth-child(6) .cl-nav-drawer__link { transition-delay: 0.4s; }
.cl-nav-drawer.is-open .cl-nav-drawer__list > li:nth-child(7) .cl-nav-drawer__link { transition-delay: 0.46s; }
.cl-nav-drawer.is-open .cl-nav-drawer__list > li:nth-child(8) .cl-nav-drawer__link { transition-delay: 0.52s; }

.cl-nav-drawer.is-preparing .cl-nav-drawer__list > li .cl-nav-drawer__link,
.cl-nav-drawer.is-closing .cl-nav-drawer__list > li .cl-nav-drawer__link {
  transition-delay: 0s;
}

.cl-nav-drawer__link .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  color: inherit;
  transition: transform 0.22s var(--cl-nav-drawer-ease-out);
}

.cl-nav-drawer__link:hover .nav-icon,
.cl-nav-drawer__link:focus-visible .nav-icon {
  transform: scale(1.08);
}

.cl-nav-drawer__link .nav-icon i,
.cl-nav-drawer__link .cl-brand-logo--hub-short {
  font-size: 1.05rem;
}

.cl-nav-drawer__link .cl-brand-logo--hub-short {
  height: 1.25rem;
  width: auto;
}

.cl-nav-drawer__label {
  flex: 1 1 auto;
  min-width: 0;
}

.cl-nav-drawer__link:hover,
.cl-nav-drawer__link:focus-visible {
  color: var(--text);
  background: rgba(139, 92, 246, 0.18);
  outline: none;
}

.cl-nav-drawer__link.active {
  color: var(--accent);
  background: rgba(139, 92, 246, 0.25);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow);
}

html.cl-nav-drawer-open,
body.cl-nav-drawer-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .cl-nav-shell.navbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  .cl-nav-condensed-tabs--active {
    display: block;
  }

  .cl-nav-menu-toggle {
    display: inline-flex;
  }

  .cl-nav-desktop {
    display: none !important;
  }

  .cl-nav-shell .navbar-brand-text {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 769px) {
  .cl-nav-menu-toggle,
  .cl-nav-drawer {
    display: none !important;
  }

  .cl-nav-condensed-tabs {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-nav-menu-toggle,
  .cl-nav-menu-toggle .nav-icon,
  .cl-nav-drawer__backdrop,
  .cl-nav-drawer__panel,
  .cl-nav-drawer__link,
  .cl-nav-drawer__link .nav-icon {
    transition: none !important;
    animation: none !important;
  }

  .cl-nav-drawer__panel {
    transform: none;
    clip-path: none;
  }

  .cl-nav-drawer:not(.is-open) .cl-nav-drawer__panel {
    opacity: 0;
  }

  .cl-nav-drawer.is-open .cl-nav-drawer__link {
    opacity: 1;
    transform: none;
  }
}

/* ----- Main content ----- */
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + var(--cl-footer-bar-height));
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   CardLarrikin Template System
   Guide: docs/cardlarrikin_template_system.md
   Block inventory: docs/cardlarrikin_template_blocks.md
   -------------------------------------------------------------------------- */
/* Reusable app-width container. V2 pages adopt this first. */
.cl-main-container {
  width: 90%;
  max-width: 1440px;
  min-width: min(100%, 1000px);
  margin: 0 auto;
}

.cl-main-container,
.cl-main-container * {
  box-sizing: border-box;
}

/* Non-home pages: bound main column to viewport minus navbar/footer (no body scroll). */
.cl-main-container.cl-page-shell-viewport {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: calc(
    100vh - var(--cl-navbar-height) - var(--cl-main-padding-block) - var(--cl-footer-bar-height)
  );
  max-height: calc(
    100vh - var(--cl-navbar-height) - var(--cl-main-padding-block) - var(--cl-footer-bar-height)
  );
  overflow: hidden;
}

/*
  Opt-in grow shell (cl-page-shell-viewport--grow).
  On stacked / multi-panel pages (e.g. Hub Home), short screens stop hard-locking
  height to one viewport. Height follows real content; scroll only when needed
  (no blank extra scroll). Desktop (>=981) keeps the normal locked shell.
  Rail pages are out of scope for now — do not add --grow there yet.
*/
@media (max-width: 980px) {
  .cl-main-container.cl-page-shell-viewport.cl-page-shell-viewport--grow,
  .cl-main-container.cl-page-shell-viewport.cl-page-shell-viewport--tabbed.cl-page-shell-viewport--grow {
    max-height: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* Inner stacks stop owning scroll — the page column scrolls as one. */
  .cl-main-container.cl-page-shell-viewport.cl-page-shell-viewport--grow .cl-page-section-stack,
  .cl-main-container.cl-page-shell-viewport.cl-page-shell-viewport--grow .cl-tab-work-area,
  .cl-main-container.cl-page-shell-viewport.cl-page-shell-viewport--grow .cl-tab-work-area-container {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
  }

  .cl-main-container.cl-page-shell-viewport.cl-page-shell-viewport--grow .cl-hub-home-layout__roster {
    min-height: 0;
    overflow: visible;
  }
}

.cl-page-section-stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

/* Framed section surface for general (non-card) page blocks ? not .cl-card-container. */
.cl-container-frame {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  flex-shrink: 0;
}

/* Future: horizontal overflow for wide tables/toolbars inside a frame. */
.cl-container-frame-wide {
  overflow-x: auto;
}

.cl-container-frame--compact {
  padding: 0.65rem 0.85rem;
  gap: 0.45rem;
}

.cl-status-container {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cl-sub-title-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cl-sub-title-container h2,
.cl-sub-title-container h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.cl-status-line {
  margin: 0;
  line-height: 1.45;
}

.cl-status-line--quiet {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.cl-status-line--normal {
  color: var(--text);
}

.cl-status-line--success {
  color: var(--success);
}

.cl-status-line--warning {
  color: var(--warning);
}

.cl-status-line--error {
  color: var(--error);
}

/* Reusable rail-page title/actions container */
.cl-title-container {
  width: 100%;
  display: grid;
  gap: 0.45rem;
}

.cl-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Events Calendar ? centred month title + right-aligned nav controls */
.cl-title-row--cal-month {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem 0.85rem;
  flex-wrap: nowrap;
}
.cl-title-row--cal-month .cl-title-row__center {
  justify-self: center;
  text-align: center;
  min-width: 0;
}
.cl-title-row--cal-month .cl-title-row__end {
  justify-self: end;
  justify-content: flex-end;
  margin-left: 0;
  min-width: 0;
}
.cl-title-row--cal-month .cl-cal__toolbar-group--grow {
  flex: 0 0 auto;
  justify-content: flex-end;
}
.cl-cal__range-label--hero {
  display: block;
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .cl-title-row--cal-month {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .cl-title-row--cal-month .cl-title-row__start {
    display: none;
  }
  .cl-title-row--cal-month .cl-title-row__center,
  .cl-title-row--cal-month .cl-title-row__end {
    justify-self: stretch;
  }
  .cl-title-row--cal-month .cl-title-row__end {
    justify-content: flex-end;
  }
  .cl-cal__range-label--hero {
    white-space: normal;
  }
}

/* Soft month/range navigation fade (ClCalendar fadeOnNavigate) */
.cl-cal__body.is-cl-cal-fading-out {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cl-cal__body.is-cl-cal-fading-in {
  animation: cl-cal-body-fade-in 0.32s ease both;
}
@keyframes cl-cal-body-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-cal__body.is-cl-cal-fading-out,
  .cl-cal__body.is-cl-cal-fading-in {
    opacity: 1;
    transition: none;
    animation: none;
  }
}

.cl-title-row-actions {
  margin-top: 0;
  margin-left: auto;
  justify-content: flex-end;
  align-items: center;
  gap: 0.55rem;
}

.cl-title-row-actions .cl-btn-row {
  gap: 0.35rem;
}

.cl-page-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.15;
}
.cl-page-title--guide {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.cl-page-title--guide-step {
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  font-weight: 700;
}

.cl-page-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.cl-page-subtitle--guide {
  font-size: 0.98rem;
}

.cl-action-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

/*
 * Dedicated page action strip ? own chrome above content frames.
 * Do not style this like .cl-container-frame (tile/content surface).
 */
.cl-action-strip {
  width: 100%;
  box-sizing: border-box;
  margin: 0.15rem 0 0.55rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-card) 88%, var(--bg-dark));
}

.cl-sticky-under-nav-scope > .cl-action-strip.cl-action-strip {
  margin: 0;
}

/* L/R split action row inside .cl-action-strip (or similar). */
.cl-action-row--split {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  margin-left: 0;
  width: 100%;
}

.cl-action-row__left,
.cl-action-row__right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.cl-action-row__left {
  flex: 1 1 auto;
}

.cl-action-row__right {
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
}

/* Mode tools slot ? expands/fades beside Cancel (cl_action_mode_slot.js). */
.cl-action-row__mode {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  margin-inline-end: 0;
  transition:
    max-width 0.26s ease,
    opacity 0.18s ease,
    margin 0.26s ease;
}

.cl-action-row__mode.is-cl-action-mode-open {
  max-width: 22rem;
  opacity: 1;
  pointer-events: auto;
  margin-inline-end: 0.15rem;
}

.cl-action-row__mode[hidden] {
  display: none !important;
}

.cl-action-row--split.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track {
  justify-content: flex-start;
  gap: 0.75rem;
}

.cl-action-row--split.cl-row-swipe.is-cl-row-swipe-active .cl-action-row__left,
.cl-action-row--split.cl-row-swipe.is-cl-row-swipe-active .cl-action-row__right {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
}

@media (prefers-reduced-motion: reduce) {
  .cl-action-row__mode {
    transition: none !important;
  }
}

/* Sticky under navbar ? global (cl_sticky_under_nav.js).
   Sticky only lasts while its containing block is on-screen ? wrap the strip
   AND the scrolling content in .cl-sticky-under-nav-scope so tiles slide under
   the docked bar instead of shoving it away. */
.cl-sticky-under-nav-scope {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.cl-sticky-under-nav__sentinel {
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}

.cl-sticky-under-nav {
  position: sticky;
  top: var(--cl-navbar-height);
  z-index: var(--cl-sticky-under-nav-z);
  box-sizing: border-box;
  isolation: isolate;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    border-radius 0.18s ease,
    border-color 0.18s ease,
    margin 0.18s ease,
    padding 0.18s ease;
}

/* Strip sits at the top of the sticky scope; margin handled by scope gap. */
.cl-sticky-under-nav-scope > .cl-action-strip {
  margin-top: 0;
  margin-bottom: 0;
}

.cl-action-strip.cl-sticky-under-nav.is-cl-sticky-under-nav,
.cl-sticky-under-nav.is-cl-sticky-under-nav {
  /* Match page canvas so scrolling tiles never show through as ?inside? the bar. */
  background: var(--bg-dark);
  border-color: var(--border-subtle);
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  margin-bottom: 0;
}

.cl-action-strip.cl-sticky-under-nav.is-cl-sticky-under-nav {
  /* Keep a solid under-nav band; do not borrow .cl-container-frame look. */
  padding: 0.5rem 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .cl-sticky-under-nav {
    transition: none !important;
  }
}

/* Reusable button surface classes (additive to .btn). */
.cl-btn {
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.cl-btn--small {
  min-height: 2rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.82rem;
}

.cl-btn--regular {
  background: var(--cl-colour-regular);
  color: #fff;
  border-color: var(--cl-colour-accent);
}

.cl-btn--inactive {
  background: var(--inactive-bg);
  color: var(--inactive-text);
  border-color: var(--inactive-border);
}

/* Destructive admin actions (e.g. standalone DB purge) ? not a primary CTA */
.cl-btn--purge-danger {
  background: #f3f4f6;
  color: #991b1b;
  border-color: #dc2626;
}
.cl-btn--purge-danger:hover:not(:disabled) {
  filter: brightness(0.96);
}

.cl-btn--highlight {
  background: #ffa033;
  color: #5e17a2;
  border-color: #b26400;
}

/* Orange accent (e.g. Workspace Image Add in progress); matches highlight orange */
.cl-btn--accent {
  background: #ffa033;
  color: #5e17a2;
  border-color: #b26400;
}

/* Quiet tone ? transparent toolbar / controls surfaces (CL-UNI-2) */
.cl-btn--quiet {
  background: transparent;
  color: color-mix(in srgb, #fff 75%, var(--text-muted) 25%);
  border-color: color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  opacity: 0.86;
}

.cl-btn--pill {
  border-radius: 999px;
}

.cl-btn--icon {
  min-width: 2rem;
  padding: 0 0.45rem;
  justify-content: center;
}

.cl-btn--locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.cl-btn--locked:hover:not(:disabled),
.cl-btn--locked:focus-visible:not(:disabled) {
  opacity: 0.6;
}

.cl-btn--danger {
  background: var(--danger);
  color: #fff;
  border-color: color-mix(in srgb, var(--danger) 70%, #000 30%);
}

.cl-btn--danger:hover:not(:disabled),
.cl-btn--danger:focus-visible:not(:disabled) {
  filter: brightness(1.06);
}

.cl-btn--success {
  background: var(--success);
  color: #fff;
  border-color: color-mix(in srgb, var(--success) 70%, #000 30%);
}

.cl-btn--success:hover:not(:disabled),
.cl-btn--success:focus-visible:not(:disabled) {
  filter: brightness(1.06);
}

.cl-btn--warning {
  background: var(--warning);
  color: #111827;
  border-color: color-mix(in srgb, var(--warning) 65%, #000 35%);
}

.cl-btn--warning:hover:not(:disabled),
.cl-btn--warning:focus-visible:not(:disabled) {
  filter: brightness(1.05);
}

/* Staff/utility actions ? deeper purple from style guide accent token */
.cl-btn--utility {
  background: var(--cl-colour-accent);
  color: #fff;
  border-color: color-mix(in srgb, var(--cl-colour-accent) 70%, #000 30%);
}

.cl-btn--utility:hover:not(:disabled),
.cl-btn--utility:focus-visible:not(:disabled) {
  filter: brightness(1.08);
}

/* Compact quiet pill ? Browser controls row base */
.cl-btn.cl-btn--quiet.cl-btn--pill.cl-btn--small {
  min-height: 1.65rem;
  padding: 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  transition: opacity var(--transition), color var(--transition), border-color var(--transition),
    background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.cl-btn.cl-btn--quiet.cl-btn--pill.cl-btn--small:hover:not(:disabled),
.cl-btn.cl-btn--quiet.cl-btn--pill.cl-btn--small:focus-visible:not(:disabled) {
  opacity: 1;
  color: #fff;
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-accent) 30%);
  outline: none;
}

/* Reusable rail/template shells */
.cl-rail-template {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 20%) minmax(0, 1fr);
  gap: 1rem;
  min-height: 0;
}

.cl-rail {
  min-height: 0;
  min-width: 0;
}

.cl-rail-card-container {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 32%) minmax(0, 1fr);
  gap: 1rem;
}

.cl-thumbnail-container {
  min-width: 0;
  min-height: 0;
}

.cl-work-container {
  min-width: 0;
  min-height: 0;
}

/* Reusable rail tiles */
.cl-rail-tile {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  text-align: left;
  padding: 0.48rem 0.62rem;
  min-height: 54px;
  font-size: 0.83rem;
  line-height: 1.28;
  font-weight: 600;
  word-break: normal;
  overflow-wrap: anywhere;
  white-space: normal;
  box-sizing: border-box;
  transition: transform var(--transition), filter var(--transition), opacity var(--transition);
}

/* Polish v3: tiles no longer carry a left status bar by default ? only G/Y/R get a ::before bar. */
.cl-rail-tile--regular,
.cl-rail-tile--triage-green,
.cl-rail-tile--triage-yellow,
.cl-rail-tile--triage-red,
.cl-rail-tile--approved,
.cl-rail-tile--fake { border-left-color: var(--border-subtle); }
.cl-rail-tile--locked { border-left-color: var(--border-subtle); opacity: 0.72; color: var(--text-muted); }
/* Rail template: mode-title pattern + rail/work shell (polish v3) */
.cl-title-container--mode {
  display: flex;
  flex-direction: column;
  gap: 0;
  --cl-mode-tone: var(--cl-mode-step-0);
  --cl-mode-tone-edge: color-mix(in srgb, var(--cl-mode-tone) 78%, #000);
}

.cl-title-row--mode {
  align-items: flex-end;
  gap: 0.85rem;
  padding-top: 0.15rem;
  padding-bottom: 0;
  margin-bottom: 0;
  min-height: 2.6rem;
}

.cl-title-container--mode .cl-page-title {
  margin: 0;
  padding-bottom: 0.1rem;
}

/* Workspace title + hydrate thinker / refresh (Slice 4). */
.cl-ws-title-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.cl-ws-hydrate {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.35rem;
}

.cl-ws-hydrate[hidden] {
  display: none;
}

.cl-ws-hydrate__thinker {
  flex-shrink: 0;
}

.cl-ws-hydrate__refresh {
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0.15rem 0.35rem;
  line-height: 1;
}

.cl-ws-hydrate__refresh[hidden] {
  display: none;
}

.cl-ws-hydrate__refresh i {
  font-size: 0.85rem;
}

/* Desktop: small gap under Workspace title so H2 does not sit on the mode action strip */
@media (min-width: 981px) {
  .cl-title-container--mode .cl-page-title {
    padding-bottom: 0.38rem;
  }

  .cl-ws-title-cluster {
    padding-bottom: 0.28rem;
  }
}

/* Mode tabs container ? pin tabs to the bottom of the title row so they touch the strip cleanly */
.cl-mode-tabs {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0.18rem;
  padding-top: 0.15rem;
  align-self: flex-end;
}

/* Folder tab ? vibrant step colour, bottom open into the strip */
.cl-mode-tab.cl-mode-tab {
  --cl-tab-tone: var(--cl-mode-step-0);
  min-height: 2rem;
  padding: 0.36rem 0.95rem 0.42rem;
  border-radius: 0.6rem 0.6rem 0 0;
  border: 1px solid color-mix(in srgb, var(--cl-tab-tone) 70%, #000);
  border-bottom: none;
  margin-bottom: 0;
  background: var(--cl-tab-tone);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: 1;
  filter: brightness(0.78) saturate(0.95);
  transition: filter var(--transition), transform var(--transition);
  position: relative;
}
.cl-mode-tab__short { display: none; }
@media (max-width: 640px) {
  .cl-mode-tab__full { display: none; }
  .cl-mode-tab__short { display: inline; }
}

.cl-mode-tab.cl-mode-tab:hover:not(.cl-mode-tab--active) {
  filter: brightness(0.92) saturate(1);
}

/* Active tab takes the mode tone and visually fuses with the strip below */
.cl-mode-tab.cl-mode-tab.cl-mode-tab--active {
  background: var(--cl-mode-tone);
  border-color: var(--cl-mode-tone-edge);
  border-bottom: none;
  margin-bottom: -1px;
  z-index: 3;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(1px);
}

/* Mode strip surface ? shared base for Workspace action strip + Browser cl-sbar.
   Tone-tinted dark surface (Browser look) so the active tab still "connects" via tone-edge top border. */
.cl-mode-strip-base,
.cl-mode-action-strip,
.cl-sbar {
  position: relative;
  margin-top: -1px;
  z-index: 1;
  border: 1px solid var(--cl-mode-tone-edge);
  border-top: 2px solid var(--cl-mode-tone);
  border-radius: var(--radius) 0 var(--radius) var(--radius);
  background: color-mix(in srgb, var(--cl-mode-tone) 22%, var(--bg-card));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background var(--transition), border-color var(--transition);
}

.cl-mode-action-strip {
  padding: 0.42rem 0.6rem;
}

.cl-mode-action-row {
  width: 100%;
  min-height: 1.6rem;
  gap: 0.4rem;
}

/* .cl-btn-row { display:flex } beats the UA [hidden] rule — tab-scoped
   action rows must collapse fully when another mode is active. */
.cl-mode-action-row[hidden],
.cl-mode-action-strip[hidden],
.cl-btn.cl-btn--small[hidden],
a.cl-btn[hidden] {
  display: none;
}

/* Tab-scoped action groups inside one .cl-btn-row (Hub Admin / Settings pattern). */
.cl-mode-action-row > [data-cl-hub-admin-action-teams],
.cl-mode-action-row > [data-cl-hub-admin-action-vendors],
.cl-mode-action-row > [data-cl-hub-admin-action-back-office] {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  width: 100%;
}

.cl-mode-action-row > [data-cl-hub-admin-action-teams]:not([hidden]),
.cl-mode-action-row > [data-cl-hub-admin-action-vendors]:not([hidden]),
.cl-mode-action-row > [data-cl-hub-admin-action-back-office]:not([hidden]) {
  display: flex;
}

/* Title-row calendar nav drop (replaces mode tabs when the list is dynamic). */
.cl-title-nav-drop {
  margin-left: auto;
  align-self: flex-end;
  margin-bottom: 0.15rem;
}

.cl-title-nav-drop.cl-filter-item.cl-filter-drop .cl-filter-drop-control {
  min-width: 9rem;
  max-width: 16rem;
}

/* Calendar tools strip: + Event / + Calendar | date nav | Day/Week/Month */
.cl-mode-action-row--cal-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}

.cl-mode-action-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.cl-mode-action-group--nav {
  flex: 1 1 auto;
  justify-content: center;
}

.cl-mode-action-group--views {
  margin-left: auto;
  justify-content: flex-end;
}

.cl-mode-action-group .cl-cal__toolbar-group {
  gap: 0.3rem;
}

.cl-mode-action-group--nav .cl-cal__range-label {
  min-width: 8rem;
}

.cl-mode-action-row .cl-btn.cl-btn--inactive:not(.cl-action-group-btn):not(.cl-collection-pool__btn) {
  min-height: 1.7rem;
  padding: 0.18rem 0.66rem;
  font-size: 0.76rem;
  border-radius: 0.42rem;
  background: var(--inactive-bg);
  color: var(--inactive-text);
  border-color: var(--inactive-border);
  opacity: 0.95;
  cursor: not-allowed;
  pointer-events: auto;
  font-weight: 600;
}

/* Collection Display result-pool switcher (Owned / All / Consignment). */
.cl-collection-pool {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex: 0 0 auto;
}
.cl-collection-pool__btn.btn {
  min-height: 1.7rem;
  padding: 0.18rem 0.7rem;
  font-size: 0.76rem;
  border-radius: 0.42rem;
  font-weight: 650;
  cursor: pointer;
}
.cl-collection-pool__btn.cl-btn--inactive {
  opacity: 0.92;
  cursor: pointer;
}
.cl-collection-pool__btn.cl-btn--inactive:hover,
.cl-collection-pool__btn.cl-btn--inactive:focus-visible {
  filter: brightness(1.06);
  box-shadow: none;
}
.cl-collection-pool__btn.is-active,
.cl-collection-pool__btn[aria-pressed="true"] {
  background: var(--cl-colour-regular);
  color: #fff;
  border-color: var(--cl-colour-accent);
}

/* Match Sort/View filter pills in the collection action row. */
button.cl-filter-item.cl-collection-add-purchase {
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

button.cl-filter-item.cl-collection-add-purchase:hover,
button.cl-filter-item.cl-collection-add-purchase:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--cl-colour-active) 58%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-accent) 30%);
}

button.cl-filter-item.cl-collection-add-purchase .cl-filter-label {
  color: inherit;
}

.cl-mode-action-row .cl-btn.cl-btn--inactive:not(.cl-action-group-btn):hover,
.cl-mode-action-row .cl-btn.cl-btn--inactive:not(.cl-action-group-btn):focus {
  background: var(--inactive-bg);
  color: var(--inactive-text);
  border-color: var(--inactive-border);
  filter: none;
  box-shadow: none;
}

/* Grouped action strip ? reusable subtitle-led clusters of scoped tools
   (Workspace Home "Add to workspace" / "Actions"). Each group is a labelled
   column; buttons inside are icon-only cl-btn--inactive placeholders for now. */
.cl-mode-action-row--groups {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 1.1rem;
}

.cl-action-group {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.cl-action-group-subtitle {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cl-action-group-buttons {
  gap: 0.35rem;
}

.cl-action-group-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  box-sizing: border-box;
  flex-shrink: 0;
  min-width: 2.35rem;
  min-height: 2rem;
  height: 2rem;
  padding: 0.32rem 0.55rem;
  border-radius: var(--radius);
  text-decoration: none;
}

.cl-action-group-btn.cl-btn--inactive {
  opacity: 0.95;
  cursor: not-allowed;
}

.cl-action-group-btn-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  font-size: 0.85rem;
  line-height: 1;
}

/* Rail-nav remove/drop active-card control ? sits to the right of skip-to-end.
   Part of the reusable rail-nav pattern; danger-toned but currently a locked
   no-op (active-card removal waits on the Workspace session model). */
.cl-btn.cl-btn--rail-nav.cl-btn--danger,
.cl-rail-nav-button--remove {
  margin-left: auto;
  background: transparent;
  color: color-mix(in srgb, var(--danger, #e06c75) 70%, #fff);
  border-color: color-mix(in srgb, var(--danger, #e06c75) 35%, var(--border-subtle));
  filter: none;
}

.cl-btn.cl-btn--rail-nav.cl-btn--danger:hover:not(:disabled),
.cl-btn.cl-btn--rail-nav.cl-btn--danger:focus-visible:not(:disabled),
.cl-rail-nav-button--remove:hover,
.cl-rail-nav-button--remove:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--danger, #e06c75) 18%, transparent);
  border-color: color-mix(in srgb, var(--danger, #e06c75) 55%, var(--border-subtle));
}

.cl-btn.cl-btn--rail-nav.cl-btn--locked,
.cl-rail-nav-button--locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.cl-btn.cl-btn--rail-nav.cl-btn--locked:hover:not(:disabled),
.cl-btn.cl-btn--rail-nav.cl-btn--locked:focus-visible:not(:disabled),
.cl-rail-nav-button--locked:hover,
.cl-rail-nav-button--locked:focus-visible {
  opacity: 0.6;
}

/* Inactive / empty rail tile ? shown when the workspace session has no cards.
   Non-interactive look, muted text. Reusable rail-template modifier. */
.cl-rail-tile--inactive {
  opacity: 0.6;
  cursor: default;
  font-style: italic;
}

.cl-rail-tile--inactive .cl-rail-tile-primary {
  color: var(--text-muted, #9aa0aa);
}

/* Rail work area: single scrolling column that stacks the title + frames the
   rail template JS renders (Home overview / mode placeholder / empty state). */
.cl-rail-work-scroll {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--cl-rail-gap, 0.75rem);
}

.cl-rail-work-scroll > .cl-container-frame,
.cl-rail-work-scroll > .cl-title-container {
  flex: 0 0 auto;
}

/* Two-column split inside a rail work frame (images|market, details|session).
   Reusable beyond Workspace; collapses to one column on narrow viewports. */
.cl-rail-overview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cl-rail-gap, 0.75rem);
  align-items: start;
}

@media (max-width: 900px) {
  .cl-rail-overview-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Page viewport: fill space between navbar and footer-bar; padding becomes the visible gap */
.cl-main-container.cl-page-shell-viewport.cl-page-shell-viewport--rail {
  padding-top: var(--cl-rail-gap);
  padding-bottom: var(--cl-rail-gap);
  gap: var(--cl-rail-gap);
  height: calc(100vh - var(--cl-navbar-height) - var(--cl-footer-bar-height));
  min-height: 0;
  max-height: calc(100vh - var(--cl-navbar-height) - var(--cl-footer-bar-height));
  overflow: hidden;
}

/* Rail pages: the block under the title/action chrome must consume remaining height
   so .cl-rail-template--shell (rail + work area) stretches to the footer gap.
   Review wraps the shell in sticky-scope + soft-loader; Workspace/Quick Fix put
   the shell directly under main. */
.cl-main-container.cl-page-shell-viewport--rail > .cl-sticky-under-nav-scope,
.cl-main-container.cl-page-shell-viewport--rail > .cl-rail-template--shell {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.cl-main-container.cl-page-shell-viewport--rail > .cl-sticky-under-nav-scope {
  display: flex;
  flex-direction: column;
}

/* Embedded Rail Template inside a Tabbed Page (Shopify Link ? Sync Rail) ? fills the panel,
   no extra viewport math because the parent .cl-tab-panel already scrolls. */
.cl-rail-template--embedded {
  display: grid;
  grid-template-columns: var(--cl-rail-width) minmax(0, 1fr);
  gap: var(--cl-rail-gap);
  min-height: 360px;
  height: 100%;
  align-content: stretch;
}

/* Tabbed page viewport ? same bounded height idea, with cl-rail-gap breathing room */
.cl-main-container.cl-page-shell-viewport.cl-page-shell-viewport--tabbed {
  padding-top: var(--cl-rail-gap);
  padding-bottom: var(--cl-rail-gap);
  gap: var(--cl-rail-gap);
  height: calc(100vh - var(--cl-navbar-height) - var(--cl-footer-bar-height));
  min-height: 0;
  max-height: calc(100vh - var(--cl-navbar-height) - var(--cl-footer-bar-height));
  overflow: hidden;
}

/* -----------------------------------------------------------------------
   Tabbed Page template ? reusable beyond Browser
   ----------------------------------------------------------------------- */

/* Tabbed Page layout modifier ? keep tabs fused to the strip (matches Workspace) */
.cl-title-container--tabbed {
  gap: 0;
}

.cl-mode-tabs--tabbed {
  align-items: flex-end;
}

/* cl-sbar: layout details only ? base surface comes from .cl-mode-strip-base / .cl-mode-action-strip / .cl-sbar shared block above */
.cl-sbar {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
}

.cl-sbar-main-row {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
  position: relative;
}

/* Smart-search input wrapper hosts the suggestions dropdown */
.cl-sbar-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.cl-sbar-input-wrap > .cl-sbar-input {
  flex: 1 1 auto;
}

.cl-sbar-input-thinker {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.cl-sbar-input-thinker[hidden] { display: none; }

/* Suggestions dropdown */
.cl-sbar-suggestions {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 0.18rem 0;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 32%, var(--border-subtle));
  border-radius: 0.5rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  max-height: min(60vh, 22rem);
  overflow-y: auto;
}

.cl-sbar-suggestions[hidden] { display: none; }

.cl-sbar-suggestion {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--text);
  border-left: 3px solid transparent;
}

.cl-sbar-suggestion:hover,
.cl-sbar-suggestion--active {
  background: color-mix(in srgb, var(--bg-card) 70%, var(--cl-colour-active) 30%);
  border-left-color: var(--cl-colour-active);
}

.cl-sbar-suggestion-label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cl-sbar-suggestion-type {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 70%, var(--cl-colour-accent) 30%);
  color: color-mix(in srgb, #fff 70%, var(--text-muted) 30%);
}

.cl-sbar-suggestion-secondary {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.cl-sbar-suggestion-empty,
.cl-sbar-suggestion-loading {
  padding: 0.5rem 0.7rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.cl-sbar-suggestion-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Inline thinker (three bouncing dots) ? reusable for sbar input + results area */
.cl-inline-thinker {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

/* Respect the [hidden] attribute ? the thinker is only shown while work is in
   flight (JS toggles [hidden]). Without this the inline-flex above overrides the
   UA [hidden] rule and the dots would always show at rest. */
.cl-inline-thinker[hidden] { display: none; }

.cl-inline-thinker-dot {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 999px;
  background: var(--cl-colour-active);
  opacity: 0.55;
  animation: cl-inline-thinker-bounce 1.05s ease-in-out infinite;
}

.cl-inline-thinker-dot:nth-child(2) { animation-delay: 0.12s; }
.cl-inline-thinker-dot:nth-child(3) { animation-delay: 0.24s; }

.cl-inline-thinker--lg .cl-inline-thinker-dot {
  width: 0.55rem;
  height: 0.55rem;
}

@keyframes cl-inline-thinker-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.55; }
  35% { transform: translateY(-0.32rem); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-inline-thinker-dot { animation: none; opacity: 0.85; }
}

/* Results area inline thinker */
.cl-tab-work-thinker {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 75%, var(--cl-colour-active) 25%);
  border: 1px solid color-mix(in srgb, var(--cl-colour-active) 45%, var(--border-subtle));
  font-size: 0.78rem;
  color: color-mix(in srgb, #fff 78%, var(--text-muted) 22%);
  z-index: 5;
}

.cl-tab-work-thinker[hidden] { display: none; }

.cl-tab-work-area {
  position: relative;
}

.cl-tab-work-error {
  background: color-mix(in srgb, var(--error) 22%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--error) 55%, var(--border-subtle));
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  margin: 0 0 0.6rem 0;
  color: #fff;
  font-size: 0.85rem;
}
.cl-tab-work-error[hidden] { display: none; }

.cl-sbar-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.05rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.92rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.cl-sbar-input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 80%, transparent);
}

.cl-sbar-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cl-colour-active) 65%, var(--border-subtle));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl-colour-active) 25%, transparent);
}

.cl-sbar-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.05rem;
  padding: 0 0.85rem;
  font-weight: 600;
}

.cl-sbar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
}

/* -----------------------------------------------------------------------
   Reusable global filter section + collapsible tray (Browser pilot).
   Composes with .cl-sbar-filters so existing filter pills keep their look.
   ----------------------------------------------------------------------- */

.cl-filter-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.cl-filter-section-leading {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
}

/* Single-row bubble layout: filters wrap one row and overflow is hidden when collapsed */
.cl-filter-section--bub-row {
  width: 100%;
}

.cl-filter-section--bub-row .cl-filter-tray {
  flex: 1 1 100%;
  min-width: 0;
}

/* Shared filter-toggle (chevron) + clear (broom) styling */
.cl-filter-shr-exp,
.cl-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.7rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--cl-colour-accent) 20%);
  color: color-mix(in srgb, #fff 78%, var(--text-muted) 22%);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition), color var(--transition),
    background var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}

.cl-filter-shr-exp:hover,
.cl-filter-shr-exp:focus-visible,
.cl-filter-clear:hover,
.cl-filter-clear:focus-visible {
  outline: none;
  color: #fff;
  border-color: color-mix(in srgb, var(--cl-colour-active) 58%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 60%, var(--cl-colour-accent) 40%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cl-colour-active) 30%, transparent);
}

.cl-filter-shr-exp-icon { font-size: 0.85rem; }
.cl-filter-shr-exp-chevron {
  font-size: 0.7rem;
  transition: transform var(--transition);
}

.cl-filter-section--expanded .cl-filter-shr-exp-chevron {
  transform: rotate(180deg);
}

/* Animated tray: max-height + grid-rows interp for smooth grow/shrink. */
.cl-filter-tray {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 220ms ease, max-height 220ms ease,
    opacity 180ms ease, margin-top 180ms ease;
  opacity: 0;
  margin-top: 0;
}

.cl-filter-tray-inner {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
}

.cl-filter-section--expanded .cl-filter-tray {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0.25rem;
  /* Popover panels drop below filter pills; do not clip option lists. */
  overflow: visible;
}

/* Grid `1fr` is the long-term path. Fallback for clients still using max-height:
   the JS sets data-cl-filter-tray-height with the measured inner height when expanding. */
.cl-filter-section--expanded .cl-filter-tray[data-cl-filter-tray-height] {
  max-height: var(--cl-filter-tray-height, none);
}

@media (prefers-reduced-motion: reduce) {
  .cl-filter-tray { transition: none; }
  .cl-filter-shr-exp-chevron { transition: none; }
}

/* -----------------------------------------------------------------------
   Compact sbar-leading cluster: expand / clear / add-filter live INSIDE the
   sbar-main-row, alongside the search input.
   ----------------------------------------------------------------------- */
.cl-sbar-leading {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
}

.cl-filter-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.95rem;
  width: 1.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--cl-colour-accent) 20%);
  color: color-mix(in srgb, #fff 75%, var(--text-muted) 25%);
  cursor: pointer;
  transition: opacity var(--transition), color var(--transition),
    background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.cl-filter-add:hover,
.cl-filter-add:focus-visible {
  outline: none;
  color: #fff;
  border-color: color-mix(in srgb, var(--cl-colour-active) 60%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 60%, var(--cl-colour-accent) 40%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cl-colour-active) 28%, transparent);
}

.cl-filter-add--locked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Match the height of the sbar input for vertical alignment of the leading cluster. */
.cl-sbar-leading .cl-filter-shr-exp,
.cl-sbar-leading .cl-filter-clear {
  height: 1.95rem;
}

/* -----------------------------------------------------------------------
   Stage-2 filter types + modifiers (shared, page-agnostic)
   ----------------------------------------------------------------------- */

.cl-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--cl-colour-accent) 16%);
  font-size: 0.78rem;
  color: var(--text);
  min-height: 1.91rem;
  box-sizing: border-box;
}

.cl-filter-item input[type="checkbox"] {
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--cl-colour-active, var(--accent));
}

.cl-filter-item .cl-filter-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, #fff 70%, var(--text-muted) 30%);
}

.cl-filter-item .cl-filter-control {
  min-width: 4.5rem;
  max-width: 10rem;
  height: 1.55rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.32rem;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 35%, var(--border-subtle));
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.78rem;
}

.cl-filter-item .cl-filter-control:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
}

/* Type: drop ? chip IS the control (no nested rectangle inside the pill). */
.cl-filter-item.cl-filter-drop {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.cl-filter-item.cl-filter-drop .cl-filter-label {
  flex: 0 0 auto;
  padding: 0 0.2rem 0 0.65rem;
  line-height: 1.91rem;
}

.cl-filter-item.cl-filter-drop .cl-filter-control,
.cl-filter-item.cl-filter-drop .cl-filter-drop-control {
  flex: 1 1 auto;
  min-width: 5.5rem;
  max-width: 14rem;
  height: 1.91rem;
  min-height: 1.91rem;
  margin: 0;
  padding: 0 1.55rem 0 0.65rem;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.cl-filter-item.cl-filter-drop .cl-filter-label + .cl-filter-control,
.cl-filter-item.cl-filter-drop .cl-filter-label + .cl-filter-drop-control {
  padding-left: 0.25rem;
}

.cl-filter-item.cl-filter-drop .cl-filter-drop-control {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.72rem) 50%, calc(100% - 0.42rem) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: color-mix(in srgb, #fff 88%, var(--text-muted) 12%);
}

.cl-filter-item.cl-filter-drop .cl-filter-control:focus,
.cl-filter-item.cl-filter-drop .cl-filter-drop-control:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.cl-filter-item.cl-filter-drop:focus-within {
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-accent) 26%);
}

.cl-filter-item.cl-filter-drop:hover {
  border-color: color-mix(in srgb, var(--cl-colour-accent) 42%, var(--border-subtle));
}

/* Type: min-max */
.cl-filter-min-max-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cl-filter-min-max .cl-filter-min-max-control {
  width: 3.3rem;
  text-align: right;
}

.cl-filter-min-max-sep {
  color: var(--text-muted);
  font-weight: 700;
}

/* Type: toggle */
.cl-filter-toggle .cl-filter-toggle-control {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
  background: var(--bg-card);
  padding: 0;
  width: 2.3rem;
  height: 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition), border-color var(--transition);
}

.cl-filter-toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.cl-filter-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 70%, #fff 30%);
  transition: transform var(--transition), background var(--transition);
}

.cl-filter-toggle .cl-filter-toggle-control[aria-checked="true"] {
  background: color-mix(in srgb, var(--cl-colour-active) 45%, var(--bg-card));
  border-color: color-mix(in srgb, var(--cl-colour-active) 65%, var(--border-subtle));
}

.cl-filter-toggle .cl-filter-toggle-control[aria-checked="true"] .cl-filter-toggle-knob {
  transform: translateX(1.05rem);
  background: #fff;
}

/* Type: txt-drp + drop-multi + text-drop-multi ? all share the popover control */
.cl-filter-popover-control {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0;
  position: relative;
  background: transparent;
  border: none;
  min-width: 5.5rem;
}

.cl-filter-popover-input {
  height: 1.55rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.32rem 0 0 0.32rem;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 35%, var(--border-subtle));
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.78rem;
  min-width: 4.5rem;
  max-width: 10rem;
}

.cl-filter-popover-count {
  position: absolute;
  right: 1.9rem;
  top: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--cl-colour-active) 30%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--cl-colour-active) 45%, var(--border-subtle));
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  padding: 0 0.32rem;
  height: 0.95rem;
  line-height: 0.95rem;
  font-weight: 700;
  pointer-events: none;
}

.cl-filter-popover-count[hidden] { display: none; }

.cl-filter-popover-toggle {
  height: 1.55rem;
  width: 1.55rem;
  border-radius: 0 0.32rem 0.32rem 0;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 35%, var(--border-subtle));
  border-left: none;
  background: color-mix(in srgb, var(--bg-elevated) 75%, var(--cl-colour-accent) 25%);
  color: color-mix(in srgb, #fff 75%, var(--text-muted) 25%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: background var(--transition), color var(--transition);
}

.cl-filter-popover-toggle:hover,
.cl-filter-popover-toggle:focus-visible {
  outline: none;
  color: #fff;
  background: color-mix(in srgb, var(--bg-elevated) 55%, var(--cl-colour-active) 45%);
}

.cl-filter-popover-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 14rem;
  max-width: 22rem;
  max-height: 18rem;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
  border-radius: 0.5rem;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cl-filter-popover-panel[hidden] { display: none; }

.cl-filter-popover-search-row {
  padding: 0.32rem 0.4rem 0.18rem;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-filter-popover-search {
  width: 100%;
  height: 1.55rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.32rem;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 35%, var(--border-subtle));
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.78rem;
}

.cl-filter-popover-list {
  list-style: none;
  margin: 0;
  padding: 0.18rem 0;
  overflow-y: auto;
  max-height: 14rem;
}

.cl-filter-popover-option {
  display: grid;
  grid-template-columns: 1.1rem 1fr auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.55rem;
  cursor: pointer;
  font-size: 0.82rem;
}

.cl-filter-popover-option:hover,
.cl-filter-popover-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--bg-card) 70%, var(--cl-colour-active) 30%);
}

.cl-filter-popover-option-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, #fff 80%, var(--text-muted) 20%);
}

.cl-filter-popover-option-secondary {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.cl-filter-popover-option-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
}

.cl-filter-popover-empty,
.cl-filter-popover-loading {
  padding: 0.5rem 0.7rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.cl-filter-popover-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Filter modifiers (compose with any type) */
.cl-filter-item--lock {
  opacity: 0.55;
  pointer-events: none;
}

.cl-filter-item--lock .cl-filter-label::after {
  content: " ? locked";
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-left: 0.18rem;
}

.cl-filter-item--required .cl-filter-label::after {
  content: " *";
  color: var(--cl-colour-active);
}

.cl-filter-item--price .cl-filter-control {
  padding-left: 0.95rem;
  background-position: 0.32rem center;
  background-size: 0.55rem;
}

.cl-filter-item--price::before {
  content: "$";
  font-weight: 700;
  color: color-mix(in srgb, #fff 75%, var(--text-muted) 25%);
}

.cl-filter-item--whl-step .cl-filter-control {
  font-variant-numeric: tabular-nums;
}

.cl-filter-item--deci-step .cl-filter-control {
  font-variant-numeric: tabular-nums;
}

/* Modifier: date — native <input type="date"> with a usable calendar picker.
   Wider than text chips so yyyy-mm-dd + indicator aren't clipped; color-scheme
   keeps the picker chrome readable on dark filter pills. */
.cl-filter-item--date .cl-filter-control[type="date"] {
  min-width: 9.75rem;
  max-width: 12.5rem;
  width: 10.75rem;
  /* Dark scheme alone — do not also invert the picker icon (double-flip washes it out). */
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
  padding-right: 0.2rem;
}

.cl-filter-item--date .cl-filter-control[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.9;
  margin-left: 0.1rem;
  padding: 0.1rem;
  filter: none;
}

.cl-filter-item--date .cl-filter-control[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.cl-filter-item--date-range {
  align-items: stretch;
}

.cl-hub-sales-range {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.cl-filter-item--date-range .cl-filter-control[type="date"] {
  min-width: 8.1rem;
  max-width: 9.5rem;
  width: 8.6rem;
}

.cl-hub-sales-range__sep {
  opacity: 0.65;
  font-weight: 600;
  line-height: 1;
}

/* Layout modifier: column (future IIV3 / upload panels) */
.cl-filter-section--column .cl-filter-tray-inner {
  flex-direction: column;
  gap: 0.42rem;
  align-items: stretch;
}

.cl-filter-section--column .cl-filter-item {
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.32rem 0.6rem;
}

/* -----------------------------------------------------------------------
   Stage 3 polish: unified pill look for txt-drp / text-drop-multi, operator
   chip for --is-isnot, multi-select badge inside the value field.
   ----------------------------------------------------------------------- */

/* Override Stage 2 popover control so it visually blends into the parent pill */
.cl-filter-item .cl-filter-popover-control {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 35%, var(--border-subtle));
  border-radius: 0.42rem;
  min-width: 7rem;
  height: 1.65rem;
  overflow: hidden;
}

/* Option panel is absolutely positioned below the control ? overflow:hidden hid it entirely. */
.cl-filter-item .cl-filter-popover-control.cl-filter-popover--open {
  overflow: visible;
  z-index: 60;
}

.cl-filter-item .cl-filter-popover-input {
  flex: 1 1 auto;
  height: 100%;
  padding: 0 0.5rem;
  border: none;
  border-right: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  min-width: 0;
}

.cl-filter-item .cl-filter-popover-input:focus {
  outline: none;
  background: color-mix(in srgb, var(--bg-card) 78%, var(--cl-colour-accent) 22%);
}

.cl-filter-item .cl-filter-popover-toggle {
  height: 100%;
  width: 1.55rem;
  border: none;
  border-radius: 0;
  background: color-mix(in srgb, var(--bg-elevated) 60%, var(--cl-colour-accent) 40%);
  color: color-mix(in srgb, #fff 80%, var(--text-muted) 20%);
}

.cl-filter-item .cl-filter-popover-toggle:hover,
.cl-filter-item .cl-filter-popover-toggle:focus-visible {
  color: #fff;
  background: color-mix(in srgb, var(--bg-elevated) 40%, var(--cl-colour-active) 60%);
}

.cl-filter-item .cl-filter-popover-count {
  position: static;
  transform: none;
  margin: 0 0.32rem;
  align-self: center;
  height: 1.05rem;
}

/* --is-isnot operator chip lives between the label and the value field */
.cl-filter-op {
  display: inline-flex;
  align-items: center;
  height: 1.4rem;
  padding: 0 0.5rem;
  border-radius: 0.34rem;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 35%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 75%, var(--cl-colour-accent) 25%);
  color: color-mix(in srgb, #fff 78%, var(--text-muted) 22%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.cl-filter-op:hover,
.cl-filter-op:focus-visible {
  outline: none;
  color: #fff;
  background: color-mix(in srgb, var(--bg-elevated) 55%, var(--cl-colour-active) 45%);
}

.cl-filter-op[data-cl-filter-op-value="isnot"] {
  border-color: color-mix(in srgb, var(--cl-colour-alt) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-colour-alt) 25%, var(--bg-card));
  color: #fff;
}

/* Compact icon-only Search button in the sbar */
.cl-sbar-submit.cl-sbar-submit--icon {
  min-width: 1.95rem;
  width: 1.95rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Add Filter button when it lives in the tray */
.cl-filter-tray-inner .cl-filter-add {
  flex: 0 0 auto;
}

/* -----------------------------------------------------------------------
   cl-smartfilterbar ? guided filter input that lives at the top of the
   collapsible Staff Search filter tray. Visually related to the existing
   cl-filter* family (same border radius, accent ring, focus glow) but
   carries its own block so it can be reused on other pages later. It is
   NOT a second search bar; it does not POST to /api/search itself ? it
   delegates field/operator/value selection back into the existing Add
   Filter modal pipeline (data-cl-add-filter-key buttons + the addable
   filter <template> registry) so the tray + filter payload remains the
   single source of truth.
   ----------------------------------------------------------------------- */
.cl-smartfilterbar-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 18rem;
  min-width: 16rem;
  max-width: 100%;
}

.cl-filter-preset-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.95rem;
  height: 1.95rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--cl-colour-accent) 20%);
  color: color-mix(in srgb, #fff 75%, var(--text-muted) 25%);
  cursor: pointer;
  transition: opacity var(--transition), color var(--transition),
    background var(--transition), border-color var(--transition);
}

.cl-filter-preset-star:hover,
.cl-filter-preset-star:focus-visible {
  outline: none;
  color: #fff;
  border-color: color-mix(in srgb, var(--cl-colour-active) 60%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 60%, var(--cl-colour-accent) 40%);
}

.cl-filter-preset-star--locked,
.cl-filter-preset-star[disabled],
.cl-filter-preset-star[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  color: color-mix(in srgb, var(--text-muted) 70%, var(--cl-colour-accent) 30%);
}

.cl-filter-preset-star--locked:hover,
.cl-filter-preset-star--locked:focus-visible {
  color: color-mix(in srgb, var(--text-muted) 70%, var(--cl-colour-accent) 30%);
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--cl-colour-accent) 20%);
  border-color: color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
}

.cl-smartfilterbar {
  flex: 1 1 auto;
  min-width: 0;
}

.cl-smartfilterbar-shell {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  min-height: 1.95rem;
  background: color-mix(in srgb, var(--bg-elevated) 86%, var(--cl-colour-accent) 14%);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  border-radius: 999px;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition),
    background var(--transition);
}

.cl-smartfilterbar-shell:focus-within,
.cl-smartfilterbar[data-cl-smartfilterbar-state="open"] .cl-smartfilterbar-shell {
  border-color: color-mix(in srgb, var(--cl-colour-active) 58%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-accent) 30%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cl-colour-active) 24%, transparent);
}

.cl-smartfilterbar-tokens {
  display: contents;
}

.cl-smartfilterbar-token {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cl-colour-accent) 28%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 40%, var(--border-subtle));
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-smartfilterbar-token-label {
  font-weight: 600;
  color: color-mix(in srgb, #fff 80%, var(--text) 20%);
}

.cl-smartfilterbar-token-op {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-dark) 70%, var(--cl-colour-accent) 30%);
  color: color-mix(in srgb, #fff 80%, var(--text-muted) 20%);
  border: 1px solid transparent;
  cursor: default;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.4;
}

.cl-smartfilterbar-token-op--toggle {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--cl-colour-accent) 40%, transparent);
}

.cl-smartfilterbar-token-op--toggle:hover,
.cl-smartfilterbar-token-op--toggle:focus-visible {
  outline: none;
  color: #fff;
  background: color-mix(in srgb, var(--cl-colour-active) 50%, var(--cl-colour-accent) 50%);
  border-color: color-mix(in srgb, var(--cl-colour-active) 60%, var(--border-subtle));
}

.cl-smartfilterbar-token-op[disabled],
.cl-smartfilterbar-token-op[aria-disabled="true"] {
  opacity: 0.7;
  cursor: default;
}

.cl-smartfilterbar-option--back {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cl-smartfilterbar-option--back .cl-smartfilterbar-option-title {
  font-weight: 500;
}

/* Optional hidden-marker mirror for cl-tray-component visibility ? JS sets
   `hidden` AND toggles this class so non-JS environments / CSS-only audits
   still see something consistent. */
[data-cl-tray-component][hidden],
.cl-tray-component--hidden {
  display: none !important;
}

.cl-smartfilterbar-token-value {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.cl-smartfilterbar-token-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0 -0.15rem 0 0.1rem;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--text-muted) 70%, var(--text) 30%);
  cursor: pointer;
  border-radius: 999px;
}

.cl-smartfilterbar-token-remove:hover,
.cl-smartfilterbar-token-remove:focus-visible {
  outline: none;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 18%, transparent);
}

.cl-smartfilterbar-input {
  flex: 1 1 8rem;
  min-width: 6rem;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 0.15rem 0.3rem;
  outline: none;
}

.cl-smartfilterbar-input::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}

.cl-smartfilterbar-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 6;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.3rem;
  margin: 0;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

.cl-smartfilterbar-menu[hidden] {
  display: none !important;
}

.cl-smartfilterbar-menu-group + .cl-smartfilterbar-menu-group {
  margin-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
  padding-top: 0.35rem;
}

.cl-smartfilterbar-menu-group-title {
  margin: 0 0 0.25rem;
  padding: 0 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cl-smartfilterbar-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.55rem;
  padding: 0.35rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.cl-smartfilterbar-option:hover,
.cl-smartfilterbar-option:focus-visible,
.cl-smartfilterbar-option[aria-selected="true"] {
  outline: none;
  background: color-mix(in srgb, var(--cl-colour-accent) 22%, transparent);
  color: #fff;
}

.cl-smartfilterbar-option[aria-disabled="true"],
.cl-smartfilterbar-option[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.cl-smartfilterbar-option-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-smartfilterbar-option-key {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cl-smartfilterbar-option-state {
  flex: 0 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.cl-smartfilterbar-option-state--present {
  color: color-mix(in srgb, var(--success) 80%, #fff 20%);
}

.cl-smartfilterbar-empty {
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------
   Global modal foundation (cl-modal)
   ----------------------------------------------------------------------- */

/* Modal root sits BELOW the app shell (navbar + footer-bar at --cl-ui-shell-z)
   and ABOVE sticky under-nav action strips (--cl-sticky-under-nav-z), so chrome
   stays clickable while page toolbars cannot cover the dialog. The root is
   bounded to the area between navbar and footer-bar so the backdrop never reaches
   into either band. Toggling is via the [hidden] attribute ? JS helpers add/remove
   it (and may also add the .cl-modal-open class as a state marker). */
.cl-modal-root {
  position: fixed;
  top: var(--cl-navbar-height);
  bottom: var(--cl-footer-bar-height);
  left: 0;
  right: 0;
  z-index: var(--cl-modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.cl-modal-root[hidden] {
  display: none !important;
}

.cl-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, 0.62);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.cl-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(92vw, 28rem);
  max-height: 100%;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 40%, var(--border-subtle));
  border-radius: 0.7rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: cl-modal-pop 180ms ease-out;
}

.cl-modal--mini   { width: min(92vw, 18rem); }
.cl-modal--small  { width: min(92vw, 26rem); }
.cl-modal--medium { width: min(92vw, 38rem); }
/* Large modals use more of the available desktop width so wide tool tables
   (e.g. Image Intake Pricing) don't force horizontal scroll on normal screens.
   Sidekick-open sizing is tuned below so main+sidekick still fit the viewport. */
.cl-modal--large  { width: min(96vw, 80rem); }

/* -- Canonical internal structure (no legacy aliases) ------------------- */
.cl-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--cl-colour-accent) 8%);
  flex-shrink: 0;
}

.cl-modal-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.cl-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  background: transparent;
  color: color-mix(in srgb, #fff 70%, var(--text-muted) 30%);
  cursor: pointer;
}

.cl-modal-close:hover,
.cl-modal-close:focus-visible {
  outline: none;
  color: #fff;
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 50%, var(--cl-colour-active) 50%);
}

.cl-modal-work-area {
  padding: 0.7rem 0.85rem;
  min-height: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  color: var(--text);
}

.cl-modal-scroll {
  overflow-y: auto;
}

.cl-modal-btm {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-elevated) 95%, var(--cl-colour-accent) 5%);
  flex-shrink: 0;
}

/* The display:flex above must not beat the [hidden] attribute ? a hidden modal
   footer (e.g. the Image Intake progress modal's recovery-only Continue, shown
   only on failure) must stay collapsed while processing. */
.cl-modal-btm[hidden] {
  display: none;
}

@keyframes cl-modal-pop {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.cl-modal-body-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cl-modal { animation: none; }
}

/* -----------------------------------------------------------------------
   cl-modal sidekick ? an attached slide-out panel beside a main modal.
   Inspired by a Sidekick phone slide-out: the sidekick tucks behind the
   main modal and slides out to its right; the group re-centres in the
   viewport (cl-modal-root flex). Small viewports swap to a two-page slide
   (main hides, sidekick takes over) so it never overflows the app shell.
   ----------------------------------------------------------------------- */
.cl-modal-stage {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-height: 100%;
  min-height: 0;
}

.cl-modal-stage > .cl-modal {
  position: relative;
  z-index: 2;
}

.cl-modal-sidekick {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 0;
  max-width: 0;
  max-height: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  margin-left: -12px;
  transform: translateX(-16px);
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  border-left: none;
  border-radius: 0 0.7rem 0.7rem 0;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  transition: width 0.28s ease, max-width 0.28s ease, opacity 0.22s ease,
    transform 0.28s ease, margin-left 0.28s ease;
}

.cl-modal-sidekick.is-open {
  width: min(86vw, 22rem);
  max-width: 22rem;
  opacity: 1;
  visibility: visible;
  margin-left: 0;
  transform: translateX(0);
}

/* The sidekick reuses cl-modal-top / cl-modal-work-area internals. */
.cl-modal-sidekick .cl-modal-work-area {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cl-modal-sidekick { transition: none; }
}

/* Desktop: when a sidekick is attached to a large modal, let the group fill
   more of the viewport ? keep the main modal wide and give the sidekick a
   little more room ? while guaranteeing main + sidekick still fit (the sum is
   bounded to ~viewport width). Scoped to >640px so the small-viewport
   two-page slide below is unaffected. */
@media (min-width: 641px) {
  .cl-modal-root.cl-sidekick-active > .cl-modal-stage > .cl-modal--large {
    width: min(70vw, 62rem);
  }
  .cl-modal-root.cl-sidekick-active .cl-modal-sidekick.is-open {
    width: min(30vw, 26rem);
    max-width: 26rem;
  }
}

/* Small viewport: two-page slide ? show the sidekick in place of the main
   modal instead of side-by-side, keeping the group inside the app shell. */
@media (max-width: 640px) {
  .cl-modal-root.cl-sidekick-active > .cl-modal-stage > .cl-modal {
    display: none;
  }
  .cl-modal-sidekick.is-open {
    width: min(94vw, 32rem);
    max-width: none;
    margin-left: 0;
    border-left: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
    border-radius: 0.7rem;
  }
}

/* -----------------------------------------------------------------------
   Image Intake finalisation tool modals (Summary / Pricing / Stock).
   ----------------------------------------------------------------------- */
[data-cl-ii-tool-bulk] {
  padding: 0.5rem 0.85rem 0;
  flex-wrap: wrap;
}
.cl-ii-sub {
  color: var(--text-muted, var(--text));
  font-size: 0.78rem;
}
.cl-ii-tile-count--over {
  color: var(--danger, #e06c75);
  font-weight: 700;
}
.cl-ii-actions {
  white-space: nowrap;
}
.cl-ii-actions .cl-btn { margin-right: 0.25rem; }
.cl-ii-num-input {
  width: 6.5rem;
  max-width: 100%;
}

.cl-pill--ok {
  border-color: color-mix(in srgb, var(--success, #2e7d32) 55%, transparent);
  color: var(--success, #2e7d32);
}
.cl-pill--warn {
  border-color: color-mix(in srgb, var(--warning, #b26a00) 55%, transparent);
  color: var(--warning, #b26a00);
}
.cl-ii-health-list,
.cl-ii-vendor-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cl-ii-health-row,
.cl-ii-vendor-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-card) 80%, transparent);
  font-size: 0.82rem;
}
.cl-ii-health--bad {
  border-color: color-mix(in srgb, var(--danger, #c62828) 45%, var(--border-subtle));
}
.cl-ii-health--ok {
  border-color: color-mix(in srgb, var(--success, #2e7d32) 35%, var(--border-subtle));
}
.cl-ii-health-field {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.cl-ii-bulk-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cl-ii-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
}

/* -----------------------------------------------------------------------
   Reusable large-modal "fill" behaviour (Slice 0.6). A modal stage marked
   --fill stretches its modal (and attached sidekick) to the full available
   height of the bounded modal root, so sibling tool modals are visually
   consistent regardless of row count. The table area becomes the single
   vertical scroller (sticky header stays put) instead of the work-area.
   ----------------------------------------------------------------------- */
.cl-modal-stage--fill {
  height: 100%;
}
.cl-modal-stage--fill .cl-modal-work-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* -- Tool-modal Candidate cell (shared identity column) ----------------- */
.cl-ii-cand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 12rem;
}
.cl-ii-cand-title {
  font-weight: 650;
}
.cl-ii-cand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
}
.cl-ii-cand-line {
  color: var(--text-muted, var(--text));
  font-size: 0.76rem;
}

/* -- Images tool thumbnails + foil preview ------------------------------ */
.cl-ii-tool-thumb,
.cl-image.cl-image--thumb.cl-image--tool {
  display: block;
  width: 36px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-2, #111);
}
.cl-ii-tool-thumb--large,
.cl-image.cl-image--thumb.cl-image--tool.cl-image--large {
  width: min(100%, 220px);
  height: auto;
  max-height: 300px;
}
.cl-ii-tool-thumb-btn {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
  vertical-align: middle;
}
.cl-ii-tool-thumb-btn:focus-visible {
  outline: 2px solid var(--accent, #7c3aed);
  outline-offset: 2px;
  border-radius: 4px;
}
.cl-ii-tool-thumb-btn .cl-ii-tool-thumb {
  display: block;
}
.cl-ii-tool-thumb--compare,
.cl-image.cl-image--thumb.cl-image--compare {
  width: min(100%, 180px);
  height: auto;
  max-height: 250px;
}
.cl-ii-overlay-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.75rem 0 1rem;
}
@media (max-width: 640px) {
  .cl-ii-overlay-compare { grid-template-columns: 1fr; }
}
.cl-ii-overlay-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}
.cl-ii-overlay-label {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text-muted, var(--text));
}
.cl-ii-overlay-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.cl-ii-overlay-wrap {
  position: relative;
  display: inline-block;
  margin: 0.75rem 0;
}
.cl-ii-overlay-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0) 8%,
    rgba(170, 215, 255, 0.28) 36%,
    rgba(255, 175, 235, 0.22) 52%,
    rgba(255, 255, 255, 0) 78%);
  mix-blend-mode: soft-light;
  opacity: 0.55;
}
.cl-ii-overlay-shine--foil {
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(120, 200, 255, 0.42) 32%,
    rgba(255, 130, 220, 0.36) 48%,
    rgba(255, 230, 110, 0.32) 62%,
    rgba(130, 255, 200, 0.28) 76%,
    rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.cl-ii-overlay-rainbow {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  border-radius: 4px;
  background: conic-gradient(from 125deg at 42% 38%,
    rgba(255, 70, 130, 0.42) 0deg,
    rgba(255, 190, 70, 0.38) 72deg,
    rgba(90, 255, 170, 0.34) 144deg,
    rgba(80, 150, 255, 0.4) 216deg,
    rgba(190, 90, 255, 0.36) 288deg,
    rgba(255, 70, 130, 0.42) 360deg);
  mix-blend-mode: overlay;
  opacity: 0.58;
  filter: blur(0.6px);
}
.cl-ii-overlay-rainbow--foil {
  background:
    linear-gradient(118deg,
      rgba(255, 80, 140, 0.34) 0%,
      rgba(255, 210, 80, 0.28) 22%,
      rgba(80, 255, 190, 0.26) 44%,
      rgba(90, 160, 255, 0.32) 66%,
      rgba(200, 100, 255, 0.28) 88%,
      rgba(255, 80, 140, 0.34) 100%),
    conic-gradient(from 140deg at 55% 45%,
      rgba(255, 60, 120, 0.28) 0deg,
      rgba(255, 200, 60, 0.24) 90deg,
      rgba(60, 255, 180, 0.22) 180deg,
      rgba(60, 140, 255, 0.26) 270deg,
      rgba(255, 60, 120, 0.28) 360deg);
  mix-blend-mode: soft-light;
  opacity: 0.62;
}
.cl-ii-overlay-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(0, 0, 0, 0.12) 100%);
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.cl-ii-overlay-sheen--foil {
  opacity: 0.42;
}
.cl-ii-overlay-speckle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.32) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 58%, rgba(200, 240, 255, 0.26) 0 1px, transparent 1px),
    radial-gradient(circle at 48% 82%, rgba(255, 210, 250, 0.24) 0 1px, transparent 1px);
  background-size: 26px 26px, 34px 34px, 30px 30px;
  mix-blend-mode: soft-light;
  opacity: 0.32;
}
.cl-ii-overlay-frame--foil .cl-ii-tool-thumb {
  filter: contrast(1.04) saturate(1.06);
}
.cl-ii-overlay-frame--clickable {
  cursor: zoom-in;
}
.cl-ii-overlay-preview-btn {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: inherit;
}
.cl-ii-enh-btn {
  min-width: 2rem;
}
.cl-ii-enh-btn--locked,
.cl-ii-enh-btn:disabled {
  opacity: 0.55;
}
.cl-ii-enh-status {
  font-size: 0.78rem;
  color: var(--text-muted, var(--text));
  white-space: nowrap;
}
.cl-ii-enh-status--set-level {
  font-style: italic;
}
.cl-ii-bulk-progress-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
  padding: 0.5rem 0.25rem 0.75rem;
}

/* -- Small pill variants ------------------------------------------------ */
.cl-pill--quiet {
  border-color: var(--border-subtle);
  color: var(--text-muted, var(--text));
}
.cl-pill--mini {
  font-size: 0.62rem;
  padding: 0.02rem 0.3rem;
}

/* -----------------------------------------------------------------------
   Ximilar price evidence panel (Pricing sidekick, Slice 0.6). Structured,
   on-brand display of price_stats. EVIDENCE ONLY ? never a write.
   ----------------------------------------------------------------------- */
.cl-ii-evi-header {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}
.cl-ii-evi-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cl-ii-statcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.55rem 0;
}
.cl-ii-statcard {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
}
.cl-ii-statcard-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, var(--text));
}
.cl-ii-statcard-value {
  font-size: 1.05rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.cl-ii-statcard-sub {
  font-size: 0.66rem;
  color: var(--text-muted, var(--text));
  font-variant-numeric: tabular-nums;
}
.cl-ii-evi-subtitle {
  font-size: 0.82rem;
}
.cl-ii-range {
  margin: 0.5rem 0 0.2rem;
}
.cl-ii-range-track {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cl-colour-accent) 16%, var(--border-subtle));
}
.cl-ii-range-iqr {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cl-colour-accent) 55%, transparent);
}
.cl-ii-range-mark {
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--text);
  border: 1px solid var(--bg-card);
}
.cl-ii-range-mark--median {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--cl-colour-highlight, var(--cl-colour-accent));
}
.cl-ii-range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--text-muted, var(--text));
  font-variant-numeric: tabular-nums;
}
.cl-ii-evi-section {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}
.cl-ii-evi-head {
  font-weight: 650;
  text-transform: capitalize;
  margin-bottom: 0.3rem;
}
.cl-ii-evi-notes {
  list-style: disc;
  margin: 0.7rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.74rem;
  color: var(--text-muted, var(--text));
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Computed market suggestion card (the value the Xi button copies). */
.cl-ii-market-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.6rem 0 0.2rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-highlight, var(--cl-colour-accent)) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-colour-highlight, var(--cl-colour-accent)) 12%, var(--bg-card));
}
.cl-ii-market-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, var(--text));
}
.cl-ii-market-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cl-ii-evi-section--reference {
  border-top-style: dashed;
  opacity: 0.92;
}

/* Compact info-only Ximilar button (low/no confidence) keeps the row short. */
.cl-ii-xi-info {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
/* Confident Ximilar price pill ? one line, no wrap. */
.cl-ii-xi-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  max-width: 100%;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  line-height: 1.2;
}
.cl-ii-row-num {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
}
.cl-ii-barcode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.22rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--cl-colour-highlight, var(--cl-colour-accent)) 75%, var(--text));
  cursor: default;
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1;
}
.cl-ii-barcode-icon:hover,
.cl-ii-barcode-icon:focus-visible {
  background: color-mix(in srgb, var(--cl-colour-accent) 18%, transparent);
  outline: none;
}
.cl-ii-pc-btn {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------
   Footer currency selector (global currency foundation, dropup near user).
   ----------------------------------------------------------------------- */
.cl-currency-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
}
button.cl-footer-shortcut.cl-currency-toggle {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  margin-left: 0;
  box-shadow: none;
}
.cl-currency-menu {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  min-width: 4.5rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card, #1b1e39);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
/* UA [hidden] loses to display:flex above ? keep dropup closed by default. */
.cl-currency-menu[hidden] {
  display: none !important;
}
.cl-currency-option {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cl-currency-option:hover,
.cl-currency-option:focus-visible {
  background: color-mix(in srgb, var(--cl-colour-accent) 22%, transparent);
}
.cl-currency-option--active {
  background: color-mix(in srgb, var(--cl-colour-highlight, var(--cl-colour-accent)) 30%, transparent);
  font-weight: 650;
}

/* -----------------------------------------------------------------------
   Reusable choice list (used by Add Filter modal, future picker modals).
   ----------------------------------------------------------------------- */
.cl-choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  width: 100%;
}

.cl-choice-group-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.65rem 0 0.22rem;
}

.cl-choice-group-title:first-child { margin-top: 0; }

.cl-choice-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.18rem 0.65rem;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
    box-shadow var(--transition);
}

.cl-choice-option:hover:not([aria-disabled="true"]),
.cl-choice-option:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--cl-colour-active) 50%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 78%, var(--cl-colour-active) 22%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl-colour-active) 35%, transparent);
}

.cl-choice-option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cl-choice-option[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-card) 65%, var(--cl-colour-active) 35%);
}

.cl-choice-option-icon {
  grid-row: 1 / 3;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-card) 55%, var(--cl-colour-accent) 45%);
  color: #fff;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.cl-choice-option[aria-pressed="true"] .cl-choice-option-icon {
  background: color-mix(in srgb, var(--cl-colour-active) 78%, var(--bg-card) 22%);
}

.cl-choice-option-main {
  display: contents;
}

.cl-choice-option-title {
  grid-column: 2;
  grid-row: 1;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.2;
  color: var(--text);
}

.cl-choice-option-subtitle {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.cl-choice-option-suffix {
  grid-column: 3;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.cl-choice-option-state {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-card) 65%, var(--cl-colour-accent) 35%);
  color: color-mix(in srgb, #fff 80%, var(--text-muted) 20%);
}

.cl-choice-option-state--locked {
  border-color: color-mix(in srgb, var(--cl-colour-alt) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-colour-alt) 22%, var(--bg-card));
  color: #fff;
}

/* -----------------------------------------------------------------------
   Per-pill remove button (only rendered on dynamically-added filters)
   ----------------------------------------------------------------------- */
.cl-filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.18rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-alt) 40%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-card) 70%, var(--cl-colour-alt) 30%);
  color: #fff;
  font-size: 0.62rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition), background var(--transition), border-color var(--transition);
}

.cl-filter-item:hover .cl-filter-remove,
.cl-filter-item:focus-within .cl-filter-remove,
.cl-filter-remove:focus-visible {
  opacity: 1;
  outline: none;
  background: color-mix(in srgb, var(--cl-colour-alt) 55%, var(--bg-card));
}

/* -----------------------------------------------------------------------
   Stage 4A polish: long value + N truncation inside popover input
   ----------------------------------------------------------------------- */
.cl-filter-item .cl-filter-popover-input {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-filter-item .cl-filter-popover-count {
  flex-shrink: 0;
}

/* Required validation focus / error pulse */
.cl-filter-item--required-error .cl-filter-control,
.cl-filter-item--required-error .cl-filter-popover-control {
  border-color: var(--cl-colour-alt) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl-colour-alt) 40%, transparent);
}

/* -----------------------------------------------------------------------
   Template Library page-specific (internal /maintenance/template-library)
   ----------------------------------------------------------------------- */
.cl-tl-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  align-items: stretch;
}

.cl-tl-card {
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cl-tl-card-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.cl-tl-card-class {
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text-muted);
  word-break: break-all;
}

.cl-tl-card-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 32%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 75%, var(--cl-colour-accent) 25%);
  color: color-mix(in srgb, #fff 80%, var(--text-muted) 20%);
  align-self: flex-start;
}

.cl-tl-card-status--planned {
  border-color: color-mix(in srgb, var(--cl-colour-highlight) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-colour-highlight) 25%, var(--bg-card));
  color: #fff;
}

.cl-tl-card-status--scaffolded,
.cl-tl-card-status--active-(scaffold) {
  border-color: color-mix(in srgb, var(--cl-colour-accent) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-colour-accent) 25%, var(--bg-card));
  color: #fff;
}

.cl-tl-card-status--needs-migration {
  border-color: color-mix(in srgb, var(--cl-colour-alt) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-colour-alt) 22%, var(--bg-card));
  color: #fff;
}

.cl-tl-card-example {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.cl-tl-card-link {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: color-mix(in srgb, var(--cl-colour-active) 70%, #fff 30%);
}

/* Recipe card: "Common construction" Blocks/Snippets/Styling/Functions lists. */
.cl-tl-card--recipe {
  border-left: 3px solid color-mix(in srgb, var(--cl-colour-accent) 45%, var(--border-subtle));
}
.cl-tl-recipe-summary {
  font-weight: 600;
}
.cl-tl-recipe {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-subtle);
}
.cl-tl-recipe-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, var(--text));
  margin: 0 0 0.35rem;
}
.cl-tl-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
}
.cl-tl-recipe-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.4rem;
  align-items: start;
}
.cl-tl-recipe-row dt {
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--text-muted, var(--text));
  padding-top: 0.12rem;
}
.cl-tl-recipe-row dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.cl-tl-recipe-row dd code {
  font-size: 0.72rem;
  padding: 0.08rem 0.34rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--cl-colour-accent) 14%, var(--bg-card));
  border: 1px solid var(--border-subtle);
}
.cl-tl-recipe-row--blocks dt { color: color-mix(in srgb, var(--cl-colour-accent) 60%, var(--text)); }
.cl-tl-recipe-rules {
  list-style: disc;
  margin: 0.45rem 0 0;
  padding-left: 1.05rem;
  font-size: 0.73rem;
  color: var(--text-muted, var(--text));
}

/* Data tab hierarchy: category (tier 1) ? group (tier 2) ? subgroup (tier 3). */
.cl-tl-data-category {
  border-left: 3px solid color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  padding-left: 0.6rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cl-colour-active) 5%, transparent);
}
.cl-tl-data-category > summary {
  font-size: 1rem;
}
.cl-tl-data-group {
  margin-left: 0.75rem;
  border-left: 2px solid color-mix(in srgb, var(--cl-colour-accent) 40%, var(--border-subtle));
  padding-left: 0.55rem;
  background: color-mix(in srgb, var(--cl-colour-accent) 6%, transparent);
  border-radius: 6px;
}
.cl-tl-data-subgroup {
  margin-left: 1.1rem;
  border-left: 2px dashed var(--border-subtle);
  padding-left: 0.5rem;
}
.cl-tl-data-subgroup h4 {
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--cl-colour-accent) 55%, var(--text));
}

.cl-tl-swatches {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.cl-tl-swatch {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background: var(--bg-elevated);
}

.cl-tl-swatch-chip {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 32%, var(--border-subtle));
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}

.cl-tl-swatch-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.cl-tl-swatch-name {
  font-weight: 700;
}

.cl-tl-swatch-var {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  word-break: break-all;
}

.cl-tl-token-list {
  list-style: disc;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cl-tl-token-list code {
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--cl-colour-accent) 20%);
  border-radius: 0.25rem;
  padding: 0.05rem 0.3rem;
  font-size: 0.78rem;
}

.cl-sbar-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--cl-colour-accent) 20%);
  font-size: 0.78rem;
  color: var(--text);
}

.cl-sbar-filter[hidden],
.cl-sbar-filter--hidden {
  display: none !important;
}

.cl-sbar-filter-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, #fff 70%, var(--text-muted) 30%);
}

.cl-sbar-filter-control {
  min-width: 4.5rem;
  max-width: 9rem;
  height: 1.55rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.32rem;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 35%, var(--border-subtle));
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.78rem;
}

.cl-sbar-filter-control:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
}

/* Reusable controls row */
.cl-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.65rem;
  margin-top: 0.35rem;
  padding: 0.32rem 0.55rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--cl-colour-accent) 8%);
  font-size: 0.82rem;
}

.cl-controls-row[hidden],
.cl-controls-row--hidden {
  display: none !important;
}

.cl-controls-row-section {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cl-controls-row-section--nav {
  gap: 0.35rem;
}

/* Mode-specific control visibility ? display:flex on sections/buttons beats UA [hidden]. */
[data-cl-mode-shell][data-cl-mode="browser"] [data-cl-mode-hide~="browser"] {
  display: none !important;
}

[data-cl-mode-shell][data-cl-mode="detail-search"] [data-cl-mode-hide~="detail-search"] {
  display: none !important;
}

[data-cl-mode-shell][data-cl-mode="browser"] [data-cl-staff-action-only],
[data-cl-mode-shell][data-cl-mode="detail-search"] [data-cl-staff-action-only] {
  display: none !important;
}

.cl-controls-row-section[hidden],
.cl-controls-row-section.cl-mode-hidden,
[data-cl-mode-hide][hidden],
[data-cl-mode-hide].cl-mode-hidden,
.cl-mode-hidden {
  display: none !important;
}

.cl-controls-page {
  display: inline-block;
  min-width: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: color-mix(in srgb, #fff 88%, var(--text-muted) 12%);
}

/* Browser footer controls row ? quiet pill buttons (CL-UNI-2: cl-btn block + modifiers).
   Deprecated alias: .cl-controls-button ? cl-btn cl-btn--small cl-btn--quiet cl-btn--pill */
.cl-btn.cl-btn--quiet.cl-btn--pill.cl-btn--small,
.cl-controls-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.cl-controls-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
  min-width: 1.85rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cl-colour-active) 22%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--cl-colour-active) 35%, var(--border-subtle));
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}

.cl-controls-pill--all {
  cursor: pointer;
  background: transparent;
  color: color-mix(in srgb, var(--cl-colour-active) 80%, #fff);
}

.cl-controls-pill--all:hover {
  color: #fff;
  background: color-mix(in srgb, var(--cl-colour-active) 25%, var(--bg-card));
}

/* Clear-selection pill (fa-xmark). Shown only when 1+ items are selected. */
.cl-controls-pill--clear {
  cursor: pointer;
  background: transparent;
  color: color-mix(in srgb, var(--cl-colour-warn, #e0796b) 80%, #fff);
  border-color: color-mix(in srgb, var(--cl-colour-warn, #e0796b) 40%, var(--border-subtle));
}

.cl-controls-pill--clear:hover {
  color: #fff;
  background: color-mix(in srgb, var(--cl-colour-warn, #e0796b) 30%, var(--bg-card));
}

/* Add-to-Workspace control (cl-addto foundation). Disabled at 0 selected. */
.cl-controls-addto:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cl-controls-addto i + i {
  margin-left: -0.15rem;
}

/* cl-addto single-item control (reusable "add to <target>" foundation).
   First receiver is Workspace; wired by static/js/cl_addto.js. Used on the
   Variant detail Overview shopping/action block today. */
.cl-addto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cl-addto-button.is-busy {
  opacity: 0.6;
  cursor: progress;
}

.cl-addto-status {
  font-size: 0.8rem;
}

.cl-status-line--ok {
  color: var(--cl-success, #4caf50);
}

.cl-controls-results {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .cl-controls-results {
    display: none;
  }
}

/* Tabbed work area */
.cl-tab-work-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cl-tab-work-area-container {
  width: 100%;
}

.cl-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cl-colour-regular) 55%, transparent) transparent;
}

.cl-tab-panel[hidden] {
  display: none !important;
}

/* Roster calendar/payroll panels use .cl-container-frame (display:flex), which
   otherwise beats the UA [hidden] rule. Only these two sections toggle. */
[data-cl-cal-roster-section][hidden],
[data-cl-roster-payroll-section][hidden],
[data-cl-roster-calendar-tools][hidden],
[data-cl-roster-payroll-tools][hidden] {
  display: none !important;
}

.cl-tab-placeholder {
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  margin: auto;
}

.cl-preview-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.05rem 0.1rem;
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--text-muted) 80%, #fff 20%);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--cl-colour-active) 20%);
  border: 1px solid color-mix(in srgb, var(--cl-colour-active) 35%, var(--border-subtle));
  width: max-content;
  max-width: 100%;
}

.cl-preview-note[hidden] { display: none; }

/* Browser mode ? card grid with flip */
/* ========================================================================
   Results spine (shared styling + UI rules)
   Source of truth: .cl-landing-page dense scale (110px / 98px) + flip/touch.
   Tile zones (top X/pips, hints, actions), tools bar, thinker, staff table,
   load-more, directory scope tiles, selection.
   Leftover minmax(170px) below is not the live Home/Collection/Browser scale.
   ======================================================================== */
[data-cl-results] {
  position: relative;
}

[data-cl-results-body] {
  position: relative;
}

.cl-results-thinker,
[data-cl-results] .cl-tab-work-thinker {
  z-index: 6;
}

.cl-results-tile-top {
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
  right: 0.28rem;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.2rem;
  pointer-events: none;
}

.cl-results-tile-top > * {
  pointer-events: auto;
}

.cl-results-tile-close {
  width: 1.45rem;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  margin-left: auto;
}

.cl-collection-display .cl-results-tile-top .cl-collection-qty-blip {
  position: static;
  top: auto;
  left: auto;
}

.cl-controls-row-section--sort {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}

.cl-results-sort-field {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 7.25rem;
}

.cl-results-sort-label {
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--text-muted) 80%, #fff 20%);
  line-height: 1.1;
}

.cl-results-sort-field .cl-select {
  min-width: 7.25rem;
}

.cl-browser-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  align-items: stretch;
}

.cl-browser-card {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius);
  -webkit-perspective: 900px;
  perspective: 900px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cl-binder-tile {
  --cl-binder-peek: 9%;
  display: block;
  text-decoration: none;
  color: inherit;
  -webkit-perspective: none;
  perspective: none;
  overflow: hidden;
}

/* See All alone must not stretch to the full row while other tiles load. */
.cl-landing-page .cl-browser-grid > .cl-binder-tile:only-child {
  width: 100%;
  max-width: var(--cl-results-card-min, 110px);
  justify-self: start;
}

.cl-binder-cover {
  position: absolute;
  inset: 0 var(--cl-binder-peek) 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 86%, #1a1a1a 14%), var(--bg-card));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.34rem 0.52rem 0.5rem;
  gap: 0.12rem;
  z-index: 2;
  border: 2px solid color-mix(in srgb, var(--cl-colour-accent) 48%, #fff 22%);
  box-sizing: border-box;
  container-type: size;
}

.cl-binder-tile--back .cl-binder-cover {
  inset: 0 0 0 var(--cl-binder-peek);
}

.cl-binder-outlines {
  position: absolute;
  inset: 0 var(--cl-binder-peek) 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.cl-binder-tile--back .cl-binder-outlines {
  inset: 0 0 0 var(--cl-binder-peek);
}

.cl-binder-outlines--back {
  transform: scaleX(-1);
  transform-origin: center;
}

.cl-binder-outline {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2px solid color-mix(in srgb, var(--cl-colour-accent) 28%, #8a8a8a 72%);
  box-sizing: border-box;
  opacity: 0.55;
}

.cl-binder-outline--back {
  transform: translate(10%, 0);
  opacity: 0.38;
}

.cl-binder-outline--page:nth-child(2) { transform: translate(7.5%, 0); opacity: 0.44; }
.cl-binder-outline--page:nth-child(3) { transform: translate(5%, 0); opacity: 0.5; }
.cl-binder-outline--page:nth-child(4) { transform: translate(2.5%, 0); opacity: 0.56; }

.cl-binder-type {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin: 0;
  font-size: clamp(0.58rem, 7.2cqh, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: left;
}

.cl-binder-title {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  color: #fff;
  font-weight: 800;
  font-size: clamp(0.78rem, 12cqh, 1.15rem);
  line-height: 1.08;
  text-align: left;
  width: 100%;
  max-width: 100%;
  max-height: 4.32em;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.cl-binder-well {
  --cl-binder-well-width: 54%;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: center;
  width: var(--cl-binder-well-width);
  aspect-ratio: 5 / 7;
  height: auto;
  margin-top: auto;
  margin-bottom: 0;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: color-mix(in srgb, #000 28%, var(--bg-elevated));
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.cl-binder-well__thumb,
.cl-binder-well__logo,
.cl-binder-well__sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.cl-binder-well__thumb {
  opacity: 0;
  transition: opacity 820ms ease;
}

.cl-binder-well__logo,
.cl-binder-well__sprite {
  opacity: 1;
}

.cl-binder-well__thumb.is-active {
  opacity: 1;
}

.cl-binder-well[data-cl-binder-well="sprite"] {
  --cl-binder-well-width: 72%;
  background: #121212;
  box-shadow: 0 0.35rem 0.7rem color-mix(in srgb, #000 46%, transparent);
}

.cl-binder-well[data-cl-binder-well="sprite"] .cl-binder-well__sprite {
  image-rendering: auto;
}

.cl-binder-well[data-cl-binder-well="icon"] {
  background: transparent;
}

.cl-binder-well[data-cl-binder-well="icon"] > i {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  line-height: 1;
  font-size: 56cqmin;
  color: #fff;
}

.cl-binder-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #000 58%, transparent);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.cl-binder-veil > i {
  font-size: 1.55rem;
}

@media (hover: hover) and (pointer: fine) {
  .cl-binder-tile:not(.cl-binder-tile--crumb):hover .cl-binder-veil,
  .cl-binder-tile:not(.cl-binder-tile--crumb):focus-visible .cl-binder-veil {
    opacity: 1;
  }
}

.cl-binder-tile--crumb {
  cursor: pointer;
}

@keyframes cl-binder-wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

.cl-binder-tile.is-cl-binder-wiggle {
  animation: cl-binder-wiggle 380ms ease;
}

.cl-landing-card.is-cl-binder-sort-fade {
  animation: cl-binder-sort-fade 280ms ease;
}

@keyframes cl-binder-sort-fade {
  0% { opacity: 1; }
  40% { opacity: 0.28; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-binder-well__thumb {
    transition: none;
  }
  .cl-binder-tile.is-cl-binder-wiggle,
  .cl-landing-card.is-cl-binder-sort-fade {
    animation: none;
  }
}

.cl-browser-card-inner {
  position: absolute;
  inset: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.22, 0.65, 0.32, 1);
  transition: transform 500ms cubic-bezier(0.22, 0.65, 0.32, 1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Hover/focus flip only on fine pointers — sticky :hover on iOS can leave a blank face. */
@media (hover: hover) and (pointer: fine) {
  .cl-browser-card:hover .cl-browser-card-inner,
  .cl-browser-card:focus-within .cl-browser-card-inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

.cl-browser-card-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  background: var(--bg-elevated);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Explicit front pose — Safari often blanks faces without a 3D transform. */
  -webkit-transform: translateZ(0.1px) rotateY(0deg);
  transform: translateZ(0.1px) rotateY(0deg);
}

.cl-browser-card-face--front {
  -webkit-transform: translateZ(0.1px) rotateY(0deg);
  transform: translateZ(0.1px) rotateY(0deg);
}

.cl-browser-card-face--back {
  -webkit-transform: rotateY(180deg) translateZ(0.1px);
  transform: rotateY(180deg) translateZ(0.1px);
  padding: 0.55rem 0.6rem;
  gap: 0.4rem;
  justify-content: space-between;
}

.cl-browser-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cl-browser-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cl-browser-card-meta--front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.45rem 0.55rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  color: #fff;
  font-size: 0.78rem;
}

.cl-browser-card-meta-name {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cl-browser-card-meta-sub {
  color: color-mix(in srgb, #fff 70%, var(--text-muted) 30%);
  font-size: 0.72rem;
}

.cl-browser-card-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.74rem;
}

.cl-browser-card-meta-key {
  color: var(--text-muted);
}

.cl-browser-card-meta-value {
  color: var(--text);
  font-weight: 600;
}

/* Results tables — dark theme, not the legacy white look.
   Important: overflow-x:auto alone makes overflow-y compute to auto (CSS),
   which nests a second vertical scrollbar inside .cl-tab-panel. */
.cl-results-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Browser results: one vertical scroll owner (the panel). */
[data-cl-browser-results].cl-tab-panel {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-cl-browser-results] .cl-results-scroll {
  flex: 1 1 auto;
  min-height: 0;
  /* Both axes visible — avoids the CSS “visible+hidden ⇒ auto” nested scrollbar. */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Keep flip transforms from expanding a nested scrollport mid-animation. */
[data-cl-browser-results] .cl-browser-grid,
[data-cl-browser-results] .cl-directory-layer {
  overflow: clip;
}

.cl-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.cl-results-table thead th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--cl-colour-accent) 8%);
  color: color-mix(in srgb, #fff 78%, var(--text-muted) 22%);
  font-weight: 700;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.cl-results-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 90%, transparent);
}

.cl-results-table tbody tr:hover {
  background: color-mix(in srgb, var(--bg-elevated) 85%, var(--cl-colour-active) 15%);
}

.cl-results-row--navigable {
  cursor: pointer;
}

.cl-results-row--navigable:focus-visible {
  outline: 2px solid var(--cl-colour-active);
  outline-offset: -2px;
}

.cl-results-cell {
  padding: 0.42rem 0.55rem;
  vertical-align: middle;
}

.cl-results-cell--lang,
.cl-results-cell--price,
.cl-results-cell--stock,
.cl-results-cell--shopify,
.cl-results-cell--third-party,
.cl-results-cell--check {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cl-results-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 1rem 0.5rem;
  font-size: 0.85rem;
}

.cl-results-empty-row td {
  background: transparent;
}

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

@media (max-width: 760px) {
  .cl-sbar-filters {
    gap: 0.3rem 0.35rem;
  }
  .cl-controls-row:not(.is-cl-row-swipe-active) {
    flex-wrap: wrap;
  }
  .cl-controls-row:not(.is-cl-row-swipe-active) .cl-controls-row-section {
    flex-wrap: wrap;
  }
  .cl-controls-row.is-cl-row-swipe-active .cl-controls-row-section {
    flex-wrap: nowrap;
  }
}

.cl-rail-template--shell {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  display: grid;
  grid-template-columns: var(--cl-rail-width) minmax(0, 1fr);
  gap: var(--cl-rail-gap);
  align-content: stretch;
}

/* Rail container ? chrome with pointer */
.cl-rail-container {
  position: relative;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.3rem;
  padding: 0.44rem 0.5rem;
  justify-items: center;
}

/* Fixed selected-position pointer: Active-colour pennant on the left edge of the
   TILE VIEWPORT (not the whole rail chrome). Must live inside .cl-rail-tile-container
   so top:50% matches positionReel mid-viewport math.
   UNDO-RAIL-POINTER-2026-07-28: restore previous block that used top:50% on
   .cl-rail-container (sibling of tile container) — see change log. */
.cl-rail-tile-container > .cl-rail-pointer {
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--cl-colour-active);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cl-colour-active) 70%, transparent));
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 6;
  opacity: 0.95;
}

.cl-rail-tile-container > .cl-rail-pointer::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -10px;
  width: 7px;
  height: 6px;
  background: color-mix(in srgb, var(--cl-colour-active) 90%, transparent);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--cl-colour-active) 60%, transparent);
}

/* Polish v4: rail speed-nav rows (top + bottom) */
.cl-rail-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.05rem 0;
}

.cl-rail-nav-row--top {
  margin-bottom: 0.05rem;
}

.cl-rail-nav-row--bottom {
  margin-top: 0.05rem;
}

/* Rail speed-nav buttons ? cl-btn + quiet pill + rail-nav modifier (CL-UNI-2).
   Deprecated alias: .cl-rail-nav-button */
.cl-btn.cl-btn--quiet.cl-btn--pill.cl-btn--small.cl-btn--rail-nav,
.cl-rail-nav-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  min-width: 2rem;
  height: 1.65rem;
  min-height: 1.65rem;
  padding: 0 0.45rem;
  line-height: 1;
  font-weight: 600;
  opacity: 0.78;
  cursor: pointer;
}

.cl-rail-nav-button .fa-solid,
.cl-rail-nav-button i {
  font-size: 0.78rem;
  line-height: 1;
}

.cl-rail-nav-button .cl-rail-nav-step {
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: inherit;
}

.cl-btn--rail-nav-major,
.cl-rail-nav-button--major {
  border-color: color-mix(in srgb, var(--cl-colour-active) 35%, var(--border-subtle));
  color: color-mix(in srgb, var(--cl-colour-active) 65%, #fff);
}

.cl-btn--rail-nav-minor,
.cl-rail-nav-button--minor {
  border-color: color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
  color: color-mix(in srgb, var(--cl-colour-regular) 70%, #fff);
}

.cl-btn.cl-btn--rail-nav:hover:not(:disabled),
.cl-btn.cl-btn--rail-nav:focus-visible:not(:disabled),
.cl-rail-nav-button:hover:not(:disabled),
.cl-rail-nav-button:focus-visible:not(:disabled) {
  opacity: 1;
  color: #fff;
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-accent) 30%);
  border-color: color-mix(in srgb, var(--cl-colour-active) 60%, var(--border-subtle));
  box-shadow: 0 0 10px color-mix(in srgb, var(--cl-colour-active) 32%, transparent);
  outline: none;
}

.cl-btn.cl-btn--rail-nav:active:not(:disabled),
.cl-rail-nav-button:active:not(:disabled) {
  transform: scale(0.94);
}

.cl-btn.cl-btn--rail-nav:disabled,
.cl-rail-nav-button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  box-shadow: none;
}

/* Legacy single chevron (kept for any non-workspace consumer) */
.cl-rail-nav {
  width: 2.5rem;
  height: 1.55rem;
  min-height: 1.55rem;
  justify-self: center;
  padding: 0;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  color: color-mix(in srgb, var(--cl-colour-regular) 60%, #fff);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  opacity: 0.78;
  transition: opacity var(--transition), background var(--transition),
    box-shadow var(--transition), color var(--transition), transform var(--transition);
}

.cl-rail-nav:hover:not(:disabled) {
  opacity: 1;
  color: #fff;
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-accent) 30%);
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  box-shadow: 0 0 10px color-mix(in srgb, var(--cl-colour-active) 32%, transparent);
}

.cl-rail-nav:active:not(:disabled) {
  transform: scale(0.94);
}

.cl-rail-nav--up { margin-bottom: 0.04rem; }
.cl-rail-nav--down { margin-top: 0.04rem; }

/* Rail tile viewport ? reel: hidden overflow, transform-driven list, no scrollbar */
.cl-rail-tile-container {
  position: relative;
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cl-rail-tile-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cl-rail-reel {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--cl-rail-tile-gap, 0.4rem);
  padding: 0 0.12rem;
  will-change: transform;
  transition: transform 320ms cubic-bezier(0.22, 0.65, 0.32, 1);
}

.cl-rail-work-area-container {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
}

/* Slice 5/6: hydrate soft-apply + cold-path host (fade work area; keep rail chrome outside). */
.cl-rail-work-area-container[data-cl-ws-soft-apply] {
  position: relative;
  flex-direction: column;
}

.cl-rail-work-area-container[data-cl-ws-soft-apply] > [data-cl-soft-loader-content] {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.cl-ws-cold-thinker {
  flex-direction: column;
  gap: 0.65rem;
}

.cl-ws-cold-label {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted, var(--text-secondary));
}

.cl-rail-work-area-container > .cl-container-frame {
  flex: 1;
  min-height: 0;
}

.cl-rail-work-placeholder {
  width: 100%;
  flex: 1;
}

.cl-rail-work-placeholder__title {
  margin: 0;
}

.cl-rail-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cl-rail-tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  opacity: 0.78;
  z-index: 0;
  -webkit-mask-image: linear-gradient(
    270deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 32%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0) 78%
  );
  mask-image: linear-gradient(
    270deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 32%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0) 78%
  );
}

.cl-rail-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    270deg,
    rgba(7, 10, 18, 0.18) 0%,
    rgba(7, 10, 18, 0.58) 38%,
    rgba(7, 10, 18, 0.92) 65%,
    rgba(7, 10, 18, 0.96) 100%
  );
  z-index: 1;
}

.cl-rail-tile-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cl-rail-tile-primary {
  font-weight: 700;
}

.cl-rail-tile-secondary {
  font-size: 0.74rem;
  color: rgba(236, 240, 245, 0.92);
  font-weight: 500;
}

/* Polish v3: selected tile has no hard outline/glow ? fixed pointer marks the position */
.cl-rail-tile--selected {
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--cl-colour-active) 12%);
  border-color: color-mix(in srgb, var(--border-subtle) 70%, var(--cl-colour-active) 30%);
  z-index: 1;
}

.cl-rail-tile--mode,
.cl-rail-tile--end {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-elevated) 78%, var(--cl-colour-accent) 22%),
    var(--bg-card)
  );
  filter: none;
}

/* Fake/control tiles never display the G/Y/R bar */
.cl-rail-tile--mode::before,
.cl-rail-tile--end::before {
  display: none !important;
  content: none !important;
}

.cl-rail-tile--mode .cl-rail-tile-secondary,
.cl-rail-tile--end .cl-rail-tile-secondary,
.cl-rail-tile--mode .cl-rail-tile-bg,
.cl-rail-tile--end .cl-rail-tile-bg,
.cl-rail-tile--mode .cl-rail-tile-overlay,
.cl-rail-tile--end .cl-rail-tile-overlay {
  display: none;
}

.cl-rail-tile--mode .cl-rail-tile-content,
.cl-rail-tile--end .cl-rail-tile-content {
  align-items: center;
}

.cl-rail-tile--mode .cl-rail-tile-primary,
.cl-rail-tile--end .cl-rail-tile-primary {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

/* Polish v3: no purple left border on real card tiles ? keep neutral subtle border */
.cl-rail-tile--mode,
.cl-rail-tile--card,
.cl-rail-tile--end {
  border-left-color: var(--border-subtle);
}

.cl-rail-tile--G,
.cl-rail-tile--Y,
.cl-rail-tile--R {
  padding-left: 0.85rem;
}

.cl-rail-tile--G::before,
.cl-rail-tile--Y::before,
.cl-rail-tile--R::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.28rem;
  z-index: 2;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 0%, transparent);
}

.cl-rail-tile--G::before {
  background: var(--success);
}

.cl-rail-tile--Y::before {
  background: var(--warning);
}

.cl-rail-tile--R::before {
  background: var(--error);
}

@media (max-width: 980px) {
  .cl-title-row--mode {
    align-items: flex-start;
    flex-direction: column;
  }

  .cl-mode-tabs {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .cl-rail-template--shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .cl-title-container--mode {
    gap: 0.55rem;
  }

  .cl-mode-action-strip {
    padding-inline: 0.4rem;
  }

  .cl-rail-template--shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cl-rail-container {
    min-height: 180px;
  }
}

/* Reusable scroll helpers + themed scrollbars */
.cl-scroll { scrollbar-color: #7c3aed #1f1f29; scrollbar-width: thin; }
.cl-scroll-y { overflow-y: auto; overflow-x: hidden; }
.cl-scroll-x { overflow-x: auto; overflow-y: hidden; }
.cl-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cl-scroll::-webkit-scrollbar-track { background: #1f1f29; border-radius: 999px; }
.cl-scroll::-webkit-scrollbar-thumb { background: #7c3aed; border-radius: 999px; border: 2px solid #1f1f29; }
.cl-scroll::-webkit-scrollbar-thumb:hover { background: #8b5cf6; }

/* --- Composition & layout primitives (additive; rollout attaches in pages later) --- */
.cl-block-group {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cl-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0.75rem;
  min-width: 0;
}

.cl-row-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

.cl-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.cl-column {
  flex: 1 1 minmax(0, 1fr);
  min-width: 0;
}

.cl-container-centre-align {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.cl-card-container {
  width: 100%;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cl-split-50 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.cl-half-container {
  width: 100%;
  min-width: 0;
}

.cl-left-half-container,
.cl-right-half-container {
  min-width: 0;
}

.cl-split-thumb-work {
  display: grid;
  grid-template-columns: minmax(240px, 32%) minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  min-height: 0;
  min-width: 0;
}

.cl-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.cl-btn-row--fill > .cl-btn {
  flex: 1 1 12rem;
}

/* ---------------------------------------------------------------------------
   cl-row-swipe ? small-screen horizontal swipe for action / button rows.
   Desktop: track uses display:contents (no layout change).
   ?768px (active): single-line scroller, hidden scrollbar.
   Edge hint: mask-image fades content to transparent (no painted colour overlay).
   --------------------------------------------------------------------------- */
.cl-row-swipe {
  --cl-row-swipe-fade-size: 2.85rem;
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.cl-row-swipe__track {
  display: contents;
}

.cl-row-swipe.is-cl-row-swipe-active {
  display: block;
  flex-wrap: nowrap;
}

.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  padding: 0.05rem 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cl-controls-row.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track {
  gap: 0.4rem 0.65rem;
  justify-content: flex-start;
}

.cl-mode-action-row.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track {
  gap: 0.4rem;
  align-items: flex-start;
}

/* Grouped orange strips (Workspace / Variant Staff): one swipe bar;
   keep labelled groups intact; keep each group's icon buttons on one line. */
.cl-mode-action-row--groups.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.75rem 1.25rem;
}

.cl-mode-action-row--groups.is-cl-row-swipe-active > .cl-row-swipe__track > .cl-action-group,
.cl-mode-action-row--groups.is-cl-row-swipe-active > .cl-row-swipe__track > .cl-cal-roster__action-group {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  min-width: max-content;
}

.cl-mode-action-row--groups.is-cl-row-swipe-active .cl-action-group-buttons,
.cl-mode-action-row--groups.is-cl-row-swipe-active .cl-btn-row.cl-action-group-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: max-content;
}

.cl-cal-roster__action-row.is-cl-row-swipe-active > .cl-row-swipe__track {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.cl-cal-roster__action-row.is-cl-row-swipe-active > .cl-row-swipe__track > .cl-cal-roster__action-group {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
}

.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track > * {
  flex: 0 0 auto;
  min-width: 0;
}

.cl-mode-action-row--groups.is-cl-row-swipe-active > .cl-row-swipe__track > *,
.cl-cal-roster__action-row.is-cl-row-swipe-active > .cl-row-swipe__track > * {
  min-width: max-content;
}

/* Content dissolves at edges (mask), not a painted colour band. */
.cl-row-swipe.is-cl-row-swipe-active.cl-row-swipe--fade-right:not(.cl-row-swipe--fade-left) > .cl-row-swipe__track {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - var(--cl-row-swipe-fade-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - var(--cl-row-swipe-fade-size)),
    transparent 100%
  );
}

.cl-row-swipe.is-cl-row-swipe-active.cl-row-swipe--fade-left:not(.cl-row-swipe--fade-right) > .cl-row-swipe__track {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--cl-row-swipe-fade-size),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--cl-row-swipe-fade-size),
    #000 100%
  );
}

.cl-row-swipe.is-cl-row-swipe-active.cl-row-swipe--fade-left.cl-row-swipe--fade-right > .cl-row-swipe__track {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--cl-row-swipe-fade-size),
    #000 calc(100% - var(--cl-row-swipe-fade-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--cl-row-swipe-fade-size),
    #000 calc(100% - var(--cl-row-swipe-fade-size)),
    transparent 100%
  );
}

.cl-card-thumbnail {
  display: inline-block;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  overflow: hidden;
  line-height: 0;
}

.cl-card-thumbnail__image {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Visual-only missing/failed image fallback (never persist placeholder URLs as card data) */
.cl-card-thumbnail--placeholder,
.cl-card-thumbnail__image.cl-card-thumbnail--placeholder {
  opacity: 0.92;
}

.cl-image-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
}

.cl-image-comparison__panel {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cl-image-comparison__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cl-image-comparison__subtitle {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.cl-image-comparison__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cl-form-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.cl-table-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   cl-field / cl-input / cl-select ? reusable dark-theme form controls.
   A small global form block for admin/tool forms (e.g. User Access). Use
   .cl-field-row to lay fields out inline-wrapping; each .cl-field stacks a
   .cl-field-label over its control.
   --------------------------------------------------------------------------- */
.cl-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
}

.cl-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* Field that should consume the remaining row width (e.g. a search/barcode
   input sitting beside a fixed-width action button). */
.cl-field--grow {
  flex: 1 1 12rem;
}

.cl-field-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cl-input,
.cl-select {
  font: inherit;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
  min-width: 0;
  color-scheme: dark;
}

.cl-input:focus,
.cl-select:focus {
  outline: none;
  border-color: var(--cl-colour-active, var(--cl-colour-highlight));
}

.cl-input:disabled,
.cl-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Native <select> popup rows ? keep readable on dark theme (esp. Windows). */
select.cl-input option,
select.cl-select option,
.cl-filter-item select option,
select.cl-filter-control option,
select.cl-filter-drop-control option {
  background-color: var(--bg-card, #161022);
  color: var(--text, #f4f0fa);
}

.cl-field--span-2 {
  flex: 1 1 100%;
}

.cl-field .cl-input,
.cl-field .cl-select,
.cl-field textarea.cl-input {
  width: 100%;
}

.cl-field textarea.cl-input {
  min-height: 4.5rem;
  resize: vertical;
  line-height: 1.4;
}

.cl-modal-work-area--form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cl-modal-work-area--form .cl-field-row {
  gap: 0.75rem;
}

.cl-modal-work-area--form .cl-field {
  flex: 1 1 10rem;
}

.cl-modal-work-area--form .cl-field--times {
  flex: 1 1 7rem;
  max-width: 11rem;
}

.cl-modal-work-area--form .cl-field--cut {
  flex: 0 0 6.5rem;
  max-width: 7.5rem;
}

.cl-modal-work-area--form select.cl-input {
  max-width: 100%;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   data-cl-admin-users ? User Access table cell controls (built on .cl-table).
   --------------------------------------------------------------------------- */
[data-cl-admin-users] td .cl-input,
[data-cl-admin-users] td .cl-select {
  width: 100%;
}

[data-cl-admin-users] .cl-admin-users-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cl-admin-users-roottag {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.68rem;
  color: var(--cl-colour-highlight);
  border: 1px solid color-mix(in srgb, var(--cl-colour-highlight) 45%, var(--border-subtle));
  border-radius: var(--radius);
  padding: 0.05rem 0.35rem;
}

.cl-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.cl-preview-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
}

.cl-preview-modal__card {
  position: relative;
  z-index: 1;
  width: min(92vw, 1040px);
  max-height: calc(100vh - 2.4rem);
  margin: auto;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.cl-preview-modal__close {
  justify-self: end;
  margin: 0.55rem;
  position: sticky;
  top: 0;
  z-index: 2;
}

.cl-preview-modal__body {
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  min-height: 0;
}

.cl-preview-modal__image {
  max-width: 100%;
  max-height: calc(100vh - 8.2rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* Generic toast region (e.g. JS-created fallback). Prefer #cl-footer-toast-region on normal pages. */
.cl-toast-region:not(.cl-footer-toast-region) {
  position: fixed;
  bottom: calc(var(--cl-footer-bar-height) + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
  width: min(92vw, 520px);
  max-width: 100%;
}

/* Footer-hosted flashes: stack upward from above the footer bar (no layout reflow) */
.cl-footer-toast-region {
  position: fixed;
  bottom: var(--cl-footer-bar-height);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
  width: min(92vw, 520px);
  max-width: 100%;
}

.cl-toast {
  pointer-events: auto;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.cl-toast--success {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--text);
}

.cl-toast--error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: var(--text);
}

.cl-toast--info {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

@keyframes cl-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cl-toast-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.cl-toast--enter {
  animation: cl-toast-in 1s ease forwards;
}

.cl-toast--exit {
  animation: cl-toast-out 1s ease forwards;
}

.cl-footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: var(--cl-footer-bar-height);
  padding: 0.35rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  z-index: var(--cl-ui-shell-z);
  pointer-events: none;
}

.cl-footer-bar > * {
  pointer-events: auto;
}

.cl-footer-user {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.cl-footer-user-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.cl-footer-greeting {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.1rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  max-width: min(42vw, 12rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cl-footer-greeting__text {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Mobile: fixed-size avatar instead of long G'Day names. */
.cl-footer-greeting__avatar {
  display: none;
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  min-height: 1.7rem;
  flex-shrink: 0;
  pointer-events: none;
}

.cl-footer-greeting__avatar .cl-display-pic__monogram {
  font-size: 0.72rem;
  background: color-mix(in srgb, var(--cl-colour-highlight, #7c5cff) 55%, #1a1328 45%);
}

.cl-footer-greeting:hover,
.cl-footer-greeting:focus-visible {
  color: color-mix(in srgb, #fff 78%, var(--text-muted) 22%);
  outline: none;
}

@media (max-width: 899px) {
  .cl-footer-greeting {
    max-width: none;
    padding: 0;
    overflow: visible;
  }

  .cl-footer-greeting__text {
    display: none;
  }

  .cl-footer-greeting__avatar {
    display: inline-flex;
  }

  .cl-footer-greeting:hover .cl-footer-greeting__avatar,
  .cl-footer-greeting:focus-visible .cl-footer-greeting__avatar {
    border-color: color-mix(in srgb, var(--cl-colour-highlight) 45%, var(--border-subtle));
  }
}

.cl-footer-signout-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.cl-footer-user-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.cl-footer-logout-modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cl-footer-logout-modal__links {
  margin: 0.35rem 0 0.85rem;
  flex-wrap: wrap;
}

.cl-footer-logout-modal__links .cl-btn {
  gap: 0.4rem;
}


.cl-footer-centre {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0.5rem;
}

.cl-footer-login-link {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.1rem 0.15rem;
}

.cl-footer-login-link:hover,
.cl-footer-login-link:focus-visible {
  color: color-mix(in srgb, #fff 78%, var(--text-muted) 22%);
  outline: none;
}

/* Cross-shell logo switcher (footer centre + drawer bottom). */
.cl-shell-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.cl-shell-switcher__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  min-width: 0;
  height: 2rem;
  padding: 0 0.28rem;
  border-radius: 0.35rem;
  text-decoration: none;
  color: var(--text-muted);
  opacity: 0.78;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cl-shell-switcher__link:hover,
.cl-shell-switcher__link:focus-visible {
  opacity: 1;
  color: color-mix(in srgb, #fff 82%, var(--text-muted) 18%);
  outline: none;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}

.cl-shell-switcher__link--active {
  opacity: 1;
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-muted) 35%, transparent);
}

.cl-shell-switcher__logo {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  display: block;
}

.cl-shell-switcher__logo--wide {
  display: block;
  width: auto;
  height: 1.15rem;
  max-width: min(22vw, 5.75rem);
}

.cl-shell-switcher__fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
}

/* Footer mobile: square branded icons (avoid glitchy full-width wordmarks). */
.cl-shell-switcher--footer .cl-shell-switcher__logo--wide {
  display: none;
}

.cl-shell-switcher--footer .cl-shell-switcher__logo--icon {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
}

.cl-shell-switcher--footer .cl-shell-switcher__link {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
}

@media (min-width: 900px) {
  .cl-shell-switcher {
    gap: 0.65rem;
  }

  .cl-shell-switcher__link {
    height: 2rem;
    padding: 0 0.45rem;
  }

  .cl-shell-switcher__logo--wide {
    height: 1.35rem;
    max-width: min(28vw, 9.5rem);
  }

  /* Footer desktop: compact wordmarks. */
  .cl-shell-switcher--footer .cl-shell-switcher__link {
    width: auto;
    height: 2rem;
    padding: 0 0.45rem;
  }

  .cl-shell-switcher--footer .cl-shell-switcher__logo--wide {
    display: block;
  }

  .cl-shell-switcher--footer .cl-shell-switcher__logo--icon {
    display: none;
  }
}

/* Hamburger tray: wordmarks under the page nav list. */
.cl-shell-switcher--drawer {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cl-shell-switcher--drawer .cl-shell-switcher__link {
  min-height: 2.25rem;
  height: auto;
  padding: 0.4rem 0.55rem;
}

.cl-shell-switcher--drawer .cl-shell-switcher__logo--icon {
  display: none;
}

.cl-shell-switcher--drawer .cl-shell-switcher__logo--wide {
  display: block;
  height: 1.45rem;
  max-width: min(42vw, 8.5rem);
}

/* Generic footer-centre status control (thinker / ready / error). */
.cl-footer-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 80%, transparent);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--bg-elevated, #fff) 88%, var(--bg, #f8fafc));
  color: var(--text-muted, #64748b);
  font-size: 0.85rem;
  line-height: 1;
  cursor: default;
}
.cl-footer-status:disabled {
  opacity: 1;
  cursor: default;
}
.cl-footer-status.is-ready:not(:disabled) {
  color: var(--success, #16a34a);
  border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border, #cbd5e1));
  cursor: pointer;
}
.cl-footer-status.is-ready:not(:disabled):hover,
.cl-footer-status.is-ready:not(:disabled):focus-visible {
  background: color-mix(in srgb, var(--success, #16a34a) 12%, var(--bg-elevated, #fff));
}
.cl-footer-status.is-error {
  color: var(--danger, #dc2626);
  border-color: color-mix(in srgb, var(--danger, #dc2626) 40%, var(--border, #cbd5e1));
  cursor: pointer;
}
.cl-footer-status .fa-check {
  color: var(--success, #16a34a);
  font-size: 0.95rem;
}
.cl-footer-status .cl-inline-thinker {
  transform: scale(0.85);
  transform-origin: center;
}
/* Font Awesome sets display:!important on .fa-* icons, which beats the UA
   [hidden] rule ? keep thinker/tick mutually exclusive in the footer chip. */
.cl-footer-status [hidden] {
  display: none !important;
}

.cl-footer-right {
  flex: 0 0 auto;
  min-width: 2rem;
  min-height: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cl-footer-direct-login-link {
  font-size: inherit;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.cl-footer-direct-login-link:hover,
.cl-footer-direct-login-link:focus-visible {
  color: var(--text-primary, var(--text));
}

.cl-footer-shortcut {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 1.85rem;
  padding: 0.2rem 0.45rem;
  margin-left: 0.25rem;
  border-radius: var(--radius-md, 0.35rem);
  color: var(--text-muted, #8a85a0);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

/* Footer cart is a <button>; strip UA button chrome so it matches <a> shortcuts. */
button.cl-footer-shortcut.cl-landing-cart-entry--footer {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  color: var(--text-muted, #8a85a0);
  background: transparent;
  background-color: transparent;
}

button.cl-footer-shortcut.cl-landing-cart-entry--footer:hover,
button.cl-footer-shortcut.cl-landing-cart-entry--footer:focus-visible {
  color: var(--text-primary, var(--text));
  border-color: var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
}

.cl-footer-shortcut:hover,
.cl-footer-shortcut:focus-visible {
  color: var(--text-primary, var(--text));
  border-color: var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
}

.cl-footer-shortcut__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
}

.cl-notification-counter {
  position: absolute;
  top: -0.15rem;
  right: -0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--cl-colour-danger, #dc2626);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.cl-notification-counter[hidden] {
  display: none !important;
}

.cl-footer-version {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Reusable search/filter/browser blocks */
.cl-search-container {
  display: grid;
  gap: 0.65rem;
}
.cl-filter-button-row,
.cl-filter-dropdown-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.cl-navigation-button-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.cl-container-light-theme {
  background: #f9fbff;
  border-color: #d6deec;
  color: #111827;
}
.thumbnail-browser-container {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.65rem;
}
.thumbnail-card-detailed__link {
  display: block;
}
.cl-flip-card {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}
.cl-flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.cl-flip-card__front,
.cl-flip-card__back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
}
.cl-flip-card__front {
  z-index: 2;
  transform: rotateY(0deg);
}
.cl-flip-card__back {
  transform: rotateY(180deg);
}

@media (max-width: 768px) {
  .cl-split-50,
  .cl-image-comparison {
    grid-template-columns: 1fr;
  }

  .cl-split-thumb-work {
    grid-template-columns: 1fr;
  }
}

/* ----- Landing: Hero ----- */
.hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  margin: 0 0 0.5rem;
  background: linear-gradient(135deg, #e2e8f0 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-tagline {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 36rem;
  line-height: 1.45;
  text-wrap: balance;
}

.cl-landing-stack {
  width: 100%;
}

/* ----- Search bar (homepage + reusable) ----- */
.search-bar,
.cl-search-bar-block {
  max-width: 560px;
  margin: 0 auto 2rem;
}
/* Database explorer & legacy: section wraps input row + button (not .search-bar-form). */
.search-bar:not(.cl-search-bar-block) {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.search-bar-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  align-items: stretch;
}
.search-bar-form .search-bar-input {
  flex: 1;
  min-width: 0;
}
.search-bar input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-bar input::placeholder {
  color: var(--text-muted);
}
.search-bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.search-bar .btn,
.search-bar-form .btn {
  padding: 0.75rem 1.25rem;
}

/* ----- Tool tiles grid (home): whole tile is clickable; icon focus; 5-across desktop ----- */
.cl-tool-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 1100px) {
  .cl-tool-tiles {
    grid-template-columns: repeat(5, 1fr);
  }
}

.cl-tool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  min-height: 140px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
}
button.cl-tool-tile {
  font: inherit;
  width: 100%;
  cursor: pointer;
}
.cl-tool-tile:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
  color: inherit;
}

.cl-tool-tile__icon {
  width: 56px;
  height: 56px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.cl-tool-tile__icon i {
  font-size: 1.45rem;
  line-height: 1;
}

.cl-tool-tile__hub-logo {
  height: 2rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.cl-tool-tile h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cl-tool-tile h3 .help-trigger {
  margin-left: 0.15rem;
}
.cl-tool-tile p,
.cl-tool-tile .btn {
  display: none;
}

.cl-tool-tile--locked {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
}
.cl-tool-tile--locked .help-trigger {
  pointer-events: auto;
  cursor: pointer;
}
.cl-tool-tile--locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}
.cl-tool-tile--disabled {
  pointer-events: none;
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: none;
  color: inherit;
}

.cl-tool-tile--locked .cl-tool-tile__lock-hint {
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.nav-link--locked {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}

/* ----- Panels (System Activity, News) ----- */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.panel-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.panel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 0.75rem;
}
.panel-row:last-child {
  margin-bottom: 0;
}

.panel-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-width: 100px;
}
.panel-value {
  font-size: 0.9rem;
  color: var(--text);
}
.panel-value.status-ok {
  color: var(--success);
}
.panel-value.status-error {
  color: var(--error);
}
.panel-value.status-warn {
  color: var(--warning);
}
.panel-hint {
  margin: 0.25rem 0 0 0;
  font-size: 0.9em;
}
.panel-body-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
.btn:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 12px var(--accent-glow);
}
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/*
 * Cascade fix: legacy `.btn` (above) sets purple `background: var(--accent)` and
 * `.btn:hover` sets `background: var(--accent-dim)`. Those rules sit AFTER the early
 * `.cl-btn--*` tone modifiers and share one-class specificity, so every
 * `btn cl-btn cl-btn--success|warning|?` button rendered purple.
 * Re-assert tones with `.btn.cl-btn--*` so colour modifiers always win.
 */
.btn.cl-btn--regular {
  background: var(--cl-colour-regular);
  color: #fff;
  border: 1px solid var(--cl-colour-accent);
}
.btn.cl-btn--regular:hover:not(:disabled),
.btn.cl-btn--regular:focus-visible:not(:disabled) {
  background: var(--cl-colour-regular);
  filter: brightness(1.06);
  box-shadow: none;
}

/* Image Intake accordion: source tones. Identity keeps regular purple. */
.cl-review-suggestions .btn.cl-btn--suggest-identity {
  background: var(--cl-colour-regular);
  border-color: var(--cl-colour-accent);
}
.cl-review-suggestions .btn.cl-btn--suggest-ximilar {
  background: color-mix(in srgb, var(--cl-colour-info) 78%, #16325c);
  border-color: color-mix(in srgb, var(--cl-colour-info) 65%, #1d4ed8);
  color: #fff;
}
.cl-review-suggestions .btn.cl-btn--suggest-ximilar:hover:not(:disabled),
.cl-review-suggestions .btn.cl-btn--suggest-ximilar:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--cl-colour-info) 78%, #16325c);
  filter: brightness(1.06);
}
.cl-review-suggestions .btn.cl-btn--suggest-database {
  background: var(--cl-colour-accent);
  border-color: color-mix(in srgb, var(--cl-colour-accent) 70%, #1a0630);
  color: #fff;
}
.cl-review-suggestions .btn.cl-btn--suggest-database:hover:not(:disabled),
.cl-review-suggestions .btn.cl-btn--suggest-database:focus-visible:not(:disabled) {
  background: var(--cl-colour-accent);
  filter: brightness(1.06);
}

.btn.cl-btn--inactive {
  background: var(--inactive-bg);
  color: var(--inactive-text);
  border: 1px solid var(--inactive-border);
}
.btn.cl-btn--inactive:hover:not(:disabled),
.btn.cl-btn--inactive:focus-visible:not(:disabled) {
  background: var(--inactive-bg);
  filter: brightness(0.97);
  box-shadow: none;
}

.btn.cl-btn--highlight,
.btn.cl-btn--accent {
  background: #ffa033;
  color: #5e17a2;
  border: 1px solid #b26400;
}
.btn.cl-btn--highlight:hover:not(:disabled),
.btn.cl-btn--highlight:focus-visible:not(:disabled),
.btn.cl-btn--accent:hover:not(:disabled),
.btn.cl-btn--accent:focus-visible:not(:disabled) {
  background: #ffa033;
  filter: brightness(1.05);
  box-shadow: none;
}

.btn.cl-btn--quiet {
  background: transparent;
  color: color-mix(in srgb, #fff 75%, var(--text-muted) 25%);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
}
.btn.cl-btn--quiet:hover:not(:disabled),
.btn.cl-btn--quiet:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-accent) 30%);
  box-shadow: none;
}

.btn.cl-btn--success {
  background: var(--success);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--success) 70%, #000 30%);
}
.btn.cl-btn--success:hover:not(:disabled),
.btn.cl-btn--success:focus-visible:not(:disabled) {
  background: var(--success);
  filter: brightness(1.06);
  box-shadow: none;
}

.btn.cl-btn--warning {
  background: var(--warning);
  color: #111827;
  border: 1px solid color-mix(in srgb, var(--warning) 65%, #000 35%);
}
.btn.cl-btn--warning:hover:not(:disabled),
.btn.cl-btn--warning:focus-visible:not(:disabled) {
  background: var(--warning);
  filter: brightness(1.05);
  box-shadow: none;
}

.btn.cl-btn--danger {
  background: var(--danger);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--danger) 70%, #000 30%);
}
.btn.cl-btn--danger:hover:not(:disabled),
.btn.cl-btn--danger:focus-visible:not(:disabled) {
  background: var(--danger);
  filter: brightness(1.06);
  box-shadow: none;
}

.btn.cl-btn--utility {
  background: var(--cl-colour-accent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 70%, #000 30%);
}
.btn.cl-btn--utility:hover:not(:disabled),
.btn.cl-btn--utility:focus-visible:not(:disabled) {
  background: var(--cl-colour-accent);
  filter: brightness(1.08);
  box-shadow: none;
}

.btn.cl-btn--purge-danger {
  background: #f3f4f6;
  color: #991b1b;
  border: 1px solid #dc2626;
}
.btn.cl-btn--purge-danger:hover:not(:disabled),
.btn.cl-btn--purge-danger:focus-visible:not(:disabled) {
  background: #f3f4f6;
  filter: brightness(0.96);
  box-shadow: none;
}

.btn-primary {
  /* Same as .btn for primary actions */
}
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-subtle);
}
.btn-secondary:hover {
  background: var(--bg-card);
  border-color: var(--accent);
}

/* ----- Internal page header ----- */
.page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.25rem;
}
.page-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

/* ----- Content panel (internal pages) ----- */

/* ----- Form panel ----- */

.form-group {
  margin-bottom: 1rem;
}
.form-group label,
.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

/* Phase 3G: Progress overlay for long-running actions */
.progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.progress-overlay-content {
  text-align: center;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  min-width: 16rem;
}
.progress-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: progress-spin 0.8s linear infinite;
}
@keyframes progress-spin {
  to { transform: rotate(360deg); }
}
.progress-status {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--text);
}
.progress-hint {
  margin: 0;
  font-size: 0.85rem;
}

/* Database Phase 1: searchable combobox */
.db-combobox-wrap {
  position: relative;
}
.db-combobox-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 12rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
}
.db-combobox-list li {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.db-combobox-list li:hover {
  background: rgba(139, 92, 246, 0.15);
}
.db-combobox-clear {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--accent);
  cursor: pointer;
}
.db-combobox-clear:hover {
  text-decoration: underline;
}

/* ----- Search page (Database): modern search layout ----- */
.search-page-form {
  margin-bottom: 1.5rem;
}
.search-page-bar {
  margin-bottom: 1.25rem;
}
.search-page-bar .search-bar-input {
  flex: 1;
  min-width: 0;
}

.search-filters-wrap {
  max-width: 560px;
  margin: 0 auto 1.5rem;
}
.search-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  row-gap: 0.75rem;
}
.search-filter-group {
  position: relative;
}
.search-filter-btn {
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  white-space: nowrap;
}
.search-filter-btn:hover {
  color: var(--text);
  border-color: var(--border-subtle);
  background: var(--bg-elevated);
}
.search-filter-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.12);
}
.search-filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  min-width: 12rem;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 200;
  display: none;
}
.search-filter-dropdown.open {
  display: block;
}
.search-filter-options {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}
.search-filter-options li,
.search-filter-option {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--text);
}
.search-filter-option-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  margin: 0;
}
.search-filter-option-label:hover {
  background: rgba(139, 92, 246, 0.15);
}
.search-filter-option:focus {
  outline: none;
}
.search-filter-option:focus .search-filter-option-label {
  background: rgba(139, 92, 246, 0.25);
  box-shadow: 0 0 0 2px var(--accent);
}
.search-filter-option-label:has(input:checked) {
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
}
.search-filter-options li:hover {
  background: rgba(139, 92, 246, 0.15);
}
.search-filter-cn-wrap {
  flex: 0 0 auto;
}
.search-filter-cn {
  width: 6rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text);
}
.search-filter-cn::placeholder {
  color: var(--text-muted);
}
.search-filter-cn:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.search-filter-select,
.search-filter-number {
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text);
}
.search-filter-select {
  min-width: 8.5rem;
}
.search-filter-stock-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.search-filter-number {
  width: 6.3rem;
}
.search-clear-filters {
  margin-left: auto;
  font-size: 0.85rem;
}
.search-results-section {
  margin-top: 1.5rem;
}

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

@media (max-width: 640px) {
  .search-filters-wrap {
    max-width: 100%;
  }
  .search-filter-cn {
    width: 5rem;
  }
  .search-clear-filters {
    margin-left: 0;
    width: 100%;
  }
}

/* ----- Status / messages ----- */
.status-pill {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}
.status-pill.ok {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success);
}
.status-pill.warn {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}
.status-pill.error {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error);
}
/* Evidence review confidence badges (Shopify approve) */
.status-pill.confidence-high { background: rgba(34, 197, 94, 0.2); color: var(--success, #16a34a); }
.status-pill.confidence-medium { background: rgba(59, 130, 246, 0.2); color: var(--color-link, #2563eb); }
.status-pill.confidence-low { background: rgba(245, 158, 11, 0.2); color: var(--warning, #d97706); }
.alert-warn,
.warn {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid var(--border-subtle);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 0.9rem;
}
.alert-warn ul,
.warn ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.5rem 0 0;
}
.muted {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

/* ----- Card (final pass product blocks) ----- */
.card-block {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.card-block .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.card-block .card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.card-block .inputs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card-block .inputs label {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.card-block .inputs input {
  width: 160px;
  padding: 0.5rem 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
}
.card-block .summary {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}
.card-block .variant-list {
  margin-top: 0.5rem;
  padding-left: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.card-block .variant-item {
  margin-bottom: 0.25rem;
}
.card-block .links {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.link-btn {
  display: inline-block;
  background: var(--accent-dim);
  color: #fff;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.85rem;
  transition: background var(--transition);
}
.link-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* ----- Section grid (controls row) ----- */
.section-grid,
.controls-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.controls-row .control {
  min-width: 200px;
  flex: 1;
}
.controls-row label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.controls-row input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text);
}

/* ----- Review / Final Checks (export flow) ----- */
.review-card {
  display: flex;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  padding: 1rem;
}
.review-card-left {
  width: 200px;
  flex-shrink: 0;
}
.review-card-left img {
  width: 90px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  margin-bottom: 0.5rem;
  display: block;
}
.review-preview-img {
  width: 90px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  margin-bottom: 0.25rem;
}
.btn-small {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.review-file-name {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.review-approve label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  display: block;
}
.review-card-right {
  flex: 1;
  min-width: 0;
  padding-left: 1rem;
}
.review-card-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.review-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.review-confidence {
  font-size: 0.85rem;
  color: var(--text-muted);
}
/* Phase 6.2A: identity-first review layout */
.review-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.review-identity-block {
  margin-bottom: 0.25rem;
}
.review-confidence-chip {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.review-confidence-label {
  font-weight: 500;
  margin-right: 0.25rem;
}
.review-identity-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem 1rem;
  margin: 0.5rem 0;
}
.review-identity-fields .review-field {
  margin-bottom: 0;
}
.review-alternatives-block {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.review-alternatives-block .review-field-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.25rem;
}
.review-alt-list {
  margin: 0.2rem 0 0;
  padding-left: 1.2rem;
  color: var(--text-muted);
}
.review-alt-list li {
  margin-bottom: 0.1rem;
}
.review-pricing-line {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.review-error-msg {
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
  color: var(--warning);
}
/* Phase 6.2B: failed scan entries ? visually distinct, not like low-confidence hits */
.review-card--failed {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.06);
}
.review-entry-failed-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--error);
  background: rgba(239, 68, 68, 0.15);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  margin-bottom: 0.35rem;
}
.review-confidence-chip--failed {
  color: var(--error);
}
.review-details-heading {
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
  font-weight: 500;
}
/* Session summary banners (partial / full failure) */
.review-session-banner {
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.review-session-banner--partial {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--text);
}
.review-session-banner--failed {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--text-muted);
}
.review-session-banner--db-ready {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--text);
}
.review-session-banner--db-incomplete {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--text-muted);
}
.review-db-new-note {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.9em;
}
/* 6.2C: inline DB match area per card */
.review-db-match-block {
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-subtle);
}
.review-db-match-block .review-field-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}
.review-db-match-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.review-db-match-badge--likely {
  background: rgba(34, 197, 94, 0.2);
  color: var(--text);
}
.review-db-match-badge--possible {
  background: rgba(245, 158, 11, 0.2);
  color: var(--text);
}
.review-db-match-badge--new_to_db {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}
.review-db-match-choices {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.review-db-choice {
  display: block;
  font-size: 0.9rem;
  cursor: pointer;
}
.review-db-choice--new {
  font-weight: 500;
}
.review-db-treatment-note {
  font-size: 0.85rem;
  margin: 0.25rem 0 0.5rem;
}
/* 6.3 commit preview */
.commit-preview-summary ul,
.commit-done-summary ul,
.commit-preview-counts {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}
/* 6.4 post-intake next actions */
.next-summary {
  margin-bottom: 1rem;
}
.next-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.next-action-card {
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.next-action-card--primary {
  border-color: rgba(139, 92, 246, 0.4);
  background: var(--bg-elevated);
}
.next-action-card--placeholder {
  opacity: 0.85;
}
.next-action-card--save {
  border-color: var(--border-subtle);
}
.next-action-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.next-action-desc {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}
.commit-preview-table th,
.commit-preview-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.commit-preview-row--link_existing { color: var(--text); }
.commit-preview-row--create_new { color: var(--text); }
.commit-preview-row--skip_new_to_db { color: var(--text-muted); }
.commit-preview-row--unresolved { color: var(--text-muted); }
.review-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.pricing-summary {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.review-summary-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.review-link {
  font-size: 0.85rem;
  color: var(--accent);
}
.review-price-input {
  width: 80px;
  padding: 0.35rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.9rem;
}
.edit-btn {
  background: var(--accent-dim);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background var(--transition);
}
.edit-btn:hover {
  background: var(--accent);
}
.review-card-details {
  display: none;
  margin-top: 0.5rem;
}
.review-field {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
}
.review-field label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.review-field input,
.review-field select,
.review-field textarea {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
}
.review-field textarea {
  min-height: 4em;
  resize: vertical;
}
.review-alt-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.review-muted {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin: 0;
}
.review-add-consignee {
  margin-top: 0.25rem;
}
.review-card .consignee-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.review-card .consignee-row input {
  padding: 0.35rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.9rem;
}
.review-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}
.review-export-settings {
  border: 1px solid var(--border-subtle);
}
.review-settings-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--text);
}
.review-reset-form {
  margin-top: 0.75rem;
}

/* ----- Scanner upload progress ----- */
.scanner-progress {
  margin-top: 1rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  height: 24px;
  width: 100%;
  overflow: hidden;
}
.scanner-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  background-size: 200% 100%;
  animation: scanner-progress-anim 2s linear infinite;
  transition: width 0.2s ease;
}
@keyframes scanner-progress-anim {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ----- Phase 6.2A: Scanner processing page ----- */
.scanner-processing-panel {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem 0;
}
.scanner-processing-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.scanner-processing-batch {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}
.scanner-progress-outer {
  margin-bottom: 1.5rem;
}
.scanner-progress-track {
  height: 10px;
  background: var(--bg-elevated);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.scanner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.scanner-progress-status {
  font-size: 0.9rem;
  margin: 0;
}
.scanner-ready-block {
  padding: 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.scanner-ready-text {
  margin: 0 0 1rem;
  color: var(--text);
}
.scanner-error-block {
  font-size: 0.9rem;
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius);
  color: var(--error);
}

/* ----- Phase 6.2A: Scanner upload zone ----- */
.scanner-upload-zone {
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--bg-card);
  transition: border-color var(--transition), background var(--transition);
}
.scanner-upload-zone:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
}
.scanner-upload-zone .form-label {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.scanner-upload-zone input[type="file"] {
  margin: 0.75rem auto 1rem;
  display: block;
  max-width: 100%;
}
.scanner-upload-zone .btn-start {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
.scanner-upload-zone .btn-start:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 16px var(--accent-glow);
}

/* ----- Export complete ----- */
.export-folder {
  color: var(--text-muted);
  font-size: 0.9rem;
  word-break: break-all;
}

/* ----- Update Core preview ----- */
.update-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  font-size: 0.9rem;
}
.update-meta-grid dt {
  color: var(--text-muted);
  margin: 0;
}
.update-meta-grid dd {
  margin: 0;
}
.update-column-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.update-column-chip {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--text);
}
.update-mapping-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: var(--text);
}
.update-mapping-list li {
  margin-bottom: 0.25rem;
}
.update-mapping-placeholder {
  border-style: dashed;
}
.update-mapping-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.update-mapping-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: center;
}
.update-mapping-row .form-label {
  margin-bottom: 0;
}
.update-mapping-select {
  max-width: 280px;
}
.update-mapping-row .update-combined-hint {
  grid-column: 1 / -1;
  font-size: 0.85em;
}
.update-add-field-placeholder {
  opacity: 0.85;
  font-style: italic;
  color: var(--muted, #888);
}

/* ----- Help / tooltip pattern (instructional text) ----- */
.help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: help;
  vertical-align: middle;
  margin-left: 0.25rem;
}
.help-trigger:focus {
  outline: none;
}
.help-trigger:focus-visible .help-icon {
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  transition: color var(--transition), border-color var(--transition);
}
.help-trigger:hover .help-icon {
  color: var(--accent);
  border-color: var(--accent);
}
.help-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(0.25rem);
  bottom: 100%;
  z-index: 200;
  min-width: 180px;
  max-width: 320px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  text-align: left;
}
.help-trigger:hover .help-tooltip,
.help-trigger:focus .help-tooltip,
.help-trigger:focus-within .help-tooltip {
  opacity: 1;
  visibility: visible;
}
/* Fallback: show below on small viewports if tooltip would go off top */
.help-tooltip.help-tooltip-below {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(0.25rem);
}
.help-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.help-heading .help-trigger {
  margin-left: 0;
}

/* ----- Stub page ----- */
.stub-content {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-muted);
  font-size: 1.1rem;
}


/* Intake Decider: third-party ID conflicts at commit */


/* Intake session: Decider as full-viewport modal (same shell as alt modal) */

/* Intake prepare: speed (testing) on its own row; Submit + Back compact (no equal-width stretch) */

/* Server flash toasts ? rendered in base.html #cl-footer-toast-region (non-reflowing) */
.app-flash-messages:not(.cl-toast-region) {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.app-flash {
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  border: 1px solid var(--border-subtle);
}
.app-flash--success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--text);
}
.app-flash--message {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

/* Modal work-area layout modifiers (migrated from legacy intake-alt-modal). */
.cl-modal-work-area--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 720px) {
  .cl-modal-work-area--split {
    grid-template-columns: 1fr;
  }
}
.cl-modal-work-area--stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
}
.cl-modal-split-img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}
.cl-choice-list-item {
  list-style: none;
}
.cl-choice-option--link {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
}

.cl-debug-unstick-modal {
  z-index: var(--cl-debug-unstick-z);
}

/* Dev document viewer / editor + cl-todo ? see also cl-tl-* Template Library styles above. */
.cl-doc-viewer-toolbar,
.cl-doc-editor > .cl-status-line {
  margin-bottom: 0.45rem;
}
.cl-doc-viewer-body,
.cl-doc-editor-body {
  width: 100%;
  min-height: 12rem;
  max-height: min(60vh, 32rem);
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--cl-colour-accent) 8%);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.65rem 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.cl-doc-editor-body {
  resize: vertical;
  min-height: 16rem;
}
.cl-doc-editor-dirty {
  margin-left: auto;
  margin-right: 0.35rem;
  color: color-mix(in srgb, var(--cl-colour-highlight) 70%, #fff 30%);
}
.cl-todo-toolbar { margin-bottom: 0.55rem; }
.cl-todo-filter-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.cl-todo-assignee-filter { min-width: 7rem; }
.cl-todo-list { display: flex; flex-direction: column; gap: 0.45rem; }
.cl-todo-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 0.45rem 0.55rem;
}
.cl-todo-row--complete { opacity: 0.62; }
.cl-todo-row--complete .cl-todo-title-input { text-decoration: line-through; }
.cl-todo-row--urgent { border-left: 3px solid var(--cl-colour-alt); }
.cl-todo-row--high { border-left: 3px solid var(--cl-colour-highlight); }
.cl-todo-row--medium { border-left: 3px solid var(--cl-colour-accent); }
.cl-todo-row--low { border-left: 3px solid var(--border-subtle); }
.cl-todo-columns {
  display: grid;
  grid-template-columns: auto 1fr minmax(6rem, 8rem) minmax(5.5rem, 7rem) auto;
  gap: 0.35rem;
  align-items: center;
}
.cl-todo-title-input,
.cl-todo-notes textarea,
.cl-todo-assignee select,
.cl-todo-urgency select {
  width: 100%;
  font: inherit;
}
.cl-todo-notes { margin-top: 0.35rem; }
.cl-todo-notes textarea {
  min-height: 2.4rem;
  resize: vertical;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  padding: 0.35rem 0.45rem;
}

.btn-small {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* ----- Reusable loading / progress modal ----- */
.cl-loading-modal-root {
  position: fixed;
  inset: 0;
  z-index: var(--cl-modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.cl-loading-modal-root.cl-loading-modal-root--visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.cl-loading-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
}
.cl-loading-modal-dialog {
  position: relative;
  z-index: 1;
  min-width: min(92vw, 320px);
  max-width: 420px;
  padding: 1.25rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.cl-toast--warning {
  border-color: rgba(255, 160, 51, 0.45);
  background: rgba(255, 160, 51, 0.12);
}
.cl-footer-toast-link {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}
.cl-footer-toast-link:hover {
  filter: brightness(1.08);
}
.cl-loading-modal-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.85rem;
  border: 3px solid rgba(139, 92, 246, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cl-loading-spin 0.85s linear infinite;
}
@keyframes cl-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
.cl-loading-modal-primary {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  min-height: 1.35em;
}
.cl-loading-modal-secondary {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.cl-loading-modal-root--workspace-commit .cl-loading-modal-dialog {
  max-width: min(92vw, 520px);
}
.cl-loading-modal-root--workspace-commit .cl-loading-modal-commit-result,
.cl-loading-modal-root--workspace-commit .cl-loading-modal-commit-decider {
  text-align: left;
}

/* ----- Responsive ----- */
@media (max-width: 640px) {
  /* Mobile app chrome uses cl-nav-shell hamburger (?768); do not stack the shell. */
  .navbar:not([data-cl-nav-shell]) {
    flex-direction: column;
    align-items: stretch;
  }
  .navbar:not([data-cl-nav-shell]) .navbar-nav {
    justify-content: center;
  }
  .search-bar:not(.cl-search-bar-block) {
    flex-direction: column;
  }
  .search-bar-form {
    flex-direction: column;
  }
  .browser-nav-row {
    flex-wrap: wrap;
  }
  .browser-results-scroll {
    max-height: none;
  }
  .hero {
    padding: 2rem 1rem 1.5rem;
  }
}


/* Database Explorer: catalogue index layout */
.db-explorer-page {
  max-width: 72rem;
  margin: 0 auto;
  min-height: 0;
}
.db-explorer-page-hero {
  margin-bottom: 0.7rem;
}
.db-explorer-page-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.db-explorer-layout {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}
.db-explorer-browse-card {
  padding: 0.75rem 1rem;
}
.db-explorer-browse-card__head {
  margin-bottom: 0.65rem;
}
.db-explorer-browse-card__title {
  margin: 0 0 0.2rem 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.db-explorer-browse-card__hint {
  margin: 0;
}
.db-explorer-browse-paused {
  margin: 0 0 0.75rem 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
  border-radius: 6px;
  border: 1px dashed var(--border-muted, #bbb);
  background: var(--bg-muted, #f4f4f4);
}
.db-explorer-search-form .search-page-bar {
  margin-bottom: 0.35rem;
  max-width: 100%;
}
.db-explorer-filters-label {
  display: none;
}
.db-explorer-search-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.db-explorer-search-fieldset--disabled {
  opacity: 0.52;
  filter: grayscale(0.15);
}
.db-explorer-search-container-group .search-bar-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.db-explorer-search-container-group .db-explorer-search-input-wrap {
  flex: 1 1 100%;
}
.db-explorer-search-container-group .search-filters-wrap {
  max-width: 100%;
  margin: 0;
}
.db-explorer-search-container-group .search-filters-row {
  width: 100%;
  justify-content: flex-start;
}
.db-explorer-search-container-group .search-page-bar .btn {
  flex: 0 0 auto;
}
.db-explorer-search-container-group .search-filter-group {
  flex: 0 1 auto;
}
.db-explorer-search-container-group .search-filter-cn-wrap {
  margin-left: 0;
}
.db-explorer-search-container-group .search-filter-on-shop-wrap,
.db-explorer-search-container-group .search-filter-stock-wrap {
  flex: 0 0 auto;
}
.db-explorer-root.cl-container-light-theme {
  display: flex;
  flex-direction: column;
}
.db-explorer-root .db-explorer-results-block {
  flex: 1 1 auto;
  min-height: 0;
}
.db-explorer-review-banner {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-muted, #c5cce8);
  background: linear-gradient(110deg, var(--bg-subtle, #eef2ff) 0%, var(--bg-muted, #f8f9fc) 100%);
  border-radius: 8px;
}
.db-explorer-review-banner__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.db-explorer-review-banner__title {
  margin: 0 0 0.15rem 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2a3145;
}
.db-explorer-review-banner__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #333847;
}
.db-explorer-review-banner__aside {
  display: block;
  margin-top: 0.35rem;
}
.db-explorer-review-banner__exit {
  flex-shrink: 0;
  white-space: nowrap;
}
.db-explorer-ops-card {
  padding: 0.7rem 0.8rem 0.8rem;
  background: #fafbfd;
  border: 1px solid var(--border-muted, #d5dae6);
  border-radius: 8px;
  min-height: 0;
}
.db-explorer-title-actions {
  margin-top: 0.25rem;
  gap: 0.45rem;
}
.db-explorer-title-actions .btn {
  text-decoration: none;
}
.db-explorer-ops-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-muted, #e2e2e2);
  margin-bottom: 0.75rem;
}
.db-explorer-ops-strip__title {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 600;
}
.db-explorer-ops-strip__count {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.db-explorer-selection-chrome {
  min-width: 0;
}
.db-explorer-selection-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}
.db-explorer-select-all-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.db-explorer-select-all-label {
  margin: 0;
  font-size: 0.82rem;
  color: #3d4a66;
  white-space: nowrap;
}
.db-explorer-select-all-input {
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}
.db-explorer-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.db-explorer-bulk-inline-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.db-explorer-th-select {
  text-align: center;
  vertical-align: middle;
  width: 2.5rem;
}
.db-explorer-th-select .db-explorer-select-all-input {
  margin: 0 auto;
  display: block;
}
.db-explorer-select-all-results-btn {
  white-space: nowrap;
}
.db-explorer-selection-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.16rem 0.4rem 0.16rem 0.5rem;
  border-radius: 999px;
  color: #0f1420;
  background: #e8eef9;
  border: 1px solid #9eb4db;
}
.db-explorer-selection-badge .db-explorer-select-all-results-btn {
  min-height: 1.55rem;
  padding: 0.08rem 0.42rem;
  line-height: 1;
}
.db-explorer-selection-badge__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 -0.15rem 0 0.1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  color: #3d4a66;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.db-explorer-selection-badge:hover .db-explorer-selection-badge__clear {
  opacity: 1;
}
.db-explorer-selection-badge__clear:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #0b1020;
}
.db-explorer-search-bar--suggest .db-explorer-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.db-explorer-suggest-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  border-radius: 6px;
  border: 1px solid #c5ccda;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 30, 55, 0.12);
}
.db-explorer-suggest-list__item {
  padding: 0.35rem 0.65rem;
  font-size: 0.88rem;
  color: #1a2130;
  cursor: pointer;
}
.db-explorer-suggest-list__item:hover {
  background: #eef2fb;
}
.db-explorer-add-modal .db-explorer-add-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.db-explorer-add-modal .cl-modal {
  max-width: 28rem;
}
.db-explorer-ops-strip__hint-inline {
  margin: 0;
  color: #3a4154;
}
.db-explorer-ops-strip__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
a.btn.db-explorer-bulk-needs-selection.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.db-explorer-results-block {
  margin-top: 0.1rem;
  min-height: 0;
  display: grid;
  gap: 0.35rem;
}
.db-explorer-compact-nav {
  margin-bottom: 0.15rem;
}
.db-explorer-compact-nav__btn {
  min-width: 2rem;
  min-height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.db-explorer-compact-nav__middle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}
.db-explorer-compact-nav__results-text {
  margin: 0;
  font-size: 0.8rem;
}
.db-explorer-compact-nav__mini-btn {
  min-height: 1.75rem;
  padding: 0.2rem 0.5rem;
}
.db-explorer-results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}
.db-explorer-results-toolbar__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.db-explorer-results-toolbar__range {
  margin: 0;
  flex: 1;
  min-width: 12rem;
  font-size: 0.88rem;
  color: #3d4456;
}
.db-explorer-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.db-explorer-pager--footer {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-muted, #e8e8e8);
}
.db-explorer-pager__btn--static {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
.db-explorer-table-wrap {
  border-radius: 8px;
  overflow: auto;
  border: 1px solid var(--border-muted, #d0d5e0);
  background: #fff;
  max-height: min(62vh, calc(100vh - var(--cl-navbar-height) - var(--cl-footer-bar-height) - 12.8rem));
}
.db-explorer-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: #fff;
}
.db-explorer-results-table tbody tr:nth-child(odd) {
  background: #ffffff;
}
.db-explorer-results-table tbody tr:nth-child(even) {
  background: #f3f5f9;
}
.db-explorer-results-table thead th {
  text-align: left;
  padding: 0.5rem 0.55rem;
  background: #e4e9f2;
  border-bottom: 1px solid var(--border-muted, #c5cdda);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2a3148;
  white-space: nowrap;
}
.db-explorer-sort-link {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.1rem 0.2rem;
}
.db-explorer-sort-link:hover {
  color: #0f1a44;
  background: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.db-explorer-sort-link.is-active {
  color: #0d1f66;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.db-explorer-th--set-name {
  min-width: 8rem;
}
.db-explorer-th--set-code {
  min-width: 3.25rem;
  text-align: left;
}
.db-explorer-th--treatment {
  min-width: 7rem;
}
.db-explorer-th--stamp {
  min-width: 5.5rem;
}
.db-explorer-th--edition {
  min-width: 5.5rem;
}
.db-explorer-results-toolbar__columns {
  margin: 0;
  flex: 1 1 100%;
  min-width: 0;
  font-size: 0.82rem;
}
.db-explorer-columns-toggle {
  font-weight: 600;
}
.db-explorer-columns-toggle__hint {
  font-weight: 400;
  opacity: 0.88;
}
.db-explorer-th--cn,
.db-explorer-th--qty {
  text-align: right;
}
.db-explorer-th--vendors {
  min-width: 5.5rem;
}
.db-explorer-th--meta {
  min-width: 8rem;
}
.db-explorer-resource-row {
  border-bottom: 1px solid var(--border-muted, #e4e7ee);
  transition: background 0.12s ease;
}
.db-explorer-resource-row:hover {
  background: #e4e9f4 !important;
}
.db-explorer-resource-row:has(.db-explorer-row-cb:checked) {
  background: rgba(70, 105, 200, 0.14) !important;
  box-shadow: inset 3px 0 0 rgba(45, 70, 150, 0.78);
}
.db-explorer-col-select {
  width: 2.5rem;
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem 0.35rem;
}
.db-explorer-td-name,
.db-explorer-td-set-name,
.db-explorer-td-set-code,
.db-explorer-td-cn,
.db-explorer-td-treatment,
.db-explorer-td-stamp,
.db-explorer-td-edition,
.db-explorer-td-qty,
.db-explorer-td-vendors,
.db-explorer-td-meta {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
  color: #1a2130;
}
.db-explorer-name-stack--lite .db-explorer-row-label {
  font-size: 0.93rem;
}
.db-explorer-td-cn,
.db-explorer-td-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.db-explorer-td-qty {
  font-weight: 600;
}
.db-explorer-td-treatment,
.db-explorer-td-stamp,
.db-explorer-td-edition {
  white-space: nowrap;
}
.db-explorer-name-with-thumb {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}
.db-explorer-name-stack {
  flex: 1;
  min-width: 0;
}
.db-explorer-row-thumb {
  flex-shrink: 0;
  width: 26px;
  align-self: flex-start;
  padding-top: 0.1rem;
}
.db-explorer-row-thumb__img {
  display: block;
  width: 26px;
  height: 37px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #b8c0d0;
  background: #e8ebf2;
}
.db-explorer-row-thumb__ph {
  width: 26px;
  height: 37px;
  border-radius: 4px;
  border: 1px dashed #b8c0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #7a8499;
  background: #eef1f7;
}
.db-explorer-row-label {
  cursor: pointer;
  font-weight: 600;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.25;
  color: #121722;
}
.db-explorer-row-tertiary {
  margin-top: 0.12rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: #4a5368;
}
.db-explorer-td-vendors {
  line-height: 1.35;
}
.db-explorer-vpill {
  display: inline-block;
  margin: 0.04rem 0.2rem 0.04rem 0;
  padding: 0.04rem 0.28rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  border-radius: 4px;
  background: #f4f6fb;
  color: #1e2433;
  border: 1px solid #c9d0e2;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.db-explorer-vpill--more {
  background: #eef1f7;
  color: #3d4558;
  border-style: solid;
  border-color: #b8c0d4;
  font-weight: 500;
}
.db-explorer-vpill-empty {
  font-size: 0.85rem;
}
.db-explorer-meta-line {
  display: inline-block;
  margin-top: 0.15rem;
}
.db-explorer-results-table .db-explorer-row-cb {
  margin: 0;
}
.db-explorer-empty-state {
  padding: 0.75rem 0 0.25rem;
}
.db-explorer-page-footer {
  margin-top: 1.25rem;
  padding-top: 0.5rem;
}
.db-card-back-catalogue .db-card-back-catalogue__chev {
  margin-right: 0.35rem;
  opacity: 0.85;
}
@media (max-width: 640px) {
  .db-explorer-results-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .db-explorer-pager {
    width: 100%;
  }
}


/* Card Browser V1 (customer-facing, grid-first) */
.browser-page {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
}
.browser-filters__form {
  display: grid;
  gap: 0.75rem;
}
.browser-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.browser-filters__row--search .search-bar-input {
  min-width: 16rem;
  flex: 1 1 16rem;
}
.browser-filter-group {
  display: grid;
  gap: 0.35rem;
}
.browser-filter-group label {
  font-size: 0.82rem;
  color: var(--text-secondary, #9ca3af);
}
.browser-filter-group .form-select,
.browser-filter-group .form-input {
  min-width: 10.5rem;
}
.browser-filter-group--cn .form-input {
  min-width: 8rem;
}
.browser-results__head {
  margin-bottom: 0.5rem;
}
.browser-nav-row {
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}
.browser-nav-row__btn {
  min-width: 2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  padding: 0.2rem 0.5rem;
}
.browser-nav-row__text {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  text-align: center;
  flex: 1 1 auto;
}
.browser-results-scroll {
  max-height: min(62vh, calc(100vh - var(--cl-navbar-height) - var(--cl-footer-bar-height) - 14.5rem));
  overflow: auto;
}
.browser-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.browser-card {
  display: block;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border-muted, #374151);
  border-radius: 10px;
  overflow: hidden;
}
.browser-card__link {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;
}
.browser-card__link:hover {
  background: rgba(255, 255, 255, 0.02);
}
.browser-card__link:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: -2px;
}
.browser-card__image-wrap {
  aspect-ratio: auto;
  height: 100%;
  background: #111827;
  display: block;
}
.browser-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.browser-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-secondary, #9ca3af);
  font-size: 0.82rem;
}
.browser-card__body {
  height: 100%;
  padding: 0.6rem;
  display: grid;
  align-content: center;
  gap: 0.26rem;
  text-align: center;
  background: #1b2231;
}
.browser-card__title {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.2;
}
.browser-card__meta,
.browser-card__set {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-secondary, #9ca3af);
}
.browser-card__chipline {
  margin: 0.25rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.browser-card__chip {
  display: inline-block;
  border: 1px solid var(--border-muted, #374151);
  border-radius: 999px;
  padding: 0.13rem 0.45rem;
  font-size: 0.64rem;
}
.thumbnail-card-detailed--flip .browser-card__link:hover .cl-flip-card__inner,
.thumbnail-card-detailed--flip .browser-card__link:focus-visible .cl-flip-card__inner,
.thumbnail-card-detailed--flip .browser-card__link:focus-within .cl-flip-card__inner,
.thumbnail-card-detailed--flip .browser-card__link.is-flipped .cl-flip-card__inner {
  transform: rotateY(180deg);
}

@media (min-width: 961px) {
  .browser-page {
    max-height: calc(100vh - var(--cl-navbar-height) - var(--cl-main-padding-block) - var(--cl-footer-bar-height));
    overflow: hidden;
  }
  .browser-results {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .browser-results-scroll.thumbnail-browser-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  .db-explorer-page--template {
    max-height: calc(100vh - var(--cl-navbar-height) - var(--cl-main-padding-block) - var(--cl-footer-bar-height));
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .db-explorer-page--template .db-explorer-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .db-explorer-page--template .db-explorer-root {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .db-explorer-page--template .db-explorer-table-wrap {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .browser-page,
  .db-explorer-page--template {
    max-height: none;
    overflow: visible;
  }
}
.browser-card__chip--muted {
  opacity: 0.85;
}
.browser-pager {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.browser-pager__static {
  opacity: 0.6;
  cursor: default;
}

/* Database Explorer selected-only spreadsheet shell (V1) */
.db-explorer-layout--selected-shell {
  grid-template-columns: 1fr;
}
.db-selected-shell {
  display: grid;
  gap: 0.9rem;
}
/* Selected Review: inner table area scrolls; flex + min-height:0 so the grid does not force body scroll. */
.db-explorer-page--template .db-explorer-root .db-selected-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.9rem;
}
.db-explorer-page--template .db-explorer-root .db-selected-shell__table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(70vh, calc(100vh - var(--cl-navbar-height) - var(--cl-main-padding-block) - var(--cl-footer-bar-height) - 10.5rem));
}
.db-selected-shell__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}
.db-selected-shell__title {
  margin: 0;
  font-size: 1.1rem;
}
.db-selected-shell__meta {
  margin: 0.25rem 0 0 0;
}
.db-selected-shell__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.db-selected-shell__table-wrap {
  overflow: auto;
  border: 1px solid var(--border-muted, #374151);
  border-radius: 8px;
  background: #ffffff;
}
.db-selected-shell__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 920px;
}
.db-selected-shell__table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: left;
  font-size: 0.8rem;
  color: #334155;
  letter-spacing: 0.02em;
  background: #eef2f7;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid #d8e1ea;
}
.db-selected-shell__table tbody td {
  padding: 0.62rem 0.6rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
  background: #ffffff;
  color: #0f172a;
}
.db-selected-shell__table tbody tr:nth-child(even) td {
  background: #f8fafc;
}
.db-selected-shell__image-cell {
  display: grid;
  grid-template-columns: 40px minmax(180px, 1fr);
  gap: 0.45rem;
  align-items: center;
}
.db-selected-shell__image-cell img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-muted, #374151);
  background: #fff;
}
.db-selected-shell__image-ph {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px dashed var(--border-muted, #374151);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #9ca3af);
}
.db-selected-shell__edit-input--image {
  min-width: 280px;
}
.db-selected-shell__image-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-selected-shell__table tbody tr:last-child td {
  border-bottom: none;
}
.db-selected-shell__table th:first-child,
.db-selected-shell__table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f1f5f9;
  min-width: 260px;
}
.db-selected-shell__table tbody tr:nth-child(even) td:first-child {
  background: #edf2f7;
}
.db-selected-shell__table thead th:first-child {
  z-index: 4;
  background: #e2e8f0;
}
.db-selected-shell__cell-name {
  font-weight: 600;
}
.db-selected-shell__edit-input {
  width: 100%;
  min-width: 120px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  padding: 0.3rem 0.45rem;
}
.db-selected-shell__edit-input:focus {
  outline: none;
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.16);
}
.db-selected-shell__save-summary {
  margin: 0.6rem 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}
.db-selected-shell__save-live {
  margin: 0.35rem 0 0;
  min-height: 1.2rem;
}
.db-selected-shell__save-fail-list {
  margin: 0.35rem 0 0 1.1rem;
  padding: 0;
}
.db-selected-decider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.db-selected-decider-grid h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
}
.db-selected-decider-grid p {
  margin: 0;
  font-size: 0.88rem;
}
.db-selected-modal[hidden] {
  display: none;
}
.db-selected-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  /* Reset .cl-container-light-theme (#111827) inheritance: modal dialogs use dark surfaces */
  color: var(--text);
}
.db-selected-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.db-selected-modal__dialog {
  position: relative;
  max-width: 680px;
  width: min(92vw, 680px);
  margin: 6vh auto;
  max-height: 86vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.db-selected-modal__dialog--image {
  max-width: 980px;
  width: min(94vw, 980px);
}
.db-selected-modal__body--image {
  display: grid;
  place-items: center;
  min-height: 18rem;
}
.db-selected-modal__body--image img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
}
.db-selected-modal__header,
.db-selected-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.db-selected-modal__body {
  overflow: auto;
  padding: 0.35rem 0;
}
.db-selected-modal__body.is-loading {
  opacity: 0.65;
  pointer-events: none;
}
.db-selected-modal__options {
  display: grid;
  gap: 0.35rem;
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--border-muted, #374151);
  border-radius: 8px;
  padding: 0.55rem;
}
.db-selected-modal__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.2rem 0.1rem;
}
.db-selected-modal__option--locked {
  font-weight: 600;
}
.db-selected-modal__actions {
  display: flex;
  gap: 0.45rem;
}
.db-selected-modal__actions--stack {
  flex-direction: column;
  align-items: stretch;
}
.db-selected-modal--nested {
  z-index: 1410;
}
.db-selected-modal__status {
  margin: 0;
}
.db-cons-row {
  display: grid;
  grid-template-columns: 90px minmax(130px, 1fr) minmax(100px, 140px);
  gap: 0.45rem;
  margin: 0.4rem 0;
  align-items: center;
}
.db-cons-row--stock {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) 1.1rem minmax(72px, 5.5rem);
  gap: 0.35rem 0.25rem;
  margin: 0.35rem 0;
  align-items: center;
}
.db-cons-row--stock .db-cons-stock-code,
.db-cons-row--stock .db-cons-stock-code-new {
  font-family: ui-monospace, monospace;
  font-size: 0.92rem;
}
.db-cons-row--stock-add {
  display: block;
  margin: 0.5rem 0 0.25rem;
}
.db-cons-row--override {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) 1rem auto 1rem minmax(88px, 1fr);
  gap: 0.35rem 0.25rem;
  margin: 0.35rem 0;
  align-items: center;
}
.db-cons-colon {
  display: inline-block;
  width: 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--text-muted, #666);
}
.db-cons-code-plain {
  font-family: ui-monospace, monospace;
  font-size: 0.92rem;
}
.db-cons-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  margin: 0;
}

/* Selected review ? manual merge review V1 */
.db-mm-shell__intro {
  margin: 0.25rem 0 0;
  max-width: 52rem;
}
.db-mm-shell__live {
  margin: 0.35rem 0 0;
  min-height: 1.2rem;
}
.db-mm-shell__summary-list {
  margin: 0.35rem 0 0 1.1rem;
  padding: 0;
  font-size: 0.88rem;
}
.db-mm-cards {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}
.db-mm-previews--twocol {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .db-mm-previews--twocol {
    grid-template-columns: 1fr;
  }
}
.db-mm-fields--twocol {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.75rem;
}
@media (max-width: 900px) {
  .db-mm-fields--twocol {
    grid-template-columns: 1fr;
  }
}
.db-mm-keep-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}
.db-mm-controls__ignore {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
}
.db-mm-delete-both-warn {
  border-left: 3px solid #d97706;
  padding: 0.35rem 0 0.35rem 0.65rem;
  margin: 0.35rem 0 0;
}
.db-mm-barcode-label code {
  font-size: 0.85rem;
}
.db-mm-card {
  padding: 0.85rem 1rem;
  border: 1px solid #dbe4ee;
  background: #f8fafc;
}
.db-mm-card__head {
  margin-bottom: 0.5rem;
}
.db-mm-card__title {
  margin: 0;
  font-size: 1.05rem;
}
.db-mm-card__warn {
  margin: 0.35rem 0 0;
}
.db-mm-choose {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0.75rem;
}
.db-mm-choose__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  cursor: pointer;
}
.db-mm-previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 720px) {
  .db-mm-previews {
    grid-template-columns: 1fr;
  }
}
.db-mm-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
}
.db-mm-dl dt {
  margin: 0;
  color: #475569;
}
.db-mm-dl dd {
  margin: 0;
}
.db-mm-fields__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.45rem 0.65rem;
  margin-top: 0.35rem;
}
.db-mm-field {
  display: grid;
  gap: 0.15rem;
  font-size: 0.85rem;
}
.db-mm-field__label {
  color: #475569;
}
.db-selected-shell__mm-banner {
  margin: 0.35rem 0 0;
}
.db-mm-stock-warn {
  color: var(--warning, #fbbf24);
}

/* Browser card detail V1 (customer-facing) */
.browse-card-page {
  display: grid;
  gap: 1rem;
}
.browse-card-hero {
  display: grid;
  gap: 0.45rem;
}
.browse-card-hero__eyebrow {
  margin: 0;
  font-size: 0.85rem;
}
.browse-card-hero__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
}
.browse-card-hero__meta {
  margin: 0;
  color: var(--text-secondary, #9ca3af);
}
.browse-card-hero__chips {
  margin: 0.2rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.browse-chip {
  border: 1px solid var(--border-muted, #374151);
  border-radius: 999px;
  padding: 0.14rem 0.48rem;
  font-size: 0.76rem;
}
.browse-chip--muted {
  opacity: 0.85;
}
.browse-card-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(220px, 340px) 1fr;
}
.browse-card-panel {
  margin: 0;
}
.browse-card-main-image {
  width: 100%;
  max-width: 320px;
  border-radius: 8px;
  border: 1px solid var(--border-muted, #374151);
  display: block;
}
.browse-card-main-image--placeholder {
  min-height: 300px;
  display: grid;
  place-items: center;
  color: var(--text-secondary, #9ca3af);
  background: rgba(255, 255, 255, 0.02);
}
.browse-card-linkline {
  margin: 0.5rem 0 0 0;
}
.browse-card-kv {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.8rem;
}
.browse-card-kv dt {
  color: var(--text-secondary, #9ca3af);
}
.browse-card-kv dd {
  margin: 0;
}
.browse-card-copy {
  margin: 0.45rem 0;
  white-space: pre-wrap;
}
.browse-card-copy--flavour {
  font-style: italic;
}
.browse-card-price {
  margin: 0;
}
.browse-card-price-list {
  margin: 0.55rem 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}
.browse-card-backline {
  margin: 0.25rem 0 0 0;
}
@media (max-width: 860px) {
  .browse-card-layout {
    grid-template-columns: 1fr;
  }
}

.cl-app-status-modal__dialog {
  width: min(1100px, 92vw);
  max-width: 1100px;
}

.cl-app-status-modal__actions {
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}


.cl-checkbox-stack {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.75rem;
}

.cl-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.92rem;
  cursor: pointer;
}

.cl-checkbox-row input[type="checkbox"] {
  margin: 0;
}


@media (max-width: 760px) {
  .cl-main-container {
    width: 94%;
  }
}


/* Dedicated /login ? Google-only public UI (password POST kept for tests/bootstrap) */
.cl-login-page {
  position: relative;
}

.cl-login-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  min-height: min(72vh, 40rem);
  padding: 2rem 0 2.5rem;
}

.cl-login-toast-region {
  width: min(100%, 26rem);
  margin: 0 auto;
}

.cl-login-card {
  width: 100%;
  max-width: 26rem;
  padding: 1.65rem 1.45rem 1.5rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cl-colour-regular) 14%, transparent), transparent 58%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-elevated) 96%, #000 4%),
      color-mix(in srgb, var(--bg-card) 90%, #000 10%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
    0 16px 36px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-login-card.cl-login-card--ready {
  opacity: 1;
  transform: translateY(0);
}

.cl-login-logo-wrap {
  text-align: center;
  margin-bottom: 1.1rem;
}

.cl-login-logo {
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cl-colour-regular) 28%, transparent));
}

.cl-login-header {
  text-align: center;
  margin-bottom: 0.35rem;
}

.cl-login-header .cl-title-row {
  justify-content: center;
  text-align: center;
}

.cl-login-header .cl-page-title {
  width: 100%;
  text-align: center;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}

.cl-login-header .cl-page-subtitle {
  margin: 0.45rem auto 0;
  max-width: 22rem;
  color: color-mix(in srgb, #fff 62%, var(--text-muted) 38%);
  line-height: 1.45;
}

.cl-login-form-panel {
  margin-top: 1.1rem;
}

.cl-login-actions {
  margin-top: 0.35rem;
}

.cl-login-actions--google {
  display: flex;
  justify-content: center;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
}

.cl-login-actions--google .cl-btn--google {
  position: relative;
  min-width: min(100%, 16.5rem);
  min-height: 2.75rem;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cl-colour-active) 55%, var(--cl-colour-regular) 45%),
      color-mix(in srgb, var(--cl-colour-regular) 70%, #000 30%)
    );
  border-color: color-mix(in srgb, var(--cl-colour-active) 40%, var(--border-subtle));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cl-colour-regular) 18%, transparent),
    0 8px 22px color-mix(in srgb, var(--cl-colour-regular) 16%, transparent);
  transition: transform 160ms ease, box-shadow 180ms ease, opacity 160ms ease;
}

.cl-login-actions--google .cl-btn--google:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cl-colour-active) 28%, transparent),
    0 10px 26px color-mix(in srgb, var(--cl-colour-regular) 22%, transparent);
}

.cl-login-google__idle,
.cl-login-google__busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.cl-login-google__busy[hidden],
.cl-login-google__idle[hidden] {
  display: none !important;
}

.cl-login-actions--google .cl-btn--google.cl-login-google--busy {
  pointer-events: none;
  cursor: progress;
  opacity: 0.92;
}

.cl-login-trust {
  margin: 0.95rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.4;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.cl-login-unavailable {
  margin: 0.5rem 0 0;
  text-align: center;
  line-height: 1.45;
}

.cl-login-back {
  margin: 1.35rem 0 0;
  text-align: center;
  font-size: 0.92rem;
}

.cl-login-back .cl-link {
  color: color-mix(in srgb, var(--cl-colour-active) 55%, #fff 45%);
}

.cl-login-page--busy .cl-login-back {
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cl-login-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cl-login-actions--google .cl-btn--google:hover {
    transform: none;
  }
}

.cl-home-direct-login {
  display: none;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.cl-home-direct-login.is-open,
.cl-home-direct-login:target {
  display: block;
}

noscript .cl-home-direct-login {
  display: block;
}

/* Web Edition P0 homepage shell */
.cl-home-login-panel {
  max-width: 28rem;
  margin: 0 auto 1.5rem;
}

.cl-home-login-form-panel .form-label {
  display: block;
  margin-top: 0.75rem;
}

.cl-home-login-form-panel .form-control {
  width: 100%;
  margin-top: 0.25rem;
}

.cl-landing-logout-form {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
}

/* -----------------------------------------------------------------------
   Frame grid ? reusable multi-column layout of cl-container-frame blocks.
   Used first by the Variant Detail Overview tab (three even columns that
   fill the available tab work-area height). Page-agnostic.
   ----------------------------------------------------------------------- */
.cl-frame-grid {
  display: grid;
  gap: var(--cl-rail-gap, 0.75rem);
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

.cl-frame-grid--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cl-frame-grid--halves {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* One row that consumes the grid's height so half-columns stretch. */
  grid-template-rows: minmax(0, 1fr);
}

.cl-frame-grid--compact {
  gap: 0.5rem;
  height: auto;
}

/* Frames inside the grid manage their own internal scroll. */
.cl-frame-grid > .cl-container-frame {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cl-colour-regular) 55%, transparent) transparent;
}

/* Scrollable body under a frame subtitle — fills leftover column height. */
.cl-container-frame > .cl-frame-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* A frame that should fill the whole tab work area (e.g. Set tab table frame). */
.cl-container-frame--fill {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

@media (max-width: 900px) {
  .cl-frame-grid--thirds,
  .cl-frame-grid--halves {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stack action/setup above story/summary on narrow viewports. */
  .cl-frame-grid--action-first-mobile > .cl-frame-grid__cell--action {
    order: -1;
  }
}

/* Generic multi-step guide panel (fade between steps inside one surface). */
.cl-guide {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.cl-guide__progress {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 0.55rem;
}
.cl-guide__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
  opacity: 0.55;
  transition: width 180ms ease, opacity 180ms ease, background-color 180ms ease;
}
.cl-guide__dot.is-done {
  opacity: 0.85;
  background: color-mix(in srgb, var(--cl-colour-regular) 70%, var(--text-muted));
}
.cl-guide__dot.is-current {
  width: 1.15rem;
  opacity: 1;
  background: var(--cl-colour-active, var(--cl-colour-regular));
}
.cl-guide__stage {
  position: relative;
  min-width: 0;
}
.cl-guide__step {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 220ms ease;
}
.cl-guide__step[hidden] {
  display: none !important;
}
.cl-guide__step.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}
.cl-guide__step.is-entering {
  opacity: 0;
  transform: translateY(10px);
}
.cl-guide__step.is-active:not(.is-entering) {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cl-guide__dot,
  .cl-guide__step {
    transition: none;
  }
  .cl-guide__step.is-leaving,
  .cl-guide__step.is-entering {
    transform: none;
  }
}

/* Shopify Settings gates (/maintenance) */
.cl-shopify-gates-column__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.cl-shopify-gate-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cl-shopify-gate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cl-shopify-gate-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
}

.cl-shopify-gate-label__text {
  line-height: 1.35;
}

.cl-shopify-gates-column__actions {
  margin-top: 0.25rem;
}

.cl-shopify-gates-review-item-actions {
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* -----------------------------------------------------------------------
   Variant Detail page
   ----------------------------------------------------------------------- */
.cl-variant-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------
   cl-tab-spine — underline text tabs + shared panel row (Variant first)
   ----------------------------------------------------------------------- */
.cl-main-container.cl-page-shell-viewport--tabbed > .cl-tab-spine {
  flex: 1 1 auto;
  min-height: 0;
}

.cl-tab-spine {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  gap: var(--cl-rail-gap, 0.75rem);
}

.cl-tab-spine-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.cl-tab-spine-tab {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.4rem 0.55rem 0.55rem;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.cl-tab-spine-tab:hover,
.cl-tab-spine-tab:focus-visible {
  color: var(--text);
}

.cl-tab-spine-tab.is-active {
  color: var(--text);
}

.cl-tab-spine-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.15rem;
  height: 2px;
  transform: translateX(-50%);
  background: var(--cl-colour-highlight, var(--highlight));
  border-radius: 999px;
}

.cl-tab-spine-row {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--cl-rail-gap, 0.75rem);
  align-items: stretch;
}

.cl-tab-spine-tile {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cl-tab-spine-tile--grow {
  flex: 2 1 0;
}

.cl-tab-spine-tile[hidden] {
  display: none !important;
}

.cl-tab-spine-tile > .cl-container-frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.cl-tab-spine-group {
  display: flex;
  flex-direction: column;
  gap: var(--cl-rail-gap, 0.75rem);
  min-height: 0;
}

.cl-tab-spine-group > .cl-container-frame {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.cl-tab-spine-tile--enter {
  animation: cl-tab-spine-enter 0.28s ease both;
  animation-delay: var(--cl-spine-stagger, 0ms);
}

.cl-tab-spine-tile--leave {
  animation: cl-tab-spine-leave 0.18s ease both;
  animation-delay: var(--cl-spine-stagger, 0ms);
}

@keyframes cl-tab-spine-enter {
  from {
    opacity: 0;
    transform: translateX(0.85rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cl-tab-spine-leave {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-0.45rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-tab-spine-tile--enter,
  .cl-tab-spine-tile--leave {
    animation: none;
  }
}

.cl-tab-spine {
  --cl-spine-peek: 1.15rem;
}

.cl-tab-spine-jumper {
  display: none;
  flex: 0 0 auto;
  align-items: stretch;
  width: 100%;
  gap: 0;
}

.cl-tab-spine-jumper-btn {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.15rem 0.4rem 0.35rem;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.cl-tab-spine-jumper-btn:hover,
.cl-tab-spine-jumper-btn:focus-visible {
  color: var(--text);
}

.cl-tab-spine-jumper-btn.is-active {
  color: var(--text);
}

.cl-tab-spine-jumper-btn.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1.35rem;
  height: 2px;
  transform: translateX(-50%);
  background: var(--cl-colour-highlight, var(--highlight));
  border-radius: 999px;
}

.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-bar {
  display: none;
}

.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-jumper:not([hidden]) {
  display: flex;
}

.cl-tab-spine.is-cl-spine-deck .cl-tab-work-area,
.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-row {
  min-height: 0;
}

.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-row {
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--cl-spine-peek);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-row::-webkit-scrollbar {
  display: none;
}

.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-tile,
.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-tile--grow {
  flex: 0 0 calc(100% - (var(--cl-spine-peek) * 2));
  width: calc(100% - (var(--cl-spine-peek) * 2));
  max-width: calc(100% - (var(--cl-spine-peek) * 2));
  min-width: calc(100% - (var(--cl-spine-peek) * 2));
  min-height: 0;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-tile > .cl-container-frame,
.cl-tab-spine.is-cl-spine-deck .cl-tab-spine-group > .cl-container-frame {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

.cl-tab-spine.is-cl-spine-row .cl-tab-spine-jumper {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cl-tab-spine.is-cl-spine-deck .cl-tab-spine-row {
    scroll-behavior: auto;
  }
}

/* Identity spine tile — name + chips + most-useful mark, then images */
.cl-spine-tile-identity {
  gap: 0.65rem;
}

.cl-spine-identity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.cl-spine-identity-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: break-word;
}

.cl-spine-identity-mark {
  position: relative;
  flex: 0 0 4.6rem;
  width: 4.6rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
}

.cl-spine-identity-mark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.cl-spine-identity-mark--invert .cl-spine-identity-mark-img {
  filter: brightness(0) invert(1);
}

.cl-spine-identity-mark--plate .cl-spine-identity-mark-img {
  background: #f3eee4;
  border-radius: 0.45rem;
  padding: 0.2rem 0.25rem;
}

.cl-spine-identity-mark--game .cl-spine-identity-mark-img {
  opacity: 0.7;
  filter: grayscale(1) brightness(2.4);
}

.cl-spine-identity-mark-name {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.cl-spine-identity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cl-spine-identity-chip {
  font-size: 0.68rem;
  padding: 0.12rem 0.45rem;
}

/* Details spine tile — quieter card name + checkout (variant page only) */
.cl-spine-tile-details .cl-spine-details-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.3;
  color: color-mix(in srgb, var(--text) 78%, var(--text-muted));
  overflow-wrap: break-word;
}

.cl-spine-details-printed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cl-spine-details-printed-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.25;
}

.cl-spine-details-checkout {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 22%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 88%, #000 12%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 28%, transparent), 0 8px 18px rgba(0, 0, 0, 0.22);
}

.cl-spine-details-checkout-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cl-spine-details-checkout-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.cl-spine-details-shopify-view {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.82;
}

.cl-spine-details-shopify-view:hover,
.cl-spine-details-shopify-view:focus-visible {
  color: var(--text);
  opacity: 1;
}

.cl-spine-details-shopify-view .fa-shopify {
  font-size: 0.95rem;
}

.cl-spine-details-notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.cl-spine-details-notify:hover:not(:disabled),
.cl-spine-details-notify:focus-visible:not(:disabled) {
  color: var(--text);
  background: color-mix(in srgb, var(--cl-colour-accent) 16%, transparent);
}

.cl-spine-details-notify.is-requested,
.cl-spine-details-notify:disabled {
  color: var(--cl-colour-accent);
  cursor: default;
}

.cl-spine-details-checkout-actions {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  min-width: 0;
}

.cl-spine-details-qty {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 2.55rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 90%, var(--bg-elevated));
  color: #1a1a1a;
}

.cl-spine-details-qty-btn {
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.cl-spine-details-qty-value {
  min-width: 1.15rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
}

.cl-spine-details-atc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-height: 2.55rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: #8b5cf6;
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.cl-spine-details-atc:hover:not(:disabled),
.cl-spine-details-atc:focus-visible:not(:disabled) {
  filter: brightness(1.06);
  color: #fff;
}

.cl-spine-details-atc:disabled,
.cl-spine-details-atc--oos {
  background: color-mix(in srgb, #8b5cf6 42%, #4b4b4b);
  color: color-mix(in srgb, #fff 78%, transparent);
  cursor: not-allowed;
  filter: none;
}

/* Market spine tile — range bar, source chips, history placeholder */
.cl-spine-tile-market {
  gap: 0.75rem;
}

.cl-spine-market {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.cl-spine-market-story {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cl-spine-market-store {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text);
}

.cl-spine-market-intro,
.cl-spine-market-deal {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.cl-spine-market-deal[data-cl-market-deal="under"] {
  color: color-mix(in srgb, #86efac 72%, var(--text));
}

.cl-spine-market-range-text {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.cl-spine-market-chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cl-spine-market-chips-label {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cl-spine-market-bar {
  position: relative;
  height: 1.35rem;
}

.cl-spine-market-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.18rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 42%, var(--border-subtle));
}

.cl-spine-market-window {
  position: absolute;
  top: 50%;
  height: 0.55rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cl-colour-accent) 62%, transparent);
}

.cl-spine-market-mark {
  position: absolute;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 0.16rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--text);
}

.cl-spine-market-source-mark {
  position: absolute;
  top: 0.05rem;
  bottom: 0.05rem;
  width: 0.16rem;
  transform: translateX(-50%);
  border-radius: 999px;
}

.cl-spine-market-source-mark[data-cl-market-source-mark="larrikin"] { background: #7dd3fc; }
.cl-spine-market-source-mark[data-cl-market-source-mark="pricecharting"] { background: #fbbf24; }
.cl-spine-market-source-mark[data-cl-market-source-mark="scryfall"] { background: #c4b5fd; }
.cl-spine-market-source-mark[data-cl-market-source-mark="ximilar"] { background: #86efac; }

.cl-spine-market-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cl-spine-market-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
}

.cl-spine-market-chip.is-active[data-cl-market-chip="larrikin"],
.cl-spine-market-chip[data-cl-market-chip="larrikin"]:hover {
  color: #7dd3fc;
  border-color: color-mix(in srgb, #7dd3fc 45%, transparent);
}

.cl-spine-market-chip.is-active[data-cl-market-chip="pricecharting"],
.cl-spine-market-chip[data-cl-market-chip="pricecharting"]:hover {
  color: #fbbf24;
  border-color: color-mix(in srgb, #fbbf24 45%, transparent);
}

.cl-spine-market-chip.is-active[data-cl-market-chip="scryfall"],
.cl-spine-market-chip[data-cl-market-chip="scryfall"]:hover {
  color: #c4b5fd;
  border-color: color-mix(in srgb, #c4b5fd 45%, transparent);
}

.cl-spine-market-chip.is-active[data-cl-market-chip="ximilar"],
.cl-spine-market-chip[data-cl-market-chip="ximilar"]:hover {
  color: #86efac;
  border-color: color-mix(in srgb, #86efac 45%, transparent);
}

.cl-spine-market-history {
  position: relative;
  min-height: 6.4rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-elevated) 88%, #000 12%);
}

.cl-spine-market-history-grid {
  position: absolute;
  inset: 0.7rem 0.75rem 1.1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 28%, transparent);
}

.cl-spine-market-history-grid span {
  border-left: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
}

.cl-spine-market-history-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: color-mix(in srgb, var(--bg-elevated) 42%, transparent);
  color: var(--text-muted);
  font-size: 0.82rem;
}

.cl-spine-market-history-overlay p {
  margin: 0;
}

.cl-spine-market-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.7rem;
}

.cl-spine-market-fact {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.cl-spine-market-fact-label {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.cl-spine-market-fact-value {
  font-size: 0.86rem;
  color: var(--text);
}

.cl-spine-market-related {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.cl-spine-market-related-title {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cl-spine-market-related-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.cl-spine-market-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  min-width: 0;
}

.cl-spine-market-related-range {
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

[data-cl-market-compact] .cl-spine-market-history,
[data-cl-market-compact] .cl-spine-market-related {
  display: none;
}

[data-cl-market-compact] .cl-spine-market-store {
  font-size: 1rem;
}

[data-cl-market-compact] .cl-spine-market-intro,
[data-cl-market-compact] .cl-spine-market-deal {
  font-size: 0.8rem;
}

[data-cl-market-compact] .cl-spine-market-range-text {
  display: none;
}

[data-cl-market-compact] .cl-spine-market-fact:not([data-cl-market-fact="confidence"]):not([data-cl-market-fact="calculated"]) {
  display: none;
}

/* About Card catalogue spine — 3-wide Results host + Tile/List switcher */
.cl-spine-tile-catalogue {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}

.cl-spine-catalogue-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.cl-spine-catalogue-grid.cl-browser-grid {
  /* Same dense scale as Home (.cl-landing-page .cl-browser-grid). */
  --cl-results-card-min: 110px;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-results-card-min), 1fr));
}

@media (max-width: 900px) {
  .cl-spine-catalogue-grid.cl-browser-grid {
    --cl-results-card-min: 98px;
    gap: 0.4rem;
  }
}

.cl-spine-catalogue-grid .cl-browser-card,
.cl-spine-catalogue-grid .cl-landing-card {
  min-width: 0;
}

.cl-landing-card--current,
.cl-spine-catalogue-grid .cl-landing-card.is-current {
  box-shadow: 0 0 0 2px var(--cl-colour-accent, var(--accent, #7dd3fc));
}

.cl-spine-catalogue-switcher {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  padding: 0.4rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
}

.cl-spine-catalogue-switcher .is-selected {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl-colour-accent, var(--accent)) 45%, transparent);
}

.cl-spine-catalogue-list--thin .cl-table-col--variants .cl-btn-row {
  flex-wrap: wrap;
}

.cl-spine-catalogue-list--thin .cl-table {
  font-size: 0.82rem;
}

/* Image block ? card/preview surfaces (CL-UNI-2). Modifiers: --stage, --thumb, --search, --tool, --compare, --compact */
.cl-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Image column ? stage (main preview frame) */
.cl-image-stage,
.cl-image.cl-image--stage {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: zoom-in;
  overflow: hidden;
}

.cl-image-stage-img,
img.cl-image.cl-image--stage-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.cl-image-stage-zoom {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-dark) 70%, transparent);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition, 0.2s ease);
}

.cl-image-stage:hover .cl-image-stage-zoom,
.cl-image-stage:focus-visible .cl-image-stage-zoom,
.cl-image.cl-image--stage:hover .cl-image-stage-zoom,
.cl-image.cl-image--stage:focus-visible .cl-image-stage-zoom {
  opacity: 1;
}

/* Placeholder image variant of the stage: same framed box, but it is not a
   click-to-enlarge trigger so it should not show the zoom cursor. */
.cl-image-stage--placeholder,
.cl-image.cl-image--stage.cl-image--placeholder {
  cursor: default;
}

/* Reusable compact card-image modifier ? ~30% smaller presentation. Use
   anywhere a card image should not dominate its column (e.g. Workspace Home
   overview). Preserves the click-to-enlarge trigger; only constrains width. */
.cl-card-image--compact {
  max-width: 70%;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .cl-card-image--compact {
    max-width: 85%;
  }
}

.cl-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 220px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.cl-image-placeholder i {
  font-size: 1.8rem;
  opacity: 0.7;
}

.cl-image-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cl-image-thumb,
button.cl-image.cl-image--thumb {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: zoom-in;
  overflow: hidden;
}

.cl-image-thumb img,
.cl-image.cl-image--thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cl-image-thumb:hover,
.cl-image-thumb:focus-visible,
.cl-image.cl-image--thumb:hover,
.cl-image.cl-image--thumb:focus-visible {
  border-color: var(--cl-colour-active);
}

/* Global image preview modal body */
.cl-image-preview-work-area {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cl-image-preview-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.cl-image-preview-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.cl-image-preview-frame .cl-image-preview-overlay {
  display: none;
}

.cl-image-preview-frame--foil .cl-image-preview-overlay {
  display: block;
}

.cl-image-preview-frame--foil .cl-image-preview-img {
  border-radius: 4px;
}

/* Detail tile grid */
.cl-detail-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.cl-detail-tile-grid[hidden],
.cl-detail-spine-more-grid[hidden] {
  display: none;
}

.cl-detail-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
  overflow: hidden;
}

.cl-detail-tile-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cl-detail-tile-value {
  font-size: 0.9rem;
  color: var(--text);
  word-break: break-word;
}

.cl-detail-tile-grid--compact {
  gap: 0.35rem;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}

.cl-detail-tile--compact {
  padding: 0.35rem 0.5rem;
  gap: 0.1rem;
}

.cl-detail-tile--compact .cl-detail-tile-label {
  font-size: 0.64rem;
}

.cl-detail-tile--compact .cl-detail-tile-value {
  font-size: 0.82rem;
}

.cl-detail-tile--searchable {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.cl-detail-tile--searchable:hover {
  border-color: var(--cl-colour-accent, var(--border-strong, var(--border-subtle)));
}

.cl-detail-tile-search-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cl-colour-regular) 22%, transparent);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition, 0.2s ease);
  pointer-events: none;
}

.cl-detail-tile--searchable:hover .cl-detail-tile-search-overlay,
.cl-detail-tile--searchable:focus-visible .cl-detail-tile-search-overlay {
  opacity: 1;
}

.cl-variant-details,
.cl-container-frame.cl-variant-details {
  min-width: 0;
}

.cl-detail-spine {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.cl-detail-spine-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.cl-detail-spine-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: break-word;
}

.cl-detail-spine-game {
  position: relative;
  flex: 0 0 4.4rem;
  align-self: center;
  width: 4.4rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
}

.cl-detail-spine-game-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(1) brightness(2.4);
  pointer-events: none;
}

.cl-detail-spine-game-name {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.cl-detail-spine-subtitle {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  overflow-wrap: break-word;
}

.cl-detail-spine-sellable {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
  margin: 0;
  font-size: 0.95rem;
}

.cl-detail-spine-qty {
  color: var(--text);
}

.cl-detail-spine-price {
  font-weight: 700;
  color: var(--text);
}

.cl-detail-spine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cl-detail-spine-chip {
  font-size: 0.68rem;
  padding: 0.12rem 0.45rem;
}

.cl-detail-spine-rules {
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 22%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 88%, #000 12%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 28%, transparent), 0 8px 18px rgba(0, 0, 0, 0.22);
  white-space: pre-wrap;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
}

.cl-detail-spine-flavor {
  margin: 0;
  padding-left: 0.65rem;
  border-left: 2px solid color-mix(in srgb, var(--cl-colour-accent) 55%, transparent);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

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

.cl-detail-spine-more-btn {
  align-self: flex-start;
}

.cl-detail-spine-more-grid {
  margin-top: 0.05rem;
}

@media (max-width: 420px) {
  .cl-detail-spine .cl-detail-tile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cl-detail-tile--variant-cycle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.cl-detail-tile--variant-cycle .cl-detail-tile-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  min-width: 0;
}

.cl-detail-tile--variant-cycle .cl-detail-tile-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0 0.55rem;
  border-left: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  color: color-mix(in srgb, #fff 75%, var(--text-muted) 25%);
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--cl-colour-accent) 12%);
}

.cl-detail-tile--variant-cycle:hover,
.cl-detail-tile--variant-cycle:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--cl-colour-active) 50%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 82%, var(--cl-colour-active) 18%);
}

.cl-detail-tile--variant-cycle:hover .cl-detail-tile-segment,
.cl-detail-tile--variant-cycle:focus-visible .cl-detail-tile-segment {
  color: #fff;
  background: color-mix(in srgb, var(--bg-elevated) 55%, var(--cl-colour-active) 45%);
}

/* Shopping placeholder */
.cl-shopping-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.75rem;
  padding: 0.9rem;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.cl-shopping-title {
  font-weight: 700;
  color: var(--text);
}

/* Market placeholder */
.cl-market-panel {
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.cl-market-panel i {
  font-size: 1.8rem;
  color: var(--cl-colour-accent);
  opacity: 0.8;
}

/* -----------------------------------------------------------------------
   cl-table ? reusable data table block (dark theme, sticky head, sticky
   first columns, horizontal scroll). Page-agnostic; first used by the
   Variant Detail Set tab. Wrap in .cl-table-scroll for bounded scrolling.
   ----------------------------------------------------------------------- */
.cl-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cl-colour-regular) 55%, transparent) transparent;
}

.cl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
}

.cl-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--cl-colour-accent) 8%);
  color: color-mix(in srgb, #fff 78%, var(--text-muted) 22%);
  font-weight: 700;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.cl-table tbody td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 90%, transparent);
  vertical-align: top;
}

.cl-table--dark tbody tr:hover td {
  background: color-mix(in srgb, var(--bg-elevated) 85%, var(--cl-colour-active) 15%);
}

.cl-table--scroll-x {
  min-width: max-content;
}

/* Sticky first / first-two columns during horizontal scroll. */
.cl-table--sticky-first tbody td:first-child,
.cl-table--sticky-first thead th:first-child,
.cl-table--sticky-first-two tbody td:nth-child(-n + 2),
.cl-table--sticky-first-two thead th:nth-child(-n + 2) {
  position: sticky;
  background: var(--bg-card);
  z-index: 1;
}

.cl-table--sticky-first tbody td:first-child,
.cl-table--sticky-first thead th:first-child,
.cl-table--sticky-first-two thead th:nth-child(1),
.cl-table--sticky-first-two tbody td:nth-child(1) {
  left: 0;
}

.cl-table--sticky-first-two thead th:nth-child(2),
.cl-table--sticky-first-two tbody td:nth-child(2) {
  left: var(--cl-table-col1-width, 3.5rem);
}

.cl-table--sticky-first thead th:first-child,
.cl-table--sticky-first-two thead th:nth-child(-n + 2) {
  z-index: 3;
}

.cl-table-col--num {
  width: var(--cl-table-col1-width, 3.5rem);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cl-table-col--name {
  min-width: 12rem;
}

.cl-table-col--variants {
  min-width: 16rem;
}

.cl-variant-link.is-current {
  outline: 2px solid var(--cl-colour-active);
  outline-offset: 1px;
}

/* Variant Stock tab ? customer availability layout (two stacked halves). */
.cl-variant-stock-layout {
  display: flex;
  flex-direction: column;
  gap: var(--cl-rail-gap, 0.75rem);
  min-height: 0;
  height: 100%;
}

.cl-variant-stock-summary,
.cl-variant-stock-detail {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cl-variant-stock-summary > .cl-frame-grid,
.cl-variant-stock-detail > .cl-frame-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.cl-variant-stock-message {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
}

.cl-variant-stock-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.cl-variant-stock-price-value {
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cl-colour-active, var(--active));
}

.cl-table-col--action {
  width: 3rem;
  text-align: center;
}

/* -----------------------------------------------------------------------
   cl-image-carousel ? featured centre slide with neighbour fades.
   Variant Stock tab + reusable elsewhere. Progressive: without JS, multi
   still shows a horizontal row of slides.
   ----------------------------------------------------------------------- */
.cl-image-carousel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-height: 11rem;
}

.cl-image-carousel--empty {
  align-items: center;
  justify-content: center;
}

.cl-image-carousel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.25rem 1rem;
  text-align: center;
  margin: auto;
}

.cl-image-carousel-empty-icon {
  font-size: 2.4rem;
  color: color-mix(in srgb, var(--cl-colour-accent) 55%, var(--text-muted) 45%);
  opacity: 0.75;
}

.cl-image-carousel-empty-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 14rem;
}

.cl-image-carousel-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cl-image-carousel-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.5rem;
  min-width: 0;
  width: 100%;
}

.cl-image-carousel--single .cl-image-carousel-track {
  justify-content: center;
}

.cl-image-carousel-item {
  flex: 0 0 auto;
  transition:
    transform var(--transition, 0.2s ease),
    opacity var(--transition, 0.2s ease),
    filter var(--transition, 0.2s ease);
}

.cl-image-carousel-item.is-featured {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}

.cl-image-carousel-item.is-neighbor-prev,
.cl-image-carousel-item.is-neighbor-next {
  transform: scale(0.82);
  opacity: 0.55;
  filter: saturate(0.85);
  z-index: 1;
}

.cl-image-carousel-item.is-distant {
  transform: scale(0.65);
  opacity: 0;
  pointer-events: none;
  max-width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.cl-image-carousel-slide {
  display: block;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 25%, var(--border-subtle));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--cl-colour-accent) 12%);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0.35rem 1rem color-mix(in srgb, #000 35%, transparent);
  transition:
    border-color var(--transition, 0.2s ease),
    box-shadow var(--transition, 0.2s ease);
}

.cl-image-carousel-slide:hover,
.cl-image-carousel-slide:focus-visible {
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  box-shadow: 0 0.45rem 1.15rem color-mix(in srgb, var(--cl-colour-active) 22%, transparent);
}

.cl-image-carousel-item.is-featured .cl-image-carousel-slide {
  width: 7.75rem;
  height: 10.75rem;
}

.cl-image-carousel-item.is-neighbor-prev .cl-image-carousel-slide,
.cl-image-carousel-item.is-neighbor-next .cl-image-carousel-slide {
  width: 5.75rem;
  height: 8rem;
}

.cl-image-carousel--single .cl-image-carousel-slide {
  width: 8rem;
  height: 11rem;
}

.cl-image-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cl-image-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-dark) 72%, transparent);
  color: color-mix(in srgb, #fff 88%, var(--cl-colour-accent) 12%);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--transition, 0.2s ease),
    background var(--transition, 0.2s ease);
}

.cl-image-carousel-viewport:hover .cl-image-carousel-nav:not(:disabled),
.cl-image-carousel-nav:focus-visible {
  opacity: 0.88;
}

.cl-image-carousel-nav:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cl-colour-accent) 55%, var(--bg-dark) 45%);
}

.cl-image-carousel-nav:disabled {
  opacity: 0 !important;
  pointer-events: none;
}

.cl-image-carousel-nav--prev {
  left: 0.15rem;
}

.cl-image-carousel-nav--next {
  right: 0.15rem;
}

/* -----------------------------------------------------------------------
   cl-hero-stat-card ? featured availability summary (Variant Stock tab).
   ----------------------------------------------------------------------- */
.cl-hero-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.1rem 1rem 1.25rem;
  text-align: center;
  border-radius: var(--radius-lg, var(--radius));
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 0%,
      color-mix(in srgb, var(--cl-colour-active) 18%, transparent),
      transparent 70%
    ),
    color-mix(in srgb, var(--bg-elevated) 82%, var(--cl-colour-accent) 18%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.cl-hero-stat-card--store {
  border-color: color-mix(in srgb, var(--cl-colour-active) 42%, var(--border-subtle));
}

.cl-hero-stat-card--collectors {
  border-color: color-mix(in srgb, var(--cl-colour-accent) 38%, var(--border-subtle));
}

.cl-hero-stat-card--out_of_stock {
  border-color: color-mix(in srgb, var(--text-muted) 35%, var(--border-subtle));
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 0%,
      color-mix(in srgb, var(--text-muted) 12%, transparent),
      transparent 70%
    ),
    color-mix(in srgb, var(--bg-elevated) 90%, var(--bg-card) 10%);
}

.cl-hero-stat-card__number {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--cl-colour-active, var(--active));
  text-shadow: 0 0.15rem 0.75rem color-mix(in srgb, var(--cl-colour-active) 35%, transparent);
}

.cl-hero-stat-card--collectors .cl-hero-stat-card__number {
  color: var(--cl-colour-accent, var(--accent));
}

.cl-hero-stat-card__label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.cl-hero-stat-card__message {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 18rem;
}

/* Compact dashboard variant ? reusable on Settings, admin hubs, etc. */
.cl-hero-stat-card--compact {
  gap: 0.2rem;
  padding: 0.6rem 0.75rem 0.7rem;
  align-items: flex-start;
  text-align: left;
}

.cl-hero-stat-card--compact .cl-hero-stat-card__number {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.1;
  text-shadow: none;
}

.cl-hero-stat-card--compact .cl-hero-stat-card__label {
  font-size: 0.84rem;
  font-weight: 650;
}

.cl-hero-stat-card--compact .cl-hero-stat-card__message {
  font-size: 0.76rem;
  line-height: 1.35;
  max-width: none;
}

.cl-hero-stat-card__price {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-active) 35%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-dark) 55%, var(--cl-colour-active) 45%);
}

.cl-hero-stat-card__price--range {
  border-color: color-mix(in srgb, var(--highlight, #ffa033) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-dark) 60%, var(--highlight, #ffa033) 40%);
}

.cl-hero-stat-card__price--unavailable {
  border-color: color-mix(in srgb, var(--text-muted) 35%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-card) 12%);
}

.cl-hero-stat-card__price-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 72%, var(--text-muted) 28%);
}

.cl-hero-stat-card__price-value {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.cl-hero-stat-card__price--unavailable .cl-hero-stat-card__price-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------
   cl-promo-callout ? centred invite panel (Variant Stock trade box).
   ----------------------------------------------------------------------- */
.cl-promo-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.35rem 1.1rem;
  text-align: center;
  border-radius: var(--radius-lg, var(--radius));
  border: 1px dashed color-mix(in srgb, var(--cl-colour-accent) 40%, var(--border-subtle));
  background:
    radial-gradient(
      ellipse 100% 70% at 50% 100%,
      color-mix(in srgb, var(--cl-colour-accent) 14%, transparent),
      transparent 65%
    ),
    color-mix(in srgb, var(--bg-elevated) 86%, var(--cl-colour-accent) 14%);
}

.cl-promo-callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-size: 1.35rem;
  color: var(--cl-colour-active, var(--active));
  background: color-mix(in srgb, var(--cl-colour-active) 18%, var(--bg-dark) 82%);
  border: 1px solid color-mix(in srgb, var(--cl-colour-active) 35%, var(--border-subtle));
}

.cl-promo-callout__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  max-width: 16rem;
}

.cl-promo-callout__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 18rem;
}

.cl-promo-callout__action {
  margin-top: 0.25rem;
}

/* -----------------------------------------------------------------------
   cl-empty-future ? on-brand coming-soon panel (Variant Stock + reuse).
   ----------------------------------------------------------------------- */
.cl-empty-future {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem 1rem;
  text-align: center;
}

.cl-empty-future__icon {
  font-size: 1.75rem;
  color: var(--cl-colour-accent, var(--accent));
  opacity: 0.82;
}

.cl-empty-future__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.cl-empty-future__copy {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 14rem;
}

/* -----------------------------------------------------------------------
   Variant Staff View ? identity accordion + cl-catalog-editor (Slice 1?5).
   Action strip lives in the page header (Workspace pattern); panel owns scroll.
   ----------------------------------------------------------------------- */
.cl-tab-panel.cl-tab-panel--staff-fill {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.cl-variant-staff-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.cl-variant-staff-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cl-variant-staff-head {
  flex: 0 0 auto;
}

.cl-variant-staff-work {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cl-colour-regular) 55%, transparent) transparent;
  padding-right: 0.1rem;
}

.cl-variant-staff-work .cl-accordion {
  display: grid;
  gap: 0.5rem;
}

.cl-variant-staff-work .cl-accordion-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elevated);
}

.cl-variant-staff-work .cl-accordion-item.is-open > .cl-accordion-head {
  background: color-mix(in srgb, var(--cl-mode-tone, var(--cl-colour-accent)) 14%, var(--bg-elevated));
}

.cl-variant-staff-work .cl-accordion-item.is-open > .cl-accordion-panel > .cl-accordion-panel-inner {
  overflow: visible;
  max-height: none;
  padding: 0.65rem 0.85rem 0.85rem;
}

.cl-variant-staff-work .cl-table-scroll {
  overflow-x: auto;
  max-height: none;
}

.cl-variant-staff-action-strip[hidden] {
  display: none !important;
}

.cl-spine-tile-staff-info {
  min-width: 0;
}

.cl-spine-staff-toolbar {
  flex: 0 0 auto;
  padding: 0 0 0.45rem;
  margin: 0 0 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
}

.cl-spine-staff-toolbar .cl-mode-action-row--groups {
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
}

.cl-spine-tile-staff-info .cl-staff-field-table,
.cl-spine-tile-staff-info .cl-staff-table {
  font-size: 0.78rem;
}

.cl-spine-tile-staff-info .cl-staff-field-table__notes {
  max-width: 9rem;
  word-break: break-word;
}

.cl-spine-tile-staff-actions .cl-empty-future {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1rem 0.75rem;
}

.cl-staff-field-table {
  font-size: 0.82rem;
}

.cl-staff-field-table__value {
  word-break: break-word;
  max-width: 22rem;
}

.cl-staff-field-table__notes {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.cl-staff-field-subsection {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
}

.cl-staff-field-subsection__title {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.cl-pill--staff-read-only {
  border-color: color-mix(in srgb, var(--text-muted) 40%, var(--border-subtle));
  color: var(--text-muted);
}

.cl-pill--staff-system {
  border-color: color-mix(in srgb, var(--cl-colour-accent) 35%, var(--border-subtle));
  color: color-mix(in srgb, var(--cl-colour-accent) 80%, var(--text));
}

.cl-pill--staff-editable-later {
  border-color: color-mix(in srgb, var(--highlight, #ffa033) 45%, var(--border-subtle));
  color: color-mix(in srgb, var(--highlight, #ffa033) 85%, var(--text));
}

.cl-pill--staff-managed-elsewhere {
  border-color: color-mix(in srgb, var(--cl-colour-active) 40%, var(--border-subtle));
  color: var(--cl-colour-active, var(--active));
}

.cl-pill--staff-coming-soon {
  border-color: color-mix(in srgb, var(--text-muted) 35%, var(--border-subtle));
  color: var(--text-muted);
  opacity: 0.9;
}

.cl-pill--staff-identity-editable {
  border-color: color-mix(in srgb, var(--highlight, #ffa033) 50%, var(--border-subtle));
  color: color-mix(in srgb, var(--highlight, #ffa033) 90%, var(--text));
}

.cl-staff-field-table--identity 
.cl-ws-stock-table .cl-input--dense,
.cl-ws-pricing-table .cl-input--dense,
.cl-ws-stock-table .cl-input.cl-input--dense,
.cl-ws-pricing-table .cl-input.cl-input--dense {
  max-width: 8rem;
  width: 100%;
}

.cl-input--dense {
  width: 100%;
  min-width: 8rem;
}

.cl-staff-field-table__empty {
  color: var(--text-muted);
}

.cl-field-error {
  border-color: color-mix(in srgb, #ef4444 70%, var(--border-subtle)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent);
}

.cl-catalog-editor__field-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: #f87171;
}

.cl-catalog-editor__summary {
  margin: 0.75rem 0 1rem;
  display: grid;
  gap: 0.45rem;
}

.cl-catalog-editor__summary dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cl-catalog-editor__summary dd {
  margin: 0.1rem 0 0;
  word-break: break-word;
}

.cl-catalog-editor__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cl-catalog-editor__save-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0.75rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  color: var(--accent);
  animation: cl-catalog-editor-save-pulse 1.6s ease-in-out infinite;
}

.cl-catalog-editor__save-icon--success {
  color: #4ade80;
  animation: none;
}

@keyframes cl-catalog-editor-save-pulse {
  0%, 100% {
    opacity: 0.55;
    filter: drop-shadow(0 0 0 transparent);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 55%, transparent));
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-catalog-editor__save-icon {
    animation: none;
    opacity: 1;
  }
}

.cl-catalog-editor__state {
  min-height: 10rem;
}

.cl-catalog-editor__progress-text {
  text-align: center;
  font-weight: 600;
}

.cl-catalog-editor__merge-scroll {
  max-height: min(52vh, 28rem);
  overflow: auto;
  margin: 0.75rem 0 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 0.5rem);
}

.cl-catalog-editor__merge-table {
  width: 100%;
  font-size: 0.82rem;
}

.cl-catalog-editor__merge-table th,
.cl-catalog-editor__merge-table td {
  vertical-align: middle;
  padding: 0.45rem 0.5rem;
}

.cl-catalog-editor__merge-left,
.cl-catalog-editor__merge-right {
  word-break: break-word;
  width: 38%;
}

.cl-catalog-editor__merge-middle {
  width: 24%;
  text-align: center;
}

.cl-catalog-editor__merge-toggle {
  display: inline-flex;
  gap: 0.35rem;
  justify-content: center;
}

.cl-catalog-editor__merge-choice {
  min-width: 2rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 0.35rem);
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: var(--text-primary);
  cursor: pointer;
}

.cl-catalog-editor__merge-choice.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.cl-catalog-editor__merge-equal {
  display: inline-block;
  font-weight: 700;
  color: var(--text-muted);
}

.cl-catalog-editor__merge-warning {
  margin-top: 0.5rem;
}

.cl-catalog-editor__sidekick {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.cl-catalog-editor__sidekick-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.cl-catalog-editor__sidekick-scroll {
  max-height: min(32vh, 16rem);
}

.cl-catalog-editor__sidekick-table {
  width: 100%;
  font-size: 0.8rem;
}

.cl-catalog-editor__sidekick-table th,
.cl-catalog-editor__sidekick-table td {
  vertical-align: middle;
  padding: 0.35rem 0.45rem;
}

.cl-catalog-editor__sidekick-action {
  width: 100%;
  max-width: 14rem;
  font-size: 0.78rem;
}

.cl-catalog-editor__merge-confirm[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Task 3-A ? Staff View simple edits + table shells */
.cl-textarea,
.cl-textarea.cl-input {
  font: inherit;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
  min-width: 0;
  width: 100%;
  resize: vertical;
  min-height: 3.5rem;
}

.cl-textarea:focus {
  outline: none;
  border-color: var(--cl-colour-active, var(--cl-colour-highlight));
}

.cl-textarea--dense {
  min-height: 2.75rem;
  font-size: 0.88rem;
}

.cl-staff-field-table--editable .cl-staff-field-table__empty {
  color: var(--text-muted);
}

.cl-staff-folder-helper {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cl-staff-folder--locked .cl-accordion-label .cl-pill--inline {
  margin-left: 0.35rem;
  vertical-align: middle;
}

.cl-pill--staff-locked,
.cl-pill--staff-parked {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
}

.cl-staff-table .cl-staff-table__input {
  width: 100%;
  min-width: 6rem;
}

.cl-staff-image-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.cl-staff-table tbody tr:hover {
  background: color-mix(in srgb, var(--surface-raised, var(--bg-subtle)) 65%, transparent);
}

.cl-btn.is-busy {
  opacity: 0.65;
  cursor: wait;
}

[data-cl-staff-table-actions] {
  margin-top: 0.5rem;
}

.cl-staff-owner-picker__hint {
  margin: 0 0 0.75rem;
}

.cl-staff-owner-picker__select {
  width: 100%;
  max-width: 28rem;
}

.cl-staff-owner-picker__empty {
  margin-top: 0.75rem;
}

.cl-staff-table__empty-row td {
  color: var(--text-muted);
  font-style: italic;
}

.cl-staff-override-icon {
  color: var(--text-muted);
  opacity: 0.45;
}

.cl-staff-override-icon.is-active {
  color: var(--cl-colour-highlight, var(--accent));
  opacity: 1;
}

.cl-select--dense {
  font-size: 0.88rem;
  padding: 0.3rem 0.45rem;
}

.cl-input--dense {
  font-size: 0.88rem;
  padding: 0.3rem 0.45rem;
}

.cl-status-line--warning {
  color: var(--cl-colour-warning, #c9a227);
}

/* Horizontal image gallery (legacy scroll row ? Template Library demo). */
.cl-image-gallery {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  min-height: 0;
}

.cl-image-gallery-track {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  min-width: 0;
  padding: 0.15rem 0;
}

.cl-image-gallery-slide {
  flex: 0 0 auto;
  width: 7.5rem;
  height: 10.5rem;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
  cursor: pointer;
}

.cl-image-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cl-image-gallery-nav {
  flex: 0 0 auto;
  align-self: center;
}

/* Template Library ? schema glossary collapsible groups + type pills. */
.cl-tl-glossary-group > summary {
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  list-style: revert;
}

.cl-tl-glossary-group > summary:hover {
  border-color: var(--border-strong, var(--border-subtle));
}

.cl-pill {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  color: var(--text-muted, var(--text));
}

.cl-pill--persisted {
  border-color: color-mix(in srgb, var(--success, #2e7d32) 50%, transparent);
  color: var(--success, #2e7d32);
}

.cl-pill--computed,
.cl-pill--joined,
.cl-pill--api {
  border-color: color-mix(in srgb, var(--warning, #b26a00) 50%, transparent);
  color: var(--warning, #b26a00);
}

.cl-pill--removed {
  border-color: color-mix(in srgb, var(--danger, #c62828) 50%, transparent);
  color: var(--danger, #c62828);
  text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   cl-scanner ? reusable barcode camera scanner block (Add by Barcode modal).
   Camera scanning uses the native BarcodeDetector API; the block degrades to a
   plain status line when the camera/API is unavailable. Manual input lives in
   the surrounding cl-field-row, so the scanner is purely additive.
   --------------------------------------------------------------------------- */
.cl-scanner {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
}

.cl-scanner-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.cl-scanner-status {
  min-height: 1em;
}

.cl-scanner-stage {
  position: relative;
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.cl-scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cl-scanner-reticle {
  position: absolute;
  inset: 18% 12%;
  border: 2px solid color-mix(in srgb, var(--cl-colour-active, #4caf50) 80%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

/* Add by Search modal ? compact result thumbnail. */
.cl-ws-search-thumb,
.cl-image.cl-image--thumb.cl-image--search {
  width: 2.4rem;
  height: auto;
  border-radius: 4px;
  display: block;
}

[data-cl-ws-search-results] td {
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   cl-engine-* ? App Engine v1 status / activity / settings surfaces.
   Reusable across the footer "Current App Status" modal, the Maintenance
   "App Task Log" + "Engine Settings" modals, and the Template Library Engine
   tab. Built on existing tokens (cl-table, cl-status-line, theme colours) ? no
   new design language, just engine-specific accents.
   --------------------------------------------------------------------------- */
.cl-engine-status {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cl-engine-counts {
  margin-left: auto;
}

.cl-engine-section-title {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

[data-cl-engine-table] {
  width: 100%;
  font-size: 0.85rem;
}

[data-cl-engine-table] td,
[data-cl-engine-table] th {
  vertical-align: top;
}

.cl-engine-row-error {
  color: var(--error, #c62828);
  font-size: 0.78rem;
  margin-top: 0.2rem;
  word-break: break-word;
}

.cl-engine-row-actions {
  white-space: nowrap;
  display: flex;
  gap: 0.3rem;
}

/* Status pills ? one per app_task_status. */
.cl-engine-pill {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cl-engine-pill--running {
  border-color: color-mix(in srgb, var(--active, #2f80ed) 55%, transparent);
  color: var(--active, #2f80ed);
}

.cl-engine-pill--queued,
.cl-engine-pill--scheduled,
.cl-engine-pill--retry_waiting {
  border-color: color-mix(in srgb, var(--warning, #b26a00) 55%, transparent);
  color: var(--warning, #b26a00);
}

.cl-engine-pill--succeeded {
  border-color: color-mix(in srgb, var(--success, #2e7d32) 55%, transparent);
  color: var(--success, #2e7d32);
}

.cl-engine-pill--failed {
  border-color: color-mix(in srgb, var(--error, #c62828) 55%, transparent);
  color: var(--error, #c62828);
}

.cl-engine-pill--cancelled {
  border-color: var(--border-subtle);
  color: var(--text-muted, #98989f);
  text-decoration: line-through;
}

/* Engine Settings ? stacked editable fields. */
.cl-engine-settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.6rem 0;
}

.cl-engine-setting-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Invalid setting input (client-side validation in cl_engine_maintenance.js). */
.cl-engine-setting-field .cl-input--error,
.cl-input--error {
  border-color: var(--error, #c62828);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--error, #c62828) 45%, transparent);
}

/* App Task Log filter field. */
.cl-engine-activity-filter {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem 0 0.6rem;
}

/* File Storage diagnostic upload field (Global File/Storage Foundation v1). */
.cl-file-storage-upload {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem 0 0.7rem;
}

.cl-file-storage-upload .cl-btn-row {
  align-items: center;
  gap: 0.4rem;
}

/* Template Library Engine reference ? lifecycle chips. */
.cl-engine-lifecycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0.4rem 0;
}

.cl-engine-lifecycle .cl-engine-pill {
  font-size: 0.7rem;
}

.cl-engine-lifecycle-arrow {
  color: var(--text-muted, #98989f);
}

/* ===========================================================================
   Image Intake ? reusable interactive tile grid (cl-int-tiles) + container
   frame highlight modifier. cl-int-tiles is a GLOBAL reusable pattern (image
   organisation, ordered groups, future decks/sorting) ? not Image-Intake-only.
   =========================================================================== */

/* Reusable highlight state for any cl-container-frame (e.g. merge mode). */
.cl-container-frame--highlight {
  border-color: var(--cl-colour-accent);
  box-shadow: 0 0 0 1px var(--cl-colour-accent),
    0 0 18px color-mix(in srgb, var(--cl-colour-accent) 35%, transparent);
}

.cl-int-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
  width: 100%;
}

.cl-int-tiles[hidden] { display: none; }

.cl-int-tiles-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  text-align: center;
}

/* Empty-state is shown only when there are zero visible items (JS toggles
   [hidden]). Without this the display:flex above overrides the UA [hidden]
   rule and the empty message would render even while tiles are present. */
.cl-int-tiles-empty[hidden] { display: none; }

.cl-int-tiles-empty i {
  font-size: 1.8rem;
  opacity: 0.6;
}

.cl-int-tile {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  cursor: default;
}

.cl-int-tile--empty-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem;
  max-width: 11.5rem;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  border-style: dashed;
  font: inherit;
  width: 100%;
}

.cl-int-tile--empty-add:hover,
.cl-int-tile--empty-add:focus-visible {
  color: var(--text);
  border-color: var(--accent, var(--border-subtle));
}

.cl-int-tile--empty-add i {
  font-size: 1.6rem;
  opacity: 0.7;
}

.cl-int-tile-bg,
.cl-int-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.cl-int-tile-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-elevated);
}

.cl-int-tile-img {
  object-fit: cover;
  object-position: center;
  background-color: var(--bg-elevated);
}

.cl-int-tile-hints {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  z-index: 2;
  pointer-events: none;
}

.cl-int-tile-hint-bubble {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.cl-int-tile-hint-bubble--scope {
  background: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

.cl-int-tile-status--persistent {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 2;
}

.cl-int-tile-chrome {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0.4rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 28%,
    transparent 60%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 3;
}

.cl-int-tile:hover .cl-int-tile-chrome,
.cl-int-tile:focus-within .cl-int-tile-chrome,
.cl-int-tile--selected .cl-int-tile-chrome {
  opacity: 1;
}

.cl-ii-prepare-frame--chrome-hidden .cl-int-tile-chrome {
  display: none !important;
}

.cl-int-tile-chrome-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cl-int-tile-chrome-actions--right {
  justify-content: flex-end;
  margin-left: auto;
}

.cl-int-tile-scope-row {
  display: flex;
  width: 100%;
  min-width: 0;
}

.cl-int-tile-scope-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.cl-int-tile-hint-edit {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
}

.cl-int-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.4rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 28%,
    transparent 60%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}

.cl-int-tile:hover .cl-int-tile-overlay,
.cl-int-tile:focus-within .cl-int-tile-overlay,
.cl-int-tile--selected .cl-int-tile-overlay {
  opacity: 1;
}

.cl-int-tile-top-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}

.cl-int-tile-top-row > .cl-int-tile-preview {
  justify-self: center;
}

.cl-int-tile-top-row > .cl-int-tile-chrome-actions--right {
  justify-self: end;
}

/* Notification-bubble style quantity blip (top-left). Hidden when qty = 1. */
.cl-int-tile-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--cl-colour-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Collection Display: intake qty blip on homepage-style cards; optional profile accent. */
.cl-collection-display .cl-collection-qty-blip {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 3;
  background: var(--cl-collection-qty-accent, var(--cl-colour-accent));
}

.cl-collection-display .cl-browser-card-face--front {
  position: relative;
}

/*
  Collection page layout. The page root is also .cl-events-page-root
  (display: contents), so title + section-stack flex on <main>. Results
  SIZE TO CONTENT — if the cards frame can shrink, the dark frame stops
  short and cards paint past it. The section-stack scrolls.
*/
[data-cl-page="collection"] {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  position: relative;
}

[data-cl-page="collection"] .cl-collection-display {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow: visible;
  padding: 0;
}

[data-cl-page="collection"] .cl-collection-display > :not([data-cl-collection-results]) {
  flex: 0 0 auto;
}

[data-cl-page="collection"] .cl-collection-display [data-cl-collection-results],
[data-cl-page="collection"] .cl-collection-display .cl-landing-multisearch__results {
  flex: 0 0 auto;
  height: auto;
  min-height: 12rem;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
}

[data-cl-page="collection"] .cl-collection-display .cl-landing-results-body {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* Defeat .cl-container-frame { min-height: 0 } shrinking the results chrome. */
[data-cl-page="collection"] .cl-collection-display [data-cl-collection-results].cl-container-frame {
  min-height: 12rem;
  flex-shrink: 0;
}

.cl-container-tray--viewport .cl-mortar--tray {
  min-height: 100%;
  align-content: start;
}

.cl-container-tray--viewport.cl-container-tray--pages .cl-mortar--tray {
  min-height: 0;
}

/* Collection soft-reveal: match landing grid attribute. */
[data-cl-collection-results-grid].is-cl-landing-results-pending {
  opacity: 1;
  pointer-events: none;
}

[data-cl-collection-results-grid].is-cl-landing-results-ready {
  opacity: 1;
  pointer-events: auto;
  animation: cl-landing-results-fade-in 0.38s ease both;
}

@media (prefers-reduced-motion: reduce) {
  [data-cl-collection-results-grid].is-cl-landing-results-pending,
  [data-cl-collection-results-grid].is-cl-landing-results-ready {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Directory keeps shared dials visible (band chrome is global). */

.cl-landing-results-body {
  position: relative;
}

/* Legacy Collection strip only — not Directory crumb tiles in the results grid. */
[data-cl-directory-crumbs].cl-directory-crumbs,
.cl-directory-crumbs[hidden][data-cl-directory-crumbs] {
  display: none !important;
}

.cl-collection-display {
  gap: 0.35rem;
}

.cl-collection-results-status-row {
  margin: 0 0 0.35rem;
}

.cl-collection-results-status {
  margin: 0;
}

.cl-collection-results-status[hidden] {
  display: none !important;
}

.cl-collection-display > .cl-landing-multisearch,
.cl-collection-display > [data-cl-multisearch] {
  margin: 0;
}

.cl-directory-layer > .cl-results-empty {
  grid-column: 1 / -1;
}

.cl-directory-layer.is-leaving {
  opacity: 0.2;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.cl-directory-layer.is-entering {
  animation: cl-landing-results-fade-in 0.38s ease both;
}

/* Directory scope tiles: locked variant footprint; logo/text float centered inside.
   No 3D flip — front-only (desktop hover flip blanked tiles; iPhone uses flat cards). */
.cl-directory-scope-tile,
.cl-collection-display--directory .cl-directory-layer .cl-directory-scope-tile,
.cl-landing-page.cl-landing-page--touch-cards .cl-directory-scope-tile {
  -webkit-perspective: none;
  perspective: none;
  position: relative;
  aspect-ratio: 5 / 7;
  width: 100%;
  height: auto;
  min-height: 0 !important;
  max-height: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  background: var(--bg-elevated, #16161f);
  border-radius: var(--radius);
}

/* Breadcrumb / scope tiles: full-tile tint so they do not match browse options. */
.cl-directory-crumb.cl-directory-scope-tile::after,
.cl-directory-scope-tile.cl-directory-crumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: color-mix(in srgb, var(--cl-colour-accent, #7c5cff) 34%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl-colour-accent, #7c5cff) 55%, transparent);
}

.cl-directory-scope-tile .cl-browser-card-inner,
.cl-collection-display--directory .cl-directory-layer .cl-directory-scope-tile .cl-browser-card-inner,
.cl-landing-page.cl-landing-page--touch-cards .cl-directory-scope-tile .cl-browser-card-inner {
  position: absolute;
  inset: 0;
  -webkit-transform-style: flat;
  transform-style: flat;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: none;
  transition: none;
  background: var(--bg-elevated, #16161f);
}

.cl-directory-scope-tile .cl-browser-card-face,
.cl-collection-display--directory .cl-directory-layer .cl-directory-scope-tile .cl-browser-card-face,
.cl-landing-page.cl-landing-page--touch-cards .cl-directory-scope-tile .cl-browser-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform: none !important;
  transform: none !important;
  background: var(--bg-elevated, #16161f);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .cl-directory-scope-tile:hover .cl-browser-card-inner,
  .cl-directory-scope-tile:focus-within .cl-browser-card-inner {
    -webkit-transform: none !important;
    transform: none !important;
  }
}

.cl-directory-scope-face {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Image/text never participate in layout sizing — float in the fixed face. */
.cl-directory-scope-face .cl-browser-card-image--contain {
  position: absolute;
  inset: 0.45rem;
  width: auto;
  height: auto;
  max-width: calc(100% - 0.9rem);
  max-height: calc(100% - 0.9rem);
  margin: auto;
  object-fit: contain;
  object-position: center;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
}

.cl-directory-scope-face--flag .cl-browser-card-image--contain {
  inset: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.cl-directory-scope-face--flag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 14, 0.18), rgba(8, 8, 14, 0.52));
}

.cl-directory-scope-overlay {
  position: absolute;
  z-index: 2;
  left: 0.4rem;
  right: 0.4rem;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(1.05rem, 3.4vw, 1.55rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* Symbol-only set tiles: small mark, title is the main face. */
.cl-directory-scope-overlay--title {
  top: 44%;
  bottom: 0.5rem;
  font-size: clamp(0.76rem, 2.45vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.15;
  max-height: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.cl-directory-scope-face--icon .cl-browser-card-image--contain {
  inset: 0.72rem auto auto;
  top: 12%;
  left: 0;
  right: 0;
  width: 46%;
  height: 28%;
  max-width: 46%;
  max-height: 28%;
  margin: 0 auto;
}

.cl-directory-scope-face--game-mark .cl-browser-card-image--contain {
  inset: 0.72rem auto auto;
  top: 12%;
  left: 0;
  right: 0;
  width: 46%;
  height: 28%;
  max-width: 46%;
  max-height: 28%;
  margin: 0 auto;
  opacity: 0.38;
}

.cl-directory-scope-overlay--caption {
  top: auto;
  bottom: 0.4rem;
  font-size: clamp(0.6rem, 2vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cl-directory-scope-face--logo:has(.cl-directory-scope-overlay--caption) .cl-browser-card-image--contain {
  inset: 0.4rem 0.38rem 2.1rem;
  max-width: calc(100% - 0.76rem);
  max-height: calc(100% - 2.5rem);
}

.cl-directory-scope-face--logo .cl-browser-card-image--contain {
  filter: drop-shadow(0 0 0.7px rgba(255, 255, 255, 0.88))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.22));
}

.cl-directory-scope-face--logo-plate .cl-browser-card-image--contain {
  background: #f3eee4;
  border-radius: 0.7rem;
  padding: 0.42rem 0.48rem;
  filter: none;
}

.cl-directory-scope-face--invert .cl-browser-card-image--contain {
  filter: brightness(0) invert(1);
}

.cl-directory-scope-face--game .cl-browser-card-image--contain {
  inset: 0.65rem 0.6rem 2.35rem;
  max-width: calc(100% - 1.2rem);
  max-height: calc(100% - 3rem);
}

.cl-directory-scope-face--game .cl-directory-scope-overlay {
  top: auto;
  bottom: 0.55rem;
  font-size: clamp(0.78rem, 2.6vw, 1.05rem);
  letter-spacing: 0.08em;
}

.cl-directory-scope-mark {
  position: absolute;
  inset: 18%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  background: url("/static/img/directory/mark-generic.svg") center / contain no-repeat;
}

.cl-browser-card-image--contain {
  object-fit: contain;
  object-position: center;
  background: transparent;
  box-sizing: border-box;
}

.cl-directory-scope-face .cl-landing-card__fallback {
  position: absolute;
  inset: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.2rem;
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  box-sizing: border-box;
}

.cl-landing-card__fallback--name {
  font-size: clamp(0.72rem, 2.4vw, 0.95rem);
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
  max-width: 100%;
}

/* Scope faces: keep name fallback centered (line-clamp alone pins text to the top). */
.cl-collection-add-more-tile .cl-landing-card__fallback {
  padding: 0.75rem;
  font-size: clamp(0.78rem, 2.2vw, 1rem);
  line-height: 1.25;
}

.cl-directory-scope-face .cl-landing-card__fallback--name {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-line-clamp: unset;
  overflow: hidden;
}

.cl-landing-card__fallback--code {
  font-size: clamp(0.85rem, 2.8vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cl-collection-display--table .cl-landing-card {
  /* Table reuses grid but denser meta emphasis via list below when rendered. */
}

.cl-collection-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.cl-collection-table th,
.cl-collection-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  text-align: left;
  vertical-align: middle;
}

.cl-collection-table th {
  font-weight: 650;
  opacity: 0.8;
}

.cl-collection-table__qty {
  white-space: nowrap;
}

.cl-int-tile-status[hidden] {
  display: none !important;
}

.cl-int-tile-remove {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  min-height: 1.5rem;
  padding: 0 0.45rem;
}

.cl-int-tile-preview {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  min-height: 1.5rem;
  padding: 0 0.45rem;
}

.cl-int-tile-preview:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cl-int-tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.cl-int-tile-tag {
  font-size: 0.68rem;
  background: rgba(0, 0, 0, 0.5);
}

.cl-int-tile-tag-add {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  min-height: 1.4rem;
  padding: 0 0.4rem;
}

.cl-int-tile-tag-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.25rem;
}

.cl-int-tile-tag-editor .cl-input {
  font-size: 0.72rem;
  padding: 0.2rem 0.35rem;
  flex: 1 1 4rem;
  min-width: 0;
}

.cl-int-tile--selected {
  border-color: var(--cl-colour-accent);
  box-shadow: 0 0 0 2px var(--cl-colour-accent);
}

/* Browser Directory / search tile selection — intake glow on front (no front checkbox). */
.cl-browser-card.is-cl-selected,
.cl-search-tile.is-cl-selected,
[data-cl-directory-variant].is-cl-selected {
  box-shadow: 0 0 0 2px var(--cl-colour-accent);
  outline: 1px solid var(--cl-colour-accent);
}

/*
 * Back-face select control sits in .cl-landing-card-actions (pointer-events:none).
 * Must opt in like .cl-landing-card-action (eye) or clicks never reach it.
 */
.cl-directory-variant-check--back {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  min-width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 88%, #000 12%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  flex: 0 0 auto;
}

.cl-directory-variant-check--back input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--cl-colour-accent);
  pointer-events: auto;
}

@media (max-width: 768px) {
  .cl-directory-variant-check--back {
    width: 2.2rem;
    min-width: 2.2rem;
    height: 2.2rem;
  }
}

/* Drag reorder states (active only when NOT in merge mode). */
.cl-int-tile--draggable { cursor: grab; }
.cl-int-tile--draggable:active { cursor: grabbing; }

.cl-int-tile--dragging {
  opacity: 0.55;
}

.cl-int-tile--drop-target {
  border-color: var(--cl-colour-accent);
  box-shadow: inset 0 0 0 2px var(--cl-colour-accent);
}

.cl-int-tile--failed .cl-int-tile-bg,
.cl-int-tile--failed .cl-int-tile-img {
  background-color: color-mix(in srgb, #b91c1c 22%, var(--bg-elevated));
  opacity: 0.55;
}

.cl-int-tile-fail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: #fca5a5;
  font-size: 0.8rem;
  pointer-events: none;
}

.cl-int-tile-fail i {
  font-size: 1.4rem;
}

.cl-int-tile--processing .cl-int-tile-img {
  background-color: color-mix(in srgb, var(--cl-colour-accent, #64748b) 12%, var(--bg-elevated, #1e293b));
  min-height: 8rem;
}

.cl-int-tile-processing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--cl-text-muted, #94a3b8);
  font-size: 0.8rem;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg-elevated, #0f172a) 35%, transparent);
}

/* Local blob already visible — keep a small status chip, don't cover the photo. */
.cl-int-tile--has-local-preview .cl-int-tile-processing {
  inset: auto;
  top: 0.4rem;
  left: 0.4rem;
  right: auto;
  bottom: auto;
  flex-direction: row;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated, #0f172a) 78%, transparent);
  font-size: 0.72rem;
}

/* Image Intake Prepare / Cluster merge motion (slide + fade + FLIP reflow in JS). */
.cl-int-tile.image-intake-merge-removing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.cl-int-tile.image-intake-merge-survivor-pulse {
  box-shadow: 0 0 0 2px var(--active, #6366f1);
  transition: box-shadow 280ms ease;
}

.cl-int-tile--cluster-merging-away {
  position: relative;
  z-index: 6;
  pointer-events: none;
  transition: transform 420ms ease, opacity 420ms ease;
  will-change: transform, opacity;
}

.cl-int-tile--cluster-qty-pop {
  animation: cl-int-qty-pop 360ms ease;
}

@keyframes cl-int-qty-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.cl-int-tile--flip-reflow {
  transition: transform 220ms ease;
  will-change: transform;
}

.cl-int-identify-row--dismissing {
  opacity: 0;
  transform: translateY(-0.4rem) scale(0.985);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .cl-int-tile.image-intake-merge-removing,
  .cl-int-tile--cluster-merging-away,
  .cl-int-tile--flip-reflow,
  .cl-int-identify-row--dismissing {
    transition: none;
  }

  .cl-int-tile--cluster-qty-pop {
    animation: none;
  }

  .cl-int-tile.image-intake-merge-survivor-pulse {
    transition: none;
    box-shadow: none;
    outline: 2px solid var(--active, #6366f1);
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------------
   Image Intake ? fingerprint Merge Mode highlighting + Cluster Mode layout.
   Fingerprints are SUGGESTIONS only; every tile stays clickable. dHash Hamming
   distance <= 10 = likely visual duplicate candidate.
   --------------------------------------------------------------------------- */

/* Merge Mode: selected survivor (shared with cluster survivor selection). */
.cl-int-tile--merge-selected {
  border-color: var(--cl-colour-accent);
  box-shadow: 0 0 0 2px var(--cl-colour-accent);
}

/* Likely match (distance <= 10) ? stays full colour with a clear ring. */
.cl-int-tile--fp-match {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px #22c55e,
    0 0 14px color-mix(in srgb, #22c55e 40%, transparent);
}

/* Non-match (distance > 10) ? dimmed/desaturated but still clickable. */
.cl-int-tile--fp-dim {
  opacity: 0.42;
  filter: grayscale(0.85);
}

.cl-int-tile--fp-dim:hover {
  opacity: 0.7;
  filter: grayscale(0.35);
}

/* Missing fingerprint ? lightly neutralised, still clickable. */
.cl-int-tile--fp-unknown {
  opacity: 0.75;
}

/* Small distance/match badge (top-left, below the qty blip if any). */
.cl-int-tile-fp-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  padding: 0 0.35rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.cl-int-tile-fp-badge--match {
  background: #16a34a;
}

/* Corner placement for reusable tile badges (default is top-left). */
.cl-int-tile-fp-badge--bl {
  top: auto;
  bottom: 0.25rem;
  left: 0.25rem;
}
.cl-int-tile-fp-badge--br {
  top: auto;
  bottom: 0.25rem;
  left: auto;
  right: 0.25rem;
}

/* Generic tile status rings (success / info / highlight). */
.cl-int-tile--ring-success {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success, #22c55e) 85%, #000);
  border-radius: 0.45rem;
}
.cl-int-tile--ring-info {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl-colour-info, #3b82f6) 90%, #000);
  border-radius: 0.45rem;
}
.cl-int-tile--ring-highlight {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl-colour-highlight, #ff8103) 85%, #000);
  border-radius: 0.45rem;
}

/* Cluster Mode host ? occupies the same content space as cl-int-tiles. */
.cl-int-clusters {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
}

.cl-int-clusters[hidden] { display: none; }

.cl-int-clusters-empty {
  padding: 2rem 1rem;
}

.cl-int-cluster {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  background: var(--bg-elevated);
}

.cl-int-cluster--active {
  border-color: var(--cl-colour-accent);
  box-shadow: 0 0 0 1px var(--cl-colour-accent);
}

.cl-int-cluster-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.cl-int-cluster-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.7rem;
  align-items: stretch;
}

/* Fake cluster tile ? deliberately NOT a card; dashed action tile. */
.cl-int-cluster-merge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--cl-colour-accent);
  background: color-mix(in srgb, var(--cl-colour-accent) 10%, transparent);
  color: var(--cl-colour-accent);
  cursor: pointer;
  padding: 0.5rem;
  text-align: center;
  transition: background var(--transition);
}

.cl-int-cluster-merge-tile:hover {
  background: color-mix(in srgb, var(--cl-colour-accent) 20%, transparent);
}

.cl-int-cluster-merge-tile i { font-size: 1.4rem; }
.cl-int-cluster-merge-tile span { font-size: 0.8rem; font-weight: 700; }
.cl-int-cluster-merge-tile small { font-size: 0.64rem; opacity: 0.8; line-height: 1.2; }

.cl-int-cluster-not-tile {
  border-color: var(--cl-colour-inactive, #888);
  color: var(--cl-colour-inactive, #888);
  background: color-mix(in srgb, var(--cl-colour-inactive, #888) 8%, transparent);
}

.cl-int-cluster-not-tile:hover {
  background: color-mix(in srgb, var(--cl-colour-inactive, #888) 16%, transparent);
}

.cl-int-cluster-thinker {
  margin-left: auto;
}

.cl-int-cluster--auto-merging {
  outline: 2px solid color-mix(in srgb, var(--cl-colour-active) 55%, transparent);
  outline-offset: 2px;
}

.cl-int-cluster--dismissing {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cl-int-cluster--dismissing {
    transition: none;
  }
}

/* Cluster card tiles reuse .cl-int-tile; keep the qty blip always visible. */
.cl-int-tile--cluster .cl-int-tile-status--cluster { z-index: 2; }

/* Image Intake launch modal helpers (hint bar + native selects). */
.cl-ii-hintbar {
  padding: 0.5rem;
}

.cl-ii-hintbar--locked .cl-ii-hint-controls {
  opacity: 0.45;
  pointer-events: none;
}

.cl-ii-hint-lock-msg {
  margin: 0.35rem 0 0;
}

.cl-ii-hint-lock-msg[hidden] {
  display: none;
}

.cl-ii-hint-controls {
  margin-top: 0.5rem;
  align-items: flex-end;
}

.cl-ii-modal--edit [data-cl-ii-add-only],
.cl-ii-modal--add [data-cl-ii-edit-only] {
  display: none !important;
}

.cl-ii-hint-dials {
  margin: 0.15rem 0 0.2rem;
}

.cl-ii-hint-dials .cl-filter-dial-slots,
.cl-ii-hint-dials__slots {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.45rem;
  max-height: none;
  transition: none;
}

.cl-ii-hint-dials .cl-filter-dial {
  min-height: 2.65rem;
  letter-spacing: 0.03em;
}

.cl-ii-hint-dials .cl-filter-dial--disabled,
.cl-ii-hint-dials .cl-filter-dial:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

.cl-ii-hint-dials .cl-filter-dial-panel {
  margin-top: 0.45rem;
}

.cl-ii-add-panel {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.75rem 0.8rem 0.85rem;
  border-radius: var(--radius-lg, var(--radius));
  border: 1px solid color-mix(in srgb, var(--cl-text-gradient-via) 32%, var(--border-subtle));
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cl-text-gradient-via) 22%, #121018 78%) 0%,
    color-mix(in srgb, var(--bg-card, #16161c) 92%, #000 8%) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 8px 20px color-mix(in srgb, #000 22%, transparent);
}

.cl-ii-quality-field,
.cl-ii-file-field {
  position: relative;
  margin: 0;
}

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

.cl-ii-file-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.cl-ii-file-chosen {
  font-size: 0.82rem;
  color: color-mix(in srgb, #fff 62%, var(--text-muted) 38%);
}

/* Image Intake Identify — board layout (keep in git with Identify JS; do not drop on unrelated style.css deploys). */
.cl-ii-identify-board--fp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  width: 100%;
}
@media (min-width: 720px) {
  .cl-ii-identify-board--fp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
  }
}
.cl-int-identify-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr);
  gap: 0.75rem 0.85rem;
  align-items: start;
  margin: 0;
  min-width: 0;
}
.cl-int-identify-row--fp {
  grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr);
}
.cl-int-identify-row--fp-suggest {
  grid-template-columns: minmax(5.5rem, 7.5rem) minmax(5.5rem, 7.5rem);
  align-items: start;
}
.cl-int-identify-row--fp-board {
  grid-template-columns: minmax(4.75rem, 6rem) minmax(4.75rem, 6rem) auto;
  align-items: start;
}
.cl-int-fp-approve {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 7.5rem;
  min-width: 0;
}
.cl-int-fp-hero {
  max-width: none;
}
.cl-int-identify-row--fp-board .cl-int-fp-hero,
.cl-int-identify-row--fp-suggest .cl-int-fp-hero {
  width: 100%;
}
.cl-int-identify-row--fp-board > .cl-int-tile--cluster,
.cl-int-identify-row--fp-suggest > .cl-int-tile--cluster {
  width: 100%;
  max-width: none;
}
.cl-int-tile--fp-approve {
  cursor: pointer;
  outline: 2px solid color-mix(in srgb, #15803d 70%, transparent);
  outline-offset: -2px;
  width: 100%;
}
.cl-int-tile--fp-approve:hover,
.cl-int-tile--fp-approve:focus-visible {
  outline-color: #15803d;
  box-shadow: 0 0 0 2px color-mix(in srgb, #15803d 35%, transparent);
}
.cl-int-tile--fp-approve .cl-int-tile-img {
  pointer-events: none;
}
.cl-int-fp-approve__meta {
  margin: 0;
  line-height: 1.25;
  word-break: break-word;
}
@media (min-width: 1100px) {
  .cl-ii-identify-board--fp .cl-int-identify-row--fp-board {
    grid-template-columns: minmax(5.5rem, 7.5rem) minmax(5.5rem, 7.5rem) auto;
    gap: 0.75rem 1rem;
  }
}
@media (max-width: 640px) {
  .cl-int-identify-row,
  .cl-int-identify-row--fp {
    grid-template-columns: minmax(4.5rem, 5.75rem) minmax(0, 1fr);
    gap: 0.55rem 0.65rem;
  }
  .cl-int-identify-row--fp-suggest {
    grid-template-columns: minmax(4.5rem, 5.75rem) minmax(4.5rem, 5.75rem);
  }
  .cl-int-identify-row--fp-board {
    grid-template-columns: minmax(4.25rem, 5.25rem) minmax(4.25rem, 5.25rem) auto;
    gap: 0.45rem 0.55rem;
  }
  .cl-int-fp-approve {
    max-width: 5.75rem;
  }
  .cl-int-identify-row .cl-int-tile--cluster {
    max-width: 5.75rem;
  }
  .cl-int-identify-row--fp-board .cl-int-tile--cluster,
  .cl-int-identify-row--fp-suggest .cl-int-tile--cluster,
  .cl-int-identify-row--fp-board .cl-int-fp-approve,
  .cl-int-identify-row--fp-suggest .cl-int-fp-approve {
    max-width: none;
  }
  .cl-ii-identify-frame .cl-int-tiles--ready {
    grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  }
}
.cl-int-identify-empty-copy {
  display: block;
  margin-bottom: 0.65rem;
}
.cl-int-identify-empty-ctas {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cl-review-builder-col .cl-title-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}
.cl-ii-review-identify-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--cl-text, #0f172a);
  background: color-mix(in srgb, var(--bg-elevated, #fff) 70%, #94a3b8);
}
.cl-ii-review-identify-badge--fp {
  background: color-mix(in srgb, #15803d 18%, var(--bg-elevated, #fff));
  color: #166534;
}
.cl-ii-review-identify-badge--xi {
  background: color-mix(in srgb, #b45309 18%, var(--bg-elevated, #fff));
  color: #9a3412;
}
.cl-int-identify-row__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.15rem;
}
.cl-int-identify-row__title {
  font-weight: 650;
}
.cl-int-identify-row__meta-line,
.cl-int-identify-row__ok,
.cl-int-identify-row__err {
  font-size: 0.88rem;
}
.cl-int-identify-row__ok {
  color: var(--cl-colour-success, #15803d);
}
.cl-int-identify-row__err {
  color: #b91c1c;
}
button.cl-int-identify-row__jump {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.12em;
}
button.cl-int-identify-row__jump:hover,
button.cl-int-identify-row__jump:focus-visible {
  text-decoration-color: currentColor;
}
.cl-int-identify-row__hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.2rem;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.cl-int-identify-row__hints:hover {
  opacity: 0.9;
}
.cl-int-fp-cands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  max-width: 8.5rem;
  min-width: 0;
  align-content: start;
}
.cl-int-fp-cands__thumb {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--cl-border, rgba(0, 0, 0, 0.12));
  border-radius: 0.35rem;
  overflow: hidden;
  background: var(--bg-elevated, #fff);
  cursor: pointer;
  text-align: left;
}
.cl-int-fp-cands__media {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  width: 100%;
  overflow: hidden;
}
.cl-int-fp-cands__band {
  position: absolute;
  left: 0.15rem;
  top: 0.15rem;
  padding: 0.05rem 0.25rem;
  border-radius: 0.2rem;
  font-size: 0.55rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: #fff;
  background: #64748b;
  pointer-events: none;
}
.cl-int-fp-cands__band--strong {
  background: #15803d;
}
.cl-int-fp-cands__band--plausible {
  background: #b45309;
}
.cl-int-fp-cands__band--other {
  background: #475569;
}
.cl-int-fp-cands__thumb img,
.cl-int-fp-cands__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cl-int-fp-cands__placeholder {
  background: color-mix(in srgb, var(--bg-elevated, #fff) 70%, #94a3b8);
}
.cl-int-fp-cands__label {
  display: block;
  padding: 0.15rem 0.2rem;
  font-size: 0.58rem;
  line-height: 1.15;
  color: var(--cl-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-int-fp-cands .cl-btn {
  grid-column: 1 / -1;
}
.cl-int-fp-cands--empty {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--border-subtle, #cbd5e1);
  border-radius: var(--radius-md, 0.5rem);
  background: color-mix(in srgb, var(--bg-elevated, #fff) 88%, #94a3b8);
}
.cl-int-fp-cands--empty p {
  margin: 0;
}
.cl-int-tile--hint-edit {
  cursor: pointer;
}
.cl-int-tile--ready-flip {
  cursor: pointer;
  position: relative;
}
/* Fill the aspect-ratio tile so absolute .cl-int-tile-img has a real box
   (do not set front to position:relative — that collapses the image). */
.cl-int-tile--ready-flip .cl-flip-card,
.cl-int-tile--ready-flip .cl-flip-card__inner {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
}
.cl-int-tile--ready-flip .cl-flip-card__front,
.cl-int-tile--ready-flip .cl-flip-card__back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.cl-int-tile--ready-flip:hover .cl-flip-card__inner,
.cl-int-tile--ready-flip:focus-within .cl-flip-card__inner,
.cl-int-tile--ready-flip.is-flipped .cl-flip-card__inner {
  transform: rotateY(180deg);
}
.cl-int-tile--ready-flip .cl-flip-card__back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-elevated, #fff) 85%, #64748b);
}
.cl-int-tiles--ready {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.65rem;
}
.cl-int-identify-group-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.cl-ii-identify-frame .cl-int-cluster-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Sticky scopes dim action strips while async work runs. */
.cl-sticky-under-nav-scope.is-pipeline-busy .cl-action-strip {
  opacity: 0.92;
}

.cl-sticky-under-nav-scope.is-busy .cl-action-strip {
  pointer-events: none;
  opacity: 0.72;
  transition: opacity 0.18s ease;
}

/* L/C/R action strip: centre slot for step selects / shared tools. */
.cl-action-row--split:has(.cl-action-row__center) > .cl-action-row__left {
  flex: 0 1 auto;
}
.cl-action-row__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.cl-action-row__center .cl-select {
  min-width: min(12rem, 70vw);
  font-weight: 600;
}

/* Review: title + count sit in the Return / Reset row; tiny gap to the rail. */
.cl-main-container.cl-page-shell-viewport--rail.cl-ii-review-page {
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
  gap: 0;
}

.cl-ii-review-scope {
  gap: 0.28rem;
}

.cl-ii-review-page .cl-action-strip {
  margin: 0;
  flex: 0 0 auto;
}

.cl-ii-review-page .cl-action-row--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.cl-ii-review-page .cl-action-row__left,
.cl-ii-review-page .cl-action-row__right,
.cl-ii-review-page .cl-action-row__center {
  flex: none;
  min-width: 0;
}

.cl-ii-review-page .cl-action-row__left {
  justify-self: start;
}

.cl-ii-review-page .cl-action-row__right {
  justify-self: end;
  margin-left: 0;
}

.cl-ii-review-page .cl-action-row__center {
  justify-self: center;
}

.cl-ii-review-heading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  text-align: center;
  pointer-events: none;
}

.cl-ii-review-heading-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
}

.cl-ii-review-heading-count {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
}

@media (max-width: 520px) {
  .cl-ii-review-heading-title {
    font-size: 0.92rem;
  }
}

/* Progress / status copy with an inline 3-dot thinker. */
.cl-status-line--with-thinker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  min-height: 1.6rem;
}

.cl-status-line--with-thinker [data-cl-ii-progress-text],
.cl-status-line--with-thinker [data-review-evidence-banner-text] {
  flex: 1 1 8rem;
  min-width: 0;
}

/* Add-by-image intent step (Add / Replace / Cancel) ? shown only when an
   active session already has images, so we never silently append/clear. */
.cl-ii-intent {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* The display:flex above would otherwise beat the [hidden] attribute's
   display:none ? keep hidden winning so the intent step truly collapses. */
.cl-ii-intent[hidden] {
  display: none;
}

.cl-select {
  appearance: auto;
}

/* ===================================================================== */
/* CardLarrikin Template System ? cl-accordion (global collapsible tree)  */
/* Reusable multi-folder accordion. Each folder head is a button showing  */
/* the current value (left) and the field label (right). Single-open by   */
/* default via cl_accordion.js toggling .is-open. Used first by the Image */
/* Intake Candidate Builder identity tree (Game/Language/Set/Card/Variant).*/
/* ===================================================================== */
.cl-accordion {
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

/* Fill-height variant: open folder may grow into spare work-area space, but
   MUST NOT shrink below its form content. Nested panel scrolling is disabled —
   the surrounding work scroller (.cl-rail-work-scroll / page work pane) scrolls.
   Used by Image Intake / Quick Fix Candidate Builder; base accordion stays auto-height. */
.cl-accordion--fill {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.cl-accordion-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  overflow: hidden;
}

.cl-accordion-item.is-open {
  border-color: color-mix(in srgb, var(--cl-mode-tone, var(--cl-colour-accent)) 32%, var(--border-subtle));
}

.cl-accordion--fill > .cl-accordion-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cl-accordion--fill > .cl-accordion-item.is-open {
  /* Grow into leftover space when tall; never flex-shrink below content. */
  flex: 1 0 auto;
  min-height: min-content;
  overflow: visible;
  transition: flex-grow 0.28s ease;
}

.cl-accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background var(--transition);
}

.cl-accordion-item--disabled .cl-accordion-head {
  cursor: not-allowed;
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
}

.cl-accordion-item--disabled .cl-accordion-value,
.cl-accordion-item--disabled .cl-accordion-label,
.cl-accordion-item--disabled .cl-accordion-chevron {
  color: var(--text-muted);
}

.cl-accordion-head:hover {
  background: color-mix(in srgb, var(--cl-mode-tone, var(--cl-colour-accent)) 10%, transparent);
}

.cl-accordion-item--disabled .cl-accordion-head:hover {
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
}

.cl-accordion-item.is-open > .cl-accordion-head {
  background: color-mix(in srgb, var(--cl-mode-tone, var(--cl-colour-accent)) 14%, var(--bg-elevated));
}

.cl-accordion-chevron {
  flex: 0 0 auto;
  transition: transform var(--transition);
  color: var(--cl-colour-highlight);
}

.cl-accordion-item.is-open > .cl-accordion-head .cl-accordion-chevron {
  transform: rotate(90deg);
}

.cl-accordion-value {
  flex: 1 1 auto;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.cl-accordion-value--empty {
  color: var(--text-muted);
  font-weight: 500;
}

.cl-accordion-label {
  flex: 0 0 auto;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Smooth grow/slide open-close (grid-rows 0fr->1fr) without jumpy reflow. */
.cl-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
  border-top: 1px solid transparent;
  min-height: 0;
}

.cl-accordion-item.is-open > .cl-accordion-panel {
  grid-template-rows: 1fr;
  border-top-color: color-mix(in srgb, var(--cl-mode-tone, var(--cl-colour-accent)) 22%, var(--border-subtle));
}

.cl-accordion--fill > .cl-accordion-item.is-open > .cl-accordion-panel {
  flex: 1 0 auto;
  min-height: min-content;
  /* Never resolve shorter than the form; may still grow into spare height. */
  grid-template-rows: minmax(min-content, 1fr);
}

.cl-accordion-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.cl-accordion-item.is-open > .cl-accordion-panel > .cl-accordion-panel-inner {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem 0.85rem;
}

/* Fill folders: no nested scroll trap — content dictates height; work area scrolls. */
.cl-accordion--fill > .cl-accordion-item.is-open > .cl-accordion-panel > .cl-accordion-panel-inner {
  overflow: visible;
  min-height: min-content;
}

/* Rail work scroller: --fill frames must be allowed to grow with accordion
   content (height:100% alone trapped forms in a short viewport). */
.cl-rail-work-scroll > .cl-container-frame--fill {
  flex: 1 0 auto;
  height: auto;
  min-height: 100%;
}

/* Candidate Builder review work-area layout: image (1/3) + builder (2/3). */
.cl-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.1rem;
  align-items: stretch;
  /* Grow with accordion content; do not shrink-trap forms on short viewports. */
  min-height: min-content;
  flex: 1 1 auto;
}

@media (max-width: 900px) {
  .cl-review-grid {
    grid-template-columns: 1fr;
  }
}

/* Left image column — thumbnail plus a permanent collector-corner zoom. */
.cl-review-image-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.cl-review-image-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: 70%;
  max-width: 70%;
}

.cl-review-image-col .cl-card-image--compact,
.cl-review-image-col .cl-review-image-wrap {
  align-self: stretch;
}

/* Wrap owns the compact width so the loupe can sit on a full-size thumbnail. */
.cl-review-image-col .cl-review-image-wrap {
  max-width: 100%;
  width: 100%;
  overflow: visible;
}

.cl-review-image-col .cl-review-image-wrap .cl-card-image--compact {
  max-width: 100%;
  display: block;
  margin-inline: 0;
}

/* Permanent collector zoom: fixed strip; crop size only changes magnification. */
.cl-review-image-zoomstrip {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  aspect-ratio: 50 / 21;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 0.4rem;
  background: var(--bg-elevated);
  cursor: pointer;
}

.cl-review-image-zoomstrip__pane {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  overflow: hidden;
}

.cl-review-image-zoomstrip.is-split .cl-review-image-zoomstrip__pane {
  flex-basis: 50%;
}

.cl-review-image-zoomstrip.is-split .cl-review-image-zoomstrip__pane + .cl-review-image-zoomstrip__pane {
  border-left: 1px solid var(--border-subtle);
}

.cl-review-image-zoomstrip__pane img {
  position: absolute;
  left: 0;
  top: 0;
  width: 300%;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
}

.cl-review-image-zoomstrip__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cl-colour-accent) 48%, transparent);
  color: #fff;
  font-size: 1.35rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.cl-review-image-zoomstrip:hover .cl-review-image-zoomstrip__overlay,
.cl-review-image-zoomstrip:focus-visible .cl-review-image-zoomstrip__overlay {
  opacity: 1;
}

.cl-review-zoom-mode-row {
  margin-bottom: 0.7rem;
}

.cl-review-zoom-stage {
  position: relative;
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  line-height: 0;
  user-select: none;
  touch-action: none;
}

.cl-review-zoom-stage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.35rem;
}

.cl-review-zoom-boxes {
  position: absolute;
  inset: 0;
}

.cl-review-zoom-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--cl-colour-highlight);
  background: color-mix(in srgb, var(--cl-colour-accent) 28%, transparent);
  cursor: move;
}

.cl-review-zoom-box__handle {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--cl-colour-highlight);
  border: 1px solid var(--bg-elevated);
  box-sizing: border-box;
}

.cl-review-zoom-box__handle[data-handle="nw"] { left: -0.28rem; top: -0.28rem; cursor: nwse-resize; }
.cl-review-zoom-box__handle[data-handle="n"] { left: 50%; top: -0.28rem; transform: translateX(-50%); cursor: ns-resize; }
.cl-review-zoom-box__handle[data-handle="ne"] { right: -0.28rem; top: -0.28rem; cursor: nesw-resize; }
.cl-review-zoom-box__handle[data-handle="e"] { right: -0.28rem; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.cl-review-zoom-box__handle[data-handle="se"] { right: -0.28rem; bottom: -0.28rem; cursor: nwse-resize; }
.cl-review-zoom-box__handle[data-handle="s"] { left: 50%; bottom: -0.28rem; transform: translateX(-50%); cursor: ns-resize; }
.cl-review-zoom-box__handle[data-handle="sw"] { left: -0.28rem; bottom: -0.28rem; cursor: nesw-resize; }
.cl-review-zoom-box__handle[data-handle="w"] { left: -0.28rem; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

@media (max-width: 900px) {
  .cl-review-image-stack {
    width: 85%;
    max-width: 85%;
  }
}

/* Right builder column ? title + actions pinned, accordion sizes to content. */
.cl-review-builder-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  min-height: min-content;
}

.cl-review-builder-col .cl-title-container {
  margin: 0;
}

/* Candidate title sits below page-title scale (H3/subtitle). */
.cl-review-candidate-title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
}

.cl-ii-review-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.cl-ii-review-hints {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}

.cl-ii-review-hints--empty {
  min-height: 0;
}

.cl-ii-review-hints-label {
  font-size: 0.82rem;
  color: var(--text-muted, #8a85a0);
  white-space: nowrap;
}

.cl-ii-review-hint-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.cl-ii-review-hint-chip {
  min-height: 1.55rem;
  padding: 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  cursor: default;
}

.cl-ii-review-hint-chip--clickable {
  pointer-events: auto;
  cursor: pointer;
}

.cl-ii-review-hint-chip--muted {
  border-color: color-mix(in srgb, var(--text-muted) 35%, var(--border-subtle));
  color: color-mix(in srgb, #fff 72%, var(--text-muted) 28%);
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--text-muted) 12%);
}

.cl-ii-review-hint-chip--match {
  border-color: color-mix(in srgb, var(--success) 55%, var(--border-subtle));
  color: color-mix(in srgb, #fff 88%, var(--success) 12%);
  background: color-mix(in srgb, var(--bg-elevated) 62%, var(--success) 38%);
}

.cl-ii-review-hint-chip--note {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border-subtle));
  color: color-mix(in srgb, #fff 82%, var(--warning) 18%);
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--warning) 30%);
}

.cl-review-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.cl-review-suggestions:empty {
  display: none;
}

.cl-review-suggest-lang {
  font-style: italic;
  font-weight: 400;
  opacity: 0.72;
  margin-left: 0.15em;
}

.cl-review-suggestions-label {
  width: 100%;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8a85a0);
  margin-top: 0.35rem;
}

/* Highlight a linked partner suggestion (set code<->name, card name<->number). */
.cl-btn--suggest-linked {
  outline: 2px solid var(--cl-colour-highlight, #ff8103);
  outline-offset: 1px;
}

.cl-review-field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: start;
  overflow: visible;
}

.cl-review-field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.cl-review-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.cl-review-reveal.is-open {
  grid-template-rows: 1fr;
}

.cl-review-reveal-inner {
  overflow: hidden;
  min-height: 0;
}

.cl-review-reveal.is-open > .cl-review-reveal-inner {
  overflow: visible;
  padding: 0.55rem 0 0;
}

.cl-review-field > .cl-accordion-label {
  color: var(--text-muted, #8a85a0);
}

/* Input line = the input plus an optional trailing control (the confirm tick)
   sitting to its right, so the tick always confirms the folder's completed row. */
.cl-review-input-line {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cl-review-input-line:focus-within {
  z-index: 6;
}

.cl-review-typeahead {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 0.18rem 0;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 32%, var(--border-subtle));
  border-radius: 0.5rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  max-height: min(40vh, 16rem);
  overflow-y: auto;
}

.cl-review-typeahead[hidden] { display: none; }

.cl-review-typeahead-row {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--text);
  border-left: 3px solid transparent;
}

.cl-review-typeahead-row:hover,
.cl-review-typeahead-row--active {
  background: color-mix(in srgb, var(--bg-card) 70%, var(--cl-colour-active) 30%);
  border-left-color: var(--cl-colour-active);
}

.cl-review-typeahead-label {
  font-weight: 600;
}

.cl-review-typeahead-secondary {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.cl-review-input-line > .cl-input {
  flex: 1 1 auto;
  min-width: 0;
}

.cl-review-input-line > .cl-btn.cl-btn--quiet,
.cl-review-input-line > .cl-controls-button {
  flex: 0 0 auto;
}

/* Baseline ("No special?") sits below the new-variant fields as an alternative. */
.cl-review-baseline-row {
  margin-top: 0.6rem;
}

/* The Review card image opens the global preview modal on click. */
.cl-review-image[data-cl-image-preview] {
  cursor: zoom-in;
}

/* Hover loupe: circular 9x slice of the thumbnail (desktop pointer only). */
.cl-review-image-wrap,
[data-cl-image-loupe] {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-cl-image-loupe]:hover,
  [data-cl-image-loupe]:hover .cl-review-image[data-cl-image-preview] {
    cursor: none;
  }
}

.cl-image-loupe-lens {
  position: absolute;
  width: 12.95rem;
  height: 12.95rem;
  border-radius: 50%;
  border: 2px solid var(--cl-colour-highlight);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bg-elevated) 70%, transparent),
    0 0.55rem 1.2rem color-mix(in srgb, #000 45%, transparent);
  pointer-events: none;
  z-index: 5;
  display: none;
  background-repeat: no-repeat;
  background-color: var(--bg-elevated);
}

.cl-image-loupe-lens.is-on {
  display: block;
}

@media (hover: none), (pointer: coarse) {
  .cl-image-loupe-lens {
    display: none !important;
  }
}

/* A split column groups one field + its own suggestion buttons underneath. */
.cl-review-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}

.cl-review-split-col {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

@media (max-width: 620px) {
  .cl-review-split {
    grid-template-columns: 1fr;
  }

  .cl-review-field-row {
    grid-template-columns: 1fr;
  }
}

/* Review rail: matches the Workspace reel (centred, scrolling, gradient tiles). */
.cl-rail-tile-done-badge {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  color: var(--success, #22c55e);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.cl-rail-tile-done-badge--needs-db {
  color: var(--warning, #eab308);
}

/* Drop/remove fade+slide animation on the review reel. */
.cl-rail-tile--dropping {
  transition: opacity 0.26s ease, transform 0.26s ease;
  opacity: 0;
  transform: translateX(-18px) scale(0.96);
}

/* ---------------------------------------------------------------------------
   Intake Summary card (Image Intake Review ? Finalisation Slice 0).
   The summary fills the rail work area and scrolls internally; the readiness
   strip + stats reuse a small reusable cl-readiness block.
   --------------------------------------------------------------------------- */
.cl-ii-summary {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cl-ii-summary-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 0.25rem;
}

/* Workspace mode bulk tables (Pricing first consumer). */
.cl-ws-mode-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.cl-ws-mode-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.cl-ws-pricing-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
}

.cl-ws-pricing-row--active td {
  background: color-mix(in srgb, var(--bg-elevated) 82%, var(--cl-colour-active) 18%);
}

.cl-ws-pricing-actions {
  white-space: nowrap;
}
.cl-ws-pricing-actions .cl-btn { margin-right: 0.25rem; }
.cl-ws-pricing-actions .cl-btn:last-child { margin-right: 0; }

/* Workspace number columns stay compact so G/PC + save fit without sideways scroll.
   Language cells stay nowrap; do not cap the header or "Language" clips. */
.cl-ws-pricing-table td.cl-ws-col--lang,
.cl-ws-stock-table td.cl-ws-col--lang,
.cl-ws-images-table td.cl-ws-col--lang,
.cl-ws-print-table td.cl-ws-col--lang {
  white-space: nowrap;
}

.cl-ws-pricing-table .cl-ws-col--money,
.cl-ws-pricing-table th.cl-ws-col--money {
  width: 5rem;
  max-width: 5.25rem;
  white-space: nowrap;
}

.cl-ws-pricing-table .cl-ws-col--money .cl-input--dense,
.cl-ws-pricing-table .cl-ws-col--money .cl-input.cl-input--dense {
  min-width: 0;
  max-width: 5rem;
  width: 5rem;
}

.cl-ws-pricing-table .cl-ws-col--icon {
  width: 2.75rem;
  text-align: center;
  white-space: nowrap;
}

.cl-ws-stock-table .cl-ws-col--qty,
.cl-ws-stock-table th.cl-ws-col--qty {
  width: 4.75rem;
  max-width: 5rem;
  white-space: nowrap;
}

.cl-ws-stock-table .cl-ws-col--qty .cl-input--dense,
.cl-ws-stock-table .cl-ws-col--qty .cl-input.cl-input--dense {
  min-width: 0;
  max-width: 4.75rem;
  width: 4.75rem;
}

.cl-ws-stock-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
}

.cl-ws-stock-row--active td {
  background: color-mix(in srgb, var(--bg-elevated) 82%, var(--cl-colour-active) 18%);
}

.cl-mode-action-row--stock {
  align-items: flex-end;
}

/* Hub Stock: Type/Tags/Stock/Cost collapse to summary chips until tapped. */
.cl-hub-stock-filter {
  display: inline-flex;
  align-items: flex-end;
  flex: 0 0 auto;
}

.cl-hub-stock-filter__toggle {
  cursor: pointer;
  border: 0;
  font: inherit;
  color: var(--text);
  white-space: nowrap;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-hub-stock-filter__toggle.is-active {
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-active, #6ea8fe) 30%);
}

.cl-hub-stock-filter.is-open .cl-hub-stock-filter__toggle {
  display: none;
}

.cl-hub-stock-filter__panel[hidden] {
  display: none !important;
}

.cl-hub-stock-filter.is-open .cl-hub-stock-filter__panel {
  display: inline-flex;
  align-items: flex-end;
}

.cl-hub-stock-status-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.cl-hub-stock-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  border: 0;
  font: inherit;
  color: var(--text);
  opacity: 0.72;
}

.cl-hub-stock-status-btn.is-on {
  opacity: 1;
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-active, #6ea8fe) 30%);
}

.cl-hub-stock-status-btn [data-cl-hub-stock-status-eye] {
  font-size: 0.85em;
  opacity: 0.9;
}

.cl-mode-action-row--sales {
  align-items: flex-end;
  flex-wrap: wrap;
}

.cl-mode-action-row--sales .cl-hub-sales-hide-others {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: center;
  margin-top: 0.85rem;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--text);
}

.cl-mode-action-row--sales [data-cl-hub-sales-csv-btn] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 7.5rem;
  justify-content: center;
}

.cl-mode-action-row--sales .cl-filter-drop .cl-filter-drop-control {
  min-width: 8.5rem;
}

.cl-hub-sales-total {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cl-hub-sales-total {
    margin-left: 0;
    width: 100%;
  }
}

.cl-hub-home-settlement {
  /* Desktop pins to hero bottom via margin-top:auto inside min-width 981. */
  margin-top: 0;
  padding-top: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
}

.cl-hub-home-settlement > [data-cl-soft-loader-content],
.cl-hub-home-settlement .cl-soft-loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  width: 100%;
}

.cl-hub-home-settlement .cl-status-line {
  margin: 0;
  text-align: center;
}

.cl-hub-home-settlement .cl-hub-home-week__actions {
  margin-top: 0.35rem;
  justify-content: center;
}

.cl-hub-home-settlement__notes {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  max-width: 18rem;
}

.cl-hub-soft.cl-soft-loader {
  position: relative;
  min-height: 12rem;
}

.cl-hub-soft.cl-soft-loader--busy {
  min-height: 16rem;
}

.cl-hub-sales-soft.cl-soft-loader,
.cl-hub-stock-soft.cl-soft-loader {
  min-height: 10rem;
}

.cl-hub-sales-soft.cl-soft-loader--busy,
.cl-hub-stock-soft.cl-soft-loader--busy {
  min-height: 14rem;
}

.cl-mode-action-row--sales[aria-busy="true"] {
  opacity: 0.85;
  pointer-events: none;
}

.cl-ws-stock-owner-control {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  flex-shrink: 0;
}

.cl-ws-stock-owner-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cl-ws-stock-owner-select {
  min-width: 9rem;
}

.cl-ws-stock-actions {
  white-space: nowrap;
}

.cl-ws-stock-vendor-actions {
  white-space: nowrap;
}

.cl-ws-images-cell {
  width: 4.5rem;
  text-align: center;
}

.cl-ws-images-thumb {
  display: inline-flex;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.cl-ws-images-thumb img {
  width: 2.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: var(--cl-radius-sm, 4px);
}

.cl-ws-images-empty {
  color: var(--cl-muted-text, #888);
}

.cl-ws-images-row--active td {
  background: color-mix(in srgb, var(--cl-accent, #5b8def) 12%, transparent);
}

.cl-ws-images-actions {
  white-space: nowrap;
}

.cl-ws-images-cell--count {
  width: 3rem;
}

.cl-ws-images-gallery-btn {
  min-width: 2rem;
  padding-inline: 0.35rem;
}

.cl-ws-images-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.75rem;
}

.cl-ws-images-gallery-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cl-ws-images-gallery-heading {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.cl-ws-images-gallery-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.cl-ws-images-gallery-role {
  font-size: 0.75rem;
  color: var(--cl-muted-text, #888);
}

.cl-ws-images-gallery-tile--main .cl-ws-images-gallery-role {
  color: var(--cl-accent, #5b8def);
}

.cl-ws-print-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
}

.cl-ws-print-row--active td {
  background: color-mix(in srgb, var(--bg-elevated) 82%, var(--cl-colour-active) 18%);
}

.cl-ws-print-cell {
  text-align: center;
  white-space: nowrap;
}

.cl-ws-print-qty-btn {
  min-width: 2.25rem;
}

.cl-ws-print-custom-btn {
  min-width: 2.25rem;
}

.cl-ws-print-custom-qty-row {
  align-items: center;
}

.cl-ws-print-custom-qty-input {
  width: 5.5rem;
  flex: 0 0 5.5rem;
}

.cl-ws-print-custom-or {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.15rem;
}

.cl-ws-print-custom-source {
  flex: 1 1 10rem;
  min-width: 10rem;
}

.cl-ii-summary-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cl-section-title {
  font-size: 1rem;
  margin: 0;
}

.cl-ii-readiness {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Reusable stat list (label/value pairs). */
.cl-readiness-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
}

.cl-readiness-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cl-readiness-stat dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8a85a0);
}

.cl-readiness-stat dd {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Reusable progress/readiness strip. */
.cl-readiness {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cl-readiness-bar {
  height: 12px;
  background: var(--bg-elevated, #2a2740);
  border-radius: 6px;
  overflow: hidden;
}

.cl-readiness-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--accent, #ff8103);
  transition: width 0.4s ease;
}

.cl-readiness-label {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted, #8a85a0);
}

/* Shopify Link Phase 1 read-only status panels */
.cl-shopify-link-phase1-grid {
  margin-top: 0.75rem;
}

.cl-shopify-link-phase1-panel--wide {
  grid-column: 1 / -1;
}

.cl-shopify-link-phase1-mf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  font-size: 0.88rem;
}

.cl-shopify-link-phase1-mf-row--missing {
  color: var(--text-muted, #8a85a0);
}

.cl-shopify-link-phase1-preview-note {
  margin-top: 0.75rem;
}

.cl-shopify-link-dry-run-panel {
  margin-top: 0.75rem;
}

[data-cl-shopify-dry-run-controls] {
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.cl-shopify-link-dry-run-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 14rem;
}

.cl-shopify-link-dry-run-input {
  min-width: 16rem;
}

.cl-shopify-link-dry-run-block {
  margin-bottom: 0.75rem;
}

.cl-shopify-link-dry-run-block h5 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.cl-shopify-link-dry-run-mf-row {
  margin: 0.15rem 0;
  font-size: 0.9rem;
}

.cl-shopify-link-dry-run-mf-row--deferred {
  opacity: 0.85;
}

.cl-shopify-ops-shared-note {
  margin: 0.5rem 0 0.75rem;
}

.cl-shopify-ops-home-grid {
  margin-bottom: 1rem;
}

.cl-shopify-ops-flow-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.cl-shopify-ops-detail-pre {
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60vh;
  overflow: auto;
  margin: 0;
}

.cl-shopify-ops-schedule-panel {
  margin-top: 0.5rem;
}

/* Operations portal ? reusable dashboard blocks (global). */
.cl-ops-portal-banner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(124, 58, 237, 0.25);
  background: linear-gradient(135deg, rgba(94, 23, 162, 0.12), rgba(26, 22, 37, 0.6));
}

.cl-ops-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

/* Ops task tiles ? actionable cards above status KPIs (global). */
.cl-ops-task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.cl-ops-task-tile {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0;
  padding: 0.9rem 1rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cl-colour-highlight, #7c3aed) 14%, var(--bg-elevated, #1a1625));
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}

.cl-ops-task-tile:hover,
.cl-ops-task-tile:focus-visible {
  border-color: var(--cl-colour-highlight, #7c3aed);
  transform: translateY(-1px);
  outline: none;
}

.cl-ops-task-tile__icon {
  font-size: 1.05rem;
  color: var(--cl-colour-highlight, #a78bfa);
}

.cl-ops-task-tile__label {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.cl-ops-task-tile__hint {
  font-size: 0.75rem;
  color: var(--text-muted, #8a85a0);
}

.cl-ops-task-tile:disabled,
.cl-ops-task-tile[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Order Pack List modal ? image-first, framed to modal-root (navbar ? footer).
   Never use 100dvh here: .cl-modal-root is already inset by navbar/footer. */
.cl-pack-list-modal-root {
  /* Desktop: centred card capped to the shell band. Mobile overrides stretch. */
  align-items: center;
  justify-content: center;
  padding: 0.55rem;
}

.cl-pack-list-modal-root .cl-pack-list-modal {
  width: min(100%, 28rem);
  height: min(100%, 44rem);
  max-height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cl-pack-list-modal-root .cl-pack-list-modal.cl-soft-loader {
  position: relative;
}

.cl-pack-list-modal__top {
  flex: 0 0 auto;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
}

.cl-pack-list-modal__refresh {
  flex-shrink: 0;
}

.cl-pack-list-modal__refresh.is-busy,
.cl-pack-list-modal__refresh:disabled {
  opacity: 0.65;
  cursor: wait;
}

.cl-pack-list-modal__order-field {
  flex: 0 0 auto;
  width: 6.75rem;
  max-width: 38%;
  min-width: 5.25rem;
  margin: 0;
}

.cl-pack-list-modal__order-input {
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.35rem;
}

.cl-pack-list-modal__customer {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted, #8a85a0);
}

.cl-pack-list-modal__customer[hidden] {
  display: none !important;
}

.cl-pack-list-modal__work {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.55rem 0.55rem;
}

.cl-pack-list-modal__error {
  flex-shrink: 0;
  margin: 0 0 0.3rem;
  text-align: center;
  font-size: 0.8rem;
}

.cl-pack-list-idle,
.cl-pack-list-slide {
  flex: 1 1 auto;
  min-height: 0;
}

.cl-pack-list-idle[hidden],
.cl-pack-list-slide[hidden] {
  display: none !important;
}

.cl-pack-list-slide__img-fallback[hidden],
.cl-pack-list-slide__qty[hidden] {
  display: none !important;
}

.cl-pack-list-slide {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  text-align: center;
  overflow: hidden;
}

.cl-pack-list-slide__media {
  position: relative;
  /* Image claims leftover height after meta; shrinks on short devices. */
  flex: 1 1 auto;
  min-height: 8rem;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated, #1a1625);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  user-select: none;
}

.cl-pack-list-slide__img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.cl-pack-list-slide__img-fallback {
  color: var(--text-muted, #8a85a0);
  font-size: 2.25rem;
  opacity: 0.55;
  pointer-events: none;
}

.cl-pack-list-slide__meta {
  /* Keep details visible above the footer ? never let the image push this out. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  max-height: 5.75rem;
  overflow: hidden;
  padding: 0.1rem 0.15rem 0.15rem;
}

.cl-pack-list-slide__progress {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-muted, #8a85a0);
}

.cl-pack-list-slide__title {
  margin: 0;
  width: 100%;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cl-pack-list-slide__variant,
.cl-pack-list-slide__ids {
  margin: 0;
  width: 100%;
  font-size: 0.76rem;
  color: var(--text-muted, #8a85a0);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-pack-list-slide__ids {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

.cl-pack-list-slide__ids > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-pack-list-fab {
  position: absolute;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--surface-raised, #1c1830) 92%, transparent);
  color: var(--text-muted, #8a85a0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cl-pack-list-fab:hover,
.cl-pack-list-fab:focus-visible {
  outline: none;
  color: var(--text-primary, var(--text));
  border-color: rgba(255, 255, 255, 0.22);
  background: color-mix(in srgb, var(--surface-raised, #1c1830) 98%, #fff 4%);
}

.cl-pack-list-fab[hidden] {
  display: none !important;
}

.cl-pack-list-fab--prev {
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.cl-pack-list-fab--next {
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.cl-pack-list-fab--catalogue {
  top: 0.4rem;
  right: 0.4rem;
}

.cl-pack-list-slide__qty {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0.45rem;
  transform: translateX(-50%);
  min-width: 2.85rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--surface-raised, #1c1830) 92%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 640px) {
  .cl-pack-list-modal-root {
    /* Edge-to-edge inside the navbar?footer band (root already insets shell). */
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  .cl-pack-list-modal-root .cl-pack-list-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .cl-pack-list-modal__order-field {
    width: 6.1rem;
    max-width: 34%;
  }

  .cl-pack-list-modal__work {
    padding: 0.35rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  }

  .cl-pack-list-slide__meta {
    max-height: 5.25rem;
  }

  .cl-pack-list-slide__media {
    min-height: 6.5rem;
  }
}

/* Short shells (small phones / landscape): shrink chrome, keep meta in-frame. */
@media (max-height: 700px) {
  .cl-pack-list-modal__top {
    padding: 0.4rem 0.55rem;
  }

  .cl-pack-list-modal__work {
    padding-top: 0.3rem;
    padding-bottom: 0.35rem;
  }

  .cl-pack-list-slide {
    gap: 0.22rem;
  }

  .cl-pack-list-slide__title {
    -webkit-line-clamp: 1;
    font-size: 0.86rem;
  }

  .cl-pack-list-slide__meta {
    max-height: 4.35rem;
    gap: 0.04rem;
  }

  .cl-pack-list-slide__media {
    min-height: 5.5rem;
  }

  .cl-pack-list-fab {
    width: 2.2rem;
    height: 2.2rem;
  }

  .cl-pack-list-slide__qty {
    font-size: 1rem;
    padding: 0.22rem 0.5rem;
    bottom: 0.35rem;
  }
}

@media (max-height: 560px) {
  .cl-pack-list-slide__variant {
    display: none;
  }

  .cl-pack-list-slide__meta {
    max-height: 3.6rem;
  }

  .cl-pack-list-slide__media {
    min-height: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-ops-task-tile:hover,
  .cl-ops-task-tile:focus-visible {
    transform: none;
  }
}

.cl-ops-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg);
  background: var(--bg-elevated, #1a1625);
  transition: border-color var(--transition), transform var(--transition);
}

.cl-ops-stat-card:hover {
  border-color: var(--cl-mode-tone, var(--accent-dim));
  transform: translateY(-1px);
}

.cl-ops-stat-card__icon { font-size: 0.85rem; color: var(--accent-dim, #a78bfa); }
.cl-ops-stat-card__value { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.cl-ops-stat-card__label { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #8a85a0); }
.cl-ops-stat-card__hint { margin: 0; font-size: 0.75rem; color: var(--text-muted, #8a85a0); }
.cl-ops-stat-card--tone-success { border-color: rgba(34, 197, 94, 0.35); }
.cl-ops-stat-card--tone-warning { border-color: rgba(251, 191, 36, 0.35); }

.cl-ops-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.cl-ops-flow-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--bg-card, #15121f);
}

.cl-ops-flow-card__title { margin: 0; font-size: 0.95rem; font-weight: 600; }
.cl-ops-flow-card__body { margin: 0; font-size: 0.82rem; color: var(--text-muted, #8a85a0); }

.cl-ops-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.cl-ops-badge--queued { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.35); }
.cl-ops-badge--held { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); }
.cl-ops-badge--blocked { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); }
.cl-ops-badge--succeeded { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); }
.cl-ops-badge--on { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); }
.cl-ops-badge--off { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.35); }

.cl-ops-kpi-strip { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.65rem; }
.cl-ops-placeholder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.65rem; }
.cl-ops-placeholder-tile {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  background: rgba(21, 18, 31, 0.5);
  opacity: 0.85;
}

.cl-ops-brain-banner { margin-bottom: 0.65rem; }
.cl-ops-detail-pre { font-size: 0.75rem; white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow: auto; margin: 0; }

.cl-ops-gate-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

/* -----------------------------------------------------------------------
   cl-fade-in ? reusable subtle entry animation (respects reduced motion).
   ----------------------------------------------------------------------- */
.cl-fade-in {
  animation: cl-fade-in 0.28s ease-out both;
}

@keyframes cl-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-fade-in { animation: none; }
  .cl-ops-stat-card:hover { transform: none; }
}

/* -----------------------------------------------------------------------
   cl-empty-state ? reusable empty content panel (tables, lists, tabs).
   ----------------------------------------------------------------------- */
.cl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.5rem 1rem;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px dashed color-mix(in srgb, var(--border-subtle) 80%, var(--text-muted) 20%);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.cl-empty-state__icon {
  font-size: 1.35rem;
  color: var(--accent-dim, var(--cl-colour-accent));
  opacity: 0.75;
}

.cl-empty-state__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.cl-empty-state__copy {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 22rem;
}

.cl-empty-state--compact {
  padding: 0.85rem 0.65rem;
}

.cl-empty-state--error {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 35%, transparent);
  background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--bg-elevated));
}

/* -----------------------------------------------------------------------
   cl-loading-inline ? reusable inline loading row / strip.
   ----------------------------------------------------------------------- */
.cl-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.cl-loading-inline__spinner {
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
  border-top-color: var(--accent-dim, var(--cl-colour-accent));
  border-radius: 50%;
  animation: cl-loading-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cl-loading-inline__spinner { animation: none; border-top-color: var(--text-muted); }
}

.cl-btn.cl-btn--busy,
.cl-btn.cl-btn--busy:disabled,
a.cl-btn.cl-btn--busy {
  opacity: 0.85;
  pointer-events: none;
  cursor: wait;
  justify-content: center;
}
.cl-btn.cl-btn--busy .cl-inline-thinker,
a.cl-btn.cl-btn--busy .cl-inline-thinker {
  margin: 0 auto;
}

/* Prepare Merge/Cluster: lock with overlay thinker; label stays faintly visible. */
.cl-btn.is-fp-locked {
  position: relative;
  pointer-events: none;
  cursor: wait;
}
.cl-btn.is-fp-locked > *:not(.cl-ii-fp-lock-thinker) {
  opacity: 0.32;
}
.cl-btn.is-fp-locked .cl-ii-fp-lock-thinker {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.cl-gate-toggle-panel {
  margin-bottom: 0.75rem;
}

.cl-gate-toggle-panel .cl-shopify-gate-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.35rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-gate-toggle-panel__category {
  margin-bottom: 0.65rem;
}

.cl-gate-toggle-panel__category-title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cl-sales-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.cl-sales-ops-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.cl-sales-ops-card__status {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cl-ops-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.55rem 0 0.75rem;
}

[data-cl-sales-filter][aria-pressed="true"] {
  border-color: var(--accent-primary, var(--cl-accent));
  box-shadow: 0 0 0 1px var(--accent-primary, var(--cl-accent));
}

.cl-sales-line--needs-review td {
  background: color-mix(in srgb, var(--warning, #c9a227) 12%, transparent);
}

.cl-scheduled-queue-bucket-row td {
  padding-top: 0.65rem;
  padding-bottom: 0.25rem;
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--cl-colour-accent) 12%);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.cl-scheduled-queue-bucket-row:first-child td {
  padding-top: 0.35rem;
}

/* 100% ready state ? the panel becomes an oversized call to action. */
.cl-ii-ready-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0 0.25rem;
}

.cl-ii-ready-headline {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--success, #22c55e);
}

.cl-ii-ready-btn {
  font-size: 1.05rem;
  padding: 0.85rem 1.6rem;
}

/* -----------------------------------------------------------------------
   Settings page ? layout hooks via data-cl-* (SU-3.10).
   Visual styling uses global cl-* blocks only.
   ----------------------------------------------------------------------- */
[data-cl-page="settings"] .cl-tab-work-area {
  flex: 1 1 auto;
  min-height: 0;
}

[data-cl-page="settings"] [data-cl-settings-action-group] {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  width: 100%;
}

[data-cl-page="settings"] [data-cl-settings-action-group]:not([hidden]) {
  display: flex;
}

[data-cl-page="settings"] [data-cl-settings-action-group="users"] .cl-filter-item {
  margin: 0;
}

[data-cl-page="settings"] [data-cl-settings-users-root] .cl-table-scroll {
  max-height: min(58vh, 34rem);
  overflow: auto;
}

[data-cl-page="settings"] [data-cl-settings-users-root] [data-cl-admin-users] td:last-child {
  white-space: nowrap;
}

[data-cl-page="settings"] [data-cl-settings-users-root] [data-cl-admin-users] td:last-child .cl-btn {
  margin: 0.1rem;
}

[data-cl-page="settings"] [data-cl-tab-panel="tools"] {
  overflow-y: auto;
}

[data-cl-page="settings"] [data-cl-settings-logs-workspace] .cl-mode-tabs {
  margin: 1rem 0 0.65rem;
}

[data-cl-page="settings"] [data-cl-settings-logs-workspace] {
  margin-top: 0.5rem;
}

[data-cl-page="settings"] [data-cl-tab-panel="logs"] {
  overflow-y: auto;
  min-height: 0;
}

[data-cl-page="settings"] [data-cl-settings-notifications-scroll] {
  max-height: min(42vh, 26rem);
  min-height: 8rem;
  margin-bottom: 0.75rem;
  overflow: auto;
}

[data-cl-page="settings"] [data-cl-settings-notifications-scroll] .cl-table tbody tr {
  transition: background 0.15s ease;
}

[data-cl-page="settings"] [data-cl-settings-notifications-scroll] .cl-table tbody tr:hover td {
  background: color-mix(in srgb, var(--cl-mode-tone, var(--accent)) 7%, transparent);
}

[data-cl-page="settings"] [data-cl-settings-notifications-scroll] .cl-table td,
[data-cl-page="settings"] [data-cl-settings-notifications-scroll] .cl-table th {
  vertical-align: top;
}

[data-cl-page="settings"] [data-cl-settings-notifications-scroll] .cl-table-actions {
  white-space: nowrap;
}

[data-cl-page="settings"] [data-cl-settings-log-table-scroll] {
  max-height: min(48vh, 26rem);
  overflow: auto;
}

[data-cl-page="settings"] [data-cl-settings-overview-root],
[data-cl-page="settings"] [data-cl-settings-account-root],
[data-cl-page="settings"] [data-cl-settings-storage-root] {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* SU-3.11 ? Settings glam: tone-linked strip, card hover, table scan (reduced-motion safe). */
[data-cl-page="settings"] .cl-mode-action-strip {
  border-top: 1px solid color-mix(in srgb, var(--cl-mode-tone, var(--accent)) 30%, var(--border-subtle));
  background: color-mix(in srgb, var(--cl-mode-tone, var(--accent)) 7%, var(--bg-card));
  transition: background 0.2s ease, border-color 0.2s ease;
}

[data-cl-page="settings"] .cl-hero-stat-card {
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

@media (prefers-reduced-motion: no-preference) {
  [data-cl-page="settings"] .cl-hero-stat-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--cl-mode-tone, var(--accent)) 32%, transparent),
      0 10px 28px color-mix(in srgb, var(--cl-mode-tone, var(--accent)) 14%, transparent);
  }

  [data-cl-page="settings"] .cl-tool-tile:not(.cl-tool-tile--locked):hover {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
      var(--shadow-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-cl-page="settings"] .cl-hero-stat-card:hover,
  [data-cl-page="settings"] .cl-tool-tile:hover {
    transform: none;
  }
}

[data-cl-page="settings"] [data-cl-settings-users-root] [data-cl-admin-users] tbody tr {
  transition: background 0.15s ease;
}

[data-cl-page="settings"] [data-cl-settings-users-root] [data-cl-admin-users] tbody tr:hover td {
  background: color-mix(in srgb, var(--cl-mode-tone, var(--accent)) 9%, transparent);
}

[data-cl-page="settings"] [data-cl-settings-log-table-scroll] .cl-table tbody tr {
  transition: background 0.15s ease;
}

[data-cl-page="settings"] [data-cl-settings-log-table-scroll] .cl-table tbody tr:hover td {
  background: color-mix(in srgb, var(--cl-mode-tone, var(--accent)) 7%, transparent);
}

[data-cl-page="settings"] [data-cl-settings-users-status] {
  margin-top: 0.55rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 65%, transparent);
  border: 1px solid var(--border-subtle);
}

[data-cl-page="settings"] .cl-tool-tile .cl-pill--mini {
  margin-top: 0.4rem;
}

[data-cl-page="settings"] .cl-promo-callout {
  margin: 0.5rem 0;
  max-width: 36rem;
}

[data-cl-page="settings"] .cl-detail-tile-value .cl-pill {
  vertical-align: middle;
}

[data-cl-page="larrikin-hub-admin"] [data-cl-hub-admin-staff-table] td:last-child {
  white-space: nowrap;
}

[data-cl-page="larrikin-hub-admin"] [data-cl-hub-admin-staff-table] td:last-child .cl-btn {
  margin: 0.1rem;
}

[data-cl-page="larrikin-hub-admin"] .cl-bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

[data-cl-page="larrikin-hub-admin"] .cl-bento-grid__left {
  min-width: 0;
}

[data-cl-page="larrikin-hub-admin"] .cl-bento-grid__right {
  min-height: 1px;
}

@media (max-width: 900px) {
  [data-cl-page="larrikin-hub-admin"] .cl-bento-grid {
    grid-template-columns: 1fr;
  }

  [data-cl-page="larrikin-hub-admin"] .cl-bento-grid__right {
    display: none;
  }
}

/* ==========================================================================
   cl-cal ? reusable CardLarrikin calendar framework (global, page-agnostic)
   --------------------------------------------------------------------------
   Base framework (cl-cal) + roster adapter (cl-cal-roster). These are GLOBAL
   reusable blocks (like cl-modal / cl-table) ? no page-specific roster CSS.
   Future consumers (cl-cal-general, cl-cal-task) reuse the same base classes.
   View state via modifiers: cl-cal--week / --day / --month, cl-cal--view /
   --edit. Colours derive from theme tokens; item tone via data-cl-cal-colour.
   ========================================================================== */
.cl-cal {
  --cl-cal-item-tone: var(--cl-colour-regular);
  --cl-cal-gap: 0.4rem;
  --cl-cal-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

/* Toolbar: view switch, date nav, range label, status */
.cl-cal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-cal__toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cl-cal__toolbar-group--grow {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.cl-cal__range-label {
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-cal__status {
  flex-basis: 100%;
  min-height: 1.1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.cl-cal__body {
  position: relative;
  min-height: 8rem;
  width: 100%;
  min-width: 0;
}

.cl-cal__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: 1.5rem;
  color: var(--text-muted);
  text-align: center;
}

.cl-cal__loading {
  opacity: 0.55;
  pointer-events: none;
}

.cl-cal.cl-cal--loading {
  opacity: 0.85;
}

.cl-cal.cl-cal--loading .cl-cal__body {
  pointer-events: none;
}

.cl-cal--edit .cl-cal__day-header,
.cl-cal--edit .cl-cal__month-cell {
  cursor: pointer;
}

.cl-cal--unsaved .cl-cal__unsaved-count {
  color: var(--highlight);
  font-weight: 600;
}

.cl-cal__toolbar-group--actions {
  margin-left: auto;
}

.cl-cal__edit-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
}

.cl-cal__unsaved-count {
  min-width: 6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.cl-cal__hidden-count {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
}

.cl-cal__hidden-count[hidden] {
  display: none;
}

.cl-cal__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.cl-cal__empty-icon {
  font-size: 1.5rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.cl-cal__item--pending {
  border-style: dotted;
  box-shadow: 0 0 0 1px var(--highlight) inset;
}

.cl-cal--day .cl-cal__item {
  padding: 0.5rem 0.65rem;
}

.cl-cal__month-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.15rem;
}

.cl-cal__month-more {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.cl-cal__month-summary {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 0;
}

/* Compact month-cell event chips (non-button; month cells are already <button>). */
.cl-cal__month-event {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.12rem 0.28rem;
  border-radius: 0.25rem;
  border-left: 3px solid var(--cl-cal-item-tone, var(--cl-colour-regular));
  background: color-mix(in srgb, var(--cl-cal-item-tone, var(--cl-colour-regular)) 22%, var(--bg-elevated));
  color: color-mix(in srgb, #fff 88%, var(--text-muted) 12%);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.cl-cal__month-event[data-cl-cal-colour="accent"] { --cl-cal-item-tone: var(--cl-colour-accent); }
.cl-cal__month-event[data-cl-cal-colour="highlight"] { --cl-cal-item-tone: var(--cl-colour-highlight); }
.cl-cal__month-event[data-cl-cal-colour="alt"] { --cl-cal-item-tone: var(--cl-colour-alt); }
.cl-cal__month-event[data-cl-cal-colour="regular"],
.cl-cal__month-event[data-cl-cal-colour="default"] { --cl-cal-item-tone: var(--cl-colour-regular); }

.cl-cal__month-summary--events {
  gap: 0.2rem;
  margin-top: 0.1rem;
}

/* --- Grid (week / month share the 7-column grid) --- */
.cl-cal__grid {
  display: grid;
  gap: var(--cl-cal-gap);
  width: 100%;
}

.cl-cal--week .cl-cal__grid,
.cl-cal--month .cl-cal__grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cl-cal--day .cl-cal__grid {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Day column (week / day) --- */
.cl-cal__day-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  min-height: 6rem;
  padding: 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--cl-cal-radius);
}

.cl-cal__day-col--today {
  border-color: var(--cl-colour-active);
  box-shadow: 0 0 0 1px var(--cl-colour-active) inset;
}

.cl-cal__day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  color: var(--text-muted);
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
}

.cl-cal__day-header:hover,
.cl-cal__day-header:focus-visible {
  color: var(--text);
  outline: none;
}

.cl-cal__day-name {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cl-cal__day-date {
  font-variant-numeric: tabular-nums;
}

.cl-cal__day-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}

.cl-cal__day-empty {
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0.2rem 0;
}

/* --- Item (scheduled block / bar) --- */
.cl-cal__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.45rem;
  text-align: left;
  background: color-mix(in srgb, var(--cl-cal-item-tone) 20%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--cl-cal-item-tone) 55%, transparent);
  border-left: 3px solid var(--cl-cal-item-tone);
  border-radius: var(--cl-cal-radius);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.cl-cal__item:hover,
.cl-cal__item:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
  outline: none;
}

.cl-cal__item--draft {
  border-style: dashed;
  opacity: 0.85;
}

.cl-cal__item--cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}

.cl-cal__item-time {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Item colour tones mapped from semantic data keys (no raw hex from JS/DB). */
.cl-cal__item[data-cl-cal-colour="team-pcl"] { --cl-cal-item-tone: var(--cl-colour-regular); }
.cl-cal__item[data-cl-cal-colour="team-lal"] { --cl-cal-item-tone: var(--cl-colour-accent); }
.cl-cal__item[data-cl-cal-colour="team-admin"] { --cl-cal-item-tone: var(--cl-colour-highlight); }
.cl-cal__item[data-cl-cal-colour="default"] { --cl-cal-item-tone: var(--cl-colour-regular); }
/* Staff-assigned shifts: tone supplied inline via --cl-cal-item-tone from profile accent. */
.cl-cal__item[data-cl-cal-colour="staff"] { /* inline --cl-cal-item-tone */ }

/* --- Month view --- */
.cl-cal__month-cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 5.5rem;
  padding: 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--cl-cal-radius);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.cl-cal__month-cell:hover,
.cl-cal__month-cell:focus-visible {
  border-color: var(--cl-colour-active);
  box-shadow: var(--shadow-glow);
  outline: none;
}

.cl-cal__month-cell--muted {
  opacity: 0.5;
}

.cl-cal__month-cell--today {
  border-color: var(--cl-colour-active);
  box-shadow: 0 0 0 1px var(--cl-colour-active) inset;
}

.cl-cal__month-date {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cl-cal__month-hours {
  font-weight: 600;
  color: var(--text);
}

.cl-cal__month-weekday {
  padding: 0.2rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
}

/* --- Timeline geometry (read-only Day/Week hour-axis) --- */
.cl-cal--timeline {
  --cl-cal-bar-h: 2.1rem;    /* horizontal (Day) bar height */
  --cl-cal-lane-h: 2.45rem;  /* horizontal lane row pitch */
  --cl-cal-track-h: 22rem;   /* vertical (Week) track height */
  --cl-cal-header-h: 2.4rem; /* day-header height for axis alignment */
}

.cl-cal__timeline--day {
  position: relative;
  width: 100%;
  padding: 0 0.5rem;
}

.cl-cal__time-axis {
  position: relative;
}

.cl-cal__time-axis .cl-cal__time-tick {
  position: absolute;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cl-cal__time-axis--vertical .cl-cal__time-tick {
  font-size: 0.62rem;
  opacity: 0.82;
}

.cl-cal__time-axis--horizontal {
  height: 1.2rem;
}

.cl-cal__time-axis--horizontal .cl-cal__time-tick {
  transform: translateX(-50%);
}

.cl-cal__time-axis--vertical {
  height: var(--cl-cal-track-h);
  width: 100%;
}

.cl-cal__time-axis--vertical .cl-cal__time-tick {
  right: 0.35rem;
  transform: translateY(-50%);
  text-align: right;
  line-height: 1;
}

/* Week time column: centre label glyphs on the even-hour guide line. */
.cl-cal__timeline-time-column .cl-cal__time-axis--vertical .cl-cal__time-tick {
  line-height: 1;
  padding-block: 0;
  margin: 0;
}

.cl-cal__timeline-time-label {
  pointer-events: none;
  user-select: none;
}

.cl-cal__timeline-track {
  position: relative;
  background: var(--bg-card);
}

/* Day view is a single track row, so it keeps a light frame. */
.cl-cal__timeline-track--horizontal {
  height: calc(max(var(--cl-cal-lanes, 1), 1) * var(--cl-cal-lane-h) + 0.3rem);
  min-height: var(--cl-cal-lane-h);
  padding: 0.15rem 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--cl-cal-radius);
}

/* Week view tracks are cells of one shared timetable (see week-grid); they get
   no individual box border ? day separators + guide lines carry the structure. */
.cl-cal__timeline-track--vertical {
  height: var(--cl-cal-track-h);
  overflow: hidden;
}

.cl-cal--timeline-resize .cl-cal__timeline-bar-slot {
  z-index: 2;
}

.cl-cal--resizing .cl-cal__timeline-bar-slot {
  z-index: 5;
}

.cl-cal--moving .cl-cal__timeline-bar-slot,
.cl-cal__timeline-bar-slot--dragging {
  z-index: 6;
}

.cl-cal--timeline-resize .cl-cal__timeline-bar {
  cursor: grab;
  touch-action: none;
}

.cl-cal--moving .cl-cal__timeline-bar,
.cl-cal__timeline-bar-slot--dragging .cl-cal__timeline-bar {
  cursor: grabbing;
}

.cl-cal--moving,
.cl-cal--resizing {
  user-select: none;
}

.cl-cal__timeline-bar-slot {
  position: absolute;
  box-sizing: border-box;
  min-width: 0;
}

.cl-cal__timeline-track--horizontal .cl-cal__timeline-bar-slot {
  top: calc(var(--cl-cal-lane, 0) * var(--cl-cal-lane-h) + 0.15rem);
  height: var(--cl-cal-bar-h);
  min-width: 2.75rem;
}

/* Overlay layer: same time band, no packed-lane width. */
.cl-cal__timeline-bar-slot--overlay {
  z-index: 1;
}

.cl-cal__timeline-bar-slot:not(.cl-cal__timeline-bar-slot--overlay) {
  z-index: 2;
}

.cl-cal__timeline-track--horizontal .cl-cal__timeline-bar-slot--overlay {
  top: 0.15rem;
  height: calc(100% - 0.3rem);
}

.cl-cal--resizing .cl-cal__timeline-bar-slot--overlay:not(.cl-cal__timeline-bar-slot--dragging),
.cl-cal--moving .cl-cal__timeline-bar-slot--overlay:not(.cl-cal__timeline-bar-slot--dragging) {
  z-index: 1;
}

.cl-cal__timeline-track--vertical .cl-cal__timeline-bar-slot {
  min-height: 1.5rem;
}

.cl-cal__timeline-bar {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  left: auto;
  top: auto;
}

.cl-cal__timeline-track--vertical .cl-cal__timeline-bar {
  min-height: 1.5rem;
  padding: 0.2rem 0.3rem;
  gap: 0.25rem;
  font-size: 0.72rem;
  container-type: inline-size;
}

.cl-cal__resize-handle {
  position: absolute;
  z-index: 3;
  background: color-mix(in srgb, var(--cl-cal-item-tone) 55%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--cl-cal-item-tone) 70%, transparent);
  opacity: 0;
  transition: opacity var(--transition);
  touch-action: none;
}

.cl-cal--timeline-resize .cl-cal__timeline-bar-slot:hover .cl-cal__resize-handle,
.cl-cal--timeline-resize .cl-cal__timeline-bar-slot:focus-within .cl-cal__resize-handle,
.cl-cal--resizing .cl-cal__resize-handle {
  opacity: 1;
}

.cl-cal__resize-handle--start,
.cl-cal__resize-handle--end {
  cursor: ew-resize;
}

.cl-cal__timeline-track--horizontal .cl-cal__resize-handle--start {
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.45rem;
  border-radius: var(--cl-cal-radius) 0 0 var(--cl-cal-radius);
}

.cl-cal__timeline-track--horizontal .cl-cal__resize-handle--end {
  right: 0;
  top: 0;
  bottom: 0;
  width: 0.45rem;
  border-radius: 0 var(--cl-cal-radius) var(--cl-cal-radius) 0;
}

.cl-cal__timeline-track--vertical .cl-cal__resize-handle--start,
.cl-cal__timeline-track--vertical .cl-cal__resize-handle--end {
  left: 0;
  right: 0;
  height: 0.45rem;
  cursor: ns-resize;
}

.cl-cal__timeline-track--vertical .cl-cal__resize-handle--start {
  top: 0;
  border-radius: var(--cl-cal-radius) var(--cl-cal-radius) 0 0;
}

.cl-cal__timeline-track--vertical .cl-cal__resize-handle--end {
  bottom: 0;
  border-radius: 0 0 var(--cl-cal-radius) var(--cl-cal-radius);
}

/* Squared edge signals a shift that runs past the visible window. */
.cl-cal__timeline-bar--clip-start {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-style: dashed;
}

.cl-cal__timeline-bar--clip-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* One shared timetable: outer frame + zero gap so day columns read as a single
   grid rather than seven separate cards. Day dividers come from column borders
   and the horizontal guide lines run continuously across the week. */
.cl-cal__timeline-week-grid {
  display: grid;
  grid-template-columns: auto repeat(7, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--cl-cal-radius);
  overflow: hidden;
}

.cl-cal__timeline-axis-col {
  display: flex;
  flex-direction: column;
  min-width: 3rem;
}

.cl-cal__timeline-time-column {
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-card);
  padding-right: 0.15rem;
}

.cl-cal__timeline-time-column .cl-cal__time-axis--vertical {
  width: 100%;
}

.cl-cal__timeline-axis-spacer {
  height: var(--cl-cal-header-h);
}

.cl-cal__timeline-day {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  /* Vertical day separator ? visible but not a boxed card outline. */
  border-left: 1px solid color-mix(in srgb, var(--text-muted) 32%, var(--border));
}

/* Alternating column tint helps distinguish days in the shared Week grid. */
.cl-cal__timeline-week-grid .cl-cal__timeline-day--alt {
  background: color-mix(in srgb, var(--bg-elevated) 42%, var(--bg-card));
}

.cl-cal__timeline-week-grid .cl-cal__timeline-day--alt .cl-cal__timeline-track--vertical {
  background-color: color-mix(in srgb, var(--bg-elevated) 30%, var(--bg-card));
}

.cl-cal__timeline-day .cl-cal__day-header {
  min-height: var(--cl-cal-header-h);
  padding: 0.15rem 0.3rem;
}

/* Today reads as a subtle tinted column, not a heavy boxed ring. */
.cl-cal__timeline-day--today {
  background: color-mix(in srgb, var(--cl-colour-active) 6%, transparent);
}

.cl-cal__timeline-day--today.cl-cal__timeline-day--alt {
  background: color-mix(in srgb, var(--cl-colour-active) 6%, var(--bg-elevated) 34%);
}

.cl-cal__timeline-day--today .cl-cal__timeline-track--vertical {
  background-color: color-mix(in srgb, var(--cl-colour-active) 8%, var(--bg-card));
}

.cl-cal__timeline-day--today .cl-cal__day-header {
  color: var(--cl-colour-active);
}

.cl-cal__timeline-overflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.cl-cal__timeline-overflow-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cl-cal__timeline-overflow .cl-cal__item {
  width: auto;
}

/* --- Roster adapter (cl-cal-roster) --- */
.cl-cal-roster__group-avatars {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
}

.cl-cal-roster__group-avatars .cl-cal-roster__item-pic,
.cl-cal-roster__group-avatars .cl-cal-roster__item-team-icon {
  margin-left: -0.35rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.cl-cal-roster__group-avatars .cl-cal-roster__item-pic:first-child,
.cl-cal-roster__group-avatars .cl-cal-roster__item-team-icon:first-child {
  margin-left: 0;
}

.cl-cal-roster__group-avatars--stacked {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem;
  margin-bottom: 0.05rem;
}

.cl-cal-roster__group-avatars--stacked .cl-cal-roster__item-pic,
.cl-cal-roster__group-avatars--stacked .cl-cal-roster__item-team-icon {
  margin-left: 0;
  box-shadow: none;
}

.cl-cal-roster__group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.15rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary, #fff);
  background: rgba(0, 0, 0, 0.35);
}

.cl-cal__item--stacked .cl-cal-roster__group-count {
  min-width: 0.9rem;
  height: 0.9rem;
  font-size: 0.55rem;
}

.cl-cal-roster__group-picker-meta {
  margin: 0 1rem 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cl-cal-roster__group-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cl-cal-roster__group-picker-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: 0.45rem;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cl-cal-roster__group-picker-btn:hover,
.cl-cal-roster__group-picker-btn:focus-visible {
  border-color: var(--accent, #6ec6ff);
  outline: none;
}

.cl-cal-roster__group-picker-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.cl-cal-roster__group-picker-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.cl-cal-roster__group-picker-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cl-cal-roster__item-pic {
  flex: 0 0 auto;
}

.cl-cal-roster__item-team-icon {
  flex: 0 0 auto;
  color: var(--cl-cal-item-tone);
}

.cl-cal-roster__item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.cl-cal-roster__item-name {
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-cal-roster__item-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stacked (vertical timeline / Week) item: compact column content that uses the
   narrow bar's vertical space instead of the Day view's horizontal row. Generic
   cl-cal__item--stacked modifier is set by the base for vertical bars. */
.cl-cal__item--stacked {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem;
  padding: 0.25rem 0.3rem;
  text-align: center;
}

.cl-cal__item--stacked .cl-cal-roster__item-name {
  white-space: normal;
  line-height: 1.05;
  font-size: 0.72rem;
}

.cl-cal__item--stacked .cl-cal__item-time {
  font-size: 0.68rem;
  line-height: 1.05;
}

.cl-cal__item--stacked .cl-cal-roster__item-sub {
  font-size: 0.66rem;
  line-height: 1.05;
}

.cl-cal__item--stacked .cl-cal-roster__item-pic,
.cl-cal__item--stacked .cl-cal-roster__item-team-icon {
  margin-bottom: 0.05rem;
}

/* Week bar: profile pic shrinks with column width; always stays visible. */
.cl-cal__item--stacked .cl-cal-roster__item-pic.cl-display-pic--mini {
  width: min(100%, 2rem);
  height: auto;
  aspect-ratio: 1;
  min-width: 0.65rem;
  min-height: 0.65rem;
  max-width: 100%;
  flex: 0 1 auto;
}

.cl-cal__item--stacked .cl-display-pic__monogram {
  font-size: clamp(0.45rem, 18cqw, 0.72rem);
}

/* Narrow Week columns: hide text/details that would clip; pic remains. */
@container (max-width: 3.25rem) {
  .cl-cal__item--stacked .cl-cal-roster__item-name,
  .cl-cal__item--stacked .cl-cal__item-time,
  .cl-cal__item--stacked .cl-cal-roster__item-sub,
  .cl-cal__item--stacked .cl-cal-roster__item-team-icon,
  .cl-cal__item--stacked .cl-cal-roster__group-count {
    display: none;
  }
}

/* Very short bars: keep content clipped rather than overflowing the slot. */
.cl-cal__timeline-track--vertical .cl-cal__item--stacked {
  overflow: hidden;
}

/* Details modal rows reuse global patterns; small helper for definition rows. */
.cl-cal-roster__detail-row {
  display: flex;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-cal-roster__detail-row:last-child {
  border-bottom: 0;
}

.cl-cal-roster__detail-label {
  flex: 0 0 8rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.cl-cal-roster__detail-value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}

/* --- Roster action strip: three zones (edit | date-nav | views) --- */
.cl-cal-roster__action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}

.cl-cal-roster__action-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.cl-cal-roster__action-group--nav {
  flex: 1 1 auto;
  justify-content: center;
}

.cl-cal-roster__action-group--views {
  margin-left: auto;
  justify-content: flex-end;
}

/* Moved toolbar groups sit inline in the strip; drop the base toolbar spacing. */
.cl-cal-roster__action-group .cl-cal__toolbar-group {
  gap: 0.3rem;
}

.cl-cal-roster__action-group--nav .cl-cal__range-label {
  min-width: 8rem;
}

/* Compact gear + chevron edit toggle (opens the edit tray). */
.cl-cal-roster__edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cl-cal-roster__edit-chevron {
  font-size: 0.7em;
  transition: transform var(--transition);
}

.cl-cal-roster__edit-toggle--open .cl-cal-roster__edit-chevron {
  transform: rotate(180deg);
}

/* Highlight-user control. */
.cl-cal-roster__highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cl-cal-roster__highlight-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cl-cal-roster__highlight-select {
  min-height: 1.7rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.78rem;
  max-width: 11rem;
}

/* Edit tray ? slide-out row of edit tools; hidden until the gear toggle opens
   it (mirrors the Browser filter tray feel). */
.cl-cal-roster__edit-tray {
  margin-top: 0.42rem;
  padding-top: 0.42rem;
  border-top: 1px solid var(--cl-mode-tone-edge);
}

.cl-cal-roster__edit-tray[hidden] {
  display: none;
}

.cl-cal-roster__edit-tray:not([hidden]) {
  animation: cl-cal-tray-in 140ms ease;
}

.cl-cal-roster__edit-tray-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}

@keyframes cl-cal-tray-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Highlight a selected staff member's shifts across Day/Week bars + grid. */
.cl-cal__item--highlight {
  border-color: var(--cl-colour-active);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl-colour-active) 55%, transparent),
    var(--shadow-glow);
  font-weight: 600;
}

/* Paintbrush copy: source shift + copy-cursor affordance while active. */
.cl-cal__item--selected {
  outline: 2px dashed var(--cl-colour-active);
  outline-offset: 1px;
}

.cl-cal-roster--paint .cl-cal__item,
.cl-cal-roster--paint .cl-cal__day-header,
.cl-cal-roster--paint .cl-cal__month-cell,
.cl-cal-roster--paint .cl-cal__timeline-track,
.cl-cal-roster--paint .cl-cal__month-summary {
  cursor: copy;
}

/* --- Roster unavailability layer (under shifts in general / gear modes) --- */
.cl-cal-roster__item--unavailability {
  --cl-cal-item-tone: color-mix(in srgb, var(--text-muted) 35%, var(--surface));
  background: color-mix(in srgb, var(--cl-cal-item-tone) 22%, var(--surface));
  border-style: dashed;
}

.cl-cal-roster--general .cl-cal__item[data-cl-cal-kind="shift"],
.cl-cal-roster--general .cl-cal__item[data-cl-cal-kind="shift_group"] {
  position: relative;
  z-index: 2;
}

.cl-cal-roster--general .cl-cal__item[data-cl-cal-kind="unavailability"] {
  opacity: 0.25;
  z-index: 1;
}

.cl-cal-roster--gear-edit .cl-cal__item[data-cl-cal-kind="shift"],
.cl-cal-roster--gear-edit .cl-cal__item[data-cl-cal-kind="shift_group"] {
  position: relative;
  z-index: 2;
}

.cl-cal-roster--gear-edit .cl-cal__item[data-cl-cal-kind="unavailability"] {
  opacity: 0.4;
  z-index: 1;
}

.cl-cal-roster--unavail-mode .cl-cal__item[data-cl-cal-kind="shift"],
.cl-cal-roster--unavail-mode .cl-cal__item[data-cl-cal-kind="shift_group"] {
  opacity: 0.25;
  z-index: 1;
}

.cl-cal-roster--unavail-mode .cl-cal__item[data-cl-cal-kind="unavailability"] {
  opacity: 1;
  z-index: 2;
}

.cl-cal-roster--general .cl-cal__timeline-bar-slot--overlay,
.cl-cal-roster--gear-edit .cl-cal__timeline-bar-slot--overlay {
  pointer-events: none;
}

.cl-cal-roster--unavail-mode .cl-cal__timeline-bar-slot--overlay {
  z-index: 3;
  pointer-events: auto;
}

.cl-cal-roster--unavail-mode .cl-cal__timeline-bar-slot:not(.cl-cal__timeline-bar-slot--overlay) {
  z-index: 1;
}

.cl-cal-roster--unavail-remove .cl-cal__item[data-cl-cal-kind="unavailability"] {
  cursor: pointer;
}

.cl-cal-roster__unavail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Remove mode: deletion affordance on clickable shift targets. */
.cl-cal-roster--remove .cl-cal__item {
  cursor: not-allowed;
}

.cl-cal-roster--remove .cl-cal__item:hover {
  outline: 2px dashed var(--error);
  outline-offset: 1px;
}

/* Duplicate mode: toggle-select shifts in the current viewed range. */
.cl-cal-roster--duplicate .cl-cal__item {
  cursor: pointer;
}

.cl-cal-roster--duplicate .cl-cal__item:hover {
  outline: 2px dashed var(--cl-colour-active);
  outline-offset: 1px;
}

.cl-cal-roster--duplicate-ready .cl-cal__item:hover {
  outline-color: var(--success);
}

/* Edit-tray tool buttons: active cancel (warn) vs apply (success) tones. */
.cl-cal-roster__edit-tool--cancel.cl-btn {
  background: color-mix(in srgb, var(--warning) 24%, var(--bg-card));
  border-color: color-mix(in srgb, var(--warning) 50%, var(--error) 22%);
  color: color-mix(in srgb, var(--text) 12%, var(--warning) 88%);
}

.cl-cal-roster__edit-tool--cancel.cl-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--warning) 34%, var(--bg-card));
}

.cl-cal-roster__edit-tool--apply.cl-btn {
  background: color-mix(in srgb, var(--success) 22%, var(--bg-card));
  border-color: color-mix(in srgb, var(--success) 52%, var(--border-subtle));
  color: color-mix(in srgb, var(--text) 8%, var(--success) 92%);
}

.cl-cal-roster__edit-tool--apply.cl-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--success) 32%, var(--bg-card));
}

/* Cursor-follow ghost of the copy source (does not intercept clicks). */
.cl-cal__paint-ghost {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  max-width: 12rem;
  padding: 0.25rem 0.5rem;
  border: 1px dashed var(--cl-colour-active);
  border-radius: var(--cl-cal-radius, 0.5rem);
  background: color-mix(in srgb, var(--cl-colour-active) 18%, var(--bg-elevated));
  color: var(--text);
  font-size: 0.75rem;
  box-shadow: var(--shadow-glow);
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
}

.cl-cal__paint-ghost--active {
  opacity: 0.9;
}

.cl-cal-roster__paint-ghost-content {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Timeline guide lines: even-hour majors, odd-hour whisper, purple half-hour --- */
.cl-cal--timeline {
  /* Labelled even hours (12am, 2am, 4am ?): ~25% white. */
  --cl-cal-guide-even: color-mix(in srgb, white 25%, transparent);
  /* Unlabelled odd hours (1am, 3am, 5am ?): ~8% white. */
  --cl-cal-guide-odd: color-mix(in srgb, white 8%, transparent);
  /* Half-hour: ~5% default purple (--cl-colour-regular). */
  --cl-cal-guide-half: color-mix(in srgb, var(--cl-colour-regular) 5%, transparent);
}

.cl-cal__timeline-track--vertical {
  background-image:
    repeating-linear-gradient(to bottom,
      var(--cl-cal-guide-even) 0, var(--cl-cal-guide-even) 1px,
      transparent 1px, transparent calc(100% / 12)),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(100% / 24),
      var(--cl-cal-guide-odd) calc(100% / 24), var(--cl-cal-guide-odd) calc(100% / 24 + 1px),
      transparent calc(100% / 24 + 1px), transparent calc(100% / 12)),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(100% / 48),
      var(--cl-cal-guide-half) calc(100% / 48), var(--cl-cal-guide-half) calc(100% / 48 + 1px),
      transparent calc(100% / 48 + 1px), transparent calc(100% / 24));
}

.cl-cal__timeline-track--horizontal {
  background-image:
    repeating-linear-gradient(to right,
      var(--cl-cal-guide-even) 0, var(--cl-cal-guide-even) 1px,
      transparent 1px, transparent calc(100% / 12)),
    repeating-linear-gradient(to right,
      transparent 0, transparent calc(100% / 24),
      var(--cl-cal-guide-odd) calc(100% / 24), var(--cl-cal-guide-odd) calc(100% / 24 + 1px),
      transparent calc(100% / 24 + 1px), transparent calc(100% / 12)),
    repeating-linear-gradient(to right,
      transparent 0, transparent calc(100% / 48),
      var(--cl-cal-guide-half) calc(100% / 48), var(--cl-cal-guide-half) calc(100% / 48 + 1px),
      transparent calc(100% / 48 + 1px), transparent calc(100% / 24));
}

/* Time-axis column: labels only ? no duplicate guide stripes (tracks carry guides). */
.cl-cal__time-axis--vertical,
.cl-cal__time-axis--horizontal {
  background-image: none;
}

/* --- Responsive: do not force a 7-column week on small screens --- */
@media (max-width: 768px) {
  .cl-cal--week .cl-cal__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cl-cal--month .cl-cal__grid {
    gap: 0.2rem;
  }
  .cl-cal__month-cell {
    min-height: 4rem;
  }
  .cl-cal__detail-label,
  .cl-cal-roster__detail-label {
    flex-basis: 6rem;
  }
  /* Week timeline scrolls horizontally rather than crushing 7 day columns.
     (Roster also defaults narrow screens to the Day timeline at init.) */
  .cl-cal__timeline-week-grid {
    grid-template-columns: auto repeat(7, minmax(5.5rem, 1fr));
    overflow-x: auto;
  }
  .cl-cal--timeline {
    --cl-cal-track-h: 18rem;
  }
  /* Action-strip zones stack and stay left-aligned on narrow screens. */
  .cl-cal-roster__action-group--nav,
  .cl-cal-roster__action-group--views {
    justify-content: flex-start;
    margin-left: 0;
  }
  .cl-cal-roster__highlight-select {
    max-width: 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-cal__item,
  .cl-cal__month-cell,
  .cl-cal__day-header,
  .cl-cal__resize-handle,
  .cl-cal-roster__edit-chevron {
    transition: none;
  }
  .cl-cal__item:hover,
  .cl-cal__item:focus-visible {
    transform: none;
  }
  .cl-cal-roster__edit-tray:not([hidden]) {
    animation: none;
  }
}

/* ===== Public homepage browser-lite (Stage 1) ===== */

/* Homepage mobile UX polish (2026-07-16) ? C1/C2 + light C3.
   Rollback (each independent): see
   docs/web_migration_change_logs/2026-07-16__homepage-mobile-modal-tap-polish.md */

/* Landing modals clear the restored CardLarrikin navbar. */
.cl-landing-page .cl-modal-root {
  top: var(--cl-navbar-height, 4.5rem);
}

body:not(:has(footer.cl-footer-bar)) .cl-landing-page .cl-modal-root {
  bottom: 0;
}

body:not(:has(footer.cl-footer-bar)) .main-container.cl-landing-page {
  padding-bottom: 1.5rem;
}

/* Homepage kraken tile ? subtle overlay behind content (desktop gutters mainly).
   background-position: center keeps left/right of the centered column even. */
body:has(.cl-landing-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-color: transparent;
  background-image: url("../images/landing/bg-tile-kraken.png");
  background-repeat: repeat;
  background-position: center top;
  /* Tile height = viewport height; width follows native 1:2 aspect. */
  background-size: auto 100vh;
}

/* Lift landing content above the kraken tile ? do NOT demote footer to
   position:relative (that unsticks .cl-footer-bar from the viewport bottom). */
body:has(.cl-landing-page) > header,
body:has(.cl-landing-page) > main {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  body:has(.cl-landing-page)::before {
    opacity: 0.28;
    background-size: auto 100vh;
  }
}

.cl-landing-page .cl-landing-stack {
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Collection/Browser fill the app column. Do not inherit Home's 1100px shop cap. */
[data-cl-page="collection"] .cl-search-results-stack,
.cl-page-shell-viewport--tabbed > .cl-search-results-stack {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.cl-landing-toast-region {
  margin-bottom: 0.5rem;
}

.cl-landing-hero {
  text-align: center;
  margin-bottom: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cl-landing-hero .hero-brand-row {
  margin-bottom: 0.55rem;
}

.cl-landing-hero__practical {
  margin: 0;
  max-width: 36rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  text-align: center;
}

.cl-landing-hero__sep {
  width: min(220px, 40%);
  height: 1px;
  margin: 0.55rem auto 0.45rem;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--cl-colour-accent) 70%, var(--border-subtle)),
    transparent
  );
}

.cl-landing-hero__quote,
.cl-landing-hero .hero-tagline {
  margin: 0;
  max-width: 34rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
  text-align: center;
  line-height: 1.35;
}

.cl-landing-multisearch {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cl-landing-search-band {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem 0.4rem;
  border-radius: var(--radius-lg, var(--radius));
  border: 1px solid color-mix(in srgb, var(--cl-text-gradient-via) 35%, var(--border-subtle));
  background-image: linear-gradient(
    var(--cl-text-gradient-angle),
    color-mix(in srgb, var(--cl-text-gradient-from) 72%, #120816 28%) 0%,
    color-mix(in srgb, var(--cl-text-gradient-via) 68%, #0e0618 32%) 48%,
    color-mix(in srgb, var(--cl-text-gradient-to) 55%, #071018 45%) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 10px 28px color-mix(in srgb, #000 28%, transparent);
  /* Tray sheet tucks up under the band lip; must not clip the peek notch. */
  overflow: visible;
}

.cl-landing-search-band .cl-landing-multisearch__input-wrap {
  background: color-mix(in srgb, var(--bg-card) 92%, #000 8%);
  border-color: color-mix(in srgb, #fff 18%, var(--border-subtle));
}

.cl-landing-search-band .cl-landing-multisearch__input {
  background: transparent;
  border-color: transparent;
}

.cl-landing-search-band .cl-landing-multisearch__submit,
.cl-landing-search-band .cl-landing-multisearch__scan,
.cl-landing-search-band .cl-landing-multisearch__collapse,
.cl-landing-search-band .cl-filter-dial-reset,
.cl-landing-search-band .cl-filter-dial-lock,
.cl-landing-search-band .cl-filter-dial {
  box-shadow: 0 1px 0 color-mix(in srgb, #000 22%, transparent);
}

.cl-landing-multisearch__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: stretch;
  overflow: visible;
}

.cl-landing-multisearch__scan-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0.45rem;
}

.cl-landing-multisearch__action {
  min-width: 5.5rem;
  min-height: 2.5rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  padding-top: 0;
  padding-bottom: 0;
}

.cl-landing-multisearch__input-wrap {
  position: relative;
  z-index: 45;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.5rem;
  padding: 0.22rem 0.45rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: visible;
}

.cl-landing-multisearch__input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.cl-landing-multisearch__collapse {
  display: none;
  min-width: 2.75rem;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
  align-items: center;
  justify-content: center;
}

.cl-landing-search-chips {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  min-width: 0;
  max-width: calc(100% - 6.5rem);
}

.cl-landing-search-chips[hidden] {
  display: none !important;
}

.cl-landing-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0.12rem 0.2rem 0.12rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cl-colour-accent) 22%, var(--bg-card));
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.cl-landing-search-chip__face {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-landing-search-chip--locked {
  gap: 0.28rem;
}

.cl-landing-search-chip--locked > i {
  font-size: 0.78rem;
}

.cl-landing-search-chip__remove {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.05rem 0.3rem 0.1rem;
  border-radius: 999px;
}

.cl-landing-search-chip__remove:hover,
.cl-landing-search-chip__remove:focus-visible {
  background: color-mix(in srgb, var(--cl-colour-accent) 28%, transparent);
}

.cl-landing-suggestions {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  max-height: 7.15rem;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, var(--cl-colour-accent) 35%);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.cl-landing-suggestions[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  .cl-landing-multisearch__input-wrap .cl-landing-suggestions {
    max-height: 7.15rem;
    border-color: color-mix(in srgb, var(--cl-colour-regular) 40%, var(--border-subtle));
    background:
      radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cl-colour-regular) 14%, transparent), transparent 60%),
      var(--bg-elevated);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
      0 12px 28px rgba(0, 0, 0, 0.4);
  }
}

.cl-landing-suggestion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  color: var(--text);
}

.cl-landing-suggestion__icon {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
}

.cl-landing-suggestion--binder .cl-landing-suggestion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
}

.cl-landing-suggestion:hover,
.cl-landing-suggestion--active {
  background: color-mix(in srgb, var(--cl-colour-accent) 28%, var(--bg-card));
}

.cl-landing-suggestion--active {
  box-shadow: inset 3px 0 0 var(--cl-colour-accent, #c44cff);
}

.cl-landing-suggestion--detail .cl-landing-suggestion__hint {
  letter-spacing: 0.01em;
}

.cl-landing-suggestion__match {
  background: color-mix(in srgb, var(--cl-colour-accent) 42%, transparent);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 0.2em;
  font-weight: 700;
}

.cl-landing-suggestion__label {
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-landing-suggestion__hint {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cl-landing-multisearch__input {
  flex: 1 1 6rem;
  width: auto;
  min-width: 5rem;
  height: auto;
  min-height: 1.9rem;
  padding: 0.32rem 0.4rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.cl-landing-multisearch__input:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}

.cl-landing-multisearch__submit,
.cl-landing-multisearch__scan {
  min-width: 2.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.cl-landing-multisearch__scan:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cl-landing-image-scan-preview {
  margin: 0.75rem 0 0.35rem;
  text-align: center;
}

.cl-landing-image-scan-preview__img {
  max-width: min(100%, 280px);
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.35rem;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  background: rgba(0, 0, 0, 0.04);
}

.cl-landing-image-scan-actions {
  margin-top: 0.65rem;
  gap: 0.45rem;
  flex-wrap: wrap;
}

/* --- Homepage Image Scan staff Scan Trace panel (V1.5) --- */
.cl-landing-scan-trace {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
  border-radius: 0.45rem;
  background: color-mix(in srgb, #0f172a 72%, transparent);
  color: #e2e8f0;
}

.cl-landing-scan-trace[hidden] {
  display: none !important;
}

.cl-landing-scan-trace__summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.9rem;
  list-style: none;
}

.cl-landing-scan-trace__summary::-webkit-details-marker {
  display: none;
}

.cl-landing-scan-trace__toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.55rem 0 0.4rem;
}

.cl-landing-scan-trace__body {
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  padding: 0.55rem 0.65rem;
  border-radius: 0.35rem;
  background: #020617;
  color: #cbd5e1;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Homepage Image Scan mobile camera-screen viewfinder --- */
body.cl-landing-image-scan-vf-open {
  overflow: hidden;
}

.cl-landing-image-scan-vf {
  --cl-card-ratio: 5 / 7;
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  background: #05050a;
  color: var(--text);
  padding: 0;
  box-sizing: border-box;
}

.cl-landing-image-scan-vf[hidden] {
  display: none !important;
}

.cl-landing-image-scan-vf__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.cl-camera-stage--focusable {
  cursor: crosshair;
  touch-action: manipulation;
}

.cl-camera-focus-ring {
  position: absolute;
  z-index: 6;
  width: 3.1rem;
  height: 3.1rem;
  margin-left: -1.55rem;
  margin-top: -1.55rem;
  border: 2px solid color-mix(in srgb, #f8fafc 88%, transparent);
  border-radius: 0.35rem;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #22d3ee 55%, transparent),
    0 0 18px color-mix(in srgb, #22d3ee 35%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: scale(1.35);
  transition:
    opacity 160ms ease,
    transform 420ms ease;
}

.cl-camera-focus-ring--active {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .cl-camera-focus-ring {
    transition: opacity 120ms linear;
    transform: none;
  }
  .cl-camera-focus-ring--active {
    transform: none;
  }
}

.cl-landing-image-scan-vf__video,
.cl-landing-image-scan-vf__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.cl-landing-image-scan-vf__preview {
  z-index: 4;
  object-fit: contain;
  background: #05050a;
}

.cl-landing-image-scan-vf__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 34%, rgba(0, 0, 0, 0.58) 100%);
}

.cl-landing-image-scan-vf__guide {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-sizing: border-box;
  /* True TCG trading-card ratio: 2.5?3.5 ? 5:7 portrait */
  aspect-ratio: var(--cl-card-ratio);
  width: auto;
  height: auto;
}

.cl-landing-image-scan-vf__guide--outer {
  /*
   * Trading-card 5:7 outer crop guide ? width-led (not height-primary)
   * so the frame is less vertically dominant on phones while keeping 5:7.
   */
  width: min(72vw, 74%);
  max-height: min(62dvh, 64%);
  height: auto;
  aspect-ratio: 5 / 7;
  border: 1.5px dashed color-mix(in srgb, #e2e8f0 48%, transparent);
  border-radius: 0.4rem;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.34);
  opacity: 0.95;
}

.cl-landing-image-scan-vf__guide--inner {
  /* Visual placement only; width-led 5:7 inside the outer crop guide */
  width: min(60vw, 62%);
  max-height: min(52dvh, 54%);
  height: auto;
  aspect-ratio: 5 / 7;
  border: 2px solid color-mix(in srgb, var(--cl-colour-regular) 55%, #22d3ee);
  border-radius: 0.3rem;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #22d3ee 30%, transparent),
    0 0 18px color-mix(in srgb, var(--cl-colour-regular) 32%, transparent);
  background:
    linear-gradient(#22d3ee, #22d3ee) left top / 1.05rem 3px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) left top / 3px 1.05rem no-repeat,
    linear-gradient(#22d3ee, #22d3ee) right top / 1.05rem 3px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) right top / 3px 1.05rem no-repeat,
    linear-gradient(#22d3ee, #22d3ee) left bottom / 1.05rem 3px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) left bottom / 3px 1.05rem no-repeat,
    linear-gradient(#22d3ee, #22d3ee) right bottom / 1.05rem 3px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) right bottom / 3px 1.05rem no-repeat;
}

.cl-landing-image-scan-vf__top {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  gap: 0.35rem;
  padding:
    max(0.55rem, env(safe-area-inset-top, 0px))
    0.75rem
    0.35rem;
  pointer-events: none;
  text-align: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
}

.cl-landing-image-scan-vf__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  justify-self: center;
}

.cl-landing-image-scan-vf__top-spacer {
  width: 3rem;
  height: 3rem;
}

.cl-camera-flip-btn,
.cl-camera-btn--flip {
  pointer-events: auto;
  justify-self: start;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.95rem;
  background: color-mix(in srgb, #1a1a24 72%, transparent);
}

.cl-camera-flip-btn[hidden],
.cl-camera-btn--flip[hidden] {
  display: none !important;
}

.cl-landing-image-scan-vf__hint {
  position: absolute;
  z-index: 5;
  left: 1rem;
  right: 1rem;
  bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px));
  margin: 0;
  color: color-mix(in srgb, #e2e8f0 88%, transparent);
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.cl-landing-image-scan-vf__status {
  position: absolute;
  z-index: 6;
  left: 1rem;
  right: 1rem;
  bottom: calc(5.15rem + env(safe-area-inset-bottom, 0px));
  margin: 0;
  min-height: 1rem;
  font-size: 0.8rem;
  color: color-mix(in srgb, #94a3b8 92%, transparent);
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.cl-landing-image-scan-vf__thinking {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(5, 5, 10, 0.55);
  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 600;
}

.cl-landing-image-scan-vf__thinking[hidden] {
  display: none !important;
}

.cl-landing-image-scan-vf__dots {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
}

.cl-landing-image-scan-vf__dots span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: #22d3ee;
  opacity: 0.35;
  animation: cl-image-scan-dot 1s infinite ease-in-out;
}

.cl-landing-image-scan-vf__dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.cl-landing-image-scan-vf__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes cl-image-scan-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-landing-image-scan-vf__dots span {
    animation: none;
    opacity: 0.85;
  }
}

.cl-landing-image-scan-vf__camera-bar {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding:
    0.75rem 1.25rem
    max(0.9rem, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  pointer-events: none;
}

.cl-landing-image-scan-vf__camera-bar[hidden] {
  display: none !important;
}

.cl-landing-image-scan-vf__camera-bar .cl-camera-btn {
  pointer-events: auto;
  justify-self: center;
}

.cl-landing-image-scan-vf__camera-bar .cl-camera-btn--side:first-child {
  justify-self: start;
}

.cl-landing-image-scan-vf__camera-bar .cl-camera-btn--side:last-child,
.cl-landing-image-scan-vf__camera-bar .cl-camera-btn-spacer {
  justify-self: end;
}

.cl-camera-btn-spacer {
  width: 3rem;
  height: 3rem;
  display: block;
}

.cl-camera-btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #f8fafc;
  background: color-mix(in srgb, #1a1a24 78%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #e2e8f0 18%, transparent),
    0 8px 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cl-camera-btn--side {
  width: 3rem;
  height: 3rem;
  font-size: 1.05rem;
}

.cl-camera-btn--primary {
  width: 4.35rem;
  height: 4.35rem;
  font-size: 1.35rem;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, #22d3ee 35%, transparent), transparent 55%),
    color-mix(in srgb, var(--cl-colour-regular) 78%, #111);
  box-shadow:
    0 0 0 3px color-mix(in srgb, #f8fafc 78%, transparent),
    0 0 0 6px color-mix(in srgb, var(--cl-colour-regular) 45%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.55);
}

.cl-camera-btn--primary:active,
.cl-camera-btn--side:active {
  transform: scale(0.96);
}

.cl-camera-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* H2: keep a true 5:7 portrait card guide in landscape (height-led, not square). */
.cl-landing-image-scan-vf__rotate-nudge {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.cl-landing-image-scan-vf__rotate-nudge[hidden] {
  display: none !important;
}

@media (orientation: landscape) and (max-height: 520px) {
  .cl-landing-image-scan-vf__hint {
    display: none;
  }
  .cl-landing-image-scan-vf__guide--outer {
    width: auto;
    height: min(78dvh, 86%);
    max-width: min(42vw, 48%);
    max-height: min(78dvh, 86%);
    aspect-ratio: 5 / 7;
  }
  .cl-landing-image-scan-vf__guide--inner {
    width: auto;
    height: min(64dvh, 72%);
    max-width: min(34vw, 40%);
    max-height: min(64dvh, 72%);
    aspect-ratio: 5 / 7;
  }
}

/* --- Homepage barcode / QR mobile camera-screen viewfinder (H3) --- */
body.cl-landing-barcode-vf-open {
  overflow: hidden;
}

.cl-landing-barcode-vf {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  background: #05050a;
  color: var(--text);
  padding: 0;
  box-sizing: border-box;
}

.cl-landing-barcode-vf[hidden] {
  display: none !important;
}

.cl-landing-barcode-vf__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  cursor: crosshair;
  touch-action: manipulation;
}

.cl-landing-barcode-vf__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.cl-landing-barcode-vf__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, 0.62) 100%);
}

.cl-landing-barcode-vf__guide {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(72vw, 18.5rem);
  aspect-ratio: 1;
  max-height: min(52dvh, 18.5rem);
  box-sizing: border-box;
  pointer-events: none;
  border-radius: 0.55rem;
  border: 1.5px solid color-mix(in srgb, #e2e8f0 42%, transparent);
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.38),
    0 0 0 1px color-mix(in srgb, var(--cl-colour-regular) 35%, transparent),
    0 0 28px color-mix(in srgb, var(--cl-colour-regular) 28%, transparent);
  overflow: hidden;
  background:
    linear-gradient(#22d3ee, #22d3ee) left top / 1.25rem 3px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) left top / 3px 1.25rem no-repeat,
    linear-gradient(#22d3ee, #22d3ee) right top / 1.25rem 3px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) right top / 3px 1.25rem no-repeat,
    linear-gradient(#22d3ee, #22d3ee) left bottom / 1.25rem 3px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) left bottom / 3px 1.25rem no-repeat,
    linear-gradient(#22d3ee, #22d3ee) right bottom / 1.25rem 3px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) right bottom / 3px 1.25rem no-repeat;
}

.cl-landing-barcode-vf__qr-silhouette {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, #e2e8f0 28%, transparent);
  font-size: clamp(3.5rem, 22vw, 5.5rem);
  text-shadow: 0 0 24px color-mix(in srgb, var(--cl-colour-regular) 35%, transparent);
  opacity: 0.55;
}

.cl-landing-barcode-vf__scan-line {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  top: 12%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #22d3ee 85%, #fff),
    transparent
  );
  box-shadow:
    0 0 10px color-mix(in srgb, #22d3ee 70%, transparent),
    0 0 22px color-mix(in srgb, var(--cl-colour-regular) 45%, transparent);
  animation: cl-landing-barcode-scan-line 2.1s ease-in-out infinite;
}

@keyframes cl-landing-barcode-scan-line {
  0%,
  100% {
    top: 14%;
    opacity: 0.55;
  }
  50% {
    top: 82%;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-landing-barcode-vf__scan-line {
    animation: none;
    top: 50%;
    opacity: 0.85;
  }
}

.cl-landing-barcode-vf__top {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  gap: 0.35rem;
  padding:
    max(0.55rem, env(safe-area-inset-top, 0px))
    0.75rem
    0.35rem;
  pointer-events: none;
  text-align: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
}

.cl-landing-barcode-vf__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  justify-self: center;
}

.cl-landing-barcode-vf__top-spacer {
  width: 3rem;
  height: 3rem;
}

.cl-landing-barcode-vf__top .cl-camera-flip-btn,
.cl-landing-barcode-vf__top .cl-camera-btn--flip {
  pointer-events: auto;
  justify-self: start;
}

.cl-landing-barcode-vf__hint {
  position: absolute;
  z-index: 5;
  left: 1rem;
  right: 1rem;
  bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px));
  margin: 0;
  color: color-mix(in srgb, #e2e8f0 88%, transparent);
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.cl-landing-barcode-vf__status {
  position: absolute;
  z-index: 6;
  left: 1rem;
  right: 1rem;
  bottom: calc(5.15rem + env(safe-area-inset-bottom, 0px));
  margin: 0;
  min-height: 1rem;
  font-size: 0.8rem;
  color: color-mix(in srgb, #94a3b8 92%, transparent);
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.cl-landing-barcode-vf__camera-bar {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding:
    0.75rem 1.25rem
    max(0.9rem, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  pointer-events: none;
}

.cl-landing-barcode-vf__camera-bar .cl-camera-btn {
  pointer-events: auto;
  justify-self: center;
}

.cl-landing-barcode-vf__camera-bar .cl-camera-btn--side:first-child {
  justify-self: start;
}

.cl-landing-barcode-vf__camera-bar .cl-camera-btn--side:last-child {
  justify-self: end;
}

@media (orientation: landscape) and (max-height: 520px) {
  .cl-landing-barcode-vf__hint {
    display: none;
  }
  .cl-landing-barcode-vf__guide {
    width: min(42vw, 14rem);
    max-height: min(72dvh, 14rem);
  }
}

.cl-landing-multisearch__tray {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease, opacity 180ms ease, margin-top 180ms ease;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
}

.cl-landing-multisearch__tray--open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0.65rem;
}

.cl-landing-multisearch__tray[hidden] {
  display: none;
}

.cl-landing-multisearch__tray-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--cl-colour-accent) 12%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, var(--cl-colour-accent) 30%);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.cl-landing-tool-form {
  display: contents;
}

.cl-landing-tool {
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.35rem 0.25rem;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  line-height: 1;
}

.cl-landing-tool:hover {
  border-color: color-mix(in srgb, var(--cl-colour-accent) 55%, var(--border-subtle));
}

.cl-landing-tool i,
.cl-landing-tool__hub-logo,
.cl-landing-tool__events-logo {
  font-size: 1.1rem;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.cl-landing-tool--hub .cl-landing-tool__hub-logo,
.cl-landing-tool--events .cl-landing-tool__events-logo {
  width: 1.45rem;
  height: 1.45rem;
}

.cl-landing-tool--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Compact version label beside icon (e.g. camera + "- V0.5"). */
.cl-landing-tool--labelled {
  gap: 0.28rem;
  padding: 0.35rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.cl-landing-tool--labelled span {
  line-height: 1.1;
  min-width: 0;
}

/* Result tiles: denser binder-like scale (~25% up from Stage 3); hover + tap flip. */
.cl-landing-page .cl-browser-grid {
  --cl-results-card-min: 110px;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-results-card-min), 1fr));
}

/* Override global browser hover/focus-within; landing owns flip behaviour.
   Hover flips on fine pointers; --flipped and --pinned keep the back face open. */
.cl-landing-page .cl-browser-card:hover .cl-browser-card-inner,
.cl-landing-page .cl-browser-card:focus-within .cl-browser-card-inner {
  -webkit-transform: none;
  transform: none;
}

.cl-landing-page .cl-landing-card.cl-landing-card--flipped .cl-browser-card-inner,
.cl-landing-page .cl-landing-card.cl-landing-card--pinned .cl-browser-card-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .cl-landing-page .cl-landing-card:hover .cl-browser-card-inner,
  .cl-landing-page .cl-landing-card.cl-landing-card--flipped .cl-browser-card-inner,
  .cl-landing-page .cl-landing-card.cl-landing-card--pinned .cl-browser-card-inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

/*
 * iPhone / iOS WebKit (Safari + Chrome): 3D flip cards with preserve-3d +
 * backface-visibility often paint completely blank faces while the status
 * text still says "Showing N…". Use a flat show/hide swap on touch instead.
 * Class hook (.cl-landing-page--touch-cards) is set from JS when coarse/no-hover matches.
 */
@media (hover: none), (pointer: coarse) {
  .cl-landing-page .cl-browser-card,
  .cl-landing-page.cl-landing-page--touch-cards .cl-browser-card {
    -webkit-perspective: none;
    perspective: none;
    width: 100%;
    min-height: 9.5rem;
  }

  .cl-landing-page .cl-browser-card-inner,
  .cl-landing-page.cl-landing-page--touch-cards .cl-browser-card-inner {
    -webkit-transform-style: flat;
    transform-style: flat;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none;
    transition: none;
  }

  .cl-landing-page .cl-browser-card-face,
  .cl-landing-page.cl-landing-page--touch-cards .cl-browser-card-face {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-transform: none !important;
    transform: none !important;
  }

  .cl-landing-page .cl-browser-card-face--front,
  .cl-landing-page.cl-landing-page--touch-cards .cl-browser-card-face--front {
    display: flex;
    z-index: 1;
  }

  .cl-landing-page .cl-browser-card-face--back,
  .cl-landing-page.cl-landing-page--touch-cards .cl-browser-card-face--back {
    display: none;
    z-index: 2;
  }

  .cl-landing-page .cl-landing-card.cl-landing-card--flipped .cl-browser-card-face--front,
  .cl-landing-page .cl-landing-card.cl-landing-card--pinned .cl-browser-card-face--front,
  .cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.cl-landing-card--flipped .cl-browser-card-face--front,
  .cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.cl-landing-card--pinned .cl-browser-card-face--front {
    display: none;
  }

  .cl-landing-page .cl-landing-card.cl-landing-card--flipped .cl-browser-card-face--back,
  .cl-landing-page .cl-landing-card.cl-landing-card--pinned .cl-browser-card-face--back,
  .cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.cl-landing-card--flipped .cl-browser-card-face--back,
  .cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.cl-landing-card--pinned .cl-browser-card-face--back {
    display: flex;
  }

  [data-cl-landing-results-grid].is-cl-landing-results-ready,
  .cl-landing-card.is-cl-landing-card-ready {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Also apply when JS marks the page, even if media query differs. */
.cl-landing-page.cl-landing-page--touch-cards .cl-browser-card {
  -webkit-perspective: none;
  perspective: none;
  width: 100%;
  min-height: 9.5rem;
}

.cl-landing-page.cl-landing-page--touch-cards .cl-browser-card-inner {
  -webkit-transform-style: flat;
  transform-style: flat;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: none;
  transition: none;
}

.cl-landing-page.cl-landing-page--touch-cards .cl-browser-card-face {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform: none !important;
  transform: none !important;
}

.cl-landing-page.cl-landing-page--touch-cards .cl-browser-card-face--front {
  display: flex;
  z-index: 1;
}

.cl-landing-page.cl-landing-page--touch-cards .cl-browser-card-face--back {
  display: none;
  z-index: 2;
}

.cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.cl-landing-card--flipped .cl-browser-card-face--front,
.cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.cl-landing-card--pinned .cl-browser-card-face--front {
  display: none;
}

.cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.cl-landing-card--flipped .cl-browser-card-face--back,
.cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.cl-landing-card--pinned .cl-browser-card-face--back {
  display: flex;
}

.cl-landing-page.cl-landing-page--touch-cards [data-cl-landing-results-grid].is-cl-landing-results-ready,
.cl-landing-page.cl-landing-page--touch-cards .cl-landing-card.is-cl-landing-card-ready {
  animation: none !important;
  opacity: 1 !important;
}

.cl-landing-page .cl-landing-card {
  cursor: pointer;
  outline: none;
}

.cl-landing-page .cl-landing-card:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-glow);
  border-radius: var(--radius);
}

.cl-landing-card-back {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0.35rem 0.35rem 2.6rem;
  gap: 0.3rem;
  overflow: hidden;
}

.cl-landing-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  align-content: flex-start;
  max-height: calc(100% - 0.25rem);
  overflow: hidden;
}

.cl-landing-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cl-landing-chip--quiet {
  background: rgba(0, 0, 0, 0.42);
  font-weight: 500;
}

.cl-landing-card-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.4rem;
  padding: 0 0.35rem 0.35rem;
  pointer-events: none;
}

.cl-landing-card-actions__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 10, 16, 0.92) 0%,
    rgba(8, 10, 16, 0.45) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.cl-landing-card-action {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  width: 1.85rem;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* C2: Modest phone bump for card + preview icon hit targets (not full 44px redesign). */
@media (max-width: 768px) {
  .cl-landing-card-actions {
    min-height: 2.55rem;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .cl-landing-card-action {
    width: 2.2rem;
    min-width: 2.2rem;
    height: 2.2rem;
  }

  .cl-landing-preview-modal-root .cl-modal-icon-action,
  .cl-landing-preview-modal-root .cl-modal-close {
    width: 2.05rem;
    height: 2.05rem;
  }
}

.cl-landing-card-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cl-landing-preview-modal-root .cl-landing-preview-modal {
  width: min(96vw, 56rem);
}

.cl-landing-preview-modal--no-btm .cl-modal-work-area {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.cl-landing-preview-modal-root .cl-modal-top {
  gap: 0.5rem;
}

.cl-landing-preview-modal-root .cl-modal-action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}

.cl-landing-preview-modal-root .cl-modal-icon-action,
.cl-landing-preview-modal-root .cl-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  background: transparent;
  color: color-mix(in srgb, #fff 70%, var(--text-muted) 30%);
  cursor: pointer;
  line-height: 1;
  font-size: 0.78rem;
}

.cl-landing-preview-modal-root .cl-modal-icon-action:hover,
.cl-landing-preview-modal-root .cl-modal-icon-action:focus-visible,
.cl-landing-preview-modal-root .cl-modal-close:hover,
.cl-landing-preview-modal-root .cl-modal-close:focus-visible {
  outline: none;
  color: #fff;
  border-color: color-mix(in srgb, var(--cl-colour-active) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 50%, var(--cl-colour-active) 50%);
}

.cl-landing-preview-modal-root .cl-modal-icon-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: color-mix(in srgb, #fff 45%, var(--text-muted) 55%);
}

.cl-landing-preview-modal-root .cl-modal-icon-action[aria-disabled="true"],
.cl-landing-preview-modal-root .cl-modal-icon-action.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: color-mix(in srgb, #fff 45%, var(--text-muted) 55%);
}

.cl-landing-card-action[aria-disabled="true"],
.cl-landing-card-action.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cl-landing-preview-modal-root .cl-modal-icon-action:disabled:hover,
.cl-landing-preview-modal-root .cl-modal-icon-action:disabled:focus-visible {
  background: transparent;
  border-color: color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  color: color-mix(in srgb, #fff 45%, var(--text-muted) 55%);
}

.cl-landing-preview-modal-root .cl-modal-icon-action[aria-disabled="true"]:hover,
.cl-landing-preview-modal-root .cl-modal-icon-action[aria-disabled="true"]:focus-visible,
.cl-landing-preview-modal-root .cl-modal-icon-action.is-disabled:hover,
.cl-landing-preview-modal-root .cl-modal-icon-action.is-disabled:focus-visible {
  background: transparent;
  border-color: color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  color: color-mix(in srgb, #fff 45%, var(--text-muted) 55%);
}

.cl-landing-preview-modal-root .cl-landing-preview-addto {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.cl-landing-preview-modal-root .cl-landing-preview-addto .cl-addto-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.cl-landing-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.cl-landing-preview-work {
  overflow: auto;
}

.cl-landing-preview-images,
.cl-landing-preview-details {
  min-width: 0;
}

.cl-landing-preview-modal-root .cl-landing-preview-open {
  flex: 0 1 auto;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .cl-landing-preview-modal-root {
    top: 0;
    bottom: 0;
    padding: 0;
  }
  .cl-landing-preview-modal-root .cl-landing-preview-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .cl-landing-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cl-landing-preview-modal-root .cl-landing-preview-open {
    font-size: 0.78rem;
    white-space: normal;
    min-width: 0;
  }
  .cl-landing-preview-modal-root .cl-modal-action-cluster {
    gap: 0.28rem;
  }
  .cl-landing-preview-modal--no-btm .cl-landing-preview-work {
    padding-bottom: 5.5rem;
  }
}

.cl-landing-page .cl-browser-card-meta--front {
  padding: 0.25rem 0.35rem;
  font-size: 0.66rem;
}

.cl-landing-page .cl-browser-card-meta-name {
  font-size: 0.66rem;
  line-height: 1.15;
}

.cl-landing-page .cl-browser-card-meta-sub {
  font-size: 0.6rem;
}

.cl-landing-page .cl-browser-card-face--back {
  padding: 0.35rem 0.4rem;
  gap: 0.22rem;
}

.cl-landing-page .cl-browser-card-back-row,
.cl-landing-page .cl-browser-card-meta-row {
  font-size: 0.62rem;
  gap: 0.2rem;
}

.cl-landing-page .cl-browser-card-back-key,
.cl-landing-page .cl-browser-card-meta-key {
  font-size: 0.58rem;
}

.cl-landing-page .cl-browser-card-back-val,
.cl-landing-page .cl-browser-card-meta-value {
  font-size: 0.62rem;
}

.cl-landing-card__image--missing {
  background: color-mix(in srgb, var(--bg-card) 80%, var(--text-muted) 20%);
  min-height: 100%;
}

.cl-landing-selector-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.45rem;
  align-items: end;
}

.cl-landing-selector {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.cl-landing-selector__label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cl-landing-selector__control {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.4rem 0.55rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text);
}

.cl-landing-selector__reset {
  min-width: 2.75rem;
  min-height: 2.35rem;
}

/* --- H5: Midnight Arcade cabinet filter dials --- */
.cl-filter-dial-root {
  --cl-filter-dial-item-h: 2.125rem;
  --cl-filter-dial-viewport-h: 9.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  margin-top: 0;
  padding-top: 0;
}

/* Catalogue-search polish: remove gem separator; keep tiny gap before tray notch. */
.cl-filter-dial-separator {
  display: block;
  width: 100%;
  height: 0.15rem;
  margin: 0;
  border: 0;
  pointer-events: none;
  background: transparent;
}

.cl-filter-dial-separator__line,
.cl-filter-dial-separator__gem {
  display: none;
}

/* Global multisearch aliases (location via data-cl-*; visuals shared). */
.cl-multisearch {
  position: relative;
}

.cl-landing-search-band {
  position: relative;
}

/* Band with tray: no empty bottom strip — notch hangs off the band lip. */
.cl-landing-search-band:has(.cl-search-tray-host) {
  padding-bottom: 0.2rem;
  margin-bottom: calc(var(--cl-tray-notch-h, 0.9rem) - 0.15rem);
}

/*
 * Tray host grows from notch → full sheet height.
 * Sheet is bottom-aligned: closed peeks the notch; open slides the notch down
 * and reveals the tray above it (dials stay clear — host only expands downward).
 */
.cl-search-tray-host {
  --cl-tray-notch-h: 0.9rem;
  --cl-tray-sheet-h: 12rem;
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: var(--cl-tray-notch-h);
  margin-top: 0.1rem;
  margin-bottom: calc(-1 * var(--cl-tray-notch-h) + 0.15rem);
  overflow: hidden;
  background: transparent;
  transition: height 300ms cubic-bezier(0.22, 0.65, 0.32, 1);
}

.cl-search-tray-host:has(.cl-search-tray-sheet.is-cl-tray-open) {
  height: var(--cl-tray-sheet-h);
  margin-bottom: 0;
}

.cl-search-tray-host:has(.cl-search-tray-sheet.is-cl-tray-closing) {
  height: var(--cl-tray-notch-h);
  margin-bottom: calc(-1 * var(--cl-tray-notch-h) + 0.15rem);
}

.cl-landing-search-band:has(.cl-search-tray-sheet.is-cl-tray-open),
.cl-landing-search-band:has(.cl-search-tray-sheet.is-cl-tray-closing) {
  margin-bottom: 0;
}

.cl-search-tray-sheet {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  pointer-events: none;
}

.cl-search-tray-sheet.is-cl-tray-open {
  pointer-events: auto;
}

.cl-search-tray-sheet.is-cl-tray-closing {
  pointer-events: none;
}

.cl-search-tray {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1;
  width: 100%;
  margin-top: 0;
  padding: 0.7rem 0.75rem 0.75rem;
  line-height: normal;
  border-radius: var(--radius-lg, var(--radius)) var(--radius-lg, var(--radius)) 0 0;
  border: 1px solid color-mix(in srgb, var(--cl-text-gradient-via) 35%, var(--border-subtle));
  border-bottom: 0;
  background-image: linear-gradient(
    var(--cl-text-gradient-angle),
    color-mix(in srgb, var(--cl-text-gradient-from) 68%, #120816 32%) 0%,
    color-mix(in srgb, var(--cl-text-gradient-via) 62%, #0e0618 38%) 48%,
    color-mix(in srgb, var(--cl-text-gradient-to) 50%, #071018 50%) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 12px 28px color-mix(in srgb, #000 32%, transparent);
}

.cl-search-tray-sheet:not(.is-cl-tray-open):not(.is-cl-tray-closing) .cl-search-tray {
  /* Still laid out for height measurement; clipped by the notch-tall host. */
  pointer-events: none;
}

.cl-search-tray[hidden] {
  display: block !important;
}

.cl-browser-controls--band-attach {
  margin-top: 0.35rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0 0 var(--radius-lg, var(--radius)) var(--radius-lg, var(--radius));
  border: 1px solid color-mix(in srgb, var(--cl-text-gradient-via) 28%, var(--border-subtle));
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cl-text-gradient-via) 28%, #121018 72%) 0%,
    color-mix(in srgb, var(--bg-card, #16161c) 92%, #000 8%) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.cl-directory-variant-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  grid-column: 1 / -1;
}

.cl-search-tray__row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55rem;
  align-items: flex-end;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.05rem 0 0.2rem;
}

.cl-search-tray__field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 6.5rem;
  flex: 0 0 auto;
  line-height: normal;
}

.cl-search-tray__label {
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}

/*
 * Notch = band lip tab. Same gradient/border as the search band so it reads as
 * a cutout, not a second chip. Height matches the host so the tray never peeks
 * as a full-width dark strip behind it.
 */
.cl-tray-pull {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  height: var(--cl-tray-notch-h, 0.9rem);
  min-height: var(--cl-tray-notch-h, 0.9rem);
  margin: 0 auto;
  padding: 0 0.85rem 0.08rem;
  border: 1px solid color-mix(in srgb, var(--cl-text-gradient-via) 35%, var(--border-subtle));
  border-top: 0;
  border-radius: 0 0 0.65rem 0.65rem;
  /* Match .cl-landing-search-band fill so the tab is continuous with the band. */
  background-image: linear-gradient(
    var(--cl-text-gradient-angle),
    color-mix(in srgb, var(--cl-text-gradient-from) 72%, #120816 28%) 0%,
    color-mix(in srgb, var(--cl-text-gradient-via) 68%, #0e0618 32%) 48%,
    color-mix(in srgb, var(--cl-text-gradient-to) 55%, #071018 45%) 100%
  );
  box-shadow: none;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
}

.cl-tray-pull__grip {
  display: none;
}

.cl-tray-pull__line {
  display: none;
}

.cl-tray-pull__chevron {
  font-size: 0.5rem;
  line-height: 1;
  color: color-mix(in srgb, #fff 78%, var(--cl-colour-regular) 22%);
  opacity: 0.85;
  transition: transform 180ms ease, color 160ms ease, opacity 160ms ease;
}

.cl-tray-pull:hover .cl-tray-pull__chevron {
  opacity: 1;
  color: color-mix(in srgb, #fff 90%, var(--cl-colour-active) 10%);
}

.cl-tray-pull[aria-expanded="true"] .cl-tray-pull__chevron {
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--cl-colour-active) 75%, #fff 25%);
  opacity: 1;
}

/*
 * Wide-gutter search rail — same tray node, left viewport edge.
 * Switch-on: container at 1440 + both gutters can hold --cl-search-rail-min.
 */
@media (min-width: calc(1440px + 2 * 15rem)) {
  .cl-landing-search-band:has(.cl-search-tray-host:not([data-cl-tray-inline])),
  .cl-landing-search-band:has(.cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray-sheet.is-cl-tray-open),
  .cl-landing-search-band:has(.cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray-sheet.is-cl-tray-closing) {
    padding-bottom: 0.4rem;
    margin-bottom: 0;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]),
  .cl-search-tray-host:not([data-cl-tray-inline]):has(.cl-search-tray-sheet.is-cl-tray-open),
  .cl-search-tray-host:not([data-cl-tray-inline]):has(.cl-search-tray-sheet.is-cl-tray-closing) {
    position: fixed;
    top: var(--cl-navbar-height);
    bottom: var(--cl-footer-bar-height);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
    width: min(var(--cl-search-rail-max), calc((100vw - var(--cl-page-max)) / 2));
    height: auto;
    margin: 0;
    overflow: hidden;
    background: transparent;
    transition: none;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray-sheet,
  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray-sheet.is-cl-tray-open,
  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray-sheet.is-cl-tray-closing {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: stretch;
    pointer-events: auto;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 1rem 0.85rem 1.1rem;
    overflow: hidden;
    border-radius: 0;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--cl-text-gradient-via) 35%, var(--border-subtle));
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--cl-text-gradient-from) 68%, #120816 32%) 0%,
      color-mix(in srgb, var(--cl-text-gradient-via) 62%, #0e0618 38%) 48%,
      color-mix(in srgb, var(--cl-text-gradient-to) 50%, #071018 50%) 100%
    );
    box-shadow: inset -1px 0 0 color-mix(in srgb, #fff 5%, transparent);
    pointer-events: auto;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray-sheet:not(.is-cl-tray-open):not(.is-cl-tray-closing) .cl-search-tray {
    pointer-events: auto;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray__inner,
  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray .cl-row-swipe__track {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--cl-text-gradient-via) 45%, transparent) transparent;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray .cl-row-swipe.is-cl-row-swipe-active,
  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray .cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray__row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.7rem;
    width: 100%;
    overflow: visible;
    padding: 0;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray__field {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray .cl-select,
  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray .cl-input {
    width: 100%;
    max-width: 100%;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray .cl-collection-add-purchase {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    margin-top: 0.15rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid color-mix(in srgb, #fff 18%, var(--border-subtle));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-card) 88%, #000 12%);
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray .cl-collection-add-purchase:hover,
  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-search-tray .cl-collection-add-purchase:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--cl-colour-active) 58%, var(--border-subtle));
    background: color-mix(in srgb, var(--bg-elevated) 70%, var(--cl-colour-accent) 30%);
  }

  .cl-search-tray-host:not([data-cl-tray-inline]) .cl-tray-pull {
    display: none !important;
  }

  html.cl-collection-tray-open .cl-search-tray-host:not([data-cl-tray-inline]) {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Mode tabs must honour hidden (Browser collapse). */
.cl-mode-tabs[hidden] {
  display: none !important;
}

/* Results / selection bars stay in normal flow (do not float). */
.cl-search-results-bar,
.cl-browser-selection-bar,
.cl-controls-row {
  position: relative;
  z-index: 1;
}

/* Shared view presenter basics */
.cl-search-view--staff,
.cl-results-table-host {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  grid-template-columns: none;
  gap: 0;
}

[data-cl-browser-results] .cl-results-table-host,
[data-cl-browser-results] .cl-search-view--staff,
.cl-landing-page .cl-results-table-host {
  display: block;
  width: 100%;
  overflow: visible;
  grid-template-columns: none;
  gap: 0;
}

.cl-staff-search-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.cl-staff-search-table th,
.cl-staff-search-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cl-colour-regular) 18%, transparent);
  text-align: left;
  white-space: nowrap;
}

.cl-staff-search-row {
  cursor: pointer;
}

.cl-staff-search-row:hover {
  background: color-mix(in srgb, var(--cl-colour-regular) 10%, transparent);
}

.cl-results-id-list,
.cl-results-id-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.cl-results-id-head,
.cl-results-id-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.38rem 0.45rem;
}

.cl-results-id-head {
  color: color-mix(in srgb, #fff 72%, var(--text-muted) 28%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid color-mix(in srgb, var(--cl-colour-regular) 22%, transparent);
}

.cl-results-id-row {
  cursor: default;
  border-bottom: 1px solid color-mix(in srgb, var(--cl-colour-regular) 16%, transparent);
}

.cl-results-id-row.cl-results-row--navigable {
  cursor: pointer;
}

.cl-results-id-list .cl-results-cell {
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.cl-results-id-list .cl-results-cell--check {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  text-align: center;
}

.cl-results-id-list .cl-results-cell--lang {
  flex: 0 0 2.4rem;
  width: 2.4rem;
  font-variant-numeric: tabular-nums;
}

.cl-results-id-list .cl-results-cell--set {
  flex: 0 0 4rem;
  width: 4rem;
}

.cl-results-id-list .cl-results-cell--number {
  flex: 0 0 3.2rem;
  width: 3.2rem;
  font-variant-numeric: tabular-nums;
}

.cl-results-id-list .cl-results-cell--name {
  flex: 1 1 14rem;
  min-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 650;
}

.cl-results-id-list .cl-results-cell--chips {
  flex: 1 1 10rem;
  min-width: 5rem;
  white-space: normal;
}

.cl-results-id-list .cl-results-cell--status {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}

.cl-results-id-list .cl-results-cell--add {
  flex: 0 0 auto;
  text-align: right;
}

.cl-results-table-chips,
.cl-results-table-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  align-items: center;
}

.cl-results-table-status {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.cl-results-table-chip {
  max-width: 16rem;
  font-size: 0.72rem;
}

.cl-results-qty-chip {
  gap: 0.28rem;
  font-variant-numeric: tabular-nums;
}

.cl-results-barcode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--cl-colour-highlight, var(--cl-colour-accent)) 75%, var(--text));
  cursor: pointer;
}

.cl-results-barcode-btn:hover,
.cl-results-barcode-btn:focus-visible,
.cl-results-barcode-btn[data-cl-copied] {
  background: color-mix(in srgb, var(--cl-colour-accent) 18%, transparent);
  outline: none;
}

.cl-results-shopify-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  color: #95bf47;
  font-size: 1rem;
}

[data-cl-ws-search-results] {
  min-height: 8rem;
}

.cl-search-view__wip {
  padding: 1.5rem;
  text-align: center;
  opacity: 0.75;
}

.cl-directory-entry-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}

.cl-directory-entry-row .cl-directory-entry {
  flex: 1 1 auto;
  text-align: left;
}

.cl-directory-entry__eye {
  flex: 0 0 auto;
}

.cl-directory-entry__meta {
  display: block;
  font-size: 0.78rem;
  opacity: 0.7;
}

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

.cl-filter-dial-slots {
  display: grid;
  /* Reset | Game | Language | Set | Lock */
  grid-template-columns: 2.35rem repeat(3, minmax(0, 1fr)) 2.35rem;
  gap: 0.35rem;
  align-items: stretch;
  max-height: 3.5rem; /* explicit so mobile collapse can animate */
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    max-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 220ms ease;
}

.cl-filter-dial {
  appearance: none;
  margin: 0;
  min-width: 0;
  min-height: 2.3rem;
  padding: 0.28rem 0.4rem;
  border-radius: calc(var(--radius) + 1px);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, var(--cl-colour-accent) 20%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 7%, transparent),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-elevated) 70%, #000 30%),
      color-mix(in srgb, var(--bg-card) 88%, #000 12%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
    inset 0 -9px 16px color-mix(in srgb, #000 28%, transparent),
    0 1px 0 color-mix(in srgb, #000 35%, transparent);
  color: color-mix(in srgb, #fff 50%, var(--text-muted) 50%);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.cl-filter-dial--has-value {
  color: #f3e8ff;
  border-color: color-mix(in srgb, var(--cl-colour-regular) 38%, var(--border-subtle));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    inset 0 -8px 14px color-mix(in srgb, #000 18%, transparent),
    0 0 10px color-mix(in srgb, var(--cl-colour-regular) 16%, transparent);
}

.cl-filter-dial--active {
  border-color: color-mix(in srgb, var(--cl-colour-active) 48%, var(--border-subtle));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cl-colour-active) 32%, transparent),
    0 0 14px color-mix(in srgb, var(--cl-colour-regular) 22%, transparent);
}

.cl-filter-dial__face {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-filter-dial-lock,
.cl-filter-dial-reset {
  min-width: 2.3rem;
  min-height: 2.3rem;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  font-size: 0.85rem;
  border-radius: calc(var(--radius) + 1px);
}

.cl-filter-dial-root--locked .cl-filter-dial {
  opacity: 0.72;
  cursor: not-allowed;
}

.cl-filter-dial-root--locked .cl-filter-dial-lock,
.cl-filter-dial-lock[aria-pressed="true"] {
  color: #f3e8ff;
  border-color: color-mix(in srgb, var(--cl-colour-active) 48%, var(--border-subtle));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cl-colour-active) 36%, transparent),
    0 0 12px color-mix(in srgb, var(--cl-colour-regular) 22%, transparent);
}

/* Expanded reel ? slim header + inset window (not chunky side buttons) */
.cl-filter-dial-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg, 12px);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cl-colour-regular) 10%, transparent), transparent 55%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-elevated) 96%, #000 4%),
      color-mix(in srgb, var(--bg-card) 86%, #000 14%)
    );
  box-shadow: none;
  transition:
    grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 240ms ease,
    padding 240ms ease,
    border-color 240ms ease,
    box-shadow 280ms ease;
}

/* Inner chrome only visible while open (keeps collapse clean) */
.cl-filter-dial-root--open .cl-filter-dial-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  margin-top: 0.05rem;
  padding: 0.4rem 0.45rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--cl-colour-regular) 5%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.3);
}

.cl-filter-dial-panel[hidden] {
  display: none !important;
}

.cl-filter-dial-panel__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
  overflow: hidden;
}

.cl-filter-dial-panel__header {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.85rem;
}

.cl-filter-dial-panel__title {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cl-colour-active) 55%, #fff 45%);
  text-shadow: 0 0 10px color-mix(in srgb, var(--cl-colour-regular) 30%, transparent);
}

.cl-filter-dial-icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 75%, var(--cl-colour-regular) 25%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 85%, #000 15%);
  color: color-mix(in srgb, #fff 70%, var(--text-muted) 30%);
  font-size: 0.78rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.cl-filter-dial-icon-btn:active {
  transform: scale(0.96);
}

.cl-filter-dial-confirm {
  color: color-mix(in srgb, var(--cl-colour-active) 65%, #fff 35%);
  border-color: color-mix(in srgb, var(--cl-colour-active) 35%, var(--border-subtle));
}

.cl-filter-dial-viewport {
  position: relative;
  height: var(--cl-filter-dial-viewport-h);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid color-mix(in srgb, #000 55%, var(--border-subtle));
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.4)),
    color-mix(in srgb, #000 45%, var(--bg-card));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55);
  overscroll-behavior: contain;
}

.cl-filter-dial-viewport::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cl-filter-dial-window {
  position: sticky;
  top: calc((var(--cl-filter-dial-viewport-h) - var(--cl-filter-dial-item-h)) / 2);
  z-index: 2;
  height: var(--cl-filter-dial-item-h);
  margin-bottom: calc(-1 * var(--cl-filter-dial-item-h));
  pointer-events: none;
  border-top: 1px solid color-mix(in srgb, var(--cl-colour-regular) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cl-colour-regular) 45%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--cl-colour-regular) 18%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--cl-colour-active) 8%, transparent);
  background: color-mix(in srgb, var(--cl-colour-regular) 7%, transparent);
}

.cl-filter-dial-reel {
  position: relative;
  z-index: 1;
}

.cl-filter-dial-reel__pad {
  height: calc((var(--cl-filter-dial-viewport-h) - var(--cl-filter-dial-item-h)) / 2);
  pointer-events: none;
}

.cl-filter-dial-item {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cl-filter-dial-item-h);
  margin: 0;
  padding: 0 0.65rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, #fff 42%, var(--text-muted) 58%);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: center;
  scroll-snap-align: center;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-filter-dial-item--center {
  color: #fff;
  font-weight: 650;
  font-size: 0.88rem;
  text-shadow: 0 0 10px color-mix(in srgb, var(--cl-colour-regular) 38%, transparent);
}

/* Mobile: slots collapse while the reel expands into place */
@media (max-width: 768px) {
  .cl-filter-dial-root--mobile.cl-filter-dial-root--open .cl-filter-dial-slots {
    max-height: 0;
    opacity: 0;
    margin: 0;
    transform: translateY(4px);
    overflow: hidden;
    pointer-events: none;
  }
}

/* Soft enter pulse when hopping fields with the panel already open */
@keyframes cl-filter-dial-panel-enter {
  from {
    opacity: 0.72;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cl-filter-dial-root--open .cl-filter-dial-panel.cl-filter-dial-panel--enter {
  animation: cl-filter-dial-panel-enter 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .cl-filter-dial-panel,
  .cl-filter-dial-slots {
    transition: none !important;
  }

  .cl-filter-dial-root--open .cl-filter-dial-panel.cl-filter-dial-panel--enter {
    animation: none;
  }

  .cl-filter-dial-root--mobile.cl-filter-dial-root--open .cl-filter-dial-slots {
    display: none;
  }

  .cl-filter-dial-root--overlay.cl-filter-dial-root--mobile.cl-filter-dial-root--open .cl-filter-dial-slots {
    display: grid;
  }

  .cl-filter-dial-panel--overlay,
  .cl-filter-dial-pointer,
  .cl-filter-dial-item__trunc,
  .cl-filter-dial-item__crawl {
    transition: none !important;
  }

  .cl-filter-dial-item__crawl-inner {
    animation: none !important;
  }
}

/* Overlay dial: 5-row reel on the button (intake + Search Spine). */
.cl-filter-dial-root--overlay {
  --cl-filter-dial-viewport-h: calc(5 * var(--cl-filter-dial-item-h));
  overflow: visible;
}

.cl-ii-hint-dials.cl-filter-dial-root--overlay .cl-filter-dial-panel {
  margin-top: 0;
}

/* Overlay reel is portaled to body. Never show the old below-slots panel. */
.cl-filter-dial-root--overlay > .cl-filter-dial-panel:not(.cl-filter-dial-panel--overlay) {
  display: none !important;
}

.cl-filter-dial-root--overlay.cl-filter-dial-root--open .cl-filter-dial--active .cl-filter-dial__face {
  visibility: hidden;
}

.cl-landing-search-band.cl-ii-overlay-dial-open,
.cl-landing-search-band.cl-ii-overlay-dial-open .cl-landing-multisearch__filters {
  overflow: visible;
}

.cl-ii-modal--add.cl-ii-overlay-dial-open .cl-modal,
.cl-ii-modal--add.cl-ii-overlay-dial-open .cl-modal-work-area,
.cl-ii-modal--add.cl-ii-overlay-dial-open .cl-modal-scroll {
  overflow: visible;
}

.cl-filter-dial-panel.cl-filter-dial-panel--overlay {
  position: fixed;
  display: block;
  box-sizing: border-box;
  grid-template-rows: none;
  opacity: 0;
  transform: none;
  pointer-events: none;
  overflow: hidden;
  margin: 0;
  padding: 0.12rem;
  z-index: 10060;
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 28%, var(--border-subtle));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.3);
  transition: opacity 280ms ease;
}

.cl-filter-dial-panel.cl-filter-dial-panel--overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
  margin: 0;
  padding: 0.12rem;
  transform: none;
}

.cl-filter-dial-panel.cl-filter-dial-panel--overlay[hidden] {
  display: none !important;
}

.cl-filter-dial-panel--overlay .cl-filter-dial-panel__header {
  display: none;
}

.cl-filter-dial-panel--overlay .cl-filter-dial-panel__body {
  gap: 0;
  height: 100%;
}

.cl-filter-dial-panel--overlay .cl-filter-dial-viewport {
  height: var(--cl-filter-dial-viewport-h);
  scroll-snap-type: y proximity;
}

.cl-filter-dial-pointer {
  position: fixed;
  z-index: 10061;
  transform: translate(-100%, -50%);
  margin: 0;
  padding: 0 0.05rem 0 0;
  pointer-events: none;
  opacity: 0;
  color: color-mix(in srgb, var(--cl-colour-active) 70%, #fff 30%);
  font-size: 0.72rem;
  line-height: 1;
  text-shadow: 0 0 8px color-mix(in srgb, var(--cl-colour-regular) 40%, transparent);
  transition: opacity 280ms ease;
}

.cl-filter-dial-pointer.is-on {
  opacity: 1;
}

.cl-filter-dial-panel--overlay .cl-filter-dial-item {
  position: relative;
  justify-content: flex-start;
  opacity: 0.42;
}

.cl-filter-dial-panel--overlay .cl-filter-dial-item--near {
  opacity: 0.62;
}

.cl-filter-dial-panel--overlay .cl-filter-dial-item--far {
  opacity: 0.28;
}

.cl-filter-dial-panel--overlay .cl-filter-dial-item--center {
  opacity: 1;
}

.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-window {
  top: 0;
}

.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-reel__pad:first-child {
  height: 0;
}

.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-reel__pad:last-child {
  height: calc(4 * var(--cl-filter-dial-item-h));
}

.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item {
  scroll-snap-align: start;
}

.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="0"] { opacity: 1; }
.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="1"] { opacity: 0.9; }
.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="2"] { opacity: 0.7; }
.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="3"] { opacity: 0.55; }
.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="4"],
.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="5"],
.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="6"],
.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="7"],
.cl-filter-dial-panel--overlay.is-top-anchor .cl-filter-dial-item[data-dist="8"] { opacity: 0.25; }

.cl-filter-dial-type-catcher {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  z-index: 1;
}

.cl-filter-dial-item__trunc,
.cl-filter-dial-item__crawl {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.cl-filter-dial-item__crawl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}

.cl-filter-dial-item.is-crawling .cl-filter-dial-item__trunc {
  opacity: 0;
  transition: opacity 280ms ease;
}

.cl-filter-dial-item.is-crawling .cl-filter-dial-item__crawl {
  opacity: 1;
  transition: opacity 280ms ease;
}

.cl-filter-dial-item__crawl-inner {
  display: inline-block;
  padding-left: 0.15rem;
  animation: cl-filter-dial-crawl 11s linear infinite;
}

@keyframes cl-filter-dial-crawl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .cl-filter-dial-root--overlay.cl-filter-dial-root--mobile.cl-filter-dial-root--open .cl-filter-dial-slots {
    max-height: none;
    opacity: 1;
    margin: unset;
    transform: none;
    overflow: visible;
    pointer-events: auto;
    display: grid;
  }
}

.cl-search-results-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.cl-search-results-stack > .cl-landing-multisearch,
.cl-search-results-stack > [data-cl-multisearch] {
  margin: 0;
}

.cl-search-results-stack > .cl-landing-multisearch__results,
.cl-search-results-stack > [data-cl-tab-work-area] > .cl-landing-multisearch__results {
  margin-top: 0;
}

.cl-main-container.cl-page-shell-viewport--tabbed > .cl-search-results-stack {
  flex: 1 1 auto;
  min-height: 0;
}

.cl-search-results-stack > [data-cl-tab-work-area] {
  flex: 1 1 auto;
  min-height: 0;
}

.cl-landing-multisearch__results {
  position: relative;
  margin-top: 0.35rem;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
}

/* Home page title row above shared multisearch. */
.cl-landing-page-heading {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin: 0 0 0.55rem;
  min-width: 0;
}

.cl-landing-page-heading .cl-page-title {
  flex: 0 1 auto;
  min-width: 0;
}

.cl-landing-page-heading .cl-page-subtitle {
  flex: 0 1 auto;
  margin: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 720px) {
  .cl-landing-page-heading .cl-page-subtitle {
    display: none;
  }
}

.cl-landing-results-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* Soft fade-in without opacity:0 gates — Safari/iOS can stall image decode
   (and leave blank result cards) while ancestors stay fully transparent. */
@keyframes cl-landing-results-fade-in {
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}

[data-cl-landing-results-grid].is-cl-landing-results-pending {
  opacity: 1;
  pointer-events: none;
}

[data-cl-landing-results-grid].is-cl-landing-results-ready {
  opacity: 1;
  pointer-events: auto;
  animation: cl-landing-results-fade-in 0.38s ease both;
}

.cl-landing-card.is-cl-landing-card-pending {
  opacity: 1;
}

.cl-landing-card.is-cl-landing-card-ready {
  opacity: 1;
  animation: cl-landing-results-fade-in 0.38s ease both;
}

@media (prefers-reduced-motion: reduce) {
  [data-cl-landing-results-grid].is-cl-landing-results-pending,
  [data-cl-landing-results-grid].is-cl-landing-results-ready,
  .cl-landing-card.is-cl-landing-card-pending,
  .cl-landing-card.is-cl-landing-card-ready {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Load-more sits in normal flow under results (readable, not clipped by chrome). */
.cl-landing-multisearch__results {
  position: relative;
}

.cl-landing-multisearch__results:has(.cl-landing-load-more:not([hidden])) .cl-landing-results-body {
  padding-bottom: 0.35rem;
}

.cl-landing-load-more {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  min-height: 3.25rem;
  padding: 0.55rem 0 0.85rem;
  border-top: none;
  margin: 0;
}

.cl-landing-load-more[hidden] {
  display: none !important;
}

.cl-landing-load-more-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg-card, var(--bg-page, #12141a)) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg-card, var(--bg-page, #12141a)) 55%, transparent) 48%,
    transparent 100%
  );
  pointer-events: none;
}

.cl-landing-load-more-btn {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle, #3a3f4a) 70%, transparent);
  background: color-mix(in srgb, var(--bg-card, #1c2028) 78%, transparent);
  color: var(--text, #f2f4f8);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 35%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.cl-landing-load-more-btn:hover:not(:disabled),
.cl-landing-load-more-btn:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--bg-card, #1c2028) 90%, var(--accent, #5b8cff) 10%);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 42%, transparent);
}

.cl-landing-load-more-btn:disabled,
.cl-landing-load-more-btn--loading {
  opacity: 0.82;
  cursor: wait;
  transform: none;
}

.cl-landing-load-more-btn__label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cl-landing-login-hint {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
}

/* H1: compact 4-slot mobile toolbar ? expands into search input row.
   Driven by cl_mobile_toolbar.js (.cl-mobile-toolbar--compact / --expanded). */
@keyframes cl-mobile-toolbar-expand-in {
  from {
    opacity: 0.72;
    transform: scaleX(0.55);
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: center;
  }
}

@media (max-width: 768px) {
  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    align-items: stretch;
  }

  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--compact [data-cl-mobile-toolbar-panel] {
    display: none !important;
  }

  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--compact .cl-landing-multisearch__scan-group {
    display: contents;
  }

  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--compact > .cl-landing-multisearch__submit,
  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--compact .cl-landing-multisearch__scan {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    justify-content: center;
  }

  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--expanded {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: stretch;
    animation: cl-mobile-toolbar-expand-in 240ms ease;
  }

  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--expanded [data-cl-mobile-toolbar-hide-when-expanded] {
    display: none !important;
  }

  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--expanded [data-cl-mobile-toolbar-panel] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem;
    align-items: stretch;
    min-width: 0;
  }

  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--expanded .cl-landing-multisearch__collapse {
    display: inline-flex;
  }

  .cl-landing-multisearch__main--has-query.cl-mobile-toolbar--compact [data-cl-mobile-toolbar-expand] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl-colour-active, var(--accent)) 55%, transparent);
  }

  .cl-landing-selector-row {
    grid-template-columns: 1fr 1fr;
  }
  .cl-landing-selector__reset {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .cl-landing-page .cl-browser-grid {
    --cl-results-card-min: 98px;
    gap: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-landing-multisearch__main.cl-mobile-toolbar--active.cl-mobile-toolbar--expanded {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-landing-multisearch__tray {
    transition: none;
  }
  .cl-landing-load-more-btn {
    transition: none;
  }
}

/* -----------------------------------------------------------------------
   Store peek tab ? left floating PCL storefront link (cl_store_tab.js)
   ----------------------------------------------------------------------- */

.cl-store-tab {
  --cl-store-tab-dur: 0.28s;
  --cl-store-tab-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cl-store-tab-collapsed-w: 1.7rem;
  --cl-store-tab-expanded-w: 9.6rem;
  position: fixed;
  left: 0;
  top: max(5.75rem, 28vh);
  z-index: var(--cl-store-tab-z);
  width: var(--cl-store-tab-collapsed-w);
  transition: width var(--cl-store-tab-dur) var(--cl-store-tab-ease);
  pointer-events: none;
  touch-action: none;
}

/* Right-edge Events peek tab (guests) ? mirrors store tab on the left */
.cl-store-tab--end {
  left: auto;
  right: 0;
  top: max(5.75rem, 46vh);
}
.cl-store-tab--end .cl-store-tab__panel {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-right: 0;
  border-radius: 0.55rem 0 0 0.55rem;
}

.cl-store-tab[hidden] {
  display: none !important;
}

.cl-store-tab.is-open {
  width: var(--cl-store-tab-expanded-w);
}

.cl-store-tab.is-dragging {
  transition: none;
  cursor: grabbing;
}

.cl-store-tab__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  padding: 0.28rem 0.22rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 0;
  border-radius: 0 0.55rem 0.55rem 0;
  background: rgba(12, 10, 20, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  overflow: hidden;
}

.cl-store-tab:not(.is-open) .cl-store-tab__panel {
  padding: 0.35rem 0.18rem;
  background: rgba(12, 10, 20, 0.28);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.cl-store-tab__top {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-width: 0;
}

.cl-store-tab.is-open .cl-store-tab__top {
  display: flex;
}

.cl-store-tab__hint {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui, inherit);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #8a85a0);
  text-align: left;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-store-tab__hint-tap {
  display: none;
}

@media (hover: none) {
  .cl-store-tab__hint-click {
    display: none;
  }
  .cl-store-tab__hint-tap {
    display: inline;
  }
}

.cl-store-tab__body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.cl-store-tab__link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  background: transparent;
  pointer-events: none;
}

.cl-store-tab.is-open .cl-store-tab__link {
  pointer-events: auto;
}

.cl-store-tab__dismiss,
.cl-store-tab__collapse {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted, #8a85a0);
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: 0.78rem;
  transition: color 0.15s ease, background 0.15s ease;
}

.cl-store-tab.is-open .cl-store-tab__dismiss,
.cl-store-tab.is-open .cl-store-tab__collapse {
  display: inline-flex;
}

.cl-store-tab__dismiss:hover,
.cl-store-tab__dismiss:focus-visible,
.cl-store-tab__collapse:hover,
.cl-store-tab__collapse:focus-visible {
  color: var(--text-primary, var(--text));
  background: rgba(255, 255, 255, 0.08);
}

.cl-store-tab__logo-stack {
  position: relative;
  width: 1.2rem;
  height: 4.35rem;
  background: transparent;
  transition: width var(--cl-store-tab-dur) var(--cl-store-tab-ease),
    height var(--cl-store-tab-dur) var(--cl-store-tab-ease);
}

.cl-store-tab.is-open .cl-store-tab__logo-stack {
  width: 7.1rem;
  height: 2.55rem;
}

.cl-store-tab__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  transition: opacity 0.2s ease;
}

.cl-store-tab__logo--peek {
  width: 4.2rem;
  height: 1.05rem;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  opacity: 1;
}

.cl-store-tab.is-open .cl-store-tab__logo--peek {
  opacity: 0;
}

.cl-store-tab__logo--open {
  opacity: 0;
}

.cl-store-tab.is-open .cl-store-tab__logo--open {
  opacity: 1;
}

.cl-store-tab__peek-hit {
  position: absolute;
  inset: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  z-index: 2;
}

.cl-store-tab.is-open .cl-store-tab__peek-hit {
  pointer-events: none;
}

.cl-store-tab.is-dragging .cl-store-tab__peek-hit {
  cursor: grabbing;
}

.cl-store-tab.is-reduced-motion,
.cl-store-tab.is-reduced-motion .cl-store-tab__panel,
.cl-store-tab.is-reduced-motion .cl-store-tab__logo-stack,
.cl-store-tab.is-reduced-motion .cl-store-tab__logo,
.cl-store-tab.is-reduced-motion .cl-store-tab__hint {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cl-store-tab,
  .cl-store-tab__logo-stack,
  .cl-store-tab__logo,
  .cl-store-tab__hint,
  .cl-store-tab__dismiss,
  .cl-store-tab__collapse {
    transition: none !important;
  }
}

/* -----------------------------------------------------------------------
   Homepage mini-cart Stage 1 ? FAB, footer entry, right drawer
   ----------------------------------------------------------------------- */

.cl-landing-cart-fab {
  position: fixed;
  right: 0.85rem;
  bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  z-index: 10150;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--surface-raised, #1c1830) 92%, transparent);
  color: var(--text-muted, #8a85a0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cl-landing-cart-fab:hover,
.cl-landing-cart-fab:focus-visible {
  color: var(--text-primary, var(--text));
  border-color: rgba(255, 255, 255, 0.22);
  background: color-mix(in srgb, var(--surface-raised, #1c1830) 98%, #fff 4%);
}

.cl-landing-cart-fab[hidden],
.cl-landing-cart-fab.is-drawer-open {
  display: none !important;
}

.cl-landing-cart-fab__icon {
  font-size: 1.05rem;
  line-height: 1;
}

.cl-landing-cart-fab .cl-landing-cart-badge {
  top: -0.1rem;
  right: -0.1rem;
}

.cl-landing-cart-drawer-root {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

.cl-landing-cart-drawer-root--no-footer {
  bottom: 0;
}

.cl-landing-cart-drawer-root > .cl-modal-backdrop {
  background: rgba(6, 4, 14, 0.55);
}

.cl-landing-cart-drawer {
  position: relative;
  z-index: 1;
  width: min(100vw, 26rem);
  height: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: color-mix(in srgb, var(--surface-raised, #161226) 96%, #2a1f4a 4%);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  animation: cl-landing-cart-slide 200ms ease-out;
}

@keyframes cl-landing-cart-slide {
  from { transform: translateX(100%); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}

.cl-landing-cart-drawer__top {
  flex: 0 0 auto;
}

.cl-landing-cart-drawer__count {
  margin-left: 0.35rem;
  font-weight: 500;
  color: var(--text-muted, #8a85a0);
  font-size: 0.9em;
}

.cl-landing-cart-drawer__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cl-landing-cart-empty {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--text-muted, #8a85a0);
}

.cl-landing-cart-section__title {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 650;
}

.cl-landing-cart-section__hint {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted, #8a85a0);
}

.cl-landing-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cl-landing-cart-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
  padding: 0.55rem;
  border-radius: var(--radius-md, 0.4rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.cl-landing-cart-row--unavailable {
  opacity: 0.58;
  filter: saturate(0.75);
}

.cl-landing-cart-row__thumb {
  width: 3.25rem;
  height: 4.35rem;
  border-radius: 0.3rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

.cl-landing-cart-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cl-landing-cart-row__name {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
}

.cl-landing-cart-row__meta,
.cl-landing-cart-row__version,
.cl-landing-cart-row__price {
  font-size: 0.78rem;
  color: var(--text-muted, #8a85a0);
  line-height: 1.3;
  margin-top: 0.12rem;
}

.cl-landing-cart-row__price {
  color: var(--text-primary, var(--text));
}

.cl-landing-cart-row--unavailable .cl-landing-cart-row__price {
  color: var(--text-muted, #8a85a0);
}

.cl-landing-cart-row__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.cl-landing-cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.1rem;
}

.cl-landing-cart-qty__btn {
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary, var(--text));
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}

.cl-landing-cart-qty__btn:hover,
.cl-landing-cart-qty__btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.cl-landing-cart-qty__value {
  min-width: 1.4rem;
  text-align: center;
  font-weight: 650;
  font-size: 0.9rem;
}

.cl-landing-cart-remove {
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--text-muted, #8a85a0);
  cursor: pointer;
}

.cl-landing-cart-remove:hover,
.cl-landing-cart-remove:focus-visible {
  color: var(--cl-colour-danger, #dc2626);
  background: rgba(220, 38, 38, 0.12);
}

.cl-landing-cart-drawer__footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: color-mix(in srgb, var(--surface-raised, #161226) 94%, #000 6%);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cl-landing-cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9rem;
}

/* Public row: Checkout dominates; Share + clears are compact icon squares.
   Staff row stays equal 3-col. Layout scoped to mini-cart only. */
.cl-landing-cart-actions {
  display: grid;
  /* C3: slight icon-square bump (was 2.6rem). Still icon-only. */
  grid-template-columns: minmax(0, 1fr) 2.75rem 2.75rem 2.75rem;
  gap: 0.4rem;
  width: 100%;
  align-items: stretch;
}

.cl-landing-cart-staff-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.cl-landing-cart-actions > .cl-btn,
.cl-landing-cart-staff-tools > .cl-btn {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem; /* C3: was 2.6rem */
}

.cl-landing-cart-actions > .cl-btn:not(.cl-landing-cart-checkout) {
  padding-left: 0;
  padding-right: 0;
}

.cl-landing-cart-checkout:disabled,
.cl-landing-cart-checkout[aria-disabled="true"],
.cl-landing-cart-share:disabled,
.cl-landing-cart-share[aria-disabled="true"],
.cl-landing-cart-staff-tools > .cl-btn:disabled,
.cl-landing-cart-staff-tools > .cl-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.cl-landing-cart-share-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.04);
}

.cl-landing-cart-share-panel[hidden] {
  display: none !important;
}

.cl-landing-cart-share-panel__title {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, #b7b2c9);
}

.cl-landing-cart-share-panel__label {
  font-size: 0.78rem;
  color: var(--text-muted, #b7b2c9);
}

.cl-landing-cart-share-panel__row {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}

.cl-landing-cart-share-panel__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.2rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
}

.cl-landing-cart-share-panel__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.cl-landing-cart-share-panel__qr[hidden] {
  display: none !important;
}

.cl-landing-cart-share-panel__qr-img {
  width: 168px;
  height: 168px;
  border-radius: 0.35rem;
  background: #fff;
  padding: 0.35rem;
}

.cl-landing-cart-share-offer {
  max-width: 26rem;
  width: min(92vw, 26rem);
}

.cl-landing-cart-share-offer__message {
  margin: 0;
  line-height: 1.45;
}

.cl-landing-cart-share-offer__actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cl-landing-cart-barcode-mode {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
  padding: 0.25rem 0 0.5rem;
}

.cl-landing-cart-barcode-mode[hidden] {
  display: none !important;
}

.cl-landing-cart-barcode-mode__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cl-landing-cart-barcode-mode__progress {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted, #b7b2c9);
}

.cl-landing-cart-barcode-mode__summary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cl-landing-cart-barcode-mode__name {
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
}

.cl-landing-cart-barcode-mode__meta,
.cl-landing-cart-barcode-mode__status,
.cl-landing-cart-barcode-mode__owner {
  font-size: 0.85rem;
  color: var(--text-muted, #b7b2c9);
}

.cl-landing-cart-barcode-mode__status.is-unavailable {
  color: var(--cl-colour-warn, #f59e0b);
}

.cl-landing-cart-barcode-mode__scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0.5rem;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #111;
}

.cl-landing-cart-barcode-mode__img {
  width: min(100%, 22rem);
  height: auto;
  max-height: 9rem;
  object-fit: contain;
  background: #fff;
}

.cl-landing-cart-barcode-mode__value {
  margin: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #111;
  word-break: break-all;
  text-align: center;
}

.cl-landing-cart-barcode-mode__nav {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.25rem;
}

.cl-landing-cart-barcode-mode__arrow {
  min-height: 4.5rem;
  font-size: 1.6rem;
}

.cl-landing-cart-barcode-mode__arrow:disabled,
.cl-landing-cart-barcode-mode__arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}

.cl-landing-cart-barcode-mode__qty {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  font-weight: 750;
  line-height: 1;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cl-landing-cart-barcode-mode__qty.is-unavailable {
  color: var(--cl-colour-warn, #f59e0b);
}

.cl-landing-cart-barcode-mode__hint {
  margin: 0;
  text-align: center;
}

@media (max-width: 640px) {
  .cl-landing-cart-drawer {
    width: 100vw;
  }

  .cl-landing-cart-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    grid-template-areas:
      "thumb main"
      "thumb controls";
  }

  .cl-landing-cart-row__thumb { grid-area: thumb; }
  .cl-landing-cart-row__main { grid-area: main; }
  .cl-landing-cart-row__controls {
    grid-area: controls;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-landing-cart-drawer {
    animation: none;
  }
}

/* ==========================================================================
   cl-container-tray ? global in-container detail panel (masked by host)
   ========================================================================== */
.cl-container-frame--tray-host,
.cl-tray-host {
  position: relative;
  overflow: hidden;
}

/* Page-shell host for Collection eye tray — do not clip the growing profile page. */
.cl-tray-host.cl-tray-host--viewport {
  overflow: visible;
}

.cl-container-tray {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, rgba(18, 12, 32, 0.97));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35);
  color: var(--text, #eef2ff);
  pointer-events: auto;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.32s ease, opacity 0.28s ease;
}

.cl-container-tray--bottom {
  bottom: 0;
  height: 100%;
  max-height: 100%;
}

@media (min-width: 769px) {
  .cl-container-tray--bottom {
    height: 90%;
    max-height: 90%;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  }
}

.cl-container-tray.is-open {
  transform: translateY(0);
  opacity: 1;
}

/* Collection eye tray is lifted onto body and sized to the visible screen. */
.cl-container-tray.cl-container-tray--viewport {
  position: fixed;
  z-index: 40;
  overflow: hidden;
  top: var(--cl-navbar-height);
  bottom: var(--cl-footer-bar-height);
  left: max(5vw, calc(50% - 720px));
  right: max(5vw, calc(50% - 720px));
  height: auto;
  max-height: none;
  width: auto;
}

@media (min-width: 769px) {
  .cl-container-tray.cl-container-tray--viewport.cl-container-tray--bottom {
    height: auto;
    max-height: none;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  }
}

/* Search-spine notch/rail is z-index 30 so it can sit on the card grid.
   Hide it while the Collection card-detail tray is open so it cannot ghost through. */
.cl-tray-host:has(.cl-container-tray.is-open) .cl-search-tray-host,
html.cl-collection-tray-open .cl-search-tray-host {
  z-index: 0;
  visibility: hidden;
  pointer-events: none;
}

.cl-container-tray[hidden] {
  display: none !important;
}

.cl-container-tray__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}

.cl-container-tray__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-container-tray__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}

.cl-container-tray__handle {
  display: block;
  width: 2.5rem;
  height: 0.28rem;
  margin: 0.15rem auto 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

/* Interactive summary rows (Overview lists ? extends hub-home list pattern) */
.cl-hub-home-shift[data-cl-event-row] {
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cl-hub-home-shift[data-cl-event-row]:hover,
.cl-hub-home-shift[data-cl-event-row]:focus-visible {
  background: rgba(127, 0, 255, 0.12);
  border-color: rgba(167, 139, 250, 0.35);
  outline: none;
}

.cl-hub-home-shift__swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--cl-colour-regular, #a78bfa);
  flex-shrink: 0;
  align-self: center;
}

.cl-hub-home-shift[data-cl-cal-colour="accent"] .cl-hub-home-shift__swatch { background: var(--cl-colour-accent); }
.cl-hub-home-shift[data-cl-cal-colour="highlight"] .cl-hub-home-shift__swatch { background: var(--cl-colour-highlight); }
.cl-hub-home-shift[data-cl-cal-colour="alt"] .cl-hub-home-shift__swatch { background: var(--cl-colour-alt); }
.cl-hub-home-shift[data-cl-cal-colour="regular"] .cl-hub-home-shift__swatch,
.cl-hub-home-shift[data-cl-cal-colour="default"] .cl-hub-home-shift__swatch { background: var(--cl-colour-regular); }

.cl-hub-home-shift__title {
  font-weight: 600;
  color: var(--text, #eef2ff);
}

.cl-hub-home-shift__cal {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

/* Calendar chooser (unselected state) */
.cl-cal-chooser {
  position: relative;
  min-height: min(28rem, 70vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
}

.cl-cal-chooser__blur {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(127, 0, 255, 0.18), rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0,
      rgba(255, 255, 255, 0.03) 12%,
      transparent 12%,
      transparent 20%
    );
  filter: blur(1.5px);
  transform: scale(1.04);
  opacity: 0.85;
  pointer-events: none;
}

.cl-cal-chooser__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.5rem;
  text-align: center;
  animation: cl-fade-in 0.32s ease-out both;
}

.cl-cal-chooser__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  max-width: 22rem;
}

.cl-cal-item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.cl-cal-item-meta__title {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-cal-item-meta__sub {
  font-size: 0.8em;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-cal__item[data-cl-cal-colour="accent"] { --cl-cal-item-tone: var(--cl-colour-accent); }
.cl-cal__item[data-cl-cal-colour="highlight"] { --cl-cal-item-tone: var(--cl-colour-highlight); }
.cl-cal__item[data-cl-cal-colour="alt"] { --cl-cal-item-tone: var(--cl-colour-alt); }
.cl-cal__item[data-cl-cal-colour="regular"] { --cl-cal-item-tone: var(--cl-colour-regular); }

@media (prefers-reduced-motion: reduce) {
  .cl-container-tray {
    transition: none;
  }
}

/* ==========================================================================
   cl-mortar — modular dense auto-flow for container children (global)

   Height rule: never condense/squish content. Row height follows the tallest
   panel; shorter siblings only stretch larger to fill. Width may be condensed
   (e.g. set-list span) — height does not.
   ========================================================================== */
.cl-mortar {
  --cl-mortar-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cl-mortar-cols), minmax(0, 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  gap: 0.75rem;
  align-items: stretch;
}

.cl-mortar > .cl-container-frame {
  margin: 0;
  min-width: 0;
  /* Content defines minimum height; grid stretch may grow the cell larger. */
  min-height: min-content;
  height: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Title stays top; body centers only when the stretched cell is taller than content. */
.cl-mortar > .cl-container-frame > .cl-sub-title-container {
  flex: 0 0 auto;
}

.cl-mortar > .cl-container-frame > :not(.cl-sub-title-container) {
  margin-block: auto;
  width: 100%;
}

.cl-mortar--tray {
  --cl-mortar-cols: 3;
  gap: 0.65rem;
  padding-bottom: 0.25rem;
}

@media (max-width: 1100px) {
  .cl-mortar--tray {
    --cl-mortar-cols: 2;
  }
}

.cl-mortar--tray > [data-cl-mortar="fixed"] {
  grid-column: span 1;
}

/* Set list: condense WIDTH only (2 of 3 cols), not height. */
.cl-mortar--tray > [data-cl-variant-panel="set-list"],
.cl-variant-set-list--tray {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .cl-mortar--tray > [data-cl-variant-panel="set-list"],
  .cl-variant-set-list--tray {
    grid-column: span 1;
  }
}

.cl-variant-set-list--tray .cl-table-scroll {
  max-height: 14rem;
  overflow: auto;
}

.cl-mortar--mobile {
  display: flex;
  flex-flow: row nowrap;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
  align-items: stretch;
  min-height: 0;
}

.cl-mortar--mobile > .cl-container-frame {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Phone eye-tray pages: body is the viewport (95% scroller + 5% dots). */
.cl-container-tray--pages > .cl-container-tray__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 0.65rem 0.65rem 0;
}

.cl-container-tray--pages .cl-mortar--mobile {
  flex: 0 0 95%;
  height: 95%;
  width: 100%;
}

.cl-container-tray--pages .cl-mortar--mobile > .cl-container-frame > :not(.cl-sub-title-container) {
  margin-block: 0;
}

.cl-container-tray--pages .cl-tray-page-content {
  margin-block: 0;
  width: 100%;
  flex: 0 0 auto;
  transform-origin: top left;
}

.cl-container-tray--pages .cl-tray-page-content > :not(.cl-sub-title-container) {
  margin-block: 0;
}

.cl-container-tray--pages .cl-mortar--mobile > .cl-container-frame[data-cl-tray-page-scale] > .cl-tray-page-content {
  transform: scale(var(--cl-tray-page-scale, 1));
  width: calc(100% / var(--cl-tray-page-scale, 1));
}

.cl-container-tray--pages .cl-mortar--mobile > .cl-container-frame.is-cl-tray-page-scroll {
  overflow-y: auto;
}

.cl-container-tray--pages .cl-mortar--mobile > .cl-container-frame:not(.is-cl-tray-page-scroll) {
  overflow-y: hidden;
}

.cl-container-tray--pages .cl-mortar > .cl-collection-tray-panel .cl-collection-tray-panel__body,
.cl-container-tray--pages .cl-mortar > .cl-consignment-tray-panel .cl-consignment-tray-panel__body {
  flex: 0 0 auto;
}

.cl-tray-page-dots {
  flex: 0 0 5%;
  min-height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.15rem 0 0.35rem;
}

.cl-tray-page-dot {
  width: 0.42rem;
  height: 0.42rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.cl-tray-page-dot[aria-current="true"] {
  width: 0.62rem;
  height: 0.62rem;
  background: var(--cl-colour-regular, #9b04db);
}

/* ==========================================================================
   Collection / Consignment tray panels — denser fill when mortar stretches
   ========================================================================== */
.cl-mortar > .cl-collection-tray-panel > .cl-collection-tray-panel__body,
.cl-mortar > .cl-consignment-tray-panel > .cl-consignment-tray-panel__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* flex-start (not space-evenly): status/qty updates must not reflow the steppers. */
  justify-content: flex-start;
  gap: 0.75rem;
  margin-block: 0;
  min-height: 0;
  width: 100%;
}

.cl-collection-tray-panel__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-lg, var(--radius));
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 30%, var(--border-subtle));
  background:
    radial-gradient(
      ellipse 110% 90% at 50% 0%,
      color-mix(in srgb, var(--cl-colour-active) 16%, transparent),
      transparent 70%
    ),
    color-mix(in srgb, var(--bg-elevated) 86%, var(--cl-colour-accent) 14%);
  text-align: center;
}

.cl-collection-tray-panel__hero-qty {
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--cl-colour-active, var(--active));
}

.cl-collection-tray-panel__hero-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cl-collection-tray-panel__rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cl-collection-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius, 0.5rem);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent);
  /* Flat fill only — animated gradient backgrounds were blanking stepper icons. */
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
}

.cl-collection-status-row.is-active {
  border-color: color-mix(in srgb, var(--cl-colour-accent) 42%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 78%, var(--cl-colour-accent) 22%);
}

.cl-collection-status-row--primary.is-active {
  border-color: color-mix(in srgb, var(--cl-colour-active) 48%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated) 76%, var(--cl-colour-active) 24%);
}

/* Read-only status titles — not buttons (avoids stealing +/- clicks). */
.cl-collection-status-row__title {
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  min-height: 2.15rem;
  border-radius: var(--radius, 0.5rem);
  pointer-events: none;
  user-select: none;
  color: var(--text);
  background: color-mix(in srgb, var(--cl-colour-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cl-colour-accent) 18%, transparent);
}

.cl-collection-status-row.is-active .cl-collection-status-row__title {
  background: color-mix(in srgb, var(--cl-colour-accent) 28%, transparent);
  border-color: color-mix(in srgb, var(--cl-colour-accent) 36%, transparent);
}

.cl-collection-status-row--primary.is-active .cl-collection-status-row__title {
  background: color-mix(in srgb, var(--cl-colour-active) 30%, transparent);
  border-color: color-mix(in srgb, var(--cl-colour-active) 40%, transparent);
}

.cl-collection-status-row__title i {
  width: 1rem;
  text-align: center;
  opacity: 0.92;
  color: color-mix(in srgb, var(--cl-colour-active) 70%, #fff 30%);
}

.cl-collection-status-row__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  text-align: left;
}

.cl-collection-status-row__label {
  font-weight: 700;
  line-height: 1.15;
  /* Solid color — gradient text-clip was blanking nearby stepper glyphs in Chromium. */
  color: color-mix(in srgb, #fff 92%, var(--cl-colour-active) 8%);
}

.cl-collection-status-row__hint {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9.5rem;
}

.cl-collection-status-row__stepper {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  padding: 0.2rem;
  border-radius: 999px;
  background: #14121c;
}

.cl-collection-status-row__qty {
  min-width: 2rem;
  text-align: center;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: #fff;
}

/*
 * Qty steppers: no .btn / Font Awesome / text glyphs.
 * Icons are opaque CSS boxes so active-row paints cannot blank them.
 */
.cl-collection-status-row__qty-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: #2a2438;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  outline: none;
  filter: none;
  opacity: 1;
  overflow: visible;
  flex: 0 0 auto;
}
.cl-collection-status-row__qty-btn:hover,
.cl-collection-status-row__qty-btn:focus,
.cl-collection-status-row__qty-btn:focus-visible {
  background: #3a3350;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  outline: none;
  filter: none;
}
.cl-collection-status-row__qty-btn:disabled {
  opacity: 0.45;
  cursor: wait;
}

.cl-collection-status-row__qty-btn--dec::before {
  content: "";
  display: block;
  width: 0.72rem;
  height: 2.5px;
  border-radius: 1px;
  background: #fff;
}

.cl-collection-status-row__qty-btn--inc::before,
.cl-collection-status-row__qty-btn--inc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.cl-collection-status-row__qty-btn--inc::before {
  width: 0.72rem;
  height: 2.5px;
}
.cl-collection-status-row__qty-btn--inc::after {
  width: 2.5px;
  height: 0.72rem;
}

.cl-collection-tray-panel.is-qty-busy .cl-collection-status-row__stepper {
  opacity: 0.72;
}

.cl-collection-tray-panel__status {
  min-height: 1.15rem;
  margin: 0;
}
.cl-collection-tray-panel__status:empty {
  /* Keep the slot so Updating… / clear does not jump +/- hit targets. */
  visibility: hidden;
}

.cl-consignment-tray-panel__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.cl-consignment-tray-panel__stat {
  min-height: 0;
}

.cl-consignment-tray-panel__qty-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.cl-consignment-tray-panel__qty-row .cl-hero-stat-card__number {
  flex: 1 1 auto;
  text-align: center;
}

.cl-consignment-tray-panel__price {
  color: var(--cl-colour-accent, var(--accent)) !important;
}

.cl-consignment-tray-panel__price-edit {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cl-consignment-tray-panel__price-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

.cl-consignment-tray-panel__currency {
  font-weight: 700;
  color: var(--text-muted);
  padding-left: 0.1rem;
}

.cl-consignment-tray-panel__price-input {
  flex: 1 1 auto;
  min-width: 0;
}

.cl-consignment-tray-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.cl-consignment-tray-panel__sold {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cl-consignment-tray-panel__flag {
  margin-left: auto;
}

@media (max-width: 520px) {
  .cl-consignment-tray-panel__stats {
    grid-template-columns: 1fr;
  }

  .cl-collection-status-row {
    /* keep grid; title can shrink via minmax(0,1fr) */
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.cl-landing-card-back__meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.cl-landing-card-back__name {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-landing-card-back__set {
  font-size: 0.62rem;
  opacity: 0.85;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-browser-card-meta__chips {
  margin-top: 0.15rem;
}

/* ==========================================================================
   Inline text link (global) - quiet accent for in-content hrefs
   ========================================================================== */
.cl-link {
  color: var(--cl-colour-highlight, #f0b429);
  text-decoration: underline;
  text-decoration-color: rgba(240, 180, 41, 0.45);
  text-underline-offset: 0.12em;
}
.cl-link:hover,
.cl-link:focus-visible {
  color: #ffd56a;
  text-decoration-color: rgba(255, 213, 106, 0.75);
}

/* Selected row in cl-hub-home-shift-list style lists */
.cl-list-row--selected,
.cl-hub-home-shift.cl-list-row--selected {
  outline: 1px solid rgba(240, 180, 41, 0.45);
  background: rgba(240, 180, 41, 0.08);
}


/* Soft-dim list rows (e.g. non-vendor lines on a shared order) */
.cl-list-row--dim,
.cl-hub-home-shift.cl-list-row--dim {
  opacity: 0.45;
}

/* Product + indented variant stack (Hub Stock and reuse) */
.cl-product-stack {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.7rem;
  margin: 0 0 0.65rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.cl-product-stack__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

/* Hub Stock: compact recognition thumbs — not a hero image. */
[data-cl-page="larrikin-hub-stock"] .cl-product-stack__head {
  grid-template-columns: 4.5rem 1fr;
  gap: 0.65rem;
  align-items: center;
}

[data-cl-page="larrikin-hub-stock"] .cl-product-stack .cl-card-thumbnail {
  width: 4.5rem;
  max-width: 4.5rem;
  flex-shrink: 0;
}

[data-cl-page="larrikin-hub-stock"] .cl-product-stack .cl-card-thumbnail__image {
  width: 4.5rem;
  height: 4.5rem;
  max-width: 4.5rem;
  object-fit: cover;
}

[data-cl-page="larrikin-hub-stock"] .cl-product-stack__variants {
  margin-left: 5.15rem;
}

.cl-product-stack__meta h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #eef2ff);
}

.cl-product-stack__variants {
  display: grid;
  gap: 0.35rem;
  margin-left: 2.75rem;
}

/* Hub Stock filters: always one swipeable row (never wrap to two lines). */
.cl-mode-action-row--hub-stock.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track {
  align-items: flex-end;
  gap: 0.4rem;
}

.cl-mode-action-row--hub-stock.cl-row-swipe.is-cl-row-swipe-active > .cl-row-swipe__track > * {
  flex: 0 0 auto;
}

.cl-mode-action-row--hub-stock .cl-pill-row {
  flex-wrap: nowrap;
}

.cl-hub-stock-load-more {
  margin-top: 0.75rem;
  width: 100%;
}

.cl-hub-stock-load-more[hidden] {
  display: none !important;
}

.cl-hub-stock-load-more__btn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.cl-product-stack__variant {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-muted, rgba(255, 255, 255, 0.72));
  font-size: 0.9rem;
}

.cl-product-stack__meta .cl-pill-row {
  margin-top: 0.35rem;
}

/* Spy Mode — sticky admin impersonation cue */
.cl-spy-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
  padding: 0.45rem 0.85rem;
  background: color-mix(in srgb, #c45c26 55%, var(--bg-card, #161022));
  border-bottom: 1px solid rgba(255, 220, 180, 0.35);
  color: #fff8f0;
  font-size: 0.9rem;
}

.cl-spy-banner__actor {
  opacity: 0.85;
  margin-left: 0.35rem;
}

.cl-spy-user-list {
  display: grid;
  gap: 0.75rem;
  max-height: min(50vh, 22rem);
  overflow-y: auto;
  padding-right: 0.15rem;
}

.cl-spy-user-group__title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cl-spy-user-group__list {
  display: grid;
  gap: 0.3rem;
}

.cl-spy-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  color: var(--text, #eef2ff);
  cursor: pointer;
  font: inherit;
}

.cl-spy-user:hover,
.cl-spy-user:focus-visible {
  border-color: color-mix(in srgb, var(--cl-colour-active, #7f00ff) 55%, var(--border-subtle));
  outline: none;
}

.cl-spy-user--selected {
  border-color: var(--cl-colour-active, #7f00ff);
  background: color-mix(in srgb, var(--cl-colour-active, #7f00ff) 22%, transparent);
}

.cl-spy-user__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-spy-user__role {
  flex: 0 0 auto;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.7;
}

.cl-spy-sidekick-actions {
  margin-top: 0.85rem;
  justify-content: flex-end;
}

.cl-toast.cl-toast--sticky {
  opacity: 1;
}

/* ==========================================================================
   Tournament clock - fullscreen-friendly Hub display
   ========================================================================== */
.cl-tournament-clock {
  min-height: min(70vh, 40rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(127, 0, 255, 0.22), transparent 55%),
    var(--bg-card, #161022);
}

.cl-tournament-clock__event {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  color: rgba(255, 255, 255, 0.7);
}

.cl-tournament-clock__round {
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 700;
}

.cl-tournament-clock__time {
  margin: 0.25rem 0 0;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 16vw, 8rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--cl-colour-highlight, #f0b429);
  text-shadow: 0 0 24px rgba(240, 180, 41, 0.25);
  animation: cl-fade-in 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .cl-tournament-clock__time { animation: none; }
}

/* ==========================================================================
   Life tracker - shared match life totals (event companion)
   ========================================================================== */
.cl-life-tracker {
  margin-top: 0.5rem;
}

.cl-life-tracker__board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.cl-life-tracker__side {
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(160deg, rgba(127, 0, 255, 0.12), transparent 55%),
    rgba(0, 0, 0, 0.18);
  animation: cl-fade-in 0.28s ease-out both;
}

.cl-life-tracker__name {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
}

.cl-life-tracker__value {
  margin: 0.35rem 0 0.55rem;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--cl-colour-highlight, #f0b429);
  transition: transform 0.12s ease-out;
}

.cl-life-tracker__controls {
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cl-life-tracker__reset-row {
  grid-column: 1 / -1;
  margin-top: 0.15rem;
}

@media (max-width: 560px) {
  .cl-life-tracker__board {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-life-tracker__side { animation: none; }
  .cl-life-tracker__value { transition: none; }
}

/* Quiet active pill (collection status toggles) */
.cl-pill--active {
  border-color: rgba(240, 180, 41, 0.55);
  color: var(--cl-colour-highlight, #f0b429);
  background: rgba(240, 180, 41, 0.12);
}

/* Profile motion helpers (logic classes from cl_player_profile.js) */
.is-cl-profile-pop {
  animation: cl-profile-pop 0.55s ease;
}
.is-cl-profile-avatar-pop {
  animation: cl-profile-avatar-pop 0.55s ease;
}
.is-cl-profile-ring-pulse {
  animation: cl-profile-ring-pulse 0.65s ease;
}
@keyframes cl-profile-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes cl-profile-avatar-pop {
  0% { transform: scale(0.92); opacity: 0.65; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes cl-profile-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cl-colour-highlight) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--cl-colour-highlight) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .is-cl-profile-pop,
  .is-cl-profile-avatar-pop,
  .is-cl-profile-ring-pulse {
    animation: none !important;
  }
}

.cl-input--readonly,
.cl-input[readonly] {
  opacity: 0.85;
  cursor: default;
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--text-muted));
}

/* PIN / code entry input (Play lobby + reuse) */
.cl-input--code {
  letter-spacing: 0.18em;
  font-size: 1.15rem;
  font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ========== Play room shell (cl-play-*) ========== */
:root {
  --cl-play-bg: var(--bg-dark);
  --cl-play-bg-lift: color-mix(in srgb, var(--bg-elevated) 70%, #2a2a38);
  --cl-play-ink: var(--text-primary, #f2f2f7);
  --cl-play-ink-muted: var(--text-muted, #9a9aab);
  --cl-play-block-gap: 0.85rem;
  --cl-play-stage-pad: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  --cl-play-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cl-play-dur: 200ms;
  --cl-play-dur-slow: 480ms;
}

.cl-play-stage {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 7.5rem);
  min-height: calc(100vh - 7.5rem);
  display: flex;
  flex-direction: column;
  padding: var(--cl-play-stage-pad);
  padding-top: max(0.75rem, env(safe-area-inset-top));
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  color: var(--cl-play-ink);
  overflow: hidden;
}

.cl-play-stage__atmosphere {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 30% 20%, color-mix(in srgb, var(--cl-colour-accent, #7c5cff) 12%, transparent), transparent 65%),
    linear-gradient(155deg, var(--cl-play-bg-lift) 0%, var(--cl-play-bg) 48%, color-mix(in srgb, var(--cl-play-bg) 90%, #1a1020) 100%);
  background-size: 140% 140%;
  animation: cl-play-atmosphere 28s ease-in-out infinite alternate;
}

@keyframes cl-play-atmosphere {
  from { background-position: 0% 20%; }
  to { background-position: 100% 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-play-stage__atmosphere { animation: none; }
}

.cl-play-stage__event-name,
.cl-play-stage__player-name {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--cl-play-ink-muted);
  text-align: center;
  line-height: 1.3;
  max-width: 36rem;
  margin-inline: auto;
  padding-inline: 0.5rem;
}

.cl-play-stage__event-name {
  flex: 0 0 auto;
  padding-top: 0.25rem;
}

.cl-play-stage__player-name {
  flex: 0 0 auto;
  padding-bottom: 0.35rem;
  min-height: 1.2rem;
}

.cl-play-stage__float {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding: 1rem 0 1.25rem;
  padding-bottom: max(1.25rem, 2.5rem);
}

.cl-play-mode {
  width: 100%;
  animation: cl-play-mode-in var(--cl-play-dur-slow) var(--cl-play-ease) both;
}

@keyframes cl-play-mode-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-play-mode { animation: none; }
}

.cl-play-join {
  text-align: center;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

.cl-play-join__title {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  font-weight: 650;
  color: var(--cl-play-ink);
}

.cl-play-join__hint {
  margin: 0 0 1.1rem;
  color: var(--cl-play-ink-muted);
  font-size: 0.92rem;
}

.cl-play-join__actions {
  justify-content: center;
  margin-bottom: 1rem;
}

.cl-play-join__form {
  text-align: left;
}

.cl-play-hospitality {
  text-align: center;
  padding: 0.5rem;
}

.cl-play-hospitality__thanks {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 600;
}

.cl-play-hospitality__subtitle {
  margin: 0;
  color: var(--cl-play-ink-muted);
  font-size: 0.95rem;
}

.cl-play-live__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--cl-play-block-gap);
  width: 100%;
}

.cl-play-block {
  animation: cl-play-mode-in var(--cl-play-dur) var(--cl-play-ease) both;
}

.cl-play-block__clock {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  font-weight: 650;
  text-align: center;
  letter-spacing: 0.04em;
  color: #f5f5fa;
  transition: color 300ms var(--cl-play-ease);
}

.cl-play-block__clock.is-warn { color: #ff9f43; }
.cl-play-block__clock.is-urgent { color: #ff5c5c; }

.cl-play-block__table-player {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 1.35rem;
  font-weight: 600;
}

.cl-play-block__table-map {
  display: grid;
  gap: 0.4rem;
  width: 100%;
}

.cl-play-block__table-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--cl-play-ink-muted) 25%, transparent);
  font-weight: 650;
  font-size: 0.95rem;
}

.cl-play-block__table-cell.is-mine {
  border-color: var(--cl-colour-regular, #6ee7b7);
  background: color-mix(in srgb, var(--cl-colour-regular, #6ee7b7) 22%, var(--bg-elevated));
}

.cl-play-block__team,
.cl-play-block__mates {
  text-align: center;
  font-size: 1rem;
}

.cl-play-block__team-line + .cl-play-block__team-line { margin-top: 0.25rem; }

.cl-play-block__img {
  display: block;
  margin-inline: auto;
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
}

.cl-play-block__img--mini { max-width: 4.5rem; cursor: zoom-in; }
.cl-play-block__img--medium { max-width: 14rem; }
.cl-play-block__img--full { width: 100%; max-width: none; }

/* Staff panel */
.cl-play-staff {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cl-play-staff[hidden] { display: none !important; }

.cl-play-staff__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.cl-play-staff__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 52rem;
  height: min(96dvh, 96vh);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
  animation: cl-play-sheet-in var(--cl-play-dur-slow) var(--cl-play-ease) both;
}

@keyframes cl-play-sheet-in {
  from { transform: translateY(12%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-play-staff__sheet { animation: none; }
}

.cl-play-staff__top,
.cl-play-staff__bottom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cl-play-ink-muted) 20%, transparent);
}

.cl-play-staff__bottom {
  border-bottom: 0;
  border-top: 1px solid color-mix(in srgb, var(--cl-play-ink-muted) 20%, transparent);
  justify-content: space-around;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
}

.cl-play-staff__modes {
  display: flex;
  flex: 1;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cl-play-staff__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.85rem;
}

.cl-play-people {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 0.75rem;
}

@media (min-width: 720px) {
  .cl-play-people { grid-template-columns: 1fr 1fr; }
  .cl-play-controls { grid-template-columns: 1fr 1fr; }
}

.cl-play-people__heading {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--cl-play-ink-muted);
  font-weight: 600;
}

.cl-play-people__list,
.cl-play-tables-list,
.cl-play-controls__list,
.cl-play-controls__available {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cl-play-people__list li,
.cl-play-tables-list li,
.cl-play-controls__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.45rem;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: opacity var(--cl-play-dur) var(--cl-play-ease), background var(--cl-play-dur) var(--cl-play-ease);
}

.cl-play-people__list li:hover,
.cl-play-people__list li:focus-visible {
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.cl-play-people__list li.is-lobby {
  opacity: 0.55;
}

.cl-play-people__list li.is-fading {
  opacity: 0;
}

.cl-play-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.cl-play-controls__available li {
  margin-bottom: 0.35rem;
}

.cl-play-controls__row-actions {
  display: flex;
  gap: 0.25rem;
}

.cl-play-share__code {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0.5rem 0 1rem;
}

.cl-play-share__qr canvas,
.cl-play-share__qr img {
  max-width: 12rem;
  margin-inline: auto;
}

.cl-play-stage--lobby .cl-play-stage__float {
  max-width: 24rem;
}

/* Workspace set picker — mobile-first full-set count modal. */
.cl-set-picker-modal-root {
  align-items: center;
  justify-content: center;
  padding: 0.55rem;
}
.cl-set-picker-modal-root .cl-set-picker-modal {
  width: min(100%, 28rem);
  height: min(100%, 46rem);
  max-height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cl-set-picker-modal__top {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
}
.cl-set-picker-dial {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: 1 1 5.5rem;
  margin: 0;
}
.cl-set-picker-dial--set {
  flex: 1 1 8rem;
}
.cl-set-picker-dial__label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #8a85a0);
}
.cl-set-picker-dial .cl-select {
  width: 100%;
  min-width: 0;
}
.cl-set-picker-modal__work {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.55rem 0.45rem;
}
.cl-set-picker-modal__error {
  flex: 0 0 auto;
  margin: 0 0 0.3rem;
}
.cl-set-picker-idle,
.cl-set-picker-slide {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cl-set-picker-idle[hidden],
.cl-set-picker-slide[hidden] {
  display: none !important;
}
.cl-set-picker-slide__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 8rem;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-elevated, #161326) 88%, #000);
  touch-action: pan-y;
  user-select: none;
}
.cl-set-picker-slide__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cl-set-picker-slide__img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: color-mix(in srgb, var(--text-muted, #8a85a0) 80%, transparent);
}
.cl-set-picker-slide__img[hidden],
.cl-set-picker-slide__img-fallback[hidden],
.cl-set-picker-loadmore[hidden],
.cl-set-picker-qty[hidden] {
  display: none !important;
}
.cl-set-picker-slide__chips {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  right: 3.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  pointer-events: none;
}
.cl-set-picker-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: color-mix(in srgb, var(--surface-raised, #1c1830) 88%, transparent);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}
.cl-set-picker-fab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised, #1c1830) 88%, transparent);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl-set-picker-fab:disabled {
  opacity: 0.35;
}
.cl-set-picker-fab--prev { left: 0.4rem; }
.cl-set-picker-fab--next { right: 0.4rem; }
.cl-set-picker-loadmore {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-elevated, #161326) 70%, transparent);
}
.cl-set-picker-qty {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: color-mix(in srgb, var(--surface-raised, #1c1830) 92%, transparent);
}
.cl-set-picker-qty__btn {
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cl-colour-accent, #7c5cff) 22%, transparent);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl-set-picker-qty__value {
  min-width: 2.2rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
}
.cl-set-picker-slide__progress {
  flex: 0 0 auto;
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted, #8a85a0);
}
.cl-set-picker-modal__btm {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: space-between;
}
.cl-set-picker-send {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 640px) {
  .cl-set-picker-modal-root {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .cl-set-picker-modal-root .cl-set-picker-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }
}