/* The restaurant lookup bar (site/lookup-bar.js; owner, 2026-10-16: Airbnb's search bar): /find/ and the site search dialog's "Restaurant
   lookup" tab. Paper, ink, greys, hairlines; maroon (--fixlog) only for Search. One easing curve (--ease); under Reduce Motion (the
   system's or the site's own switch) nothing glides. The switch above it ([CleanCleaver] | [Restaurant lookup]) is in system.css.
   One bar, two sizes (state review 2026-10-16): the same segments, order and labels in every state; find.css only shrinks it. Spacing on
   the design scale (4 8 12 16 20 24 32 40 56; radii 10 chips, 16 cards, 24 sheets, 999 pills). One breakpoint, 900 px (DESIGN.md). */
.find-form{--lk-g:#5F6B74;--lk-l:#E3E1DA;--lk-t:200ms}
.lk-svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The bar. Without the script: the same segments, the native select in Where, the Search word always showing. Its two sizes are one
   glide of the whole box (find.js, a transform), never a CSS transition of padding: measured in WebKit 2026-10-16, a padding transition
   on this bar scrolled the window 205 px when the bar moved into the map panel. The last track is the
   Search button's grown width, reserved (owner: "a wonderful UX"), so no field resizes and no label moves when it grows. */
.lk-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.6fr) auto auto calc(10.5rem + 6px);align-items:center;max-width:56rem;margin:0 auto;padding:8px;border:1px solid #DDDBD3;border-radius:999px;background:var(--paper-hi);box-shadow:0 1px 2px rgba(23,35,46,.08),0 8px 24px -12px rgba(23,35,46,.25);transition:background-color var(--lk-t) var(--ease),box-shadow var(--lk-t) var(--ease);font-family:var(--sans)}
.lk-bar.is-on{background:#EFEEEA;box-shadow:0 1px 2px rgba(23,35,46,.06)}
.lk-pill{position:absolute;top:0;left:0;height:0;width:0;border-radius:999px;background:var(--paper-hi);box-shadow:0 6px 20px -6px rgba(23,35,46,.35),0 1px 3px rgba(23,35,46,.12);opacity:0;pointer-events:none;transition:transform var(--lk-t) var(--ease),width var(--lk-t) var(--ease),height var(--lk-t) var(--ease),opacity 150ms var(--ease)}
.lk-pill.on{opacity:1}
.lk-pill.lk-now,.lk-pop.lk-now{transition:none!important}
.lk-seg{position:relative;z-index:1;display:grid;align-content:center;gap:1px;min-width:0;min-height:56px;padding:8px 24px;border-radius:999px;cursor:text}
.lk-seg[hidden]{display:none}
.lk-seg:not(.is-on):hover{background:rgba(23,35,46,.05)}
.lk-bar.is-on .lk-seg:not(.is-on):hover{background:rgba(23,35,46,.06)}
.lk-lab{font:700 12.5px/1.2 var(--sans);letter-spacing:.01em;color:var(--ink)}
.lk-in,.lk-seg select{width:100%;min-width:0;min-height:26px;margin:0;padding:0;border:0;background:transparent;font:400 15.5px/1.35 var(--sans);color:var(--ink);text-overflow:ellipsis;outline:none;-webkit-appearance:none;appearance:none}
.lk-seg select{min-height:44px;height:44px;cursor:pointer}
.lk-in::placeholder{color:var(--lk-g);opacity:1}
.lk-in::-webkit-search-cancel-button{display:none}
.lk-kind-b{display:block;text-align:left;cursor:pointer;color:var(--lk-g)}
.lk-kind-b:focus-visible,.lk-in:focus-visible{outline:none}
.lk-seg.is-on{box-shadow:inset 0 0 0 2px var(--ink)}
.lk-js .lk-seg.is-on{box-shadow:none}
.lk-js .lk-seg:focus-within .lk-lab{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.lk-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden;clip-path:inset(50%);opacity:0}
.lk-div{width:1px;height:32px;background:#DDDBD3;transition:opacity 150ms}
.lk-div[hidden]{display:none}
/* Only the dividers touching the active segment hide (review fix 9). */
.lk-seg.is-on+.lk-div,.lk-div:has(+.lk-seg.is-on){opacity:0}
.lk-x{position:absolute;right:8px;top:50%;display:none;place-items:center;width:32px;height:32px;margin-top:-16px;border:0;border-radius:50%;background:#EBEAE5;color:var(--ink);cursor:pointer}
.lk-x .lk-svg{width:14px;height:14px;stroke-width:2.6}
.lk-x::before{content:"";position:absolute;inset:-8px}
/* The clear button only on the active segment and only with words in it (review fix 4). */
.lk-seg.is-on.has-text .lk-x{display:grid}
.lk-near-ic{position:absolute;right:8px;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.lk-near-ic[hidden]{display:none}
.lk-near-ic:hover{background:rgba(23,35,46,.07)}
.lk-near-ic:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.lk-near-ic[aria-busy=true]{opacity:.5}
.lk-go{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:48px;margin-left:8px;padding:0 16px;border:0;border-radius:999px;background:var(--fixlog);color:#fff;font:700 16px/1 var(--sans);cursor:pointer;overflow:hidden;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.18),0 4px 12px -6px rgba(77,18,27,.6);transition:max-width var(--lk-t) var(--ease),padding var(--lk-t) var(--ease),background-color .15s}
.lk-go:hover{background:var(--fixlog-deep)}.lk-go:active{background:var(--fixlog-press)}
.lk-go:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--fixlog)}
.lk-js .lk-go{max-width:48px;padding:0 12px}
.lk-js .lk-go{gap:0}
.lk-js .lk-go-t{max-width:0;overflow:hidden;opacity:0;transition:opacity 150ms var(--ease),max-width var(--lk-t) var(--ease)}
.lk-js .lk-bar.is-on .lk-go{max-width:10.5rem;padding:0 20px 0 16px}
.lk-js .lk-bar.is-on .lk-go{gap:8px}
.lk-js .lk-bar.is-on .lk-go-t{max-width:7.5rem;opacity:1}

/* The dropdown: one rounded panel that slides to sit under the active segment; its list cross-fades. */
.lk-sheet{position:relative;container-type:inline-size}
.lk-pop{position:absolute;z-index:35;top:calc(100% + 8px);left:max(0px,calc(50% - 28rem));width:420px;max-width:100%;padding:12px 8px;border-radius:24px;background:var(--paper-hi);box-shadow:0 2px 6px rgba(23,35,46,.08),0 18px 44px -12px rgba(23,35,46,.3);transition:transform var(--lk-t) var(--ease),width var(--lk-t) var(--ease)}
.lk-pop[hidden]{display:none}
.lk-list{position:absolute;inset:12px 8px auto;max-height:min(60vh,26rem);margin:0;padding:0;overflow:auto;list-style:none;opacity:0;visibility:hidden;transition:opacity 180ms var(--ease),visibility 0s 180ms}
.lk-list.on{position:relative;inset:auto;opacity:1;visibility:visible;transition:opacity 180ms var(--ease)}
.lk-opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:16px;cursor:pointer;font:400 16px/1.3 var(--sans);color:var(--ink)}
.lk-opt:hover,.lk-opt[aria-selected=true]{background:#F2F1EC}
.lk-opt[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.lk-tile{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:10px;background:#EFEEEA;color:var(--ink)}
.lk-tile .lk-svg{width:24px;height:24px;stroke-width:1.6}
.lk-opt-t{display:grid;gap:2px;min-width:0;flex:1}
.lk-opt-m{overflow-wrap:anywhere}
.lk-opt-m b{font-weight:700}
.lk-opt-s{font:400 14px/1.35 var(--sans);color:var(--lk-g)}
.lk-opt-e{flex:none;margin-left:auto;font:500 13px/1.3 var(--sans);color:var(--lk-g);white-space:nowrap}
.lk-opt-near .lk-tile{background:var(--ink);color:#fff}
.lk-opt-all .lk-tile{background:transparent;border:1px solid var(--lk-l)}
.lk-grp{padding:12px 12px 4px;font:700 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--lk-g)}
.lk-note{padding:8px 12px;font:400 15px/1.45 var(--sans);color:var(--lk-g)}
.lk-note-err{color:#A8231B}
.lk-states{display:flex;flex-wrap:wrap;gap:0 12px;align-items:center;padding:8px 12px 4px;margin-top:8px;border-top:1px solid var(--lk-l);font:600 14px/1.3 var(--sans);color:var(--lk-g)}
.lk-states a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}

/* Review fixes 1, 2, 3, 5 (measured in WebKit): the Search button's grown width is reserved in its own track (justify-self:end), so
   no field ever resizes when the bar opens and no label moves; equal side padding; the clear button 16 px in; on the active Where the
   location arrow steps aside (its first list row is "Use my location"), so the clear button never sits over the words. */
.lk-go{justify-self:end}
.lk-seg.is-on .lk-near-ic{display:none}
@media (min-width:900px){
  .lk-js .lk-seg .lk-x{right:16px}.lk-js .lk-name{padding-right:56px}.lk-js .lk-where{padding-right:56px}
  /* A narrow bar (the map view's panel): the same segments; the Search word's reserved track fits "Search" alone and the location arrow
     steps aside (the Where list's first row and the map's own control both offer it). Measured by the bar's own box, never by the window. */
  @container (max-width:640px){
    .lk-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto auto calc(7.5rem + 6px)}
    .lk-js .lk-seg{padding-inline:16px}
    .lk-js .lk-where{padding-right:16px}
    .lk-js .lk-name{padding-right:48px}
    .lk-js .lk-seg .lk-x{right:8px}
    .lk-js .lk-bar.has-kind .lk-kind{padding-inline:16px}
    .lk-where .lk-near-ic{display:none}
    .lk-js .lk-bar.is-on .lk-go{max-width:7.5rem}
  }
  /* Tighter still (a panel at the 900 px edge): the Search button keeps its round shape and its name; its word has no room to grow. */
  @container (max-width:470px){
    .lk-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto auto 56px}
    .lk-js .lk-bar.is-on .lk-go{max-width:48px;padding:0 12px;gap:0}
    .lk-js .lk-bar.is-on .lk-go-t{max-width:0;opacity:0}
  }
}
/* Kind sizes to its words ("Any kind", "Sit-down restaurant"), never cut; collapsed it has no padding at all (review fix 7). */
.find-form .lk-bar .lk-kind-b{width:max-content;max-width:100%}
.lk-kind-b{min-height:26px}
/* Kind: an optional segment that slides in (its width) when the results have 2 or more real kinds, and out when not; the pill and the
   dividers follow (lookup-bar.js re-measures as it moves). Collapsed it takes no width, no focus and no reading; under Reduce Motion it
   just appears. */
.lk-js .lk-kind{max-width:0;padding-inline:0;opacity:0;overflow:hidden;visibility:hidden;white-space:nowrap;transition:max-width var(--lk-t) var(--ease),padding var(--lk-t) var(--ease),opacity 150ms var(--ease),visibility 0s var(--lk-t)}
.lk-js .lk-bar.has-kind .lk-kind{max-width:16rem;padding-inline:20px;opacity:1;visibility:visible;transition:max-width var(--lk-t) var(--ease),padding var(--lk-t) var(--ease),opacity 150ms var(--ease),visibility 0s}
.lk-js .lk-div-kind{width:0;transition:width var(--lk-t) var(--ease)}
.lk-js .lk-bar.has-kind .lk-div-kind{width:1px}
.lk-js .find-near:not(:has(.find-near-line:not(:empty))):not(:has([data-near-stop]:not([hidden]))){display:none}

/* Phones (under 900 px): the bar folds into one field that says what is searched; a tap opens a full-screen sheet with the segments
   stacked (Airbnb's mobile search). */
.lk-fold{display:none}
.lk-sheet-top{display:none}
@media (max-width:899px){
  .lk-js .lk-fold:not([hidden]){display:flex;align-items:center;gap:8px;max-width:34rem;margin:0 auto;padding:4px 4px 4px 0;border:1px solid #DDDBD3;border-radius:999px;background:var(--paper-hi);box-shadow:0 1px 2px rgba(23,35,46,.08),0 8px 24px -12px rgba(23,35,46,.3)}
  .lk-fold-b{display:flex;flex:1;align-items:center;gap:12px;min-width:0;min-height:56px;padding:8px 8px 8px 16px;border:0;border-radius:999px;background:none;color:var(--ink);text-align:left;cursor:pointer}
  .lk-fold-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .lk-fold-t{display:grid;gap:2px;min-width:0}
  .lk-fold-t b{overflow:hidden;font:700 15px/1.25 var(--sans);text-overflow:ellipsis;white-space:nowrap}
  .lk-fold-t small{overflow:hidden;font:400 13.5px/1.3 var(--sans);color:var(--lk-g,#5F6B74);text-overflow:ellipsis;white-space:nowrap}
  .lk-fold .lk-near-ic{position:static;margin:0;border:1px solid var(--hair)}
  .lk-js .lk-sheet{display:none}
  .lk-js .lk-sheet.is-open{position:fixed;inset:0;z-index:70;display:grid;align-content:start;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);overflow:auto;background:#F7F6F2}
  .lk-sheet.is-open .lk-sheet-top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
  .lk-sheet-h{margin:0;font:700 17px/1.2 var(--sans)}
  .lk-sheet-x{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;background:var(--paper-hi);color:var(--ink);cursor:pointer}
  .lk-bar{grid-template-columns:1fr;gap:12px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .lk-bar.is-on{background:transparent;box-shadow:none}
  .lk-pill,.lk-div{display:none}
  .lk-seg{min-height:64px;padding:12px 16px;border-radius:16px;background:var(--paper-hi);box-shadow:0 1px 2px rgba(23,35,46,.08),0 6px 16px -10px rgba(23,35,46,.3)}
  .lk-js .lk-seg.is-on{box-shadow:0 0 0 2px var(--ink),0 10px 24px -12px rgba(23,35,46,.4)}
  .lk-lab{font-size:13px}
  .lk-in{font-size:17px}
  .lk-go,.lk-js .lk-go,.lk-js .lk-bar.is-on .lk-go{max-width:none;width:100%;height:52px;margin:4px 0 0;padding:0 20px}
  .lk-js .lk-go-t,.lk-js .lk-bar.is-on .lk-go{gap:8px}
  .lk-js .lk-go-t{max-width:7.5rem;opacity:1}
  .lk-sheet.is-open .lk-pop{position:static;width:auto!important;transform:none!important;margin-top:0;padding:8px 4px;border-radius:16px}
  .lk-sheet.is-open .lk-list{max-height:none}
  .lk-sheet.is-open .lk-opt{flex-wrap:wrap;row-gap:0}
  .lk-sheet.is-open .lk-opt-e{flex-basis:100%;margin:-8px 0 0;padding-left:60px}
  .lk-js .lk-name{padding-right:56px}.lk-js .lk-where{padding-right:56px}.lk-js .lk-seg .lk-x{right:16px}
  .lk-js .lk-bar.has-kind .lk-kind{max-width:none;padding-inline:16px}.lk-js .lk-kind{max-height:0;min-height:0;padding-block:0}.lk-js .lk-bar.has-kind .lk-kind{max-height:6rem;min-height:64px;padding-block:12px}
  .find-form .lk-bar .lk-lab{font-size:13px}.find-form .lk-bar .lk-in{font-size:17px}.find-form .lk-bar .lk-go{width:100%}
  [data-hero] h1{margin-bottom:16px}
}
html.lk-lock{overflow:hidden}

/* Reduce Motion (the system's, or the site's own switch): nothing glides, lifts or fades; the state still changes at once. */
@media (prefers-reduced-motion:reduce){.lk-pill,.lk-pop,.lk-list,.lk-go,.lk-go-t,.lk-card,.lk-bar,.lk-div,.lk-js .lk-kind,.lk-js .lk-div-kind{transition:none!important}.lk-card:hover{transform:none!important}}
html[data-motion=off] :is(.lk-pill,.lk-pop,.lk-list,.lk-go,.lk-go-t,.lk-card,.lk-bar,.lk-div,.lk-js .lk-kind,.lk-js .lk-div-kind){transition:none!important}
html[data-motion=off] .lk-card:hover{transform:none!important}
/* The bar continues from the site search dialog into this page and back (cross-document view transitions, site/search.js). */
[data-hero] .lk-bar,[data-hero] .lk-fold{view-transition-name:cc-search}
/* In the site search dialog: the list sits in the dialog under the bar (the dialog scrolls; nothing is clipped). */
.lk-dlg .lk-pop{position:relative;top:auto;margin-top:8px;max-width:100%}
.lk-dlg .lk-list{max-height:min(46vh,22rem)}

/* The older form rules (find.css .find-form label/input/select) do not reach into the bar. */
.find-form .lk-bar .lk-lab{font:700 12.5px/1.2 var(--sans);color:var(--ink)}
.find-form .lk-bar .lk-in,.find-form .lk-bar select{width:100%;min-height:26px;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;font:400 15.5px/1.35 var(--sans);color:var(--ink);box-shadow:none}
.find-form .lk-bar select{min-height:44px;height:44px}
.find-form .lk-bar .lk-kind-b{color:var(--lk-g)}
.find-form .lk-bar .lk-go{width:auto}