/* ============================================================
   Bullet v7 — minimal structural rebuild, four-JTBD spine.

   Same styling philosophy as v6: plain typographic hierarchy,
   black on white, yellow only as inline highlight, amber for
   in-progress states. What's new in v7 is the progress panel
   with sub-steps — it shows each JTBD's internal beats, not just
   the JTBD itself.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,100..900,0..100,0..1&display=swap');

:root {
  --bg:        #FFFFFF;
  --ink:       #1A1A1A;
  --ink-muted: #6B6B6B;
  --ink-soft:  #9A9AA1;
  --accent:    #FFE000;
  --amber:     #C8651B;
  --success:   #1A9E5C;
  --rule:      #E5E5E0;

  --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  --fs-h1:    32px;
  --fs-body:  16px;
  --fs-small: 13px;
}

html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 430px;
  margin: 0 auto;
  /* dvh (with svh fallback) so the column is sized to the *dynamic* viewport
     — static 100vh assumes the large viewport and can leave a gap under
     mobile Safari's address bar. min-height (not height) so content grows
     and the page scrolls; the 120px bottom padding clears the fixed CTA. */
  min-height: 100svh;
  min-height: 100dvh;
  padding: 32px 24px 120px;
  position: relative;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
p { margin: 0 0 14px; }
.subhead {
  font-size: 17px;
  color: var(--ink-muted);
  margin: 0 0 24px;
  line-height: 1.45;
}
.body strong { font-weight: 700; }
.footnote {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: 16px;
}
/* Keyword highlight: soft slate-blue marker (#83A5BF, per Peter) filling the
   lower ~half of the word — visible but muted; dark headline text stays legible.
   (The splash 'again' highlight is separate and stays white.) */
.highlight {
  background: linear-gradient(180deg,
    transparent 50%,
    rgba(131, 165, 191, 0.25) 50%,
    rgba(131, 165, 191, 0.25) 92%,
    transparent 92%);
  padding: 0 1px;
  border-radius: 1px;
}

/* ---------- Plain lists ---------- */
ul.plain, ol.plain {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
ul.plain li, ol.plain li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-body);
  line-height: 1.45;
}
ul.plain li:last-child, ol.plain li:last-child { border-bottom: 0; }

/* ---------- Pick-list ---------- */
ul.picklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
ul.picklist li button,
ul.picklist li a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
ul.picklist li button.is-selected,
ul.picklist li a.is-selected {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}

/* ---------- CTA + primary button ---------- */
.cta-area {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 16px 0;
  margin-top: 32px;
}
.btn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  box-sizing: border-box;
}
.btn--primary {
  background: var(--ink);
  color: #FFFFFF;
}
.btn--primary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn--ghost {
  background: transparent;
  color: var(--ink-muted);
  margin-top: 8px;
}

.top { margin-bottom: 24px; min-height: 24px; }
.top__back {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.splash {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  /* safe: never clip a tall splash's top on a short viewport (see base.css body). */
  align-items: safe center;
  justify-content: center;
  background: var(--bg);
}
.splash__brand {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ============================================================
   PROGRESS PANEL — the v7 signature component
   Four JTBDs, each with sub-steps that tick off as the user
   completes them. Plain text markers (✓/→/•), no boxes, no
   icons. Amber for the in-progress JTBD heading.
   ============================================================ */
.progress {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
  font-size: 15px;
}
.progress__jtbd {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.progress__jtbd:last-child { border-bottom: 0; }
.progress__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  color: var(--ink-soft);
}
.progress__marker {
  display: inline-block;
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
  font-weight: 700;
}
.progress__num {
  color: var(--ink-soft);
  font-weight: 700;
  margin-right: 2px;
}
.progress__title { flex: 1; }
.progress__substeps {
  list-style: none;
  padding: 6px 0 4px 26px;
  margin: 0;
}
.progress__sub {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.progress__sub .progress__marker {
  width: 14px;
  flex: 0 0 14px;
  font-size: 13px;
}

/* State styling */
.progress__jtbd--done .progress__head { color: var(--ink-muted); }
.progress__jtbd--done .progress__marker { color: var(--success); }
.progress__jtbd--done .progress__sub--done .progress__marker { color: var(--success); }
.progress__jtbd--done .progress__sub--done { color: var(--ink-muted); }

.progress__jtbd--inprogress .progress__head {
  color: var(--amber);
}
.progress__jtbd--inprogress .progress__marker { color: var(--amber); }
.progress__jtbd--inprogress .progress__sub--done .progress__marker { color: var(--success); }
.progress__jtbd--inprogress .progress__sub--done { color: var(--ink-muted); }
.progress__jtbd--inprogress .progress__sub--pending { color: var(--ink); }

.progress__jtbd--pending .progress__head { color: var(--ink-soft); }
.progress__jtbd--pending .progress__sub { color: var(--ink-soft); }

/* ---------- Boundary screen confirmation line ---------- */
.boundary-confirmation {
  /* Same headline treatment as h1 — Fraunces (completion-screen headlines are
     functionally h1s; kept in sync so headlines match flow-wide). Size comes
     from v8.css's --fs-title1 (32px) which loads later. */
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
}

/* ---------- Status callout (amber for accountant in-progress) ---------- */
.callout {
  border-left: 3px solid var(--amber);
  padding: 12px 16px;
  margin: 24px 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
.callout strong { color: var(--amber); }

/* ---------- Tick row (dashboard completed list) ---------- */
.tick-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.tick-list li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.tick-list li:last-child { border-bottom: 0; }
.tick-list__tick {
  flex: 0 0 18px;
  color: var(--success);
  font-weight: 700;
}

/* ---------- Aha branch visibility ---------- */
[data-biz="ltd"] .aha-st { display: none; }
[data-biz="st"]  .aha-ltd { display: none; }
[data-biz=""]    .aha-ltd { display: none; }  /* default to ST when unset */

/* ---------- Eyebrow (minimal — used on aha intro/maths screens) ----- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

/* ---------- Dashboard first-action prompt ----------
   Sits at the top of the dashboard, branches ST vs Ltd via
   data-biz on the wrapper. v7.js sets the attribute. */
[data-first-action] .first-action-st,
[data-first-action] .first-action-ltd { display: none; }
[data-first-action][data-biz="st"]  .first-action-st  { display: block; }
[data-first-action][data-biz="ltd"] .first-action-ltd { display: block; }
[data-first-action]:not([data-biz="ltd"]) .first-action-st { display: block; }
[data-first-action]:not([data-biz="ltd"]) .first-action-ltd { display: none; }

.first-action {
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.first-action h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

/* ---------- Hero number (for aha intro headlines) ---------- */
.aha-num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 16px;
}

/* ---------- Info card (shared by send-invoice + compliance-calendar) ---
   Plain bordered box, typography only. Used for the invoice card and
   the deadlines card so they read as the same visual family. */
.info-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 16px 0 24px;
}
.info-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.info-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-size: 15px;
}
.info-card__row + .info-card__row {
  border-top: 1px dashed var(--rule);
}
.info-card__row strong { font-weight: 700; }
.info-card__total {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: right;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

/* ---------- Loading stack (bank-paid) ----------
   Steps accumulate down the page. Each starts muted in-progress,
   flips to green ✓ when done. The accumulation gives the eye
   something to watch over the 6-second sequence rather than a
   single line swapping every 1.8s. */
.loading-stack {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}
.loading-stack li {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.loading-stack li:last-child { border-bottom: 0; }
.loading-stack li::before {
  content: '·';
  color: var(--ink-soft);
  font-weight: 700;
  width: 14px;
  flex: 0 0 14px;
  text-align: center;
}
.loading-stack li.is-done {
  color: var(--success);
}
.loading-stack li.is-done::before {
  content: '✓';
  color: var(--success);
}

/* ---------- JTBD cards (dashboard) ----------
   Vertical cards, one per JTBD. Bordered, typography only.
   The in-progress card (JTBD 2 on the dashboard, Mariana review)
   gets an amber left edge + amber status line. */
.jtbd-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 0 0 14px;
}
.jtbd-card--inprogress { border-left: 3px solid var(--amber); }
.jtbd-card__num {
  display: inline-block;
  font-weight: 700;
  color: var(--ink-soft);
  margin-right: 6px;
}
.jtbd-card__title {
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--ink);
}
.jtbd-card__desc {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 10px;
}
.jtbd-card__status {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.jtbd-card__status--done { color: var(--success); }
.jtbd-card__status--inprogress { color: var(--amber); }
.jtbd-card__note {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--amber);
  line-height: 1.4;
}

/* ---------- Invoice state tag (send-invoice + bank-paid) ----------
   Small uppercase pill next to the "Invoice" label, showing DRAFT
   on the send screen and PAID on the bank-paid screen. The two
   cards are otherwise identical (both use .info-card). */
.info-card__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
/* On the invoice card, "Invoice" reads as a header (not a tiny grey label)
   so it's obvious the card IS an invoice — uses the card's display serif. */
.info-card__label-row .info-card__label {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.invoice-state {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1;
}
.invoice-state--draft {
  background: var(--rule);
  color: var(--ink-muted);
}
.invoice-state--paid {
  background: #DDF4E5;
  color: var(--success);
}

/* Central Bank of Ireland reassurance lockup — shared by bank-connection
   and bank-paid (same logo on both). Logo fills the content width. */
.cb-mark { margin: 40px 0 0; text-align: center; }
.cb-mark__logo { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.cb-mark__cap { margin: 14px 0 0; font-size: 13px; color: var(--ink-muted); line-height: 1.45; }