/* Web Research surface — reuses the landing page's colour tokens so the web
   version reads as the same product as the desktop app. Teal accent is scoped
   to the answer surface only, exactly as in the desktop build. */
:root { --rz-teal: #2f8f6b; --rz-teal-soft: rgba(47, 143, 107, 0.12); }

/* ── Composer ───────────────────────────────────────────────────────────── */
.rz-composer { max-width: 720px; margin: 26px auto 0; }
.rz-form {
  display: flex; gap: 8px; align-items: center;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: var(--shadow-sm);
}
.rz-form:focus-within { border-color: var(--rz-teal); box-shadow: 0 0 0 3px var(--rz-teal-soft); }
.rz-form input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 16px; color: var(--ink); padding: 10px 0;
}
.rz-form input::placeholder { color: var(--faint); }
/* Same send button as the desktop composer (.composer-send in src/styles.css):
   a 32px black disc with an arrow, not a labelled pill. The word "Research"
   competed with the placeholder for the same short line on a phone. */
.rz-form button {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 32px; height: 32px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 18px; line-height: 1;
  transition: background 130ms ease, transform 130ms ease;
}
.rz-form button:hover { background: var(--accent-hover); }
.rz-form button:active { transform: scale(0.94); }
.rz-form button:disabled { opacity: 0.4; cursor: default; }
.rz-examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.rz-example {
  border: 1px solid var(--line); background: var(--canvas); border-radius: 999px;
  padding: 7px 15px; font-family: var(--sans); font-size: 13.5px; color: var(--muted); cursor: pointer;
}
.rz-example:hover { border-color: var(--ink); color: var(--ink); }
.rz-note { text-align: center; font-size: 13px; color: var(--faint); margin-top: 12px; }

/* ── Results shell ──────────────────────────────────────────────────────── */
#rzResults { max-width: var(--max); margin: 40px auto 0; padding: 0 24px; }
.rz-shell {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 30px 34px; box-shadow: var(--shadow-sm);
}
.rz-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 22px; }
.rz-kicker {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rz-teal);
}
.rz-query { margin-left: auto; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--faint); }

.rz-hero { position: relative; }
.rz-hero.has-bg { margin: -6px -14px 0; padding: 22px 14px 4px; border-radius: 12px; overflow: hidden; isolation: isolate; }
.rz-hero-bg {
  position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center;
  filter: blur(26px) saturate(0.75); opacity: 0.28; transform: scale(1.15);
}
.rz-hero.has-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.80) 55%, var(--canvas) 100%);
}
.rz-direct {
  margin: 0 0 26px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.7vw, 34px); line-height: 1.24; letter-spacing: -0.015em; color: var(--ink);
  max-width: 900px; text-wrap: pretty;
}

.rz-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 30px; background: var(--panel); }
.rz-fact { padding: 13px 17px; border-right: 1px solid var(--line); }
.rz-fact:last-child { border-right: 0; }
.rz-fact-l { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.rz-fact-v { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rz-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
/* Grid and flex children default to min-width:auto, i.e. they refuse to shrink
   below their content's min-content width. A wide table then pushes the whole
   page sideways instead of scrolling inside its own box. Every column here must
   be allowed to shrink so the overflow-x wrappers can do their job. */
.rz-grid-2 > *, .rz-side > * { min-width: 0; }
.rz-main { min-width: 0; }
.rz-side { display: flex; flex-direction: column; gap: 20px; }

/* ── Blocks ─────────────────────────────────────────────────────────────── */
.rz-block { margin: 0 0 30px; }
.rz-block:last-child { margin-bottom: 0; }
.rz-block-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 11px; }
.rz-body { font-family: var(--serif); font-size: 17px; line-height: 1.62; color: var(--ink-soft); }
.rz-body p { margin: 0 0 14px; }
.rz-cites { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.rz-cite {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin: 0 2px; border-radius: 4px; background: var(--panel-2);
  color: var(--muted); font-family: var(--sans); font-size: 11px; text-decoration: none; vertical-align: middle;
}
.rz-cite:hover { background: var(--ink); color: #fff; }
.rz-cite-dead { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin: 0 2px; border-radius: 4px; background: var(--panel-2); color: var(--faint); font-family: var(--sans); font-size: 11px; }

/* ── Perplexity-style: query-as-headline ────────────────────────────────────
   In the (non-article) research page the eyebrow sits above a large serif
   query headline, and the verdict is demoted beneath it as a lead/deck. Only
   the default layout — renderArticle keeps its own .rz-article-title. */
.rz-shell:not(.rz-article) .rz-head {
  flex-direction: column; align-items: stretch; gap: 8px;
  border-bottom: 0; padding-bottom: 0; margin-bottom: 14px;
}
.rz-shell:not(.rz-article) .rz-query {
  margin-left: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: balance;
}
.rz-shell:not(.rz-article) .rz-direct {
  font-family: var(--serif); font-size: clamp(17px, 1.9vw, 21px); font-weight: 400;
  line-height: 1.5; color: var(--ink-soft); margin: 0 0 24px; max-width: 780px;
}
/* The blurred hero background belonged to the big-verdict layout; with the
   verdict demoted to a deck and a source strip above it, drop it here. */
.rz-shell:not(.rz-article) .rz-hero.has-bg { margin: 0; padding: 0; }
.rz-shell:not(.rz-article) .rz-hero-bg,
.rz-shell:not(.rz-article) .rz-hero.has-bg::after { display: none; }

/* ── Run summary ("Searched N sources · M angles") ──────────────────────── */
.rz-runsummary { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.rz-runsummary-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rz-teal); }

/* ── Favicons ───────────────────────────────────────────────────────────── */
.rz-favicon { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; object-fit: cover; background: var(--panel-2); }
.rz-favicon-mono {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 9px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; line-height: 1;
}

/* ── Source-card strip above the answer (arrow-paged, no scrollbar) ──────── */
/* Top padding separates the source cards from the head (kicker + query);
   bottom clears the hero's -6px negative top margin. */
.rz-srcstrip-wrap { position: relative; margin: 8px 0 24px; }
.rz-srcstrip { display: flex; gap: 10px; overflow-x: auto; padding: 2px; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.rz-srcstrip::-webkit-scrollbar { display: none; }
.rz-srcstrip-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--canvas); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12); transition: background 120ms ease, opacity 150ms ease;
}
.rz-srcstrip-arrow:hover { background: var(--ink); color: var(--canvas); }
.rz-srcstrip-left { left: -14px; }
.rz-srcstrip-right { right: -14px; }
.rz-srcstrip-chev { font-size: 22px; line-height: 1; margin-top: -2px; }
.rz-srcstrip-arrow.is-hidden { opacity: 0; pointer-events: none; }
.rz-srccard {
  flex: 0 0 200px; max-width: 200px; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  text-decoration: none; transition: border-color 120ms ease, background 120ms ease;
}
.rz-srccard:hover { border-color: var(--ink); background: var(--canvas); }
.rz-srccard-top { display: flex; align-items: center; gap: 7px; }
.rz-srccard-host { font-family: var(--sans); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.rz-srccard-n { font-family: var(--sans); font-size: 10px; color: var(--faint); flex: 0 0 auto; }
.rz-srccard-title { font-family: var(--sans); font-size: 12.5px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Citation hovercards ────────────────────────────────────────────────── */
.rz-cite-wrap { position: relative; display: inline; }
.rz-cite-card {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 30; width: 280px; max-width: min(280px, 82vw); display: none; flex-direction: column; gap: 5px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); text-align: left; white-space: normal; pointer-events: none;
}
.rz-cite-wrap:hover .rz-cite-card, .rz-cite-wrap:focus-within .rz-cite-card { display: flex; }
.rz-cite-card-head { display: flex; align-items: center; gap: 7px; }
.rz-cite-card-host { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.rz-cite-card-title { font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rz-cite-card-snip { font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Source list favicons ───────────────────────────────────────────────── */
.rz-sources-list li { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.rz-sources-list .rz-favicon { align-self: center; }

/* ── Research step checklist ────────────────────────────────────────────── */
.rz-steptree { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 8px; }
.rz-step { display: grid; grid-template-columns: 22px 1fr; align-items: start; column-gap: 10px; padding: 7px 0; }
.rz-step-icon {
  position: relative; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--line); box-sizing: border-box;
}
.rz-step.is-active .rz-step-icon { border-color: var(--rz-teal); border-right-color: transparent; animation: rz-spin 0.7s linear infinite; }
.rz-step.is-done .rz-step-icon { border-color: var(--rz-teal); background: var(--rz-teal); animation: none; }
.rz-step.is-done .rz-step-icon::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@keyframes rz-spin { to { transform: rotate(360deg); } }
.rz-step-label { font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); }
.rz-step.is-done .rz-step-label { color: var(--muted); }
.rz-step-sub { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rz-step-sub:empty { margin-top: 0; }
.rz-step-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
}
.rz-step-chip-ico { color: var(--rz-teal); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .rz-step.is-active .rz-step-icon { animation: none; } }

/* ── Live "Thinking" card (extended-thinking reasoning stream) ──────────── */
.rz-thinking {
  margin: 14px 0 18px; border: 1px solid var(--line); border-left: 3px solid var(--rz-teal);
  border-radius: 12px; background: var(--panel); overflow: hidden;
}
.rz-thinking.is-empty { display: none; }
.rz-thinking-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; }
.rz-thinking-toggle { cursor: pointer; }
.rz-thinking-spin {
  width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--rz-teal); border-right-color: transparent; animation: rz-spin 0.7s linear infinite;
}
.rz-thinking-spin.is-done { border: 0; background: var(--rz-teal); position: relative; animation: none; }
.rz-thinking-spin.is-done::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rz-thinking-label { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.rz-thinking-chev { margin-left: auto; color: var(--faint); font-size: 11px; }
.rz-thinking-toggle .rz-thinking-chev::before { content: "▸"; }
.rz-thinking.is-open .rz-thinking-chev::before { content: "▾"; }
.rz-thinking-body {
  padding: 0 14px 13px; max-height: 220px; overflow-y: auto;
  font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
}
/* Collapsed: hide the reasoning body until the header is toggled open. */
.rz-thinking.is-collapsed .rz-thinking-body { display: none; }
.rz-thinking.is-collapsed.is-open .rz-thinking-body { display: block; }
@media (prefers-reduced-motion: reduce) { .rz-thinking-spin { animation: none; } }

/* ── Collapsed research log (the old terminal, demoted) ─────────────────── */
.rz-termdetails { margin-top: 14px; }
.rz-termsummary { font-family: var(--sans); font-size: 12.5px; color: var(--muted); cursor: pointer; list-style: none; }
.rz-termsummary::-webkit-details-marker { display: none; }
.rz-termsummary::before { content: "▸ "; color: var(--faint); }
.rz-termdetails[open] .rz-termsummary::before { content: "▾ "; }
.rz-termdetails .rz-term { margin-top: 10px; }

.rz-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.rz-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rz-table th, .rz-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rz-table th + th, .rz-table td + td { border-left: 1px solid var(--line); }
.rz-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--panel); }
.rz-table tbody tr:nth-child(even) { background: var(--panel); }
.rz-table tbody tr:last-child td { border-bottom: 0; }
.rz-table td:first-child { font-weight: 600; color: var(--muted); }

.rz-kv { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rz-kv-row { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 16px; padding: 11px 17px; border-bottom: 1px solid var(--line); }
.rz-kv-row:last-child { border-bottom: 0; }
.rz-kv-k { font-size: 13px; color: var(--muted); }
.rz-kv-v { font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rz-chart-scroll { overflow-x: auto; }
.rz-chart-svg { width: 100%; min-width: 320px; height: auto; display: block; }
.rz-grid { stroke: var(--line); stroke-width: 1; }
.rz-axis, .rz-xlabel { fill: var(--muted); font-family: var(--sans); font-size: 12px; }
.rz-val { fill: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 600; }
.rz-bar { fill: var(--rz-teal); }
.rz-line { fill: none; stroke: var(--rz-teal); stroke-width: 2.5; stroke-linejoin: round; }
.rz-dot { fill: var(--rz-teal); }

.rz-math {
  font-family: "Cambria Math", Georgia, var(--serif); font-size: clamp(21px, 2.4vw, 28px);
  text-align: center; padding: 20px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); overflow-x: auto;
}
.rz-math-cap { font-size: 13px; color: var(--muted); text-align: center; margin-top: 9px; }

.rz-steps { margin: 0; padding-left: 24px; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.rz-steps li { margin-bottom: 9px; }
.rz-steps li::marker { color: var(--rz-teal); font-family: var(--sans); font-weight: 600; font-size: 15px; }

.rz-quote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--rz-teal); font-family: var(--serif); font-size: 19px; font-style: italic; line-height: 1.5; }
.rz-quote-attr { margin-top: 9px; padding-left: 18px; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }

.rz-callout { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 10px; padding: 15px 17px; background: var(--panel); }
.rz-callout.is-warn { border-left-color: #b3762e; }
.rz-callout.is-success, .rz-callout.is-info { border-left-color: var(--rz-teal); }
.rz-callout-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.rz-callout .rz-body { font-family: var(--sans); font-size: 15px; }

.rz-code { margin: 0; padding: 15px 17px; overflow-x: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.rz-code code { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; line-height: 1.55; white-space: pre; }

.rz-disagreement { border: 1px solid var(--line); border-left: 3px solid #b3762e; border-radius: 10px; padding: 16px 18px; background: var(--panel); }
.rz-conflict-claim { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.rz-conflict-list { display: flex; flex-direction: column; gap: 10px; }
.rz-conflict-pos { display: flex; gap: 10px; align-items: baseline; }
.rz-conflict-dot { color: #b3762e; font-size: 10px; }
.rz-conflict-body { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.rz-conflict-why { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; font-style: italic; color: var(--muted); }

.rz-gap { border: 1px dashed var(--line); border-radius: 10px; padding: 14px 18px; font-family: var(--serif); font-size: 16px; color: var(--muted); }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.rz-photo { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.rz-photo img { width: 100%; max-height: 220px; object-fit: cover; }
.rz-photo-cap { padding: 10px 14px 12px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.rz-sources, .rz-evidence { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.rz-sources-head, .rz-evidence-head { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.rz-sources-list { margin: 0; padding-left: 20px; }
.rz-sources-list li { margin-bottom: 12px; font-size: 14px; line-height: 1.45; }
.rz-source-link { color: var(--rz-teal); text-decoration: none; }
.rz-source-link:hover { text-decoration: underline; }
.rz-source-host { color: var(--muted); }
.rz-badge {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.rz-badge.tier-high { background: var(--rz-teal-soft); color: var(--rz-teal); }
.rz-evidence-stat { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.rz-evidence-comp { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.rz-evidence-note { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 5px; }

.rz-followups { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.rz-followup { border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; background: var(--canvas); font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.rz-followup:hover { background: var(--panel); border-color: var(--ink); }

/* ── Loading / error ────────────────────────────────────────────────────── */
/* The rotating fun stage line in light green, so the playful copy reads as
   "live/working" rather than muted grey. Slightly deeper than the terminal's
   #58c79a because that green is only ~2:1 on this white card (washed out);
   this hue clears the large-text contrast bar while still reading fresh. */
.rz-stage { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); color: #2ba36b; }
.rz-stage::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--rz-teal);
  animation: rz-spin 0.8s linear infinite; flex: 0 0 auto;
}
@keyframes rz-spin { to { transform: rotate(360deg); } }
/* The rotating stage line swaps every few seconds; the fade sells the swap. */
.rz-stage-swap { animation: rz-stage-fade 420ms ease; }
@keyframes rz-stage-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ── The research-log terminal ──────────────────────────────────────────────
   The live model stream rendered as a command-line session: stages print as
   $-commands, generation types beneath as output. Dark panel is still
   monochrome (the design system's rule is hue-for-meaning, not
   lightness-for-meaning); the one colored element is the command line, in the
   answer-surface teal. The typing cadence is the real token stream. */
.rz-term {
  margin-top: 20px; border-radius: 10px; overflow: hidden;
  background: #111111; border: 1px solid #2a2a2a;
  font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
}
.rz-term-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: #1b1b1b; border-bottom: 1px solid #2a2a2a;
}
.rz-term-dot { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.rz-term-title { margin-left: 8px; font-size: 11px; letter-spacing: 0.06em; color: #7a7a7a; }
.rz-term-lines {
  padding: 12px 14px; max-height: 230px; overflow-y: auto;
  font-size: 12.5px; line-height: 1.6; color: #cfcfcf;
}
.rz-term-line { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.2em; }
.rz-term-cmd { color: #58c79a; margin-top: 6px; }
.rz-term-cmd:first-child { margin-top: 0; }
.rz-term-cursor {
  display: inline-block; width: 7px; height: 13px; margin-left: 1px;
  background: #cfcfcf; vertical-align: -2px;
  animation: rz-blink 1s steps(1) infinite;
}
@keyframes rz-blink { 50% { opacity: 0; } }
.rz-kicker-error { color: #b3452e; }
.rz-error {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; max-width: 720px; margin-bottom: 20px; overflow-wrap: anywhere;
}
.rz-retry {
  border: 1px solid var(--ink); border-radius: 999px; padding: 10px 26px;
  background: var(--ink); color: #fff; font-family: var(--sans);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.rz-retry:hover { opacity: 0.85; }
.rz-fallback p { margin: 0 0 14px; }

/* ── Live page building (streamed answer page) ──────────────────────────────
   A blinking caret marks whatever is still being written; each block fades in
   as it finishes streaming. */
.rz-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 3px;
  background: var(--rz-teal, #2f8f6b); vertical-align: -0.15em;
  animation: rz-blink 1s step-end infinite;
}
@keyframes rz-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.rz-building { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--muted); }
.rz-building-label { font-size: 13px; letter-spacing: 0.02em; }
/* Readable draft shown while Sonnet restructures — replaced by the first block. */
.rz-live-draft { opacity: 0.86; }
.rz-live-draft-note {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin: 6px 0 14px;
}
/* Section-streamed mode: the not-yet-composed report tail grows character by
   character (raw markdown source) — pre-wrap keeps its line breaks and
   spacing without re-parsing it as HTML on every tick. */
.rz-live-draft-raw .rz-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 16px;
  line-height: 1.65;
}
.rz-block-in { animation: rz-block-in 0.35s ease both; }
@keyframes rz-block-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rz-caret { animation: none; }
  .rz-block-in { animation: none; }
}

/* ── Article layout (creation-writing requests) ─────────────────────────────
   A single, readable column instead of the research dashboard: title,
   standfirst, flowing body, sources as endnotes. */
.rz-article { max-width: 760px; margin: 0 auto; }
.rz-article-body { font-family: var(--serif); }
.rz-article-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12;
  margin: 4px 0 14px; color: var(--ink); letter-spacing: -0.01em;
}
.rz-article-deck {
  font-size: 20px; line-height: 1.5; color: var(--ink-soft);
  font-style: italic; margin: 0 0 28px;
}
.rz-article-body .rz-block { margin: 0 0 22px; }
.rz-article-body .rz-block-label {
  font-family: var(--sans); font-size: 20px; font-weight: 600;
  color: var(--ink); margin: 32px 0 10px;
}
.rz-article-body .rz-body { font-size: 18px; line-height: 1.7; color: var(--ink); }
.rz-article-foot {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--line, rgba(0, 0, 0, 0.12));
}
.rz-article-sources {
  margin: 10px 0 0; padding-left: 20px;
  font-family: var(--sans); font-size: 13.5px; color: var(--muted);
}
.rz-article-sources li { margin: 0 0 5px; }
.rz-article-sources .rz-source-link { color: var(--rz-teal, #2f8f6b); text-decoration: none; }
.rz-article-sources .rz-source-link:hover { text-decoration: underline; }

/* ── Rendered Markdown (prose fallback) ─────────────────────────────────────
   The fallback report is real Markdown; these style the structure so it reads
   like the editorial page rather than a raw text dump. Headings use the sans
   display face; body stays serif via .rz-body. */
.rz-md > :first-child { margin-top: 0; }
.rz-md-h { font-family: var(--sans); color: var(--ink); line-height: 1.3; margin: 26px 0 10px; }
.rz-md-h3 { font-size: 20px; font-weight: 600; }
.rz-md-h4 { font-size: 16.5px; font-weight: 600; }
.rz-md-hr { border: 0; border-top: 1px solid var(--line, rgba(0,0,0,0.12)); margin: 24px 0; }
.rz-md ul, .rz-md ol { margin: 0 0 14px; padding-left: 22px; }
.rz-md li { margin: 0 0 6px; }
.rz-md-quote { margin: 0 0 14px; padding: 4px 0 4px 18px; border-left: 3px solid var(--rz-teal); font-style: italic; }
.rz-inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; }
:root[data-theme="dark"] .rz-inline-code, .rz-dark .rz-inline-code { background: rgba(255,255,255,0.10); }

/* ── Email draft card ───────────────────────────────────────────────────────
   Composition output, not research: no sources, no evidence panel. Reads like
   a mail client draft so the user can see exactly what they'd be sending. */
.rz-email {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--canvas); overflow: hidden; max-width: 720px;
}
.rz-email-subject {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.rz-email-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); flex: 0 0 auto;
}
.rz-email-subject-text { font-size: 15px; font-weight: 600; color: var(--ink); }
.rz-email-body { padding: 22px 20px; font-family: var(--serif); font-size: 16px; line-height: 1.62; color: var(--ink-soft); }
.rz-email-body p { margin: 0 0 15px; }
.rz-email-greeting { margin-bottom: 15px; }
.rz-email-signoff { margin-top: 20px; margin-bottom: 2px !important; }
.rz-email-sender { color: var(--muted); }

.rz-email-actions { display: flex; gap: 10px; margin-top: 18px; }
.rz-email-copy {
  border: 1px solid var(--ink); border-radius: 999px; padding: 10px 24px;
  background: var(--ink); color: #fff; font-family: var(--sans);
  font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px;
}
.rz-email-copy:hover { opacity: 0.85; }

/* Coaching notes — what to fill in, what to double-check. The placeholders the
   model leaves are deliberate, so they get called out rather than hidden. */
.rz-email-notes {
  margin-top: 26px; max-width: 720px;
  border-left: 3px solid var(--rz-teal); padding: 4px 0 4px 16px;
}
.rz-email-notes-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.rz-email-notes-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.rz-email-notes-list li { margin-bottom: 6px; }

/* ── Depth toggle ───────────────────────────────────────────────────────── */
.rz-deep {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  margin: 14px auto 0; padding: 6px 4px; font-size: 13.5px; color: var(--muted);
  user-select: none;
}
.rz-deep input { position: absolute; opacity: 0; width: 0; height: 0; }
.rz-deep-track {
  width: 34px; height: 20px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); flex: 0 0 auto; position: relative;
  transition: background 140ms ease, border-color 140ms ease;
}
.rz-deep-thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--faint);
  transition: transform 140ms ease, background 140ms ease;
}
.rz-deep input:checked + .rz-deep-track { background: var(--rz-teal-soft); border-color: var(--rz-teal); }
.rz-deep input:checked + .rz-deep-track .rz-deep-thumb { transform: translateX(14px); background: var(--rz-teal); }
.rz-deep input:focus-visible + .rz-deep-track { box-shadow: 0 0 0 3px var(--rz-teal-soft); }
body.rz-deep-on .rz-deep-label { color: var(--rz-teal); }
/* The toggle is its own row under the composer. */
.rz-composer { display: flex; flex-direction: column; align-items: center; }
.rz-composer .rz-form { align-self: stretch; }

/* ── Tool row (depth switch + academic pill) ────────────────────────────── */
.rz-tools { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.rz-tools .rz-deep { margin: 0; }

.rz-acbtn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 6px 15px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: var(--muted); user-select: none; background: transparent;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.rz-acbtn:hover { border-color: var(--rz-teal); color: var(--ink-soft); }
.rz-acbtn input { position: absolute; opacity: 0; width: 0; height: 0; }
/* A small mortarboard drawn in CSS: flat triangle cap over a rounded base. */
.rz-acbtn-mark { width: 18px; height: 13px; position: relative; flex: 0 0 auto; }
.rz-acbtn-mark::before {
  content: ''; position: absolute; top: 1px; left: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 6px solid currentColor;
}
.rz-acbtn-mark::after {
  content: ''; position: absolute; top: 7px; left: 4px; width: 10px; height: 4px;
  border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px;
}
/* The :not() exclusions matter: the Presentation and Podcast labels reuse
   .rz-acbtn for shared pill styling, so an unqualified selector here painted
   EVERY pill teal whenever academic mode was on. */
body.rz-academic-on .rz-acbtn:not(.rz-presentbtn):not(.rz-podbtn) { background: var(--rz-teal); border-color: var(--rz-teal); color: #fff; }
.rz-acbtn input:focus-visible + .rz-acbtn-mark { outline: 2px solid var(--rz-teal); outline-offset: 4px; border-radius: 2px; }

/* ── Research plan (deep mode, during loading) ──────────────────────────── */
.rz-plan { margin-top: 22px; max-width: 620px; }
.rz-plan.is-hidden { display: none; }
.rz-plan-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.rz-plan-list { display: flex; flex-direction: column; gap: 8px; }
.rz-plan-item { display: flex; gap: 12px; align-items: baseline; }
.rz-plan-num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--rz-teal); color: var(--rz-teal);
  font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; align-self: center;
}
.rz-plan-text { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

/* ── Narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr — a bare 1fr floors at min-content and lets a wide
     table drag the page sideways. */
  .rz-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rz-shell { padding: 22px 18px 26px; }
  #rzResults { padding: 0 14px; }
}

/* Phones. Two things matter most here: nothing may force the page to scroll
   sideways, and every tap target has to be reachable with a thumb. */
@media (max-width: 640px) {
  .rz-shell { padding: 18px 14px 24px; border-radius: 12px; }
  #rzResults { padding: 0 10px; }

  /* Kicker above the question instead of beside it — side by side, the
     question was squeezed into a two-word column. */
  .rz-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* 16px keeps iOS from zooming the viewport on focus. */
  .rz-form { padding: 5px 5px 5px 16px; }
  .rz-form input { font-size: 16px; }

  .rz-examples { gap: 6px; }
  .rz-example { font-size: 12.5px; padding: 7px 12px; }

  .rz-deep { font-size: 12.5px; text-align: left; }

  /* Full-bleed hero art: the letterbox looked accidental at phone width. */
  .rz-hero.has-bg { margin-left: -14px; margin-right: -14px; border-radius: 0; padding: 18px 14px 4px; }

  .rz-stage { font-size: 19px; }
  .rz-term-lines { font-size: 11.5px; max-height: 170px; }
  .rz-plan-text { font-size: 13.5px; }

  /* Tables. Squeezing four columns into 340px produced ~80px cells where even
     "$1,000" was cramped. Give the columns room they can actually use and let
     the box scroll properly instead — a legible table you swipe beats an
     illegible one that fits. The fade on the right edge says it can move. */
  .rz-table-scroll {
    -webkit-overflow-scrolling: touch;
    position: relative;
    background:
      linear-gradient(to right, var(--canvas) 30%, rgba(255, 255, 255, 0)) left / 28px 100% no-repeat,
      linear-gradient(to left, var(--canvas) 30%, rgba(255, 255, 255, 0)) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.10), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.10), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .rz-table-scroll { max-width: 100%; }
  /* MUST stay `table.rz-table`. The renderer also puts .rz-table on the outer
     block div (<div class="rz-block rz-table">), which sits OUTSIDE the
     scroll wrapper — a bare .rz-table selector widens that div instead and
     drags the whole page sideways. */
  table.rz-table { min-width: 460px; }
  .rz-table th, .rz-table td { padding: 10px 12px; font-size: 13px; }
  /* Row labels and headers should not wrap mid-word. Value cells must wrap —
     a long list of side effects would otherwise stretch the table forever. */
  table.rz-table td:first-child, table.rz-table thead th { white-space: nowrap; }

  /* Citations are 18px squares — fine for a mouse, too small for a thumb.
     Grow the hit area without changing what is drawn. */
  .rz-cite { position: relative; }
  .rz-cite::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* Source links are the most-tapped thing on the page — a single-line one was
     only 32px tall. Taller leading plus vertical padding clears 44px without
     making multi-line titles look airy. */
  .rz-sources-list li { margin-bottom: 4px; line-height: 1.55; }
  .rz-source-link { display: inline-block; padding: 11px 0; }

  .rz-followup, .rz-retry { min-height: 44px; }
  .rz-followups { gap: 8px; }

  /* The hero band is mostly the headline, which is the answer — so trim the
     padding around it, not the type. */
  .rz-hero.has-bg { padding-top: 14px; }
  .rz-direct { margin-bottom: 20px; }

  /* A formula at 21px broke across four lines on a phone. */
  .rz-math { font-size: 17px; padding: 16px 12px; }

  /* Long URLs and unbroken identifiers must not become a horizontal scrollbar. */
  .rz-paragraph, .rz-sources-list li, .rz-keyvalue, .rz-callout { overflow-wrap: anywhere; }

  /* Email card: a long subject must wrap under its label, not push sideways. */
  .rz-email-subject { flex-direction: column; gap: 4px; padding: 12px 16px; }
  .rz-email-body { padding: 18px 16px; font-size: 15.5px; }
  .rz-email, .rz-email-notes, .rz-email-body { overflow-wrap: anywhere; }
  .rz-email-copy { width: 100%; }
}

/* ── Academic paper blueprint ──────────────────────────────────────────────
   A formal, single-column paper plan. Led by an honesty banner (snippet-level,
   verify before drafting), then 13 numbered IMRAD-oriented sections, an evidence
   ledger + claim–evidence tables, and an ethics checklist. Serif body, teal
   section rules — the same editorial vocabulary as the answer page, made sober
   and document-like. */
.rz-academic .rz-head { border-bottom: 0; margin-bottom: 10px; padding-bottom: 0; }

.rz-ac-banner {
  border: 1px solid var(--line); border-left: 3px solid var(--rz-teal);
  background: var(--rz-teal-soft); border-radius: 10px;
  padding: 13px 17px; margin-bottom: 26px;
}
.rz-ac-banner-t { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.rz-ac-banner-b { font-size: 13px; line-height: 1.55; color: var(--muted); }

.rz-ac-title {
  font-family: var(--serif); font-size: 31px; line-height: 1.25; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em; margin: 4px 0 32px;
}

.rz-ac-sec { margin: 0 0 32px; }
.rz-ac-h {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rz-teal); margin: 0 0 14px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.rz-ac-sub { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); margin: 18px 0 8px; }
.rz-ac-p { font-family: var(--serif); font-size: 17px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 12px; }
.rz-ac-p:last-child { margin-bottom: 0; }
.rz-ac-list { margin: 0 0 12px; padding-left: 22px; }
.rz-ac-list li { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 7px; }
.rz-ac-list li::marker { color: var(--rz-teal); }
.rz-ac-list li:last-child { margin-bottom: 0; }
.rz-ac-none { color: var(--faint); }

.rz-ac-grouped .rz-ac-sub:first-child { margin-top: 0; }
.rz-ac-imrad { display: grid; gap: 2px; }

/* Confidence chips — verbal strength made visible, never louder than the claim. */
.rz-ac-conf {
  display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.rz-ac-conf.is-high { background: var(--rz-teal-soft); color: var(--rz-teal); border-color: transparent; }
.rz-ac-conf.is-medium { background: rgba(154, 123, 22, 0.14); color: #8a6d10; border-color: transparent; }
.rz-ac-conf.is-low { background: rgba(179, 69, 46, 0.10); color: #b3452e; border-color: transparent; }

/* Ledger + claim-map tables reuse .rz-table but run denser and darker-labelled. */
.rz-ac-table { font-size: 13px; }
.rz-ac-table th, .rz-ac-table td { padding: 10px 13px; }
.rz-ac-table td:first-child { font-weight: 600; color: var(--ink); }
.rz-ac-table .rz-cite { margin: 0 3px 0 0; }

/* Ethics checklist — resolved (checked), to-resolve (flagged red), or n/a. */
.rz-ac-ethics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rz-ac-ethics li { display: flex; align-items: center; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.rz-ac-eth-item { flex: 1 1 auto; }
.rz-ac-eth-mark { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line); position: relative; }
.rz-ac-ethics li.is-ok .rz-ac-eth-mark { background: var(--rz-teal); border-color: var(--rz-teal); }
.rz-ac-ethics li.is-ok .rz-ac-eth-mark::after {
  content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.rz-ac-ethics li.is-flag .rz-ac-eth-mark { border-color: #b3452e; }
.rz-ac-ethics li.is-flag .rz-ac-eth-mark::after {
  content: ''; position: absolute; left: 6px; top: 3px; width: 1.5px; height: 5px; background: #b3452e; border-radius: 1px;
}
.rz-ac-ethics li.is-flag .rz-ac-eth-mark::before {
  content: ''; position: absolute; left: 6px; bottom: 3px; width: 1.5px; height: 1.5px; background: #b3452e; border-radius: 50%;
}
.rz-ac-eth-status { flex: 0 0 auto; font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); }
.rz-ac-ethics li.is-flag .rz-ac-eth-status { color: #b3452e; }

.rz-ac-sources { margin-top: 6px; }
.rz-ac-sources .rz-evidence { margin-top: 18px; }

/* Hand-off CTA on the blueprint → draft the manuscript (second skill). */
.rz-ac-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 30px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.rz-ac-draft {
  flex: 0 0 auto; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--rz-teal);
  background: var(--rz-teal); color: #fff; transition: filter 140ms ease;
}
.rz-ac-draft:hover { filter: brightness(1.06); }
.rz-ac-draft:focus-visible { outline: 2px solid var(--rz-teal); outline-offset: 3px; }
.rz-ac-cta-note { flex: 1 1 240px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ── Manuscript draft (Academic Paper Writer) ──────────────────────────────
   The finished-looking paper view. Same sober editorial vocabulary as the
   blueprint, but with a warning-tinted banner and highlighted [… REQUIRED]
   placeholders so it never reads as submittable text. */
.rz-ms-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.rz-ms-back, .rz-ms-copy {
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); transition: border-color 140ms ease, color 140ms ease;
}
.rz-ms-back:hover, .rz-ms-copy:hover { border-color: var(--rz-teal); color: var(--rz-teal); }
/* Back sits left; copy + review cluster on the right. */
.rz-ms-back { margin-right: auto; }
.rz-ms-review {
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rz-teal);
  background: var(--rz-teal); color: #fff; transition: filter 140ms ease;
}
.rz-ms-review:hover { filter: brightness(1.06); }

/* Warning-tinted banner distinguishes a DRAFT from the blueprint's plan banner. */
.rz-ms-banner { border-left-color: #b3452e; background: rgba(179, 69, 46, 0.08); }

.rz-ms-onesentence { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink); margin: 2px 0 24px; padding: 12px 16px; border-left: 3px solid var(--rz-teal); background: var(--rz-teal-soft); border-radius: 0 8px 8px 0; }
.rz-ms-onesentence-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rz-teal); }

.rz-ms-titles { margin: 0 0 24px; }
.rz-ms-titles > summary { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.rz-ms-titles[open] > summary { margin-bottom: 8px; color: var(--ink); }

.rz-ms-sec { margin: 0 0 30px; }
.rz-ms-h {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rz-teal); margin: 0 0 14px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
/* Manuscript prose reads as a paper: serif, generous leading. */
.rz-ms-sec .rz-md p { font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.rz-ms-sec .rz-md p:last-child { margin-bottom: 0; }
.rz-ms-sec .rz-md-ul, .rz-ms-sec .rz-md-ol { margin: 0 0 14px; padding-left: 22px; }
.rz-ms-sec .rz-md-ul li, .rz-ms-sec .rz-md-ol li { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 6px; }

.rz-ms-keywords { display: flex; flex-wrap: wrap; gap: 8px; }
.rz-ms-kw { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }

/* The whole point made visible: a placeholder is a to-do, not content. */
.rz-ms-ph {
  font-family: var(--sans); font-size: 0.86em; font-weight: 700; letter-spacing: 0.02em;
  color: #8a3b28; background: rgba(179, 69, 46, 0.12); border: 1px solid rgba(179, 69, 46, 0.35);
  border-radius: 4px; padding: 0 5px; white-space: nowrap;
}

.rz-ms-note { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.rz-ms-todo { margin: 0 0 12px; padding-left: 22px; }
.rz-ms-todo li { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 6px; }
.rz-ms-todo li::marker { color: #b3452e; }

/* ── Peer review report (Academic Paper Reviewer) ──────────────────────────
   A skeptical audit of the draft: a gate verdict, a 0-55 readiness score,
   blocking/major/minor issues, a claim-evidence audit, and the path to READY. */
.rz-rv-sec { margin: 0 0 30px; }

/* Verdict header: gate badge + recommendation + total score. */
.rz-rv-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 4px 0 28px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.rz-rv-gate { flex: 0 0 auto; font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.rz-rv-gate.is-ready { background: var(--rz-teal-soft); color: var(--rz-teal); }
.rz-rv-gate.is-notready { background: rgba(179, 69, 46, 0.12); color: #b3452e; }
.rz-rv-verdict-meta { flex: 1 1 240px; min-width: 200px; }
.rz-rv-rec { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); }
.rz-rv-rec-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.rz-rv-total { flex: 0 0 auto; font-family: var(--serif); color: var(--ink); }
.rz-rv-total-n { font-size: 30px; font-weight: 600; }
.rz-rv-total-d { font-size: 15px; color: var(--faint); }

/* Readiness scorecard: category · bar · score. */
.rz-rv-scores { display: flex; flex-direction: column; gap: 10px; }
.rz-rv-score { display: grid; grid-template-columns: 168px 1fr 40px; align-items: center; gap: 10px 12px; }
.rz-rv-score-cat { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.rz-rv-score-track { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.rz-rv-score-fill { display: block; height: 100%; border-radius: 999px; }
.rz-rv-score-fill.is-high { background: var(--rz-teal); }
.rz-rv-score-fill.is-mid { background: #9a7b16; }
.rz-rv-score-fill.is-low { background: #b3452e; }
.rz-rv-score-n { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: right; }
.rz-rv-score-note { grid-column: 2 / 4; font-size: 12px; line-height: 1.45; color: var(--faint); margin-top: -2px; }

/* Blocking issues — the loudest section. */
.rz-rv-h-block { color: #b3452e; border-bottom-color: rgba(179, 69, 46, 0.4); }
.rz-rv-block { margin: 0; padding-left: 22px; }
.rz-rv-block li { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 7px; }
.rz-rv-block li::marker { color: #b3452e; }

/* Major issue cards. */
.rz-rv-major { border: 1px solid var(--line); border-left: 3px solid #9a7b16; border-radius: 0 8px 8px 0; padding: 12px 15px; margin-bottom: 12px; }
.rz-rv-major-issue { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.rz-rv-major-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 5px; }
.rz-rv-major-loc { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); }
.rz-rv-major-why { font-size: 13px; color: var(--muted); }
.rz-rv-major-fix { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 7px; }

.rz-rv-match { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rz-rv-match.is-ok { background: var(--rz-teal-soft); color: var(--rz-teal); }
.rz-rv-match.is-bad { background: rgba(179, 69, 46, 0.1); color: #b3452e; }
.rz-rv-overclaim { font-family: var(--serif); font-style: italic; color: #b3452e; }

@media (max-width: 640px) {
  .rz-rv-score { grid-template-columns: 1fr 40px; }
  .rz-rv-score-cat { grid-column: 1 / 3; }
  .rz-rv-score-track { grid-column: 1 / 2; }
  .rz-rv-score-note { grid-column: 1 / 3; }
  .rz-rv-total-n { font-size: 24px; }
}

@media (max-width: 640px) {
  .rz-ac-cta { padding: 14px; }
  .rz-ms-onesentence { font-size: 16px; }
  .rz-ms-sec .rz-md p { font-size: 16px; }
  .rz-ms-ph { white-space: normal; }
}

/* Phone: smaller paper title, denser tables (kept AFTER the base academic
   rules so this same-specificity override actually wins). */
@media (max-width: 640px) {
  .rz-ac-title { font-size: 24px; }
  .rz-ac-banner { padding: 11px 14px; }
  .rz-ac-table { font-size: 12.5px; }
  .rz-ac-table th, .rz-ac-table td { padding: 9px 11px; }
  table.rz-ac-table { min-width: 560px; }
}

/* ── Build corner status ──────────────────────────────────────────────────
   Pinned to the bottom center of the viewport — position:fixed means it stays
   there through any scrolling ("follows" the page, always at the bottom) —
   distinct from the inline "building the page…" caret. Knight Rider / KITT
   scanner: a black bar, a red light sweeping back and forth, with a soft red
   glow bleeding out at its edges (the box-shadow layers below). */
.rz-build-corner {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #0b0b0c;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 1;
  transition: opacity 200ms ease;
}
.rz-build-corner.is-hidden { opacity: 0; }
.rz-build-corner-text {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff6b5e;
  white-space: nowrap;
}
.rz-build-scan {
  position: relative;
  width: 120px;
  height: 10px;
  border-radius: 6px;
  background: #050505;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.9);
}
.rz-build-scan-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, #ff3b30 35%, #ffc7c2 50%, #ff3b30 65%, transparent);
  /* The layered, increasingly blurred red shadows are the "smoke"/glow that
     bleeds out past the light's own edges — classic KITT scanner look. */
  box-shadow:
    0 0 8px 2px rgba(255, 59, 48, 0.9),
    0 0 18px 6px rgba(255, 59, 48, 0.5),
    0 0 32px 12px rgba(255, 59, 48, 0.25);
  /* translateX (not left) so the sweep runs on the compositor thread. */
  animation: rz-kitt-sweep 1.1s ease-in-out infinite;
  will-change: transform;
}
@keyframes rz-kitt-sweep {
  0% { transform: translateX(0); }
  50% { transform: translateX(98px); } /* track 120px − dot 22px */
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rz-build-scan-dot { animation: none; transform: translateX(49px); }
}
@media (max-width: 760px) {
  .rz-build-corner { bottom: 14px; padding: 8px 16px; gap: 6px; }
  .rz-build-corner-text { font-size: 10px; }
  .rz-build-scan { width: 92px; }
  @keyframes rz-kitt-sweep {
    0% { transform: translateX(0); }
    50% { transform: translateX(70px); } /* track 92px − dot 22px */
    100% { transform: translateX(0); }
  }
}

/* ── Presentation toggle + document attach ─────────────────────────────────── */
.rz-presentbtn-mark { width: 18px; height: 13px; position: relative; flex: 0 0 auto; }
/* A little slide/screen: a bordered rectangle with a base line. */
.rz-presentbtn-mark::before {
  content: ''; position: absolute; top: 0; left: 1px; width: 16px; height: 10px;
  border: 1.5px solid currentColor; border-radius: 2px;
}
.rz-presentbtn-mark::after {
  content: ''; position: absolute; bottom: 0; left: 5px; width: 8px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
body.rz-present-on .rz-presentbtn { background: var(--rz-teal); border-color: var(--rz-teal); color: #fff; }

/* Podcast pill: a CSS microphone — capsule head over a small stand. */
.rz-podbtn-mark { width: 18px; height: 13px; position: relative; flex: 0 0 auto; }
.rz-podbtn-mark::before {
  content: ''; position: absolute; top: 0; left: 6px; width: 6px; height: 9px;
  border-radius: 3px; background: currentColor;
}
.rz-podbtn-mark::after {
  content: ''; position: absolute; bottom: 0; left: 4px; width: 10px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
body.rz-podcast-on .rz-podbtn { background: var(--rz-teal); border-color: var(--rz-teal); color: #fff; }

/* :not([hidden]) is required: an author rule's `display` ALWAYS beats the
   browser's own `[hidden] { display: none }` rule regardless of specificity
   (author beats user-agent origin outright) — an unguarded `display: flex`
   here silently defeated the `hidden` attribute and showed this row on every
   load, in every mode, not just presentation mode. */
.rz-attach:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; justify-content: center; }
.rz-attach-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px dashed var(--line);
  background: transparent; color: var(--muted); transition: border-color 140ms ease, color 140ms ease;
}
.rz-attach-btn:hover { border-color: var(--rz-teal); color: var(--rz-teal); }
.rz-attach-hint { font-size: 12px; color: var(--faint); }
.rz-attach.has-doc .rz-attach-hint { display: none; }
/* Same [hidden]-override pitfall as .rz-attach above. */
.rz-attach-chip:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid var(--rz-teal); border-radius: 999px; background: var(--rz-teal-soft); font-size: 13px; color: var(--ink-soft); }
.rz-attach-chip.is-error { border-color: #b3452e; background: rgba(179, 69, 46, 0.08); color: #b3452e; }
.rz-attach-chip-name { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-attach-chip-meta { font-size: 11.5px; color: var(--muted); }
.rz-attach-chip-x { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: 50%; }
.rz-attach-chip-x:hover { color: #b3452e; background: rgba(179, 69, 46, 0.1); }

/* ── Presentation deck viewer ──────────────────────────────────────────────── */
.rz-deck-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.rz-deck-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.rz-deck-btn:hover { border-color: var(--rz-teal); color: var(--rz-teal); }
.rz-deck-present { background: var(--rz-teal); border-color: var(--rz-teal); color: #fff; }
.rz-deck-present:hover { filter: brightness(1.06); color: #fff; }

/* The slide stage — a real 16:9 slide. */
.rz-deck-stagewrap { position: relative; }
.rz-deck-stage {
  /* aspect-ratio is a MINIMUM here (overflow is visible, so an overfull slide
     grows downward instead of silently clipping its bottom bullets); present
     mode below re-clamps it to a hard 16:9. */
  aspect-ratio: 16 / 9; width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
  /* Block flow (not flex): with aspect-ratio it grows to contain an overfull
     slide instead of capping the height and spilling bullets out of the card. */
  padding: 6% 7%; display: block; overflow: visible; outline: none;
}
.rz-deck-stage.is-title { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.rz-deck-stage:focus-visible { border-color: var(--rz-teal); box-shadow: 0 0 0 3px var(--rz-teal-soft); }
.rz-deck-slide-title { font-family: var(--serif); font-size: clamp(20px, 3.4vw, 34px); font-weight: 600; color: var(--ink); line-height: 1.2; margin-bottom: 4%; padding-bottom: 3%; border-bottom: 2px solid var(--rz-teal); }
.rz-deck-slide-title-lg { font-family: var(--serif); font-size: clamp(26px, 5vw, 52px); font-weight: 700; color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; }
.rz-deck-slide-sub { font-family: var(--sans); font-size: clamp(14px, 2.2vw, 22px); color: var(--muted); margin-top: 3%; }
.rz-deck-bullets { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 2.4%; }
.rz-deck-bullets li { font-family: var(--sans); font-size: clamp(14px, 2.3vw, 24px); line-height: 1.4; color: var(--ink-soft); }
.rz-deck-bullets li::marker { color: var(--rz-teal); }

/* Fullscreen present mode: the stage fills the screen, dark surround. */
.rz-deck-stagewrap:fullscreen { background: #0b0b0c; display: flex; align-items: center; justify-content: center; padding: 3vh 4vw; }
.rz-deck-stagewrap.is-fullscreen .rz-deck-stage { max-width: 92vw; max-height: 92vh; width: auto; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border: 0; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6); }
.rz-deck-stagewrap:fullscreen .rz-deck-stage { width: min(92vw, 163vh); overflow: hidden; }

.rz-deck-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 14px 0 6px; }
.rz-deck-nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.rz-deck-nav-btn:hover:not(:disabled) { border-color: var(--rz-teal); color: var(--rz-teal); }
.rz-deck-nav-btn:disabled { opacity: 0.3; cursor: default; }
.rz-deck-counter { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); min-width: 60px; text-align: center; }

.rz-deck-notes { border: 1px solid var(--line); border-left: 3px solid var(--rz-teal); border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 8px 0 18px; display: flex; flex-direction: column; gap: 3px; }
.rz-deck-notes-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rz-teal); }
.rz-deck-notes-text { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.rz-deck-notes-empty { font-size: 13px; color: var(--faint); font-style: italic; }

.rz-deck-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.rz-deck-thumb { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 120ms ease; }
.rz-deck-thumb:hover { border-color: var(--rz-teal); color: var(--rz-teal); }
.rz-deck-thumb.is-active { background: var(--rz-teal); border-color: var(--rz-teal); color: #fff; }
.rz-deck-sources { margin-top: 8px; }
.rz-deck-sources .rz-ac-sub { margin-top: 0; }

@media (max-width: 640px) {
  .rz-deck-notes-text { font-size: 13.5px; }
  .rz-deck-nav { gap: 14px; }
}

/* ── Podcast transcript player ─────────────────────────────────────────────── */
.rz-pod-desc { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--muted); margin: -14px 0 18px; }

.rz-pod-hosts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; }
.rz-pod-host { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13.5px; color: var(--muted); }
.rz-pod-host strong { color: var(--ink); }
.rz-pod-host-dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; flex: 0 0 auto; }
.rz-pod-host-0 .rz-pod-host-dot { background: var(--rz-teal); }
.rz-pod-host-1 .rz-pod-host-dot { background: #9a7b16; }

.rz-pod-turns { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 26px; }
.rz-pod-turn { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 0 10px 10px 0; border-left: 3px solid var(--line); transition: background 200ms ease; }
.rz-pod-turn-0 { border-left-color: var(--rz-teal); }
.rz-pod-turn-1 { border-left-color: #9a7b16; }
.rz-pod-turn.is-speaking { background: var(--rz-teal-soft); }
.rz-pod-speaker { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rz-pod-turn-0 .rz-pod-speaker { color: var(--rz-teal); }
.rz-pod-turn-1 .rz-pod-speaker { color: #8a6d10; }
.rz-pod-text { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }

.rz-pod-takeaways { margin: 0 0 26px; }

@media (max-width: 640px) {
  .rz-pod-text { font-size: 15.5px; }
  .rz-pod-turn { padding: 9px 12px; }
}