/* 🗓️ Where & When (mockup cb3ca116 v5 → app). PX font sizes on purpose —
   the global *{font-size:clamp} trap. Every row declares row-flex — the
   global div{flex-direction:column} trap. Palette = app: bg #e8e8e8 ·
   cards #fff · orange #e99821 · app dark blue #2d5885 text / #3a6ea5 fills (Greg 8/6, was teal) · light-blue
   fills per Greg 8/4 (never brown). */

#page-whenwhere .content-panel { padding-bottom: 80px; }

/* 8/6 r10 (Greg): the view-chip row FREEZES — sticky inside the
   scrolling content-panel, opaque so cards slide under it cleanly. */
#page-whenwhere .ww-head { padding: 8px 10px 2px; position: sticky;
    top: 0; z-index: 6; background: #e8e8e8; }
#page-whenwhere .ww-chiprow { display: flex; flex-direction: row !important;
    flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
#page-whenwhere .ww-viewchip.active { background: #e99821; border-color: #e99821; color: #fff; }

#page-whenwhere .ww-loading { color: #6f6a61; font-size: 14px; padding: 26px 14px; text-align: center; }
#page-whenwhere .ww-quiet { color: #6f6a61; font-size: 13px; font-style: italic; padding: 10px 14px; }

/* week view */
#page-whenwhere .ww-weekhead { display: flex; flex-direction: row !important;
    align-items: baseline; gap: 10px; margin: 18px 12px 6px; color: #23201b; font-size: 16px; }
#page-whenwhere .ww-now { background: #e99821; color: #fff; font-size: 10.5px;
    font-weight: 800; border-radius: 8px; padding: 2px 8px; letter-spacing: .06em; }
#page-whenwhere .ww-card { background: #fff; border: 1px solid #d8e2ec;
    border-radius: 14px; padding: 11px 13px; margin: 8px 10px;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .06); color: #23201b; }
#page-whenwhere .ww-cardtop { display: flex; flex-direction: row !important;
    align-items: center; gap: 10px; }
#page-whenwhere .ww-disc { width: 36px; height: 36px; border-radius: 50%;
    background: #eaf1f8; border: 1px solid #d8e2ec; display: inline-flex;
    align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; }
#page-whenwhere .ww-city { font-weight: 800; font-size: 15.5px; }
#page-whenwhere .ww-loc { color: #6f6a61; font-weight: 600; font-size: 12.5px; }
#page-whenwhere .ww-why { font-size: 13.5px; margin: 7px 0 2px; line-height: 1.45; }
#page-whenwhere .ww-evt { display: inline-block; background: #eaf1f9; color: #2d5885;
    border-radius: 7px; padding: 1px 7px; font-size: 11px; font-weight: 800; white-space: nowrap; }
#page-whenwhere .ww-taste { color: #6f6a61; font-size: 12.5px; margin: 2px 0 8px; }
#page-whenwhere .ww-taste b { color: #2d5885; }
#page-whenwhere .ww-btnrow { display: flex; flex-direction: row !important; gap: 8px; margin-top: 6px; }
#page-whenwhere .ww-trip { background: #e99821; color: #fff; border: none;
    border-radius: 9px; padding: 7px 14px; font-weight: 800; font-size: 13px;
    cursor: pointer; white-space: nowrap; }
#page-whenwhere .ww-trip.sm { padding: 6px 10px; font-size: 12px; flex: 0 0 auto; margin-left: auto; }

/* day view */
#page-whenwhere .ww-cal { background: #fff; border: 1px solid #d8e2ec;
    border-radius: 14px; padding: 10px 10px 8px; margin: 10px; color: #23201b; }
#page-whenwhere .ww-calhead { display: flex; flex-direction: row !important;
    justify-content: space-between; align-items: center; font-size: 15px; margin-bottom: 8px; }
#page-whenwhere .ww-nav { color: #6f6a61; font-size: 20px; padding: 0 10px; cursor: pointer; }
#page-whenwhere .ww-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
#page-whenwhere .ww-dow { color: #6f6a61; font-size: 10px; font-weight: 800;
    text-align: center; letter-spacing: .05em; padding: 2px 0; }
#page-whenwhere .ww-day { border-radius: 9px; padding: 3px 3px 4px; min-height: 62px;
    font-variant-numeric: tabular-nums; cursor: pointer; overflow: hidden; }
#page-whenwhere .ww-day.dim { opacity: .35; cursor: default; }
#page-whenwhere .ww-day.has { background: #eaf1f8; }
#page-whenwhere .ww-day.today { outline: 2px solid #e99821; }
#page-whenwhere .ww-day.sel { background: #e99821; color: #fff; }
#page-whenwhere .ww-n { display: block; font-size: 10.5px; padding-left: 2px; font-weight: 700; }
#page-whenwhere .ww-dn { display: block; font-size: 8.5px; font-weight: 700; line-height: 1.45;
    border-radius: 4px; padding: 0 3px; margin-top: 2px; background: #dcebf5; color: #1f6a6a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-whenwhere .ww-day.sel .ww-dn { background: rgba(255, 255, 255, .3); color: #fff; }
#page-whenwhere .ww-ideas { margin: 4px 10px 12px; }
#page-whenwhere .ww-idea { display: flex; flex-direction: row !important;
    align-items: center; gap: 10px; background: #fff; border: 1px solid #d8e2ec;
    border-radius: 12px; padding: 9px 11px; margin: 7px 0; color: #23201b; }
#page-whenwhere .ww-idea .ww-disc { width: 30px; height: 30px; font-size: 15px; }
#page-whenwhere .ww-ideatxt { font-size: 13px; line-height: 1.4; min-width: 0; }

/* 8/6 taste↔popular dial (mockup b95b64d2 approved) — teal = the Dude
   family voice, orange stays the action color. Row-flex declared — the
   global div{flex-direction:column} trap. */
#page-whenwhere .ww-dial { display: flex; flex-direction: row !important;
    margin-top: 9px; border: 1px solid #cfc9bd; border-radius: 12px;
    overflow: hidden; background: #fff; }
#page-whenwhere .ww-dialbtn { flex: 1; border: none; background: #fff;
    padding: 9px 4px; font-weight: 800; font-size: 13px; cursor: pointer; color: #6f6a61; }
#page-whenwhere .ww-dialbtn.on { background: #3a6ea5; color: #fff; }
#page-whenwhere .ww-dialbtn:not(:last-child) { border-right: 1px solid #eee; }
#page-whenwhere .ww-dialnote { font-size: 11.5px; color: #6f6a61; margin: 6px 2px 0; }
#page-whenwhere .ww-pop { color: #6f6a61; font-size: 12.5px; margin: 2px 0 8px; }
#page-whenwhere .ww-pop b { color: #b06f10; }
#page-whenwhere .ww-more { display: block; width: calc(100% - 20px);
    margin: 2px 10px 4px; background: #fff; border: 1px dashed #cfc9bd;
    border-radius: 11px; padding: 8px; font-weight: 700; font-size: 12.5px;
    color: #6f6a61; cursor: pointer; }

/* 8/6 r10b: taste/pop lines were STACKING (👤 matches your / culture +
   nightlife / saves on 3 rows, giant type) — the global
   div{flex-direction:column} trap turns their inline children into
   stacked flex items. Block display restores the one-line sentence. */
#page-whenwhere .ww-taste, #page-whenwhere .ww-pop,
#page-whenwhere .ww-why, #page-whenwhere .ww-dialnote {
    display: block !important; }

/* 8/6 r10b ROOT CAUSE (Greg: 'found the nav elements at the bottom'):
   the app-global .page > .content-panel{justify-content:flex-end} is a
   chat-era relic that bottom-anchors page content — WTGW never opted
   out (trip did, same line), so entry landed at the list's TAIL and the
   sticky head pinned at the BOTTOM edge. Top-anchored like every
   reading surface: */
#page-whenwhere > .content-panel { justify-content: flex-start !important; }

/* 8/6: 'what to do there' line (Greg) — quiet slate, dot-separated;
   display:block dodges the div col-flex trap */
#page-whenwhere .ww-do { display: block !important; color: #4a5a68;
    font-size: 12.5px; margin: 3px 0 8px; line-height: 1.5; }

/* 8/6 r11 (Greg): badge + trip door ride the card's TOP ROW, right side
   — one whole row saved per card. Row-flex declared (div col-flex trap);
   wraps gracefully on narrow phones. */
#page-whenwhere .ww-cardtop { flex-wrap: wrap; }
#page-whenwhere .ww-topright { display: flex; flex-direction: row !important;
    align-items: center; gap: 7px; margin-left: auto; flex: 0 0 auto; }
#page-whenwhere .ww-topright .ww-trip { padding: 6px 11px; font-size: 12px; }
#page-whenwhere .ww-evt { cursor: pointer; }

/* ── 8/6 MAP BUILD #1 (mock 93b265ee approved) ─────────────────────────
   Row 1: compact ‹week▾› stepper + 3-way view seg.
   Row 2: 🔎 lens (expands OVER the row) + continent chips.
   Map: WTGW's own Leaflet in #ww-map, emoji pins, bottom preview card.
   Every row declares row-flex (div col-flex trap); PX sizes (clamp trap). */
#page-whenwhere .ww-weekrow { display: flex; flex-direction: row !important;
    align-items: center; gap: 7px; }
#page-whenwhere .ww-step { width: 32px; height: 34px; border: 1px solid #cfc9bd;
    border-radius: 10px; background: #fff; font-size: 16px; font-weight: 800;
    cursor: pointer; flex: 0 0 auto; }
#page-whenwhere .ww-wksel { border: 1px solid #cfc9bd; border-radius: 10px;
    background: #fff; padding: 7px 4px; font-weight: 800; font-size: 13px;
    width: 120px; flex: 0 0 auto; }
#page-whenwhere .ww-nowdot { width: 9px; height: 9px; border-radius: 50%;
    background: #e99821; flex: 0 0 auto; }
#page-whenwhere .ww-seg { display: inline-flex; flex-direction: row !important;
    margin-left: auto; border: 1px solid #cfc9bd; border-radius: 11px;
    overflow: hidden; background: #fff; flex: 0 0 auto; }
#page-whenwhere .ww-seg button { border: none; background: #fff; padding: 8px 10px;
    font-weight: 800; font-size: 12.5px; cursor: pointer; color: #6f6a61; }
#page-whenwhere .ww-seg button.on { background: #e99821; color: #fff; }
#page-whenwhere .ww-filterrow { display: flex; flex-direction: row !important;
    align-items: center; gap: 7px; margin-top: 9px; position: relative; min-height: 38px; }
#page-whenwhere .ww-lens { width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid #cfc9bd; background: #fff; font-size: 15px; cursor: pointer;
    flex: 0 0 auto; position: relative; }
#page-whenwhere .ww-lens.active { border-color: #3a6ea5; }
#page-whenwhere .ww-lensdot { position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; border-radius: 9px; background: #3a6ea5;
    color: #fff; font-size: 10px; font-weight: 800; display: inline-flex;
    flex-direction: row !important; align-items: center; justify-content: center;
    padding: 0 4px; }
#page-whenwhere .ww-qchips { display: flex; flex-direction: row !important;
    flex-wrap: wrap; gap: 6px; }
#page-whenwhere .ww-qchip { border: 1px solid #b9cfe0; color: #2d5885; background: #fff;
    border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
#page-whenwhere .ww-qchip.on { background: #3a6ea5; border-color: #3a6ea5; color: #fff; }
#page-whenwhere .ww-lenspanel { position: absolute; left: 0; right: 0; top: 0;
    background: #fff; border: 1.5px solid #3a6ea5; border-radius: 12px;
    padding: 7px 10px; display: none; z-index: 8; box-shadow: 0 6px 20px rgba(20,40,60,.18); }
#page-whenwhere .ww-lenspanel.open { display: block; }
#page-whenwhere .ww-lensrow { display: flex; flex-direction: row !important;
    align-items: center; gap: 8px; }
#page-whenwhere .ww-lensrow input { flex: 1; border: none; outline: none;
    font-size: 14px; min-width: 0; }
#page-whenwhere .ww-lensx { color: #999; font-weight: 800; cursor: pointer;
    padding: 0 2px; font-size: 12px; flex: 0 0 auto; }
#page-whenwhere .ww-lenstags { display: flex; flex-direction: row !important;
    flex-wrap: wrap; gap: 6px; margin-top: 7px; }
#page-whenwhere .ww-tagchip { border: 1px solid #d8c9a8; background: #fdf6e8;
    color: #8a6a1f; border-radius: 10px; padding: 4px 10px; font-size: 12px;
    font-weight: 700; cursor: pointer; }
#page-whenwhere .ww-tagchip.on { background: #e99821; border-color: #e99821; color: #fff; }
#page-whenwhere .ww-lenshint { display: block; font-size: 10.5px; color: #6f6a61; margin-top: 6px; }
/* map body */
#page-whenwhere .ww-mapwrap { position: relative; margin: 8px 10px; }
#page-whenwhere #ww-map { height: calc(100dvh - 320px); min-height: 320px;
    border-radius: 14px; border: 1px solid #d8e2ec; z-index: 1; }
#page-whenwhere .ww-mapcount { position: absolute; top: 8px; left: 52px; z-index: 5;
    background: rgba(255,255,255,.92); border-radius: 9px; padding: 3px 10px;
    font-size: 11.5px; font-weight: 800; color: #2d5885; }
#page-whenwhere .ww-pin-wrap { background: none; border: none; }
#page-whenwhere .ww-pin { width: 30px; height: 30px; border-radius: 50%;
    border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35);
    display: flex; flex-direction: row !important; align-items: center;
    justify-content: center; }
#page-whenwhere .ww-pin.ev { background: #e99821; }
#page-whenwhere .ww-pin.se { background: #3a6ea5; }
#page-whenwhere .ww-pin.sel { transform: scale(1.25); border-color: #23201b; }
#page-whenwhere .ww-pin-emoji { font-size: 15px; line-height: 1; }
#page-whenwhere .ww-mappv { display: none; position: absolute; left: 8px; right: 8px;
    bottom: 8px; z-index: 6; background: #fff; border: 1.5px solid #3a6ea5;
    border-radius: 14px; padding: 11px 34px 11px 13px;
    box-shadow: 0 6px 24px rgba(20,40,60,.25); }
#page-whenwhere .ww-mappv.show { display: block; }
#page-whenwhere .ww-mappv-x { position: absolute; top: 6px; right: 10px;
    cursor: pointer; color: #999; font-weight: 800; }

/* ── 8/6 map r2 (Greg field round) ─────────────────────────────────────
   1. taste-line bold rendered oversized — the *{font-size:clamp} trap
      matches bare <b> DIRECTLY (traps memory #1); force inherit.
   2. map mode: panel scroll LOCKED — the week row can never be pushed
      out of view by map gestures; the map owns all pointer motion. */
#page-whenwhere .ww-taste b, #page-whenwhere .ww-why b,
#page-whenwhere .ww-do b { font-size: inherit !important; }
#page-whenwhere .content-panel.ww-mapmode { overflow: hidden !important; }
#page-whenwhere .content-panel.ww-mapmode #ww-map { overscroll-behavior: none; }

/* ── ladder #2: facet chips (Greg's lit/unlit doctrine, mock v3b) ──────
   lit = blue bordered door with ›; unlit = flat grey label, no press
   affordance. Row-flex declared (div col-flex trap). */
#page-whenwhere .ww-facets { display: flex; flex-direction: row !important;
    flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
#page-whenwhere .ww-facet { border: 1px solid #ddd8cf; color: #8a857b;
    background: #f2f0ec; border-radius: 9px; padding: 3px 9px;
    font-size: 11.5px; font-weight: 600; cursor: default; }
#page-whenwhere .ww-facet.lit { border-color: #b9cfe0; color: #2d5885;
    background: #f4f8fc; font-weight: 700; cursor: pointer; }

/* 8/6 (Greg: 'dead grey area'): beyond-the-poles letterbox wears the
   OSM sea color — reads as ocean, never dead grey. */
#page-whenwhere #ww-map { background: #aad3df; }

/* 8/6 (pin-tap hijack): air gap between the (possibly wrapped) chip row
   and the map's top edge — no chip ever abuts pin territory. */
#page-whenwhere .ww-mapwrap { margin-top: 10px; }

/* ── ladder #3: trip interest sheet (checked facets only ride along) ── */
#ww-tripsheet { position: fixed; left: 0; right: 0; bottom: 0; top: 0;
    z-index: 99990; background: rgba(20, 25, 30, .45);
    display: flex; flex-direction: column !important; justify-content: flex-end; }
#ww-tripsheet .ww-ts-card { position: relative; background: #fff;
    border-radius: 16px 16px 0 0; padding: 15px 15px 18px;
    box-shadow: 0 -8px 30px rgba(0,0,0,.3); }
#ww-tripsheet .ww-ts-x { position: absolute; top: 9px; right: 13px;
    color: #999; font-weight: 800; cursor: pointer; font-size: 15px; }
#ww-tripsheet .ww-ts-title { font-weight: 800; font-size: 16px; color: #23201b; }
#ww-tripsheet .ww-ts-sub { font-size: 12.5px; color: #6f6a61; margin: 4px 0 9px; }
#ww-tripsheet .ww-ts-chips { display: flex; flex-direction: row !important;
    flex-wrap: wrap; gap: 6px; }
#ww-tripsheet .ww-ts-chip { border: 1px solid #b9cfe0; color: #2d5885;
    background: #f4f8fc; border-radius: 10px; padding: 6px 11px;
    font-size: 12.5px; font-weight: 700; cursor: pointer; }
#ww-tripsheet .ww-ts-chip.on { background: #3a6ea5; border-color: #3a6ea5; color: #fff; }
#ww-tripsheet .ww-ts-hint { display: block; font-size: 11px; color: #6f6a61; margin: 8px 0 10px; }
#ww-tripsheet .ww-ts-go { width: 100%; padding: 11px; font-size: 14px; }

/* ── ladder #4: grey chips hunt on tap ── */
#page-whenwhere .ww-facet:not(.lit) { cursor: pointer; }
#page-whenwhere .ww-facet.hunting { border-color: #e99821; color: #b06f10;
    background: #fdf6e8; animation: ww-hunt 1s ease-in-out infinite; }
@keyframes ww-hunt { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  #page-whenwhere .ww-facet.hunting { animation: none; } }

/* ── 8/6 top-nav design round (Greg): hairlines around the continent
   row · dial breathes lower · shade divider under the whole sticky
   head (the Search treatment) ─────────────────────────────────────── */
#page-whenwhere .ww-filterrow { border-top: 1px solid #d9d4c9;
    border-bottom: 1px solid #d9d4c9; padding: 9px 0; margin-top: 9px; }
#page-whenwhere .ww-lenspanel { top: 9px; }   /* expand inside the hairlines */
#page-whenwhere .ww-dial { margin-top: 12px; }
#page-whenwhere .ww-dialnote { margin: 7px 2px 4px; }
#page-whenwhere .ww-head { padding-bottom: 8px;
    border-bottom: 1px solid #d9d4c9;
    box-shadow: 0 3px 8px rgba(20, 20, 15, .10); }

/* Option A (Greg YES 8/6): world-class marquee pins — bigger + ringed */
#page-whenwhere .ww-pin.m3 { width: 36px; height: 36px;
    box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(233,152,33,.85); }
#page-whenwhere .ww-pin.m3 .ww-pin-emoji { font-size: 18px; }