/* Blockhop v1 — app shell styles (extends ../shared.css) */
html, body { height: 100%; overflow: hidden; }
body { min-height: 0 !important; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
@supports (height: 100dvh) { html, body { height: 100dvh; } } /* Safari's toolbar must not push the tab bar off-screen */
body { display: flex; flex-direction: column; }
#views { flex: 1; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; overflow-y: auto; display: none; }
.view.on { display: block; }
#view-map { overflow: hidden; }

/* ---------- bottom nav ---------- */
nav.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; border-top: 1px solid var(--line); background: var(--surface); padding: 5px 6px calc(9px + env(safe-area-inset-bottom)); z-index: 70; }
body { padding-bottom: var(--tabbar-h, 76px); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 3px; color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; }
.tabbar button .ic { font-size: 21px; filter: grayscale(1) opacity(.6); transition: .15s; }
.tabbar button.on { color: #d9ccff; }
.tabbar button.on .ic { filter: none; transform: translateY(-1px); }
.tabbar button.on::after { content: ''; width: 16px; height: 3px; border-radius: 3px; background: var(--purple); margin-top: 2px; }

/* ---------- home ---------- */
.home-wrap { max-width: 640px; margin: 0 auto; padding: 10px 16px 30px; }
.brandline { display: flex; align-items: center; gap: 8px; font-family: var(--display); letter-spacing: .14em; font-size: 13px; color: var(--muted); }
.brandline b { color: var(--text); }
.home-q { font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 9vw, 50px); line-height: .98; margin: 14px 0 4px; }
.home-q .accent { color: var(--purple); }
.home-sub { color: var(--muted); font-size: 14px; }
.primary-cards { display: grid; gap: 12px; margin-top: 18px; }
.pcta { text-align: left; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(135deg, var(--card), var(--card-hi)); transition: .15s; position: relative; overflow: hidden; }
.pcta:hover { border-color: var(--purple); transform: translateY(-2px); }
.pcta h3 { font-size: 19px; display: flex; align-items: center; gap: 9px; }
.pcta p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.pcta .arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--purple); font-size: 20px; }
.pcta.find { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple-soft); }
.shortcuts { display: flex; gap: 9px; margin-top: 12px; }
.shortcuts button { flex: 1; padding: 11px 0; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.shortcuts button:hover { border-color: var(--purple); color: var(--text); }
.sec-label { display: flex; align-items: baseline; gap: 9px; margin: 26px 0 10px; }
.sec-label h4 { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; color: var(--orange); }
.sec-label span { color: var(--dim); font-size: 11.5px; }
.tonight-card { display: flex; gap: 13px; padding: 13px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); cursor: pointer; margin-bottom: 10px; align-items: center; transition: .15s; }
.tonight-card:hover { border-color: var(--purple); transform: translateY(-1px); }
.tonight-card .ph { width: 72px; height: 72px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg,#2a2438,#201c2b) center/cover; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.tonight-card h5 { font-size: 16px; }
.tonight-card .why { color: #cbb9f1; font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.tonight-card .meta { color: var(--dim); font-size: 11.5px; margin-top: 4px; }

/* ---------- map ---------- */
#map { position: absolute; inset: 0; }
.map-top { position: absolute; top: 0; left: 0; right: 0; z-index: 40; padding: calc(10px + env(safe-area-inset-top)) 12px 4px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.map-top > * { pointer-events: none; }
.map-top-row { display: flex; gap: 8px; pointer-events: auto; }
.filterbar { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; }
.filterbar:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 6px; background: rgba(139,92,246,.22); border: 1px solid var(--purple); color: #d9ccff; border-radius: 99px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); }
.fchip .x { opacity: .75; font-size: 11px; }
.fchip.clear { background: rgba(248,113,113,.14); border-color: var(--red); color: #fca5a5; font-weight: 800; padding: 6px 14px; }
.fchip.clear:hover { background: rgba(248,113,113,.28); color: #fff; }
.fchip.toggle { background: rgba(23,20,31,.92); border-color: var(--line); color: var(--muted); }
.fchip.toggle.active { background: rgba(52,211,153,.14); border-color: var(--green); color: var(--green); }
.ctxchip { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; background: rgba(255,122,26,.14); border: 1px solid var(--orange); color: #ffd9bb; border-radius: 99px; padding: 7px 7px 7px 14px; font-size: 13px; pointer-events: auto; backdrop-filter: blur(8px); }
.ctxchip[hidden] { display: none; }
.ctxchip .cx { border-radius: 99px; padding: 5px 10px; font-size: 12px; font-weight: 700; background: rgba(15,13,20,.5); color: #ffd9bb; }
.ctxchip .cx.out:hover { color: var(--red); }
.sugg-chips.oneline { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sugg-chips.oneline::-webkit-scrollbar { display: none; }
.sugg-chips.oneline.expanded { flex-wrap: wrap; overflow: visible; }
.sugg-chips .chip { white-space: nowrap; }
.morebtn { float: right; color: var(--purple); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.sugg-sec { display: flex; justify-content: space-between; align-items: baseline; }
.sugg-foot { position: sticky; bottom: 0; padding: 8px 14px 12px; background: linear-gradient(transparent, var(--surface) 35%); }
.sugg-show { width: 100%; margin: 0; }
.sugg-show:disabled { opacity: .55; cursor: default; }
.ltitle .hidebtn { color: var(--purple); margin-left: 8px; font-weight: 700; }
.ltitle.big { font-size: 16px; padding: 2px 4px; }

/* back button (replaces the Showing chip) */
.backbtn { cursor: pointer; font-weight: 700; }
.backbtn:hover { border-color: #fff; }

/* district chip density */
.d-label.micro { padding: 3px 8px; font-size: 10.5px; border-radius: 9px; }
.d-label.micro small, .d-label.micro .cnt { display: none; }

/* the trail: places you've kept, stacked into a night */
.trailbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h, 72px) + 10px); z-index: 46; background: rgba(23,20,31,.95); backdrop-filter: blur(10px); border: 1px solid var(--purple); border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow); max-width: min(92vw, 560px); width: max-content; }
.trailbar[hidden] { display: none; }
.trailbar.pill { padding: 0; border-radius: 99px; }
.t-pill { padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: #d9ccff; }
.t-head button { margin-left: 10px; }
@media (min-width: 900px) { .trailbar { left: calc((100vw - 430px) / 2); max-width: min(100vw - 480px, 560px); } }
.hours-link { display: inline-block; color: var(--purple); font-size: 13px; font-weight: 700; padding: 2px 0 8px; }
.d-label.counting { padding: 4px 10px; font-size: 11px; }
.d-label.counting small { display: none; }
.trailbar .t-head { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--orange); margin-bottom: 7px; }
.trailbar .t-head .spacer { flex: 1; }
.trailbar .t-head button { color: var(--muted); font-size: 11px; font-weight: 700; }
.trailbar .t-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.trailbar .t-row::-webkit-scrollbar { display: none; }
.t-stop { display: inline-flex; align-items: center; gap: 6px; background: var(--card-hi); border: 1px solid var(--line); border-radius: 11px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.t-stop .x { color: var(--dim); font-size: 11px; }
.t-stop .x:hover { color: var(--red); }
.t-gap { color: var(--dim); font-size: 10.5px; white-space: nowrap; }
.t-plan { background: var(--purple); color: #fff; border-radius: 11px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* three-detent sheet: peek -> half (default) -> full */
.sheet { touch-action: pan-y; overscroll-behavior: contain; }
.sheet.peek { touch-action: none; }
.sheet.peek { transform: translateY(calc(100% - 62px)); overflow: hidden; }
.sheet.half { max-height: 42vh; }
.sheet.full { max-height: 86vh; }
.sheet .sheet-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--surface) 38%); padding: 14px 0 2px; margin-top: 10px; }
.sheet .detent-hint { text-align: center; color: var(--dim); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 0 0; }
@media (max-width: 899.98px) {
  /* phones: the whole card, scrollable, docked on the tab bar; the beacon stays visible above */
  .sheet { bottom: var(--tabbar-h, 66px); height: 58vh; height: 58dvh; max-height: none !important; border-radius: 20px 20px 0 0; overflow-y: auto; }
  .sheet.peek, .sheet.half, .sheet.full { transform: translateY(0); max-height: none !important; overflow-y: auto; }
  .sheet .detent-hint { display: none !important; }
  .sheet .peekbar { display: none; }
  /* the tucked card: a name strip on the tab bar, obviously tappable */
  .sheet.peek { height: 66px; overflow: hidden; }
  .sheet.peek .peekbar { display: flex; }
  .sheet.peek .sheet-body { visibility: hidden; }
  .sheet.half .dp-rest { display: block; }
  body:has(.sheet.up) .legend { display: none; }
}
/* touch targets: ≥40px effective without visual change */
.fchip .x, .t-head button, .morebtn { padding: 10px; margin: -10px; }
.legend .lrow { padding: 8px 5px; min-height: 28px; }
.pager button { width: 44px; height: 44px; }
/* NOTE: never set position on .d-label — MapLibre's .maplibregl-marker must stay
   position:absolute or the chips fall into document flow and stack like text.
   The marker's own absolute box anchors the ::after hit area just fine. */
.d-label::after { content: ''; position: absolute; inset: -12px -8px; }
.t-stop .x { padding: 10px; margin: -10px; }
@media (min-width: 900px) {
  /* desktop: the card is a side panel; the map keeps the stage */
  .sheet { left: auto; right: 14px; top: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 404px; max-height: none !important; border-radius: 22px; border: 1px solid var(--line); transform: translateX(118%) !important; }
  .sheet.up { transform: translateX(0) !important; overflow-y: auto; }
  .sheet .peekbar { display: none !important; }
  .sheet .detent-hint { display: none; }
}
.sheet .peekbar { display: none; align-items: center; gap: 10px; padding: 8px 20px 0; font-weight: 700; font-size: 14.5px; }
.sheet.peek .peekbar { display: flex; }
.sheet .peekbar .pk-open { margin-left: auto; color: var(--purple); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.sheet .grab { display: block; cursor: grab; width: 42px; height: 4px; padding: 16px 48px; margin: -6px auto -8px; box-sizing: content-box; background: none !important; border: none; position: relative; touch-action: none; }
.sheet .grab::before { content: ''; position: absolute; left: 50%; top: 50%; width: 42px; height: 4px; margin: -2px 0 0 -21px; border-radius: 4px; background: var(--line); }

/* search result buckets */
.bucket-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px 4px; }
.bucket-head .bh-main { font-family: var(--display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.bucket-head.exact .bh-main { color: var(--green); }
.bucket-head.partial .bh-main { color: var(--orange); }
.bucket-head .bh-sub { color: var(--dim); font-size: 11px; }
.bucket-head .bmap { margin-left: auto; flex-shrink: 0; padding: 4px 10px; font-size: 11px; }
.s-hit .missing { color: var(--dim); font-size: 10.5px; }
.s-hit .missing s { color: var(--red); text-decoration: none; opacity: .8; }
.legend .lrow { cursor: pointer; border-radius: 8px; padding: 2px 5px; }
.legend .lrow:hover { background: var(--card-hi); }
.legend .lrow.active { background: var(--purple-soft); color: #d9ccff; }
.sugg-sec { padding: 9px 14px 2px; font-family: var(--display); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.sugg-show { margin: 6px 14px 14px; width: calc(100% - 28px); }
.searchpill { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: rgba(23,20,31,.93); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; padding: 4px 14px; max-width: 480px; }
.searchpill input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 16px; padding: 9px 0; min-width: 110px; -webkit-appearance: none; }
.searchpill input::-webkit-search-cancel-button { display: none; }
.pill-x { color: var(--muted); font-size: 13px; padding: 10px; margin: -6px -4px -6px 0; }
.pill-x:hover { color: var(--red); }
.map-notice { background: rgba(248,113,113,.14); border: 1px solid var(--red); color: #fca5a5; border-radius: 12px; padding: 8px 12px; font-size: 12.5px; pointer-events: auto; display: flex; gap: 8px; align-items: center; }
.map-notice button { color: #fca5a5; padding: 6px; margin: -6px; }
.you-dot { width: 16px; height: 16px; border-radius: 50%; background: #4f8ef7; border: 2.5px solid #fff; box-shadow: 0 0 0 0 rgba(79,142,247,.55); animation: youpulse 2s infinite; }
@keyframes youpulse { 0% { box-shadow: 0 0 0 0 rgba(79,142,247,.55); } 70% { box-shadow: 0 0 0 14px rgba(79,142,247,0); } 100% { box-shadow: 0 0 0 0 rgba(79,142,247,0); } }
/* zoom buttons in our chrome, clear of the trail pill */
.maplibregl-ctrl-bottom-right { bottom: 70px; display: flex; flex-direction: column; align-items: flex-end; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group:not(.bh-reset) { order: 1; }
.maplibregl-ctrl-bottom-right .bh-reset, .maplibregl-ctrl-bottom-right .bh-help { order: 2; margin-top: 8px; }
.bh-help .bh-reset-btn { font-weight: 800; font-size: 17px; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { order: 3; }
.maplibregl-ctrl-group { background: rgba(23,20,31,.93) !important; border: 1px solid var(--line); border-radius: 12px !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 40px !important; height: 40px !important; background: transparent !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(.85); }
#pillchips { display: contents; }
#pillchips .fchip { padding: 4px 9px; font-size: 11.5px; }
.searchpill input::placeholder { color: var(--dim); }
.d-label { background: rgba(26,22,34,.88); backdrop-filter: blur(6px); border: 1px solid rgba(139,92,246,.35); color: var(--text); border-radius: 14px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; white-space: nowrap; text-align: center; line-height: 1.25; }
.d-label small { display: block; color: var(--muted); font-weight: 500; font-size: 10px; }
.d-label:hover { border-color: var(--purple); background: rgba(40,32,56,.95); }
.searchresults { position: absolute; top: 58px; left: 12px; right: 12px; max-width: 480px; z-index: 45; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); max-height: 55vh; overflow-y: auto; box-shadow: var(--shadow); }
.tierhead { padding: 10px 14px 4px; font-family: var(--display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.s-hit { display: flex; gap: 10px; padding: 10px 14px; cursor: pointer; align-items: center; }
.s-hit:hover { background: var(--card); }
.s-hit .em { font-size: 20px; width: 26px; text-align: center; }
.s-hit h6 { font-size: 14px; }
.s-hit h6 mark { background: var(--purple-soft); color: #d9ccff; border-radius: 3px; padding: 0 2px; }
.s-hit .sub { color: var(--muted); font-size: 11.5px; }
.s-hit .matched { color: var(--orange); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* ---------- now ---------- */
.now-wrap { max-width: 640px; margin: 0 auto; padding: 12px 16px 30px; }
.now-head h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(26px, 7vw, 36px); }
.now-head .stamp { color: var(--muted); font-size: 13px; }
.now-filters { display: flex; gap: 8px; margin: 14px 0 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.now-filters::-webkit-scrollbar { display: none; }

/* ---------- plan ---------- */
.plan-wrap { max-width: 640px; margin: 0 auto; padding: 12px 16px 40px; }
.plan-q { font-family: var(--display); text-transform: uppercase; font-size: 13.5px; letter-spacing: .09em; color: var(--muted); margin: 18px 0 8px; }
.plan-wrap .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-wrap .chip { font-size: 13.5px; padding: 9px 14px; }
.energy { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; color: var(--muted); font-size: 13px; }
.energy input { accent-color: var(--purple); }
.buildbtn { width: 100%; margin-top: 22px; padding: 16px; font-size: 16px; font-family: var(--display); letter-spacing: .08em; }
.itin { margin-top: 24px; }
.stop { display: flex; gap: 14px; }
.stop .rail-line { display: flex; flex-direction: column; align-items: center; width: 26px; flex-shrink: 0; }
.stop .dot { width: 13px; height: 13px; border-radius: 50%; background: var(--purple); border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--purple); margin-top: 20px; }
.stop .vline { flex: 1; width: 2px; background: var(--line); }
.stop-card { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 4px; cursor: pointer; transition: .15s; }
.stop-card:hover { border-color: var(--purple); }
.stop-card.locked { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange-soft); }
.stop-card .role { color: var(--orange); font-family: var(--display); letter-spacing: .12em; font-size: 10.5px; text-transform: uppercase; }
.stop-card h5 { font-size: 17px; margin: 2px 0; }
.stop-card .why { color: var(--muted); font-size: 12.5px; }
.stop-card .lockhint { float: right; font-size: 13px; color: var(--dim); }
.gap-row { display: flex; gap: 14px; align-items: center; margin: 2px 0; }
.gap-row .rail-line { width: 26px; display: flex; justify-content: center; flex-shrink: 0; }
.gap-row .vline { width: 2px; height: 34px; background: var(--line); }
.gap-info { color: var(--dim); font-size: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gap-info .chip { font-size: 11px; padding: 4px 10px; }

/* ---------- yours ---------- */
.yours-wrap { max-width: 640px; margin: 0 auto; padding: 12px 16px 30px; }
.yours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ybox { padding: 15px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.ybox:hover { border-color: var(--purple); }
.ybox .n { font-family: var(--display); font-size: 26px; color: var(--purple); }
.ybox .lbl { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pattern { background: var(--purple-soft); border: 1px solid var(--purple); border-radius: var(--r); padding: 14px 16px; margin-top: 14px; font-size: 13.5px; color: #d9ccff; line-height: 1.5; }

/* ---------- find overlay ---------- */
#find-overlay { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: none; flex-direction: column; }
#find-overlay.on { display: flex; }
.find-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.find-head .close { font-size: 20px; color: var(--muted); padding: 4px 10px; }
.find-body { flex: 1; overflow-y: auto; padding: 4px 18px 20px; max-width: 620px; width: 100%; margin: 0 auto; }
.find-sentence { min-height: 26px; font-size: 15.5px; color: var(--muted); }
.find-sentence b { color: #d9ccff; }
.progress { display: flex; gap: 5px; margin: 14px 0 6px; }
.progress i { height: 4px; border-radius: 4px; background: var(--line); flex: 1; }
.progress i.on { background: var(--purple); }
.find-q { font-family: var(--display); font-size: clamp(26px, 6.5vw, 38px); text-transform: uppercase; margin: 16px 0 16px; line-height: 1.02; }
.find-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.find-chips .chip { font-size: 16px; padding: 13px 19px; }
.find-foot { display: flex; gap: 9px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); max-width: 620px; width: 100%; margin: 0 auto; align-items: center; }
.find-foot .results-btn { flex: 1; }
.profile-pill { margin-left: auto; font-size: 11.5px; color: var(--dim); border: 1px dashed var(--line); border-radius: 99px; padding: 5px 11px; cursor: pointer; }
/* reveal */
.reveal-hero { border: 1px solid var(--purple); box-shadow: 0 0 0 1px var(--purple), var(--shadow); border-radius: var(--r); overflow: hidden; background: var(--card); }
.reveal-hero .ph { height: 170px; background: linear-gradient(135deg,#2a2438,#1a1722) center/cover; display: flex; align-items: center; justify-content: center; font-size: 56px; position: relative; }
.reveal-hero .ph .kick { position: absolute; top: 12px; left: 14px; background: rgba(15,13,20,.8); border-radius: 99px; padding: 5px 12px; font-family: var(--display); font-size: 11px; letter-spacing: .14em; color: var(--orange); text-transform: uppercase; }
.reveal-hero .body { padding: 16px 18px 18px; }
.reveal-hero h3 { font-size: 23px; }
.reveal-hero .why-block { margin-top: 10px; background: var(--surface); border-radius: 12px; padding: 11px 13px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.reveal-hero .why-block b { color: #d9ccff; }
.steer { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.viewtoggle { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin-left: auto; }
.viewtoggle button { padding: 6px 11px; border-radius: 9px; font-size: 12px; color: var(--dim); }
.viewtoggle button.on { background: var(--purple); color: #fff; }
.grid-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gcell { border-radius: var(--r-sm); overflow: hidden; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.gcell .ph { height: 84px; background: linear-gradient(135deg,#2a2438,#201c2b) center/cover; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.gcell .body { padding: 8px 10px 10px; font-size: 12.5px; }
/* dealer-style card mode */
.cardstage { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; }
.dcard { position: absolute; width: min(84vw, 330px); height: 400px; border-radius: 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; user-select: none; }
.dcard.behind { transform: scale(.94) translateY(12px); opacity: .5; }
.dcard .ph { flex: 1; background: linear-gradient(135deg,#2a2438,#1a1722) center/cover; display: flex; align-items: center; justify-content: center; font-size: 56px; }
.dcard .body { padding: 13px 16px 15px; background: var(--surface); }
.dcard h5 { font-size: 19px; }
.dctl { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.dctl button { width: 52px; height: 52px; border-radius: 50%; font-size: 20px; background: var(--card); border: 1.5px solid var(--line); }
.dctl button.more { width: auto; border-radius: 99px; padding: 0 22px; font-family: var(--display); letter-spacing: .06em; font-size: 14px; background: var(--purple); border: none; color: #fff; }

/* ---------- place sheet ---------- */
#sheet { z-index: 95; }
.sheet-body { padding: 4px 20px calc(26px + env(safe-area-inset-bottom)); max-width: 620px; margin: 0 auto; }
.sheet-body h2 { font-size: 24px; }
.sheet-sub { color: var(--muted); font-size: 13.5px; }
.sheet-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
/* the hybrid card: B's stat lanes inside A's body */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; margin: 13px 0 10px; background: var(--card-hi); overflow: hidden; }
.lane { padding: 11px 8px; text-align: center; border-right: 1px solid var(--line); }
.lane:last-child { border-right: 0; }
.lane b { display: block; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.lane span { color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.lane .ok { color: var(--green); letter-spacing: .06em; }
.lane .no { color: var(--red); letter-spacing: .06em; }
.ctx-dist { color: var(--muted); font-size: 12.5px; margin: -2px 0 8px; }
.hours-row { border: 1px solid var(--line); border-radius: 13px; margin: 4px 0 10px; }
.hours-row summary { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px !important; font-size: 14px; color: var(--text) !important; }
.hours-row summary .caret { color: var(--purple); font-size: 13px; transition: transform .2s; }
.hours-row[open] summary .caret { transform: rotate(180deg); }
.hours-row .hours-table { padding: 2px 14px 12px; }
.busyblock { border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px 10px; margin-bottom: 10px; }
.spark-cap { color: var(--muted); font-size: 12.5px; margin-top: 7px; }
.spark-cap b { color: var(--orange); }
.tagline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.near-mini.pic { padding: 0; overflow: hidden; width: 128px; min-width: 128px; }
.near-mini.pic .nm-ph { height: 58px; background: linear-gradient(135deg,#2a2438,#201c2b) center/cover; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.near-mini.pic .nm-walk { display: block; color: var(--orange); font-size: 12.5px; padding: 7px 10px 0; }
.near-mini.pic .nm-name { display: block; color: var(--text); font-size: 12px; padding: 1px 10px 9px; line-height: 1.25; }
.hours-acc summary { cursor: pointer; color: var(--muted); font-size: 13.5px; padding: 6px 0; list-style: none; }
.hours-acc summary::-webkit-details-marker { display: none; }
.hours-acc summary .caret { color: var(--dim); font-size: 11px; }
.hours-table { font-size: 13px; color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; padding: 6px 0 4px; }
.hours-table .today { color: var(--text); font-weight: 600; }
.near-rail { display: flex; gap: 9px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; padding-bottom: 4px; }
.near-mini { flex-shrink: 0; background: var(--card-hi); border-radius: var(--r-sm); padding: 10px 13px; font-size: 12.5px; cursor: pointer; border: 1px solid transparent; min-width: 150px; }
.near-mini:hover { border-color: var(--purple); }
.sheet-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sheet-actions .btn { padding: 12px 16px; font-size: 14px; flex: 1; min-width: 130px; }
.note-quote { margin-top: 10px; padding: 9px 13px; border-left: 3px solid var(--orange); background: var(--orange-soft); border-radius: 0 10px 10px 0; font-size: 13px; color: #ffd9bb; }

/* map chrome: back pill, locate, legend, search suggestions */
.map-back { position: absolute; top: calc(60px + env(safe-area-inset-top)); left: 12px; z-index: 44; background: rgba(23,20,31,.93); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 99px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--text); box-shadow: var(--shadow); display: none; }
.map-back.on { display: block; }
.map-back:hover { border-color: var(--purple); }
.map-locate { height: 44px; padding: 0 13px; border-radius: 14px; background: rgba(23,20,31,.93); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; flex-shrink: 0; white-space: nowrap; color: var(--muted); }
.map-locate:hover { border-color: var(--purple); color: var(--text); }
.map-locate.active { border-color: var(--green); color: var(--green); }
.sheet-x { position: absolute; top: 10px; right: 12px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: var(--card-hi); border: 1.5px solid #4a4160; color: var(--text); font-size: 17px; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.sheet-x:hover { color: var(--red); border-color: var(--red); }
.sheet-bm { position: absolute; top: 8px; right: 60px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: var(--card-hi); border: 1px solid var(--line); font-size: 15px; filter: grayscale(1) opacity(.65); }
.sheet-bm.filled { filter: none; border-color: var(--purple); background: var(--purple-soft); box-shadow: 0 0 0 1px var(--purple); }
.lane-btn { cursor: pointer; background: none; border: 0; border-right: 1px solid var(--line); font-family: inherit; color: inherit; }
.lane-btn .lcaret { font-size: 9px; color: var(--purple); margin-left: 3px; }
#hours-tbl { border: 1px solid var(--line); border-radius: 13px; padding: 10px 14px; margin: -4px 0 10px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
.pager button { width: 34px; height: 34px; border-radius: 50%; background: var(--card-hi); border: 1px solid var(--line); color: var(--text); font-size: 15px; }
.pager button:disabled { opacity: .3; }
.pager .pg-ctx { color: var(--orange); font-weight: 700; }
.t-stop .n { color: var(--orange); font-family: var(--display); margin-right: 2px; }
.legend { position: absolute; left: 12px; bottom: 26px; z-index: 42; background: rgba(23,20,31,.95); backdrop-filter: blur(8px); border: 1px solid rgba(139,92,246,.45); border-radius: 14px; padding: 9px 12px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.legend .lrow { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.legend .swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend.collapsed .lrow { display: none; }
.legend .ltitle { font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.d-label .cnt { color: var(--orange); font-weight: 800; }
.d-label.compact { padding: 5px 10px; font-size: 11.5px; }
.d-label.compact small { display: none; }
.sugg-head { padding: 11px 14px 3px; color: var(--muted); font-size: 12.5px; }
.sugg-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 14px 13px; }
.sheet-hero { height: 150px; border-radius: 16px; background: center/cover; margin: 2px 0 12px; }

/* district panel inside map */
.district-panel .dp-head { padding: 2px 20px 8px; }
.district-panel h2 { font-family: var(--display); text-transform: uppercase; font-size: 30px; }
.district-panel .dp-tags { color: var(--orange); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.district-panel .dp-sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.dp-rail { display: flex; gap: 10px; overflow-x: auto; padding: 10px 20px 16px; scrollbar-width: none; }
.dp-card { flex-shrink: 0; width: 170px; border-radius: var(--r-sm); overflow: hidden; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.dp-card:hover { border-color: var(--purple); }
.dp-card .ph { height: 76px; background: linear-gradient(135deg,#2a2438,#201c2b) center/cover; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.dp-card .body { padding: 9px 11px 11px; font-size: 12.5px; }
.dp-card h6 { font-size: 13.5px; }

/* 2F: the sheet is the app's hands */
@media (min-width: 900px) and (max-width: 1150px) {
  body:has(.sheet.up) .map-top-row { max-width: calc(100vw - 446px); flex-wrap: wrap; }
}
@media (max-width: 560px) {
  body.trail-open .legend { bottom: calc(26px + 96px); }
}
.dp-card.dp-tail { display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: 14px; line-height: 1.5; color: #d9ccff;
  background: var(--purple-soft); border: 1.5px dashed var(--purple); cursor: pointer; }
.dp-rest { margin-top: 10px; }
.dp-rest .dp-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.dp-rest .dp-row .em { font-size: 18px; flex-shrink: 0; }
.dp-rest .dp-row h6 { font-size: 14px; }
.sheet.half .dp-rest { display: none; } /* remainder appears at full / on desktop */

/* 2G: first save pulses its destination once */
@keyframes tab-pulse { 0%, 100% { transform: none; } 20% { transform: scale(1.18); } 45% { transform: scale(1); } 65% { transform: scale(1.12); } }
.tabbar button.pulse-once .ic { display: inline-block; animation: tab-pulse 1.2s ease 2; color: var(--purple); }
@media (prefers-reduced-motion: reduce) { .tabbar button.pulse-once .ic { animation: none; } }

/* 2I: tonight travels with you */
.tabbar button { position: relative; }
.tabbar .cnt { position: absolute; top: 1px; left: calc(50% + 8px); background: var(--orange);
  color: #1a1208; font-size: 10px; font-weight: 800; line-height: 1; border-radius: 99px; padding: 2px 5px; }

/* 2J: failures speak plainly, then offer a hand back */
.data-error { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 99; padding: 24px; }
.map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 5; padding: 24px; }
.de-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; max-width: 360px; text-align: center; }
.de-card h2 { font-family: var(--display); text-transform: uppercase; margin-bottom: 8px; font-size: 22px; }
.de-card p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(16px); bottom: calc(76px + env(safe-area-inset-bottom));
  background: rgba(23, 20, 31, .97); border: 1px solid var(--line); border-radius: 14px; padding: 11px 16px;
  font-size: 13.5px; z-index: 95; opacity: 0; transition: .25s; max-width: min(92vw, 480px); user-select: text; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 2M: honest data edges */
.thin-note { margin: 10px 0 2px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; }
.hours-src { color: var(--dim); font-size: 11.5px; padding: 6px 2px 0; }

/* 2L: compositor-only beacon; photos layer over emoji and may quietly fail */
.beacon { width: 0; height: 0; position: relative; pointer-events: none; z-index: 3; }
.beacon .b-glow { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 26, .55), rgba(255, 122, 26, 0) 70%);
  animation: beacon-pulse 1.7s ease-in-out infinite; }
.beacon .b-core { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); border: 2.5px solid #fff; box-sizing: border-box; }
@keyframes beacon-pulse { 0%, 100% { transform: scale(.75); opacity: .8; } 50% { transform: scale(1.3); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .beacon .b-glow { animation: none; } }
.ph, .nm-ph, .dp-ph, .sh-ph, .sheet-hero { position: relative; overflow: hidden; }
.ph > img, .nm-ph > img, .dp-ph > img, .sh-ph > img, .sheet-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.reveal-hero .ph .kick { z-index: 2; }

/* 2K: a keyboard path through the whole journey */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button.s-hit, button.dp-row, button.tonight-card, button.ybox, button.lrow { width: 100%; }
button.s-hit, button.dp-row, button.tonight-card, button.ybox, button.lrow,
button.near-mini, button.dp-card, button.t-go { text-align: left; font: inherit; color: inherit; }
button.ybox, button.near-mini { display: block; }
button.dp-card { display: block; padding: 0; }
.t-stop .t-go { display: inline-flex; align-items: center; gap: 6px; padding: 0; font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 6px; }
#sheet-body h2:focus { outline: none; }
#sheet-body h2:focus-visible { outline: 2px solid var(--purple); }
/* a closed sheet is invisible, not a sliver above the tab bar */
.sheet:not(.up) { visibility: hidden; transition: transform .28s cubic-bezier(.3, .9, .3, 1), visibility 0s .28s; }
.sheet.up { visibility: visible; }

/* P3a: relevance badge on neighbors; pager clears the close button; mobile card fit */
.near-mini.hit { border-color: var(--orange); }
.nm-hit { display: block; color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-top: 3px; }
.pager { padding-right: 52px; }
@media (max-width: 899.98px) {
  .sheet.half .hours-link { display: none; }
  .sheet.half .ctx-dist { display: none; }
}
@media (max-width: 560px) {
  .sheet-actions .btn { padding: 11px 10px; font-size: 13px; min-width: calc(50% - 8px); }
}

/* P3: search-this-area pill, hover tip */
.map-top .search-area-wrap { display: flex; justify-content: center; pointer-events: auto; }
.map-top .search-area-wrap .chip { background: var(--card); box-shadow: var(--shadow); border-color: var(--purple); }
.dot-tip .maplibregl-popup-content { background: rgba(26, 22, 34, .95); color: var(--text); border: 1px solid rgba(139, 92, 246, .35);
  border-radius: 12px; padding: 7px 12px; font-family: var(--font); font-size: 12.5px; box-shadow: var(--shadow); }
.dot-tip .maplibregl-popup-tip { border-top-color: rgba(26, 22, 34, .95); border-bottom-color: rgba(26, 22, 34, .95); }

/* copy pass: pager context ellipsis, desktop drops the swipe hint, suggest hint */
.pg-ctx { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (min-width: 900px) { .pg-swipe { display: none; } }
.sugg-hint { color: var(--dim); font-size: 13px; padding: 10px 4px; text-align: center; width: 100%; }

/* R1: plan v2 + sheet action hierarchy + swipe */
.sheet-actions .primary-cta { width: 100%; flex-basis: 100%; min-width: 0; font-size: 15px; padding: 14px 16px; }
.sheet-actions .act-row { display: flex; gap: 8px; width: 100%; }
.sheet-actions .act-row .btn { flex: 1; min-width: 0; }
.sheet-actions .act-links { width: 100%; display: flex; gap: 8px; justify-content: center; color: var(--dim); font-size: 12.5px; padding: 4px 0 0; }
.sheet-actions .act-links a, .sheet-actions .act-links button { color: var(--muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.sheet-body { will-change: transform; }
@keyframes slide-in-left { from { transform: translateX(60vw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-in-right { from { transform: translateX(-60vw); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-body.slide-left { animation: slide-in-left .3s cubic-bezier(.2,.8,.3,1); }
.sheet-body.slide-right { animation: slide-in-right .3s cubic-bezier(.2,.8,.3,1); }
.nm-why { display: block; color: var(--dim); font-size: 10.5px; margin-top: 3px; font-weight: 600; }
.plan-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; font-size: 14px; }
.plan-when label { font-weight: 700; }
.plan-when input { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13.5px; color-scheme: dark; }
.plan-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 18px; }
.plan-actions .btn { flex: 1; min-width: 140px; padding: 11px 12px; font-size: 13.5px; }
.btn.danger { color: #fca5a5; border-color: rgba(248,113,113,.4); }
.plan-tune { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.plan-tune summary { cursor: pointer; font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; color: var(--orange); padding: 6px 0 10px; list-style: none; }
.plan-tune summary::-webkit-details-marker { display: none; }
.plan-tune summary::after { content: ' ▾'; color: var(--dim); }
.plan-tune[open] summary::after { content: ' ▴'; }
.stop .rail-line .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.stop-card { position: relative; }
.stop-card.pick { border-color: var(--purple); }
.stop-ctl { position: absolute; top: 8px; right: 8px; }
.stop-menu-btn { width: 34px; height: 34px; border-radius: 10px; background: var(--card-hi); border: 1px solid var(--line); color: var(--text); font-size: 16px; letter-spacing: 1px; }
.stop-menu { position: absolute; top: 38px; right: 0; z-index: 6; min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 5px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.stop-menu[hidden] { display: none; }
.stop-menu button { text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: var(--text); }
.stop-menu button:hover { background: var(--card-hi); }
.stop-menu button:disabled { opacity: .35; }
.stop-card .lockhint { display: none; }
.plan-sum { margin: 10px 0 4px; color: var(--muted); font-size: 13px; text-align: center; }

/* R2: calmer chrome, chips that fit, legend that explains itself */
.fchip.toggle.dist.active { background: var(--purple-soft); border-color: var(--purple); color: #d9ccff; }
.legend .lrow.showall { justify-content: center; color: #d9ccff; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.maplibregl-ctrl-group.bh-reset { margin-top: 8px; }
.bh-reset-btn { width: 40px; height: 40px; font-size: 18px; color: var(--text); background: transparent; display: flex; align-items: center; justify-content: center; }
.d-label.d-summary { font-size: 13.5px; padding: 8px 14px; border-color: var(--purple); background: rgba(26,22,34,.96); }
.d-label.d-summary small { display: block; }
.sugg-err { color: #fca5a5; font-size: 12.5px; padding: 6px 14px 2px; }
.sugg-type { padding: 10px 14px 0; }
@media (max-width: 560px) {
  .fchip { padding: 5px 10px; font-size: 12px; }
  .searchresults .chip.small { padding: 6px 11px; font-size: 13px; }
  .now-filters .chip.small { padding: 6px 11px; font-size: 12.5px; }
  .searchpill { padding: 2px 12px; }
  .searchpill input { font-size: 16px; padding: 8px 0; }
}

/* R3: what's-around cards, pill/toast stacking */
.near-mini.pic { width: 150px; min-width: 150px; display: flex; flex-direction: column; border-color: var(--line); }
.near-mini.pic .nm-ph { height: 78px; }
.near-mini.pic .nm-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.25; padding: 8px 10px 0; }
.near-mini.pic .nm-meta { display: block; color: var(--muted); font-size: 11.5px; padding: 3px 10px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-mini.pic .nm-tag { align-self: flex-start; margin: auto 10px 10px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700; background: var(--card); color: var(--muted); border: 1px solid var(--line); }
.near-mini.pic .nm-tag.hit { background: var(--orange-soft); color: var(--orange); border-color: rgba(255,122,26,.4); }
.near-mini.hit { border-color: rgba(255,122,26,.55); }
.trailbar.pill { border-color: rgba(139,92,246,.6); background: rgba(23,20,31,.97); }
.t-pill { padding: 9px 16px; font-size: 13px; }
body:has(.trailbar:not([hidden])) .toast { bottom: calc(124px + env(safe-area-inset-bottom)); }

/* R5: rail arrows, pill */
.near-wrap { position: relative; }
.nr-arrow { display: none; position: absolute; top: 40px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(23,20,31,.92); border: 1px solid var(--line); color: var(--text); font-size: 20px; line-height: 1; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.nr-arrow.l { left: -6px; } .nr-arrow.r { right: -6px; }
@media (min-width: 900px) {
  .nr-arrow { display: flex; align-items: center; justify-content: center; }
  .near-wrap:hover .nr-arrow.show { opacity: 1; pointer-events: auto; }
}
.t-pill b { color: var(--orange); margin-left: 4px; }

/* R6: peek strip affordance */
.sheet.peek .peekbar { font-size: 15px; padding: 2px 56px 0 20px; align-items: center; min-height: 32px; }
.sheet.peek .peekbar .pk-open { color: var(--purple); font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.sheet.peek .grab::before { background: var(--purple); }

/* R8: shelf close, plan-clear mini, CTA row */
.sugg-close { position: absolute; top: 8px; right: 8px; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  background: var(--card-hi); border: 1px solid var(--line); color: var(--text); font-size: 14px; }
.sugg-close + .sugg-sec { margin-right: 52px; } /* the first header and its More never slide under the X */
.sugg-close + .sugg-sec + .sugg-chips { width: calc(100% - 52px); } /* nor the first chip row */
.searchresults { position: absolute; }
.rec-clear { color: var(--muted); }
.cta-row { display: flex; gap: 8px; width: 100%; }
.cta-row .primary-cta { flex: 1; }
.cta-row .cta-clear { flex: 0 0 52px; min-width: 52px; padding: 10px 0; font-size: 16px; }

/* RA: mobile X on the left, swipe ghost, collapsed input when chips exist */
@media (max-width: 899.98px) {
  .sheet-x { left: 12px; right: auto; }
  .pager { padding-right: 0; padding-left: 52px; }
  .searchpill.has-chips input:not(:focus) { flex: 0 0 34px; min-width: 34px; width: 34px; padding-left: 0; padding-right: 0; }
  .searchpill.has-chips input:not(:focus)::placeholder { color: transparent; }
}
.swipe-ghost { position: absolute; left: 0; right: 0; top: 38%; height: 56px; z-index: 8; pointer-events: none; }
.swipe-ghost span { position: absolute; left: 50%; top: 0; font-size: 34px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
  animation: swipe-ghost-x 1.2s ease-in-out 2; opacity: 0; }
@keyframes swipe-ghost-x { 0% { transform: translateX(40px); opacity: 0; } 25% { opacity: .95; } 75% { opacity: .95; } 100% { transform: translateX(-90px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .swipe-ghost { display: none; } }
.cta-row .cta-clear { flex: 0 0 auto; min-width: 0; padding: 10px 12px; font-size: 12.5px; white-space: nowrap; color: var(--muted); }
.cta-row .primary-cta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* RB: district panel, five looks */
.dp-styles { display: flex; gap: 5px; margin: 8px 0 2px; }
.dp-styles button { width: 28px; height: 28px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 700; }
.dp-styles button.on { background: var(--purple-soft); border-color: var(--purple); color: #d9ccff; }
.dp-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.dp-filters::-webkit-scrollbar { display: none; }
.dp-filters .chip.small { flex-shrink: 0; padding: 5px 10px; font-size: 12px; }
.dp-card { display: flex; flex-direction: column; }
.dp-card .body { display: flex; flex-direction: column; gap: 3px; flex: 1; padding: 8px 10px 10px; }
.dp-card .dp-meta { font-size: 11.5px; }
.dp-why { color: #ffd9bb; font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 28px; }
.dp-card .badge, .dp-cell .badge { margin-top: auto; align-self: flex-start; }
.dp-ledger, .dp-ranked, .dp-kind { padding: 4px 20px 10px; }
.dp-lrow, .dp-rankrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.dp-lrow .em { font-size: 18px; flex-shrink: 0; }
.dp-lrow .swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dp-lrow .lmain, .dp-rankrow .lmain { flex: 1; min-width: 0; }
.dp-lrow h6, .dp-rankrow h6 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-lrow .dim, .dp-rankrow .dim { font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-lrow .badge, .dp-rankrow .badge { flex-shrink: 0; }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 20px 14px; }
.dp-cell { display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.dp-cell .ph { height: 86px; }
.dp-cell .gbody { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; flex: 1; }
.dp-cell h6 { font-size: 13.5px; }
.dp-cell .dim { font-size: 11.5px; }
.dp-hero { display: block; width: calc(100% - 40px); margin: 6px 20px 4px; text-align: left; font: inherit; color: inherit; background: var(--card); border: 1px solid rgba(255,122,26,.45); border-radius: var(--r); overflow: hidden; }
.dp-hero .ph { height: 130px; }
.dp-hero .hbody { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 3px; }
.dp-hero .hrank { color: var(--orange); font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.dp-hero h6 { font-size: 17px; }
.dp-rankrow .rk { width: 22px; color: var(--orange); font-family: var(--display); font-size: 14px; flex-shrink: 0; text-align: center; }
.dp-kind .sec-label { margin: 10px 0 2px; }

/* DP final: rich by-kind rows */
.dp-lrow.rich { align-items: flex-start; gap: 11px; padding: 10px 2px; }
.dp-ph { width: 54px; height: 54px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, #2a2438, #201c2b); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.dp-lrow.rich h6 { display: flex; align-items: center; gap: 7px; font-size: 14.5px; }
.dp-lrow.rich h6 .swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dp-lrow.rich .m1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; margin-top: 1px; }
.dp-lrow.rich .why2 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: #ffd9bb; font-size: 11.5px; margin-top: 2px; }
.dp-lrow.rich .badge { margin-top: 2px; }
.sec-label.kind { display: flex; align-items: center; gap: 8px; }
.sec-label.kind .swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sec-label.kind .kind-all { margin-left: auto; padding: 4px 10px; font-size: 11.5px; }
.dp-filters .chip .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }

/* DP3: aliveness ordering, the way back, the fire */
.sheet-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 8px 0 10px; padding: 0 16px; border-radius: 99px;
  background: rgba(255, 122, 26, .14); border: 1px solid var(--orange); color: #ffd9bb; font-size: 13px; font-weight: 700; }
@media (max-width: 899.98px) { .sheet-back { display: flex; width: max-content; margin: -14px 0 10px 52px; } } /* beside the X on phones: same row, same center line */
.dp-filters .okn, .near-chips .okn { color: var(--green); font-weight: 800; }
.hot-now { display: inline-block; font-size: 12px; animation: hot-pulse 1.6s ease-in-out infinite; }
@keyframes hot-pulse { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hot-now { animation: none; } }

/* rich search rows, same language as the district panel */
.s-hit.rich { align-items: flex-start; gap: 10px; }
.sh-ph { width: 44px; height: 44px; flex-shrink: 0; border-radius: 9px; background: linear-gradient(135deg, #2a2438, #201c2b); display: flex; align-items: center; justify-content: center; font-size: 19px; margin-top: 1px; }
.s-hit.rich .smain { flex: 1; min-width: 0; }
.s-hit.rich .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-hit.rich > .badge { flex-shrink: 0; margin-top: 3px; }

/* R11: district intro line, search why-line */
.dp-blurb { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 5px 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-why { color: #ffd9bb; font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; }
/* one Back, one place: while the open card carries its own pill, the map chip stands down */
body:has(#sheet.up:not(.peek) .sheet-back) #ctxchip { display: none; }
@media (max-width: 899.98px) { .dp-tags { margin-left: 52px; min-height: 20px; } } /* clear of the X on phones */

/* R12: the fire rides the photo corner; "more" chip reads as an action, not a kind */
.ph-fire { position: absolute; left: 2px; top: 1px; z-index: 2; font-size: 12px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85)); }
.dp-filters .chip.more { border-style: dashed; color: var(--muted); }

/* R14: curator notes carry their full text; taps and a card button unfold them */
.nq-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nq-clamp.open { -webkit-line-clamp: unset; }
.note-more { display: block; margin: 2px 0 0; padding: 2px 0; border: 0; background: none; color: var(--orange); font-size: 12px; font-weight: 700; cursor: pointer; }
.dp-lrow.rich .why2.open, .s-why.open { -webkit-line-clamp: unset; }
.dp-lrow.rich .why2, .s-why { cursor: pointer; }

/* R15: What's Around kind chips */
.near-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 8px; padding-bottom: 2px; }
.near-chips::-webkit-scrollbar { display: none; }
.near-chips .chip.small { flex-shrink: 0; padding: 4px 10px; font-size: 11.5px; }

/* a long plan label trails off instead of clipping mid-letter */
.sheet-actions button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ontology v2: staff picks and the adults-only setting */
.staff-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 122, 26, .16); border: 1px solid rgba(255, 122, 26, .5); color: #ffd9bb; font: 700 11px/1.4 system-ui, sans-serif; letter-spacing: .02em; }
.staff-mini { font-size: 11px; margin-left: 2px; }
.setting-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.setting-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--orange); }
.setting-row small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* prose card, nested shelf, age gate */
.sheet-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #e6e0f2; }
.sugg-chips.tents { flex-wrap: wrap; overflow: visible; }
.sugg-chips.sugg-sub { flex-wrap: wrap; overflow: visible; margin: -4px 14px 6px 22px; padding: 8px 0 8px 12px; border-left: 2px solid var(--orange); }
.chip.tent { font-weight: 700; }

/* staff flair, rail-chip arrows, prose clamp */
.chip.tent.flair { background: linear-gradient(135deg, rgba(255, 196, 0, .22), rgba(255, 122, 26, .18)); border-color: rgba(255, 196, 0, .7); color: #ffe9b3; }
.chip.tent.flair.on { background: linear-gradient(135deg, rgba(255, 196, 0, .45), rgba(255, 122, 26, .4)); color: #fff; }
.chips-wrap { position: relative; }
.nc-arrow { display: none; position: absolute; top: 2px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line, #332d44); background: rgba(26, 22, 34, .95); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; pointer-events: none; }
.nc-arrow.l { left: -4px; } .nc-arrow.r { right: -4px; }
@media (hover: hover) { .nc-arrow { display: flex; align-items: center; justify-content: center; } .chips-wrap:hover .nc-arrow.show { opacity: 1; pointer-events: auto; } }
.sheet-desc.note-quote { margin-top: 10px; }

/* pills with dropdowns */
.sugg-close + .pillbar { width: calc(100% - 52px); }

/* after dark: tucked away, enticing, one tap */
.near-mini.dark-teaser, .dark-teaser.row { background: linear-gradient(160deg, #2a1b3a, #1b1626); border: 1px dashed rgba(244, 114, 182, .55); }
.near-mini.dark-teaser .dt-ico { font-size: 34px; display: block; margin: 14px 0 6px; }
.near-mini.dark, .dp-lrow.dark { border-color: rgba(244, 114, 182, .45); }
.nm-tag.dark { background: rgba(244, 114, 182, .18); color: #f9a8d4; }
.dark-teaser.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; margin: 10px 0 6px; color: var(--ink); text-align: left; cursor: pointer; }
.dark-teaser.row .dt-ico { font-size: 22px; } .dark-teaser.row small { display: block; color: #f9a8d4; font-size: 12px; margin-top: 2px; }
.dark-teaser.open { opacity: .6; }
.bucket-head.dark { width: 100%; border: 1px dashed rgba(244, 114, 182, .55); background: linear-gradient(160deg, #2a1b3a, #1b1626); border-radius: 12px; margin: 10px 14px 6px; width: calc(100% - 28px); cursor: pointer; text-align: left; color: var(--ink); }
.bucket-head.dark .bh-sub { color: #f9a8d4; }
/* specials */
.specials { margin-top: 10px; padding: 8px 10px 6px; border-radius: 12px; background: rgba(255, 122, 26, .06); border: 1px solid rgba(255, 122, 26, .22); }
.specials.hh { background: rgba(167, 139, 250, .07); border-color: rgba(167, 139, 250, .25); }
.sp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sp-head h4 { font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.specials.hh .sp-head h4 { color: #cbb8ff; }
.sp-head .sp-st { margin-left: auto; }
.sp-row { display: grid; grid-template-columns: minmax(58px, max-content) 1fr auto; gap: 2px 10px; align-items: start; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 12.5px; line-height: 1.35; }
.sp-row.next { background: rgba(255, 217, 187, .07); margin: 0 -6px; padding: 6px 6px; border-radius: 8px; border-top: 0; }
.sp-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .sp-end .sp-src { margin: 0; }
.sp-row:first-of-type { border-top: 0; }
.sp-when { display: flex; flex-direction: column; min-width: 0; max-width: 118px; } .sp-when b { color: var(--green); font-size: 12px; } .sp-when span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.sp-row.now .sp-when b, .sp-row.later .sp-when b { color: #ffd9bb; } .sp-row.ended { opacity: .7; }
.sp-deal { min-width: 0; }
.sp-st { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--muted); white-space: nowrap; }
.sp-st.now { background: rgba(74, 222, 128, .18); color: var(--green); } .sp-st.later, .sp-st.next { color: #ffd9bb; } .sp-st.ended { opacity: .6; }
.sp-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.sp-fine { font-size: 10.5px; color: var(--dim); }
.wk-days { display: flex; flex-wrap: wrap; gap: 5px; } .wk-days .chip.small { padding: 4px 9px; font-size: 11.5px; }
.ctx-dist { margin: 10px 0 8px; display: flex; align-items: center; gap: 6px; }
.sp-bell { background: none; border: 1px solid rgba(255, 122, 26, .4); color: #ffd9bb; border-radius: 99px; padding: 5px 11px; font: 700 12px system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.sp-bell.on { border-color: var(--green); color: var(--green); }
.sp-more summary { cursor: pointer; color: var(--purple); font-size: 12px; font-weight: 700; padding: 6px 0 2px; }

/* facets: tents organize, leaves select */
.linkbtn { background: none; border: 0; color: var(--purple); font: 700 12px system-ui; cursor: pointer; padding: 4px; }
.fchip.toggle.ctx { border-color: rgba(255, 122, 26, .5); }

/* specials in results and on the shelf, the two-line hover, shelf clarity */
.sp-line { display: block; min-width: 0; margin: 4px 0 2px; padding: 4px 8px 4px 6px; border-radius: 8px; background: rgba(255, 122, 26, .13); border: 1px solid rgba(255, 122, 26, .38); font-size: 12px; line-height: 1.3; color: #ffe6d2; max-height: calc(2.6em + 8px); overflow: hidden; }
.sp-line .sp-tag { display: inline-block; vertical-align: 1px; margin-right: 6px; font: 800 9.5px/1 var(--display), system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #1a1420; background: var(--orange); border-radius: 4px; padding: 3px 5px; }
.sp-line .sp-tag.hh { background: #a78bfa; } .sp-line.next { background: rgba(167, 139, 250, .1); border-color: rgba(167, 139, 250, .35); color: #e9dfff; } .sp-line.next .sp-when { color: #cbb8ff; }
.sp-line .sp-txt { font-weight: 600; } .sp-line .sp-txt .dim { font-weight: 500; }
.sp-line .sp-when { float: right; margin-left: 8px; font-weight: 800; font-size: 11px; color: var(--green); white-space: nowrap; }
.sp-line.later .sp-when { color: #ffd9bb; } .sp-line.ended { opacity: .72; } .sp-line.ended .sp-when { color: var(--muted); }
.sugg-sec .linkbtn.tiny { font-size: 11px; margin-left: 10px; text-transform: none; letter-spacing: 0; }
.sp-strip { display: block; width: calc(100% - 28px); margin: 10px 14px 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 122, 26, .4); background: rgba(255, 122, 26, .1); color: var(--ink); font: 500 13px system-ui, sans-serif; text-align: left; cursor: pointer; }
.sp-strip b { color: #ffd9bb; }
.dot-tip .tip-cat { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; font-weight: 500; }

.chip.small.tent { font-weight: 700; } .chip.small.tent .car { color: var(--muted); font-size: 12px; margin-left: 3px; }
.chip.small.tent.open { border-color: var(--ax, var(--purple)); }
.chip.small.flair { border-color: rgba(255, 196, 0, .45); color: #ffe9b3; }
.ax-place { --ax: #a78bfa; } .ax-for { --ax: #f472b6; } .ax-vibe { --ax: #34d399; } .ax-more { --ax: #fbbf24; }
.chip.small.ax-place.on, .chip.small.ax-for.on, .chip.small.ax-vibe.on, .chip.small.ax-more.on { border-color: var(--ax); background: color-mix(in srgb, var(--ax) 20%, var(--card2, #2a2438)); color: #fff; }
.chip.small.flair.on { background: linear-gradient(135deg, rgba(255, 196, 0, .5), rgba(255, 122, 26, .45)); border-color: rgba(255, 196, 0, .9); }
#pillchips .fchip.ax-place { border-color: #a78bfa; background: rgba(167, 139, 250, .2); color: #e9dfff; }
#pillchips .fchip.ax-for { border-color: #f472b6; background: rgba(244, 114, 182, .18); color: #ffd6ea; }
#pillchips .fchip.ax-vibe { border-color: #34d399; background: rgba(52, 211, 153, .18); color: #c9f5e4; }
#pillchips .fchip.ax-more { border-color: #fbbf24; background: rgba(251, 191, 36, .16); color: #ffeec2; }
.sp-strip { margin-top: 6px; }
.sp-src { color: var(--muted); text-decoration: none; margin-left: 4px; font-size: 11px; } .sp-src:hover { color: var(--orange); }

/* chips and sub-chips: a tent opens its own row beneath; the foot is the count line */
.sugg-chips.tents { padding-bottom: 8px; }
.chip.small.tent .car { color: var(--muted); font-size: 11px; margin-left: 4px; }
.chip.small.tent.has { border-color: var(--ax, var(--purple)); }
.chip.small.tent.open { border-color: var(--orange); color: #ffd9bb; } .chip.small.tent.open .car { color: var(--orange); }
.chip.small.tent.on.open { color: #fff; }
.shelf-foot { display: flex; align-items: center; gap: 12px; }
.shelf-foot .cnt { color: var(--muted); font-size: 13.5px; white-space: nowrap; } .shelf-foot .cnt b { color: var(--ink); font-size: 16px; }
.shelf-foot .sugg-show { width: auto; margin: 0 0 0 auto; padding: 9px 16px; }
.shelf-foot .sugg-hint { text-align: left; padding: 0; width: auto; flex: 1; font-size: 12.5px; }
.shelf-foot .linkbtn { margin-left: auto; } .shelf-foot .linkbtn + .sugg-show { margin-left: 0; }
#row-q { padding-top: 10px; }

/* shelf: chips stay put; the open tent and the picked ones look different; rows scroll with arrows; nothing hides under the X */
.sugg-close { z-index: 3; }
#row-q { padding-right: 60px; }
.chips-wrap.shelf { position: relative; }
.chips-wrap.shelf .nc-arrow { top: 50%; transform: translateY(-50%); }
.chips-wrap.shelf .nc-arrow.l { left: 4px; } .chips-wrap.shelf .nc-arrow.r { right: 4px; }
@media (max-width: 899.98px) { .chips-wrap.shelf .nc-arrow { display: none; } }
.chip.small.tent { border-radius: 10px; padding-right: 9px; }
.chip.small.tent .k { color: var(--muted); font-weight: 600; margin-left: 2px; }
.chip.small.tent.has { border-color: var(--ax, var(--purple)); box-shadow: inset 0 0 0 1px var(--ax, var(--purple)); }
.chip.small.tent.has .k { color: #fff; }
.chip.small.tent.open { background: rgba(255, 122, 26, .16); border-color: var(--orange); color: #ffd9bb; } .chip.small.tent.open .car { color: var(--orange); }
.chip.small.tent.on.open { color: #fff; }
.chip.small.zero { opacity: .35; }
.sugg-sub-wrap { margin: -2px 14px 8px 18px; padding: 6px 0 8px 12px; border-left: 2px solid var(--orange); }
.sugg-sec.sub { padding: 0 0 4px; color: #ffd9bb; } .sugg-sec.sub .dim { font-family: var(--body, system-ui); letter-spacing: 0; text-transform: none; font-size: 11px; font-weight: 500; }
.sugg-chips.sugg-sub { margin: 0; padding: 0; border: 0; flex-wrap: wrap; overflow: visible; }
/* results: bucket heads stick; the near-miss buckets are visibly a different list */
.searchresults .bucket-head { position: sticky; top: 0; z-index: 2; background: var(--surface, #17141f); }
.searchresults .bucket-head.partial { border-top: 2px solid rgba(255, 122, 26, .45); }
.bk.partial { background: rgba(255, 122, 26, .05); box-shadow: inset 3px 0 0 rgba(255, 122, 26, .35); }
/* where are you? */
.where-ask { margin: 6px 14px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .35); }
.wa-why { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.wa-row { display: flex; gap: 6px; } .wa-in { flex: 1; min-width: 0; background: rgba(0,0,0,.25); border: 1px solid var(--line, #332d44); border-radius: 10px; color: var(--ink); padding: 8px 10px; font: 14px system-ui, sans-serif; }
.wa-err { color: #fca5a5; font-size: 12px; margin-top: 6px; }

.more-rows { display: block; margin: 6px auto 12px; }
.sugg-sec.sub2 { padding: 8px 0 3px; color: var(--muted); font-size: 10px; }

/* tents: the open one is unmistakably open; the ones in your search carry a count */
.chip.small.tent.open { background: var(--orange); border-color: var(--orange); color: #1a1420; } .chip.small.tent.open .car, .chip.small.tent.open .k { color: #1a1420; }
.chip.small.tent.has { box-shadow: none; border-color: rgba(167, 139, 250, .7); }
.chip.small.tent .k { background: rgba(167, 139, 250, .28); color: #e9dfff; border-radius: 99px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.chip.small.tent.open .k { background: rgba(0, 0, 0, .18); }
/* the first row stops before the ✕; shelf rows show their arrows without hovering */
.chips-wrap.shelf.q { margin-right: 54px; }
#row-q { padding-right: 14px; }
@media (hover: hover) { .chips-wrap.shelf .nc-arrow.show { opacity: 1; pointer-events: auto; } }
/* bar chips: open now sits with the rest; hops are a trail */
.hops { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 0; pointer-events: auto; }
.hop { background: rgba(23, 20, 31, .92); border: 1px solid rgba(255, 217, 187, .5); color: #ffd9bb; border-radius: 99px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); }
.hop:hover { background: rgba(255, 217, 187, .14); }
/* toast with answers */
.toast.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toast .ta { background: var(--purple); color: #fff; border: 0; border-radius: 99px; padding: 6px 12px; font: 700 12.5px system-ui, sans-serif; cursor: pointer; }
/* district panel filters: open now reads as a toggle */
.dp-filters .chip.toggle { border-style: dashed; } .dp-filters .chip.toggle.on { border-style: solid; border-color: var(--green); background: rgba(74, 222, 128, .14); color: var(--green); }

.nm-st { display: block; font-size: 10.5px; font-weight: 700; margin-top: 1px; } .nm-st.ok { color: var(--green); } .nm-st.no { color: var(--muted); }
#row-q { padding: 10px 58px 4px 14px; }
.chip.small.on .dim { color: rgba(255, 255, 255, .7); font-weight: 500; }