/* ============================================================
   TUNTUT — design system
   "Paper Premium" · Prussian Blue. Tokens + components shared by
   every page. Page-specific layout lives in entry/story/dashboard.css.
   Alternate palettes are archived in info/design-explorations/ —
   token names match, so a palette swap is a copy into :root below.
   ============================================================ */
:root{
  /* type */
  --display:"Fraunces",Georgia,serif;          /* Google Fonts; falls back to Georgia offline */
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --num:"Public Sans",system-ui,sans-serif;
  --num-hero:"Fraunces",Georgia,serif;

  /* shape */
  --radius:22px; --radius-sm:15px;
  --shadow:0 20px 54px rgba(60,42,20,.10);
  --shadow-sm:0 8px 22px rgba(60,42,20,.06);
  --lift:-6px; --hairline:1px;
  --tag-weight:600; --eyebrow-ls:.22em;

  /* palette — Prussian Blue */
  --bg:#eef1f2; --paper:#fdfefe; --sunk:#e8edee;
  --ink:#1b2530; --head:#132130; --muted:#5b6771; --faint:#93a0a8;
  --line:#dbe2e5; --line-2:#e7ecee;
  --accent:#1d5080; --accent-ink:#fff;
  --gold:#b0812e; --gold-soft:#f4edd8;        /* the "money" cue · status: warn */
  --pos:#2f7d57; --pos-soft:#e2efe7;          /* status: good */
  --bad:#b3261e; --bad-soft:#fbe9e7;          /* status: bad */
  --info:#1d5080;

  /* Text-safe variants. The base hues above are decorative (bars, borders,
     the gold money cue) and are too light to carry text: white on --gold is
     only 3.45:1 and --gold on --gold-soft just 2.98:1 — both fail WCAG AA.
     Our audience is elderly, who lose contrast sensitivity first, so anything
     carrying a WORD uses these instead. All measured ≥4.5:1. */
  --gold-deep:#7d5a1c;   /* white on it 6.20:1 · on --gold-soft 5.36:1 */
  --pos-deep:#26694a;    /* white on it 6.49:1 · on --pos-soft  5.54:1 */
  --bad-deep:#b3261e;    /* white on it 6.47:1 · on --bad-soft  5.58:1 — already passes */
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  background-image:
    radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 42%),
    radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 48%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--body);
  font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--num); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.wrap{max-width:1080px; margin:0 auto; padding:clamp(20px,4vw,40px) clamp(16px,4vw,44px)}

/* ---- topbar ---- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px clamp(16px,4vw,44px);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:var(--hairline) solid var(--line);
}
.wordmark{font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.02em; color:var(--head); text-decoration:none}
.wordmark b{color:var(--accent); font-weight:700}

/* brand lockup: the Forward-Claim mark + the wordmark, side by side. Used in the
   topbar and on the entry screens. The mark is decorative (alt=""): the wordmark
   already spells "Tuntut", so the mark must not repeat it to a screen reader. */
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.brand-mark{width:auto; display:block; flex:0 0 auto}
.topbar .brand-mark{height:30px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:var(--hairline) solid var(--line);
  border-radius:99px; background:var(--paper); font-size:12.5px; color:var(--muted)}
.chip .num{color:var(--ink); font-size:12.5px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--pos); flex:0 0 auto}
.spacer{margin-left:auto}

/* ---- buttons ---- */
.btn{font-family:var(--body); font-size:14px; font-weight:700; cursor:pointer; padding:12px 20px;
  border-radius:var(--radius-sm); border:var(--hairline) solid transparent; transition:.18s;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--sunk)}
.btn-sm{padding:8px 14px; font-size:13px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---- eyebrow ---- */
.eyebrow{font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:12px; margin:0 0 14px}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---- card ---- */
.card{background:var(--paper); border:var(--hairline) solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column}
.card:hover{transform:translateY(var(--lift)); box-shadow:var(--shadow)}
.card .ct{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px}
.card h3{font-family:var(--display); font-size:18px; font-weight:700; margin:0; color:var(--head); line-height:1.15}
.card .desc{color:var(--muted); font-size:13px; margin:0 0 14px}
.card .figure{font-family:var(--num); font-variant-numeric:tabular-nums; font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1; margin-bottom:4px}
.card .figure small{font-size:.42em; font-weight:600; color:var(--muted); letter-spacing:0}
.card .figure.pos{color:var(--pos)}
.card .figure.bad{color:var(--bad)}
.card .caption{font-size:12px; color:var(--faint); margin:0 0 16px}
/* the quiet cash translation under a non-ringgit figure (e.g. litres of fuel) */
.card .note{font-size:12px; font-weight:600; color:var(--gold-deep); margin:-10px 0 16px}
.card .foot{margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:14px; border-top:var(--hairline) solid var(--line-2)}
.card .foot a{color:var(--accent); font-weight:600; font-size:13px; text-decoration:none}
.card .foot a:hover{text-decoration:underline}
.card .src{margin-left:auto; font-size:11px; color:var(--faint)}

/* ---- status: glyph + colour + plain words ----
   Colour NEVER carries meaning alone. The audience is B40 + elderly:
   red/green is the worst pair for colour-blindness, and older eyes lose
   contrast and colour discrimination. Every status must survive greyscale
   — the glyph and the word do the work, colour only reinforces.
   Shapes are deliberately distinct: ✓ tick / ! bang / ✗ cross. */
.tag{font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px 4px 4px; border-radius:99px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.tag.good{color:var(--pos-deep); background:var(--pos-soft)}
.tag.warn{color:var(--gold-deep); background:var(--gold-soft)}
.tag.bad {color:var(--bad-deep); background:var(--bad-soft)}

/* the glyph itself — a filled disc carrying the mark */
.glyph{display:inline-grid; place-items:center; border-radius:50%; flex:0 0 auto;
  background:currentColor; line-height:1; font-weight:900}
.glyph::before{color:var(--paper)}
.glyph.good::before{content:"✓"}
.glyph.warn::before{content:"!"}
.glyph.bad::before {content:"✕"}

/* small — inside tags */
.glyph.sm{width:17px; height:17px; font-size:10px}

/* medium — the split rows */
.glyph.md{width:30px; height:30px; font-size:17px}

/* large — the carousel band. Sized to read across a room. */
.glyph.lg{width:64px; height:64px; font-size:34px; background:var(--paper)}
.glyph.lg.good::before{color:var(--pos-deep)}
.glyph.lg.warn::before{color:var(--gold-deep)}
.glyph.lg.bad::before {color:var(--bad-deep)}

/* ---- the split: tap-money vs apply-money ----
   One total answers "how much"; this answers "what do I do", which is the
   question that actually matters. Same status vocabulary as .tag — the row
   colour feeds the glyph via currentColor, and the words carry the meaning. */
.split{display:flex; flex-direction:column; width:100%; text-align:left}
.split .row{display:flex; align-items:center; gap:13px; padding:13px 0;
  border-bottom:var(--hairline) solid var(--line-2)}
.split .row:last-child{border-bottom:0}
.split .row.good{color:var(--pos-deep)}
.split .row.warn{color:var(--gold-deep)}
.split .txt{font-size:12.5px; color:var(--muted); line-height:1.45}
.split .txt b{color:var(--ink); font-weight:700}
.split .amt{display:block; font-family:var(--num-hero); font-size:26px; font-weight:700;
  letter-spacing:-.02em; line-height:1.1; color:var(--head); font-variant-numeric:tabular-nums}

/* ---- prototype disclaimer ---- */
.mock{margin:0 0 20px; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--gold-soft); border:var(--hairline) solid color-mix(in srgb,var(--gold) 30%, transparent);
  font-size:12.5px; color:var(--ink); text-align:left}

/* ---- spinner (the landing check + the sign-up modal) ---- */
.spinner{width:34px; height:34px; margin:0 auto 20px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- bars ---- */
.bar{height:7px; border-radius:99px; background:var(--sunk); overflow:hidden; margin:2px 0 6px}
.bar > i{display:block; height:100%; border-radius:99px; background:var(--pos)}
.bar.warn > i{background:var(--gold)}
.barlbl{display:flex; justify-content:space-between; font-size:11.5px; color:var(--faint); margin-bottom:10px}

/* ---- guardrail ---- */
.guard{margin-top:clamp(30px,5vw,48px); padding:22px 24px; border-radius:var(--radius); background:var(--sunk);
  border:var(--hairline) dashed var(--line); display:flex; gap:14px; align-items:flex-start; color:var(--muted); font-size:13px}
.guard b{color:var(--ink)}
.guard .shield{font-size:20px; line-height:1}
.foot-note{text-align:center; color:var(--faint); font-size:11.5px; margin-top:26px}

/* ---- "not ready yet" overlay ----
   A native <dialog>, built by app.js and shared across every page: focus trap,
   Esc, top layer and backdrop all come free. The backdrop blur is stronger than
   the sign-up sheet's on purpose — the ask was to soften the whole page. */
.notready{width:400px; max-width:calc(100vw - 32px); padding:0; border:0; background:transparent}
.notready::backdrop{background:color-mix(in srgb,var(--head) 45%, transparent); backdrop-filter:blur(6px)}
.notready[open]{animation:rise .3s cubic-bezier(.2,.7,.3,1) both}
/* Left-aligned to match the sign-up sheet: a full sentence reads better ranged
   left than centred, where the ragged wrap looks off. */
.notready-inner{background:var(--paper); border:var(--hairline) solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(24px,4vw,32px); text-align:left}
.notready-inner h2{font-family:var(--display); font-weight:700; color:var(--head); letter-spacing:-.02em;
  font-size:1.4rem; line-height:1.15; margin:0 0 8px}
.notready-inner p{margin:0 0 20px; color:var(--muted); font-size:13.5px}
.notready-inner .btn-primary{width:100%}
.notready-emoji{font-size:44px; line-height:1; margin:0 0 6px}

/* ---- motion ---- */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.anim{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

@media (max-width:560px){ .hide-sm{display:none} }