/* ═══════════════════════════════════════════════════════════════
   VidaPay — Daylight design language (decision 0019).
   The visual layer on top of the MD3 tokens/components: light brand
   surfaces, ONE navy hero card that carries the glow, round actions,
   a floating pill navigation, Tabler stroke icons, and a deliberately
   small motion layer (one entrance fade, press feedback). Loaded after
   app.css by the app and after portal.css by the portal. Tokens only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Icons: one family, one stroke ───────────────────────────── */
.icon {
  inline-size: var(--icon-lg); block-size: var(--icon-lg);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none; display: block;
}
.icon-sm { inline-size: var(--icon-md); block-size: var(--icon-md); }
.icon-xs { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* ── App bar: light, logo-led ────────────────────────────────── */
.appbar {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-block-end: none;
  min-height: 3.75rem;
  padding-inline: var(--space-3);
}
.brandmark { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-lead); }
.brand-logo {
  block-size: 1.625rem; inline-size: auto;      /* ≈75px wide at 1256×438 — the brand minimum */
  border-radius: var(--md-sys-shape-corner-extra-small);
  display: block;
}
.theme-dark .brand-logo {
  /* Colour logo never sits on dark — a white plate keeps it untouched. */
  background: var(--md-ext-hero-on);
  padding: 2px 4px; box-sizing: content-box;
}
.brand-vida { color: var(--md-sys-color-on-surface); }
.brand-pay  { color: var(--md-sys-color-secondary); }
.theme-dark .brand-pay { color: var(--md-sys-color-primary); }
.bar-btn {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: background var(--motion-base) var(--ease-standard),
              scale var(--motion-fast) var(--ease-standard);
}
.bar-btn:hover { background: var(--md-sys-color-surface-container); }
.bar-btn:active { scale: .94; }
.bar-btn-text { font-size: var(--fs-label); font-weight: var(--fw-bold); }
#back-btn .icon-directional { display: block; margin: 0; }
/* Theme toggle shows the mode you would switch TO. */
#theme-toggle .icon-sun { display: none; }
.theme-dark #theme-toggle .icon-sun { display: block; }
.theme-dark #theme-toggle .icon-moon { display: none; }

/* ── The hero: one navy card, glow contained inside ──────────── */
.hero-glow {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--md-ext-hero-bg);
  color: var(--md-ext-hero-on);
  border: none;
  border-radius: var(--md-ext-hero-corner);
  box-shadow: var(--md-ext-hero-shadow);
  padding: var(--space-6) var(--space-4) var(--space-4);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-1);
}
.theme-dark .hero-glow { border: 1px solid var(--md-sys-color-outline-variant); }
.hero-glow::before {
  content: ''; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 15% 0%, var(--md-ext-glow-citrus), transparent 65%),
    radial-gradient(60% 55% at 95% 100%, var(--md-ext-glow-steel), transparent 70%);
}
.hero-glow::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--md-ext-glow-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--md-ext-glow-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 80%);
}
.hero-glow .kicker,
.hero-glow .hero-currency { color: var(--md-ext-hero-muted); font-size: var(--fs-label); font-weight: var(--fw-medium); margin: 0; }
.hero-number {
  font-size: var(--md-ext-hero-number-size);
  font-weight: var(--fw-black); line-height: 1;
  letter-spacing: -0.03em;                 /* Latin digits only (.num isolates them) */
  color: var(--md-ext-hero-number);
  margin: 0;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-block-start: var(--space-2);
  min-height: 2rem; padding: 0 var(--space-4);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-ext-hero-chip-bg); color: var(--md-ext-hero-chip-on);
  font-size: var(--fs-label); font-weight: var(--fw-bold);
}
.theme-dark .hero-chip { border: 1px solid color-mix(in srgb, var(--md-ext-hero-on) 14%, transparent); }
.hero-glow .low-hint { justify-content: center; color: var(--md-ext-warn-text); font-size: var(--fs-label); margin-block-start: var(--space-1); }
.theme-dark .hero-glow .low-hint { color: var(--md-ext-warn-text); }
/* Compact variant (accounts): same card, smaller number. */
.hero-glow.hero-compact { padding-block: var(--space-4); }
.hero-glow.hero-compact .hero-number { font-size: var(--fs-h1); }

/* ── Round actions ───────────────────────────────────────────── */
.actions {
  display: flex; justify-content: center; align-items: flex-start;
  gap: var(--space-4);
  padding-inline: var(--space-2);
}
.action {
  font: inherit; font-size: var(--fs-label); font-weight: var(--fw-bold);
  color: var(--md-sys-color-on-surface);
  background: none; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  flex: 1 1 0; min-inline-size: 0; max-inline-size: 5.5rem;
  cursor: pointer; text-align: center; line-height: var(--lh-snug);
}
.action-circle {
  inline-size: var(--md-ext-action-size); block-size: var(--md-ext-action-size);
  border-radius: var(--md-sys-shape-corner-full);
  display: grid; place-items: center;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-ext-card-shadow);
  transition: scale var(--motion-fast) var(--ease-standard),
              background var(--motion-base) var(--ease-standard);
}
.theme-dark .action-circle { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
.action:hover .action-circle { background: var(--md-sys-color-surface-container); }
.action:active .action-circle { scale: .92; }
.action-hot .action-circle {
  background: var(--md-sys-color-primary);
  color: var(--md-ext-hot-on);
  border-color: transparent;
  box-shadow: var(--md-ext-hot-shadow);
}
.action:focus-visible { outline: none; }
.action:focus-visible .action-circle { outline: var(--border-w-emphasis) solid var(--border-focus); outline-offset: 3px; }

/* ── Cards, tiles, lists in the Daylight shape language ──────── */
.card, .tx-list.card, .confirm-card, .kpi, .resume-card {
  border-radius: var(--md-ext-card-corner);
  box-shadow: var(--md-ext-card-shadow);
}
.denom, .bundle, .provider-card, .cat-card, .trail-chip, .quick {
  border-radius: var(--md-ext-tile-corner);
  border-width: var(--border-w-hairline);
  border-color: var(--md-sys-color-outline-variant);
  box-shadow: var(--md-ext-card-shadow);
}
.denom[aria-pressed="true"], .bundle[aria-pressed="true"] {
  border-color: var(--md-sys-color-primary); border-width: var(--border-w-emphasis);
}
/* Home: fastest sellers read as the mock's seller tiles. */
#freq-grid .denom { align-items: flex-start; text-align: start; padding: var(--space-3) var(--space-4); }
#freq-grid .denom strong { color: var(--md-sys-color-primary); }
.theme-dark #freq-grid .denom strong { color: var(--md-sys-color-primary); }
.resume-card { padding: var(--space-3) var(--space-4); }
.section-head .h2 { font-size: var(--fs-lead); }
.section-head .link-btn { color: var(--md-sys-color-primary); font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: var(--space-1); }
.input, .m3-field-input { border-radius: var(--md-sys-shape-corner-medium); }
.btn-primary, .btn-secondary { border-radius: var(--md-sys-shape-corner-full); }
.btn-primary { box-shadow: var(--md-ext-hot-shadow); }
.btn-primary:disabled { box-shadow: none; }
.install-sheet, .sheet-dialog { border-radius: var(--md-ext-hero-corner); }

/* Wallet-impact card (decision 0021): the "kept in cash" line sits under
   the total as the merchant's own figure — quiet weight, success colour. */
.breakdown .row-profit { border-block-start: var(--border-w-hairline) solid var(--border-subtle); border-block-end: none; font-weight: var(--fw-medium); }
.breakdown .row-profit dt { color: var(--md-sys-color-on-surface-variant); }
.breakdown .row-profit dd { font-weight: var(--fw-bold); }

/* ── Floating pill navigation ────────────────────────────────── */
.tabbar {
  inset-inline: var(--space-4);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  padding: var(--space-1);
  padding-bottom: var(--space-1);              /* overrides the safe-area rule; the offset carries it */
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-ext-nav-bg);
  border: 1px solid var(--md-ext-nav-border);
  border-block-start: 1px solid var(--md-ext-nav-border);
  box-shadow: var(--md-ext-nav-shadow);
  gap: var(--space-1);
  max-inline-size: 30rem; margin-inline: auto;
}
.tabbar .nav-item {
  flex: 1 1 0; min-inline-size: 0;
  gap: 2px; padding-block: var(--space-1);
  min-height: 3.125rem;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-ext-nav-on);
  font-size: var(--fs-kicker); font-weight: var(--fw-bold);
  transition: background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              scale var(--motion-fast) var(--ease-standard);
}
[dir="rtl"] .tabbar .nav-item { font-size: var(--fs-label); }
.tabbar .nav-item:active { scale: .95; }
.tabbar .nav-item .m3-nav-glyph { inline-size: auto; block-size: auto; background: none; }
.tabbar .nav-item.is-active {
  background: var(--md-ext-nav-active-bg);
  color: var(--md-ext-nav-active-on);
}
.tabbar .nav-item.is-active .m3-nav-glyph { background: none; color: inherit; }
.tabbar .nav-item:focus-visible { outline-color: var(--md-ext-nav-active-bg); outline-offset: -3px; }
.install-sheet { inset-block-end: calc(4.75rem + var(--space-3) + env(safe-area-inset-bottom)); }

/* ── Motion: one entrance, press feedback, nothing else ─────── */
/* Ruled 2026-09-02 (0019 amendment): after on-device testing, screen
   transitions, the balance morph, count-ups, staggered entrances and the
   glow drift were removed — stacked, they juddered on real phones. What
   remains is cheap, compositor-only and predictable: the incoming screen
   fades in once (app.css `screen-in`, shortened here), tappables press. */
.screen { animation-duration: var(--md-ext-motion-rise); animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate); }
.stagger > * { animation: none; }
.denom, .bundle, .provider-card, .cat-card, .seg-item, .trail-chip, .btn-primary, .btn-secondary, .m3-btn, .link-btn, .tx-row-tap {
  transition: scale var(--motion-fast) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard);
}
.denom:active, .bundle:active, .provider-card:active, .cat-card:active, .seg-item:active,
.btn-primary:not(:disabled):active, .btn-secondary:active, .m3-btn:not(:disabled):active, .tx-row-tap:active { scale: .97; }
/* Numbers stay tabular so a changing balance never shifts its neighbours. */
.num { font-variant-numeric: tabular-nums; }

/* ── Degrade gracefully ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}
@media (prefers-reduced-data: reduce) {
  .hero-glow::before, .hero-glow::after { display: none; }
  .hero-glow, .tabbar, .btn-primary, .action-hot .action-circle { box-shadow: none; }
}