/* Pair of Passports: the one stylesheet for every normal page. No build step.
   Bump ?v=N in templates/base.html whenever this file changes.

   Contents
     1  Tokens (colours, type, spacing, shapes)
     2  Base (text, headings, links, focus)
     3  Header and footer
     4  Page layout and page heads
     5  Buttons and text actions
     6  Forms
     7  Cards (one shared look)
     8  Tabs
     9  Tables (phones never scroll sideways)
     10 Badges, chips and category colours
     11 Help boxes and the Help guide
     12 Callouts, flash messages, empty states, error pages
     13 Front door
     14 Trips: lists, checklists, itinerary, timeline, polls, overview, today
     15 Activity, attachments, discussion
     16 Chores
     17 Recipes
     18 Recipes: social
     19 Recipes: scanning and importing
     20 Cook planner
     21 Ideas
     22 "What needs you" home page
     23 Events
     24 Toasts
     25 Print
*/

/* --- 1. Tokens ------------------------------------------------------------ */
:root {
  /* Brand, taken from the logo. White on --theme is 5.36:1. */
  --theme: #0e7490;
  --theme-dark: #155e75;
  --theme-deep: #0b4a5e;
  --theme-tint: #f0f9fb;
  --theme-tint-2: #d9eff4;

  /* Neutrals. --muted was #6b7280, which failed 4.5:1 on the tinted panels. */
  --ink: #1f2933;
  --muted: #566170;
  --bg: #f6f8f9;
  --card: #ffffff;
  --line: #e2e8ee;          /* decorative: card edges, row rules */
  --line-strong: #7b8794;   /* control edges: 3.66:1, passes the 3:1 rule */
  --link: #0e6680;          /* at least 6:1 on white, page, warning and tint */
  --placeholder: #6b7280;   /* 4.83:1. Placeholders hold the examples, so they must be readable */

  /* Status: yellow means "needs action", red means "a problem". */
  --ok: #166534;     --ok-bg: #f0fdf4;     --ok-line: #86efac;
  --warn: #92400e;   --warn-bg: #fffbeb;   --warn-line: #fcd34d;
  --danger: #991b1b; --danger-bg: #fef2f2; --danger-line: #fca5a5;
  --danger-solid: #b91c1c;  /* white on it is 6.47:1 */

  /* Category fills: white text passes 4.5:1 on every one. */
  --cat-transport: #0e7490;
  --cat-lodging: #7c3aed;
  --cat-activity: #15803d;
  --cat-dining: #c2410c;
  --cat-logistics: #475569;
  --cat-other: #a21caf;

  /* Type: seven sizes and nothing below 12px. Add no new font sizes. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.125rem);
  --text-hero: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  --leading: 1.5;
  --leading-tight: 1.2;

  /* Spacing: 4px base. */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;
  --gutter: 1rem;

  /* Shapes. */
  --r-sm: 6px;      /* thumbnails, small boxes inside cards */
  --r-md: 10px;     /* controls, buttons, callouts */
  --r-lg: 14px;     /* cards */
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 42, 56, 0.06), 0 1px 3px rgba(16, 42, 56, 0.05);
  --shadow-2: 0 6px 18px rgba(16, 42, 56, 0.12);
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--theme);

  /* Tap sizes. */
  --tap: 2.75rem;        /* 44px */
  --tap-small: 2.25rem;  /* 36px; small buttons grow to 40px on phones */

  /* Older names, still used by a few page-level styles. */
  --accent: var(--theme);
  --accent-dark: var(--theme-dark);
}
@media (min-width: 641px) { :root { --gutter: 1.5rem; } }

/* --- 2. Base -------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: var(--leading);
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { line-height: var(--leading-tight); color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--text-2xl); margin: 0 0 var(--s-2); letter-spacing: -0.01em; }
h2 { font-size: var(--text-xl); margin: var(--s-6) 0 var(--s-3); }
h3 { font-size: var(--text-lg); margin: var(--s-5) 0 var(--s-2); }
h4 { font-size: var(--text-base); margin: var(--s-4) 0 var(--s-2); }

/* :where() has no specificity, so every component's own link colour still wins.
   Without this rule links were browser blue, then purple once visited. */
:where(main a, .site-footer a) { color: var(--link); text-underline-offset: 0.15em; }
:where(main a:hover, .site-footer a:hover) { color: var(--theme-deep); }

/* One focus look on everything; inputs used to get the browser's black ring. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid transparent;  /* still shows in Windows high-contrast mode */
  box-shadow: var(--focus);
}

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

.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.print-only { display: none; }

/* Keyboard users jump past the header; only visible once focused. */
.skip-link {
  position: absolute; left: var(--s-2); top: -4rem; z-index: 60;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-md);
  background: var(--theme); color: #fff; font-weight: 600;
}
.skip-link:focus { top: var(--s-2); }

/* --- 3. Header and footer ------------------------------------------------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) var(--gutter);
  background: var(--card);
  border-top: 3px solid var(--theme);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--theme-dark);
  text-decoration: none;
}
.brand img { display: block; border-radius: var(--r-sm); }

.site-header nav { display: flex; gap: var(--s-1); align-items: center; }
.site-header nav a, .user-menu summary { white-space: nowrap; }
.site-header nav a { color: var(--ink); text-decoration: none; transition: background 0.15s, color 0.15s; }
.site-header nav a:hover { color: var(--theme); }
.site-header nav > a:not(.new-badge) { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); }
.site-header nav > a:not(.new-badge):hover { background: var(--theme-tint); color: var(--theme-dark); }
/* Which area you're in: base.html sets aria-current from the URL's app. */
.site-header nav a[aria-current="page"] {
  background: var(--theme-tint);
  color: var(--theme-dark);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--theme);
}
/* Must out-rank ".site-header nav a", which made this dark on teal (2.75:1)
   and, on hover, teal on teal. */
.site-header nav a.new-badge,
.site-header nav a.new-badge:hover { color: #fff; background: var(--theme); }
.site-header nav a.new-badge { display: inline-flex; align-items: center; min-height: 1.75rem; }

.inline-form { display: inline; }

/* Account menu (<details>, so it works without JavaScript). */
.user-menu { position: relative; }
.user-menu summary {
  cursor: pointer;
  list-style: none;       /* hide the default disclosure triangle */
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover,
.user-menu[open] summary { color: var(--theme); background: var(--bg); }
/* A long username shouldn't push the header wider than the phone. */
.user-menu-name { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; }
.user-menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 11rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: var(--s-2) 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.user-menu-items a,
.user-menu-items .link-button {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  width: 100%;
  text-align: left;
  padding: var(--s-2) var(--s-4);
  color: var(--ink);
  text-decoration: none;
}
.user-menu-items a:hover,
.user-menu-items .link-button:hover { background: var(--bg); color: var(--theme); }

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
  padding: var(--s-5) var(--gutter);
  border-top: 1px solid var(--line);
}
.site-footer p { margin: var(--s-1) 0; }
.footer-links a { display: inline-block; padding: var(--s-2) var(--s-1); }

/* Phones: two rows (brand and account, then the areas). It was three rows
   whenever a badge showed, a quarter of the screen. Help moves into the account
   menu and footer so the row fits. */
@media (max-width: 480px) {
  .nav-help { display: none; }
  .site-header { flex-wrap: wrap; padding: var(--s-1) var(--gutter); row-gap: 0; }
  .site-header nav { display: contents; }
  .site-header .brand { flex: 1 1 calc(100% - 9rem); order: 1; font-size: var(--text-base); gap: var(--s-1); }
  .site-header .user-menu { order: 2; margin-left: auto; }
  .site-header nav > a { order: 3; }
  .site-header nav > a:not(.new-badge) { padding: var(--s-2); margin-left: calc(var(--s-2) * -0.5); }
  .site-header nav > a:first-of-type { margin-left: calc(var(--s-2) * -1); }
  .site-header nav a.new-badge { align-self: center; }
  /* Logged in, force the break after the account menu; otherwise a short
     username leaves room for the first area link on the top row. */
  .site-header:has(.user-menu) { justify-content: flex-start; }
  .site-header:has(.user-menu)::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
}

/* --- 4. Page layout and page heads ---------------------------------------- */
.container {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-6);
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* On phones the buttons drop below the title instead of squeezing it. */
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
}
.page-head > div:first-child { flex: 1 1 16rem; min-width: 0; }
.page-head h1, .page-head p { margin-top: 0; margin-bottom: var(--s-1); }

.legal-page { max-width: 42rem; }
.legal-page h2 { font-size: var(--text-lg); margin-top: var(--s-5); }

/* --- 5. Buttons and text actions ------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  background: var(--theme);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* font-family only. This used to be "font: inherit", which also overrode the
   size classes, so a small <button> rendered larger than a small <a>. */
button.button { font-family: inherit; }
.button:hover { background: var(--theme-dark); }
.button:active { background: var(--theme-deep); }

/* White with an outline: the old pale grey looked disabled. */
.button-secondary { background: var(--card); color: var(--theme-dark); border-color: var(--line-strong); }
.button-secondary:hover { background: var(--theme-tint); color: var(--theme-dark); }
.button-secondary:active { background: var(--theme-tint-2); }

.button-danger { background: var(--danger-solid); }
.button-danger:hover { background: var(--danger); }
/* Solid red is only for the point of no return: a confirm page's submit button
   or a danger zone. A "Delete" beside Edit and Print, or a small "Remove" in a
   list, is a red text action, so it doesn't shout as loudly as the main task. */
a.button-danger, .button-small.button-danger {
  background: none;
  color: var(--danger);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 400;
}
a.button-danger:hover, .button-small.button-danger:hover { background: var(--danger-bg); color: var(--danger); }
.danger-zone a.button-danger { background: var(--danger-solid); color: #fff; text-decoration: none; font-weight: 600; }
.danger-zone a.button-danger:hover { background: var(--danger); color: #fff; }

.button-voted { background: var(--ok); }
.button-voted:hover { background: #14532d; }

.button-small { min-height: var(--tap-small); padding: var(--s-1) var(--s-3); font-size: var(--text-sm); }
.button-large { min-height: 3.25rem; padding: var(--s-3) var(--s-5); font-size: var(--text-lg); }
.button-block { display: flex; width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
@media (max-width: 640px) { .button-small { min-height: 2.5rem; } }

/* Text actions (Save, Make host, Remove...). */
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}
.link-button:hover { color: var(--theme); }
/* In the page these need to look pressable, not like labels. The account menu
   keeps its own plain look, which is why this is scoped to main. */
main .link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-small);
  padding: var(--s-1) var(--s-2);
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
main .link-button:hover { color: var(--theme-deep); }
/* So Remove and Leave don't look the same as Save. */
.danger-link, main .link-button.danger-link { color: var(--danger); }
.danger-link:hover, main .link-button.danger-link:hover { color: var(--danger-solid); }

/* --- 6. Forms ------------------------------------------------------------- */
/* Every control looks the same, inside a form card or not. :where() keeps this
   overridable by component layout rules. Don't set a font size under 1rem on a
   control: iPhones zoom the whole page when one gets focus, and it stays zoomed. */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  font: inherit;
  font-size: 1rem;
  min-height: var(--tap);
  max-width: 100%;
  padding: var(--s-2) var(--s-3);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}
:where(textarea) { min-height: 6rem; }
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--theme);
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
::placeholder { color: var(--placeholder); opacity: 1; }
/* Django sets aria-invalid on a field with an error. */
[aria-invalid="true"] { border-color: var(--danger-solid) !important; background: var(--danger-bg) !important; }

.card-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s-5) var(--s-4);
  max-width: 640px;
}
@media (min-width: 641px) { .card-form { padding: var(--s-5); } }
.card-form p { margin: 0 0 var(--s-4); }
.card-form label { font-weight: 600; }
.card-form input,
.card-form textarea,
.card-form select { width: 100%; margin-top: var(--s-1); }
/* Checkbox groups (CheckboxSelectMultiple): the full-width rule above would
   stretch each box onto its own line away from its label. */
.card-form input[type="checkbox"],
.card-form input[type="radio"] { width: 1.25rem; margin: 0; }
/* Radio/checkbox choices (Django renders each as <label><input> text</label>). */
.card-form label:has(> input[type="radio"]),
.card-form label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap-small);
  font-weight: 400;
  margin: var(--s-1) 0;
}
.card-form ul { list-style: none; padding: 0; margin: var(--s-1) 0 0; }
.card-form ul li { margin: var(--s-1) 0; }
.card-form ul label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap-small);
  font-weight: 400;
}
.card-form legend { font-weight: 600; padding: 0 var(--s-1); }
.card-form-wide { max-width: 640px; }
.login-card { max-width: 28rem; }
.login-card form { margin-bottom: var(--s-3); }
.card-form .or-divider { margin: var(--s-4) 0; }
input[type="file"] { font: inherit; max-width: 100%; }

/* Field help under inputs: as_p() renders span.helptext, the trips/_field.html
   partial renders span.muted. */
.helptext,
form p > span.muted:last-child {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
  margin-top: var(--s-1);
  line-height: 1.4;
}
.example {
  display: block;
  margin-top: var(--s-1);
  color: var(--muted);
  font-style: italic;
}

.errorlist { list-style: none; margin: var(--s-2) 0 var(--s-1); padding: 0; color: var(--danger); font-weight: 600; font-size: var(--text-sm); }
.form-error-summary,
.errorlist.nonfield {   /* A failed login has no summary partial, so it gets the same box. */
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--danger-line);
  border-left: 4px solid var(--danger-solid);
  border-radius: var(--r-md);
  background: var(--danger-bg);
  color: var(--danger);
}
.form-error-summary ul { margin: var(--s-1) 0 0; padding-left: 1.2rem; }
.form-error-summary a { color: inherit; }

.or-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-2);
  color: var(--muted);
  font-size: var(--text-sm);
}
.or-divider::before,
.or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.option-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
  background: var(--bg);
}
.option-fieldset legend { font-weight: 700; color: var(--theme-dark); padding: 0 var(--s-2); }

/* --- 7. Cards ------------------------------------------------------------- */
/* One look for every white panel; each component below sets only its padding
   and layout. .cat-card is separate because its top edge carries a colour. */
.trip-list li, .checklist-panel, .date-option, .activity-feed, .comment, .dash-panel,
.manage-travelers, .today-card, .duplicate-summary > div, .kid-card, .recipe-card, .meal-day,
.post, .family-card, .scan-found-item, .plan-summary, .idea-card, .import-link, .needs-card,
.event-card, .event-panel, .recipe-filters, .help-toc, .gantt {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.needs-card h2, .dash-panel h2, .activity-feed h2, .today-card h2,
.decision-callout h2, .event-panel h2, .duplicate-summary h2, .danger-zone h2, .plan-review h2 {
  font-size: var(--text-lg);
  margin: 0 0 var(--s-2);
}
.event-card:hover, .kid-card:hover { border-color: var(--theme); box-shadow: var(--shadow-2); }

/* --- 8. Tabs -------------------------------------------------------------- */
/* Same pills in all four areas. They wrap instead of scrolling on purpose, so
   no tab is ever hidden off the side of a phone. */
.trip-tabs, .subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin: 0 0 var(--s-4);
}
.subtabs { position: relative; }  /* the Add area menu is placed against this on phones */
.trip-tabs a, .subtab, .add-area summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 2.5rem;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.trip-tabs a:hover, .subtab:hover { border-color: var(--theme); background: var(--theme-tint); color: var(--theme-dark); }
.trip-tabs a.active, .subtab.active { background: var(--theme); border-color: var(--theme); color: #fff; }
.subtab-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; }
.subtab-count { color: var(--muted); font-weight: 400; }
.subtab.active .subtab-count { color: #fff; }
/* The white-ringed dot stays visible on the solid teal tab. */
.subtab.active .subtab-dot { box-shadow: 0 0 0 2px #fff; }
.cook-tabs { margin-bottom: var(--s-3); }

/* "Add area" menu on the sub-tab row (JS-free, like the account menu). */
.add-area { position: relative; }
.add-area summary { list-style: none; cursor: pointer; border-style: dashed; border-color: var(--line-strong); color: var(--muted); }
.add-area summary::-webkit-details-marker { display: none; }
.add-area summary:hover { color: var(--theme-dark); border-color: var(--theme); }
.add-area-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  z-index: 10;
}
/* On phones the pill can sit near the right edge: open across the tab row
   rather than from the pill, so the menu can't run off the screen. */
@media (max-width: 640px) {
  .subtabs .add-area { position: static; }
  .subtabs .add-area-menu { right: 0; }
}

/* --- 9. Tables ------------------------------------------------------------ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.data-table th, .data-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: #fbfcfd;
}
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tfoot th { border-top: 2px solid var(--line); }
/* nowrap so a negative amount can't break into "-" and "$1,155.00". */
.data-table .num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-cancelled td { color: var(--muted); text-decoration: line-through; }
.row-chosen td { background: var(--ok-bg); }
.dash-panel .data-table { font-size: var(--text-sm); }

@media (max-width: 640px) {
  /* Safety net: a table nobody has given a phone layout scrolls inside itself,
     so the page never scrolls sideways. */
  .data-table:not(.chore-table, .stack-table) { display: block; overflow-x: auto; max-width: 100%; }

  /* .stack-table: each row becomes a small card, with labels from data-label.
     Keeps every button on screen, unlike a table that scrolls inside itself. */
  .stack-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; }
  .stack-table tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .stack-table tbody tr:last-child { border-bottom: 0; }
  .stack-table td, .stack-table td.num { border: 0; padding: var(--s-1) 0; text-align: left; white-space: normal; }
  .stack-table td:first-child { font-weight: 600; }
  /* A floated label rather than flexbox, so cells holding several elements
     (a date with a route under it) still read as one value on the right. */
  .stack-table td[data-label], .stack-table td[data-label].num { text-align: right; font-weight: inherit; }
  .stack-table td[data-label]::after { content: ""; display: block; clear: both; }
  .stack-table td[data-label]::before {
    content: attr(data-label);
    float: left;
    margin-right: var(--s-4);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
  }
  .stack-table td.num { white-space: nowrap; }
  /* Totals under a table: label left, amount right, and no empty header cells. */
  .stack-table tfoot { display: block; border-top: 2px solid var(--line); }
  .stack-table tfoot tr { display: flex; justify-content: space-between; padding-block: var(--s-1); border: 0; }
  .stack-table tfoot th { border: 0; padding: var(--s-1) 0; }
  .stack-table tfoot th:empty { display: none; }
  .stack-table td.button-row { display: flex; padding-top: var(--s-2); }
  .stack-table td:empty { display: none; }
}

.detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; }

/* --- 10. Badges, chips and category colours ------------------------------- */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.125rem var(--s-2);
  line-height: 1.4;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge-researching { background: #e0f2fe; color: #075985; }
.badge-deciding    { background: #fef3c7; color: var(--warn); }
.badge-decided     { background: #dcfce7; color: var(--ok); }
.badge-booked      { background: #dbeafe; color: #1e40af; }
.badge-completed   { background: #e2e8f0; color: #334155; }
.badge-cancelled   { background: #fee2e2; color: var(--danger); }
.badge-idea        { background: #ede9fe; color: #5b21b6; }
.badge-dropped     { background: #f3f4f6; color: #4b5563; }
.badge-appliance   { background: #ffedd5; color: #9a3412; }
.badge-hands       { background: #e0e7ff; color: #3730a3; }
.badge-passive     { background: #f1f5f9; color: #475569; }

.new-badge {
  display: inline-block;
  background: var(--theme);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.0625rem var(--s-2);
  border-radius: var(--r-pill);
  vertical-align: middle;
  white-space: nowrap;
}
.subtab.active .new-badge { background: #fff; color: var(--theme-dark); }

.chip {
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  padding: 0.0625rem var(--s-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.scope-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
  border-radius: var(--r-pill);
  padding: 0.0625rem var(--s-2);
  vertical-align: middle;
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-1) 0 0; }
.tag-chip {
  font-size: var(--text-xs);
  background: var(--theme-tint);
  color: var(--theme-dark);
  border: 1px solid var(--theme-tint-2);
  border-radius: var(--r-pill);
  padding: 0.1rem var(--s-2);
  text-decoration: none;
}
a.tag-chip:hover { background: var(--theme-tint-2); }

.cat-transport { background: var(--cat-transport); }
.cat-lodging   { background: var(--cat-lodging); }
.cat-activity  { background: var(--cat-activity); }
.cat-dining    { background: var(--cat-dining); }
.cat-logistics { background: var(--cat-logistics); }
.cat-other     { background: var(--cat-other); }

.cat-text-transport { color: var(--cat-transport); }
.cat-text-lodging   { color: var(--cat-lodging); }
.cat-text-activity  { color: var(--cat-activity); }
.cat-text-dining    { color: var(--cat-dining); }
.cat-text-logistics { color: var(--cat-logistics); }
.cat-text-other     { color: var(--cat-other); }

.cat-border-transport { border-top-color: var(--cat-transport); }
.cat-border-lodging   { border-top-color: var(--cat-lodging); }
.cat-border-activity  { border-top-color: var(--cat-activity); }
.cat-border-dining    { border-top-color: var(--cat-dining); }
.cat-border-logistics { border-top-color: var(--cat-logistics); }
.cat-border-other     { border-top-color: var(--cat-other); }

.category-head { margin-bottom: var(--s-2); }
.category-link { color: inherit; text-decoration: none; }
.category-link:hover { text-decoration: underline; }

/* --- 11. Help boxes and the Help guide ------------------------------------ */
/* The always-visible sentence above a help box: says what the page is for. */
.page-lead { margin: 0 0 var(--s-3); max-width: 40rem; }

/* _page_help.html: collapsed and quiet by default, so the page's real content
   comes first. The instructions are still one tap away. */
.page-help {
  max-width: 40rem;
  background: var(--theme-tint);
  border: 1px solid var(--theme-tint-2);
  border-radius: var(--r-md);
  margin: 0 0 var(--s-4);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.page-help summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--theme-dark);
}
.page-help summary::-webkit-details-marker { display: none; }
.page-help summary::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--theme);
  color: #fff;
  font-weight: 700;
}
.page-help summary::after { content: "Show"; margin-left: auto; font-weight: 400; text-decoration: underline; }
.page-help[open] summary::after { content: "Hide"; }
.page-help-body { padding: 0 var(--s-3) var(--s-3); }
.page-help-body p { margin: var(--s-2) 0; }
.page-help-body ul, .page-help-body ol { margin: var(--s-2) 0; padding-left: 1.25rem; }
.page-help-body li { margin: var(--s-1) 0; }
.page-help-more a { display: inline-block; padding: var(--s-1) 0; }

.help-guide { max-width: 46rem; }
.help-guide h2 {
  font-size: var(--text-xl);
  margin-top: var(--s-6);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--s-4);
}
.help-guide h3 { font-size: var(--text-base); margin: var(--s-4) 0 var(--s-1); }
.help-guide li { margin: var(--s-1) 0; }
.help-toc { padding: var(--s-3) var(--s-4); columns: 2 14rem; }
.help-toc a { display: block; padding: var(--s-1) 0; }
.help-tip {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-line);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
}
.help-example {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
  overflow-x: auto;
}

/* --- 12. Callouts, flash messages, empty states, error pages -------------- */
/* Yellow only when someone needs to act; red for problems; tint for plain info. */
.decision-callout {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.decision-callout ul { margin: 0; padding-left: 1.2rem; }
.payment-callout { background: var(--danger-bg); border-color: var(--danger-line); }
/* Same box for news that isn't a to-do, so yellow keeps its meaning. */
.info-callout { background: var(--theme-tint); border-color: var(--theme-tint-2); }

.danger-zone {
  margin-top: var(--s-7);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-md);
  background: var(--danger-bg);
}
.danger-zone h2 { color: var(--danger); }

.messages { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.messages li {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
  background: var(--theme-tint);
  border: 1px solid var(--theme-tint-2);
  border-left: 4px solid var(--theme);
}
.messages li.success { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); }
.messages li.error   { background: var(--danger-bg); border-color: var(--danger-line); border-left-color: var(--danger-solid); }
.messages li.warning { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); }

.empty-state {
  text-align: center;
  background: var(--card);
  border: 1px dashed #b8c4ce;
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-4);
}
.empty-state p { margin: 0 0 var(--s-2); }
.empty-state p:first-child { font-size: var(--text-lg); }
.empty-state .button { margin-top: var(--s-3); }
.empty-state .example { font-size: var(--text-sm); }
/* The small version, for an empty list inside a panel or section. */
.empty-note {
  margin: var(--s-2) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed #b8c4ce;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
}

/* 404, 403 and 500. */
.error-page { text-align: center; padding: var(--s-7) 0; }
.error-page img { display: block; margin: 0 auto var(--s-4); border-radius: var(--r-md); }
.error-page .button-row { justify-content: center; margin-top: var(--s-5); }

/* --- 13. Front door ------------------------------------------------------- */
.hero { text-align: center; padding: var(--s-6) 0; }
.hero-logo { display: block; margin: 0 auto var(--s-4); border-radius: var(--r-lg); }
.hero h1 {
  font-size: var(--text-hero);
  margin-bottom: var(--s-2);
  background: linear-gradient(100deg, var(--theme-dark), var(--theme));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--theme-dark);
}
.hero p { color: var(--muted); font-size: var(--text-lg); margin-bottom: var(--s-5); }
.hero .button { min-width: 15rem; }
.hero-sub { margin-top: var(--s-4); }
.hero p.hero-sub { font-size: var(--text-base); }
.hero-sub a { color: var(--theme-dark); }
.invite-cta { justify-content: center; }

/* --- 14. Trips ------------------------------------------------------------ */
.trip-list { list-style: none; padding: 0; }
.trip-list li {
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-2);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.trip-list a { color: var(--theme-dark); font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s; }

.trip-card { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
/* The whole card opens the trip, as its hover suggests. Cards with their own
   buttons are shared with other pages, and those keep only the title as a link,
   because the stretched link would sit on top of the buttons. */
.trip-card:not(:has(form, button)) { position: relative; }
.trip-card:not(:has(form, button)) > div:first-child > a:first-child::after { content: ""; position: absolute; inset: 0; }
.trip-card:not(:has(form, button)) a:not(:first-child),
.trip-card:not(:has(form, button)) > :not(:first-child) a { position: relative; z-index: 1; }
.trip-card:not(:has(form, button)):hover { border-color: var(--theme); box-shadow: var(--shadow-2); }
.trip-card-dates { text-align: right; font-variant-numeric: tabular-nums; }
.trip-countdown { color: var(--theme-dark); font-size: var(--text-sm); font-weight: 600; }
.trip-underway { color: var(--cat-activity); }

.overdue { color: var(--danger-solid); font-weight: 700; }
.option-details { font-size: var(--text-sm); }
.attention-text { color: var(--warn); font-weight: 600; }

.member-row { display: flex; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-1) 0; }
.member-row select { padding: var(--s-1) var(--s-2); min-height: 2.5rem; }
/* Family pages: names sit side by side. */
.member-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.member-list li { display: flex; align-items: center; gap: var(--s-2); }

.invite-list { list-style: none; padding: 0; margin: 0; }
.invite-list li { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: var(--s-1) 0; }
.pending-invites { list-style: none; padding: 0; }
.pending-invites li { margin: var(--s-2) 0; }

.net-positive { color: var(--cat-activity); font-weight: 700; }
.net-negative { color: var(--danger-solid); font-weight: 700; }
.transfer-list li { margin-bottom: var(--s-2); }
.transfer-amount {
  background: var(--theme-tint);
  border: 1px solid var(--theme-tint-2);
  border-radius: var(--r-sm);
  padding: 0.1rem var(--s-2);
  font-weight: 700;
  white-space: nowrap;
}

/* Checklists */
.checklist-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s-5); }
.checklist-panel { padding: var(--s-4) var(--s-4); }
.checklist-panel .card-form { max-width: none; padding: var(--s-3); box-shadow: none; }
.checklist { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.checklist-row { display: flex; gap: var(--s-2); align-items: baseline; padding: var(--s-1) 0; border-bottom: 1px dashed var(--line); }
.checklist-text { flex: 1; }
.checklist-done .checklist-text { text-decoration: line-through; color: var(--muted); }
.check-button { background: none; border: none; font-size: var(--text-lg); cursor: pointer; color: var(--theme-dark); padding: 0; min-width: 1.75rem; min-height: 1.75rem; }

/* Itinerary */
.day-block { margin-bottom: var(--s-4); }
.day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  font-size: var(--text-lg);
  border-bottom: 2px solid var(--line);
  padding-bottom: var(--s-1);
  margin-bottom: var(--s-2);
}
.day-add {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-small);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--theme-dark);
  text-decoration: none;
  white-space: nowrap;
}
.day-add:hover { color: var(--theme); }
.agenda { list-style: none; padding: 0; margin: 0; }
.agenda-row { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-1); border-bottom: 1px dashed var(--line); align-items: baseline; }
.agenda-time { flex: 0 0 5.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.agenda-body { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.agenda-ongoing { color: var(--muted); }
.agenda-empty { padding-left: 6.9rem; }

/* Timeline */
.gantt-scroll { overflow-x: auto; padding-bottom: var(--s-2); }
.gantt { display: grid; gap: 3px; min-width: 100%; padding: var(--s-3); }
.gantt-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--muted);
  padding: var(--s-4) 0 var(--s-1);
  border-bottom: 2px solid var(--line);
  position: relative;
}
.gantt-weekend { background: #f1f5f9; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.gantt-num { font-weight: 700; color: var(--ink); }
.gantt-month { position: absolute; top: -0.1rem; font-size: var(--text-xs); font-weight: 700; color: var(--theme-dark); }
.gantt-bar {
  color: #fff;
  font-size: var(--text-sm);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-bar:hover { filter: brightness(1.12); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.legend-chip { color: #fff; font-size: var(--text-xs); line-height: 1.4; padding: 0.0625rem var(--s-2); border-radius: var(--r-pill); }

/* Date poll */
.date-option { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); }
.date-option-best { border-color: var(--ok-line); background: var(--ok-bg); }
.date-option-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-2); }
.date-votes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0 0 var(--s-3); }
.date-vote-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.125rem var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
}
.date-vote-yes   { background: #dcfce7; border-color: var(--ok-line); color: var(--ok); }
.date-vote-maybe { background: #fef3c7; border-color: var(--warn-line); color: var(--warn); }
.date-vote-no    { background: #fee2e2; border-color: var(--danger-line); color: var(--danger); }

/* Overview */
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--s-3); }
.cat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid #cbd5e1;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s-3) var(--s-4);
  min-width: 0;
}
.cat-card p { margin: var(--s-1) 0; }
.cat-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
.cat-card-title { font-weight: 700; text-decoration: none; }
.cat-card-title:hover { text-decoration: underline; }
.cat-card-cost { font-variant-numeric: tabular-nums; font-weight: 600; }
.cat-card-stats, .cat-card-next { font-size: var(--text-sm); }
.cat-card-list { list-style: none; margin: var(--s-1) 0; padding: 0; font-size: var(--text-sm); }
.cat-card-list li { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: baseline; padding: 0.15rem 0; }
.cat-card-list li > a:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cat-card-add {
  border-style: dashed;
  border-top-width: 1px;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-card-add summary { border: none; }

.meter { height: 0.45rem; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: var(--r-pill); }
.meter-ok   { background: var(--theme); }
.meter-over { background: var(--danger-solid); }

.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-4) 0; }
@media (max-width: 640px) { .dash-row { grid-template-columns: 1fr; } }
.dash-panel { padding: var(--s-3) var(--s-4); min-width: 0; }
.dash-panel p { margin: var(--s-2) 0; }
.budget-line { font-size: var(--text-lg); }

.people-list { list-style: none; margin: 0 0 var(--s-2); padding: 0; }
.people-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-1) 0;
  border-bottom: 1px dashed var(--line);
}
.people-list li:last-child { border-bottom: none; }
.people-meta { display: flex; gap: var(--s-3); font-size: var(--text-sm); }

.manage-travelers { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.manage-travelers > summary { cursor: pointer; font-weight: 700; font-size: var(--text-lg); }
.manage-travelers .member-row { flex-wrap: wrap; }

/* Today (one day of the trip, phone-first) */
.day-nav { flex-wrap: nowrap; }
.day-nav .button { white-space: nowrap; }
.today-banner { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--theme-tint); }
.today-card { margin: var(--s-4) 0; padding: var(--s-4); }
.today-stay { border-color: var(--theme-tint-2); background: var(--theme-tint); }
.today-stay-row + .today-stay-row { margin-top: var(--s-2); }
.today-agenda { list-style: none; margin: 0; padding: 0; }
.today-event { display: grid; grid-template-columns: 5.2rem 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.today-event:first-child { border-top: 0; padding-top: 0; }
.today-time { font-weight: 600; white-space: nowrap; }
.today-title { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; font-weight: 600; }
.today-details, .today-notes { font-size: var(--text-sm); margin-top: var(--s-1); }
.today-notes { white-space: normal; }
.today-ongoing { color: var(--muted); }
.conf-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.03em; }
.today-todos, .today-tomorrow ul { margin: 0; padding-left: 1.1rem; }
.today-time-inline { display: inline-block; min-width: 4.8rem; font-weight: 600; }
.today-meals { list-style: none; padding: 0; }
.today-meals li { display: flex; gap: var(--s-2); align-items: baseline; padding: var(--s-1) 0; }
@media (max-width: 480px) { .today-event { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Checklist templates and trip duplication */
.template-picker { margin: var(--s-4) 0 var(--s-5); }
.template-picker > summary { cursor: pointer; font-weight: 600; color: var(--theme-dark); }
.template-picker .card-form { margin-top: var(--s-3); max-width: 34rem; }
.template-audience { border: 0; padding: 0; margin: var(--s-2) 0; }
.template-audience legend { font-weight: 600; margin-bottom: var(--s-1); }
.template-audience label { display: flex; align-items: center; gap: var(--s-2); font-weight: normal; margin: var(--s-1) 0; }
.template-audience input { margin: 0; }
.reuse-trip { margin-top: var(--s-6); }
.duplicate-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s-4); margin: var(--s-4) 0 var(--s-5); }
.duplicate-summary > div { padding: var(--s-3) var(--s-4); }
.duplicate-summary ul { margin: 0; padding-left: 1.2rem; }

/* Trip meals */
.meal-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.meal-day { padding: var(--s-2) var(--s-4) var(--s-3); }
.meal-day .day-head { font-size: var(--text-base); margin: var(--s-2) 0; }
.meal-slots { margin: 0; }
.meal-slot { display: grid; grid-template-columns: 5.2rem 1fr; gap: var(--s-2); padding: var(--s-1) 0; border-top: 1px solid var(--line); }
.meal-slot dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-top: 0.15rem; }
.meal-slot dd { margin: 0; }
.meal { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); align-items: baseline; }
.meal + .meal { margin-top: var(--s-1); }
.meal-title { font-weight: 600; }
.meal-meta { font-size: var(--text-sm); }
.meal-notes { flex-basis: 100%; font-size: var(--text-sm); color: var(--muted); }
.meal-actions { font-size: var(--text-sm); display: flex; gap: var(--s-3); }
.meal-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-small);
  min-height: var(--tap-small);
  color: var(--link);
  text-decoration: none;
  font-weight: 700;
}
.meal-empty:hover { color: var(--theme); }
.meal-unscheduled { list-style: none; padding: 0; }
.meal-unscheduled li { display: flex; gap: var(--s-2); align-items: baseline; padding: var(--s-1) 0; }

/* --- 15. Activity, attachments, discussion -------------------------------- */
.activity-feed { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.activity-feed ul { list-style: none; margin: 0; padding: 0; }
.activity-feed li { padding: var(--s-1) var(--s-2); border-bottom: 1px dashed var(--line); font-size: var(--text-sm); }
.activity-feed li:last-child { border-bottom: none; }
.activity-new { background: #fefce8; border-radius: var(--r-sm); }
.email-pref { font-size: var(--text-sm); }

.attachment-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.attachment-list li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-1) 0; border-bottom: 1px dashed var(--line); }
.attachment-list a { color: var(--theme-dark); font-weight: 600; text-decoration: none; }
.attachment-list a:hover { color: var(--theme); }

.comment-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.comment { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); }
.comment-meta { display: flex; gap: var(--s-2); align-items: center; margin-bottom: var(--s-1); }
.comment-meta .inline-form { margin-left: auto; }
.comment-body { white-space: normal; }
.comment-author { font-weight: 700; color: var(--ink); text-decoration: none; }

/* --- 16. Chores ----------------------------------------------------------- */
.kid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s-3); margin: var(--s-2) 0 var(--s-4); }
.kid-card { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--s-3) var(--s-4); color: inherit; text-decoration: none; }
.kid-owed { font-size: var(--text-xl); font-weight: 600; color: var(--cat-activity); }
.money-big { font-size: var(--text-xl); }
.chore-actions { white-space: nowrap; }
.chore-actions > * { vertical-align: middle; }
.done-for-form { display: inline-flex; gap: var(--s-1); align-items: center; margin: 0 var(--s-1) var(--s-1) 0; }
.done-for-form select { width: auto; padding: var(--s-1) var(--s-2); min-height: 2.5rem; }
.chore-undo { font-size: var(--text-sm); text-decoration: underline; }
.chore-resets { font-size: var(--text-xs); margin-top: var(--s-1); }
/* Phones: each chore becomes a small card instead of a too-wide row. */
@media (max-width: 640px) {
  .chore-table thead { display: none; }
  .chore-table, .chore-table tbody, .chore-table tr { display: block; }
  .chore-table tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .chore-table tbody tr:last-child { border-bottom: 0; }
  .chore-table td { display: inline-block; padding: 0.1rem var(--s-2) 0.1rem 0; border: 0; text-align: left; }
  .chore-table td:first-child, .chore-table td.chore-actions { display: block; }
  .chore-table td.chore-actions { white-space: normal; padding-top: var(--s-2); }
  /* To approve: Approve and Not done are the point of the page, so they get
     the full width, side by side. */
  .approve-table td.chore-actions form { display: flex; gap: var(--s-2); }
  .approve-table td.chore-actions .button { flex: 1; }
}

/* --- 17. Recipes ---------------------------------------------------------- */
.recipe-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: var(--s-3); margin-bottom: var(--s-5); }
.recipe-filters input[type=search] { flex: 1 1 14rem; width: auto; margin: 0; }
.recipe-filters select { width: auto; margin: 0; }
.tag-filter { flex-basis: 100%; }
.tag-filter summary { cursor: pointer; font-weight: 600; color: var(--theme-dark); }
.tag-filter fieldset { border: 0; padding: var(--s-1) 0; margin: 0; }
.tag-filter legend { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0; }
.tag-check { display: inline-flex; align-items: center; gap: var(--s-1); margin: var(--s-1) var(--s-3) var(--s-1) 0; font-weight: normal; }
.tag-check input { margin: 0; }
.course-jump { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-2); font-size: var(--text-sm); }
.course-section { scroll-margin-top: var(--s-4); }

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.recipe-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.recipe-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.recipe-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #f1f5f9; }
.recipe-card-noimg { display: flex; align-items: center; justify-content: center; font-size: var(--text-hero); font-weight: 700; color: #fff; }
/* White letter on these fills is at least 4.5:1. */
.course-breakfast { background: #b45309; } .course-appetizer { background: #be185d; }
.course-soup { background: #92400e; } .course-salad { background: #15803d; }
.course-main { background: #0e7490; } .course-side { background: #4d7c0f; }
.course-bread { background: #a16207; } .course-dessert { background: #be185d; }
.course-drink { background: #2563eb; } .course-sauce { background: #b91c1c; }
.recipe-card-body { padding: var(--s-3) var(--s-3) var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); }
.recipe-card-title { font-size: var(--text-base); line-height: 1.3; }
.recipe-card-meta { color: var(--muted); font-size: var(--text-sm); }
.card-hearts { color: #be185d; font-weight: 600; }

.recipe { max-width: 60rem; }
.recipe-hero { width: 100%; max-height: 26rem; object-fit: cover; border-radius: var(--r-lg); display: block; margin-bottom: var(--s-4); }
.recipe-summary { font-size: var(--text-lg); color: var(--muted); margin: var(--s-1) 0 0; }
.recipe-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-4) 0 var(--s-2); }
.recipe-facts div { min-width: 4.5rem; }
.recipe-facts dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.recipe-facts dd { margin: 0; font-weight: 600; }
.recipe-body { display: grid; grid-template-columns: minmax(15rem, 1fr) 2fr; gap: var(--s-6); margin-top: var(--s-5); }
@media (max-width: 720px) { .recipe-body { grid-template-columns: 1fr; gap: var(--s-2); } }
.servings-form { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.servings-form label { margin: 0; }
.servings-form select { width: auto; margin: 0; }
.scaled-note { font-size: var(--text-sm); background: var(--warn-bg); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
.ingredient-list { list-style: none; padding: 0; margin: 0; }
.ingredient-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.ingredient-list .ingredient-heading, .step-list .step-heading {
  border: 0;
  font-weight: 700;
  color: var(--theme-dark);
  padding-top: var(--s-3);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.step-list { list-style: none; padding: 0; margin: 0; }
.step-list li { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); }
.step-list li p { margin: 0.15rem 0 0; line-height: 1.55; }
/* Step photos: a row of small thumbnails under the step's text. */
.step-body { flex: 1; min-width: 0; }
.step-list .step-photos { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.step-list .step-photos li { display: block; margin: 0; width: 9rem; }
.step-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); display: block; }
.step-photo-add summary { cursor: pointer; font-size: var(--text-sm); color: var(--theme-dark); margin-top: var(--s-1); }
.step-photo-add .card-form { margin-top: var(--s-2); }
.photo-step-form { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-xs); margin-top: var(--s-1); }
.photo-step-form label { margin: 0; font-weight: normal; }
.photo-step-form select { width: auto; margin: 0; padding: var(--s-1) var(--s-2); min-height: 2.5rem; }
.step-number {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--theme);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-tips { background: var(--warn-bg); border-left: 4px solid var(--warn-line); border-radius: var(--r-md); padding: var(--s-1) var(--s-4); margin: var(--s-5) 0; }
.recipe-credit { font-size: var(--text-sm); }
.photo-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s-3); }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; }
.photo-caption { display: block; font-size: var(--text-sm); margin-top: var(--s-1); }
.photo-actions { display: flex; gap: var(--s-3); font-size: var(--text-xs); margin-top: var(--s-1); }
.add-photo summary, .collection-picker + p { cursor: pointer; }
.add-photo summary { font-weight: 600; color: var(--theme-dark); margin: var(--s-2) 0; }
.collection-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
/* Photo captions (recipes/_caption_form.html) and the Photos note on the recipe Edit form. */
.caption-edit summary { cursor: pointer; font-size: var(--text-xs); color: var(--theme-dark); margin-top: var(--s-1); }
.caption-form { display: flex; gap: var(--s-1); margin-top: var(--s-1); }
.caption-form input { flex: 1; min-width: 0; margin: 0; padding: var(--s-1) var(--s-2); min-height: 2.5rem; }
.form-photos { display: flex; gap: var(--s-3); align-items: flex-start; }
.form-photos p { margin: 0; }
.form-photo-thumb { width: 6.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); flex: none; }

/* Shopping list */
.shopping-action { margin: 0 0 var(--s-2); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.shopping-recipe-list { list-style: none; padding: 0; }
.shopping-recipe-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-1) 0; border-bottom: 1px solid var(--line); }
.shopping-recipe-list li a { font-weight: 600; }
.shopping-recipe-list select { width: auto; margin: 0 0 0 var(--s-1); padding: var(--s-1) var(--s-2); min-height: 2.5rem; }
.shopping-items { list-style: none; padding: 0; columns: 2 16rem; column-gap: var(--s-6); }
.shopping-items li { break-inside: avoid; padding: var(--s-1) 0; border-bottom: 1px solid var(--line); }
.shopping-items label { display: flex; gap: var(--s-2); align-items: baseline; font-weight: normal; margin: 0; cursor: pointer; }
.shopping-items input { margin: 0; flex: none; transform: translateY(3px); }
.shopping-items input:checked + .shopping-text { text-decoration: line-through; color: var(--muted); }
.shopping-for { display: block; font-size: var(--text-xs); padding-left: 1.75rem; }

/* Family and sharing */
.family-links { list-style: none; padding: 0; margin: 0 0 var(--s-2); }
.family-links li { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; padding: var(--s-1) 0; }
.share-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.share-form label { margin: 0; }
.share-form select { width: auto; margin: 0; }
.family-card { padding: var(--s-2) var(--s-4) var(--s-4); margin-bottom: var(--s-4); }
.family-card h2 { margin: var(--s-2) 0; }
.backup-panel { border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-2); font-size: var(--text-sm); }
.backup-panel p { margin: var(--s-1) 0; }
.backup-form { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-left: var(--s-2); }
.backup-form label { margin: 0; }
.backup-form select { width: auto; margin: 0; }

/* Recipes that use other recipes */
.components { background: var(--theme-tint); border: 1px solid var(--theme-tint-2); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.components h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--theme-dark); margin: var(--s-2) 0; }
.components ul { list-style: none; padding: 0; margin: 0; }
.components li { padding: var(--s-1) 0; }
.components li a { font-weight: 600; }
.component-amount { font-size: var(--text-sm); }
.component-hint { font-size: var(--text-xs); margin: var(--s-1) 0 0; }
.add-component { margin-top: var(--s-3); font-size: var(--text-sm); }
.add-component summary { cursor: pointer; color: var(--theme-dark); font-weight: 600; }
.component-form { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.component-form label { margin: var(--s-1) 0 0; font-size: var(--text-sm); }
.component-form input, .component-form select { margin: 0; }
.component-form button { justify-self: start; margin-top: var(--s-2); }
.used-in { font-size: var(--text-sm); }
.component-rows { display: grid; gap: var(--s-2); margin: var(--s-2) 0; }
.component-row {
  display: grid;
  gap: var(--s-2) var(--s-3);
  align-items: end;
  grid-template-columns: minmax(0, 2fr) 6rem minmax(0, 2fr) auto;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.component-row label { margin: 0 0 var(--s-1); font-size: var(--text-sm); }
.component-row input, .component-row select { margin: 0; width: 100%; }
.component-row .errorlist { margin: var(--s-1) 0 0; }
.component-row-remove { display: flex; gap: var(--s-1); align-items: center; white-space: nowrap; padding-bottom: var(--s-2); }
.component-row-remove input { width: 1.25rem; }
@media (max-width: 640px) {
  .component-row { grid-template-columns: minmax(0, 1fr) 6rem; }
  .component-row-note, .component-row-remove { grid-column: 1 / -1; }
}

/* --- 18. Recipes: social -------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-base);
}
.avatar-sm { width: 1.8rem; height: 1.8rem; font-size: var(--text-xs); }
.avatar-xl { width: 5.5rem; height: 5.5rem; font-size: var(--text-2xl); }
.avatar-gone { background: #64748b; }
.avatar-link { text-decoration: none; display: inline-flex; }

.feed { max-width: 38rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-4); }
.post { padding: var(--s-3) var(--s-4) var(--s-2); scroll-margin-top: var(--s-4); }
.post-new { border-color: var(--theme-tint-2); box-shadow: 0 0 0 3px var(--theme-tint); }
.post-head { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-2); }
.post-who { display: flex; flex-direction: column; line-height: 1.35; }
.post-actor { font-weight: 700; color: var(--ink); text-decoration: none; }
.post-actor:hover { text-decoration: underline; }
.post-when { font-size: var(--text-xs); }
.post-new-label { color: var(--theme-dark); }
.post-img { width: calc(100% + 2rem); margin: 0 -1rem var(--s-2); max-height: 30rem; object-fit: cover; display: block; }
.post-caption { margin: 0 0 var(--s-2); font-style: italic; }
.post-quote { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); background: var(--bg); border-left: 3px solid var(--theme); border-radius: var(--r-sm); }
.post-recipe { display: flex; gap: var(--s-3); align-items: center; color: var(--ink); text-decoration: none; margin-bottom: var(--s-2); }
.post-recipe strong { font-size: var(--text-lg); display: block; }
.post-recipe-small strong { font-size: var(--text-base); }
.post-recipe img { width: 3.6rem; height: 3.6rem; object-fit: cover; border-radius: var(--r-md); flex: none; }
.post-recipe > span { display: flex; flex-direction: column; gap: 0.1rem; }
.post-summary { color: var(--muted); font-size: var(--text-sm); }
.feed-more, .feed-end { text-align: center; margin-top: var(--s-5); }

.reactions { display: flex; align-items: center; gap: var(--s-1); border-top: 1px solid var(--line); padding-top: var(--s-1); }
.reaction {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font: inherit;
  font-size: var(--text-sm);
  min-height: var(--tap-small);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  color: #475569;
  cursor: pointer;
  text-decoration: none;
}
.reaction:hover { background: #f1f5f9; color: var(--ink); }
.reaction-icon { font-size: var(--text-lg); line-height: 1; }
.reaction-on { color: #be185d; font-weight: 600; }
.reaction-save { margin-left: auto; }
.reaction-save .reaction-on { color: var(--theme-dark); }
.recipe-reactions .reactions { border: 0; padding: 0; margin: var(--s-2) 0 0; }
.loved-by { font-size: var(--text-sm); margin: var(--s-1) 0 var(--s-2); }
.recipe-byline { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 0; font-size: var(--text-sm); }

.profile { display: flex; gap: var(--s-4); align-items: center; margin: var(--s-2) 0 var(--s-5); }
.profile h1 { margin: 0; }
.profile-stats { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }

/* --- 19. Recipes: scanning and importing ---------------------------------- */
.scan-form { display: flex; flex-direction: column; gap: var(--s-3); }
.scan-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  text-align: center;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  cursor: pointer;
  background: var(--bg);
}
.scan-drop:hover { border-color: var(--theme); background: var(--theme-tint); }
.scan-icon { font-size: var(--text-2xl); }
.scan-drop input { margin-top: var(--s-2); width: auto; }
.scan-files { margin: 0; padding-left: 1.2rem; font-size: var(--text-sm); }
.scan-form .button { align-self: flex-start; }
.scan-small { font-size: var(--text-sm); margin: 0; }
.scan-working { font-weight: 600; color: var(--theme-dark); margin: 0; }
.scan-banner { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.scan-banner p { margin: var(--s-2) 0 var(--s-1); }
.scan-banner ul { margin: 0; }
.scan-offer { background: var(--theme-tint); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }

/* Scan found several recipes */
.scan-found { list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; gap: var(--s-2); max-width: 40rem; }
.scan-found-item { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-3); }
.scan-found-item.is-saved { background: var(--bg); }
.scan-found-text { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; cursor: pointer; margin: 0; font-weight: normal; }
.scan-found-text .muted { font-size: var(--text-sm); }
.scan-found-done { font-weight: 600; color: var(--ok); white-space: nowrap; }
.scan-found-item input[type=checkbox] { margin: 0; }
.scan-found-check { width: 1.25rem; text-align: center; color: var(--ok); font-weight: 700; flex: none; }
.scan-found-item.needs-review { border-color: var(--warn-line); background: var(--warn-bg); }
.scan-found-flag { font-size: var(--text-sm); color: var(--warn); }
.scan-found-form select { width: auto; }

/* "Paste a link" box on the Add-recipe page (recipes.views.recipe_import). */
.import-link { padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-3); }
.import-link label { font-weight: 600; display: block; margin-bottom: var(--s-2); }
.import-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.import-row input { flex: 1 1 16rem; margin: 0; }
.web-photo { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; margin: 0 0 var(--s-3); }
.web-photo input { margin: 0; }

/* --- 20. Cook planner ----------------------------------------------------- */
.meal-form fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2) var(--s-4) var(--s-2); margin: var(--s-4) 0; }
.meal-form legend { font-weight: 600; padding: 0 var(--s-1); }
.form-row { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.form-row > p { flex: 1 1 9rem; }
.count-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-2) var(--s-4); margin: var(--s-2) 0; }
.card-form .count-field { display: flex; align-items: center; gap: var(--s-2); font-weight: normal; margin: 0; }
.card-form .count-field input { width: 4.5rem; flex: none; margin: 0; }
.recipe-filter { margin: var(--s-1) 0 var(--s-2); }
.recipe-picks { max-height: 22rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-1) var(--s-3); background: #fff; }
.recipe-picks > div > div, .recipe-picks li { margin: var(--s-1) 0; }
.kitchen-line { margin-top: var(--s-5); }
.meal-links { margin: var(--s-1) 0 var(--s-4); font-size: var(--text-sm); }

.plan-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  align-items: flex-end;
  padding: var(--s-3) var(--s-4);
  margin: var(--s-2) 0 var(--s-4);
}
.plan-summary-big { font-size: var(--text-xl); font-weight: 700; }
.plan-summary-kit { font-size: var(--text-sm); }
.plan-warnings { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.plan-warnings li { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); font-size: var(--text-sm); }
.plan-warnings-fix { margin: calc(var(--s-2) * -1) 0 var(--s-4); font-size: var(--text-sm); }
.plan-timing-callout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  justify-content: space-between;
  background: var(--theme-tint);
  border: 1px solid var(--theme-tint-2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-4);
}
.plan-wishes { background: #f5f3ff; border: 1px solid #c4b5fd; border-radius: var(--r-md); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); font-size: var(--text-sm); }
.plan-wishes p { margin: 0 0 var(--s-1); }
.plan-wishes p:last-child { margin-bottom: 0; }
.plan-wishes-note { overflow-wrap: anywhere; }
.plan-wishes-rules { margin: 0 0 var(--s-1); padding-left: 1.2rem; }
.plan-wishes-unhandled { color: #9a3412; }
.plan-review-list { list-style: none; padding: 0; margin: 0 0 var(--s-2); display: grid; gap: var(--s-2); }
.plan-review-list li { background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); font-size: var(--text-sm); }
.plan-review-list span { color: var(--muted); }
.plan-review-ok { background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); }

.cook-timeline { list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.cook-day {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme);
  margin: var(--s-4) 0 var(--s-2);
}
.cook-group { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.cook-time { font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 0.15rem; white-space: nowrap; }
.cook-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.cook-step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--theme);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3) var(--s-2) 2.6rem;
}
.cook-preheat { border-left-color: var(--cat-dining); }
.cook-ready { border-left-color: var(--cat-activity); background: var(--ok-bg); }
.cook-serve { border-left-color: var(--cat-lodging); background: #f5f3ff; }
.cook-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; font-size: var(--text-sm); color: var(--muted); margin-top: var(--s-1); }
.tick-help { font-size: var(--text-sm); margin: 0 0 var(--s-2); }
.step-tick { position: absolute; left: var(--s-3); top: var(--s-2); margin: 0; cursor: pointer; }
.cook-step.is-done { color: var(--muted); background: var(--bg); }
.cook-step.is-done > div:first-of-type { text-decoration: line-through; }

.plan-dishes { margin: var(--s-6) 0 var(--s-4); }
.plan-dish-table, .task-table { width: 100%; border-collapse: collapse; background: var(--card); }
.plan-dish-table th, .plan-dish-table td, .task-table th, .task-table td {
  text-align: left;
  padding: var(--s-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.plan-dish-table select { width: auto; }

.timing-status { margin: var(--s-1) 0 var(--s-2); }
.redo-form { margin: 0 0 var(--s-4); }
.task-table-wrap { overflow-x: auto; }
.task-table th { font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.card-form .task-table input, .card-form .task-table select { margin: 0; }
.card-form .task-table td:nth-child(3) input, .card-form .task-table td:nth-child(5) input { width: 5rem; }
.card-form .task-table td:nth-child(7) input { width: 5.5rem; }
.task-number { font-weight: 700; color: var(--muted); }

@media (max-width: 640px) {
  .cook-group { grid-template-columns: 1fr; gap: var(--s-1); }
  .plan-dish-table thead { display: none; }
  .plan-dish-table tr { display: block; border-bottom: 1px solid var(--line); padding: var(--s-2) 0; }
  .plan-dish-table td { display: block; border: 0; padding: var(--s-1) var(--s-2); }
  .task-table thead { display: none; }
  .task-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
  .task-table td { border: 0; padding: 0; }
  .task-table td.task-number, .task-table td[data-label="Task"] { grid-column: 1 / -1; }
  .task-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); color: var(--muted); }
}

/* "Shop for this meal" box on a meal plan */
.plan-shopping { margin: var(--s-6) 0 var(--s-4); padding: var(--s-4); background: var(--ok-bg); border: 1px solid #bbf7d0; border-radius: var(--r-md); }
.plan-shopping h2 { margin-top: 0; }
.plan-shopping-form { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; margin: var(--s-2) 0; }
.plan-shopping-form label { font-weight: 600; }
.plan-shopping-form input[type="number"] { width: 6rem; }

/* --- 21. Ideas (trips/ideas.html, trips/_idea_votes.html) ----------------- */
.idea-list { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-3); }
.idea-card { padding: var(--s-3) var(--s-4); }
.idea-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); align-items: baseline; }
.idea-title { font-weight: 700; font-size: var(--text-lg); }
.idea-notes, .idea-link, .idea-by { margin: var(--s-1) 0; }
.idea-by { font-size: var(--text-sm); }
.idea-vote-form { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 var(--s-1); }
.idea-tally { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--text-sm); margin: var(--s-1) 0; }
.idea-count { font-weight: 600; }
.idea-curate { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--line); }
.idea-panel { margin: var(--s-5) 0; }
.idea-suggest { margin: var(--s-6) 0 var(--s-4); }
.idea-dropped { margin: var(--s-4) 0 var(--s-6); }
.idea-dropped-list { margin: var(--s-2) 0 0; }

/* --- 22. "What needs you" home page (pages/dashboard.html) ---------------- */
.dash-greeting h1 { margin-bottom: var(--s-1); }
.dash-countdown { font-size: var(--text-lg); margin: var(--s-1) 0; }
/* 20rem so four areas make a 2x2 grid, with no orphan card on a wide screen. */
.needs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.needs-card { padding: var(--s-4); display: flex; flex-direction: column; }
.needs-card h2 a { text-decoration: none; color: inherit; }
.needs-card .button { align-self: flex-start; margin-top: auto; }
.needs-list { list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.needs-list li { border-bottom: 1px solid var(--line); }
.needs-list a { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) 0; text-decoration: none; color: inherit; }
.needs-list a:hover { color: var(--theme-dark); }
.needs-list li.urgent a { font-weight: 600; }
.needs-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--danger-solid); flex: none; }
.install-tip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  background: var(--theme-tint);
  border: 1px solid var(--theme-tint-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-3) 0;
}
.install-tip p { margin: 0; flex: 1 1 16rem; }
.install-tip[hidden], .install-how[hidden] { display: none; }

/* --- 23. Events ----------------------------------------------------------- */
.event-card { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); color: inherit; text-decoration: none; }
.event-summary { margin: var(--s-4) 0; }
.event-summary p { margin: var(--s-1) 0; }
.event-rsvp { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin: var(--s-3) 0; }
.event-rsvp label { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0; }
.event-rsvp input[type="number"] { width: 5rem; }
.event-rsvp input[type="email"], .event-rsvp input[type="datetime-local"] { width: auto; max-width: 100%; }
.event-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-4); margin: var(--s-4) 0; }
.event-panel { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.event-mine { list-style: none; padding: 0; margin: 0 0 var(--s-2); }
.event-mine li { padding: var(--s-1) 0; }
.event-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.event-row.is-done .event-row-main strong { text-decoration: line-through; color: var(--muted); }
.event-row-main { flex: 1 1 16rem; min-width: 0; }
.event-row-side { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; }
.event-tick { background: none; border: 0; padding: 0 var(--s-1); min-width: 2rem; min-height: 2rem; font-size: var(--text-xl); line-height: 1; cursor: pointer; }
.event-invite-cook { display: block; margin-top: var(--s-1); }
.event-import { margin: var(--s-4) 0; }
/* Discussion board (events/board.py): the topic list on the Overview, one
   topic's thread, and the composer shared by both. */
.board { margin-top: var(--s-6); }
.board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.board-head h2 { margin: 0; }
.board-sub { margin: var(--s-1) 0 0; font-size: var(--text-sm); }
.board-topics { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.board-topic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.board-topic:first-child { border-top: 0; }
.board-topic.has-new { background: var(--theme-tint); box-shadow: inset 3px 0 0 var(--theme); }
.board-topic-main { flex: 1 1 18rem; min-width: 0; }
.board-topic-title { font-weight: 600; font-size: var(--text-lg); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; margin-right: var(--s-1); }
.board-topic.has-new .board-topic-title { font-weight: 700; }
.board-topic-title:hover { color: var(--link); text-decoration: underline; }
.board-topic-meta { margin: var(--s-1) 0 0; font-size: var(--text-sm); }
.board-topic-side { display: flex; align-items: center; gap: var(--s-3); }
.board-count { font-size: var(--text-sm); color: var(--muted); min-width: 4.5rem; text-align: right; }
.board-count strong { color: var(--ink); font-size: var(--text-base); }
.board-flag { font-size: var(--text-sm); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--card); margin-left: -0.5rem; }
.avatar-stack .avatar:first-child { margin-left: 0; }
/* Groups: jump links, then one section per group. */
.board-jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.board-jump-link { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap-small); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.board-jump-link:hover { border-color: var(--theme); color: var(--theme-dark); }
.board-group { margin: 0 0 var(--s-5); scroll-margin-top: var(--s-4); }
.board-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-2); }
.board-group-head h3 { margin: 0; font-size: var(--text-lg); }
.board-group-blurb { margin: 0; font-size: var(--text-sm); }
.board-group-new { font-size: var(--text-sm); font-weight: 600; }
.board-group-empty { margin: 0; padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); font-size: var(--text-sm); }
.board-new { margin-top: var(--s-4); }
.board-new > summary { list-style: none; display: inline-flex; cursor: pointer; }
.board-new > summary::-webkit-details-marker { display: none; }
.board-new[open] > summary { display: none; }
.board-form { margin-top: var(--s-3); padding: var(--s-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.board-form > input, .board-form > select { width: 100%; margin-bottom: var(--s-3); }
.board-form h2 { margin-top: 0; font-size: var(--text-lg); }
.board-crumb { margin: 0 0 var(--s-2); font-size: var(--text-sm); }
.topic-head { align-items: flex-start; }
.topic-head h1 { overflow-wrap: anywhere; }
.topic-meta { margin: var(--s-1) 0 0; }
.topic-tools { margin: 0; }

/* The composer. */
.composer textarea { width: 100%; min-height: 7.5rem; resize: vertical; }
.composer-toolbar:not([hidden]) + textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.composer.is-dropping textarea { outline: 2px dashed var(--theme); outline-offset: 2px; }
.composer-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); margin-top: var(--s-1); background: var(--bg); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
.composer-toolbar[hidden] { display: none; }
.composer-tool { min-height: var(--tap-small); min-width: var(--tap-small); padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: var(--text-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.composer-tool:hover { background: var(--card); border-color: var(--line); }
.composer-photo { margin: 0 0 0 auto; font-weight: 600; color: var(--theme-dark); }
.composer-photo:focus-within { box-shadow: var(--focus); }
.composer-hint { font-size: var(--text-xs); margin: var(--s-1) 0 var(--s-3); }
@media (hover: none) { .composer-keys { display: none; } }
.composer-previews { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.composer-previews:not(:empty) { margin-top: var(--s-3); }
.composer-preview { position: relative; width: 5.5rem; height: 5.5rem; }
.composer-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.composer-preview-remove { position: absolute; top: -0.5rem; right: -0.5rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--card); background: var(--ink); color: #fff; font-size: var(--text-xs); cursor: pointer; }

/* A topic's thread. */
.thread { list-style: none; margin: var(--s-4) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.thread-post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); scroll-margin-top: var(--s-4); }
.thread-post:target .thread-body { box-shadow: 0 0 0 3px var(--theme-tint-2); border-color: var(--theme); }
.thread-body { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s-3) var(--s-4) var(--s-2); min-width: 0; }
.thread-post.is-deleted .thread-body { background: var(--bg); box-shadow: none; }
.thread-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.thread-when, .thread-edited { font-size: var(--text-xs); }
.thread-when { text-decoration: none; }
.thread-when:hover { text-decoration: underline; }
.badge-host { background: var(--theme-tint-2); color: var(--theme-deep); }
.badge-starter { background: #f1f5f9; color: #475569; }
.thread-removed { font-style: italic; margin: var(--s-2) 0; }
.thread-text { overflow-wrap: anywhere; margin-top: var(--s-2); }
.thread-text p { margin: 0 0 var(--s-2); }
.thread-text ul, .thread-text ol { margin: 0 0 var(--s-2); padding-left: 1.4rem; }
.thread-text blockquote, .thread-quote { margin: var(--s-2) 0; padding: var(--s-2) var(--s-3); border-left: 3px solid var(--theme); background: var(--theme-tint); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: #33404d; }
.thread-quote { font-size: var(--text-sm); }
.thread-quote p { margin: 0 0 var(--s-1); }
.thread-quote p:last-child { margin-bottom: 0; }
.thread-quote-who { display: block; font-weight: 600; font-size: var(--text-xs); color: var(--theme-dark); margin-bottom: var(--s-1); text-decoration: none; }
.thread-quote-who:hover { text-decoration: underline; }
.thread-replying { margin: var(--s-2) 0 0; font-size: var(--text-sm); }
.thread-replying a { text-decoration: none; }
.thread-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-2); margin: var(--s-2) 0; }
.thread-images[data-count="1"] { grid-template-columns: minmax(0, 26rem); }
.thread-images[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
.thread-images a { display: block; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.thread-images img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.15s; }
.thread-images[data-count="1"] img { aspect-ratio: auto; max-height: 24rem; }
.thread-images a:hover img { transform: scale(1.02); }
.thread-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.thread-actions { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--text-sm); }
.thread-new { display: flex; align-items: center; gap: var(--s-3); color: var(--theme-dark); font-weight: 700; font-size: var(--text-sm); scroll-margin-top: var(--s-4); }
.thread-new::before, .thread-new::after { content: ""; flex: 1; height: 2px; background: var(--theme); opacity: 0.5; }

/* Reactions. */
.post-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.reaction { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2rem; padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.reaction:hover { border-color: var(--line-strong); }
.reaction.is-mine { background: var(--theme-tint); border-color: var(--theme); color: var(--theme-deep); font-weight: 600; }
.reaction-add { color: var(--muted); list-style: none; }
.reaction-add::-webkit-details-marker { display: none; }
.reaction-picker { position: relative; }
.reaction-menu { position: absolute; bottom: calc(100% + var(--s-1)); left: 0; z-index: 5; display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-2); }
.reaction-choice { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: none; font-size: var(--text-xl); cursor: pointer; }
.reaction-choice:hover { background: var(--theme-tint); }

/* The reply box: what it answers, above the text. */
.reply-context { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2); background: var(--bg); border-radius: var(--r-md); }
.reply-context[hidden] { display: none; }
.reply-context > div { min-width: 0; flex: 1; }
.reply-context .thread-quote { margin-bottom: 0; white-space: pre-line; }

/* Editing: pictures already on the post. */
.edit-images { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); margin: 0 0 var(--s-4); }
.edit-image-grid { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.edit-image { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--text-sm); }
.edit-image img { width: 7rem; height: 7rem; object-fit: cover; border-radius: var(--r-sm); }
.edit-image input { width: auto; }

/* The full-size picture viewer. */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(10, 20, 28, 0.85); }
.lightbox img { display: block; max-width: 96vw; max-height: 90vh; border-radius: var(--r-sm); }
.lightbox-close { position: absolute; top: var(--s-2); right: var(--s-2); width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: var(--text-lg); cursor: pointer; }

@media (max-width: 640px) {
  .thread-post { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .thread-avatar { display: none; }
  .board-topic-side { width: 100%; justify-content: space-between; }
  .board-count { text-align: left; min-width: 0; }
  .composer-photo { margin-left: 0; }
}

/* --- 24. Toasts ----------------------------------------------------------- */
/* Inline form actions (static/js/inline.js): a dimmed region while it updates,
   and flash messages as a toast instead of at the page top. */
.is-busy { opacity: 0.6; transition: opacity 0.15s; }
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(92vw, 28rem);
  pointer-events: none;
}
.toast { background: var(--ink); color: #fff; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.toast.error { background: var(--danger-solid); }
.toast.success { background: var(--ok); }

/* --- 25. Print ------------------------------------------------------------ */
/* Printing any regular page: drop the site chrome. */
@media print {
  .site-header, .site-footer, .trip-tabs, .button-row, .day-add, .skip-link,
  .no-print, .page-help, .page-lead, .messages { display: none !important; }
  .print-only { display: inline; }
  body { background: #fff; }
  .trip-list li, .post, .card-form, .data-table, .today-card { box-shadow: none; }
  .recipe-hero { max-height: 12rem; }
  .recipe-body { grid-template-columns: 1fr 2fr; }
  .step-number { background: none; color: #000; border: 1px solid #000; }
}
.event-check input { width: auto; }
.event-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.event-panel { padding: 0.8rem 1rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; margin-bottom: 1rem; }
.event-panel h2 { margin-top: 0; font-size: var(--text-lg); }
.event-mine { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.event-mine li { padding: 0.15rem 0; }
.event-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.7rem 0;
  border-bottom: 1px solid #e2e8f0; }
.event-row.is-done .event-row-main strong { text-decoration: line-through; color: #64748b; }
.event-row-main { flex: 1 1 260px; min-width: 0; }
.event-row-side { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; }
.event-invite-cook { display: block; margin-top: 0.2rem; }
.event-import { margin: 1.2rem 0; }

/* recipes */
.plan-jump { margin: 0.4rem 0 0; }
.first-steps { text-align: left; max-width: 28rem; margin: 0.5rem auto 0.8rem; padding-left: 1.4rem; }
.first-steps li { margin: 0.5rem 0; }
.first-steps .button { margin-top: 0; }
.collection-entry { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.family-rename, .backup-panel summary { cursor: pointer; }
.family-rename { margin: 0 0 0.6rem; }
.family-rename summary { cursor: pointer; font-size: var(--text-sm); }
.meal-kitchen, .recipe-more { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.8rem 0; }
.meal-kitchen summary, .recipe-more summary { cursor: pointer; font-weight: 600; }
.add-ways { margin: 0 0 1rem; }
.add-ways h2 { margin-top: 0; }
.form-photo-again { color: #7f1d1d; font-weight: 600; }
.scan-found-flag { overflow-wrap: anywhere; }
/* .button sets display, which would otherwise beat the hidden attribute. */
#scan-add[hidden], #task-add-row[hidden] { display: none; }
/* trips and chores */
.money-amount { white-space: nowrap; }
.decided-box { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 0.7rem 0.9rem; }
.add-form { margin: 0.75rem 0; }
.add-form > summary, .form-section > summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.add-form > .card-form { margin-top: 0.5rem; }
.form-section { border-top: 1px solid #e5e7eb; padding: 0.4rem 0; margin: 0.4rem 0; }
.money-summary { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; max-width: 20rem; margin: 0.75rem 0; }
.money-summary dt { font-weight: 600; }
.money-summary dd { margin: 0; text-align: right; white-space: nowrap; }
.mark-paid > summary { list-style: none; display: inline-block; }
.mark-paid > summary::-webkit-details-marker { display: none; }
.mark-paid .card-form { padding: 0.75rem; margin-top: 0.4rem; }
.transfer-list li { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: space-between; align-items: flex-start; }
.settle-actions summary { font-size: var(--text-sm); font-weight: 400; }
.settled-list li, .invite-rows li { margin: 0.35rem 0; }
.start-panel li { margin: 0.4rem 0; }
.step-done { color: var(--muted); }
.date-remove { margin-top: 0.5rem; font-size: var(--text-sm); }
.template-audience label { align-items: flex-start; }
.checklist-edit { font-size: var(--text-sm); }
.pay-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@media (max-width: 640px) {
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody, .stack-table tr { display: block; }
  .stack-table tr { padding: 0.7rem 0.9rem; border-bottom: 1px solid #f1f5f9; }
  .stack-table td { display: inline-block; padding: 0.1rem 0.6rem 0.1rem 0; border: 0; text-align: left; }
  .stack-table td:first-child, .stack-table td.button-row { display: block; }
  .stack-table td.button-row { padding-top: 0.5rem; }
  .stack-table td:empty { display: none; }
  .money-table { font-size: var(--text-sm); }
  .money-table th, .money-table td { padding-left: 0.3rem; padding-right: 0.3rem; }
}
/* events and first contact */
.event-steps { margin: 0 0 0.5rem; padding-left: 1.3rem; }
.event-steps li { margin-bottom: 0.5rem; }
.event-steps li.is-done { color: var(--muted); }
.event-step-done { font-weight: 600; color: #166534; white-space: nowrap; }
.event-step-done::before { content: "\2713\00a0"; }
.event-form-hint { flex: 1 1 100%; margin: 0; font-size: var(--text-sm); }
.event-actions { margin: 0.8rem 0; }
.event-change { flex: 1 1 100%; }
.event-change summary { cursor: pointer; }
.event-change-body { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; margin-top: 0.4rem; }
.event-change-body select { max-width: 100%; }
.gate-list { display: inline-block; text-align: left; margin: 0 0 0.8rem; padding-left: 1.2rem; }
.area-list { padding-left: 1.2rem; }
.area-list li { margin-bottom: 0.6rem; }
.help-top { font-size: var(--text-sm); }
.event-rsvp label[hidden] { display: none; }