/* style.css — Prompt Architect v3 — Custom Design System */
/* Enterprise AI tool. Apple-grade minimalism. */
/* Custom palette per spec — NOT using Nexus defaults */

/* ============================================================
   FLUID TYPE SCALE
   ============================================================ */
:root {
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
  --text-sm:   clamp(0.8125rem, 0.77rem + 0.22vw, 0.875rem);
  --text-base: clamp(1rem,      0.95rem + 0.25vw, 1.0625rem);
  --text-md:   clamp(0.9375rem, 0.89rem + 0.24vw, 1rem);
  --text-lg:   clamp(1.125rem,  1.05rem + 0.38vw, 1.25rem);
  --text-xl:   clamp(1.25rem,   1.1rem  + 0.75vw, 1.75rem);
  --text-2xl:  clamp(1.75rem,   1.3rem  + 1.25vw, 2.25rem);
  --text-hero: clamp(1.75rem,   1.4rem  + 1.75vw, 2.5rem);
}

/* ============================================================
   4PX SPACING SYSTEM
   ============================================================ */
:root {
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
}

/* ============================================================
   BORDER RADIUS
   ============================================================ */
:root {
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.625rem;  /* 10px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;
}

/* ============================================================
   EASING
   ============================================================ */
:root {
  --ease-golden:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-theme: 300ms;
}

/* ============================================================
   FONTS
   ============================================================ */
:root {
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* ============================================================
   DAY THEME (DEFAULT)
   Per spec: #FBF9F6 bg, #FFFFFF cards, #4A453F headings,
   #6C6761 body, #EBCB6B gold accent, #BFB9B2 ui-grey
   ============================================================ */
:root, [data-theme="light"] {
  /* Backgrounds */
  --color-bg:              #FBF9F6;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F7F5F2;
  --color-surface-offset:  #F3F0EC;

  /* Text — high contrast for readability */
  --color-text:            #1A1814;
  --color-text-body:       #2E2A25;
  --color-text-muted:      #5C564F;
  --color-text-faint:      #9B9590;
  --color-text-inverse:    #1A1814;

  /* Accent — Deep Amber (PRIMARY CTA only — rarest; #946F0A passes WCAG AA) */
  --color-accent:          #946F0A;
  --color-accent-hover:    #7A5C08;
  --color-accent-text:     #FFFDF8;

  /* UI Grey — borders, separators, disabled */
  --color-ui-grey:         #BFB9B2;
  --color-border:          #BFB9B2;
  --color-divider:         #E5E1DC;

  /* Interactive / input */
  --color-focus:           #946F0A;
  --color-input-bg:        #FFFFFF;
  --color-input-border:    #BFB9B2;

  /* Status colors */
  --color-success:         #437a22;
  --color-error:           #a12c7b;
  --color-warning:         #964219;

  /* Card accent border */
  --color-card-accent:     #946F0A;

  /* Chip styles */
  --color-chip-bg:         #FFFFFF;
  --color-chip-border:     #BFB9B2;
  --color-chip-selected-bg: #946F0A;
  --color-chip-selected-text: #FFFDF8;

  /* Badge (fallback — overridden by heat-map data-clarity) */
  --color-badge:           #946F0A;
  --color-badge-text:      #FFFDF8;

  /* Shadows — warm-toned */
  --shadow-sm:  0 1px 3px oklch(0.3 0.02 60 / 0.06);
  --shadow-md:  0 4px 16px oklch(0.3 0.02 60 / 0.09);
  --shadow-lg:  0 12px 40px oklch(0.3 0.02 60 / 0.12);
  --shadow-xl:  0 24px 64px oklch(0.3 0.02 60 / 0.16);

  /* Processing dots */
  --color-dot-inactive:    #BFB9B2;
  --color-dot-active:      #EBCB6B;

  /* Content widths */
  --content-narrow:  560px;
  --content-default: 720px;
  --content-wide:   1080px;
}

/* ============================================================
   NIGHT THEME — Navy blue family, luminance-based hierarchy
   Canvas: #102A43 → Cards: #173652 → Active: #1F3A56
   Header/footer: #0B1F33 → Deep: #060D1A
   ============================================================ */
[data-theme="dark"] {
  /* Backgrounds — cohesive blue-navy family */
  --color-bg:              #102A43;  /* base canvas */
  --color-bg-end:          #0B1F33;  /* gradient end (1 step darker) */
  --color-surface:         #173652;  /* cards, panels, forms */
  --color-surface-2:       #1F3A56;  /* hovered/selected/active cards */
  --color-surface-offset:  #0B1F33;  /* header, footer, nav zones */
  --color-deep:            #060D1A;  /* deep sections, overlay fallback */

  /* Text — off-white body, pure white for emphasis */
  --color-text:            #FFFFFF;  /* high-emphasis: titles, key numbers */
  --color-text-body:       #F8FAFC;  /* primary body, labels */
  --color-text-muted:      #D9E2EC;  /* secondary: helper, metadata */
  --color-text-faint:      #9FB3C8;  /* muted: placeholders, disabled */
  --color-text-inverse:    #0B1F33;

  /* Accent — Cyan for interactive/navigation */
  --color-accent:          #00C6FF;
  --color-accent-hover:    #33D4FF;
  --color-accent-text:     #0B1F33;

  /* Primary CTA — Teal-Green */
  --color-cta:             #00F299;
  --color-cta-hover:       #33F5B0;
  --color-cta-text:        #0B1F33;

  /* Borders / Dividers — subtle navy */
  --color-ui-grey:         #9FB3C8;
  --color-border:          #2F4A67;
  --color-divider:         #2F4A67;

  /* Interactive / input */
  --color-focus:           #00C6FF;
  --color-input-bg:        #173652;
  --color-input-border:    #2F4A67;

  /* Status colors */
  --color-success:         #00F299;
  --color-error:           #FF6B8A;
  --color-warning:         #FFAA4D;

  /* Card accent border */
  --color-card-accent:     #00C6FF;

  /* Chip styles */
  --color-chip-bg:         #102A43;
  --color-chip-border:     #2F4A67;
  --color-chip-selected-bg: #00C6FF;
  --color-chip-selected-text: #0B1F33;

  /* Badge */
  --color-badge:           #00C6FF;
  --color-badge-text:      #0B1F33;

  /* Shadows — deep navy tones */
  --shadow-sm:  0 1px 3px rgba(6, 13, 26, 0.30);
  --shadow-md:  0 4px 16px rgba(6, 13, 26, 0.40);
  --shadow-lg:  0 12px 40px rgba(6, 13, 26, 0.50);
  --shadow-xl:  0 24px 64px rgba(6, 13, 26, 0.60);

  /* Overlay scrim */
  --color-overlay:         rgba(6, 13, 26, 0.68);

  /* Processing dots */
  --color-dot-inactive:    #2F4A67;
  --color-dot-active:      #00C6FF;
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #102A43;
    --color-bg-end:          #0B1F33;
    --color-surface:         #173652;
    --color-surface-2:       #1F3A56;
    --color-surface-offset:  #0B1F33;
    --color-deep:            #060D1A;
    --color-text:            #FFFFFF;
    --color-text-body:       #F8FAFC;
    --color-text-muted:      #D9E2EC;
    --color-text-faint:      #9FB3C8;
    --color-text-inverse:    #0B1F33;
    --color-accent:          #00C6FF;
    --color-accent-hover:    #33D4FF;
    --color-accent-text:     #0B1F33;
    --color-cta:             #00F299;
    --color-cta-hover:       #33F5B0;
    --color-cta-text:        #0B1F33;
    --color-ui-grey:         #9FB3C8;
    --color-border:          #2F4A67;
    --color-divider:         #2F4A67;
    --color-focus:           #00C6FF;
    --color-input-bg:        #173652;
    --color-input-border:    #2F4A67;
    --color-card-accent:     #00C6FF;
    --color-chip-bg:         #102A43;
    --color-chip-border:     #2F4A67;
    --color-chip-selected-bg: #00C6FF;
    --color-chip-selected-text: #0B1F33;
    --color-badge:           #00C6FF;
    --color-badge-text:      #0B1F33;
    --shadow-sm:  0 1px 3px rgba(6, 13, 26, 0.30);
    --shadow-md:  0 4px 16px rgba(6, 13, 26, 0.40);
    --shadow-lg:  0 12px 40px rgba(6, 13, 26, 0.50);
    --shadow-xl:  0 24px 64px rgba(6, 13, 26, 0.60);
    --color-overlay:         rgba(6, 13, 26, 0.68);
    --color-dot-inactive:    #2F4A67;
    --color-dot-active:      #00C6FF;
  }
}

/* Dark mode: subtle top-to-bottom gradient on all screens */
[data-theme="dark"] .screen-creation,
[data-theme="dark"] .screen-processing,
[data-theme="dark"] .screen-questions,
[data-theme="dark"] .screen-result {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-end) 100%);
}

/* Dark mode: processing backdrop uses overlay scrim */
[data-theme="dark"] .processing-backdrop {
  background: var(--color-overlay);
}

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

/* Full-page app container */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Header bar */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-6) var(--space-4);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  transition:
    background var(--duration-theme) var(--ease-golden),
    border-color var(--duration-theme) var(--ease-golden);
}

.app-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: auto;
  transition: opacity 200ms var(--ease-golden), transform 200ms var(--ease-golden);
}

/* Logo hides on scroll (result screen) */
.app-header.logo-hidden .app-logo {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .app-logo { transition: none; }
}

.app-logo-img {
  display: block;
  height: 28px;
  width: auto;
  /* SVG is black on transparent — keep as-is for day mode */
  filter: none;
  transition: filter var(--duration-theme) var(--ease-golden);
}

/* Night theme: invert black SVG to white */
[data-theme="dark"] .app-logo-img {
  filter: invert(1);
}

.app-logo-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  transition: color var(--duration-theme) var(--ease-golden);
}

/* Theme toggle */
.theme-toggle {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition:
    background var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden);
}

.theme-toggle:hover {
  background: var(--color-surface-offset, color-mix(in oklch, var(--color-text) 8%, var(--color-bg)));
  color: var(--color-text);
}

/* ============================================================
   SCREENS
   ============================================================ */

.screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition:
    opacity var(--duration-slow) var(--ease-golden),
    transform var(--duration-slow) var(--ease-golden);
}

.screen.active {
  display: flex;
  opacity: 1;
  transform: none;
}

.screen.entering {
  display: flex;
  opacity: 0;
}

.screen.exiting {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   SCREEN 1: CREATION SCREEN
   ============================================================ */

.screen-creation {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-bg);
  transition: background var(--duration-theme) var(--ease-golden);
  padding: var(--space-24) var(--space-6) var(--space-16);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Center inner content when it fits the viewport; collapse the auto
   margins to top-aligned scroll when the fold demo + form push past it
   (especially on mobile where the demo claims ~560px of vertical room). */
.screen-creation > .creation-inner {
  margin: auto 0;
}

.creation-inner {
  width: 100%;
  max-width: var(--content-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* Hero tagline */
.creation-tagline {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space-2);
  transition: color var(--duration-theme) var(--ease-golden);
}

/* Input wrapper */
.creation-input-wrap {
  width: 100%;
  position: relative;
}

.creation-input {
  width: 100%;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  resize: none;
  min-height: 80px;
  max-height: calc(6 * 1.6em + 2 * var(--space-5));
  line-height: 1.6;
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-golden),
    box-shadow var(--duration-fast) var(--ease-golden),
    background var(--duration-theme) var(--ease-golden);
  overflow-y: auto;
}

.creation-input::placeholder {
  color: var(--color-text-faint);
}

.creation-input:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-focus) 20%, transparent);
}

/* ============================================================
   MODEL SELECTOR — Phase 2+ (Screen 1)
   ============================================================ */

.model-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.model-selector-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
  transition: color var(--duration-theme) var(--ease-golden);
}

/* Wrapper holds the button + its tooltip as siblings (not parent/child) */
.model-chip-wrap {
  position: relative;
  display: inline-flex;
}

.model-chip {
  height: 32px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--color-chip-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-chip-border);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-golden),
    border-color var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden);
  min-height: 32px;
}

/* ── Model chip tooltip ── */
.model-chip-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;

  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);

  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;

  pointer-events: none;
  z-index: 300;
}

.model-chip-tooltip strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Caret pointing up toward the chip */
.model-chip-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--color-text);
}

/* Tooltip shows only when its own wrapper is hovered */
.model-chip-wrap:hover .model-chip-tooltip {
  display: block;
}

.model-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.model-chip.selected,
.model-chip[aria-pressed="true"] {
  background: var(--color-chip-selected-bg);
  border-color: var(--color-chip-selected-bg);
  color: var(--color-chip-selected-text);
}

/* GO button */
.btn-go {
  align-self: flex-end;
  height: 44px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--duration-base) var(--ease-golden),
    transform var(--duration-base) var(--ease-golden),
    background var(--duration-fast) var(--ease-golden);
  pointer-events: none;
}

/* Night mode CTA uses teal-green */
[data-theme="dark"] .btn-go {
  background: var(--color-cta, var(--color-accent));
  color: var(--color-cta-text, var(--color-accent-text));
}

.btn-go.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.btn-go:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-go:hover {
  background: var(--color-cta-hover, var(--color-accent-hover));
}

.btn-go:active {
  transform: translateY(0);
}

/* Rate limit status */
.rate-limit-status {
  position: fixed;
  bottom: calc(var(--space-5) + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  white-space: nowrap;
  transition: color var(--duration-theme) var(--ease-golden);
}

/* ============================================================
   SCREEN 2: SILENT REFINEMENT
   ============================================================ */

.screen-processing {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  transition: background var(--duration-theme) var(--ease-golden);
}

/* Subtle blur backdrop */
.processing-backdrop {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px) saturate(0.8);
  background: color-mix(in oklch, var(--color-bg) 85%, transparent);
}

.processing-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* Three-dot progress indicator */
.processing-dots {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.processing-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-dot-inactive);
  transition: background 400ms var(--ease-golden);
  animation: dot-pulse 1.5s var(--ease-in-out) infinite;
}

.processing-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.processing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dot-pulse {
  0%, 100% {
    background: var(--color-dot-inactive);
    transform: scale(1);
  }
  50% {
    background: var(--color-dot-active);
    transform: scale(1.35);
  }
}

/* Status messages */
.processing-messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 88px;
  justify-content: center;
}

.processing-message {
  font-size: var(--text-md);
  color: var(--color-text-body);
  font-weight: 400;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 500ms var(--ease-golden),
    transform 500ms var(--ease-golden);
  text-align: center;
}

.processing-message.visible {
  opacity: 1;
  transform: translateY(0);
}

.processing-message.domain {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ============================================================
   SCREEN 3: CLARIFYING QUESTIONS
   ============================================================ */

.screen-questions {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-bg);
  transition: background var(--duration-theme) var(--ease-golden);
  padding: var(--space-24) var(--space-6) var(--space-16);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Same overflow trick as screen-creation: auto margins center small
   content but collapse to zero once the inner exceeds the flex container,
   so chips + Next button stay reachable on small phones. */
.screen-questions > .questions-inner {
  margin: auto 0;
}

.questions-inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Question counter + archetype row */
.questions-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Mid-flow model switcher — sits between questions-meta and clarity-line.
   Lets the user change target LLM while answering clarifying questions. */
.model-switcher-mini {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs);
}
.model-switcher-mini-label {
  color: var(--color-text-muted);
  margin-right: var(--space-1);
  letter-spacing: 0.02em;
}
.model-chip-mini {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.model-chip-mini:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text);
}
.model-chip-mini.selected {
  background: rgba(64, 192, 255, 0.16);
  border-color: rgba(64, 192, 255, 0.55);
  color: #fff;
}
.model-chip-mini:focus-visible {
  outline: 2px solid rgba(64, 192, 255, 0.6);
  outline-offset: 2px;
}

/* Question counter */
.question-counter {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  transition: color var(--duration-theme) var(--ease-golden);
}

/* ============================================================
   ARCHETYPE BADGE — Phase 2+ (Screen 3)
   ============================================================ */

.archetype-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
  transition:
    background var(--duration-theme) var(--ease-golden),
    color var(--duration-theme) var(--ease-golden),
    border-color var(--duration-theme) var(--ease-golden);
}

.archetype-icon {
  font-style: normal;
  color: var(--color-accent);
  transition: color var(--duration-theme) var(--ease-golden);
}

[data-theme="dark"] .archetype-icon {
  color: var(--color-accent);
}

/* Explorer = muted, Operator/Expert = accent color */
.archetype-badge[data-archetype="Explorer"] .archetype-icon {
  color: var(--color-text-faint);
}

/* ============================================================
   CLARITY LINE — Phase 2+ (Screen 3)
   ============================================================ */

.clarity-line {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  text-align: center;
  margin-top: calc(-1 * var(--space-3));
  letter-spacing: 0.02em;
  transition: color var(--duration-theme) var(--ease-golden);
}

.context-advisor-mini {
  width: min(100%, 520px);
  box-sizing: border-box;
  margin: calc(-1 * var(--space-1)) auto var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.context-advisor-mini[hidden] { display: none; }

.context-mini-meter {
  height: 8px;
  background: var(--color-surface-offset, var(--color-border));
  border-radius: var(--radius-full);
  overflow: hidden;
}

.context-mini-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent);
  border-radius: inherit;
  transition: width var(--duration-base) var(--ease-golden);
}

.context-advisor-mini[data-context-tone="thin"] .context-mini-fill {
  background: var(--color-warning);
}

.context-advisor-mini[data-context-tone="strong"] .context-mini-fill {
  background: var(--color-success);
}

.context-mini-title,
.context-mini-detail {
  margin: 0;
  line-height: 1.35;
}

.context-mini-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
}

.context-mini-detail {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Question card */
.question-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-card-accent);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity var(--duration-base) var(--ease-golden),
    transform var(--duration-base) var(--ease-golden),
    background var(--duration-theme) var(--ease-golden),
    border-color var(--duration-theme) var(--ease-golden);
}

.question-card.visible {
  opacity: 1;
  transform: translateX(0);
}

.question-category {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: color var(--duration-theme) var(--ease-golden);
}

[data-theme="dark"] .question-category {
  color: var(--color-accent);
}

.question-text {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
  transition: color var(--duration-theme) var(--ease-golden);
}

/* Answer chips */
.question-chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.answer-chip {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-chip-bg);
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  cursor: pointer;
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease-golden),
    border-color var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden),
    box-shadow var(--duration-fast) var(--ease-golden);
  min-height: 44px;
}

.answer-chip:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 30%, transparent);
}

.answer-chip.selected {
  background: var(--color-chip-selected-bg);
  border-color: var(--color-chip-selected-bg);
  color: var(--color-chip-selected-text);
}

/* Custom input option */
.custom-input-wrap {
  margin-top: var(--space-1);
}

.custom-input {
  width: 100%;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-golden),
    box-shadow var(--duration-fast) var(--ease-golden);
  min-height: 44px;
}

.custom-input::placeholder {
  color: var(--color-text-faint);
}

.custom-input:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-focus) 20%, transparent);
}

.custom-input.active {
  border-color: var(--color-chip-selected-bg);
}

/* Next button */
.btn-next {
  align-self: flex-end;
  height: 44px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--color-surface-offset, #F3F0EC);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition:
    background var(--duration-fast) var(--ease-golden),
    opacity var(--duration-base) var(--ease-golden),
    transform var(--duration-base) var(--ease-golden);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
}

[data-theme="dark"] .btn-next {
  background: var(--color-surface-2, #1F3A56);
}

.btn-next.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.btn-next:hover {
  background: var(--color-surface-2);
}

/* ============================================================
   SCREEN 4: RESULT
   ============================================================ */

.screen-result {
  flex-direction: column;
  align-items: center;
  background: var(--color-bg);
  transition: background var(--duration-theme) var(--ease-golden);
  overflow-y: auto;
  padding: var(--space-24) var(--space-6) var(--space-16);
}

.result-inner {
  width: 100%;
  max-width: var(--content-wide);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 400ms var(--ease-golden),
    transform 400ms var(--ease-golden);
}

.result-inner.visible {
  opacity: 1;
  transform: scale(1);
}

/* Result header row */
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.result-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  transition: color var(--duration-theme) var(--ease-golden);
}

/* Right side of result header: model tag + quality badge */
.result-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;   /* anchor for clarity-popup */
}

/* ── Clarity info popup ─────────────────────────────────────────────── */
.clarity-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  /* Animate in */
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition:
    opacity 0.18s var(--ease-golden),
    transform 0.18s var(--ease-golden);
  pointer-events: none;
}

.clarity-popup.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.clarity-popup-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-golden),
              background var(--duration-fast) var(--ease-golden);
}

.clarity-popup-close:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.clarity-popup-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  padding-right: var(--space-6);
}

.clarity-popup p {
  font-size: var(--text-xs);
  color: var(--color-text-body);
  line-height: 1.55;
  margin: 0 0 var(--space-2);
}

.clarity-popup-section {
  margin-top: var(--space-4);
}

.clarity-popup-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2) !important;
  letter-spacing: 0.02em;
}

.clarity-popup-list {
  margin: 0;
  padding-left: var(--space-4);
  list-style: disc;
}

.clarity-popup-list li {
  font-size: var(--text-xs);
  color: var(--color-text-body);
  line-height: 1.55;
  margin-bottom: var(--space-1);
}

.clarity-popup-footer {
  font-size: 0.68rem !important;
  color: var(--color-text-faint) !important;
  margin-top: var(--space-4) !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  font-style: italic;
}

/* ============================================================
   RESULT MODEL TAG — Phase 2+ (Screen 4)
   ============================================================ */

.result-model-tag {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-golden),
    border-color var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden);
}

.result-model-tag:hover {
  background: var(--color-surface-2);
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* Clarity badge — live score from generated prompt (0-100) */
.quality-badge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-badge);
  color: var(--color-badge-text);
  line-height: 1;
  cursor: default;
  transition:
    background var(--duration-theme) var(--ease-golden),
    color var(--duration-theme) var(--ease-golden);
}

/* Badge is clickable to open popup */
.quality-badge { cursor: pointer; }

.quality-badge-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  line-height: 1.3;
}

.quality-badge-number {
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Clarity heat-map tiers: poor → low → medium → good → high */
.quality-badge[data-clarity="high"]   { background: #1F9E54; color: #fff; }
.quality-badge[data-clarity="good"]   { background: #3DAD3A; color: #fff; }
.quality-badge[data-clarity="medium"] { background: #C09020; color: #1A1814; }
.quality-badge[data-clarity="low"]    { background: #C85E22; color: #fff; }
.quality-badge[data-clarity="poor"]   { background: #BB3333; color: #fff; }

.context-engineering-panel {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-md);
}

.context-engineering-panel[hidden] { display: none; }

.context-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.context-panel-title,
.context-panel-summary,
.context-block-title {
  margin: 0;
}

.context-panel-title {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text);
}

.context-panel-summary {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.context-readiness-badge {
  min-width: 86px;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset, var(--color-border));
  color: var(--color-text);
  text-align: center;
}

.context-readiness-badge[data-context-tone="thin"] {
  color: #1A1814;
  background: var(--color-warning);
}

.context-readiness-badge[data-context-tone="strong"] {
  color: #fff;
  background: var(--color-success);
}

.context-readiness-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.context-readiness-score {
  display: block;
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.context-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-5);
  padding-top: var(--space-5);
}

.context-block-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.context-slot-list,
.context-manifest-list,
.context-gap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-slot-list,
.context-manifest-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.context-slot-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  min-height: 34px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-offset, transparent);
}

.context-slot-status,
.context-slot-importance {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.context-slot-row[data-status="ready"] .context-slot-status {
  color: var(--color-success);
}

.context-slot-row[data-status="missing"] .context-slot-status {
  color: var(--color-warning);
}

.context-slot-label {
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.context-manifest-row {
  display: grid;
  grid-template-columns: 24px 1fr 42px;
  gap: var(--space-3);
  align-items: start;
  min-height: 42px;
}

.context-manifest-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset, var(--color-border));
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.context-manifest-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.context-manifest-section {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
}

.context-manifest-purpose,
.context-manifest-budget {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.context-manifest-budget {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.context-gap-strip {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.context-gap-strip[hidden] { display: none; }

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

.context-gap-item {
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-warning) 7%, transparent);
}

.context-gap-label,
.context-gap-question {
  display: block;
}

.context-gap-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}

.context-gap-question {
  font-size: var(--text-xs);
  color: var(--color-text);
  line-height: 1.45;
}

/* Result card */
.result-card {
  position: relative;            /* needed for the floating copy icon */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  box-shadow: var(--shadow-lg);
  transition:
    background var(--duration-theme) var(--ease-golden),
    border-color var(--duration-theme) var(--ease-golden);
}

/* Prompt sections */
.prompt-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.prompt-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prompt-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

.prompt-section-tag {
  font-size: clamp(0.6875rem, 1.8vw, 0.75rem);  /* smaller than body — label acts as signpost */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: color var(--duration-theme) var(--ease-golden);
}

/* Placeholder callout — usage instructions inside generated prompts */
.placeholder-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition:
    background var(--duration-theme) var(--ease-golden),
    border-color var(--duration-theme) var(--ease-golden);
}

.placeholder-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-style: normal;
}

[data-theme="dark"] .prompt-section-tag {
  color: var(--color-accent);
}

.prompt-section-body {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
  line-height: 1.65;
  color: var(--color-text-body);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  transition: color var(--duration-theme) var(--ease-golden);
}

.prompt-section-body p {
  margin: 0 0 var(--space-2);
}

.prompt-section-body p:last-child {
  margin-bottom: 0;
}

.prompt-list {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prompt-list li {
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.6;
}

.prompt-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-text-faint);
}

/* Plain text fallback (no tags) */
.prompt-plain {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text-body);
  white-space: pre-wrap;
  word-break: break-word;
  transition: color var(--duration-theme) var(--ease-golden);
}

/* ============================================================
   SIMULATION PREVIEW — Phase 2+ (Screen 4)
   ============================================================ */

.simulation-preview {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    background var(--duration-theme) var(--ease-golden),
    border-color var(--duration-theme) var(--ease-golden);
}

.simulation-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  list-style: none;
  user-select: none;
  transition: background var(--duration-fast) var(--ease-golden);
}

.simulation-summary::-webkit-details-marker {
  display: none;
}

.simulation-summary:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.simulation-summary-icon {
  color: var(--color-accent);
  font-style: normal;
  transition: color var(--duration-theme) var(--ease-golden);
}

.simulation-summary-hint {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-left: auto;
  transition: color var(--duration-theme) var(--ease-golden);
}

.simulation-body {
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.simulation-body p {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  font-style: italic;
  transition: color var(--duration-theme) var(--ease-golden);
}

/* Result action buttons */
.result-actions {
  position: relative;   /* anchor for the edit-menu popup */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.btn-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-body);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-golden),
    border-color var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden);
  white-space: nowrap;
}

.btn-action:hover {
  background: var(--color-surface-2);
  border-color: var(--color-accent);
}

.btn-action.primary {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}

[data-theme="dark"] .btn-action.primary {
  background: var(--color-cta, var(--color-accent));
  color: var(--color-cta-text, var(--color-accent-text));
  border-color: var(--color-cta, var(--color-accent));
}

.btn-action.primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

[data-theme="dark"] .btn-action.primary:hover {
  background: var(--color-cta-hover, var(--color-accent-hover));
  border-color: var(--color-cta-hover, var(--color-accent-hover));
}

/* New Prompt is a btn-action variant — pushed to far right of toolbar */
.btn-action.btn-new-prompt {
  margin-left: auto;
  color: var(--color-text-muted);
  background: transparent;
}

.btn-action.btn-new-prompt:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ============================================================
   EDIT MENU POPUP
   Absolutely positioned above the result-actions toolbar.
   Anchored to the left edge of the toolbar.
   ============================================================ */

.edit-menu {
  /* Layout — flex only applies when NOT hidden (base.css enforces [hidden]) */
  display: flex;
  flex-direction: column;
  gap: 2px;

  /* Position: float above the actions row */
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  z-index: 200;

  /* Appearance */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  width: 220px;
  white-space: nowrap;
}

.edit-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-body);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast) var(--ease-golden);
}

.edit-menu-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* ============================================================
   EDIT TEXTAREA
   ============================================================ */

.edit-textarea {
  width: 100%;
  min-height: 280px;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  color: var(--color-text-body);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.65;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-golden);
}

.edit-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* ============================================================
   PROMPT CARD — INLINE COPY ICON
   Small icon that floats in the top-right corner of the card.
   Appears on hover so it doesn't clutter the reading experience.
   ============================================================ */

.btn-prompt-copy {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;              /* sit above prompt section content */
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--duration-fast) var(--ease-golden),
    border-color var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden);
}

.btn-prompt-copy:hover {
  background: var(--color-surface-2);
  border-color: var(--color-accent);
  color: var(--color-text);
}


/* ============================================================
   RATING WIDGET (thumbs up / down)
   Sits at the bottom of the result card.
   ============================================================ */

/* Phase D — rationale taxonomy chips (revealed after thumbs up/down) */
.rationale-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  justify-content: flex-end;
}
.rationale-label {
  font-size: 0.78rem;
  color: var(--text-secondary, #9ab);
  letter-spacing: 0.02em;
}
.rationale-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rationale-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #9ab);
  font-size: 0.74rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rationale-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #fff);
}
.rationale-chip.selected {
  background: rgba(64, 192, 255, 0.18);
  border-color: rgba(64, 192, 255, 0.5);
  color: #fff;
}

.rating-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* right-align the whole widget */
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.rating-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
  /* no margin-right: auto — keeps label grouped with thumbs on the right */
}

.btn-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--duration-fast) var(--ease-golden),
    border-color var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden);
}

.btn-thumb:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Selected states */
.btn-thumb.selected-up {
  background: color-mix(in srgb, #22c55e 14%, transparent);
  border-color: #22c55e;
  color: #22c55e;
}

.btn-thumb.selected-down {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  border-color: #ef4444;
  color: #ef4444;
}

/* ============================================================
   TOAST
   ============================================================ */

.toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 200ms var(--ease-golden),
    transform 200ms var(--ease-golden);
  z-index: 200;
  white-space: nowrap;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   ERROR STATE
   ============================================================ */

.error-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-error);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  max-width: 480px;
  width: 100%;
}

.error-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-error);
  margin-bottom: var(--space-2);
}

.error-body {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.5;
}

/* ============================================================
   RATE LIMIT BANNER (inside result)
   ============================================================ */

.result-rate-limit {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  transition: color var(--duration-theme) var(--ease-golden);
}

/* ============================================================
   ICON INLINE SIZING
   ============================================================ */

.icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   CLARITY BREAKDOWN — Tier 1 (t1/clarity-subscores)
   Five-row subscore list rendered below the result card.
   Uses only existing tokens; adds no new colors.
   ============================================================ */

.clarity-breakdown {
  width: 100%;
  max-width: 720px;
  margin: var(--space-6) auto 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.clarity-breakdown[hidden] { display: none; }

.clarity-breakdown-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-4);
}

.clarity-breakdown-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.clarity-row {
  display: grid;
  grid-template-columns: minmax(120px, 140px) 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "name bar   action"
    "exp  exp   action";
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: center;
}

.clarity-row-name {
  grid-area: name;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-transform: capitalize;
}

.clarity-row-bar {
  grid-area: bar;
  height: 8px;
  background: var(--color-surface-offset, var(--color-border));
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.clarity-row-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width var(--duration-base) var(--ease-golden);
}

.clarity-row-score {
  /* Score number sits inside the bar's right edge over the accent fill.
     White-on-gold gives WCAG AA on both light and dark themes; a soft
     shadow keeps it legible if the bar is partially filled and the number
     overhangs the unfilled track. */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.clarity-row-explanation {
  grid-area: exp;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.clarity-row-fix {
  grid-area: action;
  align-self: start;
  padding: var(--space-2) var(--space-3);
  min-height: 32px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-golden),
    border-color var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden);
}

.clarity-row-fix:hover:not([disabled]) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.clarity-row-fix[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── "Applied" indicator on the most-recently-fixed row ──────────────
   Stays visible until the user fixes a different facet or starts a
   new prompt — no auto-clear timer, so the signal is durable. */
.clarity-row.is-just-fixed {
  /* Subtle accent left strip plus a faint background tint. Positioned via
     box-shadow inset so it doesn't disturb the grid layout. */
  box-shadow: inset 3px 0 0 0 var(--color-success);
  padding-left: var(--space-3);
  border-radius: var(--radius-sm);
}

.clarity-row-applied {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-2);
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  border-radius: var(--radius-full);
  vertical-align: middle;
  /* Brief pulse to draw the eye on the first paint after a refetch.
     Single iteration; no looping animation that would steal attention later. */
  animation: clarity-applied-pulse 600ms var(--ease-golden) 1;
}
.clarity-row-applied.is-negative {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.clarity-row-applied.is-flat {
  color: var(--color-text-muted);
  background: var(--color-surface-offset, var(--color-border));
  border-color: var(--color-border);
}
.clarity-row-applied-check { font-size: 11px; }
.clarity-row-applied-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@keyframes clarity-applied-pulse {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .clarity-row-applied { animation: none; }
}

@media (max-width: 640px) {
  .clarity-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   action"
      "bar    bar"
      "exp    exp";
  }
  .clarity-row-fix { align-self: center; }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0.6rem 1.5rem;
  pointer-events: none;
  transition: opacity 200ms var(--ease-golden);
}

/* Hide the privacy policy link while the user is on the creation or
   questions screen — those screens scroll on small phones and the fixed
   footer would otherwise overlap the input/buttons/chips. The link is
   still visible on the result screen (which also has its own scrollable
   container) and on the dedicated /privacy page. */
body:has(.screen-creation.active) .site-footer,
body:has(.screen-questions.active) .site-footer {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.site-footer-link {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: none;
  pointer-events: auto;
  transition: color var(--duration-theme) var(--ease-golden);
}

.site-footer-link:hover {
  color: var(--color-text-muted);
}

/* ============================================================
   FOLD DEMO — Tier 1 (t1/fold-demo)
   30-second looping before/after. Fixed heights to prevent CLS.
   Uses only existing tokens.
   ============================================================ */

.fold-demo {
  width: 100%;
  max-width: var(--content-wide, 1080px);
  margin: 0 auto var(--space-8);
  /* Reserve the full animation height up-front so text rendering during
     JS start-up never triggers a layout shift. 360px desktop, 560px mobile. */
  height: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  contain: layout style;
}

.fold-demo-panels {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--space-4);
  min-height: 0;
}

.fold-demo-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  overflow: hidden;
}

.fold-demo-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fold-demo-panel-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.fold-demo-panel-tag--accent {
  color: var(--color-accent);
  border-color: color-mix(in oklch, var(--color-accent) 40%, transparent);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 280ms var(--ease-golden), transform 280ms var(--ease-golden);
}
.fold-demo-panel-tag--accent.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fold-demo-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-body);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  min-height: 0;
  flex: 0 1 auto;
}

/* Before panel fades to 60% once "Optimized" is in the spotlight. */
.fold-demo-panel--before {
  transition: opacity 400ms var(--ease-golden);
}
.fold-demo.is-after-revealed .fold-demo-panel--before {
  opacity: 0.6;
}

/* After panel body: prompt on top, scoring below. */
.fold-demo-after-body {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-3);
  min-height: 0;
}

.fold-demo-line {
  display: block;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 260ms var(--ease-golden), transform 260ms var(--ease-golden);
}
.fold-demo-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scoring widget ─────────────────────────────────────────────────── */
.fold-demo-scoring {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-divider, var(--color-border));
}

.fold-demo-dial {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.fold-demo-dial-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.fold-demo-dial-track,
.fold-demo-dial-fill {
  fill: none;
  stroke-width: 6;
}
.fold-demo-dial-track {
  stroke: var(--color-surface-offset, var(--color-border));
}
.fold-demo-dial-fill {
  stroke: var(--color-accent);
  stroke-linecap: round;
  /* stroke-dasharray / dashoffset set by JS */
  transition: stroke-dashoffset 120ms linear;
}
.fold-demo-dial-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.fold-demo-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}

.fold-demo-bar {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: var(--space-2);
}
.fold-demo-bar-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-transform: capitalize;
}
.fold-demo-bar-track {
  height: 6px;
  background: var(--color-surface-offset, var(--color-border));
  border-radius: var(--radius-full);
  overflow: hidden;
}
.fold-demo-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

/* ── Footer controls ────────────────────────────────────────────────── */
.fold-demo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}

.fold-demo-pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 28px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-golden),
    border-color var(--duration-fast) var(--ease-golden),
    color var(--duration-fast) var(--ease-golden);
}
.fold-demo-pause:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.fold-demo-pause:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.fold-demo-pause-icon { fill: currentColor; flex-shrink: 0; }

/* Pause-button visual stays as two rects in both states — the label text
   ("Pause" / "Play") and aria-pressed carry the state to users and AT alike.
   Keeps the markup and CSS small without compromising clarity. */

.fold-demo-try {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-text-faint);
  padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-golden), border-color var(--duration-fast) var(--ease-golden);
}
.fold-demo-try:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.fold-demo-try:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-bottom-color: transparent;
}

/* ── Reduced-motion fallback ─────────────────────────────────────────
   Static side-by-side. The JS also short-circuits and paints the final
   frame; these rules make sure the static layout holds up without any
   JS at all (progressive enhancement). */
@media (prefers-reduced-motion: reduce) {
  .fold-demo-panel-tag--accent,
  .fold-demo-line,
  .fold-demo-panel--before {
    transition: none;
  }
  .fold-demo-line { opacity: 1; transform: none; }
  .fold-demo-panel-tag--accent { opacity: 1; transform: none; }
  .fold-demo-dial-fill { transition: none; }
  .fold-demo-pause { display: none; }
}

.fold-demo.is-reduced .fold-demo-pause { display: none; }

/* ── Mobile stack ────────────────────────────────────────────────────
   Below 768px the panels stack; reserve a taller fixed container so
   CLS stays zero. */
@media (max-width: 768px) {
  .fold-demo {
    height: 560px;
    max-width: 100%;
    margin-bottom: var(--space-6);
  }
  .fold-demo-panels {
    grid-template-columns: 1fr;
    grid-template-rows: 180px 1fr;
  }
  .fold-demo-text { font-size: 11.5px; }
  .fold-demo-bars { grid-template-columns: 1fr; }
  .fold-demo-bar  { grid-template-columns: 88px 1fr; }
}

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

@media (max-width: 768px) {
  .app-header {
    height: 44px;
    padding: env(safe-area-inset-top, 0px) var(--space-4) 0;
    box-sizing: content-box;
  }

  .screen-creation,
  .screen-questions,
  .screen-result {
    padding-top: calc(var(--space-20) + env(safe-area-inset-top, 0px));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-12);
  }

  /* Extra bottom clearance on result screen for home indicator */
  .screen-result {
    padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  }

  .creation-input {
    font-size: 1rem; /* prevent iOS zoom */
  }

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

  .context-advisor-mini {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .context-panel-head,
  .context-panel-grid {
    grid-template-columns: 1fr;
  }

  .context-panel-head {
    display: grid;
  }

  .context-readiness-badge {
    width: 100%;
  }

  .context-gap-list {
    grid-template-columns: 1fr;
  }

  .context-slot-row {
    grid-template-columns: 70px 1fr;
  }

  .context-slot-importance {
    grid-column: 2;
  }

  /* 2×2 grid on narrow screens — higher specificity to guarantee override */
  .screen-result .result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    align-items: stretch;
  }

  .screen-result .result-actions .btn-action {
    flex: unset;
    width: 100%;
    height: auto;
    min-height: 44px;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    white-space: normal;
    overflow: hidden;
    font-size: 0.75rem;
  }

  /* Remove desktop push-right so New Prompt fits in grid row 2 col 2 */
  .screen-result .result-actions .btn-action.btn-new-prompt {
    margin-left: 0;
  }

  .model-selector {
    flex-wrap: wrap;
  }

  /* Rate limit line clears home indicator */
  .rate-limit-status {
    bottom: calc(var(--space-5) + 10px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  .result-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .questions-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ════════════════════════════════════════════════
   INPUT GUARDIAN OVERLAY
   ════════════════════════════════════════════════ */

.guardian-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: guardian-fade-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.guardian-overlay[hidden] {
  display: none;
}

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

.guardian-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  animation: guardian-slide-up 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes guardian-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.guardian-msg {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}

.guardian-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Primary — "Got it, I'll rephrase" */
.guardian-btn--primary {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease, transform 0.1s ease;
  min-height: 44px;
}

/* Ghost — "Submit anyway" */
.guardian-btn--ghost {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  transition: color 0.15s ease, background 0.15s ease;
  min-height: 44px;
}

/* Day mode */
[data-theme="light"] .guardian-btn--primary {
  background: var(--color-accent);
  color: #1a1108;
}
[data-theme="light"] .guardian-btn--primary:hover {
  background: color-mix(in srgb, var(--color-accent) 85%, #000 15%);
  transform: translateY(-1px);
}
[data-theme="light"] .guardian-btn--ghost {
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
[data-theme="light"] .guardian-btn--ghost:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle);
}

/* Night mode */
[data-theme="dark"] .guardian-card {
  background: var(--color-surface);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .guardian-btn--primary {
  background: var(--color-cta);
  color: var(--color-bg);
}
[data-theme="dark"] .guardian-btn--primary:hover {
  background: color-mix(in srgb, var(--color-cta) 85%, #fff 15%);
  transform: translateY(-1px);
}
[data-theme="dark"] .guardian-btn--ghost {
  color: var(--color-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .guardian-btn--ghost:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .guardian-overlay,
  .guardian-card {
    animation: none;
  }
}

/* GO button throttled state */
.btn-go[data-throttled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}