/**
 * SY Booking Calendar — front-end styles.
 *
 * Scoped under .sybc so a theme's global rules do not leak in and vice versa.
 * Colours are exposed as custom properties: override them on .sybc in your
 * theme to match the site without touching this file.
 */

.sybc {
	--sybc-free: #ffffff;
	--sybc-free-border: #d4d8dd;
	--sybc-free-text: #1c2024;
	--sybc-busy: #d32f2f;
	--sybc-busy-text: #ffffff;
	--sybc-partial: #f5a524;
	--sybc-partial-text: #3d2600;
	--sybc-turn: #6f93be;
	--sybc-turn-text: #ffffff;
	--sybc-pick: #2f9e58;
	--sybc-pick-text: #ffffff;
	--sybc-hover: #d8f0e0;
	--sybc-out: #f4f5f6;
	--sybc-out-text: #a9afb6;
	--sybc-ink: #1c2024;
	--sybc-muted: #62696f;
	--sybc-line: #e3e6e9;
	--sybc-accent: #1c2024;
	--sybc-radius: 8px;

	color: var(--sybc-ink);
	max-width: 62rem;
	line-height: 1.5;
}

.sybc *,
.sybc *::before,
.sybc *::after {
	box-sizing: border-box;
}

.sybc__title {
	margin: 0 0 1rem;
}

/*
 * `hidden` means hidden, whatever display a rule below gives the element.
 *
 * The browser's own [hidden] rule is the weakest there is, so any
 * `display: grid` or `display: flex` beats it. The enquiry card and the deck's
 * arrows both have one, and in the stacked layout both were drawn permanently:
 * "let us plan this one with you" beside a working pay button, and card arrows
 * with no cards. The deck hid the fault by hiding every card but one. Found by
 * the smoke test.
 */
.sybc [hidden] {
	display: none !important;
}

.sybc__step {
	border-top: 1px solid var(--sybc-line);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

.sybc__step:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.sybc__stephead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.sybc__steptitle {
	margin: 0;
	font-size: 1.05rem;
}

.sybc__prompt {
	margin: 0;
	color: var(--sybc-muted);
	font-size: 0.9rem;
}

/* ---------- notices ---------- */

.sybc__notice {
	padding: 0.75rem 1rem;
	border-radius: var(--sybc-radius);
	margin-bottom: 1rem;
	font-size: 0.925rem;
}

.sybc__notice--error {
	background: #fdecec;
	color: #8c1c20;
	border: 1px solid #f5c2c4;
}

.sybc__notice--info {
	background: #eef4fb;
	color: #1f4b78;
	border: 1px solid #cfe0f2;
}

/* ---------- calendar ---------- */

.sybc__calnav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

/* The booking calendar's arrows sit under the legend rather than above the
   grid, centred. Its own modifier, because the overview calendar shares the
   base class and keeps its arrows where they are.

   Centring is justify-content on a full-width flex row, so it holds at every
   width without a breakpoint — nothing here is measured against the page. */
.sybc__calnav--under {
	justify-content: center;
	margin-top: 0.9rem;
	margin-bottom: 0;
}

.sybc__navbtn {
	min-width: 2.5rem;
	min-height: 2.5rem;
	border: 1px solid var(--sybc-free-border);
	background: var(--sybc-free);
	border-radius: var(--sybc-radius);
	cursor: pointer;
	font-size: 1rem;
	color: var(--sybc-ink);
}

.sybc__navbtn:hover:not(:disabled) {
	border-color: var(--sybc-accent);
}

.sybc__navbtn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.sybc__months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.5rem;
}

/* Month changes slide in the direction of travel. The movement is small and
   the pair of animations together is under a third of a second — this sits
   between a guest and the dates they are reading.

   No overflow clipping here on purpose: the holiday bubble reaches above the
   top row, and hiding the overflow to tidy the slide would cut it off. */
.sybc__months--out-next {
	animation: sybc-months-out-next var(--sybc-anim, 130ms) ease-in both;
}

.sybc__months--out-prev {
	animation: sybc-months-out-prev var(--sybc-anim, 130ms) ease-in both;
}

.sybc__months--in-next {
	animation: sybc-months-in-next var(--sybc-anim, 170ms) ease-out both;
}

.sybc__months--in-prev {
	animation: sybc-months-in-prev var(--sybc-anim, 170ms) ease-out both;
}

@keyframes sybc-months-out-next {
	to { opacity: 0; transform: translateX(-5%); }
}

@keyframes sybc-months-out-prev {
	to { opacity: 0; transform: translateX(5%); }
}

@keyframes sybc-months-in-next {
	from { opacity: 0; transform: translateX(5%); }
}

@keyframes sybc-months-in-prev {
	from { opacity: 0; transform: translateX(-5%); }
}

/* The script already skips the slide for anyone asking for less movement; this
   is here so a stuck class can never leave the grid mid-animation either. */
@media (prefers-reduced-motion: reduce) {
	.sybc__months--out-next,
	.sybc__months--out-prev,
	.sybc__months--in-next,
	.sybc__months--in-prev {
		animation: none;
	}
}

.sybc__monthname {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
}

.sybc__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.sybc__weekday {
	text-align: center;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sybc-muted);
	padding-bottom: 0.35rem;
}

.sybc__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	aspect-ratio: 1 / 1;
	min-height: 2.75rem;
	padding: 0;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	color: var(--sybc-free-text);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.sybc__day--blank {
	border: 0;
	background: none;
	cursor: default;
	pointer-events: none;
}

.sybc__daynum {
	font-weight: 600;
	line-height: 1;
}

.sybc__dayprice {
	font-size: 0.65rem;
	line-height: 1;
	color: var(--sybc-muted);
}

.sybc__day--free:hover:not(:disabled) {
	border-color: var(--sybc-pick);
	background: var(--sybc-hover);
}

.sybc__day--busy {
	background: var(--sybc-busy);
	border-color: var(--sybc-busy);
	color: var(--sybc-busy-text);
	cursor: not-allowed;
	/* Not colour alone: a diagonal hatch carries the same message. */
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.22) 0 3px,
		transparent 3px 7px
	);
}

.sybc__day--busy .sybc__dayprice {
	color: rgba(255, 255, 255, 0.85);
}

/* A date with some departures left but not all. */
.sybc__day--partial {
	border-color: var(--sybc-partial);
	/* Half-height wash, so the state reads without relying on hue alone. */
	background-image: linear-gradient(
		to bottom,
		var(--sybc-free) 0 50%,
		var(--sybc-partial) 50% 100%
	);
	color: var(--sybc-free-text);
}

.sybc__day--partial .sybc__dayprice {
	color: var(--sybc-partial-text);
}

.sybc__swatch--partial {
	background: var(--sybc-partial);
	border-color: var(--sybc-partial);
}

/* The vessel is resetting after a charter. Its own state rather than "busy",
   because a reset asked for is not always a reset needed — someone wanting a
   tight fit can see this and ask. Horizontal rules, so it never reads as the
   diagonal hatch of a real booking. */
.sybc__day--turn {
	background: var(--sybc-turn);
	border-color: var(--sybc-turn);
	color: var(--sybc-turn-text);
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255, 255, 255, 0.22) 0 2px,
		transparent 2px 6px
	);
}

.sybc__day--turn .sybc__dayprice {
	color: var(--sybc-turn-text);
}

/* Set before the hatch further down, and with the same caution as the busy
   tile: a background shorthand after a background-image wipes it. */
.sybc__swatch--turn {
	background-color: var(--sybc-turn);
	border-color: var(--sybc-turn);
}

.sybc__day--checkout-ok {
	cursor: pointer;
	box-shadow: inset 0 -3px 0 var(--sybc-pick);
}

.sybc__day--pick {
	background: var(--sybc-pick);
	border-color: var(--sybc-pick);
	color: var(--sybc-pick-text);
}

.sybc__day--pick .sybc__dayprice {
	color: rgba(255, 255, 255, 0.9);
}

.sybc__day--hover:not(.sybc__day--pick) {
	background: var(--sybc-hover);
	border-color: var(--sybc-pick);
}

.sybc__day--out,
.sybc__day--unreachable {
	background: var(--sybc-out);
	border-color: var(--sybc-out);
	color: var(--sybc-out-text);
	cursor: not-allowed;
}

.sybc__day--out .sybc__dayprice,
.sybc__day--unreachable .sybc__dayprice {
	color: var(--sybc-out-text);
}

.sybc__day--today {
	outline: 2px solid var(--sybc-accent);
	outline-offset: -2px;
}

.sybc__day:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
	z-index: 1;
}

/* ---------- legend and selection ---------- */

.sybc__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-size: 0.8rem;
	color: var(--sybc-muted);
}

.sybc__legend li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* A public holiday. Not a state: free, partial, turnaround and booked answer
   "can this be sold?", and a holiday is true of the date whatever that answer
   is — the 4th of July can be fully booked and still be the 4th of July. So it
   is a badge sitting on top of the cell rather than another fill, and it never
   touches the background the states own.

   The white ring is what lets one colour work on all five backgrounds; without
   it the dot disappears into the booked red. */
.sybc__day--holiday::after {
	content: "";
	position: absolute;
	/* Proportional, not a fixed corner offset. --sybc-radius is an Appearance
	   setting, and at its higher values the cell is a circle rather than a
	   square — a badge pinned 4px from the corner then floats off the disc and
	   reads as detached. 12% keeps it tucked inside the arc at any radius. */
	top: 12%;
	right: 12%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sybc-holiday);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
	pointer-events: none;
}

/* The holiday name, on hover and on keyboard focus.
   
   The browser's own title tooltip is not used: it waits about a second, cannot
   be styled, and would arrive on top of this one if both were set. The names
   live in data-sybc-holiday and the same text is in the aria-label, so a screen
   reader hears it without needing the bubble at all.

   pre-line, because two holidays can fall on one date — Christmas Day and its
   observed day, or one from the charter's territory and one from the guest's
   chosen country — and they read better stacked than comma-spliced. */
.sybc__day--holiday::before {
	content: attr(data-sybc-holiday);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	/* No min-width: max-content here. It wins over max-width, so a long name
	   like "Columbus Day and Puerto Rico Friendship Day" renders as one line
	   wide enough to cover half the month. Letting the box size to its content
	   up to the cap gives short names a snug bubble and long ones two lines. */
	width: max-content;
	max-width: 13rem;
	padding: 0.4rem 0.55rem;
	border-radius: var(--sybc-radius);
	background: var(--sybc-ink);
	color: var(--sybc-free);
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.35;
	text-align: center;
	white-space: pre-line;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	/* Never swallow a click meant for the day underneath it. */
	pointer-events: none;
}

.sybc__day--holiday:hover::before,
.sybc__day--holiday:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

/* Centred on the cell, the bubble hangs off the side of the grid for the first
   and last columns — on a phone that means half of it is off the screen. These
   two pull it back in line with the edge it is nearest, so it always opens
   inwards. Only the outer two columns each side need it; the middle three have
   room either way. */
.sybc__day--holiday.sybc__day--col-start::before {
	left: 0;
	transform: none;
	text-align: left;
}

.sybc__day--holiday.sybc__day--col-end::before {
	left: auto;
	right: 0;
	transform: none;
	text-align: right;
}

/* Sibling cells are painted after this one, so without lifting the whole button
   the bubble slides behind the days to its right. */
.sybc__day--holiday:hover,
.sybc__day--holiday:focus-visible {
	z-index: 6;
}

/* The legend tiles are miniatures of the cells they explain, so they carry the
   same patterns. That needs about 20px to render a 3px hatch — at the old
   0.9rem the tiles were solid colour, which asked the reader to match by hue in
   the one place the calendar refuses to rely on it. */
.sybc__swatch {
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 4px;
	border: 1px solid var(--sybc-free-border);
	display: inline-block;
	position: relative;
}

.sybc__swatch--busy {
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.22) 0 3px,
		transparent 3px 7px
	);
}

.sybc__swatch--turn {
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255, 255, 255, 0.22) 0 2px,
		transparent 2px 6px
	);
}

.sybc__swatch--partial {
	background: var(--sybc-free);
	border-color: var(--sybc-partial);
	background-image: linear-gradient(
		to bottom,
		var(--sybc-free) 0 50%,
		var(--sybc-partial) 50% 100%
	);
}

/* The holiday entry is a tile with the badge on it, not a tile of holiday
   colour: the legend should show what the reader will actually see. */
.sybc__swatch--holiday {
	background: var(--sybc-free);
}

/* The guest's own country. The same badge in a different hue, because two sets
   of holidays on one calendar are two different facts. */
.sybc__swatch--holiday-guest {
	background: var(--sybc-free);
}

.sybc__swatch--holiday-guest::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sybc-holiday-guest);
	box-shadow: 0 0 0 1.5px var(--sybc-free);
}

.sybc__day--holiday-guest::after {
	background: var(--sybc-holiday-guest);
}

.sybc__swatch--holiday::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sybc-holiday);
	box-shadow: 0 0 0 1.5px var(--sybc-free);
}

.sybc__swatch--free {
	background: var(--sybc-free);
}

/* background-color, not the background shorthand: the hatch above is a
   background-image, and the shorthand would reset it to none — which is how the
   legend came to show a plain red tile against hatched cells, asking the reader
   to match the one state the calendar refuses to convey by hue alone. */
.sybc__swatch--busy {
	background-color: var(--sybc-busy);
	border-color: var(--sybc-busy);
}

.sybc__swatch--pick {
	background: var(--sybc-pick);
	border-color: var(--sybc-pick);
}

/* The holidays inside the chosen dates, said in words under the summary.
   The tooltip cannot carry this on a phone, where there is no hover at all. */
.sybc__holidaynote {
	display: block;
	flex-basis: 100%;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--sybc-muted);
}

.sybc__selection {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--sybc-out);
	border-radius: var(--sybc-radius);
	font-weight: 600;
}

.sybc__link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--sybc-muted);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
	font-weight: 400;
}

/* ---------- form ---------- */

.sybc__form {
	display: grid;
	gap: 1rem;
	max-width: 34rem;
}

.sybc__field {
	display: grid;
	gap: 0.35rem;
}

.sybc__field label {
	font-size: 0.85rem;
	font-weight: 600;
}

.sybc__field input,
.sybc__field textarea,
.sybc__field select {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	font: inherit;
	background: var(--sybc-free);
	color: var(--sybc-ink);
}

/*
 * The list a dropdown opens is drawn by the operating system, not by this
 * stylesheet. Chrome on a Mac hands it to a native menu and ignores the colours
 * set on the rows, so nothing here can be relied on to make them legible — which
 * is why the country and island are written into each row's own text rather than
 * carried by a group heading that may be painted dark on dark.
 *
 * These two still help everywhere the browser does honour them, and cost nothing
 * where it does not.
 */
.sybc__field select,
.sybc select {
	color-scheme: light;
}

.sybc select option {
	background-color: #fff;
	color: var(--sybc-ink);
}

.sybc__field select {
	appearance: none;
	-webkit-appearance: none;
	/* Stated again after the shared input rule, so the closed control keeps a
	   background of its own whatever the section behind it is doing. */
	background-color: var(--sybc-free);
	padding-right: 2.2rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--sybc-muted) 50%),
		linear-gradient(135deg, var(--sybc-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 50%, calc(100% - .8rem) 50%;
	background-size: .3rem .3rem, .3rem .3rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* ---------- the route ---------- */

.sybc__route {
	display: grid;
	gap: 0.85rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--sybc-line);
}

/* The route reads as a list of places with the sail between them, so the stop
   is what carries weight and the leg is the quiet line under it. */
.sybc__legs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.sybc__leg {
	position: relative;
	padding: 0.55rem 2.2rem 0.6rem 0.8rem;
	border: 1px solid var(--sybc-free-border);
	border-left-width: 3px;
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
}

/* Each leg says how it reads at a glance: the colour is the same language the
   calendar uses, so a long day looks like a day that is already spoken for. */
.sybc__leg--start { border-left-color: var(--sybc-pick); }
.sybc__leg--short { border-left-color: var(--sybc-free-border); }
.sybc__leg--good  { border-left-color: var(--sybc-pick); }
.sybc__leg--long  { border-left-color: var(--sybc-turn); background: var(--sybc-out); }

.sybc__legname {
	font-weight: 600;
	font-size: 0.95rem;
}

.sybc__legisland {
	font-weight: 400;
	color: var(--sybc-muted);
	margin-left: 0.4rem;
	font-size: 0.85rem;
}

.sybc__legmeta {
	font-size: 0.82rem;
	color: var(--sybc-muted);
	margin-top: 0.1rem;
}

.sybc__legnote {
	font-size: 0.8rem;
	color: var(--sybc-muted);
	margin-top: 0.25rem;
	font-style: italic;
}

.sybc__legdrop {
	position: absolute;
	top: 0.35rem;
	right: 0.4rem;
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--sybc-muted);
	font-size: 1.05rem;
	line-height: 1;
	padding: 0.25rem 0.35rem;
	cursor: pointer;
	border-radius: calc(var(--sybc-radius) / 2);
}

.sybc__legdrop:hover,
.sybc__legdrop:focus-visible {
	color: var(--sybc-ink);
	background: rgba(0, 0, 0, 0.06);
}

/* ---------- pace ---------- */

.sybc__pace {
	border: 0;
	padding: 0;
	margin: 0;
}

.sybc__pace legend {
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0;
	margin-bottom: 0.4rem;
}

/* ---------- a playable copy, on a page that explains the form ---------- */

/* The card is the real thing, so it needs no restyling — only a little room of
   its own and a hint that it is there to be used rather than read. */
.sybc--demo {
	margin: 0.2rem 0 0.4rem;
}

.sybc--demo .sybc__step {
	cursor: default;
}

.sybc--demo .sybc__steptitle {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.sybc--demo .sybc__steptitle::after {
	content: "try it";
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--sybc-pick);
	border: 1px solid var(--sybc-pick);
	border-radius: 999px;
	padding: 0.1rem 0.45rem;
	white-space: nowrap;
}

/* ---------- cruising style ---------- */

/* Asked before the grounds, because it changes what a week of them means. Two
   cards rather than a dropdown: each answer needs a sentence to be understood,
   and "one way" on its own does not say what it does. */
.sybc__style {
	border: 0;
	margin: 0 0 1rem;
	padding: 0;
}

.sybc__style legend {
	padding: 0;
	margin-bottom: 0.4rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.sybc__stylelist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.sybc__styleopt {
	appearance: none;
	display: grid;
	gap: 0.15rem;
	flex: 1 1 14rem;
	text-align: left;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	font: inherit;
	cursor: pointer;
}

.sybc__styleopt--on {
	border-color: var(--sybc-pick);
	background: var(--sybc-hover);
	box-shadow: inset 0 0 0 1px var(--sybc-pick);
}

.sybc__stylename { font-weight: 600; font-size: 0.9rem; }
.sybc__stylewhat { font-size: 0.78rem; color: var(--sybc-muted); line-height: 1.35; }

/* How long to stay here. Sits under the leg's figures because it is an answer
   to them: this is what the hop bought you. */
.sybc__legnights {
	display: inline-block;
	margin-top: 0.35rem;
}

/*
 * Themes commonly hide every native select and swap in a widget of their own,
 * built once as the page loads — this one does it with
 * `select:not(...) { visibility: hidden }` and reveals each control as it
 * enhances it. The nights picker is built as the guest adds stops, long after
 * that has run, so it is never enhanced and never revealed: it holds its space
 * in the row and shows nothing at all.
 *
 * Said with three classes so it outranks that rule whichever stylesheet the
 * page happens to load first.
 */
.sybc .sybc__legs .sybc__legnights select {
	visibility: visible;
}

.sybc__legnights select {
	appearance: auto;
	-webkit-appearance: auto;
	padding: 0.15rem 0.3rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: 6px;
	background: var(--sybc-free);
	color: var(--sybc-ink);
	font: inherit;
	font-size: 0.78rem;
	cursor: pointer;
}

/* A stop that can be moved. The grip is the affordance: without it the only
   clue that the order is yours to change is that it happens to work. */
.sybc__leg--movable {
	cursor: grab;
	padding-left: 1.5rem;
}

.sybc__leggrip {
	position: absolute;
	left: 0.5rem;
	top: 0.75rem;
	line-height: 1;
	letter-spacing: -0.12em;
	font-size: 0.8rem;
	color: var(--sybc-muted);
	opacity: 0.55;
}

.sybc__leg--movable:hover .sybc__leggrip { opacity: 1; }

.sybc__leg--dragging {
	opacity: 0.45;
	cursor: grabbing;
}

/* Where it would land. */
.sybc__leg--over {
	box-shadow: inset 0 3px 0 var(--sybc-pick);
}

/* Picked up by tapping — the touch and keyboard way round, which fires no drag
   events at all. */
.sybc__leg--moving {
	box-shadow: inset 0 0 0 2px var(--sybc-pick);
}

/* The last stop of a one-way charter. Marked like the start, because between
   them they are the two ends of the week. */
.sybc__leg--ends {
	box-shadow: inset 3px 0 0 var(--sybc-pick);
}

.sybc__pacelist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.sybc__paceopt {
	appearance: none;
	display: grid;
	gap: 0.1rem;
	text-align: left;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	font: inherit;
	cursor: pointer;
}

.sybc__paceopt--on {
	border-color: var(--sybc-pick);
	background: var(--sybc-hover);
	box-shadow: inset 0 0 0 1px var(--sybc-pick);
}

.sybc__pacename { font-weight: 600; font-size: 0.9rem; }

/* The hours are shown rather than implied: "balanced" is a promise, "up to four
   hours a day" is a fact the guest can hold you to. */
.sybc__pacehours { font-size: 0.78rem; color: var(--sybc-muted); }

.sybc__routesum {
	margin: 0;
	font-size: 0.875rem;
	color: var(--sybc-muted);
}

.sybc__routesum--tight {
	color: var(--sybc-ink);
	padding: 0.5rem 0.65rem;
	border-left: 3px solid var(--sybc-turn);
	background: var(--sybc-out);
	border-radius: calc(var(--sybc-radius) / 2);
}

/* ---------- meeting her where she is ---------- */

/* An offer, not a warning: she happens to be somewhere useful for these dates.
   Only the case where she cannot reach the chosen base in time is marked. */
.sybc__rendezvous {
	display: grid;
	gap: 0.4rem;
	justify-items: start;
	padding: 0.7rem 0.85rem;
	border-left: 3px solid var(--sybc-free-border);
	border-radius: calc(var(--sybc-radius) / 2);
	background: var(--sybc-free);
}

.sybc__rendezvous--tight {
	border-left-color: var(--sybc-turn);
	background: var(--sybc-out);
}

.sybc__rendezvoustext {
	margin: 0;
	font-size: 0.9rem;
}

/* ---------- the enquiry card ---------- */

/* Not an error state. The guest has asked for something reasonable that needs a
   person, so this reads as an invitation rather than a rejection — no red, no
   warning icon, and the route they chose shown back to them. */
.sybc__step--enquire {
	display: grid;
	gap: 0.9rem;
}

.sybc__enquirelead {
	margin: 0;
	font-size: 1.05rem;
}

.sybc__enquirebody {
	margin: 0;
	color: var(--sybc-muted);
	max-width: 40rem;
}

/* Their route, as a line of places rather than a bulleted list: it is one
   journey, and bullets would make it read as four separate problems. */
.sybc__enquirelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
}

.sybc__enquirelist li {
	font-weight: 600;
}

.sybc__enquirelist li + li::before {
	content: "\2192";
	color: var(--sybc-muted);
	font-weight: 400;
	margin-right: 0.5rem;
}

.sybc__enquireacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
}

/* The link is styled as the primary action, so it needs the button's own
   centring rather than inheriting a link's baseline. */
.sybc__enquireacts .sybc__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	width: auto;
}

/* ---------- cards ---------- */

/*
 * A deck. The same steps as the stacked form, one on screen at a time.
 *
 * Only this block knows about cards: the step markup is identical either way, so
 * hiding the others is a rule here rather than a second set of elements.
 */
/* The slide moves a card sideways, which would otherwise widen the page. Clipped
   on the deck rather than on the card, and with overflow-x: clip rather than
   hidden, because hidden on one axis forces the other to scroll — and that would
   cut off the holiday bubble, which reaches above the calendar's top row on
   purpose (see the months rule). */
.sybc--cards {
	overflow-x: clip;
}

.sybc--cards .sybc__step {
	border: 1px solid var(--sybc-line);
	border-radius: var(--sybc-radius);
	padding: 1.15rem 1.25rem 1.35rem;
	background: #fff;
}

/* A step that has been reached but is not the one showing. `hidden` still means
   "not reached yet" and is left to the markup. */
.sybc--cards .sybc__step:not(.sybc__step--current) {
	display: none;
}

.sybc--cards .sybc__stephead {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sybc-line);
}

@keyframes sybc-card-from-right {
	from { opacity: 0; transform: translateX(14%); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes sybc-card-from-left {
	from { opacity: 0; transform: translateX(-14%); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Proportional, not a fixed distance: the same slide should read the same on a
   phone and on a wide screen. */
.sybc__step--from-right {
	animation: sybc-card-from-right 220ms ease-out;
}

.sybc__step--from-left {
	animation: sybc-card-from-left 220ms ease-out;
}

/* ---------- the deck's controls ---------- */

.sybc__cardnav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.sybc__carddots {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
}

.sybc__carddot {
	appearance: none;
	width: 0.7rem;
	height: 0.7rem;
	padding: 0;
	border: 1px solid var(--sybc-free-border);
	border-radius: 50%;
	background: var(--sybc-free);
	cursor: pointer;
}

.sybc__carddot--on {
	background: var(--sybc-pick);
	border-color: var(--sybc-pick);
}

/* Every dot is a step already reached, so a bigger hit area than the dot is
   safe as well as kinder to a thumb. */
.sybc__carddots li {
	display: flex;
	padding: 0.3rem;
}

.sybc__cardcount {
	flex-basis: 100%;
	text-align: center;
	font-size: 0.8rem;
	color: var(--sybc-muted);
}

@media (prefers-reduced-motion: reduce) {
	.sybc__step--from-right,
	.sybc__step--from-left {
		animation: none;
	}
}

/* ---------- itinerary ---------- */

/* The "where" step stacks a field, the chosen grounds, a note and a second
   field. Given the same rhythm as the details form rather than margins on each
   piece, so a new question added here spaces itself. */
.sybc__step[data-sybc-step="where"] {
	display: grid;
	gap: 1rem;
}

.sybc__step[data-sybc-step="where"] .sybc__field {
	max-width: 34rem;
}

/* The chips and the note belong to the field above them, so they sit closer to
   it than the grid gap would put them. */
.sybc__step[data-sybc-step="where"] > .sybc__picked,
.sybc__step[data-sybc-step="where"] > .sybc__reach {
	margin-top: -0.5rem;
}

/* The step number sits inside the heading rather than beside it, so a heading
   that wraps keeps its number attached to the first line. */
.sybc__stepnum {
	color: var(--sybc-muted);
	font-weight: 400;
}

/* Chosen cruising grounds. A row that wraps rather than a scroller: three or
   four of these is the whole list, and a scroller hides the last one. */
.sybc__picked {
	list-style: none;
	margin: 0.65rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.sybc__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.4rem 0.3rem 0.65rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	font-size: 0.9rem;
	line-height: 1.2;
}

/* The base is the one the charter is priced from, so it is marked rather than
   left to be inferred from being first. */
.sybc__chip--base {
	border-color: var(--sybc-pick);
	background: var(--sybc-hover);
}

/* The chips are a route, and the order is the order sailed — so they are
   draggable, and the cursor says so before anyone tries. */
.sybc__chip {
	cursor: grab;
	user-select: none;
}

.sybc__chip--dragging {
	opacity: 0.45;
	cursor: grabbing;
}

/* Where it would land. */
.sybc__chip--over {
	border-color: var(--sybc-pick);
	box-shadow: inset 0 0 0 1px var(--sybc-pick);
}

/* Picked up by a tap rather than a drag: the touch and keyboard path, which
   needs a state that survives letting go. */
.sybc__chip--moving {
	border-color: var(--sybc-pick);
	box-shadow: 0 0 0 2px var(--sybc-hover);
}

.sybc__chiptag {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sybc-muted);
}

.sybc__chipdrop {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--sybc-muted);
	font-size: 1.05rem;
	line-height: 1;
	padding: 0 0.25rem;
	cursor: pointer;
	border-radius: calc(var(--sybc-radius) / 2);
}

.sybc__chipdrop:hover,
.sybc__chipdrop:focus-visible {
	color: var(--sybc-ink);
	background: rgba(0, 0, 0, 0.06);
}

/* Miles and days for what has been chosen. Never an error: it reports the
   trade, and the tight state is a nudge rather than a refusal. */
.sybc__reach {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	color: var(--sybc-muted);
}

.sybc__reach--tight {
	color: var(--sybc-ink);
	padding: 0.5rem 0.65rem;
	border-left: 3px solid var(--sybc-turn);
	background: var(--sybc-out);
	border-radius: calc(var(--sybc-radius) / 2);
}

.sybc__addons {
	border: 1px solid var(--sybc-line);
	border-radius: var(--sybc-radius);
	padding: 0.9rem 1rem;
	margin: 0;
	display: grid;
	gap: 0.65rem;
}

.sybc__addons legend {
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0 0.35rem;
}

.sybc__addon {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 0.65rem;
	cursor: pointer;
}

.sybc__addon-body {
	display: grid;
	gap: 0.15rem;
}

.sybc__addon-label {
	font-weight: 600;
	font-size: 0.9rem;
}

.sybc__addon-desc,
.sybc__addon-price {
	font-size: 0.8rem;
	color: var(--sybc-muted);
}

.sybc__addon-qty {
	width: 4rem;
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: 6px;
	font: inherit;
}

/* Honeypot: present for bots, gone for everyone else. */
.sybc__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sybc__pricing {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.sybc__pricing td {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--sybc-line);
}

.sybc__pricing td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sybc__pricing-total td {
	font-weight: 700;
	font-size: 1rem;
	border-bottom: 0;
	padding-top: 0.7rem;
}

.sybc__errors {
	margin: 0;
	padding-left: 1.2rem;
	color: #8c1c20;
	font-size: 0.9rem;
}

.sybc__submit {
	padding: 0.8rem 1.2rem;
	border: 0;
	border-radius: var(--sybc-radius);
	background: var(--sybc-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sybc__submit--pay {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

/* Stripe's lowercase wordmark set in type, on its own brand colour, so the
   button says who takes the card without shipping a trademark file. */
.sybc__paybrand {
	display: inline-block;
	padding: .1em .55em .18em;
	border-radius: .35em;
	background: #635bff;
	color: #fff;
	font-weight: 800;
	font-size: 1.05em;
	letter-spacing: -.03em;
	line-height: 1;
	text-transform: lowercase;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.sybc__submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.sybc__fineprint {
	margin: 0;
	font-size: 0.78rem;
	color: var(--sybc-muted);
}

/* ---------- confirmation ---------- */

.sybc__result {
	padding: 1.5rem;
	border: 1px solid var(--sybc-line);
	border-radius: var(--sybc-radius);
}

.sybc__resultlist {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1.5rem;
	margin: 1rem 0 0;
}

.sybc__resultlist dt {
	color: var(--sybc-muted);
	font-size: 0.85rem;
}

.sybc__resultlist dd {
	margin: 0;
	font-weight: 600;
}

/* There is deliberately no prefers-color-scheme block. The visitor's OS
   preference says nothing about the page they are on: a dark-mode Mac viewing
   a light theme was flipping the text to near-white on beige. The site owner
   sets the palette on the Appearance screen, and that is the only authority. */

@media (max-width: 480px) {
	.sybc__day {
		min-height: 2.4rem;
		font-size: 0.8rem;
	}

	.sybc__dayprice {
		display: none;
	}
}


/* ---------- charter picker ---------- */

.sybc__chartergroup {
	margin-bottom: 1.5rem;
}

.sybc__charterfamily {
	margin: 0 0 .6rem;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sybc-muted);
}

.sybc__charterlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .75rem;
}

.sybc__charter {
	display: grid;
	gap: .3rem;
	align-content: start;
	text-align: left;
	padding: .9rem 1rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	color: var(--sybc-ink);
	font: inherit;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.sybc__charter:hover {
	border-color: var(--sybc-pick);
}

.sybc__charter--on {
	border-color: var(--sybc-pick);
	box-shadow: inset 0 0 0 1px var(--sybc-pick);
}

.sybc__charter:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
}

.sybc__chartername {
	font-weight: 700;
	line-height: 1.25;
}

.sybc__charterdesc {
	font-size: .82rem;
	color: var(--sybc-muted);
}

.sybc__charterprice {
	font-weight: 600;
	font-size: .9rem;
}

.sybc__chartermeta {
	font-size: .75rem;
	color: var(--sybc-muted);
}

/* ---------- departure slots ---------- */

.sybc__slots {
	margin-top: 1.25rem;
}

.sybc__slotstitle {
	margin: 0 0 .5rem;
	font-size: .9rem;
}

.sybc__slotlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: .6rem;
}

.sybc__slot {
	display: grid;
	gap: .15rem;
	text-align: left;
	padding: .7rem .85rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	color: var(--sybc-ink);
	font: inherit;
	cursor: pointer;
}

.sybc__slot:hover:not(:disabled) {
	border-color: var(--sybc-pick);
}

.sybc__slot--on {
	background: var(--sybc-pick);
	border-color: var(--sybc-pick);
	color: var(--sybc-pick-text);
}

.sybc__slot--on .sybc__slotlabel,
.sybc__slot--on .sybc__slotprice {
	color: rgba(255, 255, 255, .9);
}

.sybc__slot:disabled {
	background: var(--sybc-out);
	border-color: var(--sybc-out);
	color: var(--sybc-out-text);
	cursor: not-allowed;
	text-decoration: line-through;
}

/* A slot lost to a reset rather than a booking: no strike-through, since it
   is worth asking about, and the turnaround colour on its edge. */
.sybc__slot--turn:disabled {
	text-decoration: none;
	border-left: 3px solid var(--sybc-turn);
}

.sybc__slot:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
}

.sybc__slottime {
	font-weight: 700;
	font-size: .95rem;
}

.sybc__slotlabel,
.sybc__slotprice {
	font-size: .8rem;
	color: var(--sybc-muted);
}

.sybc__slotempty {
	margin: 0;
	color: var(--sybc-muted);
	font-size: .9rem;
}

.sybc__hint {
	font-size: .78rem;
	color: var(--sybc-muted);
}


/* ---------- charter picker layouts ---------- */

/* List: one charter per full-width row. Name and price lead, meta trails, so a
   long list stays scannable down a single column. */
.sybc__charters--list .sybc__charterlist {
	grid-template-columns: 1fr;
	gap: .5rem;
}

.sybc__charters--list .sybc__charter {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name  price"
		"desc  price"
		"meta  meta";
	align-items: baseline;
	column-gap: 1rem;
	padding: .75rem 1rem;
}

.sybc__charters--list .sybc__chartername { grid-area: name; }
.sybc__charters--list .sybc__charterdesc { grid-area: desc; }
.sybc__charters--list .sybc__charterprice { grid-area: price; text-align: right; white-space: nowrap; }
.sybc__charters--list .sybc__chartermeta { grid-area: meta; }

/* Tabs: one family at a time. */
.sybc__chartertabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--sybc-line);
}

.sybc__chartertab {
	padding: .55rem .9rem;
	font: inherit;
	font-weight: 600;
	color: var(--sybc-muted);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	/* Sit the active underline on top of the container's own border. */
	margin-bottom: -1px;
}

.sybc__chartertab:hover {
	color: var(--sybc-ink);
}

.sybc__chartertab--on {
	color: var(--sybc-ink);
	border-bottom-color: var(--sybc-pick);
}

.sybc__chartertab:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: -3px;
}

.sybc__charters--tabs .sybc__charterlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .75rem;
}


/* ---------- charter photographs ---------- */

.sybc__charterimg,
.sybc__familyimg,
.sybc__rungimg,
.sybc__compareimg {
	display: block;
	overflow: hidden;
	background: var(--sybc-out);
}

.sybc__charterimg img,
.sybc__familyimg img,
.sybc__rungimg img,
.sybc__compareimg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bleed the photograph past the card's own padding to the card edge. */
.sybc__charter--haspic {
	padding-top: 0;
}

.sybc__charterimg {
	margin: 0 -1rem .65rem;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius) var(--radius) 0 0;
}

.sybc__charters--list .sybc__charter--haspic {
	padding-top: .75rem;
	grid-template-columns: 5.5rem 1fr auto;
	grid-template-areas:
		"pic name  price"
		"pic desc  price"
		"pic meta  meta";
	column-gap: .85rem;
}

.sybc__charters--list .sybc__charterimg {
	grid-area: pic;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	align-self: start;
}

/* ---------- two-step: the family question ---------- */

.sybc__familychoice {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .85rem;
}

.sybc__family {
	display: grid;
	gap: .3rem;
	align-content: start;
	text-align: left;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--radius);
	background: var(--sybc-free);
	color: var(--sybc-ink);
	font: inherit;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.sybc__family:hover {
	border-color: var(--sybc-pick);
}

.sybc__family:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
}

.sybc__family--haspic {
	padding-top: 0;
}

.sybc__familyimg {
	margin: 0 -1.25rem .85rem;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius) var(--radius) 0 0;
}

.sybc__familyname {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
}

.sybc__familysub {
	font-size: .88rem;
	color: var(--sybc-muted);
}

.sybc__familymeta {
	margin-top: .2rem;
	font-size: .78rem;
	color: var(--sybc-muted);
}

.sybc__stepback {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: .9rem;
}

.sybc__steptitlesm {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sybc-muted);
}

/* ---------- snap rail ---------- */

.sybc__rail {
	position: relative;
}

.sybc__railtrack {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	padding-bottom: .5rem;
	/* Firefox and the standard property; WebKit uses the pseudo-element below. */
	scrollbar-width: thin;
}

.sybc__railtrack::-webkit-scrollbar {
	height: 6px;
}

.sybc__railtrack::-webkit-scrollbar-thumb {
	background: var(--sybc-free-border);
	border-radius: 3px;
}

.sybc__railtrack .sybc__charter {
	flex: 0 0 15rem;
	scroll-snap-align: start;
}

.sybc__railnav {
	display: flex;
	justify-content: flex-end;
	gap: .4rem;
	margin-top: .35rem;
}

.sybc__railbtn {
	width: 2rem;
	height: 2rem;
	font: inherit;
	line-height: 1;
	color: var(--sybc-ink);
	background: var(--sybc-free);
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--radius);
	cursor: pointer;
}

.sybc__railbtn:hover {
	border-color: var(--sybc-pick);
}

.sybc__railbtn:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
}

/* Touch devices swipe; the arrows are desktop affordances. */
@media (hover: none) {
	.sybc__railnav { display: none; }
}

/* ---------- ladder ---------- */

.sybc__ladder {
	display: grid;
	gap: .7rem;
}

.sybc__rung {
	display: grid;
	gap: 0;
	text-align: left;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--radius);
	background: var(--sybc-free);
	color: var(--sybc-ink);
	font: inherit;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.sybc__rung:hover {
	border-color: var(--sybc-pick);
}

.sybc__rung--on {
	border-color: var(--sybc-pick);
	box-shadow: inset 0 0 0 1px var(--sybc-pick);
}

.sybc__rung:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
}

.sybc__rungimg {
	aspect-ratio: 21 / 9;
}

.sybc__rungbody {
	display: grid;
	gap: .22rem;
	padding: .85rem 1rem 1rem;
}

.sybc__rungname {
	font-weight: 700;
	line-height: 1.25;
}

.sybc__rungdesc {
	font-size: .84rem;
	color: var(--sybc-muted);
}

.sybc__rungprice {
	margin-top: .15rem;
	font-weight: 600;
	font-size: .95rem;
}

/* The step up from the rung below, which is the decision being made. */
.sybc__rungdelta {
	justify-self: start;
	margin-top: .3rem;
	padding: .16rem .5rem;
	font-size: .76rem;
	font-weight: 600;
	color: var(--sybc-pick-text);
	background: var(--sybc-pick);
	border-radius: 999px;
}

/* ---------- comparison table ---------- */

.sybc__comparescroll {
	overflow-x: auto;
	margin-bottom: 1.5rem;
	scrollbar-width: thin;
}

.sybc__compare {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: .88rem;
}

.sybc__compare th,
.sybc__compare td {
	padding: .6rem .75rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--sybc-line);
}

.sybc__compare thead th {
	vertical-align: bottom;
	min-width: 9rem;
}

.sybc__compareimg {
	aspect-ratio: 4 / 3;
	margin-bottom: .45rem;
	border-radius: var(--radius);
}

.sybc__comparename {
	display: block;
	font-weight: 700;
	line-height: 1.3;
}

/* Comparison needs side-by-side, so a narrow screen scrolls rather than
   stacking — the row labels stay put so a scrolled column keeps its meaning. */
.sybc__compare th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 1;
	font-weight: 400;
	color: var(--sybc-muted);
	background: var(--sybc-free);
}

.sybc__comparepick {
	width: 100%;
	padding: .5rem .7rem;
	font: inherit;
	font-weight: 600;
	font-size: .85rem;
	color: var(--sybc-ink);
	background: var(--sybc-free);
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--radius);
	cursor: pointer;
}

.sybc__comparepick:hover {
	border-color: var(--sybc-pick);
}

.sybc__comparepick--on {
	color: var(--sybc-pick-text);
	background: var(--sybc-pick);
	border-color: var(--sybc-pick);
}

.sybc__comparepick:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
}


/* ---------- placeholder artwork ---------- */

/* Drawn, not shipped: the shapes take their colours from the active scheme, so
   a placeholder never fights the palette someone chose. */
.sybc__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.sybc__ph-bg {
	fill: var(--sybc-out);
}

.sybc__ph-sun {
	fill: var(--sybc-partial);
	opacity: .38;
}

.sybc__ph-sail {
	fill: var(--sybc-ink);
	opacity: .16;
}

.sybc__ph-sail2 {
	fill: var(--sybc-ink);
	opacity: .1;
}

.sybc__ph-hull {
	fill: var(--sybc-ink);
	opacity: .22;
}

.sybc__ph-wave {
	fill: var(--sybc-pick);
	opacity: .16;
}

.sybc__ph-wave2 {
	fill: var(--sybc-pick);
	opacity: .09;
}

.sybc__ph-wave3 {
	fill: var(--sybc-pick);
	opacity: .26;
}

/* ---------- step transitions ---------- */

/* Duration is set inline per step from the Booking flow settings. */
.sybc__step--fade,
.sybc__step--slide,
.sybc__step--exit-fade,
.sybc__step--exit-slide {
	animation-duration: var(--sybc-anim, 350ms);
	animation-fill-mode: both;
}

.sybc__step--fade {
	animation-name: sybc-fade-in;
	animation-timing-function: ease-out;
}

.sybc__step--slide {
	animation-name: sybc-slide-in;
	/* A decelerating curve so the step arrives rather than stops. */
	animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.sybc__step--exit-fade {
	animation-name: sybc-fade-out;
	animation-timing-function: ease-in;
}

.sybc__step--exit-slide {
	animation-name: sybc-slide-out;
	animation-timing-function: cubic-bezier(.55, .06, .68, .19);
}

@keyframes sybc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sybc-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes sybc-slide-in {
	from { opacity: 0; transform: translateX(2.5rem); }
	to { opacity: 1; transform: none; }
}

@keyframes sybc-slide-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateX(-2.5rem); }
}

/* The browser check in JS already skips these, but a visitor who changes the
   preference mid-animation should not be left mid-slide. */
@media (prefers-reduced-motion: reduce) {
	.sybc__step--fade,
	.sybc__step--slide,
	.sybc__step--exit-fade,
	.sybc__step--exit-slide {
		animation: none;
	}

	.sybc * {
		scroll-behavior: auto;
	}
}

/* ---------- confirmation card ---------- */

.sybc__confirm {
	position: relative;
	overflow: hidden;
	max-width: 40rem;
	background: var(--sybc-free);
	border: 1px solid var(--sybc-line);
	border-radius: calc(var(--sybc-radius) + 4px);
	color: var(--sybc-ink);
}

.sybc__confirm--plain {
	padding: 1.5rem;
}

.sybc__confirmhero {
	position: relative;
	aspect-ratio: 21 / 9;
	min-height: 9rem;
	overflow: hidden;
	background: var(--sybc-out);
}

.sybc__confirmhero > img,
.sybc__confirmhero > .sybc__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The logo sits on the photo in a chip, never under the text. */
.sybc__confirmchip {
	position: absolute;
	top: .9rem;
	left: 1rem;
	display: inline-flex;
	align-items: center;
	padding: .4rem .7rem;
	background: var(--sybc-free);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.sybc__confirmchip img {
	display: block;
	max-height: 1.75rem;
	max-width: 9rem;
	width: auto;
	height: auto;
}

.sybc__confirmtag {
	position: absolute;
	right: 1rem;
	bottom: .8rem;
	padding: .3rem .65rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--sybc-ink);
	background: var(--sybc-free);
	border-radius: var(--sybc-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* When the photo is switched off, the chip and tag sit in a plain band. */
.sybc__confirmband {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem 0;
}

.sybc__confirmchip--flat,
.sybc__confirmtag--flat {
	position: static;
	box-shadow: none;
}

.sybc__confirmchip--flat {
	padding: 0;
	background: none;
}

.sybc__confirmtag--flat {
	background: var(--sybc-out);
}

.sybc__confirmhead {
	position: relative;
	z-index: 1;
	padding: 1.35rem 1.5rem .25rem;
}

.sybc__confirmtitle {
	margin: 0 0 .3rem;
	font-size: 1.7rem;
	line-height: 1.15;
}

.sybc__confirmsub {
	margin: 0;
	font-size: .9rem;
	color: var(--sybc-muted);
}

.sybc__confirmref {
	padding: .1rem .35rem;
	font-size: .88em;
	color: var(--sybc-ink);
	background: var(--sybc-out);
	border-radius: 4px;
}

/* ---------- timeline ---------- */

.sybc__timeline {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: .75rem;
	margin: 1.1rem 1.5rem 0;
	padding: .9rem 1rem;
	background: var(--sybc-out);
	border-radius: var(--sybc-radius);
}

.sybc__timelineend {
	display: grid;
	gap: .05rem;
	min-width: 0;
}

.sybc__timelineend--right {
	text-align: right;
}

.sybc__timelinelabel {
	font-size: .68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--sybc-muted);
}

.sybc__timelinedate {
	font-weight: 700;
	line-height: 1.2;
}

.sybc__timelinetime {
	font-size: .84rem;
	color: var(--sybc-muted);
}

.sybc__timelinemid {
	display: grid;
	justify-items: center;
	gap: .2rem;
}

.sybc__timelinespan {
	font-size: .78rem;
	color: var(--sybc-muted);
	white-space: nowrap;
}

/* dot — line — boat — line — dot */
.sybc__timelinetrack {
	display: flex;
	align-items: center;
	gap: .3rem;
	color: var(--sybc-muted);
}

.sybc__timelinetrack i {
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--sybc-ink);
}

.sybc__timelinetrack b {
	width: clamp(1.5rem, 8vw, 3.5rem);
	height: 1px;
	background: var(--sybc-free-border);
}

/* ---------- stats and actions ---------- */

.sybc__confirmstats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: .65rem;
	margin: .9rem 1.5rem 0;
}

.sybc__confirmstat {
	display: grid;
	gap: .1rem;
	padding: .7rem .85rem;
	background: var(--sybc-out);
	border-radius: var(--sybc-radius);
}

.sybc__confirmstatlabel {
	font-size: .72rem;
	color: var(--sybc-muted);
}

.sybc__confirmstatvalue {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
}

.sybc__confirmactions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.2rem 1.5rem 1.5rem;
}

.sybc__confirmbtn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem .95rem;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	color: var(--sybc-ink);
	background: var(--sybc-free);
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	text-decoration: none;
	cursor: pointer;
}

.sybc__confirmbtn:hover {
	border-color: var(--sybc-pick);
}

.sybc .sybc__confirmbtn--accent {
	background: var(--sybc-accent);
	border-color: var(--sybc-accent);
	color: #fff;
}

.sybc__confirmbtn:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
}

/* The card ends with padding even when there are no actions. */
.sybc__confirmstats:last-child,
.sybc__timeline:last-child,
.sybc__resultlist:last-child {
	margin-bottom: 1.5rem;
}

/* The faint corner mark — large, clipped by the card, and kept below every
   piece of text by z-index so it can never reduce their contrast. */
.sybc__confirmmark {
	position: absolute;
	right: -6%;
	bottom: -8%;
	width: 42%;
	max-width: 18rem;
	height: auto;
	opacity: var(--sybc-mark-opacity, .05);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

@media (max-width: 480px) {
	.sybc__confirmhead,
	.sybc__timeline,
	.sybc__confirmstats,
	.sybc__confirmactions,
	.sybc__confirmband {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.sybc__confirmhead {
		padding-left: 0;
		padding-right: 0;
	}

	.sybc__confirmtitle {
		font-size: 1.4rem;
	}

	.sybc__timeline {
		padding: .8rem .7rem;
	}
}

@media print {
	.sybc__confirm {
		max-width: none;
		border: 1px solid #999;
	}

	.sybc__confirmactions,
	.sybc__confirmmark {
		display: none;
	}
}


/* ---------- general availability view ---------- */

/* A scheduled trip with cabins left: a light wash of the selection colour
   with a solid edge. Derived, so it follows the scheme without a picker. */
.sybc--overview .sybc__day--trip {
	background: var(--sybc-hover);
	border-color: var(--sybc-pick);
	color: var(--sybc-free-text);
}

.sybc--overview .sybc__day--trip .sybc__dayprice {
	color: var(--sybc-pick);
	font-weight: 700;
}

.sybc__swatch--trip {
	background: var(--sybc-hover);
	border-color: var(--sybc-pick);
}

.sybc--overview a.sybc__day--trip:hover {
	filter: brightness(.96);
}


/* Read-only: no selection, no hover state, no prices. Days that link through
   to the booking page are real links and inherit the cursor from that. */
.sybc--overview .sybc__day {
	cursor: default;
	text-decoration: none;
}

.sybc--overview a.sybc__day {
	cursor: pointer;
}

.sybc--overview a.sybc__day--free:hover,
.sybc--overview a.sybc__day--partial:hover {
	border-color: var(--sybc-pick);
	background-color: var(--sybc-hover);
}

.sybc--overview a.sybc__day--turn:hover {
	filter: brightness(1.08);
}

.sybc--overview .sybc__day--booked {
	background: var(--sybc-busy);
	border-color: var(--sybc-busy);
	color: var(--sybc-busy-text);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.22) 0 3px,
		transparent 3px 7px
	);
}

.sybc__overviewnote {
	margin: .75rem 0 0;
	font-size: .82rem;
	color: var(--sybc-muted);
}

/* ---------- booking lookup ---------- */

.sybc__lookup {
	display: grid;
	gap: 1rem;
	max-width: 34rem;
}

.sybc__lookupfields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
}

/* References are shown in caps; type them that way too. */
#sybc-lookup-ref {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sybc__lookupagain {
	margin: 1rem 0 0;
	font-size: .9rem;
}

.sybc__lookupagain a {
	color: var(--sybc-muted);
}


/* ---------- phone field (intl-tel-input) ---------- */

/* The library paints itself grey-on-white with its own borders and shadows.
   It exposes that palette as variables, so point them at ours and the widget
   stops looking like a visitor from another stylesheet. */
.sybc__field--phone .iti {
	width: 100%;
	--iti-border-color: var(--sybc-free-border);
	--iti-border-width: 1px;
	--iti-dropdown-bg: var(--sybc-free);
	--iti-hover-color: var(--sybc-hover);
	--iti-arrow-color: var(--sybc-muted);
	--iti-dialcode-color: var(--sybc-muted);
	--iti-search-icon-color: var(--sybc-muted);
	--iti-spacer-horizontal: .55rem;
}

.sybc__field--phone .iti__tel-input {
	font: inherit;
	color: var(--sybc-ink);
}

/* The widget's two <button>s — the flag and the search clear — inherit
   whatever a theme does to buttons: pills, colours, shadows, uppercase. Reset
   all of it so they read as part of the field. */
.sybc__field--phone .iti button,
.sybc .iti__dropdown-content button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font: inherit;
	color: var(--sybc-ink);
}

/* The flag-and-code button sits inside the field, not in a box of its own.
   These outrank the reset above (which is .field .iti button, 0-2-1) by one
   class, so the height and centring survive it. */
.sybc__field--phone .iti .iti__selected-country {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
}

/* The container must sit above the input, which a theme may have positioned. */
.sybc__field--phone .iti .iti__country-container {
	z-index: 2;
}

.sybc__field--phone .iti .iti__selected-country-primary {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: .7rem;
	background: transparent;
	border-radius: var(--sybc-radius) 0 0 var(--sybc-radius);
}

.sybc__field--phone .iti--allow-dropdown .iti__country-container:hover .iti__selected-country-primary {
	background: var(--sybc-hover);
}

.sybc__field--phone .iti .iti__selected-country:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: -3px;
}

.sybc__field--phone .iti__selected-country:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: -3px;
}

/* A quiet divider between the flag-and-code and the number, instead of the
   library's shaded block. */
.sybc__field--phone .iti--show-flags .iti .iti__selected-country-primary,
.sybc__field--phone .iti.iti--show-flags .iti__selected-country-primary {
	border-right: 1px solid var(--sybc-line);
	padding-right: .55rem;
}

.sybc__field--phone .iti__selected-dial-code {
	color: var(--sybc-muted);
	font-size: .9em;
}

/* Picker off: no gutter for a flag that is not there. */
.sybc__field--phone .iti:not(.iti--show-flags) .iti__tel-input {
	padding-left: .7rem !important;
}

.sybc__field--phone .iti:not(.iti--show-flags) .iti__country-container {
	display: none;
}

/* The dropdown: our border, our radius, a soft shadow, our text. */
.sybc .iti__dropdown-content {
	z-index: 20;
	margin-top: .3rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
	color: var(--sybc-ink);
	font-size: .9rem;
	overflow: hidden;
}

.sybc .iti__search-input {
	padding: .6rem .7rem .6rem 2.1rem;
	font: inherit;
	font-size: .9rem;
	color: var(--sybc-ink);
	background-color: var(--sybc-free);
	border: 0;
	border-bottom: 1px solid var(--sybc-line);
	border-radius: 0;
}

.sybc .iti__search-input:focus {
	outline: none;
	box-shadow: inset 0 -2px 0 var(--sybc-pick);
}

.sybc .iti__search-input + .iti__country-list {
	border-top: 0;
}

.sybc .iti__country {
	padding: .5rem .75rem;
	color: var(--sybc-ink);
}

.sybc .iti__country.iti__highlight {
	background: var(--sybc-hover);
}

.sybc .iti__country-name {
	color: var(--sybc-ink);
}

.sybc .iti__dial-code {
	color: var(--sybc-muted);
}

.sybc .iti__dropdown-content .iti__search-clear {
	position: absolute;
	right: .35rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.6rem;
	height: 1.6rem;
	justify-content: center;
	border-radius: 50%;
	color: var(--sybc-muted);
}

.sybc .iti__dropdown-content .iti__search-clear:hover {
	background: var(--sybc-hover);
	color: var(--sybc-ink);
}

.sybc .iti__dropdown-content .iti__search-clear svg {
	width: .8rem;
	height: .8rem;
}

/* ---------- shared trips: departures ---------- */

.sybc__departures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .75rem;
}

.sybc__departure {
	display: grid;
	gap: .25rem;
	text-align: left;
	padding: .9rem 1rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	color: var(--sybc-ink);
	font: inherit;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.sybc__departure:hover:not(:disabled) {
	border-color: var(--sybc-pick);
}

.sybc__departure--on {
	border-color: var(--sybc-pick);
	box-shadow: inset 0 0 0 1px var(--sybc-pick);
}

.sybc__departure--off,
.sybc__departure:disabled {
	background: var(--sybc-out);
	border-color: var(--sybc-out);
	color: var(--sybc-out-text);
	cursor: not-allowed;
}

.sybc__departure:focus-visible {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 2px;
}

.sybc__departurewhen {
	font-weight: 700;
	line-height: 1.25;
}

.sybc__departurelabel {
	font-size: .88rem;
	color: var(--sybc-muted);
}

.sybc__departure:disabled .sybc__departurelabel,
.sybc__departure:disabled .sybc__departureprice {
	color: var(--sybc-out-text);
}

.sybc__departurestatus {
	font-size: .78rem;
	font-weight: 600;
	color: var(--sybc-pick);
}

.sybc__departure:disabled .sybc__departurestatus {
	color: var(--sybc-busy);
}

.sybc__departureprice {
	font-size: .88rem;
	font-weight: 600;
}

/* ---------- theme armour ----------
   Themes style bare elements — button, input, select, a — with selectors
   that outrank a single class, and some do it with !important. Every rule
   below restates something already declared above, at higher specificity,
   so the plugin looks the same on a theme that fights it as on one that
   does not. Seen in the wild: button[disabled] { background !important },
   form button:not(x) { background; border-radius: 0 }, input[type=text]
   { border: 0; border-bottom: 1px }. */

.sybc .sybc__day,
.sybc .sybc__slot,
.sybc .sybc__charter,
.sybc .sybc__rung,
.sybc .sybc__family,
.sybc .sybc__departure,
.sybc .sybc__navbtn,
.sybc .sybc__railbtn,
.sybc .sybc__comparepick,
.sybc .sybc__confirmbtn,
.sybc .sybc__chartertab,
.sybc .sybc__submit {
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	box-shadow: none;
	min-height: 0;
	line-height: 1.3;
	font-family: inherit;
	font-weight: inherit;
}

.sybc .sybc__day {
	padding: 0;
	border-radius: var(--sybc-radius);
	font-size: .85rem;
}

.sybc .sybc__day--free,
.sybc .sybc__day--free:disabled {
	background-color: var(--sybc-free) !important;
	border-color: var(--sybc-free-border) !important;
	color: var(--sybc-free-text) !important;
}

.sybc .sybc__day--busy,
.sybc .sybc__day--busy:disabled,
.sybc--overview .sybc__day--booked {
	background-color: var(--sybc-busy) !important;
	border-color: var(--sybc-busy) !important;
	color: var(--sybc-busy-text) !important;
}

.sybc .sybc__day--turn,
.sybc .sybc__day--turn:disabled {
	background-color: var(--sybc-turn) !important;
	border-color: var(--sybc-turn) !important;
	color: var(--sybc-turn-text) !important;
}

.sybc .sybc__day--partial,
.sybc .sybc__day--partial:disabled {
	background-color: var(--sybc-free) !important;
	border-color: var(--sybc-partial) !important;
	color: var(--sybc-free-text) !important;
}

.sybc .sybc__day--out,
.sybc .sybc__day--out:disabled,
.sybc .sybc__day--unreachable,
.sybc .sybc__day--unreachable:disabled {
	background-color: var(--sybc-out) !important;
	border-color: var(--sybc-out) !important;
	color: var(--sybc-out-text) !important;
}

.sybc .sybc__day--pick {
	background-color: var(--sybc-pick) !important;
	border-color: var(--sybc-pick) !important;
	color: var(--sybc-pick-text) !important;
}

.sybc--overview .sybc__day--trip {
	background-color: var(--sybc-hover) !important;
	border-color: var(--sybc-pick) !important;
	color: var(--sybc-free-text) !important;
}

.sybc .sybc__slot:disabled,
.sybc .sybc__departure:disabled {
	background-color: var(--sybc-out) !important;
	border-color: var(--sybc-out) !important;
	color: var(--sybc-out-text) !important;
}

.sybc .sybc__navbtn:disabled,
.sybc .sybc__railbtn:disabled {
	background-color: var(--sybc-free) !important;
	border-color: var(--sybc-free-border) !important;
	color: var(--sybc-ink) !important;
	opacity: .35;
}

.sybc .sybc__submit {
	padding: .9rem 1.4rem;
	background: var(--sybc-accent) !important;
	color: var(--sybc-pick-text) !important;
	border: 0;
	border-radius: var(--sybc-radius) !important;
	font-weight: 700;
}

.sybc .sybc__submit--pay {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

/* Stripe's lowercase wordmark set in type, on its own brand colour, so the
   button says who takes the card without shipping a trademark file. */
.sybc__paybrand {
	display: inline-block;
	padding: .1em .55em .18em;
	border-radius: .35em;
	background: #635bff;
	color: #fff;
	font-weight: 800;
	font-size: 1.05em;
	letter-spacing: -.03em;
	line-height: 1;
	text-transform: lowercase;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.sybc__submit:disabled {
	background: var(--sybc-accent) !important;
	color: var(--sybc-pick-text) !important;
	opacity: .45;
}

.sybc .sybc__field input,
.sybc .sybc__field select,
.sybc .sybc__field textarea,
.sybc .sybc__lookup input {
	padding: .6rem .7rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	color: var(--sybc-ink);
	box-shadow: none;
	line-height: 1.4;
}

.sybc .sybc__field input:focus,
.sybc .sybc__field select:focus,
.sybc .sybc__field textarea:focus,
.sybc .sybc__lookup input:focus {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 1px;
	border-color: var(--sybc-free-border);
}

/* The phone input inside the widget: same box. The left gutter comes from a
   property the script measures from the real flag box; !important so the
   library's own inline guess, made before fonts and our styling landed,
   never wins. */
.sybc .sybc__field--phone .iti--show-flags .iti__tel-input {
	padding-left: var(--sybc-phone-gutter, 4.5rem) !important;
}

.sybc .sybc__field--phone .iti__tel-input {
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	box-shadow: none;
}

/* ---------- destination pages ---------- */

.sybc--destination {
	margin: 2rem 0;
}

.sybc__destitintitle {
	margin: 0 0 .3rem;
}

.sybc__destdays {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.sybc__destday {
	padding: .8rem 1rem;
	border: 1px solid var(--sybc-line);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
}

.sybc__destdayhead {
	display: flex;
	gap: .6rem;
	align-items: baseline;
	margin-bottom: .4rem;
}

.sybc__destitems {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .25rem;
}

.sybc__destitem {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: .6rem;
	font-size: .92rem;
}

.sybc__destkind {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--sybc-muted);
	padding-top: .25em;
}

.sybc__desttext small {
	display: block;
	color: var(--sybc-muted);
}

.sybc__destbook {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.5rem;
	padding: 1rem 1.2rem;
	border-radius: var(--sybc-radius);
	background: var(--sybc-out);
}

.sybc__destseason {
	font-size: .92rem;
	color: var(--sybc-muted);
}

.sybc .sybc__destbookbtn {
	text-decoration: none;
	display: inline-block;
}

/* The two questions asked before the calendar. One rule for both, so they
   cannot drift: the destination used to carry a 32rem cap the holiday picker
   beside it did not, and the pair stopped lining up as the container grew.
   Neither is capped now — the calendar's own width setting already bounds
   them, and a second limit inside it only made the fields disagree. */
.sybc__field--destination,
.sybc__field--holiday {
	margin-bottom: 1rem;
}

/* ---------- guest access (emailed code) ---------- */

/* Two classes so a theme's content-column width cannot stretch the form
   across the page: a sign-in panel reads as a small, centred card. */
.sybc.sybc-access {
	max-width: 24rem;
	margin: 2rem auto;
	padding: 1.75rem 1.6rem 1.5rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: calc(var(--sybc-radius) + 4px);
	background: var(--sybc-free);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -18px rgba(0, 0, 0, .35);
	text-align: left;
}

.sybc-access__title {
	margin: 0 0 .35rem;
	font-size: 1.35rem;
	line-height: 1.25;
}

.sybc-access__intro,
.sybc-access__fine {
	margin: 0;
	color: var(--sybc-muted, #5a6470);
	font-size: .9rem;
	line-height: 1.45;
}

.sybc-access__fine {
	margin-top: .9rem;
	text-align: center;
}

.sybc-access__label {
	display: block;
	margin: 1rem 0 .3rem;
	font-size: .9rem;
	font-weight: 600;
}

.sybc-access__opt {
	font-weight: 400;
	color: var(--sybc-muted, #5a6470);
}

.sybc .sybc-access__form input[type="text"],
.sybc .sybc-access__form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	border: 1px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	font: inherit;
	line-height: 1.4;
	background: var(--sybc-free);
	color: var(--sybc-ink);
}

.sybc .sybc-access__form input:focus {
	outline: 3px solid var(--sybc-accent);
	outline-offset: 1px;
	border-color: var(--sybc-free-border);
}

.sybc .sybc-access__code {
	font-size: 1.5rem;
	letter-spacing: .35em;
	text-align: center;
	padding-left: .35em; /* balances the trailing letter-space */
}

.sybc .sybc-access__form .sybc__submit {
	margin-top: 1.1rem;
	width: 100%;
	padding: .75rem 1rem;
}

.sybc-access__notice {
	margin: 0 0 .25rem;
	padding: .65rem .8rem;
	border-radius: var(--sybc-radius);
	background: var(--sybc-out, #f2f2f2);
	font-size: .9rem;
	line-height: 1.45;
}

.sybc-access__notice--error {
	background: color-mix(in srgb, var(--sybc-busy) 12%, #fff);
}

.sybc-access__resend {
	margin: .75rem 0 0;
	text-align: center;
	font-size: .9rem;
}

/* The theme dresses every <button> as a big solid button; the "send another"
   control is a quiet link, so it has to say so louder than the theme does. */
.sybc .sybc-access__form .sybc-access__link,
.sybc .sybc-access__form .sybc-access__link:hover,
.sybc .sybc-access__form .sybc-access__link:focus {
	display: inline;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none;
	font: inherit;
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sybc-accent) !important;
	text-decoration: underline;
	cursor: pointer;
}

.sybc-access__signed {
	margin: 0;
	text-align: center;
	line-height: 1.6;
}

.sybc-access__signed .sybc__submit {
	display: block;
	width: 100%;
	margin: 1rem 0 .75rem;
}

@media (max-width: 30rem) {
	.sybc.sybc-access {
		margin: 1.25rem auto;
		padding: 1.4rem 1.15rem 1.25rem;
	}
}

/* ---------- the hub: what would you like to do? ---------- */

.sybc-hub__title {
	margin: 0 0 1rem;
	text-align: center;
}

.sybc-hub__choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.sybc .sybc-hub__choice {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.2rem 1.3rem;
	border: 2px solid var(--sybc-free-border);
	border-radius: var(--sybc-radius);
	background: var(--sybc-free);
	color: var(--sybc-ink);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.sybc .sybc-hub__choice:hover,
.sybc .sybc-hub__choice:focus-visible {
	border-color: var(--sybc-accent);
	outline: none;
}

.sybc .sybc-hub__choice.is-active {
	border-color: var(--sybc-accent);
	box-shadow: inset 0 0 0 1px var(--sybc-accent);
}

.sybc .sybc-hub__choice strong {
	font-size: 1.1rem;
}

.sybc .sybc-hub__choice span {
	color: var(--sybc-muted, #5a6470);
	font-size: .92rem;
}

.sybc-hub__panel[hidden] {
	display: none;
}

.sybc-hub__panel .sybc {
	max-width: none;
}

/* ---------- frosted teaser cards ---------- */

/* Old window glass: the SVG filter ripples and desaturates each masked row,
   and a sheet of glass sits over them with the way in. The values behind it
   are stand-ins — the real ones never leave the server — so this is a look,
   not the lock. */
.sybc-frost {
	position: relative;
	isolation: isolate;
}

.sybc-frost__row {
	filter: url(#sybc-glass) blur(2.2px) grayscale(1) contrast(.85);
	opacity: .6;
	user-select: none;
	pointer-events: none;
}

/* Anything without SVG filter support still gets a solid frost. */
@supports not (filter: url(#sybc-glass)) {
	.sybc-frost__row {
		filter: blur(3.5px) grayscale(1);
	}
}

.sybc-frost__glass {
	position: absolute;
	left: -.4rem;
	right: -.4rem;
	bottom: -.4rem;
	z-index: 1;
	border-radius: 8px;
	background: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, .26) 0 6px,
		rgba(255, 255, 255, .04) 6px 13px
	);
	backdrop-filter: blur(1px);
	pointer-events: none;
}

.sybc-frost__btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: .55rem 1rem;
	border-radius: 999px;
	background: var(--sybc-accent, #0d3b57);
	color: #fff !important;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	pointer-events: auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.sybc-frost__btn:hover,
.sybc-frost__btn:focus-visible {
	background: var(--sybc-ink, #12212b);
	color: #fff !important;
}

.sybc-frost__price {
	display: inline-block;
	filter: url(#sybc-glass) blur(2.2px) grayscale(1) contrast(.85);
	opacity: .7;
	user-select: none;
	letter-spacing: .04em;
}

@supports not (filter: url(#sybc-glass)) {
	.sybc-frost__price {
		filter: blur(3px) grayscale(1);
	}
}

.sybc-frost__cta {
	margin: 0 0 1.5rem;
	text-align: center;
}

.sybc-frost__btn--inline {
	position: static;
	transform: none;
	display: inline-block;
	padding: .6rem 1.15rem;
}

.sybc-glass-def {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * The galley: the menu card, the bar card, and the compact day card.
 *
 * Laid out as a menu rather than as a form, because that is what it is —
 * nothing here is an input except the fare, and the fare is deliberately the
 * loudest thing on the card.
 * ------------------------------------------------------------------ */

.sybc__menulead,
.sybc__cuisineblurb {
	max-width: 42rem;
	color: var( --sybc-muted );
	margin: 0 0 1rem;
	line-height: 1.55;
}

.sybc__cuisineblurb {
	color: var( --sybc-ink );
}

/* The fare chooser.
 *
 * Sticky, because the menu below it is long and a guest comparing the two fares
 * should be able to switch without scrolling back up — which was the whole
 * reason for putting the fare on the menu card instead of among the add-ons. */
.sybc__farebar {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var( --sybc-free );
	border-bottom: 1px solid var( --sybc-line );
	padding: 0.6rem 0 0.9rem;
	margin: 0 0 1.1rem;
}

.sybc__farelegend {
	margin: 0 0 0.45rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --sybc-muted );
}

.sybc__fareopts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sybc__fareopt {
	flex: 1 1 12rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var( --sybc-free-border );
	border-radius: var( --sybc-radius );
	cursor: pointer;
	background: var( --sybc-free );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sybc__fareopt:hover {
	border-color: var( --sybc-accent );
}

.sybc__fareopt[data-sybc-on] {
	border-color: var( --sybc-pick );
	box-shadow: inset 0 0 0 1px var( --sybc-pick );
}

/* The radio itself is kept in the flow for keyboard and screen readers, and
 * pulled out of the visual layout — the label is the control. */
.sybc__fareopt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.sybc__fareopt input:focus-visible + .sybc__farename {
	outline: 2px solid var( --sybc-accent );
	outline-offset: 2px;
}

.sybc__farename {
	font-weight: 600;
	color: var( --sybc-ink );
}

.sybc__farenote {
	font-size: 0.85rem;
	color: var( --sybc-muted );
}

/* The kitchens. A row of tabs that wraps, rather than a select: twelve is few
 * enough to show and the names are the point. */
.sybc__cuisines {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 1rem;
}

.sybc__cuisine {
	appearance: none;
	border: 1px solid var( --sybc-free-border );
	background: var( --sybc-free );
	color: var( --sybc-muted );
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.sybc__cuisine:hover {
	border-color: var( --sybc-accent );
	color: var( --sybc-ink );
}

.sybc__cuisine[aria-current="true"] {
	background: var( --sybc-accent );
	border-color: var( --sybc-accent );
	color: var( --sybc-free );
}

/* One photograph per kitchen, cross-fading as the guest turns between them.
 * The fade is on a wrapper rather than on the image so the swap cannot be seen
 * mid-load. */
.sybc__cuisineshot,
.sybc__fareshot {
	margin: 0 0 1rem;
	border-radius: var( --sybc-radius );
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.16s ease;
}

.sybc__cuisineshot[data-sybc-fading] {
	opacity: 0;
}

.sybc__cuisineshot img,
.sybc__fareshot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* And the drawn stand-in, which takes the same box. The img beside it is
 * hidden rather than removed, so the frame never collapses mid-fade. */
.sybc__cuisineshot .sybc__placeholder,
.sybc__fareshot .sybc__placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.sybc__cuisineshot img[hidden] {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.sybc__cuisineshot,
	.sybc__fareshot {
		transition: none;
	}
}

/* A course, and the dishes under it. */
.sybc__course {
	margin: 0 0 1.4rem;
}

.sybc__coursename,
.sybc__barheading {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --sybc-muted );
	border-bottom: 1px solid var( --sybc-line );
	padding-bottom: 0.3rem;
}

.sybc__barheading {
	margin-top: 1.6rem;
	color: var( --sybc-ink );
	font-size: 0.85rem;
}

.sybc__dishes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sybc__dish {
	margin: 0 0 0.9rem;
	max-width: 42rem;
}

.sybc__dishname {
	margin: 0;
	font-weight: 600;
	color: var( --sybc-ink );
	line-height: 1.35;
}

.sybc__dishdesc {
	margin: 0.1rem 0 0;
	color: var( --sybc-muted );
	line-height: 1.5;
}

/* The pizza oven, badged where it applies. A gas-fired oven on a sailing
 * catamaran is worth pointing at. */
.sybc__ovenbadge {
	display: inline-block;
	margin-left: 0.45rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var( --sybc-partial );
	color: var( --sybc-partial-text );
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.1em;
	white-space: nowrap;
}

.sybc__ovennote {
	max-width: 42rem;
	margin: 0 0 1.2rem;
	padding: 0.7rem 0.85rem;
	border-left: 3px solid var( --sybc-partial );
	background: var( --sybc-out );
	border-radius: 0 var( --sybc-radius ) var( --sybc-radius ) 0;
	color: var( --sybc-ink );
	line-height: 1.5;
	font-size: 0.92rem;
}

.sybc__dishwine {
	margin: 0.2rem 0 0;
	font-size: 0.86rem;
	color: var( --sybc-turn );
}

.sybc__winelabel {
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var( --sybc-muted );
}

.sybc__menufine {
	max-width: 42rem;
	margin: 1.2rem 0 0;
	font-size: 0.88rem;
	color: var( --sybc-muted );
}

/* The compact galley sample on a day charter, above the add-ons. Set apart from
 * the add-ons below it so the two do not read as one list. */
.sybc__compact {
	margin: 0 0 1.6rem;
	padding: 0 0 1.4rem;
	border-bottom: 1px solid var( --sybc-line );
}

/* The theme hides dynamically created selects and buttons in places; the menu
 * builds all of its own, so it says plainly that they are visible. The hidden
 * attribute still wins, which is the next rule. */
.sybc .sybc__cuisines .sybc__cuisine,
.sybc .sybc__fareopts .sybc__fareopt {
	visibility: visible;
}

/* The public menus page. The booking form's own menu styles do the dishes; this
 * only has to separate twelve kitchens from each other on a page with no cards
 * to do it for them. */
.sybc-menus__cuisine {
	margin: 0 0 3rem;
	padding: 0 0 2rem;
	border-bottom: 1px solid var( --sybc-line );
}

.sybc-menus__cuisine:last-child {
	border-bottom: 0;
}

.sybc-menus__name {
	margin: 0 0 0.8rem;
	line-height: 1.2;
}

.sybc-menus__fare {
	margin: 1.8rem 0 0.9rem;
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --sybc-ink );
}

.sybc-menus__shot {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var( --sybc-radius );
	margin: 0 0 1rem;
}

/* The drawn placeholder stands in for a kitchen with no photograph. It is a
 * figure wrapping an SVG rather than an img, so the sizing the image was doing
 * for itself has to be done here, and the figure's own default margin undone. */
figure.sybc-menus__shot--placeholder {
	padding: 0;
	overflow: hidden;
	object-fit: initial;
}

/* Operator tags on a dish — pre-order, long lead time, market price.
 *
 * Quieter than the oven badge on purpose. The oven is a thing to want; these
 * are things to know, and two loud badges on one line would compete. */
.sybc__tag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.08rem 0.42rem;
	border: 1px solid var( --sybc-free-border );
	border-radius: 999px;
	background: var( --sybc-out );
	color: var( --sybc-muted );
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.12em;
	white-space: nowrap;
}

/* Which kitchen a classic came from.
 *
 * Only ever rendered on the Classics menu, which is assembled across the other
 * twelve. Quieter again than an operator tag and in italic rather than caps: it
 * is an aside about where the dish lives, not a thing the guest has to act on.
 * No border, because a third pill on the line turns a menu into a form. */
.sybc__dishhome {
	display: inline-block;
	margin-left: 0.45rem;
	color: var( --sybc-muted );
	font-size: 0.74rem;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Planning now, or planning later.
 *
 * The tools fold away until a guest asks for them. Animated on
 * grid-template-rows rather than max-height, because a guessed max-height is
 * either too small for twelve grounds or slow for two.
 * ------------------------------------------------------------------ */

.sybc__planning {
	border: 0;
	padding: 0;
	margin: 0 0 1.2rem;
}

.sybc__planning > legend {
	padding: 0;
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --sybc-muted );
}

.sybc__planlist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sybc__plantools {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.28s ease, opacity 0.22s ease;
}

.sybc__plantools > .sybc__plantools-inner {
	overflow: hidden;
	min-height: 0;
}

.sybc__plantools[data-sybc-open] {
	grid-template-rows: 1fr;
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.sybc__plantools {
		transition: none;
	}
}

/* The menus page's sticky bar: the fare, and a pill per kitchen.
 *
 * Both follow the page because the page is very long. On a phone the pills
 * scroll sideways rather than wrapping to four lines and eating the screen. */
.sybc-menus__bar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var( --sybc-free );
	border-bottom: 1px solid var( --sybc-line );
	padding: 0.7rem 0 0.6rem;
	margin: 0 0 1.6rem;
}

.sybc-menus__fares {
	display: flex;
	gap: 0.35rem;
	margin: 0 0 0.5rem;
}

.sybc-menus__fareopt {
	appearance: none;
	border: 1px solid var( --sybc-free-border );
	background: var( --sybc-free );
	color: var( --sybc-muted );
	border-radius: var( --sybc-radius );
	padding: 0.28rem 0.8rem;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sybc-menus__fareopt:hover {
	border-color: var( --sybc-accent );
	color: var( --sybc-ink );
}

.sybc-menus__fareopt[aria-checked="true"] {
	background: var( --sybc-pick );
	border-color: var( --sybc-pick );
	color: var( --sybc-pick-text );
}

/* The kitchens wrap where there is room, which on anything wider than a phone
 * is everywhere. A row that scrolls with no edge to it looks finished at
 * whatever pill happens to be cut off, and that is a worse trade than a second
 * line of pills. */
.sybc-menus__pillwrap {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.2rem;
}

.sybc-menus__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	flex: 1 1 auto;
	min-width: 0;
}

.sybc-menus__pills .sybc__cuisine {
	flex: 0 0 auto;
}

.sybc-menus__arrow {
	appearance: none;
	flex: 0 0 auto;
	width: 1.8rem;
	height: 1.8rem;
	padding: 0;
	border: 1px solid var( --sybc-free-border );
	border-radius: 999px;
	background: var( --sybc-free );
	color: var( --sybc-ink );
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.sybc-menus__arrow:hover {
	border-color: var( --sybc-accent );
}

/* On a phone the pills scroll sideways instead, because four lines of them
 * would be most of the screen. That is the case the arrows and the edge fades
 * exist for — the script shows them only when something really is past the
 * edge, so above this width they never appear. */
@media ( max-width: 47.99rem ) {
	.sybc-menus__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.2rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.sybc-menus__pills::-webkit-scrollbar {
		display: none;
	}

	.sybc-menus__pillwrap::before,
	.sybc-menus__pillwrap::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 1.6rem;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s ease;
		z-index: 1;
	}

	.sybc-menus__pillwrap::before {
		left: 1.8rem;
		background: linear-gradient( to right, var( --sybc-free ), rgba( 255, 255, 255, 0 ) );
	}

	.sybc-menus__pillwrap::after {
		right: 1.8rem;
		background: linear-gradient( to left, var( --sybc-free ), rgba( 255, 255, 255, 0 ) );
	}

	.sybc-menus__pillwrap[data-sybc-edge*="l"]::before,
	.sybc-menus__pillwrap[data-sybc-edge*="r"]::after {
		opacity: 1;
	}
}

/* The theme's blog sidebar, where it insists on one beside a menu.
 *
 * A menu in a 628px column with Recent Posts next to the desserts is not a
 * menu. The full-width page template was not enough on its own here: this
 * theme still renders the widget area and floats the content left at a fixed
 * width beside it, so the column has to be released as well as the sidebar
 * hidden.
 *
 * Both spellings of the class are listed because themes disagree about the
 * punctuation, and this one uses the underscore. !important because the rules
 * being overridden are the theme's own layout.
 *
 * .sybc-wide-page is the general one, added to any page carrying a shortcode
 * that needs the width. .sybc-menus-page is kept alongside it so the menus
 * page cannot regress if the general filter ever stops firing for it. */
.sybc-menus-page .sidebar,
.sybc-menus-page .widget_area,
.sybc-menus-page .widget-area,
.sybc-menus-page .sidebar-area,
.sybc-menus-page #secondary,
.sybc-wide-page .sidebar,
.sybc-wide-page .widget_area,
.sybc-wide-page .widget-area,
.sybc-wide-page .sidebar-area,
.sybc-wide-page #secondary {
	display: none !important;
}

.sybc-menus-page .content_wrap > .content,
.sybc-menus-page .page_content_wrap .content,
.sybc-wide-page .content_wrap > .content,
.sybc-wide-page .page_content_wrap .content {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* The "there is more of this" panel, where a page is cut short or sampled.
 *
 * Deliberately not frosted glass: the frost says "this exists and you cannot
 * read it", which is right over a masked price. This says "the page continues",
 * which wants to look like an invitation rather than a lock. */
.sybc-more {
	margin: 1.6rem 0;
	padding: 1.2rem 1.3rem;
	border: 1px solid var( --sybc-free-border );
	border-left: 3px solid var( --sybc-turn );
	border-radius: var( --sybc-radius );
	background: var( --sybc-out );
}

.sybc-more__title {
	margin: 0 0 0.35rem;
	font-weight: 700;
	color: var( --sybc-ink );
}

.sybc-more__body {
	margin: 0 0 0.9rem;
	max-width: 40rem;
	color: var( --sybc-muted );
	line-height: 1.55;
}

/* A sampled dish keeps its shape and loses its words. */
.sybc__dish--frosted .sybc-frost__text {
	filter: blur( 4px );
	opacity: 0.55;
	user-select: none;
	pointer-events: none;
}

.sybc__dish--frosted {
	cursor: default;
}