/* ============================================================
   Bullet v8 — design-system re-skin.
   Loaded AFTER the existing bundle (reset + v7.css OR the v5 bundle),
   so these rules win the cascade. Structure/layout from the existing
   CSS is preserved; this file only re-skins surfaces, type, colour,
   buttons, cards, status, and adds the responsive centring + the one
   floating (shadowed) element. Restraint is the brand — flat by
   default, weight spent only on the three hero moments.
   Excludes: 00 Splash + 01 Welcome (don't load this). Mariana/Richie
   load fonts-only.css instead.
   ============================================================ */

/* ---------- Base ---------- */
html, body { background: var(--bg-app); }
body {
  /* font-family left to v7.css → Manrope (v7a typography restored). */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  letter-spacing: -0.1px;
  -webkit-font-smoothing: antialiased;
}

/* Responsive: single column, centred ~440px on app-pink at any width. */
.app {
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg-app);
}

/* Typography restored to v7a: headings → Fraunces, body/UI → Manrope
   (both from v7.css). The re-skin's blanket system-font override was
   removed here so v7.css's native font choices win again. Only the
   font-family is reverted — v8's sizes/weights/colours below stay. */

/* ---------- Type scale ---------- */
h1, .h1 {
  font-size: var(--fs-title1);
  line-height: var(--lh-title1);
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}
.boundary-confirmation {
  font-size: var(--fs-title1);
  line-height: var(--lh-title1);
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}
.subhead, .subline {
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
}
p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); }
.footnote { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--text-tertiary); }
.eyebrow {
  font-size: var(--fs-caption1);
  font-weight: var(--fw-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---------- Primary / secondary buttons ---------- */
.btn {
  /* font: inherit from v7.css → Manrope. */
  /* radius 8px to match v5's CTAs (was pill). */
  border-radius: var(--radius-sm);
  letter-spacing: -0.1px;
  transition: opacity var(--motion-fast) ease, background var(--motion-fast) ease;
  /* 56px to match the pick-list option cards (and v5's button height). */
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn--primary {
  background: var(--ink);
  color: var(--text-on-dark);
  /* Bigger CTA text to match the older versions (v5 = 18px). */
  font-size: 18px;
  font-weight: var(--fw-semibold);
  padding: 11px 22px;
  border: 0;
}
.btn--primary:active { opacity: 0.85; }
.btn--ghost {
  background: var(--bg-white);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  font-weight: var(--fw-medium);
  padding: 11px 18px;
}
.btn--ghost:active { background: var(--bg-subtle-lighter); }

/* Sticky CTA footer sits on the app pink, not white. */
/* CTA pinned to the bottom of the screen, centred in the column — matches
   v5's fixed CTA position (v7.css had it sticky, so on short screens it
   floated up with the content). The .app's 120px bottom padding (v7.css)
   clears content behind it. */
.cta-area {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: 12px 24px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-app);
  z-index: 10;
}

/* ---------- Pick-list (scope / industry options) ---------- */
ul.picklist li button,
ul.picklist li a {
  background: var(--bg-white);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
ul.picklist li button.is-selected,
ul.picklist li a.is-selected {
  background: var(--ink);
  color: var(--text-on-dark);
  border-color: var(--ink);
}

/* Multi-select pick-lists get a checkbox on the right so it reads as
   "pick as many as you like" (Peter). Scoped to [data-multi] so the
   single-select lists (scope/industry) keep their plain rows. */
ul.picklist[data-multi] li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
ul.picklist[data-multi] li button::after {
  content: '';
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border-primary);
  background: transparent center / 14px no-repeat;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
ul.picklist[data-multi] li button.is-selected::after {
  border-color: #FFFFFF;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C2C2C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* ---------- Plain lists ---------- */
ul.plain li, ol.plain li { border-bottom: 1px solid var(--border-primary); color: var(--text-primary); }

/* ---------- Cards (flat by default — no shadow) ---------- */
.info-card, .jtbd-card {
  background: var(--bg-white);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.info-card__label { color: var(--text-tertiary); }
.info-card__row { color: var(--text-primary); }
.jtbd-card__title { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -0.1px; color: var(--text-primary); }
.jtbd-card__desc { color: var(--text-secondary); }
/* Mariana's in-progress card → pending (amber) tokens. */
.jtbd-card--inprogress { border-left: 3px solid var(--pending-border); }

/* ---------- Status chips ---------- */
.jtbd-card__status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption1);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.jtbd-card__status--done { color: var(--success-fg); background: var(--success-bg); }
.jtbd-card__status--inprogress { color: var(--pending-fg); background: var(--pending-bg); border: 1px solid var(--pending-border); }
.jtbd-card__note { color: var(--pending-fg); }

.invoice-state--draft { background: var(--bg-subtle); color: var(--text-secondary); }
.invoice-state--paid  { background: var(--success-bg); color: var(--success-fg); }

/* ---------- Callout (accountant in-progress) → pending tokens ---------- */
.callout { border-left: 3px solid var(--pending-border); color: var(--text-primary); }
.callout strong { color: var(--pending-fg); }

/* ---------- Progress panel (jtbd1-complete) — token colours ---------- */
.progress { border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); }
.progress__jtbd { border-bottom: 1px solid var(--border-primary); }
.progress__jtbd--done .progress__marker,
.progress__jtbd--done .progress__sub--done .progress__marker { color: var(--success-fg); }
.progress__jtbd--inprogress .progress__head,
.progress__jtbd--inprogress .progress__marker { color: var(--pending-fg); }
.progress__jtbd--inprogress .progress__sub--done .progress__marker { color: var(--success-fg); }

/* ---------- Loading stack (bank-paid) → option-card style ----------
   Per Peter: same look as the to-do cards. Each step is a white rounded
   card; the timed reveal/flip animation is untouched; only the TICK turns
   green (not the whole line), and the marker sits on the RIGHT. */
.loading-stack {
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.loading-stack li {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  padding: 16px 18px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-primary);
  display: flex;
  align-items: center;
}
.loading-stack li:last-child { border-bottom: 1px solid var(--border-primary); }
/* Text stays dark when done — only the tick changes colour. */
.loading-stack li.is-done { color: var(--text-primary); }
/* Marker (· pending / ✓ done) pushed to the right. */
.loading-stack li::before {
  order: 2;
  margin-left: auto;
  width: auto;
  flex: 0 0 auto;
}
/* Done tick = the animated hand-drawn Check asset (draws on when the step
   completes — the ::before content swap retriggers the SMIL animation). */
.loading-stack li.is-done::before {
  content: "";
  width: 22px; height: 22px;
  background: url("/assets/check-animated.svg") center / contain no-repeat;
}
/* Step number on the left (Peter), grey like the JTBD card numbers. */
.loading-stack__num { flex: 0 0 auto; margin-right: 12px; color: #9A9A9E; font-weight: 600; }

/* ---------- JTBD progress list → option-card style ----------
   Per Peter: each step reads like the pick-list option cards — a white
   rounded card, the 1/2/3/4 number kept, and the status marker moved to
   the RIGHT. Titles stay dark (like the options); only the marker is
   coloured (green check = done / amber arrow = in-progress / grey dot =
   to-do). CSS-only, so it applies to every .progress screen (jtbd1 + jtbd3). */
.progress {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 17px;
}
/* Non-interactive info panels — NOT buttons. Subtle grey fill, no border,
   no shadow, no hover/press state, so they read as grouped information
   rather than tappable controls. */
.progress__jtbd {
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius-md);
  background: #FAFAFA;
}
.progress__jtbd:last-child { border-bottom: 0; }
.progress__head {
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--text-primary);
}
.progress__num { color: var(--text-tertiary); font-weight: 600; margin-right: 0; }
.progress__title { flex: 1; color: var(--text-primary); }
.progress__marker {
  order: 2;            /* move marker to the right of the card */
  margin-left: auto;
  width: auto;
  flex: 0 0 auto;
  font-weight: 700;
}
/* Marker colour by state — titles stay dark, only the marker carries status. */
.progress__jtbd--done .progress__head,
.progress__jtbd--inprogress .progress__head,
.progress__jtbd--pending .progress__head { color: var(--text-primary); }
.progress__jtbd--done .progress__marker { color: var(--success-fg); }
/* Animated hand-drawn Check asset as the done marker. */
.progress__check { width: 22px; height: 22px; display: block; }
/* Current step = filled amber dot (●), sized down from the title text so it
   reads as a status indicator, not a glyph. Amber = in-progress (matches the
   dashboard). Replaces the old arrow, which read as a clickable "next". */
.progress__jtbd--inprogress .progress__marker { color: var(--pending-fg); font-size: 13px; line-height: 1; }
.progress__jtbd--pending .progress__marker { color: var(--text-tertiary); }

/* JTBD preview list (jtbd-preview) → same option-card style. No status
   marker here (nothing's done yet) — just number + title + description
   per card. */
ol.jtbd-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
ol.jtbd-steps li {
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius-md);
  background: #FAFAFA;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-primary);
}
ol.jtbd-steps li strong { font-weight: 700; }

/* ---------- HERO 1: the aha number (€724 / €1,356) ---------- */
.aha-num {
  /* font-family from v7.css → Fraunces (the big € hero number). */
  font-size: 64px;
  line-height: 1;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* ---------- HERO 2: the €1 landed (bank-paid) ---------- */
.info-card__total { font-weight: var(--fw-heavy); letter-spacing: -0.1px; color: var(--text-primary); }

/* ---------- First-action prompt (dashboard) ---------- */
.first-action { border-bottom: 1px solid var(--border-primary); }
.first-action h2 { font-weight: var(--fw-bold); letter-spacing: -0.1px; }

/* ---------- Central Bank lockup ---------- */
.cb-mark__cap { color: var(--text-tertiary); }

/* ---------- Back arrow ---------- */
.top__back { color: var(--text-primary); }

/* ============================================================
   Floating dashboard dock (from Peter's screenshot) — the only
   shadowed elements. A translucent icon pill + a separate black "+"
   FAB to its right. Both float at the bottom, centred.
   ============================================================ */
.app-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 28px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  /* ~70% translucent so the page faintly shows through. */
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-pill);
  padding: 7px 10px;
  box-shadow: var(--shadow-floating-pill);
}
.app-nav__item {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
}
.app-nav__item svg { width: 24px; height: 24px; display: block; }
.app-nav__item--active { color: var(--text-primary); background: #ECECEE; }
.app-fab {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-floating-pill);
}
.app-fab svg { width: 26px; height: 26px; display: block; }

/* ---- Desktop phone-frame cap (interior v7-bundle pages) ----
   On the web view these screens stretched full-height: content stranded at the
   top, the fixed CTA pinned to the very bottom of the browser with a big empty
   gap. Lock them into the SAME centred phone frame as the splash + the
   image-led screens (base.css): a capped-height card centred in the viewport.
   Placed at the END of v8.css (the last sheet these screens load) so it wins
   over the `.cta-area { position: fixed }` rule above and v7.css's .app rule. */
@media (min-width: 431px) {
  body {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    /* safe: never clip a tall frame's top on a short window (see base.css). */
    align-items: safe center;
  }
  .app {
    min-height: 0;
    height: 932px;
    max-height: calc(100dvh - 48px);
    margin: 0 auto;
    /* Explicit width: as a flex item the .app's width is `auto` = shrink-to-fit,
       so screens with no full-width element (e.g. create-account: just a label +
       input) collapsed to ~340px. width:100% + max-width pins it to the frame
       width on every screen. */
    width: 100%;
    padding-bottom: 0;       /* the CTA handles its own bottom spacing */
    border-radius: 20px;
    overflow-y: auto;        /* tall screens scroll INSIDE the frame, not clip */
    overflow-x: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Flex column so the CTA can be pushed to the frame bottom (margin-top:auto)
       even when the content is short — otherwise a sticky CTA just sits right
       under the content, mid-frame. (base.css's .app is flex-column too.) */
    display: flex;
    flex-direction: column;
  }
  /* Content keeps its natural height; the frame scrolls instead of squishing. */
  .app > * { flex-shrink: 0; }
  /* CTA anchored to the FRAME bottom: margin-top:auto pushes it down on short
     screens; position:sticky keeps it pinned while tall screens scroll.
     Left TRANSPARENT (reset.css's parallax waves) so the wave footer crests
     around the button like mobile — the waves sit above content (z-index 1) so
     scrolling content is still hidden behind them.
     Screens with NO .cta-area (e.g. send-invoice — its Send button lives inside
     the invoice card) are unaffected: content just stacks from the top. */
  .cta-area {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
  }
  /* Wave footer pinned to the FRAME bottom via absolute positioning (relative
     to the .app's padding box → full frame width, at the bottom edge, cropped
     by the frame). This is robust to EVERY layout: short screens, no-CTA
     auto-advance screens, and animated screens that hide their CTA — the old
     flex/sticky approach drifted mid-frame in those cases. Matches base.css. */
  .bg-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 1;
  }
  /* Dashboard dock: it's fixed to the viewport on mobile, which detaches it to
     the browser bottom on the desktop frame. Pin it to the FRAME bottom with
     sticky so it stays at the bottom of the framed phone as the dashboard
     scrolls. Centred via auto side margins (was left:50% + transform). */
  .app-dock {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    transform: none;
    margin: 0 auto;       /* centre the fit-content dock in the frame */
    width: fit-content;
  }
}

/* ---------- Progress markers — GLOBAL design-system treatment (Peter, 27 Jul) ----------
   Was a bespoke fork: an animated check-animated.svg image for done, and bare "●" / "·"
   glyphs for in-progress / upcoming. Now matches bullet-web-frontend's .todo component
   (src/styles/components/todo.css + the payroll onboarding to-do engine):
     done       -> the shared inline tick (stroke-1 polyline), in the success colour
     in progress-> filled dot in the pending colour
     upcoming   -> hairline outlined ring, muted — the same "locked" read as .todo__num
   Sized on the 24px icon / 26px badge rhythm the global component uses. */
.progress__marker {
  width: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.progress__tick { width: 20px; height: 20px; display: block; }
.progress__dot,
.progress__ring { width: 10px; height: 10px; border-radius: 999px; display: block; }
.progress__dot  { background: currentColor; }
.progress__ring { border: 1px solid currentColor; opacity: .55; }
/* sub-steps sit one notch smaller, as before */
.progress__sub .progress__marker { width: 20px; flex: 0 0 20px; }
.progress__sub .progress__tick { width: 16px; height: 16px; }
.progress__sub .progress__dot,
.progress__sub .progress__ring { width: 8px; height: 8px; }
/* upcoming steps read as not-yet-reachable, like .todo--locked */
.progress__jtbd--pending .progress__marker { color: var(--ink-soft); }

/* ---------- Waves anchor to the PAGE bottom, not the viewport (Peter, 27 Jul) ----------
   Was `position: fixed; bottom: 0` (reset.css), which pins them to the viewport — so on any
   screen taller than the window the wave band floated across the MIDDLE of the content
   (cutting through the VAT-period options and the "expert team" card).
   Now absolute inside .app, which carries min-height:100vh:
     - content SHORTER than the screen -> .app is still 100vh tall, so the waves sit at the
       viewport bottom cresting around the CTA, exactly as before;
     - content TALLER than the screen  -> .app grows with it, so the waves land at the very
       bottom of the page and scroll with it instead of hovering over content.
   Same behaviour the desktop frame override already used — now consistent at every width. */
.app { position: relative; min-height: 100vh; }
.bg-waves { position: absolute; }