/* Application layout and behaviour; visual direction lives in graphics.css.
   The page is a full-viewport app with no header: the map starts at the top
   edge. Search (with the マイリスト button) floats on the map; lists and booth
   details open in one side pane (over the map on phones). app.js toggles
   pane.hidden. */
[hidden] {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	overscroll-behavior: none;
}

.views {
	position: relative;
	display: grid;
	min-height: 0;
}

[data-view-panel] {
	grid-area: 1 / 1;
	min-width: 0;
	min-height: 0;
}

/* ---------- map view ---------- */

/* Google Maps-style split: the selected booth's panel or the list pane
   (.has-selection / .has-list, only one shown) sits in the layout beside the
   map (over it on phones). The canvas shrinks instead of being covered, so
   map.js's ResizeObserver refits and the map stays interactive. */
.map-view {
	position: relative;
	display: flex;
	overflow: hidden;
}

/* Size container so the search dropdown can stay inside short phone maps. */
.map-canvas {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	container-type: size;
}

.detail-panel,
.list-panel {
	position: relative;
	z-index: 6;
	display: flex;
	flex-direction: column;
	flex: 0 0 clamp(360px, 30vw, 390px);
	min-width: 0;
	min-height: 0;
}

#detail-content,
#list-content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* The saved list uses flat rows and the same sheet as booth detail. */
#list-content {
	/* Restoring the list owns its scroll position when rows are rebuilt. */
	overflow-anchor: none;
}

#list-content .list-head {
	position: sticky;
	top: 0;
}

#list-content .booth-list {
	gap: 0;
	padding: 0;
	overflow: visible;
}

.list-status-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.list-status-tabs button {
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font-size: 12px;
	white-space: nowrap;
}

.list-status-tabs button[aria-pressed="true"] {
	border-color: var(--accent);
	background: var(--want-tint);
	color: var(--want-text);
}

#list-panel {
	background: var(--surface);
}

#list-panel .booth-card {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
}

#list-panel .booth-card::before {
	display: none;
}

#list-panel .booth-card:hover {
	background: var(--hover);
}

#list-panel .card-name {
	display: grid;
	gap: 4px;
	width: 100%;
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
}

.card-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.card-content {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.expandable-copy {
	min-width: 0;
}

.expandable-text,
#list-panel .expandable-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--copy-lines, 2);
	line-clamp: var(--copy-lines, 2);
	overflow: hidden;
}

.expandable-text[data-expanded="true"],
#list-panel .expandable-text[data-expanded="true"] {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

.text-expand-button {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin: 2px 0 0;
	padding: 4px 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--accent-strong);
	font-size: 12px;
	font-weight: 600;
}

.text-expand-button:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.text-expand-button:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

#list-panel .card-description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.6;
}

#list-panel .card-actions {
	align-self: start;
	display: grid;
	grid-template-columns: 32px;
	gap: 6px;
	margin: 0;
}

#list-panel .card-actions:has(.personal-edit-button) {
	grid-template-columns: repeat(2, 32px);
}

#list-panel :is(.bookmark-button, .personal-edit-button, .visit-button) {
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 6px;
	border-radius: 50%;
}

#list-panel .visit-button span {
	display: none;
}

#list-panel .visit-button {
	grid-column: 2;
}

.list-head:has(.list-share:not([hidden])) .list-title-row {
	padding-right: 80px;
}

.list-share {
	position: absolute;
	top: 10px;
	right: 50px;
	z-index: 6;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 7px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink);
}

.list-share:disabled {
	opacity: 0.35;
	cursor: default;
}

.list-share svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.shared-list-intro {
	padding: 10px 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink-soft);
}

.shared-list-actions,
.share-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.shared-list-actions .button {
	min-height: 32px;
	padding: 6px 10px;
	font-size: 12px;
}

.shared-list-actions .text-button {
	white-space: nowrap;
}

.shared-record-marker {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line);
	border-radius: 50%;
}

.shared-record-marker svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.shared-record-marker.want {
	background: var(--bookmark-tint);
	color: var(--bookmark-text);
	fill: currentColor;
}

.shared-record-marker.visited {
	background: var(--visited-tint);
	color: var(--visited-text);
	fill: none;
}

.shared-detail-caption {
	color: var(--ink-soft);
	font-size: 12px;
}

.share-url-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--ink-soft);
}

.share-url {
	width: 100%;
	min-width: 0;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface-muted);
	color: var(--ink);
	font-size: 12px;
}

.share-actions {
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.share-actions .button {
	flex: 1 1 auto;
}

#share-send svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#share-message:not(:empty) {
	padding: 10px;
	border-radius: var(--radius-s);
	background: var(--want-tint);
	color: var(--want-text);
}

.detail-back {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	font-size: 18px;
}

.detail-panel:has(.detail-back:not([hidden])) .detail-header {
	padding-left: 56px;
}

.detail-sheet-handle {
	display: none;
}

.detail-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
}

.detail-header {
	position: sticky;
	top: 0;
	z-index: 2;
}

.map-viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.smap-svg {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

.smap.is-dragging .smap-svg,
.smap.is-dragging .smap-booth {
	cursor: grabbing;
}

.smap-empty {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Name search, top-left over the map. Search (10–56px) and the floor tabs
   below it (64–106px) stay inside the 114px map.js reserves at the top.
   With no header, both clear the notch / status bar via safe-area insets. */
.map-search {
	--safe-l: env(safe-area-inset-left, 0px);
	--safe-r: env(safe-area-inset-right, 0px);
	position: absolute;
	top: calc(10px + env(safe-area-inset-top, 0px));
	left: calc(10px + var(--safe-l));
	z-index: 7;
	width: min(352px, calc(100% - 20px - var(--safe-l) - var(--safe-r)));
}

.map-search-form {
	display: flex;
	align-items: center;
	height: 46px;
}

.map-search-form input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
}

.map-search-form input::-webkit-search-cancel-button,
.map-search-form input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.map-search-clear,
.map-search-submit {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	touch-action: manipulation;
}

/* マイリスト entry after the search icon; 44px hit area, count badge on top. */
.map-list-button {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	touch-action: manipulation;
}

.map-list-count {
	position: absolute;
	top: 3px;
	right: 2px;
}

/* Candidates drop below the field; bounded so the map stays visible. */
.map-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: min(40dvh, 300px);
	max-height: min(40dvh, 300px, calc(100cqh - 74px));
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.map-search-result {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	min-height: 48px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.map-overlay-top {
	position: absolute;
	top: calc(64px + env(safe-area-inset-top, 0px));
	left: calc(10px + env(safe-area-inset-left, 0px));
	z-index: 4;
	display: flex;
	gap: 8px;
	pointer-events: none;
}

.map-overlay-top > * {
	pointer-events: auto;
}

.map-legend {
	position: absolute;
	left: 10px;
	bottom: calc(10px + env(safe-area-inset-bottom));
	z-index: 4;
	pointer-events: none;
	border-radius: var(--radius);
}

/* Small entry to the 位置未確認 list, just above the legend. */
.unplaced-open {
	position: absolute;
	left: 10px;
	bottom: calc(52px + env(safe-area-inset-bottom));
	z-index: 4;
	touch-action: manipulation;
}

/* 3D/2D switch in the lower-right corner,
   clear of the search and floor tabs at the top-left. */
.map-overlay-controls {
	position: absolute;
	right: calc(10px + env(safe-area-inset-right));
	bottom: calc(10px + env(safe-area-inset-bottom));
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	width: 74px;
}

.map-overlay-controls .projection-switch {
	width: 46px;
}

.map-about {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex: none;
	min-height: 32px;
	padding: 6px 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface);
	color: var(--ink-soft);
	font-size: 11px;
	white-space: nowrap;
}

.map-about svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.map-about:hover {
	background: var(--hover);
}

.map-about:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.detail-kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.about-links {
	display: grid;
	gap: 12px;
	font-size: 13px;
	line-height: 1.6;
}

.about-links a {
	color: var(--accent-strong);
	text-underline-offset: 3px;
}

.consent-notices {
	display: grid;
	gap: 16px;
}

.consent-notices h3 {
	margin-bottom: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.consent-notices p {
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.7;
}

#consent-title:focus {
	outline: none;
}

.consent-check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 14px 0 8px;
	font-size: 13px;
	line-height: 1.5;
}

.consent-check input {
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--accent-strong);
}

#consent-accept {
	width: 100%;
}

.utility-dialog > .consent-storage {
	margin: 12px 0;
	font-size: 11px;
	line-height: 1.6;
}

/* The detail panel replaces the floating preview; nothing covers the map. */
.selected-preview {
	display: none !important;
}

.map-loading {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
}

.detail-profile-status:not(:empty) {
	padding: 12px 0;
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.7;
}

.detail-profile-status .text-button {
	margin-top: 8px;
}

/* ---------- list pane (saved / 位置未確認 / Coffee Village) ---------- */

/* The heading stays visible while the rows and utilities scroll together. */
.list-head {
	position: relative;
	z-index: 5;
	flex: none;
}

.list-title-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.list-title-row h2 {
	flex: 0 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.list-close {
	top: 10px;
	right: 10px;
}

/* Record status is inside refinements; sort stays beside the dropdown. */
.list-heading {
	position: relative;
}

.list-heading #status-filter {
	flex: none;
	width: auto;
}

.list-heading #sort-select {
	flex: none;
	width: auto;
	min-height: 32px;
	margin-left: auto;
	padding: 6px 30px 6px 10px;
	border-radius: 999px;
	font-size: 12px;
}

#result-count {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Collapsed refinements open as a dropdown over the list, so the list
   heading does not jump when they are toggled. */
.search-refinements {
	flex: none;
}

.search-refinements > summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.search-refinements > summary::-webkit-details-marker {
	display: none;
}

.refinements-body {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	z-index: 10;
	display: grid;
	gap: 14px;
	max-height: min(60dvh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.record-refinement,
.daybar {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.filters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.refine-field {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.booth-list {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 8px;
	padding: 10px 12px 16px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.booth-list > .empty-state {
	grid-column: 1 / -1;
}

/* ---------- card helpers (markup from app.js) ---------- */

.card-name {
	cursor: pointer;
}

.card-name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.card-note {
	white-space: pre-line;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-interest {
	font-size: 12px;
	font-weight: 600;
	color: var(--bookmark-text);
}

.personal-edit-button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-soft);
}

.personal-edit-button svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.personal-edit-button:hover {
	border-color: var(--accent);
	background: var(--want-tint);
	color: var(--accent-strong);
}

/* Keep the saved state, editing and the user's memo in one group. */
.detail-actions {
	gap: 8px;
	margin: 0;
}

.detail-actions :is(.bookmark-button, .personal-edit-button, .visit-button) {
	width: auto;
	min-height: 44px;
	height: 44px;
	gap: 6px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--surface-muted);
	color: var(--ink);
	font-size: 12px;
	font-weight: 600;
}

.detail-actions .bookmark-button.saved {
	background: var(--bookmark-tint);
	color: var(--bookmark-text);
}

.detail-actions .visit-button.visited {
	background: var(--visited-tint);
	color: var(--visited-text);
}

.detail-actions .personal-edit-button:hover {
	background: var(--hover);
	color: var(--accent-strong);
}

.detail-actions :is(.bookmark-icon, .visit-icon, .personal-edit-button svg) {
	width: 18px;
	height: 18px;
}

.detail-record,
.detail-save-actions {
	margin: 12px 0 16px;
}

.detail-record-copy {
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--surface-muted);
}

.detail-record-interest {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

.detail-record-interest > span {
	margin-right: 5px;
	color: var(--bookmark-text);
	letter-spacing: 2px;
}

.detail-record-note {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.detail-record-author {
	margin-top: 12px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.detail-record-author > span {
	margin-left: 4px;
}

.personal-dialog h2 {
	margin: 0 38px 6px 0;
	font-size: 20px;
}

.utility-dialog > .personal-booth-name {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.interest-field {
	min-width: 0;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.interest-field legend,
.personal-note-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
}

.interest-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.interest-options label {
	position: relative;
	cursor: pointer;
}

.interest-options input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.interest-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-height: 48px;
	padding: 8px 2px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	font-size: 11px;
	color: var(--ink-soft);
}

.interest-stars {
	font-size: 14px;
	line-height: 1;
	color: var(--bookmark-text);
}

.interest-options input:checked + .interest-option {
	border-color: var(--bookmark-color);
	background: var(--bookmark-tint);
	color: var(--bookmark-text);
}

.interest-options input:checked + .interest-option .interest-stars {
	color: var(--bookmark-text);
}

.interest-options input:focus-visible + .interest-option {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

#booth-note {
	display: block;
	width: 100%;
	min-height: 112px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	resize: vertical;
}

#booth-note:focus-visible,
.personal-edit-button:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.personal-save-row {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11px;
	color: var(--muted);
}

.utility-dialog > .personal-privacy {
	margin: 12px 0 20px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--muted);
}

.utility-dialog > .personal-done {
	margin-bottom: 0;
}

.legacy-note > summary {
	cursor: pointer;
}

.legacy-note-text {
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* ---------- priority/comment and share dialogs ---------- */

dialog {
	max-width: 100vw;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.utility-dialog {
	max-height: min(86dvh, 820px);
}

.toast {
	position: fixed;
	left: 50%;
	bottom: calc(68px + env(safe-area-inset-bottom));
	z-index: 50;
	max-width: calc(100vw - 32px);
	transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
	/* fade only: a moving panel would fight the map's resize */
	.detail-panel:not([hidden]),
	.list-panel:not([hidden]) {
		animation: panel-in 0.18s ease-out;
	}

	.utility-dialog[open] {
		animation: dialog-in 0.2s ease-out;
	}

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

	@keyframes dialog-in {
		from {
			transform: translateY(10px);
			opacity: 0;
		}
		to {
			transform: none;
			opacity: 1;
		}
	}
}

/* ---------- small screens (390px target) ---------- */

.shared-booth-options {
	display: grid;
	gap: 6px;
}

.shared-booth-options button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface);
	text-align: left;
	font-size: 13px;
}

.shared-booth-options button[aria-pressed="true"] {
	border-color: var(--accent);
	background: var(--want-tint);
}

.shared-booth-options small {
	color: var(--muted);
	font-size: 11px;
}

@media (max-width: 720px) {
	/* List and detail share a Google Maps-style bottom sheet over the
	   full-height map; sheet.js sets
	   --detail-sheet-height and .sheet-peek / .sheet-expanded on .map-view. */
	.map-view {
		flex-direction: column;
	}

	.map-canvas {
		order: 1;
		min-height: 50%;
	}

	.map-view:is(.has-selection, .has-list) {
		--sheet-height: var(--detail-sheet-height, 44dvh);
	}

	.map-view:is(.has-selection, .has-list).sheet-peek {
		--sheet-height: var(--detail-sheet-height, 156px);
	}

	.map-view:is(.has-selection, .has-list).sheet-expanded {
		--sheet-height: var(
			--detail-sheet-height,
			calc(100% - 8px - env(safe-area-inset-top, 0px))
		);
	}

	.detail-panel,
	.list-panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		width: 100%;
		height: var(--sheet-height, 44dvh);
		max-height: calc(100% - 8px - env(safe-area-inset-top, 0px));
		overflow: hidden;
	}

	.detail-sheet-handle {
		position: relative;
		z-index: 2;
		display: grid;
		place-items: center;
		flex: none;
		width: 100%;
		height: 26px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: grab;
		touch-action: none;
		-webkit-tap-highlight-color: transparent;
	}

	:is(.detail-panel, .list-panel).is-sheet-dragging .detail-sheet-handle {
		cursor: grabbing;
	}

	.detail-sheet-handle > span {
		display: block;
		width: 38px;
		height: 4px;
		border-radius: 4px;
	}

	/* below the handle, beside the title row */
	.detail-close {
		top: 26px;
	}

	.detail-back {
		top: 26px;
	}

	#list-panel :is(.list-close, .list-share) {
		top: 0;
	}

	/* overlays ride above the sheet; hidden once it covers the map */
	.map-view:is(.has-selection, .has-list) .map-legend,
	.map-view:is(.has-selection, .has-list) .map-overlay-controls {
		bottom: calc(var(--sheet-height) + 8px);
	}

	.map-view:is(.has-selection, .has-list) .unplaced-open {
		bottom: calc(var(--sheet-height) + 44px);
	}

	.map-view:is(.has-selection, .has-list).sheet-expanded .map-legend,
	.map-view:is(.has-selection, .has-list).sheet-expanded .map-overlay-controls,
	.map-view:is(.has-selection, .has-list).sheet-expanded .unplaced-open {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	.booth-facts .booth-fact {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 3px;
		padding: 8px 7px;
	}

	.booth-fact dt {
		font-size: 11px;
	}

	.booth-fact dd {
		font-size: 12px;
	}

	/* search spans the canvas minus 8px each side; floors stay under it */
	.map-search {
		top: calc(8px + env(safe-area-inset-top, 0px));
		left: calc(8px + var(--safe-l));
		width: calc(100% - 16px - var(--safe-l) - var(--safe-r));
	}

	.map-overlay-top {
		top: calc(62px + env(safe-area-inset-top, 0px));
		left: calc(8px + env(safe-area-inset-left, 0px));
	}

	.map-legend {
		left: 8px;
		bottom: calc(8px + env(safe-area-inset-bottom));
		max-width: calc(100% - 76px);
		display: grid;
		grid-template-columns: repeat(2, max-content);
	}

	.unplaced-open {
		left: 8px;
		bottom: calc(68px + env(safe-area-inset-bottom));
		max-width: calc(100% - 76px);
	}

	.map-overlay-controls {
		right: calc(8px + env(safe-area-inset-right));
		bottom: calc(8px + env(safe-area-inset-bottom));
		gap: 6px;
	}

	@media (prefers-reduced-motion: no-preference) {
		/* snap between peek / middle / expanded; follow the finger while dragging */
		.detail-panel,
		.list-panel {
			transition: height 0.2s ease;
		}

		.map-legend,
		.map-overlay-controls,
		.unplaced-open {
			transition: bottom 0.2s ease, opacity 0.15s ease, visibility 0.15s;
		}

		:is(.detail-panel, .list-panel).is-sheet-dragging,
		.map-view:has(.is-sheet-dragging)
			:is(.map-legend, .map-overlay-controls, .unplaced-open) {
			transition: none;
		}
	}

	.refinements-body {
		max-height: min(
			420px,
			max(120px, calc(var(--detail-sheet-height, 44dvh) - 124px))
		);
	}

	.filters {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.booth-list {
		padding: 8px 10px 12px;
	}

	.toast {
		bottom: calc(64px + env(safe-area-inset-bottom));
	}

	dialog,
	.utility-dialog {
		inset: auto 0 0;
		width: 100vw;
		height: auto;
		max-height: 88dvh;
		margin: auto 0 0;
		border-radius: 20px 20px 0 0;
	}

	dialog::before {
		content: "";
		display: block;
		width: 40px;
		height: 4px;
		margin: -8px auto 12px;
		border-radius: 4px;
		background: var(--line);
	}

	.utility-dialog.consent-dialog {
		inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
		width: calc(100vw - 32px);
		height: fit-content;
		max-height: calc(
			100dvh -
			48px -
			env(safe-area-inset-top) -
			env(safe-area-inset-bottom)
		);
		margin: auto;
		border-radius: var(--radius-l);
	}

	.consent-dialog::before {
		display: none;
	}

	@media (prefers-reduced-motion: no-preference) {
		.utility-dialog[open] {
			animation: sheet-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
		}

		.consent-dialog[open] {
			animation: dialog-in 0.2s ease-out;
		}

		@keyframes sheet-in {
			from {
				transform: translateY(40px);
				opacity: 0;
			}
			to {
				transform: none;
				opacity: 1;
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	body {
		display: block;
		height: auto;
		overflow: visible;
	}

	.search-refinements,
	.map-search,
	.unplaced-open,
	.map-overlay-controls,
	.map-legend,
	.map-overlay-top {
		display: none;
	}
}

/* Collaborative records use the same map, rows and detail sheet. */
.collaborative-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 4px;
	font-size: 12px;
}
.collaborative-meta a {
	color: var(--accent-strong);
	text-underline-offset: 3px;
}

.shared-list-intro .collaborative-privacy {
	margin-top: 6px;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.7;
}
.card-author {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 500;
}
.author-initial {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--surface-muted);
	border: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: 10px;
}
.personal-conflict {
	margin: 12px 0;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-muted);
	font-size: 13px;
}

.bookmark-remove-dialog h2 {
	margin-bottom: 14px;
}

.utility-dialog > .bookmark-remove-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.bookmark-remove-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.bookmark-remove-actions .button {
	flex: 1;
	min-height: 44px;
}

.personal-remove-bookmark {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--muted);
}
.personal-conflict > p {
	margin-bottom: 10px;
}
.personal-conflict > div {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.personal-conflict .button {
	flex: 1;
	min-width: 120px;
	min-height: 40px;
	font-size: 13px;
	padding: 8px 10px;
}
.share-revoke {
	margin-top: 16px;
	color: var(--muted);
	font-size: 13px;
}
#share-note {
	line-height: 1.7;
}

.share-privacy {
	margin-bottom: 18px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface-muted);
	font-size: 13px;
	line-height: 1.7;
}

.share-privacy > p {
	margin-bottom: 6px;
	font-weight: 600;
}

.share-privacy ul {
	margin: 0;
	padding-left: 18px;
}

.share-privacy li + li {
	margin-top: 8px;
}

.share-privacy > a {
	display: inline-block;
	margin-top: 10px;
	color: var(--accent-strong);
	font-size: 12px;
	text-underline-offset: 3px;
}
@media (max-width: 720px) {
	.list-panel:has(#collaborative-intro:not([hidden])) .refinements-body {
		max-height: min(
			420px,
			max(100px, calc(var(--detail-sheet-height, 44dvh) - 204px))
		);
	}
}