/* /l/{slug} v2 — full-screen map with the places in a bottom tray.
   The look of the main site's Saved Tray (assets/css/saved-tray.css), copied
   here as values, not loaded: that file is never edited for this page.
   Three layers on one screen; the page itself never scrolls. */

:root {
	--coral: #E0533D; --coral-d: #C2402B; --red-ink: #B8392A;
	--cream: #F4F0E8; --paper: #F7F3EA; --card: #FFFFFF; --ink: #1B1A17; --muted: #5C564E; --line: #1B1A1722;
	--green: #1F5A43;
	--serif: Fraunces, Georgia, "Times New Roman", serif;
	--sans: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
	--vh: 100vh;            /* fallback where dvh is unknown */
	--peek-h: 132px;        /* set from the header by the script */
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
html { background: var(--cream); }
body { font-family: var(--sans); color: var(--ink); background: var(--cream); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 1. Map: the whole viewport, edge to edge ─────────────────────────── */
.tm-map { position: fixed; inset: 0; height: var(--vh); width: 100%; z-index: 0; background: #E9E4DA; }
.tm-map--none { background: linear-gradient(160deg, #EDE6D6, #E3DCCB); }
/* Pins as v1 / the rest of the site (this page does not load style.css). */
.pg-marker {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--coral); color: #fff; border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	display: flex; align-items: center; justify-content: center;
	font: 700 11px var(--sans); cursor: pointer;
	transition: width .18s, height .18s, font-size .18s, background .18s;
}
.pg-marker.is-on { width: 36px; height: 36px; font-size: 14px; background: var(--coral-d); border-width: 3px; z-index: 5; box-shadow: 0 0 0 4px rgba(224, 83, 61, .28), 0 3px 10px rgba(0, 0, 0, .35); }
.pg-marker.is-near { background: var(--coral-d); }
.maplibregl-marker:has(.pg-marker.is-on) { z-index: 5; }
.maplibregl-popup { display: none !important; }   /* the card is where the details are */
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: var(--tray-h, 0px); transition: bottom .3s; }

/* ── 2. Label, top left, safe-area aware ──────────────────────────────── */
.tm-label {
	position: fixed; z-index: 3; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px));
	max-width: min(76vw, 340px); padding: 10px 14px 11px; border-radius: 16px;
	background: rgba(251, 249, 244, .94); box-shadow: 0 4px 16px rgba(27, 26, 23, .16);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tm-label__prev { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: var(--red-ink); }
.tm-label__k { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.tm-label__h { margin: 2px 0 6px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tm-label__n { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; }

/* ── 3. Tray: the main site's look; its height is the state ───────────── */
.tm-dim { position: fixed; inset: 0; z-index: 1; background: rgba(20, 18, 16, .35); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.is-full .tm-dim { opacity: 1; }
.tm-tray {
	position: fixed; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%);
	width: min(100%, 480px); height: var(--h, 45%); max-height: calc(var(--vh) - 10px);
	display: flex; flex-direction: column;
	background: var(--paper); border-radius: 24px 24px 0 0;
	box-shadow: 0 -6px 24px rgba(27, 26, 23, .18);
	transition: height .32s cubic-bezier(.22, 1, .36, 1);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	touch-action: none;
}
.tm-tray.is-drag { transition: none; }
.tm-tray[data-state="peek"] { --h: calc(var(--peek-h) + env(safe-area-inset-bottom, 0px)); }
.tm-tray[data-state="half"] { --h: calc(var(--vh) * .45); }
.tm-tray[data-state="full"] { --h: calc(var(--vh) * .9); }
.tm-handle { flex: none; height: 22px; width: 100%; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: grab; }
.tm-grab { width: 40px; height: 4px; border-radius: 2px; background: #CFCAC2; }
.tm-handle:focus-visible { outline: none; }
.tm-handle:focus-visible .tm-grab { background: var(--coral); }

.tm-hd { flex: none; padding: 0 16px 10px; cursor: grab; }
/* The count sits on its own line under the actions, and only when the tray is open. */
.tm-hd__n { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.tm-hd__n b { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 18px; color: var(--ink); margin-right: 2px; }
.tm-tray[data-state="peek"] .tm-hd__n { display: none; }
.tm-hd__act { display: flex; gap: 6px; min-width: 0; }
.tm-btn--ic { width: 36px; padding: 0; justify-content: center; flex: none; }
.tm-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: 999px; background: var(--card);
	font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
	min-width: 0;
}
.tm-btn svg { flex: none; }
.tm-btn--share { background: var(--coral); border-color: var(--coral); color: #fff; }
.tm-btn:active { transform: scale(.95); }
.tm-btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
/* Narrow phones: Share and Add to home screen share the free width, labels shortened by ellipsis. */
.tm-btn span { overflow: hidden; text-overflow: ellipsis; }
.tm-btn--share { flex: none; }
#tm-home { flex: 1 1 auto; justify-content: center; padding: 0 10px; gap: 5px; }
@media (max-width: 400px) { .tm-btn { font-size: 12px; } .tm-btn--share { padding: 0 11px; } }
.tm-btn[hidden] { display: none; }

/* Peek: the first four places, small. Only while the tray is folded. */
.tm-peek { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.tm-tray:not([data-state="peek"]) .tm-peek { display: none; }
.tm-peek__c { position: relative; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(27, 26, 23, .16); }
.tm-peek__c img { width: 100%; height: 100%; object-fit: cover; }
.tm-peek__c i { font-style: normal; }
.tm-peek__c b { position: absolute; left: 2px; top: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--coral); color: #fff; font-size: 9.5px; display: flex; align-items: center; justify-content: center; }
.tm-peek__more { font-size: 12.5px; font-weight: 700; color: var(--red-ink); padding-left: 4px; }

/* The cards: a vertical list that scrolls inside the tray, never the page. */
.tm-cards {
	flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 16px 16px; list-style: none;
	overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
	display: flex; flex-direction: column; gap: 10px; scrollbar-width: none;
}
.tm-cards::-webkit-scrollbar { display: none; }
.tm-tray[data-state="peek"] .tm-cards { visibility: hidden; }
.tm-card {
	display: flex; gap: 12px; padding: 10px; background: var(--card); border: 1px solid var(--line);
	border-radius: 16px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; scroll-margin: 8px;
}
.tm-card:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.tm-card.is-on { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(224, 83, 61, .25); background: #FFFBF9; }
.tm-card__img {
	position: relative; flex: none; width: 96px; height: 96px; border-radius: 12px; overflow: hidden;
	display: flex; align-items: center; justify-content: center; font-size: 30px; background: #EFEAE0;
}
.tm-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-card__img i { font-style: normal; }
.tm-card__no {
	position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--coral); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.tm-card__b { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 2px 0; }
.tm-card__cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-card__name { font-size: 16px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-card__tip { font-size: 13px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-card__go {
	align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 4px;
	padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ink);
	font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--ink); background: #fff;
}
.tm-card__go:hover { background: var(--ink); color: #fff; }

.tm-foot { list-style: none; padding: 14px 6px 6px; text-align: center; font-size: 13px; color: var(--muted); }
.tm-foot p { margin: 0 0 8px; }
.tm-foot__mk[hidden] { display: none; }
.tm-foot b { color: var(--ink); }
.tm-foot__go { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; text-decoration: none; }
.tm-foot__by { margin-top: 10px !important; font-size: 12px; }
.tm-foot__by a { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--coral); text-decoration: none; }

/* Add-to-home-screen steps and the toast */
.tm-sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 18, 16, .45); }
.tm-sheet[hidden] { display: none; }
.tm-sheet__box { width: min(100%, 480px); padding: 20px 20px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-radius: 24px 24px 0 0; }
.tm-sheet h2 { margin: 0 0 12px; font-family: var(--serif); font-style: italic; font-size: 22px; }
.tm-sheet__steps { margin: 0 0 16px; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
.tm-sheet__steps li { margin-bottom: 6px; }
.tm-sheet__steps[hidden] { display: none; }
.tm-ic { display: inline-flex; vertical-align: -3px; color: #0A84FF; }
/* Edit sheet */
.tm-ed { max-height: calc(var(--vh) - 40px); overflow-y: auto; }
.tm-ed__l { display: block; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tm-ed__name { width: 100%; height: 46px; margin-bottom: 16px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: 600 16px var(--sans); color: var(--ink); }
.tm-ed__name:focus { outline: 2px solid var(--coral); border-color: transparent; }
.tm-ed__list { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: ed; }
.tm-ed__list li { counter-increment: ed; display: flex; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tm-ed__list li::before { content: counter(ed); flex: none; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tm-ed__list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-ed__list button { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); font-size: 15px; line-height: 1; }
.tm-ed__list li:first-child [data-mv="-1"], .tm-ed__list li:last-child [data-mv="1"] { visibility: hidden; }
.tm-ed__list [data-rm] { color: var(--red-ink); font-size: 18px; }
.tm-ed__add { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.tm-ed__add a { color: var(--coral); font-weight: 700; }
.tm-ed__err { margin: 0 0 10px; font-size: 13px; color: var(--red-ink); font-weight: 600; }
.tm-ed__err[hidden] { display: none; }
.tm-ed__btns { display: flex; gap: 8px; }
.tm-ed__no { flex: none; height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-weight: 700; font-size: 15px; }
.tm-ed__btns .tm-sheet__ok { flex: 1; }
.tm-sheet__ok:disabled { opacity: .6; }
.tm-sheet__ok { width: 100%; height: 48px; border: 0; border-radius: 14px; background: var(--coral); color: #fff; font-weight: 700; font-size: 15px; }
.tm-toast {
	position: fixed; z-index: 11; left: 50%; bottom: calc(var(--tray-h, 120px) + 12px); transform: translate(-50%, 12px);
	padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600;
	opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap;
}
.tm-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Desktop: the same layout; the tray centred, max 480px (above). */
@media (min-width: 900px) { .tm-label__h { font-size: 22px; } }

@media (prefers-reduced-motion: reduce) {
	.tm-tray, .tm-dim, .pg-marker, .tm-toast, .maplibregl-ctrl-bottom-right { transition: none !important; }
}