/* Magik: the working screens.
 * Search results, boat detail, booking, trips, account, dashboards.
 * Same tokens as magik.css, no new colours.
 */

.pt0{padding-top:0}

/* A page that opens straight on its own content: the water and the top
   air of a page head, and none of the words. Registering a boat is the
   one page where that is right — anybody here has already pressed the
   button, so a headline selling them the button is the button repeated
   back at them. */
.bare-top{position:relative; padding-block:clamp(26px,4vw,46px) 0}
.bare-top > .wrap{position:relative; z-index:2}
.pt-sm{padding-top:clamp(28px,4vw,48px)}
.page-head.short{padding-block:clamp(34px,5vw,58px) clamp(20px,3vw,32px)}
.page-head.short h1{font-size:clamp(32px,4.6vw,52px); margin-bottom:14px}
.wrap.narrow{max-width:680px}
/* An interior header holds prose, so it is capped at 900. A header that
   holds the search bar is holding the same instrument the home page does,
   and it is read at the same width as there. */
.page-head .wrap.wide{max-width:var(--maxw)}
/* Where the bar follows the page head's own prose rather than a backlink —
   the menu — it needs air under the lede. On the boat page it lives in the
   same wrap as the backlink and stays tight, which is why this is keyed to
   a wide wrap that FOLLOWS another one rather than to the bar itself. */
.page-head .wrap + .wrap.wide{margin-top:clamp(22px,3vw,34px)}
.page-h1{font-size:clamp(28px,4vw,44px); margin:14px 0 26px}

.backlink{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--muted); font-size:14.5px; margin-bottom:8px;
}
.backlink:hover{color:var(--ac)}

/* Account chip in the header */
.account-chip{
  display:inline-flex; align-items:center; gap:10px; min-width:0; text-decoration:none;
  padding:5px 14px 5px 5px; border-radius:var(--r-btn);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background:color-mix(in srgb, var(--surface) 66%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:border-color .18s;
}
.account-chip:hover{border-color:var(--ac)}
/* Two things wear this: a <span> of initials, and an <img> of a face.
   object-fit is what makes the second one a portrait rather than a
   squashed landscape — a phone photograph is 4:3 and this is a circle. */
.avatar{
  width:32px; height:32px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:12.5px; font-weight:600; color:#fff;
  background:var(--btnbg); letter-spacing:.02em;
  object-fit:cover; object-position:center;
}
img.avatar{background:var(--tint2)}
.avatar.lg{width:60px; height:60px; font-size:21px}
/* Two lines, and two lines only. Squeezed for width -- which is what
   happens in the header once an account has earned its extra nav links --
   a long name or a long role label would wrap, and the chip would push
   the bar it sits in taller than everything beside it. It gives up the
   tail of the word instead. */
.account-who{display:grid; line-height:1.2; min-width:0}
.account-who b,.account-who i{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-who b{font-size:13.5px; font-weight:550}
.account-who i{font-style:normal; font-size:11px; color:var(--muted)}

/* Search results */
.results-bar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:22px;
}
.results-bar b{
  display:block; font-family:"Bricolage Grotesque",sans-serif;
  font-variation-settings:"wdth" 86; font-weight:700; font-size:23px;
  letter-spacing:-.015em;
}
.results-bar i{font-style:normal; font-size:14.5px; color:var(--muted)}

.boat-img img{width:100%; height:100%; object-fit:cover}
a.boat-img{display:block; text-decoration:none}
.pill.promo-tag{
  position:absolute; right:12px; top:12px; left:auto;
  background:color-mix(in srgb, var(--su) 88%, #000); color:#fff;
}

.empty{
  grid-column:1 / -1; text-align:center; padding:clamp(40px,7vw,80px) 24px;
  background:var(--cardbg); border:var(--cardbd); border-radius:var(--r-card);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.empty p{color:var(--muted); margin-top:10px}

/* Boat detail
   The photographs are in photo.css, which owns every frame on the site.
   Everything from the title row down is here. */

/* ---- the title row ----
   The name and the verdict on the left, and on the right the two things
   somebody who is not ready to book still wants: keep it, or send it to
   whoever is coming with them. */
/* The two controls, and nothing else: the name went onto the picture. */
.boat-top{
  display:flex; align-items:flex-end; justify-content:flex-end;
  gap:20px; flex-wrap:wrap; margin-top:8px; min-height:0;
}
.boat-top-say{flex:1 1 auto}

.boat-acts{display:flex; gap:4px; flex:none}
.act-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 13px; border:none; border-radius:14px; background:none;
  font-family:"Lexend",sans-serif; font-size:14px; font-weight:500;
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  transition:background .16s;
}
.act-btn:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.act-btn:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px}
.act-btn .ic{width:17px; height:17px; fill:none}
.act-btn.on{color:var(--su-text)}
.act-btn.on .ic{fill:var(--su); color:var(--su)}
.act-btn.done{color:var(--su-text)}

.detail-body{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(26px,4vw,56px); align-items:start;
}
.detail-body h1{font-size:clamp(30px,4vw,46px)}
.detail-body .rate em{font-style:normal; color:var(--muted); font-size:13px}

/* The boat's numbers, as a credit line rather than a dashboard.
   No tiles, no borders, no centring and no icons — a rule, then one row
   read left to right the way a person would say it. The separators are
   drawn in CSS so the markup stays a plain sentence of spans. */
/* The spans are joined with no whitespace between them and each one is
   nowrap, so inline layout has nowhere to break the line and a boat with a
   long enough sentence — "twin Yamaha 250 outboards" is enough — pushed the
   whole page sideways on a phone. Flex gives every item its own break
   opportunity without putting a space anywhere the separator would see it. */
.spec{
  margin-top:24px; padding-top:15px; border-top:1px solid var(--line);
  font-size:14px; color:var(--muted); line-height:2;
  display:flex; flex-wrap:wrap; align-items:baseline;
}
.spec span{white-space:nowrap}
.spec span::after{content:"·"; margin:0 11px; color:var(--faint)}
.spec span:last-child::after{content:""}
.spec b{
  color:var(--ink); font-weight:600; font-size:15px;
  font-variant-numeric:tabular-nums; letter-spacing:-.005em;
}

/* What we hold on a boat, said quietly under the skipper rather than as a
   badge. "DIMAR certified" is a claim about paperwork; it reads as a note. */
.papers{
  margin-top:12px; display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; line-height:1.6; color:var(--muted);
}
.papers .ic{width:15px; height:15px; flex:none; margin-top:2px; color:var(--ap)}

/* A heading inside the boat, over the card it introduces */
.boat-h{font-size:clamp(19px,2.2vw,23px); margin:30px 0 12px}

/* ---- the rating, opened up ----
   Six rows, each an icon, a name, a bar and a number. The bar is the whole
   point: it is what makes "4.4 comfort, 4.9 value" legible as a shape
   rather than as six numbers to compare in your head. */
.rate-card{padding:20px 22px; margin-top:26px}
.rate-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px}
.rate-head h3{font-size:20px}
.rate.sm{font-size:13.5px}
.scores{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.scores li{
  display:grid; grid-template-columns:19px minmax(0,1fr) clamp(64px,24%,130px) 32px;
  align-items:center; gap:10px; font-size:14.5px;
}
/* the name of a criterion is two or three words and belongs on one line:
   wrapped, the six rows stop being a column you can run your eye down */
.scores li > span:not(.score-bar){
  text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.scores .ic{width:17px; height:17px; color:var(--muted)}
.scores b{text-align:right; font-weight:600; font-size:14.5px}
.score-bar{
  height:7px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 10%, transparent);
}
.score-bar i{display:block; height:100%; border-radius:999px; background:var(--ap)}
/* a boat nobody has sailed yet: the row is there, the score is not */
.score-bar[data-empty]{background:color-mix(in srgb, var(--ink) 7%, transparent)}
.scores li:has(.score-bar[data-empty]){color:var(--muted)}
.rate-card .fine{margin-top:14px}

/* ---- the papers ---- */
.docs-card{padding:20px 22px; margin-top:0}
.docs{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.docs li{
  display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center;
  gap:13px; padding:11px 0;
}
.docs li + li{border-top:1px solid color-mix(in srgb, var(--ink) 9%, transparent)}
.docs .ic{width:18px; height:18px; color:var(--ap)}
.doc-t{display:grid; gap:2px; min-width:0}
.doc-t b{font-size:14.5px; font-weight:600}
.doc-t i{font-style:normal; font-size:12.5px; color:var(--muted)}
.docs li.is-missing .ic{color:var(--muted); opacity:.6}
.docs li.is-missing .doc-t b{color:var(--muted)}
.docs .btn-ghost{white-space:nowrap}
.docs .btn-ghost .ic{width:15px; height:15px; margin-right:6px; color:inherit}
.docs-card .fine{margin-top:14px}

@media (max-width:560px){
  .scores li{grid-template-columns:18px minmax(0,1fr) 56px 32px; gap:9px; font-size:13.5px}
}

/* ---- the order, standing still while the page moves ----
   92px was measured against a header that has since grown a scrim: the
   bar lays the page's own colour back down for its full height and then
   fades it out over another 44 pixels, and the docked search bar drops a
   shadow into that same band. At 92 the top of this card sat inside all
   of it — the price line read through a gradient and the card's own top
   edge disappeared. It is measured off the header now, plus the depth of
   what the header throws below itself, so it clears both whatever the
   header happens to be tall.

   AND IT IS CENTRED IN WHAT IS LEFT OF THE WINDOW, not hung from the top
   of it. Pinned at --bk-top the card had the whole page under it and
   nothing above: on a laptop it sat high with a field of sand below, and
   on a short window a tall card ran straight off the bottom edge with the
   Book button below the fold — which is the one control on this page that
   must never be.

   What is sticky is not the card. It is a BAND the height of the window
   between the header and a margin at the foot, and the card is centred
   inside it: so the panel keeps clear of both edges at every window
   height, and a card taller than the band scrolls inside the band rather
   than past it. The band has no ground of its own, so there is nothing to
   see but the card moving. */
.detail-book{
  --bk-top:calc(var(--header-h, 76px) + 46px);
  /* the margin the card is never allowed to touch */
  --bk-foot:32px;
  position:sticky; top:var(--bk-top);
  height:calc(100vh - var(--bk-top) - var(--bk-foot));
  display:flex; align-items:center;
}
/* The card is as tall as it needs to be until that is taller than the
   band, and then it is the band and carries its own scroll.

   WHICH IS THE SHORT-WINDOW CASE, and it is worth being clear about what
   it costs. The bookable card is about 590px tall; on a 1366x768 laptop
   the band is nearer 450. Before this the card was simply cut off at the
   bottom of the window and the Book button under it could not be reached
   at all — sticky means scrolling does not reveal any more of a panel
   that is already stuck. Now the last of it is a short scroll away
   inside the card. That is not as good as a card that fits, and it is a
   great deal better than a button nobody can press.

   NOT overscroll-behavior:contain. Scroll chaining is the wanted
   behaviour here: a wheel over the panel finishes the panel and then
   carries on down the page, rather than stopping dead on a sidebar. */
.detail-book > .bk{
  width:100%; max-height:100%; overflow-y:auto; scrollbar-width:thin;
}

/* A section heading inside a working screen, smaller than the page's own */
.book-h{font-size:clamp(21px,2.4vw,27px); margin:34px 0 14px}

/* A labelled input, on the forms that still have one */
.field{display:grid; gap:6px}
.field > span{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.field input,.field select{
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  background:color-mix(in srgb, var(--surface) 74%, transparent);
  font-family:"Lexend",sans-serif; font-size:15px; color:var(--ink);
  appearance:none; -webkit-appearance:none;
}
.field input:focus,.field select:focus{outline:2px solid var(--ac); outline-offset:1px}
.field .fine{margin-top:2px}
.stepper button:disabled{opacity:.3; cursor:default}

/* The day, at the head of the order */
.sum-when{
  display:block; font-family:"Bricolage Grotesque",sans-serif;
  font-variation-settings:"wdth" 86; font-weight:700; font-size:20px;
  letter-spacing:-.015em;
}
.breakdown .row em{font-style:normal; color:var(--muted); font-size:12.5px}

/* Trips */
.trips{display:grid; gap:16px}
.trip{
  display:grid; grid-template-columns:180px minmax(0,1fr);
  background:var(--cardbg); border:var(--cardbd); border-radius:var(--r-card);
  box-shadow:var(--elev); overflow:hidden;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.trip > .ph{width:100%; height:100%; min-height:150px}
.trip-body{padding:18px 20px 20px; display:grid; gap:4px; align-content:start}
.trip-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.trip-head b{font-size:19px; font-family:"Bricolage Grotesque",sans-serif;
  font-variation-settings:"wdth" 86; font-weight:700; letter-spacing:-.015em}
.trip-body i{font-style:normal; font-size:14px; color:var(--muted)}
.trip-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:10px; padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.trip-foot b{font-size:18px; font-weight:600}
.trip-acts{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.btn-ghost.danger{border-color:color-mix(in srgb, var(--da) 34%, transparent); color:var(--da)}
.btn-ghost.danger:hover{border-color:var(--da); color:var(--da)}

.notice{
  display:flex; gap:13px; align-items:flex-start; margin-top:18px; padding:16px 18px;
  border-radius:var(--r-card);
  background:color-mix(in srgb, var(--tint) 62%, transparent);
  border:1px solid color-mix(in srgb, var(--su) 38%, transparent);
}
.notice .ic{color:var(--su-text); margin-top:.2em}
.notice div{display:grid; gap:3px}
.notice b{font-size:15.5px}
.notice i{font-style:normal; font-size:13.5px; color:var(--muted)}

/* Account and roles */
/* An avatar, a name and an Edit button in a nowrap flex row, with
   nothing allowed to shrink: a long enough email address — and
   jmoralesporto@gmail.com is long enough — pushed the button 218px past
   the right edge of a 500px screen and took the document with it. The
   middle column may shrink, the address may break, and the row may wrap
   before any of that has to happen. */
.acc-card{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.acc-card > div{min-width:0; flex:1 1 200px}
.acc-card .sub{overflow-wrap:anywhere}
.acc-card h2{font-size:26px; overflow-wrap:anywhere}

/* ---- your own photograph ----
   The disc IS the control. A separate "Upload" button beside a picture
   asks a reader to work out which of the two things is the thing to
   press; the picture is what they want to change, so the picture is what
   they press, and the label under it says so out loud because a picture
   that is secretly a button is a picture nobody presses.
   A <label> wrapping a hidden file input, so it is keyboard-reachable
   and needs no script to open the picker. */
.acc-face{
  position:relative; flex:none; display:grid; justify-items:center; gap:7px;
  cursor:pointer; border-radius:var(--r-card); padding:3px;
}
.acc-face .avatar.lg{
  transition:filter .18s ease, box-shadow .18s ease;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
}
.acc-face:hover .avatar.lg{filter:brightness(.94)}
.acc-face:focus-within{outline:2.5px solid var(--ac); outline-offset:2px}
.acc-face[aria-busy="true"]{cursor:progress}
.acc-face[aria-busy="true"] .avatar.lg{filter:brightness(.9)}
.acc-face-do{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--muted); white-space:nowrap;
}
.acc-face:hover .acc-face-do{color:var(--ink)}
.acc-face-do .ic{width:13px; height:13px}
.acc-face-do i{font-style:normal}
/* Taking one down is the rarer half and is not the disc: a control that
   removes a thing should not be the same gesture as the one that
   replaces it. */
.acc-face-off{
  border:none; background:none; padding:0; margin-top:8px; cursor:pointer;
  font-family:"Lexend",sans-serif; font-size:12.5px; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.acc-face-off:hover{color:var(--da)}
.acc-face-off:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:4px}
.acc-face-err{margin-top:8px}
.roles-grid{display:grid; gap:9px}
.role-pick{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 15px; cursor:pointer; border-radius:var(--r-card);
  border:1.5px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  font-family:"Lexend",sans-serif; transition:border-color .18s, background .18s;
}
.role-pick:hover{border-color:color-mix(in srgb, var(--ac) 45%, transparent)}
.role-pick:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.role-pick.on{
  border-color:var(--su);
  background:color-mix(in srgb, var(--tint) 55%, transparent);
}
.role-pick .ric{
  width:38px; height:38px; border-radius:var(--r-chip); display:grid;
  place-items:center; flex:none; font-size:17px;
  background:color-mix(in srgb, var(--tint2) 78%, transparent); color:var(--ac);
}
.role-pick .rt{display:grid; flex:1; gap:1px; min-width:0}
.role-pick .rt b{font-size:15px; font-weight:550}
.role-pick .rt i{font-style:normal; font-size:12.5px; color:var(--muted)}
.role-pick .rdot{
  width:18px; height:18px; border-radius:50%; flex:none;
  border:1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.role-pick.on .rdot{
  border-color:var(--su); background:var(--su);
  box-shadow:inset 0 0 0 3px var(--surface);
}

/* The same tiles editing a set rather than choosing one of four. The
   mark becomes a ticked square, because more than one of these can be
   true at once and a radio dot would promise otherwise. */
.roles-grid.is-set .rdot{border-radius:7px; display:grid; place-items:center}
.roles-grid.is-set .role-pick.on .rdot{box-shadow:none; color:var(--surface)}
.roles-grid.is-set .rdot .ic{width:13px; height:13px; stroke-width:2.8}

/* Only ever drawn for an account holding more than one board -- an owner
   who also skippers, or an operator who owns a hull. A view switch, so
   it is a strip of links and not a control that changes the account. */
.dash-tabs{
  display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin:0 0 26px;
  border-radius:var(--r-btn); width:fit-content; max-width:100%;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
}
.dash-tabs a{
  padding:9px 16px; border-radius:var(--r-btn); text-decoration:none;
  font-size:14px; font-weight:500; color:var(--muted);
  transition:background .18s, color .18s;
}
.dash-tabs a:hover{color:var(--ink)}
.dash-tabs a.on{
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  color:var(--ink); box-shadow:0 1px 3px -1px rgba(var(--sh),.2);
}
.dash-tabs a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* Where the database owns the answer, these tiles are a statement and
   not a control: no pointer, no hover, and the ones you do not hold
   simply stand back rather than inviting a press that cannot work. */
.roles-grid.is-fixed .role-pick{cursor:default}
.roles-grid.is-fixed .role-pick:hover{
  border-color:color-mix(in srgb, var(--ink) 10%, transparent);
}
.roles-grid.is-fixed .role-pick.on:hover{border-color:var(--su)}
.roles-grid.is-fixed .role-pick.is-off{opacity:.52}

/* Your own details, opened for editing in place. */
.acc-card #acc-edit{margin-left:auto; flex:none; align-self:flex-start}

/* ---- WHAT THIS ACCOUNT IS ----
   Three roles, and one person can hold all of them: book a boat on
   Saturday, own one that goes out on Sunday, and skipper it themselves.
   They are badges rather than a list, because the interesting fact is
   how many you have, and a badge you have not earned yet is not drawn
   at all — except the captain's, which is drawn waiting, because
   "applied and being checked" is a real state somebody is in for two
   days and a page that shows nothing is a page that lost their
   application. */
.acc-roles{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.acc-role{
  display:inline-grid; grid-template-columns:16px auto; align-items:center;
  gap:1px 8px; padding:7px 13px 8px; border-radius:var(--r-chip);
  background:color-mix(in srgb, var(--se) 16%, var(--surface));
  border:1px solid color-mix(in srgb, var(--sea-b) 22%, transparent);
}
.acc-role .ic{grid-row:1 / span 2; width:16px; height:16px; color:var(--sea-b)}
.acc-role b{font-size:12.5px; font-weight:600; color:var(--sea-b); line-height:1.2}
.acc-role i{font-style:normal; font-size:11px; color:var(--muted); line-height:1.3}
/* The owner's badge takes the coral wash, because owning is the one of
   the three that is a thing you DID rather than a thing you are. */
.acc-role.is-owner{
  background:var(--tint); border-color:color-mix(in srgb, var(--su) 30%, transparent);
}
.acc-role.is-owner .ic,.acc-role.is-owner b{color:var(--su-text)}
/* Filed, not granted. Amber says waiting everywhere else on this site. */
.acc-role.is-waiting{
  background:var(--s2-wash); border-color:color-mix(in srgb, var(--s2) 38%, transparent);
}
.acc-role.is-waiting .ic,.acc-role.is-waiting b{color:var(--s2-ink)}

/* ---- the two doors ----
   How you become the other two. Each disappears once walked through. */
.acc-more{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:12px; margin-top:22px;
}
.acc-door{
  display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px;
  align-items:start; padding:16px 18px; border-radius:var(--r-card);
  text-decoration:none; color:inherit;
  background:var(--cardbg); border:var(--cardbd);
  transition:border-color .18s ease, transform .18s ease;
}
.acc-door:hover{
  border-color:color-mix(in srgb, var(--su) 45%, transparent);
  transform:translateY(-2px);
}
.acc-door:focus-visible{outline:2.5px solid var(--ac); outline-offset:3px}
.acc-door .ic{width:22px; height:22px; color:var(--su-text); margin-top:2px}
.acc-door b{display:block; font-size:15px; font-weight:600; margin-bottom:3px}
.acc-door i{font-style:normal; font-size:13px; line-height:1.5; color:var(--muted)}

/* ---- applying to skipper ---- */
.cap-form{display:grid; gap:14px}
.cap-two{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
/* The two licences: one press, and only one of them on. `.pick row` is
   the site's own radio row — the same control the boat form asks its
   berth with — so this is a reuse rather than a third way of drawing a
   choice. */
.cap-picks{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:9px}
.cap-picks .pick.row{justify-content:flex-start}

/* ---- a date, in the licence's own format ----
   The box and the calendar button are one control, so the button sits
   inside the field's border rather than beside it as a second object. */
.cap-date{position:relative}
.cap-date-row{position:relative; display:flex; align-items:center}
.cap-date-row input{padding-right:44px}
.cap-cal-open{
  position:absolute; right:6px; width:32px; height:32px; flex:none;
  display:grid; place-items:center; padding:0; cursor:pointer;
  border:none; background:none; border-radius:50%; color:var(--muted);
  transition:color .16s ease, background .16s ease;
}
.cap-cal-open .ic{width:17px; height:17px}
.cap-cal-open:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent)}
.cap-cal-open:focus-visible{outline:2px solid var(--ac); outline-offset:1px}
.cap-date.is-open .cap-cal-open{color:var(--ink)}

/* The calendar hangs off the field, over whatever is under it. */
.cap-cal{
  position:absolute; z-index:60; top:calc(100% + 8px); left:0;
  width:min(320px, calc(100vw - 40px)); padding:16px;
  border-radius:var(--r-card); border:var(--cardbd); background:var(--surface);
  box-shadow:0 3px 8px -4px rgba(var(--sh),.2), 0 30px 54px -28px rgba(var(--sh),.75);
}
/* On the right-hand field it would run off the page opening leftward. */
.cap-two > .cap-date:last-child .cap-cal{left:auto; right:0}
.cap-cal .cal-month{font-size:16px}
.cap-cal .cal-nav{width:30px; height:30px}
.cap-cal .cal-grid{gap:3px}
.cap-day{border-radius:10px; background:color-mix(in srgb, var(--ink) 4%, transparent)}
.cap-day:hover{border-color:var(--ac)}
.cap-day.is-today{border-color:color-mix(in srgb, var(--su) 55%, transparent)}
.cap-day.is-on{background:var(--sea-b); border-color:var(--sea-b); color:#fff}

/* A licence runs five years, so the year moves on its own rather than
   sixty presses of the month arrow. */
.cap-years{display:flex; gap:6px; margin-bottom:10px}
.cap-year{
  flex:1; padding:6px 8px; border-radius:10px; cursor:pointer;
  font-family:"Lexend",sans-serif; font-size:11.5px; font-weight:600; color:var(--muted);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  transition:border-color .16s ease, color .16s ease;
}
.cap-year:hover{border-color:var(--ac); color:var(--ink)}
.cap-year:focus-visible{outline:2px solid var(--ac); outline-offset:2px}

.cap-docs{display:grid; gap:9px}

/* ---- finding a place on the berth chart ---- */
.map-find{display:flex; gap:8px; margin:0 0 10px}
.map-find input{
  flex:1; min-width:0; font-family:"Lexend",sans-serif; font-size:14px;
  padding:10px 15px; border-radius:999px; color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  background:color-mix(in srgb, var(--surface) 74%, transparent);
}
.map-find input:focus-visible{outline:2px solid var(--ac); outline-offset:1px}
.map-find .btn-ghost{flex:none; white-space:nowrap}
.map-find .btn-ghost .ic{width:15px; height:15px; margin-right:6px}
.map-said{margin:0 0 10px}
.map-hits{margin-bottom:12px}
.map-hits .pick.row{justify-content:flex-start; text-align:left}

.cap-doc{
  display:grid; grid-template-columns:20px minmax(0,1fr); gap:2px 12px;
  align-items:center; cursor:pointer;
  padding:13px 15px; border-radius:var(--r-img);
  border:1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  transition:border-color .18s ease, background .18s ease;
}
.cap-doc:hover{border-color:var(--ac)}
.cap-doc:focus-within{outline:2.5px solid var(--ac); outline-offset:2px}
.cap-doc .ic{width:20px; height:20px; color:var(--muted)}
/* The label and its note are wrapped in a span, so the span is the grid
   cell and they are inline inside it — which ran the two together on one
   line. The span is the stack. */
.cap-doc > span{display:grid; gap:2px; min-width:0}
.cap-doc b{font-size:14px; font-weight:600}
.cap-doc i{font-style:normal; font-size:12px; color:var(--muted); line-height:1.4}
/* In: it stops being a dashed hole and becomes a filled row. */
.cap-doc.is-in{
  border-style:solid;
  border-color:color-mix(in srgb, var(--s1) 45%, transparent);
  background:var(--s1-wash);
}
.cap-doc.is-in .ic{color:var(--s1-ink)}
.cap-doc.is-lifting{opacity:.6; cursor:progress}

.cap-done{display:grid; gap:12px}
.cap-done p{font-size:14.5px; line-height:1.6; color:var(--muted)}
.cap-done p b{color:var(--ink)}
.cap-badge{
  display:inline-flex; align-items:center; gap:8px; justify-self:start;
  padding:7px 14px; border-radius:var(--r-chip);
  background:var(--s1-wash); color:var(--s1-ink) !important;
  border:1px solid color-mix(in srgb, var(--s1) 40%, transparent);
  font-size:13px; font-weight:600;
}
.cap-badge.is-wait{
  background:var(--s2-wash); color:var(--s2-ink) !important;
  border-color:color-mix(in srgb, var(--s2) 40%, transparent);
}
.cap-badge .ic{width:16px; height:16px}

/* ---- the boards, stacked ----
   A captain-owner gets both on one page, so each needs to end visibly
   before the next begins. */
.dash-title{font-size:clamp(28px,3.6vw,42px); margin-bottom:6px}
.dash-board + .dash-board{
  position:relative;
  margin-top:clamp(44px,5vw,68px); padding-top:clamp(30px,3.4vw,42px);
}
.dash-board + .dash-board::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--hairline);
}
.dash-h{font-size:clamp(20px,2.4vw,26px); margin:2px 0 4px}

.acc-edit{display:grid; gap:15px; margin-top:18px}
.acc-edit .btn-row{margin-top:4px}
/* The little "optional" beside a label. `.field > span` is uppercase and
   widely letter-spaced, and this was inheriting both -- so "Insured for
   charter" and its tag ran together as one shouted line: INSURED FOR
   CHARTER CAN WAIT. It is an aside, and it reads as one. */
.field .opt{
  font-style:normal; font-weight:400; font-size:11px; color:var(--faint);
  text-transform:none; letter-spacing:0; margin-left:6px;
}
.field .opt::before{content:"· "}

/* The line under the email form saying which role this link provisions.
   It is a statement about the account, not a control. */
.auth-grant{
  display:flex; align-items:flex-start; gap:10px; margin:20px 0 0;
  padding:12px 14px; border-radius:var(--r-card);
  background:color-mix(in srgb, var(--tint2) 62%, transparent);
  font-size:13px; line-height:1.5; color:var(--muted);
}
.auth-grant .ic{width:18px; height:18px; flex:none; margin-top:1px; color:var(--ac)}
.auth-grant b{color:var(--ink); font-weight:550}

.acc-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:26px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius:16px; overflow:hidden;
}
.acc-stats > div{
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  padding:18px 12px; display:grid; justify-items:center; gap:2px; text-align:center;
}
.acc-stats b{font-size:22px; font-weight:600}
.acc-stats i{font-style:normal; font-size:11.5px; color:var(--muted)}

/* Sign in */
.auth-card{padding:26px}
.auth-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:22px;
  border-radius:var(--r-btn);
  background:color-mix(in srgb, var(--ink) 6%, transparent);
}
.auth-tabs button{
  padding:11px; border:none; border-radius:var(--r-btn); cursor:pointer;
  background:none; font-family:"Lexend",sans-serif; font-size:14.5px;
  font-weight:500; color:var(--muted); transition:background .18s, color .18s;
}
.auth-tabs button.on{
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  color:var(--ink); box-shadow:0 1px 3px -1px rgba(var(--sh),.2);
}
/* Apple and Google, above the email form: most people arrive already
   signed in to one of them on the phone in their hand. The marks are
   drawn as each owner requires — Apple white on black, Google's four
   colours on a light button. */
.oauth-row{display:grid; gap:9px; margin-bottom:18px}
.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 18px; border-radius:var(--r-btn); cursor:pointer;
  border:1.5px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background:color-mix(in srgb, var(--surface) 84%, transparent);
  font-family:"Lexend",sans-serif; font-size:14.5px; font-weight:500;
  color:var(--ink); transition:border-color .16s, background .16s, transform .16s;
}
.oauth-btn:hover{border-color:color-mix(in srgb, var(--ink) 34%, transparent); transform:translateY(-1px)}
.oauth-btn:focus-visible{outline:2px solid var(--ac); outline-offset:2px}
.oauth-btn .ic{width:19px; height:19px; flex:none}
.oauth-btn.is-apple{background:var(--ink); border-color:var(--ink); color:#fff}
.oauth-btn.is-apple:hover{background:#000; border-color:#000}

.auth-or{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.auth-or::before,.auth-or::after{
  content:""; flex:1; height:1px;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
}

/* What the provider would have told us, said out loud rather than mimed */
.oauth-head{
  display:flex; align-items:flex-start; gap:11px; margin-bottom:20px;
  padding:13px 15px; border-radius:16px;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
}
.oauth-head .ic{width:20px; height:20px; flex:none; margin-top:2px}
.oauth-head b{display:block; font-size:14.5px; font-weight:600}
.oauth-head i{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.5}

#auth-form .field{margin-bottom:14px}
/* The mobile number: a country and the rest of it, in one control.
   The country is a select rather than a typed +57 because a wrong
   country code is a code that goes to a stranger's phone and an account
   that can never be finished. It is sized to the flag and the code, and
   the name in each option is there for the open list rather than for the
   closed box -- which is why the box shows what it shows. */
.phone-row{
  display:grid; grid-template-columns:minmax(0,7.5em) minmax(0,1fr); gap:8px;
}
/* Both halves already have the field's own material from .field input,
   .field select -- all this adds is the split and room for the code. */
.phone-row select{min-width:0; padding-inline:10px; cursor:pointer; text-overflow:ellipsis}
.phone-row input{min-width:0}

/* The six digits, set as six digits: monospaced figures, spaced out, big
   enough to check against a phone held in the other hand. */
.code-input{
  font-size:26px; font-weight:600; letter-spacing:.42em; text-align:center;
  font-variant-numeric:tabular-nums; padding-inline:8px;
}
.code-input::placeholder{color:var(--faint); letter-spacing:.42em}
.code-shown{
  font-variant-numeric:tabular-nums; letter-spacing:.16em;
  font-weight:650; color:var(--ink);
}

/* Said before the button is pressed, so the wait that follows is one
   somebody was expecting rather than one they have to work out. */
.auth-willsend{
  display:flex; align-items:flex-start; gap:8px;
  margin:16px 0 0; line-height:1.5;
}
.auth-willsend .ic{width:16px; height:16px; flex:none; margin-top:2px; color:var(--ac)}

/* The wait itself. The pool wash the card already uses for the things it
   explains -- not the red of .auth-error: nothing has gone wrong here,
   and a red panel where the form used to be reads as a refusal. */
.auth-sent{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px; border-radius:var(--r-card);
  background:color-mix(in srgb, var(--tint2) 62%, transparent);
}
.auth-sent .ic{width:22px; height:22px; flex:none; margin-top:2px; color:var(--ac)}
.auth-sent b{font-size:15.5px; font-weight:600; color:var(--ink)}
.auth-sent p{margin:6px 0 0; font-size:13.5px; line-height:1.6; color:var(--muted)}
.auth-sent .addr{font-weight:550; word-break:break-all}
.auth-note{
  margin-top:16px; font-size:13.5px; line-height:1.5; color:var(--ink);
  background:color-mix(in srgb, var(--tint2) 62%, transparent);
  padding:10px 14px; border-radius:12px;
}
/* The one thing somebody has to read before typing anything into a card
   that cannot do what the card says it does. */
.auth-demo{margin:0 0 18px; background:color-mix(in srgb, var(--wa) 20%, transparent)}
.auth-demo code{
  font-size:12.5px; padding:1px 5px; border-radius:6px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
}

.auth-error{
  margin-top:16px; font-size:13.5px; color:var(--da);
  background:color-mix(in srgb, var(--da) 10%, transparent);
  padding:10px 14px; border-radius:12px;
}

/* Dashboards */
.dash-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  margin:24px 0 30px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius:16px; overflow:hidden;
}
.dash-kpis > div{
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  padding:20px 14px; display:grid; gap:2px;
}
.dash-kpis b{
  font-size:26px; font-weight:800; font-family:"Bricolage Grotesque",sans-serif;
  font-variation-settings:"wdth" 86; letter-spacing:-.02em; line-height:1;
}
.dash-kpis i{font-style:normal; font-size:12.5px; color:var(--muted)}

.deals{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:16px}
.deal-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.deal-head b{font-size:19px; font-family:"Bricolage Grotesque",sans-serif;
  font-variation-settings:"wdth" 86; font-weight:700; letter-spacing:-.015em}

.runs{display:grid; gap:12px}
.run{display:flex; align-items:center; gap:18px; padding:16px 18px}
.run-time{
  display:grid; justify-items:center; gap:2px; flex:none; min-width:74px;
  padding-right:18px; border-right:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.run-time b{font-size:14px; font-weight:600}
.run-time i{font-style:normal; font-size:19px; font-weight:600; color:var(--ac)}
.run-body{flex:1; display:grid; gap:2px; min-width:0}
.run-body b{font-size:16px}
.run-body i{font-style:normal; font-size:13px; color:var(--muted)}

/* ---- the captain's board ----
   Four sections in the order a captain's day has them: what needs an
   answer, what is coming, what is done, how it was rated. */
.dash-sub{
  display:flex; align-items:center; gap:9px;
  font-size:clamp(16px,1.9vw,19px); margin:34px 0 14px;
}
.dash-sub .ic{width:18px; height:18px; color:var(--muted); flex:none}
.dash-none{margin:0; padding:16px 18px; border-radius:var(--r-img);
  background:color-mix(in srgb, var(--ink) 4%, transparent)}

/* The buttons at the end of a run. They were one button labelled "Open"
   that went to the fleet map; a run has two places worth going and
   neither of them is called Open. */
.run-go{display:grid; gap:7px; flex:none}
.run-go .btn-ghost{white-space:nowrap; justify-content:center}
@media (max-width:620px){
  .run{flex-wrap:wrap}
  .run-time{border-right:none; padding-right:0; min-width:0;
    grid-auto-flow:column; gap:10px; align-items:baseline}
  .run-go{width:100%; grid-auto-flow:column}
}

/* Finished charters: a list, not cards. They are a record rather than
   something to act on, and six cards of things you cannot do anything
   about is the busiest part of a page being the least useful. */
.past-runs{list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius:14px; overflow:hidden}
.past-runs li{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px;
  align-items:baseline; padding:13px 16px; font-size:14px;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
}
.past-runs b{font-weight:600; white-space:nowrap}
.past-runs span{color:var(--muted); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.past-runs i{font-style:normal; font-weight:600}

/* The rating, which on this site has always been about the skipper —
   this is the one page that shows it to them. */
.cap-score{
  display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px); align-items:center;
  padding:20px 22px; border-radius:var(--r-card);
  background:var(--cardbg); border:var(--cardbd);
}
.cap-score-lead{display:grid; gap:6px; align-content:start}
.cap-score-lead b{
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 86;
  font-weight:700; font-size:clamp(34px,4.4vw,46px); letter-spacing:-.03em; line-height:.9;
}
.cap-score-lead .rev-stars .ic{width:15px; height:15px; color:var(--ap)}
.cap-score-lead .rev-stars .ic.off{color:var(--faint)}
.cap-score-lead span{font-size:13px; color:var(--muted)}
.cap-score .rev-scores{margin-top:0; grid-template-columns:minmax(0,1fr)}
.cap-notes{margin-top:22px}
@media (max-width:760px){
  .cap-score{grid-template-columns:minmax(0,1fr)}
}

.ops-table{padding:0; overflow-x:auto}
.ops-table table{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
.ops-table th{
  text-align:left; padding:14px 16px; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.ops-table td{
  padding:14px 16px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.ops-table tr:last-child td{border-bottom:none}
.ta-r{text-align:right}

/* Home page quick links */
.quad{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.quad-tile{
  display:grid; gap:8px; align-content:start; padding:26px 24px 28px;
  text-decoration:none; color:inherit; border-radius:var(--r-card);
  background:var(--cardbg); border:var(--cardbd); box-shadow:var(--elev);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.quad-tile:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--su) 46%, transparent);
  box-shadow:0 2px 5px -2px rgba(var(--sh),.18), 0 24px 40px -22px rgba(var(--sh),.7);
}
/* the mark was a pool-blue wash with a coral icon on it, which is the one
   pairing this palette forbids — both washed out and neither legible */
.quad-ic{
  width:44px; height:44px; border-radius:var(--r-chip); display:grid;
  place-items:center; font-size:18px; color:var(--su-text);
  background:color-mix(in srgb, var(--tint) 88%, transparent);
}
.quad-tile:hover .quad-ic{background:var(--tint)}
.quad-tile b{font-size:17px; font-weight:600; margin-top:5px}
.quad-tile i{font-style:normal; font-size:13.5px; color:var(--muted); line-height:1.45}

.ticks li span{display:block}
.ticks li b{color:var(--ink); font-weight:600}

@media (max-width:1040px){
  /* minmax(0,1fr) and not 1fr. A bare 1fr is minmax(auto,1fr), so the
     column refuses to be narrower than the widest min-content inside it —
     and the reviews strip is a six-track row that scrolls sideways on
     purpose. Left as 1fr, that strip's intrinsic width pushed the whole
     document to 697px on a 500px screen and every section on the page
     went with it. */
  .detail-body{grid-template-columns:minmax(0,1fr)}
  /* One column: the band, the centring and the card's own scroll all go.
     There is nothing beside this to stay level with, and a panel that
     scrolls inside a page that scrolls is two scrollbars for one gesture. */
  .detail-book{position:static; height:auto; display:block}
  .detail-book > .bk{max-height:none; overflow:visible}
  .quad{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .quad{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .trip{grid-template-columns:1fr}
  .trip > .ph{min-height:0; aspect-ratio:16/9}
  .acc-stats{grid-template-columns:1fr}
  .account-who{display:none}
  .account-chip{padding:4px}
  .run{flex-wrap:wrap}
}

/* The aboard catalogue prices a row in three columns; the cards below
   carry their own stepper. */
#aboard-list .amen{grid-template-columns:auto 1fr auto}
#aboard-list .amen-group:first-child{margin-top:0}

/* ---------- the menu ----------
 *
 * A menu, not a shop shelf: courses with a heading, a wide picture per
 * dish, the price on the same line as the name, and the control to add it
 * only where it is needed. The houses it is bought from come first,
 * because what you are eating is somebody's trade.
 */
.menu-head h1{font-size:clamp(36px,5.4vw,62px)}

/* 260 fitted three houses across when the menu column was 1.5fr. It is
   1.9fr now and the column is 805px, where three 260s plus the gaps
   want 820 — fifteen pixels short, which dropped Norac onto a row of
   its own. */
/* ---- the three houses, as three lines ----
   Each of these was a 16:9 photograph with a name, a trade, a sentence
   and a count under it, and three of them stacked above the menu meant
   the menu — the only reason anybody is on this page — started below the
   fold. The houses matter, and their names are already on every plate
   they supply; this row is the introduction, and the article is one
   press away. */
.partners{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  gap:10px; margin-bottom:clamp(16px,2vw,22px);
}
.partner{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:11px; padding:10px 13px; text-decoration:none; color:var(--ink);
  border-radius:var(--r-img); border:var(--cardbd);
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  transition:border-color .2s, background .2s;
}
.partner:hover{border-color:color-mix(in srgb, var(--ink) 24%, transparent); background:var(--surface)}
.partner:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}
/* the wordmark, until a real logo file is dropped in beside it */
.partner-mark{
  display:grid; place-items:center; flex:none;
  width:34px; height:34px; border-radius:10px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 86;
  font-weight:700; font-size:13.5px; letter-spacing:-.01em; line-height:1;
}
.partner-mark img{display:block; width:100%; height:100%; object-fit:contain}
.tint-sun .partner-mark{color:#8A5A00; background:color-mix(in srgb, var(--wa) 20%, transparent)}
.tint-ocean .partner-mark{color:#0B5E86; background:color-mix(in srgb, var(--se) 22%, transparent)}
.tint-coral .partner-mark{color:#A32458; background:color-mix(in srgb, var(--su) 18%, transparent)}
.partner-t{display:grid; gap:1px; min-width:0}
.partner-t b{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.partner-t i{
  font-style:normal; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.partner-n{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:12.5px; font-weight:600; color:var(--muted);
}
.partner-n .ic{width:14px; height:14px; color:var(--ac)}
.partner:hover .partner-n .ic{transform:translateX(2px); transition:transform .18s}

/* ---- a house's own page, at the top ----
   Four lines. It opened on a window-height photograph of a cheese board
   above a list of four plates. */
/* Clear of the search bar above it. The poster used to do this by
   accident, being 400px tall. */
.house-top{max-width:70ch; margin-top:clamp(20px,3vw,34px)}
.house-top h1{font-size:clamp(26px,3.4vw,40px); line-height:1.1}
.house-trade{
  margin-top:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.house-line{margin-top:12px; font-size:15.5px; line-height:1.6; color:var(--muted)}
.house-line a{color:var(--su-text); text-underline-offset:3px; white-space:nowrap}

.course-by{font-size:13px; color:var(--muted)}
.course-by b{color:var(--ink); font-weight:600}

.amen-add{display:flex; align-items:center; gap:8px; margin-top:12px}
.amen-add .stepper{display:none; width:100%; justify-content:space-between}
.amen-add.has .stepper{display:flex}
.amen-add.has .amen-add-btn{display:none}
.amen-add-btn{
  flex:1; min-width:0; padding:9px 12px; border-radius:var(--r-btn); cursor:pointer;
  border:1.5px solid color-mix(in srgb, var(--ac) 40%, transparent);
  background:color-mix(in srgb, var(--tint2) 55%, transparent);
  font-family:"Lexend",sans-serif; font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .16s, border-color .16s;
}
.amen-add-btn:hover{background:var(--tint2); border-color:var(--ac)}
.amen-add-btn:focus-visible{outline:2px solid var(--ac); outline-offset:2px}
.amen-card.on{border-color:color-mix(in srgb, var(--su) 60%, transparent)}
.amen-card.on .amen-add-btn{
  background:color-mix(in srgb, var(--su) 20%, transparent);
  border-color:color-mix(in srgb, var(--su) 55%, transparent);
}
@keyframes called-fade{to{box-shadow:var(--elev)}}

/* The button to the boats, top and bottom of the menu. */
.rent-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-bottom:26px;
}
.rent-cta:last-child{margin:30px 0 0}

/* The cooler, pinned beside the menu */
.basket-card{padding:20px}
.basket-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.basket-top b{font-size:16px; font-weight:600}
.basket-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:12px; font-size:14px; color:var(--muted);
  border-top:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.basket-total b{font-size:18px; color:var(--ink)}









/* The cooler count, following you up a long catalogue on a phone. */
.fit-bar{
  /* Clear of the home indicator. Without the env() the bar's 12px lands
     inside the gesture strip on any phone with one: the swipe up that
     leaves the browser and the press on "Review the cooler" are the same
     30 pixels, and the swipe wins. It resolves to 0 everywhere else, and
     `viewport-fit=cover` in the head is what makes it resolve to anything
     at all. */
  position:fixed; left:12px; right:12px; z-index:60;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 12px 11px 18px; border-radius:var(--r-btn);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:var(--cardbd); box-shadow:0 3px 8px -4px rgba(var(--sh),.24), 0 24px 40px -22px rgba(var(--sh),.7);
  transform:translateY(140%); transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.fit-bar.is-up{transform:none}
.fit-bar[hidden]{display:none}
.fit-bar span{display:grid; gap:1px}
.fit-bar b{font-size:14.5px; font-weight:600}
.fit-bar i{font-style:normal; font-size:12px; color:var(--muted); white-space:nowrap}
/* buttons go full width on a phone; not this one, it shares a row */
.fit-bar .btn{width:auto; flex:none}
@media (min-width:1041px){ .fit-bar{display:none} }

.basket-actions{display:grid; gap:8px; margin-top:18px}
.basket-actions .btn.is-off{opacity:.5; pointer-events:none}
.basket-card .fine{margin-top:12px}

/* the cooler count riding on the results filter chip */
.chipbtn .chip-n{
  display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px;
  margin-left:2px; border-radius:99px; font-size:11px; font-weight:600;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
}
.chipbtn.on .chip-n{background:color-mix(in srgb, #fff 26%, transparent); color:#fff}

/* Footer water.
   The band runs the full width and fades in from the top rule, kept
   well back so the four columns of links stay comfortably readable. */
.site-footer{position:relative; overflow:hidden}
.footer-water{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.34;
  -webkit-mask-image:linear-gradient(transparent 0%, #000 26%, #000 100%);
  mask-image:linear-gradient(transparent 0%, #000 26%, #000 100%);
}
.footer-water canvas{width:100%; height:100%; display:block}
.site-footer .wrap{position:relative; z-index:1}
/* text over moving water needs a touch more weight than over flat colour */
.site-footer .footer-grid a,
.site-footer .footer-brand p,
.site-footer .footer-bot{color:color-mix(in srgb, var(--ink) 62%, transparent)}
.site-footer .footer-grid h4{color:color-mix(in srgb, var(--ink) 52%, transparent)}

/* ---------------------------------------------------------------------
   Putting a boat on Magik.

   The rail on the left is the whole shape of what is being asked, so
   nobody is ever three screens into something with no idea how long it
   is. It is a list of five, not a progress bar pretending to be a
   journey — you may jump about it, and the ticks say what is answered
   rather than what has been visited. */
.boat-shell{
  display:grid; grid-template-columns:minmax(0,258px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,28px); align-items:start;
}
.boat-rail{position:sticky; top:104px; padding:20px}
.rail-title{display:block; font-size:15px; font-weight:600; margin-bottom:12px}
.rail-bar{
  height:6px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 10%, transparent);
}
.rail-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--su), var(--ac));
  transition:width .45s cubic-bezier(.2,.9,.3,1);
}
.rail-pc{display:block; margin-top:7px; font-size:12px; color:var(--muted)}
.rail-list{display:grid; gap:2px; margin-top:16px}
.rail-step{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 11px; border:none; border-radius:13px; cursor:pointer;
  background:none; text-align:left; font-family:"Lexend",sans-serif;
  font-size:14.5px; color:var(--muted); transition:background .18s, color .18s;
}
.rail-step:hover{background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink)}
.rail-step.on{background:color-mix(in srgb, var(--su) 14%, transparent); color:var(--ink); font-weight:550}
.rail-step .ic{width:17px; height:17px; flex:none; color:var(--faint)}
.rail-step.on .ic{color:var(--su-text)}
.rail-step.ok .ic:last-child{color:var(--se); margin-left:auto}
.rail-step span{flex:1; min-width:0}
.rail-step i{font-style:normal; font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums}

/* Answered, and still short of a paper she cannot be listed without.
   Amber rather than red on purpose: nothing here is stopping her being
   handed in, and a red rail on a form somebody has just filled in
   correctly is a form that looks broken. */
.rail-step.short i{color:#8A5F00; margin-left:auto; font-weight:600}
.rail-step.short .ic:last-child{color:#8A5F00; margin-left:6px}
.rail-step.short:not(.on){background:color-mix(in srgb, var(--wa) 13%, transparent)}
.rail-note{margin:16px 0 0}

.boat-panel{padding:clamp(20px,3vw,30px)}
.boat-panel h2{font-size:clamp(21px,2.4vw,27px); margin:0 0 4px}
.boat-panel .fine{margin:0 0 18px; max-width:58ch}
.boat-nav{display:flex; gap:10px; align-items:center; margin-top:24px}
.boat-nav .btn{margin-left:auto}

.two-up{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px}
.two-up .field{margin:0}

/* A number with its unit inside the box, so 11.6 and m are one thing
   rather than a field and a label that drift apart on a phone. */
.unit-field{
  display:flex; align-items:center; gap:2px;
  border:1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius:14px; padding-inline:12px;
  background:color-mix(in srgb, var(--surface) 74%, transparent);
}
.unit-field:focus-within{outline:2px solid var(--ac); outline-offset:1px}
.unit-field input{border:none; background:none; padding-inline:0; flex:1; min-width:0}
.unit-field input:focus{outline:none}
.unit-field b{font-size:13.5px; font-weight:500; color:var(--muted); flex:none}

/* The choices. A picture of the thing plus a line saying which of the
   near-identical options it is, because "RIB" and "Motorboat" mean
   nothing to somebody who has one and has never let it. */
.pick-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px; margin-bottom:22px}
.pick-list{display:grid; gap:8px}
.pick{
  display:grid; gap:3px; padding:15px 16px; cursor:pointer; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  font-family:"Lexend",sans-serif; transition:border-color .18s, background .18s, transform .18s;
}
.pick:hover{border-color:color-mix(in srgb, var(--ink) 24%, transparent)}
.pick .ic{width:21px; height:21px; color:var(--faint)}
.pick b{font-size:14.5px; font-weight:550; color:var(--ink)}
.pick i{font-style:normal; font-size:12px; color:var(--muted); line-height:1.45}
.pick.on{
  border-color:var(--su); background:color-mix(in srgb, var(--su) 11%, transparent);
}
.pick.on .ic{color:var(--su-text)}
.pick.row{display:flex; align-items:center; gap:12px}
.pick.row .ic{flex:none}
.pick.row span{display:grid; gap:2px}
.pick:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}

.chip-set{display:flex; flex-wrap:wrap; gap:8px}
.chip-toggle{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:var(--r-chip); cursor:pointer;
  border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 70%, transparent);
  font-family:"Lexend",sans-serif; font-size:14px; color:var(--ink);
  transition:border-color .18s, background .18s;
}
.chip-toggle .ic{width:15px; height:15px; color:var(--faint)}
.chip-toggle.on{border-color:var(--su); background:color-mix(in srgb, var(--su) 13%, transparent)}
.chip-toggle.on .ic{color:var(--su-text)}

.boat-panel textarea{
  width:100%; padding:12px 14px; border-radius:14px; resize:vertical;
  border:1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  background:color-mix(in srgb, var(--surface) 74%, transparent);
  font-family:"Lexend",sans-serif; font-size:15px; line-height:1.55; color:var(--ink);
}
.boat-panel textarea:focus{outline:2px solid var(--ac); outline-offset:1px}

/* Handing it in is a different act from saving, so it is a different
   object: it only appears once there is nothing left empty. */
.boat-offer{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:26px; padding:18px 20px; border-radius:var(--r-card);
  background:color-mix(in srgb, var(--tint2) 62%, transparent);
}
.boat-offer b{font-size:15.5px; font-weight:600}
.boat-offer p{margin:5px 0 0; font-size:13.5px; color:var(--muted); line-height:1.55; max-width:46ch}
.boat-offer .btn{margin-left:auto; flex:none}
.boat-done{padding:clamp(20px,3vw,30px)}

@media (max-width:820px){
  .boat-shell{grid-template-columns:1fr}
  .boat-rail{position:static}
  .rail-list{grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); overflow-x:auto}
  .rail-step{flex-direction:column; gap:4px; font-size:12.5px; text-align:center}
  .rail-step i,.rail-step.ok .ic:last-child,
  .rail-step.short i,.rail-step.short .ic:last-child{margin:0}
}

/* The photographs.
   A grid of what there is, with the cover first and unmistakably the
   cover — it is the one thing a client actually decides on, and an owner
   should never have to work out which of six it will be. */
.shot-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:12px; margin:4px 0 18px;
}
.shot{
  position:relative; margin:0; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-img); background:color-mix(in srgb, var(--ink) 7%, transparent);
  border:1px solid var(--line);
}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot.cover{border-color:var(--su); box-shadow:0 0 0 2px color-mix(in srgb, var(--su) 40%, transparent)}
.shot-flag{
  position:absolute; left:8px; top:8px; z-index:1;
  padding:4px 9px; border-radius:var(--r-chip);
  background:var(--su); color:var(--onacc);
  font-size:10.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
}
.shot figcaption{
  position:absolute; right:6px; top:6px; display:flex; gap:5px; z-index:1;
  opacity:.82; transition:opacity .18s;
}
.shot:hover figcaption,.shot:focus-within figcaption{opacity:1}
.shot-act{
  display:grid; place-items:center; width:30px; height:30px; padding:0;
  border:none; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  color:var(--ink); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 6px -2px rgba(var(--sh),.4);
}
.shot-act .ic{width:15px; height:15px}
.shot-act:hover{background:#fff}
.shot-act.drop:hover{background:var(--da); color:#fff}
.shot-act:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}

/* One on its way up. The tile is there from the moment it is chosen, so
   the grid fills in the order they were picked rather than the order the
   network happens to finish in. */
.shot.lifting{display:grid; place-items:center; border-style:dashed}
.shot-wait{display:grid; gap:6px; justify-items:center; padding:10px; text-align:center}
.shot-wait .ic{width:22px; height:22px; color:var(--faint); animation:shot-pulse 1.4s ease-in-out infinite}
.shot-wait i{font-style:normal; font-size:11.5px; color:var(--muted); overflow-wrap:anywhere}
@keyframes shot-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* One photograph failing on its way up keeps its own tile and says why.
   It used to vanish, which left somebody counting tiles against the
   photographs they had chosen and finding one short with no reason
   given. */
.shot.lifting.failed{border-color:color-mix(in srgb, var(--da) 45%, transparent)}
.shot.lifting.failed .ic{color:var(--da); animation:none}
.shot-wait em{font-style:normal; font-size:11px; color:var(--da); line-height:1.35}

/* An iPhone photograph on a machine with nothing that can convert it.
   The file is here and safe; this browser simply will not draw HEIC, and
   a tile that says so beats the broken-image glyph, which reads as lost. */
/* Said at the top of the form, where the thing it breaks is. */
.boat-elsewhere{margin:0 0 18px; max-width:none}
.boat-elsewhere a{overflow-wrap:anywhere}

.shot-undrawn{display:none}
.shot.undrawable{display:grid; place-items:center; border-style:dashed}
.shot.undrawable img{display:none}
.shot.undrawable .shot-undrawn{
  display:grid; gap:6px; justify-items:center; padding:10px; text-align:center;
}
.shot.undrawable .shot-undrawn .ic{width:22px; height:22px; color:var(--faint)}
.shot.undrawable .shot-undrawn i{font-style:normal; font-size:11.5px; color:var(--muted); overflow-wrap:anywhere}
.shot.undrawable .shot-undrawn em{font-style:normal; font-size:11px; color:var(--faint)}

.shot-add{
  display:grid; place-items:center; gap:4px; aspect-ratio:4/3; padding:14px;
  text-align:center; cursor:pointer; border-radius:var(--r-img);
  border:1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  transition:border-color .18s, background .18s;
}
.shot-add:hover,.shot-add.over{
  border-color:var(--su); background:color-mix(in srgb, var(--su) 9%, transparent);
}
.shot-add .ic{width:24px; height:24px; color:var(--faint)}
.shot-add b{font-size:14px; font-weight:550}
.shot-add i{font-style:normal; font-size:11.5px; color:var(--muted); line-height:1.4}


/* ------------------------------------------------ handed in, and after

   The screen an owner lands on when they hand a boat in, and the page
   that answers "where is it" afterwards. Both of them are mostly one
   thing: saying plainly whose move it is next. */

.boat-said{
  margin:18px 0 0; padding:14px 16px; border-radius:var(--r-card);
  background:color-mix(in srgb, var(--su) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--su) 30%, transparent);
}
.boat-said.needs{
  background:color-mix(in srgb, var(--da) 8%, transparent);
  border-color:color-mix(in srgb, var(--da) 30%, transparent);
}
.boat-said b{display:flex; align-items:center; gap:8px; font-size:14px}
.boat-said b i{font-style:normal; font-weight:400; font-size:12px; color:var(--muted); margin-left:auto}
.boat-said .ic{width:16px; height:16px}
.boat-said p{margin:6px 0 0; font-size:14.5px; line-height:1.55}

/* The listing, as a client will see it, before anybody does. */
.boat-preview{margin-top:24px}
.preview-flag{
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:12.5px; color:var(--muted);
}
.preview-flag .ic{width:16px; height:16px; color:var(--faint)}
.preview-card{
  display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:0; border-radius:var(--r-card); overflow:hidden;
  border:1.5px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  background:color-mix(in srgb, var(--surface) 60%, transparent);
}
.preview-shot{position:relative; aspect-ratio:4/3; background:var(--sand)}
.preview-shot img{width:100%; height:100%; object-fit:cover; display:block}
.preview-noshot{display:grid; place-items:center; height:100%}
.preview-noshot .ic{width:26px; height:26px; color:var(--faint)}
.preview-price{
  position:absolute; left:10px; bottom:10px; padding:6px 11px;
  border-radius:999px; background:rgba(255,255,255,.94); font-size:14px;
}
.preview-price i{font-style:normal; font-weight:400; font-size:11.5px; color:var(--muted)}
.preview-say{padding:16px 18px}
.preview-say h3{margin:0 0 4px; font-size:18px}
.preview-facts{margin:0 0 8px; font-size:13px; color:var(--muted)}
.preview-where{display:flex; align-items:center; gap:6px; margin:0; font-size:13.5px}
.preview-where .ic{width:15px; height:15px; color:var(--faint)}
.preview-about{margin:10px 0 0; font-size:14px; line-height:1.55; color:var(--muted)}
@media (max-width:620px){ .preview-card{grid-template-columns:1fr} }

/* One boat on the status page. */
.fleet-row{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:22px; margin-bottom:18px}
.fleet-shot{aspect-ratio:4/3; border-radius:var(--r-img); overflow:hidden; background:var(--sand)}
.fleet-shot img{width:100%; height:100%; object-fit:cover; display:block}
.fleet-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.fleet-head h2{margin:0; font-size:20px}
.fleet-facts{margin:6px 0 0; font-size:13.5px; color:var(--muted)}
.fleet-state{margin:10px 0 0; font-size:14.5px; line-height:1.55}
.fleet-bar{height:5px; border-radius:999px; background:color-mix(in srgb, var(--ink) 10%, transparent); margin:14px 0 6px; overflow:hidden}
.fleet-bar i{display:block; height:100%; border-radius:999px; background:var(--ac)}

.state-chip{
  padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--muted);
}
.state-chip.waiting{background:color-mix(in srgb, var(--ac) 16%, transparent); color:var(--ac-ink, var(--ink))}
.state-chip.live{background:color-mix(in srgb, var(--su) 18%, transparent); color:var(--ink)}

.fleet-steps{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:7px}
.fleet-steps li{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--faint)}
.fleet-steps li .ic{width:16px; height:16px}
.fleet-steps li.done{color:var(--ink)}
.fleet-steps li.done .ic{color:var(--su)}
.fleet-steps li.now{color:var(--ink); font-weight:550}
.fleet-steps li.now .ic{color:var(--ac)}
.fleet-steps li span{display:flex; gap:8px; align-items:baseline}
.fleet-steps li i{font-style:normal; font-size:12px; color:var(--muted)}
.fleet-row .btn-row{margin-top:18px}
@media (max-width:720px){ .fleet-row{grid-template-columns:1fr} }


/* ------------------------------------- papers, people, chart, the days she is shut */

.paper-slots{display:grid; gap:10px; margin:6px 0 18px}
.paper-slot{
  display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer;
  border:1.5px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius:var(--r-card); background:color-mix(in srgb, var(--surface) 55%, transparent);
  transition:border-color .18s, background .18s;
}
.paper-slot:hover{border-color:var(--su); background:color-mix(in srgb, var(--su) 8%, transparent)}
.paper-slot.has{border-style:solid; border-color:color-mix(in srgb, var(--su) 45%, transparent); cursor:default}
.paper-slot.busy{cursor:progress}
.paper-slot > .ic{width:20px; height:20px; color:var(--faint); flex:none}
.paper-slot.has > .ic{color:var(--su)}
.paper-slot span{display:grid; gap:2px; min-width:0}
.paper-slot b{font-size:14px; font-weight:550}
.paper-slot i{font-style:normal; font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.paper-slot .paper-add{
  margin-left:auto; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:550;
  background:color-mix(in srgb, var(--ink) 7%, transparent);
}
.paper-act{
  padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:transparent;
  font:inherit; font-size:12.5px; cursor:pointer; color:var(--ink);
}
.paper-slot .paper-act:first-of-type{margin-left:auto}
.paper-act:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.paper-act.drop{border:0; padding:6px; line-height:0; color:var(--muted)}
.paper-act.drop:hover{background:var(--da); color:#fff}
.paper-act .ic{width:14px; height:14px}

.skip-card{
  padding:16px 18px; margin-bottom:14px; border-radius:var(--r-card);
  border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 55%, transparent);
}
.skip-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.skip-head b{font-size:16px}
.skip-head .paper-act.drop{margin-left:auto}

.berth-other{margin-top:16px}
.berth-map{
  display:block; width:100%; height:auto; border-radius:var(--r-img);
  border:1px solid var(--line); cursor:crosshair; background:var(--sand);
}
.map-pin circle{fill:var(--ac); stroke:#fff; stroke-width:2.5}
.map-pin .map-dot{fill:#fff; stroke:none}
.map-row{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.map-zoom{display:flex; gap:6px}
.map-at{margin-left:auto; font-variant-numeric:tabular-nums}

/* What the owner receives, against what a client pays. */
.take{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-card);
  background:color-mix(in srgb, var(--su) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--su) 28%, transparent);
}
.take-line{display:flex; align-items:baseline; gap:10px; margin:0 0 5px; font-size:14.5px}
.take-line span{flex:1}
.take-line b,.take-line i{font-style:normal; font-variant-numeric:tabular-nums}
.take-line.total{margin-top:9px; padding-top:9px; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); font-size:16px}
.take .fine{margin:8px 0 0}

.rate-row{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.rate-row input[type=date],.rate-row input[type=text]{
  padding:9px 12px; border-radius:var(--r-in, 12px); border:1px solid var(--line);
  font:inherit; font-size:13.5px; background:var(--surface); min-width:0;
}
.rate-row input[type=text]{flex:1; min-width:130px}
.rate-row .unit-field{width:auto}

.shut{max-width:360px; margin-top:10px}
.shut-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.shut-head b{font-size:14.5px}
.shut-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.shut-dow{font-size:11px; color:var(--muted); text-align:center; padding-bottom:2px}
.shut-pad{visibility:hidden}
.shut-day{
  aspect-ratio:1; border:1px solid transparent; border-radius:10px; cursor:pointer;
  background:color-mix(in srgb, var(--ink) 5%, transparent); font:inherit; font-size:13px;
  color:var(--ink); transition:background .15s, color .15s;
}
.shut-day:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 12%, transparent)}
.shut-day:disabled{opacity:.3; cursor:default}
.shut-day.off{background:var(--da); color:#fff}
.shut-day:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}

/* The way back to the boat being priced, opening the menu's content.
   Empty on a menu opened cold, and it must take no room at all then —
   an empty div with a margin is a hole in the top of the page. */
.menu-back:empty{display:none}
.menu-back{margin:0 0 clamp(14px,2vw,20px)}

/* =====================================================================
   THE COURSE SUBMENU — Food · Beverages · Extras

   One course on screen at a time. The page used to stack all of them,
   which meant somebody who came for lunch scrolled past the beer and the
   snorkel masks to reach it — and the whole reason the groups were
   rewritten is that those are three different errands.

   The marks are drawn in CSS rather than pulled from the icon sprite:
   they are three flat shapes in the site's own two colours and they need
   no geometry a background-image cannot give them.
   ===================================================================== */
.menu-courses{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 clamp(18px,2.4vw,26px);
}
.menu-courses:empty{display:none}
/* The three marks. A plate, a glass, a mask — flat, two-tone, and drawn
   at the size they are used so nothing has to scale. */
.course-mark{
  width:22px; height:22px; flex:none; border-radius:6px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.m-food{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 11.2h18.8c0 4.9-4.2 8.8-9.4 8.8s-9.4-3.9-9.4-8.8z' fill='%23FF6F61'/%3E%3Cellipse cx='12' cy='11.2' rx='9.4' ry='1.9' fill='%23E2A33C'/%3E%3Cpath d='M8.2 8.1c0-1.4 1-2 1-3.1M12 7.4c0-1.7 1.2-2.4 1.2-3.7M15.8 8.1c0-1.4 1-2 1-3.1' fill='none' stroke='%23FF8A72' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.m-drink{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 4.4h12.8l-1.5 6.2a5 5 0 0 1-4.9 3.8 5 5 0 0 1-4.9-3.8z' fill='%23FF8A72'/%3E%3Cpath d='M6.5 8h11l-.6 2.6a5 5 0 0 1-4.9 3.8 5 5 0 0 1-4.9-3.8z' fill='%23E2A33C'/%3E%3Cpath d='M12 14.4v4.4M8.4 19.4h7.2' fill='none' stroke='%23FF6F61' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")}
.m-extra{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 8.6h17.2v6.1a3 3 0 0 1-3 3h-2.4l-3.2-3.4-3.2 3.4H6.4a3 3 0 0 1-3-3z' fill='%23FF6F61'/%3E%3Ccircle cx='8' cy='11.6' r='2.1' fill='%23FDF7F0'/%3E%3Ccircle cx='16' cy='11.6' r='2.1' fill='%23FDF7F0'/%3E%3Cpath d='M5.4 8.6c1.6-2.8 11.6-2.8 13.2 0' fill='none' stroke='%23E2A33C' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---- the booking sequence ------------------------------------------
 *
 * The rail across the top of every step: boat, food, extras, pay. It
 * stands where the three top tabs stand when there is no booking on, so
 * the page does not change shape when a sequence starts — the same strip
 * of the page, saying where you are instead of offering somewhere else.
 *
 * A step already walked is a link back to itself and is drawn as one; the
 * step you are on is the only coloured thing in the rail; the ones ahead
 * are plain numbers, because they are not places you can go yet.
 */
.stepway{
  list-style:none; margin:0 auto clamp(12px,1.8vw,20px); padding:5px;
  display:flex; align-items:center; gap:2px; width:fit-content; max-width:100%;
  border-radius:var(--r-btn); overflow:auto; scrollbar-width:none;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid color-mix(in srgb, var(--ink) 11%, transparent);
}
.stepway::-webkit-scrollbar{display:none}
.sw{flex:none; display:flex; align-items:center}
.sw > *{
  display:flex; align-items:center; gap:8px; padding:7px 15px 7px 8px;
  border-radius:var(--r-btn); text-decoration:none; white-space:nowrap;
  font-size:13.5px; color:var(--muted); transition:background .16s, color .16s;
}
.sw-n{
  width:22px; height:22px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:12px; font-weight:600;
  background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--muted);
}
.sw-n .ic{width:13px; height:13px}
.sw.done > a{color:var(--ink)}
.sw.done .sw-n{background:color-mix(in srgb, var(--tint2) 82%, transparent); color:var(--su-text)}
.sw.done > a:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.sw.now > *{background:var(--su); color:var(--onacc); font-weight:600}
.sw.now .sw-n{background:color-mix(in srgb, #fff 40%, transparent); color:var(--onacc)}
@media (max-width:640px){
  .stepway{width:100%; justify-content:flex-start}
  .sw:not(.now) > * > span:last-child{display:none}
  .sw:not(.now) > *{padding:7px 8px}
}

/* The two ways off a boat page. Book is the errand; asking is the one
   that does not commit, so it is the quiet one. */

/* ====================================================================
   THE BOAT PAGE, from the title row down.
   ==================================================================== */

/* ---- what this charter is ----
   No boxes. This was a bordered three-up of big numbers sitting over
   three bordered rows, and stacked under the photographs it read as a
   dashboard bolted to the top of a boat. A listing is a sentence — what
   the thing is and where it is — then its numbers, then its verdict, then
   the person behind it, then the two or three facts that decide it. What
   separates those is a hairline. The photographs are the only object on
   this half of the page. */
.lead{padding-top:4px}
.lead h2{font-size:clamp(20px,2.4vw,26px); line-height:1.2}
.lead-nums{margin-top:7px; font-size:15px; color:var(--muted)}
.lead-rate{
  display:flex; align-items:center; gap:6px; margin-top:9px;
  font-size:14.5px; color:var(--muted);
}
.lead-rate .ic{width:15px; height:15px; color:var(--ap)}
.lead-rate b{color:var(--ink); font-weight:600}
.lead-rate a{color:var(--ink); text-underline-offset:3px}

/* the hairline that separates one part of the lead from the next */
.lead-host,.lead-rows,.lead-say{
  margin-top:22px; padding-top:22px;
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

/* A photograph of a person, or the honest absence of one. We photograph
   our skippers; we mostly have not photographed the owners, and every
   client who leaves a note is a stranger whose picture we do not hold and
   would not publish if we did. Initials on a tinted disc read as a
   missing portrait rather than as somebody who is not there. */
.who-face,.owner-face{
  border-radius:50%; object-fit:cover; flex:none; display:grid; place-items:center;
  background:var(--tint2); color:var(--ink);
  font-family:"Lexend",sans-serif; font-weight:600; letter-spacing:.02em;
}
.who-face{width:36px; height:36px; font-size:12.5px}
.who-face.mono,.owner-face.mono{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--tint2) 80%, var(--surface)),
    color-mix(in srgb, var(--tint) 70%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.lead-host{display:flex; align-items:center; gap:14px}
.lead-host .who-face{width:46px; height:46px; font-size:15px}
.lead-host b{display:block; font-size:15.5px; font-weight:600}
.lead-host i{
  display:block; font-style:normal; font-size:13.5px; color:var(--muted); margin-top:2px;
}

.lead-rows{list-style:none; padding-left:0; display:grid; gap:18px}
.lead-rows > li{
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:16px; align-items:start;
}
.lead-rows > li > .ic{width:24px; height:24px; color:var(--ink); margin-top:1px}
.lead-rows > li > .who-face.sm{width:26px; height:26px; font-size:10px; margin-top:1px}
.lead-rows b{display:block; font-size:15.5px; font-weight:600; line-height:1.3}
.lead-rows i{
  display:block; font-style:normal; font-size:13.5px; line-height:1.55;
  color:var(--muted); margin-top:3px;
}

.lead-say p{font-size:15px; line-height:1.7; color:var(--muted); max-width:66ch; margin:0}
.lead-say p + p{margin-top:12px}

/* The one control this whole half of the page has. Underlined and
   unfilled: it reveals something already written rather than doing
   anything, and it takes itself away once it has. */
.showmore{
  margin-top:14px; padding:9px 15px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius:12px; background:none;
  font-family:"Lexend",sans-serif; font-size:14px; font-weight:550; color:var(--ink);
  transition:background .16s, border-color .16s;
}
.showmore:hover{background:color-mix(in srgb, var(--ink) 6%, transparent); border-color:var(--ink)}
.showmore:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px}

/* ---- what is aboard ----
   Chips before this, which is what a set of tags looks like and not what
   a set of facilities looks like. A bathroom and a paddleboard are things
   on a boat, and a list of things reads as a list: one per line, with a
   picture of it, in two columns. */
.aboard{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:14px 34px;
}
.aboard li{
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:15px; align-items:center;
  font-size:15px; line-height:1.35;
}
.aboard .ic{width:25px; height:25px; color:var(--ink); stroke-width:1.5}

/* ---- "learn more", without a page to go to ----
   Four lines of explanation do not deserve a modal and must not be a
   permanent paragraph: it is the answer to a question most readers do
   not have. Hover, focus or tap opens it; nothing else does. */
/* The note hangs off the ROW, not off the words "Learn more".
   Anchored to the link it was 300px wide starting wherever that link
   happened to fall, so on a 500px screen it hung 93px past the right edge
   of the document and took every section on the page sideways with it —
   an absolutely positioned box still counts towards scrollWidth. Spanning
   the row's own text column instead, it cannot be wider than the thing it
   belongs to, at any width, without a line of JavaScript measuring it. */
.lead-rows > li > div{position:relative}
.tipwrap{position:static; font-weight:400}
.tip-btn{
  border:none; background:none; padding:0 0 0 6px; cursor:pointer;
  font-family:"Lexend",sans-serif; font-size:13.5px; font-weight:450; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.tip-btn:hover{color:var(--ink)}
.tip-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:4px}
.tip{
  position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:30;
  max-width:340px; padding:13px 15px;
  border-radius:var(--r-img); border:var(--cardbd); background:var(--surface);
  box-shadow:0 3px 8px -4px rgba(var(--sh),.2), 0 26px 46px -26px rgba(var(--sh),.75);
  font-size:13px; line-height:1.5; color:var(--muted); font-weight:400;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
/* THE CLASS GOES ON THE NOTE, not on the wrapper around it.
   `.tipwrap.is-open .tip` reads as the obvious way to write this and it
   would not apply — the class was on the wrapper, the note was inside it,
   Element.matches() agreed, and the computed opacity stayed at 0 even
   with an identical rule injected last in its own stylesheet. Rather than
   keep pulling at that, the state is on the element the state is about,
   which is a descendant combinator fewer and one less thing between a
   press and a panel. Hover keeps the wrapper, where it belongs. */
.tipwrap:hover .tip,.tipwrap:focus-within .tip,
.tip.is-shown{opacity:1; visibility:visible; transform:none}

/* ---- the same note, hung off a mark ----
   The mark can be anywhere — beside a price, on a heading, at the end of
   a line — and the note is 300-odd pixels wide, so the one thing that
   must not happen is a note that opens off the side of the screen.

   THE NOTE IS NOT POSITIONED AGAINST THE GLYPH. It is positioned against
   the ROW the glyph is in, which is what the Learn more form of this
   already does and for the same reason: a box measured against a 19px
   circle can be wider than the thing it belongs to and hang off the
   page, and an absolutely positioned box still counts towards
   scrollWidth, so it takes every section on the page sideways with it.
   Measured against the row it cannot be wider than its own column at any
   width without a line of JavaScript. So .tipwrap stays out of the way
   (position:static) and each host below claims the positioning. */
.tipwrap.solo{position:static; display:inline-flex; vertical-align:middle}
.tip-i{
  display:inline-grid; place-items:center; width:19px; height:19px; padding:0;
  border:none; border-radius:50%; background:none; cursor:pointer;
  color:var(--faint); vertical-align:middle;
  transition:color .16s ease, background .16s ease;
}
.tip-i .ic{width:16px; height:16px; display:block}
.tipwrap.solo:hover .tip-i,.tip-i:hover{color:var(--ink)}
.tip-i:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.tipwrap.solo .tip b{color:var(--ink); font-weight:600}
/* The lead row's own column is already position:relative for the Learn
   more note, so the Super Admiral mark in there needs nothing: it spans
   the same column, the same way, and the two look alike because they
   are the same thing. */

/* Beside the total, where the row IS the card's width — so the note is
   the card's width and there is no side for it to hang off. */
.bk-price{position:relative}
.tipwrap.solo.bk-tip .tip{left:0; right:0; width:auto; max-width:none}
/* THE SAME MARK, ON THE CHARTER LINE, and it is drawn on a phone only —
   where the price it normally sits on is not drawn at all. The note is
   the same string from the same render; the media query below turns this
   one on as the head goes. */
.tipwrap.solo.bk-tip-line{display:none; margin-left:5px}

/* At the right-hand end of the reviews head, which runs the full width
   of the page. Anchored to that end and capped, so it opens back across
   the band rather than out past it. */
.rev-head{position:relative}
.rev-tip{margin-left:5px}
.tipwrap.solo.rev-tip .tip{left:auto; right:0; width:min(340px, 100%)}

/* On the owner heading, which spans its column. The longest of the four
   — the badge and the person, one after the other. */
.owner-say h3{position:relative}
.owner-tip{margin-left:7px}
.tipwrap.solo.owner-tip .tip{
  left:0; right:auto; width:min(400px, 100%); font-size:13.5px;
}

/* the lede and the long description, under the facts */
.detail-body .lede{margin-top:4px}
.boat-about{margin-top:16px; font-size:15px; line-height:1.7; color:var(--muted); max-width:66ch}

/* ---- where you board ----
   One pier, one pin, and enough chart around it to recognise the street.
   The results map is a different object and lives in search.css. */
.pier-map{
  position:relative; overflow:hidden; touch-action:pan-y;
  height:clamp(260px, 34vw, 380px);
  border-radius:var(--r-card);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow:var(--elev); background:var(--surface); cursor:grab;
}
.pier-map.dragging{cursor:grabbing}
.pier-map .map-plate{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ac) 13%, var(--surface)),
    color-mix(in srgb, var(--se) 17%, var(--surface)));
}
.pier-map .map-tiles{position:absolute; inset:0}
.pier-map .map-tiles img{position:absolute; display:block; top:0; left:0;
  user-select:none; -webkit-user-drag:none}
.pier-map .map-pins{position:absolute; inset:0; pointer-events:none}
/* The stack in the corner: expand over zoom. `.map-zoom` is absolutely
   positioned at right:12 top:12 by search.css, which is where the results
   map wants it and where this stack already is — so both landed on the
   same twelve pixels and the expand button sat under the plus. Inside
   this map the zoom pair is a plain item in the stack. */
.pier-map .map-tools{position:absolute; right:12px; top:12px; z-index:6; display:grid; gap:8px}
.pier-map .map-tools > *,
.pier-map .map-zoom{
  border-radius:12px; overflow:hidden;
  box-shadow:0 1px 3px -1px rgba(var(--sh),.3), 0 10px 22px -12px rgba(var(--sh),.8);
}
.pier-map .map-zoom{position:static; display:grid; gap:1px}
.pier-map .map-btn .ic{width:17px; height:17px}

/* Opened out. A 340px box says "this quay, not that one" and does not say
   which street to walk down, which is the other half of the question. */
.pier-map.is-big{
  position:fixed; inset:clamp(10px,2.4vw,28px); z-index:150;
  height:auto; border-radius:var(--r-card);
  box-shadow:0 30px 80px -30px rgba(var(--sh),.9);
}
html.map-open,html.map-open body{overflow:hidden}
/* the ground behind it, so the page does not read through the chart */
.pier-map.is-big::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:rgba(12,9,8,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.pier-map .map-note{
  position:absolute; right:0; bottom:0; margin:0; z-index:6;
  padding:5px 11px; font-size:11px; color:var(--muted);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border-top-left-radius:10px;
}
.pier-map .map-note a{color:inherit}

/* WHAT STANDS ON THE COORDINATE IS THE DOT, and nothing else.
   A 38px disc centred on the point covers forty metres of quay at this
   zoom and hides the one thing the section exists to show — which is how
   a pin that was already a few hundred metres out could look merely
   approximate rather than plainly wrong. So the mark is three parts on
   one anchor: a small ringed dot exactly on the coordinate, the disc
   floated above it clear of the ground, and the name below. The dot is
   what you read the map against; the disc is only what makes it
   findable. */
.pier-mark{position:absolute; transform:translate(-50%,-50%)}
.pier-dot{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%;
  background:var(--su); border:2.5px solid var(--surface);
  box-shadow:0 1px 3px rgba(var(--sh),.7);
}
.pier-pin{
  position:absolute; left:0; bottom:9px; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--surface);
  border:2.5px solid var(--surface);
  box-shadow:0 2px 6px -1px rgba(var(--sh),.55);
}
/* the stem, so the disc is visibly tethered to its dot rather than
   hovering near it */
.pier-pin::after{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  width:2px; height:7px; background:var(--ink);
}
.pier-pin .ic{width:17px; height:17px}
.pier-lab{
  position:absolute; left:0; top:12px; transform:translateX(-50%);
  padding:4px 10px; border-radius:var(--r-chip); white-space:nowrap;
  background:var(--surface); color:var(--ink);
  font-family:"Lexend",sans-serif; font-size:12px; font-weight:600;
  box-shadow:0 1px 3px -1px rgba(var(--sh),.3), 0 8px 18px -10px rgba(var(--sh),.8);
}

/* ---- what the people who went out said ----
   THE VERDICT LEADS. This band used to open with the score set at 26px
   in a corner, under two bar charts of equal weight — a five-row
   distribution beside five criterion bars, ten orange rules in one
   place, none of them the headline. The number a reader came for was the
   smallest thing in the section that was about it.
   So the score is the size of a score, the distribution has become the
   one sentence it was drawing, and there is exactly one set of bars on
   the band. */
.rev-head{
  position:relative;
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:8px clamp(16px,3vw,34px); padding-bottom:20px;
}
.rev-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--hairline);
}
.rev-score{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.rev-score b{
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 86;
  font-weight:700; font-size:clamp(40px,5.4vw,58px); letter-spacing:-.03em;
  line-height:.9;
}
/* The stars sit on the number's baseline, not on the middle of it: five
   glyphs floating beside a 58px figure read as decoration. */
.rev-score .rev-stars{gap:2px; position:relative; top:-2px}
.rev-score .rev-stars .ic{width:15px; height:15px; color:var(--ap)}
/* A withheld star is the outline and keeps the row five wide. It is the
   faint tone rather than a paler Aperol: two strengths of the same orange
   is the distinction this row already failed to make. */
.rev-score .rev-stars .ic.off{color:var(--faint)}
.rev-score > span{color:var(--muted); font-size:14.5px}

/* WHAT THE HISTOGRAM WAS SAYING, SAID.
   A reader takes one thing from a distribution — nearly all of them gave
   five — and five bars was a slow way to hand that over. The bars are
   still in the page, shut, for anybody who would rather count. */
.rev-spread{
  margin:0 0 0 auto; font-size:14px; color:var(--muted);
  display:flex; align-items:center; gap:2px;
}
.rev-spread b{color:var(--ink); font-weight:600}

/* The five criteria, with room to breathe now that they are the only
   chart in the section. TWO columns, and two exactly — auto-fit gave three
   across 1100px, and at a third of the row the bar is the 24% the shared
   .scores component allows it, which is 70 pixels of stub. A bar that
   short is a decoration beside a number, not a scale. Two columns is
   five rows down to three and leaves the bar something to be. */
.rev-scores{
  margin-top:24px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(30px,5vw,72px);
}
/* The label column is fixed rather than fluid so the bars in a column all
   start on the same pixel: ragged left ends turn five bars into five
   separate readings. The bar takes whatever is left. */
.rev-scores li{grid-template-columns:19px 108px minmax(60px,1fr) 34px}
.rev-scores .score-bar{height:6px}
@media (max-width:900px){
  .rev-scores{grid-template-columns:minmax(0,1fr)}
}

/* The spread, folded. Shut it is one quiet line; open it is the chart it
   always was, at the size a check deserves rather than a finding. */
.rev-dist{margin-top:22px; border-top:1px solid var(--line); padding-top:14px}
.rev-dist summary{
  cursor:pointer; list-style:none; width:max-content;
  font-size:13px; color:var(--muted); padding:2px 0;
  display:flex; align-items:center; gap:7px;
}
.rev-dist summary::-webkit-details-marker{display:none}
.rev-dist summary::after{
  content:""; width:7px; height:7px; flex:none;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s ease;
}
.rev-dist[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.rev-dist summary:hover{color:var(--ink)}
.rev-dist summary:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}
.rev-dist ul{
  list-style:none; margin:14px 0 2px; padding:0; display:grid; gap:6px;
  max-width:420px;
}
.rev-dist li{
  display:grid; grid-template-columns:10px minmax(0,1fr) 24px;
  gap:9px; align-items:center;
}
.rev-n{font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.rev-c{text-align:right}
.rev-dist .score-bar{height:5px}

.rev-list{
  list-style:none; margin:30px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:28px 44px;
}
.rev-who{display:flex; align-items:center; gap:11px}
.rev-who span{display:grid; gap:1px; min-width:0}
.rev-who b{font-size:15px; font-weight:600}
.rev-who i{font-style:normal; font-size:12.5px; color:var(--muted)}
.rev-meta{display:flex; align-items:center; gap:9px; margin:10px 0 6px; font-size:12.5px; color:var(--muted)}
.rev-stars{display:inline-flex; gap:1px}
.rev-stars .ic{width:12px; height:12px; color:var(--ink)}
.rev-stars .ic.off{color:var(--faint)}
.rev-note{margin:0; font-size:14.5px; line-height:1.6}

.rev-none{padding:22px 24px}
.rev-none p{margin:0 0 6px}
.rev-none .scores{margin-top:18px}

/* ---- things to know ----
   Everything normally learned on the day, said the day before instead.
   This is read the way a sign is read and not the way a page is, so it is
   three headings of three lines with the long version folded behind
   Learn more. Twelve bullets of prose, which is what it was, is a section
   that gets scrolled past by the people it was written for. */
.know{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  gap:30px 28px;
}
.know > section > .ic{width:26px; height:26px; color:var(--ink); stroke-width:1.5}
.know h4{font-size:15.5px; font-weight:600; margin:14px 0 8px}
.know p{margin:0; font-size:13.5px; line-height:1.65; color:var(--muted)}
.know details{margin-top:8px}
.know summary{
  cursor:pointer; list-style:none; display:inline-block;
  font-size:13.5px; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px;
}
.know summary::-webkit-details-marker{display:none}
.know summary:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:4px}
.know details[open] summary{margin-bottom:8px}
.know details p{font-size:13px}

/* ---- the order ----
   Kept to the four things a person decides here: the day, the hour, the
   party and whether to press it. Everything the old panel spelt out —
   every provision line, the deposit split, the two paragraphs under the
   buttons — is said once, further down the page or on the next screen. */
.bk{padding:22px 24px 24px}
.bk-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:7px}
.bk-price b{
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 86;
  font-weight:700; font-size:30px; letter-spacing:-.02em;
}
.bk-price s{color:var(--faint); font-size:18px}
.bk-price small{color:var(--muted); font-size:14px}
.bk-price i{
  flex-basis:100%; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px;
}

.bk-cells{
  display:grid; grid-template-columns:1fr 1fr; margin:18px 0 0;
  border:1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius:16px; overflow:hidden;
}
.bk-cell{
  display:grid; gap:2px; text-align:left; cursor:pointer; min-width:0;
  padding:11px 14px; border:none; background:none; font-family:"Lexend",sans-serif;
  color:var(--ink); transition:background .16s;
}
.bk-cell.wide{grid-column:1 / -1}
.bk-cell + .bk-cell{box-shadow:inset 1px 0 0 color-mix(in srgb, var(--ink) 13%, transparent)}
.bk-cell.wide{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 13%, transparent)}
.bk-cell:hover{background:color-mix(in srgb, var(--ink) 4%, transparent)}
.bk-cell:focus-visible{outline:2.5px solid var(--ac); outline-offset:-2px}
.bk-cell span{
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.bk-cell b{
  font-size:14.5px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.bk-lines{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px}
.bk-lines li{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:14px; color:var(--muted)}
.bk-lines li b{font-weight:500; color:var(--ink)}
.bk-lines li.promo,.bk-lines li.promo b{color:var(--su-text)}
.bk-lines li.tot{
  margin-top:5px; padding-top:12px; font-size:15.5px; color:var(--ink); font-weight:600;
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.bk-lines li.tot b{font-size:17px; font-weight:600}

.bk .btn,.bk .btn-ghost{width:100%; justify-content:center; margin-top:16px}
.bk-or{
  display:block; text-align:center; margin-top:10px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.bk-or + .btn-ghost{margin-top:8px}
.bk-fine{text-align:center; margin-top:14px}

/* ---- the owner, at length, at the foot of the page ----
   Near the top the owner is one line, because at that point the reader is
   deciding about a boat. Down here they have decided, and the remaining
   question is who they are about to hand a deposit to. */
.ownersec{
  position:relative;
  margin-top:clamp(48px,6vw,76px); padding-top:clamp(34px,4vw,46px);
}
.ownersec::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--hairline);
}
.ownersec h2{font-size:clamp(23px,2.8vw,30px); margin-bottom:24px}
.ownersec-body{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(26px,4vw,52px); align-items:start;
}
.owner-card{
  padding:26px 24px; display:grid; justify-items:center; text-align:center; gap:6px;
  max-width:360px;
}
.owner-face{width:96px; height:96px; font-size:30px}
.owner-card > b{
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 86;
  font-weight:700; font-size:26px; letter-spacing:-.02em; margin-top:10px;
}
.owner-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:var(--r-chip);
  background:var(--ap-wash); border:1px solid var(--ap-line); color:var(--ap-text);
  font-size:11.5px; font-weight:600;
}
.owner-badge .ic{width:13px; height:13px}
.owner-nums{
  list-style:none; margin:20px 0 0; padding:0; width:100%;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
}
.owner-nums li{display:grid; gap:2px; padding:0 6px}
.owner-nums li + li{box-shadow:inset 1px 0 0 color-mix(in srgb, var(--ink) 10%, transparent)}
.owner-nums b{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:19px; font-weight:600; font-variant-numeric:tabular-nums;
}
.owner-nums b .ic{width:14px; height:14px; color:var(--ap)}
.owner-nums span{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600}

.owner-say h3{font-size:20px; margin:0 0 10px}
.owner-say h4{font-size:16px; margin:26px 0 8px}
.owner-say p{font-size:14.5px; line-height:1.7; color:var(--muted); margin:0 0 12px; max-width:64ch}
.owner-note{
  display:flex; gap:11px; align-items:flex-start; margin:18px 0 0 !important;
  padding:14px 16px; border-radius:var(--r-img);
  background:color-mix(in srgb, var(--tint2) 46%, var(--surface));
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  color:var(--muted) !important;
}
.owner-note .ic{width:19px; height:19px; flex:none; margin-top:2px; color:var(--ink)}
.owner-note b{color:var(--ink)}
.owner-facts{font-size:14px; line-height:1.9}
.owner-say .btn-row{margin-top:18px}
.owner-say .btn-ghost .ic{width:16px; height:16px; margin-right:7px}
.owner-fine{
  display:flex; gap:9px; align-items:flex-start;
  margin-top:22px !important; padding-top:16px;
  border-top:1px solid var(--line); font-size:12.5px !important; line-height:1.55 !important;
}
.owner-fine .ic{width:16px; height:16px; flex:none; margin-top:1px; color:var(--ap)}

@media (max-width:900px){
  .ownersec-body{grid-template-columns:1fr}
  .owner-card{max-width:none; justify-items:start; text-align:left}
  .owner-nums{max-width:340px}
  .owner-nums li:first-child{padding-left:0}
}
@media (max-width:560px){
  .boat-top{align-items:flex-start}
  .boat-acts{margin-left:-13px}
  .fact-trio{padding:14px 2px}
  .bk-cells{grid-template-columns:1fr}
  .bk-cell + .bk-cell{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 13%, transparent)}
}

/* =====================================================================
   THE MENU, AS TWO COLUMNS
   Drinks down the left, food down the right, each scrolling on its own.
   The row of course tabs this replaced made the two halves of a day
   mutually exclusive: to weigh a plate against a drink you had to leave
   whichever one you were looking at. Side by side both lists are on the
   screen at once, and neither moves while the other is read.
   ===================================================================== */

/* Says where it will go, not where it is. */
.view-toggle{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:7px 14px 7px 11px; border-radius:var(--r-btn);
  border:1.5px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  font-family:"Lexend",sans-serif; font-size:13.5px; font-weight:550; color:var(--ink);
  transition:border-color .18s, background .18s;
}
.view-toggle:hover{border-color:var(--ac); background:var(--surface)}
.view-toggle:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}
.view-toggle .vt-ic{display:grid; place-items:center}
.view-toggle .ic{width:17px; height:17px; color:var(--muted)}
.view-toggle:hover .ic{color:var(--ink)}
.menu-courses:has(.view-toggle){align-items:center; justify-content:flex-end}

.menu-split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.menu-split.is-single,.menu-split.is-one{grid-template-columns:minmax(0,1fr)}
/* Merged, the second column has nothing left in it and its heading would
   be a title over an empty box. */
.menu-split.is-one .mcol + .mcol{display:none}

.mcol{
  display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0;
  border:var(--cardbd); border-radius:var(--r-card);
  background:color-mix(in srgb, var(--surface) 52%, transparent);
  overflow:hidden;
}
.mcol-head{
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background:color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.mcol-head h2{font-size:18px; margin:0}
.mcol-head > b{
  font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--muted);
}
.mcol-head .course-by{margin-left:auto; white-space:nowrap}
.menu-split.is-one .mcol-head h2::after{content:" and drink"}

/* THE SCROLL. Each column takes what is left of the window under the
   header, so the two of them line up and the page behind stays still.
   overscroll-behavior keeps a flick at the end of one list from carrying
   on into the page underneath it. */
.mcol-scroll{
  overflow-y:auto; overscroll-behavior:contain;
  max-height:calc(100vh - var(--header-h, 76px) - 150px);
  min-height:280px;
  padding:12px; display:grid; gap:10px; align-content:start;
  scrollbar-width:thin;
}
.menu-split.is-one .mcol-scroll{max-height:none; overflow:visible}
.mcol-scroll::-webkit-scrollbar{width:10px}
.mcol-scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius:999px; border:3px solid transparent; background-clip:padding-box;
}
.mcol-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--ink) 30%, transparent);
  background-clip:padding-box; border:3px solid transparent}

/* ---- one plate, small ----
   A thumbnail, the name, whose it is, the note, the price and the
   control, on one line of the eye. The card this replaced was a 4:3
   photograph with the words underneath, three across — thirteen of those
   is a page and a half of scrolling to read four sentences. */
.mitem{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:11px;
  align-items:center; padding:9px 11px 9px 9px; border-radius:var(--r-img);
  cursor:pointer;
  background:var(--cardbg); border:var(--cardbd);
  transition:border-color .18s, background .18s;
}
.mitem:hover{border-color:color-mix(in srgb, var(--ink) 22%, transparent)}
.mitem.on{
  border-color:color-mix(in srgb, var(--su) 55%, transparent);
  background:color-mix(in srgb, var(--tint) 50%, transparent);
}
.mitem.is-draft{border-style:dashed}
.mitem-pic{
  width:52px; height:52px; border-radius:11px; padding:0; border:0; cursor:inherit;
  background:color-mix(in srgb, var(--tint2) 55%, var(--bg)); overflow:hidden;
}
.mitem-pic img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.mitem:hover .mitem-pic img{transform:scale(1.06)}
.mitem-pic:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}
.mitem-pic .plate,.mitem-pic > span{display:grid; place-items:center; width:100%; height:100%}
.mitem-pic .ic{width:24px; height:24px; max-width:24px; max-height:24px}

.mitem-t{min-width:0; display:grid; gap:2px; align-content:start}
.mitem-line{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.mitem-by{margin:2px 0 1px}
.mitem-line b{font-size:14.5px; font-weight:600; line-height:1.25}
.mitem-price{font-size:14.5px; font-weight:600; white-space:nowrap}
.mitem-price em{font-style:normal; font-size:10.5px; color:var(--muted); margin-left:2px}
.mitem-t > i{
  font-style:normal; font-size:12px; color:var(--muted); line-height:1.4;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* WHOSE IT IS, on every line. A card that names the counter the ceviche
   came off and then says nothing above the beer does not read as "we buy
   that one" — it reads as a missing field. So the drinks and the extras
   carry our own name, which is the true answer. */
.mitem-by{display:flex; flex-wrap:wrap; align-items:center; gap:5px}
.by-tag{
  font-size:10.5px; font-weight:600; letter-spacing:.01em;
  padding:2px 8px; border-radius:999px; text-decoration:none;
  background:var(--ap-wash); border:1px solid var(--ap-line); color:var(--ap-text);
}
a.by-tag:hover{background:var(--ap-line)}
.by-tag.self{
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  border-color:color-mix(in srgb, var(--ink) 12%, transparent); color:var(--muted);
}
.by-serves{
  display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:600; color:var(--muted);
}
.by-serves .ic{width:12px; height:12px}
.by-draft{
  font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; color:var(--muted);
  border:1px dashed color-mix(in srgb, var(--ink) 26%, transparent);
}

/* The control is at the END of the row, not under the words. Under them
   it added forty pixels to every card and turned a list of thirteen
   things into a page again — which is the thing this layout exists to
   stop. Beside them it costs nothing but the width it uses. */
.mitem .amen-add{margin-top:0; flex:none; cursor:default}
.mitem .stepper{padding:2px; width:auto}
.mitem .stepper button{width:24px; height:24px; font-size:15px}
.mitem .amen-add-btn{flex:none; padding:7px 15px; font-size:12.5px}
.amen-add-btn.mini{
  width:34px; height:34px; padding:0; border-radius:50%;
  display:grid; place-items:center; font-size:20px; line-height:1; font-weight:400;
}
/* arriving from the beer picker in the search bar */
.mitem.is-called{animation:mitem-call 1.6s ease 1}
@keyframes mitem-call{
  0%,100%{box-shadow:0 0 0 0 transparent}
  30%{box-shadow:0 0 0 4px color-mix(in srgb, var(--su) 45%, transparent)}
}

/* ---- the cart, once the boat is in it ---- */
.basket-boat{
  display:flex; align-items:center; gap:11px; margin:14px 0 12px;
  padding-bottom:13px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.basket-boat-art{width:46px; height:46px; border-radius:12px; flex:none; overflow:hidden}
.basket-boat-art img{width:100%; height:100%; object-fit:cover}
.basket-boat b{display:block; font-size:14.5px; font-weight:600}
.basket-boat i{display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:1px}
.basket-fixed{margin-bottom:14px}
.basket-fixed li.promo,.basket-fixed li.promo b{color:var(--su-text)}
.basket-head{
  margin:0 0 8px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}

@media (max-width:1080px){
  /* Two columns of 58px thumbnails and two lines of type is the point at
     which neither list is readable. One mixed list, and the toggle is
     still there for anyone who disagrees. */
  .menu-split{grid-template-columns:minmax(0,1fr)}
  .menu-split .mcol + .mcol{display:grid}
  .mcol-scroll{max-height:none; overflow:visible}
}
@media (max-width:560px){
  .view-toggle{margin-left:0}
  .mitem{grid-template-columns:46px minmax(0,1fr) auto; gap:9px}
  .mitem-pic{width:46px; height:46px}
  .mitem-t > i{display:none}          /* the note is in the sheet the picture opens */
}

/* =====================================================================
   WHAT THE PRICE INCLUDES, THE QUESTIONS, AND THE SEA ON THE DAY
   ===================================================================== */

/* A list, because "all inclusive" is a phrase nobody on this coast
   believes and a list is the only form of it that gets believed. */
.incl{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.incl li{
  display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start;
  font-size:14.5px; line-height:1.5;
}
.incl .ic{width:18px; height:18px; color:var(--su-text); margin-top:2px}

/* The questions use .faq from magik.css, which was written for a page
   that never shipped and is exactly this: a card per question with a +
   that becomes an ×. Only the width is this page's business — the column
   it sits in is narrower than the 840 that component assumes. */
/* .faq carries max-width:840px from magik.css, written for a prose page.
   The questions live outside the two-column grid now, so the cap has to
   come off there as well as here or the second column stops two thirds of
   the way across. */
.detail-body .faq,.detail-rest .faq{max-width:none}

/* ---- the way out of the chart ---- */
.pier-out{margin-top:12px}
.pier-out .ic{width:15px; height:15px; margin-right:7px; color:inherit}

/* ---- the sea on the day being priced ----
   Inside the order panel, above the cells, because a red day is the one
   thing on that card that should stop somebody pressing the button.

   AND IT IS ONE ROW WHEN THERE IS NOTHING TO SAY. It used to be a
   filled card with an eyebrow, a verdict, a sentence and a "See the
   week" link — 130 pixels of weather in a panel that exists to show a
   price and a button, nine days out of ten to report that conditions
   are ordinary. Now it is a rule with a glyph, the flag, the height and
   a chevron, and app.js adds the sentence back only on an amber or red
   day. No fill either: a tinted box is how this card says "look here",
   and a fine day has not earned that. */
.bk-sea{
  display:grid; grid-template-columns:16px minmax(0,1fr) 12px;
  align-items:center; gap:2px 9px;
  margin-top:14px; padding:9px 2px 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  color:inherit; text-decoration:none;
  transition:color .16s ease;
}
.bk-sea[hidden]{display:none}
.bk-sea .ic{width:16px; height:16px; color:var(--s1-ink)}
.bk-sea b{font-size:12.5px; font-weight:600; color:var(--ink); min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bk-sea-go{display:grid; place-items:center; color:var(--muted)}
.bk-sea-go .ic{width:12px; height:12px; color:inherit; transition:transform .16s ease}
.bk-sea:hover .bk-sea-go{color:var(--ink)}
.bk-sea:hover .bk-sea-go .ic{transform:translateX(2px)}
.bk-sea:focus-visible{outline:2.5px solid var(--ac); outline-offset:3px; border-radius:8px}

/* THE TONE WAS NOT BEING DRAWN AT ALL. app.js has always written
   `is-ok`, `is-warn` or `is-bad` onto this element and nothing here ever
   read them, so a red day and a green one were the same teal box — on
   the one control whose whole reason for existing is telling those two
   apart. The ramp on :root is the same green, amber and red the header
   panel and the forecast page use. */
.bk-sea.is-warn .ic{color:var(--s2-ink)}
.bk-sea.is-bad .ic{color:var(--s4-ink)}
.bk-sea.is-bad b{color:var(--s4-ink)}

/* The sentence, on the days that have one. It spans under the row
   rather than beside it: a second line of prose in a 16px column is a
   word a line. */
.bk-sea i{
  grid-column:2 / -1; display:block; font-style:normal;
  font-size:11.5px; line-height:1.45; color:var(--muted); margin-top:3px;
}
.bk-sea.is-warn i{color:var(--s2-ink)}
.bk-sea.is-bad i{color:var(--s4-ink)}
/* Amber and red get the wash back, because those are the days this
   block was put on the card for. */
.bk-sea.is-warn,.bk-sea.is-bad{
  padding:10px 12px; border-top:none; border-radius:var(--r-img);
}
.bk-sea.is-warn{
  background:var(--s2-wash); border:1px solid color-mix(in srgb, var(--s2) 40%, transparent);
}
.bk-sea.is-bad{
  background:var(--s4-wash); border:1px solid color-mix(in srgb, var(--s4) 36%, transparent);
}

.bk-sea.is-v3,.bk-sea.is-warn{
  background:color-mix(in srgb, var(--wa) 17%, var(--surface));
  border-color:color-mix(in srgb, var(--wa) 46%, transparent);
}
.bk-sea.is-v3 .ic,.bk-sea.is-warn .ic{color:#9A6B00}
.bk-sea.is-v4,.bk-sea.is-bad{
  background:color-mix(in srgb, var(--da) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--da) 44%, transparent);
}
.bk-sea.is-v4 .ic,.bk-sea.is-bad .ic{color:var(--da)}
.bk-sea.is-v4 b,.bk-sea.is-bad b{color:var(--da)}

/* ---- the sign-in card's two additions ---- */
.oauth-unset{
  display:flex; gap:9px; align-items:flex-start; margin:12px 0 0;
  padding:11px 13px; border-radius:var(--r-img);
  background:color-mix(in srgb, var(--wa) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--wa) 34%, transparent);
}
.oauth-unset .ic{width:16px; height:16px; flex:none; margin-top:1px; color:#9A6B00}
.oauth-btn.is-unset{opacity:.62}
.auth-guest{width:100%; justify-content:center}
.auth-guest .ic{width:17px; height:17px; margin-right:8px; color:inherit}
.auth-guest-note{margin-top:10px; text-align:center; max-width:44ch; margin-inline:auto}


/* ---- the page below the chart ----
   Full width. Everything above is read against the price and belongs
   beside it; the reviews, the questions and what is included are not,
   and inside the 1.35fr column they were being squeezed by an order
   panel that had nothing left to say. */
.detail-rest{margin-top:clamp(30px,4vw,44px)}

/* ---- ROOM BETWEEN THE SECTIONS ----
   Four of them run down here — the reviews, the things to know, what the
   price includes, the questions — and they were separated by the 30px
   .boat-h carries by default. At that distance the last line of one
   section and the heading of the next are closer to each other than the
   heading is to its own first row, so the eye reads one continuous column
   of small grey type: the page had no sections in it, only headings.
   A section break is worth as much space as it takes to be a break, and a
   hairline to say it is deliberate. The first one takes neither, because
   there is nothing above it to be separated from. */
.detail-rest > .boat-h{
  position:relative;
  margin:clamp(54px,6.5vw,88px) 0 20px;
  padding-top:clamp(28px,3.4vw,40px);
}
/* The brand's own hairline — coral out of nothing, the caustic blue of
   the water through the middle, coral and nothing again. --hairline, in
   magik.css, where the reasoning for it is written down. */
.detail-rest > .boat-h::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--hairline);
}
.detail-rest > .boat-h:first-child{margin-top:0; padding-top:0}
.detail-rest > .boat-h:first-child::before{content:none}
.detail-rest .rev-list{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.detail-rest .know{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.detail-rest .incl{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:10px 34px}

/* =====================================================================
   LESS OF SOMEBODY ELSE'S LISTING PAGE
   Three borrowed shapes, replaced with ones this site already owns.
   ===================================================================== */

/* 1. THE NAME ON THE PHOTOGRAPH. A mosaic under a plain heading is the
      shape every listing site uses. The caption over the picture is what
      the home page's bands and rails already do, in the display face,
      and it puts the boat back inside the frame. */
/* THE CAPTION IS A CORNER, NOT A BAR.
   Two goes at this were wrong in the same way. Across the whole block the
   wash had to cross two 8px gutters of bare page and arrived at the small
   frames as floating bars of gradient. Cut to 62% it stopped in the
   middle of nothing with a hard vertical edge down the photograph, which
   is worse — a seam where there is no seam.

   It is the width of the large frame exactly — the grid is 2fr 1fr 1fr
   with an 8px gap, so that frame is 50% minus half a gutter — and the
   wash fades out horizontally before it gets there, so there is no edge
   to see at all. The type sits in the corner it darkens. */
.gal-cap-boat{
  position:absolute; left:0; bottom:0; z-index:3;
  width:calc(50% - 4px); max-width:calc(100% - 16px);
  padding:64px 26px 22px; color:#fff; pointer-events:none;
  border-bottom-left-radius:var(--r-card);
  background:linear-gradient(to top,
    rgba(18,14,12,.72) 0%, rgba(18,14,12,.44) 44%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, #000 62%, transparent 100%);
  mask-image:linear-gradient(to right, #000 62%, transparent 100%);
}
.gal-mosaic.one .gal-cap-boat,
.gal-mosaic.thin .gal-cap-boat{
  width:min(70%, 560px);
  -webkit-mask-image:linear-gradient(to right, #000 70%, transparent 100%);
  mask-image:linear-gradient(to right, #000 70%, transparent 100%);
}

/* NO SHADOW, AND THE NAME IS WHITE.
   It was set in --ink with a drop shadow under it — and it was ink by
   accident: the caption's own `color:#fff` is inherited, and the base
   h1 rule sets a colour of its own, which beats inheritance. So the
   boat's name was near-black type on a photograph of water, kept legible
   by a shadow that was there to hold up a colour nobody chose.
   White needs no shadow, because the scrim under it is already doing
   that job — a gradient this dark is what the type is standing on. Two
   ways of holding the same letters up is one too many, and the shadow
   was the one that showed. */
.gal-cap-boat h1{
  display:block; color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;
  font-variation-settings:"wdth" 86; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(24px,3.1vw,38px); line-height:1.02;
}
.gal-cap-boat i{
  font-style:normal; font-size:13px; display:flex; align-items:center; gap:5px;
  margin-top:7px; color:rgba(255,255,255,.9);
}
.gal-cap-boat i .ic{width:14px; height:14px; color:var(--wa)}

.gal-mosaic{position:relative}
@media (max-width:560px){
  .gal-cap-boat{width:auto; right:0; padding:48px 18px 15px;
    -webkit-mask-image:none; mask-image:none;
    border-bottom-right-radius:var(--r-card)}
}

/* 2. The lead leads with an eyebrow, which is this site's way of saying
      where something is before saying what it is. */
.lead .eyebrow{margin-bottom:7px}
.lead h2{font-size:clamp(24px,3vw,32px)}

/* 3. The reviews band is written once, up with the component — it is one
      column wide at every width now, so there is nothing for the tail to
      widen and nothing to undo. What used to be here was a second, fuller
      definition of a two-chart grid that no longer exists. */

/* 4. The questions read across, not down. Eight stacked cards is a
      column of doors; two abreast is a page you can take in. */
/* Two abreast, not three. At 340 the tail's 1100px fits three columns
   and a question as short as "Do I need a licence, or any experience?"
   wrapped in every one of them — a row of two-line doors reads worse
   than a column of one-line ones, which defeats the point of moving
   them sideways. */
.detail-rest .faq{
  /* `min(390px,100%)`, not a bare 390px. A minmax minimum is a floor
     rather than a preference: auto-fit drops to one column when 390 will
     not fit twice, and then makes that one column 390px WIDE — which on
     a 390px phone is the content column (350px) plus 40px of page hanging
     off the right edge. Every question on this page pushed the whole
     document sideways, so the boat page was the one page on the site you
     could scroll horizontally. Capping the minimum at 100% lets the last
     column shrink to the room it actually has. */
  grid-template-columns:repeat(auto-fit,minmax(min(390px,100%),1fr));
  align-items:start; gap:12px 14px;
}
.detail-rest .faq details{padding:2px 20px}
.detail-rest .faq summary{font-size:15.5px; padding:17px 30px 17px 0}
.detail-rest .faq summary::after{font-size:21px}
.detail-rest .faq .answer{font-size:14.5px; padding-bottom:18px}

/* the three newest reviews, and the rest on request */
.rev-list .is-extra{display:none}
.rev-list + .showmore{margin-top:20px}


/* ---- what a finger can hit: the parts this sheet owns ----------------
   See WHAT A FINGER CAN ACTUALLY HIT at the foot of magik.css for why
   this is here and not there. */
@media (hover:none) and (pointer:coarse){
  /* One line of the menu is an item, a price and a plus, and the plus
     was 34px hard up against the price. */
  .amen-add-btn.mini{min-width:44px; min-height:44px}
  /* Share and Save over the gallery, "Show all 13 photos", the
     one list / by course switch, "Show more". All in the middle thirties
     and all of them the only way to do the thing they do. */
  .act-btn,.view-toggle,.showmore,.map-btn{min-height:44px}
  /* ---- and these grow a hit area WITHOUT growing themselves ----
     The rules above give a control more box, which is right when the
     control is a row with space around it. It is wrong for everything
     below, and it broke all of them: a by-line tag is a coloured pill
     18px tall and `min-height:44px` made it a 44px lozenge; "with La
     Pescaderia" is a text node, a <b> and an arrow, and `inline-flex`
     turned the whitespace between them into flex-item separation and
     printed `withLa Pescaderia`; a 19px round glyph button became a 44px
     one. Every one of those is a visual change, and none of them was
     asked for -- the ask was that a finger can land on the thing.
     So the box stays exactly as it was drawn and an invisible one is
     centred over it. It is `::after` on each, which is free on all of
     them, and it is 44px tall whatever the type does. */
  .by-tag,.course-by,.tip-btn,.tip-i,.know summary,.house-line a{position:relative}
  .by-tag::after,.course-by::after,.tip-btn::after,.tip-i::after,
  .know summary::after,.house-line a::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
  /* The two round glyph buttons are narrower than a finger as well as
     shorter, so theirs reaches out sideways too. */
  .tip-i::after{left:50%; right:auto; width:44px; translate:-50% 0}
  /* The sea reading on a booking, which is a link to the forecast. */
  .bk-sea{min-height:44px}
  /* The boat page's own chart controls, and the map's zoom pair. */
  .pier-map .map-btn{min-width:44px}
  /* "Learn more" under each of the things to know about the day, and the
     kitchen's own handle on its way to Instagram. Both are underlined
     words inside a paragraph, so both are in the list above rather than
     here: an underline that runs along the bottom of a 44px box is not
     an underline any more. */
}


/* =====================================================================
   THE ORDER'S ACTION, ON THE SCREEN RATHER THAN IN THE CARD

   On a phone the booking card is a block in the page like any other, so
   the number and the button were four hundred pixels down it: you read
   the boat, you read the reviews, and the one thing you came to press
   was wherever the scroll happened to have left it. The card also puts
   five other rows between the total and the button -- the sea, the three
   cells, the bill -- so by the time you reach Book the figure you are
   agreeing to is off the top of the screen.

   So the action leaves the card and sits on the glass: the total, the
   day and the party on the left, the button on the right, always there.
   It is the same row of markup either way -- `.bk-act` is a plain flex
   row inside the card at any width that has room for the card, and the
   summary beside the button is only drawn down here, where the number it
   repeats has scrolled away.
   ===================================================================== */
@media (max-width:760px){
  /* AND THE CARD HAS TO LET GO OF IT FIRST.
     A filtered element is the containing block for everything fixed
     inside it, and this card carries a backdrop-filter -- so `fixed`
     here was measured against the CARD, and the bar sat three and a half
     thousand pixels down the page where the card's own bottom is. It
     looked like the position had simply not applied.
     The blur is what the card is over the water on the pages that have
     water behind it. This one is over flat sand at this width, so it is
     buying nothing here and it is in the way, and it goes -- for this
     card, at this width, only. */
  .detail-book > .bk{backdrop-filter:none; -webkit-backdrop-filter:none}

  /* THE CARD STOPS SAYING WHAT THE BAR IS ALREADY SAYING.
     Pinned across the bottom of the screen, at every scroll position,
     the bar carries the total, the day, the party and the button. The
     head of this card carried the same total in 30px type, the cells
     carried the same day and the same party, and the foot of the bill
     carried the total a third time — so a phone showed one number three
     times in one screen and the day twice, and none of the repeats was
     the one being pressed.
     WHAT IS LEFT IS WHAT THE BAR CANNOT SAY: the sea on the day being
     priced, what the charter costs before the owner's promotion comes
     off it, the promotion itself, and the two things you can do that are
     not Book. The bill is the reason the total is what it is, which is
     the one part of this card a phone still has to be able to read.
     THE PICKERS GO WITH THE HEAD and are not replaced. They were three
     buttons that open the search bar's own panels — the bar is above
     them on the page and its docked pill is in the header the moment it
     is not, so every one of those panels is still one press away from
     wherever the page is standing. A second set of doors onto the same
     three sheets is the same redundancy in a different shape.
     Not `visibility` and not opacity: hidden, out of the flow, and out
     of the tab order — three buttons a screen reader still reaches would
     be worse than the ones a phone can see. */
  .bk-price,
  .bk-cells,
  .bk-lines li.tot{display:none}
  /* The note that hung off the price hangs off the charter line instead,
     and the line becomes the box it is measured against, exactly as
     .bk-price was — so it spans the card and cannot open off the edge of
     a 390px screen. */
  .bk-lines li{position:relative}
  .tipwrap.solo.bk-tip-line{display:inline-flex}
  /* AND THE TOP OF THE CARD IS TIDIED AFTER THEM. The sea row wore a
     hairline and 14px of air because it came after the price; first in
     the card, that rule is a line drawn across nothing. It carries its
     air underneath it instead, and the bill — first when the forecast
     has nothing to say for that day — starts at the card's own padding. */
  .bk-sea{margin:0 0 14px; padding:0; border-top:none}
  .bk-lines{margin-top:0}

  .bk-act{
    position:fixed; left:0; right:0; bottom:0; z-index:59;
    display:flex; align-items:center; gap:14px;
    margin:0; padding:11px var(--gut);
    padding-bottom:calc(11px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-top:1px solid color-mix(in srgb, var(--ink) 11%, transparent);
    box-shadow:0 -3px 12px -7px rgba(var(--sh),.35);
  }
  /* ---- AND WHAT THE BUTTON LEFT BEHIND HAS TO BE TIDIED ----
     Lifting Book out of the card left two rows standing where it was.
     "OR" is a word that joins two buttons, and the two buttons are no
     longer next to each other -- so under the bill there was a total,
     then the word OR on its own, then a ghost button, which reads as a
     sentence with its subject removed. It goes.
     And the fine print goes back up. "Nothing is charged until the owner
     answers" is about the BOOK button; sitting last it had become a note
     about Contact the owner, which is the one action on this card it is
     not about. Above the ghost button it is against the bill it belongs
     to. A flex column, because reordering two rows is the whole job and
     the card is otherwise a plain block. */
  .detail-book > .bk{display:flex; flex-direction:column}
  .detail-book > .bk > *{order:0}
  .bk-or{display:none}
  .bk-fine{order:1; margin-top:16px}
  .detail-book > .bk > .btn-ghost{order:2; margin-top:14px}

  .bk-act-sum{display:grid; gap:1px; min-width:0; flex:1 1 auto}
  .bk-act-sum b{
    font-family:"Bricolage Grotesque",sans-serif;
    font-size:20px; font-weight:700; line-height:1.15; color:var(--ink);
  }
  .bk-act-sum i{
    font-style:normal; font-size:12.5px; color:var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Buttons go full width on a phone; not this one, it shares a row --
     the same exception .fit-bar makes, for the same reason. */
  .bk-act .btn{width:auto; flex:none; min-height:48px; padding-inline:30px}

  /* AND THE PAGE ENDS ABOVE IT. A fixed bar is out of the flow, so
     without this the last inch of the footer is printed underneath it
     and the bottom row of links cannot be reached.
     `:has()` because this is a runtime fact rather than a build-time
     one -- the bar exists on whichever page rendered an order, and the
     build has no way to know that. It is one selector on the body,
     matched once, not a rule that has to be re-evaluated on every
     paint, which is the case the note in build.py is about. */
  /* 104, not 86: the bar measures 89 and the first number cleared the
     footer's last row by three pixels, which is not clearance, it is a
     coincidence that would end the first time the button or the summary
     grew a line. The rest is air. */
  body:has(.bk-act) .site-footer{
    padding-bottom:calc(104px + env(safe-area-inset-bottom));
  }
}

/* Off a phone the summary is not drawn: the price is at the head of the
   card, eight rows above the button and on screen with it. */
@media (min-width:761px){
  .bk-act-sum{display:none}
}