/* ── shell: fixed-width left sidebar + fluid main, footer below ── */
.pl-shell{display:grid;grid-template-columns:248px minmax(0,1fr);align-items:start;}
.pl-main{min-width:0;}
.pl-nav{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;
  padding:20px 14px;border-right:1px solid var(--fe-line);background:var(--fe-surface-card);overflow:auto;}
/* Brand slot — hosts the real FeBrand mark (door glyph + wordmark) from
   www.thesidedoor.co so the discovery chrome matches the marketing site. */
.pl-brand{display:flex;align-items:center;padding:6px 8px 18px;}
.pl-nav-groups{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;}
.pl-nav-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fe-ink-muted);
  font-weight:700;margin:16px 8px 6px;}
.pl-nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--fe-radius);
  color:var(--fe-ink-2);text-decoration:none;font-size:14px;font-weight:500;}
.pl-nav-item:hover{background:var(--fe-surface-raise);color:var(--fe-ink);}
.pl-nav-item.is-active{background:var(--fe-surface-raise);color:var(--fe-ink);font-weight:600;}
.pl-nav-item .pl-ic{width:18px;height:18px;flex:none;}
.pl-nav-recent{margin-top:16px;}
.pl-nav-back{margin-top:10px;border-top:1px solid var(--fe-line);border-radius:0;padding-top:16px;color:var(--fe-ink-2);}
.pl-nav-back:hover{color:var(--fe-ink);background:transparent;text-decoration:underline;}
.pl-ic{stroke:currentColor;}
/* ── main content ── */
.pl-wrap{max-width:1160px;margin:0 auto;padding:26px 28px 72px;}
.pl-h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:0 0 8px;color:var(--fe-ink);}
.pl-sub{color:var(--fe-ink-2);margin:0 0 28px;font-size:16px;}
/* topbar: search input (grows) + Filters button */
.pl-topbar{display:flex;gap:14px;align-items:center;margin:0 0 22px;}
.pl-searchwrap{position:relative;flex:1 1 auto;min-width:0;}
.pl-searchwrap .pl-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--fe-ink-muted);}
.pl-topbar input{width:100%;padding:13px 16px 13px 44px;border-radius:999px;
  border:1px solid var(--fe-input-border);background:var(--fe-surface-card);color:var(--fe-ink);font-size:15px;}
.pl-topbar input:focus{outline:none;border-color:var(--fe-accent);box-shadow:var(--fe-focus-ring);}
.pl-searchbar{display:flex;gap:10px;margin:0 0 22px;flex-wrap:wrap;}
.pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
  border-radius:var(--fe-radius);background:var(--fe-accent);color:var(--fe-accent-fg);font-weight:600;
  border:0;cursor:pointer;text-decoration:none;font-size:15px;}
.pl-btn:hover{background:var(--fe-accent-hover);}
.pl-btn--ghost{background:transparent;color:var(--fe-ink);border:1px solid var(--fe-line-2);}
/* #1237 — the Filters button is a MOBILE-only affordance: on desktop the chip row is
   always visible (no toggle needed), so the button is hidden; on ≤760px it collapses
   the chip row behind a tap (see the mobile @media block + SEARCH_CLIENT_JS toggle). */
.pl-filters-btn{display:none;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--fe-radius);
  background:var(--fe-surface-card);border:1px solid var(--fe-line-2);color:var(--fe-ink);font-size:14px;font-weight:600;cursor:pointer;flex:none;}
.pl-filters-btn[aria-expanded="true"]{border-color:var(--fe-accent-border);color:var(--fe-ink);}
.pl-filters-btn .pl-ic{width:16px;height:16px;}
.pl-fcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--fe-accent);color:var(--fe-accent-fg);font-size:11px;font-weight:700;line-height:1;}
/* functional filter-chip row (category + cuisine + Clear all) */
.pl-chiprow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 20px;}
.pl-fchip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--fe-surface-card);border:1px solid var(--fe-line-2);color:var(--fe-ink);font-size:14px;font-weight:500;
  text-decoration:none;cursor:pointer;}
.pl-fchip:hover{border-color:var(--fe-accent-border);}
.pl-fchip--cat{color:var(--fe-ink);}
.pl-fchip--group{border-color:var(--fe-accent-border);font-weight:600;}
.pl-fchip-x{font-size:16px;line-height:1;color:var(--fe-ink-muted);}
.pl-fchip--cat:hover .pl-fchip-x{color:var(--fe-ink);}
.pl-fchip--select{padding:0;position:relative;}
.pl-fchip--select.is-set{border-color:var(--fe-accent-border);}
.pl-fchip--select select{appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:none;color:var(--fe-ink);
  font-size:14px;font-weight:500;padding:8px 34px 8px 14px;cursor:pointer;border-radius:999px;}
.pl-fchip--select::after{content:'';position:absolute;right:14px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:1.6px solid var(--fe-ink-muted);border-bottom:1.6px solid var(--fe-ink-muted);transform:translateY(-70%) rotate(45deg);}
.pl-fchip--select select option{color:#111;}
/* #1237 — native date picker rendered inside a chip (venue availability filter). */
.pl-fchip--input{gap:8px;padding:8px 14px;}
.pl-fchip--input.is-set{border-color:var(--fe-accent-border);}
.pl-fchip-lbl{color:var(--fe-ink-muted);font-size:13px;font-weight:500;}
.pl-fchip--input input{appearance:none;background:transparent;border:0;outline:none;color:var(--fe-ink);
  font-size:14px;font-weight:500;font-family:inherit;padding:0;color-scheme:dark;cursor:pointer;}
.pl-fchip--input input::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer;}
.pl-fclear{color:var(--fe-accent);font-size:14px;font-weight:600;text-decoration:none;padding:8px 6px;}
.pl-fclear:hover{text-decoration:underline;}
/* results header: count + grid/map toggle */
.pl-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;}
.pl-count{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--fe-ink-muted);font-weight:600;margin:0;}
.pl-view{display:inline-flex;background:var(--fe-surface-card);border:1px solid var(--fe-line-2);border-radius:999px;padding:3px;gap:2px;}
.pl-view a,.pl-view span,.pl-view button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--fe-ink-2);text-decoration:none;background:transparent;border:0;cursor:pointer;font-family:inherit;}
.pl-view button:hover{color:var(--fe-ink);}
.pl-view .is-active{background:var(--fe-surface-raise);color:var(--fe-ink);}
.pl-view .pl-ic{width:15px;height:15px;}
.pl-rhead-actions{display:inline-flex;align-items:center;gap:10px;}
.pl-nearme{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:var(--fe-surface-card);border:1px solid var(--fe-line-2);color:var(--fe-ink-2);
  font-size:13px;font-weight:600;cursor:pointer;}
.pl-nearme .pl-ic{width:15px;height:15px;}
.pl-nearme:hover{border-color:var(--fe-accent-border);color:var(--fe-ink);}
.pl-nearme.is-on{background:var(--fe-accent);border-color:var(--fe-accent);color:var(--fe-accent-fg);}
.pl-nearme[aria-busy="true"]{opacity:.6;cursor:progress;}
.pl-card-dist{color:var(--fe-accent);}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
/* bottom help card */
.pl-help{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:36px 0 0;padding:22px 24px;border:1px solid var(--fe-line);border-radius:var(--fe-radius-lg);background:var(--fe-surface-card);}
.pl-help h3{margin:0 0 4px;font-size:16px;color:var(--fe-ink);}
.pl-help p{margin:0;color:var(--fe-ink-2);font-size:14px;}
.pl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Map view (Grid/Map toggle) — a Leaflet pin map of the located results,
   lazy-mounted only when the map is shown (see SEARCH_CLIENT_JS). Keyless
   CARTO/OSM raster tiles, divIcon pins → no marker sprites to serve. */
.pl-mappanel{height:min(70vh,620px);border-radius:var(--fe-radius-lg);overflow:hidden;
  border:1px solid var(--fe-line);background:var(--fe-surface-raise);}
.pl-mappanel .leaflet-container{height:100%;width:100%;background:var(--fe-surface-raise);font-family:inherit;}
/* Dark basemap: invert the keyless OSM light tiles for a dark map (only the
   tile pane — markers live in a separate pane, so pins stay full-colour). */
.pl-map-dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.85);}
.pl-pin{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));}
.pl-pop{display:block;text-decoration:none;color:var(--fe-ink);min-width:150px;}
.pl-pop-t{display:block;font-weight:600;font-size:14px;color:var(--fe-ink);}
.pl-pop-m{display:block;font-size:12px;color:var(--fe-ink-2);margin-top:2px;}
/* Full-bleed image tile with an overlaid booking-type badge, rating + caption
   (matches the #851 design mock). White text sits on a dark bottom-up gradient,
   so it reads the same in both the light and dark themes. */
.pl-card{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--fe-radius-lg);overflow:hidden;
  text-decoration:none;color:#fff;background:var(--fe-surface-raise);isolation:isolate;transition:transform .12s;}
.pl-card:hover{transform:translateY(-2px);}
.pl-card-img{position:absolute;inset:0;background:var(--fe-surface-raise) center/cover no-repeat;z-index:-2;}
.pl-card::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.34) 44%,rgba(0,0,0,.02) 68%,rgba(0,0,0,.26) 100%);}
.pl-card-badges{position:absolute;top:12px;left:12px;right:56px;display:flex;flex-wrap:wrap;gap:6px;}
.pl-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.3;
  padding:4px 8px;border-radius:6px;background:rgba(12,12,14,.72);color:#fff;}
/* #1210 — rating sits in the caption directly ABOVE the venue name (inline,
   no badge chrome) so it reads as the top line of the caption stack. */
.pl-card-rating{display:inline-flex;align-items:center;gap:3px;margin:0 0 4px;
  font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;
  background:rgba(12,12,14,.72);color:#fff;}
.pl-card-rating .pl-star{color:#f5c518;}
.pl-card-cap{position:absolute;left:14px;right:14px;bottom:12px;}
.pl-card-title{font-size:18px;font-weight:600;margin:0 0 2px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);}
.pl-card-meta{font-size:13px;color:rgba(255,255,255,.84);margin:0;text-shadow:0 1px 2px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pl-card-sub{font-size:12px;font-weight:600;color:rgba(255,255,255,.92);margin:4px 0 0;
  text-shadow:0 1px 2px rgba(0,0,0,.5);}
/* Experience tile (#971) — taller, portrait-style card: image on top, then the
   title + description + venue name in a body below (per the roya/sevenrooms mock).
   Distinct from the full-bleed .pl-card so the description reads at full contrast. */
.pl-xcard{display:flex;flex-direction:column;border-radius:var(--fe-radius-lg);overflow:hidden;
  text-decoration:none;color:var(--fe-ink);background:var(--fe-surface-card);
  border:1px solid var(--fe-line);transition:transform .12s;isolation:isolate;}
.pl-xcard:hover{transform:translateY(-2px);}
.pl-xcard-img{position:relative;aspect-ratio:4/3;background:var(--fe-surface-raise) center/cover no-repeat;}
.pl-xcard-img .pl-card-badges{right:12px;}
.pl-xcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;}
.pl-xcard-title{font-size:17px;font-weight:600;margin:0;color:var(--fe-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pl-xcard-desc{font-size:13.5px;line-height:1.5;color:var(--fe-ink-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pl-xcard-venue{font-size:12.5px;font-weight:600;color:var(--fe-accent);margin:2px 0 0;}
.pl-empty{color:var(--fe-ink-2);padding:40px 0;text-align:center;}
/* #1237 — group discovery banner (shown above pl-results when a group view /groups/…
   is applied): the hero image is a plain banner; the group name + description sit
   BELOW it (above the venue tiles), not overlaid — per rework feedback. */
.pl-group-hero{position:relative;border-radius:var(--fe-radius-lg);overflow:hidden;margin:0 0 16px;
  aspect-ratio:16/6;background:var(--fe-surface-raise);}
/* #1237 rework — on desktop the group hero is a full-width 300px band (blessani): a
   definite height (not just max-height) keeps it 100% wide while the object-fit:cover
   image zooms/crops to fill it (overflow:hidden). aspect-ratio still governs at narrow
   widths where the band would otherwise be shorter than the cap. */
@media(min-width:760px){.pl-group-hero{aspect-ratio:auto;height:300px;}}
.pl-group-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pl-group-head{margin:0 0 22px;}
.pl-group-head-name{font-size:clamp(20px,3vw,30px);font-weight:700;margin:0;line-height:1.15;color:var(--fe-ink);}
.pl-group-head-desc{font-size:14.5px;line-height:1.55;margin:6px 0 0;color:var(--fe-ink-2);max-width:720px;}
/* "View more from [Group]" CTA on the venue detail page (below the map) — a bigger
   button with a clear break above it (rework feedback). */
.pl-group-more{margin:26px 0 0;}
.pl-btn--lg{padding:15px 28px;font-size:16px;}
.pl-detail-hero{aspect-ratio:16/7;background:var(--fe-surface-raise);border-radius:var(--fe-radius-lg);margin:0 0 24px;overflow:hidden;}
.pl-detail-hero-img{width:100%;height:100%;object-fit:cover;display:block;}
.pl-detail-grid{display:grid;grid-template-columns:1fr;gap:28px;}
@media(min-width:820px){.pl-detail-grid{grid-template-columns:1fr 320px;}}
/* #1081 — section wrappers are transparent on desktop (grid stays main|aside); the
   mobile block below promotes them to orderable blocks. Keep display:contents here. */
.pl-blk{display:contents;}
.pl-detail-title{font-size:clamp(26px,4vw,38px);margin:0 0 6px;color:var(--fe-ink);}
.pl-detail-loc{color:var(--fe-ink-2);margin:0 0 20px;}
.pl-prose{color:var(--fe-ink-2);line-height:1.65;font-size:16px;white-space:pre-line;}
.pl-aside{background:var(--fe-surface-card);border:1px solid var(--fe-line);border-radius:var(--fe-radius-lg);padding:20px;height:fit-content;}
.pl-aside dl{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;}
.pl-aside dt{color:var(--fe-ink-muted);}
.pl-aside dd{margin:0;color:var(--fe-ink);}
.pl-section-h{font-size:20px;margin:36px 0 14px;color:var(--fe-ink);}
.pl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;}
.pl-chip{font-size:13px;padding:5px 12px;border-radius:999px;background:var(--fe-surface-raise);border:1px solid var(--fe-line);color:var(--fe-ink-2);}
.pl-hours{background:var(--fe-surface-card);border:1px solid var(--fe-line);border-radius:var(--fe-radius-lg);overflow:hidden;}
.pl-hours-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;border-top:1px solid var(--fe-line);}
.pl-hours-row:first-child{border-top:0;}
.pl-hours-day{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--fe-ink-muted);font-weight:600;}
.pl-hours-time{font-variant-numeric:tabular-nums;color:var(--fe-ink);text-align:right;}
.pl-hours-closed{color:var(--fe-ink-muted);}
.pl-aside dd a{color:var(--fe-accent);text-decoration:none;word-break:break-word;}
.pl-aside dd a:hover{text-decoration:underline;}
.pl-aside .pl-btn+.pl-btn{margin-top:10px;}
/* Venue-detail CTAs — DS buttons (uppercase), white-on-gold per #851 feedback. */
.pl-cta{display:flex;flex-direction:column;gap:10px;margin:0 0 4px;}
.pl-aside .fe-btn--gold,.pl-aside .fe-btn--gold:hover{color:#fff;}
.pl-aside .fe-btn--gold-outline:hover{color:#fff;}
/* #971 — opening hours moved into the right column below the CTAs; tighten the
   heading and drop the nested card chrome so it sits flush inside the aside. */
.pl-aside .pl-section-h{font-size:16px;margin:22px 0 12px;}
.pl-aside .pl-hours{background:transparent;border:0;border-radius:0;}
.pl-aside .pl-hours-row{padding-left:0;padding-right:0;}
/* map embed (OpenStreetMap iframe, keyless) + directions link on venue detail */
.pl-map{border-radius:var(--fe-radius-lg);overflow:hidden;border:1px solid var(--fe-line);background:var(--fe-surface-raise);margin:0 0 14px;}
/* Venue-detail Location map (#1380) — a Leaflet mini-map (was an OSM iframe).
   Needs an explicit height before Leaflet initialises. Shares the .pl-map-dark
   tile-pane inversion + .pl-pin marker styling with the search map. */
#pl-venuemap{height:300px;}
#pl-venuemap.leaflet-container{width:100%;background:var(--fe-surface-raise);font-family:inherit;}
.pl-map-dir{margin:0;}
/* Mobile hamburger drawer (#851 feedback — replaces the old horizontal-scroll
   strip). The button + backdrop are desktop-hidden; the sidebar keeps its full
   column layout and slides in from the left as an off-canvas drawer. The button
   is a normal inline control (not fixed) so it can sit inline in the search
   topbar (search page) or on the left of the mobile app bar (detail/404). */
.pl-menu-btn{display:none;width:42px;height:42px;border-radius:var(--fe-radius);
  align-items:center;justify-content:center;flex:none;padding:0;
  background:var(--fe-surface-card);color:var(--fe-ink);border:1px solid var(--fe-line-2);cursor:pointer;}
.pl-menu-btn .pl-ic{width:22px;height:22px;}
.pl-menu-btn:hover{border-color:var(--fe-accent-border);}
.pl-menu-btn:focus-visible{outline:none;box-shadow:var(--fe-focus-ring);}
/* Mobile app bar: centred Sidedoor logo; hamburger absolute-left when present.
   Desktop-hidden. Keeps the logo OUT of the hamburger drawer (#851 feedback). */
.pl-mtop{display:none;}
.pl-mtop-brand{display:inline-flex;}
.pl-nav-backdrop{display:none;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .22s ease;}
.pl-nav-backdrop.is-open{opacity:1;pointer-events:auto;}
@media(max-width:760px){
  .pl-shell{grid-template-columns:1fr;}
  .pl-menu-btn{display:inline-flex;}
  .pl-nav-backdrop{display:block;}
  .pl-mtop{display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:50;
    min-height:56px;padding:8px 12px;border-bottom:1px solid var(--fe-line);background:var(--fe-surface-card);}
  .pl-mtop .pl-menu-btn{position:absolute;left:10px;top:50%;transform:translateY(-50%);}
  .pl-nav{position:fixed;top:0;left:0;z-index:65;width:min(84vw,300px);height:100vh;height:100dvh;
    transform:translateX(-100%);transition:transform .24s ease;box-shadow:0 0 44px rgba(0,0,0,.45);
    border-right:1px solid var(--fe-line);}
  .pl-nav.is-open{transform:translateX(0);}
  /* The logo lives in the app bar on mobile, never inside the drawer. */
  .pl-brand{display:none;}
  body.pl-nav-locked{overflow:hidden;}
  .pl-wrap{padding:18px 16px 56px;}
  /* Search topbar becomes: [hamburger] [search] [filters] */
  .pl-topbar{gap:10px;}
  /* #1237 — on mobile the filter chips collapse behind the Filters button; the
     button toggles the is-open class on the chip row (SEARCH_CLIENT_JS). */
  .pl-filters-btn{display:inline-flex;}
  .pl-chiprow{display:none;}
  .pl-chiprow.is-open{display:flex;}
}
.pl-theme-toggle{position:fixed;bottom:20px;right:20px;z-index:40;
  width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;cursor:pointer;background:var(--fe-surface-card);color:var(--fe-ink);
  border:1px solid var(--fe-line-2);box-shadow:0 2px 10px rgba(0,0,0,.18);transition:border-color .15s,transform .1s;}
.pl-theme-toggle:hover{border-color:var(--fe-accent-border);}
.pl-theme-toggle:active{transform:scale(.94);}
.pl-theme-toggle:focus-visible{outline:none;box-shadow:var(--fe-focus-ring);}
/* #1081 — on mobile the theme toggle leaves the floating bottom-right corner for the top app
   bar's top-right (mirroring the hamburger on the left). Declared AFTER the base .pl-theme-toggle
   rule above so it wins the cascade — a @media block adds no specificity, so source order decides. */
@media(max-width:760px){
  .pl-theme-toggle{top:8px;right:10px;bottom:auto;z-index:51;box-shadow:none;}
}
/* #1081 — MOBILE venue-detail reflow (single column, <820px). Flatten the 2-col grid so the
   info tile + Book/Gift CTAs sit directly under the description (above Experiences), while
   Opening hours stays at the very bottom. Desktop (>=820px) is untouched: .pl-blk is
   display:contents there, so the grid keeps its main|aside two-column layout. */
@media(max-width:819px){
  .pl-detail-main,.pl-aside{display:contents;}
  .pl-blk{display:block;}
  .pl-blk-head{order:0;}
  .pl-blk-desc{order:1;}
  .pl-blk-side{order:2;background:var(--fe-surface-card);border:1px solid var(--fe-line);border-radius:var(--fe-radius-lg);padding:20px;}
  .pl-blk-rest{order:3;}
  .pl-blk-rest>.pl-section-h:first-child{margin-top:0;}
  .pl-blk-hours{order:4;}
  /* the aside card chrome is gone (display:contents), so re-card the standalone hours block
     that the aside overrides had flattened to sit flush inside the aside. */
  .pl-blk-hours .pl-hours{background:var(--fe-surface-card);border:1px solid var(--fe-line);border-radius:var(--fe-radius-lg);}
  .pl-blk-hours .pl-hours-row{padding-left:16px;padding-right:16px;}
}


:root{
  --sd-scale:1;
  --sd-surface:var(--fe-surface-card); --sd-surface-alt:var(--fe-surface-raise);
  --sd-input:var(--fe-surface-card); --sd-row-hover:var(--fe-surface-raise);
  --sd-border:var(--fe-line-2); --sd-border-light:var(--fe-input-border);
  --sd-ghost-border:var(--fe-input-border); --sd-ghost-border-hover:var(--fe-input-border-hover);
  --sd-text:var(--fe-ink); --sd-text-2:var(--fe-ink-2); --sd-text-3:var(--fe-ink-3);
  --sd-muted:var(--fe-ink-2); --sd-dim:var(--fe-ink-muted); --sd-faint:var(--fe-ink-dim);
  --sd-accent:var(--fe-accent); --sd-accent-fg:var(--fe-accent-fg);
}

/* ── Datepicker trigger (replaces native input visually) ────────────── */
.sd-dp-wrap { position: relative; }
.sd-dp-wrap > input[type="date"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.sd-dp-trigger {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  background: var(--sd-input);
  border: 1px solid var(--sd-border-light);
  color: var(--sd-text);
  border-radius: 6px;
  font-family: inherit; font-size: 1rem; line-height: 1.2;
  cursor: pointer; text-align: left;
  transition: border-color 120ms;
}
.sd-dp-trigger:hover { border-color: var(--sd-ghost-border-hover); }
.sd-dp-trigger:focus, .sd-dp-trigger:focus-visible { outline: none; border-color: var(--sd-ghost-border-hover); }
.sd-dp-trigger.is-empty .sd-dp-text { color: var(--sd-dim); }
.sd-dp-trigger .sd-dp-icon { color: var(--sd-text-3); flex-shrink: 0; }
.sd-dp-trigger:hover .sd-dp-icon { color: var(--sd-text); }
/* Compact variant — opt in by putting `sd-dp-compact` on any ancestor of the
   enhanced input. Shrinks the trigger to the h-7 (28px) form used by the compact
   editable tiles (e.g. the guest-list request context menu, #868) so the date
   picker lines up with the party-size / status inputs beside it. */
.sd-dp-compact .sd-dp-trigger {
  height: 1.75rem;
  padding: 0 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.375rem;
}
.sd-dp-compact .sd-dp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-dp-compact .sd-dp-icon { width: 14px; height: 14px; }

/* ── Popover ───────────────────────────────────────────────────────── */
.sd-dp-popover {
  position: absolute;
  z-index: 1000;
  width: 300px;
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  user-select: none;
  font-family: inherit;
}
:root.light .sd-dp-popover { box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08), 0 1px 3px rgba(17, 17, 17, 0.04); }
.sd-dp-popover.hidden { display: none; }

.sd-dp-head {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
}
.sd-dp-month-year {
  flex: 1; text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem; font-weight: 400;
  color: var(--sd-text);
  letter-spacing: -0.01em;
  background: transparent; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 4px;
  transition: background 120ms;
}
.sd-dp-month-year:hover { background: var(--sd-row-hover); }
.sd-dp-month-year:focus, .sd-dp-month-year:focus-visible { outline: none; background: var(--sd-row-hover); }

/* ── Year picker (revealed by clicking the month/year title) ────────── */
.sd-dp-years {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  max-height: 236px; overflow-y: auto; padding: 2px;
}
.sd-dp-years.hidden { display: none; }
.sd-dp-year {
  padding: 8px 0; text-align: center;
  font-family: inherit; font-size: 12px;
  color: var(--sd-text-2);
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.sd-dp-year:hover { background: var(--sd-row-hover); color: var(--sd-text); }
.sd-dp-year.is-current { border-color: var(--sd-border); color: var(--sd-text); font-weight: 600; }
.sd-dp-year.is-selected, .sd-dp-year.is-selected:hover {
  background: var(--sd-accent); color: var(--sd-accent-fg); border-color: var(--sd-accent);
  font-weight: 600;
}
/* Nav arrows are month-only; hidden while the year grid is open. */
.sd-dp-popover.is-years .sd-dp-nav-btn { visibility: hidden; }
.sd-dp-popover.is-years .sd-dp-dow, .sd-dp-popover.is-years .sd-dp-grid { display: none; }
.sd-dp-nav-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--sd-text-2);
  border-radius: 4px; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.sd-dp-nav-btn:hover { background: var(--sd-row-hover); color: var(--sd-text); }

.sd-dp-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 4px;
}
.sd-dp-dow-cell {
  text-align: center; padding: 6px 0;
  font-size: 10px; font-weight: 600;
  color: var(--sd-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.sd-dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.sd-dp-day {
  aspect-ratio: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 12px;
  color: var(--sd-text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.sd-dp-day:hover { background: var(--sd-row-hover); color: var(--sd-text); }
.sd-dp-day.is-today { border-color: var(--sd-border); color: var(--sd-text); font-weight: 600; }
.sd-dp-day.is-outside { color: var(--sd-dim); }
.sd-dp-day.is-selected, .sd-dp-day.is-selected:hover {
  background: var(--sd-accent); color: var(--sd-accent-fg); border-color: var(--sd-accent);
  font-weight: 600;
}
.sd-dp-day.is-disabled { color: var(--sd-faint); cursor: not-allowed; pointer-events: none; }

.sd-dp-actions {
  display: flex; gap: 6px; justify-content: space-between;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--sd-border);
}
.sd-dp-action {
  font-family: inherit;
  font-size: 10px; font-weight: 600;
  color: var(--sd-text-2);
  background: transparent; border: none;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 8px; border-radius: 4px; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.sd-dp-action:hover { background: var(--sd-row-hover); color: var(--sd-text); }


/* ── Timepicker trigger (replaces native input visually) ───────────── */
.sd-tp-wrap { position: relative; }
.sd-tp-wrap > input[type="time"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.sd-tp-trigger {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  background: var(--sd-input);
  border: 1px solid var(--sd-border-light);
  color: var(--sd-text);
  border-radius: 6px;
  font-family: inherit; font-size: 1rem; line-height: 1.2;
  cursor: pointer; text-align: left;
  transition: border-color 120ms;
}
.sd-tp-trigger:hover { border-color: var(--sd-ghost-border-hover); }
.sd-tp-trigger:focus, .sd-tp-trigger:focus-visible { outline: none; border-color: var(--sd-ghost-border-hover); }
.sd-tp-trigger.is-empty .sd-tp-text { color: var(--sd-dim); }
.sd-tp-trigger .sd-tp-icon { color: var(--sd-text-3); flex-shrink: 0; }
.sd-tp-trigger:hover .sd-tp-icon { color: var(--sd-text); }
/* Compact variant — mirrors `sd-dp-compact` on the datepicker. Opt in by putting
   `sd-tp-compact` on any ancestor of the enhanced input so the time picker lines up
   with the compact editable tiles (e.g. the reservation Arrival box, #1083). */
.sd-tp-compact .sd-tp-trigger {
  height: 1.75rem;
  padding: 0 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.375rem;
}
.sd-tp-compact .sd-tp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-tp-compact .sd-tp-icon { width: 14px; height: 14px; }

/* ── Popover ───────────────────────────────────────────────────────── */
.sd-tp-popover {
  position: absolute;
  z-index: 1000;
  width: 260px;
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  user-select: none;
  font-family: inherit;
}
:root.light .sd-tp-popover { box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08), 0 1px 3px rgba(17, 17, 17, 0.04); }
.sd-tp-popover.hidden { display: none; }

/* Digital readout at the top. */
.sd-tp-display {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-bottom: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem; font-weight: 400;
  color: var(--sd-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.sd-tp-display .sd-tp-seg {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  min-width: 52px; text-align: center;
}
.sd-tp-display .sd-tp-seg:hover { background: var(--sd-row-hover); }
.sd-tp-display .sd-tp-seg.is-active {
  background: var(--sd-accent); color: var(--sd-accent-fg);
  border-color: var(--sd-accent);
}
.sd-tp-display .sd-tp-sep { color: var(--sd-muted); font-weight: 300; }

/* Scrollable number columns. */
.sd-tp-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 10px;
}
.sd-tp-col {
  height: 168px;
  overflow-y: auto;
  scrollbar-width: thin;
  border: 1px solid var(--sd-border);
  border-radius: 6px;
  background: var(--sd-input);
}
.sd-tp-col::-webkit-scrollbar { width: 6px; }
.sd-tp-col::-webkit-scrollbar-thumb { background: var(--sd-border); border-radius: 3px; }
.sd-tp-col-head {
  position: sticky; top: 0;
  background: var(--sd-surface-alt);
  border-bottom: 1px solid var(--sd-border);
  padding: 4px 0;
  text-align: center;
  font-size: 10px; font-weight: 600;
  color: var(--sd-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sd-tp-num {
  display: block; width: 100%;
  padding: 5px 0; text-align: center;
  font-family: inherit; font-size: 13px;
  color: var(--sd-text-2);
  background: transparent; border: none; cursor: pointer;
  transition: background 120ms, color 120ms;
  font-variant-numeric: tabular-nums;
}
.sd-tp-num:hover { background: var(--sd-row-hover); color: var(--sd-text); }
.sd-tp-num.is-selected, .sd-tp-num.is-selected:hover {
  background: var(--sd-accent); color: var(--sd-accent-fg);
  font-weight: 600;
}

.sd-tp-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-bottom: 10px;
}
.sd-tp-quick-btn {
  font-family: inherit;
  font-size: 10px; font-weight: 600;
  color: var(--sd-text-2);
  background: transparent;
  border: 1px solid var(--sd-ghost-border);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 0; border-radius: 4px; cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.sd-tp-quick-btn:hover {
  border-color: var(--sd-ghost-border-hover);
  color: var(--sd-text);
}

.sd-tp-actions {
  display: flex; gap: 6px; justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--sd-border);
}
.sd-tp-action {
  font-family: inherit;
  font-size: 10px; font-weight: 600;
  color: var(--sd-text-2);
  background: transparent; border: none;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 8px; border-radius: 4px; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.sd-tp-action:hover { background: var(--sd-row-hover); color: var(--sd-text); }
.sd-tp-action.is-primary { color: var(--sd-accent); }
.sd-tp-action.is-primary:hover { background: var(--sd-accent); color: var(--sd-accent-fg); }

/* Flatten the DS trigger so an enhanced date/time input blends into the pl-fchip pill
   (no nested border/background) — matching the native input it stands in for. */
.pl-fchip--input .sd-dp-wrap,.pl-fchip--input .sd-tp-wrap{flex:none;}
.pl-fchip--input .sd-dp-trigger,.pl-fchip--input .sd-tp-trigger{
  width:auto;background:transparent;border:0;padding:0;gap:6px;height:auto;
  color:var(--fe-ink);font-size:14px;font-weight:500;line-height:1.2;}
.pl-fchip--input .sd-dp-trigger:hover,.pl-fchip--input .sd-tp-trigger:hover,
.pl-fchip--input .sd-dp-trigger:focus,.pl-fchip--input .sd-tp-trigger:focus{border:0;}
.pl-fchip--input .sd-dp-icon,.pl-fchip--input .sd-tp-icon{color:var(--fe-ink-muted);}