/* ============================================================
   LEVR Flywheel — Card Grid + Search Bar (Phase 1)
   Self-contained core styles. Signature gradient-fade, blur
   scrim, hover-video, 9-state matrix, width-driven grid.
   All values map to card-design-spec.md tokens.
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* Brand blue (SGA #2D6FB7 — HSL 210/60/45, under 80% sat cap) */
  --blue-50:  #EEF4FB;
  --blue-100: #D9E7F5;
  --blue-200: #AECBEA;
  --blue-300: #7FAADD;
  --blue-400: #5189CB;
  --blue-500: #2D6FB7;
  --blue-600: #245C9B;
  --blue-700: #1C4A7E;
  --focus-ring: rgba(45,111,183,0.18);
  /* Monochrome focus halo — LEVR platform UI is B&W (change-brief-6) */
  --focus-ink: rgba(14,23,38,0.14);

  /* Neutrals — single cool/slate family */
  --ink-950: #0E1726;
  --ink-900: #152033;
  --ink-800: #1B2740;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E3E8EF;
  --ink-100: #EEF1F5;
  --ink-50:  #F6F8FA;
  --surface: #FFFFFF;
  --page-bg: #EEF1F4;

  /* Semantic */
  --success: #2E9A6B;
  --error:   #C2463C;
  --warn:    #B7791F;

  /* Radii — varied by context (change-brief-3 §1: doubled card, proportional inner) */
  --radius-card: 48px;
  --radius-image: 30px;
  --radius-button: 12px;
  --radius-pill: 9999px;
  --radius-badge: 12px;
  --radius-search: 20px;

  /* Shadows — soft, layered, blue-tinted (#102A48) */
  --shadow-card-rest:  0 1px 2px rgba(16,42,72,.04), 0 6px 20px rgba(16,42,72,.06);
  --shadow-card-hover: 0 2px 6px rgba(16,42,72,.06), 0 18px 44px rgba(16,42,72,.14);
  --shadow-pill:       0 1px 2px rgba(16,42,72,.10), 0 2px 8px rgba(16,42,72,.08);
  --shadow-search:     0 1px 2px rgba(16,42,72,.04), 0 4px 18px rgba(16,42,72,.07);
  --shadow-badge:      0 1px 3px rgba(16,42,72,.12);

  /* Alert accent — the one sanctioned non-monochrome chrome color, reserved
     strictly for the review-count notification badge (change-brief-9 rev). */
  --alert:     #E5484D;
  --alert-ink: #FFFFFF;

  /* Motion tokens */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-video: 450ms;
  --dur-rise: 470ms;                 /* gentle hover rise + slow zoom (change-brief-2 #3) */
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-out-soft: cubic-bezier(.16,1,.3,1);
  --ease-press: cubic-bezier(.2,0,0,1);

  /* Type */
  --font-ui: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--page-bg);
  color: var(--ink-700);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-shell { max-width: 2100px; margin-inline: auto; }
/* Keep the header aligned to the (now wider) grid edges */
@media (min-width: 1024px) {
  .site-header { padding-left: 40px; padding-right: 40px; }
  .search-hero { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1600px) {
  .site-header { padding-left: 48px; padding-right: 48px; }
  .search-hero { padding-left: 48px; padding-right: 48px; }
}

/* LEVR wordmark removed — the quiet SGA context label sits alone, top-right */
.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 28px 24px 4px;
}
.site-header__context {
  font-size: 13px;
  color: var(--ink-500);
  font-weight: 450;
  white-space: nowrap;
}
.site-header__context b { color: var(--ink-700); font-weight: 550; }

@media (max-width: 560px) {
  .site-header { flex-wrap: wrap; row-gap: 4px; }
}

/* ============================================================
   SEARCH BAR  (spec §9)
   ============================================================ */
/* Centered search hero: search bar is the focal point of an empty upper band,
   so the card grid begins ~40% down the page (change-brief-3 §3). */
.search-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42vh;
  padding: 24px;
}
@media (max-width: 700px) {
  .search-hero { min-height: clamp(220px, 40vh, 380px); }
}
.searchbar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  height: 60px;
  padding: 0 16px;
  border-radius: var(--radius-search);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-search);
  transition: border-color var(--dur-base) var(--ease-smooth),
              box-shadow var(--dur-base) var(--ease-smooth);
  cursor: text;
}
.searchbar:hover { border-color: var(--ink-300); }
.searchbar:focus-within,
.searchbar.is-armed {
  border-color: var(--ink-700);
  box-shadow: var(--shadow-search), 0 0 0 3px var(--focus-ink);
}
.searchbar__icon { flex: none; color: var(--ink-400); display: grid; place-items: center; }
/* Brand-anchored label: the client name IS the search prompt (change-brief-9 rev).
   Bold, slightly-larger "SGA Dental" + a lighter hint — mixed weights a plain
   input placeholder can't do, so the readonly decoy input became styled text. */
.searchbar__label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  overflow: hidden;
  white-space: nowrap;
}
.searchbar__brand {
  flex: none;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-800);
}
.searchbar__hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 450;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
}
.kbd {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ============================================================
   RESPONSIVE GRID  (spec §8)
   ============================================================ */
/* Left SAFE LANE for the fixed Walk-and-Talk rail (change-brief-8 §2).
   Reserved whenever the rail is visible (>480px) so the leftmost cards
   always clear the rail lines at rest; dropped on mobile where the rail
   is display:none. ~92px = 40px rail inset + line + breathing room. */
:root { --rail-lane: 0px; }
@media (min-width: 481px) { :root { --rail-lane: 92px; } }

/* Horizontal lane the pinned dock reserves at the very top-left (change-brief-9).
   The breadcrumb starts to the RIGHT of the dock so the two never overlap;
   room stays open past the dock for future main-nav items. */
/* breadcrumb start-x — retuned for the vertical (1-button-wide) dock so the
   crumb clears the WT button with comfortable air (change-brief-9 rev) */
:root { --dock-lane: 104px; }
@media (min-width: 481px) { :root { --dock-lane: 118px; } }

/* Column count follows viewport width: ~3 cols on a laptop window, ~4 mid,
   ~5 on a large display (change-brief-2 #4). auto-fit + a BOUNDED track
   (no 1fr) + justify-content:center lets a partial or single row sit
   CENTERED in the free space instead of piling left (change-brief-8 §1).
   CARD SIZE is the priority (users liked the larger, generous card): the
   track band is 330–380px so cards read large like before. auto-fit sizes
   the column COUNT by the track's fixed MAX, so this lands ~3 cols on a
   ~1440 laptop and up to ~5 on a 2000px+ display given the 36px gap +
   reserved rail lane — exact counts are secondary to the larger size. Cards
   flex within the 330–380 band; a short set that fits one row centers via
   the collapsed trailing tracks. Left padding reserves the rail lane so
   centering happens in the space to the RIGHT of the rail; the leftmost
   card never sits under it. The taller card (4/5 of a wider column) also
   gives the panel-variant footer text room so it never overlaps the panel. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 380px));
  justify-content: center;
  gap: 36px;
  max-width: 2100px;
  margin-inline: auto;
  padding: 24px;
  padding-left: max(24px, var(--rail-lane));
}
@media (min-width: 1024px) { .card-grid { padding: 40px; padding-left: max(40px, var(--rail-lane)); } }
@media (min-width: 1600px) { .card-grid { padding: 48px; padding-left: max(48px, var(--rail-lane)); } }
@media (max-width: 360px)  { .card-grid { padding: 16px; } }
/* Mobile: rail hidden (<480px) → single full-width column, no reserved lane. */
@media (max-width: 480px)  { .card-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CARD — shared base (single component, variant + modifiers)
   ============================================================ */
.card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card-rest);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  color: inherit;
  border: 0;
  padding: 0;
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft);
  will-change: transform;
}
/* hairline border via inset ring so it sits above clipped media */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--ink-200);
  pointer-events: none;
  z-index: 5;
}

/* Hover (all cards): the weighted move lives on the ASSET (panel / full-bleed
   image) — the card itself only deepens its shadow. (change-brief-2 #3) */
@media (hover: hover) {
  .card:hover {
    box-shadow: var(--shadow-card-hover);
  }
}
/* Active / pressed */
.card:active { transform: scale(.985); transition-duration: var(--dur-fast); }
.card:active { transition-timing-function: var(--ease-press); }

/* inner wrapper is layout-transparent so absolute media/footer resolve to .card */
.card__inner { display: contents; }

/* Whole-card click target (Card A) + focus-visible ring */
.card__stretch {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  /* buttons carry a UA-default opaque background — clear it so a
     <button> stretch target never paints over the card content */
  background: transparent;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.card__stretch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue-500), 0 0 0 5px var(--focus-ring);
}
.card .pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue-500), 0 0 0 7px var(--focus-ring);
  border-radius: var(--radius-pill);
}

/* ---- Media layer ---- */
.card__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.card__media img,
.card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.98) contrast(.98);
  /* baseline over-scale gives cover-overflow room so the rise never
     reveals a gap at the clipped frame edge on hover */
  transform: scale(1.04);
  transform-origin: center;
  transition: transform var(--dur-rise) var(--ease-out-soft);
}
/* Full-bleed asset rises + slowly zooms within its clipped frame */
@media (hover: hover) {
  .card:hover .card__media img,
  .card:hover .card__media video { transform: translateY(-8px) scale(1.09); }
}

/* Poster + video stacking for has-video */
.card__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-smooth);
}
.card.is-playing .card__video { opacity: 1; transition-duration: var(--dur-video); }

/* ---- Signature gradient fade (spec §3.1) — full-bleed hero (change-brief-5)
   Image covers the WHOLE card (see .card__media inset:0). The fade is laid
   OVER it as a STRETCHED OVAL of white emanating from the BOTTOM-LEFT corner
   (an ellipse wider than tall — horizontal radius > vertical radius), with a
   denser legible core behind the eyebrow/title/subtitle/Explore and a gentle
   bottom safety wash. The oval still DISSOLVES so the photo stays clearly
   visible in the upper-right half (no whiteout). ---- */
.card__fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* stretched oval of white from the bottom-left corner. First radius (172%)
       is horizontal, second (108%) vertical — wider-than-tall = a stretched
       ellipse. Anchored just past the corner (-9% 114%) so the corner is fully
       opaque. Dense core (0.99 @ 33%, 0.9 @ 49%) yields >=7:1 title contrast on
       Ad Studio's dark photo, yet dissolves to 0 by 90% so the top-right stays
       clearly visible. */
    radial-gradient(174% 115% at -9% 114%,
      #FFFFFF 0%,
      rgba(255,255,255,.99) 35%,
      rgba(255,255,255,.93) 52%,
      rgba(255,255,255,.6)  67%,
      rgba(255,255,255,.2)  80%,
      rgba(255,255,255,0)   91%),
    /* gentle bottom safety wash — keeps the full footer band readable without
       flooding the bottom-right, so the shape still reads as a bottom-left oval */
    linear-gradient(180deg,
      rgba(255,255,255,0)   46%,
      rgba(255,255,255,.16) 66%,
      rgba(255,255,255,.5)  84%,
      rgba(255,255,255,.82) 100%);
}

/* ============================================================
   TREATMENT 1 — LITERAL (full-bleed screenshot, text over fade)
   ============================================================ */
.card--literal { aspect-ratio: 4 / 5; }
/* Full-bleed crop (change-brief-4): the source art has content in its top
   region with baked-in white below, so object-fit:cover alone shows that
   white as a hard footer. We over-scale the image past the card and pan to
   the content slice via a negative top offset (per-card --art-h / --art-top),
   so the imagery covers the WHOLE card top-to-bottom with no divide. The fade
   (a sibling layer) then lays the organic bottom-left wash over it. The hover
   rise+zoom lives on `transform`, which composes cleanly over this offset. */
.card--literal .card__media img {
  position: absolute;
  left: 0;
  width: 100%;
  top: var(--art-top, 0%);
  height: var(--art-h, 100%);
  object-position: center;
}
.card--literal .card__footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 26px 28px 30px;
}

/* ============================================================
   TREATMENT 2 — FLOATING PANEL on a per-asset wash
   (change-brief-2: level/straight panel — no tilt — floating on a
   muted, sophisticated "gallery mat" whose color derives from the
   asset's own dominant hue via the --wash custom property, set per
   card in app.js. Falls back to a refined neutral slate.)
   ============================================================ */
.card--floating {
  --wash: #AEB7C4;               /* refined neutral-slate fallback */
  aspect-ratio: 4 / 5;
  background: #FFFFFF;
}
/* Per-asset wash: muted tinted mat at top, dissolving to the light footer.
   Consistent weight across cards so the grid still reads as one system. */
.card__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(125% 85% at 76% -10%,
      color-mix(in srgb, var(--wash) 82%, #FFFFFF) 0%,
      color-mix(in srgb, var(--wash) 34%, #FFFFFF) 42%,
      rgba(255,255,255,0) 68%),
    linear-gradient(172deg,
      color-mix(in srgb, var(--wash) 90%, #FFFFFF) 0%,
      color-mix(in srgb, var(--wash) 66%, #FFFFFF) 22%,
      color-mix(in srgb, var(--wash) 34%, #FFFFFF) 46%,
      color-mix(in srgb, var(--wash) 12%, #FFFFFF) 62%,
      #FFFFFF 80%);
  pointer-events: none;
}
/* The screenshot rendered as a level (untilted) inset floating panel */
.card__panel {
  position: absolute;
  top: 8.5%;
  left: 10%;
  right: 10%;
  height: 50%;
  z-index: 1;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--surface);
  transform-origin: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 2px 6px rgba(16,42,72,.10),
    0 18px 40px rgba(16,42,72,.22);
  transition: transform var(--dur-rise) var(--ease-out-soft),
              box-shadow var(--dur-rise) var(--ease-out-soft);
}
/* crisp hairline on the panel edge */
.card__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(16,42,72,.08);
  pointer-events: none;
  z-index: 3;
}
.card__panel img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Hover: the level panel gently rises and slowly zooms in — one weighted
   move, no rotation (change-brief-2 #3). */
@media (hover: hover) {
  .card:hover .card__panel {
    transform: translateY(-8px) scale(1.04);
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 4px 12px rgba(16,42,72,.14),
      0 30px 60px rgba(16,42,72,.30);
  }
}
/* Floating footer sits on the light lower wash */
.card--floating .card__footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 22px 28px 30px;
}

/* ---- Brand System — full color-palette ARTBOARD as a floating document ----
   (change-brief-5) The source is a near-square color-palette artboard, not a
   photo. It is shown WHOLE inside a slightly taller/narrower panel via
   object-fit:contain so the Color Palette header, both hex-labelled swatch rows
   and the "View Color Palette" button all read intact — no crop, no over-scale.
   Panel white bg + rounded frame mats the artboard like a gallery document. */
.card--artboard .card__panel {
  top: 4%;
  left: 13%;
  right: 13%;
  height: 53%;
  background: #FFFFFF;
}
.card--artboard .card__panel img {
  object-fit: contain;
  object-position: center;
  background: #FFFFFF;
}

/* ============================================================
   TREATMENT 3 — METRIC (designed big-number hero, all SVG/CSS)
   A clean metric composition — progress ring + Geist-Mono number +
   play-family chips — on a gentle blue-50→surface tint. No screenshot.
   Same shell, footer and hover language (rise+zoom) as the other two.
   ============================================================ */
.card--metric { aspect-ratio: 4 / 5; }
.card--metric .card__inner {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
}
/* Hero region — top ~55%, calm brand-tint field */
.card__metric {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 26px 20px 20px;
  background: linear-gradient(180deg, #EEF4FB 0%, #FFFFFF 62%);
}
/* the composition that gently rises + zooms on hover */
.metric-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform-origin: center;
  transition: transform var(--dur-rise) var(--ease-out-soft);
  will-change: transform;
}
@media (hover: hover) {
  .card:hover .metric-figure { transform: translateY(-8px) scale(1.03); }
}

/* Progress ring — SVG ~104px, 10px stroke, round caps */
.metric-ring { position: relative; width: 104px; height: 104px; }
.metric-ring svg { display: block; width: 104px; height: 104px; overflow: visible; }
.metric-ring circle {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}
.ring-track { stroke: var(--ink-100); }
.ring-arc   { stroke: var(--blue-500); }
.ring-tip   { stroke: #F36F21; }          /* short orange accent tip (SGA ring style) */

/* Big number centered inside the ring — Geist Mono, tabular */
.metric-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.metric-unit {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
/* Play-family chips — one compact row, wraps to at most two lines */
.metric-families {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 96%;
  max-height: 50px;
  overflow: hidden;
  margin-top: 2px;
}
.metric-chip {
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  color: var(--ink-600);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-badge);
  padding: 5px 9px;
  white-space: nowrap;
}
/* Footer sits in flow below the field, on the white surface */
.card__footer--metric {
  position: relative;
  z-index: 3;
  padding: 4px 28px 30px;
}

/* ============================================================
   TYPE — the 6 hierarchy levels (spec §2.6)
   ============================================================ */
.eyebrow {
  margin: 0 0 11px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.card__title--display {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__title--b {
  margin: 0;
  font-size: 20px;
  line-height: 1.20;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.card__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 450;
  color: var(--ink-500);
  max-width: 40ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--b .card__subtitle { margin-top: 6px; }

/* Explore link (Card A) */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: var(--ink-700);
  transition: color var(--dur-base) var(--ease-smooth);
}
.card__link .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out-soft);
}
@media (hover: hover) {
  .card:hover .card__link { color: var(--blue-600); }
  .card:hover .card__link .arrow { transform: translateX(4px); }
}

/* Meta row (Card B) */
.card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-600);
}
.card__meta .meta-item { display: inline-flex; align-items: center; gap: 6px; }
.card__meta .meta-item svg { color: var(--ink-400); flex: none; }
.card__meta .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Pill button (Card B) */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 16px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  background: var(--ink-900);
  color: #FFFFFF;
  box-shadow: var(--shadow-pill);
  transition: background var(--dur-base) var(--ease-smooth),
              transform var(--dur-fast) var(--ease-press);
}
.pill:hover { background: var(--blue-600); }
.pill:active { transform: scale(.98); }

/* ============================================================
   BADGE — has-video "Motion" (spec §6)
   ============================================================ */
.badge--video {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: var(--radius-pill);
  background: rgba(21,32,51,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-badge);
}
.badge--video svg { flex: none; }

/* ============================================================
   9-STATE MATRIX — loading / empty / error (spec §7)
   ============================================================ */
/* Skeleton */
.skeleton { position: relative; overflow: hidden; }
.skel-block, .skel-bar {
  position: relative;
  background: var(--ink-100);
  overflow: hidden;
}
.skel-media { position: absolute; inset: 0; z-index: 0; background: var(--ink-100); }
.skel-bar { border-radius: 6px; }
.skel-title { height: 16px; width: 60%; margin-bottom: 10px; }
.skel-sub1  { height: 10px; width: 90%; margin-bottom: 8px; }
.skel-sub2  { height: 10px; width: 70%; }
.skeleton .skel-block::after,
.skeleton .skel-bar::after,
.skeleton .skel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  animation: skel-shimmer 1.4s var(--ease-smooth) infinite;
}

@keyframes skel-shimmer { to { transform: translateX(100%); } }

/* Empty / error media field */
.media-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink-50);
  text-align: center;
  padding: 16px;
}
.media-fallback svg { color: var(--ink-300); }
.media-fallback.is-error svg { color: var(--error); }
.media-fallback .fallback-text { font-size: 13px; color: var(--ink-400); }
.media-fallback .fallback-retry { font-size: 13px; font-weight: 500; color: var(--blue-600); margin-top: 2px; }

/* ============================================================
   GRID LOAD-IN — staggered reveal (spec §2.7 / §8)
   ============================================================ */
.card-grid.reveal .card {
  opacity: 0;
  transform: translateY(12px);
}
.card-grid.reveal.is-in .card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms var(--ease-out-soft), transform 420ms var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ============================================================
   COMMAND MODAL (stub — spec §9)
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh 20px 20px;
  background: rgba(16,42,72,.35);
}
.modal {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--ink-200);
  box-shadow: 0 8px 24px rgba(16,42,72,.12), 0 30px 60px rgba(16,42,72,.24);
  overflow: hidden;
}
.modal__search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ink-100);
}
.modal__search svg { color: var(--ink-400); flex: none; }
.modal__search input {
  flex: 1;
  border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; color: var(--ink-700);
  caret-color: var(--ink-700);
}
.modal__search input::placeholder { color: var(--ink-400); }
.cmd-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}

/* scrollable results — every clickable destination, grouped */
.cmd-results {
  max-height: 54vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
}
.cmd-group { padding: 0; }
.cmd-group + .cmd-group { margin-top: 4px; }
.cmd-group__label {
  padding: 12px 12px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.cmd-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  scroll-margin: 8px;
}
.cmd-row.is-active { background: var(--ink-100); }
.cmd-row__title {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 500; color: var(--ink-900);
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmd-row__slug {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-400);
}
.cmd-empty {
  padding: 40px 24px 44px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-500);
}
.modal__foot {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px;
  border-top: 1px solid var(--ink-100);
  font-size: 12px; color: var(--ink-500);
}
.cmd-hint { display: inline-flex; align-items: center; gap: 6px; }
.cmd-hint--end { margin-left: auto; }
.modal__foot .kbd { font-size: 11px; }

/* Modal enter transition (Alpine x-transition-driven classes) */
.modal-enter-active, .modal-leave-active { transition: opacity var(--dur-base) var(--ease-out-soft); }
.modal-scale-active { transition: transform var(--dur-base) var(--ease-out-soft), opacity var(--dur-base) var(--ease-out-soft); }

/* ============================================================
   WALK-AND-TALK — entry, popover, rail, session modal
   (walk-and-talk-build-brief). Reuses the same tokens, 48px
   corners, single SGA blue and ease-out-soft motion family.
   ============================================================ */

/* ---- Search hero row: [Walk & Talk entry] [search bar] ---- */
.search-hero__row {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 900px;
}
.search-hero__row .searchbar { max-width: none; flex: 1 1 auto; }

/* ---- Audio-levels / waveform icon (NEVER a microphone) ---- */
.wt-levels {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  color: inherit;
  flex: none;
}
.wt-levels i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform: scaleY(.4);
  transform-origin: center bottom;
  animation: wt-bar-idle 1.5s var(--ease-smooth) infinite;
}
.wt-levels.is-live i { animation-name: wt-bar-live; animation-duration: .95s; }
.wt-levels--sm { height: 13px; }
.wt-levels--lg { height: 34px; gap: 4px; }
.wt-levels--lg i { width: 4px; }
/* Larger waveform for the circular Walk & Talk button (change-brief-6 §1) */
.wt-levels--circle { height: 30px; gap: 4px; }
.wt-levels--circle i { width: 4px; border-radius: 2.5px; }
.wt-levels i:nth-child(1) { animation-delay: -.20s; }
.wt-levels i:nth-child(2) { animation-delay: -.55s; }
.wt-levels i:nth-child(3) { animation-delay: -.85s; }
.wt-levels i:nth-child(4) { animation-delay: -.35s; }
.wt-levels i:nth-child(5) { animation-delay: -.65s; }
.wt-levels i:nth-child(6) { animation-delay: -.10s; }
.wt-levels i:nth-child(7) { animation-delay: -.50s; }
@keyframes wt-bar-idle { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(.72); } }
@keyframes wt-bar-live { 0%,100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

/* ---- Entry element — a CIRCLE, icon-only, near-black w/ white waveform.
   Diameter ~2x the 60px search field (120px). Vertically centered on the
   search bar; the taller circle extends above and below it. (change-brief-6 §1) */
.wt-entry-wrap { position: relative; flex: none; }
.wt-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink-950);          /* solid near-black #0E1726 */
  color: #FFFFFF;                       /* white waveform icon */
  box-shadow: 0 2px 8px rgba(14,23,38,.20), 0 12px 32px rgba(14,23,38,.24);
  transition: box-shadow var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-smooth);
}
.wt-entry:hover {
  background: #060B14;
  box-shadow: 0 3px 10px rgba(14,23,38,.24), 0 18px 44px rgba(14,23,38,.30);
  transform: scale(1.045);
}
/* the bars come alive on hover / when the popover is open */
.wt-entry:hover .wt-levels i,
.wt-entry.is-open .wt-levels i { animation-name: wt-bar-live; animation-duration: .8s; }
.wt-entry:active { transform: scale(.99); transition-duration: var(--dur-fast); }
.wt-entry.is-open { background: #060B14; }
.wt-entry:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--ink-950);
}

/* "Walk & Talk" wordmark — fades / slides in centered UNDER the circle on hover */
.wt-entry__label {
  position: absolute;
  top: calc(100% + 14px);
  left: 60px;                          /* circle center (120px wide wrap) */
  transform: translateX(-50%) translateY(5px);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--ink-900);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft);
}
.wt-entry-wrap:hover .wt-entry__label,
.wt-entry:focus-visible ~ .wt-entry__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* hide the hover label while the popover is open (the popover sits below) */
.wt-entry-wrap:has(.wt-entry.is-open) .wt-entry__label { opacity: 0; }

/* ---- Popover (2 modes + Start) ---- */
.wt-popover {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 80;
  width: 344px;
  max-width: calc(100vw - 32px);
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 26px;
  box-shadow: 0 8px 24px rgba(16,42,72,.12), 0 30px 60px rgba(16,42,72,.22);
}
.wt-pop-active { transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft); }
.wt-popover__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.wt-popover__sub { margin: 4px 0 14px; font-size: 13px; line-height: 1.4; color: var(--ink-500); }
.wt-modes { display: flex; flex-direction: column; gap: 10px; }
.wt-mode {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 13px 40px 13px 14px;
  text-align: left;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color var(--dur-base) var(--ease-smooth),
              background var(--dur-base) var(--ease-smooth),
              box-shadow var(--dur-base) var(--ease-smooth);
}
.wt-mode:hover { border-color: var(--ink-300); background: var(--ink-50); }
.wt-mode.is-sel { border-color: var(--ink-900); background: var(--ink-50); box-shadow: 0 0 0 3px var(--focus-ink); }
.wt-mode:focus-visible { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 3px var(--focus-ink); }
.wt-mode__ico { flex: none; margin-top: 1px; color: var(--ink-700); }
.wt-mode__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wt-mode__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink-900); }
.wt-mode__desc { font-size: 12px; line-height: 1.4; color: var(--ink-500); }
.wt-mode__tick {
  position: absolute;
  top: 14px; right: 14px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  transition: border-color var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth);
}
.wt-mode.is-sel .wt-mode__tick { border-color: var(--ink-950); background: var(--ink-950); box-shadow: inset 0 0 0 3px #FFFFFF; }
.wt-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  margin-top: 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink-950);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-pill);
  transition: background var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.wt-start:hover { background: var(--ink-800, #1B2740); }
.wt-start:active { transform: scale(.98); }

/* ============================================================
   LEFT-EDGE QUEUE RAIL
   ============================================================ */
.wt-rail {
  position: fixed;
  left: 40px;                          /* inset ~40px off the left edge (change-brief-6 §2) */
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 7px;                            /* lines ~10-12px apart (much tighter) */
  padding: 14px 12px 14px 0;
}
.wt-rail__head {
  display: grid;
  place-items: center;
  width: 24px; height: 20px;
  margin-bottom: 8px;
  color: var(--ink-400);
}
.wt-rail__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 8px 2px 0;              /* thin strips → ~11px line-to-line */
  margin: 0;
  border: 0;
  background: transparent;
  position: relative;
}
/* the line — short hairline at rest; monochrome status encoding below */
.wt-rail__line {
  display: block;
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink-300);
  transition: width var(--dur-slow) var(--ease-out-soft),
              height var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-smooth),
              opacity var(--dur-base) var(--ease-smooth);
}
/* MONOCHROME status encoding — ALL lines a uniform 2px; status by TONE only,
   never thickness (change-brief-7 §3). */
/* Proposed  → light gray */
.wt-rail__item.is-change.is-proposed   .wt-rail__line { height: 2px; background: var(--ink-300); }
/* In progress → dark gray, subtle opacity pulse */
.wt-rail__item.is-change.is-in-progress .wt-rail__line { height: 2px; background: var(--ink-600); animation: wt-pulse 2.4s var(--ease-smooth) infinite; }
/* Executed → solid BLACK — the clear "done" cue, via tone not weight */
.wt-rail__item.is-change.is-executed   .wt-rail__line { height: 2px; background: var(--ink-950); }
/* Conversation logged → muted gray; keeps its distinct shorter length + rounded cap */
.wt-rail__item.is-conversation .wt-rail__line { width: 12px; height: 2px; border-radius: 9999px; background: var(--ink-400); }
@keyframes wt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* hover / focus: the line organically extends (still monochrome) */
.wt-rail__item:hover .wt-rail__line,
.wt-rail__item:focus-visible .wt-rail__line { width: 42px; }
.wt-rail__item.is-conversation:hover .wt-rail__line,
.wt-rail__item.is-conversation:focus-visible .wt-rail__line { width: 32px; }
.wt-rail__item:focus-visible { outline: none; }
.wt-rail__item:focus-visible .wt-rail__label { opacity: 1; transform: translate(0, -50%); }

/* revealed label — ABSOLUTELY positioned so it never occupies vertical space
   in the rail column (that's what lets the lines sit ~10px apart). */
.wt-rail__label {
  position: absolute;
  left: 36px;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 226px;
  max-width: 300px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  box-shadow: var(--shadow-card-hover);
  text-align: left;
  opacity: 0;
  transform: translate(-6px, -50%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
.wt-rail__item:hover .wt-rail__label { opacity: 1; transform: translate(0, -50%); }
.wt-rail__title { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-900); }
.wt-rail__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wt-rail__by { font-size: 11.5px; color: var(--ink-500); }
@media (max-width: 480px) { .wt-rail { display: none; } }

/* ---- status/type chip (shared: rail label + modal header) ---- */
.wt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.wt-chip__dot { opacity: .5; }
/* monochrome status chips (change-brief-6 §2/§4) */
.wt-chip--proposed    { background: var(--ink-100); color: var(--ink-600); border-color: var(--ink-200); }
.wt-chip--in-progress { background: var(--ink-200); color: var(--ink-700); border-color: var(--ink-300); }
.wt-chip--executed    { background: var(--ink-900); color: #FFFFFF; border-color: var(--ink-900); }
.wt-chip--convo       { background: var(--ink-50); color: var(--ink-500); border-color: var(--ink-200); }

/* ============================================================
   WALK-AND-TALK SESSION MODAL
   ============================================================ */
.wt-backdrop {
  align-items: center;
  padding: 5vh 20px;
  background: rgba(16,42,72,.28);
  -webkit-backdrop-filter: blur(16px) saturate(.9);
  backdrop-filter: blur(16px) saturate(.9);
}
@media (prefers-reduced-motion: reduce) {
  .wt-backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.wt-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);   /* 48px soft corners */
  box-shadow: 0 8px 24px rgba(16,42,72,.12), 0 40px 80px rgba(16,42,72,.28);
  overflow: hidden;
}
.wt-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 32px 18px;
  border-bottom: 1px solid var(--ink-100);
}
.wt-modal__headmain { flex: 1; min-width: 0; }
.wt-modal__mode {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500);
}
.wt-modal__title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900); }
.wt-modal__meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wt-avatar {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink-100);
  color: var(--ink-700);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
}
.wt-modal__by { font-size: 12.5px; color: var(--ink-500); }
.wt-modal__by b { color: var(--ink-700); font-weight: 600; }
.wt-modal__x {
  display: grid; place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-500);
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth);
}
.wt-modal__x:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-700); }

/* transcript body */
.wt-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 32px 10px;
}
.wt-resume { margin: 0; text-align: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
.wt-turn { display: flex; flex-direction: column; gap: 5px; max-width: 82%; }
.wt-turn--you { align-self: flex-end; align-items: flex-end; }
.wt-turn--kb  { align-self: flex-start; align-items: flex-start; }
.wt-turn__who { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-400); }
.wt-bubble { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.55; border-radius: 18px; }
/* monochrome conversation: speaker = near-black, KB = light-gray (change-brief-6 §4) */
.wt-turn--you .wt-bubble { background: var(--ink-950); color: #FFFFFF; border-bottom-right-radius: 6px; }
.wt-turn--kb .wt-bubble { background: var(--ink-100); color: var(--ink-800); border: 1px solid var(--ink-200); border-bottom-left-radius: 6px; }

/* transcribe mode → one flowing transcription, no bubbles */
.wt-modal__body.is-transcribe .wt-turn { max-width: 100%; align-self: stretch; align-items: stretch; }
.wt-modal__body.is-transcribe .wt-turn__who { display: none; }
.wt-modal__body.is-transcribe .wt-bubble {
  background: transparent; color: var(--ink-700);
  border: 0; padding: 0; border-radius: 0;
  font-size: 15.5px; line-height: 1.7;
}

/* live listening affordance (simulated) */
.wt-listening {
  display: inline-flex; align-items: center; gap: 12px;
  align-self: flex-start;
  padding: 9px 16px;
  border-radius: 16px;
  background: var(--ink-100);
  color: var(--ink-700);
}
.wt-listening__txt { font-size: 13px; font-weight: 600; }

/* queued confirmation — monochrome (change-brief-6 §4) */
.wt-queued {
  display: flex; align-items: center; gap: 10px;
  align-self: stretch;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--ink-100);
  color: var(--ink-900);
  font-size: 13px; font-weight: 600;
}
.wt-queued__ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-950); color: #FFFFFF; flex: none; }

/* continue affordances (existing sessions) */
.wt-continue { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 32px 2px; }
.wt-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 12.5px; font-weight: 500;
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth);
}
.wt-ghost svg { color: var(--ink-400); transition: color var(--dur-base) var(--ease-smooth); }
.wt-ghost:hover { background: var(--ink-50); border-color: var(--ink-400); color: var(--ink-900); }
.wt-ghost:hover svg { color: var(--ink-700); }

/* footer actions */
.wt-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 32px 22px;
  border-top: 1px solid var(--ink-100);
}
.wt-foot__left { display: flex; align-items: center; gap: 8px; }
.wt-foot__hint { font-size: 12px; color: var(--ink-500); }
.wt-foot__right { display: flex; align-items: center; gap: 10px; }
.wt-btn {
  height: 44px; padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600;
  transition: background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.wt-btn:active { transform: scale(.98); }
/* primary action = solid black; secondary = ghost/outline B&W (change-brief-6 §4) */
.wt-btn--primary { background: var(--ink-950); color: #FFFFFF; box-shadow: var(--shadow-pill); }
.wt-btn--primary:hover { background: var(--ink-800); }
.wt-btn--primary:disabled { background: var(--ink-500); cursor: default; }
.wt-btn--ghost { background: var(--surface); border-color: var(--ink-200); color: var(--ink-700); }
.wt-btn--ghost:hover { background: var(--ink-50); border-color: var(--ink-300); }
.wt-btn--close { background: var(--surface); border-color: var(--ink-200); color: var(--ink-700); }
.wt-btn--close:hover { background: var(--ink-50); border-color: var(--ink-300); }

@media (max-width: 620px) {
  .search-hero__row { flex-direction: column; align-items: center; gap: 18px; }
  .search-hero__row .searchbar { width: 100%; }
  /* circle stays a circle on mobile, just a touch smaller */
  .wt-entry { width: 96px; height: 96px; }
  .wt-entry__label { left: 48px; }
  .wt-levels--circle { height: 26px; }
  .wt-popover { left: 50%; transform: translateX(-50%); right: auto; }
  .wt-modal__head, .wt-modal__body, .wt-continue, .wt-modal__foot { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   PINNED CONTROL DOCK (change-brief-9)
   Persistent top-left cluster: compact Walk & Talk bars + a
   circular search button. Hidden at root-top; flies up into the
   corner once the hero scrolls away, and stays pinned at every
   drill level. Strictly monochrome LEVR chrome.
   ============================================================ */
.pin-dock {
  position: fixed;
  top: 18px;
  left: 24px;
  z-index: 80;                         /* above rail (70), below modals (100) */
  /* Hidden state: parked just up-and-right of its resting spot, ready to
     fly into the corner. visibility keeps it out of the a11y/hit tree. */
  opacity: 0;
  visibility: hidden;
  transform: translate(8px, -10px) scale(1.06);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 460ms var(--ease-out-soft),
              transform 460ms var(--ease-out-soft),
              visibility 0s linear 460ms;
}
.pin-dock.is-docked {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
  transition: opacity 460ms var(--ease-out-soft),
              transform 460ms var(--ease-out-soft),
              visibility 0s linear 0s;
}
@media (min-width: 481px) { .pin-dock { left: 28px; } }

.pin-dock__cluster {
  display: inline-flex;
  flex-direction: column;             /* WT on top, search below (change-brief-9 rev) */
  align-items: flex-start;
  gap: 10px;
}
/* each control owns a relative box so its hover label can sit to the right
   without pushing the cluster around */
.pin-dock__ctrl { position: relative; display: inline-flex; }

/* ---- Walk & Talk dock button — near-black, white animated bars ---- */
.pin-dock__wt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink-950);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(14,23,38,.18), 0 6px 18px rgba(14,23,38,.20);
  transition: box-shadow var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-smooth);
}
.pin-dock__wt:hover { background: #060B14; transform: scale(1.06); box-shadow: 0 2px 6px rgba(14,23,38,.24), 0 10px 26px rgba(14,23,38,.26); }
.pin-dock__wt:active { transform: scale(.97); transition-duration: var(--dur-fast); }
.pin-dock__wt.is-open { background: #060B14; }
.pin-dock__wt:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink-950); }
/* bars come alive on hover / when the popover is open (mirrors .wt-entry) */
.pin-dock__wt:hover .wt-levels i,
.pin-dock__wt.is-open .wt-levels i { animation-name: wt-bar-live; animation-duration: .8s; }
/* shrink the shared circle waveform to fit the compact 48px button */
.pin-dock__wt .wt-levels--circle { height: 18px; gap: 3px; }
.pin-dock__wt .wt-levels--circle i { width: 3px; border-radius: 2px; }

/* ---- Ask-anything dock button — light circle, ink glyph ---- */
.pin-dock__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-600);
  box-shadow: var(--shadow-search);
  transition: border-color var(--dur-base) var(--ease-smooth),
              background var(--dur-base) var(--ease-smooth),
              color var(--dur-base) var(--ease-smooth),
              transform var(--dur-base) var(--ease-out-soft);
}
.pin-dock__search:hover { border-color: var(--ink-300); background: var(--ink-50); color: var(--ink-900); transform: scale(1.06); }
.pin-dock__search:active { transform: scale(.97); transition-duration: var(--dur-fast); }
.pin-dock__search:focus-visible { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 3px var(--focus-ink); }

/* ---- Hover label (subtle, absolute → no layout shift) ---- */
.pin-dock__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translate(-4px, -50%);
  padding: 4px 9px;
  background: var(--ink-950);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border-radius: var(--radius-badge);
  box-shadow: var(--shadow-badge);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft);
}
.pin-dock__ctrl:hover .pin-dock__label,
.pin-dock__wt:focus-visible + .pin-dock__label,
.pin-dock__search:focus-visible + .pin-dock__label { opacity: 1; transform: translate(0, -50%); }
/* hide the WT label while its popover is open (popover drops below the dock) */
.pin-dock:has(.pin-dock__wt.is-open) .pin-dock__ctrl:first-child .pin-dock__label { opacity: 0; }

/* ---- Dock popover — same component, anchored under the dock, left origin.
   `transform: none` overrides the ≤620px hero-popover centering so the dock
   popover stays left-aligned under the dock at every width. ---- */
.wt-popover--dock { top: calc(100% + 10px); left: 0; right: auto; transform: none; transform-origin: top left; }

@media (max-width: 480px) {
  .pin-dock { top: 12px; left: 16px; }
  .pin-dock__cluster { gap: 8px; }
  .pin-dock__wt, .pin-dock__search { width: 44px; height: 44px; }
}

/* ============================================================
   BRAND NAV ORB (bottom-left) — the LEVR curve-mark as the persistent
   navigation / settings entry point, mirroring the top-left dock. Dark
   circle + white mark (echoes the WT primary); alert badge top-right.
   ============================================================ */
.nav-orb-wrap {
  position: fixed;
  bottom: 20px;
  left: 24px;
  z-index: 80;                         /* same layer as the dock */
}
@media (min-width: 481px) { .nav-orb-wrap { left: 28px; bottom: 24px; } }

.nav-orb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink-950);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(14,23,38,.18), 0 6px 18px rgba(14,23,38,.20);
  transition: box-shadow var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-smooth);
}
.nav-orb:hover { background: #060B14; transform: scale(1.06); box-shadow: 0 2px 6px rgba(14,23,38,.24), 0 10px 26px rgba(14,23,38,.26); }
.nav-orb:active { transform: scale(.97); transition-duration: var(--dur-fast); }
.nav-orb:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink-950); }
.nav-orb__mark { width: 24px; height: 24px; overflow: visible; }

/* Review-count alert badge — the single sanctioned accent, top-right of
   the circle. White ring separates it from both the dark orb and the page. */
.nav-orb__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--alert);
  color: var(--alert-ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 2px var(--surface);   /* ring against the page */
}

/* Hover label to the right (mirrors the dock labels) */
.nav-orb__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translate(-4px, -50%);
  padding: 4px 9px;
  white-space: nowrap;
  background: var(--ink-950);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: var(--radius-badge);
  box-shadow: var(--shadow-badge);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft);
}
.nav-orb-wrap:hover .nav-orb__label,
.nav-orb:focus-visible ~ .nav-orb__label { opacity: 1; transform: translate(0, -50%); }

@media (max-width: 480px) {
  .nav-orb-wrap { left: 16px; bottom: 16px; }
  .nav-orb { width: 44px; height: 44px; }
}
.nav-orb.is-open { background: #060B14; }

/* ---- Nav menu — pops UP from the orb (This Week / Loops / Content Library) ---- */
.nav-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: 90;
  width: 292px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  overflow: hidden;                    /* clip the dark Organization zone to the corners */
  box-shadow: 0 8px 24px rgba(16,42,72,.12), 0 30px 60px rgba(16,42,72,.20);
  transform-origin: bottom left;
}
/* Organization = a distinct DARK section at the bottom (org-level nav reads apart
   from the platform sections above). Reaches the menu edges + rounds with it. */
.nav-menu__org {
  margin: 8px -8px -8px;
  padding: 6px 8px 10px;
  background: var(--ink-950);
}
.nav-menu__org .nav-menu__eyebrow { color: rgba(255,255,255,.42); }
.nav-menu__org .nav-menu__item { color: #FFFFFF; }
.nav-menu__org .nav-menu__item:hover { background: rgba(255,255,255,.09); }
.nav-menu__org .nav-menu__item:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.nav-menu__org .nav-menu__name { color: #FFFFFF; }
.nav-menu__org .nav-menu__desc { color: rgba(255,255,255,.55); }
.nav-menu__org .nav-menu__ico { background: rgba(255,255,255,.14); color: #FFFFFF; }
.nav-menu__org .nav-menu__chev { color: rgba(255,255,255,.42); }
/* "22" identifier on the simpler Sub Accounts button (soft chip on dark) */
.nav-menu__tag {
  flex: none; padding: 2px 8px; border-radius: 9999px;
  background: rgba(255,255,255,.14); color: #FFFFFF;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600; line-height: 1.45;
}
/* sub-account context header (which sub-account you're inside) — label, not a button */
.nav-menu__subacct { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; }
.nav-menu__subacct .nav-menu__name { color: #FFFFFF; }
.nav-menu__subacct .nav-menu__desc { color: rgba(255,255,255,.55); }
.nav-menu__subacct .nav-menu__ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.14); color: #FFFFFF; }
/* nested sub-account sections — inset + smaller tile so they read as children */
.nav-menu__item--sub { padding-left: 14px; }
.nav-menu__item--sub .nav-menu__ico { width: 28px; height: 28px; border-radius: 8px; }
.nav-menu__item--sub .nav-menu__name { font-size: 13.5px; }
/* "All sub accounts" back link */
.nav-menu__back {
  display: block; width: 100%; margin-top: 2px; padding: 8px 12px 4px 14px;
  border: 0; background: transparent; text-align: left; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.5);
  transition: color var(--dur-fast) var(--ease-smooth);
}
.nav-menu__back:hover, .nav-menu__back:focus-visible { outline: none; color: #FFFFFF; }
.nav-menu-active { transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft); }
.nav-menu__eyebrow {
  margin: 10px 10px 4px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-400);
}
.nav-menu__eyebrow:first-child { margin-top: 4px; }
.nav-menu__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 10px;
  border: 0; background: transparent; border-radius: 14px;
  text-align: left; cursor: pointer; color: var(--ink-800);
  transition: background var(--dur-fast) var(--ease-smooth);
}
.nav-menu__item:hover { background: var(--ink-50); }
.nav-menu__item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ink); }
.nav-menu__ico {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--ink-950); color: #FFFFFF;
}
.nav-menu__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-menu__name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900); }
.nav-menu__desc { font-size: 12px; color: var(--ink-500); }
.nav-menu__chev { flex: none; color: var(--ink-300); display: grid; place-items: center; }
.nav-menu__count {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: var(--alert); color: var(--alert-ink);
  font-size: 11px; font-weight: 650; line-height: 1;
}

/* ============================================================
   THIS WEEK — weekly briefings rendered as node cards (same grid, size and
   48px corners as every drilled section). A prominent centered play button
   sits above the text footer; play in place OR click the card to dive in.
   ============================================================ */
.card--pulse .pulse-card__field {
  position: relative;
  align-items: center;
  justify-content: center;
}
.pulse-card__field .node-card__top {
  position: absolute;
  top: 22px; left: 26px; right: 26px;
}
.pulse-card__flags { display: inline-flex; align-items: center; gap: 8px; }
.pulse-card__new {
  padding: 2px 8px; border-radius: 9999px;
  background: var(--alert); color: var(--alert-ink);
  font-family: var(--font-ui); font-size: 10px; font-weight: 650; letter-spacing: .05em;
}
/* the centered play cluster sits ABOVE the whole-card stretch (z-index 4) so it
   plays in place, while clicking anywhere else on the card drills in */
.pulse-card__playwrap {
  position: relative; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pulse-card__play {
  width: 78px; height: 78px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--ink-950); color: #FFFFFF; cursor: pointer;
  box-shadow: 0 2px 8px rgba(14,23,38,.20), 0 14px 32px rgba(14,23,38,.24);
  transition: transform var(--dur-rise) var(--ease-out-soft),
              background var(--dur-base) var(--ease-smooth),
              box-shadow var(--dur-rise) var(--ease-out-soft);
}
.pulse-card__play:hover { background: #060B14; box-shadow: 0 3px 10px rgba(14,23,38,.24), 0 18px 40px rgba(14,23,38,.28); }
.pulse-card__play:active { transform: scale(.97); transition-duration: var(--dur-fast); }
.pulse-card__play:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--ink-950); }
.pulse-card__play-ico { margin-left: 3px; }   /* optical-center the triangle */
@media (hover: hover) {
  .card--pulse:hover .pulse-card__play { transform: translateY(-4px) scale(1.05); }
}
.pulse-card__dur {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
}
.pulse-card__dur .wt-levels { color: var(--ink-700); }
.card--pulse .card__footer--node .card__subtitle { -webkit-line-clamp: 2; }
.card--pulse.is-playing .node-card__field {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 15%, #FFFFFF) 0%,
    color-mix(in srgb, var(--accent) 5%, #FFFFFF) 46%,
    #FFFFFF 76%);
}

/* ---- Briefing detail — Email-Sequences theme + an audio header ---- */
.brief { display: block; }
.brief__player {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; margin-bottom: 26px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  box-shadow: var(--shadow-search);
}
.brief__play {
  flex: none; width: 60px; height: 60px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--ink-950); color: #FFFFFF; cursor: pointer;
  box-shadow: 0 2px 8px rgba(14,23,38,.20), 0 12px 28px rgba(14,23,38,.22);
  transition: transform var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-smooth);
}
.brief__play:hover { background: #060B14; transform: scale(1.05); }
.brief__play:active { transform: scale(.97); transition-duration: var(--dur-fast); }
.brief__play:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--ink-950); }
.brief__playmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brief__title { margin: 2px 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900); }
.brief__dur {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
}
.brief__dur .wt-levels { color: var(--ink-700); }

/* ============================================================
   BRIEFING DETAIL — full 3-column signal view (change-brief-10).
   Header band (player + synthesis) over: nav list · main signal
   card · What-Changed card. Monochrome LEVR chrome; --alert
   reserved for NEW / threatens-wedge emphasis (restrained).
   ============================================================ */

/* ---- Synthesis band (Tension / Word to own / Narrative + headline) ---- */
.synth {
  margin-bottom: 26px;
  padding: 26px 28px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 24px;
}
/* when it sits at the bottom (below the 3-column view) it leads with top space */
.synth--foot { margin-top: 28px; margin-bottom: 0; }
.synth__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.3fr;
  gap: 28px;
}
@media (max-width: 760px) { .synth__cols { grid-template-columns: 1fr; gap: 18px; } }
.synth__label {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-500);
}
.synth__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-800); }
.synth__text--own { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900); }
.synth__text--narr { font-style: italic; color: var(--ink-700); }
.synth__headline { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--ink-200); }
.synth__lead { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-900); max-width: 88ch; }
.synth__foot {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ink-200);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.synth__trends { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.synth__formula { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }

/* ---- 3-column grid: nav · main · What-Changed ---- */
.brief3 {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr minmax(260px, 320px);
  grid-template-areas: "nav main changed";
  gap: 28px;
  align-items: start;
}
.brief3__nav { grid-area: nav; }
.brief3 .signal { grid-area: main; }
.brief3 .changed { grid-area: changed; }
@media (min-width: 1101px) {
  .brief3 .changed { position: sticky; top: 24px; }
}
/* ≤1100 → nav + main; What-Changed drops full-width below */
@media (max-width: 1100px) {
  .brief3 {
    grid-template-columns: minmax(220px, 280px) 1fr;
    grid-template-areas: "nav main" "changed changed";
    gap: 24px;
  }
}
/* ≤760 → single column, order main → nav → changed */
@media (max-width: 760px) {
  .brief3 {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "nav" "changed";
    gap: 22px;
  }
}

/* ---- Middle: main signal card ---- */
.signal {
  padding: 28px 30px 30px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  box-shadow: var(--shadow-card-rest);
  min-width: 0;
}
.signal__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.signal__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.signal__rank {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-500);
}
.chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--ink-200); background: var(--ink-50); color: var(--ink-700);
  white-space: nowrap;
}
.chip--cat { background: var(--ink-900); border-color: var(--ink-900); color: #FFFFFF; }
.chip--reinforces { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-700); }
.chip--threatens {
  background: color-mix(in srgb, var(--alert) 8%, #FFFFFF);
  border-color: color-mix(in srgb, var(--alert) 40%, #FFFFFF);
  color: var(--alert);
}
.chip--new { background: var(--alert); border-color: var(--alert); color: var(--alert-ink); }
.chip--delta { font-family: var(--font-mono); background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-600); }
.signal__score { flex: none; text-align: right; }
.signal__composite {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--ink-900);
}
.signal__composite-lbl {
  display: block; margin-top: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-400);
}
.signal__title {
  margin: 18px 0 20px;
  font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900);
}

/* score meters — monochrome ink bar on ink-100 track */
.meters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.meter { display: flex; align-items: center; gap: 14px; }
.meter__label {
  flex: none; width: 74px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500);
}
.meter__track {
  flex: 1 1 auto; height: 6px; border-radius: 9999px; background: var(--ink-100); overflow: hidden;
}
.meter__fill {
  display: block; height: 100%; border-radius: 9999px; background: var(--ink-900);
  transition: width var(--dur-base) var(--ease-out-soft);
}
.meter__val {
  flex: none; width: 30px; text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: var(--ink-700);
}

.signal__p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.62; color: var(--ink-700); max-width: 70ch; }

/* So What box */
.sowhat {
  margin: 20px 0;
  padding: 18px 20px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
}
.sowhat__label {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600);
}
.sowhat__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-800); }

/* pull-quote */
.signal__quote {
  margin: 20px 0; padding: 4px 0 4px 18px;
  border-left: 2px solid var(--ink-300);
  font-size: 15.5px; line-height: 1.5; font-style: italic; color: var(--ink-600);
}

/* tags — personas vs type chips (type in mono, distinct) */
.signal__taglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 9999px; font-size: 12px; line-height: 1.3; }
.tag--persona { background: var(--ink-100); color: var(--ink-700); font-weight: 550; }
.tag--type {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--ink-200); color: var(--ink-500);
}

/* evidence + linked sources */
.evidence { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--ink-100); }
.evidence__head {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600);
}
.evidence__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.evidence__row {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink-100);
}
.evidence__row:last-child { border-bottom: 0; padding-bottom: 0; }
.evidence__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.evidence__src {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-500);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-smooth);
}
.evidence__src:hover { color: var(--ink-900); text-decoration: underline; }
.evidence__src:focus-visible { outline: none; color: var(--ink-900); box-shadow: 0 0 0 2px var(--focus-ink); border-radius: 6px; }
.evidence__src svg { flex: none; }

/* ---- Right: What Changed · Jump In card ---- */
.changed {
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  box-shadow: var(--shadow-card-rest);
}
.changed__head {
  margin: 0 0 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600);
}
.changed__jumps { display: flex; flex-direction: column; gap: 8px; }
.jump {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; text-align: left;
  border: 1px solid var(--ink-200); border-radius: 14px; background: var(--ink-50); cursor: pointer;
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.jump:hover { background: var(--surface); border-color: var(--ink-400); box-shadow: var(--shadow-search); }
.jump:active { transform: scale(.98); }
.jump:focus-visible { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 2px var(--focus-ink); }
.jump__n {
  flex: none; min-width: 22px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 600; color: var(--ink-900);
}
.jump__label { flex: 1 1 auto; font-size: 13px; font-weight: 500; color: var(--ink-700); }
.jump__chev { flex: none; color: var(--ink-400); transition: transform var(--dur-base) var(--ease-out-soft), color var(--dur-base) var(--ease-smooth); }
.jump:hover .jump__chev { color: var(--ink-700); transform: translateX(2px); }
.changed__bullets { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ink-100); display: flex; flex-direction: column; gap: 14px; }
.changed__bullet {
  position: relative; padding-left: 16px;
  font-size: 13px; line-height: 1.55; color: var(--ink-600);
}
.changed__bullet::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-400);
}

/* ---- Graceful fallback (pulses without a full detail) ---- */
.brief-empty {
  max-width: 620px; margin: 8px auto; padding: 44px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background: var(--surface); border: 1px solid var(--ink-200); border-radius: 24px;
  box-shadow: var(--shadow-card-rest);
}
.brief-empty__mark { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--ink-50); color: var(--ink-500); }
.brief-empty__title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900); }
.brief-empty__sub { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-600); max-width: 60ch; }
.brief-empty__note { margin: 4px 0 0; font-size: 13px; color: var(--ink-400); }
.brief-empty__note span { font-family: var(--font-mono); color: var(--ink-500); }

/* ---- Stub view — Loops / Content Library placeholder (next build) ---- */
.stub-view {
  max-width: 520px; margin: 32px auto; padding: 44px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.stub-view__mark {
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 20px; background: var(--ink-50); color: var(--ink-700);
}
.stub-view__title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900); }
.stub-view__sub { font-size: 15px; line-height: 1.5; color: var(--ink-500); max-width: 42ch; }

@media (max-width: 560px) {
  .nav-menu { width: 264px; }
  .brief__player { padding: 16px 18px; gap: 14px; }
  .brief__play { width: 52px; height: 52px; }
  .brief__title { font-size: 21px; }
}

/* ============================================================
   RECURSIVE CARD-DRILLING NAV (card-nav-build-brief)
   Cross-fade stage, node cards, expanding B&W breadcrumb,
   Email Sequences pill-tag view. LEVR chrome stays B&W; only
   client artifacts (the accent rule) carry SGA brand color.
   ============================================================ */

/* ---- Stage cross-fade (~260ms: 130 out + 130 in) ---- */
.stage { transition: opacity 130ms var(--ease-smooth); }
.stage.is-out { opacity: 0; }

/* Root note — flags that drill applies to all sections at scale */
.root-note {
  max-width: 640px;
  margin: 4px auto 40px;
  padding: 0 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-400);
}
.root-note strong { color: var(--ink-600); font-weight: 600; }

/* ============================================================
   HOME CARD FOOTER META ROW — mono count/meta + Explore link
   (flat-home: every card shows its group-eyebrow / title /
   descriptor / mono count). Count left, Explore right.
   ============================================================ */
.card__footrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
.card__footrow .card__link { margin-top: 0; flex: none; }
.card__count-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   LEAF CONTENT VIEW — a simple drilled content surface: the
   section's real capture, framed, with title / descriptor /
   count meta. Breadcrumb above reads Home › <group> › <label>.
   ============================================================ */
.leaf-view { max-width: 1040px; margin: 0 auto; }
.leaf-view__meta { margin-bottom: 26px; }
.leaf-view__title {
  margin: 8px 0 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.leaf-view__sub {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 62ch;
}
.leaf-view__count {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600);
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--ink-100);
}
.leaf-view__frame {
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  overflow: hidden;
  overflow-y: auto;
  max-height: 78vh;
  background: var(--surface);
  box-shadow: var(--shadow-card-rest);
}
.leaf-view__frame img { width: 100%; height: auto; display: block; }

/* ---- Drilled container (matches grid container padding for alignment) ----
   Reserves the same left rail lane (change-brief-8 §2) so the drilled grid +
   breadcrumb clear the Walk-and-Talk rail; the drilled grid inherits the
   auto-fit + justify-content:center centering from .card-grid. */
.drill {
  max-width: 2100px;
  margin-inline: auto;
  padding: 24px;
  padding-left: max(24px, var(--rail-lane));
}
/* Drilled CONTENT aligns with the breadcrumb: both indent to --dock-lane (≥481)
   so search bars / pill tabs / left-navs line up with the crumb's left edge. */
@media (min-width: 481px)  { .drill { padding-left: var(--dock-lane); } }
@media (min-width: 1024px) { .drill { padding: 40px; padding-left: max(40px, var(--dock-lane)); } }
@media (min-width: 1600px) { .drill { padding: 48px; padding-left: max(48px, var(--dock-lane)); } }
@media (max-width: 360px)  { .drill { padding: 16px; } }
/* the drilled grid inherits the container's padding, so zero its own */
.card-grid--drill { padding: 0; max-width: none; margin: 0; }

/* ---- Compact drilled header — breadcrumb IS the title (change-brief-7 §1/§2) ---- */
/* Extra bottom margin gives the content grid/pills breathing room now that the
   redundant heading + descriptor block is gone. */
.drill-head { position: relative; margin-bottom: 40px; }

/* ============================================================
   EXPANDING BREADCRUMB — top-left; horizontal at rest, hover
   expands to a vertical clickable list. Adapted to B&W chrome.
   ============================================================ */
.crumb { position: relative; display: inline-block; z-index: 20; }

/* Coexist with the pinned dock (change-brief-9): when the dock is present the
   breadcrumb starts to the right of it on the same top line. The drill already
   indents by --rail-lane; add only the extra needed to clear the dock cluster. */
/* Breadcrumb now inherits the drill's --dock-lane indent — aligned with the content. */
.drill.has-dock .drill-head { padding-left: 0; }

/* At mobile the dock cluster sits at the very top-left; instead of reserving a
   lane beside it (which forces wide crumbs like a full date label to overflow),
   drop the crumb below the dock and let it wrap. Prevents horizontal overflow
   at ≤480 for every drilled view. */
@media (max-width: 480px) {
  .drill.has-dock .drill-head { padding-left: 0; padding-top: 56px; }
  .crumb, .crumb__bar { max-width: 100%; }
  .crumb__bar { flex-wrap: wrap; }
}

/* REST — roomier horizontal pill; the breadcrumb is now the page title, so it
   gets real presence, not a tight chip (change-brief-7 §2). B&W, soft-cornered. */
.crumb__bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 10px 20px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  box-shadow: var(--shadow-search);
  transition: border-color var(--dur-base) var(--ease-smooth),
              box-shadow var(--dur-base) var(--ease-smooth);
}
.crumb.is-open .crumb__bar { border-color: var(--ink-300); box-shadow: var(--shadow-card-hover); }
.crumb__home {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 11px;
  background: var(--ink-950);
  color: #FFFFFF;
  transition: background var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.crumb__home:hover { background: #060B14; }
.crumb__home:active { transform: scale(.94); }
.crumb__home:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-950); }
.crumb__seg { display: inline-flex; align-items: center; gap: 4px; }
.crumb__chev { color: var(--ink-300); flex: none; }
.crumb__ellipsis { padding: 0 4px; color: var(--ink-400); font-weight: 600; letter-spacing: .04em; }
.crumb__link {
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-500);
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth);
}
.crumb__link:hover { background: var(--ink-50); color: var(--ink-800); }
.crumb__link.is-current { color: var(--ink-900); font-weight: 600; cursor: default; }
.crumb__link.is-current:hover { background: transparent; }
.crumb__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink-900); }

/* EXPANDED — vertical menu of the full path */
.crumb__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 268px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(16,42,72,.12), 0 30px 60px rgba(16,42,72,.20);
}
.crumb-menu-active { transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft); }
.crumb__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  padding-left: calc(12px + var(--depth, 0) * 16px);   /* indent by depth */
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  color: var(--ink-600);
  transition: background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth);
}
.crumb__row:hover { background: var(--ink-50); color: var(--ink-900); }
.crumb__row:focus-visible { outline: none; background: var(--ink-50); box-shadow: inset 0 0 0 2px var(--ink-900); }
.crumb__rowico { display: grid; place-items: center; color: var(--ink-400); flex: none; }
.crumb__rowlabel { flex: 1 1 auto; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.crumb__rowcount {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
/* current level = emphasized (filled black pill) */
.crumb__row.is-current {
  background: var(--ink-950);
  color: #FFFFFF;
  cursor: default;
}
.crumb__row.is-current .crumb__rowico,
.crumb__row.is-current .crumb__rowcount { color: rgba(255,255,255,.7); }
.crumb__row.is-current:hover { background: var(--ink-950); }

/* ============================================================
   NODE CARD — treatment 4: clean drillable content card, no
   screenshot. Same shell (48px corners, hairline, hover shadow),
   a client-brand accent field + glyph, mono count, standard footer.
   ============================================================ */
/* Built on the proven metric-card pattern: in-flow flex content (no absolutely
   positioned descendants), which avoids a Chromium compositing edge case that
   drops absolute children inside a will-change + aspect-ratio filling layer. */
.card--node { --accent: #2D6FB7; aspect-ratio: 4 / 5; }
.card--node .card__inner {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
}
/* accent-tinted field (client brand) — analog of the metric hero */
.node-card__field {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 11%, #FFFFFF) 0%,
    color-mix(in srgb, var(--accent) 4%, #FFFFFF) 44%,
    #FFFFFF 74%);
}
/* count/flags sit top-right; the old client-brand rule was removed (it read as
   distracting, change-brief-9 rev) so the row just right-aligns its content */
.node-card__top { display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; }
.node-card__rule { display: none; }
.node-card__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-500);
  flex: none;
}
/* glyph sits at the bottom of the field; rises + zooms on hover */
.node-card__glyph {
  margin-top: auto;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  color: var(--ink-800);
  box-shadow: var(--shadow-pill);
  transform-origin: left bottom;
  transition: transform var(--dur-rise) var(--ease-out-soft), box-shadow var(--dur-rise) var(--ease-out-soft);
}
@media (hover: hover) {
  .card--node:hover .node-card__glyph {
    transform: translateY(-8px) scale(1.06);
    box-shadow: var(--shadow-card-hover);
  }
}
.node-card__tag {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-400);
}
.node-card__tag svg { color: var(--ink-400); }

.card__footer--node {
  position: relative;
  z-index: 3;
  padding: 22px 26px 28px;
  border-top: 1px solid var(--ink-100);
  background: var(--surface);
}
.card__footer--node .card__subtitle { -webkit-line-clamp: 2; }
.card__footer--node .card__link { margin-top: 16px; }
/* leaf (terminal display) cards: calmer, no pointer affordance */
.card--node.is-leaf { cursor: default; }
.card--node.is-leaf .node-card__glyph { box-shadow: var(--shadow-badge); }

/* ============================================================
   TOGGLE SWITCH — reusable monochrome primitive (change-brief-11).
   OFF = ink-200 track / white knob · ON = ink-950 track / white knob.
   role="switch"; keyboard-operable (native <button>: Enter/Space fire
   click); visible focus ring; instant under prefers-reduced-motion
   (covered by the global reduce block). Clicking it must not navigate —
   the template stops propagation, like the This Week play button.
   ============================================================ */
.switch {
  --sw-w: 46px; --sw-h: 26px; --sw-pad: 3px;
  position: relative; flex: none;
  width: var(--sw-w); height: var(--sw-h);
  margin: 0; padding: 0; border: 0;
  border-radius: 9999px;
  background: var(--ink-200);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background var(--dur-base) var(--ease-out-soft);
}
.switch.is-on { background: var(--ink-950); }
.switch:hover { background: var(--ink-300); }
.switch.is-on:hover { background: #060B14; }
.switch__knob {
  position: absolute; top: var(--sw-pad); left: var(--sw-pad);
  width: calc(var(--sw-h) - 2 * var(--sw-pad));
  height: calc(var(--sw-h) - 2 * var(--sw-pad));
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16,42,72,.28), 0 1px 3px rgba(16,42,72,.16);
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.switch.is-on .switch__knob { transform: translateX(calc(var(--sw-w) - var(--sw-h))); }
.switch:active .switch__knob { transform: translateX(0) scale(.92); }
.switch.is-on:active .switch__knob { transform: translateX(calc(var(--sw-w) - var(--sw-h))) scale(.92); }
.switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink-950);
}

/* ============================================================
   LOOPS VIEW — the settings / control room (change-brief-11):
   header + running count · calm explainer card · 5-tile stat row ·
   "Your Loops" grid of loop cards with a prominent centered toggle.
   Monochrome throughout; only the awaiting-count uses --alert.
   ============================================================ */
.loops-view { display: block; }

/* 1) Header + live running count */
.loops-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.loops-head__title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.025em; color: var(--ink-900); }
.loops-head__count { margin: 0; font-size: 14px; color: var(--ink-500); }
.loops-head__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-900); }

/* 2) "What is a loop?" explainer — reuses the .synth ink-50 card shell */
.loops-explainer { margin-bottom: 28px; }
.loops-explainer__lead {
  margin: 0; max-width: 78ch;
  font-size: 17px; line-height: 1.55; font-weight: 450; color: var(--ink-900);
}
.loops-explainer__levels {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ink-200);
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
@media (max-width: 640px) { .loops-explainer__levels { grid-template-columns: 1fr; gap: 16px; } }
.loops-level { display: flex; align-items: baseline; gap: 12px; }
.loops-level__tag {
  flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 650;
  letter-spacing: .06em; color: var(--ink-700);
}
.loops-level__text { font-size: 14px; line-height: 1.5; color: var(--ink-600); }

/* 3) Stat row — 5 metric tiles; first is the primary awaiting-approval tile */
.loop-stats {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 18px;
  margin-bottom: 44px;
}
@media (max-width: 1100px) {
  .loop-stats { grid-template-columns: repeat(2, 1fr); }
  .loop-stat--primary { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .loop-stats { grid-template-columns: 1fr; } }
.loop-stat {
  padding: 22px 24px; border: 1px solid var(--ink-200); border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow-card-rest);
}
.loop-stat--primary { background: var(--ink-50); }
.loop-stat__inner { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.loop-stat__num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900);
}
.loop-stat__label {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-500);
}
.loop-stat__label--top { margin-bottom: 2px; }
.loop-stat__row { display: flex; align-items: center; gap: 16px; }
.loop-stat__review {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 550; color: var(--ink-700);
  transition: color var(--dur-base) var(--ease-smooth);
}
.loop-stat__review:hover { color: var(--ink-950); }
.loop-stat__review .arrow { transition: transform var(--dur-base) var(--ease-out-soft); }
.loop-stat__review:hover .arrow { transform: translateX(3px); }
.loop-stat__review:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink-950); border-radius: 6px; }
.loop-stat__sub { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-500); }

/* 4) "Your Loops" grid label */
.loops-grid-label {
  margin: 0 0 20px; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-700);
}

/* ---- Loop card — same .card--node shell (48px, 4/5, hairline, hover shadow),
   but the field CENTERS the prominent toggle instead of a glyph. Order:
   Title → toggle → description → meta footer. OFF loops stay fully readable
   (never grayed/disabled) — the visible switch carries the state. ---- */
.card--loop .loop-card__field {
  padding: 30px 30px 22px;
  background: linear-gradient(180deg, var(--ink-50) 0%, #FFFFFF 60%);
}
.loop-card__head { display: flex; align-items: flex-start; gap: 11px; }
.loop-card__glyph {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--ink-200);
  color: var(--ink-800); box-shadow: var(--shadow-badge);
}
.loop-card__title {
  flex: 1 1 auto; margin: 0;
  font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: var(--ink-900);
}
.loop-card__badge {
  flex: none; margin-top: 2px;
  padding: 3px 8px; border-radius: 7px;
  background: var(--ink-950); color: #FFFFFF;
  font-family: var(--font-ui); font-size: 10px; font-weight: 650; letter-spacing: .06em;
}
/* the focal control — dead-centered in the field with generous whitespace */
.loop-card__togglewrap {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 26px 0 10px;
}
.loop-card__togglewrap .switch { --sw-w: 52px; --sw-h: 30px; --sw-pad: 3px; }
.loop-card__togglecap {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500);
  transition: color var(--dur-base) var(--ease-smooth);
}
.card--loop.is-on .loop-card__togglecap { color: var(--ink-800); }

/* footer: description + meta (status · cadence · awaiting · level · affordance) */
.loop-card__footer { display: flex; flex-direction: column; padding: 22px 30px 30px; }
.loop-card__desc { margin: 0; -webkit-line-clamp: 3; max-width: none; }
.loop-card__statusline {
  margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12.5px; color: var(--ink-600);
}
.loop-card__status { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--ink-800); }
.loop-card__statusdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); flex: none; }
.loop-card__status[data-status="running"] .loop-card__statusdot { background: var(--ink-900); }
.loop-card__status[data-status="paused"]  .loop-card__statusdot { background: var(--ink-400); }
.loop-card__sep { color: var(--ink-300); }
.loop-card__cadence { color: var(--ink-600); }
.loop-card__await { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-600); }
.loop-card__awaitnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--alert); }
.loop-card__foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.loop-card__level { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.loop-card__leveltag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-700);
}
.loop-card__connect {
  font-size: 12px; color: var(--ink-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loop-card__aff {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--ink-700);
}
.loop-card__aff .arrow { transition: transform var(--dur-base) var(--ease-out-soft); }
@media (hover: hover) {
  .card--loop:hover .loop-card__aff .arrow { transform: translateX(3px); }
}

/* ============================================================
   CONTENT LIBRARY VIEW — the review surface (change-brief-12, Phase 2
   SHELL). Header + controls + email-seq pill filters + edge-to-edge
   card grid with PER-TYPE rendering (§5.2). Monochrome LEVR chrome;
   only the attention (awaiting) flag carries --alert. Display-only —
   no hover actions / no modal / no click-through this phase.
   ============================================================ */
.cl-view { display: block; }

/* 1) Header — title + subtitle + running count (mirrors .loops-head) */
.cl-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.cl-head__title { margin: 0 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -.025em; color: var(--ink-900); }
.cl-head__sub { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--ink-500); }
.cl-head__count { margin: 6px 0 0; flex: none; font-size: 14px; color: var(--ink-500); white-space: nowrap; }
.cl-head__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-900); }

/* 2) Controls bar — search · channel · sort (NO grid/list toggle) */
.cl-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.cl-search {
  flex: 1 1 320px; min-width: 220px;
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px;
  border: 1px solid var(--ink-200); border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow-search);
  transition: border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.cl-search:hover { border-color: var(--ink-300); }
.cl-search:focus-within { border-color: var(--ink-700); box-shadow: var(--shadow-search), 0 0 0 3px var(--focus-ring); }
.cl-search__ico { flex: none; color: var(--ink-400); }
.cl-search__input {
  flex: 1 1 auto; min-width: 0; margin: 0; border: 0; background: transparent;
  font-family: var(--font-ui); font-size: 15px; color: var(--ink-800); caret-color: var(--blue-500);
}
.cl-search__input::placeholder { color: var(--ink-400); }
.cl-search__input:focus { outline: none; }
.cl-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.cl-selects { display: flex; align-items: center; gap: 12px; flex: none; }
.cl-select { position: relative; display: inline-flex; align-items: center; }
.cl-select__cap {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cl-select__field {
  -webkit-appearance: none; appearance: none;
  height: 48px; padding: 0 38px 0 16px; margin: 0;
  border: 1px solid var(--ink-200); border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow-search); cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; font-weight: 550; color: var(--ink-800);
  transition: border-color var(--dur-base) var(--ease-smooth);
}
.cl-select__field:hover { border-color: var(--ink-300); }
.cl-select__field:focus-visible { outline: none; border-color: var(--ink-700); box-shadow: var(--shadow-search), 0 0 0 3px var(--focus-ring); }
.cl-select__chev { position: absolute; right: 14px; color: var(--ink-400); pointer-events: none; }

/* 3) Pill row — email-seq pills (left) + "N of M pieces" (right) */
.cl-pillrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 32px;
}
.cl-pilltags { margin-bottom: 0; }
.cl-count { margin: 0; flex: none; font-size: 13px; color: var(--ink-500); white-space: nowrap; }
.cl-count__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-800); }

/* 4) Grid — same centered multi-column drill grid. Each item = card + source. */
.cl-grid { align-items: start; }
.cl-item { display: flex; flex-direction: column; }

/* the content card: same 48px shell, 4/5 shape, hairline + hover shadow */
.cl-card { position: relative; aspect-ratio: 4 / 5; cursor: pointer; }
.cl-card__inner { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---- Hover actions (change-brief-13 §1) — Approve · Refresh · Preview.
   Real buttons, revealed on hover OR focus-within (keyboard-reachable),
   monochrome: dark-glass over social/sms, light chips over blog/email. ---- */
.cl-actions {
  position: absolute; top: 52px; right: 16px; z-index: 7;
  display: flex; gap: 8px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
@media (hover: hover) { .cl-card:hover .cl-actions { opacity: 1; transform: none; pointer-events: auto; } }
.cl-card:focus-within .cl-actions { opacity: 1; transform: none; pointer-events: auto; }
.cl-act {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 11px; border: 1px solid var(--ink-200); background: var(--surface); color: var(--ink-700);
  box-shadow: var(--shadow-badge);
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth),
              color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.cl-act:hover { background: var(--ink-950); border-color: var(--ink-950); color: #FFFFFF; }
.cl-act:active { transform: scale(.94); }
.cl-act:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-900); }
/* dark bodies (social photo / sms field) → dark-glass chips, white icons */
.cl-card--social .cl-act, .cl-card--sms .cl-act {
  background: rgba(14,23,38,.62); border-color: rgba(255,255,255,.16); color: #FFFFFF; box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cl-card--social .cl-act:hover, .cl-card--sms .cl-act:hover { background: rgba(14,23,38,.9); border-color: rgba(255,255,255,.4); }
.cl-card--social .cl-act:focus-visible, .cl-card--sms .cl-act:focus-visible { box-shadow: 0 0 0 2px rgba(14,23,38,.55), 0 0 0 4px #FFFFFF; }

/* Card-action feedback (mock) — Approve confirm badge + Refresh regenerating pulse */
.cl-card.is-approved-flash::after {
  content: "✓"; position: absolute; z-index: 9; top: 50%; left: 50%;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-950); color: #FFFFFF; font-size: 25px; font-weight: 600;
  transform: translate(-50%, -50%); pointer-events: none;
  animation: cl-approve-pop 900ms var(--ease-out-soft);
}
@keyframes cl-approve-pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  22% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}
.cl-card.is-refreshing .cl-card__inner { animation: cl-regen 1100ms var(--ease-smooth); }
@keyframes cl-regen { 0% { opacity: 1; } 42% { opacity: .5; } 100% { opacity: 1; } }

/* shared chrome: channel tag (top-left) + status flag (top-right) */
.cl-card__chrome {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 22px; pointer-events: none;
}
.cl-tag, .cl-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}
/* light bodies (blog / email) → light chips with ink text */
.cl-tag { background: var(--ink-100); color: var(--ink-700); border: 1px solid var(--ink-200); }
.cl-flag { background: var(--surface); color: var(--ink-600); border: 1px solid var(--ink-200); box-shadow: var(--shadow-badge); }
/* dark bodies (social photo / sms field) → dark-glass chips with white text */
.cl-card--social .cl-tag, .cl-card--sms .cl-tag {
  background: rgba(14,23,38,.62); color: #FFFFFF; border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cl-card--social .cl-flag, .cl-card--sms .cl-flag {
  background: rgba(14,23,38,.62); color: #FFFFFF; border-color: rgba(255,255,255,.14); box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* the ONE sanctioned accent — the attention (awaiting) flag gets an --alert dot */
.cl-flag--alert::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--alert); flex: none;
}
.cl-card--social .cl-flag--alert, .cl-card--sms .cl-flag--alert { color: #FFFFFF; }

/* ---- BODY: social — edge-to-edge full-bleed photo + scrim + play (reuse literal) ---- */
.cl-social { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cl-social__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: saturate(.98) contrast(.98);
  transform: scale(1.04); transform-origin: center;
  transition: transform var(--dur-rise) var(--ease-out-soft);
}
@media (hover: hover) { .cl-card--social:hover .cl-social__img { transform: translateY(-8px) scale(1.1); } }
.cl-social__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,23,38,.34) 0%, rgba(14,23,38,0) 22%),
    linear-gradient(0deg, rgba(14,23,38,.86) 0%, rgba(14,23,38,.55) 24%, rgba(14,23,38,.12) 46%, rgba(14,23,38,0) 62%);
}
.cl-play {
  position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(14,23,38,.42); color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--dur-base) var(--ease-out-soft), background var(--dur-base) var(--ease-smooth);
}
.cl-play svg { margin-left: 3px; }
@media (hover: hover) { .cl-card--social:hover .cl-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(14,23,38,.56); } }

/* ---- BODY: sms — dark field + incoming message bubble + Delivered ---- */
.cl-card--sms .cl-card__inner { background: var(--ink-950); }
.cl-sms {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 60px 26px 0;
}
.cl-sms__sender {
  margin: 0 0 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.cl-sms__bubble {
  max-width: 84%; padding: 13px 16px;
  border-radius: 18px 18px 18px 6px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.92);
  font-size: 14px; line-height: 1.5;
  border: 1px solid rgba(255,255,255,.08);
}
.cl-sms__state {
  align-self: flex-start; padding: 3px 9px; border-radius: 9999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.6);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em;
}

/* ---- BODY: blog — HTML document/page panel + hover rollover (reuse floating) ---- */
.cl-doc {
  flex: 1 1 auto; position: relative; z-index: 0;
  padding: 58px 26px 24px;
  background: linear-gradient(165deg, var(--ink-100) 0%, var(--ink-50) 46%, #FFFFFF 88%);
  overflow: hidden;
}
.cl-doc__frame {
  height: 100%; display: flex; flex-direction: column;
  border-radius: 16px; background: var(--surface);
  border: 1px solid var(--ink-200); box-shadow: var(--shadow-card-rest); overflow: hidden;
  transform: translateY(0) scale(1); transform-origin: center top;
  transition: transform var(--dur-rise) var(--ease-out-soft), box-shadow var(--dur-rise) var(--ease-out-soft);
}
@media (hover: hover) {
  .cl-card--blog:hover .cl-doc__frame { transform: translateY(-8px) scale(1.03); box-shadow: var(--shadow-card-hover); }
}
.cl-doc__bar {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; border-bottom: 1px solid var(--ink-100); background: var(--ink-50);
}
.cl-doc__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-200); }
.cl-doc__page { flex: 1 1 auto; padding: 18px 18px 16px; display: flex; flex-direction: column; }
.cl-doc__kicker {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 650;
  letter-spacing: .1em; color: var(--ink-400);
}
.cl-doc__headline {
  margin: 0 0 9px; font-size: 18px; line-height: 1.22; font-weight: 600; letter-spacing: -.015em; color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-doc__snippet {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-doc__lines { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.cl-doc__lines span { height: 5px; border-radius: 3px; background: var(--ink-100); }
.cl-doc__lines span:nth-child(1) { width: 100%; }
.cl-doc__lines span:nth-child(2) { width: 92%; }
.cl-doc__lines span:nth-child(3) { width: 68%; }

/* ---- BODY: email — HTML in-card email preview ---- */
.cl-email {
  flex: 1 1 auto; position: relative; z-index: 0;
  padding: 58px 26px 22px;
  background: linear-gradient(180deg, var(--ink-50) 0%, #FFFFFF 40%);
  display: flex; flex-direction: column;
}
.cl-email__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.cl-email__avatar {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--ink-200);
  color: var(--ink-700); box-shadow: var(--shadow-badge);
}
.cl-email__who { min-width: 0; }
.cl-email__sender { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.cl-email__to { margin: 1px 0 0; font-size: 12px; color: var(--ink-400); }
.cl-email__subject {
  margin: 0 0 8px; font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-email__snippet {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-email__lines { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.cl-email__lines span { height: 5px; border-radius: 3px; background: var(--ink-100); }
.cl-email__lines span:nth-child(1) { width: 90%; }
.cl-email__lines span:nth-child(2) { width: 60%; }

/* ---- Footer: title + meta row (impact dots · cost · freshness) ---- */
.cl-card__footer { position: relative; z-index: 3; padding: 20px 26px 24px; }
/* light-body cards → in-flow footer on white with a hairline */
.cl-card--blog .cl-card__footer, .cl-card--email .cl-card__footer {
  border-top: 1px solid var(--ink-100); background: var(--surface);
}
.cl-card--blog .cl-card__title, .cl-card--email .cl-card__title { color: var(--ink-900); }
/* dark-body cards → footer overlays the scrim, white text */
.cl-card__footer--over { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px 22px; }
.cl-card__footer--over .cl-card__title { color: #FFFFFF; }
.cl-card__title {
  margin: 0; font-size: 16px; line-height: 1.24; font-weight: 600; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.cl-dots { display: inline-flex; align-items: center; gap: 3px; }
.cl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); }
.cl-dot.is-on { background: var(--ink-700); }
.cl-card__footer--over .cl-dot { background: rgba(255,255,255,.3); }
.cl-card__footer--over .cl-dot.is-on { background: #FFFFFF; }
.cl-meta__cost, .cl-meta__fresh {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-500);
}
.cl-card__footer--over .cl-meta__cost, .cl-card__footer--over .cl-meta__fresh { color: rgba(255,255,255,.72); }
.cl-meta__fresh { color: var(--ink-700); }
.cl-card__footer--over .cl-meta__fresh { color: #FFFFFF; }

/* source line — below the card, in the grid gap (date · originating loop) */
.cl-source {
  margin: 12px 2px 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-400);
}

/* empty state — a filter/search returned nothing */
.cl-empty { padding: 48px 24px; text-align: center; }
.cl-empty__title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--ink-700); }
.cl-empty__sub { margin: 0; font-size: 14px; color: var(--ink-500); }

/* ============================================================
   LOCATIONS — sub-knowledge bases (change-brief-15).
   Reuses .card--node + .card-grid--drill + .cl-search wholesale;
   only the activation-status cue and the lighter detail need CSS.
   ============================================================ */
.loc-controls { margin-bottom: 26px; }
/* channel-activation cue on a location card (replaces the Explore link) */
.loc-status { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.loc-status__label {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--ink-500);
}
.card--loc { cursor: pointer; }

/* Location detail = the simplified activation dashboard. Deliberately calmer &
   lighter than the full home: capped width, centered, no page-title heading. */
.loc-detail { display: flex; flex-direction: column; }
.loc-detail__meta {
  margin: 0 0 24px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--ink-500);
}
/* grid reflows exactly like every other drilled section (was capped at 1180px,
   which forced a stuck 2-up that didn't respond to resize). */
/* terminal activation cards read quietly (no pointer, softer glyph) */
.card--loc-asset { cursor: default; }

/* Responsive — pill row + controls collapse; count moves under pills */
@media (max-width: 720px) {
  .cl-controls { gap: 10px; }
  .cl-search { flex-basis: 100%; }
  .cl-selects { flex: 1 1 auto; }
  .cl-select { flex: 1 1 0; }
  .cl-select__field { width: 100%; }
  .cl-pillrow { align-items: flex-start; }
}

/* ============================================================
   CONTENT LIBRARY — PREVIEW MODAL (change-brief-13, Phase 3 / §5.4)
   Centered card-like modal (NOT a drawer). Reuses .modal-backdrop +
   x-trap + Esc family. Monochrome LEVR chrome; the client mockup
   ("how the post will look") carries its own presentation. Channel-
   accurate mockups for all 4 render types; metrics + canon gate.
   ============================================================ */
.cl-preview-backdrop {
  align-items: center;
  padding: 24px 20px;
  background: rgba(16,42,72,.42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  z-index: 110;
}
.cl-preview {
  display: flex;
  width: 100%; max-width: 640px; max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);                 /* 48px family */
  box-shadow: 0 8px 24px rgba(16,42,72,.12), 0 30px 60px rgba(16,42,72,.24);
  overflow: hidden;
}
.cl-preview__wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }

/* Header — CHANNEL · TYPE · status · prev/next · close */
.cl-preview__head {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 28px 18px; border-bottom: 1px solid var(--ink-100);
}
.cl-preview__headmain { min-width: 0; }
.cl-preview__eyebrow {
  margin: 0 0 9px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500);
}
.cl-preview__sep { color: var(--ink-300); }
.cl-preview__status {
  margin-left: 4px; padding: 3px 9px; border-radius: 9999px;
  background: var(--ink-100); color: var(--ink-600); letter-spacing: .06em;
}
.cl-preview__status.is-alert::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--alert); vertical-align: middle;
}
.cl-preview__title {
  margin: 0; font-size: 21px; line-height: 1.22; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900);
}
.cl-preview__nav { flex: none; display: flex; align-items: center; gap: 8px; }
.cl-nav-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--ink-200); background: var(--surface); color: var(--ink-600);
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth),
              color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.cl-nav-btn:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); }
.cl-nav-btn:active { transform: scale(.94); }
.cl-nav-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-900); }

/* Body — internal scroll */
.cl-preview__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 28px 26px;
  /* soft bottom fade — a quiet cue that content continues below (Gate 3 fix) */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}
.cl-preview.is-refreshing .cl-preview__body { animation: cl-regen 1100ms var(--ease-smooth); }
.cl-preview__caplabel {
  margin: 0 0 14px; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-400);
}

/* ---- MOCKUP: social — Instagram post (the centerpiece) ---- */
.ig-post {
  max-width: 400px; margin: 0 auto;
  border: 1px solid var(--ink-200); border-radius: 18px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-card-rest);
}
.ig-post__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ig-post__avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-950); color: #FFFFFF;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .02em;
}
.ig-post__handle { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.ig-post__badge {
  padding: 2px 7px; border-radius: 6px; background: var(--ink-100); color: var(--ink-600);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
}
.ig-post__more { margin-left: auto; color: var(--ink-400); font-size: 18px; line-height: 1; }
/* cap the reel/post height in the modal so the metrics row + canon gate stay
   above the fold on a common laptop (Gate 3 fix) */
.ig-post__media { position: relative; height: min(30vh, 300px); background: var(--ink-100); overflow: hidden; }
.ig-post__img { width: 100%; height: 100%; object-fit: cover; }
.ig-post__play {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(14,23,38,.42); color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ig-post__play svg { margin-left: 3px; }
.ig-post__actions { display: flex; align-items: center; gap: 16px; padding: 12px 14px 2px; color: var(--ink-800); }
.ig-post__actions svg { width: 24px; height: 24px; }
.ig-post__bookmark { margin-left: auto; }
.ig-post__caption { margin: 8px 14px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-800); }
.ig-post__caphandle { font-weight: 600; color: var(--ink-900); margin-right: 6px; }
.ig-post__tags { margin: 6px 14px 14px; font-size: 13px; line-height: 1.5; color: var(--ink-500); }

/* ---- MOCKUP: sms — message thread ---- */
.sms-thread {
  max-width: 400px; margin: 0 auto; padding: 22px 20px 18px;
  border-radius: 18px; background: var(--ink-950);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.sms-thread__sender {
  margin: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.sms-thread__bubble {
  max-width: 88%; padding: 12px 15px; border-radius: 18px 18px 18px 6px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.94);
  font-size: 14px; line-height: 1.5; border: 1px solid rgba(255,255,255,.08);
}
.sms-thread__state {
  align-self: flex-start; padding: 3px 9px; border-radius: 9999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.6);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em;
}

/* ---- MOCKUP: email — inbox message ---- */
.mail-mock {
  max-width: 480px; margin: 0 auto; padding: 20px 22px 22px;
  border: 1px solid var(--ink-200); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card-rest);
}
.mail-mock__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ink-100); margin-bottom: 16px; }
.mail-mock__avatar { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--ink-100); color: var(--ink-700); }
.mail-mock__who { min-width: 0; }
.mail-mock__sender { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.mail-mock__to { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-400); }
.mail-mock__subject { margin: 0 0 10px; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900); }
.mail-mock__body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-600); }

/* ---- MOCKUP: blog — document ---- */
.blog-mock {
  max-width: 480px; margin: 0 auto;
  border: 1px solid var(--ink-200); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card-rest);
}
.blog-mock__bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--ink-50); border-bottom: 1px solid var(--ink-100); }
.blog-mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); }
.blog-mock__page { padding: 24px 26px 26px; }
.blog-mock__kicker { margin: 0 0 12px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }
.blog-mock__headline { margin: 0 0 12px; font-size: 24px; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900); }
.blog-mock__deck { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--ink-500); }
.blog-mock__lines { display: flex; flex-direction: column; gap: 9px; }
.blog-mock__lines span { height: 7px; border-radius: 4px; background: var(--ink-100); }
.blog-mock__lines span:nth-child(1) { width: 100%; }
.blog-mock__lines span:nth-child(2) { width: 97%; }
.blog-mock__lines span:nth-child(3) { width: 99%; }
.blog-mock__lines span:nth-child(4) { width: 92%; }
.blog-mock__lines span:nth-child(5) { width: 58%; }

/* ---- signals line + metrics row ---- */
.cl-preview__signals {
  margin: 18px auto 0; max-width: 480px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-700);
}
.cl-metrics {
  margin: 12px auto 0; max-width: 480px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 16px 18px; border: 1px solid var(--ink-200); border-radius: 16px; background: var(--ink-50);
}
.cl-metric { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.cl-metric__cap { margin: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.cl-metric__val { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.cl-dots--lg { gap: 4px; }
.cl-dots--lg .cl-dot { width: 8px; height: 8px; }
.cl-metric .cl-dot { background: var(--ink-300); }
.cl-metric .cl-dot.is-on { background: var(--ink-900); }

/* ---- The gate — aligned to canon, evidence enough? ---- */
.cl-gate { margin: 20px auto 0; max-width: 480px; }
.cl-gate__head {
  margin: 0 0 14px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500);
}
.cl-gate__row { display: flex; gap: 11px; align-items: flex-start; }
.cl-gate__row + .cl-gate__row { margin-top: 12px; }
.cl-gate__ck { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-950); color: #FFFFFF; margin-top: 1px; }
.cl-gate__txt { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-600); }
.cl-gate__txt b { color: var(--ink-900); font-weight: 600; }

/* ---- Footer — Approve · Refresh · Reject · Edit (primary) + shortcuts ---- */
.cl-preview__foot { flex: none; padding: 16px 28px 18px; border-top: 1px solid var(--ink-100); }
.cl-preview__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cl-pbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--ink-200); border-radius: 12px; background: var(--surface); color: var(--ink-700);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth),
              color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.cl-pbtn svg { color: var(--ink-500); }
.cl-pbtn:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); }
.cl-pbtn:hover svg { color: var(--ink-700); }
.cl-pbtn:active { transform: scale(.97); }
.cl-pbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-900); }
.cl-pbtn--primary { margin-left: auto; background: var(--ink-950); border-color: var(--ink-950); color: #FFFFFF; }
.cl-pbtn--primary svg { color: #FFFFFF; }
.cl-pbtn--primary:hover { background: var(--ink-800); border-color: var(--ink-800); color: #FFFFFF; }
.cl-pbtn--primary:hover svg { color: #FFFFFF; }
.cl-preview__hints { margin: 14px 0 0; min-height: 18px; font-size: 12px; color: var(--ink-500); }
.cl-preview__keys .kbd, .cl-preview__hints .kbd { margin: 0 1px; font-size: 10.5px; }
/* Preview modal — small-screen: near-full-width, tighter gutters */
@media (max-width: 620px) {
  .cl-preview-backdrop { padding: 14px 10px; }
  .cl-preview { max-height: 94vh; border-radius: 30px; }
  .cl-preview__head { padding: 20px 18px 14px; }
  .cl-preview__body { padding: 18px 16px 20px; }
  .cl-preview__foot { padding: 14px 18px 16px; }
  .cl-preview__title { font-size: 19px; }
  .cl-pbtn { flex: 1 1 auto; justify-content: center; }
  .cl-pbtn--primary { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================
   CONTENT LIBRARY — EDIT MODAL (change-brief-14, Phase 4)
   Near-full-screen, two-pane focused workspace one level deeper
   than the preview. Monochrome chrome; styled inputs (no raw
   browser chrome); reduced-motion clean.
   ============================================================ */
.cl-edit-backdrop {
  align-items: center;
  padding: 24px;
  background: rgba(16,42,72,.48);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  z-index: 120;                        /* above the preview modal (110) */
}
.cl-edit {
  display: flex;
  width: min(1200px, 94vw);
  height: min(860px, 92vh);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 40px;                 /* 48px family, slightly tighter on the big surface */
  box-shadow: 0 10px 30px rgba(16,42,72,.16), 0 40px 80px rgba(16,42,72,.28);
  overflow: hidden;
}
.cl-edit__wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }

/* Header */
.cl-edit__head {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 28px 18px; border-bottom: 1px solid var(--ink-100);
}
.cl-edit__headmain { min-width: 0; }
.cl-edit__eyebrow {
  margin: 0 0 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500);
}
.cl-edit__sep { color: var(--ink-300); }
.cl-edit__title {
  margin: 0; font-size: 21px; line-height: 1.22; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis;
}
.cl-edit__headact { flex: none; display: flex; align-items: center; gap: 10px; }
.cl-ebtn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--ink-200); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--ink-700);
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth),
              color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.cl-ebtn svg { color: var(--ink-500); }
.cl-ebtn:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); }
.cl-ebtn:active { transform: scale(.97); }
.cl-ebtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-900); }
.cl-ebtn--primary { background: var(--ink-950); border-color: var(--ink-950); color: #FFFFFF; }
.cl-ebtn--primary svg { color: #FFFFFF; }
.cl-ebtn--primary:hover { background: var(--ink-800); border-color: var(--ink-800); color: #FFFFFF; }
.cl-edit__x { flex: none; }

/* Two panes */
.cl-edit__panes {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  overflow: hidden;
}

/* LEFT — live preview stage */
.cl-edit__preview {
  min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 30px 24px; background: var(--ink-50); border-right: 1px solid var(--ink-100);
}
.cl-edit__plabel {
  margin: 0; flex: none; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-400);
}
.cl-edit__stage { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; padding: 6px 0; }
.cl-edit__stage > * { width: 100%; }
.cl-edit__livenote {
  margin: 0; flex: none; text-align: center; font-size: 12px; color: var(--ink-400);
}

/* RIGHT — editor toolset */
.cl-edit__tools {
  min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 22px;
  padding: 24px 28px 26px; background: var(--surface);
}
.cl-edit__toolhead {
  margin: 0; flex: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-400);
}
.cl-toolset { display: flex; flex-direction: column; gap: 20px; }

/* Field group */
.cl-field { display: flex; flex-direction: column; gap: 9px; }
.cl-field__lab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500);
}
.cl-field__hint { font-weight: 500; letter-spacing: .04em; color: var(--ink-400); text-transform: none; }
.cl-field__note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-500); }
.cl-field__note code {
  font-family: var(--font-mono); font-size: .9em; background: var(--ink-100);
  padding: 1px 5px; border-radius: 6px; color: var(--ink-700);
}
.cl-field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cl-field--split > div { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

/* Inputs — styled to the system, not raw browser chrome */
.cl-ctl { position: relative; }
.cl-input, .cl-textarea {
  width: 100%; display: block; font-family: var(--font-ui);
  font-size: 14px; line-height: 1.55; color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--ink-200); border-radius: 14px;
  padding: 11px 13px; caret-color: var(--ink-900);
  transition: border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.cl-textarea { resize: vertical; min-height: 84px; max-height: 320px; }
.cl-input::placeholder, .cl-textarea::placeholder { color: var(--ink-400); }
.cl-input:hover, .cl-textarea:hover { border-color: var(--ink-300); }
.cl-input:focus, .cl-textarea:focus {
  outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 3px var(--focus-ink);
}

/* Refine shimmer overlay — monochrome sweep over the control while busy */
.cl-ctl::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  opacity: 0; background: linear-gradient(100deg, transparent 34%, rgba(21,32,51,.10) 50%, transparent 66%);
  background-size: 220% 100%; background-position: 130% 0;
}
.cl-ctl.is-refining::after { opacity: 1; animation: cl-refine-sweep 820ms var(--ease-smooth); }
.cl-ctl.is-refining .cl-input, .cl-ctl.is-refining .cl-textarea { border-color: var(--ink-300); }
@keyframes cl-refine-sweep {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* ✨ Refine affordance */
.cl-refine {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: 9999px; border: 1px solid var(--ink-200); background: var(--surface);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink-600);
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth);
}
.cl-refine__spark { color: var(--ink-500); flex: none; }
.cl-refine:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); }
.cl-refine:hover .cl-refine__spark { color: var(--ink-700); }
.cl-refine:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-900); }
.cl-refine.is-busy { opacity: .65; cursor: default; }
.cl-refine.is-busy .cl-refine__spark { animation: cl-spark-pulse 820ms var(--ease-smooth) infinite; }
@keyframes cl-spark-pulse { 0%,100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }

/* Swap-image thumbnails */
.cl-swap { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-swap__thumb {
  position: relative; width: 68px; height: 68px; padding: 0; flex: none;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--ink-200); background: var(--ink-100);
  transition: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth);
}
.cl-swap__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cl-swap__thumb:hover { border-color: var(--ink-400); transform: translateY(-2px); }
.cl-swap__thumb:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-900); }
.cl-swap__thumb.is-sel { border-color: transparent; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-950); }
.cl-swap__ck {
  position: absolute; top: 5px; right: 5px; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ink-950); color: #FFFFFF; box-shadow: 0 1px 3px rgba(16,42,72,.35);
}

.cl-edit__keys { margin: auto 0 0; padding-top: 4px; flex: none; font-size: 12px; color: var(--ink-400); }
.cl-edit__keys .kbd { margin: 0 1px; font-size: 10.5px; }

/* Edit modal — stack panes on narrow widths (≤900) */
@media (max-width: 900px) {
  .cl-edit-backdrop { padding: 14px; }
  .cl-edit { width: 96vw; height: 94vh; border-radius: 30px; }
  .cl-edit__panes { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .cl-edit__preview {
    overflow: visible; border-right: none; border-bottom: 1px solid var(--ink-100);
  }
  .cl-edit__stage { min-height: 300px; }
  .cl-edit__tools { overflow: visible; }
}

/* Edit modal — phone (~390) */
@media (max-width: 560px) {
  .cl-edit { border-radius: 24px; }
  .cl-edit__head { padding: 18px 16px 14px; flex-wrap: wrap; }
  .cl-edit__title { font-size: 18px; }
  .cl-edit__headact { gap: 8px; }
  .cl-ebtn { height: 36px; padding: 0 14px; }
  .cl-edit__preview { padding: 20px 16px 18px; }
  .cl-edit__tools { padding: 20px 16px 22px; }
  .cl-field--split { grid-template-columns: 1fr; }
  .cl-swap__thumb { width: 58px; height: 58px; }
}

/* ============================================================
   EMAIL SEQUENCES — interactive: reusable pill tags + a stripped
   email view with NO traditional page chrome (brief §Interactive).
   ============================================================ */
.email-view { display: block; }

/* ---- Reusable PILL TAGS (B&W chrome) ---- */
.pilltags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pilltag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-search);
  transition: background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth),
              border-color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-press);
}
.pilltag__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-300);
  transition: background var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-out-soft);
}
.pilltag__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-400);
  padding: 2px 7px;
  border-radius: 9999px;
  background: var(--ink-100);
}
.pilltag:hover { border-color: var(--ink-300); background: var(--ink-50); }
.pilltag:active { transform: scale(.97); }
.pilltag:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-900); }
.pilltag.is-on {
  background: var(--ink-950);
  color: #FFFFFF;
  border-color: var(--ink-950);
}
.pilltag.is-on .pilltag__dot { background: #FFFFFF; transform: scale(1.15); }
.pilltag.is-on .pilltag__count { background: rgba(255,255,255,.16); color: #FFFFFF; }

/* ---- Stripped email view: list + light preview pane ---- */
.email-strip {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px) { .email-strip { grid-template-columns: 1fr; } }

.email-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.email-row {
  display: flex;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth);
}
.email-row:hover { background: var(--ink-50); }
.email-row.is-sel { background: var(--surface); border-color: var(--ink-200); box-shadow: var(--shadow-search); }
.email-row__day {
  flex: none;
  width: 52px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-400);
  padding-top: 2px;
}
.email-row.is-sel .email-row__day { color: var(--ink-700); }
.email-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.email-row__subj { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-900); }
.email-row__prev {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.email-row:focus-visible { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 2px var(--focus-ink); }

/* Light preview pane — minimal, no app chrome; client content may carry SGA blue */
.email-preview {
  padding: 28px 30px 30px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  box-shadow: var(--shadow-card-rest);
}
.email-preview__from { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-100); }
.email-preview__avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--blue-500);          /* client (SGA) brand — this is client content */
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: .02em;
  flex: none;
}
.email-preview__fromtext { flex: 1 1 auto; min-width: 0; }
.email-preview__sender { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.email-preview__meta { margin: 2px 0 0; font-size: 12px; color: var(--ink-500); }
.email-preview__seq {
  flex: none;
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-500);
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--ink-100);
}
.email-preview__subject {
  margin: 20px 0 14px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.email-preview__p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.62; color: var(--ink-700); max-width: 62ch; }
.email-preview__cta {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-600);              /* client-content link accent */
}

/* ============================================================
   REDUCED MOTION — kill all motion (spec §2.7)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
  .card:hover .card__media img,
  .card:hover .card__media video { transform: scale(1.04); }
  .card:hover .card__panel { transform: none; }
  .card:hover .metric-figure { transform: none; }
  .cl-card:hover, .cl-card:hover .cl-doc__frame, .cl-card:hover .cl-media img { transform: none; }
  .card-grid.reveal .card { opacity: 1; transform: none; }
  .card__video { display: none; }

  /* Walk-and-Talk: no idle audio-bar animation, no rail pulse, instant reveals.
     Bars settle to a calm static waveform (varied heights, no motion). */
  .wt-levels i { animation: none !important; }
  .wt-levels i:nth-child(1) { transform: scaleY(.45); }
  .wt-levels i:nth-child(2) { transform: scaleY(.8); }
  .wt-levels i:nth-child(3) { transform: scaleY(1); }
  .wt-levels i:nth-child(4) { transform: scaleY(.65); }
  .wt-levels i:nth-child(5) { transform: scaleY(.85); }
  .wt-levels i:nth-child(6) { transform: scaleY(.5); }
  .wt-levels i:nth-child(7) { transform: scaleY(.7); }
  .wt-rail__item.is-change.is-in-progress .wt-rail__line { animation: none !important; }

  /* circular Walk & Talk button: no scale, label appears instantly */
  .wt-entry:hover { transform: none; }
  .wt-entry-wrap:hover .wt-entry__label,
  .wt-entry:focus-visible ~ .wt-entry__label { transform: translateX(-50%) translateY(0); }

  /* Pinned dock: no fly-in transform — appear/disappear by opacity only */
  .pin-dock { transform: none !important; }
  .pin-dock.is-docked { transform: none !important; }

  /* Card-drilling nav: instant level swap, no fade, static node glyph */
  .stage { transition: none !important; }
  .stage.is-out { opacity: 1; }
  .card--node:hover .node-card__glyph { transform: none; }
  .crumb__menu { transition: none !important; }

  /* Edit modal: no thumbnail lift, no Refine shimmer/spark motion */
  .cl-swap__thumb:hover { transform: none; }
  .cl-ctl.is-refining::after { animation: none; opacity: 0; }
  .cl-refine.is-busy .cl-refine__spark { animation: none; }
}

/* Cloak for Alpine (prevent flash of unstyled template) */
[x-cloak] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v8 additions — hero, shared-footer plumbing, and the conversations strip.
   Tokens only; no new colours. Chrome stays monochrome.
   ═══════════════════════════════════════════════════════════════════════ */

/* The floating treatment needs one wrapper element to satisfy x-if's
   single-root rule; display:contents keeps it out of the layout entirely so
   the wash/panel still resolve against .card__inner. */
.card__pane { display: contents; }

/* The footer is now shared across all four treatments; floating just needs
   the same in-flow-over-wash placement the other variants already had. */
.card__footer--floating { padding: 20px 24px 26px; }

/* ---- hero ------------------------------------------------------------
   Mirrors .card-grid's container exactly (same track sizing, centring, gap,
   padding and rail lane) so the search bar starts on the first card's left
   edge instead of floating off to the side. */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 380px));
  justify-content: center;
  gap: 36px;
  max-width: 2100px;
  margin-inline: auto;
  padding: 72px 24px 0;
  padding-left: max(24px, var(--rail-lane));
}
@media (min-width: 1024px) { .hero { padding: 96px 40px 0; padding-left: max(40px, var(--rail-lane)); } }
@media (min-width: 1600px) { .hero { padding: 112px 48px 0; padding-left: max(48px, var(--rail-lane)); } }
@media (max-width: 480px)  { .hero { grid-template-columns: 1fr; } }
.hero__row  { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.hero__note { grid-column: 1 / -1; margin: 18px 0 0; font-size: 13px; color: var(--ink-500); letter-spacing: .01em; }
.hero__wt   { position: relative; flex: 0 0 auto; }
.hero__note strong { color: var(--ink-700); font-weight: 600; }

/* ---- stage cross-fade between levels --------------------------------- */
.stage.is-fading { opacity: 0; }
.stage { transition: opacity var(--dur-fast) var(--ease-smooth); }

/* ---- drilled node states --------------------------------------------- */
.card.is-asset .card__link { color: var(--ink-700); }

/* ---- briefing synthesis column --------------------------------------- */
.synth__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ---- walk session transcript ----------------------------------------- */
.wt-transcript {
  max-height: 46vh; overflow-y: auto; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.wt-turn {
  margin: 0; font-size: 14.5px; line-height: 1.55; max-width: 62ch;
  padding: 12px 16px; border-radius: var(--radius-image);
}
.wt-turn.is-you { background: var(--ink-900); color: #fff; align-self: flex-end; }
.wt-turn.is-kb  { background: var(--ink-50); color: var(--ink-800); border: 1px solid var(--ink-200); }
.wt-turn.is-live { color: var(--ink-400); font-style: italic; padding-left: 0; }

.blog-mock__body { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-600); }

/* ---- preview modal, editing state ------------------------------------
   Edit is a deeper STATE of preview, not a second modal — it widens to a
   two-pane workspace with the live mockup on the left. */
.cl-preview.is-editing { max-width: min(1560px, 96vw); width: 96vw; height: 92vh; }
.cl-preview.is-editing .cl-preview__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 28px; align-items: start; overflow: hidden;
}
@media (max-width: 900px) {
  .cl-preview.is-editing .cl-preview__wrap { grid-template-columns: 1fr; }
}

/* ---- conversations for the current context ---------------------------
   Walks started from this page, surfaced on this page. */
.convos {
  max-width: 2100px; margin: 8px auto 0; padding: 40px 24px 72px;
  border-top: 1px solid var(--ink-200);
}
@media (min-width: 1024px) { .convos { padding: 48px 40px 88px; } }
.convos__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.convos__title {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900);
}
.convos__ctx {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400);
}
.convos__loading { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.convos__loading .skel-bar { height: 12px; }
.convos__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.convos__empty-title { margin: 0; font-size: 14px; color: var(--ink-500); }
.convos__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border: 0; border-radius: var(--radius-pill);
  background: var(--ink-900); color: #fff; font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; box-shadow: var(--shadow-pill);
  transition: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-smooth);
}
.convos__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.convos__cta:active { transform: scale(.98); }
.convos__cta:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 3px; }
.convos__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.convos__item {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 18px 20px; border: 1px solid var(--ink-200); border-radius: var(--radius-image);
  background: var(--surface); font: inherit; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth),
              transform var(--dur-base) var(--ease-out-soft);
}
.convos__item:hover { border-color: var(--ink-300); box-shadow: var(--shadow-card-rest); transform: translateY(-2px); }
.convos__item:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.convos__item-title { font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.convos__item-meta {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-400);
}
.convos__item-snip {
  font-size: 13px; line-height: 1.5; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .stage, .convos__cta, .convos__item { transition: none !important; }
  .convos__cta:hover, .convos__item:hover { transform: none; }
}

/* ---- stage as THE container -------------------------------------------
   Drilled surfaces (library, loops, briefing, leaf) were rendering edge-to-edge
   because only .card-grid carried the container geometry. Move it up to .stage
   and let the grids inside just lay out. Matches .hero exactly so the hero,
   the home grid and every drilled surface share one left edge. */
.stage {
  max-width: 2100px; margin-inline: auto;
  padding: 24px; padding-left: max(24px, var(--rail-lane));
}
@media (min-width: 1024px) { .stage { padding: 40px; padding-left: max(40px, var(--rail-lane)); } }
@media (min-width: 1600px) { .stage { padding: 48px; padding-left: max(48px, var(--rail-lane)); } }
.stage > .card-grid { padding: 0; padding-left: 0; max-width: none; margin: 0; }
.convos { padding-left: 0; padding-right: 0; max-width: none; }

/* .cl-grid only ever set align-items; the grid itself was never declared. */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
  justify-content: center;
  gap: 36px;
  align-items: start;
}
@media (max-width: 480px) { .cl-grid { grid-template-columns: 1fr; } }

/* The media layers (.cl-social/.cl-doc/.cl-email/.cl-sms) are absolutely
   positioned, so the footer is the only in-flow child of the flex column and
   lands at the TOP, colliding with .cl-card__chrome. Push it to the bottom. */
.cl-card__inner > .cl-card__footer { margin-top: auto; }

/* Pulse / loop cards carry short content; the 4:5 shell leaves dead space
   under the footer. Let them size to their content instead. */
.card--pulse, .card--loop { aspect-ratio: auto; }
.card--pulse .card__inner, .card--loop .card__inner { position: relative; }


/* .crumb is display:inline-block and relies on a parent for placement; without
   one it pins to 0,0 underneath the pinned dock. This lane mirrors .stage's
   container (including the rail lane, which also clears the dock cluster). */
.crumb-lane {
  max-width: 2100px; margin-inline: auto;
  padding: 24px 24px 0; padding-left: max(24px, var(--rail-lane));
}
@media (min-width: 1024px) { .crumb-lane { padding: 40px 40px 0; padding-left: max(40px, var(--rail-lane)); } }
@media (min-width: 1600px) { .crumb-lane { padding: 48px 48px 0; padding-left: max(48px, var(--rail-lane)); } }
.crumb-lane + .stage { padding-top: 20px; }