/* Taxare app · "Clean Slate" design system · light-first.
   Tokens mirror docs/assets/docs.css; app-specific components below. */

:root {
  /* Brand: #77a832 on #f1f2eb. The brand green is a FILL colour — at 2.5:1 on
     cream it cannot legally carry text or stand alone as a shape, so --accent
     (a darker same-hue green) carries links, icons and rings, and brand fills
     take dark text plus a --accent border. Every pair here is >= WCAG 2.2 AA. */
  --bg: #F1F2EB; --surface: #FFFFFF; --elevated: #E6E8DD;
  --text: #1A1C16; --text-2: #50553F; --text-3: #7D8270;
  --hairline: rgba(26,28,22,0.12);
  --green: #4E6E21; --amber: #8A5A00; --red: #B3261E;
  --accent: #4E6E21; --accent-soft: rgba(119,168,50,0.16);
  --brand: #77A832;              /* fills only, never text */
  --on-brand: #1A1C16;           /* text on a brand fill — 6.08:1 */
  --green-soft: rgba(78,110,33,0.12); --amber-soft: rgba(138,90,0,0.12);
  --red-soft: rgba(179,38,30,0.10);
  --glass: rgba(241,242,235,0.78);
  --radius: 16px;
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12140F; --surface: #1C1F17; --elevated: #2A2E22;
    --text: #ECEEE4; --text-2: #B6BBA8; --text-3: #878D78;
    --hairline: rgba(236,238,228,0.10);
    --green: #9DC95C; --amber: #E8B04B; --red: #F2867D;
    --accent: #9DC95C; --accent-soft: rgba(119,168,50,0.22);
    --brand: #77A832;
    --on-brand: #12140F;         /* dark text on brand fill — 6.56:1 */
    --green-soft: rgba(157,201,92,0.15); --amber-soft: rgba(232,176,75,0.15);
    --red-soft: rgba(242,134,125,0.15);
    --glass: rgba(18,20,15,0.76);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh; display: flex; flex-direction: column;
}
.num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Glass chrome (navigation layer only — content stays opaque) ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: var(--glass);
  border-bottom: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 24px rgba(26,28,22,0.07);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
}
.topbar-inner {
  max-width: 640px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); text-decoration: none; }
.brand span { color: var(--accent); }
.logout-form { margin: 0; }

/* ── Layout ── */
.wrap { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 28px 20px 64px; }

/* ── Buttons (44px minimum targets) ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; width: 100%; padding: 0 22px;
  background: var(--brand); color: var(--on-brand);
  border: 1.5px solid var(--accent); border-radius: 12px;
  font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(78,110,33,0.22);
  transition: transform 0.15s var(--spring), box-shadow 0.15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(78,110,33,0.30); }
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-ghost {
  min-height: 44px; padding: 0 14px;
  background: none; border: none; border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); }

/* ── Auth card ── */
.auth-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 32px 28px;
  max-width: 400px; margin: 8vh auto 0;
  box-shadow: 0 2px 12px rgba(26,28,22,0.06);
}
.auth-card h1 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 4px; }
.auth-card .sub { color: var(--text-2); font-size: 14px; margin-bottom: 22px; }
.auth-card label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin: 16px 0 6px; }
.auth-card input {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--bg); color: var(--text);
  border: 1.5px solid var(--hairline); border-radius: 10px;
  font: inherit; font-size: 15px;
}
.auth-card input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-card .btn-primary { margin-top: 24px; }
.alert {
  background: var(--amber-soft); color: var(--amber);
  border-radius: 10px; padding: 12px 14px;
  font-size: 13.5px; font-weight: 600;
  display: flex; gap: 8px; align-items: flex-start;
}

/* ── Home ── */
.home-head { margin: 8px 0 24px; }
.home-head h1 { font-size: clamp(28px, 6vw, 36px); letter-spacing: -0.03em; }
.home-head .sub { color: var(--text-2); font-size: 16px; margin-top: 4px; }

/* ── The year stack ── */
.year-stack { display: flex; flex-direction: column; gap: 14px; }
.year-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 18px 20px;
  text-decoration: none; color: var(--text);
  box-shadow: 0 1px 6px rgba(26,28,22,0.05);
  transition: transform 0.18s var(--spring), box-shadow 0.18s;
  min-height: 92px;
}
.year-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,28,22,0.10); }
.year-card:active { transform: scale(0.995); }

.ring { position: relative; width: 60px; height: 60px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--elevated); stroke-width: 6; }
.ring-fill {
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset 0.6s var(--spring);
}
.ring-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.ring-pct small { font-size: 9px; font-weight: 700; margin-left: 1px; color: var(--text-3); }

.year-info { flex: 1; min-width: 0; }
.year-label { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.year-meta { margin-top: 4px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-grey  { background: var(--elevated); color: var(--text-2); }

.year-estimate { text-align: right; flex-shrink: 0; }
.est-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.est-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.est-value.pos { color: var(--green); }
.est-value.neg { color: var(--amber); }  /* owing is amber, never red */
.est-value.muted { color: var(--text-3); }

.empty-state {
  background: var(--surface); border: 1px dashed var(--hairline);
  border-radius: var(--radius); padding: 32px; text-align: center;
  color: var(--text-2);
}

/* ── Footer declaration (legal — always visible, never styled away) ── */
.sitefoot {
  border-top: 1px solid var(--hairline);
  padding: 20px; max-width: 640px; margin: 0 auto; width: 100%;
}
.sitefoot p { font-size: 12px; color: var(--text-3); line-height: 1.6; }

@media (max-width: 420px) {
  .year-card { gap: 14px; padding: 16px; }
  .year-label { font-size: 18px; }
  .est-value { font-size: 19px; }
}

/* ── Interview: year page ── */
.crumb { margin-bottom: 14px; }
.crumb a { color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.crumb a:hover { color: var(--accent); }

.year-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.year-head h1 { font-size: clamp(26px, 6vw, 34px); letter-spacing: -0.03em; }

/* The hero numeral — the brand. Content layer: always opaque. */
.hero {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 28px 24px; text-align: center; margin-bottom: 18px;
}
.hero-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); }
.hero-value {
  font-size: clamp(40px, 12vw, 60px); font-weight: 700; letter-spacing: -0.04em;
  line-height: 1.05; margin: 8px 0 6px;
}
.hero-value.pos { color: var(--green); }
.hero-value.neg { color: var(--amber); }   /* owing is amber, never alarm-red */
.hero-note { font-size: 13.5px; color: var(--text-2); max-width: 42ch; margin: 0 auto; }

.breakdown {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 4px 20px; margin-bottom: 24px;
}
.breakdown summary {
  cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--accent);
  padding: 14px 0; min-height: 44px; display: flex; align-items: center;
}
.breakdown dl { margin: 0 0 12px; }
.breakdown dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 13.5px; }
.breakdown dt { color: var(--text-2); }
.breakdown dd { margin: 0; font-weight: 600; white-space: nowrap; }
.breakdown .rule { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 11px; }
.breakdown .rule dt, .breakdown .rule dd { font-weight: 700; color: var(--text); }
.breakdown .total dd { color: var(--accent); font-size: 15px; }
.not-included { font-size: 12.5px; color: var(--text-3); line-height: 1.55; padding-bottom: 14px; }

.sec-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); margin: 26px 0 10px; }
.sections { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.section-row > a, .section-row > div {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  text-decoration: none; color: var(--text);
  transition: transform .15s var(--spring), box-shadow .15s;
}
.section-row > a:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,28,22,.09); }
.section-row.is-locked > div { opacity: .55; }
.tick {
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
  border: 2px solid var(--hairline); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.tick.done { background: var(--brand); border-color: var(--accent); color: var(--on-brand); }
.section-text { flex: 1; display: flex; flex-direction: column; }
.section-name { font-weight: 700; font-size: 15px; }
.section-hint { font-size: 12.5px; color: var(--text-3); }
.section-state { font-size: 12px; font-weight: 700; color: var(--accent); }
.section-row.is-locked .section-state { color: var(--text-3); }

/* ── Interview: question pages ── */
.q-head { margin-bottom: 22px; }
.q-head h1 { font-size: clamp(26px, 6vw, 34px); letter-spacing: -0.03em; margin-bottom: 8px; }
.q-sub { font-size: 15px; color: var(--text-2); max-width: 54ch; }

.item-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 4px solid var(--amber); border-radius: 14px; padding: 14px 16px;
}
.item.is-confirmed { border-left-color: var(--green); }
.item-main { flex: 1; min-width: 140px; }
.item-label { font-weight: 700; font-size: 15px; }
.item-meta { font-size: 12.5px; color: var(--text-3); }
.item-amount { font-size: 19px; font-weight: 700; white-space: nowrap; }
.item-actions { display: flex; gap: 8px; align-items: center; }
.item-actions form { margin: 0; }
.btn-confirm {
  min-height: 44px; padding: 0 16px; border: none; border-radius: 10px;
  background: var(--brand); color: var(--on-brand); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.btn-remove {
  min-height: 44px; padding: 0 12px; border: none; border-radius: 10px;
  background: none; color: var(--text-3); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-remove:hover { color: var(--red); background: var(--red-soft); }
.confirm-note { font-size: 13px; color: var(--text-2); margin-bottom: 24px; }

.add-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 22px 20px; margin-bottom: 18px;
}
.add-card h2 { font-size: 17px; margin-bottom: 6px; }
.add-card label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin: 16px 0 6px; }
.add-card input, .add-card select {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--bg); color: var(--text);
  border: 1.5px solid var(--hairline); border-radius: 10px; font: inherit; font-size: 15px;
}
.add-card input:focus, .add-card select:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-hint { font-size: 12px; color: var(--text-3); margin: 6px 0 0; }
.add-card .btn-primary { margin-top: 22px; }
.help-note { font-size: 13px; color: var(--text-3); line-height: 1.6; max-width: 58ch; }

/* ── Documents ── */
.alert-good { background: var(--green-soft); color: var(--green); }
.alert-warn { background: var(--amber-soft); color: var(--amber); }
.alert[role="status"] { margin-bottom: 18px; }
.privacy-note {
  background: var(--accent-soft); border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 14px 18px; margin-bottom: 20px;
  font-size: 13px; line-height: 1.6; color: var(--text);
}
.add-card input[type="file"] {
  padding: 12px 14px; height: auto; line-height: 1.4;
  background: var(--bg); cursor: pointer;
}

/* ── Year setup ── */
.setup-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 26px 22px; margin-bottom: 20px;
}
.setup-card h2 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 8px; }
.setup-card p { font-size: 14px; color: var(--text-2); margin-bottom: 18px; max-width: 52ch; }
.setup-card .field-hint { margin-top: 12px; margin-bottom: 0; }
.add-year { margin-top: 26px; }
.add-year label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.add-year-row { display: flex; gap: 10px; }
.add-year select {
  flex: 1; min-height: 48px; padding: 0 14px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--hairline); border-radius: 10px; font: inherit; font-size: 15px;
}
.add-year select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-secondary {
  min-height: 48px; padding: 0 22px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
  border: none; border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.btn-secondary:hover { background: var(--brand); color: var(--on-brand); }

/* ── Deduction guides ── */
.guide-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.guide {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 0 18px;
}
.guide summary {
  cursor: pointer; font-size: 14.5px; font-weight: 700;
  padding: 14px 0; min-height: 44px; display: flex; align-items: center;
}
.guide p { font-size: 13.5px; color: var(--text-2); margin-bottom: 10px; }
.guide ul { margin: 0 0 10px 20px; }
.guide li { font-size: 13.5px; color: var(--text-2); margin-bottom: 4px; }
.guide-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-3); margin-bottom: 4px !important;
}
.guide-watch { color: var(--amber) !important; font-size: 13px !important; }
.guide-src { padding-bottom: 14px; }
.guide-src a { font-size: 13px; font-weight: 600; }

/* ── Budgeteer ── */
.budgeteer-link { margin: 22px 0; }
.budgeteer-link a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none;
}
.budgeteer-link a:hover { text-decoration: underline; }
.import-check { display: flex; align-items: center; }
.import-check input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); cursor: pointer; }
.setup-card form { margin-top: 4px; }

/* ── ATO walkthrough ── */
.walkthrough { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.walkthrough li { display: flex; gap: 14px; align-items: flex-start; }
.step-n {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.walkthrough div { font-size: 14.5px; line-height: 1.6; }
.step-hint { font-size: 13px; color: var(--text-3); margin-top: 4px; }

.year-picker { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.year-picker li { display: flex; align-items: center; gap: 12px; padding: 4px 0; min-height: 44px; }
.year-picker input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); cursor: pointer; }
.year-picker label { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; margin: 0; }
.year-picker-due { font-size: 12px; font-weight: 500; color: var(--text-3); }

/* ── Review ── */
.breakdown-open { padding: 4px 18px 2px; }
.breakdown-open dl { margin-top: 12px; }
.privacy-note ul { margin: 8px 0 0 20px; }
.privacy-note li { margin-bottom: 4px; }
.consent {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 18px 0 4px; font-size: 14px; line-height: 1.5; cursor: pointer;
}
.consent input[type="checkbox"] {
  width: 22px; height: 22px; min-width: 22px; margin-top: 1px;
  accent-color: var(--accent); cursor: pointer;
}
.item-actions .btn-secondary {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-size: 13.5px;
}

/* ── Lodge checklist ── */
.lodge-progress { margin-bottom: 26px; }
.lodge-progress-bar {
  height: 8px; border-radius: 4px; background: var(--elevated); overflow: hidden;
}
.lodge-progress-bar span {
  display: block; height: 100%; background: var(--brand);
  border-radius: 4px; transition: width .4s var(--spring);
}
.lodge-progress p { font-size: 13.5px; color: var(--text-2); margin-top: 8px; }

.personalise-list { list-style: none; margin: 0; padding: 0; }
.personalise-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; font-size: 14px; line-height: 1.5;
  border-top: 1px solid var(--hairline);
}
.personalise-list li:first-child { border-top: none; }
.personalise-list .tick { margin-top: 1px; }

.label-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.label-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 4px solid var(--hairline); border-radius: 14px; padding: 16px 18px;
  scroll-margin-top: 80px;
}
.label-card.is-copied { border-left-color: var(--green); }
.label-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.label-q {
  min-width: 44px; padding: 0 8px; height: 30px; border-radius: 8px;
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
}
.label-titles { flex: 1; min-width: 0; }
.label-titles h3 { font-size: 16px; letter-spacing: -0.01em; }
.label-where { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.label-where .badge { margin-left: 6px; }

.label-rows { width: 100%; border-collapse: collapse; font-size: 14px; }
.label-rows th, .label-rows td { padding: 7px 0; text-align: left; }
.label-rows thead th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-3); border-bottom: 1px solid var(--hairline);
}
.label-rows tbody td { border-bottom: 1px solid var(--hairline); }
.label-rows tfoot th, .label-rows tfoot td { font-weight: 700; padding-top: 9px; }
.label-rows .ta-r { text-align: right; }
.label-rows .copy-value { font-size: 17px; font-weight: 700; }
.label-note {
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
  background: var(--amber-soft); border-radius: 10px; padding: 10px 13px; margin-top: 12px;
}
.label-tick { margin-top: 14px; }
.label-tick button { width: 100%; }

.reason-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.reason-list li {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 4px solid var(--amber); border-radius: 12px;
  padding: 13px 16px; font-size: 13.5px; line-height: 1.6; color: var(--text-2);
}

/* ── Reconciliation table ── */
.recon > div { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 10px; align-items: baseline; }
.recon dd { text-align: right; }
.recon-head dd {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
}
.recon dd.pos { color: var(--green); }
.recon dd.neg { color: var(--amber); }
@media (max-width: 480px) {
  .recon > div { grid-template-columns: 1fr; gap: 2px; padding-bottom: 12px; }
  .recon dd { text-align: left; }
  .recon-head { display: none !important; }
  .recon dd::before { content: attr(data-label); }
}

/* ── "Mark as lodged": deliberate friction, by design ── */
.lodge-final {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 24px 20px; margin-top: 28px;
}
.lodge-final h2 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 8px; }
.lodge-final p { font-size: 14px; color: var(--text-2); max-width: 52ch; }
.btn-lodge {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; min-height: 56px; margin-top: 18px; padding: 0 22px;
  background: var(--elevated); color: var(--text);
  border: 1.5px solid var(--accent); border-radius: 14px;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none;
  transition: transform .18s var(--spring), box-shadow .18s ease;
}
.btn-lodge:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-lodge-fill {
  position: absolute; inset: 0; z-index: -1; transform-origin: left center;
  transform: scaleX(0); background: var(--brand);
}
.btn-lodge.is-holding { transform: scale(0.985); }
.btn-lodge.is-charged { transform: scale(1.015); box-shadow: 0 10px 28px rgba(78,110,33,0.35); }
.btn-lodge-text { position: relative; }
.lodge-spark {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); pointer-events: none; z-index: 50;
}
.undo-form { margin-top: 14px; }

/* Purposeful friction needs an unhurried alternative: without pointer holding
   (keyboard, assistive tech, reduced motion) the checkbox is the consent and a
   plain press is enough. */
@media (prefers-reduced-motion: reduce) {
  .btn-lodge-fill { display: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.record-again { padding: 0 18px; margin-top: 8px; }
.record-again > .privacy-note:first-of-type { margin-top: 16px; }
.record-again .add-card { background: var(--bg); }

/* ── "Lodge now" payoff ── */
.payoff {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 4px solid var(--amber); border-radius: var(--radius);
  padding: 20px 20px 16px; margin-bottom: 26px;
}
.payoff-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.payoff-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.payoff-value { font-size: clamp(30px, 8vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.payoff-value.pos { color: var(--green); }
.payoff-value.neg { color: var(--amber); }
.payoff-lines { margin: 16px 0 4px; }
.payoff-lines > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: 13.5px; border-top: 1px solid var(--hairline);
}
.payoff-lines dt { color: var(--text-2); }
.payoff-lines dd { margin: 0; font-weight: 700; white-space: nowrap; }
.payoff-note { font-size: 12.5px; line-height: 1.6; color: var(--text-2); margin-top: 12px; }
.payoff-urgent {
  background: var(--amber-soft); border-radius: 10px; padding: 10px 13px; color: var(--text);
}
.payoff-source { color: var(--text-3); font-size: 11.5px; }

.backlog-total {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px;
}
.backlog-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.backlog-value { font-size: clamp(26px, 7vw, 34px); font-weight: 700; letter-spacing: -0.03em; }
.backlog-value.pos { color: var(--green); }
.backlog-value.neg { color: var(--amber); }
.backlog-total p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-top: 8px; max-width: 56ch; }

/* ── Preference row ── */
.pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 14px 18px; margin-top: 20px;
}
.pref-text { display: flex; flex-direction: column; gap: 3px; max-width: 46ch; }
.pref-text strong { font-size: 14.5px; }
.pref-text span { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.pref-row .btn-ghost { border: 1px solid var(--hairline); }