/* Seine Cruise Finder: component states required by Data Contract v1. Loaded after scf.css on every page.
   Part of the design system (not library-only). */

/* data slot wrapper: lays out as if its content were placed directly */
.slot{display:contents}

/* departure-time chip: seller marks under the time (V = Viator, T = Tiqets) */
.t{flex-direction:column}
.t .sm{display:block;font:700 10px/12px var(--sans);color:var(--muted);letter-spacing:.04em;margin-top:2px}
.t.sel .sm{color:#C9D7E8}
.sm-legend{font-size:12px;color:var(--muted);margin-top:8px}
.sm-legend b{color:var(--navy)}

/* open-ticket and time-not-given lines replace time chips */
.tstate{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:14px;line-height:20px;color:#33404F;background:var(--wash-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
.tstate svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--blue-dark)}
.tstate b{color:var(--navy)}

/* seller-scoped "no tickets" line: neutral, never red, never "sold out" */
.notix{font-size:13px;color:var(--muted)}

/* checked time in seller comparison */
.sp .ck{display:block;font-size:11px;line-height:15px;color:var(--muted);font-weight:500}
.sp .r .ck{grid-column:1/-1;margin-top:-2px}
.sp .foot-ck{padding:5px 10px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.sp.sp-compact .foot-ck{padding:3px 7px;font-size:10px}
.fresh-line{font-size:13px;color:var(--muted)}

/* could-not-check seller panel: seller names with the FETCH_FAILED line, no price or time */
.sp.sp-unchecked .r{grid-template-columns:1fr}
.sp.sp-unchecked .notix{font-size:14px;color:#33404F}

/* neutral empty state (no-match): explains what would appear, shows no sample data */
.empty-note{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:4px 0 8px}
.empty-note svg{width:22px;height:22px;flex:none;color:var(--blue-dark);margin-top:2px}
.empty-note b{display:block;color:var(--navy);font-size:16px}
.empty-note p{margin:4px 0 0;color:#33404F;font-size:14px;line-height:21px;max-width:70ch}

/* rating source note */
.src-note{font-size:12px;color:var(--muted)}

@media (max-width:900px){
  .sp.sp-compact .foot-ck{grid-column:1/-1;border-left:0}
}

/* ---------- working Finder (finder-app.js) ---------- */
/* time chips and chip remove buttons are real buttons */
button.t{font:inherit;cursor:pointer;border:1px solid var(--line-2);background:#fff}
button.t:hover{border-color:var(--blue)}
button.t[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
button.t[aria-pressed="true"] .sm{color:#C9D7E8}
.fchip .x{border:0;background:none;padding:2px;margin-left:2px;cursor:pointer;display:inline-grid;place-items:center;border-radius:6px;color:var(--muted)}
.fchip .x:hover{color:var(--navy);background:#fff}
button.fchip{cursor:pointer;font:700 14px var(--sans)}
button.more{width:100%;border:0;text-align:left;cursor:pointer;font:inherit;font-size:13px}
/* preferences panel */
.fpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:12px;box-shadow:var(--sh-sm)}
.fpanel .fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fpanel .fgrid + .fgrid{margin-top:14px}
.fpanel .fgrid.prefs{grid-template-columns:repeat(4,minmax(0,1fr))}
.fpanel select,.fpanel .budget{width:100%;min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;font:500 14px var(--sans);color:var(--ink);padding:0 10px}
.fpanel .budget{display:flex;align-items:center;gap:6px;color:var(--muted)}
.fpanel .budget input{border:0;outline:0;font:inherit;color:var(--ink);width:100%;min-width:0;background:none}
.fpanel-go{display:flex;gap:10px;margin-top:16px}
.finder .fpanel{box-shadow:none;margin-top:10px;padding:12px 0 0;border:0;border-top:1px solid var(--line)}
.opt.wide{position:relative}
.opt input.dpick{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.opt:has(input.dpick:focus-visible){outline:3px solid rgba(30,111,217,.35);outline-offset:2px}
/* result groups */
.grp{margin:26px 0 12px}
.grp h2{font-size:24px;line-height:30px}
.grp p{color:#33404F;font-size:15px;margin-top:4px;max-width:72ch}
.rtop h1:focus{outline:none}
/* loading skeleton, same footprint as a result card */
.crd.skel .im{background:var(--wash-2);min-height:180px}
.crd.skel .mid span,.crd.skel .side span{display:block;height:14px;border-radius:6px;background:var(--wash-2);margin:10px 0}
.crd.skel .mid span:nth-child(1){width:60%;height:22px}
.crd.skel .mid span:nth-child(2){width:80%}
.crd.skel .mid span:nth-child(3){width:45%}
.crd.skel .side span{height:120px}
@media (prefers-reduced-motion:no-preference){.crd.skel{animation:skel 1.4s ease-in-out infinite alternate}@keyframes skel{from{opacity:1}to{opacity:.55}}}
@media (max-width:900px){
  .fpanel .fgrid,.fpanel .fgrid.prefs{grid-template-columns:1fr}
  .grp h2{font-size:20px;line-height:26px}
}
/* the match explanation in a working result card sits under the facts, full width */
.rc .mid > .why{max-width:none;margin-top:10px;font-size:13px;line-height:18px;width:fit-content}
.rc .mid > .misses{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:13px;color:#33404F}
/* featured cards: grid children may shrink, so a long reviews line wraps instead of widening the card */
.cc > *,.cc .bd > *{min-width:0}
.cc .stars{flex-wrap:wrap}
/* phone result card: the offers panel and the button stack full width */
@media (max-width:900px){
  .rc .side{grid-template-columns:1fr}
  .rc .side .offers{grid-column:1/-1}
}

/* ---------- generated site pages (site/lib.mjs): variants of existing parts, no new visual language ---------- */
/* page title block: the results page's H1 scale */
.phero{padding:2px 0 22px}
.phead h1{font-size:40px;line-height:46px;max-width:24ch}
.phead .lead{margin-top:8px;max-width:70ch}
/* comparison table: .ptab from the product page; on phones each row becomes a labelled block */
.ptab-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 16px}
.ptab caption{text-align:left;font-size:13px;color:var(--muted);padding:8px 0}
.ptab th[scope=row]{font:600 14px/19px var(--sans);color:var(--navy);text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ptab th[scope=row] a,.ptab td a{color:var(--blue)}
.ptab tr:last-child th[scope=row]{border-bottom:0}
.ptab .s,.listing .s{font-size:12px;color:var(--muted)}
/* embedded Finder listing: the Finder's chips and the results cards */
.lbar{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-sm)}
.lbar .seg{flex-wrap:wrap}
.lbar .more{width:auto;margin-top:0;flex:1 1 280px}
.ltop{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;margin:18px 0 10px}
.ltop h3{font:700 22px/28px var(--serif);color:var(--navy)}
.ltop h3:focus{outline:none}
.lfresh{font-size:13px;color:var(--muted)}
.lmore{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:14px}
.lalt{display:flex;flex-wrap:wrap;gap:8px}
.listing .grp h3{font:700 20px/26px var(--serif);color:var(--navy)}
.listing .rlist{display:grid;gap:14px}
/* editorial text beside the advice box */
.cat-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:start}
.about h3{font:700 18px/24px var(--serif);color:var(--navy);margin:14px 0 6px}
/* phone menu (header partial): the nav opens under the bar */
.menu-btn{border:0;background:none;cursor:pointer}
@media (max-width:900px){
  .phead h1{font-size:28px;line-height:33px}
  .ptab-wrap{padding:2px 12px}
  .ptab.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ptab.stack tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .ptab.stack tr:last-child{border-bottom:0}
  .ptab.stack th[scope=row]{display:block;border:0;padding:0 0 6px}
  .ptab.stack td{display:grid;grid-template-columns:42% 1fr;gap:8px;border:0;padding:3px 0}
  .ptab.stack td::before{content:attr(data-label);font:700 12px var(--sans);color:var(--muted)}
  .lbar{padding:12px}
  .lbar > div{width:100%}
  .ltop h3{font-size:19px;line-height:25px}
  .cat-grid{grid-template-columns:1fr;gap:16px}
  .hdr.open .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:56px;left:-16px;right:-16px;margin:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-sm);padding:6px 16px 10px;z-index:8}
  .hdr.open .nav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
  .hdr.open .nav a:last-child{border-bottom:0}
}
/* listing bar: the product page's date row and the Finder's time row, side by side */
.lbar [data-part=date].seg{grid-template-columns:repeat(4,minmax(96px,1fr))}
.lbar [data-part=time].seg{grid-template-columns:repeat(5,minmax(64px,1fr))}
.lbar .opt{padding:4px 10px}
@media (max-width:900px){
  .lbar [data-part=date].seg{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lbar [data-part=time].seg{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lbar .opt{padding:3px 4px}
}
/* text links on the pale-blue surfaces use the darker blue (brand blue is 4.37:1 on --wash) */
.ourview a,.deps .more-link,.bd-blue .more-link,.bd-blue .about a,.board .gm,.bd-blue p a{color:var(--blue-dark)}
/* page title block with a photo (operator pages): text left, photo right, the product top's proportions */
.phero:has(.phimg){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center}
.phimg{order:2}.phimg img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);display:block}
.phead .facts{margin-top:16px;max-width:620px}
@media (max-width:900px){.phero:has(.phimg){grid-template-columns:1fr;gap:14px}.phimg img{aspect-ratio:16/9}}

/* review fixes: footer headings keep the partial's look at their new levels; spacing classes instead of inline styles */
.pfoot h2.fh{color:#fff;font:700 13px var(--sans);letter-spacing:0;margin-bottom:4px}
.fine h3.fh5{font:700 12px var(--sans);color:#fff;margin-bottom:4px;letter-spacing:.01em}
.note{margin-top:10px}.sp-top{margin-top:28px}
/* phones: every tap target is at least 44 px (time chips, options, icon buttons, small buttons) */
@media (max-width:900px){.t,.opt,.iconbtn,.btn-sm,.menu-btn{min-height:44px}.iconbtn,.menu-btn{min-width:44px}.opt input.dpick{min-height:44px}}
.bd-blue .kd a,.bd-blue .board a,.bd-blue .dcard .vc{color:var(--blue-dark)}
/* links inside table text are underlined, not told apart by colour alone */
.ptab td a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){.rc .side .btn{height:44px}.gal .arr{width:44px;height:44px}}
.about p a,.faq p a{text-decoration:underline;text-underline-offset:2px}

/* ---------- remediation, 24 October 2026 (review package items 10, 11, 12) ---------- */
/* footer navigation labels are not headings: the same look on a plain label (partials/footer.html) */
.pfoot .fh{display:block;color:#fff;font:700 13px var(--sans);letter-spacing:0;margin-bottom:4px}
.fine .fh5{display:block;font:700 12px var(--sans);color:#fff;margin-bottom:4px;letter-spacing:.01em}
/* recovery options carry their real count under the label */
.lalt .btn{height:auto;min-height:44px;padding:6px 14px;flex-direction:column;gap:0;line-height:18px;white-space:normal;text-align:center}
.lalt .btn small{font:500 12px/16px var(--sans);color:var(--muted)}
/* embedded listing on phones: one full-width column in reading order (photo, cruise, facts, match, times,
   sellers, button); the desktop card and the /results card are unchanged */
@media (max-width:640px){
  .listing .rc{grid-template-columns:minmax(0,1fr);gap:0;padding:0;overflow:hidden}
  .listing .rc .im img,.listing .rc .im .ph{height:auto;min-height:0;aspect-ratio:16/7;border-radius:var(--r) var(--r) 0 0}
  .listing .rc .mid{padding:12px 12px 0;min-width:0}
  .listing .rc h3{font-size:17px;line-height:22px}
  .listing .rc .attr{font-size:13px}
  .listing .rc .side{padding:12px;grid-template-columns:minmax(0,1fr)}
  .listing .times{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
  .listing .times .t{min-width:0;width:100%}
  .lshow{width:100%;margin-top:2px;white-space:normal;height:auto;min-height:44px;padding:8px 14px}
}
/* the listing's Finder link wraps on narrow phones (360 px) instead of widening the page */
.lmore .more-link{white-space:normal;flex-wrap:wrap}
/* responsive photos carry width/height for layout stability; zero-specificity defaults so every component's
   own sizing still wins (performance pass) */
:where(img[width][height]){max-width:100%;height:auto}
/* layout stability (performance pass): while the Finder loads, its area keeps at least a screen of height, so the
   sections below don't jump into view and back; released once the results are drawn */
#finder-results[aria-busy="true"] #r-exact,.listing[data-loading]{min-height:100vh}
#finder-results[aria-busy="true"] #r-sub:empty{min-height:46px}
#fbar:empty{min-height:64px}@media (max-width:900px){#fbar:empty{min-height:56px}}
/* phones: the results heading wraps to two lines, the note under it to three (four below 400 px) and the checked
   line takes one; measured on staging 25 Oct, reserved while loading so the list doesn't move down (CLS 0.077) */
@media (max-width:900px){#finder-results[aria-busy="true"] #r-title{min-height:62px}#finder-results[aria-busy="true"] #r-sub:empty{min-height:69px}#finder-results[aria-busy="true"] #r-fresh:empty{min-height:23px}}
@media (max-width:400px){#finder-results[aria-busy="true"] #r-sub:empty{min-height:92px}}
/* 360 px phones: the featured cards and their price strip may shrink instead of widening the page */
@media (max-width:900px){.cards{grid-template-columns:minmax(0,1fr)}.cc{grid-template-columns:118px minmax(0,1fr)}.cc .sp.sp-compact{grid-template-columns:repeat(4,minmax(0,1fr))}.cc .sp.sp-compact .h,.cc .sp.sp-compact .r{min-width:0;overflow-wrap:anywhere}}
/* homepage Finder: its chip rows are filled by the script; reserve their measured height so the form doesn't grow */
#home-finder .seg[data-field=date]:empty{min-height:63px}#home-finder .seg[data-field=type]:empty,#home-finder .seg[data-field=time]:empty{min-height:96px}
@media (max-width:900px){#home-finder .seg[data-field]:empty{min-height:44px}}

/* footer legal links: wrap whole links on phones, with room to tap */
.fine .bot > span:last-child{display:flex;flex-wrap:wrap;gap:4px 16px}
.fine .bot > span:last-child a{margin-left:0;white-space:nowrap;padding:6px 0}