/* Food Log, light & minimal.
   Layout: one phone-width column with a floating bottom tab bar; centered 44rem column on desktop.
   Palette: warm off-white ground, white cards with soft layered shadows, near-black ink.
   Color is reserved for meaning: green = good/halal, red = skip/machine-cut, saffron = stars. */
:root {
  --bg: #F7F7F7; /* MQHalal palette: coral red on light gray, white cards */
  --surface: #FFFFFF;
  --sunken: #F1F3F4;
  --ink: #1E1F22;
  --ink-2: #3D3F44;
  --muted: #8A8C92;
  --line: #E8EBF0;
  --primary: #FF4141;
  --primary-ink: #FFFFFF;
  --primary-soft: #FFECEC;
  --star: #F2A93B;
  --good: #1F9254;
  --good-bg: #E8F5EE;
  --warn: #B7791F;
  --warn-bg: #FBF3E4;
  --bad: #D14343;
  --bad-bg: #FBEAEA;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow-1: 0 1px 2px rgba(23, 24, 26, .04), 0 2px 8px rgba(23, 24, 26, .04);
  --shadow-2: 0 2px 6px rgba(23, 24, 26, .05), 0 12px 32px rgba(23, 24, 26, .08);
  --shadow-3: 0 8px 24px rgba(23, 24, 26, .10), 0 24px 64px rgba(23, 24, 26, .12);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --tabs-h: 68px;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: clip; } /* clip, not hidden: sticky bars keep working; the slide-in can't widen the page and drop the tab bar */
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
main {
  max-width: 44rem; margin-inline: auto; outline: none;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 40px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; /* minmax: wide scrolling rows can't stretch the page */
}
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: 2rem; font-weight: 750; }
h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.num { font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.spread > :first-child { min-width: 0; }
.release-time { white-space: nowrap; flex-shrink: 0; }
.eyebrow { font-size: .78rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.page-head { display: grid; gap: 4px; padding: 6px 2px 4px; }

/* tab bar: floating pill */
.tabs {
  position: fixed; z-index: 1000; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  max-width: 30rem; margin-inline: auto; height: var(--tabs-h);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-radius: 24px; box-shadow: var(--shadow-3); border: 1px solid rgba(255, 255, 255, .7);
}
.tabs a {
  height: 100%; display: grid; place-content: center; justify-items: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 600; transition: color .2s;
}
.tabs a svg { width: 22px; height: 22px; transition: transform .3s var(--spring); }
.tabs a[aria-current="page"] { color: var(--primary); }
.tabs a[aria-current="page"] svg { transform: translateY(-1px) scale(1.08); }
.tabs a.tab-log .plus {
  width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink);
  box-shadow: 0 6px 16px rgba(255, 65, 65, .35); transition: transform .25s var(--spring);
}
.tabs a.tab-log:active .plus { transform: scale(.9); }

/* cards */
.card { background: var(--surface); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; box-shadow: var(--shadow-1); min-width: 0; }
a.card { color: inherit; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.card:hover { box-shadow: var(--shadow-2); }
a.card:active { transform: scale(.98); }
.list { display: grid; gap: 12px; }
.place-card .title-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.place-card h2 { font-size: 1.1rem; }

/* chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--sunken); color: var(--ink-2); }
.chip.c-good, .chip.c-bad, .chip.c-warn { padding-left: 8px; }
.chip.c-good::before, .chip.c-bad::before, .chip.c-warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.c-good { background: var(--good-bg); color: var(--good); }
.chip.c-bad { background: var(--bad-bg); color: var(--bad); }
.chip.c-warn { background: var(--warn-bg); color: var(--warn); }
.c-good { color: var(--good); } .c-bad { color: var(--bad); } .c-warn { color: var(--warn); } .c-muted { color: var(--muted); }

/* score */
.score { flex: none; display: grid; justify-items: center; min-width: 3.4rem; padding: 7px 8px 6px; border-radius: 14px; background: var(--sunken); }
.score b { font-family: var(--display); font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.score small { font-size: .62rem; font-weight: 600; color: var(--muted); margin-top: 3px; }
.score.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font-size: .72rem; font-weight: 600; padding: 10px 8px; }

/* filter pills */
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 8px; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none; font: inherit; font-size: .86rem; font-weight: 600; border: 0; cursor: pointer; padding: 9px 15px; border-radius: 999px;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-1); transition: background .2s, color .2s, transform .2s var(--spring);
}
.pill:active { transform: scale(.94); }
.pill[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.seg { display: inline-flex; background: #ECEEF1; border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { white-space: nowrap; font: inherit; font-size: .85rem; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); box-shadow: 0 3px 10px rgba(255, 65, 65, .25); }

/* buttons */
.btn, .btn-ghost, .btn-danger, .btn-soft {
  font: inherit; font-weight: 650; font-size: .95rem; border-radius: 999px; padding: 13px 22px; cursor: pointer; border: 0;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .2s var(--spring), background .2s, box-shadow .2s;
}
.btn { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 16px rgba(255, 65, 65, .28); }
.btn-soft { background: var(--sunken); color: var(--ink); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-danger { background: var(--bad-bg); color: var(--bad); }
.btn:active, .btn-ghost:active, .btn-danger:active, .btn-soft:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: .85rem; border-radius: 999px; }
.linkish { font: inherit; background: none; border: 0; color: var(--primary); cursor: pointer; padding: 0; font-size: .85rem; font-weight: 600; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* forms */
label.field, div.field { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=time], input:not([type]), input[type=number], input[type=date], input[type=search], select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 12px 18px; width: 100%; min-width: 0; transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
/* Android draws its calendar icon inside the field: less padding on the right so it doesn't cover the year */
input[type=date] { padding-inline: 14px 8px; } input[type=date]::-webkit-datetime-edit { padding: 0; }
input[type=date]::-webkit-calendar-picker-indicator { margin-inline-start: 0; padding: 0; width: 16px; height: 16px; }
/* a long "watch out" note on a chip ends in …; the place page shows all of it */
.caution { max-width: min(100%, 16em); min-width: 0; gap: 4px; }
.caution > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .caution { max-width: min(100%, 30em); } }
select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* a long choice ends in … instead of mid-word */
input:focus, select:focus, textarea:focus { outline: none; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255, 65, 65, .10); }
textarea { min-height: 4.5rem; resize: vertical; border-radius: 18px; }
textarea.meal-notes { min-height: 6rem; }
/* item note: under the price, full width, grows with its text */
.grid2.price-note { grid-template-columns: 1fr; }
.item-note { min-height: 4.6rem; resize: none; overflow: hidden; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 22rem) { .grid2 { grid-template-columns: 1fr; } }
.field-error { color: var(--bad); font-size: .8rem; font-weight: 600; }
.invalid { border-color: var(--bad) !important; background: var(--bad-bg) !important; }
.toggle { display: inline-flex; gap: 10px; align-items: center; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.switch { -webkit-appearance: none; appearance: none; width: 44px; height: 26px; border-radius: 999px; background: #DDDAD4; position: relative; cursor: pointer; transition: background .25s; flex: none; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .3s var(--spring); }
.switch:checked { background: var(--good); }
.switch:checked::after { transform: translateX(18px); }

/* upload */
.drop {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-sm);
  background: var(--sunken); border: 1.5px dashed #D6D3CD; cursor: pointer; transition: background .2s, border-color .2s;
}
.drop:hover { background: #EBE8E3; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .drop-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; box-shadow: var(--shadow-1); font-size: 1.3rem; overflow: hidden; }
.drop .drop-ico img { width: 100%; height: 100%; object-fit: cover; }
.drop strong { display: block; font-size: .95rem; color: var(--ink); }
.drop span { font-size: .82rem; color: var(--muted); font-weight: 500; }
.drop.has-file { background: var(--good-bg); border-color: var(--good); border-style: solid; }
.drop.has-file strong { color: var(--good); }

/* rating */
.stars { display: inline-flex; gap: 4px; }
.stars button { font: inherit; border: 0; background: none; padding: 2px; cursor: pointer; font-size: 1.8rem; line-height: 1; display: inline-flex; transition: transform .25s var(--spring); }
.stars button .ic-star { color: #E3E0DA; transition: color .15s; }
.stars button.on .ic-star, .stars button.half .ic-star + .ic-star { color: var(--star); }
.stars button .ic-star + .ic-star { display: none; } .stars button.half .ic-star + .ic-star { display: block; }
.stars button.pop { animation: pop .35s var(--spring); }
.rating-val { font-weight: 700; min-width: 2.2rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mini-stars { color: var(--star); letter-spacing: 1px; white-space: nowrap; font-size: .9rem; }
.mini-stars b { color: var(--ink-2); font-weight: 650; letter-spacing: 0; margin-left: 4px; font-size: .85rem; }

/* items */
.item { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; padding-top: 0; }
.item-name { font-weight: 600; }
.item-meta { grid-column: 1 / -1; font-size: .84rem; color: var(--muted); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }
.thumbs img { width: 68px; height: 68px; object-fit: cover; border-radius: 12px; }
.thumbs a { display: block; position: relative; }
.thumbs a[data-menu]::after { content: "menu"; position: absolute; left: 4px; bottom: 4px; font-size: .58rem; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: rgba(0,0,0,.55); color: #fff; }
.entry { border-radius: var(--radius-sm); padding: 14px; display: grid; gap: 10px; background: var(--sunken); }
.entry input[type=text], .entry input[type=number] { background: var(--surface); }

/* bars & meters */
.bars { display: grid; gap: 9px; }
.bar { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 3.6rem; gap: 10px; align-items: center; font-size: .85rem; color: inherit; text-decoration: none; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bar-track { height: 8px; border-radius: 999px; background: var(--sunken); position: relative; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--ink); transform-origin: left; animation: grow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.bar-fill.over { background: var(--bad); }
.bar-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--muted); border-radius: 1px; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.meter { display: grid; gap: 6px; }
.meter-track { height: 10px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--good); transform-origin: left; animation: grow .8s var(--ease) both; }
.meter-fill.near { background: var(--warn); }
.meter-fill.over { background: var(--bad); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stats-side { display: grid; gap: 12px; }
.tile { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-1); }
.tile b { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile span { font-size: .8rem; color: var(--muted); font-weight: 500; }

.empty { text-align: center; padding: 32px 8px; color: var(--muted); }
.notice { padding: 12px 14px; background: var(--warn-bg); color: #7A5410; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; text-decoration: none; display: block; }
.charge { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.charge:first-child { border-top: 0; padding-top: 0; }

/* hero (Pick) */
.hero { display: grid; gap: 14px; padding: 4px 2px 2px; }
.hero h1 { font-size: 2.3rem; }

/* Bilal's picks */
.rec { padding: 0; overflow: hidden; gap: 0; align-content: start; } /* a pick stretched to its row's height keeps its content at the top */
.rec-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--sunken); max-width: 100%; }
.rec-body { padding: 16px 18px 18px; display: grid; gap: 10px; align-content: start; }
.rec-dishes { font-size: .9rem; color: var(--ink-2); }
.rec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-actions .btn-soft[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.creator { display: flex; gap: 12px; align-items: center; }
.creator .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); display: grid; place-items: center; color: #fff; font-weight: 750; font-size: 1.1rem; box-shadow: var(--shadow-1); flex: none; }

/* map */
.map-wrap { position: relative; margin-inline: -16px; height: 300px; transition: height .35s var(--ease); }
.map-wrap.expanded { height: calc(100vh - 230px); }
@supports (height: 100dvh) { .map-wrap.expanded { height: calc(100dvh - 230px); } }
#map { position: absolute; inset: 0; background: #EDEBE6; }
@media (min-width: 46rem) { .map-wrap { margin-inline: 0; } #map { border-radius: var(--radius); overflow: hidden; } }
@media (max-width: 46rem) { .map-wrap { box-shadow: inset 0 -1px 0 var(--line), inset 0 1px 0 var(--line); } }
.leaflet-container { font-family: var(--font); }
.leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.7) !important; }
.map-expand { position: absolute; right: 12px; bottom: 12px; z-index: 600; font: inherit; font-size: .82rem; font-weight: 650; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); transition: transform .2s var(--spring); }
.map-expand:active { transform: scale(.94); }
.list-head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 4; }
.list-head input { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-1); }
.pin span {
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font-weight: 750; font-size: .76rem; box-shadow: var(--shadow-2); border: 2px solid #fff;
  animation: drop .55s var(--spring) both; animation-delay: var(--d, 0ms); transition: transform .2s var(--spring);
  white-space: nowrap; transform-origin: center;
}
.pin.dot span { min-width: 16px; width: 16px; height: 16px; padding: 0; background: var(--ink-2); border-width: 3px; font-size: 0; }
.pin.rated span { background: var(--ink); color: #fff; }
.pin.handcut span { box-shadow: 0 0 0 3px var(--good), var(--shadow-2); }
.pin.bilal span { min-width: 24px; width: 24px; height: 24px; padding: 0; font-size: .66rem; background: linear-gradient(135deg, #F58529, #DD2A7B); color: #fff; }
.pin.skip span { background: var(--bad); color: #fff; }
.pin.me span { min-width: 28px; height: 28px; padding: 0; font-size: .9rem; background: var(--surface); }
.pin.active span { transform: scale(1.25); }
.leaflet-marker-icon.pin.active { z-index: 1000 !important; }
.pin.focus span { transform: scale(1.5); box-shadow: 0 0 0 5px var(--primary), 0 0 0 11px rgba(255, 65, 65, .22), 0 6px 18px rgba(255, 65, 65, .45); } /* a thick ring and a soft halo, so it stands out from the green home ring */
@media (min-width: 900px) { .pcard.lit { box-shadow: 0 0 0 2px var(--primary), 0 8px 22px rgba(255, 65, 65, .16); } } /* the card whose pin is lit on the map */
.leaflet-marker-icon.pin.focus { z-index: 999 !important; }
/* a group reads as a little stack of pins, so its count never looks like a score */
.pin.group span { min-width: 36px; height: 36px; padding: 0 8px; background: var(--surface); color: var(--ink); font-size: .85rem; cursor: pointer;
  box-shadow: 5px -5px 0 -2px var(--surface), 5px -5px 0 -.5px rgba(30, 31, 34, .28), var(--shadow-2); }
.pin.group.big span { min-width: 42px; height: 42px; box-shadow: 6px -6px 0 -2px var(--surface), 6px -6px 0 -.5px rgba(30, 31, 34, .28), 0 0 0 4px rgba(30, 31, 34, .1), var(--shadow-2); }
.pin.group.focus span { transform: none; box-shadow: 0 0 0 4px var(--primary), 0 6px 18px rgba(255, 65, 65, .45); } /* ringed, not grown */
.map-wrap.settled .pin span { animation: none; } /* the drop-in plays once, on load (the tap bounce still plays) */
/* Eat: the filter chips stay at the top while the places scroll by */
.places-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin-inline: -16px; padding: 8px 0; background: var(--bg); } /* the notch is covered on Eat (body::before below), so no notch-sized gap in the page */
.places-bar .chip-filters { margin-inline: 0; }
.map-sheet {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 700; max-width: 30rem; margin-inline: auto;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-3); padding: 14px; display: grid; gap: 10px;
  animation: sheet-up .35s var(--ease) both; max-height: calc(100% - 70px); overflow: auto;
}
.sheet-x { position: absolute; top: 8px; right: 10px; border: 0; background: var(--sunken); width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; cursor: pointer; color: var(--ink-2); z-index: 1; }
.sheet-img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 12px; }
.map-sheet .title-row { padding-right: 26px; }
.map-filters { position: absolute; top: 12px; left: 0; right: 0; z-index: 600; }
.map-filters .pills { margin: 0; padding: 0 12px 6px; }

/* sheet */
.sheet { position: fixed; inset: 0; z-index: 1100; background: rgba(23, 24, 26, .32); display: grid; align-items: end; justify-items: center; animation: fade .25s ease both; }
.sheet-panel {
  background: var(--surface); width: 100%; max-width: 44rem; max-height: 92vh; overflow: auto; border-radius: 26px 26px 0 0;
  padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 22px); display: grid; gap: 14px; box-shadow: var(--shadow-3);
  animation: sheet-up .38s var(--ease) both;
}
.sheet-panel::before { content: ""; width: 40px; height: 5px; border-radius: 999px; background: var(--line); justify-self: center; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sheet-body { display: grid; gap: 12px; }

/* sticky save bar on Log; --savebar-bottom and --toast-bottom move up with the didn't-save bar or the photos pill */
body {
  --savebar-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 20px);
  --toast-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 22px);
}
.savebar {
  position: sticky; bottom: var(--savebar-bottom); z-index: 5;
  padding: 8px; border-radius: 20px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-2);
}

#toast {
  position: fixed; left: 50%; z-index: 1200; transform: translateX(-50%);
  bottom: var(--toast-bottom);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 16px; font-weight: 600; font-size: .9rem;
  width: max-content; max-width: calc(100% - 32px); box-shadow: var(--shadow-3); animation: toast-in .35s var(--spring) both;
}

/* loading skeleton */
.skeleton { height: 96px; border-radius: var(--radius); background: linear-gradient(90deg, #EFEDE9 0%, #F8F7F4 50%, #EFEDE9 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }

/* motion */
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-in { from { transform: translate(-50%, 16px) scale(.96); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drop { from { transform: translateY(-18px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.shake { animation: shake .4s ease; }
.view-in > * { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.list > * { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
.leaflet-div-icon.pin, .pin { background: none; border: 0; }
.pin span { position: absolute; left: 0; top: 0; translate: -50% -50%; }

/* logos & photos */
.logo { flex: none; display: grid; place-items: center; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo-md { width: 46px; height: 46px; border-radius: 14px; }
.logo-lg { width: 64px; height: 64px; border-radius: 18px; }
.logo.mono { font-family: var(--display); font-weight: 750; color: var(--ink-2); letter-spacing: -.02em; box-shadow: none; }
.logo-md.mono { font-size: .95rem; } .logo-lg.mono { font-size: 1.3rem; }
.place-card .title-row { align-items: center; }
.place-card.has-cover { padding-top: 0; overflow: hidden; }
.cover { position: relative; margin: 0 -18px; aspect-ratio: 16 / 7; background: var(--sunken); overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
a.card:hover .cover img { transform: scale(1.04); }
.cover-tag { position: absolute; left: 12px; bottom: 10px; font-size: .74rem; font-weight: 650; color: #fff; background: rgba(23,24,26,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 4px 10px; border-radius: 999px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-img { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-2); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; animation: zoom-out 1.2s var(--ease) both; }
@keyframes zoom-out { from { transform: scale(1.08); } to { transform: none; } }
.strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding: 0 18px 4px; }
.strip::-webkit-scrollbar { display: none; }
.strip figure { margin: 0; flex: none; width: 132px; }
.strip img { width: 132px; height: 132px; object-fit: cover; border-radius: 14px; display: block; }
.strip figcaption { font-size: .76rem; color: var(--muted); margin-top: 6px; line-height: 1.3; }
/* logo pins */
.pin.logo-pin span { width: 40px; height: 40px; min-width: 40px; padding: 0; background: #fff; border: 2.5px solid #fff; overflow: visible; display: block; }
.pin.logo-pin img { width: 35px; height: 35px; max-width: none; object-fit: contain; border-radius: 50%; background: #fff; display: block; }
.pin.logo-pin.bilal img { object-fit: cover; }
.pin.logo-pin.bilal span { border-color: #E1306C; }
.pin.logo-pin i { position: absolute; right: -8px; bottom: -6px; font-style: normal; font-size: .64rem; font-weight: 800; color: #fff; background: var(--ink);
  padding: 1px 5px; border-radius: 999px; border: 2px solid #fff; line-height: 1.3; }
.pin.logo-pin.bilal i { background: linear-gradient(135deg, #F58529, #DD2A7B); }
.pin.logo-pin.skip i { background: var(--bad); }
.pin.logo-pin.handcut span { box-shadow: 0 0 0 3px var(--good), var(--shadow-2); }
.spread.page-head { display: flex; }

/* games: quick rate / swipe */
.game-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.game-card { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--ink); color: #fff; text-decoration: none;
  box-shadow: var(--shadow-2); transition: transform .2s var(--spring); }
.game-card:nth-child(2) { background: var(--surface); color: var(--ink); }
.game-card:active { transform: scale(.97); }
.game-card strong { display: block; font-size: .95rem; }
.game-card span:not(.game-ico) { font-size: .78rem; opacity: .7; }
.game-ico { font-size: 1.4rem; }
.deck-wrap { display: grid; gap: 14px; }
.deck-progress { flex: 1; max-width: 55%; height: 6px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.deck-progress span { display: block; height: 100%; background: var(--ink); border-radius: 999px; transition: width .4s var(--ease); }
.deck { position: relative; height: clamp(300px, calc(100vh - 400px), 520px); outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.swipe-card { position: absolute; inset: 0; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; cursor: grab;
  transform: translateY(calc(var(--depth) * 10px)) scale(calc(1 - var(--depth) * .04)); transition: transform .35s var(--ease), opacity .35s;
  animation: rise .35s var(--ease) backwards; } /* backwards, not both: a held keyframe would override the drag transform */
.swipe-card.dragging { transition: none; cursor: grabbing; box-shadow: var(--shadow-3); }
.swipe-card.fly { transition: transform .45s cubic-bezier(.4, 0, .6, 1), opacity .45s; }
.swipe-card.return { animation: rise .35s var(--spring) backwards; }
.sc-inner { display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); height: 100%; }
.sc-media { position: relative; min-height: 0; overflow: hidden; background: var(--sunken); }
.sc-media img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sc-logo-only { display: grid; place-items: center; }
.sc-logo-only .sc-big-logo { width: 46%; height: auto; max-height: 70%; object-fit: contain; border-radius: 28px; background: #fff; padding: 14px; box-shadow: var(--shadow-2); }
.sc-mono { font-family: var(--display); font-size: 5rem; font-weight: 800; color: rgba(23,24,26,.35); }
.sc-logo { position: absolute; left: 14px; bottom: 14px; }
.sc-body { padding: 16px 18px 20px; display: grid; gap: 8px; }
.sc-body h2 { font-size: 1.45rem; }
.stamp { position: absolute; top: 26px; padding: 6px 14px; border: 4px solid; border-radius: 12px; font-family: var(--display); font-weight: 900; font-size: 1.8rem;
  letter-spacing: .06em; opacity: 0; pointer-events: none; background: rgba(255,255,255,.85); }
.stamp-like { left: 22px; color: var(--good); transform: rotate(-14deg); }
.stamp-nope { right: 22px; color: var(--bad); transform: rotate(14deg); }
.stamp-meh { left: 50%; top: 40%; translate: -50% 0; color: var(--warn); }
.deck-controls { display: flex; justify-content: center; align-items: flex-start; gap: 18px; }
.round-btn { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: var(--shadow-2); font-size: 1.6rem; cursor: pointer;
  display: grid; place-items: center; position: relative; transition: transform .2s var(--spring); }
.round-btn small { position: absolute; top: 100%; margin-top: 6px; font-size: .68rem; font-weight: 650; color: var(--muted); white-space: nowrap; }
.round-btn:active { transform: scale(.88); }
.round-btn.nope { color: var(--bad); } .round-btn.like { color: var(--good); } .round-btn.meh { color: var(--warn); width: 52px; height: 52px; margin-top: 6px; }
.round-btn.small-round { width: 44px; height: 44px; font-size: 1.1rem; margin-top: 10px; color: var(--muted); }
.round-btn:disabled { opacity: .35; }
.deck-controls { padding-bottom: 22px; }
.done-card { text-align: center; justify-items: center; padding: 32px 20px; animation: rise .5s var(--spring) both; }
.done-burst { font-size: 3rem; animation: pop .7s var(--spring) both; }
@supports (height: 100dvh) { .deck { height: clamp(300px, calc(100dvh - 400px), 520px); } }

/* ---- bolder motion ---- */
.score.quick { box-shadow: inset 0 0 0 1.5px #E6DCC8; background: #FBF6EC; }
.score.quick small { color: var(--warn); }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes push-in { from { opacity: 0; transform: translateX(40px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
main.view-in.from-right { animation: slide-from-right .38s var(--ease) both; }
main.view-in.from-left { animation: slide-from-left .38s var(--ease) both; }
main.view-in.push { animation: push-in .42s var(--ease) both; }
main.view-in.pop { animation: pop-in .38s var(--ease) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
::view-transition-group(hero), ::view-transition-group(logo), ::view-transition-group(title) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.confetti { position: fixed; inset: 0 0 auto 0; height: 0; z-index: 2000; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: confetti-fall 1.4s cubic-bezier(.25, .6, .4, 1) both; }
@keyframes confetti-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 92vh) rotate(var(--r)); opacity: 0; } }
.ptr { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 50%; margin-left: -20px; z-index: 900; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-2); display: grid; place-items: center; font-size: 1.2rem; opacity: 0; transform: translateY(-60px); pointer-events: none;
  transition: transform .25s var(--ease), opacity .2s; }
.ptr.ready span { animation: pop .4s var(--spring); }
.ptr.spin span { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pin span.bounce { animation: pin-bounce .6s var(--spring) both !important; }
@keyframes pin-bounce { 0% { transform: translateY(0) scale(1.2); } 30% { transform: translateY(-14px) scale(1.25); } 60% { transform: translateY(0) scale(1.15); } 80% { transform: translateY(-4px) scale(1.22); } 100% { transform: scale(1.2); } }
.locate { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-2); font-size: 1rem; cursor: pointer; transition: transform .2s var(--spring); }
.locate:active { transform: scale(.85); }
.place-card { position: relative; }
.place-card:not(.has-cover) .locate { top: 22px; right: 84px; }
.place-card:not(.has-cover) .title-row { padding-right: 44px; }
.version-line { font: inherit; font-size: .78rem; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 10px; justify-self: center; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.changes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .9rem; color: var(--ink-2); }
/* #/me/roadmap: the roadmap board. Phones show one column at a time (.rm-pick); desktop shows them side by side */
.rm-board { display: grid; gap: 14px; align-items: start; }
.rm-col { display: none; gap: 12px; align-content: start; }
.rm-col.on { display: grid; }
.rm-head { display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); }
.rm-head .muted { margin-left: auto; }
.rm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.rm-now .rm-dot { background: var(--primary); }
.rm-built .rm-dot { background: var(--good); }
.rm-card { gap: 6px; }
.rm-card h3 { margin: 4px 0 0; font-size: 1rem; }
.rm-card p { margin: 0; }
.rm-card .chip { justify-self: start; margin-top: 4px; }
.rm-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); }
.rm-ico .ic { width: 18px; height: 18px; }
.rm-now .rm-ico { background: var(--primary-soft); color: var(--primary); }
.rm-built .rm-ico { background: var(--good-bg); color: var(--good); }
.rm-empty { padding: 4px 16px; margin: 0; }
.rm-tabs, .rm-pick { justify-self: start; max-width: 100%; overflow-x: auto; }
/* What's new: the latest release open, then short cards by month; each card's bullets sit behind See details */
.rel-list { display: grid; gap: 22px; }
.rel-month { display: grid; gap: 12px; }
.rel-rail { display: flex; align-items: baseline; gap: 6px; padding: 0 2px; }
.rel-rail b { font-size: 1.05rem; }
.rel-cards { display: grid; gap: 12px; min-width: 0; }
.rel { display: block; } /* a closed card has no gap for its hidden details */
.rel > summary { list-style: none; cursor: pointer; border-radius: 12px; }
.rel > summary::-webkit-details-marker { display: none; }
.rel-top { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.rel-text { display: grid; gap: 4px; min-width: 0; }
.rel-text :is(h2, h3) { margin: 0; }
.rel-text h3 { font-size: 1rem; }
.rel-sum { font-size: .92rem; }
.rel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.rel-more::after { content: "See details"; }
.rel[open] .rel-more::after { content: "Hide details"; }
.rel .changes { margin: 12px 0 0; gap: 8px; font-size: .88rem; }
@media (min-width: 600px) { .rel .changes { margin-left: 44px; } } /* under the title, past the icon */
.rel-new .rm-ico { background: var(--primary-soft); color: var(--primary); }
.rel-fix .rm-ico { background: var(--good-bg); color: var(--good); }
.rel-latest { padding: 22px; }
.rel-latest .rel-text h2 { font-size: 1.3rem; }

/* ---- v2.1 ---- */
.person-ratings { display: grid; gap: 4px; }
.pr-row { display: grid; grid-template-columns: 3.6rem 1fr; align-items: center; gap: 6px; }
.pr-name { font-size: .8rem; font-weight: 650; color: var(--muted); }
.pr-row .stars button { font-size: 1.55rem; }
/* another member's stars (app.js lockedRating): shown, only they can change them */
.pr-row.pr-locked { grid-template-columns: 3.6rem 1fr auto; min-height: 2.3rem; }
.pr-shown { display: flex; align-items: center; gap: 8px; }
.pr-stars { font-size: 1.2rem; letter-spacing: 2px; color: var(--star); } .pr-off { color: #E3E0DA; }
.pr-whose { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.pr-whose svg { width: 13px; height: 13px; }
.item-people { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.item-people span { font-size: .72rem; font-weight: 600; color: var(--ink-2); background: var(--sunken); padding: 2px 8px; border-radius: 999px; }
.people-scores .chip { background: var(--surface); box-shadow: var(--shadow-1); }
.budget-line { gap: 8px; padding: 14px 16px; text-decoration: none; color: inherit; }
.duel-banner { background: linear-gradient(135deg, #17181A, #3A2A4A); }
.duel-option { font: inherit; text-align: inherit; border: 0; cursor: pointer; width: 100%; color: inherit; transition: transform .2s var(--spring), box-shadow .2s; }
.duel-option .title-row { display: flex; gap: 12px; align-items: center; }
.duel-option:active { transform: scale(.97); }
.duel-option.chosen { box-shadow: 0 0 0 3px var(--ink), var(--shadow-2); }
.duel-option:disabled:not(.chosen) { opacity: .5; }
.duel-status { display: flex; gap: 8px; justify-content: center; }
.duel-result .logo { margin-top: 6px; }
.duel-by { margin: -6px 2px 0; color: var(--ink-2); font-weight: 600; }
/* Set up the duel (#/duel/new): the line-up, then search; two columns on desktop */
.duel-setup { display: grid; gap: 14px; align-items: start; }
.duel-h { display: flex; justify-content: space-between; align-items: baseline; }
.duel-h h2, .duel-search h2 { font-size: 1.05rem; margin: 0; }
.duel-slots, .duel-results { display: grid; gap: 8px; }
.duel-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); }
.duel-row-t { display: grid; gap: 3px; min-width: 0; }
.duel-row-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-row-t small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.duel-row .pill-row:empty { display: none; }
.duel-x, .duel-add { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; padding: 0; }
.duel-x { background: var(--sunken); color: var(--ink-2); }
.duel-add { background: #FFF1EE; color: var(--primary); }
.duel-x:active, .duel-add:active { transform: scale(.92); }
.duel-in { white-space: nowrap; }
.duel-empty { border: 1.5px dashed var(--line); border-radius: 16px; min-height: 58px; display: grid; place-items: center; color: var(--muted); font-size: .85rem; padding: 0 12px; text-align: center; }
.duel-tools { display: flex; gap: 18px; }
.duel-tools .muted { color: var(--muted); }
@media (max-width: 600px) { .duel-row-t b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; } } /* phones: the whole name, on two lines */
.duel-need { text-align: center; margin: 0; }
.duel-go { display: grid; gap: 8px; }
@media (min-width: 900px) { .duel-go.savebar { position: static; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* phones keep it pinned above the tabs */
.duel-open { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--warn-bg); }
.duel-open .btn-ghost { flex: none; padding: 8px 16px; }
.duel-search input[type="search"] { width: 100%; }
@media (max-width: 380px) { .duel-row .score small { display: none; } }
@media (min-width: 900px) {
  .duel-setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px 24px; }
  .duel-lineup { grid-column: 1; grid-row: 1; }
  .duel-search { grid-column: 2; grid-row: 1 / span 2; }
  .duel-go { grid-column: 1; grid-row: 2; }
  .duel-results { max-height: 62vh; overflow-y: auto; padding: 2px; }
}
.order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 10px; }
.order-tile { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--sunken); }
.order-tile img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.order-tile .order-ico { width: 52px; height: 52px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; font-size: 1.4rem; }
.order-tile strong { display: block; font-size: .92rem; line-height: 1.25; }
.order-tile .eyebrow { font-size: .66rem; }
.creator-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 12px; }
.creator-card { gap: 8px; }
.creator-card .avatar { width: 42px; height: 42px; font-size: 1rem; }
.pin.bilal.other span { background: linear-gradient(135deg, #1F9254, #0E6B8C); }
.scan { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--sunken); animation: rise .3s var(--ease) both; }
.scan-row { display: flex; gap: 10px; align-items: center; font-size: .9rem; font-weight: 600; }
.scan-row strong { display: block; }
.scan-row span:not(.scan-ico) { font-weight: 500; color: var(--muted); font-size: .84rem; }
.scan-row.done strong { color: var(--good); }
.scan-ico { font-size: 1.3rem; }
.scan-track { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.scan-bar { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 999px; transition: width .3s; }
.entry.from-receipt { box-shadow: inset 3px 0 0 var(--good); }
.draft-notice { display: block; }
.draft-notice .linkish { color: #7A5410; }
.diary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.diary-tile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: block; background: var(--sunken); animation: rise .4s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.diary-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diary-tile > .dt-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: .62rem; font-weight: 650; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the score in its own corner so it never sits on the dish name (hidden while the photo uploads: the tag takes the top) */
.diary-tile > .dt-score { position: absolute; top: 6px; right: 6px; font-size: .66rem; font-weight: 750; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: var(--shadow-1); font-variant-numeric: tabular-nums; }
.diary-tile.nophoto { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.diary-tile.nophoto .cat-ico { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; padding: 8px 0 2px; background: none; box-shadow: none; border-radius: 0; transition: none; }
.diary-tile.nophoto .cat-ico img, .diary-tile.nophoto .cat-ico svg { height: 100%; max-width: 56%; object-fit: contain; }
/* white caption under the icon, so the dish name stays readable at any width (photo tiles keep the dark strip) */
.diary-tile.nophoto > .dt-name { position: static; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px 7px; background: var(--surface); color: var(--ink); white-space: normal; font-size: .7rem; line-height: 1.2; }
.diary-tile.nophoto > .dt-name b { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.diary-tile.nophoto > .dt-name small { font-size: .62rem; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diary-tile > .dt-ph { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; color: var(--muted); }
.diary-tile > .dt-ph svg { width: 28px; height: 28px; }
.diary-tile:has(> img.img-missing) > .dt-ph { display: flex; } /* photo didn't load: a quiet picture icon in its place */

/* quantity */
.name-qty { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.qty { display: inline-flex; align-items: center; background: var(--surface); border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line); }
.entry .qty { background: var(--surface); }
.qty-btn { font: inherit; font-size: 1.2rem; font-weight: 700; width: 38px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 12px; }
.qty-btn:active { transform: scale(.88); }
.qty-btn:disabled { color: var(--line); }
.qty-val { min-width: 1.6rem; text-align: center; font-weight: 750; }
.qty-val.pop { animation: pop .3s var(--spring); }

/* v2.3 */
.chip.c-muted-strong { background: var(--sunken); color: var(--muted); }
.chip-truck { background: #EEF2FB; color: #3553A5; }
.filters { display: grid; gap: 10px; }
.filters .pills { padding-bottom: 2px; }
.summary-card p { color: var(--ink-2); }
.summary-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); font-size: .95rem; }
.hours { display: grid; gap: 6px; }
.hours .today { font-weight: 750; color: var(--ink); }
.hours .spread span:first-child { color: var(--muted); }
.hours .today span:first-child { color: var(--ink); }
.receipt-row { grid-template-columns: 64px 1fr; align-items: center; display: grid; gap: 14px; }
.receipt-thumb img { width: 64px; height: 84px; object-fit: cover; border-radius: 10px; display: block; box-shadow: var(--shadow-1); }

/* ---- v2.4 ---- */
:root { --coral: #FF4141; --coral-bg: #FFECEC; }
.avatar-xs, .avatar-sm, .avatar-md, .avatar-lg, .avatar-xl { display: inline-grid; place-items: center; border-radius: 50%; background: var(--sunken); overflow: hidden; flex: none; }
.avatar-xs { width: 20px; height: 20px; } .avatar-sm { width: 34px; height: 34px; } .avatar-md { width: 44px; height: 44px; } .avatar-lg { width: 72px; height: 72px; } .avatar-xl { width: 104px; height: 104px; }
.avatar-xs img, .avatar-sm img, .avatar-md img, .avatar-lg img, .avatar-xl img { height: 78%; width: auto; }
.photo img { width: 100% !important; height: 100% !important; object-fit: cover; }
.hello { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.hello strong { font-size: 1.05rem; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* a long name: one line, then … */
a.hello, .hello > .stack { min-width: 0; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.who-btn { font: inherit; border: 0; background: var(--sunken); border-radius: var(--radius); padding: 18px 10px; display: grid; justify-items: center; gap: 8px; cursor: pointer; transition: transform .2s var(--spring); }
.who-btn:active { transform: scale(.95); }
.needs-card { text-decoration: none; color: inherit; gap: 6px; box-shadow: 0 0 0 1.5px var(--coral-bg), var(--shadow-1); }
.badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--coral); color: #fff; font-size: .78rem; font-weight: 750; display: grid; place-items: center; }
.three { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 70%); gap: 12px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 10px; scroll-snap-type: x mandatory; }
.three::-webkit-scrollbar { display: none; }
.three-card { scroll-snap-align: start; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; color: inherit; text-decoration: none; display: grid; animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.three-img { width: 100%; height: 110px; object-fit: cover; display: block; }
.three-logo { display: grid; place-items: center; background: var(--sunken); }
.three-body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.three-body .chip { justify-self: start; }
.cat-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 6px; }
.cat-row::-webkit-scrollbar { display: none; }
.cat { flex: none; display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--ink-2); font: inherit; font-size: .78rem; font-weight: 600; background: none; border: 0; cursor: pointer; }
.cat-ico { width: 62px; height: 62px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); display: grid; place-items: center; font-size: 1.9rem; transition: transform .25s var(--spring), box-shadow .2s; }
.cat-ico img { width: 58%; height: 58%; object-fit: contain; }
.cat-ico img[src$=".png"] { width: 72%; height: 72%; }
.cat:active .cat-ico { transform: scale(.9); }
.cat.on { color: var(--coral); }
.cat.on .cat-ico { box-shadow: 0 0 0 2px var(--coral), var(--shadow-1); }
.cat.empty { opacity: .35; }
.browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 16px 6px; }
.browse-grid .cat { animation: rise .4s var(--ease) both; animation-delay: calc(var(--i) * 25ms); }
.browse-grid .cat-ico { width: 72px; height: 72px; font-size: 2.2rem; }
@media (max-width: 399px) { .browse-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } .browse-grid .cat-ico { width: 64px; height: 64px; font-size: 2rem; } }
.pick-row { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.pick-row img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.inbox-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.inbox-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sunken); display: grid; place-items: center; font-size: 1.2rem; }
.profile-head { display: grid; justify-items: center; gap: 8px; padding-top: 6px; }
.profile-head h1 { text-align: center; overflow-wrap: anywhere; } .profile-head h1.long { font-size: 1.5rem; }
.profile-avatar { position: relative; border: 0; background: none; padding: 0; cursor: pointer; }
.profile-avatar .edit-dot { position: absolute; right: 0; bottom: 4px; width: 30px; height: 30px; }
.menu { display: grid; gap: 10px; }
/* Profile: settings as grouped lists (You · Household · More), the value on the right */
.me-main { display: grid; gap: 22px; align-content: start; min-width: 0; }
.set-group { display: grid; gap: 8px; } .set-group > .eyebrow { margin: 4px 6px 0; font-size: .74rem; }
.set-list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.set-row { font: inherit; width: 100%; display: flex; align-items: center; gap: 13px; padding: 13px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row:active { background: var(--sunken); }
.set-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.set-ico { width: 34px; height: 34px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; overflow: hidden; }
.set-ico .ic { width: 18px; height: 18px; }
.set-ico.avatar-sm, .set-row > .avatar-sm { border-radius: 11px; }
.set-label { flex: 1; min-width: 0; display: grid; gap: 1px; } .set-label b { font-weight: 600; font-size: .96rem; }
.set-label small { display: none; font-size: .8rem; color: var(--muted); }
.set-val { font-size: .86rem; color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.set-val .ic { width: 16px; height: 16px; } .set-val > span { display: inline-flex; align-items: center; gap: 5px; }
.set-chev { color: #C4C7CC; font-size: 1.2rem; line-height: 1; }
/* Profile: your taste as three stats split by thin lines */
.taste-all { font-size: .86rem; color: var(--primary); font-weight: 600; }
.taste-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 2px; }
.taste-stat { padding: 2px 8px; display: grid; align-content: start; gap: 2px; justify-items: center; text-align: center; min-width: 0; border-left: 1px solid var(--line); }
.taste-stat:first-child { border-left: 0; }
.taste-badge { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: 8px; }
.taste-badge .ic { width: 16px; height: 16px; }
.taste-k { font-size: .78rem; font-weight: 500; color: var(--muted); line-height: 1.25; max-width: 100%; }
.taste-v { font-size: .94rem; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.taste-none { font-size: .82rem; font-weight: 600; color: var(--ink-2); } /* no value yet: why, not a dash */
.taste-stat { grid-template-rows: auto 1fr auto; } .taste-stat .taste-v { align-self: end; } /* values line up when a label wraps */
/* Profile: taste match, a ring with the %, then two short lists */
.match-top { display: flex; align-items: center; gap: 14px; }
.match-ring { width: 64px; height: 64px; flex: none; position: relative; display: grid; place-items: center; }
.match-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.match-ring circle { fill: none; stroke: #ECEEF1; stroke-width: 7; } .match-ring circle.on { stroke: var(--primary); stroke-linecap: round; }
.match-ring b { font-size: 1.05rem; font-weight: 750; }
.match-pair { display: flex; flex: none; } .match-pair .avatar-sm { width: 26px; height: 26px; border: 2px solid var(--surface); } .match-pair .avatar-sm + .avatar-sm { margin-left: -8px; }
.match-list { display: grid; }
.match-list h4 { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; display: flex; gap: 6px; align-items: center; margin: 4px 0 4px; }
.match-list h4 .ic { width: 14px; height: 14px; }
.match-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.match-list h4 + .match-row { border-top: 0; }
.match-dish { min-width: 0; display: grid; } .match-dish b { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-dish small { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-star { color: var(--star); font-weight: 700; font-size: .82rem; flex: none; }
.match-vs { display: flex; gap: 6px; flex: none; }
.match-score { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 3px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--sunken); }
.match-score .avatar-xs { background: var(--surface); }
.match-score.hi { background: var(--good-bg); color: var(--good); } .match-score.lo { background: var(--bad-bg); color: var(--bad); }
/* Profile → Household */
.hh-sec { display: grid; gap: 10px; } .hh-sec .eyebrow { font-size: .74rem; }
.hh-box { border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; display: block; }
.hh-head { display: flex; justify-content: space-between; padding: 9px 14px; background: var(--sunken); font-size: .72rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.hh-row { font: inherit; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: none; text-align: left; color: var(--ink); min-height: 54px; }
.hh-box > * + * { border-top: 1px solid var(--line); }
button.hh-row { cursor: pointer; }
.hh-row input[type=text] { font: inherit; font-weight: 600; font-size: .98rem; border: 0; background: none; padding: 6px 0; flex: 1; min-width: 0; color: var(--ink); box-shadow: none; }
.hh-row input[type=text]:focus { outline: 0; box-shadow: 0 2px 0 var(--primary); border-radius: 0; }
.hh-removing { background: var(--sunken); } .hh-removing .hh-grow small { white-space: normal; }
.hh-ask { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--sunken); }
.hh-ask-btns { display: flex; gap: 8px; justify-content: flex-end; }
.hh-row .btn-sm { flex: none; }
.hh-you { font-size: .72rem; font-weight: 650; color: var(--muted); background: var(--sunken); padding: 2px 7px; border-radius: 999px; }
.hh-add { color: var(--primary); font-weight: 650; }
.hh-off { opacity: .55; }
.hh-new { gap: 8px; } .hh-new input[type=text] { flex: 1 1 0; min-width: 0; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 500; } .hh-new .hh-plus { color: var(--primary); width: 26px; flex: none; } .hh-new .btn-sm { flex: none; padding-left: 14px; padding-right: 14px; }
.hh-help { padding: 0 14px 12px; margin: 0; border-top: 0; }
label.eyebrow { display: block; }
.hh-plus { width: 34px; text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 1; }
.hh-ico { width: 34px; height: 34px; border-radius: 11px; background: var(--sunken); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.hh-ico .ic { width: 18px; height: 18px; }
.hh-grow { flex: 1; min-width: 0; display: grid; gap: 1px; font-weight: 600; font-size: .92rem; }
.hh-grow small { font-size: .8rem; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-signout { color: var(--bad); }
.hh-cancel { flex: none; min-width: 5.5rem; }
.hh-show { display: block; font-size: .85rem; min-height: 32px; padding: 0; text-align: left; }
.hh-linkbox > * + * { border-top: 0; }
.hh-linkbox { display: grid; gap: 10px; padding: 12px; }
.hh-linkbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.link-copy { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.link-copy .fr-linkbox { flex: 1; min-width: 0; }
.hh-invite { color: var(--primary); background: var(--primary-soft); }
/* Data & backups: Download my log, Delete my account (its sheet lists what goes and what stays) */
.bk-data .hh-grow small, .del-acct .hh-grow small { white-space: normal; }
.claude-rates .hh-grow small { white-space: normal; }
.del-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .92rem; line-height: 1.4; }
.del-acct select, .del-acct input[type=text] { font-size: 1rem; }
/* Profile → Food budget: one big amount */
.budget-amount { display: grid; justify-items: center; gap: 4px; padding: 10px 0 2px; }
.budget-big { display: flex; align-items: baseline; gap: 4px; font-weight: 750; letter-spacing: -.03em; }
.budget-cur { font-size: 2rem; color: var(--muted); }
input.budget-input { font: inherit; font-size: 3.2rem; font-weight: 750; letter-spacing: -.03em; width: 5.2ch; text-align: center; border: 0; border-bottom: 2.5px solid var(--primary); border-radius: 0; background: none; padding: 0 4px; color: var(--ink); box-shadow: none; -moz-appearance: textfield; }
input.budget-input::-webkit-outer-spin-button, .budget-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.budget-input:focus { outline: 0; box-shadow: none; background: none; }
.budget-per { font-size: .9rem; color: var(--muted); font-weight: 600; }
.budget-covers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.budget-covers span { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink-2); }
.budget-covers .ic { width: 14px; height: 14px; color: var(--good); }
.budget-month { background: var(--sunken); border-radius: 16px; padding: 14px 16px; display: grid; gap: 9px; }
.budget-month .spread span { font-size: .84rem; color: var(--muted); font-weight: 600; }
.budget-off { justify-self: center; color: var(--muted); font-size: .9rem; }
/* Profile → Backups: one icon, one line */
.bk { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 6px 6px 0; }
.bk-halo { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--good-bg); color: var(--good); margin-bottom: 6px; }
.bk-halo .ic { width: 38px; height: 38px; stroke-width: 2.2; } .bk-halo.warn { background: var(--warn-bg); color: var(--warn); }
.bk h3 { font-size: 1.2rem; } .bk p { font-size: .92rem; line-height: 1.45; max-width: 22rem; }
.bk-ver { text-align: center; font-size: .78rem; color: #B0B3B8; }
.menu-row { font: inherit; display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: center; text-align: left; padding: 15px 16px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer; color: var(--ink-2); font-weight: 600; }
.menu-row img { width: 24px; height: 24px; }
.menu-row:active { transform: scale(.98); }
.big-num { font-family: var(--display); font-size: 1.6rem; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.avatar-pick { font: inherit; border: 0; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-1); padding: 16px 6px 10px; display: grid; justify-items: center; gap: 8px; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.avatar-pick.on { box-shadow: 0 0 0 2.5px var(--coral), var(--shadow-1); }
/* Your character, one step at a time: the step row, this step's choices, Back / Next */
.avatar-group > [hidden] { display: none; }
.avatar-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.avatar-step-dot { font: inherit; border: 0; background: none; padding: 6px 2px; display: grid; justify-items: center; gap: 4px; cursor: pointer; color: var(--muted); font-size: .78rem; font-weight: 600; }
.avatar-step-dot b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); font-size: .85rem; transition: background .2s, color .2s; }
.avatar-step-dot.done b { background: var(--ink-2); color: var(--surface); }
.avatar-step-dot.on { color: var(--ink); } .avatar-step-dot.on b { background: var(--coral); color: #fff; }
.avatar-sum { display: none; margin: 0; text-align: center; }
.color-pick { font: inherit; border: 0; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-1); padding: 16px 6px 12px; display: grid; justify-items: center; gap: 10px; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.color-pick.on { box-shadow: 0 0 0 2.5px var(--sw), var(--shadow-1); }
.color-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.acc-groups, .acc-group { display: grid; gap: 12px; }
.acc-groups { gap: 18px; }
.avatar-nav { display: flex; justify-content: space-between; gap: 12px; }
.avatar-nav > * { flex: 1; max-width: 12rem; }
:where(body[data-view="me-avatar"]) .char-preview { position: sticky; top: 0; z-index: 2; margin-inline: -16px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 0 6px; background: var(--bg); } /* phones: the preview stays in view while the accessories scroll */
.chip.c-love { background: #E9F7EF; color: #1B7F47; }
.person-chip { gap: 6px; padding-left: 4px; }
/* detail page (from the MQHalal design) */
.detail-hero { position: relative; margin: calc(-20px - env(safe-area-inset-top, 0px)) -16px 0; height: 260px; background: var(--sunken); overflow: hidden; border-radius: 0 0 26px 26px; }
.detail-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; animation: zoom-out 1.2s var(--ease) both; }
.detail-hero-logo { height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, #FFF4EF, #F3F1EC); }
.logo-xl { width: 110px; height: 110px; border-radius: 28px; }
.hero-btn { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: var(--shadow-2); display: grid; place-items: center; cursor: pointer; font-size: 1.15rem; color: var(--muted); transition: transform .25s var(--spring); }
.hero-btn.back { left: 16px; } .hero-btn.back img { width: 16px; transform: rotate(90deg); }
.hero-btn.fav { right: 16px; } .hero-btn.fav.on { color: var(--coral); }
.hero-btn.pop { animation: pop .4s var(--spring); }
.detail-hero .cover-tag { bottom: 14px; left: 16px; }
@media (min-width: 46rem) { .detail-hero { margin-inline: 0; border-radius: 26px; margin-top: 0; } }
.detail-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.detail-title > .row { align-items: flex-start; }
/* a long name stops at 3 lines; when it's cut, the name becomes a button that opens the rest */
.dt-name-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.detail-title h1.open .dt-name-txt { -webkit-line-clamp: unset; }
.dt-name-btn { display: block; font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: pointer; border-radius: 6px; }
.dt-name-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 899px) { .detail-title h1.long { font-size: 1.5rem; } }
.detail-score { display: grid; justify-items: end; flex: none; min-width: 4rem; text-align: right; } /* "2 dishes" stays on one line */
.detail-score .star { color: var(--star); }
.detail-score b { font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.about-text { color: var(--ink-2); line-height: 1.55; }
.glance summary { cursor: pointer; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
.dist-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--sunken); color: var(--ink-2); font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.address-card { display: grid; gap: 8px; text-decoration: none; color: inherit; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 10px 10px 12px; }
.mini-map { height: 130px; border-radius: 14px; overflow: hidden; background: #EDEBE6; pointer-events: none; }
.social-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
.social-btn { flex: none; display: grid; justify-items: center; gap: 4px; width: 66px; padding: 10px 4px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink-2); }
.social-btn span { font-size: 1.3rem; } .social-btn small { font-size: .66rem; font-weight: 650; }
.hours-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; padding: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.hours-day, .hours-time { padding: 9px 10px; border-radius: 10px; font-size: .84rem; text-align: center; }
.hours-day { background: var(--sunken); color: var(--ink-2); font-weight: 600; }
.hours-time.open { background: #E3F3E8; color: #1B6B3D; font-weight: 650; }
.hours-time.closed { background: #F9DCDC; color: #A12C2C; font-weight: 650; }
.hours-day.today, .hours-time.today { box-shadow: inset 0 0 0 2px var(--ink); }
.featured-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 8px; }
.featured { flex: none; width: 150px; margin: 0; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-1); overflow: hidden; }
.featured img { width: 100%; height: 110px; object-fit: cover; display: block; }
.featured figcaption { padding: 8px 10px 10px; display: grid; gap: 2px; font-size: .84rem; }
/* amenities card: yes/no tiles, sourcing list, banners */
.amenities { gap: 12px; }
.am-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.am-fact { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink-2); }
.am-fact .ic { width: 22px; height: 22px; margin-bottom: 4px; }
.am-fact-t { font-size: .8rem; font-weight: 600; color: var(--ink); }
.am-fact-s { font-size: .75rem; font-weight: 600; }
.am-fact.good { background: var(--good-bg); color: var(--good); }
.am-fact.warn { background: var(--warn-bg); color: var(--warn); }
.am-fact.bad { background: var(--bad-bg); color: var(--bad); }
.am-fact.unk { background: none; border: 1.5px dashed var(--line); color: var(--muted); }
.am-fact.unk .am-fact-t { color: var(--ink-2); }
.am-rows { border-top: 1px solid var(--line); }
.am-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.am-row:last-child { border-bottom: 0; padding-bottom: 0; }
.am-k { width: 5.5rem; flex: none; font-size: .82rem; color: var(--ink-2); }
.am-v { flex: 1; font-weight: 600; min-width: 0; }
.am-v.none { color: var(--muted); font-weight: 500; }
.am-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); font-size: .85rem; line-height: 1.4; }
.am-note .ic { margin-top: 1px; }
.am-note.warn { background: var(--warn-bg); color: #7A5410; }
.am-note.bad { background: var(--bad); color: #fff; }
.am-bc { display: grid; gap: 3px; min-width: 0; }
.am-bc small { opacity: .9; font-size: .8rem; }
.am-bc-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.am-bc a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.am-auto { display: grid; gap: 8px; margin: 8px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bad-bg); font-size: .85rem; }
.am-manual { display: contents; }
.am-manual > .field { padding: 10px 0; border-top: 1px solid var(--line); }
/* amenities sheet: grouped sections, Save stays in view */
.am-sheet, .am-col { display: grid; gap: 12px; align-content: start; }
.am-cols { display: grid; gap: 12px; }
.am-grp { background: var(--bg); border-radius: 18px; padding: 4px 14px; }
.am-grp h4 { margin: 12px 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.am-grp > .field, .am-q { padding: 10px 0; }
.am-grp > :is(.field, .am-q) + :is(.field, .am-q) { border-top: 1px solid var(--line); }
.am-q .seg button { padding: 7px 11px; }
.am-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; font-weight: 600; }
.am-q .toggle { width: 100%; justify-content: space-between; flex-direction: row-reverse; color: var(--ink); }
.am-grp .field .small { display: flex; align-items: center; gap: 4px; }
.am-links summary { display: flex; justify-content: space-between; padding: 12px 0; font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none; }
.am-links summary::-webkit-details-marker { display: none; }
.am-links summary .muted { font-weight: 500; font-size: .85rem; }
.am-links .field { padding-bottom: 10px; }
.am-foot { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom, 0px)); margin: 0 -18px calc(-22px - env(safe-area-inset-bottom, 0px)); padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 16px); background: var(--surface); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.am-foot .btn { width: 100%; }
@media (max-width: 22rem) { .am-q:has(.seg) { flex-direction: column; align-items: flex-start; } }
@media (min-width: 900px) {
  .sheet-panel:has(.am-sheet) { max-width: 50rem; }
  .am-cols { grid-template-columns: 1fr 1fr; align-items: start; }
  .am-foot { bottom: -24px; margin: 0 -24px -24px; padding: 14px 24px; }
  .am-foot .btn { width: auto; padding-inline: 32px; }
}
.review-card .review-stars { color: var(--star); font-weight: 750; }
.big-cta.quiet { background: var(--sunken); color: var(--ink); box-shadow: none; }
.big-cta { background: var(--coral); box-shadow: 0 8px 22px rgba(240, 78, 78, .3); padding: 16px; font-size: 1.02rem; border-radius: 18px; }
.recent-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; }
.recent { flex: none; font: inherit; display: grid; justify-items: center; gap: 6px; width: 76px; border: 0; background: none; cursor: pointer; font-size: .72rem; font-weight: 600; color: var(--ink-2); text-align: center; }
.recent span:last-child { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.2; width: 100%; }

/* v2.4.1: Figma food icons + burger Lottie */
.burger-anim { display: inline-block; width: 56px; height: 52px; }
.burger-anim svg { display: block; }
.scan-row .burger-anim.scan-ico { width: 40px; height: 37px; flex: none; }
.loading-burger { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 0 12px; animation: fade .3s ease both; }
.loading-burger .burger-anim { width: 84px; height: 77px; }

/* ===== v2.5: MQHalal-style Eat screen ===== */
/* characters are tall (spoon/fork/knife); in small circles crop to the face */
.avatar-xs, .avatar-sm, .avatar-md { position: relative; }
.avatar-xs img, .avatar-sm img, .avatar-md img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }
.avatar-md { width: 48px; height: 48px; }
.eat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 0; }
.bell { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
  display: grid; place-items: center; color: var(--ink); text-decoration: none; flex: none; transition: transform .2s var(--spring); }
.bell:active { transform: scale(.9); }
.bell-ico svg { width: 22px; height: 22px; display: block; }
.bell-count { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff;
  font-size: .7rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2.5px var(--bg); animation: pop .5s var(--spring) both; }
.search-pill { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1); cursor: text; }
.search-pill:focus-within { box-shadow: 0 0 0 2px var(--coral), var(--shadow-1); }
.search-ico { color: var(--coral); display: grid; } .search-ico svg { width: 22px; height: 22px; }
.search-pill input { border: 0; background: none; box-shadow: none; padding: 0; height: 100%; flex: 1; min-width: 0; font-size: 1rem; outline: none; }
.budget-line { padding: 12px 16px; gap: 7px; }
.budget-line .meter-track { height: 6px; }

.meal-title { position: relative; display: inline-flex; align-items: center; }
.meal-select { appearance: none; -webkit-appearance: none; border: 0; background: none; box-shadow: none; font: inherit; font-family: var(--display);
  font-size: 1.25rem; font-weight: 750; letter-spacing: -.01em; color: var(--ink); padding: 0 22px 0 0; height: auto; cursor: pointer; }
.meal-caret { position: absolute; right: 2px; pointer-events: none; color: var(--coral); font-size: .9rem; }
.mini-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 1rem; cursor: pointer; display: grid; place-items: center; }
.mini-btn:active { transform: scale(.88); }

.due-link { display: block; margin: -2px 0 2px; } /* "3 hand-cut places need re-checking" under the count (app.js) */
.picks-rule { margin: -4px 4px 6px; } /* "Hand-cut chicken only" above the picks (app.js drawPicks) */
.picks-none { margin: 0; padding: 2px 4px 6px; } /* nothing fits this meal (app.js drawPicks) */
.picks.is-empty { display: block; overflow: visible; }
.picks { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 12px; scroll-snap-type: x mandatory; }
.picks::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .picks:has(> .pick-card:only-child) { grid-auto-columns: 100%; } } /* one pick: the whole width */
.pick-card { scroll-snap-align: start; color: inherit; text-decoration: none; display: grid; animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.pick-media { position: relative; height: 172px; border-radius: 18px; overflow: hidden; background: var(--sunken); display: grid; place-items: center; }
.pick-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-media .logo img { width: 100%; height: 100%; object-fit: contain; }
.pick-media > .gal-slide { position: absolute; inset: 0; }
.pick-media .gal-slide img { position: relative; object-fit: contain; }
.pick-emoji { font-size: 2.6rem; }
.pick-label { position: absolute; top: 10px; left: 10px; font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-1); }
.pick-panel { position: relative; margin: -46px 10px 0; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-2); padding: 12px 14px; display: grid; gap: 5px; min-width: 0; }
.pick-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pick-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-title { align-items: flex-start; } .pick-name .nowrap { white-space: nowrap; } .pick-name .status-dot { display: inline-block; vertical-align: middle; margin-bottom: 2px; }
.pick-title > .status-dot { margin-top: 7px; } /* a long name's dot, beside it on the first line */
.pick-title .pick-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.25; flex: 0 1 auto; min-width: 0; }
.chip.halal-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; text-align: left; border-radius: 14px; } /* the whole note, up to 2 lines */
.pick-sub { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spacer { flex: 1; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.status-dot.open { background: #34C759; } .status-dot.closing { background: var(--star); } .status-dot.closed { background: #C7C8CC; }
.status-dot.unknown { background: none; box-shadow: inset 0 0 0 1.5px #C7C8CC; }
.rate-badge { font-size: .76rem; font-weight: 750; padding: 3px 8px; border-radius: 999px; background: #FFF6E5; color: #8A5A12; white-space: nowrap; flex: none; }
.rate-badge.none { background: var(--sunken); color: var(--muted); }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-sm { font-size: .72rem; font-weight: 650; padding: 4px 9px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); white-space: nowrap; }
.pill-sm.coral { background: var(--coral); color: #fff; }
.pill-sm.good { background: var(--good-bg); color: var(--good); } .pill-sm.warn { background: var(--warn-bg); color: var(--warn); } .pill-sm.bad { background: var(--bad-bg); color: var(--bad); }

.chip-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 4px; }
.chip-filters::-webkit-scrollbar { display: none; }
.fchip { flex: none; font: inherit; font-size: .82rem; font-weight: 650; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .15s var(--spring); }
.fchip:active { transform: scale(.94); }
.fchip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.fchip-main[aria-pressed="true"] { background: var(--coral); }
.sort-chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 650; padding: 7px 10px 7px 14px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); white-space: nowrap; cursor: pointer; }
.sort-chip:active { transform: scale(.94); }
.sort-chip:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.sort-chip select { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0; }
.sort-caret { display: grid; place-items: center; color: var(--ink-2); }
.sort-caret svg { width: 14px; height: 14px; }
.places-count { min-height: 34px; }
.stats-more { display: block; margin-top: 12px; padding: 4px 0; }
.seg-scroll { overflow-x: auto; scrollbar-width: none; } .seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll .seg { min-width: max-content; }

/* place card: same parts, same order, every time */
.pcard { padding: 0; gap: 0; overflow: hidden; display: grid; color: inherit; text-decoration: none; }
.pc-media { position: relative; aspect-ratio: 16 / 7; display: grid; place-items: center; overflow: hidden; }
.pc-media .cover { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; }
.pc-media .rate-badge { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.95); box-shadow: var(--shadow-1); color: var(--ink); }
.pc-media .rate-badge.none { color: var(--muted); }
/* how sure a score is: a thin score (quick, or under 3 rated dishes) is softer and says its count */
.rate-badge.few { font-weight: 650; display: inline-flex; align-items: center; }
.pc-media .rate-badge.few { color: var(--ink-2); }
.rate-badge small { font-size: .68rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.score.few b, .detail-score.few b { color: var(--ink-2); font-weight: 650; }
.fr-score.few b { font-weight: 600; }
.pc-fav { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--coral); display: grid; place-items: center; font-size: .95rem; box-shadow: var(--shadow-1); }
.pc-body { padding: 12px 16px 14px; display: grid; gap: 7px; min-width: 0; }
.pc-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-title h2 { font-size: 1.06rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-sm { width: 28px; height: 28px; border-radius: 9px; } .logo-sm.mono { font-size: .7rem; }
.pc-sub, .pc-get { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.pc-sub { color: var(--muted); }

/* the map gets its own stacking context so Leaflet's high z-index pins can't paint over the tab bar or sheets */
.map-wrap { isolation: isolate; }
#view > .seg { display: flex; } #view > .seg button { flex: 1; }
.map-wrap { height: 230px; }
.seg-scroll .seg { display: flex; min-width: 100%; } .seg-scroll .seg button { flex: 1; padding: 7px 6px; }

/* ===== v2.6 ===== */
.meal-title { gap: 6px; padding: 7px 12px 7px 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--coral-bg), var(--shadow-1); cursor: pointer; }
.meal-title:active { transform: scale(.97); }
.meal-select { font-size: 1.08rem; padding: 0; }
.meal-caret { position: static; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); color: #fff; }
.meal-caret svg { width: 14px; height: 14px; }

.gal { display: block; }
.gal-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.gal-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.gal-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); transition: width .2s, background .2s; }
.gal-dots i.on { width: 16px; border-radius: 3px; background: #fff; }

.dish-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 2px -16px 0; padding: 2px 16px 2px; }
.dish-strip::-webkit-scrollbar { display: none; }
.dish-tile { flex: 0 0 96px; display: grid; gap: 3px; min-width: 0; }
.dish-tile img, .dish-ph { width: 96px; height: 72px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--sunken); }
.dish-ph .cat-ico { width: 44px; height: 44px; font-size: 1.4rem; box-shadow: none; }
.dish-name { font-size: .76rem; font-weight: 650; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish-meta { font-size: .7rem; color: var(--muted); }

.recap { gap: 14px; }
.recap-head { display: flex; align-items: center; justify-content: space-between; }
.recap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.recap-stat { background: var(--sunken); border-radius: 14px; padding: 10px 8px; display: grid; justify-items: center; gap: 1px; }
.recap-stat b { font-family: var(--display); font-size: 1.25rem; }
.recap-stat span { font-size: .72rem; color: var(--muted); }
.recap-hls { display: grid; gap: 8px; }
.recap-hl { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--sunken); }
.recap-hl.bad { background: var(--bad-bg); }
.recap-hl strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-hl-ico { font-size: 1.2rem; }
.recap-rows { display: grid; }
.recap-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.recap-row strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* card photos: taller frame, whole photo visible, blurred fill behind */
.pc-media { aspect-ratio: 16 / 10; }
.gal-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; scroll-snap-align: center; background: var(--sunken); }
.gal-slide::before { content: ""; position: absolute; inset: -20px; background: var(--bg) center / cover no-repeat; filter: blur(18px) saturate(1.2); opacity: .55; }
.pc-media .gal-slide img, .gal-track .gal-slide img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.pc-media .cover > .gal-slide { height: 100%; }
.entry.not-ours .person-ratings, .entry.not-ours .stars { display: none; }



.round-btn .ico { display: grid; place-items: center; }
.round-btn .ico svg { width: 26px; height: 26px; }
.round-btn.small-round .ico svg { width: 20px; height: 20px; }
.closed-notice, .boycott-notice { background: var(--bad-bg); color: var(--bad); }
.boycott-notice { overflow-wrap: anywhere; }
.boycott-log-note { margin: -6px 0 0; }
.photo-credit { position: absolute; right: 8px; bottom: 6px; max-width: 70%; font-size: .62rem; color: #fff; background: rgba(0,0,0,.45); padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v2.12: restaurant menus */
.menu-card { gap: 10px; }
.menu-list { display: grid; gap: 14px; max-height: 520px; overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }
.menu-cat h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
.menu-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.menu-row:first-of-type { border-top: 0; }
.menu-row.had .menu-text strong { color: var(--good); }
.menu-img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; background: var(--sunken); }
.menu-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.menu-text strong { font-size: .92rem; }
.menu-price { font-weight: 650; font-size: .88rem; white-space: nowrap; }
.menu-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-had { font-size: .74rem; font-weight: 600; color: var(--good); }
.menu-save { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--sunken); font-size: 1.1rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.menu-save.on { background: var(--coral); color: #fff; }
.item-comments { grid-column: 1 / -1; display: grid; gap: 2px; margin-top: 2px; }
.item-comments p { margin: 0; font-size: .8rem; color: var(--ink-2); }
.item-comments b { font-weight: 650; }

/* v2.17: Quick rate is drag-only; the card carries the date, price, who ate it and your note */
.rate-title { display: flex; align-items: baseline; gap: 10px; }
.rate-title h1 { font-size: 1.3rem; margin: 0; }
.rate-head { display: flex; align-items: center; gap: 10px; }
.rate-head .deck-progress { max-width: none; }
.rate-count { font-size: .8rem; font-weight: 650; color: var(--muted); white-space: nowrap; }
.rate-undo { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.rate-undo .ico svg { width: 18px; height: 18px; display: block; }
.rate-undo:disabled { opacity: .35; }
.rate-deck { height: clamp(380px, calc(100vh - 250px), 600px); }
@supports (height: 100dvh) { .rate-deck { height: clamp(380px, calc(100dvh - 250px), 600px); } }
.rate-deck .sc-inner { grid-template-rows: minmax(120px, 1fr) auto; }
.rate-deck .sc-body { padding: 14px 16px 16px; gap: 8px; }
.rate-deck .sc-body h2 { font-size: 1.3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rate-deck .sc-body p { margin: 0; }
.sc-chip { position: absolute; font: inherit; font-size: .78rem; font-weight: 650; padding: 5px 10px; border-radius: 999px; border: 0;
  background: rgba(23,24,26,.62); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sc-date { top: 12px; left: 12px; }
.sc-price { top: 12px; right: 12px; background: var(--good); }
.sc-flag { bottom: 12px; right: 12px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; cursor: pointer; }
.sc-flag .ico svg { width: 16px; height: 16px; display: block; }
.sc-who .seg { width: 100%; flex-wrap: wrap; } /* the card is a fixed width: names wrap to a second row instead of stretching it */
.sc-who .seg button { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 7px 10px; } /* a very long name is cut with an ellipsis, never wider than the card */
.sc-note-add, .sc-note-text { font: inherit; border: 0; background: none; padding: 4px 0; cursor: pointer; text-align: left; color: var(--muted); font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
.sc-note-add .ico svg { width: 16px; height: 16px; display: block; }
.sc-note-text { color: var(--ink); font-style: italic; background: var(--sunken); border-radius: 10px; padding: 8px 12px; width: 100%; }
.sc-note input { width: 100%; }
.rate-stamp { position: absolute; top: 22%; left: 50%; translate: -50% 0; rotate: -8deg; padding: 6px 16px; border: 4px solid currentColor; border-radius: 14px;
  font-family: var(--display); font-weight: 900; font-size: 1.7rem; letter-spacing: .03em; white-space: nowrap; background: rgba(255,255,255,.9);
  opacity: 0; pointer-events: none; transition: opacity .12s, scale .12s; scale: .9; }
.rate-stamp[class*=" z-"] { opacity: 1; scale: 1; }
.rate-stamp.z-hate { color: #E03131; } .rate-stamp.z-nope { color: #F76707; } .rate-stamp.z-meh { color: #C98A00; }
.rate-stamp.z-like { color: #5C9A0E; } .rate-stamp.z-love { color: #2B9348; scale: 1.12; } .rate-stamp.z-skip, .rate-stamp.z-report { color: var(--muted); }
.rate-hint { text-align: center; font-size: .8rem; color: var(--muted); margin: 0; }
.rate-hint:not([hidden]) + .rate-deck { height: clamp(340px, calc(100vh - 290px), 600px); }
@supports (height: 100dvh) { .rate-hint:not([hidden]) + .rate-deck { height: clamp(340px, calc(100dvh - 290px), 600px); } }
/* Quick rate feel: the card glows toward where it's headed (--tc colour, --ta 0..1 strength) */
.rate-deck .swipe-card { --tc: 0 0 0; --ta: 0;
  box-shadow: 0 0 0 calc(var(--ta) * 4px) rgb(var(--tc) / min(1, calc(var(--ta) * 1.6))), 0 0 calc(var(--ta) * 44px) rgb(var(--tc) / calc(var(--ta) * .5)), var(--shadow-2); }
.rate-deck .swipe-card.dragging { box-shadow: 0 0 0 calc(var(--ta) * 4px) rgb(var(--tc) / min(1, calc(var(--ta) * 1.6))), 0 0 calc(var(--ta) * 44px) rgb(var(--tc) / calc(var(--ta) * .5)), var(--shadow-3); }
.rate-deck .swipe-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgb(var(--tc) / calc(var(--ta) * .28)), rgb(var(--tc) / calc(var(--ta) * .08)) 60%); }
.rate-deck .rate-stamp { z-index: 2; display: grid; justify-items: center; line-height: 1.1; }
.rate-stamp small { font-family: var(--font); font-size: .72rem; font-weight: 700; letter-spacing: 0; opacity: .8; margin-top: 2px; }
/* Better or worse (a showdown card in Quick rate): the dish just rated beside one of yours like it, drag-only */
.rate-stamp.z-better { color: #5C9A0E; } .rate-stamp.z-worse { color: #F76707; } .rate-stamp.z-same { color: #C98A00; } .rate-stamp.z-pass { color: var(--muted); }
.rate-deck .sd-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; container-type: size; }
.rate-deck .sd-inner .sc-body { padding: 4px 16px 0; text-align: center; }
.rate-deck .sd-inner .sc-body p { color: var(--ink-2); font-size: .9rem; }
.sd-top, .sd-same { justify-self: center; font-size: .82rem; font-weight: 650; color: var(--ink-2); }
.sd-top { padding: 14px 0 6px; }
.sd-same { padding: 8px 0 16px; }
@container (max-height: 400px) { .sd-inner .sc-body p { display: none; } .sd-top { padding-top: 8px; } .sd-same { padding-bottom: 10px; } }
.sd-pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; align-content: center; gap: 12px; padding: 0 16px; margin-top: 12px; min-height: 0; width: 100%; max-width: 460px; justify-self: center; }
.sd-dish { display: grid; gap: 3px; min-width: 0; align-content: center; }
.sd-tag { font-size: .75rem; font-weight: 650; color: var(--muted); margin-bottom: 3px; }
.sd-dish:last-child .sd-tag { color: var(--primary); }
.sd-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-ways { display: flex; justify-content: space-between; gap: 6px; padding: 14px 12px 0; font-size: .8rem; font-weight: 650; }
.sd-way { display: flex; min-width: 0; max-width: 52%; white-space: pre; }
.sd-way.sd-old { color: var(--ink-2); } .sd-way.sd-new { color: var(--primary); justify-content: flex-end; }
.sd-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sd-fix { flex: none; }
.sd-way.sd-old .sd-fix:first-child { margin-right: 4px; }
.sd-media { justify-self: center; width: 100%; aspect-ratio: 1; max-height: max(84px, calc(100cqh - 300px)); border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); display: grid; place-items: center; margin-bottom: 5px; }
.sd-media img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sd-media .sd-logo { width: 58%; height: 58%; object-fit: contain; border-radius: 16px; background: #fff; padding: 8px; box-shadow: var(--shadow-1); }
.sd-media .sc-mono { width: 100%; height: 100%; display: grid; place-items: center; font-size: 3rem; }
.sd-dish strong { font-size: .95rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-dish .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); width: 34px; height: 34px; border-radius: 50%; background: var(--sunken); color: var(--ink-2); display: grid; place-items: center; font-size: .78rem; font-weight: 750; box-shadow: 0 0 0 4px var(--surface); }
@media (min-width: 900px) { .sd-dish strong { font-size: 1.02rem; } .sd-dish .small { font-size: .85rem; } .sd-tag { font-size: .8rem; } }
.rate-deck .sd-inner .sc-body p strong { font-weight: 700; }
.rate-stamp.z-love, .rate-stamp.z-hate { animation: stamp-pop .28s var(--spring, ease-out); }
.rate-stamp.z-hate { scale: 1.12; }
.rate-stamp.z-forget { color: #6B7280; }
@keyframes stamp-pop { 0% { scale: .9; } 55% { scale: 1.28; } 100% { scale: 1.12; } }
.sc-cam { bottom: 12px; right: 12px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.sc-media:has(.sc-flag) .sc-cam { right: 54px; }
.sc-cam .ic { width: 17px; height: 17px; }
.sc-cam.busy { opacity: .55; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .rate-stamp.z-love, .rate-stamp.z-hate { animation: none; } }

/* ---------- 2.0: sign in and households ---------- */
body.signing-in .tabs { display: none; }
.welcome-foods { overflow: hidden; margin: 0 -16px; padding: 10px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.welcome-belt { display: flex; width: max-content; animation: belt 45s linear infinite; }
.welcome-food { margin-right: 12px; animation: pop-in .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.welcome-food img { display: block; width: 52px; height: 52px; padding: 9px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); rotate: -6deg; animation: bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.welcome-food:nth-child(even) img { rotate: 5deg; }
/* hovering the bottom button takes a bite out of its corner, then it grows back */
@property --bite { syntax: '<length>'; inherits: false; initial-value: 0px; }
.welcome-again { --bite: 0px;
  -webkit-mask: radial-gradient(circle at calc(100% - 46px) -6px, transparent var(--bite), #000 calc(var(--bite) + .5px)),
    radial-gradient(circle at calc(100% - 24px) -8px, transparent calc(var(--bite) * 1.15), #000 calc(var(--bite) * 1.15 + .5px)),
    radial-gradient(circle at calc(100% - 6px) 2px, transparent calc(var(--bite) * .9), #000 calc(var(--bite) * .9 + .5px));
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* a comic CHOMP! burst and a few crumbs fly off the bitten corner */
.welcome-cta { position: relative; display: grid; }
.welcome-cta::before, .welcome-cta::after { content: ''; position: absolute; pointer-events: none; opacity: 0; }
.welcome-cta::after { content: 'CHOMP!'; right: -26px; top: -40px; padding: 16px 18px; font: italic 900 1rem/1 Inter, sans-serif; letter-spacing: .02em;
  color: var(--ink); background: #FFD43B; rotate: 12deg;
  clip-path: polygon(50% 0, 60% 22%, 82% 6%, 78% 30%, 100% 30%, 84% 48%, 100% 66%, 78% 68%, 84% 94%, 62% 78%, 50% 100%, 40% 78%, 16% 94%, 22% 68%, 0 66%, 16% 48%, 0 30%, 22% 30%, 18% 6%, 40% 22%); }
.welcome-cta::before { right: 28px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  box-shadow: 14px -6px 0 -1px var(--primary), -10px -4px 0 0 var(--primary), 4px -14px 0 -2px var(--primary), 22px 4px 0 -2px var(--primary); }
@media (hover: hover) {
  .welcome-cta:hover .welcome-again { animation: bite 1.3s var(--ease); }
  .welcome-cta:hover::after { animation: chomp 1.3s var(--ease); }
  .welcome-cta:hover::before { animation: crumbs .7s ease-out .1s; }
}
@media (max-width: 899px) { .welcome-cta::after { right: 2px; top: -46px; } } /* stay on screen (and no sideways scroll) on phones */
.welcome-cta.chomp .welcome-again { animation: bite 1.3s var(--ease); }
.welcome-cta.chomp::after { animation: chomp 1.3s var(--ease); }
.welcome-cta.chomp::before { animation: crumbs .7s ease-out .1s; }
@keyframes chomp { 0%, 8% { opacity: 0; scale: .2; } 16% { opacity: 1; scale: 1.25; } 24%, 55% { opacity: 1; scale: 1; } 70%, 100% { opacity: 0; scale: .9; } }
@keyframes crumbs { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 10px -26px; scale: .6; } }
@keyframes bite { 0% { --bite: 0px; } 12% { --bite: 22px; } 18% { --bite: 20px; } 60% { --bite: 20px; } 100% { --bite: 0px; } }
@keyframes belt { to { transform: translateX(-50%); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .welcome-belt, .welcome-food img { animation: none !important; }
}
.welcome-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.welcome-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-1); }
.welcome-step h3 { margin: 0 0 4px; font-size: 1.02rem; }
.welcome-step p { margin: 0; line-height: 1.45; }
.welcome-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font-weight: 750; }
.guest-box { gap: 10px; }
/* the email and paste-a-link fields: the field on its own row, the button under it (a phone is too narrow for both) */
.guest-box .auth-email { grid-template-columns: 1fr; }
/* screens before the app: red curved hero with the food belt, cards riding up over it */
.auth-screen { display: grid; max-width: 460px; margin: 0 auto; padding-bottom: 32px; }
.auth-hero { margin: 0 -16px; padding: 24px 16px 56px; background: var(--primary); color: #fff; border-radius: 0 0 44px 44px; display: grid; gap: 6px; justify-items: center; text-align: center; overflow: hidden; }
.auth-hero h1 { font-size: 2.2rem; letter-spacing: -.02em; margin: 6px 0 0; color: #fff; animation: rise .6s var(--ease) .2s both; }
.auth-hero p { margin: 0; opacity: .9; font-weight: 500; animation: rise .6s var(--ease) .32s both; }
.auth-belt { margin: 0 -16px; width: calc(100% + 32px); }
.auth-belt .welcome-food img { background: rgba(255,255,255,.95); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.auth-body { display: grid; gap: 12px; margin-top: -40px; position: relative; }
.auth-body > * { animation: rise .55s var(--ease) both; }
.auth-body > :nth-child(2) { animation-delay: .08s; } .auth-body > :nth-child(3) { animation-delay: .16s; } .auth-body > :nth-child(4) { animation-delay: .24s; }
.auth-body > .card { box-shadow: var(--shadow-2); } /* shadow-3 spread onto the guest button below */
.auth-body > .btn-soft { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); margin-top: 4px; }
.auth-body > .linkish, .auth-body > p { justify-self: center; text-align: center; }
.auth-form h3 { margin: 0; font-size: 1.25rem; }
.auth-form p { margin: 0; }
.auth-badge { width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; justify-self: start; animation: pop .6s var(--spring) .3s both; }
.auth-badge .ic { width: 24px; height: 24px; }
@keyframes wave { 0%, 60%, 100% { rotate: 0deg; } 10%, 30% { rotate: 16deg; } 20%, 40% { rotate: -10deg; } }
.auth-hello { min-height: 1.3em; font-weight: 600; color: var(--primary); opacity: 0; translate: 0 4px; transition: opacity .25s, translate .25s; }
.auth-hello.on { opacity: 1; translate: 0 0; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-google img { width: 20px; height: 20px; background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; }
.auth-or { display: flex; align-items: center; gap: 10px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
@media (min-width: 900px) { .auth-hero { margin: 24px 0 0; border-radius: 44px; } .auth-belt { margin: 0 -16px; } }
.auth-screen input { width: 100%; }
.auth-form { gap: 10px; }
.auth-loading { justify-items: center; text-align: center; padding: 28px 18px; }
.auth-loading .burger-anim { width: 84px; height: 77px; }
.auth-form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.auth-email { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.auth-form [hidden] { display: none; }
.invite-ask { width: 100%; resize: none; font: inherit; font-size: .9rem; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--sunken); }
.auth-form .btn .ic { width: 18px; height: 18px; }
.invite-own { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); } /* a name with a blocked word */
.name-why { margin: 0; line-height: 1.35; }
.auth-form label .name-why { font-weight: 400; }
.rename-first { display: grid; gap: 8px; } /* a guest's places to rename before their meals move */
.auth-or { text-align: center; margin: 0; }
.auth-screen .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-screen .chip { cursor: pointer; border: 0; font-size: .9rem; padding: 8px 14px; }
.auth-screen .chip.on { background: var(--primary); color: var(--primary-ink); }
/* the front door (signed out): one card with Google, email and guest; what Halal Log is runs below it */
.auth-form h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; }
.auth-form .btn-soft.auth-guest { background: var(--sunken); }
.auth-guest-note { text-align: center; margin-top: -4px !important; }
.auth-status:empty { display: none; }
.auth-status.c-bad { font-weight: 600; }
/* the join screen's names to pick (sync.js joinCard): tappable pills, coral when picked */
.join-names .chip { font-size: .9rem; padding: 8px 16px; min-height: 40px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.join-names .chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.join-ask { font-size: .85rem; font-weight: 600; color: var(--ink-2); } /* the same weight as the field's label: two ways to answer */
.join-card h3 + .join-ask { margin-top: 4px; }
.join-card.picked label { opacity: .55; } /* a name picked: Join uses it, the field is the other way (its outline stays) */
.join-card.picked input::placeholder { opacity: .55; }
.auth-body > .auth-skip { min-height: 44px; padding: 0 16px; } /* Not now / Skip for now under a card: a full-size tap */
.auth-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; }
.auth-form button[aria-busy] { display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 1; }
.auth-email-step { display: grid; gap: 10px; }
.auth-email-step input { font-size: 16px; } /* 16px: iPhones don't zoom in on the field */
.auth-sent { display: flex; align-items: center; gap: 10px; }
.auth-sent-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--good-bg, #E6F6EC); color: var(--good); flex: none; }
.auth-sent-ico .ic { width: 18px; height: 18px; }
.auth-privacy { display: flex; gap: 9px; align-items: flex-start; margin: 2px 6px 0; color: var(--ink-2); line-height: 1.5; text-align: left !important; justify-self: stretch !important; }
.auth-privacy .ic { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.auth-foot { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.auth-free-top { display: none; }
.auth-tag-long, .auth-tag .auth-tag-short { display: block; }
.auth-tag-long { display: none; }
.auth-more { display: grid; gap: 12px; margin-top: 28px; }
.auth-more > .eyebrow { margin: 14px 0 0; }
.auth-diff { list-style: none; margin: 0; padding: 4px 16px; gap: 0; }
.auth-diff li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.auth-diff li:first-child { border-top: 0; }
.auth-diff strong { display: block; margin-bottom: 2px; }
.auth-diff span.muted { font-size: .9rem; line-height: 1.45; }
.auth-diff-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.auth-diff-ico .ic { width: 18px; height: 18px; }
.auth-shared { display: grid; gap: 14px; margin-top: 6px; }
.auth-shared h3 { margin: 0 0 4px; font-size: 1rem; }
.auth-shared p { margin: 0; line-height: 1.5; }
.auth-more .welcome-cta { margin-top: 10px; }
.auth-free { text-align: center; margin: 0; }

/* a brand-new log: the Get started checklist and friendly empty screens */
.start-card { display: grid; gap: 12px; }
.start-card h3 { margin: 0; }
.start-bar { height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.start-bar span { display: block; height: 100%; background: var(--primary); border-radius: inherit; transition: width .5s var(--ease); }
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.start-steps button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 10px 4px; border-radius: 12px; cursor: pointer; }
.start-steps button:not([disabled]):active { background: var(--sunken); }
.start-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 800; }
.start-steps .done .start-check { background: var(--primary); border-color: var(--primary); }
.start-steps .done strong { text-decoration: line-through; color: var(--muted); }
.start-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; color: var(--ink-2); }
.eat-start { display: contents; }
.empty-halal { margin: 4px 0 0 !important; max-width: 42ch !important; }
.start-foot a { color: var(--primary); font-weight: 600; text-decoration: none; }
.empty-page { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 28px 20px; }
.empty-page h3 { margin: 0; }
.empty-page p { margin: 0 0 6px; max-width: 32ch; line-height: 1.45; }
.empty-page > .stack { width: 100%; }
.empty-ico { font-size: 2.4rem; line-height: 1; margin-bottom: 4px; }

/* ---------- desktop (900px and wider): sidebar instead of the tab bar, wider screens with two columns ----------
   Phones and narrow windows never see any of this; the wrappers below just pass their children through. */
.tabs .tabs-brand, .tabs .tab-me, .tabs .tab-label { display: none; }
.eat-split, .detail-split, .detail-side, .detail-main { display: contents; }
.me-side, .avatar-side, .avatar-main, .avatar-group, .log-main, .log-side { display: contents; }
.log-sum, .deck-keys, .menu-desc, .auth-points { display: none; }
/* fill in a blank (fillSheet, viewFill) */
.skip-link { position: fixed; z-index: 3000; left: 12px; top: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 650; text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; } /* off-screen until a keyboard lands on it */
body.signing-in .skip-link { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hours-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.hours-row input[type=time] { padding: 10px 12px; }
@media (max-width: 899px) { /* phones: room for the whole time; tapping the field opens the picker */
  .hours-row input[type=time] { padding: 10px 8px; text-align: center; }
  .hours-row input[type=time]::-webkit-calendar-picker-indicator { display: none; }
}
.hours-row.shut input[type=time] { opacity: .35; }
.hours-shut { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.fill-table { display: grid; gap: 10px; }
.fill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fill-place { display: flex; align-items: center; gap: 10px; flex: 1 0 100%; min-width: 0; color: inherit; text-decoration: none; }
.fill-row.fill-head, .fill-cell.have { display: none; } /* phones: only what's missing */
@media (min-width: 900px) {
  .fill-table { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
  .fill-row { display: grid; grid-template-columns: minmax(14rem, 2fr) repeat(5, minmax(8rem, 1fr)); gap: 12px; padding: 12px 18px;
    border: 0; border-radius: 0; box-shadow: none; background: none; border-top: 1px solid var(--line); }
  .fill-row.fill-head { display: grid; border-top: 0; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .fill-row:not(.fill-head):hover { background: var(--sunken); }
  .fill-place { flex: none; }
  .fill-cell.have { display: block; color: var(--good, #1a9e5a); }
  .fill-cell.have svg { width: 20px; height: 20px; }
  .fill-cell .add-what { display: none; } /* the column says what */
}

@media (min-width: 900px) {
  :root { --tabs-h: 0px; --side-w: 232px; } /* no bottom bar: save bar, toast and page padding sit on the bottom edge */
  body:not(.signing-in) { padding-left: var(--side-w); }
  body:not(.signing-in) main { max-width: none; padding: 32px 48px 48px; } /* every screen uses the whole window */

  .tabs {
    left: 0; right: auto; top: 0; bottom: 0; width: var(--side-w); max-width: none; height: auto; margin: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 24px 14px;
    border-radius: 0; border: 0; border-right: 1px solid var(--line); box-shadow: none; background: var(--surface);
  }
  .tabs a { height: auto; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 11px 14px; border-radius: 14px; font-size: .95rem; color: var(--ink-2); }
  .tabs a:hover { background: var(--sunken); }
  .tabs a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
  .tabs a[aria-current="page"] svg { transform: none; }
  body:is([data-view="me"], [data-view="me-avatar"], [data-view="me-privacy"], [data-view="me-roadmap"], [data-view="me-friends"], [data-view="me-friend"], [data-view="review"]) .tabs a[data-tab="stats"] { background: none; color: var(--ink-2); } /* Profile has its own row here */
  .tabs-brand { display: flex !important; order: -2; font-size: 1.25rem !important; font-weight: 800; letter-spacing: -.02em; color: var(--ink) !important; margin-bottom: 14px; }
  .tabs-brand:hover { background: none !important; }
  .tabs-brand img { width: 30px; height: 30px; }
  .tabs a.tab-log { order: -1; justify-content: center; gap: 8px; margin-bottom: 14px; padding: 12px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 650; box-shadow: 0 6px 16px rgba(255, 65, 65, .3); }
  .tabs a.tab-log:hover { background: var(--primary); filter: brightness(1.05); }
  .tabs a.tab-log[aria-current="page"] { color: var(--primary-ink); }
  .tabs a.tab-log .plus { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
  .tabs a.tab-log .plus svg { width: 18px; height: 18px; }
  .tabs .tab-label { display: inline; }
  .tab-me { display: flex !important; margin-top: auto; }

  /* pop-up panels: a centered window instead of a sheet from the bottom */
  .sheet { align-items: center; padding: 24px; }
  .sheet-panel { max-width: 34rem; max-height: 86vh; border-radius: 26px; padding: 20px 24px 24px; animation: pop-in .25s var(--ease) both; }
  .sheet-panel::before { display: none; }
  #toast { margin-left: calc(var(--side-w) / 2); }

  /* Eat: lunch picks three across; places list on the left, the map stays in view on the right */
  /* picks: as many as fit in one row (extra ones drop out), each card built like a place card */
  .picks { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; column-gap: 14px; overflow: hidden; margin-inline: 0; padding: 2px 2px 12px; }
  .picks > * { min-height: 0; overflow: hidden; }
  .pick-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); }
  .pick-media { height: auto; aspect-ratio: 16 / 7; border-radius: 0; }
  .pick-panel { margin: 0; border-radius: 0; box-shadow: none; padding: 12px 16px 14px; }
  .eat-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
  .eat-start:has(> .start-card + .empty-page) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .eat-split > .list { grid-column: 1; grid-row: 1; }
  .eat-split > .map-wrap, .eat-split > .map-wrap.expanded { grid-column: 2; grid-row: 1; position: sticky; top: 76px; height: calc(100vh - 100px); margin: 0; }
  .places-bar { margin-inline: -48px; padding-inline: 48px; }
  .eat-split .map-expand { display: none; }
  .eat-split.no-map { grid-template-columns: minmax(0, 1fr); } /* no map yet: the cards use the width */
  .eat-split.no-map > .list { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

  /* a place: dishes, menu and visits on the left; about, address, links and hours in a side column */
  .detail-hero { height: 320px; }
  .detail-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); gap: 28px; align-items: start; }
  .detail-main, .detail-side { display: grid; gap: 14px; min-width: 0; }
  .detail-main { grid-column: 1; grid-row: 1; }
  .detail-side { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }

  /* Discover, Diary, Stats: use the width */
  .browse-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  body[data-view="discover"] .list, body[data-view="browse"] .list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; }
  body[data-view="discover"] .list > h2, body[data-view="browse"] .list > h2, body[data-view="discover"] .list > .empty { grid-column: 1 / -1; }
  .diary-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
  body[data-view="stats"] main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  body[data-view="stats"] main > :is(.page-head, .btn-soft, .version-line) { grid-column: 1 / -1; }
  body[data-view="stats"] main > .recap { grid-column: 1; grid-row: 2; }
  body[data-view="stats"] main > .stats-side { grid-column: 2; grid-row: 2; }

  /* Profile: you, your taste and the match in one panel on the left; the settings lists on the right */
  body[data-view="me"] main { grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
  .me-side { display: grid; gap: 16px; position: sticky; top: 32px; padding: 28px 24px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
  .me-side > .card { background: var(--sunken); box-shadow: none; }
  .me-side .taste-stat, .me-side .match-row { border-color: #E1E4E8; }
  .me-main { max-width: 46rem; }
  .set-row { padding: 16px 20px; } .set-row:hover { background: #FAFAFB; }
  .set-ico { width: 38px; height: 38px; }
  .set-label small { display: block; }
  .menu-label { display: grid; gap: 3px; font-size: 1.02rem; color: var(--ink); }
  .menu-desc { display: block; font-size: .84rem; font-weight: 500; color: var(--muted); }

  /* Your character: the preview, steps and your picks on the left; this step's choices and Back / Next on the right */
  body[data-view="me-avatar"] main { grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr); gap: 14px 24px; align-items: start; }
  body[data-view="me-avatar"] main > :is(a, .page-head) { grid-column: 1 / -1; }
  .avatar-side { display: grid; gap: 18px; position: sticky; top: 32px; padding: 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
  .avatar-side .char-preview { order: -1; position: static; margin-inline: 0; height: clamp(260px, 38vh, 420px); border-radius: calc(var(--radius) - 6px); background: var(--sunken); padding: 18px 0; box-sizing: content-box; }
  .avatar-sum { display: block; font-size: .9rem; }
  .avatar-side { align-self: start; }
  .avatar-main { display: grid; grid-template-rows: 1fr auto; gap: 16px; min-width: 0; align-self: stretch; } /* as tall as the preview card */
  .avatar-group { display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
  .avatar-group > :not(h2) { align-self: center; }
  .avatar-group :is(.avatar-pick, .color-pick) { background: var(--sunken); box-shadow: none; padding: 22px 8px 14px; font-size: .9rem; }
  .avatar-group .avatar-pick.on { box-shadow: 0 0 0 2.5px var(--coral); }
  .avatar-group .color-pick.on { box-shadow: 0 0 0 2.5px var(--sw); }
  .avatar-group .char-art { height: clamp(96px, 8vw, 170px); }
  .avatar-group > .avatar-grid .char-art { height: clamp(110px, 11vw, 230px); } /* the three characters get room to be seen */
  .acc-groups .char-art { height: 76px; } /* seven accessories: smaller, so the step fits beside the preview */
  .acc-groups .avatar-pick { padding-top: 14px; }
  .avatar-group .color-dot { width: clamp(52px, 4.5vw, 84px); height: clamp(52px, 4.5vw, 84px); }
  .avatar-nav { justify-content: flex-end; }
  .avatar-nav > * { flex: none; min-width: 10rem; }
  .avatar-nav > .btn-ghost { margin-right: auto; }
  @media (min-width: 1280px) {
    /* accessories: For him and For her side by side, None lined up with them */
    .acc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
    .acc-groups > .g-none { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .acc-groups .char-art { height: clamp(84px, 5.5vw, 150px); }
  }

  /* Log a meal: the form on the left; what you're saving and the Save button stay in view on the right */
  body[data-view="log"] main { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 28px; align-items: start; }
  .log-main { display: grid; gap: 14px; min-width: 0; }
  .log-side { display: grid; gap: 14px; position: sticky; top: 32px; }
  .log-side .savebar { position: static; display: grid; gap: 14px; padding: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
  .log-sum { display: grid; gap: 2px; }
  .log-sum strong { font-size: 1.1rem; }
  .log-sum-total { font-family: var(--display); font-size: 1.8rem; font-weight: 750; letter-spacing: -.02em; margin-top: 6px; }

  /* swipe decks (Quick rate, Bilal's picks): the card on a framed stage, the keys beside it */
  .deck-wrap { grid-template-columns: minmax(0, 1fr) 16rem; gap: 14px 28px; align-items: start; padding: 28px; border-radius: 32px; background: var(--sunken); }
  .deck-wrap > :not(.deck-keys) { grid-column: 1; width: min(100%, 560px); justify-self: center; }
  .deck-keys { display: grid; grid-column: 2; grid-row: 1 / span 4; gap: 10px; }
  .deck-keys li { display: flex; align-items: center; gap: 10px; }
  .deck-keys kbd { min-width: 2.2em; padding: 3px 8px; border-radius: 8px; background: var(--sunken); box-shadow: inset 0 -1px 0 var(--line); font: 600 .8rem var(--font); text-align: center; }

  /* lists of rows become grids of cards */
  body[data-view="deep"] .list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; }
  body[data-view="inbox"] main > section { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); align-items: start; }
  body[data-view="inbox"] main > section > h2 { grid-column: 1 / -1; }
  body[data-view="review"] main { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); align-items: start; }
  body[data-view="review"] main > :is(a, .page-head) { grid-column: 1 / -1; }

  /* sign-in and set-up: the red panel fills the left, the card sits on the right */
  body.signing-in:not(.welcoming) main { max-width: none; padding: 0; }
  /* the red panel runs edge to edge down the left; the card is centred in the right half */
  .auth-screen { max-width: none; min-height: 100vh; grid-template-columns: minmax(0, 1.15fr) minmax(26rem, 1fr); gap: 0; align-items: center; padding: 0; }
  .auth-screen .auth-hero { margin: 0; align-self: stretch; align-content: center; padding: 48px; border-radius: 0 44px 44px 0; }
  .auth-screen .auth-body { width: min(100% - 96px, 30rem); justify-self: center; }
  .auth-screen .auth-hero h1 { font-size: 4rem; }
  .auth-screen .auth-hero p { font-size: 1.25rem; }
  .auth-screen .auth-belt { margin: 0 -48px 12px; }
  .auth-screen .auth-belt .welcome-food img { width: 76px; height: 76px; padding: 13px; border-radius: 22px; }
  .auth-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 64rem; margin: 40px 0 0; padding: 0; list-style: none; text-align: left; animation: rise .6s var(--ease) .45s both; }
  .auth-points li { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 24px; background: rgba(255, 255, 255, .14); }
  .auth-points strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
  .auth-points span { font-size: .92rem; opacity: .92; line-height: 1.45; }
  .auth-point-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--primary); }
  .auth-point-ico .ic { width: 22px; height: 22px; }
  .auth-screen .auth-body { margin-top: 0; }
  .auth-screen .auth-body > .card { padding: 28px; }
  /* the front door: red panel and card fill the first screen; how it works runs under both */
  .auth-screen:has(.auth-more) { grid-template-rows: minmax(100vh, auto) auto; }
  .auth-screen .auth-tag-long { display: block; max-width: 34rem; line-height: 1.4; }
  .auth-screen .auth-tag-short { display: none; }
  .auth-points { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; margin-top: 28px; }
  .auth-points li { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; border-radius: 20px; }
  .auth-phone-only { display: none !important; }
  .auth-free-top { display: inline; }
  .auth-more { grid-column: 1 / -1; width: min(100% - 96px, 72rem); justify-self: center; margin: 40px 0 48px; gap: 16px; }
  .auth-more .welcome-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .auth-more .welcome-step { grid-template-columns: 1fr; gap: 14px; padding: 20px; align-content: start; }
  .auth-shared { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 22px 26px; }
  .auth-more .welcome-cta { justify-self: center; }
  .auth-more .welcome-again { padding-inline: 40px; }
  .auth-free { display: none; }
}
@media (min-width: 900px) and (max-width: 1099px) { /* narrow desktop: the points stack, the steps go two by two */
  .auth-points { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .auth-points li { padding: 14px 16px; }
  .auth-more .welcome-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  /* Eat on a big screen: the map runs down the right; picks and places share one column of same-size cards */
  body[data-view="eat"] main { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  body[data-view="eat"].eat-no-map main { grid-template-columns: minmax(0, 1fr); } /* no map: nothing to keep the right column for */
  body[data-view="eat"] main > * { grid-column: 1; }
  body[data-view="eat"] .eat-split { display: contents; }
  .eat-split > .list { grid-column: 1; grid-row: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items: start; }
  .eat-split > .list > :not(.pcard) { grid-column: 1 / -1; }
  .eat-split > .map-wrap, .eat-split > .map-wrap.expanded { grid-column: 2; grid-row: 1 / span var(--eat-rows, 9); top: 32px; height: calc(100vh - 64px); }
  body[data-view="eat"] .places-bar { margin-right: 0; padding-right: 0; }
  .picks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); column-gap: 12px; }
  .log-main > .stack:has(> .entry + .entry) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1700px) { body[data-view="stats"] main { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- line icons (static/icons.svg, ic() in app.js): they take the colour of what they sit in ---------- */
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
/* icons that stand in for an emoji keep their own colour (tic() in app.js); white again on coral */
.tint-pepper { color: #E03131; fill: #FFC9C9; }
.tint-flame { color: #F76707; fill: #FFD8A8; }
.tint-check { color: #2F9E44; }
.tint-heart { color: var(--primary); fill: #FFD6D6; }
.tint-external, .tint-maximize, .tint-minimize { color: var(--primary); }
.btn:not(.btn-soft) .tint, .pill[aria-pressed="true"] .tint, .rec-actions .btn-soft[aria-pressed="true"] .tint { color: currentColor; fill: none; }
.ic-fill, .hero-btn.fav.on .ic { fill: currentColor; }
.pill-sm { display: inline-flex; align-items: center; gap: 4px; }
.chip:has(> .ic)::before { display: none; }
.pill-sm .ic, .chip .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.pick-label, .seg button, .fchip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pick-label .ic { width: 13px; height: 13px; stroke-width: 2.4; color: var(--ink-2); }
.seg button .ic { width: 15px; height: 15px; }
/* rating stars: i-star filled in saffron, sized like a letter beside its number (star() in app.js) */
.ic.ic-star, .chip .ic-star, .pill-sm .ic-star { width: 1em; height: 1em; stroke-width: 2; fill: currentColor; color: var(--star); vertical-align: -.12em; }
.ic-star.off { color: #E3E0DA; }
.star-half { position: relative; display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; flex: none; }
.star-half .ic-star { position: absolute; inset: 0; vertical-align: 0; }
.scored { display: inline-flex; align-items: center; gap: .2em; white-space: nowrap; }
.mini-stars > .ic-star, .mini-stars > .star-half, .s-stars > .ic-star, .s-stars > .star-half, .nowrap > .ic-star, .nowrap > .star-half { margin-right: 1px; }
.star-words { white-space: nowrap; }
.mini-btn .ic, .hero-btn .ic { width: 19px; height: 19px; }
.mini-btn { color: var(--ink-2); }
.pc-fav .ic { width: 15px; height: 15px; }
.inbox-ico, .order-ico, .recap-hl-ico, .drop .drop-ico { color: var(--ink-2); }
.inbox-ico .ic, .order-ico .ic, .drop-ico .ic { width: 21px; height: 21px; }
.recap-hl-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--surface); flex: none; }
.recap-hl-ico .ic { width: 18px; height: 18px; }
.recap-hl.bad .recap-hl-ico { color: var(--bad); }
.scan-ico .ic { width: 26px; height: 26px; }
.social-btn span .ic { width: 22px; height: 22px; display: block; }
.pick-emoji { color: var(--muted); } .pick-emoji .ic { width: 40px; height: 40px; stroke-width: 1.6; }
.done-burst, .empty-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--sunken); color: var(--ink-2); display: grid; place-items: center; font-size: 0; margin: 0 auto 6px; }
.done-burst .ic, .empty-ico .ic { width: 34px; height: 34px; stroke-width: 1.8; }
.done-burst.g { background: var(--good-bg); color: var(--good); }
.pin.me span .ic { width: 15px; height: 15px; }
.pin.logo-pin span > .ic { display: block; width: 20px; height: 20px; margin: 8px auto 0; }
.ptr span img { width: 24px; height: 24px; display: block; }
.summary-list:has(.check-li) { padding-left: 0; list-style: none; }
.check-li { display: flex; gap: 8px; align-items: flex-start; } .check-li .ic { margin-top: 2px; }
/* the characters are full figures (inline svg from mascots.js): round avatars show their head and shoulders */
.avatar-xs, .avatar-sm, .avatar-md, .avatar-lg, .avatar-xl { position: relative; }
.avatar-xs > svg, .avatar-sm > svg, .avatar-md > svg, .avatar-lg > svg, .avatar-xl > svg { position: absolute; width: 170%; height: 170%; max-width: none; left: -35%; top: -4%; }
.empty-art { display: block; height: 90px; } .empty-art > svg { height: 100%; width: auto; }
/* character colours: six presets, picked before the character */
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); transition: transform .2s var(--spring), box-shadow .2s; }
.swatch:active { transform: scale(.9); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--sw); }
/* character picker: big live preview, then colour, character and accessory tiles */
.char-preview { display: grid; place-items: center; height: 170px; } .char-preview > svg { height: 100%; width: auto; }
.char-art { display: block; height: 84px; } .char-art > svg { height: 100%; width: auto; }
/* /sandbox: a throwaway household, so say so */
.sandbox-pill { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; translate: -50% 0; z-index: 60; background: #2F333A; color: #fff; font-size: .72rem; font-weight: 650; padding: 4px 12px; border-radius: 999px; pointer-events: none; opacity: .88; }

/* ---- spice: each person's level, and how hot a dish felt to them ---- */
.spice-btn { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: .74rem; font-weight: 650; color: var(--muted); background: var(--sunken); border: 0; border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.spice-btn.on { color: var(--ink); background: #FFE8DC; }
.entry .spice-btn:not(.on), .sc-spice .spice-btn:not(.on) { background: var(--surface); box-shadow: var(--shadow-1); } /* on grey boxes */
.spice-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
.spice-chips[hidden] { display: none; }
.spice-chips button { font: inherit; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.spice-chips button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.pr-row.has-spice { grid-template-columns: 3.6rem auto 1fr; }
.pr-row .spice-pick { display: contents; }
.pr-row .spice-btn { justify-self: end; }
.pr-row .spice-chips { grid-column: 1 / -1; }
.spice-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 650; color: var(--ink-2); background: #FFF1E8; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.spice-tag.c-good { color: #1C7C4A; background: #E5F6EC; }
.spice-tag.c-warn { color: #9A5B00; background: #FFF3D6; }
.spice-tag.c-bad { color: #B42318; background: #FDE7E5; }
.item-spice { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: .72rem; color: var(--muted); }
.sc-spice { display: flex; justify-content: center; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sc-spice .spice-btn { padding: 8px 13px; min-height: 36px; }
.sc-spice .spice-btn:not(.on) { color: var(--ink-2); }
.sc-spice .spice-pick { display: grid; justify-items: center; gap: 4px; }
.sc-spice .spice-chips { justify-content: center; }
/* Profile → spice level: one row per level, its heat as flames (flames() in app.js) */
.flames { display: inline-flex; gap: 1px; vertical-align: middle; }
.flames .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.flames .ic.on { color: var(--primary); fill: #FFD3D3; } .flames .ic.off { color: #D5D8DD; }
.heat-rows { display: grid; gap: 10px; }
.heat-row { font: inherit; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.heat-row .flames { width: 92px; flex: none; gap: 2px; } .heat-row .flames .ic { width: 21px; height: 21px; stroke-width: 2; }
.heat-text { flex: 1; display: grid; gap: 1px; } .heat-text b { font-size: 1rem; } .heat-text small { font-size: .82rem; color: var(--muted); }
.heat-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #D5D8DD; flex: none; display: grid; place-items: center; }
.heat-row[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); }
.heat-row[aria-checked="true"] .heat-radio { border-color: var(--primary); background: var(--primary); }
.heat-row[aria-checked="true"] .heat-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.heat-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* taste profiles + who's going (Eat) */
.picks-head { flex-wrap: wrap; row-gap: 10px; min-width: 0; max-width: 100%; } /* min-width: a long chip row must not stretch the header past the screen */
.picks-head .going { order: 3; flex-basis: 100%; }
.going { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; min-width: 0; } /* phones: the chips wrap, so every person is reachable */
.picks-head .picks-btns { order: 2; flex-basis: 100%; flex-wrap: wrap; }
.picks-btns .mini-btn { flex: 1 1 auto; width: auto; height: auto; min-height: 36px; border-radius: 999px; padding: 0 10px; display: flex; justify-content: center; gap: 5px; min-width: 0; font: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap; } /* phones: three labelled buttons on their own line */
.picks-btns .mini-btn[hidden] { display: none; }
@media (max-width: 359px) { .picks-btns .mini-btn .ic { display: none; } } /* narrowest phones: words only, so all three fit */
.going::-webkit-scrollbar { display: none; }
.going-label { font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; margin-right: 2px; }
.going-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; overflow: hidden; white-space: nowrap; min-height: 34px; padding: 4px 12px 4px 5px; border-radius: 999px; border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.going-btn.going-all { padding-left: 12px; }
.going-btn[aria-pressed="false"] { opacity: .55; }
.going-btn[aria-pressed="false"] .avatar-xs { filter: grayscale(1); }
.going-btn[aria-pressed="true"] { background: var(--coral-bg); box-shadow: 0 0 0 1.5px var(--coral); color: var(--ink); }
.taste-card { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.taste-card p { margin: 0; }
.taste-grid { display: grid; gap: 14px; }
.taste-grid .card p, .taste-grid h4 { margin: 0; }
.taste-dish { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.taste-dish:last-child { border-bottom: 0; }
.taste-dish b { white-space: nowrap; }
.taste-bar { display: grid; gap: 5px; }
.taste-bar .meter-track { height: 8px; }
.taste-who { margin-bottom: 2px; }
.taste-idea { border: 0; font-family: inherit; cursor: pointer; }
.avoid-form { flex-wrap: nowrap; }
.avoid-form input { flex: 1; min-width: 0; }
.chip-x { border: 0; background: none; color: inherit; font: inherit; font-size: 1rem; line-height: 1; padding: 0 0 0 2px; cursor: pointer; }
@media (min-width: 900px) {
  .picks-head { flex-wrap: nowrap; }
  .picks-head .going { order: 0; flex: 1 1 auto; flex-basis: auto; justify-content: flex-end; margin-inline: 0; padding: 2px; }
  .picks-head .picks-btns { order: 0; flex-basis: auto; flex-wrap: nowrap; }
  .picks-btns .mini-btn { flex: none; width: 36px; height: 36px; padding: 0; display: grid; }
  .picks-btns .mini-lbl { display: none; } /* icons only until 1600 */
  body[data-view="me"] main > .taste-page { grid-column: 1 / -1; }
  .taste-page { max-width: 1100px; }
  .taste-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
  .taste-grid > .taste-wide { grid-column: 1 / -1; }
  .taste-grid > .taste-tall { grid-row: span 3; }
  .taste-who { margin-inline: 0; padding: 2px; }
}
@media (max-width: 480px) { /* phones: the stars keep their full row; the spice answer sits just under them */
  .pr-row.has-spice { grid-template-columns: 3.6rem 1fr; row-gap: 2px; }
  .pr-row .spice-btn { grid-column: 2; justify-self: start; padding: 3px 9px; }
}

/* ===== 1.4: even cards, sharp place hero, livelier place page ===== */
/* Eat cards: same frame, same dish row, so every card in a row is the same height */
.pcard { display: flex; flex-direction: column; }
.pc-body { flex: 1; align-content: start; grid-template-rows: auto auto auto 1fr; }
.pc-media .gal-slide img { object-fit: cover; }
.pc-media .gal-slide::before { display: none; }
.pc-media.no-photo { background: none; }
.fallback-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px;
  background: radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, var(--fa), var(--fb)); }
.fallback-cover .logo { box-shadow: 0 0 0 4px rgba(255,255,255,.35), var(--shadow-2); }
.fallback-cover > span:last-child:not(.logo) { color: #fff; font-size: .78rem; font-weight: 650; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.dish-strip { align-self: end; height: 112px; }
.dish-tile { grid-template-rows: 72px auto auto; align-content: start; }
.dish-tile.txt .dish-name { display: none; }
.dish-ph { padding: 8px; background: var(--sunken); color: var(--ink-2); font-size: .74rem; font-weight: 650; line-height: 1.2; text-align: center; }
.dish-ph > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dish-empty { flex: 1; height: 72px; border-radius: 12px; background: var(--sunken); display: grid; place-content: center; text-align: center; gap: 2px; }
.dish-empty strong { font-size: .82rem; color: var(--ink-2); } .dish-empty span { font-size: .72rem; color: var(--muted); }
.dish-empty strong .nowrap { font-size: inherit; color: inherit; white-space: nowrap; } /* one person's name and stars stay together */
@media (min-width: 900px) {
  .eat-split > .list, body[data-view="discover"] .list, body[data-view="browse"] .list { align-items: stretch; }
}

/* place page: section headings with a coral icon */
.sec-head h2, .sec-head h3 { display: inline-flex; align-items: center; gap: 9px; }
.sec-ico { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.sec-ico .ic { width: 17px; height: 17px; }
.sec-ico.sm { width: 26px; height: 26px; border-radius: 9px; } .sec-ico.sm .ic { width: 15px; height: 15px; }

/* place hero: never stretched; a small photo sits whole on a blurred copy of itself */
.hero-shot { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--sunken); }
.hero-shot::before { content: ""; position: absolute; inset: -30px; background: var(--bg) center / cover no-repeat; filter: blur(24px) saturate(1.2); opacity: 0; transition: opacity .3s; }
.hero-shot img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-shot.small::before { opacity: .8; }
.hero-shot.small img { object-fit: contain; }
.detail-hero > .hero-shot img { animation: zoom-out 1.2s var(--ease) both; }
.hero-grid { height: 100%; }
.hero-grid > :not(:first-child) { display: none; }
.hero-tile { position: relative; display: block; overflow: hidden; }
.hero-tile .hero-shot img { transition: transform .5s var(--ease); }
.hero-tile:hover .hero-shot img { transform: scale(1.05); }
.hero-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(23,24,26,.45); color: #fff; font-weight: 700; font-size: .95rem; }
@media (min-width: 900px) {
  .detail-hero { height: 360px; }
  .detail-hero.mosaic { background: none; }
  .hero-grid { display: grid; gap: 6px; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .mosaic.n5 .hero-grid { grid-template-columns: 2fr 1fr 1fr; }
  .hero-grid > :first-child { grid-row: 1 / 3; }
  .mosaic.n2 .hero-grid > :last-child { grid-row: 1 / 3; }
  .hero-grid > :not(:first-child) { display: block; }
}

/* order next time: suggestions while you type */
.suggest-wrap { position: relative; }
.suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-3); padding: 6px; display: grid; gap: 2px; max-height: 340px; overflow-y: auto; }
.suggest-row, .save-row { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: inherit; }
.suggest-row { border: 0; background: none; padding: 7px 8px; border-radius: 12px; cursor: pointer; }
.suggest-row:hover, .suggest-row.on { background: var(--primary-soft); }
.suggest-row img, .save-row img, .suggest-ph { flex: none; width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.suggest-ph { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.suggest-ph .ic { width: 17px; height: 17px; }
.suggest-text { display: grid; min-width: 0; flex: 1; font-size: .9rem; }
.suggest-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-text b { color: var(--primary); }
.suggest-text small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-row.custom .suggest-text { font-weight: 600; }
.saves-list { display: grid; gap: 8px; }
.save-row { padding: 6px; border-radius: 14px; background: var(--sunken); }

/* halal info as coloured badges */
.halal-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 8px; }
.hbadge { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sunken); color: var(--ink-2); }
.hbadge > span:last-child { display: grid; min-width: 0; font-size: .88rem; }
.hbadge small { font-size: .72rem; opacity: .75; }
.hbadge-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.7); }
.hbadge-ico .ic { width: 17px; height: 17px; }
.hbadge.c-good { background: var(--good-bg); color: #17643A; }
.hbadge.c-bad { background: var(--bad-bg); color: #A12C2C; }
.hbadge.c-warn { background: var(--warn-bg); color: #7A5410; }
.cert-line { display: flex; gap: 8px; align-items: flex-start; margin: 0; line-height: 1.45; }
.cert-line .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.cert-line a { color: inherit; text-decoration: underline; white-space: nowrap; }
.cert-line.c-good { color: #17643A; } .cert-line.c-bad { color: #A12C2C; } .cert-line.c-warn { color: #7A5410; }

/* hours: today in coral instead of a black ring */
.hours-day.today, .hours-time.today { box-shadow: none; }
.hours-day.today { background: var(--primary); color: #fff; }
.hours-time.today { box-shadow: inset 0 0 0 2px currentColor; }

/* visit cards: a coral date badge */
.date-badge { flex: none; width: 46px; height: 50px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: grid; place-content: center; text-align: center; line-height: 1.05; }
.date-badge small { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.date-badge b { font-size: 1.2rem; font-weight: 750; }
.review-card { border-left: 0; }
.review-card .thumbs img { width: 76px; height: 76px; }

/* changes that didn't save (app.js unsavedBar): a bar above the tabs on phones, across the top of the page on desktop */
.unsaved-bar {
  position: fixed; z-index: 1100; left: 12px; right: 12px; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 18px);
  max-width: 42rem; margin-inline: auto; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px;
  border-radius: 18px; border: 1px solid #F0DDB8; background: var(--warn-bg); color: #7A5410; box-shadow: var(--shadow-2);
}
.unsaved-bar[hidden] { display: none; }
.unsaved-bar > .ic { flex: none; width: 20px; height: 20px; }
.unsaved-text { flex: 1; min-width: 0; display: grid; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.unsaved-text b { font-size: .9rem; white-space: nowrap; }
.unsaved-text span { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unsaved-bar .btn-sm { flex: none; padding: 8px 12px; background: rgba(255, 255, 255, .8); }
body.has-unsaved main { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 110px); }
body.has-unsaved { --savebar-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 86px); --toast-bottom: var(--savebar-bottom); }
.unsaved-item, .unsaved-confirm { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--sunken); }
.unsaved-item .linkish { justify-self: start; margin-top: 2px; color: var(--bad); }
.unsaved-confirm ul { margin: 4px 0; padding-left: 18px; }
.unsaved-confirm .grid2 { margin-top: 6px; }
@media (min-width: 900px) {
  .unsaved-bar { position: sticky; top: 0; bottom: auto; left: auto; right: auto; max-width: none; margin: 0; gap: 12px; padding: 10px 48px; border-radius: 0; border-width: 0 0 1px; box-shadow: none; }
  .unsaved-text { display: flex; align-items: baseline; gap: 10px; }
  .unsaved-text span { font-size: .85rem; }
  body.has-unsaved main { padding-bottom: 48px; }
  body.has-unsaved #toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
}

/* Halal Log is paused (app.js pausedBar, the read-only switch): a card at the top of every screen on phones that stays
   while scrolling, a strip across the top of the page on desktop (above the "didn't save" bar when both show) */
.paused-bar {
  position: sticky; z-index: 900; top: calc(env(safe-area-inset-top, 0px) + 6px); margin: 8px 12px 0;
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px;
  border-radius: 18px; border: 1px solid #F0DDB8; background: var(--warn-bg); color: #7A5410; box-shadow: var(--shadow-2);
}
.paused-bar[hidden] { display: none; }
.paused-bar > .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.paused-bar b { display: block; font-size: .9rem; line-height: 1.3; color: #5E410C; }
.paused-bar span { display: block; font-size: .8rem; line-height: 1.3; margin-top: 1px; }
/* No signal (app.js offlineBar): a slim amber pill at the top of every screen on phones, the full sentence in a strip
   across the top on desktop. It scrolls with the page, so it never covers the sticky filter rows and side panels. Same
   colours as the paused banner, which wins when both apply */
.offline-bar {
  position: relative; z-index: 900; margin: calc(env(safe-area-inset-top, 0px) + 8px) auto 0; width: max-content;
  max-width: calc(100% - 16px); display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; white-space: nowrap;
  border-radius: 999px; border: 1px solid #F0DDB8; background: var(--warn-bg); color: #7A5410; box-shadow: var(--shadow-2);
  font-size: .8rem; line-height: 1.25;
}
.offline-bar[hidden] { display: none; }
.offline-bar > .ic { flex: none; width: 17px; height: 17px; }
.offline-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* one line on phones, even at 360 */
.offline-bar b { color: #5E410C; }
.offline-bar .off-long { display: none; }
/* phones: the pill already clears the notch, so main and the place page's photo header (which runs up to the top
   edge) start just under it */
@media (max-width: 899px) { body.is-offline main { padding-top: 12px; } }
@media (max-width: 45.99rem) { body.is-offline .detail-hero { margin-top: -12px; border-radius: 26px; } body.is-offline .hero-btn { top: 14px; } }
/* the icons file, put into the page at start (app.js loadSprite); not display:none, or Safari won't draw its symbols */
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* a page that needs signal (app.js route): the empty-state card, kept narrow */
.needs-signal { width: 100%; max-width: 26rem; margin: 8px auto 0; display: grid; gap: 12px; }
.needs-back { justify-self: start; text-decoration: none; }
/* a picture tile that never loaded reads as a placeholder (Back on the place page has its own arrow below) */
:not(.hero-btn):has(> img.img-missing) { background-color: var(--sunken); }
/* a picture that couldn't load: its empty tile, not the browser's torn-page icon */
img.img-missing { visibility: hidden; }
.hero-btn.back:has(> img.img-missing)::before { content: '‹'; position: absolute; font-size: 1.7rem; line-height: 1; color: var(--ink-2); } /* Back stays a back button */
@media (min-width: 900px) {
  .paused-bar { top: 0; margin: 0; align-items: center; padding: 12px 48px; border-radius: 0; border-width: 0 0 1px; box-shadow: none; }
  .paused-bar span { font-size: .86rem; }
  body.is-paused .unsaved-bar { top: var(--paused-h, 0px); }
  .offline-bar { margin: 0; width: auto; max-width: none; padding: 11px 48px; border-radius: 0; border-width: 0 0 1px; box-shadow: none; font-size: .86rem; white-space: normal; }
  .offline-bar .off-short { display: none; }
  .offline-bar .off-long { display: inline; }
  body.has-unsaved .offline-bar { margin-bottom: 8px; } /* the didn't-save bar reads as its own alert */
}

/* photos still on this phone (app.js photosPill): a small pill above the tabs on phones, a row in the sidebar on desktop */
.photos-pill {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-2);
}
.photos-pill .ic { flex: none; width: 20px; height: 20px; color: var(--muted); }
.photos-pill > span { display: grid; line-height: 1.2; }
.photos-pill b { font-size: .86rem; }
.photos-pill small { font-size: .74rem; color: var(--muted); }
.photos-pill.sending .ic { color: var(--primary); animation: ph-pulse 1.2s ease-in-out infinite; }
@keyframes ph-pulse { 50% { opacity: .35; } }
.photos-pill-phone { position: fixed; z-index: 1090; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 18px); }
body.has-unsaved .photos-pill-phone { bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 84px); }
.photos-pill-side { display: none !important; }
body.has-photos-waiting:not(.has-unsaved) { --savebar-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 76px); --toast-bottom: var(--savebar-bottom); }
@media (max-width: 899px) { /* both up: the Save bar and the toast go above the pill, which sits above the didn't-save bar */
  body.has-photos-waiting.has-unsaved { --savebar-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 145px); --toast-bottom: var(--savebar-bottom); }
  body.has-photos-waiting.has-unsaved main { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 170px); }
}
body.has-photos-waiting main { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 96px); }
/* the mark on a photo that hasn't uploaded yet */
.ph-wait {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .58); color: #fff;
  font-size: .6rem; font-weight: 700; line-height: 1.5; pointer-events: none;
}
.featured, .strip figure, .diary-tile { position: relative; }
.featured .ph-wait, .strip figure .ph-wait, .diary-tile .ph-wait { top: 6px; left: 6px; bottom: auto; font-size: .66rem; }
.photo-wait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.photo-wait { display: grid; gap: 2px; align-content: start; }
.photo-wait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 4px; background: var(--sunken); }
/* taken out of the household with saves and photos still on the phone (local/sync.js goneScreen) */
.gone-list { margin: 0; padding: 10px 14px 10px 30px; border-radius: var(--radius-sm); background: var(--sunken); display: grid; gap: 4px; max-height: 11rem; overflow: auto; }
.gone-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 9.5rem; overflow: auto; }
.gone-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--sunken); }
.gone-card .muted.small { text-align: center; }
.household-gone .unsaved-bar, .household-gone .photos-pill { display: none !important; }
main.gone-layer { position: fixed; inset: 0; z-index: 1000; overflow: auto; max-width: none; background: var(--bg); }
.household-gone { overflow: hidden; }
@media (min-width: 900px) {
  .photos-pill-phone { display: none !important; }
  .photos-pill-side:not([hidden]) {
    display: flex !important; margin-top: auto; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line);
    background: var(--sunken); box-shadow: none;
  }
  .photos-pill-side:hover { background: var(--primary-soft); }
  body.has-photos-waiting .tab-me { margin-top: 6px; } /* the pill takes the push to the bottom */
  body.has-photos-waiting:not(.has-unsaved) .savebar, body.has-photos-waiting:not(.has-unsaved) #toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
  body.has-photos-waiting main { padding-bottom: 48px; }
  .photo-wait-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Eat: cover the notch so the stuck places bar doesn't show cards scrolling under the status bar (any width: iPads have one) */
body[data-view="eat"]::before { content: ''; position: fixed; z-index: 6; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); }
/* the bottom of the phone screen: toasts above the Save bar, a floor under it, room under the swipe deck, the notch */
@media (max-width: 899px) {
  /* a page with a Save bar: the toast sits just above it (app.js watchSavebar keeps --savebar-h current). 28px, not 10:
     at the very end of a page the bar rests up to 25px above its stuck spot, and the toast must still clear it */
  main:has(.savebar) ~ #toast { --toast-bottom: calc(var(--savebar-bottom) + var(--savebar-h, 64px) + 28px); }
  /* Log and Deep review: plain page colour from the Save bar down, so the form doesn't show between it and the tab bar.
     It stops at the bar's bottom edge: after a slide-in, main is its own layer, so this would cover the bar, not go behind it */
  body:is([data-view="log"], [data-view="deep"], [data-view="me"]):has(main .ts-save.savebar)::after, body:is([data-view="log"], [data-view="deep"]):has(main .savebar)::after {
    content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--savebar-bottom); background: var(--bg); pointer-events: none;
  }
  /* Discover swipe: the card leaves room for its round buttons and their labels above the tab bar */
  /* (less with the short-break or offline card above main, or the didn't-save bar or photos pill over the bottom; with
     several of those on a small phone the card stops at 260px so it stays readable, and the page scrolls to the buttons) */
  body.is-paused { --deck-paused: calc(var(--paused-h, 0px) + 8px); }
  body.is-offline { --deck-paused: var(--offline-h, 0px); } /* the pill and main's 12px offline padding */
  body:is(.has-unsaved, .has-photos-waiting) { --deck-unsaved: 66px; }
  body.has-unsaved.has-photos-waiting { --deck-unsaved: 132px; }
  .deck:not(.rate-deck) { height: clamp(260px, calc(100vh - 309px - var(--tabs-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--deck-paused, 0px) - var(--deck-unsaved, 0px)), 520px); }
  @supports (height: 100dvh) { .deck:not(.rate-deck) { height: clamp(260px, calc(100dvh - 309px - var(--tabs-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--deck-paused, 0px) - var(--deck-unsaved, 0px)), 520px); } }
  /* the front door: the coral header runs up behind the notch */
  .auth-screen .auth-hero { margin-top: calc(-20px - env(safe-area-inset-top, 0px)); padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
}

/* Privacy page (local/privacy.js): one column on phones, a sticky contents list beside it on desktop */
.auth-foot { display: flex; justify-content: center; gap: 18px; }
.privacy-page { max-width: 46rem; margin: 0 auto; display: grid; gap: 8px; padding-bottom: 32px; }
.pv-back { justify-self: start; }
.pv-toc { display: none; }
.pv-article { display: grid; gap: 10px; line-height: 1.55; }
.pv-article h1 { font-size: 1.9rem; letter-spacing: -.02em; margin: 6px 0 0; }
.pv-article h2 { font-size: 1.15rem; margin: 0 0 8px; scroll-margin-top: 16px; }
.pv-article p, .pv-article ul { margin: 0; }
.pv-article ul { padding-left: 1.25rem; display: grid; gap: 6px; }
.pv-article ul ul { margin-top: 6px; }
.pv-lede { padding: 12px 14px; border-radius: var(--radius); background: var(--primary-soft); color: var(--ink); font-weight: 500; }
.pv-sec { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 16px; margin-top: 6px; }
.pv-sec > * + * { margin-top: 10px; }
.pv-planned { color: #7A5410; background: #FBF1DA; border-radius: 6px; padding: 0 5px; font-style: normal; }
@media (min-width: 900px) {
  .privacy-page { max-width: 62rem; }
  .pv-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 40px; align-items: start; }
  .pv-toc { display: grid; gap: 10px; position: sticky; top: 24px; justify-items: start; text-align: left; }
  .pv-toc .linkish { font-size: .9rem; color: var(--ink-2); text-align: left; }
  .pv-toc .linkish:hover { color: var(--primary); }
  .pv-sec { padding: 22px 26px; }
}

/* Profile → Claude keys: one row per key, text then On/Off then the switch button (a centered window on desktop) */
.key-list { display: grid; gap: 8px; }
.key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info chip" "btn btn"; gap: 8px 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--sunken); }
.key-row .key-info { grid-area: info; display: grid; gap: 2px; min-width: 0; }
.key-row .chip { grid-area: chip; }
.key-row button { grid-area: btn; }
.key-row.off .key-info strong { color: var(--ink-2); }
@media (min-width: 900px) {
  .sheet-panel:has(.key-list) { max-width: 40rem; }
  .key-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "info chip btn"; }
  .key-row button { min-width: 9rem; }
}

/* Profile → Send feedback */
.fb-details { display: grid; gap: 4px; }
.fb-seen { padding-left: 54px; }
.fb-status { margin: 0; padding: 10px 14px; border-radius: 14px; font-size: .86rem; font-weight: 600; }
.fb-status.good { background: var(--good-bg); color: var(--good); }
.fb-status.warn { background: var(--warn-bg); color: var(--warn); }
.fb-status.bad { background: var(--bad-bg); color: var(--bad); }
.fb-privacy { margin-top: 24px; color: var(--muted); }

/* Profile → Friends: phones show the list, then one friend (Loved / Want to try pills); ~900 shows one friend's two lists
   side by side; 1280+ shows the list on the left and the friend on the right, a grid of cards under the pills */
.fr-page { display: grid; gap: 14px; min-width: 0; }
.fr-side, .fr-detail { display: grid; gap: 14px; align-content: start; min-width: 0; }
.fr-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-view="me-friend"] .fr-side { display: none; } /* one friend picked: just them */
.fr-page:not(.has-detail) .fr-detail { display: none; }
.fr-list { padding: 0; overflow: hidden; display: grid; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.fr-row + .fr-row { border-top: 1px solid var(--line); }
.fr-row.on { background: var(--primary-soft); }
.fr-pending .fr-av, .fr-pending .fr-rowt { opacity: .7; }
.fr-rowt { flex: 1; min-width: 0; display: grid; }
.fr-rowt small { color: var(--muted); font-size: .8rem; }
.fr-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--tint, var(--muted)); }
.fr-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--sunken); color: var(--ink-2); }
.fr-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.fr-head { display: flex; align-items: center; gap: 12px; }
.fr-head .fr-av { width: 48px; height: 48px; font-size: 1.2rem; }
.fr-title { flex: 1; min-width: 0; }
.fr-title h1 { font-size: 1.6rem; }
.fr-pills { margin-inline: 0; padding-inline: 0; }
.fr-cols { display: grid; gap: 14px; min-width: 0; }
.fr-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fr-col[data-on="false"] { display: none; }
.fr-colh { margin: 0; }
.fr-grid { display: grid; gap: 8px; }
.fr-place { display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0; }
.fr-ph { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: var(--primary); background: var(--primary-soft); }
.fr-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.fr-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.fr-chips .chip { font-size: .7rem; padding: 2px 8px; white-space: normal; }
.fr-end { flex: none; display: grid; justify-items: end; gap: 4px; text-align: right; }
.fr-score { display: grid; justify-items: end; line-height: 1.1; }
.fr-score b { color: var(--star); font-size: .95rem; white-space: nowrap; }
.fr-score small { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.fr-save { font-size: .8rem; font-weight: 650; color: var(--primary); white-space: nowrap; }
.fr-save:disabled { color: var(--good); opacity: 1; }
.fr-linkbox { width: 100%; font: .85rem ui-monospace, Menlo, monospace; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--sunken); }
.fr-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
.fr-terms li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
/* what friends see: a filled green tick; what they never see: a red cross. Centred on the first line of text */
.fr-tick { width: 22px; height: 22px; margin-top: calc((1.4em - 22px) / 2); border-radius: 50%; display: grid; place-items: center; color: var(--good); background: var(--good-bg); }
.fr-tick.no { color: var(--bad); background: var(--bad-bg); }
.fr-tick svg { width: 13px; height: 13px; stroke-width: 2.8; }
/* #/friend/<code>: who's asking and one Add (app.js viewFriendLink). Phones: one column, no sample card; ~900+: who's
   asking beside what you'll both see. .fr-landing: the same before sign-in, in the front door's card (sync.js) */
.flk { display: grid; gap: 14px; }
.flk .empty-page { width: 100%; max-width: 34rem; margin-inline: auto; }
.flk-card { display: grid; gap: 20px; padding: 20px; }
.flk-who { display: grid; gap: 10px; align-content: start; }
.flk-who .fr-av { width: 64px; height: 64px; font-size: 1.6rem; }
.flk-who h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; }
.flk-who p, .flk-what h3 { margin: 0; }
.flk-what { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.flk-what > p { margin: 0; }
.fr-landing .fr-head h2, .fr-landing .eyebrow { margin: 0; }
.flk-as { margin: 0; }
.fr-added { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--good-bg); color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.fr-added .fr-tick { background: #fff; }
@media (min-width: 900px) {
  body[data-view="friend"] main { max-width: 60rem; }
  .flk-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 32px; }
  .flk-who h1 { font-size: 1.8rem; }
  .flk-what { align-self: center; padding: 24px; border-top: 0; border-radius: 18px; background: var(--sunken); }
  .flk-what h3 { font-size: 1.1rem; }
  .flk-what .fr-terms { gap: 14px; color: var(--ink); font-size: 1rem; }
  .flk-what .fr-tick { background: var(--card, #fff); } /* on the grey panel the soft tints vanish */
}
@media (min-width: 900px) {
  body[data-view^="me-friend"] main { max-width: 64rem; }
  body[data-view="me-friends"] .fr-side { max-width: 40rem; }
  .fr-pills { display: none; } /* ~900: both lists show */
  .fr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .fr-col[data-on="false"] { display: grid; }
}
@media (min-width: 1280px) {
  body[data-view^="me-friend"] main { max-width: none; }
  body[data-view="me-friend"] .fr-side { display: grid; }
  body[data-view="me-friend"] .fr-back { display: none; }
  .fr-page.has-detail { grid-template-columns: 20rem minmax(0, 1fr); gap: 28px; align-items: start; }
  .fr-page.has-detail .fr-side { position: sticky; top: 32px; max-width: none; }
  .fr-pills { display: flex; }
  .fr-cols { grid-template-columns: minmax(0, 1fr); }
  .fr-col[data-on="false"] { display: none; }
  .fr-col .fr-colh { display: none; } /* the pill says which */
  .fr-grid { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 12px; }
}

/* place photos on the place page: 2 across on the narrowest phones, 3 on most, 4 in the desktop column */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pp-grid > p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 339px) { .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
.pp-tile { position: relative; display: grid; gap: 4px; min-width: 0; }
.pp-open { display: block; position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: var(--sunken); cursor: pointer; }
.pp-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-tile.is-cover .pp-open { outline: 3px solid var(--coral); outline-offset: -3px; }
.pp-badge { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700; padding: 3px 7px 3px 5px; border-radius: 999px; background: var(--coral); color: #fff; pointer-events: none; }
.pp-badge .ic { width: 11px; height: 11px; }
.pp-credit { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-acts { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pp-acts { display: flex; gap: 6px; position: absolute; right: 6px; top: 6px; opacity: 0; transition: opacity .15s; }
  .pp-tile:hover .pp-acts, .pp-tile:focus-within .pp-acts { opacity: 1; }
  .pp-acts button { width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: var(--shadow-2); cursor: pointer; }
  .pp-acts button.bad { color: var(--bad); }
  .pp-acts .ic { width: 15px; height: 15px; }
}
.pp-menu .pp-preview { padding: 0; border: 0; background: var(--sunken); border-radius: 14px; overflow: hidden; cursor: zoom-in; }
.pp-menu .pp-preview img { width: 100%; max-height: 42vh; object-fit: contain; display: block; }
.pp-menu .btn-block { min-height: 48px; }
.pp-sep { border: 0; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.pp-confirm { justify-content: flex-end; gap: 8px; }
.pp-confirm > * { flex: 1; min-height: 48px; }

/* a photo shown whole over the page */
.viewer { position: fixed; inset: 0; z-index: 1200; background: rgba(10, 10, 12, .9); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 56px) 16px calc(env(safe-area-inset-bottom, 0px) + 48px); animation: fade .2s ease both; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.viewer-cap { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); margin: 0; text-align: center; color: rgba(255,255,255,.8); font-size: .8rem; }
.viewer-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; cursor: pointer; }
.viewer-x .ic { width: 20px; height: 20px; }

/* Menu photos (place page): the menu's pages as portrait tiles, "Photo from Oct 2026" under each. Phones scroll them
   sideways with a peek of the next; desktop shows them larger, wrapping */
.mp-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 8px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
.mp-row::-webkit-scrollbar { display: none; }
.mp-tile { flex: 0 0 8.5rem; display: grid; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; min-width: 0; }
.mp-shot { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.mp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-tile:active .mp-shot { transform: scale(.98); }
.mp-date { font-size: .76rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-way-in { margin: 4px 0 0; }
.mp-shot .ph-wait { top: 6px; left: 6px; bottom: auto; font-size: .66rem; }
@media (min-width: 900px) {
  .mp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 2px 0 4px; gap: 14px; }
  .mp-tile:hover .mp-shot { box-shadow: var(--shadow-2); }
}

/* the menu photo viewer: pages side by side, one per screen; a page in full size (or a pinch) stops the flipping and
   scrolls on its own */
.viewer.mv { display: block; padding: 0; margin: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; color: #fff; background: rgba(10, 10, 12, .95); }
.viewer.mv::backdrop { background: transparent; }
.mv-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.mv-track::-webkit-scrollbar { display: none; }
.mv.zoomed .mv-track, .mv.pinched .mv-track { overflow-x: hidden; scroll-snap-type: none; }
.mv-page { flex: 0 0 100%; min-width: 0; height: 100%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px calc(env(safe-area-inset-bottom, 0px) + 112px); }
.mv-page img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #fff; cursor: zoom-in; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 12px 40px rgba(0,0,0,.45); }
.mv-page.full { grid-template: auto / auto; place-items: start; overflow: auto; overscroll-behavior: contain; }
.mv-page.full img { max-width: none; max-height: none; cursor: zoom-out; }
.mv-bar { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(calc(100% - 32px), 26rem); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding: 8px 16px; border-radius: 22px; background: rgba(10, 10, 12, .72); color: rgba(255,255,255,.9); font-size: .85rem; text-align: center; }
.mv-dots { flex-basis: 100%; display: flex; justify-content: center; gap: 6px; padding-top: 2px; }
.mv-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.mv-dots i.on { background: #fff; }
.mv-hint { flex-basis: 100%; font-size: .78rem; color: rgba(255,255,255,.82); }
.mv-remove { font: inherit; font-size: .85rem; font-weight: 600; background: none; border: 0; color: rgba(255,255,255,.9); padding: 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mv-nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; display: none; place-items: center; cursor: pointer; }
.mv-nav .ic { width: 22px; height: 22px; }
.mv-nav.prev { left: 24px; } .mv-nav.prev .ic { transform: rotate(180deg); }
.mv-nav.next { right: 24px; }
.mv-nav:disabled { opacity: .3; cursor: default; }
.mv.zoomed .mv-nav, .mv.pinched .mv-nav { display: none; }
@media (min-width: 900px) {
  .mv-nav { display: grid; }
  .mv-page { padding: 64px 104px 112px; }
}
@media (min-width: 1500px) { .mp-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Profile → Friends → What friends see: our places on a friend's cards; phones one list (pills), 900+ both side by side */
.frp-pills { margin-inline: 0; padding-inline: 0; }
.frp-cols { display: grid; gap: 14px; min-width: 0; }
.frp-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.frp-col[data-on="false"] { display: none; }
.frp-colh { margin: 0; display: none; }
.frp-empty { display: grid; gap: 8px; }
.frp-empty > p { margin: 0; text-align: center; color: var(--ink-2); font-weight: 600; }
.frp-sample { width: 100%; opacity: .45; filter: saturate(.6); pointer-events: none; user-select: none; }
/* Hide from friends: each card's switch (What friends see of you), the place screen's row, Log a meal's tick */
.frp-show { display: grid; justify-items: end; gap: 3px; cursor: pointer; }
.frp-state { color: var(--muted); font-weight: 600; font-size: .7rem; }
.frp-foot { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.fr-place.frp-off > :not(.fr-end), .fr-place.frp-off .fr-score { opacity: .45; filter: saturate(.4); }
.frs-card { gap: 6px; }
.frs-card .muted { margin: 0; }
@media (min-width: 900px) {
  .sheet-panel:has(.frp) { max-width: 56rem; }
  .frp-pills { display: none; }
  .frp-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .frp-col[data-on="false"] { display: grid; }
  .frp-colh { display: block; }
}

/* ---------- discover: try next (app.js tryNextNodes; simple Eat's From your friends) ----------
   Phone: one column (friends' places, your want-to-try list, Find more places). 900+: friends' cards in columns, and
   with nothing yet the empty card beside a faded sample. 1100+: the cards beside a sticky side column */
.tn, .tn-main, .tn-side { display: grid; gap: 14px; min-width: 0; align-content: start; }
.tn-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.tn-grid { display: grid; gap: 10px; }
.tn-all { justify-self: start; }
.tn-by { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .8rem; color: var(--ink-2); min-width: 0; }
.tn-by > span:last-child { min-width: 0; margin-left: 2px; }
.tn-dot { width: 16px; height: 16px; font-size: .58rem; }
.tn-next { gap: 10px; }
.tn-step { display: flex; align-items: center; gap: 12px; }
.tn-step-t { flex: 1; min-width: 0; display: grid; }
.tn-step-t small { color: var(--muted); font-size: .82rem; }
.tn-step .linkish { flex: none; font-weight: 650; }
.tn-sample { gap: 10px; }
.tn-fake { opacity: .7; filter: saturate(.7); pointer-events: none; }
.tn-sample .frp-sample { opacity: .7; filter: saturate(.7); }
.tn-want .s-row { grid-template-columns: auto minmax(0, 1fr) auto; } /* nothing rated yet: no stars column */
.tn .fr-place .pc-sub, .s-friends .fr-place .pc-sub { white-space: normal; } /* the distance never gets cut off */
.tn .fr-save, .s-friends .fr-save { padding: 12px 0 12px 12px; margin: -8px 0 -12px; } /* a bigger tap target, same look */
.tn-fake-ph { display: grid; place-items: center; color: var(--ink-2); }
.tn-fake-ph .ic { width: 18px; height: 18px; }
.tn-want .pick-row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
.tn-want .pick-row img, .tn-pick-ico { width: 40px; height: 40px; border-radius: 12px; }
@media (min-width: 1100px) { /* under this, the friends' cards need the whole width */
  .tn { grid-template-columns: minmax(0, 1fr) 22rem; gap: 24px; align-items: start; }
  .tn-side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; padding: 4px 6px 12px; margin: -4px -6px -12px; } /* a long list still reaches its end */
}
@media (min-width: 900px) {
  .tn-main .tn-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
  .tn.tn-empty { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; max-width: 64rem; }
  .s-friends { grid-column: 1 / -1; }
  .s-friends .tn-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); } /* three across at 1280 */
}
@media (max-width: 899px) { .s-eat > .s-friends { order: 1; } .s-eat > .s-side { order: 2; } } /* friends' places before the side card */

/* ---------- simple start: a new household's short app (local/simple.js; app.js viewEatSimple) ---------- */
body.simple .tabs { grid-template-columns: repeat(3, 1fr); max-width: 22rem; }
body.simple .tabs a:is([data-tab="discover"], [data-tab="diary"], [data-tab="stats"]) { display: none; }
body.simple .tabs .tab-me { display: grid; }
body.simple-diary .tabs { grid-template-columns: repeat(4, 1fr); max-width: 28rem; }
body.simple-diary .tabs a[data-tab="diary"] { display: grid; }
@media (min-width: 900px) { body.simple-diary .tabs a[data-tab="diary"] { display: flex; } }
.s-eat, .s-main, .s-side { display: grid; gap: 14px; min-width: 0; }
.s-hero { justify-items: start; padding: 20px 18px; background: linear-gradient(135deg, #FFF1EE, var(--surface) 70%); }
.s-hero h1 { font-size: 1.5rem; }
.s-hero p { margin: 0; max-width: 34ch; line-height: 1.45; }
.s-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 22px; font-size: 1.1rem; }
.s-hero-btn .ic { width: 22px; height: 22px; }
.s-list { display: grid; gap: 8px; }
.s-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 14px; }
.s-row .logo-sm { width: 40px; height: 40px; border-radius: 12px; }
.s-row-t { display: grid; gap: 1px; min-width: 0; }
.s-row-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-row-t small { color: var(--muted); }
.s-more { margin: 0; text-align: center; }
.s-next h2 { font-size: 1.15rem; }
.s-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.s-next-list li { display: flex; align-items: center; gap: 10px; }
.s-next-list .ic { width: 20px; height: 20px; color: var(--primary); flex: none; }
.s-unlock { background: linear-gradient(135deg, #FFF1EE, var(--surface) 70%); }
/* back on Eat after saving a meal in the short app (app.js viewEatSimple): a tick, the place, how far to picks */
.s-saved { display: flex; align-items: flex-start; gap: 12px; animation: rise .4s var(--ease) both; }
.s-saved-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--good-bg); color: var(--good); flex: none; }
.s-saved-ico .ic { width: 18px; height: 18px; }
.s-saved strong { overflow-wrap: anywhere; }
.s-saved .linkish { justify-self: start; margin-top: 4px; font-weight: 600; }
.s-next-list .s-next-done .ic { color: var(--good); } /* the taste setup is done */
.s-drops { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.s-drops .drop { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 18px 10px; }
.s-drops .drop strong { display: block; }
.s-drops .drop span { font-size: .8rem; }
.s-details > summary { cursor: pointer; list-style: none; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); font-weight: 650; }
.s-details > summary::-webkit-details-marker { display: none; }
.s-details > summary::before { content: '+ '; color: var(--primary); }
.s-details[open] > summary::before { content: '− '; }
.s-details > .stack { margin-top: 14px; }
.sheet .s-details > summary { padding: 12px 0; background: none; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; }
@media (max-width: 340px) { .s-row .chip { display: none; } } /* the narrowest phones: name and stars only */
.s-row-ph { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex: none; background: var(--sunken); }
.s-row-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-stars { color: #F5A623; letter-spacing: 1px; white-space: nowrap; }
.s-ghost { border: 1.5px dashed #FFC9C2; box-shadow: none; }
.s-ghost:nth-child(2) { opacity: .7; }
.s-ghost:nth-child(3) { opacity: .45; }
.s-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.s-progress span { height: 8px; border-radius: 999px; background: var(--line); }
.s-progress span.on { background: var(--primary); }
.s-ghost .s-row-ph { display: grid; place-items: center; background: #FFF1EE; color: var(--primary); }
.s-ghost .s-row-ph .ic { width: 20px; height: 20px; }
.s-ghost .s-row-t { gap: 7px; }
.s-ghost .s-row-t i { display: block; height: 10px; width: 85%; border-radius: 999px; background: var(--line); }
.s-ghost .s-row-t i + i { width: 50%; opacity: .6; }
.s-ghost .s-stars { color: #F5A623; opacity: .35; }
.s-ghost-tag { background: #FFF1EE; color: var(--primary); }
@media (max-width: 340px) { .s-ghost .s-ghost-tag { display: inline-flex; } .s-ghost .s-stars { display: none; } }
.s-ghost-cap { margin: -2px 0 0; text-align: center; }
.s-save { justify-self: center; }
.s-tip { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF1EE; color: var(--ink-2); }
.s-tip .ic { flex: none; width: 18px; height: 18px; color: var(--primary); margin-top: 1px; }
/* How Halal Log works (app.js guideSheet): phones page through the steps */
.guide { display: grid; gap: 16px; }
.guide-steps { display: grid; }
.guide-step { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 8px 4px; }
.guide-step[data-on="false"] { display: none; }
.guide-step h3 { font-size: 1.25rem; }
.guide-step p { margin: 0; line-height: 1.45; max-width: 30ch; }
.guide-n { display: none; }
.guide-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #FFF1EE; color: var(--primary); }
.guide-ico .ic { width: 30px; height: 30px; }
.guide-tip { display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--sunken); }
.guide-tip .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.guide-dots { display: flex; justify-content: center; gap: 6px; }
.guide-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--line); transition: width .2s; }
.guide-dots span.on { width: 20px; background: var(--primary); }
.guide-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide-note { margin: 0; text-align: center; }
.guide.last .guide-skip { grid-column: 1 / -1; order: 3; }
@media (min-width: 900px) {
  body[data-view="eat-simple"] main { max-width: 78rem; }
  /* the guide: all three steps side by side, no paging */
  .sheet-panel:has(.guide) { max-width: 56rem; }
  .guide-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .guide-step, .guide-step[data-on="false"] { display: grid; align-content: start; padding: 20px 16px; border-radius: 18px; background: var(--sunken); }
  .guide-dots { display: none; }
  .guide-n { display: block; font-size: .75rem; font-weight: 750; color: var(--muted); letter-spacing: .06em; }
  .guide-btns, .guide.last .guide-btns { display: flex; justify-content: flex-end; }
  .guide.last .guide-skip { order: 0; }
  .s-eat { grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr); gap: 28px; align-items: start; }
  .s-hero { padding: 32px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .s-hero h1 { font-size: 1.7rem; }
  .s-hero > :not(.s-hero-btn) { grid-column: 1; }
  .s-hero-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: auto; padding: 18px 30px; }
  .s-mine .s-list { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  .s-mine .s-ghosts { grid-template-columns: 1fr; }
  .s-row:hover { box-shadow: var(--shadow-2, var(--shadow-1)); }
  .s-more { text-align: left; }
}

/* a place the household already has (app.js dupLine, local/place_match.js): a line under the name field.
   same = in your log (coral), close = maybe (amber). Wraps its buttons under the text when narrow */
.dup-box:empty { display: none; }
/* the place a receipt names, one tap from Place (app.js showChip); only while Place is empty */
.use-chip-row:empty { display: none; }
.card .use-chip-row { margin-top: -4px; }
.use-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1); font: 600 .86rem var(--font); cursor: pointer; }
.use-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.use-chip .ic { width: 16px; height: 16px; flex: none; }
.use-chip:active { transform: scale(.97); }
.dup-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 8px 7px 10px; border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.35; color: var(--ink-2); }
.dup-line.same { background: var(--primary-soft); }
.dup-line.close { background: var(--warn-bg); }
.dup-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); flex: none; }
.dup-line.same .dup-ico { color: var(--primary); }
.dup-line.close .dup-ico { color: var(--warn); }
.dup-ico .ic { width: 14px; height: 14px; }
.dup-text { flex: 1 1 9rem; min-width: 0; }
.dup-text b { color: var(--ink); font-weight: 650; }
.dup-btns { display: flex; gap: 8px; margin-left: auto; }
.dup-open, .dup-no { font: inherit; font-size: .82rem; font-weight: 650; border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; }
.dup-open { background: var(--primary); color: var(--primary-ink); }
.dup-no { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.dup-open:focus-visible, .dup-no:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* a friend's place close to one of ours */
.fr-near { display: flex; align-items: flex-start; gap: 5px; margin: 2px 0 0; font-size: .78rem; line-height: 1.3; color: var(--warn); }
.fr-near .ic { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.fr-near a { color: var(--ink-2); font-weight: 600; }
a.fr-have { color: var(--good); }

/* ---- taste setup (app.js viewTasteSetup, tasteSetupCard): spice and a few dishes, once the household has a meal ---- */
.ts-card { display: grid; gap: 12px; }
.taste-stats.ts-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.taste-stats.ts-stats-1 { grid-template-columns: minmax(0, 1fr); }
.ts-card-t { display: flex; align-items: flex-start; gap: 12px; }
.ts-card-t .sec-ico { flex: none; }
.ts-card-btns { gap: 8px; }
.ts-page { display: grid; gap: 14px; min-width: 0; }
.ts-head { display: grid; gap: 6px; }
.ts-head h1 { margin: 4px 0 0; }
.ts-head p { margin: 0; max-width: 46ch; }
.ts-side { display: contents; }
.ts-spice h2, .ts-dishes h2 { margin: 0; }
.ts-dishes > p { margin: 0; }
.ts-dishes { order: 1; } /* phones: spice, dishes, then Save */
.ts-save { order: 2; display: grid; gap: 10px; justify-items: center; }
.ts-save.savebar { background: var(--surface); }
.ts-restored { margin: 0; color: var(--muted); font-weight: 600; }
.ts-more { order: 3; text-align: center; padding-bottom: 8px; }
.ts-save .btn { width: 100%; }
.ts-status { margin: 0; text-align: center; }
.ts-status:empty { display: none; }
.ts-status.c-bad, .ts-count.c-bad, .ts-need-line { color: var(--bad); }
.ts-need-line { margin: 0; }
.ts-count.c-bad { font-weight: 650; }
.ts-need { scroll-margin-top: 16px; animation: ts-need .9s var(--ease); }
@keyframes ts-need { 0%, 100% { box-shadow: var(--shadow-1); } 30% { box-shadow: 0 0 0 2px var(--bad), var(--shadow-1); } }
.ts-count { white-space: nowrap; }
.ts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ts-dish { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 4px 12px; border-radius: var(--radius-sm); background: var(--sunken); text-align: center; min-width: 0; }
.ts-dish > b { font-size: .9rem; line-height: 1.25; min-height: 2.5em; display: grid; place-items: center; }
.ts-dish .cat-ico { width: 54px; height: 54px; }
.ts-dish .row { flex-direction: column; gap: 2px; }
.ts-dish .stars { gap: 0; }
.ts-dish .stars button { font-size: 1.25rem; padding: 2px 1px; }
.ts-dish .rating-val { font-size: .76rem; color: var(--muted); }
@media (max-width: 340px) { .ts-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { /* narrow desktop: one column as on phones, the dishes four across, Save under a short line */
  body[data-view="me"] main > .ts-page { grid-column: 1 / -1; }
  .ts-page { max-width: 46rem; }
  .ts-save .btn { max-width: 22rem; }
  .ts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .ts-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 1240px) { /* wide desktop: the spice and Save in a sticky column beside the dishes */
  .ts-page { max-width: 1180px; grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr); grid-template-areas: "head head" "side dishes"; column-gap: 24px; row-gap: 18px; align-items: start; }
  .ts-head { grid-area: head; }
  .ts-side { grid-area: side; display: grid; gap: 14px; position: sticky; top: 24px; }
  .ts-dishes { grid-area: dishes; order: 0; }
  .ts-more { grid-column: 2; text-align: left; }
  .ts-save { order: 0; }
  .ts-save.savebar { position: static; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* the column itself is sticky here */
  .ts-save .btn { max-width: none; }
}

/* roadmap board on desktop: two by two (Now and Built first) up to 1280, then four across like a kanban */
@media (min-width: 900px) {
  .rm-pick { display: none; }
  .rm-head { display: flex; }
  .rm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-col { display: grid; }
  .rm-now { order: 1; } .rm-built { order: 2; } .rm-ideas { order: 3; } .rm-next { order: 4; }
  body[data-view="me-roadmap"] :is(.rm-body > .card, .rel-cards) { max-width: 44rem; } /* release notes read as a column */
}
@media (min-width: 1280px) {
  .rm-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rm-col { order: 0; }
}
/* What's new from 1100: the month sits in a narrow rail beside its cards, like a timeline */
@media (min-width: 1100px) {
  .rel-month { grid-template-columns: 8rem minmax(0, 44rem); gap: 24px; align-items: start; }
  .rel-rail { display: grid; gap: 2px; padding-top: 18px; }
  .rel-month.rel-first { grid-template-columns: minmax(0, calc(52rem + 24px)); } /* the latest runs under the heading */
  body[data-view="me-roadmap"] .rel-first .rel-cards { max-width: none; }
}

/* ---------- Profile → Owner dashboard (#/me/owner): one column on phones, two from 900, three wrapper columns from 1280 ---------- */
.own-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.own-head .page-head { margin-bottom: 0; }
.own-head .btn { flex: none; }
.own-head .btn:disabled { box-shadow: none; }
.own-said { margin: 12px 0 0; }
.own-grid { display: grid; gap: 14px; margin-top: 18px; }
.own-grid.own-busy { opacity: .55; transition: opacity .2s; }
.own-stale { grid-column: 1 / -1; margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.own-stale .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.own-card h2 { margin: 0; }
.own-col { display: contents; }
.own-col, .own-col > *, .own-card, .own-card > *, .own-card > * > * { min-width: 0; }
.own-o1 { order: 1; } .own-o2 { order: 2; } .own-o3 { order: 3; } .own-o4 { order: 4; } .own-o5 { order: 5; } .own-o6 { order: 6; } .own-o7 { order: 7; }
.own-missing { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn); font-size: .86rem; font-weight: 600; }
.own-missing .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.own-rows { display: grid; }
.own-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.own-row:first-child { border-top: 0; padding-top: 2px; }
.own-lbl { font-weight: 600; font-size: .92rem; }
.own-sub { display: block; font-size: .8rem; color: var(--muted); font-weight: 500; }
.own-val { font-size: .86rem; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.own-st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.own-st .ic { width: 13px; height: 13px; }
.own-st.good { background: var(--good-bg); color: var(--good); }
.own-st.warn { background: var(--warn-bg); color: var(--warn); }
.own-st.bad { background: var(--bad-bg); color: var(--bad); }
.own-big { font-size: 1.7rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.own-big small { font-size: .95rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.own-bar { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.own-bar i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.own-bar.warn i { background: var(--warn); }
.own-bar.bad i { background: #A62B2B; } /* deeper than the coral today bar */
.own-meter { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.sec-head + .own-meter { border-top: 0; padding-top: 2px; }
.own-top { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; }
.own-top b { font-weight: 600; }
.own-meter .own-top span { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.own-cap { font-size: .78rem; color: var(--muted); }
.own-strip { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.own-strip i { flex: 1; background: var(--ink); border-radius: 3px 3px 1px 1px; opacity: .85; min-height: 2px; }
.own-strip i.today { background: var(--primary); opacity: 1; }
.own-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.own-tiles div { background: var(--sunken); border-radius: var(--radius-sm); padding: 12px 14px; }
.own-tiles b { display: block; font-size: 1.45rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.own-tiles span { font-size: .8rem; color: var(--ink-2); font-weight: 500; }
.own-tiles small { display: block; margin-top: 2px; font-size: .74rem; }
.own-phase { display: grid; gap: 6px; padding: 8px 0; }
.own-phase .own-top .muted { white-space: nowrap; }
.own-rels { display: grid; margin-top: 8px; }
.own-rels > .eyebrow { margin-bottom: 4px; }
.own-rel { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.own-rel-t { font-weight: 600; }
.own-note { margin: 0; font-size: .8rem; color: var(--muted); }
.own-spend { display: grid; gap: 8px; }
.own-limits { padding-top: 10px; border-top: 1px solid var(--line); }
.own-note.own-warn { color: var(--warn); font-weight: 600; }
.own-empty { grid-column: 1 / -1; justify-items: center; text-align: center; padding: 40px 20px; }
.own-empty h2 { margin: 10px 0 4px; }
.own-empty-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
@media (min-width: 900px) and (max-width: 1279px) { /* two flowing columns, so a short card leaves no hole */
  .own-grid { display: block; columns: 2; column-gap: 14px; }
  .own-grid > .own-col > *, .own-stale, .own-empty { break-inside: avoid; margin-bottom: 14px; }
  .own-stale, .own-empty { column-span: all; }
}
@media (min-width: 900px) {
  body[data-view="me-owner"] .tabs a[data-tab="stats"] { background: none; color: var(--ink-2); } /* Profile has its own row here */
}
@media (min-width: 1280px) {
  .own-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .own-col { display: grid; gap: 14px; align-content: start; }
  .own-col > * { order: 0; }
}
@media (min-width: 1600px) { .own-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .own-tiles.own-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Log a meal: Start over sits under the form, quiet (tap again to confirm) */
.start-over { text-align: center; margin: 4px 0 8px; }
.start-over .linkish { color: var(--muted); }

/* ---------- dish page (#/dish/<place>/<name>): one dish across visits. Phone: one column (photos, the dish, halal,
   spice, visits); desktop: photos and visits on the left, the dish in a sticky column on the right ---------- */
a.dish-link, a.order-tile { color: inherit; text-decoration: none; }
.featured-link { display: contents; color: inherit; text-decoration: none; }
a.order-tile { transition: transform .2s var(--spring); }
a.order-tile:active { transform: scale(.98); }
a.dish-link:hover, a.item-name:hover { color: var(--primary); }
a.item-name { color: inherit; text-decoration: none; }
.dish-split, .dish-main, .dish-side, .dish-facts { display: contents; }
.dish-photos { order: 1; }
.dish-head { order: 2; }
.dish-halal { order: 3; }
.dish-spice { order: 4; }
.dish-visits { order: 5; }
.dish-photos { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }
.dish-photos::-webkit-scrollbar { display: none; }
.dish-shot { position: relative; flex: none; width: min(78vw, 300px); aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--sunken); box-shadow: var(--shadow-1); scroll-snap-align: start; cursor: zoom-in; animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.dish-photos.n1 .dish-shot, .dish-photos.n0 .dish-shot { width: 100%; }
.dish-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.dish-shot:hover img { transform: scale(1.04); }
.dish-shot-cap { position: absolute; left: 10px; bottom: 10px; font-size: .72rem; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff;
  white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.dish-noshot { display: grid; place-content: center; justify-items: center; gap: 6px; cursor: default; aspect-ratio: auto; height: 120px; box-shadow: none; }
.dish-noshot .cat-ico { width: 52px; height: 52px; }
.dish-noshot .cat-ico img { width: 100%; height: 100%; }
.dish-more { flex: none; align-self: center; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--sunken); font: inherit; font-size: .84rem; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.dish-head { gap: 10px; }
.dish-head h1 { margin: 0; overflow-wrap: anywhere; }
.dish-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dish-title .btn-sm { flex: none; }
.dish-at { margin: 0; }
.dish-at a { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.dish-score { display: flex; align-items: baseline; gap: 8px; }
.dish-score .star { color: var(--star); font-size: 1.3rem; align-self: center; }
.dish-score b { font-size: 2rem; font-weight: 750; letter-spacing: -.02em; line-height: 1; }
.dish-actions { flex-wrap: wrap; }
.dish-actions button[disabled] { opacity: .6; }
.dish-visit-list { padding-block: 6px; }
.dish-visit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 0; align-items: start; }
.dish-visit + .dish-visit { border-top: 1px solid var(--line); }
.dish-visit .people-scores { gap: 6px; }
.dish-visit-spice { gap: 6px; }
.dish-spice .spread { padding: 4px 0; }
.dish-spice .spread + .spread { border-top: 1px solid var(--line); padding-top: 10px; }
.saves-skip { margin-top: 4px; }
.saves-skip .suggest-ph { background: var(--surface); color: var(--muted); }
.dish-visit-end { gap: 10px; flex-wrap: nowrap; }
button.dish-visit-edit { border: 0; font-family: inherit; cursor: pointer; }
.dish-desc b { font-weight: 650; color: var(--ink-2); }
@media (min-width: 900px) {
  .dish-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); gap: 24px; align-items: start; }
  .dish-main, .dish-side { display: grid; gap: 18px; min-width: 0; }
  .dish-side { position: sticky; top: 24px; } /* only the dish card: short enough to stay in view */
  .dish-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 18px; align-items: start; }
  .dish-photos { order: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; overflow: visible; margin: 0; padding: 0; }
  .dish-shot { width: auto; aspect-ratio: 1; }
  .dish-photos .dish-shot:first-child { grid-column: span 2; grid-row: span 2; }
  .dish-photos.n1 { grid-template-columns: 1fr; }
  .dish-photos.n1 .dish-shot { grid-column: auto; grid-row: auto; aspect-ratio: 1; max-width: 440px; } /* one photo near its real size: menu photos are small, a wide box blurs and crops them */
  .dish-photos.n0 .dish-shot { grid-column: auto; grid-row: auto; height: 180px; }
  .dish-photos.n2 { grid-template-columns: 1fr 1fr; }
  .dish-photos.n2 .dish-shot:first-child { grid-column: auto; grid-row: auto; }
  .dish-photos .dish-more { grid-column: -2; align-self: end; justify-self: end; }
  .dish-head, .dish-visits, .dish-spice, .dish-halal { order: 0; }
  .dish-head { padding: 22px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .dish-head h1 { font-size: 1.6rem; }
  .dish-actions > button { flex: 1 1 100%; } /* the dish card is narrow here: the two buttons stack full width */
  .dish-photos:not(.n2) .dish-shot:not(:first-child) .dish-shot-cap { display: none; } /* small tiles: the photo viewer names them */
}

/* ---- Get the app (app.js cardSlot, gaSheet): the home-screen app offered after the first meal, and kept in Profile ---- */
.ga-slot[hidden], .set-row[hidden] { display: none; }
.ga-card { display: grid; gap: 10px; padding: 14px 16px; }
.ga-card .ts-card-btns { align-items: center; flex-wrap: wrap; }
.ga-copy { gap: 6px; }
.ga-copy:empty { display: none; }
.ga-link { width: 100%; }
.ga-sheet { gap: 14px; }
.ga-sheet .notice { display: grid; gap: 6px; justify-items: start; }
.ga-sheet .btn .ic, .ga-card .btn .ic { width: 16px; height: 16px; }
.ga-steps { display: grid; gap: 12px; }
.ga-step { background: var(--sunken); border-radius: 16px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.ga-n { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.ga-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: .8rem; display: grid; place-items: center; flex: none; }
.ga-pic { background: var(--surface); border-radius: 12px; padding: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.ga-bar { display: flex; justify-content: space-around; align-items: center; color: var(--ink-2); }
.ga-bar > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.ga-bar .ic, .ga-menu-row .ic { width: 20px; height: 20px; }
.ga-bar .hl { background: var(--primary-soft); color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.ga-bar .hl .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.ga-lead { margin: 0; font-weight: 600; }
.ga-sheet p.small.muted { color: var(--ink-2); }
.ga-bar.ga-url { justify-content: space-between; gap: 10px; }
.ga-bar.ga-url > span.ga-urlbox { flex: 1; width: auto; height: 32px; border-radius: 999px; background: var(--sunken); justify-content: start; padding: 0 14px; font-size: .86rem; color: var(--muted); overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.ga-menu-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 6px; font-size: .92rem; color: var(--ink-2); }
.ga-menu-row + .ga-menu-row { border-top: 1px solid var(--line); }
.ga-menu-row.on { background: var(--primary-soft); border-radius: 10px; color: var(--ink); font-weight: 650; box-shadow: 0 0 0 2px rgba(255, 65, 65, .3); border-top-color: transparent; }
.ga-benefits { display: grid; gap: 8px; }
.ga-benefits > div { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
@media (min-width: 900px) {
  .ga-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ga-card .ga-copy { grid-column: 1 / -1; }
  .sheet-panel:has(.ga-sheet) { max-width: 46rem; }
  .ga-steps { grid-template-columns: 1fr 1fr; gap: 14px; }
}


/* Log a meal: halal + chicken quick-pick under the Place field */
.halal-pick:empty { display: none; }
.halal-pick, .halal-card, .halal-card .field { min-width: 0; }
.halal-card .seg { display: flex; } .halal-card .seg button { flex: 1; padding: 7px 6px; }
.halal-pick { margin: -2px 0 12px; }
.halal-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0 4px; }
.halal-card { display: grid; gap: 10px; background: var(--bg, #F7F7F7); border-radius: 16px; padding: 12px 14px; }
.halal-card .field { margin: 0; }
.halal-card .seg button.cur:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px var(--primary); }
.halal-card p { margin: 0; }
@media (min-width: 1600px) { /* room for words on the three pick buttons */
  .picks-btns .mini-btn { width: auto; padding: 0 14px 0 11px; display: flex; font-size: .84rem; }
  .picks-btns .mini-lbl { display: inline; }
}

/* Log a meal, simple view: a dish row is its name and your stars; the rest opens with Details */
.entry.compact:not(.open) :is(.ate-field, .grid2, .drop) { display: none; }
.entry.compact .entry-more { justify-self: start; }
.overall-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 650; }
.overall-line[hidden], .field [hidden] { display: none; }
.entry.compact:not(.open) .pr-other { display: none; }
.ga-pic:empty { display: none; }

/* a phone keyboard is up (local/keyboard.js): the tab bar and Save bar step aside so they never cover the field */
body.kb-open .tabs, body.kb-open .savebar { display: none; }
body.kb-open[data-view]:has(main .savebar)::after { display: none; }

/* dish type (local/dish_types.js): the picker pills, the chip on a Diary item and the Log row's opener */
.dtypes { display: flex; flex-wrap: wrap; gap: 6px; }
.dtype { font: inherit; font-size: .84rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: transform .2s var(--spring); }
.dtype:active { transform: scale(.96); }
.dtype.on { background: var(--coral); border-color: var(--coral); color: #fff; }
.dtype.guess { border-style: dashed; background: var(--coral-bg); border-color: var(--coral); color: var(--coral); }
.item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.dtype-chip { background: var(--sunken); color: var(--ink-2); font-weight: 500; }
.dtype-row { display: grid; }
.dtype-sum { font: inherit; font-size: .88rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 9px 12px; color: var(--ink); cursor: pointer; text-align: left; }
.dtype-sum b { color: var(--coral); font-weight: 600; font-size: .82rem; }
.entry.compact:not(.open) .dtype-row { display: none; }

/* Eat on phones (below the 900px sidebar layout): the budget as a sentence, the meal and who's going as pills, one places row.
   Desktop keeps the card, title, chips and buttons (.wide-only); phones hide those (.ph-only is for the new parts) */
@media (min-width: 900px) { .ph-only { display: none !important; } }
@media (max-width: 899.98px) { .wide-only { display: none !important; } .map-wrap.phone-map-off { display: none; } }
.budget-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-chip strong { color: var(--ink); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.budget-chip.budget-alone { width: max-content; max-width: 100%; margin: -2px auto 0; min-height: 0; padding: 5px 11px; font-size: .76rem; }
.pick-pills .pick-pill { flex-shrink: 0; } .pick-pills .budget-chip { flex: 0 1 auto; min-width: 0; } /* the meal pill keeps its words; a long budget cuts off */
@media (max-width: 340px) { .pick-pills { gap: 6px; } .pick-pills .pick-pill, .pick-pills .budget-chip { padding-inline: 9px; } }
.budget-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.budget-chip.c-good .budget-dot { color: var(--good); }
.budget-chip.c-warn { background: var(--warn-bg); color: var(--warn); box-shadow: none; } .budget-chip.c-warn strong { color: var(--warn); }
.budget-chip.c-bad { background: var(--bad-bg); color: var(--bad); box-shadow: none; } .budget-chip.c-bad strong { color: var(--bad); }
.pick-pills { display: flex; align-items: center; gap: 8px; flex-basis: 100%; min-width: 0; }
.pick-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 110px); min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--coral-bg); box-shadow: 0 0 0 1.5px var(--coral); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pick-pill:active { transform: scale(.96); }
.pill-caret { display: inline-grid; flex: none; color: var(--coral); } .pill-caret svg { width: 14px; height: 14px; }
.pick-pill[hidden] { display: none; }
.picks-more { margin: -2px 0 0; text-align: center; font-size: .88rem; color: var(--muted); }
.picks-more .linkish { font: inherit; font-weight: 650; color: var(--coral); padding: 10px 8px; min-height: 40px; }
.places-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; }
.places-head h2 { margin: 0; font-size: 1.15rem; white-space: nowrap; }
.places-tools { display: flex; align-items: center; gap: 8px; }
.view-toggle { flex: none; }
.map-far { position: absolute; left: 12px; bottom: 12px; z-index: 600; font: inherit; font-size: .82rem; font-weight: 650; border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(0,0,0,.12); }
.map-far[hidden] { display: none; }
.map-far:active { transform: scale(.94); }
.places-note { margin: -6px 0 0; }
.sheet-chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
.missing-line { display: block; text-align: center; padding: 8px 0 4px; }
@media (max-width: 359px) { /* narrowest phones: the places row gives up its icon and some padding so List/Map fits */
  .places-head { gap: 6px; padding-inline: 12px; }
  .places-head h2 { font-size: 1rem; }
  .places-head .fchip .ic { display: none; }
  .places-head .fchip { padding: 8px 11px; }
  .places-tools { gap: 6px; }
}

/* Delivery app links → what the nightly job found */
.am-found { display: grid; gap: 10px; }
.am-found:empty { display: none; }
.am-found-app { display: grid; gap: 8px; padding-bottom: 6px; }
.am-found-app h5 { margin: 0; font-size: .85rem; font-weight: 600; }
.am-cand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; background: #fff; border-radius: 14px; }
.am-cand-txt { display: grid; gap: 2px; flex: 1 1 100%; }
.am-cand .pill-sm { width: auto; flex: none; }
.am-cand .pill-sm.ok { color: #1e7a46; }
.am-cand a { padding: 8px 4px; }
.am-cand .btn-soft { margin-left: auto; }
.am-cand .am-use:disabled { background: #e8f5ec; color: #1e7a46; opacity: 1; }

/* Eat: the household's open Dinner duel, one compact row above the picks */
.duel-card { padding: 12px 14px; gap: 10px; }
.duel-slot { display: grid; } /* Eat: holds the open duel's card, hidden when there's none */
.duel-card .inbox-ico { color: var(--coral); background: var(--coral-bg); }
.duel-wait { font-size: .9rem; font-weight: 650; color: var(--coral); }

/* the halal source and last check, right under the place header's chips */
.halal-glance { margin: -4px 0 0; }
.hh-lock { border: 0; margin: 0; padding: 0; min-width: 0; }
.hh-exit { border: 1.5px solid var(--primary); border-radius: 18px; padding: 12px 14px; display: grid; gap: 8px; background: var(--primary-soft); }
.hh-exit p { margin: 0; } .hh-exit .hh-ask-btns { flex-wrap: wrap; justify-content: flex-start; }
.hh-linkbox .c-bad { margin: 0; }
.hh-exit .btn-sm { min-height: 40px; }