/* assets/css/cities.css — Cities Phase 1 + Brutal Lite "Select city" screen
   (city-preview.html). Full-screen page, slides in from the right, closes
   with history.back() (pushState) — see assets/js/city.js, unchanged here.
   Markup lives in partials/city_sheet.php / partials/city_not_here.php.
   Uses assets/css/lite.css tokens (--ink, --paper, --card, --bd, --sh, …) so
   it matches whether lite.css or the older brutal.css is also loaded on the
   page; --font-mono falls back to the lite UI font since lite.css doesn't
   define a mono font. */

.city-sheet,.city-nh{--font-mono:var(--font-ui, system-ui);}

.city-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);border-bottom:var(--bd)}

.city-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:800;
  font-size:.86rem;background:var(--card);border:var(--bd);border-radius:var(--r-pill);padding:7px 12px;
  box-shadow:var(--sh-sm);cursor:pointer;color:var(--ink)}
.city-pill i{color:var(--blue)}
.city-pill .ph-caret-down{color:var(--muted);font-size:.72rem}

/* ---- "you're in another city" banner ---- */
.city-banner{display:flex;align-items:flex-start;gap:8px;background:var(--card-2);border-bottom:var(--bd);
  padding:8px 14px;font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--ink-soft);line-height:1.5}
.city-banner[hidden]{display:none}
.city-banner i{margin-top:3px;flex:none}
.city-banner__txt{flex:1;min-width:0}
.city-banner b{color:var(--ink)}
.city-banner a{flex:none;color:var(--blue);font-weight:700;cursor:pointer;text-decoration:underline;margin-top:3px}

/* ---- city picker: full-screen page (slides in from the right) + pushState back
   (assets/js/city.js: history.pushState on open, history.back() on close,
   popstate hides it — matches live v148) ---- */
.city-sheet-backdrop{display:none!important}
.city-sheet{position:fixed;inset:0;z-index:1151;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .22s ease}
.city-sheet.is-open{transform:translateX(0)}
html.city-page-open,html.city-page-open body{overflow:hidden}
/* reference (city-preview.html): no header bar/border — just a round X top-right, then a
   plain h1 title + muted sub-line, same as any other full-screen page on the site. */
.city-sheet__body{padding:calc(14px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
  max-width:480px;margin:0 auto}
.city-sheet__top{display:flex;justify-content:flex-end;margin-bottom:10px}
.city-sheet__close{width:44px;height:44px;border-radius:50%;border:0;background:var(--card-2);flex:none;
  box-shadow:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font-size:1.05rem}
.city-sheet__sub{margin:6px 2px 18px;line-height:1.4}

.city-searchbox{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-ctl);
  padding:13px 14px;margin-bottom:18px}
.city-searchbox i{color:var(--muted)}
.city-searchbox input{border:none;outline:none;font-family:var(--font-ui);font-size:15px;width:100%;
  background:transparent;color:var(--ink)}

/* reference .loc-row: a round calm icon tile + stacked text (blue bold title, muted area
   sub-line below) — NOT an outlined/bordered box (that was an invented pattern). */
.city-locrow{display:flex;align-items:center;gap:12px;margin:18px 0 22px;cursor:pointer;background:none;border:0;padding:0;}
.city-locrow__ic{width:40px;height:40px;border-radius:50%;background:var(--card-2);display:flex;align-items:center;
  justify-content:center;color:var(--blue);font-size:19px;flex:0 0 auto}
.city-locrow__t{display:block;font-weight:700;font-size:15px;color:var(--blue);font-family:var(--font-ui)}
.city-locrow__sub{display:block;font-size:13px;color:var(--muted);margin-top:1px}

.city-seclabel{font-family:var(--font-ui);font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin:4px 0 10px}

/* ---- Live city: big photo hero card (falls back to a flat colour tile when
   there's no city photo — cities don't have a photo field yet) ---- */
/* reference (city-preview.html .live-card): ink border, NO hard shadow — the screen's one
   shadow budget belongs to the sticky "Continue" button. Falls back to a calm --card-2 tile
   (not a loud gradient) when there's no city photo yet. */
.city-live-card{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;border:var(--bd);
  box-shadow:none;margin-bottom:16px;height:168px;background:var(--card-2);
  text-decoration:none;color:inherit}
.city-live-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.city-live-card .scrim{position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.78))}
.city-live-card .check{position:absolute;top:12px;left:12px;width:28px;height:28px;border-radius:50%;background:#fff;
  border:var(--bd);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:.8rem;z-index:2}
.city-live-card .sticker{position:absolute;top:12px;right:12px;z-index:2}
.city-live-card .info{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;padding:0}
.city-live-card .city-name{font:800 24px/1 var(--font-display);letter-spacing:-.3px;color:#fff}
.city-live-card .city-meta{font-size:12.5px;color:rgba(255,255,255,.92);margin-top:4px;font-weight:600}

/* ---- Coming soon: grid of colour tiles with a watermark icon (reference: 6 distinct
   pastel tiles, cycled here by position rather than hardcoded city names, since the real
   admin-configured "coming soon" list can be any cities, not just the reference's demo 6) ---- */
.city-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.city-tile{position:relative;border-radius:14px;border:1px solid var(--line);background:var(--card-2);
  padding:15px 13px;height:132px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.city-tile .bg-icon{position:absolute;right:-6px;bottom:-10px;font-size:68px;opacity:.28;z-index:0}
.city-tile .ct-name{font:800 15.5px/1 var(--font-display);color:var(--ink);position:relative;z-index:1}
.city-tile .ct-bottom{position:relative;z-index:1}
.city-tile .soon-chip{display:inline-block;font:700 10.5px/1 var(--font-ui);color:var(--muted);
  background:rgba(255,255,255,.75);border-radius:999px;padding:4px 9px;margin-bottom:6px}
.city-tile .notify-link,.city-notifybtn{display:flex;align-items:center;gap:4px;font:700 11.5px/1 var(--font-ui);
  color:var(--ink);background:none;border:0;cursor:pointer;padding:6px 0;min-height:32px}
.city-tile .notify-link.is-done,.city-notifybtn.is-done{color:var(--ink);opacity:.7}
/* the reference's 6 tile colours, cycled by nth-child so any number of real "soon" cities
   gets the same playful, non-repeating-adjacent look */
.city-tile:nth-child(6n+1){background:#ffe3d6} .city-tile:nth-child(6n+1) .bg-icon{color:#ff8a4c}
.city-tile:nth-child(6n+2){background:#e4e1ff} .city-tile:nth-child(6n+2) .bg-icon{color:#6a5cff}
.city-tile:nth-child(6n+3){background:#d9f2e3} .city-tile:nth-child(6n+3) .bg-icon{color:#23a865}
.city-tile:nth-child(6n+4){background:#ffe0ea} .city-tile:nth-child(6n+4) .bg-icon{color:#ff5c8a}
.city-tile:nth-child(6n+5){background:#fff3cf} .city-tile:nth-child(6n+5) .bg-icon{color:#c99900}
.city-tile:nth-child(6n+6){background:#d8eefc} .city-tile:nth-child(6n+6) .bg-icon{color:#2f8fd6}

/* legacy list rows (used when there's more than one live city) */
.city-row{display:flex;align-items:center;gap:12px;padding:13px 12px;border:1.5px solid var(--line);border-radius:var(--r-card);
  background:var(--card);margin-bottom:10px;cursor:pointer;text-decoration:none;color:inherit}
.city-row--soon{opacity:.82;cursor:default}
.city-row__ic{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--card-2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--ink);flex:none}
.city-row__body{flex:1;min-width:0}
.city-row__name{font-family:var(--font-display);font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:7px}
.city-row__sub{font-family:var(--font-ui);font-size:12px;color:var(--muted);margin-top:2px}
.city-check{width:24px;height:24px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;flex:none}

.city-request-row{display:flex;align-items:center;justify-content:space-between;padding:16px 4px 4px;color:var(--muted);
  font:600 13.5px/1 var(--font-ui);cursor:pointer}
.city-request-row i{color:var(--muted-2)}

/* sticky "Continue with {city}" bar, matching .sticky-bottom in lite.css */
.city-sheet .city-sticky{position:sticky;z-index:5;bottom:0;left:0;right:0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(255,255,255,0),var(--paper) 30%);margin-top:10px}
.city-sheet .city-sticky .btn-brand{background:var(--yellow);opacity:1}

/* ---- "Not here yet" screen ---- */
.city-tbar{display:flex;align-items:center;gap:10px;padding:12px 14px}
.city-tbar__back{width:40px;height:40px;border-radius:10px;background:var(--card);border:var(--bd);
  box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
.city-nh{padding:28px 20px;text-align:center;min-height:50vh;display:flex;flex-direction:column;align-items:center}
.city-nh__ic{width:72px;height:72px;margin:10px auto 18px;border:var(--bd);border-radius:18px;background:var(--lime);
  box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;font-size:1.9rem}
.city-nh h1{font-family:var(--font-display);font-size:1.55rem;margin:0 0 10px;line-height:1.1}
.city-nh p{font-family:var(--font-ui);font-size:.9rem;color:var(--ink-soft);margin:0 0 20px;line-height:1.5;max-width:420px}
.city-nh__btn{width:100%;max-width:340px;margin-bottom:10px}
.city-nh .btn--text{background:none;border:0;color:var(--blue);font:700 14px/1 var(--font-ui);padding:10px;min-height:44px;cursor:pointer}
.city-counter{font-family:var(--font-ui);font-size:12px;font-weight:700;color:var(--muted);margin-top:14px}

/* ---- admin cities table (unchanged visual language) ---- */
.city-statuspill{font-family:var(--font-ui);font-size:.66rem;font-weight:700;border:2px solid var(--ink);
  border-radius:var(--r-pill);padding:4px 10px;display:inline-block}
.city-statuspill.live{background:var(--lime)}
.city-statuspill.soon,.city-statuspill.hidden{background:var(--card-2);color:var(--muted)}

@media (prefers-reduced-motion:reduce){.city-sheet{transition:none}}
/* Sign-in pop-up (Notify me as a guest) must not sit under the sheet */
body:has(.join-modal) .city-sheet,body:has(.join-modal) .city-sheet-backdrop{display:none!important}

/* ---- city next to the logo in the top bar (Swiggy-style) ---- */
.nav__city{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:46vw;margin-left:4px;padding:6px 4px;
  font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1;color:var(--ink);text-decoration:none;flex:0 1 auto}
.nav__city .ph-map-pin{color:var(--blue);font-size:1.1rem;flex:none}
.nav__city-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;border-bottom:2px solid var(--ink)}
.nav__city .ph-caret-down{font-size:.75rem;flex:none}
.nav__city:hover .nav__city-n,.nav__city:focus-visible .nav__city-n{color:var(--blue);border-color:var(--blue)}
/* narrow phones: tighter top bar so the city name fits next to Search / Sign in / Join */
@media (max-width:420px){
  .nav__inner:has(.nav__city){gap:8px;padding-left:12px;padding-right:12px}
  .nav__city{margin-left:0;max-width:none;font-size:.92rem}
  .nav__inner:has(.nav__city) .btn--sm{padding-left:10px;padding-right:10px}
}
@media (max-width:380px){
  .nav__inner:has(.nav__city){gap:6px}
  .nav__inner:has(.nav__city) .brandmark img{width:32px;height:32px}
  .nav__city{font-size:.84rem;gap:3px}
  .nav__inner:has(.nav__city) .btn--sm{padding-left:8px;padding-right:8px}
}

/* v173: "Continue with …" always sits at the bottom of the sheet (city-preview.html), even
   when there are few cities — the body is a full-height column, the button takes margin-top:auto */
.city-sheet .city-sheet__body{ min-height:100%; display:flex; flex-direction:column; }
.city-sheet .city-sticky{ margin-top:auto; }

/* v216: selected city on Explore, right side of the "Places in this area" row */
.exp__city{display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;max-width:50%;padding:6px 10px;margin:-6px -4px -6px 0;
  border:1.5px solid var(--ink);border-radius:999px;background:var(--card,#fff);color:var(--ink);text-decoration:none;
  font:800 13px/1 var(--font-ui,system-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
.exp__city .ph-map-pin{color:var(--blue);font-size:15px;flex:none}
.exp__city-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.exp__city .ph-caret-down{font-size:11px;flex:none}
.exp__city:hover,.exp__city:focus-visible{border-color:var(--blue);color:var(--blue)}
.exp__sheet.is-loading .exp__city{display:none}