/* ── Onboarding: add accounts before the dashboard ───────────
   Shown in place of the app shell until a new user has added at least one
   account and confirmed they're done. Modals (manual account, name accounts,
   link errors) sit outside the shell, so they open over this screen as usual. */

#onboardingScreen {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

/* Leaving setup: pinned over the shell while the dashboard builds beneath,
   then faded out. Below modals (z-index 200) so a toast or dialog still shows. */
#onboardingScreen.onb-leaving {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow-y: auto;
  transition: opacity 0.25s ease;
}
#onboardingScreen.onb-leaving--out { opacity: 0; pointer-events: none; }

.onb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--border);
}

.onb-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.onb-email {
  font-size: var(--text-sm);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onb-signout {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.onb-signout:hover { color: var(--accent-text); }

.onb-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 40px 64px;
}

/* ── Intro ─────────────────────────────────────────────── */
.onb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.onb-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.onb-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1.15;
  color: var(--text-bright);
  margin: 12px 0 12px;
}

.onb-lede {
  max-width: 620px;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-dim);
}

.onb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  margin-top: 36px;
  align-items: start;
}

/* ── Steps ─────────────────────────────────────────────── */
.onb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.onb-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 18px;
  position: relative;
  padding-bottom: 30px;
}

/* The rail joining one step's number to the next. */
.onb-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}

.onb-step-num {
  width: 36px;
  height: 36px;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-text);
  background: var(--surface);
}

/* A step the user has actually completed swaps its number for a check. */
.onb-step.is-done .onb-step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.onb-step.is-done .onb-step-num span { display: none; }
.onb-step.is-done .onb-step-num::after { content: '✓'; font-family: var(--font-sans); font-size: var(--text-md); }

.onb-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--text-bright);
  margin: 4px 0 8px;
}

.onb-optional {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: 3px;
}

.onb-step-text {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 600px;
}
.onb-step-text strong { color: var(--text); font-weight: 600; }

.onb-substeps {
  margin: 14px 0 0;
  padding: 14px 18px 14px 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 600px;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-dim);
}
.onb-substeps li { padding-left: 4px; }
.onb-substeps li + li { margin-top: 6px; }
.onb-substeps li::marker { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); }
.onb-substeps strong { color: var(--text); font-weight: 600; }

/* ── Buttons ───────────────────────────────────────────── */
.onb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
.onb-btn:hover:not(:disabled) { border-color: var(--accent-border); color: var(--accent-text); }

.onb-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.onb-btn--primary:hover:not(:disabled) { color: var(--bg); filter: brightness(1.08); }

.onb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.onb-btn--wide { width: 100%; margin-top: 0; padding: 12px 18px; }

.onb-btn:focus-visible,
.onb-signout:focus-visible,
.onb-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Accounts so far ───────────────────────────────────── */
.onb-side {
  position: sticky;
  top: 24px;
}

.onb-side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px 18px 6px;
}

.onb-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.onb-count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.onb-empty {
  padding: 18px 0 20px;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--muted);
}

.onb-inst {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}

.onb-inst-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.onb-inst-name {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Add more from this institution" — a second link to the same bank creates a
   duplicate connection, so this is the right way to pick up a missed account. */
.onb-more {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--accent-text);
  cursor: pointer;
}
.onb-more:hover { text-decoration: underline; text-underline-offset: 2px; }

.onb-acct {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 0;
}

.onb-acct-name {
  min-width: 0;
  font-size: var(--text-md);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onb-acct-sub {
  display: block;
  font-size: var(--text-caption);
  color: var(--muted);
  margin-top: 1px;
}
.onb-acct-sub .onb-mono { font-family: var(--font-mono); }

.onb-acct-bal {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.onb-acct-bal.is-liability { color: var(--red); }

.onb-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding: 12px 0;
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.onb-total[hidden] { display: none; }

.onb-total-val {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
}

.onb-finish { margin-top: 16px; }

.onb-finish-hint {
  margin-top: 10px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}

/* ── Phase 2: review transactions ──────────────────────── */
.onb-wrap[hidden] { display: none; }

.onb-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.onb-howto {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.onb-howto li {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-dim);
}
.onb-howto strong { color: var(--text); font-weight: 600; }
.onb-howto-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-text);
  padding-top: 1px;
}

#onbPhaseTxns .onb-grid { margin-top: 24px; }

.onb-review {
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 0;
}

.onb-review-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.onb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.onb-seg-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-dim);
  cursor: pointer;
}
.onb-seg-btn + .onb-seg-btn { border-left: 1px solid var(--border); }
.onb-seg-btn.is-active { background: var(--accent-dim); color: var(--accent-text); font-weight: 600; }
.onb-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Shown in the mark-all dialog when uncategorised transactions are left out. */
.onb-markall-warn { color: var(--warning); }

.onb-review-list .onb-empty { padding: 28px 18px; }

.onb-grp + .onb-grp { border-top: 1px solid var(--border); }

.onb-grp-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 190px 104px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 8px;
}

.onb-grp-toggle {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-sm);
}
.onb-grp-toggle span { display: inline-block; transition: transform 0.15s ease; }
.onb-grp.is-open .onb-grp-toggle span { transform: rotate(90deg); }
.onb-grp-toggle:hover { color: var(--text); background: var(--subrow-bg-hover); }
.onb-grp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

.onb-grp-main { min-width: 0; cursor: pointer; }
.onb-grp-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-grp-sub { font-size: var(--text-caption); color: var(--muted); margin-top: 2px; }

.onb-grp-amt { text-align: right; }
.onb-amt {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.onb-amt.is-income { color: var(--green); }

.onb-cat-select {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.onb-cat-select:hover { border-color: var(--accent-border); }
.onb-cat-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* No category yet: the one state that blocks Continue, so it's the one that stands out. */
.onb-cat-select.is-missing { border-color: var(--warning-border); background: var(--warning-dim); color: var(--warning); }

.onb-ok {
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-text);
  background: transparent;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.onb-ok:hover:not(:disabled) { background: var(--accent-dim); }
.onb-ok:disabled { opacity: 0.4; cursor: not-allowed; }
.onb-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onb-ok--sm { padding: 4px 8px; }

.onb-reviewed {
  font-size: var(--text-sm);
  color: var(--green);
  text-align: center;
  white-space: nowrap;
}

.onb-grp-txns {
  background: var(--subrow-bg);
  border-top: 1px solid var(--border);
  padding: 4px 0;
}

.onb-txn {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 170px 34px;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 44px;
}

.onb-txn-date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.onb-txn-name {
  min-width: 0;
  font-size: var(--text-base);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-txn-acct {
  display: block;
  font-size: var(--text-caption);
  color: var(--muted);
}
.onb-txn-amt { text-align: right; }
.onb-txn .onb-cat-select { padding: 4px 6px; }

/* Side panel */
.onb-side-card + .onb-side-card { margin-top: 16px; }
#onbPhaseTxns .onb-side-card { padding-bottom: 16px; }

.onb-progress {
  height: 6px;
  background: var(--surface2);
  overflow: hidden;
}
.onb-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}
.onb-progress-note {
  margin-top: 10px;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.onb-cats-text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-dim);
}

.onb-cat-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.onb-cat-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.onb-cat-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.onb-cat-add { margin-top: 0; padding: 8px 14px; }

.onb-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  max-height: 220px;
  overflow-y: auto;
}
.onb-cat-chip {
  font-size: var(--text-caption);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 3px 8px;
}
/* Categories the user added themselves. */
.onb-cat-chip.is-custom { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-dim); }

.onb-back {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-dim);
  cursor: pointer;
}
.onb-back:hover { color: var(--accent-text); }
.onb-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Phase 3: monthly budget ───────────────────────────── */
#onbPhaseBudget .onb-grid { margin-top: 28px; }

.onb-bud-head,
.onb-bud-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 150px 92px;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
}

.onb-bud-head {
  padding-top: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.onb-bud-head span:nth-child(2) { text-align: right; }
.onb-bud-head span:nth-child(4) { text-align: center; }

.onb-bud-row {
  padding-top: 10px;
  padding-bottom: 10px;
}
.onb-bud-row + .onb-bud-row { border-top: 1px solid var(--border); }

.onb-bud-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.onb-swatch {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}
.onb-bud-name {
  min-width: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-bud-sub {
  display: block;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--muted);
  margin-top: 1px;
}

.onb-bud-avg { text-align: right; }

.onb-bud-input .money-input {
  width: 100%;
  padding: 7px 10px 7px 24px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.onb-bud-input .money-prefix { left: 10px; }
.onb-bud-input .money-input:hover:not(:disabled) { border-color: var(--accent-border); }
.onb-bud-input .money-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.onb-bud-input .money-input:disabled { opacity: 0.45; cursor: not-allowed; }

/* A category left out of spending keeps its row, quieter, below the rest. */
.onb-bud-row.is-ignored .onb-bud-name,
.onb-bud-row.is-ignored .onb-bud-avg { opacity: 0.6; }

.onb-bud-section {
  padding: 18px 16px 8px;
  border-top: 1px solid var(--border);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.onb-bud-section + .onb-bud-row { border-top: none; }

/* Switch: a real checkbox, visually a track + knob. */
.onb-switch {
  position: relative;
  justify-self: center;
  display: inline-flex;
  cursor: pointer;
}
.onb-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.onb-switch-track {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.onb-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s;
}
.onb-switch input:checked + .onb-switch-track { background: var(--accent); border-color: var(--accent); }
.onb-switch input:checked + .onb-switch-track::after { transform: translateX(14px); background: var(--bg); }
.onb-switch input:focus-visible + .onb-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Side panel figures */
.onb-bud-total {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1.1;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}
.onb-bud-compare {
  margin-top: 12px;
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.onb-bud-compare > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.onb-bud-compare .onb-mono { color: var(--text); }
.onb-bud-compare .onb-mono.is-under { color: var(--warning); }

.onb-bud-stack {
  display: flex;
  height: 8px;
  margin-top: 14px;
  background: var(--surface2);
  overflow: hidden;
}
.onb-bud-stack span { height: 100%; }
.onb-bud-stack span + span { border-left: 1px solid var(--surface); }

.onb-cats-text--gap { margin-top: 10px; }

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .onb-grid { grid-template-columns: minmax(0, 1fr); }
  .onb-side { position: static; }
  .onb-howto { grid-template-columns: minmax(0, 1fr); }
  /* The finish controls belong after the list on a single column. */
  #onbPhaseTxns .onb-side { order: 2; }
}

@media (max-width: 720px) {
  .onb-bud-head { display: none; }
  .onb-bud-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cat avg" "input switch";
    row-gap: 8px;
  }
  .onb-bud-cat    { grid-area: cat; }
  .onb-bud-avg    { grid-area: avg; }
  .onb-bud-input  { grid-area: input; }
  .onb-switch     { grid-area: switch; justify-self: end; }

  .onb-grp-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas: "tog main amt" ". sel ok";
    row-gap: 8px;
  }
  .onb-grp-toggle { grid-area: tog; }
  .onb-grp-main   { grid-area: main; }
  .onb-grp-amt    { grid-area: amt; }
  .onb-grp-row > .onb-cat-select { grid-area: sel; }
  .onb-grp-row > .onb-ok,
  .onb-grp-row > .onb-reviewed { grid-area: ok; }
  .onb-txn {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas: "date name amt" ". sel ok";
    row-gap: 6px;
    padding-left: 16px;
  }
  .onb-txn-date { grid-area: date; }
  .onb-txn-name { grid-area: name; }
  .onb-txn-amt  { grid-area: amt; }
  .onb-txn > .onb-cat-select { grid-area: sel; }
  .onb-txn > .onb-ok,
  .onb-txn > .onb-reviewed { grid-area: ok; }
}

@media (max-width: 640px) {
  .onb-top { padding: 14px 16px; }
  .onb-email { display: none; }
  .onb-wrap { padding: 28px 16px 48px; }
  .onb-title { font-size: var(--text-3xl); }
  .onb-step { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .onb-step-num { width: 30px; height: 30px; font-size: var(--text-caption); }
  .onb-step:not(:last-child)::before { left: 14px; top: 34px; }
  .onb-substeps { padding: 12px 14px 12px 32px; }
  .onb-step .onb-btn { width: 100%; }
}