/* ============================================================================
   MIRA design system — ported from production (origin/main, 2026-10-09):
   apps/web/src/styles/globals.css (@theme tokens, focus ring, scrollbar),
   components/ui/{button,card,input,tag}.tsx and the /alpha atoms + page recipes.
   Tailwind utilities are flattened into plain CSS with the SAME values, so Cinema
   (vanilla HTML) renders identically to MIRA. Rules carried over verbatim:
     - Dark-first. NEVER pure #000 — minimum #121212.
     - Borders are the depth mechanism. No box-shadows, no glassmorphism (nav exception).
     - Inter for prose; JetBrains Mono for chrome / numbers / metadata / tags.
     - No emojis. 3-letter uppercase mono tags instead.
     - Every error says WHAT failed + WHY + WHAT TO DO.
   Loaded AFTER the page stylesheet so these recipes win on equal specificity.
   ============================================================================ */
@import url('./fonts/fonts.css');

:root {
  color-scheme: dark;
  /* --- MIRA brand --- */
  --color-mira: #f97316; --color-mira-light: #fb923c; --color-mira-dark: #ea580c;
  /* --- Booketeer (gold + serif, Booketeer-flagged surfaces only) --- */
  --color-booketeer: #c8a96a; --color-booketeer-light: #d4bb88; --color-booketeer-dark: #9a7f4d;
  --color-booketeer-surface: rgba(200, 169, 106, 0.08); --color-booketeer-border: rgba(200, 169, 106, 0.25);
  --font-booketeer: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  /* --- IAA CTA (amber) --- */
  --color-cta: #fbbf24; --color-cta-light: #fcd34d; --color-cta-text: #000000;
  /* --- Dark depth stack (MD3) --- */
  --color-bg-void: #121212; --color-bg-base: #121212; --color-bg-card: #1a1a1a; --color-bg-elevated: #242424;
  --color-bg-deeper: #0a0a0a; --color-bg-deepest: #2e2e2e; --color-bg-surface: rgba(84, 32, 15, 0.15);
  /* --- Text hierarchy --- */
  --color-text-primary: #ffffff; --color-text-secondary: #e5e5e5; --color-text-muted: #b5b5b5; --color-text-dim: #8a8a8a;
  /* --- Borders (whisper-thin luminous) --- */
  --color-border-whisper: rgba(255, 255, 255, 0.06); --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-border-active: rgba(255, 255, 255, 0.15); --color-border-mira: rgba(249, 115, 22, 0.2);
  /* --- States --- */
  --color-state-success: #86efac; --color-state-error: #fda4af; --color-state-warning: #f59e0b; --color-state-info: #60a5fa;
  /* --- Layout --- */
  --radius-card: 14px; --radius-button: 10px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', monospace;
  --mira-glow: rgba(249, 115, 22, 0.06); --mira-border: rgba(249, 115, 22, 0.2); --mira-border-light: rgba(249, 115, 22, 0.35); --mira-surface: rgba(249, 115, 22, 0.08);
  /* Cinema's legacy aliases now resolve to the production tokens. */
  --bg: var(--color-bg-void); --card: var(--color-bg-card); --raised: var(--color-bg-elevated); --panel: var(--color-bg-card);
  --ink: var(--color-text-primary); --text: var(--color-text-primary); --muted: var(--color-text-muted);
  --border: var(--color-border-whisper); --accent: var(--color-mira); --accent-light: var(--color-mira-light);
  --sans: var(--font-sans); --mono: var(--font-mono);
}

body { background: var(--color-bg-void); color: var(--color-text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Global keyboard focus ring (globals.css: WCAG 2.2 AAA visibility) */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-mira); outline-offset: 2px; border-radius: 4px;
}
/* Thin dark scrollbar that lights up MIRA-orange on hover (globals.css, Sebastian 2026-05-13) */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.10) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: rgba(249, 115, 22, 0.45); }

/* ---------- Topbar + Lockup (alpha/_components/atoms.tsx) ---------- */
.mira-topbar { position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(18, 18, 18, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-whisper); }
.mira-topbar-left, .mira-topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mira-lockup { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.mira-lockup:hover { opacity: 0.9; }
.mira-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.05em; color: #fff;
  background: var(--color-mira); box-shadow: 0 0 24px -4px rgba(249, 115, 22, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.mira-lockup-divider { display: inline-block; width: 1px; height: 16px; background: var(--color-border-whisper); }
.mira-lockup img { height: 24px; width: 24px; object-fit: contain; }
.mira-lockup-caption { margin-left: 6px; font: 700 9px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-dim); white-space: nowrap; }
/* Quick-nav chip beside the logo */
.mira-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 9999px; border: 1px solid var(--color-border-whisper); background: var(--color-bg-card);
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-secondary); cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; text-decoration: none; }
.mira-chip:hover { background: var(--color-bg-elevated); border-color: var(--color-border-hover); color: var(--color-text-primary); }
.mira-chip[aria-current="page"], .mira-chip[aria-pressed="true"] { border-color: var(--color-border-mira); color: var(--color-mira-light); }
/* Mono text links in the top bar (ANALYTICS / BUY + / Sign in) */
.mira-toplink { background: none; border: 0; padding: 0; min-height: 0; font: 700 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-secondary); cursor: pointer; transition: color .15s; text-decoration: none; }
.mira-toplink:hover { color: var(--color-mira-light); background: none; border: 0; }
.mira-toplink.accent { color: var(--color-mira-light); } .mira-toplink.accent:hover { color: var(--color-mira); }
.mira-account { font: 500 11px/1.2 var(--font-mono); color: var(--color-text-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Typography atoms ---------- */
.eyebrow, .mira-eyebrow { font: 700 10px/1.5 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-dim); margin: 0 0 12px; }
.eyebrow.mira, .mira-eyebrow.mira { color: var(--color-mira-light); } .eyebrow.success { color: var(--color-state-success); } .eyebrow.gold { color: var(--color-cta-light); }
h1 { font-weight: 700; letter-spacing: -0.03em; } h2 { font-weight: 600; letter-spacing: -0.02em; }
.muted { color: var(--color-text-muted); }
.mira-mono, .submission-reference, .brief-table th, .steps, .video-journey, .milestones span, .save-status, .sample-label, .footnote code { font-family: var(--font-mono); }
.submission-reference { font-size: 11px; color: var(--color-text-dim); }

/* ---------- Buttons (alpha recipe: h-10 px-5 rounded-lg; ui/button.tsx disabled/select rules) ---------- */
button, .mira-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; height: auto; padding: 0 20px; border-radius: 8px; font: 500 13px/1 var(--font-sans);
  border: 1px solid var(--color-border-whisper); background: transparent; color: var(--color-text-primary); cursor: pointer; user-select: none; transition: background-color .15s, border-color .15s, color .15s; }
button:hover, .mira-button:hover { border-color: rgba(249, 115, 22, 0.4); background: transparent; }
button.primary, .mira-button.primary, .primary { background: var(--color-mira); border-color: var(--color-mira); color: var(--color-cta-text); font-weight: 700; }
button.primary:hover, .mira-button.primary:hover, .primary:hover { background: var(--color-mira-light); border-color: var(--color-mira-light); }
button.ghost { border-color: transparent; color: var(--color-text-secondary); } button.ghost:hover { background: var(--color-bg-elevated); color: var(--color-text-primary); border-color: transparent; }
button.destructive { background: var(--color-state-error); border-color: var(--color-state-error); color: #fff; } button.destructive:hover { opacity: .9; }
button.secondary { background: var(--color-bg-elevated); border-color: var(--color-border-whisper); } button.secondary:hover { border-color: var(--color-border-hover); }
button:disabled, .mira-button:disabled { opacity: 0.5; cursor: not-allowed; }
button:disabled:hover { border-color: var(--color-border-whisper); background: transparent; } button.primary:disabled:hover { background: var(--color-mira); border-color: var(--color-mira); }
button.sm { min-height: 32px; padding: 0 12px; font-size: 12px; } button.lg { min-height: 48px; padding: 0 28px; font-size: 15px; }
.brief-table .brief-open { min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--color-mira-light); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Tags / pills ---------- */
.mira-tag { display: inline-flex; align-items: center; border-radius: 4px; border: 1px solid var(--color-border-whisper); padding: 2px 6px; font: 700 9px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-dim); }
.mira-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; border: 1px solid var(--color-border-mira); background: rgba(249, 115, 22, 0.05); padding: 4px 10px; font: 500 10.5px/1.4 var(--font-mono); color: var(--color-mira-light); }
.mira-pill.success { border-color: rgba(134, 239, 172, 0.3); background: rgba(134, 239, 172, 0.06); color: var(--color-state-success); }
.mira-pill.warning { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.1); color: var(--color-state-warning); }
.mira-pill.muted { border-color: var(--color-border-whisper); background: var(--color-bg-card); color: var(--color-text-muted); }
.mira-pill.booketeer { border-color: var(--color-booketeer-border); background: var(--color-booketeer-surface); color: var(--color-booketeer-light); }
.mira-dot { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: var(--color-mira); }
.mira-dot.pulse { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); animation: mira-pulse 1.6s infinite; }
@keyframes mira-pulse { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); } 70% { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
.plan-badge { border-radius: 9999px; border: 1px solid var(--color-border-mira); background: rgba(249, 115, 22, 0.05); color: var(--color-mira-light); font: 500 10.5px/1.4 var(--font-mono); padding: 4px 10px; }

/* ---------- Cards / panels (ui/card.tsx + alpha page cards) ---------- */
.panel, .mira-card, .offer, .recovery, .brief-table-scroll, .form-errors { background: var(--color-bg-card); border: 1px solid var(--color-border-whisper); border-radius: var(--radius-card); }
.panel, .mira-card { padding: 28px; transition: border-color .2s; } .panel:hover, .mira-card:hover { border-color: var(--color-border-hover); }
.mira-card.compact { padding: 16px 20px; border-radius: 12px; }
.mira-empty { background: var(--color-bg-card); border: 1px dashed var(--color-border-whisper); border-radius: 16px; padding: 32px; text-align: center; color: var(--color-text-muted); }
.sample-library article { border: 1px dashed var(--color-border-whisper); border-radius: 16px; }

/* ---------- Notices (alpha/_components/data-notice.tsx: WHAT + WHY + WHAT TO DO) ---------- */
.mira-notice { border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.06); padding: 14px 16px; margin: 16px 0; }
.mira-notice .eyebrow { color: #fbbf24; margin-bottom: 8px; }
.mira-notice p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--color-text-primary); max-width: 70ch; } .mira-notice p + p { color: var(--color-text-secondary); font-size: 13px; }
.mira-notice.error { border-color: rgba(253, 164, 175, 0.35); background: rgba(253, 164, 175, 0.06); } .mira-notice.error .eyebrow { color: var(--color-state-error); }
.mira-notice.success { border-color: rgba(134, 239, 172, 0.35); background: rgba(134, 239, 172, 0.06); } .mira-notice.success .eyebrow { color: var(--color-state-success); }
.mira-notice.info { border-color: rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.06); } .mira-notice.info .eyebrow { color: var(--color-state-info); }
.form-errors { border-color: rgba(253, 164, 175, 0.35); background: rgba(253, 164, 175, 0.06); color: var(--color-text-primary); border-radius: 12px; }
.form-errors h2 { color: var(--color-state-error); font: 700 10px/1.5 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; }
#workflow-error, #workflow-poll-notice, .source-row[data-source-status="failed"] span, .source-row[data-source-status="uncertain"] span { color: var(--color-state-warning); }

/* ---------- Inputs (ui/input.tsx) ---------- */
label { display: block; font: 500 14px/1.4 var(--font-sans); color: var(--color-text-muted); margin: 20px 0 6px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { width: 100%; background: var(--color-bg-elevated); border: 1px solid var(--color-border-whisper); border-radius: var(--radius-button); padding: 10px 16px;
  color: var(--color-text-primary); font: 400 15px/1.5 var(--font-sans); transition: border-color .15s; }
input::placeholder, textarea::placeholder { color: var(--color-text-dim); }
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--color-border-hover); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-state-error); }
.field-help { color: var(--color-text-dim); font-size: 12px; }
input[type="checkbox"] { accent-color: var(--color-mira); }

/* ---------- Tables (alpha library rows) ---------- */
.brief-table th { font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-text-dim); border-bottom: 1px solid var(--color-border-whisper); }
.brief-table td { border-bottom: 1px solid var(--color-border-whisper); } .brief-table tbody tr:hover { background: var(--color-bg-elevated); }

/* ---------- Journey stepper + milestones ---------- */
.milestones li { border-bottom: 1px solid var(--color-border-whisper); }
.milestones span { font: 700 10px/1.6 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-dim); }
.milestones [aria-current] span { color: var(--color-mira-light); }
.milestones [aria-current] strong::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: var(--color-mira); margin-right: 8px; vertical-align: 2px; box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); animation: mira-pulse 1.6s infinite; }
.video-journey, .steps { font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-dim); }
.video-journey [aria-current], .steps [aria-current] { color: var(--color-mira-light); }
.video-journey span:not(:last-child)::after { color: var(--color-text-dim); }
.technical-details summary, .submitted-summary summary { font: 700 10px/1.6 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-dim); min-height: 32px; padding: 6px 0; cursor: pointer; }
.technical-details summary:hover, .submitted-summary summary:hover { color: var(--color-mira-light); }

/* ---------- Local-pilot banner (truthful disclosure stays, in MIRA chrome) ---------- */
.preview { background: var(--color-bg-deeper); border-bottom: 1px solid var(--color-border-whisper); color: var(--color-text-dim); font: 500 11px/1.6 var(--font-sans); padding: 8px 20px; display: flex; gap: 16px; align-items: center; }
.preview strong { font: 700 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-mira-light); }

/* ---------- Hairline footer (atoms.tsx HairlineFooter) ---------- */
.mira-hairline-footer, footer.hairline { border-top: 1px solid var(--color-border-whisper); padding: 24px 0; text-align: center; font: 700 10px/1.4 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-dim); }

/* ---------- Booketeer-flagged surface (gold + serif, per Sebastian 2026-04-30) ---------- */
.booketeer-surface { border: 1px solid var(--color-booketeer-border); background: var(--color-booketeer-surface); border-radius: var(--radius-card); padding: 20px 24px; }
.booketeer-surface h2, .booketeer-surface h3 { font-family: var(--font-booketeer); font-weight: 600; letter-spacing: 0; color: var(--color-booketeer-light); }
.booketeer-surface .eyebrow { color: var(--color-booketeer); }
button.booketeer { border-color: var(--color-booketeer-border); color: var(--color-booketeer-light); background: transparent; } button.booketeer:hover { background: var(--color-booketeer-surface); border-color: var(--color-booketeer); }
button.booketeer.primary { background: var(--color-booketeer); border-color: var(--color-booketeer); color: #121212; } button.booketeer.primary:hover { background: var(--color-booketeer-light); border-color: var(--color-booketeer-light); }

@media (prefers-reduced-motion: reduce) { .mira-dot.pulse, .milestones [aria-current] strong::before { animation: none; } }


/* ============================================================================
   AppShell (production /alpha: alpha/_components/app-shell.tsx, 2026-10-09)
   Grid md:grid-cols-[232px_1fr]; sidebar sticky h-screen border-r whisper bg-bg-deeper;
   NavItem h-10 rounded-[10px] mono 11px bold uppercase tracking .14em; active = text-mira-light
   + ink (rounded-[10px] border-border-mira bg-mira/10 + 3px accent bar); MiniTag NEW = bg-mira
   text-#180a02 mono 8px; topbar glass-thin h-[52px] border-b whisper; CTA = amber (bg-cta, black text).
   ============================================================================ */
:root { --glass-thin-fill: rgba(18, 18, 18, 0.66); --glass-thin-blur: 14px; --glass-thin-saturate: 160%; --glass-thin-light: rgba(255, 255, 255, 0.14); }
.mira-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.mira-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--color-border-whisper); background: var(--color-bg-deeper); z-index: 10; }
.mira-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; }
.mira-sidebar-nav { position: relative; flex: 1; overflow-y: auto; padding: 8px 12px; }
.mira-nav-section { padding: 14px 10px 8px; font: 700 9px/1.4 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-dim); }
.mira-nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; text-align: left;
  font: 700 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); cursor: pointer; text-decoration: none; min-height: 40px; transition: background-color .15s, color .15s, transform .1s; }
.mira-nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-text-primary); border-color: transparent; }
.mira-nav-item:active { transform: scale(0.97); }
.mira-nav-item svg { width: 17px; height: 17px; flex: none; color: var(--color-text-dim); transition: color .15s; } .mira-nav-item:hover svg { color: var(--color-mira-light); }
.mira-nav-item span.label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mira-nav-item[aria-current="page"] { color: var(--color-mira-light); background: rgba(249, 115, 22, 0.10); border-color: var(--color-border-mira); }
.mira-nav-item[aria-current="page"] svg { color: var(--color-mira-light); }
.mira-nav-item[aria-current="page"]::before { content: ''; position: absolute; left: -13px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-mira); }
.mira-nav-item.danger:hover { background: rgba(253, 164, 175, 0.10); color: var(--color-state-error); } .mira-nav-item.danger:hover svg { color: var(--color-state-error); }
.mira-nav-item:disabled { opacity: 0.5; cursor: not-allowed; } .mira-nav-item:disabled:hover { background: transparent; color: var(--color-text-muted); }
.mira-minitag { flex: none; border-radius: 5px; padding: 1px 6px; font: 800 8px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; background: var(--color-mira); color: #180a02; }
.mira-minitag.pro { background: var(--color-cta); color: var(--color-cta-text); }
.mira-sidebar-footer { border-top: 1px solid var(--color-border-whisper); padding: 12px; }
.mira-account-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: inherit; text-align: left; cursor: default; }
.mira-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 9px; border: 1px solid var(--color-border-whisper); background: var(--color-bg-elevated); font: 800 12px/1 var(--font-mono); color: var(--color-text-secondary); }
.mira-account-card .name { display: block; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mira-account-card .mail { display: block; margin-top: 1px; font: 400 11px/1.3 var(--font-sans); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mira-main { min-width: 0; display: flex; flex-direction: column; }
.mira-topbar { position: sticky; top: 0; z-index: 5; height: 52px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--glass-thin-fill); -webkit-backdrop-filter: blur(var(--glass-thin-blur)) saturate(var(--glass-thin-saturate)); backdrop-filter: blur(var(--glass-thin-blur)) saturate(var(--glass-thin-saturate)); border-bottom: 1px solid var(--color-border-whisper); }
@media (prefers-reduced-transparency: reduce) { .mira-topbar { background: var(--color-bg-void); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.mira-page-title { font: 700 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-primary); }
.mira-cta { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--color-cta); color: var(--color-cta-text); font: 700 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background-color .15s, transform .15s; min-height: 36px; }
.mira-cta:hover { background: var(--color-cta-light); transform: translateY(-2px); border: 0; }
.mira-ghost-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--color-border-whisper); background: transparent; font: 700 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-secondary); min-height: 32px; }
.mira-ghost-pill:hover { border-color: var(--color-border-hover); background: var(--color-bg-card); color: var(--color-text-primary); }
/* Primary = IAA CTA amber (ui/button.tsx primary; the /alpha "+ POST" and "Sign in →" CTAs). Orange stays for marks, eyebrows, active ink. */
button.primary, .mira-button.primary, .primary { background: var(--color-cta); border-color: var(--color-cta); color: var(--color-cta-text); font-weight: 700; }
button.primary:hover, .mira-button.primary:hover, .primary:hover { background: var(--color-cta-light); border-color: var(--color-cta-light); }
button.primary:disabled:hover { background: var(--color-cta); border-color: var(--color-cta); }
.mira-main main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 32px 28px 72px; }
.mira-main .preview { margin: 0; }
@media (max-width: 767px) { .mira-shell { grid-template-columns: 1fr; } .mira-sidebar { display: none; } .mira-topbar { padding: 0 16px; } .mira-main main { padding: 20px 16px 56px; } }

/* ---------- Job conversation (author + team) ---------- */
.thread-messages { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; max-height: 48vh; overflow-y: auto; overscroll-behavior: contain; }
.thread-message { border: 1px solid var(--color-border-whisper); border-radius: 12px; padding: 12px 14px; background: var(--color-bg-elevated); }
.thread-message.mine { background: rgba(249, 115, 22, 0.05); border-color: var(--color-border-mira); }
.thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.thread-head .mira-tag.team { color: var(--color-mira-light); border-color: var(--color-border-mira); }
.thread-actor { font: 500 11px/1.4 var(--font-mono); color: var(--color-text-dim); }
.thread-time { font: 400 10px/1.4 var(--font-mono); color: var(--color-text-dim); margin-left: auto; }
.thread-message p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-message button.sm { margin-top: 10px; }
#thread-mode { margin: 12px 0 0; } #thread-mode button { margin-left: 8px; }
#thread-form textarea { min-height: 84px; resize: vertical; }