/* Hosts Guide — shared chrome for the layouts that live in static/guide/layouts/.
 *
 * Everything here reads the design tokens public.html sets (--accent, --surface,
 * --text, --text-soft, --muted, --border, --chip, --page-bg), so tone and accent
 * keep working across every layout without a per-layout tone stylesheet. */

:root {
	/* Readable ink for text sitting ON the accent. _shared.js recomputes this
	 * from the host's accent (a pale lime needs dark text, not white); white is
	 * the sane default for the brand pink if the script hasn't run yet. */
	--on-accent: #ffffff;
	/* The accent used AS ink — small text and icons on the page background.
	 * Darkened (or lightened, in dark tone) until it clears AA. Falls back to the
	 * raw accent, which is correct for the default brand pink. */
	--accent-ink: var(--accent);
}

/* ---- Fly-up sheet built by GuideLayout.sheet() ---- */
/* `.offcanvas.offcanvas-bottom` is what Bootstrap pins the height with, and at
 * (0,2,0) it beat a bare `.gl-sheet` — so every one of these sheets was stuck at
 * the default `--bs-offcanvas-height: 30vh` no matter how little content it had.
 * That is why they opened as a letterbox strip and scrolled. Matched here at
 * (0,3,0) so `height:auto` actually applies and a sheet is as tall as it needs
 * to be, capped so it never swallows the whole screen. The menu layout never had
 * the bug because it sets the height inline. */
.offcanvas.offcanvas-bottom.gl-sheet {
	height: auto;
	max-height: 88vh;
	background: var(--surface);
	color: var(--text);
	border-top-left-radius: 22px;
	border-top-right-radius: 22px;
}
.gl-sheet-grip {
	display: flex;
	justify-content: center;
	padding: 12px 0 4px;
}
.gl-sheet-grip span {
	width: 40px;
	height: 5px;
	border-radius: 3px;
	background: var(--border);
}
.gl-sheet .offcanvas-header {
	border: 0;
	padding: 8px 20px 6px;
}
.gl-sheet .offcanvas-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text);
	margin: 0;
}
.gl-sheet .offcanvas-title i {
	color: var(--accent-ink);
	font-size: 1.5rem;
}
.gl-sheet .offcanvas-body {
	padding: 4px 20px 28px;
	overflow-y: auto;
	color: var(--text-soft);
	font-size: 1rem;
	line-height: 1.6;
}
/* A card moved into a sheet sheds its card chrome — the sheet is the container. */
.gl-sheet .offcanvas-body > .card,
.gl-sheet .offcanvas-body .card-body {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* The header duplicates the sheet title. */
.gl-sheet .offcanvas-body .card-header { display: none !important; }
/* Content moved into a sheet is never clamped — there is room for all of it. */
.gl-sheet .welcome-clamp,
.gl-sheet .section-clamp,
.gl-sheet .getin-clamp {
	display: block !important;
	-webkit-line-clamp: none !important;
	overflow: visible !important;
}
.gl-sheet .section-more,
.gl-sheet #welcome-more,
.gl-sheet #getin-more { display: none !important; }
[data-tone="dark"] .gl-sheet .btn-close { filter: invert(1) grayscale(1); }

/* ---- Vertical rhythm inside a sheet ----
 *
 * The sheet itself is already content-sized (height:auto above), so a short
 * sheet is not what made "Your stay" look squashed. Two other things did:
 *
 * 1. #welcome-times and #welcome-access are Bootstrap `.row.g-4` / `.g-5`. A row
 *    carries `margin-top: calc(-1 * var(--bs-gutter-y))`, so the moment they
 *    become direct children of a sheet body they pull themselves UP into the
 *    block above by 1rem / 1.25rem.
 * 2. The `.separator.my-6` dividers that gave them breathing room in the card
 *    are left behind — every layout moves the rows, never the separators.
 *
 * So restore the rhythm with a rule instead of moving more nodes. menu solves
 * the same problem at #sheet-home; this is that fix for every other layout. */
.gl-sheet .offcanvas-body > .row { margin-top: 0 !important; }
.gl-sheet #welcome-times,
.gl-sheet #welcome-access,
.gl-sheet .hg-host-contact {
	margin-top: 22px !important;
	padding-top: 22px;
	border-top: 1px solid var(--border);
}
.gl-sheet #welcome-times.row,
.gl-sheet #welcome-access.row,
.gl-sheet .hg-host-contact.row { --bs-gutter-y: 18px; row-gap: 18px; }
/* Two 50% columns inside a ~20px-padded phone sheet leaves ~150px beside an
 * fs-2x icon. Full width reads far better and costs nothing vertically that the
 * sheet doesn't have. */
@media (max-width: 480px) {
	.gl-sheet .offcanvas-body .col-6 { width: 100% !important; }
}
/* A map or hero pinned to a fixed pixel height fights the content-sized sheet:
 * it is the real reason a sheet can look stunted. Let them size to the sheet. */
.gl-sheet #guide-map,
.gl-sheet .header-hero { height: 190px !important; }

/* ---- Tap-to-copy affordance ---- */
.gl-copy { position: relative; cursor: pointer; }
.gl-copied {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%) scale(.9);
	opacity: 0;
	pointer-events: none;
	background: var(--accent);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	transition: opacity .18s ease, transform .18s ease;
}
.gl-copy.is-copied .gl-copied {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

/* ---- Utility shared by the passes that hide the stock chrome ---- */
.gl-hidden { display: none !important; }

/* A pass that threw mid-restructure leaves the guide readable rather than half
 * rebuilt: fall back to the plain rendered document. */
html[data-layout-failed="1"] .gl-hidden { display: revert !important; }

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