/* Plated look: ink on white, one red, lines instead of boxes. Colours live here only. */

/* Archivo, served from Plated itself (no Google requests). SIL Open Font License, see fonts/OFL.txt. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "Just Another Hand"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/just-another-hand-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/archivo-italic-latin.woff2") format("woff2"); }
:root {
  --ink: #141414;
  --red: #C83A1E;
  --grey: #555555;
  --soft: #333333;
  --muted: #777777;
  --rule: #D6D6D2;
  --tint: #F2F2EF;
  --shadow: #E8E8E4;
  --paper: #FFFFFF;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;
  --tabbar: 68px;
  --head-h: 64px; /* kept up to date by app.js */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Skip link: hidden until a keyboard or screen reader reaches it */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
/* While Plated loads (shared links land here first): the plate, fading in only if it takes a moment */
.boot-loading { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--grey); font-size: 14px; opacity: 0; animation: boot-in 0.3s ease 0.25s forwards; }
.boot-loading svg { animation: boot-spin 1.6s ease-in-out infinite; }
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-spin { 50% { transform: rotate(-12deg) scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .boot-loading { animation: none; opacity: 1; } .boot-loading svg { animation: none; } }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; width: 100%; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  padding-top: env(safe-area-inset-top);
}
.head-row { display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; letter-spacing: 0.04em; text-decoration: none; }
.top-nav { display: none; gap: 24px; font-size: 14px; font-weight: 600; }
.top-nav a { text-decoration: none; color: var(--grey); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.top-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.head-counts { margin-left: auto; font-size: 13px; color: var(--grey); }
.head-counts b { color: var(--ink); }
.head-counts .want b, .want-count { color: var(--red); }

/* ---------- Bottom tab bar (phones) ---------- */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; background: var(--paper); border-top: 1.5px solid var(--ink);
  padding: 8px 8px max(10px, env(safe-area-inset-bottom));
}
.tab-bar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; font-size: 12px; font-weight: 600; color: var(--grey); text-decoration: none;
}
.tab-bar a[aria-current="page"] { color: var(--ink); font-weight: 700; }
body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }

.view { flex: 1; width: 100%; outline: none; }
.view > .wrap { padding-top: 16px; padding-bottom: 40px; }


/* ---------- Shared bits ---------- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--grey); text-transform: uppercase; margin: 0 0 6px; }
.big-title { font-size: 30px; font-weight: 900; line-height: 1.05; letter-spacing: -0.5px; margin: 0; }
.sub { font-size: 14px; color: var(--grey); margin: 6px 0 0; }
.small-print { font-size: 12px; color: var(--grey); line-height: 1.45; }
.note-local { font-size: 13px; color: var(--grey); font-style: italic; margin: 6px 0 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: var(--radius);
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn.solid { background: var(--ink); color: var(--paper); font-weight: 700; }
.btn.red { background: var(--red); border-color: var(--red); color: var(--paper); font-weight: 700; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn svg { flex: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-btn { width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; }

.chip {
  flex: none; height: 36px; padding: 0 14px; border-radius: 18px;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip.want[aria-pressed="true"] { background: var(--red); border-color: var(--red); }

.tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.tag.been { background: var(--ink); color: var(--paper); }
.tag.want { border: 1.5px solid var(--red); color: var(--red); }
.tag.not { border: 1.5px solid var(--rule); color: var(--grey); }
.tag.pick { background: var(--tint); color: var(--ink); }
.tag.next { background: var(--red); color: var(--paper); }

.box-tint { background: var(--tint); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; color: var(--grey); }
.box-tint b { color: var(--ink); }
.box-red { border: 1.5px solid var(--red); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; color: var(--soft); }
.box-red .box-label { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--red); margin-bottom: 4px; }
.box-red .box-label span:last-child { color: var(--grey); font-weight: 400; letter-spacing: 0; }
.card {
  border: 1.5px solid var(--ink); border-radius: 12px; padding: 16px;
  box-shadow: 5px 5px 0 var(--shadow); background: var(--paper);
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-size: 14px; font-weight: 700; }
.input {
  min-height: 48px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--paper); font-size: 16px; width: 100%;
}
select.input { padding-right: 8px; }

/* Segmented control (Your call, pace, timeframe…) */
.seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; }
.seg button {
  min-height: 48px; border: 0; border-left: 1.5px solid var(--ink); background: var(--paper);
  font-size: 14px; font-weight: 700; cursor: pointer; padding: 0 4px;
}
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button.want[aria-pressed="true"] { background: var(--red); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 20;
  bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; max-width: calc(100% - 32px);
}

.banner {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  border: 1.5px solid var(--ink); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px;
  box-shadow: 4px 4px 0 var(--shadow);
}
.banner p { margin: 0; flex: 1 1 220px; font-size: 14px; }
.banner .btn-row { flex: none; }

/* ---------- The List ---------- */
.list-layout { display: block; }
.list-intro { margin-bottom: 10px; }
.list-intro h1 { font-size: 22px; font-weight: 900; margin: 0; letter-spacing: -0.3px; }
.search-row { position: relative; margin: 12px 0 4px; }
.search-row svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-row .input { padding-left: 42px; border-radius: 24px; }
.search-hint { font-size: 12px; color: var(--grey); margin: 4px 0 0; }
.search-hint:empty { display: none; }

.list-controls { display: flex; gap: 8px; align-items: stretch; margin: 12px 0 0; }
.show-seg { flex: 1; }
.show-seg button { min-height: 44px; font-size: 13px; white-space: nowrap; padding: 0 6px; }
.filter-btn { padding: 0 12px; }
.seg-count { font-weight: 600; opacity: 0.7; }
.filter-btn { flex: none; min-height: 44px; border-radius: 10px; font-weight: 700; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0 0; }
.active-filters[hidden] { display: none; }
.active-chip { border: 0; background: var(--tint); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.link-btn { border: 0; background: none; padding: 6px 2px; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; color: var(--ink); }
.count-line { font-size: 13px; color: var(--grey); margin: 14px 0 8px; }

/* Filters panel (phones): slides up from the bottom */
.filter-panel { position: fixed; inset: 0; z-index: 30; background: rgba(20, 20, 20, 0.45); display: flex; align-items: flex-end; }
.filter-panel[hidden] { display: none; }
.panel-sheet { background: var(--paper); width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 14px 14px 0 0; border-top: 1.5px solid var(--ink); padding: 4px 16px max(16px, env(safe-area-inset-bottom)); }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.panel-head strong { font-size: 18px; }
.panel-foot { position: sticky; bottom: 0; background: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 0; margin-top: 16px; border-top: 1px solid var(--rule); }
.panel-foot .btn { flex: 1; max-width: 240px; }
.filter-fields { display: flex; flex-direction: column; gap: 16px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }

/* Rows */
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-top: 1px solid var(--rule); padding: 16px 0; display: flex; flex-direction: column; gap: 6px; }
.row:first-child { border-top: 1.5px solid var(--ink); }
.row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.row-name { font-size: 19px; font-weight: 700; line-height: 1.15; margin: 0; }
.row-name a { text-decoration: none; }
.row-meta { font-size: 13px; color: var(--grey); margin: 3px 0 0; }
.row-tags { display: flex; gap: 6px; align-items: center; flex: none; }
.one-liner { font-style: italic; color: var(--soft); font-size: 15px; line-height: 1.38; margin: 2px 0 0; }
.row-note { font-size: 13px; color: var(--grey); margin: 0; }
.row-note b { color: var(--ink); font-weight: 600; }
.row-seg { margin-top: 6px; }
.row-seg button { min-height: 44px; font-size: 13.5px; }
.row-main { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; border-radius: var(--radius); }
.row-main:hover .row-name { color: var(--red); }
/* View profile: a small text link (the whole name and description open the profile too) */
.view-profile {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; align-self: flex-end;
  min-height: 40px; padding: 0 2px; margin: -2px 0 -10px;
  color: var(--red); font-size: 14px; font-weight: 700; text-decoration: none;
}
.view-profile .arrow { font-size: 18px; line-height: 1; transition: transform 0.15s; }
.view-profile:active .arrow { transform: translateX(3px); }
@media (hover: hover) {
  .view-profile:hover { text-decoration: underline; }
  .view-profile:hover .arrow { transform: translateX(3px); }
}
.row.is-not .row-name, .row.is-not .one-liner { color: var(--muted); }
.empty { color: var(--grey); padding: 24px 0; }
.sample-note { margin: 0 0 12px; padding: 8px 10px; background: var(--tint); border-radius: var(--radius); font-size: 13px; color: var(--grey); }
.sidebar { display: none; }
.filter-card { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Restaurant page ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--grey); text-decoration: none; margin-left: -4px; }
.profile { display: flex; flex-direction: column; gap: 22px; }
.profile-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.profile-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile h1 { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -0.5px; margin: 0; }
.profile-meta { font-size: 14px; color: var(--grey); margin: 0; }
.profile-quote { font-size: 18px; font-style: italic; line-height: 1.4; color: var(--soft); margin: 0; max-width: 640px; }
.profile-boxes { display: grid; gap: 10px; }
.profile-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-foot { border-top: 1px solid var(--rule); padding-top: 14px; font-size: 13px; color: var(--grey); }
.profile-foot a { font-weight: 700; }
.your-call { display: flex; flex-direction: column; gap: 14px; }
.state-help { font-size: 14px; line-height: 1.45; color: var(--soft); margin: 0; }
.hf.done { background: var(--tint); border-color: var(--rule); color: var(--grey); cursor: default; }
.diary-line { font-size: 12px; color: var(--grey); border-top: 1px solid var(--rule); padding-top: 12px; margin: 0; }
.share-row { display: flex; gap: 8px; }

/* Menu slide-up sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(20, 20, 20, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop[hidden] { display: none; }
.menu-sheet {
  background: var(--paper); width: 100%; max-width: 820px; height: 88vh; border-radius: 14px 14px 0 0;
  display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid var(--ink); border-bottom: 0;
}
.menu-sheet-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1.5px solid var(--ink); }
.menu-sheet-head strong { flex: 1; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-blocked { margin: 0; padding: 12px 16px; background: var(--tint); font-size: 14px; }
.menu-sheet iframe { flex: 1; width: 100%; border: 0; }

/* ---------- Snack tracks ---------- */
.stack { display: flex; flex-direction: column; gap: 18px; }
.track-list { list-style: none; margin: 0; padding: 0; }
.track-item { border-top: 1px solid var(--rule); }
.track-item:first-child { border-top: 1.5px solid var(--ink); }
.track-item a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 0; text-decoration: none; }
.track-item strong { font-size: 18px; }
.track-item span { font-size: 13px; color: var(--grey); }

.picker { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.picker li { border-top: 1px solid var(--rule); }
.picker li:first-child { border-top: 0; }
.picker label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; cursor: pointer; }
.picker input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.picker .p-name { font-weight: 700; }
.picker .p-meta { font-size: 13px; color: var(--grey); }
.picked-count { font-size: 14px; font-weight: 700; }
.picked-count.full { color: var(--red); }
.surprise-why { font-size: 13px; color: var(--grey); margin: 0; }

.trail { list-style: none; margin: 0; padding: 0; border-bottom: 1.5px solid var(--ink); }
.stop { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); align-items: flex-start; }
.stop:first-child { border-top: 1.5px solid var(--ink); }
.stop-when { width: 38px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stop-when span { font-size: 10px; font-weight: 700; color: var(--grey); letter-spacing: 0.04em; }
.stop.up-next .stop-when span { color: var(--red); }
.tick {
  width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--paper);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.tick[aria-pressed="true"] { background: var(--ink); }
.stop-body { flex: 1; min-width: 0; }
.stop-name { font-size: 17px; font-weight: 700; text-decoration: none; }
.stop.done .stop-name { color: var(--muted); text-decoration: line-through; }
.stop-meta { font-size: 13px; color: var(--grey); margin: 3px 0 0; }

/* Sheet preview on screen */
.sheet-preview { border: 1.5px solid var(--ink); border-radius: 6px; padding: 14px; box-shadow: 4px 4px 0 var(--shadow); overflow: hidden; }
.sheet-preview .pv-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; font-weight: 900; font-size: 14px; gap: 8px; }
.sheet-preview .pv-head span { font-weight: 400; font-style: italic; font-size: 11px; color: var(--grey); }
.sheet-preview .pv-row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 0.5px solid var(--rule); font-size: 12px; }
.sheet-preview .pv-box { width: 11px; height: 11px; border: 1px solid var(--ink); flex: none; margin-top: 2px; }
.sheet-preview .pv-why { font-style: italic; color: var(--soft); font-size: 11px; }
.sheet-preview .pv-lines { color: var(--grey); font-size: 10px; }
.sheet-preview .pv-foot { font-size: 10px; color: var(--grey); text-align: center; padding-top: 6px; }

/* ---------- Journal ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; }
.stats div { padding: 12px 10px; border-left: 1.5px solid var(--ink); }
.stats div:first-child { border-left: 0; }
.stats b { display: block; font-size: 28px; font-weight: 900; line-height: 1; }
.stats span { font-size: 12px; color: var(--grey); font-weight: 600; }
.stats .hf b { color: var(--red); }
.entries { list-style: none; margin: 0; padding: 0; }
.entry { border-top: 1px solid var(--rule); padding: 14px 0; }
.entry:first-child { border-top: 1.5px solid var(--ink); }
.entry-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.entry-head a { font-size: 18px; font-weight: 700; text-decoration: none; }
.entry-date { font-size: 12px; color: var(--grey); white-space: nowrap; }
.entry p { margin: 4px 0 0; font-size: 14px; color: var(--soft); }
.entry p b { color: var(--ink); }
.hf-mark { color: var(--red); font-weight: 700; font-size: 13px; }
.save-grid { display: grid; gap: 10px; }

/* ---------- Print sheet (only shows when printing) ---------- */
.print-area { display: none; }

/* ---------- Tablets ---------- */
@media (min-width: 700px) {
  .wrap { padding: 0 24px; }
  .chip-row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
  .big-title { font-size: 34px; }
  .profile h1 { font-size: 40px; }
  .profile-boxes { grid-template-columns: 1fr 1fr; }
  .save-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Laptops and desktops ---------- */
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .tab-bar { display: none; }
  .toast { bottom: 24px; }
  .top-nav { display: flex; }
  .brand { font-size: 26px; }
  .head-row { padding-top: 20px; padding-bottom: 18px; }
  .view > .wrap { padding-top: 28px; padding-bottom: 56px; }

  .list-layout.has-sidebar { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: start; }
  .sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--head-h) + 16px); }
  .sidebar .check-list { grid-template-columns: 1fr; }
  .sidebar .check { min-height: 34px; font-size: 14px; }
  .list-intro h1 { font-size: 28px; }
  .show-seg { flex: 0 1 420px; }
  .rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .row:nth-child(2) { border-top: 1.5px solid var(--ink); }

  .profile { flex-direction: row; align-items: flex-start; gap: 40px; }
  .profile-main { flex: 1; }
  .profile h1 { font-size: 44px; letter-spacing: -1px; }
  .profile-quote { font-size: 22px; }
  .profile-side { flex: 0 0 360px; position: sticky; top: calc(var(--head-h) + 16px); }
  .profile-side.card { padding: 20px; box-shadow: 6px 6px 0 var(--shadow); }

  .two-col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
  .btn:hover:not(.solid):not(.red):not([disabled]):not(.done) { background: var(--tint); }
  .seg button:hover:not([aria-pressed="true"]) { background: var(--tint); }
}

/* ---------- Printing: only the sheet, letter size ---------- */
@page { size: letter; margin: 0.5in; }
@media print {
  body { display: block; padding: 0; min-height: 0; }
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block; color: #000; font-family: var(--font); }
  .ps-page { page-break-after: always; break-after: page; }
  .ps-page:last-child { page-break-after: auto; break-after: auto; }
  .ps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 2px solid #000; padding-bottom: 8px; }
  .ps-title { font-size: 26pt; font-weight: 900; line-height: 1; margin: 0; letter-spacing: -0.5px; }
  .ps-kicker { font-size: 9pt; font-weight: 700; letter-spacing: 0.1em; margin: 0 0 4px; }
  .ps-right { text-align: right; font-size: 9pt; }
  .ps-right i { display: block; }
  .ps-how { font-size: 9.5pt; margin: 8px 0 4px; }
  .ps-flip { font-size: 9.5pt; font-weight: 700; margin: 0 0 4px; }
  .ps-row { display: grid; grid-template-columns: 18pt 1fr; gap: 6pt; padding: 16pt 0 16pt; border-bottom: 1px solid #999; break-inside: avoid; }
  .ps-box { width: 14pt; height: 14pt; border: 1.5px solid #000; margin-top: 2pt; }
  .ps-name { font-size: 15pt; font-weight: 700; margin: 0; }
  .ps-meta { font-size: 9.5pt; margin: 1pt 0 0; }
  .ps-why { font-size: 10.5pt; font-style: italic; margin: 5pt 0 4pt; }
  .ps-line { display: flex; gap: 6pt; align-items: flex-end; font-size: 9.5pt; margin-top: 20pt; }
  .ps-line span { white-space: nowrap; }
  .ps-line i { flex: 1; border-bottom: 1px solid #000; height: 1px; }
  .ps-pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14pt; }
  .ps-foot { border-top: 2px solid #000; margin-top: 10pt; padding-top: 6pt; display: flex; justify-content: space-between; gap: 12px; font-size: 8.5pt; }
  .ps-journal .ps-row { grid-template-columns: 1fr; padding: 8pt 0; }
  .ps-journal .ps-name { font-size: 12pt; }
  .ps-journal p { margin: 2pt 0 0; font-size: 9.5pt; }
}

/* ---------- Menu (hamburger) ---------- */
.menu-btn {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; padding: 0;
}
.menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.menu-btn path { transition: transform 0.15s, opacity 0.15s; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .bar1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bar2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .bar3 { transform: translateY(-5px) rotate(-45deg); }
.head-counts { margin-left: auto; }
.site-menu { border-top: 1px solid var(--rule); background: var(--paper); }
.site-menu[hidden] { display: none; }
.menu-list { list-style: none; margin: 0; padding: 4px 0 12px; }
.menu-list li { border-bottom: 1px solid var(--rule); }
.menu-list li:last-child { border-bottom: 0; }
.menu-list a { display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 700; text-decoration: none; }
.menu-list a:hover { color: var(--red); }
#contact-link { color: var(--red); }
@media (min-width: 960px) {
  .site-menu { position: absolute; right: max(32px, calc((100% - 1120px) / 2 + 32px)); top: 100%; width: 280px; border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--shadow); margin-top: 8px; }
  .site-menu .wrap { padding: 0 16px; }
  .menu-list a { font-size: 15px; min-height: 46px; }
}
@media (max-width: 959px) {
  .head-row { flex-wrap: nowrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .brand { font-size: 20px; flex: none; }
  .head-counts { min-width: 0; text-align: right; line-height: 1.25; font-size: 12px; }
}

/* Search + filters pinned under the sticky header */
.list-sticky {
  position: sticky; top: var(--head-h); z-index: 6;
  background: var(--paper);
  margin: 0 -16px; padding: 4px 16px 0;
  border-bottom: 1.5px solid var(--ink);
}
.list-sticky .search-row { margin-top: 8px; }
.list-sticky .count-line { margin: 10px 0 8px; }
.list-sticky + .rows .row:first-child { border-top: 0; }
@media (min-width: 700px) { .list-sticky { margin: 0 -24px; padding: 4px 24px 0; } }
@media (min-width: 960px) {
  .list-sticky { margin: 0; padding: 4px 0 0; }
  .list-sticky + .rows .row:nth-child(2) { border-top: 0; }
}


/* Snack track picker: search + filters for "Anywhere" */
.finder { display: flex; flex-direction: column; gap: 10px; }
.finder .search-row { margin: 0; }
.finder-filters { display: grid; grid-template-columns: 1fr; gap: 10px; }
.finder-filters .field label { font-size: 13px; }
.picked-list { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 560px) { .finder-filters { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Snack Track page spacing ---------- */
.track-main { display: flex; flex-direction: column; gap: 24px; }
.track-head .big-title { margin: 2px 0 0; }
.track-head .sub { margin-top: 10px; }
.track-actions .btn-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.track-actions .btn { min-height: 50px; font-size: 15px; }
.track-section { display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.section-head .eyebrow { margin: 0; }
.section-count { font-size: 13px; font-weight: 700; color: var(--red); }
.track-page .stop { padding: 18px 0; gap: 16px; }
.track-note { margin: 4px 0 0; }
.track-sheet { margin-top: 36px; padding-top: 24px; border-top: 1.5px solid var(--ink); }
.track-sheet .sheet-preview { padding: 18px; }
.track-danger { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.delete-track { min-height: 48px; padding: 0 20px; }
.delete-track:hover { background: #A82F17; border-color: #A82F17; }
@media (min-width: 560px) {
  .track-actions .btn-row { grid-template-columns: auto auto; justify-content: start; }
}
@media (min-width: 960px) {
  .track-page .two-col { gap: 56px; }
  .track-sheet { margin-top: 0; padding-top: 0; border-top: 0; position: sticky; top: calc(var(--head-h) + 24px); }
  .track-main { gap: 28px; }
}

/* Snack Track stops: planned date, time and Add to Calendar */
.stop-day { font-size: 18px; font-weight: 900; line-height: 1; margin-top: -2px; }
.plan { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.plan-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plan-field span { font-size: 12px; font-weight: 700; color: var(--grey); }
.plan-field .input { min-height: 42px; font-size: 15px; padding: 0 8px; }
.plan-field .input:disabled { opacity: 0.5; }
.plan-when { margin: 0; font-size: 14px; font-weight: 700; }
.plan-cal { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cal-btn[disabled] { opacity: 0.45; }
.cal-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-menu[hidden] { display: none; }
@media print { .ps-plan { font-size: 10pt; font-weight: 700; margin: 3pt 0 0; } }

/* Snack Tracks home: Still hungry / Cleaned plates */
.track-groups { display: flex; flex-direction: column; gap: 32px; }
.track-group { display: flex; flex-direction: column; gap: 10px; }
.section-count.muted { color: var(--grey); }
.track-item.finished strong { color: var(--muted); }
.list-sticky { padding-bottom: 12px; }
.list-sticky { border-bottom-color: var(--red); }
.red-title { color: var(--red); }
.finder .filter-btn { align-self: flex-start; }
.finder-filters[hidden] { display: none; }
.finder-filters .link-btn { justify-self: start; align-self: end; }
.share-row { flex-wrap: wrap; }
.track-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1.5px solid var(--red); border-radius: 10px; max-width: 420px; }
.track-menu[hidden] { display: none; }
.track-menu .btn { white-space: normal; text-align: left; min-height: 40px; }
.share-plated { margin: 4px 0 16px; min-height: 48px; font-size: 15px; }
/* Share Plated and Add to Home Screen: side by side on phones, stacked in the computer menu */
.menu-actions { display: flex; gap: 8px; margin: 4px 0 16px; }
.menu-actions .btn { flex: 1 1 0; min-height: 48px; font-size: 15px; margin: 0; padding: 0 8px; white-space: nowrap; }
.menu-actions .btn[hidden] { display: none; }
.install-plated { font-weight: 700; }
@media (min-width: 960px) { .menu-actions { flex-direction: column; } }
.back-link { color: var(--red); }
.back-link:hover { color: #A82F17; }
.note-box { min-height: 110px; padding: 12px; line-height: 1.45; resize: vertical; font-size: 16px; }

/* Current tab is red (bottom tab bar on phones, top tabs on desktop) */
.tab-bar a[aria-current="page"] { color: var(--red); }
.top-nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
.tab-bar { border-top: 2px solid var(--ink); }
@media print {
  .ps-foot { align-items: center; }
  .ps-foot p { margin: 0 0 3pt; }
  .ps-qr { display: flex; align-items: center; gap: 8pt; font-size: 8.5pt; max-width: 2.4in; text-align: left; }
  .ps-qr img { width: 0.95in; height: 0.95in; flex: none; }
}
.track-intro { margin: 10px 0 0; font-size: 16px; font-style: italic; color: var(--soft); max-width: 600px; }

/* Snack Tracks home: Ready-made drop-down */
.ready-made summary { list-style: none; cursor: pointer; justify-content: flex-start; align-items: center; min-height: 44px; padding: 4px 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
.ready-made summary::-webkit-details-marker { display: none; }
.ready-made summary .eyebrow { margin: 0; }
.ready-made .chev { margin-left: auto; color: var(--red); font-size: 18px; transition: transform 0.15s; }
.ready-made[open] .chev { transform: rotate(180deg); }
.ready-made[open] .track-list .track-item:first-child { border-top: 0; }

/* Ready-made drop-down: rounded box with a plus / minus */
.ready-made { border: 1.5px solid var(--ink); border-radius: 12px; padding: 0 14px; gap: 0; }
.ready-made summary { border: 0; padding: 8px 0; }
.ready-made[open] summary { border-bottom: 1px solid var(--rule); }
.ready-made .chev { transform: none !important; width: 26px; height: 26px; border: 1.5px solid var(--red); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ready-made .chev::before { content: "+"; font-size: 20px; font-weight: 700; line-height: 1; color: var(--red); }
.ready-made[open] .chev::before { content: "\2212"; }
.ready-made .track-list { padding-bottom: 4px; }
.ready-made .track-item:first-child { border-top: 0; }

/* Plus / minus drawn as two bars, so they sit exactly in the middle of the circle */
.ready-made .chev { position: relative; flex: none; }
.ready-made .chev::before, .ready-made .chev::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--red); border-radius: 1px;
}
.ready-made .chev::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.ready-made .chev::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.ready-made[open] .chev::before { content: ""; }
.ready-made[open] .chev::after { display: none; }
.ready-made { margin-bottom: 18px; }

/* Places with several locations */
.locations { display: flex; flex-direction: column; gap: 8px; }
.locations .eyebrow { margin: 0; }
.loc-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.loc { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.loc strong { font-size: 16px; }
.loc-meta { font-size: 13px; color: var(--grey); }
/* Each location: name, address and neighbourhood first, buttons underneath */
.loc { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; }

/* The row you came back to glows red briefly */
.row-flash { animation: rowflash 1.6s ease-out; }
@keyframes rowflash { 0% { background: rgba(200, 58, 30, 0.14); } 100% { background: transparent; } }
.panel-sheet:focus { outline: none; }
.input-error { border-color: var(--red); box-shadow: 0 0 0 2px rgba(200, 58, 30, 0.2); }

/* The three tab titles share one size that keeps each on a single line, phone to desktop */
.page-title, .list-intro h1.page-title {
  font-size: clamp(18px, 6.1vw, 36px); font-weight: 900; line-height: 1.1; letter-spacing: -0.3px;
  margin: 0; white-space: nowrap;
}

/* Services on a profile: small outlined tags */
.service-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.service-list li { font-size: 12px; font-weight: 700; padding: 4px 9px; border: 1.5px solid var(--ink); border-radius: 999px; }
.service-list li { background: var(--red); border-color: var(--red); color: var(--paper); }

/* Back to top (The List only) */
.to-top {
  position: fixed; right: 16px; z-index: 8;
  bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--red); background: var(--paper); color: var(--red);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 20, 20, 0.15);
}
.to-top[hidden] { display: none; }
.to-top:hover, .to-top:active { background: var(--red); color: var(--paper); }
@media (min-width: 960px) { .to-top { bottom: 28px; right: 28px; } }
@media print { .to-top { display: none !important; } }
.to-top { background: var(--red); color: var(--paper); border-color: var(--red); }
.to-top:hover, .to-top:active { background: #A82F17; border-color: #A82F17; color: var(--paper); }

/* Slimmer bottom tab bar (about 50px plus the iPhone home-bar area); tabs stay 44px tall to tap */
:root { --tabbar: 50px; }
.tab-bar { padding: 2px 8px max(4px, env(safe-area-inset-bottom)); }
.tab-bar a { min-height: 44px; gap: 3px; font-size: 12px; }
.tab-bar a svg { width: 22px; height: 22px; }
/* Centre the tab icons and labels top-to-bottom: equal space above and below
   (on iPhones the home-bar space is trimmed slightly so the tabs don't float high) */
:root { --tabbar: 54px; }
.tab-bar { padding: 6px 8px max(4px, calc(env(safe-area-inset-bottom) - 9px)); }
.tab-bar a { justify-content: center; }

/* Drop-down sections (Privacy on About us), same look as Ready-made by Plated */
.fold { border: 1.5px solid var(--ink); border-radius: 12px; padding: 0 14px; margin-top: 8px; }
.fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary .eyebrow { margin: 0; }
.fold[open] summary { border-bottom: 1px solid var(--rule); }
.fold .chev { margin-left: auto; position: relative; flex: none; width: 26px; height: 26px; border: 1.5px solid var(--red); border-radius: 50%; }
.fold .chev::before, .fold .chev::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--red); border-radius: 1px; transform: translate(-50%, -50%); }
.fold .chev::before { width: 12px; height: 2px; }
.fold .chev::after { width: 2px; height: 12px; }
.fold[open] .chev::after { display: none; }
.fold-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 0 16px; }
.share-options { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.share-options .btn { min-height: 48px; font-size: 15px; }
@media (min-width: 960px) { #share-sheet { align-items: center; justify-content: center; } #share-sheet .panel-sheet { max-width: 420px; border-radius: 14px; border: 1.5px solid var(--ink); } }
/* More breathing room between places on The List */
.row { padding: 24px 0 26px; }

/* Claim form: the place is shown, not chosen */
.claim-place { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--tint); }
.claim-place strong { font-size: 17px; }
.claim-place span { font-size: 13px; color: var(--grey); }
.claim-place a { margin-top: 6px; color: var(--red); font-weight: 700; }
.share-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 14px; }
.share-qr img { width: 132px; height: 132px; border: 1.5px solid var(--rule); border-radius: 10px; padding: 6px; background: #fff; box-sizing: content-box; }
.share-qr span { font-size: 12px; font-weight: 700; color: var(--grey); }

/* The List: header scrolls away; search + filters pin to the very top of the screen */
body.on-list .site-head { position: relative; }
body.on-list .list-sticky { top: 0; padding-top: max(4px, env(safe-area-inset-top)); }
body.on-list .list-sticky .search-row { margin-top: 4px; } /* 8px above the search bar when it sticks to the top (was 16px) */
body.on-list .sidebar { top: 16px; }

/* Edit Snack Track */
.edit-list .stop { align-items: center; }
.edit-list .stop .btn { flex: none; color: var(--red); border-color: var(--red); }
.add-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; }
.add-row .btn { flex: none; }
.edit-actions { margin-top: 6px; }
.edit-actions .btn { min-height: 48px; padding: 0 22px; }
@media (min-width: 560px) { .track-actions .btn-row { grid-template-columns: auto auto auto; } }


.stop-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stop-title .tag { flex: none; margin-top: 2px; }
.edit-track { border-color: var(--red); color: var(--red); font-weight: 700; }
.edit-track:hover { background: var(--red) !important; color: var(--paper); }
/* One divider above THE SHEET is enough: the list of places already ends with a line */
.track-sheet { border-top: 0; padding-top: 0; }

/* Date and time: the phone's own boxes, sized so both always fit side by side */
.plan-inputs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
.plan-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plan-field span { font-size: 12px; font-weight: 700; color: var(--grey); }
.plan-input {
  display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  min-height: 44px; height: 44px; padding: 0 10px; font-size: 16px; line-height: 44px;
  background: var(--paper); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.plan-input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.plan-input::-webkit-datetime-edit { padding: 0; }
.plan-input:disabled { opacity: 0.45; }

/* Special occasion note on a Snack Track stop */
.occasion-link { align-self: flex-start; color: var(--red); text-decoration: none; font-size: 14px; padding: 4px 0; }
.occasion-link:hover { text-decoration: underline; }
.occasion[hidden] { display: none; }

/* iPhones zoom in on any text box smaller than 16px. Keep every box at 16px so tapping one never zooms. */
input, select, textarea, .input, .plan-field .input, .plan-input, .note-box { font-size: 16px; }
/* My Journal on phones: clear space between the "Still want to try" list and the save options */
@media (max-width: 959px) { .journal-save { margin-top: 36px; } }

/* Desktop filters: the pinned sidebar scrolls on its own when it's taller than the window */
@media (min-width: 960px) {
  .sidebar {
    max-height: calc(100vh - var(--head-h) - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 8px 16px 2px; margin-left: -2px;
    scrollbar-width: thin;
  }
  .sidebar > * { flex-shrink: 0; }
  body.on-list .sidebar { max-height: calc(100vh - 32px); }
}

/* Bot check: only shows if Cloudflare needs a tap */
.bot-check { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--head-h, 64px) + 10px); z-index: 60; }
@media (min-width: 960px) { .bot-check { top: auto; bottom: 24px; left: auto; right: 24px; transform: none; } } /* desktop: bottom corner, clear of the page */
.bot-check.open { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 12px; padding: 10px; box-shadow: 5px 5px 0 var(--shadow); }
.bot-check p { margin: 0 0 8px; font-size: 13px; font-weight: 700; max-width: 300px; }
.bot-check [hidden] { display: none; }
.bot-check small { display: block; margin: 0 0 8px; font-size: 12px; color: var(--grey); max-width: 300px; }

/* 404: "Nothing to eat here…" (404.html and unknown in-app addresses) */
.nothing-here { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding-top: 48px; padding-bottom: 48px; }
.nothing-here h1 { margin: -6px 0 0; font-size: clamp(26px, 7vw, 40px); color: var(--ink); }
.nothing-here img { width: min(240px, 60vw); height: auto; }
.nothing-here .btn { min-width: 180px; text-decoration: none; }

/* Snack Track: the outing's one date + calendar, or "Add all to calendar" for spread-out tracks */
.outing-plan { border: 1.5px solid var(--red); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.outing-plan .label { margin: 0; color: var(--red); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }

/* Menu photos and PDFs: the editor (owner page, admin) and the viewer in the app */
.mf { display: flex; flex-direction: column; gap: 10px; }
.mf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mf-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.mf-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--rule); display: flex; align-items: center; justify-content: center; background: var(--tint); font-size: 12px; font-weight: 800; color: var(--red); box-sizing: border-box; }
.mf-pdf { border-color: var(--red); background: #FDF0ED; }
.mf-name { min-width: 0; }
.mf-add { align-self: flex-start; }
.mf-status { margin: 0; font-size: 13px; color: var(--grey); }
.mf-status:empty { display: none; }
.mf-review { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 13px; }
.mf-chip .mf-thumb { width: 44px; height: 44px; }
.menu-files { overflow-y: auto; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.menu-files[hidden] { display: none; }
.mf-photo { margin: 0; }
.mf-photo img { width: 100%; height: auto; display: block; border: 1.5px solid var(--rule); border-radius: 8px; }
.mf-photo figcaption { font-size: 13px; color: var(--grey); margin-top: 6px; }
.mf-pdf-btn { justify-content: flex-start; text-decoration: none; }

/* Near me, New on Plated, Closed for the holidays */
.list-controls .near-btn { flex: none; }
.near-btn { border-radius: 10px; } /* same corners as Filters */
.near-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.new { background: var(--red); color: var(--paper); border-color: var(--red); }
.closed-note { color: var(--red); font-weight: 700; }
.closed-box { border: 2px solid var(--red); border-radius: 10px; padding: 12px 14px; background: #FDF0ED; line-height: 1.45; }
.closed-box strong { display: block; color: var(--red); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; margin-bottom: 2px; }
.new-strip { padding: 14px 0 4px; }
.new-strip .eyebrow { margin: 0 0 8px; color: var(--red); }
.new-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.new-chip { flex: none; display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--ink); border-radius: 10px; padding: 8px 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14px; max-width: 220px; }
.new-chip span { font-weight: 400; font-size: 12px; color: var(--grey); }
@media (max-width: 959px) {
  .list-controls { flex-wrap: wrap; }
  .list-controls .show-seg { flex: 1 1 100%; }
  .list-controls .near-btn, .list-controls .filter-btn { flex: 1 1 0; justify-content: center; }
  /* a slimmer row of three: Near me, Surprise me, Filters */
  .list-controls { gap: 8px; flex-wrap: nowrap; }
  .list-controls .btn { min-height: 38px; font-size: 13px; padding: 0 8px; gap: 5px; white-space: nowrap; }
  .list-controls .surprise-btn { flex: 1.15 1 0; justify-content: center; }
}
/* Surprise me (grey) and its "Tonight, try…" card */
.surprise-btn { border-radius: 10px; background: #EEEDE8; border-color: #E2E1DC; font-weight: 700; }
.surprise-btn:hover { border-color: var(--ink); }
.sidebar .surprise-btn { width: 100%; justify-content: center; min-height: 44px; margin-top: 6px; }
.surprise-card { position: relative; border: 2px solid var(--red); border-radius: 12px; padding: 12px 14px; background: var(--paper); }
.surprise-band[hidden] { display: none; }
/* the card sits on the list's grey: a band straight above the place cards, matching their edges */
body.on-list .surprise-band { background: var(--tint); margin: 0 -16px; padding: 16px 16px 0; }
@media (min-width: 960px) {
  body.on-list .surprise-band { margin: 0; padding: 20px 20px 0; position: relative; isolation: isolate; background: none; }
  body.on-list .surprise-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -100vw; background: var(--tint); z-index: -1; }
  body.on-list .list-layout.has-sidebar .surprise-band::before { left: -40px; }
}
.surprise-lead { margin: 0; font-family: "Just Another Hand", cursive; color: var(--red); font-size: 26px; line-height: 1; }
.surprise-name { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 19px; font-weight: 800; color: var(--ink); text-decoration: none; padding-right: 30px; }
.surprise-name:hover span { text-decoration: underline; }
.surprise-where { margin: 2px 0 10px; font-size: 13px; color: var(--grey); }
.surprise-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.surprise-actions .btn { gap: 5px; }
.surprise-close { position: absolute; top: 6px; right: 6px; }

/* "Are you sure?" box (deletes and other actions that can't be undone) */
.confirm-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(20, 20, 20, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.confirm-box { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 rgba(20, 20, 20, .25); padding: 20px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.confirm-msg { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.confirm-detail { margin: 0; font-size: 14px; color: var(--grey); line-height: 1.45; }
.confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }

.tag-note { margin: 8px 0 0; }

/* Snack Tracks: reservations and the share-again nudge */
.booking { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.booking .label { font-size: 12px; font-weight: 700; color: var(--grey); }
.booked-yes { color: #1E7A3C; font-weight: 700; }
.booked-no { color: var(--red); font-weight: 700; }
.reservation-summary { margin: 0; font-size: 14px; font-weight: 700; }
.reservation-summary.to-go { color: var(--red); }
.reservation-summary.all-set { color: #1E7A3C; }
.share-nudge { border: 1.5px solid #B7791F; background: #FFF8E6; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.share-nudge p { margin: 0; font-size: 14px; line-height: 1.45; }
.home-steps { margin-top: 10px; }
.home-steps summary { font-size: 13px; font-weight: 700; }
.home-steps-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--soft); display: flex; flex-direction: column; gap: 6px; }

/* Home-screen pop-up: slides up from the bottom, above the tab bar */
.home-prompt { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom)); z-index: 90;
  max-width: 460px; margin: 0 auto; display: flex; gap: 14px; align-items: flex-start; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--shadow); padding: 14px 16px;
  animation: home-prompt-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.home-prompt.leaving { animation: home-prompt-out .25s ease-in both; }
.home-prompt-plate { flex: none; animation: home-prompt-bob 2.4s ease-in-out .6s 2; }
.home-prompt-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-prompt-body strong { font-size: 16px; }
.home-prompt-body p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--soft); }
.home-prompt-how { color: var(--ink) !important; }
.home-prompt-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.home-prompt-never { font-size: 13px; }
/* "Show me how": big numbered steps, each with a picture of what to tap */
.home-prompt-steps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-prompt-steps-head { display: flex; align-items: center; justify-content: space-between; margin: -6px -6px 4px 0; }
.home-prompt-steps-title { font-family: "Just Another Hand", cursive; font-weight: 400; color: var(--red); font-size: 32px; line-height: 1; outline: none; }
.hp-steps { list-style: none; counter-reset: hp; margin: 0; padding: 0; }
.hp-steps li { counter-increment: hp; display: grid; grid-template-columns: 26px 1fr 36px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.35; color: var(--ink); }
.hp-steps li::before { content: counter(hp); width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: var(--paper); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.hp-steps li small { display: block; margin-top: 2px; font-size: 13px; color: var(--grey); }
.hp-step-icon { width: 36px; height: 36px; border: 1.5px solid var(--rule); border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--paper); }
/* My Journal's home-screen box: the install button or the same steps */
.home-how { margin-top: 10px; }
.home-how .hp-steps li:last-child { border-bottom: 1px solid var(--rule); }
.home-install { width: 100%; justify-content: center; gap: 8px; }
.home-prompt-steps-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--grey); }
@keyframes home-prompt-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes home-prompt-out { to { transform: translateY(30px); opacity: 0; } }
@keyframes home-prompt-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-5px) rotate(-6deg); } }
@media (min-width: 960px) { .home-prompt { bottom: 24px; left: auto; right: 24px; } }
@media (prefers-reduced-motion: reduce) { .home-prompt, .home-prompt.leaving, .home-prompt-plate { animation: none; } }

/* Site-wide notice under the header */
.site-notice { background: var(--red); color: var(--paper); }
.site-notice .wrap { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.site-notice p { margin: 0; flex: 1; font-weight: 700; font-size: 14px; line-height: 1.35; }
.site-notice .icon-btn { color: var(--paper); width: 36px; height: 36px; font-size: 24px; flex: none; }

/* Logo: the city, handwritten under the bottom-right of PLATED (Just Another Hand) */
.brand { position: relative; }
.brand-city { position: absolute; right: -4px; bottom: -9px; font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-size: 21px; letter-spacing: .01em;
  color: var(--red); transform: rotate(-7deg); transform-origin: right bottom; line-height: 1; white-space: nowrap; pointer-events: none; }
@media (min-width: 960px) { .brand-city { font-size: 25px; bottom: -11px; right: -6px; } }

.restore-link { color: var(--red); text-decoration: underline; font-weight: 700; }

.start-track { gap: 8px; }
.btn-icon { display: inline-flex; }
.btn-icon svg { display: block; }

/* Snack Tracks home: the "No tracks yet" line sits right under the Ready-made drop-down */
.no-tracks { margin-top: -26px; }

/* Visits on a place page */
.visits { display: flex; flex-direction: column; gap: 12px; }
.visits-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.visits-head .label { font-weight: 800; }
.visit-form { display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--rule); border-radius: 10px; padding: 12px; }
.visit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.visit { border-top: 1px solid var(--rule); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.visit:first-child { border-top: 0; }
.visit p { margin: 0; line-height: 1.45; }
.visit .muted { color: var(--grey); font-size: 14px; }
.visit-note { color: var(--soft); font-style: italic; }
.visit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.visit-actions { display: flex; gap: 14px; font-size: 13px; }

/* How Plated works: questions */
.faq { display: flex; flex-direction: column; }
.faq-item { margin-top: 8px; }
.faq-q { font-weight: 700; font-size: 15px; line-height: 1.35; }
.faq-warn { color: var(--red); }

/* FAQ long answer, and the journal backup nudge */
.faq-answer { display: flex; flex-direction: column; gap: 10px; }
.faq-answer p { margin: 0; line-height: 1.55; }
.faq-steps { margin: -4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.backup-nudge { border: 2px solid var(--red); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: #FDF0ED; }
.backup-nudge strong { color: var(--red); font-size: 16px; }
.backup-nudge p { margin: 0; line-height: 1.45; font-size: 14px; }

/* Page titles in the logo's handwriting (Just Another Hand), sized up since the face is narrow */
.page-title.script-title, .list-intro h1.page-title.script-title {
  font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; letter-spacing: .01em;
  font-size: clamp(38px, 11.5vw, 60px); line-height: .95; margin-top: 2px;
}

/* Clear (×) button inside search boxes */
.search-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.search-wrap .input { width: 100%; box-sizing: border-box; padding-right: 44px; }
.search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--tint); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 2px; }
.search-clear:hover, .search-clear:focus-visible { background: var(--red); color: var(--paper); }
.search-clear[hidden] { display: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tools .search-wrap { flex: 1 1 220px; }
@media (max-width: 640px) { .tools .search-wrap { flex-basis: 100%; } }
.search-row > svg, .search-row > span > svg { z-index: 2; }
.search-row > span[aria-hidden] { position: absolute; left: 0; top: 0; bottom: 0; width: 42px; z-index: 2; pointer-events: none; }

/* New Snack Track, step 2: pinned bar (back, summary, search, filters, picked) and pinned Make button */
.next-step { margin-top: 6px; }
.step-bar { position: sticky; top: var(--head-h); z-index: 6; background: var(--paper); display: flex; flex-direction: column; gap: 10px;
  margin: 0 -16px; padding: 10px 16px 12px; border-bottom: 1.5px solid var(--ink); }
@media (min-width: 700px) { .step-bar { margin: 0 -24px; padding: 10px 24px 12px; } }
.step-bar .finder { gap: 8px; }
.step-bar .search-row { margin: 0; }
.step-bar .picked-count { margin: 0; }
.step-back { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 4px 0; }
.step-back:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.step-back-arrow, .step-back-label { color: var(--red); font-weight: 800; flex: none; }
.step-summary { color: var(--grey); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.picker.picker-page { max-height: none; overflow: visible; }
.make-bar { position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); z-index: 6; background: var(--paper);
  margin: 0 -16px; padding: 10px 16px; border-top: 1.5px solid var(--ink); }
@media (min-width: 700px) { .make-bar { margin: 0 -24px; padding: 10px 24px; } }
@media (min-width: 960px) { .make-bar { bottom: 0; } }

/* New track: "Your track is ready" checklist */
.ready-box { border: 2px solid var(--red); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.ready-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ready-head strong { color: var(--red); font-size: 17px; }
.ready-box > p { margin: 0; font-size: 14px; color: var(--grey); }
.ready-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ready-list button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 0; width: 100%; font-weight: 700; font-size: 15px; }
.ready-list button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.ready-list li + li { border-top: 1px solid var(--rule); }
.ready-tick { flex: none; width: 22px; height: 22px; border: 2px solid var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--paper); }
.ready-list li.done .ready-tick { background: var(--red); }
.ready-list li.done button { color: var(--grey); text-decoration: line-through; cursor: default; }

/* Step 2's Make button sits right on the tab bar (measured height), all the way to the end of the list */
.make-bar { bottom: var(--tabbar-h, calc(var(--tabbar) + env(safe-area-inset-bottom))); }
.view > .wrap.step-two { padding-bottom: 0; }
@media (max-width: 959px) { body:has(.step-two) { padding-bottom: var(--tabbar-h, calc(var(--tabbar) + env(safe-area-inset-bottom))); } }
@media (min-width: 960px) { .make-bar { bottom: 0; } }

/* Step 2: Open filters and Clear selections side by side */
.finder-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.clear-picks:disabled { opacity: .45; cursor: default; }
.clear-picks { flex: none; min-height: 44px; border-radius: 10px; padding: 0 12px; }

/* Finished Snack Tracks: note on the track, and the Cleaned plates section in My Journal */
.cleaned-note { border: 2px solid var(--red); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: #FDF0ED; }
.cleaned-note strong { color: var(--red); font-size: 16px; }
.cleaned-note p { margin: 0; font-size: 14px; line-height: 1.45; }
.cleaned-link { color: var(--red); font-weight: 700; text-decoration: underline; align-self: flex-start; }
.journal-tracks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.journal-switch { margin-top: 4px; }

/* Place page: details confirmed by the owner */
.confirmed-line { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--grey); }
.confirmed-line > span { flex: none; }

/* For Chefs: warm introduction above the details */
.chefs-intro { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1.5px solid var(--ink); }
.chefs-intro p { margin: 0; line-height: 1.6; }
.chefs-intro .eyebrow { margin: 0 0 6px; line-height: 1.4; }
.chefs-intro > p { color: var(--red); font-style: italic; } /* the whole introduction is red; the eyebrow above it stays grey */
.chefs-intro > p.together { font-weight: 800; font-size: 17px; color: var(--ink); font-style: normal; } /* the lead-in to the details stays black */

/* Opening animation (index.html): about 3.5 seconds, once a day, tap to skip */
.opening { position: fixed; inset: 0; z-index: 500; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.opening.out { opacity: 0; transition: opacity 350ms ease; pointer-events: none; }
.opening-plate { width: 132px; height: 132px; overflow: visible; animation: opening-roll 1060ms cubic-bezier(.2, .7, .25, 1) both; }
.opening-glint { animation: opening-glint 1060ms linear both; }
.opening-check { stroke-dasharray: 14; stroke-dashoffset: 14; animation: opening-tick 560ms ease-out 1090ms forwards; }
.opening-bump { transform-box: fill-box; transform-origin: center; animation: opening-bump 490ms ease-out 1510ms both; }
.opening-hey { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; color: var(--red); font-size: 50px; line-height: 1.1; margin: 0; transform: rotate(-5deg);
  padding: 4px 14px 12px 6px; /* room for the g tail and the ! so the reveal never clips them */
  clip-path: inset(0 100% 0 0); animation: opening-write 1200ms steps(22, end) 1550ms forwards; }
@keyframes opening-roll { from { transform: translateX(-75vw) rotate(-540deg); } to { transform: translateX(0) rotate(0deg); } }
@keyframes opening-glint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes opening-tick { to { stroke-dashoffset: 0; } }
@keyframes opening-bump { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes opening-write { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .opening { animation: opening-fade 300ms ease both; }
  .opening-plate, .opening-bump, .opening-glint { animation: none; }
  .opening-glint { display: none; }
  .opening-check { animation: none; stroke-dashoffset: 0; }
  .opening-hey { animation: none; clip-path: none; }
}
@keyframes opening-fade { from { opacity: 0; } }
@media print { .opening { display: none !important; } }

/* Invitations (js/invite.js) */
.invite-entry { display: flex; flex-direction: column; gap: 6px; margin-top: -2px; }
.start-invite { gap: 8px; align-self: stretch; justify-content: center; }
.invite-maker .seg button { font-size: 13px; padding: 0 6px; }
.invite-place { display: flex; flex-direction: column; gap: 8px; }
.picked-place { border: 1.5px solid var(--ink); border-radius: 12px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.picked-place b { display: block; }
.picked-place small { color: var(--grey); }
.invite-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.invite-results button { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 10px 2px; width: 100%; border-bottom: 1px solid var(--rule); }
.invite-results button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.invite-results small { color: var(--grey); font-size: 13px; }
.invite-maker .date-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.host-tip { border: 2px solid var(--red); border-radius: 12px; padding: 12px 14px; background: #FDF0ED; font-size: 14px; line-height: 1.45; }
.host-tip strong { color: var(--red); display: block; margin-bottom: 2px; }
.host-tip a { color: var(--red); font-weight: 700; }
.invite-colours { display: flex; flex-wrap: wrap; gap: 10px; }
.invite-colours button { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--rule); }
.invite-colours button[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ink); }
.invite-colours button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.invite-err { color: var(--red); font-weight: 700; margin: 0; }
.invite-err:empty { display: none; }
.invite-img { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.10); }
.invite-img-holder { min-height: 200px; display: flex; align-items: center; justify-content: center; }
.invite-actions { display: flex; flex-direction: column; gap: 8px; max-width: 480px; width: 100%; margin: 0 auto; }
.invite-actions .cal-wrap { display: flex; flex-direction: column; gap: 6px; }
.invite-actions .cal-btn { width: 100%; justify-content: center; min-height: 46px; font-size: 15px; }
.invite-actions .cal-menu { display: flex; gap: 8px; justify-content: center; }
.invite-actions .cal-menu[hidden] { display: none; }
.invite-more { text-align: center; color: var(--red); font-weight: 700; }
.invite-past { border: 1.5px dashed var(--rule); border-radius: 12px; padding: 14px 16px; line-height: 1.5; }

/* Date and time fields on phones: iPhones give them a built-in minimum width and centred text, which
   pushes them out of their boxes. Same fix for every one in the app (the Snack Track ones had it already). */
input.input[type="date"], input.input[type="time"] {
  display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; height: 48px; line-height: 48px;
  -webkit-appearance: none; appearance: none; background: var(--paper); color: var(--ink); text-align: left;
}
input.input[type="date"]::-webkit-date-and-time-value, input.input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input.input[type="date"]::-webkit-datetime-edit, input.input[type="time"]::-webkit-datetime-edit { padding: 0; }
input.input.plan-input { height: 44px; line-height: 44px; }
.date-pair > *, .field { min-width: 0; }

.note-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.note-count { font-size: 13px; font-weight: 600; color: var(--grey); font-variant-numeric: tabular-nums; }
.note-count.full { color: var(--red); }
.invite-reply { margin: 6px 0 0; text-align: center; font-size: 15px; color: var(--ink); }

/* Snack Tracks page: Ready-made, then Start / or / Create an invitation, then tracks or a centred empty note */
.tracks-home { min-height: calc(100dvh - var(--head-h, 70px) - var(--tabbar-h, 0px) - 56px); }
.tracks-home .ready-made { margin-bottom: 0; }
.make-row { display: flex; flex-direction: column; gap: 8px; }
.make-row .start-track, .make-row .start-invite { width: 100%; justify-content: center; min-height: 50px; }
.make-or { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 700; color: var(--grey); }
.make-or::before, .make-or::after { content: ""; width: 28px; border-top: 1.5px solid var(--rule); }
.tracks-home .invite-entry { margin-top: 0; }
.tracks-home .no-tracks { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }
.tracks-home .no-tracks p { margin: 0; max-width: 300px; color: var(--red); font-weight: 400; font-size: 14px; line-height: 1.5; }
@media (min-width: 700px) {
  .make-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .make-or { display: none; }
}

/* For Chefs: a line, then "Thank you.", then room before the lead-in to the details */
.chefs-intro > p.chefs-thanks { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-style: normal; font-size: 36px; line-height: 1; margin-top: 4px; }
.chefs-intro > p.together { margin-top: 18px; }

/* Snack Tracks home: phones keep one column (the wrapper steps aside, order sets the sequence, no picture) */
.th-main { display: contents; }
.th-intro { order: 1; } .th-tip { order: 2; } .th-ready { order: 3; } .th-make { order: 4; } .th-mine { order: 5; }
.th-art { display: none; }
/* Phones with tracks: "+ Plan something" floats above the tab bar and opens a panel with the three ways to start */
.tracks-home.has-fab { padding-bottom: 76px; }
.tracks-home.has-fab .th-intro { margin-bottom: -18px; } /* the label sits right above My Snack Tracks, like The List and My Journal */
.tracks-home.has-fab .pads-title { margin-top: 0; }
.tracks-home.has-fab .th-mine { order: 2; } /* your tracks first, Ready-made after */
.tracks-home.has-fab .th-mine .th-ready { order: 0; margin: 0; } /* Ready-made sits between the heading and the notepad */
.plan-fab { position: fixed; right: 16px; bottom: calc(var(--tabbar-h, 56px) + 14px); z-index: 40; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 26px; background: var(--red); color: var(--paper); font: inherit; font-size: 15px; font-weight: 800; padding: 12px 18px; box-shadow: 3px 3px 0 rgba(20, 20, 20, .45); cursor: pointer; }
.plan-fab span { font-size: 20px; line-height: 1; font-weight: 700; }
body.menu-open .plan-fab, body.plan-sheet-open .plan-fab, body:has(.home-prompt) .plan-fab, body:has(.day-pop) .plan-fab { display: none; }
.plan-sheet-backdrop { position: fixed; left: 0; right: 0; top: 0; bottom: var(--tabbar-h, 56px); z-index: 45; background: rgba(20, 20, 20, .35); display: flex; align-items: flex-end; }
.plan-sheet-backdrop[hidden] { display: none; }
.plan-sheet { width: 100%; background: var(--paper); border-top: 2px solid var(--ink); border-radius: 18px 18px 0 0; padding: 10px 16px 16px; max-height: 85%; overflow-y: auto; animation: plan-sheet-up .22s ease-out; outline: none; }
.plan-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 0 auto 6px; }
.plan-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.plan-sheet-title { margin: 0; font-family: "Just Another Hand", cursive; font-weight: 400; color: var(--red); font-size: 34px; line-height: 1; }
.plan-sheet .th-plan { margin-top: 8px; }
@keyframes plan-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plan-sheet { animation: none; } }
/* Computers: one column on the left, the map picture on the right */
@media (min-width: 960px) {
  .tracks-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 64px; align-items: start; min-height: 0; }
  .th-main { display: flex; flex-direction: column; gap: 22px; }
  /* computers: intro, tip, Ready-made, Start a Snack Track, Create an invitation (and its line), your tracks */
  .th-main .th-intro { order: 1; } .th-main .th-tip { order: 2; } .th-main .th-ready { order: 3; } .th-main .th-make { order: 4; } .th-main .th-mine { order: 5; }
  .th-main .make-row { display: flex; flex-direction: column; gap: 10px; }
  .th-main .make-or { display: none; }
  .th-art { display: block; position: sticky; top: calc(var(--head-h, 70px) + 24px); }
  .th-art-svg { display: block; width: 85%; height: auto; margin: 0 auto; } /* 15% smaller than its column */
  .tracks-home .th-main .no-tracks { flex: none; justify-content: center; text-align: center; padding: 12px 0 0; }
  .tracks-home .th-main .no-tracks p { max-width: none; }
}

/* My Journal: empty messages sit centred */
.journal-empty { text-align: center; margin: 0; padding: 28px 12px; }

/* Ready-made by Plated: red border to match its red plus */
.ready-made { border-color: var(--red); }

/* The List: each place is a light card (thin soft-grey border, rounded, space between).
   The long selectors beat the older divider-line rules (they removed the top border). */
.rows { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; } /* the padding: room under the sticky search bar */
.rows .row:nth-child(n), .list-sticky + .rows .row:nth-child(n) { border: 1px solid #DDDAD2; border-radius: 16px; padding: 16px; background: var(--paper); }
@media (min-width: 700px) { .rows .row:nth-child(n), .list-sticky + .rows .row:nth-child(n) { padding: 22px; } }
@media (min-width: 960px) { .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding-top: 20px; } } /* two columns on computers, as before */

/* "How was it?" after ticking a Snack Track stop, and "Loved this visit" */
.hw-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.hw-done { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--grey); }
.hw-loved { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.hw-loved input { width: 22px; height: 22px; accent-color: var(--red); margin: 2px 0 0; flex: none; }
.hw-loved span { display: flex; flex-direction: column; gap: 3px; }
.hw-loved strong { display: inline-flex; align-items: center; gap: 6px; color: var(--red); }
.hw-loved small { color: var(--grey); font-size: 13px; }
.loved-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--red); vertical-align: 1px; }

/* When a sheet is open (How was it?, Directions, Share, Filters), the one-time bot check moves to the top so it never covers the sheet */
body:has(.filter-panel) .bot-check { top: calc(var(--head-h, 70px) + 12px); bottom: auto; }

/* Gift a local meal: the banner on The List and the guide page */
.gift-banner { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1.5px solid var(--red); border-radius: 14px;
  background: #FDF0ED; color: var(--red); text-decoration: none; }
.gift-banner .gift-text { display: flex; flex-direction: column; gap: 2px; flex: 1; text-align: left; }
.gift-banner strong { font-size: 16px; }
.gift-banner small { color: var(--ink); font-size: 13px; }
.gift-banner .arrow { font-size: 20px; }
.gift-groups { display: flex; flex-direction: column; gap: 30px; }
.gift-group { display: flex; flex-direction: column; gap: 10px; }
.gift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .gift-list { grid-template-columns: 1fr 1fr; } }
.gift-card { border: 1px solid #DDDAD2; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.gift-card-top { display: flex; flex-direction: column; gap: 2px; }
.gift-name { font-weight: 800; font-size: 18px; color: var(--ink); text-decoration: none; }
.gift-name:hover { color: var(--red); }
.gift-where { color: var(--grey); font-size: 13px; }
.gift-line { margin: 0; font-style: italic; color: var(--soft); line-height: 1.45; }
.gift-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.gift-btns .btn { flex: 1 1 auto; justify-content: center; }

/* Finished Snack Track: the memento (on screen, Save image, Print) */
.memento-card { border: 2px solid var(--m-fill, var(--red)); border-radius: 16px; padding: 22px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--paper); }
.memento-stamp { border: 2px solid var(--m-ink, var(--red)); color: var(--m-ink, var(--red)); border-radius: 8px; padding: 4px 12px; font-weight: 900; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-3deg); }
.memento-title { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; color: var(--m-ink, var(--red)); font-size: 40px; line-height: 1; margin: 8px 0 0; }
.memento-when { margin: 0; color: var(--grey); font-size: 14px; }
.memento-stops { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; }
.memento-stops li { display: flex; gap: 12px; align-items: flex-start; }
.memento-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--m-fill, var(--red)); color: var(--m-on, #fff); font-weight: 900; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.memento-stop { display: flex; flex-direction: column; gap: 2px; }
.memento-meta { font-size: 13px; color: var(--grey); font-weight: 600; }
.memento-order { font-size: 13px; font-style: italic; color: var(--soft); }
.memento-sig { display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: 12px; color: #9A9A96; }
.memento .btn-row .btn { flex: 1 1 auto; justify-content: center; }
@media print {
  .ps-memento { display: flex; align-items: center; justify-content: center; }
  .ps-memento img { width: 100%; max-height: 9.6in; object-fit: contain; }
}
.memento-share { width: 100%; justify-content: center; }
@media (max-width: 959px) { .track-page .memento { margin-top: 32px; } } /* room between the places list and Your memento */
.memento-share { color: var(--red); border-color: var(--red); } /* red button and text */

/* Your journal pictures: the highlight card and one card per place (each saves as a 1080 x 1350 picture) */
.jp-section { display: flex; flex-direction: column; gap: 12px; }
.jp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .jp-list { grid-template-columns: 1fr 1fr; } }
.jp-card { border: 2px solid var(--red); border-radius: 16px; padding: 20px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--paper); }
.jp-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.jp-title { margin: 2px 0 6px; font-family: "Just Another Hand", "Archivo", cursive; color: var(--red); font-size: 40px; line-height: 1; }
.jp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.jp-stats div { border: 1px solid #DDDAD2; border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; }
.jp-stats b { font-size: 28px; font-weight: 900; line-height: 1.1; }
.jp-stats .hf b { color: var(--red); }
.jp-stats span { font-size: 12px; color: var(--grey); font-weight: 700; }
.jp-lines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jp-lines span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.jp-lines b { font-size: 15px; }
.jp-name { margin: 2px 0 0; font-weight: 900; font-size: 22px; line-height: 1.15; }
.jp-where { margin: 0; color: var(--grey); font-size: 13px; }
.jp-been { margin: 6px 0 0; font-family: "Just Another Hand", "Archivo", cursive; color: var(--red); font-size: 34px; line-height: 1; }
.jp-tags { margin: 4px 0 0; color: var(--red); font-weight: 800; font-size: 13px; }
.jp-block { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.jp-block span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.jp-block p { margin: 0; font-style: italic; font-size: 14px; color: var(--soft); }
.jp-sig { margin: 8px 0 0; font-size: 12px; color: #9A9A96; }
.jp-save { width: 100%; justify-content: center; margin-top: 10px; }
.jp-section > .jp-save { margin-top: 0; }
/* Locations editor (admin and owner pages): one card per location */
.loc-ed { display: flex; flex-direction: column; gap: 10px; }
.loc-ed-single { margin: 0; }
.loc-ed-single[hidden] { display: none; }
.loc-ed-list { display: flex; flex-direction: column; gap: 10px; }
.loc-ed-list:empty { display: none; }
.loc-ed-card { border: 1.5px solid var(--rule); border-radius: 12px; background: var(--paper); }
.loc-ed-card[open] { border-color: var(--ink); }
.loc-ed-card summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.loc-ed-card summary::-webkit-details-marker { display: none; }
.loc-ed-card summary::after { content: "▸"; margin-left: auto; color: var(--grey); transition: transform .15s; }
.loc-ed-card[open] summary::after { transform: rotate(90deg); }
.loc-ed-head { display: flex; flex-direction: column; min-width: 0; }
.loc-ed-title { font-weight: 800; }
.loc-ed-sub { color: var(--grey); font-size: 13px; }
.loc-ed-sub:empty { display: none; }
.loc-ed-body { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.loc-ed-remove, .loc-ed-ask { align-self: flex-start; }
.loc-ed-ask { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.loc-ed-card.asking { border-style: dashed; border-color: var(--red); }
.loc-ed-add { align-self: flex-start; }
.loc-ed-add[hidden] { display: none; }
.loc-sum { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.loc-sum li { display: flex; flex-direction: column; }
.loc-sum span, .loc-sum small { font-size: 13px; color: var(--grey); overflow-wrap: anywhere; }
/* Optional button on the site-wide notice; drops under the text on narrow phones */
.site-notice .wrap { flex-wrap: wrap; }
.site-notice .notice-btn { flex: none; color: var(--paper); border: 1.5px solid var(--paper); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; }
.site-notice .notice-btn:hover, .site-notice .notice-btn:active { background: var(--paper); color: var(--red); }
@media (max-width: 480px) {
  .site-notice p { flex-basis: calc(100% - 46px); }
  .site-notice .icon-btn { order: 2; }
  .site-notice .notice-btn { order: 3; }
}
/* The List: the All / Want to try / Been switch lives at the top of Filters */
.filter-fields .show-seg { flex: none; width: 100%; }
/* Filters sheet: Clear all / Show places stay on the bottom edge, solid, with nothing showing below them */
.panel-sheet:has(> .panel-foot) { padding-bottom: 0; }
.panel-sheet > .panel-foot { margin: 16px -16px 0; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); z-index: 2; box-shadow: 0 -6px 12px -8px rgba(20, 20, 20, 0.25); }
/* Hours on place pages (only when the hours switch is on): the owner's own words, line breaks kept */
.hours-box { display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--ink); padding: 2px 0 2px 12px; font-size: 15px; }
.hours-box span { white-space: pre-line; color: var(--grey); }
/* Custom colour swatch: a rainbow ring; once picked, the chosen colour sits in the middle */
.invite-colours .colour-custom { cursor: pointer; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--rule); box-sizing: content-box; background: conic-gradient(#E53935, #FDD835, #43A047, #1E88E5, #8E24AA, #E53935); position: relative; }
.invite-colours .colour-custom::after { content: "+"; position: absolute; inset: 5px; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.invite-colours .colour-custom.picked { box-shadow: 0 0 0 2.5px var(--ink); }
.invite-colours .colour-custom.picked::after { content: ""; background: var(--picked); }
.invite-colours .colour-custom:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.colour-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; z-index: 1; }
.invite-colours { position: relative; }
/* About us: how Plated started, then the group chat blurb */
.about-story { border: 2px solid var(--red); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.about-story p { margin: 0; line-height: 1.55; }
.about-kicker { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.about-hand { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; color: var(--red); font-size: 38px; line-height: .95; margin: 0; }
.about-chat { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.about-chat h2 { margin: 0; font-size: 19px; font-weight: 900; }
.about-chat p { margin: 0; line-height: 1.55; font-style: italic; color: var(--soft); }
.about-story { position: relative; }
.about-bubble { position: absolute; top: -26px; right: -12px; transform: rotate(6deg); line-height: 0; }
.about-story .about-kicker, .about-story .about-hand { padding-right: 64px; }
@media (max-width: 480px) { .about-bubble { right: -4px; } }
/* How Plated works: the step names (Find a place., Mark it., ...) in red */
.red-lead { color: var(--red); font-weight: 800; }
.input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
/* Snack Track step 2 on computers and tablets: search box, Open filters and Clear selections on one row; filters open underneath.
   Phones keep the stacked layout (search, then the two buttons). */
@media (min-width: 560px) {
  .finder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .finder .finder-btns { flex-wrap: nowrap; }
  .finder .finder-filters { grid-column: 1 / -1; }
  .finder .filter-btn, .finder .clear-picks { min-height: 44px; white-space: nowrap; }
}
/* Snack Track step 2: each place's one-liner under its name, two lines at most */
.picker .p-why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--soft); }
/* Snack Track step 2 on phones: Open filters and Clear selections share the full width, half each */
@media (max-width: 559px) {
  .finder .finder-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .finder .filter-btn, .finder .clear-picks { width: 100%; justify-content: center; min-height: 44px; align-self: stretch; }
}
/* The List cards: the offset shadow shows on hover (computers) and while pressed (phones); Plated Picks and new places keep it */
.rows .row:nth-child(n) { transition: box-shadow .15s, border-color .15s; }
@media (hover: hover) { .rows .row:nth-child(n):hover { box-shadow: 4px 4px 0 var(--shadow); border-color: var(--ink); } }
.rows .row:nth-child(n):active { box-shadow: 4px 4px 0 var(--shadow); border-color: var(--ink); }
.rows .row.is-special:nth-child(n) { box-shadow: 4px 4px 0 var(--shadow); border-color: var(--ink); }
/* My Journal home-screen tip: "Other phones and browsers" is a red bar with white text, and stays red with white text when opened */
.fold.home-steps { background: var(--red); border-color: var(--red); color: var(--paper); }
.fold.home-steps summary { color: var(--paper); }
.fold.home-steps summary::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 700; line-height: 1; }
.fold.home-steps[open] summary { border-bottom-color: rgba(255, 255, 255, .35); }
.fold.home-steps[open] summary::after { content: "\2212"; }
.fold.home-steps .home-steps-list { color: var(--paper); padding-bottom: 12px; }
.fold.home-steps .home-steps-list b { color: var(--paper); }
/* Plate cursor on computers (mouse or trackpad only): the Plated plate everywhere, with a red rim over things you can click.
   Typing boxes keep the normal text cursor. Switch it off in the menu ("Use regular cursor"). */
@media (hover: hover) and (pointer: fine) {
  html.plate-cursor, html.plate-cursor body { cursor: url("icons/cursor-plate.svg") 14 14, auto; }
  html.plate-cursor a, html.plate-cursor button, html.plate-cursor summary, html.plate-cursor label, html.plate-cursor select,
  html.plate-cursor [role="button"], html.plate-cursor input[type="checkbox"], html.plate-cursor input[type="radio"] {
    cursor: url("icons/cursor-plate-click.svg") 14 14, pointer;
  }
  html.plate-cursor button:disabled { cursor: url("icons/cursor-plate.svg") 14 14, not-allowed; }
}
.cursor-toggle { display: none; }
@media (hover: hover) and (pointer: fine) { .cursor-toggle { display: inline-flex; align-self: center; margin: -6px 0 14px; font-size: 13px; } }
/* Seasonal places */
.tag.season { background: #E6F0EA; color: #2F6B45; }
.season-line { margin: 0; font-size: 14px; color: var(--grey); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.season-fields[hidden] { display: none; }
.season-editor { display: flex; flex-direction: column; gap: 12px; }
.season-fields { display: flex; flex-direction: column; gap: 12px; }
/* Owner kit (owner page and Dashboard) */
.owner-kit { display: flex; flex-direction: column; gap: 12px; }
.kit-previews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.kit-thumb { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.kit-thumb img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.kit-thumb figcaption { font-size: 12px; color: var(--grey); text-align: center; }
.kit-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-blurb { margin: 0; font-size: 13px; color: var(--soft); background: var(--tint); border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; }
.kit-note { margin: 0; font-size: 13px; font-weight: 700; color: var(--red); }
.kit-note:empty { display: none; }
@media (max-width: 520px) { .kit-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Memento photo: a postcard taped onto the memento (kept on this phone only) */
.memento-photo { position: relative; margin: 10px auto 6px; width: 86%; background: #fff; padding: 8px; border: 1px solid #E3E1DA; box-shadow: 0 4px 12px rgba(20, 20, 20, .14); transform: rotate(-1.6deg); }
.memento-photo[hidden] { display: none; }
.memento-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.memento-photo::before, .memento-photo::after { content: ""; position: absolute; top: -10px; width: 64px; height: 20px; background: rgba(236, 226, 196, .88); }
.memento-photo::before { left: 6px; transform: rotate(-28deg); }
.memento-photo::after { right: 6px; transform: rotate(28deg); }
.memento-photo-tools { display: flex; flex-direction: column; gap: 10px; }
.memento-pick { position: relative; align-self: flex-start; cursor: pointer; }
.memento-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.memento-move { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--grey); }
.memento-move input { width: 100%; accent-color: var(--red); }
.memento-ink { margin: 0; color: var(--red); font-weight: 700; }
.memento-ink[hidden] { display: none; }
.kit-scans { margin: 0; font-size: 14px; font-weight: 700; }
.hw-later { margin: 4px 0 0; font-size: 12px; color: var(--grey); text-align: center; }

/* Journal: "Save a copy" options fold away until asked for */
.save-fold { margin-top: 2px; }
.save-fold summary { font-weight: 700; }
.save-fold[open] .fold-plus { transform: rotate(45deg); }
.save-fold .fold-plus { margin-left: auto; font-size: 22px; line-height: 1; color: var(--red); transition: transform 0.15s; }

/* Mementos for a single visit (#/journal/memento/...) and the links that open them */
.memento-lines { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0 4px; max-width: 100%; }
.memento-lines p { margin: 0; }
.memento-tags { color: var(--m-ink, var(--red)); font-weight: 800; font-size: 15px; }
.memento-ordered { font-weight: 900; font-size: 18px; display: flex; flex-direction: column; gap: 2px; }
.memento-ordered span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.memento-note { font-style: italic; color: var(--soft); font-size: 14px; }
.memento-keep { margin: 0; color: var(--ink); font-weight: 600; }
.visit-memento { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--red); font-weight: 700; font-size: 14px; text-decoration: none; min-height: 32px; }
.visit-memento:hover { text-decoration: underline; }
.memento [hidden] { display: none !important; } /* "Print without photo" and the ink note only once there is a photo */

/* Themes (js/themes.js): a row of swatches under the colours, and the patterned frame around a memento */
.theme-row { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-btn { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; }
.theme-swatch { width: 52px; height: 52px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1.5px var(--rule); background-repeat: repeat; }
.theme-btn[aria-pressed="true"] .theme-swatch { box-shadow: 0 0 0 2.5px var(--ink); }
.theme-btn:focus-visible .theme-swatch { outline: 3px solid var(--red); outline-offset: 3px; }
.theme-name { font-size: 12px; font-weight: 600; color: var(--grey); }
.theme-btn[aria-pressed="true"] .theme-name { color: var(--ink); font-weight: 800; }
.theme-frame.themed { padding: 14px; border-radius: 20px; background-repeat: repeat; }
.theme-frame.themed .memento-card { border-color: transparent; }
.theme-name { text-align: center; line-height: 1.2; } /* "Northern lights" wraps to two lines */

/* Invitation maker: live preview (above the button on phones, beside the form on computers) */
.invite-preview { display: flex; flex-direction: column; gap: 8px; }
.invite-preview-pic { min-height: 120px; }
.invite-preview-pic canvas.invite-img { max-width: 360px; }
@media (min-width: 960px) {
  .invite-maker.with-preview { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; max-width: 1080px !important; align-items: start; }
  .invite-maker.with-preview > * { grid-column: 1; }
  .invite-maker.with-preview > .invite-preview { grid-column: 2; position: sticky; top: calc(var(--head-h, 64px) + 16px); }
  .invite-preview-pic canvas.invite-img { max-width: 100%; }
}
.theme-row { display: grid; grid-template-columns: repeat(5, minmax(0, 58px)); } /* always two rows of five; shrinks on the narrowest phones */
.theme-btn { width: auto; min-width: 0; }
.theme-swatch { width: 100%; max-width: 52px; height: auto; aspect-ratio: 1; }
.theme-name { max-width: 100%; overflow-wrap: anywhere; }
/* Snack Tracks: "Still hungry" and "Cleaned plates" in the pen font, a little larger */
.eyebrow.hand-head { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: 0; text-transform: none; }
.section-count.hand-count { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 0; }
/* "Add Plated to your home screen" wherever it appears: the pen font, a size up to match the words around it */
.hand-inline { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-size: 1.5em; line-height: 1; letter-spacing: 0; }
.home-tip strong.hand-inline { font-size: 30px; } /* the journal card title, a touch bigger */
/* Snack Tracks: "My Snack Tracks", its own section under the making part */
.my-tracks-title { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-size: 44px; line-height: 1; color: var(--red); margin: 0; }
.tracks-home .my-tracks .no-tracks { padding: 4px 0 0; }
/* My Snack Tracks as a spiral notebook page: rings across the top, a red margin line, faint blue rules every 36px.
   Every row is exactly one rule tall so the writing sits on the lines, however many tracks there are. */
.notepad { position: relative; margin-top: 8px; background: #FFFFFF; border: 1px solid #D9D7CF; border-radius: 8px 8px 12px 12px; box-shadow: 0 2px 0 #E6E3DA; overflow: hidden; }
.notepad-spiral { height: 26px; display: flex; justify-content: space-around; align-items: center; padding: 0 12px; border-bottom: 1px solid #E3E1DA; }
.notepad-spiral span { width: 12px; height: 12px; border-radius: 50%; background: #ECEAE3; box-shadow: inset 0 1px 2px rgba(20, 20, 20, .35); }
.notepad-page { position: relative; padding: 0 16px 36px 54px; background: linear-gradient(to bottom, transparent 47px, #BFD7EA 47px, #BFD7EA 48px, transparent 48px) no-repeat; }
.notepad-page::after { content: ""; position: absolute; top: 48px; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(to bottom, transparent 0 35px, #BFD7EA 35px 36px); pointer-events: none; } /* the rules start under the title */
.notepad-page > * { position: relative; z-index: 1; }
.notepad-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 38px; border-left: 2px solid #E8A598; }
.notepad .my-tracks-title { height: 48px; margin: 0; display: flex; align-items: flex-end; padding-bottom: 4px; box-sizing: border-box; font-size: 40px; }
.notepad .track-groups { display: block; }
.notepad .track-group { margin: 0; gap: 0; }
.notepad .section-head { height: 36px; align-items: flex-end; padding-bottom: 3px; box-sizing: border-box; }
.notepad .track-item, .notepad .track-item:first-child { border: 0; }
.notepad .track-item a { padding: 0; align-items: flex-start; gap: 10px; }
.notepad .track-item a > div { flex: 1; min-width: 0; line-height: 36px; position: relative; top: 9px; } /* wraps onto as many lines as it needs */
.notepad .track-item br { display: none; }
.notepad .track-item strong { font-size: 16px; }
.notepad .track-item span { font-size: 12px; margin-left: 8px; }
.notepad .track-item svg { flex: none; margin-top: 13px; }
.cleaned-group .track-item strong { color: var(--ink); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1.25px; }
.cleaned-group .tag.next { display: none; }
.cleaned-group .track-item a::after { content: "\2713"; color: var(--red); font-weight: 900; font-size: 15px; line-height: 36px; position: relative; top: 9px; }
.notepad .no-tracks, .tracks-home .notepad .no-tracks { display: block; padding: 0; margin: 0; text-align: left; }
.notepad .no-tracks p, .tracks-home .notepad .no-tracks p { margin: 0; max-width: none; line-height: 36px; text-align: left; font-size: 14px; }
/* My Journal on the notebook page: every line of writing is one 36px rule tall */
.notepad .entries { list-style: none; margin: 0; padding: 0; }
.notepad .entry, .notepad .entry:first-child { border: 0; padding: 0; }
.notepad .entry-head { height: 36px; align-items: flex-end; padding-bottom: 4px; box-sizing: border-box; }
.notepad .entry-head a { font-size: 17px; }
.notepad .entry p, .notepad .journal-tracks > p, .notepad p.journal-wants { margin: 0; line-height: 36px; }
.notepad .entry p[style] { line-height: 36px !important; }
.notepad .visit-memento { min-height: 0; margin: 0; vertical-align: baseline; }
.notepad .journal-tracks .section-head, .notepad .journal-wants .section-head { margin: 0; }
.notepad .journal-wants { margin-top: 36px; }
.notepad .journal-empty { text-align: left; padding: 0; line-height: 36px; margin: 0; }
/* Writing sits ON the rules: 36px lines, nudged down so the letters rest on each blue line */
.notepad .entry-head { height: auto; padding: 0; align-items: baseline; }
.notepad .entry-head a, .notepad .entry-date, .notepad .entry p, .notepad .journal-tracks > p, .notepad p.journal-wants, .notepad .journal-empty, .notepad .no-tracks p { line-height: 36px; position: relative; top: 9px; }
.notepad .visit-memento { display: inline; }
.notepad .visit-memento svg { vertical-align: -2px; margin-right: 4px; }
.notepad .entry-head { align-items: flex-start; } /* baseline alignment made the row 37px; keep it exactly one line */
.notepad .entry-date { top: 11px; }
.notepad .journal-tracks { display: block; margin: 0; padding: 0; gap: 0; }
/* Notebook tweaks: a real notepad width on computers; Turn the page sits on a line in the pen font */
@media (min-width: 960px) { .notepad { max-width: 560px; } }
.notepad .entry-head a { flex: 1; min-width: 0; }
.notepad .entry-date { flex: 0 1 auto; max-width: 48%; text-align: right; }
.notepad .turn-page { display: block; height: 36px; line-height: 36px; position: relative; top: 7px; padding: 0; font-family: "Just Another Hand", "Archivo", cursive; font-size: 26px; font-weight: 400; color: var(--red); text-decoration: none; }
/* Pads: "My Snack Tracks" above its own pads (Still hungry, Cleaned plates); journal lists get pads too */
.pads { display: flex; flex-direction: column; gap: 18px; }
.pads .notepad { margin-top: 0; }
.pads-title { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-size: 46px; line-height: 1; color: var(--red); margin: 6px 0 0; }
.sub-pad .my-tracks-title { color: var(--red); font-size: 36px; justify-content: space-between; align-items: flex-end; }
.sub-pad .pad-count { font-size: 30px; padding-right: 2px; }
.notepad p.journal-wants { margin: 0; }
/* A pen line between entries, drawn right on the blue rule under each one, so every entry can take as many lines as it needs */
.notepad .entry, .notepad .track-item { position: relative; }
.notepad .entry:not(:last-child)::after, .notepad .track-item:not(:last-child)::after { content: ""; position: absolute; left: -10px; right: 0; bottom: -4px; height: 6px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='6'%3E%3Cpath d='M1 3.4C18 1.6 33 4.6 52 3s38-1.8 56 .2 22 .4 31-.4' fill='none' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") repeat-x left center / 140px 6px; }
.notepad .entry-date { white-space: normal; } /* the date and neighbourhood wrap too, never cut off */
.notepad .track-item a > div span { line-height: 1; } /* the small details don't stretch the line past one rule */
.cleaned-group .entry-head a { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1.25px; } /* My Journal: Cleaned plates crossed off too */
.notepad-page { min-height: 336px; } /* every pad (Snack Tracks and My Journal) shows a proper page: the title plus 8 ruled lines, even when nearly empty */
/* The List: soft grey (the tip-box tint) only behind the place cards; the title, search and filters stay white */
body.on-list .rows { background: var(--tint); margin-left: -16px; margin-right: -16px; padding: 16px 16px 28px; min-height: 60vh; }
@media (min-width: 960px) { body.on-list .rows { margin-left: 0; margin-right: 0; padding: 20px; border-radius: 18px; } }
/* The List, small red touches: the details line under each name, and the name itself once a place is on your Want to try list */
.rows .row-meta { color: var(--red); }
.rows .row.is-want .row-name { color: var(--red); }
.rows .row.is-not .row-meta { color: var(--muted); } /* "Not for me" places stay quiet */
/* The List search bar: plain white everywhere (the red band was tried and dropped, Oct 24) */
/* Computers: search and Near me on one row inside a rounded band (the filters live in the sidebar) */
@media (min-width: 960px) {
  .list-sticky { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 12px 0 10px; }
  .list-sticky .search-row { flex: 1 1 320px; margin: 0; }
  .list-sticky .list-controls { flex: none; margin: 0; }
  .list-sticky .search-hint, .list-sticky .active-filters, .list-sticky .count-line { flex: 1 1 100%; }
}
/* Desktop polish (Mark's review): place-page buttons in a tidy grid, journal pad full width,
   a clearer filter sidebar, and a top bar that reads as one piece */
@media (min-width: 960px) {
  .profile-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
  .profile-buttons .btn { justify-content: center; }
  .journal-page .notepad { max-width: none; }
  .sidebar { gap: 22px; }
  .sidebar-title { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-size: 34px; line-height: 1; color: var(--ink); margin: 0; }
  .sidebar select.input { border-radius: 22px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); background-color: var(--paper); }
  .top-nav { font-size: 15px; gap: 28px; }
  .head-row .head-counts { margin-left: 8px; font-size: 13px; }
  .head-row .menu-btn { margin-left: auto; }
}
/* The List on big screens: a wider page (3 columns of places from 1280px) and the grey runs right to the window edge */
@media (min-width: 960px) {
  body.on-list #view > .wrap { max-width: 1400px; }
  body.on-list .rows { border-radius: 0; position: relative; isolation: isolate; background: none; }
  body.on-list .rows::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -100vw; background: var(--tint); z-index: -1; } /* out to the window edge: past the page margin and side padding */
  body.on-list .list-layout.has-sidebar .rows::before { left: -40px; } /* and back to the filters, filling the gap between them */
  body.on-list .list-sticky { border-bottom: 0; }
  body.on-list .list-sticky::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; right: -100vw; background: var(--red); } /* the red line runs the same full span */
  body.on-list .list-layout.has-sidebar .list-sticky::after { left: -40px; }
}
@media (min-width: 1280px) { body.on-list .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  body.on-list .list-sticky::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -100vw; background: var(--paper); z-index: -1; } /* the white behind the pinned search spans the same width, so cards slide under cleanly */
  body.on-list .list-layout.has-sidebar .list-sticky::before { left: -40px; }
}
@media (min-width: 960px) { body.on-list #view { overflow-x: clip; } } /* the full-span grey, white and red line stop exactly at the window edge */
@media (min-width: 960px) { .site-head .wrap, .site-menu .wrap { max-width: 1400px; } } /* desktop: the header spans as wide as The List, so the menu button sits further right */
/* The List on computers: a shorter search bar with Near me right beside it, and your counts beside those once pinned */
.stuck-mark { height: 1px; margin-bottom: -1px; }
.sticky-counts, .sticky-nav { display: none; }
@media (min-width: 960px) {
  .list-sticky { justify-content: flex-start; }
  .list-sticky .search-row { flex: 1 1 auto; } /* Near me lives in the sidebar now, so the search takes the row (the counts join it on the right once scrolled) */
  .list-sticky.pinned .sticky-counts { display: block; margin: 0 0 0 8px; white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--rule); }
  .list-sticky.pinned .sticky-nav { display: flex; gap: 18px; margin-left: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
  .sticky-nav a { text-decoration: none; color: var(--grey); padding-bottom: 2px; border-bottom: 2px solid transparent; }
  .sticky-nav a:hover { color: var(--ink); }
  .sticky-nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
}
/* Filter sidebar on computers: our own down arrow, a little in from the rounded edge; and a red line down its right side
   that meets the red line under the search bar */
@media (min-width: 960px) {
  .sidebar select.input { -webkit-appearance: none; appearance: none; padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 14px; }
  body.on-list .list-layout.has-sidebar .sidebar { padding-right: 22px; }
  body.on-list .list-layout.has-sidebar { position: relative; }
  body.on-list .list-layout.has-sidebar::before { content: ""; position: absolute; left: 288.5px; width: 1.5px; top: -28px; bottom: 0; background: var(--red); pointer-events: none; z-index: 7; } /* the red line beside the filters runs the full height, from the header down, and meets the red line under the search bar */
}
.ready-made .track-item strong { font-family: "Just Another Hand", "Archivo", cursive; font-weight: 400; font-size: 28px; line-height: 1.05; } /* Ready-made by Plated: track names in the pen font */
@media (min-width: 960px) {
  .sidebar .near-block { display: flex; flex-direction: column; gap: 6px; }
  .sidebar .near-btn { width: 100%; justify-content: center; min-height: 44px; }
  .sidebar .near-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink); }
}
/* Sideways phones (short screens): search, Near me and Filters share one row, so the pinned bar takes less of the screen */
@media (max-width: 959px) and (max-height: 520px) {
  .list-sticky { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; padding-bottom: 8px; }
  .list-sticky .search-row { flex: 1 1 280px; margin: 6px 0 0; }
  .list-sticky .list-controls { flex: 0 0 auto; margin: 6px 0 0; flex-wrap: nowrap; }
  .list-sticky .list-controls .near-btn, .list-sticky .list-controls .filter-btn { flex: 0 0 auto; padding: 0 14px; }
  .list-sticky .search-hint, .list-sticky .active-filters { flex: 1 1 100%; }
}
/* Filters column on computers: heading + Near me pinned at the top, Start a Snack Track pinned at the bottom */
@media (min-width: 960px) {
  .sidebar { padding-top: 0; padding-bottom: 0; } /* no gap above the pinned heading for the filters to show through */
  .sidebar-top { margin-top: 0; box-shadow: 0 -4px 0 var(--paper); } /* also covers the hair above it */
  .sidebar-top { position: sticky; top: 0; z-index: 2; background: var(--paper); display: flex; flex-direction: column; gap: 14px; padding: 2px 0 12px; border-bottom: 1px solid var(--rule); }
  .sidebar-bottom { position: sticky; bottom: 0; z-index: 2; background: var(--paper); padding: 12px 0 14px; margin-top: auto; border-top: 1px solid var(--rule); }
  .sidebar-track { width: 100%; justify-content: center; min-height: 44px; gap: 8px; }
  .sidebar-track svg { width: 19px; height: 19px; color: var(--paper); }
}
/* Snack Tracks map picture, once per visit: pin 1 drops in and lands (its shadow appears), the dotted route draws
   itself to pin 2, which drops in as the line arrives, then on to pin 3. Each time fades in after its pin. About 2.6s. */
.th-art-svg .th-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: th-pin-drop .5s cubic-bezier(.25, .8, .35, 1) both; }
.th-art-svg .th-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: th-shadow-land .5s ease-out both; }
.th-art-svg .th-tag { animation: th-fade .4s ease both; }
.th-art-svg .th-route-reveal { stroke-dasharray: 100 100; animation: th-route-draw 1.9s linear both; animation-delay: .55s; }
.th-art-svg .th-pin-1, .th-art-svg .th-shadow-1 { animation-delay: .1s; }   .th-art-svg .th-tag-1 { animation-delay: .5s; }
.th-art-svg .th-pin-2, .th-art-svg .th-shadow-2 { animation-delay: .95s; }  .th-art-svg .th-tag-2 { animation-delay: 1.35s; }
.th-art-svg .th-pin-3, .th-art-svg .th-shadow-3 { animation-delay: 2.0s; }  .th-art-svg .th-tag-3 { animation-delay: 2.4s; }
@keyframes th-pin-drop { 0% { opacity: 0; transform: translateY(-34px); } 55% { opacity: 1; transform: translateY(0) scale(1.04, .92); } 78% { transform: translateY(-5px); } 100% { opacity: 1; transform: none; } }
@keyframes th-shadow-land { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes th-route-draw { 0% { stroke-dashoffset: 100; } 32% { stroke-dashoffset: 49; } 52% { stroke-dashoffset: 49; } 85%, 100% { stroke-dashoffset: 0; } } /* pauses at pin 2 */
@keyframes th-fade { from { opacity: 0; } to { opacity: 1; } }
/* ...then each plate's tick draws in (11 am, 3 pm, 7:30 pm) and a Cleaned plate memento lands in the corner. About 4.2s in all. */
.th-art-svg .th-tick { stroke-dasharray: 1 1; animation: th-tick-draw .28s ease-out both; }
.th-art-svg .th-tick-1 { animation-delay: 2.55s; } .th-art-svg .th-tick-2 { animation-delay: 2.85s; } .th-art-svg .th-tick-3 { animation-delay: 3.15s; }
.th-art-svg .th-memento { transform-box: fill-box; transform-origin: 70% 80%; animation: th-memento-land .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: 3.5s; }
@keyframes th-tick-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes th-memento-land { from { opacity: 0; transform: translate(40px, 50px) rotate(8deg) scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .th-art-svg .th-pin, .th-art-svg .th-shadow, .th-art-svg .th-tag, .th-art-svg .th-route-reveal, .th-art-svg .th-tick, .th-art-svg .th-memento { animation: none; } .th-art-svg .th-route-reveal, .th-art-svg .th-tick { stroke-dashoffset: 0; } }
/* My Journal: the Places been / Snack Tracks switch stays pinned under the header while you scroll your pad;
   on computers the right column (home-screen tip, Save my journal) stays in view too */
.journal-switch { position: sticky; top: calc(var(--head-h, 64px) + 8px); z-index: 4; background: var(--paper); box-shadow: 0 -10px 0 var(--paper); }
@media (min-width: 960px) { .journal-page .journal-save { position: sticky; top: calc(var(--head-h, 64px) + 16px); align-self: start; } }
.th-art-svg .th-mem-title { font-family: "Just Another Hand", cursive; } /* the memento title in the pen font */
/* The List on computers: once pinned, the menu button joins the search bar (right of the counts); its menu drops from there */
.sticky-menu { display: none; }
@media (min-width: 960px) {
  .list-sticky.pinned .sticky-menu { display: inline-flex; margin-left: 4px; }
  body.menu-from-sticky .site-menu { position: fixed; top: var(--menu-top, 80px); right: var(--menu-right, 24px); z-index: 30; }
}
/* "Show me how" lands on the home-screen box in My Journal: a short red glow */
.home-tip { scroll-margin-top: calc(var(--head-h, 0px) + 16px); }
.home-tip.tip-flash { animation: tip-flash 1.8s ease-out; }
@keyframes tip-flash { 0%, 30% { box-shadow: 0 0 0 4px rgba(200, 58, 30, 0.28); background: #FCEFEC; } 100% { box-shadow: 0 0 0 0 rgba(200, 58, 30, 0); } }
@media (prefers-reduced-motion: reduce) { .home-tip.tip-flash { animation: none; } }
/* Outing reminder (a stop within 24 hours), top of The List and Snack Tracks */
.reminder { border: 1.5px solid var(--red); border-radius: 10px; background: #FCEFEC; padding: 12px 14px; margin: 0 0 16px; }
.reminder p { margin: 0; }
.reminder-when { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--red); }
.reminder-name { font-family: "Just Another Hand", cursive; font-size: 30px; line-height: 1; color: var(--red); margin: 6px 0 2px !important; overflow-wrap: anywhere; }
.reminder-line { font-weight: 800; font-size: 15px; }
.reminder-sub { font-size: 13px; color: var(--grey); margin-top: 2px !important; }
.reminder .btn-row { margin-top: 10px; }
.th-main .reminder { order: 0; margin: 0; }
/* A friend's shared track: Are you coming? */
.rsvp-box { border: 1.5px solid var(--ink); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.rsvp-box p { margin: 0; }
.rsvp-box.joined { border-color: var(--red); }
.rsvp-q { font-weight: 800; font-size: 16px; }
.rsvp-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--red); }
.rsvp-head { display: flex; justify-content: space-between; align-items: center; }
.rsvp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 360px; }
.rsvp-btns .btn { justify-content: center; }
.rsvp-cant { border-top: 1px solid var(--line, #ddd); padding-top: 8px; }
.rsvp-cant[hidden] { display: none; }
.name-box .input { width: 100%; margin: 4px 0; }
/* Day-of outing pop-up: slides up from the bottom over a light dim, once per outing */
.day-pop-back { position: fixed; inset: 0; z-index: 95; background: rgba(20, 20, 20, 0.18); display: flex; align-items: flex-end; justify-content: center;
  padding: 12px 12px calc(var(--tabbar) + 12px + env(safe-area-inset-bottom)); animation: th-fade .25s ease both; }
.day-pop-back.leaving { animation: day-pop-fade-out .24s ease-in both; }
.day-pop { width: 100%; max-width: 460px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--shadow);
  padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 4px; outline: none; transition: transform .2s ease;
  animation: home-prompt-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.day-pop-back.leaving .day-pop { animation: home-prompt-out .24s ease-in both; }
.day-pop p { margin: 0; }
.day-pop-grab { width: 40px; height: 4px; border-radius: 2px; background: #D0D0CC; margin: 0 auto 6px; }
.day-pop-head { display: flex; align-items: center; gap: 8px; }
.day-pop-name { font-family: "Just Another Hand", cursive; font-size: 36px; line-height: 1; color: var(--red); margin-top: 4px !important; overflow-wrap: anywhere; }
.day-pop-route { margin: 2px 0 4px; }
.day-pop-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.day-pop-btns .btn { flex: 1 1 auto; justify-content: center; }
@keyframes day-pop-fade-out { to { opacity: 0; } }
@media (min-width: 960px) { .day-pop-back { padding-bottom: 32px; } }
@media (prefers-reduced-motion: reduce) { .day-pop-back, .day-pop-back.leaving, .day-pop, .day-pop-back.leaving .day-pop { animation: none; } .day-pop { transition: none; } }
/* Profile: "Give a local meal" gift card section (only for places that sell gift cards) */
.gift-section { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: 14px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.gift-section p { margin: 0; }
.gift-head { display: flex; align-items: center; gap: 8px; margin: 0; font-family: "Just Another Hand", cursive; font-weight: 400; font-size: 32px; line-height: 1; color: var(--red); }
.gift-section > p:not(.small-print) { font-size: 15px; line-height: 1.5; }
.gift-season { font-weight: 700; }
.gift-buy { justify-content: center; gap: 8px; }
@media (min-width: 600px) { .gift-buy { align-self: flex-start; } }
.locations + .gift-section { border-top: 0; padding-top: 4px; } /* the locations list already ends with a line */
/* Your call on phones: its own card, right after the description (same look as the computer card) */
.eyebrow.hand-head.call-head { margin: 0; color: var(--red); font-size: 32px; }
.call-card { padding: 16px; box-shadow: 4px 4px 0 var(--shadow); gap: 12px; }
.call-card .diary-line { margin: 0; border-top: 0; padding-top: 0; font-size: 13px; color: var(--ink); }
.notes-open { align-self: flex-start; color: var(--red); font-weight: 800; font-size: 14px; text-align: left; }
/* Plated Wrapped: the year picture (#/journal/wrapped) and My Journal's December banner */
.wrapped-img { display: block; width: 100%; max-width: 520px; margin: 0 auto 4px; aspect-ratio: 4 / 5; border-radius: 12px; box-shadow: 5px 5px 0 var(--shadow); background: var(--tint); }
.wrapped-banner { border: 1.5px solid var(--red); border-radius: 10px; background: #FCEFEC; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.wrapped-banner p { margin: 0; }
.wrapped-banner-title { font-family: "Just Another Hand", cursive; font-size: 30px; line-height: 1; color: var(--red); }
.wrapped-soon { gap: 10px; }
.wrapped-soon p { margin: 0; }
.wrapped-soon-title { font-family: "Just Another Hand", cursive; font-size: 32px; line-height: 1; color: var(--red); }
/* Date-night match (#/match, #/m/<code>) */
.th-match { order: 4; margin: 0; font-size: 14px; line-height: 1.45; }
.th-main .th-match { order: 4; }
.th-match a { color: var(--red); font-weight: 800; }
.match-card { gap: 12px; }
.match-card p, .match-actions p { margin: 0; }
.match-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.match-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; color: var(--ink); text-decoration: none; font: inherit; }
.match-tick { flex: none; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.match-tick span { visibility: hidden; }
.match-row[aria-pressed="true"] .match-tick, .match-row.is-match .match-tick { background: var(--red); border-color: var(--red); }
.match-row[aria-pressed="true"] .match-tick span, .match-row.is-match .match-tick span { visibility: visible; }
.match-name { display: flex; flex-direction: column; min-width: 0; }
.match-name b { font-size: 15px; }
.match-name small { font-size: 13px; color: var(--grey); }
.match-found { display: flex; flex-wrap: wrap; gap: 8px; }
.match-found:empty { display: none; }
.match-count { margin: 0; }
.match-actions { display: flex; flex-direction: column; gap: 10px; }
.match-each { margin: 0; padding-left: 18px; line-height: 1.6; }
.match-surprise p { font-weight: 800; font-size: 16px; }
.match-surprise a { color: var(--red); }
.match-note { margin: 0; }
.match-none-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.match-none { font-size: 14px; color: var(--grey); text-decoration: underline; }
.match-none-more { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.match-none-more[hidden] { display: none; }
.match-none-more p { margin: 0; font-size: 14px; }
.match-none-go { color: var(--red); font-weight: 800; }
/* Snack Tracks home, tidied: "Plan something" cards (stacked on phones, a row of three on computers) */
.th-plan { order: 2; display: flex; flex-direction: column; gap: 8px; }
.th-plan .eyebrow { margin: 0; }
.th-chefs { order: 4; }
.plan-cards { display: flex; flex-direction: column; gap: 10px; }
.plan-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--shadow); min-height: 64px; }
.plan-card:hover { background: var(--tint); }
.plan-card.red { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.plan-card.red:hover { filter: brightness(1.05); }
.plan-icon { flex: none; display: inline-flex; color: var(--red); }
.plan-card.red .plan-icon { color: #FFFFFF; }
.plan-icon .btn-icon svg { width: 22px; height: 22px; }
.plan-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-text b { font-size: 16px; }
.plan-text span { font-size: 13px; color: var(--grey); line-height: 1.35; }
.plan-card.red .plan-text span { color: rgba(255, 255, 255, 0.9); }
@media (min-width: 960px) {
  .th-main .th-plan { order: 2; } .th-main .th-ready { order: 3; } .th-main .th-chefs { order: 4; } .th-main .th-mine { order: 5; }
  .plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .plan-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
}
/* Chef's picks (behind the chef_picks switch) */
.chefs-note { margin: 0 0 8px; padding: 0 2px; }
.stop-why { margin: 4px 0 0; font-style: italic; color: var(--ink); font-size: 14px; line-height: 1.4; }
.chef-eyebrow a { color: var(--red); }
.chef-credit { margin: 0; font-size: 14px; line-height: 1.5; }
.chef-credit > span:first-child { vertical-align: -2px; margin-right: 4px; }
.chef-credit[hidden] { display: none; }
.chef-credit a { color: var(--red); font-weight: 800; }
/* This week's special with a photo (behind the special_photos switch): every photo cropped to 4:3 */
.special { margin: 0; border: 1.5px solid var(--red); border-radius: 12px; overflow: hidden; background: var(--paper); }
.special-photo { display: block; aspect-ratio: 4 / 3; background: var(--tint); }
.special-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.special figcaption { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.special-label { font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.special figcaption b { font-size: 16px; line-height: 1.35; }
.special-meta { font-size: 13px; color: var(--grey); }
/* Owner page: the special's photo preview, Chef's picks */
.special-preview { display: flex; flex-direction: column; gap: 8px; }
.special-preview-fig { margin: 0; width: 100%; max-width: 360px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--rule); }
.special-preview-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chef-mine { display: flex; flex-direction: column; gap: 10px; }
.chef-mine:empty { display: none; }
.chef-mine-item { border: 1.5px solid var(--rule); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.chef-mine-item.status-live { border-color: var(--red); }
.chef-mine-head, .chef-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chef-status, .chef-tag { font-size: 12px; font-weight: 800; border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 8px; }
.status-live .chef-status, .chef-tag.status-live { border-color: var(--red); color: var(--red); }
.chef-share { display: flex; flex-direction: column; gap: 8px; }
.chef-share-more[hidden] { display: none; }
.chef-link { font-size: 14px; }
.chef-found { display: flex; flex-wrap: wrap; gap: 6px; }
.chef-found:empty { display: none; }
.chef-stops { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.chef-stop { display: flex; flex-direction: column; gap: 6px; }
.chef-stop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Dashboard: Chef's picks card */
.chef-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.chef-row { border-top: 1px solid var(--rule); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.chef-opens { margin-left: auto; font-weight: 800; color: var(--red); font-size: 14px; }
.chef-row-stops { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.chef-row-stops span { color: var(--grey); }
.chef-make .admin-fold-body { display: flex; flex-direction: column; gap: 8px; }
.special-thumb { object-fit: cover; }
/* Date-night match: Browse The List (a bottom sheet on phones, beside the picks on computers) */
.match-browse, .match-start { justify-content: center; }
.match-start[hidden] { display: none; }
.match-empty { margin: 8px 0; }
.match-layout { max-width: 640px; }
.browse-back { position: fixed; inset: 0; z-index: 95; background: rgba(20, 20, 20, 0.3); display: flex; align-items: flex-end; }
.browse-back .browse-sheet { width: 100%; max-height: 88dvh; border-radius: 18px 18px 0 0; border-top: 2px solid var(--ink); padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); animation: home-prompt-in .35s cubic-bezier(.2, .9, .3, 1.1) both; }
.browse-sheet { background: var(--paper); display: flex; flex-direction: column; gap: 10px; outline: none; min-height: 0; }
.browse-grab { width: 40px; height: 4px; border-radius: 2px; background: #D0D0CC; margin: 0 auto 2px; }
.browse-head { display: flex; align-items: center; gap: 10px; }
.browse-title { margin: 0; font-size: 18px; font-weight: 900; }
.browse-count { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--red); }
.browse-close { font-size: 24px; line-height: 1; }
.browse-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.browse-chips::-webkit-scrollbar { display: none; }
.browse-chips .chip { flex: none; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 800; background: var(--paper); color: var(--ink); cursor: pointer; white-space: nowrap; min-height: 36px; }
.browse-chips .chip[aria-pressed="true"], .browse-chips .chip-select.on { background: var(--ink); color: var(--paper); }
.chip-select { appearance: none; -webkit-appearance: none; padding-right: 26px !important; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.browse-list { overflow-y: auto; min-height: 0; flex: 1; border-top: 1px solid var(--rule); }
.browse-list .match-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-note { margin: 0; }
@media (prefers-reduced-motion: reduce) { .browse-back .browse-sheet { animation: none; } }
@media (min-width: 960px) {
  .match-layout.browsing { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .browse-side { position: sticky; top: calc(var(--head-h, 70px) + 16px); }
  .browse-side .browse-sheet { border: 1.5px solid var(--ink); border-radius: 12px; padding: 16px; box-shadow: 5px 5px 0 var(--shadow); max-height: calc(100dvh - var(--head-h, 70px) - 40px); }
}
.browse-sheet > * { flex: none; }
.browse-sheet > .browse-list { flex: 1 1 auto; }
.browse-chips .chip-select { text-overflow: ellipsis; overflow: hidden; }
.browse-count { white-space: nowrap; }
/* "See it in My Journal": the cleaned track it lands on (focus moves here; no outline box, the flash shows it) */
.journal-tracks .entry:focus { outline: none; }
.journal-tracks .entry:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* "See it in My Journal": a red pen arrow in the notepad margin, pointing at the cleaned track's name */
.journal-tracks .entry { position: relative; }
.pen-arrow { position: absolute; left: -52px; top: 14px; width: 46px; height: 24px; pointer-events: none; transition: opacity .6s ease; }
.pen-arrow svg { display: block; overflow: visible; }
.pen-arrow path { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; } /* the hidden part sits fully before the start, so no round pen-tip dot shows before it draws */
.pen-arrow .pen-arrow-shaft { animation: pen-draw .55s ease-out .6s forwards; }
.pen-arrow .pen-arrow-head { animation: pen-draw .3s ease-out 1.1s forwards; }
.pen-arrow.still path { animation: none; stroke-dashoffset: 0; }
.pen-arrow.gone { opacity: 0; }
@keyframes pen-draw { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
/* Date-night Match: Make a night of it (an optional activity), and the activity in a date plan's track */
.night-card { gap: 10px; }
.night-title { margin: 0; font-family: "Just Another Hand", cursive; font-weight: 400; font-size: 32px; line-height: 1; color: var(--red); }
.night-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.night-chips .chip { border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 800; background: var(--paper); color: var(--ink); cursor: pointer; min-height: 36px; }
.night-chips .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.night-surprise { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 800; }
.night-picked { margin: 0; font-weight: 800; }
.night-picked:empty { display: none; }
.activity-stop .stop-day { color: var(--red); }
.activity-stop .stop-name { font-size: 17px; }
.pv-activity { margin: 6px 0 2px; font-size: 12px; font-weight: 800; color: var(--red); }
.match-instead[hidden] { display: none; }
.match-main { display: flex; flex-direction: column; gap: 16px; }
/* Food-type icons beside place names on The List (js/food-icons.js): Plated's black line, red accents */
.row-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.food-icon { flex: none; margin-top: -2px; }
.row.is-not .food-icon { opacity: .45; }
/* Food icons in empty states and on mementos */
.empty-art { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin-bottom: 10px; }
.empty-art svg:first-child { transform: rotate(-12deg); }
.empty-art svg:last-child { transform: rotate(10deg); }
.empty-route { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 4px !important; color: var(--red); font-weight: 900; }
.empty-plate { display: block; margin: 0 auto 6px; width: 78px; }
.memento-icon { flex: none; display: inline-flex; margin-right: 2px; }
.memento-stops li:has(.memento-icon) { align-items: center; gap: 8px; }
.memento-stops li:has(.memento-icon) .memento-n { background: none; color: var(--grey); width: auto; height: auto; font-size: 13px; font-weight: 800; }

/* Date Knight (js/knight.js): the game frame, its screens and the How to play sign */
.knight-page { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 24px; }
.knight-page > .back-link { align-self: flex-start; }
.knight-preview { align-self: stretch; margin: 0; }
.knight-frame { position: relative; width: min(600px, 100%, calc((100svh - var(--head-h) - var(--tabbar) - 70px) * 0.75)); min-width: 280px; aspect-ratio: 3 / 4; border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none; }
.knight-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.knight-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 20px; background: rgba(255, 255, 255, .9); overflow-y: auto; }
.knight-screen[hidden], .knight-how-wrap[hidden] { display: none; }
.knight-title { font-family: "Just Another Hand", cursive; font-weight: 400; color: var(--red); font-size: 52px; line-height: 1; margin: 0; }
.knight-page > .knight-title { align-self: flex-start; }
.knight-msg { margin: 8px 0 12px; font-size: 14px; line-height: 1.45; max-width: 300px; }
.knight-won { font-size: 18px; }
.knight-lose { font-family: "Just Another Hand", cursive; font-size: 30px; line-height: 1.05; }
.knight-stats { display: inline-block; margin-top: 10px; }
.knight-small { display: block; font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.knight-share[hidden], .knight-how-link[hidden], .knight-console[hidden] { display: none; }
.knight-console { margin-top: 2px; color: var(--red); }
.knight-prize.consolation { border-top-style: dashed; }
.knight-prize.consolation .knight-prize-line { font-size: 22px; color: var(--ink); }
.knight-prize.consolation .knight-view { background: var(--paper); color: var(--ink); }
.knight-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.knight-share { gap: 6px; }
.knight-prize { margin-top: 12px; width: 100%; max-width: 290px; border-top: 1.5px solid var(--ink); padding-top: 12px; }
.knight-prize[hidden] { display: none; }
.knight-prize-line { font-family: "Just Another Hand", cursive; color: var(--red); font-size: 26px; line-height: 1.05; margin: 0; }
.knight-prize-where { font-size: 12px; color: var(--grey); margin: 4px 0 8px; }
.knight-view { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
.knight-how-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(255, 255, 255, .75); }
.knight-how { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 6px; padding: 14px 16px 16px; width: 100%; max-width: 310px; transform: rotate(-1.2deg); box-shadow: 5px 5px 0 var(--ink); text-align: left; max-height: 100%; overflow-y: auto; }
.knight-how-title { font-family: "Just Another Hand", cursive; font-weight: 400; color: var(--red); font-size: 40px; line-height: 1; text-align: center; margin: 0 0 8px; }
.knight-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.35; }
.knight-rules li { display: flex; align-items: center; gap: 10px; }
.knight-rule-icon { flex: none; width: 34px; display: inline-flex; }
.knight-play-btn { margin-top: 14px; }
/* Menu item and its Thursday to Saturday evening spotlight */
.knight-menu-icon { display: inline-flex; margin-right: 8px; }
.knight-spot { display: none; font-family: "Just Another Hand", cursive; font-weight: 400; color: var(--red); font-size: 24px; margin-left: 8px; line-height: 1; }
#knight-item.spot .knight-spot { display: inline; }
.menu-btn { position: relative; }
.menu-btn.has-dot::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--paper); }
/* The doorways: under Date-night Match results, and after a finished date plan */
.knight-door { margin: 0; text-align: center; font-size: 14px; }
.knight-door a { color: var(--red); font-weight: 700; }
.knight-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px dashed var(--red); border-radius: 12px; padding: 10px 14px; }
.knight-card p { margin: 0; font-size: 14px; }

/* Phones turned sideways: cover everything with a note to turn back to portrait (tablets and computers never see it) */
.rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (hover: none) and (pointer: coarse) {
  .rotate-note { display: flex; position: fixed; inset: 0; z-index: 2147483000; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 24px; background: var(--paper); text-align: center; }
  .rotate-art { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
  .rotate-phone { width: 62px; height: 97px; animation: rotate-upright 3s ease-in-out infinite; }
  .rotate-arrow { position: absolute; top: 4px; right: 6px; width: 44px; height: 44px; }
  .rotate-hand { margin: 0; font-family: "Just Another Hand", cursive; color: var(--red); font-size: 32px; line-height: 1; }
  .rotate-text { margin: 0; max-width: 360px; font-size: 15px; font-weight: 700; line-height: 1.4; }
  body { overflow: hidden; }
}
@keyframes rotate-upright { 0%, 15% { transform: rotate(-90deg); } 45%, 85% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } }
/* the plate on the screen stays upright while the phone turns */
.rotate-logo { transform-box: fill-box; transform-origin: center; animation: rotate-logo 3s ease-in-out infinite; }
@keyframes rotate-logo { 0%, 15% { transform: rotate(90deg); } 45%, 85% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone, .rotate-logo { animation: none; } }
/* Date Knight on big screens: the start screen and How to play sign grow with the bigger frame */
@media (min-width: 900px) and (min-height: 760px) {
  .knight-title { font-size: 68px; }
  .knight-msg { font-size: 16px; max-width: 380px; }
  .knight-lose { font-size: 36px; }
  .knight-how { max-width: 380px; padding: 18px 20px 20px; }
  .knight-how-title { font-size: 46px; }
  .knight-rules { font-size: 14.5px; }
  .knight-prize-line { font-size: 30px; }
}
/* Pinned bar on narrower computers: search, the three links and the menu stay on one line; the counts step aside */
@media (min-width: 960px) and (max-width: 1199px) {
  .list-sticky.pinned { flex-wrap: nowrap; }
  .list-sticky.pinned .search-row { min-width: 0; }
  .list-sticky.pinned .sticky-counts { display: none; }
  .list-sticky.pinned .sticky-nav { gap: 14px; }
}
/* Snack Tracks with no tracks yet: the food route and a small nudge under My Snack Tracks, instead of an empty notepad */
.th-mine-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(0px, calc(100dvh - 774px), 38px) 0 0; } /* phones: midway between Ready-made and the tab bar (the top padding makes up for the page padding below; less on short phones) */
.no-tracks-yet { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.no-tracks-yet .empty-route { justify-content: center; margin: 0 !important; }
.no-tracks-yet .small-print { margin: 0; font-size: 14px; color: var(--grey); }
@media (min-width: 960px) { .th-mine-empty { flex: none; padding: 20px 0 0; } }

/* "Plated was updated. Refresh": a slim bar above the tab bar (a small card bottom-right on computers) */
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom)); z-index: 85; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 8px 8px 8px 14px; font-size: 14px; font-weight: 700; box-shadow: 3px 3px 0 rgba(20, 20, 20, .25); animation: update-in .25s ease-out; }
.update-bar span { flex: 1; }
.update-bar .update-x { width: 36px; height: 36px; color: var(--paper); font-size: 24px; }
@media (min-width: 960px) { .update-bar { left: auto; right: 24px; bottom: 24px; width: 340px; } }
@keyframes update-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .update-bar { animation: none; } }