/* =====================================================================
   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;
  /* center, not baseline: the mark is now an image beside text, and an
     image has no baseline to share with the tag. */
  align-items: center;
  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. */
/* The VIA wordmark, replacing the typeset name. Sized by HEIGHT so the
   image sits on the same optical line as the tag beside it; width follows
   the artwork's own 3:2 ratio. align-self keeps it centred against the
   baseline-aligned text in .via-bar__mark. */
.via-bar__logo {
  height: 21px;
  width: auto;
  display: block;
  align-self: center;
  /* Never shrink: a flex item defaults to flex-shrink:1, and on a narrow
     bar that collapsed the wordmark to zero width instead of overflowing
     visibly — the app silently lost its name. */
  flex: 0 0 auto;
}
/* Kept for the typeset fallback used elsewhere. */
.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. */
/* Below this width the bar cannot hold the descriptor without wrapping it
   onto two lines. The wordmark alone identifies the app, and the page
   title already says which report this is. */
@media (max-width: 900px) {
  /* Wordmark only. The theme's own <=700px rule hides .via-bar__mark
     outright (it was two lines of text); the logo is compact enough to
     keep, so that is overridden here — this block sits later in the file
     and therefore wins. */
  .via-bar__mark { display: flex; padding-left: 0.85rem; }
  .via-bar__tag { display: none; }
}

@media (max-width: 720px) {
  .via-bar__tool span { display: none; }
  .via-bar__tool { padding: 0.34rem 0.45rem; }
  /* The back link keeps its arrow only, like the tool buttons. Its label
     was the widest thing left on the bar. */
  .via-bar__back span { display: none; }
}

/* 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));
}

/* The thinking glyph is a spinner arc. The ball's own animation only morphs
   its border-radius, so without this the spinner sat perfectly still —
   which reads as a hung app at exactly the moment the user is waiting.
   Rotates the GLYPH alone, leaving the ball's morph untouched. */
@keyframes viaGlyphSpin { to { transform: rotate(360deg); } }

@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;
}
.via-orb[data-state="thinking"] .via-orb__glyph {
  animation: viaGlyphSpin 0.9s linear 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; }
  .via-orb__glyph { animation: none !important; }
}

/* ── Report footnotes about a named person ───────────────────────────
   A rider below the answer, boxed and tinted so it never reads as part
   of what VIA said. This is the report's own fine print — the thing that
   explains why a director's remuneration appears to have jumped. */
.via-notes {
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.1rem 1rem;
  border: 1px solid var(--via-hair);
  border-left: 3px solid var(--via-green);
  border-radius: 6px;
  background: rgba(139, 199, 81, 0.045);
}
.via-notes__head {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--via-green);
}
.via-note + .via-note {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--via-hair);
}
.via-note__ref {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--via-muted);
}
.via-note__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--via-text);
}

/* ── Year scope toggle ───────────────────────────────────────────────
   A segmented control, not a checkbox: "FY26" and "FY26 + FY25" are two
   equal choices of scope, not a feature being switched on. Hidden when
   only one report exists. */
.via-years {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--via-hair-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.6);
}
.via-years[hidden] { display: none; }
.via-years__btn {
  border: 0;
  border-radius: 5px;
  padding: 0.3rem 0.6rem;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--via-muted);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.via-years__btn:hover { color: var(--brand-blue); }
.via-years__btn.is-active {
  background: var(--brand-blue);
  color: #fff;
}

/* Year badge on a source card. Leads the reference line because with two
   reports in the rail, "Page no. 24" alone is ambiguous — page 24 exists
   in both documents. */
.via-source__year {
  flex: 0 0 auto;
  padding: 0.05rem 0.32rem;
  border-radius: 3px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

/* Which reports the retrieval actually consulted. */
.via-trace__years {
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--via-hair-strong);
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
}

/* The one-click comparison. Tinted so it reads as an offer to go further,
   not as another utility alongside Copy. */
.via-action--compare {
  color: var(--brand-blue);
  border-color: rgba(37, 64, 143, 0.32);
  background: rgba(37, 64, 143, 0.05);
}
.via-action--compare:hover { background: rgba(37, 64, 143, 0.1); }

@media (max-width: 900px) {
  /* The bar is already tight here; the scope control keeps its place but
     drops to the compact form. */
  .via-years__btn { padding: 0.28rem 0.45rem; font-size: 0.68rem; }
}

/* ── Narrow-screen header ────────────────────────────────────────────
   Measured: at 375px the bar's content was 437px — 62px of overflow,
   which scrolls the whole PAGE sideways and clips the reading column.
   The gap between eight items is the largest single saving, so it goes
   first; the year toggle also drops to its "+FY25" form (see via.js). */
@media (max-width: 760px) {
  .via-bar { gap: 0.45rem; padding-left: 0.7rem; padding-right: 0.7rem; }
  .via-years { padding: 1px; }
  .via-years__btn { padding: 0.26rem 0.4rem; font-size: 0.66rem; }
  .via-bar__home img { height: 30px; }
}

/* At the narrowest widths the back link keeps its arrow (its label already
   dropped at 720px), so "Back to Report" stays reachable on a phone. */
@media (max-width: 430px) {
  .via-bar__mark { padding-left: 0.6rem; }
  .via-bar__back { padding: 0.34rem 0.4rem; }
}

/* Nothing in the app may scroll the page sideways; wide content scrolls
   inside its own box instead (tables already do). */
html, body { max-width: 100%; overflow-x: hidden; }