/* ─── /near — local-discovery hub styles ────────────────────────────
 *
 * Loaded only on /near + /stores-near via $pageCss = 'near' in those
 * PHP page files. Saves ~30 KB of CSS parse cost on every other page.
 *
 * Extracted from the "NEAR YOU — local discovery hub" section of
 * app.css. The Leaflet inline-map JS is the matching split — see
 * assets/js/near-map.js.
 * ─────────────────────────────────────────────────────────────────── */

/* ============================================================
   NEAR YOU — local discovery hub (/near).
   Stores + events + conventions geo-anchored to the user.
   ============================================================ */

/* Location bar gets a radius picker on /near */
.location-bar-near { gap: .75rem; flex-wrap: wrap; }
.location-bar-radius { display: inline-flex; align-items: center; gap: .35rem; }
.location-bar-radius select {
    padding: .3rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .85rem;
    cursor: pointer;
}
.location-bar-radius select:focus { outline: 2px solid var(--accent-soft); }

/* Travel-preview override bar — sits below the main location bar.
 * Lets the user type any city / postal code / address to preview
 * /near at that location without changing their saved home. */
.location-override-bar {
    margin: 0 0 1rem;
}
.location-override-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.location-override-form input[type="text"] {
    flex: 1 1 240px;
    min-width: 0;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: .9rem;
}
.location-override-form input[type="text"]:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}
.location-override-banner {
    flex: 1 0 100%;
    margin: .25rem 0 0;
    padding: .5rem .75rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    border-radius: 8px;
    font-size: .85rem;
    color: var(--ink);
}
.location-override-banner a {
    color: var(--accent-2);
    text-decoration: none;
    margin-left: .15rem;
}

/* ─── /near Phase 1 polish — unified location panel + summary tiles ─
   Replaces the two stacked .location-bar-near + .location-override-bar
   sections with one cohesive card. Sticky on scroll so radius tweaks
   don't require scrolling back up. */
.near-location-panel {
    position: sticky;
    top: 64px; /* clear the global nav strip */
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: .85rem 1rem;
    margin: 0 0 1rem;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 16px -10px rgba(0, 0, 0, .2);
}
.near-location-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.near-location-search-icon {
    font-size: .9rem;
    opacity: .65;
    padding-left: .35rem;
}
.near-location-search input[type="text"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: .9rem;
}
.near-location-search input[type="text"]:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
    background: var(--surface);
}
.near-location-locate { gap: .2rem; }
@media (max-width: 540px) {
    .near-location-locate-label { display: none; }
}
.near-location-current {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding-top: .15rem;
    font-size: .9rem;
    color: var(--ink-soft);
}
.near-location-current-icon { font-size: 1rem; }
.near-location-current-label strong { color: var(--ink); }
.near-location-radius {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}
.near-location-within { font-size: .8rem; color: var(--ink-mute); }
.near-location-radius select {
    padding: .3rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: .85rem;
    cursor: pointer;
}
.near-location-radius select:focus { outline: 2px solid var(--accent-soft); }
.near-location-reset {
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.near-location-reset:hover { text-decoration: none; }
.near-location-clear {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-mute);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.near-location-clear:hover { color: var(--ink); background: var(--surface-2); }
.near-location-empty-text { color: var(--ink-mute); font-size: .88rem; }

/* Saved-location switcher — sits below the current-location row in
   the panel. Chip per saved spot; active chip (matching current
   coords) is accent-tinted. Tiny × button on each chip deletes it. */
.near-saved-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    padding-top: .5rem;
    border-top: 1px dashed var(--line);
    margin-top: .15rem;
}
.near-saved-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-right: .15rem;
}
.near-saved-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.near-saved-chip:hover {
    text-decoration: none;
    color: var(--ink);
    border-color: var(--ink-soft);
}
.near-saved-chip.is-active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.near-saved-x {
    background: transparent;
    border: 0;
    color: var(--ink-mute);
    font-size: 1rem;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
    border-radius: 999px;
}
.near-saved-x:hover { color: var(--ink); }
.near-saved-chip-add { border-style: dashed; color: var(--ink-mute); }
.near-saved-chip-add:hover { color: var(--accent); border-color: var(--accent); }
.near-saved-add[open] .near-saved-chip-add { background: var(--surface-2); }
.near-saved-form {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    margin-left: .35rem;
}
.near-saved-form input[type="text"] {
    padding: .3rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    font-size: .82rem;
    width: 140px;
}
.near-saved-form input[type="text"]:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}

/* Summary tiles — at-a-glance counts under the location bar. Three
   clickable cards that jump-anchor to their section. */
.near-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 1.25rem;
}
.near-summary-tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .14s ease, transform .14s ease, background .14s ease;
}
.near-summary-tile:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none;
}
.near-summary-icon { font-size: 1.3rem; line-height: 1; }
.near-summary-num {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--ink);
}
.near-summary-label {
    font-size: .78rem;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
@media (max-width: 540px) {
    .near-summary { grid-template-columns: 1fr; }
    .near-summary-tile { flex-direction: row; align-items: center; gap: .75rem; }
    .near-summary-icon { font-size: 1.1rem; }
    .near-summary-num { font-size: 1.3rem; }
    .near-summary-label { flex: 1; }
}

/* Day-grouped play nights — Tonight / Tomorrow / This weekend /
   Later this week / Later. Each bucket gets a small eyebrow + count
   chip so the section reads as a chronological timeline. */
.events-near-group {
    margin-top: 1rem;
}
.events-near-group:first-child { margin-top: 0; }
.events-near-group-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-mute);
    margin: 0 0 .4rem;
    display: flex;
    align-items: baseline;
    gap: .4rem;
}
.events-near-group-count {
    font-size: .72rem;
    color: var(--ink-mute);
    font-weight: 600;
    letter-spacing: 0;
}

/* Filter chip row — sits above the grouped play nights. Two
   groups (time + social) separated by an inline divider. Each chip
   is a real link so deep-linking + back-button work. */
.near-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: 0;
}
.near-filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.near-filter-group + .near-filter-group {
    padding-left: .65rem;
    margin-left: .35rem;
    border-left: 1px solid var(--line);
}
.near-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-mute);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.near-filter-chip:hover {
    color: var(--ink);
    border-color: var(--ink-soft);
    text-decoration: none;
}
.near-filter-chip.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.near-filter-chip.is-active:hover { background: var(--accent-2); border-color: var(--accent-2); }
@media (max-width: 540px) {
    .near-filter-group + .near-filter-group {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
        flex-basis: 100%;
    }
}

/* SEO city landing pages (/stores-near + /stores-near/<slug>) ─────
   Directory grid for the index, intro + FAQ blocks for each city
   page. Reuses .near-map + .stores-near-grid styling for the page
   chrome — the only city-specific styles live here. */
.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.cities-card {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .14s ease, transform .14s ease;
}
.cities-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none;
}
.cities-card strong {
    font-family: var(--display);
    font-size: 1.05rem;
    line-height: 1.2;
}
.cities-card-meta {
    font-size: .8rem;
    color: var(--ink-mute);
    white-space: nowrap;
}

/* Intro paragraph above the map on city pages — readable text density
   for both human visitors and Googlebot. */
.cities-intro {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
}
.cities-intro p {
    margin: 0;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 72ch;
}

/* FAQ block — rendered as a real <dl> for proper semantics + matches
   the FAQPage JSON-LD next to it. Hover-reveal of answers stays an
   option for later; default state has everything open for SEO. */
.cities-faq {
    margin-top: 2rem;
}
.cities-faq h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.35rem;
    margin: 0 0 1rem;
}
.cities-faq-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.cities-faq-list dt {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .3rem;
    font-size: 1rem;
}
.cities-faq-list dd {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.55;
    max-width: 72ch;
}

/* Inline map preview — Leaflet-rendered map at the top of /near.
   Scroll-wheel zoom starts disabled (visitors scrolling the page
   shouldn't zoom the map by accident); click to enable, click-out
   to disable. The is-interactive class hides the "click to enable"
   affordance once it's on. */
.near-map-wrap {
    margin: 0 0 1rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
}
.near-map {
    height: 260px;
    width: 100%;
    background: var(--surface-2);
    position: relative;
}
.near-map:not(.is-interactive)::after {
    content: "Click to interact";
    position: absolute;
    inset: auto auto 8px 8px;
    z-index: 500; /* above Leaflet's panes */
    background: rgba(0, 0, 0, .55);
    color: #fff;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    pointer-events: none;
}

/* "Search this area" button — surfaces when the user pans the map
 * far enough from the original search center. Pinned top-center
 * above all Leaflet panes; slides in with a subtle bounce so users
 * notice it without it feeling intrusive. */
.near-map-search-here {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 600;
    transform: translateX(-50%) translateY(-4px);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, rgba(0,0,0,.2));
    background: var(--surface);
    color: var(--ink);
    font-size: .85rem;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .25s var(--ease-pop, cubic-bezier(.34,1.56,.64,1)), visibility .18s;
}
.near-map.has-search-here .near-map-search-here {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.near-map-search-here:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.near-map-search-here:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.near-map-search-here[hidden] {
    /* hidden=true sets display:none which would skip the transition;
     * the .has-search-here class controls visibility instead. The
     * [hidden] attribute is still toggled for the screen reader path,
     * but we override the display so the transition still plays. */
    display: inline-flex;
}
.near-map-search-here.is-loading {
    /* During the AJAX refresh, spin the ⟳ icon to signal work.
     * Pin the button visible regardless of the pan-distance
     * threshold (so it doesn't flicker away mid-fetch). */
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: none;
}
.near-map-search-here.is-loading > span:first-child {
    display: inline-block;
    animation: near-map-search-spin .8s linear infinite;
}
@keyframes near-map-search-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .near-map-search-here.is-loading > span:first-child { animation: none; }
}
/* Numbered pin — divIcon-rendered marker that matches the card-pin
   badge. Accent green with white number; drop shadow lifts off
   the map. */
.near-map-pin {
    background: transparent;
    border: none;
}
.near-map-pin span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: .85rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    cursor: pointer;
}

/* Numbered pin badge on the store card — corresponds to the map pin
   numbers above. Top-left corner, accent green with white number. */
.stores-near-card { position: relative; }
.stores-near-pin {
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: .72rem;
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    pointer-events: none;
}
/* Brief highlight when a map pin click jumps to a card. */
.stores-near-card.is-flash {
    animation: stores-near-flash 1.1s ease;
}
@keyframes stores-near-flash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    25%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
}
@media (max-width: 540px) {
    .near-map { height: 200px; }
}

/* Friends nearby — accent-tinted card that appears between the
   location panel and the summary tiles when ≥1 friend (mutual
   user-follow) has profile geo inside the current radius. Face
   pile + count + link through to the Friends tab. */
.near-friends-nearby {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    margin: 0 0 1rem;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 12px;
    flex-wrap: wrap;
}
.near-friends-icon { font-size: 1.1rem; color: var(--accent); }
.near-friends-text {
    font-size: .92rem;
    color: var(--ink);
    flex: 1;
    min-width: 0;
}
.near-friends-pile {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}
.near-friends-pile .near-friends-face {
    margin-left: -8px;
    border: 2px solid var(--surface);
    width: 32px;
    height: 32px;
}
.near-friends-pile .near-friends-face:first-child { margin-left: 0; }
.near-friends-more {
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    flex-shrink: 0;
}
.near-friends-more:hover { text-decoration: none; }
@media (max-width: 540px) {
    .near-friends-pile { order: 1; margin-left: 0; }
    .near-friends-more { order: 2; }
}

/* Friend RSVP badge — appears on event + convention cards when ≥1
   friend has RSVPed Going. Accent-tinted pill, slightly smaller
   than the body text so it reads as a sub-signal, not the title. */
.near-friend-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-top: .25rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    width: fit-content;
}
.near-friend-badge-con { margin-top: .5rem; }

/* Empty-state cards — replaces the bare "No X within Y miles" text
   with a card design that fits the rest of the page rhythm. */
.near-empty-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 12px;
}
.near-empty-card > div { flex: 1; min-width: 0; }
.near-empty-card strong { display: block; color: var(--ink); margin-bottom: .15rem; }
.near-empty-card p { margin: 0; color: var(--ink-mute); font-size: .88rem; }
.near-empty-icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}

/* No-location placeholder — three-column explainer */
.near-placeholder {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}
.near-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.near-placeholder article h3 {
    font-family: var(--display); font-weight: var(--display-w);
    font-size: 1rem; margin: .35rem 0 .35rem;
}
.near-placeholder article p {
    font-size: .9rem; color: var(--ink-soft); line-height: 1.45; margin: 0 0 .65rem;
}
.near-placeholder-icon { font-size: 1.6rem; }

/* Stores grid — card list with thumbnail + city + distance */
.stores-near-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem;
}
.stores-near-card { display: block; }
.stores-near-link {
    display: grid; grid-template-columns: 56px 1fr; gap: .75rem;
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
    align-items: center;
    transition: border-color .15s ease, transform .12s var(--ease-pop);
}
.stores-near-link:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none;
}
.stores-near-thumb {
    width: 56px; height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stores-near-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stores-near-thumb-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: hsl(var(--fb-hue), 45%, 65%);
    color: white;
    font-family: var(--display); font-weight: var(--display-w);
    font-size: .85rem;
}
.stores-near-thumb-fallback::before { content: attr(data-initials); }
.stores-near-body {
    display: flex; flex-direction: column; gap: .2rem; min-width: 0;
}
.stores-near-body strong {
    font-family: var(--display); font-weight: var(--display-w);
    font-size: .95rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stores-near-body .text-muted {
    font-size: .8rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stores-near-bottom {
    display: flex; gap: .55rem; align-items: center;
    font-size: .75rem; margin-top: .2rem;
}
.stores-near-rating { color: var(--soon); font-weight: 600; }
.stores-near-distance {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

/* "Looking for players" tease section */
.near-players-tease {
    padding: 1.5rem; border-radius: 12px;
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.25rem; flex-wrap: wrap;
}
.near-players-tease p {
    margin: 0; max-width: 56ch;
    color: var(--ink-soft); line-height: 1.55; font-size: .92rem;
}