@import url("hud-icon-sets.css");
/* LeelaMaps HUD — glass over the map. See docs/hud.md.
   Chrome uses custom marks in /static/hud/icons/, never emoji. */

@font-face {
  font-family: "DM Sans";
  src: url("/static/fonts/DMSans-Variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("/static/fonts/Cinzel-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ll-under-header: 64px;
  /* Measured while they exist, 0 otherwise — see the top-lane stack on body. */
  --ll-fly-bar-h: 0px;
  --ll-chip-h: 0px;
  --ll-card-h: 0px;
  --ll-qs-band: 0px;
  --ll-qs-all-w: 88px;
  --ll-qs-all-h: 32px;
  --ll-brass-root: #fd9e02;
  --ll-brass: #fd9e02;
  --qs-p: var(--ll-brass) !important;
  --qs-pk: var(--ll-brass-hot) !important;
  --qs-pl: rgba(253, 158, 2, 0.16) !important;
  --qs-ps: rgba(253, 158, 2, 0.28) !important;
  --qs-f1: var(--ll-brass) !important;
  --qs-f2: var(--ll-brass-dim) !important;
  --qs-fs: rgba(253, 158, 2, 0.35) !important;
  --qs-btn-bg: var(--ll-panel) !important;
  --qs-btn-border: var(--ll-panel-border) !important;
  --ll-brass-hot: #fdc715;
  --ll-brass-dim: #b87708;
  --ll-place: #3fae52;
  --ll-place-hot: #96ce41;
  --ll-signal: #e24b4b;
  --ll-paper: #ece6da;
  --ll-paper-dim: #b4aa96;
  --ll-slate: #0c0e14;
  --ll-panel: rgba(12, 14, 20, 0.78);
  /* Always an image, whatever --ll-panel is (colour or gradient): hud.js
     setPanel() writes it beside every panel. See the solid surfaces. */
  --ll-panel-img: linear-gradient(rgba(12, 14, 20, 0.78), rgba(12, 14, 20, 0.78));
  --ll-panel-border: rgba(253, 158, 2, 0.28);
  /* Field well: tracks Light↔Dark with slate/paper (applyLuminance overwrites). */
  --ll-field: color-mix(in srgb, var(--ll-slate) 86%, var(--ll-paper));
  --ll-field-border: color-mix(in srgb, var(--ll-paper) 28%, transparent);
  /* Hover/active surfaces — a lifted step past --ll-field, same idea as it,
     just further toward paper. applyLuminance() overwrites this too. */
  --ll-panel-hover: color-mix(in srgb, var(--ll-slate) 78%, var(--ll-paper));
  --ll-glow-brass: 0 0 1px rgba(253, 158, 2, 0.65), 0 0 18px rgba(253, 158, 2, 0.22);
  --ll-glow-place: 0 0 1px rgba(63, 174, 82, 0.6), 0 0 18px rgba(63, 174, 82, 0.2);
  --ll-radius: 14px;
  --ll-sheet-bg-image: url("/static/hud/plates/sheet.jpg");
  --ll-auth-bg-image: url("/static/hud/plates/auth.jpg");
  --ll-hud-clearance: 72px;
  /* ── Control scale ── one size scale for every floating map control. 44 is
     an instrument, 56 one of the two primaries (post, messages); the docks pad
     and space them by the same step. Customize HUD → Controls resizes all of
     them at once through these four numbers (html[data-ll-size], below the
     shape rules). */
  --ll-ctrl: 44px;
  --ll-ctrl-lg: 56px;
  --ll-dock-pad: 8px;
  --ll-dock-gap: 8px;
  --ll-font: "DM Sans", system-ui, sans-serif;
  --ll-font-display: "Cinzel", "DM Sans", serif;
  --ll-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ll-close-ms: 220ms;
  --ll-scroll-thumb: color-mix(in srgb, var(--ll-brass) 78%, transparent);
  --ll-scroll-track: color-mix(in srgb, var(--ll-field) 90%, var(--ll-panel));
}

/* --- icons (classic filled silhouettes; relief = open-cut set) --- */
.ll-i {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  /* 10-04: briefly dialed back to `contain` while chasing what turned out
     to be corrupted icon files (tools/_hud_strip_icon_backdrops.py was
     erasing real glyph content in the NW quadrant, not a CSS clipping bug —
     see that file and a2b08c7). Fixed at the source now, so back to 170%:
     the gold mark sits in the middle ~55% of each 1024px plate, so `contain`
     renders a 28px icon as a ~14px mark. Zooming to 170% crops the plate's
     padding out of frame — the mark reads ~1.7x larger in the same box. */
  background: center / 170% no-repeat;
  flex-shrink: 0;
  pointer-events: none;
  /* Each plate PNG now carries real alpha (tools/_hud_strip_icon_backdrops.py
     stripped the old baked-opaque slate square), so normal compositing paints
     just the glyph. `lighten` used to be load-bearing here — it was the only
     thing hiding the opaque slate square by letting any chrome pixel at or
     above the plate's slate swallow it — but it assumed chrome was always
     dark, and washed the glyph itself out against a light background. */
  mix-blend-mode: normal;
}
.ll-i-lg { width: 32px; height: 32px; }
.ll-i-xl { width: 40px; height: 40px; }
#filterToggleBtn .ll-i,
#clear-search .ll-i { width: 24px; height: 24px; border-radius: 6px; }
/* Circular fabs: the plate IS the button face (Leela's rule — button outline
   or background shape, never both). The icon fills the whole circle, so the
   plate sits edge-to-edge under the button's own ring + glow instead of
   floating inside it as a smaller tile; blend off so the brushed slate reads
   as the face. 145% keeps the mark at ~3/4 of the face.
   10-04: briefly on background-size:contain while chasing what turned out
   to be corrupted icon files, not a clip bug — see the base .ll-i rule
   above. Fixed at the source, so back to 145%. overflow/contain/clip-path
   stay on as defense in depth (they were never actually the problem). */
.map-fab .ll-i, #messengerFab .ll-i, #newNoteFabBtn .ll-i {
  width: 100%; height: 100%; border-radius: 50%;
  overflow: hidden;
  contain: paint;
  clip-path: circle(50%);
  background-size: 145%;
  mix-blend-mode: normal;
}
/* Compose and Messages nest their icon two spans deep — button > .fab-stack >
   .fab-glyph > i — a leftover from when the glyph was an emoji that needed
   optical centring. Neither wrapper has a height, so the percentage above
   resolved against a parent sized by its own content and collapsed to nothing:
   both icons vanished while every direct-child fab looked right. Hand the
   wrappers the button's box so the icon can fill the face like the others. */
#newNoteFabBtn .fab-stack, #messengerFab .fab-stack,
#newNoteFabBtn .fab-glyph, #messengerFab .fab-glyph {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.ms-btn .ll-i { width: 20px; height: 20px; border-radius: 4px; }
.hp-tab .ll-i, .dp-tab .ll-i { width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; }
.hp-tab, .dp-tab { display: inline-flex; align-items: center; gap: 5px; }
#scrapeChip { display: inline-flex; align-items: center; gap: 6px; }
#scrapeChip .ll-i { width: 16px; height: 16px; }
#bookingReqFab .ll-i { width: 24px; height: 24px; border-radius: 6px; }

.ll-i-compose  { background-image: url("/static/hud/icons/sets/classic/compose.png"); }
.ll-i-messages { background-image: url("/static/hud/icons/sets/classic/messages.png"); }
.ll-i-find     { background-image: url("/static/hud/icons/sets/classic/find.png"); }
.ll-i-north    { background-image: url("/static/hud/icons/sets/classic/north.png"); }
.ll-i-layers   { background-image: url("/static/hud/icons/sets/classic/layers.png"); }
.ll-i-grid     { background-image: url("/static/hud/icons/sets/classic/grid.png"); }
.ll-i-browse   { background-image: url("/static/hud/icons/sets/classic/browse.png"); }
.ll-i-lists    { background-image: url("/static/hud/icons/sets/classic/lists.png"); }
.ll-i-games    { background-image: url("/static/hud/icons/sets/classic/games.png"); }
.ll-i-archive  { background-image: url("/static/hud/icons/sets/classic/archive.png"); }
.ll-i-planner  { background-image: url("/static/hud/icons/sets/classic/planner.png"); }
.ll-i-history  { background-image: url("/static/hud/icons/sets/classic/history.png"); }
.ll-i-loops    { background-image: url("/static/hud/icons/sets/classic/loops.png"); }
.ll-i-filter   { background-image: url("/static/hud/icons/sets/classic/filter.png"); }
.ll-i-search   { background-image: url("/static/hud/icons/sets/classic/search.png"); }
.ll-i-ai       { background-image: url("/static/hud/icons/sets/classic/ai.png"); }
.ll-i-close    { background-image: url("/static/hud/icons/sets/classic/close.png"); }
.ll-i-back     { background-image: url("/static/hud/icons/sets/classic/back.png"); }
.ll-i-user     { background-image: url("/static/hud/icons/sets/classic/user.png"); }
.ll-i-share    { background-image: url("/static/hud/icons/sets/classic/share.png"); }
.ll-i-settings { background-image: url("/static/hud/icons/sets/classic/settings.png"); }
.ll-i-map      { background-image: url("/static/hud/icons/sets/classic/map.png"); }
.ll-i-orient   { background-image: url("/static/hud/icons/sets/classic/orient.png"); }
.ll-i-ar       { background-image: url("/static/hud/icons/sets/classic/ar.png"); }
.ll-i-feedback { background-image: url("/static/hud/icons/sets/classic/feedback.png"); }
.ll-i-coverage { background-image: url("/static/hud/icons/sets/classic/coverage.png"); }
.ll-i-style    { background-image: url("/static/hud/icons/sets/classic/style.png"); }
.ll-i-admin    { background-image: url("/static/hud/icons/sets/classic/admin.png"); }
.ll-i-booking  { background-image: url("/static/hud/icons/sets/classic/booking.png"); }
.ll-i-bookmark { background-image: url("/static/hud/icons/sets/classic/bookmark.png"); }
.ll-i-basemap-street   { background-image: url("/static/hud/icons/sets/classic/basemap-street.png"); }
.ll-i-basemap-sat      { background-image: url("/static/hud/icons/sets/classic/basemap-sat.png"); }
.ll-i-basemap-outdoors { background-image: url("/static/hud/icons/sets/classic/basemap-outdoors.png"); }
.ll-i-basemap-light    { background-image: url("/static/hud/icons/sets/classic/basemap-light.png"); }
.ll-i-basemap-dark     { background-image: url("/static/hud/icons/sets/classic/basemap-dark.png"); }
.ll-i-night-auto       { background-image: url("/static/hud/icons/sets/classic/night-auto.png"); }
.ll-i-photo            { background-image: url("/static/hud/icons/sets/classic/photo.png"); }
.ll-i-draw             { background-image: url("/static/hud/icons/sets/classic/draw.png"); }
.ll-i-lock             { background-image: url("/static/hud/icons/sets/classic/lock.png"); }
.ll-i-mail             { background-image: url("/static/hud/icons/sets/classic/mail.png"); }
.ll-i-copy             { background-image: url("/static/hud/icons/sets/classic/copy.png"); }
.ll-i-send             { background-image: url("/static/hud/icons/sets/classic/send.png"); }
.ll-i-video            { background-image: url("/static/hud/icons/sets/classic/video.png"); }
.ll-i-mic              { background-image: url("/static/hud/icons/sets/classic/mic.png"); }
.ll-i-eye              { background-image: url("/static/hud/icons/sets/classic/eye.png"); }
.ll-i-bell             { background-image: url("/static/hud/icons/sets/classic/bell.png"); }
.ll-i-wifi             { background-image: url("/static/hud/icons/sets/classic/wifi.png"); }
.ll-i-cell             { background-image: url("/static/hud/icons/sets/classic/cell.png"); }
.ll-i-seat             { background-image: url("/static/hud/icons/sets/classic/seat.png"); }
.ll-i-power            { background-image: url("/static/hud/icons/sets/classic/power.png"); }
.ll-i-play             { background-image: url("/static/hud/icons/sets/classic/play.png"); }
.ll-i-pause            { background-image: url("/static/hud/icons/sets/classic/pause.png"); }
.ll-i-restroom         { background-image: url("/static/hud/icons/sets/classic/restroom.png"); }
.ll-i-elevator         { background-image: url("/static/hud/icons/sets/classic/elevator.png"); }
.ll-i-wheelchair       { background-image: url("/static/hud/icons/sets/classic/wheelchair.png"); }
.ll-i-stepfree         { background-image: url("/static/hud/icons/sets/classic/stepfree.png"); }
.ll-i-warn             { background-image: url("/static/hud/icons/sets/classic/warn.png"); }
.ll-i-weather          { background-image: url("/static/hud/icons/sets/classic/weather.png"); }
.ll-i-clock            { background-image: url("/static/hud/icons/sets/classic/clock.png"); }
.ll-i-plus             { background-image: url("/static/hud/icons/sets/classic/plus.png"); }
.ll-i-minus            { background-image: url("/static/hud/icons/sets/classic/minus.png"); }
.ll-i-expand           { background-image: url("/static/hud/icons/sets/classic/expand.png"); }
.ll-i-shrink           { background-image: url("/static/hud/icons/sets/classic/shrink.png"); }
.ll-i-category         { background-image: url("/static/hud/icons/sets/classic/category.png"); }
.ll-i-group            { background-image: url("/static/hud/icons/sets/classic/group.png"); }
.ll-i-vote             { background-image: url("/static/hud/icons/sets/classic/vote.png"); }
.ll-i-gallery          { background-image: url("/static/hud/icons/sets/classic/gallery.png"); }
.ll-i-age              { background-image: url("/static/hud/icons/sets/classic/age.png"); }
.ll-i-handshake        { background-image: url("/static/hud/icons/sets/classic/handshake.png"); }
.ll-i-music            { background-image: url("/static/hud/icons/sets/classic/music.png"); }
.ll-i-art              { background-image: url("/static/hud/icons/sets/classic/art.png"); }
.ll-i-fitness          { background-image: url("/static/hud/icons/sets/classic/fitness.png"); }
.ll-i-food             { background-image: url("/static/hud/icons/sets/classic/food.png"); }
.ll-i-wellness         { background-image: url("/static/hud/icons/sets/classic/wellness.png"); }
.ll-i-pets             { background-image: url("/static/hud/icons/sets/classic/pets.png"); }
.ll-i-philosophy       { background-image: url("/static/hud/icons/sets/classic/philosophy.png"); }

html[data-ll-set="relief"] .ll-i-compose, [data-ll-surface][data-ll-set="relief"] .ll-i-compose { background-image: url("/static/hud/icons/sets/relief/compose.png"); }
html[data-ll-set="relief"] .ll-i-messages, [data-ll-surface][data-ll-set="relief"] .ll-i-messages { background-image: url("/static/hud/icons/sets/relief/messages.png"); }
html[data-ll-set="relief"] .ll-i-find, [data-ll-surface][data-ll-set="relief"] .ll-i-find { background-image: url("/static/hud/icons/sets/relief/find.png"); }
html[data-ll-set="relief"] .ll-i-north, [data-ll-surface][data-ll-set="relief"] .ll-i-north { background-image: url("/static/hud/icons/sets/relief/north.png"); }
html[data-ll-set="relief"] .ll-i-layers, [data-ll-surface][data-ll-set="relief"] .ll-i-layers { background-image: url("/static/hud/icons/sets/relief/layers.png"); }
html[data-ll-set="relief"] .ll-i-grid, [data-ll-surface][data-ll-set="relief"] .ll-i-grid { background-image: url("/static/hud/icons/sets/relief/grid.png"); }
html[data-ll-set="relief"] .ll-i-browse, [data-ll-surface][data-ll-set="relief"] .ll-i-browse { background-image: url("/static/hud/icons/sets/relief/browse.png"); }
html[data-ll-set="relief"] .ll-i-lists, [data-ll-surface][data-ll-set="relief"] .ll-i-lists { background-image: url("/static/hud/icons/sets/relief/lists.png"); }
html[data-ll-set="relief"] .ll-i-games, [data-ll-surface][data-ll-set="relief"] .ll-i-games { background-image: url("/static/hud/icons/sets/relief/games.png"); }
html[data-ll-set="relief"] .ll-i-archive, [data-ll-surface][data-ll-set="relief"] .ll-i-archive { background-image: url("/static/hud/icons/sets/relief/archive.png"); }
html[data-ll-set="relief"] .ll-i-planner, [data-ll-surface][data-ll-set="relief"] .ll-i-planner { background-image: url("/static/hud/icons/sets/relief/planner.png"); }
html[data-ll-set="relief"] .ll-i-history, [data-ll-surface][data-ll-set="relief"] .ll-i-history { background-image: url("/static/hud/icons/sets/relief/history.png"); }
html[data-ll-set="relief"] .ll-i-loops, [data-ll-surface][data-ll-set="relief"] .ll-i-loops { background-image: url("/static/hud/icons/sets/relief/loops.png"); }
html[data-ll-set="relief"] .ll-i-filter, [data-ll-surface][data-ll-set="relief"] .ll-i-filter { background-image: url("/static/hud/icons/sets/relief/filter.png"); }
html[data-ll-set="relief"] .ll-i-search, [data-ll-surface][data-ll-set="relief"] .ll-i-search { background-image: url("/static/hud/icons/sets/relief/search.png"); }
html[data-ll-set="relief"] .ll-i-ai, [data-ll-surface][data-ll-set="relief"] .ll-i-ai { background-image: url("/static/hud/icons/sets/relief/ai.png"); }
html[data-ll-set="relief"] .ll-i-close, [data-ll-surface][data-ll-set="relief"] .ll-i-close { background-image: url("/static/hud/icons/sets/relief/close.png"); }
html[data-ll-set="relief"] .ll-i-back, [data-ll-surface][data-ll-set="relief"] .ll-i-back { background-image: url("/static/hud/icons/sets/relief/back.png"); }
html[data-ll-set="relief"] .ll-i-user, [data-ll-surface][data-ll-set="relief"] .ll-i-user { background-image: url("/static/hud/icons/sets/relief/user.png"); }
html[data-ll-set="relief"] .ll-i-share, [data-ll-surface][data-ll-set="relief"] .ll-i-share { background-image: url("/static/hud/icons/sets/relief/share.png"); }
html[data-ll-set="relief"] .ll-i-settings, [data-ll-surface][data-ll-set="relief"] .ll-i-settings { background-image: url("/static/hud/icons/sets/relief/settings.png"); }
html[data-ll-set="relief"] .ll-i-map, [data-ll-surface][data-ll-set="relief"] .ll-i-map { background-image: url("/static/hud/icons/sets/relief/map.png"); }
html[data-ll-set="relief"] .ll-i-orient, [data-ll-surface][data-ll-set="relief"] .ll-i-orient { background-image: url("/static/hud/icons/sets/relief/orient.png"); }
html[data-ll-set="relief"] .ll-i-ar, [data-ll-surface][data-ll-set="relief"] .ll-i-ar { background-image: url("/static/hud/icons/sets/relief/ar.png"); }
html[data-ll-set="relief"] .ll-i-feedback, [data-ll-surface][data-ll-set="relief"] .ll-i-feedback { background-image: url("/static/hud/icons/sets/relief/feedback.png"); }
html[data-ll-set="relief"] .ll-i-coverage, [data-ll-surface][data-ll-set="relief"] .ll-i-coverage { background-image: url("/static/hud/icons/sets/relief/coverage.png"); }
html[data-ll-set="relief"] .ll-i-style, [data-ll-surface][data-ll-set="relief"] .ll-i-style { background-image: url("/static/hud/icons/sets/relief/style.png"); }
html[data-ll-set="relief"] .ll-i-admin, [data-ll-surface][data-ll-set="relief"] .ll-i-admin { background-image: url("/static/hud/icons/sets/relief/admin.png"); }
html[data-ll-set="relief"] .ll-i-booking, [data-ll-surface][data-ll-set="relief"] .ll-i-booking { background-image: url("/static/hud/icons/sets/relief/booking.png"); }
html[data-ll-set="relief"] .ll-i-bookmark, [data-ll-surface][data-ll-set="relief"] .ll-i-bookmark { background-image: url("/static/hud/icons/sets/relief/bookmark.png"); }
html[data-ll-set="relief"] .ll-i-basemap-street, [data-ll-surface][data-ll-set="relief"] .ll-i-basemap-street { background-image: url("/static/hud/icons/sets/relief/basemap-street.png"); }
html[data-ll-set="relief"] .ll-i-basemap-sat, [data-ll-surface][data-ll-set="relief"] .ll-i-basemap-sat { background-image: url("/static/hud/icons/sets/relief/basemap-sat.png"); }
html[data-ll-set="relief"] .ll-i-basemap-outdoors, [data-ll-surface][data-ll-set="relief"] .ll-i-basemap-outdoors { background-image: url("/static/hud/icons/sets/relief/basemap-outdoors.png"); }
html[data-ll-set="relief"] .ll-i-basemap-light, [data-ll-surface][data-ll-set="relief"] .ll-i-basemap-light { background-image: url("/static/hud/icons/sets/relief/basemap-light.png"); }
html[data-ll-set="relief"] .ll-i-basemap-dark, [data-ll-surface][data-ll-set="relief"] .ll-i-basemap-dark { background-image: url("/static/hud/icons/sets/relief/basemap-dark.png"); }
html[data-ll-set="relief"] .ll-i-night-auto, [data-ll-surface][data-ll-set="relief"] .ll-i-night-auto { background-image: url("/static/hud/icons/sets/relief/night-auto.png"); }
html[data-ll-set="relief"] .ll-i-photo, [data-ll-surface][data-ll-set="relief"] .ll-i-photo { background-image: url("/static/hud/icons/sets/relief/photo.png"); }
html[data-ll-set="relief"] .ll-i-draw, [data-ll-surface][data-ll-set="relief"] .ll-i-draw { background-image: url("/static/hud/icons/sets/relief/draw.png"); }
html[data-ll-set="relief"] .ll-i-lock, [data-ll-surface][data-ll-set="relief"] .ll-i-lock { background-image: url("/static/hud/icons/sets/relief/lock.png"); }
html[data-ll-set="relief"] .ll-i-mail, [data-ll-surface][data-ll-set="relief"] .ll-i-mail { background-image: url("/static/hud/icons/sets/relief/mail.png"); }
html[data-ll-set="relief"] .ll-i-copy, [data-ll-surface][data-ll-set="relief"] .ll-i-copy { background-image: url("/static/hud/icons/sets/relief/copy.png"); }
html[data-ll-set="relief"] .ll-i-send, [data-ll-surface][data-ll-set="relief"] .ll-i-send { background-image: url("/static/hud/icons/sets/relief/send.png"); }
html[data-ll-set="relief"] .ll-i-video, [data-ll-surface][data-ll-set="relief"] .ll-i-video { background-image: url("/static/hud/icons/sets/relief/video.png"); }
html[data-ll-set="relief"] .ll-i-mic, [data-ll-surface][data-ll-set="relief"] .ll-i-mic { background-image: url("/static/hud/icons/sets/relief/mic.png"); }
html[data-ll-set="relief"] .ll-i-eye, [data-ll-surface][data-ll-set="relief"] .ll-i-eye { background-image: url("/static/hud/icons/sets/relief/eye.png"); }
html[data-ll-set="relief"] .ll-i-bell, [data-ll-surface][data-ll-set="relief"] .ll-i-bell { background-image: url("/static/hud/icons/sets/relief/bell.png"); }
html[data-ll-set="relief"] .ll-i-wifi, [data-ll-surface][data-ll-set="relief"] .ll-i-wifi { background-image: url("/static/hud/icons/sets/relief/wifi.png"); }
html[data-ll-set="relief"] .ll-i-cell, [data-ll-surface][data-ll-set="relief"] .ll-i-cell { background-image: url("/static/hud/icons/sets/relief/cell.png"); }
html[data-ll-set="relief"] .ll-i-seat, [data-ll-surface][data-ll-set="relief"] .ll-i-seat { background-image: url("/static/hud/icons/sets/relief/seat.png"); }
html[data-ll-set="relief"] .ll-i-power, [data-ll-surface][data-ll-set="relief"] .ll-i-power { background-image: url("/static/hud/icons/sets/relief/power.png"); }
html[data-ll-set="relief"] .ll-i-play, [data-ll-surface][data-ll-set="relief"] .ll-i-play { background-image: url("/static/hud/icons/sets/relief/play.png"); }
html[data-ll-set="relief"] .ll-i-pause, [data-ll-surface][data-ll-set="relief"] .ll-i-pause { background-image: url("/static/hud/icons/sets/relief/pause.png"); }
html[data-ll-set="relief"] .ll-i-restroom, [data-ll-surface][data-ll-set="relief"] .ll-i-restroom { background-image: url("/static/hud/icons/sets/relief/restroom.png"); }
html[data-ll-set="relief"] .ll-i-elevator, [data-ll-surface][data-ll-set="relief"] .ll-i-elevator { background-image: url("/static/hud/icons/sets/relief/elevator.png"); }
html[data-ll-set="relief"] .ll-i-wheelchair, [data-ll-surface][data-ll-set="relief"] .ll-i-wheelchair { background-image: url("/static/hud/icons/sets/relief/wheelchair.png"); }
html[data-ll-set="relief"] .ll-i-stepfree, [data-ll-surface][data-ll-set="relief"] .ll-i-stepfree { background-image: url("/static/hud/icons/sets/relief/stepfree.png"); }
html[data-ll-set="relief"] .ll-i-warn, [data-ll-surface][data-ll-set="relief"] .ll-i-warn { background-image: url("/static/hud/icons/sets/relief/warn.png"); }
html[data-ll-set="relief"] .ll-i-weather, [data-ll-surface][data-ll-set="relief"] .ll-i-weather { background-image: url("/static/hud/icons/sets/relief/weather.png"); }
html[data-ll-set="relief"] .ll-i-clock, [data-ll-surface][data-ll-set="relief"] .ll-i-clock { background-image: url("/static/hud/icons/sets/relief/clock.png"); }
html[data-ll-set="relief"] .ll-i-plus, [data-ll-surface][data-ll-set="relief"] .ll-i-plus { background-image: url("/static/hud/icons/sets/relief/plus.png"); }
html[data-ll-set="relief"] .ll-i-minus, [data-ll-surface][data-ll-set="relief"] .ll-i-minus { background-image: url("/static/hud/icons/sets/relief/minus.png"); }
html[data-ll-set="relief"] .ll-i-expand, [data-ll-surface][data-ll-set="relief"] .ll-i-expand { background-image: url("/static/hud/icons/sets/relief/expand.png"); }
html[data-ll-set="relief"] .ll-i-shrink, [data-ll-surface][data-ll-set="relief"] .ll-i-shrink { background-image: url("/static/hud/icons/sets/relief/shrink.png"); }
html[data-ll-set="relief"] .ll-i-category, [data-ll-surface][data-ll-set="relief"] .ll-i-category { background-image: url("/static/hud/icons/sets/relief/category.png"); }
html[data-ll-set="relief"] .ll-i-group, [data-ll-surface][data-ll-set="relief"] .ll-i-group { background-image: url("/static/hud/icons/sets/relief/group.png"); }
html[data-ll-set="relief"] .ll-i-vote, [data-ll-surface][data-ll-set="relief"] .ll-i-vote { background-image: url("/static/hud/icons/sets/relief/vote.png"); }
html[data-ll-set="relief"] .ll-i-gallery, [data-ll-surface][data-ll-set="relief"] .ll-i-gallery { background-image: url("/static/hud/icons/sets/relief/gallery.png"); }
html[data-ll-set="relief"] .ll-i-age, [data-ll-surface][data-ll-set="relief"] .ll-i-age { background-image: url("/static/hud/icons/sets/relief/age.png"); }
html[data-ll-set="relief"] .ll-i-handshake, [data-ll-surface][data-ll-set="relief"] .ll-i-handshake { background-image: url("/static/hud/icons/sets/relief/handshake.png"); }
html[data-ll-set="relief"] .ll-i-music, [data-ll-surface][data-ll-set="relief"] .ll-i-music { background-image: url("/static/hud/icons/sets/relief/music.png"); }
html[data-ll-set="relief"] .ll-i-art, [data-ll-surface][data-ll-set="relief"] .ll-i-art { background-image: url("/static/hud/icons/sets/relief/art.png"); }
html[data-ll-set="relief"] .ll-i-fitness, [data-ll-surface][data-ll-set="relief"] .ll-i-fitness { background-image: url("/static/hud/icons/sets/relief/fitness.png"); }
html[data-ll-set="relief"] .ll-i-food, [data-ll-surface][data-ll-set="relief"] .ll-i-food { background-image: url("/static/hud/icons/sets/relief/food.png"); }
html[data-ll-set="relief"] .ll-i-wellness, [data-ll-surface][data-ll-set="relief"] .ll-i-wellness { background-image: url("/static/hud/icons/sets/relief/wellness.png"); }
html[data-ll-set="relief"] .ll-i-pets, [data-ll-surface][data-ll-set="relief"] .ll-i-pets { background-image: url("/static/hud/icons/sets/relief/pets.png"); }
html[data-ll-set="relief"] .ll-i-philosophy, [data-ll-surface][data-ll-set="relief"] .ll-i-philosophy { background-image: url("/static/hud/icons/sets/relief/philosophy.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-compose { background-image: url("/static/hud/icons/sets/classic/compose.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-messages { background-image: url("/static/hud/icons/sets/classic/messages.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-find { background-image: url("/static/hud/icons/sets/classic/find.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-north { background-image: url("/static/hud/icons/sets/classic/north.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-layers { background-image: url("/static/hud/icons/sets/classic/layers.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-grid { background-image: url("/static/hud/icons/sets/classic/grid.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-browse { background-image: url("/static/hud/icons/sets/classic/browse.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-lists { background-image: url("/static/hud/icons/sets/classic/lists.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-games { background-image: url("/static/hud/icons/sets/classic/games.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-archive { background-image: url("/static/hud/icons/sets/classic/archive.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-planner { background-image: url("/static/hud/icons/sets/classic/planner.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-history { background-image: url("/static/hud/icons/sets/classic/history.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-loops { background-image: url("/static/hud/icons/sets/classic/loops.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-filter { background-image: url("/static/hud/icons/sets/classic/filter.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-search { background-image: url("/static/hud/icons/sets/classic/search.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-ai { background-image: url("/static/hud/icons/sets/classic/ai.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-close { background-image: url("/static/hud/icons/sets/classic/close.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-back { background-image: url("/static/hud/icons/sets/classic/back.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-user { background-image: url("/static/hud/icons/sets/classic/user.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-share { background-image: url("/static/hud/icons/sets/classic/share.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-settings { background-image: url("/static/hud/icons/sets/classic/settings.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-map { background-image: url("/static/hud/icons/sets/classic/map.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-orient { background-image: url("/static/hud/icons/sets/classic/orient.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-ar { background-image: url("/static/hud/icons/sets/classic/ar.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-feedback { background-image: url("/static/hud/icons/sets/classic/feedback.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-coverage { background-image: url("/static/hud/icons/sets/classic/coverage.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-style { background-image: url("/static/hud/icons/sets/classic/style.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-admin { background-image: url("/static/hud/icons/sets/classic/admin.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-booking { background-image: url("/static/hud/icons/sets/classic/booking.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-bookmark { background-image: url("/static/hud/icons/sets/classic/bookmark.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-basemap-street { background-image: url("/static/hud/icons/sets/classic/basemap-street.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-basemap-sat { background-image: url("/static/hud/icons/sets/classic/basemap-sat.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-basemap-outdoors { background-image: url("/static/hud/icons/sets/classic/basemap-outdoors.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-basemap-light { background-image: url("/static/hud/icons/sets/classic/basemap-light.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-basemap-dark { background-image: url("/static/hud/icons/sets/classic/basemap-dark.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-night-auto { background-image: url("/static/hud/icons/sets/classic/night-auto.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-photo { background-image: url("/static/hud/icons/sets/classic/photo.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-draw { background-image: url("/static/hud/icons/sets/classic/draw.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-lock { background-image: url("/static/hud/icons/sets/classic/lock.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-mail { background-image: url("/static/hud/icons/sets/classic/mail.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-copy { background-image: url("/static/hud/icons/sets/classic/copy.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-send { background-image: url("/static/hud/icons/sets/classic/send.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-video { background-image: url("/static/hud/icons/sets/classic/video.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-mic { background-image: url("/static/hud/icons/sets/classic/mic.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-eye { background-image: url("/static/hud/icons/sets/classic/eye.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-bell { background-image: url("/static/hud/icons/sets/classic/bell.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-wifi { background-image: url("/static/hud/icons/sets/classic/wifi.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-cell { background-image: url("/static/hud/icons/sets/classic/cell.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-seat { background-image: url("/static/hud/icons/sets/classic/seat.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-power { background-image: url("/static/hud/icons/sets/classic/power.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-play { background-image: url("/static/hud/icons/sets/classic/play.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-pause { background-image: url("/static/hud/icons/sets/classic/pause.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-restroom { background-image: url("/static/hud/icons/sets/classic/restroom.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-elevator { background-image: url("/static/hud/icons/sets/classic/elevator.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-wheelchair { background-image: url("/static/hud/icons/sets/classic/wheelchair.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-stepfree { background-image: url("/static/hud/icons/sets/classic/stepfree.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-warn { background-image: url("/static/hud/icons/sets/classic/warn.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-weather { background-image: url("/static/hud/icons/sets/classic/weather.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-clock { background-image: url("/static/hud/icons/sets/classic/clock.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-plus { background-image: url("/static/hud/icons/sets/classic/plus.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-minus { background-image: url("/static/hud/icons/sets/classic/minus.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-expand { background-image: url("/static/hud/icons/sets/classic/expand.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-shrink { background-image: url("/static/hud/icons/sets/classic/shrink.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-category { background-image: url("/static/hud/icons/sets/classic/category.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-group { background-image: url("/static/hud/icons/sets/classic/group.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-vote { background-image: url("/static/hud/icons/sets/classic/vote.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-gallery { background-image: url("/static/hud/icons/sets/classic/gallery.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-age { background-image: url("/static/hud/icons/sets/classic/age.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-handshake { background-image: url("/static/hud/icons/sets/classic/handshake.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-music { background-image: url("/static/hud/icons/sets/classic/music.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-art { background-image: url("/static/hud/icons/sets/classic/art.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-fitness { background-image: url("/static/hud/icons/sets/classic/fitness.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-food { background-image: url("/static/hud/icons/sets/classic/food.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-wellness { background-image: url("/static/hud/icons/sets/classic/wellness.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-pets { background-image: url("/static/hud/icons/sets/classic/pets.png"); }
[data-ll-surface][data-ll-set="classic"] .ll-i-philosophy { background-image: url("/static/hud/icons/sets/classic/philosophy.png"); }

.ll-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ll-head .ll-i { width: 24px; height: 24px; border-radius: 6px; }
button.ll-x {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.ll-x .ll-i { width: 18px; height: 18px; border-radius: 4px; }

/* --- glass chrome --- */
.ll-hud-root { pointer-events: none; }
.ll-hud-root .ll-hit { pointer-events: auto; }

.ll-fab {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ll-panel-border);
  border-radius: 50%;
  background: var(--ll-panel);
  box-shadow: var(--ll-glow-brass), 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ll-paper);
  padding: 0;
}
.ll-fab-lg {
  width: 56px;
  height: 56px;
  box-shadow: var(--ll-glow-place), 0 8px 28px rgba(0, 0, 0, 0.4);
}

.ll-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 6, 0.55);
  z-index: 8200; /* sheets / drawers band — docs/z-index.md */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ll-scrim.ll-open { display: block; }

.ll-sheet {
  background:
    linear-gradient(rgba(12, 14, 20, 0.84), rgba(12, 14, 20, 0.9)),
    var(--ll-sheet-bg-image) center / cover no-repeat !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
  box-shadow: var(--ll-glow-brass), 0 -8px 40px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Archive lost its positioning when converted to .ll-sheet — it sat in
   document flow and ate every click (tabs, map, docks). Keep it a hidden
   overlay until JS opens it. */
/* padding-bottom carries the gesture-bar inset: a sheet pinned to bottom:0 on
   a full-bleed phone puts its last row under the navigation bar, where it can
   be seen but not reliably tapped. The docks already do this
   (bottom: calc(10px + var(--sa-bottom))); sheets were missed. */
#archiveSheet {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: var(--sa-bottom, 0px);
  max-height: 82vh;
  z-index: 9001;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  pointer-events: auto;
}
#archiveOverlay.ll-scrim { z-index: 9000; }

/* Sheets must not intercept the map until they are actually opened.
   A missing display:none / a lost transform left Feedback (Feature request)
   sitting on top of the HUD so the left dock and QS tabs could not be used. */
#feedbackSheet:not(.fb-open) {
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(110%) !important;
}
#feedbackOverlay:not(.ll-open) {
  display: none !important;
  pointer-events: none !important;
}
#archiveSheet:not(.ll-open) {
  display: none !important;
  pointer-events: none !important;
}
#archiveOverlay:not(.ll-open) {
  display: none !important;
  pointer-events: none !important;
}
#historyOverlay:not(.ll-open) {
  display: none !important;
  pointer-events: none !important;
}
#dpOverlay:not(.ll-open) {
  display: none !important;
  pointer-events: none !important;
}
#notifSettingsOverlay:not(.ll-open) {
  display: none !important;
  pointer-events: none !important;
}
#notifDrawer:not(.nd-open) {
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(110%) !important;
}

.ll-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(253, 158, 2, 0.45);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.ll-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(253, 158, 2, 0.12);
  flex-shrink: 0;
}
.ll-sheet-head h2,
.ll-sheet-title {
  margin: 0;
  flex: 1;
  font-family: var(--ll-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ll-paper);
  letter-spacing: 0.04em;
}
.ll-sheet-x {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--ll-paper-dim);
}

.ll-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ll-scroll-thumb) var(--ll-scroll-track);
}
.ll-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.ll-scroll::-webkit-scrollbar-track {
  background: var(--ll-scroll-track);
  border-radius: 6px;
}
.ll-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ll-brass), var(--ll-brass-dim));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 8px rgba(253, 158, 2, 0.3);
}

.auth-logo { display: block; margin: 0 auto 10px; }
.ll-wordmark {
  font-family: var(--ll-font-display);
  letter-spacing: 0.08em;
  color: var(--ll-brass);
  text-shadow: 0 0 12px rgba(253, 158, 2, 0.45);
}

/* ==========================================================================
   Chrome restyle — the custom marks sit ON this language, not on the old
   white/green/indigo circles. Loaded last; !important only where the
   template still has inline styles.
   ========================================================================== */

header {
  background: var(--ll-slate) !important;
  border-bottom: 1px solid var(--ll-panel-border) !important;
  /* Do NOT use filter/backdrop-filter/transform on <header>: it becomes the
     containing block for every position:fixed descendant (Notifications,
     Planner, Feedback live in that markup). They then pin to the header
     instead of the viewport and cover the map. */
  font-family: var(--ll-font);
}
#search-input {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-field-border) !important;
  color: var(--ll-paper) !important;
  border-radius: 22px !important;
  font-family: var(--ll-font) !important;
}
#search-input::placeholder { color: var(--ll-paper-dim) !important; }
#filterToggleBtn {
  background: var(--ll-slate) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: var(--ll-glow-brass) !important;
}
#userTrigger {
  background: var(--ll-slate) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: var(--ll-glow-brass) !important;
}

.map-fab,
.map-fab-sm,
#bookingReqFab,
#arCalFab {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), var(--ll-glow-brass) !important;
  /* No backdrop-filter of their own. Every one of these sits inside a .ll-dock
     that already blurs the backdrop, so a second blur inside it changed
     nothing you could see — and in Safari a backdrop-filter nested inside a
     backdrop-filter with rounded corners paints as an unclipped dark square
     anchored top-left (owner, 09-30: "clipping the panels button, the new note
     button, the find me button" — exactly the three dock buttons that had one;
     the palette, search and messages buttons never did and were fine). */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}
#messengerFab,
#newNoteFabBtn,
.map-fab-lg {
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-brass) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), var(--ll-glow-place) !important;
  padding: 0 !important;
}
body.qs-all #newNoteFabBtn {
  background: var(--ll-slate) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), var(--ll-glow-brass) !important;
}
#newNoteFabBtn.fab-first-post-pulse {
  animation: llComposePulse 1.8s ease-out infinite !important;
}
@keyframes llComposePulse {
  0%   { box-shadow: 0 0 0 0 rgba(253, 158, 2, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(253, 158, 2, 0); }
  100% { box-shadow: 0 0 0 0 rgba(253, 158, 2, 0); }
}
#findMeFab.nav-recenter {
  background: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-place) !important;
}

/* ── One shape language ──────────────────────────────────────────────────
   Every floating map control is a circle on one size scale, and the docks
   are capsules around them. There used to be two families here — round for
   an instrument, a 40×36 r12 squircle for "configuration" (map view, panels,
   the panel switcher) — and the owner read the mix as a mistake twice (09-22
   "structurally similar to the other HUD buttons"; 09-30, LeelaMaps 6 and the
   AR shots): a square inside a capsule beside a circle is a rail that looks
   unfinished, whatever the shape was meant to teach. What a control does is
   said by its icon and its glow, not by its corners.

   Sizes come from --ll-ctrl / --ll-ctrl-lg (the :root tokens) so Customize
   HUD → Controls can step every one of them together. */

/* The one labelled primary control gets the stadium — fully round ends — and
   stands as tall as the instruments beside it. */
#llFeatureBtn {
  border-radius: 999px !important;
  min-height: var(--ll-ctrl) !important;
}

/* The three that used to be squircles: the same circle, the same size as the
   instruments beside them. Listed by id because each carries its own geometry
   rule elsewhere (index.html, and #llMapMenuBtn further down this file). */
#qsModeBtn,
#llMapMenuBtn,
#qsLayerBtn {
  border-radius: 50% !important;
  /* The clip itself (overflow/contain/clip-path) used to live here, on the
     BUTTON. That's wrong: it also clips the button's other children, like
     #qsLayerBtn's own .qsl-dot — an indicator meant to float OUTSIDE the
     ring (translated to the upper-right corner by design) — which instead
     got cut off at the circle, a regression caught 10-03 from a real
     screenshot of a clipped notification dot. The clip belongs on the icon
     alone (below), which has no such children. */
  width: var(--ll-ctrl) !important;
  height: var(--ll-ctrl) !important;
  min-width: var(--ll-ctrl) !important;
  min-height: var(--ll-ctrl) !important;
}
/* …and their plates fill the face the way every other fab's does (the 145%
   crop rule at the top of this file) instead of sitting as an 18–20px tile in
   the middle of a square. */
#qsModeBtn .ll-i,
#llMapMenuBtn .ll-i,
#qsLayerBtn .ll-i {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  overflow: hidden;
  contain: paint;
  clip-path: circle(50%);
  /* 130, not the fabs' 145: the layers, search and palette marks fill more of
     their plate than the pin and the crosshair do, and at 145 the layers'
     bottom tier touched the ring.
     10-04: briefly on contain while chasing corrupted icon files, not a
     clip bug — see the base .ll-i rule. Fixed at the source, back to 130%. */
  background-size: 130%;
}

/* Instruments: round, on the scale. Stated rather than inherited, so a new
   dock child lands in the family on purpose. */
.map-fab,
.map-fab-sm,
.map-fab-lg,
#bookingReqFab,
#arCalFab,
#messengerFab,
#newNoteFabBtn,
#findMeFab,
#qsClearFab,
#northFab {
  border-radius: 50% !important;
  /* NOT overflow/contain/clip-path here — it clipped #messengerFab's and
     #bookingReqFab's own notification badges, positioned to float OUTSIDE
     the ring by design (top:-4px;right:-4px;). Caught 10-03 from a
     screenshot of a clipped red badge. The clip belongs on .ll-i alone
     (below), which has no badge children. */
}
.map-fab-sm,
#bookingReqFab,
#arCalFab,
#findMeFab,
#qsClearFab,
#northFab {
  width: var(--ll-ctrl) !important;
  height: var(--ll-ctrl) !important;
  min-width: var(--ll-ctrl) !important;
  min-height: var(--ll-ctrl) !important;
}
/* The two primaries. #messengerFab used to have no size of its own at all —
   it rode the 44px tap floor and its icon, so any change to its container's
   flex rules resized it by accident. */
#messengerFab,
#newNoteFabBtn,
.map-fab-lg {
  width: var(--ll-ctrl-lg) !important;
  height: var(--ll-ctrl-lg) !important;
  min-width: var(--ll-ctrl-lg) !important;
  min-height: var(--ll-ctrl-lg) !important;
}

/* ── Controls: size steps (Customize HUD → Controls) ─────────────────────
   One attribute on <html>, four numbers. Compact is the size the old palette
   button had, for people who want more map; Large is for gloves, sun and
   tired eyes. The 44px tap floor in index.html is a min-width/min-height,
   and the !important sizes above outrank it. */
html[data-ll-size="compact"] { --ll-ctrl: 40px; --ll-ctrl-lg: 50px; --ll-dock-pad: 6px; --ll-dock-gap: 6px; }
html[data-ll-size="large"]   { --ll-ctrl: 52px; --ll-ctrl-lg: 66px; --ll-dock-pad: 9px; --ll-dock-gap: 9px; }

/* ── The panel plate ─────────────────────────────────────────────────────
   "3 panels" / "Food" under the panels rail was a bare grey label floating
   on the map. It is a chip now, on the same glass and tokens as the pills in
   the row beside it — and it says nothing on All, where there is nothing to
   name (_renderLayerSwitcherBtn). */
#qsLayerName {
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border);
  border-radius: 999px !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font);
  font-size: 10px !important;
  font-weight: 700;
  padding: 3px 9px !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
#qsLayerName.qsl-on { color: var(--ll-brass) !important; border-color: var(--ll-brass); }

/* ── The compass rose, on the HUD's glass ────────────────────────────────
   It was a white paper disc with grey letters — the one thing on the map that
   ignored the theme, and in AR the one white object over the camera. Same
   glass, same trim, same glow as the instruments; the north needle keeps the
   red every compass uses. Sized off the control scale (1.4 × an instrument =
   the 62px it always was). */
#navCompass, .nav-compass-outer {
  width: calc(var(--ll-ctrl) * 1.4);
  height: calc(var(--ll-ctrl) * 1.4);
}
.nav-compass-outer {
  background: var(--ll-panel);
  border: 1px solid var(--ll-panel-border);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), var(--ll-glow-brass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-compass-lbl-n { color: var(--ll-signal); }
.nav-compass-lbl-s, .nav-compass-lbl-e, .nav-compass-lbl-w { color: var(--ll-paper-dim); }
.nav-compass-ndl-n { border-bottom-color: var(--ll-signal); }
.nav-compass-ndl-s { border-top-color: var(--ll-paper-dim); }
.nav-compass-hub { background: var(--ll-paper); border-color: var(--ll-brass); }

/* The docks edge-align their children on purpose (a 56px button must not push
   the 44px ones inboard), and .ll-dock was re-centring them inside itself.
   Inherit the parent's intent instead of overriding it. */
/* …except the top-right rail, which has no 56px child to protect: edge-aligned,
   the 40px map-view button sat 11px from the rail's left and 7px from its
   right beside the 44px find-me (09-30, LeelaMaps 6.png). Centred, both sit
   on the rail's axis. */
#mapFabStackTop .ll-dock { align-items: center; }
#mapFabStackLeft .ll-dock { align-items: flex-start; }
#mapFabStack .ll-dock { align-items: flex-end; }

#modeSwitch {
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
  background: var(--ll-panel);
  backdrop-filter: blur(12px);
}
.ms-btn {
  background: transparent !important;
  color: var(--ll-paper-dim) !important;
}
/* An 18% wash was the only signal that a mode was running, on a control
   whose whole job is telling you which of three you are in. It has a solid
   ground and a brass edge now — the same vocabulary .llf-cur uses on the
   wheel, so the two routes to the same choice read alike. */
.ms-btn.active {
  background: rgba(253, 158, 2, 0.30) !important;
  box-shadow: inset 0 0 0 1.5px var(--ll-brass) !important;
}
.ms-lbl { color: var(--ll-paper-dim) !important; }
.ms-btn.active .ms-lbl { color: var(--ll-brass) !important; }
.ms-btn.active .ll-i { color: var(--ll-brass) !important; }


#llFeatureBtn {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: var(--ll-glow-brass) !important;
  backdrop-filter: blur(12px);
  font-family: var(--ll-font) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
#llFeatureBtn.llf-open {
  border-color: var(--ll-brass) !important;
}
/* A view owns the screen: the button sits in the map-chrome band at 4500 and
   every one of these panels lays a .ll-scrim over the viewport at 8200, so it
   could not be pressed even if it were shown. It lives here rather than in
   index.html because the rule above is `display:inline-flex !important` — which
   is also why the Browse pill's own inline `style.display='none'` never hid it.
   An !important needs an !important. */
body.ll-view-open #llFeatureBtn {
  display: none !important;
}

/* ── Feature button geometry (moved out of templates/index.html) ──────────
   It was in the signed-in template's inline <style>, which is why the
   logged-out map could never show the button no matter what markup it
   grew: preview.html and index.html share only this file and hud.js.
   The themed rules for the same element are further up; these are the
   ones that place it. */
/* ── The feature button ───────────────────────────────────────────
   Band 4500 (map chrome above the note reader) — the slot the Browse
   pill vacated, inheriting its geometry so nothing else has to move.
   touch-action:none is load-bearing: the hold-and-drag that opens the
   wheel would otherwise pan the map underneath. */
#llFeatureBtn { position:fixed; bottom:calc(24px + var(--sa-bottom)); left:50%; transform:translateX(-50%); z-index:4500; background:rgba(255,255,255,.88); border:none; border-radius:20px; padding:7px 18px; font-size:14px; font-weight:600; color:#374151; box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:pointer; display:flex; align-items:center; gap:6px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); white-space:nowrap; transition:transform .15s,box-shadow .15s; touch-action:none; -webkit-user-select:none; user-select:none; }
#llFeatureBtn:active { transform:translateX(-50%) scale(.95); }
/* The sideways flick's answer: the face slides in from the direction the
   flick came from. On the button's CHILDREN, because the button itself is
   centre-translated and an animation on it would have to restate that
   transform in every keyframe — the exact trap its :active and .llf-armed
   rules already tiptoe around. */
#llFeatureBtn.llf-cycle-l > * { animation: llCycleL .18s ease-out; }
#llFeatureBtn.llf-cycle-r > * { animation: llCycleR .18s ease-out; }
@keyframes llCycleL { from { transform: translateX(14px); opacity: .3; }
                      to   { transform: none; opacity: 1; } }
@keyframes llCycleR { from { transform: translateX(-14px); opacity: .3; }
                      to   { transform: none; opacity: 1; } }

/* Armed = the hold landed and the wheel is up. */
#llFeatureBtn.llf-armed { transform:translateX(-50%) scale(1.06); box-shadow:0 8px 26px rgba(0,0,0,.34); }
#llFeatureBadge { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; background:#ef4444; color:white; border-radius:20px; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.3); border:2px solid rgba(255,255,255,.9); }
body.dark #llFeatureBadge { border-color:rgba(30,37,53,.9); }
/* News in one of the other six views: a dot, not a number. */
#llFeatureBadge.llf-dot { min-width:11px; width:11px; height:11px; padding:0; }
/* ── Feature wheel + options list ─────────────────────────────────
   Band 4510, one step above the button. Body-appended and built on
   open / removed on close, so it can never strand over the map
   (docs/z-index.md rule 3). Hidden by display, never by opacity
   alone — tests_overlay_hiding_e2e.py greps for exactly that. */
#llFeatureWheel,
#llMapMenuWheel { position:fixed; inset:0; z-index:4510; display:none; }
/* Its own ground. A radial menu fanned straight over live map chrome —
   the GPS nudge, the docks, the attribution — is unreadable, and the
   dim is also the "released on nothing" cancel target. */
#llFeatureWheel.llf-on,
#llMapMenuWheel.llf-on { display:block; background:rgba(2,3,6,.5); }
/* Nothing in a wheel is text you are allowed to select. A hold-drag is a
   gesture, and without this the browser treats it as the start of a selection:
   the spoke labels, the badge digits and the swipe-up rows all highlighted blue
   under the finger, and on iOS a long press could raise the callout. The anchor
   buttons already carry this (#llFeatureBtn, #llMapMenuBtn,
   #nfAddBtn) — #newNoteFabBtn was the one that did not, and a selection begun
   there is what crossed into the layer.
   All five wheels are named because the two in note-form.css were never added
   to the three-id selectors above; the durable fix is a shared .llf-wheel class
   on the wrap built by _llArcUp, which belongs with the sub-wheel work. */
#llFeatureWheel, #llMapMenuWheel, #nfAddWheel, #nnAddWheel,
#llFeatureOpts,
.llf-opt, .llf-opt-lbl, .llf-opt-n,
.llf-row, .llf-opts-col, .llf-opts-head {
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
/* --llf-item: set on the wheel only when the arc could not buy enough room
   for full-size items (see _llArcUp). Eight of them at 58px need more arc
   than a 390px phone has, and a circle that has given up 4px still holds its
   word — two overlapping ones hold neither. */
.llf-opt { position:absolute; width:var(--llf-item,58px); height:var(--llf-item,58px);
           margin:calc(var(--llf-item,58px) / -2) 0 0 calc(var(--llf-item,58px) / -2); border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(30,37,53,.94); color:#e5e7eb; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; box-shadow:0 5px 20px rgba(0,0,0,.38); transition:transform .13s ease, background .13s ease; }
.llf-opt .ll-i { width:24px; height:24px; }
.llf-opt-lbl { font-size:8.5px; font-weight:700; letter-spacing:.02em; line-height:1; }
.llf-opt-long .llf-opt-lbl { font-size:7.6px; letter-spacing:0; }
.llf-opt.llf-cur { border-color:rgba(253,158,2,.9); }
.llf-opt.llf-hot { transform:scale(1.2); background:#0d9488; color:#fff; }
/* Stacking is set inline per item by _llArcUp (descending, so an item's
   badge clears its right-hand neighbour) and by _llArcHot (the hot item
   above all). Kept here only as the floor for anything built without it. */
.llf-opt.llf-has-n { z-index:2; }
.llf-opt-n { position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; background:#ef4444; color:#fff; border-radius:9px; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
/* Swipe-up options: a labelled list above the button, on the same
   ground as the wheel and for the same reasons. */
#llFeatureOpts { position:fixed; inset:0; z-index:4510; display:none; }
#llFeatureOpts.llf-on { display:block; background:rgba(2,3,6,.5); }
.llf-opts-col { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:stretch; gap:7px; min-width:212px; }
.llf-row { display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:22px; background:rgba(30,37,53,.94); border:1px solid rgba(255,255,255,.16); color:#e5e7eb; font-size:13.5px; font-weight:600; text-align:left; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.34); }
.llf-row .ll-i { width:22px; height:22px; flex-shrink:0; }
.llf-row:hover, .llf-row:focus-visible { border-color:rgba(253,158,2,.85); }
.llf-opts-head { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(229,231,235,.62); padding:0 4px 1px; }
body.dark #llFeatureBtn { background:rgba(30,37,53,.88); color:#e5e7eb; }

/* Feature wheel + swipe-up options: dock chrome, not sheet chrome — they
   belong to the button, so they carry the docks surface's tokens. */
.llf-opt,
.llf-row {
  background: var(--ll-docks-panel, var(--ll-panel)) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.38), var(--ll-glow-brass) !important;
  font-family: var(--ll-font) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.llf-opt.llf-cur {
  border-color: var(--ll-brass) !important;
}
.llf-opt.llf-hot {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
}
/* The People row (10-08): a second ring above the centre button's spokes.
   Same circle, with a brass ring round it so the two tiers read as two
   groups — places to go below, people to reach above. */
.llf-opt.llf-tier2 {
  border: 1.5px solid var(--ll-brass) !important;
}
.llf-opt.llf-tier2.llf-hot {
  background: var(--ll-brass) !important;
}

/* A mode that cannot start says so before you commit to it, rather than
   looking live and answering with a toast that vanishes. Dimmed, not
   hidden: "AR needs a phone with a compass" is information, and a mode
   that silently disappears on desktop is a feature nobody discovers.
   The refusal itself happens at commit, in _llArcCommit.
   !important throughout because the themed .llf-opt rules above are
   !important — an !important needs an !important, in the same file. */
.llf-opt.llf-off { opacity: .42; }
.llf-opt.llf-off .ll-i { filter: grayscale(1); }
.llf-opt.llf-off.llf-hot {
  background: var(--ll-panel-border, #4b5563) !important;
  color: var(--ll-paper) !important;
}
.llf-opts-head {
  font-family: var(--ll-title-font, var(--ll-font)) !important;
  color: var(--ll-brass) !important;
}

#scrapeChip {
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-brass) !important;
  box-shadow: var(--ll-glow-brass) !important;
}

/* The active-filter state, as a class rather than the inline colour writes
   _renderLayerSwitcherBtn used to make — those lost to the !important below
   and were reapplied on every toggle regardless. */
#qsLayerBtn.qs-panel-active {
  border-color: var(--ll-brass) !important;
  box-shadow: 0 0 0 1px var(--ll-brass), var(--ll-glow-brass) !important;
}
#qsLayerBtn, .qs-btn {
  background: var(--ll-panel) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font);
}
/* The pills float on the map and blur what is under them; the layers button
   sits in a dock that already does, and a nested backdrop-filter is the Safari
   square described at .map-fab above. */
.qs-btn { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#qsLayerBtn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* All's rainbow ring, on the dock's OWN ground. index.html fills the face with
   var(--qs-btn-bg), which this file pins on :root to var(--ll-panel) — and a
   custom property is substituted where it is DEFINED, so that is the root
   panel. With a light docks surface over a dark app it painted a slate square
   (a disc, now) in the upper-left dock (owner, 09-30, LeelaMaps 7). #qsLayerBtn
   is a docks surface host, so var(--ll-panel) read here is the dock's remapped
   panel, the same ground every other dock control stands on. */
#qsLayerBtn.qs-all-active {
  background:
    var(--ll-panel-img) padding-box,
    linear-gradient(90deg, #f87171, #fb923c, #fbbf24, #4ade80, #60a5fa, #a78bfa) border-box !important;
  border-color: transparent !important;
}
/* Several panels can be on at once, and then no single theme owns the bar.
   Each pill carries its home panel's colour as an edge instead — enough to
   see where it came from, without painting a bright accent over the glass the
   rest of the HUD is made of. --qs-src is set per pill by
   renderQuickSearchBar; pills from a single-panel bar never have it. */
.qs-btn[data-qs-layer] {
  border-color: var(--qs-src, var(--ll-panel-border)) !important;
  box-shadow: inset 2.5px 0 0 var(--qs-src), 0 1px 5px rgba(0, 0, 0, 0.12);
}
.qs-btn[data-qs-layer].qs-active {
  box-shadow: inset 2.5px 0 0 var(--qs-src), 0 0 0 2px var(--qs-src), 0 1px 5px rgba(0, 0, 0, 0.1);
}
/* A pill that is ON has to look on. The rule above pins border and ground
   with !important, which cancelled the panel's own active style and left a
   2px ring in the panel's pale --qs-ps — on All's grey theme, nothing you
   could see (09-30, when All got a multi-select row). Brass, the HUD's own
   "this one" accent, as on the open feature button. */
.qs-btn.qs-active:not([data-qs-layer]) {
  border-color: var(--ll-brass) !important;
  box-shadow: 0 0 0 1.5px var(--ll-brass), 0 1px 5px rgba(0, 0, 0, 0.12);
  font-weight: 700;
}
/* Ghost QS band: never paint the empty (or chip-row) container. Chips only. */
#quickSearchBar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#quickSearchBar:empty {
  display: none !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* ── The upper-left rail ─────────────────────────────────────────────────
   The mirror of #mapFabStackTop. Both controls live in its flow now, so the
   rail is the only thing with a position and the chain of calc() offsets they
   used to derive from each other is gone.

   --ll-qs-all-w/h are measured from THIS element now, not from #qsLayerBtn:
   the pill bar has to start clear of the whole tray, and the tray is wider
   than the button by the dock's padding. llSyncUnderHeader prefers it and
   falls back to the button, so the two can never disagree about what the
   variables mean. */
#mapFabStackLeftTop {
  position: fixed;
  top: var(--ll-under-header, 84px);
  left: calc(6px + var(--sa-left, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  z-index: 904;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#mapFabStackLeftTop .ll-dock { align-items: stretch; }
/* Everything that hides the other docks hides this one too, or the rail floats
   over whatever surface took the screen. body.ll-view-open is named here and
   not on #mapFabStackTop because the left rail is the one that sits under a
   panel's .ll-scrim at 8200. */
body.nm-composer     #mapFabStackLeftTop,
body.cr-sheet-open   #mapFabStackLeftTop,
body.ll-line-drawing #mapFabStackLeftTop,
body.ll-view-open    #mapFabStackLeftTop { display: none !important; }

#quickSearchBar {
  top: var(--ll-under-header) !important;
  padding-left: calc(10px + var(--ll-qs-all-w) + 10px) !important;
}
/* Hangs off the rail rather than off the button's own height.
   Above the map card (9517, 10-07): a long list on a phone reaches the bottom
   of the screen, and at index.html's 9010 it opened UNDER the card (owner,
   10-08). Still below the sheets that bring a scrim (pin sheet 9518/9519,
   status/directions 9520+): those cover the Panels button, so the list cannot
   be opened beneath one anyway. */
#qsLayerPicker {
  z-index: 9518 !important;
  top: calc(var(--ll-under-header) + var(--ll-qs-all-h) + 6px) !important;
  /* Reach the bottom of the screen and no further: the list scrolls inside
     and its footer (Customize) is pinned to this edge (index.html). Same
     terms as top, and this node is zoomed, so the screen-sized part is
     divided by the zoom (cf. the zoomed fixed containers further down). */
  max-height: calc((100dvh - var(--sa-bottom, 0px) - 10px) / var(--ll-zoom, 1)
                   - var(--ll-under-header) - var(--ll-qs-all-h) - 6px) !important;
  left: calc(6px + var(--sa-left, 0px)) !important;
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--ll-font);
}

#historyPanel,
#archiveSheet,
#dpPanel,
#feedbackSheet,
#notifDrawer,
#adminPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5), var(--ll-glow-brass) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: var(--ll-font) !important;
}
#messengerPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
}
#messengerHeader {
  background: transparent !important;
  border-bottom-color: rgba(253, 158, 2, 0.14) !important;
  color: var(--ll-paper) !important;
}

#historyPanel .ll-head,
#archiveSheet .ll-head,
#dpPanel .ll-head,
#feedbackSheet .ll-head,
#messengerTitle {
  color: var(--ll-paper) !important;
}
.hp-tab, .dp-tab, .nd-tab {
  background: transparent !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper-dim) !important;
}
.hp-tab.hp-on, .hp-tab.active,
.dp-tab.active, .nd-tab.nd-on {
  background: rgba(253, 158, 2, 0.16) !important;
  border-color: var(--ll-brass) !important;
  color: var(--ll-brass) !important;
}

#feedbackCategory, #feedbackMessage,
#historyPanel input, #archiveSheet input,
#dpPanel input, #dpPanel textarea, #dpPanel select {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}


#userDropdown {
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), var(--ll-glow-brass) !important;
  backdrop-filter: blur(16px);
}
#userDropdown a,
#userDropdown button,
#userDropdown .user-info,
#userDropdown .username {
  color: var(--ll-paper) !important;
  background: transparent !important;
  border-color: var(--ll-panel-border) !important;
}
#userDropdown a:hover { background: rgba(253, 158, 2, 0.1) !important; }

#notifSettingsPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
}
#notifSettingsPanel > div:first-child {
  background: var(--ll-panel) !important;
  border-bottom-color: rgba(253, 158, 2, 0.14) !important;
}
#notifSettingsPanel .ns-row-label,
#notifSettingsPanel .ns-ss-name { color: var(--ll-paper) !important; }
#notifSettingsPanel .ns-freq {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}

#search-results {
  /* Solid, not the glass --ll-panel: pins, chips and roads read straight
     through a 92% cream panel over satellite, and results are text you have
     to read (09-25 #35). --ll-slate is the active theme's own background, so
     this stays on-theme; body.dark keeps its own solid rule in index.html. */
  background: var(--ll-slate) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.sr-recovery {
  padding: 10px 14px;
  border-top: 1px solid var(--ll-panel-border);
  background: transparent;
  color: var(--ll-paper);
}
.sr-recovery:first-child {
  border-top: none;
  border-bottom: 1px solid var(--ll-panel-border);
}
.sr-recovery-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ll-paper-dim);
  margin-bottom: 8px;
}
.sr-recovery-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sr-recovery-chip {
  padding: 5px 10px;
  border: 1px solid var(--ll-panel-border);
  border-radius: 999px;
  background: var(--ll-panel);
  font-size: 12.5px;
  cursor: pointer;
  color: var(--ll-paper);
  font-family: inherit;
}
.sr-recovery-chip:hover,
.sr-recovery-chip:focus {
  border-color: var(--ll-brass);
  color: var(--ll-brass-hot);
  outline: none;
}
.sr-search-this-area {
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  color: var(--ll-brass);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.sr-search-this-area:hover { color: var(--ll-brass-hot); }
.sr-showing-broader,
.sr-did-you-mean {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--ll-brass-hot);
  background: rgba(253, 158, 2, 0.12);
  border-bottom: 1px solid var(--ll-panel-border);
  cursor: pointer;
}
.sr-did-you-mean { font-size: 13px; }

#qsEditPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}

#noteModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5), var(--ll-glow-brass) !important;
}
.nm-hdr {
  background: transparent !important;
  border-bottom: 1px solid rgba(253, 158, 2, 0.14) !important;
}
.nm-hdr .modal-header { color: var(--ll-paper) !important; font-family: var(--ll-font-display) !important; }
.nm-drag { background: rgba(253, 158, 2, 0.45) !important; }
#cancelNote { color: var(--ll-paper-dim) !important; }
#saveNote {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass) !important;
}
#templatePickerBtn {
  background: rgba(253, 158, 2, 0.12) !important;
  color: var(--ll-brass) !important;
  border-color: var(--ll-panel-border) !important;
}
#templatePickerDropdown {
  background: var(--ll-slate) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.tpl-row-label { color: var(--ll-paper) !important; }
.nm-body { background: transparent !important; color: var(--ll-paper) !important; }
#noteText {
  background: var(--ll-field) !important;
  border-color: var(--ll-field-border) !important;
  color: var(--ll-paper) !important;
  caret-color: var(--ll-paper);
}
#noteText::placeholder {
  color: var(--ll-paper-dim) !important;
}
#noteText:focus {
  border-color: var(--ll-brass) !important;
  box-shadow: 0 0 0 3px rgba(253, 158, 2, 0.18) !important;
}
#nmAuthorName { color: var(--ll-paper) !important; }
#nmAuthorSub { color: var(--ll-paper-dim) !important; }
#nmPageTabs { border-color: rgba(253, 158, 2, 0.12) !important; }
.nm-page-tab {
  background: transparent !important;
  color: var(--ll-paper-dim) !important;
  border-color: var(--ll-panel-border) !important;
}
.nm-page-tab.active {
  background: rgba(253, 158, 2, 0.16) !important;
  color: var(--ll-brass) !important;
  border-color: var(--ll-brass) !important;
}
.nm-page-tab .ll-i { width: 16px; height: 16px; border-radius: 4px; }
.nm-toggle-lbl input:checked + .nm-toggle-track { background: var(--ll-brass) !important; }
#noteAllowCommentsLabel { color: var(--ll-brass) !important; }

#filterPanel,
#groupsPanel,
#meetLocalsPanel,
#mapViewPanel,
#noteListPanel,
.lp-panel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.45), var(--ll-glow-brass) !important;
}
#filterPanel > div:first-child,
#groupsPanel > div:first-child,
#meetLocalsPanel > div:first-child,
#noteListPanelHeader,
.lp-header {
  background: transparent !important;
  border-bottom-color: rgba(253, 158, 2, 0.14) !important;
  color: var(--ll-paper) !important;
}
#noteListPanelBody { background: transparent !important; }
#noteListPanelTitle { color: var(--ll-paper) !important; }

#filterPanel input,
#filterPanel select,
#filterPanel textarea,
#groupsPanel input,
#groupsPanel select,
#meetLocalsPanel input,
#meetLocalsPanel textarea,
#meetLocalsPanel select,
#notifSettingsPanel input,
#notifSettingsPanel select,
#noteListPanel input,
.lp-panel input,
.lp-panel select {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}

#noteListNewBtn,
#groupsPanel button[onclick*="CreateGroup"],
#groupsPanel button[onclick*="_openCreateGroupModal"] {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border-color: var(--ll-brass) !important;
}
#groupsPanel button[onclick*="_openCreateGroupModal"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none !important;
}
#groupsPanel button[onclick*="_openCreateGroupModal"] .ll-i { width: 12px; height: 12px; }
#notifSettingsPanel button[onclick*="_saveNotifSettings"] {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass) !important;
}
#noteListNewBtn { background: transparent !important; color: var(--ll-brass) !important; }

.lp-section-label { color: var(--ll-paper-dim) !important; }

#geoNavToast {
  background: var(--ll-slate) !important;
  border: 1px solid var(--ll-panel-border);
}

#landingChip {
  background: var(--ll-slate) !important;
  border: 1px solid var(--ll-panel-border);
}

/* ==========================================================================
   GLOBAL language — type, shape, colour on every surface, not only docks.
   ========================================================================== */
html, body, button, input, select, textarea {
  font-family: var(--ll-font) !important;
}
.np-root { font-family: var(--ll-font) !important; }

dialog {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  font-family: var(--ll-font) !important;
}
dialog:not([open]) { display: none !important; }

.mapboxgl-popup-content {
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), var(--ll-glow-brass) !important;
  border: 1px solid var(--ll-panel-border);
}
.mapboxgl-popup-close-button {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: none !important;
}
.mapboxgl-popup-close-button:hover {
  background: var(--ll-field, var(--ll-panel)) !important;
  color: var(--ll-paper) !important;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--ll-slate) !important; }
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--ll-slate) !important; }
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--ll-slate) !important; }
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--ll-slate) !important; }

/* U2: compact trails / NWS / courier info cards (not .np-root). */
.mapboxgl-popup.ll-layer-popup-root .mapboxgl-popup-content {
  padding: 10px 12px 12px !important;
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
}
.ll-layer-popup {
  color: var(--ll-paper);
  font-family: var(--ll-font);
  font-size: 12px;
  line-height: 1.4;
  max-width: 260px;
}
.ll-layer-popup .ll-lp-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ll-paper);
  margin-bottom: 3px;
}
.ll-layer-popup .ll-lp-sub {
  color: var(--ll-paper-dim);
  font-size: 11px;
  margin-top: 3px;
}
.ll-layer-popup .ll-lp-row {
  display: flex;
  gap: 8px;
  font-size: 11px;
  margin-top: 3px;
}
.ll-layer-popup .ll-lp-k {
  color: var(--ll-paper-dim);
  min-width: 52px;
}
.ll-layer-popup .ll-lp-v {
  color: var(--ll-paper);
  flex: 1;
}
.ll-layer-popup .ll-lp-btn,
.ll-layer-popup .ll-lp-ghost {
  margin-top: 7px;
  width: 100%;
  padding: 7px;
  border: 1px solid var(--ll-field-border, var(--ll-panel-border));
  border-radius: 8px;
  background: var(--ll-field);
  color: var(--ll-paper);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ll-layer-popup .ll-lp-ghost {
  color: var(--ll-brass);
  background: color-mix(in srgb, var(--ll-brass) 14%, var(--ll-field));
  border-color: var(--ll-panel-border);
}
.ll-layer-popup a,
.ll-layer-popup .ll-lp-a {
  color: var(--ll-brass);
}
.ll-layer-popup input[type="number"],
.ll-layer-popup input[type="text"] {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-field-border, var(--ll-panel-border)) !important;
  caret-color: var(--ll-paper);
}
.ll-layer-popup [style*="color:#111827"],
.ll-layer-popup [style*="color:#374151"],
.ll-layer-popup [style*="color:#166534"] { color: var(--ll-paper) !important; }
.ll-layer-popup [style*="color:#9ca3af"],
.ll-layer-popup [style*="color:#6b7280"],
.ll-layer-popup [style*="color:#0369a1"] { color: var(--ll-paper-dim) !important; }
.ll-layer-popup [style*="background:white"],
.ll-layer-popup [style*="background:#f0f9ff"],
.ll-layer-popup [style*="background:#f0fdf4"] {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-field-border, var(--ll-panel-border)) !important;
}

.np-root { background: transparent; color: var(--ll-paper); }
.np-username { color: var(--ll-brass) !important; }
.np-text { color: var(--ll-paper) !important; }
.np-privacy.pub { background: rgba(63, 174, 82, 0.22) !important; color: var(--ll-place-hot) !important; }
.np-privacy.fri { background: rgba(253, 158, 2, 0.22) !important; color: var(--ll-brass) !important; }
.np-privacy.fof { background: rgba(253, 158, 2, 0.12) !important; color: var(--ll-brass-hot) !important; }
.np-privacy.prv { background: rgba(226, 75, 75, 0.18) !important; color: #f0a0a0 !important; }
.np-evt {
  background: rgba(253, 158, 2, 0.1) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.np-evt-title { color: var(--ll-brass) !important; }
.np-status-dm {
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-brass) !important;
}
.nl-item-row { background: transparent !important; }
.nl-item-text { color: var(--ll-paper) !important; }
.nl-item-num { background: var(--ll-brass) !important; color: var(--ll-slate) !important; }

.lp-header { color: var(--ll-paper) !important; border-bottom-color: rgba(253, 158, 2, 0.14) !important; }
.lp-disclaimer {
  background: rgba(253, 158, 2, 0.08) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper-dim) !important;
}

.hdr-priv-btn {
  background: var(--ll-slate) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}

/* Auth (login / register) — same world as the map HUD */
.auth-container {
  background: var(--ll-slate) !important;
  font-family: var(--ll-font) !important;
}
.auth-card {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), var(--ll-glow-brass) !important;
  backdrop-filter: blur(18px);
}
.auth-header h1 {
  font-family: var(--ll-font-display) !important;
  color: var(--ll-brass) !important;
}
.auth-header p { color: var(--ll-paper-dim) !important; }
.input-group input {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.input-group input:focus {
  border-color: var(--ll-brass) !important;
  box-shadow: 0 0 0 4px rgba(253, 158, 2, 0.18) !important;
}
.auth-button {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass) !important;
}
.auth-footer { border-top-color: rgba(253, 158, 2, 0.14) !important; color: var(--ll-paper-dim) !important; }
.auth-footer a { color: var(--ll-brass) !important; }

html, body {
  background: var(--ll-slate) !important;
}
.ob-wrap { font-family: var(--ll-font) !important; }
.ob-card {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45), var(--ll-glow-brass) !important;
}

/* Guest map: its header, sheet and pitch card are themed from the --ll-*
   tokens in templates/preview.html itself. This block used to pin the header
   dark while the text on it followed the theme — dark ink on a dark bar in
   Light, every new visitor's default. Only the display face stays here. */
#pv-logo, #pv-logo span {
  font-family: var(--ll-font-display) !important;
}

/* The baked slate plate is now removed by the screen blend on .ll-i (see the
   sizing block); the round clip stays as a backstop so any plate remnant on an
   unexpected light backdrop crops to the button's own shape. */
.map-fab .ll-i,
#messengerFab .ll-i,
#newNoteFabBtn .ll-i,
#filterToggleBtn .ll-i,
#userTrigger .ll-i,
.ms-btn .ll-i {
  border-radius: 50%;
}

/* ---- Kill leftover paper-white / grey UI ---- */
[style*="background:white"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background:#fafafa"],
[style*="background:#f9fafb"],
[style*="background:#f0f4f8"],
[style*="background:#f3f4f6"],
[style*="background:#fafbfc"],
[style*="background:#fff;"] {
  background: var(--ll-panel) !important;
}

/* P3b: UA-white / leftover white fields on compose-adjacent chrome. */
#noteModal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
#noteModal textarea,
#noteModal select,
#locPrivSheet input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
#locPrivSheet textarea,
#locPrivSheet select,
#liveProfileSheet input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
#liveProfileSheet textarea,
#liveProfileSheet select,
#mdPrivacyDetails input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
#mdPrivacyDetails textarea,
#mdPrivacyDetails select,
#handshakePanel input:not([type="checkbox"]):not([type="radio"]),
#originFallbackInput {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-field-border) !important;
  caret-color: var(--ll-paper);
}
#noteModal input::placeholder,
#noteModal textarea::placeholder,
#locPrivSheet input::placeholder,
#liveProfileSheet input::placeholder,
#liveProfileSheet textarea::placeholder,
#mdPrivacyDetails input::placeholder,
#handshakePanel input::placeholder,
#originFallbackInput::placeholder {
  color: var(--ll-paper-dim) !important;
}
#nmMentionDrop {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-field-border) !important;
}

/* Divider lines inside note cards were authored for white cards (#e5e7eb,
   #f3f4f6, #eee, …) and read as glaring white rules on the dark HUD. Retint
   them relative to the theme instead of absolute grey. Scoped to note
   surfaces so deliberate whites elsewhere (map marker rings, .mkr contract)
   are untouched. Attribute-substring selectors lose to JS style writes
   (see the dark-mode inline-styles note) — acceptable for a polish pass. */
:root { --ll-line: rgba(236, 230, 218, 0.16); }
:is(.mapboxgl-popup-content, .fs-card, #noteModal, #fsBrowsePanel)
:is([style*="#e5e7eb"], [style*="#f3f4f6"], [style*="#f0f0f0"],
    [style*="solid #eee"], [style*="#f9fafb"], [style*="solid white"]) {
  border-color: var(--ll-line) !important;
}
[style*="color:#111827"],
[style*="color:#1f2937"],
[style*="color:#374151"],
[style*="color:#1a1a2e"],
[style*="color:#222"],
[style*="color:#333"],
[style*="color:#111"],
[style*="color:#1a1a1a"] {
  color: var(--ll-paper) !important;
}

/* Games — whole dialog, not just the grid icon */
#gameModal,
#gameBuilderModal,
#gameModerationModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.5), var(--ll-glow-brass) !important;
  font-family: var(--ll-font) !important;
}
#gameModal::backdrop,
#gameBuilderModal::backdrop,
#gameModerationModal::backdrop {
  background: rgba(2, 3, 6, 0.62) !important;
}
.gm-header,
.gb-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(253, 158, 2, 0.14) !important;
}
.gm-title, .gb-title { color: var(--ll-paper) !important; font-family: var(--ll-font-display) !important; }
.gm-tabs { border-bottom-color: rgba(253, 158, 2, 0.14) !important; }
.gm-tab { color: var(--ll-paper-dim) !important; background: none !important; }
.gm-tab.active { color: var(--ll-brass) !important; border-bottom-color: var(--ll-brass) !important; }
body.dark .gm-tab.active {
  color: var(--ll-brass) !important;
  border-bottom-color: var(--ll-brass) !important;
}
.gm-body, .gb-body { background: transparent !important; color: var(--ll-paper) !important; }
.gm-section-title { color: var(--ll-paper-dim) !important; }
.gm-head-act { background: rgba(253, 158, 2, 0.12) !important; color: var(--ll-paper) !important; }
#gmHdrNew {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.gm-ptab {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper-dim) !important;
}
.gm-ptab.active {
  background: rgba(253, 158, 2, 0.16) !important;
  border-color: var(--ll-brass) !important;
  color: var(--ll-brass) !important;
}
.invite-banner { background: rgba(253, 158, 2, 0.1) !important; border-color: var(--ll-panel-border) !important; color: var(--ll-paper) !important; }
.invite-btn.accept { background: var(--ll-brass) !important; color: var(--ll-slate) !important; }

/* Full-screen note reader */
.nr-shell {
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
}
/* The head and the bar are opaque: the theme's panel tint over its own solid
   slate, the same build as #notePinSheet. They are sticky, so the note's
   photos and text scroll under them, and at 0.92 + blur the author line was
   hard to read (owner, 10-03: "content in the header of a note is hard to
   read with all this transparency — the reader with the author name").
   body.dark is named because index.html's dark override outranks .nr-head. */
.nr-head, body.dark .nr-head {
  background: var(--ll-panel-img) !important;          /* see --ll-panel-img: never wrap --ll-panel in a gradient */
  background-color: var(--ll-slate) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(253, 158, 2, 0.14) !important;
}
.nr-back { background: rgba(12, 14, 20, 0.92) !important; color: var(--ll-paper) !important; }
.nr-who, .nr-text, .nr-link-title { color: var(--ll-paper) !important; }
.nr-where, .nr-cap { color: var(--ll-paper-dim) !important; }
.nr-chip { background: rgba(12, 14, 20, 0.92) !important; color: var(--ll-paper-dim) !important; }
.nr-bar, body.dark .nr-bar {
  background: var(--ll-panel-img) !important;          /* see --ll-panel-img: never wrap --ll-panel in a gradient */
  background-color: var(--ll-slate) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(253, 158, 2, 0.14) !important;
}
.nr-btn {
  background: rgba(12, 14, 20, 0.92) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.nr-menu {
  background: rgba(12, 14, 20, 0.94) !important;
  border-color: var(--ll-panel-border) !important;
}
.nr-menu button { color: var(--ll-paper) !important; border-bottom-color: rgba(253, 158, 2, 0.1) !important; }
.nr-tpl, .nr-ev {
  background: rgba(253, 158, 2, 0.1) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-brass) !important;
}

.np-act {
  background: var(--ll-panel) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.nm-info-strip, .nm-seg {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
}
.exc-tab {
  background: var(--ll-panel) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper-dim) !important;
}
.mvp-style-btn, .mvp-pin-form {
  background: var(--ll-panel) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#qsLayerPicker, #qsShareBox {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
.qslp-row:hover { background: rgba(253, 158, 2, 0.1) !important; }
/* The footer is pinned to the list's bottom edge while the rows scroll under
   it, so it is opaque — the .nr-bar build — or the last rows read through
   New panel / Customize / Share. */
#qsLayerPicker .qslp-footer, body.dark #qsLayerPicker .qslp-footer {
  background: var(--ll-panel-img) !important;          /* see --ll-panel-img: never wrap --ll-panel in a gradient */
  background-color: var(--ll-slate) !important;
  border-top: 1px solid rgba(253, 158, 2, 0.14) !important;
  margin-top: 0;
}
#tipsModal { background: var(--ll-panel) !important; }
.tm-header { background: var(--ll-slate) !important; }
.tm-body, .tm-footer { background: var(--ll-panel) !important; color: var(--ll-paper) !important; }
.tm-tip-title { color: var(--ll-paper) !important; }
.tm-cta { background: var(--ll-brass) !important; color: var(--ll-slate) !important; }

#fsTextEditor, #fsTextEditor::backdrop { background: var(--ll-slate) !important; color: var(--ll-paper) !important; }

#gmHdrBack, #gmHdrNew, .gm-head-act { font-family: var(--ll-font) !important; }

[style*="background:#667eea"],
[style*="background: #667eea"],
[style*="background:linear-gradient(135deg,#667eea"],
[style*="background:linear-gradient(135deg,#8b5cf6"] {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass) !important;
}

.game-card { border-bottom-color: rgba(253, 158, 2, 0.1) !important; }
.game-card:hover { background: rgba(253, 158, 2, 0.08) !important; }
.game-card-name { color: var(--ll-paper) !important; }
.game-card-sub { color: var(--ll-paper-dim) !important; }

.gb-label, .gb-title { color: var(--ll-paper) !important; }
.gb-input, .gb-select, .gb-textarea, .gp-share-input {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.gb-input:focus { border-color: var(--ll-brass) !important; }
.gb-quest-card, .gb-qcard {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
}
.gb-qcard-title { color: var(--ll-paper) !important; }
.gb-qchip { background: var(--ll-panel) !important; color: var(--ll-paper-dim) !important; }

#shareToSheet, #boostSheet, #buyLoopsModal, #giveLoopsModal,
#csvWizard, #evtModal, #coverageModal, #aiItineraryModal,
#aiCreditsModal, #editProfileModal, #friendsModal, #inviteModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
}
#boostSheet > div:first-child,
#buyLoopsModal > div:first-child {
  background: var(--ll-slate) !important;
}
#boostSheet > div:last-child,
#buyLoopsModal > div:last-child {
  background: transparent !important;
  color: var(--ll-paper) !important;
}

.evt-sub-body, .evt-field input, .evt-field select,
.evt-card input, .evt-card textarea, .evtm-input, #evtModal {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}

.nc-card, .nc-search-row, .nc-search-results, .nc-hdr {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
  border-color: var(--ll-panel-border) !important;
}
.nc-search-x { background: var(--ll-slate) !important; color: var(--ll-paper) !important; }

.fs-block-card, .poll-card {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}

.dp-picker-cal, .dp-when-tab {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.dp-when-tab.active {
  background: rgba(253, 158, 2, 0.12) !important;
  border-color: var(--ll-brass) !important;
}
.dp-when-tab-v, .dp-slot-title { color: var(--ll-paper) !important; }
.dp-slot-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.dp-slot-btn .ll-i { width: 12px; height: 12px; }
.dp-slot-btn:hover {
  border-color: var(--ll-brass) !important;
  color: var(--ll-brass) !important;
}
.fscprev-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.fscprev-cta .ll-i { width: 12px; height: 12px; }
.np-cprev-add {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--ll-panel) !important;
  color: var(--ll-paper-dim) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
.np-cprev-add .ll-i { width: 12px; height: 12px; }
.dp-day-note-toggle {
  color: var(--ll-paper-dim) !important;
}
.dp-day-note-toggle .ll-i { width: 14px; height: 14px; }
.dp-slot-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.dp-slot-badge .ll-i { width: 11px; height: 11px; }
.ll-grip,
.dp-grip,
.dir-stop-handle,
.gb-qcard-grip,
.mvp-drag-handle,
.mpi-drag,
.nl-drag-handle {
  width: 14px !important;
  height: 22px !important;
  margin-left: -4px;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  background-image: radial-gradient(circle, var(--ll-brass) 1.15px, transparent 1.3px) !important;
  background-size: 6px 6px !important;
  background-repeat: repeat !important;
  background-position: 1px 2px !important;
  opacity: 0.9;
  flex-shrink: 0;
}
.nm-sec-panel-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: var(--ll-paper) !important;
}
.nm-time-sub-hdr {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ll-paper) !important;
}
.nm-sec-panel-title .ll-i,
.nm-time-sub-hdr .ll-i { width: 14px; height: 14px; }
#lpOpenFromEditBtn .ll-i { width: 14px; height: 14px; }
#courierPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
.cr-head {
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  border-bottom: 1px solid var(--ll-panel-border) !important;
}
.cr-head .ll-head { color: var(--ll-paper) !important; }
.cr-head .ll-i { width: 18px; height: 18px; }
.cr-head-btn {
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-brass) !important;
}
#mlCourierCard {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#mlCourierCard .ll-head { color: var(--ll-paper) !important; }
#mlCourierCard .ll-i { width: 16px; height: 16px; }

/* L0 — Meet Locals panel restyle (intro card / sugg deck = L2). */
html body #meetLocalsPanel,
html body.dark #meetLocalsPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.45), var(--ll-glow-brass) !important;
}
html body #groupsPanel,
html body.dark #groupsPanel,
html body #notifSettingsPanel,
html body.dark #notifSettingsPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
}
#meetLocalsPanel .ml-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + var(--sa-top)) 16px 14px;
  border-bottom: 1px solid rgba(253, 158, 2, 0.14);
  position: sticky;
  top: 0;
  background: var(--ll-panel) !important;
  z-index: 1;
}
#meetLocalsPanel .ml-body { padding: 16px; }
#meetLocalsPanel .ml-lede {
  font-size: 13px;
  color: var(--ll-paper-dim) !important;
  margin: 0 0 16px;
  line-height: 1.5;
}
#meetLocalsPanel .ml-age-gate {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  text-align: center;
}
#meetLocalsPanel .ml-age-gate .ll-i { width: 22px; height: 22px; margin-bottom: 6px; }
#meetLocalsPanel .ml-age-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ll-paper) !important;
}
#meetLocalsPanel .ml-age-copy {
  font-size: 12px;
  color: var(--ll-paper-dim) !important;
  margin-top: 4px;
  line-height: 1.4;
}
#meetLocalsPanel .ml-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 12px;
  margin-bottom: 18px;
}
#meetLocalsPanel .ml-toggle-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ll-paper) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#meetLocalsPanel .ml-toggle-title .ll-i { width: 16px; height: 16px; }
#meetLocalsPanel .ml-toggle-sub {
  font-size: 11px;
  color: var(--ll-paper-dim) !important;
  margin-top: 2px;
}
#meetLocalsPanel .ml-toggle-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ll-paper-dim) !important;
  font-size: 11px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  font-family: inherit;
  pointer-events: auto;
}
#meetLocalsPanel #mlIntroTrack {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
  background: color-mix(in srgb, var(--ll-slate) 55%, var(--ll-paper)) !important;
  border: 1px solid var(--ll-panel-border);
  flex-shrink: 0;
  pointer-events: none;
}
#meetLocalsPanel #mlIntroTrack.ml-on {
  background: var(--ll-brass) !important;
  border-color: var(--ll-brass);
}
#meetLocalsPanel #mlIntroThumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ll-paper) !important;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
#meetLocalsPanel #mlIntroTrack.ml-on #mlIntroThumb {
  background: var(--ll-slate) !important;
  transform: translateX(16px);
}
#meetLocalsPanel .ml-fields {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#meetLocalsPanel .ml-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ll-paper-dim) !important;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#meetLocalsPanel .ml-label .ll-i { width: 14px; height: 14px; }
#meetLocalsPanel .ml-hint {
  font-size: 11px;
  color: var(--ll-paper-dim) !important;
  margin-top: 4px;
}
#meetLocalsPanel .ml-hint.right { text-align: right; margin-top: 2px; }
#meetLocalsPanel .ml-age-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#meetLocalsPanel .ml-age-dash { color: var(--ll-paper-dim); font-size: 13px; }
#meetLocalsPanel .ml-save-wrap {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ll-panel-border);
}
#meetLocalsPanel #mlSaveBtn {
  width: 100%;
  padding: 11px 0;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ll-glow-brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ll-font);
}
#meetLocalsPanel #mlSaveBtn .ll-i { width: 16px; height: 16px; }
#meetLocalsPanel #mlCourierBody {
  font-size: 12px;
  color: var(--ll-paper-dim) !important;
  line-height: 1.5;
}
#meetLocalsPanel #mlCourierBtn {
  margin-top: 9px;
  width: 100%;
  padding: 9px 0;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 10px;
  background: var(--ll-panel) !important;
  color: var(--ll-brass) !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ll-font);
}
#meetLocalsPanel .tp-search {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#meetLocalsPanel .tp-search:focus {
  border-color: var(--ll-brass) !important;
  background: var(--ll-field) !important;
}
#meetLocalsPanel .tp-browse { border-color: var(--ll-panel-border) !important; }
#meetLocalsPanel .tp-cat-btn {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-bottom-color: var(--ll-panel-border) !important;
}
#meetLocalsPanel .tp-cat-name .ll-i { width: 16px; height: 16px; }
#meetLocalsPanel .tp-cat-btn.open {
  background: color-mix(in srgb, var(--ll-brass) 16%, var(--ll-field)) !important;
  color: var(--ll-brass) !important;
}
#meetLocalsPanel .tp-cat-btn:hover:not(.open) {
  background: color-mix(in srgb, var(--ll-paper) 8%, var(--ll-field)) !important;
}
#meetLocalsPanel .tp-cat-badge {
  background: color-mix(in srgb, var(--ll-brass) 22%, var(--ll-field)) !important;
  color: var(--ll-brass) !important;
}
#meetLocalsPanel .tp-cat-chips,
#meetLocalsPanel .tp-search-results,
#meetLocalsPanel .tp-no-results {
  background: transparent !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper-dim) !important;
}
#meetLocalsPanel .tp-sel-area {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
}
#meetLocalsPanel .tp-sel-header { color: var(--ll-brass) !important; }
#meetLocalsPanel .tp-sel-chip {
  background: color-mix(in srgb, var(--ll-brass) 22%, var(--ll-field)) !important;
  color: var(--ll-paper) !important;
}
#meetLocalsPanel .tp-sel-x { color: var(--ll-brass) !important; }
#meetLocalsPanel .lps-tag {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#meetLocalsPanel .lps-tag.sel {
  background: color-mix(in srgb, var(--ll-brass) 22%, var(--ll-field)) !important;
  border-color: var(--ll-brass) !important;
  color: var(--ll-paper) !important;
}

/* L2 — Meet intro card + intro-sugg deck */
#meetLocalsIntroCard.ml-intro,
html body #meetLocalsIntroCard {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 18px;
  padding: 0;
  width: min(360px, 92vw);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), var(--ll-glow-brass);
  font-family: var(--ll-font) !important;
}
#meetLocalsIntroCard .ml-intro-inner { padding: 24px 22px 20px; }
#meetLocalsIntroCard .ml-intro-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
#meetLocalsIntroCard .ml-intro-hero .ll-i { width: 36px; height: 36px; }
#meetLocalsIntroCard .ml-intro-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ll-paper) !important;
  text-align: center;
  margin-bottom: 8px;
}
#meetLocalsIntroCard .ml-intro-copy {
  font-size: 13px;
  color: var(--ll-paper-dim) !important;
  text-align: center;
  line-height: 1.55;
  margin-bottom: 18px;
}
#meetLocalsIntroCard .ml-intro-cta {
  width: 100%;
  padding: 11px 0;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ll-font);
  box-shadow: var(--ll-glow-brass);
}
#meetLocalsIntroCard .ml-intro-cta .ll-i { width: 16px; height: 16px; }
#meetLocalsIntroCard .ml-intro-later {
  width: 100%;
  padding: 9px 0;
  background: none;
  border: none;
  color: var(--ll-paper-dim) !important;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--ll-font);
}

.intro-sugg-item {
  background: var(--ll-field) !important;
  border-bottom-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.intro-sugg-item:hover {
  background: color-mix(in srgb, var(--ll-brass) 12%, var(--ll-field)) !important;
}
.intro-sugg-av { border: 2px solid var(--ll-brass) !important; }
.intro-sugg-av-ph {
  background: var(--ll-panel) !important;
  border: 2px solid var(--ll-panel-border);
}
.intro-sugg-av-ph .ll-i { width: 22px; height: 22px; }
.intro-sugg-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ll-brass) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--ll-panel) !important;
  border-bottom: 1px solid var(--ll-panel-border);
}
.intro-sugg-hdr .ll-i { width: 12px; height: 12px; }
.intro-sugg-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ll-paper) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.intro-sugg-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ll-brass) 22%, var(--ll-field)) !important;
  color: var(--ll-paper) !important;
}
.intro-sugg-btn.yes {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
}
.intro-sugg-btn.yes .ll-i { width: 12px; height: 12px; mix-blend-mode: normal; }
.intro-sugg-btn.no {
  background: var(--ll-field) !important;
  color: var(--ll-paper-dim) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
.intro-sugg-btn.blk {
  background: color-mix(in srgb, var(--ll-signal) 18%, var(--ll-field)) !important;
  color: var(--ll-paper) !important;
}

.fs-meet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fs-meet-btn.hi {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
}
.fs-meet-btn .ll-i { width: 14px; height: 14px; mix-blend-mode: normal; }
.fs-meet-btn.hi .ll-i { mix-blend-mode: normal; }
.fs-meet-tag {
  background: color-mix(in srgb, var(--ll-brass) 22%, transparent) !important;
  color: var(--ll-brass-hot, var(--ll-brass)) !important;
  border-color: var(--ll-brass) !important;
}

/* H0 — Handshakes panel */
html body #handshakePanel.hs-panel,
html body.dark #handshakePanel.hs-panel {
  width: 94%;
  max-width: 420px;
  max-height: 88dvh;
  padding: 0;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 18px;
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), var(--ll-glow-brass);
  overflow: hidden;
}
#handshakePanel .hs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(253, 158, 2, 0.14);
  background: var(--ll-panel) !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
#handshakePanel .hs-head .ll-i { width: 18px; height: 18px; }
#handshakePanel .hs-lede {
  padding: 8px 16px 0;
  font-size: 12px;
  color: var(--ll-paper-dim) !important;
}
#handshakePanel .hs-body {
  padding: 12px 16px 22px;
  overflow-y: auto;
  max-height: calc(88dvh - 88px);
}
#handshakePanel .hs-stat { text-align: center; padding: 6px 0 14px; }
#handshakePanel .hs-stat-n {
  font-size: 30px;
  font-weight: 800;
  color: var(--ll-brass) !important;
  line-height: 1;
}
#handshakePanel .hs-stat-l {
  font-size: 12px;
  color: var(--ll-paper-dim) !important;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#handshakePanel .hs-stat-l .ll-i { width: 12px; height: 12px; }
#handshakePanel .hs-codewell {
  text-align: center;
  padding: 12px 10px;
  border: 1.5px dashed var(--ll-panel-border);
  border-radius: 12px;
  background: var(--ll-field) !important;
}
#handshakePanel .hs-cta,
#handshakePanel .hs-go,
#handshakePanel .hs-confirm {
  padding: 9px 18px;
  border: none;
  border-radius: 10px;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ll-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--ll-glow-brass);
}
#handshakePanel .hs-cta .ll-i,
#handshakePanel .hs-confirm .ll-i { width: 14px; height: 14px; }
#handshakePanel .hs-hint,
#handshakePanel .hs-muted { font-size: 11px; color: var(--ll-paper-dim) !important; }
#handshakePanel .hs-hint { margin-top: 6px; }
#handshakePanel .hs-or {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  font-size: 10px;
  color: var(--ll-paper-dim);
}
#handshakePanel .hs-or::before,
#handshakePanel .hs-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ll-panel-border);
}
#handshakePanel .hs-or span { color: var(--ll-paper-dim); }
#handshakePanel .hs-enter { display: flex; gap: 6px; }
#handshakePanel .hs-input,
#handshakePanel #_hsCodeIn {
  flex: 1;
  padding: 9px 10px;
  border: 1.5px solid var(--ll-panel-border) !important;
  border-radius: 9px;
  font-size: 16px;
  letter-spacing: 3px;
  text-align: center;
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
}
#handshakePanel .hs-go { padding: 9px 14px; }
#handshakePanel .hs-scan {
  width: 100%;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 9px;
  background: var(--ll-panel) !important;
  color: var(--ll-brass) !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ll-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#handshakePanel .hs-scan .ll-i { width: 14px; height: 14px; }
#handshakePanel .hs-video {
  display: none;
  width: 100%;
  border-radius: 12px;
  margin-top: 8px;
  background: #000;
}
#handshakePanel .hs-msg {
  font-size: 12px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 9px;
}
#handshakePanel .hs-msg.ok {
  background: color-mix(in srgb, var(--ll-brass) 16%, var(--ll-field)) !important;
  color: var(--ll-paper) !important;
}
#handshakePanel .hs-msg.bad {
  background: color-mix(in srgb, var(--ll-signal) 16%, var(--ll-field)) !important;
  color: var(--ll-paper) !important;
}
#handshakePanel .hs-hist-lab {
  font-size: 11px;
  font-weight: 800;
  color: var(--ll-paper-dim) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 18px 0 4px;
}
#handshakePanel .hs-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ll-panel-border);
}
#handshakePanel .hs-av,
#handshakePanel .hs-av-ph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
#handshakePanel .hs-av { object-fit: cover; }
#handshakePanel .hs-av-ph {
  background: var(--ll-brass);
  color: var(--ll-slate);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
#handshakePanel .hs-row-main { flex: 1; min-width: 0; }
#handshakePanel .hs-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ll-paper) !important;
}
#handshakePanel .hs-row-meta {
  font-size: 10.5px;
  color: var(--ll-paper-dim) !important;
}
#handshakePanel .hs-notme {
  padding: 3px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ll-paper-dim) !important;
  font-size: 10px;
  cursor: pointer;
}
#handshakePanel .hs-empty {
  text-align: center;
  color: var(--ll-paper-dim) !important;
  font-size: 12px;
  margin-top: 20px;
  line-height: 1.6;
}
#handshakePanel .hs-err {
  text-align: center;
  padding: 20px;
  color: var(--ll-signal) !important;
  font-size: 13px;
}
#handshakePanel .hs-qr {
  width: 190px;
  height: 190px;
  border-radius: 10px;
  background: #fff;
}
#handshakePanel .hs-digits {
  font-family: ui-monospace, monospace;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--ll-brass) !important;
  margin-top: 6px;
}
#handshakePanel .hs-confirm { margin-left: 8px; padding: 4px 12px; font-size: 12px; }

/* A3 — leftover chrome marks */
#lpsMapOptions.lps-map-opts {
  border-top: 1.5px solid var(--ll-panel-border) !important;
}
#lpsMapOptions #captureProtectRow,
#lpsMapOptions #lpsMatureToggleRow {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
}
#lpsMapOptions #captureProtectMode {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
#lpsMapOptions .ll-i,
#lpsMatureAgeNotice .ll-i { width: 14px; height: 14px; }
#courierLayerFab .ll-i { width: 18px; height: 18px; }
.qs-btn .ll-i { width: 14px; height: 14px; vertical-align: -2px; }
.fs-play-disc {
  background: rgba(0, 0, 0, .45);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-play-disc .ll-i,
.fs-linkvid-play .ll-i { width: 28px; height: 28px; mix-blend-mode: lighten; }
.mpi-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mpi-play .ll-i { width: 22px; height: 22px; mix-blend-mode: lighten; }
.pool-chrome-lab {
  font-size: 13px;
  font-weight: 700;
  color: #3730a3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pool-chrome-lab .ll-i { width: 14px; height: 14px; }
.pool-join-btn {
  width: 100%;
  margin-top: 7px;
  padding: 8px 12px;
  border: none;
  border-radius: 9px;
  background: var(--ll-brass);
  color: var(--ll-slate);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ll-font);
}
.pool-join-btn-sm { margin-top: 5px; padding: 6px 10px; font-size: 12px; }
.pool-join-btn .ll-i { width: 14px; height: 14px; mix-blend-mode: normal; }
#pv-glimpse-dir,
#pv-glimpse-cta,
#pv-nf-cta .dir,
#pv-write-btn,
#pv-route-title {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#pv-glimpse-dir .ll-i,
#pv-glimpse-cta .ll-i,
#pv-nf-cta .dir .ll-i,
#pv-write-btn .ll-i,
#pv-route-title .ll-i { width: 14px; height: 14px; }
#pv-glimpse-close.ll-x,
#pv-route-close.ll-x,
#pv-lightbox-close.ll-x,
#pv-nf-back.ll-x { width: 28px; height: 28px; }
[data-crtab] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
[data-crtab] .ll-i { width: 12px; height: 12px; }

.cart-qty-btn {
  background: var(--ll-panel) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.lp-add-card-form { background: var(--ll-field) !important; border-color: var(--ll-panel-border) !important; }

#nmPlaceSearchWrap, #nmPlaceRow {
  background: transparent !important;
  border-color: var(--ll-panel-border) !important;
}

/* Wave 2 docks — glass clusters. History lives in the grid only. */
#histFab,
#courierLayerFab { display: none !important; }

#mapFabStack,
#mapFabStackLeft,
#mapFabStackTop {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none;
}

/* ── The top-right instruments rail ──────────────────────────────────────
   Band 904 (map chrome 400-910, docs/z-index.md). It shares its first row
   with #quickSearchBar/900 and the upper-left rail/903 and sits one step above both.

   top is driven by --ll-under-header, which llSyncUnderHeader measures from
   the real header rather than guessing 56 — that is the only value that is
   right on a notched device, and the rail must not paint under the clock for
   the first frames of a cold start. */
#mapFabStackTop {
  position: fixed;
  top: var(--ll-under-header, 84px);
  right: calc(6px + var(--sa-right, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 904;
}
/* Everything that hides the bottom dock has to hide this one too, or the
   instruments float over the surface that took the screen. Three separate
   rules own that today; this is the fourth thing they now name. */
body.nm-composer    #mapFabStackTop,
body.cr-sheet-open  #mapFabStackTop,
body.ll-line-drawing #mapFabStackTop { display: none !important; }

/* ── The map button ──────────────────────────────────────────────────────
   Tap opens the panel, hold fans the modes. 36px rather than the 44 floor
   because it shares a row with the Panels button and the quick-search
   pills — and it is a configuration control pressed about once a week, not
   an instrument. The 44px floor exempts #qsLayerBtn by name for the same
   reason. (Historical: both are circles on --ll-ctrl since 09-30.)

   touch-action:none is load-bearing, exactly as it is on #llFeatureBtn:
   without it the hold-and-drag pans the map underneath. */
#llMapMenuBtn {
  width: var(--ll-ctrl, 44px); height: var(--ll-ctrl, 44px); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ll-panel-border);
  border-radius: 50%;
  background: var(--ll-docks-panel, var(--ll-panel));
  color: var(--ll-paper);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  transition: transform .15s, box-shadow .15s;
}
#llMapMenuBtn:active { transform: scale(.95); }
/* No translate companion to restate — unlike #llFeatureBtn this anchor is
   not centre-translated, so the armed state is a plain scale. */
#llMapMenuBtn.llf-armed { transform: scale(1.08); box-shadow: 0 8px 26px rgba(0,0,0,.34); }
/* Steps aside for the same reason the feature button does: every view lays a
   .ll-scrim at 8200 over this whole band. An !important needs an !important,
   in the same file. Deliberately NOT hidden by body.ar-on — in AR it is the
   way back to the map. */
body.ll-view-open #mapFabStackTop { display: none !important; }
/* The dock's glass (background/border/blur/glow) lives on ::before, not on
   .ll-dock itself. Every circular control button inside a dock relies on
   its OWN border-radius+overflow/contain/clip-path to crop its icon to a
   circle — and that kept failing on Retina/HiDPI Safari and Chrome (both
   Mac and iPhone; not reproducible in this session's 1x Chromium testing)
   even after three independent, individually-verified-correct clip
   mechanisms (overflow:hidden, contain:paint, clip-path:circle). The one
   thing all three attempts shared: a backdrop-filter ANCESTOR (.ll-dock
   itself). Rather than keep trying to force clipping to survive that
   ancestor, the blur now lives on a ::before layer instead — pseudo-
   elements are not ancestors of their element's real children, so the
   buttons no longer have a backdrop-filter anywhere in their ancestor
   chain at all. 10-03. */
.ll-dock {
  position: relative;
  /* Contains ::before's z-index:-1 to this dock's own stacking context, so
     the glass layer sits behind the buttons without escaping to stack
     behind the map or other page content. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ll-dock-gap, 8px);
  padding: var(--ll-dock-pad, 8px);
  pointer-events: auto;
}
.ll-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ll-panel);
  border: 1px solid var(--ll-panel-border);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), var(--ll-glow-brass);
}

.hp-tab, .dp-tab, .gm-tab, .nm-page-tab, .ms-btn, .nd-tab {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 2;
}

.hp-feed, #archiveList, .gm-body, .gb-body, #noteListPanelBody, #groupsPanelList {
  overscroll-behavior: contain;
}

.auth-container {
  background:
    linear-gradient(rgba(12, 14, 20, 0.72), rgba(12, 14, 20, 0.82)),
    var(--ll-auth-bg-image) center / cover no-repeat !important;
}

/* Legible gold glow on HUD type */
.ll-head, .ll-wordmark, .gm-title, .gb-title, #pv-logo, .hs-lab {
  color: var(--ll-brass-hot) !important;
  text-shadow: 0 0 12px rgba(253, 158, 2, 0.55), 0 1px 2px rgba(0, 0, 0, 0.85);
}
header, .ll-sheet, #mapViewPanel, #hudStudio, .llf-row {
  text-shadow: 0 0 8px rgba(253, 158, 2, 0.22);
}


/* S0 — custom HUD scrollbars (brass thumb, field track; Light + Dark) */
.ll-sheet,
#mapViewPanel, #filterPanel, #groupsPanel, #groupsPanelList,
#notifSettingsPanel, #meetLocalsPanel, #noteListPanelBody,
#messengerPanel, #webResultsList, #hudStudioBody, .nm-body, .lp-panel,
#liveProfileSheet, #locPrivSheet, #locPrivSheet .loc-priv-body,
.exc-picker-list, .priv-cfg-sheet, #notePinSheet, #notePinSheet .nps-body,
#handshakePanel, #handshakePanel .hs-body,
.hp-feed, #archiveList, .gm-body, .gb-body,
.user-dropdown, #search-results, #qsEditPanel, #qsShareBox,
.nr-shell, .mapboxgl-popup-content,
#templatePickerDropdown, #nmPlaceResults, .tp-browse,
.tp-cat-chips, .tp-search-results,
#evtModal, #evtCardList, .cl-dropdown,
.dp-timeline, #dpTimeGrid, #lpSettingsPane,
.fs-game-frame, #fsInfoPanelText.fs-text-open,
#notifList, #dlvPickList, .fste-mentions,
#saveTplModal, #dpEditSlotSheet, #dpNewSlotSheet, #dpLinkLocSheet,
#schedPickerSheet, #slotTypeSheet,
#dpProposedConfirm, #dpVisitStrip, .route-ev-scroll,
#pinDesignSheet, #pinDesignSheet .pds-body,
#pv-glimpse-body, #pv-route-steps, #pv-lp-body, #pv-nf-body,
#pv-glimpse, #pv-note-full, #pv-route,
#wxSheet, #wxSheetPeriods, #wxSheetAlerts, #wxSheetHourlyList {
  scrollbar-width: thin;
  scrollbar-color: var(--ll-scroll-thumb) var(--ll-scroll-track);
}
.ll-sheet::-webkit-scrollbar,
#mapViewPanel::-webkit-scrollbar,
#filterPanel::-webkit-scrollbar,
#groupsPanel::-webkit-scrollbar,
#groupsPanelList::-webkit-scrollbar,
#notifSettingsPanel::-webkit-scrollbar,
#meetLocalsPanel::-webkit-scrollbar,
#noteListPanelBody::-webkit-scrollbar,
#messengerPanel::-webkit-scrollbar,
#hudStudioBody::-webkit-scrollbar,
.nm-body::-webkit-scrollbar,
.lp-panel::-webkit-scrollbar,
#liveProfileSheet::-webkit-scrollbar,
#locPrivSheet::-webkit-scrollbar,
#locPrivSheet .loc-priv-body::-webkit-scrollbar,
.exc-picker-list::-webkit-scrollbar,
.priv-cfg-sheet::-webkit-scrollbar,
#notePinSheet .nps-body::-webkit-scrollbar,
#handshakePanel .hs-body::-webkit-scrollbar,
.hp-feed::-webkit-scrollbar,
#archiveList::-webkit-scrollbar,
.gm-body::-webkit-scrollbar,
.gb-body::-webkit-scrollbar,
.user-dropdown::-webkit-scrollbar,
#search-results::-webkit-scrollbar,
#qsEditPanel::-webkit-scrollbar,
.mapboxgl-popup-content::-webkit-scrollbar,
.tp-browse::-webkit-scrollbar,
#templatePickerDropdown::-webkit-scrollbar,
#nmPlaceResults::-webkit-scrollbar,
.dp-timeline::-webkit-scrollbar,
#notifList::-webkit-scrollbar,
#evtModal::-webkit-scrollbar,
#pinDesignSheet .pds-body::-webkit-scrollbar,
#pv-glimpse-body::-webkit-scrollbar,
#pv-route-steps::-webkit-scrollbar,
#pv-lp-body::-webkit-scrollbar,
#pv-nf-body::-webkit-scrollbar,
#wxSheet::-webkit-scrollbar,
#wxSheetPeriods::-webkit-scrollbar,
#wxSheetAlerts::-webkit-scrollbar,
#wxSheetHourlyList::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ll-sheet::-webkit-scrollbar-track,
#mapViewPanel::-webkit-scrollbar-track,
#filterPanel::-webkit-scrollbar-track,
#groupsPanel::-webkit-scrollbar-track,
#meetLocalsPanel::-webkit-scrollbar-track,
.nm-body::-webkit-scrollbar-track,
#liveProfileSheet::-webkit-scrollbar-track,
#locPrivSheet .loc-priv-body::-webkit-scrollbar-track,
.exc-picker-list::-webkit-scrollbar-track,
#notePinSheet .nps-body::-webkit-scrollbar-track,
#handshakePanel .hs-body::-webkit-scrollbar-track,
.mapboxgl-popup-content::-webkit-scrollbar-track,
.tp-browse::-webkit-scrollbar-track,
#hudStudioBody::-webkit-scrollbar-track,
#pv-glimpse-body::-webkit-scrollbar-track,
#wxSheet::-webkit-scrollbar-track {
  background: var(--ll-scroll-track);
  border-radius: 6px;
}
.ll-sheet::-webkit-scrollbar-thumb,
#mapViewPanel::-webkit-scrollbar-thumb,
#filterPanel::-webkit-scrollbar-thumb,
#groupsPanel::-webkit-scrollbar-thumb,
#groupsPanelList::-webkit-scrollbar-thumb,
#notifSettingsPanel::-webkit-scrollbar-thumb,
#meetLocalsPanel::-webkit-scrollbar-thumb,
#noteListPanelBody::-webkit-scrollbar-thumb,
#messengerPanel::-webkit-scrollbar-thumb,
#hudStudioBody::-webkit-scrollbar-thumb,
.nm-body::-webkit-scrollbar-thumb,
.lp-panel::-webkit-scrollbar-thumb,
#liveProfileSheet::-webkit-scrollbar-thumb,
#locPrivSheet::-webkit-scrollbar-thumb,
#locPrivSheet .loc-priv-body::-webkit-scrollbar-thumb,
.exc-picker-list::-webkit-scrollbar-thumb,
.priv-cfg-sheet::-webkit-scrollbar-thumb,
#notePinSheet .nps-body::-webkit-scrollbar-thumb,
#handshakePanel .hs-body::-webkit-scrollbar-thumb,
.hp-feed::-webkit-scrollbar-thumb,
#archiveList::-webkit-scrollbar-thumb,
.gm-body::-webkit-scrollbar-thumb,
.gb-body::-webkit-scrollbar-thumb,
.user-dropdown::-webkit-scrollbar-thumb,
#search-results::-webkit-scrollbar-thumb,
#qsEditPanel::-webkit-scrollbar-thumb,
.mapboxgl-popup-content::-webkit-scrollbar-thumb,
.tp-browse::-webkit-scrollbar-thumb,
#templatePickerDropdown::-webkit-scrollbar-thumb,
#nmPlaceResults::-webkit-scrollbar-thumb,
.dp-timeline::-webkit-scrollbar-thumb,
#notifList::-webkit-scrollbar-thumb,
#evtModal::-webkit-scrollbar-thumb,
#pinDesignSheet .pds-body::-webkit-scrollbar-thumb,
#pv-glimpse-body::-webkit-scrollbar-thumb,
#pv-route-steps::-webkit-scrollbar-thumb,
#pv-lp-body::-webkit-scrollbar-thumb,
#pv-nf-body::-webkit-scrollbar-thumb,
#wxSheet::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ll-brass), var(--ll-brass-dim));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#mapViewOverlay.ll-open { display: block !important; z-index: 9998; }
/* ── The map view drawer ─────────────────────────────────────────────────
   Moved out of index.html's inline <style> so the guest map gets the same
   drawer: preview.html is a separate app that shares only this file and
   hud.js. The theming block below layers over these. */
#mapViewPanel { position:fixed; top:var(--ll-under-header, 56px); right:0; bottom:0; left:auto; width:300px; max-width:92vw; height:calc(100dvh - var(--ll-under-header, 56px)); padding-bottom:var(--sa-bottom, 0px); border-radius:12px 0 0 12px; box-shadow:-4px 0 32px rgba(0,0,0,0.18); z-index:9999; overflow-y:auto; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
#mapViewPanel.mvp-open { transform:translateX(0); }
.mvp-section { padding:12px 14px; border-bottom:1px solid #f3f4f6; }
.mvp-section:last-child { border-bottom:none; }
.mvp-title { font-size:10px; font-weight:700; color:#9ca3af; letter-spacing:0.6px; text-transform:uppercase; margin-bottom:8px; }
.mvp-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.mvp-style-btn { padding:8px 6px; border-radius:8px; border:1.5px solid #e5e7eb; background:white; font-size:12px; cursor:pointer; text-align:center; transition:all 0.1s; line-height:1.3; }
.mvp-style-btn:hover:not(.mvp-active) { background:#f9fafb; }
.mvp-style-btn.mvp-active { border-color:#667eea; background:#eef2ff; color:#4f46e5; font-weight:600; }
.ms-beta { font-size:7px; font-weight:800; opacity:.75; margin-left:1px; top:-.4em; }
#mapViewPanel .mvp-modes { flex-direction:row; width:100%; }
#mapViewPanel .mvp-modes .ms-btn { flex:1; width:auto; height:46px; }
#mapViewPanel .mvp-modes .ms-btn + .ms-btn { border-top:none; border-left:1px solid rgba(0,0,0,0.07); }
body.dark #mapViewPanel .mvp-modes .ms-btn + .ms-btn { border-top-color:transparent; border-left-color:rgba(255,255,255,0.08); }
.ms-btn { width:44px; height:40px; border:none; cursor:pointer; font-size:18px;
  background:var(--qs-btn-bg, rgba(255,255,255,0.96)); color:#374151; padding:0;
  display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.ms-btn + .ms-btn { border-top:1px solid rgba(0,0,0,0.07); }
.ms-btn.active { background:linear-gradient(135deg,var(--qs-f1,#667eea),var(--qs-f2,#764ba2)); }
.ms-lbl { font-size:7.5px; font-weight:700; letter-spacing:.02em; line-height:1; margin-top:1px;
  color:#6b7280; text-transform:uppercase; }
.ms-btn.active .ms-lbl { color:rgba(255,255,255,.92); }
/* A mode the guest map cannot run. Dimmed rather than hidden, and still
   pressable — pressing it is how you find out what it would take. */
.ms-btn-locked { opacity:.55; }
.ms-btn-locked .ll-i { filter:grayscale(1); }
.ms-btn > span { display:flex; flex-direction:column; align-items:center; }
body.dark .ms-btn + .ms-btn { border-top-color:rgba(255,255,255,0.08); }
body.dark .ms-lbl { color:#9ca3af; }
body.dark .mvp-section { border-bottom-color: #2d3748 !important; }
body.dark .mvp-title { color: #64748b !important; }
body.dark .mvp-style-btn { background: #252b3b !important; border-color: #334155 !important; color: #cbd5e1 !important; }

#mapViewPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
  border-left: 1px solid var(--ll-panel-border) !important;
}
#mapViewPanel .ll-sheet-head { padding: 14px 14px 10px; }
#mapViewPanel .mvp-switch {
  min-width: 38px !important;
  min-height: 22px !important;
  width: 38px !important;
  height: 22px !important;
}

#hudStudio {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding-bottom: var(--sa-bottom, 0px);   /* see #archiveSheet */
  max-height: 78vh;
  z-index: 9600;
  background: var(--ll-panel);
  border: 1px solid var(--ll-panel-border);
  border-radius: 18px 18px 0 0;
  color: var(--ll-paper);
  font-family: var(--ll-font);
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--ll-glow-brass);
}
#hudStudio.ll-open { display: flex; }
#hudStudioOverlay.ll-open { display: block !important; z-index: 9599; }
.hs-lead { font-size: 13px; color: var(--ll-paper-dim); line-height: 1.5; margin: 0 0 14px; }
.hs-lab { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 12px 0 6px; }
/* Quick / Advanced: two entry points into the same theme fields, not two
   different themes. The active one gets the brass treatment every other
   ".on" toggle in this panel already uses. */
.hs-mode { display: flex; gap: 8px; margin: 2px 0 14px; }
.hs-mode-btn {
  flex: 1; padding: 9px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--ll-panel-border); background: var(--ll-field);
  color: var(--ll-paper); font-family: var(--ll-font); font-size: 13px; font-weight: 700;
}
.hs-mode-btn.on { border-color: var(--ll-brass); color: var(--ll-brass); box-shadow: var(--ll-glow-brass); }
/* The suggestion, shown ON the background it was suggested for — the whole
   point is seeing it read, not reading a hex value. */
.hq-preview {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px; border-radius: 12px; margin: 4px 0 10px;
  border: 1px solid var(--ll-panel-border);
}
.hq-swatch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid currentColor; background: rgba(255, 255, 255, 0.08);
  font-family: var(--ll-font); font-size: 13px; font-weight: 700;
}
.hq-swatch .ll-i { width: 16px; height: 16px; }
.hq-glow { width: 30px; height: 30px; border-radius: 50%; cursor: default; }
#hudStudio input[type="range"] { width: 100%; accent-color: var(--ll-brass); }
#hudStudio input[type="color"] { width: 64px; height: 36px; border: 1px solid var(--ll-panel-border); background: var(--ll-slate); border-radius: 8px; }
#hudStudio select {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  background: var(--ll-field); color: var(--ll-paper);
  border: 1px solid var(--ll-panel-border); font-family: var(--ll-font);
}
.hs-packs { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-pack {
  padding: 8px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--ll-panel-border); background: var(--ll-field);
  color: var(--ll-paper); font-family: var(--ll-font); font-size: 13px; font-weight: 600;
}
.hs-pack.on { border-color: var(--ll-brass); color: var(--ll-brass); box-shadow: var(--ll-glow-brass); }
/* Preset looks: each swatch is painted with its own ground and labelled in
   its own accent, so the row is its own preview. */
.hs-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.hs-preset {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid transparent;
  min-width: 96px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform .12s;
}
.hs-preset:active { transform: scale(.96); }
.hs-preset-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
                 box-shadow: 0 0 6px rgba(0, 0, 0, 0.35); }
.hs-preset-lbl { font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* Centre button: the wheel's spokes as rows — grip, glyph, label, eye. */
.hs-wheel { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.hs-spoke {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  background: var(--ll-panel); border: 1px solid var(--ll-panel-border);
  color: var(--ll-paper); font-size: 13px;
  transition: transform .15s, opacity .15s;
  touch-action: none;
}
.hs-spoke .ll-i { width: 20px; height: 20px; flex-shrink: 0; }
.hs-spoke-lbl { flex: 1; font-weight: 600; }
.hs-spoke-grip { cursor: grab; flex-shrink: 0; }
.hs-spoke-drag { transition: none; opacity: .85; z-index: 2; position: relative;
                 box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.hs-spoke-eye { background: none; border: none; cursor: pointer; padding: 4px;
                border-radius: 8px; color: var(--ll-paper); }
.hs-spoke-eye .ll-i { width: 18px; height: 18px; }
/* Off the wheel: dimmed all the way down the row, so the state needs no
   second glyph — there is an eye icon but no eye-off in the set. */
.hs-spoke-off { opacity: .45; }
.hs-spoke-off .hs-spoke-eye { opacity: .9; }

/* Text size steps. The A grows with the step it applies, which is the only
   preview that means anything to the person who needs it. */
.hs-scales { display: flex; gap: 8px; margin: 4px 0 10px; }
.hs-scale {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 12px; cursor: pointer;
  background: var(--ll-panel); color: var(--ll-paper);
  border: 1px solid var(--ll-panel-border);
  font-size: 10px;
}
.hs-scale .hs-scale-a { font-weight: 800; line-height: 1; }
.hs-scale.on { border-color: var(--ll-brass); box-shadow: inset 0 0 0 1px var(--ll-brass); }
/* Controls: the size step shows as a disc the size of the step; the shown
   list is one row per control with its own glyph, dimmed when it is off. */
.hs-size-dot { display: block; border-radius: 50%; background: var(--ll-brass); box-shadow: var(--ll-glow-brass); margin: 2px 0 3px; }
.hs-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0 10px; cursor: pointer; }
.hs-toggle input, .hs-show-row input { accent-color: var(--ll-brass); width: 16px; height: 16px; margin: 0; }
.hs-show { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.hs-show-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px;
  background: var(--ll-panel); border: 1px solid var(--ll-panel-border); font-size: 13px; cursor: pointer; }
.hs-show-row .ll-i { width: 20px; height: 20px; flex-shrink: 0; }
.hs-show-off { opacity: .5; }

/* ── Text size, applied ──────────────────────────────────────────────────
   zoom on the SCROLL BODIES and popup content, never on the fixed containers:
   a container with vw/dvh-derived geometry overflows the screen at 1.3x,
   while a scroll body just scrolls. Text and tap targets grow; the frames
   stay where the layout arithmetic put them.
   The arc wheels are deliberately absent — their item positions are computed
   in px by the gesture engine, and zooming what JS just measured is how a
   drag stops landing where the finger is. */
.ll-scroll,
.ll-sheet-head,
.mapboxgl-popup-content,
#userDropdown,
#qsLayerPicker,
#fsInfoPanel {
  zoom: var(--ll-zoom, 1);
}
/* The handful of zoomed nodes that ARE fixed containers with viewport-derived
   caps: divide the cap by the zoom so visual size stays inside the screen.
   At the default scale these are identical to the rules they override. */
#notifSettingsPanel, #meetLocalsPanel {
  max-width: calc(95vw / var(--ll-zoom, 1)) !important;
}
#friendsContent { max-height: calc(72vh / var(--ll-zoom, 1)) !important; }
#groupProfileContent { max-height: calc(88vh / var(--ll-zoom, 1)) !important; }

.hs-reset {
  margin-top: 18px; width: 100%; padding: 10px;
  border-radius: 10px; border: 1px solid var(--ll-panel-border);
  background: transparent; color: var(--ll-paper-dim); cursor: pointer; font-family: var(--ll-font);
}

#llTip {
  position: fixed; z-index: 2147483000; pointer-events: none;
  max-width: 240px; padding: 7px 11px;
  background: rgba(12, 14, 20, 0.94);
  border: 1px solid var(--ll-panel-border);
  border-radius: 8px;
  color: var(--ll-brass-hot);
  font-family: var(--ll-font-display);
  font-size: 12px; letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(253, 158, 2, 0.55);
  box-shadow: var(--ll-glow-brass);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
}
#llTip.ll-tip-on { opacity: 1; transform: translateY(0); }

/* Additive map/HUD peek (hover + long-press). Not a sticky sheet. */
#llPeek {
  position: fixed; z-index: 2147483001; pointer-events: none;
  max-width: 260px; padding: 8px 12px;
  background: rgba(12, 14, 20, 0.94);
  border: 1px solid var(--ll-panel-border);
  border-radius: 10px;
  color: var(--ll-brass-hot);
  font-family: var(--ll-font-display);
  font-size: 13px; letter-spacing: 0.03em;
  box-shadow: var(--ll-glow-brass);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
  display: none;
}
#llPeek.on { display: block; opacity: 1; transform: translateY(0); }
#llPeek .ll-peek-title { font-weight: 700; line-height: 1.3; }
#llPeek .ll-peek-meta { font-size: 11.5px; font-weight: 500; opacity: 0.82; margin-top: 3px; color: var(--ll-paper); }
/* Mobile long-press: slim dock toast, not a pin-centered bubble. */
#llPeek.ll-peek-dock {
  max-width: none;
  right: 12px;
  width: auto;
  border-radius: 14px;
  padding: 10px 14px calc(10px + var(--sa-bottom, 0px));
  transform: none;
  text-align: left;
}
.mkr.ll-venue-chip,
.mapboxgl-marker:has(> .ll-venue-n) { overflow: visible !important; }
.ll-venue-n {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #7c3aed; color: #fff; font: 700 10px/16px system-ui, sans-serif;
  text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: none; z-index: 6;
  display: inline-block;
}
.ll-venue-sheet .ll-venue-row, .ll-venue-list .ll-venue-row {
  display: flex; justify-content: space-between; gap: 8px; width: 100%;
  text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--ll-panel-border, #e5e7eb);
  padding: 8px 0; cursor: pointer; font-family: inherit; color: inherit;
}
.ll-venue-head {
  display: flex; justify-content: space-between; width: 100%;
  background: transparent; border: none; padding: 8px 0; cursor: pointer;
  font: 700 13px/1.3 inherit; color: inherit; text-align: left;
}
.ll-venue-body { display: none; padding: 0 0 6px 8px; }
.ll-venue-group.open .ll-venue-body { display: block; }
.ll-venue-row-meta { font-size: 11.5px; opacity: 0.75; white-space: nowrap; }

html[data-ll-pack="steel"] .ll-i { filter: grayscale(1) brightness(1.25) contrast(1.15); }
html[data-ll-pack="copper"] .ll-i { filter: hue-rotate(-28deg) saturate(1.35) brightness(1.05); }
html[data-ll-pack="jade"] .ll-i { filter: hue-rotate(88deg) saturate(0.95) brightness(1.05); }
html[data-ll-pack="bone"] .ll-i { filter: grayscale(1) brightness(1.65) contrast(0.82) sepia(0.15); }
[data-ll-pack="steel"] .ll-i { filter: grayscale(1) brightness(1.25) contrast(1.15); }
[data-ll-pack="copper"] .ll-i { filter: hue-rotate(-28deg) saturate(1.35) brightness(1.05); }
[data-ll-pack="jade"] .ll-i { filter: hue-rotate(88deg) saturate(0.95) brightness(1.05); }
[data-ll-pack="bone"] .ll-i { filter: grayscale(1) brightness(1.65) contrast(0.82) sepia(0.15); }
/* "custom" is not one of the five named looks above — its filter comes from
   --ll-icon-filter, a value hud.js computes (iconFilterFor()) rather than
   one of these fixed recipes, set whenever the Quick picker's icon colour
   isn't a match for any named pack. Same two-selector duplication as the
   others (root vs. per-surface data-ll-pack). */
html[data-ll-pack="custom"] .ll-i { filter: var(--ll-icon-filter, none); }
[data-ll-pack="custom"] .ll-i { filter: var(--ll-icon-filter, none); }

/* Per-surface token remap. Root values live on --ll-*-root so nested
   --ll-brass: var(--ll-docks-brass, var(--ll-brass)) cannot cycle. */
[data-ll-surface="docks"] {
  --ll-brass: var(--ll-docks-brass, var(--ll-brass-root));
  --ll-panel: var(--ll-docks-panel, var(--ll-panel-root, rgba(12, 14, 20, 0.78)));
  --ll-panel-img: var(--ll-docks-panel-img, var(--ll-panel-img-root, linear-gradient(rgba(12, 14, 20, 0.78), rgba(12, 14, 20, 0.78))));
  --ll-panel-border: var(--ll-docks-border, var(--ll-border-root, rgba(253, 158, 2, 0.28)));
}
[data-ll-surface="sheets"] {
  --ll-brass: var(--ll-sheets-brass, var(--ll-brass-root));
  --ll-panel: var(--ll-sheets-panel, var(--ll-panel-root, rgba(12, 14, 20, 0.78)));
  --ll-panel-img: var(--ll-sheets-panel-img, var(--ll-panel-img-root, linear-gradient(rgba(12, 14, 20, 0.78), rgba(12, 14, 20, 0.78))));
  --ll-panel-border: var(--ll-sheets-border, var(--ll-border-root, rgba(253, 158, 2, 0.28)));
}
[data-ll-surface="composer"] {
  --ll-brass: var(--ll-composer-brass, var(--ll-brass-root));
  --ll-panel: var(--ll-composer-panel, var(--ll-panel-root, rgba(12, 14, 20, 0.78)));
  --ll-panel-img: var(--ll-composer-panel-img, var(--ll-panel-img-root, linear-gradient(rgba(12, 14, 20, 0.78), rgba(12, 14, 20, 0.78))));
  --ll-panel-border: var(--ll-composer-border, var(--ll-border-root, rgba(253, 158, 2, 0.28)));
}
[data-ll-surface="dialogs"] {
  --ll-brass: var(--ll-dialogs-brass, var(--ll-brass-root));
  --ll-panel: var(--ll-dialogs-panel, var(--ll-panel-root, rgba(12, 14, 20, 0.78)));
  --ll-panel-img: var(--ll-dialogs-panel-img, var(--ll-panel-img-root, linear-gradient(rgba(12, 14, 20, 0.78), rgba(12, 14, 20, 0.78))));
  --ll-panel-border: var(--ll-dialogs-border, var(--ll-border-root, rgba(253, 158, 2, 0.28)));
}
[data-ll-surface="browse"] {
  --ll-brass: var(--ll-browse-brass, var(--ll-brass-root));
  --ll-panel: var(--ll-browse-panel, var(--ll-panel-root, rgba(12, 14, 20, 0.78)));
  --ll-panel-img: var(--ll-browse-panel-img, var(--ll-panel-img-root, linear-gradient(rgba(12, 14, 20, 0.78), rgba(12, 14, 20, 0.78))));
  --ll-panel-border: var(--ll-browse-border, var(--ll-border-root, rgba(253, 158, 2, 0.28)));
}
[data-ll-surface="search"] {
  --ll-brass: var(--ll-search-brass, var(--ll-brass-root));
  --ll-panel: var(--ll-search-panel, var(--ll-panel-root, rgba(12, 14, 20, 0.78)));
  --ll-panel-img: var(--ll-search-panel-img, var(--ll-panel-img-root, linear-gradient(rgba(12, 14, 20, 0.78), rgba(12, 14, 20, 0.78))));
  --ll-panel-border: var(--ll-search-border, var(--ll-border-root, rgba(253, 158, 2, 0.28)));
}

/* Mapbox's own top-left controls under the real header, not a ghost QS band.
   (The geo toast and the low-results bar used to be here too; the top lane
   places them now — LLLane in hud.js.) */
.mapboxgl-ctrl-top-left {
  top: calc(var(--ll-under-header) + var(--ll-qs-band)) !important;
}

/* Post → place template rows (was frosted white). */
.fab-tpl-item {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), var(--ll-glow-brass) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  font-family: var(--ll-font) !important;
}
.fab-tpl-icon {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border);
  overflow: hidden;
}
.fab-tpl-icon .ll-i { width: 18px; height: 18px; border-radius: 4px; }
.fab-tpl-themed .fab-tpl-icon {
  background: rgba(253, 158, 2, 0.16) !important;
  border-color: var(--ll-brass) !important;
}
.fab-tpl-blank .fab-tpl-icon { background: var(--ll-field) !important; }
#fabTplScrollArea.can-scroll::before {
  background: linear-gradient(to bottom, rgba(12, 14, 20, 0.95), transparent) !important;
}
#fabTplLayerLabel { color: var(--ll-brass) !important; }



.mvp-style-btn {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
  border-radius: 10px !important;
  padding: 10px 8px !important;
  font-family: var(--ll-font) !important;
}
.mvp-style-btn .ll-i { width: 28px; height: 28px; border-radius: 8px; }
.mvp-style-btn:hover:not(.mvp-active) {
  background: rgba(253, 158, 2, 0.1) !important;
  border-color: var(--ll-brass) !important;
}
.mvp-style-btn.mvp-active {
  border-color: var(--ll-brass) !important;
  color: var(--ll-brass) !important;
  background: rgba(253, 158, 2, 0.16) !important;
  box-shadow: var(--ll-glow-brass) !important;
}
.mvp-title { color: var(--ll-paper-dim) !important; }
.mvp-section { border-bottom-color: rgba(253, 158, 2, 0.12) !important; }

.hs-surfs, .hs-sets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.hs-surf, .hs-set {
  padding: 8px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--ll-panel-border); background: var(--ll-field);
  color: var(--ll-paper); font-family: var(--ll-font); font-size: 13px; font-weight: 600;
}
.hs-sets { gap: 10px; }
.hs-set {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 14px; min-width: 88px;
}
.hs-set .hs-set-preview,
.hs-set .ll-i {
  width: 56px; height: 56px; border-radius: 12px;
}
.hs-set .hs-set-lab { font-size: 12px; letter-spacing: 0.02em; }
.hs-surf.on, .hs-set.on { border-color: var(--ll-brass); color: var(--ll-brass); box-shadow: var(--ll-glow-brass); }
.hs-hint { font-size: 11px; color: var(--ll-paper-dim); margin: -4px 0 8px; line-height: 1.4; }
.hs-epacks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.hs-epack {
  padding: 8px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--ll-panel-border); background: var(--ll-field);
  color: var(--ll-paper); font-family: var(--ll-font); font-size: 13px; font-weight: 600;
}
.hs-epack.on { border-color: var(--ll-brass); color: var(--ll-brass); box-shadow: var(--ll-glow-brass); }
.hs-inherit {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ll-paper-dim); margin: 8px 0 12px;
}
.hs-look { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.hs-look-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--ll-panel-border); background: var(--ll-field);
  color: var(--ll-paper); font-family: var(--ll-font); font-size: 12px; font-weight: 600;
}
.hs-look-btn .ll-i { width: 28px; height: 28px; border-radius: 8px; }
.hs-look-btn.on { border-color: var(--ll-brass); color: var(--ll-brass); box-shadow: var(--ll-glow-brass); }

#filterPanel [style*="background:#fafafa"],
#filterPanel [style*="background: #fafafa"] {
  background: var(--ll-field) !important;
}
#filterPanel [style*="position:sticky"] {
  background: var(--ll-panel) !important;
  border-bottom-color: rgba(253, 158, 2, 0.14) !important;
}

/* 30%, not 92% (09-26 #6, owner: "the map shift behind is too dark (probably
   a HUD thing)" — it was). #fsCard paints its own black, so this ground only
   ever shows in the gap while one card leaves and the next arrives — which is
   exactly when the map is moving to the next note, and should be seen. */
#fsOverlay {
  background: rgba(12, 14, 20, 0.30) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
}
/* ...but NOT while peeking. #fsOverlay is inset:0, so that ground covers the
   whole viewport — right for full-screen browse, and the exact opposite of
   what peek is for: a card at the bottom with the map still readable behind
   it. Nothing is lost by dropping it, because everything visible in peek
   paints its own ground already (#fsCard is black, #fsInfoPanel is its own
   translucent panel). The overlay's colour and font stay — only the fill goes. */
#fsOverlay.fs-peek-on {
  background: transparent !important;
}

.input-group .icon,
.ob-field .f-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.input-group .icon .ll-i,
.ob-field .f-icon .ll-i,
#geoNavToast .ll-i {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.qs-share-copy {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.qs-share-copy .ll-i { width: 16px; height: 16px; }
#qsShareBox h3 {
  color: var(--ll-paper) !important;
  font-family: var(--ll-font-display) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

#dmImgBtn, #dmVidBtn, #dmMicBtn, #dmPlaceBtn {
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#dmImgBtn .ll-i, #dmVidBtn .ll-i, #dmMicBtn .ll-i, #dmPlaceBtn .ll-i,
#messengerSendBtn .ll-i { width: 18px; height: 18px; }
.ns-row-label .ll-i, .fsovm-item .ll-i, .toggle-pw .ll-i, #pwToggle .ll-i,
#notifDrawer .ll-i, #lpTabSettings .ll-i { width: 16px; height: 16px; }
.fsovm-item { display: flex; align-items: center; gap: 8px; }
#messengerInputArea {
  background: var(--ll-panel) !important;
  border-top-color: rgba(253, 158, 2, 0.14) !important;
}
#messengerConvList, #messengerThread {
  background: transparent !important;
  color: var(--ll-paper) !important;
}
#messengerSendBtn {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none !important;
}
#fsCloseBtn {
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
.fs-info-act .ll-i { width: 16px; height: 16px; }
#fsPlayIcon .ll-i { width: 16px; height: 16px; }
#dirSheetTitle .ll-i { width: 16px; height: 16px; }

/* Fullscreen: a desktop-only side control, vertically centred.
   This lane used to hold the zoom buttons too. They are gone — the flight pads
   are the zoom now, and pinch, scroll, double-click and the keyboard all still
   zoom a plain map — so what is left is fullscreen alone, in the same place.
   index.html hides .mapboxgl-ctrl-top-right entirely under 768px, and that
   stays: there is no fullscreen worth having on a phone either. */
.mapboxgl-ctrl-top-right {
  top: 50% !important;
  right: calc(10px + var(--sa-right, 0px)) !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
  margin: 0 !important;
}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.mapboxgl-ctrl-fullscreen,
.mapboxgl-ctrl-shrink {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--ll-docks-panel, var(--ll-panel)) !important;
  border: 1px solid var(--ll-docks-border, var(--ll-panel-border)) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), var(--ll-glow-brass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 0 !important;
  padding: 0 !important;
}
.mapboxgl-ctrl-fullscreen:hover,
.mapboxgl-ctrl-shrink:hover {
  transform: scale(1.08);
}
.mapboxgl-ctrl-group button + button {
  border-top: none !important;
}
.mapboxgl-ctrl-icon {
  filter: none !important;
  background-color: transparent !important;
  background-size: 22px 22px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-block !important;
}
.mapboxgl-ctrl-group button svg { display: none !important; }
.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
  background-image: url("/static/hud/icons/sets/classic/expand.png") !important;
}
.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
  background-image: url("/static/hud/icons/sets/classic/shrink.png") !important;
}
html[data-ll-set="relief"] .mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
  background-image: url("/static/hud/icons/sets/relief/expand.png") !important;
}
html[data-ll-set="relief"] .mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
  background-image: url("/static/hud/icons/sets/relief/shrink.png") !important;
}
/* Locate control: the same dock pill, never Mapbox default white. */
.mapboxgl-ctrl-group .ll-locate-btn,
button.ll-locate-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--ll-docks-panel, var(--ll-panel)) !important;
  border: 1px solid var(--ll-docks-border, var(--ll-panel-border)) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), var(--ll-glow-brass) !important;
  color: var(--ll-paper) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
button.ll-locate-btn .ll-i { width: 22px; height: 22px; }

.np-act {
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.np-act.green, .np-act.orange, .np-act.indigo, .np-act.blue {
  background: var(--ll-panel) !important;
  border-color: var(--ll-panel-border) !important;
}
.np-act .ll-i { width: 16px; height: 16px; }
.np-act-label { color: var(--ll-paper-dim) !important; }
.npo-item {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
.npo-item .ll-i { width: 14px; height: 14px; margin-right: 6px; }
.np-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ll-panel) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--ll-brass) !important;
  font-weight: 600;
  cursor: pointer;
}
.np-go .ll-i { width: 12px; height: 12px; }
#fsPlayIcon .ll-i { width: 16px; height: 16px; }

/* ── HARD-FOCUS: Advanced Search ── */
/* The top padding carries the status-bar inset because this panel starts at
   top:0 and the app is edge-to-edge on targetSdk 36 — without it the title and
   the close button sit under the clock and the battery. This exact bug was
   fixed once before, on the old filter header, and came back when the HUD
   rework replaced that header with .fl-hdr. It is invisible on the emulator
   here (WebView 124 takes the padded branch, where every inset reads 0) and
   visible on every real phone (WebView 140+ goes full-bleed). */
#filterPanel .fl-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + var(--sa-top, 0px)) 16px 14px;
  border-bottom: 1px solid rgba(253, 158, 2, 0.14);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ll-panel) !important;
}
#filterPanel .fl-saved-bar {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(253, 158, 2, 0.12);
  background: var(--ll-field) !important;
}
#filterPanel .fl-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
#filterPanel .fl-tool .ll-i { width: 14px; height: 14px; }
#filterPanel .fl-apply {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--ll-glow-brass);
}
#filterPanel .fl-apply .ll-i { width: 16px; height: 16px; }
#filterPanel .fl-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: transparent !important;
  color: var(--ll-paper-dim) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 8px;
  cursor: pointer;
}
#filterPanel .fl-add-include,
#filterPanel .fl-add-exclude {
  flex: 1;
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--ll-field) !important;
}
#filterPanel .fl-add-include {
  color: var(--ll-place-hot) !important;
  border: 1px dashed var(--ll-place) !important;
}
#filterPanel .fl-add-exclude {
  color: var(--ll-signal) !important;
  border: 1px dashed var(--ll-signal) !important;
}
#filterPanel .fl-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--ll-paper-dim) !important;
  font-size: 14px;
}
#filterPanel .fl-hint { font-size: 11px; color: var(--ll-paper-dim) !important; margin-top: 6px; line-height: 1.4; }
#filterPanel #softSearchBox {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(253, 158, 2, 0.12);
}
#filterPanel #softSearchInput {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
#filterPanel #softSearchExamples .fl-tool { font-size: 11px; padding: 4px 8px; }
#filterPanel .fl-layer {
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 10px;
  background: var(--ll-field) !important;
  margin-bottom: 10px;
  overflow: hidden;
}
#filterPanel .fl-layer-include { border-color: var(--ll-place) !important; }
#filterPanel .fl-layer-exclude { border-color: var(--ll-signal) !important; }
#filterPanel .fl-layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(253, 158, 2, 0.12);
}
#filterPanel .fl-mode-btn {
  padding: 3px 10px;
  border-radius: 20px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ll-slate);
}
#filterPanel .fl-layer-include .fl-mode-btn { background: var(--ll-place) !important; }
#filterPanel .fl-layer-exclude .fl-mode-btn { background: var(--ll-signal) !important; color: #fff; }
#filterPanel .fl-layer-body { padding: 8px 12px; }
#filterPanel .fl-facet-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
#filterPanel .fl-facet-label {
  font-size: 12px;
  color: var(--ll-paper) !important;
  min-width: 120px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#filterPanel .fl-facet-label .ll-i { width: 14px; height: 14px; }
#filterPanel .fl-facet-rm {
  background: transparent !important;
  border: 1px solid var(--ll-signal) !important;
  border-radius: 50%;
  color: var(--ll-signal) !important;
  cursor: pointer;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
#filterPanel .fl-add-facet {
  width: 100%;
  padding: 5px 8px;
  border: 1px dashed var(--ll-panel-border) !important;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ll-paper-dim) !important;
  background: var(--ll-field) !important;
}
#cfPanelChips .cf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
#cfPanelChips .cf-chip.active {
  border-color: var(--ll-brass) !important;
  color: var(--ll-brass) !important;
}
#cfPanelChips .cf-chip .ll-i { width: 12px; height: 12px; }
#cfPanelChips .cf-clear {
  background: transparent !important;
  color: var(--ll-paper-dim) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
.mp-head {
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  border-bottom: 1px solid var(--ll-panel-border);
}
.mp-act {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
.mp-say {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mp-say .ll-i { width: 16px; height: 16px; }

#filterPanel .fl-save-box {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border);
  border-radius: 18px;
  padding: 24px;
  width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), var(--ll-glow-brass);
}

/* ── HARD-FOCUS: Profile ── */
#editProfileModal,
#myProfileModal,
#profileModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  font-family: var(--ll-font) !important;
}
#editProfileModal > div,
#editProfileContent,
#myProfileContent,
#profileContent {
  background: transparent !important;
  color: var(--ll-paper) !important;
}
#editProfileModal h2, #editProfileModal label, #profileEmailAddr { color: var(--ll-paper) !important; }
#editProfileModal textarea, #editProfileModal input {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.ep-lab {
  font-size: 12px;
  font-weight: 700;
  color: var(--ll-paper-dim) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ep-lab .ll-i, .ep-affix .ll-i, .ep-photo-btn .ll-i { width: 14px; height: 14px; }
.ep-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  margin-top: 4px;
}
.ep-affix {
  padding: 0 8px;
  display: flex;
  align-items: center;
  background: var(--ll-field) !important;
  border-right: 1px solid var(--ll-panel-border);
}
.hdr-priv-btn {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.hdr-priv-btn.sel {
  border-color: var(--ll-brass) !important;
  box-shadow: var(--ll-glow-brass);
}
.hdr-priv-btn .ll-i { width: 16px; height: 16px; }
.mp-act-i .ll-i { width: 16px; height: 16px; }
.hdr-priv-more {
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 9px;
  background: var(--ll-field) !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--ll-brass) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hdr-priv-more .ll-i { width: 14px; height: 14px; }
#userDropdown .ud-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  color: var(--ll-paper) !important;
  text-decoration: none;
}
#userDropdown .ud-row-split { justify-content: space-between; padding: 0; }
#userDropdown .ud-row-split > .ud-row { flex: 1; }
#userDropdown .ud-count {
  display: none;
  background: var(--ll-signal);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  padding: 0 5px;
  margin-right: 16px;
}
#userDropdown .logout { color: var(--ll-signal) !important; border-top: 1px solid rgba(253, 158, 2, 0.12); }
#profileAvatarPreview div {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
}
#editProfileModal .btn-primary,
#editProfileModal button[onclick*="saveProfile"] {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none !important;
  box-shadow: var(--ll-glow-brass);
}
#editProfileModal .btn-secondary {
  background: transparent !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}

#filterPanel .fl-saved-lab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ll-paper-dim) !important;
  flex-shrink: 0;
}
#filterPanel .fl-saved-lab .ll-i { width: 12px; height: 12px; }
#filterPanel .fl-actions {
  padding: 12px 16px;
  border-top: 1px solid rgba(253, 158, 2, 0.12);
  display: flex;
  gap: 8px;
}
#filterPanel .fl-add-include,
#filterPanel .fl-add-exclude {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#filterPanel .fl-add-include .ll-i,
#filterPanel .fl-add-exclude .ll-i { width: 14px; height: 14px; }
#filterPanel .fl-facet-in {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
#filterPanel .fl-facet-rm .ll-i { width: 12px; height: 12px; }
#filterPanel select,
#filterPanel #savedSearchSelect {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}

.ep-save {
  flex: 1;
  padding: 10px;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ll-glow-brass);
}
.ep-cancel {
  flex: 1;
  padding: 10px;
  background: transparent !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* API keys (10-08): a fold in the profile editor, closed until wanted. */
.ep-keys { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--ll-panel-border); }
.ep-keys > summary { cursor: pointer; list-style: none; flex-wrap: wrap; }
.ep-keys > summary::-webkit-details-marker { display: none; }
.ep-keys-sub { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; }
.ep-keys-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ep-keys-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--ll-panel-border); border-radius: 10px; }
.ep-keys-txt { flex: 1; min-width: 0; }
.ep-keys-name { font-size: 13.5px; font-weight: 700; color: var(--ll-paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-keys-meta, .ep-keys-none { font-size: 12px; color: var(--ll-paper-dim); }
.ep-keys-revoke { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ll-signal); background: transparent; color: var(--ll-signal); cursor: pointer; }
.ep-keys-make { display: flex; gap: 8px; }
.ep-keys-make input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.ep-keys-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 10px; border: none; background: var(--ll-brass); color: var(--ll-slate); cursor: pointer; white-space: nowrap; }
.ep-keys-new { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; border: 1.5px solid var(--ll-brass); }
.ep-keys-new-h { font-size: 12.5px; font-weight: 700; color: var(--ll-paper); }
.ep-keys-code { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; user-select: all; padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--ll-paper) 8%, transparent); color: var(--ll-paper); }
.ep-keys-docs { font-size: 12.5px; font-weight: 600; color: var(--ll-brass); text-decoration: none; }
.ep-danger-lab {
  font-size: 11px;
  font-weight: 700;
  color: var(--ll-signal) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ep-danger-lab .ll-i, .ep-danger-btn .ll-i { width: 14px; height: 14px; }
.ep-danger-btn {
  width: 100%;
  padding: 10px;
  background: transparent !important;
  color: var(--ll-signal) !important;
  border: 1.5px solid var(--ll-signal) !important;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#editProfileModal [style*="background:#f9fafb"],
#editProfileModal [style*="background: #f9fafb"] {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}

#locPrivSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  /* Flex column + no transform: sticky/overflow work (transform clipped the sheet). */
  display: flex;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  inset: auto 0 0 0;
  transform: none;
  max-height: min(90vh, calc(100dvh - var(--sa-top, 0px) - 8px));
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  padding: 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
}
#locPrivSheet .ll-head { color: var(--ll-paper) !important; }
#locPrivSheet .loc-priv-head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--ll-panel-border, #f0f0f0);
  background: inherit;
}
#locPrivSheet .loc-priv-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 18px calc(32px + var(--sa-bottom, 0px));
}
.exc-picker-list {
  max-height: min(40vh, 280px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  scrollbar-gutter: stable;
  box-shadow: inset 0 -14px 12px -12px rgba(0, 0, 0, 0.22);
}
.exc-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  border-radius: 8px;
  color: #059669;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}
.exc-add-btn .ll-i { width: 12px; height: 12px; }
.exc-add-btn-ex {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
#locExcTabGroup .ll-i,
#locExcTabFriend_list .ll-i,
#locExcTabIndividual .ll-i { width: 14px; height: 14px; }
.priv-cfg-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ll-panel, white);
  border-radius: 16px 16px 0 0;
  padding: 20px 20px calc(32px + var(--sa-bottom, 0px));
  max-height: min(80vh, calc(100dvh - var(--sa-top, 0px) - 12px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
#liveProfileSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
#liveProfileSheet .lwb-title,
#liveProfileSheet .lps-head-text h3,
#liveProfileSheet #lpsTitle { color: var(--ll-paper) !important; }
#liveProfileSheet .lwb-sub,
#liveProfileSheet #lpsSubtitle { color: var(--ll-paper-dim) !important; }
#liveProfileSheet .lps-save {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 20px;
  border: none;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--ll-glow-brass);
}
#liveProfileSheet .lps-save .ll-i,
#liveProfileSheet .lps-icon-btn .ll-i,
#liveProfileSheet .lps-av-overlay .ll-i,
#liveProfileSheet .lps-color-lab .ll-i { width: 14px; height: 14px; }
#liveProfileSheet .lps-color-lab {
  font-size: 12px;
  font-weight: 700;
  color: var(--ll-paper-dim) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#liveProfileSheet .lps-icon-btn {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#liveProfileSheet .lps-upload-btn .ll-i,
#liveProfileSheet .lps-cam-btn .ll-i,
#liveProfileSheet .lps-record-btn .ll-i,
#liveProfileSheet #lpsLinkBtn .ll-i {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
#liveProfileSheet #lpsMorePrivacyBtn .ll-i,
#liveProfileSheet #lpsShareMerchRow .ll-i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
/* 10-15: the location audience is one row here; the chips live in the
   Location Privacy sheet behind it. */
#liveProfileSheet .lps-loc-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  background: var(--ll-field) !important;
  border: 1.5px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#liveProfileSheet .lps-loc-lab { flex-shrink: 0; font-size: 12.5px; font-weight: 600; }
#liveProfileSheet .lps-loc-sum {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 11.5px;
  color: var(--ll-paper-dim) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#liveProfileSheet .lps-loc-chev { flex-shrink: 0; font-size: 14px; color: var(--ll-paper-dim) !important; }
#liveProfileSheet .lps-sec-lab {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  color: var(--ll-paper-dim) !important;
}
#liveProfileSheet .lps-more {
  margin-top: 16px;
  border-top: 1.5px solid var(--ll-panel-border);
}
#liveProfileSheet .lps-more > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 2px 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ll-paper-dim) !important;
}
#liveProfileSheet .lps-more > summary::-webkit-details-marker { display: none; }
#liveProfileSheet .lps-more > summary::after {
  content: '›';
  margin-left: auto;
  font-size: 15px;
  transition: transform .15s;
}
#liveProfileSheet .lps-more[open] > summary::after { transform: rotate(90deg); }
#liveProfileSheet .lps-more > summary .ll-i { width: 14px; height: 14px; }
#liveProfileSheet button .ll-i-map { width: 14px; height: 14px; border-radius: 4px; }

/* P3: leftover paper-white cards on Profile / Live / privacy. */
#locPrivSheet .lps-priv-btn {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#liveProfileSheet .lps-upload-btn,
#liveProfileSheet .lps-record-btn,
#liveProfileSheet .lps-cam-btn,
#liveProfileSheet #lpsLinkBtn,
#liveProfileSheet .lps-mpi {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#liveProfileSheet .lps-upload-btn:hover,
#liveProfileSheet .lps-cam-btn:hover {
  background: color-mix(in srgb, var(--ll-brass) 14%, var(--ll-field)) !important;
}
#liveProfileSheet .lps-media-label { color: var(--ll-paper-dim) !important; }
#locPrivSheet .lps-priv-btn[data-priv="private"].sel {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
#locPrivSheet .lps-priv-btn[data-priv="public"].sel {
  background: color-mix(in srgb, #3b82f6 20%, var(--ll-field)) !important;
  color: var(--ll-paper) !important;
}
#locPrivSheet .lps-priv-btn[data-priv="friends"].sel {
  background: color-mix(in srgb, #22c55e 20%, var(--ll-field)) !important;
  color: var(--ll-paper) !important;
}
#locPrivSheet .lps-priv-btn[data-priv="friends_of_friends"].sel {
  background: color-mix(in srgb, #8b5cf6 20%, var(--ll-field)) !important;
  color: var(--ll-paper) !important;
}
#myProfileModal .mp-sec { border-bottom-color: var(--ll-panel-border) !important; }
#myProfileModal .mp-sec-t { color: var(--ll-paper-dim) !important; }
#myProfileModal .mp-act,
#myProfileModal .mp-item-ctl button {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#myProfileModal .mp-act:hover { background: color-mix(in srgb, var(--ll-brass) 12%, var(--ll-field)) !important; }
#myProfileModal .mp-item { border-color: var(--ll-panel-border) !important; }
#myProfileModal .mp-item-title,
#myProfileModal .mp-item-body { color: var(--ll-paper) !important; }
#myProfileModal .mp-item-when,
#myProfileModal .mp-empty { color: var(--ll-paper-dim) !important; }
#myProfileModal .mp-edit-ta {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
}
#myProfileModal .hdr-priv-btn {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#locPrivSheet .exc-add-btn {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-place-hot, #96ce41) !important;
}
#locPrivSheet .exc-add-btn-ex {
  background: var(--ll-field) !important;
  color: var(--ll-signal) !important;
}
#liveProfileSheet [style*="background:#f9fafb"],
#liveProfileSheet [style*="background: #f9fafb"],
#liveProfileSheet [style*="background:#f8fafc"],
#liveProfileSheet [style*="background:#f3f4f6"],
#liveProfileSheet [style*="background:#eef2ff"],
#liveProfileSheet [style*="background:#f0fdf4"],
#liveProfileSheet [style*="background:#fffbeb"],
#liveProfileSheet [style*="background:#fef9c3"],
#locPrivSheet [style*="background:#f9fafb"],
#locPrivSheet [style*="background: #f9fafb"],
#locPrivSheet [style*="background:#f3f4f6"],
#editProfileModal [style*="background:#f9fafb"],
#editProfileModal [style*="background: #f9fafb"],
#editProfileModal [style*="background:#eef2ff"],
#profileModal [style*="background:#f3f4f6"],
#profileModal [style*="background:#f1f5f9"],
#profileModal [style*="background:#eff6ff"],
#profileModal [style*="background:#f0fdf4"],
#profileModal [style*="background:#eef2ff"],
#profileModal [style*="background:#fff7ed"],
#profileModal [style*="background:#fffbeb"],
#profileModal [style*="background:#fff5f5"],
#myProfileModal [style*="background:#f8fafc"] {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#liveProfileSheet [style*="color:#374151"],
#liveProfileSheet [style*="color:#111827"],
#locPrivSheet [style*="color:#374151"],
#locPrivSheet [style*="color:#4b5563"],
#editProfileModal [style*="color:#374151"],
#profileModal [style*="color:#111827"] {
  color: var(--ll-paper) !important;
}
#liveProfileSheet [style*="color:#6b7280"],
#liveProfileSheet [style*="color:#9ca3af"],
#locPrivSheet [style*="color:#6b7280"],
#locPrivSheet [style*="color:#9ca3af"],
#editProfileModal [style*="color:#9ca3af"],
#editProfileModal [style*="color:#6b7280"],
#editProfileModal [style*="color:#999"],
#profileModal [style*="color:#9ca3af"] {
  color: var(--ll-paper-dim) !important;
}
#liveProfileSheet [style*="#e5e7eb"],
#locPrivSheet [style*="#e5e7eb"],
#locPrivSheet [style*="#f3f4f6"],
#locPrivSheet [style*="#f0f0f0"],
#editProfileModal [style*="#e5e7eb"],
#editProfileModal [style*="#ddd"] {
  border-color: var(--ll-panel-border) !important;
}
#locPrivSheet #locPrivSummary,
#locPrivSheet #locPrivGroupVis,
#liveProfileSheet #lpsShareUrlRow {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}

#originFallbackOverlay {
  background: rgba(2, 3, 6, 0.55);
  z-index: 9511;
}
#originFallbackSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45), var(--ll-glow-brass);
}
#originFallbackSheet .ll-head { color: var(--ll-paper) !important; }
#originFallbackGo.mvp-offline-btn { margin-top: 0; }

#placeSheetOverlay {
  background: rgba(2, 3, 6, 0.55);
}
#placeSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45), var(--ll-glow-brass);
}
#placeSheet .ps-handle {
  width: 36px;
  height: 4px;
  background: rgba(253, 158, 2, 0.35);
  border-radius: 2px;
  margin: 0 auto 12px;
}
#placeSheetName { color: var(--ll-paper) !important; }
#placeSheetCat {
  display: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--ll-slate) !important;
  background: var(--ll-brass) !important;
  border-radius: 10px;
  padding: 2px 8px;
  width: fit-content;
  margin: 4px 0 6px;
}
#placeSheetAddr {
  display: none;
  font-size: 13px;
  color: var(--ll-paper-dim) !important;
  margin-bottom: 14px;
  line-height: 1.35;
}
#placeSheetEta.ps-eta {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
#placeSheetEta.ps-eta[hidden] { display: none !important; }
.ps-eta-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border: 1px solid var(--ll-panel-border);
  border-radius: 12px;
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  cursor: pointer;
  font: inherit;
}
.ps-eta-chip .ll-i { width: 14px; height: 14px; }
.ps-eta-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ll-paper-dim);
}
.ps-eta-dur {
  font-size: 13px;
  font-weight: 700;
  color: var(--ll-brass);
}
.ps-eta-chip:disabled {
  opacity: 0.55;
  cursor: default;
}
.ps-eta-chip.ps-eta-miss .ps-eta-dur { color: var(--ll-paper-dim); }
#placeSheetDir {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  box-shadow: var(--ll-glow-brass);
}
#placeSheetPost {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border: 1.5px solid var(--ll-panel-border) !important;
  border-radius: 12px;
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
#placeSheetDir .ll-i, #placeSheetPost .ll-i, #placeSheetSave .ll-i { width: 16px; height: 16px; }
#placeSheetSave {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  margin-top: 8px;
  border: 1.5px solid var(--ll-panel-border) !important;
  border-radius: 12px;
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* U3: phone pin dock. transform none so sticky/overflow work (P1b). */
#notePinSheetOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9518;
  background: transparent;
}
#notePinSheet {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9519;
  flex-direction: column;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  transform: none;
  /* Under the header, with a strip of map left for the pin: on a phone on its
     side 72vh of 390 left the pin a 32px slot (note-opening review, 09-27). */
  max-height: min(72vh, calc(100dvh - var(--ll-under-header, 72px) - 64px));
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  padding: 0;
  /* The theme's panel tint laid over its own solid slate: the colour stays,
     the glass goes. A note is text to read, and through glass the satellite,
     cluster bubbles and the dock behind it read straight through the words
     (owner's screenshot, 09-29) — the reason search results went solid (09-25
     #35). */
  background: var(--ll-panel-img) !important;          /* see --ll-panel-img: never wrap --ll-panel in a gradient */
  background-color: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45), var(--ll-glow-brass);
  font-family: var(--ll-font);
}
#notePinSheet.nps-open {
  display: flex;
}
#notePinSheet .nps-handle {
  flex: 0 0 auto;
  width: 36px;
  height: 4px;
  background: rgba(253, 158, 2, 0.35);
  border-radius: 2px;
  margin: 10px auto 0;
}
#notePinSheet .nps-head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--ll-panel-border);
  background: inherit;
}
#notePinSheet .nps-title {
  font-size: 15px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ll-paper) !important;
}
#notePinSheet .nps-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 14px calc(24px + var(--sa-bottom, 0px));
}
#notePinSheet .np-root.np-acc { height: auto !important; max-height: none !important; }
/* …which leaves the library strip with no height of its own, and every tile
   in it is height:100% + aspect-ratio 1/1 (index.html, "horizontal
   carousel"). A photo then sized the row from its file (512px icons), and a
   passage from its words: the words set the height, the square set the width,
   and a long text item came out 1488px square in a 390px sheet (owner 09-27:
   "text media library items aren't wrapping and are instead making its card
   super wide"). One definite row height, and every tile is a square of it. */
#notePinSheet .np-acc .np-sec-media > .np-media > .np-mstrip {
  height: clamp(96px, 26vh, 200px) !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
#notePinSheet .np-acc .np-mstrip > .nm-text-tile { max-width: clamp(96px, 26vh, 200px); }
#notePinSheet .mapboxgl-popup-close-button { display: none !important; }

/* ── The note's author row IS the sheet header ────────────────────────────────
   Moved, not copied, by _openNotePinSheet. Everything here is id-scoped, and
   the desktop balloon never runs that code, so the Mapbox popup is untouched. */
#notePinSheet.nps-rich .nps-title { display: none !important; }
#notePinSheet.nps-rich .nps-head {
  align-items: flex-start;            /* the row is multi-line; pin the ✕ to the top */
  padding: 8px 12px 10px 14px;
}
#notePinSheet.nps-rich .ll-x { flex: 0 0 auto; margin-top: 2px; }
#notePinSheet .nps-head > .np-header {
  flex: 1 1 auto;
  min-width: 0;
  /* .np-header's padding-right:40px cleared the balloon's absolutely-positioned
     close button. Here the ✕ is a flex sibling and reserves its own width, so
     that gutter is dead space that pushed the name into an ellipsis. The
     !important is for the POI/discovery card, whose header pads inline. */
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  gap: 10px;
}
#notePinSheet .nps-head > .np-header .np-username {
  font-size: 15px;
  font-weight: 800;
  /* body.dark .np-username outspecifies hud.css's brass rule, so the brass has
     to be re-stated with an id behind it. */
  color: var(--ll-brass) !important;
}
#notePinSheet .nps-head .np-when { display: inline; color: var(--ll-paper-dim); }
/* Two inline colours in the co-author chips were chosen for a white card;
   #4338ca on this near-black is about 1.8:1. */
#notePinSheet .nps-head [style*="color:#4338ca"] { color: var(--ll-brass) !important; }
#notePinSheet .nps-head [style*="color:#9ca3af"] { color: var(--ll-paper-dim) !important; }

/* Slim on scroll. Height animates on the rows themselves, not on the head: the
   head is flex:0 0 auto inside a column already pinned to the sheet's
   max-height, so the body absorbs the pixels and nothing fights that max. The
   date stays — it sits inline on the name line, so hiding it frees no height
   and only makes the line reflow mid-scroll. */
#notePinSheet .nps-head .np-dist,
#notePinSheet .nps-head .np-coauth,
#notePinSheet .nps-head .np-privacy {
  overflow: hidden;
  transition: max-height .18s ease, opacity .14s ease,
              margin-top .18s ease, padding .18s ease;
}
#notePinSheet .nps-head .np-dist    { max-height: 24px; }
#notePinSheet .nps-head .np-coauth  { max-height: 44px; }   /* may wrap two chips deep */
#notePinSheet .nps-head .np-privacy { max-height: 24px; }
#notePinSheet.nps-slim .nps-head .np-dist,
#notePinSheet.nps-slim .nps-head .np-coauth,
#notePinSheet.nps-slim .nps-head .np-privacy {
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#notePinSheet.nps-slim .nps-head .np-badges { display: none; }
@media (prefers-reduced-motion: reduce) {
  #notePinSheet .nps-head .np-dist,
  #notePinSheet .nps-head .np-coauth,
  #notePinSheet .nps-head .np-privacy { transition: none; }
}

/* ── One surface, not a card inside a card ───────────────────────────────────
   The injected .np-root carries its own 14px radius and, under body.dark, its
   own #1a1f2e — a rounded box inset inside the sheet's rounded frame, in a
   different dark. That is the nested card. */
#notePinSheet.nps-card .nps-body { padding-left: 0; padding-right: 0; padding-top: 0; }
#notePinSheet .np-root {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* The top media was rounded to agree with .np-root's clip. With the clip flat
   and the media now the first thing under the head, that rounding reads as a
   floating tile on a flat surface. */
#notePinSheet .np-media-top > div { border-radius: 0 !important; }
/* ── The accordion does not apply in the sheet ───────────────────────────────
   In the balloon .np-acc is a fixed-height column, and "focus one section,
   shrink the others to 56px" is how five sections fit in 520px. The sheet gives
   the card its natural height (the .np-root.np-acc rule above), so the same
   rules can only ever shrink: tap the note text and the poll under it collapses
   to a 56px scroll box — measured, 180px to 56px on one tap — with a pointer
   cursor and a nested scrollbar inside a sheet that already scrolls. Sections
   are plain stacked blocks here. */
#notePinSheet .np-acc .np-sec,
#notePinSheet .np-acc[data-focus] .np-sec {
  flex: 0 0 auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  cursor: auto !important;
  transition: none !important;
}
#notePinSheet .np-acc[data-focus] .np-sec::after { display: none !important; }
/* The remaining nested-box tells: dividers drawn in popup greys. */
#notePinSheet .np-actions,
#notePinSheet .np-group-strip { border-top-color: var(--ll-panel-border) !important; }
#notePinSheet .np-header { border-bottom-color: var(--ll-panel-border) !important; }
/* The date lives in the byline here, so the footer is the address alone — and
   nothing at all when there is no address. */
#notePinSheet .np-foot-when,
#notePinSheet .np-foot-sep { display: none !important; }
#notePinSheet .np-footer:not(:has(.np-foot-addr)) { display: none !important; }
/* The phone test: keep in step with index.html's "What counts as a phone". */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  body.ll-pin-sheet-open .mapboxgl-popup {
    display: none !important;
  }
}
#saveToListSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border);
}
#saveToListTitle { color: var(--ll-paper) !important; }
.stl-new {
  display: flex;
  gap: 8px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--ll-panel-border);
}
.stl-new input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--ll-panel-border);
  background: var(--ll-field);
  color: var(--ll-paper);
  font-size: 14px;
}
.stl-new-btn {
  flex-shrink: 0;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.nl-export-btn {
  padding: 6px 11px;
  border-radius: 8px;
  border: 1.5px solid var(--ll-panel-border);
  background: var(--ll-field);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ll-paper);
}
.ll-list-map-pin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ll-brass);
  border: 2px solid #0c0e14;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  cursor: pointer;
  pointer-events: auto;
}
#srAreaChip {
  position: fixed;
  top: calc(var(--sa-top, 0px) + 62px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 904;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--ll-panel);
  color: var(--ll-paper);
  border: 1px solid var(--ll-panel-border);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  overflow: hidden;
}
#srAreaChip[hidden] { display: none !important; }
#srAreaChip .sr-area-go {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px 8px 14px;
  cursor: pointer;
}
#srAreaChip .sr-area-go .ll-i { width: 14px; height: 14px; }
#srAreaChip .sr-area-dismiss {
  background: none;
  border: none;
  color: var(--ll-paper-dim);
  padding: 8px 12px 8px 6px;
  cursor: pointer;
}
#srAreaChip .sr-area-dismiss .ll-i { width: 12px; height: 12px; }

.sr-place-cluster {
  background: var(--ll-slate) !important;
  color: var(--ll-brass) !important;
  border-color: var(--ll-brass) !important;
}

.mvp-offline-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ll-panel-border);
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mvp-offline-btn .ll-i { width: 16px; height: 16px; }
.mvp-offline-btn:disabled { opacity: 0.55; cursor: default; }
.off-prog { margin-top: 10px; }
.off-prog-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(253, 158, 2, 0.18);
  overflow: hidden;
}
#offlineAreaProgFill {
  height: 100%;
  width: 0;
  background: var(--ll-brass);
  border-radius: 99px;
}
.off-prog-label {
  font-size: 11px;
  color: var(--ll-paper-dim);
  margin-top: 6px;
}
.off-region-list { margin-top: 10px; }
.off-region-empty {
  font-size: 12px;
  color: var(--ll-paper-dim);
}
.off-region-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ll-panel-border);
}
.off-region-meta { flex: 1; min-width: 0; }
.off-region-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ll-paper);
}
.off-region-sub {
  font-size: 11px;
  color: var(--ll-paper-dim);
}
.off-region-del {
  background: none;
  border: 1px solid var(--ll-panel-border);
  color: var(--ll-paper);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}

#directionsSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.45) !important;
}
#directionsSheet .dir-leg-value { color: var(--ll-paper) !important; }
#directionsSheet .dir-leg-label { color: var(--ll-paper-dim) !important; }
#directionsSheet .dir-leg-value .ll-i,
#directionsSheet .dir-app-btn .ll-i,
#dirMapboxBtn .ll-i,
#dirFromChangeBtn .ll-i,
#dirAddStopBtn .ll-i { width: 14px; height: 14px; }
#dirFromChangeBtn {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-brass) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#dirAddStopBtn {
  color: var(--ll-brass) !important;
  border-color: var(--ll-panel-border) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dir-app-btn {
  color: var(--ll-paper) !important;
  border-bottom-color: rgba(253, 158, 2, 0.12) !important;
}
.dir-app-btn:hover, #dirMapboxBtn:hover {
  background: rgba(253, 158, 2, 0.08) !important;
}
#dirMapboxBtn { color: var(--ll-brass) !important; }
.dir-app-hdr, #dirMapboxNote { color: var(--ll-paper-dim) !important; }
.dir-mode-seg {
  background: var(--ll-field) !important;
}
.dir-mode-btn {
  color: var(--ll-paper-dim) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dir-mode-btn .ll-i { width: 12px; height: 12px; }
.dir-mode-btn.on {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass);
}

#routePanelExpanded {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45) !important;
}
#routePanelTitle { color: var(--ll-paper) !important; }
#routePanelInfo { color: var(--ll-paper-dim) !important; }
#routePanel .route-step { border-bottom-color: rgba(253, 158, 2, 0.12) !important; color: var(--ll-paper-dim) !important; }
.rp-tool {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 6px;
  color: var(--ll-paper) !important;
  cursor: pointer;
  padding: 3px 8px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rp-tool .ll-i { width: 14px; height: 14px; }
.rp-tool.rp-muted { opacity: 0.45; }
.rp-exit { color: var(--ll-signal) !important; border-color: var(--ll-signal) !important; }
.rp-pill {
  padding: 9px 14px;
  border-radius: 24px;
  background: var(--ll-panel) !important;
  border: 1.5px solid var(--ll-brass) !important;
  color: var(--ll-brass) !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ll-glow-brass);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rp-pill .ll-i { width: 14px; height: 14px; }
.rp-pill.rp-exit {
  border-color: var(--ll-signal) !important;
  color: var(--ll-signal) !important;
}
#routeHandOffBtn {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1.5px solid var(--ll-panel-border) !important;
  background: var(--ll-field) !important;
  color: var(--ll-brass) !important;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#routeHandOffBtn .ll-i { width: 14px; height: 14px; }

.nm-priv-select {
  flex: 1;
  min-width: 0;
  padding: 7px 11px;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ll-paper) !important;
  background: var(--ll-field) !important;
  cursor: pointer;
  font-family: inherit;
}
.nm-priv-side,
#noteCoAuthorBtn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 8px;
  color: var(--ll-paper) !important;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 11px;
  cursor: pointer;
  font-family: inherit;
}
.nm-priv-side .ll-i,
#noteCoAuthorBtn .ll-i { width: 14px; height: 14px; }
.nm-tpl-act {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.nm-tpl-act .ll-i { width: 14px; height: 14px; }
#privacyNetwork { color: var(--ll-paper) !important; }

#dpEditSlotSheet,
#dpNewSlotSheet,
#dpLinkLocSheet,
#schedPickerSheet,
#slotTypeSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45) !important;
}
#dpEditSlotSheet .sv-label,
#dpNewSlotSheet .sv-label,
#schedPickerSheet .sv-label { color: var(--ll-paper-dim) !important; }
#dpEditSlotSheet .sv-input,
#dpNewSlotSheet .sv-input,
#dpEditVisibility {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
.dp-map-pick {
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  background: var(--ll-field) !important;
  border: 1.5px dashed var(--ll-brass) !important;
  border-radius: 8px;
  color: var(--ll-brass) !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dp-map-pick .ll-i { width: 14px; height: 14px; }
.sv-submit {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass);
}

#deleteAccountModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
#deleteAccountModal h3,
#deleteAccountModal p,
#deleteAccountModal label { color: var(--ll-paper) !important; }
#deleteAccountModal input {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
.da-mark { margin-bottom: 8px; display: flex; justify-content: center; }
.da-mark .ll-i { width: 36px; height: 36px; }
.da-cancel {
  flex: 1;
  padding: 10px;
  background: transparent !important;
  color: var(--ll-paper) !important;
  border: 1.5px solid var(--ll-panel-border) !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.da-go {
  flex: 1;
  padding: 10px;
  background: var(--ll-signal) !important;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#mediaDetailDrawer {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#mediaDetailDrawer h3,
#mediaDetailDrawer label,
#mediaDetailDrawer summary { color: var(--ll-paper) !important; }
#mediaDetailDrawer input,
#mediaDetailDrawer select,
#mediaDetailDrawer textarea {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
.mdd-ai {
  padding: 6px 12px;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mdd-ai .ll-i { width: 14px; height: 14px; }
#mdPrivacyDetails summary .ll-i { width: 14px; height: 14px; }
#mdPrivAudRow .lps-priv-btn,
#mdPrivAudRow2 .lps-priv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#gbQuestPanel .gb-header,
#gameModerationModal .gb-header {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
.gb-qpanel-mark .ll-i { width: 20px; height: 20px; }
#gameModerationModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
.fs-book-chip-title .ll-i,
.fs-book-propose .ll-i { width: 12px; height: 12px; }

#noteModal .nm-sec-panel {
  border-bottom-color: rgba(253, 158, 2, 0.12) !important;
}
#noteModal .nm-sec-panel-hdr:hover {
  background: rgba(253, 158, 2, 0.06) !important;
}
#noteModal .nm-toggle-row span {
  color: var(--ll-paper) !important;
}
#noteModal .nm-toggle-row .ll-i,
#noteModal #nmSecSelling .ll-i,
#noteModal #nmSecTime .ll-i { width: 14px; height: 14px; }
#nmMediaToggle {
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-brass) !important;
  background: transparent !important;
}
#nmMediaToggle .ll-i { width: 16px; height: 16px; }
#mediaAddBtns > button,
#mediaUploadLabel,
#mediaFolderBtn {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-brass) !important;
}
#mediaAddBtns .ll-i,
#mediaUploadLabel .ll-i { width: 18px; height: 18px; }
.mfbar-reuse {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.mfbar-reuse .ll-i { width: 14px; height: 14px; }

.st-pick {
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 1.5px solid var(--ll-panel-border) !important;
  border-radius: 12px;
  background: var(--ll-field) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ll-paper) !important;
}
.st-pick-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ll-paper) !important;
}
.st-pick-meta {
  font-size: 12px;
  color: var(--ll-brass) !important;
  margin-top: 2px;
}
.st-pick-chev { font-size: 18px; color: var(--ll-brass); }
.st-pick-propose {
  width: 100%;
  text-align: center;
  padding: 11px 14px;
  border: 1.5px dashed var(--ll-brass) !important;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ll-brass) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.st-pick-propose .ll-i { width: 14px; height: 14px; }
#slotTypeList { display: flex; flex-direction: column; gap: 8px; }

#mdAccessDetails summary .ll-i,
#mdExcTabGroup .ll-i,
#mdExcTabFriend_list .ll-i,
#mdExcTabIndividual .ll-i { width: 14px; height: 14px; }
.exc-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#nmComposerPin .nmp-edit-badge {
  background: var(--ll-panel) !important;
  border-color: var(--ll-brass) !important;
}
#nmComposerPin .nmp-edit-badge .ll-i { width: 11px; height: 11px; }
.md-ful-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
.md-ful-btn .ll-i,
#nmSecSelling .ll-i,
#nmSecFundraising .ll-i,
#privCfgPanel .ll-i,
#coAuthorModal .ll-i { width: 14px; height: 14px; }

#evtModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45) !important;
}
#evtModal h3,
#evtModal .ll-head,
#evtModal .evtm-lbl,
#evtModal .evt-modal-sec-lbl { color: var(--ll-paper) !important; }
#evtModal .evtm-mode {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#evtModal .evtm-mode .ll-i { width: 12px; height: 12px; }
#evtModal input,
#evtModal select { background: var(--ll-field) !important; color: var(--ll-paper) !important; border-color: var(--ll-panel-border) !important; }

#deleteNoteDialog,
#mediaUnlockDialog,
#createListDialog,
#coAuthorModal > div,
#createGroupModal,
#landingPromptModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
#deleteNoteDialog h3,
#mediaUnlockDialog .ll-head,
#createListDialog .ll-head,
#coAuthorModal h3,
#createGroupModal .ll-head,
#landingPromptModal .ll-head { color: var(--ll-paper) !important; }
#deleteNoteDialog p,
#mediaUnlockDialog #mudDesc,
#landingPromptModal div { color: var(--ll-paper-dim); }
#createListDialog input,
#coAuthorModal input,
#createGroupModal input,
#createGroupModal textarea,
#createGroupModal select {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
#createListSubmitBtn,
#extLinkOpenBtn {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
}
#extLinkSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#extLinkSheet #extLinkHostname { color: var(--ll-paper) !important; }
#saveSearchDialog .fl-save-box {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}

#dpProposedConfirm,
#dpVisitStrip {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border-top-color: var(--ll-panel-border) !important;
}
#dpProposedConfirm .ll-head,
#dpVisitStrip .ll-head { color: var(--ll-brass) !important; }
#dpShareSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#dpShareSheet .ll-head { color: var(--ll-paper) !important; }
#dpShareSheet input,
#dpShareSheet label {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
#dpShareSheet .ll-i { width: 14px; height: 14px; }
#privCfgPanel > div {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#gameIntroModal,
#questIntroModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: none;
}
#gameIntroModal .gi-footer button,
#questIntroModal .qi-footer button { font-family: var(--ll-font); }
.qhp-req .ll-i,
.qhp-status-ok .ll-i { width: 12px; height: 12px; }
#groupPotModal { background: var(--ll-panel) !important; }
#groupPotModalTitle .ll-i { width: 16px; height: 16px; }
#mdPaymentDetails .ll-i { width: 14px; height: 14px; }

#userDropdown .user-info {
  border-bottom: 1px solid var(--ll-panel-border) !important;
}
#userDropdown .username { color: var(--ll-paper) !important; }
#userDropdown .hdr-priv-btn {
  background: var(--ll-field) !important;
  border: 1px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#userDropdown .hdr-priv-btn.sel,
#userDropdown .hdr-priv-btn[data-priv].sel {
  border-color: var(--ll-brass) !important;
  background: rgba(253, 158, 2, 0.16) !important;
  box-shadow: var(--ll-glow-brass);
}
.np-privacy {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.np-privacy .ll-i { width: 11px; height: 11px; }

#lpPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#lpPanel .dp-header,
#lpPanel .dp-tabs {
  background: transparent !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#lpPanel input,
#lpPanel select {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}

#cartPanel,
#leelayPanel {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#cartPanelBody .da-mark .ll-i { width: 36px; height: 36px; }
.lp-disclaimer .ll-i { width: 14px; height: 14px; }

#groupProfileModal,
#groupInviteModal,
#groupMemberInviteModal,
#potRulesModal,
#treasuryRulesModal,
#treasurySpendModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
#groupProfileModal .ll-x .ll-i,
#potRulesModal .ll-i,
#treasuryRulesModal .ll-i,
#treasurySpendModal .ll-i { width: 16px; height: 16px; }
.gp-pot-lbl .ll-i { width: 14px; height: 14px; }
.gp-pot-rules-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#msgNewConvDialog,
#dmPlaceSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#msgNewConvDialog .ll-head,
#dmPlaceSheet .ll-head { color: var(--ll-paper) !important; }
#msgNewConvDialog input,
#dmPlaceSheet input {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
#messengerConvList,
#messengerThread {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
}
#messengerInputArea {
  background: var(--ll-panel) !important;
  border-top-color: var(--ll-panel-border) !important;
}

.evt-card-hdr-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.evt-card-hdr-title .ll-i,
.evt-card-chip .ll-i,
.evt-card-when-btn .ll-i,
.evt-card-photo .ll-i { width: 12px; height: 12px; }
.evt-card {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
.evt-card-hdr-title { color: var(--ll-brass) !important; }

#saveTplModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#saveTplModal .ll-head { color: var(--ll-paper) !important; }
#saveTplModal .sv-input {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
#lpBlockSheet {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
}
#lpBlockSheet .ll-head { color: var(--ll-paper) !important; }
.nr-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.nr-chip .ll-i { width: 11px; height: 11px; }
.nr-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.nr-btn .ll-i { width: 14px; height: 14px; }
.lb-cart-btn .ll-i,
.lb-soc-btn .ll-i,
#lbCameraAddBtn .ll-i { width: 14px; height: 14px; }
[data-loops-balance] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-loops-balance] .ll-i { width: 12px; height: 12px; }
#callActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#callActions .ll-i { width: 16px; height: 16px; }
.qslp-cat-hdr .ll-i { width: 11px; height: 11px; }

#ageGateModal,
#humanityModal,
#termsDialog,
#changelogModal {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  font-family: var(--ll-font) !important;
}
#ageGateModal .ll-head,
#humanityModal .ll-head,
#termsDialog .ll-head,
#changelogModal .ll-head { color: var(--ll-paper) !important; }
#ageGateModal p,
#humanityModal p,
#termsDialogBody { color: var(--ll-paper-dim) !important; }
#ageGateModal select,
#ageGateModal input {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
#ageGateBtn,
#humanityBtn,
#termsAgreeBtn,
.cl-cta {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass);
}
.cl-header {
  background: var(--ll-slate) !important;
}
.cl-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.cl-icon .ll-i { width: 18px; height: 18px; }
#helpTip .ll-i,
#_helpTip .ll-i { width: 13px; height: 13px; }
.nm-cart-btn .ll-i,
.thumb-cart-overlay .ll-i { width: 12px; height: 12px; }
.csv-btn .ll-i { width: 14px; height: 14px; }

#tipsModal,
#betaNoticeDialog,
#pushOfferDialog,
#bgPresenceDialog {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  font-family: var(--ll-font) !important;
}
#pushOfferDialog .ll-head,
#bgPresenceDialog .ll-head { color: var(--ll-paper) !important; }
#pushOfferDialog .po-primary,
#bgPresenceDialog .po-primary {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass) !important;
}
#pushOfferDialog .po-secondary,
#bgPresenceDialog .po-secondary {
  background: transparent !important;
  border: 1.5px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
#pushOfferDialog .da-mark .ll-i,
#bgPresenceDialog .da-mark .ll-i { width: 36px; height: 36px; }
.tm-header {
  background: var(--ll-slate) !important;
}
.tm-header-title,
#betaNoticeDialog .ll-head { color: var(--ll-paper) !important; }
.tm-header-icon .ll-i { width: 36px; height: 36px; }
.tm-tip-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.tm-tip-icon .ll-i { width: 18px; height: 18px; }
.tm-cta,
#betaNoticeFeedbackBtn {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass) !important;
}
#betaNoticeFeedbackBtn .ll-i { width: 16px; height: 16px; }

.legal-header {
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  font-family: var(--ll-font) !important;
}
.legal-header h1 { color: var(--ll-brass) !important; font-family: var(--ll-font-display) !important; }
.legal-nav {
  background: var(--ll-panel) !important;
  border-bottom-color: var(--ll-panel-border) !important;
}
.legal-nav a,
footer.legal-footer a,
.legal-footer a { color: var(--ll-brass) !important; }
.toc { background: var(--ll-panel) !important; border-color: var(--ll-panel-border) !important; color: var(--ll-paper) !important; }
.toc a { color: var(--ll-brass) !important; }
.legal-body,
.legal-body h2,
.legal-body p,
h2.sect { color: var(--ll-paper) !important; }

/* G1: public resources map + share interstitial */
#topBar {
  background: var(--ll-slate) !important;
  border-bottom: 1px solid var(--ll-panel-border);
}
#brandName { color: var(--ll-brass) !important; }
#addResourceBtn,
.popup-cta,
a.sp-open {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
}
#nearMeBtn .ll-i,
#brandLogo .ll-i,
#searchClear .ll-i { width: 16px; height: 16px; }

#navStepBanner {
  position: fixed;
  top: calc(var(--sa-top, 0px) + 58px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4605;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(520px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 8px 10px 8px 12px;
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.32);
  font-family: var(--ll-font) !important;
}
#navStepBanner .nsb-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#navStepBanner .nsb-icon .ll-i { width: 18px; height: 18px; }
#navStepBanner .nsb-body { flex: 1; min-width: 0; }
#navStepBanner .nsb-step {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#navStepBanner .nsb-eta {
  font-size: 11.5px;
  color: var(--ll-brass);
  font-weight: 600;
  margin-top: 1px;
}
#navStepBanner .nsb-end {
  flex-shrink: 0;
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.filter-chip .ll-i { width: 13px; height: 13px; }
#loadLogo .ll-i { width: 48px; height: 48px; }

.ob-btn-primary {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass) !important;
}
.ob-progress-fill {
  background: var(--ll-brass) !important;
}
.ob-footer a,
.ob-btn-back:hover,
.ob-btn-skip:hover { color: var(--ll-brass) !important; }
.ob-dot.active { background: var(--ll-brass) !important; }

a.btn,
.auth-container .btn,
.cta-join {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
}
.cta-back,
.manage-link,
.small a { color: var(--ll-brass) !important; }

/* A1 — leftover sheets / modals / toasts (pre-HUD paper, indigo CTAs, stock chrome). */
html body #friendsModal,
html body.dark #friendsModal,
html body #inviteModal,
html body.dark #inviteModal,
html body #shareQRModal,
html body.dark #shareQRModal,
html body #createGroupModal,
html body.dark #createGroupModal,
html body #groupInviteModal,
html body.dark #groupInviteModal,
html body #groupMemberInviteModal,
html body.dark #groupMemberInviteModal,
html body #groupProfileModal,
html body.dark #groupProfileModal,
html body #privateShareModal,
html body.dark #privateShareModal,
html body #pinDesignSheet,
html body.dark #pinDesignSheet,
html body #courierPanel,
html body.dark #courierPanel,
html body #crPicker,
html body.dark #crPicker,
html body #poolSharesDash,
html body.dark #poolSharesDash,
html body #poolCompareDlg,
html body.dark #poolCompareDlg,
html body #printCardDialog,
html body.dark #printCardDialog,
html body #extLinkSheet,
html body.dark #extLinkSheet,
html body #coAuthorModal > div,
html body.dark #coAuthorModal > div,
html body #ageGateModal,
html body.dark #ageGateModal,
html body dialog.ll-ask,
html body.dark dialog.ll-ask {
  background: var(--ll-panel) !important;
  color: var(--ll-paper) !important;
  border: 1px solid var(--ll-panel-border) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), var(--ll-glow-brass) !important;
  font-family: var(--ll-font) !important;
}
html body #pinDesignSheet,
html body.dark #pinDesignSheet {
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5), var(--ll-glow-brass) !important;
}
html body #shareQRModal,
html body.dark #shareQRModal,
html body #privateShareModal,
html body.dark #privateShareModal,
html body #courierPanel,
html body.dark #courierPanel {
  border-radius: 18px 18px 0 0 !important;
}
/* Invite is a tall form of fields and words over the map: the theme's tint
   laid over its own solid slate, so the colour stays and the glass goes —
   at 78% the street names read through the email fields. Same reason and
   same layering as the note sheet (#notePinSheet, 09-29). */
html body #inviteModal,
html body.dark #inviteModal {
  background: var(--ll-panel-img) !important;          /* see --ll-panel-img: never wrap --ll-panel in a gradient */
  background-color: var(--ll-slate) !important;
}

html body #friendsModal input,
html body #friendsModal textarea,
html body #friendsModal select,
html body #inviteModal input,
html body #inviteModal textarea,
html body #shareQRModal input,
html body #shareQRModal textarea,
html body #createGroupModal input,
html body #createGroupModal textarea,
html body #createGroupModal select,
html body #groupInviteModal input,
html body #groupMemberInviteModal input,
html body #privateShareModal input,
html body #pinDesignSheet input,
html body #pinDesignSheet textarea,
html body #pinDesignSheet select,
html body #courierPanel input,
html body #courierPanel textarea,
html body #courierPanel select,
html body #crPicker input,
html body #crPicker select,
html body #notifSettingsPanel input,
html body #notifSettingsPanel select,
html body #notifSettingsPanel textarea,
html body #messengerInput,
html body #extLinkSheet button,
html body #ageGateModal select,
html body #coAuthorModal input,
html body dialog.ll-ask input,
html body dialog.ll-ask textarea,
html body dialog.ll-ask select,
html body #editProfileModal textarea,
html body #editProfileModal input:not([type="file"]):not([type="checkbox"]) {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
html body #notifSettingsPanel input[type="checkbox"] {
  accent-color: var(--ll-brass) !important;
}

html body #cgSubmitBtn,
html body #shareQRCopyBtn,
html body #pdsDone,
html body #notifSettingsPanel button[onclick*="_saveNotifSettings"],
html body #notifSettingsPanel button[onclick*="_testEmail"],
html body #messengerSendBtn,
html body #shareQLClaimBtn,
html body #groupInviteModal button[onclick*="_copyGroupInviteLink"],
html body #extLinkOpenBtn,
html body #ageGateBtn,
html body dialog.ll-ask button[data-v="go"],
html body .gp-join,
html body .ll-ask-cta {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none !important;
  box-shadow: var(--ll-glow-brass);
  font-family: var(--ll-font);
}
html body #ns_push_btn,
html body #groupInviteModal button[onclick*="_shareGroupInviteLink"],
html body #groupsPanel button[onclick*="_openCreateGroupModal"] {
  background: var(--ll-field) !important;
  color: var(--ll-brass) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
html body #groupsPanel button[onclick*="_openCreateGroupModal"] {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none !important;
}

html body #shareQRLabel,
html body #psTitle,
html body .pds-title {
  color: var(--ll-brass-hot) !important;
}
html body #shareQRUrl,
html body #shareQLState,
html body #shareQLPrefix {
  color: var(--ll-paper-dim) !important;
}
html body #shareQLRow,
html body #shareQRWarning,
html body #createGroupModal [style*="background:#f9fafb"],
html body #cgAvatarPreview,
html body #psQRBlock > div,
html body #psNoAccess,
html body #psOpenRow,
html body #psFriendsRow,
html body #dmAttachPreview,
html body #notifSettingsPanel [style*="border-bottom:1px solid #f3f4f6"],
html body #notifSettingsPanel [style*="border-top:1px solid #f3f4f6"] {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
html body #cgAvatarPreview {
  background: var(--ll-field) !important;
  border: 2px dashed var(--ll-panel-border) !important;
}
html body #createGroupModal .cg-priv-on,
html body #cgPrivPrivate.cg-priv-on,
html body #cgPrivPublic.cg-priv-on,
html body #cgPrivSecret.cg-priv-on {
  border-color: var(--ll-brass) !important;
  background: color-mix(in srgb, var(--ll-brass) 18%, var(--ll-field)) !important;
  color: var(--ll-brass) !important;
}
html body #createGroupModal label[id^="cgPriv"] {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
html body #createGroupModal label[id^="cgPriv"].cg-priv-on {
  border-color: var(--ll-brass) !important;
  background: color-mix(in srgb, var(--ll-brass) 18%, var(--ll-field)) !important;
  color: var(--ll-brass) !important;
}

html body .pds-hdr {
  border-bottom-color: var(--ll-panel-border) !important;
}
html body .pds-title { color: var(--ll-brass-hot) !important; }
html body .pin-swatch-auto {
  background: var(--ll-field) !important;
  color: var(--ll-paper-dim) !important;
  border-color: var(--ll-panel-border) !important;
}
html body .pin-swatch-auto.pca-sel {
  border-color: var(--ll-brass) !important;
  background: color-mix(in srgb, var(--ll-brass) 18%, var(--ll-field)) !important;
  color: var(--ll-brass) !important;
}
html body .pin-style-tile {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper-dim) !important;
}
html body .pin-style-tile.pst-sel {
  border-color: var(--ll-brass) !important;
  background: color-mix(in srgb, var(--ll-brass) 18%, var(--ll-field)) !important;
  color: var(--ll-brass) !important;
}
html body .pin-swatch-custom {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
}
html body .pin-swatch-custom .ll-i { width: 14px; height: 14px; pointer-events: none; }
html body .pds-pack-chip {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
html body .pds-pack-chip.on {
  border-color: var(--ll-brass) !important;
  background: color-mix(in srgb, var(--ll-brass) 18%, var(--ll-field)) !important;
  color: var(--ll-brass) !important;
}
html body .pcm-emoji-section { border-top-color: var(--ll-panel-border) !important; }

html body #messengerHeader,
html body #messengerInputArea {
  background: var(--ll-panel) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
html body #dmImgBtn,
html body #dmVidBtn,
html body #dmMicBtn,
html body #dmPlaceBtn {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}

html body #courierPanel [style*="background:white"],
html body #courierPanel [style*="background:#fff"],
html body #crPicker [style*="background:white"],
html body #crPicker [style*="background:#fff"],
html body #crPicker [style*="background:#f9fafb"],
html body #courierPanel [style*="background:#f0fdf4"],
html body #courierPanel [style*="background:#fffbeb"] {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}
html body #courierPanel button[style*="background:#d97706"],
html body #courierPanel button[style*="background:#16a34a"],
html body #crPicker button[style*="background:#d97706"] {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  border: none !important;
}
html body #poolCompareDlg [style*="background:#eff6ff"] {
  background: var(--ll-field) !important;
  border-color: var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
html body #_crExpandBtn .ll-i { width: 12px; height: 12px; }

.ll-ask-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--ll-panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--ll-slate) !important;
  color: var(--ll-paper) !important;
  border-radius: 20px 20px 0 0;
}
.ll-ask-head .ll-head {
  color: var(--ll-brass-hot) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}
.ll-ask-head .ll-i { width: 16px; height: 16px; }
dialog.ll-ask button[style*="background:#fff"],
dialog.ll-ask button[style*="background:white"] {
  background: var(--ll-field) !important;
  color: var(--ll-paper) !important;
  border-color: var(--ll-panel-border) !important;
}

html body .gp-invite {
  background: var(--ll-field) !important;
  border: 1.5px solid var(--ll-panel-border) !important;
  color: var(--ll-paper) !important;
}
html body .gp-row:hover { background: var(--ll-field) !important; }
html body .gp-decline {
  background: var(--ll-field) !important;
  color: var(--ll-paper-dim) !important;
  border: 1px solid var(--ll-panel-border) !important;
}
html body #groupsPanelList .gp-empty .ll-i { width: 36px; height: 36px; margin-bottom: 10px; }

html body #imgLightbox button.ll-x {
  position: absolute;
  top: 16px;
  right: 18px;
  background: rgba(0, 0, 0, 0.45) !important;
}
html body #qsImportBanner .qsib-dismiss.ll-x { width: 28px; height: 28px; }

.ll-toast {
  position: fixed;
  /* top comes from the top-lane stack at the end of this file — it used to be
     a hardcoded 68px, which sits under the real header. max-content because
     left:50% alone caps a shrink-to-fit box at half the viewport. */
  left: 50%;
  width: max-content;
  max-width: 92vw;
  box-sizing: border-box;
  transform: translateX(-50%) translateY(-8px);
  background: var(--ll-slate);
  color: var(--ll-paper);
  border: 1px solid var(--ll-panel-border);
  padding: 9px 16px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), var(--ll-glow-brass);
  max-width: 82vw;
  text-align: center;
  /* Wraps inside the 82vw cap. nowrap clipped any longer message mid-word on a
     phone ("…then add de"), and a toast is often the only place a thing is
     explained. max-content still keeps a short one on one line. */
  white-space: normal;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  font-family: var(--ll-font);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ll-toast .ll-i { width: 14px; height: 14px; flex-shrink: 0; }
.ll-toast.ll-toast-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.ll-toast.ll-toast-out { opacity: 0; transform: translateX(-50%) translateY(-6px); }
/* A toast that asks (10-08, _llAskToast): the same pill, the question over
   its answers. Tappable, so pointer events come back on. */
.ll-toast.ll-toast-ask { flex-direction: column; gap: 9px; padding: 11px 14px 10px; border-radius: 18px; }
.ll-toast-acts { display: flex; gap: 8px; justify-content: center; width: 100%; }
.ll-toast-act {
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--ll-panel-border);
  background: transparent;
  color: var(--ll-paper);
  cursor: pointer;
}
.ll-toast-act.ll-toast-act-main { background: var(--ll-brass); border-color: var(--ll-brass); color: var(--ll-slate); }
/* The message itself, icon beside it (the toast holds more than one line now). */
.ll-toast-line { display: inline-flex; align-items: center; gap: 8px; }
/* "+2 more ›": the popups waiting behind this one, one tap to step to the next. */
.ll-toast-more {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--ll-paper) 14%, transparent);
  color: var(--ll-paper);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

html body #friendsContent,
html body #groupProfileContent,
html body #_crBody,
html body #groupsPanelList,
html body #notifSettingsPanel,
html body #privateShareModal,
html body #pinDesignSheet .pds-body,
html body dialog.ll-ask {
  scrollbar-width: thin;
  scrollbar-color: var(--ll-scroll-thumb) var(--ll-scroll-track);
}
html body .gb-qpanel-back {
  background: transparent !important;
  border: none !important;
  color: var(--ll-brass) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .gb-qpanel-back .ll-i { width: 16px; height: 16px; }

/* U4 — scale / chrome / safe-area. Insets only via --sa-* (probeable; env() is unassignable). */
#handshakePanel .hs-head {
  padding: calc(14px + var(--sa-top, 0px)) 16px 10px;
}
#handshakePanel .hs-body {
  padding: 12px 16px calc(22px + var(--sa-bottom, 0px));
  max-height: calc(88dvh - 88px - var(--sa-top, 0px) - var(--sa-bottom, 0px));
}
#hudStudio {
  padding-bottom: var(--sa-bottom, 0px);
  max-height: min(78vh, calc(100dvh - var(--sa-top, 0px) - 8px));
}
#hudStudioBody {
  padding: 14px 16px calc(28px + var(--sa-bottom, 0px)) !important;
}
#meetLocalsPanel .ml-body { padding: 16px; }
html body #liveProfileSheet .lps-body,
html body.dark #liveProfileSheet .lps-body {
  padding: 0 20px calc(24px + var(--sa-bottom, 0px)) !important;
}
html body #liveProfileSheet.lps-docked {
  bottom: calc(12px + var(--sa-bottom, 0px)) !important;
  right: calc(12px + var(--sa-right, 0px)) !important;
}
#placeSheet {
  padding: 16px 18px calc(18px + var(--sa-bottom, 0px)) !important;
}
/* ── The thumb bar ───────────────────────────────────────────────────────
   The two primary actions used to live in the screen's far corners — the
   worst reach on a phone held one-handed. They flank the centre button now:
   messages | Browse | post, one row. Vertical stays the template's bottom:10
   — the fabs sit inside the dock capsule's 6-8px padding, which lands their
   centres within 2px of the button's; overriding bottom here to "align" them
   was how they first ended up 6px off.

   Offsets are measured FROM CENTRE, not from the edges, so the bar keeps its
   shape at every width instead of drifting apart on wide screens. 148px puts
   a flanker's inner edge ~22px clear of the widest button label, and on a
   320px screen still leaves 12px to the bezel. Conditional chrome
   (close-notes, AR calibrate, booking requests) stacks upward from its own
   flank, as before. */
#mapFabStack {
  right: calc(50% - 148px);
}
#mapFabStackLeft {
  left: calc(50% - 148px);
}
/* The template menu rises out of the post button; it follows it inward.
   (#postKindMenu shared this rule until the sheet it named was deleted.) */
#fabTplMenu {
  right: calc(50% - 148px);
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  /* Generic phone dialog { width:95%; padding:15px } boxed HUD docks past the screen. */
  #liveProfileSheet,
  #locPrivSheet,
  #shareQRModal,
  #privateShareModal {
    width: 100% !important;
    max-width: min(100vw, 480px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  #handshakePanel.hs-panel {
    width: min(94vw, 420px) !important;
    margin: 10px auto !important;
    padding: 0 !important;
    max-height: min(88dvh, calc(100dvh - var(--sa-top, 0px) - var(--sa-bottom, 0px) - 16px)) !important;
  }
  #noteModal {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 !important;
    padding: 0 0 var(--sa-bottom, 0px) !important;
  }
  #meetLocalsIntroCard {
    width: min(92vw, 400px) !important;
    margin: 12px auto !important;
    padding: 0 !important;
  }
  #messengerPanel {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(14px + var(--sa-bottom, 0px)) !important;
    height: min(62dvh, calc(100dvh - var(--sa-top, 0px) - 80px)) !important;
  }
  /* The docks tighten on a phone — through the tokens, so a chosen control
     size (html[data-ll-size], which outranks :root) still wins here. */
  :root {
    --ll-dock-pad: 6px;
    --ll-dock-gap: 6px;
  }
}

/* A2 — on-theme pin glyphs (HUD shell around Note.emoji; Light + Dark). */
html body .mkr.ll-pin.mkr-circle {
  border-color: var(--ll-brass) !important;
}
html body .mkr.ll-pin.mkr-ring {
  /* `background:`, not `background-color:` — --ll-panel can hold a gradient
     now, and background-color with a gradient value is silently invalid. */
  background: var(--ll-panel) !important;
  border-color: var(--mkr-c, var(--ll-brass)) !important;
}
html body .mkr.ll-pin.mkr-diamond::before,
html body .mkr.ll-pin.mkr-pin::before,
html body .mkr.ll-pin.mkr-dot::before {
  border-color: var(--ll-brass) !important;
}
html body.dark .mkr.ll-pin.mkr-ring {
  background: var(--ll-panel) !important;
}
.pds-pack-cell.ll-pin-cell {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 3px 0 !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-size: 0 !important;
}
.pds-pack-cell.ll-pin-cell .mkr { pointer-events: none; }
.pds-pack-cell.ll-pin-cell.pds-on {
  border-color: var(--ll-brass) !important;
  background: color-mix(in srgb, var(--ll-brass) 16%, var(--ll-field)) !important;
}
.hs-epack {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.hs-epack-pin {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  pointer-events: none;
}


/* ── The top lane, stacked once instead of eight times ───────────────────────
   Everything that hangs under the header used to pick its own offset, and
   three of them picked the SAME one: the fly bar, the hangout invite card and
   the sky meeting card all sat at under-header + 6, centred, on top of each
   other — while .ll-toast used a hardcoded 68px that lands under the real
   header entirely. These are the rows, in order, and nothing may invent a
   fourth:

     row 0   the header                       0 → --ll-under-header
     row 1   pill bar + left rail             --ll-under-header, --ll-qs-band tall
             (or the fly Panel band, when flying with a Panel active)
     row 2   the mode bar (fly), then its     --ll-top-chrome + 6
             compass 12px below it            (--ll-fly-bar-h, --ll-fly-compass-h)
     row 3   the session chip (a hangout)     --ll-notice-top
     row 4   one notice card                  --ll-notice-2
     row 5   toasts and transient chips       --ll-notice-3

   Row 4 is single-occupancy by construction: the meeting and invite cards each
   remove any existing one before appending. Row 5 is separate because a toast
   fires WHILE a card is up — waving from the meeting card does exactly that —
   so folding them together put a toast through the card that spawned it.

   Declared on body, not :root, because body.fly-on overrides --ll-qs-band and
   the composites have to re-resolve against that. */
body {
  --ll-top-chrome: calc(var(--ll-under-header) + var(--ll-qs-band, 0px));
  --ll-notice-top: calc(var(--ll-top-chrome) + var(--ll-fly-bar-h, 0px) + var(--ll-fly-compass-h, 0px) + 6px);
  --ll-notice-2:   calc(var(--ll-notice-top) + var(--ll-chip-h, 0px));
  --ll-notice-3:   calc(var(--ll-notice-2) + var(--ll-card-h, 0px));
}
/* Flying hides the search bar itself, but row 1 isn't always empty: with a
   Panel active there's a name worth showing (the .pp-panel-band the fly
   chrome puts there), so the band it reserves only collapses when there's
   nothing to say — see body.fly-on.qs-all / body.fly-on:not(.qs-all) in
   index.html, next to .pp-panel-band's own rule. */

/* Row 5 — toasts and the transient chips, including the toast that was never
   keyed to the header at all.
   10-09: these rows are now the FALLBACK. LLLane (hud.js) measures the lane
   and writes each occupant's top/left/max-width inline (!important beats the
   rules here); they only apply if hud.js never ran. */
.ll-toast,
#geoNavToast,
#qsLowResultsBar {
  top: var(--ll-notice-3) !important;
}

/* LLLane's two states. Held: over the cap, or second in a one-at-a-time
   tier: hidden and untappable, but still laid out so it is measured the
   moment it gets its turn. Minimised: a long-lived notice after a pan,
   reduced to a one-line chip carrying its data-ll-min label; a tap opens it
   (hud.js catches that tap so it doesn't also press a button inside). */
[data-ll-held] { visibility: hidden !important; pointer-events: none !important; }
.ll-lane-min {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: 0 !important;
  width: max-content !important;
  cursor: pointer;
}
.ll-lane-min > * { display: none !important; }
.ll-lane-min::before {
  content: attr(data-ll-min) " \203A";
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--ll-panel-border);
  background: var(--ll-panel);
  color: var(--ll-paper);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  font: 600 12.5px/1.2 var(--ll-font);
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* The fundraiser is the lane's least urgent card; in flight it waits. */
body.fly-on #siteFundBar { display: none !important; }

/* Row 4 in flight — the "Opened for you" landing chip. It carries its own
   hard-coded top (under the header), which is exactly where the flight bar
   lives, and z 903 against #flyChrome's 4610 let the two paint through each
   other (09-25 #32, IMG_3874). On the plain map its own top is still right. */
body.fly-on #landingChip {
  top: var(--ll-notice-2) !important;
  z-index: 4620 !important;
}

/* Row 3 — "✕ Close 3 notes" (09-26 #21). Housekeeping, not an instrument:
   it used to be the first child of the right dock, so it appeared on top of
   the column right under an open popup's tail, a thumb from the ✕ Clear
   filter pill, and shifted the whole dock when it came and went. It shares
   row 3 with the hangout session chip and sits under it when both are up
   (--ll-hgchip-h), and only then counts in --ll-chip-h for rows 4 and 5. Shown
   only with 2+ notes open — a single popup has its own ✕.
   Its top counts the pill BAR, not --ll-qs-band: the band includes the left
   rail's height, and on desktop that put a centred chip 110px down the map,
   across the top of the note cards it closes. The rail is at the edge; the
   chip is in the middle. With a hangout chip up it goes under that instead. */
#closeNotesChip {
  position: fixed;
  top: calc(var(--ll-under-header) + var(--ll-qs-bar-h, 0px) + var(--ll-fly-bar-h, 0px)
            + var(--ll-fly-compass-h, 0px) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 905;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px 0 10px !important;
  min-height: 0 !important;
  border-radius: 999px;
  border: 1px solid var(--ll-panel-border);
  background: var(--ll-panel);
  color: var(--ll-paper);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 600 12.5px/1 var(--ll-font);
  white-space: nowrap;
  cursor: pointer;
}
body.hg-chip-on #closeNotesChip { top: calc(var(--ll-notice-top) + var(--ll-hgchip-h, 0px)); }
#closeNotesChip .ll-i { width: 14px; height: 14px; opacity: .8; }
#closeNotesChip:hover { border-color: var(--ll-brass); }
body.fly-on #closeNotesChip { z-index: 4620; }
body.nm-composer #closeNotesChip,
body.fs-browsing #closeNotesChip,
body.ll-view-open #closeNotesChip,
body.ar-on #closeNotesChip { display: none; }

/* The build stamp at the foot of the controls drawer. Quiet on purpose — it is
   there to be FOUND when someone asks "am I running the fix", not read every
   time the drawer opens. */
.mvp-build { margin-left:auto; margin-right:10px; font-size:10.5px;
             letter-spacing:.04em; color:rgba(107,114,128,.8);
             font-variant-numeric:tabular-nums; white-space:nowrap; }
body.dark .mvp-build { color:rgba(148,163,184,.75); }

/* ── The location nudge ("Nearby search and travel times use your area…") ────
   09-25 #38. "Use location" is the action this banner exists to offer, and it
   was a borderless 16% white pill beside an outlined "ZIP / city", so the
   primary read as disabled. It takes the app's primary style; ZIP stays the
   outlined secondary. Ids + !important because the markup styles are inline. */
#locationNudgeGps {
  background: var(--ll-brass) !important;
  color: var(--ll-slate) !important;
  box-shadow: var(--ll-glow-brass);
}
/* On a phone the banner is 234px wide (78px kept clear each side for the
   corner controls) and two nowrap buttons left the sentence ~30px: one word a
   line. The sentence takes the first row; the buttons share the second. */
@media (max-width: 640px) {
  #locationNudge { flex-wrap: wrap !important; row-gap: 8px !important; }
  #locationNudge > span:nth-child(2) { flex: 1 1 calc(100% - 36px) !important; }
  #locationNudgeGps,
  #locationNudgeZip { flex: 1 1 0 !important; }
}

/* ── A phone on its side: safe areas and full-bleed sheets (landscape audit L8)
   On its side a phone's cutout and rounded corners are on the LEFT and RIGHT,
   and every edge-to-edge bottom sheet put its first and last controls under
   them. Measured with --sa-left/right at 47px on an 844x390 screen, these
   were hittable inside the inset: the HUD studio's two mode buttons and first
   preset, the notification drawer's close, first tab and Settings button, the
   day-plan peek's ‹ and close, and the Mapbox attribution. On its side these
   sheets are capped at 560px and centred — which also stops an 800px-wide
   toggle — and the ones that stay full-bleed pad by the inset. */
@media (orientation: landscape) and (max-height: 500px) {
  #hudStudio {
    left: max(var(--sa-left, 0px), calc(50% - 280px)) !important;
    right: max(var(--sa-right, 0px), calc(50% - 280px)) !important;
  }
  #notifDrawer,
  #dpPanel.dp-chips {
    left: max(var(--sa-left, 0px), calc(50% - 280px)) !important;
    right: max(var(--sa-right, 0px), calc(50% - 280px)) !important;
    border-radius: 18px 18px 0 0 !important;
  }
  /* The pin sheet docks to the right under the header (audit 3.2): centred
     at 542px it covered the pin it was opened from. _openNotePinSheet aims
     the camera into the map on its left (_npsSideDocked). */
  #notePinSheet {
    inset: var(--ll-under-header, 64px) var(--sa-right, 0px) 0 auto;
    width: min(400px, 48vw);
    max-width: none;
    margin: 0;
    max-height: none;
    border-radius: 16px 0 0 0;
  }
}
/* Mapbox's own corner controls sit inside the side insets too (audit 1.3). */
.mapboxgl-ctrl-bottom-right { right: var(--sa-right, 0px) !important; }
.mapboxgl-ctrl-bottom-left  { left: var(--sa-left, 0px) !important; }
/* The fullscreen lane above says index.html hides it on a phone; it did not,
   because the display:flex !important here loads later and won. A phone in
   either orientation has no fullscreen to offer (audit 1.4). */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .mapboxgl-ctrl-top-right { display: none !important; }
}

/* KEEP LAST. The page checks for this after the <link> (index.html and
   preview.html, "hud.css load guard"): a failed, empty or cut-off download of
   this file leaves every sheet, icon and dock unstyled, and without the check
   the page just stays that way. Anything after this rule is not covered. */
/* ── Controls: mirrored for the left hand ────────────────────────────────
   html[data-ll-mirror="1"] swaps every dock across the centre line: the
   panels rail, its plate and its picker go right, the map-view rail goes
   left, the compass rose follows the panels rail, and the two primaries
   trade corners in the thumb bar. The pill bar's paddings swap with them,
   since each is measured from the rail on its side. Fly has its own
   pad-swap setting and its own placements, so a flight is left alone. */
html[data-ll-mirror="1"] body:not(.fly-on) #mapFabStackLeftTop { left: auto; right: calc(6px + var(--sa-right, 0px)); align-items: flex-end; }
html[data-ll-mirror="1"] body:not(.fly-on) #mapFabStackTop { right: auto; left: calc(6px + var(--sa-left, 0px)); align-items: flex-start; }
html[data-ll-mirror="1"] body:not(.fly-on) #qsLayerName { left: auto; right: 0; }
html[data-ll-mirror="1"] body:not(.fly-on) #qsLayerPicker { left: auto !important; right: calc(6px + var(--sa-right, 0px)) !important; }
html[data-ll-mirror="1"] body:not(.fly-on) #navCompass { left: auto; right: calc(12px + var(--sa-right, 0px)); }
html[data-ll-mirror="1"] body:not(.fly-on) #quickSearchBar {
  padding-left: calc(10px + var(--ll-right-rail-w, 40px) + 10px) !important;
  right: calc(var(--ll-qs-all-w, 88px) + 12px + var(--sa-right, 0px)) !important;
}
html[data-ll-mirror="1"] body:not(.fly-on) #mapFabStack { right: auto; left: calc(50% - 148px); align-items: flex-start; }
html[data-ll-mirror="1"] body:not(.fly-on) #mapFabStackLeft { left: auto; right: calc(50% - 148px); align-items: flex-end; }
html[data-ll-mirror="1"] body:not(.fly-on) #mapFabStack .ll-dock { align-items: flex-start; }
html[data-ll-mirror="1"] body:not(.fly-on) #mapFabStackLeft .ll-dock { align-items: flex-end; }
html[data-ll-mirror="1"] body:not(.fly-on) #fabTplMenu { right: auto; left: calc(50% - 148px); }
html[data-ll-mirror="1"] body:not(.fly-on) #firstPostHint { right: auto; left: 64px; }

/* ── Controls: hidden by choice ──────────────────────────────────────────
   html.ll-hide-<key>, one class per control a person can take off the map
   in Customize HUD → Controls. display, never opacity (tests_overlay_hiding
   greps for exactly that). The palette (the way to Customize and to AR), the
   ＋ and the centre button cannot be hidden. The panels rail hides whole, and
   llSyncUnderHeader measures a hidden rail as 0 so the pill bar slides over
   to the edge. The messages dock goes with its button unless the booking
   badge has something to say. */
html.ll-hide-messages #messengerFab,
html.ll-hide-findme #findMeFab,
html.ll-hide-north #northFab,
html.ll-hide-panels #mapFabStackLeftTop,
html.ll-hide-panels #qsLayerPicker,
html.ll-hide-compass #navCompass { display: none !important; }
html.ll-hide-messages #mapFabStackLeft .ll-dock:not(:has(#bookingReqFab:not([style*="display:none"]):not([style*="display: none"]))) { display: none !important; }

/* ── Map card (static/map-card.js, owner 10-07) ───────────────────────────────
   What a pin tap shows on a phone: one note's photos and facts in a compact
   card, a sliver of the next one either side, swiped sideways between the
   nearest notes while the map follows. Solid, like the pin sheet — the panel
   tint over its own slate — because the map behind is busy. Above the dock
   (it covers it, as the pin sheet does) and below the sheet (9518/9519). */
#llMapCard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9517;
  display: none;
  flex-direction: column;
  padding: 4px 0 calc(10px + var(--sa-bottom, 0px));
  font-family: var(--ll-font);
  color: var(--ll-paper);
  transition: transform .22s ease;
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
}
#llMapCard.mc-open { display: flex; }
#llMapCard .mc-grab {
  align-self: center;
  width: 40px;
  height: 4px;
  margin: 0 0 6px;
  border-radius: 2px;
  background: rgba(253, 158, 2, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
#llMapCard .mc-x {
  position: absolute;
  top: 0;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ll-panel-border);
  background: var(--ll-panel-img);
  background-color: var(--ll-slate);
  color: var(--ll-paper);
  font-size: 13px;
  line-height: 28px;
  padding: 0;
  z-index: 2;
  transform: translateY(-14px);
}
/* The track: one card in the middle, 28px of each neighbour showing, so the
   next card is plainly there to swipe to (owner, 10-07: "style it to have
   edges so you can see what's next in swiping"). */
#llMapCard .mc-track {
  display: flex;
  align-items: flex-end;   /* each card its own height; a taller neighbour never stretches it */
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 0 calc(28px + 8px);
  scroll-padding: 0 calc(28px + 8px);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
#llMapCard .mc-track::-webkit-scrollbar { display: none; }
#llMapCard .mc-slide {
  /* 100% of the track's content box, which its padding already narrowed —
     subtracting the peek again here left cards 248px wide on a 390 phone. */
  flex: 0 0 100%;
  max-width: 520px;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ll-panel-img);
  background-color: var(--ll-slate);
  /* A real edge in the theme's accent: each card reads as a card, and the
     neighbours' edges say there is more either side. */
  border: 1.5px solid var(--ll-panel-border);
  border: 1.5px solid color-mix(in srgb, var(--ll-brass) 60%, transparent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform .18s ease;
}
/* The bottom dock steps aside while the card is up: it sits behind the card
   and its gold circles showed in the gaps between cards. visibility, never
   opacity (tests_overlay_hiding). */
body.mapcard-on #mapFabStackLeft,
body.mapcard-on #mapFabStack,
body.mapcard-on #llFeatureBtn { visibility: hidden !important; pointer-events: none !important; }
/* The neighbours sit a step back. Scale only — never opacity. */
#llMapCard .mc-slide:not([data-role="cur"]) { transform: scale(.96); }
@media (min-width: 568px) {
  #llMapCard .mc-track { justify-content: safe center; }
}
#llMapCard .mc-media {
  position: relative;
  height: clamp(140px, 26vh, 220px);
  background: var(--ll-slate);
}
#llMapCard .mc-media-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--mc-tint, #3b3f55), var(--ll-slate));
}
#llMapCard .mc-excerpt {
  align-self: stretch;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: var(--ll-paper);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#llMapCard .mc-photos {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
/* Only a strip with more than one photo pages, and it keeps its overscroll:
   paging photos never moves the card. One photo lets the swipe through. */
#llMapCard .mc-photos.mc-many {
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
#llMapCard .mc-photos::-webkit-scrollbar { display: none; }
#llMapCard .mc-ph {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}
#llMapCard .mc-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
#llMapCard .mc-ph-none {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#llMapCard .mc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(12, 14, 20, 0.72);
  color: #fff;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
}
#llMapCard .mc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
#llMapCard .mc-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
#llMapCard .mc-dots i.on { background: #fff; }
#llMapCard .mc-count {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(12, 14, 20, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}
#llMapCard .mc-info { padding: 10px 14px 12px; min-width: 0; overflow-wrap: anywhere; }
#llMapCard .mc-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ll-paper);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#llMapCard .mc-meta {
  margin-top: 3px;
  font-size: 13px;
  color: var(--ll-paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* AR (10-09): which way to turn for a note that is off the screen. */
#llMapCard .mc-turn:not(:empty) {
  margin-left: 6px;
  font-weight: 700;
  color: var(--ll-paper);
}
#llMapCard .mc-chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow: hidden;
  flex-wrap: nowrap;
}
#llMapCard .mc-chip {
  flex: 0 0 auto;
  max-width: 60%;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--ll-panel-border);
  background: var(--ll-slate);
  font-size: 12px;
  color: var(--ll-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#llMapCard .mc-chip.mc-price {
  color: var(--ll-slate);
  background: var(--ll-brass);
  border-color: var(--ll-brass);
  font-weight: 700;
}
#llMapCard .mc-by {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ll-paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A 🌐 Global post (10-08): a note shared widely from far away. Its own
   edge and a tag on the first line, so it never passes for one of the pins
   around you. */
#llMapCard .mc-slide.mc-global {
  border: 2px solid #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22), 0 6px 24px rgba(0, 0, 0, 0.45);
}
#llMapCard .mc-global-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  font-weight: 800;
}
#llMapCard .mc-slide-end {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  cursor: default;
}
#llMapCard .mc-end-msg {
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--ll-paper);
}
#llMapCard .mc-end-msg span { color: var(--ll-paper-dim); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  #llMapCard, #llMapCard .mc-slide { transition: none; }
}

/* ── Map card: every item of the note, each with its terms (owner, 10-08) ───
   One page per item in the band (map-card.js pageHtml): photos, video, audio,
   links, text, polls, things, locked items, and one page per folder — a tap
   opens the folder in place, "‹ name" backs out. Each page wears its own
   caption: title, price and terms, stock, description. The dots sit on top so
   a caption never covers them. */
#llMapCard .mc-dots { top: 8px; bottom: auto; }
#llMapCard .mc-ph { overflow: hidden; overflow-wrap: anywhere; cursor: pointer; }
#llMapCard .mc-pg-fill { position: absolute; inset: 0; background: linear-gradient(135deg, var(--mc-tint, #3b3f55), var(--ll-slate)); }
#llMapCard .mc-pg-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 26px 18px 18px;
  text-align: center; color: var(--ll-paper);
}
#llMapCard .mc-pg-over { background: rgba(0, 0, 0, 0.45); color: #fff; }
#llMapCard .mc-pg-icon { font-size: 30px; line-height: 1; }
#llMapCard .mc-pg-name {
  font-size: 15px; font-weight: 700; line-height: 1.3; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#llMapCard .mc-pg-sub { font-size: 12px; opacity: .8; }
#llMapCard .mc-pg-btn {
  margin-top: 4px; padding: 5px 14px; border-radius: 16px; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3);
}
#llMapCard .mc-pg-locked { background: linear-gradient(135deg, #1e1b4b, #312e81); }
#llMapCard .mc-pg-locked .mc-pg-center { color: #fff; }
#llMapCard .mc-pg-audio { background: linear-gradient(135deg, #312e81, #0f766e); }
#llMapCard .mc-pg-audio .mc-pg-center { color: #fff; justify-content: flex-start; padding-top: 30px; }
#llMapCard .mc-pg-audio audio { width: 92%; max-width: 280px; height: 36px; }
#llMapCard .mc-pg-text { background: var(--ll-field, rgba(255, 255, 255, 0.06)); }
#llMapCard .mc-pg-textin {
  position: absolute; inset: 0; padding: 28px 16px 14px; overflow: hidden; color: var(--ll-paper);
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
#llMapCard .mc-pg-tt { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
#llMapCard .mc-pg-tb { font-size: 13.5px; line-height: 1.45; white-space: pre-line; }
#llMapCard .mc-pg-row { font-size: 13px; line-height: 1.5; }
#llMapCard .mc-pg-row b { color: var(--ll-paper-dim); font-weight: 600; margin-right: 4px; }
#llMapCard .mc-pg-object { background: var(--ll-field, rgba(255, 255, 255, 0.06)); }
#llMapCard .mc-pg-objin { position: absolute; inset: 0; padding: 26px 10px 10px; overflow: hidden; }
#llMapCard .mc-pg-host {
  position: absolute; top: 8px; left: 8px; max-width: 70%; padding: 2px 9px; border-radius: 10px;
  background: rgba(12, 14, 20, 0.72); color: #fff; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The caption over the page's foot. */
#llMapCard .mc-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); color: #fff; font-size: 12px;
  text-align: left;
}
#llMapCard .mc-cap-top { display: flex; align-items: center; gap: 8px; }
#llMapCard .mc-cap-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#llMapCard .mc-cap-row { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; margin-top: 3px; }
#llMapCard .mc-ichip {
  flex: 0 0 auto;
  padding: 1px 7px; border-radius: 9px; background: rgba(255, 255, 255, 0.2); white-space: nowrap;
  font-size: 11.5px; line-height: 18px;
}
#llMapCard .mc-ichip.mc-iprice { background: var(--ll-brass); color: #111; font-weight: 700; }
#llMapCard .mc-ichip.mc-iwarn { background: #b45309; color: #fff; }
#llMapCard .mc-cart {
  flex: 0 0 auto; height: 22px;
  padding: 1px 9px; border-radius: 9px; border: none; background: #fff; color: #111;
  font-size: 11.5px; font-weight: 700; line-height: 18px; cursor: pointer;
}
#llMapCard .mc-cart.in-cart { background: #16a34a; color: #fff; }
/* Compact by design inside a caption: the global button touch-floor made the
   🛒 and the folder chip 44px tall over the photo. They keep a 28-30px box. */
#llMapCard .mc-cart { min-height: 0 !important; height: 26px !important; padding: 0 10px !important; line-height: 26px !important; }
#llMapCard .mc-fback { min-height: 0 !important; height: 30px !important; padding: 0 12px !important; line-height: 30px !important; }
#llMapCard .mc-cap-d {
  margin-top: 3px; opacity: .92; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#llMapCard .mc-fback {
  position: absolute; top: 6px; left: 8px; z-index: 2; max-width: 60%; padding: 4px 11px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(12, 14, 20, 0.78);
  color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
#llMapCard .mc-in-folder .mc-dots { left: auto; right: 54px; justify-content: flex-end; }

/* The next event's RSVP on the card (owner, 10-08). Compact like the caption
   buttons — the global touch floor would make each 44px. */
#llMapCard .mc-rsvp { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#llMapCard .mc-rbtn {
  min-height: 0 !important; height: 30px !important; padding: 0 14px !important; line-height: 28px !important;
  border-radius: 15px; border: 1px solid var(--ll-panel-border); background: var(--ll-field, transparent);
  color: var(--ll-paper); font-size: 13px; font-weight: 700; cursor: pointer;
}
#llMapCard .mc-rbtn.on-going { background: #16a34a; border-color: #16a34a; color: #fff; }
#llMapCard .mc-rbtn.on-maybe { background: #d97706; border-color: #d97706; color: #fff; }
#llMapCard .mc-rcount { font-size: 12px; color: var(--ll-paper-dim); }
/* Book (10-16): the same pill as Going, in the booking teal. */
#llMapCard .mc-book { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
#llMapCard .mc-bbtn { background: #0f766e; border-color: #0f766e; color: #fff; flex-shrink: 0; }
#llMapCard .mc-bhint { font-size: 12px; color: var(--ll-paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* The special cards (owner, 10-08): ✨ picks from away, 🔔 the unread digest,
   🤝 a Meet match, 🎮 a game, and the "Explore around …?" ask. The same frame
   as a note card: a band of the same height, then the info strip. */
#llMapCard .mc-slide.mc-remote {
  border: 2px solid #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22), 0 6px 24px rgba(0, 0, 0, 0.45);
}
#llMapCard .mc-int-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: rgba(167, 139, 250, 0.18); color: #a78bfa; font-weight: 800;
}
#llMapCard .mc-sp-band {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; box-sizing: border-box; overflow: hidden;
  background: linear-gradient(135deg, var(--mc-tint, #3b3f55), var(--ll-slate));
}
#llMapCard .mc-sp-big { font-size: 46px; line-height: 1; }
#llMapCard .mc-sp-head { font-size: 17px; font-weight: 800; color: #fff; text-align: center; }
#llMapCard .mc-sp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#llMapCard .mc-sp-av { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.85); }
#llMapCard .mc-sp-av0 { display: flex; align-items: center; justify-content: center; background: var(--ll-brass); color: #111; font-size: 40px; font-weight: 800; }
#llMapCard .mc-sp-meetband { --mc-tint: #0f766e; }
#llMapCard .mc-sp-askband { --mc-tint: #6d28d9; }
#llMapCard .mc-nlist { --mc-tint: #1e3a8a; justify-content: flex-start; align-items: stretch; gap: 4px; padding: 10px; overflow-y: auto; }
#llMapCard .mc-nrow {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 0 !important; height: 34px !important; padding: 0 10px !important;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 13px; text-align: left; cursor: pointer;
}
#llMapCard .mc-nico { flex: 0 0 auto; font-size: 16px; }
#llMapCard .mc-ntxt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#llMapCard .mc-nago { flex: 0 0 auto; font-size: 11px; opacity: .75; }
#llMapCard .mc-sp-acts { display: flex; gap: 6px; margin-top: 8px; }
#llMapCard .mc-sp-lead { font-size: 12px; color: var(--ll-paper-dim); margin-right: 2px; align-self: center; }
#llMapCard .mc-sp-done { font-weight: 700; color: var(--ll-paper); }
#llMapCard .mc-sp-go { background: var(--ll-brass) !important; border-color: var(--ll-brass) !important; color: #111 !important; }
#llMapCard .mc-sp-bar { height: 6px; border-radius: 3px; background: var(--ll-field, rgba(255, 255, 255, 0.1)); overflow: hidden; margin-top: 8px; }
#llMapCard .mc-sp-bar i { display: block; height: 100%; background: #16a34a; }

/* ── Languages (10-15, docs/i18n.md) ─────────────────────────────────────
   The Translate / Show original link under a post's words. Quiet: it sits
   under every post in another language, so it must read as a footnote. */
.ll-tr-link {
    display: inline-block; background: none; border: 0; padding: 2px 0; margin: 2px 0 0;
    font: inherit; font-size: 11px; font-weight: 600; color: var(--ll-accent, #667eea);
    cursor: pointer; text-decoration: none;
}
.ll-tr-link:hover { text-decoration: underline; }
.ll-tr-link[data-tr-state="busy"] { opacity: .6; cursor: progress; }
.mc-info .ll-tr-link { margin-top: 1px; }

/* Right-to-left (Arabic), first pass. The map's chrome — header, quick-search
   row, the floating button stacks — is positioned with physical left/right
   all over, so mirroring only its flex rows (what dir=rtl does on its own)
   put the chips under the Panels button. The chrome keeps its geometry; the
   words inside it read in their own direction. Panels, sheets, dialogs and
   cards flow right-to-left as dir=rtl makes them. A full mirror is its own
   piece of work (docs/i18n.md). */
[dir="rtl"] header,
[dir="rtl"] #quickSearchBar,
[dir="rtl"] [id^="mapFabStack"],
[dir="rtl"] #pv-header { direction: ltr; }
[dir="rtl"] header :is(span, button, a, input, label, div),
[dir="rtl"] #quickSearchBar .qs-btn,
[dir="rtl"] #pv-header :is(span, button) { unicode-bidi: plaintext; }
[dir="rtl"] #search-input { direction: rtl; text-align: right; }

:root { --ll-hud-css-end: 1; }