/* ==========================================================================
   Page sheet — Explore (the World map)

   Shared, deliberately, by two views that render the same screen:
       Views/Admin/World.cshtml   (inside _AdminLayout)
       Views/Home/World.cshtml    (inside _Layout)
   They used to carry a byte-for-byte copy of the same 87-line <style> block.
   One sheet, one source of truth.

   Load order: foodchaser-tokens.css → foodchaser.css → common.css → this.
   No literal colour, radius, size or duration — only --fc-* tokens.

   Everything Mapbox GL draws is a light-theme widget out of the box: white
   popups, white control groups, a white attribution strip. Section 3 below
   repoints all of it at the palette. Mapbox injects its controls into the map
   container rather than into `.fc-app`, so those selectors are unscoped.

   Owner: ViviScape LLC · Spec: FoodChaserBrandandMarketing/STYLE-GUIDE.md
   ========================================================================== */


/* ==========================================================================
   1  Layout — rail of spots beside the map

   The map is never the only route to its data (STYLE-GUIDE §2.6): the rail is
   the same list, keyboard reachable, and it survives a map that fails to load.
   ========================================================================== */

.fc-world {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: stretch;
    /* The map wants the rest of the window. The brand bar's height is owned by
       the layout, so this is measured from the viewport rather than guessed. */
    height: 82vh;
    min-height: 480px;
}

@media (max-width: 900px) {
    .fc-world {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 60vh;
        height: auto;
    }
}

.fc-world-rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--fc-raised);
    border-right: var(--fc-border) solid var(--fc-outline);
}

@media (max-width: 900px) {
    .fc-world-rail {
        border-right: 0;
        border-bottom: var(--fc-border) solid var(--fc-outline);
    }
}

.fc-world-head {
    display: flex;
    align-items: baseline;
    gap: var(--fc-space-2);
    padding: var(--fc-space-4) var(--fc-space-4) var(--fc-space-3);
    border-bottom: var(--fc-border) solid var(--fc-outline);
}

.fc-world-head h1 {
    font-family: var(--fc-font-display);
    font-size: var(--fc-text-heading);
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--fc-on);
    margin: 0;
}

.fc-world-count {
    font-size: var(--fc-text-caption);
    font-weight: 600;
    color: var(--fc-subtle);
    font-variant-numeric: tabular-nums;
}

.fc-world-filter {
    padding: var(--fc-space-3) var(--fc-space-4);
    border-bottom: var(--fc-border) solid var(--fc-outline);
}

/* The scrolling list. `min-height: 0` so it, and not the page, is what
   scrolls inside the grid row. */
.fc-world-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 900px) {
    .fc-world-list {
        max-height: 52vh;
    }
}

/* `.fc-empty` is built for a full-width panel; inside a 340px rail it needs
   its padding pulled in and its border dropped, since the rail already has one. */
.fc-world-list .fc-empty {
    padding: var(--fc-space-7) var(--fc-space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
}


/* ==========================================================================
   2  A spot in the rail

   The app's place-list card: 76px rounded-square thumbnail, name 16 semibold,
   category 13 muted, an 11px state chip, wait label in yellow.
   ========================================================================== */

.fc-spot {
    display: flex;
    align-items: flex-start;
    gap: var(--fc-space-3);
    width: 100%;
    padding: var(--fc-space-3) var(--fc-space-4);
    background: none;
    border: 0;
    border-bottom: var(--fc-border) solid var(--fc-outline);
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: background var(--fc-dur-state) var(--fc-ease);
}

.fc-spot:hover,
.fc-spot:focus-visible {
    background-color: var(--fc-overlay);
}

.fc-spot-thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: var(--fc-radius-chip);
    background-color: var(--fc-overlay);
    background-image: var(--fc-grad-photo);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    object-fit: cover;
    display: block;
}

.fc-spot-main {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: var(--fc-space-1);
    justify-items: start;
}

.fc-spot-name {
    font-family: var(--fc-font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: var(--fc-lh-snug);
    color: var(--fc-on);
    overflow-wrap: break-word;
}

.fc-spot-cat {
    font-size: var(--fc-text-caption);
    color: var(--fc-muted);
}

.fc-spot-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fc-space-1) var(--fc-space-3);
    font-size: var(--fc-text-micro);
    color: var(--fc-subtle);
    font-variant-numeric: tabular-nums;
}

/* The wait label is yellow: identity emphasis, never an action. */
.fc-spot-wait {
    font-size: var(--fc-text-micro);
    font-weight: 700;
    color: var(--fc-yellow);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   3  The map surface
   ========================================================================== */

.fc-world-map {
    position: relative;
    min-width: 0;
    background-color: var(--fc-bg);
}

#map {
    position: absolute;
    inset: 0;
    background-color: var(--fc-bg);
    overflow: hidden;
}

/* Wordmark bottom-right, above the map canvas but clear of the attribution. */
.fc-world-mark {
    position: absolute;
    right: var(--fc-space-5);
    bottom: var(--fc-space-8);
    z-index: 2;
    width: 168px;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
}


/* ==========================================================================
   4  Mapbox GL reconciliation

   mapbox-gl.css, the geocoder plugin sheet and the draw plugin sheet all load
   from the CDN after ours and all assume a light basemap. Unscoped, because
   Mapbox appends its controls to the map container.
   ========================================================================== */

/* -- Popups ------------------------------------------------------------- */
.mapboxgl-popup-content {
    background-color: var(--fc-raised);
    border: var(--fc-border) solid var(--fc-outline);
    border-radius: var(--fc-radius-card);
    padding: var(--fc-space-4);
    color: var(--fc-on);
    font-family: var(--fc-font-body);
    font-size: var(--fc-text-caption);
    line-height: var(--fc-lh-normal);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
    max-width: 260px;
}

.mapboxgl-popup-close-button {
    width: var(--fc-touch-target);
    height: var(--fc-touch-target);
    color: var(--fc-muted);
    background: transparent;
    border: 0;
    font-size: var(--fc-text-heading);
    line-height: 1;
    border-radius: var(--fc-radius-chip);
}

.mapboxgl-popup-close-button:hover,
.mapboxgl-popup-close-button:focus {
    background-color: var(--fc-overlay);
    color: var(--fc-on);
}

/* The tip is a bordered triangle: the fill has to match the card surface and
   the border has to match the outline, per anchor side. */
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: var(--fc-outline);
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: var(--fc-outline);
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: var(--fc-outline);
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: var(--fc-outline);
}

/* -- Popup contents ----------------------------------------------------- */
.fc-pop {
    display: grid;
    gap: var(--fc-space-2);
}

.fc-pop-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: var(--fc-radius-chip);
    background-image: var(--fc-grad-photo);
}

.fc-pop-name {
    font-family: var(--fc-font-display);
    font-size: var(--fc-text-body);
    font-weight: 700;
    line-height: var(--fc-lh-snug);
    color: var(--fc-on);
}

.fc-pop-cat {
    font-size: var(--fc-text-micro);
    font-weight: 700;
    letter-spacing: var(--fc-track-eyebrow);
    text-transform: uppercase;
    color: var(--fc-pink-soft);
}

.fc-pop-desc {
    font-size: var(--fc-text-caption);
    color: var(--fc-muted);
    line-height: var(--fc-lh-normal);
}

.fc-pop-where {
    font-size: var(--fc-text-micro);
    color: var(--fc-subtle);
}

/* -- Markers ------------------------------------------------------------ */
/* Mapbox draws its default marker as an inline SVG whose fill comes from the
   `color` option in JS. Pink is correct as a fill behind a non-text graphic
   (STYLE-GUIDE §2.3); the drop shadow keeps it legible over a dark basemap. */
.mapboxgl-marker svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.mapboxgl-marker:focus-visible svg {
    outline: 2px solid var(--fc-pink-soft);
    outline-offset: 2px;
}

/* -- Controls ----------------------------------------------------------- */
.mapboxgl-ctrl-group {
    background-color: var(--fc-raised);
    border: var(--fc-border) solid var(--fc-outline);
    border-radius: var(--fc-radius-control);
    box-shadow: none;
    overflow: hidden;
}

.mapboxgl-ctrl-group button {
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: 0;
}

.mapboxgl-ctrl-group button + button {
    border-top: var(--fc-border) solid var(--fc-outline);
}

.mapboxgl-ctrl-group button:hover,
.mapboxgl-ctrl-group button:focus {
    background-color: var(--fc-overlay);
}

.mapboxgl-ctrl-group button:focus-visible {
    outline: 2px solid var(--fc-pink-soft);
    outline-offset: -2px;
}

/* The control glyphs are dark-on-white PNG/SVG sprites. Inverting them is the
   only way to get light glyphs without shipping a replacement sprite. */
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    filter: invert(1) brightness(1.6);
}

.mapboxgl-ctrl-group button:disabled .mapboxgl-ctrl-icon {
    opacity: 0.4;
}

/* -- Attribution and logo ----------------------------------------------- */
.mapboxgl-ctrl-attrib {
    background-color: var(--fc-scrim);
    border-radius: var(--fc-radius-chip) 0 0 0;
}

.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-attrib-inner {
    font-family: var(--fc-font-body);
    font-size: var(--fc-text-micro);
    color: var(--fc-subtle);
}

.mapboxgl-ctrl-attrib a {
    color: var(--fc-subtle);
}

.mapboxgl-ctrl-attrib a:hover,
.mapboxgl-ctrl-attrib a:focus {
    color: var(--fc-on);
}

.mapboxgl-ctrl-attrib-button {
    filter: invert(1) brightness(1.6);
}

/* Mapbox's terms require the wordmark stay visible; muting it is allowed. */
.mapboxgl-ctrl-logo {
    opacity: 0.55;
}

.mapboxgl-ctrl-logo:hover,
.mapboxgl-ctrl-logo:focus {
    opacity: 1;
}

/* -- Geocoder plugin ---------------------------------------------------- */
.mapboxgl-ctrl-geocoder {
    background-color: var(--fc-raised);
    border: var(--fc-border) solid var(--fc-outline);
    border-radius: var(--fc-radius-full);
    box-shadow: none;
    font-family: var(--fc-font-body);
    min-width: 260px;
}

.mapboxgl-ctrl-geocoder input[type='text'] {
    height: var(--fc-touch-target);
    color: var(--fc-on);
    background: transparent;
    font-size: var(--fc-text-body);
}

.mapboxgl-ctrl-geocoder input[type='text']::placeholder {
    color: var(--fc-faint);
}

.mapboxgl-ctrl-geocoder input[type='text']:focus {
    outline: 2px solid var(--fc-pink-soft);
    outline-offset: -2px;
}

.mapboxgl-ctrl-geocoder--icon {
    fill: var(--fc-subtle);
}

.mapboxgl-ctrl-geocoder--button {
    background: transparent;
}

.mapboxgl-ctrl-geocoder .suggestions {
    background-color: var(--fc-overlay);
    border: var(--fc-border) solid var(--fc-outline);
    border-radius: var(--fc-radius-control);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.mapboxgl-ctrl-geocoder .suggestions > li > a {
    color: var(--fc-muted);
    background: transparent;
}

.mapboxgl-ctrl-geocoder .suggestions > .active > a,
.mapboxgl-ctrl-geocoder .suggestions > li > a:hover {
    background-color: rgba(232, 23, 123, 0.14);
    color: var(--fc-on);
}

.mapboxgl-ctrl-geocoder--suggestion-title {
    color: var(--fc-on);
}

.mapboxgl-ctrl-geocoder--suggestion-address {
    color: var(--fc-subtle);
}