/* ═══════════════════════════════════════════════════════════════════════════
   WEDDING MANAGEMENT · THE EXISTING VISUAL LANGUAGE, EXTRACTED VERBATIM

   ⛔ NOT A NEW DESIGN SYSTEM. Every rule below is copied byte-for-byte out of
      the <style> block in WEDDING/index.html, which is what the family already
      recognises. Tokens, fonts,
      cards, pills, tables, tiles, chips, day strips, the tab strip and all ten
      responsive breakpoints come across unchanged.

   ⭐ WHY EXTRACT RATHER THAN RESTYLE: the secure surfaces must look like the
      same site, not like a rebuild of it. Sharing the stylesheet is the only way
      to guarantee that - a hand-copied subset would drift the first time anyone
      touched either copy.

   ⛔ WEDDING/index.html WAS NOT MODIFIED. This file was generated from it by
      reading it. If the live site's CSS is ever changed, re-extract:
          python <scratchpad>/extract-css.py

   ⛔ DO NOT EDIT THIS FILE BY HAND while the live site still owns the original.
      Two copies of a stylesheet diverge; the live one is the source of truth
      until cutover.
   ═══════════════════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f9f4ee;
  --surface: #ffffff;
  --surface-warm: #fdfaf5;
  --ink: #3b2f2b;
  --ink-soft: #7c6d64;
  --ink-faint: #a2948a;
  --accent: #9a4a5c;
  --accent-soft: #f4e6e9;
  --gold: #b1873c;
  --gold-soft: #f7efdf;
  --border: #ece1d5;
  --border-firm: #ddcdbc;

  --settled: #4d7c59;
  --settled-bg: #e9f2eb;
  --progress: #a9781d;
  --progress-bg: #faf0dc;
  --open: #b0543c;
  --open-bg: #fbeae5;
  --tbc: #7a706a;
  --tbc-bg: #eeeae6;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  padding-bottom: 40px;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

/* ── Masthead ─────────────────────────────────────────────────────────── */
.masthead {
  background: linear-gradient(170deg, #fdfaf5 0%, #f6ece2 100%);
  border-bottom: 1px solid var(--border);
  padding: 34px 16px 26px;
  text-align: center;
}

.masthead .names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.masthead .kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.masthead .sub {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 12px;
  line-height: 1.7;
}

.masthead .sub strong { color: var(--ink); font-weight: 600; }

.countdown {
  display: inline-block;
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold);
}

/* ── Section nav ──────────────────────────────────────────────────────── */
nav.tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(249, 244, 238, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* Wider than the 720px reading column on purpose. Nine tabs need about 780px,
   so a strip capped at the content width cut "Feedback" off even on a 1920px
   screen. The nav may be wider than the prose it sits above. */
.tabs-scroll {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 16px;
  scrollbar-width: none;
}

.tabs-scroll::-webkit-scrollbar { display: none; }

/* On a phone the strip runs off the edge. Without a cue, a family member has
   no reason to think there is anything past "Meals". */
nav.tabs { position: sticky; }

/* Shown only when the strip actually overflows, set by app.js from the real
   scroll width. A media query got this wrong: at 1920px there was no fade and
   the tabs were still cut off. Measure, do not guess. */
nav.tabs.is-scrollable::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(249,244,238,0) 0%, rgba(249,244,238,0.95) 80%);
}

.tabs button {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.tabs button:hover { background: var(--surface); color: var(--ink); }

.tabs button[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Panels ───────────────────────────────────────────────────────────── */
.panel { padding-top: 26px; }
.panel[hidden] { display: none; }

h2.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

p.section-lede {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 22px;
  line-height: 1.7;
}

h3.block-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 32px 0 12px;
}

h3.block-title:first-child { margin-top: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px;
  margin-bottom: 12px;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card-head strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.card .what {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.card .pending {
  font-size: 0.875rem;
  color: var(--progress);
  margin-top: 8px;
}

.card ul { list-style: none; margin-top: 10px; }

.card ul li {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  padding: 3px 0 3px 16px;
  position: relative;
  line-height: 1.65;
}

.card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-firm);
}

/* ── Status pills ─────────────────────────────────────────────────────── */
.pill {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.5;
}

.pill.settled  { color: var(--settled);  background: var(--settled-bg); }
.pill.progress { color: var(--progress); background: var(--progress-bg); }
.pill.open     { color: var(--open);     background: var(--open-bg); }
.pill.tbc      { color: var(--tbc);      background: var(--tbc-bg); }

/* Long status words wrap rather than shove the name off the card. */
@media (max-width: 420px) {
  .card-head { flex-direction: column; gap: 8px; }
  .pill { align-self: flex-start; white-space: normal; }
}

/* ── The five days ────────────────────────────────────────────────────── */
.daystrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.daychip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.daychip:hover { border-color: var(--border-firm); }

.daychip .d {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

.daychip .m {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

.daychip .n {
  display: block;
  font-size: 0.6875rem;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.35;
}

.daychip.wedding {
  background: linear-gradient(165deg, #fdf6e8 0%, #f8ecd6 100%);
  border-color: var(--gold);
  box-shadow: 0 2px 10px rgba(177, 135, 60, 0.14);
}

.daychip.wedding .d { color: var(--gold); }
.daychip.wedding .m { color: var(--gold); }
.daychip.wedding .n { color: #8a6a2c; font-weight: 600; }

/* ── Status summary ───────────────────────────────────────────────────── */
.tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Buttons, not boxes: every number opens the items it counted. */
.tally button {
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.tally button:hover { border-color: var(--border-firm); transform: translateY(-1px); }
.tally button:active { transform: none; }

.tally button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tally .n {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.tally .l {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
  line-height: 1.3;
}

.tally .settled .n  { color: var(--settled); }
.tally .progress .n { color: var(--progress); }
.tally .open .n     { color: var(--open); }
.tally .tbc .n      { color: var(--tbc); }

/* ── The two shut drawers at the top of Now ───────────────────────────── */
/* The photograph and the map links, first on the page and closed. Shut, the
   pair costs one strip; open, each takes the full width beneath its own
   summary. ⛔ Never give these `open` in the markup. */
.topbits {
  display: grid;
  gap: 8px;
  margin: 0 0 26px;
}

@media (min-width: 620px) {
  .topbits { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Open one and it takes the whole strip, so the photograph is never squeezed
     into half a column beside a list of venues. */
  .topbit[open] { grid-column: 1 / -1; }
}

.topbit {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 14px;
}

.topbit > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.topbit > summary::-webkit-details-marker { display: none; }

.topbit > summary .tb-lab {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ink);
}

.topbit > summary .tb-n {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--surface-warm);
  border: 1px solid var(--border-firm);
  border-radius: 999px;
  padding: 1px 9px;
}

.topbit > summary::after {
  content: '';
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.topbit[open] > summary::after { transform: rotate(45deg); }

.topbit > :not(summary) {
  border-top: 1px solid var(--border);
  padding: 14px 0 16px;
  margin: 0;
}

/* ⭐⛔ ONE OBJECT, NOT TWO. The photograph and the verse share a column and a
   width so they read as a single thing — which is what they are. The rule
   between them is `.scripture-inline`'s own border-top; that is the only
   separation they get. ⛔ Do not give the verse a width of its own here. */
.photoverse { max-width: 340px; }
.photoverse .done-photo { max-width: 100%; }
.photoverse .scripture-inline { margin-top: 16px; }

/* ── Already behind us ────────────────────────────────────────────────── */
/* One photograph, held to a modest width on purpose: this is a management page
   with a warm streak, not a wedding album, and a tall portrait at full column
   width would take over. It now lives in the `.topbit` drawer at the top of the
   Now page, not beside the milestone list — the `.done` two-column grid that
   used to pair them is gone with it. */
.done-photo { margin: 0; }

.done-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.done-photo figcaption {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  line-height: 1.6;
  padding-top: 8px;
}

@media (max-width: 519px) {
  .done-photo { max-width: 220px; }
}

/* ── What has moved ───────────────────────────────────────────────────── */
.moved {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.moved .arrow { color: var(--accent); font-weight: 700; padding: 0 3px; }

.movedwhen {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* ── Day detail (the agenda) ──────────────────────────────────────────── */
.day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
}

.day.wedding {
  border-color: var(--gold);
  background: linear-gradient(178deg, #fffdf8 0%, #fdf7ec 100%);
}

.day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.day-head .dd {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}

.day.wedding .day-head .dd { color: var(--gold); }

.day-head .dw { font-size: 0.8125rem; color: var(--ink-faint); }

.day-head .dn {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
}

.day.wedding .day-head .dn { color: var(--gold); }

.day ol { list-style: none; }

.day ol li {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  align-items: baseline;
}

.day ol li .t {
  flex: 0 0 108px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.5;
}

.day.wedding ol li .t { color: var(--gold); }

.day ol li .t.no-time::before {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-firm);
  margin-top: 8px;
  margin-left: 4px;
}

.day ol li .x { flex: 1; color: var(--ink); }
.day ol li.is-note .x { color: var(--ink-soft); font-style: italic; }

.tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--tbc);
  background: var(--tbc-bg);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}

@media (max-width: 460px) {
  .day ol li { flex-direction: column; gap: 1px; }
  .day ol li .t { flex: none; }
  .day ol li .t.no-time { display: none; }
}

/* What section A records as settled for a day, sitting under that day's
   running order rather than competing with it. */
.agreed {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-firm);
}

.agreed-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--settled);
  margin-bottom: 8px;
}

.agreed ul { list-style: none; }

.agreed ul li {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.65;
  padding: 3px 0 3px 15px;
  position: relative;
}

.agreed ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--settled);
  opacity: 0.45;
}

/* A resolved date, sitting quietly beside the plan's own wording rather than
   replacing it. The words are what the family said; the date is our reading. */
.on {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 3px;
}

.when-on {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
  line-height: 1.5;
  padding-top: 2px;
}

@media (max-width: 460px) {
  .when-on { text-align: left; }
}

h4.group-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  margin: 18px 0 8px;
}

h4.group-title:first-of-type { margin-top: 0; }

.daylabel {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}

.card.is-wedding {
  border-color: var(--gold);
  background: linear-gradient(178deg, #fffdf8 0%, #fdf7ec 100%);
}

.card.is-wedding .daylabel { color: var(--gold); }

/* ── Plain lists ──────────────────────────────────────────────────────── */
.list { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }

.list li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}

.list li:last-child { border-bottom: none; }

.list li .box {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 4px;
  border: 1.5px solid var(--border-firm);
  border-radius: 4px;
}

/* A job the family has said is finished. The tick is the whole signal — the
   line is NOT struck through and NOT faded, because it still has to be
   readable by whoever holds it. The words beside it say how it finished. */
.list li .box.ticked {
  border-color: var(--settled);
  background: var(--settled);
  position: relative;
}
.list li .box.ticked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.list li.is-done .on.done { color: var(--settled); font-weight: 600; }

.list li .dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

/* ── One card holding several of the same thing ───────────────────────── */
/* Several stays in one block. One heading, then each entry ruled off from the next,
   so they read as one job with several parts rather than unrelated cards
   — while each keeps its own dates and its own status pill. */
.stayblock .blockhead { margin-bottom: 4px; }

.stayblock .blockhead strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
}

.stayblock .blockhead .what { margin-top: 2px; }

.stayblock .stay {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-firm);
}

.stayblock .stay strong { font-weight: 600; }
.stayblock .stay .card-head { align-items: flex-start; }

/* ── Tracker ──────────────────────────────────────────────────────────── */
/* The date leads, because the date is what the family added when they built
   the spreadsheet, and it is the only thing on the row that changes meaning
   as the months pass. Fixed width so a long list reads as a column and not
   as many different indents. */
.list.track li { gap: 12px; align-items: flex-start; }

.tdate {
  flex: 0 0 auto;
  width: 72px;
  text-align: right;
  line-height: 1.25;
  padding-top: 1px;
}

.tdate .dd {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* "by" is the whole point of the column and must never be mistaken for the
   day the thing happens — but it is a preposition, so it is set quieter than
   the date it qualifies rather than competing with it. */
.tdate .by {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-faint);
}

.tdate .rel {
  display: block;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* A date already behind us, and a date close enough to act on. Both are
   arithmetic on a date the family set — neither is a verdict on the job. */
.tdate.past .dd  { color: var(--open); }
.tdate.past .rel { color: var(--open); font-weight: 600; }
.tdate.soon .dd  { color: var(--progress); }
.tdate.soon .rel { color: var(--progress); }

.tdate.none {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ink-faint);
  padding-top: 4px;
}

.tbody { flex: 1; min-width: 0; }
.tbody .titem { font-weight: 500; }

.tnote {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.tlist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.tlist li {
  display: inline-block;
  border: none;
  padding: 0;
  margin-right: 10px;
  font-size: inherit;
  line-height: inherit;
}

.tlist li::after { content: '·'; margin-left: 10px; color: var(--border-firm); }
.tlist li:last-child::after { content: none; }

/* One event, folded or open, with its count always on the summary so nothing
   has to be opened to find out how big it is. Open by default: this list is
   the point of the page, not a footnote to it. */
details.tgroup { margin-top: 22px; }

details.tgroup > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 10px;
}

details.tgroup > summary::-webkit-details-marker { display: none; }

details.tgroup > summary .tg {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
}

details.tgroup > summary .n {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: 999px;
  padding: 1px 9px;
}

details.tgroup > summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

details.tgroup[open] > summary::after { transform: rotate(45deg); }

/* A month divider inside an event box. Quiet — the event is the heading, this
   is a rule drawn across it — with the count so a month can be sized without
   reading it. */
.tmonth {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 20px 0 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

details.tgroup > summary + .tmonth { margin-top: 2px; }

.tmonth .tm { flex: 0 0 auto; }

.tmonth .n {
  flex: 0 0 auto;
  font-size: 0.625rem;
  letter-spacing: 0;
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 7px;
}

.tmonth::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Counted from the rows themselves, so it cannot drift from the list under it. */
.tsum {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 4px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* ⛔ THE LABEL IS NOT DECORATION, IT IS WHAT MAKES THE ROW READABLE. It takes
   the whole width so the numbers under it are visibly a set with a scope, and
   never a row of four figures a reader has to try to add up. */
.tsum .lab {
  flex: 1 0 100%;
  margin-bottom: -2px;
}

.tsum strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
}

/* On "Due next" the job is a link to its place in the tracker, so the holder
   drops to its own line under it rather than trailing a two-line button. */
.list.track .xref { display: block; }
.list.track .xref + .who { margin-left: 0; margin-top: 5px; }

/* Verified against the narrowest phone column this site renders at: the row
   fits without wrapping, so the only thing narrow screens need is a tighter
   date column and permission for a long name to break. */
@media (max-width: 460px) {
  .list.track li { gap: 10px; padding: 12px 13px; }
  .tdate { width: 66px; }
  .list.track .who { white-space: normal; }
}

/* ── Guest list ───────────────────────────────────────────── */
/* A register, not a card wall: a long guest list has to be scannable, and a line has
   to be findable by its number, because that is how the family will refer to
   it. Four columns at 360px without wrapping, checked at that width. */
.gtable {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 4px;
  font-size: 0.9375rem;
}

.gtable thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--border-firm);
  white-space: nowrap;
}

.gtable thead th:nth-child(3),
.gtable thead th:nth-child(4) { text-align: right; }

.gtable td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.gtable tbody tr:last-child td { border-bottom: none; }

.gtable .gn {
  width: 34px;
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.gtable .gname { color: var(--ink); }

.gtable .gc,
.gtable .gok {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.gtable .gok { width: 78px; }

/* The dash is the planner having nothing written down, and is a good deal
   quieter than a word that could be mistaken for an answer. */
.gnil { color: var(--ink-faint); }

.gmissing {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--open);
}

/* A duplicate is flagged on both of the rows it affects, not only in the
   summary, so it cannot be scrolled past. */
.gdup {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--progress);
}

/* The subtotal table is the same table with the header dropped: it is read as
   arithmetic, and the line under it shows the arithmetic. */
.gtable.gsum { margin-top: 10px; max-width: 480px; }
.gtable.gsum .gname { font-weight: 500; }
.gtable.gsum .gtot td {
  border-top: 1px solid var(--border-firm);
  border-bottom: none;
  padding-top: 11px;
}
.gtable.gsum .gtot .gname { font-weight: 600; color: var(--ink); }

/* Two lists, one table. A side opens with its own name and closes with its own
   subtotal, so each half can be read on its own and the grand total is plainly
   the two halves added. */
.gtable.gsum .gside td {
  padding-top: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--border-firm);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.gtable.gsum tr:first-child.gside td { padding-top: 2px; }
.gtable.gsum .gsub td { border-bottom: none; padding-top: 9px; color: var(--ink-soft); }
.gtable.gsum .gsub .gname { font-weight: 600; }

/* The heading that opens one side's groupings, in the list itself. */
.glisthead { margin-top: 26px; }

.gadd {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin: 6px 0 2px;
}

/* The two lists as two pages under one heading. The chosen one is filled, the
   other is an outline: at a glance you can see there are two and which you are on. */
.gsides { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.gside-tab {
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--border-firm); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
}
.gside-tab:hover { border-color: var(--accent); }
.gside-tab:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.gside-tab[aria-selected="true"] {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.gsidesaid { margin-top: 0; }

.gfind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 4px;
}

.gfind label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.gfind input {
  flex: 1;
  min-width: 200px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: 10px;
  padding: 9px 12px;
}

.gfind input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.gshowing {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.gtap {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin: 20px 0 -8px;
}

/* A merged line is struck, not hidden: the planner still has the row, and a
   family member who was given that line number has to land on an answer. */
.gtable tr.gmerged .gnm {
  text-decoration: line-through;
  text-decoration-color: var(--border-firm);
  color: var(--ink-faint);
}

.gmerge {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.glist {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
}

.glist li {
  position: relative;
  padding: 9px 0 9px 18px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}

.glist li:last-child { border-bottom: none; }

.glist li::before {
  content: '';
  position: absolute;
  left: 2px; top: 17px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-firm);
}

.glist li strong { color: var(--ink); font-weight: 600; }

@media (max-width: 460px) {
  .gtable { font-size: 0.875rem; }
  .gtable td { padding: 9px 5px; }
  .gtable .gn { width: 26px; }
  .gtable .gok { width: 58px; }
}

/* ── Meals ────────────────────────────────────────────────────────────── */
.meal-day { margin-bottom: 12px; }

.meal-row {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9375rem;
}

.meal:last-of-type .meal-row { border-bottom: none; }
.meal:last-of-type .meal-menu { border-bottom: none; }

/* The dishes, under the meal they belong to. Set as chips rather than a
   bulleted list so a nine-dish reception menu stays one readable block. */
.meal-menu {
  list-style: none;
  margin: 0 0 9px 88px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 9px;
}
.meal-menu li {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  background: var(--tint, rgba(0, 0, 0, 0.035));
  border-radius: 999px;
  padding: 2px 9px;
}
@media (max-width: 520px) { .meal-menu { margin-left: 0; } }

.meal-row .m {
  flex: 0 0 88px;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.meal-row .p { flex: 1; color: var(--ink); }

/* A set time, and the number to cater for. Both are blank rather than
   guessed where the family has not given one. */
.meal-row .mt {
  flex: 0 0 72px;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.meal-row .mt.no-time { color: transparent; }

.meal-row .pax {
  flex: 0 0 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* The head of a meals card is the way through to the same day in the
   agenda, so it is a button and has to be un-styled back to a heading. */
.meal-head {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.meal-head .goday {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ink-soft);
  opacity: 0.75;
  white-space: nowrap;
}
.meal-head:hover .goday { opacity: 1; text-decoration: underline; }

@media (max-width: 520px) {
  .meal-row { flex-wrap: wrap; gap: 4px 10px; }
  .meal-row .m { flex: 0 0 76px; }
  .meal-row .mt { flex: 0 0 auto; }
  .meal-row .mt.no-time { display: none; }
  .meal-row .p { flex: 1 0 100%; order: 3; }
  .meal-row .pax { flex: 0 0 auto; order: 2; margin-left: auto; }
}

/* ── Who holds what ───────────────────────────────────────────────────── */

/* The holder of an item, shown on the item itself. An unheld item says so in
   the same place, in a quieter voice, so a gap reads as a gap and not as an
   omission. */
.who {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, 0.045);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.who.none {
  font-weight: 400;
  font-style: italic;
  background: none;
  opacity: 0.6;
  padding-left: 0;
}

.owner {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.list.tight li { padding: 3px 0; font-size: 0.875rem; }

/* Names close, dates inside them close, items inside those. Native <details>,
   so the keyboard and a screen reader get it for nothing. */
details.person { padding: 0; }
details.person > summary,
details.whoday > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
}
details.person > summary::-webkit-details-marker,
details.whoday > summary::-webkit-details-marker { display: none; }

details.person > summary { padding: 18px 18px 14px; }
details.person[open] > summary { padding-bottom: 8px; }
details.person > summary:hover { background: var(--surface-warm); border-radius: 14px 14px 0 0; }
details.person > *:not(summary) { padding: 0 18px; }
details.person > *:last-child { padding-bottom: 16px; }

/* The chevron, on both levels. */
details.person > summary .card-head::after,
details.whoday > summary::after {
  content: '›';
  font-size: 1.125rem;
  color: var(--ink-faint);
  transform: rotate(90deg);
  transition: transform 0.15s;
  line-height: 1;
  flex: 0 0 auto;
}
details.person[open] > summary .card-head::after,
details.whoday[open] > summary::after { transform: rotate(270deg); }

/* The days a person is needed, readable without opening them. */
.daychips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.daychips .dc {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

details.whoday {
  border-top: 1px dashed var(--border);
  margin-top: 0;
}
details.whoday > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
}
details.whoday > summary .wd {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
details.whoday > summary .n {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--surface-warm);
  border-radius: 999px;
  padding: 1px 7px;
  margin-right: auto;
}
details.whoday > .list.tight { padding-bottom: 8px; }

/* A quantity or a spec on an agenda line, under the line it belongs to. */
.edetail {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 1px;
}

/* A holder's name, wherever it sits on an item, is the way back to them. */
.wholink {
  font: inherit;
  cursor: pointer;
  border: none;
  color: var(--ink-soft);
}
.wholink:hover { color: var(--accent); text-decoration: underline; }
.seealso { margin-top: 8px; }

/* What to hold for a supplier or a place, shown inside its card. */
ul.hold { list-style: none; margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
ul.hold li {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding: 3px 0 3px 16px;
  position: relative;
}
ul.hold li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  border: 1px solid var(--border-firm);
  border-radius: 2px;
}

/* The first table takes the full width; the remaining tables sit two across
   under it. */
.viptables { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.viptables .card { margin-bottom: 0; }
.viptables .card:first-child { grid-column: 1 / -1; }
.viptables .side {
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-left: 6px;
}
@media (max-width: 560px) { .viptables { grid-template-columns: 1fr; } }

/* A cross reference: the item, and the way through to where it lives. */
.xref {
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.65;
}
.xref:hover { color: var(--ink); }
.xref:hover .on { color: var(--accent); text-decoration: underline; }

/* A person's items, split into the days they fall on. */
.whoday { margin-top: 10px; }
.whoday .wd {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  margin-bottom: 2px;
}
.whoday .list.tight { margin-top: 2px; }

/* ── Route ────────────────────────────────────────────────────────────── */
.route { counter-reset: stop; }

.route li {
  list-style: none;
  position: relative;
  padding: 8px 0 8px 34px;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.6;
}

.route li::before {
  counter-increment: stop;
  content: counter(stop);
  position: absolute;
  left: 0; top: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.route li::after {
  content: '';
  position: absolute;
  left: 10.5px; top: 30px; bottom: -8px;
  width: 1px;
  background: var(--border-firm);
}

.route li:last-child::after { display: none; }

/* ── Notes ────────────────────────────────────────────────────────────── */
.note {
  background: var(--surface-warm);
  border-left: 3px solid var(--border-firm);
  border-radius: 0 8px 8px 0;
  padding: 11px 14px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 12px 0;
}

.note.warm { border-left-color: var(--gold); background: var(--gold-soft); color: #7a5d24; }

.empty {
  background: var(--surface);
  border: 1px dashed var(--border-firm);
  border-radius: 14px;
  padding: 18px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* A grid, not wrapped pills. Ragged rows of different-width chips read as a
   mess; equal cells read as a team: two columns on a phone, five on a wider
   screen. */
.chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 560px) {
  .chips { grid-template-columns: repeat(5, 1fr); }
}

.chip {
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: 10px;
  padding: 12px 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ── Feedback form ────────────────────────────────────────────────────── */
.fb { padding: 20px 18px 22px; }

.fb-kind { border: 0; margin-bottom: 18px; }

.fb-kind legend {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 9px;
}

.fb-kind label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 14px 6px 0;
  font-size: 0.9375rem;
  cursor: pointer;
}

.fb-kind input { accent-color: var(--accent); width: 17px; height: 17px; }

.fb-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 16px 0 7px;
}

.fb-label span { text-transform: none; letter-spacing: 0; font-weight: 500; }

.fb-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;              /* 16px stops iOS zooming the page on focus */
  color: var(--ink);
  background: var(--surface-warm);
  border: 1px solid var(--border-firm);
  border-radius: 10px;
  padding: 11px 13px;
  resize: vertical;
}

.fb-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

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

.fb-btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
}

.fb-btn:hover { filter: brightness(0.97); }

.fb-count { font-size: 0.8125rem; color: var(--ink-faint); }

.fb-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.fb-thumb { position: relative; width: 76px; height: 76px; }

.fb-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--border-firm);
}

.fb-drop {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.fb-msg {
  margin: 16px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.fb-msg.ok   { background: var(--settled-bg); color: var(--settled); }
.fb-msg.warn { background: var(--open-bg);    color: var(--open); }

.fb-send {
  margin-top: 18px;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  padding: 13px;
  cursor: pointer;
}

.fb-send:hover:not(:disabled) { filter: brightness(1.06); }
.fb-send:disabled { opacity: 0.6; cursor: default; }

/* ── Scripture ────────────────────────────────────────────────────────── */
/* Sits beside the ROM photograph, filling the space the two milestone rows
   leave under a tall portrait. Quiet on purpose: set in the serif, unboxed,
   separated from the list by a rule rather than a border. */
.scripture-inline {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.scripture-inline blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: var(--accent);
}

.scripture-inline cite {
  display: block;
  margin-top: 9px;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (min-width: 520px) {
  .scripture-inline blockquote { font-size: 1.375rem; }
}

footer {
  text-align: center;
  padding: 34px 16px 8px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  line-height: 1.7;
}

/* Five chips across a narrow phone leaves each one about 68px. Give the day
   names the room instead of the padding. All five stay visible together,
   which is the point of the strip. */
@media (max-width: 430px) {
  .daystrip { gap: 4px; }
  .daychip { padding: 10px 3px; }
  .daychip .d { font-size: 1.1875rem; }
  .daychip .n { font-size: 0.625rem; margin-top: 4px; line-height: 1.25; }
  .tally { gap: 6px; }
  .tally button { padding: 12px 4px; }
  .tally .l { font-size: 0.5625rem; letter-spacing: 0.4px; }
}

@media (min-width: 560px) {
  .masthead .names { font-size: 3rem; }
  .card { padding: 20px 22px; }
  .day { padding: 22px; }
}
/* ═══ Map links ══════════════════════════════════════════════════════════ */
.maplink {
  display: inline-block; margin-top: 5px;
  font-size: 0.8125rem; font-weight: 600; color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--border-firm); border-radius: 7px;
  padding: 4px 10px; background: var(--surface);
}
/* ⛔ The warning is not decoration. It is what stops a private home address being
   pasted into a guest message. */
.mapwarn {
  display: inline-block; margin-left: 8px;
  font-size: 0.75rem; color: var(--open);
  background: var(--open-bg); border-radius: 6px; padding: 3px 8px;
}

/* ═══ RSVP · how a guest is invited ══════════════════════════════════════ */
.rs-steps { margin: 12px 0 16px 20px; font-size: 0.875rem; color: var(--ink); }
.rs-steps li { margin-bottom: 7px; line-height: 1.55; }

/* ── Send: choose one household, act on it once ───────────────────────── */
/* ⛔ This replaced a list of one row and two buttons per household. The picker holds
   the names; the ONE row beneath holds the buttons. Do not reintroduce a
   per-household action row. */
.sendpick {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 14px; margin-top: 4px;
}
.sendpick-lab {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}

/* Who is sending. Two sides word the invitation differently; the row is absent
   altogether while only one wording exists. The labels are the tap target, and they
   stay full height on a phone so a thumb cannot miss between them. */
.sendside { margin-bottom: 12px; }
.sendsides { display: flex; flex-wrap: wrap; gap: 8px; }
.sendsidelab {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.9375rem; color: var(--ink);
  background: var(--surface-warm); border: 1px solid var(--border-firm);
  border-radius: 10px; padding: 10px 13px; cursor: pointer;
}
.sendsidelab:focus-within { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.sendsidelab input { accent-color: var(--accent); width: 17px; height: 17px; }

.rs-find {
  width: 100%; font: inherit; font-size: 0.9375rem;
  background: var(--surface-warm); border: 1px solid var(--border-firm);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 8px;
}
.rs-find:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* 16px, because anything smaller makes iOS zoom the page when it is tapped. */
.rs-select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface-warm); border: 1px solid var(--border-firm);
  border-radius: 10px; padding: 12px 13px;
}
.rs-select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.sendone {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--border); padding-top: 13px; margin-top: 2px;
}
.sendpax {
  display: block; font-size: 0.75rem; color: var(--ink-faint); margin-top: 2px;
}
.sendname.none { color: var(--ink-faint); font-style: italic; }

/* ─── Invitation links: how far through ──────────────────────────────── */
.rs-progress { margin: 4px 0 14px; }
.rs-prog-main { font-size: 0.9375rem; color: var(--ink); margin: 0 0 4px; }
.rs-only {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 0.875rem; color: var(--ink-soft); cursor: pointer;
}
.rs-only input { accent-color: var(--accent); width: 17px; height: 17px; }
.sendpax.rs-has { color: var(--settled); }
/* Who sends a household's invitation (the planner's Invitation PIC). Managers only. */
.gpic {
  display: block; margin-top: 3px;
  font-size: 0.75rem; color: var(--ink-faint);
}
.rs-made { margin-top: 18px; }
.rs-made .rs-side { color: var(--ink-faint); }
/* The Guest List carries the same fact, quietly. */
.glink {
  display: block; margin-top: 3px;
  font-size: 0.75rem; color: var(--settled);
}

.sendname { font-size: 0.9375rem; font-weight: 600; color: var(--ink); min-width: 0; }
.sendn {
  display: inline-block; min-width: 30px;
  color: var(--ink-faint); font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.sendacts { display: flex; gap: 7px; flex: none; }

.wabtn {
  font-size: 0.8125rem; font-weight: 600; color: #fff;
  background: #25D366;                 /* WhatsApp's own green, so the row is scannable */
  border-radius: 8px; padding: 7px 13px; text-decoration: none; white-space: nowrap;
}
.linkbtn {
  font: inherit; font-size: 0.8125rem; color: var(--ink-soft);
  background: none; border: 1px solid var(--border-firm); border-radius: 8px;
  padding: 6px 11px; cursor: pointer; white-space: nowrap;
}

/* On a phone the name takes the width and the two buttons drop beneath it,
   full width — this is the row a manager actually presses, on the device they press
   it on. */
@media (max-width: 480px) {
  .sendone { flex-direction: column; align-items: stretch; gap: 10px; }
  .sendacts { width: 100%; }
  .wabtn, .linkbtn { flex: 1; text-align: center; padding-top: 11px; padding-bottom: 11px; }
}

.rs-msgbox {
  border: 1px solid var(--border-firm);
  border-radius: 11px;
  background: var(--surface-warm);
  padding: 14px;
  margin-bottom: 14px;
}
.rs-copy {
  font: inherit; font-size: 0.8125rem; font-weight: 600;
  color: #fff; background: var(--accent); border: 0; border-radius: 8px;
  padding: 9px 16px; cursor: pointer; margin-bottom: 12px;
}
.rs-msgtext {
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;      /* the message keeps its own line breaks */
  word-break: break-word;     /* the URL must not push the card wide */
  margin: 0;
}

/* ═══ RSVP summary (family side) ═════════════════════════════════════════
   ⛔ EVERY ROW CARRIES ITS OWN LABEL. Invited pax and RSVP pax are true
   numbers about different questions; put together with no scope they read as
   a page that cannot add up. The label is what stops that, not a paragraph. */
.rs-sum { margin-top: 16px; }

.rs-sum-lab {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 22px 0 9px;
}
.rs-sum-lab:first-child { margin-top: 0; }

.rs-sum-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.rs-tile {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
}
.rs-tile b {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--ink);
  font-weight: 600;
}
.rs-tile span {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.4;
}
.rs-tile.ok    { border-color: #cfe0d4; background: var(--settled-bg); }
.rs-tile.ok b  { color: var(--settled); }
.rs-tile.no    { border-color: #f0cfc5; background: var(--open-bg); }
.rs-tile.no b  { color: var(--open); }
.rs-tile.maybe { border-color: #ecd9ae; background: var(--progress-bg); }
.rs-tile.maybe b { color: var(--progress); }
.rs-tile.none  { border-color: var(--border-firm); background: var(--tbc-bg); }
.rs-tile.none b { color: var(--tbc); }