/* =====================================================================================
   restaurants.css: /restaurants and /restaurants/lookup only (front matter "css": "restaurants" links it in <head>;
   the lookup's server-rendered pages keep the shell's <head>, so they carry it too). Colour Blocks, 2026-10-21.
   Shared components (.blk, lips, .tiles, .fcard, .plate, .q-list, .rule-list, .faq, .btn) live in site.css;
   this file only places them and adds the few page pieces below. Role tokens only, so it works on any ground.
   ===================================================================================== */

/* ---------- Shared bits ---------- */
.r-split h2, .r-faq h2 { font-size: clamp(2.125rem, 4vw, 4.25rem); max-width: 18ch; }
/* A verdict, as the app says it: Loved it / It was fine / Not again. */
.r-verdict, .lk-verdict { display: inline-flex; align-items: center; width: max-content; margin-top: 12px; padding: 5px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: .9375rem; line-height: 1.2; background: var(--grey-1); color: var(--black); }
.r-verdict--loved, .lk-verdict--loved { background: var(--green); color: var(--white); }
.r-verdict--no, .lk-verdict--no { background: var(--black); color: var(--white); }
/* A white card that sits in the flow (an .fcard that isn't floating). */
.r-card { position: relative; background: var(--white); color: var(--black); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 36px) clamp(22px, 2.6vw, 40px); box-shadow: var(--shadow-float); }
.blk--white .r-card { box-shadow: 0 0 0 2px var(--grey-2); }
.r-card blockquote { font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.4; margin-top: 14px; font-weight: 500; }
.r-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 5vw, 110px); align-items: end; margin-bottom: clamp(32px, 4vw, 64px); }
.r-head .lede { max-width: 40ch; }
.r-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 110px); align-items: center; }
.r-split--flip > :first-child { order: 2; }
.r-split .lede { margin-top: 28px; }
.r-points { margin-top: 28px; max-width: var(--measure); font-weight: 500; }
.r-points li::before { background: var(--accent); }
.blk--orange .r-points li::before { background: var(--black); }
.blk a:not(.btn) { text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .r-head, .r-split { grid-template-columns: minmax(0, 1fr); }
  .r-split--flip > :first-child { order: 0; }
}

/* Research figures (third-party, footnoted to #sources): a .rule-list with a <cite> under each line. */
.r-figs li { grid-template-columns: minmax(0, 17rem) 1fr; }
.r-figs b { font-size: clamp(1.5rem, 2.2vw, 2.25rem); }
@media (max-width: 700px) { .r-figs li { grid-template-columns: 1fr; } }
.r-figs span { color: var(--ink); max-width: 60ch; }
.r-figs cite, .r-proof cite { display: block; margin-top: 6px; font-style: normal; font-size: .875rem; color: var(--ink2); }
.r-figs a, .r-proof a { color: inherit; }
.r-figs__note { margin-top: 24px; max-width: 60ch; color: var(--ink2); }
.r-proof { margin-top: 28px; max-width: var(--measure); font-weight: 500; }
#sources h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); margin-bottom: 12px; }
.r-sources { margin-top: 20px; padding-left: 1.4em; display: grid; gap: 8px; font-size: .9375rem; max-width: 80ch; }
.r-sources a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.r-dishes .tile__vis { width: 100%; max-width: 34rem; }
.r-dishes .tile__vis--green strong { font-size: clamp(3.5rem, 6vw, 7rem); }

/* ---------- /restaurants hero: words left, the burger plate with a Bite and the dish on your menu right ---------- */
.blk.r-hero { padding-top: 0; }
.r-hero__grid { padding-top: clamp(24px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.r-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 26px); }
.r-hero__copy > * { max-width: 100%; }
.r-hero .kicker { color: var(--ink); }
.r-hero h1 { max-width: 14ch; }
.r-hero .lede { color: var(--ink); max-width: 38ch; }
.r-hero__note { font-weight: 600; max-width: 40ch; }
.r-hero__stage { position: relative; padding: clamp(40px, 5vw, 80px) 0 clamp(70px, 7vw, 120px); }
.r-hero .plate { width: min(100%, 44rem); margin-left: auto; margin-right: calc(var(--g) * -1 - 8%); }
.r-hero__bite { left: -14%; top: 4%; max-width: min(380px, 70%); }
.r-hero__menu { right: 14%; bottom: -10%; max-width: min(340px, 64%); }
@media (max-width: 900px) {
  .r-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .r-hero__stage { padding: 40px 0 100px; }
  .r-hero .plate { width: min(100%, 600px); margin: 0 auto; }
  .r-hero__bite { left: -2%; top: -6%; max-width: min(300px, 62%); }
  .r-hero__menu { right: -2%; left: auto; bottom: -14%; max-width: min(280px, 58%); }
}

/* ---------- Careful with your menu: equal tiles ---------- */
.r-tiles { --cols: 4; }
.r-tiles .tile h3 { font-size: clamp(1.375rem, 1.8vw, 2rem); max-width: 16ch; }
.r-tiles .tile p { max-width: var(--measure); }
.r-tiles .tile a { color: var(--black); font-weight: 600; }
.r-tiles .tile__vis--ui { gap: 10px; padding: clamp(14px, 1.6vw, 26px); }
.r-tiles .tile__q { padding: 12px 18px; font-size: clamp(.9375rem, 1.1vw, 1.0625rem); }
.r-tiles .tile__r { padding: 12px 18px; }
.r-tiles .tile__r b { font-size: clamp(.9375rem, 1.15vw, 1.1875rem); }
.r-tiles .tile__r span span { font-size: .8125rem; }
.r-tiles .tile__r i { font-size: 1.125rem; }
.r-tiles .tile__vis--green strong { font-size: clamp(3rem, 4.4vw, 5rem); }
.r-tiles .tile__vis--green span { font-size: clamp(.9375rem, 1.15vw, 1.1875rem); }
@media (max-width: 1300px) { .r-tiles { --cols: 2; } }
@media (max-width: 900px) { .r-tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Replies: a Bite and the restaurant's answer under it ---------- */
.r-thread { display: grid; gap: 14px; justify-items: start; }
.r-thread .r-card { max-width: 34rem; width: 100%; }
.r-card--reply { margin-left: clamp(24px, 6vw, 96px); width: calc(100% - clamp(24px, 6vw, 96px)) !important; background: var(--orange); box-shadow: none; }
.r-card--reply .fcard__lb { color: var(--black); }
.r-card--reply blockquote { margin-top: 0; }

/* ---------- Fixes: the one-tap fix card, then the click budgets ---------- */
.r-fix { max-width: 30rem; width: 100%; justify-self: center; rotate: -1.5deg; }
.r-fix__rows { margin: 20px 0 0; border-top: 2px solid var(--black); }
.r-fix__rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--grey-2); font-size: 1.0625rem; }
.r-fix__rows dt { color: var(--grey-4); }
.r-fix__rows dd { margin: 0; font-weight: 700; }
.r-fix__btn { display: flex; justify-content: center; margin-top: 20px; padding: 16px 24px; border-radius: var(--r-pill); background: var(--black); color: var(--white); font-weight: 700; }
@media (max-width: 700px) { .r-fix { rotate: 0deg; } }
.r-clicks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 5vw, 110px); margin-top: clamp(56px, 7vw, 120px); align-items: start; }
.r-clicks > p { grid-column: 1; max-width: 40ch; }
.r-clicks .rule-list { grid-column: 2; grid-row: 1 / span 2; }
.r-clicks .rule-list b { font-size: clamp(1.25rem, 1.6vw, 1.625rem); }
.r-clicks .rule-list span { color: var(--ink); }
@media (max-width: 900px) { .r-clicks { grid-template-columns: minmax(0, 1fr); } .r-clicks .rule-list { grid-column: 1; grid-row: auto; } }

/* ---------- The picture menu ---------- */
.r-pmenu { background: var(--white); color: var(--black); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 44px); max-width: 36rem; width: 100%; justify-self: center; rotate: 1.2deg; }
.r-pmenu__head { text-align: center; border-bottom: 2px solid var(--black); padding-bottom: 16px; margin-bottom: 6px; }
.r-pmenu__head b { display: block; font: 700 1.625rem var(--font-display); letter-spacing: -.02em; }
.r-pmenu__head span { font-size: .875rem; color: var(--grey-4); }
.r-pmenu ol { list-style: none; padding: 0; }
.r-pmenu li { display: grid; grid-template-columns: clamp(56px, 7vw, 88px) minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--grey-2); }
.r-pmenu li:last-child { border: 0; }
.r-pmenu__ph { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--grey-1); }
.r-pmenu__ph img { width: 100%; height: 100%; object-fit: cover; }
.r-pmenu__ph--none { box-shadow: inset 0 0 0 2px var(--grey-2); background: none; }
.r-pmenu__txt b { display: block; font: 700 clamp(1rem, 1.3vw, 1.1875rem)/1.2 var(--font-display); letter-spacing: -.02em; }
.r-pmenu__txt em { display: block; font-style: normal; font-size: .875rem; color: var(--grey-4); margin-top: 2px; }
.r-pmenu li:last-child em { color: var(--orange-text); font-weight: 600; }
.r-pmenu__pr { font-weight: 700; grid-column: 4; }
@media (max-width: 700px) { .r-pmenu { rotate: 0deg; } .r-pmenu li { gap: 10px; } }

/* ---------- How we pick (fixed markup: the build checks it against the how-we-pick document) ---------- */
.r-pick { margin-top: clamp(40px, 5vw, 72px); }
.r-pick__steps { list-style: none; padding: 0; margin-top: 18px !important; counter-reset: pick; display: grid; gap: 20px clamp(24px, 3vw, 3rem); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 64rem; }
.r-pick .faq__a { max-width: none; }
.r-pick__steps > li { counter-increment: pick; padding-top: 14px; border-top: 2px solid var(--ink); }
.r-pick__steps > li::before { content: counter(pick); content: counter(pick) / ""; display: block; margin-bottom: 8px; font: 800 2rem/1 var(--font-display); color: var(--accent-text); }
.r-pick__steps h4 { font: 700 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; }
.r-pick__steps p { margin-top: 8px; color: var(--ink2); max-width: 30em; }
@media (max-width: 700px) { .r-pick__steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.r-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 110px); align-items: start; }
.r-faq h2 { max-width: 10ch; }
.r-faq__more { margin-top: 22px; max-width: 30ch; }
@media (max-width: 900px) { .r-faq { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Early access ---------- */
.r-open__note { margin-top: 22px; font-weight: 600; max-width: 40ch; }
.r-open .btn-row { margin-top: 32px; }
.r-status { align-self: start; }
.r-status .q-list { margin-top: 16px; font-weight: 500; }
.r-status .q-list li::before { background: var(--green); }
.r-status__off-title { margin-top: 32px; }
.r-status__off { list-style: none; padding: 0; margin-top: 12px; border-top: 2px solid var(--black); }
.r-status__off li { padding: 10px 0; border-bottom: 1px dashed var(--grey-2); color: var(--grey-4); }

/* =====================================================================================
   /restaurants/lookup (markup: pages/restaurants/lookup-shell.html and api/_lib/lookup-page.mjs). These place
   site.css's .lk-* pieces in the Colour Blocks: the orange top (search in a white panel, or the report's header),
   a white block for what diners posted, ink for What's missing, orange for the claim.
   ===================================================================================== */
.blk.lk-hero { padding-top: clamp(24px, 4vw, 56px); }
.lk-hero .kicker, .lk-hero .lede, .lk-meta, .lk-pill { color: var(--ink); }
.lk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 110px); align-items: start; }
.lk-intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 26px); }
.lk-intro > * { max-width: 100%; }
.lk-intro .lede { max-width: 38ch; }
.lk-title { max-width: 11ch; }
.lk-panel { border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 40px); box-shadow: var(--shadow-float); min-width: 0; }
.lk-panel .lk-search { margin: 0; }
.lk-panel .lk-status { margin-top: 18px; }
.lk-panel .lk-status:empty { margin: 0; }
.lk-panel .lk-results-wrap:not(:empty) { margin-top: 12px; }
.lk-panel .lk-search__input { border-radius: var(--r-pill); padding-inline: 22px; }
.lk-result { border-top-width: 1px; }
.lk-notice { border-radius: var(--r-md); background: var(--white); color: var(--black); box-shadow: none; }
.lk-notice::before { background: var(--black); color: var(--white); }
.lk-notice a { color: var(--black); }
@media (max-width: 1000px) { .lk-top { grid-template-columns: minmax(0, 1fr); } }

/* The search page's second block: what the report shows. */
.lk-what h2 { margin-bottom: clamp(32px, 4vw, 64px); }
.lk-what .tile__vis .chip { gap: 8px; }
.lk-what .tile__vis .chip .r-verdict { margin: 0; }
.lk-what .lk-what__note { margin-top: clamp(28px, 3vw, 40px); max-width: 60ch; color: var(--ink2); }
.lk-what .lk-what__note a { color: var(--ink); font-weight: 600; }

/* The report's header (orange) */
.lk-crumbs { margin: 0 0 clamp(12px, 2vw, 20px); }
.lk-crumbs a, .lk-applink a { color: var(--ink); }
.lk-head { gap: 14px; max-width: none; }
.lk-head .pill { display: inline-flex; padding: 6px 16px; border-radius: var(--r-pill); background: var(--black); color: var(--white); font-size: .9375rem; }
.lk-name { font-size: clamp(2.5rem, 6vw, 6rem); max-width: 18ch; overflow-wrap: anywhere; }
.lk-applink a { font-size: 1rem; font-weight: 700; }

/* The report's body (white): posts, numbers, dishes, flavours */
.lk-body > .lk-sec + .lk-sec { margin-top: clamp(56px, 6vw, 104px); }
.lk-shead { max-width: 52rem; }
.lk-shead .h-md, .lk-first .h-md { font-size: clamp(1.75rem, 3vw, 3rem); }
.lk-h { font-size: 1.0625rem; color: var(--ink); }
.lk-verdict { margin: 2px 0 0; }
.lk-verdict--fine { background: var(--grey-2); }
.lk-posts { max-width: none; gap: clamp(14px, 1.4vw, 24px); }
.lk-post { background: var(--grey-1); border: 0; border-radius: var(--r-lg); padding: 12px; }
.lk-post__photo { margin: 0; border-radius: var(--r-md); }
.lk-post__body, .lk-post--text .lk-post__body { padding: 10px 12px 12px 18px; }
.lk-post--text .lk-post__body { padding-left: 12px; }
.lk-tiles { gap: 12px clamp(16px, 2vw, 32px); }
.lk-tile { border-top: 2px solid var(--ink); }
.lk-line { color: var(--ink2); font-size: 1rem; }
.lk-dishes { gap: clamp(14px, 1.4vw, 24px); }
.lk-dish { background: var(--grey-1); border-radius: var(--r-lg); padding: 12px; }
.lk-dish__photo { border-radius: var(--r-md); }
.lk-dish__photo:has(> .lk-dish__none) { border: 0; border-radius: var(--r-md); background: var(--white); height: 64px; }
.lk-dish__body { padding: 14px 10px 10px; }
.lk-chip { border-radius: var(--r-pill); background: var(--white); box-shadow: none; padding: 4px 12px; }
.lk-bar { height: 10px; border-radius: var(--r-pill); background: var(--grey-1); }
@media (max-width: 599.98px) {
  .lk-post__photo { min-height: 104px; }
  .lk-post__body { padding: 4px 6px 6px 14px; }
  .lk-dish__body { padding: 2px 4px 4px 14px; }
  .lk-dish__photo:has(> .lk-dish__none) { height: auto; }
}

/* The zero state */
.lk-first { max-width: 52rem; }
.lk-first__samples { border-top: 2px solid var(--line); }
.lk-near { border-radius: var(--r-lg); background: var(--grey-1); }
.lk-share { border-radius: var(--r-lg); box-shadow: inset 0 0 0 2px var(--grey-2); }
.lk-example { border-radius: var(--r-lg); border: 2px dashed var(--grey-3); }
.lk-example .lk-post { background: var(--white); }
.lk-example .lk-dish { background: var(--white); }
.lk-example__body img { opacity: .7; filter: none; }
.lk-portal .q-list { margin-top: 28px; max-width: var(--measure); font-weight: 500; }
.lk-portal .q-list li::before { background: var(--orange); }

/* What's missing (ink) */
.lk-missing { max-width: none; border-top: 2px solid var(--ink); }
.lk-missing__item { border-bottom: 1px solid var(--line); }
.lk-missing__item::before { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--orange); }

/* The claim (orange) */
.lk-cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 60rem; }
.lk-cta .kicker, .lk-cta .lede { color: var(--ink); }
.lk-cta .h-lg { max-width: 18ch; font-size: clamp(2.125rem, 4.6vw, 4.75rem); }
.lk-cta__note { font-weight: 600; max-width: 52ch; }
.lk-cta__note a { color: var(--ink); }
.blk.lk-hero--spot { padding-bottom: calc(var(--lip) + var(--pad)); }
.blk h2.lk-h { font-size: clamp(1.75rem, 3vw, 3rem); margin-bottom: clamp(16px, 2vw, 24px); max-width: none; }
.lk-dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .lk-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .lk-dishes { grid-template-columns: minmax(0, 1fr); } }
.lk-cta .btn-row { align-self: stretch; }