html, body { margin:0; padding:0; height:100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
/* accessibility: honor reduced-motion + give keyboard users a visible focus ring (mouse users none) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
:focus-visible { outline:2px solid #b8860b; outline-offset:2px; border-radius:3px; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline:none; }
#hdr { background:#30424c; color:#fff; padding:calc(7px + env(safe-area-inset-top)) 12px 7px; display:flex; align-items:center; gap:10px; height:calc(40px + env(safe-area-inset-top)); box-sizing:border-box; }
#hdr h1 { font-size:15px; margin:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#btnPanel, #btnAbout { background:#b8860b; border:none; color:#fff; font-size:13px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer; flex-shrink:0; }
/* the old-western letterpress look: serif small-caps, no heavy bolding */
#btnPanel, #btnTable, #btnAbout { font-family:Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua',serif; font-weight:400; font-variant:small-caps; letter-spacing:.7px; font-size:14px; }
.nrBtn span { font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif; font-weight:400; font-variant:small-caps; letter-spacing:1px; font-size:11.5px; }
#authBtn { background:#b8860b; border:none; color:#fff; font-size:13px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer; flex-shrink:0; }
#btnAbout { background:#6a4fa3; }
#map { position:absolute; top:calc(40px + env(safe-area-inset-top)); bottom:0; left:0; right:0; z-index:0; } /* own stacking context: map controls can never paint over app views */
#panel { position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; bottom:0; padding-left:env(safe-area-inset-left); width:340px; max-width:100%; background:#fff; z-index:1100;
box-shadow:2px 0 10px rgba(0,0, 0, .3); transform:translateX(-105%); transition:transform .18s ease; display:flex; flex-direction:column; }
#panel.open { transform:none; }
#controls { padding:10px 12px 6px; border-bottom:1px solid #ddd; flex:1 1 auto; overflow-y:auto; }
#listWrap { flex-shrink:0; border-top:2px solid #baccd6; background:#f1f5f7; }
#listWrap > summary { font-size:13px; font-weight:700; color:var(--x-ink); cursor:pointer; padding:9px 12px; user-select:none; }
#listWrap > summary:hover { background:#dce6eb; }
#listWrap[open] #hhList { max-height:42vh; overflow-y:auto; }
body.c49dark #listWrap { background:#12242d; border-top-color:#1e3a48; }
body.c49dark #listWrap > summary { color:#a0bbcb; }
#controls details { border-top:1px solid #e4e4e4; padding:2px 0 4px; }
#controls summary { font-size:12.5px; font-weight:700; color:#30424c; cursor:pointer; padding:7px 8px 7px 4px; user-select:none; list-style:none; display:flex; align-items:center; gap:7px; border-radius:7px; transition:background .12s; }
#controls summary::-webkit-details-marker { display:none; }
#controls summary::after { content:''; margin-left:auto; flex:0 0 auto; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; opacity:.5; transform:rotate(-45deg); transition:transform .18s; }
#controls details[open] > summary::after { transform:rotate(45deg); }
#controls summary:hover { color:#b8860b; background:rgba(184,134,11, .08); }
#controls details[open] > *:not(summary) { animation:ckFade .18s ease; }
@keyframes ckFade { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
/* redesign 6: the selected honey hole pulses a 24px gold ring */
@keyframes c49ring { 0% { box-shadow:0 0 0 0 rgba(212,175,55,.55); } 70% { box-shadow:0 0 0 13px rgba(212,175,55,0); } 100% { box-shadow:0 0 0 0 rgba(212,175,55,0); } }
.c49ring { width:22px; height:22px; border-radius:50%; border:2px solid rgba(212,175,55,.95); box-sizing:border-box; }
@media (prefers-reduced-motion: no-preference) { .c49ring { animation:c49ring 1.5s ease-out infinite; } }
.ckRow { font-size:12px; color:var(--x-ink); margin-bottom:6px; display:flex; align-items:flex-start; gap:5px; }
.subWrap { margin:0 0 7px 16px; display:flex; flex-wrap:wrap; gap:3px 12px; }
.subWrap label { font-size:12px; color:var(--x-sub); display:inline-flex; align-items:center; gap:3px; cursor:pointer; }
.subWrap input { margin:0; }
/* layer toggles as switches: clearer on/off at a glance than a tiny checkbox */
.ckRow input[type=checkbox] { -webkit-appearance:none; appearance:none; margin:1px 0 0; flex:0 0 auto; cursor:pointer; width:40px; height:22px; border-radius:11px; background:#a3b2ba; border:1px solid rgba(0,0,0,.18); position:relative; transition:background .15s; }
.ckRow input[type=checkbox]::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0, 0, .35); transition:left .15s; }
.ckRow input[type=checkbox]:checked { background:#b8860b; }
.ckRow input[type=checkbox]:checked::after { left:22px; }
.ckRow input[type=checkbox]:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(184,134,11, .4); }
#controls summary .cnt { font-weight:400; color:var(--x-sub); font-size:12px; }
.hint { font-size:12px; color:var(--x-sub); line-height:1.45; margin:3px 0 7px; }
.pn { font-size:12.5px; color:var(--x-sub); line-height:1.4; } /* popup note, lightened in dark mode */
/* honey-hole popup: references block + member-contributed photo gallery */
.refBlock { margin:5px 0 2px; }
.refBlock > summary { cursor:pointer; font-size:12.5px; font-weight:700; color:var(--x-sub); list-style:none; padding:2px 0; }
.refBlock > summary::-webkit-details-marker { display:none; }
.refBlock > summary::before { content:"\25B8"; display:inline-block; margin-right:4px; transition:transform .15s; }
.refBlock[open] > summary::before { transform:rotate(90deg); }
.refBody { font-size:12px; color:var(--x-sub); line-height:1.45; border-left:2px solid #a3bdcd; padding:2px 0 2px 8px; margin:3px 0 4px; }
.refBody a { color:var(--x-info); }
.holeMedia { margin:7px 0 4px; }
.holeMedia .hmHint { font-size:12px; color:var(--x-sub); }
.holeMedia .hmTitle { font-size:12.5px; font-weight:700; color:var(--x-ink); margin:0 0 4px; display:flex; align-items:center; gap:4px; }
.holeMedia .hmGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.holeMedia .hmGrid img { width:100%; height:56px; object-fit:cover; border-radius:5px; border:1px solid var(--x-line); display:block; }
body.c49dark .refBlock > summary { color:#e6c879; }
body.c49dark .refBody { color:#a5b7c2; border-left-color:#35505f; }
body.c49dark .holeMedia .hmHint { color:#9aaeb9; }
body.c49dark .holeMedia .hmTitle { color:#a0bbcb; }
.leaflet-tooltip.deerLbl { background:transparent; border:0; box-shadow:none; padding:0; color:#30424c; font-weight:800; font-size:14px; text-shadow:0 0 3px #fff, 0 0 5px #fff, 0 1px 2px #fff; }
.leaflet-tooltip.deerLbl:before { display:none; }
body.c49dark .leaflet-tooltip.deerLbl { color:#ffd98a; text-shadow:0 0 3px #000, 0 0 6px #000; }
.authLink { cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; }
.authLink:hover { color:#b8860b; }
#hhList { overflow-y:auto; }
.hh { padding:8px 12px; border-bottom:1px solid #eee; cursor:pointer; }
.hh:hover { background:#fdf6e3; }
.hh b { font-size:13px; }
.hh .sub { font-size:12.5px; color:#666; margin-top:2px; }
.scoreChip { display:inline-block; background:#b8860b; color:#fff; border-radius:10px; padding:1px 8px; font-size:12px; font-weight:700; margin-right:6px; }
.pop b { font-size:13px; }
.pop td { padding:1px 4px 1px 0; font-size:12px; vertical-align:top; }
.pop a { color:var(--x-info); }
/* an anchor wearing a button stays a BUTTON: white on its dark fill, never the popup link-blue.
This outranks .pop a / dark-mode link rules for every and . */
.pop a.popBtn, .leaflet-popup-content a.popBtn, .pop a.abtn, a.popBtn, a.abtn,
body.c49dark .pop a.popBtn, body.c49dark .leaflet-popup-content a.popBtn, body.c49dark .pop a.abtn { color:#fff; text-decoration:none; }
/* the legend wears the same coat as the Labels and Clear buttons when closed, and drops open
downward beneath them like a proper menu */
.legend { background:transparent; padding:0; box-shadow:none; font-size:12px; line-height:1.7; }
.legend details { background:rgba(9,14,17,.86); color:#b7ccd8; border:1px solid rgba(196,213,223,.35); padding:6px 10px; border-radius:8px; font-size:12.5px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.35); line-height:1; }
.legend details[open] { background:#fff; color:#19242a; font-weight:400; line-height:1.7; }
/* open: ride ABOVE everything else on the map, scroll inside, and keep the Legend header pinned
so one click collapses it from anywhere in the list. The corner container itself must outrank
the other corners (each Leaflet corner is its own stacking context, so the child alone cannot
climb past the bottom-left coordinates and scale). */
.leaflet-top.leaflet-left { z-index:1100; }
/* keyboard users get a visible ring on whatever holds focus, and never lose it to custom styling */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [onclick]:focus-visible { outline:3px solid #b8860b !important; outline-offset:2px; }
/* honor the system high-contrast preference: hint text darkens, faded legend entries stay legible,
borders firm up */
@media (prefers-contrast: more) {
.hint, .pn, .cap, .meta, .aka { color:#324048 !important; }
body.c49dark .hint, body.c49dark .pn, body.c49dark .cap { color:#b7cad5 !important; }
.legend .lgItem.dim { opacity:.75; }
.abtn, .popBtn, .c49in { border:2px solid currentColor; }
}
.legend { position:relative; z-index:1500; }
.legend details[open] { padding:0 10px 8px; max-height:min(62vh, 520px); overflow:auto; box-shadow:0 4px 18px rgba(0,0,0,.5); }
.legend details[open] > summary { position:sticky; top:0; z-index:3; background:rgba(9,14,17,.94); color:#b7ccd8; font-weight:700; margin:0 -10px 4px; padding:7px 10px 6px; border-radius:8px 8px 0 0; }
body.c49dark .legend details[open] > summary { background:#070b0e; }
.legend-old { background:#fff; padding:8px 10px; border-radius:6px; box-shadow:0 1px 5px rgba(0,0, 0, .4); font-size:12px; line-height:1.7;
box-sizing:border-box; max-height:calc(100vh - 265px); overflow-y:auto; } /* opened, it may never climb under the zoom control */
.legend summary { cursor:pointer; font-size:12.5px; }
.legend .lgItem { cursor:pointer; border-radius:5px; padding:0 3px; display:inline-block; transition:background .12s, opacity .15s; }
.legend .lgItem:hover { background:rgba(184,134,11,.20); }
.legend .lgItem:active { background:rgba(184,134,11,.35); }
/* entries whose layer is currently OFF fade back, so the legend reflects what is actually on the map;
still tappable (hovering brightens it) to turn that layer on and solo it. */
.legend .lgItem.dim { opacity:.38; }
.legend .lgItem.dim:hover { opacity:.72; }
.goldClu { width:32px; height:32px; border-radius:50%; background:rgba(255,193,7, .85); border:2px solid #b26a00;
color:#21323c; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.honeyClu { width:34px; height:34px; border-radius:50%; background:rgba(212,175,55, .92); border:2.5px solid #111a1f;
color:var(--x-ink); font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:center; }
.scoutClu { width:30px; height:30px; border-radius:50%; background:rgba(255,179,0, .92); border:2px solid #2b424f;
color:#151f25; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
.honeyIcon { font-size:22px; line-height:26px; text-align:center; text-shadow:0 0 4px #fff, 0 1px 3px rgba(0,0, 0, .7); }
.scoutIcon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:14px; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0, 0, .5); }
.scoutHigh { background:#ffb300; } .scoutOper { background:#66bb6a; } .scoutOld { background:#9e9e9e; } .scoutWar { background:#8b1a1a; }
.locBtn { width:38px; height:38px; background:#fff; border-radius:8px; box-shadow:0 1px 5px rgba(0,0, 0, .4);
font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.gaugeIcon { font-size:16px; line-height:20px; text-align:center; text-shadow:0 0 3px #fff, 0 1px 2px rgba(0,0, 0, .6); }
.caveIcon { font-size:18px; line-height:22px; text-align:center; text-shadow:0 0 3px #fff, 0 1px 2px rgba(0,0, 0, .7); }
.caseIcon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0, 0, .6); color:#fff; font-size:13px; }
.xbtn { border:none; color:#fff; font-size:12px; font-weight:600; padding:5px 10px; border-radius:6px; cursor:pointer; margin:2px 4px 6px 0; }
#aboutView { display:none; position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; right:0; bottom:0; background:#fff; z-index:1060; overflow:auto; }
#aboutInner { max-width:760px; margin:0 auto; padding:18px 20px 60px; font-size:13.5px; line-height:1.65; color:var(--x-ink); }
#aboutInner h2 { font-size:17px; color:#30424c; border-bottom:2px solid #30424c; padding-bottom:4px; margin:22px 0 8px; }
#aboutInner .law { background:#fff3e6; border-left:4px solid #e65100; padding:8px 12px; border-radius:4px; }
.popBtn { display:inline-block; background:#15314b; color:#fff; font-size:12.5px; font-weight:600; padding:4px 8px; border-radius:6px; cursor:pointer; user-select:none; }
#btnTable { background:#0a8754; border:none; color:#fff; font-size:13px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer; flex-shrink:0; }
#tableView { display:none; position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; right:0; bottom:0; background:#fff; z-index:1055; overflow:auto; }
#tFilters { position:sticky; top:0; background:#e7eef2; border-bottom:1px solid #ccc; padding:8px 12px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:12px; z-index:2; }
#tFilters label { display:flex; align-items:center; gap:3px; }
#tFilters input[type=number], #tFilters input[type=text], #tFilters select { border:1px solid #bbb; border-radius:5px; padding:3px 5px; font-size:12px; }
#tFilters input[type=number] { width:62px; }
#tCount { font-weight:700; color:#30424c; }
#gtbl { border-collapse:collapse; width:100%; font-size:12px; }
#gtbl th { position:sticky; top:39px; background:#30424c; color:#fff; padding:6px 8px; text-align:left; white-space:nowrap; cursor:pointer; z-index:1; }
#gtbl th:hover { background:#445c6a; }
#gtbl td { padding:5px 8px; border-bottom:1px solid #eee; vertical-align:top; }
#gtbl tr:nth-child(even) td { background:#f3f7f9; }
#gtbl tbody tr { cursor:pointer; }
#gtbl tbody tr:hover td { background:#fdf6e3; }
.fav1 { color:var(--x-ok); font-weight:700; } .favNo { color:var(--x-err); }
.commodClu { width:30px; height:30px; border-radius:50%; background:rgba(102,125,138, .85); border:2px solid #30424c;
color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.fungiClu { width:30px; height:30px; border-radius:50%; background:rgba(84,110,122, .85); border:2px solid #37474f;
color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.55); }
.fungiDot { width:15px; height:11px; border-radius:50% 50% 32% 32% / 78% 78% 30% 30%; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6); } /* mushroom cap: wide dome, flatter base */
.gemDot { width:13px; height:13px; background:linear-gradient(135deg,#4dd0e1,#00acc1); border:1.5px solid #fff; box-shadow:0 0 0 1px #00838f, 0 1px 4px rgba(0,0,0,.6); transform:rotate(45deg); }
.seepClu { width:28px; height:28px; border-radius:50%; background:rgba(2,119,189,.82); border:2px solid #01579b;
color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.5); }
.seepDot { width:11px; height:11px; border-radius:50%; background:#29b6f6; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5); }
.crawClu { width:28px; height:28px; border-radius:50%; background:rgba(178,58,30,.85); border:2px solid #7a2e12;
color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.5); }
.crawDot { width:11px; height:11px; border-radius:50%; background:#c0392b; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5); }
/* a small polite nudge on Get app for visitors who have not installed: two gentle wiggles every
seven seconds, nothing that shouts. Honors reduced-motion. */
@keyframes c49nudge { 0%, 90%, 100% { transform: none; } 92% { transform: rotate(-3deg) translateY(-1px); } 94% { transform: rotate(2.5deg); } 96% { transform: rotate(-1.5deg); } 98% { transform: rotate(0.5deg); } }
@media (prefers-reduced-motion: no-preference) { #installBtn.nudge { animation: c49nudge 7s ease-in-out infinite; } }
.stockClu { width:28px; height:28px; border-radius:50%; background:rgba(46,125,50,.85); border:2px solid #1b5e20;
color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.5); }
.advClu { width:26px; height:26px; border-radius:50%; background:rgba(176,0,32,.9); border:2px solid #7f0000;
color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.5); }
.gameDot { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ff8a65,#e64a19); border:1.5px solid #fff; box-shadow:0 0 0 1px #bf360c, 0 1px 4px rgba(0,0,0,.6); }
.trackTip { background:rgba(13,19,23,.92); color:#b7ccd8; border:1px solid #e65100; border-radius:8px; padding:5px 9px; font-size:12.5px; line-height:1.45; box-shadow:0 3px 10px rgba(0,0,0,.5); white-space:nowrap; }
.trackTip::before { border-right-color:#e65100; }
.inspectIcon { width:14px; height:14px; border-radius:3px; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0, 0, .35), 0 1px 4px rgba(0,0, 0, .6); }
#presetBar { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px; }
.pgLabel { width:100%; font-size:12px; color:#334550; margin-bottom:2px; }
/* skip-to-content link: off-screen until a keyboard user tabs to it (WCAG 2.4.1) */
.skipLink { position:absolute; left:-9999px; top:0; z-index:6000; background:#13321f; color:#fff; padding:9px 15px; border-radius:0 0 8px 0; font-weight:700; font-size:13px; text-decoration:none; }
.skipLink:focus { left:0; }
/* Beginner mode: one toggle that trims the panel to the essentials for new members */
#begBtn { width:100%; margin:0 0 7px; background:#fff; color:var(--x-green-hi); border:1.5px solid #2f6b50; border-radius:8px; padding:7px; font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#begBtn:hover { background:#f0f7f1; }
body.c49beginner #begBtn { background:#2f6b50; color:#fff; border-color:#2f6b50; }
.begTip { display:none; background:#13321f; color:#dff5e6; border-radius:8px; padding:8px 10px; margin:0 0 8px; font-size:12.5px; line-height:1.5; }
body.c49beginner .begTip { display:block; }
body.c49beginner #controls .advSec { display:none !important; }
body.c49dark #begBtn { background:#12242d; color:#7fd0a2; border-color:#3a7d59; }
body.c49dark.c49beginner #begBtn { background:#2f6b50; color:#fff; }
.presetGrp { font-size:11.5px; font-weight:700; color:#82949e; text-transform:uppercase; letter-spacing:.3px; margin:0 1px 0 4px; }
.preset { background:#30424c; color:#fff; border:none; border-radius:14px; padding:4px 9px; font-size:12.5px; font-weight:600; cursor:pointer; }
.preset:hover { background:#445c6a; }
#presetStatus { min-height:14px; }
#adjustBar { background:#e7eef2; border-radius:6px; padding:6px 8px; margin-bottom:8px; font-size:12.5px; }
#adjustBar summary { cursor:pointer; font-size:12px; margin-bottom:4px; color:#30424c; }
#adjustBar label { display:block; margin-bottom:2px; }
#adjustBar input[type=range] { width:50%; vertical-align:middle; }
.sv { display:inline-block; min-width:34px; color:#445c6a; font-weight:700; }
/* floating Image Lab, visible over the map so you can tune while watching */
#imgLabBtn { position:absolute; top:346px; right:calc(10px + env(safe-area-inset-right)); z-index:1040; width:42px; height:42px; border-radius:9px;
background:#30424c; color:#fff; border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0, 0, .45); font-size:20px; line-height:1; cursor:pointer; }
#imgLabBtn.on { background:#b8860b; }
#imgLab { position:absolute; right:8px; bottom:8px; z-index:1040; display:none; box-sizing:border-box; width:min(520px, calc(100vw - 16px)); max-width:calc(100vw - 16px);
background:rgba(238,243,245, .90); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
border:1px solid #a6bac6; border-radius:11px; box-shadow:0 3px 16px rgba(0,0, 0, .4); padding:9px 11px 10px;
max-height:46vh; overflow:auto; font-size:12px; }
#imgLab.show { display:block; }
#imgLab h4 { margin:0 0 7px; font-size:13px; color:#30424c; display:flex; align-items:center; justify-content:space-between; }
#imgLab .ilBtn { background:#667d8a; color:#fff; border:none; border-radius:5px; padding:2px 9px; font-size:12px; cursor:pointer; margin-left:5px; }
#imgLab .ilGrid { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
#imgLab .ilGrid label { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--x-ink); }
#imgLab .ilGrid input[type=range] { flex:1; min-width:0; }
#imgLab .ilChks { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:7px; }
#imgLab .ilChks label { display:inline-flex; align-items:center; gap:3px; font-size:12.5px; }
#imgLab select { min-width:0; max-width:100%; box-sizing:border-box; text-overflow:ellipsis; } /* a select sizes to its longest option; keep it inside the panel */
/* phones: the two-column slider grid was ~448px wide inside a ~340px panel and clipped the sliders.
Stack to one column, give the panel more height with internal scroll, and clear the home-button dock. */
@media (max-width: 640px) {
#imgLab { left:8px; right:8px; width:auto; max-width:none; bottom:calc(8px + env(safe-area-inset-bottom)); max-height:64vh; }
#imgLab .ilGrid { grid-template-columns:1fr; gap:2px 0; }
#imgLab .ilGrid label { font-size:13px; }
#imgLab .ilGrid input[type=range] { height:26px; }
#imgLab .ilChks label { font-size:13px; }
}
#cmpTile { position:absolute; left:8px; bottom:8px; z-index:1041; display:none; width:min(330px, calc(100% - 16px)); background:rgba(255,255,255,.96); border:1px solid var(--x-line); border-radius:11px; padding:10px 12px; box-shadow:0 6px 22px rgba(0,0,0,.3); }
#cmpTile.show { display:block; }
body.c49dark #cmpTile { background:rgba(25,31,35,.96); color:#e3edf3; border-color:#384248; }
#cmpTile h4 { margin:0 0 7px; font-size:13px; color:#30424c; display:flex; align-items:center; justify-content:space-between; }
body.c49dark #cmpTile h4 { color:#a0bbcb; }
#cmpTile .ilBtn { background:#667d8a; color:#fff; border:none; border-radius:5px; padding:2px 9px; font-size:12px; cursor:pointer; margin-left:5px; }
/* Club 49 trial / membership UI */
#trialBar { position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; right:0; z-index:1035; background:#b8860b; color:#fff;
font-size:12px; padding:5px 10px; display:none; align-items:center; gap:8px; box-shadow:0 1px 6px rgba(0,0, 0, .35); }
#trialBar.show { display:flex; }
#trialBar .tjoin { background:#fff; color:#2f4755; font-weight:800; border:none; border-radius:6px; padding:3px 10px; cursor:pointer; white-space:nowrap; }
#trialBar .tx { margin-left:auto; cursor:pointer; opacity:.9; font-weight:700; padding-left:6px; }
/* persistent "which view is on" chip, floats over the map after the panel closes */
#viewChip { position:absolute; top:calc(46px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:1034;
display:none; align-items:center; gap:8px; max-width:min(92vw,540px);
background:rgba(11,17,20,.9); color:#b7ccd8; border:1px solid #344e5d; border-radius:999px;
padding:5px 6px 5px 13px; font-size:12.5px; box-shadow:0 6px 18px rgba(0,0,0,.42); }
#viewChip.show { display:flex; }
#viewChip .vcName { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#viewChip .vcN { flex:0 0 auto; opacity:.72; font-weight:500; }
#viewChip .vcX { flex:0 0 auto; cursor:pointer; opacity:.85; font-weight:700; font-size:15px; line-height:1;
background:rgba(255,255,255,.12); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
#viewChip .vcX:hover { opacity:1; background:rgba(255,255,255,.24); }
/* chat: date dividers + grouped-message spacing */
.chatDay { text-align:center; margin:11px 0 7px; font-size:11.5px; color:var(--x-sub); }
.chatDay span { background:#dee7ed; border:1px solid #d0dbe1; border-radius:10px; padding:1px 10px; }
body.c49dark .chatDay span { background:#212629; border-color:#384248; color:#aabcc7; }
.chatRow.grp { margin-top:2px !important; }
/* gold ticker styled like a real exchange quote */
#goldPill { display:flex; align-items:center; gap:8px; background:linear-gradient(180deg,#11181c,#0a0f12); border:1px solid #243138; border-radius:8px; padding:5px 10px; margin:0 0 7px; color:#c8d7e0; cursor:pointer; font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
#goldPill:empty { display:none; }
#goldPill .tkSym { font-size:11px; font-weight:800; letter-spacing:.6px; color:#d4af37; flex:0 0 auto; }
#goldPill .tkPx { font-size:15px; font-weight:800; color:#fff; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
#goldPill .tkChg { font-size:12px; font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace; white-space:nowrap; }
#goldPill .tkChg.up { color:#26c281; } #goldPill .tkChg.down { color:#ff5b5b; } #goldPill .tkChg.flat { color:#808f98; }
#goldPill .tkLive { margin-left:auto; font-size:8.5px; font-weight:800; letter-spacing:.6px; color:#748188; display:flex; align-items:center; gap:4px; flex:0 0 auto; }
#goldPill .tkLive i { width:6px; height:6px; border-radius:50%; background:#26c281; }
@media (prefers-reduced-motion: no-preference) { #goldPill .tkLive i { animation:tkpulse 1.9s infinite; } }
@keyframes tkpulse { 0%{box-shadow:0 0 0 0 rgba(38,194,129,.5)} 70%{box-shadow:0 0 0 5px rgba(38,194,129,0)} 100%{box-shadow:0 0 0 0 rgba(38,194,129,0)} }
.ckRow.locked > label { opacity:.55; }
.lockTag { color:var(--x-gold); font-weight:700; font-size:11px; margin-left:4px; cursor:pointer; }
#authModal, #adminModal { display:none; position:absolute; inset:0; z-index:1300; background:rgba(20,12,4, .62); align-items:center; justify-content:center; }
#authModal.show, #adminModal.show { display:flex; }
#authModal .box, #adminModal .box { background:#fff; border-radius:15px; padding:22px 22px; width:330px; max-width:90vw; text-align:center; box-shadow:0 14px 44px rgba(0,0, 0, .55); }
#authModal h3, #adminModal h3 { margin:6px 0 8px; color:var(--x-ink); font-size:19px; }
#authModal p { font-size:12.5px; color:var(--x-sub); margin:0 0 10px; line-height:1.5; }
#authModal .cx, #adminModal .cx { display:block; margin-top:13px; color:var(--x-sub); font-size:12px; cursor:pointer; }
/* min-height 44: the app's primary button sat at 42, just under the touch minimum everything
else was raised to. One line here lifts every button in the app rather than patching them. */
.abtn { min-height:44px; background:#667d8a; color:#fff; border:none; border-radius:8px; padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer; margin:2px; }
.abtn.app { background:#0a8754; } .abtn.rej { background:#c62828; }
.arow { display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid #eee; padding:8px 2px; font-size:13px; }
.arow > div:last-child { white-space:nowrap; }
#spotList { margin-top:5px; }
#spotList .spot { font-size:12px; border-bottom:1px solid #eee; padding:5px 0; display:flex; gap:7px; align-items:flex-start; }
#spotList .spot .sgo { cursor:pointer; flex:1; min-width:0; }
#spotList .spot .sgo b { color:#30424c; }
#spotList .spot .sx { color:var(--x-err); cursor:pointer; font-weight:700; }
.c49in { width:100%; box-sizing:border-box; padding:8px 10px; border:1.5px solid #758c99; border-radius:7px; font-size:13.5px; margin-bottom:5px; }
.c49in:focus { outline:none; border-color:#b8860b; box-shadow:0 0 0 2px rgba(184,134,11, .25); }
/* ===== higher contrast across the board ===== */
#controls summary { font-size:13px; color:var(--x-ink); }
.ckRow { font-size:12.5px; color:var(--x-ink); }
.subWrap label { color:var(--x-ink); }
.hint { color:#475259; }
.hh .sub { color:#544; }
#controls summary .cnt { color:var(--x-sub); }
body.c49dark #controls summary .cnt { color:#7e8e98; } /* measured 3.4:1 on the dark panel without this; ~5.3:1 with it (WCAG AA) */
#hdr { border-bottom:2px solid #17242b; }
/* ===== honey-hole quick-jump dropdown (bottom of filters) ===== */
#hhJumpWrap { padding:8px 12px 10px; border-top:2px solid #cad7de; background:#f1f5f7; }
#hhJumpWrap label { font-size:12px; font-weight:700; color:var(--x-ink); display:block; margin-bottom:4px; }
#hhJump { width:100%; box-sizing:border-box; padding:9px 10px; border:1.5px solid #758c99; border-radius:7px; font-size:13.5px; background:#fff; color:var(--x-ink); }
#hhJumpWrap .lk { font-size:12px; color:var(--x-gold); font-weight:700; margin-top:4px; }
/* ===== Share / Invite + Community modals reuse the auth modal shell ===== */
#shareModal, #commModal, #hubModal, #analysisModal, #dmModal, #shareSpotModal, #annModal, #workModal, #journalModal, #notifModal, #profileModal, #aiModal, #briefModal, #planModal, #provenModal, #riversModal, #dlcModal, #expModal, #whatsNewModal, #chalModal, #legendsModal, #promiseModal, #consentModal, #rockModal, #marketModal, #speciesModal, #forageModal, #gemGuideModal, #radioModal, #flightModal, #kitModal, #queryModal, #creatorModal, #weekendModal, #discBoard, #collModal { display:none; position:absolute; inset:0; z-index:1300; background:rgba(20,12,4, .62); align-items:center; justify-content:center; }
#shareModal.show, #commModal.show, #hubModal.show, #analysisModal.show, #dmModal.show, #shareSpotModal.show, #annModal.show, #workModal.show, #journalModal.show, #notifModal.show, #profileModal.show, #aiModal.show, #briefModal.show, #planModal.show, #provenModal.show, #riversModal.show, #dlcModal.show, #expModal.show, #whatsNewModal.show, #chalModal.show, #legendsModal.show, #promiseModal.show, #consentModal.show, #rockModal.show, #marketModal.show, #speciesModal.show, #forageModal.show, #gemGuideModal.show, #radioModal.show, #flightModal.show, #kitModal.show, #queryModal.show, #creatorModal.show, #weekendModal.show, #discBoard.show, #collModal.show { display:flex; }
/* A real class rule, so anything built at runtime with className="modal" behaves like a
modal. findModal and howGameModal are created in JS and were never on the ID list, so
they carried .show with nothing behind it and simply never appeared. */
.modal { display:none; position:absolute; inset:0; z-index:1300;
background:rgba(20,12,4,.62); align-items:center; justify-content:center; }
.modal.show { display:flex; }
#legendsModal .box, #rockModal .box, #marketModal .box, #speciesModal .box, #forageModal .box, #gemGuideModal .box, #radioModal .box, #flightModal .box, #kitModal .box, #queryModal .box, #creatorModal .box, #weekendModal .box { background:linear-gradient(180deg,#eff3f6,#d6e1e8); border:1px solid #abc3d0; border-radius:15px; padding:18px; max-width:96vw; width:560px; box-shadow:0 14px 44px rgba(0,0,0,.55); max-height:92vh; overflow:auto; text-align:left; }
/* tall modals anchor to the TOP and size against the DYNAMIC viewport, so the header can never
clip above a phone screen (the iOS vh trap: 92vh of the layout viewport is taller than what
the browser actually shows, and flex-centering pushes the title off the top, unreachable). */
#radioModal, #speciesModal, #forageModal, #gemGuideModal, #flightModal, #kitModal, #queryModal, #creatorModal, #weekendModal { align-items:flex-start; }
#radioModal .box, #speciesModal .box, #forageModal .box, #gemGuideModal .box, #flightModal .box, #kitModal .box, #queryModal .box {
margin-top:max(12px, env(safe-area-inset-top)); box-sizing:border-box; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
body.c49dark #legendsModal .box, body.c49dark #rockModal .box, body.c49dark #marketModal .box, body.c49dark #speciesModal .box, body.c49dark #forageModal .box, body.c49dark #gemGuideModal .box, body.c49dark #radioModal .box, body.c49dark #flightModal .box, body.c49dark #kitModal .box, body.c49dark #queryModal .box, body.c49dark #creatorModal .box, body.c49dark #weekendModal .box { background:linear-gradient(180deg,#12242d,#13191c); border-color:#20404f; color:#e3edf3; }
.spCard .warn { font-size:12px; line-height:1.5; margin-top:4px; color:var(--x-err); } .spCard .warn b { color:var(--x-err); }
/* the club airwaves wears walnut and brass: wood grain, a carved plate, a stitched leather mic */
.awCard { border:1px solid #355060; border-radius:12px; padding:11px 12px; margin:7px 0;
background:linear-gradient(180deg,#22333d,#152027) , repeating-linear-gradient(92deg, rgba(0,0,0,.12) 0 3px, transparent 3px 9px);
background-blend-mode:multiply; box-shadow:inset 0 1px 0 rgba(255,220,150,.12), 0 2px 8px rgba(0,0,0,.4); }
.awPlate { font-family:Georgia,serif; font-weight:700; letter-spacing:2px; font-size:12.5px; color:#d9b36a;
text-align:center; border:1px solid #44677b; border-radius:6px; padding:3px 8px; margin:0 auto 7px; width:fit-content;
background:linear-gradient(180deg,#23353f,#1c2b34); text-shadow:0 1px 0 #0c1216; }
.awText { font-size:12px; line-height:1.5; color:#b6cad6; }
.awLbl { font-size:10.5px; font-weight:700; letter-spacing:1.6px; color:#628ba2; font-family:Georgia,serif; }
.awNum { font-size:30px; font-weight:800; color:#e8c15a; font-variant-numeric:tabular-nums; line-height:1; text-shadow:0 0 8px rgba(232,193,90,.35); }
.awDial { background:linear-gradient(180deg,#2e4552,#1f2f38); color:#b8ccd8; border:1px solid #3c5c6e; border-radius:8px;
padding:6px 13px; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,220,150,.15); }
.awDial:active { transform:translateY(1px); }
.awMic { width:100%; padding:16px; border-radius:12px; color:#d7e2e9; font-weight:800; font-size:15px; cursor:pointer;
user-select:none; -webkit-user-select:none; touch-action:none; letter-spacing:1px;
background:linear-gradient(180deg,#3f6b4f,#2a4d38); border:2px dashed rgba(215,226,233,.35); outline:2px solid #24422f; outline-offset:-5px;
box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.awMic.tx { background:linear-gradient(180deg,#a03227,#7c231b); outline-color:#5e1a13; }
.awStatus { font-size:12.5px; color:#85a3b4; margin-top:6px; text-align:center; min-height:14px; }
.spCard { border:1px solid #c0d2dd; border-radius:10px; padding:9px 11px; margin:7px 0; background:rgba(255,255,255,.5); }
body.c49dark .spCard { background:rgba(255,255,255,.05); border-color:#20404f; }
.spCard h4 { margin:0 0 2px; font-size:14.5px; color:var(--x-ink); } body.c49dark .spCard h4 { color:#dbe5eb; }
.spCard .aka { font-size:12px; color:var(--x-sub); font-weight:600; }
.spCard .row { font-size:12px; line-height:1.5; margin-top:4px; } .spCard .row b { color:var(--x-green-hi); }
.spFam { position:sticky; top:0; background:linear-gradient(180deg,#eff3f6,#eff3f6); padding:6px 2px 3px; font-weight:800; color:var(--x-warn); font-size:13px; border-bottom:1px solid #c0d2dd; z-index:1; }
body.c49dark .spFam { background:#12242d; color:#e8c15a; }
.spTab { display:inline-block; padding:3px 9px; margin:0 5px 5px 0; border-radius:14px; border:1px solid #95b3c5; background:#fff; color:var(--x-sub); font-size:12px; cursor:pointer; }
.spTab.on { background:#365262; color:#fff; border-color:#365262; } body.c49dark .spTab { background:#1c2429; color:#abc3d0; }
.lgCard { border:1px solid #bfd1db; border-radius:10px; padding:10px 12px; margin:0 0 9px; background:rgba(255,255,255,.55); }
body.c49dark .lgCard { background:rgba(255,255,255,.05); border-color:#20404f; }
.lgCard h4 { margin:0 0 3px; font-size:14px; color:var(--x-ink); } body.c49dark .lgCard h4 { color:#bdd0db; }
.lgArea { font-size:12px; color:var(--x-warn); font-weight:700; } body.c49dark .lgArea { color:#e0a800; }
.lgCard p { margin:5px 0; font-size:12.5px; line-height:1.45; color:var(--x-ink); } body.c49dark .lgCard p { color:#bdcdd6; }
.lgBtns { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
#promiseModal { z-index:2600; background:rgba(20,12,4,.8); }
#promiseModal .box { background:#fff; border-radius:15px; padding:20px; max-width:94vw; width:480px; box-shadow:0 14px 44px rgba(0,0,0,.6); text-align:left; max-height:92vh; overflow:auto; }
body.c49dark #promiseModal .box { background:#12242d; color:#e3edf3; }
.promiseLine { display:flex; gap:9px; align-items:flex-start; padding:7px 0; }
.promiseLine b { color:var(--x-ok); } body.c49dark .promiseLine b { color:#7fd0a2; }
.promiseLine .pchk { flex:0 0 auto; color:var(--x-ok); font-weight:800; }
/* Theme-aware on purpose. The dark-mode rule below is a hardcoded ID list, so anything not on
it paints white while its text keeps the muted grey meant for a dark card: 1.37 contrast,
which is unreadable. Tokens follow the theme and cannot fall off a list. */
.modal .mbox, #discBoard .box, #collModal .box { background:var(--x-paper); color:var(--x-ink);
border-radius:15px; padding:18px; max-width:96vw; width:560px;
box-shadow:0 14px 44px rgba(0,0,0,.55); max-height:92vh; overflow:auto; text-align:left; }
#dlcModal .box, #expModal .box, #whatsNewModal .box, #chalModal .box { background:#fff; border-radius:15px; padding:18px; max-width:96vw; width:560px; box-shadow:0 14px 44px rgba(0,0,0,.55); max-height:92vh; overflow:auto; text-align:left; }
body.c49dark #dlcModal .box, body.c49dark #expModal .box, body.c49dark #whatsNewModal .box, body.c49dark #chalModal .box { background:#12242d; color:#e3edf3; }
/* dark-mode contrast for the newer modals' theme colors (expedition brown + the pledge, challenge green) */
body.c49dark [style*="color:var(--x-warn)"] { color:#a6bfce !important; }
body.c49dark #chalModal h3 { color:#7fd0a2 !important; }
.chalCard { border:1px solid #d0dbe2; border-radius:10px; padding:11px 13px; margin:9px 0; }
body.c49dark .chalCard { border-color:#2b3439; background:#1e2529; }
.chalCard h4 { margin:0 0 2px; font-size:14.5px; color:var(--x-ink); } body.c49dark .chalCard h4 { color:#a0bbcb; }
.chalProg { height:8px; border-radius:5px; background:#bed0db; overflow:hidden; margin:7px 0 4px; } body.c49dark .chalProg { background:#283238; }
.chalProg > i { display:block; height:100%; background:linear-gradient(90deg,#b8860b,#2e7d32); }
.chalBadge { display:inline-block; background:#1f6b3f; color:#fff; font-size:12px; font-weight:800; border-radius:9px; padding:2px 9px; }
.wnItem { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid #d5e1e8; }
body.c49dark .wnItem { border-top-color:#2b3439; }
.wnItem .wnIco { flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:#365262; color:#fff; display:flex; align-items:center; justify-content:center; }
.wnItem h4 { margin:0 0 1px; font-size:13.5px; color:var(--x-ink); } body.c49dark .wnItem h4 { color:#a0bbcb; }
.wnItem div.wnTxt { font-size:12px; color:var(--x-sub); } body.c49dark .wnItem div.wnTxt { color:#a5b7c2; }
/* Expeditions: an explorer-journal feel (warm parchment in light, lantern-lit in dark) */
#expModal .box { background:linear-gradient(180deg,#eff3f6,#dce6eb); border:1px solid #abc3d0; }
body.c49dark #expModal .box { background:linear-gradient(180deg,#12242d,#13191c); border-color:#20404f; }
.expCard { border:1px solid #abc3d0; border-radius:10px; padding:11px 13px; margin:9px 0; background:rgba(255,255,255,.55); }
body.c49dark .expCard { border-color:#20404f; background:rgba(255,255,255,.04); }
.expCard h4 { margin:0 0 3px; font-size:15px; color:var(--x-warn); letter-spacing:.2px; }
body.c49dark .expCard h4 { color:#a6bfce; }
.expProg { height:7px; border-radius:5px; background:#bed0db; overflow:hidden; margin:7px 0 4px; }
body.c49dark .expProg { background:#283238; }
.expProg > i { display:block; height:100%; background:linear-gradient(90deg,#b8860b,#d8b258); }
.expSeal { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:1px 7px; border-radius:9px; }
.expSeal.locked { background:#24485a; color:#d2dfe6; } .expSeal.open { background:#1f6b3f; color:#fff; }
/* Rally flag: the loud recruitment banner that waves at the top of the group so people want to join */
.rallyFlag { position:relative; margin:0 0 10px; padding:11px 13px 11px 46px; border-radius:10px; color:#fff5e1;
background:linear-gradient(135deg,#365262,#9c5a1f 55%,#b8860b); border:1px solid #d8b258; box-shadow:0 4px 16px rgba(0,0,0,.32); overflow:hidden; }
.rallyFlag::before { content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%); width:22px; height:26px;
background:#d2dfe6; clip-path:polygon(0 0,100% 0,100% 78%,50% 62%,0 78%); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.rallyFlag .rfPole { position:absolute; left:22px; top:8px; bottom:8px; width:3px; background:#1b2931; border-radius:2px; }
.rallyFlag h4 { margin:0 0 2px; font-size:14.5px; color:#fff; letter-spacing:.3px; }
.rallyFlag .rfCta { display:inline-block; margin-top:7px; background:#1f6b3f; color:#fff; font-weight:800; font-size:12.5px; border:none; border-radius:8px; padding:6px 14px; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.35); }
.rallyFlag .rfCta:hover { background:#258a4f; }
.rallyFlag .rfProg { height:7px; border-radius:5px; background:rgba(0,0,0,.28); overflow:hidden; margin:7px 0 0; }
.rallyFlag .rfProg > i { display:block; height:100%; background:linear-gradient(90deg,#ffd98a,#fff); }
@keyframes rfWave { 0%,100%{ transform:translateY(-50%) skewY(0deg);} 50%{ transform:translateY(-50%) skewY(-4deg);} }
.rallyFlag::before { animation:rfWave 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rallyFlag::before { animation:none; } }
.dlcCard { border:1px solid #d0dbe2; border-radius:10px; padding:10px 12px; margin:8px 0; }
body.c49dark .dlcCard { border-color:#2b3439; background:#1e2529; }
.dlcCard h4 { margin:0 0 2px; font-size:14px; color:var(--x-ink); }
body.c49dark .dlcCard h4 { color:#a0bbcb; }
.dlcCard .meta { font-size:12px; color:var(--x-sub); margin-top:3px; }
.dlcKind { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; background:#d6e2e9; color:var(--x-sub); border-radius:10px; padding:1px 7px; vertical-align:middle; }
body.c49dark .dlcKind { background:#223038; color:#e6c879; }
.dlcTab { background:none; border:none; border-bottom:2px solid transparent; color:#485c67; font-size:13px; font-weight:700; padding:6px 8px; cursor:pointer; }
.dlcTab.on { color:#5e3a8c; border-bottom-color:#5e3a8c; }
body.c49dark .dlcTab { color:#a9beca; } body.c49dark .dlcTab.on { color:#c4a6ec; border-bottom-color:#c4a6ec; }
#consentModal { z-index:5000; background:rgba(20,12,4, .9); } /* blocking: highest, darkest, no easy dismiss */
#consentModal .box { background:#fff; border-radius:15px; padding:22px; max-width:94vw; width:440px; box-shadow:0 14px 44px rgba(0,0,0,.6); text-align:left; }
body.c49dark #consentModal .box { background:#12242d; color:#e3edf3; }
#planModal .box, #provenModal .box, #riversModal .box { background:#fff; border-radius:15px; padding:20px; max-width:96vw; width:520px; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:92vh; overflow:auto; text-align:left; }
body.c49dark #planModal .box, body.c49dark #provenModal .box, body.c49dark #riversModal .box { background:#12242d; color:#e3edf3; }
.planRow { display:flex; align-items:center; gap:8px; padding:8px 6px; border-bottom:1px solid #d5e1e8; cursor:pointer; }
body.c49dark .planRow { border-bottom-color:#2b3439; }
.planRow:hover { background:var(--x-paper-2); } body.c49dark .planRow:hover { background:#1a252b; }
.spin { display:inline-block; width:15px; height:15px; border:2px solid #c6d0d6; border-top-color:#4a6f85; border-radius:50%; animation:c49spin .7s linear infinite; vertical-align:-3px; margin-right:5px; }
@keyframes c49spin { to { transform:rotate(360deg); } }
/* "Rendering" pill for the slow USGS raster layers (LiDAR + historic topo), so the map never looks frozen */
#mapLoading { position:fixed; left:50%; top:74px; transform:translateX(-50%) translateY(-6px); z-index:1200; display:flex; align-items:center; gap:8px; background:rgba(17,26,31,.93); color:#b7ccd8; border:1px solid #6893ab; border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:600; box-shadow:0 6px 18px rgba(0,0, 0, .4); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
#mapLoading.show { opacity:1; transform:translateX(-50%) translateY(0); }
#mapLoading .ldSpin { display:inline-block; width:14px; height:14px; border:2px solid rgba(196,213,223,.35); border-top-color:#b7ccd8; border-radius:50%; animation:c49spin .7s linear infinite; }
/* live coordinate readout (grouped with the scale bar); monospace so digits don't jitter as they change */
.coordBox { background:rgba(9,14,17,.82); color:#b7ccd8; font:600 11.5px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; padding:4px 9px; border-radius:7px; cursor:pointer; box-shadow:0 1px 5px rgba(0,0, 0, .4); user-select:none; white-space:nowrap; margin-bottom:5px; }
.wfTri { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:12px solid #00acc1; filter:drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.tlTag { width:16px; height:16px; background:#1f6b3f; color:#fff; font-weight:800; font-size:12px; border-radius:4px; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; box-shadow:0 0 0 1px #555; }
/* Guide accordion drawers */
.gsec { border:1px solid #b3c9d5; border-radius:10px; margin:10px 0; background:#f0f4f7; }
.gsec > summary { cursor:pointer; padding:10px 14px; list-style-position:inside; }
.gsec > summary h2 { display:inline; margin:0; font-size:17px; border:none; padding:0; }
.gsec[open] > summary { border-bottom:1px dashed #b3c9d5; }
.gsec .gbody { padding:4px 16px 12px; }
body.c49dark .gsec { background:#12242d; border-color:#20404f; }
body.c49dark .gsec[open] > summary { border-bottom-color:#20404f; }
/* ===== Car Mode: big-target, glanceable layout for vehicle screens and mounted phones ===== */
body.c49car #hdr, body.c49car #trialBar, body.c49car #dockClub, body.c49car #dockTools, body.c49car .legend, body.c49car #labelsMapBtn { display:none !important; }
body.c49car #map { top:0 !important; }
#carRail { display:none; position:fixed; right:calc(12px + env(safe-area-inset-right)); top:50%; transform:translateY(-50%); flex-direction:column; gap:14px; z-index:1250; }
#carRail button { width:106px; height:90px; background:rgba(9,14,17,.93); color:#b7ccd8; border:2px solid #b8860b; border-radius:16px; font-weight:800; font-size:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0, 0, .5); }
#carRail button:active { transform:scale(.96); background:#b8860b; color:#0b1115; }
#carRail .ci { transform:scale(1.9); line-height:0; }
body.c49car .locBtn { transform:scale(1.6); transform-origin:bottom right; }
body.c49car .leaflet-control-zoom a { width:52px !important; height:52px !important; line-height:52px !important; font-size:26px !important; }
body.c49car .coordBox { font-size:15px; padding:7px 12px; }
@media (max-width: 480px) { #carRail button { width:86px; height:76px; font-size:13px; } #carRail { gap:10px; } }
/* the big buttons must never cover what they opened: while any modal or the side panel is up,
the rail steps aside (returns the moment the sheet closes) */
body.c49car:has([id$="Modal"].show) #carRail, body.c49car:has(#panel.open) #carRail { display:none !important; }
#carFollowBtn.on { background:#0a8754; border-color:#0f6b45; color:#eafff3; }
#carHud { min-height:22px; text-align:center; color:#ffd54f; font-weight:800; font-size:20px; text-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none; }
.coordBox:hover { background:rgba(18,28,34,.92); }
/* consistent, teaching "nothing here yet" block for empty member panels */
.emptyState { text-align:center; padding:26px 18px 22px; }
.emptyState .esIcon { opacity:.38; margin-bottom:7px; line-height:0; }
.emptyState .esIcon svg { width:34px; height:34px; }
.emptyState .esTitle { font-weight:800; font-size:14.5px; color:#30424c; margin-bottom:4px; }
.emptyState .esSub { font-size:12.5px; line-height:1.55; color:var(--x-sub); max-width:290px; margin:0 auto 13px; }
.emptyState .esCta { display:inline-block; width:auto; padding:8px 18px; }
body.c49dark .emptyState .esTitle { color:#e3edf3; }
body.c49dark .emptyState .esSub { color:#9cacb6; }
.hmBtn { flex:1; background:#dce6eb; border:1px solid var(--x-line); border-radius:6px; padding:4px 0; cursor:pointer; color:#30424c; font-size:12px; }
.hmBtn.on { background:#445c6a; color:#fff; border-color:#445c6a; }
body.c49dark .hmBtn { background:#1a252b; color:#b9cbd5; border-color:#384248; }
body.c49dark .hmBtn.on { background:#4a6f85; color:#fff; }
#swipeBar { display:none; position:absolute; top:0; bottom:0; width:0; border-left:3px solid #fff; box-shadow:0 0 6px rgba(0,0,0,.6); z-index:455; cursor:ew-resize; }
#swipeBar .grip { position:absolute; top:50%; left:-15px; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; color:#445c6a; font-size:14px; }
#map3d { display:none; position:fixed; inset:0; z-index:3000; background:#0a0a0a; }
#map3d.show { display:block; }
#map3dCanvas { position:absolute; inset:0; }
#map3dBar { position:absolute; top:10px; left:10px; right:10px; z-index:5; display:flex; gap:6px; flex-wrap:wrap; align-items:center; background:rgba(9,14,17,.85); color:#b7ccd8; padding:7px 10px; border-radius:10px; font-size:12px; box-shadow:0 4px 16px rgba(0,0,0,.5); }
#map3dBar .hmBtn { flex:0 0 auto; padding:4px 9px; }
/* Collapsible 3D bar: the middle controls live in #d3barTools, which flows inline exactly as before
(display:contents) but can be hidden as one unit so a guided flyover has the whole screen. Back +
the Controls toggle stay pinned. */
#d3barTools { display:contents; }
#map3dBar.collapsed #d3barTools { display:none; }
#map3dBar.collapsed #map3dMsg { display:none; }
#map3dBar.collapsed { right:auto; width:max-content; max-width:calc(100vw - 20px); }
#d3barToggle::after { content:'\25B4'; margin-left:5px; font-size:11px; opacity:.85; }
#map3dBar.collapsed #d3barToggle::after { content:'\25BE'; }
#d3labels.on { background:#b8860b; color:#0b1115; }
/* On-map "Labels" quick toggle (2D), so satellite names are one tap away without opening the panel */
.c49MapBtn { background:rgba(9,14,17,.86); color:#b7ccd8; border:1px solid rgba(196,213,223,.35); border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.35); display:inline-flex; align-items:center; gap:5px; line-height:1; }
.c49MapBtn:hover { background:rgba(18,28,34,.95); }
.c49MapBtn.on { background:#b8860b; color:#0b1115; border-color:#e8c15a; }
.c49FlatBtn { border-color:rgba(212,175,55,.7); box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(212,175,55,.25); }
.c49FlatBtn:hover { background:linear-gradient(180deg,#e6c15c,#c49a2c); color:#0b1115; }
.c49MapBtn svg { width:15px; height:15px; }
#map3dHint { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:5; background:rgba(9,14,17,.8); color:#b7ccd8; padding:5px 12px; border-radius:9px; font-size:12.5px; }
/* ===== Guided 3D journeys (Seven Wonders + the Gold Road): the cinematic caption card ===== */
#jrSel, #d3overlay, #d3quick, #d3detect, #d3markers { flex:0 0 auto; background:#131d23; color:#b7ccd8; border:1px solid #314a59; border-radius:7px; padding:4px 6px; font-size:12px; font-weight:700; cursor:pointer; max-width:180px; }
#d3overlay option, #jrSel option, #d3quick option, #d3detect option, #d3markers option { background:#10181c; color:#b7ccd8; }
#d3markers.on { border-color:#e8c15a; }
#d3detect.on, #jrSel.on { border-color:#e8c15a; }
#map3dCanvas.lab3d { filter:contrast(1.12) saturate(1.18) brightness(1.03); } /* "Enhance": the Image Lab pop, for 3D */
#jrCard { display:none; position:absolute; left:50%; bottom:52px; transform:translateX(-50%); z-index:6;
width:min(440px, calc(100vw - 24px)); box-sizing:border-box; background:linear-gradient(180deg,rgba(28,20,8,.94),rgba(18,12,5,.96));
color:#dae5eb; border:1px solid #314a59; border-radius:14px; padding:13px 15px; box-shadow:0 10px 34px rgba(0,0,0,.6); text-align:left; }
#jrCard.show { display:block; animation:c49BoxIn .3s var(--c49-ease); }
#jrName { font-size:11.5px; text-transform:uppercase; letter-spacing:1.4px; color:#6893ab; font-weight:800; }
#jrTitle { font-size:17px; font-weight:800; margin:2px 0 4px; color:#d5e1e8; }
#jrBlurb { font-size:12.5px; line-height:1.5; color:#bfd1db; min-height:34px; }
#jrProg { height:4px; background:rgba(255,255,255,.14); border-radius:3px; margin:9px 0 8px; overflow:hidden; }
#jrProg > div { height:100%; width:0; background:linear-gradient(90deg,#d4af37,#e8c15a); border-radius:3px; transition:width .5s ease; }
#jrCtrls { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#jrCtrls button { flex:0 0 auto; background:#1b2931; color:#b7ccd8; border:1px solid #314a59; border-radius:8px; padding:6px 11px; font-size:12.5px; font-weight:700; cursor:pointer; transition:transform .12s var(--c49-ease), background .12s; }
#jrCtrls button:hover { background:#21323c; } #jrCtrls button:active { transform:scale(.94); }
#jrCtrls .jrPrimary { background:#b8860b; color:#0f171b; border-color:#b8860b; }
#jrReliefBtn.on { background:#1f6b3f; border-color:#1f6b3f; color:#fff; }
@media (max-width:640px){ #jrCard { bottom:44px; padding:11px 12px; } #jrTitle { font-size:15.5px; } }
#briefModal .box { background:#fff; border-radius:15px; padding:0; max-width:96vw; width:560px; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:92vh; overflow:auto; }
body.c49dark #briefModal .box { background:#12242d; color:#e3edf3; }
#briefBody { padding:20px 22px; }
#briefBody h2 { font-size:16px; color:#30424c; margin:0 0 2px; } body.c49dark #briefBody h2 { color:#a0bbcb; }
#briefBody h4 { font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--x-sub); margin:14px 0 4px; border-bottom:1px solid #ccdbe3; padding-bottom:3px; }
body.c49dark #briefBody h4 { color:#7da2b7; border-bottom-color:#2b3439; }
#briefBody ol, #briefBody ul { margin:4px 0; padding-left:18px; }
#briefBody li { margin:3px 0; }
#briefBody .kv { font-size:13px; line-height:1.6; }
@media print {
body * { visibility:hidden !important; }
#briefModal, #briefModal * { visibility:visible !important; }
#briefModal { position:absolute; inset:0; background:#fff; display:block !important; }
#briefModal .box { box-shadow:none; max-height:none; width:100%; border-radius:0; }
.briefHide { display:none !important; }
}
/* Class rule so a new modal is sized like the rest without being added to yet another id
list. Without this a box has no padding and no height bound, which put the save button
below the bottom of a phone screen with nothing to scroll. */
.modal .box { padding:20px; max-width:94vw; max-height:88vh; overflow:auto;
-webkit-overflow-scrolling:touch; }
#aiModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
body.c49dark #aiModal .box { background:#12242d; color:#e3edf3; }
#aiResult a { color:var(--x-info); } body.c49dark #aiResult { color:#cfdde5; }
#profileModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
body.c49dark #profileModal .box { background:#12242d; color:#e3edf3; }
body.c49dark #emojiPanel, body.c49dark #gifPanel { background:#12242d; border-color:#2b3439; }
#notifModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
body.c49dark #notifModal .box { background:#12242d; color:#e3edf3; }
#workModal .box, #journalModal .box { background:#fff; border-radius:15px; padding:20px; max-width:94vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
body.c49dark #workModal .box, body.c49dark #journalModal .box { background:#12242d; color:#e3edf3; }
/* the find journal is leather-bound, same family as the club airwaves: a parchment page inside an
oxblood cover, stitched along the seam */
#journalModal .box { border:12px solid transparent; border-radius:14px;
background: linear-gradient(180deg,#f1f5f8,#dae5eb) padding-box,
linear-gradient(160deg,#2e4552,#1d2c35 60%,#151f25) border-box;
outline:2px dashed rgba(197,213,223,.45); outline-offset:-8px;
box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 0 18px rgba(43,65,77,.12); }
body.c49dark #journalModal .box { background: linear-gradient(180deg,#12242d,#13191c) padding-box,
linear-gradient(160deg,#2e4552,#1d2c35 60%,#151f25) border-box; }
.gtruth { background:#eef6ee; border:1px solid #cfe6cf; border-radius:6px; padding:5px 7px; margin:5px 0; font-size:12.5px; color:#2f5a2f; }
body.c49dark .gtruth { background:#1a241a; border-color:#2f5a2f; color:#9fd49f; }
.workTabs { display:flex; gap:4px; border-bottom:1px solid #d0dbe1; flex-wrap:wrap; }
.wtab { background:transparent; border:0; padding:7px 9px; font-size:12.5px; font-weight:600; color:var(--x-sub); cursor:pointer; border-bottom:2px solid transparent; }
.wtab.on { color:var(--x-info); border-bottom-color:#b8860b; }
body.c49dark .wtab { color:#9aaeb9; } body.c49dark .wtab.on { color:#a0bbcb; }
.gigCard { border:1px solid #d0dbe1; border-radius:10px; padding:10px 11px; margin-bottom:8px; }
body.c49dark .gigCard { border-color:#2b3439; background:#1e2529; }
.gigKind { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:20px; color:#fff; vertical-align:middle; }
.gk-hiring { background:#b8860b; } .gk-paid { background:#2f6b50; } .gk-shares { background:#4a6f85; } .gk-rec { background:#15314b; } .gk-equipment { background:#6a4fa3; } .gk-mentor { background:#667d8a; }
.gigRep { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--x-sub); margin:6px 0; }
body.c49dark .gigRep { color:#9aaeb9; }
.repBadge { font-size:11px; font-weight:700; color:var(--x-sub); background:var(--x-paper-2); border:1px solid var(--x-line); border-radius:20px; padding:1px 7px; }
body.c49dark .repBadge { background:#212b32; color:#e6c879; border-color:#35505f; }
.chipBtn { font-size:12.5px; padding:4px 9px; border-radius:20px; border:1px solid var(--x-line); background:#fff; color:var(--x-sub); cursor:pointer; }
.chipBtn.on { background:#15314b; color:#fff; border-color:#15314b; }
body.c49dark .chipBtn { background:#1e2529; color:#a9beca; border-color:#2b3439; }
#annModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
body.c49dark #annModal .box { background:#12242d; color:#e3edf3; }
#shareSpotModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
body.c49dark #shareSpotModal .box { background:#12242d; color:#e3edf3; }
#shareModal .box, #commModal .box, #hubModal .box, #analysisModal .box, #dmModal .box { background:#fff; border-radius:15px; padding:20px; width:340px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); text-align:center; max-height:90vh; overflow:auto; }
#commModal .box, #hubModal .box, #analysisModal .box, #dmModal .box { width:420px; text-align:left; }
.anFactor { display:flex; align-items:center; gap:8px; font-size:12.5px; margin:4px 0; color:var(--x-ink); }
.anDot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.anBar { height:10px; border-radius:6px; background:#cddbe3; overflow:hidden; }
.anBar > div { height:100%; background:linear-gradient(90deg, #b8860b, #d4af37); }
.shareGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.shareGrid a, .shareGrid button { display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none;
border:none; cursor:pointer; border-radius:9px; padding:11px 8px; font-size:13px; font-weight:700; color:#fff; }
.sh-sms{background:#0a8754}.sh-fb{background:#1877f2}.sh-x{background:#111}.sh-wa{background:#25d366}.sh-em{background:#6a4fa3}.sh-cp{background:#b8860b}
#refLink { width:100%; box-sizing:border-box; font-size:12px; padding:8px; border:1.5px solid #758c99; border-radius:7px; text-align:center; color:var(--x-ink); background:#f1f5f7; }
.credPill { display:inline-block; background:#b8860b; color:#fff; font-weight:800; border-radius:20px; padding:3px 11px; font-size:12.5px; }
.post { border:1px solid #d0dbe1; border-radius:10px; padding:9px; margin-bottom:9px; background:#f4f7f9; }
.post img { width:100%; border-radius:7px; display:block; margin-bottom:6px; max-height:240px; object-fit:cover; }
.fvb { display:inline-flex; align-items:center; background:#1d4a31; color:#d7f0c9; border:1px solid #2f6b50; border-radius:6px; padding:1px 7px; font-size:11px; font-weight:800; letter-spacing:.5px; vertical-align:middle; }
.fvb-corner { position:absolute; top:5px; left:5px; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.cvPin { background:none; border:none; }
.cvPinIn { width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #e05a4e, #a52f24); border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.45); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; padding-left:2px; box-sizing:border-box; }
.cvPlayBtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(165,47,36,.92); border:2px solid #fff; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; padding-left:3px; box-sizing:border-box; box-shadow:0 3px 12px rgba(0,0,0,.5); }
#flatModal { display:none; position:absolute; inset:0; z-index:1400; background:rgba(20,12,4,.72); align-items:flex-start; justify-content:center; overflow:auto; }
#flatModal.show { display:flex; }
/* max-height + scroll: windowed, this box runs 1474px of controls, so on a phone the bottom two
thirds were simply unreachable. Its fullscreen variant below already scrolled; this one never did. */
#flatModal .fmBox { background:linear-gradient(180deg,#eff3f6,#d6e1e8); border:1px solid #abc3d0; border-radius:15px; padding:18px; width:min(96vw,600px); margin:12px; box-shadow:0 14px 44px rgba(0,0,0,.55); max-height:calc(100dvh - 24px); overflow:auto; -webkit-overflow-scrolling:touch; }
#flatModal canvas { max-width:100%; border-radius:50%; box-shadow:0 0 0 3px #b8860b, 0 0 0 8px #2a3f4b, 0 6px 22px rgba(0,0,0,.5); }
.fmBtn { background:rgba(9,14,17,.9); color:#b7ccd8; border:1px solid rgba(196,213,223,.4); border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.fmBtn:hover { background:#1b2931; }
.fmBtn.on { background:#b8860b; color:var(--x-ink); border-color:#b8860b; }
.fmSw { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(0,0,0,.35); box-shadow:0 0 0 .5px rgba(255,255,255,.4); }
#flatModal .fmCtl { display:flex; gap:7px; justify-content:center; align-items:center; margin-top:10px; flex-wrap:wrap; }
#flatModal .fmZoomGrp { display:inline-flex; }
#flatModal .fmZoomGrp .fmBtn { min-width:34px; }
#flatModal .fmZoomGrp .fmBtn:first-child { border-radius:8px 0 0 8px; }
#flatModal .fmZoomGrp .fmBtn:last-child { border-radius:0 8px 8px 0; margin-left:-1px; }
#flatModal .fmLegend { margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px 16px; }
#flatModal .fmGrpH { font:700 10px/1 Georgia,serif; letter-spacing:.8px; text-transform:uppercase; color:#638396; margin:0 0 7px; padding-bottom:4px; border-bottom:1px solid rgba(90,58,26,.16); }
#flatModal .fmGrid { display:flex; flex-direction:column; gap:5px; }
.fmChip { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:rgba(9,14,17,.05); color:var(--x-ink); border:1px solid rgba(90,58,26,.18); border-radius:8px; padding:7px 10px; font:600 12.5px Georgia,serif; cursor:pointer; transition:background .12s,border-color .12s; }
.fmChip:hover { background:rgba(184,134,11,.14); border-color:rgba(184,134,11,.4); }
.fmChip.on { background:#b8860b; color:var(--x-ink); border-color:#b8860b; font-weight:700; }
.fmChip.on .fmSw { border-color:rgba(0,0,0,.5); }
body.c49dark #flatModal .fmGrpH { color:#8fafc1; border-color:rgba(255,255,255,.12); }
body.c49dark .fmChip { background:rgba(255,255,255,.05); color:#e3edf3; border-color:rgba(255,255,255,.13); }
body.c49dark .fmChip:hover { background:rgba(184,134,11,.22); }
body.c49dark .fmChip.on { background:#b8860b; color:var(--x-ink); }
#flatModal.fs .fmBox { width:100vw; height:100dvh; max-width:none; border-radius:0; margin:0; padding:10px 10px 6px; overflow:auto; }
body.c49dark #flatModal .fmBox { background:linear-gradient(180deg,#12242d,#13191c); border-color:#20404f; color:#e3edf3; }
/* EXPEDITION DESK rail: one column, every station, desktop only */
#navRail { display:none; }
@media (min-width: 900px) {
#navRail { display:flex; flex-direction:column; gap:2px; position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; bottom:0; width:58px; background:linear-gradient(180deg,#162128,#11181c); border-right:1px solid rgba(214,178,87,.28); z-index:1150; padding:8px 0; }
.nrBtn { background:none; border:none; color:#99b6c6; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px; font-size:10.5px; font-weight:700; letter-spacing:.2px; border-left:3px solid transparent; border-right:3px solid transparent; }
.nrBtn svg { width:20px; height:20px; }
.nrBtn:hover { color:#b7ccd8; background:rgba(214,178,87,.09); }
.nrBtn.on { color:#a0bbcb; border-left-color:#d6b257; background:rgba(214,178,87,.14); }
#map, #aboutView, #tableView, #panel { left:58px; }
#dockClub, #aiFab, #dockTools, #dockRadio { display:none !important; }
}
.post .meta { font-size:12px; color:var(--x-sub); }
.post .cap { font-size:13px; color:var(--x-ink); margin:2px 0; }
.commTabs { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:8px; }
#panelClose { display:none; }
@media (max-width: 640px) { #panelClose { display:block; width:100%; box-sizing:border-box; background:#3b4246; color:#cbdae3; border:none; padding:9px; font-size:14px; font-weight:700; cursor:pointer; } }
/* ===== "How are you liking it?" review invite (guests, after real use) ===== */
#reviewModal { display:none; position:absolute; inset:0; z-index:1600; background:rgba(20,12,4,.72); align-items:center; justify-content:center; }
#reviewModal.show { display:flex; }
#reviewModal .box { background:#fff; border-radius:16px; padding:20px; width:360px; max-width:calc(100vw - 24px); max-height:90vh; overflow:auto; box-shadow:0 16px 48px rgba(0,0, 0, .55); text-align:left; }
body.c49dark #reviewModal .box { background:#12242d; color:#e3edf3; }
body.c49dark #reviewModal .box p, body.c49dark #reviewModal .box h3 { color:#e3edf3; }
#revStars { display:flex; justify-content:center; gap:8px; font-size:32px; line-height:1; margin:2px 0 12px; }
#revStars span { cursor:pointer; color:#b3c9d5; user-select:none; transition:transform .08s; }
#revStars span.on { color:#e8b923; text-shadow:0 1px 2px rgba(0,0, 0, .18); }
#revStars span:active { transform:scale(1.18); }
/* the inline-positioned floating controls also clear a landscape notch on the right */
#dockClub, #aiFab, #dockTools { right:calc(10px + env(safe-area-inset-right)) !important; }
/* ===== DARK MODE (UI chrome; map imagery stays) ===== */
body.c49dark { background:#0c1114; }
body.c49dark #hdr { background:#13181b; border-bottom-color:#000; }
body.c49dark #panel, body.c49dark #aboutView, body.c49dark #tableView { background:#151a1d; color:#e3edf3; }
body.c49dark #controls { border-bottom-color:#232c32; }
body.c49dark #controls details { border-top-color:#232c32; }
body.c49dark #controls summary { color:#a0bbcb; }
body.c49dark #controls summary:hover { color:#ffd98a; }
body.c49dark .ckRow { color:#cfdde5; }
body.c49dark .ckRow input[type=checkbox] { background:#485258; border-color:rgba(0,0, 0, .35); }
body.c49dark .ckRow input[type=checkbox]:checked { background:#caa133; }
body.c49dark .subWrap label { color:#afc1cb; }
body.c49dark .hint { color:#a5b7c2; }
body.c49dark .pgLabel { color:#a9beca; }
body.c49dark [style*="color:var(--x-info)"] { color:#86b4ea !important; } /* navy job titles -> readable blue on dark */
#jobsLinks a:hover .jl-title, #usaJobsList a:hover { text-decoration:underline; }
body.c49dark .hint[style*="f3efe6"], body.c49dark #adjustBar { background:#1c2429 !important; }
body.c49dark .c49in, body.c49dark #hhJump, body.c49dark #homeAddr, body.c49dark #refLink,
body.c49dark #tFilters input, body.c49dark #tFilters select { background:#1c2429; color:#e3edf3; border-color:#20404f; }
body.c49dark [style*="background:var(--x-paper-2)"] { background:#212b32 !important; border-color:#20404f !important; color:#e6c879 !important; } /* chat/comment photo, emoji, GIF buttons */
body.c49dark [style*="background:#f1f5f7"] { background:#13181b !important; } /* chat log + inline cream panels */
body.c49dark #hhJumpWrap { background:#12242d; border-top-color:#1e3a48; }
body.c49dark #hhJumpWrap label { color:#a0bbcb; }
body.c49dark .hh { border-bottom-color:#1e262b; }
body.c49dark .hh:hover { background:#1c2429; }
body.c49dark .hh b { color:#d8e3ea; }
body.c49dark .hh .sub { color:#94a6b1; }
body.c49dark #panel > div[style*="border-bottom"] { color:#e3edf3 !important; }
body.c49dark #authModal .box, body.c49dark #adminModal .box, body.c49dark #shareModal .box, body.c49dark #commModal .box, body.c49dark #hubModal .box, body.c49dark #analysisModal .box, body.c49dark #dmModal .box { background:#12242d; color:#e3edf3; }
body.c49dark .anFactor { color:#cfdde5; }
body.c49dark #hubHead h3, body.c49dark #hubPerks > div:first-child { color:#a0bbcb; }
body.c49dark #hubPerks > div { color:#afc1cb !important; }
body.c49dark #authModal h3, body.c49dark #adminModal h3 { color:#a0bbcb; }
/* dark-mode rescue: any hardcoded dark inline text becomes readable */
body.c49dark [style*="3a2a12"], body.c49dark [style*="3a2412"], body.c49dark [style*="3a2a10"] { color:#a0bbcb !important; }
body.c49dark [style*="1f1a12"], body.c49dark [style*="241d0c"] { color:#cfdde5 !important; }
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:#666"], body.c49dark [style*="color:var(--x-sub)"],
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-ink)"], body.c49dark [style*="color:#444"],
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-ink)"],
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-sub)"],
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:#485c67"], body.c49dark [style*="color:#5a504"] { color:#a5b7c2 !important; }
/* dark mode: the walkthrough card has an inline white background, so its recolored (light) title/body
would be light-on-white. Force the card dark (!important beats the inline style) so every step reads. */
body.c49dark #tourTip { background:#12242d !important; color:#e3edf3 !important; box-shadow:0 12px 44px rgba(0,0,0,.72); }
/* walkthrough: premium card polish (accent bar, step icon, progress bar, animated ring) */
#tourTip { overflow:hidden; }
#tourAccent { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#f6dd88,#d4af37,#a8801f); }
#tourHd { display:flex; align-items:center; gap:9px; margin-bottom:2px; }
#tourIcon { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:16px; background:linear-gradient(180deg,#dde7ed,#a3bdcc); color:#263944; box-shadow:0 1px 3px rgba(0,0,0,.2); }
body.c49dark #tourIcon { background:linear-gradient(180deg,#243742,#17242b); color:#bdd0db; }
#tourProg { height:5px; background:rgba(0,0,0,.09); border-radius:3px; margin:11px 0 3px; overflow:hidden; }
body.c49dark #tourProg { background:rgba(255,255,255,.12); }
#tourProg > div { height:100%; width:0; background:linear-gradient(90deg,#d4af37,#b8902f); border-radius:3px; transition:width .35s ease; }
#tourBack { background:none; border:none; color:var(--x-sub); font-size:12.5px; cursor:pointer; padding:6px 8px; }
#tourBack:hover { color:var(--x-ink); } body.c49dark #tourBack:hover { color:#bdd0db; }
#tourTip.in { animation: tourpop .3s cubic-bezier(.2,.8,.3,1); }
@keyframes tourpop { from { opacity:0; transform:translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { #tourTip.in { animation:none; } #tourProg > div { transition:none; } }
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-gold)"] { color:#e6c879 !important; }
/* Not on YOUR row. That row is tinted gold, and this muted grey lands at 4.18 against it,
which is why the XP beside your own name was the hardest thing on the screen to read.
Everyone else's rows sit on the plain modal background where the grey is fine. */
body.c49dark .post .meta, body.c49dark .arow:not(.mine) span:not(.credPill):not(.scoreChip) { color:#8b9da7 !important; }
body.c49dark .arow.mine span { color:#eaf1f5 !important; }
body.c49dark #authModal p { color:#aebec7; }
body.c49dark .post { background:#1c2429; border-color:#1e3a48; }
body.c49dark .post .cap { color:#e3edf3; }
body.c49dark #aboutInner { color:#cfdde5; }
body.c49dark #aboutInner h2 { color:#a0bbcb; border-bottom-color:#445c6a; }
body.c49dark #gtbl td { border-bottom-color:#1e262b; }
body.c49dark #gtbl tr:nth-child(even) td { background:#12242d; }
body.c49dark #tFilters { background:#12242d; border-bottom-color:#1e3a48; }
/* ===== MOBILE (phones / narrow) ===== */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (max-width: 640px) {
#hdr { gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 7px; scrollbar-width:none; -ms-overflow-style:none; }
#hdr::-webkit-scrollbar { display:none; }
#hdr h1 { display:none; }
.hlbl { display:none; } /* icon-only toolbar on phones so every button fits, no sideways scroll */
#hdr button { font-size:13px; padding:7px 8px; flex-shrink:0; }
#hdr .preset { padding:6px 6px; font-size:12px; }
#regionSel { max-width:64px; font-size:12px; } /* compact "CA..." on phones, full list on tap */
/* phones: the wordmark hides, so let the LOGO carry the brand, a touch larger + a crisper ring */
#brandLogo, #brandEmblem { width:36px; height:36px; border-width:2.5px; box-shadow:0 1px 7px rgba(0,0, 0, .65); }
#brand { margin-right:2px; }
#hdr button { min-height:40px; } /* comfortable thumb targets */
.abtn, .xbtn, .popBtn, .chipBtn { min-height:44px; } /* 44 is the touch minimum, 42 was just under */
#panel { width:100%; max-width:100%; }
#controls { padding:12px 14px 8px; }
#controls summary { font-size:14px; padding:9px 0 8px; }
.ckRow { font-size:14px; gap:8px; margin-bottom:9px; align-items:center; }
.ckRow input[type=checkbox] { width:40px; height:22px; flex-shrink:0; }
.subWrap { gap:7px 14px; margin-left:18px; }
.subWrap label { font-size:13px; }
.subWrap input[type=checkbox] { width:17px; height:17px; }
.preset { font-size:13px; padding:8px 13px; }
.hh { padding:13px 14px; }
.hh b { font-size:15px; }
.hh .sub { font-size:13px; }
#hhJump { font-size:16px; padding:12px; } /* 16px stops iOS zoom-on-focus */
.c49in, #homeAddr { font-size:16px; padding:11px; }
.xbtn, .abtn { font-size:14px; padding:9px 13px; }
.pop b { font-size:15px; } .pop td { font-size:14px; }
.leaflet-popup-content { font-size:14px; }
.legend { font-size:13px; max-width:calc(100vw - 78px); } /* opened, it stops short of the right-hand button stack */
#dockClub, #aiFab, #dockTools { width:46px !important; height:46px !important; } /* comfortable thumb targets */
/* On a phone the filter bar wraps to several rows. The old build trapped it in a tiny 108px
inner-scroll box, which clipped the burn filter, the search field and the CSV button (it looked
broken). Instead let it scroll away with the page and pin the dark table header to the top, the
expected mobile-table pattern. The app's top bar stays above the table for navigation. */
#tFilters { font-size:13px; gap:6px 11px; padding:7px 10px; position:static; max-height:none; overflow:visible; }
#tFilters input[type=number], #tFilters input[type=text], #tFilters select { font-size:16px; padding:4px 5px; }
#tFilters input[type=number] { width:58px; }
#gtbl th, #gtbl td { padding:8px 7px; font-size:13px; }
#gtbl th { top:0; } /* filters scroll away above it, so the header pins to the top of the scroll area */
/* the data table is too wide for a phone, so show only the columns that matter on the go
(Type, Name, Score, Miles, Claim). The rest stay on desktop and in each spot's popup. */
#gtbl .c-placers, #gtbl .c-lode, #gtbl .c-rock, #gtbl .c-catch,
#gtbl .c-fpw, #gtbl .c-bench, #gtbl .c-burn, #gtbl .c-detail { display:none; }
#gtbl .c-name { max-width:42vw; white-space:normal; word-break:break-word; }
}
/* ===== map markers + Leaflet UI contrast (read over ANY basemap) ===== */
.honeyIcon { text-shadow:0 0 4px #fff, 0 0 2px #fff, 0 1px 3px rgba(0,0, 0, .9); }
.gaugeIcon, .caveIcon { text-shadow:0 0 3px #fff, 0 0 2px #fff, 0 1px 2px rgba(0,0, 0, .85); }
.scoutIcon, .caseIcon, .inspectIcon { box-shadow:0 0 0 1px rgba(0,0, 0, .35), 0 1px 5px rgba(0,0, 0, .6); }
.goldClu, .commodClu, .honeyClu, .scoutClu { box-shadow:0 0 0 1px rgba(0,0, 0, .25), 0 1px 6px rgba(0,0, 0, .55); text-shadow:0 1px 1px rgba(255,255,255, .4); }
.leaflet-popup-content-wrapper { box-shadow:0 3px 16px rgba(0,0, 0, .5); }
.legend { box-shadow:0 2px 10px rgba(0,0, 0, .5); }
.leaflet-bar a { font-weight:700; color:#152027; }
.leaflet-control-layers-toggle { box-shadow:0 1px 5px rgba(0,0, 0, .5); }
/* popup never taller/wider than the screen (scrolls instead of forcing zoom) */
.leaflet-popup-content { max-height:60vh; overflow-y:auto; overflow-x:hidden; margin:11px 13px; }
.leaflet-popup-content-wrapper { max-width:90vw; }
.pop table { width:100%; } .pop td { vertical-align:top; }
.pop td:first-child { white-space:nowrap; padding-right:7px; color:var(--x-sub); }
.pop td:last-child { word-break:break-word; }
/* crisp, high-contrast map scale */
.leaflet-control-scale-line { font-weight:700; font-size:12.5px; color:var(--x-ink); background:rgba(255,255,255, .94); border:2px solid #555; border-top:none; padding:1px 6px; line-height:1.4; box-shadow:0 1px 4px rgba(0,0, 0, .45); text-shadow:none; }
/* dark mode: lift low-contrast reds (claim warnings, etc.) */
body.c49dark [style*="c62828"] { color:#ff8a8a !important; }
body.c49dark .favNo { color:#ff8a8a !important; }
/* DARK MODE: make Leaflet's own white chrome match the dark UI */
body.c49dark .leaflet-popup-content-wrapper, body.c49dark .leaflet-popup-tip { background:#12242d; color:#e3edf3; }
body.c49dark .leaflet-popup-content, body.c49dark .pop, body.c49dark .pop b { color:#e3edf3; }
body.c49dark .pn, body.c49dark .pop .pn { color:#a5b7c2; }
body.c49dark .pop td:first-child { color:#92a7b3; }
body.c49dark .leaflet-popup-content a, body.c49dark .pop a { color:#82b6ff; }
body.c49dark .leaflet-popup-close-button { color:#a9beca; }
body.c49dark .leaflet-control-layers, body.c49dark .legend,
body.c49dark .leaflet-control-attribution, body.c49dark .leaflet-control-scale-line { background:#12242d !important; color:#e3edf3 !important; border-color:#20404f !important; }
body.c49dark .leaflet-control-attribution a { color:#82b6ff; }
body.c49dark .leaflet-bar a { background:#12242d; color:#e3edf3; border-bottom-color:#1e3a48; }
body.c49dark .leaflet-bar a:hover { background:#222b31; }
body.c49dark .leaflet-control-layers-toggle { filter:invert(1) hue-rotate(180deg); }
/* dark mode fixes the NEW legend structure: the card is the details element now, and faded
(off) entries need more presence against the dark card */
body.c49dark .legend { background:transparent !important; }
body.c49dark .legend details { background:#12242d; color:#e3edf3; border:1px solid #20404f; }
body.c49dark .legend .lgItem.dim { opacity:.55; }
/* TRUE NIGHT: dark mode drops a moonlight filter over the map imagery itself (markers, popups and
controls ride separate panes and stay bright), and NASA's Black Marble city lights screen-blend
on top, so at night the towns genuinely glow. */
body.c49dark .leaflet-tile-pane { filter:brightness(.55) saturate(.6) contrast(1.06); }
.nightLights { mix-blend-mode:screen; }
body.c49dark .locBtn { background:#12242d; color:#e3edf3; box-shadow:0 1px 5px rgba(0,0, 0, .6); }
/* ===== Club 49 brand (logo vibe: dark olive + antique gold + silver ring) ===== */
#hdr { background:linear-gradient(180deg, #313639, #1f2427); border-bottom:2px solid #6893ab; gap:8px; }
#brand { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
#brandLogo, #brandEmblem { width:30px; height:30px; border-radius:50%; flex-shrink:0; border:2px solid #c5cbce; box-shadow:0 1px 5px rgba(0,0, 0, .55); }
#brandLogo { object-fit:cover; background:#1f2427; }
#betaChip { border:1px solid #6893ab; color:#e8c15a; font-size:9px; font-weight:800; letter-spacing:1.2px; padding:1px 5px; border-radius:5px; vertical-align:middle; margin-left:4px; }
#brandEmblem { align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:-.5px; color:#d4af37; background:radial-gradient(circle at 50% 36%, #3b4145, #191e20); }
/* region dropdown: one compact control instead of per-state chips; new states = new options */
#regionSel { flex-shrink:0; background:#31393e; color:#dfe9ef; border:1px solid #485258; border-radius:7px;
padding:5px 4px; font-size:12.5px; font-weight:700; cursor:pointer; max-width:120px; }
#regionSel:hover { background:#3c464c; }
#regionSel option { background:#202629; color:#e3edf3; }
@media (max-width: 640px) { #regionSel { max-width:64px; font-size:12px; } } /* re-stated AFTER the base rule so it wins the cascade on phones */
/* the open surface shows on its header button: a gold underline says "you are here" */
#hdr button.on { box-shadow:inset 0 -3px 0 var(--c49-gold-hi), inset 0 1px 0 rgba(255,255,255,.14), var(--c49-shadow-1); filter:brightness(1.12); }
/* the wordmark NEVER clips: "Club 49" is the floor (min-content), "Prospecting" gives way first */
#hdr h1 { font-size:14px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#b9cdd9; margin:0; display:flex; align-items:baseline; gap:6px; overflow:hidden; min-width:min-content; }
#hdr h1 .wm { flex:0 0 auto; white-space:nowrap; }
#hdr h1 .sub { font-weight:600; letter-spacing:2px; color:#88a3b2; font-size:12px; flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 980px) { #hdr h1 .sub { display:none; } #hdr { gap:8px; } } /* mid widths: logo + CLUB 49, whole and unclipped */
#brand { min-width:min-content; } /* the brand box may NEVER shrink under its wordmark: no sibling can sit on the 49 again */
@media (max-width: 900px) { #hdr .hlbl { display:none; } } /* mid widths: icon-only toolbar buttons so the row always fits */
#btnPanel, #btnTable, #btnAbout { background:#3b4246; color:#cbdae3; border:1px solid #4a555b; }
#btnPanel:hover, #btnTable:hover, #btnAbout:hover { background:#414c52; }
#adminBtn { display:none; background:#406174 !important; border:none; color:#fff; font-size:13px; font-weight:700; padding:6px 12px; border-radius:6px; cursor:pointer; flex-shrink:0; }
#authBtn { background:#6893ab; color:var(--x-ink); border:1px solid #e6c878; font-weight:800; }
#authBtn:hover { background:#d8b258; }
body.c49dark #hdr { background:linear-gradient(180deg, #1a1f21, #101416); border-bottom-color:#4a6f85; }
@media (max-width: 640px) { #hdr h1 { display:none; } #brand { flex:0 0 auto; } }
/* refinement: calmer, less candy-bright palette, closer to the badge */
#presetSelect { width:100%; box-sizing:border-box; padding:9px 10px; font-size:14px; font-weight:600; border:1.5px solid #758c99; border-radius:7px; background:#fff; color:var(--x-ink); cursor:pointer; }
body.c49dark #presetSelect { background:#1c2429; color:#e3edf3; border-color:#20404f; }
.adminTabs .active { box-shadow:0 0 0 2px #6893ab; outline:none; }
.swd, .swc { display:inline-block; width:9px; height:9px; border:1px solid #fff; box-shadow:0 0 0 1px #999; vertical-align:middle; margin:0 3px 0 1px; }
.swd { transform:rotate(45deg); } .swc { border-radius:50%; }
/* A layer whose data stops at the US border, seen from somewhere it cannot answer. Dimmed rather
than disabled: the member may be about to pan back, and a control that vanishes is worse than
one that explains itself. */
label.c49nodata { opacity:.5; }
.c49nd { display:inline-block; margin-left:6px; padding:0 5px; border-radius:100px; font-size:10.5px;
font-weight:800; letter-spacing:.4px; background:#4a3b1a; color:#e8c877; vertical-align:1px; }
.abtn.app { background:#2f6b50; }
/* one distinct hue per channel (only ONE green = WhatsApp) so a quick glance reads cleanly */
.sh-sms { background:#46637a; } .sh-fb { background:#2d5aa0; } .sh-x { background:#232729; }
.sh-wa { background:#2f8f5a; } .sh-em { background:#6a4fa3; } .sh-cp { background:#4a6f85; }
/* align inline icons + label inside buttons */
#hdr button, .abtn, .popBtn, .xbtn { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.preset { border-radius:7px; background:#31393e; }
.preset:hover { background:#3c464c; }
.scoreChip, .credPill { background:#4a6f85; }
.popBtn { border-radius:6px; }
#trialBar { background:#313639; border-bottom:2px solid #6893ab; color:#d6e2e9; box-shadow:0 1px 6px rgba(0,0,0,.4); }
#trialBar .tjoin { background:#6893ab; color:var(--x-ink); }
#dockClub { background:#2f6b50 !important; }
#darkBtn { background:#31393e; }
/* gradient strokes for the belts (defs live in the hidden SVG) + a soft glow for depth */
.beltGoldLine { stroke:url(#beltGold) !important; filter:drop-shadow(0 0 2px rgba(212,175,55,.55)); }
.beltSerpLine { stroke:url(#beltSerp) !important; filter:drop-shadow(0 0 2px rgba(63,155,70,.5)); }
/* subtle in-hue gradient depth on primary buttons + chips (polished, not cartoonish) */
.abtn.app { background:linear-gradient(180deg, #34795b, #275842); }
.scoreChip, .credPill { background:linear-gradient(180deg, #56829c, #876b26); }
#trialBar .tjoin { background:linear-gradient(180deg, #d6b257, #b8902f); color:var(--x-ink); }
/* crisp non-emoji map markers, each layer a DISTINCT shape */
.scoutDot { width:15px; height:15px; border:2px solid #fff; border-radius:3px; transform:rotate(45deg); box-shadow:0 0 0 1px rgba(0,0, 0, .35), 0 1px 4px rgba(0,0, 0, .55); display:flex; align-items:center; justify-content:center; } /* DIAMOND */
.scoutDot .pip { width:5px; height:5px; border-radius:50%; background:#fff; }
.commTri { width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; filter:drop-shadow(0 1px 3px rgba(0,0, 0, .6)); } /* TRIANGLE */
.inspectIcon { border:2px solid #fff; border-radius:3px; } /* SQUARE */
.spotPin, .gaugePin { filter:drop-shadow(0 1px 2px rgba(0,0, 0, .55)); }
/* ============================================================
CRAFT PASS - the finishing coat. One coherent design language:
tokens, frontier-serif display headings, tactile buttons, live
modals, branded popups, styled scrollbars. Sits last so it wins.
============================================================ */
:root {
--c49-gold:#b8860b; --c49-gold-hi:#d4af37; --c49-ink:#111a1f; --c49-brown:#30424c;
--c49-shadow-1:0 1px 3px rgba(19,26,30,.22);
--c49-shadow-2:0 6px 18px rgba(19,26,30,.28);
--c49-shadow-3:0 18px 50px rgba(20,12,4,.5);
--c49-ease:cubic-bezier(.2,.75,.3,1);
}
::selection { background:var(--c49-gold-hi); color:var(--c49-ink); }
/* Frontier serif for display headings: the single strongest "not a template" cue.
Body copy stays in the clean system sans; only titles carry the character. */
#hdr h1, .box h2, .box h3, #aboutView h2, #tourBody b:first-child,
#legendsModal h3, #expModal h3, #chalModal h3, .lgCard h4, .expCard h4, .chalCard h4 {
font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
letter-spacing:.25px;
}
#hdr h1 { font-weight:600; }
#hdr { background:linear-gradient(180deg,#344752,#2c3c46); }
/* Tactile buttons: an inner top highlight + a real hover lift + a press.
This trio is what separates crafted UI from flat fills. */
.abtn, .popBtn, #btnPanel, #btnAbout, #authBtn, #btnTable, #adminBtn, #installBtn, .tjoin, .sh-cp, .shareGrid a, .shareGrid button {
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--c49-shadow-1);
transition:transform .14s var(--c49-ease), box-shadow .14s var(--c49-ease), filter .14s var(--c49-ease);
}
.abtn:hover, .popBtn:hover, #btnPanel:hover, #btnAbout:hover, #authBtn:hover, #btnTable:hover, #adminBtn:hover, #installBtn:hover, .tjoin:hover, .shareGrid a:hover, .shareGrid button:hover {
transform:translateY(-1px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--c49-shadow-2);
filter:brightness(1.05);
}
.abtn:active, .popBtn:active, #btnPanel:active, #btnAbout:active, #authBtn:active, .tjoin:active, .shareGrid a:active, .shareGrid button:active {
transform:translateY(0) scale(.985);
box-shadow:inset 0 1px 2px rgba(0,0,0,.18), var(--c49-shadow-1);
filter:brightness(.97);
}
.abtn[disabled] { opacity:.55; transform:none !important; filter:none !important; cursor:default; }
/* Floating map buttons: alive under the finger */
#dockClub, #aiFab, #dockTools, .locBtn {
transition:transform .16s var(--c49-ease), box-shadow .16s var(--c49-ease);
}
#dockClub:hover, #aiFab:hover, #dockTools:hover, .locBtn:hover { transform:scale(1.07); }
#dockClub:active, #aiFab:active, #dockTools:active, .locBtn:active { transform:scale(.94); }
/* Modals arrive, they do not just appear */
@keyframes c49BoxIn { from { opacity:0; transform:translateY(9px) scale(.975); } to { opacity:1; transform:none; } }
[id$="Modal"].show .box { animation:c49BoxIn .24s var(--c49-ease); }
/* Branded map popups: gold-edged paper instead of stock Leaflet white */
.leaflet-popup-content-wrapper { border-radius:12px; border:1px solid rgba(184,134,11,.32); box-shadow:0 4px 9px rgba(19,26,30,.18), var(--c49-shadow-3); }
.leaflet-popup-tip { box-shadow:var(--c49-shadow-1); }
.leaflet-container a.leaflet-popup-close-button { transition:transform .14s var(--c49-ease), color .14s; }
.leaflet-container a.leaflet-popup-close-button:hover { transform:scale(1.15); color:var(--c49-gold); }
/* Inputs that answer the touch */
.c49in { transition:border-color .15s, box-shadow .15s; }
.c49in:focus { border-color:var(--c49-gold); box-shadow:0 0 0 3px rgba(184,134,11,.16); outline:none; }
body.c49dark .c49in:focus { box-shadow:0 0 0 3px rgba(212,175,55,.22); }
/* Slim branded scrollbars in the panel and every modal (default 17px grey bars scream unfinished) */
#controls, #hhList, .box, #adminBody, #chatBox, #legendsList { scrollbar-width:thin; scrollbar-color:rgba(73,110,132,.55) transparent; }
#controls::-webkit-scrollbar, #hhList::-webkit-scrollbar, .box::-webkit-scrollbar, #adminBody::-webkit-scrollbar, #chatBox::-webkit-scrollbar, #legendsList::-webkit-scrollbar { width:9px; }
#controls::-webkit-scrollbar-thumb, #hhList::-webkit-scrollbar-thumb, .box::-webkit-scrollbar-thumb, #adminBody::-webkit-scrollbar-thumb, #chatBox::-webkit-scrollbar-thumb, #legendsList::-webkit-scrollbar-thumb {
background:rgba(73,110,132,.45); border-radius:5px; border:2px solid transparent; background-clip:content-box; }
#controls::-webkit-scrollbar-thumb:hover, .box::-webkit-scrollbar-thumb:hover { background:rgba(73,110,132,.7); background-clip:content-box; }
#controls::-webkit-scrollbar-track, .box::-webkit-scrollbar-track { background:transparent; }
/* Zoom control joins the family */
.c49FlatRow { display:flex; align-items:center; gap:6px; cursor:pointer; padding:3px 2px 1px;
font:400 13px/1.25 Georgia, "Times New Roman", serif; color:var(--x-ink); white-space:nowrap; }
.c49FlatRow:hover { color:var(--c49-gold); }
.c49FlatRow .c49FlatIco { display:inline-flex; width:15px; justify-content:center; opacity:.85; }
.leaflet-control-zoom a { transition:background .14s, color .14s; }
.leaflet-control-zoom a:hover { color:var(--c49-gold) !important; }
/* ===== Docks: two labeled launchers replace the old stack of unlabeled floating buttons ===== */
#dockSheet { display:none; position:absolute; inset:0; z-index:1350; background:rgba(20,12,4,.30); }
#dockSheet.show { display:block; }
.dsBox { position:absolute; right:60px; width:238px; max-height:calc(100% - 24px); overflow-y:auto; overscroll-behavior:contain; background:linear-gradient(180deg,#eff3f6,#dce6eb);
border:1px solid #abc3d0; border-radius:13px; box-shadow:var(--c49-shadow-3); padding:6px; animation:c49BoxIn .18s var(--c49-ease); }
body.c49dark .dsBox { background:linear-gradient(180deg,#12242d,#13191c); border-color:#20404f; }
.dsRow { display:flex; gap:9px; align-items:center; padding:8px 9px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; color:var(--x-ink); }
.dsRow:hover { background:rgba(184,134,11,.13); }
.dsRow:active { transform:scale(.98); }
body.c49dark .dsRow { color:#e3edf3; }
.dsIco { width:27px; height:27px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }
/* ===== Near me now: the in-the-field bottom sheet (nearest ground from live GPS) ===== */
#nearCard { display:none; position:fixed; left:9px; right:9px; margin:0 auto; bottom:calc(12px + env(safe-area-inset-bottom));
z-index:1250; width:auto; max-width:370px; background:linear-gradient(180deg,#eff3f6,#dce6eb);
border:1px solid #abc3d0; border-radius:14px; box-shadow:var(--c49-shadow-3); padding:11px 12px 8px; box-sizing:border-box; }
/* centered with left/right+margin, NOT translateX: the entrance animation's transform would cancel it */
#nearCard.show { display:block; animation:c49BoxIn .24s var(--c49-ease); }
body.c49dark #nearCard { background:linear-gradient(180deg,#12242d,#13191c); border-color:#20404f; color:#e3edf3; }
body.c49dark #nearCard b { color:#a0bbcb; }
.nearRow { display:flex; align-items:center; gap:8px; padding:6px 2px; border-top:1px solid rgba(0,0,0,.07); cursor:pointer; border-radius:6px; }
.nearRow:hover { background:rgba(184,134,11,.08); }
body.c49dark .nearRow { border-top-color:rgba(255,255,255,.08); }
.nearRow .nk { flex:0 0 auto; font-size:10.5px; font-weight:800; color:#fff; border-radius:4px; padding:2px 5px; text-transform:uppercase; letter-spacing:.4px; }
.nearRow .nn { flex:1; min-width:0; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nearRow .nd { flex:0 0 auto; font-size:12.5px; color:var(--x-green-hi); font-weight:700; font-variant-numeric:tabular-nums; }
body.c49dark .nearRow .nd { color:#7fd0a2; }
.nearTrial { flex:0 0 auto; cursor:pointer; font-size:13px; color:#b8860b; padding:2px 4px; border-radius:6px; }
.nearTrial:hover { background:rgba(184,134,11,.14); }
/* ===== Time Trials: race your own clock to a site (the timer is for the adventure, not the road) ===== */
#trialHud { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:1460;
background:linear-gradient(180deg,#20242b,#171a20); color:#eef2f7; border:1px solid #3a4250; border-radius:13px; padding:9px 13px;
box-shadow:0 6px 22px rgba(0,0,0,.45); min-width:220px; text-align:center; font-variant-numeric:tabular-nums; }
#trialHud .thTop { font-size:20px; font-weight:800; letter-spacing:.5px; display:flex; align-items:center; justify-content:center; gap:8px; }
#trialHud .thGo { font-size:10.5px; font-weight:800; letter-spacing:1px; color:#0b0d10; background:#e6b84c; border-radius:5px; padding:2px 6px; }
#trialHud .thMid { font-size:12.5px; color:#c7d0dc; margin-top:1px; }
#trialHud .thBot { font-size:12.5px; color:#9fb0c4; margin-top:2px; }
#trialHud .thBtns { display:flex; gap:8px; justify-content:center; margin-top:7px; }
#trialHud .thBtns span { cursor:pointer; font-size:12.5px; font-weight:700; color:#dfe6ef; background:#2b313b; border:1px solid #3f4753; border-radius:7px; padding:4px 10px; }
#trialHud .thBtns span:hover { background:#343b47; }
#trialModal { display:none; position:absolute; inset:0; z-index:1470; background:rgba(20,12,4,.66); align-items:center; justify-content:center; }
#trialModal.show { display:flex; }
#trialModal .box { background:linear-gradient(180deg,#eff3f6,#dce6eb); border:1px solid #abc3d0; border-radius:16px; padding:20px; width:390px; max-width:calc(100vw - 24px); max-height:88vh; overflow:auto; box-shadow:var(--c49-shadow-3); text-align:left; }
body.c49dark #trialModal .box { background:linear-gradient(180deg,#12242d,#13191c); border-color:#20404f; color:#e3edf3; }
.trRow { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid rgba(0,0,0,.08); font-size:13px; }
body.c49dark .trRow { border-top-color:rgba(255,255,255,.08); }
.trRow .trName { flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trRow .trBest { flex:0 0 auto; font-weight:800; color:var(--x-green-hi); font-variant-numeric:tabular-nums; }
body.c49dark .trRow .trBest { color:#7fd0a2; }
/* ===== Compass: works walking (device magnetometer) or driving (GPS course). ===== */
#compassPanel { position:absolute; right:12px; bottom:calc(120px + env(safe-area-inset-bottom,0px)); z-index:1460;
background:linear-gradient(180deg,#20242b,#171a20); color:#eef2f7; border:1px solid #3a4250; border-radius:15px; padding:11px 11px 9px;
box-shadow:0 6px 22px rgba(0,0,0,.45); width:174px; text-align:center; user-select:none; }
#compassPanel .cmpStage { position:relative; width:150px; height:150px; margin:0 auto; }
#compassPanel .cmpDial { position:absolute; inset:0; transition:transform .12s linear; }
#compassPanel .cmpLub { position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:11px solid #e6b84c; z-index:3; }
#compassPanel .cmpNeedle { position:absolute; inset:0; z-index:2; transition:transform .12s linear; pointer-events:none; }
#compassPanel .cmpRead { margin-top:7px; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
#compassPanel .cmpSrc { font-size:11px; color:#93a2b6; margin-top:-1px; }
#compassPanel .cmpTgt { font-size:12.5px; color:#a9e3c0; margin-top:5px; line-height:1.3; }
#compassPanel .cmpClose { position:absolute; top:6px; right:9px; cursor:pointer; color:#93a2b6; font-weight:800; font-size:13px; }
.cmpBtn { background:#20242b; }
/* ===== Rock ID: field-test grid + multi-photo thumbnails ===== */
.rkGrid { display:grid; grid-template-columns:1fr 1fr; gap:7px 9px; }
@media (max-width: 520px) { .rkGrid { grid-template-columns:1fr; } }
.rkGrid label { display:flex; flex-direction:column; gap:2px; font-size:12px; font-weight:700; color:#2f4755; }
.rkGrid label span { font-weight:400; font-size:11.5px; color:var(--x-sub); }
.rkGrid .c49in { padding:5px 7px; font-size:12px; }
.rkThumb { position:relative; width:62px; height:62px; border-radius:8px; overflow:hidden; border:1px solid #abc3d0; }
.rkThumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rkThumb .rkX { position:absolute; top:1px; right:3px; color:#fff; background:rgba(0,0,0,.55); border-radius:50%;
width:16px; height:16px; line-height:15px; text-align:center; font-size:12px; cursor:pointer; }
.rkThumb .rkTag { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); color:#fff;
font-size:8.5px; text-align:center; padding:1px 0; letter-spacing:.2px; }
/* ===== GPS photo checkpoints: live in-app camera capture, verified real (not an upload / not AI) ===== */
.cpOverlay { display:none; position:absolute; inset:0; z-index:1480; background:rgba(6,8,11,.92); align-items:center; justify-content:center; }
.cpOverlay.show { display:flex; }
.cpCam { width:min(94vw,460px); background:#12161c; border:1px solid #2c333d; border-radius:16px; overflow:hidden; box-shadow:0 10px 34px rgba(0,0,0,.5); color:#eef2f7; }
.cpHead { display:flex; align-items:center; gap:8px; padding:11px 13px; font-weight:800; font-size:14px; border-bottom:1px solid #232a33; }
.cpHead .cpX { margin-left:auto; cursor:pointer; color:#93a2b6; font-size:15px; }
#cpVideo { width:100%; max-height:56vh; background:#000; display:block; object-fit:cover; }
.cpGeo { font-size:12px; color:#a9e3c0; padding:8px 13px 0; text-align:center; font-variant-numeric:tabular-nums; }
.cpBtns { display:flex; justify-content:center; padding:11px; }
.cpShoot { background:#e6b84c; color:#0b0d10; font-weight:800; font-size:15px; border:none; border-radius:999px; width:66px; height:66px; cursor:pointer; box-shadow:0 0 0 4px rgba(230,184,76,.25); }
.cpShoot:disabled { background:#4a5361; color:#8b96a4; box-shadow:none; cursor:default; }
.cpNote { font-size:12.5px; color:#93a2b6; padding:0 14px 13px; text-align:center; line-height:1.35; }
.cpBtn { background:#20242b; }
#cpGallery { display:none; position:absolute; inset:0; z-index:1475; background:rgba(20,12,4,.66); align-items:center; justify-content:center; }
#cpGallery.show { display:flex; }
#cpGallery .box { background:linear-gradient(180deg,#eff3f6,#dce6eb); border:1px solid #abc3d0; border-radius:16px; padding:18px; width:440px; max-width:calc(100vw - 24px); max-height:88vh; overflow:auto; box-shadow:var(--c49-shadow-3); }
body.c49dark #cpGallery .box { background:linear-gradient(180deg,#12242d,#13191c); border-color:#20404f; color:#e3edf3; }
.cpGrid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:8px; }
.cpCard { border:1px solid #b8ccd8; border-radius:11px; overflow:hidden; background:#fff; }
body.c49dark .cpCard { border-color:#20404f; background:#111619; }
.cpCard img { width:100%; height:104px; object-fit:cover; display:block; cursor:pointer; }
.cpMeta { padding:6px 8px; font-size:12px; color:var(--x-sub); }
body.c49dark .cpMeta { color:#aabcc7; }
.cpBadge { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.3px; border-radius:5px; padding:1px 5px; }
.cpBadge.live { background:#1f7a4d; color:#fff; }
.cpBadge.unver { background:#35505f; color:#fff; }
.cpBadge.flag { background:#b23b2e; color:#fff; }
/* ===== Today's brief: the one-tap morning card (gold, rivers, weather, challenge) ===== */
#todayModal { display:none; position:absolute; inset:0; z-index:1450; background:rgba(20,12,4,.66); align-items:center; justify-content:center; }
#todayModal.show { display:flex; }
#todayModal .box { background:linear-gradient(180deg,#eff3f6,#dce6eb); border:1px solid #abc3d0; border-radius:16px; padding:20px; width:400px; max-width:calc(100vw - 24px); max-height:90vh; overflow:auto; box-shadow:var(--c49-shadow-3); text-align:left; }
body.c49dark #todayModal .box { background:linear-gradient(180deg,#12242d,#13191c); border-color:#20404f; color:#e3edf3; }
.tdRow { display:flex; align-items:flex-start; gap:9px; padding:8px 0 7px; border-top:1px solid rgba(0,0,0,.07); font-size:13px; }
body.c49dark .tdRow { border-top-color:rgba(255,255,255,.09); }
.tdIco { flex:0 0 auto; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(184,134,11,.15); color:var(--x-warn); }
body.c49dark .tdIco { color:#e8c15a; }
#todayBtn { flex:0 0 auto; box-sizing:border-box; background:linear-gradient(180deg,#31393e,#2a2f31); color:#dfe9ef; border:1px solid #384248; border-radius:8px; padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
#goldPill:empty + #todayBtn { flex:1; } /* before the first price lands, the Brief button holds the row alone */
#questLine { font-size:12.5px; color:var(--x-sub); background:var(--x-paper-2); border:1px solid var(--x-line); border-radius:7px; padding:6px 8px; margin:0 0 8px; cursor:pointer; }
body.c49dark #questLine { background:#1e2a31; border-color:#20404f; color:#e8c15a; }
/* Chat reactions: little tactile chips under a message */
.rxRow { display:flex; gap:3px; margin-top:3px; flex-wrap:wrap; min-height:0; }
.rxRow.mine { justify-content:flex-end; }
.rxChip { font-size:12px; line-height:1.5; background:#dce6eb; border:1px solid #bbced9; border-radius:10px;
padding:1px 7px; cursor:pointer; user-select:none; transition:transform .12s var(--c49-ease), background .12s; }
.rxChip:hover { transform:scale(1.1); }
.rxChip:active { transform:scale(.94); }
.rxChip.on { background:#2f6b50; border-color:#2f6b50; color:#fff; }
.rxChip.add { opacity:.45; }
.rxChip.add:hover { opacity:1; }
.rxChip.pick { font-size:14px; padding:2px 7px; }
body.c49dark .rxChip { background:#1e2a31; border-color:#20404f; color:#e3edf3; }
body.c49dark .rxChip.on { background:#2f6b50; border-color:#2f6b50; color:#fff; }
/* Text-size preference (Notifications -> Privacy & comfort): zoom the reading surfaces,
never the #map itself, so Leaflet's click/touch hit-testing stays pixel-exact. */
body.c49txtlg #panel, body.c49txtlg .box, body.c49txtlg .leaflet-popup-content,
body.c49txtlg #aboutView, body.c49txtlg #tableView, body.c49txtlg #imgLab { zoom:1.14; }
body.c49txtxl #panel, body.c49txtxl .box, body.c49txtxl .leaflet-popup-content,
body.c49txtxl #aboutView, body.c49txtxl #tableView, body.c49txtxl #imgLab { zoom:1.3; }
/* ============================================================================================
FIELD SHELL (2026-07-31), the map-first navigation.
The app had grown to 39 visible controls on first paint, a 7-item nav rail, four floating
dock buttons and a 118-checkbox Explore panel. This shell puts FIVE things on screen: one
search bar, two round buttons, and a four-tab bar. Everything else lives one tap deeper.
Nothing was deleted: the old #panel is still built and still owns every layer's real state,
and the Layers sheet below is a PROXY over its checkboxes (see c49LayerScan in the JS).
============================================================================================ */
:root { --fs-bar:58px; --fs-r:22px; --fs-ink:#eff3f5; --fs-line:rgba(255,255,255,.18);
--fs-bg:#0B0B0B; --fs-bg2:#1A1A18; --fs-gold:#F5C542; --fs-dim:#9C9B92; }
/* ============================================================================================
DARK CONTRAST PATCH (2026-07-31). Making dark the default exposed screens the old opt-in skin
never covered, because their colours are INLINE and no class rule could reach them. Measured
before this block: Radio room 1.39:1, the Guide 1.47:1, account hub 2.83, Rock ID 3.28,
sign-up 3.90. WCAG AA wants 4.5. The worst single offender was twenty tags with no colour
at all, rendering in default browser blue #0000EE on near-black.
Attribute-substring selectors are the only thing that can outrank an inline style, so that is
what this uses. Light mode is untouched: every rule is scoped to body.c49dark.
============================================================================================ */
body.c49dark a:not([class]):not([style*="color"]) { color:var(--x-gold-hi); }
body.c49dark a:not([class]):not([style*="color"]):hover { color:#fff; }
/* legacy greens */
body.c49dark [style*="#2f6b50"], body.c49dark [style*="#2F6B50"],
body.c49dark [style*="#2e7d32"], body.c49dark [style*="#2E7D32"],
body.c49dark [style*="#33691e"] { color:#5fd699 !important; }
/* legacy browns and ambers */
body.c49dark [style*="#365262"], body.c49dark [style*="#365262"],
body.c49dark [style*="#9c5a00"], body.c49dark [style*="#8a5a1e"],
body.c49dark [style*="#b26a00"], body.c49dark [style*="#a3691e"] { color:#e8b45c !important; }
/* legacy reds: keep them ALARMING but readable, these carry the eat-safety and legal warnings */
body.c49dark [style*="#b00020"], body.c49dark [style*="#c62828"],
body.c49dark [style*="#9e2a2a"], body.c49dark [style*="#8d2f2f"] { color:#ff8a72 !important; }
/* legacy dark inks and muted greys, which vanish outright on black */
body.c49dark [style*="color:var(--x-ink)"], body.c49dark [style*="color:#19242a"],
body.c49dark [style*="color:#364148"], body.c49dark [style*="color:var(--x-ink)"],
body.c49dark [style*="color:var(--x-ink)"] { color:var(--x-ink) !important; }
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:#666"],
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-sub)"],
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-sub)"] { color:var(--x-sub) !important; }
/* Class rules, not inline, so the attribute selectors above cannot see them. Found by measuring, not
by reading: .spCard .row b alone accounted for 14 failures in the Radio room. */
body.c49dark .spCard .row b { color:#5fd699; }
body.c49dark #begBtn { background:var(--x-card); color:#5fd699; border-color:#2f6b50; }
/* the red remap can land on an already-red chip; keep those white instead of red-on-red */
body.c49dark [style*="background:#8d2f2f"], body.c49dark [style*="background:#b00020"],
body.c49dark [style*="background:#c62828"] { color:#fff !important; }
/* the faint token was a shade too dim once it sat on true black */
body.c49dark { --x-faint:#918f86; }
/* last of the measured stragglers: two more legacy inks, the Rock ID field-test hints, the .cx close
link and the WhatsApp share chip (white on mid-green was 4.04, just under AA) */
body.c49dark [style*="color:var(--x-sub)"], body.c49dark [style*="color:var(--x-sub)"] { color:var(--x-sub) !important; }
body.c49dark [style*="color:var(--x-ok)"] { color:#5fd699 !important; }
body.c49dark .rkGrid label span { color:var(--x-sub); }
body.c49dark .box .cx, body.c49dark .cx { color:var(--x-ink) !important; opacity:.86; }
/* ---- TOUCH TARGETS (2026-08-01) ---------------------------------------------------------------
Measured every dialog in the app: 36 of 39 carried a control under the 44px minimum, and the
worst offender was the one repeated most, the "Close" link, a bare 14px-tall span in roughly
twenty-five modals. This is a field app; people use it outdoors, one-handed, sometimes in gloves.
These rules grow the HIT AREA without growing the visual weight: padding and min-height do the
work, so nothing here changes a colour, a font size or the look of a single screen.
DELIBERATELY NOT TOUCHED: inline links inside prose (Terms, Privacy, "the rock primer"). Growing
those to 44px would wreck line spacing, and an inline link in a sentence is the one accepted
exception to the minimum. */
.cx { min-height:44px; display:flex !important; align-items:center; justify-content:center; }
/* native checkboxes render ~13px; that is a desktop-mouse size, not a thumb size */
[id$="Modal"] input[type=checkbox], [id$="Modal"] input[type=radio] { width:20px; height:20px; }
/* segmented tab strips inside dialogs (Journal, Work, Marketplace, Expeditions, DLC) sat at 28px */
[id^="dlcTab"], [id^="expTab"], [id^="jt_"], [id^="wt_"], [id^="fmb"], [id^="mkTab"] { min-height:40px; }
/* the review stars were 26x31, the single most-tapped control in the whole feedback flow */
#revStars span { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
/* second pass, from re-measuring the live build. Corner "x" glyphs that never got .cx, the Rock ID
field-test dropdowns (27px, and you are reading them in the sun with a wet rock in one hand), the
flat-map and saved-search button rows, and the radio's volume slider, which was a 16px grab. */
.xtap { display:inline-flex !important; align-items:center; justify-content:center;
min-width:44px; min-height:44px; margin:-10px -10px -10px 0; }
/* 44, not 40: measured on the live build with offsetHeight and these were the last stragglers.
getBoundingClientRect lies here, the preview pane scales the page, so a 44px control reports
42.9 and an audit built on it chases ghosts. Checkboxes and radios stay small on purpose: the
label row around them is the real target, and growing the box just misaligns the row. */
[id$="Modal"] select, [id$="Modal"] input[type=text], [id$="Modal"] input[type=number],
[id$="Modal"] input[type=search], [id$="Modal"] input[type=email], [id$="Modal"] input[type=password],
[id$="Modal"] input[readonly], [id$="Modal"] textarea { min-height:44px; }
.sh-cp, [id$="Modal"] .shareGrid button, [id$="Modal"] .shareGrid a { min-height:44px; }
[id$="Modal"] input[type=range] { height:34px; }
#queryModal button, #flatModal button, #radioModal button { min-height:40px; }
/* ---- PALETTE DISCIPLINE (2026-08-01) ----------------------------------------------------------
The dark pass fixed CONTRAST but not COLOUR. Modals still carried a green primary button, several
blues and a couple of near-neon accents left over from the cream theme, so a sheet could open with
four unrelated hues on it. In this app GOLD is the action colour, the layers button, the live
chips and the tab indicator all use it, so primaries are gold and everything else falls back to
the neutral surface. Scoped to body.c49dark so light mode is untouched.
DELIBERATE EXCEPTIONS: Instagram pink and Facebook blue stay, because those are the platforms'
own brand marks and recolouring them makes the buttons harder to recognise, not more consistent. */
body.c49dark [style*="background:#2f6b50"], body.c49dark [style*="background:#1f6b3f"],
body.c49dark [style*="background:#2f8f57"], body.c49dark [style*="background:#2f8f5a"],
body.c49dark [style*="background:#1f6b45"], body.c49dark [style*="background:#2e7d32"],
body.c49dark .tjoin, body.c49dark #annBannerBtn {
background:var(--x-gold) !important; color:var(--x-ink) !important; border-color:var(--x-gold) !important; }
/* secondary / informational fills drop to the card surface rather than competing with the primary */
body.c49dark [style*="background:#15314b"], body.c49dark [style*="background:#2d5aa0"],
body.c49dark [style*="background:#0a6e8a"], body.c49dark [style*="background:#6a4fa3"],
body.c49dark [style*="background:#30424c"], body.c49dark [style*="background:#2a3f4b"] {
background:var(--x-card) !important; color:var(--x-ink) !important;
border:1px solid var(--x-line) !important; }
/* danger keeps its meaning but joins the palette's own red instead of shouting */
body.c49dark [style*="background:#c62828"], body.c49dark [style*="background:#8d2f2f"],
body.c49dark [style*="background:#e83935"], body.c49dark [style*="background:#b00020"] {
background:#7a2723 !important; color:#ffd9d0 !important; }
/* the last near-neon text accents */
body.c49dark [style*="color:#7bff7b"] { color:var(--x-green-hi) !important; }
body.c49dark [style*="color:#50cdff"], body.c49dark [style*="color:#8cc4ff"] { color:var(--x-blue) !important; }
/* SPACE-TOLERANT PASS. The rules above only matched inline styles written `background:#xxx`, and a
good number of them are authored `background: #xxx` with a space, so brown and green buttons in the
hub, the Guide, the expedition modal and the table survived the first sweep untouched. CSS attribute
selectors cannot express "optional space", so each spelling gets its own rule. */
body.c49dark [style*="background: #365262"], body.c49dark [style*="background:#365262"],
body.c49dark [style*="background: #2a3f4b"], body.c49dark [style*="background: #30424c"] {
background:var(--x-card) !important; color:var(--x-ink) !important;
border:1px solid var(--x-line) !important; }
body.c49dark [style*="background: #1f6b45"], body.c49dark [style*="background: #0a8754"],
body.c49dark [style*="background:#0a8754"], body.c49dark [style*="background:#1f6b45"],
body.c49dark [style*="background: #2f6b50"], body.c49dark [style*="background: #2f8f57"] {
background:var(--x-gold) !important; color:var(--x-ink) !important; border-color:var(--x-gold) !important; }
/* the warm 8% wash used as a callout panel reads as a muddy stain on black */
body.c49dark [style*="rgba(120,74,30,.08)"], body.c49dark [style*="rgba(120, 74, 30, 0.08)"],
body.c49dark [style*="rgba(120,74,30,0.08)"] {
background:rgba(245,197,66,.07) !important; border-color:var(--x-line) !important; }
/* DELIBERATE EXCEPTIONS, left alone on purpose:
.sh-fb / .sh-wa. Facebook and WhatsApp share buttons, brand marks like Instagram above.
#flatModal spans, that modal's bright spans are a COLOUR KEY for the flat-map overlay, where being
mutually distinct is the entire job. Harmonising them to gold would destroy the legend. */
/* MAP POPUPS are the surface members touch most, and two colours in them were the worst in the whole
app on dark: the "This is folklore" disclaimer at 2.71 and the watch/search links at 3.09. The
folklore line has to stay visually distinct from body copy, so it goes to a readable warm red
rather than plain ink. */
body.c49dark .leaflet-popup-content [style*="#b71c1c"],
body.c49dark .leaflet-popup-content [style*="#c62828"] { color:#ff8a72 !important; }
body.c49dark .leaflet-popup-content [style*="#1565c0"],
body.c49dark .leaflet-popup-content [style*="#0a6e8a"],
body.c49dark .leaflet-popup-content a { color:var(--x-gold-hi) !important; }
/* the little kind-tags in popup headers ("(cave)", "(haunted, by reputation)") carry the marker's own
category colour, which is tuned for white paper. Lifted to the same hues at dark-mode brightness. */
body.c49dark .leaflet-popup-content [style*="#00897b"] { color:#4fd1c0 !important; }
body.c49dark .leaflet-popup-content [style*="#6a4fa3"] { color:#b39ae0 !important; }
body.c49dark .leaflet-popup-content [style*="#546e7a"] { color:#9db4c0 !important; }
body.c49dark .leaflet-popup-content [style*="#0277bd"] { color:#6cc2ef !important; }
body.c49dark .sh-wa { background:#1f6b45 !important; }
/* a few panels kept a cream fill, which strands their (correct) dark text on a light island */
body.c49dark [style*="background:var(--x-paper-2)"], body.c49dark [style*="background:#f1f5f7"],
body.c49dark [style*="background:#fffdf8"], body.c49dark [style*="background:#eaf0f3"],
body.c49dark [style*="background:#f0f4f6"] { background:var(--x-card) !important; }
/* Everything the shell replaces. Each of these still EXISTS and still works, it is reachable from the
More sheet or the Layers sheet, it just no longer competes for space on the map. */
body.fieldshell #navRail, body.fieldshell #dockClub, body.fieldshell #aiFab,
body.fieldshell #dockTools, body.fieldshell #dockRadio,
body.fieldshell #hdr, /* old top bar + the 50-state chip strip */
body.fieldshell .c49MapBtn, /* LABELS / CLEAR, now rows in the Layers sheet */
body.fieldshell .legend.leaflet-control, /* the old legend flyout */
body.fieldshell .leaflet-control-layers, /* base-map picker, now in the Layers sheet */
body.fieldshell .leaflet-control-zoom, /* pinch/double-tap; the buttons were phone clutter */
body.fieldshell .leaflet-control-attribution,
body.fieldshell .locBtn { display:none !important; }
/* the map goes edge to edge: no 58px rail, no 40px header */
body.fieldshell #map { left:0 !important; width:100% !important; top:0 !important; height:100% !important; }
/* #panel was offset left:58px to clear the old rail, and its closed transform only translated far enough
to hide it from THAT origin, so 41px of it sat on screen permanently. Invisible against cream paper,
obvious as a grey strip once the app went dark. Anchor it to 0 now the rail is gone. */
body.fieldshell #panel { left:0 !important; top:0 !important; height:100% !important; }
/* scale + coordinates are genuinely useful in the field, so they stay, just lifted above the tab bar */
body.fieldshell .leaflet-bottom.leaflet-left { bottom:calc(var(--fs-bar) + env(safe-area-inset-bottom) + 4px); }
body.fieldshell .coordBox { font-size:11.5px; opacity:.82; }
/* the guest-pass countdown is real information, so it keeps its place, directly under the search bar,
one slim line instead of a three-line block sitting on top of it */
/* The guest-pass countdown is gone. It sat directly under the search bar on every single screen,
nagging on the surface the member came to use, and the Join path is already carried properly by the
photo card at the top of the You tab. `.show` may still be applied by the trial logic, so this has to
beat it; syncTrialOffsets() then measures offsetHeight 0 and stops reserving space for it. */
body.fieldshell #trialBar { display:none !important; }
@media (min-width:900px) { body.fieldshell #trialBar { right:auto !important; width:430px !important; } }
/* announcements sit above the tab bar, stop short of the two round buttons, and drop the bright green
for the app's own black-and-gold */
body.fieldshell #annBanner { bottom:calc(var(--fs-bar) + env(safe-area-inset-bottom) + 12px) !important;
left:10px !important; right:74px !important; transform:none !important; max-width:none !important;
font-size:12.5px; padding:8px 11px !important; background:var(--fs-bg2) !important;
border:1px solid var(--fs-line) !important; color:var(--fs-ink) !important; border-radius:12px !important; }
body.fieldshell #annBanner #annBannerBtn { background:var(--fs-gold) !important; color:#17242b !important; }
/* the horizontal base-map strip scrolls; the scrollbar itself is just noise on a dark sheet */
#fsBody div::-webkit-scrollbar { height:0; width:0; }
#fsBody div { scrollbar-width:none; }
#fsTop { position:absolute; top:calc(8px + env(safe-area-inset-top)); left:10px; right:10px; z-index:1200;
display:none; gap:8px; align-items:center; pointer-events:none; }
body.fieldshell #fsTop { display:flex; }
#fsSearchWrap { flex:1; min-width:0; display:flex; align-items:center; gap:8px; pointer-events:auto;
background:var(--fs-bg2); border:1px solid var(--fs-line); border-radius:var(--fs-r);
box-shadow:0 4px 18px rgba(0,0,0,.5); padding:0 13px; height:46px; }
#fsSearch { flex:1; min-width:0; border:0; background:transparent; font-size:15px; color:var(--fs-ink);
outline:none; font-family:inherit; }
#fsSearch::placeholder { color:var(--fs-dim); }
#fsClear { display:none; border:0; background:transparent; color:var(--fs-dim); font-size:20px; cursor:pointer;
line-height:1; padding:2px 4px; }
#fsMe { pointer-events:auto; flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1px solid var(--fs-line);
background:var(--fs-bg2); box-shadow:0 4px 18px rgba(0,0,0,.5); cursor:pointer; overflow:hidden;
display:flex; align-items:center; justify-content:center; color:var(--fs-gold); font-size:17px; padding:0; }
#fsMe img { width:100%; height:100%; object-fit:cover; display:block; }
/* search results drop straight under the bar */
#fsResults { position:absolute; top:calc(60px + env(safe-area-inset-top)); left:10px; right:66px; z-index:1201;
display:none; max-height:56vh; overflow:auto; background:var(--fs-bg); border:1px solid var(--fs-line);
border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.6); -webkit-overflow-scrolling:touch; }
#fsResults.show { display:block; }
.fsRes { display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.07); }
.fsRes:last-child { border-bottom:0; }
.fsRes:hover, .fsRes:focus { background:#1A1A18; }
.fsRes .k { flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.4px; color:#fff;
padding:3px 6px; border-radius:5px; }
.fsRes .n { flex:1; min-width:0; font-size:14px; color:var(--fs-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* the place, under the name: the only thing that tells thirty-eight "Mammoth Mine" rows apart */
.fsRes .n em { display:block; font-style:normal; font-size:12.5px; color:var(--fs-dim);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.fsRes .d { flex:0 0 auto; font-size:12.5px; color:var(--fs-dim); font-weight:600; }
/* two round buttons, sitting just above the tab bar */
#fsFabs { position:absolute; right:10px; z-index:1200; display:none; flex-direction:column; gap:10px;
bottom:calc(var(--fs-bar) + env(safe-area-inset-bottom) + 14px); }
body.fieldshell #fsFabs { display:flex; }
.fsFab { width:48px; height:48px; border-radius:50%; border:1px solid var(--fs-line); background:var(--fs-bg2);
color:#fff; box-shadow:0 4px 18px rgba(0,0,0,.55); cursor:pointer; display:flex;
align-items:center; justify-content:center; transition:transform .12s ease, background .12s ease; }
.fsFab:active { transform:scale(.93); }
.fsFab.on { background:var(--fs-gold); color:#17242b; border-color:var(--fs-gold); }
.fsFab .cnt { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; border-radius:9px;
background:var(--fs-gold); color:#17242b; font-size:11.5px; font-weight:800; display:flex; align-items:center;
justify-content:center; padding:0 4px; border:2px solid var(--fs-bg); }
/* the four-tab bar */
#fsTabs { position:absolute; left:0; right:0; bottom:0; z-index:1210; display:none;
height:calc(var(--fs-bar) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
background:rgba(11,11,11,.97); border-top:1px solid var(--fs-line);
box-shadow:0 -2px 18px rgba(0,0,0,.5); }
body.fieldshell #fsTabs { display:flex; }
.fsTab { flex:1; border:0; background:transparent; cursor:pointer; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:3px; color:#909699; font-family:inherit;
font-size:11.5px; font-weight:700; letter-spacing:.3px; padding:0; position:relative; }
.fsTab svg { width:22px; height:22px; }
.fsTab.on { color:var(--fs-gold); }
.fsTab.on::before { content:''; position:absolute; top:0; left:26%; right:26%; height:3px;
border-radius:0 0 3px 3px; background:var(--fs-gold); }
/* LANDSCAPE. A phone on its side is ~390px tall, where the 47px search bar and the 59px tab bar
together eat 29% of the screen, on the one axis the map has least of. Measured: 276px of map
out of 390. Below 460px tall the tabs go icon-only and the search bar tightens, which hands
roughly 40px back to the map without removing anything or moving a control. Touch targets stay
at 44px: the row is shorter, but each tab still fills it edge to edge. */
@media (max-height: 460px) and (orientation: landscape) {
#fsTabs { height:calc(46px + env(safe-area-inset-bottom)); }
.fsTab { font-size:0; gap:0; } /* label hidden, icon centred */
.fsTab svg { width:23px; height:23px; }
.fsTab.on::before { height:2px; }
#fsTop { padding-top:2px; }
#fsSearch { min-height:38px; }
#fsMe { width:38px; height:38px; }
/* the sheet must not swallow the screen when there is barely any screen */
.fsSheet { max-height:82vh; }
}
/* the bottom sheet every tab opens into */
#fsSheet { position:absolute; inset:0; z-index:1400; display:none; background:rgba(0,0,0,.6); }
#fsSheet.show { display:block; }
#fsBox { position:absolute; left:0; right:0; bottom:0; max-height:86vh; display:flex; flex-direction:column;
background:var(--fs-bg); border-radius:20px 20px 0 0; box-shadow:0 -8px 40px rgba(0,0,0,.7);
animation:fsUp .2s cubic-bezier(.22,.9,.3,1); padding-bottom:env(safe-area-inset-bottom); }
@keyframes fsUp { from { transform:translateY(28px); opacity:.4 } to { transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce) { #fsBox { animation:none } }
#fsGrab { flex:0 0 auto; padding:9px 0 4px; display:flex; justify-content:center; cursor:grab; }
#fsGrab i { width:38px; height:4px; border-radius:2px; background:#2e3133; display:block; }
#fsHead { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:2px 16px 10px; }
#fsTitle { flex:1; font-size:17px; font-weight:700; color:var(--fs-ink); letter-spacing:.2px; }
.fsAct { border:0; background:transparent; color:var(--fs-gold); font-size:12.5px; font-weight:700;
cursor:pointer; font-family:inherit; padding:5px 7px; border-radius:7px; }
.fsAct:hover { background:#1A1A18; }
#fsBody { flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:0 16px 18px; }
/* quick-pick chips: the six layers people actually reach for */
.fsQuick { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 14px; }
.fsChip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
padding:11px 6px; border-radius:13px; border:1px solid var(--fs-line); background:var(--fs-bg2); cursor:pointer;
font-size:12.5px; font-weight:600; color:#bfc4c7; font-family:inherit; text-align:center; line-height:1.25;
transition:all .12s ease; }
.fsChip svg { width:21px; height:21px; }
.fsChip:active { transform:scale(.96); }
.fsChip.on { background:var(--fs-gold); border-color:var(--fs-gold); color:#17242b; }
/* the USGS quad symbol inherits the chip's colour, so it flips to dark ink when the chip turns gold */
.pbdbClu { width:30px; height:30px; border-radius:50%; background:rgba(0,137,123,.85); color:#e0f2f1;
border:2px solid #b2dfdb; display:flex; align-items:center; justify-content:center; font-size:12px;
font-weight:800; box-shadow:0 0 4px rgba(0,0,0,.5); }
/* marker glyphs are Lucide SVGs now: let the wrapper div drive the size, since the old
font-size styling does nothing to an svg that carries its own width/height */
.leaflet-marker-icon > div > svg { width:100%; height:100%; }
/* This weekend: a ranked shortlist, so it reads as a list of places and not another dense panel */
/* the opening finding: sits above the map, reads as news, gets out of the way */
#wkBrief { position:absolute; left:10px; right:10px; z-index:1215; opacity:0; transform:translateY(-10px);
transition:opacity .3s ease, transform .3s ease; pointer-events:auto;
top:calc(66px + env(safe-area-inset-top));
background:linear-gradient(180deg,#151a1c,#111416); border:1px solid var(--fs-gold,#6893ab);
border-radius:14px; padding:13px 14px; box-shadow:0 12px 34px rgba(0,0,0,.6); max-width:520px; }
#wkBrief.in { opacity:1; transform:none; }
@media (min-width:900px) { #wkBrief { left:16px; right:auto; width:430px; } }
.wkbTop { display:flex; align-items:center; gap:7px; color:var(--fs-gold,#6893ab);
font-size:11px; font-weight:800; letter-spacing:1.1px; }
.wkbTop > span:first-of-type { flex:1; }
.wkbX { cursor:pointer; opacity:.6; display:flex; padding:6px; margin:-6px -4px -6px 0; }
.wkbX:hover { opacity:1; }
.wkbLead { color:#e7edf1; font-size:15px; line-height:1.4; margin:7px 0 3px; }
.wkbSub { color:#909699; font-size:12px; line-height:1.4; }
.wkbActs { display:flex; gap:8px; margin-top:11px; }
.wkbGo, .wkbMore { flex:1; min-height:44px; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; }
.wkbGo { background:var(--fs-gold,#6893ab); color:var(--x-ink); border:none; }
.wkbMore { background:transparent; color:#bdc4c8; border:1px solid rgba(255,255,255,.18); }
.wkHead { font-size:12px; color:var(--x-sub); line-height:1.5; margin:0 0 10px; }
body.c49dark .wkHead { color:var(--x-sub); }
.wkCard { display:flex; gap:11px; align-items:flex-start; padding:11px 12px; margin:0 0 8px;
border:1px solid #c4d4de; border-radius:12px; background:rgba(255,255,255,.55); cursor:pointer;
transition:transform .1s ease, border-color .1s ease; }
.wkCard:hover { transform:translateY(-1px); border-color:#6893ab; }
body.c49dark .wkCard { background:rgba(255,255,255,.04); border-color:#20404f; }
.wkNum { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:#6893ab; color:var(--x-ink);
font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.wkName { font-weight:700; font-size:14px; color:var(--x-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.c49dark .wkName { color:var(--x-ink); }
.wkMeta { font-size:12.5px; color:var(--x-sub); margin:1px 0 5px; }
.wkWhy { display:flex; gap:6px; align-items:flex-start; font-size:12.5px; line-height:1.4; margin-top:2px; }
.wkWhy svg { flex:0 0 auto; margin-top:1px; }
.fosDot { width:12px; height:12px; border-radius:2px; border:2px solid #fff; transform:rotate(45deg);
box-shadow:0 0 3px rgba(0,0,0,.7); }
.fsChip .qs { display:inline-flex; align-items:center; color:inherit; }
.fsChip .qs svg { display:block; }
/* the grouped "everything else" list */
.fsGrp { border-top:1px solid rgba(255,255,255,.07); }
.fsGrp > summary { list-style:none; cursor:pointer; padding:13px 2px; display:flex; align-items:center;
gap:9px; font-size:14px; font-weight:600; color:var(--fs-ink); }
.fsGrp > summary::-webkit-details-marker { display:none; }
.fsGrp > summary .gi { flex:0 0 auto; display:flex; color:#82949f; }
.fsGrp > summary .gi svg { width:16px; height:16px; }
.fsGrp > summary .gt { flex:1; min-width:0; }
.fsGrp > summary .gt i { display:block; font-style:normal; font-size:12.5px; font-weight:600;
color:#82949f; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fsGrp > summary .cr { flex:0 0 auto; font-size:12.5px; font-weight:700; color:#82949f; }
.fsGrp > summary .ar { transition:transform .15s ease; color:#82949f; font-size:13px; }
.fsGrp[open] > summary .ar { transform:rotate(90deg); }
.fsGrp > summary .liveN { background:var(--fs-gold); color:#17242b; border-radius:9px; padding:1px 7px;
font-size:11.5px; font-weight:800; }
.fsRow { display:flex; align-items:center; gap:10px; padding:9px 2px 9px 8px; cursor:pointer;
border-top:1px solid rgba(255,255,255,.05); }
.fsRow:first-child { border-top:0; }
.fsRow .t { flex:1; min-width:0; font-size:13.5px; color:#bfc4c7; line-height:1.35; }
.fsRow input { flex:0 0 auto; width:19px; height:19px; accent-color:var(--fs-gold); cursor:pointer; }
.fsFind { width:100%; box-sizing:border-box; padding:11px 13px; border:1px solid var(--fs-line); border-radius:12px;
font-size:14px; font-family:inherit; margin:0 0 12px; background:var(--fs-bg2); color:var(--fs-ink); }
/* Nearby / Saved / More rows */
.fsItem { display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid rgba(255,255,255,.06);
cursor:pointer; }
.fsItem:last-child { border-bottom:0; }
.fsItem .ic { flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:flex; align-items:center;
justify-content:center; background:var(--fs-bg2); color:var(--fs-gold); }
.fsItem .bd { flex:1; min-width:0; }
.fsItem .bd b { display:block; font-size:14.5px; color:var(--fs-ink); font-weight:600; }
.fsItem .bd span { display:block; font-size:12px; color:var(--fs-dim); margin-top:1px; }
.fsItem .go { flex:0 0 auto; font-size:12px; font-weight:600; color:var(--fs-dim); text-align:right; line-height:1.3; }
.fsEmpty { text-align:center; color:var(--fs-dim); font-size:13.5px; padding:26px 10px; line-height:1.6; }
/* Real gold-rush photography (Library of Congress, 1866-1900, "no known restrictions on publication").
The owner has no photos of their own and the standing rule is real content first, so rather than
stock or generated imagery, these are the actual thing the app is about. Bundled locally because the
PWA has to work with no signal. Always credited. */
.fsPhoto { position:relative; border-radius:14px; overflow:hidden; margin:0 0 18px;
border:1px solid var(--fs-line); background:#000; }
.fsPhoto img { display:block; width:100%; height:150px; object-fit:cover; object-position:center 40%;
opacity:.62; }
.fsPhoto .ov { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
padding:14px 15px 12px;
background:linear-gradient(180deg, rgba(11,11,11,.15) 0%, rgba(11,11,11,.55) 55%, rgba(11,11,11,.93) 100%); }
.fsPhoto b { display:block; font-size:17px; color:#fff; line-height:1.25; }
.fsPhoto span { display:block; font-size:12.5px; color:#ccd3d7; margin-top:4px; line-height:1.45; }
.fsCredit { font-size:11px; color:var(--x-sub); letter-spacing:.2px; padding:0 2px 12px; margin-top:-12px; }
/* field-tool tiles on the Mine screen */
.fsTile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
padding:13px 4px 11px; border-radius:13px; border:1px solid var(--fs-line); background:var(--fs-bg2);
color:#bfc4c7; font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
text-align:center; line-height:1.2; transition:transform .12s ease, border-color .12s ease; }
.fsTile:active { transform:scale(.94); }
.fsTile:hover { border-color:var(--fs-gold); }
.fsTile .ti { display:flex; align-items:center; justify-content:center; color:var(--fs-gold); }
.fsTile .ti svg { width:21px; height:21px; }
/* desktop: the sheet becomes a left docked card instead of a bottom sheet */
@media (min-width:900px) {
#fsTop { left:16px; right:auto; width:430px; }
#fsResults { left:16px; right:auto; width:430px; }
#fsBox { top:0; bottom:0; left:0; right:auto; width:400px; max-height:none; border-radius:0 18px 18px 0;
animation:fsIn .2s cubic-bezier(.22,.9,.3,1); }
@keyframes fsIn { from { transform:translateX(-24px); opacity:.4 } to { transform:none; opacity:1 } }
#fsGrab { display:none; }
#fsHead { padding-top:14px; }
/* the docked sheet is 400px wide, so slide the tab bar clear of it instead of hiding the Map tab */
body.fsOpen #fsTabs { left:400px; }
body.fsOpen #annBanner { left:412px !important; }
}
#annBanner { max-width:420px !important; }
/* Undiscovered places. A ring that breathes, sitting BEHIND the mark so it never competes with the
silhouette a member has learned to read. Reduced-motion gets the ring without the animation,
because the information is the ring, not the movement. */
/* No position rule here. Leaflet already sets .leaflet-marker-icon{position:absolute};
overriding it with position:relative drops every ringed marker out of the map's
coordinate space, which sends them floating and makes them untappable. */
/* A mark is 22px. The floor for a touch target is 44, so on a phone every one of them was half
the size a thumb needs. Keep the mark exactly as drawn and pad the hit area out around it. */
@media (pointer: coarse) {
.leaflet-marker-icon::before{content:'';position:absolute;left:50%;top:50%;
width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%}
}
/* Same invitation, sized for a cluster bubble rather than a 22px mark. */
.c49undisC{position:relative}
.c49undisC::after{content:'';position:absolute;left:50%;top:50%;width:48px;height:48px;
margin:-24px 0 0 -24px;border-radius:50%;pointer-events:none;z-index:-1;
border:2px solid rgba(201,160,74,.85);box-shadow:0 0 10px rgba(201,160,74,.5);
animation:c49pulse 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.c49undisC::after{animation:none;opacity:.7;transform:scale(.9)}}
.c49undis::after{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;
margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;z-index:-1;
border:2px solid rgba(201,160,74,.85);box-shadow:0 0 8px rgba(201,160,74,.55);
animation:c49pulse 2.4s ease-in-out infinite}
@keyframes c49pulse{0%,100%{transform:scale(.72);opacity:.35}50%{transform:scale(1);opacity:.95}}
@media (prefers-reduced-motion:reduce){.c49undis::after{animation:none;opacity:.7;transform:scale(.9)}}
/* The find card. Slides up, holds, leaves. It must not cover the popup a member is reading, so it
sits low and stays narrow, and it never blocks the map behind it. */
#findCard{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);
transform:translate(-50%,140%);width:min(340px,calc(100vw - 28px));z-index:1200;
background:var(--x-paper);border:1px solid var(--x-line);border-left:4px solid var(--x-gold);
border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.34);padding:10px 12px;cursor:pointer;
display:flex;align-items:center;gap:11px;opacity:0;
transition:transform .34s cubic-bezier(.2,.9,.3,1.2),opacity .28s ease}
#findCard.show{transform:translate(-50%,0);opacity:1}
#findCard .fcGlyph{font-size:30px;line-height:1;flex:0 0 auto;width:42px;height:42px;
display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--x-card)}
#findCard .fcName{font-weight:800;font-size:14px;color:var(--x-ink);line-height:1.25}
#findCard .fcSub{font-size:12.5px;color:var(--x-sub);margin-top:2px}
#findCard .fcXp{margin-left:auto;font-weight:800;color:var(--x-ok);font-size:14px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){#findCard{transition:opacity .2s ease;transform:translate(-50%,0)}}
/* The hunt banner. Sits under the search bar, says nothing most of the time, and never covers a
marker. It is a nudge, not a HUD. */
#huntHint{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 62px);
z-index:900;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
background:var(--x-paper);border:1px solid var(--x-line);box-shadow:0 3px 12px rgba(0,0,0,.24);
color:var(--x-ink);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s ease}
#huntHint.show{opacity:1}
#huntHint .hhDot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;
vertical-align:1px;box-shadow:0 0 7px currentColor;background:currentColor}
/* The alerts ask. Same shape as the find card so it reads as part of the same moment, not an advert. */
#alertAsk{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);
transform:translate(-50%,140%);width:min(360px,calc(100vw - 28px));z-index:1210;
background:var(--x-paper);border:1px solid var(--x-line);border-left:4px solid var(--x-ok);
border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.34);padding:12px 13px;opacity:0;
transition:transform .34s cubic-bezier(.2,.9,.3,1.2),opacity .28s ease}
#alertAsk.show{transform:translate(-50%,0);opacity:1}
#alertAsk .aaTitle{font-weight:800;font-size:14px;color:var(--x-ink)}
#alertAsk .aaSub{font-size:12px;color:var(--x-sub);line-height:1.5;margin:3px 0 9px}
#alertAsk .aaRow{display:flex;gap:8px}
#alertAsk button{flex:1;padding:9px;border-radius:9px;border:1px solid var(--x-line);
background:var(--x-card);color:var(--x-ink);font-weight:700;font-size:13px;cursor:pointer}
#alertAsk button.yes{background:var(--x-ok);border-color:var(--x-ok);color:#fff}
/* The game HUD. Small, always there, tappable. It is the only thing on screen that says a map is
also a game, so it does not hide and it does not animate for attention. */
#gameHud{position:fixed;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);z-index:880;
display:none;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;cursor:pointer;
background:var(--x-paper);border:1px solid var(--x-line);box-shadow:0 3px 12px rgba(0,0,0,.26);
font-size:12.5px;color:var(--x-ink);white-space:nowrap}
#gameHud.on{display:flex}
#gameHud b{color:var(--x-ink)}
#gameHud .ghBar{width:44px;height:5px;border-radius:3px;background:var(--x-line);overflow:hidden}
#gameHud .ghFill{height:100%;background:var(--x-ok)}