/* DollarSafe — fintech-calm dark surfaces, one confident accent per state. */

:root {
  --bg: #080b10;
  --surface: #10161e;
  --surface-2: #161e29;
  --surface-3: #1c2632;
  --line: #222c39;
  --line-soft: #1a232e;
  --text: #e9eef5;
  --text-dim: #a4b1c2;
  --text-mute: #74829a;

  --accent: #2fd98a;
  --accent-dim: #1a7d51;
  --accent-wash: rgba(47, 217, 138, 0.1);
  --amber: #f2b53c;
  --amber-wash: rgba(242, 181, 60, 0.12);
  --red: #f4614c;
  --red-wash: rgba(244, 97, 76, 0.12);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --sp: 16px;

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 30px -18px rgba(0, 0, 0, 0.9);
  --font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 50% -12%, #101c25 0%, transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.008em;
}

button, input, select, textarea { font: inherit; color: inherit; font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.022em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--surface-2); padding: 10px 14px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------------ layout */

.main {
  padding: 18px 16px calc(96px + env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
}
.main:focus { outline: none; }

.rail { display: none; }

/* ------------------------------------------------------------- bottom tabs */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(8, 11, 16, 0.9);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
}
.tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 2px 5px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}
.tab svg { width: 20px; height: 20px; }
.tab span { white-space: nowrap; }
@media (max-width: 359px) { .tab { font-size: 9.5px; padding: 7px 1px 5px; } }
.tab[aria-current='page'] { color: var(--text); background: var(--surface-2); }
.tab:hover { color: var(--text-dim); }

/* ---------------------------------------------------------------- headings */

.viewhead { margin-bottom: 14px; }
.viewhead h1 { font-size: 21px; }
.viewhead p { color: var(--text-mute); font-size: 13px; margin-top: 3px; }

.section { margin-top: 22px; }
.section > h2 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-mute);
  margin-bottom: 9px;
  font-weight: 700;
}

/* ------------------------------------------------------------------- cards */

.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card + .card { margin-top: 10px; }
.card--tight { padding: 13px 14px; }

/* --------------------------------------------------------------- hero card */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 20px 18px 18px;
  border: 1px solid var(--line);
  background: linear-gradient(178deg, #16202b 0%, #0d1319 78%);
  box-shadow: var(--shadow);
}
.hero::before {
  content: '';
  position: absolute;
  inset: -60% 20% auto -20%;
  height: 190px;
  background: radial-gradient(closest-side, var(--state-wash), transparent 72%);
  pointer-events: none;
}
.hero__grid { position: relative; }
.hero__side { display: none; }
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.hero__label {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.hero__num {
  position: relative;
  margin: 10px 0 2px;
  font-size: clamp(58px, 17.5vw, 78px);
  line-height: 0.94;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--state);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.hero__num .cents { font-size: 0.44em; letter-spacing: -0.02em; margin-left: 1px; }
.hero__sub { position: relative; color: var(--text-dim); font-size: 13.5px; margin-top: 8px; max-width: 40ch; }
.hero__meta {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--text-mute);
}
.hero__meta b { color: var(--text-dim); font-weight: 600; }

/* --------------------------------------------------------------- state map */

[data-state='safe'] { --state: var(--accent); --state-wash: var(--accent-wash); }
[data-state='tight'] { --state: var(--amber); --state-wash: var(--amber-wash); }
[data-state='zero'] { --state: var(--amber); --state-wash: var(--amber-wash); }
[data-state='shortfall'] { --state: var(--red); --state-wash: var(--red-wash); }
[data-state='cycle_ended'] { --state: var(--amber); --state-wash: var(--amber-wash); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--state);
  background: var(--state-wash);
  border: 1px solid color-mix(in srgb, var(--state) 34%, transparent);
  white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--state); }
.chip--quiet {
  color: var(--text-dim); background: var(--surface-3);
  border-color: var(--line); font-weight: 600;
}

/* -------------------------------------------------------------- progressbar */

.progress { margin-top: 4px; }
.progress__track {
  height: 9px; border-radius: 999px; background: var(--surface-3);
  overflow: hidden; border: 1px solid var(--line-soft);
}
.progress__fill { height: 100%; border-radius: 999px; background: var(--state); transition: width 0.35s ease; }
.progress__legend {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 9px; font-size: 12px; color: var(--text-mute);
}
.progress__legend b { display: block; color: var(--text); font-size: 15px; font-weight: 700; }
.progress__legend div:last-child { text-align: right; }

/* ------------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 12px 13px;
}
.stat dt { font-size: 11.5px; color: var(--text-mute); font-weight: 600; }
.stat dd { margin: 5px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.stat small { display: block; color: var(--text-mute); font-size: 11.5px; font-weight: 500; margin-top: 2px; }

/* -------------------------------------------------------------------- rows */

.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; }
.row__main { min-width: 0; }
.row__title, .row__sub { display: block; }
.row__title { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.row__sub { color: var(--text-mute); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.row__amt { font-weight: 700; font-size: 15px; white-space: nowrap; letter-spacing: -0.02em; }
.pos { color: var(--accent); }
.neg { color: var(--text); }
.muted { color: var(--text-mute); }

.plan-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line-soft); }
.plan-line:last-of-type { border-bottom: 0; }
.plan-line__op { color: var(--text-mute); width: 14px; flex: 0 0 14px; font-weight: 700; }
.plan-line__body { flex: 1 1 auto; min-width: 0; }
.plan-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--line);
}
.plan-total b { font-size: 24px; letter-spacing: -0.03em; }
.divide {
  margin-top: 14px; padding: 14px; border-radius: var(--r);
  background: var(--surface-3); border: 1px solid var(--line);
}
.divide__eq {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 13px; color: var(--text-dim);
}
.divide__eq b { color: var(--state); font-size: 30px; font-weight: 900; letter-spacing: -0.035em; }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-mute); border: 1px solid var(--line);
  white-space: nowrap;
}
.badge--pending { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); background: var(--amber-wash); }
.badge--posted { color: var(--text-dim); }
.badge--counts { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); background: var(--accent-wash); }
.badge--red { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); background: var(--red-wash); }
.badgerow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* ----------------------------------------------------------------- buttons */

.btn {
  appearance: none; cursor: pointer;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface-3); color: var(--text);
  padding: 11px 15px; font-weight: 700; font-size: 14px;
  transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease;
}
.btn:hover { background: #212c3a; }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent); border-color: var(--accent); color: #04180f;
}
.btn--primary:hover { background: #45e39a; }
.btn--ghost { background: transparent; }
.btn { white-space: nowrap; }
.btn--sm { padding: 7px 11px; font-size: 12.5px; border-radius: 9px; }
.btn--block { display: block; width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ inputs */

.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 12px; color: var(--text-mute); font-weight: 600; margin-bottom: 5px; }
input[type='text'], input[type='number'], input[type='date'],
input[type='email'], input[type='password'], select {
  width: 100%; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text);
}
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 14px;
}
.amount-input span { font-size: 30px; font-weight: 700; color: var(--text-mute); }
.amount-input input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; background: transparent; padding: 4px 0;
  font-size: 34px; font-weight: 900; letter-spacing: -0.035em;
}
.amount-input input:focus { outline: none; }

.switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.switch:last-child { border-bottom: 0; }
.switch__txt { min-width: 0; }
.switch__txt b { display: block; font-size: 14px; font-weight: 600; }
.switch__txt small { color: var(--text-mute); font-size: 12px; }
.toggle {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 44px; height: 26px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line);
  position: relative; transition: background 0.18s ease, border-color 0.18s ease;
}
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-mute); transition: transform 0.18s ease, background 0.18s ease;
}
.toggle[aria-checked='true'] { background: var(--accent-wash); border-color: var(--accent-dim); }
.toggle[aria-checked='true']::after { transform: translateX(18px); background: var(--accent); }

.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.seg button {
  flex: 1 1 0; min-width: 0; appearance: none; cursor: pointer;
  border: 0; background: transparent; color: var(--text-mute);
  padding: 9px 6px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
}
.seg button[aria-pressed='true'] { background: var(--surface-3); color: var(--text); }

.inline-num { max-width: 116px; text-align: right; }

/* ----------------------------------------------------------------- notices */

.notice {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--state) 30%, transparent);
  background: var(--state-wash);
}
.notice b { display: block; font-size: 14px; margin-bottom: 2px; color: var(--text); }
.notice p { font-size: 12.5px; color: var(--text-dim); }
.notice__mark { flex: 0 0 auto; color: var(--state); margin-top: 1px; }

.delta { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; }
.delta span:first-child { color: var(--text-dim); overflow-wrap: anywhere; }
.delta b { white-space: nowrap; }
.delta b.up { color: var(--accent); }
.delta b.down { color: var(--red); }

.logcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.logcard__arrow { font-weight: 700; font-size: 15px; white-space: nowrap; }
.logcard__arrow i { color: var(--text-mute); font-style: normal; margin: 0 4px; }

.editor { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.editor__grid { display: grid; grid-template-columns: 1fr; gap: 8px; }

.tx { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.tx:last-child { border-bottom: 0; }
.tx__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
}
.daylabel {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute); font-weight: 700; margin: 18px 0 2px;
}
.daylabel:first-child { margin-top: 0; }

.goalbar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.goalbar > div { height: 100%; background: var(--accent); border-radius: 999px; }

.footnote { color: var(--text-mute); font-size: 11.5px; margin-top: 10px; line-height: 1.45; }

.diagnostics-payload {
  max-height: 320px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/* ---------------------------------------------------------- hero additions */

.hero__advice {
  position: relative;
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; padding: 10px 12px;
  border-radius: 12px;
  background: var(--state-wash);
  border: 1px solid color-mix(in srgb, var(--state) 22%, transparent);
  color: var(--text-dim);
  font-size: 12.5px; line-height: 1.45;
  max-width: 46ch;
}
.hero__advicemark { flex: 0 0 auto; color: var(--state); display: flex; margin-top: 1px; }
.hero__advicemark svg { width: 16px; height: 16px; }
.hero--shortfall .hero__num, .hero--zero .hero__num { letter-spacing: -0.05em; }
.hero__num.is-moving { transition: none; }
.hero__num.is-up { text-shadow: 0 0 26px color-mix(in srgb, var(--state) 26%, transparent); }
.hero__num.is-down { text-shadow: none; }
.hero--shortfall::before, .hero--zero::before { height: 240px; }
.hero--tight { background: linear-gradient(178deg, #1d1c17 0%, #0d1319 78%); }
.hero--shortfall { background: linear-gradient(178deg, #221618 0%, #0d1319 78%); }
.hero--cycle-ended { background: linear-gradient(178deg, #201d17 0%, #0d1319 78%); }
.hero__ended { position: relative; margin: 16px 0 0; max-width: 17ch; font-size: clamp(31px, 7vw, 52px); line-height: 1.02; letter-spacing: -0.055em; }

/* ----------------------------------------------------- overspend progress */

.progress__track { position: relative; display: flex; }
.progress__track.is-over { border-color: color-mix(in srgb, var(--red) 34%, transparent); }
.progress__over {
  height: 100%;
  background: repeating-linear-gradient(115deg, var(--red) 0 5px, #c04234 5px 10px);
  transition: width 0.35s ease;
}
.progress__marker {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--text); opacity: 0.75; border-radius: 2px;
}
.progress__flag {
  margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--red);
}
.progress__legend b.is-over { color: var(--red); }
.card--over { border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.stat--empty dd { color: var(--text-mute); }

/* ------------------------------------------------------ heads, rows, misc */

.rowhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.rowhead h2 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-mute); font-weight: 700; margin: 0;
}
.rowhead h2.cardh2 { margin-bottom: 0; }
.card > .rowhead:first-child { margin-bottom: 4px; }
.rowend { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rowend--stack { flex-direction: column; align-items: flex-end; gap: 6px; }
.btnrow--end { justify-content: flex-end; }
.viewhead--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.iconbtn {
  appearance: none; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 600;
}
.iconbtn:hover { color: var(--text); background: #232f3e; }
.btn--danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 32%, transparent); background: var(--red-wash); }
.btn--danger:hover { background: rgba(244, 97, 76, 0.2); }

/* ------------------------------------------------------------ empty states */

.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 18px 16px;
}
.empty__mark {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface-3); color: var(--text-mute); border: 1px solid var(--line);
}
.empty__mark svg { width: 18px; height: 18px; }
.empty b { font-size: 14.5px; }
.empty p { color: var(--text-mute); font-size: 12.5px; max-width: 46ch; }
.empty .btn { margin-top: 4px; }

/* --------------------------------------------------------------- skeletons */

.sk {
  display: block; border-radius: 7px; margin: 8px 0;
  background: linear-gradient(90deg, var(--surface-3) 25%, #22303f 50%, var(--surface-3) 75%);
  background-size: 320px 100%;
  animation: shimmer 1.25s linear infinite;
}
.sk--hero { height: 74px; width: 62%; border-radius: 14px; margin: 14px 0 10px; }
@keyframes shimmer { from { background-position: -160px 0; } to { background-position: 160px 0; } }
.skeleton .hero__side .sk { margin: 4px 0; }
.sr { position: absolute; left: -9999px; }

/* ------------------------------------------------------------ sheets/modal */

.overlay:empty { display: none; }
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 7, 11, 0.72);
  backdrop-filter: blur(3px);
  border: 0; padding: 0; margin: 0;
  animation: fadein 0.16s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; z-index: 61;
  left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: 100%; max-width: 540px;
  max-height: 92vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.9);
  animation: rise 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rise { from { transform: translateY(20px); opacity: 0.5; } to { transform: none; opacity: 1; } }
.sheet__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--line-soft);
}
.sheet__head h2 { font-size: 17px; }
.sheet__head p { color: var(--text-mute); font-size: 12.5px; margin-top: 3px; max-width: 44ch; overflow-wrap: anywhere; }
.sheet__body { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet__foot {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
}
.sheet__err {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 0 0 14px; padding: 10px 12px;
  border-radius: 10px; background: var(--red-wash);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--text); font-size: 12.5px; line-height: 1.4;
}
.sheet__err svg { flex: 0 0 auto; color: var(--red); }
.sheet--confirm {
  bottom: auto; top: 50%; transform: translateY(-50%);
  left: 12px; right: 12px; width: auto; max-width: 420px;
  border-radius: var(--r-lg);
  animation: pop 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pop { from { transform: translateY(-50%) scale(0.97); opacity: 0.6; } to { transform: translateY(-50%) scale(1); opacity: 1; } }
.field--sheet { margin-bottom: 14px; }
.field--sheet i { color: var(--accent); font-style: normal; }
.field--sheet input, .field--sheet select {
  width: 100%; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; color: var(--text);
}
.field--sheet select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%), linear-gradient(135deg, var(--text-mute) 50%, transparent 50%); background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.field--sheet input:focus-visible, .field--sheet select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field--sheet [aria-invalid='true']:focus-visible { outline-color: var(--red); }
.field--err input, .field--err select { border-color: var(--red); }
.fieldmsg { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 5px; line-height: 1.4; }
.field > span.fieldmsg { margin-bottom: 0; font-weight: 500; }
.field .fieldmsg--err, .fieldmsg--err { color: var(--red); font-weight: 600; }
.field .fieldmsg--warn, .fieldmsg--warn { color: var(--amber); }
.fieldmsg:empty { display: none; }
.switch--sheet { border-bottom: 1px solid var(--line-soft); padding: 10px 0 12px; margin-bottom: 12px; }
body[data-locked='on'] { overflow: hidden; }

/* -------------------------------------------------------------- onboarding */

body[data-chrome='off'] .tabbar, body[data-chrome='off'] .rail { display: none; }
body[data-chrome='off'] .main {
  margin-left: auto; padding-bottom: 40px;
  display: flex; min-height: 100vh; min-height: 100dvh;
}
.ob { max-width: 560px; width: 100%; margin: auto; }
.ob__progress { margin-bottom: 22px; }
.ob__dots { display: flex; gap: 5px; }
.ob__dot { height: 4px; flex: 1 1 0; border-radius: 999px; background: var(--surface-3); }
.ob__dot.is-done { background: var(--accent-dim); }
.ob__dot.is-now { background: var(--accent); }
.ob__stepline { margin-top: 8px; font-size: 11.5px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ob__hero { margin-bottom: 20px; }
.ob__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ob__logo .rail__word { font-weight: 900; font-size: 18px; letter-spacing: -0.03em; }
.ob__logo .rail__word span { color: var(--accent); }
.ob__h1, .ob__hero h1 { font-size: 25px; letter-spacing: -0.03em; }
.ob__hero h1 { letter-spacing: -0.035em; }
.ob__lede { color: var(--text-dim); font-size: 14px; margin-top: 8px; max-width: 48ch; }
.ob__choices { display: grid; gap: 10px; margin-top: 18px; }
.obcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 13px; row-gap: 4px; align-items: start;
  width: 100%; text-align: left;
  appearance: none; cursor: pointer;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--r); padding: 15px;
  color: inherit;
}
.obcard:hover { border-color: var(--accent-dim); }
.obcard__mark {
  grid-column: 1; grid-row: 1 / span 2;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-wash); color: var(--accent);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent-dim);
}
.obcard__mark svg { width: 18px; height: 18px; }
.obcard b { grid-column: 2; grid-row: 1; font-size: 15px; letter-spacing: -0.02em; }
.obcard small { grid-column: 2; grid-row: 2; color: var(--text-mute); font-size: 12.5px; line-height: 1.45; }
.obcard__go {
  grid-column: 2; grid-row: 3;
  margin-top: 8px; color: var(--accent); font-weight: 700; font-size: 12.5px; white-space: nowrap;
}
.ob__nav { display: flex; gap: 8px; align-items: center; margin-top: 22px; }
.ob__nav .btn--primary { margin-left: auto; }
.ob__blocked { margin-top: 12px; font-size: 12px; color: var(--amber); font-weight: 600; }
.picks { display: grid; gap: 8px; }
.pick {
  appearance: none; cursor: pointer; text-align: left; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 13px;
}
.pick b { display: block; font-size: 14.5px; letter-spacing: -0.02em; }
.pick small { display: block; color: var(--text-mute); font-size: 12px; margin-top: 2px; line-height: 1.45; }
.pick.is-on { border-color: var(--accent); background: var(--accent-wash); }

/* -------------------------------------------------------------------- debt */

input[type='range'].slider {
  display: block; width: 100%; margin: 6px 0 4px;
  appearance: none; -webkit-appearance: none; height: 26px;
  background: transparent; cursor: pointer;
}
input[type='range'].slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-soft);
}
input[type='range'].slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--accent); border: 2px solid #0b1016;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
input[type='range'].slider:focus-visible { outline: none; }
input[type='range'].slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-wash); }
input[type='range'].slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-soft); }
input[type='range'].slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent-dim); }
input[type='range'].slider::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #0b1016; border-radius: 50%; background: var(--accent); }
.slider__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-mute); }
.vs { display: grid; gap: 10px; }
.vs__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.vs__card.is-better { border-color: var(--accent-dim); background: linear-gradient(180deg, var(--accent-wash), var(--surface)); }
.vs__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vs__head b { font-size: 14.5px; }
.vs__sub { color: var(--text-mute); font-size: 12px; margin-top: 2px; }
.vs__big { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; }
.vs__meta { color: var(--text-mute); font-size: 12px; margin-top: 2px; }
.vs__rows { margin-top: 10px; border-top: 1px solid var(--line-soft); }
.vs__rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.vs__rows > div:last-child { border-bottom: 0; }
.vs__rows span { color: var(--text-mute); }
.vs__note {
  margin-top: 10px; padding: 8px 11px; border-radius: 9px;
  background: var(--accent-wash); border: 1px solid var(--accent-dim);
  color: var(--accent); font-size: 12.5px; font-weight: 600; text-align: center;
}
.vs__rows b { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.gate { margin-top: 4px; }
.gate__bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; border: 1px solid var(--line-soft); }
.gate__fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.35s ease; }
.gate__legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 12px; color: var(--text-mute); }
.gate__legend > div { display: flex; flex-direction: column; gap: 2px; }
.gate__legend > div:nth-child(2) { text-align: center; }
.gate__legend > div:last-child { text-align: right; }
.gate__legend b { font-size: 14.5px; }
.gate__legend b { color: var(--text); }
.chart { width: 100%; height: auto; display: block; margin-top: 6px; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend__k { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.legend__k--a { background: var(--accent); }
.legend__k--s { background: #6aa9ff; }
.schedwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.sched { margin-top: 6px; }
.sched__row {
  display: grid; grid-template-columns: 74px repeat(3, minmax(66px, 1fr));
  gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; min-width: 320px;
}
.sched__row > span:not(:first-child) { text-align: right; }
.sched__row--head { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
.sched__row:last-child { border-bottom: 0; }
@media (max-width: 560px) {
  /* Interest per month is summarised in the footnote — drop the column so the
     table fits a phone without sideways scrolling. */
  .sched__row { grid-template-columns: 62px 1fr 1fr; min-width: 0; gap: 6px; }
  .sched__row > span:nth-child(3) { display: none; }
}

/* ------------------------------------------------------------------ desktop */

@media (min-width: 900px) {
  body { font-size: 15.5px; }
  .tabbar { display: none; }
  .rail {
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0;
    width: 248px; padding: 26px 18px;
    border-right: 1px solid var(--line-soft);
    background: linear-gradient(180deg, #0b1016, #080b10);
    z-index: 10;
  }
  .rail__brand { display: flex; align-items: center; gap: 10px; color: var(--text-dim); padding: 0 8px 22px; }
  .rail__word { font-weight: 900; font-size: 17px; letter-spacing: -0.03em; color: var(--text); }
  .rail__word span { color: var(--accent); }
  .rail__list { display: flex; flex-direction: column; gap: 3px; }
  .rail__list .tab {
    flex-direction: row; justify-content: flex-start; gap: 11px;
    width: 100%; padding: 10px 11px; font-size: 13.5px; border-radius: 10px;
  }
  .rail__foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--line-soft); }
  .rail__persist { font-size: 11.5px; color: var(--text-mute); }
  .main { margin-left: 248px; max-width: 880px; padding: 40px 40px 60px; }
  .viewhead h1 { font-size: 26px; }
  .hero { padding: 26px 26px 22px; }
  .hero__num { font-size: 92px; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 30px; align-items: stretch; }
  .hero__side {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding-left: 26px; border-left: 1px solid var(--line-soft);
  }
  .hero__sidecell {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  }
  .hero__sidecell:last-child { border-bottom: 0; }
  .hero__sidecell span { font-size: 12.5px; color: var(--text-mute); }
  .hero__sidecell b { font-size: 16px; letter-spacing: -0.02em; }
  .hero__per { font-size: 11.5px; color: var(--text-mute); font-weight: 600; margin-left: 1px; }
  .progress__legend { max-width: 620px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .grid2 .card + .card { margin-top: 0; }
  .editor__grid { grid-template-columns: 1fr 1fr; }
  .ob { max-width: 620px; margin: 10px auto 0; }
  .ob__h1, .ob__hero h1 { font-size: 31px; }
  .ob__choices { grid-template-columns: 1fr 1fr; }
  .vs { grid-template-columns: 1fr 1fr; }
  .sheet:not(.sheet--confirm) { border-radius: var(--r-lg); bottom: 5vh; }
  .sk--hero { height: 88px; }
  .empty { padding: 22px 20px; }
}

@media (min-width: 1180px) {
  .main { max-width: 1000px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* onboarding: center the setup card in the viewport (must follow the desktop
   media queries so the rail offset on .main is neutralised when chrome is off) */
body[data-chrome='off'] .main { margin-left: auto; margin-right: auto; }
body[data-chrome='off'] .view { display: flex; flex: 1 1 auto; justify-content: center; }
body[data-chrome='off'] .ob { align-self: center; }

/* ---------------------------------------------------------------- cloud sync */

/* which engine produced the number the user is looking at */
.chip__src {
  margin-left: 2px; padding-left: 6px;
  border-left: 1px solid color-mix(in srgb, var(--state) 40%, transparent);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.85;
}

.srcnote {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  column-gap: 8px; row-gap: 4px;
  margin: 12px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
}
.srcnote > span { grid-column: 2; }
.srcnote__btn { grid-column: 2; justify-self: start; }
.srcnote__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-mute); transform: translateY(-2px);
}
@media (min-width: 720px) {
  .srcnote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
}
.srcnote[data-src='server'] .srcnote__dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.srcnote__btn {
  background: none; border: 0; padding: 0;
  color: var(--text-dim); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.srcnote__btn:hover { color: var(--text); }
.srcnote code, .footnote code, .row__sub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em; color: var(--text-dim);
  background: var(--surface-3); border-radius: 5px; padding: 1px 5px;
}

/* sign-in screen */
.authmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 12px; color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.authmark svg { width: 20px; height: 20px; }
#authForm { max-width: 100%; }
#authForm .field:last-of-type { margin-bottom: 0; }
#authForm input { padding: 12px 13px; }
#authForm input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#authForm input[aria-invalid='true'] { border-color: var(--red); }
#authForm input[aria-invalid='true']:focus-visible { outline-color: var(--red); }
.auth__alt { display: grid; gap: 10px; margin-top: 14px; }
.card--pick {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.card--pick:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-1px); }
.card--pick:disabled { opacity: 0.55; cursor: default; }

/* Inline text links inherit the brand accent, never browser blue. */
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------- offline banner (PWA) */

.offbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: calc(9px + env(safe-area-inset-top)) 14px 9px;
  background: color-mix(in srgb, var(--amber) 14%, #0c1016);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.45;
}
.offbar[hidden] { display: none; }
.offbar b { color: var(--text); font-weight: 700; }
.offbar__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-wash);
}

/* ------------------------------------------------------ Face ID lock screen */

.lock {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.lock__card { width: 100%; max-width: 460px; }
.lock__mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  margin-bottom: 16px;
}
.lock__card h1 { font-size: 24px; letter-spacing: -0.03em; }
.lock__sub { color: var(--text-dim); font-size: 14px; margin-top: 8px; max-width: 40ch; }

/* Placeholder glyphs, NOT a blurred copy of the real number — the real figure is
   never rendered while locked, because a CSS filter is not a way to hide money. */
.lock__figures {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(178deg, #121a23 0%, #0d1319 80%);
  filter: blur(5px);
  opacity: 0.62;
  user-select: none;
  pointer-events: none;
}
.lock__label {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-mute);
}
.lock__num {
  display: block;
  margin-top: 6px;
  font-size: 46px; font-weight: 900; letter-spacing: -0.045em;
  color: var(--text);
}
.lock__num i { font-size: 0.44em; font-style: normal; }
.lock__bars { display: grid; gap: 7px; margin-top: 14px; }
.lock__bars span { height: 9px; border-radius: 999px; background: var(--surface-3); }
.lock__bars span:nth-child(1) { width: 78%; }
.lock__bars span:nth-child(2) { width: 54%; }
.lock__bars span:nth-child(3) { width: 66%; }

.lock__actions { display: grid; gap: 9px; margin-top: 16px; }
.lock__esc { color: var(--text-mute); font-size: 12px; margin-top: 12px; line-height: 1.5; }
.lock__truth { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.lock__truth b { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .lock__figures { filter: blur(6px); }
}

/* --------------------------------------------------------- upgrade tiers */

.tiers { display: grid; gap: 10px; }
.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px;
}
.tier--current { border-color: var(--accent-dim); background: linear-gradient(180deg, var(--accent-wash), var(--surface)); }
.tier__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tier__head b { font-size: 15.5px; letter-spacing: -0.02em; }
.tier__tag { color: var(--text-mute); font-size: 12px; margin-top: 2px; }
.tier__price { margin-top: 12px; font-size: 30px; font-weight: 900; letter-spacing: -0.04em; }
.tier__price small { font-size: 13px; font-weight: 600; color: var(--text-mute); letter-spacing: 0; margin-left: 3px; }
.tier__annual { color: var(--text-mute); font-size: 12px; margin-top: 2px; }
.tier__list { margin: 13px 0 0; display: grid; gap: 7px; }
.tier__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
}
.tier__list li::before {
  content: '';
  position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-dim);
}
.tier .btn { margin-top: 14px; }

@media (min-width: 720px) {
  .tiers { grid-template-columns: 1fr 1fr; }
}

/* Lock screen sits in the same chrome-off centred column as onboarding. */
body[data-chrome='off'] .lock { align-self: center; flex: 1 1 auto; }

/* A checkout that does not exist must not look like a live CTA: dashed, muted,
   and disabled, so nobody can mistake it for a button that takes payment. */
.btn--placeholder {
  background: transparent;
  border-style: dashed;
  border-color: var(--line);
  color: var(--text-mute);
  font-weight: 600;
}
.btn--placeholder:hover { background: transparent; }

/* --------------------------------------------------- bank-activity CSV import */

/* The drop target reads as an invitation, not a form field: dashed edge, roomy,
   with the real <input type=file> stretched invisibly across it so a tap
   anywhere opens the picker. */
.dropzone {
  position: relative;
  margin-top: 12px;
  padding: 22px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  text-align: center;
}
/* A real, full-size, transparent file input laid over the whole box. Safari
   refuses to open the picker for an input it treats as invisible, so this is
   never hidden -- only transparent. It also makes the entire box tappable. */
.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
/* The visible button is underneath the input, so the input always wins the tap.
   It is presentational; the input carries the accessible label. */
.dropzone__btn { position: relative; z-index: 0; pointer-events: none; }
/* The input is transparent, so its focus ring would be too. Show focus on the
   box instead, otherwise the keyboard path becomes invisible. */
.dropzone:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.dropzone.is-over { border-color: var(--accent-dim); background: var(--accent-wash); }
.dropzone__title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.dropzone__sub { font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; }
.dropzone .btn { display: inline-flex; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bullets { margin: 8px 0 0; padding-left: 18px; }
.bullets li { font-size: 12.5px; color: var(--text-dim); margin-bottom: 5px; line-height: 1.5; }

/* A warning here is a statement about what the parser could NOT determine, so it
   gets the amber treatment rather than the red one — nothing is broken yet. */
.notice--warn {
  display: block;
  padding: 11px 13px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  background: var(--amber-wash);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Preview rows live in their own cards so a long import scrolls as a list of
   discrete decisions rather than one wall of text. */
.tx--imp {
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface);
}
.tx--imp:last-child { border-bottom: 1px solid var(--line-soft); }
.tx--bad { border-color: color-mix(in srgb, var(--red) 26%, transparent); background: var(--red-wash); }
.tx--imp .row { gap: 11px; }
.tx--imp .row__sub { display: block; margin-top: 2px; line-height: 1.45; }
.editor--imp { margin-top: 10px; padding-top: 10px; }

/* The include control is a checkbox in behaviour, so it reads as a square that
   fills, not as a sliding switch. */
.toggle--check {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 6px;
  background: var(--surface-3);
}
.toggle--check::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: none;
  width: auto; height: auto;
  background: transparent;
  border-radius: 6px;
}
.toggle--check[aria-checked='true'] { background: var(--accent-wash); border-color: var(--accent-dim); }
.toggle--check[aria-checked='true']::after {
  background: transparent;
  transform: none;
  box-shadow: none;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  inset: 5px 5px 7px 5px;
  border-radius: 0;
  rotate: -45deg;
}
.toggle--check:disabled { opacity: 0.4; cursor: not-allowed; }

.tablewrap { overflow-x: auto; margin-top: 10px; }
.ptable { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.ptable th, .ptable td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
  color: var(--text-dim);
}
.ptable th { color: var(--text); font-weight: 600; }

/* Import rows: the description column must fill the space between the include
   box and the amount, otherwise flex centres it and the list reads as ragged. */
.tx--imp .row__main { flex: 1 1 auto; text-align: left; }
.tx--imp .row { flex-wrap: wrap; }
.tx__meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* On a phone the merchant name, the amount and the Change button cannot share
   one line without shredding the name across three rows. Give the name the full
   width and drop the amount and the button onto their own right-aligned line. */
@media (max-width: 480px) {
  /* The include box keeps sharing the first line with the name it controls;
     only the amount and the button move down. */
  .tx__meta { flex: 1 1 100%; justify-content: flex-end; margin-top: 8px; }
}