/* ============================================================
   base — reset, typography, ground, a11y primitives
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Keep anything scrolled to by keyboard focus or an #anchor clear of the
     sticky chrome. Without this a Tab-focused control lands under the top
     nav (measured: focused at y=21 with the nav occupying 0–54), which is
     the "focused item hidden behind sticky UI" the a11y spec rules out.
     The bottom value clears the mobile tab bar the same way. */
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 12px);
  scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
}
@media (min-width: 900px) {
  html { scroll-padding-bottom: 24px; }
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg0);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The terminal ground. Not flat black (spec §60): a deep vertical wash plus
   two very soft blooms — mint where Kata lives (upper right, where the
   assistant and its avatar sit) and a colder aqua at the far left. Nothing
   moves, and nothing sits behind a data table strongly enough to tint it. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 520px at 82% -14%, var(--mint-glow), transparent 64%),
    radial-gradient(900px 460px at -10% -8%, rgba(117, 216, 235, .07), transparent 62%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 42%);
  opacity: .58;
  z-index: 0;
}
html[data-theme="light"] body::before { opacity: .55; }

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--mint); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

::selection { background: var(--mint-dim); }

/* every financial value aligns */
.num, td.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.up   { color: var(--up); }
.down { color: var(--down); }
.warn-c { color: var(--warn); }
.info-c { color: var(--info); }
.ai-c { color: var(--ai); }
.muted { color: var(--muted); }
.dim { color: var(--text-2); }

/* micro-label: the terminal's uppercase whisper */
.micro {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.micro.mint { color: var(--mint-deep); }
html[data-theme="light"] .micro.mint { color: var(--mint); }

.note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.small { font-size: var(--fs-sm); color: var(--text-2); }

/* focus — visible, mint, never removed */
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; top: -48px; left: var(--s4);
  z-index: calc(var(--z-toast) + 1);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 10px 16px; transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s3); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* scrollbars that belong to the terminal */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* wide content scrolls inside its own container, never the page */
.scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }

hr.rule {
  border: 0; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  margin: var(--s6) 0;
}

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