/* =========================================================================
   Wealth OS design system ("wx"), v1, 27 Oct 2026.
   Layered on /brand/tokens.css: same paper, ink, gold and terracotta, same three faces.
   Idea: a private-bank ledger on poster paper. Numbers lead, words are short, every figure carries its label.
   Rules: one idea per block · numbers in tabular figures · state shown as a chip, never colour alone ·
   gentle motion only (and none under reduced motion) · phone first, no sideways scroll.
   Showcase: /wealth-os/design
   ========================================================================= */
:root {
  /* surfaces */
  --wx-ground: var(--paper);
  --wx-card: #fbf5e6;
  --wx-sunk: #ede0c2;
  --wx-ink: var(--ink);
  --wx-dim: var(--dim);
  --wx-line: rgba(23, 19, 15, 0.14);
  --wx-line-strong: var(--ink);
  /* meaning */
  --wx-value: var(--gold);        /* worth, value, the range */
  --wx-act: var(--terracotta);    /* the one action, the caution */
  --wx-up: #3f7a52;               /* growth, quietly */
  --wx-down: #a9442a;             /* shrink, quietly */
  --wx-sample: var(--magenta);    /* SAMPLE data, always visible */
  /* type scale (1.25) */
  --wx-t-xs: 0.75rem; --wx-t-s: 0.875rem; --wx-t-m: 1rem; --wx-t-l: 1.25rem; --wx-t-xl: 1.6rem; --wx-t-2xl: 2.4rem;
  --wx-t-hero: clamp(3rem, 13vw, 7.5rem);
  /* space (4px base) */
  --wx-1: 4px; --wx-2: 8px; --wx-3: 12px; --wx-4: 16px; --wx-5: 24px; --wx-6: 32px; --wx-7: 48px; --wx-8: 72px;
  --wx-radius: 14px;
  --wx-shadow: 0 1px 0 rgba(23, 19, 15, 0.06), 0 8px 24px -12px rgba(23, 19, 15, 0.18);
  --wx-max: 1120px;
}

/* ── Page ─────────────────────────────────────────────────────────────── */
.wx { margin: 0; background: var(--wx-ground); color: var(--wx-ink); font: 400 var(--wx-t-m)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
.wx *, .wx *::before, .wx *::after { box-sizing: border-box; }
.wx-wrap { max-width: var(--wx-max); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wx-section { padding-block: var(--wx-8) var(--wx-7); }
.wx-section + .wx-section { border-top: 1px solid var(--wx-line); }
.wx a { color: inherit; text-underline-offset: 3px; }
.wx a.wx-btn { color: var(--paper); text-decoration: none; } .wx a.wx-btn--quiet { color: var(--wx-ink); }
.wx :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.wx-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--wx-3); min-height: 60px; flex-wrap: wrap; }
.wx-brand { display: flex; align-items: baseline; gap: var(--wx-2); text-decoration: none; }
.wx-brand b { font: 400 1.35rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.wx-brand span { font: 600 var(--wx-t-xs)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wx-dim); }
.wx-nav { display: flex; gap: var(--wx-1); flex-wrap: wrap; }
@media (max-width: 700px) { .wx-bar { padding-top: var(--wx-2); } .wx-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; margin-inline: -4px; scrollbar-width: none; } .wx-nav::-webkit-scrollbar { display: none; } .wx-nav a { flex: none; padding: 0 var(--wx-3); } .wx-sample-note { margin-top: var(--wx-2); } }
.wx-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--wx-3); border-radius: 999px; text-decoration: none; font: 600 var(--wx-t-s) var(--sans); color: var(--wx-dim); }
.wx-nav a[aria-current=page] { background: var(--wx-ink); color: var(--paper); }

/* ── Type ─────────────────────────────────────────────────────────────── */
.wx-kicker { font: 700 var(--wx-t-xs)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--wx-act); margin: 0 0 var(--wx-3); }
.wx-hero { font: 400 var(--wx-t-hero)/.92 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
.wx-hero em { font-style: normal; color: var(--wx-act); }
.wx-h2 { font: 400 clamp(1.8rem, 6vw, 2.8rem)/.95 var(--display); text-transform: uppercase; margin: 0 0 var(--wx-4); text-wrap: balance; }
.wx-h3 { font: 600 var(--wx-t-l)/1.25 var(--sans); margin: 0 0 var(--wx-2); }
.wx-lede { font: italic 400 clamp(1.35rem, 3.6vw, 1.9rem)/1.25 var(--serif); margin: var(--wx-5) 0 0; max-width: 32ch; }
.wx-p { max-width: 62ch; margin: 0 0 var(--wx-3); }
.wx-dim { color: var(--wx-dim); font-size: var(--wx-t-s); }
.wx-num { font-variant-numeric: tabular-nums; }

/* ── Chips: state in words, never colour alone ───────────────────────── */
.wx-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid currentColor; white-space: nowrap; }
.wx-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wx-chip--sample { color: var(--wx-sample); }
.wx-chip--ok { color: var(--wx-up); }
.wx-chip--wait { color: var(--bronze); }
.wx-chip--never { color: var(--wx-down); }
.wx-chip--plain { color: var(--wx-dim); }

/* ── Ticker ──────────────────────────────────────────────────────────── */
.wx-ticker { overflow: hidden; border-block: 1.5px solid var(--wx-ink); background: var(--wx-ink); color: var(--paper); }
.wx-ticker__run { display: flex; gap: var(--wx-6); width: max-content; padding: 10px 0; animation: wx-run 60s linear infinite; font: 600 var(--wx-t-s)/1 var(--sans); font-variant-numeric: tabular-nums; }
.wx-ticker__run span b { font-family: var(--display); font-weight: 400; letter-spacing: .04em; margin-right: 6px; }
.wx-ticker .up { color: #9fd3a8; } .wx-ticker .down { color: #f2a48c; }
@keyframes wx-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wx-ticker__run { animation: none; flex-wrap: wrap; width: auto; } }

/* ── Stat tiles ──────────────────────────────────────────────────────── */
.wx-stats { display: grid; gap: var(--wx-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .wx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wx-stat { padding: var(--wx-4); border-top: 2px solid var(--wx-ink); min-width: 0; }
.wx-stat b { display: block; font: 400 clamp(1.6rem, 5vw, 2.4rem)/1 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wx-stat span { display: block; margin-top: var(--wx-2); font-size: var(--wx-t-s); color: var(--wx-dim); }

/* ── Listing card ────────────────────────────────────────────────────── */
.wx-grid { display: grid; gap: var(--wx-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .wx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .wx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wx-card { display: grid; gap: var(--wx-4); background: var(--wx-card); border: 1px solid var(--wx-line); border-radius: var(--wx-radius); padding: var(--wx-5); box-shadow: var(--wx-shadow); text-decoration: none; color: inherit; min-width: 0; transition: transform .25s ease, box-shadow .25s ease; }
a.wx-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(23,19,15,.06), 0 16px 32px -14px rgba(23,19,15,.28); }
@media (prefers-reduced-motion: reduce) { .wx-card { transition: none; } a.wx-card:hover { transform: none; } }
.wx-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--wx-3); }
.wx-code { font: 400 1.6rem/1 var(--display); letter-spacing: .03em; }
.wx-cat { font-size: var(--wx-t-s); color: var(--wx-dim); margin-top: 4px; }
.wx-rr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wx-2); border-block: 1px solid var(--wx-line); padding-block: var(--wx-3); }
.wx-rr div { min-width: 0; }
.wx-rr b { display: block; font: 600 var(--wx-t-m)/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.wx-rr span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-dim); }
.wx-value { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wx-3); flex-wrap: wrap; }
.wx-value b { font: 400 var(--wx-t-xl)/1 var(--display); font-variant-numeric: tabular-nums; }
.wx-value span { font-size: var(--wx-t-s); color: var(--wx-dim); }
.wx-spark { width: 100%; height: 48px; display: block; }
.wx-spark path.l { fill: none; stroke: var(--wx-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wx-spark path.a { fill: rgba(212, 175, 55, 0.22); stroke: none; }
.wx-spark circle { fill: var(--wx-act); }

/* ── Range bar: low · base · high on one scale ───────────────────────── */
.wx-range { position: relative; height: 56px; margin: var(--wx-5) 0 var(--wx-2); }
.wx-range__track { position: absolute; left: 0; right: 0; top: 22px; height: 10px; border-radius: 999px; background: var(--wx-sunk); }
.wx-range__band { position: absolute; top: 22px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(212,175,55,.45), var(--gold)); }
.wx-range__base { position: absolute; top: 12px; width: 3px; height: 30px; background: var(--wx-ink); transform: translateX(-50%); }
.wx-range__lbl { position: absolute; top: 44px; font: 600 11px/1 var(--sans); color: var(--wx-dim); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-range__lbl:first-of-type { transform: none; }

/* ── Steps ───────────────────────────────────────────────────────────── */
.wx-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: var(--wx-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .wx-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.wx-steps li { counter-increment: s; border-top: 2px solid var(--wx-ink); padding-top: var(--wx-3); min-width: 0; }
.wx-steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 400 var(--wx-t-xl)/1 var(--display); color: var(--wx-act); margin-bottom: var(--wx-2); }
.wx-steps b { display: block; margin-bottom: 4px; }
.wx-steps span { font-size: var(--wx-t-s); color: var(--wx-dim); }

/* ── Two-sided panel ─────────────────────────────────────────────────── */
.wx-split { display: grid; gap: var(--wx-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .wx-split { grid-template-columns: 1fr 1fr; } }
.wx-panel { border-radius: var(--wx-radius); padding: var(--wx-5); background: var(--wx-card); border: 1px solid var(--wx-line); min-width: 0; }
.wx-panel--ink { background: var(--wx-ink); color: var(--paper); border-color: var(--wx-ink); }
.wx-panel--ink .wx-dim, .wx-panel--ink span { color: #cbbd9f; }

/* ── Rows: label left, figure right ──────────────────────────────────── */
.wx-rows { display: grid; }
.wx-rows > div { display: flex; justify-content: space-between; gap: var(--wx-3); padding: 10px 0; border-bottom: 1px solid var(--wx-line); font-variant-numeric: tabular-nums; }
.wx-rows > div b { text-align: right; }
.wx-rows > .total { border-bottom: 2px solid var(--wx-ink); font-size: var(--wx-t-l); }

/* ── Controls ────────────────────────────────────────────────────────── */
.wx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--wx-ink); color: var(--paper); font: 600 var(--wx-t-m) var(--sans); text-decoration: none; cursor: pointer; }
.wx-btn--quiet { background: transparent; color: var(--wx-ink); border: 1.5px solid var(--wx-ink); }
.wx-field label { display: block; font: 600 var(--wx-t-s) var(--sans); margin-bottom: 6px; }
.wx-field input { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--wx-ink); border-radius: 10px; background: var(--paper); color: var(--wx-ink); font: 600 1.25rem var(--sans); font-variant-numeric: tabular-nums; }
.wx-field select, .wx-select { width: 100%; min-height: 52px; padding: 0 12px; border: 1.5px solid var(--wx-ink); border-radius: 10px; background: var(--paper); color: var(--wx-ink); font: 500 1rem var(--sans); }
.wx-field input { font-size: 1.05rem; }
.wx-drop { display: grid; place-items: center; gap: 6px; min-height: 160px; padding: var(--wx-5); border: 2px dashed var(--wx-ink); border-radius: var(--wx-radius); background: var(--wx-card); text-align: center; cursor: pointer; transition: background .2s ease; }
.wx-drop.is-over { background: rgba(212, 175, 55, .18); }
.wx-drop b { font: 400 var(--wx-t-xl)/1 var(--display); text-transform: uppercase; }
.wx-toast { padding: var(--wx-3) var(--wx-4); border-radius: 10px; border: 1.5px solid var(--wx-ink); background: var(--wx-card); font-size: var(--wx-t-s); }
.wx-toast.err { border-color: var(--wx-down); color: var(--wx-down); }
.wx-seg { display: flex; flex-wrap: wrap; gap: var(--wx-2); }
.wx-seg button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--wx-ink); background: transparent; color: var(--wx-ink); font: 600 var(--wx-t-s) var(--sans); cursor: pointer; }
.wx-seg button[aria-pressed=true] { background: var(--wx-ink); color: var(--paper); }

/* ── Notes ───────────────────────────────────────────────────────────── */
.wx-caution { font: italic 400 1.1rem/1.4 var(--serif); color: var(--wx-dim); max-width: 60ch; }
.wx-sample-note { display: flex; gap: var(--wx-3); align-items: center; flex-wrap: wrap; padding: var(--wx-3) var(--wx-4); border: 1.5px dashed var(--wx-sample); border-radius: 10px; font-size: var(--wx-t-s); }
.wx-foot { padding-block: var(--wx-6) var(--wx-8); font-size: var(--wx-t-s); color: var(--wx-dim); border-top: 1px solid var(--wx-line); }
.wx-sign { font: italic 400 1.15rem var(--serif); color: var(--wx-ink); }

/* reveal: visible at rest, a small lift on load */
@media (prefers-reduced-motion: no-preference) { .wx-rise { animation: wx-rise .7s cubic-bezier(.2,.7,.2,1) both; } @keyframes wx-rise { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } } }