/* =====================================================================
   VIA — conversational interface over the FY26 Annual Report
   ---------------------------------------------------------------------
   Loaded AFTER main.css, which supplies the design tokens (--brand-blue,
   --font-display, --ink) and the #site-waves molecular background rule.

   DESIGN INTENT — read before changing anything structural.

   This is styled as a RESEARCH DOCUMENT, not a chat. The first pass was
   built on the default assistant vocabulary -- glass card + pale border +
   999px pill, repeated for every element -- and it read as a generic
   chatbot bolted onto a beautiful report. Specific things that are
   deliberate now, and that quietly reintroduce that problem if undone:

     * ONE reading surface. The thread is a single white "sheet" floating
       on the molecular background. Answers are NOT individual cards, and
       the data figure is NOT a card inside a card. Separation comes from
       hairlines and whitespace. Nesting bordered boxes was the single
       biggest contributor to the cheap look.
     * A left gutter carrying numbered turns, like a referenced document.
       This is the main structural device and what stops it reading as
       message bubbles.
     * Real typographic hierarchy. Questions are large Poppins in brand
       blue; body prose is set at a proper measure (~68ch) at a comfortable
       size. Previously everything sat between 0.66-0.95rem in near-
       identical greys, so nothing led.
     * Small-caps letterspaced labels in brand blue for metadata, borrowed
       from the report's own eyebrow treatment.
     * Icons are inline SVG at a consistent 14px / 1.75 stroke. The earlier
       glyph characters had mismatched weights and baselines.
     * Pills survive ONLY where the report itself uses them -- the composer
       and genuine buttons. Everything else is text + rules.

   Inherited from the report and kept: flat corners on anything box-like,
   Poppins for display, the Typekit "arial" family for body.
   ===================================================================== */

:root {
  --via-hair: rgba(37, 64, 143, 0.13);
  --via-hair-strong: rgba(37, 64, 143, 0.26);
  --via-text: #16202b;
  --via-muted: #6b7885;
  --via-faint: #97a3ae;
  --via-green: #6ba32e;
  --via-sheet: 1100px;
}

.via-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--via-text);
}

/* ---- top bar --------------------------------------------------------
   Deliberately not the report's mega-menu: this is a focused work
   surface. Hairline bottom rule rather than a shadow -- the whole page
   is built on rules, and a soft shadow here would be the only soft edge.
   -------------------------------------------------------------------- */
.via-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.8rem clamp(1rem, 4vw, 2.6rem);
  background: rgba(252, 253, 253, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--via-hair);
}

.via-bar__home { display: flex; align-items: center; flex-shrink: 0; }
.via-bar__home img { height: 36px; width: auto; display: block; }

.via-bar__mark {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--via-hair);
}
/* The wordmark carries the letterspacing the rest of the page uses for
   labels -- it's the type system's anchor, not just a logo. */
.via-bar__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.22em;
  color: var(--brand-blue);
}
.via-bar__tag {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--via-faint);
}

.via-bar__spacer { flex: 1; }

/* Mode switch — underline tabs, not a filled segmented pill. A filled
   pill here was one more rounded grey object in a page that already had
   too many; underlines read as editorial and cost nothing in clarity. */
.via-modes { display: inline-flex; gap: 1.3rem; }
.via-modes__btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.3rem 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--via-faint);
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.via-modes__btn:hover { color: var(--via-muted); }
.via-modes__btn.is-active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

.via-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--via-muted);
  transition: color 0.18s ease;
}
.via-bar__back:hover { color: var(--brand-blue); }

/* ---- composition ----------------------------------------------------
   The thread is a solid white sheet; the sources rail sits OUTSIDE it, on
   the molecular background. That contrast -- opaque document, living
   margin -- is what ties this page to the report visually, and it also
   solves readability over the animated canvas without giving every
   answer its own glass card.
   -------------------------------------------------------------------- */
.via-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
  align-items: start;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(0.75rem, 3vw, 2.6rem);
}

.via-thread {
  min-width: 0;
  background: #fff;
  border-left: 1px solid var(--via-hair);
  border-right: 1px solid var(--via-hair);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3.4rem) 220px;
  min-height: calc(100vh - 64px);
}

/* ---- empty state ----------------------------------------------------
   Not "What would you like to know?" -- that phrasing is the assistant
   cliché and says nothing. This states what VIA is and what it will not
   do, then presents the prompts as a CONTENTS LIST rather than floating
   pills. The prompts are the report's table of contents in disguise (you
   can't form a question about a document whose contents you don't know),
   so making them look like a contents page is honest as well as calmer.
   -------------------------------------------------------------------- */
.via-intro { max-width: 780px; }

.via-intro__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 1.6rem;
}
.via-intro__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--via-hair);
}

/* Two-tone heading, borrowed from the report's own .verticals__head
   treatment (first line green, second brand-blue, lighter weight) so VIA
   inherits an existing brand device instead of inventing a new one. */
.via-intro__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--brand-blue);
  margin: 0 0 1.3rem;
}
.via-intro__title em {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: #7fb943;
}

.via-intro__sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--via-muted);
  margin: 0 0 3rem;
  max-width: 54ch;
}

.via-starters__group {
  border-top: 1px solid var(--via-hair);
  padding-top: 1.1rem;
  margin-bottom: 2rem;
}
.via-starters__group-title {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--via-faint);
  margin: 0 0 0.5rem;
}

/* Contents-list rows. The arrow slides in on hover -- the only motion in
   the empty state, so it reads as "this is the interactive thing". */
.via-ask {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--via-hair);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--via-text);
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.via-ask:last-child { border-bottom: none; }
.via-ask:hover { color: var(--brand-blue); padding-left: 0.4rem; }
.via-ask__arrow {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  color: var(--brand-blue);
}
.via-ask:hover .via-ask__arrow { opacity: 1; transform: translateX(0); }

/* ---- turns ----------------------------------------------------------
   The left gutter with a numbered turn and a vertical rule is the main
   structural device on this page. It's what makes a sequence of answers
   read as a referenced document rather than a stack of chat bubbles --
   if this goes, the chat metaphor comes straight back.
   -------------------------------------------------------------------- */
.via-turn {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 1.4rem;
  padding-bottom: 3.4rem;
  margin-bottom: 3.4rem;
  border-bottom: 1px solid var(--via-hair);
}
.via-turn:last-child { border-bottom: none; margin-bottom: 0; }

.via-turn__gutter {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 0.35rem;
}
.via-turn__num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-blue);
  font-variant-numeric: tabular-nums;
}
/* vertical rule dropping from the number, anchoring the turn */
.via-turn__gutter::after {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 0;
  width: 1px;
  background: var(--via-hair);
}

.via-turn__body { min-width: 0; }

.via-q__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--brand-blue);
  margin: 0 0 1rem;
  max-width: 24ch;
  max-width: 30ch;
}

/* Retrieval trace. Plain letterspaced text with middot separators rather
   than grey chips -- chips made it look like tagging UI, and this is
   provenance metadata, which belongs in the same quiet register as the
   citations. */
.via-trace {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--via-faint);
  margin-bottom: 1.6rem;
}
.via-trace__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #7fb943;
  flex-shrink: 0;
}
.via-trace.is-working .via-trace__dot { animation: viaPulse 1s ease-in-out infinite; }
@keyframes viaPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.via-trace__src { color: var(--via-muted); }
.via-trace__src + .via-trace__src::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--via-faint);
}

/* The answer is PROSE ON THE PAGE -- no card, no border, no tinted left
   bar. Set at a real measure so it reads as writing rather than output. */
.via-a { max-width: 68ch; }
.via-a p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--via-text);
  margin: 0 0 1rem;
}
.via-a p:last-of-type { margin-bottom: 0; }
.via-a strong {
  color: var(--brand-blue);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Inline citation. A true superscript numeral, not a filled chip --
   compliance requires per-claim traceability, and academic superscripts
   are the established, unobtrusive form for exactly that. The underline
   appears on hover so it's discoverable without shouting. */
.via-cite {
  display: inline-block;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 0.1rem;
  margin-left: 1px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.42em;
  color: #7fb943;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.via-cite:hover, .via-cite.is-active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

/* ---- data figure ----------------------------------------------------
   A FIGURE, not a card: hairline rules top and bottom, no border box, no
   fill. Nesting a bordered panel inside a bordered answer was the worst
   of the box-in-box nesting. Narrow on purpose -- a chart communicates
   through the ratio between bars, which is legible small.
   -------------------------------------------------------------------- */
.via-data {
  margin: 1.8rem 0 0.4rem;
  max-width: 380px;
  border-top: 1px solid var(--via-hair);
  padding-top: 0.9rem;
}
.via-data__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.via-data__title {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0;
}
.via-data__unit {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--via-faint);
  text-transform: none;
}
.via-data__delta {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--via-green);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.via-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  /* This height is shared between the value label, the bar track and the
     period label, so the bars themselves only get what's left. At 88px the
     track came out ~48px and the bars read as stubby squares rather than
     bars. Keep enough headroom here that the tallest bar is clearly taller
     than it is wide. */
  height: 146px;
  border-bottom: 1px solid var(--via-hair-strong);
}
.via-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.via-bars__val {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--via-muted);
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.via-bars__track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.via-bars__bar {
  width: 100%;
  max-width: 34px;
  background: rgba(37, 64, 143, 0.14);
  transform-origin: bottom;
  animation: viaGrow 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* current year in the report's own blue→green accent pair */
.via-bars__bar--accent { background: linear-gradient(180deg, #5bc0e8, #8bc751); }
@keyframes viaGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.via-bars__label {
  font-family: var(--font-display);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--via-faint);
  margin-top: 0.55rem;
}

/* ---- not-in-the-report ----------------------------------------------
   A distinct answer TYPE, not an error. Marked with a yellow rule and a
   label rather than a warning card -- it is a legitimate, correct answer,
   and dressing it as an error would misrepresent that. */
.via-none__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a37a00;
  border-left: 2px solid #ffcb05;
  padding-left: 0.7rem;
  margin: 0 0 1rem;
}

/* ---- actions --------------------------------------------------------
   Text + icon, separated by hairlines. Pills here made every answer end
   in a row of grey lozenges, which was a lot of the chatbot feel. */
.via-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--via-hair);
}
.via-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--via-muted);
  transition: color 0.18s ease;
}
.via-action:hover { color: var(--brand-blue); }
.via-action svg { flex-shrink: 0; }
.via-action--primary { color: var(--brand-blue); }
.via-action--primary:hover { color: #16295e; }
.via-action.is-done { color: var(--via-green); }

/* ---- follow-ups ----------------------------------------------------- */
.via-followups { margin-top: 1.8rem; }
.via-followups__label {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--via-faint);
  margin: 0 0 0.5rem;
}
.via-followup {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 46ch;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--via-hair);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--via-text);
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.via-followup:hover { color: var(--brand-blue); padding-left: 0.35rem; }
.via-followup svg { flex-shrink: 0; color: var(--via-faint); }
.via-followup:hover svg { color: var(--brand-blue); }

/* ---- evidence rail --------------------------------------------------
   Margin notes, not cards. Sits on the molecular background outside the
   white sheet, so it reads as apparatus around the document rather than
   another panel inside it. Persistent and side-by-side -- never a modal;
   the whole point is reading answer and evidence against each other.
   -------------------------------------------------------------------- */
.via-sources {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 4rem) 0 3rem;
}
.via-sources__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 1.2rem;
}
.via-sources__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--via-hair);
}
.via-sources__empty {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--via-faint);
  margin: 0;
  max-width: 32ch;
}

.via-source {
  padding: 0 0 1.3rem 0.9rem;
  margin-bottom: 1.3rem;
  border-left: 2px solid var(--via-hair);
  border-bottom: 1px solid var(--via-hair);
  transition: border-left-color 0.22s ease;
}
.via-source:last-child { border-bottom: none; margin-bottom: 0; }
.via-source.is-active { border-left-color: var(--brand-blue); }

.via-source__ref {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.via-source__page {
  color: var(--brand-blue);
  font-variant-numeric: tabular-nums;
  /* "PAGE NO. 25" is wide at this letter-spacing; it must never break
     between the label and its number. The section beside it may wrap. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.via-source__sec { color: var(--via-faint); font-weight: 500; min-width: 0; }

.via-source__quote {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #3a4a58;
  margin: 0 0 0.7rem;
}
.via-source__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
}
.via-source__link:hover { text-decoration: underline; }

/* ---- composer -------------------------------------------------------
   Sits over the white sheet only, never across the sources rail. Kept as
   a pill because the report itself uses pill controls (.btn-cta, nav) --
   this is one of the few places that vocabulary is genuinely on-brand
   rather than borrowed from chat UI.
   -------------------------------------------------------------------- */
.via-composer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  pointer-events: none;
  padding: 0 clamp(0.75rem, 3vw, 2.6rem);
}
.via-composer__grid {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1rem, 3vw, 3rem);
}
.via-composer__inner {
  pointer-events: auto;
  min-width: 0;
  padding: 1.6rem clamp(1.2rem, 4vw, 3.4rem) 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 34%);
  border-left: 1px solid var(--via-hair);
  border-right: 1px solid var(--via-hair);
}
.via-composer__box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.42rem 0.42rem 1.4rem;
  background: #fff;
  border: 1px solid var(--via-hair-strong);
  border-radius: 999px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.via-composer__box:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(37, 64, 143, 0.08);
}
.via-composer__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--via-text);
  padding: 0.55rem 0;
}
.via-composer__input::placeholder { color: var(--via-faint); }
.via-composer__send {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.via-composer__send:hover { transform: scale(1.06); }
.via-composer__send:disabled { opacity: 0.22; cursor: default; transform: none; }

/* Standing disclaimer -- compliance requires it visible, UX requires it
   not behave like a cookie banner. One quiet line satisfies both. */
.via-disclaimer {
  margin: 0.7rem 0 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--via-faint);
  text-align: center;
}
.via-disclaimer strong { color: var(--via-muted); font-weight: 600; }

/* ---- mobile ---------------------------------------------------------
   Investors read on a phone in the evening; desktop-only means the
   feature doesn't exist for them. The rail can't survive as a column, so
   it becomes a per-answer drawer.
   -------------------------------------------------------------------- */
.via-sources-toggle { display: none; }
.via-sources__close { display: none; }

@media (max-width: 1100px) {
  .via-main { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .via-thread { border-left: none; border-right: none; }
  .via-composer { padding: 0; }
  .via-composer__grid { grid-template-columns: minmax(0, 1fr); }
  .via-composer__inner { border-left: none; border-right: none; }

  .via-sources {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    z-index: 60;
    max-height: 78vh;
    background: #fff;
    box-shadow: 0 -16px 44px rgba(16, 51, 34, 0.2);
    border-top: 1px solid var(--via-hair-strong);
    transform: translateY(101%);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 1.6rem 1.3rem 2.4rem;
  }
  .via-sources.is-open { transform: translateY(0); }
  .via-sources__close {
    display: block;
    position: absolute;
    top: 1rem; right: 1.1rem;
    border: none; background: none; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: var(--via-faint);
  }
  .via-sources-toggle { display: inline-flex; }
}

@media (max-width: 700px) {
  .via-bar { gap: 0.8rem; padding: 0.7rem 1rem; }
  .via-bar__mark { display: none; }
  .via-bar__back span { display: none; }
  .via-modes { gap: 0.9rem; }
  .via-modes__btn { font-size: 0.74rem; }

  .via-thread { padding: 2rem 1.2rem 210px; }
  .via-turn { grid-template-columns: 26px minmax(0, 1fr); gap: 0 0.9rem; }
  .via-turn__gutter::after { top: 1.6rem; }
  .via-q__text { font-size: 1.2rem; max-width: none; }
  .via-a p { font-size: 0.98rem; }
  .via-data { max-width: 100%; }
  .via-bars { height: 132px; }
  .via-actions { gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .via-bars__bar { animation: none; }
  .via-trace.is-working .via-trace__dot { animation: none; }
  .via-sources { transition: none; }
  .via-ask, .via-followup { transition: color 0.18s ease; }
  .via-ask:hover, .via-followup:hover { padding-left: 0; }
}

/* ── Real-answer elements ────────────────────────────────────────────
   The prototype only ever emitted <p> and <strong>. A live model writes
   Markdown — lists, headings, tables, code — and the backend can attach
   source figures and single-value cards. Styled to the same measure and
   restraint as .via-a prose so a list doesn't read as a different
   component from the paragraph above it. */
.via-a ul,
.via-a ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--via-text);
}
.via-a li { margin-bottom: 0.35rem; }
.via-a li::marker { color: var(--via-muted); }
.via-a h1,
.via-a h2,
.via-a h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--via-text);
  margin: 1.5rem 0 0.6rem;
}
.via-a code {
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--via-faint);
}
.via-a pre {
  overflow-x: auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--via-hair);
  border-radius: 6px;
  background: var(--via-faint);
}
.via-a pre code { padding: 0; background: none; }
.via-a blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--via-hair-strong);
  color: var(--via-muted);
}
/* Tables scroll inside their own box: a wide financial table must never
   make the whole page scroll sideways. */
.via-a table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.via-a th,
.via-a td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--via-hair);
  text-align: left;
}
/* Figures must never wrap mid-number; headers should, because a model
   writes them long ("FY 2025-26 (As at 31 March 2026)") and holding those
   on one line is what pushes a 3-column table off the edge. */
.via-a td { white-space: nowrap; }
.via-a th {
  font-weight: 600;
  color: var(--via-muted);
  border-bottom-color: var(--via-hair-strong);
  white-space: normal;
  min-width: 6.5rem;
  vertical-align: bottom;
}

/* A card with a headline figure but no series — rendered as the number
   itself rather than a one-bar chart, which would read as broken. */
.via-data__single {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-blue);
  font-variant-numeric: tabular-nums;
}

/* Source figures (ENABLE_IMAGES=1). Off by default, so this is the
   fallback path rather than the common one. */
.via-figure { margin: 1.25rem 0 0; }
.via-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--via-hair);
  border-radius: 6px;
}
.via-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--via-muted);
}

/* ── Recent conversations ────────────────────────────────────────────
   A left drawer, not a third column. Built from the same materials as
   the rest of the page: hairline rules, uppercase eyebrow heading, no
   soft shadows except the one that lifts the drawer off the sheet. */
.via-bar__tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--via-muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.via-bar__tool:hover {
  color: var(--brand-blue);
  border-color: var(--via-hair-strong);
  background: rgba(255, 255, 255, 0.6);
}
.via-bar__tool[aria-expanded="true"] {
  color: var(--brand-blue);
  border-color: var(--via-hair-strong);
}

.via-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 25, 45, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.via-scrim.is-open { opacity: 1; pointer-events: auto; }

.via-recent {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(340px, 86vw);
  height: 100vh;
  background: #fff;
  border-right: 1px solid var(--via-hair);
  transform: translateX(-100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 40px rgba(15, 25, 45, 0.07);
}
.via-recent.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .via-recent { transition: none; }
  .via-scrim { transition: none; }
}

.via-recent__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.5rem 1.4rem 1rem;
  border-bottom: 1px solid var(--via-hair);
}
.via-recent__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.via-recent__close {
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--via-muted);
  padding: 0 0.2rem;
}
.via-recent__close:hover { color: var(--brand-blue); }

.via-recent__body { flex: 1; overflow-y: auto; padding: 0.5rem 0 1rem; }

.via-recent__group {
  margin: 1.1rem 1.4rem 0.45rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--via-faint);
}

/* The row holds the item and its actions side by side so the actions can
   sit over the item's right edge without being inside its <button>. */
.via-recent__row { position: relative; display: flex; align-items: stretch; }
.via-recent__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 1.4rem;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.via-recent__item:hover { background: var(--via-faint-bg, rgba(37, 64, 143, 0.035)); }
.via-recent__item.is-active {
  border-left-color: var(--brand-blue);
  background: rgba(37, 64, 143, 0.05);
}
.via-recent__title-line,
.via-recent__title { display: block; }
.via-recent__item .via-recent__title {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--via-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.via-recent__snippet {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--via-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.via-recent__time {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  color: var(--via-faint);
}

.via-recent__acts {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-right: 0.9rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.via-recent__row:hover .via-recent__acts,
.via-recent__row:focus-within .via-recent__acts { opacity: 1; }
.via-recent__act {
  border: 0;
  background: none;
  padding: 0.3rem;
  border-radius: 4px;
  color: var(--via-muted);
  cursor: pointer;
  line-height: 0;
}
.via-recent__act:hover:not(:disabled) { color: var(--brand-blue); background: var(--via-faint); }
.via-recent__act:disabled { opacity: 0.35; cursor: not-allowed; }

.via-recent__empty,
.via-recent__note {
  margin: 0;
  padding: 1rem 1.4rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--via-faint);
}
.via-recent__note { border-top: 1px solid var(--via-hair); }

/* The two tool buttons lose their labels before the bar wraps. */
@media (max-width: 720px) {
  .via-bar__tool span { display: none; }
  .via-bar__tool { padding: 0.34rem 0.45rem; }
}

/* Inline rename input — sits exactly where the title was. */
.via-recent__rename {
  flex: 1;
  min-width: 0;
  margin: 0.6rem 1.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--brand-blue);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--via-text);
  background: #fff;
}
.via-recent__rename:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 64, 143, 0.12); }

/* Second click on delete confirms; the row itself states the stake. */
.via-recent__act.is-danger {
  width: auto;
  padding: 0.22rem 0.45rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #b3261e;
  border: 1px solid rgba(179, 38, 30, 0.4);
  background: rgba(179, 38, 30, 0.06);
}
.via-recent__act.is-danger:hover { background: rgba(179, 38, 30, 0.12); }
/* The confirm state must stay visible without a hover — on touch there is
   no hover, so the row actions are revealed whenever one is armed. */
.via-recent__row:has(.is-danger) .via-recent__acts { opacity: 1; }

.via-recent__loading {
  padding: 2rem 0;
  font-size: 0.9rem;
  color: var(--via-muted);
}

/* A restored citation has no stored passage; this replaces the quote. */
.via-source__note {
  margin: 0.5rem 0 0.6rem;
  font-size: 0.78rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--via-faint);
}

/* Export is unavailable until there is a conversation to export. */
.via-bar__tool:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: transparent;
  background: none;
  color: var(--via-muted);
}

/* ── Curated portraits ───────────────────────────────────────────────
   A row of small cards rather than stacked figures: several head-and-
   shoulders shots at answer width would outweigh the answer itself. */
.via-people {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.4rem 0 0;
}
.via-person {
  margin: 0;
  width: 122px;
}
.via-person img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--via-hair);
  border-radius: 5px;
  background: var(--via-faint);
}
.via-person__cap { display: block; margin-top: 0.45rem; }
.via-person__name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--via-text);
}
.via-person__role {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--via-muted);
}
@media (max-width: 520px) {
  .via-people { gap: 0.75rem; }
  .via-person { width: calc(50% - 0.38rem); }
  .via-person img { height: 150px; }
}

/* ── Zoomable images ─────────────────────────────────────────────────
   The thumbnail is a button so it is keyboard-reachable; the button is
   stripped back to the image it contains. */
.via-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
  border-radius: 5px;
}
.via-zoom:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}
.via-person .via-zoom img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--via-hair);
  border-radius: 5px;
  background: var(--via-faint);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.via-person .via-zoom:hover img {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 25, 45, 0.14);
}
.via-figure .via-zoom img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--via-hair);
  border-radius: 6px;
}

/* ── Lightbox ───────────────────────────────────────────────────────
   Opens with a scale-up from 92%, which reads as the thumbnail growing
   rather than a new panel appearing. */
.via-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(12, 20, 36, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.via-lightbox.is-open { opacity: 1; }

.via-lightbox__fig {
  margin: 0;
  max-width: min(620px, 92vw);
  transform: scale(0.92);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
  cursor: default;
}
.via-lightbox.is-open .via-lightbox__fig { transform: scale(1); }
.via-lightbox__fig img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.via-lightbox__cap { display: block; margin-top: 1rem; text-align: center; }
.via-lightbox__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.via-lightbox__role {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}
.via-lightbox__close {
  position: absolute;
  top: clamp(0.6rem, 2vw, 1.4rem);
  right: clamp(0.6rem, 2vw, 1.4rem);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.via-lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }

@media (prefers-reduced-motion: reduce) {
  .via-lightbox,
  .via-lightbox__fig,
  .via-person .via-zoom img { transition: none; }
  .via-lightbox__fig { transform: none; }
}

/* ── Install to home screen ──────────────────────────────────────────
   A card above the composer, not a full-screen interstitial: this is an
   offer, and the reader came for the report. Sits above the composer so
   it never covers the input. */
.via-install {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  z-index: 120;
  width: min(420px, calc(100vw - 1.6rem));
  transform: translate(-50%, 130%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
  background: #fff;
  border: 1px solid var(--via-hair);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 25, 45, 0.18);
  padding: 1rem 1.1rem 1.1rem;
}
.via-install.is-open { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .via-install { transition: none; } }

.via-install__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.via-install__icon {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  border: 1px solid var(--via-hair);
  flex: 0 0 auto;
}
.via-install__titles { flex: 1; min-width: 0; }
.via-install__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--via-text);
}
.via-install__sub {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--via-muted);
}
.via-install__x {
  flex: 0 0 auto;
  border: 0;
  background: none;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0 0.15rem;
  color: var(--via-faint);
  cursor: pointer;
}
.via-install__x:hover { color: var(--via-text); }

.via-install__actions { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.via-install__go {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 7px;
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.via-install__go:hover { filter: brightness(1.08); }
.via-install__later {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--via-hair-strong);
  border-radius: 7px;
  background: none;
  color: var(--via-muted);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

/* iOS has no install API, so these are instructions rather than buttons. */
.via-install__steps {
  margin: 0.9rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--via-text);
}
.via-install__steps li { margin-bottom: 0.2rem; }
.via-install__steps svg {
  vertical-align: -3px;
  margin: 0 0.15rem;
  color: var(--brand-blue);
}

/* Standalone mode has no browser chrome, so the composer needs to clear
   the iPhone home indicator itself. */
@supports (padding: env(safe-area-inset-bottom)) {
  .via-composer { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ── Voice trigger in the composer ───────────────────────────────────── */
.via-composer__mic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-right: 0.15rem;
  border: 1px solid var(--via-hair-strong);
  border-radius: 50%;
  background: none;
  color: var(--via-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.via-composer__mic:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  background: rgba(37, 64, 143, 0.05);
}
.via-composer__mic[hidden] { display: none; }

/* ── Orb speech mode ──────────────────────────────────────────────────
   Full screen, because hands-free means the reader is not looking at a
   layout — they need one unmistakable object that says what is happening.

   Colour comes from the logo itself, not from an invented palette:
     #034EA2  deep blue   (the mark's dominant fill)
     #44C8F5  cyan        (its accent droplet)
     #8BC751  leaf green
     #FFCB05  yellow      (used only as a rim, as in the mark)
   Note the logo blue is BRIGHTER than the site's --brand-blue (#25408f),
   which is why the orb reads as the mark rather than as the page. */
.via-orb {
  --orb-blue: #034EA2;
  --orb-cyan: #44C8F5;
  --orb-green: #8BC751;
  --orb-yellow: #FFCB05;

  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: clamp(1.5rem, 6vw, 3rem);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
  text-align: center;
  /* The report's own pale tints, so the overlay belongs to the site. */
  background:
    radial-gradient(70% 55% at 50% 34%, rgba(196, 231, 238, 0.55) 0%, rgba(196, 231, 238, 0) 70%),
    radial-gradient(80% 60% at 78% 82%, rgba(224, 253, 238, 0.6) 0%, rgba(224, 253, 238, 0) 72%),
    linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
}
.via-orb.is-open { display: flex; }

.via-orb__close {
  position: absolute;
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--via-hair-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: var(--via-muted);
  cursor: pointer;
}
.via-orb__close svg { width: 18px; height: 18px; }
.via-orb__close:hover { color: var(--orb-blue); border-color: var(--orb-blue); }

.via-orb__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(210px, 44vh, 330px);
}

/* Rings only while listening — the visual answer to "is it hearing me?".
   They expand out of the orb and fade, so the motion reads as intake. */
.via-orb__ring {
  position: absolute;
  width: clamp(132px, 34vw, 176px);
  height: clamp(132px, 34vw, 176px);
  border-radius: 50%;
  border: 1.5px solid rgba(3, 78, 162, 0.35);
  opacity: 0;
  pointer-events: none;
}
.via-orb[data-state="listening"] .via-orb__ring {
  animation: viaOrbRing 2.8s ease-out infinite;
}
.via-orb[data-state="listening"] .via-orb__ring--2 { animation-delay: 1.4s; }
@keyframes viaOrbRing {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* The ball: the logo's blue running through cyan into leaf green. */
.via-orb__ball {
  position: relative;
  width: clamp(132px, 34vw, 176px);
  height: clamp(132px, 34vw, 176px);
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 26% 18%, rgba(68, 200, 245, 0.85) 0%, rgba(68, 200, 245, 0) 55%),
    linear-gradient(152deg, var(--orb-blue) 0%, #1668B5 38%, #3FA3B0 62%, var(--orb-green) 100%);
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  box-shadow:
    0 18px 50px rgba(3, 78, 162, 0.34),
    inset 0 -14px 30px rgba(3, 42, 90, 0.28);
  transition: width 0.35s ease, height 0.35s ease, opacity 0.25s ease, box-shadow 0.3s ease;
  animation: viaOrbMorph 9s ease-in-out infinite;
}
/* Specular highlight — gives the blob volume instead of reading as a flat
   gradient swatch. Its own layer so a state change cannot overwrite it. */
.via-orb__gloss {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(38% 30% at 30% 22%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.via-orb__glyph { position: relative; display: inline-flex; }
.via-orb__glyph svg {
  width: clamp(38px, 10vw, 50px);
  height: clamp(38px, 10vw, 50px);
  filter: drop-shadow(0 2px 6px rgba(3, 42, 90, 0.35));
}

@keyframes viaOrbMorph {
  0%, 100% { border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; }
  33%      { border-radius: 56% 44% 46% 54% / 44% 58% 42% 56%; }
  66%      { border-radius: 44% 56% 58% 42% / 56% 42% 58% 44%; }
}
@keyframes viaOrbBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes viaOrbPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* Each state changes SIZE as well as motion, so it is legible from across
   a desk and not only by its animation speed. */
.via-orb[data-state="listening"] .via-orb__ball {
  animation: viaOrbMorph 9s ease-in-out infinite, viaOrbBreathe 2.6s ease-in-out infinite;
}
.via-orb[data-state="thinking"] .via-orb__ball {
  width: clamp(104px, 26vw, 138px);
  height: clamp(104px, 26vw, 138px);
  opacity: 0.62;
  animation: viaOrbMorph 6s ease-in-out infinite;
}
/* Speaking earns the yellow: it is the mark's smallest accent, so it is
   kept for the one state where VIA is actually talking. */
.via-orb[data-state="speaking"] .via-orb__ball {
  width: clamp(160px, 42vw, 216px);
  height: clamp(160px, 42vw, 216px);
  box-shadow:
    0 22px 60px rgba(3, 78, 162, 0.4),
    inset 0 -14px 30px rgba(3, 42, 90, 0.28),
    0 0 0 6px rgba(255, 203, 5, 0.18);
  animation: viaOrbMorph 5s ease-in-out infinite, viaOrbPulse 1.3s ease-in-out infinite;
}
.via-orb[data-state="idle"] .via-orb__ball { opacity: 0.72; animation: none; }
.via-orb[data-state="error"] .via-orb__ball {
  background: linear-gradient(152deg, #8a3f3f 0%, #b3564a 60%, #d08a5c 100%);
  box-shadow: 0 18px 50px rgba(138, 63, 63, 0.32);
  animation: none;
}

.via-orb__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--orb-blue);
}
.via-orb__sub {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  color: var(--via-muted);
}
/* What the recogniser thinks it heard — shown so a misheard question is
   obvious before the answer arrives, not after. */
.via-orb__heard {
  visibility: hidden;
  margin: 1.1rem 0 0;
  max-width: 34ch;
  min-height: 1.4em;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--via-text);
  font-style: italic;
}
.via-orb__note {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  max-width: 40ch;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--via-faint);
}

@media (prefers-reduced-motion: reduce) {
  .via-orb__ball { animation: none !important; transition: none; }
  .via-orb__ring { animation: none !important; opacity: 0; }
}