/* ===== IMPORTS & RESET ===== */
@import url('/static/css/tokens.css');

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* ===== LAYOUT ===== */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-page);
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-6);
  font: var(--type-h3);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  text-decoration: none;
}
.sidebar-brand img { width: 28px; height: 28px; }

.sidebar-workspace {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  color: inherit;
}
.sidebar-workspace .avatar-tonal { flex-shrink: 0; }
.sidebar-workspace-name { font: var(--type-label); color: var(--fg-1); }
.sidebar-workspace-meta { font: var(--type-caption); color: var(--fg-3); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-state) var(--ease-in-out), color var(--dur-state) var(--ease-in-out);
}
.sidebar-nav-item:hover { background: var(--bg-surface); color: var(--fg-1); }
.sidebar-nav-item.is-active {
  background: var(--bg-surface);
  color: var(--fg-1);
  box-shadow: var(--shadow-2);
}
.sidebar-nav-item .icon { color: var(--fg-3); }
.sidebar-nav-item.is-active .icon { color: var(--fg-1); }

.sidebar-nav-section {
  font: var(--type-caption);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-3) var(--space-1);
  margin-top: var(--space-2);
}

.sidebar-spacer { flex: 1 1 auto; }

.sidebar-callout {
  background: var(--bloom-gradient-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-callout-h {
  font: var(--type-label);
  color: var(--fg-1);
  font-weight: 600;
}
.sidebar-callout-body {
  font: var(--type-caption);
  color: var(--fg-2);
  line-height: 1.45;
}

.app-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-height);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.topbar-crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.topbar-crumbs a,
.topbar-crumbs span {
  font: var(--type-body-sm);
  color: var(--fg-2);
  text-decoration: none;
}
.topbar-crumbs a:hover { color: var(--fg-1); }
.topbar-crumbs .is-current { color: var(--fg-1); font-weight: 600; }
.topbar-crumbs .icon { color: var(--fg-3); }

.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 7px var(--space-3);
  width: 280px;
  /* The trigger is a <button> styled to look like a search box — reset the
     default button chrome and left-align like a text field. */
  text-align: left;
  cursor: pointer;
  font: var(--type-body-sm);
  color: var(--fg-1);
  transition: border-color var(--dur-state) var(--ease-in-out);
}
.topbar-search:hover { border-color: var(--border-strong); }
.topbar-search .icon { color: var(--fg-3); }
.topbar-search-placeholder {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
}
.topbar-search input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font: var(--type-body-sm);
  color: var(--fg-1);
}
.topbar-search input::placeholder { color: var(--fg-3); }
.topbar-search-kbd {
  font: var(--type-mono-sm);
  color: var(--fg-3);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page {
  padding: var(--space-7) var(--space-6);
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.page-header h1 {
  font: var(--type-display-md);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
}
.page-header p { margin-top: var(--space-2); }

.page-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
}

.page-rail {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.marketing-shell {
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.marketing-section {
  padding: var(--space-12) var(--space-7);
}

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
}

.prose {
  max-width: var(--max-prose);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose p, .prose li { font: var(--type-body); color: var(--fg-2); }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose code {
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* ===== SURFACE ===== */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-2);
}
.card-tight { padding: var(--space-4); }
.card-elevated { box-shadow: var(--shadow-3); }
.card-bloom {
  background: var(--bloom-gradient-soft);
  border-color: var(--border-subtle);
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font: var(--type-body-sm);
  color: var(--fg-2);
}

.divider {
  height: 1px;
  background: var(--border-subtle);
  border: none;
  margin: var(--space-4) 0;
}

/* ===== CONTROL ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: var(--type-label);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  color: var(--fg-1);
  transition: background var(--dur-state) var(--ease-in-out),
              border-color var(--dur-state) var(--ease-in-out),
              color var(--dur-state) var(--ease-in-out),
              box-shadow var(--dur-state) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-in-out);
}
.btn:active { transform: scale(0.98); }
.btn:disabled,
.btn.is-disabled {
  cursor: not-allowed;
  background: var(--bg-disabled);
  color: var(--fg-disabled);
  border-color: var(--border-subtle);
  pointer-events: none;
}
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn-block { width: 100%; }

/* Pastel surfaces use --pastel-tone-down so dark mode softens the bright pastel
   fills without changing identity (the token resolves to `none` in light mode).
   Buttons + scoring widgets sit on every page; the status-surface group below
   covers chips, flashes, pills, and bubble error states that bind directly to
   the raw -100/-700 palette ramps and would otherwise glare on dark surfaces. */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-tonal,
.m-pricing-badge,
.score-bar-fill,
/* status surfaces — chip / flash / pill / pricing-feature-check */
.chip-pink,
.chip-blue,
.chip-sage,
.chip-apricot,
.chip-rose,
.chip-periwinkle,
.flash-success,
.flash-error,
.flash-warn,
.avatar-tonal,
.resonance-chip.is-resonant,
.resonance-chip.is-dissent,
.transcript-bubble.is-error,
.transcript-bubble.error,
.synthesis-pill.is-positive,
.synthesis-pill.is-negative,
.m-pricing-feature-check {
  filter: var(--pastel-tone-down);
}

.btn-primary {
  background: var(--bg-primary);
  color: var(--fg-on-primary);
  box-shadow: var(--shadow-2);
}
.btn-primary:hover { background: var(--bg-primary-hover); box-shadow: var(--shadow-3); }
.btn-primary:active { background: var(--bg-primary-press); }

.btn-secondary {
  background: var(--bg-surface);
  color: var(--fg-1);
  border-color: var(--border-default);
}
.btn-secondary:hover { background: var(--bg-surface-2); }

.btn-tonal {
  background: var(--btn-tonal-bg);
  color: var(--btn-tonal-fg);
}
/* Hover derives from the composite tokens so it flips with theme. color-mix
   darkens the pastel in light mode and lifts the rgba opacity in dark mode. */
.btn-tonal:hover {
  background: color-mix(in srgb, var(--btn-tonal-bg) 60%, var(--bg-surface) 40%);
  color: var(--btn-tonal-fg);
}

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
}
.btn-ghost:hover { background: var(--bg-surface-2); }

.btn-danger {
  background: var(--rose-100);
  color: var(--rose-700);
  border-color: var(--rose-300);
}
.btn-danger:hover { background: var(--rose-300); color: var(--slate-800); }

.input,
.select,
.textarea {
  width: 100%;
  padding: 10px var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font: var(--type-body);
  color: var(--fg-1);
  transition: border-color var(--dur-state) var(--ease-in-out), box-shadow var(--dur-state) var(--ease-in-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-3); }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--border-strong); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-bloom);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--bg-surface-2);
  color: var(--fg-3);
  cursor: not-allowed;
}
.textarea { resize: vertical; min-height: 88px; }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.field + .field { margin-top: var(--space-4); }
.field-label {
  font: var(--type-label);
  color: var(--fg-1);
}
.field-help {
  font: var(--type-caption);
  color: var(--fg-3);
}
.field-error {
  font: var(--type-caption);
  color: var(--fg-error);
}
/* Aux text inside a label — e.g. "(optional)", "(change below)". Plays the role
   of a hint without dropping below the WCAG threshold of `--fg-3` (which fails
   AA on `--bg-surface-2` striped rows). */
.field-label-aux {
  font-weight: 400;
  color: var(--fg-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font: var(--type-caption);
  font-weight: 500;
  background: var(--bg-surface);
  color: var(--fg-2);
}
.chip-pink { background: var(--pink-100); color: var(--pink-700); }
.chip-blue { background: var(--blue-100); color: var(--blue-700); }
.chip-sage { background: var(--sage-100); color: var(--sage-700); }
.chip-apricot { background: var(--apricot-100); color: var(--apricot-700); }
.chip-rose { background: var(--rose-100); color: var(--rose-700); }
.chip-periwinkle { background: var(--periwinkle-100); color: var(--periwinkle-700); }
.chip-outline {
  background: var(--bg-surface);
  color: var(--fg-2);
  border-color: var(--border-default);
}
.chip-eyebrow {
  padding: 3px 10px;
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.chip-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.chip-removable .chip-x {
  opacity: 0.6;
  cursor: pointer;
  margin-left: 2px;
}
.chip-removable .chip-x:hover { opacity: 1; }
.chip-lg { padding: 6px 12px; font-size: 13px; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  color: var(--fg-2);
  font: var(--type-caption);
  font-weight: 500;
}

.flash {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--fg-1);
  font: var(--type-body-sm);
}
.flash + .flash { margin-top: var(--space-3); }
.flash-success { background: var(--sage-100); color: var(--sage-700); border-color: var(--sage-300); }
.flash-error   { background: var(--rose-100); color: var(--rose-700); border-color: var(--rose-300); }
.flash-warn    { background: var(--apricot-100); color: var(--apricot-700); border-color: var(--apricot-300); }

.icon {
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== PERSONA ===== */

.avatar {
  display: inline-block;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  width: 32px; height: 32px;
}
.avatar-sm { width: 24px; height: 24px; }
.avatar-md { width: 32px; height: 32px; }
.avatar-lg { width: 40px; height: 40px; }
.avatar-xl { width: 48px; height: 48px; }

.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > * + * { margin-left: -8px; }
.avatar-stack > * {
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--bg-surface);
}

.avatar-tonal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--bg-tint-pink);
  color: var(--fg-accent);
  border-radius: var(--radius-sm);
  font: var(--type-caption);
  font-weight: 600;
}

/* avatar breathing — opt-in via .avatar-breathing; reduced-motion respects it */
@keyframes kb-breath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
.avatar-breathing { animation: kb-breath 2s var(--ease-in-out) infinite; }

/* Tone-down avatar imagery on dark backgrounds. The avatar SVGs bake in
   pastel-100 backgrounds; without this they read as bright discs on the
   near-black page. Filter keeps tone identity intact while softening glare.
   .avatar-tonal is intentionally omitted — it now uses --bg-tint-pink
   (alpha-blended on dark surfaces); double-filtering would over-darken. */
[data-theme="dark"] .avatar {
  filter: saturate(0.85) brightness(0.94);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .avatar {
    filter: saturate(0.85) brightness(0.94);
  }
}

.persona-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-state) var(--ease-in-out),
              border-color var(--dur-state) var(--ease-in-out),
              box-shadow var(--dur-state) var(--ease-in-out);
}
.persona-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-2);
}
.persona-card.is-selected {
  background: var(--bg-card-selected);
  border-color: var(--pink-300);
  border-width: 2px;
  /* compensate for the 2nd border px so layout doesn't jump */
  padding: calc(var(--space-4) - 1px);
}
.persona-card-body { flex: 1; min-width: 0; }
.persona-card-name {
  font: var(--type-h3);
  font-size: 15px;
  color: var(--fg-1);
}
.persona-card-meta {
  font: var(--type-mono-sm);
  color: var(--fg-3);
  margin-left: var(--space-2);
}
.persona-card-title {
  font: var(--type-body-sm);
  color: var(--fg-2);
  margin: 2px 0 var(--space-2);
}
.persona-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.persona-card-radio {
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-default);
  background: var(--bg-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-on-primary);
  transition: background var(--dur-state) var(--ease-in-out), border-color var(--dur-state) var(--ease-in-out);
}
.persona-card.is-selected .persona-card-radio {
  background: var(--pink-300);
  border-color: var(--pink-300);
}

.persona-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  color: inherit;
}
.persona-tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.persona-tile-name {
  font: var(--type-h3);
  font-size: 16px;
  color: var(--fg-1);
}
.persona-tile-role {
  font: var(--type-body-sm);
  color: var(--fg-2);
}
.persona-tile-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.persona-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px 4px 4px;
  background: var(--bg-tint-pink);
  color: var(--fg-accent);
  border-radius: var(--radius-full);
  font: var(--type-caption);
  font-weight: 500;
}
.persona-pill img { width: 20px; height: 20px; border-radius: var(--radius-full); }

.persona-attrib {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--fg-3);
  margin-bottom: 6px;
}
.persona-attrib-name { color: var(--fg-1); font-weight: 600; font-size: 14px; }
.persona-attrib-role { color: var(--fg-3); }

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.persona-checkbox-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.option-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-state) var(--ease-in-out),
              box-shadow var(--dur-state) var(--ease-in-out),
              border-color var(--dur-state) var(--ease-in-out);
}
.option-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-1px);
}
.option-card.is-selected {
  border-color: var(--pink-300);
  border-width: 2px;
  padding: calc(var(--space-5) - 1px);
  background: var(--bg-card-selected);
}
.option-card-h {
  font: var(--type-h3);
  color: var(--fg-1);
  margin-bottom: var(--space-2);
}
.option-card-body {
  font: var(--type-body-sm);
  color: var(--fg-2);
}

/* ===== SESSION ===== */

.session-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
}

.session-header {
  padding: var(--space-5) var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.session-header h2 { font: var(--type-h1); color: var(--fg-1); }
.session-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.transcript {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-10);
  background: var(--bg-surface);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 60px), transparent 100%);
}

/* turn-row: SSE-keyed wrapper class — preserve verbatim */
.turn-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.transcript-prompt {
  align-self: flex-end;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.transcript-prompt .persona-attrib { color: var(--fg-3); }
.transcript-prompt-body {
  background: var(--bg-prompt);
  color: var(--fg-prompt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font: var(--type-body-sm);
  line-height: 1.5;
}

.transcript-reply {
  display: flex;
  gap: var(--space-3);
  max-width: 720px;
}
.transcript-reply-body {
  flex: 1;
  min-width: 0;
}

.transcript-bubble {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font: var(--type-body-sm);
  line-height: 1.55;
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
  position: relative;
  white-space: pre-wrap;
}
.transcript-bubble.is-streaming::after {
  content: '';
  display: inline-block;
  vertical-align: baseline;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-radius: var(--radius-full);
  background: var(--pink-300);
  animation: kb-pulse 2s var(--ease-in-out) infinite;
}
@keyframes kb-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
/* alias: SSE JS calls classList.add("complete") and "error"; both names map here.
   Color inherits from .transcript-bubble (--fg-1) so both themes resolve correctly. */
.transcript-bubble.is-error,
.transcript-bubble.error {
  background: var(--rose-100);
  border-color: var(--rose-300);
  color: var(--rose-700);
  font-style: italic;
}

.transcript-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: 6px;
  font: var(--type-caption);
  font-weight: 500;
  color: var(--fg-3);
}
.transcript-actions button {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.transcript-actions button:not(:disabled):hover { color: var(--fg-1); }
.transcript-actions button:disabled { cursor: not-allowed; opacity: 0.6; }

/* Pin marker — Wave B. The pin glyph sits next to the persona name and a
 * subtle left border distinguishes the pinned bubble. Both rules key off
 * .is-pinned so the SSE reconnect path can layer it on without rewriting
 * the bubble. */
.persona-attrib-pin {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--pink-500, var(--pink-300));
}
.transcript-bubble.is-pinned {
  border-left: 3px solid var(--pink-300);
  padding-left: calc(var(--space-4) - 2px);
}
.transcript-reply.is-pinned .persona-attrib-name { color: var(--fg-1); font-weight: 600; }

/* Quote ("Clip") flow. The Quote button swaps an inline form into the
 * .transcript-actions row; on save the form is replaced with a tiny
 * confirmation span. Kept self-contained so we don't fight the bubble
 * sizing. */
.clip-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  width: 100%;
}
.clip-form textarea {
  width: 100%;
  font: var(--type-body-sm);
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  resize: vertical;
}
.clip-form-actions { display: flex; gap: var(--space-2); }
.clip-saved {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--sage-100, var(--bg-surface));
  color: var(--sage-700, var(--fg-1));
  font: var(--type-caption);
}
.clip-saved a { color: inherit; text-decoration: underline; }

.resonance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font: var(--type-caption);
  font-weight: 500;
  background: var(--bg-surface-2);
  color: var(--fg-2);
}
.resonance-chip.is-resonant { background: var(--pink-100); color: var(--pink-700); }
.resonance-chip.is-dissent  { background: var(--rose-100); color: var(--rose-700); }
.resonance-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.composer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: var(--space-4) var(--space-6);
}
.composer-shell {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  box-shadow: var(--shadow-inner);
}
.composer-textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  resize: vertical;
  min-height: 48px;
  font: var(--type-body-sm);
  line-height: 1.5;
  color: var(--fg-1);
}
.composer-textarea::placeholder { color: var(--fg-3); }
.composer-actions {
  display: flex;
  gap: var(--space-2);
}
.composer-tip {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font: var(--type-caption);
  color: var(--fg-3);
}

/* ===== SYNTHESIS ===== */

.synthesis {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.synthesis-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.synthesis-section-h {
  font: var(--type-label);
  font-weight: 600;
  color: var(--fg-1);
}

.score-readout {
  font: var(--type-display-lg);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.score-readout-unit {
  font: var(--type-body-sm);
  color: var(--fg-2);
  font-weight: 400;
  letter-spacing: var(--track-normal);
}

.score-bar {
  height: 6px;
  width: 100%;
  background: var(--bg-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-3);
}
.score-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--pink-300), var(--blue-300));
  /* width set inline via style="width: 78%" */
}

.score-meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font: var(--type-mono-sm);
  color: var(--fg-3);
}

.synthesis-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: var(--type-body-sm);
  line-height: 1.5;
  color: var(--fg-1);
}
.synthesis-pill.is-positive {
  background: var(--pink-50);
  border-color: var(--pink-100);
  color: var(--slate-800);
}
.synthesis-pill.is-negative {
  background: var(--rose-100);
  border-color: var(--rose-300);
  color: var(--rose-700);
}

.language-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.synthesis-empty {
  font: var(--type-body-sm);
  color: var(--fg-3);
  padding: var(--space-4);
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  text-align: center;
}

/* ===== MARKETING ===== */

.m-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-height);
  padding: 0 var(--space-6);
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.m-nav-row {
  max-width: var(--max-content);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.m-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--type-h3);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  text-decoration: none;
}
.m-nav-brand img { width: 28px; height: 28px; }

.m-nav-links {
  display: flex;
  gap: var(--space-5);
  margin-left: var(--space-4);
}
.m-nav-links a {
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-state) var(--ease-in-out);
}
.m-nav-links a:hover { color: var(--fg-1); }

.m-nav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.m-hero {
  position: relative;
  overflow: hidden;
  background: var(--bloom-gradient);
  padding: var(--space-14) var(--space-7) var(--space-10);
}
/* radial-gradient floret pattern — copied verbatim from Hero.jsx */
.m-hero-pattern {
  --hero-dot-pink: var(--pink-200);
  --hero-dot-blue: var(--blue-200);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 0 0, var(--hero-dot-pink) 1.4px, transparent 1.8px), radial-gradient(circle at 12px 12px, var(--hero-dot-blue) 1.4px, transparent 1.8px);
  background-size: 24px 24px;
  opacity: 0.4;
}
[data-theme="dark"] .m-hero-pattern {
  --hero-dot-pink: var(--pink-500);
  --hero-dot-blue: var(--blue-500);
  opacity: 0.55;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .m-hero-pattern {
    --hero-dot-pink: var(--pink-500);
    --hero-dot-blue: var(--blue-500);
    opacity: 0.55;
  }
}
.m-hero-inner {
  position: relative;
  max-width: var(--max-content);
  margin: 0 auto;
}
.m-hero-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  margin-bottom: var(--space-4);
}
.m-hero-title {
  font: var(--type-display-xl);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  margin: 0;
  max-width: 880px;
}
.m-hero-lede {
  font: var(--type-body-lg);
  color: var(--fg-2);
  max-width: 600px;
  margin-top: var(--space-5);
}
.m-hero-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

.m-hero-preview {
  margin-top: var(--space-12);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-5);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
}
.m-hero-preview-transcript {
  padding: var(--space-6);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.m-hero-preview-synthesis {
  padding: var(--space-6);
  background: var(--bg-surface);
}

.m-logos {
  background: var(--bg-surface);
  padding: var(--space-9) var(--space-7);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.m-logos-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  margin-bottom: var(--space-5);
}
.m-logos-list {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.m-logos-list > * {
  font: var(--type-h3);
  font-size: 18px;
  color: var(--fg-3);
  letter-spacing: var(--track-tight);
}

.m-feature-row {
  padding: var(--space-12) var(--space-7);
  background: var(--bg-surface);
}
.m-feature-row-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.m-feature-row.is-reverse .m-feature-row-inner > .m-feature-art { order: -1; }

.m-feature-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  margin-bottom: var(--space-3);
}
.m-feature-title {
  font: var(--type-display-section);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  margin: 0;
}
.m-feature-body {
  font: var(--type-body-lg);
  color: var(--fg-2);
  margin-top: var(--space-4);
  max-width: 480px;
}
.m-feature-art {
  /* container sized by parent grid; visual provided by inline child */
}

.m-quote {
  padding: var(--space-14) var(--space-7);
  background: var(--bloom-gradient-soft);
}
.m-quote-inner {
  max-width: 880px;
  margin: 0 auto;
}
.m-quote-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  margin-bottom: var(--space-5);
}
.m-quote-body {
  font: var(--type-display-md);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.m-quote-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.m-quote-name { font: var(--type-h3); font-size: 15px; color: var(--fg-1); }
.m-quote-role { font: var(--type-body-sm); color: var(--fg-2); }

.m-pricing {
  padding: var(--space-12) var(--space-7);
  background: var(--bg-surface);
}
.m-pricing-inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
.m-pricing-head {
  text-align: center;
  margin-bottom: var(--space-9);
}
.m-pricing-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  margin-bottom: var(--space-3);
}
.m-pricing-h {
  font: var(--type-display-section);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  margin: 0;
}

/* 4 tiers because the live business model has 4; collapses on smaller widths */
.m-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.m-pricing-tier {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
}
.m-pricing-tier.is-featured {
  border: 2px solid var(--pink-300);
  /* compensate for extra border px so heights line up */
  padding: calc(var(--space-7) - 1px);
  box-shadow: var(--shadow-3);
}
.m-pricing-badge {
  position: absolute;
  top: -12px;
  left: var(--space-5);
  padding: 5px 10px;
  background: var(--pink-300);
  color: var(--fg-on-primary);
  border-radius: var(--radius-full);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.m-pricing-tier-name {
  font: var(--type-h3);
  font-size: 18px;
  color: var(--fg-1);
}
.m-pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: var(--space-3) 0 var(--space-2);
}
.m-pricing-price-num {
  font: 600 40px/1 var(--font-display);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
}
.m-pricing-price-sub {
  font: var(--type-body);
  font-size: 15px;
  color: var(--fg-2);
}
.m-pricing-desc {
  font: var(--type-body-sm);
  color: var(--fg-2);
  margin-bottom: var(--space-5);
}
.m-pricing-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-body-sm);
  color: var(--fg-1);
}
.m-pricing-feature + .m-pricing-feature { margin-top: var(--space-2); }
.m-pricing-feature-check {
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  background: var(--sage-100);
  color: var(--sage-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m-footer {
  background: var(--slate-800);
  color: var(--fg-on-dark);
  padding: var(--space-12) var(--space-7) var(--space-7);
}
.m-footer-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-7);
}
.m-footer-brand { display: flex; flex-direction: column; gap: var(--space-3); }
.m-footer-brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--type-h3);
  letter-spacing: var(--track-tight);
}
.m-footer-brand-row img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.m-footer-brand-body {
  font: var(--type-body-sm);
  color: var(--fg-on-dark-2);
  max-width: 320px;
}
.m-footer-group-h {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-3);
  margin-bottom: var(--space-3);
}
.m-footer-group-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.m-footer-group-list a {
  font: var(--type-body-sm);
  color: var(--fg-on-dark);
  text-decoration: none;
}
.m-footer-group-list a:hover { color: var(--pink-200); }
.m-footer-meta {
  max-width: var(--max-content);
  margin: var(--space-9) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  justify-content: space-between;
  font: var(--type-body-sm);
  color: var(--fg-on-dark-3);
}

/* ===== STATES, HOVER, FOCUS, MOTION ===== */

.is-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.is-loading { opacity: 0.6; pointer-events: none; }

/* Strip the browser outline ONLY where we replace it with the bloom shadow. Bare
   links, theme-toggle buttons, breadcrumbs, footer links, and anything else not
   listed here keep the browser default outline so keyboard users always see a
   focus indicator. */
.btn:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.persona-card:focus-visible,
.option-card:focus-visible,
.persona-tile:focus-visible,
.sidebar-nav-item:focus-visible,
.topbar-search:focus-visible,
.topbar-search input:focus-visible,
.cmd-palette-input:focus-visible,
a.m-nav-link:focus-visible,
.m-nav-links a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-bloom);
}

.hover-lift {
  transition: transform var(--dur-state) var(--ease-in-out),
              box-shadow var(--dur-state) var(--ease-in-out);
}
.hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-3);
}

@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover { transform: none; }
  .transcript-bubble.is-streaming::after { animation: none; }
  .avatar-breathing { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* ===== UTILITIES ===== */

.eyebrow-muted {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

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

.text-muted { color: var(--fg-3); }
.text-mono { font: var(--type-mono); color: var(--fg-1); }
.text-right { text-align: right; }

.flex { display: flex; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ===== TABLES ===== */

.table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-sm);
  color: var(--fg-2);
}
.table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-1);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--dur-state) var(--ease-in-out); }
.table tbody tr:hover { background: var(--bg-surface-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .table-num { font: var(--type-mono); text-align: right; }

/* ===== RESPONSIVE ===== */

@media (max-width: 880px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform var(--dur-page) var(--ease-out-quint);
    box-shadow: var(--shadow-3);
  }
  body.is-sidebar-open .sidebar { transform: translateX(0); }
  .topbar-search { display: none; }
  .m-nav-links { display: none; }
  .m-feature-row-inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .m-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .m-hero-preview { grid-template-columns: 1fr; }
  .m-hero-preview-transcript { border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .m-footer-grid { grid-template-columns: 1fr 1fr; }
  .marketing-section { padding: var(--space-10) var(--space-6); }
  .m-hero-title { font: var(--type-display-lg); letter-spacing: var(--track-display); }
}

@media (max-width: 720px) {
  .page-split { grid-template-columns: 1fr; }
  .page-rail { position: static; }
  .m-pricing-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .m-footer-grid { grid-template-columns: 1fr; }
  .m-footer-meta { flex-direction: column; gap: var(--space-2); }
}

/* ===== COOKIE CONSENT BANNER =====
   The mount partial in `partials/cookie_consent.html` ships an empty
   `#cookie-consent-mount` div on full-page renders only (HTMX fragments
   skip it). The cookie_consent.js module builds the banner DOM and
   injects it; styles below provide the visual chrome. Buttons reuse
   `.btn .btn-primary .btn-sm` and `.btn .btn-ghost .btn-sm`. */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  box-shadow: var(--shadow-3);
  padding: var(--space-4);
}
.cookie-banner-inner {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 16rem;
  margin: 0;
  font: var(--type-body-sm);
  color: var(--fg-2);
}
.cookie-banner-text a {
  color: var(--fg-link);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: flex-end; }
}

/* ===== UTILITIES =====
   Surgical, single-purpose helpers absorbed from ~310 of 470 inline
   `style="…"` declarations across templates. Keep this block small;
   any addition must replace ≥7 inline occurrences across the codebase. */
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.ml-2 { margin-left: var(--space-2); }
.m-0 { margin: 0; }

.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.flex-between { display: flex; align-items: baseline; justify-content: space-between; }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }

.body-muted { font: var(--type-body); color: var(--fg-2); max-width: 640px; }
.heading-section { font: var(--type-h2); color: var(--fg-1); }
.label-meta { font: var(--type-label); color: var(--fg-3); }
.caption-muted { font: var(--type-caption); color: var(--fg-3); }
.body-sm-muted { font: var(--type-body-sm); color: var(--fg-2); }

/* Dark-mode swap for the empty-state illustration. The light-mode SVG
   bakes pink/blue pastels and dark-stroke outlines; the dark variant
   inverts the gradient to slate and lifts strokes/dots to a cream tone
   so the illustration stays legible on the near-black page. */
[data-theme="dark"] .empty-state-illustration[src$="illustration-empty-group.svg"] {
  content: url('/static/img/illustration-empty-group-dark.svg');
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .empty-state-illustration[src$="illustration-empty-group.svg"] {
    content: url('/static/img/illustration-empty-group-dark.svg');
  }
}

/* ===== PRINT ===== */

@media print {
  body { background: white; color: black; }
  .sidebar, .topbar, .composer, .m-nav, .m-footer { display: none; }
  .app-main, .app-content { width: 100%; overflow: visible; }
  .card { box-shadow: none; border-color: var(--print-border); }
  .receipt {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-7);
  }
  .receipt-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-3);
    font: var(--type-body-sm);
  }
  .receipt-grid dt { color: var(--print-text-muted); }
  .receipt-grid dd { margin: 0; color: var(--print-text-strong); }
}

/* ===== POST-WAVE PATCHES ===== */

/* Persona-picker cards drive their selected state from a real checkbox via
   :has(). Mirrors `.persona-card.is-selected` so the markup can stay
   semantic (no JS for selection visuals). */
.persona-card:has(input[type="checkbox"]:checked) {
  background: var(--bg-card-selected);
  border-color: var(--pink-300);
  border-width: 2px;
  padding: calc(var(--space-4) - 1px);
}
.persona-card:has(input[type="checkbox"]:checked) .persona-card-radio {
  background: var(--pink-300);
  border-color: var(--pink-300);
}

/* Credit pill — used in the sidebar callout and as a standalone HTMX-refreshed
   span. Surface bg, hairline, mono numerals, sparkles icon inside. */
.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--fg-1);
  font: var(--type-mono-sm);
  white-space: nowrap;
}
.credit-pill .credit-pill-value {
  color: var(--fg-accent);
  font-weight: 500;
}

/* Empty state — centred card with illustration + title + body + optional CTA. */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-6);
}
.empty-state-illustration {
  display: block;
  margin: 0 auto var(--space-5);
  max-width: 240px;
  height: auto;
}
.empty-state-body { max-width: 420px; margin: 0 auto; }
.empty-state-title {
  font: var(--type-h2);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
.empty-state-text {
  font: var(--type-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-5);
}

/* Auth pages render a centred form card on the floret background. */
.login-card {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-7);
}

/* Marketing nav text links (non-button). */
.m-nav-link {
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--dur-state) var(--ease-in-out),
              background var(--dur-state) var(--ease-in-out);
}
.m-nav-link:hover { color: var(--fg-1); background: var(--bg-surface-2); }

/* Active state for any nav link group — used by admin filter tabs that mark
   the current filter with aria-current="page". */
.m-nav-links a[aria-current="page"] {
  color: var(--fg-1);
  font-weight: 600;
}

/* Logout form is an inline wrapper so the icon button doesn't break flow. */
.logout-form { display: inline; margin: 0; padding: 0; }

/* Status-tone aliases for chip backgrounds when rendering session statuses
   via the statusTone helper (helper returns "sage"/"blue"/"rose"/"apricot"/
   "outline"). The base `.chip-{tone}` rules already exist; this is a no-op
   placeholder to make the intent explicit. */

/* ===== THEME TOGGLE — light / dark / system segmented control ===== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 0;
}
.theme-toggle-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--dur-state) var(--ease-in-out),
              color var(--dur-state) var(--ease-in-out);
}
.theme-toggle-btn:hover { color: var(--fg-1); }
.theme-toggle-btn[aria-pressed="true"] {
  background: var(--bg-surface);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}
.theme-toggle-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-bloom);
}
.theme-toggle-btn .icon { width: 14px; height: 14px; }

/* ===== POST-AUDIT UTILITIES (Wave J) ===== */

/* Card width modifiers — replace inline `style="max-width: …"` literals.
   Use on `.card` (or any block) instead of inline styles. */
.card-medium { max-width: 560px; }
.card-narrow { max-width: 640px; }
.card-wide   { max-width: 720px; }

/* Form-actions row — submit + cancel pair under a form. Replaces the
   `style="margin-top: var(--space-5); display: flex; gap: var(--space-3);"`
   pattern repeated across account / billing / auth templates. */
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

/* Field row for checkbox + label — overrides `.field`'s column flex direction.
   Use on `<div class="field field-checkbox">` wrappers around an `<input>` and
   its `<label>`. */
.field-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Compact checkbox+label row — for nested overlay/option lists where the input
   sits inline with a single short label. Lighter than `.field-checkbox`. */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-body-sm);
  cursor: pointer;
}

/* Key-value definition list — used for ops/admin readouts (`<dl class="kv-list">`
   with `<dt>` / `<dd>` children). Tight, monospace numerals. */
.kv-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font: var(--type-body-sm);
}
.kv-list dt {
  color: var(--fg-3);
  font-weight: 500;
}
.kv-list dd {
  color: var(--fg-1);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Inline empty-state — for table-cell or compact card-content slots.
   Same styling as `.synthesis-empty` (which originated this pattern); this
   alias clarifies that the class isn't synthesis-specific. */
.empty-state-inline,
.synthesis-empty {
  font: var(--type-body-sm);
  color: var(--fg-3);
  padding: var(--space-4);
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  text-align: center;
}

/* Persona-cards / option-cards hide their `<input>` via `.sr-only`, so the
   `:focus-visible` indicator never lands on the visible card. Use `:has()` to
   hoist the focus state up to the parent label. */
.persona-card:has(input:focus-visible),
.option-card:has(input:focus-visible) {
  outline: none;
  box-shadow: var(--shadow-bloom);
  border-color: var(--border-focus);
}

/* ==========================================================================
   Forced colors / Windows High Contrast
   In forced-colors mode the OS overrides every author-set background and
   color to a small system palette; tinted surfaces (chips, flashes, transcript
   bubbles, synthesis pills, selected cards) flatten to one color and stop
   being distinguishable from the page. Restore the boundary with an explicit
   border in CanvasText, use Highlight for focus, and add a glyph cue to the
   resonance chip so the resonant/dissent distinction survives.
   forced-color-adjust: none on the inner content keeps the tonal class's
   background visible where the OS would otherwise repaint it.
   ========================================================================== */

@media (forced-colors: active) {
  .chip,
  .resonance-chip,
  .transcript-bubble,
  .transcript-prompt-body,
  .synthesis-pill,
  .flash,
  .btn,
  .credit-pill,
  .persona-card.is-selected,
  .option-card.is-selected,
  .persona-card:has(input[type="checkbox"]:checked) {
    border: 1px solid CanvasText;
  }

  /* Focus indicator: system Highlight is guaranteed to contrast in
     forced-colors. Override the bloom shadow which the OS strips anyway. */
  .btn:focus-visible,
  .input:focus-visible,
  .select:focus-visible,
  .textarea:focus-visible,
  .persona-card:focus-visible,
  .option-card:focus-visible,
  .sidebar-nav-item:focus-visible,
  .topbar-search input:focus-visible,
  a.m-nav-link:focus-visible,
  .m-nav-links a:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Status indicators that rely on color alone — add a glyph. */
  .resonance-chip.is-resonant::before { content: "\2713\00a0"; } /* ✓ */
  .resonance-chip.is-dissent::before  { content: "\2715\00a0"; } /* ✕ */
}

/* ==========================================================================
   Mobile tap-target sizing
   WCAG 2.5.5 (AAA) recommends 44x44 CSS-pixel tap targets on touch viewports.
   The desktop visual density stays — these bumps only kick in at narrow
   widths where users are likely on touch devices.
   ========================================================================== */

@media (max-width: 640px) {
  .theme-toggle { padding: 4px; }
  .theme-toggle-btn { width: 44px; height: 44px; }
  .theme-toggle-btn .icon { width: 16px; height: 16px; }

  .btn-sm { padding: 12px 16px; font-size: 13px; }

  .m-nav-link { padding: 12px var(--space-3); }

  a.m-nav-brand { padding: 8px 0; }

  .m-footer-group-list { gap: var(--space-3); }
  .m-footer-group-list a {
    display: block;
    padding: 12px 0;
    line-height: 1.4;
  }
}

/* ===== COMMAND PALETTE ===== */
/* Cmd+K overlay search. Full-viewport scrim + centered card. All semantic
   tokens — dark mode inherits via the alias layer. The scrim is a color-mix
   over --bg-page (not raw rgba) so it darkens correctly in both themes. */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 50; /* above .topbar (z-index 10) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: color-mix(in srgb, var(--bg-page) 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cmd-palette[hidden] { display: none; }

.cmd-palette-panel {
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  max-height: 70vh;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-5);
}

.cmd-palette-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.cmd-palette-input-row .icon { color: var(--fg-3); }
.cmd-palette-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: var(--type-body);
  color: var(--fg-1);
}
.cmd-palette-input::placeholder { color: var(--fg-3); }
.cmd-palette-kbd {
  font: var(--type-mono-sm);
  color: var(--fg-3);
}

#command-palette-listbox {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  flex: 1;
}

.cmd-palette-group {
  font: var(--type-mono-sm);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-2) var(--space-3);
}

.cmd-palette-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.cmd-palette-opt:hover,
.cmd-palette-opt[aria-selected="true"] {
  background: var(--bg-surface-2);
}
.cmd-palette-opt-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-1);
}
.cmd-palette-opt-meta {
  flex-shrink: 0;
  font: var(--type-body-sm);
  color: var(--fg-3);
}

.cmd-palette-hint {
  padding: var(--space-4);
  text-align: center;
  color: var(--fg-3);
  cursor: default;
}

/* Scroll lock while the palette is open. */
body.is-cmdk-open { overflow: hidden; }