/* ===================================================================
   base.css — Timbuktu
   Responsive header (desktop + mobile)
   - Mobile: hamburger left; right cluster [search][location][bell][profile]
   - City dropdown & Search sheet are fixed overlays (never clipped)
   - Includes a11y utilities, safe-areas, micro-animations
=================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --ink:#253041;
  --text:#5D6B7B;
  --meta:#7E8899;
  --line:#E8EDF4;
  --bg:#F6F8FB;
  --card:#FFFFFF;
  --brand:#F46802;
  --shadow:0 8px 20px rgba(17,24,39,.06);
  --radius:16px;

  --z-header:70;
  --z-overlay:1000;   /* city/search overlay tier */
}

/* ---------- Base / type ---------- */
*{ box-sizing:border-box; }
html{ font-size:14.5px; }
body{
  font-family:"Satoshi",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,Noto Sans,sans-serif;
  line-height:1.45; color:var(--text); background:var(--bg); margin:0;
}
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- Shell & left rail ---------- */
.shell{
  display:grid; grid-template-columns:240px minmax(0,1fr);
  min-height:100dvh;
}
.rail{
  background:#fff; border-right:1px solid var(--line);
  position:sticky; top:0; height:100dvh; padding:14px 12px; z-index:30;
}
.rail-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 10px; }
.brand img{ height:48px; display:block; }

.rail-nav{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.rail-link{
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:10px; color:var(--text);
}
.rail-link i{ width:18px; text-align:center; color:#8a97a8; }
.rail-link:hover{ background:#f7f9fc; }
.rail-link.active{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }

.rail-footer{ margin-top:auto; padding:10px; }
.rail-logout{
  width:100%; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:9px 10px;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
  overflow:visible; /* avoid clipping descendants */
}
.hd{ padding:10px 12px; }

/* Desktop grid: [spacer] [center search] [actions] */
.hd--desktop{
  display:grid; grid-template-columns:1fr minmax(320px,720px) auto;
  align-items:center; gap:12px;
}
.hd__actions{ display:flex; align-items:center; gap:10px; }

/* Mobile header */
.hd--mobile{ display:none; align-items:center; gap:12px; }
.brand-mini img{ height:34px; display:block; }
.hd--mobile .hd__actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* Toggle at 1024px */
@media (max-width:1024px){
  .hd--desktop{ display:none !important; }
  .hd--mobile { display:flex !important; }
}

/* ---------- Icons / buttons / profile menu ---------- */
.icon-btn{
  width:38px; height:38px; border-radius:12px;
  border:1px solid var(--line); background:#fff;
  display:inline-grid; place-items:center;
}
.icon-btn:hover{ background:#f7f9fc; }

.profile{ position:relative; }
.profile-btn{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:#fff;
  border-radius:999px; padding:4px 8px; cursor:pointer;
}
.profile .avatar{
  width:28px; height:28px; border-radius:999px;
  object-fit:cover; display:block;
}
.profile-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:6px; min-width:200px;
}
.profile-menu a{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; }
.profile-menu a:hover{ background:#f7f9fc; }
.profile-menu hr{ border:0; border-top:1px solid var(--line); margin:6px 0; }

/* ---------- Desktop search bar ---------- */
.search{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 12px; max-width:720px;
}
.search i{ color:#9aa4b2; }
.search-input{ border:0; outline:0; width:100%; background:transparent; color:var(--text); }

/* ---------- Content & footer ---------- */
.main{ display:flex; flex-direction:column; min-width:0; }
.content{ padding:16px; }
.footer{ color:var(--meta); padding:16px; }

/* ---------- Messages ---------- */
.messages{
  position:fixed; top:12px; left:50%;
  transform:translateX(-50%); z-index:90;
}
.alert{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; box-shadow:var(--shadow); color:var(--ink); margin-bottom:6px;
}

/* ---------- City popover (fixed; outside header) ---------- */
.city-overlay[hidden]{ display:none; }
.city-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.35);
  backdrop-filter:blur(2px); z-index:var(--z-overlay);
  pointer-events:auto;
}

.city-popover[hidden]{ display:none; }
.city-popover{
  position:fixed; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 20px 60px rgba(15,23,42,.18);
  max-width:560px; width:min(92vw,560px);
  z-index:calc(var(--z-overlay) + 1);

  /* Desktop default: truly centered & independent of header */
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:auto;
}

/* Mobile bottom-sheet override */
@media (max-width:767px){
  .city-popover{
    left:0; right:0; bottom:0; top:auto;
    width:100%;
    border-radius:16px 16px 0 0;
    transform:none;
  }
}

/* Content and scroll area */
.city-popover-inner{
  max-height: clamp(320px, 72vh, 640px);
  overflow:auto;
  padding:10px;
  overscroll-behavior: contain;

  /* ✅ Animate the INNER content, not the container,
     so translate(-50%,-50%) centering is never overridden */
  opacity:0;
  transition: transform .18s ease, opacity .18s ease;
}
@media (min-width:768px){
  .city-popover-inner{ transform:scale(.98); }
}
@media (max-width:767px){
  .city-popover-inner{ transform:translateY(16px); }
}
/* Open state */
.city-popover.is-open .city-popover-inner{
  transform:none;
  opacity:1;
}

.city-popover-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 4px 8px;
}
.city-popover-close{
  border:0; background:#fff; font-size:20px; line-height:1; cursor:pointer;
}

.city-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; margin-bottom:8px;
}
.city-search input{ border:0; outline:0; width:100%; background:transparent; }

.city-popular,.city-suggest{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.caption{ font-size:12px; color:var(--meta); width:100%; }
.city-chip{
  border:1px solid var(--line); background:#fff; color:#475569;
  border-radius:999px; padding:6px 10px; font-weight:600; cursor:pointer;
}

.city-list{ display:grid; gap:6px; }
.city-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; cursor:pointer;
}
.city-item.selected{ outline:2px solid rgba(244,104,2,.25); }

/* ---------- Drawer overlay (for mobile rail) ---------- */
.nav-overlay[hidden]{ display:none; }
.nav-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.35);
  backdrop-filter:blur(2px); z-index:100; /* below the rail drawer */
}

/* ---------- Mobile/tablet layout & drawer rail ---------- */
@media (max-width:1024px){
  .shell{ grid-template-columns:minmax(0,1fr); }

  .rail{
    display:block !important;
    position:fixed; inset:0 auto 0 0;
    width:272px; max-width:86vw;
    background:#fff; border-right:1px solid var(--line);
    box-shadow:12px 0 30px rgba(17,24,39,.08);
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:110;
  }
  .rail.open{ transform:translateX(0); }

  .hd__burger{ display:inline-grid; }
}

/* ---------- Search overlay & sheet (mobile bottom sheet / desktop dialog) ---------- */
.search-overlay[hidden]{ display:none; }
.search-overlay{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:rgba(15,23,42,.35); backdrop-filter:blur(2px);
}

.search-sheet[hidden]{ display:none; }
.search-sheet{
  position:fixed; z-index:calc(var(--z-overlay) + 1); background:#fff;
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  max-width:560px; width:min(92vw,560px);
}

/* Desktop center dialog */
@media (min-width:768px){
  .search-sheet{ top:50%; left:50%; transform:translate(-50%,-50%); }
}
/* Mobile bottom sheet */
@media (max-width:767px){
  .search-sheet{ left:0; right:0; bottom:0; width:100%; border-radius:16px 16px 0 0; }
}

.search-sheet__header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.search-sheet__close{
  border:0; background:#fff; font-size:22px; line-height:1; cursor:pointer;
}

.search-sheet__form{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; margin:12px 14px;
}
#searchInput{ border:0; outline:0; width:100%; background:transparent; }
.search-sheet__submit{
  border:0; background:var(--brand); color:#fff;
  border-radius:10px; padding:8px 12px; font-weight:600; cursor:pointer;
}

.search-sheet__chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 14px; }
.chip{
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:6px 10px; font-weight:600; cursor:pointer; color:#475569;
}

/* ---------- A11y utilities & polish ---------- */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
html, body{ overscroll-behavior: contain; }

/* iOS safe areas */
.topbar{ padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
@supports (padding: max(0px)){
  .city-popover, .search-sheet{ padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
}
/* Toast fade-out */
.toast{
  transition: opacity .25s ease, transform .25s ease;
}
.toast--hiding{
  opacity: 0;
  transform: translateY(-6px);
}

/* --- Notifications (light touch) --- */
.notif-badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--brand); color:#fff;
  border-radius:10px; padding:0 6px; font-size:11px; line-height:18px; height:18px;
  min-width:18px; text-align:center; box-shadow:0 0 0 2px #fff;
}
.notif-dd a{
  display:block; padding:8px; border-radius:10px; color:inherit; text-decoration:none;
}
.notif-dd a:hover{ background:#f7f9fc; }

.btn-accept:hover{ filter: brightness(0.98); }
.btn-decline:hover{ filter: brightness(0.98); }

.btn--primary { background: var(--brand); color:#fff; border:0; border-radius:10px; }
.btn--light { background:#fff; border:1px solid var(--line); border-radius:10px; }

/* Rail search */
.rail-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:8px 10px;
  margin:8px 8px 12px;
}
.rail-search i{ color:#9aa4b2; }
.rail-search input{
  border:0; outline:0; width:100%; background:transparent; color:var(--text);
}
/* --- ChatGPT-like header search --- */
.gpt-search{
  display:flex; align-items:center; gap:8px;
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.gpt-search i{ color:#9aa4b2; }
.gpt-search__input{
  border:0; outline:0; width:100%;
  background:transparent; color:var(--text);
}
.gpt-search:focus-within{
  border-color:#d7dfea;
  box-shadow:0 0 0 3px rgba(244,104,2,.12);
  background:#fff;
}
.key-hint{
  font:600 11px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#667085;
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 6px;
  background:#f9fafb;
  letter-spacing:.2px;
}

/* The desktop header uses a 3-col grid; this centers the search nicely */
.hd--desktop{ grid-template-columns: 1fr minmax(360px, 720px) auto; }

/* Keep rail search for mobile/drawer, hide it on desktop so you don't get two searches */
@media (min-width:1025px){
  .rail-search{ display:none; }
}
/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
  overflow:visible;
}
.hd{ padding:10px 12px; }

/* Desktop layout: LEFT search + RIGHT actions */
.hd--desktop{
  display:grid;
  grid-template-columns: minmax(320px, 720px) auto;  /* search left, actions right */
  align-items:center; gap:12px;
}
.hd__actions{ display:flex; align-items:center; gap:10px; }

/* --- ChatGPT-like header search (left) --- */
.gpt-search{
  display:flex; align-items:center; gap:8px;
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.gpt-search i{ color:#9aa4b2; }
.gpt-search__input{
  border:0; outline:0; width:100%;
  background:transparent; color:var(--text);
}
.gpt-search:focus-within{
  border-color:#d7dfea;
  box-shadow:0 0 0 3px rgba(244,104,2,.12);
  background:#fff;
}
.key-hint{
  font:600 11px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#667085;
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 6px;
  background:#f9fafb;
  letter-spacing:.2px;
}

.hd__spacer{ display:block; } /* used when search is hidden on Browse page */

/* Mobile header */
.hd--mobile{ display:none; align-items:center; gap:12px; }
.brand-mini img{ height:34px; display:block; }
.hd--mobile .hd__actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }

@media (max-width:1024px){
  .hd--desktop{ display:none !important; }
  .hd--mobile { display:flex !important; }
}

/* Hide rail search on desktop; keep it for mobile/drawer */
@media (min-width:1025px){
  .rail-search{ display:none; }
}

/* Rail search (mobile/drawer) */
.rail-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:8px 10px;
  margin:8px 8px 12px;
}
.rail-search i{ color:#9aa4b2; }
.rail-search input{
  border:0; outline:0; width:100%; background:transparent; color:var(--text);
}

/* (rest of your existing CSS stays exactly as-is below) */

/* ===== Header layout: push actions to extreme right ===== */
.hd--desktop{
  display:flex;
  align-items:center;
  gap:12px;
}
.hd__actions{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
}

/* ===== Global header search (ChatGPT-style pill) ===== */
.hd__search-global{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 12px;
  flex:1 1 720px; max-width:720px;
}
.hd__search-global i{ color:#9aa4b2; }
.hd__search-global .search-input{
  border:0; outline:0; width:100%; background:transparent; color:var(--text);
}
.key-hint{
  font-size:12px; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0;
  border-radius:6px; padding:2px 6px; line-height:1;
  user-select:none;
}

/* Keep rail search for mobile drawer only */
@media (min-width:1025px){
  .rail-search{ display:none; }
}

/* ===== Typeahead dropdown ===== */
.gsearch-dd[hidden]{ display:none; }
.gsearch-dd{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  z-index:var(--z-overlay);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,42,.12);
  padding:8px; max-height:70vh; overflow:auto;
}
.gsearch-row{ display:flex; align-items:center; gap:8px; }
.gsearch-scope{
  display:flex; flex-wrap:wrap; gap:6px; padding:4px 6px 8px;
}
.scope-chip{
  border:1px solid var(--line); background:#fff; color:#475569;
  border-radius:999px; padding:6px 10px; font-weight:600; cursor:pointer;
}
.scope-chip[data-active="1"]{ background:#f7f9fc; border-color:#e6edf6; }

.gsearch-city{
  margin-left:auto; font-size:12px; color:#64748b;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border:1px solid var(--line); border-radius:999px; background:#fff;
}

.gsearch-group{ padding:6px 6px 4px; }
.gsearch-title{
  font-size:12px; color:#7E8899; margin:2px 6px 6px;
}
.gsearch-list{ display:grid; }
.gsearch-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:10px; cursor:pointer;
}
.gsearch-item:hover, .gsearch-item[aria-selected="true"]{ background:#f7f9fc; }
.gsearch-item i{ width:18px; color:#8a97a8; }
.gsearch-item .subtitle{ font-size:12.5px; color:#7E8899; }

/* A11y focus outline for items navigated by keyboard */
.gsearch-item:focus{ outline:2px solid rgba(244,104,2,.35); outline-offset:2px; }

/* Desktop header: search left, actions hard-right */
.hd--desktop{ display:flex; align-items:center; gap:12px; }
.hd__actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* Wrapper to anchor the dropdown right under the search */
.hd__search-wrap{ position:relative; flex:1 1 720px; max-width:720px; }
.hd__search-global{ width:100%; }

/* Sidebar search only on mobile/drawer (final say in the cascade) */
@media (min-width:1025px){
  .rail-search{ display:none !important; }
}
@media (max-width:1024px){
  .rail-search{ display:flex; } /* visible inside the drawer */
}

/* Typeahead dropdown is positioned relative to .hd__search-wrap */
.gsearch-dd{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
}

/* Optional: hide Chrome’s built-in “x” if you don’t want it */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none; appearance: none; display:none;
}

/* Anchor dropdown */
.hd__search-wrap{ position:relative; flex:1 1 720px; max-width:720px; }
.gsearch-dd{ position:absolute; left:0; right:0; top:calc(100% + 8px); }

/* Rail search hidden on desktop, visible in drawer */
@media (min-width:1025px){ .rail-search{ display:none !important; } }