/* Family Financial Tracker — private wealth statement aesthetic.
   Parchment + deep pine + brass gold. Fraunces display, Hanken Grotesk body. */

:root {
  --bg: #f1ebdd;
  --bg-deep: #ece4d3;
  --surface: #fbf8f0;
  --surface-2: #f5efe2;
  --border: #e2d9c6;
  --border-strong: #c8bca2;

  --ink: #232a22;            /* near-black warm */
  --text: #2c2c24;
  --text-dim: #7c7363;       /* warm taupe */
  --text-faint: #a39884;

  --pine: #234a39;           /* assets / positive / primary */
  --pine-deep: #1b3a2c;      /* sidebar */
  --pine-soft: #3a6650;
  --gold: #a9823c;           /* brass accent */
  --gold-soft: #c4a05a;
  --oxblood: #9a3b2c;        /* liabilities / negative */

  --radius: 9px;
  --radius-lg: 13px;
  --shadow: 0 1px 2px rgba(40, 33, 20, 0.04), 0 8px 26px rgba(40, 33, 20, 0.07);
  --shadow-sm: 0 1px 2px rgba(40, 33, 20, 0.05);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win over the display rules below. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Quiet paper grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tabular { font-variant-numeric: tabular-nums; }

#app {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  position: relative;
  background: var(--pine-deep);
  color: #e9e1cd;
  display: flex;
  flex-direction: column;
  padding: 26px 18px 22px;
}
.sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(var(--gold), transparent 60%);
  opacity: 0.5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 4px 6px 26px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.04em;
  background: rgba(169, 130, 60, 0.08);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: #f3ecda;
}
.brand-sub {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-top: 2px;
}

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.nav-btn {
  position: relative;
  text-align: left;
  background: transparent;
  border: none;
  color: #b7c3b3;
  padding: 11px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.05); color: #f0ead8; }
.nav-btn.active {
  background: rgba(196, 160, 90, 0.13);
  color: #f6efdd;
  font-weight: 600;
}
.nav-btn.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 2px;
  background: var(--gold);
}

.sidebar-foot {
  margin-top: auto;
  padding: 18px 8px 0;
  border-top: 1px solid rgba(196, 160, 90, 0.18);
}
.networth-mini { display: flex; flex-direction: column; gap: 4px; }
.networth-mini .label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.networth-mini .value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: #f4eedc;
  font-variant-numeric: tabular-nums;
}

/* ---- Content ---- */
.content { padding: 40px 48px 56px; overflow-y: auto; }
.view { display: none; }
.view.active { display: block; }
.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.eyebrow {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.view-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 33px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---- Buttons ---- */
.btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 10px 18px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s, transform 0.05s;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--pine);
  border-color: var(--pine);
  color: #f3ecda;
  letter-spacing: 0.01em;
}
.btn.primary:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
.btn.danger { background: var(--oxblood); border-color: var(--oxblood); color: #f7ece6; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Stat cards ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}
.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
}
.stat-card.assets::before { background: var(--pine); }
.stat-card.liabilities::before { background: var(--oxblood); }
.stat-card.networth::before { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.stat-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.stat-value {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 33px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-card.networth .stat-value { color: var(--pine-deep); }

/* ---- Panels ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.panel h2 {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.chart-wrap { position: relative; height: 264px; }
.empty-note { color: var(--text-faint); font-size: 13px; text-align: center; padding: 14px; font-style: italic; }
.muted { color: var(--text-dim); font-size: 13px; margin-top: 0; }

/* ---- Breakdown bars ---- */
.breakdown { display: flex; flex-direction: column; gap: 15px; }
.breakdown-row { display: flex; flex-direction: column; gap: 7px; }
.breakdown-top { display: flex; justify-content: space-between; font-size: 13px; }
.breakdown-cat { color: var(--text); }
.breakdown-top span:last-child { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.breakdown-bar { height: 6px; border-radius: 4px; background: var(--bg-deep); overflow: hidden; }
.breakdown-fill { height: 100%; border-radius: 4px; }

/* ---- Asset / liability groups ---- */
.cat-group { margin-bottom: 26px; }
.cat-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cat-group-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.cat-group-total {
  font-weight: 600;
  color: var(--text-dim);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 18px;
  margin-bottom: 9px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.item-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.item-main { display: flex; flex-direction: column; gap: 3px; }
.item-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.item-sub { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.item-right { display: flex; align-items: center; gap: 16px; }
.item-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.estimate-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid rgba(169, 130, 60, 0.4);
  border-radius: 7px;
  transition: background 0.15s;
}
.estimate-link:hover { background: rgba(196, 160, 90, 0.14); }
.item-actions { display: flex; gap: 6px; }
.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 31px; height: 31px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--border-strong); }
.empty-state {
  color: var(--text-dim);
  padding: 44px;
  text-align: center;
  font-style: italic;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

/* ---- Table ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 13px 14px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; font-variant-numeric: normal; }
th {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
tbody tr:hover { background: var(--surface-2); }
.pos { color: var(--pine); font-weight: 600; }
.neg { color: var(--oxblood); font-weight: 600; }

/* ---- Fields ---- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; min-width: 0; }
.field > span {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
input, select {
  width: 100%;
  min-width: 0;
  background: #fffdf7;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 11px 13px;
  border-radius: 7px;
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(169, 130, 60, 0.14);
}
input[readonly] { background: var(--surface-2); color: var(--text-dim); }
.danger-zone { border-color: rgba(154, 59, 44, 0.3); }

/* ---- Investments ---- */
#invGainCard::before { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.hold-name { font-weight: 600; color: var(--ink); }
.hold-ticker {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pine-deep);
  background: rgba(196, 160, 90, 0.22);
  border: 1px solid rgba(169, 130, 60, 0.4);
  vertical-align: middle;
}

/* Checkbox row */
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}
.check input { width: 17px; height: 17px; accent-color: var(--pine); cursor: pointer; }

/* Projection calculator */
.calc {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 26px;
  border-right: 1px solid var(--border);
}
.calc-prefill {
  margin: -4px 0 16px;
  font-size: 12px;
  padding: 7px 12px;
  align-self: flex-start;
}
.calc-output { display: flex; flex-direction: column; gap: 18px; }
.calc-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.calc-big {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--pine-deep);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.calc-breakdown { display: flex; flex-direction: column; gap: 10px; }
.calc-line {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--text-dim);
}
.calc-line span:last-child { color: var(--text); font-weight: 600; }
.calc-chart { height: 240px; }

/* ---- Investment plans ---- */
.panel-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.panel-head-row h2 { margin: 0; padding: 0; border: none; }
.btn.small { padding: 7px 13px; font-size: 12.5px; }

.plan-card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 9px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.plan-accent { width: 4px; flex-shrink: 0; }
.plan-main { flex: 1; padding: 14px 0 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.plan-top { display: flex; align-items: center; gap: 10px; }
.plan-name { font-weight: 600; color: var(--ink); font-size: 15px; }
.plan-platform {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 9px;
}
.plan-meta { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.plan-figures {
  padding: 14px 18px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.plan-fv {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan-growth { font-size: 11.5px; }
.plan-growth.pos { color: var(--pine); }

.plans-summary {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-now {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.plan-now-empty { color: var(--text-faint); font-weight: 500; }
.plan-growth { color: var(--text-dim); }
.plan-update {
  align-self: center;
  margin-right: 16px;
  flex-shrink: 0;
  background: rgba(196, 160, 90, 0.13);
  border: 1px solid rgba(169, 130, 60, 0.42);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.plan-update:hover { background: rgba(196, 160, 90, 0.24); color: var(--pine-deep); }
.modal.modal-sm { width: 380px; }
.modal.modal-lg { width: 760px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; max-height: 90vh; }

/* ---- Budget ---- */
.budget-month {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  min-width: 150px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.inc-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.inc-row .inc-name { flex: 1; }
.inc-row .inc-amt { width: 150px; text-align: right; }

.budget-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.budget-table th { text-align: right; color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.budget-table th:first-child { text-align: left; }
.budget-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: right; }
.budget-table td:first-child { text-align: left; color: var(--ink); }
.budget-table input.bud-inp { width: 110px; padding: 6px 9px; text-align: right; font-size: 13px; }
.budget-table tr.bud-group td {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  padding-top: 16px;
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
}
.cat-type {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.cat-type.fixed { background: rgba(35, 74, 57, 0.1); color: var(--pine); }
.cat-type.variable { background: rgba(169, 130, 60, 0.14); color: var(--gold); }
.cat-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.cat-link:hover { color: var(--pine); text-decoration: underline; }
.cat-del {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  margin-left: 6px;
  padding: 0 4px;
  vertical-align: middle;
}
.cat-del:hover { color: var(--oxblood); }
.cat-count {
  display: inline-block;
  margin-left: 7px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

/* Import review */
.review-list { flex: 1; min-height: 0; overflow-y: auto; margin: 4px 0 18px; border: 1px solid var(--border); border-radius: var(--radius); }
.review-row {
  display: grid;
  grid-template-columns: 64px 1fr 110px 170px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.review-row:last-child { border-bottom: none; }
.review-row.review-flag { background: rgba(169, 130, 60, 0.07); }
.review-date { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.review-desc { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-amt { text-align: right; font-variant-numeric: tabular-nums; }
.review-cat { padding: 6px 8px; font-size: 12.5px; }

/* One-off payments (payoff calculator) */
.oneoffs { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.oneoff-add { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.oneoff-add input[type="number"] { width: 130px; }
.oneoff-add input[type="text"] { flex: 1; min-width: 160px; }
.oneoff-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.oneoff-amt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
  min-width: 120px;
}
.oneoff-note { flex: 1; color: var(--text-dim); font-size: 13px; }
.oneoff-total {
  text-align: right;
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 10px;
}
.oneoff-total strong { color: var(--ink); font-variant-numeric: tabular-nums; }
#plansChartWrap { margin-top: 20px; }
#planDelete { margin-right: auto; }

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35, 42, 34, 0.4);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 50;
  animation: fade 0.18s ease;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(27, 33, 24, 0.32);
  padding: 28px 30px;
  width: 460px;
  max-width: calc(100vw - 40px);
  animation: rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  color: var(--ink);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 11px; margin-top: 6px; }

/* ---- Auth screen ---- */
.auth-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(35, 74, 57, 0.10), transparent 60%),
    var(--bg);
  z-index: 40;
  overflow-y: auto;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 34px 34px 30px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.auth-brand .brand-mark { width: 48px; height: 48px; font-size: 18px; }
/* The brand mark carries its own pine tile, so it only needs sizing. The
   sidebar keeps its lettered monogram, which shows the family's initials. */
.auth-mark {
  width: 48px; height: 48px; border-radius: 13px; display: block; flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(22, 48, 31, 0.3);
}
/* The logo goes home, as it does on every other site. */
.auth-mark-link { display: block; flex-shrink: 0; line-height: 0; }
.auth-title { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--ink); }
.auth-sub {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 3px;
}
.auth-form h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 20px;
}
.auth-form .field { margin-bottom: 16px; }
.auth-submit { width: 100%; padding: 12px; margin-top: 6px; font-size: 14px; }
.auth-switch { margin: 18px 0 0; font-size: 13px; color: var(--text-dim); text-align: center; }
.auth-switch a { color: var(--pine); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { color: var(--gold); text-decoration: underline; }
.auth-legal {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}
.auth-legal a { color: var(--text-dim); text-decoration: none; }
.auth-legal a:hover { color: var(--pine); text-decoration: underline; }

.paywall-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}

/* ---- Legal pages ---- */
/* 680px at 16px lands the line around 72 characters. The old 760px at
   14.5px ran to 93, which is a long way to track back on each line. */
.legal-page { max-width: 680px; margin: 0 auto; padding: 48px 28px 72px; }
.legal-page h1 { font-family: var(--font-display); font-size: 34px; font-weight: 400; color: var(--ink); margin: 0 0 6px; }
.legal-page h2 { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); margin: 30px 0 8px; }
.legal-page p, .legal-page li { font-size: 16px; line-height: 1.7; color: var(--text); }
.legal-page ul { padding-left: 20px; margin: 8px 0; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--pine); }
.legal-back { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }

.disclaimer-note {
  background: rgba(169, 130, 60, 0.09);
  border: 1px solid rgba(169, 130, 60, 0.35);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 14px;
}
.disclaimer-note strong { color: var(--ink); }

.auth-error {
  background: rgba(154, 59, 44, 0.1);
  border: 1px solid rgba(154, 59, 44, 0.35);
  color: var(--oxblood);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 13px;
  margin-bottom: 14px;
}
#codeInput {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Sidebar sign-out */
.sidebar-signout {
  margin-top: 16px;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(196, 160, 90, 0.28);
  color: var(--gold-soft);
  padding: 9px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-signout:hover { background: rgba(196, 160, 90, 0.12); color: #f0ead8; }

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pine-deep);
  border: 1px solid var(--pine-soft);
  color: #f1ead7;
  padding: 13px 22px;
  border-radius: 9px;
  box-shadow: var(--shadow);
  z-index: 60;
  font-size: 13.5px;
  animation: rise 0.2s ease;
}

/* ---- Motion ---- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.view.active .stat-card,
.view.active .panel {
  animation: riseIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.view.active .stat-card:nth-child(1) { animation-delay: 0.02s; }
.view.active .stat-card:nth-child(2) { animation-delay: 0.08s; }
.view.active .stat-card:nth-child(3) { animation-delay: 0.14s; }
.view.active .chart-row { animation-delay: 0.18s; }
.view.active .panel:nth-of-type(2) { animation-delay: 0.22s; }

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

/* Grid child must be allowed to shrink, or wide tables blow out the layout. */
.content { min-width: 0; }
/* Wide tables scroll inside their own container instead of the whole page. */
#holdingsTable, #budgetTable, #actualTable, #purchasesList, #historyTable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#budgetTable table, #actualTable table, #purchasesList table, #historyTable table { min-width: 480px; }
/* Tall modals (e.g. the add-item form) scroll internally on short screens. */
.modal { max-height: calc(100vh - 28px); overflow-y: auto; }

@media (max-width: 820px) {
  /* Drop the two-column grid: a grid 1fr track takes its min size from the
     sidebar's content and blows past the viewport. Plain block stacking makes
     the sidebar and content each fill 100% of the screen. */
  #app { display: block; overflow-x: hidden; }

  /* Sidebar becomes a top bar: brand left, net worth right, nav scroll strip. */
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; }
  .sidebar::after { display: none; }
  .brand { padding: 0; }
  .brand-mark { width: 38px; height: 38px; font-size: 15px; }
  .brand-name { font-size: 16px; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; border: none; }
  .networth-mini { align-items: flex-end; }
  .networth-mini .value { font-size: 20px; }
  .nav {
    order: 3; flex-basis: 100%;
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 4px; margin: 4px -16px 0; padding: 4px 16px 2px;
  }
  .nav::-webkit-scrollbar { height: 0; }
  .nav-btn { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; }
  .nav-btn.active::before { display: none; }

  .content { padding: 22px 16px 40px; }
  .view-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
  .view-head h1 { font-size: 26px; }
  .view-head .btn, .view-head .btn-row { width: 100%; }
  .view-head .btn-row .btn { flex: 1; }

  .stat-grid, .chart-row { grid-template-columns: 1fr; }
  .stat-value { font-size: 26px; }
  .stat-card { padding: 18px 18px 20px; }

  .field-row { grid-template-columns: 1fr; }
  .panel { padding: 18px 16px; }
  table { font-size: 13px; }
  .modal { padding: 22px 18px; }
  .modal.modal-sm, .modal.modal-lg { width: calc(100vw - 28px); }
}

/* ---- Investments panel + affordability (Purchases) ---- */
.invest-grid { margin-bottom: 4px; }
.invest-note { margin: 8px 2px 0; font-size: 12.5px; }
.afford-verdict {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  font-weight: 500; line-height: 1.5; border: 1px solid var(--border);
}
.afford-verdict.good { background: #e7efe6; border-color: #cadfc8; color: #234a39; }
.afford-verdict.warn { background: #f5ecd6; border-color: #e6d4a8; color: #8a6224; }
.afford-verdict.bad  { background: #f4e1dd; border-color: #e6c3ba; color: #9a3b2c; }
.afford-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 3px 10px; border-radius: 999px; }
.afford-badge.pos { background: #e7efe6; color: #234a39; }
.afford-badge.neg { background: #f4e1dd; color: #9a3b2c; }

/* ---- Holdings table: plan rows + update timestamp ---- */
#holdingsTable { overflow-x: auto; }
#holdingsTable table { min-width: 640px; }
.hold-when { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
tr.plan-row { cursor: pointer; }
tr.plan-row:hover { background: var(--surface-2); }

/* ---- Plan card actions ---- */
.plan-actions { display: flex; gap: 8px; align-items: center; }
.plan-toasset { background: var(--pine); color: #fbf8f0; border-color: var(--pine); }
.plan-toasset:hover { background: var(--pine-deep); }

/* ---- Authenticator (TOTP) setup ---- */
.totp-qr { display: flex; justify-content: center; margin: 8px 0 12px; }
.totp-qr img { width: 190px; height: 190px; image-rendering: pixelated; border: 8px solid #fff; border-radius: 8px; background: #fff; }
.totp-key {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px; letter-spacing: 2px; text-align: center; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin: 6px 0 16px; color: var(--ink);
}
.backup-codes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px; letter-spacing: 1px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin: 6px 0 16px;
}
.backup-codes span { padding: 2px 0; color: var(--ink); }

/* Plan linked to a Holding */
.plan-linked {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--pine);
  background: #e7efe6; border: 1px solid #cadfc8; border-radius: 999px; padding: 6px 12px;
  white-space: nowrap;
}

/* Plan actual return (value vs invested) */
.plan-return { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-return.pos { color: var(--pine); }
.plan-return.neg { color: var(--oxblood); }

/* Investments portfolio summary line */
.inv-summary { margin: -6px 0 18px; font-size: 14px; line-height: 1.5; }
.inv-summary .pos { color: var(--pine); }
.inv-summary .neg { color: var(--oxblood); }

/* ---- Asset value history & growth ---- */
.btn.micro { padding: 5px 11px; font-size: 12px; border-radius: 6px; }
.item-growth { display: block; font-size: 12.5px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.item-growth.pos { color: var(--pine); }
.item-growth.neg { color: var(--oxblood); }
.hist-summary { margin-bottom: 14px; }
.hist-table { max-height: 260px; overflow-y: auto; margin-top: 14px; }
.hist-table table { width: 100%; }
.hist-table th { position: sticky; top: 0; background: var(--surface); }
/* The modal is a flex column, so a plain height gets shrunk away when the
   content overflows. Pin it so the graph keeps its room. */
#histChartWrap { height: 340px; min-height: 340px; flex: 0 0 340px; }
@media (max-width: 560px) { #histChartWrap { height: 240px; min-height: 240px; flex-basis: 240px; } }

/* ==========================================================================
   Phone layout
   The blanket 820px block below handles tablets. These two blocks fix what
   actually breaks on a 375px screen: side-by-side grids whose fixed column
   pushes the other track off-canvas, and rows that put too many things on
   one line.
   ========================================================================== */

@media (max-width: 820px) {
  /* The payoff / affordability calculators are `280px 1fr`. Below ~700px the
     1fr track falls back to its min-content width and the whole results panel
     renders off the right of the screen — invisible on a phone. Stack them. */
  /* minmax(0, 1fr) — a plain 1fr track takes its minimum from the widest
     child (a <select> holding "Home loan — A$720,000.00"), so the column
     refuses to shrink below ~300px and pushes past a 320px screen. */
  .calc { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .calc-inputs, .calc-output { min-width: 0; }
  .calc-inputs { padding-right: 0; border-right: none; padding-bottom: 20px; border-bottom: 1px solid var(--border); }

  /* Nothing may set its own floor wider than the screen. Chart.js writes a
     pixel width onto its canvas, which otherwise props the panel open at the
     size it was first laid out at. */
  .panel, .chart-wrap, .calc-chart, .stat-card, .item-card, .plan-card { min-width: 0; }
  canvas { max-width: 100%; }
  .field input, .field select, .field textarea { max-width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  /* ---- Top bar -------------------------------------------------------
     Was: brand on the left, and a three-deep stack (label / value / button)
     on the right — lopsided, and it squeezed the brand to nothing. Now it's
     two even rows: brand + sign out, then net worth as its own full-width
     line with room for the number. */
  .sidebar { align-items: center; gap: 0 12px; padding: 12px 16px 8px; }
  .sidebar-foot { display: contents; }
  .brand { order: 1; }
  .sidebar-signout { order: 2; width: auto; margin: 0 0 0 auto; padding: 7px 14px; font-size: 12.5px; }
  .networth-mini {
    order: 3; flex-basis: 100%;
    flex-direction: row; align-items: baseline; justify-content: space-between;
    margin-top: 10px; padding-top: 9px;
    border-top: 1px solid rgba(240, 234, 216, 0.14);
  }
  .networth-mini .value { font-size: 21px; }
  .nav { order: 4; }
  /* The nav scrolls sideways; fade the right edge so a clipped tab reads as
     "there's more" instead of "this is broken". */
  .nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }

  /* ---- Asset / liability rows ---------------------------------------
     Was a single flex line: name+sub+growth on the left, value + up to four
     buttons on the right. At 375px the name column collapsed to a few
     characters, the growth line ran under the value, and the delete button
     was clipped off the screen edge. Lay it out as a small card instead —
     name and value on the top line, details below, actions on their own row.
     `display: contents` lets the existing markup reflow without touching JS. */
  .item-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    row-gap: 3px; column-gap: 12px;
    padding: 14px 15px;
  }
  .item-main, .item-right { display: contents; }
  .item-name { grid-column: 1; overflow-wrap: anywhere; }
  .item-value { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; font-size: 17px; }
  .item-sub, .item-growth { grid-column: 1 / -1; }
  .item-growth { margin-top: 2px; }
  .estimate-link { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  .item-actions { grid-column: 1 / -1; justify-self: end; margin-top: 10px; }

  /* ---- Investment plan cards ----------------------------------------
     A flex row of accent | details | figures | actions. At 375px the figures
     and the whole action group (Update / Add to Assets / edit / delete) ran
     off the right edge — the buttons were literally unreachable. Stack the
     body and give the actions their own full-width row. */
  .plan-card { flex-wrap: wrap; }
  .plan-accent { width: 100%; height: 4px; }
  .plan-main { flex-basis: 100%; padding: 13px 15px 0; min-width: 0; }
  .plan-name { overflow-wrap: anywhere; }
  .plan-figures { flex-basis: 100%; text-align: left; padding: 8px 15px 0; }
  .plan-actions { flex-basis: 100%; justify-content: flex-end; flex-wrap: wrap; padding: 12px 15px 13px; }
  .plan-linked { white-space: normal; }

  /* ---- Statement import review rows --------------------------------- */
  .review-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .review-desc { white-space: normal; }
  .review-cat { grid-column: 1 / -1; }

  /* ---- Tap targets ---------------------------------------------------
     31px icons are a desktop mouse size. Bring the row controls up to ~40px
     so they can be hit with a thumb without zooming. */
  .item-actions .btn.micro, .plan-actions .btn.micro { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .icon-btn { width: 40px; height: 40px; font-size: 15px; }
  .estimate-link { min-height: 38px; display: inline-flex; align-items: center; }
  .item-actions, .plan-actions { gap: 8px; }

  /* ---- Breathing room ------------------------------------------------ */
  .content { padding: 18px 14px 36px; }
  .panel { padding: 16px 14px; }
  .view-head h1 { font-size: 23px; }
  .cat-group-head h3 { font-size: 15px; }
  .backup-codes { font-size: 14px; padding: 14px; gap: 8px 12px; }
  .totp-qr img { width: 168px; height: 168px; }
  .modal { padding: 20px 16px; }
}

/* ---- Terms & Privacy on phones --------------------------------------
   These are long documents someone may actually have to read on a phone
   (3,400px+ of scrolling). At 14.5px inside 28px side padding the line was
   only 42 characters at 375px and 35 at 320px, which is well under the
   45-75 that reads comfortably. Bigger type, narrower gutters. */
@media (max-width: 620px) {
  .legal-page { padding: 32px 20px 56px; }
  .legal-page h1 { font-size: 27px; line-height: 1.15; }
  .legal-page h2 { font-size: 18px; margin: 26px 0 8px; }
  .legal-page p, .legal-page li { font-size: 16px; line-height: 1.6; }
  /* The contact address is one long unbreakable token. */
  .legal-page p, .legal-page li, .legal-page strong { overflow-wrap: anywhere; }
  .legal-page ul { padding-left: 18px; }
  .disclaimer-note { font-size: 13.5px; padding: 12px 14px; }
  /* Standalone navigation link — give it a thumb-sized hit area. Inline
     links inside prose are left alone, as padding them breaks the text flow. */
  .legal-back { margin-top: 32px; }
  .legal-back a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- Keep the sidebar on screen (desktop) ---------------------------
   #app is a two-column grid, so the sidebar stretched to whatever height
   the content column happened to be. `.sidebar-foot` has margin-top:auto,
   which pinned the net worth to the bottom of a 3,000px column rather than
   to the bottom of the screen — it scrolled away. Giving the sidebar its own
   viewport height and sticking it keeps that block in view at any scroll
   position. Scoped above the 820px breakpoint, where the sidebar is still a
   column; below that it becomes a top bar and must not be touched. */
@media (min-width: 821px) {
  .sidebar {
    position: sticky;
    top: 0;
    align-self: start;   /* stop the grid row stretching it to the content */
    height: 100vh;
    height: 100dvh;      /* discount mobile browser chrome where supported */
  }
  /* If the nav ever outgrows a short window, it scrolls on its own and the
     net worth stays pinned, instead of pushing it off the bottom. */
  .nav { overflow-y: auto; min-height: 0; }
}

/* ---- Net worth pinned on phones ------------------------------------
   Same goal as the sticky sidebar above, but the phone's top bar is 150px —
   18% of the screen — so pinning the whole thing is too expensive. Instead the
   net worth moves out of the top bar and onto its own strip fixed to the
   bottom of the screen: always visible, and the top bar gets 36px shorter.
   Applies across the whole range where the sidebar is a top bar (<=820px), so
   tablets behave the same as phones rather than losing it on scroll. */
@media (max-width: 820px) {
  .networth-mini {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    margin: 0;
    padding: 9px 16px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    background: var(--pine-deep);
    border-top: 1px solid rgba(196, 160, 90, 0.3);
    box-shadow: 0 -6px 18px rgba(16, 32, 22, 0.22);
    /* Label and figure on one line keeps the strip to ~45px at every width. */
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
  /* Nothing should sit underneath the strip at the end of a scroll. */
  .content { padding-bottom: 86px; }
}

/* ---- Pointing new accounts at the authenticator ---------------------
   Emailed codes work, but an authenticator code is instant and survives
   email being slow — worth surfacing at signup rather than burying it in
   Settings, where nobody goes looking. */
.auth-2fa-tease {
  background: rgba(35, 74, 57, 0.06);
  border: 1px solid rgba(35, 74, 57, 0.18);
  border-left: 3px solid var(--pine);
  border-radius: 8px;
  padding: 10px 13px;
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}
.auth-2fa-tease strong { color: var(--pine); }

#totpOfferBackdrop .eyebrow { display: block; margin-bottom: 6px; }
#totpOfferBackdrop h2 { margin-top: 0; }
.totp-why { list-style: none; padding: 0; margin: 14px 0; }
.totp-why li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.totp-why li::before {
  content: "";
  position: absolute;
  left: 6px; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.totp-why strong { color: var(--ink); }

/* Honeypot: kept in the layout for bots that check visibility, but off-screen
   and out of reach for anyone real. Not display:none — some bots skip those. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
#turnstileMount:not(:empty) { margin: 0 0 14px; }

/* ---- Investment drill-down -----------------------------------------
   The history modal doubles as a full run-down of one holding, so the chart
   gets real room and the headline figures sit above it. */
.hist-chart-wrap { margin: 4px 0 6px; position: relative; }
.hist-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}
.hist-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.hist-stat .k {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
.hist-stat .v {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--ink); margin-top: 3px; font-variant-numeric: tabular-nums;
}
.hist-stat .v.pos { color: var(--pine); }
.hist-stat .v.neg { color: var(--oxblood); }
.hist-legend { font-size: 12px; margin: 0 2px 10px; }
#histSub { margin: -6px 0 2px; font-size: 13px; }
/* The whole row opens the drill-down, so show it's live. */
.item-card.clickable { cursor: pointer; }
.item-card.clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
@media (max-width: 560px) {
  .hist-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hist-stat .v { font-size: 15px; }
}

/* ---- New loan calculator: mode toggle -------------------------------
   Two ways to use the same calculator, so make the choice look like a choice
   rather than a pair of buttons that might do something. */
.seg {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 14px;
}
.seg-btn {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 7px;
  padding: 9px 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--pine); color: #fbf8f0; box-shadow: var(--shadow-sm); }
#nlHeadlineSub { display: block; font-size: 12.5px; margin-top: 4px; }
@media (max-width: 560px) {
  .seg { flex-direction: column; }
  .seg-btn { padding: 11px 10px; }
}

/* ---- Redeem a code (paywall) ----------------------------------------
   Tucked behind a link: most people won't have a code, and showing an empty
   field makes it look like something they're missing. */
.redeem-box { margin-top: 14px; text-align: center; }
.redeem-toggle {
  background: none; border: none; padding: 4px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--pine); text-decoration: underline; cursor: pointer;
}
.redeem-toggle:hover { color: var(--pine-deep); }
#redeemForm { margin-top: 10px; text-align: left; }
#redeemCode { text-transform: uppercase; letter-spacing: 1px; }
.auth-ok {
  background: #e7efe6; border: 1px solid #cadfc8; color: #234a39;
  border-radius: 8px; padding: 10px 13px; font-size: 13px; margin-bottom: 12px;
}

/* A running price campaign, inline wherever the price is mentioned. */
.cmp-note {
  display: inline-block;
  margin-top: 8px;
  background: rgba(169, 130, 60, 0.14);
  border: 1px solid rgba(169, 130, 60, 0.4);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12.5px;
}
.cmp-note strong { color: var(--ink); }

/* ---- Read-only, after the trial ------------------------------------
   Not a warning bar: the app still works, and this explains the one thing
   that doesn't. Sits above the views so it is the first thing read. */
.ro-bar {
  background: linear-gradient(180deg, rgba(169, 130, 60, 0.13), rgba(169, 130, 60, 0.06));
  border: 1px solid rgba(169, 130, 60, 0.4);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.ro-bar p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; }
.ro-bar strong { color: var(--ink); }
.ro-actions { display: flex; flex-wrap: wrap; gap: 9px; }
/* A disabled control should read as "not now", not as broken. */
.read-only main.content button[disabled],
.read-only main.content input[disabled],
.read-only main.content select[disabled],
.read-only main.content textarea[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.read-only .ro-bar button[disabled] { opacity: 1; cursor: default; }
@media (max-width: 620px) {
  .ro-bar { padding: 13px 14px; margin-bottom: 16px; }
  .ro-actions .btn { flex: 1 1 100%; min-height: 44px; }
}

/* The consequences of closing an account. Styled to be read, not skimmed. */
.warn-list {
  background: rgba(154, 59, 44, 0.08);
  border: 1px solid rgba(154, 59, 44, 0.32);
  border-radius: 8px;
  margin: 0 0 14px;
  padding: 12px 14px 12px 30px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.warn-list li + li { margin-top: 7px; }
.warn-list strong { color: var(--oxblood); }