/* CleanHOU design system: tokens → base → shell → components → views. Admin-only styles live in css/admin.css. */

/* ============================================================ tokens */
:root {
  --brand-50:#ecf8f2; --brand-100:#d1efdf; --brand-200:#a4dec0; --brand-400:#34a872;
  --brand-500:#138a57; --brand-600:#0b6e45; --brand-700:#095839; --brand-900:#063524;
  --n-0:#fff; --n-25:#fbfcfc; --n-50:#f5f7f7; --n-100:#eceff0; --n-200:#dde2e4; --n-300:#c3cacd;
  --n-400:#949ea3; --n-500:#6b767c; --n-600:#4f595e; --n-700:#384146; --n-800:#22292d; --n-900:#12171a;
  --bg:var(--n-50); --surface:var(--n-0); --surface-2:var(--n-25); --surface-sunk:var(--n-100);
  --border:var(--n-200); --border-strong:var(--n-300);
  --text:var(--n-900); --text-2:var(--n-600); --text-3:#5f6a70; --text-on-brand:#fff;
  --btn-bg:var(--brand-600); --btn-bg-hover:var(--brand-700); --btn-text:#fff; --link:var(--brand-600);
  --focus:#2563eb;
  --st-open:#b45309; --st-open-fill:#d97706; --st-open-bg:#fef3c7;
  --st-claimed:#2563eb; --st-claimed-bg:#dbeafe;
  --st-done:#15803d; --st-done-bg:#dcfce7;
  --st-sample:#7c3aed; --st-sample-bg:#ede9fe;
  --st-pending:#b45309; --st-pending-bg:#fef3c7; --st-approved:#15803d; --st-approved-bg:#dcfce7; --st-denied:#b91c1c; --st-denied-bg:#fee2e2;
  --danger:#dc2626; --danger-text:#b91c1c; --danger-bg:#fee2e2; --warn:#b45309; --warn-bg:#fffbeb; --info:#0369a1; --info-bg:#e0f2fe;
  --need-1:#fbbf24; --need-2:#f97316; --need-3:#dc2626;
  --cat-dumping:#b45309; --cat-litter:#0e7490; --cat-drain:#1d4ed8; --cat-graffiti:#7c3aed; --cat-vehicles:#475569;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgb(16 24 28/.06),0 1px 1px rgb(16 24 28/.04);
  --sh-2:0 4px 12px rgb(16 24 28/.08),0 1px 3px rgb(16 24 28/.06);
  --sh-3:0 12px 32px rgb(16 24 28/.14),0 2px 6px rgb(16 24 28/.08);
  --sh-float:0 6px 20px rgb(16 24 28/.12),0 1px 3px rgb(16 24 28/.08);
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --d-1:120ms; --d-2:200ms; --d-3:320ms; --d-4:500ms;
  --glass:rgb(255 255 255/.86); --scrim:rgb(10 15 18/.45);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --tabbar-h:calc(56px + var(--safe-b));
  --sheet-visible:0px; --map-bg:#e9ebec;
  color-scheme:light;
}
:root[data-resolved-theme=dark] {
  --brand-50:#0c2a1e; --brand-100:#103826; --brand-600:#34a872; --brand-700:#4cc08a;
  --bg:#0e1315; --surface:#161c1f; --surface-2:#1b2226; --surface-sunk:#0b0f11;
  --border:#2a3337; --border-strong:#3a454a;
  --text:#e8eef0; --text-2:#a9b5ba; --text-3:#8d9aa2;
  --btn-bg:#34a872; --btn-bg-hover:#4cc08a; --btn-text:#04160e; --link:#5fd49c;
  --focus:#60a5fa;
  --st-open:#fbbf24; --st-open-fill:#fbbf24; --st-open-bg:rgb(251 191 36/.15);
  --st-claimed:#60a5fa; --st-claimed-bg:rgb(96 165 250/.16);
  --st-done:#4ade80; --st-done-bg:rgb(74 222 128/.14);
  --st-sample:#c4b5fd; --st-sample-bg:rgb(167 139 250/.18);
  --st-pending:#fbbf24; --st-pending-bg:rgb(251 191 36/.15); --st-approved:#4ade80; --st-approved-bg:rgb(74 222 128/.14); --st-denied:#fca5a5; --st-denied-bg:rgb(248 113 113/.15);
  --danger:#f87171; --danger-text:#fca5a5; --danger-bg:rgb(248 113 113/.15); --warn:#fbbf24; --warn-bg:rgb(251 191 36/.1); --info:#7dd3fc; --info-bg:rgb(125 211 252/.12);
  --need-1:#fcd34d; --need-2:#fb923c; --need-3:#f87171;
  --cat-dumping:#f59e0b; --cat-litter:#22d3ee; --cat-drain:#60a5fa; --cat-graffiti:#a78bfa; --cat-vehicles:#94a3b8;
  --sh-1:0 1px 2px rgb(0 0 0/.4); --sh-2:0 4px 12px rgb(0 0 0/.4); --sh-3:0 12px 32px rgb(0 0 0/.5); --sh-float:0 6px 20px rgb(0 0 0/.45);
  --glass:rgb(22 28 31/.86); --scrim:rgb(0 0 0/.6); --map-bg:#26292b;
  color-scheme:dark;
}

/* ============================================================ base */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body { height:100%; margin:0; }
body { font-family:var(--font); font-size:15px; line-height:22px; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none; }
h1,h2,h3,h4,p,ol,ul,dl,dd,figure { margin:0; padding:0; }
ol,ul { list-style:none; }
a { color:var(--link); text-underline-offset:2px; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
input,select,textarea { font:inherit; color:inherit; }
img,svg { display:block; }
.ic { flex:none; }
:focus-visible { outline:2.5px solid var(--focus); outline-offset:2px; border-radius:6px; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:9999; background:var(--surface); color:var(--text); padding:10px 14px; border-radius:var(--r-sm); box-shadow:var(--sh-3); font-weight:650; }
.skip-link:focus { top:calc(12px + var(--safe-t)); }
.muted { color:var(--text-2); }
.fine { font-size:13px; line-height:18px; color:var(--text-3); }
.fine .ic { display:inline; vertical-align:-3px; }
.center { text-align:center; }
.lede { color:var(--text-2); }
.count { display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--surface-sunk); color:var(--text-2); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
.eyebrow { font-size:11px; line-height:14px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--text-3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dot-sep { color:var(--text-3); margin:0 5px; }
.link-btn { color:var(--link); font-weight:600; text-decoration:underline; text-underline-offset:2px; padding:4px; margin:-4px; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; }

/* ============================================================ shell: mobile first */
.app { position:relative; height:100%; height:100dvh; }
.map { position:fixed; inset:0; z-index:0; background:var(--surface-sunk); }
.map.leaflet-container { background:var(--map-bg); font-family:var(--font); }
.stage { position:static; }

.toolbar { position:fixed; z-index:20; top:0; left:0; right:0; padding:calc(10px + var(--safe-t)) 12px 0; pointer-events:none; }
.toolbar > * { pointer-events:auto; }
.tb-row { display:flex; align-items:center; gap:8px; }
.tb-logo { flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:var(--r-md); background:var(--glass); box-shadow:var(--sh-float); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); }
.tb-actions { display:none; }
.tb-filters { display:none; }
@media (min-width:900px) { .tb-filters { display:inline-flex; } }
.search { flex:1; min-width:0; height:48px; display:flex; align-items:center; gap:2px; padding:0 4px 0 14px; border-radius:var(--r-pill); background:var(--glass); box-shadow:var(--sh-float); border:1px solid color-mix(in srgb, var(--border) 60%, transparent); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); transition:box-shadow var(--d-2); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .search,.tb-logo,.chip,.data-badge,.map-key-btn,.fab { background:var(--surface); } }
.search:focus-within { box-shadow:var(--sh-float),0 0 0 2.5px var(--focus); }
.search-ic { color:var(--text-2); display:grid; }
.search input { flex:1; min-width:0; height:44px; border:0; outline:0; background:transparent; font-size:16px; padding:0 6px; }
.search input::placeholder { color:var(--text-3); }
.search input::-webkit-search-cancel-button { display:none; }
.search-btn { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%; color:var(--text-2); transition:background var(--d-1),transform var(--d-1); }
.search-btn:hover { background:var(--surface-sunk); }
.search-btn:active { transform:scale(.94); }
.search-btn.locate { color:var(--brand-600); }
.search-btn.is-busy svg { animation:spin 1s linear infinite; }
#btn-clear { display:none; }
.search.has-value #btn-clear, .has-center #btn-clear { display:grid; }

.chips-scroll { margin:8px -12px 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent); }
.chips-scroll::-webkit-scrollbar { display:none; }
.chips { display:flex; gap:8px; padding:2px 12px 10px; width:max-content; align-items:center; }
.chip { height:36px; display:inline-flex; align-items:center; gap:6px; padding:0 12px 0 10px; border-radius:var(--r-pill); background:var(--glass); border:1.5px solid color-mix(in srgb, var(--border-strong) 70%, transparent); box-shadow:var(--sh-1); font-size:13px; font-weight:600; line-height:18px; white-space:nowrap; color:var(--text); transition:background var(--d-2),border-color var(--d-2),transform var(--d-1); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); position:relative; }
.chip:active { transform:scale(.96); }
.chip-ic { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:var(--cat,var(--text-2)); }
.chip[aria-pressed=true] { background:color-mix(in srgb, var(--cat,var(--brand-600)) 13%, var(--surface)); border-color:var(--cat,var(--brand-600)); }
.chip[aria-pressed=true] .chip-ic { background:var(--cat); color:#fff; }
.chip-s { display:none; }
@media (max-width:899px) { .chip-l { display:none; } .chip-s { display:inline; } }
.chip-n { font-variant-numeric:tabular-nums; font-weight:700; color:var(--text-2); font-size:12px; min-width:18px; }
.chip-n.sk { width:24px; height:12px; }
.chip-more { padding:0 12px; color:var(--text); }
.chip-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; border-radius:9px; background:var(--brand-600); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; padding:0 5px; border:2px solid var(--surface); }
:root[data-resolved-theme=dark] .chip-badge { color:#04160e; }
.chip-sep { width:1px; height:22px; background:var(--border-strong); margin:0 2px; }
.chip-label { font-size:12px; font-weight:650; color:var(--text-2); background:var(--glass); padding:2px 8px; border-radius:var(--r-pill); }
.chip-r { padding:0 12px; font-variant-numeric:tabular-nums; }
.chip-r[aria-pressed=true] { --cat:var(--brand-600); }
.chip-sm { height:36px; background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
.chip-sm[aria-pressed=true] { --cat:var(--brand-600); }

/* bottom tab bar (mobile) */
.rail { position:fixed; z-index:40; left:0; right:0; bottom:0; height:var(--tabbar-h); padding-bottom:var(--safe-b); display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -4px 16px rgb(16 24 28/.05); }
.rail-brand, .rail-sep, .rail-only { display:none !important; }
.nav-label { white-space:nowrap; }
.nav-item { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--text-2); text-decoration:none; font-size:11.5px; font-weight:650; letter-spacing:.01em; min-height:44px; -webkit-tap-highlight-color:transparent; }
.nav-ic { display:grid; place-items:center; width:56px; height:30px; border-radius:var(--r-pill); transition:background var(--d-2),color var(--d-2); }
.nav-item.active { color:var(--brand-600); }
.nav-item.active .nav-ic { background:var(--brand-50); }
.nav-item.active .nav-ic svg { stroke-width:2.1; }
.nav-dot { position:absolute; top:8px; left:calc(50% + 10px); width:9px; height:9px; border-radius:50%; background:var(--st-claimed); border:2px solid var(--surface); }

/* bottom sheet (mobile) */
.panel-toggle { display:none; }
.panel { position:fixed; z-index:30; left:0; right:0; top:var(--sheet-top,calc(var(--safe-t) + 112px)); bottom:var(--tabbar-h); background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--sh-3); display:flex; flex-direction:column; transition:transform var(--d-3) var(--ease-spring); will-change:transform; touch-action:pan-y; }
.panel.dragging { transition:none; }
.app:not([data-tab=explore]) .panel { --sheet-top:calc(var(--safe-t) + 10px); }
.app:not([data-tab=explore]) .toolbar { display:none; }
.sheet-handle { flex:none; height:22px; width:100%; display:grid; place-items:center; cursor:grab; touch-action:none; border-radius:var(--r-xl) var(--r-xl) 0 0; }
.sheet-handle span { width:36px; height:5px; border-radius:3px; background:var(--border-strong); }
.view { --vpad:16px; flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:0 var(--vpad) 24px; -webkit-overflow-scrolling:touch; outline:none; }
.view.enter > * { animation:viewIn var(--d-3) var(--ease-out); }
@keyframes viewIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* map overlay ui */
.map-ui { position:fixed; z-index:15; left:12px; right:12px; bottom:calc(var(--tabbar-h) + var(--sheet-visible) + 26px); display:flex; align-items:flex-end; gap:8px; pointer-events:none; transition:bottom var(--d-3) var(--ease-spring); }
.map-ui > * { pointer-events:auto; }
.app:not([data-tab=explore]) .map-ui { display:none; }
.data-badge { height:32px; display:inline-flex; align-items:center; gap:7px; padding:0 12px 0 10px; border-radius:var(--r-pill); background:var(--glass); box-shadow:var(--sh-float); font-size:12.5px; font-weight:650; color:var(--text); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); white-space:nowrap; font-variant-numeric:tabular-nums; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--text-3); position:relative; }
.data-badge.live .live-dot { background:#16a34a; box-shadow:0 0 0 3px rgb(22 163 74/.2); }
.data-badge.snapshot .live-dot { background:var(--st-open-fill); }
.data-badge.error .live-dot { background:var(--danger); }
.data-badge.loading .live-dot { animation:blink 1s ease-in-out infinite; }
.data-badge.pulse .live-dot::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid #16a34a; animation:ping .9s var(--ease-out); }
.map-key-btn { white-space:nowrap; height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 12px 0 9px; border-radius:var(--r-pill); background:var(--glass); box-shadow:var(--sh-float); font-size:12.5px; font-weight:650; -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); }
.map-key-btn svg { width:16px; height:16px; color:var(--text-2); }
@media (max-width:374px) { .map-key-btn { padding:0 8px; } .map-key-btn [data-i18n] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }
.map-fabs { margin-left:auto; display:flex; flex-direction:column; gap:8px; }
.fab { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--glass); box-shadow:var(--sh-float); color:var(--text); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); transition:transform var(--d-1); }
.fab:active { transform:scale(.94); }
.legend { position:absolute; left:0; bottom:42px; width:min(280px, calc(100vw - 24px)); max-height:min(440px, calc(100dvh - var(--tabbar-h) - var(--sheet-visible) - 190px)); overflow:auto; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:14px 16px; animation:popIn var(--d-2) var(--ease-out); transform-origin:bottom left; }
.legend h3 { font-size:15px; font-weight:700; margin-bottom:6px; }
.legend .lg-h { font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--text-3); margin:10px 0 6px; display:flex; align-items:center; gap:6px; }
.legend ul { display:grid; gap:6px; }
.legend li { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; }
.lg-dot { width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border-strong); margin:0 4px; }
.lg-dot.sm { width:11px; height:11px; margin:0 6px; }
.lg-pin svg { width:19px; height:24px; }
.lg-pin { width:24px; display:grid; place-items:center; }
.lg-line { width:24px; height:0; border-top:4px solid; border-radius:2px; }
.lg-line.open { border-color:var(--st-open-fill); border-top-style:dashed; }
.lg-line.claimed { border-color:var(--st-claimed); }
.lg-line.done { border-color:var(--st-done); }
.legend .fine { margin-top:10px; }
@keyframes popIn { from { opacity:0; transform:scale(.96) translateY(4px); } to { opacity:1; transform:none; } }

.banner { position:fixed; z-index:45; left:12px; right:12px; top:calc(var(--safe-t) + 118px); display:grid; gap:6px; pointer-events:none; }
.banner p { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-md); background:var(--n-900); color:#fff; font-size:13px; font-weight:600; box-shadow:var(--sh-2); pointer-events:auto; }
.app:not([data-tab=explore]) .banner { top:auto; bottom:calc(var(--tabbar-h) + 10px); }

/* ============================================================ desktop */
/* desktop: the map fills the viewport; search, tabs, list and controls float over it */
@media (min-width: 900px) {
  body { font-size:15px; }
  .app { --gap:12px; --panel-w:380px; --tb-h:48px; --tabs-h:56px; --panel-top:calc(var(--gap) + var(--tb-h) + 8px); --panel-x:0px; }
  .app[data-panel=collapsed] { --panel-x:calc(-1 * (var(--panel-w) + var(--gap) + 12px)); }
  .map { position:fixed; inset:0; }

  .toolbar { position:fixed; z-index:25; top:var(--gap); left:var(--gap); right:var(--gap); padding:0; display:flex; align-items:center; gap:8px; pointer-events:none; }
  .app:not([data-tab=explore]) .toolbar { display:flex; }
  .tb-row { display:contents; }
  .tb-logo { display:grid; width:var(--tb-h); height:var(--tb-h); }
  .search { flex:0 0 calc(var(--panel-w) - var(--tb-h) - 8px); height:var(--tb-h); }
  .chips-scroll { order:1; flex:1; min-width:0; margin:0; }
  .chips { padding:6px 16px 6px 4px; }
  .chip { box-shadow:var(--sh-float); }
  .chip:hover { border-color:var(--cat,var(--text-3)); }
  .chips .chip-more { display:none; }
  .tb-actions { order:2; display:flex; gap:2px; align-items:center; height:var(--tb-h); padding:0 4px; border-radius:var(--r-pill); background:var(--glass); box-shadow:var(--sh-float); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); }
  .tb-filters { position:relative; margin-right:2px; background:transparent; border-color:transparent; }
  .tb-filters .chip-badge { top:-6px; right:-6px; }

  /* the four sections become tabs on top of the floating list card */
  .rail { position:fixed; z-index:31; left:var(--gap); top:var(--panel-top); width:var(--panel-w); height:var(--tabs-h); padding:6px; display:flex; align-items:stretch; gap:2px; background:var(--surface); border:0; border-bottom:1px solid var(--border); border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--sh-3); clip-path:inset(-40px -40px 0 -40px); transform:translateX(var(--panel-x)); transition:transform var(--d-3) var(--ease-out); }
  .rail-brand { display:none !important; }
  .rail-sep { display:block !important; flex:none; width:1px; height:24px; align-self:center; background:var(--border); margin:0 2px; }
  .rail-only { display:flex !important; }
  .nav-item { flex:1; min-width:0; gap:1px; border-radius:var(--r-sm); font-size:11.5px; }
  .nav-ic { width:auto; height:auto; background:none !important; }
  .nav-ic svg { width:20px; height:20px; }
  .nav-item:hover { color:var(--text); background:var(--surface-sunk); }
  .nav-item.active { background:var(--brand-50); }
  .nav-item.rail-only { flex:0 0 36px; }
  .nav-item.rail-only .nav-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .nav-dot { left:auto; right:10px; top:6px; }

  .panel { position:fixed; z-index:30; left:var(--gap); right:auto; top:calc(var(--panel-top) + var(--tabs-h)); bottom:var(--gap); width:var(--panel-w); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--sh-3); transform:translateX(var(--panel-x)) !important; transition:transform var(--d-3) var(--ease-out); min-height:0; }
  .sheet-handle { display:none; }
  .view { --vpad:18px; padding:4px var(--vpad) 32px; }

  .panel-toggle { display:grid; position:fixed; z-index:32; top:calc(var(--panel-top) + 10px); left:calc(var(--gap) + var(--panel-w) + var(--panel-x)); width:22px; height:44px; place-items:center; border-radius:0 10px 10px 0; background:var(--surface); color:var(--text-2); box-shadow:4px 2px 10px rgb(16 24 28/.12); transition:left var(--d-3) var(--ease-out); }
  .panel-toggle:hover { color:var(--text); }
  .panel-toggle svg { width:18px; height:18px; transform:rotate(180deg); transition:transform var(--d-3); }
  .app[data-panel=collapsed] .panel-toggle { left:0; }
  .app[data-panel=collapsed] .panel-toggle svg { transform:none; }

  .map-ui { position:fixed; left:max(var(--gap), calc(var(--gap) * 2 + var(--panel-w) + var(--panel-x))); right:auto; bottom:var(--gap); transition:left var(--d-3) var(--ease-out); }
  .app:not([data-tab=explore]) .map-ui { display:flex; }
  .map-fabs { position:fixed; right:var(--gap); bottom:calc(var(--gap) + 96px); }
  .fab { width:40px; height:40px; background:var(--surface); }
  .leaflet-control-zoom { margin:0 var(--gap) calc(var(--gap) + 18px) 0 !important; }
  .banner { position:fixed; top:calc(var(--gap) + var(--tb-h) + 12px); left:auto; right:var(--gap); bottom:auto; width:min(420px, 40vw); }
  .app:not([data-tab=explore]) .banner { top:calc(var(--gap) + var(--tb-h) + 12px); bottom:auto; }
}
@media (min-width: 1280px) {
  .app { --panel-w:408px; }
  .nav-item { flex-direction:row; gap:6px; font-size:13.5px; }
}

/* ============================================================ buttons */
.btn { --h:44px; height:var(--h); min-width:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; border-radius:var(--r-md); font-weight:650; font-size:15px; line-height:1; text-decoration:none; white-space:nowrap; transition:background var(--d-2),box-shadow var(--d-2),transform var(--d-1),opacity var(--d-2); user-select:none; position:relative; }
.btn:active { transform:scale(.97); }
.btn-sm { --h:36px; padding:0 12px; font-size:13.5px; border-radius:var(--r-sm); gap:6px; }
.btn-lg { --h:52px; font-size:16px; border-radius:var(--r-md); padding:0 22px; }
.btn-block { width:100%; }
.btn-grow { flex:1; }
.btn-primary { background:var(--btn-bg); color:var(--btn-text); box-shadow:0 1px 2px rgb(11 110 69/.25), inset 0 1px 0 rgb(255 255 255/.12); }
.btn-primary:hover { background:var(--btn-bg-hover); }
.btn-done { background:var(--st-done); color:#fff; }
:root[data-resolved-theme=dark] .btn-done { background:#22c55e; color:#04160e; }
.btn-done:hover { filter:brightness(1.06); }
.btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); }
.btn-secondary:hover { background:var(--surface-sunk); }
.btn-ghost { color:var(--text); }
.btn-ghost:hover { background:var(--surface-sunk); }
.btn-danger { background:var(--danger); color:#fff; }
:root[data-resolved-theme=dark] .btn-danger { color:#1a0505; }
.danger-text { color:var(--danger-text); }
.btn-icon { width:44px; height:44px; flex:none; display:inline-grid; place-items:center; border-radius:50%; color:var(--text-2); transition:background var(--d-1),transform var(--d-1); text-decoration:none; }
.btn-icon:hover { background:var(--surface-sunk); color:var(--text); }
.btn-icon:active { transform:scale(.94); }
.btn[disabled], .btn[aria-disabled=true] { opacity:.45; pointer-events:none; }
.btn.is-busy { color:transparent !important; pointer-events:none; }
.btn.is-busy svg { opacity:0; }
.btn.is-busy::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2.5px solid var(--btn-text); border-right-color:transparent; animation:spin .7s linear infinite; }
.btn-secondary.is-busy::after, .btn-ghost.is-busy::after { border-color:var(--text); border-right-color:transparent; }
.lang-code { font-weight:750; font-size:13px; letter-spacing:.02em; }
.spinner { display:inline-block; width:28px; height:28px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--brand-600); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes blink { 50% { opacity:.3; } }
@keyframes ping { from { transform:scale(1); opacity:1; } to { transform:scale(2.6); opacity:0; } }

/* segmented */
.seg { display:inline-flex; padding:3px; gap:2px; background:var(--surface-sunk); border-radius:var(--r-sm); }
.seg > button, .seg > .seg-radio > span { height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; border-radius:8px; font-size:13px; font-weight:650; color:var(--text-2); transition:background var(--d-2),color var(--d-2),box-shadow var(--d-2); white-space:nowrap; }
.seg-sm > button { height:30px; padding:0 10px; font-size:12.5px; }
.seg > button[aria-pressed=true], .seg > button[aria-selected=true], .seg-radio input:checked + span { background:var(--surface); color:var(--text); box-shadow:var(--sh-1); }
.seg > button:hover { color:var(--text); }
.seg-block { display:flex; width:100%; }
.seg-block > button, .seg-block > .seg-radio { flex:1; }
.seg-radio { position:relative; display:flex; }
.seg-radio > span { width:100%; cursor:pointer; }
.seg-radio input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.seg-radio input:focus-visible + span { outline:2.5px solid var(--focus); }

/* pills & badges */
.pill { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px 0 7px; border-radius:var(--r-pill); font-size:12px; font-weight:700; white-space:nowrap; color:var(--st-c,var(--text-2)); background:var(--st-bg,var(--surface-sunk)); }
.pill[data-status=open] { --st-c:var(--st-open); --st-bg:var(--st-open-bg); }
.pill[data-status=claimed] { --st-c:var(--st-claimed); --st-bg:var(--st-claimed-bg); }
.pill[data-status=completed], .pill[data-status=approved] { --st-c:var(--st-done); --st-bg:var(--st-done-bg); }
.pill[data-status=pending] { --st-c:var(--st-pending); --st-bg:var(--st-pending-bg); }
.pill[data-status=denied], .pill[data-status=cancelled] { --st-c:var(--st-denied); --st-bg:var(--st-denied-bg); }
.pill[data-status=upcoming] { --st-c:var(--brand-600); --st-bg:var(--brand-50); }
.pill[data-status=full] { --st-c:var(--text-2); --st-bg:var(--surface-sunk); }
:root:not([data-resolved-theme=dark]) .pill[data-status=claimed] { --st-c:#1d4ed8; }
.badge-sample { display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:5px; background:var(--st-sample-bg); color:var(--st-sample); font-size:10.5px; line-height:1; font-weight:800; letter-spacing:.06em; text-transform:uppercase; cursor:help; white-space:nowrap; }

/* skeleton */
.sk { display:block; border-radius:6px; background:linear-gradient(90deg,var(--surface-sunk) 25%,color-mix(in srgb,var(--surface-sunk) 40%,var(--surface)) 50%,var(--surface-sunk) 75%); background-size:200% 100%; animation:shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.sk-list { display:grid; gap:8px; padding-top:4px; }
.sk-card { display:flex; align-items:center; gap:12px; padding:12px; }
.sk-dot { width:40px; height:40px; border-radius:12px; flex:none; }
.sk-lines { flex:1; display:grid; gap:8px; }
.sk-l1 { height:14px; width:70%; }
.sk-l2 { height:11px; width:45%; }
.sk-pill { width:44px; height:36px; border-radius:10px; }
.sk-title { height:22px; width:180px; }

/* cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-1); padding:14px; }

/* empty */
.empty { text-align:center; padding:36px 16px 28px; display:grid; justify-items:center; gap:8px; }
.empty-ic { width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--brand-50); color:var(--brand-600); margin-bottom:6px; }
.empty h3 { font-size:17px; font-weight:700; }
.empty p { color:var(--text-2); max-width:34ch; }
.empty .btn { margin-top:8px; }
.empty-inline { color:var(--text-2); padding:12px 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* toasts */
.toasts { position:fixed; z-index:1000; left:50%; transform:translateX(-50%); bottom:calc(var(--tabbar-h) + 14px); display:grid; gap:8px; width:min(440px, calc(100vw - 24px)); pointer-events:none; }
.toast { display:flex; align-items:center; gap:10px; padding:11px 12px 11px 14px; border-radius:var(--r-md); background:var(--n-900); color:#fff; box-shadow:var(--sh-3); font-size:14px; font-weight:550; line-height:19px; pointer-events:auto; animation:toastIn var(--d-3) var(--ease-spring); }
:root[data-resolved-theme=dark] .toast { background:#e8eef0; color:#12171a; }
.toast .ic { color:#9ca3af; }
.toast-success .ic { color:#4ade80; }
.toast-error .ic { color:#f87171; }
.toast-live .ic { color:#60a5fa; }
:root[data-resolved-theme=dark] .toast-success .ic { color:#15803d; }
:root[data-resolved-theme=dark] .toast-error .ic { color:#b91c1c; }
:root[data-resolved-theme=dark] .toast-live .ic { color:#1d4ed8; }
.toast-msg { flex:1; }
.toast-act { font-weight:750; color:#86efac; padding:8px 10px; margin:-8px -4px -8px 0; border-radius:8px; }
.toast.out { opacity:0; transform:translateY(8px); transition:all .2s; }
@keyframes toastIn { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@media (min-width:900px) { .toasts { bottom:24px; left:calc(50% + 200px); } }

/* ============================================================ list view */
.list-head { position:sticky; top:0; z-index:3; background:var(--surface); margin:0 calc(-1 * var(--vpad)); padding:4px var(--vpad) 10px; border-bottom:1px solid transparent; }
.lh-title { font-size:20px; line-height:26px; font-weight:750; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.lh-sub { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--text-2); font-weight:550; margin-top:1px; }
.lh-sub .ic { color:var(--brand-600); }
.lh-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:10px; }
.lh-sort { display:flex; align-items:center; gap:4px; }
.sort-btn { white-space:nowrap; height:32px; padding:0 12px; border-radius:var(--r-pill); font-weight:650; color:var(--text-2); font-size:13px; border:1px solid var(--border); }
.sort-btn:hover { border-color:var(--border-strong); color:var(--text); }
.sort-btn[aria-pressed=true] { background:var(--text); color:var(--surface); border-color:var(--text); }
.sort-btn[aria-disabled=true] { opacity:.5; }
.seg-sm .ic { width:16px; height:16px; }
.lh-controls .seg-sm > button span { display:none; }
.lh-controls .seg-sm > button { width:44px; padding:0; }
@media (min-width:600px) and (max-width:899px) { .lh-controls .seg-sm > button span { display:inline; } .lh-controls .seg-sm > button { width:auto; padding:0 12px; } }
.onboard { margin:4px 0 12px; background:linear-gradient(135deg,var(--brand-50),var(--surface) 70%); border-color:color-mix(in srgb,var(--brand-600) 25%,var(--border)); }
.onboard h3 { font-size:16px; font-weight:750; margin-bottom:8px; }
.onboard ol { display:grid; gap:7px; margin-bottom:12px; }
.onboard li { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:20px; }
.onboard li .ic { color:var(--brand-600); margin-top:1px; }
.ob-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media (min-width:900px) { .ob-lang { display:none; } }

.tlist, .plist, .glist, .hood-list, .myclaims, .interests { grid-template-columns:minmax(0,1fr); }
.tlist > li, .plist > li, .glist > li { min-width:0; }
.tlist { display:grid; gap:8px; }
.tcard { width:100%; min-height:68px; display:flex; align-items:center; gap:12px; padding:12px; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-1); transition:box-shadow var(--d-2),border-color var(--d-2),transform var(--d-1); }
.tcard:hover { box-shadow:var(--sh-2); border-color:var(--border-strong); }
.tcard:active { transform:scale(.99); }
.tcard.is-selected { border-color:var(--brand-600); box-shadow:0 0 0 1px var(--brand-600),var(--sh-2); }
.lead { width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center; color:var(--st-open); background:var(--st-open-bg); }
.lead[data-kind=hotspot][data-tier="3"] { color:#fff; background:var(--need-3); }
.lead[data-kind=hotspot][data-tier="2"] { color:#fff; background:var(--need-2); }
.lead[data-kind=hotspot][data-tier="1"] { color:#6b4400; background:var(--need-1); }
:root[data-resolved-theme=dark] .lead[data-kind=hotspot][data-tier] { color:#1a0f00; }
.lead[data-kind=segment][data-status=open] { background:var(--surface); border:2px solid var(--st-open-fill); color:var(--st-open); }
.lead[data-status=claimed] { background:var(--st-claimed); color:#fff; }
.lead[data-status=completed] { background:var(--st-done); color:#fff; }
:root[data-resolved-theme=dark] .lead[data-status=claimed], :root[data-resolved-theme=dark] .lead[data-status=completed] { color:#06121f; }
.lead-project { background:var(--brand-600); color:#fff; }
.lead-project.done { background:var(--st-done); }
.tc-main { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px; }
.tc-title { font-size:15.5px; line-height:21px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-meta { font-size:13px; line-height:18px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.tc-meta .badge-sample { vertical-align:1px; margin-right:2px; }
.tc-meta .dist { display:inline-flex; align-items:center; gap:2px; font-weight:650; color:var(--text); }
.tc-meta .dist .ic { color:var(--brand-600); }
.tc-who { display:flex; align-items:center; gap:4px; font-size:12.5px; color:var(--text-2); font-weight:550; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tc-end { flex:none; }
.end-stack { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.need { display:grid; justify-items:center; min-width:48px; padding:5px 6px 4px; border-radius:10px; background:color-mix(in srgb,var(--nc) 14%,var(--surface)); color:var(--nt,var(--nc)); line-height:1; }
.need b { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.need small { font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.need[data-tier="3"] { --nc:var(--need-3); --nt:#b91c1c; }
.need[data-tier="2"] { --nc:var(--need-2); --nt:#c2410c; }
.need[data-tier="1"] { --nc:var(--need-1); --nt:#92400e; }
:root[data-resolved-theme=dark] .need { --nt:var(--nc); }
.show-more { margin-top:12px; }
.list-foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); display:grid; gap:10px; }
.list-foot .fine { display:flex; gap:6px; }
.list-foot .fine .ic { margin-top:2px; }
.dl-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--text-2); }
.dl-row > span { margin-right:auto; }
.pad { padding:4px 0 10px; font-size:14px; }
.hood-list { display:grid; gap:6px; }
.hood { width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); text-align:left; transition:box-shadow var(--d-2); }
.hood:hover { box-shadow:var(--sh-2); }
.hood.is-selected { border-color:var(--brand-600); box-shadow:0 0 0 1px var(--brand-600); }
.hood-rank { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface-sunk); font-weight:750; font-size:13px; font-variant-numeric:tabular-nums; flex:none; }
.hood-main { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:5px; }
.hood-name { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hood-bar { display:flex; height:7px; border-radius:4px; overflow:hidden; gap:1px; background:var(--surface-sunk); }
.hood-sub { font-size:12px; color:var(--text-3); }
.hood-n { display:grid; justify-items:end; line-height:1.1; }
.hood-n b { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.hood-n small { font-size:11px; color:var(--text-3); font-weight:600; }

/* ============================================================ detail */
.detail-top { margin:0 calc(-1 * var(--vpad)); padding:2px var(--vpad) 16px; border-bottom:1px solid var(--border); }
.dt-bar { position:sticky; top:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 calc(-1 * var(--vpad)) 2px; padding:0 calc(var(--vpad) - 8px); background:var(--surface); transition:box-shadow var(--d-2); }
.dt-bar.stuck { padding-right:calc(var(--vpad) - 4px); box-shadow:0 1px 0 var(--border), 0 6px 12px -8px rgb(16 24 28/.18); }
.dt-mini { flex:1; min-width:0; display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(4px); transition:opacity var(--d-2),transform var(--d-2); pointer-events:none; }
.dt-bar.stuck .dt-mini { opacity:1; transform:none; pointer-events:auto; }
.dt-mini strong { flex:1; min-width:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-bar.stuck .back-btn span { display:none; }
.dt-bar.stuck .back-btn { padding:0; width:44px; justify-content:center; }
.dt-bar.stuck .dt-actions { display:none; }
.dt-actions { display:flex; gap:2px; }
.back-btn { display:inline-flex; align-items:center; gap:4px; height:44px; padding:0 12px 0 6px; border-radius:var(--r-pill); font-weight:650; color:var(--text-2); font-size:14px; }
.back-btn:hover { background:var(--surface-sunk); color:var(--text); }
.d-title { font-size:22px; line-height:28px; font-weight:750; letter-spacing:-.015em; margin:4px 0 8px; outline:none; }
.d-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-bottom:14px; }
.meta-i { display:inline-flex; align-items:center; gap:4px; font-size:13.5px; color:var(--text-2); font-weight:550; }
.meta-i .ic { color:var(--text-3); }
.d-cta .btn-lg { box-shadow:0 4px 14px rgb(11 110 69/.25); }
.cta-note { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--r-md); font-weight:600; font-size:14.5px; line-height:20px; background:var(--surface-sunk); }
.cta-note[data-status=claimed] { background:var(--st-claimed-bg); color:var(--st-claimed); }
.cta-note[data-status=completed], .cta-note[data-status=approved] { background:var(--st-done-bg); color:var(--st-done); }
.cta-note[data-status=pending] { background:var(--st-pending-bg); color:var(--st-pending); }
.cta-note[data-status=denied] { background:var(--st-denied-bg); color:var(--st-denied); }
:root:not([data-resolved-theme=dark]) .cta-note[data-status=claimed] { color:#1d4ed8; }
.detail-body { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding-top:16px; }
.sect { min-width:0; }
.timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative; padding:4px 0; }
.timeline li { display:grid; justify-items:center; gap:3px; text-align:center; position:relative; }
.timeline li::before { content:""; position:absolute; top:13px; left:calc(-50% + 16px); right:calc(50% + 16px); height:3px; border-radius:2px; background:var(--border); }
.timeline li:first-child::before { display:none; }
.timeline li.past::before, .timeline li.current::before { background:var(--tl,var(--brand-600)); }
.tl-dot { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--border-strong); background:var(--surface); color:#fff; z-index:1; }
.timeline li[data-status=open] { --tl:var(--st-open-fill); }
.timeline li[data-status=claimed] { --tl:var(--st-claimed); }
.timeline li[data-status=completed] { --tl:var(--st-done); }
.timeline li.past .tl-dot, .timeline li.current .tl-dot { background:var(--tl); border-color:var(--tl); }
:root[data-resolved-theme=dark] .timeline li.past .tl-dot, :root[data-resolved-theme=dark] .timeline li.current .tl-dot { color:#0e1315; }
.timeline li.current .tl-dot { box-shadow:0 0 0 5px color-mix(in srgb,var(--tl) 22%,transparent); }
.tl-l { font-size:13px; font-weight:700; }
.timeline li:not(.past):not(.current) .tl-l { color:var(--text-3); }
.tl-d { font-size:11.5px; color:var(--text-3); min-height:16px; }
.claim-card { display:grid; gap:12px; border-left:4px solid var(--st-claimed); }
.claim-card[data-status=completed] { border-left-color:var(--st-done); }
.cc-head { display:flex; gap:12px; align-items:center; }
.cc-head h3 { font-size:15.5px; font-weight:700; }
.cc-head .muted { font-size:13px; }
.grp-link { display:inline-flex; align-items:center; gap:3px; font-weight:650; }
.cc-note { font-size:14px; color:var(--text-2); font-style:italic; }
.cc-actions { display:flex; flex-wrap:wrap; gap:4px; margin:0 -6px -6px; }
.photos { display:grid; gap:8px; }
.photos.n2 { grid-template-columns:1fr 1fr; }
.photos figure { position:relative; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-sunk); aspect-ratio:4/3; }
.photos img { width:100%; height:100%; object-fit:cover; }
.photos figcaption { position:absolute; left:8px; top:8px; font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.05em; background:rgb(0 0 0/.6); color:#fff; padding:2px 7px; border-radius:5px; }
.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mini-stats > div { background:var(--surface-sunk); border-radius:var(--r-sm); padding:8px 10px; }
.mini-stats dt { font-size:11.5px; color:var(--text-3); font-weight:650; }
.mini-stats dd { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.sect { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.sect-t { font-size:13px; letter-spacing:.05em; text-transform:uppercase; font-weight:750; color:var(--text-2); display:flex; align-items:center; gap:8px; margin:18px 0 8px; }
.sect .sect-t, .sect-head .sect-t { margin:0; }
.sect-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:18px 0 8px; }
.need-hero { display:flex; gap:14px; align-items:stretch; padding:14px; border-radius:var(--r-md); background:color-mix(in srgb,var(--nc) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--nc) 30%,var(--border)); }
.need-hero[data-tier="3"] { --nc:var(--need-3); } .need-hero[data-tier="2"] { --nc:var(--need-2); } .need-hero[data-tier="1"] { --nc:var(--need-1); }
.nh-score { display:grid; align-content:center; justify-items:center; min-width:82px; padding-right:14px; border-right:1px solid color-mix(in srgb,var(--nc) 30%,var(--border)); }
.nh-score b { font-size:34px; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.nh-score span { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--text-2); margin-top:4px; text-align:center; }
.nh-facts { flex:1; min-width:0; display:grid; gap:4px; align-content:center; }
.nh-facts > div { display:flex; justify-content:space-between; font-size:13.5px; }
.nh-facts dt { color:var(--text-2); }
.nh-facts dd { font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:359px) { .need-hero { gap:10px; padding:12px; } .nh-facts > div { flex-wrap:wrap; column-gap:6px; } .nh-facts dt { flex:1; } .nh-score { min-width:60px; padding-right:10px; } .nh-score b { font-size:28px; } .nh-facts > div { font-size:12.5px; gap:6px; } }
.formula code { display:block; font-size:12.5px; padding:8px 10px; border-radius:var(--r-sm); background:var(--surface-sunk); color:var(--text-2); overflow-x:auto; white-space:nowrap; }
.disclose { border-radius:var(--r-sm); }
.disclose > summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-weight:650; font-size:14px; color:var(--link); list-style:none; }
.disclose > summary::-webkit-details-marker { display:none; }
.disclose > p { font-size:14px; color:var(--text-2); padding-bottom:6px; }
.cat-tags { display:flex; flex-wrap:wrap; gap:6px; }
.cat-tag { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; border:1px solid var(--border); }
.cat-tag .ic { color:var(--cat); }
.cases { display:grid; }
.case { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.case:last-child { border-bottom:0; }
.case-ic { width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center; color:var(--cat); background:color-mix(in srgb,var(--cat) 12%,var(--surface)); }
.case-main { display:grid; gap:1px; min-width:0; }
.case-type { font-weight:650; font-size:14px; }
.case-meta { font-size:13px; color:var(--text-2); }
.case-no { font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.tag-overdue, .tag-closed { font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border-radius:4px; margin-left:4px; }
.tag-overdue { background:var(--danger-bg); color:var(--danger-text); }
.tag-closed { background:var(--st-done-bg); color:var(--st-done); }
.note { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--r-sm); background:var(--info-bg); color:var(--text); font-size:13.5px; line-height:19px; }
.note .ic { flex:none; margin-top:1px; color:var(--info); }
.note.subtle { background:var(--surface-sunk); color:var(--text-2); }
.note.subtle .ic { color:var(--text-3); }
.note.warn { background:var(--warn-bg); }
.note.warn .ic { color:var(--warn); }
.sample-note { background:var(--st-sample-bg); align-items:center; }
.facts { display:grid; gap:0; }
.facts > div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
.facts > div:last-child { border-bottom:0; }
.facts dt { color:var(--text-2); }
.facts dd { font-weight:650; display:flex; align-items:center; gap:6px; text-align:right; }
.safety { display:flex; gap:12px; padding:12px 14px; border-radius:var(--r-md); background:var(--warn-bg); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent); }
.safety > .ic { color:var(--warn); margin-top:1px; }
.safety p { font-size:14px; color:var(--text-2); margin-top:2px; }

/* ============================================================ pages */
.page { padding-bottom:12px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:6px 0 8px; }
.page-head h2 { font-size:24px; line-height:30px; font-weight:800; letter-spacing:-.02em; margin:2px 0 4px; outline:none; }
.page-head .lede { font-size:14px; }
.page-head .btn { flex:none; }
@media (max-width:420px) { .page-head { flex-wrap:wrap; } }
.plist, .glist { display:grid; gap:8px; }
.pcard { width:100%; display:flex; gap:12px; padding:14px; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-1); transition:box-shadow var(--d-2); }
.pcard:hover { box-shadow:var(--sh-2); }
.pc-ic, .cc-ic { width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--brand-600); color:#fff; }
:root[data-resolved-theme=dark] .pc-ic, :root[data-resolved-theme=dark] .cc-ic { color:#04160e; }
.pc-ic.done { background:var(--st-done); }
.pc-main { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:4px; }
.pc-top { display:flex; align-items:center; gap:6px; min-width:0; }
.pc-top .badge-sample { flex:none; }
.pc-type { font-size:12px; font-weight:650; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-title { font-size:16px; line-height:21px; font-weight:700; }
.pc-meta { display:flex; align-items:center; gap:2px 12px; font-size:13px; color:var(--text-2); flex-wrap:wrap; }
.pc-meta > span { display:inline-flex; align-items:center; gap:4px; }
.pc-meta .ic { color:var(--text-3); }
.pc-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:4px; }
.pc-foot .slots { flex:1; max-width:220px; margin:0; }
.pc-end { flex:none; }
.slots { display:grid; gap:4px; margin-top:4px; }
.slots-bar { height:6px; border-radius:3px; background:var(--surface-sunk); overflow:hidden; }
.slots-bar span { display:block; height:100%; border-radius:3px; background:var(--brand-600); }
.slots-l { font-size:12px; color:var(--text-3); font-weight:600; font-variant-numeric:tabular-nums; }
.catalog { margin-top:8px; }
.catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:10px 0 16px; }
.cat-card { display:grid; gap:6px; align-content:start; padding:12px; border-radius:var(--r-md); border:1px dashed var(--border-strong); background:var(--surface-2); }
.cat-card .cc-ic { width:40px; height:40px; border-radius:12px; background:var(--brand-50); color:var(--brand-600); }
.cat-card h4, .cat-card b { font-size:14px; line-height:19px; font-weight:700; }
.cat-card p { font-size:12.5px; color:var(--text-2); line-height:17px; }
.cat-card .cc-meta { display:flex; align-items:center; gap:3px; font-weight:600; flex-wrap:wrap; }
.catalog-ref { display:flex; gap:12px; }
.catalog-ref h3 { font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.catalog-ref .muted { font-size:13px; display:flex; gap:3px; align-items:center; flex-wrap:wrap; }
.catalog-ref .ic { display:inline; }

.gcard { display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-1); text-decoration:none; color:inherit; transition:box-shadow var(--d-2); }
.gcard:hover { box-shadow:var(--sh-2); }
.g-rank { width:22px; text-align:center; font-weight:800; color:var(--text-3); font-variant-numeric:tabular-nums; }
.g-main { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
.g-name { font-weight:700; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-meta { display:flex; align-items:center; gap:3px; font-size:12.5px; color:var(--text-2); flex-wrap:wrap; }
.g-chev { color:var(--text-3); }
.avatar { flex:none; display:grid; place-items:center; border-radius:50%; font-weight:750; font-size:14px; color:hsl(var(--av-h) 55% 28%); background:hsl(var(--av-h) 60% 90%); letter-spacing:.02em; }
:root[data-resolved-theme=dark] .avatar { color:hsl(var(--av-h) 70% 85%); background:hsl(var(--av-h) 35% 24%); }
.join-code { margin:14px 0 4px; display:grid; gap:8px; }
.join-code label { display:flex; align-items:center; gap:6px; font-weight:650; font-size:14px; }
.jc-row { display:flex; gap:8px; }
.jc-row input { flex:1; min-width:0; height:44px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); font-size:16px; text-transform:uppercase; letter-spacing:.12em; font-family:ui-monospace,Menlo,monospace; }
.group-hero { display:flex; gap:14px; align-items:flex-start; margin:4px 0 14px; }
.group-hero h2 { font-size:22px; line-height:28px; font-weight:800; outline:none; }
.group-hero .muted { font-size:13px; margin-top:4px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.you-tag { color:var(--brand-600); font-weight:700; }
.invite-box { display:grid; gap:12px; margin-bottom:14px; background:linear-gradient(135deg,var(--brand-50),var(--surface)); }
.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:24px; font-weight:800; letter-spacing:.18em; color:var(--text); }
.ib-main { display:grid; gap:4px; }
.ib-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ib-actions .btn { flex:1; }
.impact { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 14px; }
.tile { display:grid; gap:2px; padding:12px 10px; border-radius:var(--r-md); background:var(--surface-sunk); }
.tile b { font-size:26px; line-height:30px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tile > span:last-child { font-size:12px; line-height:15px; color:var(--text-2); font-weight:600; }
.tile-ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; margin-bottom:4px; }
.tile-ic.done { background:var(--st-done-bg); color:var(--st-done); }
.tile-ic.bags { background:var(--st-open-bg); color:var(--st-open); }
.tile-ic.hrs { background:var(--st-claimed-bg); color:var(--st-claimed); }
.roster { margin-top:6px; }
.members { display:grid; }
.members li { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.m-main { flex:1; min-width:0; display:grid; }
.m-name { font-weight:650; }
.m-meta { font-size:12.5px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role { font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:.05em; padding:1px 6px; border-radius:4px; background:var(--brand-50); color:var(--brand-600); margin-left:4px; }
.danger-zone { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.me-head { align-items:center; gap:12px; }
.me-head .me-id { flex:1; min-width:0; }
.me-head h2 { font-size:21px; line-height:26px; margin:0; }
.me-head .muted { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.impact-card { margin:6px 0 4px; padding-bottom:10px; }
.impact-card .sect-head { margin:0 0 12px; flex-wrap:wrap; }
.impact-card .impact { margin-bottom:10px; }
.myclaims { display:grid; gap:8px; }
.mc { display:grid; gap:12px; }
.mc-top { display:flex; gap:12px; align-items:center; }
.mc-main { min-width:0; }
.mc-title { font-weight:700; font-size:15.5px; color:var(--text); text-decoration:none; }
.mc-title:hover { text-decoration:underline; }
.mc .muted { font-size:13px; display:flex; align-items:center; gap:3px; }
.mc-actions { display:flex; gap:8px; }
.mc-actions .btn-done { flex:1; }
.interests { display:grid; gap:6px; }
.int-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:inherit; }
.int-main { flex:1; min-width:0; display:grid; }
.int-title { font-weight:650; }
.int-meta { font-size:12.5px; color:var(--text-2); }
.settings { margin-top:18px; display:grid; gap:6px; }
.settings .sect-t { margin:0 0 4px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; flex-wrap:wrap; }
.set-row > span { display:flex; align-items:center; gap:8px; font-weight:600; }
.set-row > span .ic { color:var(--text-2); }
.data-card { margin-top:12px; }
.data-card .sect-t { margin:0 0 4px; }
.data-card .fine, .modal-body > .fine { margin-top:10px; }
.data-dot { width:9px; height:9px; border-radius:50%; background:var(--text-3); display:inline-block; }
.data-dot.live { background:#16a34a; } .data-dot.snapshot { background:var(--st-open-fill); }
.me-links { display:grid; margin-top:14px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.me-link { display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:60px; text-decoration:none; color:var(--text); text-align:left; border-bottom:1px solid var(--border); width:100%; }
.me-link:last-child { border-bottom:0; }
.me-link:hover { background:var(--surface-2); }
.me-link > span { flex:1; display:grid; font-weight:650; }
.me-link small { font-weight:500; font-size:12.5px; color:var(--text-2); }
.me-link > .ic:first-child { color:var(--brand-600); }
.me-link > .ic:last-child { color:var(--text-3); }
.disclaimer { font-size:12px; line-height:17px; color:var(--text-3); margin:18px 2px 4px; text-align:center; }

/* ============================================================ modal */
.modal { padding:0; border:0; background:transparent; color:var(--text); max-width:none; max-height:none; width:100%; height:100%; margin:0; overflow:hidden; }
.modal::backdrop { background:var(--scrim); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:fadeIn var(--d-2); }
.modal[open] { display:flex; align-items:flex-end; }
.modal-card { width:100%; height:calc(100% - var(--safe-t) - 12px); margin-top:auto; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--sh-3); animation:sheetUp var(--d-3) var(--ease-out); overflow:hidden; }
.modal-sm .modal-card, .modal-filters .modal-card { height:auto; max-height:calc(100% - var(--safe-t) - 12px); }
.modal.closing .modal-card { animation:sheetDown .18s ease-in forwards; }
.modal.closing::backdrop { opacity:0; transition:opacity .18s; }
@keyframes sheetUp { from { transform:translateY(40px); opacity:.4; } to { transform:none; opacity:1; } }
@keyframes sheetDown { to { transform:translateY(40px); opacity:0; } }
@keyframes fadeIn { from { opacity:0; } }
.modal-head { flex:none; padding:10px 8px 6px 20px; border-bottom:1px solid var(--border); }
.progress { display:flex; gap:6px; padding:6px 12px 8px 0; }
.progress span { flex:1; height:4px; border-radius:2px; background:var(--border); transition:background var(--d-3); }
.progress span.on { background:var(--brand-600); }
.modal-titlebar { display:flex; align-items:center; gap:8px; }
.modal-titles { flex:1; min-width:0; padding:4px 0; }
.modal-titles h2 { font-size:20px; line-height:26px; font-weight:750; letter-spacing:-.01em; outline:none; }
.modal-titles .eyebrow:empty { display:none; }
.modal-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 20px 20px; display:grid; gap:14px; align-content:start; }
.modal-body form { display:grid; gap:14px; }
.modal-body [data-step] { display:grid; gap:14px; }
.modal-body [data-step][hidden] { display:none !important; }
.modal-foot { flex:none; display:flex; gap:8px; padding:12px 16px calc(12px + var(--safe-b)); border-top:1px solid var(--border); background:var(--surface); margin-bottom:var(--kb,0px); }
.modal-foot:empty { display:none; }
.modal-foot .btn { --h:48px; }
.modal-foot.wrap { flex-wrap:wrap; }
.modal-foot.wrap .btn-secondary { flex:1 1 40%; }
.modal-foot.wrap .btn-grow { flex-basis:100%; }
.modal-body.is-success { align-content:center; }
@media (min-width:900px) {
  .modal[open] { align-items:center; justify-content:center; padding:24px; }
  .modal-card { width:480px; height:auto; max-height:min(760px, calc(100vh - 48px)); margin:0; border-radius:var(--r-lg); animation:dlgIn var(--d-3) var(--ease-out); }
  .modal-filters .modal-card { width:420px; }
  .modal-sm .modal-card { width:440px; }
  .modal.closing .modal-card { animation:dlgOut .18s ease-in forwards; }
  .modal-foot { padding-bottom:12px; }
  @keyframes dlgIn { from { transform:scale(.96) translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
  @keyframes dlgOut { to { transform:scale(.97); opacity:0; } }
}
body.modal-open { overflow:hidden; }

/* forms */
.field { display:grid; gap:6px; }
.field > label { font-size:14px; font-weight:650; }
.req { color:var(--danger-text); }
.opt { font-weight:500; color:var(--text-3); font-size:12.5px; }
.field input, .field textarea, .field select, .jc-row input { width:100%; min-height:48px; padding:12px 14px; border:1.5px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); font-size:16px; line-height:22px; transition:border-color var(--d-2),box-shadow var(--d-2); -webkit-appearance:none; appearance:none; }
.field select { background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%); background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px; }
.field textarea { resize:vertical; min-height:88px; }
.field input:focus, .field textarea:focus, .field select:focus, .jc-row input:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent); }
.field.invalid input, .field.invalid textarea { border-color:var(--danger); }
.field .hint { font-size:12.5px; color:var(--text-3); line-height:16px; }
.field .err { font-size:13px; color:var(--danger-text); font-weight:600; display:flex; align-items:center; gap:5px; min-height:0; }
.field .err:empty { display:none; }
input[type=date], input[type=time] { min-height:48px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:520px) { .grid-2 { grid-template-columns:1fr; } }
.grid-3 .field > label { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid-3 .opt { display:none; }
.radio-cards { border:0; padding:0; margin:0; display:grid; gap:8px; }
.radio-cards legend, fieldset legend { font-size:14px; font-weight:650; margin-bottom:6px; padding:0; }
.rcard { position:relative; display:block; }
.rcard input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.rcard > span { display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 14px; border:1.5px solid var(--border-strong); border-radius:var(--r-sm); cursor:pointer; transition:all var(--d-2); }
.rcard > span b { font-weight:650; flex:1; }
.rcard > span small { color:var(--text-3); font-size:12.5px; }
.rcard > span .ic { color:var(--text-2); }
.rcard input:checked + span { border-color:var(--brand-600); background:var(--brand-50); box-shadow:inset 0 0 0 1px var(--brand-600); }
.rcard input:checked + span .ic { color:var(--brand-600); }
.rcard input:focus-visible + span { outline:2.5px solid var(--focus); outline-offset:2px; }
.quick-dates { display:flex; gap:6px; flex-wrap:wrap; margin-top:-6px; }
.target-mini { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--r-sm); background:var(--surface-sunk); }
.target-mini > .ic { color:var(--brand-600); }
.target-mini div { display:grid; min-width:0; }
.target-mini strong { font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.target-mini span { font-size:12.5px; color:var(--text-2); }
.calc { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--r-sm); background:var(--st-claimed-bg); color:var(--text); font-weight:650; font-size:14px; font-variant-numeric:tabular-nums; }
.calc .ic { color:var(--st-claimed); }
.picker { display:grid; gap:8px; }
.picker-l { font-weight:650; font-size:14px; }
.drop { position:relative; display:grid; place-items:center; aspect-ratio:4/3; max-height:300px; width:100%; border:2px dashed var(--border-strong); border-radius:var(--r-md); background:var(--surface-2); cursor:pointer; overflow:hidden; transition:border-color var(--d-2),background var(--d-2); }
.drop:hover { border-color:var(--brand-600); background:var(--brand-50); }
.drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop:focus-within { outline:2.5px solid var(--focus); outline-offset:2px; }
.drop-empty, .drop-busy { display:grid; justify-items:center; gap:6px; text-align:center; padding:12px; color:var(--text-2); pointer-events:none; }
.drop-empty .ic { color:var(--brand-600); }
.drop-empty b { color:var(--text); font-size:15px; }
.drop-empty small, .drop-busy small { font-size:12.5px; }
.drop-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.picker.has-img .drop { border-style:solid; border-color:var(--border); }
.picker.has-img .drop-empty { visibility:hidden; }
.picker-actions { display:flex; align-items:center; gap:6px; }
.picker-size { margin-left:auto; }
.before-disc .picker { margin-top:4px; }
.before-disc .drop { aspect-ratio:16/9; max-height:180px; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
#filters-form { gap:18px; }
.tog { display:flex; align-items:center; gap:10px; min-height:48px; padding:4px 0; border-bottom:1px solid var(--border); cursor:pointer; position:relative; }
.tog input { position:absolute; opacity:0; width:1px; height:1px; }
.tog-l { flex:1; display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px; }
.tog-ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--cat,var(--text-2)); background:color-mix(in srgb,var(--cat,var(--text-2)) 12%,var(--surface)); }
.tog-ic.st[data-status=open] { --cat:var(--st-open); } .tog-ic.st[data-status=claimed] { --cat:var(--st-claimed); } .tog-ic.st[data-status=completed] { --cat:var(--st-done); }
.tog-n { font-size:12.5px; color:var(--text-3); font-weight:650; font-variant-numeric:tabular-nums; }
.switch { width:44px; height:26px; border-radius:13px; background:var(--border-strong); position:relative; flex:none; transition:background var(--d-2); }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:transform var(--d-2) var(--ease-spring); }
.tog input:checked ~ .switch { background:var(--brand-600); }
.tog input:checked ~ .switch::after { transform:translateX(18px); }
.tog input:focus-visible ~ .switch { outline:2.5px solid var(--focus); outline-offset:2px; }
.success { display:grid; justify-items:center; text-align:center; gap:12px; padding:24px 8px 8px; }
.success.compact { padding:4px 0 0; grid-template-columns:auto 1fr; text-align:left; align-items:center; justify-items:start; }
.success.compact .success-check { width:40px; height:40px; }
.success-check { width:84px; height:84px; }
.success-check circle { fill:var(--brand-50); stroke:var(--st-c,var(--brand-600)); stroke-width:3; }
.success[data-tone=claimed] { --st-c:var(--st-claimed); }
.success[data-tone=claimed] .success-check circle { fill:var(--st-claimed-bg); }
.success[data-tone=completed] { --st-c:var(--st-done); }
.success[data-tone=completed] .success-check circle { fill:var(--st-done-bg); }
.success[data-tone=pending] { --st-c:var(--st-pending); }
.success[data-tone=pending] .success-check circle { fill:var(--st-pending-bg); }
.success-check path { fill:none; stroke:var(--st-c,var(--brand-600)); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:draw var(--d-4) var(--ease-out) .12s forwards; }
.success-check circle { transform-origin:center; animation:popCircle var(--d-4) var(--ease-spring); }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes popCircle { from { transform:scale(.6); opacity:0; } }
.success-text { font-size:19px; line-height:25px; font-weight:750; display:grid; gap:6px; max-width:32ch; }
.success-text small { font-size:14px; line-height:20px; color:var(--text-2); font-weight:500; }
.success.compact .success-text { font-size:16px; }
.conflict { display:grid; justify-items:center; text-align:center; gap:12px; padding:8px 0; }
.conflict > .ic { color:var(--st-claimed); }
.invite-link { display:flex; gap:8px; }
.invite-link input { flex:1; min-width:0; height:48px; padding:0 12px; border:1.5px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface-sunk); font-size:14px; color:var(--text-2); }
.invite-code-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:var(--r-sm); background:var(--surface-sunk); font-size:14px; color:var(--text-2); }
.invite-code-row .code { font-size:20px; }
.qr-wrap { display:grid; justify-items:center; gap:6px; padding:8px; }
.qr-wrap svg { border-radius:12px; background:#fff; padding:10px; box-shadow:var(--sh-1); }
.qr-wrap small { color:var(--text-3); font-size:12.5px; }
.join-hero { display:flex; gap:14px; align-items:center; }
.join-hero h3 { font-size:19px; font-weight:800; }
.join-hero .muted { font-size:13px; display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; }
.join-hero .muted > span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.contact-hint { margin-top:-8px; font-size:12.5px; color:var(--text-3); line-height:16px; }

/* ============================================================ map pieces */
.pin { background:none; border:0; }
.pin-inner { display:block; width:100%; height:100%; filter:drop-shadow(0 2px 3px rgb(0 0 0/.3)); transform-origin:50% 100%; transition:transform var(--d-2) var(--ease-spring); }
.pin:hover .pin-inner { transform:scale(1.08); }
.map.z-low .pin-segment:not(.is-selected) .pin-inner { transform:scale(.78); }
.map.z-city .pin-segment:not(.is-selected) .pin-inner { transform:scale(.6); }
.map.z-low .pin-segment:not(.is-selected):hover .pin-inner { transform:scale(.9); }
.pin.is-selected .pin-inner { transform:scale(1.25); filter:drop-shadow(0 0 0 transparent) drop-shadow(0 3px 5px rgb(0 0 0/.35)); }
.pin.is-selected::before { content:""; position:absolute; left:50%; bottom:-4px; width:22px; height:9px; margin-left:-11px; border-radius:50%; background:color-mix(in srgb,var(--st,var(--brand-600)) 35%,transparent); box-shadow:0 0 0 6px color-mix(in srgb,var(--st,var(--brand-600)) 18%,transparent); }
.pin.pop .pin-inner { animation:pinPop .45s var(--ease-spring); }
@keyframes pinPop { 0% { transform:scale(.4); } 60% { transform:scale(1.35); } 100% { transform:scale(1); } }
.pin:focus-visible { outline:none; }
.pin:focus-visible .pin-inner { outline:2.5px solid var(--focus); outline-offset:3px; border-radius:50%; }
.leaflet-interactive.ripple { animation:ripple .6s var(--ease-out) forwards; transform-origin:center; transform-box:fill-box; }
@keyframes ripple { from { opacity:1; } to { opacity:0; stroke-width:1; } }
.me-dot span { display:block; width:18px; height:18px; border-radius:50%; background:#2563eb; border:3px solid #fff; box-shadow:0 1px 4px rgb(0 0 0/.35); position:relative; }
.me-dot span::after { content:""; position:absolute; inset:-9px; border-radius:50%; background:rgb(37 99 235/.28); animation:mePulse 2s ease-out infinite; z-index:-1; }
@keyframes mePulse { from { transform:scale(.5); opacity:1; } to { transform:scale(1.6); opacity:0; } }
.map.picking, .map.picking .leaflet-interactive { cursor:crosshair; }
.leaflet-tooltip.map-tip { background:var(--n-900); color:#fff; border:0; border-radius:10px; padding:7px 10px; box-shadow:var(--sh-2); font-family:var(--font); font-size:12.5px; line-height:17px; display:grid; max-width:240px; white-space:normal; }
.leaflet-tooltip.map-tip strong { font-size:13px; }
.leaflet-tooltip.map-tip span { color:#cbd5e1; }
.leaflet-tooltip-top.map-tip::before { border-top-color:var(--n-900); }
.leaflet-control-attribution { font-size:10px !important; background:color-mix(in srgb,var(--surface) 80%,transparent) !important; color:var(--text-2) !important; border-radius:6px 0 0 0; }
.leaflet-control-attribution a { color:var(--text-2) !important; }
@media (max-width:899px) { .leaflet-bottom.leaflet-right { bottom:calc(var(--tabbar-h) + var(--sheet-visible)); transition:bottom var(--d-3); } .leaflet-control-attribution { max-width:70vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
.leaflet-bar { border:0 !important; box-shadow:var(--sh-float) !important; border-radius:12px !important; overflow:hidden; }
.leaflet-bar a { width:40px !important; height:40px !important; line-height:38px !important; background:var(--surface) !important; color:var(--text) !important; border-color:var(--border) !important; font-size:20px !important; }
.leaflet-bar a:hover { background:var(--surface-sunk) !important; }
.leaflet-control-zoom { margin:0 16px 16px 0 !important; }
:root[data-resolved-theme=dark] .tiles-base { filter:none; }
.map-fallback { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; padding:24px 24px 50vh; color:var(--text-2); background:repeating-linear-gradient(45deg,var(--surface-sunk) 0 12px,var(--bg) 12px 24px); }
.map-fallback h3 { color:var(--text); font-size:17px; }
.map-fallback p { max-width:34ch; font-size:14px; }
@media (min-width:900px) { .map-fallback { padding:24px; } }

/* ============================================================ admin shell (layout only; rest in css/admin.css) */
.admin-root { position:fixed; z-index:35; inset:0 0 var(--tabbar-h) 0; background:var(--bg); overflow:hidden; display:flex; flex-direction:column; }
.admin-loading { flex:1; display:grid; place-items:center; }
body.admin-mode .toolbar, body.admin-mode .panel, body.admin-mode .map-ui { display:none !important; }
body.pick-mode .admin-root { display:none; }
@media (min-width:900px) {
  body.admin-mode .app { --panel-w:min(64vw, 920px); --panel-top:var(--gap); --panel-x:0px; }
  body.admin-mode .panel-toggle { display:none; }
  .admin-root { position:fixed; z-index:30; left:var(--gap); top:calc(var(--panel-top) + var(--tabs-h)); bottom:var(--gap); right:auto; width:var(--panel-w); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--sh-3); }
  body.pick-mode .admin-root { display:flex; }
}

/* ============================================================ reduced motion & print */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
  .sk { animation:none; }
  .me-dot span::after { animation:none; opacity:.4; }
  .success-check path { stroke-dashoffset:0; }
}
@media (forced-colors: active) { .pill, .badge-sample, .chip { border:1px solid CanvasText; } }