:root {
    --bg0: #0b0712;            /* page */
    --bg1: #120d1d;            /* bars, list */
    --bg2: #1a1228;            /* sheet, cards */
    --bg3: #211632;            /* inputs, wells, hover */
    --stroke: rgba(219,203,255,.12);
    --stroke2: rgba(219,203,255,.07);
    --txt: #f7f2ff;
    --txt2: #b9abc9;
    --txt3: #8a7e99;
    --accent: #8b5cf6;         /* iris */
    --accent2: #a78bfa;        /* hover */
    --accent3: #c084fc;        /* active, highlight */
    --badge: #f0b86b;          /* champagne */
    --lav: #a78bfa;            /* fresh/new */
    --hot: #ff4d5e;
    --warm: #ffa22e;
    --cool: #7e8b9d;
    --ok: #2fd57b;
    --teal: #2dd4bf;
    --shadow-lg: 0 1px 2px rgba(0,0,0,.55), 0 18px 48px rgba(0,0,0,.6);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; background: var(--bg0); color: var(--txt);
    font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* app shell: offscreen-parked panels (transformed) must never make the
       document itself scrollable (the desktop black-bar bug) */
    overflow: hidden;
    overscroll-behavior: none; }
  #app { display: flex; flex-direction: column; height: 100%; height: 100dvh; }
  button { font: inherit; cursor: pointer; }
  svg.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; display: block; }

  header { display: flex; align-items: center; gap: 10px; position: relative;
    padding: calc(env(safe-area-inset-top) + 7px) 12px 7px; z-index: 1000; }
  /* The glass lives on its own layer so background, blur, and border fade
     as ONE surface. Tap the map: the bar goes strongly transparent and
     stays that way. Hover it (desktop) or tap anything on it: it returns.
     The buttons keep their own backgrounds throughout. */
  header::before { content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgba(16,11,26,.86); backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid var(--stroke2);
    transition: opacity .35s; }
  header.faded::before { opacity: .08; }
  @media (hover: hover) { header.faded:hover::before { opacity: 1; } }
  header.faded .iconbtn, header.faded .chipDays { background: rgba(16,11,26,.55); }
  /* the wordmark is the one header control v17's fade left without a chip:
     8.5px white on bright imagery vanished on phones (no hover to unfade).
     Same treatment as its siblings, so KNOCK (and its Today-card tap target)
     stays readable in the faded state. */
  header.faded .brand { background: rgba(16,11,26,.55); border-radius: 9px; }
  header.faded .brand span { text-shadow: 0 1px 6px rgba(0,0,0,.8); }
  /* the wordmark lives vertical (a slim spine, ~50px handed to the chips)
     and unfolds to full KNOCK on hover where a pointer exists */
  .brand { display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 15px; height: 34px; transition: width .35s ease; }
  .brand span { display: block; white-space: nowrap; font-weight: 800;
    font-size: 8.5px; letter-spacing: 1.6px; color: var(--txt); transform: rotate(-90deg);
    transition: transform .35s ease, font-size .35s ease, letter-spacing .35s ease; }
  @media (hover: hover) {
    .brand:hover { width: 64px; }
    .brand:hover span { transform: none; font-size: 14.5px; letter-spacing: 2px; }
  }
  .chipDays { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px;
    background: rgba(219,203,255,.05); border: 1px solid var(--stroke2); border-radius: 11px;
    color: var(--txt); font-weight: 700; font-size: 12.5px; white-space: nowrap;
    font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
  .chipDays svg { color: var(--txt3); }
  .chipDays.open { background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 2px 10px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.18); }
  .chipDays.open svg { color: rgba(255,255,255,.8); }

  #daysTray { position: absolute; top: 0; left: 0; right: 0; z-index: 1300; margin: 10px 12px 0;
    background: rgba(24,16,38,.97); backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid var(--stroke); border-radius: 16px; padding: 14px 16px 12px;
    box-shadow: var(--shadow-lg); }
  @media (min-width: 700px) { #daysTray { left: auto; width: 380px; } }
  .trayTop { display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px; font-size: 11px; color: var(--txt3); letter-spacing: .06em;
    text-transform: uppercase; font-weight: 700; }
  .trayTop b { color: var(--txt); font-size: 15px; text-transform: none; letter-spacing: 0;
    font-variant-numeric: tabular-nums; }
  .dualWrap { position: relative; height: 34px; touch-action: none; }
  .dualTrack { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: 3px;
    background: rgba(219,203,255,.14); }
  .dualFill { position: absolute; top: 0; bottom: 0; border-radius: 3px;
    /* the fill IS the age legend: young edge yellow, middle green, old edge red */
    background: linear-gradient(90deg, #ffd60a, #2fd57b 50%, #ff4d5e); }
  .dualWrap input[type=range] { -webkit-appearance: none; appearance: none; position: absolute;
    left: 0; right: 0; top: 0; width: 100%; height: 34px; margin: 0; background: transparent;
    pointer-events: none; }
  .dualWrap input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 34px; }
  .dualWrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto;
    width: 22px; height: 22px; border-radius: 50%; background: #fff; border: none; margin-top: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 5px rgba(139,92,246,.25); }
  .dualWrap input[type=range]::-moz-range-track { background: transparent; height: 34px; }
  .dualWrap input[type=range]::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px;
    border-radius: 50%; background: #fff; border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 5px rgba(139,92,246,.25); }
  #rLo { z-index: 4; } #rHi { z-index: 5; }
  #prLo { z-index: 4; } #prHi { z-index: 5; }
  .dualFillP { background: var(--accent); opacity: .85; }
  #daysTray { max-height: calc(100dvh - 110px); overflow-y: auto; }
  .trayRow { display: flex; justify-content: space-between; align-items: center; margin-top: 12px;
    font-size: 13px; color: var(--txt2); font-weight: 600; }
  .trayRow small { color: var(--txt3); font-weight: 500; }
  input.sw { -webkit-appearance: none; appearance: none; width: 42px; height: 25px;
    border-radius: 999px; background: var(--bg3); border: 1px solid var(--stroke2);
    position: relative; cursor: pointer; transition: background .15s; margin: 0; }
  input.sw::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.5); }
  input.sw:checked { background: var(--accent); border-color: var(--accent); }
  input.sw:checked::after { transform: translateX(17px); }

  .brand { cursor: pointer; }
  #todayCard { position: absolute; top: 0; left: 0; right: 0; z-index: 1400; margin: 10px 12px 0;
    background: rgba(24,16,38,.97); backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid var(--stroke); border-radius: 16px; padding: 14px 16px 16px;
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 90px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  @media (min-width: 700px) { #todayCard { left: auto; width: 380px; } }
  /* pin editor: same glass panel as the Today card, centred */
  #pinEditor { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1600; margin: 0;
    background: rgba(24,16,38,.98); backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid var(--stroke); border-radius: 16px; padding: 14px 16px 16px;
    box-shadow: var(--shadow-lg); }
  @media (min-width: 700px) { #pinEditor { left: 50%; right: auto; transform: translateX(-50%); width: 380px; } }
  #pinEditor label { display: block; margin: 12px 0 5px; font-size: 12px; color: var(--txt2); }
  #pinEditor input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px;
    background: var(--fill); border: 1px solid var(--stroke2); border-radius: 10px; color: var(--txt);
    font-family: inherit; font-size: 15px; }
  .pinEditKv { color: var(--txt3); font-size: 12px; margin-top: 2px; }
  .pinEditBtns { display: flex; gap: 10px; margin-top: 16px; }
  .pinEditBtns button { flex: 1; height: 46px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 700; }
  /* dot-size sliders + live sample */
  .pinSizeRow { display: flex; align-items: center; gap: 10px; }
  .pinSizeRow input[type=range] { flex: 1; min-width: 0; }
  .pinSizeSample { flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
  #pinSizeDot { display: block; border-radius: 50%; background: var(--accent); border: 1.5px solid #fff; }
  .tcTop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .tcTop b { font-size: 17px; font-weight: 800; letter-spacing: .02em; }
  .tcTop span { color: var(--txt3); font-size: 12px; flex: 1; }
  .tcLine { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 11px 2px; border: none; background: none; color: var(--txt2); font-size: 14px;
    border-bottom: 1px solid var(--stroke2); font-family: inherit; }
  .tcLine b { color: var(--txt); font-size: 16px; font-variant-numeric: tabular-nums; }
  .tcBtn { cursor: pointer; }
  .tcBtn::after { content: '›'; margin-left: auto; color: var(--accent2); font-size: 19px; }
  .tcRoute { width: 100%; height: 48px; margin-top: 14px; border: none; border-radius: 12px;
    background: var(--accent); color: #fff; font-weight: 750; font-size: 15px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.16); }
  .tcRoute:active { filter: brightness(.9); }

  .pxlWrap { background: none; border: none; }
  .pxl { display: inline-block; cursor: pointer; background: rgba(11,7,18,.82); color: var(--txt);
    font-size: 10px; font-weight: 700; padding: 1.5px 5px; border-radius: 6px;
    border: 1px solid var(--stroke2); white-space: nowrap;
    font-variant-numeric: tabular-nums; }
  .pxl.pxlR { border-color: rgba(255,162,46,.75); } /* amber ring = likely renter door */
  .presets { display: flex; gap: 6px; margin-top: 10px; }
  .presets button { flex: 1; height: 34px; border: 1px solid var(--stroke2);
    background: rgba(219,203,255,.04); color: var(--txt2); border-radius: 9px;
    font-size: 12px; font-weight: 650; }
  .presets button.on { background: rgba(139,92,246,.18); color: #d8c8ff; border-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--accent); }
  .trayCount { margin-top: 9px; font-size: 11.5px; color: var(--txt3); text-align: right;
    font-variant-numeric: tabular-nums; }
  .spacer { flex: 1; }
  .iconbtn { display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: none; background: transparent;
    color: var(--txt2); border-radius: 11px; text-decoration: none;
    position: relative; transition: background .15s, color .15s; }
  .iconbtn::after { content: ''; position: absolute; inset: -4px; }
  .iconbtn:hover, .iconbtn:active { background: var(--bg3); color: var(--txt); }
  .iconbtn.on { background: var(--accent); color: #fff; }

  .rtBadge { background: none; border: none; }
  .rtB { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #5b34c7;
    font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center;
    border: 2.5px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
  .rtList { max-height: 38vh; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; margin-bottom: 4px; }
  .rtRow { display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--stroke2); }
  .rtRow .mid { flex: 1; min-width: 0; }
  .rtRow .addr { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .rtRow .sub { color: var(--txt3); font-size: 11.5px; }
  .rtN { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
    font-weight: 750; font-size: 12px; display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; }
  .rtX { width: 38px; height: 38px; border: none; background: transparent; color: var(--txt3);
    font-size: 13px; flex: 0 0 auto; cursor: pointer; }
  .rtX:hover { color: var(--hot); }

  #demoBanner { background: #2b1f0e; color: var(--badge); font-size: 12px; text-align: center;
    padding: 6px 10px; border-bottom: 1px solid #43350d; }

  #main { position: relative; flex: 1; min-height: 0; overflow: visible; }
  /* the map runs up UNDER the top bar so the bar can actually go transparent
     over it: it used to stop at the bar's bottom edge, so every transparency
     attempt just revealed the page background and read as a solid bar
     (document scroll stays locked by html/body overflow:hidden) */
  #map { position: absolute; left: 0; right: 0; bottom: 0;
    top: calc(-48px - env(safe-area-inset-top, 0px)); background: #060409; }

  #statsRail { position: absolute; top: 0; left: 0; right: 0; z-index: 600;
    display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
    mask-image: linear-gradient(90deg, #000 84%, transparent); }
  #statsRail::-webkit-scrollbar { display: none; }
  .stat { flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
    background: rgba(11,7,18,.74); backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid var(--stroke2); box-shadow: var(--shadow-sm);
    border-radius: 999px; padding: 7px 13px; min-height: 32px; font-size: 11.5px; color: var(--txt3);
    white-space: nowrap; font-weight: 600; letter-spacing: .02em; font-family: inherit; }
  .stat b { color: var(--txt); font-size: 13px; font-variant-numeric: tabular-nums; }
  .stat i { width: 8px; height: 8px; border-radius: 50%; display: block; }
  button.statT { cursor: pointer; }
  .statT.off { opacity: .4; }
  .statT.off i { background: var(--txt3) !important; }
  button.statW { cursor: pointer; color: #ffd28a; border-color: rgba(255,178,64,.35); }
  .statW i { width: 8px; height: 8px; border-radius: 50%; background: #ffb240; display: block; }

  #list { position: absolute; inset: 0; overflow-y: auto; background: var(--bg0); z-index: 1100;
    padding-bottom: 60px; -webkit-overflow-scrolling: touch; }
  .listHead { position: sticky; top: 0; z-index: 5; background: var(--bg0);
    padding: 10px 14px 9px; border-bottom: 1px solid var(--stroke2);
    display: flex; flex-direction: column; gap: 8px; }
  .searchRow { display: flex; gap: 6px; }
  #listSearch { flex: 1; min-width: 0; background: var(--bg3); border: 1px solid var(--stroke2);
    color: var(--txt); border-radius: 11px; padding: 9px 12px; font-size: 16px;
    font-family: inherit; -webkit-appearance: none; }
  /* segmented control: recessed well, active side = solid iris pill.
     inner radius 8 = outer 11 - padding 3, so the corners stay concentric */
  .scopeTgl { display: flex; flex: 0 0 auto; align-items: stretch; gap: 2px;
    background: var(--bg3); border: 1px solid var(--stroke2);
    border-radius: 11px; padding: 3px; }
  .scopeTgl button { border: none; background: transparent; color: var(--txt3);
    font-size: 11.5px; font-weight: 650; padding: 0 11px; border-radius: 8px;
    font-family: inherit; cursor: pointer; transition: background .15s, color .15s; }
  .scopeTgl button.on { background: var(--accent); color: #fff;
    box-shadow: 0 1px 5px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.16); }
  /* activity drill-in banner (tap "today"/"week" stat): loud enough that the
     narrowed list can never read as missing data */
  /* list tools: totals + views/select/export */
  #listTools { display: flex; align-items: center; gap: 7px; padding: 8px 2px 0; }
  #listTotals { flex: 1; min-width: 0; font-size: 11.5px; color: var(--txt3); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ltBtn { height: 30px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--stroke2);
    background: rgba(219,203,255,.05); color: var(--txt2); font-size: 11.5px; font-weight: 700;
    font-family: inherit; cursor: pointer; flex: 0 0 auto; }
  .ltBtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .rowCk { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--stroke);
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: transparent; }
  .row.sel .rowCk { background: var(--accent); border-color: var(--accent); color: #fff; }
  .row.sel { background: rgba(139,92,246,.10); }
  .actBar { display: flex; align-items: center; gap: 8px;
    background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.3);
    border-radius: 11px; padding: 8px 6px 8px 13px;
    color: #d8c8ff; font-size: 12.5px; font-weight: 650; }
  .actBar span { flex: 1; }
  .actBar button { border: none; background: none; color: var(--txt3);
    font-size: 13px; padding: 2px 10px; cursor: pointer; }
  .actBar button:hover { color: var(--txt); }
  #listSearch::placeholder { color: var(--txt3); }
  #listSearch:focus { outline: none; border-color: rgba(139,92,246,.55); }
  .sortRow { display: flex; gap: 6px; }
  .sortRow button { flex: 1; height: 32px; border: 1px solid var(--stroke2);
    background: rgba(219,203,255,.04); color: var(--txt3); border-radius: 9px;
    font-size: 12px; font-weight: 650; font-family: inherit; cursor: pointer; }
  .sortRow button.on { background: rgba(139,92,246,.18); color: #d8c8ff;
    border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
  .row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 56px;
    border-bottom: 1px solid var(--stroke2); cursor: pointer; }
  .row:hover, .row:active { background: var(--bg1); }
  .row .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
    box-shadow: 0 0 0 3px rgba(219,203,255,.07); }
  .row .dot.triDot { border-radius: 0; background: #f7f2ff; box-shadow: none;
    clip-path: polygon(50% 6%, 96% 92%, 4% 92%); }
  .row .mid { flex: 1; min-width: 0; }
  .row .addr { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.01em; }
  .row .sub { color: var(--txt3); font-size: 12px; margin-top: 1px; }
  .pill { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px;
    flex: 0 0 auto; letter-spacing: .04em; text-transform: uppercase; }

  #sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: rgba(24,16,38,.97); backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid var(--stroke);
    border-radius: 22px 22px 0 0;
    padding: 6px 16px calc(env(safe-area-inset-bottom) + 14px);
    box-shadow: var(--shadow-lg);
    transform: translateY(110%); transition: transform .26s cubic-bezier(.3,.9,.3,1); }
  /* tall cards (due box + owner box + long note) must scroll on short screens
     instead of clipping under #main's overflow:hidden; the drag-dismiss gesture
     lives on .handle, so the body itself is free to pan */
  #sheetBody { max-height: calc(100dvh - 150px); overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
  #sheet.open { transform: translateY(0); }
  #sheet.dragging { transition: none; }
  @media (min-width: 700px) {
    #sheet { left: 14px; right: auto; bottom: 14px; width: 402px;
      border: 1px solid var(--stroke); border-radius: 20px;
      transform: translateY(calc(100% + 28px)); }
    #sheet.open { transform: translateY(0); }
    .handle { display: none; }
  }
  #main.sheetOpen .leaflet-bottom { opacity: 0; pointer-events: none; }
  @media (min-width: 700px) { #main.sheetOpen .leaflet-bottom.leaflet-right { opacity: 1; pointer-events: auto; } }
  .leaflet-bottom { transition: opacity .2s; }
  /* the weather pill steps aside with the map controls while a card is open */
  #main.sheetOpen #wxPill, #main.sheetOpen #wxPanel { opacity: 0; pointer-events: none; }
  #wxPill, #wxPanel { transition: opacity .2s; }

  .handle { touch-action: none; width: 44px; height: 5px; border-radius: 3px; background: rgba(219,203,255,.2);
    margin: 5px auto 10px; position: relative; cursor: ns-resize; }
  /* the visible bar is 5px; the finger gets a much bigger invisible grip */
  .handle::after { content: ''; position: absolute; inset: -14px -48px; }
  .sheetTop { display: flex; align-items: flex-start; gap: 8px; padding-top: 4px; padding-right: 44px; }
  .sheetTop .addr { font-size: 17.5px; font-weight: 750; flex: 1; letter-spacing: -.015em; }
  .closeBtn { width: 38px; height: 38px; border: none; background: var(--bg3);
    color: var(--txt2); border-radius: 50%; font-size: 13px; flex: 0 0 auto; }
  /* the X is pinned to the card itself, outside the scrolling body, so it is
     always in the upper right no matter how far the card is scrolled */
  #sheetX { position: absolute; top: 10px; right: 12px; z-index: 6; }
  @media (pointer: coarse) {
    #sheetX { width: 46px; height: 46px; font-size: 16px; top: 7px; right: 9px; }
    .sheetTop { padding-right: 50px; }
  }
  /* +KNOCK on the card: a left spine in the wordmark's own recipe (rotated
     letters, no box), running beside the address and info, above the photo */
  .shHead { display: flex; align-items: stretch; gap: 4px; }
  .shHeadBody { flex: 1; min-width: 0; }
  .knockBtn { width: 26px; height: 74px; border: 1px solid var(--stroke2); background: rgba(219,203,255,.05);
    border-radius: 9px; color: var(--txt3); flex: 0 0 auto; align-self: center; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0; }
  .knockBtn span { display: block; white-space: nowrap; font-weight: 800;
    font-size: 10.5px; letter-spacing: 1.6px; transform: rotate(-90deg); font-family: inherit; }
  .knockBtn:hover { color: var(--txt); background: rgba(219,203,255,.09); }
  .knockBtn.on { color: var(--accent2); border-color: rgba(180,140,255,.45); background: rgba(139,92,246,.1); }
  /* ---- routes v2: run bar, scrubber, hub, builder ---- */
  #rtBar { position: absolute; top: 0; left: 0; right: 0; z-index: 700;
    background: rgba(16,11,26,.93); backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid var(--stroke2); padding: 8px 12px 9px; }
  #rtScrub { display: flex; gap: 5px; align-items: center; touch-action: none;
    cursor: pointer; padding: 3px 1px 8px; }
  .rsDot { flex: 1; height: 27px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--txt3);
    background: var(--bg3); border: 1px solid var(--stroke2); min-width: 0; pointer-events: none; }
  .rsDot.done { color: #fff; border-color: transparent; }
  .rsDot.cur { outline: 2px solid var(--accent); outline-offset: 1.5px; color: var(--txt); }
  .rtBarRow { display: flex; align-items: center; gap: 8px; }
  .rtBarRow b { font-size: 12.5px; color: var(--txt2); flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rtBarBtn { height: 30px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--stroke2);
    background: rgba(219,203,255,.06); color: var(--txt); font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer; flex: 0 0 auto; }
  #rtHub, #rtStops, #lvPanel { position: fixed; inset: 0; z-index: 2000; background: rgba(6,3,12,.45); }
  .rtHubIn { position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
    width: min(430px, calc(100vw - 20px)); max-height: min(74vh, 640px); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(24,16,38,.97); backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid var(--stroke); border-radius: 16px; padding: 14px 16px 16px;
    box-shadow: var(--shadow-lg); }
  .rtHubHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .rtHubHead b { font-size: 15px; }
  .rtHubBtns { display: flex; gap: 8px; margin-bottom: 10px; }
  .rtHubBtns button { flex: 1; height: 42px; border-radius: 11px; border: 1px solid var(--stroke2);
    background: rgba(139,92,246,.14); color: var(--txt); font-weight: 700; font-size: 12.5px;
    font-family: inherit; cursor: pointer; }
  .rtStartRow { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
  .rtStartRow span { font-size: 11.5px; color: var(--txt3); font-weight: 600; flex: 0 0 auto; margin-right: 2px; }
  .rtStartRow button { flex: 1; height: 32px; border-radius: 9px; border: 1px solid var(--stroke2);
    background: transparent; color: var(--txt2); font-size: 11.5px; font-weight: 700;
    font-family: inherit; cursor: pointer; min-width: 0; white-space: nowrap; }
  .rtStartRow button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .rtStartPin { width: 26px; height: 26px; border-radius: 50% 50% 50% 4px; background: var(--accent);
    border: 2.5px solid #fff; color: #fff; font-weight: 800; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.5); transform: rotate(-45deg); }
  .rtStartPin b { transform: rotate(45deg); }
  .rhRow { display: flex; align-items: center; gap: 9px; padding: 11px 2px;
    border-bottom: 1px solid var(--stroke2); }
  .rhRow .mid { flex: 1; min-width: 0; }
  .rhRow .addr { font-weight: 650; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rhRow .sub { font-size: 11.5px; color: var(--txt3); margin-top: 2px; }
  .rhBtn { height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--stroke2);
    background: rgba(219,203,255,.06); color: var(--txt); font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer; flex: 0 0 auto; }
  .rhBtn.go { background: var(--accent); border-color: var(--accent); color: #fff; }
  .rtStopRow { cursor: pointer; }
  #rtBuildBar { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    left: 50%; transform: translateX(-50%); z-index: 1150; display: flex; gap: 9px; align-items: center;
    background: rgba(24,16,38,.96); border: 1px solid var(--accent); border-radius: 999px;
    padding: 8px 9px 8px 16px; box-shadow: var(--shadow-lg); white-space: nowrap; max-width: calc(100vw - 20px); }
  #rtBuildBar span { font-size: 12.5px; font-weight: 700; color: var(--txt); overflow: hidden; text-overflow: ellipsis; }
  #rtBuildBar button { height: 32px; padding: 0 14px; border-radius: 999px; border: none;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 12.5px;
    font-family: inherit; cursor: pointer; flex: 0 0 auto; }
  #rtBuildBar #rtBuildCancel { background: transparent; color: var(--txt3);
    padding: 0 8px; font-weight: 700; font-size: 14px; }
  .rbArr { width: 32px; height: 34px; border-radius: 8px; border: 1px solid var(--stroke2);
    background: transparent; color: var(--txt2); font-size: 14px; cursor: pointer; flex: 0 0 auto;
    font-family: inherit; }
  #rbStart, #rbEnd { background: var(--bg3); color: var(--txt); border: 1px solid var(--stroke2);
    border-radius: 8px; height: 32px; font-family: inherit; font-size: 12.5px; }

  /* offline-queue chip: appears only while knocks are waiting to sync */
  #syncChip { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 900;
    background: rgba(240,184,107,.16); border: 1px solid rgba(240,184,107,.45); color: var(--badge);
    border-radius: 999px; padding: 6px 13px; font-size: 11.5px; font-weight: 700; cursor: pointer;
    font-family: inherit; white-space: nowrap;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  #shPhoto { margin: 2px 0 10px; position: relative; }
  #shPhoto:empty { margin: 0; }
  #shPhoto img { width: 100%; height: 136px; object-fit: cover; border-radius: 12px;
    border: 1px solid var(--stroke2); display: block;
    -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
  /* the quiet invitation: double-tap frees the photo inside its frame */
  #shPhoto:not(:empty)::after { content: '\2922'; position: absolute; right: 9px; bottom: 7px;
    font-size: 13px; line-height: 1; color: rgba(255,255,255,.38);
    text-shadow: 0 1px 2px rgba(0,0,0,.65); pointer-events: none; }
  #shPhoto.shZoom { overflow: hidden; border-radius: 12px; touch-action: none;
    border: 1px solid rgba(139,92,246,.5); }
  #shPhoto.shZoom img { touch-action: none; object-fit: contain; background: #0b0712; }
  #shPhoto.shZoom::after { content: '\21BA'; color: rgba(255,255,255,.6); }
  #shPhoto.shZoom img { border-radius: 0; border: none; }
  .rowKnock { border: 1px solid var(--stroke2); background: rgba(219,203,255,.05); color: var(--txt3);
    border-radius: 8px; width: 26px; height: 48px; padding: 0; flex: 0 0 auto; align-self: center;
    display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .rowKnock span { display: block; white-space: nowrap; font-family: inherit; font-weight: 800;
    font-size: 10px; letter-spacing: 1.4px; transform: rotate(-90deg); }
  .rowKnock.on { color: var(--accent2); border-color: var(--accent); background: rgba(139, 92, 246, .14); }
  .closeBtn:hover { color: var(--txt); }
  .meta { color: var(--txt2); font-size: 13px; margin: 4px 0 10px; }
  .meta .dimline { color: var(--txt3); }
  .ago { font-weight: 700; }
  .ownerBox { border: 1px solid rgba(139,92,246,.26); background: rgba(139,92,246,.08);
    border-radius: 12px; padding: 9px 12px; font-size: 13px; color: var(--txt2);
    margin-bottom: 10px; }
  .ownerBox b { color: var(--txt); }
  .ownerBox .ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px;
    margin-right: 5px; color: var(--accent2); }
  .warnTxt { color: var(--warm); }
  .okTxt { color: var(--ok); }
  .lookupBtn { height: 42px; width: 100%; border: 1px dashed rgba(139,92,246,.45);
    background: rgba(139,92,246,.09); color: var(--accent2); border-radius: 12px;
    font-size: 13.5px; font-weight: 650; margin-bottom: 10px; transition: background .15s; }
  .lookupBtn:hover { background: rgba(139,92,246,.16); }
  .compassBtn { display: flex; align-items: center; justify-content: center; }
  .compassNeedle { transition: transform .12s linear; }
  .youCone { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0;
    border-left: 11px solid transparent; border-right: 11px solid transparent;
    border-bottom: 26px solid rgba(139,92,246,.7);
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9));
    transform-origin: 50% 100%; margin: -26px 0 0 -11px;
    transition: opacity .3s; pointer-events: none; }
  .youCone.hasHeading { opacity: 1; }
  /* field phones: gloves and glare need bigger-than-34px effective targets on
     the map controls (the header buttons already do this), and the bottom
     stack must clear the iPhone home indicator */
  @media (pointer: coarse) {
    .leaflet-bar a { position: relative; }
    .leaflet-bar a::after { content: ''; position: absolute; inset: -4px; }
  }
  .leaflet-bottom { margin-bottom: calc(env(safe-area-inset-bottom, 0px)); }
  /* iOS double-tap zoom hijacks quick repeat taps on chrome that floats over the
     map; manipulation keeps taps instant and kills the zoom on these surfaces */
  #wxPill, #wxPanel, .statusGrid button, .actions a, .againBtn, .lookupBtn,
  .factsBtn, .knockBtn, .closeBtn, .leaflet-bar a { touch-action: manipulation; }
  /* long-press must never start text selection or the iOS callout: the map and
     its labels, the stat pills, the header, and the card action buttons are
     controls, not copy */
  #map, #statsRail, header, .statusGrid button, .chips button, .knockBtn,
  #wxPill, #wxPanel {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

  /* rotation (KNOCK FIX 7): markers ride the rotating pane; one variable
     counter-rotates their content about each icon's anchor so text stays
     upright while positions stay frame-locked to the tiles */
  .leaflet-rotate-pane .leaflet-marker-pane .leaflet-marker-icon > * {
    transform: rotate(var(--mb, 0deg)); }
  .leaflet-rotate-pane .pxlWrap > .pxl { transform-origin: -9px 9px; }
  .leaflet-rotate-pane .cluWrap > .clu,
  .leaflet-rotate-pane .rtBadge > .rtB,
  .leaflet-rotate-pane .ncBadge > .ncB { transform-origin: 50% 50%; }
  .leaflet-rotate-pane .soldStar > svg { transform-origin: 50% 50%; transform-box: fill-box; }
  /* pending triangles stay point-up under rotation; the ghostPane copies miss
     the marker-pane rule above, so this one covers both panes */
  .leaflet-rotate-pane .pendTri > svg {
    transform: rotate(var(--mb, 0deg)); transform-origin: 50% 50%; transform-box: fill-box; }
  .leaflet-rotate-pane .leaflet-marker-pane .rtStartPin {
    transform: rotate(calc(var(--mb, 0deg) - 45deg)); transform-origin: 13px 24px; }
  /* dropped custom pins point down; counter-rotate about the tip (bottom center) */
  .leaflet-rotate-pane .dropPin > svg {
    transform: rotate(var(--mb, 0deg)); transform-origin: 50% 100%; transform-box: fill-box; }

  /* an armed Do not knock goes red and a light sweeps it until you decide */
  .statusGrid button.dnsArm { background: rgba(255,90,90,.16); border-color: rgba(255,110,110,.85);
    color: #ff8a95; position: relative; overflow: hidden; }
  .statusGrid button.dnsArm::after { content: ''; position: absolute; top: 0; bottom: 0;
    width: 45%; left: -50%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
    animation: dnsShine 1.1s linear infinite; pointer-events: none; }
  @keyframes dnsShine { to { left: 110%; } }

  .statusGrid { display: grid; grid-template-columns: 1fr 1fr 78px; gap: 6px; margin-bottom: 10px; }
  .statusGrid button { min-height: 40px; border: 1px solid var(--stroke2); background: var(--bg3);
    color: var(--txt2); border-radius: 11px; font-size: 13px; font-weight: 650;
    transition: all .12s; }
  /* faint status colors so each button reads at a glance even unselected */
  .statusGrid button[data-st="knocked"] { background: rgba(45,212,191,.06); border-color: rgba(45,212,191,.22); }
  .statusGrid button[data-st="not_home"] { background: rgba(255,162,46,.06); border-color: rgba(255,162,46,.22); }
  .statusGrid button[data-st="sold"] { background: rgba(240,190,80,.07); border-color: rgba(240,190,80,.25); }
  .statusGrid button[data-st="no"] { background: rgba(148,163,184,.06); border-color: rgba(148,163,184,.2); }
  .statusGrid button:active { transform: scale(.97); }
  .statusGrid button.on[data-st="knocked"] { background: rgba(45,212,191,.14); color: #7ce8db;
    border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--teal); }
  .statusGrid button.on[data-st="not_home"] { background: rgba(255,162,46,.13); color: #ffc37a;
    border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--warm); }
  .statusGrid button.on[data-st="sold"] { background: rgba(47,213,123,.13); color: #7ce9ae;
    border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--ok); }
  .statusGrid button.on[data-st="no"] { background: rgba(126,139,157,.14); color: #b6c1d1;
    border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--cool); }

  #note { width: 100%; background: var(--bg3); border: 1px solid var(--stroke2); color: var(--txt);
    border-radius: 12px; padding: 10px 12px; font-size: 16px; resize: none; min-height: 46px;
    font-family: inherit; transition: border-color .15s; }
  #note::placeholder { color: var(--txt3); }
  #note:focus { outline: none; border-color: rgba(139,92,246,.6); }
  #noteStatus { font-size: 11.5px; margin: 4px 2px 0; min-height: 15px; color: var(--txt3); }
  #noteStatus.saved { color: var(--ok); }
  #noteStatus.unsaved { color: var(--hot); }

  .actions { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
  .actions a, .actions button { display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 46px; text-decoration: none; border-radius: 12px; font-weight: 700;
    font-size: 14px; letter-spacing: .01em; cursor: pointer; font-family: inherit;
    transition: filter .12s, background .15s; }
  .actions .go { flex: 1; color: #fff; background: var(--accent);
    box-shadow: 0 6px 18px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.16); }
  .actions .go:hover { background: var(--accent2); }
  .actions .go:active { filter: brightness(.9); }
  .actions .alt { flex: 0 0 auto; padding: 0 14px; color: var(--txt2); font-weight: 600;
    font-size: 12.5px; background: var(--bg3); border: 1px solid var(--stroke2); }
  .actions .alt:hover { color: var(--txt); }

  #setPanel, #ynPanel { position: fixed; inset: 0; z-index: 3000; background: var(--bg0);
    display: flex; flex-direction: column;
    transform: translateX(102%); transition: transform .26s cubic-bezier(.3,.9,.3,1); }
  #setPanel.open, #ynPanel.open { transform: translateX(0); }
  @media (min-width: 700px) {
    #setPanel, #ynPanel { left: auto; width: 440px; border-left: 1px solid var(--stroke);
      box-shadow: -18px 0 48px rgba(0,0,0,.5); }
  }
  .spHead { display: flex; align-items: center; gap: 10px;
    padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
    border-bottom: 1px solid var(--stroke2); background: var(--bg1); }
  .spHead b { font-size: 16px; font-weight: 800; letter-spacing: .04em; }
  .spHead span { flex: 1; color: var(--txt3); font-size: 12px; }
  .spBody { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(env(safe-area-inset-bottom) + 20px); }
  .spGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .spTile { background: var(--bg2); border: 1px solid var(--stroke2); border-radius: 12px;
    padding: 9px 12px; }
  .spTile b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
  .spTile span { color: var(--txt3); font-size: 11px; }
  .spSec { background: var(--bg2); border: 1px solid var(--stroke2); border-radius: 14px;
    padding: 13px 14px; margin-bottom: 12px; }
  .spSec h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--txt3); font-weight: 700; }
  .spSec label { display: block; color: var(--txt3); font-size: 12px; margin: 9px 0 4px; }
  .spSec input, .spSec select, .spSec textarea { width: 100%; background: var(--bg3);
    border: 1px solid var(--stroke2); color: var(--txt); border-radius: 10px;
    padding: 9px 11px; font-size: 16px; font-family: inherit; }
  .spSec input.sw { width: 42px; padding: 0; } /* the toggle keeps its switch shape */
  .spSec textarea { resize: vertical; }
  .spSec input:focus, .spSec select:focus, .spSec textarea:focus { outline: none;
    border-color: rgba(139,92,246,.55); }
  .spRow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
  .spRow3 > div:only-child { grid-column: span 2; }
  .spBtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .spBtns button { min-height: 44px; padding: 0 15px; border-radius: 11px; font-weight: 650;
    font-size: 13.5px; cursor: pointer; font-family: inherit; }
  .spPrimary { border: none; background: var(--accent); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
  .spPrimary:active { filter: brightness(.9); }
  .spGhost { border: 1px solid var(--stroke2); background: var(--bg3); color: var(--txt2); }
  .spGhost:active { color: var(--txt); }
  .spDanger { border: 1px solid rgba(255,77,94,.35); background: rgba(255,77,94,.08); color: #ff8a95; }
  .spKv { font-size: 13px; color: var(--txt2); margin: 3px 0; overflow-wrap: anywhere; }
  .spKv b { color: var(--txt); font-weight: 650; }
  .spPill { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 999px;
    padding: 2px 9px; margin-left: 7px; letter-spacing: .05em; }
  .spPill.ok { background: rgba(47,213,123,.15); color: var(--ok); }
  .spPill.bad { background: rgba(255,77,94,.15); color: var(--hot); }
  .spIngest { margin-top: 8px; }
  .spIngest .spKv { font-size: 12px; }
  .spCopy { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
  .spCopy input { flex: 1; font-size: 16px; color: var(--txt3); }
  .spCopy button { flex: 0 0 auto; min-height: 38px; padding: 0 13px; border-radius: 10px;
    font-size: 12.5px; }
  #sRcOut { background: var(--bg3); border: 1px solid var(--stroke2); border-radius: 10px;
    padding: 10px; font-size: 11.5px; overflow-x: auto; color: var(--txt2); margin-top: 10px; }

  #toast { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); z-index: 2000;
    background: rgba(33,22,50,.95); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); border: 1px solid var(--stroke); color: var(--txt);
    border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-sm); transition: opacity .25s; pointer-events: none;
    max-width: 86vw; text-align: center; }

  #lock { position: fixed; inset: 0; z-index: 5000; background: var(--bg0); display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    text-align: center; padding: 30px; }
  #lock img { width: 76px; height: 76px; border-radius: 18px; box-shadow: var(--shadow-lg); }
  #lock p { color: var(--txt3); max-width: 300px; }
  #lock b { color: var(--txt); letter-spacing: 2px; }

  /* dark leaflet chrome */
  .leaflet-bar { border: 1px solid var(--stroke) !important; border-radius: 11px !important;
    overflow: hidden; box-shadow: var(--shadow-sm) !important; }
  .leaflet-bar a { background: rgba(24,16,38,.94) !important; color: #cdc0e2 !important;
    border-bottom: 1px solid var(--stroke2) !important;
    min-width: 34px; min-height: 34px; line-height: 34px !important; }
  .leaflet-bar a:last-child { border-bottom: none !important; }
  .leaflet-bar a:hover { background: var(--bg3) !important; color: #fff !important; }
  .leaflet-control-layers { background: rgba(24,16,38,.94) !important; color: #cdc0e2 !important;
    border: 1px solid var(--stroke) !important; border-radius: 11px !important;
    box-shadow: var(--shadow-sm) !important; }
  .leaflet-control-layers-toggle { filter: invert(.82) saturate(.4); }
  .leaflet-control-layers-expanded { padding: 8px 12px !important; }
  .leaflet-control-attribution { background: rgba(11,7,18,.7) !important; color: #5a5168 !important;
    font-size: 9px !important; }
  .leaflet-control-attribution a { color: #6d6480 !important; }
  @media (pointer: coarse) { .leaflet-control-zoom { display: none; } }
  /* note chips: one tap drops common field notes into the note box */
  .chips { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--stroke2); background: rgba(219,203,255,.05); color: var(--txt2);
    font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; }
  .chips button:active { background: var(--bg3); }
  .statusGrid .dns { grid-column: 3; grid-row: 1 / 3; min-height: 0; font-size: 12px;
    line-height: 1.25; padding: 4px 6px; white-space: normal;
    color: var(--txt3); background: rgba(255,90,90,.05); border-color: rgba(255,90,90,.18); }
  .statusGrid .dns.on { background: rgba(255,77,94,.1); color: #e39aa4;
    border-color: transparent; box-shadow: inset 0 0 0 1.5px #a15c68; }
  .againBtn { width: 100%; margin-top: 8px; height: 38px; border: 1px solid rgba(255,162,46,.4);
    background: rgba(255,162,46,.1); color: #ffc37a; border-radius: 10px;
    font-size: 13px; font-weight: 650; font-family: inherit; cursor: pointer; }
  .againBtn:active { filter: brightness(.9); }
  /* The Board v1: a tiny effort strip on the Today card */
  .tcStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
  .tcStats div { background: rgba(219,203,255,.05); border: 1px solid var(--stroke2);
    border-radius: 10px; padding: 7px 4px; text-align: center; }
  .tcStats b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
  .tcStats span { font-size: 9.5px; color: var(--txt3); text-transform: uppercase;
    letter-spacing: .05em; font-weight: 700; }
  /* team picker chips in Settings */
  .teamRow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .teamRow button { height: 36px; padding: 0 15px; border-radius: 999px;
    border: 1px solid var(--stroke2); background: rgba(219,203,255,.04); color: var(--txt2);
    font-size: 13px; font-weight: 650; font-family: inherit; cursor: pointer; }
  .teamRow button.on { background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
  #fxCanvas { position: fixed; inset: 0; z-index: 4000; pointer-events: none; }
  /* per-door activity: two recent rows on the card; "All activity" slides a
     full-card overlay with a Back header */
  .doorLog { margin-top: 8px; }
  .logRow { display: flex; align-items: center; gap: 9px; padding: 8px 2px;
    border-bottom: 1px solid var(--stroke2); font-size: 13px; color: var(--txt2); }
  .logRow i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .logRow b { color: var(--txt); font-weight: 650; }
  .logRow .when { margin-left: auto; color: var(--txt3); font-size: 11.5px; white-space: nowrap; }
  .doorLog .more { background: none; border: none; color: var(--accent2); font: inherit;
    font-size: 12.5px; font-weight: 650; padding: 8px 2px 2px; cursor: pointer; }
  #logPanel { position: absolute; inset: 0; z-index: 6; background: rgba(24,16,38,.99);
    border-radius: inherit; display: flex; flex-direction: column;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 14px); }
  .lpHead { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px;
    border-bottom: 1px solid var(--stroke2); }
  .lpHead button { border: none; background: var(--bg3); color: var(--txt2); border-radius: 10px;
    height: 36px; padding: 0 14px; font: inherit; font-weight: 650; cursor: pointer; flex: 0 0 auto; }
  .lpHead span { font-weight: 750; font-size: 14px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  #lpRows { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cluWrap { background: none; border: none; }
  .clu { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; background: rgba(26,18,40,.92); border: 2px solid var(--accent);
    color: var(--txt); font-weight: 750; font-size: 12px; font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-sm); }
  /* weather for where you're looking: glassy pill, tap for the rest of the
     day. Bottom-LEFT: the layers/zoom/locate stack owns the bottom-right. */
  #wxPill { position: absolute; left: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    z-index: 600; display: flex; align-items: center; gap: 7px; padding: 7px 13px;
    background: rgba(16,11,26,.72); backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid var(--stroke2); border-radius: 999px;
    color: var(--txt); font-size: 13.5px; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow-lg); font-family: inherit; }
  #wxPill small { color: var(--txt3); font-weight: 600; font-size: 11.5px; }
  #wxPanel { position: absolute; left: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    z-index: 600; width: 232px; max-height: 46vh; overflow-y: auto;
    background: rgba(16,11,26,.88); backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid var(--stroke2); border-radius: 14px; padding: 12px 14px;
    box-shadow: var(--shadow-lg); }
  #wxPanel h4 { margin: 0 0 7px; font-size: 11px; letter-spacing: .06em; color: var(--txt3);
    text-transform: uppercase; font-weight: 700; }
  .wxRow { display: flex; align-items: center; gap: 8px; padding: 3.5px 0;
    font-size: 12.5px; color: var(--txt2); font-weight: 600; }
  .wxRow .wxT { margin-left: auto; color: var(--txt); }
  .wxRow .wxP { width: 42px; text-align: right; color: var(--txt3); font-weight: 500; }
  .hidden { display: none !important; }

/* changelog: deliberately small and quiet at the very bottom of Settings */
#spLog { margin: 0 2px 34px; font-size: 10.5px; color: var(--txt3); }
#spLog summary { cursor: pointer; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; font-size: 9.5px; color: var(--txt3); opacity: .65; }
#spLog summary:hover { opacity: 1; }
#spLog p { margin: 8px 0 0; line-height: 1.5; }
#spLog b { color: var(--txt2); font-weight: 700; }
#spLog i { color: var(--txt3); font-style: normal; opacity: .8; }

/* list thumbnails: quiet tile that fills when the photo arrives */
.rowTh { width: 42px; height: 42px; border-radius: 9px; background: var(--bg3);
  flex: 0 0 auto; overflow: hidden; }
.rowTh img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* sold-door star marker: no default divIcon box */
.soldStar { background: none; border: none; }
.soldStar svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.pendTri { background: none; border: none; }
.pendTri svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pendTri.ghostTri svg { filter: none; }
.dropPin { background: none; border: none; }
.dropPin svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* weather panel: tappable pill caret + Today/Tomorrow tabs */
.wxCaret { color: var(--txt3); font-weight: 700; margin-left: 3px; opacity: .85; font-size: 13px; }
.wxTabs { display: flex; gap: 4px; margin-bottom: 9px; }
.wxTab { flex: 1; height: 26px; border-radius: 8px; border: 1px solid var(--stroke2);
  background: transparent; color: var(--txt3); font-size: 11.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; }
.wxTab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wxHead { font-size: 12.5px; color: var(--txt2); font-weight: 700; margin-bottom: 7px; }

/* inline sold star (stat rail, list rows, activity log) */
.iStar { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* caret points up when the forecast is closed (the panel opens upward), down when open */
.wxCaret { display: inline-block; transform: rotate(180deg); transition: transform .2s; }
#wxPill.wxOpen .wxCaret { transform: none; }

/* live "you" dot: accent core, white ring, soft radar pulse */
.youWrap { pointer-events: none; }
.youDot { width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
  border: 2.5px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); position: relative; }
.youDot::after { content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; animation: youPulse 2.4s ease-out infinite; }
@keyframes youPulse { 0% { transform: scale(.35); opacity: .8; } 70% { transform: scale(1.1); opacity: 0; } 100% { opacity: 0; } }
.leaflet-bar a.onYou { color: var(--accent); }

  /* ---- v25: no-car presence + Your Numbers ---- */
  .ncRow { margin-bottom: 10px; }
  .ncBtn { width: 100%; min-height: 38px; border: 1px solid rgba(138,147,184,.28);
    background: rgba(138,147,184,.07); color: var(--txt2); border-radius: 11px;
    font-size: 13px; font-weight: 650; display: flex; align-items: center;
    justify-content: center; gap: 7px; transition: all .12s; }
  .ncBtn:active { background: rgba(138,147,184,.16); }
  .ncBtn .iCar { color: #8a93b8; }
  .ncCount { color: var(--txt3); font-weight: 600; font-size: 12px; }
  .ncBox { border-color: rgba(138,147,184,.3); background: rgba(138,147,184,.08); }
  .ncBox .iCar { vertical-align: -2px; margin-right: 2px; color: #8a93b8; }
  .ncTag { color: #8a93b8; font-weight: 650; white-space: nowrap; }
  .ncTag .iCar { vertical-align: -1px; margin-right: 2px; }
  /* the map's no-car chip: a quiet slate car on the door's shoulder. Resting =
     subdued identity mark; .now (usually empty at THIS day/hour) = full voice. */
  .ncBadge { background: none; border: none; pointer-events: none; }
  .ncB { border-radius: 50%; background: rgba(16,11,26,.88);
    border: 1.5px solid rgba(170,180,220,.75); box-shadow: 0 1px 5px rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center; gap: 2px; opacity: .95; }
  .ncB .iCar { color: #b7c0e2; display: block; flex: 0 0 auto; }
  .ncB b { color: #d3daf5; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .ncBadge.now .ncB { opacity: 1; border-color: #d3daf5;
    box-shadow: 0 0 7px rgba(170,180,220,.55), 0 1px 5px rgba(0,0,0,.5); }
  .ncBadge.now .ncB b { color: #fff; }
  /* ---- v28: call-back squares (Chris's ask) ----
     The square must WIN the glance war: bigger than any dot, hot amber, white
     rim, glow. It marks "come back here tonight", so it never blends in. */
  .ncRow { display: flex; gap: 8px; }
  .ncRow .ncBtn { flex: 1; width: auto; }
  .cbGlyph { width: 11px; height: 11px; border-radius: 2.5px; background: #ffb020;
    border: 1.5px solid #fff; box-shadow: 0 0 4px rgba(255,176,32,.7); flex: 0 0 auto; }
  .cbBtn.on { border-color: rgba(255,176,32,.65); background: rgba(255,176,32,.14);
    color: #ffd489; }
  .cbSquare { background: none; border: none; pointer-events: none; }
  .cbSq { border-radius: 4px; background: #ffb020; border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(255,176,32,.8), 0 1px 6px rgba(0,0,0,.55); }
  .leaflet-rotate-pane .cbSquare > .cbSq { transform-origin: 50% 50%; }
  .toastUndo { margin-left: 8px; padding: 3px 12px; border-radius: 9px;
    border: 1px solid rgba(219,203,255,.4); background: rgba(219,203,255,.12);
    color: var(--txt); font-size: 12.5px; font-weight: 700; }
  .tcMore { color: var(--accent2); font-weight: 700; white-space: nowrap; }
  .tcYn { flex: 1; line-height: 1.45; }
  .tcYn b { font-size: 14.5px; }

  #ynBody .ynLive { border: 1px solid rgba(139,92,246,.3); background: rgba(139,92,246,.1);
    border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--txt2);
    margin-bottom: 12px; line-height: 1.45; }
  #ynBody .ynLive b { color: var(--txt); font-variant-numeric: tabular-nums; }
  .ynSoft { margin-top: 6px; font-size: 11.5px; color: var(--txt3); }
  .ynSec { background: var(--bg2); border: 1px solid var(--stroke2); border-radius: 14px;
    padding: 12px 14px; margin-bottom: 12px; }
  .ynSec h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .07em; color: var(--txt3); }
  .ynGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
  .ynGrid div { background: rgba(219,203,255,.05); border: 1px solid var(--stroke2);
    border-radius: 10px; padding: 7px 4px; text-align: center; }
  .ynGrid b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
  .ynGrid span { font-size: 9.5px; color: var(--txt3); text-transform: uppercase;
    letter-spacing: .05em; font-weight: 700; }
  .ynLine { font-size: 13px; color: var(--txt2); padding: 3px 0; }
  .ynTabs { display: flex; gap: 6px; margin-bottom: 12px; }
  .ynTab { flex: 1; min-height: 32px; border: 1px solid var(--stroke2); background: var(--bg3);
    color: var(--txt3); border-radius: 10px; font-size: 12px; font-weight: 700; }
  .ynTab.on { color: var(--txt); border-color: rgba(139,92,246,.5); background: rgba(139,92,246,.12); }
  .ynHour { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
  .ynHour.best .ynHLabel { color: var(--txt); font-weight: 800; }
  .ynHLabel { width: 52px; color: var(--txt3); font-weight: 700; font-variant-numeric: tabular-nums; }
  .ynHBar { flex: 1; height: 9px; border-radius: 5px; background: rgba(219,203,255,.06); overflow: hidden; }
  .ynHBar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); opacity: .75; }
  .ynHour.best .ynHBar i { opacity: 1; background: var(--highlight); }
  .ynHVal { width: 150px; text-align: right; color: var(--txt3); font-size: 11px; white-space: nowrap; }
  .ynSpark { font-size: 20px; letter-spacing: 1px; line-height: 1; color: var(--accent);
    margin: 4px 0 6px; overflow-x: auto; white-space: nowrap; }
  .ynSpark .ynSp0 { color: rgba(219,203,255,.15); }
  .ynSpark .ynSpSold { color: var(--ok, #2fd57b); }

  /* ---- v25.3: confirmation dialog for feed-level switches ---- */
  #confirmBox { position: fixed; inset: 0; z-index: 4000; display: flex;
    align-items: center; justify-content: center; padding: 22px;
    background: rgba(6,4,12,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #confirmBox.hidden { display: none; }
  .cbCard { width: 100%; max-width: 380px; background: var(--bg2);
    border: 1px solid var(--stroke); border-radius: 18px; padding: 18px 18px 14px;
    box-shadow: var(--shadow-lg); }
  .cbCard b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 8px; }
  .cbCard p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--txt2); }
  .cbBtns { display: flex; gap: 8px; }
  .cbBtns button { flex: 1; min-height: 44px; border-radius: 12px; font-size: 14px;
    font-weight: 700; font-family: inherit; border: 1px solid var(--stroke2); }
  .cbCancel { background: var(--bg3); color: var(--txt2); }
  .cbOk { background: var(--accent); border-color: var(--accent); color: #fff; }
  .cbOk.danger { background: #b3313f; border-color: #c9414f; }