/* Asian Recs page styles (app.html and every prerendered page). */
:root{
  --bg:#F3F4F0; --sur:#FBFBF9; --ink:#171D1A; --mut:#67716C; --line:#DADED7; --fill:#EAEDE7; --hover:#F6F7F3;
  --lac:#B4232A; --jade:#2C7A5A; --jade-m:#86B9A2; --jade-s:#DCEDE4; --rust:#A9541F; --rust-s:#F5E5D8; --star:#C4891C;
  --scrim:rgba(23,29,26,.32); --shadow:0 20px 50px -20px rgba(23,29,26,.4);
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.4; -webkit-font-smoothing:antialiased }
body.locked{ overflow:hidden }
button{ font:inherit; color:inherit; margin:0 }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--jade); outline-offset:2px }
.serif{ font-family:var(--serif) }
svg{ display:block }

/* ---------- header ---------- */
header{ position:sticky; top:0; z-index:10; background:var(--sur); border-bottom:1px solid var(--line) }
.container{ max-width:1080px; margin:0 auto; padding:0 24px }
.bar{ display:flex; align-items:center; gap:20px; padding:14px 0 12px }
.brand{ display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; color:inherit; flex:none; cursor:pointer; background:none; border:none; padding:0; text-align:left }
.wordmark{ display:block; font-family:var(--serif); font-size:26px; font-weight:600; line-height:1; letter-spacing:-.015em }
.tools{ display:flex; align-items:center; gap:10px; margin-left:auto; min-width:0 }
.btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border:1px solid var(--line); border-radius:8px; background:var(--sur); font-weight:600; font-size:13.5px; cursor:pointer; white-space:nowrap; max-width:100% }
.btn svg{ width:14px; height:14px; flex:none }
.btn:hover{ background:var(--fill) }
.btn .lbl{ overflow:hidden; text-overflow:ellipsis; max-width:220px }
.btn.loc{ border-color:transparent; background:none; padding:0 8px; font-weight:500; color:var(--mut) }
.btn.loc:hover{ background:var(--fill) }
.btn.loc svg:first-child{ color:var(--mut) }
.btn.loc.filtered{ border-color:var(--line); background:var(--fill); padding:0 13px; font-weight:600; color:var(--ink) }
.btn .lbl .short{ display:none }
.search{ display:flex; align-items:center; gap:9px; height:36px; width:320px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--mut) }
.search:focus-within{ border-color:var(--ink); background:var(--sur) }
.search svg{ width:14px; height:14px; flex:none }
.search input{ flex:1; min-width:0; border:none; background:transparent; outline:none; font:inherit; font-size:13.5px; color:var(--ink); padding:0 }
.search input::placeholder{ color:var(--mut) }
.search kbd{ font:inherit; font-size:11px; color:var(--mut); border:1px solid var(--line); border-radius:4px; padding:1px 5px; background:var(--sur) }
.how{ background:none; border:none; font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; padding:0; white-space:nowrap }
.how:hover{ text-decoration-color:var(--ink) }
.ico{ display:none; width:36px; height:36px; border:1px solid var(--line); border-radius:8px; background:var(--sur); align-items:center; justify-content:center; cursor:pointer; flex:none; padding:0 }
.ico svg{ width:15px; height:15px }

.filters{ display:flex; align-items:center; gap:10px; padding:0 0 12px }
.vline{ width:1px; height:22px; background:var(--line); margin:0 2px; flex:none }
.cuisines{ display:flex; gap:6px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none }
.cuisines::-webkit-scrollbar{ display:none }
.cuisines.over{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent) }
.cuisines[hidden]{ display:none }
.chip{ flex:none; height:30px; padding:0 11px; border-radius:999px; border:1px solid transparent; background:transparent; font-size:13px; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; cursor:pointer }
.chip i{ font-style:normal; color:var(--mut); font-size:12px; font-variant-numeric:tabular-nums }
.chip:hover{ background:var(--fill) }
.chip.on{ background:var(--ink); color:var(--sur) }
.chip.on i{ color:rgba(255,255,255,.6) }
.chip.fav{ color:var(--lac) }
.chip.fav.on{ background:var(--lac); color:#fff }

/* ---------- main ---------- */
main{ padding:0 0 56px }
.sortline{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 2px 8px; font-size:12.5px; color:var(--mut); letter-spacing:.02em }
h1.cnt{ margin:0; font:inherit; letter-spacing:inherit }
.sortline .cnt{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sortline .btn{ flex:none; border:none; background:none; height:auto; padding:0; color:var(--mut); font-weight:500; font-size:12.5px; letter-spacing:0 }
.sortline .btn b{ color:var(--ink); font-weight:600 }
.list{ background:var(--sur); border:1px solid var(--line); border-radius:12px; overflow:hidden }
.list:empty{ min-height:60vh; background:none; border-color:transparent }
a.row, a.chip, a.sim{ color:inherit; text-decoration:none }
.row{ display:grid; grid-template-columns:52px minmax(0,1fr) 176px; gap:0 10px; padding:18px 22px 18px 20px; border-bottom:1px solid var(--line); align-items:center; cursor:pointer }
.row:last-of-type{ border-bottom:none }
.row:hover{ background:var(--hover) }
.row:focus-visible{ outline-offset:-2px }
.rank{ font-size:13px; font-weight:700; color:var(--lac); font-variant-numeric:tabular-nums; letter-spacing:.04em; align-self:start; padding-top:5px }
.name{ font-family:var(--serif); font-size:23px; font-weight:500; line-height:1.15; letter-spacing:-.005em }
.name .hrt{ color:var(--lac); font-size:13px; vertical-align:5px; margin-left:6px }
.meta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:13px; color:var(--mut); margin-top:5px; font-variant-numeric:tabular-nums }
.fam{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-weight:600 }
.fam i{ width:8px; height:8px; border-radius:2px; background:var(--c,#8A908C); display:inline-block; flex:none }
.dot{ color:var(--line) }
.dishes{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--mut); margin-top:6px; min-width:0 }
.dishes svg{ width:14px; height:14px; flex:none; color:var(--star) }
.dishes span{ font-family:var(--serif); color:var(--ink); font-style:italic; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.score{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right }
.rating{ font-family:var(--serif); font-size:32px; font-weight:500; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.rating .star{ font-family:var(--sans); font-size:15px; color:var(--star); margin-left:3px; vertical-align:9px }
.rating.pending{ color:var(--mut); font-size:26px }
.delta{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap }
.delta.pos{ background:var(--jade-s); color:var(--jade) }
.delta.neg{ background:var(--rust-s); color:var(--rust) }
.delta.even{ background:var(--fill); color:var(--mut) }
.delta .vs{ margin-left:.3em }
.tail{ display:flex; align-items:center; justify-content:flex-end; gap:5px; font-size:12px; color:var(--mut); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1 }
.share{ display:inline-flex; align-items:center; gap:5px }
.trk{ display:block; background:var(--fill); overflow:hidden; border-radius:999px }
.trk .fl{ display:block; height:100%; background:var(--jade-m); border-radius:inherit }
.share .trk{ width:36px; height:4px; flex:none }
.empty{ text-align:center; padding:56px 16px; color:var(--mut); font-size:15px; line-height:1.5 }
.empty b{ display:block; font-family:var(--serif); font-size:22px; color:var(--ink); font-weight:500; margin-bottom:4px }
.more{ padding:14px; text-align:center; border-top:1px solid var(--line) }
.more-btn{ height:36px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:var(--sur); font-weight:600; cursor:pointer; color:var(--mut) }
.more-btn:hover{ color:var(--ink); border-color:var(--ink) }
a.more-btn{ display:inline-flex; align-items:center; text-decoration:none }
.more.prev{ border-top:0; border-bottom:1px solid var(--line) }
.foot{ padding:18px 2px 0; font-size:12px; color:var(--mut); display:flex; gap:6px 18px; flex-wrap:wrap; align-items:center }
.foot .how{ font-size:12px; font-weight:500 }
.browse{ padding:10px 2px 28px; font-size:12px; color:var(--mut); display:flex; gap:4px 18px; flex-wrap:wrap }
.browse a{ color:var(--mut); text-decoration:none }
.browse a:hover{ color:var(--ink); text-decoration:underline }

/* ---------- location picker ---------- */
.loc-wrap{ position:relative }
.loc-scrim{ display:none }
.loc-card{ position:absolute; top:calc(100% + 6px); right:0; z-index:31; width:520px; max-width:calc(100vw - 32px); background:var(--sur); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); display:none; overflow:hidden }
.loc-card.open{ display:block }
.loc-grabber{ display:none }
.loc-body{ display:flex; max-height:440px }
.loc-col{ flex:1; min-width:0; overflow-y:auto; padding:8px 0 }
.loc-col.cities{ flex:0 0 186px; border-right:1px solid var(--line); background:var(--bg) }
.loc-h{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); font-weight:700; padding:8px 16px 4px }
.loc-item{ display:flex; align-items:center; gap:8px; padding:8px 16px; cursor:pointer; font-size:13.5px; font-weight:500 }
.loc-item:hover{ background:var(--fill) }
.loc-item.active{ color:var(--jade); font-weight:700 }
.loc-item.active::after{ content:'✓'; margin-left:auto }
.loc-item.hood{ padding-left:28px; font-weight:400 }
.loc-item .n{ margin-left:auto; color:var(--mut); font-size:12px; font-weight:400; font-variant-numeric:tabular-nums }
.loc-item.active .n{ color:inherit }
.loc-sep{ height:1px; background:var(--line); margin:6px 0 }
.loc-empty{ padding:10px 16px; font-size:13px; color:var(--mut) }

/* ---------- menus ---------- */
.layer{ position:fixed; inset:0; z-index:30 }
.layer.dim{ background:var(--scrim); animation:fade .15s ease-out }
.menu{ position:fixed; z-index:31; min-width:250px; max-width:min(360px, calc(100vw - 24px)); background:var(--sur); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:6px; animation:pop .12s ease-out }
.menu .mh{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); font-weight:700; padding:8px 10px 4px }
.mi{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:none; background:none; border-radius:7px; text-align:left; cursor:pointer; font-size:13.5px; font-weight:500 }
.mi:hover{ background:var(--fill) }
.mi.on{ font-weight:700 }
.mi.on::after{ content:'✓'; margin-left:auto; color:var(--jade) }
.mi:disabled{ opacity:.4; cursor:default }
.mi:disabled:hover{ background:none }
.mi small{ display:block; font-size:12px; color:var(--mut); font-weight:400; margin-top:1px }
@keyframes pop{ from{ transform:translateY(-4px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- detail sheet ---------- */
.sheet-layer{ position:fixed; inset:0; z-index:20; background:var(--scrim); animation:fade .15s ease-out }
.sheet{ position:absolute; top:0; right:0; bottom:0; width:min(520px, 100%); background:var(--sur); border-left:1px solid var(--line); box-shadow:-24px 0 60px -30px rgba(0,0,0,.45); display:flex; flex-direction:column; animation:slide .18s ease-out }
@keyframes slide{ from{ transform:translateX(28px); opacity:.5 } to{ transform:none; opacity:1 } }
.sheet-top{ display:flex; align-items:center; gap:8px; padding:14px 22px 12px; border-bottom:1px solid var(--line); flex:none }
.crumb{ flex:1; min-width:0; font-size:12.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.crumb b{ color:var(--ink); font-weight:600 }
.crumb a{ color:inherit; text-decoration:none }
.crumb a:hover{ color:var(--ink); text-decoration:underline }
.mini{ height:28px; padding:0 10px; border:1px solid var(--line); border-radius:6px; background:var(--sur); font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; flex:none }
.mini:hover{ background:var(--fill) }
.mini svg{ width:13px; height:13px }
.mini.on{ color:var(--lac); border-color:var(--lac) }
.mini.on svg{ fill:var(--lac) }
.mini.x{ width:28px; padding:0; justify-content:center; color:var(--mut) }
.sheet-body{ padding:22px 26px 36px; overflow-y:auto; flex:1; overscroll-behavior:contain }
.sheet h1, .sheet h2{ font-family:var(--serif); font-size:34px; font-weight:500; margin:0; line-height:1.05; letter-spacing:-.01em; text-wrap:balance }
.sheet .meta{ font-size:13.5px; margin-top:8px }
.links{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap }
.link{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:var(--sur); font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums }
.link:hover{ border-color:var(--ink) }
.link svg{ width:14px; height:14px }
.link .ext{ color:var(--mut); font-size:11px }
.sec{ margin-top:26px }
.sec h3{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); font-weight:700; margin:0 0 10px; display:flex; align-items:baseline; gap:8px }
.sec h3 small{ text-transform:none; letter-spacing:0; font-weight:500; font-size:12px }
.cmp{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center }
.cmp .num{ font-family:var(--serif); font-size:40px; line-height:1; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.cmp .lab{ font-size:12.5px; font-weight:600; margin-top:5px }
.cmp .them{ text-align:right }
.cmp .them .num{ color:var(--mut); font-family:var(--sans); font-size:32px; font-weight:500 }
.cmp .us .lab{ color:var(--jade) }
.scale{ position:relative; height:46px }
.scale .tr{ position:absolute; left:0; right:0; top:20px; height:2px; background:var(--line) }
.scale .tk{ position:absolute; top:31px; font-size:10.5px; color:var(--mut); transform:translateX(-50%); font-variant-numeric:tabular-nums }
.scale .bar{ position:absolute; top:17px; height:8px; border-radius:4px; background:var(--rust-s) }
.scale .bar.pos{ background:var(--jade-s) }
.scale .bar.even{ background:var(--fill) }
.scale .pt{ position:absolute; top:14px; width:14px; height:14px; border-radius:50%; transform:translateX(-50%); border:2.5px solid var(--sur) }
.scale .pt.us{ background:var(--jade); box-shadow:0 0 0 1.5px var(--jade) }
.scale .pt.them{ background:var(--sur); box-shadow:0 0 0 1.5px var(--mut) }
.cmp-note{ margin:14px 0 0; font-size:14.5px; line-height:1.5 }
.cmp-note b{ font-weight:700 }
.cmp-note b.neg{ color:var(--rust) }
.cmp-note b.pos{ color:var(--jade) }
.cmp-solo{ display:flex; align-items:center; gap:18px }
.who{ margin-top:16px; padding-top:12px; border-top:1px dashed var(--line) }
.who .trk{ height:5px }
.who-l{ display:flex; justify-content:space-between; gap:12px; margin-top:7px; font-size:12px; color:var(--mut); font-variant-numeric:tabular-nums }
.who-l b{ color:var(--ink); font-weight:600 }
.chiplist{ display:flex; flex-wrap:wrap; gap:7px }
.chip2{ height:30px; padding:0 12px; border-radius:999px; background:var(--fill); display:inline-flex; align-items:center; font-family:var(--serif); font-size:15px; font-style:italic }
.quote{ padding-left:14px; border-left:2px solid var(--jade); margin-bottom:14px }
.quote p{ margin:0; font-family:var(--serif); font-size:16px; line-height:1.45 }
.quote .qf{ font-size:12px; color:var(--mut); margin-top:4px }
.quote .qf b{ color:var(--star); font-weight:700 }
.spark{ width:100%; height:auto; display:block }
.sim{ display:flex; align-items:center; gap:12px; padding:10px 0; border:none; border-top:1px solid var(--line); cursor:pointer; background:none; width:100%; text-align:left }
.sim:last-child{ border-bottom:1px solid var(--line) }
.sim:hover .nm{ text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px }
.sim .nm{ font-family:var(--serif); font-size:17px; font-weight:500; flex:1; min-width:0; line-height:1.15 }
.sim .nm small{ display:block; font-family:var(--sans); font-size:12px; color:var(--mut); margin-top:2px; font-weight:400 }
.sim .rt{ font-family:var(--serif); font-size:19px; font-weight:500; font-variant-numeric:tabular-nums }
.sim .rt .star{ color:var(--star); font-size:11px; font-family:var(--sans); margin-left:2px; vertical-align:4px }
.dim-t{ font-size:13.5px; color:var(--mut); line-height:1.5 }

/* ---------- a place at its own address: the sheet sits in the page ---------- */
body.page .filters, body.page .sortline, body.page .foot{ display:none }
body.page .list{ background:none; border:none; border-radius:0; overflow:visible; min-height:0 }
.pageview{ padding-top:20px }
.pageview .sheet{ position:static; width:auto; max-width:720px; margin:0 auto; border:1px solid var(--line); border-radius:12px; box-shadow:none; animation:none; overflow:hidden }
.pageview .sheet-body{ overflow:visible }

/* ---------- how we rank ---------- */
.card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, calc(100% - 32px)); max-height:calc(100% - 32px); overflow:auto; background:var(--sur); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:28px 30px 30px; animation:pop .15s ease-out }
.card h2{ font-family:var(--serif); font-size:32px; margin:0 0 4px; font-weight:500; line-height:1.1 }
.card p{ font-size:15px; line-height:1.55; margin:14px 0 0 }
.card .x{ position:absolute; top:14px; right:14px }
.card .k{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:11.5px; font-weight:700; vertical-align:1px }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ---------- mobile ---------- */
@media (max-width:720px){
  .container{ padding:0 14px }
  .bar{ gap:6px; padding:10px 0 8px }
  .wordmark{ font-size:22px }
  .tools{ display:contents }
  .tools .how{ display:none }
  .loc-wrap{ margin-left:auto; min-width:0 }
  .btn.loc{ height:32px; padding:0 6px; gap:5px; font-size:13px }
  .btn.loc.filtered{ padding:0 10px }
  .btn .lbl{ max-width:130px }
  .btn .lbl .long{ display:none }
  .btn .lbl .short{ display:inline }
  .ico{ display:inline-flex; width:32px; height:32px }
  #how-ico{ width:28px; border-color:transparent; background:none; color:var(--mut) }
  .bar .btn.type{ height:32px; padding:0 10px; gap:5px; font-size:13px; flex:none }
  .search{ display:none; flex:1; width:auto; height:32px; border-radius:999px }
  header.search-open .search{ display:flex }
  header.search-open .cuisines{ display:none }
  header.search-open #search-toggle{ background:var(--ink); color:var(--sur); border-color:var(--ink) }
  .search kbd{ display:none }
  .filters{ padding-bottom:10px; gap:6px }
  .filters .ico{ border-radius:999px }
  .vline{ display:none }
  .chip{ height:32px; border-color:var(--line); background:var(--sur) }
  .chip.on{ border-color:var(--ink) }
  .sortline{ gap:12px; padding:14px 2px 8px; letter-spacing:0 }
  .sortline .cnt-in{ display:none }
  .row{ grid-template-columns:26px minmax(0,1fr) 72px; gap:0 8px; padding:14px 14px }
  .rank{ padding-top:5px }
  .name{ font-size:19px }
  .meta{ font-size:12.5px; gap:3px 6px; margin-top:3px }
  .meta .rv{ display:none }
  .dishes{ font-size:12.5px; margin-top:4px }
  .dishes span{ font-size:14px }
  .score{ gap:4px }
  .rating{ font-size:26px }
  .rating .star{ font-size:12px; vertical-align:7px; margin-left:2px }
  .rating.pending{ font-size:22px }
  .delta{ height:20px; padding:0 7px; font-size:11.5px }
  .delta .vs{ display:none }
  .tail{ font-size:11.5px }
  .share{ flex-direction:column; align-items:flex-end; gap:3px }
  .share .trk{ width:40px }
  .list{ border-radius:10px }
  .foot{ padding-top:14px }
  /* sheet becomes full screen */
  .sheet{ width:100%; border-left:none; animation:up .2s ease-out }
  @keyframes up{ from{ transform:translateY(24px); opacity:.5 } to{ transform:none; opacity:1 } }
  .sheet-top{ padding:10px 12px 10px 14px }
  .sheet-body{ padding:18px 18px 44px }
  .sheet h1, .sheet h2{ font-size:29px }
  .pageview{ padding-top:12px }
  .pageview .sheet{ border-radius:10px }
  .cmp{ gap:12px }
  .cmp .num{ font-size:34px }
  .cmp .them .num{ font-size:28px }
  .card{ left:0; right:0; top:auto; bottom:0; transform:none; width:100%; max-height:88vh; border-radius:16px 16px 0 0; padding:24px 20px calc(28px + env(safe-area-inset-bottom)) }
  /* menus become bottom sheets */
  .layer{ background:var(--scrim) }
  .menu{ top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; max-width:none; border-radius:16px 16px 0 0; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); animation:up .18s ease-out }
  .mi{ padding:13px 12px; font-size:15px }
  /* location card becomes a bottom sheet */
  .loc-scrim.open{ display:block; position:fixed; inset:0; background:var(--scrim); z-index:30 }
  .loc-card{ position:fixed; top:auto; left:0; right:0; bottom:0; width:100%; max-width:none; border-radius:16px 16px 0 0; border-bottom:none; max-height:80vh; display:none; flex-direction:column; animation:up .18s ease-out }
  .loc-card.open{ display:flex }
  .loc-grabber{ display:block; width:36px; height:4px; border-radius:2px; background:var(--line); margin:10px auto 4px; flex:none }
  .loc-body{ max-height:none; min-height:0; overflow:hidden; flex:1 }
  .loc-col{ padding-bottom:calc(12px + env(safe-area-inset-bottom)) }
  .loc-col.cities{ flex:0 0 140px }
  .loc-item{ padding:11px 14px; font-size:14.5px }
  .loc-item.hood{ padding-left:24px }
}