/* picker.css: restaurant picker v3 (black), Paper "Picker v3 black" + "Picker motion spec" */

/* black palette (same values as the flow B tokens in onboard.css / home2.css) */
.pk {
  --pk-ground: #0B0B0B; --pk-raised: #1C1B1A; --pk-line: #2A2928; --pk-text: #FFFFFF;
  --pk-muted: #A39E97; --pk-faint: #5E5A55; --pk-red: var(--red); --pk-green: var(--green);
  --pk-off-bg: #2A2928; --pk-off-text: #A39E97;
  --pk-land: #141413; --pk-me: #2F6FEB;
  --pk-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
body[data-screen="restaurant"] #app,
body[data-screen="restaurant"] .screen { background: #0B0B0B; }
body[data-screen="restaurant"] .screen { padding-bottom: 0; }

.pk {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--pk-ground); color: var(--pk-text);
  padding-bottom: calc(var(--safe-bottom) + var(--foot-gap) + 24px);
}

/* ---------- top bar: back, search (morphs into the field), map / list ---------- */
.pk-top { position: relative; z-index: 3; padding: calc(var(--safe-top) + 2px) 20px 0; }
.pk-bar { position: relative; height: 44px; --pk-cw: 60px; }
.pk-ib {
  position: absolute; top: 2px; width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pk-raised); color: var(--pk-text);
  transition: opacity 120ms var(--ease), transform var(--dur-fast) var(--ease);
}
.pk-ib:active { transform: scale(0.94); }
.pk-back { left: 0; }
.pk-view { right: 0; }
.pk-sbox {
  position: absolute; top: 2px; right: 48px; width: 40px; height: 40px; border-radius: 20px;
  background: var(--pk-raised); overflow: hidden;
  transition: width 240ms var(--ease), right 240ms var(--ease), top 240ms var(--ease), height 240ms var(--ease), border-radius 240ms var(--ease);
}
.pk-sbtn {
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 11px; color: var(--pk-text);
  transition: padding-left 240ms var(--ease);
}
.pk-input {
  position: absolute; left: 44px; right: 40px; top: 0; bottom: 0; width: auto; min-width: 0;
  border: 0; background: transparent; outline: none; color: var(--pk-text);
  font-family: var(--f-ui); font-size: 16px; line-height: 22px;
  opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease);
  -webkit-appearance: none; appearance: none;
}
.pk-input::placeholder { color: var(--pk-muted); }
.pk-input::-webkit-search-cancel-button { display: none; }
.pk-clear {
  position: absolute; right: 14px; top: 12px; width: 20px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pk-muted); color: var(--pk-ground);
  opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease);
}
.pk-clear::before { content: ""; position: absolute; inset: -12px; }
.pk-cancel {
  position: absolute; right: 0; top: 0; height: 44px; padding-left: 2px;
  font-family: var(--f-ui); font-size: 15px; line-height: 22px; color: var(--pk-text);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity 160ms var(--ease), transform 240ms var(--ease);
}
.pk.is-searching .pk-sbox { top: 0; height: 44px; border-radius: 22px; right: calc(var(--pk-cw) + 12px); width: calc(100% - var(--pk-cw) - 12px); }
.pk.is-searching .pk-sbtn { padding-left: 16px; pointer-events: none; }
.pk.is-searching .pk-input { opacity: 1; pointer-events: auto; transition-delay: 80ms; }
.pk.is-searching.has-q .pk-clear { opacity: 1; pointer-events: auto; }
.pk.is-searching .pk-back, .pk.is-searching .pk-view { opacity: 0; pointer-events: none; }
.pk.is-searching .pk-cancel { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- titles ---------- */
.pk-titles { display: flex; flex-direction: column; padding: 26px 24px 0; }
.pk-title {
  font-family: var(--f-stripes); font-weight: 900; text-transform: uppercase;
  font-size: 44px; line-height: 44px; color: var(--pk-text);
}
.pk-sub { padding-top: 6px; font-family: var(--f-ui); font-size: 15px; line-height: 22px; color: var(--pk-muted); }
/* ahead.js (take away): pickup context line + when switch, dark */
.pk .ah-rest-ctx { padding-top: 4px; font-size: 15px; line-height: 22px; color: var(--pk-muted); }
.pk .ah-rest-ctx svg { color: var(--pk-muted); }
.pk .ah-rest-when { padding: 18px 24px 0; }
.pk .ah-seg { background: var(--pk-raised); }
.pk .ah-seg-b { color: var(--pk-text); }
.pk .ah-seg-b.is-on { background: var(--pk-text); color: var(--pk-ground); }

/* ---------- the card ---------- */
.pk-cardwrap { padding: 24px 24px 0; }
.pk .pk-card {
  display: flex; flex-direction: column; gap: 18px; padding: 22px 20px 20px;
  border: 0; border-radius: var(--r-card); background: var(--pk-raised); overflow: hidden;
}
.pk-card-text { display: flex; flex-direction: column; gap: 6px; }
.pk-name { font-family: var(--f-sans); font-size: 30px; line-height: 34px; color: var(--pk-text); }
.pk-meta { font-family: var(--f-ui); font-size: 15px; line-height: 22px; color: var(--pk-muted); }
.pk-status { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: 14px; line-height: 20px; color: var(--pk-text); }
.pk-dot { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; background: var(--pk-green); transition: background-color 160ms var(--ease); }
.pk-card.is-closed .pk-dot { background: var(--pk-faint); }
.pk-go {
  position: relative; display: grid; place-items: center; width: 100%; height: var(--cta-h); flex-shrink: 0;
  border-radius: 28px; background: var(--pk-red); color: var(--pk-text);
  font-family: var(--f-sans); font-size: 18px; line-height: 22px;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 100ms var(--ease);
}
.pk-go:active, .pk-go.is-press { transform: scale(0.97); }
.pk-go-l { grid-area: 1 / 1; transition: opacity 160ms var(--ease); }
.pk-go-l.is-off { opacity: 0; }
.pk-go.is-off { background: var(--pk-off-bg); color: var(--pk-off-text); cursor: default; }
.pk-go.is-off:active { transform: none; }
.pk-go.is-off .pk-go-l.is-on { opacity: 0; }
.pk-go.is-off .pk-go-l.is-off { opacity: 1; }

/* ---------- or choose another ---------- */
.pk-listwrap { padding: 32px 24px 0; }
.pk-label { padding-bottom: 4px; font-family: var(--f-ui); font-size: 14px; line-height: 20px; color: var(--pk-muted); }
.pk-rw { overflow: hidden; }
.pk-rw[hidden] { display: none; }
.pk .rest-row.pk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 0; border-bottom: 1px solid var(--pk-line); text-align: left;
  border-radius: 0; opacity: 1;
  transition: transform 100ms var(--ease), background-color 100ms var(--ease);
}
.pk-rw.is-last .pk-row, .pk-results .pk-rw:last-child .pk-row { border-bottom-color: transparent; }
.pk .rest-row.pk-row:active { transform: scale(0.98); background: var(--pk-raised); }
.pk-row-name { min-width: 0; font-family: var(--f-sans); font-size: 18px; line-height: 22px; color: var(--pk-text); }
.pk-row-r { flex-shrink: 0; font-family: var(--f-ui); font-size: 14px; line-height: 20px; color: var(--pk-muted); white-space: nowrap; }
.pk-row-r.is-red { color: var(--pk-red); }
.pk .pk-row.is-closed .pk-row-name, .pk .pk-row.is-closed .pk-row-r { color: var(--pk-faint); }

/* ---------- search results + empty ---------- */
.pk-results { display: none; padding: 24px 24px 0; }
.pk.is-search .pk-results { display: block; }
.pk.is-search .pk-titles, .pk.is-search .ah-rest-when, .pk.is-search .pk-cardwrap, .pk.is-search .pk-listwrap { display: none; }
.pk-empty { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.pk-empty-t { font-family: var(--f-sans); font-size: 20px; line-height: 26px; color: var(--pk-text); }
.pk-empty-s { font-family: var(--f-ui); font-size: 14px; line-height: 20px; color: var(--pk-muted); }
.pk-showall {
  align-self: flex-start; margin-top: 14px; font-family: var(--f-ui); font-size: 15px; line-height: 22px; font-weight: 500;
  color: var(--pk-red); position: relative;
}
.pk-showall::before { content: ""; position: absolute; inset: -12px -8px; }

/* ---------- map view ---------- */
.pk-mapview { display: none; }
.pk.is-map { padding-bottom: 0; }
.pk.is-map .pk-listview { display: none; }
.pk.is-map .pk-mapview { display: block; position: relative; height: 100vh; height: 100dvh; min-height: 640px; }
.pk.is-map .pk-top { position: absolute; left: 0; right: 0; top: 0; }
.pk.is-map .pk-ib, .pk.is-map .pk-sbox { box-shadow: 0 1px 4px rgb(0 0 0 / 0.4); }
.pk-map { position: absolute; inset: 0; overflow: hidden; background: var(--pk-land); }
.pk-mapbox { position: absolute; top: 0; left: 50%; width: 390px; height: 844px; margin-left: -195px; }
.pk-map-bg { position: absolute; left: 0; top: 0; }
.pk-me {
  position: absolute; width: 16px; height: 16px; border-radius: 8px;
  background: var(--pk-me); border: 3px solid var(--pk-text); box-shadow: 0 0 0 8px rgb(47 111 235 / 0.15);
}
.pk-pin { position: absolute; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.pk-pin-dot {
  width: 22px; height: 22px; border-radius: 11px; flex-shrink: 0;
  background: var(--pk-text); border: 3.5px solid var(--pk-ground);
  transform: scale(0.82);
  transition: transform 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.pk-pin.is-closed .pk-pin-dot { background: var(--pk-faint); }
.pk-pin.is-on { z-index: 2; }
.pk-pin.is-on .pk-pin-dot {
  background: var(--pk-red); border-color: var(--pk-text); box-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
  transform: scale(1.15); transition: transform 300ms var(--pk-pop), background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.pk-pin.is-on.is-closed .pk-pin-dot { background: var(--pk-faint); }
.pk-pin-label {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--pk-text); color: var(--pk-ground);
  font-family: var(--f-sans); font-size: 14px; line-height: 18px;
  opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease);
}
.pk-pin.is-on .pk-pin-label { opacity: 1; }

.pk-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 10px 24px calc(var(--safe-bottom) + var(--foot-gap));
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--pk-ground);
  box-shadow: 0 -4px 24px rgb(0 0 0 / 0.4);
}
.pk-grab { display: flex; justify-content: center; padding-bottom: 14px; }
.pk-grab i { width: 36px; height: 4px; border-radius: 2px; background: var(--pk-line); }
.pk-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
.pk-sheet-title {
  font-family: var(--f-stripes); font-weight: 900; text-transform: uppercase;
  font-size: 30px; line-height: 32px; color: var(--pk-text);
}
.pk-sheet-n { font-family: var(--f-ui); font-size: 14px; line-height: 20px; color: var(--pk-muted); white-space: nowrap; }
.pk-sheet-card { padding-top: 12px; }

/* ---------- first load: card fades in + rises 12 px (280 ms), rows follow, 30 ms stagger, max 5 ---------- */
.pk.is-first .pk-cardwrap .pk-card, .pk.is-first .pk-sheet-card .pk-card { animation: pk-rise 280ms var(--ease) both; }
.pk.is-first .pk-list .pk-rw { animation: pk-fade 280ms var(--ease) both; animation-delay: calc(80ms + var(--i, 5) * 30ms); }
@keyframes pk-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pk-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* reduced motion: no scale, rise or height morph, opacity crossfade only (150 ms) */
@media (prefers-reduced-motion: reduce) {
  .pk-sbox, .pk-sbtn, .pk-cancel { transition: opacity 150ms linear; }
  .pk-cancel { transform: none; }
  .pk .rest-row.pk-row:active, .pk-go:active, .pk-go.is-press, .pk-ib:active { transform: none; }
  .pk-pin-dot, .pk-pin.is-on .pk-pin-dot { transition: background-color 150ms linear, border-color 150ms linear; }
  .pk-pin.is-on .pk-pin-dot { transform: scale(1.15); }
  .pk.is-first .pk-cardwrap .pk-card, .pk.is-first .pk-sheet-card .pk-card, .pk.is-first .pk-list .pk-rw { animation: pk-op 150ms linear both; }
  @keyframes pk-op { from { opacity: 0; } to { opacity: 1; } }
}