/* Sunday Box brand. All look-and-feel lives in these tokens; a theme is a set of
   overrides on [data-theme=...]. The brand book has the reasoning for each colour. */
@font-face { font-family: "Figtree"; src: url("/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/fonts/dm-serif-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/fonts/dm-serif-display-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
/* Cursive only ever shows a real person's name; pencil only ever shows a note someone wrote. */
@font-face { font-family: "Homemade Apple"; src: url("/fonts/homemade-apple.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Reenie Beanie"; src: url("/fonts/reenie-beanie.woff2") format("woff2"); font-display: swap; }

/* Sunday (light): linen, good china, gravy, tomato enamel, cornflower, butter. */
:root {
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-kitchen: "Homemade Apple", "Brush Script MT", cursive;
  --font-note: "Reenie Beanie", "Comic Sans MS", cursive;
  --bg: #f6efe6;
  --surface: #fffdf8;
  --memory: #fffaf0;
  --text: #3a2420;
  --muted: #876a5e;
  --border: #eadccd;
  --accent: #c8423a;
  --accent-text: #fffdf8;
  --accent-2: #4a6fa5;
  --highlight: #e9b949;
  --pencil: #5b5b58;
  --danger: #a8322b;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(70 30 20 / 0.05), 0 6px 18px rgb(70 30 20 / 0.06);
  --card-max: 860px;
  --index-paper: #fffdf8;
  --index-red: #e2a79f;
  --index-blue: #dfe5ef;
  --star-on: #e0a526;
  --star-on-edge: #b8860f;
  --star-off: #b59c8f;
  color-scheme: light;
}
/* Dark: after dinner, by candlelight. "Match phone" picks light or dark in app.js. */
[data-theme="dark"] {
  --bg: #1e1716;
  --surface: #2a2120;
  --memory: #30262a;
  --text: #f1e4da;
  --muted: #bba196;
  --border: #3d302d;
  --accent: #ec7a6f;
  --accent-text: #1e1716;
  --accent-2: #8fb0e0;
  --highlight: #f0c869;
  --pencil: #cfc8bb;
  --danger: #f08a80;
  --shadow: none;
  --index-paper: #2a2120;
  --index-red: #7a4646;
  --index-blue: #34384a;
  --star-on: #f2c14e;
  --star-on-edge: #f2c14e;
  --star-off: #8c766c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.55 var(--font-body);
  background: var(--bg);
  color: var(--text);
  /* viewport-fit=cover (index.html) lets the page run edge to edge; keep text off a sideways notch. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; }
img { max-width: 100%; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: var(--banner-h, 0px); z-index: 5;
  /* On an iPhone home-screen app the header runs up under the clock; keep its buttons below it. */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.topbar nav { display: flex; gap: 8px; align-items: center; }
.brand { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }
main { max-width: var(--card-max); margin: 0 auto; padding: 20px 16px 60px; }

.btn, button, select {
  font: inherit; font-size: 0.95rem; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-danger { color: var(--danger); }
button:disabled { opacity: 0.6; cursor: progress; }

input[type="text"], input[type="url"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], textarea {
  font: inherit; width: 100%; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
textarea { min-height: 120px; resize: vertical; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin: 14px 0 4px; }
.hint { font-size: 0.85rem; color: var(--muted); }
.error { color: var(--danger); margin-top: 10px; }
.empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* list: each recipe is an index card */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.tile {
  --rule: 24px; /* spacing of the ruled lines */
  position: relative; display: block; color: inherit; text-decoration: none;
  background: var(--index-paper); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 3px 10px rgb(60 40 20 / 0.07);
  padding: 14px 14px 10px;
}
.tile:hover, .tile:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
/* The header sits above the red rule, like the title line of a 3x5 card. */
.tile-head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 8px; border-bottom: 1.5px solid var(--index-red); }
.tile-main { flex: 1; min-width: 0; }
.tile h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; }
/* Long names show two lines and end in "…"; the full name is on the card and in the link's title. */
.tile h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.tile-source { margin-top: 3px; font-size: 0.88rem; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
/* Below the red rule: faint blue lines. The type and stars sit on the first, the time and
   whose card it is on the next, so the title gets the full width up top. */
.tile-lines {
  min-height: calc(var(--rule) * 2); line-height: var(--rule); font-size: 0.85rem; color: var(--muted);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), var(--index-blue) calc(var(--rule) - 1px) var(--rule));
}
.tile-side { display: flex; align-items: center; gap: 12px; height: var(--rule); }
.tile-side .category { margin: 0; line-height: 1.4; }
/* Stars lead the line, at the left, so the floating Add button at the bottom right never sits on
   them (persona test F22). The stars sit close together, 30 px apart (WCAG's minimum for targets
   side by side is 24), and each one's tap area reaches 44 px tall above and below the ruled line
   (F9: 44 px is the comfortable fingertip size). */
.tile-side .stars { order: -1; margin-left: -5px; }
.tile-side .category { margin-left: auto; }
.tile-side .stars.small .star { position: relative; width: 30px; height: 24px; padding: 2px 5px; }
.tile-side .stars.small .star::before { content: ""; position: absolute; inset: -10px 0; }
/* The title link covers the whole tile; stars and the handle sit above it. */
.tile-link { color: inherit; text-decoration: none; }
.tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile-link:focus-visible { outline: none; }
.tile:has(.tile-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile .stars { position: relative; z-index: 1; }

/* recipe card */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px;
}
.card h1 { margin: 0 0 4px; font-size: 1.9rem; }
.card .source { color: var(--muted); margin: 0 0 12px; }
.card .description { margin: 0 0 16px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 0; border-block: 1px solid var(--border); margin-bottom: 20px; }
.facts div { font-size: 0.9rem; }
.facts span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.columns { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; }
.card h2 { font-size: 1.1rem; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.card h3 { font-size: 0.95rem; margin: 14px 0 6px; color: var(--muted); }
.ingredients ul { padding-left: 18px; margin: 0; }
.ingredients li { margin-bottom: 5px; }
.steps ol { padding-left: 22px; margin: 0; }
.steps li { margin-bottom: 10px; }
.notes { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); white-space: pre-wrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag { font-size: 0.78rem; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); }
/* Recipe types: one colour and icon each, the same on cards and the quick filters. */
[data-category] { --cat: #7d7468; }
[data-category="Dessert"] { --cat: #b0477a; }
[data-category="Main"] { --cat: #2f6f5e; }
[data-category="Soup"] { --cat: #b4602a; }
[data-category="Sauce"] { --cat: #a6402f; }
[data-category="Salad"] { --cat: #5a8a2e; }
[data-category="Side"] { --cat: #3f8a6f; }
[data-category="Breakfast"] { --cat: #a07514; }
[data-category="Bread"] { --cat: #8a5a2b; }
[data-category="Appetizer"] { --cat: #6b56b8; }
[data-category="Snack"] { --cat: #8a4fa8; }
[data-category="Drink"] { --cat: #2a73a8; }
.cat-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.category {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px 2px 6px; margin-bottom: 6px; border-radius: 99px; white-space: nowrap;
  color: var(--cat); background: color-mix(in srgb, var(--cat) 13%, transparent);
}
[data-theme="dark"] .category { color: color-mix(in srgb, var(--cat) 55%, white); background: color-mix(in srgb, var(--cat) 28%, transparent); }
.card > .category { margin-bottom: 8px; }
.originals { margin-top: 24px; }
.originals .thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.originals img { width: 120px; height: 160px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

/* add flow */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.panel .lead { margin-top: 0; }
.btn-big { width: 100%; justify-content: center; padding: 16px 20px; font-size: 1.1rem; font-weight: 600; border-radius: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.preview { position: relative; margin: 0; }
.preview img { width: 100%; aspect-ratio: 11 / 14; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.preview figcaption { font-size: 0.78rem; color: var(--muted); text-align: center; min-height: 1.2em; margin-top: 2px; }
.preview .remove {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0; justify-content: center;
  border-radius: 50%; font-size: 1.2rem; line-height: 1; background: rgb(0 0 0 / 0.6); color: #fff; border: none;
}
.add-photo {
  aspect-ratio: 11 / 14; flex-direction: column; justify-content: center; text-align: center; gap: 2px;
  border: 2px dashed var(--accent); color: var(--accent); background: transparent; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
}
.add-photo span { font-size: 2rem; line-height: 1; font-weight: 400; }
.add-photo small { font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.form-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.form-photos img { width: 70px; height: 90px; object-fit: cover; border-radius: 4px; }

/* recipes still being read, drafts, and save feedback */
.tile-pending { border-style: dashed; }
.tile-thumb { width: 46px; height: 60px; object-fit: cover; border-radius: 3px; flex: none; }
.status { display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 4px; }
.status-failed { color: var(--danger); }
.status-waiting { color: var(--muted, inherit); }
.status-parsing::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
.banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.linked-banner .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.save-button-sheet h3 { margin: 16px 0 6px; font-size: 1rem; }
.save-button-sheet .setup-steps { padding-left: 1.3em; margin: 0; }
.save-button-sheet .setup-steps li { margin: 6px 0; }
.bookmarklet { cursor: grab; }
.pending h1 { margin-top: 0; font-size: 1.4rem; display: flex; align-items: center; gap: 10px; }
.pending .thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.pending .thumbs img { width: 110px; height: 140px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.3; } }
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; z-index: 20;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.login { max-width: 380px; padding-top: 12vh; }
.login h1 { margin-top: 0; }
.auth-links { margin-bottom: 0; }
.auth-new { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 8px; text-align: center; }
.auth-new p { margin: 0; color: var(--muted); }
.back-btn.auth-back { display: inline-flex; justify-content: flex-start; margin: 0 0 12px; height: 34px; padding: 0 12px 0 6px; text-decoration: none; font-size: .95rem; }
.back-btn.auth-back:hover { text-decoration: none; }
.auth-new .btn { justify-self: stretch; justify-content: center; text-align: center; }
.login-about { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.login-about h2 { font-size: 1.05rem; margin: 0 0 6px; }
.login-about ul { margin: 0 0 8px; padding-left: 1.1em; display: grid; gap: 6px; }
.login-about li { line-height: 1.4; }
.pw-field { position: relative; }
.pw-field input { width: 100%; padding-right: 64px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 4px 10px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer; }
.account { max-width: 560px; }
.account .panel { margin-bottom: 16px; }
.account h2 { margin-top: 0; font-size: 1.1rem; }
.users { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.users th, .users td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--border); vertical-align: top; }
.users th { color: var(--muted); font-weight: 500; border-top: 0; }
.users td:last-child { text-align: right; }
.reset-link { display: block; margin-top: 8px; word-break: break-all; font-size: 0.85rem; }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  .topbar { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
  .topbar nav { gap: 6px; }
  .topbar .btn, .topbar button, .topbar select { padding: 6px 9px; font-size: 0.85rem; white-space: nowrap; }
  .brand { font-size: 1rem; white-space: nowrap; }
  .columns { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr 1fr; }
  .card { padding: 18px; }
}

@media print {
  .topbar, .actions, .originals, .banner, .toast { display: none; }
  .category { padding: 0; background: none; }
  body { background: #fff; color: #000; }
  main { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; padding: 0; }
}

/* list sort and filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: -6px 0 10px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.85rem; }
label.inline select { padding: 5px 10px; font-size: 0.9rem; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.chips:empty { display: none; }
.chip { flex: none; padding: 5px 12px; border-radius: 99px; font-size: 0.85rem; white-space: nowrap; gap: 5px; }
.chip span { color: var(--muted); font-size: 0.78rem; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.chip[aria-pressed="true"] span { color: inherit; opacity: 0.8; }
/* Type chips wear their type's colour: tinted at rest, filled when picked. */
.chip[data-category] { padding-left: 9px; border-color: color-mix(in srgb, var(--cat) 30%, var(--border)); background: color-mix(in srgb, var(--cat) 8%, var(--surface)); }
.chip[data-category] .cat-icon { color: var(--cat); }
.chip[data-category][aria-pressed="true"] { background: var(--cat); border-color: var(--cat); color: #fff; }
.chip[data-category][aria-pressed="true"] .cat-icon { color: inherit; }
[data-theme="dark"] .chip[data-category] .cat-icon { color: color-mix(in srgb, var(--cat) 55%, white); }
[data-theme="dark"] .chip[data-category][aria-pressed="true"] .cat-icon { color: inherit; }

/* edit form: Save stays reachable at the top while scrolling */
.form-bar {
  position: sticky; top: var(--topbar-h, 0px); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: -20px -16px 12px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.form-bar-title { display: flex; align-items: baseline; gap: 10px; }
.form-bar h1 { margin: 0; font-size: 1.3rem; }
.form-bar-actions { display: flex; gap: 8px; margin-left: auto; }
.form-bar-actions .btn-primary { font-weight: 600; }
.form-photos .photo-link { display: block; }

/* drafts page */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.95rem; color: var(--text); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.draft-list { list-style: none; margin: 0; padding: 0; }
.draft-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.draft-row:last-child { border-bottom: none; padding-bottom: 0; }
.draft-row .check { padding: 8px 4px; }
.draft-link { flex: 1; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.draft-link img, .draft-link .noimg { width: 46px; height: 60px; object-fit: cover; border-radius: 4px; flex: none; background: var(--border); }
.draft-link strong { display: block; }
.draft-link .meta { font-size: 0.85rem; color: var(--muted); }
.subhead { font-size: 1.05rem; margin: 28px 0 10px; }
.inline-spinner { display: inline-block; width: 12px; height: 12px; border-width: 2px; margin-right: 8px; vertical-align: -1px; }

/* full-screen photo viewer */
body.no-scroll { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 30; background: #111; display: flex; flex-direction: column; color: #fff; }
.lb-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px; flex: none;
}
.lb-bar button, .lb-bar a { background: rgb(255 255 255 / 0.14); color: #fff; border: none; padding: 10px 16px; border-radius: 99px; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.lb-close { font-weight: 600; }
@media (max-width: 360px) { .lb-bar button, .lb-bar a { padding: 10px 12px; } }
.lb-count { font-size: 0.9rem; opacity: 0.8; flex: 1; text-align: center; }
.lb-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 8px calc(12px + env(safe-area-inset-bottom)); touch-action: pan-y pinch-zoom; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: opacity 0.15s; user-select: none; -webkit-user-select: none; }
.lightbox.zoomed .lb-stage { overflow: auto; display: block; touch-action: auto; }
.lightbox.zoomed .lb-stage img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; justify-content: center;
  background: rgb(255 255 255 / 0.14); color: #fff; border: none; font-size: 2rem; line-height: 1; padding: 0;
}
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
.lightbox.zoomed .lb-nav { display: none; }

@media (max-width: 640px) {
  .form-bar { margin: -20px -16px 12px; }
  .form-bar h1 { font-size: 1.1rem; }
  .form-bar-actions { width: 100%; }
  .form-bar-actions [data-save] { margin-left: auto; }
}
@media (min-width: 900px) {
  .lightbox.zoomed .lb-stage img { width: auto; }
}
@media print { .form-bar, .lightbox, .filters, .chips { display: none; } }

/* star ratings */
.stars { display: flex; align-items: center; }
.star {
  width: 36px; height: 36px; padding: 6px; border: none; background: none; border-radius: 6px; justify-content: center;
  color: var(--border); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* Unrated stars are clear outlines and rated ones are solid gold, so the two read apart in
   every theme (the old dark grey fill on a dark card looked "filled but faint"). */
.star svg { width: 100%; height: 100%; fill: transparent; stroke: var(--star-off); stroke-width: 1.6; stroke-linejoin: round; }
.star.on svg { fill: var(--star-on); stroke: var(--star-on-edge); }
.stars.small .star { width: 26px; height: 26px; padding: 4px; }
/* The family's average, before you've rated it yourself: gold outline, pale fill. */
.stars.family .star.on svg { fill: color-mix(in srgb, var(--star-on) 35%, transparent); stroke: var(--star-on-edge); }
.family-rating { margin: 0 0 8px; text-align: right; font-size: .85rem; }
@media (hover: hover) {
  /* Hovering previews the rating you'd set. */
  .stars:hover .star svg { fill: var(--star-on); stroke: var(--star-on-edge); }
  .stars:hover .star:hover ~ .star svg { fill: transparent; stroke: var(--star-off); }
}
.star:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 4px; }
.card-top .category { margin-bottom: 0; }
.card-top .stars { margin-right: -6px; }
.card-top:not(:has(.category)) { justify-content: flex-end; }

/* hand sorting ("My order") */
.grid.ordering .tile { padding-right: 52px; }
.drag-handle {
  position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 48px; padding: 0; justify-content: center;
  border: none; border-left: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0;
  background: transparent; color: var(--muted); font-size: 1.3rem; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.drag-handle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.grid.is-dragging { user-select: none; -webkit-user-select: none; }
.grid.is-dragging, .grid.is-dragging * { cursor: grabbing; }
.tile.dragging {
  border-color: var(--accent); box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); transform: scale(1.02);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface)); z-index: 2;
}
#order-hint { margin: -4px 0 12px; }

/* ingredients: the ingredient itself stands out; prep notes step back */
.ing-item { font-weight: 650; }
.ing-amount { font-variant-numeric: tabular-nums; }
.ing-note { color: var(--muted); }
@media print { .stars, .drag-handle, #order-hint { display: none; } .ing-note { color: #555; } }

/* ---------- scan credits ---------- */
.credit-badge {
  display: inline-block; min-width: 1.6em; margin-left: 0.35em; padding: 0 0.4em;
  border-radius: 999px; background: color-mix(in srgb, var(--accent-text) 25%, transparent);
  font-size: 0.8em; font-weight: 600; line-height: 1.6; text-align: center;
}
.credit-badge.out { background: var(--danger); color: #fff; }
.notice {
  padding: 0.6em 0.8em; border-radius: 8px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.credit-balance { font-size: 1.1em; margin: 0.2em 0; }
.credit-balance strong { font-size: 2em; color: var(--accent); margin-right: 0.15em; }
.ledger { list-style: none; padding: 0; margin: 0.5em 0 0; }
.ledger li { padding: 0.3em 0; border-top: 1px solid var(--border); }
.ledger .plus, .ledger .minus { display: inline-block; min-width: 2.5em; font-weight: 600; }
.ledger .plus { color: var(--accent); }
.ledger .minus { color: var(--muted); }
.table-scroll { overflow-x: auto; }
.usage td, .usage th { white-space: nowrap; }
.usage.reads td:last-child { text-align: left; }
.grant { display: flex; gap: 0.4em; margin: 0; }
.grant input { width: 5em; margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-top: 1em; }
.inline-form label { margin: 0; }
.inline-form input { width: 6em; margin: 0; }
.inline-form input[type="date"], .inline-form select { width: auto; }
@media (max-width: 420px) {
  .topbar { gap: 6px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
  .topbar nav { gap: 6px; }
  .topbar nav .btn { padding: 7px 10px; font-size: 0.9rem; }
}
@media (max-width: 420px) { .wide-only { display: none; } }

/* stories, people and lineage (C8) */
.card .lineage { font-style: italic; color: var(--accent); margin: 0 0 4px; }
.card .heritage { font-size: 0.85rem; color: var(--muted); margin: 0 0 8px; }
.story { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
.story .chapter p { margin: 0 0 4px; white-space: pre-wrap; }
.story .chapter { margin-bottom: 12px; }
.chapter.theirs { border-left: 3px solid var(--border); padding-left: 12px; margin-left: 0; }
.people { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.people li { display: flex; align-items: center; gap: 10px; }
.people li > span { display: flex; flex-direction: column; }
.people img, .people .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.people .avatar { display: grid; place-items: center; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sources { margin-top: 16px; }
.sources ul, .link-list { margin: 0; padding-left: 18px; }
.provenance p { margin: 0 0 6px; }

/* the form's editable lists */
fieldset.group { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 14px 14px; margin: 18px 0 4px; }
fieldset.group legend { font-weight: 600; padding: 0 6px; }
.ed-row { display: grid; grid-template-columns: 130px 1fr 1fr 120px auto; gap: 6px; margin: 8px 0; align-items: center; }
#people-ed .ed-row { grid-template-columns: 56px 1fr 1fr auto; }
#links-ed .ed-row { grid-template-columns: 1fr 1fr auto; }
.ed-row [data-remove] { padding: 6px 10px; }
.person-photo { width: 56px; height: 56px; padding: 0; border-radius: 50%; overflow: hidden; font-size: 0.7rem; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-btn { background: none; border: none; color: var(--accent); padding: 6px 0; font-weight: 600; cursor: pointer; }
.link-btn .line-icon { color: inherit; }
#dish-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 10px; }
#dish-ed:empty { display: none; }
blockquote.chapter { margin: 10px 0; }
blockquote.chapter p { margin: 0 0 4px; white-space: pre-wrap; }
.family-list { margin: 0 0 8px; padding-left: 18px; }
@media (max-width: 640px) {
  .ed-row { grid-template-columns: 1fr 1fr auto; }
  .ed-row select { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #people-ed .ed-row { grid-template-columns: 56px 1fr auto; }
  #people-ed .ed-row [name="relation"] { grid-column: 2; grid-row: 2; }
  #people-ed .person-photo { grid-row: span 2; }
  #links-ed .ed-row { grid-template-columns: 1fr auto; }
  #links-ed .ed-row [name="caption"] { grid-column: 1; }
}
.ed-row > * { min-width: 0; }
@media (max-width: 640px) {
  #sources-ed .ed-row { grid-template-columns: 1fr auto; }
  #sources-ed .ed-row select { grid-column: 1; grid-row: 1; }
  #sources-ed .ed-row [data-remove] { grid-column: 2; grid-row: 1; }
  #sources-ed .ed-row input { grid-column: 1 / -1; }
}

/* account page: tabs */
.account-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.account-tabs a { padding: 10px 12px; color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.account-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.account-tabs .count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; font-size: 0.72rem; text-align: center;
  background: var(--accent); color: var(--accent-text); vertical-align: 1px; }

/* family: one row per seat (Account → Family) */
.family-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.family-head h2 { margin-bottom: 0; }
.seats { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--muted); }
.seat { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border); }
.seat.on { background: var(--accent); border-color: var(--accent); }
.seat.half { border-color: var(--accent); border-style: dashed; }
.seats .seat:last-of-type { margin-right: 4px; }
.family-summary { margin: 6px 0 14px; }
.family-members { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.family-members li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border); min-height: 60px; }
.family-members li:first-child { border-top: 0; }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.avatar-pending { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, var(--border)); }
.avatar-add { background: transparent; border: 1.5px dashed var(--accent); font-size: 1.3rem; font-weight: 400; }
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.who .hint { font-size: 0.82rem; overflow-wrap: anywhere; line-height: 1.4; }
.who-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.who-name .hint { font-size: 0.85rem; }
.role { flex: none; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; color: var(--muted); border: 1px solid var(--border); }
.role-owner { color: var(--accent); border-color: transparent; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.role-pending { border-style: dashed; }
.family-members li.empty { padding: 0; }
.seat-add { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 0;
  background: transparent; color: var(--accent); font-weight: 600; text-align: left; }
.seat-add:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.menu { position: relative; flex: none; }
.menu summary { list-style: none; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px;
  font-size: 1.2rem; color: var(--muted); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: color-mix(in srgb, var(--text) 7%, transparent); }
.menu > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 200px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.menu > div button { width: 100%; border: 0; background: transparent; text-align: left; }
.menu > div button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.menu > div .hint { margin: 2px 10px 4px; font-size: 0.8rem; }
.menu-spacer { flex: none; width: 36px; }
.own-book { margin-top: 18px; padding: 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.own-book h3 { margin: 0 0 4px; font-size: 1rem; }
.own-book .hint { margin: 0 0 10px; }
.danger-zone { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.danger-zone summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.danger-zone[open] summary { color: var(--danger); }
.danger-zone .hint { margin: 8px 0 10px; }

/* dialogs (invite, confirm) */
dialog.sheet { width: min(440px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgb(0 0 0 / 0.25); }
dialog.sheet::backdrop { background: rgb(0 0 0 / 0.4); }
dialog.sheet h2 { margin: 0 0 6px; font-size: 1.15rem; }
dialog.sheet p { margin: 0 0 10px; }
dialog.sheet input { width: 100%; }
.sheet-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.btn-solid-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
/* the send step: one row per way to send, like the phone's own share sheet */
.send-list { display: grid; margin: 14px 0 4px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.send-option { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 14px; min-height: 60px;
  border: 0; border-radius: 0; background: none; color: var(--text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.send-option + .send-option { border-top: 1px solid var(--border); }
.send-option:hover, .send-option:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.send-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.send-icon .ui-icon { width: 20px; height: 20px; }
.send-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.send-text .hint { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.send-done { color: var(--accent); font-weight: 700; visibility: hidden; }
.send-option.used .send-done { visibility: visible; }
.pick-contact { width: 100%; justify-content: center; margin: 4px 0 6px; }
#invite-panel p { margin: 0 0 8px; }
.family-note { margin: 0 0 10px; }

/* quick add: a prompt in the card where a missing source or story would go */
.quick-add { margin: 0 0 12px; }
.quick-story { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
.quick-ask {
  padding: 4px 12px 4px 10px; border-radius: 99px; font-size: 0.88rem; color: var(--accent);
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.quick-ask span { font-weight: 700; }
.quick-add form { padding: 10px 12px 12px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 4%, transparent); }
.quick-add label { margin-top: 0; }
.quick-fields { display: flex; gap: 6px; }
.quick-fields select { flex: none; }
.quick-fields input { flex: 1; min-width: 0; }
.quick-add textarea { min-height: 80px; }
.quick-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.quick-buttons .link-btn { color: var(--muted); font-weight: 500; }
@media print { .quick-add { display: none; } }

/* story asks: on the card, the inbox, and the reply page a relative opens */
.ask-block { margin-top: 12px; }
.ask-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.88rem; color: var(--muted); }
.ask-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; padding: 4px 0; }
.ask-list .link-btn { color: var(--muted); font-weight: 500; font-size: 0.85rem; padding: 2px 0; }
.memory { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 0 8px 8px 0; }
.memory blockquote { margin: 0; white-space: pre-wrap; font-style: italic; }
.memory figcaption { margin-top: 6px; font-size: 0.88rem; }
.memory-remove { font-size: 0.8rem; color: var(--muted); font-weight: 500; padding: 0 0 0 6px; }
@media print { .ask-block, .memory-remove { display: none; } }
.topbar .count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; font-size: 0.72rem; text-align: center;
  background: var(--accent); color: var(--accent-text); }

.inbox { max-width: 640px; }
.inbox h1 { margin: 0 0 4px; }
.inbox > .hint { margin: 0 0 16px; }
.inbox-item { margin-bottom: 14px; }
.inbox-meta { margin: 0 0 6px; display: flex; flex-direction: column; }
.inbox-item textarea { width: 100%; }
.inbox-item .thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inbox-item .thumbs img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.memory-text { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--border); white-space: pre-wrap; }
.empty-inbox p { margin: 0 0 6px; }

.ask-page { max-width: 620px; margin: 0 auto; padding: 24px 16px 60px; }
.ask-head h1 { font-size: 1.5rem; margin: 4px 0 10px; }
.eyebrow { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ask-question { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius); font-size: 1.05rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-left: 4px solid var(--accent); }
.ask-card { margin-bottom: 16px; }
.ask-card h2 { margin: 0 0 4px; }
.ask-card h3 { font-size: 1rem; }
.ask-originals { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0; }
.ask-originals img { height: 140px; border-radius: 6px; border: 1px solid var(--border); }
.ask-story p { white-space: pre-wrap; }
.ask-card details { margin-top: 10px; }
.ask-card summary { cursor: pointer; color: var(--accent); font-weight: 600; }
#reply h2 { margin-top: 0; }
#reply textarea, #reply input[type="text"], #reply select { width: 100%; }
.reply-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin: 10px 0 0; }
.add-files { margin-top: 10px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .row-2 { grid-template-columns: 1fr; } }
/* On a phone there's no room for both: while replies wait, the Inbox button takes the theme picker's place. */

/* contributors: account option on the reply page, their home, sent replies */
.save-account { margin: 18px 0 4px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius); }
.save-account .check { align-items: flex-start; }
.save-account input[type="email"], .save-account input[type="password"] { width: 100%; }
.asked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.asked-tile { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); }
.asked-tile strong { font-size: 1.1rem; }
.sent-list { list-style: none; margin: 0; padding: 0; }
.sent-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.sent-list li:first-child { border-top: 0; }
.sent-list p { margin: 6px 0 0; white-space: pre-wrap; }

/* Account → Users (admin) */
#users-q { width: 100%; margin: 4px 0 10px; }
.user-list li { padding: 0; }
.user-list li.hint { padding: 14px 12px; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; width: 100%; color: inherit; text-decoration: none; min-height: 60px; }
.user-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.user-row.is-off { opacity: 0.6; }
.user-row .chev { flex: none; color: var(--muted); font-size: 1.3rem; }
.role-admin { color: var(--text); }
.role-off { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.warn { color: var(--danger); font-weight: 600; }
.user-head { display: flex; gap: 12px; align-items: center; }
.user-head .avatar { width: 48px; height: 48px; font-size: 1rem; }
.user-head h2 { margin: 0; }
.user-head .who-name { margin-top: 6px; }
.acct-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 12px; font-size: 0.92rem; }
.acct-facts dt { color: var(--muted); }
.acct-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mini-list { margin: 4px 0; padding-left: 18px; }
#u-note textarea { width: 100%; }
.events .ev-sign_in_failed, .events .ev-sign_in_blocked, .events .ev-suspended { color: var(--danger); }
@media (max-width: 420px) { .acct-facts { grid-template-columns: 1fr; gap: 2px; } .acct-facts dd { margin-bottom: 8px; } }
/* "Add from a reply" dialog on the card */
.ask-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ask-buttons .link-btn { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 480px) { .two-up { grid-template-columns: 1fr; } }
.tidy-row { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 4px; }
.tidy-row .link-btn { text-align: left; }
.tidy-row .link-btn { font-size: 0.88rem; }
/* a long sheet (Add a reply): its title and X stay at the top as you scroll */
.sheet-head { position: sticky; top: -20px; z-index: 2; display: flex; align-items: flex-start; gap: 10px;
  margin: -20px -20px 6px; padding: 16px 12px 8px 20px; background: var(--surface); }
.sheet-head h2 { flex: 1; margin: 4px 0 0 !important; }
.sheet-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.sheet-x .line-icon { width: 20px; height: 20px; }
dialog.sheet-full { overscroll-behavior: contain; }
html:has(dialog.sheet-full[open]) { overflow: hidden; }
/* On a phone: fill the part of the screen above the keyboard (set from visualViewport in app.js),
   so Safari has nothing to pan and the text stays where it is as you type. */
@media (max-width: 600px) {
  dialog.sheet-full { position: fixed; inset: auto; top: var(--vv-top, 0px); left: 0; margin: 0;
    width: 100%; max-width: 100%; height: var(--vv-height, 100dvh); max-height: none;
    border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  dialog.sheet-full .sheet-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
}
dialog.sheet [data-previews]:empty { display: none; }
dialog.sheet [data-previews] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
dialog.sheet [data-previews] img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

/* videos and voice notes: the picker (public/clips.js), the card and the inbox */
.clips { margin-top: 4px; }
.clip-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.clip-buttons .btn { margin: 0; }
.clip-list:not(:empty) { display: grid; gap: 10px; margin-bottom: 10px; }
.clip { margin: 0; }
.clip video { display: block; width: 100%; max-height: 360px; border-radius: 8px; background: #000; }
.clip audio { display: block; width: 100%; }
.clip figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.85rem; }
.originals .clip + .clip { margin-top: 14px; }
.recording { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, #d33 40%, var(--border)); background: color-mix(in srgb, #d33 6%, transparent); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #d33; animation: rec-blink 1s steps(2) infinite; }
@keyframes rec-blink { 50% { opacity: 0.2; } }
.recording { flex-wrap: wrap; }
.recording [data-clock] { font-variant-numeric: tabular-nums; }
.rec-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.recorder .live { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; background: #000; margin-bottom: 8px; }
.recorder .live[data-facing="user"] { transform: scaleX(-1); }
/* line icons on buttons: the same drawing style as the recipe type icons */
.line-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn .line-icon, button .line-icon { color: var(--accent); }
.btn-primary .line-icon { color: inherit; }
.inbox-clips { display: grid; gap: 8px; margin-top: 10px; }
.clip-preview { width: 220px; }
.clip-preview video, .clip-preview audio { width: 100%; }
@media print { .clip video, .clip audio { display: none; } }

/* ---------- people's circles (src/avatars.js) ---------- */
.avatar-color { background: var(--av); color: #1d2420; }
.avatar-photo { overflow: hidden; background: var(--border); }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.35rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 2rem; }
/* The header's Account button. */
.account-link { display: grid; place-items: center; border-radius: 50%; text-decoration: none; }
.account-link .avatar { width: 38px; height: 38px; font-size: 0.85rem; }
.account-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-link:hover .avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (max-width: 520px) { .account-link .avatar { width: 34px; height: 34px; font-size: 0.8rem; } }
/* Profile: your circle at the top right, with Edit under it. */
.profile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.profile-head > div { min-width: 0; }
.profile-head .hint { overflow-wrap: anywhere; }
.avatar-edit { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.avatar-edit-label { font-size: 0.78rem; }
.avatar-edit:hover .avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.avatar-sheet .avatar-preview { display: flex; justify-content: center; margin: 8px 0 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 12px 0 4px; }
.swatches legend { padding: 0; margin-bottom: 6px; font-size: 0.9rem; color: var(--muted); }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch > span[aria-hidden] { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--av); border: 2px solid transparent; }
.swatch-default > span[aria-hidden] { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--border); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.avatar-photo-actions { margin-top: 12px; }
.file-btn { cursor: pointer; }
#av-initials { text-transform: uppercase; }

/* ---------- Sunday Box brand treatment ----------
   The front of a card is for cooking: clean Figtree, plain layout. The memory side (story,
   memories, people) gets the aged-card colour and the display face. A tomato band tops every
   card, like the printed header on store-bought recipe cards. */
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 1.35rem; letter-spacing: 0.005em; }
.brand img { display: block; flex: none; }
.btn, button, select { border-radius: 99px; }
select { padding-right: 10px; }
input[type="text"], input[type="url"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], textarea { border-radius: 10px; }
.btn-primary { font-weight: 600; }

.tile { border-top: 5px solid var(--accent); }
.tile h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.22rem; }
.kitchen-name { margin-left: 0.3em; font-family: var(--font-kitchen); font-size: 0.8em; color: var(--accent-2); letter-spacing: 0.01em; }

.card { border-top: 8px solid var(--accent); }
.card h1 { font-weight: 400; font-size: 2.15rem; line-height: 1.1; }
.card h2 { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--accent); }
.card h3 { font-family: var(--font-body); font-weight: 600; }
.card .lineage { color: var(--accent-2); font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; }
.story { background: var(--memory); border: 1px solid var(--border); border-top: 4px solid var(--accent-2); border-radius: 4px; padding: 16px 18px; }
.story h2 { color: var(--accent-2); }
.story .chapter p, .memory blockquote { font-family: var(--font-heading); font-size: 1.08rem; line-height: 1.45; }
.memory { border-left-color: var(--accent-2); }
.memory blockquote { font-style: italic; }

.login-brand { display: grid; justify-items: center; gap: 6px; margin-bottom: 18px; text-align: center; }
.login-word { font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; }
.login-desc { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.login .panel { border-top: 6px solid var(--accent); }
.brand-mark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--text); }
.ui-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Top bar: the logo and name never get squeezed; the right side is small round buttons. */
.topbar .brand { min-width: 0; flex: none; white-space: nowrap; }
.topbar nav { flex: none; }
.theme-pick { position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin: 0; flex: none;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.theme-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; font-size: 16px; }
.theme-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .theme-pick { width: 34px; height: 34px; } .topbar .account-link .avatar { width: 34px; height: 34px; } .brand { font-size: 1.2rem; } .brand img { width: 26px; height: 26px; } }
/* Add recipe sits beside the search box, right above the list. */
.toolbar { align-items: center; }
.toolbar input[type="search"] { flex: 1; min-width: 0; }
.add-btn { flex: none; white-space: nowrap; }

/* the recipe form (edit, check and save, type it in): four sections in card order */
.recipe-form .form-section { margin-bottom: 14px; }
.form-section > h2 { font-size: 1.25rem; margin: 0 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.form-section > label:first-of-type, .form-section > h2 + .compare + label, .form-section > h2 + label { margin-top: 12px; }
.form-section .add-btn { margin: 6px 0 0; }
.form-section .add-btn + .hint { margin-top: 6px; }
.form-tabs { margin: 12px 0; }
.form-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.form-tabs button[aria-selected="true"] .line-icon { color: inherit; }
.tab-count { font-size: 0.78rem; font-weight: 700; min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); }
.form-section #dish-ed { margin: 0 0 4px; }
.form-section .clip-list:not(:empty) { margin-bottom: 10px; }
.form-section .two-up select { width: 100%; }
@media (max-width: 640px) { .recipe-form .row { grid-template-columns: 1fr 1fr; } }

/* ---------- Add a recipe ----------
   Photo and link are the two big ways in (the app does the reading); typing it in sits below
   as the quiet fallback. Each way in says what happens next. */
.add-page h1 { margin-bottom: 4px; }
.add-intro { margin: 0 0 18px; font-size: 1.08rem; color: var(--text); }
.add-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.add-tabs { display: contents; }
.add-choice { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px;
  border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); min-width: 0; }
.add-choice svg { width: 30px; height: 30px; flex: none; color: var(--accent); stroke-width: 1.8; }
.add-choice span { display: grid; gap: 2px; min-width: 0; }
.add-choice b { font-family: var(--font-heading); font-weight: 400; font-size: 1.2rem; line-height: 1.15; }
.add-choice small { font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
.add-choice:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.add-choice[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent); }
.add-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .add-choices { gap: 8px; }
  .add-choice { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
}
@media (max-width: 520px) {
  .add-choice svg { width: 26px; height: 26px; }
  .add-choice b { font-size: 1.05rem; }
  .add-choice small { font-size: 0.76rem; }
}
.add-panel { display: grid; gap: 14px; }
.add-panel > .hint:empty, .add-panel form > .hint:empty { display: none; }
.add-panel form { display: grid; gap: 10px; }
.add-panel .previews:not([hidden]) { margin: 0; }

/* The next step stands out: the action panel sits right under the Snap a photo / Paste a link
   tiles, in the chosen tile's colours, with a notch pointing up at it. The other two ways in
   follow; how it works and the credits sit quieter below. */
.add-choices { grid-template-columns: repeat(var(--choices, 4), minmax(0, 1fr)); grid-auto-flow: row; }
.add-choices > .add-panel { grid-row: 2; grid-column: 1 / -1; position: relative; margin: 6px 0 4px; padding: 18px;
  border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.add-choices > .add-panel::before { content: ""; position: absolute; top: -9px; left: calc(var(--notch-x, 25%) - 8px);
  width: 14px; height: 14px; transform: rotate(45deg); background: inherit;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); border-top-left-radius: 3px; }
/* All four ways in on row 1, in page order (a tile with a set row is placed before auto ones, so all get one). */
.add-choices .add-choice { grid-row: 1; }
/* On a phone the four ways in stay in one row too, as compact icon tiles (the line under each
   name drops; the panel below says what happens), so the choice row and the action read as one. */
@media (max-width: 600px) {
  .add-choices { gap: 6px; }
  .add-choice { align-items: center; text-align: center; gap: 6px; padding: 12px 4px 10px; }
  .add-choice span { justify-items: center; }
  .add-choice svg { width: 26px; height: 26px; }
  .add-choice b { font-size: 0.98rem; line-height: 1.12; text-wrap: balance; }
  .add-choice small { display: none; }
  .add-choices > .add-panel { padding: 16px 14px; }
}
/* The big buttons: the tin's ink edge and a soft lift, like the round Add button. */
.btn-go { border: 2px solid #3a2420; box-shadow: inset 0 0 0 2px color-mix(in srgb, #fffdf8 35%, transparent),
  0 6px 14px -4px rgb(70 30 20 / 0.40); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.btn-go:hover { transform: translateY(-1px); }
.btn-go:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fffdf8 35%, transparent); }
[data-theme="dark"] .btn-go { border-color: color-mix(in srgb, var(--accent) 55%, #fff); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.add-panel .btn-big { padding: 20px; font-size: 1.2rem; }
.add-panel .btn-big .ui-icon, .add-panel .btn-big svg { width: 26px; height: 26px; }
.link-label { font-weight: 600; font-size: 0.95rem; }
.link-row { display: flex; gap: 8px; }
.link-field { position: relative; flex: 1; min-width: 0; display: flex; }
.link-field input { flex: 1; min-width: 0; font-size: 1.05rem; padding: 15px 16px; border: 2px solid var(--accent); border-radius: 12px;
  background: var(--bg); color: var(--text); }
.link-field input:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.link-field:has(.paste-btn:not([hidden])) input { padding-right: 104px; }
.paste-btn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 8px 12px; border-radius: 9px; font-weight: 600; font-size: 0.95rem;
  border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.paste-btn[hidden] { display: none; }
.paste-btn .ui-icon { width: 18px; height: 18px; }
.link-row .btn-primary { flex: none; padding: 12px 20px; border-radius: 12px; }
@media (max-width: 520px) { .link-row { flex-direction: column; } .link-row .btn-primary { justify-content: center; padding: 16px; font-size: 1.1rem; } }
.add-more { display: grid; gap: 14px; margin-top: 18px; padding: 0 2px; }
.add-more .next-steps { border-top: 0; padding-top: 0; }
.add-more [data-credit-note] { font-size: 0.9rem; color: var(--muted); }
.add-more-steps { display: grid; gap: 14px; }
.next-steps { border-top: 1px solid var(--border); padding-top: 14px; }
.next-steps h2 { margin: 0 0 10px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.next-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.next-steps li { counter-increment: step; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.95rem; line-height: 1.45; }
.next-steps li::before { content: counter(step); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.add-panel .credit-hint, .add-panel .notice { margin: 0; }

.quick-ask .ui-icon { width: 16px; height: 16px; }

/* Community tab (Account): add a contributor, friends, sources & services */
.pick-label { margin: 14px 0 6px !important; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pick-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pick-row { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 12px; min-height: 56px; border: 0; border-radius: 0;
  background: transparent; color: var(--text); text-align: left; font-weight: 400; }
.pick-row + .pick-row { border-top: 1px solid var(--border); }
.pick-row:hover, .pick-row:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pick-recipes { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.pick-recipes li + li { border-top: 1px solid var(--border); }
.pick-recipes .check { display: flex; width: 100%; padding: 10px 12px; min-height: 48px; }
.pick-recipes .check .hint { font-size: 0.8rem; }
.sheet-sticky { position: sticky; bottom: -20px; padding: 12px 0; margin-bottom: -12px; background: var(--surface); }
.fr-invite { margin-top: 14px; }
.source-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.source-icon .ui-icon { width: 19px; height: 19px; }
#sources .who-name a { color: inherit; text-decoration: none; }
#sources .who-name a:hover { text-decoration: underline; }
dialog.sheet .pick-recipes .check { justify-content: flex-start; gap: 12px; }
dialog.sheet .pick-recipes .check input { width: 20px; flex: none; }
dialog.sheet .check input { width: 20px; flex: none; }

/* "Ask for new recipes": the two kinds of ask, the contributor's home, the invite page */
.ask-kinds .pick-row { align-items: flex-start; text-align: left; }
.ask-kinds .pick-row[disabled] { opacity: 0.55; cursor: not-allowed; background: none; }
.kind-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.kind-icon .ui-icon { width: 22px; height: 22px; }
.collect-panel { margin-bottom: 22px; }
.collect-panel .actions { margin: 12px 0 6px; }
.collect-steps { margin: 0 0 10px; padding-left: 1.3em; }
.collect-steps li { margin: 6px 0; }
.collect-line { color: var(--text); }
.collect-out { color: var(--danger, #b3261e); }
#collect-main .panel + .panel { margin-top: 16px; }
.qs-ways { display: grid; gap: 8px; margin: 14px 0 6px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; }
.qs-ways label { margin-top: 4px; }
#qs-type summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; }

/* ---------- Back and the round Add button (Rip, 2026-11-05) ----------
   Back sits left of the logo on every page but the home list, so going back is obvious.
   Add is a round button fixed to the lower right of the recipe list, there while you scroll. */
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.back-btn { display: inline-flex; align-items: center; gap: 4px; height: 38px; min-width: 38px; padding: 0 12px 0 8px; margin: 0;
  border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; }
.back-btn[hidden] { display: none; }
.back-btn .ui-icon { width: 20px; height: 20px; stroke-width: 2.2; }
.back-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
@media (max-width: 640px) { .back-btn { padding: 0; justify-content: center; } }
@media (max-width: 420px) { .back-btn { height: 34px; min-width: 34px; } .topbar-left { gap: 6px; } }

/* Bottom right of the part of the screen you can see: above the iPhone home bar (safe-area inset,
   which index.html's viewport-fit=cover makes real) and above Safari's toolbar (--fab-lift, app.js). */
.add-fab { position: fixed; z-index: 6; right: max(18px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: calc(max(22px, env(safe-area-inset-bottom, 0px) + 14px) + var(--fab-lift, 0px));
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; text-decoration: none;
  /* A tomato disc with a cream ring and an ink edge, like the logo's tin: reads as a sticker, not a stock + */
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--accent) 82%, #fff) 0, var(--accent) 58%, color-mix(in srgb, var(--accent) 86%, #000) 100%);
  border: 2px solid #3a2420; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, #fffdf8 55%, transparent),
    0 8px 20px rgb(70 30 20 / 0.30), 0 2px 4px rgb(70 30 20 / 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, bottom 0.2s ease;
  animation: fab-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.fab-art { width: 42px; height: 42px; overflow: visible; transition: transform 0.2s ease; }
.fab-card { fill: #fffdf8; stroke: #3a2420; stroke-width: 1.8; }
.fab-rule { stroke: #c8423a; stroke-width: 1.7; stroke-linecap: round; }
.fab-lines { stroke: #c9d3e3; stroke-width: 1.4; stroke-linecap: round; }
.fab-plus-disc { fill: var(--highlight); stroke: #3a2420; stroke-width: 1.8; }
.fab-plus { stroke: #3a2420; stroke-width: 2.2; stroke-linecap: round; }
.add-fab:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, #fffdf8 55%, transparent),
    0 12px 26px rgb(70 30 20 / 0.34), 0 3px 6px rgb(70 30 20 / 0.22); }
.add-fab:hover .fab-art { transform: rotate(-4deg); }
.add-fab:active { transform: scale(0.95); }
.add-fab:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
@keyframes fab-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .add-fab, .fab-art { animation: none; transition: none; } }
/* On dark, the edge is the page colour so the disc stands off the cards; the shadow does nothing there. */
:root[data-theme="dark"] .add-fab { border-color: var(--bg); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, #fffdf8 45%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 22px rgb(0 0 0 / 0.55); }
.add-fab .credit-badge { position: absolute; top: -4px; right: -4px; margin: 0; min-width: 22px; padding: 0 5px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); font-size: 0.72rem; line-height: 20px; }
.add-fab .credit-badge.out { background: var(--danger); color: #fff; border-color: transparent; }
main:has(> .add-fab) { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
@media print { .add-fab { display: none; } }

/* Four ways in on Add a recipe: four across on a wide screen, two by two on a phone. */


/* Add a recipe: upload a video under Paste a link */
.video-upload { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.video-upload h3 { margin: 0 0 .25rem; font-size: 1rem; }

/* Terms and Privacy pages (public/terms.html, public/privacy.html) and the agree box on sign-up forms. */
.legal { max-width: 720px; padding-bottom: 48px; position: relative; }
.legal-close { position: absolute; top: 12px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; font-size: 28px; line-height: 1; color: var(--text); text-decoration: none; }
.legal-close:hover { background: var(--border); }
.legal h1 { margin-bottom: 4px; }
.legal h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.legal h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.legal p, .legal li { line-height: 1.6; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 4px; }
.legal-brand a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 1.2rem; color: var(--text); text-decoration: none; }
.legal-summary { border-top: 6px solid var(--accent); }
.legal-summary h2 { margin-top: 0; }
.legal-links { text-align: center; font-size: 0.9rem; color: var(--muted); margin-top: 24px; }
label.check.agree { margin-top: 12px; font-size: 0.92rem; }
.legal-note { font-size: 0.85rem; }
label.check.agree { align-items: flex-start; } label.check.agree input { margin-top: 3px; }

/* A person in "Who it came from" linked to a Sunday Box account (a contributor who added the recipe). */
.people .person-link { color: inherit; text-decoration: none; }
.people .person-link strong { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 3px; }
.person-row .person-account { grid-column: 1 / -1; margin: 0 0 2px; }

/* Pinned under the header while scrolling: each page's own controls (the list's search, Sort/Show
   and type chips; a recipe's All recipes/Share/Edit/Print/Delete; Account's back link and tabs).
   --topbar-h (app.js) is the bottom of the header, including the test-copy banner when there is one. */
#site-env-banner { padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important; }
body:has(#site-env-banner) .topbar { padding-top: 10px; }
.page-head {
  position: sticky; top: var(--topbar-h, 0px); z-index: 4;
  margin: 0 -16px 14px; padding: 8px 16px; background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color 0.15s ease;
}
body.scrolled .page-head { border-bottom-color: var(--border); }
.page-head.actions { margin-top: 0; }
.page-head > .actions { margin: 0 0 8px; }
.list-head .toolbar { margin-bottom: 10px; }
.list-head .filters { margin: 0 0 8px; }
.list-head .chips { margin-bottom: 0; }
.account-head { padding-bottom: 0; }
.account-head .account-tabs { margin: 0; border-bottom: 0; }
body.scrolled .account-head { border-bottom-color: var(--border); }
/* Things the app scrolls to land below the pinned rows, not under them. */
html { scroll-padding-top: calc(var(--topbar-h, 0px) + 72px); }
@media (max-width: 640px) {
  /* Compact on a phone: one row of smaller buttons that slides sideways if it doesn't fit. */
  .page-head { padding: 6px 16px; margin-bottom: 10px; }
  .page-head.actions, .page-head > .actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .page-head.actions::-webkit-scrollbar, .page-head > .actions::-webkit-scrollbar { display: none; }
  .page-head.actions > *, .page-head > .actions > * { flex: none; padding: 6px 12px; font-size: 0.9rem; }
  .list-head .toolbar { margin-bottom: 6px; }
  .list-head input[type="search"] { padding: 7px 11px; }
  .list-head .filters { margin-bottom: 6px; gap: 10px; flex-wrap: nowrap; }
  .list-head .filters label.inline { flex: 1 1 0; min-width: 0; }
  .list-head .filters select { flex: 1; min-width: 0; padding: 5px 8px; text-overflow: ellipsis; }
  .account-head { padding-bottom: 0; }
  /* All tabs fit in the frame on a phone: no sideways scroll strip to drag or bounce. */
  .account-head .account-tabs { gap: 0; }
  .account-head .account-tabs a { flex: 1 1 auto; text-align: center; padding: 8px 4px; font-size: 0.95rem; }
}
@media print { .page-head { position: static; } }

/* Account → Help: send a note; the admin's list of notes */
#feedback .feedback-kinds { flex-wrap: wrap; overflow: visible; }
#feedback textarea { width: 100%; }
.feedback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feedback-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.feedback-item.is-done { opacity: 0.6; }
.feedback-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.feedback-message { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.feedback-item .hint { overflow-wrap: anywhere; }
.feedback-item .actions { margin-top: 6px; gap: 6px; }
.feedback-item .actions > * { padding: 6px 12px; font-size: 0.9rem; }
.tag-bug { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }

/* a copy someone sent (Share -> Send a copy): who sent it and their note, above the card */
.sent-note { margin-bottom: 12px; padding: 12px 14px; }
.sent-note .eyebrow { margin-bottom: 6px; }
.sent-note .ask-question { margin: 6px 0 8px; }
.sent-note .hint:last-of-type { margin: 0 0 8px; }
.pick-row:disabled { opacity: 0.55; cursor: default; }

/* ---------- new-user tour (public/tour.js, steps in public/tour-steps.js) ---------- */
.tour { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.tour-shade { position: absolute; inset: 0; background: rgb(30 18 14 / 0); }
/* Fades in, but goes at once when a spot lights up, so the two never stack into a darker grey. */
.tour-shade.on { background: rgb(30 18 14 / 0.55); transition: background 0.25s ease; }
/* With a hole on screen the hole's own shadow does the dimming, and public/tour.js takes the
   shade off (not a :has() rule: iPhone Safari was slow to notice and left the screen grey). */
.tour-hole { position: fixed; box-shadow: 0 0 0 9999px rgb(30 18 14 / 0.55); outline: 2.5px solid var(--highlight);
  outline-offset: 0; }
/* No sliding between spots: the hole jumps straight to the next one. Tweening a hole with a
   screen-wide shadow made iPhone Safari repaint the whole screen grey for a while (Rip, 2026-11-11). */
/* A spot to tap: a thicker butter ring that pulses, with ripples going out from it. */
.tour-hole.tap { outline-width: 4px; animation: tour-pulse 1.4s ease-in-out infinite; }
/* The ripple grows by the same few pixels on every side, so a wide card ripples like a small button. */
.tour-hole.tap::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid var(--highlight);
  animation: tour-ripple 1.4s ease-out infinite; }
@keyframes tour-ripple { from { inset: -4px; opacity: 0.9; } to { inset: -18px; opacity: 0; } }
.tour-finger { position: fixed; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 99px;
  background: var(--highlight); color: #3a2420; font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  box-shadow: 0 6px 16px rgb(30 18 14 / 0.35); animation: tour-bob 1.4s ease-in-out infinite; }
.tour-finger[hidden] { display: none; }
.tour-finger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* A little arrow from the badge toward the spot. */
.tour-finger::after { content: ""; position: absolute; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.tour-finger[data-side="above"]::after { bottom: -5px; left: calc(50% - 6px); }
.tour-finger[data-side="below"]::after { top: -5px; left: calc(50% - 6px); }
.tour-finger[data-side="left"]::after { right: -5px; top: calc(50% - 6px); }
.tour-finger[data-side="right"]::after { left: -5px; top: calc(50% - 6px); }
@keyframes tour-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.tour-finger[data-side="below"] { animation-name: tour-bob-up; }
@keyframes tour-bob-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
.tour-finger[data-side="left"] { animation-name: tour-bob-x; }
@keyframes tour-bob-x { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
.tour-finger[data-side="right"] { animation-name: tour-bob-nx; }
@keyframes tour-bob-nx { 0%, 100% { translate: 0 0; } 50% { translate: -5px 0; } }
.tour-hole.nudge { animation: tour-nudge 0.35s ease; }
@keyframes tour-pulse { 0%, 100% { outline-offset: 0; } 50% { outline-offset: 5px; } }
@keyframes tour-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tour-pop { position: fixed; pointer-events: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 34px rgb(30 18 14 / 0.3); padding: 16px 18px 14px; }
.tour-pop[hidden] { display: none; }
.tour-pop h2 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 400; }
.tour-pop p { margin: 0 0 12px; }
.tour-count { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px !important; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tour-body { margin: 0 0 14px; }
.tour-body p { margin: 0 0 6px !important; line-height: 1.4; }
.tour-body p:last-child { margin-bottom: 0 !important; }
.tour-skip { background: none; border: none; padding: 6px 2px; color: var(--muted); text-decoration: underline; font-size: 0.92rem; }
/* The welcome and finish cards sit in the middle of the screen. */
.tour-card { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  overflow: auto; text-align: center; padding: 22px 22px 16px; }
.tour-card h2 { font-size: 1.6rem; }
.tour-card .tour-actions { flex-direction: column; }
.tour-card .btn-primary { width: 100%; padding: 12px 18px; font-size: 1.05rem; }

/* Welcome animation: a stained, torn, folded card is scanned and comes out a clean Sunday Box card. */
.tour-anim { --cycle: 6.5s; position: relative; width: 240px; height: 160px; margin: 4px auto 18px; }
.tour-anim > div, .tour-anim > img { position: absolute; inset: 8px 10px; }
/* A photo of a worn card (public/tour/old-card.jpg, drawn by scripts/tour-art). */
.old-card { width: calc(100% - 20px); height: calc(100% - 16px); object-fit: cover; border-radius: 4px;
  transform: rotate(-5deg); animation: old-card var(--cycle) ease-in-out infinite;
  box-shadow: 0 6px 14px rgb(40 20 10 / 0.35); }
.new-card { background: #fffdf8; color: #3a2420; border: 1px solid #eadccd; border-radius: 3px; padding: 10px 12px 6px; text-align: left;
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.05), 0 8px 20px rgb(60 40 20 / 0.16); border-top: 5px solid #c8423a;
  animation: new-card var(--cycle) ease-in-out infinite; }
.nc-head { padding-bottom: 5px; border-bottom: 1.5px solid #e2a79f; }
.nc-head b { display: block; font: 400 1.12rem/1.2 var(--font-heading); }
.nc-head i { font-size: 0.74rem; color: #876a5e; }
.nc-lines { --rule: 19px; line-height: var(--rule); font-size: 0.74rem;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), #dfe5ef calc(var(--rule) - 1px) var(--rule)); }
.nc-lines span { display: block; white-space: nowrap; overflow: hidden; }
.nc-lines em { font-style: normal; color: #876a5e; margin-right: 4px; }
.scan-bar { inset: auto 0 auto 0 !important; height: 3px; top: 8px; border-radius: 3px; background: #e9b949;
  box-shadow: 0 0 12px 4px rgb(233 185 73 / 0.65); opacity: 0; animation: scan-bar var(--cycle) ease-in-out infinite; }
@keyframes old-card {
  0%, 22% { opacity: 1; transform: rotate(-5deg); }
  55% { opacity: 1; transform: rotate(-1deg) scale(0.98); }
  64%, 90% { opacity: 0; transform: rotate(0) scale(0.96); }
  100% { opacity: 1; transform: rotate(-5deg); }
}
@keyframes new-card {
  0%, 24% { clip-path: inset(0 0 100% 0); transform: scale(1); }
  56% { clip-path: inset(0 0 0 0); transform: scale(1); }
  62% { transform: scale(1.04); }
  68%, 88% { clip-path: inset(0 0 0 0); transform: scale(1); opacity: 1; }
  96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes scan-bar {
  0%, 22% { top: 6px; opacity: 0; }
  25% { top: 6px; opacity: 1; }
  55% { top: calc(100% - 9px); opacity: 1; }
  60%, 100% { top: calc(100% - 9px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .old-card { animation: none; transform: rotate(-8deg) translate(-26px, -6px) scale(0.8); }
  .new-card { animation: none; transform: rotate(3deg) translate(30px, 8px) scale(0.86); }
  .scan-bar { display: none; }
  .tour-hole { transition: none; animation: none !important; }
  .tour-hole.tap::after, .tour-finger { animation: none !important; }
}
.tour-clear { justify-content: center; margin: -4px 0 12px; font-size: 0.95rem; }
.tour-card .tour-body p { margin-bottom: 10px !important; font-size: 1.02rem; }

/* ---------- the Inbox (public/app.js inboxView): every nudge and request, acted on in place ---------- */
/* The Inbox tab (last in the section bar): a small count badge on the envelope's corner. */
#inbox-link .tab-icon { position: relative; display: inline-flex; }
#inbox-link .count { position: absolute; top: -6px; left: calc(100% - 9px); min-width: 19px; padding: 0 5px; border-radius: 99px;
  font: 700 0.7rem/15px var(--font-body); text-align: center; background: var(--accent); color: var(--accent-text); border: 2px solid var(--surface); }
#inbox-link .count[hidden] { display: none; }
.ii-section { margin: 18px 0 8px; }
.ii-head { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 2px 8px; display: flex; justify-content: space-between; }
.ii-head span { letter-spacing: 0; }
.ii-section.tips .ii-head { display: none; }
.inbox-item { position: relative; display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.inbox-item.need { border-left: 4px solid var(--accent); }
.inbox-item.unread::after { content: ""; position: absolute; top: 16px; right: 38px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.inbox-item.tip { background: color-mix(in srgb, var(--highlight) 14%, var(--surface)); border-color: color-mix(in srgb, var(--highlight) 45%, var(--border)); }
.ii-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.ii-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ii-icon.blue { background: color-mix(in srgb, var(--accent-2) 12%, var(--surface)); color: var(--accent-2); }
.ii-icon.butter { background: color-mix(in srgb, var(--highlight) 30%, var(--surface)); color: color-mix(in srgb, var(--highlight) 45%, var(--text)); }
.ii-icon.ok { background: color-mix(in srgb, var(--muted) 12%, var(--surface)); color: var(--muted); }
.ii-body { flex: 1; min-width: 0; }
.ii-title { margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.ii-title a { color: inherit; }
.ii-detail { margin: 2px 0 0; font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.ii-quote { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, transparent); border-radius: 0 8px 8px 0; font-style: italic; white-space: pre-wrap; }
.ii-memory { margin-top: 8px; }
.inbox-item .ii-actions { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.link-btn.quiet { color: var(--muted); font-weight: 500; }
.ii-saved { display: inline-flex; align-items: center; gap: 4px; font-size: 0.88rem; color: var(--muted); }
.ii-x { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 4px 8px; }
.ii-expand { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ii-expand .ask-originals img { max-height: 220px; }
.ii-reply label:first-child { margin-top: 12px; }
.ii-sent { margin-top: 12px; }
.ii-more { margin: 18px 0; }
.ii-more summary { cursor: pointer; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.ii-caught-up { text-align: center; padding: 30px 16px 10px; color: var(--muted); }
.ii-caught-up svg { width: 110px; height: 90px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ii-caught-up strong { font-family: var(--font-heading); font-weight: 400; font-size: 1.4rem; color: var(--text); }
.ii-caught-up p { margin: 6px 0; }
/* "Get the app" (public/install.js): Home Screen steps for this phone and browser. */
.install-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.install-head h2 { margin-top: 2px !important; }
.install-app-icon { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
.install-steps { list-style: none; counter-reset: step; margin: 8px 0 0; padding: 0; }
.install-steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.install-steps li::before { content: counter(step); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-2); color: var(--surface); font-weight: 800; font-size: 0.85rem; }
.install-step-text { flex: 1; line-height: 1.35; }
.install-art { flex: none; min-width: 48px; min-height: 42px; display: grid; place-items: center; padding: 4px 6px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); }
.install-art .install-app-icon { width: 32px; height: 32px; border-radius: 8px; box-shadow: none; }
.install-glyph { width: 24px; height: 24px; fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.install-glyph circle { fill: var(--accent-2); stroke: none; }
.install-menu { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: var(--muted); text-align: left; white-space: nowrap; }
.install-menu strong { color: var(--text); }
.install-copy { display: flex; gap: 8px; margin-top: 8px; }
.install-copy input { flex: 1; min-width: 0; }

/* The finish card's "Put Sunday Box on your Home Screen". */
.tour-install { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 10px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-weight: 600; }
.tour-install img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.tour-install span:nth-child(2) { flex: 1; }
.tour-install span:last-child { color: var(--muted); font-size: 1.3rem; }
/* Inbox buttons: main action (filled), an optional second (outlined), then Later · Dismiss on the right. */
.ii-quiet { margin-left: auto; display: inline-flex; gap: 2px; }
.ii-quiet .link-btn { padding: 6px 8px; }
/* The link reply page (public/ask.js): one card per recipe with its own Reply, like the Inbox. */
.ask-who { margin-bottom: 18px; }
.ask-who .row-2 > div:first-child label { margin-top: 0; }
.ask-who > .hint { margin: 10px 0 0; }
.ask-card .ii-actions { margin: 14px 0 0; }
.ask-card.is-sent { border-top-color: var(--border); }
.ask-card.is-sent h2 { color: var(--muted); }
.ask-reply-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ask-reply-box label:first-child { margin-top: 0; }
.ask-done h2 { margin-top: 0; }
.save-account-panel h2 { margin-top: 0; }
.inbox-item [data-answer][aria-expanded="true"] { display: none; }

/* Checking a draft: the card we read sits above the fields, tap to enlarge (persona test F20). */
.draft-original { margin-bottom: 10px; }
.draft-original .form-photos { flex-wrap: nowrap; overflow-x: auto; }
.draft-original .form-photos img { width: 90px; height: 120px; }

/* ---------- the four sections (2026-11-09) ----------
   Recipes, Pantry, Menus and Community. Wider screens: divider tabs along the foot of the header,
   like the dividers in a recipe box, each with its own colour band. Phones: a tab bar along the
   bottom, in thumb reach, lifted over Safari's toolbar like the round Add button. */
:root { --sec-recipes: var(--accent); --sec-pantry: #b07a1c; --sec-menus: #5f8f4e; --sec-community: var(--accent-2); --sections-h: 0px; }
[data-theme="dark"] { --sec-pantry: #e0b45a; --sec-menus: #8fc07c; }
.topbar { flex-wrap: wrap; }
.sections a { color: var(--muted); text-decoration: none; font-weight: 600; }
.sections a[data-section="recipes"] { --band: var(--sec-recipes); }
.sections a[data-section="pantry"] { --band: var(--sec-pantry); }
.sections a[data-section="menus"] { --band: var(--sec-menus); }
.sections a[data-section="community"] { --band: var(--sec-community); }
.sections a[data-section="inbox"] { --band: var(--muted); }
.sections a[aria-current="page"] { color: var(--text); }
.sections a:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -3px; }
@media (min-width: 721px) {
  .topbar .sections { order: 3; flex: 1 0 100%; display: flex; gap: 6px; margin: 4px -4px -13px; padding: 0 4px; }
  .sections a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 9px; font-family: var(--font-heading);
    font-weight: 400; font-size: 1.05rem; border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0;
    background: color-mix(in srgb, var(--bg) 70%, var(--surface)); box-shadow: inset 0 4px 0 var(--band); position: relative; top: 1px; }
  .sections a .ui-icon { width: 19px; height: 19px; color: var(--band); }
  .sections a:hover { color: var(--text); }
  .sections a[aria-current="page"] { background: var(--bg); box-shadow: inset 0 5px 0 var(--band); z-index: 1; }
  /* The Inbox tab sits apart at the right end, its count after the word. */
  #inbox-link { margin-left: auto; }
  #inbox-link .tab-icon { display: contents; }
  #inbox-link .count { position: static; order: 2; border: 0; }
}
@media (max-width: 720px) {
  body.sections-on { --sections-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* At the end of <body> on phones (app.js placeSections); its own layer, so iPhone Safari keeps it
     pinned to the bottom while the page scrolls under it. */
  .sections { position: fixed; z-index: 7; left: 0; right: 0; bottom: var(--fab-lift, 0px); display: flex;
    transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
    }
  /* Five tabs share the width, so each one can shrink (min-width: 0) and its label never grows past
     what fits: with larger text on a small phone the last tab (Inbox) was pushed off the screen. */
  .sections a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: min(0.72rem, 3.3vw); padding-top: 4px; position: relative; min-height: 48px; }
  .sections a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sections a .ui-icon { width: 25px; height: 25px; stroke-width: 1.7; }
  .sections a[aria-current="page"] { color: var(--accent); }
  .sections a[aria-current="page"]::before { content: ""; position: absolute; top: -6px; width: 28px; height: 3px; border-radius: 3px; background: var(--accent); }
  body.sections-on main { padding-bottom: calc(80px + var(--sections-h)); }
  body.sections-on main:has(> .add-fab) { padding-bottom: calc(110px + var(--sections-h)); }
  body.sections-on .add-fab { bottom: calc(var(--sections-h) + 16px + var(--fab-lift, 0px)); }
  body.sections-on .toast { bottom: calc(var(--sections-h) + 16px + var(--fab-lift, 0px)); }
}
@media print { .sections { display: none !important; } }

/* Pantry and Menus until they're built. */
.coming-soon { text-align: center; padding: 28px 22px 26px; border-top: 6px solid var(--band, var(--accent)); }
.coming-soon .soon-art { width: 64px; height: 64px; color: var(--band, var(--accent)); stroke-width: 1.4; margin: 0 auto 6px; display: block; }
.coming-soon h1 { margin: 4px 0 6px; }
.coming-soon .soon-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--band, var(--accent)); border: 1.5px solid currentColor; border-radius: 99px; padding: 2px 10px; }
.coming-soon .lede { max-width: 34em; margin: 10px auto 0; }
.coming-soon ul { text-align: left; max-width: 30em; margin: 16px auto 0; padding-left: 20px; display: grid; gap: 6px; }
.soon-pantry { --band: var(--sec-pantry); }
.soon-menus { --band: var(--sec-menus); }
.section-head h1 { margin: 0 0 2px; }

/* A link from a site that blocks reading: how to bring it in (src/sites.js) */
.blocked-help { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--memory); }
.blocked-help h3 { margin: 0 0 4px; font-size: 1.05rem; }
.blocked-help .setup-steps { padding-left: 1.3em; margin: 10px 0; display: grid; gap: 10px; }
.blocked-help .setup-steps .btn { margin-left: 6px; }
.blocked-help p { margin: 6px 0 0; }
.pill-yes, .pill-no { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .8rem; white-space: nowrap; }
.pill-yes { background: color-mix(in srgb, green 14%, transparent); color: color-mix(in srgb, green 70%, currentColor); }
.pill-no { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
/* ---------- Recipe form: credit, one "Where it came from" list, Speak/Tidy, tag chips (2026-11-09) ---------- */
.credit-input { font-style: italic; }
.credit-input::placeholder { color: var(--muted); opacity: 0.8; }
.from-list .ed-row { border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: var(--bg); margin: 8px 0; }
.add-two { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.add-two .add-btn { margin: 0; }
.label-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 14px 0 4px; }
.label-row label { margin: 0; }
.field-tools { display: flex; gap: 6px; flex: none; }
.field-tools .tool { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; padding: 5px 11px; border-radius: 99px; }
.field-tools .tool .line-icon { width: 16px; height: 16px; }
.field-tools .tool.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.field-tools .tool.on .line-icon { color: inherit; }
.field-status { margin: 0 0 6px; }
.field-status.listening { color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.field-status.listening::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); animation: listen-pulse 1.2s ease-in-out infinite; }
@keyframes listen-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .field-status.listening::before { animation: none; } }
.field-status.tidied-note { color: var(--ok, #2f7444); }
.field-status .link-btn { padding: 0 0 0 4px; }
textarea.tidied { background: color-mix(in srgb, #3c8a52 8%, var(--surface)); border-color: color-mix(in srgb, #3c8a52 40%, var(--border)); }
.tags-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 6px 8px; background: var(--bg); cursor: text; }
.tags-box #tag-chips { display: contents; }
.tags-box input { border: none; background: none; flex: 1; min-width: 100px; padding: 4px; box-shadow: none; outline: none; }
.tag-on { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 11px; border-radius: 99px; font-size: 0.88rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.tag-on button { border: none; background: none; color: var(--muted); padding: 0 6px; font-size: 1rem; line-height: 1; }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tag-sug { padding: 4px 11px; border-radius: 99px; font-size: 0.88rem; border: 1px dashed var(--accent); color: var(--accent); background: none; }
[data-theme="dark"] .field-status.tidied-note { color: #8fd19e; }
.recipe-form #category { width: 100%; }
.danger-zone { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
@media print { .danger-zone { display: none; } }
.copy-pick-list { list-style: none; margin: 8px 0; padding: 0; max-height: 260px; overflow-y: auto; display: grid; gap: 4px; }
.copy-pick input[type=search] { width: 100%; }
.dup-notice p { margin: 0 0 8px; }
.dup-notice .actions { margin: 0; flex-wrap: wrap; }
.sheet .choices { border: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.sheet .choices legend { font-weight: 600; margin-bottom: 4px; }

/* ---------- the pantry, beta (2026-11-09) ----------
   What's in (by where it lives, each thing Plenty / Low / Out), the shopping list, What can I make,
   and the scan and review screens. Areas get their own band colour, like the section tabs. */
:root { --area-cupboard: var(--sec-pantry); --area-fridge: var(--accent-2); --area-freezer: #5aa0b8; --area-spices: var(--accent); --area-other: var(--muted);
  --lvl-plenty: #3c8a52; --lvl-low: #b07a1c; --lvl-out: var(--danger); }
[data-theme="dark"] { --lvl-plenty: #8fd19e; --lvl-low: #e0b45a; --lvl-out: #f08a80; --area-freezer: #8cc6d8; }
.pantry { display: grid; gap: 14px; }
.pantry > * { margin: 0; }
.pantry-head h1 { display: flex; align-items: center; gap: 10px; }
.beta-tag { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sec-pantry); border: 1.5px solid currentColor; border-radius: 99px; padding: 1px 9px; }
.pantry-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.ptab { flex: 1 0 auto; text-align: center; padding: 8px 14px; border-radius: 99px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.ptab.on { background: var(--text); color: var(--surface); }
.ptab-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--sec-pantry); color: #fff; font-size: 0.75rem; line-height: 20px; }
.scan-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-left: 5px solid var(--sec-pantry); }
.scan-card .area-icon { flex: none; width: 28px; height: 28px; color: var(--sec-pantry); margin-top: 2px; }
.scan-card p { margin: 0 0 4px; }
.scan-card .actions { margin: 8px 0 0; }
.scan-card > div { flex: 1; }
.scan-card.reading .area-icon { animation: listen-pulse 1.4s ease-in-out infinite; border-radius: 50%; }
.scan-card.failed { border-left-color: var(--danger); }
.pantry-empty { text-align: center; border-top: 6px solid var(--sec-pantry); }
.pantry-empty .soon-art { width: 60px; height: 60px; color: var(--sec-pantry); stroke-width: 1.4; margin: 0 auto 4px; display: block; }
.pantry-empty h2 { margin: 4px 0 6px; }
.pantry-empty .lede { max-width: 32em; margin: 0 auto 14px; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0 0 12px; }
.area-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); text-decoration: none; font-weight: 600; font: inherit; cursor: pointer; }
.area-btn .area-icon { width: 30px; height: 30px; color: var(--sec-pantry); stroke-width: 1.6; }
.area-btn[aria-checked="true"] { border-color: var(--sec-pantry); background: color-mix(in srgb, var(--sec-pantry) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--sec-pantry); }
.area-hint { margin: -4px 0 4px; }
.pantry-add { display: flex; gap: 8px; }
.pantry-add input { flex: 1; border-radius: 99px; padding-left: 16px; }
.pantry-lowout, .pantry-beta-note { margin: -4px 4px 0; }
.parea { padding: 0; overflow: hidden; border-top: 5px solid var(--band, var(--sec-pantry)); }
.parea-cupboard { --band: var(--area-cupboard); } .parea-fridge { --band: var(--area-fridge); } .parea-freezer { --band: var(--area-freezer); }
.parea-spices { --band: var(--area-spices); } .parea-other { --band: var(--area-other); }
.parea header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
.parea header .area-icon { width: 22px; height: 22px; color: var(--band); }
.parea header h2 { margin: 0; font-size: 1.3rem; }
.parea header .link-btn { margin-left: auto; font-size: 0.85rem; }
/* Kind sections: one quiet band, the kind's name does the work. */
.pkind { --band: var(--sec-pantry); border-top-width: 3px; }
.pkind header h2 { font-size: 1.15rem; }
.pantry-group { display: flex; align-items: center; gap: 6px; margin: -2px 4px 0; }
.pantry-group .hint { margin-right: 2px; }
.pg-btn { padding: 4px 12px; border-radius: 99px; font-size: 0.85rem; min-height: 32px; background: var(--surface); color: var(--muted); }
.pg-btn[aria-checked="true"] { background: var(--text); color: var(--surface); border-color: var(--text); font-weight: 600; }
/* Shopping list by store section: a quiet label where the aisles start; the usual brand beside the name. */
.shop-zone { margin: 4px 4px -4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.shop-item small.shop-brand { color: var(--muted); font-weight: 400; font-size: 0.85em; width: auto; padding-left: 0; margin: 0 0 0 4px; }
.shop-item small.shop-brand::before { content: "· "; }
.pitems { list-style: none; margin: 0; padding: 0; }
.pitem { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--border); }
.pitem:last-child { border-bottom: 0; }
.pitem-name { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 4px 0; color: var(--text); font-weight: 500; text-decoration: none; }
.pitem-name small { color: var(--muted); font-weight: 400; font-size: 0.82rem; }
.pitem-name small.on-list { color: var(--lvl-low); }
.levels { display: inline-flex; gap: 4px; flex: none; }
.lvl { padding: 4px 10px; border-radius: 99px; font-size: 0.82rem; min-height: 32px; background: var(--surface); color: var(--muted); }
.lvl[aria-checked="true"] { color: var(--lvl); background: color-mix(in srgb, var(--lvl) 16%, var(--surface)); border-color: color-mix(in srgb, var(--lvl) 45%, var(--border)); font-weight: 700; }
.lvl-plenty { --lvl: var(--lvl-plenty); } .lvl-low { --lvl: var(--lvl-low); } .lvl-out { --lvl: var(--lvl-out); }
.pitem.editing { display: block; background: var(--bg); }
.pitem-edit label { display: block; margin: 6px 0; font-size: 0.88rem; font-weight: 600; }
.pitem-edit input, .pitem-edit select { width: 100%; margin-top: 3px; }
.pe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pitem-edit .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.pitem-edit .danger { color: var(--danger); margin-left: auto; }
/* Review */
.rv-photos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.rv-photo, .rv-thumb { flex: none; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: none; }
.rv-photo img { display: block; width: 72px; height: 92px; object-fit: cover; }
.rv-thumb img { display: block; width: 44px; height: 44px; object-fit: cover; }
.rv-head { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 4px -6px; font-family: var(--font-body); font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.rv-head .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rv-list { list-style: none; padding: 0; overflow: hidden; border-top: 5px solid var(--accent); }
.rv-list.unsure { border-top-color: var(--sec-pantry); }
.rv-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.rv-item:last-child { border-bottom: 0; }
.rv-item input[type=checkbox] { flex: none; width: 24px; height: 24px; accent-color: var(--accent); }
.rv-main { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; }
.rv-name { border: 1px solid transparent; background: none; padding: 3px 6px; margin-left: -6px; border-radius: 6px; font: inherit; font-weight: 500; color: var(--text); width: 100%; }
.rv-name:focus { border-color: var(--border); background: var(--bg); }
.rv-main small { color: var(--muted); font-size: 0.8rem; }
.rv-item:has(input[type=checkbox]:not(:checked)) .rv-main, .rv-item:has(input[type=checkbox]:not(:checked)) .levels { opacity: 0.5; }
.rv-bar { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--fab-lift, 0px)); display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 8px 8px 8px 18px; box-shadow: var(--shadow); }
.rv-bar #rv-count { margin-right: auto; }
.rv-bar .btn-primary { border-radius: 99px; padding: 10px 18px; }
@media (max-width: 480px) { .rv-item { flex-wrap: wrap; } .rv-item .levels { margin-left: auto; } .pitem { flex-wrap: wrap; } .pitem .levels { margin-left: auto; }
  .ptab { padding: 8px 10px; font-size: 0.88rem; } }
/* Shopping list */
.shop-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shop-aisle { padding: 12px 16px; }
.shop-aisle h2 { margin: 0 0 4px; font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.shop-aisle ul { list-style: none; margin: 0; padding: 0; }
.shop-item { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.shop-item:last-child { border-bottom: 0; }
.shop-item label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 0; margin: 0; font-weight: 500; cursor: pointer; flex-wrap: wrap; }
.shop-item input { width: 22px; height: 22px; accent-color: var(--lvl-plenty); }
.shop-item small { color: var(--muted); font-weight: 400; width: 100%; padding-left: 32px; margin-top: -4px; }
.shop-item.done span { text-decoration: line-through; color: var(--muted); }
.shop-aisle.bought { opacity: 0.85; }
/* What can I make */
.cook-group { padding: 12px 16px; border-top: 5px solid var(--sec-menus); }
.cook-group.ready { border-top-color: var(--lvl-plenty); }
.cook-group h2 { margin: 0 0 4px; font-size: 1.25rem; display: flex; gap: 8px; align-items: baseline; }
.cook-group ul { list-style: none; margin: 0; padding: 0; }
.cook-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cook-item:last-child { border-bottom: 0; }
.cook-title { font-weight: 600; font-size: 1.05rem; color: var(--text); }
.cook-item p { margin: 2px 0; }
/* One scan, several places (2026-11-09): pick the place for the next snaps; each photo keeps a tag. */
.area-grid.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.area-grid.compact .area-btn { padding: 9px 4px 8px; gap: 3px; font-size: 0.8rem; }
.area-grid.compact .area-btn .area-icon { width: 24px; height: 24px; }
.scan-previews { margin: 0; }
.scan-previews:empty { display: none; }
.scan-previews figcaption { margin-top: 4px; }
.scan-previews .photo-area { width: 100%; font-size: 0.82rem; padding: 4px 6px; border-radius: 8px; }
.scan-summary { margin: 0; font-weight: 600; color: var(--sec-pantry); }
.scan-summary:empty { display: none; }
.rv-photo { position: relative; }
.rv-photo span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 0.68rem; font-weight: 600; text-align: center;
  background: rgb(0 0 0 / 0.55); color: #fff; padding: 1px 2px; }
.rv-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.rv-area { margin: 0; font-size: 0.78rem; padding: 2px 6px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); width: auto; }

/* Every section opens with its name (Rip, 2026-11-09): Recipes, Pantry, Menus, Community. */
.section-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recipes-head { margin: 0 0 4px; }
.section-head .soon-tag { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--band, var(--accent)); border: 1.5px solid currentColor; border-radius: 99px; padding: 1px 9px; }
.section-head.soon-menus + .coming-soon { margin-top: 14px; }
.coming-soon h2 { margin: 4px 0 6px; }

/* Add to the pantry (Rip, 2026-11-09): the Add a recipe page's tiles, panel and big red button,
   with the place picker inside the panel. The chosen place takes the same red as the chosen tile. */
.pantry-add-page .add-panel { gap: 12px; }
.place-label { margin: 0 0 -4px; font-weight: 600; font-size: 0.92rem; }
.pantry-add-page .area-grid { margin: 0; }
.pantry-add-page .area-btn { background: var(--surface); }
.pantry-add-page .area-btn .area-icon { color: var(--accent); }
.pantry-add-page .area-btn[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent); }
.pantry-add-page .scan-summary { color: var(--accent); }
.pantry-add-page .label-row { margin: 4px 0 0; }
.pantry-add-page .field-status { margin: 0; }
.pantry-add-page textarea { min-height: 9.5em; line-height: 1.45; }
.pantry-add-page textarea.tidied { border-color: var(--accent); }
.pantry-add-page .btn-go:disabled { opacity: 0.45; transform: none; }
.pantry-add-page .credit-hint { margin: 0; font-size: 0.9rem; color: var(--muted); }
.pantry-empty-go { margin: 6px 0 4px; }
.pantry-empty-go .btn-go { display: flex; }

.pantry-add-page .area-grid.compact { gap: 5px; }
.pantry-add-page .area-grid.compact .area-btn { padding: 9px 2px 8px; font-size: 0.74rem; min-width: 0; }

/* ---------- Share and Print several, from the Recipes list ---------- */
.tool-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 12px; }
.tool-btn .ui-icon { width: 20px; height: 20px; }
.toolbar.picking .tool-btn { display: none; }
.select-bar { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; }
.select-bar[hidden] { display: none; }
.select-count { flex: 1; min-width: 0; font-size: 0.92rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select-bar button { flex: none; white-space: nowrap; }
.select-bar .btn-primary { font-weight: 600; }
.grid.selecting .tile { cursor: pointer; padding-left: 48px; user-select: none; -webkit-user-select: none; }
.grid.selecting .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-check {
  position: absolute; left: 14px; top: 16px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--muted); background: var(--surface);
}
.tile.picked { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.tile.picked .tile-check { border-color: var(--accent); background: var(--accent); }
.tile.picked .tile-check::after {
  content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 6px; height: 11px;
  border: solid var(--accent-text); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.grid.selecting .tile.unpickable { opacity: 0.5; padding-left: 14px; }
.grid.selecting .stars { pointer-events: none; }

@media print { .select-bar, .tool-btn { display: none; } }
/* Print several: the picked cards print one per page; on screen they never show. */
#print-stack { display: none; }
@media print {
  body.printing-many > *:not(#print-stack) { display: none !important; }
  body.printing-many #print-stack { display: block; }
  #print-stack .print-card { break-after: page; page-break-after: always; }
  #print-stack .print-card:last-child { break-after: auto; page-break-after: auto; }
}