/* tokens — from wallet_tokens() in _wallet_ui.php */
:root{
  /* ── brand ───────────────────────────────────────────────────────────── */
  --mtn:#FFD40B;              /* the one action colour. Nothing else is yellow. */
  /* Balance-card gradient. Range kept under ~12% lightness: wider and the
     black text loses contrast at the dark end while the light end washes
     out, which is what killed the old #FFD40B -> #B8930C version. Narrow
     ranges also band less on 6-bit phone panels. */
  --mtn-hi:#FFE671;
  --mtn-lo:#F0C70A;
  /* Ink for anything sitting at the DARK end of the card ramp - the
     closed-loop disclaimer under the home tiles is the case this was
     added for. Computed against --mtn-lo, never stored: no fixed hex
     can be right on both TapAPI's gold and eTap's violet. */
  --on-grad-end:#0A0A0A;
  --grad-card:linear-gradient(160deg,#FFE671 0%,#FFD40B 42%,#F0C70A 100%);
  --mtn-d:#B89908;            /* yellow, darkened — for text ON light, not fills */
  --on-mtn:#0A0A0A;           /* COMPUTED against the brand, never stored. */
  /* Ink for anything sitting on the PAGE rather than on a card. --ink is
     for cards and cards are white; pairing it with a dark page gave about
     1.1:1 and made every heading outside a card invisible. Computed the
     same way as the line above, so it follows a tenant's page colour. */
  --on-page:#FFFFFF;
  /* TOKACTION: the dark action pair. Primary buttons (.vbuy) and every
     Back wear this - a black card with yellow text. Fixed to each other:
     --on-action is not --mtn, because a tenant may move the action fill
     without moving the brand yellow. */
  --action:#0A0A0A;
  --on-action:#FFC700;
  /* Same colour as an rgb triplet, for rules that need it at partial
     alpha -- rgba() cannot take a hex custom property, and color-mix()
     is too recent for the Android WebViews this runs on. A tenant sets
     both or the translucent edges keep our yellow. */
  --on-action-rgb:255,199,0;
  --on-page-rgb:255,255,255;

  /* ── ink ─────────────────────────────────────────────────────────────── */
  --ink:#14201a;              /* body text, amounts, headings */
  --ink2:#55655C;             /* labels, captions, secondary lines */
  --ink3:#55655C;             /* alias of --ink2; was #5F6F66. Do not use in new code. */
  --ink-soft:#8A97A5;         /* day dividers, disabled, faintest metadata */

  /* ── surfaces ────────────────────────────────────────────────────────── */
  --bg:#FFF7F2;               /* page */
  --card:#FFFFFF;             /* raised surface */
  --card-2:#F7F9F8;           /* inset surface: keypad keys, wells */
  --line:#E8EEEA;             /* hairline */
  /* Named by the brand bible, absent from the code. The card hairline
     is #C0C4C8 everywhere it is drawn by hand -- t.php, the skin, the
     method tiles -- while --line above is a paler green-grey for white
     surfaces. Two jobs sharing one name, drifting.
     TODO: the bible calls the card hairline --line. Reconciling means
     moving every current --line user, so both exist until then. */
  --line-card:#C0C4C8;        /* border of a card, or a tile on yellow */
  /* The third of the four layers -- page, card, TILE, action. It was
     only ever defined inside wallet_skin.css.php, scoped to the skin,
     so any page not carrying data-skin="wallet" got nothing at all and
     drew transparent tiles. It belongs here; the skin can inherit. */
  --tile:#FFFFFF;             /* a white tile, on the yellow or the page */
  --ink-mut:rgba(10,10,10,.62); /* secondary text ON the yellow card */
  --line-2:#D8E2DC;           /* emphasised border, focus outline on light */

  /* ── money and state ─────────────────────────────────────────────────── */
  --pos:#0B6B3A;              /* money in. Always paired with a + sign. */
  --neg:var(--ink);           /* money out is ink, not red — spending is not an error */
  --alert:#E23D28;            /* failure only. Never for an ordinary debit. */
  --gold:#F5B301;             /* pending, waiting, not yet settled */
  --blue:#2563EB;             /* links and informational only */

  /* tinted backgrounds for the above, for pills and message boxes */
  --pos-bg:#E7F5ED;  --pos-ink:#075030;  --pos-line:#CFE4D6;
  --alert-bg:#FDECEA; --alert-ink:#A62A1A; --alert-line:#F6C9C2;
  --gold-bg:#FFF8E8; --gold-ink:#8A6400;  --gold-line:#F3E3B8;
  --mtn-bg:#FFF6CE;  --mtn-ink:#594A04;   --mtn-line:#FFE779;

  /* ── type ────────────────────────────────────────────────────────────── */
  --font:'DM Sans',system-ui,Arial,sans-serif;
  --font-mono:'DM Mono',ui-monospace,monospace;
  /* Two weights only. 300 and lighter break up on low-density screens. */
  --w-reg:400; --w-med:600; --w-bold:700;

  --fs-amount:38px;           /* the balance. The largest thing on any screen. */
  --fs-amount-c:18px;         /* its cents */
  --fs-h1:20px;
  --fs-h2:19px;
  --fs-body:15px;
  --fs-row:13.5px;            /* transaction titles, action tile labels */
  --fs-cap:12.5px;            /* captions under a title */
  --fs-label:11.5px;          /* field labels, uppercase strip labels */
  --fs-min:11px;              /* nothing on a phone goes below this */

  /* ── space and shape ─────────────────────────────────────────────────── */
  --r:18px;                   /* cards */
  --r-btn:15px;               /* buttons and action tiles */
  --r-inner:12px;             /* inputs */
  --r-glyph:10px;             /* the rounded square behind an icon */
  --r-pill:999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:28px;

  /* ── touch ───────────────────────────────────────────────────────────── */
  /* 54px, not the 44px accessibility floor. This wallet is used standing up,
     outdoors, one-handed, often by someone holding something else. */
  --tap:54px;

  /* ── SHOP-TOKENS: the till surface ─────────────────────────────────
     The same palette as the wallet, a different surface. Values below are
     TODAY'S look exactly - this pass only makes them movable. A till is read
     across a counter in daylight by somebody not holding it, so when the
     surface flips it is white card / black page, with the yellow spent on the
     one control that advances the sale. */
  --shop-ink:#14201A;              /* till text, borders, the amount */
  --shop-card:#FFFFFF;             /* the card, where the wallet has yellow */
  --shop-line:#E3EAF0;             /* hairline on the card */
  --shop-page:#0A0A0A;             /* SHOP-FLIP: the page is black, as the wallet is */             /* page behind the card */
  --shop-head:var(--mtn);          /* SHOP-FLIP: goldbar, not a navy bar */             /* the header bar */
  --shop-head-ink:#0A0A0A;
  --shop-shadow:rgba(0,0,0,.34);/* one shadow, was eight navy tints */
  --shop-panel:#141414;            /* .tokpanel - a dark block on a light card */
  /* Carrier brands. NOT tokens: a tenant cannot recolour MTN or Vodacom. */
  --net-mtn:#FFCB05; --net-vodacom:#E60000; --net-cellc:#141414; --net-telkom:#0073CF;
  --tap-sm:44px;              /* secondary controls only — back, chips */
  --glyph:34px;               /* the icon square in a row or tile */

  /* ── legacy, marked for removal ──────────────────────────────────────── */
  /* Kept so nothing changes today. Flat fills read better on low-end screens
     and survive a redesign; replace with --mtn and --bg when each screen is
     converted. --grad-page is gone: a grep across till.php, t.php,
     speedpoint.php, wallet_skin.css.php, _wallet_ui.php and _tabbar.php
     found no consumer anywhere, so it was deleted rather than derived.
     --grad-bal below is live and carries the tenant ramp reversed. */
  --grad-bal:linear-gradient(340deg,#FFE671 0%,#FFD40B 42%,#F0C70A 100%);   /* the card ramp reversed - see GRADBAL. Was a
                              hardcoded TapAPI gold ramp, which every tenant
                              inherited on the balance header. */
}

/* Respect the system setting. Several screens animate spinners and shakes. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
}

/* ── the wallet surface ─────────────────────────────────────────────────
   Everything here is scoped, so linking this file is safe on any page. */
html[data-skin="wallet"]{
  --tile:#FFFFFF; --tile-line:#E8EEEA; --tile-ink:var(--ink); --tile-mut:var(--ink2);
  --note:#FFFFFF; --note-line:#E8EEEA;
  /* SKIN-MUT: pages that predate the skin carry a dark-page --mut (#B9C3CE)
     in their own :root. On a card that is unreadable. The skin owns the
     surface, so it owns the muted ink for it too - and since patch 071 that
     surface is the tenant's, not the house's. --ink-mut is alpha over the
     card rather than a fixed colour, so it follows whatever brand paints it
     instead of assuming one. */
  --mut:rgba(var(--on-page-rgb),.72);
}
/* bare <p> was the gap: .lede/.sub/ul/ol were remapped below, p was not */
html[data-skin="wallet"] .card p,
html[data-skin="wallet"] .gate p{ color:#4A4022 }
html[data-skin="wallet"]{ color-scheme:dark }   /* speedpoint's head pins only-light */
html[data-skin="wallet"] body{
  /* was color:var(--ink) - the CARD ink, on a dark page. Anything not in
     a card could not be read on any page linking this file. */
  background:var(--action); color:var(--on-page);
  font-family:'DM Sans',system-ui,Arial,sans-serif;
}

/* header — yellow bar, black squircle back in yellow text */
html[data-skin="wallet"] .goldbar,
html[data-skin="wallet"] .site-head{
  display:flex; align-items:center; gap:10px;
  background:var(--mtn); border:0; border-radius:16px;
  padding:10px 14px; margin:8px auto 0; position:static;
}
html[data-skin="wallet"] .goldbar .back,
html[data-skin="wallet"] .site-head .head-back,
html[data-skin="wallet"] .pgback{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  background:#0A0A0A; border:1px solid #0A0A0A; border-radius:10px;
  color:var(--mtn); font-size:15px; font-weight:700; line-height:1;
  padding:10px 12px; min-height:44px; margin:0; box-sizing:border-box;
  text-decoration:none; position:static; transform:none;
}
/* SKIN-LOGO: logo-dark.svg is the DARK-page mark - white Tap, yellow API. On the
   yellow bar the yellow half vanishes and the white half greys out. There is no
   light variant on the server, so the mark is flattened to solid black, which is
   what the design language asks for on a yellow surface anyway. One rule, every
   page: a white-label build swapping the asset gets the same treatment free. */
html[data-skin="wallet"] .goldbar img,
html[data-skin="wallet"] .site-head > a > img{ filter:brightness(0) }
/* not inside the black back button - the mark is already on black there */
html[data-skin="wallet"] .goldbar .back img,
html[data-skin="wallet"] .site-head .head-back img{ filter:none }
html[data-skin="wallet"] .goldbar .head h2{
  color:#0A0A0A; font-size:17px; font-weight:700; margin:0; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* screen card — yellow gradient, silver hairline, 22px */
html[data-skin="wallet"] .gate,
html[data-skin="wallet"] .card{
  background:var(--grad-card); border:1px solid #C0C4C8; border-radius:22px;
  box-shadow:none; color:var(--ink);
}
html[data-skin="wallet"] .card h2,
html[data-skin="wallet"] .card h3,
html[data-skin="wallet"] .lbl{ color:var(--ink) }
html[data-skin="wallet"] .card .lede,
html[data-skin="wallet"] .card .h,
html[data-skin="wallet"] .card .sub,
html[data-skin="wallet"] .card ul,
html[data-skin="wallet"] .card ol{ color:var(--ink-mut) }
html[data-skin="wallet"] h1{ color:#F5F5F5 }
/* SKIN-API: pages set .api to the brand yellow, which is right on the black page
   and invisible on the yellow card - the wordmark vanishes mid-sentence. On a
   yellow surface it takes the darkened yellow, which reads as brand without
   disappearing. .tap follows the surface ink. */
html[data-skin="wallet"] .card .api,
html[data-skin="wallet"] .gate .api,
html[data-skin="wallet"] .goldbar .api,
html[data-skin="wallet"] .site-head .api{ color:var(--mtn-d) }
html[data-skin="wallet"] .card .tap,
html[data-skin="wallet"] .gate .tap{ color:var(--ink) }
/* the black back button is the one place the yellow wordmark still works */
html[data-skin="wallet"] .goldbar .back .api,
html[data-skin="wallet"] .site-head .head-back .api{ color:var(--mtn) }
html[data-skin="wallet"] .goldbar .back .tap,
html[data-skin="wallet"] .site-head .head-back .tap{ color:#FFFFFF }
/* the bar is the head of the card, not of the viewport: same width, and joined */
html[data-skin="wallet"] .goldbar,
html[data-skin="wallet"] .site-head{ max-width:520px }
/* SKIN-H1: the rule above is for a heading on the BLACK page. Inside a card the
   surface is yellow, so the same light grey is unreadable - the fault that made
   eligibility.html and welcome.html look broken. Cards win on specificity. */
html[data-skin="wallet"] .card h1,
html[data-skin="wallet"] .gate h1{ color:var(--ink) }
/* the eyebrow is the Statement day-header doing the same job on the same surface */
html[data-skin="wallet"] .card .eyebrow,
html[data-skin="wallet"] .gate .eyebrow{ color:var(--ink2) }

/* white tiles sit ON the yellow, never in a nested white box */
html[data-skin="wallet"] .inp,
html[data-skin="wallet"] select.inp,
html[data-skin="wallet"] textarea.inp,
html[data-skin="wallet"] .tile{
  background:var(--tile); border:1.5px solid var(--tile-line); color:var(--tile-ink);
}
html[data-skin="wallet"] .inp:focus{ border-color:#0A0A0A }

/* action — black on the yellow card, because the card is already the accent */
html[data-skin="wallet"] .cta,
html[data-skin="wallet"] .btn{
  /* TOKACTION, per _wallet_ui.php: the dark action pair, fixed to each
     other. --on-action is deliberately not --mtn -- a tenant moves the
     action fill without moving the brand yellow. This rule previously
     hardcoded #0A0A0A and read var(--mtn) for the text, so on_action was
     inert and a tenant moving brand moved their button TEXT instead. */
  border-radius:var(--r-btn); min-height:var(--tap); font-size:var(--fs-body);
  background:var(--action); color:var(--on-action);
  /* the action colour at alpha. There is no --action-rgb yet, and rgba()
     cannot take a hex custom property, so this stays literal until there
     is one -- same reason --on-action-rgb exists. */
  box-shadow:0 8px 20px -8px rgba(10,10,10,.55);
}
html[data-skin="wallet"] .btn.ghost,
html[data-skin="wallet"] .btn.navy{
  background:#fff; color:var(--ink); border:1.5px solid var(--tile-line); box-shadow:none;
}
html[data-skin="wallet"] .btn[disabled]{ opacity:.45; box-shadow:none }

html[data-skin="wallet"] input.bad,
html[data-skin="wallet"] select.bad,
html[data-skin="wallet"] textarea.bad{
  border-color:var(--alert,#E4572E)!important;
  box-shadow:0 0 0 3px rgba(228,87,46,.18)!important;
}

/* SKIN-JOIN: the goldbar is the HEAD of the card, not a floating pill. Square
   bottom corners, square top on the card it sits above, no gap - one continuous
   surface, the way the Statement reads. The back button leads on the left. */
html[data-skin="wallet"] .goldbar,
html[data-skin="wallet"] .site-head{
  border-radius:16px 16px 0 0; margin-bottom:0; justify-content:flex-start;
}
html[data-skin="wallet"] .site-head + .wrap > .card:first-of-type,
html[data-skin="wallet"] .site-head + .card,
html[data-skin="wallet"] .goldbar + .card,
html[data-skin="wallet"] .goldbar + .gate{ border-radius:0 0 22px 22px; margin-top:0; border-top:0 }
/* back first, then whatever the page puts beside it */
html[data-skin="wallet"] .site-head > a{ flex-direction:row-reverse; justify-content:flex-end; gap:12px }
/* the footer wordmark lives on the BLACK page, so it takes the dark-page pair */
html[data-skin="wallet"] .footer .tap{ color:#FFFFFF }
html[data-skin="wallet"] .footer .api{ color:var(--mtn) }

/* SKIN-BAR2: the bar reads back-first, hard left, exactly as the Statement does.
   row-reverse alone put the pair on the right because the anchor was still
   justify-end. The logo filter is repeated with !important because the page own
   .site-head img rule has equal specificity and loads after this file - a
   white-label build must not have to win a cascade race to get a legible mark. */
html[data-skin="wallet"] .site-head > a{ justify-content:flex-start; width:100%; }
/* SKIN-FLATTEN: this exists because OUR mark is white-on-black and
   vanishes on the yellow bar. A tenant who supplies their own light
   variant must NOT get it -- flattening a gradient wordmark to a
   silhouette breaks the one rule every brand bible states. The class
   is set by the page only when the tenant has no light mark. */
html[data-skin="wallet"]:not(.tenant-mark) .site-head img,
html[data-skin="wallet"]:not(.tenant-mark) .goldbar img{ filter:brightness(0) !important }
html[data-skin="wallet"] .site-head .head-back img,
html[data-skin="wallet"] .goldbar .back img{ filter:none !important }

/* SKIN-BAR3: pages set justify-content:space-between on the header anchor with
   equal specificity and load after this file, so the bar kept centring itself.
   The anchor is only the back button now - it must not stretch. */
html[data-skin="wallet"] .site-head > a{ width:auto !important; justify-content:flex-start !important; flex:0 0 auto }
html[data-skin="wallet"] .site-head{ justify-content:flex-start !important; gap:12px }
html[data-skin="wallet"] .site-head .head{ flex:1 1 auto; min-width:0 }
html[data-skin="wallet"] .site-head .head h2{
  color:#0A0A0A; font-size:17px; font-weight:700; margin:0; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}