/* ==========================================================================
   Xpeazy — Shared design tokens & components (source: context/design-tokens.md)
   Flat design. No gradients, no shadows, no skeuomorphism for in-flow
   content (cards, list rows, buttons — never add box-shadow to these).

   Scoped exception (Phase 1 design system, 2026-07-25): elements that
   visually float ABOVE the base content layer — bottom sheets, toasts —
   may use a soft box-shadow. That's a functional depth cue for "this is
   floating over the page," not decoration. See .sheet below.
   ========================================================================== */

:root {
  /* Primary — Navy */
  --navy: #0F2A5C;
  --navy-deep: #081A3D;
  --navy-soft: #24406E;
  /* Secondary — Blue */
  --blue: #1E5FD6;
  --blue-soft: #5F8FEA;
  --blue-pale: #E9F0FE;
  /* Tertiary — Green (sparing: success + the one primary CTA) */
  --green: #1F8B4C;
  --green-pale: #E4F4EA;
  /* Neutrals */
  --ink: #1A1A1A;
  --ink-soft: #45484F;
  --gray: #6B7280;
  --gray-light: #9AA1AC;
  --border: #DCE1E8;
  --surface: #F4F6F9;
  --white: #FFFFFF;
  /* Status */
  --red: #B0231A;
  --red-pale: #FBEAE9;
  --amber: #B8860B;
  --amber-pale: #F8F1DC; /* derived pale for amber badges (not in deck tokens) */

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* Type scale — amounts are the loudest thing on any money screen. */
  --fs-amount: 34px;
  --fs-amount-lg: 40px;
  --fs-title: 20px;
  --fs-body: 15px;
  --fs-cap: 13px;
  --fs-label: 11px;

  /* Spacing rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* The one earned depth cue: surfaces that hold money. */
  --money-grad: linear-gradient(158deg, #1B3E7D 0%, #0F2A5C 46%, #081A3D 100%);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font: -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--ink-soft);
  background: var(--surface);
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--navy); line-height: 1.25; }

/* --- Kicker / eyebrow labels ------------------------------------------- */
.kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blue);
}

/* --- Cards --------------------------------------------------------------*/
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5) var(--s4);
}
.card.surface { background: var(--surface); }

/* --- Buttons ------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 15px 20px;
  min-height: 50px;
  cursor: pointer;
  transition: opacity 0.15s ease;
  text-decoration: none;
}
.btn:active { opacity: 0.9; transform: translateY(1px); }
.btn-primary { background: var(--green); color: var(--white); }      /* the ONE primary action per screen */
.btn-blue    { background: var(--blue); color: var(--white); }
.btn-outline { background: var(--white); color: var(--blue); border-color: var(--blue); }
.btn-danger-outline { background: var(--white); color: var(--red); border-color: var(--red); }
.btn-ghost   { background: transparent; color: var(--gray); font-weight: 600; }
.btn-block   { display: flex; width: 100%; }
.btn-sm      { padding: 6px 12px; font-size: 13px; }

/* --- Pills / tags ---------------------------------------------------------
   Pale-blue fill, blue border + text, uppercase small text w/ letter-spacing */
.pill {
  display: inline-block;
  background: var(--blue-pale);
  border: 1px solid var(--blue);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
.pill.green { background: var(--green-pale); border-color: var(--green); color: var(--green); }
.pill.red   { background: var(--red-pale);   border-color: var(--red);   color: var(--red); }
.pill.amber { background: var(--amber-pale); border-color: var(--amber); color: var(--amber); }
.pill.gray  { background: var(--surface);    border-color: var(--gray-light); color: var(--gray); }

/* --- Status dot badges ----------------------------------------------------*/
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status.ok    { color: var(--green); } .status.ok .dot    { background: var(--green); }
.status.warn  { color: var(--amber); } .status.warn .dot  { background: var(--amber); }
.status.bad   { color: var(--red); }   .status.bad .dot   { background: var(--red); }
.status.info  { color: var(--blue); }  .status.info .dot  { background: var(--blue); }

/* --- Data tables -----------------------------------------------------------
   Blue header row w/ white bold text, alternating striping, thin gridlines */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.data th {
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
table.data td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  vertical-align: middle;
}
table.data tbody tr:nth-child(even) { background: var(--surface); }
table.data tbody tr:hover { background: var(--blue-pale); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- Numbered step badges ---------------------------------------------- */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

/* --- Progress bars --------------------------------------------------------*/
.bar { height: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.bar.green > span { background: var(--green); }
.bar.red > span { background: var(--red); }
.bar.amber > span { background: var(--amber); }

/* --- Toast ------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  transition: transform 0.25s ease;
  z-index: 99;
  max-width: 90vw;
  text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* --- Inline SVG icons ---------------------------------------------------- */
.isv {
  display: inline-block;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* --- Utility ------------------------------------------------------------ */
.muted { color: var(--gray); font-size: 13px; }
.tiny  { color: var(--gray-light); font-size: 11.5px; }
.row   { display: flex; align-items: center; gap: 12px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack  { display: flex; flex-direction: column; gap: 12px; }
.money  { font-variant-numeric: tabular-nums; }
.pos { color: var(--green); font-weight: 700; }
.neg { color: var(--red); font-weight: 700; }

/* --- Live pulse dot ------------------------------------------------------ */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  animation: pulse 1.6s ease infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Row flash when a live transaction lands */
@keyframes rowflash { 0% { background: var(--green-pale); } 100% { background: transparent; } }
.flash { animation: rowflash 2.2s ease forwards; }

/* Spinner */
.spin {
  width: 26px; height: 26px;
  border: 3px solid var(--blue-pale);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }

/* --- Bottom sheet (the one shadow exception — see header comment) ------- */
.sheet-scrim {
  flex: 1; background: rgba(8,26,61,0.6);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sheet {
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 10px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 -8px 24px rgba(8,26,61,0.18);
}
.sheet-handle { width: 36px; height: 4px; border-radius: 99px; background: var(--border); margin: 0 auto 4px; }

/* --- Screen transition (fade + slight rise) ------------------------------ */
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* opacity:1 base so a display:none→flex toggle can't leave the screen stuck invisible if the animation fails to run */
.screen.active { opacity: 1; animation: screen-in 0.22s ease-out; }

/* --- Tap / press feedback ------------------------------------------------ */
@keyframes tap-ripple { from { opacity: 0.35; transform: scale(0); } to { opacity: 0; transform: scale(2.2); } }
.tap-fx { position: relative; overflow: hidden; }
.tap-fx::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle, var(--blue-soft) 0%, transparent 70%);
  opacity: 0; pointer-events: none;
}
.tap-fx:active::after { animation: tap-ripple 0.4s ease-out; }

/* --- QR scan-line sweep --------------------------------------------------- */
@keyframes scanline { 0% { top: 4%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 94%; opacity: 0; } }
.scan-sweep {
  position: absolute; left: 4%; width: 92%; height: 2px;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: scanline 2.2s ease-in-out infinite;
}

/* --- Success checkmark draw-in -------------------------------------------- */
@keyframes checkdraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.check-draw { stroke-dasharray: 24; stroke-dashoffset: 24; animation: checkdraw 0.5s ease-out 0.15s forwards; }


/* --- Premium pass (2026-07-25) -------------------------------------------
   Machine-generated identifiers (UPI refs, VPAs, MCC codes, tokens) are set
   in mono: they are artifacts of the rails, not prose. */
.ref, .vpa, .mcc { font-family: var(--mono); letter-spacing: -0.01em; }

/* Amounts carry the screen. Tabular so digits never jitter between states. */
.amount    { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.022em; }
.amount-xl { font-size: var(--fs-amount-lg); }
.amount-lg { font-size: var(--fs-amount); }

/* The money surface — the single place depth is earned. */
.money-surface {
  background: var(--money-grad);
  border-radius: var(--radius-lg);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(8,26,61,.18);
}