/* SCAJ2026 My Map — graphics layer, aligned with BARISTAI.
   Colours come from BARISTAI's semantic tokens (--ds-*, see
   src/styles/globals.css; copied into baristai-tokens.css). The fallbacks
   below mirror those values so this file also renders on its own.
   Bookmark priority uses blue (気になる), amber (行きたい), red (必ず行きたい),
   and success green (行った). Brand lime, always with ink, marks the selected booth
   on the map; a pale lime tint is the Coffee Village floor, and lime is
   otherwise a small detail colour. The --priority
   tokens remain for legacy map states and caution notes.
   Map graphics by Claude Opus 5.5. app.css loads after this file and owns
   layout/behaviour. */

:root {
	--bg: var(--ds-background, #ffffff);
	--surface: var(--ds-card, #ffffff);
	--surface-muted: var(--ds-surface-muted, #f6f8fa);
	--muted-bg: var(--ds-muted, #eaeef2);
	--ink: var(--ds-foreground, #24292f);
	--ink-soft: var(--ds-secondary-foreground, #424a53);
	--muted: var(--ds-muted-foreground, #57606a);
	--line: var(--ds-border, #d0d7de);
	--line-strong: var(--ds-line-strong, #b8c0c8);
	--primary: var(--ds-primary, #24292f);
	--primary-fg: var(--ds-primary-foreground, #ffffff);
	--accent: var(--ds-accent, #0176f0);
	--accent-fg: var(--ds-accent-foreground, #ffffff);
	--accent-strong: var(--ds-accent-strong, #0057b7);
	--success: var(--ds-success, #00c291);
	--success-strong: var(--ds-success-strong, #009e76);
	--warning: var(--ds-warning, #f5c749);
	--warning-strong: var(--ds-warning-strong, #d4a72c);
	--ring: var(--ds-ring, #0176f0);
	--hover: var(--ds-hover, rgb(36 41 47 / 0.06));
	--panel-shadow: var(
		--ds-panel-shadow,
		0 0 2px rgb(24 24 27 / 0.08),
		0 8px 16px rgb(24 24 27 / 0.06)
	);
	/* BARISTAI brand accent (tailwind.config.ts BRAND_ACCENT); always on dark ink. */
	--brand: #dde673;
	--brand-ink: #24292f;
	/* Darkening colour for extruded side walls and shadows. */
	--shade: #24292f;
	--shadow-soft: 0.05;
	--shadow-core: 0.08;
	--slab-shadow: 0.16;

	--want: var(--accent);
	--want-tint: color-mix(in srgb, var(--accent) 13%, var(--surface));
	--want-text: var(--accent-strong);
	--visited: var(--success-strong);
	--visited-tint: color-mix(in srgb, var(--success) 15%, var(--surface));
	--visited-text: color-mix(in srgb, var(--success-strong) 65%, var(--ink));
	--priority: var(--warning-strong);
	--priority-tint: color-mix(in srgb, var(--warning) 28%, var(--surface));
	--priority-text: color-mix(in srgb, var(--warning-strong) 50%, var(--ink));
	--bookmark-color: var(--want);
	--bookmark-tint: var(--want-tint);
	--bookmark-text: var(--want-text);
	--bookmark-foreground: var(--accent-fg);

	--overlay: color-mix(in srgb, var(--surface) 92%, transparent);
	--map-ground: color-mix(in srgb, var(--muted-bg) 70%, var(--bg));
	--map-slab: color-mix(in srgb, var(--surface-muted) 70%, var(--surface));
	--map-booth: var(--surface);
	--map-hall-a: color-mix(in srgb, var(--muted-bg) 32%, var(--map-slab));
	--map-hall-b: color-mix(in srgb, var(--accent) 4%, var(--map-slab));
	/* Coffee Village floor under its counters: a pale lime ground with an
	   olive edge, quieter than the lime of a selected booth. */
	--village-floor: color-mix(in srgb, var(--brand) 18%, var(--map-slab));
	--village-edge: color-mix(in srgb, var(--brand) 45%, var(--ink-soft));

	--radius-s: 8px;
	--radius: 12px;
	--radius-l: 20px;

	--sans: "Geist", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system,
		"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
		sans-serif;
	--brand-font: "Montserrat", "Geist", sans-serif;
	--num: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
		sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2357606a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	color-scheme: light;
}

:root.dark {
	--bg: var(--ds-background, #0d1117);
	--surface: var(--ds-card, #161b22);
	--surface-muted: var(--ds-surface-muted, #212830);
	--muted-bg: var(--ds-muted, #30363d);
	--ink: var(--ds-foreground, #f0f3f6);
	--ink-soft: var(--ds-secondary-foreground, #c9d1d9);
	--muted: var(--ds-muted-foreground, #aab4bf);
	--line: var(--ds-border, #3d444d);
	--line-strong: var(--ds-line-strong, #59636e);
	--primary: var(--ds-primary, #f0f3f6);
	--primary-fg: var(--ds-primary-foreground, #161b22);
	--accent: var(--ds-accent, #71b7ff);
	--accent-fg: var(--ds-accent-foreground, #0d1117);
	--accent-strong: var(--ds-accent-strong, #91c7ff);
	--success: var(--ds-success, #4cdbad);
	--success-strong: var(--ds-success-strong, #69dfb7);
	--warning: var(--ds-warning, #e8c45a);
	--warning-strong: var(--ds-warning-strong, #f0d77b);
	--ring: var(--ds-ring, #71b7ff);
	--hover: var(--ds-hover, rgb(240 243 246 / 0.06));
	--panel-shadow: var(
		--ds-panel-shadow,
		0 1px 3px rgb(0 0 0 / 0.24),
		0 8px 16px rgb(0 0 0 / 0.2)
	);
	--shade: #010409;
	--shadow-soft: 0.2;
	--shadow-core: 0.3;
	--slab-shadow: 0.55;

	--want-tint: color-mix(in srgb, var(--accent) 20%, var(--surface));
	--visited: var(--success);
	--visited-tint: color-mix(in srgb, var(--success) 18%, var(--surface));
	--visited-text: var(--success-strong);
	--priority: var(--warning);
	--priority-tint: color-mix(in srgb, var(--warning) 20%, var(--surface));
	--priority-text: var(--warning-strong);

	--map-ground: var(--bg);
	--map-slab: var(--surface);
	--map-booth: var(--surface-muted);
	--map-hall-a: color-mix(in srgb, var(--muted-bg) 30%, var(--map-slab));
	--map-hall-b: color-mix(in srgb, var(--accent) 6%, var(--map-slab));
	/* Darker than the counters so they still stand up from it. */
	--village-floor: color-mix(in srgb, var(--brand) 6%, var(--map-ground));
	--village-edge: color-mix(in srgb, var(--brand) 40%, var(--line));
	--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23aab4bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	color-scheme: dark;
}

/* Shared by map roofs, markers, names, cards, and the priority editor. */
[data-interest="1"] {
	--bookmark-color: var(--accent);
	--bookmark-tint: var(--want-tint);
	--bookmark-text: var(--accent-strong);
	--bookmark-foreground: var(--accent-fg);
}

[data-interest="2"] {
	--bookmark-color: var(--priority);
	--bookmark-tint: var(--priority-tint);
	--bookmark-text: var(--priority-text);
	--bookmark-foreground: var(--brand-ink);
}

[data-interest="3"] {
	--bookmark-color: var(--ds-destructive, #cf222e);
	--bookmark-tint: color-mix(in srgb, var(--bookmark-color) 16%, var(--surface));
	--bookmark-text: var(--bookmark-color);
	--bookmark-foreground: var(--ds-destructive-foreground, #ffffff);
}

/* ---------- base ---------- */

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt" 1, "cv11" 1;
}

h1,
h2,
h3,
p {
	margin: 0;
}

a {
	color: var(--accent-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--accent);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

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

/* Headings receive programmatic focus to announce a selected booth/list. */
#detail-title:focus,
#list-title:focus {
	outline: none;
}

::selection {
	background: color-mix(in srgb, var(--brand) 60%, transparent);
	color: var(--brand-ink);
}

kbd {
	font-family: var(--mono);
	font-size: 11px;
	padding: 2px 6px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface-muted);
	color: var(--muted);
}

small {
	font-size: 0.8em;
}

.muted {
	color: var(--muted);
	font-size: 13px;
}

/* ---------- buttons ---------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity
		0.15s;
}

.button.primary {
	background: var(--primary);
	color: var(--primary-fg);
}

.button.primary:hover {
	opacity: 0.9;
	color: var(--primary-fg);
}

.button.secondary {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink);
}

.button.secondary:hover {
	background: var(--hover);
	border-color: var(--line-strong);
	color: var(--ink);
}

.button.visited {
	background: var(--visited);
	border-color: var(--visited);
	color: var(--surface);
}

.button.visited:hover {
	opacity: 0.9;
}

.text-button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 4px 8px;
	border: 0;
	border-radius: var(--radius-s);
	background: none;
	color: var(--accent-strong);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.text-button:hover {
	color: var(--accent);
	background: var(--hover);
}

/* ---------- official exhibition days (inside 絞り込み) ---------- */

.day-tabs {
	display: flex;
	justify-self: start;
	max-width: 100%;
	gap: 4px;
	padding: 3px;
	border-radius: 999px;
	background: var(--muted-bg);
	overflow-x: auto;
	scrollbar-width: none;
}

.day-tabs::-webkit-scrollbar {
	display: none;
}

.day-button {
	flex: none;
	min-height: 30px;
	padding: 2px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: var(--num);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.day-button small {
	margin-left: 2px;
	font-family: var(--sans);
	font-weight: 500;
	color: var(--muted);
}

.day-button:hover {
	color: var(--ink);
}

.day-button.active {
	background: var(--primary);
	color: var(--primary-fg);
}

.day-button.active small {
	color: inherit;
	opacity: 0.72;
}

.day-info {
	min-width: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

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

.map-view {
	background: var(--map-ground);
}

.map-viewport {
	background: radial-gradient(
			circle at 1px 1px,
			color-mix(in srgb, var(--ink) 9%, transparent) 1px,
			transparent 1.5px
		)
		0 0 / 20px 20px, var(--map-ground);
}

.floor-tabs,
.map-legend,
.projection-switch,
.unplaced-open {
	border: 1px solid var(--line);
	background: var(--overlay);
	box-shadow: var(--panel-shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.floor-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
}

.floor-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 3px 14px 3px 4px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-soft);
	white-space: nowrap;
}

.floor-button b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--muted-bg);
	font-family: var(--num);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ink);
}

.floor-button:hover {
	color: var(--ink);
}

.floor-button.active {
	background: var(--primary);
	color: var(--primary-fg);
}

.floor-button.active b {
	background: var(--brand);
	color: var(--brand-ink);
}

.map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 7px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-soft);
}

.map-legend > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.legend-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1.5px solid;
	/* a hint of the extruded side wall */
	box-shadow: 1.5px 1.5px 0 -0.5px currentColor;
}

.legend-swatch.want {
	background: var(--bookmark-tint);
	border-color: var(--bookmark-color);
	color: color-mix(in srgb, var(--bookmark-color) 55%, transparent);
}

.legend-swatch.visited {
	background: var(--visited-tint);
	border-color: var(--visited);
	color: color-mix(in srgb, var(--visited) 55%, transparent);
}

.projection-switch {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-radius: 12px;
	overflow: hidden;
}

.projection-button:hover {
	background: var(--hover);
}

.projection-button:focus-visible {
	outline-offset: -3px;
}

.projection-switch {
	gap: 2px;
	padding: 3px;
}

.projection-button {
	min-width: 36px;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-family: var(--num);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--muted);
}

.projection-button[aria-pressed="true"] {
	background: var(--primary);
	color: var(--primary-fg);
}

.projection-button[aria-pressed="true"]:hover {
	background: var(--primary);
}

.map-loading {
	background: color-mix(in srgb, var(--map-ground) 86%, transparent);
	backdrop-filter: blur(2px);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-soft);
}

/* ---------- SVG map (rendered by map.js) ----------
   Each solid is a <g> of .smap-side--front / .smap-side--flank walls and a
   .smap-top face. Groups set --top, --side and --edge; walls darken the
   side colour towards --shade, so state colours carry onto the walls. */

.smap-top,
.smap-side {
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.smap-top {
	fill: var(--top);
	stroke: var(--edge);
	stroke-width: 1;
	transition: fill 0.15s, stroke 0.15s;
}

.smap-side {
	stroke: color-mix(in srgb, var(--edge) 55%, transparent);
	stroke-width: 0.6;
	transition: fill 0.15s;
}

.smap-side--front {
	fill: color-mix(in srgb, var(--side, var(--top)) 86%, var(--shade));
}

.smap-side--flank {
	fill: color-mix(in srgb, var(--side, var(--top)) 70%, var(--shade));
}

.smap-slab {
	--top: var(--map-slab);
	--side: color-mix(in srgb, var(--line) 60%, var(--map-slab));
	--edge: var(--line);
}

.smap-slab .smap-top {
	stroke-width: 1.25;
}

.smap-slab-shadow {
	fill: var(--shade);
	opacity: var(--slab-shadow);
}

/* A zoomed floor-sized blur needs a large intermediate surface. Keep the
   cast shadow, but skip its blur while moving and when its edge is far away. */
.smap.is-map-moving .smap-slab-shadow,
.smap.is-map-close .smap-slab-shadow {
	filter: none;
}

.smap-layer-shadow-soft,
.smap-layer-shadow-core {
	fill: var(--shade);
	pointer-events: none;
}

.smap-layer-shadow-soft {
	opacity: var(--shadow-soft);
}

.smap-layer-shadow-core {
	opacity: var(--shadow-core);
}

.smap-hall {
	stroke: var(--line);
	stroke-width: 1;
	stroke-dasharray: 4 3;
	vector-effect: non-scaling-stroke;
}

.smap-hall--south-1,
.smap-hall--south-3 {
	fill: var(--map-hall-a);
}

.smap-hall--south-2,
.smap-hall--south-4 {
	fill: var(--map-hall-b);
}

.smap-hall-label {
	fill: var(--muted);
	font-family: var(--sans);
	font-weight: 700;
	letter-spacing: 0.08em;
	cursor: pointer;
	outline: none;
}

.smap-hall-label:hover,
.smap-hall-label:focus-visible {
	fill: var(--accent-strong);
	text-decoration: underline;
}

/* Coffee Village floor: flat under its counters, so it never hides one and
   hall edges stop at it. While the counters are too small to pick, a tap
   on it zooms in (map.js sets .is-village-far). */
.smap-village-zone {
	fill: var(--village-floor);
	stroke: var(--village-edge);
	stroke-width: 1.25;
	stroke-dasharray: 6 4;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill 0.15s;
}

.smap.is-village-far:not(.is-dragging) .smap-village-zone {
	cursor: zoom-in;
}

.smap-village-zone.is-muted {
	fill: color-mix(in srgb, var(--muted-bg) 40%, var(--map-slab));
	stroke: var(--line);
}

.smap-landmark-label,
.smap-village-sub,
.smap-village-cta {
	font-family: var(--sans);
	pointer-events: none;
}

.smap-landmark-label {
	font-weight: 700;
	letter-spacing: 0.06em;
}

.smap-landmark--stage {
	--top: var(--primary);
	--edge: var(--primary);
}

.smap-landmark--stage .smap-landmark-label {
	fill: var(--primary-fg);
	font-family: var(--brand-font);
	letter-spacing: 0.14em;
}

.smap-landmark--seminar {
	--top: var(--muted-bg);
	--edge: var(--line-strong);
}

.smap-landmark--seminar .smap-landmark-label {
	fill: var(--ink-soft);
}

.smap-landmark--entrance {
	--top: color-mix(in srgb, var(--accent) 14%, var(--surface));
	--edge: var(--accent);
}

.smap-landmark--entrance .smap-landmark-label {
	fill: var(--accent-strong);
}

/* Stairs read by their treads, escalators by lanes and the pictogram. */
.smap-landmark--stairs,
.smap-landmark--escalator {
	--top: color-mix(in srgb, var(--muted-bg) 55%, var(--surface));
	--edge: var(--line-strong);
}

.smap-treads {
	fill: none;
	stroke: var(--ink-soft);
	stroke-width: 0.9;
	vector-effect: non-scaling-stroke;
}

.smap-landmark--stairs .smap-landmark-label {
	fill: var(--ink);
	stroke: var(--surface);
	stroke-linejoin: round;
	paint-order: stroke fill;
}

.smap-lane {
	fill: var(--surface);
	stroke: var(--line-strong);
	stroke-width: 0.75;
	vector-effect: non-scaling-stroke;
}

.smap-access-icon-disc {
	fill: var(--primary);
	stroke: var(--surface);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.smap-access-icon-glyph {
	fill: none;
	stroke: var(--primary-fg);
	stroke-width: 0.17;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.smap-access-icon-head {
	fill: var(--primary-fg);
}

.smap-landmark--village {
	--top: color-mix(in srgb, var(--brand) 34%, var(--map-slab));
	--side: color-mix(in srgb, var(--brand) 62%, var(--map-slab));
	--edge: color-mix(in srgb, var(--brand) 45%, var(--ink));
	cursor: pointer;
	outline: none;
}

.smap-landmark--village .smap-top {
	stroke-width: 1.5;
	stroke-dasharray: 6 4;
}

.smap-landmark--village:hover {
	--top: color-mix(in srgb, var(--brand) 52%, var(--map-slab));
}

.smap-landmark--village:focus-visible .smap-top {
	stroke: var(--ring);
	stroke-width: 3;
	stroke-dasharray: none;
}

.smap-landmark--village.is-selected .smap-top {
	stroke: var(--ink);
	stroke-width: 2.5;
	stroke-dasharray: none;
}

.smap-landmark--village.is-muted {
	--top: color-mix(in srgb, var(--muted-bg) 50%, var(--map-slab));
	--side: var(--muted-bg);
	--edge: var(--line-strong);
}

.smap-landmark--village .smap-landmark-label {
	fill: var(--ink);
	font-family: var(--brand-font);
	letter-spacing: 0.16em;
	font-weight: 700;
}

.smap-village-sub {
	fill: var(--ink-soft);
	font-weight: 600;
}

.smap-village-cta {
	fill: var(--accent-strong);
	font-weight: 700;
}

/* With its counters placed, Coffee Village is headed by map type behind
   the floor's back-left corner, clear of the counters: a swatch of the
   floor, the name, the count and the way into the list (constant size,
   set by map.js). The transparent box is the hit and focus target. */
.smap-village-heading {
	-webkit-tap-highlight-color: transparent;
}

.smap-village-hit {
	fill: transparent;
	stroke: none;
	pointer-events: all;
}

.smap-village-swatch {
	fill: var(--village-floor);
	stroke: var(--village-edge);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}

.smap-village-meta {
	font-family: var(--sans);
	pointer-events: none;
}

@media (hover: hover) {
	.smap-village-heading:hover .smap-village-hit {
		fill: var(--hover);
	}

	.smap-village-heading:hover .smap-village-cta {
		text-decoration: underline;
	}
}

.smap-village-heading:focus-visible .smap-village-hit {
	stroke: var(--ring);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.smap-village-heading.is-selected .smap-village-swatch {
	stroke: var(--ink);
	stroke-width: 2;
}

.smap-village-heading.is-muted {
	opacity: 0.55;
}

.smap-booth {
	--top: var(--map-booth);
	--edge: var(--line-strong);
	--label: var(--ink);
	--num-ink: var(--ink-soft);
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.smap-num {
	fill: var(--num-ink);
	font-family: var(--num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	pointer-events: none;
}

.smap-name {
	fill: var(--label);
	font-family: var(--sans);
	font-weight: 600;
	pointer-events: none;
}

/* status rules below share this specificity and win, keeping colours on hover */
@media (hover: hover) {
	.smap-booth:hover {
		--top: color-mix(in srgb, var(--accent) 8%, var(--map-booth));
		--edge: var(--accent);
	}
}

.smap-booth.is-muted {
	--top: color-mix(in srgb, var(--muted-bg) 55%, var(--map-slab));
	--edge: var(--line);
	--num-ink: color-mix(in srgb, var(--muted) 65%, transparent);
}

.smap-booth.is-unknown {
	--top: color-mix(in srgb, var(--muted-bg) 70%, var(--map-slab));
	--edge: var(--line);
	cursor: default;
}

.smap-booth.is-unknown .smap-top {
	stroke-dasharray: 2 2;
}

/* Coffee Village counters share the booth paper, states and lime selection;
   their numbers run tight along the counter. */
.smap-booth--counter .smap-num {
	letter-spacing: 0;
}

.smap-booth.is-want {
	--top: var(--bookmark-tint);
	--side: color-mix(in srgb, var(--bookmark-color) 45%, var(--surface));
	--edge: var(--bookmark-color);
	--num-ink: var(--bookmark-text);
}

.smap-booth.is-priority {
	--top: var(--priority-tint);
	--side: color-mix(in srgb, var(--warning) 75%, var(--surface));
	--edge: var(--priority);
	--num-ink: var(--priority-text);
}

.smap-booth.is-visited {
	--top: var(--visited-tint);
	--side: color-mix(in srgb, var(--success) 50%, var(--surface));
	--edge: var(--visited);
	--num-ink: var(--visited-text);
}

.smap-booth.is-visited.is-priority {
	--edge: var(--priority);
}

.smap-booth:is(.is-want, .is-visited, .is-priority) .smap-top {
	stroke-width: 1.75;
}

.smap-booth.is-muted:is(.is-want, .is-visited, .is-priority) {
	opacity: 0.55;
}

/* Selected: the booth itself is the marker, lit in brand lime with its number
   in ink (the lime-on-ink pairing of the active floor chip), like a
   highlighter on a paper floor plan. Lime appears nowhere else on the booths.
   It overrides saved tints while selected; the corner badge keeps the state. */
.smap-booth.is-selected,
.smap-booth.is-selected.is-muted {
	--top: var(--brand);
	--side: var(--brand);
	--edge: var(--brand-ink);
	--num-ink: var(--brand-ink);
	opacity: 1;
}

/* doubled class outranks the status stroke widths above */
.smap-booth.smap-booth:focus-visible .smap-top {
	stroke: var(--ring);
	stroke-width: 3;
}

/* A public location with no confirmed outline stays a round symbol. */
.smap-point-hit {
	fill: transparent;
	pointer-events: all;
}

.smap-point-shade {
	fill: var(--ink);
	opacity: 0.12;
	pointer-events: none;
}

.smap-point-rim {
	fill: var(--surface);
	stroke: var(--surface);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.smap-point-head {
	fill: var(--top);
	stroke: var(--edge);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.smap-point-dot,
.smap-point-glyph {
	fill: var(--num-ink);
	pointer-events: none;
}

.smap-point-glyph {
	font-family: var(--num);
	font-weight: 800;
}

.smap-booth--point.has-glyph .smap-point-dot {
	display: none;
}

.smap-booth--point:focus-visible .smap-point-head {
	stroke: var(--ring);
	stroke-width: 3;
}

.smap-point-pulse {
	fill: none;
	stroke: var(--brand);
	stroke-width: 14;
	stroke-opacity: 0;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

.smap-layer-selection,
.smap-layer-badges {
	pointer-events: none;
}

.smap-sel-pulse,
.smap-sel-halo,
.smap-sel-ring {
	fill: none;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.smap-sel-halo {
	stroke: var(--surface);
	stroke-width: 6;
}

.smap-sel-ring {
	stroke: var(--ink);
	stroke-width: 2;
}

/* A short lime ping on a new selection (below); then the map rests. */
.smap-sel-pulse {
	stroke: var(--brand);
	stroke-width: 14;
	stroke-opacity: 0;
}

.smap-badge-stem {
	stroke: var(--ink-soft);
	stroke-width: 1.25;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.smap-badge circle {
	stroke: var(--surface);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.smap-badge text {
	fill: var(--surface);
	font-family: var(--num);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.smap-badge.is-want circle {
	fill: var(--bookmark-color);
}

.smap-badge.is-want text {
	fill: var(--bookmark-foreground);
}

.smap-badge.is-priority circle {
	fill: var(--warning);
}

.smap-badge.is-priority text {
	fill: var(--brand-ink);
}

.smap-badge.is-visited circle {
	fill: var(--visited);
}

.smap-badge.is-priority-ring circle {
	stroke: var(--warning);
	stroke-width: 2.5;
}

.smap-badge.is-muted {
	opacity: 0.55;
}

/* Booth names are map type, not bubbles: centred on their booth with an
   opaque surface halo that keeps the ink clear of walls and roofs. The
   transparent box is only the hit target. */
.smap-tags {
	pointer-events: none;
}

.smap-tag {
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.smap.is-dragging .smap-tag {
	cursor: grabbing;
}

.smap-tag-box {
	fill: transparent;
	stroke: none;
	pointer-events: all;
}

.smap-tag-text {
	fill: var(--ink);
	font-family: var(--sans);
	stroke: var(--surface);
	stroke-width: 3px;
	stroke-linejoin: round;
	paint-order: stroke fill;
	pointer-events: none;
}

.smap-tag-name {
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Saved booths: the name takes the colour of its tinted roof. */
.smap-tag.is-want .smap-tag-name {
	fill: var(--bookmark-text);
	font-weight: 600;
}

.smap-tag.is-visited .smap-tag-name {
	fill: var(--visited-text);
	font-weight: 600;
}

.smap-tag.is-muted {
	opacity: 0.6;
}

@media (hover: hover) {
	.smap-tag:hover .smap-tag-name {
		fill: var(--accent-strong);
	}
}

.smap-tag.is-hover .smap-tag-name {
	fill: var(--accent-strong);
	font-weight: 600;
}

/* Selected: the lit booth is the marker; its full name hangs beneath it as
   the strongest type on the map (map.js sets 15px), never in a card. */
.smap-tag.is-selected {
	opacity: 1;
}

.smap-tag.is-selected .smap-tag-text {
	stroke-width: 4.5px;
}

.smap-tag.is-selected .smap-tag-name {
	fill: var(--accent-strong);
	font-weight: 700;
	letter-spacing: 0;
}

.smap-tag-member {
	outline: none;
	cursor: pointer;
}

.smap-tag-member-hit {
	fill: transparent;
	stroke: none;
	pointer-events: all;
}

.smap-tag.is-expanded .smap-tag-member .smap-tag-name {
	fill: var(--ink);
	font-weight: 500;
}

.smap-tag.is-expanded .smap-tag-member.is-want .smap-tag-name {
	fill: var(--bookmark-text);
}

.smap-tag.is-expanded .smap-tag-member.is-visited .smap-tag-name {
	fill: var(--visited-text);
}

.smap-tag.is-expanded .smap-tag-member.is-selected .smap-tag-name {
	fill: var(--accent-strong);
	font-weight: 700;
}

.smap-tag-member.is-muted:not(.is-selected) {
	opacity: 0.65;
}

.smap-tag-days {
	fill: var(--muted);
	font-weight: 500;
	letter-spacing: 0;
}

.smap-tag-member:focus-visible .smap-tag-name {
	text-decoration: underline;
}

@media (hover: hover) {
	.smap-tag.is-expanded .smap-tag-member:hover .smap-tag-name {
		fill: var(--accent-strong);
		text-decoration: underline;
	}
}

/* Only when the canvas pushed the selected name away from its booth. */
.smap-tag-leader {
	stroke: var(--ink);
	stroke-width: 1;
	stroke-linecap: round;
	opacity: 0.5;
	pointer-events: none;
}

/* ---------- map search (floating, top-left) ---------- */

.map-search-form,
.map-search-results {
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--panel-shadow);
}

.map-search-form {
	gap: 2px;
	padding: 0 4px 0 14px;
	border-radius: var(--radius);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.map-search-form:hover {
	border-color: var(--line-strong);
}

.map-search-form:focus-within {
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent),
		var(--panel-shadow);
}

.map-search-form input {
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	appearance: none;
	-webkit-appearance: none;
}

.map-search-form input:focus,
.map-search-form input:focus-visible {
	outline: none;
}

.map-search-form input::placeholder {
	color: color-mix(in srgb, var(--muted) 80%, transparent);
	font-weight: 400;
}

.map-search-clear,
.map-search-submit {
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	line-height: 1;
}

.map-search-clear {
	font-size: 18px;
}

.map-search-clear:hover,
.map-search-submit:hover {
	background: var(--hover);
	color: var(--ink);
}

.map-search-clear:focus-visible,
.map-search-submit:focus-visible {
	outline-offset: -2px;
}

.map-search-icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
}

/* マイリスト: same outline bookmark as the booth cards, after a hairline. */
.map-list-button {
	margin-left: 2px;
	border: 0;
	border-radius: var(--radius-s);
	background: transparent;
	color: var(--ink-soft);
	box-shadow: -1px 0 0 var(--line);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.map-list-button:hover {
	background: var(--hover);
	color: var(--ink);
}

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

.map-list-button[aria-pressed="true"] {
	color: var(--want);
}

.map-list-button[aria-pressed="true"] .map-list-icon {
	fill: currentColor;
}

.map-list-icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.map-list-count {
	min-width: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--brand);
	color: var(--brand-ink);
	font-family: var(--num);
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--surface);
}

.map-search-results {
	border-radius: var(--radius);
}

.map-search-result {
	padding: 8px 10px;
	border-radius: var(--radius-s);
	color: var(--ink);
}

.map-search-result + .map-search-result {
	margin-top: 1px;
}

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

.map-search-result[aria-selected="true"] {
	background: var(--want-tint);
	box-shadow: inset 3px 0 0 var(--accent);
}

.search-result-number {
	min-width: 44px;
	max-width: 76px;
	margin-top: 1px;
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--muted-bg);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: var(--ink-soft);
	overflow-wrap: anywhere;
}

.map-search-result[aria-selected="true"] .search-result-number {
	background: var(--surface);
	color: var(--want-text);
}

.search-result-copy {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.search-result-copy strong {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
	line-break: strict;
}

.search-result-copy small {
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.search-no-results {
	padding: 12px 10px;
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

/* ---------- 位置未確認 button (lower-left, above the legend) ---------- */

.unplaced-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 6px 0 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--ink-soft);
	white-space: nowrap;
}

.unplaced-open:hover {
	border-color: var(--line-strong);
	color: var(--ink);
}

.unplaced-dot {
	flex: none;
	width: 9px;
	height: 9px;
	border: 1.5px dashed var(--muted);
	border-radius: 2px;
}

#unplaced-count {
	min-width: 18px;
	padding: 2px 5px;
	border-radius: 999px;
	background: var(--muted-bg);
	font-family: var(--num);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.smap-empty {
	padding: 10px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--panel-shadow);
	font-size: 14px;
	color: var(--ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
	.smap-sel-pulse,
	.smap-booth--point.is-selected .smap-point-pulse {
		animation: smap-pulse 1.6s ease-out 2;
	}

	@keyframes smap-pulse {
		0% {
			stroke-opacity: 0.9;
			stroke-width: 4;
		}
		100% {
			stroke-opacity: 0;
			stroke-width: 26;
		}
	}
}

/* ---------- list pane (beside / below the map) ---------- */

.list-panel {
	border-right: 1px solid var(--line);
	background: var(--surface-muted);
	color: var(--ink);
	box-shadow: 1px 0 0 var(--line), 4px 0 16px -12px rgb(13 17 23 / 0.3);
}

.list-head {
	padding: 12px 14px 0;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}

.list-title-row {
	padding-right: 40px;
}

.list-title-row h2 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ink);
}

.list-stats {
	display: flex;
	gap: 10px;
	margin-top: 1px;
	font-size: 12px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.list-stats b {
	font-family: var(--num);
	font-weight: 700;
}

.list-stat-want b {
	color: var(--want-text);
}

.list-stat-visited b {
	color: var(--visited-text);
}

.list-close {
	width: 30px;
	height: 30px;
	font-size: 17px;
}

.list-context {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted);
	overflow-wrap: anywhere;
}

select:focus {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}

select:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 1px;
}

select {
	width: 100%;
	min-height: 44px;
	padding: 8px 30px 8px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--select-arrow) right 11px center / 11px 8px no-repeat,
		var(--surface);
	font-size: 14px;
	color: var(--ink);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

select:hover {
	border-color: var(--line-strong);
}

.list-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.list-heading #status-filter,
.search-refinements > summary {
	min-height: 36px;
	font-size: 13px;
	font-weight: 600;
}

.list-heading #status-filter {
	padding-top: 6px;
	padding-bottom: 6px;
	border-radius: 999px;
	color: var(--ink);
}

.search-refinements > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 30px 6px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--select-arrow) right 11px center / 11px 8px no-repeat,
		var(--surface);
	color: var(--ink);
	white-space: nowrap;
}

.search-refinements > summary:hover {
	border-color: var(--line-strong);
}

.search-refinements[open] > summary {
	border-color: var(--ink);
	box-shadow: 0 0 0 1px var(--ink);
}

.refinements-body {
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: 0 16px 40px -16px rgb(13 17 23 / 0.35), var(--panel-shadow);
	cursor: auto;
}

.refine-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-soft);
}

.refine-field select {
	min-height: 40px;
	font-size: 14px;
	font-weight: 500;
}

/* ---------- booth cards (markup from app.js) ---------- */

/* Hierarchy: small booth/hall line → name → dates → two-line summary →
   flags → actions. One subtle border; status is a thin left stripe. */
.booth-card {
	position: relative;
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
	padding: 14px 14px 12px 16px;
	border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color 0.15s, box-shadow 0.15s;
	cursor: pointer;
}

.booth-card::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 14px;
	bottom: 14px;
	width: 3px;
	border-radius: 3px;
	background: transparent;
}

.booth-card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--panel-shadow);
}

.booth-card.selected {
	border-color: var(--ink);
	box-shadow: 0 0 0 1px var(--ink), var(--panel-shadow);
}

.booth-card:has(.bookmark-button.saved)::before {
	background: var(--bookmark-color);
}

.booth-card:has(.visit-button.visited)::before {
	background: var(--visited);
}

.card-top {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.booth-number {
	flex: none;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}

.card-area {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
}

.card-name {
	justify-self: start;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	appearance: none;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--ink);
	text-align: left;
	text-decoration-color: var(--accent);
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

.card-name:hover {
	color: var(--accent-strong);
}

.card-days {
	font-family: var(--num);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.card-note {
	padding-left: 10px;
	border-left: 2px solid var(--brand);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ink-soft);
	overflow-wrap: anywhere;
}

/* Compact inline row: icon-only bookmark, plus a small 訪問済み pill once bookmarked. */
.card-actions,
.detail-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.card-actions {
	margin-top: 2px;
}

.bookmark-button,
.visit-button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	appearance: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.bookmark-button {
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--muted);
}

.bookmark-icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.bookmark-button:hover {
	background: var(--bookmark-tint);
	color: var(--bookmark-color);
}

.bookmark-button.saved {
	color: var(--bookmark-text);
}

.bookmark-button.saved .bookmark-icon {
	fill: currentColor;
}

.visit-button {
	gap: 4px;
	min-height: 32px;
	padding: 0 11px 0 8px;
	border-color: var(--line);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--muted);
}

.visit-icon {
	flex: none;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.45;
}

.visit-button:hover {
	border-color: var(--visited);
	color: var(--visited-text);
}

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

.visit-button.visited .visit-icon {
	opacity: 1;
	color: var(--visited);
}

.empty-state {
	display: grid;
	place-items: center;
	gap: 8px;
	padding: 48px 20px;
	text-align: center;
	font-size: 14px;
	color: var(--muted);
}

.empty-state h3 {
	font-size: 16px;
	color: var(--ink);
}

/* ---------- dialogs ---------- */

dialog {
	padding: 26px 26px 22px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 24px 60px -20px rgb(13 17 23 / 0.45);
}

dialog::backdrop {
	background: rgb(13 17 23 / 0.4);
}

.utility-dialog {
	width: min(540px, calc(100vw - 32px));
	border-radius: var(--radius-l);
}

.utility-dialog::backdrop {
	backdrop-filter: blur(3px);
}

.dialog-close {
	position: sticky;
	top: 0;
	float: right;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: -10px -10px 0 12px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	font-size: 20px;
	line-height: 1;
	color: var(--ink-soft);
	z-index: 2;
}

.dialog-close:hover {
	background: var(--hover);
	color: var(--ink);
}

dialog h2 {
	margin-bottom: 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
}

.eyebrow {
	display: inline-block;
	margin-bottom: 8px;
	padding: 1px 7px;
	border-radius: 5px;
	background: var(--brand);
	color: var(--brand-ink);
	font-family: var(--num);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.utility-dialog > p:not(.eyebrow) {
	margin-bottom: 14px;
	font-size: 14.5px;
	color: var(--ink-soft);
}

.utility-dialog > .button {
	width: 100%;
	margin-bottom: 10px;
}

/* ---------- detail panel (in layout beside / below the map) ----------
   Content rendered by app.js: .detail-header (kicker, title, meta, two
   actions) then .detail-body. Type scale: 18 title · 14 body · 12 labels. */

.detail-panel {
	border-right: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	box-shadow: 1px 0 0 var(--line), 4px 0 16px -12px rgb(13 17 23 / 0.3);
}

.detail-close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font-size: 18px;
	line-height: 1;
	color: var(--ink-soft);
}

.detail-close:hover {
	background: var(--hover);
	color: var(--ink);
}

.detail-header {
	padding: 16px 56px 14px 20px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}

.detail-body {
	display: grid;
	gap: 0;
	padding: 4px 20px calc(20px + env(safe-area-inset-bottom));
}

.detail-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin-bottom: 4px;
	font-family: var(--num);
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.detail-title {
	margin-bottom: 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--accent-strong);
	overflow-wrap: anywhere;
	line-break: strict;
}

.detail-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	margin-bottom: 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.detail-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.flag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--muted-bg);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--ink-soft);
}

.flag.tasting {
	background: var(--visited-tint);
	color: var(--visited-text);
}

.flag.sales {
	background: var(--want-tint);
	color: var(--want-text);
}

.flag.new {
	background: var(--priority-tint);
	color: var(--priority-text);
}

.detail-section {
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--line);
}

.detail-body > .detail-section:first-child,
.detail-body > .location-note + .detail-section {
	border-top: 0;
}

.detail-section h3 {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}

.detail-description {
	font-size: 14px;
	line-height: 1.8;
	color: var(--ink);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.location-note {
	margin: 12px 0 0;
	padding: 8px 12px;
	border-radius: var(--radius-s);
	background: var(--priority-tint);
	color: var(--priority-text);
	font-size: 12.5px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* sources and website: small, separate, at the bottom */
.detail-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
	font-size: 12px;
	line-height: 1.6;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.detail-links a {
	color: var(--ink-soft);
}

.detail-links a:hover {
	color: var(--accent-strong);
}

.detail-sources {
	flex: 1 1 100%;
	min-width: 0;
}

.detail-sources > summary {
	width: fit-content;
	cursor: pointer;
	font-weight: 600;
}

.detail-sources ul {
	display: grid;
	gap: 8px;
	margin: 10px 0 0;
	padding-left: 16px;
}

.booth-program-venue {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--muted);
}

.legacy-note {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--ink-soft);
}

.legacy-note > summary {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
}

.legacy-note-text {
	margin-top: 8px;
	padding-left: 10px;
	border-left: 2px solid var(--brand);
	line-height: 1.7;
}

.detail-products {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.detail-products li {
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface);
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.detail-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
}

/* ---------- exhibitor information (markup from app.js) ---------- */

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

.card-description.muted {
	font-size: 12px;
	color: var(--muted);
}

.booth-tags,
.product-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.booth-tags:empty {
	display: none;
}

.booth-tag {
	display: inline-flex;
	align-items: center;
	padding: 0 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.75;
	color: var(--ink-soft);
	white-space: nowrap;
}

.booth-tag::before {
	content: "";
	width: 5px;
	height: 5px;
	margin-right: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

.product-tags .booth-tag::before {
	display: none;
}

.booth-tag-tasting {
	border-color: color-mix(in srgb, var(--visited) 30%, transparent);
	background: var(--visited-tint);
	color: var(--visited-text);
}

.booth-tag-sales {
	border-color: color-mix(in srgb, var(--want) 28%, transparent);
	background: var(--want-tint);
	color: var(--want-text);
}

.booth-tag-newProducts {
	border-color: color-mix(in srgb, var(--warning-strong) 35%, transparent);
	background: var(--priority-tint);
	color: var(--priority-text);
}

.booth-information {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.booth-information h3 {
	margin-bottom: 0;
}

.booth-reference-note {
	padding: 8px 12px;
	border-radius: var(--radius-s);
	background: var(--priority-tint);
	color: var(--priority-text);
	font-size: 12.5px;
	line-height: 1.6;
}

.booth-description {
	font-size: 14px;
	line-height: 1.8;
	color: var(--ink);
}

.product-tags .booth-tag {
	padding: 1px 9px;
	background: var(--surface);
	font-size: 12px;
	white-space: normal;
	overflow-wrap: anywhere;
}

.booth-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--line);
	overflow: hidden;
}

.booth-fact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 8px;
	min-width: 0;
	padding: 9px 12px;
	background: var(--surface);
}

.booth-fact:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.booth-fact dt {
	min-width: 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-soft);
	overflow-wrap: anywhere;
}

.booth-fact dd {
	flex: none;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
}

.booth-fact dd.fact-yes {
	color: var(--visited-text);
}

.booth-fact dd.fact-yes::before {
	content: "✓ ";
}

.booth-website {
	justify-self: start;
	min-height: 38px;
	padding: 6px 16px;
	font-size: 13px;
}

.booth-source {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--muted);
}

.booth-source a {
	color: var(--muted);
}

.booth-source a:hover {
	color: var(--accent-strong);
}

.booth-source span {
	font-family: var(--num);
	font-variant-numeric: tabular-nums;
}

/* ---------- toast ---------- */

.toast {
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--primary);
	color: var(--primary-fg);
	font-size: 13.5px;
	font-weight: 600;
	box-shadow: 0 12px 32px -12px rgb(13 17 23 / 0.5);
}

noscript p {
	margin: 20px;
	padding: 14px 18px;
	border-radius: var(--radius);
	background: var(--priority-tint);
}

/* ---------- small screens ---------- */

@media (max-width: 720px) {
	.day-tabs {
		justify-self: stretch;
	}

	.day-button {
		flex: 1;
		padding: 2px 8px;
	}

	/* panel sits below the map: top edge instead of side edge */
	.detail-panel,
	.list-panel {
		border-right: 0;
		border-top: 1px solid var(--line);
		box-shadow: 0 -4px 16px -12px rgb(13 17 23 / 0.3);
	}

	/* Both presenters share the map bottom sheet. */
	.detail-panel,
	.list-panel {
		border: 1px solid var(--line);
		border-bottom: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -6px 24px -10px rgb(13 17 23 / 0.35);
	}

	.detail-sheet-handle > span {
		background: var(--line);
	}

	.detail-sheet-handle:hover > span,
	:is(.detail-panel, .list-panel).is-sheet-dragging
		.detail-sheet-handle
		> span {
		background: var(--muted);
	}

	.detail-sheet-handle:focus-visible {
		outline: 2px solid var(--ring);
		outline-offset: -4px;
		border-radius: 12px;
	}

	.detail-close {
		right: 8px;
	}

	/* the handle above supplies the top spacing */
	.detail-header {
		padding: 2px 48px 10px 14px;
	}

	.detail-body {
		padding: 0 14px calc(14px + env(safe-area-inset-bottom));
	}

	.detail-title {
		font-size: 16.5px;
		line-height: 1.35;
	}

	.detail-meta {
		margin-bottom: 8px;
		font-size: 12px;
	}

	.bookmark-button {
		width: 36px;
		height: 36px;
	}

	.bookmark-icon {
		width: 19px;
		height: 19px;
	}

	.visit-button {
		min-height: 32px;
		font-size: 12px;
	}

	.detail-section {
		padding: 12px 0;
	}

	.booth-fact {
		padding: 8px 10px;
	}

	.map-legend {
		gap: 2px 9px;
		padding: 5px 10px;
		font-size: 11px;
	}

	.legend-swatch {
		width: 10px;
		height: 10px;
	}

	.floor-button {
		padding-right: 10px;
		font-size: 13px;
	}

	/* 16px keeps iOS Safari from zooming into the field */
	.map-search-form input {
		font-size: 16px;
	}

	.map-search-form {
		padding-left: 12px;
	}

	.list-head {
		padding: 8px 12px 0;
	}

	.list-heading {
		padding: 8px 0;
	}

	dialog {
		padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
	}
}