/* All About Me — activity planner.
   Design tokens inherited from the Everyday Care Homes Design System,
   with a few category colours added for activity types. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --charcoal:   #3A2A22;
  --warm-white: #F8F3EA;
  --gold:       #C75B39;
  --sage:       #7E9A6B;
  --sky:        #5FA8C4;

  --neutral-0:   #FFFFFF;
  --neutral-25:  #F8F3EA;
  --neutral-50:  #F2EBDD;
  --neutral-100: #EDE3D3;
  --neutral-200: #DFD1BB;
  --neutral-300: #C8B499;
  --neutral-400: #A78F73;
  --neutral-500: #836B55;
  --neutral-600: #62503F;
  --neutral-700: #4C3B2E;
  --neutral-800: #3A2A22;

  --gold-50:  #F8E7DF;
  --gold-100: #F0CBBB;
  --gold-200: #E0A78F;
  --gold-300: #C75B39;
  --gold-400: #AC4A2C;
  --gold-500: #8A3A22;
  --gold-600: #6B2C19;

  --surface-page:  #FAF1EC;   /* warm-white, pulled a shade toward clay */
  --surface-card:  var(--neutral-0);
  --text-strong:   var(--charcoal);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --border-subtle: var(--neutral-100);

  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;
  --shadow-sm:   0 2px 6px rgba(43, 45, 51, 0.07);
  --shadow-lift: 0 10px 28px rgba(43, 45, 51, 0.14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;

  --bar-h: 62px;
}

/* The two sides share one design and differ only in temperature. Activities sits
   on warm clay, hospitality on a cool blue of the same lightness and saturation,
   so neither feels like a different product.

   The --gold-* ramp is the accent ramp; the name is historical. Overriding it
   here re-tints every button, chip, focus ring and highlight on the hospitality
   side without touching a single component rule. */
body.hospitality {
  --charcoal:   #22323C;
  --warm-white: #F1F5F8;

  --gold:       #2E7BA6;
  --gold-50:    #E6F0F7;
  --gold-100:   #C6DDEC;
  --gold-200:   #91BDD7;
  --gold-300:   #2E7BA6;
  --gold-400:   #256A90;
  --gold-500:   #1C5474;
  --gold-600:   #143E57;

  --neutral-0:   #FFFFFF;
  --neutral-25:  #F5F8FB;
  --neutral-50:  #EAF1F6;
  --neutral-100: #DEE8F0;
  --neutral-200: #C6D7E3;
  --neutral-300: #A5BCCD;
  --neutral-400: #7B93A6;
  --neutral-500: #5B7385;
  --neutral-600: #425867;
  --neutral-700: #32454F;
  --neutral-800: #22323C;

  --surface-page: #EFF4F8;
}

/* the house stays clay on both sides — it is the product's mark, not a side's */
body.hospitality .brand svg path:first-of-type { fill: #C75B39; }

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

/* display rules on .btn and .view would otherwise beat the hidden attribute */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

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

:where(button, input, select, textarea, a):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-md);
}

.spacer { flex: 1; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn:disabled:hover { background: inherit; }

.btn-primary { background: var(--gold-300); color: #fff; }
.btn-primary:hover { background: var(--gold-400); }

.btn-ghost { background: var(--neutral-0); border-color: var(--neutral-200); color: var(--text-body); }
.btn-ghost:hover { background: var(--neutral-50); border-color: var(--neutral-300); }

.btn-danger-ghost { color: #A8322A; border-color: transparent; }
.btn-danger-ghost:hover { background: #FBEAE8; }

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
  background: var(--neutral-0);
  border-color: var(--neutral-200);
  font-size: 16px;
}
.btn-icon:hover { background: var(--neutral-50); }

.linkish {
  background: none; border: 0; padding: 0;
  color: var(--gold-500); font-size: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

/* ---------------- app bar ---------------- */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(12px, 2vw, 22px);
  background: color-mix(in srgb, var(--warm-white) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-name { display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.brand-wordmark {
  font-weight: 700; font-size: 19px;
  letter-spacing: -0.03em; color: var(--text-strong);
}
.brand-wordmark .dot { color: var(--gold-300); }
.brand-sub {
  font-weight: 600; font-size: 8px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-500); padding-left: 0.2em;
}

.home-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-settings { margin-left: auto; font-size: 15px; flex-shrink: 0; }

/* ---------------- layout ---------------- */

.layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100dvh - var(--bar-h));
}

/* ---------------- library ---------------- */

.library {
  position: sticky;
  top: var(--bar-h);
  height: calc(100dvh - var(--bar-h));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--neutral-50) 55%, var(--warm-white));
}

.library-head { padding: 18px 16px 12px; border-bottom: 1px solid var(--border-subtle); }
.library-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.hint { margin: 4px 0 12px; font-size: 12.5px; color: var(--text-subtle); line-height: 1.45; }

#librarySearch {
  width: 100%;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  font-size: 14px;
}
#librarySearch::placeholder { color: var(--neutral-400); }

.cat-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.chip {
  --chip: var(--neutral-500);
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.chip:hover { border-color: var(--chip); color: var(--chip); }
.chip-on { background: var(--chip); border-color: var(--chip); color: #fff; }

.lib-list { flex: 1; overflow-y: auto; padding: 12px 12px 4px; }

.lib-group {
  --cat: var(--neutral-500);
  margin: 14px 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cat);
  display: flex;
  align-items: center;
  gap: 7px;
}
.lib-group::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cat);
  flex-shrink: 0;
}
.lib-group:first-child { margin-top: 2px; }

.lib-card {
  --cat: var(--neutral-500);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: var(--neutral-0);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--cat);
  border-radius: 9px;
  padding: 8px 11px;
  margin-bottom: 5px;
  cursor: grab;
  transition: all var(--dur) var(--ease-out);
}
.lib-card:hover {
  border-color: var(--cat);
  border-left-color: var(--cat);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.lib-name { font-weight: 600; font-size: 13.5px; color: var(--text-strong); line-height: 1.3; }
.lib-meta { font-size: 11.5px; color: var(--text-subtle); }

.empty-lib { font-size: 13px; color: var(--text-subtle); padding: 12px 4px; line-height: 1.5; }

.library-foot { padding: 12px; border-top: 1px solid var(--border-subtle); }

/* ---------------- planner ---------------- */

.planner { min-width: 0; padding: 18px clamp(12px, 2vw, 24px) 40px; }

.week-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.week-label { display: flex; flex-direction: column; line-height: 1.25; min-width: 190px; }
.week-label strong { font-size: 19px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; }
.week-meta { font-size: 12.5px; color: var(--text-subtle); }

/* its own row under the week navigation: a toolbar for the schedule, rather
   than more weight in the app bar */
.bar-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

/* the day and its two arrows move together, and the date gives up width
   before the group is allowed to break */
.day-nav { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.day-nav .week-label { min-width: 0; }
@media (max-width: 560px) {
  .day-nav .week-label strong { font-size: 17px; }
}

.head-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.profile-action-row { display: flex; gap: 7px; flex-wrap: wrap; }

.save-note {
  font-size: 12px;
  color: var(--text-subtle);
  transition: color var(--dur) var(--ease-out);
}
.save-note.is-flash { color: var(--sage); font-weight: 600; }

.grid-scroll { overflow-x: auto; padding-bottom: 6px; }

.grid {
  display: grid;
  grid-template-columns: 78px repeat(7, minmax(132px, 1fr));
  gap: 7px;
  min-width: 940px;
}

.grid-corner { }

.day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px 9px;
  border-bottom: 2px solid var(--border-subtle);
}
.day-head .day-name { font-weight: 700; font-size: 13px; color: var(--text-strong); }
.day-head .day-date { font-size: 11.5px; color: var(--text-subtle); }
.day-head.is-today { border-bottom-color: var(--gold-300); }
.day-head.is-today .day-name { color: var(--gold-500); }

.period-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--neutral-400);
  text-align: right;
}

.slot {
  min-height: 116px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.slot.is-today { background: color-mix(in srgb, var(--gold-50) 40%, var(--neutral-0)); }

body.is-arming .slot { border-color: var(--gold-200); border-style: dashed; cursor: copy; }
body.is-arming .slot:hover,
.slot.drag-over {
  border-color: var(--gold-300);
  border-style: solid;
  background: var(--gold-50);
}

.entry {
  --cat: var(--neutral-500);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 4px solid var(--cat);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  background: color-mix(in srgb, var(--cat) 9%, var(--neutral-0));
  transition: all var(--dur) var(--ease-out);
}
.entry:hover {
  background: color-mix(in srgb, var(--cat) 17%, var(--neutral-0));
  box-shadow: var(--shadow-sm);
}
.entry-time { font-size: 11px; font-weight: 700; color: var(--cat); letter-spacing: 0.02em; }
.entry-name { font-size: 13px; font-weight: 600; color: var(--text-strong); line-height: 1.25; }
.entry-where { font-size: 11px; color: var(--text-muted); }
.entry-lead { font-size: 11px; color: var(--text-subtle); font-style: italic; }

.slot-add {
  margin-top: auto;
  min-height: 38px;
  border: 1px dashed var(--neutral-200);
  background: transparent;
  border-radius: 8px;
  padding: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-400);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.slot-add:hover { border-color: var(--gold-300); color: var(--gold-500); background: var(--gold-50); }
/* an empty slot is one big tap target — carers use this standing up, on a tablet */
.slot-add:only-child { flex: 1; }

.proto-note { margin-top: 20px; font-size: 12.5px; color: var(--text-subtle); display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- month view ---------------- */

.seg-sm .seg span { padding: 5px 13px; font-size: 12.5px; }

/* the library stays put in month view — dragging an activity onto a day is
   the whole point of having a month in front of you */

.month { display: flex; flex-direction: column; gap: 6px; }

.month-head,
.month-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.month-dayname {
  text-align: center;
  padding-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.month-body { grid-auto-rows: minmax(112px, 1fr); }

.month-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px;
}
.month-cell.is-out { background: transparent; border-style: dashed; opacity: 0.55; }
.month-cell.is-today { border-color: var(--gold-300); background: color-mix(in srgb, var(--gold-50) 55%, var(--neutral-0)); }

.month-date {
  align-self: flex-start;
  border: 0;
  background: none;
  border-radius: 7px;
  padding: 2px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.month-date:hover { background: var(--gold-100); color: var(--gold-600); }
/* only needed once the weekday header row is dropped on narrow screens */
.md-dow { display: none; }
.month-cell.is-today .month-date { background: var(--gold-300); color: #fff; }

.month-chip {
  --cat: var(--neutral-500);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  text-align: left;
  border: 0;
  border-left: 3px solid var(--cat);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  background: color-mix(in srgb, var(--cat) 10%, var(--neutral-0));
  transition: background var(--dur) var(--ease-out);
}
.month-chip:hover { background: color-mix(in srgb, var(--cat) 20%, var(--neutral-0)); }
.mc-time { font-size: 10px; font-weight: 700; color: var(--cat); }
.mc-name {
  font-size: 11.5px; font-weight: 600; color: var(--text-strong); line-height: 1.2;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* period targets, revealed only while something is being placed */
.month-bands {
  position: absolute;
  inset: 3px;
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: 2px;
}
body.is-arming .month-bands,
body.is-dragging .month-bands { display: flex; }

.month-band {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 4px 0 0;
  border: 1px dashed var(--gold-300);
  border-radius: 5px;
  /* kept see-through: you need to read what is already on that day before
     dropping something else onto it */
  background: color-mix(in srgb, var(--warm-white) 45%, transparent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold-600);
  cursor: copy;
  transition: all var(--dur) var(--ease-out);
}
.month-band:hover,
.month-band.is-over {
  background: color-mix(in srgb, var(--gold-100) 92%, transparent);
  border-style: solid;
  border-width: 2px;
  color: var(--gold-600);
}

.month-chip { cursor: grab; }
body.is-dragging .month-chip,
body.is-dragging .entry { opacity: 0.5; }

.month-add {
  margin-top: auto;
  border: 1px dashed transparent;
  background: none;
  border-radius: 6px;
  padding: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-300);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.month-cell:hover .month-add { border-color: var(--neutral-200); color: var(--neutral-400); }
.month-add:hover { border-color: var(--gold-300) !important; color: var(--gold-500) !important; background: var(--gold-50); }

@media (max-width: 900px) {
  .month-body { grid-auto-rows: minmax(96px, 1fr); }
  .mc-time { display: none; }
}

@media (max-width: 640px) {
  .month-head { display: none; }
  .month-body { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); }
  .month-cell.is-out { display: none; }
  .md-dow { display: inline; margin-right: 5px; color: var(--neutral-400); }
}

/* ---------------- hospitality ---------------- */

.sides {
  display: flex;
  gap: 2px;
  background: var(--neutral-100);
  border-radius: var(--radius-pill);
  padding: 3px;
  flex-shrink: 0;
}
.side {
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 6px 15px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) var(--ease-out);
}
.side:hover { color: var(--text-strong); }
.side.is-on { background: var(--charcoal); color: var(--warm-white); }

/* Hospitality has no business with activities: the This Is Me completeness
   ring, the interest tags, the activity subtabs and the activity-record button
   are all put away rather than shown to a team they mean nothing to. */
body.hospitality .profile-progress,
body.hospitality .profile-tags,
body.hospitality .profile-actions,
body.hospitality #subtabThisIsMe,
body.hospitality #subtabActivities,
body.hospitality #subtabFamily,
body.hospitality #photoConsentCard { display: none !important; }

body.hospitality .subtabs { border-bottom: 0; margin-bottom: 6px; }
body.hospitality #subtabNutrition { font-size: 15px; }

.must-tag {
  font-size: 10.5px; font-weight: 700;
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
}
.must-tag.is-unset { background: var(--neutral-200); color: var(--neutral-600); font-style: italic; font-weight: 600; }

/* ============ the week, as a sheet ============
   Dates down the side, courses across the top, a box for each dish — the way
   the team's own spreadsheet has always read. The only thing to learn is
   that the boxes save themselves. */

.wk-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.wk {
  width: 100%;
  /* wide enough that a dish name fits in a box; narrower than this and the
     sheet scrolls rather than truncating what the kitchen has written */
  /* a day is filled across, so the sheet is as wide as the courses need and
     scrolls sideways rather than squeezing a dish name into nothing */
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  table-layout: fixed;
}
.wk .wk-c-day  { width: 108px; }
.wk .wk-c-dish { width: 148px; }

.wk th, .wk td {
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0;
}
.wk thead th { border-bottom-width: 2px; }

/* the date column stays put while the courses scroll under it */
.wk-corner, .wk-daylabel {
  position: sticky; left: 0; z-index: 2;
  background: var(--neutral-25);
  text-align: left; vertical-align: top;
  /* a right-hand shadow so the column reads as pinned once the sheet moves */
  box-shadow: 1px 0 0 var(--border-subtle);
}
.wk-corner {
  z-index: 4;
  padding: 8px 10px;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  border-top-left-radius: var(--radius-md);
}

/* which service, then which course, across the top */
.wk-meal-band {
  padding: 8px 10px 6px;
  background: var(--neutral-50);
  text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-500);
}
.wk-course {
  padding: 7px 9px;
  background: var(--neutral-25);
  text-align: left; vertical-align: top; line-height: 1.25;
  font-size: 12px; font-weight: 700; color: var(--text-strong);
}
.wk-rule {
  display: block; font-size: 10px; font-weight: 500;
  color: var(--neutral-400); letter-spacing: 0.02em;
}

/* the day, down the left */
.wk-daylabel {
  padding: 8px 10px;
  line-height: 1.25;
}
.wk-dayname { display: block; font-size: 13px; font-weight: 700; color: var(--text-strong); }
.wk-daydate { display: block; font-size: 10.5px; color: var(--text-subtle); }
.wk-row.is-today .wk-daylabel { background: var(--gold-50); }
.wk-row.is-today .wk-dayname { color: var(--gold-500); }

/* a heavier rule where one course ends and the next begins */
.wk .wk-cell.is-first, .wk .wk-course { border-left: 1px solid var(--neutral-200); }

.wk-cell {
  position: relative;
  background: var(--surface-card);
  min-width: 0;
}
.wk-row.is-today .wk-cell { background: color-mix(in srgb, var(--gold-50) 40%, var(--neutral-0)); }

/* the box itself: no border of its own, because the grid lines are the border */
.wk-input {
  display: block;
  width: 100%;
  border: 0; background: transparent;
  padding: 7px 22px 7px 8px;
  font: inherit; font-size: 12px; line-height: 1.3;
  color: var(--text-strong);
  border-radius: 0;
  resize: none;
  overflow: hidden;
  min-height: 42px;
}
.wk-input::placeholder { color: var(--neutral-300); }
.wk-input:hover { background: var(--neutral-25); }
.wk-input:focus {
  outline: 2px solid var(--gold-300); outline-offset: -2px;
  background: var(--neutral-0);
}

/* what is in it — the one thing a spreadsheet could never carry */
.wk-flag {
  position: absolute; top: 6px; right: 5px;
  width: 16px; height: 16px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 50%;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.wk-flag.is-declared { background: #FBEAE8; color: #8E2B24; border-color: #E0A9A4; }
.wk-flag.is-clear    { background: var(--neutral-50); color: var(--sage); }
/* nobody has said what is in it, which is not the same as none */
.wk-flag.is-unchecked { background: #FBF0D5; color: #6E5209; border-color: #E0C77A; }
.wk-flag:hover { filter: brightness(0.94); }

.wk-foot {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-subtle);
  max-width: 76ch;
}
.wk-foot strong { color: #6E5209; }
.wk-foot .wk-flag { position: static; display: inline-flex; vertical-align: middle; }

@media (max-width: 900px) {
  .wk .wk-c-label { width: 104px; }
  .wk-input { font-size: 12px; padding: 7px 22px 7px 7px; }
}

/* a quiet mark that the dish declares allergens; the detail is on the dish itself */

@media (max-width: 900px) {
}

/* menu builder */
.meal-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.meal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.meal-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.meal-count { font-size: 12px; color: var(--text-subtle); }
.meal-head .btn { margin-left: auto; }

/* the whole heading opens and shuts the card, so it should say so on hover */
.meal-head { cursor: pointer; user-select: none; }
.meal-head .btn { cursor: pointer; }

.meal-toggle {
  flex: none; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); border-radius: 50%;
  background: transparent; color: var(--text-subtle); cursor: pointer;
  font-size: 15px; font-weight: 700; line-height: 1;
}
.meal-toggle:hover { background: var(--surface-sunken, rgba(0, 0, 0, 0.04)); color: var(--text-strong); }
.meal-toggle span { display: block; transition: transform 140ms ease; }
.meal-card.is-collapsed .meal-toggle span { transform: rotate(-90deg); }

/* shut: the heading and its count are all that is left, so it should not keep
   a card's worth of padding underneath */
.meal-card.is-collapsed .meal-body { display: none; }
.meal-card.is-collapsed .meal-head { margin-bottom: 0; }

.dish-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  background: none;
  padding: 11px 4px;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.dish-row:hover { background: var(--gold-50); }
.dish-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 170px; }
.dish-name { font-size: 15px; font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 7px; }
.dish-note { font-size: 12px; color: var(--text-subtle); }
.veg-flag {
  font-size: 10px; font-weight: 800; color: #fff; background: var(--sage);
  border-radius: 4px; padding: 1px 5px;
}
.dish-allergens { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

.allergen-chip {
  font-size: 10.5px; font-weight: 700;
  background: #FBEAE8; color: #8E2B24;
  border-radius: var(--radius-pill); padding: 3px 9px;
}
.allergen-chip.is-none { background: var(--neutral-50); color: var(--neutral-500); font-weight: 500; }

/* the day at a glance, so confirming never means leaving this screen */
.day-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.day-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--neutral-300);
  border-radius: var(--radius-md);
  padding: 9px 13px;
}
.day-chip.is-ready { border-left-color: var(--sage); }
.day-chip.is-sent { border-left-color: var(--sage); background: color-mix(in srgb, var(--sage) 10%, var(--neutral-0)); }
.dc-meal { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.dc-count { font-size: 12px; color: var(--text-subtle); }
.dc-sent { font-size: 11px; font-weight: 700; color: #3F5334; text-transform: uppercase; letter-spacing: 0.05em; }

/* going down the list rather than round the room */
.by-resident {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.cr-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: calc(var(--bar-h) + 12px);
}
.cr-search {
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 14px;
  width: 100%;
}
.cr-list { display: flex; flex-direction: column; gap: 5px; max-height: 62vh; overflow-y: auto; padding-right: 2px; }

.cr-row {
  --who: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  min-height: 56px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.cr-row:hover { border-color: var(--gold-200); }
.cr-row.is-on { border-color: var(--gold-300); border-left-color: var(--gold-300); background: var(--gold-50); }
.cr-row.is-done { border-left-color: var(--sage); }
.cr-row.is-absent { opacity: 0.6; border-style: dashed; }
.cr-row .avatar { width: 34px; height: 34px; font-size: 12px; background: var(--who); }
.cr-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cr-name { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.cr-sub { font-size: 11px; color: var(--text-subtle); }
.cr-progress { font-size: 12.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

.cr-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.cr-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.cr-head-id { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 180px; }
.cr-head-name { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--text-strong); }
.cr-head-sub { font-size: 12.5px; color: var(--text-subtle); }
.cr-head-progress { font-size: 26px; font-weight: 700; color: var(--gold-500); letter-spacing: -0.03em; }
.cr-head-progress small { font-size: 12px; font-weight: 600; color: var(--text-subtle); margin-left: 4px; }
.cr-nav { display: flex; gap: 6px; }

.cr-meal { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
.cr-meal:last-of-type { border-bottom: 0; }
.cr-meal-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cr-meal-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.cr-tick {
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--sage); color: #fff; font-size: 12px; font-weight: 800;
}
/* a standing meal: grouped as the servery is laid out, any number tickable */
.cr-count {
  font-size: 11px; font-weight: 700;
  background: var(--sage); color: #fff;
  border-radius: var(--radius-pill); padding: 2px 9px;
}
.cr-anynumber { font-size: 11.5px; color: var(--text-subtle); margin-left: auto; font-style: italic; }

.multi-group { margin-bottom: 12px; }
/* each course says its own rule, because "choose one" and "as many as you like"
   are the difference between a main and a plate of vegetables */
.group-rule {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--neutral-400);
  font-size: 11px;
  margin-left: 6px;
}
.course-head {
  margin: 14px 0 2px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-400);
  border-top: 1px solid var(--border-subtle); padding-top: 12px;
}
.course-head:first-of-type { border-top: 0; }
.everyday-flag {
  font-size: 9.5px; font-weight: 700;
  background: var(--neutral-100); color: var(--text-subtle);
  border-radius: var(--radius-pill); padding: 1px 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dish-pill.is-on .everyday-flag { background: rgba(255,255,255,0.25); color: #fff; }

.multi-group h4 {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-400);
}
/* nothing but the rule left, so it should not hold a course heading's space */
.multi-group h4.rule-only { margin-bottom: 4px; font-weight: 500; }
/* a tick rather than a highlight: these accumulate, so the state has to read as
   "taken" rather than "the one chosen" */
.dish-pill-multi { padding-left: 12px; }
.dish-pill-multi.is-on::before { content: '✓'; font-weight: 800; margin-right: 2px; }

.standing-note { margin: 0 0 12px; }
.standing-group { padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.standing-group h4 {
  margin: 0 0 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-400);
}
.standing-group p { margin: 0; font-size: 13px; color: var(--text-body); line-height: 1.5; }
.standing-group i {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #A8322A; margin-left: 3px; vertical-align: middle;
}

.cr-nomenu { margin: 0; font-size: 12.5px; color: var(--neutral-400); font-style: italic; }

.cr-absent {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px;
  background: var(--neutral-25);
  border: 1px dashed var(--neutral-300);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
}

.cr-foot {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.cr-foot-label { font-size: 12.5px; font-weight: 600; color: var(--text-subtle); margin-right: 4px; }

/* narrow screens: each resident is a row that opens in place, so there is one
   list to scroll rather than a list and a panel */
.cr-acc-list { display: flex; flex-direction: column; gap: 7px; }

.cr-acc {
  --who: var(--neutral-500);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cr-acc.is-done { border-left-color: var(--sage); }
.cr-acc.is-absent { border-style: dashed; opacity: 0.72; }
.cr-acc[open] { border-color: var(--gold-300); border-left-color: var(--gold-300); }

.cr-acc-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.cr-acc-head::-webkit-details-marker { display: none; }
.cr-acc-head:hover { background: var(--neutral-25); }
.cr-acc[open] .cr-acc-head { background: var(--gold-50); border-bottom: 1px solid var(--border-subtle); }
.cr-acc-head .avatar { width: 38px; height: 38px; font-size: 13px; background: var(--who); }

.cr-chevron {
  font-size: 17px;
  color: var(--neutral-400);
  transition: transform var(--dur) var(--ease-out);
  flex-shrink: 0;
}
.cr-acc[open] .cr-chevron { transform: rotate(180deg); }

.cr-acc-body { padding: 4px 14px 14px; }
.cr-acc-body > .choice-flags { margin: 10px 0 4px; }
.cr-acc-body .cr-meal:first-of-type { padding-top: 8px; }

@media (max-width: 900px) {
  .by-resident { grid-template-columns: minmax(0, 1fr); }
  .cr-rail { position: static; }
  .cr-list { max-height: 240px; }
  /* The day strip used to scroll sideways. It opened on breakfast — long
     since confirmed — and left "Supper · 24 to account for" off the right of
     the screen, which is the one line the person holding the tablet needs.
     Stacked, all three meals are in front of them. */
  .day-strip { flex-wrap: wrap; overflow-x: visible; }
  .day-chip {
    flex: 1 1 100%;
    display: flex; align-items: baseline; gap: 8px;
    justify-content: space-between;
  }
  .day-chip .dc-meal { flex: 0 0 auto; }
  .day-chip .dc-count { text-align: right; }
  /* confirming is a real action on a phone, so give it a real target */
  .day-chip .btn { min-height: 44px; padding-inline: 16px; }
}

.choice-list { display: flex; flex-direction: column; gap: 9px; }
.iddsi-badge {
  font-size: 10px; font-weight: 700;
  border-radius: 4px; padding: 2px 7px;
  border: 1px solid rgba(0,0,0,0.12);
}
.iddsi-badge.is-unset { background: var(--neutral-50); color: var(--neutral-500); font-style: italic; font-weight: 500; }
.allergy-badge {
  font-size: 10px; font-weight: 700;
  background: #A8322A; color: #fff;
  border-radius: 4px; padding: 2px 7px;
}
.diet-badge {
  font-size: 10px; font-weight: 700;
  background: var(--sky); color: #fff;
  border-radius: 4px; padding: 2px 7px;
}

.choice-options { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: flex-start; }
.dish-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 46px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-md);
  padding: 8px 15px;
  font-size: 14px; font-weight: 600; color: var(--text-body);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.dish-pill:hover { border-color: var(--gold-300); }
.dish-pill.is-on { background: var(--sage); border-color: var(--sage); color: #fff; }
.dish-pill.is-unsafe { border-color: #E0A9A4; border-style: dashed; color: #8E2B24; }
.dish-pill.is-unsafe.is-on { background: #A8322A; border-color: #A8322A; color: #fff; border-style: solid; }
.pill-warn {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: #A8322A; color: #fff; font-size: 11px; font-weight: 800;
}
.dish-pill.is-on .pill-warn { background: #fff; color: #A8322A; }

/* An adaptation written down turns a clash from an alarm into an instruction,
   so the styling stops shouting once there is a note. */
.choice-note { width: 100%; display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.note-add { align-self: flex-start; font-size: 12.5px; }
.note-concern {
  margin: 0;
  font-size: 12.5px; font-weight: 600;
  color: #8E2B24; background: #FBEAE8;
  border-radius: 8px; padding: 7px 10px;
}
.note-concern.is-adapted { color: #6B4E12; background: #FBF1DC; }
.note-label { font-size: 11.5px; font-weight: 600; color: var(--text-subtle); }
.note-input {
  width: 100%;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-size: 14px;
  min-height: 44px;
}
.note-input:focus { border-color: var(--gold-300); }
.note-input::placeholder { color: var(--neutral-400); }

.choice-row.has-adapted { border-color: #E3C46A; border-left-color: #B08514; background: #FDFAF2; }
.dish-pill.is-adapted { border-color: #B08514; border-style: solid; color: #6B4E12; }
.dish-pill.is-adapted.is-on { background: #B08514; border-color: #B08514; color: #fff; }
.dish-pill.is-adapted .pill-warn { background: #B08514; }
.dish-pill.is-adapted.is-on .pill-warn { background: #fff; color: #B08514; }

/* kitchen sheet on screen */
.kitchen-tally { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tally-item {
  background: var(--neutral-50);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 14px;
}
.tally-item strong { font-size: 17px; font-weight: 700; color: var(--gold-500); margin-right: 3px; }
.outstanding { margin: 0; font-size: 12.5px; color: #8E2B24; font-style: italic; }

.watch-list { display: flex; flex-direction: column; }
.watch-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) minmax(140px, 2fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
}
.watch-who { display: flex; flex-direction: column; }
.watch-who small { font-size: 11px; color: var(--text-subtle); }
.watch-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.watch-adapt { color: var(--text-muted); }

/* nutrition profile */
.iddsi-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.iddsi-opt {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-md);
  padding: 8px 13px 8px 9px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.iddsi-opt:hover { border-color: var(--gold-200); }
.iddsi-opt.is-on { border-color: var(--charcoal); background: var(--neutral-25); box-shadow: inset 0 0 0 1px var(--charcoal); }
.iddsi-swatch { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.18); flex-shrink: 0; }
.iddsi-text { display: flex; flex-direction: column; line-height: 1.2; font-size: 12.5px; color: var(--text-body); }
.iddsi-text strong { font-size: 11px; font-weight: 700; color: var(--text-subtle); }

.allergen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 5px;
  margin-bottom: 13px;
}
.allergen-opt {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.allergen-opt:hover { border-color: var(--gold-200); }
.allergen-opt:has(input:checked) { background: #FBEAE8; border-color: #E0A9A4; color: #8E2B24; font-weight: 600; }
.allergen-opt input { accent-color: #A8322A; }

.adapt-group { margin-bottom: 14px; }
.adapt-group h4 {
  margin: 0 0 7px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-400);
}
.adapt-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.adapt-pill {
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.adapt-pill:hover { border-color: var(--gold-200); }
.adapt-pill.is-on { background: var(--sky); border-color: var(--sky); color: #fff; }

.must-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.must-opt {
  --risk: var(--neutral-400);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 128px;
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--risk);
  background: var(--neutral-0);
  border-radius: var(--radius-md);
  padding: 11px 15px;
  cursor: pointer;
  text-align: left;
  transition: all var(--dur) var(--ease-out);
}
.must-opt:hover { border-color: var(--risk); }
.must-opt.is-on { background: color-mix(in srgb, var(--risk) 12%, var(--neutral-0)); border-color: var(--risk); }
.must-opt-score { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--risk); line-height: 1.1; }
.must-opt-risk { font-size: 12px; font-weight: 600; color: var(--text-muted); }

.must-result {
  margin-top: 14px;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--neutral-400);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--neutral-25);
}
.must-result.is-incomplete { color: var(--text-muted); font-size: 13px; }
.must-result.is-incomplete strong { display: block; color: var(--text-strong); margin-bottom: 2px; }
.must-total { display: flex; align-items: baseline; gap: 10px; }
.must-num { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.must-label { font-size: 15px; font-weight: 700; }
.must-steps { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px; font-size: 12.5px; color: var(--text-muted); }
.must-note { margin: 10px 0 0; font-size: 12px; color: var(--text-subtle); line-height: 1.5; }

@media (max-width: 860px) {
  .watch-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .choice-who { min-width: 0; width: 100%; }
}

/* ---------------- arm bar ---------------- */

.arm-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--charcoal);
  color: var(--warm-white);
  border-radius: var(--radius-pill);
  padding: 9px 10px 9px 18px;
  box-shadow: var(--shadow-lift);
  font-size: 14px;
}
.arm-bar[hidden] { display: none; }
.arm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-300); flex-shrink: 0; }
.arm-bar .btn-ghost { background: rgba(255,255,255,0.12); border-color: transparent; color: var(--warm-white); }
.arm-bar .btn-ghost:hover { background: rgba(255,255,255,0.22); }

/* ---------------- dialogs ---------------- */

.sheet {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 22px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;              /* the ad-hoc sheet is tall on a short screen */
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--shadow-lift);
}
.sheet-sm { width: min(430px, calc(100vw - 32px)); }
.sheet::backdrop { background: rgba(58, 42, 34, 0.35); backdrop-filter: blur(2px); }

.sheet-head { margin-bottom: 16px; }
.sheet-cat {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-500);
}
.sheet h3 { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; }
.sheet-lede { margin: 8px 0 16px; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; flex: 1; }
.field-row { display: flex; gap: 12px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.field .opt { font-weight: 400; color: var(--neutral-400); }
.field input, .field select, .field textarea {
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  width: 100%;
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-300); }

.sheet-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; }

/* ---------------- importing a menu ---------------- */

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  border: 2px dashed var(--neutral-300);
  border-radius: var(--radius-lg);
  background: var(--neutral-25);
  padding: 24px 18px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.drop-zone:hover,
.drop-zone:focus-visible { border-color: var(--gold-300); background: var(--gold-50); outline: none; }
.drop-zone.is-over { border-color: var(--gold-300); background: var(--gold-100); border-style: solid; }
.drop-icon { font-size: 22px; color: var(--gold-500); line-height: 1; }
.drop-main { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.drop-sub { font-size: 12px; color: var(--text-subtle); }

.import-preview {
  margin-top: 14px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  max-height: 34vh;
  overflow-y: auto;
}
.import-summary { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.import-summary strong { color: var(--text-strong); }
.import-bad { margin: 0; font-size: 13px; color: #8E2B24; }

.import-day { margin-bottom: 12px; }
.import-day h4 {
  margin: 0 0 5px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--neutral-400);
}
.import-meal {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.import-meal span:first-child { font-weight: 700; color: var(--text-muted); }
.import-meal em { color: var(--neutral-400); font-size: 11.5px; }

.import-problems { margin-top: 10px; font-size: 12px; color: #8E2B24; }
.import-problems summary { cursor: pointer; font-weight: 600; }
.import-problems ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }

/* ---------------- templates ---------------- */

.tpl-save {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.tpl-save .field { margin-bottom: 0; }
.tpl-save .btn { flex-shrink: 0; margin-bottom: 1px; }

.tpl-heading {
  margin: 16px 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.tpl-list { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; }

.tpl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold-300);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  background: var(--neutral-25);
}
.tpl-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 150px; }
.tpl-name { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.tpl-meta { font-size: 11.5px; color: var(--text-subtle); }
.tpl-actions { display: flex; gap: 6px; margin-left: auto; }

.print-choice { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.choice:hover { border-color: var(--gold-200); background: var(--gold-50); }
.choice:has(input:checked) { border-color: var(--gold-300); background: var(--gold-50); }
.choice input { margin-top: 3px; accent-color: var(--gold-300); }
.choice-body { display: flex; flex-direction: column; gap: 2px; }
.choice-body strong { font-size: 14px; color: var(--text-strong); }
.choice-body span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

.paper-choice {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 12px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--border-subtle);
}
.paper-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.paper-hint { grid-column: 1 / -1; font-size: 12px; color: var(--text-subtle); line-height: 1.45; }

.seg-group { display: flex; gap: 3px; background: var(--neutral-50); border-radius: var(--radius-pill); padding: 3px; }
.seg { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block;
  border-radius: var(--radius-pill);
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  transition: all var(--dur) var(--ease-out);
}
.seg:hover span { color: var(--text-strong); }
.seg input:checked + span { background: var(--gold-300); color: #fff; }
.seg input:focus-visible + span { box-shadow: var(--shadow-focus); }

.check { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; }
.check input { accent-color: var(--gold-300); }

/* ---------------- tabs ---------------- */

.tabs {
  display: flex;
  gap: 3px;
  background: var(--neutral-50);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.tab {
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.tab:hover { color: var(--text-strong); }
.tab.is-on { background: var(--neutral-0); color: var(--gold-500); box-shadow: var(--shadow-sm); }

/* the icons are for the phone layout; a wide screen has room for the words */
.tab-ico { display: none; }

/* ---------------- the phone layout ----------------
   Four sections, tapped constantly, on a tablet propped against the servery.
   That is a bottom bar in every app a carer already uses: one tap, inside the
   thumb's reach, and it says where you are without being opened. As a row of
   pills in the header it wrapped to four rows and took a fifth of the screen
   before any content. */
@media (max-width: 700px) {
  .app-bar {
    gap: 10px;
    padding: 8px clamp(12px, 4vw, 18px);
    min-height: 0;
    height: auto;
    /* backdrop-filter makes this a containing block, which pins the bottom bar
       inside the header instead of to the viewport. The bar needs an opaque
       background instead, which on a phone reads better anyway. */
    backdrop-filter: none;
    background: var(--warm-white);
  }

  /* the tabs have left the header, so there is room to say which home again */
  .home-label {
    margin-left: auto;
    font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .btn-settings { margin-left: 10px; }

  .tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    background: var(--surface-card);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -2px 14px rgba(28, 32, 38, 0.06);
  }

  .tab {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 7px 2px 6px;
    border-radius: var(--radius-md);
    font-size: 10.5px;
    line-height: 1.15;
    box-shadow: none;
  }
  .tab span {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tab-ico { display: block; width: 22px; height: 22px; }

  /* the current section is named as well as coloured, because a colour alone
     is not an answer to "where am I" */
  .tab.is-on { background: var(--gold-50); color: var(--gold-500); box-shadow: none; }
  .tab.is-on span { font-weight: 700; }

  /* content must clear the bar rather than hide behind it */
  body { padding-bottom: 66px; }
  .view-inner { padding-bottom: 28px; }
}

/* a sheet opened over the bar should cover it */
@media (max-width: 700px) {
  dialog.sheet { z-index: 50; }
}

/* ---------------- shared view chrome ---------------- */

.view-inner { max-width: 1180px; margin: 0 auto; padding: 26px clamp(14px, 3vw, 32px) 60px; }

.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.view-title { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-strong); }
.view-lede { margin: 5px 0 0; font-size: 14px; color: var(--text-muted); max-width: 60ch; line-height: 1.55; }
.view-lede strong { color: var(--gold-500); font-weight: 600; }

/* A filter over the list rather than an action on the page, so it sits above
   the grid it filters and takes the full width. In the header it crowded the
   three buttons onto a second line. */
#residentSearch {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 14px;
}

.back-link {
  border: 0; background: none; padding: 0;
  font-size: 13.5px; font-weight: 600; color: var(--gold-500);
  cursor: pointer; margin-bottom: 16px;
}
.back-link:hover { color: var(--gold-600); }

.privacy-note {
  margin-top: 30px;
  padding: 14px 16px;
  border: 1px solid var(--gold-100);
  border-left: 3px solid var(--gold-300);
  border-radius: var(--radius-md);
  background: var(--gold-50);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gold-600);
  max-width: 78ch;
}

/* ---------------- resident cards ---------------- */

.avatar {
  --who: var(--neutral-500);
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--who);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
}
.avatar-lg { width: 70px; height: 70px; font-size: 23px; }

.resident-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}

.resident-card {
  --who: var(--neutral-500);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--who);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.resident-card:hover { border-color: var(--who); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.resident-card .avatar { background: var(--who); }

.rc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.rc-name { font-size: 16px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; }
.rc-sub { font-size: 12.5px; color: var(--text-subtle); }
.rc-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.discharged-badge {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--neutral-200); color: var(--neutral-600);
  border-radius: var(--radius-pill); padding: 2px 8px;
}
.resident-card:has(.discharged-badge) { opacity: 0.72; }
.rc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

.tag {
  font-size: 11px; font-weight: 600;
  background: var(--neutral-50);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}
.tag-empty { background: transparent; color: var(--neutral-400); font-style: italic; font-weight: 400; padding-left: 0; }

.rc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.rc-pct { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.rc-pct.is-low  { color: #A8322A; }
.rc-pct.is-mid  { color: #B08514; }
.rc-pct.is-high { color: var(--sage); }
.rc-pct-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-400); }
.rc-consent {
  margin-top: 7px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  text-align: center;
}
.rc-consent.is-no      { background: #FBEAE8; color: #A8322A; }
.rc-consent.is-unknown { background: var(--neutral-50); color: var(--neutral-500); }

/* ---------------- this is me ---------------- */

.profile-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.profile-id { flex: 1; min-width: 220px; }
.profile-id h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; color: var(--text-strong); }
.profile-meta { margin: 3px 0 0; font-size: 13px; color: var(--text-subtle); }
.profile-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }

.profile-progress { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ring {
  --pct: 0;
  --who: var(--gold-300);
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--who) calc(var(--pct) * 1%), var(--neutral-100) 0);
}
.ring::before {
  content: '';
  grid-area: 1 / 1;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface-page);
}
.ring span { grid-area: 1 / 1; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.ring-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-400); }

.profile-cols { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start; }
.profile-main { display: flex; flex-direction: column; gap: 14px; }

.profile-section {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 22px 8px;
}
.ps-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.ps-count {
  font-size: 11px; font-weight: 700;
  color: var(--neutral-400);
  background: var(--neutral-50);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  flex-shrink: 0;
}
.ps-count.is-done { background: var(--sage-100, #D8E0C9); color: #4A5F3D; }
.ps-blurb { margin: 6px 0 14px; font-size: 12.5px; color: var(--text-subtle); line-height: 1.55; max-width: 62ch; }
.ps-head + .field { margin-top: 14px; }

.ps-field textarea { overflow: hidden; min-height: 42px; line-height: 1.55; }
.field-hint { font-size: 11px; color: var(--neutral-400); }

.profile-side {
  position: sticky;
  top: calc(var(--bar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.side-card h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-strong); }
.side-card .field { margin-bottom: 11px; }
.side-blurb { margin: -6px 0 12px; font-size: 12px; color: var(--text-subtle); line-height: 1.5; }
.side-card-quiet { background: transparent; border-style: dashed; }

.consent-note {
  margin: -4px 0 12px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 9px;
  padding: 9px 11px;
}
.consent-note.is-ok      { background: var(--sage-100, #D8E0C9); color: #3F5334; }
.consent-note.is-no      { background: #FBEAE8; color: #8E2B24; }
.consent-note.is-unknown { background: var(--neutral-50); color: var(--neutral-600); }

/* ---------------- register ---------------- */

.reg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.reg-when { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.reg-id h1 { margin: 4px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; }
.reg-meta { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); }

.reg-tally { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.reg-tally-num { font-size: 40px; font-weight: 700; color: var(--gold-300); letter-spacing: -0.04em; }
.reg-tally-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-400); margin-top: 4px; }

.reg-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.reg-list { display: flex; flex-direction: column; gap: 8px; }

.reg-person {
  --who: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.reg-person.is-here { border-left-color: var(--who); background: color-mix(in srgb, var(--who) 5%, var(--neutral-0)); }
.reg-person.is-no { border-left-color: var(--neutral-300); background: var(--neutral-25); }
.reg-person.is-no .rp-name { color: var(--text-subtle); }

/* the whole name block is the tap target — carers do this standing up */
.rp-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 240px;
  min-height: 54px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  padding: 4px 0;
  border-radius: var(--radius-md);
}
.rp-main .avatar { background: var(--who); width: 42px; height: 42px; font-size: 14px; }
.reg-person:not(.is-here) .rp-main .avatar { background: var(--neutral-300); }

.rp-name { display: flex; flex-direction: column; gap: 2px; font-size: 17px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; }
.rp-name small { font-size: 12px; font-weight: 400; color: var(--text-subtle); letter-spacing: 0; }

.rp-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }

.rp-faces { display: flex; gap: 4px; }

.face-btn {
  --face: var(--neutral-400);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--neutral-300);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.face-btn:hover { color: var(--face); background: color-mix(in srgb, var(--face) 10%, transparent); }
.face-btn.is-on { color: var(--face); background: color-mix(in srgb, var(--face) 15%, transparent); border-color: var(--face); }
.face-btn .face { display: block; }

.rp-engagement { font-size: 13px; font-weight: 700; min-width: 92px; }
.rp-engagement.is-prompt { color: var(--neutral-400); font-weight: 400; font-style: italic; }

.rp-decline { min-height: 46px; padding-inline: 16px; }
.rp-decline.is-on { background: var(--neutral-200); border-color: var(--neutral-300); color: var(--text-muted); }

.reg-block { margin-top: 26px; }
.reg-block h2 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.reg-block-note { margin: 0 0 12px; font-size: 12.5px; color: var(--text-subtle); }
.reg-block textarea {
  width: 100%;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font-size: 14px;
  resize: vertical;
}

/* ---------------- photos ---------------- */

.photo-strip { display: flex; flex-wrap: wrap; gap: 9px; }

.thumb {
  position: relative;
  width: 148px; height: 112px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--neutral-50);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 8px 5px;
  font-size: 11px; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sheet-photo { width: min(620px, calc(100vw - 32px)); }
.photo-large {
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  margin-bottom: 16px;
  display: block;
}

.photo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-toggle {
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.tag-toggle:hover { border-color: var(--gold-200); }
.tag-toggle.is-on { background: var(--gold-300); border-color: var(--gold-300); color: #fff; }
.tag-toggle.is-blocked { border-style: dashed; border-color: #E0A9A4; }
.tag-toggle.is-blocked.is-on { background: #A8322A; border-color: #A8322A; }

/* ---------------- activity record ---------------- */

.subtabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border-subtle); }
.subtab {
  border: 0; background: none;
  padding: 9px 2px; margin-right: 20px;
  font-size: 14px; font-weight: 600;
  color: var(--text-subtle);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--dur) var(--ease-out);
}
.subtab:hover { color: var(--text-strong); }
.subtab.is-on { color: var(--gold-500); border-bottom-color: var(--gold-300); }

.act-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 15px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.stat strong { font-size: 27px; font-weight: 700; letter-spacing: -0.035em; color: var(--text-strong); line-height: 1; }
.stat span { font-size: 12px; color: var(--text-subtle); line-height: 1.35; }
.stat-avg { display: block; height: 30px; }

.act-categories { display: flex; flex-direction: column; gap: 9px; padding-bottom: 14px; }
.cat-row { display: grid; grid-template-columns: 10px minmax(0, 1.1fr) minmax(60px, 1fr) auto 26px; align-items: center; gap: 10px; }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; }
.cat-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.cat-bar { height: 7px; background: var(--neutral-100); border-radius: var(--radius-pill); overflow: hidden; }
.cat-bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
.cat-score { font-size: 12px; font-weight: 700; white-space: nowrap; }
.cat-n { font-size: 11px; color: var(--neutral-400); text-align: right; }

.timeline { display: flex; flex-direction: column; padding-bottom: 12px; }
.tl-row {
  --cat: var(--neutral-500);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0 12px 12px;
  border-left: 3px solid var(--cat);
  border-bottom: 1px solid var(--border-subtle);
}
.tl-row:last-child { border-bottom: 0; }
.tl-row.is-no { border-left-color: var(--neutral-200); opacity: 0.72; }
.tl-date { display: flex; flex-direction: column; min-width: 56px; line-height: 1.2; }
.tl-date strong { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.tl-date small { font-size: 11px; color: var(--neutral-400); }
.tl-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tl-name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.tl-meta { font-size: 12px; color: var(--text-subtle); }
.tl-note { font-size: 12.5px; color: var(--text-muted); font-style: italic; margin-top: 3px; }
.tl-photos { font-size: 11px; font-weight: 700; color: var(--gold-500); margin-top: 3px; }
.tl-engagement { flex-shrink: 0; }
.tl-face { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tl-face small { font-size: 10.5px; font-weight: 700; }
.tl-declined, .tl-unrated { font-size: 11.5px; color: var(--neutral-400); font-style: italic; }

/* ---------------- ad-hoc records ---------------- */

.profile-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.profile-actions-hint { font-size: 11.5px; color: var(--text-subtle); max-width: 20ch; line-height: 1.35; }

.adhoc-faces { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.adhoc-faces .rp-engagement { min-width: 0; margin-left: 6px; font-size: 12.5px; }

.adhoc-photos:not(:empty) { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.adhoc-photos .thumb { width: 96px; height: 74px; }

#btnAdhocPhoto[disabled] { opacity: 0.45; cursor: not-allowed; }

/* a record logged off the timetable, distinguished from a planned session */
.tl-row.is-adhoc { cursor: pointer; border-left-style: dashed; }
.tl-row.is-adhoc:hover { background: var(--gold-50); }
.tl-row.is-adhoc:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }
.tl-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-tag {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gold-600); background: var(--gold-100);
  border-radius: var(--radius-pill); padding: 2px 8px;
}

/* ---------------- relatives ---------------- */

.access-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.access-chip {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.access-chip.is-on   { background: var(--sage-100, #D8E0C9); color: #3F5334; }
.access-chip.is-off  { background: var(--neutral-50); color: var(--neutral-400); text-decoration: line-through; }
.access-chip.is-held { background: #FBEAE8; color: #A8322A; }

/* per-resident family cards */
.rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding-bottom: 14px; }
.rel-card {
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
  background: var(--neutral-25);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.rel-card:hover { border-color: var(--gold-200); background: var(--gold-50); }
.rel-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rel-name { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.rel-rel {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-500); background: var(--gold-100);
  border-radius: var(--radius-pill); padding: 2px 8px;
}
.rel-email { font-size: 12px; color: var(--text-subtle); word-break: break-all; }
.rel-email.is-missing { font-style: italic; color: var(--neutral-400); }

/* the all-relatives dashboard */
.rel-table { display: flex; flex-direction: column; gap: 8px; }
.rel-row {
  --who: var(--neutral-500);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--who);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.rel-row:hover { border-color: var(--who); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.rel-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rel-sub { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; }
.rel-arrow { color: var(--neutral-300); font-size: 15px; text-align: center; }
.rel-resident { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rel-resident .avatar { width: 34px; height: 34px; font-size: 12px; background: var(--who); }
.rel-resident-name { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.rel-resident-name small { font-size: 11px; font-weight: 400; color: var(--text-subtle); }

.rc-family { font-size: 10.5px; font-weight: 600; color: var(--text-subtle); margin-top: 6px; }
.rc-family.is-none { color: var(--neutral-400); font-style: italic; }

.no-family { margin-top: 30px; }
.no-family h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.no-family p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.no-family-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-person {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-card);
  border: 1px dashed var(--neutral-300);
  border-radius: var(--radius-pill);
  padding: 5px 14px 5px 5px;
  font-size: 13px; font-weight: 600; color: var(--text-body);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.chip-person:hover { border-color: var(--gold-300); background: var(--gold-50); }
.chip-person .avatar { width: 30px; height: 30px; font-size: 11px; }

/* access checkboxes in the relative dialog */
.access-set { border: 0; padding: 0; margin: 4px 0 0; }
.access-set legend { font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 0 0 7px; }
.access-row {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.access-row:hover { border-color: var(--gold-200); }
.access-row:has(input:checked) { border-color: var(--gold-300); background: var(--gold-50); }
.access-row input { margin-top: 3px; accent-color: var(--gold-300); }
.access-body { display: flex; flex-direction: column; gap: 2px; }
.access-body strong { font-size: 14px; color: var(--text-strong); }
.access-body > span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.access-warn {
  margin-top: 6px;
  font-size: 12px; line-height: 1.45;
  background: #FBEAE8; color: #8E2B24;
  border-radius: 8px; padding: 7px 9px;
}
.access-row.is-blocked { border-style: dashed; }
.access-row.is-blocked:has(input:checked) { border-color: #E0A9A4; background: #FDF4F3; }

/* ---------------- responsive ---------------- */

/* the app bar is a single non-wrapping row, so the home name — the least-used
   control in it, and one that still prints on every sheet — gives way first */
@media (max-width: 980px) and (min-width: 701px) { .home-label { display: none; } }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .library {
    position: static;
    height: auto;
    max-height: 46vh;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .bar-actions .btn span[aria-hidden] { display: none; }
  .profile-cols { grid-template-columns: minmax(0, 1fr); }
  .profile-side { position: static; }
  .resident-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .rel-row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .rel-arrow { display: none; }
}

@media (max-width: 760px) {
  .rp-controls { margin-left: 0; width: 100%; justify-content: space-between; }
  .rp-faces { gap: 2px; }
  .face-btn { width: 44px; height: 44px; }
  .rp-engagement { min-width: 0; }
  .cat-row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .cat-bar, .cat-n { display: none; }
}

/* three tabs plus the actions cannot share one row on a phone — wrap onto two
   rather than pushing the whole document sideways */
@media (max-width: 700px) {
  .bar-actions { width: 100%; }
  .app-bar {
    height: auto;
    flex-wrap: wrap;
    padding-block: 9px;
    gap: 9px 10px;
  }
  /* scoped to the bar: the sign-in card has room for the wordmark and
     looks like an unfinished page without it */
  .app-bar .brand-name { display: none; }
  /* with the actions gone from the app bar, brand and tabs share one row again;
     they still wrap on their own if a very narrow phone cannot take both */
  .tabs { justify-content: space-between; }
  .tab { padding-inline: 10px; }
}

@media (max-width: 640px) {
  .view-head { flex-direction: column; align-items: stretch; }
  .thumb { width: calc(50% - 5px); }
  #residentSearch { min-width: 0; width: 100%; }
}

/* ================= PRINT ================= */

.print-root { display: none; }

@media screen {
  .print-root { display: none !important; }
}

@page poster   { size: A4 landscape; margin: 9mm; }
@page posterA3 { size: A3 landscape; margin: 12mm; }
@page portrait { size: A4 portrait; margin: 12mm; }
@page dash     { size: A4 portrait; margin: 9mm; }
@page matrix   { size: A4 landscape; margin: 8mm; }
@page chef     { size: A4 landscape; margin: 9mm; }
/* A tray card, printed straight to A5. No page margin, for two reasons: it
   is what stops the browser printing its own header and footer — the title,
   the URL, the date, "1 of 25" — across a card that goes on somebody's
   breakfast tray, and it hands the whole sheet to the border. The card keeps
   its own padding, and the border sits 10mm in, inside the few millimetres at
   the edge that no printer can reach. */
@page slip     { size: A5 portrait; margin: 0; }
/* the kitchen's own charts: seventeen columns across a sheet of A4 */
@page chart    { size: A4 landscape; margin: 8mm; }

body.print-mode-poster { page: poster; }
body.print-mode-poster.print-a3 { page: posterA3; }
body.print-mode-runsheet,
body.print-mode-today,
body.print-mode-profile,
body.print-mode-menu { page: portrait; }
body.print-mode-kitchen { page: chef; }
body.print-mode-dash  { page: dash; }
body.print-mode-matrix { page: matrix; }
body.print-mode-slips  { page: slip; }
body.print-mode-chart  { page: chart; }

@media print {
  .app-bar, .layout, .arm-bar, .sheet, .proto-note,
  .view, .privacy-note { display: none !important; }

  body { background: #fff; font-size: 11pt; }

  .print-root {
    display: block;
    color: #2C2019;
    /* every poster dimension is expressed as a multiple of this, so A3 prints
       physically bigger rather than just roomier */
    --pscale: 1;
  }
  body.print-a3 .print-root { --pscale: 1.42; }

  /* One sheet per week. Heights are stated explicitly rather than left to
     percentages, because a percentage height has nothing to resolve against on
     the second and subsequent pages of a multi-week pack. */
  .p-page {
    display: flex;
    flex-direction: column;
    height: 192mm;                  /* A4 landscape less 9mm margins */
    break-after: page;
  }
  .p-page:last-child { break-after: auto; }

  body.print-a3 .p-page { height: 273mm; }                       /* A3 landscape less 12mm */
  body.print-mode-runsheet .p-page,
  body.print-mode-today .p-page { height: 273mm; }               /* A4 portrait less 12mm */

  /* the run sheet is a table that may run to several pages, so it must flow */
  .p-page-flow { height: auto; min-height: 273mm; break-after: auto; }
  /* a week's picking menus print as a pack, one sheet per day */
  .p-page-break { break-after: page; }

  /* ---- the risk matrix ----
     Eleven columns across a landscape sheet, ruled both ways so a row can be
     followed across and a column scanned down. Colour grades the risk; the
     text in the cell says what it is, so the sheet still works from a mono
     printer or a photocopy. */
  body.print-mode-matrix .p-page-flow { min-height: 0; }

  .mx-legend {
    display: flex; flex-wrap: wrap; gap: 2mm 6mm;
    margin: 2mm 0 3mm; font-size: 7.5pt; color: #4A443B;
  }
  .mx-key { display: inline-flex; align-items: center; gap: 1.5mm; }
  .mx-key i {
    width: 3.5mm; height: 3.5mm; border: 0.5pt solid; border-radius: 0.8mm;
    flex: none;
  }

  .mx {
    width: 100%; border-collapse: collapse;
    font-size: 7.4pt; line-height: 1.25;
  }
  .mx thead { display: table-header-group; }
  .mx tr { break-inside: avoid; }

  .mx-runhead th {
    text-align: left; font-size: 10pt; font-weight: 700;
    padding: 0 0 2mm; border: 0; text-transform: none; letter-spacing: 0;
  }

  .mx thead th {
    font-size: 6.8pt; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; text-align: left; vertical-align: bottom;
    padding: 1.5mm 1.5mm; background: #2C2019; color: #fff;
    border: 0.4pt solid #2C2019;
  }
  .mx-runhead th { background: none; color: #2C2019; }

  /* a line under every resident and between every column — the sheet is read
     by following one person across it */
  .mx td {
    padding: 1.6mm 1.5mm; vertical-align: top;
    border: 0.4pt solid #B9B2A6;
  }
  .mx tbody tr { border-bottom: 0.8pt solid #6B6357; }

  .mx-room { width: 11mm; font-weight: 700; font-size: 8.5pt; text-align: center; }
  .mx-who { width: 34mm; }
  .mx-who strong { display: block; font-size: 8.2pt; }
  .mx-who small { display: block; font-size: 6.4pt; color: #6B6357; }
  .mx-c { text-align: left; }

  /* the two IDDSI columns are numbers, so they centre and get some weight */
  .mx td:nth-child(3), .mx td:nth-child(4),
  .mx td:nth-child(7) { text-align: center; font-weight: 700; font-size: 8.5pt; }

  /* a floor divider, so somebody loading one trolley can find their half */
  .mx-unit th {
    text-align: left; background: #EFEDE8; color: #2C2019;
    font-size: 7.4pt; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 1.6mm 1.5mm;
    border: 0.4pt solid #B9B2A6; border-top-width: 1pt; border-top-color: #2C2019;
  }

  .mx-foot-note {
    margin: 3mm 0 0; font-size: 7pt; line-height: 1.45; color: #4A443B;
  }

  /* ---- the dashboard on one sheet ----
     One page is the whole point, so nothing here may grow: three columns of
     cards that break between columns rather than across a page boundary, and
     a type scale small enough to hold about fifty rows. */
  body.print-mode-dash .p-page-dash {
    height: 279mm;                       /* A4 portrait less 9mm margins */
    break-after: auto;
  }

  .pd-figures {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 3mm; margin: 3mm 0 4mm;
  }
  .pd-fig {
    border: 0.4pt solid #D8D2C6; border-radius: 2mm;
    padding: 2mm 2.5mm; text-align: left;
  }
  .pd-fig strong { display: block; font-size: 19pt; line-height: 1; font-weight: 700; }
  .pd-fig span { display: block; font-size: 7.6pt; color: #6B6357; margin-top: 1mm; line-height: 1.25; }
  /* an incomplete record is the one figure that asks somebody to do something */
  .pd-fig.is-warn { border-color: #B08514; background: #FDF6E3; }
  .pd-fig.is-warn strong { color: #6E5209; }

  .pd-grid {
    columns: 3; column-gap: 5mm; column-fill: balance;
    flex: 1; min-height: 0;
  }
  .pd-card {
    break-inside: avoid;
    margin: 0 0 5mm;
    border-top: 0.8pt solid #2C2019;
    padding-top: 1.5mm;
  }
  .pd-card h3 {
    margin: 0 0 2mm; font-size: 9.5pt; font-weight: 700;
    letter-spacing: 0.02em;
  }

  .pd-row {
    display: grid; grid-template-columns: 1fr 10mm 6mm;
    align-items: center; gap: 1.8mm;
    padding: 0.9mm 0;
  }
  .pd-label {
    font-size: 8.2pt; line-height: 1.3; color: #3F382F;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pd-track {
    display: flex; height: 1.8mm; background: #EFEBE2; border-radius: 1mm;
    overflow: hidden;
  }
  .pd-track i { display: block; height: 100%; background: #8A8175; min-width: 0.7mm; }
  .pd-n {
    font-size: 8.5pt; font-weight: 700; text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .pd-note {
    margin: 2mm 0 0; font-size: 7.2pt; line-height: 1.35; color: #6B6357;
  }

  .p-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 7px;
    border-bottom: 2.5pt solid #C75B39;
    margin-bottom: 9pt;
  }
  .p-brand { display: flex; align-items: center; gap: 8px; }
  .p-brand span { display: flex; flex-direction: column; line-height: 1.15; }
  .p-brand strong { font-size: calc(13pt * var(--pscale)); font-weight: 700; letter-spacing: -0.02em; }
  .p-brand small { font-size: calc(6.5pt * var(--pscale)); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: #8A3A22; }
  .p-brand svg { width: calc(31pt * var(--pscale)); height: auto; }
  .p-title { text-align: right; }
  .p-title h1 { margin: 0; font-size: calc(17pt * var(--pscale)); font-weight: 700; letter-spacing: -0.025em; }
  .p-title p { margin: 1pt 0 0; font-size: calc(9.5pt * var(--pscale)); color: #62503F; }

  /* --- poster ---
     Banded by meal, filling the whole sheet. Type is sized for a resident
     reading it from a few feet away, not for a manager holding it. */
  .p-week {
    flex: 1;
    display: grid;
    /* minmax(0,…) so a long activity name wraps instead of forcing the track
       wider than the sheet — noticeable at the extra-large setting */
    grid-template-columns: calc(58pt * var(--pscale)) repeat(7, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, 1fr);
    gap: 2pt;
  }

  .p-dayhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2pt 4pt;
    border-bottom: 2pt solid #3A2A22;
    line-height: 1.15;
  }
  .p-dayname { font-size: calc(13pt * var(--pscale)); font-weight: 700; letter-spacing: -0.02em; }
  .p-daydate { font-size: calc(8.5pt * var(--pscale)); font-weight: 500; color: #4C3B2E; }

  /* horizontal, not rotated — turned text is markedly harder to read for the
     people this sheet is for */
  .p-rowlabel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5pt;
    border-right: 1pt solid #DFD1BB;
  }
  .p-rowlabel span {
    font-size: calc(10.5pt * var(--pscale));
    font-weight: 700;
    color: #8A3A22;
    text-align: right;
    line-height: 1.15;
    text-wrap: balance;
  }

  .p-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3pt;
    padding: 3pt 1pt;
    border-bottom: 0.75pt solid #EDE3D3;
    break-inside: avoid;
  }

  .p-item {
    --cat: #836B55;
    display: flex;
    align-items: center;
    gap: 4pt;
    padding: 4pt 3pt 4pt 5pt;
    border-left: 3.5pt solid var(--cat);
    background: color-mix(in srgb, var(--cat) 8%, #fff);
    border-radius: 3pt;
    break-inside: avoid;
  }
  .p-icon { color: var(--cat); flex-shrink: 0; display: flex; }
  .p-icon svg { width: calc(22pt * var(--pscale)); height: calc(22pt * var(--pscale)); }
  .p-item-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .p-name {
    font-size: calc(12pt * var(--pscale)); font-weight: 700;
    letter-spacing: -0.015em; color: #2C2019;
    text-wrap: balance;
    /* break-word, not anywhere: anywhere also shrinks the track's intrinsic
       width, which chopped names mid-syllable ("Garden/ing Club") */
    overflow-wrap: break-word;
    hyphens: auto;              /* if a break is unavoidable, hyphenate it properly */
  }
  .p-when { font-size: calc(8.5pt * var(--pscale)); font-weight: 600; color: #4C3B2E; margin-top: 1pt; }

  /* --- run sheet --- */
  .rs { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .rs thead th {
    text-align: left;
    font-size: 7.5pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #62503F;
    border-bottom: 1.5pt solid #3A2A22;
    padding: 0 5pt 4pt;
  }
  .rs-week th {
    text-align: left;
    background: #3A2A22;
    color: #F8F3EA;
    font-size: 10.5pt;
    font-weight: 700;
    padding: 5pt;
    border-radius: 2pt;
  }
  .rs-day th {
    text-align: left;
    background: #F2EBDD;
    font-size: 10pt;
    padding: 4pt 5pt;
    border-top: 1pt solid #DFD1BB;
    border-bottom: 1pt solid #DFD1BB;
  }
  .rs td { padding: 5pt; border-bottom: 0.5pt solid #EDE3D3; vertical-align: top; }
  .rs tr { break-inside: avoid; }
  .rs-time { white-space: nowrap; font-weight: 700; display: table-cell; }
  .rs-time small { display: block; font-weight: 400; font-size: 7.5pt; color: #836B55; }
  .rs-name { --cat: #836B55; border-left: 2.5pt solid var(--cat); }
  .rs-name small { display: block; font-size: 8pt; color: #62503F; font-style: italic; margin-top: 1pt; }
  .rs-blank { width: 26%; }
  .rs-empty { font-style: italic; color: #A78F73; font-size: 9pt; }

  /* --- today card --- */
  /* space-evenly so a quiet day still fills the sheet and stays readable from a
     chair, rather than huddling at the top */
  .p-today { display: flex; flex-direction: column; justify-content: space-evenly; gap: 7pt; flex: 1; }
  .p-today-item {
    --cat: #836B55;
    display: flex;
    align-items: center;
    gap: 12pt;
    border-left: 4pt solid var(--cat);
    padding: 7pt 0 7pt 10pt;
    break-inside: avoid;
  }
  .p-today-icon { color: var(--cat); flex-shrink: 0; display: flex; }
  .p-today-time { font-size: 17pt; font-weight: 700; color: var(--cat); min-width: 72pt; }
  .p-today-body { display: flex; flex-direction: column; }
  .p-today-body strong { font-size: 17pt; font-weight: 600; line-height: 1.2; }
  .p-today-body small { font-size: 10.5pt; color: #62503F; }
  .p-rest-big { font-size: 15pt; color: #836B55; font-style: italic; }

  /* a day with nothing on it, on the picking menu and the kitchen sheet */
  .tm-blank { font-style: italic; color: #836B55; }

  /* --- picking menu: read by residents, so it follows the poster's rules --- */
  .pm-name-line { display: flex; align-items: baseline; gap: 10pt; margin-bottom: 12pt; font-size: 12pt; font-weight: 700; }
  .pm-rule { flex: 1; border-bottom: 1pt solid #836B55; height: 1pt; }

  /* Name and room side by side: the sheet comes back to the kitchen, and
     "which Margaret" is a question somebody has to answer at the trolley. */
  .pm-who { display: flex; gap: 14pt; margin-bottom: 12pt; }
  .pm-who .pm-name-line { flex: 1 1 auto; }
  .pm-who .pm-room-line { flex: 0 0 34mm; }

  .pm-meal { break-inside: avoid; margin-bottom: 13pt; }
  .pm-meal h2 {
    margin: 0 0 6pt; padding-bottom: 3pt;
    border-bottom: 1.5pt solid #C75B39;
    font-size: 16pt; font-weight: 700; letter-spacing: -0.02em;
  }

  /* The course, and how many of it to pick. A flat list of twenty dishes
     cannot say "choose one" about the mains and "as many as you like" about
     the vegetables, so it said neither. */
  .pm-group { break-inside: avoid; margin-bottom: 8pt; }
  .pm-group h3 {
    margin: 0 0 4pt;
    font-size: 9.5pt; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #8A3A22;
  }
  .pm-rule-note {
    margin-left: 7pt;
    font-weight: 500; font-size: 8.5pt;
    letter-spacing: 0; text-transform: none;
    color: #62503F;
  }

  .pm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6pt; }
  .pm-dish { display: flex; align-items: flex-start; gap: 9pt; break-inside: avoid; }
  .pm-box { width: 15pt; height: 15pt; border: 1.5pt solid #3A2A22; border-radius: 2pt; flex-shrink: 0; margin-top: 1pt; }
  .pm-text { display: flex; flex-direction: column; }
  .pm-name { font-size: 13.5pt; font-weight: 600; line-height: 1.25; }
  .pm-note { font-size: 10pt; color: #62503F; }
  .pm-veg {
    margin-left: 4pt;
    font-size: 8.5pt; font-weight: 800; color: #fff;
    background: #4A5F3D; border-radius: 2pt; padding: 0 3pt;
    vertical-align: 2pt;
  }

  /* The allergen codes. Quiet enough that the dish name still leads, dark
     enough to survive a photocopier, which is how most of these travel. */
  .pm-alg {
    margin-left: 5pt;
    font-size: 9pt; font-weight: 700; letter-spacing: 0.06em;
    color: #8E2B24;
    vertical-align: 1pt;
    white-space: nowrap;
  }

  /* A drink or a portion size is one word; twelve of them in a column is
     half a page of white space. */
  .pm-list-inline {
    flex-direction: row; flex-wrap: wrap;
    gap: 5pt 16pt;
  }
  .pm-list-inline .pm-dish { align-items: center; }
  .pm-list-inline .pm-name { font-size: 12pt; font-weight: 500; }
  .pm-list-inline .pm-box { width: 13pt; height: 13pt; margin-top: 0; }

  /* The key, carrying only what this page used. */
  .pm-key {
    break-inside: avoid;
    margin-top: 13pt; padding-top: 8pt;
    border-top: 1pt solid #C8BFB0;
  }
  .pm-key h4 {
    margin: 0 0 5pt;
    font-size: 9.5pt; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #3A2A22;
  }
  .pm-key-list { display: flex; flex-wrap: wrap; gap: 3pt 15pt; font-size: 9.5pt; }
  .pm-key-item b { color: #8E2B24; font-weight: 700; letter-spacing: 0.06em; }
  .pm-key-advice { margin: 6pt 0 0; font-size: 9.5pt; line-height: 1.4; color: #3F382F; }
  .pm-key-advice b {
    font-size: 8.5pt; color: #fff; background: #4A5F3D;
    border-radius: 2pt; padding: 0 3pt; vertical-align: 1pt;
  }

  body.print-large .pm-name { font-size: 17pt; }
  body.print-large .pm-list-inline .pm-name { font-size: 15pt; }
  body.print-large .pm-meal h2 { font-size: 20pt; }
  body.print-large .pm-group h3 { font-size: 11pt; }
  body.print-large .pm-alg { font-size: 11pt; }
  body.print-large .pm-key-list,
  body.print-large .pm-key-advice { font-size: 11pt; }

  /* --- kitchen sheet: dense, and it must carry everything --- */
  .ks-meal { break-inside: auto; margin-bottom: 12pt; }
  .ks-meal h2 { margin: 0 0 4pt; font-size: 13pt; font-weight: 700; border-bottom: 1.5pt solid #3A2A22; padding-bottom: 2pt; }
  .ks-tally { margin: 0 0 6pt; display: flex; flex-wrap: wrap; gap: 3pt 14pt; font-size: 10pt; }
  .ks-tally strong { font-size: 12pt; }

  .ks {
    width: 100%; border-collapse: collapse; table-layout: fixed;
    /* 8pt with tight leading: a chef reads this at arm's length on a bench,
       and every extra millimetre a row costs is another sheet across 25 of
       them, three times a day */
    font-size: 8pt; line-height: 1.28;
  }

  /* Needs on the left, the plate on the right. The choice column takes the
     slack because it is the only one whose length is not predictable. */
  .ks .c-room  { width: 13mm; }
  .ks .c-who   { width: 32mm; }
  .ks .c-tex   { width: 16mm; }
  .ks .c-alg   { width: 32mm; }
  .ks .c-diet  { width: 24mm; }
  .ks .c-adapt { width: 56mm; }
  .ks .c-dish  { width: 106mm; }
  .ks .ks-room, .ks .ks-texture { text-align: center; font-weight: 700; }
  .ks td { overflow-wrap: break-word; }
  .ks-who small { display: block; font-size: 6.8pt; color: #62503F; }

  /* a rule under every resident, so a row can be followed across a wide sheet */
  .ks tbody td { border-bottom: 0.7pt solid #C8BFB0; }
  /* repeated at the top of every printed page a long sitting runs onto */
  .ks thead { display: table-header-group; }
  .ks tr { break-inside: avoid; }
  .ks-runhead th {
    text-align: left; font-size: 12pt; font-weight: 700;
    padding: 3mm 0 1.5mm; border-bottom: 0.8pt solid #2C2019;
    text-transform: none; letter-spacing: 0;
  }

  .ks thead th {
    text-align: left; font-size: 7pt; letter-spacing: 0.08em; text-transform: uppercase;
    color: #62503F; border-bottom: 1pt solid #836B55; padding: 0 4pt 3pt;
  }
  .ks td { padding: 2.6pt 3pt; border-bottom: 0.5pt solid #EDE3D3; vertical-align: top; }
  .ks tr { break-inside: avoid; }
  .ks-who strong { display: block; font-size: 9.5pt; }
  .ks-who small { font-size: 7.5pt; color: #62503F; }
  .ks-dish { font-weight: 600; font-size: 9.5pt; }
  .ks-texture { white-space: nowrap; font-weight: 700; }
  .ks-clash { background: #FBEAE8; }
  .ks-adapted { background: #FBF1DC; }
  /* the instruction the kitchen acts on, so it gets its own line and weight */
  .ks-note { display: block; font-weight: 700; color: #6B4E12; margin-top: 1pt; }
  .ks-clash .ks-dish strong { color: #8E2B24; }
  .ks-missing { margin: 4pt 0 0; font-size: 8.5pt; font-style: italic; color: #8E2B24; }

  .p-foot { break-inside: avoid; }

  .p-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 8pt;
    padding-top: 5pt;
    border-top: 1pt solid #EDE3D3;
    font-size: 7.5pt;
    color: #836B55;
  }

  /* --- extra-large option --- */
  body.print-large .p-name { font-size: calc(15pt * var(--pscale)); }
  body.print-large .p-when { font-size: calc(10pt * var(--pscale)); }
  body.print-large .p-icon svg { width: calc(25pt * var(--pscale)); height: calc(25pt * var(--pscale)); }
  body.print-large .p-dayname { font-size: calc(15pt * var(--pscale)); }
  body.print-large .p-rowlabel span { font-size: calc(13pt * var(--pscale)); }
  body.print-large .p-week { grid-template-columns: calc(72pt * var(--pscale)) repeat(7, minmax(0, 1fr)); }
  /* at this size the name needs the full cell width, so the pictogram sits above
     it rather than beside it — which also makes the symbol a stronger anchor */
  body.print-large .p-item { flex-direction: column; align-items: flex-start; gap: 2pt; }
  body.print-large .rs { font-size: 11.5pt; }
  body.print-large .p-today-body strong { font-size: 22pt; }
  body.print-large .p-today-time { font-size: 22pt; min-width: 104pt; }
}

.sf-group-head { margin: 22px 0 9px; }
.sf-group-head:first-child { margin-top: 4px; }
.sf-group-head h2 {
  margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-500);
}
.sf-group-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-subtle); max-width: 62ch; }

@media (max-width: 620px) {
  /* the controls drop under the wording rather than squeezing it to a column
     two words wide */
}

/* one press for the whole day, sitting under the three meal chips it covers */
.confirm-all {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 16px;
}
.confirm-all-note { font-size: 12.5px; color: var(--text-subtle); }
.confirm-all-note.is-wanting { color: #6E5209; font-weight: 600; }

/* ============ sending the day's selections to reception ============ */

/* what is going, in figures. Nobody proofreads a screen of monospace; they
   check the counts and look for anything wanting a second glance. */
.confirm-summary {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 15px;
}
.cs-stat {
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: var(--neutral-25);
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.cs-stat strong { font-weight: 700; color: var(--text-strong); }
.cs-stat.is-flagged {
  border-color: #E0C77A; background: #FDF6E3; color: #6E5209;
}
.cs-stat.is-flagged strong { color: #6E5209; }

/* the address and the way to change it were touching */
.send-to {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--neutral-200); border-radius: 10px;
  background: var(--neutral-0);
}
.send-addr {
  font-size: 13.5px; color: var(--text-strong); font-weight: 600;
  overflow-wrap: anywhere; min-width: 0;
}
.send-addr.is-unset { color: var(--neutral-400); font-weight: 500; font-style: italic; }
.send-change { margin-left: auto; flex: none; font-size: 12.5px; }

/* Folded away by default and bounded when open. Three meals of selections is
   several hundred lines: left to run, it pushed the send button so far down the
   sheet that people scrolled past it looking for one. */
.mail-details { margin-bottom: 13px; }
.mail-details > summary {
  cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  padding: 4px 0;
}
.mail-details > summary::-webkit-details-marker { display: none; }
.mail-details > summary::before {
  content: '›'; display: inline-block; width: 14px;
  font-weight: 800; color: var(--neutral-400);
  transition: transform var(--dur) var(--ease-out);
}
.mail-details[open] > summary::before { transform: rotate(90deg); }
.mail-details > summary:hover { color: var(--text-strong); }

.mail-preview {
  margin: 6px 0 0;
  max-height: 240px;
  overflow: auto;
  padding: 11px 13px;
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--neutral-25);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.55; color: var(--text-body);
  /* wrap rather than scroll sideways: a cut-off resident line is the one thing
     this preview must not do */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mail-preview:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 1px; }

.send-error {
  margin: 0 0 13px; padding: 10px 12px;
  border: 1px solid #E0A9A4; border-left: 3px solid #A8322A; border-radius: 8px;
  background: #FBEAE8; color: #8E2B24;
  font-size: 12.5px; line-height: 1.5;
}

/* the actions stay put while the sheet scrolls */
#confirmSheet .sheet-foot {
  position: sticky; bottom: -22px;
  margin-top: 16px; padding: 14px 0 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
  flex-wrap: wrap;
}

/* where somebody eats: one question, one answer, so these behave as a radio
   set rather than as more of the adaptation pills above them */
.where-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.where-pill {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--neutral-200); background: var(--neutral-0);
  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.where-pill:hover { border-color: var(--neutral-300); color: var(--text-strong); }
.where-pill.is-on { background: var(--gold-300); border-color: var(--gold-300); color: #fff; }
.where-other { margin-top: 8px; }

/* ===================== dashboard ===================== */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}

.dash-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 17px;
}
.dash-head { margin-bottom: 12px; }
.dash-head h3 {
  margin: 0; font-size: 14.5px; font-weight: 700;
  color: var(--text-strong); letter-spacing: -0.01em;
}
.dash-head p { margin: 3px 0 0; font-size: 12px; color: var(--text-subtle); line-height: 1.45; }

.dash-rows { display: flex; flex-direction: column; gap: 7px; }

/* label, bar, count — the bar carries the shape, the number carries the fact */
.dash-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 24px;
  align-items: center;
  gap: 10px;
}
.dash-label {
  font-size: 12.5px; color: var(--text-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-track {
  height: 7px; border-radius: 999px;
  background: var(--neutral-50); overflow: hidden;
}
.dash-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--gold-300);
  transition: width var(--dur) var(--ease-out);
}
.dash-n {
  font-size: 12.5px; font-weight: 700; color: var(--text-strong);
  text-align: right; font-variant-numeric: tabular-nums;
}
/* a nil count should read as nil rather than as a very short bar */
.dash-row.is-zero .dash-label,
.dash-row.is-zero .dash-n { color: var(--neutral-400); font-weight: 500; }

.dash-note {
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
}

@media (max-width: 420px) {
  .dash-row { grid-template-columns: minmax(0, 1fr) 56px 22px; gap: 8px; }
}

/* ============ accounting for who is not dining ============ */

.absence-lede {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted);
}
.absence-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: 15px;
}

/* the name gets a column of its own so every row's buttons start at the same
   place — ragged left edges make a list of eight people hard to work down */
.absence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px 14px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border-subtle);
}
.absence-row:last-child { border-bottom: 0; }
.absence-row.is-resolved { background: var(--neutral-25); }

.absence-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.absence-who strong {
  font-size: 14px; font-weight: 700; color: var(--text-strong);
  line-height: 1.25;
}
.absence-who small { font-size: 11.5px; color: var(--text-subtle); }

.absence-opts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.absence-pill {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.absence-pill:hover { border-color: var(--neutral-300); color: var(--text-strong); }
/* discharging somebody takes them off the lists for good, so it should not
   look like the two everyday answers beside it */
.absence-pill.is-discharge { color: #8E2B24; }
.absence-pill.is-discharge:hover { background: #FBEAE8; border-color: #E0A9A4; }

.absence-reason {
  font-size: 12.5px; font-weight: 600; color: var(--sage);
  white-space: nowrap;
}
.absence-row.is-resolved .linkish { font-size: 12.5px; }
.absence-row.is-resolved { grid-template-columns: minmax(0, 1fr) auto auto; }

@media (max-width: 520px) {
  .absence-row, .absence-row.is-resolved { grid-template-columns: 1fr; }
  .absence-opts { justify-content: flex-start; }
}

/* a bar divided by unit: how many, and which floor they are on */
.dash-track { display: flex; }
.dash-seg { display: block; height: 100%; min-width: 5px; }
.dash-seg:first-child { border-radius: 999px 0 0 999px; }
.dash-seg:last-child { border-radius: 0 999px 999px 0; }
.dash-seg:only-child { border-radius: 999px; }
.dash-split {
  display: block; font-size: 11px; color: var(--text-subtle);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.dash-row:has(.dash-split) { align-items: start; }
.dash-row:has(.dash-split) .dash-track { margin-top: 5px; }
.dash-row:has(.dash-split) .dash-n { margin-top: 1px; }

.dash-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.dash-key span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-subtle); }
.dash-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* adding the app to a home screen */
.install-box {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--neutral-25);
}
.install-box p {
  flex: 1 1 220px; margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--text-muted);
}
.install-box p strong { color: var(--text-strong); font-weight: 600; }
.install-box .btn { flex: none; }

/* a hint that is asking for something rather than explaining something */
.field-hint.is-wanting { color: #6E5209; font-weight: 600; }

/* =======================================================================
   Two homes, and who is using them.
   ======================================================================= */

/* Recording a dish somebody is allergic to. Amber rather than red: this is
   a decision a kitchen makes legitimately every week, and a red screen for a
   routine adaptation teaches people to click through red screens. */
.clash-sheet .sheet-cat { color: var(--text-subtle); }
.clash-sheet h3 { color: #8E2B24; }
.clash-lede {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #FBF0D5;
  border: 1px solid #E8D9A8;
  border-left: 3px solid #B08514;
  font-size: 13.5px;
  line-height: 1.55;
  color: #5A4A22;
}
.clash-lede strong { color: #3A2A22; }

/* ---------------- the way in ---------------- */

/* A login screen, with a dropdown where the email and password will go. */

.signin {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--surface-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vh, 56px) 16px;
}

.signin-card {
  width: min(440px, 100%);
  margin: auto;
  padding: clamp(22px, 4vw, 32px);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.signin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.signin-card h1 {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.signin-lede {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* the control standing in for a sign-in */
#signInWho {
  width: 100%;
  padding: 12px 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
}
#signInWho:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* What you are about to be able to do. On a demo this is the point: pick the
   waiting team and watch the app close down around you before you go in. */
.signin-preview {
  margin: 16px 0 20px;
  padding: 14px 15px;
  background: var(--neutral-25);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.sp-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.sp-initials {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--gold-300);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.sp-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sp-who strong { font-size: 14.5px; color: var(--text-strong); }
.sp-who span { font-size: 12px; color: var(--text-subtle); }

.sp-rows { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.sp-rows > div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: baseline; }
.sp-rows dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sp-rows dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-body);
}

/* .btn-block already exists above; the sign-in button only needs the size */
.btn-lg { padding: 13px 18px; font-size: 15px; }

.signin-note {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.signin-note strong { color: var(--text-strong); }

/* nothing behind the sign-in screen should be reachable by tabbing to it */
body.is-signed-out .app-bar,
body.is-signed-out .view { visibility: hidden; }

/* ---------------- the app bar ---------------- */

.home-switch {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  flex-shrink: 0;
  cursor: pointer;
  max-width: 190px;
}
.home-switch:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.user-chip {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  font: inherit;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
}
.user-chip:hover { border-color: var(--neutral-200); }
.user-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.uc-initials {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--gold-300);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.uc-who { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.uc-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.uc-role { font-size: 10px; color: var(--text-subtle); }

/* ---------------- read-only ---------------- */

/* Greyed rather than gone. Somebody who cannot change the menu still has to
   read it, and a blank panel says nothing at all. */
.perm-note {
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--neutral-300);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.perm-note strong { color: var(--text-strong); }

.is-readonly input:disabled,
.is-readonly select:disabled,
.is-readonly textarea:disabled {
  background: var(--neutral-25);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;                 /* Safari fades disabled fields to unreadable */
  -webkit-text-fill-color: var(--text-muted);
}
.is-readonly button:disabled { opacity: 0.45; cursor: not-allowed; }
.is-readonly label { cursor: default; }

/* ---------------- settings: the account ---------------- */

.acct {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--neutral-25);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.acct-initials {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--gold-300);
  color: #fff;
  font-weight: 700;
}
.acct-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.acct-who strong { font-size: 15px; color: var(--text-strong); }
.acct-who span { font-size: 12.5px; color: var(--text-subtle); }
.acct-role { font-weight: 600; color: var(--gold-500) !important; }

.acct-caps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.acct-caps li {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--neutral-50);
  color: var(--text-muted);
}

/* ---------------- settings: people and roles ---------------- */

.set-section {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}
.set-head h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}
.set-head p {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}

.person-row {
  display: grid;
  grid-template-columns: 34px minmax(120px, 1.4fr) minmax(120px, 1fr) minmax(130px, 1.1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.pr-initials {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--neutral-50);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.pr-who { display: flex; flex-direction: column; min-width: 0; }
/* A name with no spaces in it is still one word to a browser, and one long
   word was pushing the whole settings dialog sideways. */
.pr-who strong, .pr-who span { overflow-wrap: anywhere; }
.pr-who strong { font-size: 13.5px; color: var(--text-strong); }
.pr-who span { font-size: 11.5px; color: var(--text-subtle); }
.person-row > * { min-width: 0; }
.pr-role { max-width: 100%; }
.pr-you {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
  background: var(--gold-50);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  vertical-align: 1px;
}
.pr-role {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-body);
}
.pr-homes { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pr-home {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.pr-allhomes {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold-500);
  background: var(--gold-50);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.people-count {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-subtle);
}

.new-user {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--neutral-25);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.new-user h5 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.home-ticks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 3px; }
.new-user-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.new-user-note { font-size: 12px; color: var(--text-muted); }

/* the matrix */
.rolemx-scroll { overflow-x: auto; }
.rolemx {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 12.5px;
}
.rolemx th, .rolemx td {
  border: 1px solid var(--border-subtle);
  padding: 7px 9px;
  text-align: center;
}
.rolemx thead th {
  background: var(--neutral-50);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-strong);
  vertical-align: bottom;
}
.rolemx .rm-cap {
  text-align: left;
  font-weight: 500;
  color: var(--text-body);
  min-width: 170px;
}
.rolemx .rm-cap small {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-subtle);
  margin-top: 2px;
}
.rolemx .rm-group th {
  background: var(--neutral-25);
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.rm-tick { display: grid; place-items: center; cursor: pointer; }
.rm-tick input { width: 17px; height: 17px; accent-color: var(--gold-300); cursor: pointer; }
.rm-tick input:disabled { cursor: default; opacity: 0.5; }
.roles-foot { margin-top: 12px; }

/* ---------------- small screens ---------------- */

@media (max-width: 700px) {
  .uc-who { display: none; }
  .user-chip { padding: 4px; }
  .home-switch { max-width: 130px; font-size: 13px; }

  .person-row {
    grid-template-columns: 30px 1fr auto;
    grid-template-areas:
      'ini who remove'
      '.   role role'
      '.   homes homes';
    row-gap: 6px;
  }
  .pr-initials { grid-area: ini; }
  .pr-who { grid-area: who; }
  .pr-role { grid-area: role; }
  .pr-homes { grid-area: homes; }
  .pr-remove { grid-area: remove; }

}

@media print {
  .signin, .user-chip, .home-switch { display: none !important; }
}

/* A save that did not save. Loud on purpose: the alternative is somebody
   filling in an allergy that goes nowhere. */
.save-alarm {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px clamp(14px, 3vw, 28px);
  background: #8E2B24;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
}
.save-alarm strong { font-weight: 700; }
.save-alarm .btn {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
@media print { .save-alarm { display: none !important; } }

/* =======================================================================
   Settings, once it grew three jobs.

   A dialog sized for two fields was holding an account, a staff list and a
   permission matrix — four thousand pixels of scroll, with the matrix
   scrolling sideways inside it. Tabs, and a width that fits the widest of
   the three, but only for the one person who has all three.
   ======================================================================= */

.sheet-set { width: min(460px, calc(100vw - 32px)); }
.sheet-set.is-wide { width: min(860px, calc(100vw - 32px)); }

.set-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  background: var(--neutral-50);
  border-radius: var(--radius-pill);
}
.set-tab {
  flex: 1 1 auto;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.set-tab:hover { color: var(--text-strong); }
.set-tab.is-on {
  background: var(--surface-card);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}
.set-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* The tabs carry the section names, so the panels do not repeat them. What is
   left is the sentence explaining what the section is for, which is the part
   worth keeping. */
.set-panel { padding-top: 4px; }
.set-panel .set-section,
.set-panel > .set-head h4 { border: 0; margin-top: 0; padding-top: 0; }
.set-panel > .set-head h4 { display: none; }

/* ---------------- people, at a width that fits ---------------- */

.person-head,
.person-row {
  display: grid;
  grid-template-columns: 34px minmax(150px, 1.5fr) minmax(140px, 1fr) minmax(150px, 1fr) 88px;
  align-items: center;
  gap: 12px;
}

.person-head {
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.person-row { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.person-row:last-of-type { border-bottom: 0; }
.pr-remove { justify-self: end; }

/* the add-someone form, three fields across when there is room */
.new-user .field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.new-user .field-row > .field { flex: 1 1 160px; min-width: 0; }

/* ---------------- the matrix, without sideways scrolling ---------------- */

.rolemx { min-width: 0; table-layout: fixed; }
.rolemx thead th:not(.rm-cap) { width: 96px; }
.rolemx .rm-cap { min-width: 0; width: auto; }

/* Below the width where five role columns and a sentence of capability can
   both fit, sideways scrolling is the honest answer — a five-column matrix
   does not become a phone layout by being squeezed. */
@media (max-width: 760px) {
  .rolemx { min-width: 560px; table-layout: auto; }
  .rolemx .rm-cap { min-width: 165px; }
}

/* ---------------- the account card ---------------- */

.acct { flex-wrap: wrap; }
.acct-who { flex: 1 1 190px; }
.acct-who strong { line-height: 1.25; }
.acct #btnSwitchUser { flex-shrink: 0; }

@media (max-width: 460px) {
  /* Three full-width pills ate a fifth of a phone screen before the settings
     started. Let them sit side by side and wrap where they must. */
  .set-tabs { border-radius: var(--radius-md); }
  .set-tab {
    flex: 0 1 auto;
    padding: 7px 10px;
    font-size: 12px;
    white-space: normal;
    border-radius: var(--radius-md);
  }
  .person-head { display: none; }
}

/* "always", not a control that happens to be switched off */
.rolemx .rm-always {
  color: var(--gold-500);
  font-weight: 700;
  background: color-mix(in srgb, var(--gold-50) 55%, transparent);
}

/* Twelve red words down a column is a lot of alarm for a list you are mostly
   reading. Quiet until it is being aimed at. */
.person-row .pr-remove {
  color: var(--text-subtle);
  border-color: transparent;
  background: transparent;
}
.person-row .pr-remove:hover:not(:disabled),
.person-row .pr-remove:focus-visible:not(:disabled) {
  color: #A8322A;
  background: color-mix(in srgb, #A8322A 8%, transparent);
}
.person-row .pr-remove:disabled { opacity: 0.35; }

/* Two long labels and a spacer do not fit a small sheet side by side. The
   safe choice stays first and both get a full line. */
@media (max-width: 520px) {
  .clash-sheet .sheet-foot { flex-wrap: wrap; gap: 10px; }
  .clash-sheet .sheet-foot .spacer { display: none; }
  .clash-sheet .sheet-foot .btn { flex: 1 1 100%; justify-content: center; }
}

/* The way out of a sign-in screen with nobody on it. */
.signin-empty p {
  margin: 0 0 16px;
  padding: 14px 15px;
  border-radius: var(--radius-md);
  background: #FBF0D5;
  border: 1px solid #E8D9A8;
  border-left: 3px solid #B08514;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5A4A22;
}
.signin-empty p strong { color: #3A2A22; }

/* The settings rework defined the people grid as five desktop columns after
   the narrow-screen rule that stacks them, so the later rule won and every
   row — not just a long name — pushed the dialog sideways on a phone.
   Re-stated here, after it. */
@media (max-width: 620px) {
  .person-head { display: none; }
  .person-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas:
      'ini who remove'
      '.   role role'
      '.   homes homes';
    row-gap: 7px;
    column-gap: 10px;
  }
  .pr-initials { grid-area: ini; }
  .pr-who      { grid-area: who; }
  .pr-role     { grid-area: role; }
  .pr-homes    { grid-area: homes; }
  .pr-remove   { grid-area: remove; justify-self: end; }
}

/* =======================================================================
   Away for one meal rather than the whole day.
   ======================================================================= */

/* Offered under every meal, quietly — it is the exception, not the question
   somebody came to this screen to answer. */
.cr-meal-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
}
.cr-meal-foot-label { font-size: 12px; color: var(--text-subtle); }
.absence-pill-sm { padding: 5px 11px; font-size: 12px; }

/* what a meal looks like once somebody is out for it */
.cr-meal.is-away { opacity: 0.85; }
.cr-meal-absent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: var(--neutral-25);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--neutral-300);
  font-size: 13px;
  color: var(--text-muted);
}
.cr-meal-absent strong { color: var(--text-strong); }

.cr-away-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--neutral-50);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

/* the meals somebody is missing, under their name in the confirm dialog */
.absence-who small { display: block; }

/* This gets tapped standing up, holding a tablet in the other hand. */
@media (max-width: 900px) {
  .absence-pill-sm { min-height: 44px; padding-inline: 16px; }
  .cr-meal-foot { gap: 8px 10px; }
}

/* =======================================================================
   Morning slips.
   ======================================================================= */

/* ---- picking the weather ---- */

.wx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.wx-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.wx-pick:hover { border-color: var(--neutral-200); color: var(--text-strong); }
.wx-pick:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.wx-pick.is-on {
  border-color: var(--gold-300);
  color: var(--gold-500);
  background: var(--gold-50);
}
.wx-pick .wx-icon { color: currentColor; }

.slip-count {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--neutral-25);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.slip-count .is-wanting { color: #8A5A0A; font-weight: 600; }

@media print {

  /* ---- the slip ---- */

  /* One resident to a card, and the card fills the page: this gets read from
     a bed, so nothing is set smaller than it has to be. */
  body.print-mode-slips .p-page.slip {
    position: relative;
    width: 148mm;
    height: 210mm;                       /* the whole sheet, margin and all */
    padding: 0;
    break-after: page;
    overflow: hidden;
  }
  body.print-mode-slips .p-page.slip:last-child { break-after: auto; }

  /* the content, sitting inside the border */
  .slip-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20mm 18mm 17mm;
  }

  /* ---- the border ---- */

  .slip-frame {
    position: absolute;
    inset: 0;
    width: 148mm;
    height: 210mm;
    z-index: 0;
  }

  .slip-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8mm;
    padding-bottom: 4mm;
  }
  .slip-hello { margin: 0; font-size: 13pt; color: #62503F; }
  .slip-head h1 {
    margin: 1pt 0 3pt;
    font-size: 30pt;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.02;
  }
  .slip-day { margin: 0; font-size: 12pt; color: #3F382F; }

  .slip-wx {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1pt;
    color: #8A3A22;
    text-align: center;
  }
  .wx-label { font-size: 10.5pt; font-weight: 600; }
  .wx-temp  { font-size: 15pt; font-weight: 700; }

  .slip-line {
    margin: 5mm 0 0;
    font-size: 13pt;
    font-style: italic;
    color: #4C3B2E;
  }

  .slip-what {
    margin: 6mm 0 3mm;
    font-size: 11pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8A3A22;
  }

  /* The choices, big. This is the half of the card somebody actually needs.
     Deliberately not stretched to fill: a light breakfast is two lines, and
     stretching it pushed the day's news down into a hollow middle. The foot
     is what stays pinned, so it lands in the same place on every card in the
     stack. */
  .slip-choices { flex: 0 0 auto; }
  .slip-group { margin-bottom: 4mm; break-inside: avoid; }
  .slip-group h3 {
    margin: 0 0 1mm;
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #836B55;
  }
  .slip-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1mm 6mm;
  }
  .slip-group li {
    font-size: 16pt;
    font-weight: 600;
    line-height: 1.3;
  }

  /* a big breakfast, still on one card */
  .slip.is-full .slip-group li   { font-size: 13pt; }
  .slip.is-full .slip-group      { margin-bottom: 3mm; }
  .slip.is-full .slip-head h1    { font-size: 26pt; }
  .slip.is-full .slip-what       { margin: 4mm 0 2.5mm; }

  .slip.is-packed .slip-group li { font-size: 11pt; line-height: 1.25; }
  .slip.is-packed .slip-group    { margin-bottom: 2mm; }
  .slip.is-packed .slip-group ul { gap: 0.5mm 4mm; }
  .slip.is-packed .slip-group h3 { font-size: 8.5pt; }
  .slip.is-packed .slip-head h1  { font-size: 23pt; }
  .slip.is-packed .slip-hello,
  .slip.is-packed .slip-day      { font-size: 11pt; }
  .slip.is-packed .slip-line     { margin-top: 3mm; font-size: 11.5pt; }
  .slip.is-packed .slip-what     { margin: 3.5mm 0 2mm; }
  .slip.is-packed .slip-note     { font-size: 10.5pt; }
  .slip.is-packed .slip-inner    { padding: 17mm 16mm 15mm; }

  /* nothing chosen, and nobody eating: both said plainly rather than blank */
  .slip-none, .slip-away {
    padding: 6mm;
    border: 1.5pt dashed #C8BFB0;
    border-radius: 3mm;
  }
  .slip-none-head, .slip-away-head {
    margin: 0 0 2mm;
    font-size: 15pt;
    font-weight: 700;
    color: #8E2B24;
  }
  .slip-away-head { color: #4C3B2E; }
  .slip-none-why, .slip-away-why { margin: 0; font-size: 11.5pt; color: #4C3B2E; line-height: 1.45; }

  .slip-note {
    margin: 4mm 0 0;
    padding: 3mm 4mm;
    background: #F2EBDD;
    border-radius: 2mm;
    font-size: 11.5pt;
    line-height: 1.4;
    color: #3A2A22;
  }

  /* ---- the foot: whose tray, and what the carer has to know ---- */

  .slip-foot {
    margin-top: auto;
    padding-top: 4mm;
    border-top: 0.5pt solid #DFD1BB;
    display: flex;
    align-items: flex-end;
    gap: 5mm;
  }
  .slip-foot-main { flex: 1 1 auto; min-width: 0; }
  .slip-who { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm; }
  .slip-who strong { font-size: 12pt; }
  .slip-who span { font-size: 10.5pt; color: #62503F; }

  .slip-band {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5mm 2mm;
    margin-top: 2.5mm;
  }
  .slip-tag {
    font-size: 9.5pt;
    padding: 0.8mm 2.5mm;
    border-radius: 1.5mm;
    background: #F2EBDD;
    color: #4C3B2E;
  }
  /* the ones that change what goes on the tray */
  .slip-tag.is-strong {
    background: #F7DEDB;
    color: #8E2B24;
    font-weight: 700;
  }
}

/* =======================================================================
   Usual portion, and the same breakfast again.
   ======================================================================= */

.portion-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.portion-pill {
  padding: 9px 16px;
  min-height: 40px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.portion-pill:hover { border-color: var(--neutral-200); }
.portion-pill:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.portion-pill.is-on {
  background: var(--gold-300);
  border-color: var(--gold-300);
  color: #fff;
}
.portion-pill.is-none { color: var(--text-subtle); }
.portion-pill.is-none.is-on { background: var(--neutral-400); border-color: var(--neutral-400); }

/* the pill on the choices screen that is what they always have */
.usual-flag {
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-500);
  background: var(--gold-50);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  vertical-align: 1px;
}
.dish-pill.is-usual:not(.is-on) { border-style: dashed; border-color: var(--gold-200); }
.dish-pill.is-on .usual-flag { background: rgba(255,255,255,0.25); color: #fff; }

/* "same as yesterday" */
.cr-repeat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 12px;
}
.cr-repeat-btn { min-height: 40px; }
.cr-repeat-note { font-size: 12px; color: var(--text-subtle); }

@media (max-width: 900px) {
  .cr-repeat-btn { min-height: 44px; }
  .portion-pill { min-height: 44px; }
}

/* =======================================================================
   A resident choosing their own meals.

   Read from a chair, at arm's length, by somebody who may not have their
   glasses on. Everything here is larger than the staff app and there is
   nothing on the screen that is not a meal.
   ======================================================================= */

.resident-pick {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  background: var(--surface-page);
  padding: clamp(18px, 4vw, 40px) clamp(14px, 4vw, 32px) 60px;
}
body.is-picking .app-bar,
body.is-picking .view,
body.is-picking .signin { display: none !important; }

.pick-inner { max-width: 620px; margin: 0 auto; }

.pick-head { margin-bottom: 22px; }
.pick-hello { margin: 0; font-size: 19px; color: var(--text-muted); }
.pick-head h1 {
  margin: 2px 0 10px;
  font-size: clamp(34px, 8vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-strong);
}
.pick-sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-body); }

.pick-card {
  margin-bottom: 18px;
  padding: clamp(16px, 4vw, 24px);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.pick-day { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pick-day h2 { margin: 0; font-size: 26px; font-weight: 700; color: var(--text-strong); }
.pick-day span { font-size: 15px; color: var(--text-subtle); }

.pick-meal + .pick-meal { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.pick-meal h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  color: var(--gold-500);
}

.pick-group + .pick-group { margin-top: 16px; }
.pick-group h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.pick-group h4 span {
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}

.pick-options { display: flex; flex-direction: column; gap: 9px; }

/* A whole row each, and a big one. Nobody is trying to fit twenty of these on
   a screen; they are trying to read four and touch one. */
.pick-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 62px;
  padding: 14px 18px;
  font: inherit;
  text-align: left;
  background: var(--surface-card);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.pick-name { font-size: 19px; font-weight: 600; color: var(--text-strong); line-height: 1.25; }
.pick-pill:hover { border-color: var(--neutral-300); }
.pick-pill:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pick-pill.is-on {
  background: var(--sage);
  border-color: var(--sage);
}
.pick-pill.is-on .pick-name { color: #fff; }
.pick-pill.is-on .pick-name::before { content: '✓ '; }

.pick-warn { font-size: 13.5px; font-weight: 600; color: #8E2B24; }
.pick-pill.is-warn { border-color: #E8B4AE; }
.pick-pill.is-on .pick-warn { color: #FBE6E3; }

.pick-notes {
  margin: 4px 0 18px;
  padding: 15px 17px;
  background: var(--neutral-25);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.pick-notes p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text-body); }
.pick-notes p + p { margin-top: 8px; }

.pick-none { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-muted); }

.pick-foot { margin-top: 8px; text-align: center; }
.pick-foot p { margin: 0 0 14px; font-size: 15px; color: var(--text-muted); }
.pick-foot .btn { min-height: 52px; padding-inline: 28px; font-size: 16px; }

/* the phone that has none of the home's data on it */
.pick-sorry h1 { margin: 0 0 14px; font-size: 26px; font-weight: 700; color: var(--text-strong); }
.pick-sorry p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--text-body); }
.pick-sorry-small { font-size: 14.5px !important; color: var(--text-subtle) !important; }

@media print {
  /* ---- the code on the tray slip ---- */
  /* Beside the foot rather than above it. 20mm is comfortably enough for a
     version 3 symbol — about 0.7mm a module, which any phone reads at the
     distance somebody holds a card. */
  .slip-qr {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8mm;
    text-align: center;
  }
  .slip-qr .qr { width: 20mm; height: 20mm; }
  .slip-qr span { font-size: 7.5pt; line-height: 1.2; color: #62503F; }

  .slip.is-packed .slip-qr .qr { width: 17mm; height: 17mm; }
  .slip.is-packed .slip-qr span { font-size: 7pt; }

  .resident-pick { display: none !important; }
}

/* The home-screen offer, on the way in. Quiet: it sits under the sign-in
   card and is a suggestion, not a gate. */
.install-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-top: 22px;
  padding: 15px 17px;
  background: var(--gold-50);
  border: 1px solid var(--gold-100);
  border-radius: var(--radius-md);
}
.io-body { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 240px; min-width: 0; }
.io-body svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--gold-500); margin-top: 1px; }
.io-say { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.io-say strong { font-size: 14px; color: var(--text-strong); }
.io-say span { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.io-acts { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.io-acts .btn { min-height: 40px; }

@media (max-width: 520px) {
  .io-acts { width: 100%; justify-content: space-between; }
  .io-acts .btn { min-height: 44px; flex: 1 1 auto; }
}

/* =======================================================================
   Daily printouts.
   ======================================================================= */

.dp-list { display: grid; gap: 12px; margin-bottom: 26px; }
@media (min-width: 760px)  { .dp-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .dp-list { grid-template-columns: repeat(3, 1fr); } }

.dp-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.dp-card.is-blocked { background: var(--neutral-25); box-shadow: none; }
.dp-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }

.dp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dp-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-strong); }
.dp-count {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-subtle);
  background: var(--neutral-50);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}
.dp-what { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.dp-when {
  margin: 2px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gold-500);
}
.dp-warn {
  margin: 6px 0 0; padding: 7px 10px;
  font-size: 12.5px; line-height: 1.45;
  background: #FBF0D5; border-radius: var(--radius-md); color: #6E5209;
}
.dp-warn.is-blocked { background: #F7DEDB; color: #8E2B24; font-weight: 600; }
.dp-card .btn { align-self: flex-start; }

@media (max-width: 900px) { .dp-card .btn { min-height: 44px; align-self: stretch; justify-content: center; } }

@media print {
  /* =====================================================================
     The three charts. Their own page rule: landscape, small margins, and
     type sized so seventeen columns of a care home's own spreadsheet fit
     across a sheet of A4 without anybody needing an A3 printer.
     ===================================================================== */

  .ch {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 6.6pt;
    line-height: 1.22;
  }
  .ch th, .ch td {
    border: 0.4pt solid #C8BFB0;
    padding: 1.4mm 1.1mm;
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
  }
  .ch thead { display: table-header-group; }
  .ch tr { break-inside: avoid; }
  .ch thead th {
    background: #F2EBDD;
    font-size: 6.2pt;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .ch-runhead th {
    background: #fff; border: 0; border-bottom: 0.8pt solid #2C2019;
    font-size: 10pt; padding: 2.5mm 0 1.2mm; letter-spacing: 0;
  }
  .ch-band th { background: #E8DFCD; text-align: center; font-size: 7pt; }
  .ch-band .ch-band-l { background: #E0EAF2; }
  .ch-band .ch-band-s { background: #EFE4DC; }

  /* a rule across the sheet each time the floor changes */
  .ch-unit th {
    background: #fff; border: 0; border-bottom: 0.6pt solid #A78F73;
    padding: 2mm 0 0.8mm;
    font-size: 7.5pt; font-weight: 700; text-align: left;
  }

  .ch .ch-room { text-align: center; font-weight: 700; }
  .ch .ch-name { font-size: 6.9pt; }
  .ch .ch-mid  { text-align: center; }
  .ch .ch-must { font-weight: 700; }
  .ch .ch-alg  { color: #8E2B24; font-weight: 600; }
  .ch-none { color: #A78F73; font-style: italic; }
  .ch-away { text-align: center; font-style: italic; color: #62503F; background: #F7F4EE; }

  /* the columns the app cannot fill, ruled for a pen */
  .ch .ch-write { background: repeating-linear-gradient(#fff 0 100%); }

  /* the breakfast tick grid */
  .ch .ch-tick { text-align: center; font-weight: 700; font-size: 7pt; }
  .ch .ch-tick.is-on { background: #E8F0E6; color: #33502C; }
  .ch .ch-tick-head { text-align: center; }
  .ch .ch-other { font-size: 6.6pt; }

  .ch-foot-note { margin: 3mm 0 0; font-size: 7.5pt; color: #62503F; }

  /* ---- column widths, in millimetres of a landscape A4 ---- */
  .ch-needs .c-room { width: 9mm; }
  .ch-needs .c-name { width: 27mm; }
  .ch-needs .c-diet { width: 19mm; }
  .ch-needs .c-alg  { width: 21mm; }
  .ch-needs .c-intol{ width: 18mm; }
  .ch-needs .c-pref { width: 24mm; }
  .ch-needs .c-idd  { width: 18mm; }
  .ch-needs .c-must { width: 11mm; }
  .ch-needs .c-vessel { width: 20mm; }
  .ch-needs .c-w    { width: 13mm; }

  /* seventeen columns on a landscape A4 leaves 281mm; these come to 274 */
  .ch-menu .c-room { width: 9mm; }
  .ch-menu .c-name { width: 24mm; }
  .ch-menu .c-alg  { width: 18mm; }
  .ch-menu .c-intol{ width: 13mm; }
  .ch-menu .c-pref { width: 15mm; }
  .ch-menu .c-idd  { width: 16mm; }
  .ch-menu .c-must { width: 10mm; }
  .ch-menu .c-dish { width: 19mm; }
  .ch-menu .c-w    { width: 13mm; }

  .ch-breakfast .c-room { width: 11mm; }
  .ch-breakfast .c-name { width: 34mm; }
  .ch-breakfast .c-alg  { width: 26mm; }
  .ch-breakfast .c-intol{ width: 22mm; }
  .ch-breakfast .c-idd  { width: 24mm; }
  .ch-breakfast .c-must { width: 13mm; }
  .ch-breakfast .c-tick { width: 13mm; }
  .ch-breakfast .c-other{ width: auto; }
  .ch-breakfast { font-size: 7.2pt; }
  .ch-breakfast .ch-tick { font-size: 8pt; }
}

/* Breakfast and the everyday items. They belong to no particular day, so they
   sit under the week rather than in it. */
.wk-standing {
  margin-top: 22px;
  padding: 18px 20px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.wk-standing > h3 {
  margin: 0 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-500);
}
.wk-standing-meal { margin-top: 14px; }
.wk-standing-meal > h4 {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 700; color: var(--text-strong);
}
.wk-standing .standing-group { margin-bottom: 7px; }
.wk-standing .standing-group h4 {
  margin: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-subtle);
}
.wk-standing .standing-group p {
  margin: 1px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-body);
}