@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");

/* Wealth Quest Lab shared light theme.
   The product uses several static pages with local styles; these semantic
   overrides keep their surfaces, forms, tables, and navigation consistent. */
:root {
  color-scheme: light !important;
  --wql-bg: #f5f8fc;
  --wql-bg-2: #edf3f8;
  --wql-panel: #ffffff;
  --wql-panel-2: #f7f9fc;
  --wql-field: #fbfdff;
  --wql-line: #d9e2ec;
  --wql-line-2: #b8c7d8;
  --wql-ink: #102a43;
  --wql-ink-2: #486581;
  --wql-ink-3: #627d98;
  --wql-primary: #1d4ed8;
  --wql-primary-2: #1e40af;
  --wql-teal: #0f766e;
  --wql-green: #166534;
  --wql-red: #b42318;
  --wql-amber: #9a6700;
  --wql-pink: #be185d;
  --wql-shadow: 0 14px 38px rgba(31, 60, 89, .10);
  --wql-font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --wql-font-heading: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --wql-font-data: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Existing page styles all point at these aliases. */
  --bg: var(--wql-bg) !important;
  --bg-2: var(--wql-bg-2) !important;
  --panel: var(--wql-panel) !important;
  --panel-2: var(--wql-panel-2) !important;
  --field: var(--wql-field) !important;
  --line: var(--wql-line) !important;
  --line-2: var(--wql-line-2) !important;
  --ink: var(--wql-ink) !important;
  --ink-2: var(--wql-ink-2) !important;
  --ink-3: var(--wql-ink-3) !important;
  --txt: var(--wql-ink) !important;
  --txt2: var(--wql-ink-2) !important;
  --txt3: var(--wql-ink-3) !important;
  --blue: var(--wql-primary) !important;
  --blue-bright: #2563eb !important;
  --violet: var(--wql-primary) !important;
  --violet-2: var(--wql-primary-2) !important;
  --acc: var(--wql-primary) !important;
  --acc2: var(--wql-primary-2) !important;
  --cyan: var(--wql-teal) !important;
  --grn: var(--wql-green) !important;
  --green: var(--wql-green) !important;
  --red: var(--wql-red) !important;
  --red-2: var(--wql-red) !important;
  --gold: var(--wql-amber) !important;
  --gold-2: var(--wql-amber) !important;
  --pur: var(--wql-pink) !important;
  --pink: var(--wql-pink) !important;
  --lime: #3f6212 !important;
  --accent: var(--wql-primary) !important;
  --dim: var(--wql-ink-2) !important;
  --good: var(--wql-green) !important;
  --warn: var(--wql-amber) !important;
  --bad: var(--wql-red) !important;
  --bdr: var(--wql-line) !important;
  --bdr2: var(--wql-line-2) !important;
  --sans: var(--wql-font-body) !important;
  --serif: var(--wql-font-heading) !important;
  --mono: var(--wql-font-data) !important;
}

html, body { background: var(--wql-bg) !important; color: var(--wql-ink) !important; }
body {
  font-family: var(--wql-font-body) !important;
  font-variant-numeric: proportional-nums;
  background-image:
    radial-gradient(800px 420px at 92% -8%, rgba(29, 78, 216, .08), transparent 65%),
    radial-gradient(720px 460px at -8% 24%, rgba(15, 118, 110, .06), transparent 65%) !important;
}
body :is(h1, h2, h3, h4, h5, h6, .brand, .title, .share-header .sh, .kv, .num .big) {
  font-family: var(--wql-font-heading) !important;
}
body :is(input, select, textarea, button, .btn, .tab, .panel-h, .card-h,
  .eyebrow, .fl, .term-top, .term-foot, .sh, .share-sub, .fn, .dt,
  .lookup input, .modal-input) {
  font-family: var(--wql-font-body) !important;
}
body :is(table, .kpi .val, .kv) { font-variant-numeric: tabular-nums; }
body a { color: var(--wql-primary-2); }
body ::selection { background: #bfdbfe; color: #102a43; }

header, .appbar { background: rgba(255, 255, 255, .94) !important; border-color: var(--wql-line) !important; }
.nav-links a, .appbar-right a, .appbar-right button { color: var(--wql-ink-2) !important; }
.nav-links a:hover, .appbar-right a:hover, .appbar-right a.active, .appbar-right button:hover { color: var(--wql-primary-2) !important; }

.grid-bg, .showcase .grid {
  opacity: .7 !important;
  background-image:
    linear-gradient(rgba(71, 85, 105, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 85, 105, .08) 1px, transparent 1px) !important;
}
.glow, .glow2 { opacity: .55; filter: blur(30px); }

.panel, .card, .terminal, .mini, .modal, .chart-card, .kc, .cta-card,
.fb-panel, .step, .research-card, .filter, .showcase, .formside {
  background: var(--wql-panel) !important;
  border-color: var(--wql-line) !important;
  box-shadow: var(--wql-shadow);
}
.panel, .card, .terminal, .mini, .modal, .chart-card, .kc, .cta-card,
.fb-panel, .step, .research-card, .filter {
  background-image: linear-gradient(180deg, #ffffff, #f8fbfe) !important;
}

.brand .mark, .card .ic, .sbtn, .chip, .tabs .tab, button.act, button.mini,
.preset, .add-asset, .modal-btn-secondary, .fb-tag {
  background: var(--wql-panel-2) !important;
  border-color: var(--wql-line-2) !important;
  color: var(--wql-ink-2) !important;
}
.brand i, .eyebrow, .research-card .rt, .tk, .modal-sec { color: var(--wql-primary-2) !important; }
.st { color: var(--wql-teal) !important; }
.lede, .subtitle, .sub, .note, .panel .sub, .card p, .step p, .research-card .rc,
.sec, .crumb, .legendline, .info-desc, .show-mid p, .v-head p, .alt, .legal { color: var(--wql-ink-2) !important; }
.pagehead p, .card .k, .card .d, .term-foot, .term-top, .fl, .ctlrow label, .modal .sub { color: var(--wql-ink-3) !important; }

input, select, textarea, .fi, .inp, input.cell, input.big, select.big, .jsonbox, .lookup input {
  background: var(--wql-field) !important;
  color: var(--wql-ink) !important;
  border-color: var(--wql-line-2) !important;
}
input::placeholder, textarea::placeholder, .fi::placeholder, .inp::placeholder { color: var(--wql-ink-3) !important; }
input:focus, select:focus, textarea:focus, .fi:focus, .inp:focus, input.cell:focus, input.big:focus, select.big:focus {
  border-color: var(--wql-primary) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15) !important;
}

table th, thead th, tfoot td { background: var(--wql-panel-2) !important; color: var(--wql-ink-3) !important; }
table td, table th, .metrics th, .metrics td { border-color: var(--wql-line) !important; }
tr:hover td { background: #f3f7fb !important; }
.wrap, .sub, .scen-note, .disc, footer { color: var(--wql-ink-2); }

.chartbox, .chart, .mini .chart { background: transparent !important; }
.term-foot, .term-top, .mq, .kpi, .num, .panel-h, .card-h { border-color: var(--wql-line) !important; }
.marquee { background: var(--wql-bg-2) !important; border-color: var(--wql-line) !important; }
.mq, .term-top .tt-left { color: var(--wql-ink-2) !important; }

.btn-ghost { color: var(--wql-primary-2) !important; border-color: var(--wql-line-2) !important; }
.btn-ghost:hover { border-color: var(--wql-primary) !important; color: var(--wql-primary) !important; }
.btn-primary, .tab.active, button.act.primary, .submit-btn, .btn {
  background: linear-gradient(120deg, var(--wql-primary), #2563eb) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .submit-btn:hover { box-shadow: 0 12px 30px rgba(29, 78, 216, .24) !important; }
.tab.active { color: #ffffff !important; }

.v.good, .pos, .chip.green, .live-status, .status.ok, .term-foot .up, .mq .up { color: var(--wql-green) !important; }
.v.warn, .chip.yellow, .status.busy, .term-foot .down, .mq .down { color: var(--wql-amber) !important; }
.v.bad, .neg, .chip.red, .status.err { color: var(--wql-red) !important; }
.v.accent, .chip.violet, .mut { color: var(--wql-primary-2) !important; }
.chip.green { background: #ecfdf3 !important; border-color: #a7f3d0 !important; }
.chip.yellow { background: #fffbeb !important; border-color: #f3d38a !important; }
.chip.red { background: #fff1f2 !important; border-color: #fecdd3 !important; }
.chip.violet { background: #eff6ff !important; border-color: #bfdbfe !important; }
.cards a.card:hover { border-color: var(--wql-primary) !important; }
.filter input { accent-color: var(--wql-primary) !important; }

.verdict { background: #ecfdf5 !important; border-color: #6ee7b7 !important; color: var(--wql-ink) !important; }
.verdict h3 { color: var(--wql-teal) !important; }
.alert, .warns { background: #fff7ed !important; border-color: #fdba74 !important; color: #7c2d12 !important; }
blockquote { background: #eff6ff !important; border-color: var(--wql-primary) !important; color: var(--wql-ink-2) !important; }
.modal-back, .fb-overlay { background: rgba(15, 23, 42, .48) !important; }
.toast { background: var(--wql-ink) !important; border-color: var(--wql-primary) !important; color: #ffffff !important; }

/* Readability scale: keep dense research data compact, but stop normal copy
   and controls from rendering like fine print. */
body { font-size: 17px !important; line-height: 1.65 !important; }
body :is(p, li) { line-height: 1.65 !important; }
body :is(.lede, .subtitle, .sub, .note, .panel .sub, .card p, .step p,
  .research-card .rc, .sec-head p, .sec, .scen-note, .info-desc,
  .show-mid p, .v-head p, .alt, .legal) { font-size: 16px !important; }
body :is(.eyebrow, .fl, label.fl, .panel-h, .card-h, .ptitle, .kl,
  .sh, .share-sub, .modal-label, .modal-sec, .pagehead p, .card .k,
  .card .d, .term-foot, .term-top, .fn, .legendline, .live-status,
  .crumb, .disc, footer) { font-size: 12.5px !important; }
body :is(.nav-links a, .link-quiet, .appbar-right a, .appbar-right button,
  .btn, .tab, button.act, button.mini, .pbtn, .addbtn, .share-btn,
  .modal-btn, .submit-btn, .runbtn, .sbtn, .link) { font-size: 14px !important; }
body :is(input, select, textarea, .fi, .inp, input.cell, input.big,
  select.big, .lookup input, .modal-input) { font-size: 16px !important; }
body table { font-size: 15px !important; }
body table th { font-size: 13px !important; }
body table td { font-size: 15px !important; }
body :is(.badges span, .chip, .research-card .rt, .st, .tk) { font-size: 14px !important; }
body :is(.card h3, .step h3, .ct, .info-value) { font-size: 19px !important; }
body :is(.wrap > article h1, .pagehead h1, .share-header .sh) { font-size: 34px !important; }
body :is(.wrap > article section h2, .panel h2) { font-size: 23px !important; }
body :is(.kpi .val, .kv, .card .v) { font-size: 30px !important; }

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

@media (max-width: 640px) {
  .wrap, .app, .appbar-in { padding-left: 18px !important; padding-right: 18px !important; }
  .grid, .grid2, .g2, .g3, .g5 { grid-template-columns: 1fr !important; }
  .tablewrap, section :is(table) { overflow-x: auto; }
}