/* ONE-PAGE plan WP4: the app's #listing look for the server pages /boat/<slug> and /provider/<slug> (request mode). Used by listing-page.js (shell, tripButton).
   Everything is scoped under body.lp, so a page that does not carry the class is untouched. No dark theme anywhere: the page is light only.
   Tokens come from chrome.css({ base: true }) (the app's :root); this file redefines only --muted (contrast) and adds --ink-soft, which the app's .lback / .brk rules read.
   PARITY: the rules marked [app] are copied word for word from public/index.html (.lback .ltitle .lsub .lgallery* .gcount .lmain h2/.desc/.hr .hostbox* .potbox* .chip-new), only prefixed with
   "body.lp "; listing-css-parity.test.cjs fails when the app's rule and this copy drift apart. The phone breakpoint of the gallery is the app's own, 980px (index.html @media(max-width:980px) block,
   line "lgallery{grid-template-columns:1fr 1fr;height:340px"): it is also where the engine's side card turns into a bottom sheet (hubs-services.js SIDE_CSS). */

body.lp{--muted:#3d5258;color-scheme:light}
body.lp{--ink-soft:#2A3142;background:var(--sand);color:var(--text);font-family:var(--ui);line-height:1.55}
/* CONTRAST (ONE-PAGE WP8, design decision for Steven): text on the coral buttons and the coral counter. White on #E8825A is 2.7:1 (the app's own .lpanel .reserve and the approved mockup);
   var(--ink) on it is 6.2:1 (AA needs 4.5:1, tools/page-dom.test.cjs enforces it). To go back to white text change this ONE declaration to #fff (the contrast check then fails again, on purpose). */
body.lp{--on-coral:var(--ink)}

/* ---- page frame ---- */
body.lp .lp-main{max-width:var(--page-max,1240px);margin:0 auto;padding:22px 24px 70px}
body.lp .lp-main img{display:block;max-width:100%}

/* ---- title block [app] ---- */
body.lp .lback{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--ink-soft);margin-bottom:16px;cursor:pointer}
body.lp .lback:hover{color:var(--teal-deep)}
body.lp a.lback{text-decoration:none}
body.lp .lback:focus-visible,body.lp .lp-main a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
body.lp .ltitle{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.8px;color:var(--ink)}
body.lp h1.ltitle{margin:0;max-width:none;line-height:1.15}
body.lp .lsub{display:flex;gap:14px;align-items:center;margin:6px 0 16px;font-size:14px;color:var(--ink);flex-wrap:wrap}
body.lp .lsub .chip-meta{background:var(--sand-2);font-weight:700;padding:4px 11px;border-radius:999px;font-size:12.5px}
body.lp .chip-new,body.lp .lsub .chip-new{background:var(--teal-wash);color:var(--teal-deep)}
body.lp .lsub .chip-req{background:#fff3e2;color:#8a5408}
body.lp .lsub .chip-loc{display:inline-flex;align-items:center;gap:4px}

/* ---- gallery [app] ---- */
body.lp .lgallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;border-radius:22px;overflow:hidden;height:440px}
body.lp .lgallery .gi{position:relative;overflow:hidden;background:var(--sand-2)}
body.lp .lgallery .gi img{width:100%;height:100%;object-fit:cover;transition:.4s}
body.lp .lgallery .gi:hover img{transform:scale(1.06)}
body.lp .lgallery .main{grid-row:1/3}
body.lp .lgallery.solo{grid-template-columns:1fr;grid-template-rows:1fr}
body.lp .lgallery .galph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(150deg,#e7f2f1,#f6efe1);color:#0F8B8D}
body.lp .lgallery .galph span{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:.02em;color:#7c8a86}
body.lp .lgallery.duo{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
body.lp .gcount{position:absolute;right:12px;bottom:12px;z-index:3;background:rgba(20,26,34,.72);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
@media(max-width:980px){
  body.lp .lgallery{grid-template-columns:1fr 1fr;height:340px;grid-auto-rows:1fr}body.lp .lgallery .main{grid-column:1/3;grid-row:auto}
}
/* additions to the app's gallery (the app's classes stay): the duo's first tile spans one row only (the app's span adds a phantom row and a 10px gap, so the second tile came out shorter),
   3 and 4 photos fill the grid (the app's 2fr 1fr 1fr grid leaves a hole below the second and third tile), solo / duo are 260px high on a phone (the mockup's value) and the duo keeps its two columns */
body.lp .lgallery .galph svg{display:block}
/* CONTRAST (ONE-PAGE WP8): the app's placeholder label is #7c8a86 on the pale gradient = 3.4:1; the listing pages use the page's --muted (#3d5258, 8:1). Same selector as the app's rule above, later in the file; tools/page-dom.test.cjs pins it. */
body.lp .lgallery .galph span{color:var(--muted)}
body.lp .lgallery.duo .main{grid-row:auto}
@media(min-width:981px){
  body.lp .lgallery.n3{grid-template-columns:2fr 1fr}
  body.lp .lgallery.n4 .gi:last-child{grid-column:2/4}
}
@media(max-width:980px){
  body.lp .lgallery.solo,body.lp .lgallery.duo{height:260px}
  body.lp .lgallery.solo .main,body.lp .lgallery.duo .main{grid-column:auto}
  body.lp .lgallery.n4 .gi:last-child{grid-column:1/3}
}
body.lp .lgal{margin:0}
body.lp .lcredit{font-size:12.5px;color:var(--muted);margin:8px 2px 0}

/* ---- two columns: the engine's .svcwrap (hubs-services.js SIDE_CSS: main column + 400px side card, one column and a bottom sheet from 980px down) ---- */
body.lp .ltop{margin-top:30px}
body.lp .svcwrap.ltop{gap:44px}
body.lp .ltop.one{display:block}
body.lp .lmain{min-width:0}
body.lp .lmain h2{font-family:var(--display);font-size:22px;font-weight:600;margin:0 0 6px;color:var(--ink)}
body.lp .lmain p.desc{font-size:15.5px;color:#41454f;line-height:1.7;margin-bottom:26px}
body.lp .lmain p.desc{margin-top:0;white-space:pre-line}
body.lp .lmain .hr{height:1px;background:var(--line);margin:26px 0}
body.lp .hostbox{display:flex;align-items:center;gap:16px}
body.lp .hostbox .hav{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--gold));display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:24px;font-weight:600}
body.lp .hostbox h4{font-size:16px;font-weight:700}body.lp .hostbox span{font-size:13.5px;color:var(--muted)}
body.lp .hostbox h4{margin:0}
body.lp .potbox{margin-top:26px;background:linear-gradient(120deg,#f6fbfa,#eef7f3);border:1px solid #d9ebe4;border-radius:18px;padding:20px 22px;display:flex;gap:14px;align-items:flex-start}
body.lp .potbox .pc{font-size:26px}
body.lp .potbox b{font-family:var(--display);color:var(--teal-deep)}
body.lp .potbox p{font-size:14px;color:#3a5a55;margin-top:3px;line-height:1.55}
body.lp .potbox .pc{color:var(--teal-deep);display:flex}
body.lp .lp-more{margin-top:44px}
body.lp .lp-more h2{font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);margin:0 0 14px}
@media(min-width:981px){body.lp .svcwrap>.lp-side-extra{grid-column:2}}
@media(max-width:560px){body.lp .lp-main{padding-left:16px;padding-right:16px}}

/* ---- the folds under the list (included, good to know, more boats) and the included chips ---- */
body.lp .svcwrap .svc-fold{border-color:var(--line);border-radius:16px}
body.lp .svcwrap .svc-fold>summary{font-weight:700}
body.lp .svcwrap .svc-fold ul.svc-kn{color:var(--ink-soft)}
body.lp .am span{display:inline-block;margin:0 8px 8px 0;padding:5px 12px;border-radius:999px;background:var(--teal-wash);color:var(--teal-deep);font-weight:600;font-size:13px}

/* ---- "What they offer": the services list ---- */
body.lp .offer .osub,body.lp .offer .ds,body.lp .offer .unit{color:var(--muted)}
body.lp .offer .ofine,body.lp .offer .fine{color:var(--muted)}
body.lp .offer .ofine a{color:var(--teal-deep)}
body.lp .offer .dep legend{font-size:13px;font-weight:700;color:var(--muted)}
body.lp .offer .dep-b{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13.5px;color:var(--ink)}
body.lp .offer .dep-b:hover{border-color:var(--teal-light)}
body.lp .offer .dep-b.on{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;font-weight:700}
body.lp .offer .dep-b:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
body.lp .offer .grp{border:1px solid var(--line);border-radius:16px;margin:10px 0;background:#fff}
body.lp .offer .grp>summary{padding:12px 18px;background:var(--teal-wash);font-weight:600;font-size:14px;color:var(--ink)}
body.lp .offer .grp>summary .fine{font-weight:400;font-size:12.5px}
body.lp .offer .grpb{padding:0}
body.lp .offer .grpb>.svc{padding:16px 18px;border-top:1px solid var(--line)}
body.lp .offer .grpb>.svc:first-child{border-top:0}
body.lp .offer>.svc{background:#fff;padding:16px 18px;border:1px solid var(--line);border-top-width:0}
body.lp .offer .svc{align-items:center;transition:background .15s}
body.lp .offer .svc.sel{background:#fff7f1;box-shadow:inset 3px 0 0 var(--coral);margin:0;padding:16px 18px;border-radius:0}
body.lp .offer>.svc:first-of-type{border-top-width:1px;border-radius:16px 16px 0 0}
body.lp .offer>.svc:last-of-type{border-radius:0 0 16px 16px}
body.lp .offer>.svc:only-of-type{border-radius:16px}
body.lp .offer .nm{font-weight:700;font-size:16px;color:var(--ink)}
body.lp .offer .big{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.1;color:var(--ink)}
body.lp .offer .pr.onreq .big{font-size:17px;color:var(--muted)}
body.lp .offer .reqbtn{background:var(--coral);color:var(--on-coral);border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;transition:.2s}
body.lp .offer .reqbtn:hover{background:#df6e44}
body.lp .offer .reqbtn.opbtn{background:#fff;color:var(--teal-deep);border:1px solid var(--teal-deep)}
body.lp .offer .reqbtn.opbtn:hover{background:var(--teal-wash)}

/* ---- the side card (#svcside) = the app's price panel; the engine keeps its own form styles inside ---- */
body.lp .svcwrap .svcside{border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
body.lp .svcwrap .svc-compact{padding:24px 24px 14px}
body.lp .svcwrap .svc-cl{font-size:13px;font-weight:700;color:var(--muted)}
body.lp .svcwrap .svc-ca{font-family:var(--display);font-size:28px;font-weight:600;color:var(--ink)}
body.lp .svcwrap .svc-cs{font-size:13.5px;color:var(--muted)}
body.lp .svcwrap .svc-cb{color:var(--ink-soft)}
body.lp .svcwrap .svc-btn{background:var(--coral);color:var(--on-coral);font-weight:800;font-size:16px;padding:15px;border-radius:12px;transition:.2s}
body.lp .svcwrap .svc-btn:hover{background:#df6e44}
body.lp .svcwrap .svc-nojs,body.lp .svcwrap .svc-nojs a{color:var(--ink-soft)}
body.lp .svcwrap .svcf .sf-hdl,body.lp .svcwrap .svcf .sf-hds{color:var(--muted)}
/* phone bar #svc-bar (shown by the engine's media query; display is not touched here) */
body.lp .svcwrap .svc-bar{background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(26,31,46,.08)}
body.lp .svcwrap .svc-bl{font-size:12px;color:var(--muted)}
body.lp .svcwrap .svc-bp{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink)}
body.lp .svcwrap .svc-bar .svc-btn{padding:11px 20px;font-size:15px}

/* ---- "Add to trip" ([data-trip-add]) = the app's ghost button, its hint and its toast ---- */
body.lp .tripadd-wrap{padding:0 24px 24px}
body.lp .tripadd-wrap .tripadd{margin-top:10px}
body.lp .lp-side-extra .tripadd-wrap{padding:0}
body.lp #svcf:not([hidden])~.tripadd-wrap{padding:0 20px 22px}
body.lp .tripadd{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#fff;color:var(--ink);border:1.5px solid var(--line);font:inherit;font-weight:800;font-size:16px;padding:15px;border-radius:12px;cursor:pointer;text-decoration:none;transition:.2s}
body.lp .tripadd:hover{border-color:#dfd6c4;box-shadow:var(--shadow-sm)}
body.lp .tripadd:focus-visible{outline:3px solid #7fc4cf;outline-offset:2px}
body.lp .tripadd .tripadd-ic-on{display:none}
body.lp .tripadd[aria-pressed="true"]{border-color:var(--teal-deep);color:var(--teal-deep);background:var(--teal-wash)}
body.lp .tripadd[aria-pressed="true"] .tripadd-ic-off{display:none}
body.lp .tripadd[aria-pressed="true"] .tripadd-ic-on{display:inline-block}
body.lp .tripadd-hint{margin:10px 2px 0;text-align:center;font-size:12.5px;color:var(--muted)}
body.lp .tripadd-hint[hidden],body.lp .tripadd-toast[hidden]{display:none}
body.lp .tripadd-open{color:var(--teal-deep);font-weight:700;text-decoration:underline;white-space:nowrap}
body.lp .tripadd-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);max-width:calc(100vw - 32px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:14px;box-shadow:var(--shadow-lg);font-size:14px;font-weight:600;pointer-events:none;z-index:200;animation:lpToast .28s ease-out}
@keyframes lpToast{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%)}}
@media(max-width:760px){body.lp .tripadd-toast{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---- header "Trip" button + counter (chrome.js header option trip, plan WP7): the app's .tripbtn (index.html) ---- */
body.lp .tripbtn{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;transition:.15s}
body.lp .tripbtn:hover{box-shadow:var(--shadow-sm);border-color:#dfd6c4}
body.lp .tripbtn .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--coral);color:var(--on-coral);font-size:12px;font-weight:800;display:grid;place-items:center}
body.lp .tripbtn .cnt[hidden]{display:none}
body.lp .tripbtn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(max-width:560px){body.lp .tripbtn{padding:8px 10px;gap:4px}body.lp header.top .navr{gap:6px}body.lp header.top .brand{gap:8px}body.lp header.top .brand img{width:30px;height:30px}body.lp header.top .brand .word{font-size:19px}body.lp header.top .lang a{padding:7px 8px}body.lp .tripbtn>span:not(.cnt){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

@media(prefers-reduced-motion:reduce){
  body.lp .lgallery .gi img,body.lp .tripadd,body.lp .offer .svc,body.lp .offer .reqbtn,body.lp .svcwrap .svc-btn{transition:none}
  body.lp .lgallery .gi:hover img{transform:none}
  body.lp .tripadd-toast{animation:none}
}