/* Care schedule: a kind note on the fridge. Warm paper, soft ink, one terracotta
   action color, sage for "covered", honey for "paused" and gaps. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color roles */
  --paper: #faf5ec;
  --surface: #fffdf8;
  --sunk: #f2eadc;
  --ink: #2b211a;
  --ink-soft: #5b4b3f;
  --line: #e4d7c4;
  --line-strong: #8c7864;
  --accent: #a8452b;
  --accent-strong: #8a3720;
  --accent-wash: #fbe8df;
  --sage-ink: #2f5a34;
  --sage-wash: #e8f0e1;
  --sage-line: #9dbb93;
  --honey-ink: #6b4500;
  --honey-wash: #fcefcf;
  --honey-line: #d9ab55;
  --need-wash: #fdf3dc;
  --danger: #a12a1c;
  --danger-wash: #fbe4df;
  --focus: #1f5fae;

  /* Type scale (root is 20px for most people): sm, base, lg, xl, 2xl */
  --t-sm: 0.8rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.6rem;
  --t-2xl: 2rem;

  /* Spacing scale, 4px steps at the default size */
  --s-1: 0.2rem;
  --s-2: 0.4rem;
  --s-3: 0.6rem;
  --s-4: 0.8rem;
  --s-5: 1.2rem;
  --s-6: 1.6rem;
  --s-7: 2.4rem;
  --gutter: clamp(16px, 4vw, 32px);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(70, 45, 20, 0.06), 0 6px 18px rgba(70, 45, 20, 0.08);
  --font: "Atkinson Hyperlegible Next", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* 125% of the browser default: 20px for most people, and it still follows their own text-size setting. */
html { font-size: 125%; -webkit-text-size-adjust: 100%; background: var(--paper); }

body {
  margin: 0 auto;
  max-width: 54rem;
  padding: 0 var(--gutter) var(--s-7);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.45;
}

::selection { background: var(--honey-wash); color: var(--ink); }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--t-2xl); font-weight: 760; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: var(--t-lg); font-weight: 720; margin: 0; }
h3 { font-size: var(--t-base); font-weight: 720; margin: 0; }
p { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-strong); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* Icons: drawn SVG masks, colored by the text around them */
.icon {
  display: inline-block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.17em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.i-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); }
.i-pause { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='4.5' width='4.5' height='15' rx='1.6'/%3E%3Crect x='14' y='4.5' width='4.5' height='15' rx='1.6'/%3E%3C/svg%3E"); }
.i-heart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.2-9.4C1.6 7.6 3.8 4.5 7.1 4.5c2 0 3.6 1.1 4.9 2.9 1.3-1.8 2.9-2.9 4.9-2.9 3.3 0 5.5 3.1 4.3 6.6-1.7 4.8-9.2 9.4-9.2 9.4z'/%3E%3C/svg%3E"); }
.i-left { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.i-calendar { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.i-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }

/* ---------- Top of the page ---------- */

.masthead { padding-top: var(--s-6); display: grid; gap: var(--s-4); }
.masthead-row { display: flex; align-items: center; gap: var(--s-4); }
.masthead-text { min-width: 0; display: grid; gap: var(--s-1); }
.photo {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow);
}
.about { color: var(--ink-soft); font-size: var(--t-base); overflow-wrap: break-word; }

.status { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
  border: 2px solid transparent;
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.3;
}
.pill.open { background: var(--sage-wash); color: var(--sage-ink); border-color: var(--sage-line); }
.pill.closed { background: var(--honey-wash); color: var(--honey-ink); border-color: var(--honey-line); }

/* The family note: a card on the fridge */
.note {
  position: relative;
  margin-top: var(--s-2);
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.note::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 84px;
  height: 22px;
  margin-left: -42px;
  background: rgba(217, 171, 85, 0.45);
  border-radius: 3px;
  transform: rotate(-2deg);
}
.note-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-base);
  color: var(--accent-strong);
  margin-bottom: var(--s-2);
}
.note p { white-space: pre-wrap; overflow-wrap: break-word; }

/* "How Mom is doing": a dated letter, not a taped card. A terracotta rule on the
   left, no tape and no shadow, so it reads apart from the family note. */
.updates {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
  display: grid;
  gap: var(--s-3);
}
.updates:focus { outline: none; }
.updates:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.updates-title { font-size: var(--t-lg); }
.update { display: grid; gap: var(--s-1); min-width: 0; }
.update-meta { font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft); }
.update-text { white-space: pre-wrap; overflow-wrap: break-word; }
.updates-toggle { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); text-align: left; }
.updates-toggle .icon { transition: transform 0.15s ease-out; }
.updates-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.updates-earlier { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.updates-earlier .update { padding-top: var(--s-4); border-top: 1px dashed var(--line-strong); }

.alert {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--danger-wash);
  color: var(--danger);
  border: 2px solid var(--danger);
  font-weight: 700;
}

/* The how-to-help video, inline on the public page. Portrait (780x1688): the width follows
   from the height cap, and aspect-ratio holds the box before the metadata loads. */
.help-video { margin-top: var(--s-6); }
.help-video-full { display: grid; gap: var(--s-3); justify-items: center; }
.help-video-title { font-size: var(--t-lg); text-align: center; }
.help-video-frame {
  position: relative;
  width: min(100%, 300px, calc(60vh * 780 / 1688));
}
/* Once it plays inline (desktops; phones go full screen), give it more room. */
.help-video-frame.is-started { width: min(100%, 420px, calc(80vh * 780 / 1688)); }
.help-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 1688;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunk);
}
/* The big play button, centered over the poster until the first play and again at the end. */
.help-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.help-video-disc {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(43, 33, 26, 0.25), 0 8px 24px rgba(43, 33, 26, 0.3);
}
.help-video-triangle {
  width: 30px;
  height: 34px;
  margin-left: 6px; /* optical center */
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.help-video-play-label {
  padding: var(--s-1) var(--s-4);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 760;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(43, 33, 26, 0.3);
}
.help-video-play:hover .help-video-disc,
.help-video-play:hover .help-video-play-label { background: var(--accent-strong); }
.help-video-collapsed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--s-3);
  color: var(--ink-soft);
}

/* Your own sign-ups: the receipt */
.receipts {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--sage-wash);
  border: 2px solid var(--sage-line);
  border-radius: var(--radius);
  display: grid;
  gap: var(--s-3);
}
.receipts:focus { outline: none; }
.receipts:focus-visible { outline: 3px solid var(--focus); }
.mine-thanks { font-size: var(--t-lg); font-weight: 760; color: var(--sage-ink); }
.mine-title { font-size: var(--t-base); color: var(--sage-ink); }
.mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.mine-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.mine-list li { min-width: 0; }
.mine-list li:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.mine-list li .icon { color: var(--sage-ink); }
.mine-text { flex: 1 1 12rem; min-width: 0; overflow-wrap: break-word; }
/* Add to calendar: its own line, under the sentence and above Remove. */
.mine-cal {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}
.btn-cal { width: 100%; min-width: 0; min-height: 60px; padding-inline: var(--s-2); text-decoration: none; hyphens: auto; overflow-wrap: anywhere; }
.btn-cal, .btn-cal:visited, .mine-list li .btn-cal .icon { color: #fff; }
@media (max-width: 300px) {
  .btn-cal .icon { display: none; }
}
.mine-cal .link { display: inline-flex; align-items: center; min-height: 44px; }
.mine-help { color: var(--ink-soft); font-size: var(--t-sm); }

/* ---------- Tabs, like spreadsheet tabs ---------- */

.tabs {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-6);
  border-bottom: 3px solid var(--accent);
}
.tabs [role="tab"] {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: var(--s-2) var(--s-2);
  border: 2px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--sunk);
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 720;
  cursor: pointer;
  overflow-wrap: break-word;
}
.tabs [role="tab"]:hover { background: var(--accent-wash); }
.tabs [role="tab"][aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.panel { padding-top: var(--s-5); display: grid; gap: var(--s-5); }
.panel > * { min-width: 0; }

.hint { color: var(--ink-soft); }
.section-title { margin-top: var(--s-4); }

.paused {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  background: var(--honey-wash);
  color: var(--honey-ink);
  border: 2px solid var(--honey-line);
  font-weight: 700;
}

/* Meals not open yet: one calm line in place of the grid. */
.not-yet {
  padding: var(--s-5);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}
.meals-from {
  justify-self: start;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  background: var(--honey-wash);
  color: var(--honey-ink);
  border: 2px solid var(--honey-line);
  font-weight: 700;
}

.notice {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--honey-wash);
  color: var(--honey-ink);
  border: 2px solid var(--honey-line);
  font-weight: 700;
}
.notice:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent);
  background: var(--surface);
  color: var(--accent-strong);
  font-weight: 720;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.btn:hover { background: var(--accent-wash); }
.btn:active { background: #f6d9cc; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #861f14; }
.btn-quiet { border-color: var(--line-strong); color: var(--ink); }
.btn-quiet:hover { background: var(--sunk); }
.btn-quiet-danger { border-color: var(--line-strong); color: var(--danger); }
.btn-quiet-danger:hover { background: var(--danger-wash); border-color: var(--danger); }
.btn-small { min-height: 44px; padding: var(--s-1) var(--s-3); font-size: var(--t-sm); }
.btn-big { width: 100%; min-height: 60px; font-size: var(--t-base); }
.btn:disabled {
  background: var(--sunk);
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.link {
  background: none;
  border: none;
  padding: var(--s-2) var(--s-1);
  min-height: 44px;
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link.small { font-size: var(--t-sm); min-height: 40px; padding: var(--s-1) 0; }

/* ---------- Still needed ---------- */

.needed {
  padding: var(--s-4) var(--s-5) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--s-3);
}
.needed.all-set { background: var(--sage-wash); border-color: var(--sage-line); box-shadow: none; }
.needed.all-set .needed-title { color: var(--sage-ink); }
.needed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--need-wash);
  color: var(--accent-strong);
  font-weight: 720;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease-out;
}
.chip:hover { background: var(--accent-wash); }
.needed-more { color: var(--ink-soft); }

/* ---------- Meals grid ---------- */

table.meals {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
table.meals thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  padding: var(--s-3) var(--s-1) var(--s-2);
  font-size: var(--t-sm);
  font-weight: 760;
  color: var(--ink-soft);
  text-align: left;
  border-bottom: 2px solid var(--line-strong);
}
table.meals thead th:first-child { padding-left: var(--s-2); }
table.meals .day-row th {
  text-align: left;
  padding: var(--s-5) var(--s-2) var(--s-2);
  font-size: var(--t-base);
  font-weight: 760;
}
table.meals tbody:first-of-type .day-row th { padding-top: var(--s-4); }
.sub { font-weight: 400; color: var(--ink-soft); }
table.meals td { vertical-align: top; padding: var(--s-1); }

.cell {
  height: 100%;
  min-height: 60px;
  display: grid;
  align-content: start;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  overflow-wrap: break-word;
  min-width: 0;
}
.cell.taken { background: var(--surface); border: 1px solid var(--line); }
.cell.taken.mine { background: var(--sage-wash); border-color: var(--sage-line); }
/* Someone else's meal: just "Covered", in the sage "covered" colors. */
.cell.taken.covered { background: var(--surface); border: 2px solid var(--sage-line); }
.cell.taken.covered .who { align-items: center; }
.cell.need { padding: 0; }
.cell.need.nearby .btn-slot { background: var(--need-wash); border-width: 3px; box-shadow: 0 0 0 4px var(--honey-wash); }
.cell.rest { background: var(--sunk); color: var(--ink-soft); font-size: var(--t-sm); }
.meal-label { display: none; font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft); }
.cell.rest .meal-label { display: block; }
.who { display: flex; gap: var(--s-2); align-items: baseline; font-weight: 760; color: var(--sage-ink); min-width: 0; }
.who > span:last-child { min-width: 0; overflow-wrap: break-word; }
.cell-note { font-size: var(--t-sm); color: var(--ink-soft); overflow-wrap: break-word; }
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.btn-slot { width: 100%; min-height: 60px; hyphens: manual; overflow-wrap: break-word; }
.notice-row td { padding: var(--s-2) var(--s-1) 0; }

.more-days { display: grid; justify-items: start; gap: var(--s-2); }

/* Narrow screens: the column header goes away, so each covered cell names its meal
   and each open cell's button does. */
@media (max-width: 40em) {
  table.meals thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .meal-label { display: block; }
  .taken .meal-label { color: var(--sage-ink); }
  .meal-label .icon { display: none; }
  .who-icon { display: none; }
  .taken .who { font-size: var(--t-sm); }
  .btn-slot { font-size: var(--t-sm); padding: var(--s-2) var(--s-1); }
  .cell { padding: var(--s-2); }
  table.meals td { padding: var(--s-1) 2px; }
}

/* Very narrow (small phones, or big text and zoom): one meal per line. */
@media (max-width: 23em) {
  table.meals, table.meals tbody, table.meals tr, table.meals td, table.meals th { display: block; width: auto; }
  table.meals .meal-row { display: grid; gap: var(--s-2); }
  table.meals td { padding: 0; }
  .btn-slot { font-size: var(--t-base); }
  .taken .who { font-size: var(--t-base); }
  .meal-label .icon { display: inline-block; }
  .cell { min-height: 0; }
}

/* ---------- Visits ---------- */

.visit-days { display: grid; gap: var(--s-4); }
.visit-day {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: var(--s-3);
}
.visit-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.visit-day li { display: grid; justify-items: start; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--paper); overflow-wrap: break-word; }
.visit-day li > * { max-width: 100%; }
.visit-day li .who { color: var(--ink); font-weight: 400; display: block; }
.visit-day li.booked { background: var(--sunk); color: var(--ink-soft); }
.visit-day li.mine { background: var(--sage-wash); }
.visit-day li.mine .who { color: var(--sage-ink); font-weight: 700; }
.visit-day .none { color: var(--ink-soft); }

/* ---------- Daily recap ---------- */

.recap-nav { display: flex; gap: var(--s-3); justify-content: space-between; flex-wrap: wrap; }
.recap-nav .btn { flex: 1 1 8rem; }
.recap-title { font-size: var(--t-xl); }
.recap-summary { font-weight: 720; font-size: var(--t-base); }
.recap-updated { color: var(--ink-soft); font-size: var(--t-sm); margin-top: calc(-1 * var(--s-3)); }
.recap-status { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); color: var(--ink-soft); }
.recap-status .closed { color: var(--honey-ink); font-weight: 700; }
.recap-message { overflow-wrap: break-word; }
/* The newest update, on one line, with a link to the full text. */
.recap-update {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.recap-update-label { flex: none; }
.recap-update-text { flex: 1 1 6rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); }
.recap-update-link { flex: none; font-weight: 700; }
.sheet { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sheet-item {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sheet-when { font-weight: 760; color: var(--ink-soft); }
.sheet-what { min-width: 0; display: grid; gap: var(--s-1); overflow-wrap: break-word; }
.sheet-item.gap { background: var(--need-wash); border: 2px dashed var(--honey-line); }
.gap-text { font-weight: 720; color: var(--honey-ink); }
.sheet-item.quiet { background: transparent; border-style: dashed; color: var(--ink-soft); }
.who-line { font-weight: 720; }
.overlap {
  justify-self: start;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--honey-ink);
  background: var(--honey-wash);
  border-radius: 999px;
  padding: 0 var(--s-3);
}
.recap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
@media (max-width: 30em) {
  .sheet-item { grid-template-columns: 1fr; }
}

/* ---------- Family tab ---------- */

.settings { display: grid; gap: var(--s-5); }
.setting { display: grid; gap: var(--s-2); }
.switch {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--t-base);
  font-weight: 720;
  cursor: pointer;
  text-align: left;
}
.switch:disabled { cursor: progress; opacity: 0.75; }
.switch-track {
  flex: none;
  width: 68px;
  height: 38px;
  border-radius: 19px;
  background: var(--line-strong);
  position: relative;
  transition: background-color 0.15s ease-out;
}
.switch-knob {
  position: absolute;
  top: 4px; left: 4px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease-out;
}
.switch[aria-checked="true"] .switch-track { background: var(--sage-ink); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(30px); }
.switch[aria-checked="false"] { border-color: var(--honey-line); background: var(--honey-wash); }
.setting-sees { color: var(--ink-soft); font-size: var(--t-sm); }
.date-setting > label:first-child { font-weight: 720; }
.date-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.date-row input { flex: 1 1 10rem; width: auto; min-width: 0; }
.date-row .btn { flex: none; }
input:disabled { background: var(--sunk); color: var(--ink-soft); }
.saved { color: var(--sage-ink); font-weight: 700; }
.saved:empty, .form-error:empty { display: none; }
.saved .icon { margin-right: var(--s-1); }
.saved-warn { color: var(--honey-ink); }

/* The family calendar feed */
.feed { display: grid; gap: var(--s-3); justify-items: start; }
.feed > *, .feed-links > * { max-width: 100%; min-width: 0; }
.feed-links .date-row input { flex-basis: 6rem; }
.feed-links { display: grid; gap: var(--s-3); justify-items: start; width: 100%; }
.feed-links .btn-big { width: 100%; }
.feed-links .link { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-1) 0; }
.feed-links .field { width: 100%; grid-template-columns: minmax(0, 1fr); }
.feed-confirm { display: grid; gap: var(--s-3); padding: var(--s-3); border: 2px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-wash); }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: grid; gap: var(--s-1); border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 720; padding: 0; }
.field-hint { color: var(--ink-soft); font-size: var(--t-sm); }
.stack .sub { font-weight: 400; color: var(--ink-soft); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.family-form { margin-top: var(--s-2); }

input, select, textarea {
  width: 100%;
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--t-base);
  caret-color: var(--accent);
}
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); }
::placeholder { color: #7a6858; opacity: 1; }

.family-list { display: grid; gap: var(--s-5); }
.family-day { display: grid; gap: var(--s-2); }
.family-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.family-day li {
  display: grid;
  gap: var(--s-1);
  justify-items: start;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-wrap: break-word;
}
.family-day li > * { max-width: 100%; }
.family-day .what { font-weight: 760; color: var(--ink-soft); font-size: var(--t-sm); }
.family-day .btn { margin-top: var(--s-1); }
.reminder {
  justify-self: start;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--honey-wash);
  color: var(--honey-ink);
  font-size: var(--t-sm);
  font-weight: 700;
}
.family-updates { display: grid; gap: var(--s-2); }
.family-updates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.family-updates li {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.family-updates li.editing { border: 2px solid var(--accent); background: var(--accent-wash); }
.family-updates .row { margin-top: var(--s-1); }

/* ---------- Dialogs ---------- */

dialog {
  width: min(32rem, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  padding: var(--s-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(40, 25, 10, 0.3);
  overflow-y: auto;
}
dialog::backdrop { background: rgba(43, 33, 26, 0.55); }
dialog h2 { font-size: var(--t-xl); }
.when { font-size: var(--t-base); font-weight: 700; color: var(--ink-soft); margin-top: calc(-1 * var(--s-3)); }
.privacy {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--sage-wash);
  color: var(--sage-ink);
  font-weight: 700;
}
.times { display: grid; gap: var(--s-4); }
.duration { display: grid; gap: var(--s-2); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-2) var(--s-3);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-weight: 400;
  cursor: pointer;
}
.choice input { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); font-weight: 720; }
@media (min-width: 30em) {
  .duration { grid-template-columns: 1fr 1fr; }
  .duration legend { grid-column: 1 / -1; }
}
.dialog-actions { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.form-error { color: var(--danger); font-weight: 700; }

/* ---------- Toast and footer ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(40, 25, 10, 0.3);
  z-index: 10;
}

.bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-sm);
}
.bottom p { margin: 0; }
.bottom a { display: inline-block; padding: var(--s-2) var(--s-1); font-weight: 700; }

@media (max-width: 23em) {
  h1 { font-size: var(--t-xl); }
  /* Four family tabs don't fit in one row this narrow: two rows of two. */
  .tabs:has(#tab-family:not([hidden])) { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 0; }
  .tabs:has(#tab-family:not([hidden])) [role="tab"] { border-bottom: 2px solid var(--line); border-radius: var(--radius-sm); }
  .tabs:has(#tab-family:not([hidden])) [role="tab"][aria-selected="true"] { border-color: var(--accent); }
  .masthead-row { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .photo { width: 72px; height: 72px; }
  dialog { padding: var(--s-4); }
  .note { padding: var(--s-4); }
  .updates { padding: var(--s-3) var(--s-4); }
}

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