/* nav.css — bottom tab bar (mobile) + location/radius modal + desktop loc pill */

/* ---- desktop location pill (in the header) ---- */
@media (min-width:861px){
  .head-loc{display:inline-flex;max-width:260px;cursor:pointer}
  .head-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---- bottom tab bar ---- */
.tabbar{display:none}
@media (max-width:860px){
  .foot{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
    position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);
    border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(20,52,43,.06);
    padding-bottom:env(safe-area-inset-bottom)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
    padding:8px 4px 7px;min-height:54px;background:none;border:none;cursor:pointer;
    text-decoration:none;color:var(--muted);font-size:10.5px;font-weight:600;font-family:inherit}
  .tab svg{width:22px;height:22px}
  .tab span{max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab.on{color:var(--pine-ink)}
  .tab-post{color:var(--coral)}
  .tab-post-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    margin-top:-16px;margin-bottom:1px;background:var(--coral);color:#fff;border-radius:50%;
    box-shadow:var(--shadow-md)}
  .tab-post-ic svg{width:24px;height:24px}
  body.view-map .tabbar{display:none}
}

/* ---- location modal: dialog on desktop, bottom sheet on mobile ---- */
.locmodal{position:fixed;z-index:85;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:420px;max-width:calc(100vw - 32px);max-height:84vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s,visibility .18s}
.locmodal.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}

.locmodal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.locmodal-top h3{font-family:var(--display);font-size:18px;margin:0}
.locmodal-x{border:none;background:var(--surface-2);color:var(--muted);width:32px;height:32px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.locmodal-x:hover{background:var(--line);color:var(--ink)}
.locmodal-x svg{width:16px;height:16px}

.loc-browse-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:none;background:none;cursor:pointer;font-family:inherit;color:var(--pine-ink);font-weight:600;font-size:13.5px;padding:2px 4px 14px;text-decoration:underline;text-underline-offset:3px}
.loc-browse-toggle:hover{color:var(--coral-ink)}
.loc-browse-toggle .loc-caret{width:14px;height:14px;color:var(--faint);text-decoration:none;transition:transform .15s}
.loc-browse-toggle[aria-expanded="true"] .loc-caret{transform:rotate(180deg)}
.loc-list{display:flex;flex-direction:column;max-height:236px;overflow-y:auto;margin:4px 0 16px;border:1px solid var(--line);border-radius:var(--r-md)}
.loc-group{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  border:none;border-top:1px solid var(--line);background:var(--surface-2);font-family:inherit;
  padding:11px 12px;font-size:13px;font-weight:700;color:var(--pine-ink)}
.loc-group>span:first-child{flex:1}
.loc-count{font-size:11.5px;font-weight:600;color:var(--faint)}
.loc-caret{width:15px;height:15px;color:var(--faint);transition:transform .15s;flex:none}
.loc-grp.open>.loc-group .loc-caret{transform:rotate(180deg)}
.loc-group:hover{background:var(--line)}
.loc-grp-items{display:none}
.loc-grp.open>.loc-grp-items{display:flex;flex-direction:column}
.loc-opt{text-align:left;border:none;background:none;cursor:pointer;
  padding:11px 12px 11px 22px;font-size:14.5px;color:var(--pine-ink);font-weight:600;
  border-top:1px solid var(--line);font-family:inherit}
.loc-list>.loc-grp:first-child>.loc-group,.loc-all{border-top:none}
.loc-opt:hover{background:var(--surface-2)}
.loc-opt.on{background:var(--pine);color:#fff}
.loc-all{font-weight:700}
.loc-nohit{padding:12px;color:var(--muted);font-size:14px;margin:0}

.loc-radius{margin-bottom:16px}
.loc-radius-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.loc-radius-head span{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:700}
.loc-radius-head b{font-family:var(--display);color:var(--coral-ink);font-size:14px}
.loc-radius input[type=range]{width:100%;accent-color:var(--coral)}
.loc-rchips{display:flex;gap:8px;margin-top:11px}
.loc-rchips button{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;
  padding:8px 6px;font-weight:600;font-size:12.5px;color:var(--pine-ink);cursor:pointer;font-family:inherit}
.loc-rchips button.on{border-color:var(--coral);color:var(--coral-ink);background:#fff}

.use-loc.loading{opacity:.6;pointer-events:none}

@media (max-width:860px){
  .locmodal{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;
    transform:translateY(100%);border:none;border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-height:88vh;padding:18px 16px max(18px,env(safe-area-inset-bottom));
    transition:transform .26s cubic-bezier(.3,.8,.3,1)}
  .locmodal.open{transform:translateY(0)}
  .locmodal::before{content:"";display:block;width:38px;height:4px;border-radius:99px;
    background:var(--line-2);margin:0 auto 14px}
}