/* ==========================================================================
   f-rewards.css — CAT-07 only. Tokens only: no new colour, font or radius.
   Attached at runtime by js/features/rewards/_tab.js, because index.html is
   shared and this category may not edit it.
   ========================================================================== */

.tab-screen { padding-bottom: var(--s-8); }
.tab-head { padding-bottom: var(--s-3); }
.tab-hero { margin-bottom: var(--s-4); }
.tab-balance { font-variant-numeric: tabular-nums; }
.tab-rule { border: 0; border-top: 1px solid var(--hairline); margin-block: var(--s-3); }

.tab-block { padding: var(--s-5) var(--gutter); border-top: 1px solid var(--hairline); }
.tab-block > * + * { margin-top: var(--s-3); }
.tab-block p { max-width: var(--measure); }

.tab-fact { display: block; padding-block: var(--s-2); }
.tab-fact > span { display: block; }
.tab-fact-value { font-family: var(--font-display); font-size: var(--t-sub); }

.tab-sim { border-left: 2px solid var(--hairline); padding-left: var(--s-3); margin-top: var(--s-3); }

.tab-viewer { padding: var(--s-3) var(--gutter); border-bottom: 1px solid var(--hairline); }
.tab-viewer label { display: block; margin-bottom: var(--s-2); }
.tab-viewer select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-small);
}

/* ---- the ladder ---------------------------------------------------------- */

.rung {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-4) var(--gutter);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: inherit;
}
.rung-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.rung-cost { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: var(--t-sub); }
.rung-title { font-size: var(--t-body); }
.rung-terms { display: block; margin-top: var(--s-1); }
.rung-foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); min-height: var(--tap); }
.rung[data-locked="true"] .rung-title,
.rung[data-locked="true"] .rung-cost { color: var(--ink-muted); }
.rung-marker {
  padding: var(--s-2) var(--gutter);
  border-bottom: 1px solid var(--ink);
  background: var(--wash);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* ---- tier columns -------------------------------------------------------- */

.tier-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hairline); }
.tier-col { padding: var(--s-4) var(--s-3); border-right: 1px solid var(--hairline); }
.tier-col:last-child { border-right: 0; }
.tier-col[data-current="true"] { background: var(--wash); box-shadow: inset 0 2px 0 0 var(--accent); }
.tier-col h3 { font-family: var(--font-display); font-size: var(--t-sub); }
.tier-mult { font-variant-numeric: tabular-nums; }
.tier-perks { margin-top: var(--s-3); }
.tier-perks li { font-size: var(--t-small); color: var(--ink-muted); margin-bottom: var(--s-2); }

/* ---- stamp cards --------------------------------------------------------- */

.stamp-card { padding: var(--s-4) var(--gutter); border-bottom: 1px solid var(--hairline); }
.stamp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.stamp-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  font-size: var(--t-label);
  color: var(--ink-muted);
}
.stamp-cell[data-filled="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.stamp-cell[data-given="true"] { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.stamp-cell[data-new="true"] { animation: stamp-in var(--d-state) var(--ease-out) both; }
@keyframes stamp-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stamp-cell[data-new="true"] { animation: none; } }

/* ---- badges -------------------------------------------------------------- */

.badge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.badge-cell { padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.badge-cell:nth-child(2n) { border-right: 0; }
.badge-cell[data-earned="false"] { color: var(--ink-muted); }
.badge-name { font-family: var(--font-display); font-size: var(--t-body); display: block; }
.badge-when { display: block; margin-top: var(--s-2); }

/* ---- wallet -------------------------------------------------------------- */

.offer { padding: var(--s-4) var(--gutter); border-bottom: 1px solid var(--hairline); }
.offer[data-state="expired"] .offer-title { text-decoration: line-through; color: var(--ink-muted); }
.offer-title { font-size: var(--t-body); display: block; }
.offer-count { font-variant-numeric: tabular-nums; }
.offer-count[data-urgent="true"] { color: var(--ink-alarm); }

/* ---- ledger -------------------------------------------------------------- */

.ledger-row { padding: var(--s-3) var(--gutter); border-bottom: 1px solid var(--hairline); }
.ledger-delta { font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.ledger-delta[data-sign="down"] { color: var(--ink-muted); }

/* ---- pass ---------------------------------------------------------------- */

.tab-pass-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.tab-pass-grid > div > span { display: block; }
.tab-pass-code { font-family: var(--font-display); font-size: var(--t-title); letter-spacing: var(--tr-label); }
.tab-pass[data-blank="true"] { opacity: 0.55; }

/* ---- surfaces and email -------------------------------------------------- */

.tab-email p + p { margin-top: var(--s-2); }
.tab-push { border: 1px solid var(--hairline); padding: var(--s-3); background: var(--wash); max-width: 34ch; }
.tab-push-title { font-family: var(--font-display); margin-top: var(--s-2); }

/* ---- misc ---------------------------------------------------------------- */

.tab-perks { list-style: none; margin-top: var(--s-2); }
.tab-perks li { padding-left: var(--s-4); position: relative; margin-bottom: var(--s-2); max-width: var(--measure); }
.tab-perks li::before { content: '—'; position: absolute; left: 0; color: var(--ink-muted); }

/* The shared .chip is 36px, under the 48px floor this product sets itself.
   Raised here for CAT-07 only, because components.css is not ours to edit. */
.tab-screen .chip { min-height: var(--tap); display: inline-flex; align-items: center; }

.tab-strike { text-decoration: line-through; color: var(--ink-muted); }
.tab-bar { height: 3px; background: var(--hairline); margin-top: var(--s-2); }
.tab-bar > span { display: block; height: 100%; background: var(--accent); }
.tab-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.tab-actions .btn { min-height: var(--tap); }
.tab-actions .btn-fill { min-height: var(--tap-primary); }
.tab-list { border-top: 1px solid var(--hairline); }
.tab-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.tab-choice {
  display: block; width: 100%; text-align: left; min-height: var(--tap);
  padding: var(--s-3); border: 1px solid var(--hairline); background: transparent; color: inherit;
}
.tab-choice[aria-pressed="true"] { border-color: var(--ink); background: var(--wash); }