/* ───────────────────────────────────────────────────────────────────────────
   YardLink Eats — web client

   The palette, spacing scale, radii and motion durations below are the same
   values as DesignTokens.swift and DesignTokens.kt. This is the third client
   of one product, not a separate brand, so nothing here invents a new colour.

   The app is dark-only by design, matching iOS and Android. That is a
   deliberate single-theme commitment, not a missing light mode.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand / action */
  --green:        #00A84F;
  --green-deep:   #009B3A;
  --gold:         #FFD100;
  --errol-green:  #18B15E;
  --coral:        #FF6B6B;

  /* Surfaces */
  --bg:           #000000;
  --surface:      #15191B;
  --surface-soft: #22282B;
  --text:         #FFFFFF;
  --text-dim:     rgba(255,255,255,.60);
  --text-faint:   rgba(255,255,255,.38);
  --hairline:     rgba(255,255,255,.08);

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;

  /* Radius */
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px;

  /* Motion */
  --fast: .18s; --base: .28s; --slow: .40s;

  --header-h: 116px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  /* The grid keeps rendering behind the detail sheet; stop the page from
     scrolling underneath it on iOS. */
  overscroll-behavior-y: none;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

a { color: var(--green); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(0,0,0,.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.header__bar {
  max-width: 1240px; margin: 0 auto;
  padding: var(--s3) var(--s4) var(--s2);
  display: flex; align-items: center; gap: var(--s3);
}

.brand { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-soft); object-fit: cover;
}
/* Long-form pages and the directory share this mark. */
.brand__name {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
}
.brand__name span { color: var(--green); }

.search {
  flex: 1 1 auto; position: relative; min-width: 0;
}
.search input {
  width: 100%; padding: 11px var(--s4) 11px 40px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 15px;
  transition: border-color var(--fast) ease, background var(--fast) ease;
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus {
  outline: none; border-color: var(--green); background: var(--surface-soft);
}
.search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none; width: 17px; height: 17px;
}
.search__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--text-dim); display: none; align-items: center; justify-content: center;
}
.search.has-value .search__clear { display: flex; }
.search__clear:hover { background: var(--surface-soft); color: var(--text); }

/* On a phone the wordmark and the search field cannot both have the width they
   need, and the search is what people came for. Below 560px the bar wraps so
   the field gets the full line. */
@media (max-width: 560px) {
  .header__bar { flex-wrap: wrap; row-gap: var(--s3); }
  .brand { flex: 1 1 100%; }
  .search { flex: 1 1 100%; }
}

/* ── Filter chips ────────────────────────────────────────────────────────── */

.filters {
  max-width: 1240px; margin: 0 auto;
  padding: 0 var(--s4) var(--s3);
  display: flex; gap: var(--s2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--fast) ease, color var(--fast) ease,
              border-color var(--fast) ease;
}
.chip:hover { color: var(--text); border-color: rgba(255,255,255,.18); }
.chip[aria-pressed="true"] {
  background: var(--green); border-color: var(--green);
  color: #000; font-weight: 650;
}
.chip--group { position: relative; }
.chip__caret { opacity: .5; margin-left: 5px; font-size: 11px; }

/* ── Results ─────────────────────────────────────────────────────────────── */

.main { max-width: 1240px; margin: 0 auto; padding: var(--s5) var(--s4) 96px; }

.count {
  color: var(--text-dim); font-size: 14px;
  margin: 0 0 var(--s4); display: flex; align-items: baseline; gap: var(--s2);
}
.count strong { color: var(--text); font-size: 15px; font-weight: 650; }

.grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden;
  text-align: left; width: 100%;
  display: flex; flex-direction: column;
  transition: transform var(--fast) ease, border-color var(--fast) ease;
  /* Card contents never reflow the page — cheaper scrolling with 600+ nodes. */
  contain: content;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.20); }
}
.card:active { transform: scale(.99); }

/* flex-basis is pinned so the photo keeps its 4:3 ratio. Without this the
   card stretches to match the tallest in its row and drags the image with it,
   giving neighbouring cards visibly different photo heights. */
.card__media {
  position: relative; aspect-ratio: 4 / 3;
  flex: 0 0 auto; height: auto;
  background: var(--surface-soft);
  overflow: hidden;
}
.card__img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--base) ease;
}
.card__img.is-loaded { opacity: 1; }

/* Shown when a restaurant has no owned photo. Never a Google-hosted image. */
.card__fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1b2320, #12100a);
  color: rgba(255,255,255,.22); font-size: 30px; font-weight: 700;
  letter-spacing: .04em;
}

.card__flag {
  position: absolute; top: var(--s2); left: var(--s2);
  display: flex; gap: 5px; flex-wrap: wrap; max-width: calc(100% - 16px);
}
.pill {
  padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: .01em;
  background: rgba(0,0,0,.62); color: var(--text);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pill--badge { background: var(--gold); color: #000; }
.pill--open  { background: var(--green); color: #000; }
.pill--shut  { background: rgba(0,0,0,.72); color: var(--text-dim); }

/* Takes the leftover height so equal-height cards absorb the difference in
   the text block rather than in the photo. */
.card__body {
  flex: 1 1 auto;
  padding: var(--s3) var(--s4) var(--s4);
  display: grid; gap: 5px; align-content: start;
}
.card__name {
  font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  line-height: 1.25; text-wrap: balance;
}
.card__meta {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--text-dim); font-size: 13.5px;
}
.card__rating {
  color: var(--gold); font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.card__must {
  color: var(--text-faint); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sentinel { height: 1px; }

.empty {
  text-align: center; padding: 72px var(--s4); color: var(--text-dim);
}
.empty img { width: 96px; margin: 0 auto var(--s4); opacity: .85; }
.empty h2 { font-size: 18px; margin: 0 0 var(--s2); color: var(--text); }

/* ── Detail sheet ────────────────────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade var(--fast) ease;
}
@keyframes fade { from { opacity: 0 } }

.sheet {
  background: var(--surface);
  width: 100%; max-width: 620px; max-height: 92vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: rise var(--base) cubic-bezier(.2,.8,.25,1);
  position: relative;
}
@keyframes rise { from { transform: translateY(3%); opacity: .6 } }

@media (min-width: 700px) {
  .scrim { align-items: center; padding: var(--s6); }
  .sheet { border-radius: var(--r-xl); max-height: 86vh; }
}

.sheet__close {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Horizontal photo strip — scrolls inside itself, never the page. */
.gallery {
  display: flex; gap: 2px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  background: var(--surface-soft);
}
.gallery::-webkit-scrollbar { display: none; }
.gallery img {
  flex: 0 0 100%; scroll-snap-align: start;
  aspect-ratio: 16 / 10; object-fit: cover;
}

.sheet__body { padding: var(--s5); display: grid; gap: var(--s5); }

.sheet__title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sheet__sub { color: var(--text-dim); font-size: 14.5px; margin-top: var(--s1); }

/* Classes rather than inline style attributes: the Content-Security-Policy in
   netlify.toml sets style-src 'self', which blocks inline styles outright.
   Keeping the policy strict is what guarantees this page can never reach a
   third-party — including a billable Google endpoint. */
.is-open { color: var(--green); font-weight: 650; }
.is-shut { color: var(--text-faint); }
.sheet__text { color: var(--text-dim); font-size: 14.5px; }

.badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
.badge {
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255,209,0,.12); color: var(--gold);
  border: 1px solid rgba(255,209,0,.28);
}

.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s2); }
.action {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--s3) var(--s2); border-radius: var(--r-md);
  background: var(--surface-soft); color: var(--text);
  font-size: 12.5px; font-weight: 550;
  transition: background var(--fast) ease;
}
.action:hover { background: #2b3236; }
.action svg { width: 20px; height: 20px; color: var(--green); }

.section h3 {
  margin: 0 0 var(--s3); font-size: 12px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase; color: var(--text-faint);
}

.hours { display: grid; gap: 7px; font-size: 14px; }
.hours__row { display: flex; justify-content: space-between; gap: var(--s4); }
.hours__row.is-today { color: var(--text); font-weight: 650; }
.hours__row:not(.is-today) { color: var(--text-dim); }
.hours__time { font-variant-numeric: tabular-nums; }

.note {
  color: var(--text-dim); font-size: 14px; line-height: 1.55;
  background: var(--surface-soft); padding: var(--s4);
  border-radius: var(--r-md); border-left: 3px solid var(--green);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--hairline);
  padding: var(--s8) var(--s4);
  text-align: center; color: var(--text-faint); font-size: 13px;
}
.footer strong { color: var(--text-dim); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}