/* Explore composition; functional IDs and original action handlers remain intact. */
.explore-design{--surface:#202222;--ink:#f8f5ef;--text-strong:#f8f5ef;--steel:#b8bdb8;--rule:#434844;--chrome:#111515;--orange:#ff7a1a;font-family:system-ui,sans-serif;color:var(--ink);background:var(--chrome)}
html[data-theme="light"] .explore-design{--surface:#fff;--ink:#181b1a;--text-strong:#181b1a;--steel:#606661;--rule:#d8d9d4;--chrome:#f8f5ef}
.explore-design :is(button,input,select,summary){font:inherit;font-size:1rem;min-height:44px}
.explore-design :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* REDESIGN-AUDIT-6 S03: js/discover.js's openPopup() moves focus into the sheet's
   grab handle (or, on desktop, Close) on every open so keyboard/screen-reader riders
   land inside it - correct and kept. Chromium's own :focus-visible heuristic cannot
   tell a pointer-triggered open from a keyboard one once async work (the camera fit)
   separates the .focus() call from the originating event, so it painted the ring on
   a plain map-pin tap too. .dsh-focus-noring is added there ONLY for a pointer-driven
   open (never removes the real :focus-visible rule below for an actual Tab reaching
   these controls) - higher specificity than both the rule above and the grab handle's
   own rule below so it wins regardless of source order. */
.explore-design :is(button,a,input,select,summary).dsh-focus-noring:focus-visible{outline:none}
.explore-design summary{cursor:pointer;padding:10px 14px}
.explore-design .explore-navigation{display:flex;justify-content:space-around;background:var(--surface);border-top:1px solid var(--rule)}
.explore-navigation a{min-height:48px;padding:12px 8px;color:var(--ink);font-size:1rem;text-decoration:none}
.explore-navigation [aria-current]{color:var(--ink);border-bottom:4px solid var(--orange);font-weight:700}
.explore-design .dsc-chip{border-radius:24px;min-height:44px;font-size:1rem;text-transform:none;letter-spacing:0;background:var(--surface);color:var(--ink)}
.explore-design .dsc-chip[aria-pressed="true"]{background:var(--orange);color:#181b1a;border-color:var(--orange);font-weight:700}
.explore-design .dsc-tools :is(input,select){color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:14px;font-size:1rem;min-height:48px}
.explore-design .dsh-b h3{font-size:1.5rem;line-height:1.2;text-transform:none;margin:2px 0 0}
.explore-design .dsh-where,.explore-design .dsh-figs span{font-size:.875rem;letter-spacing:0;text-transform:none}
.explore-design .dsh-acts :is(a,button){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;border-radius:14px;font-size:1rem;letter-spacing:0;text-transform:none;white-space:normal;background:var(--orange);color:#181b1a;line-height:1.3}
.explore-design .dsh-acts .ghost{background:var(--surface);color:var(--ink);border:1px solid var(--rule)}
.explore-design .dsh-close{min-width:44px;min-height:44px;border-radius:50%}
.explore-design .dsh-content{overflow-wrap:anywhere}
/* Compact card (mockup 005): eyebrow, title, one fact line, then the three live
   actions - Save and Add to ride together, Ride here as its own tap target below.
   These sit first in .dsh-content so they are visible without expanding the sheet. */
.explore-design .dsh-eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--steel)}
.explore-design .dsh-sub{margin:4px 0 0;font-size:.9375rem;color:var(--steel);text-transform:none}
.explore-design .dsh-primary-acts{display:flex;gap:10px;margin:8px 0 0}
.explore-design .dsh-primary-acts>*{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;border-radius:14px;font-size:.9375rem;font-weight:700;white-space:normal;text-align:center;line-height:1.25}
/* css/garage.css's shared .savebtn ("the save control, wherever it appears") is a
   small uppercase/tracked badge style appropriate to a route page's inline save
   link; mock-005's Save button is a plain sentence-case label matching Add to
   ride/Ride here next to it, so reset the two properties that rule sets and this
   one didn't already override (font-size/padding/weight above already win on
   source order - text-transform/letter-spacing need an explicit reset here). */
.explore-design .dsh-primary-acts .savebtn{background:var(--surface);color:var(--ink);border:1px solid var(--rule);text-transform:none;letter-spacing:0}
/* Bookmark glyph on Save, masked rather than inline HTML - see the comment at this
   button's markup (js/discover.js openPopup()) for why: js/garage.js's paintBtn()
   repaints this element with textContent on every load/tap, which would erase an
   icon placed in the element's own children. */
.explore-design .dsh-primary-acts .savebtn::before{content:"";display:inline-block;width:16px;height:16px;
  margin-right:6px;flex:none;background:currentColor;
  -webkit-mask:var(--bookmark-icon) center/contain no-repeat;mask:var(--bookmark-icon) center/contain no-repeat;
  --bookmark-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E")}
.explore-design .dsh-primary-acts [data-draft-action="append"]{background:var(--orange);color:#181b1a;border:1px solid var(--orange)}
.explore-design .dsh-ridehere{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0;padding:6px;background:transparent;border:0;color:var(--orange);font-weight:700;font-size:.9375rem}
.explore-design .dsh-draft-status:empty{display:none}
.explore-design .dsh-save-note{margin:0 0 4px;font-size:.8125rem;line-height:1.35;color:var(--steel)}
/* Search row: the field plus the brand mark mockup 005 puts where an account
   avatar would sit (see build-heritage.py's build_discover comment - no account
   system exists here, so this is a real link home, not a fabricated avatar). */
.explore-design .dsc-searchrow{position:relative;display:flex;align-items:center}
.explore-design .dsc-searchrow #dq{flex:1 1 auto;min-width:0;padding-left:44px;padding-right:52px}
/* Decorative search glyph from mock-005. It is deliberately a pointer-transparent
   pseudo-element: the labelled native search input remains the entire hit target and
   the glyph adds no duplicate announcement to the accessibility tree. */
.explore-design .dsc-searchrow::before{content:"";position:absolute;left:16px;top:50%;z-index:1;
  width:16px;height:16px;transform:translateY(-50%);pointer-events:none;background:currentColor;
  -webkit-mask:var(--search-icon) center/contain no-repeat;mask:var(--search-icon) center/contain no-repeat;
  --search-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.explore-design .dsc-brand-badge{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:32px;min-width:32px;height:32px;min-height:32px;padding:0;border-radius:50%;background:var(--orange);color:#181b1a;font-weight:800;font-size:.625rem;letter-spacing:.03em;text-decoration:none}
/* N/3D rail buttons (mock-005) - same shape/classnames as js/plan.js's own rail
   (css/plan.css .pmapctl/.pmapbtn), ported with Explore's own token names rather
   than pulling in plan.css wholesale (different package, different page). */
.explore-design .pmapbtn{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
  border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,.22);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font:700 14px/1 system-ui,sans-serif}
.explore-design .pmap-needle{position:absolute;left:50%;top:6px;width:0;height:0;margin-left:-6px;
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--orange);
  transform-origin:6px 16px;transform:rotate(var(--bearing,0deg))}
.explore-design .pmap-n{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:11px;font-weight:800;color:var(--ink)}
/* The rail's own label is always "3D" (js/discover.js paint3d()) - aria-pressed
   carries the on/off state as colour, not a relabel to "2D"/"Flat view". */
.explore-design #pmap-3d .pmap-3d-t{color:var(--steel)}
.explore-design #pmap-3d[aria-pressed="true"] .pmap-3d-t{color:var(--orange)}
@media(max-width:760px){
 .explore-design{height:100dvh;overflow:hidden}
 .explore-design>.mast,.explore-design>.promo,.explore-design>.foot{display:none}
 .explore-design main,.explore-design .dsc{position:fixed;inset:0;display:block;height:auto;min-height:0;margin:0;padding:0}
 .explore-design .dsc-map{position:absolute;inset:0;height:auto;min-height:0}
 .explore-design .dsc-feed{position:absolute;inset:calc(env(safe-area-inset-top) + 8px) 12px auto;z-index:6;pointer-events:none;background:none;border:0;max-height:42dvh;overflow:auto;border-radius:18px}
 .explore-design .dsc-feed>*{pointer-events:auto}
 .explore-design .dsc-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .explore-design .dsc-tools{padding:0;border:0;gap:8px;background:transparent}
 .explore-design #dq{width:100%;padding:12px 52px 12px 16px;box-shadow:0 2px 10px #0002}
 .explore-design .dsc-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:0}
 .explore-design .dsc-chip{flex:0 0 auto}
 /* mock-005's five chips (Roads/Viewpoints/Fuel/Food/Events) all sit on one row
    at 390/375 width with no scroll - smaller than the 1rem/9px-13px size this
    screen used before, which only fit ~3.5 (REDESIGN-REVIEW-CORTANA-1). Scoped
    to the primary row only: "More filters" chips moved into the overflow dock
    and keep their own (larger, wrapped) presentation there. Measured against
    the real rendered row (scripts/test-explore-redesign.js S03-CHIPS-FIT), not
    guessed - this is what actually clears the budget at both 390 and 375 once
    "Viewpoints" and "Events" (the two longest labels) are accounted for. */
 .explore-design .dsc-chips:not(.dsc-chips--more) .dsc-chip{font-size:.75rem;padding:6px 6px;gap:3px;min-height:38px;border-radius:12px}
 .explore-design .dsc-chips:not(.dsc-chips--more) .dsc-chip svg{width:12px;height:12px}
 .explore-design .explore-region{background:var(--surface);border-radius:14px}
 .explore-design .explore-region select{width:100%}
 .explore-design #darea{align-self:center;display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:28px;padding:10px 18px;margin:8px auto;min-height:48px}
 /* mock-005's "Search this area" carries a small magnifying-glass glyph. Masked
    rather than inline HTML, same reasoning as the Save button above - no code here
    rewrites this button's text, but a mask keeps the icon independent either way. */
 .explore-design #darea::before{content:"";display:inline-block;width:16px;height:16px;flex:none;
   background:currentColor;-webkit-mask:var(--search-icon) center/contain no-repeat;mask:var(--search-icon) center/contain no-repeat;
   --search-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
 .explore-design #darea-status:not(:empty){background:var(--surface);padding:8px 12px;border-radius:12px;font-size:1rem;line-height:1.4}
 .explore-design .explore-results{background:var(--surface);border-radius:16px}
 .explore-design .dsc-list{overflow:visible;max-height:none}
 .explore-design .explore-results[open]{padding-bottom:12px}
 .explore-design .explore-navigation{position:fixed;bottom:0;left:0;right:0;z-index:10;padding-bottom:env(safe-area-inset-bottom);overflow-x:auto}
 .explore-design .explore-settings{position:fixed;right:12px;bottom:calc(58px + env(safe-area-inset-bottom));z-index:9;background:var(--surface);border:1px solid var(--rule);border-radius:16px;max-height:55dvh;overflow:auto;max-width:calc(100vw - 24px)}
 .explore-design .explore-settings .util{display:block;background:var(--surface);color:var(--ink)}
 .explore-design .util .shell{display:flex;flex-wrap:wrap;padding:12px;gap:8px}
 .explore-design .util :is(a,button){color:var(--ink);min-height:44px;padding:10px;font-size:1rem}
 /* N/3D rail (mock-005), mounted on .dsc-map by js/discover.js's briefExploreRail,
    not inside MapLibre's own top-right corner: this screen's search/chip feed is a
    multi-row dock of varying height (unlike Home's one fixed bar), so the rail's
    top offset tracks --explore-feed-bottom (explore-dock-layout script) instead of
    a static margin. Zoom buttons (the default NavigationControl's own group) have
    no place in the mockup at phone width - hidden here, kept on desktop. */
 .explore-design .pmapctl--top{position:absolute;top:var(--explore-feed-bottom,132px);right:12px;z-index:6;
   display:flex;flex-direction:column;gap:10px;pointer-events:auto}
 .explore-design .maplibregl-ctrl-top-right>.maplibregl-ctrl-group{display:none}
 .explore-design .dsc-sheet{position:absolute;bottom:0;left:0;right:0;border:1px solid var(--rule);border-radius:24px 24px 0 0;z-index:7;box-shadow:0 -4px 24px #0002}
 /* The compact card follows its rendered contents instead of guessing from the
    title's character count. This preserves the mock's compact shape for short
    names while allowing every real wrapped line and all three actions to remain
    readable. The viewport bound is only a safety valve for accessibility text. */
 .explore-design .dsc-sheet[data-detent="compact"]{height:auto;max-height:calc(100dvh - 112px)}
 .explore-design .dsc-sheet[data-detent="expanded"]{height:min(85dvh,calc(100dvh - 16px));position:absolute}
 .explore-design .dsh-detent{min-height:32px;height:32px;border-radius:24px 24px 0 0;font-size:.875rem;text-transform:none;letter-spacing:0;flex:none}
 .explore-design .dsh-detent:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
 .explore-design .dsh-b{padding:8px 16px calc(8px + env(safe-area-inset-bottom));overflow:visible}
 .explore-design .dsh-acts{gap:8px}
 .explore-design .dsh-acts :is(a,button){flex:1 1 120px}
 /* Everything past Ride here (surface warning, device-storage note, alias,
    media, figs, Open route/Open in Maps) is real but not part of mock-005's
    compact card - one tap on the handle away, never deleted. */
 .explore-design .dsc-sheet[data-detent="compact"] .dsh-more{display:none}
 html[data-text="l"] .explore-design{font-size:18px}
 html[data-text="xl"] .explore-design{font-size:20px}
 html[data-text="xl"] .explore-design .dsc-sheet[data-detent="compact"]{height:260px}
}

/* App-shell owns navigation in native/standalone context. */
html[data-app] .explore-navigation { display: none; }
/* js/app-shell.js's shared .appbar (the V1 Ride/Roads/Plan/Garage tab bar) is
   visible by default in app mode (css/heritage.css) for pages that still want it -
   mock-005 draws no tab bar at all, the same rule Home established on plan.html
   (css/plan.css's own unconditional `html[data-app] .appbar{display:none}`, a
   different file this package does not own). This is that same fix, scoped to
   Explore's own page via its body class rather than touched globally. */
html[data-app] .explore-design .appbar { display: none; }
/* The brand badge (js/discover.js wires its click) is this screen's overflow
   trigger in app mode, mirroring Home's MRP-badge/account-sheet pattern - so the
   "Display & links" dock's own always-visible pill (the only other way back to
   Home before this pass) is hidden; the <details> itself still works, opened
   programmatically. Outside app mode (the website, which keeps its full nav) this
   rule does not apply - the dock's own trigger stays visible there as before. */
html[data-app] .explore-design .explore-settings > summary { display: none; }
/* "Browse roads & region" (REDESIGN-REVIEW-CORTANA-1: its own pinned map-corner
   pill, sitting right over the collapsed attribution (i), was clutter mock-005
   does not draw - hidden here the same way the dock above is, but only while
   CLOSED: once #dsc-browse-trigger (inside "Display & links") opens it, the
   summary reappears as the panel's own sticky in-place header/close toggle
   (the existing rule a few lines down already gives it that job on the
   website) - unlike the badge/settings dock, nothing else here auto-closes on
   an outside tap, so a permanently-hidden summary would have trapped a rider
   inside an open panel with no way back. */
html[data-app] .explore-design .explore-results:not([open]) > summary { display: none; }
/* In app mode the badge/overflow buttons above are the closed-state triggers. With
   their summaries hidden, these two fixed <details> retained only a two-pixel border
   box at z-index 9. That box painted across—and intercepted—the Save/Add button faces
   in the z-index 7 detail sheet. Remove only the closed dock chrome/hit layer; opening
   either disclosure restores its complete border, contents and interaction. */
html[data-app] .explore-design :is(.explore-results,.explore-settings):not([open]) {
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  pointer-events:none;
}
.explore-settings select { min-height:44px; font-size:16px; color:var(--ink); background:var(--surface); }
.explore-browse-trigger{display:block;width:100%;margin:8px 0 0;border-radius:12px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);text-align:left;font-size:.9375rem}

/* MapLibre's own attribution control (ported from css/plan.css - Home's own fix;
   this page does not load that file). Default behaviour tiles a repeating (i)
   background and never cold-opens collapsed at phone width, which previously
   read as a half-drawn, clipped icon pinned to the corner rather than Home's
   clean single (i) circle (REDESIGN-REVIEW-CORTANA-1: "no cut-off (i)"). */
.explore-design .maplibregl-ctrl button{width:44px;height:44px}
.explore-design .maplibregl-ctrl button .maplibregl-ctrl-icon{background-size:22px 22px}
.explore-design .maplibregl-ctrl-attrib-button{width:34px;height:34px;background-repeat:no-repeat;background-position:center;background-size:22px 22px}
.explore-design .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show){width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;background:transparent;box-shadow:none}
.explore-design .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button{top:0;left:0;right:auto;border-radius:50%;background-color:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.18)}
html[data-theme="dark"] .explore-design .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button{background-color:#EEEAE2;filter:invert(1)}

/* Secondary discovery controls leave the primary map/search hierarchy clear. */
@media(max-width:760px){
 .explore-design .dsc-feed{overflow:visible;max-height:none}
 .explore-design .dsc-tools{display:flex;flex-direction:column;gap:8px}
 .explore-design .dsc-chips{margin:0;padding:0;border-radius:0;background:transparent;border:0}
 .explore-design #darea{margin:8px auto 0}
 .explore-design #darea-status:not(:empty){margin:8px 0 0;max-height:18dvh;overflow:auto}
 .explore-design .explore-results{position:fixed;left:12px;bottom:calc(58px + env(safe-area-inset-bottom));z-index:9;width:calc(50vw - 18px);border:1px solid var(--rule);box-shadow:0 2px 10px #0002;pointer-events:auto}
 .explore-design .explore-results>summary{min-height:44px;padding:10px 12px;line-height:1.25;overflow-wrap:anywhere}
 .explore-design .explore-results[open]{width:calc(100vw - 24px);max-height:55dvh;overflow:auto;overscroll-behavior:contain;z-index:11}
 .explore-design .explore-results[open]>summary{position:sticky;top:0;background:var(--surface);z-index:1;border-bottom:1px solid var(--rule)}
 .explore-design .explore-results .explore-region{margin:8px;border:1px solid var(--rule)}
 .explore-design .explore-results #dregion{width:100%;max-width:100%;min-height:48px;color:var(--ink);background:var(--surface);font-size:1rem;border:1px solid var(--rule);border-radius:10px}
 .explore-design .explore-settings:not([open]){width:calc(50vw - 18px)}
 .explore-design .explore-settings>summary{line-height:1.25;overflow-wrap:anywhere}
 .explore-design .explore-settings[open]{z-index:12}
}

/* Each mobile overlay participates in the same stacking context. The selected
   card owns the viewport bottom; the app-mode dock summaries are hidden and must
   not reserve a phantom strip below it. Open disclosures intentionally overlay
   the card and remain independently scrollable. */
@media(max-width:760px){
 .explore-design .dsc-feed{z-index:auto}
 .explore-design .dsc-tools,.explore-design #darea,.explore-design #darea-status{position:relative;z-index:6}
 .explore-design .dsc-sheet:not([hidden]){bottom:0;display:flex;flex-direction:column;overflow:hidden}
 .explore-design .dsc-sheet[data-detent="compact"]{height:auto;max-height:calc(100dvh - 112px)}
 .explore-design .dsc-sheet[data-detent="expanded"]{height:var(--explore-expanded-budget,60dvh)}
 .explore-design .dsh-content{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
 .explore-design .dsc-sheet[data-detent="compact"] .dsh-content{flex:0 1 auto}
 .explore-design .dsh-b{overflow:visible}
}

/* Named-road search still announces its success to assistive technology, but
   the transient Found banner must not cover the settled map/card composition. */
.explore-design #darea-status[data-sheet-announcement="true"]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Inherited utility theme controls are 40px; Explore requires 44px targets. */
.explore-design .explore-settings .util .themeb{min-width:44px;min-height:44px}

/* More filters: the four road-only chips (Tight twisties/Mountain passes/Long
   hauls/Shops nearby) that predate mockup 005's five-category row. Folded here
   rather than deleted - still real .dsc-chip elements, same click handler. */
.explore-design .explore-more-filters{margin-top:8px}
.explore-design .explore-more-filters>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:24px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);font-size:.9375rem;list-style:none}
.explore-design .explore-more-filters>summary::-webkit-details-marker{display:none}
.explore-design .explore-more-filters[open]>summary{margin-bottom:8px}
.explore-design .dsc-chips--more{margin:0}

/* .dsc-row: the plain <li> list used by Shops nearby and Events. Neither style
   had ever shipped (checked: no .dsc-row rule anywhere in this repo), so both
   rendered as unstyled browser list items - functional, invisible as a design.
   One rule covers both; Events adds a note line and a source link on top. */
.explore-design .dsc-row{list-style:none;display:flex;align-items:flex-start;gap:12px;padding:12px;margin:0 0 8px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.explore-design .dsc-row-main{display:block;flex:1 1 auto;min-width:0}
.explore-design .dsc-row-main>b{display:block;font-size:1rem;color:var(--text-strong)}
.explore-design .dsc-row-sub{display:block;margin-top:2px;font-size:.875rem;color:var(--steel)}
.explore-design .dsc-row-note{display:block;margin-top:6px;font-size:.875rem;line-height:1.4;color:var(--ink)}
.explore-design .dsc-row-away{flex:none;font-size:.875rem;font-weight:700;color:var(--steel);white-space:nowrap}
.explore-design .dsc-row-link{flex:none;align-self:center;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:12px;background:var(--orange);color:#181b1a;font-size:.875rem;font-weight:700;text-decoration:none;white-space:normal;text-align:center}
.explore-design .dsc-row--event{flex-wrap:wrap}

/* Existing-data places retain independent road selection and draft actions. */
.explore-poi-card{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:44px;margin:6px 0;padding:10px;text-align:left;font:inherit;color:var(--explore-ink,inherit);background:var(--explore-panel,transparent);border:1px solid currentColor;border-radius:12px;overflow-wrap:anywhere}
.explore-poi-card-body{flex:1;min-width:0}
.explore-poi-card-body>b{display:block;font-size:1rem}
.explore-poi-sub{display:block;margin-top:2px;font-size:.8125rem;opacity:.75}
.explore-poi-attribution{font-size:14px;line-height:1.4;overflow-wrap:anywhere}

/* Place details owns one mobile top-layer surface; background map/docks are inert
   until Close/Escape. Preserve readable content at large text and short heights. */
.explore-place-dialog{box-sizing:border-box;width:calc(100vw - 24px);max-width:34rem;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:auto;padding:0;border:1px solid var(--rule);border-radius:20px;background:var(--surface);color:var(--ink);overflow:auto;overscroll-behavior:contain;font:inherit}
.explore-place-dialog::backdrop{background:#0008}
.explore-place-details{padding:16px;overflow-wrap:anywhere;line-height:1.45}
.explore-place-details>strong{display:block;font-size:1.25em;line-height:1.25}
.explore-place-details>p{margin:12px 0}
.explore-place-details>a{display:block;color:inherit;min-height:44px;padding:8px 0;box-sizing:border-box}
.explore-place-details>button{display:block;position:sticky;bottom:0;width:100%;min-height:44px;margin-top:12px;padding:12px;border:1px solid var(--rule);border-radius:12px;background:var(--orange);color:#181b1a;font:inherit;font-weight:600;white-space:normal}