* { box-sizing: border-box; margin: 0; }

:root {
  /* dark premium theme */
  --bg: #0f0d0a;            /* near-black warm */
  --bg-soft: #1a1712;
  --sheet: #f7f3ec;         /* the white content sheet */
  --card: #16130e;          /* dark dish card */
  --card-line: #2a251d;
  --ink-light: #f4efe5;     /* text on dark */
  --muted-light: #9d937f;
  --ink-dark: #17130d;      /* text on sheet */
  --muted-dark: #857c6b;
  --gold: #d5ab5f;
  --gold-deep: #b98f43;
  --must: #2e9a58;
  --must-soft: #17301f;
  --notbad: #f4b942;
  --pass: #8b8577;
  --radius: 16px;
  --phone-w: 430px;         /* the phone frame; anything fixed-position matches it */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--ink-light);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- dark chrome: header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1100;
  background: rgba(15,13,10,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #241f17;
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  font-family: var(--serif); font-size: 22px; font-weight: 800;
  display: flex; align-items: baseline; gap: 9px; color: var(--ink-light);
}
.brand > span:first-of-type { color: var(--gold); font-style: italic; }
.brand .loc {
  font: 600 11px/1 -apple-system, sans-serif; color: var(--muted-light);
  letter-spacing: .12em; text-transform: uppercase;
}
/* area switcher — reads as a label, behaves as a select */
.loc-select {
  border: 1px solid #322b1e; background: var(--bg-soft); color: var(--gold);
  border-radius: 99px; padding: 4px 10px; cursor: pointer; outline: none;
  font: 600 11px/1 -apple-system, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
}
.loc-select:hover { border-color: var(--gold); }
.loc-select option { background: var(--bg-soft); color: var(--ink-light);
  letter-spacing: normal; text-transform: none; font-size: 13px; }
.drawer-sel { letter-spacing: normal; text-transform: none; font-size: 12.5px;
  padding: 5px 10px; }
.sim { display: flex; align-items: center; gap: 10px; }
.sim > label { font-size: 11px; color: var(--muted-light); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; }
.tier-pills { display: flex; background: var(--bg-soft); border-radius: 99px; padding: 3px;
  border: 1px solid #2a251c; }
.tier-pill {
  border: 0; background: transparent; padding: 4px 11px; border-radius: 99px;
  font: 600 13px inherit; color: var(--muted-light); cursor: pointer;
}
.tier-pill.active { background: var(--gold); color: #1a1409; }

/* ---------- dark chrome: tabs ---------- */
.tabs {
  max-width: 1080px; margin: 14px auto 0; padding: 0 20px;
  display: flex; align-items: center; gap: 4px;
}
.tab {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 99px;
  font: 700 14px inherit; color: var(--muted-light); cursor: pointer;
}
.tab.active { background: #241e14; color: var(--gold); }
.tab-spacer { flex: 1; }
.add-btn {
  border: 0; background: var(--gold); color: #201708; padding: 9px 18px;
  border-radius: 99px; font: 800 13px inherit; cursor: pointer;
  box-shadow: 0 2px 14px rgba(213,171,95,.3);
}
.add-btn:hover { filter: brightness(1.06); }

/* ---------- My Menu hero carousel (dark zone) ---------- */
#mineHero { max-width: 1080px; margin: 16px auto 0; padding: 0 20px; }
.hero {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 21 / 10; min-height: 240px; background: var(--bg-soft);
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,8,5,.88) 22%, rgba(10,8,5,.25) 60%, rgba(10,8,5,.05));
}
.hero-copy {
  position: absolute; left: 28px; top: 50%; transform: translateY(-52%);
  max-width: 58%;
}
.hero-eyebrow {
  font: 700 11px/1 inherit; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.hero-title {
  font-family: var(--serif); font-weight: 700; font-style: italic;
  font-size: clamp(24px, 4vw, 40px); line-height: 1.08; color: #f6efe1;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.hero-sub { margin-top: 8px; font-size: 13px; color: rgba(244,239,229,.75); }
.hero-sub b { color: var(--gold); font-weight: 700; }
.hero-dots {
  position: absolute; left: 28px; bottom: 16px; display: flex; gap: 7px;
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(246,239,225,.35); cursor: pointer;
}
.hero-dot.active { background: var(--gold); }
/* carousel arrows + settings */
/* The hero changes by swipe, by dot, or on its own — each new slide is a
   fresh element, so mounting it is the transition. */
@keyframes hero-fade { from { opacity: 0 } to { opacity: 1 } }
.hero img, .hero-copy { animation: hero-fade .45s ease both; }
@media (prefers-reduced-motion: reduce) {
  .hero img, .hero-copy { animation: none; }
}
/* same coin as the carousel arrows, parked in the opposite corner */
.hero-settings {
  position: absolute; right: 16px; bottom: 16px;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(213,171,95,.45); background: rgba(16,13,9,.62);
  backdrop-filter: blur(6px);
  color: var(--gold); cursor: pointer; transition: background .15s;
}
.hero-settings .ic { width: 17px; height: 17px; }
.hero-settings:hover { background: rgba(16,13,9,.88); }

/* picker modal */
.picker-sub { font-size: 13px; color: var(--muted-light); line-height: 1.5; }
.picker-sub b { color: var(--gold); }
#pickerCount { color: var(--ink-light); font-weight: 700; }
.picker-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow-y: auto; padding-right: 4px;
}
.pick-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: #14110c; border: 1.5px solid #2c2519; border-radius: 12px;
  padding: 8px 12px 8px 8px; cursor: pointer; text-align: left; color: inherit;
  font: inherit;
}
.pick-row.on { border-color: var(--gold); background: #1d1710; }
.pick-row:disabled { opacity: .38; cursor: default; }
.pick-thumb {
  width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: none;
  background: #241f17;
}
.pick-info { flex: 1; min-width: 0; }
.pick-name {
  font-weight: 700; font-size: 13px; color: var(--ink-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-rest { font-size: 11.5px; color: var(--muted-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-star { font-size: 17px; flex: none; color: #4a4232; }
.pick-row.on .pick-star { color: var(--gold); }
.pick-order {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  background: var(--gold); color: #201708;
  font: 800 11px/21px inherit; text-align: center;
}
.hero-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; color: var(--muted-light);
}
.hero-empty .big { font-family: var(--serif); font-style: italic; font-size: 24px;
  color: var(--ink-light); }

/* ---------- the white sheet ---------- */
.sheet {
  --sheet-x: 20px;
  max-width: 1080px; margin: 16px auto 0; padding: 22px var(--sheet-x) 40px;
  background: var(--sheet); color: var(--ink-dark);
  border-radius: 26px 26px 0 0; min-height: 62vh;
}
.sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.head-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* how the feed reads — its own line under the filter chips */
.view-row {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  flex: 1 0 100%; width: 100%; margin-top: 2px;
}
.sort-sel {
  flex: none; background: #fff; border-color: #e3dccd; color: var(--muted-dark);
  letter-spacing: normal; text-transform: none; font-size: 12.5px; padding: 7px 10px;
}
.sort-sel:hover { border-color: var(--ink-dark); color: var(--ink-dark); }
.sort-sel option { background: #fff; color: var(--ink-dark); }
.page-title {
  font-family: var(--serif); font-weight: 800; font-size: 34px; color: var(--ink-dark);
}

/* ---------- controls (on sheet) ---------- */
.controls {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px;
}
.search-wrap { position: relative; flex: 1 0 100%; }
.search {
  border: 1.5px solid #e3dccd; border-radius: 99px; padding: 10px 17px;
  font: 14px inherit; background: #fff; outline: none; width: 100%; max-width: 420px;
  color: var(--ink-dark);
}
.search:focus { border-color: var(--gold-deep); }

/* friend typeahead */
.search-sug {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1200;
  width: 300px; max-height: 320px; overflow-y: auto;
  background: var(--card); border: 1px solid #322b1e; border-radius: 14px;
  padding: 6px; box-shadow: 0 12px 34px rgba(10,8,5,.45);
}
.sug-head {
  font: 700 10px/1 inherit; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-light); padding: 7px 9px 6px;
}
.sug-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; border-radius: 10px;
  padding: 7px 9px; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.sug-row:hover, .sug-row.active { background: #221c13; }
.sug-ava {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  color: #fff; font: 700 11px/1 inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.sug-info { flex: 1; min-width: 0; }
.sug-name {
  font-weight: 700; font-size: 13px; color: var(--ink-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sug-name .foodie-tag { color: var(--gold); font-size: 10px; margin-left: 4px; }
.sug-meta { font-size: 11px; color: var(--muted-light); }
.sug-empty { padding: 12px 10px; font-size: 12.5px; color: var(--muted-light); }

/* One list, three kinds of answer. The plate keeps a dish recognisable at a
   glance; the label on the right says which kind without a heading per group,
   since the order is closeness first and kind only breaks ties. */
.sug-thumb {
  width: 30px; height: 30px; border-radius: 7px; flex: none; object-fit: cover;
}
.sug-ava-dish, .sug-ava-place {
  background: #241f17; color: var(--gold);
  border: 1px solid #322b1f;
}
/* the mark is an SVG now, so give it a size the 30px circle can centre */
.sug-ava .ic, .place-ava .ic { width: 16px; height: 16px; display: block; }
.sug-kind {
  flex: none; font: 700 9px/1 inherit; letter-spacing: .14em; text-transform: uppercase;
  color: #6d6452; border: 1px solid #2f2819; border-radius: 99px; padding: 4px 7px;
}

/* a restaurant's name is a way into its page, wherever it is printed */
.place-link { cursor: pointer; text-decoration-color: transparent; }
.place-link:hover {
  color: var(--gold-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}

/* a restaurant's page wears the same profile bar a person's menu does */
.profile-ava.place-ava {
  background: #241f17; color: var(--gold); border-color: #3a3123; font-size: 19px;
}

/* back on a friend's menu: a mark, not a pill — no ring, no word, big enough
   to hit with a thumb */
.back-btn {
  border: 0; background: none; color: var(--muted-dark);
  padding: 4px; margin-left: -4px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.back-btn .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.back-btn:hover { color: var(--ink-dark); }
.back-btn:hover { border-color: var(--ink-dark); color: var(--ink-dark); }
.seg { display: flex; background: #e9e2d3; border-radius: 9px; padding: 3px; }
.seg-btn {
  border: 0; background: transparent; padding: 4px 11px; border-radius: 7px;
  font: 600 12px inherit; color: var(--muted-dark); cursor: pointer; white-space: nowrap;
}
.seg-btn.active { background: #17130d; color: var(--gold); }
/* Sort and cuisine are the same object: a full-width rail of chips. The rail
   runs to the sheet's edge so chips clip there rather than at a gutter, and the
   leading inset sits on the chips themselves so it scrolls away with them. */
.chips-scroll {
  overflow-x: auto; scrollbar-width: none;
  flex: 1 0 100%; width: auto; margin-top: 2px;
  margin-inline: calc(var(--sheet-x, 20px) * -1);
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: 5px; width: max-content; }
.chips-scroll > .chips { padding-inline: var(--sheet-x, 20px); }
/* Course and cuisine both name things on a menu, so they are set like the
   menu: the same Playfair the dish names and prices use, rather than the UI
   sans they were inheriting. It reads a size smaller than a grotesque at the
   same value, hence the bump. */
.chip {
  border: 1px solid #ddd5c4; background: #fff; padding: 5px 14px 6px;
  border-radius: 99px; color: var(--muted-dark); cursor: pointer;
  font: 600 14.5px/1.35 var(--serif); letter-spacing: .005em;
  white-space: nowrap; transition: border-color .15s, color .15s;
}
.chip:hover { border-color: #b8ad97; color: var(--ink-dark); }
.chip.active { border-color: #17130d; background: #17130d; color: var(--gold); }

/* ---------- map (on sheet) ---------- */
#mapWrap { position: relative; margin-bottom: 16px; }
#map {
  height: 42vh; min-height: 270px; border-radius: var(--radius); z-index: 1;
  box-shadow: 0 4px 18px rgba(23,19,13,.15); border: 1px solid #e3dccd;
}
.map-status {
  /* A read-only badge floating over the map — it must not take the clicks of
     the pins underneath it. */
  pointer-events: none;
  position: absolute; left: 12px; bottom: 12px; z-index: 1000;
  background: #17130d; color: var(--gold); border-radius: 99px; padding: 6px 14px;
  font: 700 12px inherit; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* a pin opens its restaurant's best dish */
.dish-pin { cursor: pointer; }
.dish-pin {
  background: #17130d; color: var(--gold); border-radius: 99px;
  font: 800 12px/1 inherit; padding: 6px 9px; white-space: nowrap;
  box-shadow: 0 1px 5px rgba(0,0,0,.35); border: 2px solid var(--gold);
  width: max-content !important; transform: translate(-50%, -50%);
}
.dish-pin.has-must { background: var(--must); color: #fff; border-color: #fff; }
.dish-cluster {
  background: var(--gold); color: #201708; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 13px inherit; border: 3px solid #17130d;
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* ---------- the feed as a menu ---------- */
/* Set in dark ink on the cream sheet, like paper — the inverse of the cards. */
#feed.as-menu {
  display: block; max-width: 720px; margin: 0 auto;
}
.menu-mast { text-align: center; padding: 2px 0 18px; border-bottom: 2px solid var(--ink-dark); }
#feedMast { margin-bottom: 18px; }
.menu-mark {
  font: 600 10.5px/1 inherit; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold-deep);
}
.menu-title {
  font-family: var(--serif); font-weight: 800; line-height: 1.04;
  font-size: clamp(28px, 4.6vw, 40px); color: var(--ink-dark); margin-top: 12px;
  text-wrap: balance;
}
.menu-sub {
  margin-top: 10px; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 15px; color: #5a5143;
}

.course { margin-top: 34px; }
/* the controls already sit above it — don't double the gap */
.course:first-child { margin-top: 8px; }
.course-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.course-head::before, .course-head::after { content: ""; flex: 1; height: 1px; background: #ddd4c2; }
.course-head h3 {
  font: 600 11.5px/1 inherit; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-deep); white-space: nowrap;
}
/* how many dishes the course holds in total, set small beside its name */
.course-count {
  font: 600 10.5px/1 inherit; color: var(--muted-dark); letter-spacing: .08em;
  margin-left: -6px; transform: translateY(-1px);
}

/* A course is a row of pages, four dishes to a page. Snaps by hand; turns on
   its own with a fade, which the .fading class drives.
   The track carries the height of the page you're on — a flex row is otherwise
   as tall as its tallest page, so a last page holding one dish would sit in
   four dishes' worth of empty paper. The height is set in wireCoursePagers and
   moves as part of the same turn. */
.course-track {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  transition: opacity .26s ease, height .26s ease;
}
.course-track::-webkit-scrollbar { display: none; }
.course-track.fading { opacity: 0; }
.course-page { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.course-page .mi:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .course-track { transition: none; } }

/* page dots, Instagram-style: at most five, outer ones shrinking */
.course-dots {
  display: flex; justify-content: center; align-items: center; gap: 7px;
  padding: 12px 0 2px;
}
.cdot {
  width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0;
  background: #cfc6b2; cursor: pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.cdot.on { background: var(--gold-deep); transform: scale(1.25); }
.cdot.sm { transform: scale(.66); opacity: .7; }
.cdot.hide { display: none; }

.mi {
  display: flex; gap: 18px; padding: 15px 4px; border-bottom: 1px solid #e6dfcf;
  cursor: pointer; border-radius: 6px; transition: background .15s;
}
.mi:last-child { border-bottom: 0; }
.mi:hover, .mi:focus-visible { background: rgba(213,171,95,.09); outline: none; }
.mi-main { flex: 1; min-width: 0; }
/* A menu line is a name on the left and a fixed column on the right holding
   the mark and the price. The row never wraps: the name is what gives way,
   over two lines and then an ellipsis, so the prices stay in one true column
   down the page the way they do on a printed menu. */
.mi-line { display: flex; align-items: baseline; gap: 8px; }
.mi-tail { display: flex; align-items: baseline; gap: 6px; flex: none; }
.mi-name {
  font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.25;
  color: var(--ink-dark);
  /* Two lines, then an ellipsis. min-width:0 is what lets a flex item shrink
     below its content width; overflow-wrap keeps one very long word from
     spilling under the price column. -webkit-box is still the only clamp with
     support everywhere, and as a flex item it baseline-aligns on its first
     line — which is what puts the price level with the name's first line. */
  flex: 0 1 auto; min-width: 0; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.mi-star { color: var(--gold-deep); font-size: 12px; flex: none; transform: translateY(-2px); }
/* the verdict stands where the avatars do on a shared menu row; the sheet is
   cream, so it takes the light-ground palette rather than the card one */
.mi-verdict { display: inline-flex; align-items: center; flex: none; }
.mi-verdict .ic { width: 15px; height: 15px; }
.mi-verdict.must { color: var(--must); }
.mi-verdict.notbad { color: var(--gold-deep); }
.mi-verdict.pass { color: var(--pass); }
/* the toggle is two marks, not two words */
#mineLayoutSeg .seg-btn { padding: 5px 9px; display: inline-flex; align-items: center; }
#mineLayoutSeg .ic { width: 15px; height: 15px; }
.mi-leader {
  flex: 1 1 0; min-width: 0;
  border-bottom: 1.5px dotted #c9bfa8; transform: translateY(-5px);
}
.mi-price {
  font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink-dark);
  flex: none; font-variant-numeric: tabular-nums;
}
.mi-from { margin-top: 4px; font: 500 12px/1.4 inherit; color: var(--muted-dark); }
.mi-from b { color: #4a4234; font-weight: 600; }
.mi-say {
  margin-top: 7px; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 14.5px; line-height: 1.5; color: #4a4234; max-width: 56ch;
}
.mi-by { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.mi-by .avatar { border-color: var(--sheet); }
.mi-who { font: 500 11.5px/1 inherit; color: var(--muted-dark); }
.mi-who b { color: #4a4234; font-weight: 600; }
/* The plate sits left of the copy, where the eye lands first — ordered rather
   than moved, so the dish name still comes first for a screen reader. */
.mi-plate {
  width: 92px; height: 92px; flex: none; border-radius: 4px; object-fit: cover;
  order: -1; align-self: flex-start; box-shadow: 0 3px 10px rgba(23,19,13,.22);
}

.menu-legend {
  margin-top: 32px; padding-top: 16px; border-top: 2px solid var(--ink-dark);
  text-align: center; font: 500 12px/1.5 inherit; color: var(--muted-dark);
}
.menu-legend b { color: var(--gold-deep); }

body.mobile .mi { gap: 12px; padding: 13px 2px; }
body.mobile .mi-name { font-size: 17px; }
body.mobile .mi-plate { width: 70px; height: 70px; }
body.mobile .course-head h3 { letter-spacing: .22em; font-size: 10.5px; }
body.mobile .menu-title { font-size: 26px; }

/* ---------- popular this week — editorial rail ---------- */
/* ---------- feed grid: dark cards on the sheet ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 16px;
}
/* Masonry: photos keep their own aspect ratio, so column edges stagger.
   Cards with no photo keep a placeholder block so their chips have somewhere
   to sit. Column flow is top-to-bottom per column, so this is the photo-led
   read — the menu list stays the ranked one. */
.grid.masonry { display: block; column-count: 3; column-gap: 16px; }
.grid.masonry .card { break-inside: avoid; width: 100%; margin: 0 0 16px; }
/* A lazy image has no height until it loads, which would collapse the block
   the rating chips sit on — so keep a floor under it either way. */
.grid.masonry .card-photo:has(img) { aspect-ratio: auto; min-height: 128px; }
.grid.masonry .card-photo:has(img) img { height: auto; }
/* No photo → no photo block. The chips move into a slim bar above the text so
   a text-only tile stays small and the column keeps flowing. */
.grid.masonry .card.nophoto .card-photo {
  aspect-ratio: auto; min-height: 0; height: 34px; background: transparent;
}
.grid.masonry .card.nophoto .card-photo::after { display: none; }
.grid.masonry .card.nophoto .card-body { padding-top: 2px; }
.grid.masonry .card.nophoto .card-body::before {
  content: ""; display: block; height: 1px; background: rgba(255,255,255,.07);
  margin: 0 0 9px;
}
@media (min-width: 1000px) { .grid.masonry { column-count: 4; } }
@media (max-width: 700px) { .grid.masonry { column-count: 2; column-gap: 10px; } }
body.compact .grid.masonry { column-gap: 10px; }
body.compact .grid.masonry .card { margin-bottom: 10px; }
body.mobile .grid.masonry { column-count: 2; column-gap: 10px; }

.empty { text-align: center; color: var(--muted-dark); padding: 54px 0 60px; }
.empty-line {
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink-dark);
  max-width: 26ch; margin: 0 auto; line-height: 1.3;
}
.empty-sub { font-size: 13.5px; margin: 8px auto 0; color: var(--muted-dark); }
.empty-cta {
  margin-top: 18px; border: 0; background: #17130d; color: var(--gold);
  border-radius: 99px; padding: 11px 22px; font: 700 13.5px inherit; cursor: pointer;
}
.empty-cta:hover { background: #241d12; }

.rest-head {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px;
  padding: 12px 2px 0; border-top: 1px solid #e3dccd; margin-top: 6px;
}
.rest-head:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.rest-head h3 { font-family: var(--serif); font-size: 17px; font-weight: 700;
  color: var(--ink-dark); }
.rest-head .meta { font-size: 12px; color: var(--muted-dark); font-weight: 600; }

.card {
  background: var(--card); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 6px 18px rgba(23,19,13,.14);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card[data-dish] { cursor: pointer; }
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(23,19,13,.28);
}
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.card-photo { position: relative; aspect-ratio: 4 / 3; background: #241f17; overflow: hidden; }
.card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.card:hover .card-photo img { transform: scale(1.05); }
/* quiet vignette so the photo reads as lit, and chips stay legible */
.card-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,9,6,.22), rgba(12,9,6,0) 30%,
    rgba(12,9,6,0) 72%, rgba(12,9,6,.3));
}

/* rating chips — frosted glass pills on the photo */
.rate-chips {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2;
  display: flex; justify-content: flex-start; gap: 4px;
  flex-wrap: nowrap; align-items: center;
}
.rc {
  border-radius: 99px; padding: 3px 8px 3px 6px;
  font: 700 11px/1.5 inherit; white-space: nowrap; color: #f6efe1;
  background: rgba(12,10,7,.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  display: inline-flex; align-items: center; gap: 3px;
}
.rc i { font-style: normal; font-size: 11px; }
.rc.must { color: #8fe7ae; border-color: rgba(111,216,152,.4); }
.rc.notbad { color: #f4c96b; border-color: rgba(244,185,66,.35); }
.rc.pass { color: #cfc8b8; }
.rc.foodie { color: var(--gold); border-color: rgba(213,171,95,.55); padding: 3px 7px; }
/* SVG verdicts need a size; the sprite default (20px) dwarfs a chip */
.rc .ic { width: 14px; height: 14px; }
body.compact .card .rc .ic { width: 13px; height: 13px; }
/* In a card foot the verdict sits on solid ground, so it drops the blurred
   plate it needs when floating over a photo — just the mark. */
.card-foot .rc {
  padding: 0; background: none; border: 0; box-shadow: none;
  backdrop-filter: none; display: inline-flex; align-items: center;
}
/* no photo and nothing to overlay → no strip, so no rule under one either */
.grid.masonry .card.bare .card-body::before { display: none; }
/* "Great value" rides alongside the verdict — it is a tag, not a rating */
.rc.value { color: #ffd98a; border-color: rgba(213,171,95,.45);
  background: rgba(48,35,12,.6); padding: 3px 7px 3px 6px; }

/* card body — eyebrow / serif dish name / hairline / social + price */
.card-body {
  --card-pad-x: 14px;
  padding: 12px var(--card-pad-x) 13px;
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}

.card-eyebrow {
  font: 600 10px/1.4 inherit; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dish-name {
  font-family: var(--serif); font-weight: 700; font-size: 16.5px; line-height: 1.22;
  color: #f6efe1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot {
  display: flex; align-items: center; gap: 6px; min-height: 24px;
  margin-top: auto; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07);
}
.card-price {
  margin-left: auto; font-family: var(--serif); font-weight: 800; font-size: 15.5px;
  color: var(--gold); flex: none;
}
.avatars { display: flex; }
.avatar {
  width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--card);
  color: #fff; font: 700 9px/1 inherit; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar + .avatar { margin-left: -7px; }
.avatar[data-friend] { cursor: pointer; }
.avatar[data-friend]:hover { outline: 2px solid var(--gold); outline-offset: -2px; }
.avatar.me { background: var(--gold); color: #201708; }
.rec-who { font-size: 11.5px; color: var(--muted-light); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rec-who b { color: var(--ink-light); }
.note {
  font-size: 11.5px; color: #cfc6b2; font-style: italic;
  /* two lines, then clip — the whole note is on the dish page */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.note::before { content: "“"; } .note::after { content: "”"; }

/* ---------- add-to-my-menu button on cards ---------- */
.card-add {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(213,171,95,.7); background: rgba(16,13,9,.72);
  backdrop-filter: blur(4px);
  color: var(--gold); font: 700 16px/1 inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.card-add:hover { background: var(--gold); color: #201708; }
.card-add.on {
  background: var(--must); border-color: var(--must); color: #fff;
  font-size: 13px; cursor: default;
}
/* Reserve the corner for "+" and clip rather than slide underneath it. */
.rate-chips.has-add { right: 36px; overflow: hidden; }
.via-line { font-size: 11px; color: var(--gold); font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- dish page: full-bleed hero + sheet sliding over it ---------- */
#dishHero {
  position: relative; height: 56vh; min-height: 360px; max-height: 640px;
  overflow: hidden; background: #0c0a07;
}
/* Overscanned so the parallax translate never shows an edge. */
.dhero-media { position: absolute; left: 0; right: 0; top: -14%; height: 118%;
  will-change: transform; }
.dhero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dhero-media.noimg {
  display: flex; align-items: center; justify-content: center;
  font-size: 70px; opacity: .28;
  background: radial-gradient(circle at 50% 32%, #2c2416, #0c0a07 72%);
}
.dhero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,8,5,.52), rgba(10,8,5,0) 24%,
    rgba(10,8,5,0) 50%, rgba(10,8,5,.88) 97%);
}
/* bare, minimal hero icons — no circles, just a soft shadow for legibility */
.dhero-btn {
  position: absolute; top: 20px; z-index: 3;
  border: 0; background: none; padding: 6px;
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.55));
  transition: color .16s, transform .16s;
}
.dhero-btn:hover { color: var(--gold); transform: scale(1.08); }
.dhero-back { left: 18px; }
.dhero-copy {
  position: absolute; left: 0; right: 0; bottom: 58px; z-index: 2;
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
}
.dhero-eyebrow {
  font: 700 11px/1 inherit; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 11px; text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
/* clean bold sans over the photo — readable at a glance, like the reference */
.dhero-title {
  font-weight: 800; line-height: 1.06; letter-spacing: -.01em;
  font-size: clamp(28px, 4.4vw, 46px); color: #fff; max-width: 820px;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.dhero-rest {
  margin-top: 9px; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.dhero-rest b { color: var(--gold); }
.dhero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.dhero-price {
  font-family: var(--serif); font-weight: 800; font-size: 27px; color: var(--gold);
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}

/* the sheet rides up over the hero, with a grab handle like a bottom sheet */
body.dishview .sheet {
  margin-top: -36px; position: relative; z-index: 5;
  border-radius: 30px 30px 0 0; padding-top: 14px;
  box-shadow: 0 -22px 48px rgba(6,5,3,.5);
}
body.dishview .sheet::before {
  content: ""; display: block; width: 44px; height: 4px; border-radius: 99px;
  background: #d8d0bf; margin: 0 auto 20px;
}
body.dishview .sheet-head { display: none; }

#dish { display: flex; flex-direction: column; gap: 28px; }
/* the add action floats on the seam between the photo and the sheet */
.dish-float {
  position: absolute; top: -28px; right: 26px; z-index: 6;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--gold); color: #201708; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 10px rgba(213,171,95,.35);
  transition: transform .18s ease, filter .18s ease;
}
.dish-float:hover { transform: scale(1.07); filter: brightness(1.06); }
.dish-float.on {
  background: var(--must); color: #fff; font-size: 22px; cursor: default;
}
.dish-float.on:hover { transform: none; filter: none; }
.dish-lede { display: flex; flex-direction: column; gap: 9px; max-width: 820px; }
.lede-desc { font-size: 15px; line-height: 1.65; color: #453e30; }
.lede-at { font-size: 13px; color: var(--muted-dark); }
.lede-at b { color: var(--ink-dark); }
.cap { text-transform: capitalize; }   /* cuisine tags are stored lowercase */
.lede-summary { font-size: 13.5px; color: var(--muted-dark); }
.lede-summary b { font-weight: 700; }
.lede-summary b.must { color: #1f7a44; }
.lede-summary b.notbad { color: #9a6a0a; }
.lede-summary b.pass { color: #6b6353; }

/* ---------- dish page without a photo: the sheet opens on the dish ---------- */
body.nophoto.dishview .sheet { margin-top: 0; box-shadow: none; padding-top: 6px; }
body.nophoto.dishview .sheet::before { display: none; }
.dish-card {
  background: var(--card); color: var(--ink-light); border-radius: 22px;
  padding: 14px 20px 20px; margin: 14px 0 4px;
  box-shadow: 0 10px 30px rgba(23,19,13,.18);
}
.dish-card-bar { display: flex; justify-content: space-between; align-items: center;
  margin: 0 -6px 14px; }
.dcard-btn {
  border: 0; background: none; padding: 6px; color: #fff; font-size: 22px;
  line-height: 1; cursor: pointer; transition: color .16s;
}
.dcard-btn:hover { color: var(--gold); }
.dcard-eyebrow {
  font: 700 10.5px/1 inherit; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.dcard-title {
  font-family: var(--serif); font-weight: 800; line-height: 1.08;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: -.01em;
}
.dcard-rest { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.85); }
.dcard-rest b { color: var(--gold); }
.dcard-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.dcard-price { font-family: var(--serif); font-weight: 800; font-size: 24px; color: var(--gold); }
.dcard-photo {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 9px;
  border: 1px dashed rgba(213,171,95,.55); background: rgba(213,171,95,.07);
  color: var(--gold); border-radius: 99px; padding: 11px 18px 11px 14px;
  font: 700 13px inherit; cursor: pointer; transition: background .15s, border-color .15s;
}
.dcard-photo .ic { width: 18px; height: 18px; }
.dcard-photo:hover { background: rgba(213,171,95,.14); border-color: var(--gold); }
.dcard-photo:disabled { opacity: .5; cursor: default; }
.dish-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* everything you can do to this dish, as marks rather than sentences */
.dish-act {
  width: 40px; height: 40px; border-radius: 50%; flex: none; padding: 0;
  border: 1px solid #ddd5c4; background: #fff; color: var(--muted-dark);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.dish-act .ic { width: 19px; height: 19px; }
.dish-act:hover { border-color: var(--ink-dark); color: var(--ink-dark); }
.dish-act:disabled { opacity: .45; cursor: default; }
.dish-act.danger:hover { border-color: #c0503f; color: #c0503f; background: #fdf3f1; }
/* your own words, set as the quote they are */
.lede-note {
  font-family: var(--serif); font-style: italic; font-size: 16px; color: #453e30;
  margin-top: 2px;
}
.lede-note::before { content: "“"; } .lede-note::after { content: "”"; }
.dish-cta {
  border: 0; background: var(--gold); color: #201708; padding: 11px 20px;
  border-radius: 99px; font: 800 13px inherit; cursor: pointer;
  box-shadow: 0 2px 12px rgba(213,171,95,.35);
}
.dish-cta:hover { filter: brightness(1.06); }
.dish-cta.on {
  background: #e8f3ea; color: #1f7a44; border: 1px solid #bfe0c9;
  cursor: default; box-shadow: none;
}
.dish-ghost {
  border: 1px solid #d9d1c0; color: #6f6757; text-decoration: none; background: #fff;
  padding: 10px 17px; border-radius: 99px; font: 700 12.5px inherit;
  display: inline-flex; align-items: center;
}
.dish-ghost:hover { border-color: var(--ink-dark); color: var(--ink-dark); }

.dish-sec { display: flex; flex-direction: column; gap: 12px; }
.dish-sec-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid #e3dccd; padding-bottom: 8px;
}
.dish-sec-head h3 {
  font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink-dark);
}
.dish-sec-head .meta { font-size: 12px; font-weight: 600; color: var(--muted-dark); }
.dish-none { font-size: 13px; color: var(--muted-dark); padding: 2px 2px 6px; }

/* friends' takes on this dish */
.takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; }
.take {
  display: flex; gap: 11px; background: var(--card); border: 1px solid var(--card-line);
  border-radius: 14px; padding: 12px 14px;
}
.take[data-friend] { cursor: pointer; }
.take[data-friend]:hover { border-color: var(--gold); }
.take-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  color: #fff; font: 700 12px/1 inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.take.me .take-ava { color: #201708; }
.take-body { flex: 1; min-width: 0; }
.take-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.take-top b { font-size: 13px; color: var(--ink-light); }
.take-top .foodie-tag { color: var(--gold); font-size: 10px; font-weight: 700; }
.take .rc { box-shadow: none; }
.take-when { font-size: 11px; color: var(--muted-light); margin-left: auto; }
.take-top:has(.take-edit) .take-when { margin-left: auto; }
.take-note { margin-top: 5px; font-size: 12.5px; font-style: italic; color: #cfc6b2; }
.take-note::before { content: "“"; } .take-note::after { content: "”"; }

/* Everyone's photos of the dish sit under their own take, which is also where
   you can tell whose they are. Tapping one sends it up to the hero. */
.take-shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.shot-thumb {
  width: 56px; height: 56px; padding: 0; flex: none; overflow: hidden; cursor: pointer;
  border-radius: 9px; border: 1px solid #2e281d; background: #17140e;
  transition: border-color .15s, transform .12s;
}
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-thumb:hover { border-color: var(--gold); transform: translateY(-1px); }

/* a pencil, not a sentence — the take stays one line tall */
.take-edit {
  border: 0; background: transparent; color: var(--muted-light); cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%; padding: 0; margin: -4px -6px -4px 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.take-edit .ic { width: 15px; height: 15px; }
.take-edit:hover { color: var(--gold); background: rgba(213,171,95,.12); }

/* where it is */
.where { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
#dishMap {
  height: 290px; border-radius: var(--radius); z-index: 1;
  border: 1px solid #e3dccd; box-shadow: 0 4px 18px rgba(23,19,13,.15);
}
.where-info {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
}
/* ghost button sits on a dark card here, not the light sheet */
.where-info .dish-ghost { background: transparent; border-color: #3a3223;
  color: var(--muted-light); }
.where-info .dish-ghost:hover { border-color: var(--gold); color: var(--gold); }
.where-name {
  font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink-light);
}
.where-addr { font-size: 12.5px; line-height: 1.45; color: var(--muted-light); }
.where-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  border: 1px solid #3a3223; color: var(--muted-light); border-radius: 99px;
  padding: 3px 10px; font: 600 11px inherit;
}
.where-stat { font-size: 12.5px; color: var(--muted-light); margin-top: auto; padding-top: 4px; }
.where-stat b { color: var(--gold); font-family: var(--serif); font-size: 15px; }
/* On the dish map the pins are speech bubbles: the tail's tip sits on the
   place itself, so the bubble floats above it instead of covering it. */
#dishMap .dish-pin {
  position: relative; transform: translate(-50%, calc(-100% - 11px));
  background: #17130d; color: var(--gold); border-color: #17130d;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
}
#dishMap .dish-pin::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%); border: 7px solid transparent;
  border-top: 9px solid #17130d; border-bottom: 0;
}
#dishMap .dish-pin.here {
  background: var(--gold); color: #201708; border-color: var(--gold);
  font-size: 13px; padding: 7px 11px;
}
#dishMap .dish-pin.here::after { border-top-color: var(--gold); }
#dishMap .dish-pin.near { opacity: .92; font-size: 11.5px; }
/* where you are, on the Near Me map — a quiet dot, not a pin competing with
   the dish clusters around it */
.me-dot { filter: drop-shadow(0 1px 3px rgba(23,19,13,.5)); }

/* the light tiles read better a touch warmer, to sit with the sheet */
#dishMap .leaflet-tile-pane,
#map .leaflet-tile-pane { filter: saturate(.85) sepia(.08); }

/* ---------- mobile chrome (hidden on desktop) ---------- */
.m-header, .bottom-bar { display: none; }
.mode-btn {
  border: 0; background: transparent; color: var(--muted-light);
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.mode-btn:hover { background: #241e14; color: var(--gold); }

/* drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(6,5,3,.6); z-index: 2400; }
.drawer[hidden], .drawer-scrim[hidden] { display: none; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 278px; z-index: 2500;
  background: var(--bg-soft); border-right: 1px solid #322b1f;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.drawer-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; }
.drawer-link {
  border: 0; background: transparent; color: var(--ink-light);
  text-align: left; padding: 11px 12px; border-radius: 10px;
  font: 700 14px inherit; cursor: pointer;
}
.drawer-link:hover { background: #241e14; color: var(--gold); }
.drawer-link.active { background: #241e14; color: var(--gold); }
.drawer-sec {
  font: 700 10px/1 inherit; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-light); padding: 18px 12px 8px;
}
.drawer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 12px; font-size: 12.5px; color: var(--muted-light);
}

/* ---------- MOBILE MODE ---------- */
body.mobile {
  background: #08070500; padding: 0;
  background-image: radial-gradient(circle at 50% 0%, #241d13, #0a0806 60%);
  min-height: 100vh;
}
body.mobile #phone {
  max-width: var(--phone-w); margin: 0 auto; min-height: 100vh;
  background: var(--bg); position: relative;
  box-shadow: 0 0 0 1px #2a231a, 0 30px 80px rgba(0,0,0,.6);
  padding-bottom: 96px;   /* clearance for the floating bottom bar */
}
body.mobile .topbar, body.mobile .tabs { display: none; }
body.mobile .m-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px; position: sticky; top: 0; z-index: 1100;
  background: rgba(15,13,10,.94); backdrop-filter: blur(10px);
}
.m-icon {
  border: 0; background: transparent; color: var(--ink-light);
  cursor: pointer; width: 34px; height: 34px; flex: none; padding: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.m-icon .ic { width: 20px; height: 20px; }
.m-icon:hover { background: #241e14; color: var(--gold); }
.m-search-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.m-search-ico {
  position: absolute; left: 14px; color: #8d8474; pointer-events: none;
  display: flex; align-items: center;
}
.m-search-ico .ic { width: 17px; height: 17px; }
.m-search {
  width: 100%; border: 1px solid #2e2719; border-radius: 99px;
  padding: 11px 16px 11px 40px;
  font: 14.5px inherit; background: #1b1710; color: var(--ink-light); outline: none;
  transition: border-color .15s, background .15s;
}
.m-search::placeholder { color: #7d7462; }
.m-search:focus { border-color: var(--gold); background: #211c14; }
body.mobile .m-header .search-sug { width: 100%; left: 0; }

body.mobile #mineHero { padding: 0 14px; margin-top: 10px; }
body.mobile .hero { aspect-ratio: 16 / 11; min-height: 0; border-radius: 18px; }
body.mobile .hero-copy { left: 18px; max-width: 74%; }
body.mobile .hero-title { font-size: 25px; }
body.mobile .hero-dots { left: 18px; bottom: 13px; }
body.mobile .hero-settings { width: 30px; height: 30px; right: 12px; bottom: 12px; }

body.mobile .sheet {
  --sheet-x: 14px;
  margin-top: 12px; border-radius: 22px 22px 0 0; padding: 18px var(--sheet-x) 30px;
  min-height: 70vh;
}
body.mobile .sheet-head { margin-bottom: 12px; }
/* both live in the drawer on mobile */
body.mobile .size-seg, body.mobile .sort-sel { display: none; }
body.mobile .page-title { font-size: 26px; }
/* the header holds the only search on a phone */
body.mobile .search-wrap { display: none; }
body.mobile .controls { gap: 7px; }
body.mobile .seg { flex: 1 0 auto; }
body.mobile .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
body.mobile #map { height: 46vh; }
body.mobile #dish { gap: 20px; }
body.mobile .where, body.mobile .takes { grid-template-columns: 1fr; }
body.mobile #dishHero { height: 46vh; min-height: 300px; }
/* body.mobile .sheet sets margin-top later in the file — re-assert the overlap */
body.mobile.dishview .sheet { margin-top: -36px; }
body.mobile .dhero-copy { padding: 0 18px; bottom: 52px; }
body.mobile .dhero-title { font-size: 30px; }
body.mobile .dhero-price { font-size: 22px; }
body.mobile .dhero-btn { top: 16px; }
body.mobile .dhero-back { left: 14px; }
body.mobile .dish-float { width: 50px; height: 50px; top: -25px; right: 18px;
  font-size: 23px; }
body.mobile #dishMap { height: 230px; }
body.mobile .dish-sec-head h3 { font-size: 18px; }
body.mobile .profile-bar { flex-wrap: wrap; gap: 12px; padding: 14px; }
body.mobile .profile-stats { order: 3; width: 100%; justify-content: space-around; margin: 0; }
body.mobile .profile-acts { width: 100%; order: 4; }
body.mobile .profile-acts > * { flex: 1 1 0; width: auto; min-width: 0; }

/* bottom tab bar — floating pill, icons only */
body.mobile .bottom-bar {
  display: flex; align-items: center; gap: 6px;
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  width: auto; z-index: 1200;
  background: rgba(18,15,11,.94); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 99px;
  padding: 9px 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.bb {
  border: 0; background: transparent; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-light); padding: 8px 13px; border-radius: 99px;
  transition: color .15s, background .15s;
}
.bb span { display: none; }
.bb i { font-style: normal; font-size: 20px; line-height: 1; }
.bb.active { color: var(--gold); background: rgba(213,171,95,.12); }
.bb-add {
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  background: var(--gold); color: #201708; font-size: 23px; font-weight: 400;
  box-shadow: 0 4px 14px rgba(213,171,95,.4);
}
.bb-add:hover { filter: brightness(1.06); }

/* ---------- compact view (▦ Small) ---------- */
.size-seg { margin-left: auto; }
body.compact .grid {
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px;
}
body.compact .card { border-radius: 13px; }
body.compact .card-photo { aspect-ratio: 16 / 10; }
body.compact .card-body { --card-pad-x: 10px; padding: 8px var(--card-pad-x) 9px; gap: 2px; }

/* A text-only card has nothing above its first line — no photo, and in the
   masonry read not even the hairline the chip strip leaves behind — so the
   eyebrow lands hard against the corner curve. Inset it by the side padding,
   so the copy reads evenly set on all three. Both selectors sit here, after
   the compact and masonry rules, because those write the padding shorthand
   and padding-top respectively. */
.card.bare .card-body,
.grid.masonry .card.bare .card-body { padding-top: var(--card-pad-x); }
body.compact .dish-name { font-size: 13.5px; -webkit-line-clamp: 1; }
body.compact .card-eyebrow { font-size: 8.5px; letter-spacing: .1em; }
body.compact .card-price { font-size: 13px; }
body.compact .note { font-size: 11px; }
body.compact .card-foot { min-height: 19px; padding-top: 6px; }
body.compact .avatar { width: 17px; height: 17px; font-size: 8px; }
body.compact .rec-who { font-size: 10.5px; }
body.compact .card .rc { padding: 1px 6px 1px 4px; font-size: 10px; }
body.compact .card .rc i { font-size: 10px; }
body.compact .card .rc.foodie { padding: 1px 5px; }
body.compact .card .rate-chips { gap: 2px; top: 5px; left: 5px; right: 5px; }
body.compact .card .rate-chips.has-add { right: 30px; }
body.compact .card-add { width: 21px; height: 21px; top: 5px; right: 5px; font-size: 14px; }
body.compact .card-add.on { font-size: 11px; }

/* ---------- My Menu profile bar ---------- */
.profile-bar {
  margin-top: 22px; background: var(--card); border: 1px solid var(--card-line);
  border-radius: 20px; padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 6px 20px rgba(23,19,13,.2);
}
.profile-ava {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 30% 30%, #f0d9a8, var(--gold-deep));
  display: flex; align-items: center; justify-content: center;
  font: 800 20px/1 var(--serif); color: #201708;
  border: 2px solid var(--gold);
}
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-family: var(--serif); font-weight: 700; font-size: 17px;
  color: var(--ink-light); }
.profile-handle { font-size: 12px; color: var(--muted-light); }
.profile-stats { display: flex; gap: 22px; margin: 0 6px; }
.pstat { text-align: center; }
.pstat b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 800;
  color: var(--gold); }
.pstat span { font-size: 10.5px; color: var(--muted-light); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; }
.profile-cta {
  border: 0; background: var(--gold); color: #201708; padding: 11px 20px;
  border-radius: 99px; font: 800 13px inherit; cursor: pointer; flex: none;
  /* it is a button whether it is an <a> or a <button> */
  text-decoration: none; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.profile-cta:hover { background: #e0b96f; }

/* ---------- the look-up bottom sheet ---------- */
/* Cream like the main sheet, so the menu rows inside need no restyling — the
   dish list here is the same typesetting the feed and My Frenu already use. */
.bsheet-scrim {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(8,6,4,.6); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.bsheet-scrim:not([hidden]) { animation: overlayIn .16s ease-out; }
/* The way out. At least a fifth of the screen, whatever the content does. */
.bsheet-gap { flex: 1 1 auto; min-height: 20vh; cursor: pointer; }
.bsheet {
  background: var(--sheet); color: var(--ink-dark);
  border-radius: 22px 22px 0 0; max-height: 80vh;
  width: 100%; max-width: var(--phone-w); margin: 0 auto;
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 -14px 44px rgba(0,0,0,.45);
}
.bsheet-scrim:not([hidden]) .bsheet {
  animation: sheetIn .3s cubic-bezier(.2,.8,.25,1);
}
.bsheet.dragging { animation: none; transition: none; }
.bsheet.settling { transition: transform .22s cubic-bezier(.2,.8,.25,1); }
.bsheet-grab {
  flex: none; width: 42px; height: 4px; border-radius: 99px;
  background: #cdc3ac; margin: 10px auto 2px; cursor: grab;
}
/* The dishes scroll; the card naming the place does not. */
.bsheet-body { overflow-y: auto; min-height: 0; padding: 2px 20px 4px; }
.bsheet-body .mi:last-child { border-bottom: 0; }
.bsheet-body .course:first-child { margin-top: 4px; }
.bsheet-foot { flex: none; padding: 0 16px 16px; }
/* the card sits at the bottom, where a thumb already is */
.bsheet-foot .profile-bar { margin-top: 10px; }
.bsheet-empty {
  padding: 26px 4px; text-align: center; color: var(--muted-dark); font-size: 13.5px;
}
@media (prefers-reduced-motion: reduce) {
  .bsheet-scrim:not([hidden]) .bsheet { animation: none; }
}

/* ---------- modal (dark) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(8,6,4,.72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--bg-soft); color: var(--ink-light);
  border: 1px solid #322b1f;
  border-radius: 20px; width: 100%; max-width: 440px;
  max-height: 92vh; overflow-y: auto; padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.overlay:not([hidden]) { animation: overlayIn .16s ease-out; }
.overlay:not([hidden]) .modal { animation: modalIn .26s cubic-bezier(.2,.8,.25,1); }
@keyframes overlayIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.985); } }

.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-head h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.x { border: 0; background: #2a241a; width: 30px; height: 30px; border-radius: 50%;
     font-size: 18px; cursor: pointer; color: var(--muted-light); flex: none;
     transition: background .15s, color .15s; }
.x:hover { background: #3a3223; color: var(--ink-light); }

/* plain fields — used by the friends and sign-in modals */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label {
  display: flex; align-items: baseline; gap: 7px; color: var(--muted-light);
  font: 700 10.5px/1.3 inherit; letter-spacing: .14em; text-transform: uppercase;
}
.field .opt { color: #6d6452; font-weight: 600; font-size: 10px; letter-spacing: .08em; }
.field input:not([type="range"]) {
  border: 1px solid #342d21; border-radius: 12px; padding: 12px 13px;
  font: 15px inherit; background: #12100b; color: var(--ink-light);
  outline: none; width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus {
  border-color: var(--gold); background: #17140e;
  box-shadow: 0 0 0 3px rgba(213,171,95,.14);
}
.field input::placeholder { color: #6d6452; }
.field input:disabled { color: var(--muted-light); background: #100e0a; cursor: default; }

/* The recommend sheet: one question at a time, a progress rule at the top and
   a pinned action bar at the bottom. Four short steps beat one long form. */
.modal-rec {
  padding: 0; gap: 0; overflow: hidden; max-width: var(--phone-w);
  background: linear-gradient(180deg, #1c1913, #14110c);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.modal-rec .modal-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 13px 15px 11px; border-bottom: 0; position: relative;
}
.head-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; flex: none; padding: 0;
  background: #221d15; color: var(--muted-light); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.head-btn:hover { background: #2f2718; color: var(--ink-light); }
.step-bar { flex: 1; display: flex; gap: 5px; }
.step-bar span {
  flex: 1; height: 3px; border-radius: 99px; background: #2b2419;
  transition: background .3s ease;
}
.step-bar span.done { background: var(--gold); }

.modal-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 22px 22px; min-height: 340px; display: block;
}
.step-eyebrow {
  font: 700 10px/1 inherit; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.step-title {
  font-family: var(--serif); font-size: 27px; font-weight: 700; line-height: 1.08;
  margin: 10px 0 0; letter-spacing: -.01em;
}
.step-sub { font-size: 13px; color: var(--muted-light); margin: 7px 0 0; }
.step { display: none; flex-direction: column; gap: 13px; margin-top: 22px; }
.step.on { display: flex; animation: stepIn .24s cubic-bezier(.2,.8,.25,1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(9px); } }
.step-lead {
  display: none; font: 700 10.5px/1 inherit; letter-spacing: .15em;
  text-transform: uppercase; color: #6d6452;
}

.modal-foot {
  flex: none; display: flex; flex-direction: column; gap: 6px;
  padding: 13px 20px calc(15px + env(safe-area-inset-bottom));
  border-top: 1px solid #251f16; background: rgba(17,14,10,.9);
  backdrop-filter: blur(8px);
}

/* Editing an existing rec skips the steps — the dish and place are fixed, so
   everything you can still change fits on one screen. The dish step comes back
   stripped to the two facts that aren't yours to begin with, the price and the
   course, and sits last: a correction, not the point of the visit. */
.modal-rec.editing .step-bar { visibility: hidden; }
.modal-rec.editing .modal-body { display: flex; flex-direction: column; }
.modal-rec.editing [data-step="place"] { display: none; }
.modal-rec.editing [data-step="call"],
.modal-rec.editing [data-step="extra"],
.modal-rec.editing [data-step="dish"] { display: flex; animation: none; }
.modal-rec.editing [data-step="dish"] { order: 3; }
.modal-rec.editing [data-step="dish"] > .input-wrap,
.modal-rec.editing [data-step="dish"] > .hint,
.modal-rec.editing [data-step="dish"] > .place-btn { display: none; }
/* a dish you typed in by hand has no catalog row to correct */
.modal-rec.editing.no-item [data-step="dish"] { display: none; }
.modal-rec.editing .step-lead { display: block; }

/* one big line per answer — a serif field on a rule, not a boxed input */
.input-wrap { position: relative; display: flex; align-items: baseline; gap: 4px; }
.step .input-wrap input,
.field .input-wrap input,
.modal-bug .input-wrap input {
  border: 0; border-bottom: 1.5px solid #342d21; border-radius: 0;
  background: transparent; padding: 9px 2px; width: 100%;
  font: 500 19px/1.35 var(--serif); color: var(--ink-light);
  outline: none; transition: border-color .18s;
}
.step .input-wrap input:focus,
.modal-bug .input-wrap input:focus { border-bottom-color: var(--gold); box-shadow: none; }
.step .input-wrap input::placeholder,
.modal-bug .input-wrap input::placeholder { color: #5f5748; font-style: italic; }
.ipfx { font: 500 19px var(--serif); color: var(--gold); flex: none; }
.price-wrap { width: 96px; }
#noteInput { font-size: 16px; }
.note-count { font: 600 11px inherit; color: #5f5748; letter-spacing: .06em;
  text-align: right; min-height: 13px; }
.hint { font-size: 12px; color: var(--muted-light); min-height: 15px; }

/* course + price share the tail of the dish step */
.mini-row { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; margin-top: 4px; }
.mini { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mini-label {
  font: 700 10px/1 inherit; letter-spacing: .15em; text-transform: uppercase;
  color: #6d6452;
}
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-row .chip {
  border: 1px solid #2f2819; background: #15120c; color: var(--muted-light);
  border-radius: 99px; padding: 7px 14px 8px; cursor: pointer;
  font: 600 14px/1.35 var(--serif);
  transition: border-color .15s, background .15s, color .15s;
}
.chip-row .chip:hover { border-color: #463c2b; color: var(--ink-light); }
.chip-row .chip.active { border-color: var(--gold); background: #2a2210; color: var(--gold); }

/* the verdict: three full-width choices, each one tap */
.rate-list { display: flex; flex-direction: column; gap: 9px; }
.rate-btn {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 1px solid #2f2819; background: #15120c; border-radius: 14px;
  padding: 15px 16px; font: 600 15px inherit; color: var(--muted-light);
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s, transform .16s;
}
.rate-btn .ic { opacity: .7; transition: opacity .16s; }
.rate-btn .tick { margin-left: auto; width: 17px; height: 17px; opacity: 0;
  transform: scale(.7); transition: opacity .16s, transform .16s; }
.rate-btn:hover { border-color: #463c2b; color: var(--ink-light); }
.rate-btn.active { transform: translateY(-1px); }
.rate-btn.active .ic { opacity: 1; }
.rate-btn.active .tick { opacity: 1; transform: none; }
.rate-btn.must.active { border-color: var(--must); background: var(--must-soft); color: #7ee0a3; }
.rate-btn.notbad.active { border-color: var(--notbad); background: #2b2210; color: var(--notbad); }
.rate-btn.pass.active { border-color: #6e6857; background: #23211c; color: #cfc8b8; }

/* Tags hang off the verdict rather than replacing it. */
.tag-block {
  display: flex; flex-direction: column; gap: 11px;
  margin-top: 5px; padding-top: 15px; border-top: 1px solid #241f16;
}
.tag-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid #2f2819; background: #15120c; color: var(--muted-light);
  border-radius: 99px; padding: 9px 15px 9px 12px; font: 600 13px inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.tag-toggle .ic { width: 17px; height: 17px; opacity: .7; }
.tag-toggle:hover { border-color: #463c2b; color: var(--ink-light); }
.tag-toggle[aria-pressed="true"] {
  border-color: var(--gold); background: #2a2210; color: var(--gold);
}
.tag-toggle[aria-pressed="true"] .ic { opacity: 1; }
.tag-lead {
  font: 700 10.5px/1 inherit; letter-spacing: .15em; text-transform: uppercase;
  color: #6d6452;
}

/* photo well — the empty invitation, replaced by the strip once there's one */
.photo-drop {
  display: block; position: relative; overflow: hidden; cursor: pointer; flex: none;
  width: 100%; padding: 0; color: inherit; font: inherit;
  border: 1px dashed #3a3123; border-radius: 14px; aspect-ratio: 16 / 9; max-height: 190px;
  background: #17140e; transition: border-color .18s, transform .12s;
}
.photo-drop[hidden] { display: none; }
.photo-drop:hover { border-color: var(--gold); }
.photo-drop:active { transform: scale(.995); }
.photo-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--muted-light); font-weight: 600; font-size: 14px;
}
.photo-hint .cam {
  width: 38px; height: 38px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: var(--gold);
  background: rgba(213,171,95,.1); border: 1px solid rgba(213,171,95,.28);
}

/* Your photos of this dish, in the order they'll sit on the rec. The first one
   is the plate everyone sees, so it says so. */
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-strip[hidden] { display: none; }
/* four to a row at any width, so six photos never take more than two rows */
.shot {
  position: relative; width: calc(25% - 6px); aspect-ratio: 1; flex: none;
  overflow: hidden; border-radius: 12px; border: 1px solid #2e281d;
  background: #17140e;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot.lead { border-color: rgba(213,171,95,.55); }
.shot-tag {
  position: absolute; left: 5px; bottom: 5px; padding: 3px 7px; border-radius: 99px;
  font: 700 9px inherit; letter-spacing: .08em; text-transform: uppercase;
  color: #120f0a; background: var(--gold);
}
.shot-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: #f6efe1;
  background: rgba(12,10,7,.66); backdrop-filter: blur(6px);
  font: 700 15px/1 inherit;
}
.shot-x:hover { background: #a5312b; border-color: #a5312b; }
.shot-add {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-style: dashed; border-color: #3a3123; color: var(--gold);
  font: 400 22px/1 inherit;
}
.shot-add:hover { border-color: var(--gold); }
/* A picked photo is re-encoded before it can be shown, so the tile holds its
   place while that happens rather than appearing late. */
.shot-busy {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; border-color: #3a3123; color: #6d6452;
  font: 400 22px/1 inherit; animation: shotPulse 1.1s ease-in-out infinite;
}
@keyframes shotPulse { 50% { opacity: .45; } }

/* Past the widest radius Foursquare will search: name the town instead of
   widening around yourself. */
.place-near { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.place-near[hidden] { display: none; }
.place-near input {
  flex: 1 1 150px; min-width: 0; border: 0; border-bottom: 1.5px solid #342d21;
  background: transparent; padding: 7px 2px; outline: none;
  font: 500 15px/1.35 var(--serif); color: var(--ink-light);
  transition: border-color .18s;
}
.place-near input:focus { border-bottom-color: var(--gold); }
.place-near input::placeholder { color: #5f5748; font-style: italic; }
.place-near .place-btn { flex: none; }

/* the last resort, once no dataset has the place */
.place-manual { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.place-manual[hidden] { display: none; }
.place-manual-name {
  font: 600 15px/1.35 var(--serif); color: var(--ink-light);
}
.place-manual input {
  align-self: stretch; border: 0; border-bottom: 1.5px solid #342d21;
  background: transparent; padding: 7px 2px; outline: none;
  font: 500 15px/1.35 var(--serif); color: var(--ink-light);
  transition: border-color .18s;
}
.place-manual input:focus { border-bottom-color: var(--gold); }
.place-manual input::placeholder { color: #5f5748; font-style: italic; }
.place-manual .place-results { align-self: stretch; }
/* the fix is already in the catalog — say so louder than the add button */
.place-manual .sug-empty.dupe-lead { color: var(--gold); }

/* live-mode helpers sit under the field they belong to */
.place-btn {
  display: flex; align-items: center; gap: 8px; align-self: flex-start;
  border: 1px solid #2f2819; background: transparent; color: var(--gold);
  border-radius: 99px; padding: 9px 15px; font: 600 12.5px inherit; cursor: pointer;
}
.place-btn:hover { background: rgba(213,171,95,.07); border-color: var(--gold); }
.place-btn:disabled { opacity: .5; cursor: default; }

.submit {
  border: 0; width: 100%; background: var(--gold); color: #201708;
  padding: 15px; border-radius: 13px; font: 800 15px inherit; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.submit:hover:not(:disabled) { background: #e5bd72; }
.submit:disabled { opacity: .3; cursor: default; }

/* destructive action, kept quiet until you look for it */
.danger-link {
  border: 0; background: transparent; color: #8b6f6a; cursor: pointer;
  font: 600 12.5px inherit; padding: 4px; text-decoration: underline;
  align-self: center;
}
.danger-link:hover { color: #e2705f; }

/* On a phone the sheet rises from the bottom edge. */
@media (max-width: 560px) {
  #overlay { align-items: flex-end; padding: 0; }
  .modal-rec {
    max-width: none; max-height: 94vh; border-bottom: 0;
    border-radius: 22px 22px 0 0;
  }
  .overlay:not([hidden]) .modal-rec { animation: sheetIn .28s cubic-bezier(.2,.8,.25,1); }
  .modal-body { padding: 8px 18px 20px; }
  .step-title { font-size: 25px; }
}
@keyframes sheetIn { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .overlay:not([hidden]), .overlay:not([hidden]) .modal { animation: none; }
}


/* ---------- live mode ---------- */
/* The tier switcher and synthetic-friends chrome are simulation-only. */
body.live .sim-only { display: none !important; }

/* sign-in gate */
/* The first screen anyone sees, so it reads as a page rather than a dialog:
   left-aligned and labelled, the way a form you are meant to fill in reads.
   Centring a form's text is the thing that makes one look like a picture of a
   form — you read and edit from the left, and a caret that starts in the
   middle of the box has nowhere to have come from. */
.auth-modal {
  max-width: 400px; gap: 0; padding: 30px 28px 24px; text-align: left;
}
.auth-brand {
  font-family: var(--serif); font-size: 21px; font-weight: 800;
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px;
}
.auth-brand > span { color: var(--gold); font-style: italic; }
.auth-modal h2 {
  font-family: var(--serif); font-weight: 700; font-size: 27px;
  line-height: 1.12; letter-spacing: -.01em; color: var(--ink-light);
}
.auth-msg {
  font-size: 13.5px; line-height: 1.55; color: var(--muted-light);
  margin-top: 8px;
}
.auth-msg:empty { display: none; }
#authForm { display: flex; flex-direction: column; gap: 15px; margin-top: 22px; }
/* An empty hint takes no room at all, so the rhythm between fields stays even
   whether or not the username has something to say about itself. */
.auth-hint { min-height: 0; }
.auth-hint:empty { display: none; }
#authForm .submit { margin-top: 5px; }

/* The way between the two modes is a sentence, not a slab of tab bar competing
   with the one button that matters. */
.auth-foot {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  margin-top: 10px;
}
.auth-switch { font-size: 13px; color: var(--muted-light); }
.auth-link {
  border: 0; background: transparent; color: var(--muted-light);
  font: 600 12px inherit; cursor: pointer; padding: 2px; text-decoration: underline;
}
.auth-link:hover { color: var(--gold); }
.auth-link.strong { color: var(--gold); font-weight: 700; text-decoration: none; }
.auth-link.strong:hover { text-decoration: underline; }

/* friends list */
.friends-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 40vh; overflow-y: auto; margin-top: 4px;
}
.friend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 10px;
}
.friend-row:hover { background: #221c13; }
.friend-drop {
  border: 0; background: transparent; color: #6d6452; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 50%; flex: none;
}
.friend-row:hover .friend-drop { color: var(--muted-light); }
.friend-drop:hover { background: #2a241a; color: #e2705f; }

/* find-on-map flow in the add sheet */
.place-results {
  margin-top: 7px; border: 1px solid #322b1e; border-radius: 12px;
  background: #14110c; padding: 5px; max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.place-ava {
  background: #241f17 !important; color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

@media (max-width: 720px) {
  .topbar-inner { flex-direction: column; gap: 6px; align-items: flex-start; }
  .search { width: 100%; }
  .sheet { --sheet-x: 12px; padding: 18px var(--sheet-x) 34px; border-radius: 20px 20px 0 0; }
  .page-title { font-size: 27px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .card .rate-chips { gap: 2px; top: 5px; left: 5px; right: 5px; }
  .card .rc { padding: 1px 5px 1px 4px; font-size: 10px; }
  .card .rc i { font-size: 10px; }
  .card .rc.foodie { padding: 1px 4px; }
  .card-price { font-size: 13px; }
  .hero-copy { left: 18px; max-width: 72%; }
  .hero-dots { left: 18px; }
  .profile-bar { flex-wrap: wrap; }
  .profile-stats { order: 3; width: 100%; justify-content: space-around; margin: 6px 0 0; }
  .profile-acts { width: 100%; order: 4; }
  .profile-acts > * { flex: 1 1 0; width: auto; min-width: 0; }
  .where, .takes { grid-template-columns: 1fr; }
  #dishHero { height: 46vh; min-height: 300px; }
  .dhero-copy { padding: 0 18px; bottom: 50px; }
  .dhero-title { font-size: 30px; }
  .dhero-price { font-size: 22px; }
  #dishMap { height: 230px; }
  .dish-sec-head h3 { font-size: 18px; }
}

/* ---------- first run: your first three dishes ---------- */
/* Sits under the recommend sheet (z 2000) so the sheet opens on top of it and
   closing the sheet lands back on the half-filled menu. */
.onb-overlay { z-index: 1900; }
.onb-modal {
  max-width: 460px; padding: 0; gap: 0; overflow: hidden;
  background: linear-gradient(180deg, #1c1913, #14110c);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.onb-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 26px 24px 24px;
}
.onb-brand {
  font-family: var(--serif); font-size: 24px; font-weight: 800;
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 20px;
}
.onb-brand > span { color: var(--gold); font-style: italic; }
.onb-p {
  font-size: 14px; line-height: 1.6; color: var(--muted-light);
  margin-top: 15px; max-width: 46ch;
}
.onb-tight { margin-top: 9px; }
/* The line that sends them to the camera roll — set as pull-quote, because it
   is the sentence doing the persuading. */
.onb-aside {
  margin-top: 19px; padding-left: 15px;
  border-left: 2px solid rgba(213,171,95,.55);
  font-family: var(--serif); font-style: italic; font-size: 15.5px;
  line-height: 1.55; color: #e2d6ba;
}
.onb-pips { margin-bottom: 19px; }
.onb-foot {
  flex: none; display: flex; flex-direction: column; gap: 6px;
  padding: 13px 20px calc(15px + env(safe-area-inset-bottom));
  border-top: 1px solid #251f16; background: rgba(17,14,10,.9);
}

/* Their dishes typeset the way the feed sets a menu — same cream, same serif,
   same dotted leader. Seeing your own lines land in it is the whole reward. */
.onb-card {
  background: var(--sheet); color: var(--ink-dark);
  border-radius: 12px; padding: 18px 18px 8px; margin-top: 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.onb-card .menu-mast { padding: 2px 0 14px; }
.onb-card .menu-title { font-size: 25px; }
.onb-card .course { margin-top: 6px; }
.onb-mi { cursor: default; padding: 13px 2px; }
.onb-mi:hover { background: none; }
.onb-mi .mi-plate { width: 62px; height: 62px; }
/* An empty line: the prompt where the dish name goes, "+" where the price goes. */
.onb-ghost {
  width: 100%; text-align: left; font: inherit; background: transparent;
  border: 0; border-bottom: 1px solid #e6dfcf; cursor: pointer;
}
.onb-ghost:hover { background: rgba(213,171,95,.12); }
.onb-ghost .mi-name { font-style: italic; font-weight: 500; color: #a1977f; }
.onb-ghost:hover .mi-name { color: var(--ink-dark); }
.onb-plus { color: var(--gold-deep); font-size: 21px; line-height: 1; }

/* Way back in after a skip, on the empty menu that a skip leaves behind. */
.hero-start {
  margin-top: 12px; border: 1px solid var(--gold); background: transparent;
  color: var(--gold); border-radius: 99px; padding: 9px 18px;
  font: 700 12.5px inherit; cursor: pointer;
}
.hero-start:hover { background: var(--gold); color: #201708; }

@media (max-width: 560px) {
  #onbOverlay { align-items: flex-end; padding: 0; }
  .onb-modal {
    max-width: none; max-height: 94vh; border-bottom: 0;
    border-radius: 22px 22px 0 0;
  }
  .overlay:not([hidden]) .onb-modal { animation: sheetIn .28s cubic-bezier(.2,.8,.25,1); }
  .onb-body { padding: 22px 18px 20px; }
}


/* ---------- debug drawer ---------- */
/* A tester's tool, not a feature: no button anywhere, dragged in from the
   right edge. It reads as instrument panel rather than menu — monospace,
   flat rows, nothing styled to be enjoyed. */
.dbg-scrim { position: fixed; inset: 0; background: rgba(6,5,3,.55); z-index: 3400; }
.dbg-scrim[hidden], .dbg[hidden] { display: none; }
.dbg {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
  z-index: 3500; background: #0f0d09; border-left: 1px solid #322b1f;
  padding: 16px 15px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
  animation: dbgIn .18s ease-out;
}
@keyframes dbgIn { from { transform: translateX(14px); opacity: 0; } }
.dbg-head { display: flex; justify-content: space-between; align-items: center; }
.dbg-title {
  font: 700 10.5px/1 inherit; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.dbg-sec {
  font: 700 9.5px/1 inherit; letter-spacing: .2em; text-transform: uppercase;
  color: #6d6452; margin-top: 4px;
}

/* the facts, as a two-column list that stays readable at any length */
.dbg-facts { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.dbg-facts > div {
  display: flex; gap: 10px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid #1d1913;
}
.dbg-facts dt {
  flex: none; width: 74px; color: #6d6452;
  font: 600 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}
.dbg-facts dd {
  margin: 0; flex: 1; min-width: 0; color: var(--ink-light); overflow-wrap: anywhere;
  font: 500 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* three-way segmented control, sized for a thumb on a phone */
.dbg-seg { display: flex; gap: 6px; }
.dbg-seg button {
  flex: 1; border: 1px solid #2f2819; background: #15120c; color: var(--muted-light);
  border-radius: 9px; padding: 9px 6px; cursor: pointer;
  font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: border-color .15s, background .15s, color .15s;
}
.dbg-seg button:hover { border-color: #463c2b; color: var(--ink-light); }
.dbg-seg button.on { border-color: var(--gold); background: #2a2210; color: var(--gold); }

.dbg-cta {
  border: 1px solid var(--gold); background: rgba(213,171,95,.1); color: var(--gold);
  border-radius: 11px; padding: 12px 14px; font: 700 13px inherit; cursor: pointer;
  transition: background .15s;
}
.dbg-cta:hover { background: rgba(213,171,95,.18); }
.dbg-cta:disabled { opacity: .55; cursor: default; }

.dbg-list { display: flex; flex-direction: column; gap: 6px; }
.dbg-row { border: 1px solid #241f17; border-radius: 9px; padding: 8px 10px; }
/* a report the server never got, so the tester can see it's still only here */
.dbg-row.unsent { border-color: #4a3a1c; }
.dbg-row-t { font: 600 12.5px/1.35 inherit; color: var(--ink-light); }
.dbg-row-m {
  margin-top: 3px; color: #6d6452;
  font: 500 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dbg-none { font: italic 500 12px var(--serif); color: #6d6452; margin: 0; }

/* the report sheet: the captured screen on top, then what the tester says */
.modal-bug .modal-body { display: flex; flex-direction: column; gap: 12px; }
.bug-shot {
  margin: 0; border: 1px solid #2e281d; border-radius: 12px; overflow: hidden;
  background: #17140e; max-height: 42vh; display: flex; align-items: center;
  justify-content: center;
}
.bug-shot img { width: 100%; height: auto; display: block; object-fit: contain; }
.bug-shot figcaption {
  padding: 16px; font: italic 500 12.5px/1.5 var(--serif); color: #6d6452;
  text-align: center;
}
#bugBody {
  width: 100%; border: 1px solid #2f2819; border-radius: 12px; background: #15120c;
  color: var(--ink-light); padding: 11px 12px; font: 500 14px/1.5 inherit;
  outline: none; resize: vertical; transition: border-color .18s;
}
#bugBody:focus { border-color: var(--gold); }
#bugBody::placeholder { color: #5f5748; font-style: italic; }
.modal-bug .dbg-facts { max-height: 132px; overflow-y: auto; }


/* ---------- pin (want to try), repost, like ---------- */
/* The float and corner marks read the dish's social state: your original rec
   is a check, your repost carries the repost mark, and a friend's untried dish
   wears the tack — outline until pinned, filled once it is. */
.dish-float .ic { width: 24px; height: 24px; stroke-width: 2; }
.dish-float.pin.on .ic { fill: currentColor; }
.dish-float.on.repost { background: var(--gold); color: #201708; cursor: default; }
.dcard-right { display: flex; align-items: center; gap: 2px; }
.dcard-mark .ic { width: 21px; height: 21px; vertical-align: -4px; }
.dcard-mark.pin.on { color: var(--gold); }
.dcard-mark.pin.on .ic { fill: currentColor; }
.dcard-mark.on { color: var(--gold); cursor: default; font-size: 19px; }
.dcard-mark.on:hover { color: var(--gold); }

/* the like heart: off by default, and simply absent on your own posts */

/* the repost chip beside a take's rating, and the ↻ on your repost cards */
.repost-chip { color: var(--gold); font-weight: 700; }
.take .repost-chip { box-shadow: none; }

/* unpin sits opposite the "+" so the two corner actions never collide */
.card-unpin {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(16,13,9,.72);
  backdrop-filter: blur(4px); color: #cfc6b2; font: 700 11px/1 inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.card-unpin:hover { background: #a5312b; border-color: #a5312b; color: #fff; }

/* ---------- favorites: sections in order of commitment ---------- */
.fav-sec { margin-top: 8px; }
.fav-sec + .fav-sec { margin-top: 26px; }
.fav-head { margin-bottom: 12px; }
.fav-kicker {
  margin: 30px 0 14px; padding-top: 18px; border-top: 2px solid var(--ink-dark);
  font: 700 12px/1 inherit; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep);
}

/* A line of orientation above a debug action: what happens if you don't. */
.dbg-note {
  font: 500 11.5px/1.5 inherit; color: var(--muted-light); margin: 0;
}

/* Nav icons that come from the sprite rather than a glyph — block, so the
   line-box under an inline SVG doesn't nudge them off the row's baseline. */
.bb-ic { display: block; width: 21px; height: 21px; }
.dl-ic { display: inline-block; vertical-align: -4px; width: 18px; height: 18px; }

/* ---------- shared menu: the public page behind a share link ---------- */
/* One member's menu on the cream sheet, full screen — a visitor holding a
   link sees paper, not the app shell underneath. */
#sharedView {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--bg); overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.shared-sheet {
  background: var(--sheet); color: var(--ink-dark);
  max-width: 720px; margin: 0 auto; min-height: 100%;
  padding: 26px 22px 34px;
}
.shared-note {
  text-align: center; color: var(--muted-dark);
  font: 500 14px/1.6 inherit; padding: 34px 10px;
}
.shared-mi { cursor: default; }
.shared-mi:hover { background: none; }
.shared-mi.hl { background: rgba(213,171,95,.16); border-radius: 10px; }
.shared-cta {
  margin-top: 40px; padding: 20px 18px 22px; text-align: center;
  border-top: 2px solid var(--ink-dark);
}
.shared-cta p { font: 500 13.5px/1.6 inherit; color: var(--muted-dark); margin-bottom: 10px; }
.shared-cta p b { color: var(--ink-dark); }
.shared-open {
  display: inline-block; margin-top: 6px; padding: 12px 26px;
  background: var(--gold); color: #201708; border-radius: 999px;
  font: 700 14px/1 inherit; text-decoration: none;
}
.shared-open:hover { background: #e0b96f; }

/* The foodie mark beside your own name on the profile bar. */
.profile-name .foodie-tag { color: var(--gold); font-size: 10px; margin-left: 6px; }

/* ---------- toast: the clipboard fallback saying it worked ---------- */
#toast {
  position: fixed; left: 50%; bottom: 86px; transform: translate(-50%, 12px);
  z-index: 3600; background: #f4efe5; color: #17130d;
  padding: 10px 18px; border-radius: 999px;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* The quiet half of a first-run choice. Same shape and weight as .submit so
   the two stack as a pair, but outlined and neutral rather than gold — the
   decision stays visibly one-sided without the second option being a link
   someone has to hunt for. */
.onb-secondary {
  border: 1px solid #352e21; background: transparent; color: var(--muted-light);
  width: 100%; padding: 15px; border-radius: 13px;
  font: 700 15px inherit; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.onb-secondary:hover {
  border-color: #4a4130; color: var(--ink-light); background: rgba(255,255,255,.035);
}
.onb-secondary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- identity: username + display name ---------- */
/* Availability answers as you type, so the hint carries a verdict, not just
   instructions. */
.hint.good { color: #7ee0a3; }
.hint.bad  { color: #e2705f; }
.auth-hint { text-align: center; }

/* Share sits first because it is the thing people came to the foot of their
   own Frenu to do; editing your name is the quieter neighbour. */
/* The two actions travel as one flex item, so the layouts that give the
   actions their own row move this rather than reaching past it to a button. */
.profile-acts { display: flex; gap: 8px; align-items: center; flex: none; }
.profile-edit {
  border: 1px solid #3a3226; background: transparent; color: var(--muted-light);
  border-radius: 99px; padding: 9px 15px; font: 700 12.5px inherit;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.profile-edit:hover {
  border-color: var(--gold); color: var(--gold); background: rgba(213,171,95,.08);
}

/* The "+" is the bar's one filled button, so its stroke carries more weight
   than the outline icons either side of it. */
.bb-plus { width: 23px; height: 23px; stroke-width: 2; }

/* A hover bubble must never sit between the cursor and the pin it describes.
   Leaflet defaults to this, but the pins are divIcons centred on their own
   anchor, so the tooltip and the tap target overlap by half a pin. */
.leaflet-tooltip { pointer-events: none; }

/* ---------- ask: the app's own confirm ---------- */
/* Above every surface that can raise one — the recommend sheet (2000), the
   look-up sheet (2100), the drawer (2500) — since a question about what you
   just tapped must not open behind the thing you tapped it on. */
.ask-overlay { z-index: 2700; }
.ask-modal { max-width: 400px; gap: 10px; }
.ask-modal h2 {
  font-family: var(--serif); font-size: 21px; font-weight: 700;
  line-height: 1.2; color: var(--ink-light);
}
.ask-body {
  font-size: 14px; line-height: 1.6; color: var(--muted-light);
  white-space: pre-line;   /* the messages carry their own paragraph breaks */
}
.ask-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
/* Destructive answers do not get the gold that means "yes, go on". */
.ask-modal.danger .submit { background: #b4453a; color: #fff; }
.ask-modal.danger .submit:hover:not(:disabled) { background: #c85144; }