/* The Processor Hub map (/processors/map). Global, not scoped: Leaflet draws the pins and popups itself, outside any component. Every colour is a
   token here; the three inspection colours match the pills on the List tab (USDA green, state blue, custom-exempt gold). A pin differs by SHAPE as well
   as colour (circle, square, diamond), so the key does not depend on telling colours apart. */
:root {
    --hub-map-ink:        #14261c;
    --hub-map-muted:      #4b5a51;
    --hub-map-accent:     #b9501f;
    --hub-map-surface:    #ffffff;
    --hub-map-line:       #d6d2c8;
    --hub-map-focus:      #1d4f86;
    --hub-map-usda:       #1b5e36;
    --hub-map-usda-bg:    #e4f1e8;
    --hub-map-state:      #1d4f86;
    --hub-map-state-bg:   #e3eefb;
    --hub-map-custom:     #7a5a00;
    --hub-map-custom-bg:  #fdf0c8;
    --hub-map-pin-edge:   #ffffff;
    --hub-map-saved:      #c0392b;
    --hub-map-shadow:     0 1px 4px rgba(17, 26, 20, .45);
    --hub-map-height:     min(72vh, 680px);
    --hub-map-height-sm:  62vh;
}

.hub-map-page { max-width: 1200px; }
.hub-map-head { text-align: center; padding: 1rem 0 .5rem; }
.hub-map-eyebrow { color: var(--hub-map-accent); font-weight: 700; letter-spacing: .12em; font-size: .8rem; }
.hub-map-head h1 { font-size: 2.2rem; font-weight: 800; color: var(--hub-map-ink); margin: .25rem 0 .5rem; }
.hub-map-sub { color: var(--hub-map-muted); max-width: 40rem; margin: 0 auto; }

.hub-map-filters { background: var(--hub-map-surface); border: 1px solid var(--hub-map-line); border-radius: 6px; margin: 1rem 0; }
.hub-map-filters > summary { cursor: pointer; padding: .7rem 1rem; font-weight: 700; color: var(--hub-map-ink); display: flex; align-items: center; gap: .5rem; }
.hub-map-filters > summary:focus-visible { outline: 3px solid var(--hub-map-focus); outline-offset: 2px; }
.hub-map-form { padding: 0 1rem 1rem; }
.hub-map-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem 1rem; align-items: end; }
.hub-map-grid label { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: .92rem; }
.hub-map-go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }

.hub-map-status { min-height: 1.6rem; margin: .5rem 0; color: var(--hub-map-muted); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.hub-map-zoom { font-weight: 700; color: var(--hub-map-accent); }

.hub-map-frame { position: relative; }
.hub-map { width: 100%; height: var(--hub-map-height); border: 1px solid var(--hub-map-line); border-radius: 6px; background: var(--hub-map-usda-bg); z-index: 0; }
.hub-map:focus-visible { outline: 3px solid var(--hub-map-focus); outline-offset: 2px; }
.hub-map-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; pointer-events: none; color: var(--hub-map-muted); z-index: 1; }

.hub-map-key { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: .75rem 0; font-size: .92rem; color: var(--hub-map-ink); }
.hub-map-key li { display: inline-flex; align-items: center; gap: .4rem; }

.hub-map-list { margin-top: 1rem; }
.hub-map-list > summary { cursor: pointer; font-weight: 700; color: var(--hub-map-ink); }
.hub-map-list > summary:focus-visible { outline: 3px solid var(--hub-map-focus); outline-offset: 2px; }
.hub-map-list ul { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hub-map-list li { background: var(--hub-map-surface); border: 1px solid var(--hub-map-line); border-radius: 6px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.hub-map-list a { color: var(--hub-map-ink); font-weight: 700; }
.hub-map-more { margin-top: .75rem; color: var(--hub-map-muted); }
.hub-map-more a { color: var(--hub-map-accent); }

/* Pins: the shape sits inside Leaflet's divIcon box. */
.hub-map-pin { background: transparent; border: 0; }
.hub-map-pin-shape { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 3px solid var(--hub-map-pin-edge); box-shadow: var(--hub-map-shadow); }
.hub-map-pin-usda .hub-map-pin-shape { background: var(--hub-map-usda); border-radius: 50%; }
.hub-map-pin-state .hub-map-pin-shape { background: var(--hub-map-state); border-radius: 3px; }
.hub-map-pin-custom-exempt .hub-map-pin-shape { background: var(--hub-map-custom); transform: rotate(45deg) scale(.78); border-radius: 3px; }
.leaflet-marker-icon.hub-map-pin:focus-visible { outline: 3px solid var(--hub-map-focus); outline-offset: 3px; border-radius: 4px; }

/* A saved processor (signed-in farm): the same shape and colour, with a heart badge on its upper right. */
.leaflet-marker-icon.hub-map-pin-saved { overflow: visible; }
.hub-map-pin-heart { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--hub-map-pin-edge);
    color: var(--hub-map-saved); display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; box-shadow: var(--hub-map-shadow); }
.hub-map-key-heart { display: inline-flex; width: 16px; justify-content: center; color: var(--hub-map-saved); }
.hub-map-list-saved { color: var(--hub-map-saved); font-size: .85rem; font-weight: 700; }

/* The legend uses the same shapes, small. */
.hub-map-key .hub-map-pin-shape { width: 16px; height: 16px; border-width: 2px; flex: none; }
.hub-map-key .hub-map-pin { display: inline-block; width: 16px; height: 16px; }

/* The popup. */
.hub-map-pop { min-width: 180px; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; color: var(--hub-map-ink); }
.hub-map-pop-name { font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.hub-map-pop-town, .hub-map-pop-species, .hub-map-pop-none { color: var(--hub-map-muted); font-size: .9rem; }
.hub-map-pop-phone a { color: var(--hub-map-ink); font-weight: 700; text-decoration: underline; }
.hub-map-pop-go { color: var(--hub-map-accent); font-weight: 700; text-decoration: none; margin-top: .2rem; }
.hub-map-pop-go:hover { text-decoration: underline; }
.hub-map-pop-fav { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--hub-map-line); background: var(--hub-map-surface); color: var(--hub-map-ink);
    border-radius: 999px; padding: .15rem .65rem; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hub-map-pop-fav .bi { color: var(--hub-map-saved); }
.hub-map-pop-fav-on { border-color: var(--hub-map-saved); }
.hub-map-pop-fav:focus-visible { outline: 3px solid var(--hub-map-focus); outline-offset: 2px; }
.hub-map-pop-fav[aria-busy="true"] { opacity: .6; cursor: progress; }
.hub-map-pop a:focus-visible { outline: 3px solid var(--hub-map-focus); outline-offset: 2px; }
.hub-map-pill { display: inline-block; font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; }
.hub-map-pill-usda { background: var(--hub-map-usda-bg); color: var(--hub-map-usda); }
.hub-map-pill-state { background: var(--hub-map-state-bg); color: var(--hub-map-state); }
.hub-map-pill-custom-exempt { background: var(--hub-map-custom-bg); color: var(--hub-map-custom); }

/* Phone: the map takes the full width of the screen, the filters fold into their disclosure. */
@media (max-width: 767.98px) {
    .hub-map-page { padding-left: 0; padding-right: 0; }
    .hub-map-head, .hub-map-status, .hub-map-key, .hub-map-list, .hub-map-more { padding-left: 16px; padding-right: 16px; }
    .hub-map-head h1 { font-size: 1.7rem; }
    .hub-map-filters { margin-left: 16px; margin-right: 16px; }
    .hub-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-map { height: var(--hub-map-height-sm); border-left: 0; border-right: 0; border-radius: 0; }
}