/* ============================================================================
   CT Nest Atlas — board design system ("atlas")
   ----------------------------------------------------------------------------
   Hand-written rather than Tailwind utilities: the Tailwind sheet is
   precompiled, so new arbitrary classes silently no-op. Everything here is
   prefixed na- (page furniture), pc- (park card) or nr- (nest row).

   Look: a light, airy page with white rounded cards. Type colour is used as a
   hero band on each card, standing in for a photo. One accent (the brand
   orange-red) carries every primary action.
   ============================================================================ */

:root {
    --na-accent: #f2541b;
    --na-accent-2: #ff7a3d;
    --na-accent-soft: #fff1ea;
    --na-ink: #111827;
    --na-mute: #6b7280;
    --na-faint: #9ca3af;
    --na-line: #e8ebf0;
    --na-card: #fff;
    --na-shadow: 0 10px 30px -14px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .04);
    --na-shadow-float: 0 12px 28px -10px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06);
    /* The parts of the screen the phone keeps for itself: the status bar and
       Dynamic Island at the top, the home indicator at the bottom. Both are 0 in
       a browser tab; opened from the Home Screen the page runs under them. */
    --na-safe-t: env(safe-area-inset-top, 0px);
    --na-safe-b: env(safe-area-inset-bottom, 0px);
    /* How far a pop-up keeps from the top and bottom of the screen. */
    --na-pop-t: calc(var(--na-safe-t) + 16px);
    --na-pop-b: max(16px, var(--na-safe-b));
}

/* The site has one theme, and it is light. Declaring that stops Chrome and
   Samsung Internet on Android from applying their own automatic dark mode,
   which recolours a light page unpredictably. Android also flashes a blue
   rectangle over anything tapped, which looks wrong on round pills; the buttons
   here give their own pressed feedback instead. */
:root { color-scheme: only light; -webkit-tap-highlight-color: transparent; }

/* Soft sky wash behind the top of every page, as in the reference. */
[data-view] { background: linear-gradient(180deg, #e6eef9 0, #f1f4f8 260px, #f4f6f9 100%); min-height: 100vh; }
/* Opacity-only entrance: a transform here would become the containing block for
   the map screen's position:fixed layers while it runs, and they would jump. */
@keyframes naFade { from { opacity: 0; } to { opacity: 1; } }
#view-nests.view-active { animation: naFade .25s ease-out; }

/* ===== Search pill + round filter button ===== */
.na-search { display: flex; align-items: center; gap: 10px; }
.na-search__pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 26px; background: var(--na-card); box-shadow: var(--na-shadow-float); color: var(--na-mute); text-align: left; cursor: pointer; }
.na-search__pill svg { flex: none; color: var(--na-ink); }
.na-search__text { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-search__badge { flex: none; align-items: center; gap: 3px; padding: 4px 7px 4px 9px; border-radius: 999px; background: var(--na-ink); color: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.na-search__filter { flex: none; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--na-accent-2), var(--na-accent)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -8px rgba(242, 84, 27, .65); cursor: pointer; transition: transform .12s; }
.na-search__filter:active { transform: scale(.94); }
#search-panel { box-shadow: var(--na-shadow-float); border-radius: 22px; }

/* ===== Quick type chips (horizontal scroll) ===== */
.na-chips { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
.na-chips:empty { display: none; }
.na-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 6px; border-radius: 19px; background: var(--na-card); color: var(--na-mute); font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px -8px rgba(15, 23, 42, .3); cursor: pointer; white-space: nowrap; scroll-snap-align: start; transition: background .15s, color .15s; }
.na-chip__dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.na-chip--all .na-chip__dot { background: #eef0f4; color: var(--na-mute); }
.na-chip.is-on { color: var(--na-ink); font-weight: 800; box-shadow: 0 0 0 2px var(--na-ink), 0 4px 14px -8px rgba(15, 23, 42, .3); }
.na-chip--all.is-on { box-shadow: 0 4px 14px -8px rgba(15, 23, 42, .3); }
.na-chip--all.is-on .na-chip__dot { background: var(--na-accent); color: #fff; }

/* ===== Type badge =====
   One look for a type wherever it appears (beside a species, on a chip, in the
   filter panel): the type colour as a soft top-lit disc with the white glyph.
   --tb is the type colour; the flat fill is the fallback where color-mix isn't
   supported. */
.tb { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--tb, #9ca3af); background: linear-gradient(155deg, color-mix(in srgb, var(--tb, #9ca3af) 70%, #fff) 0%, var(--tb, #9ca3af) 50%, color-mix(in srgb, var(--tb, #9ca3af) 80%, #000) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 3px rgba(15, 23, 42, .28); }
.tb img { width: 62%; height: 62%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2)); }
/* The filter panel marks the chosen type with Tailwind's ring, which is also a
   box-shadow and would be replaced by the badge's own. Draw it here instead. */
.tb.ring-2 { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--na-ink); }

/* ===== Map view / List view pill ===== */
.na-toggle-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; position: relative; }
.na-toggle { display: inline-flex; padding: 4px; border-radius: 26px; background: var(--na-card); box-shadow: var(--na-shadow-float); }
.na-toggle button { height: 40px; padding: 0 20px; border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--na-ink); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.na-toggle button.is-on { background: linear-gradient(135deg, var(--na-accent-2), var(--na-accent)); color: #fff; box-shadow: 0 6px 14px -6px rgba(242, 84, 27, .7); }
.na-round { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--na-card); color: var(--na-ink); display: none; align-items: center; justify-content: center; box-shadow: var(--na-shadow-float); cursor: pointer; }
.na-round.is-on { background: var(--na-ink); color: #fff; }
#map-style-btn { position: absolute; right: 0; }
/* The locate button: pulses while the phone looks for a fix, then turns the blue
   of the dot it has put on the map. */
#map-locate-btn { position: absolute; right: 54px; }
#map-locate-btn.is-live { color: #2563eb; }
#map-locate-btn.is-busy svg { animation: naLocating 1s ease-in-out infinite; }
@keyframes naLocating { 50% { opacity: .2; } }
.nest-you.is-live { animation: naYouPulse 2.2s ease-out infinite; }
@keyframes naYouPulse { from { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); } to { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); } }
@media (prefers-reduced-motion: reduce) {
    #map-locate-btn.is-busy svg { animation: none; opacity: .4; }
    .nest-you.is-live { animation: none; }
}

/* Phones: the pill would cost a whole row of a small screen, so one button
   above the tab bar switches views instead. It names where it takes you. */
.na-fab { display: none; position: fixed; z-index: 25; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 120px); transform: translateX(-50%); height: 44px; padding: 0 18px 0 16px; border-radius: 22px; background: var(--na-ink); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 14px 28px -10px rgba(15, 23, 42, .6); cursor: pointer; transition: opacity .2s, transform .2s; }
.na-fab:active { transform: translateX(-50%) scale(.95); }
.na-fab span { display: none; align-items: center; gap: 8px; height: 100%; }
#view-nests.is-map .na-fab__list, #view-nests:not(.is-map) .na-fab__map { display: inline-flex; }
/* A docked park card owns the bottom of the map; the button steps aside. */
#view-nests.is-map.has-sheet .na-fab { opacity: 0; pointer-events: none; transform: translate(-50%, 10px); }
@media (max-width: 640px) {
    .na-fab { display: block; }
    .na-toggle { display: none; }
    /* Only the two round map buttons are left of the row: hang them under the
       chips, one above the other. */
    .na-toggle-row { position: absolute; top: 100%; right: 12px; margin-top: 8px; flex-direction: column; }
    #map-style-btn, #map-locate-btn { position: static; }
}

/* ===== List: section heading + cards ===== */
.na-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 12px; }
.na-section h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--na-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-section__loc { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-align: left; cursor: pointer; }
.na-section__loc svg { flex: none; color: var(--na-mute); }
.na-section span { flex: none; font-size: 13px; font-weight: 600; color: var(--na-faint); }
.na-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.na-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--na-accent-soft); color: #9a3412; font-size: 12px; line-height: 1.45; }
.na-notice svg { flex: none; margin-top: 1px; color: var(--na-accent); }
.na-notice a { font-weight: 800; text-decoration: underline; }
.na-empty { text-align: center; padding: 48px 16px; color: var(--na-faint); font-size: 14px; }
.na-empty button { margin-top: 10px; color: var(--na-accent); font-weight: 700; }

/* ===== Park card ===== */
.pc { background: var(--na-card); border-radius: 28px; padding: 8px; box-shadow: var(--na-shadow); }
.pc__hero { position: relative; isolation: isolate; overflow: hidden; height: 156px; border-radius: 22px; }
.pc__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pc__mark { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('../nest-atlas-icon.svg') no-repeat right -18px bottom -22px / 128px; opacity: .12; }
.pc__tag { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 14px; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 600; }
.pc__tag--ok { background: rgba(16, 185, 129, .9); }
.pc__tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 8px; }
.pc__tool { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--na-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -4px rgba(2, 6, 23, .5); cursor: pointer; transition: transform .12s; }
.pc__tool:active { transform: scale(.92); }
.pc__tool--danger { color: #dc2626; }
.pc__sprites { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; cursor: pointer; }
.pc__sprites img { width: 128px; height: 128px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(2, 6, 23, .45)); transition: transform .3s; }
.pc__sprites img + img { width: 84px; height: 84px; margin-left: -26px; margin-bottom: 2px; opacity: .95; }
.pc:hover .pc__sprites img:first-child { transform: translateY(-3px) scale(1.03); }
/* Nothing reported: the band carries one centred invitation, with no tag. */
.pc__sprites--empty { align-items: center; padding-bottom: 0; }
.pc__add { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff; }
.pc__add > span { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center; }
.pc__add b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.pc__add small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .82); }

.pc__body { padding: 14px 10px 8px; }
.pc__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pc__title h3 { min-width: 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--na-ink); }
.pc__dist { flex: none; font-size: 12px; font-weight: 600; color: var(--na-faint); white-space: nowrap; }
.pc__dist b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--na-ink); margin-right: 2px; }
.pc__addr { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; max-width: 100%; font-size: 13px; color: var(--na-mute); }
.pc__addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc__addr:hover { color: var(--na-ink); }
/* A park's own heads-up from parks.json ("note"): an entrance fee, say. Amber,
   so it reads as worth knowing rather than as a warning. */
.pc__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 14px; background: #fff6e5; color: #7a4a05; font-size: 12.5px; line-height: 1.45; }
.pc__note svg { flex: none; margin-top: 2px; color: #d97706; }
.pc__note a, .pc__note button { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pc__note button { padding: 0; font-size: inherit; line-height: inherit; cursor: pointer; }
.pc__stats { display: flex; align-items: center; gap: 6px; margin-top: 12px; overflow: hidden; }
.pc__pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 16px; background: #f4f6f9; color: var(--na-ink); font-size: 13px; flex: 0 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; }
.pc__pill .pogo-icon { width: 14px; height: 14px; color: var(--na-mute); }
.pc__pill small { font-size: 11px; font-weight: 500; color: var(--na-mute); }
.pc__pill--end { margin-left: auto; background: #fff; box-shadow: inset 0 0 0 1px var(--na-line); }

.pc__nests { margin-top: 12px; border-radius: 20px; background: #f7f8fa; overflow: hidden; }
.nr { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.nr + .nr { border-top: 1px solid var(--na-line); }
.nr__sprite { position: relative; flex: none; width: 50px; height: 50px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--na-line); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nr__sprite img { width: 44px; height: 44px; object-fit: contain; }
.nr__flag { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #10b981; color: #fff; font: 800 10px/18px system-ui, sans-serif; text-align: center; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #f7f8fa; }
.nr__info { flex: 1; min-width: 0; cursor: pointer; }
.nr__name { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; text-transform: capitalize; color: var(--na-ink); line-height: 1.2; }
.nr__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr--ok .nr__name > span:first-child { color: #047857; }
.nr__types { display: inline-flex; gap: 4px; flex: none; }
.nr__meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 11px; color: var(--na-faint); }
.nr__meta span { display: inline-flex; align-items: center; gap: 3px; }
.nr__by { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 10px; color: #b45309; }
.nr__act { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.nr__btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 16px; background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s, transform .1s; }
.nr__btn:hover { background: #d1fae5; }
.nr__btn:active { transform: scale(.95); }
.nr__btn[disabled] { background: #f1f5f9; color: #64748b; cursor: default; }
.nr__btn--admin { background: #eff6ff; color: #1d4ed8; }
.nr__btn--del { background: #fef2f2; color: #dc2626; padding: 0 9px; }
.nr__gone { font-size: 10px; color: var(--na-faint); text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.nr__gone:hover { color: #dc2626; }
.nr__gone--set { color: #dc2626; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; cursor: default; }
.nr--empty { width: 100%; text-align: left; cursor: pointer; color: var(--na-mute); }
.nr--empty .nr__sprite { border: 2px dashed #cbd5e1; box-shadow: none; background: transparent; color: var(--na-faint); }
.nr--empty .nr__name { text-transform: none; font-size: 14px; }

.pc__last { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; font-size: 11px; color: var(--na-faint); }
.pc__last b { font-weight: 700; color: var(--na-mute); text-transform: capitalize; }
.pc__actions { display: flex; gap: 8px; margin-top: 12px; }
.pc__btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 23px; background: #f4f6f9; color: var(--na-ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .1s, background .15s; }
.pc__btn:hover { background: #eceff3; }
.pc__btn:active { transform: scale(.97); }
.pc__btn--go { background: linear-gradient(135deg, var(--na-accent-2), var(--na-accent)); color: #fff; box-shadow: 0 10px 20px -10px rgba(242, 84, 27, .8); }
.pc__btn--go:hover { background: linear-gradient(135deg, var(--na-accent-2), var(--na-accent)); filter: brightness(1.05); }

/* ===== The board: one fixed screen, two layers =====
   The nest board never scrolls the page. The map is the back layer; the list is
   a full-height layer that slides up over it; the search, chips and view switch
   float in the same place over both. Switching views therefore only moves the
   list. .is-map on the section means the list is down and the map is showing.
   overscroll-behavior: none stops Android's pull-to-refresh from reloading the
   page when someone drags down on the search bar, the chips or a park card. */
html:has(#view-nests.view-active), html:has(#view-nests.view-active) body { overflow: hidden; overscroll-behavior: none; }

#board-top { position: fixed; z-index: 30; left: 0; right: 0; top: calc(max(.5rem, env(safe-area-inset-top)) + 56px); padding: 0 12px; pointer-events: none; }
#board-top > * { max-width: 42rem; margin-left: auto; margin-right: auto; pointer-events: auto; }
/* The filter panel drops down over the chips and the board, rather than pushing
   them down the screen. */
#controls-bar { position: relative; z-index: 2; }
#search-panel { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); overflow-y: auto; }
#loading-spinner { position: fixed; z-index: 25; left: 0; right: 0; top: 45%; }
#view-nests.is-map .na-round { display: flex; }

/* Safari on an iPhone keeps two parts of the screen for itself: the strip behind
   the clock, and the area around its toolbar. A fixed layer is clipped at the
   edges of the page area between them (reaching past those edges was tried, and
   Safari does not draw it), and what Safari paints there instead is the page's
   own background colour. So on the map the page takes the map's base colour,
   and those two parts read as more map rather than as a pale border.
   #efefef is the land colour of the light-grey tiles; the dark green is the
   average of the satellite imagery over Connecticut. The script also moves
   <meta name="theme-color">, which is what Android and older iPhones tint
   their bars with. Added to the Home Screen the site has no browser bars at
   all, and the map really does fill the screen. */
html:has(#view-nests.view-active.is-map), html:has(#view-nests.view-active.is-map) body, #view-nests.is-map { background: #efefef; }
html:has(#view-nests.view-active.is-map.is-sat), html:has(#view-nests.view-active.is-map.is-sat) body, #view-nests.is-map.is-sat { background: #2f4028; }
/* The pale fade under the status bar would sit on top of the map as a band. */
html:has(#view-nests.view-active.is-map) .top-scrim { display: none; }
/* Installed to the Home Screen, the page runs under the status bar, and iOS 26
   lays its own frosted blur over the top of it: the status bar plus about 35pt
   more, enough to smear the site's top bar. The phone leaves that blur off when
   a fixed, full-width box in ONE SOLID COLOUR covers the top edge, and tints the
   status bar with that colour instead; a gradient or a see-through colour there
   brings the blur back. So in the app the status bar's strip is filled with the
   colour of whatever is beneath it: the map's land colour, the satellite green,
   or the page's own pale wash. It sits above every pop-up, so no state of the
   site hands the top edge back to the blur. html.is-app is set by a script in
   the page's head (and js/standalone.js); in a browser tab the strip has no
   height at all. This is built on other developers' reports of how iOS behaves
   and has to be confirmed on a real iPhone. */
html.is-app .top-scrim, html.is-app:has(#view-nests.view-active.is-map) .top-scrim { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 95; height: var(--na-safe-t); background: #e6eef9; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
html.is-app:has(.pp-page) .top-scrim { background: #f4f6f9; }
html.is-app:has(#view-nests.view-active.is-map) .top-scrim { background: #efefef; }
html.is-app:has(#view-nests.view-active.is-map.is-sat) .top-scrim { background: #2f4028; }
/* The first-visit welcome screen covers the map with the page's wash. */
html.is-app.welcome-first .top-scrim, html.is-app.welcome-first:has(#view-nests.view-active.is-map) .top-scrim { background: #e6eef9; }

/* Back layer. */
#map-area { position: fixed; inset: 0; z-index: 10; background: #efefef; }
#view-nests.is-sat #map-area { background: #2f4028; }
#nest-map { width: 100%; height: 100%; z-index: 0; }

/* Front layer. --na-stack is the bottom edge of the floating chrome (set from
   JS): the list scrolls in the space below it and fades out as it reaches it. */
#list-layer { position: fixed; inset: 0; z-index: 20; background: linear-gradient(180deg, #e6eef9 0, #f1f4f8 260px, #f4f6f9 100%); box-shadow: 0 -18px 40px -10px rgba(15, 23, 42, .25); }
#view-nests.is-map #list-layer { transform: translateY(100%); visibility: hidden; }
/* .na-ready is added after the first layout, so the page doesn't open with the
   list sliding away. Up eases out; down eases in and leaves a touch quicker. */
#view-nests.na-ready #list-layer { transition: transform .38s cubic-bezier(.22, .8, .24, 1), visibility 0s; }
#view-nests.na-ready.is-map #list-layer { transition: transform .3s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .3s; }
#list-scroll { position: absolute; top: var(--na-stack, 180px); right: 0; bottom: 0; left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 16px calc(env(safe-area-inset-bottom) + 130px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
#list-scroll > * { max-width: 42rem; margin-left: auto; margin-right: auto; }

/* Leaflet furniture, pushed clear of the floating chrome. The zoom buttons only
   exist where there is a mouse or trackpad (touch screens pinch). In the narrow
   layout the satellite and locate buttons hang under the chips in the same
   top-right corner, so there the zoom buttons sit beneath them — and step aside
   for an open park card, which would otherwise cover half of them. */
#nest-map .leaflet-top { top: calc(var(--na-stack, 240px) + 8px); }
#nest-map .leaflet-top .leaflet-control { margin-top: 0; }
@media (max-width: 640px) {
    #nest-map .leaflet-top { top: calc(var(--na-stack, 240px) + 114px); }
    #view-nests.has-sheet #nest-map .leaflet-control-zoom { display: none; }
}
#nest-map .leaflet-bottom { bottom: calc(env(safe-area-inset-bottom) + 84px); }
#nest-map .leaflet-control-zoom { border: 0; margin-right: 12px; box-shadow: var(--na-shadow-float); border-radius: 22px; overflow: hidden; }
#nest-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; color: var(--na-ink); border: 0; font-size: 20px; }
#nest-map .leaflet-control-attribution { margin: 0 0 0 12px; padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, .8); font-size: 10px; }

/* Only speaks up when the filters leave the map empty. */
.na-hint { position: fixed; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 24px); padding: 10px 18px; border-radius: 20px; background: var(--na-card); box-shadow: var(--na-shadow-float); font-size: 13px; font-weight: 600; color: var(--na-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-hint:empty { display: none; }

/* ===== The selected park's card =====
   It sits exactly where the tab bar is, and the tab bar steps aside while it is
   open (.has-sheet on the section, set by the script). Opening, the card is
   revealed upward from a bar-sized strip at the bottom; closing, it drops back
   into that strip as the tab bar returns — so the two read as one object.
   The card may grow until it would crowd the selected pin: it leaves 96px
   between the floating chrome (--na-stack) and its own top edge. */
#park-sheet { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(.75rem, env(safe-area-inset-bottom)); max-width: 42rem; margin: 0 auto; }
.pc--sheet { max-height: calc(100vh - var(--na-stack, 180px) - 96px - max(.75rem, env(safe-area-inset-bottom))); max-height: min(calc(100dvh - var(--na-stack, 180px) - 96px - max(.75rem, env(safe-area-inset-bottom))), 640px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; box-shadow: 0 22px 50px -14px rgba(15, 23, 42, .5); }
.pc--sheet .pc__hero { height: 92px; }
.pc--sheet .pc__last { display: none; }
.pc--sheet .pc__sprites img { width: 88px; height: 88px; }
.pc--sheet .pc__sprites img + img { width: 64px; height: 64px; margin-left: -20px; }
.pc--sheet .pc__add { flex-direction: row; gap: 12px; text-align: left; }
.pc--sheet .pc__add > span { width: 40px; height: 40px; }
.pc--sheet .pc__body { padding-top: 10px; padding-bottom: 0; }
/* Directions and Report never scroll out of reach: if a park has more nests than
   the card has room for, the rows scroll underneath this pinned row. */
.pc--sheet .pc__actions { position: sticky; bottom: 0; z-index: 3; margin-top: 2px; padding: 10px 0 16px; background: linear-gradient(to top, #fff 72%, rgba(255, 255, 255, 0)); }

/* Motion. The clip starts as the bottom 64px of the card — the tab bar's shape —
   and ends well outside the card, so its shadow is let back in as it grows. */
@keyframes naSheetRise {
    from { clip-path: inset(calc(100% - 64px) 0 0 0 round 32px); }
    to   { clip-path: inset(-64px -64px -64px -64px round 92px); }
}
@keyframes naSheetFall {
    from { clip-path: inset(-64px -64px -64px -64px round 92px); opacity: 1; }
    65%  { opacity: 1; }
    to   { clip-path: inset(calc(100% - 64px) 0 0 0 round 32px); opacity: 0; }
}
@keyframes naSheetIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes naSheetSwap { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pc--sheet.pc--rise { animation: naSheetRise .44s cubic-bezier(.33, .6, .2, 1) backwards; }
/* The strip starts as plain white, like the bar it grows from; the card's
   contents arrive a beat later. */
.pc--sheet.pc--rise > * { animation: naSheetIn .28s ease-out .12s backwards; }
.pc--sheet.pc--swap { animation: naSheetSwap .22s ease-out; }
.pc--sheet.is-leaving { animation: naSheetFall .3s cubic-bezier(.5, 0, .7, .4) forwards; pointer-events: none; }

/* The tab bar gives its place to an open card, and takes it back a moment after
   the card starts to drop. */
nav[aria-label="Primary"] { transition: opacity .22s ease .14s, visibility 0s; }
html:has(#view-nests.view-active.is-map.has-sheet) nav[aria-label="Primary"] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .14s ease, visibility 0s linear .14s; }

@media (prefers-reduced-motion: reduce) {
    .pc--sheet.pc--rise, .pc--sheet.pc--rise > *, .pc--sheet.pc--swap, .pc--sheet.is-leaving, #view-nests.view-active { animation: none; }
    .pc__sprites img, .na-fab, nav[aria-label="Primary"] { transition: none; }
    #view-nests.na-ready #list-layer, #view-nests.na-ready.is-map #list-layer { transition: none; }
}

/* Short screens — small Android phones, or any phone or laptop window with
   little height. An open park card leaves only a sliver of map there, so the
   type chips step aside while a card is open and give the selected pin room. */
@media (max-height: 700px) {
    #view-nests.is-map.has-sheet #quick-chips { display: none; }
}


/* ============================================================================
   Shared furniture — Report, Guide, the filter panel and the modals
   ============================================================================ */

/* ===== Page heading ===== */
.na-pagehead { margin: 10px 2px 18px; }
.na-pagehead h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--na-ink); }
.na-pagehead p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--na-mute); }
.na-eyebrow { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; margin-bottom: 12px; border-radius: 14px; background: var(--na-card); box-shadow: 0 4px 14px -8px rgba(15, 23, 42, .3); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--na-mute); }
.na-eyebrow .pogo-icon { width: 14px; height: 14px; color: var(--na-accent); }

/* ===== Cards and headings inside them ===== */
.na-card { background: var(--na-card); border-radius: 28px; padding: 18px; box-shadow: var(--na-shadow); }
.na-stack > * + * { margin-top: 16px; }
.na-h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--na-ink); }
.na-h2__icon { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--na-accent-soft); color: var(--na-accent); display: flex; align-items: center; justify-content: center; }
.na-h2__icon .pogo-icon { width: 18px; height: 18px; }
.na-prose { font-size: 14px; line-height: 1.65; color: #4b5563; }
.na-prose strong { color: var(--na-ink); }
.na-fine { font-size: 12px; line-height: 1.5; color: var(--na-faint); }

/* A tile inside a card: one point in a short list. */
.na-tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 20px; background: #f7f8fa; }
.na-tile + .na-tile { margin-top: 10px; }
.na-tile__icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -6px rgba(15, 23, 42, .35); }
.na-tile__icon .pogo-icon { width: 17px; height: 17px; }
.na-tile b { display: block; margin-bottom: 3px; font-size: 14px; font-weight: 700; color: var(--na-ink); }
.na-tile p, .na-tile span { font-size: 13.5px; line-height: 1.5; color: #4b5563; }

/* ===== Callouts ===== */
.na-note { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 20px; background: #e9f0fa; color: #40516b; font-size: 12.5px; line-height: 1.5; }
.na-note > svg { flex: none; margin-top: 1px; color: #5b7bb0; }
.na-note b, .na-note strong { color: #1f2a3d; }
.na-note--warm { background: var(--na-accent-soft); color: #8a3410; }
.na-note--warm > svg { color: var(--na-accent); }
.na-note--warm b, .na-note--warm strong { color: #6b2408; }
.na-note--ok { background: #e8f8f0; color: #065f46; font-size: 14px; }
.na-note--ok > svg { color: #10b981; }
.na-note--ok a { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 700; color: #047857; }
.na-note ul { margin-top: 6px; }
.na-note li + li { margin-top: 6px; }

/* ===== Form fields ===== */
.na-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--na-ink); }
.na-label span { font-weight: 500; color: var(--na-faint); }
.na-label .na-req { color: var(--na-accent); font-weight: 700; }
.na-input { display: block; width: 100%; height: 50px; padding: 0 16px; border-radius: 16px; background: #f4f6f9; border: 1px solid transparent; color: var(--na-ink); font-size: 14px; font-weight: 500; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.na-input::placeholder { color: var(--na-faint); font-weight: 400; }
.na-input:focus { background: #fff; border-color: var(--na-accent); box-shadow: 0 0 0 4px rgba(242, 84, 27, .13); }
.na-input--icon { padding-left: 40px; }
textarea.na-input { height: auto; padding: 13px 16px; line-height: 1.5; resize: none; }
select.na-input { -webkit-appearance: none; appearance: none; padding-right: 40px; font-weight: 600; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.na-input[readonly] { background: #eceff3; color: var(--na-mute); cursor: not-allowed; }
.na-field-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .na-field-row { grid-template-columns: 1fr 1fr; } }

/* ===== Buttons ===== */
.na-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 25px; background: #f4f6f9; color: var(--na-ink); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform .1s, filter .15s, background .15s; }
.na-btn:hover { background: #eceff3; }
.na-btn:active { transform: scale(.98); }
.na-btn--primary { background: linear-gradient(135deg, var(--na-accent-2), var(--na-accent)); color: #fff; box-shadow: 0 12px 22px -12px rgba(242, 84, 27, .85); }
.na-btn--primary:hover { background: linear-gradient(135deg, var(--na-accent-2), var(--na-accent)); filter: brightness(1.05); }
.na-btn--white { background: #fff; color: var(--na-ink); }
.na-btn--white:hover { background: #fff; filter: brightness(.97); }
.na-btn--glass { background: rgba(255, 255, 255, .2); color: #fff; }
.na-btn--glass:hover { background: rgba(255, 255, 255, .3); }
.na-btn--full { display: flex; width: 100%; }
.na-btn--sm { height: 42px; padding: 0 16px; font-size: 13px; }
.na-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
.na-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--na-accent); }
.na-link:hover { text-decoration: underline; }

/* Small filter pills (towns in the filter panel). */
.na-pill { height: 34px; padding: 0 14px; border-radius: 17px; background: #f4f6f9; color: #374151; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.na-pill:hover { background: #eceff3; }
.na-pill.is-on { background: var(--na-ink); color: #fff; }

/* A full-width version of the Map/List switch (Report: update vs add). */
.na-toggle--wide { display: flex; width: 100%; margin-bottom: 16px; }
.na-toggle--wide button { flex: 1; height: 44px; border-radius: 22px; padding: 0 12px; }

/* ===== Species picker ===== */
.na-pickgrid { background: #f4f6f9; border-radius: 20px; padding: 8px; }
.sp { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 8px 4px 7px; border-radius: 16px; background: #fff; border: 2px solid transparent; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.sp:active { transform: scale(.96); }
.sp img { width: 40px; height: 40px; object-fit: contain; }
.sp span { display: block; width: 100%; margin-top: 5px; font-size: 9.5px; font-weight: 700; text-align: center; text-transform: capitalize; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp.is-on { border-color: var(--na-accent); background: var(--na-accent-soft); }
/* A species an admin has marked unlikely to nest: still there, a step back. */
.sp--unlikely:not(.is-on) img { opacity: .45; }
.sp.is-on span { color: #9a3412; }
.na-pickgrid__none { grid-column: 1 / -1; padding: 16px 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--na-faint); }
.na-picked { margin-top: 8px; font-size: 13px; color: var(--na-mute); }
.na-picked b { text-transform: capitalize; color: var(--na-accent); }

/* ===== Filter panel (board) ===== */
.na-panel { background: var(--na-card); border-radius: 24px; padding: 16px; }
.na-panel hr { border: 0; border-top: 1px solid var(--na-line); margin: 0; }

/* ===== Call-to-action band (Guide) ===== */
.na-cta { position: relative; overflow: hidden; border-radius: 28px; padding: 24px 20px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--na-accent-2), var(--na-accent)); box-shadow: 0 18px 34px -18px rgba(242, 84, 27, .8); }
.na-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('../nest-atlas-icon.svg') no-repeat right -20px bottom -26px / 140px; opacity: .14; }
.na-cta > * { position: relative; z-index: 1; }
.na-cta h2 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.na-cta p { max-width: 28rem; margin: 6px auto 16px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.na-cta__btns { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
@media (min-width: 560px) { .na-cta__btns { flex-direction: row; } }

/* Countdown block inside the Guide's rotation card. */
.na-count { margin-top: 14px; padding: 16px; border-radius: 20px; background: var(--na-accent-soft); }
.na-count__label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a3412; }
.na-count__timer { margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--na-accent); }
.na-count__date { margin-top: 2px; font-size: 12px; color: #7c4a33; }
.na-count__date b { font-weight: 700; color: #5c2c12; }
.na-count .na-link { margin-top: 12px; }

.na-foot { padding: 20px 8px 8px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--na-faint); }
/* ===== Standalone pages (privacy.html, contact.html, thanks.html) =====
   Plain reading pages away from the map. The Back button stays in reach however
   far down the page you are. */
.pp-bar { position: sticky; top: max(12px, env(safe-area-inset-top)); z-index: 5; }
.pp-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--na-card); box-shadow: var(--na-shadow); font-size: 14px; font-weight: 700; color: var(--na-ink); }
.pp-page section[id] { scroll-margin-top: 72px; }
.pp-page .na-prose a { font-weight: 700; color: var(--na-ink); text-decoration: underline; text-underline-offset: 2px; }
.pp-page .na-prose p + p { margin-top: 10px; }
.pp-list { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.pp-list li { margin-top: 6px; }
.pp-h3 { margin: 16px 0 4px; font-size: 14px; font-weight: 800; color: var(--na-ink); }
.pp-label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--na-ink); }
.pp-trap { position: absolute; left: -9999px; }
.pp-captcha { margin-top: 14px; min-height: 0; overflow-x: auto; }
textarea.na-input { height: auto; min-height: 120px; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; resize: vertical; }

/* ===== Account pop-up: "Your data" and deleting the account ===== */
.na-data h5 { margin: 18px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--na-faint); }
.na-data__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--na-line); font-size: 13px; color: var(--na-mute); }
.na-data h5 + .na-data__row { border-top: 0; }
.na-data__row b { min-width: 0; font-weight: 600; color: var(--na-ink); text-align: right; overflow-wrap: anywhere; }
.na-data__row small { display: block; font-size: 11.5px; font-weight: 400; color: var(--na-faint); }
.na-data__empty { padding: 6px 0; font-size: 13px; color: var(--na-faint); }
.na-quiet { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 0; font-size: 13px; font-weight: 600; color: var(--na-mute); cursor: pointer; }
.na-quiet:hover { color: var(--na-ink); }
.na-quiet--danger, .na-quiet--danger:hover { color: #b91c1c; }
.na-btn--danger, .na-btn--danger:hover { background: #dc2626; color: #fff; }

/* The way to the privacy page, from the foot of the list, the Guide and the
   account pop-up. Never on the map. */
.na-legal { margin-top: 8px; text-align: center; font-size: 12px; color: var(--na-mute); }
.na-legal a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.na-foot small { display: block; margin-top: 8px; font-size: 10px; color: #cbd5e1; }

/* ===== Countdown popover (hangs under the top bar) ===== */
.na-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: min(280px, calc(100vw - 24px)); padding: 16px 18px; border-radius: 22px; background: var(--na-card); box-shadow: 0 22px 50px -16px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .06); pointer-events: auto; text-align: left; }
@keyframes naPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.na-pop.is-open { display: block; transform-origin: top right; animation: naPop .16s ease-out; }
.na-pop__label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--na-faint); }
.na-pop__label svg { color: var(--na-accent); }
.na-pop__timer { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--na-accent); white-space: nowrap; }
.na-pop__date { margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--na-ink); }
.na-pop .na-fine { margin-top: 8px; }
.na-pop .na-link { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .na-pop.is-open { animation: none; } }

/* ===== Add to Home Screen (js/install.js) =====
   The question: a card above the tab bar, on the board only. It is not a modal —
   the map and the tabs keep working behind it. While it is up it has the space
   above the tab bar to itself, so the view button and the Guide hint step aside. */
.na-ask { display: none; position: fixed; z-index: 26; left: 12px; right: 12px; bottom: calc(max(.75rem, env(safe-area-inset-bottom)) + 72px); max-width: 42rem; margin: 0 auto; padding: 14px; border-radius: 24px; background: var(--na-card); box-shadow: 0 22px 50px -16px rgba(15, 23, 42, .5), 0 2px 6px rgba(15, 23, 42, .06); }
@keyframes naAskIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.na-ask.is-open { display: block; animation: naAskIn .32s cubic-bezier(.2, .8, .2, 1); }
#view-nests.has-sheet .na-ask { display: none; }
.na-ask__row { display: flex; align-items: center; gap: 12px; }
.na-ask__icon { flex: none; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .45); }
.na-ask__text { min-width: 0; }
.na-ask__text b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--na-ink); }
.na-ask__text span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--na-mute); }
.na-ask__btns { display: flex; gap: 8px; margin-top: 12px; }
.na-ask__btns > * { flex: 1; min-width: 0; }
html.install-ask .na-fab { opacity: 0; pointer-events: none; }
html.install-ask #nav-guide-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .na-ask.is-open { animation: none; } }

/* The steps: numbered, with the browser's own icons shown inline so they can be
   matched by eye. */
.na-steps { counter-reset: step; }
.na-steps li { counter-increment: step; position: relative; min-height: 32px; padding: 5px 0 0 44px; font-size: 14px; line-height: 1.5; color: #374151; }
.na-steps li + li { margin-top: 12px; }
.na-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--na-accent-soft); color: var(--na-accent); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.na-steps b { color: var(--na-ink); }
.na-steps svg { display: inline-block; vertical-align: -3px; color: var(--na-ink); }
.na-steps small { display: block; margin-top: 2px; font-size: 12px; color: var(--na-faint); }

/* ===== Modal sheets ===== */
/* Opened from the Home Screen, a pop-up used to start 16px from the very top of
   the screen: its title and close button sat under the status bar, where the
   phone blurs the page and takes the taps for itself. Every pop-up now starts
   below the status bar and stops above the home indicator. */
#report-modal, #install-modal, #account-modal, #admin-modal { padding-top: var(--na-pop-t); padding-bottom: var(--na-pop-b); }
.na-sheet { width: 100%; max-width: 24rem; max-height: calc(100vh - var(--na-pop-t) - var(--na-pop-b)); max-height: calc(100dvh - var(--na-pop-t) - var(--na-pop-b)); overflow-y: auto; overscroll-behavior: contain; background: var(--na-card); border-radius: 28px; box-shadow: 0 30px 70px -24px rgba(2, 6, 23, .6); }
/* ===== Admin panel: species switches ===== */
.adm-search { display: block; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(0, 0, 0, .45); border: 1px solid #3f3f46; color: #fff; font-size: 14px; outline: none; }
.adm-search:focus { border-color: #71717a; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.adm-tab { height: 28px; padding: 0 10px; border-radius: 14px; background: #27272a; color: #a1a1aa; font-size: 11px; font-weight: 700; cursor: pointer; }
.adm-tab b { margin-left: 3px; font-weight: 700; color: #71717a; }
.adm-tab.is-on { background: #fafafa; color: #18181b; }
.adm-tab.is-on b { color: #52525b; }
.adm-sp { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #27272a; }
.adm-sp:last-child { border-bottom: 0; }
.adm-sp img { flex: none; width: 28px; height: 28px; object-fit: contain; }
.adm-sp__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #e4e4e7; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-sp--hidden .adm-sp__name { color: #71717a; text-decoration: line-through; }
.adm-sp--hidden img { opacity: .35; }
.adm-sp__shiny { flex: none; width: 32px; height: 32px; border-radius: 10px; background: #27272a; color: #52525b; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.adm-sp__shiny.is-on { background: rgba(250, 204, 21, .16); color: #facc15; }
.adm-sp__status { flex: none; height: 32px; padding: 0 6px; border-radius: 10px; background: #27272a; border: 1px solid #3f3f46; color: #e4e4e7; font-size: 12px; font-weight: 600; }
.adm-sp--unlikely .adm-sp__status { border-color: #b45309; color: #fbbf24; }
.adm-sp--hidden .adm-sp__status { border-color: #991b1b; color: #f87171; }

/* The admin panel is still the old dark card, but it has to fit the screen the
   same way: once its tools are showing it is taller than a phone, and centred
   with nothing to scroll it pushed both its close button and "Log out" off the
   screen. It scrolls inside itself, with the title bar pinned at the top. */
#admin-modal > div { max-height: calc(100vh - var(--na-pop-t) - var(--na-pop-b)); max-height: calc(100dvh - var(--na-pop-t) - var(--na-pop-b)); overflow-y: auto; overscroll-behavior: contain; }
#admin-modal > div > :first-child { position: sticky; top: 0; z-index: 1; }
/* The title bar stays put while a long sheet ("Your data") scrolls under it, so
   the close button is never more than a glance away. The fade below it softens
   the edge the text slides under; on an unscrolled sheet it is white on white. */
.na-sheet__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px 20px; background: var(--na-card); }
.na-sheet__head::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(to bottom, var(--na-card), rgba(255, 255, 255, 0)); pointer-events: none; }
.na-sheet__head h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--na-ink); }
.na-sheet__head h3 svg { color: var(--na-accent); }
.na-sheet__body { padding: 8px 20px 20px; }
/* Drawn at 40px; the invisible ring around it makes the target a thumb-sized 56. */
.na-x::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.na-x { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #f4f6f9; color: var(--na-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.na-x:hover { background: #e8ebf0; }
.na-sheet__park { font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--na-ink); }
.na-sheet__addr { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; color: var(--na-mute); }
.na-sheet__addr:hover { color: var(--na-ink); }
.na-sheet__actions { display: flex; gap: 10px; margin-top: 18px; }
.na-sheet__actions > * { flex: 1; }
.na-badge { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--na-accent-soft); color: var(--na-accent); display: flex; align-items: center; justify-content: center; }
.na-badge--ok { background: #e8f8f0; color: #059669; }
.na-badge--wait { background: #fff7e6; color: #d97706; }

/* This sheet loads after Tailwind, so a display set above would beat .hidden on
   the same element. These are the ones scripts show and hide. */
.na-note.hidden, .na-toggle-row.hidden, .na-btn.hidden, .na-card.hidden, .na-fab.hidden { display: none; }

/* Very narrow screens: an older small phone, or a normal Android phone with its
   "display size" setting turned up (a 360px-wide phone then reports about 320).
   Icons that only decorate give way so the words still fit on one line. */
@media (max-width: 345px) {
    .banner-brand span { display: none; }
    .pc__pill { padding: 0 9px; }
    .pc__pill .pogo-icon { display: none; }
    .pc__btn { gap: 0; padding: 0 6px; font-size: 13px; }
    .pc__btn svg { display: none; }
    /* An empty park's headline is centred, which here would run under the close button. */
    .pc--sheet .pc__sprites--empty { padding-right: 40px; }
}