/* Phone-first (360 px and up). No colour carries meaning on its own: badges always have an icon and text. */
:root {
  --fg: #1d1d1f;
  --muted: #555;
  --bg: #fafaf7;
  --card: #fff;
  --line: #ddd;
  --ok: #1b5e20;
  --warn: #7a4a00;
  --bad: #8b1a1a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.45;
}
body { margin: 0; }
header, main { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
main h1 { margin: 1rem 0 0; font-size: 1.6rem; }
.lede { margin: 0.25rem 0 1rem; color: var(--muted); }

.filters { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem; margin: 0 0 0.75rem; }
.filters legend { font-weight: 600; padding: 0 0.25rem; }
.hint { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--muted); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 0.75rem;
  border: 1px solid var(--line); border-radius: 1.5rem; background: var(--card); }
.diet { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.diet select { min-height: 2.75rem; font-size: 1rem; }

.recipes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.recipe { background: var(--card); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.recipe h2 { margin: 0; font-size: 1.15rem; }
.meta { margin: 0.25rem 0; color: var(--muted); font-size: 0.9rem; }
.badge { margin: 0.35rem 0 0; font-size: 0.9rem; padding: 0.35rem 0.5rem; border-radius: 0.35rem; border-left: 4px solid; }
.badge.verified { color: var(--ok); background: #eef6ee; }
.badge.unconfirmed { color: var(--warn); background: #fdf5e6; }
.badge.incompatible { color: var(--bad); background: #fbeeee; }

.empty, .notice { padding: 1rem; border: 1px dashed var(--line); border-radius: 0.5rem; background: var(--card); }
button { min-height: 2.75rem; padding: 0 1rem; font-size: 1rem; }
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }

@media (min-width: 40rem) {
  .recipes { grid-template-columns: repeat(2, 1fr); }
}

.filter-panel { margin: 0 0 1rem; }
.filter-panel summary { min-height: 2.75rem; display: flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; list-style: none; }
.filter-panel summary::-webkit-details-marker { display: none; }
.filter-panel summary::before { content: "▸"; }
.filter-panel[open] summary::before { content: "▾"; }
.filter-panel[open] summary { margin-bottom: 0.5rem; }
.count { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; }

/* Recipe cards: the name is the link, and the whole card is its hit area. */
.recipe { position: relative; }
.recipe h2 a { color: inherit; text-decoration: none; }
.recipe h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 0.5rem; }
.recipe h2 a:focus-visible { outline: none; }
.recipe:has(h2 a:focus-visible) { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.recipe:hover { border-color: #aaa; }

/* Recipe page (#71): read top to bottom on a phone, in text large enough to cook from. */
.recipe-page { font-size: 1.05rem; padding-bottom: 2rem; }
.recipe-page h1 { margin: 0.25rem 0 0.5rem; font-size: 1.6rem; line-height: 1.2; }
.recipe-page h1:focus { outline: none; }
.recipe-page h2 { margin: 1.5rem 0 0.5rem; font-size: 1.2rem; }
.back { margin: 0.5rem 0 0; }
.back a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #1a5fb4; }
.servings { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0; }
.servings span { font-weight: 600; margin-right: 0.25rem; }
.servings button { min-width: 2.75rem; font-size: 1.25rem; padding: 0; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card); }
.servings output { min-width: 2rem; text-align: center; font-size: 1.15rem; font-weight: 600; }
.ingredients { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ingredients li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.qty { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.prep { color: var(--muted); }
.need { margin: 0.75rem 0 0; color: var(--muted); }
.steps { margin: 0; padding-left: 1.5rem; }
.steps li { margin: 0 0 0.9rem; padding-left: 0.25rem; }
.step-time { color: var(--muted); white-space: nowrap; }
.source { margin-top: 1.5rem; font-size: 0.9rem; color: var(--muted); }

/* Recipe photos: fixed aspect so the layout doesn't jump while they load. */
.card-photo { display: block; width: calc(100% + 2rem); max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  margin: -0.75rem -1rem 0.6rem; border-radius: 0.5rem 0.5rem 0 0; background: #eee; }
.photo { margin: 0.5rem 0 0.75rem; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; background: #eee; }
.photo figcaption { margin-top: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.photo figcaption a { color: inherit; }

/* App shell: brand, the three pages, and who is signed in. Wraps onto two lines on a phone. */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line); }
.top > a { text-decoration: none; color: inherit; }
.brand { font-weight: 700; font-size: 1.15rem; }
.top nav { display: flex; gap: 0.25rem; order: 3; flex-basis: 100%; }
.top nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; color: var(--muted);
  text-decoration: none; border-radius: 0.4rem; }
.top nav a[aria-current="page"] { color: #1a5fb4; font-weight: 700; box-shadow: inset 0 -3px 0 #1a5fb4; border-radius: 0; }
.account { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); }
@media (min-width: 40rem) {
  .top nav { order: 0; flex-basis: auto; }
}
button.link { background: none; border: none; color: #1a5fb4; text-decoration: underline; padding: 0 0.25rem; cursor: pointer; }
button.primary { background: var(--fg); color: #fff; border: 1px solid var(--fg); border-radius: 0.45rem; }
button.primary:disabled { background: #888; border-color: #888; }
button.wide { display: block; width: 100%; margin: 1rem 0; }
button { border-radius: 0.45rem; border: 1px solid #999; background: var(--card); cursor: pointer; }
button:disabled { cursor: default; opacity: 0.6; }
.banner { margin: 0; padding: 0.6rem 1rem; background: #fff6d6; border-bottom: 1px solid #e0c060; font-size: 0.92rem; text-align: center; }
.sign-in { max-width: 26rem; margin: 2rem auto; }
.sign-in h1 { font-size: 1.4rem; }
.sign-in .dev { margin-top: 1.5rem; font-size: 0.9rem; }
.sign-in .dev label { display: block; margin: 0.5rem 0; }
.sign-in .dev input { min-height: 2.5rem; font-size: 1rem; padding: 0 0.5rem; }

/* The week (#62). */
.week-head { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.week-head h1 { flex: 1; margin: 0; font-size: 1.4rem; }
.range { font-weight: 400; color: var(--muted); font-size: 1rem; white-space: nowrap; }
button.icon { min-width: 2.75rem; font-size: 1.4rem; padding: 0; }
.plan-panel { margin: 0.75rem 0; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.75rem; background: var(--card); }
.plan-panel summary { min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.plan-panel .servings { margin: 0.25rem 0 0.75rem; }
.plan-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.plan-actions button { flex: 1; }
.days { list-style: none; margin: 0.5rem 0; padding: 0; border-top: 1px solid var(--line); }
.day { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); min-height: 3.5rem; }
.day .d { width: 2.8rem; font-weight: 700; flex: none; }
.day .date { font-weight: 400; color: var(--muted); }
.day .m, .pick-list .m { flex: 1; min-width: 0; }
.day .m a { color: inherit; font-weight: 600; }
.sub { display: block; color: var(--muted); font-size: 0.85rem; }
.thumb { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 0.35rem; flex: none; background: #eee; }
.day-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.day-actions button { min-height: 2.5rem; padding: 0 0.6rem; font-size: 0.9rem; }
button.add { background: none; border: 1px dashed #999; color: #1a5fb4; }
.pick-list { list-style: none; margin: 0; padding: 0; }
.pick-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.pick-list h2 { margin: 0; font-size: 1rem; }
.back button.link { min-height: 2.75rem; font-size: 1rem; padding: 0; }

/* The shopping list (#63): the main view on a phone in the shop. */
.grp { margin: 1.25rem 0 0.25rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.shop-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.shop-list .row label { display: flex; align-items: center; gap: 0.75rem; min-height: 2.9rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.shop-list input { width: 1.3rem; height: 1.3rem; flex: none; }
.shop-list .name { flex: 1; }
.shop-list .q { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-list .done .name, .shop-list .done .q { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.shopping > button { margin-top: 0.75rem; }

/* Five pages: the nav scrolls sideways on a narrow phone rather than wrapping. */
.top nav { overflow-x: auto; scrollbar-width: none; }
.top nav a { white-space: nowrap; padding: 0 0.6rem; }

/* Household (#4) and kitchen pages. */
.welcome { padding: 0.75rem 1rem; background: #eef4fb; border-left: 4px solid #1a5fb4; border-radius: 0.35rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin: 0.75rem 0; }
.inline-form label { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 12rem; font-weight: 600; }
.inline-form input, .add-stock input, .add-stock select { min-height: 2.75rem; font-size: 1rem; padding: 0 0.5rem;
  border: 1px solid #999; border-radius: 0.4rem; background: var(--card); }
.members { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.member { background: var(--card); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.member-head { display: flex; align-items: center; justify-content: space-between; }
.member h2 { margin: 0; font-size: 1.15rem; }
.tag { margin-left: 0.5rem; padding: 0.1rem 0.5rem; border: 1px solid var(--line); border-radius: 1rem; font-size: 0.75rem;
  font-weight: 400; color: var(--muted); vertical-align: middle; }
.member .summary { margin: 0.25rem 0 0.75rem; color: var(--muted); }
.strict { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.9rem; }
.status { color: var(--ok); font-weight: 600; }
.toggles { display: grid; gap: 0.4rem; margin: 0.5rem 0; }
.toggles label { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; }
.toggles button.link { justify-self: start; }
.outcome { margin: 0.5rem 0; padding: 0.6rem 0.9rem; background: #eef6ee; border-left: 4px solid var(--ok); border-radius: 0.35rem; }
.outcome p { margin: 0; }
.rules { margin: 0.35rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; color: var(--muted); }
.add-stock { display: grid; gap: 0.6rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card); }
.add-stock label { display: grid; gap: 0.25rem; font-weight: 600; }
.add-row { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.add-row label { flex: 1; min-width: 7rem; }
.suggest { list-style: none; margin: -0.3rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: 0.4rem; max-height: 14rem; overflow: auto; }
.suggest button { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.stock-row { display: flex; align-items: center; gap: 0.75rem; min-height: 2.9rem; border-bottom: 1px solid var(--line); }
.stock-row .name { flex: 1; }
.kitchen h2:not(.grp), .household h2 { margin-top: 1.5rem; }

/* Consolidated UI (#88): four places in the menu, tabs within a place, and one overview. */
.top nav { gap: 0; }
.tabs { display: flex; gap: 0.25rem; margin: 0.75rem 0 0; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.9rem; color: var(--muted);
  text-decoration: none; border-radius: 0.4rem 0.4rem 0 0; }
.tabs a[aria-current="page"] { color: var(--fg); font-weight: 700; background: var(--card); border: 1px solid var(--line);
  border-bottom-color: var(--card); margin-bottom: -1px; }
.setup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 0 0; padding: 0.6rem 0.9rem;
  background: #eef4fb; border-left: 4px solid #1a5fb4; border-radius: 0.35rem; }
.setup p { flex: 1 1 16rem; margin: 0; }

.home h1 { margin-bottom: 0.75rem; }
.home-grid { display: grid; gap: 0.75rem; }
.home-grid > * { min-width: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.card h2 { margin: 0 0 0.4rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; }
.card-head button.link { min-height: 2rem; font-size: 0.9rem; }
.tonight-dish a { display: block; font-size: 1.3rem; font-weight: 700; color: inherit; line-height: 1.25; }
.tonight-dish .hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.4rem;
  margin-bottom: 0.5rem; background: #eee; }
.glance { list-style: none; margin: 0; padding: 0; }
.glance li { display: flex; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid #eee; min-width: 0; }
.glance li:last-child { border-bottom: none; }
.glance .d { width: 2.4rem; flex: none; color: var(--muted); }
.glance a { flex: 1; min-width: 0; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glance .none { color: #999; font-style: italic; }
.glance .today { font-weight: 700; }
.glance .today .d { color: #1a5fb4; }
.big { margin: 0.25rem 0; font-size: 1.3rem; font-weight: 700; }
.progress { width: 100%; height: 0.6rem; }
.facts { margin: 0; padding-left: 1.1rem; }
.facts li { padding: 0.15rem 0; }
@media (min-width: 40rem) {
  .home-grid { grid-template-columns: 1fr 1fr; }
}

/* The week, compact (#90): a one-line plan summary, then the days. */
.plan-panel { padding: 0.4rem 0.75rem; }
.plan-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.5rem; }
.plan-summary { color: var(--muted); font-size: 0.92rem; }
.plan-panel .filters { margin-top: 0.5rem; }
.plan-panel button.wide { margin: 0.4rem 0 0.35rem; }
.outcome { padding: 0.4rem 0.75rem; font-size: 0.92rem; }
.day { min-height: 3rem; padding: 0.35rem 0; }
.thumb { width: 2.75rem; height: 2.75rem; }
.day-actions button { min-height: 2.25rem; }
.day-actions button.x { min-width: 2.25rem; padding: 0; font-size: 1.2rem; line-height: 1; color: var(--muted); }

/* Invite to link (identity #4) and joining a household. */
.invite { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.75rem; padding: 0.5rem 0.75rem;
  background: #f4f6fa; border-radius: 0.4rem; }
.invite label { display: grid; gap: 0.25rem; flex: 1 1 100%; font-weight: 600; font-size: 0.9rem; }
.invite input { min-height: 2.5rem; font: inherit; font-weight: 400; padding: 0 0.5rem; border: 1px solid #999; border-radius: 0.4rem; }
.invite .hint { flex: 1 1 100%; margin: 0; }
.join { max-width: 32rem; margin: 1.5rem auto; }
.join .facts { margin: 0.75rem 0; }

/* The joint budget (seneschal-budget #1): each person's transfer first, then the lines. */
.people { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: grid; gap: 0.75rem; }
.person { background: var(--card); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.person h2 { margin: 0; font-size: 1.05rem; }
.person p { margin: 0.3rem 0 0; }
.person .big .sub { display: block; font-size: 0.85rem; font-weight: 400; }
.person.tight { border-color: #c98a00; }
.warn { color: var(--warn); font-size: 0.9rem; }
.budget-sections { display: grid; gap: 0.75rem; }
.budget-section h2 { text-transform: none; letter-spacing: 0; color: var(--fg); font-size: 1.05rem; margin: 0; }
.budget-lines { list-style: none; margin: 0.25rem 0; padding: 0; }
.budget-lines li { border-bottom: 1px solid #eee; }
.line { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; }
.line .name { flex: 1; min-width: 0; }
.line strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.line-edit, .line-add { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem 0; }
.line-edit input, .line-add input, .split-form input, .split-form select { min-height: 2.75rem; font-size: 1rem; padding: 0 0.5rem;
  border: 1px solid #999; border-radius: 0.4rem; background: var(--card); }
.line-edit input:first-child, .line-add input:first-child { flex: 1 1 10rem; }
.line-edit input:nth-child(2), .line-add input:nth-child(2) { width: 7rem; flex: 0 0 auto; text-align: right; }
.split, .history { margin-top: 0.75rem; }
.split summary, .history summary { min-height: 2.5rem; display: flex; align-items: center; gap: 0.35rem; font-weight: 600; cursor: pointer; }
.split-form { display: grid; gap: 0.6rem; margin: 0.75rem 0; }
.split-form label { display: grid; gap: 0.25rem; font-weight: 600; }
.split-form label.strict { display: flex; font-weight: 400; }
.split-form h2 { margin: 0.5rem 0 0; font-size: 1rem; }
@media (min-width: 52rem) {
  main:has(.budget) { max-width: 64rem; }
  .budget { display: grid; grid-template-columns: 1fr 20rem; gap: 0 1.25rem; align-items: start; }
  .budget > h1, .budget > .setup, .budget > .status, .budget > .notice { grid-column: 1 / -1; }
  .budget .people { grid-column: 2; grid-row: 3 / span 3; position: sticky; top: 0.75rem; }
  .budget .budget-sections, .budget .split, .budget .history { grid-column: 1; }
}

/* Five places in the menu: tighter on narrow phones so all of them fit without scrolling. */
@media (max-width: 26rem) {
  .top nav a { padding: 0 0.45rem; font-size: 0.95rem; }
}
@media (max-width: 23rem) {
  .top nav a { padding: 0 0.3rem; font-size: 0.9rem; }
}

/* Where the money goes. Colours (validated: CVD-safe adjacent pairs) follow the part, in a fixed order. */
.part-fixed { background: #2a78d6; }
.part-joint { background: #eb6834; }
.part-personal { background: #1baf7a; }
.part-left { background: #d9d8d2; }
.charts h2 { text-transform: none; letter-spacing: 0; color: var(--fg); font-size: 1.05rem; margin: 0 0 0.5rem; }
.charts .chart-title { margin-top: 1rem; }
.tiles { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.tile { display: grid; gap: 0.1rem; padding: 0.5rem 0.6rem; border: 1px solid #eee; border-radius: 0.4rem; }
.tile strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.85rem; color: var(--muted); margin: 0 0 0.4rem; }
.legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.swatch { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; display: inline-block; }
.bar-row { margin: 0.5rem 0; }
.bar-name { margin: 0 0 0.25rem; font-weight: 600; }
.stack { display: flex; gap: 2px; height: 1.1rem; }
.seg { height: 100%; min-width: 2px; }
.seg:first-child { border-radius: 4px 0 0 4px; }
.seg:last-child { border-radius: 0 4px 4px 0; }
.seg:hover { outline: 2px solid var(--fg); outline-offset: 1px; }
.seg-labels { display: flex; gap: 2px; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg-labels span { white-space: nowrap; overflow: hidden; }
.as-table { margin: 0.5rem 0; font-size: 0.9rem; }
.as-table summary { cursor: pointer; color: #1a5fb4; }
.as-table table { border-collapse: collapse; margin-top: 0.4rem; width: 100%; }
.as-table th, .as-table td { padding: 0.25rem 0.4rem; border-bottom: 1px solid #eee; text-align: right; font-variant-numeric: tabular-nums; }
.as-table th:first-child { text-align: left; }
.as-table caption { text-align: left; color: var(--muted); padding-bottom: 0.25rem; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.hbars li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 0.7rem; }
.hbar { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.hbars strong { font-variant-numeric: tabular-nums; }
@media (min-width: 52rem) { .budget .charts { grid-column: 1; } }
@media (max-width: 30rem) {
  .hbars li { grid-template-columns: 1fr auto; row-gap: 0.15rem; }
  .hbar-name { grid-column: 1 / -1; }
}

/* Saving towards goals: one savings line (blue), goals as recessive target lines labelled in text. */
.savings { margin-top: 0.75rem; }
.savings h2 { text-transform: none; letter-spacing: 0; color: var(--fg); font-size: 1.05rem; margin: 0 0 0.5rem; }
.savings .line-add label { display: grid; gap: 0.2rem; font-weight: 600; font-size: 0.9rem; flex: 1 1 9rem; }
.timeline { width: 100%; height: auto; margin: 0.5rem 0; }
.timeline .axis { stroke: #ccc; stroke-width: 1; }
.timeline .target { stroke: #9a9890; stroke-width: 1; stroke-dasharray: 4 4; }
.timeline .savings-line { stroke: #2a78d6; stroke-width: 2; stroke-linecap: round; }
.timeline .tl-dot { fill: #2a78d6; stroke: var(--card); stroke-width: 2; }
.timeline .tl-label { font-size: 12px; fill: var(--fg); }
.timeline .tl-axis { font-size: 11px; fill: var(--muted); }
.timeline .tl-axis.end { text-anchor: end; }
@media (max-width: 30rem) {
  /* The timeline scales down with the screen; its text mustn't. */
  .timeline .tl-label { font-size: 21px; }
  .timeline .tl-axis { font-size: 19px; }
}

/* A line's items: indented under it, folded by default. */
.items { margin: 0 0 0.4rem 0.9rem; padding-left: 0.6rem; border-left: 2px solid #eee; font-size: 0.95rem; }
.items summary { cursor: pointer; color: #1a5fb4; min-height: 2rem; display: flex; align-items: center; gap: 0.25rem; }
.items .budget-lines li { border-bottom-style: dashed; }