/* Zoom is off (2026-09-04): the counter layout stays exactly as designed.
   pan-x pan-y keeps scrolling and cancels pinch + double-tap zoom where the
   viewport meta is ignored (iOS Safari in the browser). */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Shell + components — everything through tokens (DLV-02).
   Responsive-first (decision 0005): rem/fluid only; grids auto-fill;
   no fixed dimensions besides px touch-target minimums. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; }

/* ── App bar: [back] [brand centred] [lang · theme] ──────────── */
.appbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-2);
  background: var(--brand-navy); color: var(--text-on-brand);
  padding-inline: var(--space-2);
  padding-block-end: var(--space-1); /* top padding comes from the safe-area rule in tokens.css */
  min-height: 3.5rem;
  border-block-end: var(--border-w-accent) solid var(--border-accent);
}
.bar-side { display: flex; gap: var(--space-1); }
.bar-start { justify-self: start; }
.appbar-actions { justify-self: end; }
.brandmark { font-weight: var(--fw-black); font-size: var(--fs-h2); direction: ltr; unicode-bidi: isolate; }
.brand-pay { color: var(--brand-citrus); }

/* 44px round ghost controls — light-weight but full touch targets. */
.bar-btn {
  font: inherit; color: var(--text-on-brand);
  background: transparent; border: none;
  inline-size: var(--target-min); block-size: var(--target-min);
  border-radius: var(--radius-circle);
  display: grid; place-items: center;
  font-size: var(--fs-lead); line-height: var(--lh-tight);
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard);
}
.bar-btn:hover { background: var(--surface-accent); }
.bar-btn-text { font-size: var(--fs-body); font-weight: var(--fw-bold); }
#back-btn .icon-directional { font-size: var(--fs-h1); display: block; margin-block-start: -0.2em; }

/* Pills kept for content-area buttons (portal reuses them). */
.pill {
  white-space: nowrap;
  font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--text-on-brand);
  background: transparent;
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard);
}
.pill:hover { background: var(--surface-accent); }

/* ── Screen ──────────────────────────────────────────────────── */
.screen {
  flex: 1;
  width: 100%; max-width: 48rem; margin-inline: auto;
  /* --install-inset reserves room while the install sheet is up, so it
     never covers controls (measured in JS when shown). */
  padding-block: var(--space-4) calc(var(--space-8) + var(--install-inset, 0px));
  display: flex; flex-direction: column; gap: var(--space-4);
  animation: screen-in var(--motion-enter) var(--ease-out);
}
@keyframes screen-in { from { opacity: 0; translate: 0 0.25rem; } }
.screen-center { align-items: center; justify-content: center; text-align: center; gap: var(--space-3); }

.kicker {
  font-size: var(--fs-kicker); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--text-kicker); margin: 0;
}
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: var(--lh-snug); margin: 0; }
.note { color: var(--text-secondary); margin: 0; font-size: var(--fs-body); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.link-btn {
  font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--text-link); background: none; border: none; cursor: pointer;
  padding-inline: var(--space-2); border-radius: var(--radius-sm);
}

.card {
  background: var(--surface-card);
  border: var(--elev-1);
  border-radius: var(--radius-md);
}
.stack { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }

/* ── Home: hero ──────────────────────────────────────────────── */
.hero-card {
  background: var(--surface-card);
  border: var(--elev-1);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: flex-end; justify-content: space-between;
}
.hero-main, .hero-side { display: flex; flex-direction: column; gap: var(--space-1); }
.hero-side { text-align: end; }
.balance { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); margin: 0; font-variant-numeric: tabular-nums; }
.hero-commission { font-size: var(--fs-lead); font-weight: var(--fw-bold); margin: 0; color: var(--success-text); font-variant-numeric: tabular-nums; }
.low-hint { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--warn-text); font-weight: var(--fw-medium); }
.dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-circle); }
.dot-warn { background: var(--warn-fill); }

/* ── Quick actions ───────────────────────────────────────────── */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); }
.quick {
  font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-md);
  min-height: var(--target-comfort);
  padding: var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard);
}
.quick:hover { border-color: var(--border-focus); }
.quick-glyph {
  inline-size: var(--icon-xl); block-size: var(--icon-xl); flex: none;
  display: grid; place-items: center;
  background: var(--surface-accent); color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-lead);
}

/* ── Price list ──────────────────────────────────────────────── */
.price-list { list-style: none; margin: 0; padding: 0 var(--space-4); display: flex; flex-direction: column; }
.price-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--target-min);
  padding-block: var(--space-2);
  border-block-end: var(--border-w-hairline) solid var(--border-subtle);
}
.price-row:last-child { border-block-end: none; }
.price-name { display: flex; flex-direction: column; }
.price-provider { font-size: var(--fs-label); color: var(--text-secondary); }
.price-amount { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ── Last-sale resume card ───────────────────────────────────── */
.resume-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}
.resume-name { font-weight: var(--fw-bold); font-size: var(--fs-lead); }
.btn-small { min-height: var(--target-min); padding-inline: var(--space-4); font-size: var(--fs-body); }

/* ── Transactions list ───────────────────────────────────────── */
.tx-list { list-style: none; margin: 0; padding: 0 var(--space-4); display: flex; flex-direction: column; }
.tx-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--target-comfort);
  padding-block: var(--space-2);
  border-block-end: var(--border-w-hairline) solid var(--border-subtle);
}
.tx-row:last-child { border-block-end: none; }
.tx-row-tap { cursor: pointer; }
.tx-row-tap:hover { background: var(--surface-accent); margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); border-radius: var(--radius-sm); }
.tx-main { flex: 1; display: flex; flex-direction: column; min-inline-size: 0; }
.tx-sub { font-size: var(--fs-label); color: var(--text-secondary); }
.tx-amounts { text-align: end; display: flex; flex-direction: column; gap: var(--space-1); }
.tx-total { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.plus { color: var(--success-text); }
.minus { color: var(--text-primary); }
.h2-sub { font-size: var(--fs-lead); }
.link-sm { padding-inline: 0; text-align: start; font-size: var(--fs-label); }

/* KPI tiles (reporting) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-3); }
.kpi {
  background: var(--surface-card); border: var(--elev-1); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.kpi-label { font-size: var(--fs-label); color: var(--text-secondary); }
.kpi-value { font-size: var(--fs-h2); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.acct-strip { padding: var(--space-2) var(--space-4); background: var(--surface-warn); border-radius: var(--radius-sm); color: var(--warn-text); font-weight: var(--fw-medium); }

.chip {
  font-size: var(--fs-label); font-weight: var(--fw-medium);
  border-radius: var(--radius-pill); padding: 0 var(--space-2);
  display: inline-flex; align-items: center; gap: var(--space-1);
  inline-size: fit-content;
}
.chip-ok    { background: var(--surface-success); color: var(--success-text); }
.chip-warn  { background: var(--surface-warn);    color: var(--warn-text); }
.chip-muted { background: var(--surface-sunken);  color: var(--text-secondary); }

/* ── Services: category cards ────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-3); }
.cat-card {
  font: inherit; text-align: start;
  background: var(--surface-card);
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
  cursor: pointer; color: var(--text-primary);
  transition: border-color var(--motion-base) var(--ease-standard);
}
.cat-card:hover { border-color: var(--border-focus); }
.cat-title { font-weight: var(--fw-bold); font-size: var(--fs-lead); }
.cat-explainer { color: var(--text-secondary); font-size: var(--fs-body); margin: 0; }
.cat-card.is-disabled { cursor: default; border-color: var(--border-subtle); }
.cat-card.is-disabled .cat-title { color: var(--text-secondary); }

/* ── Forms ───────────────────────────────────────────────────── */
.field-label { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text-secondary); margin: 0; }
.field-block { display: flex; flex-direction: column; gap: var(--space-2); }
.input {
  font: inherit; font-size: var(--fs-lead); color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-sm);
  min-height: var(--target-comfort);
  padding-inline: var(--space-3);
  inline-size: 100%;
}
.input::placeholder { color: var(--text-secondary); }
.field-error { color: var(--error-text); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.input[aria-invalid="true"] { border-color: var(--error-fill); }

/* ── One-action-at-a-time stepper (decision 0008) ────────────── */
.step-q { font-size: var(--fs-lead); font-weight: var(--fw-black); margin: 0 0 var(--space-3); }
#step-provider, #step-amount, #step-ref { display: flex; flex-direction: column; gap: var(--space-3); animation: screen-in var(--motion-enter) var(--ease-out); }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); }
.provider-card {
  font: inherit; font-size: var(--fs-lead); font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-md);
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard);
}
.provider-card:hover { border-color: var(--border-focus); }
/* Provider avatar (decision 0011): projected logo, or a letter fallback. */
.provider-logo { inline-size: 28px; block-size: 28px; border-radius: var(--radius-sm); flex: none; object-fit: contain; }
.provider-avatar {
  inline-size: 28px; block-size: 28px; border-radius: var(--radius-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-accent); color: var(--text-primary);
  font-size: var(--fs-label); font-weight: var(--fw-bold);
}
.denom .provider-logo, .denom .provider-avatar { inline-size: 24px; block-size: 24px; }
.trail { display: flex; flex-direction: column; gap: var(--space-2); }
.trail:empty { display: none; }
.trail-chip {
  font: inherit; text-align: start;
  background: var(--surface-sunken); color: var(--text-primary);
  border: var(--border-w-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  cursor: pointer;
}
.trail-chip:hover { border-color: var(--border-control); }
.trail-label { font-size: var(--fs-label); color: var(--text-secondary); flex: none; }
.trail-value { font-weight: var(--fw-bold); flex: 1; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.trail-sub { font-weight: var(--fw-regular); font-size: var(--fs-label); color: var(--text-secondary); }
.trail-edit { font-size: var(--fs-label); color: var(--text-link); flex: none; }

/* Segmented control */
.seg { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.seg-item {
  font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-pill);
  min-height: var(--target-min);
  padding-inline: var(--space-4);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.seg-item[aria-pressed="true"] {
  background: var(--brand-navy); color: var(--text-on-brand);
  border-color: var(--brand-navy);
}
.seg-item .dot { flex: none; }
.seg-item[disabled] { color: var(--text-disabled); background: var(--disabled-fill); cursor: default; border-color: var(--border-subtle); }

/* Denominations + bundles */
.denom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-2); }
.denom {
  font: inherit;
  background: var(--surface-card); color: var(--text-primary);
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-md);
  min-height: var(--target-comfort);
  padding: var(--space-2) var(--space-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  cursor: pointer;
}
.denom strong { font-variant-numeric: tabular-nums; font-size: var(--fs-lead); }
.denom .denom-sell { font-size: var(--fs-label); color: var(--text-secondary); }
.denom .denom-meta { font-size: var(--fs-label); color: var(--text-secondary); }
.denom .denom-sell:last-child { color: var(--text-primary); font-weight: var(--fw-bold); }
.denom[aria-pressed="true"] { border-color: var(--brand-navy); border-width: var(--border-w-emphasis); background: var(--surface-accent); }

.bundle-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-2); }
.bundle {
  font: inherit; text-align: start;
  background: var(--surface-card); color: var(--text-primary);
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-md);
  min-height: var(--target-comfort);
  padding: var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  cursor: pointer;
}
.bundle[aria-pressed="true"] { border-color: var(--brand-navy); border-width: var(--border-w-emphasis); background: var(--surface-accent); }
.bundle-name { display: flex; flex-direction: column; }
.bundle-meta { font-size: var(--fs-label); color: var(--text-secondary); }
.bundle-desc { font-size: var(--fs-label); color: var(--text-secondary); }
.bundle-price { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary, .btn-secondary {
  font: inherit; font-size: var(--fs-lead); font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  min-height: var(--target-comfort);
  padding-inline: var(--space-6);
  cursor: pointer;
  transition: opacity var(--motion-base) var(--ease-standard);
}
.btn-primary {
  background: var(--button-primary-bg); color: var(--button-primary-text);
  border: var(--border-w-control) solid transparent;
}
.btn-primary:disabled { background: var(--disabled-fill); color: var(--text-disabled); cursor: default; }
.btn-secondary {
  background: var(--surface-card); color: var(--text-primary);
  border: var(--border-w-control) solid var(--border-control);
}
.btn-row { display: flex; gap: var(--space-3); margin-block-start: auto; margin-block-end: var(--space-2); }
.btn-row > * { flex: 1; }

/* ── Confirm / receipt ───────────────────────────────────────── */
.confirm-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.confirm-target { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-lead); flex-wrap: wrap; }
.confirm-msisdn { color: var(--text-secondary); font-weight: var(--fw-medium); }
.confirm-desc { margin: 0; }
.breakdown { margin: 0; display: flex; flex-direction: column; }
.breakdown .row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: var(--border-w-hairline) solid var(--border-subtle);
}
.breakdown dt { color: var(--text-secondary); }
.breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.breakdown .row-total { border-block-end: none; font-weight: var(--fw-black); font-size: var(--fs-lead); }
.breakdown .row-total dt { color: var(--text-primary); }
.balance-after { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; font-weight: var(--fw-medium); }
/* Profit is informational, not celebratory: small and quiet. */
.profit-note {
  display: flex; justify-content: space-between; gap: var(--space-3); margin: 0;
  font-size: var(--fs-label); color: var(--text-secondary);
}
.ref-row { display: flex; gap: var(--space-2); flex-wrap: wrap; color: var(--text-secondary); margin: 0; font-size: var(--fs-body); }

.receipt-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.status-glyph {
  inline-size: 3.5rem; block-size: 3.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius-circle);
  font-size: var(--fs-h1);
}
.status-ok   { background: var(--surface-success); color: var(--success-text); }
.status-warn { background: var(--surface-warn);    color: var(--warn-text); }
.share-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.share-row > * { flex: 1; }
.eta { margin: 0; font-weight: var(--fw-medium); }

/* ── Auth screens ────────────────────────────────────────────── */
.splash {
  background: var(--brand-navy); color: var(--text-on-brand);
  align-items: center; justify-content: center; text-align: center;
  max-width: none;
}
.splash-brand { font-size: var(--fs-h1); font-weight: var(--fw-black); margin: 0; direction: ltr; unicode-bidi: isolate; }
.splash-tagline { margin: 0; color: var(--text-on-brand); opacity: 0.85; }
.screen-auth { max-width: 26rem; justify-content: center; }
.otp-input {
  font-size: var(--fs-h2); font-weight: var(--fw-bold);
  text-align: center; font-variant-numeric: tabular-nums;
}
.btn-row-static { margin-block-start: 0; }

/* ── About ───────────────────────────────────────────────────── */
.about-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.about-icon { border-radius: var(--radius-lg); border: var(--elev-1); }
.brand-pay-dark { color: var(--text-kicker); }
.about-version { margin: 0; font-weight: var(--fw-bold); }
.about-details { padding: 0; }
.about-details summary {
  min-height: var(--target-comfort);
  display: flex; align-items: center;
  padding-inline: var(--space-4);
  font-weight: var(--fw-bold);
  cursor: pointer;
  border-radius: var(--radius-md);
}
.about-details[open] summary { border-block-end: var(--elev-1); border-end-start-radius: 0; border-end-end-radius: 0; }
.about-details .note { padding: var(--space-3) var(--space-4) var(--space-4); margin: 0; line-height: var(--lh-loose); }
.about-copyright { text-align: center; }
.acct-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--target-comfort);
  padding-inline: var(--space-4);
  color: var(--text-primary); text-decoration: none; font-weight: var(--fw-medium);
}
.acct-link-meta { color: var(--text-secondary); font-size: var(--fs-label); }
.acct-link-btn { inline-size: 100%; background: none; border: 0; font: inherit; cursor: pointer; text-align: start; }
.acct-link-icon { color: var(--text-secondary); flex: none; }

/* ── Point-of-sale profile (Accounts tab) ─────────────────────── */
.profile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.profile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--target-min); }
.profile-name { font-weight: var(--fw-bold); font-size: var(--md-sys-typescale-title-medium-size); }
.profile-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); min-height: 1.75rem; }
.profile-k { color: var(--text-secondary); font-size: var(--fs-label); }
.profile-v { font-weight: var(--fw-medium); text-align: end; }
.profile-companies { list-style: none; margin: 0; padding: var(--space-2) 0 0; border-block-start: var(--border-w-hairline) solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-1); }
.profile-co { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 1.75rem; }
.profile-co-off { color: var(--text-secondary); }
.profile-details > summary { cursor: pointer; list-style: none; min-height: var(--target-min); }
.profile-details > summary .profile-v { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.profile-details > summary::-webkit-details-marker { display: none; }
.profile-caret { vertical-align: middle; transform: rotate(-90deg); transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
.profile-details[open] .profile-caret { transform: rotate(90deg); }
.auth-version { text-align: center; color: var(--text-secondary); font-size: var(--fs-label); margin: 0; }

/* ── Loading / empty states (GLB-06) ─────────────────────────── */
.spinner {
  inline-size: 2.5rem; block-size: 2.5rem;
  border: var(--border-w-emphasis) solid var(--border-subtle);
  border-block-start-color: var(--info-fill);
  border-radius: var(--radius-circle);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.spinner-sm { inline-size: 1rem; block-size: 1rem; display: inline-block; vertical-align: middle; }
.eta { display: inline-flex; align-items: center; gap: var(--space-2); }
.skeleton {
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  min-height: 1rem;
  animation: pulse 1.2s var(--ease-standard) infinite alternate;
}
@keyframes pulse { to { opacity: 0.5; } }
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-secondary);
}
.empty-glyph { font-size: var(--fs-h1); margin: 0; }

/* ── Accounts ────────────────────────────────────────────────── */
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--target-min); }

/* ── Install sheet (PWA install-or-browser) ──────────────────── */
.install-sheet {
  position: fixed;
  inset-inline: 0; margin-inline: auto;
  inset-block-end: calc(3.5rem + var(--space-3) + env(safe-area-inset-bottom));
  inline-size: min(100% - 2 * var(--space-3), 26rem);
  background: var(--surface-card);
  border: var(--border-w-control) solid var(--border-control);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
  z-index: var(--z-sheet);
  animation: sheet-up var(--motion-enter) var(--ease-out);
}
@keyframes sheet-up { from { opacity: 0; translate: 0 1rem; } }
.install-icon { border-radius: var(--radius-md); border: var(--elev-1); }
.install-copy { display: flex; flex-direction: column; gap: var(--space-1); }
.install-title { margin: 0; font-weight: var(--fw-black); font-size: var(--fs-lead); }
.install-benefit { margin: 0; color: var(--text-secondary); font-size: var(--fs-body); }
.install-actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  flex-wrap: wrap;
}
/* iOS add-to-home guide: three steps with the icons the merchant will see. */
.install-guide .h2 { margin: 0; }
.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: step; }
.install-steps li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); line-height: 1.6; }
.install-steps li::before {
  counter-increment: step; content: counter(step);
  flex: none; inline-size: var(--icon-lg); block-size: var(--icon-lg);
  display: grid; place-items: center;
  border-radius: var(--radius-circle);
  background: var(--button-primary-bg); color: var(--button-primary-text);
  font-weight: var(--fw-bold); font-family: var(--font-numeric);
}
.install-step-icon {
  flex: none; inline-size: var(--icon-lg); block-size: var(--icon-lg);
  display: grid; place-items: center;
  border-radius: var(--radius-md); border: var(--border-w-control) solid var(--border-control);
  color: var(--text-primary);
}

/* ── Custom-amount dialog ────────────────────────────────────── */
.sheet-dialog {
  border: var(--elev-1);
  border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--text-primary);
  padding: var(--space-4);
  inline-size: min(100% - 2 * var(--space-4), 24rem);
  display: none; flex-direction: column; gap: var(--space-3);
}
.sheet-dialog[open] { display: flex; }
.sheet-dialog::backdrop { background: var(--brand-navy); opacity: 0.55; }
.open-preview .row-total dt { font-size: var(--fs-body); }
.denom-open .open-plus {
  inline-size: var(--icon-lg); block-size: var(--icon-lg);
  display: grid; place-items: center;
  background: var(--surface-accent);
  border-radius: var(--radius-circle);
  font-weight: var(--fw-black);
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
  position: fixed; inset-block-end: calc(var(--space-8) + env(safe-area-inset-bottom)); inset-inline: 0;
  margin-inline: auto; inline-size: fit-content; max-inline-size: 90%;
  background: var(--brand-navy); color: var(--text-on-brand);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  z-index: var(--z-toast);
  animation: screen-in var(--motion-enter) var(--ease-out);
}

/* ── Tab bar ─────────────────────────────────────────────────── */
/* Fixed (not sticky), with its height reserved via --tabbar-inset on the
   body — so content can NEVER sit underneath it at any scroll position
   (UI-test finding: sticky bars eat space nothing reserves for). */
body { padding-block-end: var(--tabbar-inset, 0px); }
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex;
  background: var(--surface-chrome);
  border-block-start: var(--elev-1);
}
.nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  font-size: var(--fs-label); font-weight: var(--fw-medium);
  color: var(--text-secondary); text-decoration: none;
}
.nav-glyph { font-size: var(--icon-md); }
/* Active state: MD3 pill via .m3-nav-item.is-active (decision 0013). */
.nav-item.is-active { color: var(--text-primary); font-weight: var(--fw-bold); }

/* ── Insights (plan D2): bars, sparkline, hours strip ────────── */
.ins-bar {
  block-size: 0.375rem; border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  margin-block-start: var(--space-1);
  overflow: hidden;
}
.ins-bar-fill { block-size: 100%; background: var(--info-fill); border-radius: var(--radius-pill); }
.spark-svg { inline-size: 100%; block-size: 3.75rem; display: block; }
.spark-line { fill: none; stroke: var(--info-fill); stroke-width: 2; }
.spark-area { fill: var(--surface-accent); stroke: none; }
.hours-strip {
  display: flex; align-items: flex-end; gap: 2px;
  block-size: 3rem;
}
.hour-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; block-size: 100%; gap: 2px; min-inline-size: 0; }
.hour-bar { inline-size: 100%; background: var(--surface-sunken); border-radius: 2px; }
.hour-bar.hour-peak { background: var(--info-fill); }
.hour-label { font-size: var(--fs-kicker); color: var(--text-secondary); }

/* ── Breakpoints are enhancement only (decision 0005) ────────── */
@media (min-width: 390px) {
  .screen { padding-block-start: var(--space-6); }
}