/* AprèsSchool styles. Loaded by index.html. */
/* ── Tokens ── */
:root {
  --ctl-h: 40px; /* the Meals tabs' main boxes and buttons: search, add, filters */
  --gold: #c8960c;
  --gold-dark: #a67c00;
  --gold-light: #fff8e1;
  --gold-mid: #f5d96b;
  --green: #3b6e32;
  --green-dark: #2a5122;
  --green-light: #eaf4e8;
  --green-mid: #7dc471;
  --orange: #e8640a;
  --orange-light: #fff0e6;
  /* Words and fills: --green and --green-dark are lines and words, --green-deep and --gold-deep fill
     under white text, so dark mode can lighten the words and keep the fills */
  --green-text: #3b6e32; /* green words and icons (--green: fills and lines) */
  --green-deep: #2a5122; /* deep green fills (--green-dark: words) */
  --green-line: #cfe3ca; /* a soft green border */
  --green-faint: #fbfdf9;
  --green-timer: #4f8a43; /* a running timer's button, before it fills */
  --gold-deep: #a67c00; /* gold fills (--gold-dark: words) */
  --gold-text: #8a6500; /* a darker gold than --gold-dark, to read at small sizes */
  --orange-line: #f6c9a6;
  --orange-tint: #fdecdc;
  --red: #b42318; /* warnings in words: allergies, remove */
  --red-fill: #c0392b; /* delete, over a limit */
  --red-light: #fef3f2;
  --red-soft: #fdecea;
  --red-tint: #fde2e1;
  --red-line: #fda29b;
  /* Plan the Menu's evenings: time for dinner out */
  --free-bg: #d9eed3;
  --some-bg: #fbe7a1;
  --busy-bg: #f9d2b6;
  --day-ink: #3a3a34;

  /* Light sidebar: warm beige with dark green text */
  --sidebar-bg: #ede8dc;
  --sidebar-text: #2a4a20;
  --sidebar-active-text: #1a2e12;
  --sidebar-active-bg: rgba(58, 110, 50, 0.12);
  --sidebar-hover-bg: rgba(58, 110, 50, 0.07);
  --sidebar-border: #d8d2c4;
  --sidebar-logo-border: #cec8ba;

  --bg: #fafaf8;
  --surface: #ffffff;
  --surface-2: #f4f2ec;
  --border: #e4e0d6;
  --border-subtle: #ede9e2;
  --scrim: rgba(26, 30, 18, 0.48); /* behind a popup */
  --nav-scrim: rgba(26, 30, 18, 0.42);
  --hover-tint: rgba(0, 0, 0, 0.08);
  --on-photo: rgba(255, 255, 255, 0.88); /* a button sitting on a photo */

  --text-primary: #1a1a12;
  --text-secondary: #4e4c3c;
  --text-muted: #8a8672;

  --accent: #e8640a;
  --accent-light: #fff0e6;

  --cal-today: #c8960c;
  --cal-event: #3b6e32;
  --cal-event-text: #ffffff;
  --cal-event-dim: #e4e0d6;
  --cal-event-dim-text: #aaa490;

  --tab-active-border: #c8960c;
  --tab-active-text: #7a5800;

  --tag-bg: #eaf4e8;
  --tag-text: #2a5122;
  --on-fill: #ffffff; /* words on a coloured fill (a place's letter, the days a class meets) */

  --chat-header: #2a4a20;
  --chat-header-text: #d4e8c8;
  --chat-bg: #ffffff;
  --chat-border: #e4e0d6;

  /* weekly calendar */
  --cal-week-time-w: 52px;
  --cal-hour-h: 52px;

  color-scheme: light;
}

/* ── Dark mode ── (js/theme.js sets data-theme on <html>: Automatic follows the device, or Settings → Appearance)
   The same colors for a dark page: warm near-black surfaces, lighter the higher they sit (page, card, popup);
   off-white text in three greys; green, gold and orange fills unchanged (white text still reads on them), their
   words and lines lighter (--green-text, --green-dark, --gold-dark); pale tints become deep ones of the same hue. */
:root[data-theme='dark'] {
  --gold-dark: #e2b53e;
  --gold-light: #2c2513;
  --gold-mid: #6e5a1e;
  --gold-text: #e2b53e;
  --green-dark: #a3d296;
  --green-light: #1d2a1a;
  --green-mid: #5fa453;
  --green-text: #8cc67f;
  --green-deep: #335f2b;
  --green-line: #34502e;
  --green-faint: #1c211a;
  --orange-light: #33200f;
  --orange-line: #6b3a17;
  --orange-tint: #3a2312;
  --red: #f28b82;
  --red-fill: #d9483c;
  --red-light: #2b1614;
  --red-soft: #331816;
  --red-tint: #3d1b19;
  --red-line: #7a2c25;
  --free-bg: #24401f;
  --some-bg: #4a3c10;
  --busy-bg: #4f2b17;
  --day-ink: #eae6e0;

  --sidebar-bg: #1b1916;
  --sidebar-text: #c9dfc0;
  --sidebar-active-text: #eaf4e8;
  --sidebar-active-bg: rgba(125, 196, 113, 0.14);
  --sidebar-hover-bg: rgba(125, 196, 113, 0.07);
  --sidebar-border: #2c2925;
  --sidebar-logo-border: #36322d;

  --bg: #161412;
  --surface: #201e1b;
  --surface-2: #2a2723;
  --border: #38342f;
  --border-subtle: #2c2925;
  --scrim: rgba(0, 0, 0, 0.6);
  --nav-scrim: rgba(0, 0, 0, 0.5);
  --hover-tint: rgba(255, 255, 255, 0.08);
  --on-photo: rgba(32, 30, 27, 0.85);

  --text-primary: #eae6e0;
  --text-secondary: #b8b2a7;
  --text-muted: #8f897d;

  --accent-light: #33200f;

  --cal-event-dim: #38342f;
  --cal-event-dim-text: #8f897d;
  --tab-active-text: #e2b53e;
  --tag-bg: #1d2a1a;
  --tag-text: #a3d296;
  --on-fill: #ffffff;
  --chat-bg: #201e1b;
  --chat-border: #38342f;

  color-scheme: dark; /* scrollbars, date pickers and other controls the browser draws */
}
/* Popups and menus sit a step lighter than the cards on the page (dark mode shows height by lightness, not shadow) */
:root[data-theme='dark']
  :is(
    .modal,
    .mini-cal,
    .plan-pop,
    .tagbox-menu,
    .tp-pop,
    .kid-menu,
    .cal-show-list,
    .cal-search,
    .usuals-dd .regs,
    .place-sugg,
    .card-chip,
    .ta-row
  ) {
  --bg: #221f1c;
  --surface: #2a2723;
  --surface-2: #34302b;
  --border: #45403a;
  --border-subtle: #36322d;
}

/* ── Reset ── */
[hidden] {
  display: none !important;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text-primary);
}

/* ── App shell ── */
.app {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 24px;
  border-right: 1px solid var(--sidebar-border);
}
.sidebar-logo {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--sidebar-logo-border);
  margin-bottom: 10px;
  line-height: 1;
}
.logo-apres {
  font-size: 19px;
  font-weight: 800;
  color: var(--gold-dark);
  letter-spacing: -0.5px;
}
.logo-school {
  font-size: 19px;
  font-weight: 800;
  color: var(--green-text);
  letter-spacing: -0.5px;
}

.sidebar-nav {
  list-style: none;
  padding: 0 8px;
}
.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition:
    background 0.12s,
    color 0.12s;
  cursor: pointer;
}
.sidebar-nav li a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}
.sidebar-nav li.active a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}
.nav-icon {
  width: 17px;
  text-align: center;
  font-size: 14px;
  opacity: 0.75;
}
.sidebar-nav li.active .nav-icon {
  opacity: 1;
}

.sidebar-user {
  margin-top: auto;
  padding: 12px 14px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sidebar-text);
  font-size: 12px;
}
.sidebar-invite {
  margin: auto 8px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--sidebar-text);
  font:
    500 13px 'Inter',
    system-ui,
    sans-serif;
  text-align: left;
  cursor: pointer;
}
.sidebar-invite:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}
.sidebar-invite + .sidebar-user {
  margin-top: 4px;
}
.app-invite {
  width: 100%;
  justify-content: center;
}
.app-account-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
} /* me-row, family-row, invite: the sidebar's own rhythm (.sidebar-user) */
.share-link {
  display: flex;
  gap: 8px;
  margin: 10px 0 6px;
}
.share-link input {
  flex: 1;
  min-width: 0;
}
.sidebar-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ── Main ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Page header ── */
.page-header {
  padding: 14px 24px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.page-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.page-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  transition: background 0.1s;
}
.btn:hover {
  background: var(--surface-2);
}
.btn-primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.btn-primary:hover {
  background: var(--green-deep);
}
.btn-orange {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.btn-orange:hover {
  opacity: 0.9;
}

/* Tab bar */
.tab-bar {
  display: flex;
  position: relative;
}
.tab-bar:empty {
  display: none;
} /* Home has no tabs */
/* ── Home (home.js) ── */
.home {
  max-width: 760px;
}
.home-section {
  margin-bottom: 22px;
}
.home-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px 4px;
}
.home-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.home-row:hover {
  border-color: var(--green-mid);
}
.home-time {
  flex-shrink: 0;
  width: 64px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
}
.home-time b {
  color: var(--text-primary);
  font-weight: 600;
}
.home-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.home-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.home-title {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}
.home-sub i {
  color: var(--orange);
  font-style: normal;
  font-weight: 600;
}
.home-day {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 12px 2px 6px;
}
/* Coming Up: a card per day, like Pantry's groups; its events are rows divided by thin lines */
.home-daycard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 10px;
}
.home-daycard .home-day {
  margin: 0;
  padding: 9px 12px 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.home-daycard .home-swipe {
  margin: 0;
  border-radius: 0;
}
.home-daycard .home-swipe + .home-swipe {
  border-top: 1px solid var(--border-subtle);
}
.home-daycard .home-row {
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 8px 12px;
  align-items: flex-start;
}
.home-daycard .home-row:hover {
  background: var(--surface-2);
}
.home-row .home-dot {
  margin-top: 5px;
} /* by the title */
.home-line {
  font-size: 13px;
  line-height: 1.35;
}
.home-line .home-title {
  font-weight: 600;
  white-space: normal;
}
.home-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.home-row .home-sub {
  white-space: normal;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.home-day:first-of-type {
  margin-top: 0;
}
.home-notset {
  border: 0;
  background: none;
  padding: 0 1px;
  font: inherit;
  font-weight: 700;
  color: var(--orange);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* a dinner on Home: swipe right for Cooked, left for Skipped (the card slides over the label) */
.home-mswipe {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  touch-action: pan-y;
}
.home-mswipe .make-card {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease-out;
}
.home-mswipe.dragging .make-card {
  transition: none;
}
.ms-under {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  align-items: center;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
}
.ms-cooked {
  left: 0;
  right: 0;
  justify-content: flex-start;
  background: var(--green-light);
  color: var(--green-dark);
}
.ms-skip {
  left: 0;
  right: 0;
  justify-content: flex-end;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.home-mswipe.to-cooked .ms-cooked,
.home-mswipe.to-skip .ms-skip {
  display: flex;
}
.home-mswipe.armed.to-cooked .ms-cooked {
  background: var(--green);
  color: #fff;
}
.home-mswipe.armed.to-skip .ms-skip {
  background: var(--red-tint);
  color: var(--red);
}
.make-acts .ma-ico {
  display: none;
}
/* an event found in a forwarded email, waiting to be added (home.js) */
.found-card {
  align-items: flex-start;
  margin-bottom: 6px;
}
.found-card .home-dot {
  margin-top: 5px;
}
.found-card .home-title {
  white-space: normal;
}
.found-card .make-acts {
  flex-direction: row;
  gap: 6px;
}
.found-card .make-acts .btn {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
} /* not the phones' small square ✓ / ✕ */
/* phones: several buttons go under the text; one (Review) stays beside it */
@media (max-width: 640px) {
  .found-card:not(.one-act) {
    flex-wrap: wrap;
  }
  .found-card:not(.one-act) .make-acts {
    width: 100%;
    justify-content: flex-end;
  }
}
.found-card.one-act {
  align-items: center;
}
/* a change's "Not This Class?" sits under its text, not centered */
.found-card .found-rematch {
  align-self: flex-start;
  text-align: left;
  margin-top: 2px;
}
@media (hover: none) and (pointer: coarse) {
  /* phones: swipe, with small ✓ / ✕ as well */
  .make-acts .ma-txt {
    display: none;
  }
  .make-acts .ma-ico {
    display: inline;
  }
  .make-acts .btn {
    width: 34px;
    height: 30px;
    padding: 0;
    font-size: 14px;
  }
}
.home-swipe {
  position: relative;
  touch-action: pan-y;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
}
.home-swipe .home-row {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  transition: transform 0.18s ease-out;
}
.home-swipe.dragging .home-row {
  transition: none;
}
/* under a Coming up event while it's swiped: "👋 Hide", solid once it's far enough */
.hs-left {
  left: 0;
  right: 0;
  justify-content: flex-start;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.hs-right {
  left: 0;
  right: 0;
  justify-content: flex-end;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.home-swipe.to-right .hs-left,
.home-swipe.to-left .hs-right {
  display: flex;
}
.home-swipe.armed .hs-left,
.home-swipe.armed .hs-right {
  background: var(--text-secondary);
  color: var(--surface);
}
.home-open-acts {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  /* phones and the iOS app: the three buttons share the row's full width */
  .home-open-acts {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
  }
  .home-open-acts .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding-inline: 4px;
    white-space: nowrap;
  }
  .home-open-acts .plan-week-btn {
    flex-grow: 1.35;
  }
}
.home-x {
  display: none;
  z-index: 2;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
}
@media (hover: hover) {
  .home-swipe:hover .home-x {
    display: block;
  }
}
.home-hidden {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 2px;
}
.home-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.home-cooking {
  border-color: var(--green-mid);
  background: var(--green-light);
}
.home-timers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--green-dark);
}
.home-timer b {
  font-variant-numeric: tabular-nums;
}
/* Account → People: children below parents & caregivers */
.people-kids {
  margin-top: 22px;
}
.tab {
  padding: 8px 14px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.12s,
    border-color 0.12s;
  user-select: none;
}
.tab:hover {
  color: var(--text-primary);
}
.tab.active {
  color: var(--tab-active-text);
  font-weight: 600;
}
/* each tab is as wide as its name in bold, so picking one doesn't push the others over
   (the hidden bold copy, data-label from renderTabs, sits under the name with no height) */
.tab {
  display: inline-grid;
  justify-items: center;
}
.tab::after {
  content: attr(data-label) / '';
  font-weight: 600;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
/* the gold bar under the active tab (core.js placeTabInd): one element that slides, and follows a swipe */
.tab-ind {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background: var(--tab-active-border);
  pointer-events: none;
  transition:
    left 0.26s cubic-bezier(0.25, 0.8, 0.3, 1),
    width 0.26s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.tab-ind.still {
  transition: none;
}
/* phones: a bar of four tabs (Meals, Account) shares the width in equal columns; Classes' two stay as they are */
@media (max-width: 640px) {
  .tab-bar:has(> div:nth-of-type(4)) > .tab {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 2px;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tab-ind {
    transition: none;
  }
}

/* ── Main body ── */
.main-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── Calendar (weekly) ── */
.calendar-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-nav-btn {
  /* ‹ and ›, either side of the dates: no border, a bigger arrow */
  width: 24px;
  height: 28px;
  border-radius: 6px;
  padding: 0 0 2px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.cal-nav-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.cal-view-btns {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cal-view-btn {
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--border);
  font-family: inherit;
}
.cal-view-btn:last-child {
  border-right: none;
}
.cal-view-btn.active {
  background: var(--surface-2);
  color: var(--text-primary);
  font-weight: 600;
}
.cal-today-btn:disabled {
  opacity: 0.5;
  cursor: default;
  background: var(--surface);
}
.cal-today-btn {
  padding: 3px 11px;
  font-size: 11.5px;
  height: 24px;
  margin-right: 4px;
}
.cal-range-wrap {
  position: relative;
  min-width: 0;
}
.cal-range-btn {
  width: 100%;
  justify-content: center;
}
/* ↻ refresh calendars (calSyncNow in people.js), in the calendar's empty top-left
   corner (month view: the right of the first day's date line, which events never use): plain icon, no background; spins while working,
   then a green check for 2 seconds (orange if a calendar couldn't be reached) */
.week-day-header-corner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.week-day-header.opens {
  cursor: pointer;
}
/* "‹ Week" in a day opened from the week: on the left of the heading, which keeps its height */
.week-day-header:has(> .day-back) {
  position: relative;
}
#cal-container .week-day-header > .day-back {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green-text);
  line-height: 1;
}
.cal-cell:has(> .cal-sync) {
  position: relative;
}
.cal-cell > .cal-sync {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 22px;
  height: 22px;
}
.cal-sync {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.cal-sync:hover:not(.busy):not(.ok):not(.fail) {
  color: var(--text-primary);
}
@media (hover: none) {
  .cal-sync:hover:not(.busy):not(.ok):not(.fail) {
    color: var(--text-muted);
  }
} /* a phone keeps "hover" after a tap: the icon would stay dark */
.cal-sync .cs-check {
  display: none;
}
.cal-sync.busy .cs-arrow {
  animation: spin 0.8s linear infinite;
}
.cal-sync.ok {
  color: var(--green-text);
}
.cal-sync.ok .cs-arrow {
  display: none;
}
.cal-sync.ok .cs-check {
  display: block;
  animation: pop 0.25s ease-out;
}
.cal-sync.fail {
  color: #c26a1b;
}
.cal-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font:
    600 13.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-primary);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cal-range-btn:hover,
.cal-range-btn[aria-expanded='true'] {
  background: var(--surface-2);
  border-color: var(--border);
}
.cal-range-btn svg {
  color: var(--text-muted);
  transition: transform 0.15s;
}
.cal-range-btn[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.mini-cal {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 244px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.16);
  padding: 10px 10px 8px;
}
.mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mc-title {
  font-size: 13px;
  font-weight: 700;
}
.mc-arrows {
  display: flex;
  gap: 2px;
}
/* .mc-arrow: the same ‹ › as the calendar's bar (.cal-nav-btn) */
.mc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}
.mc-dow {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
}
.mc-day {
  height: 30px;
  border: none;
  background: none;
  font:
    500 12px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.mc-day:hover {
  background: var(--surface-2);
}
.mc-day.out {
  color: var(--text-muted);
  opacity: 0.55;
}
.mc-day.in-range {
  background: var(--green-light);
  border-radius: 0;
}
.mc-day.in-range.range-start {
  border-radius: 15px 0 0 15px;
}
.mc-day.in-range.range-end {
  border-radius: 0 15px 15px 0;
}
.mc-day.selected {
  background: var(--green);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}
.mc-day.today:not(.selected) {
  color: var(--gold-dark);
  font-weight: 800;
}
.mc-day.today::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold);
}
.mc-day.has-ev::before {
  content: '';
  position: absolute;
  right: 5px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.8;
}
.mc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  margin-top: 6px;
  padding-top: 7px;
}
.mc-link {
  background: none;
  border: none;
  font:
    600 11.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--green-text);
  cursor: pointer;
  padding: 3px 4px;
}
.mc-link:hover {
  text-decoration: underline;
}
.mc-legend {
  font-size: 10px;
  color: var(--text-muted);
}
.cal-cell .cal-date {
  cursor: pointer;
}
.cal-cell .cal-date:hover {
  background: var(--surface-2);
}

/* Weekly grid */
.week-grid {
  display: flex;
  overflow: hidden;
  height: 200px;
}
.week-time-col {
  width: var(--cal-week-time-w);
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
}
.week-days-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.week-days-inner {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}
.week-day-header-row {
  display: grid;
  grid-template-columns: var(--cal-week-time-w) repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.week-day-header {
  padding: 5px 4px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.week-day-header span {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-top: 1px;
}
.week-day-header.today span {
  color: var(--cal-today);
}
.week-day-header-corner {
  width: var(--cal-week-time-w);
}

#cal-container {
  height: var(--cal-h, 200px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.week-body {
  display: flex;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.month-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 6px;
}
.cal-resizer {
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  touch-action: none;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface);
  outline: none;
}
.cal-resizer span {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transition:
    background 0.15s,
    width 0.15s;
}
/* A crowded header wider than a phone (the iPad app, a narrow window: cal-tight, fitCalHeader in calendar.js): Month/Week/
   Day and Color move into the "View" menu, as on phones, so the dates keep their one line */
.cal-header.cal-tight {
  position: relative;
}
.cal-header.cal-tight > .cal-view-toggle {
  display: inline-flex;
  order: 2;
}
.cal-header.cal-tight > .cal-collapse {
  order: 3;
}
.cal-header.cal-tight .cal-right {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  right: 12px;
  z-index: 60;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.18);
}
.cal-header.cal-tight.view-open .cal-right {
  display: flex;
}
.cal-header.cal-tight .cal-right .cal-view-btns {
  width: 100%;
}
.cal-header.cal-tight .cal-right .cal-view-btn,
.cal-header.cal-tight .cal-right .cal-color-btn {
  flex: 1;
  padding: 7px 12px;
  font-size: 13px;
}
.cal-header.cal-tight .cal-color-wrap {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.cal-header.cal-tight .cal-show-btn {
  width: 100%;
  justify-content: center;
  height: 32px;
  font-size: 13px;
}
.cal-header.cal-tight .cal-show-list {
  position: static;
  box-shadow: none;
  border: none;
  padding: 4px 0 0;
  min-width: 0;
  max-width: none;
  max-height: 45vh;
}
/* phones and tablets: a finger-sized grab area (about 35px) around the thin bar, which looks the same */
@media (pointer: coarse) {
  .cal-resizer {
    position: relative;
    z-index: 3;
  }
  .cal-resizer::before {
    content: '';
    position: absolute;
    inset: -12px 0;
  }
}
.cal-resizer:hover span,
.cal-resizer:focus-visible span,
.cal-resizer.dragging span {
  background: var(--green-mid);
  width: 48px;
}
body.resizing,
body.resizing * {
  cursor: row-resize !important;
  user-select: none;
}
/* the size bar let go below the smallest size: spring back, or hide (calendar.js) */
#cal-container.cal-snap {
  transition:
    height 0.35s cubic-bezier(0.3, 1.35, 0.5, 1),
    opacity 0.2s;
}
/* Swiping between weeks: last week, this one and next side by side (gestures.js) */
.cal-track {
  display: flex;
  width: 300%;
  flex: 1;
  min-height: 0;
  will-change: transform;
}
/* the Activities list by person (renderEnrolled): the filter scrolls sideways when it's wider than a phone */
.enrolled-who-row {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 2px;
}
/* phones and the iOS app: the filter centered (it starts at the left when wider than the screen) */
@media (max-width: 640px) {
  .enrolled-who-row {
    display: flex;
  }
  .enrolled-who-row > .enrolled-who {
    margin: 0 auto;
    flex-shrink: 0;
  }
}
body.app-embedded .enrolled-list .add-own-row {
  justify-content: center;
}
body.app-embedded .enrolled-who-row {
  display: flex;
}
body.app-embedded .enrolled-who-row > .enrolled-who {
  margin: 0 auto;
  flex-shrink: 0;
}
.enrolled-who-row::-webkit-scrollbar {
  display: none;
}
.enrolled-who button {
  white-space: nowrap;
}
.section-heading.enrolled-head {
  margin: 10px 0 0;
}
.enrolled-who-row + .section-heading.enrolled-head {
  margin-top: 2px;
}
/* a person's activities on their card in People (personActivitiesHtml): full-width rows, name and when */
.person-acts {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.person-act {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.person-act:last-child {
  border-bottom: 0;
}
.person-act .class-dot {
  flex-shrink: 0;
}
.person-act-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.person-act-when {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.cal-pane {
  flex: 0 0 calc(100% / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* week and day view: the track starts after the hours, each pane shows only its days,
   and the hours and ↻ corner in front (.cal-fixed-times) don't move */
#cal-container.cal-keep-times {
  position: relative;
}
.cal-keep-times .cal-track {
  margin-left: var(--cal-week-time-w);
  width: calc(3 * (100% - var(--cal-week-time-w)));
}
.cal-keep-times .cal-pane {
  overflow: hidden;
}
.cal-keep-times .cal-pane > * {
  margin-left: calc(-1 * var(--cal-week-time-w));
  width: calc(100% + var(--cal-week-time-w));
}
.cal-fixed-times {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--cal-week-time-w);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.cal-fixed-times .week-day-header-corner {
  flex-shrink: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
}
.cal-fixed-hours {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media (hover: none) and (pointer: coarse) {
  #cal-container {
    touch-action: pan-y;
  }
  /* press and hold is ours: no text selection or iPhone link menu */
  .week-event,
  .cal-event {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}
.week-event.held,
.cal-event.held {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(20, 26, 12, 0.28);
  z-index: 5;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.drag-ghost {
  z-index: 500;
  pointer-events: none;
  opacity: 0.92;
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(20, 26, 12, 0.32);
}
@media (prefers-reduced-motion: reduce) {
  .cook-slide,
  .cook-slide.enter-right,
  .cook-slide.enter-left,
  #cal-container.cal-snap {
    transition: none;
    animation: none;
  }
}
.week-time-labels {
  width: var(--cal-week-time-w);
  flex-shrink: 0;
}
.week-time-label {
  height: var(--cal-hour-h);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: right;
  padding: 0 8px 0 0;
  position: relative;
  top: -6px;
  border-right: 1px solid var(--border-subtle);
}
.week-columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.week-col {
  border-right: 1px solid var(--border-subtle);
  position: relative;
}
.week-col:last-child {
  border-right: none;
}
.hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border-subtle);
}
.week-event {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 9.5px;
  font-weight: 600;
  background: var(--cal-event);
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.15s;
}
.week-event.orange {
  background: var(--orange);
}
.week-event.gold {
  background: var(--gold);
}
.week-event.purple {
  background: #7c3aed;
}
.week-event.teal {
  background: #2a9d8f;
}
.week-event.dim {
  opacity: 0.38;
} /* halftone: the page's other kind of event, in its own color (gray is for past: .past) */
/* Imported from an external calendar: kept in the owner's color (unlike .dim,
   which desaturates) but visibly translucent/textured so it never reads as a
   real, editable AprèsSchool event. */
.week-event.takeout {
  background: #b45309;
}
.week-event.imported,
.cal-event.imported {
  opacity: 0.55;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0 4px,
    transparent 4px 9px
  );
}
.week-event.imported:hover {
  opacity: 0.8;
  filter: none;
}
.week-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.week-event-time {
  font-size: 8.5px;
  opacity: 0.8;
  font-weight: 400;
}

/* ── Scrollable content area ── */
.content-scroll {
  flex: 1;
  overflow-y: auto;
}
.page-content {
  display: none;
}
.page-content.active {
  display: block;
}

/* ── Content sections ── */
.content-section {
  padding: 18px 24px;
}
/* Swiping between tabs (layout.js, tabSlideTo): the tab coming in sits beside this one and both follow the finger */
.content-scroll.tab-sliding {
  overflow-x: hidden;
}
.tab-sliding .page-content.active {
  position: relative;
}
.tab-sliding .content-section {
  will-change: transform;
}
.content-section.tab-in {
  position: absolute;
  left: 0;
  right: 0;
}

/* ── Forms ── */
.account-form {
  max-width: 500px;
}
.form-row {
  margin-bottom: 14px;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-row-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}
.form-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.form-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s;
}
.form-input:focus {
  border-color: var(--green);
  box-shadow: inset 0 0 0 0.5px var(--green);
}
select.form-input {
  appearance: auto;
}
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
/* Profile: two fields to a row where they fit; tight while just viewing */
#profile-form .form-row {
  margin-bottom: 10px;
}
#profile-form .section-divider {
  margin: 12px 0 14px;
}
#profile-form .pf-street {
  grid-template-columns: 2fr 1fr;
}
#profile-form.viewing .form-row {
  margin-bottom: 6px;
}
#profile-form.viewing .form-label {
  margin-bottom: 1px;
}
#profile-form.viewing .form-input {
  padding-top: 1px;
  padding-bottom: 1px;
}
#profile-form.viewing .section-heading {
  margin-bottom: 6px;
}
.section-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.pref-row:last-child {
  border-bottom: none;
}
/* a new section right after a list of rows (Profile: Help, then Data & Privacy): room above its heading, no line under the last row */
.pref-row:has(+ .section-heading) {
  border-bottom: none;
}
.pref-row + .section-heading {
  margin-top: 28px;
}
.pref-label {
  font-size: 13px;
}
.pref-sublabel {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.pref-row-col {
  display: flex;
  flex-direction: column;
}
/* Account → Profile: confirming the alternate email */
.alt-confirm-row {
  display: flex;
  gap: 8px;
  margin: 6px 0 4px;
}
.alt-confirm-row .form-input,
#profile-form.viewing .alt-confirm-row .form-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px; /* a box to type in, though the form around it is in view mode */
  border-color: var(--border);
  background: var(--surface);
}
.pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.pill.full {
  background: var(--green-light);
  color: var(--green-dark);
}
.pill.view {
  background: var(--gold-light);
  color: var(--gold-dark);
}
.pill.none {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.pill.orange {
  background: var(--orange-light);
  color: var(--orange);
}

/* Connection cards */
.connections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.conn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.conn-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.conn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.conn-name {
  font-size: 13px;
  font-weight: 600;
}
.conn-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.conn-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.conn-connected {
  font-size: 11px;
  color: var(--green-text);
  font-weight: 600;
}
.conn-unconnected {
  font-size: 11px;
  color: var(--text-muted);
}
.conn-warn {
  font-size: 11px;
  color: var(--orange);
  font-weight: 600;
}
/* Families: sidebar picker, limited-access notice, access section on a person's card */
.family-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px;
}
.family-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 18px;
}
.premium-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--gold-light);
  border: 1px solid var(--gold-mid);
  border-radius: 20px;
  padding: 1px 7px;
}
.premium-usage {
  margin-bottom: 18px;
}
#premium-usage-app {
  margin: 2px 0 12px;
}
#premium-usage-app .usage-bars {
  margin-top: 8px;
}
.premium-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.premium-slot .premium-usage-btn {
  font-size: 11px;
  padding: 0;
}
.usage-bars {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.usage-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
}
.usage-num {
  color: var(--text-muted);
  font-size: 11.5px;
}
.premium-usage .progress-bar-track {
  margin-top: 4px;
}
.progress-bar-fill.usage-low {
  background: var(--gold-deep);
}
.progress-bar-fill.usage-full {
  background: var(--red-fill);
}
.premium-subscribe {
  font:
    700 10.5px 'Inter',
    system-ui,
    sans-serif;
  color: #fff;
  background: var(--gold-deep);
  border: 0;
  border-radius: 20px;
  padding: 3px 9px;
  cursor: pointer;
}
.premium-subscribe:hover {
  filter: brightness(1.08);
}
.premium-list {
  margin: 8px 0 10px 18px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
}
.premium-buy {
  display: grid;
  gap: 8px;
  margin: 4px 0 6px;
}
.premium-buy-btn {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.premium-trial {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.premium-fine {
  font-size: 11.5px;
}
.premium-compare {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
}
.family-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.family-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  min-width: 0;
}
.family-name-row .family-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.premium-badge-slot {
  display: inline-flex;
  flex-shrink: 0;
}
.premium-badge-slot:empty {
  display: none;
}
.family-name-row .family-select {
  flex: 1;
  min-width: 0;
}
/* Who Is This? on an invitation (family.js inviteWhoHtml) */
.who-pick {
  border: 0;
  padding: 0;
  margin: 10px 0 0;
  min-width: 0;
}
.who-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.who-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.who-opt.on {
  border-color: var(--green);
  background: var(--green-light);
}
.who-opt input,
.who-follow input {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--green);
}
.who-follow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
/* Rename · + New Family, under the family's name */
.family-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.family-select {
  width: 100%;
  font:
    600 12.5px 'Inter',
    system-ui,
    sans-serif;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--green-dark);
  text-decoration: underline;
  cursor: pointer;
  flex-shrink: 0;
}
.access-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--gold-light);
  color: var(--gold-dark);
  font-size: 12.5px;
  line-height: 1.45;
}
.access-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  font-size: 12.5px;
}
.access-grid > span:not(.pill) {
  white-space: nowrap;
}
.access-grid select,
.access-grid .pill {
  justify-self: start;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.access-who {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.invite-link {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.invite-link input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}
.invite-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.invite-card ul {
  margin: 6px 0 12px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.orders-top {
  margin-bottom: 16px;
}
.ao-email {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.link-btn.spinning {
  opacity: 0.5;
}
.email-copy {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
}
.copied-note {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 5;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--green-light);
  border-radius: 8px;
  padding: 3px 8px;
}
.billing-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 6px 0 2px;
}
.warn-text {
  color: var(--orange);
  font-weight: 600;
}
.gcal-card {
  grid-column: 1 / -1;
}
.gcal-card .conn-status {
  flex-wrap: wrap;
  gap: 8px;
}
.gcal-card .conn-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gcal-note {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.get-started {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 16px;
}
.gs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.gs-title {
  font-size: 16px;
  font-weight: 700;
}
.gs-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.gs-bar {
  height: 6px;
  background: var(--border-subtle);
  border-radius: 3px;
  margin: 12px 0 8px;
  overflow: hidden;
}
.gs-bar span {
  display: block;
  height: 100%;
  background: var(--green-deep);
  border-radius: 3px;
  transition: width 0.3s;
}
.gs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gs-step {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
}
.gs-step:first-child {
  border-top: 0;
}
.gs-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.gs-step.done .gs-check {
  background: var(--green-deep);
  border-color: var(--green-deep);
}
.gs-step.next .gs-check {
  border-color: var(--green-dark);
}
.gs-step.done .gs-text b {
  color: var(--text-muted);
  font-weight: 600;
}
.gs-text {
  min-width: 0;
}
.gs-why {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.gs-step.done .gs-why {
  display: none;
}
/* the optional steps' heading, like the page's section headings */
.gs-more {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 16px 0 6px;
  border-top: 1px solid var(--border-subtle);
}
.gs-more + .gs-step {
  border-top: 0;
}
.gs-done {
  font-size: 11.5px;
  color: var(--green-dark);
  font-weight: 600;
}
.gs-setting-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.import-google {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--border, #e6e4dc);
  border-radius: 10px;
  font-size: 13px;
}
.gpick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gpick-row {
  display: grid;
  grid-template-columns: auto 12px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e6e4dc);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.gpick-row.done {
  grid-template-columns: 12px 1fr auto;
  cursor: default;
  opacity: 0.75;
}
.gpick-group {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gpick-group:first-child {
  margin-top: 0;
}
.gpick-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.gpick-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.gpick-row select {
  max-width: 140px;
  font: inherit;
  font-size: 12px;
}
@media (max-width: 520px) {
  .gpick-row {
    grid-template-columns: auto 12px 1fr;
  }
  .gpick-row select {
    grid-column: 1 / -1;
    max-width: none;
  }
}
.fwd-steps {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fwd-steps .link-btn {
  font-size: inherit;
}
.fwd-steps code {
  font-size: 11px;
  background: var(--bg, #f6f6f3);
  padding: 1px 4px;
  border-radius: 4px;
  word-break: break-word;
}
.fwd-steps a.btn {
  text-decoration: none;
}
.fwd-code {
  font-size: 14px;
  letter-spacing: 0.04em;
}
.fwd-done {
  color: var(--green-dark);
  font-weight: 600;
}
.fwd-wait {
  color: var(--text-muted);
}
.fwd-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 6px;
}
.fwd-choice label {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.fwd-choice input {
  margin-top: 3px;
}
/* the email apps: titled like Settings' groups; open, their steps sit under the title */
.fwd-platform {
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
}
.fwd-platform:first-of-type {
  margin-top: 12px;
}
.fwd-platform[open] {
  padding-bottom: 12px;
}
.fwd-platform > summary {
  padding: 12px 0;
}
.fwd-platform > .gcal-note {
  margin: 2px 0 8px;
}
.fwd-manual {
  margin-top: 6px;
  color: var(--text-muted);
}
.fwd-manual summary {
  cursor: pointer;
}

/* ── People page ──
   Flexbox, not grid: a sticky child's "don't scroll past me" boundary is the
   grid AREA in CSS Grid (the full row height, ignoring align-self) but the
   actual shrunk box in Flexbox — grid made the sidebar drift near the bottom
   of a long detail panel instead of staying properly pinned. */
.people-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
/* Account pages are settings, not scheduling: no calendar there */
body[data-page='account'] .calendar-section,
body[data-page='account'] .cal-resizer {
  display: none;
}
/* People: one dropdown of everyone with a green + beside it, then the person's card(s) */
.people-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin-bottom: 14px;
}
.people-pick .people-select {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  width: auto;
}
.people-pick .people-add {
  min-width: var(--ctl-h);
  width: var(--ctl-h);
  height: var(--ctl-h);
  padding: 0;
  justify-content: center;
  flex: none;
}
#account-panel-people .detail-card[hidden] {
  display: none;
}
#account-panel-people .detail-card + .detail-card {
  margin-top: 12px;
}
/* People: on phones, a dropdown replaces the list (see the 640px block) */
.people-select {
  display: none;
  margin: 8px 12px 10px;
  width: calc(100% - 24px);
}
.people-layout > div:first-child {
  flex: 0 0 240px;
}
.people-layout > .detail-card {
  flex: 1 1 auto;
  min-width: 0;
}
/* The list (children or caregivers) stays put while a long detail/edit panel
   on the right scrolls past it — desktop only; on the narrow layout the two
   columns stack, where "pinned" would just mean it covers the page below it. */
@media (min-width: 641px) {
  .people-layout > div:first-child {
    position: sticky;
    top: 0;
  }
}
.people-selector {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.people-selector:last-child {
  margin-bottom: 0;
}
.people-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-2);
}
.people-selector-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.icon-btn {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--green-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.icon-btn:hover {
  background: var(--green-light);
}
.people-list {
  list-style: none;
}
.people-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s;
}
.people-item:last-child {
  border-bottom: none;
}
.people-item:hover {
  background: var(--surface-2);
}
.people-item.selected {
  background: var(--gold-light);
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.avatar.gold {
  background: var(--gold-deep);
}
.avatar.orange {
  background: var(--orange);
}
.avatar.teal {
  background: #2a9d8f;
}
.person-name {
  font-size: 13px;
  font-weight: 500;
}
.person-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.role-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gold-light);
  color: var(--gold-dark);
}

.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.detail-card-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.avatar-lg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.avatar-lg.gold {
  background: var(--gold-deep);
}
.detail-name {
  font-size: 14px;
  font-weight: 700;
}
.detail-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.detail-body {
  padding: 12px 16px;
}
.field-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--tag-bg);
  color: var(--tag-text);
}
.tag.gold {
  background: var(--gold-light);
  color: var(--gold-dark);
}
.tag.orange {
  background: var(--orange-light);
  color: var(--orange);
}
.field-group {
  margin-bottom: 14px;
}

/* ── Classes page ── */
.classes-layout {
  display: block;
}
/* Enrolled: one small card per class and child; the details open in a popup */
.enrolled-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
}
.enrolled-list .add-own-row,
.enrolled-list .enrolled-who-row,
.enrolled-list .enrolled-head {
  grid-column: 1 / -1;
}
/* the add buttons on top of the list */
.enrolled-list .add-own-row {
  margin: 0 0 6px;
}
.enrolled-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 10px;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.1s;
  min-width: 0;
}
.enrolled-item:hover {
  background: var(--surface-2);
}
.enrolled-item:focus-visible,
.week-event:focus-visible,
.cal-event:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.week-event:hover:not(.dim) {
  filter: brightness(1.08);
}
.week-event.dim:hover {
  opacity: 0.8;
}
.session-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--gold-light);
  border: 1px solid var(--gold-mid);
  border-radius: 9px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
}
.session-banner b {
  font-weight: 700;
}
.session-banner .sb-actions {
  display: flex;
  gap: 6px;
}
.session-banner .btn {
  padding: 4px 10px;
  font-size: 11.5px;
}
.class-detail.flash {
  animation: flash 1.2s ease;
}
.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.class-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.enrolled-item-info {
  min-width: 0;
}
.enrolled-dash {
  color: var(--text-muted);
  font-weight: 400;
}
.cd-modal {
  position: relative;
}
.cd-modal .cd-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
.modal .class-detail {
  border: none;
  background: none;
  padding: 20px 22px 22px;
}
.modal .class-detail-title {
  padding-right: 34px;
}
.modal .info-grid {
  grid-template-columns: 1fr 1fr;
}
.enrolled-item-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enrolled-item-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.class-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.class-detail-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 3px;
}
.class-detail-meta {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.enrolled-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--green-light);
  color: var(--green-dark);
  margin-bottom: 12px;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.info-item {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 11px;
}
.info-item-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.info-item-value {
  font-size: 12.5px;
  font-weight: 500;
}
.progress-bar-track {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.progress-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
}

/* ── Meals page ── */
/* Cookbook and Orders share one layout, "find" on the left and "do" on the right, so every
   button sits in the same place on both: search · a fixed-width filter slot (the recipes drop-down: All, ♥ Favorites
   or a cuisine) · + Add (green, last). Plan the Menu, Mix It Up and Saved Weeks are the calendar's ✨ (planweek.js) */
.cookbook-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: 'q fav add';
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.cookbook-search[hidden] {
  display: none;
}
.cookbook-search > .search-box {
  grid-area: q;
  min-width: 0;
}
.cookbook-search > .fav-only-btn,
.cookbook-search > .cookbook-filter {
  grid-area: fav;
}
.cookbook-search .cookbook-filter {
  max-width: 190px;
  border-radius: 6px;
} /* a rounded rectangle like the buttons beside it */
@media (max-width: 640px) {
  .cookbook-search .cookbook-filter {
    width: 118px;
  } /* as wide as "All Recipes": a long cuisine in the list can't squeeze the search box */
}
.cookbook-search > .add-recipe-btn {
  grid-area: add;
}
.add-recipe-btn {
  min-width: 112px;
  justify-content: center;
} /* Add Recipe and Add Order the same width */
.fav-only-btn {
  white-space: nowrap;
  justify-content: center;
}
/* the main boxes and buttons on Cookbook, Orders, Pantry and Groceries: one height */
.cookbook-search .search-input,
.cookbook-search .btn,
.cookbook-search select,
.pantry-add .search-input,
.pantry-add .btn,
#pantry-filter,
.groc-add .search-input,
.usuals-btn,
.groc-send .btn,
.reg-add .form-input,
.reg-add .btn {
  height: var(--ctl-h);
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.fav-only-btn .lbl-short {
  display: none;
}
@media (max-width: 640px) {
  /* phones: "♥ Favorites", and a little tighter, so the three buttons share one row */
  .fav-only-btn .lbl-long {
    display: none;
  }
  .fav-only-btn .lbl-short {
    display: inline;
  }
  .cookbook-search .btn {
    padding-left: 9px;
    padding-right: 9px;
  }
  /* the pinned bar is one row: search, ♥ (or the recipes drop-down) and + */
  .cookbook-search {
    gap: 10px 7px;
  }
  .cookbook-search .cookbook-filter {
    max-width: 118px;
  }
  /* phones: Add is just its +, Favorites just the heart (their names are in aria-label and title) */
  .cookbook-search .add-recipe-btn,
  .cookbook-search .fav-only-btn {
    min-width: var(--ctl-h);
    width: var(--ctl-h);
    padding: 0;
  }
  .add-recipe-btn .btn-text {
    display: none;
  }
  .add-recipe-btn svg {
    width: 15px;
    height: 15px;
  }
  .cookbook-search .fav-only-btn {
    font-size: 16px;
  }
}
.fav-only-btn.on {
  background: var(--red-soft);
  border-color: var(--red-fill);
  color: var(--red-fill);
}
.rv-new {
  background: var(--green-light);
  color: var(--green-dark);
}
.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
/* green, like the app's other highlights: gold means Premium; 1.5px like the drop-downs' (the extra half inside, so
   nothing moves) */
.search-input:focus {
  border-color: var(--green);
  box-shadow: inset 0 0 0 0.5px var(--green);
}
/* the ✕ that clears a search (addSearchClears in layout.js), only while there's text */
.search-box {
  position: relative;
  display: block;
  min-width: 0;
}
.search-box .search-input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 34px;
}
.search-input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
}
.search-clear:hover {
  color: var(--text-primary);
}
.search-input:placeholder-shown + .search-clear {
  display: none;
}
/* empty, there's no ✕: its room goes back to the placeholder */
.search-box .search-input:placeholder-shown {
  padding-right: 12px;
}
/* Cookbook and Orders: a magnifying glass in the box stands for "Search" (the placeholder just says what) */
.cookbook-search .search-box::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M9.2 9.2 12.5 12.5' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M9.2 9.2 12.5 12.5' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
}
.cookbook-search .search-box .search-input {
  padding-left: 32px;
}
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.recipe-card {
  position: relative; /* its "+ Plan" button sits in its corner, draggable or not */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.recipe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.recipe-thumb {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
}
.recipe-thumb.pasta {
  background: linear-gradient(135deg, #fff3cd, #ffe08a);
}
.recipe-thumb.chicken {
  background: linear-gradient(135deg, #ffe9d0, #ffcda0);
}
.recipe-thumb.salad {
  background: linear-gradient(135deg, #d4edda, #a8d8b0);
}
.recipe-thumb.soup {
  background: linear-gradient(135deg, #fff0cc, #ffd980);
}
.recipe-thumb.tacos {
  background: linear-gradient(135deg, #fce4ec, #f48fb1);
}
.recipe-thumb.pancakes {
  background: linear-gradient(135deg, #fff8e1, #ffe082);
}
.recipe-info {
  padding: 8px 10px;
}
/* ── Meal planning: drag + picker ── */
.recipe-card[draggable='true'] {
  cursor: grab;
  position: relative;
}
.recipe-card.dragging {
  opacity: 0.45;
  transform: none;
}
.recipe-plan-btn {
  position: absolute;
  left: 6px;
  top: 6px;
  font:
    600 10.5px/1 'Inter',
    system-ui,
    sans-serif;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 5px 9px;
  cursor: pointer;
}
.recipe-plan-btn:hover {
  background: var(--green-deep);
}
.meal-hint .link-btn {
  font-size: inherit;
}
/* a tip with its own button beside Got It (Home: Premium ended) */
.meal-hint .hint-acts {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.meal-hint .hint-acts .hint-ok {
  margin-left: 0;
}
.meal-hint .hint-ok {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 12px;
  font-size: 12px;
}
.meal-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--gold-light);
  border: 1px dashed var(--gold-mid);
  border-radius: 8px;
  padding: 8px 12px;
}
.week-col.drop-ok {
  background: rgba(58, 110, 50, 0.06);
}
/* over already: grayed, still readable and tappable */
.week-event.past,
.cal-event.past {
  filter: grayscale(0.85);
  opacity: 0.5;
}
/* the time now, across today's column (calendar.js, calNowTick) */
.now-line {
  position: absolute;
  left: -1px;
  right: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--green);
  z-index: 4;
  pointer-events: none;
}
.now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}
.drop-ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 4px;
  border: 2px dashed var(--green);
  background: rgba(58, 110, 50, 0.12);
  font-size: 9px;
  font-weight: 600;
  color: var(--green-dark);
  padding: 2px 4px;
  pointer-events: none;
}
.cal-cell.drop-ok {
  outline: 2px dashed var(--green);
  outline-offset: -2px;
}
.week-event .ev-x {
  position: absolute;
  top: 1px;
  right: 3px;
  background: none;
  border: none;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.75;
  line-height: 1;
}
.week-event .ev-x:hover {
  opacity: 1;
}
.week-event.just-added {
  animation: pop 0.5s ease;
}
@keyframes pop {
  0% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

.plan-pop {
  position: fixed;
  z-index: 50;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.18);
  padding: 14px;
}
.plan-pop h4 {
  font-size: 13px;
  margin-bottom: 10px;
}
.plan-pop .lbl {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 10px 0 6px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.chip {
  font:
    500 11.5px 'Inter',
    system-ui,
    sans-serif;
  padding: 5px 9px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.chip.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.chip small {
  opacity: 0.7;
  font-weight: 400;
}
.plan-pop .row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 300; /* above popups (.modal-backdrop 200), so a note's Undo can be tapped while one is open */
  width: max-content;
  max-width: calc(100vw - 32px);
  text-align: center;
  background: var(--green-deep);
  color: #fff;
  font-size: 12.5px;
  padding: 9px 16px;
  border-radius: 20px;
  transition: opacity 0.18s ease;
}
.toast.leaving {
  opacity: 0;
}
.toast.passive {
  pointer-events: none;
} /* a note with nothing to tap: taps reach what's under it */
/* Undo in a message: room for a thumb, without making the bubble taller */
.toast-act {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  padding: 10px 8px;
  margin: -10px -8px -10px 2px;
  cursor: pointer;
}
body.app-embedded .toast {
  bottom: calc(96px + env(safe-area-inset-bottom));
} /* above the iOS app's tab bar */
.recipe-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.3;
}
.recipe-meta {
  font-size: 10.5px;
  color: var(--text-muted);
}
.recipe-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--gold);
  color: #fff;
}
.browse-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}
.category-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 24px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  color: var(--text-primary);
}
.category-chip:hover {
  border-color: var(--green);
  color: var(--green-text);
}
.category-chip.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.chip-icon {
  font-size: 14px;
}
.search-results-label {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 8px 0 12px;
}
.result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.result-item:hover {
  background: var(--surface-2);
}
.result-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.result-thumb.pasta {
  background: linear-gradient(135deg, #fff3cd, #ffe08a);
}
.result-thumb.chicken {
  background: linear-gradient(135deg, #ffe9d0, #ffcda0);
}
.result-thumb.salad {
  background: linear-gradient(135deg, #d4edda, #a8d8b0);
}
.result-name {
  font-size: 13.5px;
  font-weight: 600;
}
.result-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.result-action {
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Pantry ── */
.pantry-top {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pantry-add {
  display: flex;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
}
.pantry-add .search-input {
  flex: 1;
}
.pantry-add .search-input {
  height: 40px;
  font-size: 13.5px;
  min-width: 0;
}
.pantry-scan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
} /* gold like Plan the Menu: both are Premium */
/* under the places: how many ran out, and a link to them (Restock on Groceries) */
.pantry-ranout {
  padding: 4px 4px 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.pantry-ranout .mc-link {
  font-size: 12.5px;
}
/* Groceries' Restock pills: Pantry's Quick add row, under the add box */
.groc-restock {
  margin: 2px 0 12px;
}
.pantry-scan-btn:hover {
  background: var(--gold-mid);
}
.pantry-staples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.staples-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-right: 2px;
} /* like the section labels ("58 ITEMS", aisles) */
.pantry-find-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.find-search.pantry-find {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  margin-bottom: 0;
}
.pantry-expand {
  margin-left: auto;
  flex-shrink: 0;
}
.pantry-expand:empty {
  display: none;
}
.pantry-expand .expand-all {
  padding: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .pantry-expand .expand-all {
    text-align: center;
    line-height: 1.3;
  }
  .pantry-expand .expand-all span {
    display: block;
  }
}
/* phones: Quick add is one row you swipe along, not two rows of chips */
@media (max-width: 640px) {
  .pantry-staples {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-right: -16px;
    padding-right: 16px;
  }
  .pantry-staples::-webkit-scrollbar {
    display: none;
  }
  .pantry-staples > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
.staple {
  font:
    500 11.5px 'Inter',
    system-ui,
    sans-serif;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
/* only where there's a real pointer: on a phone, a swipe along Quick add would leave a chip looking hovered */
@media (hover: hover) {
  .staple:hover {
    border-style: solid;
    border-color: var(--green);
    color: var(--green-dark);
  }
}
.pantry-make {
  margin-bottom: 18px;
}
.pantry-make:empty {
  display: none;
}
.make-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.make-card {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.make-card:hover {
  border-color: var(--green-mid);
}
.make-open {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
}
.make-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  position: relative;
  overflow: hidden;
}
.make-acts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.make-acts .btn {
  justify-content: center;
}
.make-skip {
  color: var(--text-secondary);
}
/* Cooked: how was it? */
.rate-q {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.cooked-take {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: 6px;
  cursor: pointer;
}
.cooked-take input {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  margin: 0;
}
.cooked-left {
  margin-top: 12px;
}
.cooked-left-hint {
  margin: 2px 0 0 24px;
}
.cook-extras .cooked-left {
  margin-top: 0;
}
.cook-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 14px;
}
.cook-extras .cook-left {
  flex: 1 1 0;
  min-width: 0;
  max-width: max-content;
}
.rate-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.rate-face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 30px;
  cursor: pointer;
  filter: grayscale(0.6);
  opacity: 0.75;
  transition:
    transform 0.12s,
    filter 0.12s,
    opacity 0.12s,
    border-color 0.12s;
}
.rate-face.on {
  filter: none;
  opacity: 1;
  border-color: var(--green);
  background: var(--green-light);
  transform: scale(1.08);
}
.make-name {
  font-size: 12.5px;
  font-weight: 600;
}
.make-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.make-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border-subtle);
  margin-top: 5px;
  overflow: hidden;
}
.make-bar i {
  display: block;
  height: 100%;
  background: var(--green);
}
.pantry-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}
.pgroup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
}
.pgroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 700;
}
.pgroup-head span {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 11.5px;
}
.pitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 26px;
  gap: 4px;
  align-items: center;
  padding: 6px 8px 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.pitem:last-child {
  border-bottom: none;
}
.pitem.flash {
  animation: flash 1.2s ease;
}
@keyframes flash {
  0%,
  40% {
    background: var(--gold-light);
  }
  100% {
    background: transparent;
  }
}
.pitem-name {
  display: flex;
  align-items: center;
  min-width: 0;
}
.pitem-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pitem-new {
  flex-shrink: 0;
  margin-left: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green-text);
}
/* Running low (packs.js): a small gold pill that puts it on the list */
.pitem-low {
  flex-shrink: 0;
  margin-left: 7px;
  padding: 1px 7px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-dark, #8a6d00);
  background: var(--gold-light, #fbf3d5);
  border: 1px solid var(--gold, #c8960c);
  border-radius: 999px;
  cursor: pointer;
}
.pitem-low.on {
  cursor: default;
  color: var(--text-muted);
  background: none;
  border-color: var(--border);
}
.pitem-tap {
  cursor: text;
}
.pitem-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
}
/* Move To under the rename box: a pill per place, the current one filled */
.pitem-move {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.pitem-move-lbl {
  font-size: 12px;
  color: var(--text-muted);
}
.pitem-loc {
  font: inherit;
  font-size: 12.5px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.pitem-loc.on {
  border-color: var(--green);
  color: var(--green-text);
  font-weight: 600;
}
.pitem-ok,
.pitem-cancel {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.pitem-ok {
  color: var(--green-text);
  border-color: var(--green);
}
.pitem-cancel {
  color: var(--text-muted);
}
.pitem-rename {
  flex: 1;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 2px 6px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-primary);
}
.conf-note {
  font-size: 10.5px;
  color: var(--orange);
  padding: 0 7px 3px;
}
.pitem.out .pitem-name > span {
  color: var(--orange);
  font-weight: 400;
} /* Restock: the header's orange, plain */
.restock-add {
  font:
    600 11.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--green-text);
  background: none;
  border: 1px solid var(--green);
  border-radius: 20px;
  padding: 3px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.restock-add:hover {
  background: var(--green-light);
}
.pitem.armed .restock-add {
  grid-column: 2 / 4;
  justify-self: end;
  margin-right: 4px;
} /* where the amount and × were */
.qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.qty button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.qty button:hover {
  border-color: var(--green);
  color: var(--green-text);
}
.qty b {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pitem-x {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.pitem-x:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
/* on the Pantry's, the grocery list's and a receipt's rows, the × answers a tap a little around it (44px tall, as
   Apple suggests), mostly to the right, where the row ends, so the − / + beside it keep theirs */
.pitem > .pitem-x,
.groc-x {
  position: relative;
}
.pitem > .pitem-x::after,
.groc-x::after {
  content: '';
  position: absolute;
  inset: -10px -10px -10px -4px;
}
.pgroup-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Interests & skill level — bubble tags with an autocomplete input */
.tagbox {
  position: relative;
  width: 100%;
  min-height: 34px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.tagbox:focus-within {
  border-color: var(--green);
  box-shadow: inset 0 0 0 0.5px var(--green);
}
.tagbubble {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--tag-bg);
  color: var(--tag-text);
  border-radius: 20px;
  padding: 3px 3px 3px 10px;
  font-size: 12px;
  font-weight: 500;
}
.tagbubble-name {
  white-space: nowrap;
}
.tagbubble-level {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 11px;
  opacity: 0.7;
  padding: 0 1px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  max-width: 78px;
}
.tagbubble-x {
  width: 17px;
  height: 17px;
  border: none;
  background: none;
  color: inherit;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.1s;
}
.tagbubble:hover .tagbubble-x,
.tagbubble-x:focus {
  opacity: 0.65;
}
.tagbubble-x:hover {
  opacity: 1 !important;
  background: var(--hover-tint);
}
.tagbox-input {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  background: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  padding: 4px 2px;
}
.tagbox-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 30;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.16);
  padding: 4px;
}
.tagbox-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
}
.tagbox-opt:hover,
.tagbox-opt.active {
  background: var(--surface-2);
}

/* scan flow */
.scan-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
}
.scan-previews {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.scan-previews img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--border);
}
/* Add from Photos (pantry.js, scanPicker): two buttons side by side, the list link under them; desktop: drop photos on it */
.ap-drop {
  border: 1.5px dashed transparent;
  border-radius: 10px;
}
.ap-drop.over {
  border-color: var(--green);
  background: var(--green-light);
}
.ap-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 6px;
}
.ap-btns .btn {
  justify-content: center;
  padding: 12px 10px;
  font-size: 14px;
  cursor: pointer;
}
.ap-list {
  display: block;
  margin: 12px auto 2px;
}
.ap-ask {
  margin-top: 10px;
}
.scan-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: start;
}
.scan-photo {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.scan-photo img {
  display: block;
  width: 100%;
}
.scan-photo .scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--green-mid);
  box-shadow: 0 0 12px var(--green-mid);
  animation: scan 1.4s ease-in-out infinite alternate;
}
@keyframes scan {
  from {
    top: 4%;
  }
  to {
    top: 94%;
  }
}
.review-note {
  font-size: 12px;
  background: var(--gold-light);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.review-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 0 4px 6px;
}
.review-table td {
  padding: 3px 4px;
  border-top: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.review-table tr.off td:not(:first-child) {
  opacity: 0.4;
}
.review-table input[type='text'],
.review-table input[type='number'],
.review-table select {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  font:
    12.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-primary);
  background: transparent;
}
.review-table input:hover,
.review-table select:hover {
  border-color: var(--border);
}
.review-table input:focus,
.review-table select:focus {
  border-color: var(--green);
  box-shadow: inset 0 0 0 0.5px var(--green);
  background: var(--surface);
  outline: none;
}
.review-table input[type='checkbox'] {
  accent-color: var(--green);
  width: 15px;
  height: 15px;
}
/* a calendar photo's event: its mark by the title, what to check, and a weekly row's dates (photocal.js) */
.pc-titlerow {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.pc-titlerow .pc-title {
  flex: 1;
  min-width: 0;
}
.pc-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 4px;
  overflow-wrap: anywhere;
}
.pc-repeat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 13px;
}
.pc-repeat input {
  width: auto;
}
/* a photo scan's confidence, by the item's name (confMark, pantry.js) */
.conf-mark {
  display: inline-block;
  width: 1.1em;
  margin-right: 4px;
  text-align: center;
  font-weight: 700;
  flex: none;
}
.conf-mark.sure {
  color: var(--green-text);
}
.conf-mark.probably {
  color: var(--gold);
}
.conf-mark.guess {
  color: var(--red-fill);
}
.conf {
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  padding: 2px 7px;
  white-space: nowrap;
}
.conf.hi {
  background: var(--green-light);
  color: var(--green-dark);
}
.conf.lo {
  background: var(--orange-light);
  color: var(--orange);
}
.conf.dup {
  background: var(--gold-light);
  color: var(--gold-dark);
}
.review-add {
  margin-top: 8px;
}
.review-scroll {
  overflow-x: auto;
}
@media (max-width: 640px) {
  .scan-layout {
    grid-template-columns: 1fr;
  }
  .scan-photo {
    max-width: 200px;
  }
}

/* ── Colors + transport (class details & People) ── */
.kid-name-chip {
  font-weight: 700;
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 5px;
}
.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--border);
  padding: 0;
  position: relative;
}
.swatch:hover {
  transform: scale(1.1);
}
.swatch[aria-checked='true'] {
  box-shadow: 0 0 0 2px var(--text-primary);
}
.swatch[aria-checked='true']::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.swatch-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}
.swatch-reset {
  background: none;
  border: none;
  font:
    600 11px 'Inter',
    system-ui,
    sans-serif;
  color: var(--green-text);
  cursor: pointer;
  padding: 2px 4px;
}
.swatch-reset:hover {
  text-decoration: underline;
}

.transport {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface);
}
.tp-half {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: var(--surface-2);
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
  min-width: 0;
}
.tp-half + .tp-half {
  border-left: 1px solid var(--border);
}
.tp-half:hover {
  background: var(--green-light);
}
.tp-half:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.tp-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.tp-person {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  max-width: 100%;
}
.tp-person .tp-nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-person svg {
  color: var(--text-muted);
  flex-shrink: 0;
}
.tp-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-note {
  font-size: 10.5px;
  color: var(--text-muted);
}
.tp-note.custom {
  color: var(--gold-dark);
  font-weight: 600;
}
.tp-foot {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 5px;
  margin-bottom: 12px;
}
.tp-all {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 5px;
}
.meal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 24px 0;
  padding: 8px 8px 8px 12px;
  background: var(--gold-light);
  border: 1px solid var(--gold-mid);
  border-radius: 9px;
  font-size: 12.5px;
}
.chef-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 6px 10px;
  border: 1px solid var(--gold-mid);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
}
.chef-btn:hover {
  background: var(--green-light);
}
.ev-body {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.ev-body > .transport,
.ev-body > .ev-confirm,
.ev-body > .ev-status {
  align-self: stretch;
}
/* the dot and "– Everly" flow with a long title instead of each taking a line */
.ev-title {
  font-size: 19px;
  font-weight: 800;
  text-wrap: balance;
}
.ev-title .class-dot {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: 2px;
}
.cd-modal .ev-title {
  padding-right: 30px;
}
.ev-dash {
  color: var(--text-muted);
  font-weight: 400;
}
.ev-when {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: -6px;
}
.ev-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.ev-meta span {
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.ev-confirm {
  background: var(--orange-light);
  border: 1px solid var(--orange-line);
  border-radius: 9px;
  padding: 11px 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ev-confirm-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ev-status {
  background: var(--green-light);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--green-dark);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.ev-off {
  opacity: 0.5;
}
.week-event.skipped,
.cal-event.skipped {
  opacity: 0.5;
  text-decoration: line-through;
}
.week-event.split,
.cal-event.split {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
} /* white text stays readable across both colors */
.sb-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sb-step {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--gold-mid);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.sb-step:hover:not(:disabled) {
  background: var(--gold-light);
}
.sb-step:disabled {
  opacity: 0.35;
  cursor: default;
}
.sb-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}
.confirm-drivers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 14px;
}
.confirm-drivers > div {
  padding: 10px 12px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.confirm-drivers > div + div {
  border-left: 1px solid var(--border);
}
.confirm-text {
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 8px;
  max-width: 60ch;
}

.tp-pop {
  position: fixed;
  z-index: 120;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.18);
  padding: 6px;
}
.tp-pop h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 8px 4px;
}
.tp-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px;
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
}
.tp-opt:hover {
  background: var(--surface-2);
}
.tp-opt[aria-selected='true'] {
  background: var(--green-light);
}
.tp-opt .tp-av {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
}
.tp-opt-name {
  font-size: 13px;
  font-weight: 600;
}
.tp-opt-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.tp-opt .check {
  margin-left: auto;
  color: var(--green-text);
  font-weight: 700;
}
.tp-scope {
  display: flex;
  gap: 4px;
  padding: 4px 6px 6px;
}
.tp-scope button {
  flex: 1;
  font:
    500 11px 'Inter',
    system-ui,
    sans-serif;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.tp-scope button.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.tp-pop hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 4px 2px;
}
.tp-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font:
    600 12px 'Inter',
    system-ui,
    sans-serif;
  color: var(--green-text);
  padding: 7px 8px;
  cursor: pointer;
  border-radius: 7px;
}
.tp-link:hover {
  background: var(--surface-2);
}
.apply-link {
  background: none;
  border: none;
  font:
    600 11.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--green-text);
  cursor: pointer;
  padding: 0;
}
.apply-link:hover {
  text-decoration: underline;
}
/* ── Find tabs ── */
.find-search {
  position: relative;
  margin-bottom: 16px;
  max-width: 720px;
}
.find-search .find-icon {
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.find-search .search-input {
  width: 100%;
  padding-left: 36px;
  height: 40px;
  font-size: 13.5px;
}
.rtag.saved {
  background: var(--green);
  color: #fff;
}
.result-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.save-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.save-toggle.is-saved {
  color: var(--green-dark);
  border-color: var(--green-line);
  background: var(--green-light);
  font-weight: 600;
}
.result-item.saved {
  border-color: var(--green-line);
}
.recipe-saved {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--green);
  color: #fff;
  border-radius: 10px;
  padding: 3px 8px;
}
.recipe-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
}
.card-save {
  font:
    600 11px 'Inter',
    system-ui,
    sans-serif;
  color: var(--green-dark);
  background: var(--surface);
  border: 1px solid var(--green-line);
  border-radius: 12px;
  padding: 3px 9px;
  cursor: pointer;
}
.card-save:hover {
  background: var(--green-light);
}
.card-saved-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--green-text);
}
.ord-items {
  list-style: none;
  margin: 4px 0 14px;
}
.ord-items li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.ord-items li:last-child {
  border-bottom: none;
}
.ord-item-price {
  color: var(--text-muted);
  flex-shrink: 0;
}
.ord-total {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.recipe-card.is-saved {
  border-color: var(--green-line);
}
/* ── Browse filters ── */
.browse-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.browse-cats {
  flex: 1 1 360px;
  min-width: 0;
}
.browse-cats .category-chips {
  margin-bottom: 10px;
}
button.category-chip {
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
}
.browse-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
/* The Filters button folds category, distance and price away on phones;
   on wider screens they sit out in the bar: category, then For, distance, price */
.find-opts {
  display: contents;
}
.browse-cats {
  order: 1;
}
.browse-for {
  order: 2;
}
.find-opts .browse-filters {
  order: 3;
}
.browse-bar .find-filters-btn {
  display: none;
}
.find-filters-btn.set {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 600;
}
.find-filters-btn svg {
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .browse-bar {
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
  }
  .browse-for {
    order: 1;
  }
  .browse-bar .find-filters-btn {
    display: inline-flex;
    order: 2;
  }
  .find-opts {
    display: none;
    order: 3;
    flex-basis: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
  }
  .browse-bar.filters-open .find-opts {
    display: block;
  }
  .find-opts .browse-cats .category-chips {
    margin-bottom: 12px;
  }
}
.filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.filter-btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text-primary);
  font:
    500 12.5px 'Inter',
    system-ui,
    sans-serif;
  cursor: pointer;
}
.filter-btn:hover,
.filter-btn:focus-visible {
  border-color: var(--green);
  outline: none;
}
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%238A8672' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.filter-select.set {
  border-color: var(--green);
  background-color: var(--green-light);
  color: var(--green-dark);
  font-weight: 600;
}
.kid-dd {
  position: relative;
}
.kid-btn .kid-av,
.kid-opt .kid-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kid-btn {
  padding-left: 6px;
}
.kid-btn.set {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 600;
}
.kid-btn svg {
  color: var(--text-muted);
}
.kid-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.16);
  padding: 6px;
}
.kid-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px;
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
}
.kid-opt:hover {
  background: var(--surface-2);
}
.kid-opt[aria-selected='true'] {
  background: var(--green-light);
}
.kid-opt .kid-av {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.kid-opt-name {
  font-size: 13px;
  font-weight: 600;
}
.kid-opt-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.kid-opt .check {
  margin-left: auto;
  color: var(--green-text);
  font-weight: 700;
}
.kid-menu hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 4px 2px;
}
.kid-menu {
  max-width: calc(100vw - 32px);
}
@media (max-width: 860px) {
  .kid-menu {
    left: 0;
    right: auto;
  }
} /* button sits at the left on narrow screens */

.kid-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--green-light);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 4px 0 16px;
}
.kid-summary:empty {
  display: none;
}
.kid-summary strong {
  color: var(--green-dark);
}
.kid-summary .rule {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--green-line);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 11.5px;
}
.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.rtag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--tag-bg);
  color: var(--tag-text);
}
.rtag.gold {
  background: var(--gold-light);
  color: var(--gold-dark);
}
.browse-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 18px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 9px;
}
.browse-hidden {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
}
.browse-hidden summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-secondary);
}
.browse-hidden ul {
  margin: 6px 0 0 18px;
  line-height: 1.7;
}

/* ── Cookbook toolbar ── */
.add-recipe-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.recipe-card.filtered-out {
  display: none;
}
.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 48px 24px 44px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.empty-state h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
}
.empty-state p {
  margin: 0 0 6px;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.btn.btn-lg {
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 9px;
}
.empty-state p.empty-or {
  margin: -2px 0 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}
/* Orders, grouped by eatery: one card per place, each order with its price and items */
.imports-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.imports-bar .spacer {
  flex: 1;
}
.import-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
}
.import-row:first-child {
  border-top: none;
}
.import-help {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 4px 0 0;
}
.import-help summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--green-dark);
}
.import-help ul,
.import-help ol {
  margin: 6px 0 0;
  padding-left: 18px;
}
.import-help li + li {
  margin-top: 4px;
}
.tp-busy {
  color: var(--orange);
}
/* an imported event's card: Mark Postponed / Mark Cancelled (imports.js) */
.imp-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
}
.imp-every {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
}
.order-thumb {
  background: linear-gradient(135deg, #ffe9d0, #ffcda0);
}
.cookbook-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  grid-column: 1 / -1;
}

/* ── Modal (recipe viewer + add recipe) ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: fadeIn 0.15s ease;
}
.modal {
  width: min(760px, 100%);
  max-height: min(88vh, 900px);
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20, 26, 12, 0.3);
  display: flex;
  flex-direction: column;
  animation: rise 0.18s ease;
}
.modal.narrow {
  width: min(560px, 100%);
}
.name-gate {
  z-index: 1100;
} /* What's your name? (auth.js): above every popup */
/* The first-run intro (intro.js): one screen at a time, dots for where you are */
.intro-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.intro-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.intro-dots span.done {
  background: var(--green-mid);
  opacity: 0.5;
}
.intro-dots span.on {
  background: var(--green);
}
.intro h3 {
  margin: 0;
  font-size: 20px;
}
.intro-picks {
  display: grid;
  gap: 8px;
}
.intro-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface);
}
.intro-pick:has(input:checked) {
  border-color: var(--green);
  background: var(--green-light);
}
.intro-pick input {
  accent-color: var(--green);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
}
.intro-pick > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
/* the setup screen: what comes next, under the one picked */
.intro-next {
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 0 4px 4px 12px;
}
.intro .signin-form {
  overflow-y: auto; /* the setup screen's list is taller than a short phone */
}
.intro-loc {
  justify-self: center;
  justify-content: center;
  min-width: 200px;
  padding: 10px 18px;
}
.intro-ok {
  color: var(--green-text);
  font-weight: 600;
}
.intro-role {
  font-size: 17px;
}
.intro-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.intro-foot .spacer {
  flex: 1;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}
@property --done {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@keyframes rise {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}
body.modal-open {
  overflow: hidden;
}
/* Phones and tablets: a grab bar on top; pulling the header down closes the
   popup (gestures.js). Zero height, so it doesn't move anything. */
.sheet-grab {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .sheet-grab {
    display: block;
    height: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
  }
  .sheet-grab::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 3px;
    background: var(--border);
  }
  /* room for the grab bar above the header's buttons */
  /* the bar is 7px from the top and 5px tall: the same 7px again below it */
  .sheet-grab + .modal-toolbar {
    padding-top: 19px;
  }
  .sheet-grab + .modal-head {
    padding-top: 16px;
  } /* a title's letters sit a little lower in their line: 2px less looks even */
  /* one place for the ✕ on every card (events, meals, recipes): in the top right corner, as far
     from the top as from the side; the first row (a title, buttons) starts 7px below the bar */
  .modal .modal-toolbar .tb-close,
  .modal .cd-modal .cd-close,
  .modal .modal-head .card-x {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .sheet-grab + .mp-head {
    align-items: flex-start;
    padding-left: 16px;
  } /* the meal's photo: as far from the side as from the top */
  .sheet-grab + .modal-head:has(.card-x) {
    position: relative;
    padding-right: 52px;
  }
  .sheet-grab + .cd-modal .ev-body,
  .sheet-grab + .cd-modal .class-detail {
    padding-top: 16px;
  }
  /* no gray iPhone tap highlight on events: it ignores the calendar's edges */
  .week-event,
  .cal-event {
    -webkit-tap-highlight-color: transparent;
  }
  .modal .modal-head,
  .modal .modal-toolbar {
    touch-action: none;
  }
  .modal.sheet-drag {
    transition: none !important;
  }
  body.signed-out .sheet-grab {
    display: none;
  }
}

.modal-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  padding: 10px 50px 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}
.modal-toolbar .tb-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
/* a recipe's ♥ leads its row of icons (edit, share, print, delete); on phones that row is always the second */
.tb-break {
  display: none;
}
.tb-btn .lbl-plus {
  display: none;
}
@media (max-width: 640px) {
  .modal-toolbar .tb-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
}
.modal-toolbar .spacer {
  flex: 1;
}
.tb-btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font:
    500 12.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
}
.tb-btn:hover {
  background: var(--surface-2);
}
.tb-btn.primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.tb-btn.primary:hover {
  background: var(--green-deep);
}
.tb-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
}
.tb-icon:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.tb-icon.on {
  color: var(--orange);
}
.tb-icon[data-act='fav'].on {
  color: var(--red-fill);
}
.tb-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
}
.tb-icon svg,
.tb-btn svg {
  width: 16px;
  height: 16px;
}

.modal-body {
  overflow-y: auto;
}
.rv-hero {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 20px 24px 18px;
}
.rv-thumb {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}
.rv-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.rv-source {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.rv-source a {
  color: inherit;
}
.rv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
}
.rv-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rv-stat b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.rv-stat span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stepper button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--text-secondary);
}
.stepper button:hover {
  border-color: var(--green);
  color: var(--green-text);
}
.rv-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-self: flex-start;
  margin-top: 3px;
} /* beside the servings stepper, level with it */

.rv-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}
.rv-col {
  padding: 18px 24px 24px;
}
.rv-col + .rv-col {
  border-left: 1px solid var(--border-subtle);
}
.rv-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.rv-h small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.ing {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.ing input {
  margin-top: 2px;
  accent-color: var(--green);
}
.ing > span {
  flex: 1;
  min-width: 0;
}
/* what the pantry has, in its own column at the right: never wraps onto a line of its own, and a ticked line's strike-through skips it */
.ing-have {
  flex-shrink: 0;
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}
.ing-have.ok {
  color: var(--green-text);
  font-size: 13px;
}
.ing-have.some {
  color: var(--gold-text);
  white-space: normal;
  text-align: right;
  max-width: 48%;
} /* a darker gold than --gold-dark, to read at this size; "· Tacos (Tue) uses it" may wrap */
.ing-have.out {
  color: var(--text-muted);
  font-weight: 600;
}
.ing-have.out .link-btn {
  font-size: inherit;
}
.ing b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ing.short input {
  accent-color: var(--gold);
} /* some, not enough: a yellow tick (what's short on the right) */
.ing-head {
  font-size: 13px;
  font-weight: 700;
  margin: 12px 0 2px;
}
.rv-h + .ing-head {
  margin-top: 0;
}
.steps {
  list-style: none;
  counter-reset: st;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.steps li {
  counter-increment: st;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 60ch;
}
.steps li::before {
  content: counter(st);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-light);
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps .timer {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-text);
  background: var(--green-light);
  border-radius: 10px;
  padding: 0 7px;
}
.rv-notes {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}

/* Cook mode */
.cook {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 340px;
}
.cook-progress {
  display: flex;
  gap: 4px;
}
.cook-progress i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.cook-progress i.done {
  background: var(--green);
}
.cook-step-n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cook-amt {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
} /* an ingredient's amount in a Cook mode step: a reminder, not part of the step */
.cook-text {
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
  max-width: 34ch;
  text-wrap: pretty;
}
.cook {
  touch-action: pan-y;
}
/* the step follows a sideways swipe; the next one slides in from that side */
.cook-slide {
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.25s;
}
.cook-slide.dragging {
  transition: none;
}
.cook-slide.enter-right {
  animation: cookInRight 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cook-slide.enter-left {
  animation: cookInLeft 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cookInRight {
  from {
    transform: translateX(45%);
    opacity: 0;
  }
}
@keyframes cookInLeft {
  from {
    transform: translateX(-45%);
    opacity: 0;
  }
}
.cook-nav {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
/* in a step: Previous at the left, the tip's 💡 in the middle (when there is one), Next at the right */
.cook > .cook-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.cook > .cook-nav > :first-child {
  justify-self: start;
}
.cook > .cook-nav > .btn-primary {
  justify-self: end;
}
.cook-tip-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--gold-light);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cook-tip-btn[aria-expanded='true'] {
  background: var(--gold-mid);
}
/* the tip: a bubble above the 💡 that grows out of it */
.cook-tip-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  width: min(360px, calc(100% - 32px));
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--gold);
  background: var(--gold-light);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.18);
  animation: cookTipGrow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
}
.cook-tip-pop[hidden] {
  display: none;
}
.cook-tip-pop p {
  margin: 0;
}
.cook-tip-pop p + p {
  margin-top: 8px;
}
/* ⓘ (core.js infoTip): what something means, in a bubble like the 💡's */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 28px;
  height: 28px;
  margin: -6px -4px -6px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.info-btn svg {
  width: 16px;
  height: 16px;
}
.info-btn[aria-expanded='true'] {
  color: var(--gold-dark);
}
.info-pop {
  position: fixed;
  z-index: 400; /* above popups and notes */
  width: min(300px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--gold);
  background: var(--gold-light);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.18);
  animation: infoGrow 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes infoGrow {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes cookTipGrow {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
  }
}
/* in a step: the progress bar, the recipe and "Step 2 of 5" stay at the top while a long step scrolls under them */
.cook > .cook-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: -28px -32px 0;
  padding: 20px 32px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
/* in a step: Previous / Next stay at the bottom of the card while a long step scrolls under them */
.cook > .cook-nav {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: auto -32px -32px;
  padding: 12px 32px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
}
.cg-prep {
  width: 100%;
}
.tb-timers {
  display: grid;
  /* names as wide as the longest needs, at most a third; the timers take the rest, all lined up */
  grid-template-columns: fit-content(33.333%) minmax(0, 1fr);
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  flex: 1 1 100%;
  order: 9;
  margin-right: -38px; /* into the room the toolbar keeps for ✕ (50px): as far from the right edge as the left */
} /* Cook mode's timers: their own rows under ← Recipe and Sous Chef, the whole width */
/* a timer's row: what it's for, then the timer (the columns are .tb-timers') */
.ct-row {
  display: contents;
}
.ct-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-row > .ct-btn,
.ct-row > .ct-split {
  width: 100%;
  justify-content: center;
}
.ct-row > .ct-btn.on {
  justify-content: space-between;
} /* running: +1 at one end, ✕ at the other, the time left between */
.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1.5px solid var(--green);
  background: var(--green-light);
  color: var(--green-dark);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
/* a range ("6–8 min"): one pill in two halves, the short time on the left, the long one on the right */
.ct-split {
  display: flex;
  min-width: 0;
}
.ct-split .ct-btn {
  flex: 1;
  justify-content: center;
}
.ct-split .ct-btn:first-child {
  border-radius: 16px 0 0 16px;
}
.ct-split .ct-btn + .ct-btn {
  border-radius: 0 16px 16px 0;
  border-left-width: 0;
  box-shadow: inset 1.5px 0 0 var(--green);
}
.ct-btn small {
  font-weight: 500;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-btn.on {
  color: #fff;
  cursor: default;
  padding-right: 4px;
  border-color: transparent;
  /* a running timer fills with dark green from the left as time passes */
  background: linear-gradient(
    to right,
    var(--green-deep) var(--done, 0%),
    var(--green-timer) var(--done, 0%)
  );
  background-origin: border-box; /* the fill reaches under the (clear) border: no light sliver at its left edge */
  transition: --done 1s linear;
}
.ct-btn .ct-what {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.ct-btn b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ct-x,
.ct-plus {
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ct-x:hover,
.ct-plus:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* +1 on a running timer: the ✕'s twin at the other end, a little wider for its two characters */
.ct-btn.on:has(.ct-plus) {
  padding-left: 4px;
}
.ct-plus {
  width: auto;
  min-width: 28px;
  padding: 0 6px;
  border-radius: 12px;
  font-weight: 700;
}
#timer-alarm {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100% - 32px));
}
.ta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 2px solid var(--green);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  animation: ta-pulse 1s ease-in-out 3;
}
.ta-emoji {
  font-size: 24px;
}
.ta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--text-secondary);
}
.ta-text b {
  font-size: 15px;
  color: var(--text-primary);
}
@keyframes ta-pulse {
  50% {
    transform: scale(1.03);
  }
}
.tb-btn.on {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--green-dark);
}

/* Add recipe */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-head h3 {
  font-size: 16px;
  font-weight: 700;
}
.ar-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
}
.ar-methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.ar-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font:
    600 12px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-secondary);
  text-align: center;
}
.ar-method svg {
  width: 20px;
  height: 20px;
}
.ar-method:hover {
  border-color: var(--green-mid);
}
.ar-method.on {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green-dark);
}
.ar-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}
/* Choosing which location of an eatery an order is picked up from */
.loc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.loc-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.loc-opt:has(input:checked) {
  border-color: var(--accent, #3b6e32);
  background: var(--surface-2);
}
.loc-opt input {
  margin-top: 3px;
}
.loc-addr {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.loc-why {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.loc-why b {
  color: var(--accent, #3b6e32);
  font-weight: 600;
}
.ar-row {
  display: flex;
  gap: 8px;
}
.ar-drop {
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 26px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  display: block;
}
.ar-drop:hover,
.ar-drop.over {
  border-color: var(--green);
  background: var(--green-light);
}
.ar-drop input {
  display: none;
}
.ar-text {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font:
    13px/1.5 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-primary);
  background: var(--surface);
  outline: none;
}
.ar-text:focus,
.ar-field input:focus,
.ar-field textarea:focus {
  border-color: var(--green);
  box-shadow: inset 0 0 0 0.5px var(--green);
}
.ar-parsing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--green-light);
  border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.ar-found {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.ar-review-note {
  font-size: 12px;
  background: var(--gold-light);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.ar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.ar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.ar-field label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ar-field input,
.ar-field textarea,
.ar-field select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font:
    13px/1.5 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-primary);
  background: var(--surface);
  outline: none;
}
.ar-field textarea {
  min-height: 110px;
  resize: vertical;
}
.ar-field.found input,
.ar-field.found textarea {
  background: var(--green-faint);
  border-color: var(--green-line);
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--border-subtle);
}
/* the recipe form's Cancel / Save as Custom / Save: always at the bottom of the popup as the form scrolls,
   with room under them (and the phone's home bar) */
.rf-foot {
  position: sticky;
  bottom: -22px;
  z-index: 2;
  margin: 6px -22px -22px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
}
/* Import from a spreadsheet (sheetimport.js): the first recipe as a recipe card, then a drop-down per field */
.ar-sheet {
  margin-top: 16px;
}
.cookbook-sheet {
  text-align: center;
  margin: 22px 0 8px;
}
.si-err {
  color: var(--orange);
  margin: 0 0 12px;
}
.si-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.si-card .rv-hero {
  padding: 16px 18px 14px;
}
.si-card .rv-col {
  padding: 14px 18px 18px;
}
.si-ing {
  font-size: 13px;
  padding: 4px 0;
  overflow-wrap: anywhere;
}
.si-none {
  font-size: 12.5px;
  color: var(--text-muted);
}
.si-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.si-headrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.si-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 12px;
}
@media (max-width: 640px) {
  .si-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .si-card .rv-hero {
    padding: 14px;
  }
}

@media (max-width: 640px) {
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  /* dvh: the height actually visible. Plain vh on iPhones includes the part
     behind Safari's bars, which pushed tall popups' close buttons off screen. */
  .modal {
    max-height: 94vh;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 16px);
    border-radius: 14px 14px 0 0;
    /* the card carries on below its bottom edge (a solid copy of it, lower down), so the home bar's strip
       or a card pulled up never shows a gap under it; its own content stays above the home bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow:
      0 24px 60px rgba(20, 26, 12, 0.3),
      0 180px 0 0 var(--surface);
  }
  /* touch: a tall popup opens a fifth shorter; pulling its top up gives it the full height (gestures.js) */
  @media (hover: none) and (pointer: coarse) {
    .modal:not(.sheet-full) {
      max-height: 75vh;
      max-height: calc((100dvh - env(safe-area-inset-top, 0px) - 16px) * 0.8);
    }
  }
  .rv-cols {
    grid-template-columns: 1fr;
  }
  .rv-col + .rv-col {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
  }
  .ar-methods {
    grid-template-columns: repeat(2, 1fr);
  }
  .ar-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tb-btn .lbl-long {
    display: none;
  }
  /* Add to List is "+ cart" on phones, first on the icons' row, so Plan, Cook and Sous Chef share the top */
  .tb-btn .lbl-list {
    display: none;
  }
  .tb-btn .lbl-plus {
    display: inline;
    margin-right: -4px;
    font-size: 16px;
    font-weight: 600;
  }
  .modal-toolbar .tb-break {
    order: 1;
  }
  .modal-toolbar .tb-break ~ *,
  .modal-toolbar [data-act='list'] {
    order: 2;
  }
}
/* the smallest phones: Cook is its icon */
@media (max-width: 360px) {
  .tb-btn .lbl-cook {
    display: none;
  }
}

/* Stripe badge */
.stripe-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 14px;
}
.stripe-logo {
  background: #635bff;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

/* ── Hamburger + drawer (tablet and phone) ── */
.title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.menu-btn,
.nav-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: -6px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--sidebar-text);
  cursor: pointer;
}
.menu-btn:hover,
.nav-close:hover {
  background: var(--sidebar-hover-bg);
}
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--nav-scrim);
  animation: fadeIn 0.2s ease;
}
body.nav-open {
  overflow: hidden;
}

/* ── Embedded in the iOS/Android app: its own floating nav bar replaces
   the hamburger + sidebar drawer (see init.js) ── */
body.app-embedded .menu-btn {
  display: none !important;
}

/* ── Ask: the green chat button, top left (assistant.js). In the app it takes the page title's place: the app's
   tab bar already says which page you're on ── */
/* Import Many Recipes: links (sheetimport.js linksPick, linksList) */
.si-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px;
}
.si-bm {
  cursor: pointer;
}
.si-how {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.si-how summary {
  cursor: pointer;
  font-weight: 600;
}
.si-how ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.si-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 52vh;
  overflow-y: auto;
}
.si-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.si-row.si-wait,
.si-row.si-have {
  color: var(--text-muted);
}
.si-ic {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.si-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
.si-open {
  flex-shrink: 0;
}
/* Add Recipe: under the link box (recipes.js useCopiedLink) */
.ar-copied {
  margin-top: 8px;
}
.ask-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-fill);
  cursor: pointer;
}
.ask-btn:hover {
  background: var(--green-deep);
}
body.app-embedded .page-title {
  display: none;
}
/* the website: Ask is in the sidebar (on a phone, the ☰ menu), so not in the header, which leaves the page's name
   and Up next the room; the iOS app has no sidebar, so its header keeps the button */
body:not(.app-embedded) .ask-btn {
  display: none;
}
.ask-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-fill);
  vertical-align: middle;
}
#nav-ask .nav-icon {
  opacity: 1;
}
/* a card is open: the button stays above the dimmed page (askLift: only where the card doesn't cover it) */
body.ask-lift .ask-btn,
body.ask-lift #nav-ask {
  position: relative;
  z-index: 201;
}
.ask-act {
  align-self: flex-start;
  max-width: 100%;
  margin-top: -2px;
  overflow-wrap: anywhere;
  text-align: left;
}
/* under a Move button: what the new time clashes with (mealClashes) */
.ask-warn {
  align-self: flex-start;
  max-width: 100%;
  margin-top: -4px;
  font-size: 13px;
  color: var(--orange);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ── Calendar collapse ── */
.cal-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cal-header {
  gap: 8px 12px;
}
.cal-nav {
  order: 1;
  flex: 1;
  min-width: 0;
}
.cal-right {
  order: 2;
}
.cal-header > .cal-collapse {
  order: 3;
  flex-shrink: 0;
}
.cal-color-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-color-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.cal-color-btn {
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--border);
  font-family: inherit;
}
.cal-color-btn:last-child {
  border-right: none;
}
.cal-color-btn.active {
  background: var(--surface-2);
  color: var(--text-primary);
  font-weight: 600;
}
/* View → Show: which calendars you see (renderCalShow in calendar.js) */
.cal-show {
  position: relative;
}
.cal-show-btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font:
    500 11.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cal-show-btn::-webkit-details-marker {
  display: none;
}
.cal-show > summary.cal-show-btn::before {
  content: none;
  display: none;
} /* a drop-down, not an expandable section: no shared ▸ */
.cal-show[open] .cal-show-btn {
  background: var(--surface-2);
  color: var(--text-primary);
}
.cal-show[open] .cal-show-btn svg {
  transform: rotate(180deg);
}
.cal-show-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 61;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.18);
}
.cal-show-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.cal-show-row:hover {
  background: var(--surface-2);
}
.cal-show-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cal-show-row input {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
}
.cal-show-fresh {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
.cal-show-fresh.bad {
  color: var(--gold-text);
}
.cal-show-note {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 8px 2px;
  line-height: 1.4;
}
.cal-collapse {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font:
    500 11.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-secondary);
  cursor: pointer;
}
.cal-collapse:hover {
  background: var(--surface-2);
}
.cal-view-toggle {
  display: none;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font:
    500 11.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-secondary);
  cursor: pointer;
}
.cal-view-toggle[aria-expanded='true'] {
  background: var(--surface-2);
  color: var(--text-primary);
}
.cal-collapse svg {
  transition: transform 0.2s;
}
.calendar-section.collapsed .cal-collapse svg {
  transform: rotate(180deg);
}
/* folded: the bar's buttons vanish but keep their space, so the dates and arrows don't move */
.calendar-section.collapsed .cal-view-btns,
.calendar-section.collapsed .cal-color-wrap,
.calendar-section.collapsed .cal-show,
.calendar-section.collapsed .cal-search-btn,
.calendar-section.collapsed .cal-view-toggle {
  visibility: hidden;
}
.calendar-section.collapsed .cal-search,
.calendar-section.collapsed #cal-container,
.calendar-section.collapsed .cal-resizer {
  display: none;
}
.calendar-section.collapsed .cal-header {
  border-bottom-color: transparent;
}
/* "Up next", beside the page title */
.page-upnext {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-left: auto;
  padding-left: 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
} /* right-aligned: stays put from page to page */
.page-upnext:empty {
  display: none;
}
.page-upnext .un-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.page-upnext .un-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* a set width, so it sits in the same place on every page; a long name is cut short, the time always shows */
.page-upnext {
  flex: 0 1 400px;
}
.page-upnext .un-text {
  display: flex;
  min-width: 0;
  white-space: nowrap;
}
.page-upnext .un-name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--text-primary);
  font-weight: 600;
}
.page-upnext .un-when {
  flex-shrink: 0;
}
.un-open {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.un-open:hover .un-name {
  text-decoration: underline;
}
.page-upnext .un-more {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}
.un-cook {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  font: inherit;
  color: inherit;
  background: var(--green-light);
  border: 1px solid var(--green);
  border-radius: 16px;
  padding: 3px 10px;
  cursor: pointer;
}
.un-cook .un-label {
  color: var(--green-dark);
}
.un-cook:hover {
  background: var(--surface);
}
.un-timer {
  flex-shrink: 0;
  color: var(--gold-dark);
  font-variant-numeric: tabular-nums;
}
.un-x {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 10px;
  cursor: pointer;
}
.un-x:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

@media (max-width: 860px) {
  .menu-btn,
  .nav-close {
    display: inline-flex;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 160;
    width: min(280px, 84vw);
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateX(-102%);
    visibility: hidden;
    transition:
      transform 0.25s cubic-bezier(0.3, 0.7, 0.3, 1),
      box-shadow 0.25s,
      visibility 0s linear 0.25s;
  }
  .sidebar.open {
    transform: none;
    visibility: visible;
    box-shadow: 8px 0 30px rgba(26, 30, 18, 0.22);
    transition:
      transform 0.25s cubic-bezier(0.3, 0.7, 0.3, 1),
      box-shadow 0.25s,
      visibility 0s;
  }
  .sidebar-logo {
    display: flex;
    align-items: center;
  }
  .nav-close {
    margin: -6px -6px -6px auto;
  }
  .sidebar-nav li a {
    padding: 11px 12px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

@media (max-width: 640px) {
  .page-header {
    padding: 10px 16px 0;
  }
  .cal-header {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 12px;
    position: relative;
  }
  /* ‹ and › at the two ends of the room between Today and the buttons on the right, the same spot in every view, with the
     dates centered between them (the dates fill the room, whatever steadyLabel set for computers) */
  .cal-nav > .cal-range-wrap {
    flex: 1 1 0 !important;
  }
  .cal-nav {
    gap: 4px;
  }
  .cal-range-wrap {
    min-width: 0;
  }
  .cal-range-btn {
    white-space: nowrap;
    max-width: 100%;
  }
  #cal-month-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cal-header > .cal-view-toggle {
    display: inline-flex;
    order: 2;
  }
  .cal-header > .cal-collapse {
    order: 3;
  }
  /* the "View" menu: Month/Week/Day, then Color */
  .cal-right {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    right: 12px;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(30, 40, 20, 0.18);
  }
  .cal-header.view-open .cal-right {
    display: flex;
  }
  .cal-right .cal-view-btns {
    width: 100%;
  }
  .cal-right .cal-view-btn,
  .cal-right .cal-color-btn {
    flex: 1;
    padding: 7px 12px;
    font-size: 13px;
  }
  .cal-color-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  /* in the View menu the list opens in place, under its button */
  .cal-show-btn {
    width: 100%;
    justify-content: center;
    height: 32px;
    font-size: 13px;
  }
  .cal-show-list {
    position: static;
    box-shadow: none;
    border: none;
    padding: 4px 0 0;
    min-width: 0;
    max-width: none;
    max-height: 45vh;
  }
  .page-upnext {
    padding-left: 8px;
    flex: 1 1 0;
    justify-content: flex-end;
  } /* all the room beside the Ask button and the page's name, kept to the right (so it ends in the same place) */
  .page-upnext .un-more,
  .page-upnext .un-up,
  .un-cook .un-word {
    display: none;
  }
  .cal-range-btn {
    font-size: 12.5px;
    padding: 3px 4px;
  }
  .cal-today-btn {
    margin-right: 0;
  }
  .meal-hint {
    line-height: 1.5;
  }
  .meal-hint:has(.hint-acts) {
    flex-wrap: wrap;
  }
  .people-layout,
  .classes-layout,
  .info-grid {
    grid-template-columns: 1fr;
  }
  .form-row-2,
  .form-row-3 {
    grid-template-columns: 1fr;
    row-gap: 0;
  } /* stacked fields: only each .form-row's own margin, no extra grid gap */
  #profile-form .pf-keep {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #profile-form .form-row-3.pf-keep {
    grid-template-columns: 2fr 1fr 1fr;
  }
  #profile-form .pf-street.pf-keep {
    grid-template-columns: 2fr 1fr;
  }
  .people-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .people-layout > div:first-child {
    flex: none;
    position: static;
  }
  .people-layout .people-list {
    display: none;
  }
  .people-layout .people-select {
    display: block;
  }
  .recipe-grid {
    grid-template-columns: 1fr 1fr;
  }
  .connections-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Live database pieces ── */
.sidebar-user {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.me-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.me-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* signed in as …, and Sign Out (the sidebar's; the app's is a row on Profile) */
.dev-switch {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dev-switch-label {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sync-dot:not(.err) + #sync-label {
  display: none;
} /* only a failed save is worth words */
.dev-switch .btn {
  width: 100%;
  justify-content: center;
}
.dev-switch-label > span:last-child {
  white-space: nowrap;
  flex-shrink: 0;
}
#me-email {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin-right: 6px;
}
.signin-form {
  display: grid;
  gap: 4px;
  padding: 18px 22px 22px;
}
.signin-err {
  font-size: 12px;
  color: var(--orange);
  min-height: 16px;
}
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #747775;
  border-radius: 8px;
  cursor: pointer;
  font:
    500 14px 'Roboto',
    'Inter',
    system-ui,
    sans-serif;
}
.google-btn:hover {
  background: #f8f9fa;
}
.google-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.google-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Apple's black "Continue with Apple" style, the same size as Google's */
.apple-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  margin-top: 8px;
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 8px;
  cursor: pointer;
  font:
    500 14px -apple-system,
    BlinkMacSystemFont,
    'Inter',
    system-ui,
    sans-serif;
}
.apple-btn svg {
  margin-top: -2px;
}
.apple-btn:hover {
  background: #1f1f1f;
}
.apple-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.apple-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-legal {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 22px 18px;
  font-size: 12px;
  color: var(--text-muted);
}
.auth-legal a {
  color: var(--text-muted);
}
.auth-legal a:hover {
  color: var(--green-dark);
}
.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.dev-note {
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}
.sync-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-right: 4px;
  vertical-align: 0;
}
.sync-dot.on {
  background: var(--green-mid);
}
.sync-dot.err {
  background: var(--orange);
}
.pill-select {
  font:
    600 11px 'Inter',
    system-ui,
    sans-serif;
  padding: 3px 22px 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background-color: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%238A8672' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.pill-select.full {
  background-color: var(--green-light);
  color: var(--green-dark);
  border-color: var(--green-line);
}
.pill-select.view {
  background-color: var(--gold-light);
  color: var(--gold-dark);
  border-color: var(--gold-mid);
}
.pill-select:disabled {
  opacity: 0.55;
  cursor: default;
  background-image: none;
}
.form-input[readonly] {
  background: var(--surface-2);
  color: var(--text-muted);
}
.save-note {
  font-size: 11.5px;
  color: var(--text-muted);
  align-self: center;
}

/* ── One editing pattern everywhere ──
   Quick choices (colors, dropdowns) save the moment you pick them.
   Typed details show as text; "Edit" turns them into a form with Save / Cancel. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
/* Account > Profile: one consistent gap between the page's stacked cards */
#account-panel-profile .account-form:not([hidden]) + .account-form {
  margin-top: 28px;
}
.section-head .section-heading {
  margin-bottom: 0;
}
.account-form.viewing .form-input {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  color: var(--text-primary);
  opacity: 1;
  -webkit-text-fill-color: var(--text-primary);
}
.account-form.viewing select.form-input {
  appearance: none;
  -webkit-appearance: none;
}
.account-form.viewing .form-row.empty {
  display: none;
}
/* Signed In As (the app): a long email wraps, Sign Out keeps its one line */
#auth-btn-app {
  white-space: nowrap;
  flex-shrink: 0;
}
#app-status-controls .pref-sublabel {
  overflow-wrap: anywhere;
}
/* Cancel and Save at the top too, where Edit was: the ones under the form can be a scroll away */
.section-head-btns {
  display: flex;
  gap: 8px;
}
.account-form.viewing .edit-only,
.account-form:not(.viewing) .view-only {
  display: none;
}
.auto-note {
  font-size: 11.5px;
  color: var(--text-muted);
}
.kid-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 14px;
  margin-bottom: 14px;
}
.kid-fact .v {
  font-size: 13px;
  margin-top: 3px;
}
.kid-fact .v small {
  color: var(--text-muted);
  font-size: 11px;
}
/* A child's age when a birthday is set: worked out from it, so shown as text, not a box (children.js) */
.kid-age-fixed {
  padding: 8px 0;
  font-size: 15px;
  color: var(--text-primary);
}
.kid-form .form-row {
  margin-bottom: 12px;
}
.kid-form .row-edit {
  display: grid;
  grid-template-columns: 150px 1fr 28px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.kid-form .row-edit .lbl {
  font-size: 12.5px;
  font-weight: 500;
}
.kid-form .row-edit .pitem-x {
  width: 28px;
  height: 28px;
}
/* Done by: school nights and weekends side by side, even on phones */
.done-by-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.done-by-pair .form-label {
  line-height: 1.3;
}
.done-by-days {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.done-by-field {
  display: flex;
  align-items: center;
  gap: 4px;
}
.done-by-pick {
  flex: 1;
}
.done-by-field .pitem-x {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 16px;
}
/* A time field: a button that opens the time wheels (timeField in timewheel.js) */
.time-pick {
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.time-pick.empty {
  color: var(--text-muted);
}
.time-pick:disabled {
  cursor: default;
  opacity: 0.6;
}
.ar-field .time-pick {
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.5;
}
/* Time wheels: five 36px rows showing, the middle one is the pick (WHEEL_ROW in timewheel.js) */
.modal.tw-modal {
  width: min(340px, 100%);
}
.tw {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 12px 22px;
}
.tw::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(12px + 72px);
  height: 36px;
  border-radius: 8px;
  background: var(--surface-2);
  pointer-events: none;
}
.tw-err {
  padding: 0 22px;
  text-align: center;
}
.tw-err:empty {
  display: none;
}
.tw-col {
  position: relative;
  height: 180px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  padding: 72px 0;
  box-sizing: border-box;
  scrollbar-width: none;
  overscroll-behavior: contain;
  outline: none;
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
}
.tw-col::-webkit-scrollbar {
  display: none;
}
.tw-col:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold);
  border-radius: 8px;
}
.tw-item {
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  cursor: pointer;
}
.kid-form .ht {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 8px;
}
.kid-form textarea.form-input {
  min-height: 64px;
  resize: vertical;
  font-family: inherit;
}
/* iPhone date boxes: an empty one is shorter than the rest of the row */
.kid-form input[type='date'].form-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-height: 32px;
  max-width: 100%;
}
.add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.add-row select,
.add-row input {
  max-width: 200px;
}
.form-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: 6px;
}
.form-foot .spacer {
  flex: 1;
}
.btn-danger {
  color: var(--orange);
  border-color: var(--orange);
}
.btn-danger.confirm {
  background: var(--orange);
  color: #fff;
}
/* room at the bottom of each page */
.content-scroll {
  padding-bottom: 32px;
}
/* room for the app's floating nav bar */
body.app-embedded .content-scroll {
  padding-bottom: 90px;
}
.kid-empty {
  padding: 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .kid-form .row-edit {
    grid-template-columns: 100px 1fr 28px;
  }
  .kid-form .ht {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Month view ── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cal-day-header {
  background: var(--surface-2);
  text-align: center;
  padding: 5px 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cal-cell {
  background: var(--surface);
  min-height: 64px;
  min-width: 0;
  padding: 4px 3px 2px;
}
.cal-cell.other-month {
  background: var(--surface-2);
}
.cal-date {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 2px;
}
.cal-cell.today .cal-date {
  background: var(--cal-today);
  color: #fff;
  font-weight: 700;
}
.cal-cell.other-month .cal-date {
  opacity: 0.35;
}
.cal-event {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--cal-event);
  color: var(--cal-event-text);
}
.cal-event.orange {
  background: var(--orange);
}
.cal-event.gold {
  background: var(--gold);
}
.cal-event.purple {
  background: #7c3aed;
}
.cal-event.teal {
  background: #2a9d8f;
}
.cal-event.dim {
  opacity: 0.38;
}
.cal-event {
  cursor: pointer;
}

/* ── Groceries (Meals → Groceries) ── */
.groc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 8px;
  margin-bottom: 10px;
}
.groc-window,
.groc-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.groc-window label,
.groc-org {
  font-weight: 600;
  color: var(--text-primary);
}
.groc-top select {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
}
.groc-range {
  color: var(--text-muted);
}
.groc-top:has(.groc-add) {
  flex-wrap: nowrap;
}
.groc-add {
  flex: 1;
  min-width: 0;
  display: flex;
}
.groc-add .search-input {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
}
.groc-summary {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.groc-note {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.groc-note.warn {
  color: var(--orange);
}
.groc-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-secondary);
}
.groc-banner b {
  color: var(--text-primary);
}
.groc-send {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* the summary on the left, the actions on the right; on phones the buttons first, the summary under them */
.groc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.groc-bar .groc-summary {
  order: -1;
  margin: 0;
}
.groc-putaway[disabled] {
  opacity: 0.45;
  cursor: default;
}
.groc-clear {
  display: block;
  margin: 18px auto 4px;
  color: var(--orange);
}
@media (max-width: 640px) {
  .groc-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .groc-bar .groc-summary {
    order: 1;
  }
  .groc-send .btn {
    flex: 1;
    justify-content: center;
  }
}
.groc-aisle,
.groc-more {
  margin-bottom: 16px;
}
.groc-sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 4px 0 16px;
}
.groc-row.maybe .groc-uses i {
  color: var(--orange);
  font-style: normal;
  font-weight: 600;
}
.groc-basics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.groc-sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.groc-caret {
  display: inline-block;
  font-size: 15px;
  width: 12px;
  text-align: center;
  transition: transform 0.15s;
}
.open > h4 .groc-caret {
  transform: rotate(90deg);
}
.groc-n {
  font-weight: 600;
  letter-spacing: 0;
}
[data-sec]:not(.open) > .groc-sec-body {
  display: none;
}
[data-sec]:not(.open) > h4 {
  margin-bottom: 0;
}
/* + Usuals: the regulars in a dropdown under the button */
.usuals-dd {
  position: relative;
}
.usuals-dd .regs {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: min(560px, calc(100vw - 32px));
  max-height: 65vh;
  overflow-y: auto;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.usuals-dd .regs-groups {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .groc-top {
    position: relative;
  }
  .usuals-dd {
    position: static;
  }
  .usuals-dd .regs {
    left: 0;
    right: 0;
    width: auto;
  }
}
.groc-aisle h4,
.groc-more h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.groc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 6px;
}
.groc-row.side {
  background: transparent;
}
.groc-row.done .groc-name {
  text-decoration: line-through;
  color: var(--text-muted);
}
.groc-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--green);
  cursor: pointer;
}
.groc-main {
  flex: 1;
  min-width: 0;
}
.groc-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
/* a swap's original, what the recipe names (Swaps in groceries.js) */
.groc-was {
  font-weight: 400;
  color: var(--text-muted);
}
.groc-qty {
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 4px;
}
.groc-uses {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.groc-uses.ruse {
  display: flex;
} /* a meal's long name ends in …, never pushing its day off the line */
.ruse > * + * {
  margin-left: 0.3em;
}
.ruse .u-use {
  display: flex;
  min-width: 0;
}
.ruse .u-name,
.ruse .u-tail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ruse .u-day,
.ruse .u-fix {
  flex: none;
}
.ruse .u-day {
  margin-left: 0.3em;
}
.groc-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}
details.groc-more summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.groc-allset {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.groc-start-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.btn-sm {
  font-size: 12px;
  padding: 4px 10px;
}
@media (max-width: 640px) {
  .groc-top {
    align-items: flex-start;
  }
  .groc-send {
    justify-content: stretch;
  }
  .groc-send .btn {
    flex: 1;
    justify-content: center;
  }
}

/* Regulars (Groceries): groups of chips; a chip is "on" when it's on this trip */
.regs {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.regs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.regs-head h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.regs-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.regs-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface);
}
.regs-gname {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.regs-ghead {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.regs-gcount {
  font-size: 11.5px;
  color: var(--text-muted);
}
.regs-group.empty {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  background: var(--surface-2);
}
.regs-group.empty .regs-none {
  font-size: 11.5px;
}
.regs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.regs-none {
  font-size: 12px;
  color: var(--text-muted);
}
.reg-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.reg-x {
  border: 0;
  background: none;
  color: var(--text-muted);
  padding: 4px 10px 4px 2px;
  font-size: 12px;
  cursor: pointer;
}
.reg-x:hover {
  color: var(--red);
}
.regs-edit {
  font-size: 12px;
}
.reg-chip.on {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}
.reg-tap {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-primary);
  padding: 5px 10px;
  cursor: pointer;
}
.reg-tap:disabled {
  cursor: default;
}
.reg-chip.on .reg-tap {
  color: var(--green-dark);
}
.reg-q {
  color: var(--text-muted);
}
/* picked: green, with a − / + for the amount */
.reg-chip.sel {
  border-color: var(--green);
  background: var(--green-light);
}
.reg-chip.sel .reg-tap {
  padding-right: 4px;
  font-weight: 600;
}
.reg-step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 3px 2px 0;
}
.reg-step button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.reg-step b {
  min-width: 20px;
  text-align: center;
  font-size: 12.5px;
}
/* "Add N Items to List": full width, always at the bottom of the open list */
.regs-bar {
  position: sticky;
  bottom: -12px;
  margin: 12px -14px -12px;
  padding: 10px 14px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
}
.regs-add {
  width: 100%;
  justify-content: center;
}
.reg-add {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}
.reg-add .form-input {
  font-size: 13px;
  padding: 7px 10px;
  min-width: 0;
}
.reg-add #reg-add-input {
  flex: 1;
}
.reg-add .reg-add-group {
  flex: 0 0 auto;
  width: auto;
  max-width: 38%;
}
.groc-x {
  flex-shrink: 0;
  margin-right: -4px;
}
.groc-tocheck {
  color: var(--gold-text);
  font-weight: 600;
}
.groups-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.groc-start {
  margin-bottom: 8px;
}
.clem-steps {
  margin: 0 0 6px;
  padding-left: 20px;
  line-height: 1.6;
}
.groc-uses .have-link,
.groc-uses .u-name {
  font-size: inherit;
  color: inherit;
}
.groc-uses .u-name {
  display: block;
  flex-shrink: 1; /* links don't shrink, but a long name has to, to end in … */
  white-space: nowrap;
  text-align: left;
}
.putaway-sub {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.putaway-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
}
.putaway-name {
  min-width: 0;
  font-size: 13.5px;
}
.putaway-kind {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.putaway-loc {
  flex-shrink: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
}
.clem-next {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.modal a.btn {
  text-decoration: none;
}

/* iPhones zoom the page into any text box whose text is under 16px, and
   don't zoom back out. On touch screens every box gets 16px text (the
   !important beats sizes set on individual boxes). */
@media (pointer: coarse), (max-width: 640px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
  select,
  textarea,
  .form-input.time-pick,
  .mw-time {
    font-size: 16px !important;
  }
  /* the hint text can be smaller than 16px: only typed text makes iPhones zoom */
  .search-input::placeholder {
    font-size: 13px;
  }
  /* …except the small pill drop-downs (Settings, Access): the page never zooms (maximum-scale=1), so they keep their size */
  select.pill-select {
    font-size: 12.5px !important;
  }
  select.filter-select {
    font-size: 13px !important;
  } /* the Cookbook's cuisines: the size of the search box's hint beside it */
}
.movable {
  cursor: grab;
}
.week-event.dragging,
.cal-event.dragging {
  opacity: 0.45;
}
.meal-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.meal-when input,
.meal-when select,
.meal-when .mw-time {
  font: inherit;
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-primary);
}
/* the day and the time the same height side by side (iPhones draw a date field taller than a drop-down by default) */
.meal-when .mw-date,
.meal-when .mw-time {
  box-sizing: border-box;
  height: 34px;
  line-height: 1.2;
  vertical-align: middle;
}
.meal-when .mw-date {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.meal-when .mw-date::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.mw-end {
  color: var(--text-muted);
  font-size: 12.5px;
}

/* Recipe photos: square copies, filling the thumbnail (cropped to fit) */
.recipe-thumb,
.rv-thumb {
  position: relative;
  overflow: hidden;
}
.thumb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe-thumb .recipe-badge,
.recipe-thumb .recipe-saved {
  z-index: 1;
}
.ar-photo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
.ar-photo img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
}
.ar-photo-wait {
  font-size: 12px;
  color: var(--text-muted);
}
.ar-photo-pick {
  cursor: pointer;
}
.ar-photo:empty {
  display: none;
}

/* In the iOS app a long press shouldn't start selecting text, as in any app; typing boxes still can.
   The website keeps normal selection. */
body.app-embedded {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.app-embedded :is(input, textarea, [contenteditable='true']) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Touch screens: a long press on something you tap shouldn't start
   selecting the page's text (dragging is desktop-only, see TOUCH_ONLY) */
@media (hover: none) and (pointer: coarse) {
  .recipe-card,
  .week-event,
  .cal-event,
  .recipe-plan-btn,
  .plan-btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* pictures are draggable by default: a long press would lift a photo (and a snapshot of its card) instead of opening the card */
  img {
    -webkit-user-drag: none;
    user-drag: none;
  }
}

/* "+ Plan" on an order: the same green as a recipe card's */
.plan-btn {
  margin-left: auto;
  font:
    600 11px/1 'Inter',
    system-ui,
    sans-serif;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 5px 10px;
  cursor: pointer;
}
.plan-btn:hover {
  background: var(--green-deep);
}
.plan-pop-or {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: -4px 0 4px;
}
/* Waiting for a tap on the calendar after "+ Plan" */
.place-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 24px);
  background: var(--green-deep);
  color: #fff;
  padding: 10px 12px 10px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-size: 13px;
}
.place-bar .btn {
  flex-shrink: 0;
}
body.placing .week-col,
body.placing .cal-cell {
  cursor: copy;
}
body.placing .week-col:hover,
body.placing .cal-cell:hover {
  background: rgba(59, 110, 50, 0.06);
}

/* A planned meal, opened from the calendar (openMealPopup) */
.mp-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mp-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  position: relative;
  overflow: hidden;
}
.mp-head h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.mp-when {
  margin: 0 0 12px;
  font-size: 13px;
}
/* a planned dinner's servings: the label (and what the recipe makes, when different) left, − / + right */
.mp-servings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 13px;
}
.mp-srv-label small {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
}
.mp-servings .stepper {
  font-size: 14px;
}
.mp-link {
  background: none;
  border: 0;
  padding: 0;
  font:
    600 12px 'Inter',
    system-ui,
    sans-serif;
  color: var(--green-text);
  cursor: pointer;
  text-decoration: none;
}
.mp-link:hover {
  text-decoration: underline;
}
.mp-chef {
  margin: 0 0 16px;
}
#om-pickup:not(:empty) {
  margin-top: 12px;
}
#om-pickup .transport,
.mp-chef.transport,
.strip-chef.transport {
  grid-template-columns: 1fr;
}
/* a planned dinner's card: the cook and ✨ Mix It Up share the row */
.mp-chef-row {
  margin: 0 0 16px;
}
.mp-chef-row .mp-chef {
  margin: 0;
}
.mp-chef-row.with-mix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.mp-chef-row .mp-mix {
  height: auto;
  min-height: 100%;
  justify-content: center;
  white-space: nowrap;
}
.tp-half[disabled] {
  cursor: default;
}
.tp-half[disabled]:hover {
  background: var(--surface-2);
}
.om-wait {
  font: inherit;
  font-size: 12.5px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-primary);
}
.mp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mp-actions .btn {
  flex: 1;
  justify-content: center;
  min-width: 130px;
}
.mp-remove {
  display: block;
  margin: 16px auto 0;
  color: var(--orange);
}
/* narrower phones (up to 400px): a little less padding, so the dates in the calendar’s header still fit, even for a week across two months */
@media (max-width: 400px) {
  .cal-header {
    gap: 4px;
    padding: 8px 10px;
  }
  .cal-today-btn {
    padding: 3px 7px;
  }
  .cal-view-toggle,
  .cal-collapse {
    padding: 0 6px;
    gap: 3px;
  }
  .cal-range-btn {
    padding: 3px 2px;
    gap: 4px;
  }
}

/* No double-tap zoom (see "No zooming" in layout.js) */
html {
  touch-action: manipulation;
}
/* iPhones enlarge text in anything wider than the screen; never: sizes are set on purpose */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A recipe card's favorite heart, top right */
.card-heart {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--on-photo);
  color: var(--text-secondary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.card-heart svg {
  width: 16px;
  height: 16px;
}
/* Favorite hearts are the delete red, the same everywhere (cards, a recipe's or order's toolbar), light and dark */
.card-heart.on {
  color: var(--red-fill);
}
.card-heart:hover {
  color: var(--red-fill);
}
/* The recipe popup's delete: a red trash can, which asks again */
.tb-icon.tb-delete {
  color: var(--red-fill);
}
.tb-icon.tb-delete:hover {
  background: var(--red-soft);
}
.tb-icon.tb-delete.armed {
  width: auto;
  padding: 0 10px;
  gap: 6px;
  background: var(--red-fill);
  color: #fff;
  font:
    600 12px 'Inter',
    system-ui,
    sans-serif;
  display: inline-flex;
  align-items: center;
}
.tb-icon.tb-delete.armed svg {
  width: 14px;
  height: 14px;
}

/* Imported calendars: one link box, then "Whose calendar is this?" */
.imp-link-row {
  display: flex;
  gap: 8px;
}
.imp-link-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
}
.imp-link-row .btn {
  flex-shrink: 0;
}
.imp-error {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--orange);
  line-height: 1.45;
}
.imp-error.checking {
  color: var(--text-muted);
}
.imp-found {
  font-size: 13.5px;
  color: var(--green-dark);
}
.imp-people {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.imp-person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font:
    500 14px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.imp-person:hover {
  background: var(--surface-2);
  border-color: var(--green);
}
.imp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* App builds without in-app purchase (APP_INFO.purchases) show no Subscribe button */
body.app-embedded .premium-subscribe:not(.can-buy) {
  display: none;
}

.imp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 2px;
}
.imp-chip {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-primary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imp-chip small {
  color: var(--text-muted);
  font-size: 11px;
}
.imp-chip.bad {
  background: var(--red-soft);
}

body.app-embedded .place-bar {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
} /* above the iOS app's tab bar */

/* ── Signed out: only the sign-in dialog, over a plain branded page ──
   (body.booting until we know; body.signed-out after: see setSignedIn) */
.landing {
  display: none;
}
body.booting .app,
body.signed-out .app {
  visibility: hidden;
}
body.booting .landing,
body.signed-out .landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: fixed;
  inset: 0;
  z-index: 150;
  padding: calc(env(safe-area-inset-top, 0px) + 44px) 24px 0;
  text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, var(--gold-light), var(--bg) 70%);
}
.landing-logo {
  font-size: 30px;
  line-height: 1;
}
.landing-logo .logo-apres,
.landing-logo .logo-school {
  font-size: 30px;
}
.landing-tag {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 320px;
}
body.signed-out .modal-backdrop {
  background: transparent;
  backdrop-filter: none;
  padding-top: calc(env(safe-area-inset-top, 0px) + 140px);
  align-items: flex-start;
}
body.signed-out .modal {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 156px);
  overflow-y: auto;
}
/* The phone's keyboard is up while typing in a popup (modalKeyboardFit in recipes.js): it sits above the
   keyboard and scrolls inside if it's taller. The backdrop stays full screen and, on phones, the card's color
   carries on behind the keyboard, which is see-through: no page showing through it, even while it slides
   away. After body.signed-out, so the sign-in box moves too. */
body .modal-backdrop.kb-up {
  padding-top: calc(var(--kb-top, 0px) + 8px);
  padding-bottom: var(--kb-h, 0px);
}
.modal-backdrop.kb-up > .modal {
  max-height: 100%;
  overflow-y: auto;
  padding-bottom: 0;
}
@media (max-width: 640px) {
  body .modal-backdrop.kb-up {
    background-image: linear-gradient(var(--surface), var(--surface));
    background-size: 100% var(--kb-h, 0px);
    background-position: bottom;
    background-repeat: no-repeat;
  }
  .modal-backdrop.kb-up > .modal {
    box-shadow: none; /* one surface with the color below it */
  }
}

/* ── Your own classes (classes.js) ── */
.add-own-class {
  margin: 12px 4px 4px;
}
.enrolled-badge.own {
  background: var(--surface-2);
  color: var(--text-secondary);
}
.own-notes {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  margin-top: 4px;
}
.oc-form {
  gap: 0;
  padding: 12px 18px 16px;
}
.oc-form .ar-field {
  margin-bottom: 10px;
}
.oc-form .ar-field textarea {
  min-height: 70px;
}
/* every box the same height: text, dropdowns and dates (each browser draws them a little differently) */
.oc-form .ar-field input:not([type='checkbox']),
.oc-form .ar-field select {
  height: 42px;
}
/* iPhone date boxes: an empty one is shorter and a filled one wider than its column */
.oc-form input[type='date'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  max-width: 100%;
}
.oc-add-notes {
  justify-self: start;
  margin: 0 0 10px;
}
.oc-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
/* a title that isn't a <label> (over a group of boxes) spaced like one, so fields side by side line up */
.ar-field > .oc-label {
  margin-bottom: 0;
  letter-spacing: 0.07em;
}
.oc-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ar-field .oc-chip,
.oc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font:
    500 13px 'Inter',
    system-ui,
    sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
  margin: 0;
  cursor: pointer;
}
.oc-chip.on {
  background: var(--green-light);
  border-color: var(--green-line);
}
.oc-chip input {
  accent-color: var(--green-dark);
}
.oc-chip .pitem-x {
  width: 20px;
  height: 20px;
  margin-right: -4px;
}
/* Who's Going: a box like the others that opens a list of children with a tick each (classes.js); the list opens
   in the form, not over it, so the popup's scrolling never cuts it off */
.oc-kids > summary.oc-kids-btn {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}
.oc-kids > summary.oc-kids-btn::-webkit-details-marker {
  display: none;
}
.oc-kids > summary.oc-kids-btn::before {
  content: none;
  display: none;
} /* a drop-down, not an expandable section: no shared ▸ */
.oc-kids-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-kids-btn > svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.oc-kids[open] > .oc-kids-btn {
  border-color: var(--green);
}
.oc-kids[open] > .oc-kids-btn > svg {
  transform: rotate(180deg);
}
.oc-kids-list {
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.ar-field .oc-kids-list .cal-show-row {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}
@media (max-width: 640px) {
  .oc-kids > summary.oc-kids-btn,
  .ar-field .oc-kids-list .cal-show-row {
    font-size: 16px;
  }
  .ar-field .oc-kids-list .cal-show-row {
    padding: 10px 8px;
  }
}
.oc-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.oc-day {
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font:
    600 12.5px 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-secondary);
  cursor: pointer;
}
.oc-day.on {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
}
.oc-times {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.oc-times:empty {
  display: none; /* no days picked yet: no gap */
}
.oc-time-row {
  display: grid;
  grid-template-columns: 38px 1fr auto 1fr;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}
.oc-time-row span:first-child {
  font-weight: 600;
}

.oc-pair {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* pinned to the popup's bottom, so Add Activity shows however long the form */
.oc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 4px -18px -16px;
  padding: 10px 18px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
}
.oc-actions .spacer {
  flex: 1;
}
.oc-remove {
  color: var(--orange);
}
.oc-remove.armed {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
@media (max-width: 640px) {
  .oc-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ── Plan the Menu (planweek.js) ── */
/* Premium buttons (an AI feature with a monthly allowance): gold, the same everywhere. Free features stay plain. */
.btn-premium,
.plan-week-btn,
.photo-cal-btn {
  white-space: nowrap;
  color: var(--gold-dark);
  border-color: var(--gold-mid);
  background: var(--gold-light);
}
/* Plan the Menu: dinners saved without ingredients (pwNoIngredients) */
.pw-noing {
  gap: 10px;
}
.pw-noing .pref-row-col {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pw-noing-acts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.pw-mix {
  padding: 14px 22px 6px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.pw-tri {
  width: 100%;
  max-width: 230px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  overflow: visible;
}
.pw-tri:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 8px;
}
.pw-tri-shape {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.pw-tri-badge > circle {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
}
.pw-tri-badge > text {
  font-size: 15px;
}
.pw-tri-badge.on > circle {
  fill: var(--green-light);
  stroke: var(--green);
  stroke-width: 3;
}
/* each corner's count for this plan (pwCountBadge): the green of the Plan button, a white number, popping when it goes up */
.pw-tri-count circle {
  fill: var(--green-deep);
  stroke: var(--surface);
  stroke-width: 2;
}
.pw-tri-count text {
  fill: #fff;
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
}
.pw-tri-count-in {
  transform-box: fill-box;
  transform-origin: center;
}
.pw-tri-count-in.pop {
  animation: pwPop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes pwPop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw-tri-count-in.pop {
    animation: none;
  }
}
.pw-tri-dot {
  fill: var(--green);
  stroke: var(--surface);
  stroke-width: 3;
  cursor: grab;
}
.pw-mix-note {
  font-size: 12px;
  color: var(--text-muted);
}
/* The popup's buttons stay put at the bottom; the middle scrolls (otherwise a short phone screen cut them off) */
#pw-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#pw-body > .pw-mix,
#pw-body > .pw-list,
#pw-body > .signin-form {
  overflow-y: auto;
  min-height: 0;
  flex: 0 1 auto;
}
#pw-body > .modal-foot {
  flex-shrink: 0;
}
#pw-body > .modal-foot .btn {
  justify-content: center;
  text-align: center;
} /* Cancel, Plan N Evenings, Get 3 Ideas, Approve: the words sit in the middle of their buttons */
/* Plan N Evenings, Get 3 Ideas, Find Ideas: the step that spends a plan, so the strongest gold, taking the bar's
   width beside Cancel (Approve, which spends nothing, stays the plain green main button) */
#pw-body > .modal-foot #pw-go {
  flex: 1 1 auto;
  max-width: 320px;
  background: var(--gold-mid);
  border-color: var(--gold);
  color: var(--text-primary);
  font-weight: 700;
}
#pw-body > .modal-foot #pw-go:disabled {
  background: var(--gold-light);
  border-color: var(--gold-mid);
  color: var(--text-muted);
}
/* Gliding between Whole Week and Plan a Meal (modalGlide): the toggle stays at the top, the days and buttons at the
   bottom, and only the middle grows or shrinks (clipped while it moves) */
#modal-box.gliding #pw-body > .pw-mix {
  flex: 1 1 auto;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#modal-box.gliding .pw-top {
  min-height: 0 !important;
  overflow: hidden;
}
#modal-box.gliding .pw-top > * {
  flex-shrink: 0;
} /* what's inside keeps its size and is uncovered or clipped, never squeezed (the triangle shrank and grew back) */
#pw-go {
  min-width: 12em;
} /* "Plan 6 Evenings" and "Get 3 Ideas" the same width, so Cancel never moves */
/* Whole Week ↔ One Meal: a heading's or button's new words fade in (pwSetSingle; not .pw-swap, the swap panel's layout) */
.pw-fade {
  animation: pwFade 0.24s ease;
}
@keyframes pwFade {
  from {
    opacity: 0;
  }
}
/* A popup over a popup (recipes.js openModalOver): the one behind steps back, then comes forward again */
.modal-under {
  z-index: 199;
  animation: none;
}
#modal:has(+ .modal-under) {
  background: rgba(26, 30, 18, 0.22);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
} /* the planner behind stays readable: lightly dimmed, a touch blurred */
.modal-under > .modal {
  transform: scale(0.94);
  transition: transform 0.22s ease;
  animation: underBack 0.22s ease;
} /* the top popup's backdrop gives it its light blur */
@keyframes underBack {
  from {
    transform: none;
  }
}
.modal.modal-refocus {
  animation: refocus 0.24s ease;
}
@keyframes refocus {
  from {
    transform: scale(0.94);
    filter: blur(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal-under > .modal {
    animation: none;
    transform: none;
  }
  .modal.modal-refocus {
    animation: none;
  }
}
/* A popup closing (recipes.js modalGhost): its copy fades, and on phones slides down and away */
.modal-ghost {
  pointer-events: none;
  animation: ghostOut 0.2s ease-in forwards;
}
.modal-ghost .modal {
  animation: ghostScale 0.2s ease-in forwards;
}
@keyframes ghostOut {
  to {
    opacity: 0;
  }
}
@keyframes ghostScale {
  to {
    transform: scale(0.97);
  }
}
@media (max-width: 640px) {
  .modal-ghost {
    animation: ghostBack 0.22s ease-in forwards;
  }
  .modal-ghost .modal {
    animation: ghostDrop 0.22s ease-in forwards;
  }
  @keyframes ghostBack {
    to {
      background: rgba(26, 30, 18, 0);
    }
  }
  @keyframes ghostDrop {
    to {
      transform: translateY(100%);
    }
  }
}
.pw-corner-notes {
  position: relative;
  width: 100%;
  margin-top: -4px;
} /* each note is placed under its corner (pwPlaceCornerNotes), up to half the screen wide */
.pw-corner-note {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(50vw, 100%);
  font-size: 11.5px;
  line-height: 1.35;
  text-align: center;
}
.pw-tri-badge.off {
  opacity: 0.35;
} /* an empty corner: none yet, and the dot can't go there */
.pw-free-note {
  text-align: center;
}
.pw-free-tag {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gold-text);
  background: var(--surface);
  border: 1px solid var(--gold-mid);
} /* Plan the Menu on Home, before the family's free plan is used */
.pw-out {
  padding-bottom: 14px;
} /* room under the days of the week */
.pw-out:has(.pw-leftoff) {
  padding-bottom: 6px;
} /* with a note under the days: about the same space above it (under the emojis) and below it */
body.app-embedded .pw-tri {
  max-width: 262px;
} /* iOS: the triangle a little shorter */
.pw-mix .meal-hint {
  justify-self: stretch;
  text-align: left;
  margin: 0;
}
/* the time-for-dinner-out tints: tiles and the tip's legend chips, dark grey text on each */
.pw-free,
.pw-some,
.pw-busy,
.pw-off {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  color: var(--day-ink);
  font-weight: 600;
  white-space: nowrap;
}
.pw-free,
.pw-dayb.free {
  background: var(--free-bg);
}
.pw-some,
.pw-dayb.some {
  background: var(--some-bg);
}
.pw-busy,
.pw-dayb.busy {
  background: var(--busy-bg);
}
.pw-off {
  background: var(--surface-2);
  color: var(--text-muted);
}
.pw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
} /* wraps to a second row on a narrow phone: a few points between the rows */
.pw-legend span {
  padding: 2px 7px;
}
.pw-out-h {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.pw-out {
  justify-self: stretch;
  text-align: left;
}
.pw-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 0 12px;
  font-size: 14px;
  white-space: nowrap;
}
.cal-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
  background: none;
}
@media (max-width: 640px) {
  .pw-nav {
    gap: 3px;
    margin-left: 6px;
    font-size: 13px;
  }
}
/* Mix It Up's one date, centered on the popup */
.modal-head:has(.pw-nav-mid) {
  position: relative;
}
.pw-nav.pw-nav-mid {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
/* the seven days, centered under the popup in every mode: a fixed size and spacing on computers, sharing the
   width evenly on phones (and in the iOS app); the phone rule comes second so it wins */
.pw-week {
  display: grid;
  grid-template-columns: repeat(7, 44px);
  gap: 10px;
  justify-content: center;
}
@media (max-width: 640px) {
  .pw-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
  }
}
.pw-dayb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 2px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--day-ink);
  font: inherit;
  line-height: 1.15;
  cursor: pointer;
}
.pw-dayb span {
  font-size: 10.5px;
}
.pw-dayb b {
  font-size: 13px;
}
.pw-dayb.off {
  color: var(--text-muted);
  background: var(--surface-2);
  opacity: 0.6;
  cursor: default;
}
.hint-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 2px;
}
.pw-dayb.on,
.pw-dayb.out {
  border: 2.5px solid var(--green-dark);
  padding: 0.5px 0;
  font-weight: 800;
} /* Plan a Meal's pick, and a Whole Week night marked for dining out (with its 🍽️) */
.pw-dayb:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.pw-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px;
  background: var(--surface-2);
}
.pw-seg button {
  border: 0;
  background: none;
  padding: 5px 12px;
  border-radius: 18px;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.pw-seg button.on {
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.pw-out-h {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pw-kids {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
/* drawn here, not the system's: phones lighten a ticked box's green in dark mode, so it matches Plan N Evenings */
.pw-kids input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.pw-kids input:checked {
  background: var(--green);
  border-color: var(--green);
}
.pw-kids input:checked::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.pw-kids input:focus-visible {
  outline: 2px solid var(--green-text);
  outline-offset: 2px;
}
.pw-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 22px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
/* planning: a bar and the step it's on (planweek.js, pwProgressTick) */
.pw-wait.pw-progress {
  flex-direction: column;
  gap: 16px;
  padding: 16px 22px 28px; /* the bar midway between the header's line and the step under it */
  text-align: center;
}
.pw-prog {
  width: min(320px, 100%);
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.pw-prog-bar {
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--gold-dark);
  transition: width 0.3s linear;
}
.pw-prog-step {
  font-weight: 600;
  color: var(--text-primary);
}
/* minmax(0, …): a long title or a drop-down's longest choice can't stretch the list past the popup */
.pw-list {
  position: relative; /* the cards trading evenings fly over it (pwTradeFly) */
  padding: 14px 22px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  overflow-y: auto;
}
.pw-summary {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 4px;
}
.pw-day {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 34px 9px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.pw-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.pw-x:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.pw-day.busy {
  opacity: 0.6;
}
.pw-date {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.25;
}
.pw-date b {
  font-size: 13px;
  color: var(--text-primary);
}
.pw-main {
  min-width: 0;
}
.pw-title {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pw-why {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.pw-warn {
  color: var(--orange);
  font-weight: 600;
}
.pw-new {
  font-size: 12px;
  margin-top: 4px;
}
.pw-new .link-btn {
  font-size: 12px;
}
.pw-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: 2px;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.pw-chip.ai {
  background: var(--gold-light);
  color: var(--gold-dark);
}
.pw-used {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: right;
}
/* Plan the Menu's evenings (planweek.js, pwDayRowHtml): a top line (day · ready · cook, tap to change),
   the picture, the dinner, and a 2×2 of buttons; hold one to drag it onto another evening */
.pw-day.pw-row {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 8px 8px 6px 10px;
  background: var(--surface);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pw-when {
  grid-column: 1 / 3;
  justify-self: start;
  padding: 2px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* the day, time and cook: underlined, each a native drop-down laid over the words */
.pw-u {
  position: relative;
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pw-u select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* the ready time: a plain button that opens time wheels, looking like the words around it */
button.pw-u {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}
.pw-u:hover,
.pw-u:focus-within {
  color: var(--text-primary);
}
.pw-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 28px;
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}
/* a new idea: no picture yet, so ✨ in a gold box (it's also the AI-suggested mark) */
.pw-thumb.ai {
  border: 1.5px solid var(--gold-dark);
  background: var(--gold-light);
  font-size: 24px;
}
.pw-acts {
  grid-column: 3;
  grid-row: 1 / span 2; /* level with the top line: the row stays short */
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, 42px);
  grid-auto-rows: 42px;
  gap: 4px;
}
.pw-act {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary); /* near white in dark mode */
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.pw-act svg {
  width: 20px;
  height: 20px;
} /* Swap's crossed arrows (ICON.shuffle) */
.pw-act:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.pw-act.wait {
  cursor: default;
}
/* ✓: in the cookbook (or one of their orders). A note, not a button: no box, a soft green check */
.pw-act.done {
  border-color: transparent;
  background: none;
  color: var(--green-text);
  opacity: 0.6;
  cursor: default;
}
.pw-clash {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
}
/* ✕: folded where it was, with Undo */
.pw-day.pw-folded {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 10px;
  border-style: dashed;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pw-folded .btn {
  text-transform: none;
  letter-spacing: 0;
}
/* trading evenings: copies of the two cards fly to their new places, lifted (pwTradeFly) */
.pw-row.pw-fly-row {
  position: absolute;
  z-index: 4;
  margin: 0;
  pointer-events: none;
  --pw-lift: 0 10px 26px rgba(0, 0, 0, 0.2);
}
/* held: it lifts and follows the finger; the evening under it is outlined */
.pw-row.pw-lifted {
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.pw-row.pw-drop {
  outline: 2px dashed var(--gold-dark);
  outline-offset: 2px;
}
/* ⇄'s popup: the Cookbook's square cards, two by two, the dinner planned now first */
.pw-swap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 16px;
}
.pw-swap .search-input {
  font-size: 16px;
}
.pw-swap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pw-sq {
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.pw-sq .card-heart {
  pointer-events: none;
}
.pw-sq.now {
  border: 2px solid var(--green);
}
/* under each card: where it comes from */
.pw-sq-label {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
/* a new idea from the plan: picking it looks up its recipe page, one of the month's meals */
.pw-sq-cost {
  color: var(--gold-text);
  font-weight: 600;
}
/* a new idea: no picture yet, ✨ in the gold box */
.recipe-thumb.pw-sq-ai {
  background: var(--gold-light);
  border: 1.5px solid var(--gold-dark);
  border-radius: 11px 11px 0 0;
}
/* under the cards: the whole Cookbook and Orders, as plain lists */
.pw-own {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-bottom: 12px;
}
.pw-own-lbl {
  font-size: 12px;
  color: var(--text-secondary);
}
.pw-own-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.pw-own-row select {
  flex: 1;
  min-width: 0;
}
/* the chosen card's picture, landing on its evening (pwLand) */
.pw-fly {
  position: fixed;
  z-index: 10000;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 0 0;
  border-radius: 11px 11px 0 0;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 0.35s;
}
@media (max-width: 640px) {
  .pw-day.pw-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 8px;
  }
  .pw-row .pw-thumb {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
}
/* Plan a Meal's results: its three ideas as rows on the evening's card, one chosen */
.pw-ideas {
  align-items: start;
}
.pw-ideas .pw-date {
  padding-top: 8px;
}
.pw-idea-list {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pw-idea {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.pw-idea.on {
  cursor: default;
  background: var(--green-light);
}
.pw-idea:not(.on):hover {
  background: var(--surface-2);
}
.pw-idea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.pw-idea-dot {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
}
.pw-idea.on .pw-idea-dot {
  border-color: var(--green-deep);
  background: radial-gradient(circle, var(--green-deep) 0 4px, var(--surface) 4.5px);
}
.pw-idea:not(.on) .pw-title {
  font-weight: 500;
}
@media (max-width: 640px) {
  .pw-day {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}
/* an event's 📍 place, and opposite it a small 🍽️ switch: counts as a meal (drivers.js, eventWhereRow) */
.ev-where-row {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ev-where {
  min-width: 0;
}
/* a place: tap for Maps, the icon shares it (drivers.js placeHtml) */
.ev-maps {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.ev-copy {
  display: inline-flex;
  vertical-align: middle;
  margin: -6px 0 -6px 2px;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.ev-copy svg {
  width: 14px;
  height: 14px;
}
.meal-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 14px;
}
.meal-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ms-track {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 9px;
  background: var(--border);
  transition: background 0.15s;
}
.ms-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.meal-switch input:checked + .ms-track {
  background: var(--green);
}
.meal-switch input:checked + .ms-track::after {
  transform: translateX(12px);
}
.meal-switch input:focus-visible + .ms-track {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.pw-leftoff {
  margin-top: 28px;
  font-size: 12px;
  color: var(--text-muted);
} /* margins merge with the days' 14px: 28 from the tiles is about 12 under their emojis */
.pw-leftoff + .pw-leftoff {
  margin-top: 6px;
}
.pw-cost.low {
  color: var(--orange);
  font-weight: 600;
} /* the month's planned meals running out */
.pw-skip {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 6px 10px;
}
.pw-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.pw-pick {
  max-width: 170px;
}
@media (max-width: 640px) {
  .pw-actions {
    grid-column: 2;
    flex-direction: row;
  }
  .pw-pick {
    max-width: none;
    flex: 1;
    min-width: 0;
  }
  /* compact on phones: the popup's dropdown can stay small (the page doesn't zoom), and the text steps down */
  .pw-list {
    padding: 10px 14px 6px;
  }
  .pw-day {
    gap: 6px 8px;
    padding: 8px 30px 8px 8px;
  }
  .pw-summary {
    font-size: 12.5px;
  }
  .pw-title {
    font-size: 13px;
  }
  .pw-why,
  .pw-new,
  .pw-new .link-btn {
    font-size: 11.5px;
  }
  .pw-date b {
    font-size: 12px;
  }
  .pw-actions .btn {
    font-size: 12px;
    padding: 4px 9px;
  }
  select.pw-pick {
    font-size: 12.5px !important;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ── From a calendar photo (photocal.js) ── */
.add-own-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 4px 4px;
}
.add-own-row .add-own-class {
  margin: 0;
}
.add-own-row > .btn {
  justify-content: center;
  text-align: center;
}
@media (max-width: 640px) {
  .add-own-row {
    flex-wrap: nowrap;
  }
  .add-own-row > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 6px;
  }
} /* phones and the iOS app: the three share the row evenly */
@media (max-width: 359px) {
  .add-own-row > .btn {
    white-space: normal;
  }
} /* the smallest phones: "From a Photo" may take two lines rather than spill out */
.pc-event {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.pc-event.off {
  opacity: 0.5;
}
.pc-event > input[type='checkbox'] {
  margin-top: 10px;
  accent-color: var(--green-dark);
  width: 16px;
  height: 16px;
}
.pc-fields {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.pc-title {
  font-weight: 600;
}
.pc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
}
.pc-row .form-input {
  width: auto;
  min-width: 0;
}
.pw-chip.warn {
  background: var(--orange-tint);
  color: var(--orange);
  justify-self: start;
}

/* Plan the Menu: the choice, and saved weeks (planweek.js) */
.sw-pick {
  gap: 8px;
}
.sw-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}
.sw-option:hover {
  border-color: var(--green);
  background: var(--green-light);
}
.sw-option small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}
.sw-icon {
  font-size: 20px;
  line-height: 1.2;
}
.pw-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--gold-light);
  border-radius: 6px;
  padding: 1px 6px;
  vertical-align: 1px;
}
.sw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13.5px;
}
.sw-row .tb-icon.armed {
  color: #fff;
  background: var(--orange);
}
.sw-save-btn {
  justify-self: start;
  margin-top: 6px;
}
.sw-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}
.sw-list {
  display: grid;
  gap: 2px;
  max-height: 50vh;
  overflow-y: auto;
}
.sw-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 2px;
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}
.sw-item input {
  margin-top: 3px;
  accent-color: var(--green-dark);
  flex-shrink: 0;
}
.sw-item.off > span {
  color: var(--text-muted);
}
.sw-note {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.sw-item.moved .sw-note {
  color: var(--gold-dark);
}

/* Place and address suggestions (classes.js attachPlaceSuggest) */
.oc-form .ar-field {
  position: relative;
}
.place-sugg {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin-top: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.place-sugg button {
  display: grid;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.place-sugg button:hover,
.place-sugg button:focus {
  background: var(--surface-2);
  outline: none;
}
.place-sugg button span {
  font-size: 12px;
  color: var(--text-muted);
}
.place-sugg-wait {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.place-sugg-wait .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
  flex-shrink: 0;
}
.pantry-add {
  position: relative;
}
.pantry-sugg[hidden] {
  display: none;
}
.place-sugg-by {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
  padding: 4px 10px;
}

/* Orders: ↻ checks for newly emailed receipts */

/* Share → AprèsSchool with a picture: what is it? */
.share-pick {
  display: grid;
  gap: 8px;
  padding: 16px 22px 22px;
}
.share-pick .btn {
  justify-content: flex-start;
  padding: 12px 14px;
  font-size: 14px;
}

/* Pantry: each place's items by kind (Herbs & Spices, Dairy & Eggs…), closed until opened */
.pkind + .pkind,
.pkind + .pitem {
  border-top: 1px solid var(--border-subtle);
}
.pkind-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}
.pkind-btn:hover {
  background: var(--surface-2);
}
.pkind .pkind-items {
  display: none;
}
.pkind.open .pkind-items {
  display: block;
}
.pkind.open .groc-caret {
  transform: rotate(90deg);
}
.pkind-btn .groc-n {
  font-weight: 600;
  letter-spacing: 0;
}

/* A teen's dot on a grocery item they added, in their color */

/* Food allergies: a red icon, and the note that goes with it */
.allergy-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  border-radius: 50%;
  background: #d92d20;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  vertical-align: 1px;
  flex: none;
}
.pw-allergy {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  margin-top: 3px;
}
.pw-allergy.soft {
  font-weight: 500;
  color: var(--text-muted);
}
.pw-allergy-banner {
  background: var(--red-light);
  border: 1px solid var(--red-line);
  color: var(--red);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.pw-allergy-banner .allergy-flag {
  margin: 0 4px 0 0;
}
.mp-allergy {
  background: var(--red-light);
  border: 1px solid var(--red-line);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 10px;
  font-size: 13px;
}
.mp-allergy .allergy-flag {
  margin: 0 6px 0 0;
}

/* People → Chef: the checkbox, then the skill level when ticked */
.cg-chef {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.cg-skill {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}

/* Settings groups: each opens and closes (toggleSetGroup remembers which) */
.set-group {
  border-top: 1px solid var(--border);
}
.set-group:first-child {
  border-top: none;
} /* lines go between groups, none above the first */
/* Settings' first group title starts level with the first heading on Account's other tabs */
#account-panel-settings .account-form > .set-group:first-child > summary {
  padding-top: 0;
}
.set-group:last-child {
  border-bottom: 1px solid var(--border);
}
.set-group > summary,
.fwd-platform > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.set-group > summary::before,
.fwd-platform > summary::before {
  margin-right: 0;
}
/* phones: the grey note under its title, lined up with it (not wrapping back under the arrow) */
@media (max-width: 640px) {
  .set-group > summary,
  .fwd-platform > summary {
    row-gap: 2px;
  }
  .set-group > summary .set-hint,
  .fwd-platform > summary .set-hint {
    flex-basis: 100%;
    padding-left: 22px;
  }
}
/* group titles look like Profile's headings (.section-heading): small capitals in the muted beige */
.set-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.set-hint {
  font-size: 12px;
  color: var(--text-muted);
}
/* whose setting it is: yours only, or everyone's in the family */
.set-who {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 1px 8px;
  align-self: center;
}
.set-saves {
  margin-top: 12px;
  text-align: center;
}
.set-body {
  padding: 0 0 14px 22px;
}
.set-sub {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 16px 0 8px;
}
.set-sub:first-child {
  margin-top: 2px;
}
.premium-plan-note {
  margin: 6px 0 4px;
  padding: 0 2px;
}

/* ── The search and add boxes on Cookbook, Orders, Pantry and Groceries stay at the top ──
   Pinned while the list scrolls. No background where they rest; once the
   list slides under them, a frosted one with a soft shadow (add-stuck). On
   phones they slide up under the calendar bar while you scroll down and slide
   back down when you scroll up (layout.js, wireAddBars); out quicker than in. */
.pantry-top,
.groc-top,
#meals-panel-cookbook > .cookbook-search,
#orders-top {
  position: sticky;
  top: 0;
  z-index: 20;
  /* out to the page's edges, but 8px short on the right: iPhones draw the scroll indicator there, under the bar */
  margin: -12px -16px 10px -24px;
  padding: 12px 16px 10px 24px;
  /* always the page's own color: the same as no background where it rests, and solid from the first frame
     once the list is under it (waiting for add-stuck let the list show through for a moment, then faded in) */
  background: var(--bg);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.15s ease,
    box-shadow 0.2s ease;
}
/* pinned: a soft shadow under it, the list scrolling beneath */
body.add-stuck .pantry-top,
body.add-stuck .groc-top,
body.add-stuck #meals-panel-cookbook > .cookbook-search,
body.add-stuck #orders-top {
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.25);
}
body.add-tucked .pantry-top,
body.add-tucked .groc-top,
body.add-tucked #meals-panel-cookbook > .cookbook-search,
body.add-tucked #orders-top {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.16s ease-in,
    opacity 0.16s ease-in,
    box-shadow 0.2s ease;
}
/* a tab just opened: its box is simply there, no fade or slide (addBarReset) */
body.add-instant .pantry-top,
body.add-instant .groc-top,
body.add-instant #meals-panel-cookbook > .cookbook-search,
body.add-instant #orders-top {
  transition: none;
}
/* the tab coming in while swiping (layout.js): its own box showing at the top, whatever the one leaving is doing;
   pinned (solid, with the shadow) if it comes in partway down its list */
body .tab-in .pantry-top,
body .tab-in .groc-top,
body #meals-panel-cookbook.tab-in > .cookbook-search,
body .tab-in #orders-top {
  transform: none;
  opacity: 1;
  background: var(--bg);
  box-shadow: none;
  transition: none;
}
body .tab-in-scrolled .pantry-top,
body .tab-in-scrolled .groc-top,
body #meals-panel-cookbook.tab-in-scrolled > .cookbook-search,
body .tab-in-scrolled #orders-top {
  background: var(--bg);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.25);
}

/* Pantry: the add box sits as far above the filter (or Quick Add) as the filter does above Fridge, 14px
   (10px of the bar's own padding, kept so it looks the same pinned) */
.pantry-top {
  margin-bottom: 4px;
}
#pantry-staples {
  margin-bottom: 14px;
}
#pantry-staples:empty {
  display: none;
}
/* Cookbook and Orders keep their usual 16px gap below the bar */
#meals-panel-cookbook > .cookbook-search,
#orders-top {
  margin-bottom: 16px;
}
#orders-top > .cookbook-search {
  margin-bottom: 0;
}

/* ── Swipe hint (layout.js, swipeHintMaybe): a dot gliding over ‹‹‹ on a soft blotch ── */
.swipe-hint {
  position: fixed;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 150;
  width: 280px;
  height: 170px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  pointer-events: none;
  animation: sh-in 0.4s ease both;
  transition: opacity 0.3s ease;
}
.swipe-hint.out {
  opacity: 0;
}
.swipe-hint::before {
  content: '';
  position: absolute;
  inset: -30px -20px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(40, 40, 34, 0.16),
    rgba(40, 40, 34, 0.08) 55%,
    transparent
  );
  filter: blur(6px);
}
.sh-track {
  position: relative;
  width: 150px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.sh-track b {
  font:
    700 26px/1 system-ui,
    sans-serif;
  color: #4a4a42;
  animation: sh-chev 1.8s ease-in-out infinite;
}
.sh-track b:nth-child(2) {
  animation-delay: 0.15s;
}
.sh-track b:nth-child(1) {
  animation-delay: 0.3s;
}
.sh-dot {
  position: absolute;
  right: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: rgba(30, 30, 26, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  animation: sh-glide 1.8s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}
.sh-dot::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
/* on a see-through pill, so it reads over whatever is under it */
.sh-text {
  font-size: 14px;
  font-weight: 600;
  color: #2f2f29;
  padding: 7px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
@keyframes sh-glide {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  75% {
    transform: translateX(-110px);
    opacity: 1;
  }
  100% {
    transform: translateX(-110px);
    opacity: 0;
  }
}
@keyframes sh-chev {
  0%,
  100% {
    opacity: 0.35;
  }
  40% {
    opacity: 1;
  }
}
@keyframes sh-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sh-dot,
  .sh-track b {
    animation: none;
  }
}

/* ── A grocery receipt to check (pantry.js): instead of the pantry until it's added or put off ── */
.receipt-review {
  margin-bottom: 12px;
}
.receipt-title {
  margin: 4px 0 2px;
  font-size: 18px;
}
/* a tick, then the row exactly as the pantry shows it (.pitem); a note under it for a replacement or Keep on My List */
.rcpt-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  position: relative;
  z-index: 1;
  background: var(--surface);
  transition: transform 0.18s ease-out;
}
.rcpt-row > .groc-check {
  margin: 0 0 0 12px;
}
.rcpt-row > .pitem {
  padding-left: 10px;
}
.rcpt-row > .pitem {
  border-bottom: 0;
}
.rcpt-swipe {
  border-bottom: 1px solid var(--border-subtle);
}
.rcpt-swipe:last-child {
  border-bottom: 0;
}
.rcpt-note {
  position: relative;
  z-index: 1;
  background: var(--surface);
  padding: 0 12px 8px 46px;
  font-size: 12px;
  color: var(--text-muted);
}
/* swiping one away (touch screens): it slides over "✕ Remove", red once it's far enough, like Home's */
.rcpt-swipe {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
.rcpt-swipe.dragging .rcpt-row {
  transition: none;
}
.rs-left {
  left: 0;
  right: 0;
  justify-content: flex-start;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.rs-right {
  left: 0;
  right: 0;
  justify-content: flex-end;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.rcpt-swipe.to-right .rs-left,
.rcpt-swipe.to-left .rs-right {
  display: flex;
}
.rcpt-swipe.armed .rs-left,
.rcpt-swipe.armed .rs-right {
  background: var(--red-tint);
  color: var(--red);
}
.rcpt-loc {
  font: inherit;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.rcpt-loc:disabled {
  text-decoration: none;
  cursor: default;
  color: var(--green-text);
}
.rcpt-more {
  margin: 10px 0;
}
.rcpt-more summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 0;
}
.rcpt-add {
  margin: 12px 0;
}
.rcpt-go {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
}
/* Add N to Pantry stays in view at the bottom of the popup while the list scrolls */
.rcpt-go {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
}
/* the food grouped as in the pantry: a card per place, kinds under small headings */
.rcpt-place {
  margin: 12px 0;
}
.rcpt-place .putaway-rows {
  padding: 0;
}
.rcpt-kind {
  padding: 10px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Add to Pantry: the items land (receiptTakeOff / receiptLand in pantry.js) */
.land-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 400;
}
.land-chip {
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  background: var(--surface);
  border-radius: 0;
  will-change: transform;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.3);
}
.rcpt-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

/* ── Expand All / Collapse All: one small link above the aisles (Groceries) and the groups (Pantry) ── */
.expand-row {
  display: flex;
  justify-content: flex-end;
  margin: -2px 2px 6px;
}
.expand-all {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-dark);
}
.expand-all:hover {
  text-decoration: underline;
}
/* Departure Alerts while the app's location isn't Always (departures.js): greyed, with a note and a button to Settings */
.notif-blocked .pref-label {
  color: var(--text-muted);
}
.notif-blocked .pref-sublabel .link-btn {
  margin-left: 4px;
  font-size: inherit;
}
.notif-blocked select:disabled {
  opacity: 0.55;
}
:root[data-theme='dark'] .expand-all {
  color: var(--text-muted);
} /* green stood out on a dark page: the headings' grey */
/* the Groceries add box: the Add button that takes the place of + Usuals while you type */
.groc-add-btn {
  flex-shrink: 0;
  margin-left: 8px;
}
.groc-add-btn[hidden],
.groc-top .usuals-dd[hidden] {
  display: none;
}

/* ── Expandable sections (<details>): one arrow everywhere, the same as Pantry's ── */
details > summary {
  cursor: pointer;
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
/* Pantry's own arrow (.groc-caret): a 15px ▸ that turns to point down when open; bold like Pantry's (its heading's weight), or it looks smaller */
details > summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  margin-right: 6px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  color: var(--text-muted);
  font-weight: 700;
  transition: transform 0.15s;
}
details[open] > summary::before {
  transform: rotate(90deg);
}
a.btn {
  text-decoration: none;
} /* a link dressed as a button (Privacy Policy → View) */
/* Home: dinners are full-width rows like every other section (not tiles), Cooked / Skipped side by side */
.home-section .make-row {
  grid-template-columns: minmax(0, 1fr);
}
@media (hover: hover) {
  .home-section .make-row .make-acts {
    flex-direction: row;
  }
}
/* Home's "No dinner yet" evening on the calendar (recipes.js, dinnerSlot): a bold dashed gold outline that
   travels around the box ("marching ants"), a soft yellow fill; still with Reduce Motion */
.dinner-slot {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 0;
  border-radius: 4px;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--gold) 50%, transparent 0) top left / 12px 2.5px repeat-x,
    linear-gradient(90deg, var(--gold) 50%, transparent 0) bottom left / 12px 2.5px repeat-x,
    linear-gradient(0deg, var(--gold) 50%, transparent 0) top left / 2.5px 12px repeat-y,
    linear-gradient(0deg, var(--gold) 50%, transparent 0) top right / 2.5px 12px repeat-y,
    rgba(240, 200, 80, 0.22);
  animation: dinner-ants 1s linear infinite;
}
@keyframes dinner-ants {
  to {
    background-position:
      12px 0,
      -12px 100%,
      0 -12px,
      100% 12px,
      0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dinner-slot {
    animation: none;
  }
}
/* the box a carried card would land in sits over the day's events, with its time */
#card-drop {
  z-index: 6;
  padding: 2px 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--gold-text);
  overflow: hidden;
}
/* a recipe or order card carried to the calendar by touch (gestures.js, cardHold): the card fades where it was,
   a chip with its emoji and name follows the finger, and the day under it shows the dinner slot box */
.recipe-card.lifted {
  opacity: 0.45;
  transform: scale(0.98);
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.card-chip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  pointer-events: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1.5px solid var(--gold);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Driver access (only their own drives): no calendar, Classes or Meals */
body.driver-only .calendar-section,
body.driver-only #nav-classes,
body.driver-only #nav-meals {
  display: none !important;
}
/* Visible To on a calendar or event you added (imports.js visibleToHtml) */
.vis-to {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.vis-to label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vis-to .swatch-note {
  margin: 0;
}
.gs-note {
  margin-top: 3px;
}
.gs-note .link-btn {
  font-size: inherit;
  padding: 0;
}
/* Per-child access: the Children ticks on a person's card (family.js childrenPickHtml) */
.kid-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-self: start;
}
.kid-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
/* Linked children: a child's other households, and the driver list's heading for theirs (linked.js) */
.linked-row {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
.tp-head2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 8px 10px 2px;
}
/* Which Setup Is Right for Us? (family.js openSetupGuide): one choice, the picked one opens */
.setup-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.setup-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.setup-opt.on {
  border-color: var(--green);
  background: var(--green-light);
}
.setup-opt input {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--green);
}
.setup-opt-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.setup-opt-text small {
  font-size: 12px;
  color: var(--text-muted);
}
.setup-now {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green);
}
.setup-detail {
  padding: 4px 4px 10px 12px;
  font-size: 13px;
}
.setup-guide .setup-facts {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 3px 8px;
  margin: 4px 0 0;
}
.setup-guide .setup-facts dt {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-top: 2px;
}
.setup-guide .setup-facts dd {
  margin: 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.setup-steps {
  margin: 10px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.setup-steps:has(> li:only-child) {
  list-style: none;
  padding-left: 0;
}
.setup-act {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.setup-changes {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
}
.clash-card {
  border-left: 3px solid var(--orange);
} /* Home: a drive or dinner that clashes with your private calendar */

/* Adding or editing an event by hand (openEventForm in photocal.js) */
.ef-times {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ef-times .time-pick {
  width: auto;
  min-width: 0;
  flex: 0 1 130px;
}
.ef-allday-note {
  font-size: 14px;
  color: var(--text-secondary);
}
.ef-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  margin-left: auto;
}
.ef-check input {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  margin: 0;
}
.ef-repeat {
  margin-left: 0;
}

/* Calendar search (toggleCalSearch / renderCalSearch in calendar.js) */
.cal-header {
  position: relative;
}
.cal-search-btn {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.cal-search-btn:hover,
.cal-search-btn[aria-expanded='true'] {
  background: var(--surface-2);
  color: var(--text-primary);
}
.cal-search {
  position: absolute;
  top: calc(100% - 2px);
  right: 12px;
  z-index: 62;
  width: min(420px, calc(100vw - 24px));
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(30, 40, 20, 0.18);
}
.cal-search[hidden] {
  display: none;
}
.cal-search-results {
  margin-top: 8px;
  max-height: min(60vh, 440px);
  overflow-y: auto;
}
.cal-search-note {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 6px 4px;
}
.cal-search-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 10px 6px 4px;
}
.cal-search-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}
.cal-search-row:hover {
  background: var(--surface-2);
}
.cal-search-row .class-dot {
  margin-top: 5px;
  flex-shrink: 0;
}
.cal-search-row.past {
  opacity: 0.7;
}
.csr-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.csr-title {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.csr-when {
  font-size: 12px;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .cal-search-btn {
    order: 2;
    height: 24px;
    width: 26px;
  }
  .cal-search {
    left: 12px;
    right: 12px;
    width: auto;
  }
  .cal-search .search-input {
    font-size: 16px;
  }
}
.cal-view-toggle.has-hidden::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: -1px;
}
/* phones: the calendar's Hide is just its arrow (room for the dates and the 🔍) */
@media (max-width: 640px) {
  .cal-collapse .cc-label {
    display: none;
  }
  .cal-collapse {
    padding: 0 7px;
  }
}
/* People cards: what you can't change shows grayed (taps save on the card; typing is Edit Details) */
.chip:disabled {
  opacity: 0.55;
  cursor: default;
}
.locked {
  opacity: 0.55;
  pointer-events: none;
}
/* Plan the Menu: the dot's leaning as counts, under the triangle (pwCountsLine) */
.pw-counts {
  font-size: 13px;
  color: var(--text-primary);
  text-align: center;
  margin: 4px 0 10px;
  line-height: 1.45;
}
/* what's already on a grayed-out day: its kind's emoji in the corner, at full strength */
.pw-day-kind {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}
.pw-dayb.off .pw-day-kind {
  opacity: 0.45;
}
.pw-day-kind.new {
  font-size: 15px;
  margin-top: 1px;
} /* the plate is pale itself: a little bigger, so a night out being added stands out */
.pw-dayb.out b {
  font-weight: 800;
} /* planned already: settled, so faded; a dinner out being added (.new) is full color */
.pw-day-kind.pop {
  animation: pwDayPop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes pwDayPop {
  0% {
    transform: translateX(-50%) scale(1);
  }
  40% {
    transform: translateX(-50%) scale(1.45);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw-day-kind.pop {
    animation: none;
  }
}
.pw-week {
  margin-bottom: 14px;
} /* room for the emojis under the days, kept when there are none so the days never shift */
.pw-dayb.off:has(.pw-day-kind) {
  opacity: 1;
  cursor: pointer;
}
.pw-dayb.off:has(.pw-day-kind) span,
.pw-dayb.off:has(.pw-day-kind) b {
  opacity: 0.55;
}
.pw-counts:empty {
  display: none;
}
.pw-counts:has(> .sr-only:only-child) {
  margin: 0;
} /* only the spoken sentence: no room taken (display: none would silence it too) */
/* Text for screen readers only (e.g. Plan the Menu's counts, said in words instead of emojis) */
/* No connection (core.js netBanner): a slim pill at the top, over everything, never covering the status bar */
#net-banner {
  position: fixed;
  z-index: 400;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 7px 14px;
  border-radius: 18px;
  background: var(--text-primary);
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 14px rgba(20, 26, 12, 0.25);
  pointer-events: none;
}
#net-banner[hidden] {
  display: none;
}
.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;
}
/* Plan the Menu: Whole Week | Plan a Meal, and the one-meal choices */
.pw-mode {
  display: flex;
  width: max-content;
  margin: 0 auto 4px;
} /* the grid's 10px gap makes 14 between the switch and the presets, */
.pw-mix > .pw-top > .pw-tri {
  margin-top: 8px;
} /* and this plus the triangle's own 6 makes 14 between the presets and the triangle */
.pw-meal-kinds.one {
  grid-template-columns: minmax(0, 1fr);
}
.pw-meal-kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 12px;
}
.pw-meal-kind {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}
.pw-meal-kind.on {
  border-color: var(--green-dark);
  background: var(--green-light);
}
.pw-meal-kind b {
  display: block;
  font-size: 14px;
}
.pw-meal-kind small {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.pmk-emo {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.pw-meal-opts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}
.pw-where {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 12px;
}
.pw-quick {
  display: inline-flex;
  margin: 0;
}
.pw-toggle {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pw-toggle.on {
  background: var(--green-light);
  border-color: var(--green-dark);
  color: var(--text-primary);
}
.pw-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pw-meal .pw-top {
  align-items: stretch;
}
.pw-near {
  display: inline-flex;
  margin: 0;
}
.pw-zip {
  width: 72px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  font: inherit;
  font-size: 13px;
  text-align: center;
  background: var(--surface);
  color: var(--text-primary);
}
@media (max-width: 640px) {
  .pw-zip {
    font-size: 16px;
  }
}
.pw-meal-own {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.home-open-day {
  font-weight: 700;
  color: inherit;
  padding: 8px 6px;
  margin: -8px 1px;
} /* a bigger tap target, more room between days, same line height */

/* ── Dark mode: pictures and a few fixed colors ── */
:root[data-theme='dark'] img {
  filter: brightness(0.9);
} /* photos glare on a dark page */
/* the pale squares behind a recipe's emoji (and Connections' icons): the same hue, deeper, the emoji untouched */
:root[data-theme='dark']
  :is(.recipe-thumb, .result-thumb, .make-thumb, .mp-thumb, .rv-thumb, .order-thumb, .conn-icon) {
  box-shadow: inset 0 0 0 100px rgba(22, 20, 18, 0.6);
}
:root[data-theme='dark'] .week-event.dim,
:root[data-theme='dark'] .cal-event.dim {
  opacity: 0.5;
} /* .38 sinks into a dark page */
/* Google's and Apple's own dark-page buttons */
:root[data-theme='dark'] .google-btn {
  background: #131314;
  color: #e3e3e3;
  border-color: #8e918f;
}
:root[data-theme='dark'] .google-btn:hover {
  background: #1f1f21;
}
:root[data-theme='dark'] .apple-btn {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}
:root[data-theme='dark'] .apple-btn:hover {
  background: #e8e8e8;
}
:root[data-theme='dark'] .swipe-hint::before {
  background: radial-gradient(
    closest-side,
    rgba(234, 230, 224, 0.14),
    rgba(234, 230, 224, 0.06) 55%,
    transparent
  );
}
:root[data-theme='dark'] .sh-track b {
  color: var(--text-secondary);
}
:root[data-theme='dark'] .sh-text {
  color: var(--text-primary);
}
:root[data-theme='dark'] .sh-dot {
  background: rgba(234, 230, 224, 0.5);
}
:root[data-theme='dark'] .sh-dot::after {
  background: rgba(22, 20, 18, 0.85);
}

/* ── Find classes with AI (find.js): the Plan the Menu look ── */
.fc-setup {
  text-align: left;
  justify-items: stretch;
}
.fc-setup .pw-seg {
  justify-self: center;
}
.fc-for {
  font-size: 14px;
  text-align: center;
}
.fc-row {
  display: grid;
  gap: 6px;
}
.fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fc-typed {
  width: 100%;
  box-sizing: border-box;
}
.fc-two {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fc-two .filter {
  display: grid;
  gap: 4px;
}
.fc-dayb {
  color: var(--text-secondary);
  background: var(--surface-2);
}
.fc-dayb.on {
  background: var(--free-bg);
  color: var(--day-ink);
}
.fc-dayb:not(.on) b {
  color: var(--text-muted);
}
.fc-fit {
  width: 100%;
  accent-color: var(--green);
  margin: 0;
}
.fc-fit-ends {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: -2px;
}
#fc-fit-words {
  text-align: center;
}
/* Find Activities' results (find.js, fcListView): Plan the Menu's rows without the picture: the class
   across the top, then its details with the 2×2 of buttons beside them. The list keeps the heading's
   margins (no inset of its own on this tab). */
.find-tab .pw-list.fc-list {
  padding-left: 0;
  padding-right: 0;
}
.pw-day.pw-row.fc-day,
.pw-day.pw-row.fc-place {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  -webkit-user-select: text;
  user-select: text;
}
.fc-title {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}
.fc-day .pw-main,
.fc-place .pw-main {
  grid-column: 1;
  grid-row: 2;
}
.fc-day .pw-acts,
.fc-place .pw-acts {
  grid-column: 2;
  grid-row: 2;
}
.fc-when {
  font-weight: 600;
  color: var(--text-secondary);
}
/* the chat icon (img/chat.png), in the text's color in light and dark */
.fc-chat {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url(../img/chat.png) center / contain no-repeat;
  mask: url(../img/chat.png) center / contain no-repeat;
}
/* Call, Text (and Email): side by side, a little bigger than other buttons */
/* Find results (find.js): a place's letter, the days a class meets (fit green, clash orange, no set times grey),
   its facts as pills, and the child's name in their colour (deeper in light mode, lighter in dark, to read) */
.fc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: -4px;
  background: var(--badge);
  background: color-mix(in srgb, var(--badge) 85%, black);
  color: var(--on-fill);
  font-size: 11px;
  font-weight: 700;
}
.fc-week {
  display: flex;
  gap: 2px;
  margin: 3px 0 1px;
}
.fc-week i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--border);
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.fc-week i.on {
  color: var(--on-fill);
}
.fc-week.fit i.on {
  background: var(--green);
}
.fc-week.clash i.on {
  background: var(--orange);
}
.fc-week.open i.on {
  background: var(--text-muted);
}
.fc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.fc-pill {
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.fc-pill.free {
  background: var(--gold-light);
  color: var(--gold-text);
}
.fc-pill.none {
  background: var(--surface-2);
  color: var(--text-muted);
}
.fc-kid {
  color: var(--kid);
  color: color-mix(in srgb, var(--kid) 80%, black);
}
:root[data-theme='dark'] .fc-kid {
  color: color-mix(in srgb, var(--kid) 65%, white);
}
.fc-ask-ways {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.fc-ask-ways .btn {
  text-align: center;
  justify-content: center;
  font-size: 15px;
  padding: 9px 12px;
}
.fc-day .pw-act,
.fc-place .pw-act {
  font-size: 18px;
}
.fc-day .pw-act.fc-flag {
  color: var(--text-muted);
  font-weight: 800;
}
/* "!": what's wrong (find.js, flagFound) */
.rcpt-seen {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--orange);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}
.rcpt-seen b {
  color: var(--orange);
}
.fc-flag-why {
  margin: 10px 0 16px;
}
.fc-links {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.fc-links .link-btn {
  margin: 0;
  font-size: 11.5px;
}
.fc-prov {
  font-weight: 500;
  color: var(--text-secondary);
}
.fc-ok {
  color: var(--green-dark);
  font-weight: 600;
}
.fc-some {
  color: var(--orange);
  font-weight: 600;
}
.fc-unknown {
  color: var(--text-muted);
}
.fc-after {
  margin: 4px 0 0;
}
.fc-missed {
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.fc-missed .btn {
  flex: none;
}
.fc-soon-or {
  font-size: 13px;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .pw-day.pw-row.fc-day,
  .pw-day.pw-row.fc-place {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* The class form: fill in from a schedule, ages, price, sign-up link, sharing (classes.js) */
.oc-import {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px dashed var(--gold-mid);
  border-radius: 10px;
  background: var(--gold-light);
  font-size: 13px;
}
.oc-import.filled {
  border-style: solid;
  border-color: var(--green-line);
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 600;
}
.oc-import .oc-label {
  margin: 0;
}
.oc-imp-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.oc-imp-ways .btn.on {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green-dark);
}
.oc-imp-row {
  display: flex;
  gap: 6px;
}
.oc-imp-row input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}
.oc-import textarea + .btn {
  justify-self: start;
}
.oc-found {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.oc-found:hover {
  border-color: var(--green);
}
.oc-found span {
  color: var(--text-muted);
  font-size: 12px;
}
.oc-ages {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.oc-ages input {
  width: 70px;
  flex: 1;
  min-width: 0;
}
.oc-ages select {
  width: auto;
  flex: 1;
  min-width: 0;
}
.oc-share {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 2px;
  font-size: 13.5px;
  cursor: pointer;
}
.oc-share input {
  margin-top: 3px;
  accent-color: var(--green-dark);
}
.oc-share small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}

/* Find Classes: classes near home (find.js), and the ✨ search beside the search box like Plan the Menu */
.find-top {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 720px;
  margin-bottom: 16px;
}
.find-top .find-search {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.find-ai-btn {
  flex: none;
}
/* Find Classes on its tab: the search's fields, or its last results (find.js renderFindTab) */
.find-tab {
  max-width: 720px;
}
.find-tab .fc-setup {
  padding: 4px 0 0;
}
.fc-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 0 8px;
}
.fc-results-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.fc-searched {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Without Premium: what it does, then Get Premium */
.find-premium {
  max-width: 560px;
  margin: 0 auto;
}
.find-premium h3 .pw-badge {
  vertical-align: middle;
  margin-left: 6px;
}
.find-premium-line {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 6px 0 0;
}
.premium-points {
  text-align: left;
  margin: 14px auto 20px;
  padding-left: 20px;
  width: fit-content;
  max-width: 100%;
  display: grid;
  gap: 8px;
  font-size: 15px;
  color: var(--text-primary);
}
.premium-points b {
  color: var(--text-primary);
}
.find-premium-or {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 14px;
}
.rtag.shared {
  background: var(--green-light);
  color: var(--green-dark);
}
.shared-item {
  border-color: var(--green-line);
}
@media (max-width: 640px) {
  .find-ai-btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.fc-more {
  display: flex;
  justify-content: center;
  padding: 2px 0 4px;
}
.fc-open {
  font-weight: 600;
}
.fc-open.ok {
  color: var(--green-dark);
}
.fc-open.some {
  color: var(--gold-dark);
}
.ai-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.fc-others {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.fc-other {
  font-size: 12.5px;
  line-height: 1.5;
}
.fc-other .link-btn {
  font-size: 12px;
}
.fc-tried {
  margin: 4px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.fc-trace {
  margin: 12px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.fc-trace ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.fc-why {
  color: var(--text-muted);
}

/* Mix It Up's first step (pwMixSetupView), and how much of an idea they already have (pwHaveHtml) */
.pw-mix-for {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-secondary);
}
.pw-meal .pw-cost:not([hidden]) {
  display: block;
  margin-top: 14px;
}
.pw-have {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}
.pw-have-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pw-have.most .pw-have-dot {
  background: var(--green);
}
.pw-have.some .pw-have-dot {
  background: var(--gold-deep);
}
.pw-have.few .pw-have-dot {
  background: var(--red-fill);
}
.pw-site {
  white-space: nowrap;
}

/* Mix It Up on the calendar (renderMixBadge in planweek.js): a round gold ✨ in the calendar's bottom-right corner,
   or in the bar where 🔍 and View were while it's folded; while choosing, the dinners that can be mixed turn pale
   yellow with a bold dashed gold outline just outside them */
/* above the page under it (z-index): the ✨ glides over it as the calendar folds, past the tabs' sticky add boxes
   (z-index 20, later on the page, so they'd win a tie) */
.calendar-section {
  position: relative;
  z-index: 21;
}
.mix-badge {
  position: absolute;
  right: 14px;
  bottom: 18px;
  z-index: 20;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font:
    700 17px/1 'Inter',
    system-ui,
    sans-serif;
  color: var(--text-primary);
  background: var(--gold-light);
  border: 1.5px solid var(--gold);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
/* ✨'s pills (mixBadgeTap): a row sliding out of it to the left, level with it */
.mix-pop {
  position: absolute;
  z-index: 21;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.mix-pop .btn {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
}
.mix-pop .btn.used {
  opacity: 0.55;
}
.mix-pop-note {
  font-weight: 500;
}
/* the one-time spotlight on the ✨ (mixHintMaybe): the screen dims but for a circle around it, a tip bubble beside it */
.mix-hint {
  position: fixed;
  inset: 0;
  z-index: 140;
  transition: opacity 0.25s;
  background: radial-gradient(
    circle at var(--hx) var(--hy),
    transparent 30px,
    rgba(0, 0, 0, 0.55) 34px
  );
}
.mix-hint.out {
  opacity: 0;
}
.mix-hint-bubble {
  position: fixed;
  width: min(280px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--gold-light);
  border: 1.5px dashed var(--gold);
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.mix-hint-t {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}
.mix-hint-acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .mix-hint {
    transition: none;
  }
}
.mix-badge.picking {
  background: var(--surface);
  border-style: dashed;
  font-size: 15px;
}
.calendar-section.collapsed .mix-badge {
  bottom: auto;
  right: auto;
  width: 32px;
  height: 32px;
  font-size: 15px;
  box-shadow: none;
}
.mix-tip-body {
  padding: 16px 22px 6px;
}
.mix-tip {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.45;
}
.week-event.mix-pick,
.cal-event.mix-pick {
  cursor: pointer;
  z-index: 3;
  background: var(--gold-light) !important;
  color: var(--text-primary);
  outline: 2.5px dashed var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(240, 200, 80, 0.28);
  animation: mix-pick 1.2s ease-in-out infinite alternate;
}
.week-event.mix-pick .week-event-title,
.week-event.mix-pick .week-event-time {
  color: var(--text-primary);
}
.cal-event.mix-pick {
  position: relative;
  outline-width: 2px;
  outline-offset: 1px;
  box-shadow: none;
  animation: none;
}
@keyframes mix-pick {
  to {
    outline-offset: 4px;
    box-shadow: 0 0 0 8px rgba(240, 200, 80, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .week-event.mix-pick {
    animation: none;
  }
}

/* Ask While Cooking (cookask.js): a chat over Cook mode */
.modal-toolbar .tb-ask {
  color: var(--gold-text);
  background: var(--gold-light);
  border-color: var(--gold);
  font-weight: 600;
} /* gold: Sous Chef is Premium; on the top row, after Plan, Cook and Add to List */
.modal-toolbar .tb-ask svg {
  width: 15px;
  height: 15px;
}
.modal-toolbar .tb-ask:hover {
  background: var(--gold-light);
  color: var(--gold-dark);
}
/* Hands-Free (handsfree.js): an outline mic, its word when the phone is wide enough; green while listening */
.modal-toolbar .tb-hf svg {
  width: 15px;
  height: 15px;
}
.modal-toolbar .tb-hf.on {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-fill);
}
@media (max-width: 379px) {
  .modal-toolbar .tb-hf .lbl-hf {
    display: none;
  }
}
/* what Hands-Free heard, or what to say: a line under the timers */
.hf-bar {
  flex: 1 1 100%;
  order: 10;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-toolbar .tb-ask.off {
  opacity: 0.45;
  filter: grayscale(1);
} /* Apple Intelligence off: a tap says why */
.tb-ask-tip {
  position: absolute;
  top: calc(100% + 4px);
  right: 12px;
  z-index: 5;
  max-width: min(280px, calc(100% - 24px));
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--text-primary);
  color: var(--surface);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(20, 26, 12, 0.25);
} /* room for the chat icon beside ✕: the timers shrink */
.ca-head {
  justify-content: flex-start;
  gap: 6px;
  padding-left: 10px;
}
.ca-title {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} /* Sous Chef · the recipe, cut with … */
.ca-rname {
  font-weight: 500;
  color: var(--text-secondary);
}
.ca-head .ca-speak {
  margin-left: auto;
  margin-right: 0;
}
.ca-back svg {
  width: 18px;
  height: 18px;
}
.ca-speak {
  margin-left: auto;
  white-space: nowrap;
}
.ca-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 16px;
  min-height: min(42vh, 380px);
}
/* the keyboard's up (cookAskFit): fit above it, the newest message in sight, the small print hidden */
#modal-box.ca-kb .ca-body {
  min-height: 0;
  padding-top: 8px;
}
#modal-box.ca-kb .ca-msgs {
  max-height: max(120px, calc(var(--ca-vh, 60vh) - 210px));
}
#modal-box.ca-kb .ca-note,
#modal-box.ca-kb .ca-body > .meal-hint {
  display: none;
}
/* who answers (Sous Chef, Ask): the Got It tip under the box */
.ca-body > .meal-hint {
  margin: 10px 0 0;
}
.ca-msgs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 48vh;
}
.ca-safe {
  align-self: flex-start;
  max-width: 85%;
  margin-top: -2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
} /* the safe temperature, by the app */
.ca-chips {
  display: flex;
  gap: 8px;
}
.ca-chips:empty {
  display: none;
}
.ca-spice {
  color: var(--gold-text);
  border-color: var(--gold);
  background: var(--gold-light);
  font-weight: 600;
}
.ca-msg {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ca-me {
  align-self: flex-end;
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ca-ai {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}
.ca-note {
  align-self: stretch;
  max-width: none;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.ca-msgs .ca-note {
  padding: 4px 8px;
}
.ca-wait {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
}
.ca-wait span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: ca-dot 1s infinite ease-in-out;
}
.ca-wait span:nth-child(2) {
  animation-delay: 0.15s;
}
.ca-wait span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ca-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ca-wait span {
    animation: none;
    opacity: 0.6;
  }
}
.ca-empty {
  margin: auto 0;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
}
.ca-starters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.ca-row {
  display: flex;
  align-items: flex-end; /* the buttons stay by the last line as the question grows */
  gap: 8px;
}
.ca-row input,
.ca-row textarea {
  flex: 1;
  min-width: 0;
  font-size: 16px;
}
.ca-row > .btn {
  min-height: 40px;
} /* as tall as the box's one line, by its last line as it grows */
/* the question wraps and the box grows with it (cookAskGrow), up to about five lines, then scrolls */
.ca-row textarea {
  resize: none;
  line-height: 1.35;
  min-height: 38px;
  max-height: calc(5 * 1.35em + 18px);
  overflow-y: auto;
  display: block;
}
/* People → Add a Caregiver in the iOS app: fill it in from the phone's contacts (people.js) */
.cg-contacts {
  margin-top: 6px;
}
/* Speak the question (voice.js): red while listening */
.mic-btn {
  flex: none;
  padding-left: 12px;
  padding-right: 12px;
}
.mic-btn.on {
  background: var(--red-fill);
  border-color: var(--red-fill);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
  50% {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mic-btn.on {
    animation: none;
  }
}
.ca-use {
  align-self: flex-start;
  margin-top: -2px;
}
/* An answer with several swaps: pick one (cookask.js pickCookSwap) */
.ca-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: -2px;
}
.ca-pick-h {
  font-size: 13px;
  color: var(--text-secondary);
}
.ca-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ca-opt {
  padding: 7px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  color: var(--green-dark);
  border: 1.5px solid var(--green);
  background: color-mix(in srgb, var(--green-light) 78%, transparent);
}
.ca-opt:active {
  background: var(--green-light);
}
/* not on hand: a plain pill, still tappable */
.ca-opt.no {
  color: var(--text-primary);
  border-color: var(--border);
  background: transparent;
  font-weight: 500;
}
.ca-opt.no:active {
  background: var(--border);
}
/* some of it on hand: gold, like the recipe card's yellow tick */
.ca-opt.part {
  color: var(--gold-text);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold-light) 78%, transparent);
}
.ca-opt.part:active {
  background: var(--gold-light);
}
.ca-have-part {
  color: var(--gold-text);
  font-weight: 600;
}
.ca-have {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: -2px;
}
.ca-have-yes {
  color: var(--green-text);
  font-weight: 600;
}
.ca-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ca-prev-h {
  font-weight: 700;
  font-size: 15px;
}
.ca-chg {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ca-chg-k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ca-before {
  color: var(--text-muted);
  text-decoration: line-through;
}
.ca-after {
  color: var(--green-text);
  font-weight: 600;
  margin-top: 2px;
}
.ca-prev-note {
  font-size: 13px;
  color: var(--text-secondary);
}
.ca-prev-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Custom recipes (recipes.js): ✏️ Custom, and the Original / Custom switch on the card */
.rtag.rv-custom {
  background: var(--green-light);
  color: var(--green-dark);
}
/* "New" on a Cookbook card: beside the heart; bottom right on phones */
.card-new {
  position: absolute;
  top: 10px;
  right: 42px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--green-light);
  color: var(--green-dark);
  pointer-events: none;
}
@media (max-width: 640px) {
  .card-new {
    top: auto;
    right: 8px;
    bottom: 8px;
  }
}
.card-custom {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-dark);
  border: 1px solid var(--green);
  background: color-mix(in srgb, var(--green-light) 78%, transparent);
  pointer-events: none;
}
.rv-version {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 24px 14px;
}
.rv-version-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* "Don't ask again" in a confirmation's footer, on the left (welcome.js skipsConfirm) */
.skip-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.skip-confirm input {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  margin: 0;
}
.modal-foot .skip-confirm {
  margin-right: auto;
}
.modal-foot:has(.skip-confirm) {
  flex-wrap: wrap;
  row-gap: 10px;
}
.rcpt-auto {
  margin: 4px 0 10px;
  justify-content: center;
}

/* The back of the fridge (fridge.js): a weekly card of what's probably used up, all ticked */
.fridge-body {
  padding: 4px 22px 18px;
  display: grid;
  gap: 12px;
}
.fridge-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.fridge-list {
  display: grid;
  gap: 6px;
}
.fridge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
}
.fridge-row input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--green);
}
.fridge-text {
  display: grid;
  min-width: 0;
}
.fridge-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.fridge-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}
.fridge-ok {
  width: 100%;
  justify-content: center;
}
.fridge-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.fridge-links .mc-link {
  font-size: 13px;
}

/* the pill that follows your finger when pulling Pantry or Groceries down (gestures.js) */
.pull-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 55;
  background: var(--green-deep);
  color: #fff;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.pull-pill.show {
  opacity: 1;
}