/* MojaWallet, the two MONEY pages: /bei (pricing and limits) and /hali
 * (product status). Loaded by those two files and by nothing else.
 *
 * It names NO colour: every value is a var() on a token site.css declares in
 * both themes, so test/a11y.test.ts's pass over those tokens stays the whole
 * truth about this surface. Nothing here is lime on paper - --acc is a FILL
 * under --on-acc ink or a border, never text, because in light it measures
 * 1.9:1 on --card. Reasoning and the fold-in path: docs/INTEGRATION-NOTES.md.
 */

/* under the floating top bar and the nav pill, both sticky from 760px up */
:root { --stick: calc(var(--nav-h) + 70px); }

/* --- the page index, on a page long enough to need one ---------------- */
.leadin { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.leadin a {
  display: flex; gap: 12px; align-items: baseline; min-height: 44px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); text-decoration: none;
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
}
.leadin a:hover { border-color: var(--acc); background: var(--card2); transform: translateY(-2px); }
.leadin .n { font-size: .8125rem; font-weight: 800; color: var(--acc-2); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.leadin .t { font-weight: 600; font-size: .9375rem; }

/* --- the display figure ----------------------------------------------- */
/* The spread is the only thing this wallet charges today, so it is the one
 * figure drawn at display size. It counts up on entry because it is a
 * [data-fact], which is what motion.js animates; that walk ends on the
 * served string byte for byte, so what settles is never a rounding of the
 * animation's own. */
.bigfig-n {
  display: flex; align-items: baseline; gap: .04em;
  font-weight: 800; letter-spacing: var(--track-display); line-height: .92;
  font-size: clamp(3.25rem, 1rem + 11vw, 5.5rem);
  font-variant-numeric: tabular-nums; color: var(--tx);
}
.bigfig-u { font-size: .4em; font-weight: 700; color: var(--tx3); letter-spacing: -.02em; }
/* not an eyebrow: this surface gets exactly one and the hero has it */
.bigfig-k { margin-top: 8px; font-size: .9375rem; color: var(--tx2); }

.figrow { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card2); }
.stat-v { display: block; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-k { display: block; font-size: .8125rem; color: var(--tx2); margin-top: 3px; }

/* the one line in a block that has to be read before the rest of it */
.bigline { font-size: clamp(1.1875rem, 1rem + 1.1vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--tx); }

/* --- tables that stay readable while you scroll ----------------------- */
/* Sticky resolves against the nearest scroll container and .tablewrap's
 * `overflow-x: auto` IS one, so the header can only reach the viewport at a
 * width where the table needs no sideways scroll. Below that the wrap keeps
 * scrolling and the header goes with it: a phone gets the whole table, a
 * laptop gets the header. */
.sticktbl thead th { position: sticky; top: var(--stick); background: var(--card); z-index: 2; box-shadow: 0 1px 0 var(--line); }
@media (min-width: 940px) { .sticktbl { overflow: visible; } }
.sticktbl td, .sticktbl th { padding-block: 15px; }
.sticktbl td:first-child { font-weight: 600; color: var(--tx); }
.sticktbl .chip { vertical-align: middle; }
/* a row the ENGINE refuses to price, not one nobody has priced yet: the
   difference is the paragraph under the table, and this is its rail */
.row-never td:first-child { box-shadow: inset 2px 0 0 var(--ctl-line); }

/* --- the worked examples --------------------------------------------- */
/* Four scenarios, one at a time. Every figure is already in the DOM as
 * served: the switch shows and hides, it never computes a price. With no
 * JavaScript the tabs are in-page links and all four are open. */
.ex-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-tab {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--ctl-line);
  font-size: .875rem; font-weight: 600; color: var(--tx2); text-decoration: none;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.ex-tab:hover { color: var(--tx); background: var(--acc-dim); border-color: var(--acc); }
/* selection is never colour alone: the chosen one gains a tick as well as
   the fill, so it survives a colour-blind reader and a monochrome screen */
.ex-tab[aria-current="true"] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.ex-tab[aria-current="true"]::before { content: "\2713"; font-weight: 700; margin-right: 7px; }
/* never draw the ring ON the fill it outlines: at 1:1 it is not a ring */
.ex-tab[aria-current="true"]:focus-visible { outline-color: var(--tx); }

.ex-panels { display: grid; gap: 14px; }
.ex-panel { border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card); padding: clamp(18px, 2.2vw, 26px); }
.rc { margin-top: 14px; }
.rc-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.rc-k { color: var(--tx2); font-size: .9375rem; }
.rc-v { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
/* what ARRIVES is the line a customer reads; the other two are the working */
.rc-in { border-top-color: var(--line2); }
.rc-in .rc-k { color: var(--tx); font-weight: 600; }
.rc-in .rc-v { font-size: 1.375rem; }
/* on a phone the figure and its label stop fighting for one line: the label
   takes the line, the figure takes the next and stays right-aligned, which
   is where money sits in every list on this product */
@media (max-width: 520px) {
  .rc-row { grid-template-columns: 1fr; gap: 3px; }
  .rc-v { justify-self: end; }
}

/* --- the tiers -------------------------------------------------------- */
/* Three cards, one per tier the limits table can hold. There is no "most
 * popular" badge on the raised one and there must never be: nothing in this
 * product computes such a figure, and inventing one on the page that states
 * the ceilings would poison the only page that has to be exact. */
.tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* equal height, ceilings pushed to the foot, so the three figures a reader
   is comparing sit on the same three lines */
.tier { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card); padding: clamp(20px, 2.4vw, 28px); }
.tier-mid { background: var(--card2); border-color: var(--ctl-line); box-shadow: var(--shadow-lg); }
/* raised by starting higher and stretching to the same foot, so it is taller
   rather than shifted: a translate would take its ceilings out of line with
   the two it is meant to be compared against */
@media (min-width: 900px) { .tier-mid { margin-top: -18px; } }
.tier-n { font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--tx3); font-variant-numeric: tabular-nums; }
.tier h3 { margin-top: 8px; }
.tier-need { margin-top: 10px; color: var(--tx2); font-size: .9375rem; }
.tier-lim { margin-top: auto; padding-top: 18px; }
.tier-lim > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.tier-lim .tl-k { color: var(--tx2); font-size: .875rem; }
.tier-lim b { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* --- /hali: the key, and the status rows ------------------------------ */
.key { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.key-i { display: grid; gap: 8px; justify-items: start; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); }
.key-d { font-size: .875rem; color: var(--tx2); }
/* the state column never breaks mid-chip, and the explanation keeps a
   readable measure instead of running the width of a laptop */
.st td:nth-child(2) { white-space: nowrap; }
.st td:last-child { color: var(--tx2); font-size: .9375rem; max-width: 64ch; }
.st td:last-child a { color: var(--acc-2); }

/* 2.5.8: a thumb is about 9mm and the other hand is usually carrying
   something. These pages are dense for the eye, never for the target. */
@media (pointer: coarse) { .ex-tab, .leadin a { min-height: 44px; } }
/* site.css switches every transition and animation off here; this says it
   again for the two hovers that move, so a reader who asked for stillness
   gets it from the first frame */
@media (prefers-reduced-motion: reduce) {
  .leadin a:hover { transform: none; }
}