/* ============================================================================
   Trash Finder — design system v2
   Quiet, trustworthy, modern travel utility. Japanese without cliché.
   Everything below is tokenised; components never hard-code a colour.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- neutral ramp: warm paper + sumi ink (BRAND.md, decision 4).
         The canvas is paper so that the map's white reads as the subject. --- */
  --ink:        #14181D;   /* text */
  --ink-2:      #39424D;
  --ink-3:      #6B7684;
  --ink-4:      #98A2AE;
  --navy:       #1B2430;   /* primary button, as on the board */
  --on-navy:    #FFFFFF;
  --canvas:     #F4F5F7;   /* cool light grey ground */
  --surface:    #FFFFFF;
  --surface-2:  #F8F9FB;
  --surface-3:  #EFF1F4;
  --line:       #E6E8EC;
  --line-2:     #D6DAE1;
  --on-ink:     #FFFFFF;
  --pine:       #0E3A2E;   /* editorial surfaces only */
  --pine-2:     #16513E;

  /* --- semantic --- */
  /* --- semantic only. Green never decorates: it means "you may use this". --- */
  --trust:      #2FA75B;
  --trust-700:  #218044;
  --trust-100:  #E3F5EA;
  --trust-50:   #F1FAF4;
  --info:       #3B7BC8;   --info-100: #E6F0FB;
  --violet:     #7A6BC4;   --violet-100: #EDEAF8;
  --amber:      #D08340;   --amber-100: #FBEFE3;
  --danger:     #A8453C;   --danger-100: #F6E7E4;
  --geo:        #2F80ED;

  /* --- waste categories (colour-coded, per the concept board) --- */
  --w-general:   #2FA75B;  --w-general-bg:   #E3F5EA;   /* green  — general */
  --w-cup:       #6B7684;  --w-cup-bg:       #EDEFF3;   /* grey   — plastic cup */
  --w-pet:       #3B7BC8;  --w-pet-bg:       #E6F0FB;   /* blue   — PET bottle */
  --w-can:       #D4A017;  --w-can-bg:       #FBF3D9;   /* yellow — cans */
  --w-glass:     #7A6BC4;  --w-glass-bg:     #EDEAF8;   /* violet — glass */
  --w-food:      #9A6B3F;  --w-food-bg:      #F3EBE2;   /* brown  — food */
  --w-other:     #4E8FA8;  --w-other-bg:     #E6F1F5;   /* teal   — other */

  /* --- categories (board §6): green trash, indigo toilet, cyan water, amber smoking --- */
  --cat-trash:   #2FA75B;
  --cat-toilet:  #3B6FC8;
  --cat-water:   #2E9BB5;
  --cat-smoking: #C98A2E;

  /* --- pins --- */
  --pin-verified:   #2FA75B;
  --pin-likely:     #8A94A2;
  --pin-unverified: #B9C1CB;
  --pin-customers:  #6155A6;
  --pin-restricted: #B2762C;

  /* --- elevation: tinted with the ink hue, never pure black --- */
  --e1: 0 1px 2px rgba(20,24,29,.05), 0 2px 8px rgba(20,24,29,.04);
  --e2: 0 2px 6px rgba(20,24,29,.06), 0 8px 24px rgba(20,24,29,.07);
  --e3: 0 4px 12px rgba(20,24,29,.08), 0 16px 40px rgba(20,24,29,.10);
  --e-sheet: 0 -2px 10px rgba(20,24,29,.05), 0 -18px 50px rgba(20,24,29,.10);

  /* --- shape --- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px;

  /* --- motion --- */
  --spring: cubic-bezier(.32,.72,0,1);
  --ease:   cubic-bezier(.4,0,.2,1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* the toggle wins in both directions; system preference is the default */
:root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E9ECF1; --ink-2: #B6BEC9; --ink-3: #8D97A4; --ink-4: #6D7784;
    --canvas: #0B0E12; --surface: #151A21; --surface-2: #1B212A; --surface-3: #232B35;
    --line: #252D37; --line-2: #323B47; --on-ink: #14181D;
  --navy: #E9ECF1; --on-navy: #14181D;
  --cat-trash: #46C078; --cat-toilet: #6D9BE0; --cat-water: #5BBBD1; --cat-smoking: #DCA95A;
  --pin-customers: #A296D6; --pin-restricted: #D08340;
    --navy: #E9ECF1; --on-navy: #14181D;
  --cat-trash: #46C078; --cat-toilet: #6D9BE0; --cat-water: #5BBBD1; --cat-smoking: #DCA95A;
    --cat-trash: #46C078; --cat-toilet: #6D9BE0; --cat-water: #5BBBD1; --cat-smoking: #DCA95A;
    --pin-customers: #A296D6; --pin-restricted: #D08340;
    --pine: #0E3A2E; --pine-2: #16513E;
    --trust: #46C078; --trust-700: #6FD69B; --trust-100: #15311F; --trust-50: #102419;
    --info: #7FA8CC; --info-100: #17222B;
    --violet: #A296D6; --violet-100: #201D2B;
    --amber: #D08B60; --amber-100: #2A1E17;
    --danger: #E2796E; --danger-100: #2C1715;
    --w-general: #47BE79; --w-general-bg: #16321F;
    --w-cup: #9AA4B2; --w-cup-bg: #212731;
    --w-pet: #6FA5DE; --w-pet-bg: #15212E;
    --w-can: #DCB43E; --w-can-bg: #2A2314;
    --w-glass: #A296D6; --w-glass-bg: #201D2B;
    --w-food: #C49468; --w-food-bg: #271F17;
    --w-other: #7FA9B4; --w-other-bg: #172529;
    --pin-verified: #47BE79; --pin-likely: #6C7C83; --pin-unverified: #45545A;
    --e1: 0 1px 2px rgba(0,0,0,.4);
    --e2: 0 2px 6px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
    --e3: 0 4px 12px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
    --e-sheet: 0 -2px 10px rgba(0,0,0,.3), 0 -18px 50px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --ink: #E9ECF1; --ink-2: #B6BEC9; --ink-3: #8D97A4; --ink-4: #6D7784;
  --canvas: #0B0E12; --surface: #151A21; --surface-2: #1B212A; --surface-3: #232B35;
  --line: #252D37; --line-2: #323B47; --on-ink: #14181D;
  --navy: #E9ECF1; --on-navy: #14181D;
  --cat-trash: #46C078; --cat-toilet: #6D9BE0; --cat-water: #5BBBD1; --cat-smoking: #DCA95A;
  --pin-customers: #A296D6; --pin-restricted: #D08340;
  --pine: #0E3A2E; --pine-2: #16513E;
  --trust: #46C078; --trust-700: #6FD69B; --trust-100: #15311F; --trust-50: #102419;
  --info: #7FA8CC; --info-100: #17222B;
  --violet: #A296D6; --violet-100: #201D2B;
  --amber: #D08B60; --amber-100: #2A1E17;
  --danger: #E2796E; --danger-100: #2C1715;
  --w-general: #47BE79; --w-general-bg: #16321F;
  --w-cup: #9AA4B2; --w-cup-bg: #212731;
  --w-pet: #6FA5DE; --w-pet-bg: #15212E;
  --w-can: #DCB43E; --w-can-bg: #2A2314;
  --w-glass: #A296D6; --w-glass-bg: #201D2B;
  --w-food: #C49468; --w-food-bg: #271F17;
  --w-other: #7FA9B4; --w-other-bg: #172529;
  --pin-verified: #47BE79; --pin-likely: #6C7C83; --pin-unverified: #45545A;
  --e1: 0 1px 2px rgba(0,0,0,.4);
  --e2: 0 2px 6px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --e3: 0 4px 12px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
  --e-sheet: 0 -2px 10px rgba(0,0,0,.3), 0 -18px 50px rgba(0,0,0,.45);
}

/* ============================ base ============================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* The browser's own [hidden] rule lives in the UA stylesheet, and ANY author
   rule beats it — so `.walkbar { display:flex }` silently defeated
   `walkbar.hidden = true` and left the walk bar pinned over the first-run card
   forever. Ten of the eighteen elements we toggle had the same defect. One
   declaration fixes the class of bug instead of the instances. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", sans-serif;
  font-size: 15px; line-height: 1.47; color: var(--ink); background: var(--canvas);
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--geo); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.i  { width: 20px; height: 20px; stroke-width: 1.8; flex: none; }
.i-sm { width: 16px; height: 16px; stroke-width: 2; flex: none; }
.i-lg { width: 24px; height: 24px; stroke-width: 1.7; flex: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ============================ map ============================ */
#map { position: fixed; inset: 0; background: var(--canvas); }
.maplibregl-ctrl-attrib {
  font: 400 10px/14px Inter, sans-serif !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  color: var(--ink-4) !important; border-radius: var(--r-xs) 0 0 0 !important;
}
.maplibregl-ctrl-attrib a { color: var(--ink-3) !important; }
.maplibregl-ctrl-bottom-right { z-index: 1; }

/* ============================ top chrome ============================ */
.top {
  position: fixed; top: calc(10px + var(--safe-t)); left: 0; right: 0; z-index: 20;
  pointer-events: none;
}
.top > * { pointer-events: auto; }

.searchbar {
  display: flex; align-items: center; gap: 8px; margin: 0 14px;
  height: 52px; padding: 0 6px 0 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--r-pill); box-shadow: var(--e2);
}
.searchbar input {
  flex: 1; min-width: 0; align-self: stretch; border: 0; outline: 0; background: none;
  font-size: 16px; font-weight: 450; color: var(--ink);   /* 16px: stops iOS zooming */
}
.searchbar input::placeholder { color: var(--ink-4); font-weight: 450; }
.searchbar .lead { color: var(--ink-3); }
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--ink-2); flex: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn[data-on="true"] { background: var(--ink); color: var(--on-ink); }
.icon-btn .code { font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .04em; }
.icon-btn.wide { width: auto; min-width: 60px; height: 44px; padding: 0 12px; gap: 5px;
                 display: flex; align-items: center; justify-content: center; }
.icon-btn.wide .i-sm { color: var(--ink-4); }

/* Decision 9: categories are a switch, never parallel tabs, and never mixed
   on one map. Colour carries the category: green / indigo / cyan / amber. */
.cats { display: flex; gap: 7px; overflow-x: auto; padding: 10px 14px 0; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: none; display: flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: -.008em;
  box-shadow: var(--e1);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.cat .i-sm { color: var(--cat, var(--trust)); }
.cat[aria-selected="true"] {
  background: var(--cat, var(--trust)); color: #fff; border-color: var(--cat, var(--trust));
}
.cat[aria-selected="true"] .i-sm { color: #fff; }
.cat b { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .6; font-size: 12px; }
.cat[aria-selected="true"] b { opacity: .8; }

.chips {
  display: flex; gap: 7px; overflow-x: auto; padding: 10px 14px 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 15px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--ink-2); font-size: 13px; font-weight: 550; letter-spacing: -.005em;
  box-shadow: var(--e1);
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--spring);
}
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] {
  background: var(--navy); color: var(--on-navy); border-color: var(--navy);
}
.chip .i-sm { opacity: .75; }

/* ============================ floating controls ============================ */
.controls {
  position: fixed; right: 14px; bottom: calc(22px + var(--safe-b)); z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  transition: bottom .42s var(--spring), opacity .22s var(--ease);
}
.controls[data-hidden="true"] { opacity: 0; pointer-events: none; }
.ctrl {
  width: 46px; height: 46px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: var(--e2); color: var(--ink); display: grid; place-items: center;
  transition: transform .2s var(--spring), background .18s var(--ease), color .18s var(--ease);
}
.ctrl:active { transform: scale(.92); }
.ctrl[data-on="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* the permission ask, as a line under a live map -- never a wall (decision 15) */
.askbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(70px + var(--safe-b));
  z-index: 33; display: flex; align-items: center; gap: 12px;
  padding: 13px 13px 13px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e3);
}
.askbar-body { min-width: 0; flex: 1; }
.askbar-body b { display: block; font-size: 14.5px; font-weight: 640; letter-spacing: -.01em; }
.askbar-body span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.ask-go {
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); flex: none;
  background: var(--navy); color: var(--on-navy); font-size: 14px; font-weight: 620;
  display: flex; align-items: center; gap: 7px;
}
.ask-x { width: 44px; height: 44px; flex: none; color: var(--ink-4); display: grid; place-items: center; }
.note.toilet { margin-top: 10px; background: var(--info-100); border-color: color-mix(in srgb, var(--info) 24%, transparent); color: var(--info); }
.note.toilet .i-sm { color: var(--info); }
.check.shut, .check.shut .i-sm { color: var(--danger); }
.list-count em { font-style: normal; color: var(--trust); font-weight: 700; }

/* ============================ add a spot ============================ */
.placer { position: fixed; inset: 0; z-index: 34; pointer-events: none; }
.crosshair {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px;
  transform: translate(-50%, -50%);
}
.crosshair span {
  position: absolute; background: var(--navy); opacity: .8;
}
.crosshair span:first-child { left: 50%; top: 0; width: 2px; height: 60px; margin-left: -1px; }
.crosshair span:nth-child(2) { top: 50%; left: 0; height: 2px; width: 60px; margin-top: -1px; }
.crosshair b {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%;
  border: 3px solid var(--navy); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.place-bar {
  position: absolute; left: 12px; right: 12px; bottom: calc(70px + var(--safe-b));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e3); padding: 16px; pointer-events: auto;
}
.place-bar p { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.place-acts { display: flex; gap: 9px; align-items: center; }
.place-acts .ghost { flex: 0 0 auto; width: auto; padding: 0 18px; margin: 0; }
.place-acts .cta { flex: 1; height: 48px; }

/* ============================ walk mode (board §4) ============================
   Decision 8: walking 220 m does not need turn-by-turn. A direction, a distance
   and a landmark are enough -- and they keep the person inside the product, so
   the verification loop can actually close. */
.walkbar {
  position: fixed; left: 12px; right: 12px; z-index: 36;
  bottom: calc(70px + var(--safe-b));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px; border-radius: var(--r-lg);
  background: var(--navy); color: var(--on-navy); box-shadow: var(--e3);
}
.walk-x {
  position: absolute; top: -14px; right: -8px; width: 44px; height: 44px;
  border-radius: 50%; color: var(--ink-3);
  display: grid; place-items: center;
}
.walk-x::before {
  content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--e2); z-index: -1;
}
.walk-arrow {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--on-navy) 16%, transparent);
  display: grid; place-items: center; transition: transform .5s var(--spring);
}
.walk-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.walk-body b { font-size: 19px; font-weight: 660; letter-spacing: -.02em; }
.walk-body span {
  font-size: 12px; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.walk-mark { font-weight: 600; opacity: .95 !important; }
.walk-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.walk-go {
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--on-navy); color: var(--navy); font-size: 14px; font-weight: 640;
}
.walk-alt {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--on-navy) 16%, transparent); color: var(--on-navy);
}

/* ============================ bottom tab bar ============================ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; align-items: stretch;
  padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1; min-height: 58px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  color: var(--ink-4); font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  transition: color .16s var(--ease);
}
.tab .i { width: 22px; height: 22px; stroke-width: 1.9; }
.tab[data-on="true"] { color: var(--trust); }
@media (min-width: 920px) { .tabbar { display: none; } }

/* ============================ bottom sheet ============================ */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: 88vh; max-height: 88dvh;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--e-sheet);
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .46s var(--spring);
  touch-action: none;
}
.sheet[data-state="peek"]     { transform: translateY(calc(88vh - 172px)); }
.sheet[data-state="half"]     { transform: translateY(calc(88vh - 52vh)); }
.sheet[data-state="full"]     { transform: translateY(0); }
.sheet.dragging { transition: none; }
.grab { padding: 9px 0 4px; display: grid; place-items: center; flex: none; cursor: grab; }
.grab span {
  width: 38px; height: 4px; border-radius: 2px; background: var(--line-2);
  transition: width .2s var(--ease);
}
.sheet[data-state="full"] .grab span { width: 26px; }
.sheet-body {
  overflow-y: auto; overscroll-behavior: contain; flex: 1;
  padding: 2px 18px calc(96px + var(--safe-b)); touch-action: pan-y;
}
.sheet-body::-webkit-scrollbar { width: 0; }

/* ============================ photos ============================ */
/* A photo is evidence with a date on it, so the date is never optional. */
.shots {
  position: relative; display: grid; gap: 6px; margin: 4px 0 18px;
  grid-template-columns: repeat(3, 1fr);
}
.shot { margin: 0; position: relative; border-radius: var(--r-sm); overflow: hidden;
        background: var(--surface-3); aspect-ratio: 1; }
.shot.hero { grid-column: span 3; aspect-ratio: 16 / 10; border-radius: var(--r-md); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot figcaption {
  position: absolute; left: 8px; bottom: 8px;
  background: color-mix(in srgb, var(--ink) 74%, transparent); color: #fff;
  font: 600 10.5px/1 Inter, sans-serif; padding: 4px 7px; border-radius: 5px;
  backdrop-filter: blur(6px);
}
.shot:not(.hero) figcaption { display: none; }
.shot-empty {
  width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
  margin: 4px 0 18px; padding: 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px dashed var(--line-2);
  color: var(--ink-3); font-size: 13px; line-height: 1.45;
}
.shot-empty .i { color: var(--ink-4); flex: none; }
.shot-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 55%, transparent); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(8px);
}
.shot-walk {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink);
  border-radius: var(--r-pill); padding: 6px 12px; backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 640; box-shadow: var(--e1);
}

/* ============================ notes ============================ */
.cnt { color: var(--ink-4); font-weight: 600; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tagpill {
  font-size: 12px; font-weight: 560; padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2);
}
.tagpill b { color: var(--ink-4); font-weight: 700; margin-left: 3px; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { padding: 11px 0; border-top: 1px solid var(--line); }
.notes li:first-child { border-top: 0; }
.note-text { display: block; font-size: 14px; color: var(--ink); }
.note-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-4); margin-top: 5px; }
.note-lang {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 5px;
  border-radius: 4px; background: var(--surface-3); color: var(--ink-3);
}
.note-tr { color: var(--info); font-weight: 620; text-decoration: none; }
.note-tr:hover { text-decoration: underline; }
.note-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tagpill.xs { font-size: 10.5px; padding: 3px 8px; }
.note-sep {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4); padding: 14px 0 6px; border-top: 1px solid var(--line);
}
.notes-none { margin: 0; font-size: 13.5px; color: var(--ink-4); }
.contrib-row { display: flex; gap: 9px; margin-top: 16px; }
.cta-2 {
  height: 48px; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-2);
  font-size: 14.5px; font-weight: 580;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .16s var(--ease), transform .16s var(--spring);
}
.cta-2:active { transform: scale(.98); }
.cta-2:hover { background: var(--surface-3); }
.contrib-row .cta-2 { flex: 1; margin-top: 0; }

/* ============================ contribution card ============================ */
.mini-q {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px;
}
.mini-btns { display: flex; gap: 6px; margin-left: auto; }
.mini {
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 580;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
}
.mini[data-on="true"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }

.photo-drop {
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
  padding: 22px 18px; border-radius: var(--r-md);
  background: var(--trust-50); border: 1px dashed color-mix(in srgb, var(--trust) 40%, transparent);
  cursor: pointer; transition: background .16s var(--ease);
}
.photo-drop:hover { background: var(--trust-100); }
.photo-cta { display: flex; align-items: center; gap: 10px; color: var(--trust); }
.photo-cta b { font-size: 15.5px; font-weight: 640; }
.photo-rules { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); max-width: 40ch; }
.photo-preview { position: relative; border-radius: var(--r-md); overflow: hidden; }
.photo-preview img { width: 100%; display: block; max-height: 240px; object-fit: cover; }
.photo-undo {
  position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--ink) 80%, transparent); color: #fff;
  padding: 8px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 560;
  backdrop-filter: blur(6px);
}
.tagpick { display: flex; flex-wrap: wrap; gap: 7px; }
.tagbtn {
  min-height: 44px; padding: 0 15px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 550;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.tagbtn[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
#note-text {
  width: 100%; margin-top: 14px; padding: 13px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-family: inherit; font-size: 16px; line-height: 1.5; font-weight: 400;
  resize: none; outline: 0;
}
#note-text:focus { border-color: var(--line-2); background: var(--surface); }

/* ============================ detail card ============================ */
.landmark {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px;
  padding: 8px 13px 8px 11px; border-radius: var(--r-pill);
  background: var(--trust-100); color: var(--trust-700);
  font-size: 13.5px; font-weight: 620;
}
.landmark .i-sm { color: var(--trust); }
.detail-head { display: flex; align-items: flex-start; gap: 16px; padding-top: 6px; }
.why-maps {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}
.why-maps .i-sm { color: var(--info); margin-top: 1px; flex: none; }
.report-row {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 13px; border-radius: var(--r-md);
  color: var(--ink-3); font-size: 13.5px; font-weight: 550;
  background: var(--surface-2); border: 1px solid var(--line);
}
.report-row:hover { background: var(--surface-3); }
.report-row .i-sm { color: var(--amber); }
.detail-title {
  font-size: 21px; line-height: 1.22; font-weight: 680; letter-spacing: -.021em;
  margin: 0; text-wrap: balance;
}
.detail-sub { margin-top: 6px; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.walk {
  flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end;
}
.walk b { font-size: 30px; line-height: 1; font-weight: 640; letter-spacing: -.035em; }
.walk span { font-size: 11px; font-weight: 600; letter-spacing: .07em;
             text-transform: uppercase; color: var(--ink-4); margin-top: 5px; }

.rule {
  margin-top: 16px; display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--trust-50); border: 1px solid color-mix(in srgb, var(--trust) 18%, transparent);
}
.rule .i { color: var(--trust); margin-top: 1px; }
.rule-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--trust); display: block;
}
.rule-text { font-size: 14px; color: var(--ink-2); margin-top: 3px; display: block; }
.rule[data-kind="customers_only"] { background: var(--violet-100); border-color: color-mix(in srgb, var(--violet) 22%, transparent); }
.rule[data-kind="customers_only"] .i, .rule[data-kind="customers_only"] .rule-label { color: var(--violet); }
.rule[data-kind="beverage_only"] { background: var(--info-100); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.rule[data-kind="beverage_only"] .i, .rule[data-kind="beverage_only"] .rule-label { color: var(--info); }
.rule[data-kind="ticketed_area"] { background: var(--amber-100); border-color: color-mix(in srgb, var(--amber) 22%, transparent); }
.rule[data-kind="ticketed_area"] .i, .rule[data-kind="ticketed_area"] .rule-label { color: var(--amber); }
.rule[data-kind="fee"] { background: var(--amber-100); border-color: color-mix(in srgb, var(--amber) 22%, transparent); }
.rule[data-kind="fee"] .i, .rule[data-kind="fee"] .rule-label { color: var(--amber); }
.rule[data-kind="unknown"] { background: var(--surface-2); border-color: var(--line); }
.rule[data-kind="unknown"] .i, .rule[data-kind="unknown"] .rule-label { color: var(--ink-3); }

/* confidence meter */
.trustrow {
  margin-top: 26px; padding: 13px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.trustrow-top { display: flex; align-items: center; gap: 8px; }
.trustrow[data-c="verified"] .trustrow-top .i-sm,
.trustrow[data-c="official"] .trustrow-top .i-sm { color: var(--trust); }
.trustrow-top .i-sm { color: var(--ink-3); }
.trustrow-name { font-size: 13px; font-weight: 620; letter-spacing: -.005em; }
.meter { display: flex; gap: 3px; margin: 10px 0 9px; }
.meter i {
  height: 4px; flex: 1; border-radius: 2px; background: var(--line-2);
  transition: background .3s var(--ease);
}
.meter i.on { background: var(--trust); }
.meter[data-level="1"] i.on { background: var(--ink-4); }
.meter[data-level="2"] i.on { background: var(--info); }
.rate {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 12px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.rate b { font-size: 21px; font-weight: 680; letter-spacing: -.03em; color: var(--ink-3); }
.rate[data-good="true"] b { color: var(--trust); }
.rate span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.progress-row {
  padding: 14px; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--line); margin: 6px 0;
}
.progress-row span { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.progress-row .sub { display: block; font-size: 12px; color: var(--ink-4); font-weight: 500; margin-top: 2px; }
.progress-row .i-sm { color: var(--trust); }
.facts { display: flex; flex-direction: column; gap: 5px; }
.checks { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); }
.check .i-sm { color: var(--trust); flex: none; }
.check.dim, .check.dim .i-sm { color: var(--ink-4); }
.accessline { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.apill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--trust-100); color: var(--trust-700);
}
.apill[data-a="customers_only"] { background: var(--violet-100); color: var(--violet); }
.apill[data-a="beverage_only"] { background: var(--info-100); color: var(--info); }
.apill[data-a="ticketed_area"] { background: var(--amber-100); color: var(--amber); }
.apill[data-a="fee"] { background: var(--amber-100); color: var(--amber); }
.apill[data-a="unknown"] { background: var(--surface-3); color: var(--ink-3); }
.awhy {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-4); background: var(--surface-2); border: 1px solid var(--line);
}
.fact { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.fact .i-sm { color: var(--ink-4); }
.fact.dim, .fact.dim .i-sm { color: var(--ink-4); }

.label {
  font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
  color: var(--ink-4); margin: 24px 0 10px;
}

/* layer 2 — what you must NOT put here */
.rejects { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.reject {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 8px; border-radius: var(--r-pill);
  background: var(--danger-100); color: var(--danger);
  font-size: 12.5px; font-weight: 560;
}
.reject .i-sm { width: 14px; height: 14px; }
.reject-note {
  flex-basis: 100%; font-size: 12px; color: var(--ink-4); margin-top: 4px; line-height: 1.45;
}

/* layer 2 — the record */
.facts-table {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.facts-table dt {
  padding: 11px 14px; background: var(--surface-2); font-size: 12.5px; font-weight: 560;
  color: var(--ink-3); white-space: nowrap; border-bottom: 1px solid var(--line);
}
.facts-table dd {
  margin: 0; padding: 11px 14px; font-size: 13.5px; font-weight: 500;
  border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
}
.facts-table dd.dim { color: var(--ink-4); }
.facts-table dt:nth-last-of-type(1), .facts-table dd:nth-last-of-type(1) { border-bottom: 0; }

/* layer 3 — when it is not there */
.fallback {
  margin-top: 26px; padding: 16px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.fallback-head {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 660;
  color: var(--ink-2); margin-bottom: 12px;
}
.fallback-head .i-sm { color: var(--ink-3); }
.alt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--line); transition: transform .16s var(--spring);
}
.alt:active { transform: scale(.985); }
.alt-body { min-width: 0; flex: 1; }
.alt-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--trust);
}
.alt-name {
  display: block; font-size: 14px; font-weight: 560; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alt-time { font-size: 14px; font-weight: 640; color: var(--ink-2); }
.fallback-none { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.fallback-tip {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}

/* why this rating */
.trustrow-why {
  margin-left: auto; font-size: 11px; font-weight: 640; color: var(--ink-4);
  letter-spacing: .02em;
}
.evlabel { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); margin: 12px 0 7px; }
.evrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.evchip { font-size: 11.5px; font-weight: 560; padding: 5px 10px; border-radius: 7px;
  background: var(--trust-100); color: var(--trust-700); }
.evchip[data-neg="1"] { background: var(--surface-3); color: var(--ink-3); }
.why.doubt { color: var(--amber); }
.cluster-note { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
  padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface-3);
  color: var(--ink-2); font-size: 12px; font-weight: 620; }
.cluster-note .i-sm { color: var(--ink-4); }
.why { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.items { display: flex; gap: 7px; flex-wrap: wrap; }
.item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 76px; padding: 13px 6px 11px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 560; color: var(--ink-3); text-align: center;
  line-height: 1.3;
}
.item .badge-ico {
  width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--w-general-bg); color: var(--w-general);
}
.item[data-w="drink_cup"] .badge-ico { background: var(--w-cup-bg); color: var(--w-cup); }
.item[data-w="pet_bottle"] .badge-ico { background: var(--w-pet-bg); color: var(--w-pet); }
.item[data-w="can"] .badge-ico { background: var(--w-can-bg); color: var(--w-can); }
.item[data-w="glass"] .badge-ico { background: var(--w-glass-bg); color: var(--w-glass); }
.item[data-w="food"] .badge-ico { background: var(--w-food-bg); color: var(--w-food); }
.item[data-w="other"] .badge-ico { background: var(--w-other-bg); color: var(--w-other); }

/* stays reachable however far the record scrolls — two taps to navigation */
.actions {
  margin-top: 26px; display: flex; gap: 9px;
  position: sticky; bottom: calc(70px + var(--safe-b)); z-index: 2;
  padding: 10px 0; background: linear-gradient(to bottom,
    color-mix(in srgb, var(--surface) 0%, transparent) 0%, var(--surface) 24%);
}
.cta {
  flex: 1; height: 54px; border-radius: var(--r-md); background: var(--navy); color: var(--on-navy);
  font-size: 16px; font-weight: 620; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: var(--e2); transition: transform .18s var(--spring), opacity .18s var(--ease);
}
.cta:active { transform: scale(.975); }
.cta-icon {
  width: 54px; height: 54px; flex: none; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  display: grid; place-items: center;
  transition: transform .18s var(--spring), background .18s var(--ease);
}
.cta-icon:active { transform: scale(.94); }
.source {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-4); display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.source a { color: var(--ink-3); text-underline-offset: 2px; }

/* ============================ list ============================ */
.list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 10px 0 2px;
}
.list-title { font-size: 17px; font-weight: 660; letter-spacing: -.018em; }
.list-count { font-size: 12px; font-weight: 550; color: var(--ink-4); }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 10px 13px 8px; border-radius: var(--r-sm);
  transition: background .14s var(--ease);
}
.row:hover { background: var(--surface-2); }
.row + .row { box-shadow: inset 0 1px 0 var(--line); }
.rowdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rowdot[data-c="unverified"] { box-shadow: inset 0 0 0 1.5px var(--pin-unverified); background: transparent !important; }
.rowbody { min-width: 0; flex: 1; }
.rowtop { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.rowname {
  font-size: 14.5px; font-weight: 570; letter-spacing: -.008em; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apill.sm { padding: 3px 8px; font-size: 10.5px; letter-spacing: .04em; border-radius: 6px; }
/* the position relative to the station, stated first -- ecbo's pattern */
.ptag {
  display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 8px;
  background: var(--navy); color: var(--on-navy);
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
.ptag.sm { padding: 3px 8px; font-size: 10.5px; border-radius: 6px; }
.rowfrom { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 3px; }
.rowmeta { font-size: 12px; color: var(--ink-4); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; background: var(--surface-3); color: var(--ink-3);
}
.tag[data-c="verified"], .tag[data-c="official"] { background: var(--trust-100); color: var(--trust); }
.tag[data-c="likely"] { background: var(--info-100); color: var(--info); }
.rowtime { font-size: 14px; font-weight: 620; color: var(--ink-2); white-space: nowrap; flex: none; }

.outlinks {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.outlinks a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 560;
}
.outlinks a:hover { background: var(--surface-3); }
.outlinks .i-sm { color: var(--ink-4); }

/* ============================ states ============================ */
.empty { padding: 26px 4px 10px; }
.empty-mark {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); margin-bottom: 16px;
}
.empty h2 { font-size: 19px; font-weight: 660; letter-spacing: -.02em; margin: 0 0 8px; }
.empty p { color: var(--ink-3); margin: 0; font-size: 14px; }
.note {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-3); font-size: 13px; display: flex; gap: 9px; align-items: flex-start;
}
.note .i-sm { color: var(--ink-4); margin-top: 1px; }

.skeleton { padding: 14px 0; }
.sk {
  height: 14px; border-radius: 5px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* ============================ markers ============================ */
.pin {
  /* never override .maplibregl-marker's positioning: it is what keeps the
     marker out of normal flow. Only the size is ours to set.
     No transition on transform here -- see the note above. */
  position: absolute; left: 0; top: 0;
  width: 32px; height: 31px;        /* must match the svg box exactly */
  cursor: pointer;
}
.pin[data-selected="true"] { z-index: 6; }
.pin svg { transition: transform .22s var(--spring); transform-origin: 50% 100%; }
.pin[data-selected="true"] svg { transform: scale(1.2); }
.pin svg { display: block; filter: drop-shadow(0 3px 6px rgba(20,24,29,.3)); }
.pin-dot {
  position: absolute; left: 0; top: 0;
  width: 13px; height: 13px; border-radius: 50%; cursor: pointer;
  background: var(--surface); border: 2.5px solid var(--pin-unverified);
  box-shadow: 0 1px 4px rgba(20,24,29,.25);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.pin-dot:hover {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pin-unverified) 28%, transparent);
}
/* a pin that carries a traveller's photo says so on the map */
.pin-cam {
  position: absolute; top: -3px; right: -5px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(20,24,29,.35);
}
.pin-cam svg { width: 10px; height: 10px; }
.rowshot {
  width: 46px; height: 46px; flex: none; border-radius: 10px;
  background: var(--surface-3) center/cover no-repeat;
}
.sheet-body.walking { padding-bottom: calc(170px + var(--safe-b)); }

.pill {
  position: absolute; top: 42px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: var(--on-navy); border-radius: var(--r-pill);
  padding: 3px 9px; white-space: nowrap;
  font: 620 11px/1.4 Inter, sans-serif; letter-spacing: -.01em;
  box-shadow: var(--e2);
}
.me { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.me::before {
  content: ""; position: absolute; width: 42px; height: 42px; border-radius: 50%;
  background: color-mix(in srgb, var(--geo) 18%, transparent);
  animation: halo 2.8s var(--ease) infinite;
}
.me::after {
  content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--geo);
  border: 2.5px solid var(--surface); box-shadow: 0 1px 5px rgba(11,17,20,.35); z-index: 1;
}
@keyframes halo { 0%,100% { transform: scale(.82); opacity: .85 } 50% { transform: scale(1.05); opacity: .5 } }
.cluster {
  /* same rule: shrink-wrap, or translate(-50%,-50%) uses the container width */
  position: absolute; left: 0; top: 0;
  display: inline-flex; width: max-content; flex-direction: column;
  align-items: center; gap: 4px; cursor: pointer;
}
.cluster b { transition: transform .18s var(--spring); }
.cluster:hover { z-index: 5; }
.cluster:hover b { transform: scale(1.1); }
.cluster b {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--surface); border: 1.5px solid var(--line-2); box-shadow: var(--e2);
  display: grid; place-items: center;
  font: 620 12px/1 Inter, sans-serif; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.cluster[data-v="1"] b { border-color: var(--cat, var(--trust)); color: var(--cat, var(--trust)); background: var(--surface); }
.cluster i {
  font: 600 10px/1.2 Inter, sans-serif; font-style: normal; color: var(--ink-2);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  opacity: 0; transition: opacity .2s var(--ease);
}
.cluster[data-named="1"] i { opacity: 1; }

/* country overview list */
.stat-strip { display: flex; gap: 9px; margin: 12px 0 6px; }
.stat {
  flex: 1; padding: 13px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.stat b { display: block; font-size: 22px; font-weight: 650; letter-spacing: -.03em;
          font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em;
             text-transform: uppercase; color: var(--ink-4); margin-top: 4px; }
.stat[data-tone="trust"] b { color: var(--cat-active, var(--trust)); }
.pref-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 10px 12px 6px; border-radius: var(--r-sm);
}
.pref-row:hover { background: var(--surface-2); }
.pref-row + .pref-row { box-shadow: inset 0 1px 0 var(--line); }
.pref-name { font-size: 14.5px; font-weight: 570; flex: 1; }
.pref-name span { color: var(--ink-4); font-weight: 500; margin-left: 6px; font-size: 12px; }
.pref-num { font-size: 13px; font-weight: 620; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.pref-num em { font-style: normal; color: var(--cat-active, var(--trust)); }
.pref-num[data-zero="1"] em { color: var(--ink-4); }

/* ============================ modals ============================ */
.scrim {
  position: fixed; inset: 0; z-index: 40; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(2px); transition: opacity .26s var(--ease);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; z-index: 50; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: min(480px, 100%); background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e3);
  padding: 26px 20px calc(24px + var(--safe-b));
  transition: transform .42s var(--spring); max-height: 92vh; overflow-y: auto;
}
.modal[data-open="true"] { transform: translate(-50%, 0); }
.modal h2 { font-size: 21px; font-weight: 680; letter-spacing: -.022em; margin: 0 0 8px; }
.modal p { color: var(--ink-3); margin: 0 0 20px; font-size: 14.5px; }
.modal-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 8px;
}
.choice { display: flex; gap: 10px; }
.choice button {
  flex: 1; min-height: 92px; border-radius: var(--r-md); font-size: 14.5px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 10px; text-align: center; border: 1px solid transparent;
  transition: transform .18s var(--spring);
}
.choice button:active { transform: scale(.97); }
.yes { background: var(--trust-50); color: var(--trust); border-color: color-mix(in srgb, var(--trust) 22%, transparent) !important; }
.no  { background: var(--danger-100); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent) !important; }
.stack { display: flex; flex-direction: column; gap: 4px; }
.stack button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 14px; border-radius: var(--r-md); font-size: 15px; font-weight: 560;
  transition: background .16s var(--ease);
}
.stack button:hover { background: var(--surface-2); }
.stack button[aria-current="true"] { background: var(--surface-2); }
.stack .i { color: var(--trust); }
/* This is a flex ROW, so the label (a bare text node = an anonymous flex item)
   competed for width with the .sub beside it and collapsed to one character per
   line -- "この端末の写真" rendered vertically. Let the row wrap and give .sub a
   line of its own, which is what it was always meant to have. */
.stack button > span, .stack a > span { flex: 1; min-width: 0; text-align: left;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack button > span > .sub, .stack a > span > .sub { flex: 1 0 100%; margin-left: 26px; }
.stack a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 14px; border-radius: var(--r-md); font-size: 15px; font-weight: 560;
  text-decoration: none; color: inherit; transition: background .16s var(--ease);
}
.stack a:hover { background: var(--surface-2); }
.stack a .i { color: var(--ink-4); }
.stack a .i-sm { color: var(--ink-3); }
#storage-row { width: 100%; align-items: flex-start; }
/* the explanation under the label wraps to three lines; keep the Clear button
   pinned to the first line instead of floating over the middle of the text */
#storage-clear { margin-top: 2px; flex: none; }
#storage-clear { cursor: pointer; }
#storage-clear:hover { background: var(--danger-100); color: var(--danger); }
.stack .sub { font-size: 12px; color: var(--ink-4); font-weight: 500; display: block; margin-top: 2px; }
.modal .cta { width: 100%; margin-top: 6px; }
.ghost {
  width: 100%; height: 48px; border-radius: var(--r-md); margin-top: 9px;
  color: var(--ink-3); font-size: 15px; font-weight: 560;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ghost:hover { background: var(--surface-2); }

.toast {
  position: fixed; left: 50%; bottom: calc(28px + var(--safe-b));
  transform: translate(-50%, 16px); z-index: 60;
  background: var(--ink); color: var(--on-ink); padding: 13px 18px;
  border-radius: var(--r-md); font-size: 14px; font-weight: 560;
  box-shadow: var(--e3); opacity: 0; pointer-events: none; max-width: 90vw;
  transition: opacity .22s var(--ease), transform .38s var(--spring);
  display: flex; align-items: center; gap: 9px;
}
.toast[data-open="true"] { opacity: 1; transform: translate(-50%, 0); }
.toast .i-sm { color: var(--trust); }

/* ============================ desktop ============================ */
@media (min-width: 920px) {
  .sheet-body { padding-bottom: 40px; }
  .actions { bottom: 4px; }
  .sheet {
    top: 0; bottom: 0; left: 0; right: auto; width: 412px; height: 100%; max-height: 100%;
    border-radius: 0; border-top: 0; border-right: 1px solid var(--line);
    box-shadow: var(--e3); transform: translateX(-100%);
  }
  .sheet[data-state="peek"], .sheet[data-state="half"], .sheet[data-state="full"] { transform: translateX(0); }
  .sheet-body { padding: 14px 26px 40px; }
  .grab { display: none; }
  .top { left: 412px; max-width: 560px; transition: left .4s var(--spring); }
  .top.wide { left: 0; }
  .controls { bottom: 28px; right: 22px; }
  .controls[data-hidden="true"] { opacity: 1; pointer-events: auto; }
  .modal {
    border-radius: var(--r-lg); bottom: auto; top: 50%;
    transform: translate(-50%, calc(-50% + 16px)); opacity: 0;
  }
  .modal[data-open="true"] { transform: translate(-50%, -50%); opacity: 1; }
}

/* On a phone the ask bar's three children cannot share one row: the button and
   the dismiss X are flex:none, so the text was crushed into a 92px column and
   read as if the button were sitting on top of it. Give the text its own row
   and let the button fill the next one. */
@media (max-width: 430px) {
  .askbar { flex-wrap: wrap; row-gap: 10px; }
  .askbar-body { flex: 1 0 100%; }
  .ask-go { flex: 1 1 auto; justify-content: center; }
}

/* A bottom sheet taller than the screen scrolls, but with no affordance that it
   does. In the verify flow the content ran to 953px inside a 747px box, so the
   "Done" button sat 130px below the fold and the step looked unfinishable.
   Pin the primary action to the bottom of the sheet: the content above still
   scrolls, but the way out is always on screen. */
#contrib-done {
  position: sticky;
  bottom: 0;
  margin-bottom: 0;
  box-shadow: 0 -16px 20px -8px var(--surface), 0 8px 0 8px var(--surface);
}

/* Says once what the minute figures on each row are measured from. */
.list-note {
  font-size: 12px; color: var(--ink-4); margin: -4px 0 10px;
  display: flex; align-items: center; gap: 6px;
}

/* First-party AREA rules. Named .arule, not .rule: .rule already belongs to the
   access-rule card in the spot sheet, and reusing it made this inherit
   display:flex and stack the title one character per line. */
/* First-party rules. Where there is no pin, the rule IS the answer, so it gets
   the weight of a card rather than a footnote. */
.arule {
  margin-top: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); text-align: left;
}
/* Hardcoded #FDF4E7 here put near-white text on a near-white card in dark mode
   -- contrast 0.04, i.e. invisible -- and this is the most important card of the
   three. --amber-100 already flips with the theme, like every other surface. */
.arule[data-tone="warn"] {
  background: var(--amber-100);
  border-color: color-mix(in srgb, var(--amber) 30%, transparent);
}
.arule[data-tone="good"] { background: var(--trust-50); border-color: color-mix(in srgb, var(--trust) 26%, transparent); }
.arule b { display: block; font-size: 14.5px; font-weight: 640; letter-spacing: -.01em; }
.arule p { margin: 6px 0 0; font-size: 13px; line-height: 1.62; color: var(--ink-3); }
/* the source link is small text, but it is still something a thumb has to hit:
   pad it out to the 44px target the rest of the app keeps to */
.arule a {
  display: inline-flex; align-items: center; margin-top: 4px;
  min-height: 44px; padding: 0 10px 0 0; font-size: 12px; color: var(--ink-4);
}

/* Where exactly, in words. An operator's announcement gives a station, not a
   pin; this is the line that actually walks someone there. */
.whereis {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 10px 0 2px; padding: 11px 13px; border-radius: var(--r-md);
  background: var(--trust-50);
  border: 1px solid color-mix(in srgb, var(--trust) 24%, transparent);
  font-size: 14px; font-weight: 560; color: var(--ink);
}
.whereis .i-sm { color: var(--trust); margin-top: 2px; flex: none; }

/* The "no bin here" fallback: a drinks machine's recycling box. Styled as a
   real answer rather than an apology, but labelled with its limit on every row
   so nobody carries a burger wrapper to one. */
.fb-head { margin: 16px 0 8px; font-size: 12px; font-weight: 680;
           letter-spacing: .02em; color: var(--ink-3); text-align: left; }
.fb-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 10px 14px; margin-bottom: 8px;
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); text-align: left;
}
.fb-kind { font-size: 14.5px; font-weight: 600; flex: none; }
.fb-rule { font-size: 12px; color: var(--ink-4); flex: 1; min-width: 0; }
.fb-d { font-size: 14px; font-weight: 640; flex: none; }