/* System fonts only: this has to work at a register with no signal. */
:root {
  --ground:#F4F6F3; --surface:#fff; --surface-2:#EAEEE8; --line:#D2D9CE; --line-2:#BCC5B7;
  --ink:#151814; --ink-2:#4C5449; --ink-3:#737C6F;
  --accent:#15604C; --accent-soft:#DAE9E1; --accent-ink:#0E4436;
  --gold:#8E6410; --gold-soft:#F5E9CF;
  --danger:#9A2A20; --danger-soft:#F7E1DE;
  --radius:10px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0F1310; --surface:#171C17; --surface-2:#1F251E; --line:#2C342B; --line-2:#3C463B;
    --ink:#E7ECE4; --ink-2:#A9B3A5; --ink-3:#7D887B;
    --accent:#54C5A3; --accent-soft:#16332A; --accent-ink:#8FE0C5;
    --gold:#DFB85D; --gold-soft:#332810;
    --danger:#EE8D80; --danger-soft:#3A1B17;
  }
}
* { box-sizing:border-box; }
/* display:flex on .panel/.recents would otherwise beat the hidden attribute. */
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
button, input { font:inherit; color:inherit; }

/* ------------------------------------------------------------- chrome */
.topbar {
  position:sticky; top:0; z-index:20; background:var(--ground);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top,0)) 16px 10px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand { font-weight:700; letter-spacing:-.02em; font-size:1.05rem; }
.tabs { display:flex; gap:4px; margin-left:auto; }
.tab {
  background:none; border:1px solid transparent; border-radius:100px; padding:9px 14px;
  color:var(--ink-2); cursor:pointer; font-size:.9rem; font-weight:500;
  min-height:44px;  /* the platform minimum for a reliable tap on both iOS and Android */
}
.tab[aria-selected="true"] { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-soft); }
/* Hover states stick on touch, so they are only applied where a pointer exists. */
@media (hover: hover) { .tab:hover { color:var(--ink); } }
.count { font-variant-numeric:tabular-nums; opacity:.75; margin-left:6px; font-size:.85em; }
main { max-width:760px; margin:0 auto; padding:20px 16px 64px; }
.panel { display:flex; flex-direction:column; gap:18px; }
.lede { margin:0; color:var(--ink-2); font-size:.95rem; max-width:62ch; }
.lbl { font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.empty { color:var(--ink-3); font-size:.95rem; margin:6px 0 0; }
.foot {
  max-width:760px; margin:0 auto; padding:16px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:.78rem; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between;
}

/* ---------------------------------------------------------- pay input */
.askbar { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.amount { display:flex; flex-direction:column; gap:5px; }
.money { display:flex; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:0 12px; }
.money i { font-style:normal; color:var(--ink-3); font-family:var(--mono); }
.money input { border:0; background:none; width:6.5ch; padding:10px 4px; font-family:var(--mono); font-size:1.15rem; font-variant-numeric:tabular-nums; }
.money input:focus { outline:none; }
.money:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.switches { display:flex; gap:8px; padding-bottom:2px; }
.switch { display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:8px 14px; cursor:pointer; font-size:.9rem; color:var(--ink-2); }
.switch:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:500; }
.switch input { accent-color:var(--accent); margin:0; }

.search { display:flex; flex-direction:column; gap:5px; }
.search input {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; width:100%; font-size:1.02rem;
}
.search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.suggest { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; }
.suggest:not(:empty) { border:1px solid var(--line); background:var(--surface); }
.suggest li + li { border-top:1px solid var(--line); }
.suggest button { width:100%; text-align:left; background:none; border:0; padding:11px 14px; cursor:pointer; display:flex; align-items:baseline; gap:10px; }
.suggest button:hover, .suggest button:focus-visible { background:var(--surface-2); outline:none; }
.suggest .name { font-weight:500; }
.suggest .meta { margin-left:auto; font-family:var(--mono); font-size:.76rem; color:var(--ink-3); }
.hostprompt { background:var(--gold-soft); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:10px; }
.hostq { margin:0; font-size:.92rem; color:var(--ink); }

.recents { display:flex; flex-direction:column; gap:8px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chips button { background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:6px 13px; font-size:.87rem; cursor:pointer; color:var(--ink-2); }
.chips button:hover { border-color:var(--accent); color:var(--ink); }

/* ------------------------------------------------------------ results */
.results { display:flex; flex-direction:column; gap:14px; }
.banner { border-radius:var(--radius); padding:13px 16px; font-size:.9rem; display:flex; flex-direction:column; gap:5px; }
.banner.warn { background:var(--gold-soft); color:var(--ink); }
.banner b { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }
.banner ul { margin:0; padding-left:18px; }

.winner {
  background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent);
  border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; gap:12px;
}
.winner .top { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.winner .use { font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.winner h2 { margin:0; font-size:1.5rem; letter-spacing:-.02em; line-height:1.15; }
.winner .val { margin-left:auto; font-family:var(--mono); font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--accent-ink); white-space:nowrap; }
.maths { font-family:var(--mono); font-size:.83rem; color:var(--ink-2); background:var(--surface-2); border-radius:6px; padding:10px 12px; overflow-x:auto; white-space:nowrap; }
.maths em { font-style:normal; color:var(--ink); font-weight:600; }
.winner .terms { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.84rem; color:var(--ink-2); }
.winner .terms span { font-family:var(--mono); font-variant-numeric:tabular-nums; }

.rank { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.rank .row { display:flex; align-items:baseline; gap:12px; padding:10px 16px; font-size:.92rem; }
.rank .row + .row { border-top:1px solid var(--line); }
.rank .row .nm { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank .row .rt { font-family:var(--mono); font-size:.78rem; color:var(--ink-3); white-space:nowrap; }
.rank .row .vl { font-family:var(--mono); font-variant-numeric:tabular-nums; min-width:5.5ch; text-align:right; }
.rank .row.neg .vl { color:var(--danger); }
.rank .row.excl { color:var(--ink-3); }
.rank .row.excl .vl { color:var(--ink-3); }
.rank .head { background:var(--surface-2); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:8px 16px; }

.route { background:var(--accent-soft); border-radius:var(--radius); padding:14px 16px; font-size:.9rem; display:flex; flex-direction:column; gap:6px; }
.route b { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); }
.mnotes { display:flex; flex-direction:column; gap:6px; padding:2px 0 0; }
.mnotes span { font-size:.83rem; line-height:1.45; color:var(--ink-2); border-left:2px solid var(--line); padding-left:11px; }

.tie { display:flex; flex-direction:column; gap:5px; padding:11px 14px; border:1px dashed var(--line);
  border-radius:var(--radius); background:var(--surface); }
.tie b { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.tie span { font-size:.86rem; line-height:1.45; color:var(--ink-2); }

.cliffs { display:flex; flex-direction:column; gap:12px; margin:0 0 22px; }
.cliff { border:1px solid var(--gold); border-left:4px solid var(--gold); border-radius:var(--radius);
  background:var(--gold-soft); padding:14px 16px; display:flex; flex-direction:column; gap:7px; }
.cliff b { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }
.cliff span { font-size:.88rem; line-height:1.5; color:var(--ink); }
.cliff .fig { font-weight:600; }
.cliff .fine { font-size:.79rem; color:var(--ink-2); }

.sync { display:flex; flex-direction:column; gap:8px; }
.syncrow { display:flex; gap:8px; flex-wrap:wrap; }
.sync p { margin:0; font-size:.85rem; line-height:1.5; color:var(--ink-2); }
.sync .syncoff { color:var(--ink-3); }
.sync .syncwarn { color:var(--gold); }
.sync .syncfine { font-size:.78rem; color:var(--ink-3); }

.assumed { font-family:var(--mono); font-size:.76rem; color:var(--ink-3); }

/* ------------------------------------------------------------- wallet */
.cardlist { display:flex; flex-direction:column; gap:20px; }
.issuer h3 { margin:0 0 8px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.issuer .items { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.pick { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; }
.pick + .pick { border-top:1px solid var(--line); }
.pick:hover { background:var(--surface-2); }
.pick input { accent-color:var(--accent); width:18px; height:18px; margin:0; flex:0 0 auto; }
.pick .nm { font-weight:500; }
.pick .sub { margin-left:auto; font-family:var(--mono); font-size:.75rem; color:var(--ink-3); white-space:nowrap; }

/* ------------------------------------------------------------- points */
.premiums { display:flex; flex-direction:column; gap:0; }
.prem { display:grid; grid-template-columns:1fr 130px 8ch; gap:14px; align-items:center; padding:12px 16px; }
.prem + .prem { border-top:1px solid var(--line); }
.prem .nm { font-size:.94rem; }
.prem input[type=range] { width:100%; accent-color:var(--accent); }
.prem .cpp { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; font-size:.9rem; }
.prem .cpp.up { color:var(--accent-ink); } .prem .cpp.down { color:var(--danger); }
.prem.fixed { color:var(--ink-3); }

@media (max-width:560px) {
  main { padding:16px 12px 48px; }
  .winner .val { font-size:1.3rem; }
  .prem { grid-template-columns:1fr 90px 7ch; gap:10px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ------------------------------------------------------------- ledger */
.block { display:flex; flex-direction:column; gap:12px; }
.caps { display:flex; flex-direction:column; gap:14px; }
.meter { display:flex; flex-direction:column; gap:5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 16px; }
.meter .mhead { display:flex; gap:12px; align-items:baseline; }
.meter .nm { flex:1 1 auto; font-size:.94rem; }
.meter .rt { font-family:var(--mono); font-size:.76rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.bar { height:6px; border-radius:100px; background:var(--surface-2); overflow:hidden; }
.fill { height:100%; background:var(--accent); border-radius:100px; }
.fill.full { background:var(--gold); }

.logbtn { background:var(--accent); color:var(--surface); border:0; border-radius:var(--radius); padding:9px 16px; font-size:.9rem; font-weight:500; cursor:pointer; align-self:flex-start; }
.logbtn:hover { filter:brightness(1.1); }
.logbtn:disabled { background:var(--surface-2); color:var(--ink-3); cursor:default; filter:none; }
.logbtn.mini { background:none; color:var(--ink-3); border:1px solid var(--line); padding:2px 9px; font-size:.72rem; border-radius:100px; align-self:center; margin-left:10px; }
.logbtn.mini:hover { border-color:var(--accent); color:var(--accent-ink); filter:none; }
@media (prefers-color-scheme: dark) { .logbtn { color:#0F1310; } }

.bonusform { display:flex; gap:8px; flex-wrap:wrap; }
.bonusform select, .bonusform input, .bonusform button { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 11px; font-size:.88rem; }
.bonusform input { width:11ch; }
.bonusform button { background:var(--accent); color:var(--surface); border:0; cursor:pointer; padding:8px 18px; }
@media (prefers-color-scheme: dark) { .bonusform button { color:#0F1310; } }

.pick.dates { gap:10px; font-size:.86rem; color:var(--ink-2); flex-wrap:wrap; }
.pick.dates .nm { font-weight:400; }
input.tiny { width:6ch; background:var(--ground); border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-family:var(--mono); font-size:.82rem; }
input.tiny.wide { width:15ch; }

.danger-zone { flex-direction:row; flex-wrap:wrap; gap:10px; padding-top:8px; border-top:1px solid var(--line); }
.danger-zone button { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:9px 16px; font-size:.88rem; cursor:pointer; }
.danger-zone button:hover { border-color:var(--accent); }
.danger-zone button.danger { color:var(--danger); }
.danger-zone button.danger:hover { border-color:var(--danger); }
.rank .row .logbtn.mini { flex:0 0 auto; }
#hostQ { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); padding:9px 12px; width:100%; font-size:.94rem; }
#hostQ:focus { outline:none; border-color:var(--accent); }
.booking { display:flex; flex-direction:column; gap:10px; background:var(--surface-2); border-radius:var(--radius); padding:14px 16px; }
.booking .brow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.booking .lbl { flex:0 0 auto; }
#bookedVia { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:7px 11px; font-size:.9rem; }
#programToggles button.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:500; }
.booking .hint { font-family:var(--mono); font-size:.72rem; color:var(--ink-3); align-self:center; }
.bnote { margin:0; font-size:.82rem; color:var(--ink-3); max-width:60ch; }
.flag { font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:100px; background:var(--surface-2); color:var(--ink-3); white-space:nowrap; }
.flag.good { background:var(--accent-soft); color:var(--accent-ink); }
.flag.bad { background:var(--danger-soft); color:var(--danger); }
.unchecked-note { background:var(--gold-soft); border-radius:6px; padding:9px 12px; font-size:.85rem; color:var(--ink); }
.prov { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding-top:11px; margin-top:2px; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-3); }
.pick.terms { gap:6px 14px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-3); background:var(--surface-2); }
.pick.terms .nm { font-weight:400; flex:0 0 auto; }
a.src { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; white-space:nowrap; }
a.src::after { content:" \2197"; text-decoration:none; }
a.src:hover { filter:brightness(1.15); }
.src.none { font-style:italic; opacity:.85; }
/* ----------------------------------------------------------- benefits */
.benefits { display:flex; flex-direction:column; gap:10px; }
.benefits h3.lbl { margin:14px 0 2px; }
.benefit { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line-2); border-radius:var(--radius); padding:12px 15px; display:flex; flex-direction:column; gap:8px; }
.benefit.u-expired { border-left-color:var(--danger); }
.benefit.u-urgent  { border-left-color:var(--gold); }
.benefit.u-soon    { border-left-color:var(--accent); }
.benefit.u-done    { opacity:.55; }
.bhead { display:flex; align-items:center; gap:11px; }
.bname { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.bname .nm { font-size:.96rem; text-transform:capitalize; }
.bname .sub { font-size:.76rem; color:var(--ink-3); }
.bright { display:flex; align-items:baseline; gap:10px; flex:0 0 auto; }
.bright .amt { font-family:var(--mono); font-size:1rem; font-variant-numeric:tabular-nums; }
.u-expired .bright .rt, .u-urgent .bright .rt { color:var(--danger); font-weight:600; }
.bfoot { display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--ink-3); }
.bfoot .act { color:var(--ink-2); }
.bfoot .hint { font-family:var(--mono); font-size:.71rem; }
.bonusform label { display:flex; flex-direction:column; gap:3px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.famhead { display:flex; align-items:baseline; gap:12px; margin:22px 0 2px; }
.famhead h3 { margin:0; }
.famhead .rt { font-family:var(--mono); font-size:.72rem; color:var(--ink-3); margin-left:auto; }
.famnote { margin:0 0 10px; font-size:.84rem; color:var(--ink-2); max-width:66ch; }
.premiums-group { display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.premiums-group .prem + .prem { border-top:1px solid var(--line); }
.prem.held { background:var(--accent-soft); }
.prem .own { font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--accent); border-radius:100px; padding:1px 7px; margin-left:9px; vertical-align:1px; }
.bname .enroll, .bname .gate { font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:2px 7px; border-radius:100px; margin-left:8px; vertical-align:1px; white-space:nowrap; }
.bname .enroll { background:var(--danger-soft); color:var(--danger); }
.bname .gate { background:var(--gold-soft); color:var(--gold); }
/* ------------------------------------------------------- protections */
.prot { display:flex; flex-direction:column; border-top:1px solid var(--line); background:var(--ground); }
.protrow { padding:11px 16px; display:flex; flex-direction:column; gap:6px; }
.protrow + .protrow { border-top:1px solid var(--line); }
.phead { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.phead .nm { font-size:.88rem; text-transform:capitalize; }
.phead .lim { font-family:var(--mono); font-size:.75rem; color:var(--ink-3); }
.cover { font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:2px 8px; border-radius:100px; white-space:nowrap; }
.cover.good { background:var(--accent-soft); color:var(--accent-ink); }
.cover.warn { background:var(--gold-soft); color:var(--gold); }
.cover.bad  { background:var(--danger-soft); color:var(--danger); }
.cond { margin:0; padding-left:17px; display:flex; flex-direction:column; gap:3px; font-size:.79rem; color:var(--ink-2); }
.pfoot { display:flex; flex-direction:column; gap:3px; font-size:.76rem; color:var(--ink-3); }
.pgroup { font-size:.66rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); padding:9px 16px 5px; background:var(--surface-2); border-top:1px solid var(--line); }
.prot .protrow + .pgroup { margin-top:0; }
.phead .nm { text-transform:none; font-weight:500; }

/* ------------------------------------------------ rental counter flag */
/* Sits under the winner because at a car rental desk the insurance answer
   outweighs the points answer by two orders of magnitude. */
.cover.unknown { background:var(--surface-2); color:var(--ink-3); }
.rental { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.rhead { padding:11px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.rhead b { font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.rhead .conflict { font-size:.92rem; color:var(--gold); font-weight:500; }
.rhead .agree { font-size:.92rem; color:var(--accent-ink); }
.rrow { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:10px 16px; font-size:.9rem; }
.rrow + .rrow { border-top:1px solid var(--line); }
.rrow .nm { flex:1 1 9rem; min-width:0; }
.rrow .lim { font-family:var(--mono); font-size:.75rem; color:var(--ink-3); }
.rrow .pts { font-size:.72rem; color:var(--ink-3); margin-left:auto; white-space:nowrap; }
.rrow.bad .nm { color:var(--danger); }
.rfoot {
  margin:0; padding:10px 16px 12px 33px; border-top:1px solid var(--line); background:var(--ground);
  display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--ink-2);
}
.rrow .soft { font-size:.7rem; color:var(--gold); }
.fare { font-size:.78rem; }
.fare.warn { color:var(--gold); }
.fare.good { color:var(--ink-2); }
.plist { font-size:.78rem; color:var(--ink-2); }
.plist summary { cursor:pointer; color:var(--ink-3); }
.plist ul { margin:4px 0 0; padding-left:17px; display:flex; flex-direction:column; gap:2px; }

/* ------------------------------------------------------- built for phones */
/* This ships as an iOS and Android app, so the phone layout is the real one and
   the desktop layout is the accommodation — not the other way round. */

* { -webkit-tap-highlight-color: transparent; }
button, .switch, .tab, summary, a { touch-action: manipulation; }
body { overscroll-behavior-y: contain; }          /* no rubber-band under the app */

/* iOS zooms the whole page when a focused input is under 16px. Every input in
   the app is at or above it, which is a constraint on type scale, not a detail. */
input, select, textarea { font-size: max(16px, 1rem); }

@media (max-width: 640px) {
  /* Thumb reach: navigation belongs at the bottom of a phone, not the top. */
  .topbar { padding-bottom:10px; }
  .tabs {
    position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0;
    background:var(--ground); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0));
    gap:0; justify-content:space-around;
  }
  .tab {
    flex:1 1 0; min-width:0; border-radius:12px; padding:8px 2px; font-size:.72rem;
    display:flex; align-items:center; justify-content:center; gap:4px;
    border-color:transparent; background:none;
  }
  /* No pill on a bottom bar — colour and weight carry the selected state, and the
     border has to be cleared explicitly or the wider rule keeps drawing it. */
  .tab[aria-selected="true"] { background:none; border-color:transparent; color:var(--accent-ink); font-weight:700; }
  .count { margin-left:0; font-size:.95em; }
  /* Clear the fixed bar, and keep the last row of content reachable. */
  main { padding-bottom:calc(84px + env(safe-area-inset-bottom,0)); }
  .foot { padding-bottom:calc(84px + env(safe-area-inset-bottom,0)); }
}

/* Anything the thumb has to hit gets a real target, at every width. */
.logbtn, .switch, .pick button, .chips button, .recents button { min-height:44px; }

/* A 17px checkbox is a desktop control. On a phone the box can stay small but
   the target around it cannot, so the hit area is grown with padding and pulled
   back with a negative margin — the layout does not move, the tap gets easier. */
input[type=checkbox] { accent-color:var(--accent); width:22px; height:22px; flex:0 0 auto; margin:0; }
/* Native checkboxes ignore padding, so the target is grown by making the LABEL
   the control: tapping anywhere on the benefit's name toggles it. */
.btap { display:flex; align-items:center; gap:11px; flex:1 1 auto; min-width:0; min-height:44px; cursor:pointer; }

/* --------------------------------------------------------------- reminders */
.remind:empty { display:none; }
.remindrow {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:13px 16px;
}
.rtext { display:flex; flex-direction:column; gap:3px; flex:1 1 14rem; min-width:0; }
.rtext b { font-size:.9rem; }
.rtext span { font-size:.83rem; color:var(--ink-2); }
.rtext .fine { font-size:.76rem; color:var(--ink-3); }

/* ------------------------------------------------------------------ legal */
/* Folded away because nobody reads a wall of text, but four short paragraphs
   rather than a page, so that opening it is actually worth doing. */
.legal { flex:1 1 100%; }
.legal summary { cursor:pointer; color:var(--ink-2); }
.legal div { display:flex; flex-direction:column; gap:8px; margin-top:8px; max-width:62ch; line-height:1.55; }
.legal p { margin:0; }
.rfoot .caution { color:var(--gold); }

/* ------------------------------------------------------ paid disclosure */
/* Nothing renders today — no card carries a commercial relationship. The styles
   exist so the disclosure has a designed place on the recommendation the day one
   does, rather than being squeezed in around a finished layout. */
.funding {
  border:1px solid var(--gold); background:var(--gold-soft); border-radius:var(--radius);
  padding:11px 16px; display:flex; flex-direction:column; gap:3px;
}
.funding b { font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }
.funding span { font-size:.88rem; }
.paid { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:.83rem; color:var(--ink-2); }
.badge {
  font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 8px; border-radius:100px; background:var(--gold-soft); color:var(--gold); white-space:nowrap;
}
.condlbl { font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

/* ------------------------------------------------------- cash advance */
/* Louder than any other banner in the app, because it is the one case where
   following a rewards recommendation costs money rather than saving it. */
.cashadv {
  border:2px solid var(--danger); background:var(--danger-soft); border-radius:var(--radius);
  padding:13px 16px; display:flex; flex-direction:column; gap:5px;
}
.cashadv b { color:var(--danger); font-size:1rem; }
.cashadv span { font-size:.88rem; color:var(--ink); }
.cashadv .fine { font-size:.78rem; color:var(--ink-2); }