/* ==========================================================================
   Reset, fonts, typography, app shell
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------ */

/* Latin subsets of the variable fonts, as WOFF2. These were raw variable TTFs
   (Manrope 165 KB, Inter 875 KB); the UI is English and Roman Urdu, so nothing
   outside Latin is ever asked for.

   --font puts Manrope first, so Manrope is the only face an ordinary screen
   downloads: 32 KB, down from 165. Inter is the fallback for the characters
   Manrope's 438 glyphs do not cover, and is split in two so a page that needs,
   say, one accented name from the account API fetches only the block that
   character lives in.

   To regenerate: take the upright variable TTF from Google Fonts (Inter
   opsz,wght and Manrope wght — the full families used to sit in fonts/, see
   git history) and run, per file:
     pyftsubset <src>.ttf --output-file=<dst>.woff2 --flavor=woff2 \
       --unicodes="<the unicode-range below>" --layout-features='*' --no-hinting
*/

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20A0-20C0, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Reset ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The UA sets [hidden] { display: none }, but any author `display` rule beats
   it — which silently un-hides components like .reccontrols (display: grid).
   Make the attribute authoritative. */
[hidden] {
  display: none !important;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Document --------------------------------------------------------- */

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100svh;
  overflow-x: hidden;
}

/* Wide viewports: centre the phone-width app and dim the surrounding page
   so the composition reads the way it does in the Figma frames. */
@media (min-width: 600px) {
  body {
    background:
      radial-gradient(120% 90% at 50% 0%, var(--surface-sunken), var(--bg) 60%);
  }
}

/* ---- Typography ------------------------------------------------------- */

h1, h2, h3 {
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

.u-muted   { color: var(--text-muted); }
.u-subtle  { color: var(--text-subtle); }
.u-sm      { font-size: var(--fs-sm); }
.u-xs      { font-size: var(--fs-xs); }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- App shell -------------------------------------------------------- */

/* Fixed height, not min-height: the shell must not grow past the viewport, or
   .app__body never scrolls and the sticky composer lands on top of content. */
.app {
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

@media (min-width: 600px) {
  .app {
    height: min(880px, 100svh);
    margin-block: max(0px, calc((100svh - 880px) / 2));
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-modal);
  }
}

/* Middle region between header and composer. This is a plain (non-scrolling)
   flex item and positioning context ONLY — the actual scrolling happens on
   the absolutely-positioned .app__scroll child below. They are deliberately
   NOT the same element: when a flex sibling of .app__body (the composer, or
   chat's .reccontrols) toggles hidden -> visible, .app__body's flex-basis
   changes, and Chromium 151 has a real repaint bug where an overflow:auto
   element that shrinks via a *sibling's* resize keeps painting content past
   its new clip line instead of re-clipping it (confirmed via elementFromPoint
   hit-testing: the browser's own hit-test agrees content should be clipped —
   this is a paint-only bug, not a layout one). Decoupling "sized by flex" from
   "clips via overflow" onto two elements avoids the bug outright. Verified: a
   forced synchronous reflow (reading offsetHeight on the item, the flex
   container, and the changed sibling, all three) does NOT fix it either — it
   needs this structural split.
   Bug: content bled through the composer after switching Financial -> FAQ
   mode; reproduced with zero JS animations involved, so don't reintroduce a
   single scrolling `.app__body` without re-testing that exact repro. */
.app__body {
  flex: 1;
  min-height: 0;
  position: relative;
}

/* flex column so a tall viewport's leftover space can be absorbed in one
   deliberate place (see .home__hero) instead of dumping it all below the
   last section as a dead strip — device heights vary far more than the
   content does. */
.app__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
}

/* Hide the scrollbar but keep scrolling (matches the clean mockups). */
.app__scroll::-webkit-scrollbar {
  display: none;
}

.app__scroll {
  scrollbar-width: none;
}

.u-stack   { display: flex; flex-direction: column; }
.u-row     { display: flex; align-items: center; }
.u-gap-2   { gap: var(--sp-2); }
.u-gap-3   { gap: var(--sp-3); }
.u-gap-4   { gap: var(--sp-4); }
.u-grow    { flex: 1; }