/* ============================================================================
   TOPPER — apply flow skin
   The --ob-* tokens for the shared onboarding structure, and Topper's own
   pieces: the offer, the call-outs, the rewards panel and the close.
   Sizes, colours and timing come from foundation.css; the sky, panel rows,
   rolling digits and balloons are the landing page's (styles.css).
   ========================================================================== */

:root {
  --ob-card-bg:     var(--glass);
  --ob-card-edge:   var(--glass-edge);
  --ob-card-shadow: var(--glass-shadow);
  --ob-card-blur:   18px;
  --ob-selected-bg: var(--blue-100);
  --ob-progress:    var(--lift);
}

/* the form sits in the same sky as the landing page; it deepens with each
   step instead of with scroll (apply.js) */
.sky__high { transition: opacity calc(var(--dur-2) * 2) var(--ease); }

.ob-noscript { padding: var(--space-6) var(--gutter); font-weight: 700; }

/* ======================================================== call-outs == */
/* a reward coming into reach, said once, next to the choice that earns it */
.tp-callout {
  display: flex; align-items: flex-start; gap: calc(12 * var(--p));
  padding: calc(14 * var(--p)) calc(16 * var(--p)); border-radius: var(--radius-control);
  background: var(--boost); color: var(--on-accent);
  font-size: var(--type-small); font-weight: 600; line-height: 1.5;
  box-shadow: 0 16px 32px -18px rgba(86, 65, 240, .6);
  animation: tp-in var(--dur-2) var(--ease) both;
}
.tp-callout + .tp-callout { margin-top: calc(10 * var(--p)); }
.tp-callout .ico { width: calc(20 * var(--p)); height: calc(20 * var(--p)); margin-top: calc(1 * var(--p)); flex: none; }
.tp-callout b { font-weight: 800; }
.tp-callout--quiet {
  background: rgba(255, 255, 255, .7); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(36, 89, 240, .12);
}
.tp-callout--quiet .ico { color: var(--accent-text); }
@keyframes tp-in { from { opacity: 0; transform: translateY(6px); } }

/* the setup screen's reward figures sit on the right of each card */
.ob-field--multi .ob-note { font-size: var(--type-body); }

/* the brand bar's lockup sits at the form's scale, a step below the landing nav */
.ob-top .brand__logo { width: calc(120 * var(--p)); }

/* ====================================================== debit card ==== */
/* a small, light, glassy card above the wallet choices; a supporting picture */
.tp-card {
  position: relative; width: min(calc(224 * var(--p)), 100%); aspect-ratio: 1.586; overflow: hidden;
  margin: 0 0 var(--space-2); padding: calc(14 * var(--p)); border-radius: calc(14 * var(--p));
  display: grid; grid-template-rows: auto 1fr auto; align-content: space-between;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(173, 203, 255, .75), transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 255, .95), var(--blue-100) 70%, var(--blue-200));
  box-shadow: var(--glass-edge), 0 22px 36px -24px rgba(36, 89, 240, .55);
  color: var(--ink);
  animation: tp-drift 9s ease-in-out infinite alternate;
}
.tp-card__logo { display: block; height: calc(20 * var(--p)); width: auto; justify-self: start; }
.tp-card__chip {
  width: calc(32 * var(--p)); height: calc(24 * var(--p)); align-self: center; border-radius: calc(5 * var(--p));
  background: linear-gradient(135deg, #fff, var(--blue-200) 55%, var(--blue-300));
  box-shadow: inset 0 0 0 1px rgba(36, 89, 240, .25);
}
.tp-card__num { grid-row: 3; justify-self: start; font-weight: 700; font-size: var(--type-small); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.tp-card__kind { position: absolute; right: calc(14 * var(--p)); bottom: calc(14 * var(--p)); font-size: calc(12 * var(--p)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.tp-card__balloon { position: absolute; right: calc(14 * var(--p)); top: calc(10 * var(--p)); width: calc(26 * var(--p)); height: auto; filter: drop-shadow(0 4px 6px rgba(36, 89, 240, .25)); }
@keyframes tp-drift { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@media (max-width: 767px) { .tp-card { width: min(190px, 100%); padding: 12px; } .tp-card__balloon { width: 22px; } }
@media (prefers-reduced-motion: reduce) { .tp-card { animation: none; } }

/* ============================================================= close == */
.tp-done { display: grid; gap: var(--space-3); }
.tp-done__amt { color: var(--accent); font-weight: 800; }
.tp-done__list { display: grid; gap: calc(10 * var(--p)); margin-top: var(--space-2); }
.tp-done__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--p));
  padding: calc(12 * var(--p)) calc(14 * var(--p)); border-radius: var(--radius-control);
  background: rgba(255, 255, 255, .74); box-shadow: inset 0 0 0 1px rgba(36, 89, 240, .09);
  font-weight: 700;
}
.tp-done__list b { color: var(--accent-text); font-weight: 800; white-space: nowrap; }
.tp-done__ico {
  width: calc(36 * var(--p)); height: calc(36 * var(--p)); display: grid; place-items: center;
  border-radius: var(--radius-control); background: var(--boost); color: var(--on-accent);
}
.tp-done__ico .ico { width: calc(18 * var(--p)); height: calc(18 * var(--p)); }
.tp-done__next { font-weight: 700; }

/* ===================================================== the companion == */
/* A slim strip above the form: balloons for the rewards in play and the
   running total. It opens into the list of rewards. */
.tc { position: relative; }
.tc-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--p));
  width: 100%; min-height: calc(60 * var(--p)); padding: calc(8 * var(--p)) calc(16 * var(--p)) calc(8 * var(--p)) calc(12 * var(--p));
  border: 0; border-radius: var(--radius-panel); cursor: pointer; text-align: left;
  font: inherit; color: var(--ink);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--glass-edge), 0 18px 36px -26px rgba(36, 89, 240, .5);
}
.tc-strip:hover .tc-strip__more { color: var(--ink); }
.tc-strip__balloons { display: flex; align-items: flex-end; min-width: calc(34 * var(--p)); height: calc(42 * var(--p)); padding-right: calc(10 * var(--p)); }
.tc-strip__balloons img {
  flex: none; width: calc(28 * var(--p)); height: auto; margin-right: calc(-9 * var(--p));
  filter: drop-shadow(0 4px 6px rgba(36, 89, 240, .25));
}
.tc-strip__balloons img[data-b="paycheck"] { width: calc(32 * var(--p)); }
.tc-strip__balloons img.is-new { animation: tc-float calc(var(--dur-2) * 1.6) var(--ease) both; }
@keyframes tc-float {
  0%   { opacity: 0; transform: translateY(18px) scale(.7); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { transform: none; }
}
/* nothing planned yet: the outline of a balloon waiting */
.tc-strip__balloons:empty::before {
  content: ''; width: calc(26 * var(--p)); height: calc(32 * var(--p)); border-radius: 50% 50% 46% 46%;
  box-shadow: inset 0 0 0 1.5px rgba(36, 89, 240, .25);
}
.tc-strip__text { display: grid; line-height: 1.25; min-width: 0; }
.tc-strip__label { font-size: var(--type-small); font-weight: 600; color: var(--ink-2); }
.tc-strip__num { font-size: var(--type-small); font-weight: 700; color: var(--ink-2); }
.tc-strip__num b { font-size: var(--ob-type-heading); font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.tc-strip__num .roll { vertical-align: bottom; }
.tc-strip.is-lift .tc-strip__num b { animation: inflate var(--dur-2) var(--ease); display: inline-block; }
.tc-strip__more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-small); font-weight: 700; color: var(--accent-text); }
.tc-strip__chev { width: 18px; height: 18px; transition: transform var(--dur-1) var(--ease); }
.tc-strip[aria-expanded="true"] .tc-strip__chev { transform: rotate(180deg); }

/* the list opens over the form, not pushing it down */
.tc-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5;
  padding: calc(14 * var(--p)); border-radius: var(--radius-panel);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(243, 248, 255, .94));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  animation: tp-in var(--dur-1) var(--ease) both;
}
.tc-panel[hidden] { display: none; }
.tc-rows { display: grid; gap: calc(8 * var(--p)); }
.tc-row + .tc-row { margin-top: 0; }
.tc-row .prow__s { white-space: normal; }
.tc-amt { display: grid; justify-items: end; gap: calc(3 * var(--p)); }
.tc-tag { font-size: var(--type-small); font-weight: 700; line-height: 1; color: var(--accent-text); }
.tc-tag:empty { display: none; }
.tc-row[data-s="available"] { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(36, 89, 240, .07); }
.tc-row[data-s="available"] .prow__icon { background: rgba(15, 27, 61, .05); color: var(--ink-2); }
.tc-row[data-s="available"] .prow__amt { color: var(--ink-2); }
.tc-row[data-s="set"] .prow__icon { background: var(--boost); color: var(--on-accent); }
.tc-row.prow--boost .tc-tag { color: rgba(255, 255, 255, .9); }
.tc-row.prow--boost[data-s="set"] .prow__icon { background: rgba(255, 255, 255, .22); }
.tc-foot { margin-top: calc(12 * var(--p)); font-size: var(--type-small); font-weight: 500; color: var(--ink-2); }

@media (max-width: 767px) {
  .ob-top .brand__logo { width: 100px; }          /* leaves the progress bar its room */
  .tc-panel { max-height: 70vh; overflow: auto; }
}

/* the narrower phones (320 to 374): the strip's balloons and gaps tighten so the
   label and total keep two lines instead of wrapping to three, and the
   dropdown's reward names wrap instead of truncating */
@media (max-width: 374px) {
  .tc-strip { gap: 8px; padding-inline: 10px 12px; }
  .tc-strip__balloons { min-width: 26px; padding-right: 6px; }
  .tc-strip__balloons img { width: 22px; margin-right: -8px; }
  .tc-strip__balloons img[data-b="paycheck"] { width: 25px; }
  .tc-strip__more { gap: 2px; }
  .tc-strip__chev { width: 14px; height: 14px; }
  .tc-row .prow__t { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-callout { animation: none; }
  .tc-strip__balloons img.is-new, .tc-strip.is-lift .tc-strip__num b, .tc-panel { animation: none; }
  .sky__high { transition: none; }
}