/* ============================================================
   PlantLynk — Customer map app (home)
   Implements the Claude Design handoff "PlantLynk Home" in the
   project's stack. Reuses the .theme-v2 tokens from styles.css.
   ============================================================ */
.pl-body {
  --warm:  #fffdf8;
  --warm2: #f6f0e2;
  --warm3: #f0e9da;
  --tealx: #1a6b7a;
  --teal-soft: #eef5f6;
  --wa: #1f9d63;
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--cream);
  font-family: var(--body-font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
html { height: 100%; }

.plapp { position: fixed; inset: 0; overflow: hidden; }
.pl-scroll::-webkit-scrollbar { width: 0; height: 0; }
.pl-scroll { scrollbar-width: none; }

/* These panels toggle via the `hidden` attribute, but their classes set an
   explicit `display`, which would beat the UA [hidden] rule and leave them
   permanently on top of the app. Force them hidden when [hidden] is set. */
.pl-overlay[hidden], .pl-screen[hidden], .pl-preview[hidden],
.pl-toast[hidden], .pl-search-panel[hidden] { display: none !important; }

#pl-map { position: absolute; inset: 0; background: #cfe0e3; z-index: 1; }
.leaflet-container { background: #cfe0e3; font-family: var(--body-font); }
.leaflet-control-zoom { display: none; }

/* === Marker price pills (Leaflet divIcon) ===
   Ink pills with white price text (Airbnb-style) — premium contrast on the
   warm Voyager map. Category shows as a coloured dot; selected goes safety. */
.pl-mk {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 18px;
  background: var(--ink); color: #fff;
  font: 700 12.5px/1 var(--display-font);
  letter-spacing: .2px;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 5px 16px rgba(8,23,27,.35);
  border: 1.5px solid rgba(255,255,255,.9);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s, box-shadow .16s;
}
.pl-mk:hover { transform: scale(1.07); box-shadow: 0 8px 20px rgba(8,23,27,.4); }
.pl-mk::after { content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid var(--ink); }
.pl-mk-dot { width:7px; height:7px; border-radius:50%; background: var(--tealx); flex:none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); }
.pl-mk.is-active { background: var(--safety); color:#fff; transform: scale(1.14); z-index: 1000; box-shadow: 0 8px 22px rgba(255,94,58,.5); }
.pl-mk.is-active::after { border-top-color: var(--safety); }
.pl-mk.is-active .pl-mk-dot { background:#fff; }
.leaflet-marker-icon.pl-mk-wrap { background: transparent; border: 0; }

/* Cluster bubbles (brand-styled, replaces the plugin default) */
.pl-cluster-wrap { background: transparent; border: 0; }
.pl-cluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink); color: var(--cream);
  font: 800 14px/1 var(--display-font);
  border: 2.5px solid #fff;
  box-shadow: 0 5px 16px rgba(8,23,27,.32);
  transition: transform .12s;
}
.pl-cluster::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; border: 1.5px solid rgba(8,23,27,.18);
}
.leaflet-marker-icon.pl-cluster-wrap:hover .pl-cluster { transform: scale(1.06); }

/* === Top overlay === */
.pl-top {
  position: absolute; left: 0; right: 0; z-index: 600;
  padding: max(10px, env(safe-area-inset-top)) 14px 0;
  pointer-events: none;
}
.pl-top > * { pointer-events: auto; }
.pl-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pl-top-left { display: flex; align-items: center; gap: 8px; }
.pl-round {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: rgba(255,253,248,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px rgba(8,23,27,.12);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  cursor: pointer; transition: transform .12s;
}
.pl-round svg { width: 20px; height: 20px; }
.pl-round:active { transform: scale(.94); }
.pl-wordmark-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,253,248,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 7px 13px 7px 9px; border-radius: 999px; box-shadow: 0 3px 12px rgba(8,23,27,.1);
}
.pl-logo-tile { width:24px; height:24px; border-radius:7px; background: var(--safety); display:flex; align-items:center; justify-content:center; font-family: var(--display-font); font-weight:800; color: var(--ink); font-size:12px; }
.pl-wordmark { font-family: var(--display-font); font-weight:700; font-size:16px; color: var(--ink); }
.pl-wordmark span { color: var(--safety); }

/* search card */
.pl-search-card { background: var(--warm); border-radius: 18px; border: 1px solid rgba(8,23,27,.05); box-shadow: 0 10px 30px rgba(8,23,27,.20); overflow: hidden; }
.pl-search-row { display: flex; align-items: center; gap: 9px; padding: 13px; }
.pl-search-pin { width: 20px; height: 20px; flex: none; }
#pl-search-input { flex:1; border:0; background:transparent; outline:none; font: 500 15.5px var(--body-font); color: var(--ink); min-width: 0; }
#pl-search-input::placeholder { color: rgba(8,23,27,.45); }
.pl-locate { width:36px; height:36px; border-radius:11px; background: var(--teal-soft); display:flex; align-items:center; justify-content:center; color: var(--tealx); flex:none; cursor:pointer; transition: transform .12s; }
.pl-locate svg { width:18px; height:18px; }
.pl-locate:active { transform: scale(.92); }
.pl-locate.is-on { background: var(--safety); color:#fff; }

/* search panel */
.pl-search-panel { border-top: 1px solid rgba(8,23,27,.08); padding: 6px 6px 8px; max-height: 56vh; overflow-y: auto; }
.pl-sp-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 11px; border-radius:13px; background:transparent; cursor:pointer; color: var(--ink); }
.pl-sp-row:active, .pl-sp-row:hover { background: var(--warm2); }
.pl-sp-ic { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.pl-sp-ic svg { width:17px; height:17px; }
.pl-sp-ic.teal { background: var(--teal-soft); color: var(--tealx); }
.pl-sp-ic.orange { background: #ffe7df; color: var(--safety); }
.pl-sp-ic.solid { background: var(--safety); color: var(--ink); }
.pl-sp-t { display:block; font-size:14.5px; font-weight:600; }
.pl-sp-s { display:block; font-size:12.5px; color: rgba(8,23,27,.5); }
.pl-sp-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: rgba(8,23,27,.4); padding:8px 11px 5px; }
.pl-sp-row.cta { background: #fff4f0; padding:11px; margin-top:4px; }
.pl-sp-row.cta .pl-sp-t { font-weight:700; }

/* chips */
.pl-chips { display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding-bottom:2px; }
.pl-chips::-webkit-scrollbar { display:none; }
.pl-chips { scrollbar-width:none; }
.pl-chip { white-space:nowrap; padding:8px 15px; border-radius:999px; font-size:13px; font-weight:600; flex:none; cursor:pointer; background: var(--warm); color: var(--ink); border:1px solid var(--concrete-line); box-shadow: 0 2px 8px rgba(8,23,27,.08); }
.pl-chip.is-active { background: var(--safety); color: #fff; border-color: var(--safety); box-shadow: 0 4px 12px rgba(255,94,58,.32); }
.pl-chip-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.pl-chip.is-active .pl-chip-dot { background:#fff !important; }

/* recenter FAB */
.pl-recenter { position:absolute; right:16px; z-index:590; width:46px; height:46px; border-radius:50%; background: var(--warm); box-shadow: 0 4px 16px rgba(8,23,27,.2); display:flex; align-items:center; justify-content:center; color: var(--tealx); cursor:pointer; transition: transform .12s, bottom .32s cubic-bezier(.2,.8,.2,1); }
.pl-recenter svg { width:21px; height:21px; }
.pl-recenter:active { transform: scale(.93); }

/* map layers control (bottom-left) */
.pl-layers { position:absolute; left:16px; z-index:591; transition: bottom .32s cubic-bezier(.2,.8,.2,1); }
.pl-layers-btn { width:46px; height:46px; border-radius:50%; background: var(--warm); box-shadow:0 4px 16px rgba(8,23,27,.2); display:flex; align-items:center; justify-content:center; color: var(--ink); cursor:pointer; transition: transform .12s; }
.pl-layers-btn svg { width:21px; height:21px; }
.pl-layers-btn:active { transform: scale(.93); }
.pl-layers-menu { position:absolute; left:0; bottom:54px; background: var(--warm); border-radius:14px; box-shadow:0 12px 30px rgba(8,23,27,.26); padding:6px; min-width:158px; }
.pl-layers-menu[hidden] { display:none; }
.pl-layers-menu button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border-radius:9px; font-size:14px; font-weight:600; color: var(--ink); cursor:pointer; }
.pl-layers-menu button:hover { background: var(--warm2); }
.pl-layers-menu button.is-active { background: var(--ink); color: var(--cream); }
.pl-lsw { width:22px; height:22px; border-radius:6px; flex:none; border:1px solid rgba(8,23,27,.15); }

/* preview card */
.pl-preview { position:absolute; left:14px; right:14px; z-index:580; transition: bottom .32s cubic-bezier(.2,.8,.2,1); }
.pl-preview-inner { background: var(--warm); border-radius:20px; box-shadow:0 12px 34px rgba(8,23,27,.22); padding:13px; display:flex; gap:13px; align-items:center; animation: plUp .25s cubic-bezier(.2,.8,.2,1); cursor:pointer; }

/* category tile (shared by preview + cards) */
.pl-tile { border-radius:15px; flex:none; display:flex; align-items:center; justify-content:center; position:relative; }
.pl-tile svg { opacity:.92; }
.pl-tile-code { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; color:#fff; padding:2px 6px; border-radius:6px; font-family: var(--body-font); }
.pl-vtick { width:16px; height:16px; border-radius:50%; background: var(--wa); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.pl-vtick svg { width:10px; height:10px; }
.pl-model { font-family: var(--display-font); font-weight:700; font-size:17px; color: var(--ink); }
.pl-rate { font-family: var(--display-font); font-weight:700; font-size:16px; color: var(--ink); }
.pl-wa-btn { border-radius:14px; background: var(--wa); display:flex; align-items:center; justify-content:center; flex:none; cursor:pointer; transition: transform .12s; }
.pl-wa-btn:active { transform: scale(.92); }

/* === Bottom sheet === */
.pl-sheet {
  position:absolute; left:0; right:0; bottom:0; z-index:700;
  background: var(--warm); border-radius:26px 26px 0 0;
  box-shadow:0 -10px 34px rgba(8,23,27,.16);
  display:flex; flex-direction:column;
  height: 188px;
  transition: height .32s cubic-bezier(.2,.8,.2,1);
}
.pl-sheet.dragging { transition: none; }
.pl-sheet-grip { flex:none; padding:9px 0 4px; cursor:grab; touch-action:none; }
.pl-sheet-grip span { display:block; width:42px; height:5px; border-radius:3px; background:rgba(8,23,27,.18); margin:0 auto; }
.pl-sheet-head { flex:none; display:flex; align-items:center; gap:10px; padding:6px 18px 12px; touch-action:none; cursor:grab; border-bottom:1px solid rgba(8,23,27,.07); }
.pl-sheet.dragging .pl-sheet-head, .pl-sheet.dragging .pl-sheet-grip { cursor:grabbing; }
.pl-sheet-title { flex:1; }
.pl-sheet-count { font-family: var(--display-font); font-weight:700; font-size:18px; color: var(--ink); }
.pl-sheet-area { font-size:12.5px; color: rgba(8,23,27,.5); }
.pl-viewseg { display:flex; background: var(--warm3); border-radius:11px; padding:3px; }
.pl-viewseg button { display:flex; align-items:center; gap:5px; padding:7px 12px; border-radius:9px; font-size:12.5px; font-weight:600; color: rgba(8,23,27,.55); cursor:pointer; }
.pl-viewseg button svg { width:14px; height:14px; }
.pl-viewseg button.is-active { background: var(--ink); color: var(--cream); }
.pl-rail { flex:1; overflow-y:auto; padding:0 14px 24px; }

/* result card */
.pl-card { display:flex; gap:13px; align-items:center; padding:12px; border-radius:18px; margin-bottom:9px; background: var(--warm); border:1.5px solid transparent; cursor:pointer; }
.pl-card.is-active { background:#fff4f0; border-color:#ffb59f; }
.pl-card .pl-tile { width:70px; height:70px; }
.pl-card-mid { flex:1; min-width:0; }
.pl-card-model { display:flex; align-items:center; gap:6px; }
/* Names wrap to two lines rather than ellipsize — founder call: never cut
   machine names off. Clamp keeps runaway titles from breaking the card. */
.pl-card-model .pl-model { font-size:16px; white-space:normal; line-height:1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pl-card-sub { font-size:12.5px; color: rgba(8,23,27,.55); margin-top:1px; }
.pl-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:6px; }
.pl-card-star { font-size:12px; font-weight:700; color: var(--ink); }
.pl-card-reply { font-size:12px; color: rgba(8,23,27,.45); }
.pl-card-right { text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.pl-card-right .pl-rate { font-size:17px; white-space:nowrap; }
.pl-rate-per { font-size:11px; font-weight:600; color: rgba(8,23,27,.45); }
/* Capped width so long operator labels wrap under the price instead of
   squeezing the machine name out of the card. */
.pl-card-unit { font-size:10.5px; color: rgba(8,23,27,.45); max-width:92px; line-height:1.35; }
.pl-card .pl-wa-btn { width:40px; height:40px; border-radius:13px; }
.pl-card .pl-wa-btn svg { width:20px; height:20px; }
.pl-rail-cta { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border-radius:16px; background: var(--warm2); font-size:13.5px; font-weight:600; color: var(--tealx); margin-top:2px; }
.pl-rail-empty { text-align:center; padding:28px 16px; color: rgba(8,23,27,.6); }
.pl-rail-empty .pl-model { display:block; margin-bottom:6px; }

/* === Overlays (owner sheet + menu drawer) === */
.pl-overlay { position:absolute; inset:0; z-index:1000; background: rgba(8,23,27,.42); animation: plFade .2s ease; display:flex; align-items:flex-end; }
.pl-overlay-left { align-items:stretch; }
.pl-owner-sheet { width:100%; background: var(--warm); border-radius:28px 28px 0 0; max-height:90%; overflow-y:auto; animation: plUp .3s cubic-bezier(.2,.8,.2,1); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.pl-grip { padding:10px 0 4px; } .pl-grip span { display:block; width:42px; height:5px; border-radius:3px; background:rgba(8,23,27,.18); margin:0 auto; }
.pl-sheet-pad { padding:8px 22px 4px; }
.pl-h2 { font-family: var(--display-font); font-weight:700; font-size:23px; letter-spacing:-.01em; margin:0 0 4px; }
.pl-lead { font-size:14px; color: rgba(8,23,27,.6); line-height:1.5; margin:0 0 18px; }
.pl-big-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px; border-radius:18px; margin-bottom:11px; cursor:pointer; }
.pl-big-row.orange { background: var(--safety); }
.pl-big-row.outline { background:#fff; border:1.5px solid rgba(8,23,27,.14); }
.pl-big-ic { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:none; }
.pl-big-ic.dark { background: rgba(8,23,27,.14); color: var(--ink); }
.pl-big-ic.teal { background: var(--teal-soft); color: var(--tealx); }
.pl-big-t { display:block; font-size:16px; font-weight:700; color: var(--ink); }
.pl-big-s { display:block; font-size:12.5px; color: rgba(8,23,27,.6); }
.pl-chev { width:20px; height:20px; color: var(--ink); flex:none; }
.pl-note { display:flex; gap:11px; padding:14px; border-radius:16px; background: var(--warm2); }
.pl-note span:first-child { font-size:18px; flex:none; }
.pl-note span:last-child { font-size:12.5px; color: rgba(8,23,27,.62); line-height:1.5; }
.pl-back-link { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color: var(--tealx); margin-bottom:12px; cursor:pointer; }
.pl-back-link svg { width:16px; height:16px; }
.pl-flabel { display:block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: rgba(8,23,27,.5); margin-bottom:8px; }
.pl-input { width:100%; border:1.5px solid rgba(8,23,27,.16); border-radius:14px; padding:13px 14px; background:#fff; outline:none; font: 500 15px var(--body-font); color: var(--ink); }
.pl-input:focus { border-color: var(--safety); }
.pl-phone-wrap { display:flex; align-items:center; gap:8px; border:1.5px solid rgba(8,23,27,.16); border-radius:14px; padding:13px 14px; background:#fff; }
.pl-phone-wrap span { font-size:15px; font-weight:600; color: rgba(8,23,27,.55); }
.pl-phone-wrap input { flex:1; border:0; background:transparent; outline:none; font-size:15.5px; color: var(--ink); min-width:0; }
.pl-btn-primary { width:100%; padding:15px; border-radius:14px; background: var(--ink); color: var(--cream); font-size:15px; font-weight:700; cursor:pointer; transition: transform .12s; }
.pl-btn-orange { width:100%; padding:15px; border-radius:14px; background: var(--safety); color: var(--ink); font-size:15px; font-weight:700; cursor:pointer; transition: transform .12s; }
.pl-btn-primary:active, .pl-btn-orange:active { transform: scale(.99); }
.pl-fine { font-size:12px; color: rgba(8,23,27,.45); text-align:center; margin:13px 0 0; line-height:1.5; }
.pl-photo-tile { width:100%; height:118px; border-radius:16px; border:2px dashed rgba(8,23,27,.2); background: var(--warm2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color: rgba(8,23,27,.5); cursor:pointer; margin-bottom:16px; }
.pl-photo-tile.added { border-color: var(--wa); background:#e7f4ec; color: var(--wa); }
.pl-row2 { display:flex; gap:12px; }
.pl-seg { display:flex; gap:8px; }
.pl-seg button { flex:1; padding:12px; border-radius:13px; font-size:13.5px; font-weight:600; cursor:pointer; background:#fff; color: var(--ink); border:1.5px solid rgba(8,23,27,.16); }
.pl-seg button.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pl-formcat { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.pl-formcat::-webkit-scrollbar { display:none; }
.pl-formcat button { white-space:nowrap; padding:9px 15px; border-radius:12px; font-size:13px; font-weight:600; flex:none; cursor:pointer; background:#fff; color: var(--ink); border:1.5px solid rgba(8,23,27,.16); }
.pl-formcat button.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pl-decl { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color: var(--ink); line-height:1.45; margin-bottom:16px; cursor:pointer; }
.pl-decl input { margin-top:2px; flex:none; width:18px; height:18px; accent-color: var(--safety); }
.pl-form-err { display:none; }
.pl-form-err.show { display:block; color:#b02a17; font-size:13.5px; margin:0 0 12px; }

/* menu drawer */
.pl-drawer { width:312px; max-width:84%; height:100%; background: var(--warm); box-shadow:6px 0 30px rgba(8,23,27,.25); display:flex; flex-direction:column; animation: plSlide .26s cubic-bezier(.2,.8,.2,1); }
.pl-drawer-head { padding: max(40px, env(safe-area-inset-top)) 20px 14px; display:flex; align-items:center; justify-content:space-between; }
.pl-drawer-head .pl-wordmark { font-size:21px; }
.pl-drawer-close { width:34px; height:34px; border-radius:50%; background: var(--warm3); display:flex; align-items:center; justify-content:center; color: var(--ink); cursor:pointer; }
.pl-drawer-close svg { width:16px; height:16px; }
.pl-drawer-list { flex:1; overflow-y:auto; padding:4px 12px; }
.pl-nav { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:13px 12px; border-radius:13px; background:transparent; cursor:pointer; }
.pl-nav:active, .pl-nav:hover { background: var(--warm2); }
.pl-nav-ic { width:24px; flex:none; color: var(--tealx); display:flex; }
.pl-nav-ic svg { width:21px; height:21px; }
.pl-nav-ic.orange { color: var(--safety); }
.pl-nav-label { font-size:15.5px; font-weight:600; color: var(--ink); }
.pl-divider { height:1px; background: rgba(8,23,27,.1); margin:12px; }
.pl-drawer-foot { padding:16px 22px; border-top:1px solid rgba(8,23,27,.1); font-size:12.5px; color: rgba(8,23,27,.5); line-height:1.6; }

/* === Content page === */
.pl-screen { position:absolute; inset:0; z-index:900; background: var(--warm); display:flex; flex-direction:column; animation: plFade .2s ease; }
.pl-screen-head { flex:none; display:flex; align-items:center; gap:12px; padding: max(40px, env(safe-area-inset-top)) 16px 14px; border-bottom:1px solid rgba(8,23,27,.08); }
.pl-back { background: var(--warm3); box-shadow:none; }
.pl-screen-title { font-family: var(--display-font); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:0; color: var(--ink); }
.pl-screen-body { flex:1; overflow-y:auto; padding:22px 20px 48px; }
.pl-sec { margin-bottom:24px; }
.pl-sec-lead { font-size:16px; line-height:1.62; color: rgba(8,23,27,.72); margin:0; }
.pl-eyebrow { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--safety); margin-bottom:6px; }
.pl-h3 { font-family: var(--display-font); font-weight:700; font-size:21px; letter-spacing:-.01em; margin:0; color: var(--ink); }
.pl-steps { display:flex; flex-direction:column; gap:16px; }
.pl-step { display:flex; gap:13px; }
.pl-step-n { font-family: var(--display-font); font-weight:800; font-size:15px; color: var(--safety); width:24px; flex:none; padding-top:2px; }
.pl-step-t { font-size:15.5px; font-weight:700; color: var(--ink); }
.pl-step-d { font-size:14px; line-height:1.55; color: rgba(8,23,27,.6); margin-top:3px; }
.pl-feats { display:flex; flex-direction:column; gap:13px; }
.pl-feat { display:flex; gap:12px; }
.pl-feat-ic { width:24px; height:24px; border-radius:50%; background:#e7f4ec; display:flex; align-items:center; justify-content:center; color: var(--wa); flex:none; margin-top:1px; }
.pl-feat-ic svg { width:14px; height:14px; }
.pl-feat-t { font-size:15px; font-weight:700; color: var(--ink); }
.pl-feat-d { font-size:13.5px; line-height:1.5; color: rgba(8,23,27,.6); margin-top:2px; }
.pl-stats { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.pl-stat { background: var(--warm2); border-radius:16px; padding:16px; }
.pl-stat-n { font-family: var(--display-font); font-weight:800; font-size:26px; color: var(--ink); }
.pl-stat-l { font-size:12.5px; color: rgba(8,23,27,.55); margin-top:3px; }
.pl-plans { display:flex; flex-direction:column; gap:12px; }
.pl-plan { border-radius:18px; padding:18px; background:#fff; border:2px solid rgba(8,23,27,.1); }
.pl-plan.hi { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.pl-plan-top { display:flex; align-items:baseline; justify-content:space-between; }
.pl-plan-name { font-family: var(--display-font); font-weight:700; font-size:18px; }
.pl-plan-price { font-family: var(--display-font); font-weight:800; font-size:22px; }
.pl-plan-per { font-size:12px; opacity:.6; }
.pl-plan-feats { display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.pl-plan-feat { display:flex; gap:8px; align-items:flex-start; font-size:13.5px; }
.pl-plan-feat svg { width:15px; height:15px; flex:none; margin-top:2px; }
.pl-contacts { display:flex; flex-direction:column; gap:11px; }
.pl-contact { display:flex; align-items:center; gap:13px; padding:14px; border-radius:16px; background:#fff; border:1.5px solid rgba(8,23,27,.08); }
.pl-contact-ic { width:40px; height:40px; border-radius:12px; background: var(--teal-soft); display:flex; align-items:center; justify-content:center; color: var(--tealx); flex:none; }
.pl-contact-ic svg { width:19px; height:19px; }
.pl-contact-l { font-size:12px; font-weight:600; color: rgba(8,23,27,.5); }
.pl-contact-v { font-size:15px; font-weight:600; color: var(--ink); }

/* toast */
.pl-toast { position:absolute; left:50%; transform:translateX(-50%); bottom:30px; z-index:1500; background: var(--ink); color: var(--cream); padding:13px 20px; border-radius:14px; font-size:13.5px; font-weight:500; box-shadow:0 12px 30px rgba(8,23,27,.35); animation: plUp .25s ease; max-width:88%; text-align:center; }

/* animations */
@keyframes plUp { from { transform: translateY(36px); opacity:0; } to { transform: translateY(0); opacity:1; } }
@keyframes plFade { from { opacity:0; } to { opacity:1; } }
@keyframes plSlide { from { transform: translateX(-100%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .pl-sheet, .pl-recenter, .pl-preview { transition: none; }
  .pl-owner-sheet, .pl-drawer, .pl-screen, .pl-toast, .pl-preview-inner { animation: none; }
}

/* Desktop split: results panel docked left, map fills the right (Airbnb/Zillow
   style). NO transform on .plapp (transforms on a Leaflet ancestor break the
   map). Mobile (<800px) keeps the full-screen map + draggable bottom sheet. */
@media (min-width: 800px) {
  #pl-map { left: 408px; }
  .pl-top { max-width: 408px; padding-left: 18px; padding-right: 18px; }
  .pl-sheet {
    top: 0; left: 0; bottom: 0; right: auto;
    width: 408px;
    height: 100% !important;
    border-radius: 0;
    box-shadow: 8px 0 28px rgba(8,23,27,.10);
    padding-top: 172px;          /* clear the floating header + search + chips */
    z-index: 500;                /* below .pl-top (600) so the search overlays the panel top */
  }
  .pl-sheet-grip { display: none; }
  .pl-sheet-head { padding-top: 0; cursor: default; }
  .pl-sheet .pl-viewseg { display: none; }   /* map + list both always visible */
  .pl-recenter { bottom: 24px !important; right: 24px; }
  .pl-layers { bottom: 24px !important; left: 424px !important; }
  .pl-preview { display: none !important; }   /* selection shows via the active card in the list */
}
@media (min-width: 1200px) {
  #pl-map { left: 440px; }
  .pl-top { max-width: 440px; }
  .pl-sheet { width: 440px; }
  .pl-layers { left: 456px !important; }
}

/* ============================================================
   "Alive" layer — motion & life (Uber-feel pass, 2026-06-24)
   ============================================================ */

/* Pulsing "you are here" dot */
.pl-you-wrap { background: none; border: none; }
.pl-you { position: relative; width: 18px; height: 18px; }
.pl-you::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  background: var(--tealx); border: 2.5px solid #fff;
  box-shadow: 0 1px 6px rgba(8,23,27,.35);
}
.pl-you-ring {
  position: absolute; inset: -14px; border-radius: 50%;
  background: rgba(26,107,122,.35);
  animation: pl-pulse 2.2s ease-out infinite;
}
@keyframes pl-pulse {
  0%   { transform: scale(.35); opacity: .9; }
  70%  { transform: scale(1);   opacity: 0; }
  100% { opacity: 0; }
}

/* Markers + clusters fade-rise in as they appear */
.pl-mk, .pl-cluster { animation: pl-mk-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pl-mk-in {
  from { opacity: 0; transform: translateY(6px) scale(.85); }
}

/* Skeleton shimmer cards while listings load */
.pl-skel { pointer-events: none; }
.skel-box, .skel-line { position: relative; overflow: hidden; background: #ece5d4; border-radius: 8px; }
.skel-line { height: 12px; margin: 7px 0; }
.skel-box::after, .skel-line::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: pl-shimmer 1.2s infinite;
}
@keyframes pl-shimmer { 100% { transform: translateX(100%); } }

/* Brief fade-out when leaving for the machine page (opacity only —
   a transform on the app shell would break Leaflet positioning) */
.pl-leaving .plapp { animation: pl-leave .18s ease forwards; }
@keyframes pl-leave { to { opacity: 0; } }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pl-you-ring, .pl-mk, .pl-cluster, .skel-box::after, .skel-line::after { animation: none; }
}

/* ============================================================
   Desktop web layer + motion polish (2026-07-02)
   ============================================================ */

/* --- Desktop top navigation (the "website" chrome around the map tool) --- */
.pl-desknav { display: none; }
@media (min-width: 800px) {
  .pl-desknav {
    position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 700;
    display: flex; align-items: center; gap: 22px; padding: 0 24px;
    /* Match .header-v2 exactly so page-to-page transitions feel seamless */
    background: rgba(245, 239, 226, .85);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(8,23,27,.08);
  }
  .pl-dn-logo { font: 800 22px/1 var(--display-font); color: var(--ink); text-decoration: none; letter-spacing: -.5px; }
  .pl-dn-logo em { color: var(--safety); font-style: italic; }
  .pl-dn-tabs { display: flex; gap: 2px; margin: 0 auto; background: rgba(8,23,27,.06); border-radius: 999px; padding: 4px; }
  .pl-dn-tabs a { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .14s, color .14s; }
  .pl-dn-tabs a:hover, .pl-dn-tabs a.is-active { background: var(--ink); color: var(--cream); }
  .pl-dn-ctas { display: flex; align-items: center; gap: 12px; }
  .pl-dn-login { background: none; border: none; font: 600 14px var(--body-font); color: var(--ink); cursor: pointer; padding: 8px 6px; }
  .pl-dn-login:hover { color: var(--safety); }
  .pl-dn-cta { background: var(--safety); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; transition: transform .12s, box-shadow .14s; box-shadow: 0 4px 14px rgba(255,94,58,.3); }
  .pl-dn-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,94,58,.4); }

  /* App sits below the nav; the in-app mobile header is redundant here */
  .plapp { top: 64px; }
  .pl-top-row { display: none; }
  .pl-top { padding-top: 16px; }
  .pl-sheet { padding-top: 132px; }   /* clears search card + chips (no header row) */
}
@media (min-width: 800px) and (max-width: 1023px) {
  .pl-dn-tabs a { padding: 8px 11px; font-size: 13px; }
}

/* --- Motion polish: everything responds to the hand --- */
.pl-chip, .pl-wa-btn, .pl-btn-primary, .pl-btn-orange, .pl-round, .pl-recenter,
.pl-layers-btn, .pl-locate, .pl-big-row, .pl-rail-cta, .pl-dn-cta {
  transition: transform .13s cubic-bezier(.2,.8,.2,1), box-shadow .15s, background .14s;
}
.pl-chip:active, .pl-wa-btn:active, .pl-btn-primary:active, .pl-btn-orange:active,
.pl-round:active, .pl-recenter:active, .pl-layers-btn:active, .pl-locate:active,
.pl-big-row:active, .pl-dn-cta:active { transform: scale(.95); }
.pl-chip:hover { box-shadow: 0 4px 12px rgba(8,23,27,.14); }
.pl-wa-btn:hover { transform: scale(1.06); }
@media (min-width: 800px) {
  .pl-card { transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s, border-color .15s; }
  .pl-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(8,23,27,.1); border-color: rgba(8,23,27,.2); }
  .pl-chips { cursor: grab; }
  .pl-chips:active { cursor: grabbing; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-chip:active, .pl-wa-btn:active, .pl-btn-primary:active, .pl-btn-orange:active,
  .pl-round:active, .pl-recenter:active, .pl-layers-btn:active, .pl-locate:active,
  .pl-big-row:active, .pl-dn-cta:active, .pl-card:hover { transform: none; }
}

/* Owner sheet: centered dialog on desktop (the bottom sheet is mobile-only) */
@keyframes plPop { from { opacity: 0; transform: scale(.96) translateY(10px); } }
@media (min-width: 800px) {
  #pl-owner.pl-overlay { align-items: center; justify-content: center; }
  .pl-owner-sheet {
    width: 520px; max-width: calc(100vw - 48px);
    border-radius: 24px; max-height: 86vh;
    box-shadow: 0 24px 80px rgba(8,23,27,.4);
    animation: plPop .24s cubic-bezier(.2,.8,.2,1);
    padding-bottom: 18px;
  }
}
@media (prefers-reduced-motion: reduce) { .pl-owner-sheet { animation: none; } }

/* Real machine photos on list cards / preview (falls back to category tile) */
.pl-tile-img { overflow: hidden; background: #e9e2d2; }
.pl-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Map polish: sort, save hearts, filter chips (2026-07-02) */
.pl-sort {
  border: 1px solid var(--concrete-line); border-radius: 10px; background: var(--warm);
  font: 600 12.5px var(--body-font); color: var(--ink); padding: 7px 8px; margin-right: 8px;
  max-width: 128px; cursor: pointer;
}
.pl-card { position: relative; }
.pl-save-btn {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: rgba(8,23,27,.55);
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(8,23,27,.18); cursor: pointer;
  transition: transform .12s, color .12s;
}
.pl-save-btn:active { transform: scale(.9); }
.pl-save-btn.is-on { color: var(--safety); }
.pl-chip-div { flex: none; width: 1px; height: 24px; background: rgba(8,23,27,.15); margin: 7px 3px; }
.pl-fchip { border-style: dashed; }
.pl-fchip.is-active { border-style: solid; }

/* AutoTrader-borrow pass (2026-07-02): badges, promo, recents, more-filters */
.pl-morefil[hidden] { display: none !important; }
.pl-morefil { display: flex; gap: 14px; margin-top: 10px; background: var(--warm); border: 1px solid var(--concrete-line); border-radius: 14px; padding: 10px 14px; box-shadow: 0 4px 14px rgba(8,23,27,.1); }
.pl-morefil label { font-size: 12px; font-weight: 600; color: rgba(8,23,27,.6); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pl-morefil select { border: 1px solid var(--concrete-line); border-radius: 8px; padding: 7px 8px; font: 600 13px var(--body-font); background: #fff; }
.pl-great { color: #14683f; font-weight: 700; }
.pl-feat { background: var(--ink); color: var(--cream); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; letter-spacing: .3px; flex: none; }
.pl-promo-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 2px 0 10px; border-radius: 16px; background: linear-gradient(120deg, #0d2227, #143740); color: var(--cream); font-size: 20px; text-decoration: none; }
.pl-promo-mid { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pl-promo-mid strong { font-size: 14.5px; }
.pl-promo-mid span { font-size: 12.5px; opacity: .75; }
.pl-promo-go { color: var(--safety); font-weight: 800; }