/* ============================================================================
   Base — reset, document typography, accessibility primitives.
   Material Design 3 layer (unlayered ⇒ wins over @layer legacy).
   Values come from css/tokens.css only (see spec/generated/SPEC_CHEATSHEET.md).
   ========================================================================== */

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

html {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  font-weight: var(--md-sys-typescale-body-large-weight);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { cursor: pointer; touch-action: manipulation; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
a { color: var(--md-sys-color-primary); text-underline-offset: 2px; }
img, svg, video { max-width: 100%; }
hr {
  border: 0;
  border-top: var(--md-comp-divider-thickness) solid var(--md-comp-divider-color);
  margin: var(--md-sys-measurement-space300) 0;
}

/* Visible keyboard focus everywhere: M3 focus indicator
   (colour = secondary, 3px, 2px outer offset — spec md.sys.state.focus-indicator). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--md-sys-state-focus-indicator-thickness) solid
    var(--md-sys-state-focus-indicator-color);
  outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
}
/* Do not paint a ring for pointer users. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: var(--md-sys-measurement-space100);
  left: var(--md-sys-measurement-space100);
  z-index: calc(var(--z-lightbox) + 1);
  transform: translateY(-160%);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space250);
  border-radius: var(--md-sys-shape-corner-full);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-decoration: none;
  box-shadow: var(--md-sys-elevation-level2);
  transition: transform var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- typographic roles ---------- */
#app h1,
#app h2,
#app h3,
#app h4,
#app h5,
#app h6 {
  color: var(--md-sys-color-on-surface);
  margin: 0;
  font-weight: var(--md-sys-typescale-headline-large-weight);
  letter-spacing: normal;
}
#app h1 {
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  overflow-wrap: break-word;
}
#app h2 {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-title-large-weight);
}
#app h3 {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
}
#app h4 {
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line);
  font-weight: var(--md-sys-typescale-title-small-weight);
}
#app h5, #app h6 {
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
@media (min-width: 840px) {
  #app h1 {
    font-size: var(--md-sys-typescale-headline-large-size);
    line-height: var(--md-sys-typescale-headline-large-line);
    letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  }
}
#app p { margin: 0; }
#app small { font-size: var(--md-sys-typescale-body-small-size); }
#app strong, #app b { font-weight: var(--md-sys-typescale-weight-semibold); }
#app :where(code, .math, .katex) { font-variant-numeric: tabular-nums; }

/* Prose measure and rhythm inside notes / articles. */
.prose,
.article-content {
  max-width: var(--layout-prose-max);
  font-size: var(--md-sys-typescale-prose-size);
  line-height: var(--md-sys-typescale-prose-line);
  color: var(--md-sys-color-on-surface);
  overflow-wrap: break-word;
}
.prose > * + *,
.article-content > * + * { margin-top: var(--md-sys-measurement-space200); }
.article-content ul,
.article-content ol,
.prose ul,
.prose ol { padding-left: 1.4em; margin: var(--md-sys-measurement-space150) 0; }
.article-content li + li,
.prose li + li { margin-top: var(--md-sys-measurement-space75); }
.article-content :where(h2, h3, h4) { margin-top: var(--md-sys-measurement-space400); max-width: var(--layout-prose-max); }
.article-content :where(h2, h3, h4):first-child { margin-top: 0; }

/* Numbers line up in tables, formulas and stats */
.math,
.t-account-item .val,
.hero-input,
.stat-card strong,
.score-hero strong,
.metric-value,
table { font-variant-numeric: tabular-nums; }

/* ---------- tables (shared basics; wrappers add scroll) ---------- */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  /* M3: horizontally scrollable regions must advertise their overflow. The
     local/scroll background trick shows edge fades only where content continues. */
  background:
    linear-gradient(to right, var(--md-sys-color-surface) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--md-sys-color-surface) 40%, transparent) right center / 32px 100% no-repeat local,
    linear-gradient(to right,
      color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent), transparent) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left,
      color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent), transparent) right center / 14px 100% no-repeat scroll,
    var(--md-sys-color-surface);
}
.table-wrap table,
#app table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.5;
  color: var(--md-sys-color-on-surface);
}
.table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-align: left;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border-bottom: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  white-space: nowrap;
}
.table-wrap td,
#app table td {
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border-bottom: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  vertical-align: top;
}
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap caption {
  caption-side: bottom;
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  text-align: left;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* Discoverable horizontal scrollers (M3: overflow must be signposted).
   Add class "scroll-fade-x" to a scroller; the edge fades sit above the content
   and disappear when the scroller is scrolled to that edge. */
.scroll-fade-x {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.scroll-fade-x > * { scroll-snap-align: start; }
.scroll-fade-x::after {
  content: "";
  position: sticky;
  right: 0;
  bottom: 0;
  float: right;
  width: 32px;
  height: 1px;
  margin-top: calc(var(--md-sys-measurement-space25) / -2);
  pointer-events: none;
  background: linear-gradient(to left, var(--md-sys-color-surface), transparent);
}

/* ---------- scrollbars (subtle, M3-aligned) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--md-sys-color-outline); }

::selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* ---------- shared layout primitives ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.no-print { }
[hidden] { display: none !important; }

.page-head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300);
  flex-wrap: wrap;
  margin-bottom: var(--md-sys-measurement-space300);
}
.page-head > div:first-child { min-width: 0; flex: 1 1 320px; }
@media (max-width: 767px) {
  .page-head { flex-direction: column; align-items: stretch; gap: var(--md-sys-measurement-space200); }
  /* In a column flex container a flex-basis turns into a HEIGHT — never inherit
     the desktop `flex: 1 1 320px` on compact. */
  .page-head > div:first-child { flex: 0 1 auto; }
  .page-head .pill-row { width: 100%; }
  .page-head .pill-row .btn { flex: 1 1 auto; }
  .page-head .stat-card { width: 100%; }
}
.page-head h1 { overflow-wrap: anywhere; }
.page-head p {
  margin-top: var(--md-sys-measurement-space100);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  max-width: 68ch;
}
.eyebrow {
  display: block;
  margin-bottom: var(--md-sys-measurement-space50);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
}
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  flex-wrap: wrap;
  margin: var(--md-sys-measurement-space400) 0 var(--md-sys-measurement-space150);
}
.section-title h2 {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: 0;
}
.section-title p,
.section-title span {
  margin: 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}
.pill-row {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  flex-wrap: wrap;
}
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space150); flex-wrap: wrap; }

/* Grid helpers used by several views. */
.grid { display: grid; gap: var(--md-sys-measurement-space200); }
.grid-2 { display: grid; gap: var(--md-sys-measurement-space200); grid-template-columns: 1fr; }
@media (min-width: 840px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Main landmark receives programmatic focus on SPA navigation — a container is
   not an interactive control, so no visible ring is shown for that focus. */
#app:focus,
#app:focus-visible { outline: none; }

/* Anchor targets stay visible below the sticky top app bar. */
#app [id] { scroll-margin-top: calc(var(--layout-topbar-height) + var(--md-sys-measurement-space200)); }

/* Skip continuous enter animation for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile: prevent iOS zoom-on-focus for text controls. */
@media (max-width: 767px) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* Print reset lives in css/print.css */