/* Yazzer — all-white design ported from the prototype: navy text matching
   the wordmark, hairline gray structure, the logo's orange as the primary
   accent, and a soft blue only in the user bubbles. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f6f7f9;
  --surface-3: #eceef1;
  --line: #e5e8ec;
  --line-strong: #d3d9df;
  --text: #16222e;
  --muted: #5b6875;
  --muted-2: #93a0ad;
  --accent: #f69a14;
  --accent-strong: #e08a05;
  --accent-soft: #fdf0dc;
  --user-bubble: #2563eb;
  --error: #dc2626;
  --head-bg: rgba(255, 255, 255, 0.78);
  --chip-bg: rgba(255, 255, 255, 0.8);
  --error-bg: #fef2f2;
  --error-line: #fecaca;
  --pill-free-bg: #e5f6ec;
  --pill-free-text: #15803d;
  --link: #2563eb;
  --radius: 14px;
  --shadow-composer: 0 10px 30px rgba(22, 34, 46, 0.08), 0 2px 8px rgba(22, 34, 46, 0.05);
  --shadow-card: 0 14px 40px rgba(22, 34, 46, 0.08);
  --glow: rgba(246, 154, 20, 0.08);
}

/* Dark theme — the same variables, re-lit. The brand orange and the
   user-bubble blue carry over unchanged; everything else drops to a
   near-black blue-gray family with light text (body text ≈13:1 on
   --bg, muted ≈9:1, muted-2 ≈6:1 — all ≥4.5:1). The attribute is
   resolved by the inline script in index.html (saved yz_theme
   preference, else the system setting) and kept in sync by app.js. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e141b;
  --panel: #16202b;
  --panel-2: #1b2836;
  --surface-3: #243242;
  --line: #273646;
  --line-strong: #3a4c60;
  --text: #e9eff5;
  --muted: #a9b8c6;
  --muted-2: #8296a8;
  --accent-soft: rgba(246, 154, 20, 0.16);
  --error: #f87171;
  --head-bg: rgba(14, 20, 27, 0.85);
  --chip-bg: rgba(22, 32, 43, 0.85);
  --error-bg: rgba(220, 38, 38, 0.13);
  --error-line: rgba(248, 113, 113, 0.45);
  --pill-free-bg: rgba(34, 197, 94, 0.16);
  --pill-free-text: #4ade80;
  --link: #8ab4ff;
  --shadow-composer: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.5);
  --glow: rgba(246, 154, 20, 0.1);
}

* { box-sizing: border-box; }
/* Vertical scrolling only: overflow-x: clip on the page (clip, not
   hidden, so fixed/sticky chrome keeps working) makes horizontal
   sway impossible even if some child still measures a hair wide. */
html, body { height: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-state, .msg { animation: none !important; }
}

/* ---------- brand ---------- */
.brand { text-align: center; margin-bottom: 22px; }
/* The logo art is dark navy on white and the app is all white — it sits
   natively on the background: no plate, card, border, or shadow. */
.brand-logo {
  display: block;
  width: 210px;
  max-width: 72%;
  height: auto;
  margin: 0 auto;
}
.brand-logo.small { width: 118px; margin: 0; }
.brand-tag {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
}
.brand-tag.small { font-size: 11px; margin-top: 5px; }

/* ---------- buttons ---------- */
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border: 0;
  border-radius: var(--radius);
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 8px 20px rgba(246, 154, 20, 0.30);
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.btn-ghost {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  min-height: 36px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.btn-ghost:hover { color: var(--text); border-color: var(--line-strong); }

.error { color: var(--error); font-size: 14px; margin: 10px 0 0; }

/* ---------- auth ---------- */
.auth-wrap {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(600px 280px at 50% -80px, var(--glow), transparent 70%) no-repeat, var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
}
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  background: var(--panel-2);
  border-radius: 999px;
  padding: 4px;
}
.auth-tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: color 0.15s ease, background 0.15s ease;
}
.auth-tab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(22, 34, 46, 0.12); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.auth-form input {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 11px 12px;
  font-size: 16px;
  min-height: 44px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(246, 154, 20, 0.15); }
.auth-note, .auth-foot { color: var(--muted); font-size: 13px; text-align: center; margin: 4px 0 0; }
.auth-foot { margin-top: 20px; line-height: 1.5; }

/* ---------- app layout ---------- */
.app { display: flex; height: 100vh; height: 100dvh; }

.sidebar {
  width: 288px;
  flex: 0 0 288px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 14px;
}
.sidebar-brand { text-align: left; padding: 0 4px; }
#new-chat-btn { border-radius: 16px; width: 100%; }
.conv-list-wrap { flex: 1; overflow-y: auto; min-height: 0; }
.conv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.conv-item {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item:hover { background: var(--panel-2); color: var(--text); }
.conv-item.active { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }

.usage-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: var(--panel-2);
}
.usage-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.usage-numbers { font-size: 20px; font-weight: 700; margin-top: 6px; }
.usage-of { color: var(--muted); font-size: 13px; font-weight: 400; }
.usage-bar { height: 6px; background: var(--surface-3); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.usage-bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.free-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 14px;
  cursor: pointer;
  min-height: 32px;
}
.usage-note { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 8px 0 0; }

.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 46px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: var(--line-strong);
  border-radius: 26px;
  transition: background 0.2s ease;
}
.slider::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(22, 34, 46, 0.25);
  transition: transform 0.2s ease;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }

.sidebar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.user-email { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: radial-gradient(600px 280px at 50% -80px, var(--glow), transparent 70%) no-repeat, var(--bg);
}
.main-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--head-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Empty-state header (mock rule): the logo sits centered and the
   conversation title hides; in a conversation the title comes back
   and the logo hides. The :active override keeps the press scale
   from breaking the centering transform. */
.header-logo { display: none; }
body.showing-empty .header-logo { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); }
body.showing-empty .header-logo:active { transform: translateX(-50%) scale(0.97); }
/* Polish pass (mock proportion): the empty-state header logo grows
   to 200px wide (~63px tall — 1.7× the old 118px) inside a taller
   header, so it reads as branding, not a thumbnail. The source art
   is 1160×364, so 200px renders crisply — no pixelation. The
   in-conversation header is untouched: the logo hides there and
   the title shows instead. The dark-mode reversed logo grows
   identically (same img class). */
body.showing-empty .main-head { padding-top: 20px; padding-bottom: 20px; }
body.showing-empty .header-logo .brand-logo { width: 200px; max-width: none; }
/* Polish pass (mock rule): header buttons are borderless icons —
   no rounded-square boxes. Tap targets stay ≥44px. */
.main-head .menu-btn, .main-head .header-share-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 44px;
  min-height: 44px;
  padding: 2px 6px;
}
/* Hamburger: a 24px three-bar SVG (stroke 2.5, round caps) in the same
   stroke style as the Invite glyph — the old text glyph inherited the
   13px ghost-button font size and rendered thin next to it. The box
   was already 44px, so the glyph grows without moving the header.
   currentColor follows --text in both themes (dark: #e9eff5). */
.main-head .menu-btn { color: var(--text); }
.main-head .menu-btn svg { width: 24px; height: 24px; display: block; }
body.showing-empty .conv-title { display: none; }
.conv-title { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Header Invite control: the iOS share glyph with a small caption
   beneath, pinned to the header's top-right. Same stroke style as
   the composer toolbar icons. Runs the existing invite share flow. */
.header-share-btn {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 44px;
  padding: 2px 6px;
  color: var(--text);
}
.header-share-btn[hidden] { display: none; }
.header-share-caption { font-size: 10px; font-weight: 600; line-height: 1; color: var(--muted); }
.menu-btn { display: none; }

.messages {
  flex: 1;
  overflow-y: auto;
  /* overflow-y: auto would otherwise compute overflow-x to auto and
     let any wide child make this scroll container draggable sideways. */
  overflow-x: clip;
  min-height: 0;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.messages::-webkit-scrollbar { width: 5px; }
.messages::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.empty-state { text-align: center; margin: auto; padding: 30px 10px; animation: fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; min-width: 0; }
.empty-title { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 28px; text-wrap: balance; }
.empty-title .accent { color: var(--accent); }
/* Polish pass: balanced wrapping + "starting over." kept together,
   so the intro never strands a single word on its last line. */
.empty-sub { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 520px; margin: 14px auto 0; text-wrap: balance; }
.nowrap { white-space: nowrap; }

.msg { display: flex; flex-direction: column; max-width: 88%; animation: fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant { align-self: flex-start; align-items: flex-start; max-width: 100%; width: 100%; }
/* Assistant replies are plain text under a small "Yazzer" label, like the
   prototype — no bubble. The label is CSS-only so app.js markup is unchanged. */
.msg.assistant::before {
  content: "Yazzer";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 4px;
}
.msg-bubble {
  padding: 12px 15px;
  border-radius: var(--radius);
  line-height: 1.55;
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.user .msg-bubble {
  background: var(--user-bubble);
  color: #ffffff;
  border-radius: 22px;
  border-bottom-right-radius: 8px;
  padding: 12px 16px;
  line-height: 1.6;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.22);
}
.msg.assistant .msg-bubble {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  line-height: 1.7;
  color: var(--text);
}
/* A generated picture: full column width, tap to open full size. */
.msg.assistant .generated-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.receipt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  margin-top: 6px;
  padding: 0;
}
.tier-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.tier-pill.free {
  background: var(--pill-free-bg);
  color: var(--pill-free-text);
}
.tier-pill.easy {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.route-line {
  color: var(--muted-2);
  font-size: 11.5px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.switch-note {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 8px;
}
.typing { color: var(--muted); font-size: 13.5px; font-weight: 500; padding: 0; }

.chat-error { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 16px 8px; }
.chat-error-inline {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--error);
  background: var(--error-bg);
  border: 1px solid var(--error-line);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 12px;
}
.retry-btn { color: var(--text); flex: 0 0 auto; }

/* Composer (standing rule: keep chrome off his words): a toolbar
   row ABOVE the field holds the single attach control + Talk; the
   text field itself holds only the text input, with the orange
   circular Send beside it. The mock's in-field icons and the
   duplicate "+" button are both gone — one attach control, one
   Talk control, nothing eating typing space. The safe-area inset
   lives on .bottom-zone now, below the tab bar, not under the
   composer. */
.composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 16px 12px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
.composer-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 4px;
}
.composer-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.composer-field { flex: 1; min-width: 0; }
.composer-field textarea {
  width: 100%;
  display: block;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  padding: 13px 18px;
  resize: none;
  max-height: 160px;
  min-height: 48px;
  box-shadow: var(--shadow-composer);
}
.composer-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(246, 154, 20, 0.15), var(--shadow-composer);
}
/* Toolbar icon buttons: borderless, transparent (≥44px tap targets). */
.composer-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.composer-icon-btn:hover { color: var(--text); }
.composer-icon-btn svg { display: block; }
#talk-btn.active { background: var(--accent-soft); color: var(--accent-strong); }
.send-btn {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 20px rgba(246, 154, 20, 0.30);
  transition: background 0.15s ease;
}
.send-btn:hover { background: var(--accent-strong); }
.send-btn:disabled { opacity: 0.55; cursor: default; }
.send-btn svg { display: block; }

/* ---------- sources + honesty notes ---------- */
.sources { margin-top: 10px; }
.sources-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.sources-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sources-list a {
  color: var(--link);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.sources-list a:hover { text-decoration: underline; }
.switch-detail {
  color: var(--muted-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.switch-note.live-note {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 10px;
  line-height: 1.45;
  max-width: 100%;
}
.listen-btn { margin-top: 8px; align-self: flex-start; }

/* The cartoon hand-off animation was retired by the home redesign
   (the black demo card replaces it). .po-dot/.po-pulse stay: the
   live-status strip reuses the pulse. */
.po-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.po-dot.go { background: var(--accent); animation: po-pulse 1s ease-in-out infinite; }
.po-dot.stop { background: var(--muted-2); }
@keyframes po-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .po-dot.go { animation: none; }
}

/* ---------- home-page dropdowns ---------- */
/* Both home-page blocks ("What can Yazzer do?" and "Why YAZZER?") are
   <details class="dropdown">. The summary row is the invitation — a
   generous tap target, an orange-tint hover, a soft press — and the
   body opens with a grid-rows swell while its items fade up in a
   short stagger (driven by the .is-open class from app.js). */
/* Home-page dropdowns read as editorial rows now, not boxes: no
   shell, just a hairline divider above each, with the same generous
   tap target and chevron. Sections are separated by air, not cards. */
.empty-state .dropdown {
  text-align: left;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 2px 8px;
  margin-top: 20px;
}
.empty-state .dropdown + .dropdown { margin-top: 14px; }
.dropdown summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  min-height: 48px;
  padding: 10px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.1s ease;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::marker { content: none; }
.dropdown summary:hover { background: var(--accent-soft); }
.dropdown summary:active { background: var(--accent-soft); transform: scale(0.99); }
.dropdown-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.2s ease;
}
.dropdown.is-open .dropdown-chevron { transform: rotate(225deg); border-color: var(--accent-strong); }
.dropdown-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.dropdown.is-open .dropdown-body { grid-template-rows: 1fr; }
.dropdown-inner { overflow: hidden; min-height: 0; }
/* Items start quiet and rise in once the dropdown opens. The hidden
   start state is gated on .js-dropdowns (added by app.js) so that
   without the animation layer the native toggle shows content as-is. */
.js-dropdowns .dropdown .dropdown-inner > *,
.js-dropdowns .dropdown .dropdown-inner li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.js-dropdowns .dropdown.is-open .dropdown-inner > *,
.js-dropdowns .dropdown.is-open .dropdown-inner li {
  opacity: 1;
  transform: translateY(0);
}
.js-dropdowns .dropdown.is-open .dropdown-inner > *:nth-child(2) { transition-delay: 0.06s; }
.js-dropdowns .dropdown.is-open .dropdown-inner > *:nth-child(3) { transition-delay: 0.12s; }
.js-dropdowns .dropdown.is-open .dropdown-inner > *:nth-child(4) { transition-delay: 0.18s; }
.js-dropdowns .dropdown.is-open .dropdown-inner > *:nth-child(5) { transition-delay: 0.24s; }
.js-dropdowns .dropdown.is-open .dropdown-inner > *:nth-child(6) { transition-delay: 0.3s; }
.js-dropdowns .dropdown.is-open .dropdown-inner li:nth-child(2) { transition-delay: 0.06s; }
.js-dropdowns .dropdown.is-open .dropdown-inner li:nth-child(3) { transition-delay: 0.12s; }
.js-dropdowns .dropdown.is-open .dropdown-inner li:nth-child(4) { transition-delay: 0.18s; }
.js-dropdowns .dropdown.is-open .dropdown-inner li:nth-child(5) { transition-delay: 0.24s; }
.js-dropdowns .dropdown.is-open .dropdown-inner li:nth-child(6) { transition-delay: 0.3s; }
.js-dropdowns .dropdown.is-open .dropdown-inner li:nth-child(7) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .dropdown-body { transition: none; }
  .dropdown summary, .dropdown-chevron { transition: none; }
  .js-dropdowns .dropdown .dropdown-inner > *,
  .js-dropdowns .dropdown .dropdown-inner li { transition: none; }
}

/* ---------- benefit trio under the demo card ---------- */
/* Sway fix: plain 1fr tracks cannot shrink below a column's
   min-content (the bold word "conversation" alone is ~85px, so the
   trio measured ~345px against ~320px available at a 360px viewport
   and made the scroll container draggable sideways). minmax(0, 1fr)
   + min-width: 0 lets the tracks actually shrink; break-word keeps
   the longest word from overflowing on the narrowest phones. */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px auto 0; }
.benefit { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; text-align: left; min-width: 0; }
.benefit-text strong, .benefit-text span { overflow-wrap: break-word; }
.benefit + .benefit { border-left: 1px solid var(--line); }
.benefit-icon { color: var(--accent); flex: 0 0 auto; }
.benefit-text { display: flex; flex-direction: column; gap: 4px; }
.benefit-text strong { font-size: 13.5px; line-height: 1.3; }
.benefit-text span { font-size: 12px; line-height: 1.45; color: var(--muted); }

/* ---------- why YAZZER? (merged capabilities) ---------- */
.why-dropdown { max-width: 100%; }
.why-lede { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 2px 0 12px; }
.why-list { margin: 2px 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.why-list li { font-size: 13.5px; line-height: 1.55; color: var(--muted); overflow-wrap: break-word; }
.why-list li strong { color: var(--text); }
.why-diff { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 12px 0; }
.why-diff strong { color: var(--text); }

/* ---------- founder card ---------- */
.founder-card {
  display: flex;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  padding: 14px;
  margin: 22px auto 0;
  box-shadow: 0 2px 10px rgba(22, 34, 46, 0.04);
}
.founder-card-body { flex: 1; min-width: 0; }
.founder-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 6px; }
.founder-intro { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 6px; }
/* The "Read the full story" expander is an orange link-style
   summary, not a full dropdown row — it overrides the editorial
   dropdown rules (stronger selector: .empty-state .founder-card). */
.empty-state .founder-card .founder-more { border: none; margin: 0; padding: 0; }
.empty-state .founder-card .founder-more summary {
  justify-content: flex-start;
  gap: 6px;
  min-height: 32px;
  padding: 6px 0;
  color: var(--accent-strong);
}
.empty-state .founder-card .founder-more summary:hover { background: transparent; }
.empty-state .founder-card .founder-more .dropdown-chevron { border-color: var(--accent-strong); }

/* ---------- bottom strip: two-row stats card ---------- */
/* Top row: three stats with hairline dividers between them.
   Bottom row (hairline divider above it): the 8 provider marks
   + "and more…". No shield, no privacy text — that claim was
   removed (not true as an unqualified promise: prompts go to
   third-party providers via OpenRouter, chats live in D1, no
   privacy page exists yet). Provider count 67 is verified from
   the live OpenRouter catalog: 68 distinct slug prefixes minus
   the "openrouter" house prefix (the router itself, not a
   third-party AI provider). Model count stays the live
   MODEL_COUNT (469). Marks wrap on narrow phones by design,
   so nothing collides and nothing overflows. */
.models-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: 14px;
  margin: 22px auto 0;
  text-align: left;
}
.strip-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.strip-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 0; }
.strip-stat + .strip-stat { border-left: 1px solid var(--line); }
.strip-stat strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.strip-stat span { font-size: 12px; color: var(--muted); text-align: center; }
.strip-providers { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.provider-mark { flex: 0 0 auto; color: var(--text); }
.provider-sun { color: var(--accent); }
.provider-meta { color: #0082fb; }
.strip-more { font-size: 12.5px; color: var(--muted); }

/* ---------- founder story (inside the expander) ---------- */
.founder {
  text-align: center;
  padding: 2px 2px 12px;
}
.founder-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 96px;
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--line-strong), 0 8px 20px rgba(22, 34, 46, 0.16);
}
.founder p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  text-align: left;
  margin: 12px 0 0;
  overflow-wrap: break-word;
}
.founder p strong { color: var(--text); }
.founder-sign {
  margin-top: 18px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--accent-strong);
}
.founder-name { color: var(--muted); font-size: 13.5px; margin-top: 3px; }

/* ---------- photo attach ---------- */
.attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 16px 0;
}
.attach-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  flex: 0 0 44px;
}
.attach-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.attach-remove { margin-left: auto; flex: 0 0 auto; }

/* ---------- usage stats ---------- */
.usage-stats { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  min-height: 24px;
}
.stat-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- confetti ---------- */
.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(22, 34, 46, 0.18);
  }
  .sidebar.open { transform: translateX(0); }
  .main-head .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .msg { max-width: 94%; }
  .msg.assistant { max-width: 100%; }
  .empty-title { font-size: 36px; }
  /* Tap targets ≥44px on touch screens (ghost buttons are 36px on desktop). */
  .btn-ghost { min-height: 44px; }
  .free-toggle { min-height: 44px; }
  .conv-item { padding: 12px; }
  .composer { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .empty-state { padding: 20px 4px; }
  .sidebar { width: min(288px, 86vw); flex-basis: min(288px, 86vw); }
}
/* ---------- logo = home button ---------- */
/* The logos keep their exact layout; the button chrome is invisible —
   only the pointer and a subtle press/hover affordance change. */
.logo-home {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  border-radius: 10px;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.logo-home:hover { opacity: 0.85; }
.logo-home:active { transform: scale(0.97); }
.logo-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- live model status strip ---------- */
/* Slim strip directly above the composer, visible only while an
   answer generates. The dot reuses the hand-off animation's pulse
   (already stilled under prefers-reduced-motion above). */
.live-status {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 6px 16px 0;
  font-size: 12.5px;
  color: var(--muted);
}
.live-status[hidden] { display: none; }
/* ---------- bottom zone: composer + tab bar ---------- */
/* The composer row and the tab bar are fixed at the very bottom;
   content scrolls between the header and this zone. The safe-area
   inset lives here, below the tab bar, so the tab bar never
   collides with the phone's own bottom bar. */
.bottom-zone {
  flex: 0 0 auto;
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar {
  display: none;
  border-top: 1px solid var(--line);
  padding: 6px 16px 4px;
}
body.tabs-mode .tab-bar { display: flex; justify-content: space-around; }
.tab-btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0 10px;
  min-height: 44px;
}
.tab-btn.active { color: var(--accent-strong); }
.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}
/* Tab views: same 680px column as .messages, own scroll. */
.tab-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: clip;
  min-height: 0;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 22px 16px;
}
.tab-view-head { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; }
/* In tabs-mode the sidebar is gone — its nodes live in the tab
   views. This must beat the mobile fixed-drawer rule. */
body.tabs-mode .sidebar { display: none; }

/* ---------- listen voice picker ---------- */
.voice-row { margin-top: 12px; }
.voice-row > label { display: block; font-size: 13px; margin-bottom: 6px; }
.voice-controls { display: flex; gap: 8px; align-items: center; }
.voice-controls select {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}
.voice-sample { white-space: nowrap; font-size: 12.5px; }

/* ---------- black demo card: the real recorded rescue (REBUILT FROM SCRATCH 2026-10-24) ----------
   Tim's direction: the original mock's TWO-COLUMN card on ALL widths, including phones.
   Three patch rounds failed by forcing mark + long name + reason + circle into a narrow
   column (truncation, then overflow, then letter-by-letter shattering from aggressive
   mid-word wrapping).
   This rebuild is structural, not measured:
   - The card is a grid: left copy column (~45%) beside the five step rows (~55%), at every
     width. No fixed-px tracks; both tracks are percentages with minmax(0, ...).
   - Row text is STACKED (name over reason) inside the row, never side-by-side narrow
     text columns, and wraps at WORD boundaries only (overflow-wrap: break-word — it
     breaks only a single word longer than its column, which no real name here is).
   - min-width: 0 through the whole chain, so no content floor can force the grid wider
     than the card. Card overflow: hidden is a backstop only, never the mechanism.
   - Content is the real recording only: true names, true reason-words (Declined /
     Tapped out / Completed), true provider marks (OpenRouter orbit, Google G, Nvidia
     eye, Perplexity asterisk). No AI-number labels, no invented reasons, no OpenAI/Meta
     marks — those providers were not in this run. Steps render from RESCUE_RECORDING
     in app.js, so the card cannot drift from the real run. */
.demo-card {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  margin: 22px auto 0;
  padding: 16px;
  background: #0d1117;
  border: 1px solid #0d1117;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  text-align: left;
  overflow: hidden;
}
:root[data-theme="dark"] .demo-card { background: #161e28; border-color: var(--line-strong); }
.demo-copy { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
.demo-copy .rescue-label { color: #ffffff; font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 4px; overflow-wrap: break-word; }
.demo-copy .rescue-label .accent { color: var(--accent); }
.demo-copy .rescue-sub { color: rgba(255, 255, 255, 0.68); font-size: 13px; line-height: 1.55; margin: 0; overflow-wrap: break-word; }
/* Magic line (2026-10-24): fills the left-column gap for first-timers. Measured
   (greedy word-boundary wrap, DejaVu — wider than iOS San Francisco, so
   conservative): at 15px the column overflowed at 420–430px (right column shrinks
   when row names stop wrapping while the heading still takes 3 lines), so the
   size is 14px — never smaller, words never trimmed. At 14px the button stays
   aligned at every width except ≤360px, where it slips ~32px (conservative
   estimate; real iPhones render narrower). Word-boundary wrapping only. */
.demo-copy .rescue-magic { color: rgba(255, 255, 255, 0.68); font-size: 14px; line-height: 1.5; margin: 6px 0 0; overflow-wrap: break-word; }
.demo-card .rescue-play {
  margin: auto 0 0;
  width: 100%;
  background: #ffffff;
  color: #111111;
  border-color: #f69a14;
  box-shadow: 0 0 0 1px rgba(246, 154, 20, 0.22), 0 6px 18px rgba(246, 154, 20, 0.28);
  font-weight: 700;
  font-size: 12px;
  border-radius: 999px;
  padding: 10px 0;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.demo-steps { grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.demo-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px;
  font-size: 12px;
}
.demo-mark { flex: 0 0 auto; width: 20px; height: 20px; display: block; }
.demo-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.demo-name { color: rgba(255, 255, 255, 0.85); font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.demo-reason { color: rgba(255, 255, 255, 0.62); font-weight: 500; line-height: 1.35; overflow-wrap: break-word; }
.demo-status-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
}
.demo-status-icon.fail { background: #ef4444; }
.demo-status-icon.win { background: #22c55e; }
.demo-steps li.demo-win { border-color: rgba(246, 154, 20, 0.7); box-shadow: 0 0 0 1px rgba(246, 154, 20, 0.45); }
/* Playback stage inside the black card: light text on black. It spans
   both grid columns below the copy/steps row. */
.demo-card .rescue-stage { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.demo-card .rescue-step { color: rgba(255, 255, 255, 0.92); }
.demo-card .rescue-step.tap { color: rgba(255, 255, 255, 0.55); }
.demo-card .rescue-answer { color: #ffffff; }
.demo-card .rescue-receipt { color: rgba(255, 255, 255, 0.55); }
.demo-card .rescue-date { color: rgba(255, 255, 255, 0.45); }
.demo-card .rescue-closing { color: #ffffff; border-top-color: rgba(255, 255, 255, 0.14); }
/* Narrowest phones (<=360px): tighter row metrics so the longest single
   word ("Perplexity") still fits its text column with room to spare. */
@media (max-width: 360px) {
  .demo-card { padding: 14px; gap: 12px; }
  .demo-copy .rescue-label { font-size: 16px; }
  .demo-card .rescue-play { font-size: 11px; padding: 9px 4px; }
  .demo-steps li { font-size: 11px; padding: 6px; }
  .demo-mark { width: 16px; height: 16px; }
  .demo-status-icon { width: 16px; height: 16px; }
}
/* Desktop (>=620px): roomier card, larger heading (2 lines), larger rows. */
@media (min-width: 620px) {
  .demo-card { padding: 18px; gap: 14px 16px; }
  .demo-copy .rescue-label { font-size: 22px; }
  .demo-copy .rescue-sub { font-size: 13.5px; }
  .demo-card .rescue-play { font-size: 14px; padding: 10px 14px; }
  .demo-steps li { font-size: 13px; padding: 8px 10px; }
  .demo-reason { font-size: 12px; }
}
.rescue-label { font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--text); margin-bottom: 4px; }
.rescue-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 0 8px; }
.rescue-stage { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 4px; }
.rescue-q {
  align-self: flex-end;
  background: var(--user-bubble);
  color: #ffffff;
  border-radius: 16px;
  border-bottom-right-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 92%;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18);
}
.rescue-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  animation: fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rescue-step.tap { color: var(--muted); font-weight: 500; }
.rescue-answer {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.rescue-receipt { margin-top: 0; }
.rescue-date { color: var(--muted-2); font-size: 11.5px; overflow-wrap: break-word; }
.rescue-closing {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  border-top: 1px solid var(--line);
  padding-top: 8px;
  animation: fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rescue-play { margin-top: 6px; }
.share-rescue-btn { margin-top: 8px; margin-left: 8px; align-self: flex-start; }

/* ---------- invite a friend ---------- */
/* The usage-panel button stays; the home empty state's pill was
   removed in the home cleanup pass (the header share control is the
   in-conversation entry point now). */
.invite-btn { width: 100%; margin: 2px 0 10px; font-weight: 600; }

/* ---------- follow-up chips ---------- */
/* Session-only suggestions under the newest answer — they just
   appear (no spinner, no shimmer); reduced-motion stills the app
   globally, and the chips carry no animation of their own to kill. */
.followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
  margin-top: -6px;
}
.followup-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.followup-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .rescue-step { animation: none; }
}

/* ---------- hands-free talk mode ---------- */
/* The Talk button is now an in-field icon button (.composer-icon-btn
   + #talk-btn rules in the composer section above, including the
   .active state). No separate sizing block — the old 48px pill
   sizing would fight the 44px in-field circle. */

/* ---------- dark theme: logo treatment ---------- */
/* The logo art is a navy wordmark baked onto white (a JPEG — no
   alpha channel), so dark mode used to put it on a white chip. The
   home cleanup pass replaced that with a proper reversed asset
   (public/yazzer-logo-dark.png: white knocked out to alpha, navy
   lettering mapped to white, orange swoosh preserved pixel-for-
   pixel). Each logo spot carries both images; the theme attribute
   picks which one shows. Covers the auth card, the sidebar, and
   the empty state (static and app.js-rendered — both use these
   classes). Light mode is untouched: the original JPEG, as shipped. */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
:root[data-theme="dark"] .brand-logo:not(.logo-dark) { display: none; }

/* ---------- legal view ---------- */
/* The four documents live here, not on the homepage: a fixed overlay
   opened from the Settings tab (usage panel) or the signup screen
   links. It uses the theme variables so dark mode just works, and
   the documents reuse the site's existing <details> dropdown
   behavior — collapsed by default, same summary row and chevron. */
.legal-view {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.legal-sheet {
  max-width: 680px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
.legal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.legal-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.legal-banner { color: var(--accent-strong); font-size: 13px; font-weight: 600; line-height: 1.5; margin: 6px 0 0; }
.legal-close { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
.legal-doc { border-top: 1px solid var(--line); }
.legal-doc:last-child { border-bottom: 1px solid var(--line); }
.legal-body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 12px;
  overflow-wrap: break-word;
}
.legal-body h4 { font-size: 15px; line-height: 1.4; color: var(--text); margin: 18px 0 8px; }
.legal-body h4:first-child { margin-top: 2px; }
.legal-body .legal-meta { font-size: 13px; color: var(--muted); }
/* Signup-screen agreement line: inline link-buttons, never a submit. */
.auth-legal { color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; margin: 2px 0 0; }
.legal-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}