/* === LEDGER — warm editorial budget tool === */

:root {
  /* True-white palette (light) */
  --paper: #ffffff;
  --paper-2: #f7f7f8;
  --paper-3: #ececef;
  --ink: #0a0a0c;
  --ink-2: #2a2a2f;
  --ink-3: #6e6e76;
  --ink-4: #a4a4ad;
  --rule: #e6e6ea;
  --rule-soft: #f0f0f3;
  --card: #ffffff;
  --card-hover: #fafafb;

  /* Accents */
  --terracotta: #e2552a;
  --terracotta-soft: #ee8868;
  --olive: #9aa824;
  --moss: #5fa83a;
  --plum: #a64ad9;
  --ochre: #d99319;
  --teal: #1ea69e;
  --slate: #4f74d6;

  /* Semantic */
  --pos: #1f9d4d;
  --neg: #e2552a;

  /* Type */
  --font-display: "Fraunces", "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter Tight", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "IBM Plex Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
  --paper: #0a0a0b;
  --paper-2: #131316;
  --paper-3: #1d1d22;
  --ink: #f5f5f7;
  --ink-2: #d0d0d6;
  --ink-3: #8a8a93;
  --ink-4: #54545b;
  --rule: #26262c;
  --rule-soft: #1a1a1e;
  --card: #131316;
  --card-hover: #1a1a1e;

  --terracotta: #ff7a52;
  --terracotta-soft: #ee8868;
  --olive: #c1d33a;
  --moss: #7fcf5b;
  --plum: #c878f0;
  --ochre: #f0b450;
  --teal: #4dd1c8;
  --slate: #7a96e0;

  --pos: #4ec57c;
  --neg: #ff7a52;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: var(--paper);
  font-family: var(--font-ui);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="dark"] body { background: var(--paper); }

/* ===== App window — fills the Electron BrowserWindow ===== */
.mac-window {
  width: 100vw;
  height: 100vh;
  background: var(--paper);
  display: flex;
  position: relative;
  overflow: hidden;
}

/* Top drag region — lets the user move the Electron window from the empty
   space next to the native traffic-light buttons (macOS hiddenInset). */
.window-drag {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  -webkit-app-region: drag;
  z-index: 50;
  pointer-events: none;
}
.window-drag * { -webkit-app-region: no-drag; }

/* ===== Sidebar ===== */
.sidebar {
  width: 220px;
  background: var(--paper-2);
  border-right: 0.5px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding-top: 38px;
  flex-shrink: 0;
}

.sidebar-brand {
  padding: 16px 20px 20px;
  border-bottom: 0.5px solid var(--rule);
}

.sidebar-brand .mark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}
.sidebar-brand .mark-line { display: block; }

.sidebar-brand .sub {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-3);
  margin-top: 6px;
}

.sidebar-section {
  padding: 14px 20px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 20px;
  margin: 1px 8px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: default;
  position: relative;
}

.nav-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.04); }

.nav-item.active {
  background: var(--ink);
  color: var(--paper);
}

.nav-item.active .nav-glyph { color: var(--paper); }
.nav-item.active .nav-count { color: var(--paper); opacity: 0.6; }

.nav-glyph {
  width: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}

.nav-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.sidebar-footer {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 0.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.theme-toggle {
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--ink-2);
  width: 24px; height: 24px;
  border-radius: 5px;
  cursor: default;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { background: var(--paper-3); }

.sidebar-footer-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ===== Auth screen ===== */
.auth-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  font-family: var(--font-ui);
  color: var(--ink);
}
.auth-card {
  width: 360px;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.auth-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.auth-sub {
  color: var(--ink-2);
  font-size: 13px;
  margin-bottom: 8px;
}
.auth-error {
  color: #b3261e;
  font-size: 12px;
  background: rgba(179, 38, 30, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
}
.auth-demo-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12.5px;
  margin-top: 4px;
  padding: 4px;
  cursor: pointer;
  align-self: center;
}
.auth-demo-link:hover { color: var(--ink); text-decoration: underline; }

.demo-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 8px 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--terracotta) 12%, transparent);
  color: var(--terracotta);
  border: 1px solid color-mix(in srgb, var(--terracotta) 35%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.demo-pill:hover { background: color-mix(in srgb, var(--terracotta) 20%, transparent); }
.demo-pill-x { font-size: 10px; opacity: 0.7; }
.auth-loading {
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 14px;
}

/* ===== Main area ===== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
  padding-top: 38px;
}

.toolbar {
  height: 52px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--rule);
  flex-shrink: 0;
  background: var(--paper);
}

.toolbar-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.toolbar-title .month {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn {
  appearance: none;
  border: 0.5px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover { background: var(--card-hover); }
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn.primary:hover { background: var(--ink-2); }
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.btn.ghost:hover { background: var(--paper-2); }
.btn.danger {
  color: var(--neg);
  border-color: var(--rule);
}

.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-left: 4px;
}

.scrollarea {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.scrollarea::-webkit-scrollbar { width: 10px; }
.scrollarea::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 5px;
  border: 3px solid var(--paper);
  background-clip: content-box;
}

/* ===== Cards ===== */
.card {
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  padding: 18px 20px;
}

.card-title {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-section {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Numerals */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ===== Hero / Big Number ===== */
.hero {
  padding: 30px 32px 28px;
  border-bottom: 0.5px solid var(--rule);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: end;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.hero-amount {
  font-family: var(--font-display);
  font-size: 86px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hero-amount .sign { font-style: italic; font-size: 0.55em; vertical-align: 0.2em; color: var(--ink-3); margin-right: 4px; font-weight: 400; }
.hero-amount .cents { font-size: 0.4em; color: var(--ink-3); margin-left: 4px; vertical-align: 0.55em; }

.hero-amount.negative { color: var(--neg); }

.hero-meta {
  margin-top: 14px;
  display: flex;
  gap: 28px;
}

.hero-meta-item .label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.hero-meta-item .value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Flow visualization */
.flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 0.5px dashed var(--rule-soft);
}
.flow-row:last-child { border-bottom: none; }

.flow-row .label {
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.flow-row .glyph {
  font-family: var(--font-mono);
  color: var(--ink-3);
  font-size: 10px;
  width: 14px;
}

.flow-row .amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
}
.flow-row.income .amt { color: var(--pos); }
.flow-row.expense .amt { color: var(--ink); }
.flow-row.expense .amt::before { content: '−'; margin-right: 1px; opacity: 0.6; }
.flow-row.total {
  border-top: 1px solid var(--ink);
  border-bottom: none;
  margin-top: 6px;
  padding-top: 10px;
}
.flow-row.total .label { font-weight: 600; color: var(--ink); }
.flow-row.total .amt { font-size: 15px; font-weight: 600; }

/* Progress */
.progress {
  height: 6px;
  background: var(--paper-3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: var(--ink);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-bar.warn { background: var(--ochre); }
.progress-bar.over { background: var(--neg); }
.progress-bar.good { background: var(--pos); }

/* ===== Dashboard grid ===== */
.dash {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 20px 28px 32px;
}

.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ===== Tags ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 7px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--font-ui);
  letter-spacing: 0.005em;
  white-space: nowrap;
  border: 0.5px solid transparent;
}

.tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

/* ===== Transaction list ===== */
.txn {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 4px;
  border-bottom: 0.5px solid var(--rule-soft);
  font-size: 12.5px;
}
.txn:last-child { border-bottom: none; }
.txn:hover { background: var(--card-hover); }

.txn-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: left;
  letter-spacing: 0.02em;
}

.txn-merchant {
  font-weight: 500;
  color: var(--ink);
}

.txn-meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.txn-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

.txn-amount.income { color: var(--pos); }
.txn-amount.expense::before { content: '−'; opacity: 0.5; }

/* ===== Stat tiles ===== */
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat .label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-3);
}
.stat .val {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat .delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.stat .delta.up { color: var(--pos); }
.stat .delta.down { color: var(--neg); }

/* ===== Modal ===== */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 10, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
  animation: sheet-backdrop-in 220ms ease-out;
}
.modal-backdrop.closing {
  animation: sheet-backdrop-out 240ms ease-in forwards;
  pointer-events: none;
}

.modal {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  width: 460px;
  max-height: 80%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  animation: sheet-pop-in 280ms cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: center bottom;
}
.modal-backdrop.closing .modal {
  animation: sheet-pop-out 240ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/* Task modal — gentler, slower pull-in than the default sheet pop. */
.modal.task-modal {
  animation: task-sheet-pop-in 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-backdrop.closing .modal.task-modal {
  animation: task-sheet-pop-out 460ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes task-sheet-pop-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes task-sheet-pop-out {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@keyframes sheet-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sheet-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes sheet-pop-in {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes sheet-pop-out {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(20px) scale(0.98); opacity: 0; }
}

.modal-header {
  padding: 18px 22px 14px;
  border-bottom: 0.5px solid var(--rule);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.modal-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.modal-footer { padding: 14px 22px; display: flex; justify-content: flex-end; gap: 8px; border-top: 0.5px solid var(--rule); background: var(--paper-2); }

/* ===== Form ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-3);
}
.input, .select {
  appearance: none;
  background: var(--card);
  border: 0.5px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  outline: none;
  width: 100%;
}
.input:focus, .select:focus { border-color: var(--ink-2); background: var(--paper); }

.input.amount {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  padding: 12px 14px 12px 36px;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.amount-wrap { position: relative; }
.amount-wrap::before {
  content: '$';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-3);
  font-style: italic;
  pointer-events: none;
}

/* Tag picker */
.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-picker .tag {
  cursor: default;
  opacity: 0.5;
}
.tag-picker .tag.selected { opacity: 1; outline: 1px solid currentColor; outline-offset: 1px; }

/* ===== Donut ===== */
.donut-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut-center .label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.donut-center .val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Bar chart */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 180px;
  padding: 8px 0;
}
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar-stack {
  width: 100%;
  background: var(--paper-3);
  border-radius: 2px;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  min-height: 3px;
}
.bar-fill {
  background: color-mix(in oklab, var(--terracotta) 55%, var(--paper-3));
  width: 100%;
  transition: background 0.2s;
}
.bar-col .x {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.bar-col.current .bar-fill {
  background: color-mix(in oklab, var(--terracotta) 100%, #000 30%);
}
.bar-col:hover .bar-fill {
  background: color-mix(in oklab, var(--terracotta) 80%, #000 15%);
}

/* Goal card */
.goal {
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.goal.has-photo { padding-top: 0; }

.goal-emblem {
  position: absolute;
  top: -20px; right: -20px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--terracotta);
  opacity: 0.08;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}
.goal-emblem:hover { opacity: 0.18; }

.goal-photo-banner {
  display: block;
  width: calc(100% + 40px);
  margin: -18px -20px 4px;
  aspect-ratio: 5 / 4;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border-bottom: 0.5px solid var(--rule);
  transition: filter 120ms ease;
}
.goal-photo-banner:hover { filter: brightness(0.96); }

.goal-photo-picker {
  display: flex;
  align-items: center;
  gap: 12px;
}
.goal-photo-preview {
  width: 200px;
  aspect-ratio: 5 / 4;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rule);
  background: var(--paper-3);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: var(--ink-3);
  transition: border-color 120ms ease, color 120ms ease, transform 120ms ease;
  flex-shrink: 0;
}
.goal-photo-preview:hover { border-color: var(--ink-3); color: var(--ink-2); transform: scale(1.01); }
.goal-photo-preview.has-photo { border-style: solid; border-color: var(--rule); background-color: transparent; }
.goal-photo-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.goal-photo-hint {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.goal-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.goal-target {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-3);
  margin-top: 2px;
}

.goal-amt {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.goal-amt .of { color: var(--ink-3); font-size: 16px; margin-left: 4px; }

.goal-projection {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
}
.goal-projection .ok { color: var(--pos); }
.goal-projection .late { color: var(--ochre); }

/* Empty + helpers */
.divider {
  height: 0.5px;
  background: var(--rule);
  margin: 14px 0;
}

.row { display: flex; gap: 12px; }
.between { display: flex; justify-content: space-between; align-items: center; }
.gap-sm { gap: 8px; }

.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.disp { font-family: var(--font-display); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}

/* Filters bar */
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 0.5px solid var(--rule);
  background: var(--paper-2);
}
.filter-chip {
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-ui);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: default;
}
.filter-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.search-input {
  appearance: none;
  background: var(--card);
  border: 0.5px solid var(--rule);
  color: var(--ink);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  width: 200px;
  font-family: var(--font-ui);
}

/* page header */
.page-head {
  padding: 28px 28px 20px;
  border-bottom: 0.5px solid var(--rule);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.page-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.page-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 8px;
}

/* List card padding variant */
.list-card { padding: 14px 18px; }
.list-card .card-title { padding-bottom: 8px; border-bottom: 0.5px solid var(--rule-soft); margin-bottom: 4px; }

/* Section header inside content */
.section-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}

/* Month switcher — segmented pill */
.month-switcher {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  margin-left: 14px;
  height: 28px;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  overflow: visible;
}
.month-switcher::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.02);
}
.month-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  width: 26px;
  border-radius: 0;
  cursor: default;
  font-size: 13px;
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.month-btn:hover:not(:disabled) { background: var(--card); color: var(--ink); }
.month-btn:active:not(:disabled) { background: var(--paper-3); }
.month-btn:disabled { opacity: 0.25; }
.month-btn.prev { border-radius: 7.5px 0 0 7.5px; border-right: 0.5px solid var(--rule); }
.month-btn.next { border-radius: 0 7.5px 7.5px 0; border-left: 0.5px solid var(--rule); }

.month-label {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 12px;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 130px;
  justify-content: center;
  transition: background 0.12s;
}
.month-label:hover { background: var(--card); }
.month-label .caret {
  font-size: 9px;
  color: var(--ink-3);
  margin-left: 2px;
  transition: transform 0.15s;
}
.month-switcher.open .month-label .caret { transform: rotate(180deg); }

.month-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--pos);
  color: #fff;
  padding: 2px 5px 1px;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 1;
}
.month-badge.dot {
  background: transparent;
  color: var(--pos);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.month-badge.dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pos) 18%, transparent);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--pos) 18%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--pos) 6%, transparent); }
}

.month-menu-backdrop { position: fixed; inset: 0; z-index: 50; }
.month-menu {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 51;
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.12);
  min-width: 240px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 360px;
  overflow-y: auto;
}
[data-theme="dark"] .month-menu {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.6);
}
.month-menu-head {
  padding: 8px 10px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.month-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-family: var(--font-ui);
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: default;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.month-menu-item:hover { background: var(--paper-2); }
.month-menu-item.active { background: var(--ink); color: var(--paper); }
.month-menu-item.active .mm-amount { color: var(--paper); opacity: 0.85; }
.month-menu-item.active .month-badge { background: var(--paper); color: var(--ink); }
.month-menu-item.active .month-badge.dot { color: var(--paper); }
.month-menu-item.active .month-badge.dot::before { background: var(--paper); box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }
.mm-amount {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.month-menu-foot {
  padding: 8px 10px 6px;
  margin-top: 4px;
  border-top: 0.5px solid var(--rule-soft);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* tag color picker */
.color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  cursor: default;
  border: 1.5px solid transparent;
}
.color-swatch.selected { border-color: var(--ink); }

/* ===== Tag budget cards ===== */
.tag-card {
  position: relative;
  background: var(--surface);
  border: 0.5px solid var(--rule);
  border-radius: 6px;
  padding: 12px 16px 12px 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  transition: border-color 120ms ease, background 120ms ease;
}
.tag-card:hover { border-color: var(--rule-strong); }
.tag-card.over { background: color-mix(in oklab, var(--neg) 4%, var(--surface)); border-color: color-mix(in oklab, var(--neg) 24%, var(--rule)); }
.tag-card.warn { background: color-mix(in oklab, var(--ochre, #b8862b) 4%, var(--surface)); }
.tag-card.tracked { background: var(--paper-2); }

.tag-card-accent {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
}

.tag-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tag-card-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tag-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tag-card-amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kind-pill {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--rule-soft);
  color: var(--ink-3);
  font-weight: 500;
}

.tag-card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.tag-card:hover .tag-card-actions { opacity: 1; }
.tag-card-actions .icon-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 0.5px solid var(--rule);
  font-size: 14px;
  line-height: 1;
}
.tag-card-actions .icon-btn:hover { border-color: var(--rule-strong); color: var(--ink); }
.tag-card-actions .icon-btn.danger:hover { color: var(--neg); border-color: color-mix(in oklab, var(--neg) 40%, var(--rule)); }

.tag-tracked-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  border-top: 0.5px dashed var(--rule-soft);
}
.set-budget-link {
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 11px;
  color: var(--ink-2);
}
.set-budget-link:hover { color: var(--ink); text-decoration: underline; }

.tag-card.editing { background: var(--paper-2); border-color: var(--rule-strong); }
.tag-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tag-edit-row .input { flex: 1; min-width: 0; }

.tag-budget-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tag-budget-bar .bar-track {
  position: relative;
  height: 6px;
  background: var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.tag-budget-bar .bar-progress {
  height: 100%;
  border-radius: 3px;
  transition: width 240ms ease;
}
.tag-budget-bar .bar-overflow {
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--neg) 0 4px,
    color-mix(in oklab, var(--neg) 60%, transparent) 4px 8px
  );
  opacity: 0.7;
}
.tag-budget-bar .bar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tag-budget-bar .pill {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 0.5px solid var(--rule);
  color: var(--ink-2);
  background: var(--paper-2);
}
.tag-budget-bar .pill.over { color: var(--neg); border-color: color-mix(in oklab, var(--neg) 40%, var(--rule)); background: color-mix(in oklab, var(--neg) 8%, var(--surface)); }
.tag-budget-bar .pill.warn { color: var(--ochre, #b8862b); border-color: color-mix(in oklab, var(--ochre, #b8862b) 40%, var(--rule)); }
.tag-budget-bar .pill.good { color: var(--pos); border-color: color-mix(in oklab, var(--pos) 30%, var(--rule)); }
.tag-budget-bar .pill.low  { color: var(--ink-3); }

/* ===== Dashboard over-budget alert strip ===== */
.budget-alert-strip {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 0.5px solid var(--rule);
  background: var(--surface);
  font-size: 12px;
}
.alert-row.over {
  border-color: color-mix(in oklab, var(--neg) 38%, var(--rule));
  background: color-mix(in oklab, var(--neg) 5%, var(--surface));
}
.alert-row.warn {
  border-color: color-mix(in oklab, var(--ochre, #b8862b) 38%, var(--rule));
  background: color-mix(in oklab, var(--ochre, #b8862b) 5%, var(--surface));
}
.alert-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.alert-row.over .alert-icon { background: var(--neg); color: var(--paper); }
.alert-row.warn .alert-icon { background: var(--ochre, #b8862b); color: var(--paper); }
.alert-label {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.alert-tags {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.alert-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.alert-tag-chip .num.neg { color: var(--neg); font-weight: 600; }

/* ===== Expenses screen layout: rail + list ===== */
.expenses-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  align-items: stretch;
  min-height: calc(100% - 60px);
}

.filter-rail {
  border-right: 0.5px solid var(--rule);
  padding: 16px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper-2);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  position: sticky;
  top: 0;
  align-self: start;
}
.filter-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 4px;
}
.link-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--terracotta);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: default;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--ink); }

.search-input {
  appearance: none;
  border: 0.5px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  outline: none;
  width: 100%;
}
.search-input:focus { border-color: var(--ink-3); }
.search-input.small { height: 26px; font-size: 11px; }

.filter-totals {
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 7px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 6px;
}
.ft-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ft-row.sub .ft-label, .ft-row.sub .ft-val { color: var(--ink-3); font-size: 10.5px; }
.ft-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ft-val { font-size: 14px; color: var(--ink); }

.filter-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 2px;
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.filter-list.scroll {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 2px;
}

.filter-row {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: default;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  width: 100%;
}
.filter-row .fr-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-row .fr-val {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.filter-row .fr-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  background: var(--paper-3);
  border-radius: 3px;
  padding: 1px 4px;
  min-width: 16px;
  text-align: center;
}
.filter-row:hover { background: var(--card); color: var(--ink); }
.filter-row.active { background: var(--ink); color: var(--paper); }
.filter-row.active .fr-val { color: var(--paper); opacity: 0.85; }
.filter-row.active .fr-count { background: rgba(255,255,255,0.18); color: var(--paper); }
.filter-row .dot { width: 8px; height: 8px; border-radius: 50%; }

.expenses-list {
  padding: 14px 24px 28px;
  min-width: 0;
}
.list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 8px;
  border-bottom: 0.5px solid var(--rule-soft);
  margin-bottom: 4px;
}
.seg {
  appearance: none;
  border: 0.5px solid var(--rule);
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  height: 24px;
  padding: 0 10px;
  border-radius: 5px;
  cursor: default;
}
.seg.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg:hover:not(.active) { background: var(--card-hover); color: var(--ink); }

/* Segmented control (group) — used in Tags screen header + edit row + new-tag form */
.seg-sm {
  display: inline-flex;
  border: 0.5px solid var(--rule);
  background: var(--card);
  border-radius: 5px;
  overflow: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  height: 24px;
  padding: 0 10px;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-right: 0.5px solid var(--rule);
  white-space: nowrap;
}
.seg-btn:last-child { border-right: none; }
.seg-btn.active { background: var(--ink); color: var(--paper); }
.seg-btn:hover:not(.active) { background: var(--card-hover); color: var(--ink); }
.seg-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in oklab, currentColor 12%, transparent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ===== Savings screen ===== */
.savings-hero {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.savings-hero-main {
  padding: 22px 26px 24px;
  border-right: 0.5px solid var(--rule);
}
.savings-hero-amount {
  font-family: var(--font-display, var(--font-serif, serif));
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 6px 0 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.savings-hero-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.split-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.split-label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.split-amt {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.split-amt.muted { color: var(--ink-3); }
.split-bar {
  height: 4px;
  background: var(--rule-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.split-fill { height: 100%; transition: width 240ms ease; }
.split-fill.pool { background: var(--accent, var(--ink)); }
.split-fill.goals { background: color-mix(in oklab, var(--accent, var(--ink)) 60%, var(--paper-2)); }

.savings-hero-side {
  padding: 22px 22px 22px;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
}
.closeout-preview { display: flex; flex-direction: column; height: 100%; }
.closeout-amount {
  font-family: var(--font-display, var(--font-serif, serif));
  font-size: 32px;
  line-height: 1.1;
  margin: 4px 0 6px;
  font-variant-numeric: tabular-nums;
}
.closeout-preview.closed .closeout-amount {
  font-size: 24px;
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.pool-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  border-bottom: 0.5px solid var(--rule);
  padding-bottom: 8px;
}

/* Pool ledger entries */
.ledger-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px dashed var(--rule-soft);
}
.ledger-entry:last-of-type { border-bottom: none; }
.ledger-meta { min-width: 0; flex: 1; }
.ledger-kind {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
}
.ledger-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
}
.ledger-dot.closeout { background: var(--accent, var(--pos)); }
.ledger-dot.adjust { background: var(--ochre, #b8862b); }
.ledger-dot.goal-deposit { background: var(--moss, var(--pos)); }
.ledger-dot.goal-withdraw { background: var(--neg); }

.ledger-note {
  font-size: 10.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ledger-date {
  font-size: 10px;
  margin-top: 1px;
}
.ledger-amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}
.ledger-amt.pos { color: var(--pos); }
.ledger-amt.neg { color: var(--neg); }

/* Closeout modal P&L rows */
.closeout-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 0.5px dashed var(--rule-soft);
  font-size: 12px;
}
.closeout-row .label { color: var(--ink-2); }
.closeout-row .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.closeout-row .num.pos { color: var(--pos); }
.closeout-row .num.neg { color: var(--neg); }
.closeout-row.total {
  border-top: 0.5px solid var(--rule);
  border-bottom: none;
  margin-top: 6px;
  padding-top: 12px;
  font-size: 13px;
}
.closeout-row.total .label { color: var(--ink); font-weight: 500; }
.closeout-row.total .num { font-size: 16px; font-weight: 600; }

/* Pool effect preview (used in close-out + adjust modals) */
.pool-effect {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 18px 0 4px;
}
.effect-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.effect-cell .effect-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.effect-cell .effect-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.effect-cell .effect-num.strong { font-weight: 600; }
.effect-arrow {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--ink-3);
  align-self: center;
  padding: 0 14px;
}

.modal-helper {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 14px 0 0;
}

.pool-mode-seg { margin-bottom: 14px; }

.day-group { margin-top: 14px; }
.day-group.by-date {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 10px 14px 4px;
  margin-top: 12px;
}
.day-group.by-date > .between {
  border-bottom-color: var(--rule-soft) !important;
}

/* ===== Family member chip ===== */
.member-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.member-chip.mini {
  width: 16px;
  height: 16px;
  font-size: 10px;
}
.member-chip.lg {
  width: 36px;
  height: 36px;
  font-size: 18px;
}
.member-chip.xl {
  width: 56px;
  height: 56px;
  font-size: 28px;
}

/* ===== Family screen ===== */
.family-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.member-card {
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.member-card .accent-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}

/* Member picker (modals) */
.member-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.member-pick {
  appearance: none;
  border: 0.5px solid var(--rule);
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px 4px 4px;
  border-radius: 18px;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.member-pick:hover { background: var(--card-hover); }
.member-pick.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.member-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.member-card-head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.member-card-head .role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.budget-bar {
  height: 8px;
  background: var(--paper-3);
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0;
  position: relative;
}
.budget-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.budget-bar-fill.over {
  background: var(--neg) !important;
}
.budget-bar-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--ink-3);
}

/* ===== Tasks screen ===== */
.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.tasks-filter {
  display: inline-flex;
  border: 0.5px solid var(--rule);
  border-radius: 7px;
  background: var(--paper-2);
  padding: 2px;
  gap: 2px;
}
.tasks-filter-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tasks-filter-btn:hover { color: var(--ink-2); }
.tasks-filter-btn.active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 0.5px var(--rule);
}
.tasks-filter-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  background: var(--paper-3);
  border-radius: 3px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}
.tasks-filter-btn.active .tasks-filter-count {
  background: var(--paper-2);
  color: var(--ink-3);
}

.tasks-empty {
  padding: 60px 20px;
  text-align: center;
  border: 0.5px dashed var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
}
.tasks-empty-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-2);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.tasks-empty-sub {
  font-size: 12.5px;
  color: var(--ink-3);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-card {
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  transition: border-color 120ms ease, background 120ms ease;
}
.task-card:hover { border-color: var(--ink-4); }
.task-card.expanded {
  border-color: var(--ink-3);
  background: var(--paper);
  box-shadow: 0 1px 0 var(--rule-soft);
}
.task-card.done {
  background: var(--paper-2);
  opacity: 0.7;
}

.task-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.task-check {
  appearance: none;
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--ink-4);
  background: var(--paper);
  color: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background 120ms ease, border-color 120ms ease;
}
.task-check:hover { border-color: var(--ink-2); }
.task-check.on,
.task-check[aria-label]:not([aria-label="Mark done"]).on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.task-check.small { width: 15px; height: 15px; font-size: 9px; border-radius: 3px; }

.task-title-wrap {
  flex: 1;
  min-width: 0;
  cursor: default;
}

.task-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* Fraunces tuned for readability: SOFT 0 = sharp curves, WONK 0 = no alt glyphs,
     opsz 14 = text-size optical so strokes firm up at body sizes */
  font-variation-settings: 'opsz' 14, 'SOFT' 0, 'WONK' 0;
}
.task-card.done .task-title {
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
  color: var(--ink-3);
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.task-due {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 0.5px solid var(--rule);
  color: var(--ink-3);
  background: var(--paper-2);
}
.task-due.soon {
  color: var(--ochre, #b8862b);
  border-color: color-mix(in oklab, var(--ochre, #b8862b) 38%, var(--rule));
  background: color-mix(in oklab, var(--ochre, #b8862b) 8%, var(--paper-2));
}
.task-due.overdue {
  color: var(--neg);
  border-color: color-mix(in oklab, var(--neg) 38%, var(--rule));
  background: color-mix(in oklab, var(--neg) 8%, var(--paper-2));
}
.task-due.done {
  color: var(--ink-4);
  border-style: dashed;
}

.task-substat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.task-substat-bar {
  display: inline-block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--rule-soft);
  overflow: hidden;
}
.task-substat-fill {
  display: block;
  height: 100%;
  background: var(--terracotta);
  transition: width 240ms ease;
}

.task-member-chip {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 0.5px solid;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.task-member-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}

.task-group-chip {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 0.5px solid;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.task-group-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}

.task-recurrence {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 0.5px dashed var(--rule);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.recurrence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recurrence-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0.5px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 120ms ease;
}
.recurrence-btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--ink-2);
}
.recurrence-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.recurrence-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.recurrence-interval {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.recurrence-interval-label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-2);
}
.recurrence-interval-input {
  width: 64px;
  text-align: center;
}
.field-hint {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 6px;
  font-style: italic;
}

/* Priority — three-step task urgency: I (low/blue), II (med/yellow), III (high/red) */
:root {
  --prio-low:  #3b82f6;
  --prio-med:  #d4a017;
  --prio-high: #dc2626;
}
[data-theme="dark"] {
  --prio-low:  #60a5fa;
  --prio-med:  #f0b94b;
  --prio-high: #f87171;
}

.tasks-priority-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tasks-priority-chip {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 120ms ease;
}
.tasks-priority-chip:hover { color: var(--ink); border-color: var(--ink-2); }
.tasks-priority-chip .task-prio-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
}
.tasks-priority-chip.prio-low  .task-prio-dot { background: var(--prio-low); }
.tasks-priority-chip.prio-med  .task-prio-dot { background: var(--prio-med); }
.tasks-priority-chip.prio-high .task-prio-dot { background: var(--prio-high); }
.tasks-priority-chip.active.prio-low {
  background: color-mix(in srgb, var(--prio-low) 14%, transparent);
  border-color: var(--prio-low); color: var(--prio-low);
}
.tasks-priority-chip.active.prio-med {
  background: color-mix(in srgb, var(--prio-med) 14%, transparent);
  border-color: var(--prio-med); color: var(--prio-med);
}
.tasks-priority-chip.active.prio-high {
  background: color-mix(in srgb, var(--prio-high) 14%, transparent);
  border-color: var(--prio-high); color: var(--prio-high);
}
.tasks-priority-chip.active:not([class*="prio-"]),
.tasks-priority-chip.active:not(.prio-low):not(.prio-med):not(.prio-high) {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* Priority chip on each task card */
.task-prio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  border: 1px solid;
}
.task-prio.prio-low  { color: var(--prio-low);  border-color: color-mix(in srgb, var(--prio-low)  45%, transparent); background: color-mix(in srgb, var(--prio-low)  10%, transparent); }
.task-prio.prio-med  { color: var(--prio-med);  border-color: color-mix(in srgb, var(--prio-med)  45%, transparent); background: color-mix(in srgb, var(--prio-med)  10%, transparent); }
.task-prio.prio-high { color: var(--prio-high); border-color: color-mix(in srgb, var(--prio-high) 45%, transparent); background: color-mix(in srgb, var(--prio-high) 10%, transparent); }

/* Subtle left border on the card itself, matching priority */
.task-card.prio-low  { box-shadow: inset 3px 0 0 var(--prio-low); }
.task-card.prio-med  { box-shadow: inset 3px 0 0 var(--prio-med); }
.task-card.prio-high { box-shadow: inset 3px 0 0 var(--prio-high); }
.task-card.done.prio-low,
.task-card.done.prio-med,
.task-card.done.prio-high { box-shadow: none; }

/* Modal — segmented priority picker */
.priority-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.priority-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--ink-2);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.priority-btn:hover { background: var(--paper-3); }
.priority-btn-num {
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.10em;
  font-weight: 600;
}
.priority-btn-hint {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.priority-btn.active.prio-low {
  border-color: var(--prio-low); color: var(--prio-low);
  background: color-mix(in srgb, var(--prio-low) 12%, transparent);
}
.priority-btn.active.prio-med {
  border-color: var(--prio-med); color: var(--prio-med);
  background: color-mix(in srgb, var(--prio-med) 12%, transparent);
}
.priority-btn.active.prio-high {
  border-color: var(--prio-high); color: var(--prio-high);
  background: color-mix(in srgb, var(--prio-high) 12%, transparent);
}
.priority-btn.active .priority-btn-hint { color: inherit; opacity: 0.85; }

.tasks-group-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.tasks-group-chip {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 120ms ease;
}
.tasks-group-chip:hover { color: var(--ink); border-color: var(--ink-2); }
.tasks-group-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tasks-group-chip-x {
  font-size: 13px;
  line-height: 1;
  opacity: 0.5;
  margin-left: 2px;
  padding: 0 2px;
  border-radius: 4px;
}
.tasks-group-chip-x:hover { opacity: 1; color: var(--berry); }

.task-group-create {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-group-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.task-group-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 120ms ease, border-color 120ms ease;
}
.task-group-swatch:hover { transform: scale(1.08); }
.task-group-swatch.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--surface) inset;
}

.task-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.task-card:hover .task-card-actions,
.task-card.expanded .task-card-actions { opacity: 1; }

.task-card-actions .icon-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-3);
  cursor: default;
}
.task-card-actions .icon-btn:hover { background: var(--paper-2); border-color: var(--rule); color: var(--ink); }
.task-card-actions .icon-btn.danger:hover { color: var(--neg); border-color: color-mix(in oklab, var(--neg) 40%, var(--rule)); }

.task-card-body {
  border-top: 0.5px solid var(--rule);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-note {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: 5px;
  border-left: 2px solid var(--rule);
}

.subtask-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subtask-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  transition: background 120ms ease;
}
.subtask-row:hover { background: var(--paper-2); }
.subtask-row .icon-btn {
  width: 20px; height: 20px;
  padding: 0;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 4px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1;
  cursor: default;
  opacity: 0;
  transition: opacity 120ms ease;
  margin-left: 4px;
}
.subtask-row:hover .icon-btn { opacity: 1; }
.subtask-row .icon-btn.danger:hover { color: var(--neg); }

.subtask-title {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
}
.subtask-row.done .subtask-title {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
}

.add-subtask {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 8px;
  padding-top: 4px;
  border-top: 0.5px dashed var(--rule);
}
.add-subtask .input,
.add-subtask .select { font-size: 12.5px; padding: 6px 9px; }

/* ===== Mobile nav primitives (always present, hidden on desktop) ===== */
.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border: 0.5px solid var(--rule);
  background: var(--paper-2);
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  margin-right: 12px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}
.sidebar-backdrop { display: none; }

/* ===== Floating action button (mobile only) ===== */
.fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  z-index: 90;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
  cursor: pointer;
}
.fab:active { transform: translateY(1px); }

/* ===== Goals layout helpers (used by GoalsScreen) ===== */
.goals-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}
.goals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.pool-ledger-card { position: sticky; top: 0; }

/* ===== Meals screen ===== */
.meals-body {
  padding: 22px 28px 32px;
  max-width: 1080px;
}
.meals-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 22px;
  padding: 0;
}
.meals-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.meals-tab:hover { color: var(--ink-2); }
.meals-tab.active {
  color: var(--ink);
  border-bottom-color: var(--terracotta);
}

.meals-filter-row {
  margin-bottom: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.empty-state {
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: 36px 24px;
  text-align: center;
  background: var(--paper-2);
  margin-top: 8px;
}
.empty-state .eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.empty-state p { font-size: 13px; max-width: 380px; margin: 6px auto 16px; }
.empty-state .btn { margin-top: 4px; }

/* Recipe cards */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.recipe-card {
  appearance: none;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recipe-card:hover {
  border-color: var(--ink-4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.recipe-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.recipe-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.recipe-meal-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.meal-chip {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 3px 8px;
  border-radius: 999px;
}
.recipe-tag-chip {
  font-size: 11px;
  color: var(--pos);
  background: rgba(79, 116, 214, 0.10);
  border: 1px solid rgba(79, 116, 214, 0.32);
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.recipe-tag-chip.editable { padding-right: 4px; }
.recipe-tag-x {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--pos);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 50%;
  opacity: 0.7;
}
.recipe-tag-x:hover { opacity: 1; }
[data-theme="dark"] .recipe-tag-chip {
  background: rgba(122, 150, 224, 0.16);
  border-color: rgba(122, 150, 224, 0.40);
}
[data-theme="dark"] .recipe-tag-chip,
[data-theme="dark"] .recipe-tag-x { color: var(--pos); }

/* Tag chip-input */
.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  min-height: 36px;
}
.tag-input-wrap:focus-within { border-color: var(--ink-3); }
.tag-input {
  appearance: none;
  border: 0;
  background: transparent;
  outline: 0;
  flex: 1;
  min-width: 120px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  padding: 4px 2px;
}
.tag-input::placeholder { color: var(--ink-4); }
.tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.tag-suggestion {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--rule);
  color: var(--ink-3);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: color 0.12s, border-color 0.12s;
}
.tag-suggestion:hover { color: var(--terracotta); border-color: var(--terracotta); }
.recipe-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 10px;
  margin-top: 2px;
}
.recipe-meta-cell .eyebrow {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.recipe-meta-cell .num {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
}
.recipe-pantry-cost {
  font-size: 11px;
  color: var(--moss, #5fa83a);
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.recipe-pantry-cost .muted {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.recipe-note {
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid var(--rule-soft);
  padding-top: 8px;
  line-height: 1.4;
}

/* Tier badges */
.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  border: 1px solid;
  flex-shrink: 0;
}
.tier-badge.tier-0 {
  background: rgba(95, 168, 58, 0.10);
  color: #4d8c2f;
  border-color: rgba(95, 168, 58, 0.35);
}
.tier-badge.tier-1 {
  background: rgba(217, 147, 25, 0.10);
  color: #b07a14;
  border-color: rgba(217, 147, 25, 0.35);
}
.tier-badge.tier-2 {
  background: rgba(226, 85, 42, 0.10);
  color: var(--terracotta);
  border-color: rgba(226, 85, 42, 0.40);
}
[data-theme="dark"] .tier-badge.tier-0 { color: #8bcc6a; }
[data-theme="dark"] .tier-badge.tier-1 { color: #e0b454; }
[data-theme="dark"] .tier-badge.tier-2 { color: var(--terracotta-soft); }

/* Plan tab */
.plan-week-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.plan-week-label { line-height: 1.2; }
.plan-week-label .eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan-week-label .display {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.plan-summary {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 16px;
  padding-left: 4px;
}
.plan-summary b { color: var(--ink); font-weight: 600; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.plan-day {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.plan-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-soft);
}
.plan-day-head .display {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.plan-day-head .mono {
  font-size: 10.5px;
  color: var(--ink-3);
}
.plan-slot {
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: border-color 0.12s, background 0.12s;
}
.plan-slot.filled { background: var(--paper); border-color: var(--rule); }
.plan-slot-label {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Highlight today's column in the week grid — soft moss tint. */
.plan-day.today {
  background: rgba(95, 168, 58, 0.06);
  border-color: rgba(95, 168, 58, 0.32);
  box-shadow: inset 0 2px 0 rgba(95, 168, 58, 0.55);
}
.plan-day.today .plan-day-head { border-bottom-color: rgba(95, 168, 58, 0.30); }
.plan-day.today .plan-day-head .display { color: var(--moss, #5fa83a); }

/* A single planned dish within a slot — supports an optional family-member badge. */
.plan-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--paper-2);
  min-width: 0;
}
.plan-entry-member {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 600;
  font-family: var(--font-ui);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.plan-entry-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.plan-entry-cost { font-size: 10.5px; }
.plan-entry-x {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-4);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.plan-entry-x:hover { color: var(--neg, #c4321b); background: var(--paper-3); }

.plan-slot-add {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-4);
  text-align: left;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.plan-slot-add:hover {
  color: var(--ink);
  border-color: var(--ink-4);
  background: var(--paper-3);
}
.plan-slot.filled .plan-slot-add { font-size: 10.5px; padding: 3px 6px; }

/* Dining-out plan entry */
.plan-entry.dining-out {
  background: rgba(232, 158, 70, 0.10);
  border-color: rgba(232, 158, 70, 0.32);
}
[data-theme="dark"] .plan-entry.dining-out {
  background: rgba(232, 158, 70, 0.14);
  border-color: rgba(232, 158, 70, 0.32);
}
.plan-entry.dining-out .plan-entry-name {
  font-style: italic;
  color: var(--ink-2);
}
.plan-entry-glyph {
  display: inline-block;
  margin-right: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #c87b2e;
  font-style: normal;
}

/* Picker mode toggle (Cook a recipe / Dining out) */
.picker-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.picker-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.picker-mode:hover { border-color: var(--ink-4); }
.picker-mode.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.picker-mode-glyph {
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0.85;
}

/* Plan — read view (locked / presentation) */
.plan-read-hero {
  display: flex;
  gap: 36px;
  padding: 22px 24px;
  margin: 14px 0 18px;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 12px;
}
.plan-read-hero-stat .display {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  margin-top: 4px;
  color: var(--ink);
}
.plan-read-days {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-read-day {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 12px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: start;
}
.plan-read-day.today {
  background: rgba(95, 168, 58, 0.05);
  border-color: rgba(95, 168, 58, 0.30);
  box-shadow: inset 4px 0 0 rgba(95, 168, 58, 0.55);
}
.plan-read-day.empty { opacity: 0.65; }
.plan-read-day-head .display {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
}
.plan-read-day-head .mono {
  font-size: 11px;
  margin-top: 4px;
  letter-spacing: 0.05em;
}
.plan-read-empty {
  padding: 6px 0;
  font-size: 13px;
  font-style: italic;
}
.plan-read-meals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-read-meal {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 0.5px dashed var(--rule);
}
.plan-read-meal:last-child { border-bottom: 0; padding-bottom: 0; }
.plan-read-meal-type { padding-top: 4px; }
.plan-read-meal-title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}
.plan-read-meal.dining-out .plan-read-meal-title {
  font-style: italic;
  color: var(--ink-2);
}
.plan-read-glyph {
  display: inline-block;
  margin-right: 6px;
  color: #c87b2e;
  font-family: var(--font-mono);
}
.plan-read-dining-label { font-style: italic; }
.plan-read-dining-note {
  margin-left: 6px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-2);
}
.plan-read-meal-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
}
.plan-read-member {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
}
.plan-read-member .member-chip {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

@media (max-width: 1024px) {
  .plan-read-day {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
  }
  .plan-read-meal {
    grid-template-columns: 70px 1fr;
    gap: 12px;
  }
  .plan-read-hero {
    gap: 22px;
    padding: 16px 18px;
  }
  .plan-read-hero-stat .display { font-size: 22px; }
}

/* Picker row — show recipe tags inline as small chips */
.picker-tags {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: 1px;
}
.picker-tag {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink-3);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* Recipe picker */
.picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  max-height: 50vh;
  overflow-y: auto;
}
.picker-row {
  appearance: none;
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.picker-row:hover { background: var(--paper-3); border-color: var(--rule); }
.picker-row.current {
  border-color: var(--terracotta);
  background: rgba(226, 85, 42, 0.05);
}
.picker-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shopping summary */
.shopping-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
  margin-bottom: 18px;
}
.shopping-summary .eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.shopping-summary .display {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}

.shop-row {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 10px 0;
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
}
.shop-row:last-child { border-bottom: 0; }
.shop-row:hover { background: var(--paper-2); }
.shop-row.checked { opacity: 0.45; text-decoration: line-through; }
.shop-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--terracotta);
  background: var(--paper);
}
.shop-row.checked .shop-check {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
}
.shop-name { font-size: 13.5px; color: var(--ink); }
.shop-qty { font-size: 12px; }
.shop-cost { font-size: 12px; }

/* Pantry */
.pantry-add-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pantry-add-row > .input { flex: 1 1 200px; width: auto; min-width: 160px; }
.pantry-add-row > .select { flex: 0 0 auto; width: auto; min-width: 160px; }
.pantry-add-cat-btn {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 38px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  min-width: 160px;
  justify-content: space-between;
  transition: background 0.12s, border-color 0.12s;
}
.pantry-add-cat-btn:hover { background: var(--paper-3); border-color: var(--ink-4); }
.pantry-add-cat-caret { color: var(--ink-3); font-size: 11px; }
.pantry-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 18px;
}
.pantry-search {
  width: 100%;
}
.pantry-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pantry-filter {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pantry-filter .num { font-size: 11px; }
.pantry-filter:hover { border-color: var(--ink-4); color: var(--ink); }
.pantry-filter.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.pantry-filter.active .muted { color: rgba(255,255,255,0.55); }
.pantry-filter.low { color: var(--terracotta); border-color: rgba(226, 85, 42, 0.30); }
.pantry-filter.low.active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
}

.pantry-section {
  margin-bottom: 22px;
}
.pantry-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 10px;
}
.pantry-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ink);
}

.pantry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.pantry-chip {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink-2);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  min-width: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pantry-chip:hover { background: var(--paper-3); border-color: var(--ink-4); }
.pantry-chip:active { transform: scale(0.985); }
.pantry-chip:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.pantry-chip .pantry-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--ink);
  font-weight: 500;
}
.pantry-cat-tag {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink-3);
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.pantry-cat-tag:hover { color: var(--ink); border-color: var(--ink-4); }
.pantry-cat-tag:active { transform: scale(0.95); }

.pantry-cat-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pantry-cat-option {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.pantry-cat-option:hover { background: var(--paper-3); border-color: var(--ink-4); }
.pantry-cat-option:active { transform: scale(0.98); }
.pantry-cat-option.selected {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
}
.pantry-cat-option-label { font-weight: 500; }
.pantry-cat-option-check { font-weight: 700; }

@media (max-width: 640px) {
  .pantry-cat-picker { grid-template-columns: 1fr; }
}
.pantry-chip.low {
  background: rgba(226, 85, 42, 0.08);
  border-color: rgba(226, 85, 42, 0.40);
  color: var(--terracotta);
}
[data-theme="dark"] .pantry-chip.low { color: var(--terracotta-soft); }
.pantry-low-toggle {
  background: var(--paper);
  border: 1px solid var(--rule);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-weight: 600;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  pointer-events: none;
}
.pantry-chip.low .pantry-low-toggle {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
}
.pantry-x {
  appearance: none;
  background: transparent;
  border: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.pantry-x:hover { background: var(--paper-3); color: var(--ink); }
.pantry-chip.low .pantry-x { color: var(--terracotta); opacity: 0.6; }
.pantry-chip.low .pantry-x:hover { opacity: 1; background: rgba(226, 85, 42, 0.15); }

.pantry-low-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(226, 85, 42, 0.06);
  border: 1px solid rgba(226, 85, 42, 0.28);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.pantry-low-banner .eyebrow {
  color: var(--terracotta);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.shop-row.from-pantry .shop-name { color: var(--terracotta); }
[data-theme="dark"] .shop-row.from-pantry .shop-name { color: var(--terracotta-soft); }
.shop-pantry-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(226, 85, 42, 0.12);
  border: 1px solid rgba(226, 85, 42, 0.32);
  color: var(--terracotta);
  vertical-align: 1px;
}

/* Recipe modal — ingredient grid */
.ingredient-list { margin-top: 8px; }
.ingredient-row {
  display: grid;
  grid-template-columns: 1fr 60px 70px 80px 28px 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
/* Soft visual cue when an ingredient name matches an in-stock pantry item — informational only. */
.ingredient-row.in-pantry-now > .input { opacity: 0.65; }
.ingredient-row.in-pantry-now .ing-name {
  font-style: italic;
  color: var(--ink-3);
}
.ingredient-row .input { font-size: 12.5px; padding: 7px 9px; }
.ingredient-row .ing-qty,
.ingredient-row .ing-cost { text-align: right; font-family: var(--font-ui); }
.ing-remove,
.ing-flag {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.ing-remove { font-size: 16px; }
.ing-remove:hover { color: var(--neg, #c4321b); border-color: var(--neg, #c4321b); }
.ing-flag:hover { color: var(--ink); border-color: var(--ink-4); }
.ing-flag.on {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
}

.ingredient-bulk-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-top: 2px;
  background: rgba(226, 85, 42, 0.05);
  border: 1px dashed rgba(226, 85, 42, 0.30);
  border-radius: 6px;
}
.ingredient-bulk-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  white-space: nowrap;
}
.ingredient-bulk-row .input { flex: 1; font-size: 12.5px; padding: 5px 9px; }
.ingredient-bulk-hint { font-size: 11px; white-space: nowrap; }

.ingredient-pantry-hint {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  margin-top: 2px;
}
.link-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--terracotta);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { opacity: 0.75; }

.shop-row.has-bulk .shop-name { color: var(--ink); }

/* Manual-add row + clear-checked controls */
.shop-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}
.shop-extra-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.shop-row.checked .shop-extra-tag { opacity: 0.6; }

/* Dashboard — tasks card */
.dash-task-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 4px;
  border-bottom: 0.5px dashed var(--rule);
  margin-bottom: 4px;
}
.dash-task-filter-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.dash-task-filter-btn:hover { color: var(--ink); border-color: var(--ink-4); }
.dash-task-filter-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.dash-task-filter-count {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
}
.dash-task-filter-btn.active .dash-task-filter-count { opacity: 0.85; }

.dash-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px dashed var(--rule);
  font-size: 13px;
}
.dash-task-row:last-child { border-bottom: 0; }
.dash-task-title-btn {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-task-title-btn:hover { color: var(--terracotta); }
.dash-task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dash-task-member {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
}
.shop-bulk-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-3);
  vertical-align: 1px;
}
.recipe-modal { max-width: 640px; }

/* Generous textarea for cooking instructions — readable while glancing at it. */
.recipe-instructions-input {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  min-height: 120px;
}

/* ── Recipe view (read-only) ───────────────────────────── */
.recipe-view { max-width: 640px; }
.recipe-view .modal-header { gap: 6px; }
.recipe-view-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.recipe-view-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 18px;
}
.recipe-view-meta .eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.recipe-view-meta .display {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.recipe-view-section { margin-bottom: 22px; }
.recipe-view-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-soft);
}
.recipe-view-ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recipe-view-ingredient {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed var(--rule-soft);
  font-size: 13px;
}
.recipe-view-ingredient:last-child { border-bottom: 0; }
.recipe-view-ing-qty { font-size: 11.5px; }
.recipe-view-ing-name { color: var(--ink); }
.recipe-view-ing-cost { font-size: 11.5px; }

/* The reading experience for instructions — Fraunces, generous leading. */
.recipe-view-instructions {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 4px 2px;
}
.recipe-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-top: 10px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.recipe-total-bar .eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.recipe-total-bar .num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
}

/* ===== Mobile + tablet (iPad portrait) breakpoint ===== */
@media (max-width: 1024px) {
  html, body, #root { overflow: auto; height: auto; min-height: 100%; }

  .mac-window {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    flex-direction: column;
    overflow: visible;
  }

  .window-drag { display: none; }

  /* ─── Sidebar drawer ─── */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 80vw;
    max-width: 300px;
    z-index: 1100;
    padding-top: 16px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 32px rgba(0,0,0,0.18);
    overflow-y: auto;
  }
  .mobile-nav-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20, 16, 10, 0.4);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .mobile-nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  .main { padding-top: 0; width: 100%; overflow: visible; }
  .hamburger { display: flex; }

  /* ─── Toolbar: month switcher only (page-head h1 carries the title) ─── */
  .toolbar {
    height: auto;
    min-height: 52px;
    padding: 8px 14px;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
  }
  .toolbar-title {
    flex: 1;
    min-width: 0;
    gap: 0;
    justify-content: flex-end;
  }
  .toolbar-title-text { display: none; }            /* redundant with page-head h1 */
  .toolbar-actions { display: none; }                /* "+ New expense" moved to FAB */
  .month-switcher { font-size: 13px; }
  .month-label { padding: 6px 10px; font-size: 13px; }

  .scrollarea {
    padding: 14px 14px 96px !important;              /* bottom pad for FAB */
    overflow: visible;
  }

  /* ─── Floating action button ─── */
  .fab { display: flex; }

  /* ─── Modals: bottom sheets with drag handle ─── */
  .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    height: 100% !important;
    align-items: flex-end;
    padding: 0;
    overflow: hidden;
  }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding-top: 8px;
    position: relative;
    animation: sheet-slide-up 340ms cubic-bezier(0.32, 0.72, 0, 1);
    transform-origin: bottom center;
  }
  .modal-backdrop.closing .modal {
    animation: sheet-slide-down 280ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  .modal.task-modal {
    animation: task-sheet-slide-up 760ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .modal-backdrop.closing .modal.task-modal {
    animation: task-sheet-slide-down 460ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
  }
  @keyframes task-sheet-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  @keyframes task-sheet-slide-down {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
  }
  .modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--ink-3);
    opacity: 0.35;
    margin: 4px auto 8px;
  }
  @keyframes sheet-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  @keyframes sheet-slide-down {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
  }
  .modal-header { padding: 6px 18px 12px; }
  .modal-title { font-size: 20px; }
  .modal-body { padding: 14px 16px; gap: 12px; }
  .modal-footer {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--paper);
    position: sticky;
    bottom: 0;
  }
  .modal-footer .btn { flex: 1; justify-content: center; }
  .modal-footer .btn.danger { flex: 0 0 auto; }

  /* Tweaks panel hidden on mobile */
  .tweaks-panel, .tweaks-toggle { display: none !important; }

  /* ─── Tap targets ─── */
  .nav-item { padding: 12px 20px; }
  .btn { min-height: 38px; }
  .input, .select { font-size: 16px; padding: 11px 12px; }

  /* ─── Dash grid: stack ─── */
  .dash {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 {
    grid-column: span 1 !important;
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

  /* ─── Hero ─── */
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;  /* prevent intrinsic-content overflow */
    gap: 14px !important;
    padding: 18px !important;
  }
  .hero > * { min-width: 0; }
  .hero-eyebrow { font-size: 10px; }
  .hero-amount { font-size: 56px !important; line-height: 1; }
  .hero-amount .sign { font-size: 0.45em; }
  .hero-amount .cents { font-size: 0.32em; }
  .hero-meta {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    margin-top: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .hero-meta::-webkit-scrollbar { display: none; }
  .hero-meta-item {
    flex: 0 0 auto;
    min-width: 110px;
    padding: 10px 12px;
    border: 0.5px solid var(--rule);
    border-radius: 10px;
    background: var(--paper-2);
    scroll-snap-align: start;
  }
  .hero-meta-item .label { font-size: 9px; }
  .hero-meta-item .value { font-size: 17px; margin-top: 4px; }

  .flow {
    margin: 0 !important;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .flow-row .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .flow-row { padding: 8px 0; gap: 10px; }
  .flow-row .label { font-size: 12.5px; min-width: 0; flex: 1; }
  .flow-row .amt { font-size: 13.5px; flex-shrink: 0; }
  .flow-row.total .amt { font-size: 17px; }

  .budget-alert-strip { padding: 12px !important; }
  .alert-row { flex-wrap: wrap; gap: 6px; }
  .alert-tags { width: 100%; flex-wrap: wrap; }

  /* ─── Card sections ─── */
  .card { padding: 16px !important; }
  .card-section { font-size: 12px; }

  /* "By tag" donut: stack donut over legend */
  .card.col-5 > div[style*="grid-template-columns: 180px"],
  .card.col-5 > div[style*="180px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    justify-items: center;
  }

  /* Recent expenses inline "+ Add expense" link redundant with FAB */
  .card.list-card .card-section .btn { display: none; }

  /* Transaction rows: date above merchant, amount on right */
  .txn {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 14px 0;
    align-items: start;
  }
  .txn-date {
    grid-row: 1; grid-column: 1;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .txn > div:nth-child(2) {                           /* merchant block */
    grid-row: 2; grid-column: 1;
  }
  .txn-merchant { font-size: 15px; }
  .txn-meta { gap: 6px; flex-wrap: wrap; }
  .txn-amount {
    grid-row: 1 / 3; grid-column: 2;
    align-self: center;
    font-size: 16px;
    font-weight: 500;
  }
  /* hide inline edit/delete row on the expenses list (long-press / swipe could replace later) */
  .txn .row.gap-sm { display: none; }

  /* Fixed-cost rows: drop the inline "remove" button + redundant frequency suffix + lone day-of-month */
  .txn.fixed-row > button.btn.ghost { display: none; }
  .txn.fixed-row .txn-meta .muted { display: none; }
  .txn.fixed-row .txn-date { display: none; }
  .txn.fixed-row { grid-template-columns: 1fr auto !important; padding: 12px 0; }
  .txn.fixed-row > div:nth-child(2) { grid-row: 1; grid-column: 1; }
  .txn.fixed-row .txn-amount { grid-row: 1; grid-column: 2; align-self: center; }

  /* When grouped by date, the per-row date is redundant with the day header */
  .day-group.by-date .txn .txn-date { display: none; }
  .day-group.by-date .txn { grid-template-columns: 1fr auto !important; }
  .day-group.by-date .txn > div:nth-child(2) { grid-row: 1; grid-column: 1; }
  .day-group.by-date .txn .txn-amount { grid-row: 1; grid-column: 2; }

  /* ─── Page heads ─── */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-bottom: 12px;
    margin-bottom: 0;
    margin-top: -8px;          /* tighten gap from sticky toolbar */
  }
  .page-title { font-size: 26px !important; line-height: 1.1; }
  .page-sub { font-size: 10px !important; letter-spacing: 0.06em; }
  .page-head .row.gap-sm { display: none; }            /* hide "+ New" — FAB covers it */

  .expenses-layout {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .filter-rail {
    border-right: 0 !important;
    border-bottom: 0.5px solid var(--rule);
    position: static !important;
    max-height: none !important;
    padding: 12px !important;
  }
  .filter-rail .filter-list.scroll { max-height: 220px; }

  .expenses-list { padding: 0 !important; }
  .list-toolbar { flex-wrap: wrap; gap: 6px; padding: 12px 0 8px; }

  /* Filter rail: hide redundant totals card on mobile (eyebrow shows total) */
  .filter-totals { display: none !important; }
  .filter-rail .filter-row { padding: 8px 10px !important; font-size: 13px; }
  .filter-rail .fr-val { font-size: 11.5px; }

  /* Generic helper */
  .hide-mobile { display: none !important; }

  .day-group { margin-top: 6px; }

  /* ─── Goals screen ─── */
  .goals-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 16px !important;
  }
  .goals-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .pool-ledger-card { position: static !important; }

  .goal { padding: 16px !important; }
  .goal-photo-banner { aspect-ratio: 16 / 9 !important; }
  .goal-name { font-size: 18px; }
  .goal-amt { font-size: 22px; }
  .goal .row.gap-sm { flex-wrap: wrap; gap: 8px !important; }
  .goal .row.gap-sm .btn { flex: 1 1 auto; min-width: 0; }

  /* Savings hero card */
  .savings-hero {
    grid-template-columns: 1fr !important;
  }
  .savings-hero-main { padding: 18px !important; border-right: 0 !important; border-bottom: 0.5px solid var(--rule); }
  .savings-hero-side { padding: 16px 18px !important; }
  .savings-hero-amount { font-size: 44px !important; margin: 4px 0 16px !important; }
  .savings-hero-split {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .savings-hero-split .split-cell:nth-child(3) {
    grid-column: span 2;
  }
  .split-amt { font-size: 18px; }
  .closeout-amount { font-size: 26px !important; }

  /* Pool action buttons row */
  .pool-actions, .pool-mode-seg { flex-wrap: wrap; gap: 8px !important; }
  .pool-actions .btn, .pool-mode-seg .btn { flex: 1 1 auto; min-width: 0; }

  /* ─── Auth screen ─── */
  .auth-card { width: calc(100% - 32px); margin: 16px; }

  /* ─── Section heads ─── */
  .section-head { font-size: 12px; }

  /* Family member chip slightly larger */
  .member-chip.mini { font-size: 10px; }

  /* Forms: stack horizontal rows */
  .row.gap-sm { flex-wrap: wrap; }
  .row.gap-sm > .field { flex: 1 1 100% !important; min-width: 0; }

  /* ─── Meals screen ─── */
  .meals-body { padding: 16px 16px 28px; }
  .meals-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .meals-tabs::-webkit-scrollbar { display: none; }
  .meals-tab { flex: 0 0 auto; padding: 8px 12px; font-size: 12.5px; }

  .meals-filter-row {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .meals-filter-row::-webkit-scrollbar { display: none; }
  .meals-filter-row > * { flex: 0 0 auto; }

  .recipe-grid { grid-template-columns: 1fr; }

  .plan-week-bar { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .plan-week-bar .btn { flex: 0 0 auto; }
  .plan-week-label { flex: 1 1 auto; min-width: 0; }
  .plan-week-label .display { font-size: 16px; }

  /* Plan: switch to vertical stack on phone */
  .plan-grid { grid-template-columns: 1fr; }
  .plan-day {
    display: grid;
    grid-template-columns: 70px 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px;
    align-items: stretch;
  }
  .plan-day-head {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    gap: 2px;
  }
  .plan-slot { padding: 6px 8px; min-height: 50px; }

  .shopping-summary {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 14px;
  }
  .shopping-summary > *:nth-child(3) { grid-column: span 2; }
  .shopping-summary .display { font-size: 20px; }

  .shop-row {
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    padding: 12px 0;
  }
  .shop-row .shop-cost { display: none; }
  .shop-row .shop-qty { font-size: 11.5px; }

  /* Recipe modal — collapse to stacked rows */
  .ingredient-row {
    grid-template-columns: 1fr 1fr 32px;
    gap: 6px;
    padding: 10px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .ingredient-row .ing-name   { grid-column: 1 / 3; grid-row: 1; }
  .ingredient-row .ing-remove { grid-column: 3 / 4; grid-row: 1; }
  .ingredient-row .ing-qty    { grid-column: 1 / 2; grid-row: 2; }
  .ingredient-row .ing-unit   { grid-column: 2 / 4; grid-row: 2; }
  .ingredient-row .ing-cost   { grid-column: 1 / 3; grid-row: 3; }
  .ingredient-row .ing-flag   { grid-column: 3 / 4; grid-row: 3; }
  .ingredient-row .ingredient-bulk-row,
  .ingredient-row .ingredient-pantry-hint { grid-column: 1 / 4; }
  .ingredient-bulk-row { flex-wrap: wrap; }
}