/* Shared by every page. Destination pages: deep-green masthead band with headline figures, then a comparison ledger, map, stars breakdown, method notes and a contact form, all on one 1120px column. The homepage reuses the band and adds a world map, destination cards and the wishlist. */
:root {
  --bg: #F2F6F1;
  --surface: #FFFFFF;
  --ink: #12261C;
  --muted: #5A6E62;
  --line: #D5E0D6;
  --green: #1E6142;
  --green-soft: #DCEDE1;
  --band: #10362A;
  --band-ink: #EAF4EC;
  --band-muted: #A9C8B4;
  --gold: #B3862B;
  --danger: #A33A2E;
  --danger-soft: #F7E3DF;
  --heart: #C2413A;
  --font-display: "Gloock", "Noto Serif TC", "PingFang TC", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 10px;
  /* The till receipt: cream paper in light and dark mode alike. */
  --rc-paper: #F5F0E4; --rc-ink: #1F2A22; --rc-muted: #6B6455; --rc-dots: #A39A86; --rc-rule: #C9C0AC; --rc-band: #E9E1CC; --rc-link: #1E6142;
}
/* Japanese text (pages in Japanese, and Japanese names on other pages) uses Japanese letterforms. */
:lang(ja) { --font-display: "Gloock", "Noto Serif JP", "Hiragino Mincho ProN", serif; --font-body: "Figtree", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; }
.alt-name:lang(ja) { font-family: var(--font-body); }
/* Headings break between phrases, and within one only when a phrase is wider than the screen ("ミシュラン星付きレストラン" on a phone). */
:lang(ja) h1, :lang(ja) h2 { word-break: auto-phrase; overflow-wrap: anywhere; }
:lang(ko) { --font-display: "Gloock", "Noto Serif KR", "AppleMyungjo", serif; --font-body: "Figtree", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
.alt-name:lang(ko) { font-family: var(--font-body); }
:lang(ko) h1, :lang(ko) h2 { word-break: keep-all; overflow-wrap: anywhere; }
:lang(th) { --font-display: "Gloock", "Noto Serif Thai", serif; --font-body: "Figtree", "Noto Sans Thai", "Thonburi", system-ui, sans-serif; }
.alt-name:lang(th) { font-family: var(--font-body); }
/* Simplified Chinese (mainland China pages) uses Simplified letterforms. */
:lang(zh-Hans) { --font-display: "Gloock", "Noto Serif SC", "PingFang SC", serif; --font-body: "Figtree", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
/* Greek, Serbian Cyrillic and Vietnamese need letters Gloock and Figtree don't have, so whole pages switch to Noto. */
:lang(el), :lang(sr), :lang(vi) { --font-display: "Noto Serif", Georgia, serif; --font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
:lang(el) .brand, :lang(sr) .brand, :lang(vi) .brand { font-family: "Gloock", Georgia, serif; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1712; --surface: #13221A; --ink: #E4EEE7; --muted: #98AE9F; --line: #24392D;
    --green: #6FCB97; --green-soft: #1A3527; --band: #0A2219; --band-ink: #E4F1E8; --band-muted: #8FB49C;
    --gold: #E0B85C; --danger: #F08C7E; --danger-soft: #3A1E1A; --heart: #F0857A; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1712; --surface: #13221A; --ink: #E4EEE7; --muted: #98AE9F; --line: #24392D;
  --green: #6FCB97; --green-soft: #1A3527; --band: #0A2219; --band-ink: #E4F1E8; --band-muted: #8FB49C;
  --gold: #E0B85C; --danger: #F08C7E; --danger-soft: #3A1E1A; --heart: #F0857A; color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.1; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
p { margin: 0; }
.eyebrow { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--green); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Header */
/* Header: the top row (.site-header) and the breadcrumb bar (.switchbar) stay on screen together on computers;
   on phones and tablets only the top row does (see "Phone and tablet header" below). */
.masthead { position: sticky; top: 0; z-index: 10; }
.site-header { padding-top: env(safe-area-inset-top, 0px); background: var(--band); color: var(--band-ink); border-bottom: 1px solid color-mix(in srgb, var(--band-ink) 12%, transparent); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--font-display); font-size: 1.35rem; }
.brand svg { width: 22px; height: 22px; color: var(--gold); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: var(--band-muted); text-decoration: none; font-size: .9rem; font-weight: 500; padding: 6px 10px; border-radius: 6px; }
.nav a:hover { color: var(--band-ink); background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wish-link { display: inline-flex; align-items: center; gap: 6px; color: var(--band-ink); text-decoration: none; font-size: .9rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--band-ink) 25%, transparent); }
.wish-link:hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.wish-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.wish-link.has-items svg { fill: var(--heart); stroke: var(--heart); }
.wish-link #wishCount { font-family: var(--font-num); font-weight: 500; }

/* Hero */
.hero { background: var(--band); color: var(--band-ink); padding-block: 48px 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { color: var(--band-muted); margin-top: 16px; max-width: 52ch; }
.hero p.hero-near { margin-top: 10px; font-size: .94rem; }
.hero-near a { color: var(--gold); font-weight: 600; text-decoration: none; }
.hero-near a:hover { text-decoration: underline; }
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: color-mix(in srgb, var(--band-ink) 16%, transparent); border-radius: var(--radius); overflow: hidden; }
.figure { background: var(--band); padding: 16px 14px; min-width: 0; }
.figure .label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted); }
.figure .value { font-family: var(--font-num); font-size: clamp(1rem, 1vw + .5rem, 1.4rem); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figure .sub { font-size: .8rem; color: var(--band-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

section { padding-block: 56px; }
section + section { border-top: 1px solid var(--line); }
section { scroll-margin-top: 64px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.section-head p { color: var(--muted); max-width: 60ch; margin-top: 8px; }

/* Toolbar */
.toolbar { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 14px; }
.search { position: relative; }
/* Search boxes stand out from the menus beside them: a firmer outline, a green magnifier, a darker hint and a soft shadow. */
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--green); pointer-events: none; }
.search input { width: 100%; padding: 13px 14px 13px 46px; border: 2px solid color-mix(in srgb, var(--green) 55%, transparent); border-radius: var(--radius); background: var(--surface); font-size: 1rem;
  box-shadow: 0 1px 2px rgba(18, 38, 28, .06), 0 4px 14px rgba(18, 38, 28, .07); transition: border-color .15s, box-shadow .15s; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:hover { border-color: color-mix(in srgb, var(--green) 80%, transparent); }
.search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft), 0 4px 14px rgba(18, 38, 28, .07); }
select { padding: 12px 36px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* Filters. Computers: Dinner/Lunch, then Show, Stars and Cuisine as drop-down buttons in one row.
   Phones (720px and below): Dinner/Lunch and a "Filters" button that opens a panel from the bottom. */
.filters { display: grid; gap: 10px; margin-bottom: 18px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fgroups { display: contents; }
.filter-group { position: relative; }
.fdrop-btn, .filters-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 7px 14px; font-size: .88rem; font-weight: 500; cursor: pointer; line-height: 1.5; }
.fdrop-btn::after { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); margin-left: 2px; transition: transform .15s; }
.filter-group.open .fdrop-btn::after { transform: translateY(1px) rotate(225deg); }
.flabel { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.fdrop-btn .flabel { font-size: .78rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.fdrop-val { display: inline-flex; align-items: center; gap: 4px; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdrop-val .stars svg { width: 12px; height: 12px; }
.filter-group.on .fdrop-btn { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.filter-group.on .fdrop-val { color: var(--green); font-weight: 600; }
.fdrop-btn:hover, .filters-btn:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.fdrop-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 8; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 12px; width: max-content; max-width: calc(100vw - 32px); }
.filter-group.open .fdrop-panel { display: grid; gap: 10px; }
.filter-group[data-group="cuisine"] .fdrop-panel { width: min(520px, calc(100vw - 32px)); max-height: 360px; overflow: auto; }
.fdrop-panel .seg { flex-wrap: nowrap; white-space: nowrap; }
.cuisine-q { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: .9rem; }
.filters-btn, .sheet-head, .sheet-foot { display: none; }
.filters-btn svg { width: 16px; height: 16px; }
.filters-btn .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--green); color: var(--surface); font-size: .74rem; font-weight: 700; font-family: var(--font-num); }
.filters-btn .count:empty { display: none; }
.active-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.active-tags[hidden] { display: none; }
.ftag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--green); border-radius: 999px; background: color-mix(in srgb, var(--green) 10%, var(--surface)); color: var(--ink); padding: 5px 10px 5px 12px; font-size: .84rem; font-weight: 500; cursor: pointer; }
.ftag > span[aria-hidden] { font-size: 1.05rem; line-height: 1; color: var(--muted); }
.ftag .stars svg { width: 12px; height: 12px; }
.fclear { font-size: .84rem; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .45); }
.sheet-backdrop[hidden] { display: none; }
@media (min-width: 721px) {
  /* The drop-down buttons already say what's chosen, so the tags row only adds "Clear all", and the neighbourhood,
     which has no drop-down (chosen from "By neighbourhood"). */
  .active-tags .ftag:not(.ftag-own) { display: none; }
  .filters { grid-template-columns: auto 1fr; align-items: center; }
  .active-tags { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .filter-bar { flex-wrap: nowrap; justify-content: space-between; }
  .filters-btn { display: inline-flex; }
  .fgroups { display: none; }
  body.sheet-open { overflow: hidden; }
  body.sheet-open .fgroups { display: grid; gap: 22px; align-content: start; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 85vh; overflow: auto; overscroll-behavior: contain;
    background: var(--bg); color: var(--ink); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); padding: 0 16px; animation: sheet-up .2s ease-out; }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 16px 0 10px; border-bottom: 1px solid var(--line); }
  .sheet-head h3 { margin: 0; font-size: 1.1rem; }
  .sheet-close { border: 0; background: none; font-size: 1.8rem; line-height: 1; width: 40px; height: 40px; margin-right: -8px; cursor: pointer; color: var(--ink); }
  .sheet-foot { display: block; position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .sheet-done { width: 100%; border: 0; border-radius: var(--radius); background: var(--green); color: var(--surface); padding: 14px; font-size: 1rem; font-weight: 600; cursor: pointer; }
  /* In the panel every group is open, and its button is just a heading. */
  .fdrop-btn { border: 0; background: none; padding: 0; pointer-events: none; box-shadow: none !important; }
  .fdrop-btn::after, .fdrop-val { display: none; }
  .fdrop-btn .flabel { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
  .fdrop-panel { display: grid; gap: 10px; position: static; box-shadow: none; border: 0; padding: 0; background: none; }
  .filter-group[data-group="cuisine"] .fdrop-panel { width: auto; max-height: none; overflow: visible; }
  .fdrop-panel .seg { flex-wrap: wrap; white-space: normal; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
/* Phones: the currency picker beside Dinner/Lunch shows the chosen symbol; an invisible <select> on top of it
   opens the phone's own list (symbol and code). Computers keep the currency switch in the header. */
.cur-pick { display: none; }
@media (max-width: 720px) {
  .filter-bar { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .filters-btn { margin-left: auto; }
  .cur-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    padding: 7px 13px; font-family: var(--font-num); font-size: .86rem; font-weight: 500; line-height: 1.5; cursor: pointer; }
  .cur-pick::after { content: ""; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
  .cur-pick:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
  .cur-pick:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
  .cur-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; padding: 0; border: 0; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet-done, :root:not([data-theme="light"]) .filters-btn .count { color: var(--bg); } }
:root[data-theme="dark"] .sheet-done, :root[data-theme="dark"] .filters-btn .count { color: var(--bg); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; justify-self: start; }
.seg button { border: 0; background: none; cursor: pointer; padding: 7px 14px; display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; font-weight: 500; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button .count { color: var(--muted); font-family: var(--font-num); font-size: .78rem; }
.seg button[aria-pressed="true"] { background: var(--green); color: var(--surface); }
.seg button[aria-pressed="true"] .stars, .seg button[aria-pressed="true"] .count { color: color-mix(in srgb, var(--surface) 80%, transparent); }
.seg .stars svg { width: 13px; height: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.zero { opacity: .5; }
.chip { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; }
.chip button { border: 0; background: none; cursor: pointer; padding: 7px 14px; font-size: .88rem; font-weight: 500; }
.chip button .count { color: var(--muted); font-family: var(--font-num); font-size: .78rem; margin-left: 4px; }
.chip.active { background: var(--green); border-color: var(--green); color: var(--surface); }
.chip.active .count { color: color-mix(in srgb, var(--surface) 75%, transparent); }

.btn { border: 1px solid transparent; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.btn-danger { background: var(--danger); color: var(--surface); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-primary { background: var(--green); color: var(--surface); padding: 12px 20px; font-size: 1rem; }
.btn-primary:hover { filter: brightness(1.08); }

/* Ledger */
.ledger { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) 72px 84px minmax(0, 1.5fr) minmax(150px, 1fr) 76px; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
/* A restaurant opened from a link (#r=<id>, e.g. from a guide's table): highlighted for a moment. */
.row { transition: background-color 1s; }
.row.linked { background: var(--green-soft); }
.row:first-child { border-top: 0; }
.row.head { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-block: 10px; background: color-mix(in srgb, var(--green-soft) 50%, var(--surface)); }
.row .name { font-weight: 600; min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.name-text { min-width: 0; }
.thumb { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.thumb.has-photo img { opacity: 1; }
.credit { display: block; font-size: .68rem; font-weight: 400; color: var(--muted); line-height: 1.3; }
.credit:empty { display: none; }
.credit a { color: inherit; }
.row.divider { display: block; padding-block: 18px 12px; background: color-mix(in srgb, var(--green-soft) 35%, var(--surface)); border-top: 2px solid var(--line); }
.row.divider strong { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.row.divider .note { margin-top: 4px; max-width: 70ch; }
.row.former { background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.row.former .name, .row.former .cat, .row.former .stars-cell, .row.former .rating-cell, .row.former .dinner { opacity: .5; filter: grayscale(1); }
.row.former .tag { cursor: default; }
.status-pill { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--line); color: var(--ink); }
.chg { display: block; margin-top: 3px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1.25; cursor: help; }
.chg-up { color: var(--green); }
.chg-down { color: var(--danger); }
.status-pill.status-closed { background: var(--danger-soft); color: var(--danger); }
.row .area { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
.row .chef-line { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); font-style: italic; }
.diet-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.diet-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; font-size: .7rem; font-weight: 600; line-height: 1.5; color: var(--green); background: color-mix(in srgb, var(--green) 11%, transparent); border: 1px solid color-mix(in srgb, var(--green) 28%, transparent); white-space: nowrap; }
.diet-badge svg, .seg svg.leaf { width: 12px; height: 12px; flex: none; fill: currentColor; }
/* The Dietary drop-down lists its seven options one under another. */
.filter-group[data-group="diet"] .seg { display: grid; border-radius: 12px; white-space: nowrap; }
.filter-group[data-group="diet"] .seg button { justify-content: flex-start; }
.filter-group[data-group="diet"] .seg button + button { border-left: 0; border-top: 1px solid var(--line); }
.filter-group[data-group="diet"] .seg button .count { margin-left: auto; padding-left: 12px; }
.seg svg.leaf { color: var(--green); }
.seg button[aria-pressed="true"] svg.leaf { color: inherit; }
.nm-end { white-space: nowrap; }
.map { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; vertical-align: -6px; border-radius: 6px; color: var(--green); }
.map:hover { background: var(--green-soft); }
.map svg { width: 16px; height: 16px; }
.note { display: block; font-family: var(--font-body); font-size: .78rem; line-height: 1.35; color: var(--muted); }
.notes .src { display: block; font-size: .75rem; color: var(--green); text-underline-offset: 2px; margin-top: 2px; }
.notes { min-width: 0; font-size: .88rem; color: var(--muted); line-height: 1.4; }
.rating { display: inline-flex; align-items: center; gap: 5px; }
.rating svg { width: 13px; height: 13px; color: var(--green); }
.rating.few { color: var(--muted); }
.few-tag { display: inline-block; font-family: var(--font-body); font-size: .7rem; font-weight: 500; line-height: 1.3; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); white-space: nowrap; cursor: help; vertical-align: 1px; }
.tag { display: inline-block; font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 500; cursor: pointer; border: 0; text-align: left; max-width: 100%; }
.row .cat { min-width: 0; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 15px; height: 15px; }
.price { text-align: right; }
.price.muted { color: var(--muted); }
.dinner { display: flex; justify-content: flex-end; }
.bar { height: 6px; border-radius: 3px; background: var(--green-soft); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width .3s ease; }
.wish { width: 36px; height: 36px; border: 1px solid transparent; background: none; border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.wish:hover { color: var(--heart); background: color-mix(in srgb, var(--heart) 12%, transparent); }
.wish svg { width: 19px; height: 19px; fill: none; stroke: currentColor; }
.wish[aria-pressed="true"] { color: var(--heart); }
.wish[aria-pressed="true"] svg { fill: currentColor; }
.seg .wish-icon svg { width: 14px; height: 14px; fill: var(--heart); stroke: var(--heart); display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Prices as a till receipt. Computers: a torn-off stub in the price column, its left edge perforated.
   Phones (720px and below): a full receipt with dotted leaders, a total and a torn bottom edge. */
.stub { position: relative; display: grid; justify-items: end; gap: 1px; width: 100%; min-width: 0; padding: 8px 12px 8px 18px; border-radius: 3px 6px 6px 3px; background: var(--rc-paper); color: var(--rc-ink);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 2.5px, #000 3px) 0 0 / 100% 8px repeat-y; mask: radial-gradient(circle at 0 50%, transparent 2.5px, #000 3px) 0 0 / 100% 8px repeat-y; }
.stub::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; border-left: 2px dotted var(--rc-dots); }
.stub-price { font-size: 1.22rem; line-height: 1.2; white-space: nowrap; }
.stub-price.muted { color: var(--rc-muted); }
.stub-sub { font-size: .68rem; line-height: 1.3; color: var(--rc-muted); }
.receipt { display: none; min-width: 0; color: var(--rc-ink); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: .82rem; line-height: 1.3; }
.rc-paper { display: grid; gap: 3px; padding: 10px 12px 6px; background: var(--rc-paper); border-radius: 4px 4px 0 0; }
.receipt::after { content: ""; display: block; height: 9px;
  background: linear-gradient(to bottom right, var(--rc-paper) 50%, transparent 50%) 0 0 / 12px 9px repeat-x, linear-gradient(to bottom left, var(--rc-paper) 50%, transparent 50%) 0 0 / 12px 9px repeat-x; }
.rc-head { text-align: center; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rc-muted); padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px dashed var(--rc-rule); }
.rc-line { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; column-gap: 6px; padding: 2px 6px; margin-inline: -6px; border-radius: 3px; }
.rc-line.on { background: var(--rc-band); }
.rc-dots { align-self: end; margin-bottom: .32em; border-bottom: 2px dotted var(--rc-dots); }
.rc-v { white-space: nowrap; text-align: right; }
.rc-k { white-space: nowrap; }
.rc-v.muted { color: var(--rc-muted); font-size: .74rem; white-space: normal; }
.rc-note { grid-column: 1 / -1; font-size: .7rem; line-height: 1.3; color: var(--rc-muted); overflow-wrap: anywhere; }
.rc-total { margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--rc-rule); border-radius: 0; font-weight: 600; }
.rc-foot { margin-top: 3px; text-align: center; font-size: .66rem; color: var(--rc-muted); line-height: 1.4; }
.rc-foot .src { color: var(--rc-link); text-underline-offset: 2px; }
.receipt .notice { justify-self: start; color: var(--rc-ink); background: color-mix(in srgb, #B3862B 26%, var(--rc-paper)); font-family: var(--font-body); }
/* The wishlist as one bill (homepage): the same paper, one line per saved restaurant, then subtotal, estimated extras and total. */
.bill-wrap { margin-top: 28px; max-width: 540px; }
.bill-intro { color: var(--muted); margin: -4px 0 12px; max-width: 60ch; }
.bill-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.bill-wine { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }
.bill-wine input { width: 16px; height: 16px; accent-color: var(--green); }
.receipt.bill { display: block; font-size: .84rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .08)); }
.receipt.bill .rc-paper { padding: 14px 16px 8px; gap: 5px; }
.bill-line .rc-k { white-space: normal; overflow-wrap: anywhere; }
.bill-line.out .rc-k { color: var(--rc-muted); }
.rc-sub { margin-top: 4px; padding-top: 7px; border-top: 1px dashed var(--rc-rule); border-radius: 0; }
.receipt.bill .rc-total { font-size: .95rem; }

/* Map */
.map-canvas { width: 100%; height: 540px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: grid; place-items: center; }
.map-wait { color: var(--muted); font-size: .9rem; }
.map-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 14px; }
.map-status { font-size: .85rem; color: var(--muted); }
.map-legend .pin-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: .75rem; font-weight: 700; background: var(--pin); box-shadow: 0 0 0 1.5px #ffffff; }
.map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .92rem; }
.map-legend li { display: inline-flex; align-items: center; gap: 8px; }
.map-legend svg { width: 22px; height: 22px; color: var(--pin); }
.map-legend .colour { font-weight: 600; }
.map-legend .count { font-family: var(--font-num); font-size: .8rem; color: var(--muted); }
.btn-primary { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.mlabel { display: none; }
.empty { padding: 40px 18px; text-align: center; color: var(--muted); }
/* "Show all 84 restaurants" under the first ten rows, and "Show fewer" under the whole list. */
.ledger-more { padding: 16px 18px; text-align: center; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 25%, var(--surface)); }
.ledger-more .btn-line { min-height: 44px; }
.ledger-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: .85rem; color: var(--muted); }
.linkish { background: none; border: 0; padding: 0; color: var(--green); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Stars breakdown */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 14px; }
.tier .top { display: flex; justify-content: space-between; align-items: center; }
.tier .stars svg { width: 20px; height: 20px; }
.tier h3 { font-size: 1.2rem; }
/* The label ("average dinner") drops under the price when both don't fit, e.g. Icelandic "meðalkvöldverður" on small phones. */
.tier .avg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-family: var(--font-num); font-size: 2rem; line-height: 1; }
.tier .avg small { font-family: var(--font-body); font-size: .85rem; color: var(--muted); }
.tier dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: .9rem; }
.tier dt { color: var(--muted); }
.tier dd { margin: 0; text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.tier .bar { height: 8px; }

/* Method */
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.method div { display: grid; gap: 8px; align-content: start; }
.method h3 { font-size: 1.15rem; }
.method p { color: var(--muted); font-size: .95rem; }
.method p a { color: var(--green); font-weight: 600; text-underline-offset: 3px; }
/* The "Sources" line under the three method cards (place_sources_html() in build.py). */
.method-sources { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 90ch; }
.method-sources strong { color: var(--ink); margin-right: 6px; }
.method-sources a { color: var(--green); text-underline-offset: 3px; }
/* Destination FAQ (destination_faq() in build.py): two columns of questions on computers, one on phones. */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.faq div { display: grid; gap: 8px; align-content: start; }
.faq h3 { font-size: 1.1rem; }
.faq p { color: var(--muted); font-size: .95rem; }
/* "Area by area" on country and region pages (areas_html() in build.py): each starred area as a plain link with its count and cheapest dinner. */
.area-links { list-style: none; margin: 0; padding: 0; columns: 4 180px; column-gap: 32px; }
.area-links li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line); }
.area-links a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line); text-underline-offset: 3px; }
.area-links a:hover { color: var(--green); text-decoration-color: currentColor; }
.area-links .count { font-family: var(--font-num); font-size: .85rem; color: var(--green); white-space: nowrap; }
.area-links .area-from { display: block; margin-top: 2px; color: var(--muted); font-size: .85rem; }
/* "By cuisine" and "By neighbourhood" on big city pages (build.py browse_html()): two to a row on phones. */
.browse-links { columns: 4 150px; column-gap: 24px; }
/* SEO pilot (pilot_sections() and quick_answer() in build.py): the short answer under the title, then the lists by star
   level, the cheapest meals, the latest guide, cuisines and dietary needs. Logical sides only, so rtl.css needs nothing. */
/* The answer sits at the top of the hero's right-hand column, the figures at its foot. */
.hero-side { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; align-self: stretch; min-width: 0; }
.hero-side .answer { margin: 0 0 auto; max-width: none; padding: 16px 18px; border-inline-start: 3px solid var(--gold); background: rgba(255, 255, 255, .06); border-radius: var(--radius); border-start-start-radius: 0; border-end-start-radius: 0; color: var(--band-ink); font-size: 1rem; line-height: 1.55; }
.answer-label { font-weight: 700; color: var(--gold); }
/* "Last updated 9 October 2026" under the figures: the day the page's data last changed (place_day() in build.py). */
.hero-side .updated { margin: -6px 0 0; font-size: .82rem; color: var(--band-muted); }
/* Destination pages (place.html): the heading runs the full width, then the intro on the left with the answer and figures
   beside it, top-aligned, so the right-hand column is never left empty however long the intro. */
.hero-wide .wrap { row-gap: 0; align-items: start; }
.hero-wide .hero-text { display: contents; }
.hero-wide .hero-text > * { grid-column: 1; }
.hero-wide .hero-text > .eyebrow, .hero-wide .hero-text > h1 { grid-column: 1 / -1; }
.hero-wide .hero-side { grid-column: 2; grid-row: 3 / span 3; align-self: start; justify-content: flex-start; margin-top: 22px; }
.hero-wide .hero-side .answer { margin: 0; }
.hero-wide .hero-side { gap: 16px; }
@media (max-width: 900px) {
  .hero-wide .wrap { row-gap: 28px; }
  .hero-wide .hero-text { display: block; }
  .hero-wide .hero-side { grid-column: auto; grid-row: auto; margin-top: 0; }
}
.facts h3 { font-size: 1.1rem; margin-bottom: 8px; }
.facts h3 .count { font-family: var(--font-num); font-size: .85rem; color: var(--green); font-weight: 400; }
.facts a, #latest .section-head a { color: var(--green); font-weight: 600; text-underline-offset: 3px; }
.vt-name { font-weight: 600; }
.facts .past-label { margin-top: 14px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.facts .past { list-style: none; margin: 6px 0 0; padding: 0; color: var(--muted); font-size: .9rem; }
.facts .past li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px 40px; }
.facts p { color: var(--ink); font-size: .98rem; line-height: 1.6; }
.browse-links + .also { color: var(--muted); font-size: .95rem; margin-top: 24px; max-width: 90ch; }
.browse-links + .also a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.browse-links + .also a:hover { color: var(--green); text-decoration-color: currentColor; }
.value-table { width: 100%; max-width: 760px; border-collapse: collapse; font-size: .95rem; }
.value-table th { text-align: start; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.value-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.value-table .num { text-align: end; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline-end: 0; }
.value-table .stars svg { width: 12px; height: 12px; color: var(--gold); }
.value-table small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
@media (max-width: 720px) {
    .value-table td:nth-child(2), .value-table th:nth-child(2) { display: none; }
}
/* "Michelin star lunch deals" on English destination pages (lunch_deals_html() in build.py): lunch, dinner and the saving;
   on phones the dinner column folds into a line under the name. */
.lunch-table th.num, .lunch-table td.num { padding-inline-start: 16px; }
.lunch-table td.num small { display: inline; margin: 0; }
.lunch-table .ld-dinner { display: none; }
.lunch-table a.vt-name { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.lunch-table a.vt-name:hover { color: var(--green); text-decoration-color: currentColor; }
.lunch-table td.num small { color: var(--muted); }
#lunch-deals .ld-note, #book .ld-note { margin-top: 14px; color: var(--muted); font-size: .85rem; max-width: 760px; }
/* A place's local note on booking, dress code and tipping (localNote, local_note_html() in build.py). */
#book .section-head p { max-width: 72ch; }
#book .section-head p a { color: var(--green); font-weight: 600; text-underline-offset: 3px; }
#book .ld-note { margin-top: 24px; }
@media (max-width: 720px) {
    .lunch-table td:nth-child(2), .lunch-table th:nth-child(2) { display: table-cell; }
    .lunch-table td:nth-child(3), .lunch-table th:nth-child(3) { display: none; }
    .lunch-table .ld-dinner { display: block; }
    .lunch-table th.num, .lunch-table td.num { padding-inline-start: 10px; }
}
/* Related guides on English destination pages (related_guides() in build.py): small picture beside the title, the whole card a link. */
.more-guides { font-weight: 600; color: var(--green); }
.related-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.related-guides li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.related-guides li:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.related-guides li:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.related-guides img, .related-guides .guide-ph { display: flex; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) / 2); background: var(--line); }
.related-guides .guide-ph { background: #F3ECDD; }
.related-guides div { display: grid; gap: 4px; }
.related-guides h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; line-height: 1.2; }
.related-guides h3 a { color: var(--ink); text-decoration: none; }
.related-guides h3 a:focus-visible { outline: none; }
.related-guides h3 a::after { content: ""; position: absolute; inset: 0; }
.related-guides p { color: var(--muted); font-size: .88rem; line-height: 1.45; }
@media (max-width: 720px) { .related-guides li { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; } }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.contact .intro p { color: var(--muted); margin-top: 12px; max-width: 42ch; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.field .err { font-size: .8rem; color: var(--danger); min-height: 1em; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { font-size: .9rem; color: var(--green); font-weight: 500; }

footer { background: var(--band); color: var(--band-muted); font-size: .85rem; padding-block: 24px; }
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 12px 10px 16px; border-radius: 10px; display: flex; gap: 14px; align-items: center; font-size: .9rem; z-index: 20; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.toast button { background: none; border: 0; color: var(--gold); font-weight: 700; cursor: pointer; padding: 4px 6px; }
/* With two buttons (Undo and "Add to diary"), the message takes the first line on phones and the buttons the second.
   (left: 50% would otherwise cap its width at half the screen.) */
.toast { width: max-content; flex-wrap: wrap; row-gap: 2px; }
.toast #toastMsg { flex: 1 1 14em; }
.toast #toastAct:not([hidden]) { margin-left: auto; }

/* Responsive */
@media (max-width: 900px) {
  .hero .wrap, .contact { grid-template-columns: 1fr; gap: 28px; }
  .tiers, .method, .faq { grid-template-columns: 1fr; }
  .figure .value { font-size: 1.4rem; }
}
@media (max-width: 900px) {
  .row.head { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name wish" "cat stars" "rating rating" "notes dinner"; gap: 8px 12px; padding: 16px; }
  .row .name { grid-area: name; }
  .row .cat { grid-area: cat; }
  .row .stars-cell { grid-area: stars; justify-self: end; }
  .row .notes { grid-area: notes; }
  .row .dinner { grid-area: dinner; align-self: start; }
  .row .dinner .mlabel { display: none; }
  .row .rating-cell { grid-area: rating; }
  .row .wish-cell { grid-area: wish; justify-self: end; }
  .map-canvas { height: 440px; }
  .row .rating-cell { white-space: nowrap; }
  .row .rating-cell .note { display: inline; margin-left: 6px; }
  .row .tag { white-space: normal; text-align: left; }
  .mlabel { display: inline; font-family: var(--font-body); font-size: .8rem; color: var(--muted); margin-right: 6px; }
}
/* Phones' two-line restaurant rows (summaryCell in place.js) and their "tap a restaurant" hint are hidden on bigger screens. */
.sum-cell, .acts-cell, .been-lbl, .tap-hint { display: none; }
/* Phones: each restaurant is a two-line row (photo; name, area · cuisine; stars, price; heart; an arrow) that opens when tapped to show the rest. */
@media (max-width: 720px) {
  .tap-hint:not([hidden]) { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .85rem; color: var(--muted); }
  .tap-chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); flex: none; }
  .empty-page .tap-hint { display: none; }
  .row:where(:not(.head):not(.divider)) { grid-template-columns: 44px minmax(0, 1fr) 36px 10px; grid-template-areas: "thumb sum wish chev" "thumb credit wish chev"; gap: 0 10px; padding: 0 12px 0 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* The arrow: down when closed, up when open. */
  .row:where(:not(.head):not(.divider))::after { content: ""; grid-area: chev; align-self: center; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
  .row.open::after { align-self: start; margin-top: 30px; transform: rotate(-135deg); }
  .row:where(:not(.head):not(.divider)) > [role="cell"]:where(:not(.sum-cell):not(.wish-cell)) { display: none; }
  /* The photo sits at the left of every row; the rest of the name cell (chef, badges, photo credit) shows once opened. */
  .row:where(:not(.head):not(.divider)) > .name { display: contents; }
  .row .thumb { grid-area: thumb; width: 44px; height: 44px; align-self: center; font-size: 1.15rem; }
  .row:not(.open) .thumb { pointer-events: none; }
  /* A closed row shows only the photo credit from the name cell, on a third line under the area (Google asks for it beside each photo). */
  .row:not(.open) .name-text { display: block; grid-area: credit; min-width: 0; padding-bottom: 8px; }
  .row:not(.open) .name-text > :not(.credit) { display: none; }
  .row:not(.open) .credit, .row:not(.open) .credit:empty { display: block; min-height: 1.3em; margin-top: -1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* A long photographer's name is shortened so "Google Maps" always shows. */
  .row:not(.open) .credit a { display: inline-block; max-width: calc(100% - 10.5em); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .row.open .thumb { align-self: start; margin-top: 10px; }
  .row.open .name-text { display: block; grid-area: name; }
  .row .wish-cell { display: contents; }
  .row .wish-cell .been { display: none; }
  .row .wish { grid-area: wish; align-self: center; justify-self: end; }
  .row.open .wish { align-self: start; margin-top: 6px; }
  .row.open > .sum-cell { align-self: start; }
  .sum-cell { display: block; grid-area: sum; min-width: 0; }
  .sum { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name stars" "sub price"; gap: 2px 10px; align-items: center; padding: 10px 0 2px; -webkit-tap-highlight-color: transparent; }
  .sum:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
  .sum-name { grid-area: name; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sum-sub { grid-area: sub; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sum-sub .notice, .sum-sub .status-pill { margin: 0 6px 0 0; }
  .sum-stars { grid-area: stars; justify-self: end; display: inline-flex; gap: 4px; align-items: center; font-size: .7rem; }
  .sum-stars .stars svg { width: 13px; height: 13px; }
  .sum-price { grid-area: price; justify-self: end; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
  .sum-price .num { font-weight: 600; font-size: .95rem; }
  .sum-price .note { order: -1; font-size: .72rem; }
  .row.former .sum-stars { opacity: .5; filter: grayscale(1); }
  /* Opened, a long name or area shows in full. */
  .row.open .sum-name, .row.open .sum-sub { white-space: normal; }
  /* A former restaurant already shows its status in the row; open, it adds the note, and the chef if there is one. */
  .row.former.open .name-text:not(:has(.chef-line, .alt-name)), .row.former.open .notes .status-pill { display: none; }
  /* An opened row: chef, leaf badges and photo credit; star change; the note (former restaurants); cuisine, Maps, been there. */
  .row.open { grid-template-areas: "thumb sum wish chev" "name name name name" "stars stars stars stars" "notes notes notes notes" "acts acts acts acts"; row-gap: 10px; align-items: stretch; padding-bottom: 14px; background: color-mix(in srgb, var(--green-soft) 30%, var(--surface)); }
  .row.open > .stars-cell:has(.chg) { display: block; justify-self: start; }
  .row.open > .stars-cell .stars { display: none; }
  .row.open > .stars-cell .chg { margin: 0; }
  .row.open .nm-txt, .row.open .name .area, .row.open .name .map { display: none; }
  .row.open > .notes { display: block; }
  .row.open:not(.former) > .rating-cell { display: flex; flex-direction: column; align-items: flex-start; justify-self: stretch; gap: 1px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: left; white-space: normal; min-width: 0; }
  .row.open .rating-cell .note { display: block; margin: 0; }
  .row.open .mlabel { display: block; margin: 0; font-size: .72rem; font-weight: 400; }
  .row.open .rating .num { font-weight: 600; }
  .row.open > .acts-cell { grid-area: acts; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .maps-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--green); text-decoration: none; font-weight: 500; }
  .maps-pill svg { width: 14px; height: 14px; }
  .acts-cell .been { width: auto; height: auto; display: inline-flex; gap: 4px; align-items: center; font-size: .8rem; font-weight: 500; padding: 3px 10px 3px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
  .acts-cell .been svg { width: 16px; height: 16px; }
  .acts-cell .been-lbl { display: inline; }
  /* The till receipt replaces the menu note and the price boxes in an opened row (former restaurants keep their note). */
  .row.rc-row.open { grid-template-areas: "thumb sum wish chev" "name name name name" "stars stars stars stars" "receipt receipt receipt receipt" "rating rating rating rating" "acts acts acts acts"; }
  .row.rc-row.open > .notes { display: none; }
  .row.rc-row.open > .receipt { display: block; grid-area: receipt; }
  .row.rc-row.open > .rating-cell { flex-direction: row; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; }
  .row.rc-row.open > .rating-cell .mlabel { display: inline; font-size: .8rem; }
  .row.rc-row.open > .rating-cell .note { display: inline; }
}
@media (max-width: 720px) {
  .wrap { padding-inline: 16px; }
  /* The wishlist shows its heart and count only, so the header fits one row (see "Phone and tablet header"). */
  .wish-link span[data-i18n] { display: none; }
  /* The homepage map's star buttons, tightened so all four fit on one row. */
  #mapStars button { padding-inline: 9px; gap: 4px; }
  .header-actions { gap: 6px; }
  .wish-link { padding-inline: 10px; }
  .toolbar { grid-template-columns: minmax(0, 1fr); }
  .toolbar > * { min-width: 0; }  /* a long sort label (e.g. French) mustn't widen the page */
  .figures { grid-template-columns: 1fr 1fr; }
  .figure:first-child { grid-column: 1 / -1; }
  form { grid-template-columns: 1fr; padding: 18px; }
}

/* Breadcrumbs, currency and language switches */
.switchbar { background: var(--band); color: var(--band-ink); border-bottom: 1px solid color-mix(in srgb, var(--band-ink) 12%, transparent); }
.switchbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 8px; flex-wrap: wrap; }
.hseg-right { display: flex; gap: 8px; flex-wrap: wrap; }
.hseg { display: inline-flex; border: 1px solid color-mix(in srgb, var(--band-ink) 25%, transparent); border-radius: 999px; overflow: hidden; }
.hseg a, .hseg button { border: 0; background: none; color: var(--band-muted); font-size: .82rem; font-weight: 600; padding: 5px 12px; text-decoration: none; cursor: pointer; line-height: 1.4; }
.hseg > * + * { border-left: 1px solid color-mix(in srgb, var(--band-ink) 25%, transparent); }
.hseg a:hover, .hseg button:hover { color: var(--band-ink); }
.hseg [aria-current="page"], .hseg [aria-pressed="true"] { background: var(--band-ink); color: var(--band); }
.alt-name { display: block; font-weight: 500; font-size: .82rem; color: var(--ink); opacity: .75; }
.notice { display: inline-block; margin: 0 6px 4px 0; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--ink); }
.row.nolunch .dinner, .row.nolunch .notes { opacity: .65; }
.rate-line { margin: -4px 0 14px; font-size: .82rem; color: var(--muted); }
:lang(zh-Hant-TW) .eyebrow, :lang(zh-Hant-TW) .flabel, :lang(zh-Hant-TW) .figure .label, :lang(zh-Hant-TW) .row.head { letter-spacing: .04em; }

/* Breadcrumbs and place links */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; font-size: .85rem; min-width: 0; }
.crumbs a, .crumbs span { color: var(--band-muted); text-decoration: none; padding: 4px 0; }
.crumbs a:hover { color: var(--band-ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs > * + *::before { content: "›"; display: inline-block; margin: 0 8px; opacity: .7; text-decoration: none; }
.crumbs [aria-current] { color: var(--band-ink); font-weight: 600; }
.switch-note { font-size: .82rem; color: var(--band-muted); }
.explore { margin-top: 22px; display: grid; gap: 10px; }
.explore:empty { display: none; }
.explore-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.explore-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--band-muted); margin-right: 4px; }
.place-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--band-ink) 25%, transparent); color: var(--band-ink); text-decoration: none; font-size: .88rem; font-weight: 500; }
a.place-link:hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.place-link[aria-current] { background: var(--band-ink); color: var(--band); }
.place-link .count, .city-link .count { font-family: var(--font-num); font-size: .75rem; opacity: .7; }
.prerender { margin: 0; padding: 16px 18px 16px 38px; color: var(--muted); font-size: .9rem; display: grid; gap: 4px; }

/* Homepage */
.home .hero .wrap { align-items: center; }
.home-search { position: relative; margin-top: 24px; max-width: 520px; }
/* On the dark banner the box needs a lighter fill and a brighter outline to stand out, most of all in dark mode. */
.hero .home-search .search input, .near-search .search input { border-color: color-mix(in srgb, var(--green) 75%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-search .search input, :root:not([data-theme="light"]) .near-search .search input, :root:not([data-theme="light"]) .near-trip .search input { background: #1B3226; border-color: color-mix(in srgb, var(--green) 75%, transparent); } }
:root[data-theme="dark"] .home-search .search input, :root[data-theme="dark"] .near-search .search input, :root[data-theme="dark"] .near-trip .search input { background: #1B3226; border-color: color-mix(in srgb, var(--green) 75%, transparent); }
.results { list-style: none; margin: 8px 0 0; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .22); position: absolute; left: 0; right: 0; z-index: 5; max-height: 420px; overflow: auto; }
.results a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.results a:hover, .results a:focus-visible { background: var(--green-soft); }
.results .sub { font-size: .8rem; font-weight: 400; color: var(--muted); }
.results .stars svg { width: 12px; height: 12px; }
.results .none { padding: 10px; color: var(--muted); font-size: .9rem; }
.map-world { height: 560px; }
/* Under the search box: four ways in (Near me, Help me pick, Compare, Guides) and the most-searched destinations
   (home_ways_html() in build.py). On phones the tiles go two by two and the destinations scroll sideways in one line. */
.home-ways { padding-block: 28px 36px; }
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.way { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.way:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.way svg { width: 22px; height: 22px; color: var(--gold); }
.way[data-home="compare"] svg { fill: none; stroke: currentColor; }  /* the heart is an outline, as in the header */
.way strong { font-weight: 600; }
.way span { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.pop-title { margin: 22px 0 10px; font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Every country (home_countries_html() in build.py): one fold per continent, open on computers and folded on phones,
   with a short row per country (name and cheapest dinner menu; star counts and a button for its regions and cities). */
.conts { display: grid; gap: 12px; }
.cont { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cont > summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 14px 18px; }
.cont > summary::-webkit-details-marker { display: none; }
.cont > summary::after { content: ""; grid-column: 3; grid-row: 1; align-self: center; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.cont[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.cont > summary:hover .cont-name { color: var(--green); }
.cont-name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.cont-count { color: var(--muted); font-size: .88rem; }
.cont-top { grid-column: 1 / 3; color: var(--muted); font-size: .85rem; }
.cont[open] .cont-top { display: none; }
.crows { list-style: none; margin: 0; padding: 0 18px 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 32px; }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 12px; padding: 10px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.crow-name { font-weight: 600; font-size: 1.02rem; color: var(--ink); text-decoration: none; }
a.crow-name:hover { color: var(--green); }
.crow-soon .crow-name { color: var(--muted); }
.crow-from { font-size: .88rem; font-weight: 600; text-align: right; white-space: nowrap; }
button.crow-from { background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; font-weight: 600; color: var(--green); cursor: pointer; }
.crow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--muted); font-size: .82rem; }
.crow-tier { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-num); font-size: .78rem; }
.crow-tier .stars svg { width: 10px; height: 10px; }
.crow-toggle { justify-self: end; display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; font: inherit; font-size: .82rem; font-weight: 600; color: var(--green); cursor: pointer; white-space: nowrap; }
.crow-toggle::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.crow-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.crow-areas { grid-column: 1 / -1; padding: 4px 0 2px; }
.crow-areas .dest-sub:first-child { margin-top: 4px; }
.crow-areas .dest-cities { margin-top: 6px; }
.nostar-all { margin-top: 20px; }
.nostar-all > .nostar-intro { margin-top: 10px; }
/* "Starred for less" (home_less_html() in build.py): the cheapest set menu at each star level, on scraps of till-receipt paper. */
.less { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.less li { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 4px; background: var(--rc-paper); color: var(--rc-ink); }
.less-label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-muted); }
.less-price { font-family: var(--font-num); font-size: 1.45rem; line-height: 1.2; }
.less-usd { display: block; font-size: .78rem; color: var(--rc-muted); }
.less-what { font-size: .9rem; line-height: 1.45; }
.less-what a { color: var(--rc-link); font-weight: 600; }
.less-what .stars svg { width: 11px; height: 11px; }
.less-note { font-size: .8rem; color: var(--rc-muted); line-height: 1.4; }
/* Guide cards (home_guides_html() in build.py), styled like the Guides page's; on phones they scroll sideways. */
.home-guides li { display: flex; flex-direction: column; }
.home-guides h3 { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.home-more { margin-top: 18px; }
.home-more a { color: var(--green); font-weight: 600; text-decoration: none; }
.home-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* An empty wishlist shrinks to a line or two (home.js sets .is-empty). */
#wishlist.is-empty { padding-block: 36px; }
#wishlist.is-empty .section-head { margin-bottom: 12px; }
#wishlist.is-empty .section-head p { display: none; }
#wishlist.is-empty .empty-note { padding: 12px 16px; text-align: left; margin-bottom: 12px; }
.dest-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.city-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 500; }
.city-link:hover { border-color: var(--green); color: var(--green); }
.dest-more { border-top: 1px solid var(--line); padding-top: 10px; }
.dest-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); padding: 4px 0; }
.dest-more > summary::-webkit-details-marker { display: none; }
.dest-more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 auto; transition: transform .15s; }
.dest-more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.dest-more > summary .count { color: var(--muted); font-weight: 400; font-size: .85rem; }
.dest-more > summary:hover { color: var(--green); }
.dest-more .dest-cities { margin-top: 8px; }
.dest-sub { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 10px; }
#noStars { margin-top: 36px; }
.dest-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.sort-dir { font-weight: 700; margin-left: 2px; }
.dest-sort .seg { border: 0; background: none; border-radius: 0; overflow: visible; gap: 6px; }
.dest-sort .seg button, .dest-sort .seg button + button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.dest-sort .seg button[aria-pressed="true"] { background: var(--green); border-color: var(--green); }
.dest-sort > span { color: var(--muted); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.nostar-intro { color: var(--muted); max-width: 70ch; margin: 6px 0 16px; }
.nostar-notes { display: grid; gap: 10px; margin-bottom: 18px; max-width: 80ch; }
.nostar-notes p { font-size: .95rem; }
.nostar-region { max-width: 900px; }
.nostar-list { list-style: none; padding: 0; margin: 10px 0 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .92rem; }
.sub-head { font-size: 1.2rem; margin: 28px 0 12px; }
.wish-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.wish-list li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto; gap: 8px 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.wish-list li:first-child { border-top: 0; }
.wl-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.wl-name:hover { color: var(--green); }
.wl-meta { color: var(--muted); font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wl-meta .stars svg { width: 13px; height: 13px; }
.empty-note { color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 24px; text-align: center; }
@media (max-width: 720px) {
  .map-world { height: 360px; }
  .home main section { padding-block: 40px; }
  .home main .home-ways { padding-block: 20px 28px; }
  .home .hero { padding-block: 28px 32px; }
  .home .hero .wrap { gap: 22px; }
  /* The homepage's figures fit one row: number and label, without the line under each. */
  .home .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home .figure:first-child { grid-column: auto; }
  .home .figure { padding: 12px 10px; }
  .home .figure .label { font-size: .62rem; letter-spacing: .06em; }
  .home .figure .value { font-size: 1.15rem; }
  .home .figure .sub { display: none; }
  .ways { grid-template-columns: 1fr 1fr; gap: 10px; }
  .way { padding: 12px 14px; }
  .way span { font-size: .82rem; }
  .pop { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .pop::-webkit-scrollbar { display: none; }
  .pop .city-link { flex: none; }
  .cont > summary { padding: 14px 16px; }
  #destSort button { padding-inline: 11px; }
  .crows { padding: 0 16px 4px; }
  .less { grid-template-columns: 1fr 1fr; gap: 10px; }
  .less li { padding: 14px; }
  .less-price { font-size: 1.2rem; }
  .home .home-guides { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .home .home-guides::-webkit-scrollbar { display: none; }
  .home-guides li { scroll-snap-align: start; scroll-margin-inline: 16px; }
  .wish-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .wl-meta { grid-column: 1; }
  .wl-price { grid-row: 1; grid-column: 2; }
}

/* Install as an app */
.install-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gold); background: none; color: var(--gold); border-radius: 999px; font-size: .82rem; font-weight: 600; padding: 5px 12px; cursor: pointer; line-height: 1.4; }
.install-btn:hover { background: color-mix(in srgb, var(--gold) 15%, transparent); }
.install-tip { flex-basis: 100%; margin: 0; padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, var(--band-ink) 10%, transparent); color: var(--band-ink); font-size: .88rem; }
.map-legend .pin-num.hollow { background: #ffffff; color: var(--pin); box-shadow: inset 0 0 0 2px var(--pin); }

/* Clear (×) buttons in search boxes */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search input { padding-right: 44px; }
.search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--green-soft); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.search-clear:hover { background: var(--line); }

/* Map search */
.map-search { margin: 0 0 14px; max-width: none; }
.map-search .search input { border-color: var(--line); }

/* Larger photos */
.thumb[data-zoom] { cursor: zoom-in; }
.thumb[data-zoom]:hover img { transform: scale(1.06); transition: transform .2s ease; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: visible; }
.lightbox::backdrop { background: rgba(5, 15, 10, .82); }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 120px); margin: 0 auto; border-radius: 10px; background: var(--surface); }
.lightbox-caption { color: #EAF4EC; font-size: .9rem; text-align: center; margin-top: 10px; }
.lightbox-caption a { color: inherit; }
.lightbox-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #ffffff; color: #12261C; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); z-index: 1; }
@media (max-width: 720px) { .lightbox-close { top: 6px; right: 6px; } }

/* Near me: the button on each map, and the closest restaurants listed under it */
.near-btn { display: inline-flex; align-items: center; gap: 6px; margin: 10px; padding: 0 14px 0 11px; height: 40px; border: 0; border-radius: 20px; background: #ffffff; color: #12261C;
  font: 600 14px/1 Figtree, system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; }
.near-btn svg { width: 20px; height: 20px; color: #1A73E8; }
.near-btn:disabled { cursor: progress; opacity: .85; }
.near { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.near-title { margin: 0 0 8px; font-size: 1rem; }
.near-msg { margin: 0; font-size: .92rem; color: var(--muted); }
.near-msg a { color: var(--green); font-weight: 600; }
.near-list { list-style: none; margin: 0; padding: 0; }
.near-list li + li { border-top: 1px solid var(--line); }
.near-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.near-list button:hover .near-name { color: var(--green); }
.near-name { font-weight: 600; min-width: 0; }
.near-name .stars svg { width: 13px; height: 13px; }
.near-d { flex: none; font-family: var(--font-num); font-size: .85rem; color: var(--muted); }

/* The floating button that jumps down to the map on destination pages */
#map { scroll-margin-top: 64px; }
.jump-map { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 15; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px 0 14px; height: 46px; border-radius: 23px; background: var(--green); color: #ffffff; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.jump-map svg { width: 20px; height: 20px; }
.jump-map:hover { filter: brightness(1.08); }
.toast:not([hidden]) ~ .jump-map { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jump-map { color: #0C1712; } }
:root[data-theme="dark"] .jump-map { color: #0C1712; }

/* Share: the header button, and the menu shown where the phone's own share sheet isn't available */
.share-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--band-ink); background: none; font: inherit; font-size: .9rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--band-ink) 25%, transparent); cursor: pointer; }
.share-btn:hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.share-btn svg { width: 16px; height: 16px; }
.share-panel { position: fixed; z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 16px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.share-head { margin: 0 0 10px; font-weight: 700; }
.share-copy { display: flex; gap: 8px; }
.share-copy input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: .85rem; }
.share-copy button { flex: none; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--green); color: #ffffff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.share-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.share-links a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .85rem; font-weight: 600; }
.share-links a:hover { border-color: var(--green); color: var(--green); }
.share-note { margin: 12px 0 0; font-size: .8rem; color: var(--muted); }
.share-native { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.share-native svg { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .share-copy button { color: #0C1712; } }
:root[data-theme="dark"] .share-copy button { color: #0C1712; }

/* Places with no starred restaurants yet */
.empty-page .figures, .empty-page #compare .toolbar, .empty-page #compare .filters, .empty-page .ledger-foot { display: none; }
.empty-page .ledger .row.head { display: none; }
.empty-up { display: inline-block; margin-top: 14px; color: var(--gold); font-weight: 600; text-decoration: none; }
.empty-up:hover { text-decoration: underline; }
.explore-more summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--band-muted); list-style: none; }
.explore-more summary::-webkit-details-marker { display: none; }
.explore-more summary::before { content: "+"; font-size: .95rem; letter-spacing: 0; }
.explore-more[open] summary::before { content: "–"; }
.explore-more summary .count { font-family: var(--font-num); letter-spacing: 0; }
.explore-more .explore-row { margin-top: 10px; }
.explore-row .extra { display: none; }
.explore-row.open .extra { display: inline-flex; }
.explore-toggle { background: none; border: 0; padding: 6px 4px; cursor: pointer; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--band-muted); }
.explore-toggle:hover { color: var(--band-ink); }
.place-link.zero { opacity: .6; }

/* Accounts: the header button, the sign-in window, the ✓ "been there" button and the prompts to sign up */
.account-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--band-ink); background: none; font: inherit; font-size: .9rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--band-ink) 25%, transparent); cursor: pointer; }
.account-btn:hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.account-btn svg { width: 16px; height: 16px; }
.account-btn.signed-in { padding-left: 6px; }
.acct-initial { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--band); font-size: .75rem; font-weight: 700; }
.wish-cell { display: flex; gap: 4px; justify-content: flex-end; }
.been { width: 36px; height: 36px; border: 1px solid transparent; background: none; border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.been:hover { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.been svg { width: 20px; height: 20px; }
.been[aria-pressed="true"] { color: var(--surface); }
.been[aria-pressed="true"] svg { color: var(--green); fill: var(--green); }
.been[aria-pressed="true"] svg path { stroke: var(--surface); }
.been-icon svg { width: 14px; height: 14px; color: var(--green); vertical-align: -2px; }
dialog.signin { border: 0; border-radius: 14px; padding: 0; width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
dialog.signin::backdrop { background: rgba(6, 20, 14, .55); }
.si-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 24px 22px; position: relative; border: 0; border-radius: 0; background: none; }
.si-close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 8px; }
.si-close:hover { background: var(--bg); color: var(--ink); }
.si-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0; padding-right: 30px; text-wrap: balance; }
.si-why { margin: 0; color: var(--muted); }
.si-google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.si-google:hover { background: var(--bg); }
.si-google svg { width: 18px; height: 18px; }
.si-or { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: .85rem; }
.si-or::before, .si-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.si-inner label { font-size: .85rem; font-weight: 600; margin-bottom: -6px; }
.si-inner input { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; min-width: 0; }
.si-send { padding: 12px 14px; border: 0; border-radius: 10px; background: var(--green); color: var(--surface); font: inherit; font-weight: 700; cursor: pointer; }
.si-send:disabled { opacity: .7; cursor: progress; }
.si-status { margin: 0; font-size: .92rem; min-height: 0; }
.si-code { display: grid; gap: 12px; }
.si-code input { font-size: 1.3rem; letter-spacing: .25em; text-align: center; }
.si-status:empty { display: none; }
.si-small { margin: 0; font-size: .8rem; color: var(--muted); }
.si-small a { color: var(--green); }
/* The dining diary window (account.js openDiary()): it borrows the sign-in window's look. */
.diary .dy-been { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.diary .dy-been[hidden] { display: none; }
.dy-paid { display: flex; gap: 8px; }
.dy-paid input { flex: 1 1 auto; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.diary select, .diary textarea { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; min-width: 0; }
.diary select { flex: 0 0 auto; max-width: 9.5em; }
.diary textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
.dy-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dy-actions .si-send { flex: 1 1 auto; }
.dy-actions .btn-line { padding: 11px 16px; }
/* "Report a price or change" (report.js): the sign-in box's look, with room for a longer form. */
dialog.report-box { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.rf fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rf legend { font-size: .85rem; font-weight: 600; padding: 0; margin-bottom: 8px; }
.rf .rf-kind { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 500; cursor: pointer; margin: 0; }
.rf .rf-kind:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.rf .rf-kind input { margin: 0; padding: 0; border: 0; background: none; accent-color: var(--green); }
.rf-group { display: grid; gap: 12px; }
.rf-group[hidden], .rf-field[hidden] { display: none; }
.rf-field { display: grid; gap: 6px; min-width: 0; }
.rf-field label { margin: 0; }
.rf select, .rf textarea { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; min-width: 0; }
.rf textarea { resize: vertical; }
.rf input[type="file"] { padding: 8px; font-size: .88rem; }
.rf-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9em); gap: 10px; }
.rf-hint { margin: -4px 0 0; font-size: .8rem; color: var(--muted); }
.rf-done .rf-link { text-align: center; text-decoration: none; }
.report-btn { background: none; border: 0; padding: 0; font: inherit; font-size: .75rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.report-btn:hover { color: var(--green); }
.notes .report-btn { display: block; margin-top: 4px; }
.acts-cell .report-btn { flex-basis: 100%; text-align: start; padding: 4px 0; font-size: .8rem; }
/* On computers the notes column's link shows when the row is pointed at or tabbed into, so 84 rows don't all repeat it. */
@media (hover: hover) and (min-width: 721px) {
  .rc-row .notes .report-btn { opacity: 0; transition: opacity .15s; }
  .rc-row:hover .notes .report-btn, .rc-row:focus-within .notes .report-btn { opacity: 1; }
}
.rp-report.linkish { font: inherit; font-weight: 600; }
/* The account page's reports and their status. */
.rep-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.rep-status.used, .rep-status.confirmed { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); background: var(--green-soft); }
.rep-note { flex-basis: 100%; margin: 0; font-size: .88rem; color: var(--muted); }
.acct-notice { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px); padding: 10px 16px;
  border-radius: 10px; background: var(--ink); color: var(--bg); font-size: .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
/* "Show prices in £ on every page?" for a member who hasn't set a currency (acctOffer() in account.js) */
.acct-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; width: max-content; z-index: 41; }
.acct-offer[hidden] { display: none; }
.ao-btns { display: flex; gap: 8px; }
.acct-offer button { padding: 5px 14px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.acct-offer .ao-yes { background: var(--gold); border-color: var(--gold); color: var(--band); }
.wish-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.wish-cta p { margin: 0; flex: 1 1 280px; color: var(--muted); }
.cta-btn { padding: 10px 18px; border: 0; border-radius: 999px; background: var(--green); color: var(--surface); font: inherit; font-weight: 700; cursor: pointer; }
.wish-synced { margin: 0 0 14px; color: var(--muted); font-size: .92rem; }
.wish-synced a { color: var(--green); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .si-send, :root:not([data-theme="light"]) .cta-btn { color: var(--bg); } }
:root[data-theme="dark"] .si-send, :root[data-theme="dark"] .cta-btn { color: var(--bg); }

/* The account page and plain information pages (privacy notice) */
.acct-main, .prose { padding-block: 36px 64px; max-width: 860px; }
.acct-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 2.8rem); margin: 0; text-wrap: balance; }
.acct-lede { color: var(--muted); margin: 8px 0 22px; overflow-wrap: anywhere; }
.acct-loading { color: var(--muted); }
.acct-message { padding: 10px 14px; border-radius: var(--radius); background: var(--green-soft); margin: 0 0 18px; }
.acct-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acct-stat { background: var(--surface); padding: 14px 16px; }
.acct-stat .n { font-family: var(--font-num); font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.acct-stat .l { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.acct-main .acct-section { margin-top: 34px; padding: 0; border: 0; }
.acct-section h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
.acct-section h2 .count { font-family: var(--font-num); font-size: .85rem; color: var(--muted); }
.acct-section > p { color: var(--muted); margin: 0 0 12px; max-width: 65ch; }
.milestones { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.milestones li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); font-size: .88rem; }
.milestones li svg { width: 14px; height: 14px; opacity: .45; }
.milestones li.got { border-style: solid; border-color: var(--gold); color: var(--ink); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); font-weight: 600; }
.milestones li.got svg { color: var(--gold); opacity: 1; }
.progress { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.progress li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.progress a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.progress a:hover { color: var(--green); }
.progress .bar { height: 8px; border-radius: 4px; background: var(--green-soft); overflow: hidden; }
.progress .bar span { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.progress .num { font-family: var(--font-num); font-size: .85rem; color: var(--muted); }
.acct-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.acct-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; }
.acct-list li + li { border-top: 1px solid var(--line); }
.al-main { flex: 1 1 220px; min-width: 0; display: grid; }
.al-name { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.al-name:hover { color: var(--green); }
.al-meta { font-size: .85rem; color: var(--muted); }
.al-meta .stars svg { width: 12px; height: 12px; }
/* The dining diary: the date first, then the restaurant with what was paid, the menu and the note under it. */
.diary-list .de-date { flex: 0 0 7.5em; font-family: var(--font-num); font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.diary-list .de-date.none { color: var(--muted); font-family: inherit; font-style: italic; }
.de-line { font-size: .9rem; margin-top: 2px; }
.de-note { font-size: .9rem; color: var(--muted); margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--gold); white-space: pre-line; overflow-wrap: anywhere; }
.acct-section > p.de-spent { color: var(--ink); font-weight: 600; }
.de-spent .de-mixed { color: var(--muted); font-weight: 400; }
.al-been { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: .88rem; font-weight: 600; }
.al-been svg { width: 16px; height: 16px; }
.al-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-line { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.btn-line:hover { border-color: var(--green); color: var(--green); }
.btn-line.danger { color: var(--danger); }
.btn-line.danger:hover { border-color: var(--danger); color: var(--danger); }
.btn-line.danger.solid { background: var(--danger); border-color: var(--danger); color: var(--surface); }
/* Your preferences (account-page.js prefsSection()) */
.prefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prefs label, .prefs .pref-k { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.prefs select, .prefs input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.pref-home { position: relative; }
.pref-list { position: absolute; z-index: 5; inset-inline: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.pref-list button { display: block; width: 100%; padding: 8px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pref-list button:hover, .pref-list button:focus { background: var(--green-soft); }
.pref-list small { color: var(--muted); }
.pref-note { grid-column: 1 / -1; margin: 0; font-size: .88rem; color: var(--muted); }
.pref-note.ok { color: var(--green); }
.pref-note:empty { display: none; }
.acct-section > .pref-small { margin: 10px 0 0; font-size: .82rem; }
.pref-small a { color: var(--green); }
@media (max-width: 720px) { .prefs { grid-template-columns: 1fr; } }
/* Star emails (account-alerts.js emailsSection()) */
.alerts { display: grid; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.al-opt { display: flex; gap: 12px; align-items: flex-start; }
.al-opt input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--green); }
.al-opt strong { display: block; margin-bottom: 2px; }
.al-opt span, .al-opt small { color: var(--muted); }
.al-opt a { color: var(--green); }
.al-countries { padding: 14px 0 0 30px; border-top: 1px solid var(--line); }
.al-countries > div { flex: 1; min-width: 0; }
.al-chosen { list-style: none; margin: 10px 0 0; padding: 0; }
.al-chosen li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.al-chosen li > span { color: var(--ink); }
.al-countries select { margin-top: 10px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.acct-confirm { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--danger-soft); }
.acct-confirm p { margin: 0 0 10px; }
.acct-privacy { margin: 18px 0 0; font-size: .88rem; }
.acct-privacy a { color: var(--green); }
.prose h1, .prose .h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 2.6rem); margin: 0; }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin: 30px 0 8px; }
.prose p, .prose li { max-width: 68ch; line-height: 1.6; }
.prose-date { color: var(--muted); font-size: .9rem; }
.prose a { color: var(--green); }
/* Guides (/guides/): long-form explainers. Tables scroll inside their own box on phones, never the page. */
.guide p { margin: 0 0 14px; }
.guide .lede { font-size: 1.12rem; line-height: 1.55; max-width: 64ch; margin-top: 20px; }
.guide .prose-date { margin: 6px 0 0; }
.guide h2 { scroll-margin-top: 140px; }
.guide h3 { font-size: 1.02rem; margin: 22px 0 4px; }
.guide ol li, .guide ul li { margin-bottom: 6px; }
.table-wrap { overflow-x: auto; margin: 18px 0 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.guide-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .92rem; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); line-height: 1.45; }
.guide-table th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.guide-table tr:last-child td { border-bottom: 0; }
.guide-table td:first-child { white-space: nowrap; font-weight: 600; }
.guide-table td:nth-child(4), .guide-table td:nth-child(5) { font-family: var(--font-num); white-space: nowrap; }
.guide-table .muted { color: var(--muted); font-size: .8rem; font-family: var(--font-body); white-space: normal; }
.g-stars { color: var(--gold); letter-spacing: .05em; margin-right: 4px; }
.table-note { color: var(--muted); font-size: .85rem; }
.timeline { list-style: none; padding: 0; border-left: 2px solid var(--line); margin-left: 4px; }
.timeline li { padding-left: 16px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.guide-faq { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 6px; }
/* "Sources" at the end of a guide (`sources` in its JSON): small print, each source on its own line, dated. */
.guide-sources { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 6px; font-size: .9rem; color: var(--muted); }
.guide-sources h2 { font-size: 1.1rem; color: var(--ink); }
.guide-sources ul { padding-left: 18px; margin: 0 0 12px; }
.guide-sources li { margin-bottom: 6px; line-height: 1.5; overflow-wrap: anywhere; }
.guide-sources-own { margin: 0; }
/* Featured picture under a guide's date line (src/img/guides/, see docs/image-style.md). */
.guide-hero { margin: 20px 0 22px; }
.guide-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--line); }
/* /guides/: wider than an article. The pillar guide leads as a wide card, then the rest in picture cards under
   their sections (three across on computers, two on tablets, one on phones), then links to put them to use.
   Each card is one link (its heading's ::after covers the card). */
.guide-index { max-width: 1120px; }
.guide-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.guide-jump a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; }
.guide-jump a:hover { border-color: var(--green); color: var(--green); }
.guide-feature, .guide-list li { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.guide-feature:hover, .guide-list li:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.guide-feature:focus-within, .guide-list li:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.guide-feature h2 a, .guide-list h3 a { color: var(--ink); text-decoration: none; }
.guide-feature h2 a:focus-visible, .guide-list h3 a:focus-visible { outline: none; }
.guide-feature h2 a::after, .guide-list h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-feature img, .guide-list img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); }
/* Stand-in until a guide has its picture: cream paper and gold stars, as in docs/image-style.md. */
.guide-ph { display: flex; align-items: center; justify-content: center; gap: 4%; width: 100%; aspect-ratio: 16 / 9; background: #F3ECDD; color: #B8902F; }
.guide-ph svg { width: 12%; height: auto; aspect-ratio: 1; }
.guide-feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin-top: 28px; }
.guide-feature img, .guide-feature .guide-ph { height: 100%; }
.guide-feature > div { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 32px; }
.guide-feature h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; }
.guide-feature p { margin: 0; }
.guide-kicker { color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.guide-go { margin-top: 4px; color: var(--green); font-weight: 600; }
.guide-group { margin-top: 48px; padding-block: 0; scroll-margin-top: 140px; }
.guide-group + .guide-group { margin-top: 40px; padding-top: 36px; }
.guide-group > h2 { margin: 0 0 2px; font-size: 1.65rem; }
.guide-group-note { color: var(--muted); }
.guide-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 20px; margin-top: 18px; }
.guide .guide-list li { display: flex; flex-direction: column; max-width: none; margin: 0; }
.guide-list li > div { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.guide .guide-list h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.guide-list li p { margin: 0; color: var(--muted); line-height: 1.5; }
/* Card footer: the guide's key figure on a scrap of till-receipt paper, and the reading time. */
.guide .guide-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 6px; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.guide-feature .guide-meta { margin-top: 4px; padding-top: 0; }
.guide-langs { position: relative; z-index: 1; font-size: .9rem; color: var(--muted); }
/* Translated guides: a link to a guide that's only in English carries a small EN tag */
.lang-tag { display: inline-block; margin-inline-start: .3em; padding: 0 .3em; border: 1px solid currentColor; border-radius: 3px; font-size: .62em; font-weight: 600; line-height: 1.4; vertical-align: .15em; opacity: .75; }
.guide-fig { position: relative; padding: 4px 10px 4px 16px; border-radius: 3px; background: var(--rc-paper); color: var(--rc-ink); font-family: var(--font-num); font-size: .76rem; }
.guide-fig::before { content: ""; position: absolute; left: 6px; top: 5px; bottom: 5px; border-left: 2px dotted var(--rc-dots); }
.guide-next { margin-top: 56px; padding: 28px; border-radius: var(--radius); background: var(--band); color: var(--band-ink); }
.guide .guide-next h2 { margin: 0 0 16px; color: var(--band-ink); font-size: 1.5rem; }
.guide-next-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.guide .guide-next-links a { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 2px 12px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); color: var(--band-ink); text-decoration: none; transition: border-color .15s, background .15s; }
.guide .guide-next-links a:hover { border-color: var(--gold); background: rgba(255, 255, 255, .05); }
.guide-next-links svg { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--gold); }
.guide-next-links strong { font-weight: 600; }
.guide-next-links span { color: var(--band-muted); font-size: .9rem; line-height: 1.4; }
.guide .guide-cities { display: flex; flex-wrap: wrap; gap: 6px 16px; max-width: none; margin: 20px 0 0; font-size: .92rem; }
.guide-cities span { color: var(--band-muted); }
.guide .guide-cities a { color: var(--band-ink); }
@media (max-width: 720px) {
  .guide-feature { grid-template-columns: 1fr; }
  .guide-feature img, .guide-feature .guide-ph { height: auto; }
  .guide-feature > div { padding: 18px 18px 20px; }
  .guide-group { margin-top: 36px; }
  .guide-group + .guide-group { margin-top: 32px; padding-top: 28px; }
  .guide-list { gap: 16px; }
  .guide-next { padding: 22px 18px; }
}
footer a.foot-guide { color: inherit; }
/* Popular destinations (foot_places_html() in build.py): a full-width line of links on every page. */
footer .foot-places { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; }
footer .foot-places > span:first-child { font-weight: 600; color: var(--band-ink, inherit); }
footer .foot-places a { color: inherit; }
footer .foot-places [aria-current] { opacity: .6; }
/* Trademark notice: its own full-width line under the footer's other items. */
footer .foot-legal { flex-basis: 100%; font-size: .78rem; }
/* Data tables on the list guides (by country, three-star list): numbers in their own columns, sortable headings. */
.guide-table.data td { font-family: var(--font-body); white-space: normal; }
.guide-table.data td:first-child { white-space: normal; }
.guide-table.data td.num { font-family: var(--font-num); white-space: nowrap; }
.guide-table.data td.num .muted { font-family: var(--font-body); }
.guide-table.three-list td:first-child { min-width: 12ch; }
.guide-table.most-table td:first-child { min-width: 15ch; }
.guide-table th button { all: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.guide-table th button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
.guide-table th[aria-sort="descending"] button::after { content: "↓"; }
.guide-table th[aria-sort="ascending"] button::after { content: "↑"; }
.jump-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.jump-links a { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; text-decoration: none; background: var(--surface); font-size: .9rem; }
.jump-links span { color: var(--muted); font-family: var(--font-num); font-size: .82rem; margin-left: 2px; }
.guide h3[id^="three-"] { scroll-margin-top: 140px; }
.change-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 14px 0; }
.change-lists > div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 4px 18px 10px; }
.change-lists ul { padding-left: 18px; margin: 6px 0; }
/* Ranked lists (Top Michelin star restaurants in the world): a gold rank number before each name, and the top ten as write-ups. */
.rank { display: inline-block; min-width: 1.6em; color: var(--gold); font-family: var(--font-num); font-weight: 700; }
.rank-cards { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 14px; }
.rank-cards li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 4px 18px 6px; margin: 0; }
.rank-cards h3 { margin: 14px 0 4px; font-size: 1.08rem; }
.rank-cards h3 a:first-of-type { color: var(--ink); }
.rank-facts { color: var(--muted); font-size: .88rem; }
/* Beside a restaurant's name in the guides' tables: the small arrow to its MICHELIN Guide page (the name opens our prices). */
.mg-link { font-size: .8rem; color: var(--muted); text-decoration: none; padding: 2px 3px; }
.mg-link:hover { color: var(--green); }
/* Michelin Guide ceremony dates (ceremony_blocks() in build.py): what's coming up, the year at a glance, and a flag on guides
   whose new stars our pages haven't caught up with yet. Logical sides only, so rtl.css needs nothing. */
.cer-list { list-style: none; padding: 0; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cer-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); margin: 0; }
.cer-list li:last-child { border-bottom: 0; }
.cer-list .cer-when { min-width: 17ch; }
.cer-list strong.cer-when { font-variant-numeric: tabular-nums; }
.cer-list .cer-name { font-weight: 600; flex: 1 1 16ch; }
.cer-list .muted { color: var(--muted); font-size: .88rem; }
.cer-flag, .cer-done { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.cer-flag { background: var(--gold); color: #1d1a14; }
.cer-done { border: 1px solid var(--line); color: var(--muted); }
.guide-table.cer-table td:first-child { min-width: 14ch; }
.guide-table.cer-table tr:target td { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.guide [id^="cer-"] { scroll-margin-top: 140px; }
.cer-calendar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; margin: 16px 0; }
.cer-calendar > div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 14px; }
.cer-calendar h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cer-calendar ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; line-height: 1.5; }
.cer-calendar li { margin: 0; }
.cer-calendar p { margin: 0; font-size: .9rem; }
@media (max-width: 720px) {
  /* Long ranked tables: on phones each card puts its figures two to a row, about half the height. */
  .guide-table.rank-list tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-table.rank-list td:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  /* On phones each row of a guide table becomes a card, with its column names beside the values. */
  .table-wrap { overflow: visible; border: 0; background: none; }
  .guide-table { min-width: 0; }
  .guide-table thead { display: none; }
  .guide-table, .guide-table tbody, .guide-table tr, .guide-table td { display: block; }
  .guide-table tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 12px; padding: 4px 0; }
  .guide-table td { border: 0; padding: 6px 14px; white-space: normal !important; }
  .guide-table td:first-child { font-size: 1.02rem; padding-top: 10px; }
  .guide-table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; font-family: var(--font-body); margin-bottom: 2px; }
}
@media (max-width: 720px) {
  .acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress li { grid-template-columns: minmax(0, 1fr) auto; }
  .progress .bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Cookie banner (Google Analytics only loads after Accept). Both buttons look the same on purpose. */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: 560px; margin: 0 auto;
  background: var(--band); color: var(--band-ink); border: 1px solid var(--band-muted); border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 14px; line-height: 1.45; }
.cookie-bar p { margin: 0; flex: 1 1 260px; }
.cookie-bar a { color: var(--band-ink); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cookie-actions button { font: inherit; font-weight: 600; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--band-ink); background: transparent; color: var(--band-ink); cursor: pointer; }
.cookie-actions button:hover { background: rgba(255,255,255,.12); }
.cookie-settings-btn { font: inherit; font-weight: 600; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--green); background: var(--surface); color: var(--green); cursor: pointer; }

/* "Near me" and "Help me pick" in the menu: an icon with its label. */
.nav a.nav-near, .nav a.nav-pick { display: inline-flex; align-items: center; gap: 5px; }
.nav a.nav-near svg, .nav a.nav-pick svg { width: 15px; height: 15px; }
.nav a[aria-current="page"] { color: var(--band-ink); }
/* Destination pages also list their own sections (Compare, Map, By stars…), so on computers Near me and Share show just
   their icons there, keeping the header on one line. The words stay for screen readers, and in the phone menu. */
@media (min-width: 1141px) {
  .site-header:has(a[href="#method"]) .nav-near span, .site-header:has(a[href="#method"]) .share-btn span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header:has(a[href="#method"]) .share-btn { padding-inline: 9px; }
}

/* Phone and tablet header (1140px and below, where the full header no longer fits one line): one row stays on screen
   (logo, search, wishlist, menu button) and the breadcrumb bar scrolls away with the page. The menu button drops down
   the section links, Sign in and Share. On computers .header-menu is just a wrapper, and the search and menu buttons
   are hidden. Phones also move the currency switch beside Dinner/Lunch and show the wishlist as just a heart. */
.header-menu { display: contents; }
.search-link, .menu-btn { display: none; }
@media (max-width: 1140px) {
  .masthead { display: contents; }
  .site-header { position: sticky; top: 0; z-index: 10; }
  .site-header .wrap { flex-wrap: nowrap; padding-block: 10px; gap: 8px; }
  .brand { font-size: 1.15rem; gap: 8px; white-space: nowrap; }
  .brand svg { width: 19px; height: 19px; }
  .site-header .header-actions { flex-wrap: nowrap; flex-shrink: 0; }
  .search-link, .menu-btn { display: inline-grid; place-items: center; width: 36px; height: 34px; padding: 0; border-radius: 999px; background: none; color: var(--band-ink); cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--band-ink) 25%, transparent); }
  .search-link svg, .menu-btn svg { width: 18px; height: 18px; }
  .search-link:hover, .menu-btn:hover, .menu-open .menu-btn { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
  .wish-link { padding-block: 0; height: 34px; }
  .header-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 11; max-height: calc(100vh - 60px); overflow: auto; overscroll-behavior: contain;
    padding: 4px 16px 18px; background: var(--band); border-bottom: 1px solid color-mix(in srgb, var(--band-ink) 12%, transparent); box-shadow: 0 18px 36px rgba(0, 0, 0, .28); }
  .menu-open .header-menu { display: flex; flex-wrap: wrap; gap: 14px 8px; }
  .header-menu .nav { display: flex; flex-direction: column; flex-basis: 100%; gap: 0; }
  .header-menu .nav a { display: flex; align-items: center; gap: 10px; padding: 13px 2px; border-radius: 0; font-size: 1rem; color: var(--band-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--band-ink) 10%, transparent); }
  .header-menu .nav a:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
  .header-menu .nav a[hidden] { display: none; }
  /* Near me and Guides lead the list; the links to this page's sections follow. */
  .header-menu .nav a.nav-near, .header-menu .nav a.nav-pick, .header-menu .nav a.nav-guides { order: -1; }
  .header-menu .nav a.nav-near svg, .header-menu .nav a.nav-pick svg { width: 17px; height: 17px; }
  .header-menu .account-btn, .header-menu .share-btn { padding: 8px 16px; }
}
@media (min-width: 721px) and (max-width: 1140px) {
  /* Tablets: the menu drops down at the right as a panel, rather than across the whole width. */
  .header-menu { left: auto; right: 12px; width: 340px; border: 1px solid color-mix(in srgb, var(--band-ink) 12%, transparent); border-top: 0; border-radius: 0 0 14px 14px; }
}
@media (max-width: 720px) {
  .switchbar #currencySwitch { display: none; }
}
@media (max-width: 360px) {
  /* The smallest phones: the logo's star goes, so the header still fits one row. */
  .brand svg { display: none; }
  .brand { font-size: 1.08rem; }
  /* The Filters button keeps its icon and count; its word stays for screen readers. */
  .filters-btn { padding-inline: 12px; }
  .filters-btn span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* /near-me/ */
.near-hero { background: var(--band); color: var(--band-ink); padding-block: 40px 36px; }
.near-hero .eyebrow { color: var(--gold); }
.near-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 5.4vw, 3.4rem); margin: 6px 0 0; line-height: 1.1; }
.near-hero .lede { color: var(--band-muted); max-width: 62ch; margin: 14px 0 0; line-height: 1.55; }
.near-find { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.near-locate { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 1rem; background: var(--gold); color: #12261C; }
.near-locate svg { width: 20px; height: 20px; }
.near-locate:disabled { cursor: progress; opacity: .85; }
.near-or { color: var(--band-muted); font-size: .9rem; }
.near-search { display: flex; gap: 8px; flex: 1 1 320px; max-width: 520px; margin: 0; padding: 0; background: none; border: 0; }
.near-search .search { flex: 1; }
.near-search input { color: var(--ink); }
.near-go { padding: 0 18px; border: 1px solid color-mix(in srgb, var(--band-ink) 35%, transparent); border-radius: var(--radius); background: none; color: var(--band-ink); font: inherit; font-weight: 600; cursor: pointer; }
.near-go:hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.near-status { margin: 14px 0 0; min-height: 1.4em; color: var(--band-ink); }
.near-status.error { color: #F3B4A8; }
.near-privacy { margin: 6px 0 0; font-size: .82rem; color: var(--band-muted); }
.near-privacy a { color: inherit; }
.near-results { padding-block: 28px 8px; }
.near-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.near-card { display: grid; gap: 3px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
button.near-card:hover { border-color: var(--green); }
.nc-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.nc-name { font-weight: 700; line-height: 1.3; }
.nc-name .stars svg { width: 12px; height: 12px; }
.nc-meta { font-size: .85rem; color: var(--muted); }
.nc-big { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.near-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 20px 0 14px; }
.near-sel { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.near-sel select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; }
.near-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.near-map { height: 640px; position: sticky; top: 12px; }
.near-count { margin: 0 0 8px; font-size: .92rem; color: var(--muted); }
.near-count strong { color: var(--ink); }
.near-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.near-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.near-row + .near-row { border-top: 1px solid var(--line); }
.nr-main { min-width: 0; display: grid; gap: 2px; }
.nr-main .stars svg { width: 12px; height: 12px; }
.nr-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.nr-name:hover { color: var(--green); text-decoration: underline; }
.nr-where, .nr-chef { font-size: .84rem; color: var(--muted); }
.nr-chef { font-style: italic; }
.nr-price { font-family: var(--font-num); font-size: .86rem; margin-top: 2px; }
.nr-lunch { color: var(--muted); }
.nr-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.nr-d { font-family: var(--font-num); font-size: .85rem; color: var(--muted); white-space: nowrap; }
.nr-side .wish, .nr-pin { width: 34px; height: 34px; }
.nr-pin { border: 1px solid transparent; background: none; border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.nr-pin:hover { color: var(--green); background: var(--green-soft); }
.nr-pin svg { width: 18px; height: 18px; }
.nr-hours { font-size: .84rem; color: var(--green); }
.nr-hours.shut { color: var(--muted); }
.nr-go { font-size: .84rem; color: var(--muted); }
.nr-go a { color: var(--green); font-weight: 600; text-decoration: none; }
.nr-go a:hover { text-decoration: underline; }
.nr-time { color: var(--ink); font-weight: 600; }
.nc-hours-note { display: block; margin-top: 4px; font-size: .82rem; }
.near-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: .86rem; color: var(--muted); }
.near-times > span:first-child { margin-right: 2px; }
.nt-note { font-size: .82rem; }
.near-news { display: grid; gap: 10px; margin-top: 14px; }
.near-new { min-width: 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--surface); }
.near-new.fresh { border-left-color: var(--green); background: var(--green-soft); }
.near-new p { margin: 0 0 8px; font-size: .92rem; }
.nn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nn-chip { display: inline-grid; gap: 1px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem; text-align: left; cursor: pointer; }
.nn-chip:hover { border-color: var(--green); }
.nn-chip .stars svg { width: 11px; height: 11px; }
.nn-chip small { font-weight: 400; font-size: .78rem; color: var(--muted); }
.nn-more { align-self: center; font-size: .86rem; color: var(--muted); }
.near-trip-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--band-ink); font: inherit; font-size: .95rem; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.near-trip-toggle svg { width: 18px; height: 18px; color: var(--gold); }
.near-trip { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; max-width: 860px; padding: 0; background: none; border: 0; }
.near-trip .search { flex: 1 1 260px; position: relative; }
.near-trip .search input { padding-left: 74px; color: var(--ink); border-color: color-mix(in srgb, var(--green) 75%, transparent); }
.nt-label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.rp-hours { display: block; }
.rp-hours b { display: inline-block; min-width: 5.2em; font-weight: 600; }
.near-more { margin-top: 10px; }
.near-remember { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }
.near-remember label { display: inline-flex; gap: 8px; align-items: center; color: var(--ink); cursor: pointer; }
.near-static { padding-block: 8px 24px; }
.near-static .guide { padding-block: 24px 24px; }
.near-popular { margin-top: 12px; }
@media (max-width: 900px) {
  .near-layout { grid-template-columns: 1fr; }
  .near-map { height: 380px; position: static; }
}
@media (max-width: 720px) {
  .near-cards { grid-template-columns: 1fr 1fr; }
  .near-total { grid-column: 1 / -1; }
  .nn-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .nn-chip { flex: none; max-width: 78vw; }
  .nn-more { flex: none; }
  .near-search { flex-basis: 100%; }
  .near-locate { width: 100%; justify-content: center; }
  .near-or { width: 100%; text-align: center; }
}

/* /pick/ ("Help me pick"): one question per screen in a card that overlaps the green band, then three picks. */
.pick-hero { padding-bottom: 72px; }
.pick-stage { margin-top: -48px; padding-bottom: 12px; }
.pick-quiz, .pick-result { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 40px rgba(16, 54, 42, .12); padding: 22px 26px 24px; }
.pick-quiz, .pick-result { scroll-margin-top: 126px; }
.pick-top { display: flex; align-items: center; gap: 14px; min-height: 34px; }
.pick-back { border: 0; background: none; color: var(--green); font: inherit; font-weight: 600; padding: 6px 4px; cursor: pointer; }
.pick-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.pick-steps li > * { display: block; width: 28px; height: 6px; border-radius: 3px; background: var(--line); border: 0; padding: 0; }
.pick-steps li.done > * { background: var(--green); cursor: pointer; }
.pick-steps li.now > * { background: var(--gold); }
.pick-stepno { font-family: var(--font-num); font-size: .8rem; color: var(--muted); white-space: nowrap; }
.pick-back:not([hidden]) + .pick-steps { margin-left: auto; }
.pick-body { padding-top: 10px; }
.pick-body h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); outline: none; }
.pick-hint { color: var(--muted); margin: 8px 0 18px; max-width: 62ch; }
.pick-wait { color: var(--muted); padding: 30px 0; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pick-in { animation: pick-in .28s ease-out; }
  @keyframes pick-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
}
.pick-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pick-opts-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pick-opt { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 18px 54px 18px 18px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.pick-opt:hover:not(:disabled) { border-color: var(--green); background: var(--green-soft); transform: translateY(-1px); }
.pick-opt[aria-pressed="true"] { border-color: var(--green); }
.pick-opt:disabled { opacity: .5; cursor: not-allowed; }
.po-title { font-weight: 700; font-size: 1.08rem; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.po-title .stars { color: var(--gold); }
.po-title .stars svg { width: 13px; height: 13px; }
.po-sub { color: var(--muted); font-size: .9rem; }
.po-n { position: absolute; top: 16px; right: 14px; font-family: var(--font-num); font-size: .78rem; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 2px 8px; }
.pick-where { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.pick-where .near-locate { flex: none; }
.pick-find { position: relative; flex: 1 1 300px; max-width: 520px; }
.pick-find .search { width: 100%; }
.pick-suggest { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0, 0, 0, .14); }
.pick-suggest button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.pick-suggest button:hover, .pick-suggest button:focus-visible { background: var(--green-soft); outline: none; }
.ps-ctx { color: var(--muted); font-size: .88rem; }
.ps-n { margin-left: auto; font-family: var(--font-num); font-size: .78rem; color: var(--muted); }
.ps-none { padding: 10px; color: var(--muted); font-size: .92rem; }
.pick-status { min-height: 1.3em; margin: 10px 0 0; font-size: .92rem; }
.pick-status.error { color: var(--danger); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pick-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .93rem; cursor: pointer; }
.pick-chip span { font-family: var(--font-num); font-size: .76rem; color: var(--muted); }
.pick-chip:hover { border-color: var(--green); }
.pick-chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--surface); }
.pick-chip[aria-pressed="true"] span { color: inherit; opacity: .8; }
.pick-privacy { margin: 16px 0 0; font-size: .82rem; color: var(--muted); }
.pick-budget { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pick-amount { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; }
.pick-amount small { font-family: var(--font-body); font-size: .95rem; color: var(--muted); }
.pick-range { width: 100%; margin: 18px 0 4px; accent-color: var(--green); height: 28px; }
.pick-scale { display: flex; justify-content: space-between; font-family: var(--font-num); font-size: .78rem; color: var(--muted); }
.pick-wine { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-weight: 600; cursor: pointer; }
.pick-wine input { width: 18px; height: 18px; accent-color: var(--green); }
.pick-note { font-size: .88rem; color: var(--muted); margin: 8px 0 0; max-width: 70ch; }
.pick-fit { margin: 14px 0 0; }
.pick-next { margin-top: 20px; display: flex; justify-content: flex-end; }
.pick-next .cta-btn { padding: 12px 28px; font-size: 1rem; }
.pick-left { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.pick-left:empty { display: none; }
.pick-rhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pick-rhead h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-top: 4px; outline: none; }
.pick-rhead .eyebrow { color: var(--gold); }
.pick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pick-actions .cta-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pick-actions svg { width: 17px; height: 17px; }
.pick-ghost { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.pick-ghost:hover { border-color: var(--green); }
.pick-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pick-summary .pick-chip { font-size: .84rem; padding: 5px 12px; }
.pick-hack { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.pick-hack p { margin: 0 0 6px; }
.pick-hack a { color: var(--ink); font-weight: 600; }
.pick-hack .stars svg { width: 12px; height: 12px; color: var(--gold); }
.pick-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pick-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); border-top: 4px solid var(--green); }
.pick-card.pick-value { border-top-color: var(--gold); }
.pick-card.pick-wild { border-top-color: var(--heart); }
.pc-head { display: flex; align-items: center; justify-content: space-between; }
.pc-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.pc-head .wish { width: 36px; height: 36px; }
.pick-card h3 { font-size: 1.45rem; line-height: 1.15; }
.pick-card h3 a { color: var(--ink); text-decoration: none; }
.pick-card h3 a:hover { color: var(--green); text-decoration: underline; }
.pick-card > .stars { color: var(--gold); }
.pick-card > .stars svg { width: 15px; height: 15px; }
.pc-where, .pc-chef { margin: 0; color: var(--muted); font-size: .88rem; }
.pc-chef { font-style: italic; }
.pc-why { margin: 8px 0 4px; font-size: .95rem; line-height: 1.45; }
.pc-prices { display: grid; gap: 2px; padding: 10px 0; border-top: 1px dashed var(--line); margin-top: auto; }
.pc-price { font-family: var(--font-num); font-size: .95rem; }
.pc-conv, .pc-sub { color: var(--muted); }
.pc-sub { font-family: var(--font-num); font-size: .82rem; }
.pc-est { font-style: italic; }
.pick-card .diet-badges { margin: 0 0 8px; }
.pc-go { font-weight: 600; color: var(--green); text-decoration: none; }
.pc-go:hover { text-decoration: underline; }
.pick-more { margin-top: 26px; }
.pick-more h3 { font-size: 1.3rem; margin-bottom: 10px; }
.pick-more .wish { width: 34px; height: 34px; }
.pick-empty { margin-top: 18px; }
/* Weekend mode: each plan card holds a lunch and a dinner (planCard() in pick.js). */
.pick-plan { gap: 8px; }
.pick-plan .pc-why { margin: 2px 0 0; }
.pw-meal { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--line); }
.pw-when { font-family: var(--font-num); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.pw-meal h3 { font-size: 1.2rem; line-height: 1.2; }
.pw-meal h3 a { color: var(--ink); text-decoration: none; }
.pw-meal h3 a:hover { color: var(--green); text-decoration: underline; }
.pw-meal .stars { color: var(--gold); }
.pw-meal .stars svg { width: 13px; height: 13px; }
.pw-meal .wish { width: 34px; height: 34px; }
.pw-meal .pc-price { margin: 2px 0 0; font-size: .9rem; }
/* The picks side by side (compareTable() in pick.js). On phones each row's label sits above its values. */
.pick-compare { margin-top: 16px; }
.pick-compare > .linkish { font-weight: 600; }
.pick-cmp-wrap { margin-top: 12px; overflow-x: auto; }
.pick-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .92rem; }
.pick-cmp th, .pick-cmp td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.pick-cmp thead th { border-bottom-width: 2px; }
.pick-cmp thead .pc-label { display: block; margin-bottom: 2px; }
.pick-cmp thead a { color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; line-height: 1.2; text-decoration: none; }
.pick-cmp thead a:hover { color: var(--green); text-decoration: underline; }
.pick-cmp th[scope="row"] { width: 20%; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.pick-cmp .num td { font-family: var(--font-num); font-size: .88rem; }
.pick-cmp small { color: var(--muted); }
.pick-cmp .stars svg { width: 12px; height: 12px; color: var(--gold); }
.pick-cmp .diet-badges, .pick-cmp .diet-badge { font-family: var(--font-body); }
.cmp-tick { color: var(--green); font-weight: 700; }
.pick-compare .pick-note a { color: var(--green); font-weight: 600; }
.pick-result .pick-note { margin-top: 16px; }
@media (max-width: 900px) {
  .pick-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pick-hero { padding-bottom: 60px; }
  .pick-stage { margin-top: -40px; }
  .pick-stage .wrap { padding-inline: 12px; }
  .pick-quiz, .pick-result { scroll-margin-top: 70px; }
  .pick-quiz, .pick-result { padding: 16px 16px 18px; border-radius: 14px; }
  .pick-opts, .pick-opts-wide { grid-template-columns: 1fr; gap: 8px; }
  .pick-opts-wide { grid-template-columns: 1fr 1fr; }
  .pick-opt { padding: 14px 50px 14px 14px; }
  .pick-steps li > * { width: 18px; }
  .pick-where .near-locate { width: 100%; justify-content: center; }
  .pick-find { flex-basis: 100%; }
  .pick-actions { width: 100%; }
  .pick-actions > * { flex: 1; justify-content: center; }
  .pick-cmp, .pick-cmp thead, .pick-cmp tbody { display: block; }
  .pick-cmp tr { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 10px; border-bottom: 1px solid var(--line); }
  .pick-cmp th, .pick-cmp td { border: 0; padding: 4px 0 8px; }
  .pick-cmp thead td { display: none; }
  .pick-cmp th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 8px 0 0; }
  .pick-cmp thead a { font-size: 1rem; }
  .pick-cmp { font-size: .86rem; }
  .pick-cmp .num td { font-size: .82rem; }
}

/* /compare/: ticked wishlist restaurants as till receipts side by side. Each receipt's lines share rows with its
   neighbours (subgrid), so Dinner, Lunch, Wine and the total line up across all of them. */
.cmp-body { padding-block: 28px 40px; }
/* The link to it from the homepage and account wishlists. */
.wish-compare { margin: 10px 0 14px; }
.wish-compare .btn-line { display: inline-block; text-decoration: none; }
.cmp-pick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.cmp-pick-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0; }
.cmp-hint { color: var(--muted); margin: 0; font-size: .92rem; }
.cmp-filter { display: block; max-width: 360px; margin-top: 12px; }
.cmp-filter input { padding-block: 9px; }
.cmp-pick { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; max-width: 100%; }
.cmp-chip:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.cmp-chip.on { border-color: var(--green); background: var(--green-soft); }
.cmp-chip:has(input:disabled) { opacity: .55; cursor: default; }
.cmp-chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); flex: none; }
.cc-text { display: grid; min-width: 0; }
.cc-name { font-weight: 600; line-height: 1.25; }
.cc-sub { font-size: .8rem; color: var(--muted); }
.cc-sub .stars svg { width: 11px; height: 11px; }
.cmp-none { color: var(--muted); font-size: .9rem; }
.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 26px 0 16px; }
.cmp-receipts { --n: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 290px)); grid-template-rows: repeat(6, auto); justify-content: center; column-gap: 18px; padding-bottom: 12px; }
.cmp-rc { position: relative; grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 3px; align-content: start; min-width: 0; padding: 10px 14px 8px; background: var(--rc-paper); border-radius: 4px 4px 0 0;
  color: var(--rc-ink); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: .82rem; line-height: 1.3; box-shadow: 0 1px 2px rgba(6, 20, 14, .08); }
/* The torn edge along the bottom of each receipt. */
.cmp-rc::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px;
  background: linear-gradient(to bottom right, var(--rc-paper) 50%, transparent 50%) 0 0 / 12px 9px repeat-x, linear-gradient(to bottom left, var(--rc-paper) 50%, transparent 50%) 0 0 / 12px 9px repeat-x; }
.cr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "name acts" "meta meta" "where where" "notice notice";
  column-gap: 4px; row-gap: 2px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px dashed var(--rc-rule); align-content: start; }
.cr-head .rc-head { grid-area: top; padding-bottom: 6px; margin-bottom: 4px; }
.cr-name { grid-area: name; align-self: center; }
.cr-meta { grid-area: meta; }
.cr-where { grid-area: where; }
.cr-name { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; margin: 2px 0 0; overflow-wrap: anywhere; }
.cr-name a { color: inherit; text-decoration: none; }
.cr-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cr-meta, .cr-where { font-family: var(--font-body); font-size: .8rem; color: var(--rc-muted); }
.cr-meta .stars svg { width: 12px; height: 12px; }
.cr-head .notice { grid-area: notice; justify-self: start; margin-top: 4px; color: var(--rc-ink); background: color-mix(in srgb, #B3862B 26%, var(--rc-paper)); font-family: var(--font-body); }
.cr-acts { grid-area: acts; align-self: start; display: flex; margin-right: -8px; }
.cr-acts .wish, .cr-x { width: 30px; height: 30px; }
.cr-acts .wish { color: var(--rc-muted); }
.cr-acts .wish[aria-pressed="true"] { color: var(--heart); }
.cr-x { border: 0; background: none; border-radius: 8px; color: var(--rc-muted); cursor: pointer; font-size: 1.3rem; line-height: 1; }
.cr-x:hover { color: var(--rc-ink); background: var(--rc-band); }
.cmp-rc .rc-line { align-self: start; }
.cmp-rc .rc-total { align-self: end; }
/* The lowest figure on a line: in green, with a small tick. */
.cmp-rc .rc-line.best .rc-v { color: var(--rc-link); font-weight: 600; }
.cmp-rc .rc-line.best .rc-v::before { content: "✓ "; font-weight: 400; }
.cmp-rc .rc-foot { align-self: end; padding-top: 6px; }
.cmp-verdict { max-width: 70ch; margin: 22px auto 0; text-align: center; }
.cmp-verdict p { margin: 4px 0; }
.cmp-rate { text-align: center; margin: 10px auto 0; }
@media (max-width: 720px) {
  .cmp-body { padding-block: 20px 32px; }
  .cmp-pick { display: grid; }
  .cmp-rc .rc-note { font-family: var(--font-body); font-size: .7rem; overflow-wrap: break-word; }
  .cmp-receipts { column-gap: 10px; margin-inline: -6px; }
  .cmp-rc { padding: 8px 9px 6px; font-size: .76rem; }
  .cr-name { font-size: 1.02rem; }
  .cr-head .rc-head { display: none; }
  /* On phones the heart and × sit on their own line above the name. */
  .cr-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "acts" "name" "meta" "where" "notice"; }
  .cr-acts { justify-self: end; margin: -4px -6px -2px 0; }
  /* Narrow receipts put each figure under its label. */
  .cmp-rc .rc-line { grid-template-columns: 1fr; row-gap: 0; }
  .cmp-rc .rc-dots { display: none; }
  .cmp-rc .rc-v { text-align: left; white-space: normal; }
  .cmp-rc .rc-k { white-space: normal; color: var(--rc-muted); font-size: .7rem; }
  .cmp-rc .rc-total .rc-k { color: var(--rc-ink); }
}
/* A restaurant's own page (/restaurants/<id>/, build_restaurant_pages() in build.py): the answer and the till receipt in the
   green band, then the bill, the facts, how it compares, the map with its neighbours and the FAQ. Logical sides only. */
.rp-hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.rp-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-hero .stars, .rp-facts .stars, .rp-near-list .stars { display: inline-flex; gap: 2px; color: var(--gold); }
.rp-hero .stars svg, .rp-facts .stars svg, .rp-near-list .stars svg { width: 13px; height: 13px; }
.rp-hero .rp-where { margin-top: 10px; color: var(--band-ink); font-weight: 500; }
.rp-hero .rp-answer { margin-top: 18px; max-width: 58ch; padding: 12px 16px; border-inline-start: 3px solid var(--gold); background: rgba(255, 255, 255, .06); border-radius: 0 6px 6px 0; color: var(--band-ink); font-size: 1rem; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rp-wish, .rp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--band-ink) 30%, transparent); background: none; color: var(--band-ink); }
.rp-wish:hover, .rp-btn:hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.rp-wish { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.rp-wish:hover { background: color-mix(in srgb, var(--band-ink) 85%, transparent); }
.rp-wish svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.rp-wish[aria-pressed="true"] svg { color: var(--heart); fill: currentColor; }
.rp-side { display: grid; gap: 14px; justify-items: stretch; max-width: 420px; width: 100%; justify-self: end; }
.rp-receipt { display: block; font-size: .9rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.rp-receipt .rc-paper { padding: 16px 18px 10px; gap: 6px; }
.rp-receipt .rc-note { font-size: .74rem; }
.rp-receipt .rc-foot { font-size: .72rem; }
.rp-photo { margin: 0; display: grid; gap: 4px; }
.rp-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: color-mix(in srgb, var(--band-ink) 10%, transparent); opacity: 0; transition: opacity .3s; }
.rp-photo.loaded img { opacity: 1; }
.rp-photo figcaption { font-size: .72rem; color: var(--band-muted); }
.rp-photo figcaption a { color: inherit; }
.rp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 40px; margin: 0; }
.rp-facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rp-facts dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rp-facts dd { margin: 4px 0 0; }
.rp-facts small, .rp-table small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.rp-facts a, .rp-table a, .rp-near-list a, .rp-more a, .rp-note a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line); text-underline-offset: 3px; }
.rp-facts a:hover, .rp-table a:hover, .rp-near-list a:hover, .rp-more a:hover, .rp-note a:hover { color: var(--green); text-decoration-color: currentColor; }
.table-scroll { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rp-table th { text-align: start; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.rp-table tbody th { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); vertical-align: top; }
.rp-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rp-table .num, .rp-table th:not(:first-child) { text-align: end; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-table thead th:not(:first-child) { font-family: inherit; white-space: normal; }
.rp-table tr.on td { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.rp-table tr.on td:first-child { box-shadow: inset 3px 0 0 var(--gold); padding-inline-start: 10px; }
.rp-peers th:nth-child(2), .rp-peers td:nth-child(2) { text-align: start; font-family: inherit; }
.rp-note { color: var(--muted); font-size: .9rem; max-width: 80ch; margin-top: 16px; }
.rp-more { margin-top: 20px; }
.rp-near { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.rp-map { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--line); }
.rp-map[hidden] + .rp-near-list { grid-column: 1 / -1; }
.rp-near-list { list-style: none; margin: 0; padding: 0; }
.rp-near-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rp-near-list li > span:last-child { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
@media (max-width: 860px) {
  .rp-hero .wrap, .rp-near { grid-template-columns: minmax(0, 1fr); }
  .rp-side { justify-self: stretch; max-width: none; }
}
@media (max-width: 720px) {
  .rp-bill th:nth-child(4), .rp-bill td:nth-child(4), .rp-peers th:nth-child(2), .rp-peers td:nth-child(2) { display: none; }
  .rp-table { font-size: .88rem; }
  .rp-history-chart text { font-size: 19px; }
  .rp-history-chart .h-year, .rp-history-chart .h-tot { font-size: 17px; }
}
/* Destination pages: the link from a restaurant's row to its own page. */
.page-link { display: block; width: fit-content; margin-top: 3px; font-size: .8rem; font-weight: 600; color: var(--green); text-underline-offset: 3px; }
/* Restaurant pages, 9 Oct 2026: the currency buttons under the answer, the price history chart, the lists of cheaper
   ways in and similar restaurants, "Before you go" and the price report link. Logical sides only. */
.rp-cur { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; font-size: .85rem; color: var(--band-muted); }
.rp-cur[hidden] { display: none; }
.rp-cur-label { margin-inline-end: 4px; }
.rp-cur button { min-width: 38px; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--band-ink) 30%, transparent); background: none; color: var(--band-ink); font: inherit; font-weight: 600; cursor: pointer; }
.rp-cur button[aria-pressed="true"] { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.rp-history { max-width: 760px; }
.rp-history-chart { display: block; width: 100%; height: auto; }
.rp-history-chart .h-menu { fill: color-mix(in srgb, var(--gold) 70%, var(--surface)); }
.rp-history-chart .h-menu.now { fill: var(--gold); }
.rp-history-chart .h-wine { fill: color-mix(in srgb, var(--green) 35%, var(--surface)); }
.rp-history-chart text { font-family: var(--font-num); font-size: 15px; text-anchor: middle; fill: var(--ink); }
.rp-history-chart .h-year { fill: var(--muted); font-size: 14px; }
.rp-key { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 8px; font-size: .85rem; color: var(--muted); }
.rp-key span { display: inline-flex; align-items: center; gap: 6px; }
.rp-key i { flex: none; width: 12px; height: 12px; border-radius: 2px; }
.rp-key .k-menu { background: var(--gold); }
.rp-key .k-wine { background: color-mix(in srgb, var(--green) 35%, var(--surface)); }
.rp-fold { margin-top: 18px; max-width: 760px; }
.rp-fold summary { cursor: pointer; font-weight: 600; color: var(--green); }
.rp-fold .table-scroll { margin-top: 10px; }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 40px; }
.rp-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rp-list li > .num { margin-inline-start: 6px; font-weight: 500; }
.rp-list li > span:last-child { display: block; margin-top: 3px; color: var(--muted); font-size: .88rem; }
.rp-list a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line); text-underline-offset: 3px; }
.rp-list a:hover { color: var(--green); text-decoration-color: currentColor; }
.rp-list .stars { display: inline-flex; gap: 2px; color: var(--gold); }
.rp-list .stars svg { width: 12px; height: 12px; }
.rp-report { white-space: nowrap; font-weight: 600; }
.rp-history-chart .h-val { fill: #1F2A22; font-weight: 600; }
.rp-history-chart .h-tot { fill: var(--muted); font-size: 14px; }
/* Restaurant pages, 9 Oct 2026: questions as headings with their answers (.rp-qa, using .faq's grid), and "How to book"
   as numbered steps with a booking button. */
.rp-qa { margin-bottom: 24px; }
.rp-qa .rp-note { margin-top: 4px; }
.rp-hours-list { display: grid; gap: 2px; color: var(--ink); }
.rp-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.rp-steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rp-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-family: var(--font-num); font-weight: 600; }
.rp-steps strong { display: block; }
.rp-steps span { color: var(--muted); margin-top: 2px; }
.rp-steps a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.rp-steps .rp-cta { display: inline-block; margin: 4px 8px 4px 0; padding: 7px 14px; border-radius: 999px; background: var(--green); color: var(--surface); text-decoration: none; }
.rp-steps .rp-cta:hover { filter: brightness(1.1); }
/* Restaurant pages: the photo opens full size; "More photos" swaps in a strip of thumbnails (loaded only when tapped),
   and the viewer has arrows between them. */
.rp-photo-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); }
.rp-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-more-photos { padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--band-ink) 30%, transparent); background: none; color: var(--band-ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.rp-more-photos:hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.rp-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex-basis: 100%; width: 100%; margin-top: 4px; }
.rp-gallery button { padding: 0; border: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--band-ink) 10%, transparent); cursor: zoom-in; }
.rp-gallery img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.rp-gallery button.loaded img { opacity: 1; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: #12261C; font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.lightbox-nav.prev { left: 8px; }
.lightbox-nav.next { right: 8px; }
.lightbox-nav[hidden] { display: none; }
/* Restaurant pages: "Other restaurants you may like", each with its reason above the name. */
.rp-like .rp-why { display: block; margin-bottom: 3px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
/* Long email addresses and links in restaurant page text may break, so a phone never has to zoom out. */
.rp-steps span, .rp-qa p, .rp-facts dd, .rp-note, .rp-list li > span:last-child { overflow-wrap: anywhere; }