/* ════════════════════════════════════════════════════════════════════════
 * Ask answer + result-card + report styles — SHARED by the workspace Ask
 * (home.html, loaded AFTER home.css so these canonical copies win) and the
 * public Ask pages (public-ask/index.html). One file, one look: the studio
 * and /ask/<topic> render answers identically because they share BOTH the
 * renderer (ask-render.js) and this stylesheet.
 *
 * Origin: extracted verbatim from home.css (which still carries the old
 * copies for safety — EDIT HERE, not there). All colors go through the
 * studio vars with light fallbacks; the public page maps the vars per
 * theme in public-ask.css.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Answer block + markdown ── Larger, editorial typography: a real heading
   hierarchy (title > section > sub), airy spacing, and prominent lead-in bold.
   Shared by the workspace + public Ask, so data answers and document/knowledge
   answers read identically and at a comfortable reading size. */
.ask-answer { font: 450 15.5px/1.7 var(--font-ui); color: var(--ink-900); letter-spacing: -0.003em; }
.ask-answer p, .ask-answer li, .ask-answer blockquote { max-width: 72ch; }  /* W10: 45-72ch preferred reading measure */
.ask-answer > :first-child { margin-top: 0; }
.ask-answer p { margin: 0 0 11px; } .ask-answer p:last-child { margin-bottom: 0; }
.ask-answer ul, .ask-answer ol { margin: 8px 0 12px; padding-left: 22px; }
.ask-answer li { margin: 6px 0; line-height: 1.62; padding-left: 2px; }
.ask-answer li::marker { color: var(--brand-500, #6b7cff); }
.ask-answer strong, .ask-answer li strong { font-weight: 700; color: var(--ink-900); }
/* Answer title (the leading ## of a knowledge answer) — prominent, with a rule. */
.ask-answer h2 { margin: 18px 0 10px; font-size: 1.42em; font-weight: 800; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink-900); padding-bottom: 7px; border-bottom: 1px solid var(--line, #e6e9ef); }
/* Section heading. */
.ask-answer h3 { margin: 16px 0 7px; font-size: 1.13em; font-weight: 750; line-height: 1.3; color: var(--ink-900); }
.ask-answer h4, .ask-answer h5, .ask-answer h6 { margin: 12px 0 5px; font-size: 1em; font-weight: 700; }
.ask-answer code { background: var(--brand-50, #f1f5f9); padding: 1.5px 6px; border-radius: 5px; font-size: 0.88em; }
/* Research EVIDENCE QUOTES — clear "quote cards" so each quote stands apart and it's
   obvious what it is and which source it backs. */
.ask-answer blockquote { margin: 11px 0; padding: 9px 14px; border-left: 3px solid var(--brand-400, #6b7cff);
  background: var(--brand-50, #f5f7ff); border-radius: 0 10px 10px 0; color: var(--ink-800, #1e293b);
  font-style: italic; font-size: .97em; line-height: 1.58; }
.ask-answer blockquote p { margin: 0 0 5px; }
.ask-answer blockquote p:last-child { margin-bottom: 0; }
/* Scholarly citation — styled like a clear underlined reference link (click → Sources). */
.ask-cite-ref { font-style: normal; font-weight: 700; color: var(--brand-600, #4338ca);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
  cursor: pointer; border-radius: 3px; padding: 0 1px; }
.ask-cite-ref:hover { background: var(--brand-100, #e4e9ff); color: var(--brand-700, #3730a3); }
/* Grounding (green/red) lines explain WHY on hover OR tap (mobile) — show a cursor cue
   and a reason popover. */
.ask-answer li.fact-ok, .ask-answer p.fact-ok,
.ask-answer li.fact-warn, .ask-answer p.fact-warn { cursor: help; }
.ask-fact-tip { position: absolute; z-index: 10050; max-width: min(330px, 88vw);
  padding: 9px 12px; border-radius: 10px; font: 500 12.5px/1.5 var(--font-ui, system-ui, sans-serif);
  background: var(--surface, #fff); color: var(--ink-900, #0f172a);
  border: 1px solid var(--line-strong, #cbd5e1); box-shadow: 0 8px 28px rgba(8,12,22,.28); }
.ask-fact-tip-ok { border-left: 3px solid #22c55e; }
.ask-fact-tip-warn { border-left: 3px solid #ef4444; }
/* Markdown data tables (Evidence & proof query results, etc.) — render as a real,
   scrollable table instead of raw "| a | b |" pipe text. */
.ask-md-tablewrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line, #e6e9ef);
  border-radius: 10px; -webkit-overflow-scrolling: touch; }
.ask-md-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ask-md-table th, .ask-md-table td { padding: 7px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line, #eef1f5); vertical-align: top; }
/* Let the LAST column (e.g. a "Returns"/description column) wrap so long text is
   fully visible at a glance, while short code columns (method/endpoint) stay on one
   line. */
.ask-md-table td:last-child, .ask-md-table th:last-child { white-space: normal;
  min-width: 220px; line-height: 1.45; }
.ask-md-table th { background: var(--surface-2, #f6f8fc); font-weight: 700;
  color: var(--ink-900, #0f172a); }
.ask-md-table tbody tr:last-child td { border-bottom: none; }
.ask-md-table tbody tr:nth-child(even) td { background: var(--surface-2, #fafbfe); }
/* Mobile-safe text responses: nothing in an answer may push past the bubble width.
   Long URLs/IDs/codes wrap; markdown tables, code blocks and wide equations scroll
   horizontally inside their own box instead of overflowing the page. */
.ask-answer { overflow-wrap: break-word; word-break: break-word; }
.ask-answer table { display: block; width: 100%; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; border-collapse: collapse; }
.ask-answer th, .ask-answer td { padding: 6px 10px; border: 1px solid var(--line, #e2e8f0);
  text-align: left; vertical-align: top; }
.ask-answer pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ask-answer img { max-width: 100%; height: auto; }
.ask-answer .katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 2px 0; }
.ask-answer a { overflow-wrap: break-word; word-break: break-word; }
/* Reasoning-answer callouts: a highlighted Verdict, a "my reasoning" box for
   speculation beyond the docs, and a muted caveat. Left accent bar + tint. */
.ask-answer .ask-callout { margin: 14px 0; padding: 11px 14px 12px 15px; border-radius: 10px;
  border: 1px solid var(--line-200, #e2e8f0); border-left: 4px solid var(--ink-300, #cbd5e1);
  background: var(--surface-50, #f8fafc); }
.ask-answer .ask-callout > :first-child { margin-top: 0; }
.ask-answer .ask-callout > :last-child { margin-bottom: 0; }
/* A highlighted callout that lands inside a collapsed section body spans the
   section's FULL width — counter the .ad-body 16px padding so the box aligns
   edge-to-edge instead of being double-inset (it read as "not full width"). */
.ask-answer .ad-body > .ask-callout { margin-left: -16px; margin-right: -16px; }
.ask-answer .ask-callout p { margin: 0 0 7px; }
.ask-answer .ask-callout-label { font: 700 11.5px/1.2 var(--font-ui); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 6px; opacity: .9; }
/* Verdict — the headline judgment: brand accent. */
.ask-answer .ask-callout-verdict { border-left-color: var(--brand-500, #6b7cff);
  background: var(--brand-50, #eef2ff); }
.ask-answer .ask-callout-verdict .ask-callout-label { color: var(--brand-700, #4338ca); }
.ask-answer .ask-callout-verdict { font-size: 1.02em; }
/* My reasoning — speculation beyond the documents: amber, so it's visibly not a cited fact. */
.ask-answer .ask-callout-reasoning { border-left-color: #d9920b; background: #fbf6ec; }
.ask-answer .ask-callout-reasoning .ask-callout-label { color: #b45309; }
/* Citations — the supporting quotes for a finding, grouped in ONE coloured section
   under a single "Citations" label (works in light + dark via a translucent tint). */
.ask-answer .ask-callout-citations { border-left-color: #22c55e; background: rgba(34,197,94,.09); }
.ask-answer .ask-callout-citations .ask-callout-label { color: #047857; }
.ask-answer .ask-callout-citations ul { margin: 4px 0 0; padding-left: 18px; list-style: none; }
.ask-answer .ask-callout-citations li { margin: 5px 0; padding-left: 14px; position: relative; }
.ask-answer .ask-callout-citations li::before { content: "“"; position: absolute; left: 0; top: 1px;
  color: #047857; font-weight: 800; }
.ask-answer .ask-callout-citations em { font-style: italic; color: var(--ink-800, #1e293b); }
/* Caveat — muted. */
.ask-answer .ask-callout-caveat { border-left-color: var(--ink-300, #cbd5e1);
  background: var(--surface-100, #f1f5f9); }
.ask-answer .ask-callout-caveat .ask-callout-label { color: var(--ink-500, #64748b); }
.ask-answer .ask-callout-caveat { font-size: 0.94em; color: var(--ink-600, #475569); }
/* TL;DR — a bottom-of-answer recap; green "summary" accent, separated above. */
.ask-answer .ask-callout-tldr { border-left-color: #10b981; background: #ecfdf5;
  margin-top: 18px; }
.ask-answer .ask-callout-tldr .ask-callout-label { color: #047857; }
.ask-answer .ask-callout-tldr p { font-weight: 550; }
/* DARK MODE: the callouts above hardcode LIGHT backgrounds (#ecfdf5 green, #fbf6ec
   amber, #fdecea red) — unreadable on a dark surface. Re-tint them with translucent
   fills that sit on dark, and brighten the labels so they stay legible. */
body:not(.pa-light) .ask-answer .ask-callout-tldr {
  background: rgba(16, 185, 129, .15); border-left-color: #34d399; }
body:not(.pa-light) .ask-answer .ask-callout-tldr .ask-callout-label { color: #6ee7b7; }
body:not(.pa-light) .ask-answer .ask-callout-reasoning {
  background: rgba(217, 146, 11, .15); border-left-color: #f0b13a; }
body:not(.pa-light) .ask-answer .ask-callout-reasoning .ask-callout-label { color: #fcd34d; }
body:not(.pa-light) .whse-ask-err,
body:not(.pa-light) .whse-tile-refine-err {
  background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .35); color: #fca5a5; }
/* The per-claim fact marks are translucent left-edges; bump them in dark so the
   green (verified) / red (verify) edge reads against the dark background. */
body:not(.pa-light) .ask-answer li.fact-ok, body:not(.pa-light) .ask-answer p.fact-ok {
  border-left-color: rgba(52, 211, 153, .8); }
body:not(.pa-light) .ask-answer li.fact-warn, body:not(.pa-light) .ask-answer p.fact-warn {
  border-left-color: rgba(248, 113, 113, .85); }
body:not(.pa-light) .ask-answer li.fact-ok:hover, body:not(.pa-light) .ask-answer p.fact-ok:hover { background: rgba(52, 211, 153, .12); }
body:not(.pa-light) .ask-answer li.fact-warn:hover, body:not(.pa-light) .ask-answer p.fact-warn:hover { background: rgba(248, 113, 113, .12); }
/* Rendered Mermaid diagram (and its code fallback / mid-stream raw block). */
.ask-answer .ask-mermaid { margin: 14px 0; padding: 12px; text-align: center;
  background: var(--surface-50, #f8fafc); border: 1px solid var(--line-200, #e2e8f0); border-radius: 12px; overflow-x: auto; }
/* Keep the diagram at its natural, readable size; if it's wider than the panel
   (common for horizontal / left-right flowcharts with long labels) the container's
   overflow-x:auto lets it SCROLL instead of shrinking the text to nothing. */
.ask-answer .ask-mermaid svg { max-width: none; height: auto; }
.ask-answer .ask-mermaid { scrollbar-width: thin; }
.ask-answer .ask-mermaid::-webkit-scrollbar { height: 8px; }
.ask-answer .ask-mermaid::-webkit-scrollbar-thumb { background: var(--line-200,#cbd5e1); border-radius: 8px; }
/* The graph gets its own labeled section header so it reads as a distinct view. */
.ask-answer .ask-mermaid .ask-mermaid-label { display: block; text-align: left; margin: -2px 0 10px;
  font: 700 11.5px/1.2 var(--font-sans, system-ui, sans-serif); letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted-500, #94a3b8); }
/* Mermaid labels render as foreignObject HTML (htmlLabels:true). Keep a host page's
   heavy global CSS from collapsing them, WITHOUT overriding mermaid's own layout
   (forcing display/width breaks node sizing). Minimal, non-intrusive. */
.ask-answer .ask-mermaid foreignObject { overflow: visible; }
.ask-answer .ask-mermaid foreignObject div { white-space: nowrap; }
.ask-answer .ask-mermaid .nodeLabel, .ask-answer .ask-mermaid .edgeLabel { color: #1f2937; }
.ask-answer .ask-code, .ask-answer .ask-mermaid pre.ask-code { margin: 12px 0; padding: 12px 14px; text-align: left;
  background: var(--ink-900, #0f172a); color: #e2e8f0; border-radius: 10px; overflow-x: auto;
  font: 500 12.5px/1.55 var(--font-mono, ui-monospace, monospace); }
.ask-answer .ask-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* Mid-stream placeholder: while the answer types out, the diagram block shows a
   pulsing chip; renderAskInto swaps in the real (animated) diagram on result. */
.ask-answer .ask-mermaid .mmd-building { display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-500, #64748b); font: 600 12.5px/1.4 var(--font-ui); animation: mmd-pulse 1.1s ease-in-out infinite; }
@keyframes mmd-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* Whole-figure reveal for diagrams without discrete nodes (timeline/sequence).
   Opacity-ONLY — a transform on the .ask-mermaid ancestor makes Chromium mis-lay
   mermaid's foreignObject labels (stranded at the top, empty node boxes) and they
   don't re-layout when it clears. So we fade, never translate. */
.ask-answer .ask-mermaid.mmd-reveal { opacity: 0; }
.ask-answer .ask-mermaid.mmd-reveal.mmd-in { opacity: 1;
  transition: opacity .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .ask-answer .ask-mermaid .mmd-building { animation: none; }
  .ask-answer .ask-mermaid.mmd-reveal, .ask-answer .ask-mermaid.mmd-reveal.mmd-in { opacity: 1; transform: none; transition: none; }
}
.ask-answer a { color: var(--brand-600, #4338ca); text-decoration: underline; text-underline-offset: 2px; }
/* Inline per-claim proof citation: a labeled 📄 button that opens the source PDF. */
.ask-answer a.ask-cite { display: inline-flex; align-items: center; gap: 3px; text-decoration: none;
  font: 600 0.78em/1.3 var(--font-mono, ui-monospace, monospace); vertical-align: baseline;
  margin: 0 2px; padding: 1px 8px 1px 6px; border-radius: 7px; white-space: nowrap;
  color: var(--brand-600, #4338ca); background: var(--brand-50, #eef2ff); border: 1px solid var(--brand-200, #c7d2fe);
  transition: background .12s var(--ease, ease), border-color .12s var(--ease, ease); }
.ask-answer a.ask-cite:hover { background: var(--brand-100, #e0e7ff); border-color: var(--brand-400, #6b7cff); text-decoration: none; }
.ask-answer a.ask-cite-table { cursor: pointer; }

/* ── Warehouse-ask result pieces (SQL, sources, chart, table, errors) ── */
.whse-ask-result { margin-top: 14px; }
.whse-ask-loading { padding: 14px 4px; color: var(--ink-500); font: 400 13px var(--font-ui); }
.whse-ask-answer { font: 500 15px/1.55 var(--font-ui); color: var(--ink-900);
  padding: 14px 16px; background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius-md, 8px); }
.whse-ask-sqlwrap { margin-top: 10px; }
.whse-ask-sqlwrap summary { cursor: pointer; font: 600 12px var(--font-ui); color: var(--ink-500); }
.ask-source { margin-top: 8px; font: 500 11.5px var(--font-ui); color: var(--ink-500, #64748b); }
.ask-source-tbl { font-family: var(--font-mono); color: var(--ink-700, #334155); background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--line, #e2e8f0); border-radius: 5px; padding: 1px 6px; }
/* Clickable source = opens the original PDF. */
a.ask-source-link { text-decoration: none; color: var(--brand-600, #4338ca); border-color: var(--brand-200, #c7d2fe);
  background: var(--brand-50, #eef2ff); cursor: pointer; transition: border-color .12s var(--ease, ease), background .12s var(--ease, ease); }
a.ask-source-link:hover { border-color: var(--brand-400, #6b7cff); background: var(--brand-100, #e0e7ff); text-decoration: underline; }
.whse-ask-sql { margin: 6px 0 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px); font: 400 12px var(--font-mono); color: var(--ink-700); overflow: auto; white-space: pre-wrap; }
.whse-ask-chartwrap { margin-top: 14px; max-width: 760px; position: relative; height: 280px; }
.whse-ask-chartwrap canvas { display: block; width: 100% !important; height: 100% !important; }
.whse-ask-tablewrap { margin-top: 14px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md, 8px); }
.whse-ask-table { border-collapse: collapse; width: 100%; font: 400 12.5px var(--font-ui); }
.whse-ask-table th { text-align: left; padding: 7px 10px; background: var(--surface-2); color: var(--ink-700);
  font-weight: 600; border-bottom: 1px solid var(--line); position: sticky; top: 0; white-space: nowrap; }
.whse-ask-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft, var(--line, #eef1f6)); color: var(--ink-900); white-space: nowrap; }
.whse-ask-more { padding: 6px 10px; font: 400 11.5px var(--font-ui); color: var(--ink-500); }
.whse-ask-err { padding: 12px 14px; background: #fdecea; border: 1px solid #f5c6c2; border-radius: var(--radius-md, 8px);
  color: #a33a31; font: 400 13px var(--font-ui); }

/* ── Multi-tile report ("Build a dashboard") ── */
.whse-report-head { font: 600 16px var(--font-ui); color: var(--ink-900); margin: 4px 0 12px; }
.whse-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.whse-report-tile { border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); background: var(--surface);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(15,23,42,.05)); padding: 11px 13px; min-width: 0; }
.whse-report-tile-title { font: 600 13px var(--font-ui); color: var(--ink-900); margin-bottom: 8px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.whse-report-tile .whse-ask-tablewrap { max-height: 210px; margin-top: 8px; }
.whse-report-tile-caption { font: 400 12px var(--font-ui); color: var(--ink-600, #5b6472);
  margin-top: 8px; line-height: 1.4; font-style: italic; }
.whse-report-tile .whse-ask-chartwrap { max-width: none; height: 210px; margin-top: 4px; }
.whse-report-tile .whse-ask-chartwrap canvas { height: 100% !important; }
.whse-tile-refine-err { font: 500 11.5px var(--font-ui); color: #a33a31; background: #fdecea;
  border: 1px solid #f5c6c2; border-radius: 6px; padding: 6px 9px; margin-bottom: 6px; }
.ask-dash-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.ask-dash-pager:empty { display: none; }
/* Loading placeholder tiles while the build streams. */
.whse-report-tile.is-loading { display: flex; align-items: center; justify-content: center; min-height: 200px;
  border-style: dashed; background: var(--surface-2, #f8fafc); }
.whse-tile-skel { display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ink-500, #64748b); font: 500 12px var(--font-ui); }
.ask-loadmore-btn { border: 1px solid var(--line-strong, #cbd5e1); background: var(--surface, #fff);
  color: var(--ink-700, #334155); border-radius: 999px; padding: 9px 22px; font: 600 13px var(--font-ui); cursor: pointer;
  transition: border-color .15s var(--ease, ease), color .15s var(--ease, ease), background .15s var(--ease, ease); }
.ask-loadmore-btn:hover:not(:disabled) { border-color: var(--brand-300, #a5b4fc); color: var(--brand-600, #4338ca); background: var(--brand-50, #eef2ff); }
.ask-loadmore-btn:disabled { opacity: .5; cursor: default; }
.ask-dash-pageinfo { font: 600 12px var(--font-ui); color: var(--ink-500, #64748b); }
.ask-dash-pager button { border: 1px solid var(--line-200, #cbd5e1); background: var(--surface-1, #fff); color: var(--ink-600, #334155); font: 600 12px var(--font-ui); padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.ask-dash-pager button:disabled { opacity: 0.4; cursor: default; }
/* Generated, contextual dashboard title (not a verbatim echo of the question). */
.ask-dash-title { font: 800 18px/1.3 var(--font-ui); color: var(--ink-900); letter-spacing: -0.01em; margin: 0 0 10px; }
/* The blue-tinted dashboard summary ("the summary blue header"). */
.ask-dash-summary { margin: 2px 0 12px; padding: 11px 14px; border-left: 3px solid var(--brand-400, #6b7cff); background: var(--brand-50, #f5f7ff); border-radius: 8px; color: var(--ink-700, #334155); font: 14px/1.55 var(--font-ui); }
.ask-dash-summary:empty { display: none; }
.ask-dash-summary p { margin: 0 0 6px; } .ask-dash-summary p:last-child { margin-bottom: 0; }
.ask-dash-head { margin: 10px 0 4px; }
.whse-report-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ask-viz-select { font: 500 11.5px var(--font-ui); color: var(--ink-600, #475569); background: var(--surface-1, #fff); border: 1px solid var(--line-200, #e2e8f0); border-radius: 7px; padding: 3px 6px; cursor: pointer; }
.whse-report-tile-tools { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.whse-tile-btn { border: 1px solid var(--line-200, #e2e8f0); background: var(--surface-1, #fff); border-radius: 7px; padding: 2px 6px; cursor: pointer; font-size: 12px; line-height: 1.4; }
.whse-tile-btn:hover { border-color: var(--brand-400, #6b7cff); }
.whse-tile-refine { display: flex; gap: 6px; margin: 0 0 8px; }
.whse-tile-refine input { flex: 1; border: 1px solid var(--line-200, #e2e8f0); border-radius: 7px; padding: 5px 8px; font: 400 12px var(--font-ui); }
.whse-tile-refine button { border: 1px solid var(--brand-300, #a5b4fc); background: var(--brand-50, #eef2ff); color: var(--brand-600, #4338ca); border-radius: 7px; padding: 4px 10px; font: 600 11.5px var(--font-ui); cursor: pointer; }

/* ── KPI ── */
.ask-kpi { font: 800 2rem var(--font-ui); color: var(--brand-600); padding: 6px 0 0; letter-spacing: -0.02em; }
.ask-kpi-label { font: 500 12px var(--font-ui); color: var(--ink-500); margin-bottom: 6px; }

/* ── Interactive result card: switcher + CSV + pin + pager ── */
.ask-result { margin-top: 12px; border: 1px solid var(--line-200, #e6e9ef); border-radius: 12px; overflow: hidden; }
.ask-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-200, #e6e9ef); background: var(--surface-2, #f8fafc); }
.ask-result-actions { display: flex; align-items: center; gap: 8px; }
.ask-result-csv, .ask-result-pin { border: 1px solid var(--line-200, #cbd5e1); background: var(--surface-1, #fff); color: var(--ink-600, #334155); font: 700 11.5px var(--font-ui); padding: 5px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ask-result-pin { border-color: var(--brand-200, #c7d2fe); background: var(--brand-50, #eef2ff); color: var(--brand-600, #4338ca); }
.ask-result-csv:hover, .ask-result-pin:hover:not(:disabled) { border-color: var(--brand-500, #185fa5); color: var(--brand-600, #185fa5); }
.ask-result-pin:disabled { opacity: 0.7; cursor: default; }
/* Visual feedback (👍/👎 + reason chip) */
.vf-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vf-btn { border: 1px solid var(--line-200, #cbd5e1); background: var(--surface-1, #fff); font-size: 13px; line-height: 1; padding: 4px 7px; border-radius: 8px; cursor: pointer; }
.vf-btn:hover { border-color: var(--brand-500, #185fa5); }
.vf-prompt { font: 700 11px var(--font-ui); color: var(--ink-500, #64748b); }
.vf-chip { border: 1px solid var(--line-200, #cbd5e1); background: var(--surface-1, #fff); color: var(--ink-600, #334155); font: 600 11px var(--font-ui); padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.vf-chip:hover { border-color: var(--brand-500, #185fa5); color: var(--brand-600, #185fa5); }
.vf-thanks { font: 700 11px var(--font-ui); color: var(--ok-600, #15803d); }
.vf-form { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; width: 100%; }
.vf-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vf-chip-on { border-color: var(--brand-500, #185fa5); background: var(--brand-50, #eef2ff); color: var(--brand-600, #185fa5); }
.vf-note { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--line-200, #cbd5e1); border-radius: 8px; padding: 6px 8px; font: 400 12px var(--font-ui); color: var(--ink-700, #1e293b); background: var(--surface-1, #fff); }
.vf-note:focus { outline: none; border-color: var(--brand-500, #185fa5); }
.vf-send { align-self: flex-start; border: 1px solid var(--brand-200, #c7d2fe); background: var(--brand-50, #eef2ff); color: var(--brand-600, #4338ca); font: 700 11.5px var(--font-ui); padding: 5px 11px; border-radius: 8px; cursor: pointer; }
.vf-send:hover { border-color: var(--brand-500, #185fa5); color: var(--brand-600, #185fa5); }
.ask-result-body { padding: 10px; }
.ask-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; color: var(--ink-500, #64748b); font: 600 12px var(--font-ui); }
.ask-pager button { border: 1px solid var(--line-200, #cbd5e1); background: var(--surface-1, #fff); color: var(--ink-600, #334155); font: 600 11.5px var(--font-ui); padding: 3px 11px; border-radius: 7px; cursor: pointer; }
.ask-pager button:disabled { opacity: 0.4; cursor: default; }
.ask-save-dash { border: 1px solid var(--brand-200, #c7d2fe); background: var(--brand-50, #eef2ff); color: var(--brand-600, #4338ca); border-radius: var(--radius-md, 8px); padding: 7px 12px; font: 600 12.5px var(--font-ui); cursor: pointer; }
.ask-save-dash:hover:not(:disabled) { background: var(--brand-500, #4338ca); color: #fff; border-color: var(--brand-500, #4338ca); }

/* ════════════════════════════════════════════════════════════════════════
 * MOBILE / narrow viewports — visuals + dashboards stack and fit a phone.
 * This file loads LAST (after home.css in the studio, standalone on public
 * pages), so these rules govern BOTH surfaces. Touch targets, single-column
 * dashboards, shorter full-width charts, momentum-scrolling tables.
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ask-answer { font-size: 15px; }
  .ask-answer h2 { font-size: 1.28em; }
  .ask-answer h3 { font-size: 1.08em; }
  .ask-answer ul, .ask-answer ol { padding-left: 18px; }
  .ask-answer a.ask-cite { white-space: normal; }            /* citation buttons may wrap */

  /* Dashboards: 2-column mosaic → single column */
  .whse-report-grid { grid-template-columns: 1fr; gap: 10px; }
  .whse-report-head { font-size: 15px; }
  .ask-dash-title { font-size: 16px; }
  .ask-dash-summary { padding: 10px 12px; font-size: 13.5px; }

  /* Charts: full width, shorter so they fit on screen */
  .whse-ask-chartwrap { max-width: 100%; height: 220px; }
  .whse-report-tile .whse-ask-chartwrap { height: 190px; }

  /* Tables: keep their own momentum horizontal scroll, tighter cells */
  .whse-ask-tablewrap { max-height: 340px; -webkit-overflow-scrolling: touch; }
  .whse-report-tile .whse-ask-tablewrap { max-height: 220px; }
  .whse-ask-table { font-size: 12px; }
  .whse-ask-table th, .whse-ask-table td { padding: 6px 8px; }

  .ask-kpi { font-size: 1.6rem; }

  /* Result-card head + actions wrap instead of overflowing the card */
  .ask-result-head { flex-wrap: wrap; gap: 6px; }
  .ask-result-actions { flex-wrap: wrap; }
  .ask-result-csv, .ask-result-pin, .ask-save-dash { padding: 7px 12px; }

  /* Dashboard tile header (title + viz switch + tools) wraps */
  .whse-report-tile-head { flex-wrap: wrap; gap: 6px; }
  .whse-report-tile-tools { flex-wrap: wrap; }
  .whse-tile-refine { flex-wrap: wrap; }
  .whse-tile-refine input { flex: 1 1 100%; }

  /* Pagers wrap with bigger touch targets; load-more spans the width */
  .ask-pager, .ask-dash-pager { flex-wrap: wrap; gap: 10px; }
  .ask-pager button, .ask-dash-pager button { padding: 7px 14px; }
  .ask-loadmore-btn { width: 100%; padding: 11px 18px; }

  /* Source chips wrap rather than overflow */
  .ask-source { line-height: 1.9; }
}

/* ── Per-claim grounding overlay ──────────────────────────────────────────
 * Green = the claim's figures appear in the cited source (grounded). Red = a
 * figure wasn't found in what the model retrieved (likely invented — verify via
 * the page citation). Set by the backend [[FACT:ok|warn]] markers. */
/* Subtle: a thin colored left edge (green = verified, red = unverified) instead of
 * a full colored block — the trust signal stays, the distraction goes. A faint
 * tint appears only on hover. */
.ask-answer li.fact-ok, .ask-answer p.fact-ok {
  border-left: 2px solid rgba(34, 197, 94, .55); padding-left: 9px; margin-left: -2px;
  border-radius: 2px; transition: background .15s; position: relative; }
.ask-answer li.fact-warn, .ask-answer p.fact-warn {
  border-left: 2px solid rgba(239, 68, 68, .6); padding-left: 9px; margin-left: -2px;
  border-radius: 2px; transition: background .15s; position: relative; }
/* Colorblind-safe: the edge colour is backed by a glyph so verified vs
   needs-check survives grayscale (Weinschenk #11). */
.ask-answer .fact-ok::after { content: " \2713"; color: #047857; font-weight: 700; }
.ask-answer .fact-warn::after { content: " \26A0"; color: #b45309; font-weight: 700; }
body:not(.pa-light) .ask-answer .fact-ok::after { color: #6ee7b7; }
body:not(.pa-light) .ask-answer .fact-warn::after { color: #fcd34d; }
.ask-answer li.fact-ok:hover, .ask-answer p.fact-ok:hover { background: rgba(34, 197, 94, .07); }
.ask-answer li.fact-warn:hover, .ask-answer p.fact-warn:hover { background: rgba(239, 68, 68, .07); }

/* ── Ask diagram (window.AskDiagram SVG + styled-list fallback) ── */
.ask-answer .ask-diagram { margin: 14px 0; padding: 12px; text-align: center;
  background: var(--surface-2, #f8fafc); border: 1px solid var(--line, #e2e8f0); border-radius: 12px; }
.ask-answer .ask-diagram svg { max-width: 100%; height: auto; }
.ask-answer .ask-diagram-fallback { text-align: left; }
.ask-answer .ask-diagram-fallback ul { margin: 4px 0 0; padding-left: 18px; }
.ask-answer .ask-diagram-fallback li { margin: 2px 0; color: var(--ink-700, #334155); }
.ask-answer .ask-diagram-retry { display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; font: 600 12px/1 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-600, #475569); background: var(--surface, #fff);
  border: 1px solid var(--line-strong, #cbd5e1); border-radius: 8px;
  padding: 6px 11px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ask-answer .ask-diagram-retry:hover { background: var(--brand-50, #eef2ff);
  color: var(--brand-500, #1f4fd6); border-color: var(--brand-300, #a5b4fc); }

/* ── Image Q&A: thumbnail rows + lightbox ── */
.ask-inline-images, .ask-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ask-images-wrap { margin-top: 10px; }
.ask-images-label { font-size: 12px; opacity: .7; margin-bottom: 4px; }
.ask-img-thumb { padding: 0; border: 1px solid rgba(0,0,0,.12); border-radius: 8px;
  overflow: hidden; cursor: zoom-in; background: none; line-height: 0; }
.ask-img-thumb img { width: 120px; height: 120px; object-fit: cover; display: block; }
/* ── gallery lightbox (flip through an answer's images) ──────────────── */
.ask-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; cursor: zoom-out;
  background: rgba(8,10,18,0); backdrop-filter: blur(0px);
  opacity: 0; transition: opacity .18s ease, background .22s ease, backdrop-filter .22s ease; }
.ask-lightbox.is-open { opacity: 1; background: rgba(8,10,18,.82); backdrop-filter: blur(7px); }
.ask-lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 92vw; max-height: 92vh; cursor: default;
  transform: scale(.96); transition: transform .2s cubic-bezier(.21,.7,.3,1); }
.ask-lightbox.is-open .ask-lb-stage { transform: scale(1); }
.ask-lb-stage img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.55); background: #fff; }
.ask-lb-stage img.from-r { animation: ask-lb-in-r .26s cubic-bezier(.21,.7,.3,1); }
.ask-lb-stage img.from-l { animation: ask-lb-in-l .26s cubic-bezier(.21,.7,.3,1); }
.ask-lb-cap { color: rgba(255,255,255,.92); font: 500 13px var(--font-ui, system-ui); text-align: center;
  max-width: 80vw; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ask-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px);
  transition: background .15s, transform .15s, box-shadow .15s; user-select: none; }
.ask-lb-nav:hover { background: rgba(255,255,255,.26); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.ask-lb-prev { left: 18px; } .ask-lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.ask-lb-next { right: 18px; } .ask-lb-next:hover { transform: translateY(-50%) translateX(2px); }
.ask-lb-nav:active { transform: translateY(-50%) scale(.92); }
.ask-lb-close { position: fixed; top: 16px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background .15s, transform .15s; }
.ask-lb-close:hover { background: rgba(255,255,255,.26); transform: rotate(90deg); }
.ask-lb-count { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.9); font: 600 12.5px var(--font-ui, system-ui); letter-spacing: .04em;
  background: rgba(255,255,255,.1); padding: 5px 13px; border-radius: 999px; backdrop-filter: blur(6px); }
@keyframes ask-lb-in-r { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ask-lb-in-l { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 640px) { .ask-lb-nav { width: 44px; height: 44px; font-size: 26px; }
  .ask-lb-prev { left: 8px; } .ask-lb-next { right: 8px; } }

/* Compare-styles: two answers generated in parallel, inline & readable (not a popup) */
.ask-duel-inline { margin: 2px 0; }
.ask-duel-inline .adi-hd { font: 700 .82rem/1.3 var(--font-sans, system-ui, sans-serif); color: var(--ink-800, #1f2937); margin-bottom: .55rem; }
.ask-duel-inline .adi-hd span { display: block; font-weight: 400; font-size: .74rem; color: var(--muted-500, #94a3b8); margin-top: .15rem; }
.ask-duel-inline .adi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 680px) { .ask-duel-inline .adi-grid { grid-template-columns: 1fr; } }
.ask-duel-inline .adi-col { border: 1px solid var(--line-200, #e2e8f0); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-50, #f8fafc); transition: border-color .15s, box-shadow .15s; }
.ask-duel-inline .adi-col:hover { border-color: var(--brand-400, #35c9b0); }
.ask-duel-inline .adi-tag { font: 700 .64rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600, #0e9a83); padding: .5rem .7rem; border-bottom: 1px solid var(--line-200, #e2e8f0); }
.ask-duel-inline .adi-ans { padding: .7rem .85rem; font-size: .9rem; line-height: 1.55; flex: 1; max-height: 60vh; overflow: auto; color: var(--ink-800, #1f2937); }
.ask-duel-inline .adi-pick { margin: .6rem .7rem .7rem; border: 1px solid var(--brand-500, #10b981); background: var(--brand-500, #10b981); color: #fff; border-radius: 9px; padding: .55rem; font-weight: 700; cursor: pointer; font-size: .85rem; }
.ask-duel-inline .adi-pick:hover { filter: brightness(1.06); }
.ask-btn.ask-compare.ask-compare-on { background: var(--brand-500, #10b981); color: #fff; border-color: var(--brand-500, #10b981); }

/* Grounding banner — is this answer from your documents, or general knowledge? */
.ask-grounding { display: flex; align-items: center; gap: .5rem; font: 600 12.5px/1.4 var(--font-ui, system-ui, sans-serif);
  padding: 7px 12px; border-radius: 9px; margin: 0 0 11px; border: 1px solid transparent; }
.ask-grounding .agi { font-size: 13px; line-height: 1; }
.ask-grounding-documents { color: #16a34a; background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.28); }
.ask-grounding-general { color: #b9770a; background: #fbf6ec; border-color: rgba(217,146,11,.30); }
/* N3 uncertainty / "I don't know" — a deliberately non-green, honest state */
.ask-grounding-uncertain { color: #b45309; background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.30); }
@media (prefers-color-scheme: dark) {
  .ask-grounding-documents { color: #4ade80; background: rgba(34,197,94,.12); border-color: rgba(74,222,128,.30); }
  .ask-grounding-general { color: #eab04c; background: rgba(234,176,76,.10); border-color: rgba(234,176,76,.30); }
  .ask-grounding-uncertain { color: #fbbf24; background: rgba(180,83,9,.16); border-color: rgba(251,191,36,.32); }
}
:root[data-theme="dark"] .ask-grounding-documents { color: #4ade80; background: rgba(34,197,94,.12); border-color: rgba(74,222,128,.30); }
:root[data-theme="dark"] .ask-grounding-general { color: #eab04c; background: rgba(234,176,76,.10); border-color: rgba(234,176,76,.30); }
:root[data-theme="dark"] .ask-grounding-uncertain { color: #fbbf24; background: rgba(180,83,9,.16); border-color: rgba(251,191,36,.32); }

/* Mermaid render-failure fallback — a quiet note, source hidden by default */
.ask-mmd-fallback { font: 500 13px/1.5 var(--font-ui, system-ui, sans-serif); color: var(--ink-600, #64748b);
  border: 1px solid var(--line-200, #e2e8f0); border-radius: 10px; padding: 9px 12px; margin: 8px 0; }
.ask-mmd-fallback .ammf-note { color: var(--ink-700, #475569); }
.ask-mmd-fallback details { margin-top: 6px; }
.ask-mmd-fallback summary { cursor: pointer; font-size: 12px; color: var(--brand-600, #4338ca); }
.ask-mmd-fallback pre { margin: 6px 0 0; max-height: 240px; overflow: auto; }

/* ── W3 citation verify: degraded chip + evidence panel ─────────────────────
   An unresolvable citation must LOOK broken (honesty over tidiness); the
   panel shows the exact stored page text with the claimed span highlighted —
   one click from claim to evidence. Calm, plain styling in states of doubt. */
.ask-answer .ask-cite-unresolved { display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; padding: 1px 7px; border-radius: 999px; cursor: help;
  background: var(--warn-50, #fffbeb); border: 1px dashed var(--warn-500, #f59e0b);
  color: var(--warn-700, #b45309); }
#ask-cite-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 92vw);
  background: var(--surface, #fff); border-left: 1px solid var(--line-200, #e2e8f0);
  box-shadow: -12px 0 32px rgba(15, 23, 42, .14); z-index: 9600; display: none;
  flex-direction: column; }
#ask-cite-panel.open { display: flex; }
#ask-cite-panel .acp-head { display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-200, #e2e8f0); }
#ask-cite-panel .acp-title { font-weight: 700; font-size: 13px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-900, #0f172a); }
#ask-cite-panel .acp-open { font-size: 12px; color: var(--brand-600, #4338ca);
  text-decoration: none; white-space: nowrap; }
#ask-cite-panel .acp-close { border: 0; background: none; font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--ink-600, #64748b); padding: 2px 6px; }
#ask-cite-panel .acp-status { padding: 9px 14px; font-size: 12.5px;
  border-bottom: 1px solid var(--line-200, #e2e8f0); color: var(--ink-700, #475569); }
#ask-cite-panel .acp-status.acp-ok   { background: var(--ok-50, #f0fdf4);  color: var(--ok-700, #15803d); }
#ask-cite-panel .acp-status.acp-warn { background: var(--warn-50, #fffbeb); color: var(--warn-700, #b45309); }
#ask-cite-panel .acp-status.acp-bad  { background: var(--bad-50, #fef2f2);  color: var(--bad-700, #b91c1c); }
#ask-cite-panel .acp-body { padding: 14px; overflow: auto; font-size: 13px;
  line-height: 1.65; max-width: 72ch; color: var(--ink-800, #1e293b); }
#ask-cite-panel .acp-body mark { background: var(--brand-100, #e0e7ff);
  color: inherit; border-radius: 3px; padding: 0 2px;
  box-shadow: 0 0 0 2px var(--brand-100, #e0e7ff); }
html[data-theme="dark"] #ask-cite-panel { background: var(--surface, #0f172a);
  border-left-color: var(--line-200, #26334d); }
html[data-theme="dark"] #ask-cite-panel .acp-body mark { background: #3b4b8f; box-shadow: 0 0 0 2px #3b4b8f; }

/* ── W8 "when wrong" recovery row ─────────────────────────────────────────── */
.ask-whenwrong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ask-whenwrong .aww-btn { font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line-200, #e2e8f0); background: var(--surface, #fff);
  color: var(--ink-700, #475569); cursor: pointer; text-decoration: none; }
.ask-whenwrong .aww-btn:hover { border-color: var(--brand-400, #6b7cff); color: var(--brand-600, #4338ca); }
.ask-whenwrong .aww-tblrow { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ask-whenwrong .aww-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  border: 1px dashed var(--brand-400, #6b7cff); background: var(--brand-50, #eef2ff);
  color: var(--brand-700, #3730a3); cursor: pointer; }

/* W2.4 disambiguation chip row */
.ask-clarify { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* WORKSPACE dark theme (html[data-theme="dark"]) — the re-tints above key on the
   public page's body:not(.pa-light); mirror them for the studio's theme attr so
   callouts/errors/mermaid labels stay readable in workspace dark mode. */
html[data-theme="dark"] .ask-answer .ask-callout-tldr {
  background: rgba(16, 185, 129, .15); border-left-color: #34d399; }
html[data-theme="dark"] .ask-answer .ask-callout-tldr .ask-callout-label { color: #6ee7b7; }
html[data-theme="dark"] .ask-answer .ask-callout-reasoning {
  background: rgba(217, 146, 11, .15); border-left-color: #f0b13a; }
html[data-theme="dark"] .ask-answer .ask-callout-reasoning .ask-callout-label { color: #fcd34d; }
html[data-theme="dark"] .whse-ask-err,
html[data-theme="dark"] .whse-tile-refine-err {
  background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .35); color: #fca5a5; }
html[data-theme="dark"] .ask-answer li.fact-ok, html[data-theme="dark"] .ask-answer p.fact-ok {
  border-left-color: rgba(52, 211, 153, .8); }
html[data-theme="dark"] .ask-answer .ask-mermaid .nodeLabel,
html[data-theme="dark"] .ask-answer .ask-mermaid .edgeLabel { color: #e2e8f0; }
html[data-theme="dark"] .ask-answer .ask-mermaid svg { background: transparent; }

/* W4 confidence indicator (real verified-claim counts, Leiser-style) */
.ask-grounding .ask-confidence { margin-left: 10px; font-size: 11.5px; padding: 1px 8px;
  border-radius: 999px; font-weight: 600; cursor: help; }
.ask-confidence-high { background: var(--ok-bg, #f0fdf4); color: var(--ok-text, #15803d); border: 1px solid var(--ok-border, #bbf7d0); }
.ask-confidence-mid  { background: var(--warn-bg, #fffbeb); color: var(--warn-text, #b45309); border: 1px solid var(--warn-border, #fcd34d); }
.ask-confidence-low  { background: var(--error-bg, #fef2f2); color: var(--error-text, #b91c1c); border: 1px solid var(--error-border, #fecaca); }