/* ==========================================================================
   Answer component (Peter, 24 Jul 2026)
   Every answer — whether from the Ask surface or the weekly summary — renders
   into this one container, so they all read the same. Deterministic + templated;
   NO AI. Voice is "pub talk": plain Irish English, sentence case, max two numbers.

   Structure:
     .answer__headline   the answer in one line (numbers plain, max two)
     .answer__body       2-3 short sentences of plain explanation
     .answer__chart      OPTIONAL chart slot (omit the element to drop it)
     .answer__link       OPTIONAL "show me" deep-link to the underlying records
     .answer__followups  OPTIONAL 2-3 follow-up suggestions

   States: full (chart + link) · minimal (headline + body) · loading · cant.
   ========================================================================== */
.answer {
  position: relative;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 28px 30px 26px;   /* more air (Peter, 8 Sep: 'fix the padding and just give more white space') */
}

/* Dismiss the result. Quiet until you go looking for it — it must not compete with the
   answer (Peter, 28 Jul). Stroke-1 per the global icon rule. */
.answer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.answer__close svg { width: 18px; height: 18px; }
.answer__close:hover { color: var(--color-text); background: var(--color-bg-subtle); }
.answer__close:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
/* Keep the headline clear of it. */
.answer__headline, .answer__lead { padding-right: 34px; }

/* ONE TYPE SIZE, AND COLOUR DOES THE WORK (Peter, 28 Jul).
   The same rule as the Home cards, rolled onto the answers: every line is 16px
   regular, the sentence sits back in muted ink, and only the figures are at full
   strength — so the eye finds the number because it is the one dark thing in the
   line, not because it is bigger or bolder. Nothing here is bold. */
.answer__headline {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 0;
}
.answer__headline strong { font-variant-numeric: tabular-nums; font-weight: var(--weight-regular); color: var(--color-text); }

.answer__body {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 14px 0 0;
  max-width: none; /* full card width (Peter, 8 Sep): the 60ch measure left a river of yellow on the right */
}

/* Optional chart slot — reuses existing chart styling (kept minimal + omittable). */
.answer__chart { margin: 26px 0 4px; }   /* sits in the text column; the -12px bleed put the axis label past the words (Peter, 8 Sep) */
.answer__chart svg { width: 100%; height: auto; display: block; overflow: visible; }
/* HOME'S CHART on an answer card (Peter, 8 Sep: "we do curved graphs with points"): same rules, same dots,
   same hover card; ink on white, the second series in the amber Home uses on yellow. */
.askchart { position: relative; padding-top: 30px; }   /* room for the hover card, so it never sits on the words above */
.askchart__grid { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 2 4; }
.askchart__axis { font-size: 11px; fill: var(--color-text-muted); }
.askchart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.askchart__line--in { stroke: var(--color-text); }
.askchart__line--out { stroke: #a8901c; }
.askchart__dot { fill: var(--color-surface); stroke-width: 2; transition: r .12s ease; }
.askchart__dot--in { stroke: var(--color-text); }
.askchart__dot--out { stroke: #a8901c; }
.askchart__dot.is-hot { r: 5.5; stroke-width: 2.5; }
.askchart__grid--zero { stroke-dasharray: none; stroke: var(--color-border-strong); }   /* the zero line when the curve dips below it */
.askchart__hit { fill: transparent; cursor: crosshair; }
.askchart__rule { stroke: var(--color-border-strong); stroke-width: 1; pointer-events: none; }
.askchart__tip { position: absolute; z-index: 5; pointer-events: none; min-width: 132px; white-space: nowrap; padding: 10px 12px; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); transform: translate(-50%, -100%); }
.askchart__tip[hidden] { display: none; }
.askchart__tiphead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--color-text-muted); }
.askchart__tipv { font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: var(--weight-medium); }
.askchart__tiprow { display: flex; align-items: center; gap: 14px; margin-top: 9px; padding-top: 9px; border-top: var(--border-width) solid var(--color-border); font-size: 13px; color: var(--color-text-muted); }
.askchart__tipcell { display: inline-flex; align-items: center; gap: 6px; }
.askchart__badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.askchart__badge--in { background: var(--color-text); color: #fff; }
.askchart__badge--out { background: rgba(168, 144, 28, 0.16); color: #6b5e00; }

/* "Show me" — a quiet link through to the filtered records. */
/* THE WAY OUT IS SECONDARY (Peter, 30 Jul, from midday). It is a sub-call to
   action, not information: the line above it — "owed to Revenue, across 5
   returns" — is what explains the card, and at the same size the link competed
   with it. Smaller, and it darkens on hover.

   NOT lighter than this, though: --color-text-muted on white is 4.61:1, and
   text has to clear 4.5:1. Anything paler fails, so the SIZE does the stepping
   back and the colour stays where it is. */
.answer__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.answer__link:hover { color: var(--color-text); }
.answer__link svg { width: 16px; height: 16px; transition: transform .15s ease; }
.answer__link:hover svg { transform: translateX(2px); }
/* A how-to answer offers to SHOW you rather than link you, so its trigger is a
   button, not an <a> — same look, button reset (Peter, 27 Jul). */
.answer__link--go { background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }
/* The how-to card's one action is a REAL button — small text read as jarring
   next to the data answers (Peter, 30 Jul). */
.answer__showme { margin-top: 14px; align-self: flex-start; }
/* The newest card's question is already in the box above it (Peter, 31 Jul —
   "you're duplicating the search term"). Displaced cards show theirs. */
.answer[data-boxheld] .answer__asked { display: none; }

/* Follow-ups — quiet, few (2-3). Not the main event. */
/* "Did you mean:" — a quiet lead-in, NOT a headline. This state is not an answer and
   must not be dressed as one: one line, then the same pills the box offers before you
   type (Peter, 28 Jul). The pills below are already identical to .ask-suggest. */
.answer__lead { font-size: var(--text-base); color: var(--color-text-muted); margin: 0; }
.answer--suggest .answer__followups { margin-top: 12px; }

.answer__followups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.answer__followup {
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.answer__followup:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.answer__followup:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* --- Loading -------------------------------------------------------------
   A calm skeleton, no spinner. Reduced-motion drops the shimmer. */
.answer--loading .answer__headline,
.answer--loading .answer__body { color: transparent; }
.answer__skel { border-radius: var(--radius-sm); background: var(--color-bg-subtle); height: 1em; }
.answer__skel--head { height: 1.4em; width: 62%; margin-bottom: 14px; }
.answer__skel--line { width: 100%; margin-top: 8px; }
.answer__skel--line.is-short { width: 70%; }
.answer__skel { position: relative; overflow: hidden; }
.answer__skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  animation: answerShimmer 1.3s ease-in-out infinite;
}
@keyframes answerShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .answer__skel::after { animation: none; } }

/* --- Can't answer --------------------------------------------------------
   Plain: it can't be answered from the books, plus a ready-made question to
   paste into their own AI/search — pre-filled with their figures. No apology. */
.answer--cant .answer__headline { font-weight: var(--weight-regular); }
.answer__paste {
  margin-top: 16px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle-light);
  padding: 14px 16px;
}
.answer__paste-label { font-size: var(--text-base); color: var(--color-text-muted); margin: 0 0 6px; }
.answer__paste-text { font-size: var(--text-base); color: var(--color-text); margin: 0; line-height: var(--leading-body); }
.answer__paste-copy {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: var(--border-width) solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-sm); padding: 7px 12px; font: inherit; font-size: var(--text-sm);
  color: var(--color-text); cursor: pointer;
}
.answer__paste-copy:hover { background: var(--color-bg-subtle); }
.answer__paste-copy svg { width: 15px; height: 15px; }

/* --- Weekly summary as plain sentences (Peter, 24 Jul) --------------------
   The weekly digest reads as a few sentences, not cards. One line per item. */
.week-line {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  /* Sentence back, figures forward — the same rule as everywhere else now
     (Peter, 28 Jul). It used to be dark text with the numbers in medium. */
  color: var(--color-text-muted);
  margin: 0;
  /* Full width, like the cards under it (Peter, 28 Jul) — the 62ch measure made it
     wrap early and gave the section a ragged right edge of its own. */
}
.week-line strong { font-variant-numeric: tabular-nums; font-weight: var(--weight-regular); color: var(--color-text); }

/* ---- Figure cards inside an answer (Peter, 28 Jul) -------------------------
   Four facts at a glance instead of four numbers buried in a sentence. The
   prose above still does the interpreting — these only hold the numbers.
   Quiet fill, no border: they sit inside the answer, they are not cards on a
   page. Two up, stacking to one on a narrow screen. */
.answer__figs {
  display: grid;
  /* TWO up, always — four figures make a clean block. auto-fit gave three and
     left a lone card hanging on the second row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 520px) { .answer__figs { grid-template-columns: 1fr; } }
.answer__fig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.answer__fig-label { font-size: var(--text-base); color: var(--color-text-muted); }
.answer__fig-value {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-body);
  color: var(--color-text);
}
.answer__fig-sub { font-size: var(--text-base); color: var(--color-text-muted); }


/* ---- The run of what you asked (Peter, 28 Jul) -----------------------------
   A second question APPENDS underneath instead of replacing the first answer, so
   you can see the run you have been through. Each card carries the question that
   produced it — a column of bare answers is unreadable — and each can be closed
   on its own with its own X. */
.answer-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.answer-stack[hidden] { display: none; }

/* The question, quietly, above its answer: it names the card without competing
   with the answer under it. Sits clear of the close button like the headline. */
/* The question in FULL-STRENGTH ink (Peter, 30 Jul): it anchors the answer under
   it, and in muted grey it read as chrome rather than as the thing you asked. */
.answer__asked {
  margin: 0 0 10px;
  padding-right: 34px;
  font-size: var(--text-base);
  color: var(--color-text);
}

/* "I read that as …" — only when the keyword ladder guessed (no model, no exact
   shape). Quiet by design: it qualifies the answer without shouting at it. */
.answer__readas {
  margin: -4px 0 10px;
  padding-right: 34px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Each card after the first arrives from just below — the run grows downwards,
   it does not blink into place. */
.answer-stack > .answer + .answer { animation: answerIn .4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes answerIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .answer-stack > .answer + .answer { animation: none; } }

/* ---- "This isn't right" (Peter, 29 Jul) ------------------------------------
   A wrong answer is only worth something if it comes back to us. Quiet and last,
   so it never competes with the answer, but on every card — you only find out an
   answer was wrong by reading it. */
.answer__flagrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: var(--border-width) solid var(--color-border);
}
.answer__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.answer__flag svg { width: 14px; height: 14px; }
button.answer__flag:hover { color: var(--color-text); }
button.answer__flag:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.answer__flag--done { cursor: default; }
/* The reassurance that rides on an AI answer (Peter, 14 Aug): a statement, not
   a control — it takes the room, and the way out sits beside it. */
.answer__flag--note { cursor: default; flex: 1 1 260px; line-height: 1.45; }

/* ---- the words arrive like type (Peter, 31 Jul) ---------------------------
   ask.js wraps each word of the headline/body in .answer__w with a staggered
   delay: the full sentence sits in light grey from the first frame, and the
   words fill to full ink in reading order. Nothing is hidden — it is a fill,
   not a typewriter. */
/* v2 (Peter, 31 Jul: the grey fill "doesn't feel like wow"): each word now
   MATERIALISES — soft blur to sharp, rising a touch, at reading cadence.
   The Apple-Intelligence/ChatGPT arrival, without hiding meaning for long. */
.answer__w {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(3px);
  animation: answerWordIn .42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes answerWordIn { to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .answer__w { animation: none; opacity: 1; filter: none; transform: none; } }


/* ---- Sana-style cards on the ask surfaces (Peter, 31 Jul, from his phone
   shots: "each answer sits in the little cards like that — similar card
   design to the dashboard"). Scoped to the ask stacks + the voice screen so
   the component's other uses are untouched. */
.ask-answer-wrap .answer,
.voice__answer.answer {
  border-color: rgba(17, 17, 17, 0.04);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 12px 32px -18px rgba(17, 17, 17, 0.14);
  padding: 32px 34px 30px;   /* more air (Peter, 8 Sep) */
}
/* the joined-to-the-field first card keeps its square top — the join wins */
.ask-box.is-answering ~ .ask-answer-wrap .answer:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* the quiet kicker over a voice answer — "Tax", "Payroll" — the Sana card's
   eyebrow, from the question's own category */
.voice__kicker {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

/* ==== THE "DO IT FOR ME" DOORS (13-14 Aug 2026) ====
   The whole journey lives in the answer card (Peter: no jumping into the
   section). Option rows are full-width quiet cards; inputs share one row
   with their button; the done state is a sentence + the link. */
/* align-items + the margin reset: .answer__showme carries a 14px top margin
   for its solo layout, which stretched the OTHER button to a taller row
   (Peter, 14 Aug — "different sizes"). */
.answer__doors { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.answer__doors .answer__showme { margin-top: 0; }
/* The flow gets its OWN white panel (Peter, 14 Aug — "styling is still off"):
   on Home the answer sits on the yellow canvas, and bare muted text on yellow
   was illegible. The panel gives every surface the same calm white ground. */
.answer__door {
  margin-top: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px 18px;
}
.answer__door .answer__lead { margin: 0 0 2px; }
.answer__doorlist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 320px; overflow-y: auto; }
.answer__dooropt {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 10px;
  padding: 11px 14px; font: inherit; font-size: 14px; color: var(--color-text);
  cursor: pointer; text-align: left; transition: border-color 0.15s ease;
}
.answer__dooropt:hover { border-color: var(--color-border-strong); }
.answer__dooropt-amt { font-variant-numeric: tabular-nums; color: var(--color-text-muted); flex: none; }
.answer__door-amt { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.answer__door-amt .input { flex: 1 1 160px; min-width: 120px; }
.answer__door-amt .btn { white-space: nowrap; }
.answer__door-note { margin: 8px 0 0; font-size: 13px; color: var(--color-text-muted); }


/* DOORS LOOK LIKE DOORS (Peter, 27 Aug: "they're just not as obvious as the
   pills"). The split is deliberate and stays: a LINK leaves the conversation
   (open the invoices, open the report); a PILL continues it (ask the next
   question). But quiet text undersold the doors — they now wear an outlined
   pill so they read as tappable, while follow-up pills keep their soft fill.
   Two shapes, both obvious, still distinguishable at a glance. */
/* …formatted EXACTLY like the follow-up pills (Peter, 28 Aug: "fix the
   formatting of those pills") — same padding, same radius, same border
   weight; the doors are told apart by full-strength text + the arrow, not by
   a mismatched outline. */
.answer__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: var(--border-width, 1px) solid var(--color-border, #e7e7ea);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-full, 999px);
  padding: 7px 14px;
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium, 500);
  color: var(--color-text, #111);
  transition: border-color .15s ease;
}
.answer__link:hover { border-color: var(--color-text, #111); }
.answer__link svg { flex: none; }


/* the door pills can never touch (Peter, 28 Aug) — a floor of space between
   them even outside the .answer__doors wrapper */
.answer__link + .answer__link { margin-left: 12px; }

/* THE JOBS LIST inside the "which jobs made me money" answer (8 Sep): one row per job, the margin dark, the
   sums quiet, and the ONE question we ever ask ("about right, or longer?") as two small pills */
.mb-jobs { margin-top: 14px; border-top: var(--border-width) solid var(--color-border); }
.mb-job { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-bottom: var(--border-width) solid var(--color-border); font-size: var(--text-sm); }
.mb-job__name { color: var(--color-text); font-size: var(--text-base); }
.mb-job__margin { color: var(--color-text); font-size: var(--text-base); font-variant-numeric: tabular-nums; text-align: right; }
.mb-job__margin.is-loss { color: var(--color-danger); }
.mb-job__meta, .mb-job__ask, .mb-job__open, .mb-job__noted { grid-column: 1 / -1; color: var(--color-text-muted); }
.mb-job__ask button { margin-left: 8px; border: var(--border-width) solid var(--color-border); background: var(--color-surface); border-radius: 999px; font: inherit; font-size: var(--text-xs); color: var(--color-text); padding: 3px 10px; cursor: pointer; }
.mb-job__ask button:hover { background: var(--color-bg-subtle); }