/* Ellenial Luncheon — the final Ellenial brand (decided 1 Nov 2026, don't reopen):
   one palette for every Ellenial app (Peach, Card, Lavender, Periwinkle, Indigo, Night, Muted, Line,
   and the matching dark palette), Fraunces for headings and DM Sans for text.
   Source: Ellenial – Brand identity, https://claude.ai/artifact/9Fng54MMZMyyKjkqKaVR7r

   Accessibility rules from the brand doc:
   - Never colour alone: anything that means something also has a word or an icon.
   - Text at least 4.5:1, controls and icons at least 3:1 against what's behind them.
   - --line is decorative only (1.2:1); anything you can tap gets --edge or Indigo.
   - Periwinkle is a fill for selected things, never text.
   Every pair used here is checked by scripts/check-contrast.mjs. */

/* Fonts are served from this site, so no third party sees visitors. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/fraunces-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/dm-sans-latin-600-normal.woff2') format('woff2'); }

/* Light (brand palette). ellenial-theme.js sets data-theme on <html> for Auto / Light / Dark. */
:root {
  --bg: #FEF2E2;          /* Peach */
  --surface: #FFFBF5;     /* Card */
  --soft: #F1EAF8;        /* Lavender */
  --peri: #B7B1E6;        /* Periwinkle: a fill only */
  --on-peri: #1F1A2E;     /* Night on Periwinkle */
  --accent: #342E86;      /* Indigo */
  --on-accent: #FFFFFF;
  --ink: #1F1A2E;         /* Night */
  --muted: #575166;       /* Muted */
  --line: #EDE1D1;        /* Line: decorative only */
  --edge: #8A8299;        /* edges of things you can tap, 3:1+ (same as ellenial maps) */
  --ok-ink: #2F5A3D;      /* semantic green, always with a word */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-md: 18px;
  --radius-pill: 999px;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2z' fill='%23000'/%3E%3C/svg%3E");
  --calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* Dark (brand dark palette): chosen with the switch, or following the phone when JavaScript is off.
   Keep the two blocks identical. */
:root[data-theme="dark"] {
  --bg: #17141F; --surface: #221E2C; --soft: #2D2640; --peri: #463C6E; --on-peri: #F3EEF8;
  --accent: #B39AE8; --on-accent: #1A1430; --ink: #F3EEF8; --muted: #C2BACF; --line: #332D40;
  --edge: #7D7393; --ok-ink: #BFD8C2;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #17141F; --surface: #221E2C; --soft: #2D2640; --peri: #463C6E; --on-peri: #F3EEF8;
    --accent: #B39AE8; --on-accent: #1A1430; --ink: #F3EEF8; --muted: #C2BACF; --line: #332D40;
    --edge: #7D7393; --ok-ink: #BFD8C2;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* No double-tap zoom (it fired by accident while scrolling menus); pinch-to-zoom still works,
   so anyone who needs bigger text can still zoom. */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
}

.top { display: flex; flex-direction: column; gap: 10px; }

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
/* The library tile from ellenial.app (Ellen's hand-drawn flower) beside the name, same as Weather. */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { width: 48px; height: 48px; border-radius: 11px; flex: none; }

/* "Menus for week 45 aren't out yet": a Lavender panel with a calendar icon and words, never colour alone */
.banner {
  position: relative;
  padding: 12px 14px 12px 44px;
  border-radius: 14px;
  background: var(--soft);
  border: 1.5px solid var(--accent);
  color: var(--ink);
}
.banner::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  -webkit-mask: var(--calendar) center / contain no-repeat;
  mask: var(--calendar) center / contain no-repeat;
}
.banner p { margin: 0; }
.banner__title { font-weight: 600; font-size: 15px; }
.banner__text { margin-top: 2px !important; font-size: 14px; color: var(--muted); }

.sub { margin: 0; font-size: 14px; color: var(--muted); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-note { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.filter-note .emoji { font-style: normal; }

/* Chips: a 3:1 edge so they read as tappable; selected = Periwinkle fill + Indigo edge + a tick,
   so "on" never rests on colour alone. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;            /* small, but above the 24px minimum target size */
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--ink);
  font: 600 13px var(--font-body);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--peri); border-color: var(--accent); color: var(--on-peri); }
.chip[aria-pressed="true"]::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: -2px;
  background: currentColor;
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
}

/* Jump list: every place shown, in page order, as plain underlined text links separated by
   dots (lighter than chips). Tapping one scrolls to its card. Inline links in running text
   are exempt from the 44px target size; the extra line height keeps them easy to hit. */
.jump-box { margin: 0; }
.jump-box__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: var(--edge);
  text-underline-offset: 3px;
}
.jump-box__toggle::-webkit-details-marker { display: none; }
.jump-box__toggle::after { content: '▾'; text-decoration: none; display: inline-block; color: var(--muted); }
.jump-box[open] .jump-box__toggle::after { content: '▴'; }
.jump { margin: 0; padding-top: 2px; font-size: 14px; line-height: 2; color: var(--muted); }
.jump__item { white-space: nowrap; }
.jump__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 3px; }
.jump__link:hover { color: var(--accent); text-decoration-color: currentColor; }
.jump__sep { margin-left: 6px; }
.card { scroll-margin-top: 26px; }   /* room for the jumped-to ring and glow */
.name:focus { outline: none; }
.name:focus-visible { outline: 3px solid var(--accent); }

.list { padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }

.card {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* No menu: dashed outline and the words "No menu found today" */
.card.is-missing { background: transparent; border: 1.5px dashed var(--edge); }
/* Same every day: Lavender card and the words "Same menu every day" */
.card.is-fixed { background: var(--soft); border-color: transparent; }
/* An Indigo edge down each card's left side, so neighbouring cards are easy to tell apart.
   Decorative only: it means nothing, so it's the same on every card. */
.card, .card.is-fixed, .card.is-missing { border-left: 5px solid var(--accent); }

.card-head { display: flex; align-items: center; gap: 8px; }

/* Heart (Lunch planner step 1). Off: an outlined heart on a quiet round button with a 3:1 edge.
   On: a filled heart (the shape changes, so it never rests on colour alone) on Periwinkle with an
   Indigo edge; screen readers hear "on your shortlist". 32px: above the 24px minimum target. */
.heart {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.heart:hover { border-color: var(--accent); }
.heart[aria-pressed="true"] { background: var(--peri); border-color: var(--accent); color: var(--on-peri); }
.heart svg { display: block; flex: none; }
.heart__on { display: none !important; }
.heart[aria-pressed="true"] .heart__off { display: none !important; }
.heart[aria-pressed="true"] .heart__on { display: block !important; }

/* Shortlist bar: pinned to the bottom of a phone screen, in the header on a computer */
/* "Plan lunch with friends" when you haven't hearted anything yet (quiet, one tap, never nags) */
.plan-start { margin: 10px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.plan-start .btn-quiet { min-height: 36px; padding: 0 14px; font-size: 14px; }
.plan-start__hint { font-size: 13px; color: var(--muted); }

.shortlist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
}
.shortlist__text { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.shortlist__text p { margin: 0; }
.shortlist__count { font-weight: 600; }
.shortlist__names { color: var(--muted); font-size: 13px; }
.shortlist__names a { color: var(--ink); text-underline-offset: 3px; }
.shortlist__names a:hover { color: var(--accent); }
@media (max-width: 759px) {
  .shortlist { border-radius: 18px; }
  .shortlist__text { flex-direction: column; gap: 0; }
  /* one line of names on a phone; the rest are a scroll away */
  .shortlist__names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  h1 { font-size: 21px; }
}
.shortlist__clear {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--ink);
  font: 600 13px var(--font-body);
  cursor: pointer;
}
.shortlist__clear:hover { border-color: var(--accent); }
@media (max-width: 759px) {
  .shortlist {
    position: fixed;
    z-index: 5;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  body.has-shortlist .page { padding-bottom: 96px; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.name { flex: 1; font-family: var(--font-display); font-weight: 500; font-size: 19px; text-decoration: none; }
.name:hover { text-decoration: underline; }
.walk { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* Price row: its own line under the name, so prices can be compared down the page */
.price-row { margin: -2px 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; }
.price-amount { font-weight: 600; color: var(--ink); white-space: nowrap; }
.price-incl { color: var(--muted); }
.price-row.is-unknown .price-amount { font-weight: 500; color: var(--muted); }

/* Dishes: tag / dish / sides, with a hairline between dishes for easy scanning */
.dishes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.dishes:empty { display: none; }
.dishes li { padding: 8px 0; border-top: 1px solid var(--line); }
.dishes li:first-child { border-top: none; padding-top: 4px; }
.dishes li:last-child { padding-bottom: 2px; }
.dishes p { margin: 0; }
.dish-tag {
  margin-bottom: 2px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.dish-tag .emoji { font-style: normal; letter-spacing: 0; }
.dish-name { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.35; }

.dish-name .pork { margin-left: 4px; font-style: normal; font-weight: 400; }
.dish-price { color: var(--muted); font-weight: 500; white-space: nowrap; }
.dish-sides { margin-top: 2px !important; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* "Show all 8 dishes": a quiet text button with an arrow, so it reads as an action, not a dish */
.more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -6px 0 -4px;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--accent);
  font: 600 14px var(--font-body);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.more::after { content: '▾'; text-decoration: none; display: inline-block; }
.more[aria-expanded="true"]::after { content: '▴'; }
.dishes li[hidden] { display: none; }

/* Links to the place: its lunch page and a map, at the bottom of every card */
.links { margin: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.links__a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-underline-offset: 4px;
}
.links__a:hover { color: var(--ink); }
.card .links { margin-bottom: -10px; }

.note { margin: 0; font-size: 14px; color: var(--muted); }

/* Menu picture preview: a short strip of the picture with a label underneath;
   the whole thing is one button that opens the picture full size. */
.menu-pic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 2px 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: 600 13px var(--font-body);
  text-align: left;
  cursor: zoom-in;
}
.menu-pic__img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  border: 1px solid var(--edge);   /* 3:1, it's tappable */
  background: var(--surface);
}
.menu-pic__label { text-decoration: underline; text-underline-offset: 3px; }
.menu-pic:hover .menu-pic__img { border-color: var(--accent); }

/* Full-size picture view */
.pic-view {
  width: min(1100px, 100vw - 24px);
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
}
.pic-view::backdrop { background: rgba(10, 8, 16, 0.7); }
.pic-view__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); }
.pic-view__title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.pic-view__close {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 600 14px var(--font-body);
  cursor: pointer;
}
.pic-view__close:hover { border-color: var(--accent); }
.pic-view__body { overflow: auto; max-height: calc(100vh - 140px); }
.pic-view__img { display: block; width: 100%; height: auto; }
.pic-view__foot { margin: 0; padding: 8px 16px 12px; font-size: 14px; }
.pic-view__foot a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.note:empty { display: none; }

/* Freshness: always a word ("Updated 09:02", "From Wednesday · may have changed"), never colour alone */
.fresh { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok-ink); }
.fresh.is-stale {
  align-self: flex-start;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--ink);
}
.fresh.is-stale::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--clock) center / contain no-repeat;
  mask: var(--clock) center / contain no-repeat;
}
.fresh.is-missing { color: var(--muted); font-weight: 500; }
.fresh:empty { display: none; }

.empty {
  margin: 8px 0 0;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--soft);
  font-size: 15px;
}

.foot {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.foot p { margin: 0 0 8px; }
.foot a { color: var(--muted); }

/* Auto / Light / Dark, the shared switch from ellenial maps (ellenial-theme.js) */
.prefs { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.theme-switch { display: inline-flex; gap: 2px; align-items: center; }
.theme-switch__btn {
  border: none;
  background: none;
  min-height: 44px;
  padding: 6px 6px;
  font: 600 13px var(--font-body);
  color: var(--muted);
  cursor: pointer;
}
/* Chosen = darker text AND underline, not colour alone */
.theme-switch__btn[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Computer screens: cards side by side for an overview. Columns (not a grid) so short cards
   don't leave gaps; each card stays whole. Order runs down each column, by walking time. */
@media (min-width: 760px) {
  .page { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
  .foot { max-width: 760px; }
  .sub, .banner { max-width: 760px; }
  .list { display: block; columns: 2 300px; column-gap: 12px; }
  .list > * { break-inside: avoid; margin: 0 0 12px; }
  .card { padding: 12px 14px; gap: 6px; }
  .name { font-size: 18px; }
}
@media (min-width: 1100px) { .list { columns: 3 300px; } }
@media (min-width: 1500px) { .page { max-width: 1600px; } .list { columns: 4 300px; } }

/* ---------- Lunch planner, step 3: plan lunch together ---------- */
/* Heart with a count: how many people hearted the place (the names are in its label and the bar) */
.heart__count { font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.heart__count:empty { display: none; }
.heart:has(.heart__count:not(:empty)) { padding: 0 10px 0 8px; }

/* Buttons: a filled Indigo one for the main action, a quiet outlined one for the rest */
.btn, .btn-quiet {
  flex: none;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font: 600 13px var(--font-body);
  cursor: pointer;
}
.btn { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { cursor: progress; opacity: 0.85; }
.btn-quiet { border: 1px solid var(--edge); background: transparent; color: var(--ink); }
.btn-quiet:hover { border-color: var(--accent); }
.btn:focus-visible, .btn-quiet:focus-visible, .heart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shortlist__buttons { flex: none; display: flex; gap: 6px; align-items: center; }

/* "Ellen is planning lunch": the same Lavender panel as the week notice, with a heart instead of a calendar */
.lunch-banner {
  position: relative;
  padding: 12px 14px 12px 44px;
  border-radius: 14px;
  background: var(--soft);
  border: 1.5px solid var(--accent);
  color: var(--ink);
}
.lunch-banner::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}
.lunch-banner p { margin: 0; }
.lunch-banner__title { font-weight: 600; font-size: 15px; }
.lunch-banner__text { margin-top: 2px !important; font-size: 14px; color: var(--muted); }
.lunch-banner__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.lunch-banner__actions:not(:has(button:not([hidden]))) { display: none; }

.lunch-name { margin-top: 10px; display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.lunch-name__hint { font-weight: 400; color: var(--muted); }
.lunch-name__row { display: flex; gap: 6px; max-width: 420px; }
.lunch-name input, .ask__input {
  min-width: 0;
  flex: 1;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  font: 400 16px var(--font-body); /* 16px: phones don't zoom in on the field */
}
.lunch-name input:focus-visible, .ask__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lunch-name .btn { min-height: 40px; }

/* The "Plan lunch together" dialog */
.ask {
  width: min(440px, 100vw - 24px);
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
}
.ask::backdrop { background: rgba(10, 8, 16, 0.7); }
.ask__body { padding: 12px 16px 16px; font-size: 14px; }
.ask__body p { margin: 0 0 10px; }
.ask__label { display: block; margin: 4px 0 4px; font-weight: 600; }
.ask__input { width: 100%; box-sizing: border-box; }
.ask__buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.ask__buttons .btn, .ask__buttons .btn-quiet { min-height: 44px; padding: 0 18px; font-size: 14px; }
.ask__error { color: var(--ink); font-weight: 600; }
.ask__error::before { content: '⚠ '; }
.ask__qr { display: flex; justify-content: center; margin: 4px 0 10px; }
.ask__qr svg { border-radius: 8px; }
.ask__small { color: var(--muted); font-size: 13px; }

/* ---------- Lunch planner, step 4: "We're going here" ---------- */
/* The chosen place: a Periwinkle label with a tick and words, and a full Indigo outline (never colour alone) */
.picked {
  align-self: flex-start;
  margin: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--peri);
  color: var(--on-peri);
  font-size: 13px;
  font-weight: 700;
}
.card.is-picked { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---------- The card you jumped to (from "Jump to a place" or the shortlist bar) ---------- */
/* A thick Indigo ring around the whole card (3:1 on the page in both themes) plus a soft
   Periwinkle glow that fades out. The glow sits outside the card, so no text is ever on it. */
.card.is-jumped {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  position: relative;
  z-index: 1;   /* the glow goes over neighbouring cards, not under them */
  animation: jumped-glow 1.8s ease-out 0.25s both;
  transition: outline-color 0.8s ease;
}
.card.is-jumped-out { outline-color: transparent; }
@keyframes jumped-glow {
  0%   { box-shadow: 0 0 0 7px var(--bg), 0 0 0 14px var(--peri); }
  60%  { box-shadow: 0 0 0 7px var(--bg), 0 0 0 14px var(--peri); }
  100% { box-shadow: 0 0 0 7px var(--bg), 0 0 0 14px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .card.is-jumped { animation: none; transition: none; }
}
.pick-row { margin: 0; }
.pick-row .btn, .pick-row .btn-quiet { min-height: 36px; }

/* "How this works": folded by default, in the lunch banner and the dialog */
.how { margin-top: 10px; font-size: 14px; }
.how summary { cursor: pointer; font-weight: 600; color: var(--ink); text-underline-offset: 3px; text-decoration: underline; width: fit-content; }
.how summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.how ol { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }
.how li { margin: 2px 0; }
.how strong { color: var(--ink); }
.lunch-banner .how { margin-top: 8px; }

/* ---------- "↑ Top" ---------- */
/* Bottom-right corner once you've scrolled down; above the shortlist bar when that's showing on a phone.
   Indigo edge (3:1 on the page) and the word "Top", so it doesn't rely on the arrow alone. */
.to-top {
  position: fixed;
  z-index: 6;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--accent);
  background: var(--surface);
  color: var(--ink);
  font: 600 14px var(--font-body);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.to-top[hidden] { display: none; }
.to-top span { color: var(--accent); margin-right: 2px; }
.to-top:hover { background: var(--soft); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#heading:focus { outline: none; }
@media (max-width: 759px) {
  body.has-shortlist .to-top { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}