/* ============================================================
   THE ZALKINDS — design tokens
   Every colour, space and size used in this file resolves here.
   Nothing below should hardcode a hex.
   ============================================================ */
:root {
  /* surfaces & ink — warm home palette */
  --bg: #f6f2ea; --card: #fffdf8; --sunken: #f3ede3; --raised: #fbf7f0;
  --ink: #2a2521; --ink-2: #5e554c; --muted: #938879; --line: #e7dfd2; --line-2: #d8cebe;

  /* brand */
  /* deep sienna: the terracotta grown up (direction A) */
  --accent: #9c4424; --accent-dark: #7f3519; --accent-ink: #fff; --accent-soft: #f3e4d9;

  /* semantic — money and state. Separate from the accent on purpose. */
  --pos: #34774a; --pos-soft: #e6f2e8; --pos-line: #cfe6d4;
  --neg: #b23c2c; --neg-soft: #fceae7; --neg-line: #f0d2cb;
  --warn: #8a6100; --warn-soft: #fff3d6; --warn-dot: #c9a227;
  --info-dot: var(--bar-mute);
  /* callouts: the commitment card and the "remember" note (values from before the
     token refactor, which referenced these without defining them) */
  --highlight: #f8ede4; --highlight-line: #ebd6c7;
  --note: #fff8e6; --note-line: #f3e3ad;
  --green: #5c9e6a; --yellow: #e0ad4b; --red: #d66a58; --grey: #d6cdbe;

  /* fills */
  --chip: #efe8dc; --track: #eae2d4; --bar-neg: #d08b6f; --bar-mute: #cbb79b;

  /* space — 4px base. Use these, not magic numbers. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px;

  /* type */
  --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-base: 14px; --t-lg: 16px; --t-xl: 19px;
  /* Frank Ruhl Libre: a serif drawn for Hebrew and Latin together. Hebrew text falls
     through Plex Sans (no Hebrew glyphs) to Assistant — soft, humanist; Michael found
     Plex Sans Hebrew too square (2026-09-24). */
  --serif: "Frank Ruhl Libre", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* shape */
  --radius: 12px; --r-sm: 6px; --r-md: 9px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(70,55,35,.04);

  /* one row rhythm for every list in the app */
  --row-y: 10px;
  --tap: 40px;                       /* minimum comfortable touch target */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* tab panels: beats #week { display: grid } */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }
.wrap { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; }
.wrap.wide { max-width: 960px; }
/* week views (schedule + classes): wider + shorter — days flow into columns */
#week { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
#week > .add { grid-column: 1 / -1; }
#week .card { margin-bottom: 0; }
/* compact day: collapsed summary you can scan; tap to open the editor */
details.day { padding: 0; overflow: hidden; }
details.day > .daysum { list-style: none; cursor: pointer; padding: 13px 16px; display: block; }
details.day > .daysum::-webkit-details-marker { display: none; }
.daysum-head { display: flex; align-items: center; gap: 8px; }
.daysum-name { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.card h2.dayname { font-family: var(--serif); font-size: var(--t-xl); }   /* Classes matches Schedule */
.today-dot { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent);
  padding: 1px 7px; border-radius: 999px; vertical-align: 2px; }
.daysum-tags { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.daysum-tags .tag { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--chip);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.daysum-tags .tag.sit { color: var(--accent-dark); background: var(--accent-soft); }
.daysum-tags .tag.heart { background: transparent; padding: 2px 0; }
.daysum-chev { margin-left: auto; color: var(--muted); font-size: 20px; transition: transform .15s; }
details.day[open] > .daysum > .daysum-head > .daysum-chev { transform: rotate(90deg); }
.daysum-ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.daysum-ev .evchip { font-size: 13px; color: var(--ink); background: var(--raised); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 8px; }
.daysum-ev .evchip b { color: var(--accent); font-variant-numeric: tabular-nums; }
details.day[open] > .daysum { border-bottom: 1px solid var(--line); }
.daybody { padding: 12px 16px 14px; }

/* top bar + tabs */
.topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 13px 18px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: .01em; }
.who { font-size: 13px; color: var(--muted); }
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px;
  background: var(--card); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; padding: 7px 13px; border-radius: 999px; font-size: 14px;
  color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tab.active { background: var(--accent); color: var(--accent-ink); }
.tab.soon { opacity: .6; }
.tab .dot { font-size: 9px; text-transform: uppercase; margin-inline-start: 4px;
  background: var(--line); color: var(--muted); padding: 1px 5px; border-radius: 6px; }

/* headings */
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 16px; }
.page-head h1 { font-family: var(--serif); font-size: 28px; font-weight: 700; margin: 0; letter-spacing: .01em; }
h1.sub { font-family: var(--serif); }
.status { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.status.done { background: var(--pos-soft); color: var(--pos); }
.status.open { background: var(--chip); color: var(--muted); }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px; margin-bottom: 14px; box-shadow: var(--shadow); }
.card h2 { font-size: 15px; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
.card .score { font-size: 13px; color: var(--muted); font-weight: 600; }
.card input[type=text] { width: 100%; padding: 11px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: var(--sunken); }
.card input[type=text]:last-child { margin-bottom: 0; }

/* add button (opens entry screen) */
.addbtn { background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 9px 15px; border-radius: 999px; white-space: nowrap; }

/* day navigator */
.daynav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.navbtn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  font-size: 22px; font-weight: 700; color: var(--ink); }
.navbtn.disabled { color: var(--grey); }
.datejump input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; background: var(--card); font-family: inherit; }
.daydate { font-size: 14px; font-weight: 500; color: var(--muted); margin-inline-start: 10px; }
.backtoday { display: inline-block; font-size: 13px; margin: -6px 2px 12px; }

/* plan banner */
.plan { background: var(--highlight); border: 1px solid var(--highlight-line); border-radius: var(--radius);
  padding: 13px 15px; margin-bottom: 14px; }
.plan.empty { background: var(--card); border-style: dashed; }
.plan-label { font-size: var(--t-md); color: var(--muted); font-weight: 600; margin-bottom: 5px; }
.plan-body { font-size: 16px; font-weight: 600; }
.plan-body.big { font-size: 20px; line-height: 1.35; }

/* scorecard rows */
.rowitem { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line); }
.rowitem:first-of-type { border-top: none; }
.rowlabel { font-weight: 600; }
.segmented { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg { position: relative; padding: 7px 11px; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; border-inline-start: 1px solid var(--line); user-select: none; }
.seg:first-child { border-inline-start: none; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg.yes.on { background: var(--green); color: #fff; }
.seg.partial.on { background: var(--yellow); color: #3a2f00; }
.seg.no.on { background: var(--red); color: #fff; }

/* buttons */
button, .save { width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background .15s ease; }
button:hover, .save:hover { background: var(--accent-dark); }
.save { margin-top: 4px; }

/* login */
.login-card { max-width: 360px; margin: 12vh auto 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.login-brand { font-family: var(--serif); font-size: 25px; font-weight: 700; }
.login-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 4px; }
.login-card input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.login-card button { margin-top: 18px; }
.error { background: var(--neg-soft); color: var(--neg); padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-top: 12px; }

/* overview */
.stats { display: flex; gap: 10px; margin-bottom: 14px; }
.stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-align: center; box-shadow: var(--shadow); }
.stat .num { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.stat .lbl { font-size: 12px; color: var(--muted); }
.card.highlight { background: var(--highlight); border-color: var(--highlight-line); }
.bands { display: flex; flex-wrap: wrap; gap: 6px; }
.bandcell { width: 56px; height: 52px; border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.bandcell .bl { font-size: 10px; opacity: .9; font-weight: 600; }
.bandcell .bs { font-size: 15px; }
.bandcell.great { background: var(--green); }
.bandcell.solid { background: var(--yellow); color: #3a2f00; }
.bandcell.light { background: var(--red); }
.bandcell.nolog { background: var(--chip); color: var(--muted); border: 1px dashed var(--line-2); }

/* schedule 2.0 */
.summary { background: var(--sunken); }
.pu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.pu-row { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; }
.pu-day { font-weight: 700; min-width: 34px; }
.pu-cell { color: var(--muted); }
.sitters-inline { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pu-full { display: flex; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.pu-full:first-of-type { border-top: none; }
.pu-full .pu-day { min-width: 90px; }
.ev-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ev-loc { font-size: 12px; color: var(--muted); }
.ev-note { font-size: 13px; color: var(--muted); }
.ev-note.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* day card: inline drop-off / pick-up / sitter */
.daygrid { display: flex; gap: 10px; margin-bottom: 10px; }
.dg-cell { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dg-lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.inlineform { margin: 0; }
.inlineform select, .sitterline select { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 14px; background: var(--sunken); font-weight: 600; }
/* sitter: label line, then name + from + to, then notes, then date-night checkbox */
.sitterline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 10px; padding: 10px 0 0; border-top: 1px solid var(--line); }
.sitterline .dg-lbl { flex-basis: 100%; }
.sitterline input[type="text"] { height: 38px; padding: 0 11px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 13px; background: var(--sunken); }
.sitterline input[name="name"] { flex: 1 1 44%; min-width: 108px; }
.sitterline input[name="time"], .sitterline input[name="end_time"] { flex: 0 0 74px; text-align: center; }
.sitterline input[name="notes"] { flex: 1 1 100%; }
.sitterline .dn { flex-basis: 100%; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sitterline .dn input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
/* collapsed sitter: a one-line summary that opens the form on tap */
.sitterwrap { border-top: 1px solid var(--line); margin-top: 4px; }
.sitsum { list-style: none; cursor: pointer; padding: 9px 0 2px; font-size: 14px; font-weight: 700; color: var(--ink); }
.sitsum::-webkit-details-marker { display: none; }
.sitsum .muted { font-weight: 600; }
.sitterwrap[open] .sitsum { color: var(--muted); font-size: 12px; }
.sitterwrap .sitterline { border-top: 0; margin-top: 0; padding-top: 4px; }

/* clean, tappable event rows */
.evrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.evrow-time { min-width: 48px; text-align: left; font-weight: 700; font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.evrow-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.evrow-go { color: var(--muted); font-size: 15px; font-weight: 700; }

.dayadd { margin-top: 8px; }

/* mini add inside a section card (e.g. per meal category) */
.miniadd { margin-top: 10px; }
.miniadd summary { font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; }
.miniadd summary::-webkit-details-marker { display: none; }
.miniadd form { display: flex; gap: 6px; margin-top: 8px; }
.miniadd input { flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: var(--sunken); }
.miniadd button { width: auto; padding: 9px 16px; }
.dayadd summary { font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; padding: 6px 0; }
.dayadd summary::-webkit-details-marker { display: none; }
.dayadd select, .dayadd input { width: 100%; padding: 9px 11px; margin-top: 6px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 14px; background: var(--sunken); }
.dayadd button { margin-top: 8px; }

/* meal chips link to recipe */
.chip a { color: var(--ink); }
.idea { display: flex; justify-content: space-between; align-items: center; padding: 11px 0;
  border-top: 1px solid var(--line); font-weight: 600; }
.idea:first-of-type { border-top: none; }

/* upcoming cards — crisp + clearly tappable */
.evcard { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; margin-bottom: 12px; }
.evcard:active { background: var(--raised); }
.evcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.evcard-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.evcard-when { font-size: 12px; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.evcard-when.past { color: var(--muted); background: var(--chip); }
.evcard-sub { margin-top: 5px; font-size: 14px; color: var(--muted); }
.evcard .open-hint { display: inline-block; margin-top: 9px; font-size: 13px; color: var(--accent); font-weight: 700; }
/* upcoming: one compact row per event, the countdown on the trailing edge */
.uprow { display: flex; align-items: center; gap: var(--s3); color: inherit; text-decoration: none; }
.uprow:hover .uprow-title { color: var(--accent); }
.uprow-main { flex: 1; min-width: 0; }
.uprow-title { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.uprow-sub { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 1px; }
details.flag-more .uprow:first-of-type { border-top: 1px solid var(--line); margin-top: var(--s2); }
.fld { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.fld input, .fld textarea, .fld select { display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: var(--sunken);
  font-family: inherit; color: var(--ink); }
.danger { background: var(--neg-soft); color: var(--neg); }

/* to-dos — checkbox closes it; tapping the title opens it (for notes) */
.todo { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-top: 1px solid var(--line); }
.todo:first-of-type { border-top: none; }
.tog { display: flex; flex: none; }
.chk { width: 19px; height: 19px; min-width: 19px; padding: 0; border: 2px solid var(--grey);
  border-radius: 999px; background: #fff; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; }
.chk:hover { border-color: var(--green); }
.chk.checked { background: var(--green); border-color: var(--green); }
/* in progress: half-filled circle (the Linear convention) instead of a chip on every row */
.chk.ongoing { border-color: var(--warn-dot);
  background: linear-gradient(to right, var(--warn-dot) 50%, var(--card) 50%); }
.legend { display: flex; align-items: center; gap: 6px; margin: -6px 2px 12px; }
.legend .chk { width: 13px; height: 13px; min-width: 13px; border-width: 2px; display: inline-block; cursor: default; }
.legend .chk:nth-of-type(2) { margin-inline-start: 8px; }
.todo-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.todo-title { font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.35; }
.todo-title.strike { text-decoration: line-through; color: var(--muted); font-weight: 500; flex: 1; }
.st-note { background: var(--chip); color: var(--muted); }
.st-late { background: var(--neg-soft); color: var(--neg); }
/* capitalize just the first letter of a to-do (display only; safe for Hebrew) */
.todo-title::first-letter { text-transform: uppercase; }
.donebox-card summary { cursor: pointer; font-family: var(--serif); font-weight: 700; font-size: 15px;
  color: var(--muted); list-style: none; }
.donebox-card summary::-webkit-details-marker { display: none; }
.donelist { margin-top: 8px; }
.done-owner { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--chip); border-radius: 6px; padding: 2px 8px; }
.todo.done { justify-content: flex-start; }

/* classes / education */
.clsrow { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.clsrow:first-of-type { border-top: none; }
.clstime { min-width: 52px; font-weight: 700; font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.clsbody { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clsact { font-size: 14px; }
.clsact b { font-weight: 700; }
.clsmeta { font-size: 12px; color: var(--muted); }
.person { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; border-radius: 6px; padding: 2px 8px; vertical-align: middle; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* uniform status/meta chips — no more stray blue */
.st { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--chip);
  border-radius: 6px; padding: 3px 8px; letter-spacing: .01em; }
.st-ongoing { background: var(--warn-soft); color: var(--warn); }
.st-due { background: var(--accent-soft); color: var(--accent-dark); }
.st.st-late { background: var(--neg-soft); color: var(--neg); }   /* .st above used to win */
.donebox summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; padding: 12px 0 4px; list-style: none; }
.donebox summary::-webkit-details-marker { display: none; }

/* rocks */
.rock { display: block; }
.rock-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.rock-title { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.rpill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rpill.on_track { background: var(--pos-soft); color: var(--pos); }
.rpill.off_track { background: var(--neg-soft); color: var(--neg); }
.rpill.done { background: var(--chip); color: var(--muted); }
.rpill.late { background: var(--neg-soft); color: var(--neg); }
.progress { height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; }
.progress.big { height: 11px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.rock-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 9px;
  font-size: 12px; color: var(--muted); }
.rock-meta b { color: var(--ink); }
.rock-meta .overdue { color: var(--red); font-weight: 700; }
.owner-chip { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--chip); border-radius: 6px; padding: 2px 8px; }
.qtimeline { margin-top: 15px; }
.qbar { position: relative; height: 6px; background: var(--track); border-radius: 999px; }
.qmarker { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); transform: translateX(-50%); }
.qends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 7px; }

/* wins list */
.win { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.win:first-of-type { border-top: none; }
.win-date { min-width: 92px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* schedule */
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.subtab { padding: 6px 14px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.subtab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
h1.sub { font-size: 19px; }
.small { font-size: 12px; }
.day h2 { align-items: center; }
.day .pill { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--chip);
  padding: 3px 9px; border-radius: 999px; }
.remember { font-size: 13px; background: var(--note); border: 1px solid var(--note-line);
  padding: 7px 10px; border-radius: 8px; margin-bottom: 8px; }
.ev { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.ev:first-of-type { border-top: none; }
.ev-time { min-width: 78px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--accent); }
.ev-title { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 11px; font-size: 14px; }
.up { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line); }
.up:first-child { border-top: none; }
.up-title { font-weight: 600; }
.del { display: inline; }
.del button { width: auto; background: none; color: var(--muted); font-size: 17px;
  padding: 0 4px; font-weight: 400; line-height: 1; }
.del button:hover { color: var(--red); }
.del.inline button { font-size: 14px; }
.mv { display: inline; }
.mv button { width: auto; background: none; color: var(--accent); font-size: 15px; padding: 0 3px; font-weight: 800; line-height: 1; cursor: pointer; }
.mv button:hover { color: var(--accent-dark); }
details.add { padding: 0; }
details.add summary { padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; }
details.add summary::-webkit-details-marker { display: none; }
details.add form { padding: 0 16px 16px; }
details.add.alarms > .alarmrow, details.add.alarms > p { padding-inline: 16px; }
details.add summary .muted { font-weight: 500; margin-inline-start: auto; }
details.add select, details.add input { width: 100%; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: var(--sunken); }

/* ============ Net Worth (finance) ============ */
.nw-hero { text-align: center; padding: 22px 16px 18px; }
.nw-net { font-family: var(--serif); font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1; }
.nw-split { display: flex; justify-content: center; gap: 16px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.nw-up { color: var(--pos); }
.nw-dn { color: var(--neg); }
.nw-incomplete { margin-top: var(--s2); font-size: var(--t-sm); color: var(--warn); text-align: center; }
.nw-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; text-align: start; }
.nw-barrow { display: flex; align-items: center; gap: 10px; }
.nw-barlbl { flex: 0 0 96px; font-size: 12px; font-weight: 700; color: var(--muted); }
.nw-bartrack { flex: 1; height: 9px; background: var(--track); border-radius: 999px; overflow: hidden; }
.nw-barfill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.nw-barfill.lia { background: var(--bar-neg); }
.nw-barval { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.nw-barval.lia { color: var(--neg); }
.nw-gtot { font-size: 13px; font-weight: 700; color: var(--pos); }
.nw-gtot.lia { color: var(--neg); }

/* plain rows: name + amount + delete */
.nw-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.nw-row:first-of-type { border-top: none; }
.nw-row-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; }
.nw-amt { display: flex; align-items: center; gap: 2px; margin: 0; }
.nw-dollar { color: var(--muted); font-size: 13px; font-weight: 700; }
/* a balance field sized for a balance, not the whole row (a later width:100% rule won) */
.nw-row .nw-amt input { width: 128px; max-width: 40vw; text-align: end; font-variant-numeric: tabular-nums; }
/* a live bank balance: read-only, set in the same column as the typed amounts */
.nw-live { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: end;
  padding-inline-end: 36px; }
.nw-liverow { color: inherit; text-decoration: none; }
.nw-livesub { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
/* a debt: the row is the summary; tapping opens its rate + payment */
.nw-debt > summary.nw-row { cursor: pointer; list-style: none; }
.nw-debt > summary::-webkit-details-marker { display: none; }
.nw-debt:first-of-type > summary.nw-row { border-top: none; }
.nw-debt > summary.nw-row::after { content: "\203A"; color: var(--muted); width: 12px; text-align: center;
  transition: transform .12s ease; }
.nw-debt[open] > summary.nw-row::after { transform: rotate(90deg); }
.nw-debt .nw-live { padding-inline-end: 0; }
.nw-debt.tied > summary.nw-row { padding-inline-start: 14px; }
.nw-live.neg { color: var(--neg); }
.nw-upd { font-size: 12px; font-weight: 600; color: var(--accent); }
.nw-debt:has(.nw-upd) > summary.nw-row::after { display: none; }
.nw-netrow .nw-row-name { font-weight: 500; color: var(--muted); }
.nw-netrow .nw-live { padding-inline-end: 36px; }
.nw-terms { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 4px 0 12px; }
.nw-terms .fld { flex: 1 1 140px; margin: 0; }
.nw-terms button { flex: 0 0 auto; width: auto; min-width: 88px; }
.nw-amt input { width: 96px; height: 34px; text-align: right; padding: 0 9px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; font-weight: 700; background: var(--sunken); font-variant-numeric: tabular-nums; }

/* property rows */
.nw-prop { display: block; padding: 11px 0; border-top: 1px solid var(--line); }
.nw-prop:first-of-type { border-top: none; }
.nw-prop-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nw-prop-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.nw-prop-eq { font-size: 16px; font-weight: 800; color: var(--pos); font-variant-numeric: tabular-nums; }
.nw-prop-eqlbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-inline-start: 5px; letter-spacing: .04em; }
.nw-prop-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nw-todo { color: var(--accent); font-weight: 700; margin-inline-start: 4px; }

/* trend + projection bars */
.nw-trend { display: flex; align-items: flex-end; gap: 8px; overflow-x: auto; padding: 4px 0 0; min-height: 118px; }
.nw-tcol { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; justify-content: flex-end; position: relative; }
.nw-tbar { width: 26px; background: var(--accent); border-radius: 5px 5px 0 0; display: block; }
.nw-tbar.loan { background: var(--bar-mute); position: absolute; bottom: 32px; z-index: 1; }
.nw-tbar.eq { background: var(--accent); position: relative; z-index: 2; }
.nw-tcol .nw-tbar.eq { margin-top: 0; }
.nw-tval { font-size: 11px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.nw-tlbl { font-size: 10px; color: var(--muted); white-space: nowrap; }

.nw-form { display: flex; flex-direction: column; gap: 10px; }
.del-full { margin: 6px 0 30px; }
.del-full button { width: 100%; padding: 11px; background: transparent; color: var(--neg);
  border: 1px solid var(--neg-line); border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; }

/* ---- bank import ---- */
.banner { padding: 12px 15px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.banner.good { background: var(--pos-soft); color: var(--pos); border: 1px solid var(--pos-line); }
.banner.bad { background: var(--neg-soft); color: var(--neg); border: 1px solid var(--neg-line); }
.banner.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--line-2); }
.exp { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.4;
  border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); padding: 10px; color: var(--ink);
  white-space: pre; overflow-x: auto; margin-bottom: 10px; }
.txn { padding: 9px 0; border-top: 1px solid var(--line); }
.txn:first-of-type { border-top: none; }
.txn-main { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.txn-desc { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txn-amt { font-size: 14px; font-weight: 800; color: var(--pos); font-variant-numeric: tabular-nums; white-space: nowrap; }
.txn-amt.neg { color: var(--neg); }
.txn-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.txn-date { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.txn-cat { margin: 0; }
.txn-cat select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--sunken); color: var(--ink); font-weight: 600; max-width: 190px; }
.chip.on { background: var(--accent); color: #fff; }

/* ---- Finances: cash flow / income-expense / budget ---- */
.nw-net.neg { color: var(--neg); }
.nw-tval.neg { color: var(--neg); }
.nw-tbar.down { background: var(--bar-neg); }

/* income / expense rows */
.ie-lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 14px 0 8px; }
.ie-lbl:first-child { margin-top: 2px; }
.ie-lbl.out { color: var(--neg); }
.ie-lbl.in { color: var(--pos); }
.ie-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.ie-cat { flex: 0 0 34%; font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-track { flex: 1; height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; }
.ie-fill { display: block; height: 100%; border-radius: 999px; }
.ie-fill.out { background: var(--bar-neg); }
.ie-fill.in { background: var(--green); }
.ie-amt { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* budget vs actual */
.bud { padding: 10px 0; border-top: 1px solid var(--line); }
.bud:first-of-type { border-top: none; }
.bud-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bud-cat { font-size: 14px; font-weight: 700; color: var(--ink); }
.bud-num { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bud-num.over { color: var(--neg); }
.bud-track { height: 9px; background: var(--track); border-radius: 999px; overflow: hidden; margin: 6px 0 3px; }
.bud-fill { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.bud-fill.over { background: #d66a58; }
.bud-sub { font-size: 11px; color: var(--muted); font-weight: 600; }
.bud-sub.over { color: var(--neg); }
.bud-total { font-size: 13px; color: var(--muted); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Add-to-Google-Calendar button on event pages */
.gcal-btn { display: inline-block; margin: 0 0 6px; padding: 9px 15px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow); }
.gcal-btn:hover { border-color: var(--accent); color: var(--accent); }

/* (Vladimir tables now use the shared .dtable component) */

/* scorecard auto-save bar */
.savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  background: var(--bg); padding: 12px 0 14px; margin-top: 4px; z-index: 5; }
.savebar .save { margin: 0; flex: 0 0 auto; width: auto; padding: 9px 16px; }
.savestat { flex: 1; font-size: 13px; font-weight: 600; color: var(--muted); }
.savestat.saving { color: var(--muted); }
.savestat.ok { color: var(--pos); }
.savestat.bad { color: var(--neg); }

/* custom alarms */
.alarmrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.alarmrow:first-of-type { border-top: none; }
.alarmwhen { font-size: 14px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.alarmnote { flex: 1; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarmrow .del { margin-inline-start: auto; }
.alarmadd .fld { display: inline-flex; flex-direction: column; margin-inline-end: 10px; }
.alarmadd input[type=time], .alarmadd input[type=date] { padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 15px; background: var(--sunken); font-family: inherit; }

/* live bank feed (SimpleFIN) */
.sfrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; }
.sfdot { width: 9px; height: 9px; border-radius: 50%; background: var(--grey); display: inline-block; }
.sfdot.ok { background: var(--pos); }

/* ---- finance data tables: compact, scannable, scroll sideways on a phone ---- */
.dwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.dtable th { font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; text-align: end; white-space: nowrap;
  padding-block: 0 7px; padding-inline: 12px 0; }
.dtable th:first-child, .dtable td:first-child { text-align: start; padding-inline-start: 0; }
.dtable td { padding-block: 9px; padding-inline: 12px 0; text-align: end;
  border-top: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dtable tbody tr:first-child td { border-top: 1px solid var(--line); }
.dtable .nm { font-weight: 600; color: var(--ink); white-space: normal; min-width: 116px; text-align: start; }
.dtable .sub { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.dtable tfoot td { border-top: 2px solid var(--line); font-weight: 700; padding-top: 11px; }
.dtable td.neg, .dtable tfoot td.neg { color: var(--neg); }
.dtable td.dim { color: var(--muted); font-weight: 500; }

/* ---- KPI strip: the numbers that lead a report ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kpi { background: var(--card); padding: 11px 12px; }
.kpi .v { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.kpi .v.neg { color: var(--neg); }
.kpi .k { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-top: 2px; }
.kpi .note { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ---- attention list ---- */
.flag { display: flex; gap: 9px; padding: 10px 0; border-top: 1px solid var(--line); }
.flag:first-of-type { border-top: none; }
.flag .dot { width: 7px; height: 7px; border-radius: 50%; margin-block-start: 6px; flex: none; background: var(--warn-dot); }
.flag.info .dot { background: var(--info-dot); }
.flag .ft { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.flag .fd { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.sechead { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; margin: 18px 0 8px; }

/* a category row that drills through to its transactions */
a.ie-row.lnk { text-decoration: none; color: inherit; border-radius: 6px; }
a.ie-row.lnk:hover { background: rgba(0,0,0,.035); }
a.ie-row.lnk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.acct-name { font-size: 14.5px; font-weight: 600; color: var(--ink); display: block; }

/* ============================================================
   SHARED SYSTEM
   One definition per pattern. Everything above this point is
   feature CSS that grew per-page; these rules come last so the
   whole app lands on the same rhythm, targets and states.
   ============================================================ */

/* --- 1. Focus. Nothing in the app had a visible focus state. --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- 2. Rows. Eleven list patterns had five different paddings. --- */
.nw-row, .rowitem, .up, .idea, .evrow, .clsrow, .todo, .win,
.alarmrow, .flag, .txn, .bud, .pu-full, .sfrow, .uprow {
  padding-top: var(--row-y);
  padding-bottom: var(--row-y);
  border-top: 1px solid var(--line);
}
.nw-row:first-of-type, .rowitem:first-of-type, .up:first-child, .idea:first-of-type,
.evrow:first-of-type, .clsrow:first-of-type, .todo:first-of-type, .win:first-of-type,
.alarmrow:first-of-type, .flag:first-of-type, .txn:first-of-type, .bud:first-of-type,
.pu-full:first-of-type, .uprow:first-of-type { border-top: none; padding-top: 2px; }

/* --- 3. Form controls. The same six declarations lived in ten places. --- */
.card input[type=text], .card input[type=number], .card input[type=date],
.card input[type=time], .card input[type=password], .card select, .card textarea,
.fld input, .fld select, .fld textarea, .miniadd input, .miniadd select,
.dayadd input, .dayadd select, .nw-amt input, .txn-cat select,
details.add input, details.add select, .inlineform select, .sitterline input[type=text],
.alarmadd input, .login-card input, .exp {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunken);
  color: var(--ink);
  font-family: inherit;
}
.card input:hover, .fld input:hover, .card select:hover, .fld select:hover { border-color: var(--line-2); }
select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-end: 26px; }
/* Hebrew: the chevron belongs on the other edge, and the caret starts on the right */
[dir="rtl"] select, :dir(rtl) select {
  background-position: 15px calc(50% + 1px), 10px calc(50% + 1px);
  padding-inline-end: 12px; padding-inline-start: 26px; }
/* comfortable on a phone: no control smaller than a fingertip */
.fld input, .fld select, .card > form input[type=text], .inlineform select { min-height: var(--tap); }

/* --- 4. Buttons. `button` is full-width by default; these are the exceptions. --- */
.btn-sm { width: auto; padding: 8px 14px; font-size: var(--t-md); border-radius: var(--r-md); }
.btn-quiet { width: auto; padding: 8px 14px; font-size: var(--t-md); border-radius: var(--r-md);
  background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.btn-quiet:hover { background: var(--raised); border-color: var(--line-2); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* --- 5. Badges. Nine variants existed; one shape now governs them all. --- */
.st, .tag, .pill, .owner-chip, .done-owner, .person, .rpill, .status, .daysum-tags .tag {
  display: inline-block; font-size: var(--t-xs); font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
  letter-spacing: .01em; line-height: 1.5;
}

/* --- 6. Disclosure. Five summary styles, one behaviour. --- */
.miniadd > summary, .dayadd > summary, .donebox > summary, .donebox-card > summary,
details.add > summary, .sitsum {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px; min-height: 34px;
}
.miniadd > summary::-webkit-details-marker, .dayadd > summary::-webkit-details-marker,
.donebox > summary::-webkit-details-marker, .donebox-card > summary::-webkit-details-marker,
details.add > summary::-webkit-details-marker, .sitsum::-webkit-details-marker { display: none; }
.miniadd > summary::after, .dayadd > summary::after, details.add > summary::after {
  content: "›"; font-size: 17px; line-height: 1; transition: transform .15s ease; opacity: .7;
}
.miniadd[open] > summary::after, .dayadd[open] > summary::after,
details.add[open] > summary::after { transform: rotate(90deg); }

/* --- 7. Navigation. Nine tabs overflowed with no sign there was more. --- */
.tabs { position: relative; -webkit-overflow-scrolling: touch; padding-inline: var(--s3); }
.tabs::after { content: ""; position: sticky; inset-inline-end: 0; flex: none; width: 22px;
  margin-inline-start: -22px; align-self: stretch; pointer-events: none;
  background: linear-gradient(to inline-end, rgba(255,253,249,0), var(--card)); }
.tab { min-height: 34px; }
/* phone: the sections become a bottom tab bar — every tab visible, in thumb reach */
@media (max-width: 640px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .tabs { position: fixed; inset-inline: 0; bottom: 0; z-index: 20; gap: 0; padding: 6px 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    border-bottom: none; border-top: 1px solid var(--line); overflow: visible; }
  .tabs::after { display: none; }
  .tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 8px 2px; min-height: var(--tap);
    font-size: var(--t-sm); border-radius: var(--r-md); }
  .tab.active { background: var(--accent-soft); color: var(--accent-dark); }
  .savebar { bottom: calc(57px + env(safe-area-inset-bottom)); }   /* ride above the tab bar */
}
.subtabs { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; }

/* --- 8. Tables. Header stays put while a long report scrolls. --- */
.dtable thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
.dtable tbody tr:hover td { background: var(--raised); }
.dtable caption { text-align: start; }
.dtable td.pos { color: var(--pos); }
.dwrap { border-radius: var(--r-sm); }

/* --- 9. Section headings inside a card. --- */
.sechead { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: var(--s4) 0 var(--s2); }
.sechead:first-child { margin-top: 0; }

/* --- 10. Empty states: same shape everywhere. --- */
.empty { text-align: center; padding: var(--s5) var(--s4); color: var(--muted); }
.empty .et { font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin-bottom: var(--s1); }
.empty .ed { font-size: var(--t-base); margin-bottom: var(--s3); }

/* --- 11. Filter / toolbar bar above a list. --- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  margin-bottom: var(--s3); }
.toolbar .grow { flex: 1; }
.kpi { text-align: start; }

/* --- 12. Card headings: a consistent title + trailing meta. --- */
.card h2 { gap: var(--s2); }
.card h2 .muted { font-weight: 500; text-align: end; }

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

/* ============================================================
   OPERATIONS STANDARDS
   Stripe / Ramp / Linear conventions applied on top of the warm
   palette: fewer containers, flatter surfaces, one type scale,
   numbers that line up. Structure only — the theme is unchanged.
   ============================================================ */

/* --- Type scale. .card h2 was 15px against 16px body: section
       titles read as smaller than the text under them. --- */
.card h2, .page-head h2 {
  font-size: 15px; font-weight: 700; letter-spacing: -.005em;
  color: var(--ink); margin: 0 0 var(--s3);
}
.card h2 .muted, .page-head h2 .muted { font-size: var(--t-sm); }
.page-head h1 { font-size: 24px; }
h1.sub { font-size: 18px; }

/* --- Every figure in the app lines up in its column. --- */
.txn-amt, .nw-barval, .nw-tval, .bud-num, .ie-amt, .kpi .v, .stat .num,
.nw-net, .nw-prop-eq, .alarmwhen, .evrow-time, .clstime, .ev-time {
  font-variant-numeric: tabular-nums;
}

/* --- Panel: a card without the chrome. A table already has its own
       structure; wrapping it in a shadowed, padded box adds nothing. --- */
.panel { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s3); box-shadow: none; }
.panel > .dwrap:last-child { margin-bottom: -2px; }
/* a card whose only job is to hold a table loses its inner padding on phones */
@media (max-width: 480px) {
  .card > .dwrap { margin-inline: calc(var(--s4) * -1); }
  .card > .dwrap > .dtable { padding-inline: var(--s4); }
}

/* --- Density: the row rhythm was comfortable but loose for a report. --- */
.dtable td { padding-block: 8px; }
.dtable .sub { margin-top: 1px; }
.card { padding: var(--s4); margin-bottom: var(--s3); }
.kpis { border-radius: var(--radius); }
.kpi { padding: 10px var(--s3); }
.kpi .v { font-size: 18px; }

/* --- Semantic colour only. A figure is neutral unless it is bad news. --- */
.dtable tfoot td { border-top: 1px solid var(--line-2); }
.dtable thead th { border-bottom: 1px solid var(--line); padding-bottom: 6px; }

/* --- Primary vs secondary action. Every button was a filled primary. --- */
.card details.miniadd button[type=submit] { font-size: var(--t-base); padding: 10px 16px; width: auto; }
.miniadd form { flex-wrap: wrap; align-items: center; }
.miniadd form .fld { margin-bottom: 0; }

/* --- Banner: same weight as the rest of the page, not a shout. --- */
.banner { border-radius: var(--r-md); font-size: var(--t-base); padding: 10px 13px; }

/* --- Checklist severity: state you can see without reading the chip. --- */
.todo.late, .todo.due { padding-inline-start: 10px; position: relative; }
.todo.late::before, .todo.due::before {
  content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0;
  width: 3px; border-radius: var(--r-pill); background: var(--neg);
}
.todo.due::before { background: var(--accent); }

/* --- Drill-down: any total can open the transactions behind it, in place. --- */
details.drill > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
details.drill > summary::-webkit-details-marker { display: none; }
details.drill > summary::after { content: "\203A"; font-size: 15px; line-height: 1;
  color: var(--muted); transition: transform .15s ease; }
details.drill[open] > summary::after { transform: rotate(90deg); }
details.drill > summary:hover { color: var(--accent); }
.drill-row { display: flex; align-items: baseline; gap: var(--s2);
  padding: 5px 0; padding-inline-start: 12px;
  font-size: var(--t-sm); font-weight: 500; white-space: normal; }
.drill-row > span:first-child { flex: 1; min-width: 0; }
.drill-row b { font-variant-numeric: tabular-nums; }
/* secondary detail folded under a card: setup gaps, column explanations */
details.flag-more, details.note-more { display: block; margin-top: var(--s2); font-size: var(--t-sm); }
details.flag-more > summary, details.note-more > summary { color: var(--muted); font-weight: 600; }
details.flag-more { border-top: 1px solid var(--line); padding-top: var(--s2); }
details.flag-more .flag:first-of-type { border-top: 1px solid var(--line); margin-top: var(--s2); }
details.note-more p { margin: var(--s2) 0 0; }

/* --- Grouped table: section headers live inside the table, so every column
       still lines up across groups and the sections share one rhythm. --- */
.dtable tr.grp td {
  font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
  padding-top: var(--s4); padding-bottom: 5px; border-top: none;
}
.dtable tbody tr.grp:first-child td { padding-top: 2px; }
.dtable tr.grp + tr td { border-top: 1px solid var(--line); }
.dtable tr.grp td .sub { text-transform: none; letter-spacing: 0; }
.dtable tbody tr.grp:hover td { background: none; }
.dtable td.ind { padding-inline-start: 12px; }

/* ---- Transactions pop-up: one component, used anywhere a figure needs opening ---- */
.lines-dlg { width: min(560px, 94vw); max-height: 82vh; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--ink);
  box-shadow: 0 8px 40px rgba(70,55,35,.18); overflow: hidden; }
.lines-dlg::backdrop { background: rgba(53,48,42,.38); }
.lines-load { padding: var(--s6); text-align: center; color: var(--muted); }
.lines-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s4); border-bottom: 1px solid var(--line); }
.lines-head b { display: block; font-size: 15px; }
.lines-head .muted { display: block; margin-top: 2px; }
.lines-x { width: 32px; height: 32px; flex: none; padding: 0; font-size: 22px; line-height: 1;
  background: none; color: var(--muted); border-radius: var(--r-sm); }
.lines-x:hover { background: var(--chip); color: var(--ink); }
.lines-body { padding: var(--s2) var(--s4); overflow-y: auto; max-height: 56vh; }
.lineitem { padding: 10px 0; border-top: 1px solid var(--line); }
.lineitem:first-child { border-top: none; }
.lineitem-top { display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between; }
.lineitem-desc { font-size: var(--t-base); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lineitem-top b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineitem-sub { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: 5px;
  font-size: var(--t-sm); }
.lineitem-sub .muted { flex: 1; min-width: 0; }
.lineitem-cat { font-size: var(--t-sm); padding: 4px 8px; max-width: 200px; }
.lineitem-ok { font-size: var(--t-xs); font-weight: 700; color: var(--pos);
  background: var(--pos-soft); border-radius: var(--r-pill); padding: 2px 8px; }
.lines-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--sunken);
  font-variant-numeric: tabular-nums; }
.lineitem-cat2 { font-size: var(--t-sm); padding: 4px 8px; max-width: 150px; }

/* ---- pop-up level 1: sub-category breakdown ---- */
.subrow { display: flex; align-items: center; gap: var(--s3); padding: 11px 0;
  border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.subrow:first-child { border-top: none; }
.subrow:hover { background: var(--raised); }
.subrow-name { flex: 1; min-width: 0; font-size: var(--t-base); font-weight: 600; }
.subrow-name .sub { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
.subrow-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.subrow-go { color: var(--muted); font-weight: 700; }
.lines-back { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: 1px; }

/* ---- splitting one transaction across categories ---- */
.lineitem-split { width: auto; padding: 4px 10px; font-size: var(--t-xs); font-weight: 600;
  background: var(--card); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-sm); }
.lineitem-split:hover { background: var(--chip); color: var(--ink); }
.splitbox { margin-top: var(--s2); padding: var(--s3); background: var(--sunken);
  border: 1px solid var(--line); border-radius: var(--r-md); }
.splitrow { display: flex; gap: 6px; margin-bottom: 6px; }
.splitrow input[name="amount"] { width: 92px; flex: none; }
.splitrow select { flex: 1; min-width: 0; }
.splitrow input[name="category2"] { flex: 1; min-width: 0; }
.splitbox input, .splitbox select { font-size: var(--t-sm); padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.splitfoot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.splitfoot .splitmsg { flex: 1; }
.splitfoot .splitmsg.bad { color: var(--neg); font-weight: 600; }
.splitfoot button[type="submit"] { width: auto; padding: 7px 14px; font-size: var(--t-md); }

/* Classes — every row opens into its own edit form, and each day has its own
   "+ add", so a class is never filed against the wrong day by accident. */
.clsrow-edit > summary.clsrow { cursor: pointer; list-style: none; }
.clsrow-edit > summary.clsrow::-webkit-details-marker { display: none; }
.clsrow-edit > summary.clsrow::after { content: "›"; margin-inline-start: auto; align-self: center;
  color: var(--muted); transition: transform .12s ease; }
.clsrow-edit[open] > summary.clsrow::after { transform: rotate(90deg); }
.clsrow-edit > summary.clsrow:hover { background: var(--hover, rgba(0,0,0,.02)); }
.clsrow-edit[open] > summary.clsrow { border-bottom: 1px solid var(--line); }
.cls-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 0 var(--s3); padding: var(--s3) 0 var(--s2); }
.cls-form .fld { margin-bottom: var(--s2); }
.cls-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); }
.cls-acts button[type="submit"] { width: auto; padding: 8px 16px; }
.dayname .muted { margin-inline-start: 8px; }

/* ============================================================
   DIRECTION A — refined warm (approved 2026-09-24)
   Sidebar shell, underline tabs, B's quiet summary line, serif
   page titles. Comes last so it governs the layers above.
   ============================================================ */
body { font-family: var(--sans); font-size: 15px; }
.muted { color: var(--muted); }

/* --- shell: sidebar on desktop, bottom tab bar on phone --- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 28px 18px 20px; border-inline-end: 1px solid var(--line); }
.sb-brand { display: block; font: 700 22px/1.1 var(--serif); color: var(--ink); padding: 0 10px 26px; }
.sb-brand small { display: block; font: 500 12px var(--sans); color: var(--muted); margin-top: 4px; }
.sidebar .tabs { flex-direction: column; gap: 2px; padding: 0; background: none; border: 0; overflow: visible; }
.sidebar .tabs::after { display: none; }
.sidebar .tab { gap: 11px; padding: 8px 10px; border-radius: var(--r-md); color: var(--ink-2);
  font-size: 14.5px; font-weight: 500; min-height: 0; }
.sidebar .tab:hover { background: var(--chip); }
.sidebar .tab.active { background: var(--accent-soft); color: var(--accent); }
.tab-ic { width: 18px; height: 18px; flex: none; }
.sb-user { margin-top: auto; padding: 0 10px; font-size: 13px; color: var(--muted); }
.shell-main { min-width: 0; }
.shell-main > .topbar { display: none; }
.wrap { max-width: 760px; padding: 30px 32px 60px; margin: 0; }
.wrap.wide { max-width: 1120px; }
@media (max-width: 640px) {
  .shell { display: block; }
  .sidebar { display: contents; }
  .sb-brand, .sb-user { display: none; }
  .shell-main > .topbar { display: flex; padding: 12px 16px; background: var(--bg); border-bottom: 0; }
  .brand { font: 700 19px var(--serif); }
  .sidebar .tabs { flex-direction: row; background: var(--card); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  /* Eight sections share the bar now. Each gets an equal slice and the label
     shrinks to fit rather than being clipped; the icon carries the recognition. */
  .sidebar .tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
    font-size: 9.5px; padding: 6px 1px; text-align: center; }
  .sidebar .tab span { display: block; width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
  .sidebar .tab.active { background: var(--accent-soft); color: var(--accent-dark); }
  .wrap { padding: 8px 16px 90px; }
}

/* --- page titles: the serif carries the personality --- */
.page-head { margin: 0 0 6px; align-items: center; }
.page-head h1 { font: 700 34px/1.1 var(--serif); letter-spacing: -.015em; }
@media (max-width: 640px) { .page-head h1 { font-size: 28px; } }

/* --- subtabs: underline tabs, not pills --- */
.subtabs { gap: 22px; border-bottom: 1px solid var(--line); margin: 14px 0 20px; padding-bottom: 0; }
.subtab { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 9px 0; margin-bottom: -1px; color: var(--muted); font-weight: 500; font-size: 14.5px; min-height: 0; }
.subtab:hover { color: var(--ink); }
.subtab.active { background: none; color: var(--ink); border-color: var(--ink); }

/* --- B's summary line: the numbers that matter, in one quiet row, no tiles --- */
.kpis { display: flex; flex-wrap: wrap; gap: 8px 30px; background: none; border: 0; border-radius: 0;
  margin: 14px 0 18px; overflow: visible; }
.kpi { background: none; padding: 0; border: 0; }
.kpi .v { font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -.01em;
  line-height: 28px; }   /* a fixed line box, so every label sits on one line across the row */
/* The value slot is sized for magnitudes. A name or a phrase set at numeral size reads as
   a heading — "Babysitter" was shouting over the counts next to it — so words step down
   and let the figures lead. */
.kpi .v.word { font-size: 15px; font-weight: 600; letter-spacing: 0;
  /* dropped onto the numerals' baseline, so the row reads as one line and the
     labels underneath still start together */
  line-height: 23.5px; padding-top: 4.5px; }
.kpi .k { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 400; margin-top: 1px; }
@media (max-width: 640px) {
  .kpis { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 22px; margin-inline: -16px; padding-inline: 16px; }
  .kpi { flex: none; }
}

/* --- cards: quieter surfaces --- */
.card { box-shadow: none; }
.card h2 { font-size: 15.5px; }

/* --- a section on the page (not a box): serif title over a rule --- */
.sec { margin-top: 30px; }
.sec:first-child { margin-top: 0; }
.sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 7px; margin-bottom: 2px; }
.sh h2 { font: 700 19px var(--serif); margin: 0; }
.sh .muted { font-size: 12.5px; }
.btn-primary { width: auto; padding: 8px 14px; font-size: 14px; font-weight: 500; border-radius: var(--r-md);
  background: var(--ink); color: var(--bg); white-space: nowrap; }
.btn-primary:hover { opacity: .88; }

/* ---- Schedule: week board ---- */
#week:has(.board) { display: block; }       /* the old day-card grid; Classes keeps it */
.wk-label { margin: 0 2px 10px; font-size: 14px; }
.wk-label b { font: 700 17px var(--serif); margin-inline-end: 6px; }
.board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bcol { display: flex; flex-direction: column; min-height: 340px; border-inline-start: 1px solid var(--line); min-width: 0; }
.bcol:first-child { border-inline-start: 0; }
.bcol.past { background: var(--raised); }
.bcol.past .blk { opacity: .55; }
.bcol.today { background: var(--highlight); }
.bcol.sel { box-shadow: inset 0 3px 0 var(--accent); }
.bch { all: unset; cursor: pointer; display: block; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); }
.bch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bdn { display: block; font: 700 16px var(--serif); color: var(--ink); }
.bcol.today .bdn { color: var(--accent); }
.bdt { font-size: 12px; color: var(--muted); }
.bwho { display: grid; gap: 2px; align-content: start; padding: 7px 10px; min-height: 60px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.who { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bev { display: grid; gap: 6px; align-content: start; padding: 8px; }
.blk { display: block; background: var(--bg); border-inline-start: 3px solid var(--accent); border-radius: var(--r-sm);
  padding: 5px 8px; color: var(--ink); min-width: 0; }
.blk:hover { background: var(--chip); }
.blk-time { display: block; font-size: 11.5px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.blk-t { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.badd { all: unset; cursor: pointer; margin-top: auto; padding: 8px 10px; font-size: 12px; color: var(--muted); }
.badd:hover { color: var(--accent); }
.daystrip { display: none; }

/* the selected day's editor, under the board */
.daypanel { margin-top: 26px; }
.daypanel .sh h2 .dp-date { font: 500 13px var(--sans); color: var(--muted); margin-inline-start: 6px; }
.dp-grid { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dp-grid .dg-cell { display: flex; align-items: center; gap: 8px; }
.dp-grid .dg-lbl { font-size: 13px; color: var(--muted); font-weight: 500; }
.dp-grid .inlineform select { min-width: 120px; }
.dg-wide { flex: 1 1 100%; }
.dp-add { display: grid; grid-template-columns: 110px 1fr 1fr auto; gap: 8px; margin-top: 12px; }
.dp-add input { padding: 8px 10px; min-height: 38px; }

@media (max-width: 640px) {
  .daystrip { display: flex; gap: 6px; margin-bottom: 12px; }
  .ds { all: unset; flex: 1; text-align: center; padding: 7px 0; border-radius: var(--r-md); cursor: pointer;
    border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 12px; }
  .ds b { display: block; font-size: 15px; color: var(--ink); }
  .ds.today { border-color: var(--accent); }
  .ds.sel { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .ds.sel b { color: var(--accent-ink); }
  /* The whole week, stacked. The board used to be hidden here and the phone got
     one day in an editing form, which answered "change something" but never
     "what is this week?". Same columns, turned on their side. */
  .daystrip { display: none; }
  .board { display: block; }
  .bcol { min-height: 0; border-inline-start: 0; border-top: 1px solid var(--line); }
  .bcol:first-child { border-top: 0; }
  .bcol.sel { box-shadow: inset 3px 0 0 var(--accent); }
  .bch { display: flex; align-items: baseline; gap: 8px; width: 100%;
    padding: 11px 14px 4px; border-bottom: 0; }
  .bwho { display: flex; flex-wrap: wrap; gap: 2px 16px; min-height: 0;
    padding: 0 14px 6px; border-bottom: 0; }
  .bev { padding: 0 14px; }
  .badd { padding: 8px 14px 12px; }
  /* the day's events and who is driving are on the board now — the panel below is
     just the two actions for the day you picked */
  .dp-events { display: none; }
  .daypanel { margin-top: 20px; }
  .dp-add { grid-template-columns: 1fr 2fr; }
  .dp-add input[name=location] { grid-column: 1 / -1; }
  .dp-add button { grid-column: 1 / -1; }
}

/* ---- Schedule: meals ---- */
.meal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.meal-grid .sec:nth-child(-n+2) { margin-top: 0; }
.meal-grid .chips { margin-top: 10px; }
.bank-cat { margin: 12px 2px 6px; font-weight: 600; }
@media (max-width: 760px) { .meal-grid { grid-template-columns: 1fr; } .meal-grid .sec:nth-child(2) { margin-top: 30px; } }

/* ---- Schedule: upcoming events ---- */
.evc { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 20px; align-items: start; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; color: inherit; }
.evc:hover { border-color: var(--line-2); }
.evc-when { text-align: center; border-inline-end: 1px solid var(--line); padding-inline-end: 18px; }
.evc-m { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.evc-d { font: 700 30px/1 var(--serif); margin: 2px 0; }
.evc-r { font-size: 12px; color: var(--muted); }
.evc-title { font: 700 22px/1.2 var(--serif); }
.evc-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; color: var(--ink-2); font-size: 13.5px; }
.evc-facts b { font-weight: 600; }
.evc-facts .miss { color: var(--muted); font-style: italic; }
.evc-ready { margin-top: 14px; }
.evc-bar { height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; max-width: 360px; }
.evc-bar i { display: block; height: 100%; background: var(--accent); }
.evc-lbl { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.evc-lbl b { color: var(--ink); font-weight: 600; }
.evc-count { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft);
  border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.evc-count.now { color: var(--accent-ink); background: var(--accent); }
.evc-new { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 0 20px; margin-bottom: 8px; }
.evc-new > summary { list-style: none; cursor: pointer; padding: 14px 0; color: var(--ink-2); font-weight: 500; }
.evc-new > summary::-webkit-details-marker { display: none; }
.evc-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr auto; gap: 10px; align-items: end; padding-bottom: 16px; }
.evc-form .fld { margin: 0; }
.evc-form .fld input, .evc-form .fld select { width: 100%; padding: 8px 10px; min-height: 38px; margin-top: 4px; }
.pastrow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.pastrow:hover { color: var(--ink); }
.pastrow .muted { font-size: 13px; }
@media (max-width: 900px) { .evc-form { grid-template-columns: 1fr 1fr; } .evc-form .fld:first-child, .evc-form button { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .evc { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .evc-count { grid-column: 2; justify-self: start; order: -1; }
  .evc-d { font-size: 24px; } .evc-title { font-size: 19px; }
}

/* ---- Upcoming event page ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ev-head h1 { font: 700 36px/1.1 var(--serif); margin: 0; letter-spacing: -.015em; }
.ev-sub { color: var(--ink-2); margin-top: 6px; }
.ev-sub b { font-weight: 600; }
.ev-sub .miss { color: var(--muted); font-style: italic; }
.ev-actions { display: flex; gap: 8px; flex: none; }
.ev-actions .btn-quiet { display: inline-flex; align-items: center; }
.ev-edit { margin: 4px 0 8px; }
.ev-edit > summary { display: none; }
.ev-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.ev-form .fld { margin: 0; }
.ev-form .fld input, .ev-form .fld select, .ev-form .fld textarea { width: 100%; padding: 8px 10px; margin-top: 4px; min-height: 38px; }
.ev-span2 { grid-column: span 2; }
.ev-span-all { grid-column: 1 / -1; }
.ev-form-actions { display: flex; justify-content: flex-end; }
.ev-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 18px; }

/* checklist rows (preparation + packing) */
.ck { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.ck .tog { display: flex; }
.ckbox { width: 18px; height: 18px; min-width: 18px; padding: 0; border-radius: 5px; border: 1.5px solid var(--line-2);
  background: var(--card); color: var(--accent-ink); font-size: 11px; line-height: 1; cursor: pointer; }
.ckbox:hover { border-color: var(--accent); }
.ck.done .ckbox { background: var(--accent); border-color: var(--accent); }
.ck-t { flex: 1; min-width: 0; }
.ck.done .ck-t { color: var(--muted); text-decoration: line-through; }
.ck-who { font-size: 12px; color: var(--ink-2); background: var(--chip); border-radius: var(--r-pill); padding: 1px 8px; white-space: nowrap; }
.ck-due { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ck-due.late { color: var(--neg); font-weight: 600; }
.ck .del button { opacity: 0; }
.ck:hover .del button, .ck .del button:focus-visible { opacity: 1; }
.ck-add { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px auto; gap: 8px; margin-top: 12px; }
.ck-add.pack-add { grid-template-columns: minmax(0, 1fr) 130px auto; }
.ck-add input, .ck-add select { padding: 8px 10px; min-height: 38px; }
.starter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; }
.pack-who { font-weight: 600; font-size: 13.5px; margin: 14px 2px 2px; }
.pack-who .muted { font-weight: 400; margin-inline-start: 4px; }

/* info & links */
.lk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.lk-kind { font-size: 11px; font-weight: 700; border-radius: var(--r-sm); padding: 2px 7px; margin-top: 2px; flex: none;
  background: var(--chip); color: var(--ink-2); min-width: 50px; text-align: center; }
.lk-flight { background: var(--accent-soft); color: var(--accent-dark); }
.lk-hotel { background: var(--pos-soft); color: var(--pos); }
.lk-body { flex: 1; min-width: 0; }
.lk-label { font-weight: 600; }
.lk-detail { font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; margin-top: 2px; }
.lk-url { font-size: 13px; overflow-wrap: anywhere; }
.lk .del button { opacity: 0; } .lk:hover .del button { opacity: 1; }
.lk-form { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; width: 100%; }
.lk-form textarea, .lk-form input[name=url] { grid-column: 1 / -1; }
.lk-form button { grid-column: 1 / -1; justify-self: start; }
.lk-form input, .lk-form select, .lk-form textarea { padding: 8px 10px; min-height: 38px; width: 100%; }
.ev-notes { white-space: pre-wrap; margin: 12px 2px; }
.ev-del { margin-top: 34px; }
.danger-quiet { color: var(--neg); }
@media (max-width: 900px) { .ev-cols { grid-template-columns: 1fr; gap: 10px; } .ev-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .ev-head { flex-direction: column; align-items: flex-start; } .ev-head h1 { font-size: 28px; }
  .ev-actions .btn-quiet { display: none; }
  .ck-add { grid-template-columns: 1fr 1fr; } .ck-add input[name=title] { grid-column: 1 / -1; }
  .ck-add:not(.pack-add) button { grid-column: 1 / -1; }
  .ck-add.pack-add { grid-template-columns: 1fr auto; } .ck-add.pack-add input[name=title] { grid-column: 1 / -1; }
  .ck .del button { opacity: 1; }
}
/* day editor: one compact row each for who-drives and the sitter (overrides the old day-card grid) */
.daypanel .dp-grid { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 24px; }
.daypanel .dg-cell { display: flex; flex-direction: row; align-items: center; gap: 8px; text-align: start; padding: 0; background: none; border: 0; }
.daypanel .dg-lbl { margin: 0; min-width: 0; font-size: 13px; color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.daypanel .inlineform select { min-width: 130px; min-height: 36px; padding-block: 6px; }
.daypanel .sitterline { grid-column: 1 / -1; display: grid; grid-template-columns: 56px minmax(0, 1.2fr) 90px 90px minmax(0, 1.6fr) auto;
  gap: 8px; align-items: center; margin: 0; }
.daypanel .sitterline input[type=text] { width: 100%; min-height: 36px; padding: 6px 10px; flex: none; margin: 0; }
.daypanel .sitterline .dn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; margin: 0; }
@media (max-width: 640px) {
  .daypanel .dp-grid { grid-template-columns: 1fr 1fr; }
  .daypanel .dg-cell { flex-direction: column; align-items: flex-start; gap: 4px; }
  .daypanel .inlineform, .daypanel .inlineform select { width: 100%; }
  .daypanel .sitterline { grid-template-columns: 1fr 1fr; }
  .daypanel .sitterline .dg-lbl { grid-column: 1 / -1; }
  .daypanel .sitterline input[name=name], .daypanel .sitterline input[name=notes] { grid-column: 1 / -1; }
}
/* the new inline forms share the app's control style */
.dp-add input, .ck-add input, .ck-add select, .lk-form input, .lk-form select, .lk-form textarea,
.evc-form input, .evc-form select, .ev-form input, .ev-form select, .ev-form textarea {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); color: var(--ink);
  font: inherit; font-size: 14px; }
.dp-add input:focus, .ck-add input:focus, .lk-form input:focus, .lk-form textarea:focus, .evc-form input:focus,
.ev-form input:focus, .ev-form textarea:focus { background: var(--card); border-color: var(--line-2); }
button, input, select, textarea { font-family: inherit; }
.ck-due.today { color: var(--accent); font-weight: 600; }
.sh h2 { white-space: nowrap; }
/* drag an event to another day */
.blk[draggable] { cursor: grab; }
.blk.dragging { opacity: .4; }
.bcol.drop-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }

/* ============================================================
   DIRECTION A — rolled out to Classes, To-Dos, Rocks, Finances,
   Scorecard (pages marked .a2). A section is a serif title over
   a rule on the page; a box is kept only for a real unit.
   ============================================================ */
.a2 .card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 32px; }
.a2 .card > h2:first-child {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 700 19px/1.25 var(--serif); letter-spacing: -.005em; color: var(--ink);
  border-bottom: 1.5px solid var(--ink); padding-bottom: 7px; margin: 0 0 4px; }
.a2 .card > h2:first-child .muted, .a2 .card > h2:first-child .score, .a2 .card > h2:first-child .nw-gtot {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; }
.a2 .card > h2:first-child .nw-gtot { font-size: 14px; font-weight: 600; }
.a2 .card .dwrap { margin-inline: 0; }
.a2 .card > .dwrap:first-child { margin-top: 0; }
.a2 .dtable thead th { background: var(--bg); }
.a2 .dtable tbody tr:hover td { background: var(--raised); }

/* real units keep a box */
.a2 .card.rock, .a2 .card.highlight, .a2 .login-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.a2 .card.highlight { background: var(--highlight); border-color: var(--highlight-line); }
.a2 .card.rock:hover { border-color: var(--line-2); }
.a2 .card.empty { text-align: center; padding: 26px 0; }

/* add forms: a dashed drop-zone, the same as "+ New event" on Schedule */
.a2 details.card.add { background: none; border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 0; margin-bottom: 26px; }
.a2 details.card.add > summary { color: var(--ink-2); font-weight: 500; font-size: 15px; padding: 13px 18px; }
.a2 details.card.add[open] { background: var(--card); border-style: solid; border-color: var(--line); }
.a2 details.card.add form { padding: 0 18px 16px; }

/* completed / folded lists read as a quiet section footer */
.a2 details.donebox-card { border-top: 1px solid var(--line); padding-top: 4px; }
.a2 details.donebox-card > summary { font: 600 14px var(--sans); color: var(--muted); padding: 10px 0; }

/* Net Worth hero: the number, left-aligned like a statement */
.a2 .card.nw-hero { text-align: start; padding: 4px 0 6px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.a2 .nw-hero .nw-net { font: 700 46px/1.05 var(--serif); letter-spacing: -.02em; }
.a2 .nw-hero .nw-split, .a2 .nw-incomplete { justify-content: flex-start; text-align: start; }
.a2 .nw-hero .nw-bars { max-width: 560px; }

/* Scorecard's three tiles become B's summary line */
.a2 .stats { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 4px 0 26px; }
.a2 .stat { background: none; border: 0; padding: 0; text-align: start; flex: none; }
.a2 .stat .num { font: 600 22px/1.2 var(--sans); letter-spacing: -.01em; }
.a2 .stat .lbl { font-size: 12.5px; color: var(--muted); }
.a2 .bandcell { border-radius: var(--r-md); }

/* rows inside sections: a touch more air, since there is no box around them */
.a2 .nw-row, .a2 .todo, .a2 .clsrow, .a2 .txn, .a2 .flag, .a2 .win, .a2 .alarmrow { padding-top: 11px; padding-bottom: 11px; }

@media (max-width: 640px) {
  .a2 .nw-hero .nw-net { font-size: 38px; }
  .a2 .stats { flex-wrap: nowrap; overflow-x: auto; gap: 22px; margin-inline: -16px; padding-inline: 16px; }
}
/* finance pages carry tables and charts: give them the width */
.wrap.fin { max-width: 1040px; }
/* every hero number reads left-aligned, like a statement */
.a2 .nw-hero { text-align: start; }
.a2 .nw-hero .nw-net { font: 700 46px/1.05 var(--serif); letter-spacing: -.02em; }
.a2 .nw-hero .muted { text-align: start; }
/* chips that pick a month or a filter: quiet, only the chosen one stands out */
.a2 a.chip { background: none; border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }
.a2 a.chip:hover { border-color: var(--line-2); color: var(--ink); }
.a2 a.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* primary action = the same dark button everywhere */
.a2 .addbtn { background: var(--ink); color: var(--bg); border-radius: var(--r-md); font-weight: 500; padding: 8px 14px; }
.a2 .addbtn:hover { opacity: .88; background: var(--ink); }
.a2 .daynav { justify-content: flex-start; }
/* edit forms: two columns of fields, a normal-size primary Save, a quiet Delete */
.a2 .card:has(> .fld + .fld), .a2 form.nw-form:has(> .fld + .fld), .a2 .card > form:has(> .fld + .fld) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; align-items: start; }
.a2 .card:has(> .fld + .fld) > h2, .a2 .fld:has(textarea) { grid-column: 1 / -1; }
.a2 .card .fld input, .a2 .card .fld select, .a2 .card .fld textarea, .a2 .nw-form .fld input, .a2 .nw-form .fld select {
  width: 100%; margin-top: 4px; }
.a2 button.save, .a2 .nw-form > button[type=submit], .a2 .card > form > button[type=submit] {
  grid-column: 1 / -1; justify-self: start; width: auto; padding: 9px 18px; font-size: 14px; font-weight: 500;
  border-radius: var(--r-md); background: var(--ink); color: var(--bg); margin-top: 8px; }
.a2 button.save:hover, .a2 .nw-form > button[type=submit]:hover, .a2 .card > form > button[type=submit]:hover { opacity: .88; background: var(--ink); }
.a2 button.danger, .a2 .del-full button { width: auto; padding: 8px 14px; font-size: 13.5px; font-weight: 500;
  background: none; color: var(--neg); border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 18px; }
.a2 button.danger:hover, .a2 .del-full button:hover { background: var(--neg-soft); border-color: var(--neg-line); }
@media (max-width: 640px) {
  .a2 .card:has(> .fld + .fld), .a2 form.nw-form:has(> .fld + .fld), .a2 .card > form:has(> .fld + .fld) { grid-template-columns: 1fr; }
}

/* Classes — the seven days as equal columns. The cards stretch to the tallest in
   their row and the add action is pushed to the bottom of each, so "+ add to
   Tuesday" sits on one line across the grid instead of wherever that day's list
   happened to end. */
.clsweek { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; align-items: stretch; }
.clsweek > .card { display: flex; flex-direction: column; }
.clsweek > .card > .miniadd { margin-top: auto; padding-top: var(--s3); }
/* A class row reads: time | what, then who · where. The activity is the title;
   the person leads the second line in ink so "who has what" still scans down the
   column. (It used to be a grey bold name glued to a black bold activity, which
   read as one odd phrase — "Alma Yoga".) */
.clsrow { gap: var(--s3); }
.clstime { flex: none; width: 52px; min-width: 0; font-size: var(--t-md); font-weight: 500;
  color: var(--ink); line-height: 20px; }
.clsend { display: block; color: var(--muted); font-weight: 400; line-height: 16px; }
.clsact { font-size: var(--t-base); font-weight: 600; color: var(--ink); line-height: 20px; }
.clsact[lang="he"] { font-size: 13.5px; font-weight: 700; }
.clsmeta { font-size: var(--t-sm); color: var(--muted); line-height: 16px; }
.clswho { color: var(--ink-2); font-weight: 500; }
.clsideas { margin-top: var(--s6); }

/* The day panel. On a desktop the whole day is on screen at once, so the editing
   controls stay open and sit where they always have — above the events.
   On a phone they filled the screen before a single event was visible, so the day
   reads first and the controls collapse behind one action at the bottom. */
.daypanel { display: flex; flex-direction: column; }
.dp-who-edit { order: 1; }
.dp-events  { order: 2; }
.dp-add-edit { order: 3; }
.dp-edit > summary { display: none; }
@media (max-width: 640px) {
  /* the day first, then the thing you came to do, then the rest */
  .dp-events { order: 1; }
  .dp-add-edit { order: 2; margin-top: var(--s4); }
  .dp-who-edit { order: 3; }
  .dp-edit > summary { display: block; padding: 11px 14px; margin-top: var(--s2);
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
    font-weight: 600; text-align: center; list-style: none; cursor: pointer; }
  .dp-edit > summary::-webkit-details-marker { display: none; }
  .dp-edit[open] > summary { margin-bottom: var(--s3); }
}

/* ============================================================
   HEBREW TEXT in an English page
   The `bidi` filter tags Hebrew titles lang="he" on the TEXT only; plaintext
   runs that text right-to-left while it stays aligned to the page's start edge.
   Rows keep the page direction, so the checkbox, chips and pills stay on the
   same side in a mixed list and the eye scans one straight edge.
   Sans Hebrew = Assistant, serif = Frank Ruhl Libre, tuned per component:
   - Measured (canvas glyph bounds, 2026-09-24): at the same px, Assistant's
     Hebrew letters stand 0.57em vs Plex's x-height 0.52em, and Frank Ruhl's
     Hebrew 0.60em vs its own Latin x 0.47em. So Hebrew reads BIGGER than the
     English beside it and steps DOWN (~0.92 sans, ~0.88 serif) to match.
   - Frank Ruhl's Hebrew bold is denser than its Latin bold: one weight down.
   - Tracking is for Latin; negative letter-spacing crushes Hebrew.
   ============================================================ */
[lang="he"] { unicode-bidi: plaintext; letter-spacing: 0; }
/* plaintext also turns "start" into the text's own side, so pin it to the page's */
[lang="he"]:dir(ltr) { text-align: left; }
[lang="he"]:dir(rtl) { text-align: right; }
.todo-title[lang="he"] { font-size: 13.5px; font-weight: 700; line-height: 1.45; }   /* Assistant 600 is lighter than Plex 600 */
.todo-title.strike[lang="he"] { font-weight: 600; }
.rock-title[lang="he"] { font-size: 15.5px; line-height: 1.4; }
.page-head h1[lang="he"] { font-weight: 500; font-size: 30px; line-height: 1.25; }
@media (max-width: 640px) { .page-head h1[lang="he"] { font-size: 25px; } }

/* Net Worth — Liabilities split into long and short term (view only). Sentence-case
   sub-heads with their own total, not an all-caps eyebrow. */
.nw-subhead { display: flex; justify-content: space-between; align-items: baseline;
  margin: var(--s4) 0 0; padding-bottom: var(--s1); border-bottom: 1px solid var(--line-2);
  font-size: var(--t-md); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nw-subhead + .nw-row, .nw-subhead + .nw-debt > summary { border-top: 0; }
/* a car with no loan yet: one quiet action under it */
.nw-addloan { margin: 0; padding-inline-start: 14px; }
.a2 .card .nw-addloan button[type="submit"] { all: unset; cursor: pointer; font-size: var(--t-sm);
  font-weight: 600; color: var(--accent); padding: 0 0 10px; }
/* a debt shown here but edited on its asset: same chevron + amount column as the
   editable rows below it, so the figures line up */
.nw-lialink { gap: 10px; }
.nw-lialink .nw-live { padding-inline-end: 0; }
.nw-lialink::after { content: "›"; width: 12px; font-size: 15px; color: var(--muted); }
.a2 .card .nw-addloan button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Scorecard — move a card that was logged after midnight to the date it belongs to.
   Quiet by default: one link-line under the title, a single field when open. */
.movecard { margin: 0 0 var(--s3); }
.movecard > summary { display: inline-flex; font-size: var(--t-md); font-weight: 500; color: var(--accent); }
.movecard-form { display: flex; align-items: flex-end; gap: var(--s2); margin-top: var(--s2); }
.movecard-form .fld { margin: 0; flex: 0 1 200px; }
.a2 .movecard-form > button.btn-quiet[type="submit"] { width: auto; padding: 9px 16px; background: var(--card);
  color: var(--ink); border: 1px solid var(--line-2); font-weight: 500; }
.movecard .small { margin: var(--s1) 0 0; }

/* ---- Issues: the list the weekly meeting works down ---- */
/* Capture has to survive a busy day, so the box that takes a new issue is the
   first thing on the page and one line of text is a whole issue. */
.iss-add { display: flex; gap: var(--s2); margin: var(--s4) 0 var(--s5); }
.iss-add input { flex: 1; min-height: var(--tap); }
.iss-add button { white-space: nowrap; }
.issue > summary.issrow { display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; padding: var(--row-y) 0; border-top: 1px solid var(--line);
  cursor: pointer; list-style: none; }
.issue:first-of-type > summary.issrow { border-top: 0; }
.issue > summary.issrow::-webkit-details-marker { display: none; }
.isstext { flex: 1; min-width: 12ch; font-weight: 500; }
.issmeta { display: inline-flex; align-items: baseline; gap: var(--s2);
  font-size: var(--t-sm); white-space: nowrap; }
.issue[open] > summary.issrow { border-bottom: 1px solid var(--line); }
.iss-body { padding: var(--s3) 0 var(--s4); }
.iss-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 var(--s3); }
.iss-form .iss-wide { grid-column: 1 / -1; }
.iss-acts { grid-column: 1 / -1; }
.iss-acts button { width: auto; padding: 8px 16px; }
.iss-solve { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line); }
.iss-solve input { flex: 1; }
.iss-solve button[type="submit"] { white-space: nowrap; }
@media (max-width: 640px) {
  .issmeta { width: 100%; }
  .iss-solve { flex-wrap: wrap; }
  .iss-solve input { flex: 1 1 100%; }
}

/* ---- Vault: inline edit hidden behind a quiet ⋯ so rows stay scannable ---- */
.vault-edit { display: inline-block; }
.vault-edit > summary { display: inline-block; list-style: none; cursor: pointer;
  color: var(--muted); padding: 0 6px; }
.vault-edit > summary::-webkit-details-marker { display: none; }
.vault-edit > summary:hover { color: var(--accent); }
.vault-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 var(--s3); padding: var(--s3) 0; }
.vault-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); }
.vault-acts button[type="submit"] { width: auto; padding: 8px 16px; }

/* ---- The wall display: read from across a kitchen, never tapped ---- */
/* Its own page, not the app shell — no nav, no forms, nothing to mis-tap while
   wiping a counter. Sizes are set in vw so one screen fills whatever it is on. */
.wall { background: var(--bg); color: var(--ink); margin: 0; }
.wall-in { padding: clamp(16px, 2.5vw, 40px); max-width: 1600px; margin: 0 auto; }
.wall-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); border-bottom: 2px solid var(--ink); padding-bottom: clamp(8px, 1vw, 16px); }
.wall-head h1 { font: 700 clamp(30px, 5vw, 64px)/1 var(--serif); margin: 0; }
.wall-date { margin: 4px 0 0; color: var(--muted); font-size: clamp(13px, 1.4vw, 20px); }
.wall-clock { font: 500 clamp(28px, 4.5vw, 58px)/1 var(--serif); color: var(--accent);
  font-variant-numeric: tabular-nums; }
.wall-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px); margin-top: clamp(14px, 2vw, 30px); }
.wall-col h2 { font: 500 clamp(13px, 1.3vw, 17px)/1 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(8px, 1vw, 14px); }
.wall-col h2.wall-sub { margin-top: clamp(20px, 2.5vw, 38px); }
.wall-row { display: flex; gap: clamp(10px, 1.4vw, 22px); align-items: baseline;
  padding: clamp(7px, .9vw, 14px) 0; border-top: 1px solid var(--line); }
.wall-row:first-of-type { border-top: 0; }
.wall-time { min-width: 5.5ch; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; font-size: clamp(15px, 1.8vw, 26px); }
.wall-what { font-size: clamp(17px, 2.1vw, 30px); font-weight: 500; line-height: 1.25; }
.wall-what small { display: block; font-size: .62em; font-weight: 400; color: var(--muted); }
.wall-none { color: var(--muted); font-size: clamp(15px, 1.7vw, 22px); margin: 0; }
.wall-big > div { padding: clamp(6px, .8vw, 12px) 0; border-top: 1px solid var(--line); }
.wall-big > div:first-child { border-top: 0; }
.wall-lbl { display: block; color: var(--muted); font-size: clamp(11px, 1.1vw, 15px); }
.wall-big b { font-size: clamp(19px, 2.4vw, 34px); font-weight: 600; }
.wall-big small { color: var(--muted); font-size: clamp(12px, 1.2vw, 17px); margin-inline-start: 8px; }
.wall-meals { display: flex; flex-wrap: wrap; gap: var(--s2); }
.wall-meal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 6px 12px; font-size: clamp(14px, 1.6vw, 22px); }
.wall-soon { justify-content: space-between; }
.wall-when { color: var(--accent); font-size: clamp(13px, 1.4vw, 19px); white-space: nowrap; }
.wall-foot { margin: clamp(18px, 2.5vw, 34px) 0 0; color: var(--muted);
  font-size: clamp(11px, 1.1vw, 14px); }
@media (max-width: 760px) { .wall-cols { grid-template-columns: 1fr; } }

/* Real estate header: today's value (gold) beside the equity (green), each labelled,
   so the two figures can't be mistaken for each other. Display only. */
.nw-gpair { display: inline-flex; align-items: baseline; gap: var(--s4); }
.a2 .card > h2:first-child .nw-gval { font-size: 14px; font-weight: 600; color: var(--warn);
  font-family: var(--sans); font-variant-numeric: tabular-nums; }
.nw-gpair small { margin-inline-start: 4px; font-size: var(--t-xs); font-weight: 500; color: var(--muted); }

/* ---- Groceries: built for one hand, in an aisle, on bad signal ---- */
/* The tick target is the whole left edge of the row at a thumb's width, and the
   list reads as a list — no card, no table chrome between the items. */
.gro-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.gro-add { display: flex; gap: var(--s2); margin: 0 0 var(--s5); }
.gro-add input { flex: 1; min-height: var(--tap); }
.gro-add button { flex: none; width: auto; white-space: nowrap; }
.gro-list { list-style: none; margin: 0; padding: 0; }
.gro-row { display: flex; align-items: center; gap: var(--s3); padding: 4px 0;
  border-top: 1px solid var(--line); min-height: 48px; }
.gro-row:first-child { border-top: 0; }
.gro-row form { margin: 0; }
.gro-box { all: unset; box-sizing: border-box; display: block; cursor: pointer;
  width: 26px; height: 26px; margin: 8px 4px; border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--card); position: relative; }
.gro-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gro-row.is-done .gro-box { background: var(--ink); border-color: var(--ink); }
.gro-row.is-done .gro-box::after { content: ""; position: absolute; inset-inline-start: 8px; top: 3px;
  width: 6px; height: 12px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gro-name { flex: 1; min-width: 0; font-size: var(--t-lg); }
.gro-name small { display: block; font-size: var(--t-sm); color: var(--muted); }
.gro-row.is-done .gro-name { color: var(--muted); text-decoration: line-through; }
.gro-row .del button { padding: 8px; }

/* ---- Recurring: the name is the rename control, quietly ---- */
.rec-name { display: inline; }
.rec-name > summary { display: inline; list-style: none; cursor: pointer; font-weight: 600;
  text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; }
.rec-name > summary::-webkit-details-marker { display: none; }
.rec-name > summary::before, .rec-name > summary::after { content: none; }
.rec-name > summary:hover { text-decoration-color: var(--accent); }
.rec-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s2) 0; }
.rec-form input[type=text] { flex: 1 1 180px; min-width: 0; }
.rec-form button { width: auto; padding: 6px 12px; }

/* ---- Classes: drag between days, and between a kid's ideas and the week ---- */
.clsrow-edit[draggable] > summary { cursor: grab; }
.clsrow-edit.dragging { opacity: .4; }
.cls-drop.drop-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: var(--radius); }
.clsnote { display: block; margin-top: 2px; color: var(--muted); font-style: italic; }
.idea-sched { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding: 0 0 var(--s3); margin-top: calc(-1 * var(--s2)); }
.idea-sched select { width: auto; flex: 0 1 160px; min-height: var(--tap); padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); font: inherit; color: var(--ink); }
.idea-sched button { width: auto; min-height: var(--tap); }
.clsideas .clsweek { margin-top: var(--s3); }

/* Schedule — This week / Next week. A small segmented switch on the week line; the
   board is one repeating template, so this only changes which dates label it. */
.wk-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.wk-switch { display: inline-flex; margin-inline-start: auto; border: 1px solid var(--line-2);
  border-radius: var(--r-md); overflow: hidden; align-self: center; }
.wk-switch a { padding: 5px 12px; font-size: var(--t-md); font-weight: 500; color: var(--ink-2); }
.wk-switch a + a { border-inline-start: 1px solid var(--line-2); }
.wk-switch a:hover { background: var(--chip); }
.wk-switch a.on { background: var(--ink); color: var(--bg); }

/* ---- Tables on a phone: the amount is never the thing you have to scroll to ----
   Every table had min-width: 460px, wider than a 390px phone, so the last column —
   almost always the money — sat off the right edge inside a sideways scroll with
   nothing to say it was there. On a phone the table now fits the screen: the name
   column is the one that gives (it wraps), numbers never wrap, and the least
   important columns step aside (`.m-hide`) before the amount does. */
@media (max-width: 640px) {
  .dtable { min-width: 0; font-size: 12.5px; }
  .dtable th { white-space: normal; }
  .dtable td, .dtable th { padding-inline-start: 8px; }
  .dtable td:not(.nm) { white-space: nowrap; }
  .dtable .nm { min-width: 0; width: 100%; overflow-wrap: anywhere; }
  .dtable .m-hide { display: none; }
}
.dtable td.wrap { white-space: normal; text-align: start; }
.dtable .rev-sub { width: 172px; }
@media (max-width: 640px) {
  .dtable td.wrap { white-space: normal; }
  /* the review list's controls shrink to the column instead of forcing it wide */
  .dtable td select, .dtable td input[type=text] { width: 100%; max-width: 116px; min-width: 0; }
  .dtable .rev-sub { width: 100%; }
}

/* ---- To categorise (Bank tab) ---- */
.tab-count { display: inline-block; margin-inline-start: 6px; padding: 0 6px; min-width: 18px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink, #fff);
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; vertical-align: 1px; }
.todo-tabs { margin: 2px 0 var(--s3); }
.todo-tabs .chip b { margin-inline-start: 4px; }
.todo-table .todo-cat { text-align: start; min-width: 190px; }
.todo-cat select, .todo-cat input[type=text] { display: block; width: 100%; margin: 0 0 6px; }
.todo-cat form { display: contents; }
.todo-save { width: auto; padding: 6px 14px; }
.todo-guess { all: unset; cursor: pointer; display: inline-block; margin-top: 6px; padding: 3px 9px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600;
  color: var(--accent); background: var(--card); }
.todo-guess:hover { border-color: var(--accent); }
.todo-guess:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On a phone each row stacks: what it was and how much on top, the controls across
   the full width underneath — a 60px dropdown is not something you can use. */
@media (max-width: 640px) {
  .todo-table thead { display: none; }
  .todo-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s3); border-top: 1px solid var(--line); padding: var(--s3) 0; }
  .todo-table tbody tr td { border-top: 0; padding: 0; }
  .todo-table td.nm { grid-column: 1; }
  .todo-table td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: start; font-weight: 600; }
  .todo-table td.todo-cat { grid-column: 1 / -1; display: flex; gap: var(--s2); align-items: center;
    margin-top: var(--s2); min-width: 0; width: auto; }
  .todo-table .todo-cat select { flex: 1.3 1 0; margin: 0; max-width: none; min-height: var(--tap); }
  .todo-table .todo-cat input[type=text] { flex: 1 1 0; margin: 0; max-width: none; min-height: var(--tap); }
  .todo-table .todo-save { flex: none; min-height: var(--tap); }
  .todo-table td.m-hide { display: none; }
}
.todo-newcat, .todo-note { display: block; width: 100%; margin: 0 0 6px; }
.bk-acts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.bk-acts a.btn-primary { display: inline-flex; align-items: center; padding: 8px 16px; text-decoration: none; }
@media (max-width: 640px) {
  .todo-table td.todo-cat { flex-wrap: wrap; }
  .todo-table .todo-newcat, .todo-table .todo-note { flex: 1 1 100%; margin: 0; min-height: var(--tap); }
  .todo-table .todo-newcat[hidden] { display: none; }
}
.todo-newcat[hidden] { display: none !important; }   /* display:block above would otherwise beat [hidden] */

/* ---- Projection ---- */
.proj-bars { margin: 6px 0 0; }
.proj-table .proj-amt { width: 104px; }
.proj-table .proj-amt input { width: 92px; text-align: end; padding: 5px 8px; min-height: 0;
  font-variant-numeric: tabular-nums; }
.proj-table .proj-amt input.is-over { border-color: var(--accent); background: var(--accent-soft); }
.proj-table tfoot tr:last-child td { font-size: 14px; }
.proj-plan { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.proj-plan input[name=name] { flex: 2 1 180px; }
.proj-plan input[name=amount] { flex: 1 1 100px; }
.proj-plan input[type=date] { flex: 1 1 140px; }
.proj-plan button { width: auto; }
@media (max-width: 640px) {
  .proj-table .proj-amt { width: 78px; }
  .proj-table .proj-amt input { width: 70px; }
}

/* ---- Type-to-search category box + the "check" flag ---- */
.cat-wrap { display: block; min-width: 0; }
.cat-wrap .cat-box { width: 100%; }
.cat-hint { display: block; margin: 4px 2px 6px; font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.cat-hint b { font-weight: 600; }
.cat-pick { all: unset; cursor: pointer; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; }
.cat-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Off, it is quiet — a flag on every row would be noise. On, it is the one mark on the row. */
.chk { all: unset; cursor: pointer; display: inline-block; margin: 6px 6px 0 0; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600;
  color: var(--muted); background: transparent; white-space: nowrap; }
.chk:hover { color: var(--ink-2); border-color: var(--line-2); }
.chk.is-on { color: var(--accent-ink, #fff); background: var(--accent); border-color: var(--accent); }
.chk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lineitem-sub .cat-wrap { flex: 1 1 140px; }
.lineitem-sub .chk { margin: 0; }
@media (max-width: 640px) {
  .todo-table .todo-cat .cat-wrap { flex: 1.3 1 0; min-width: 0; }
  .todo-table .todo-cat .cat-wrap .cat-box { min-height: var(--tap); margin: 0; }
  .todo-table .todo-cat .cat-hint { margin-top: 4px; }
}
/* Phone: category on its own line (with room for its hint), then sub-category + Save,
   then the note — the note box had been squeezing the category down to four letters. */
@media (max-width: 640px) {
  .todo-table td.todo-cat .cat-wrap { flex: 1 1 100%; order: 1; }
  .todo-table td.todo-cat input[name=category2] { flex: 1 1 0; order: 2; }
  .todo-table td.todo-cat .todo-save { order: 3; }
  .todo-table td.todo-cat input.todo-note { flex: 1 1 100%; order: 4; }
  .todo-table td.todo-cat { row-gap: var(--s2); }
}
.cat-hint { white-space: normal; }   /* table cells are nowrap on phones; the hint is a sentence */

/* ---- Cash tab: joint / operating ---- */
/* a subtotal closes the rows above it: same size as a row, bold, a rule on top —
   not the small-caps group header, which reads as the title of what follows */
.dtable tr.subtot td { font-weight: 700; border-top: 1px solid var(--line-2); }
.dtable tbody tr.subtot:hover td { background: none; }
.dtable tr.subtot + tr td { padding-top: var(--s4); }
.dtable .sub.flag-neg { color: var(--neg); }
.dtable tr.solo td.nm { font-weight: 600; }

/* actual months, then projected dates: the projected side sits on a faint tint
   behind a dashed rule, so the eye knows where history stops */
.flow-table th, .flow-table td { white-space: nowrap; }
.flow-table tr > :first-child { white-space: normal; min-width: 150px; }
.flow-table .fc { background: var(--sunken); }
.flow-table .fc-first { border-inline-start: 1px dashed var(--line-2); padding-inline-start: 14px; }
.flow-table tr > :nth-last-child(5) { padding-inline-end: 12px; }
.flow-table tr.flow-grp th { font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); padding-bottom: 2px; border-bottom: none; text-align: center; }
.flow-table tr.flow-grp th.fc-h { color: var(--accent-dark); border-inline-start: 1px dashed var(--line-2); }
.flow-table tfoot tr.quiet td { font-weight: 500; color: var(--muted); border-top: none; padding-top: 4px; }
.flow-table tfoot tr.quiet td.neg { color: var(--neg); opacity: .8; }
.flow-table tfoot tr.lead td { font-size: 15px; border-top: 1px solid var(--line-2); }
.flow-table tfoot tr + tr td { border-top: none; }
.flow-table tfoot tr.lead td { border-top: 1px solid var(--line-2); }
.flow-notes { margin: 10px 2px 0; line-height: 1.5; }
.flow-notes p { margin: 0 0 6px; }
@media (max-width: 640px) {
  /* phone: the four projected dates only (today is at the top of the page); the
     "actual / projected" band would not line up once the months are hidden */
  .flow-table tr.flow-grp { display: none; }
  .flow-table th, .flow-table td { font-size: 12px; padding-inline: 4px; }
  .flow-table tr > :first-child { min-width: 0; width: 96px; max-width: 110px; font-size: 12.5px; }
  .flow-table tr > :first-child .sub { display: none; }
  .flow-table .fc-first { padding-inline-start: 4px; border-inline-start: none; }
  .flow-table tfoot tr.lead td { font-size: 13px; }
  .flow-table tr.charged { display: none; }
}

/* ---- Cash flow: month picker ---- */
.mpick { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); }
.mpick .mp-arrow { display: inline-grid; place-items: center; width: 36px; height: 36px;
  color: var(--ink-2); text-decoration: none; font-size: 20px; line-height: 1; }
.mpick a.mp-arrow:hover { background: var(--sunken); color: var(--ink); }
.mpick .mp-arrow.off { color: var(--line-2); }
.mpick .mp-sel select { border: none; background: transparent; font: inherit; font-weight: 600;
  color: var(--ink); min-height: 36px; padding: 0 6px; cursor: pointer; }
.mpick .mp-sel { border-inline: 1px solid var(--line); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.nw-tcol { color: inherit; text-decoration: none; }
a.nw-tcol.on .nw-tlbl { color: var(--ink); font-weight: 700; }
a.nw-tcol.on .nw-tbar { outline: 2px solid var(--ink); outline-offset: 1px; }
.nw-tlbl .nw-yr { display: block; font-weight: 600; color: var(--muted); font-size: 10px; }

/* ---- Cash flow: the month statement ---- */
.st-tools { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.stmt th, .stmt td { white-space: nowrap; }
.stmt td.nm { white-space: normal; }
.stmt .prev { display: none; color: var(--ink-2); }
.stmt.show-prev .prev { display: table-cell; }
.stmt tr.st-h td { font-family: var(--serif, inherit); font-size: 17px; font-weight: 700; color: var(--ink);
  padding-top: var(--s5, 22px); padding-bottom: 6px; border-top: none; border-bottom: 1px solid var(--ink); }
.stmt tbody:first-of-type tr.st-h td { padding-top: 6px; }
.stmt tr.st-side td { font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); padding-top: var(--s4); padding-bottom: 5px; }
.stmt tr.st-side td:not(:first-child) { text-transform: none; letter-spacing: 0; font-size: 13px; }
.stmt tr.st-side.in td:nth-child(2) { color: var(--pos); }
.stmt tr.st-side.out td:nth-child(2) { color: var(--ink); }
.stmt tbody tr.st-h:hover td, .stmt tbody tr.st-side:hover td { background: none; }
.stmt tr.st-cat { cursor: pointer; }
.stmt tr.st-cat .chev { display: inline-block; width: 14px; color: var(--muted); }
.stmt tr.st-cat .chev::before { content: "›"; display: inline-block; transition: none; }
.stmt tr.st-cat[aria-expanded="true"] .chev::before { transform: rotate(90deg); }
.stmt tr.st-cat[aria-expanded="true"] td { font-weight: 600; }
.stmt tr.st-cat.zero, .stmt tr.st-sub.zero { display: none; }
.stmt.show-prev tr.st-cat.zero { display: table-row; }
.stmt.show-prev tr.st-sub.zero:not([hidden]) { display: table-row; }
.stmt tr.st-cat.zero td { color: var(--muted); }
.stmt tr.st-sub td { font-size: 13px; color: var(--ink-2); padding-top: 6px; padding-bottom: 6px; }
.stmt tr.st-sub td.nm { padding-inline-start: 28px; }
.stmt tr.st-sub { cursor: pointer; }
.stmt tr.st-sub:hover td.nm { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.stmt .bud-col { color: var(--ink-2); font-size: 13px; }
.stmt .bud-col .bpct { display: inline-block; min-width: 38px; margin-inline-start: 6px; text-align: end;
  font-size: 12px; font-weight: 600; color: var(--muted); }
.stmt .bud-col .bpct.over { color: var(--neg); }
.stmt tr.subtot td { border-top: 1px solid var(--line-2); }
@media (max-width: 640px) {
  .stmt .bud-col .bnum { display: none; }        /* phone: just the % of budget */
  .stmt th, .stmt td { font-size: 12.5px; padding-inline: 5px; }
  .stmt tr.st-sub td.nm { padding-inline-start: 18px; }
}
.when-table th, .when-table td { white-space: nowrap; }
.when-table tr > :nth-child(2) { color: var(--ink-2); }
.when-table tfoot td { font-size: 15px; }
.quiet-card { padding-top: 0; }
@media (max-width: 640px) {
  .when-table th, .when-table td { font-size: 12.5px; padding-inline: 5px; }
  .when-table tfoot td { font-size: 13px; }
}
.stmt tr > :first-child { width: 46%; }
.stmt tr.st-h td, .stmt tr > td[colspan] { width: auto; }
@media (max-width: 640px) { .stmt tr > :first-child { width: auto; } }
/* a memo line: explains the row above it, isn't added into the net */
.flow-table tr.memo td { font-size: 12.5px; color: var(--muted); font-style: italic; padding-top: 3px; border-top: none; }
.flow-table tr.memo td.nm { font-style: normal; padding-inline-start: 14px; }
.flow-table tr.memo td.nm .sub { font-style: normal; }
/* travel is shown for reference: it sits inside the rows above, so it reads quieter */
.flow-table tr.trips td { color: var(--ink-2); font-style: italic; }
.flow-table tr.trips td.nm { font-style: normal; }

/* ---- big upcoming payments ---- */
.pay-table tr.soon td:first-child { border-inline-start: 3px solid var(--accent); padding-inline-start: 9px; }
.pay-table tr.past td { color: var(--muted); }
.pay-table td.pay-act { white-space: nowrap; text-align: end; }
.pay-table td.pay-act form { display: inline; }
.pay-table .btn-link { background: none; border: none; padding: 4px 6px; min-height: 0; width: auto;
  color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* !important: the generic two-column edit-form rule (.a2 .card > form:has(...)) outranks a class */
.pay-add { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto !important; gap: 10px; align-items: end; margin-top: var(--s4); }
.pay-add .fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pay-add .btn-primary { width: auto; }
@media (max-width: 640px) {
  .pay-add { grid-template-columns: 1fr 1fr !important; }
  .pay-add .fld:first-child { grid-column: 1 / -1; }
}
/* the big-payments row opens into the payments behind it */
.flow-table tr.big-row, .proj-table tr.big-row { cursor: pointer; }
.flow-table tr.big-row .chev, .proj-table tr.big-row .chev { display: inline-block; width: 14px; color: var(--muted); }
.flow-table tr.big-row .chev::before, .proj-table tr.big-row .chev::before { content: "›"; display: inline-block; }
.flow-table tr.big-row[aria-expanded="true"] .chev::before, .proj-table tr.big-row[aria-expanded="true"] .chev::before { transform: rotate(90deg); }
.flow-table tr.big-sub td, .proj-table tr.big-sub td { font-size: 13px; color: var(--ink-2); padding-top: 5px; padding-bottom: 5px; }
.flow-table tr.big-sub td.nm { padding-inline-start: 28px; }
/* any row that opens into detail rows beneath it (big payments, rental cost groups) */
tr.big-row { cursor: pointer; }
tr.big-row .chev { display: inline-block; width: 14px; color: var(--muted); }
tr.big-row .chev::before { content: "›"; display: inline-block; }
tr.big-row[aria-expanded="true"] .chev::before { transform: rotate(90deg); }
tr.big-row[aria-expanded="true"] td { font-weight: 600; }
tr.big-sub td { font-size: 13px; color: var(--ink-2); padding-top: 5px; padding-bottom: 5px; }
tr.big-sub td.nm { padding-inline-start: 28px; }
.dtable tr.share-row td { font-size: 13px; color: var(--ink-2); border-top: none; padding-top: 2px; }
.dtable tr.share-row td.nm { padding-inline-start: 14px; }

/* Cash tab: jump links to each section (a long page), sticky under the tabs */
.jumpbar { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 var(--s-4, 16px); font-size: var(--t-sm, 13px); }
.jumpbar a { color: var(--muted); font-weight: 600; }
.jumpbar a:hover { color: var(--accent); }
[id] { scroll-margin-top: 12px; }
.cell-lnk { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.cell-lnk:hover { color: var(--accent); }