/*
 * LUW Score Board
 * Strict black/white design (no pastel, no curved rectangles, no emojis).
 * Typography inherits from the Twenty Twenty-Five template.
 */
.luw-sb {
	--luw-black: #000000;
	--luw-white: #ffffff;
	--luw-gray: #6b6b6b;
	--luw-line: #000000;
	--luw-border: #000000;
	--luw-field-bg: #ffffff;
	--luw-track: #ffffff;
	color: var(--luw-black);
	background: var(--luw-white);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 920px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

.luw-sb * {
	box-sizing: border-box;
}

.luw-sb h2,
.luw-sb h3,
.luw-sb h4 {
	color: var(--luw-black);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 1.4rem 0 0.6rem;
}

.luw-sb__title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 0.4rem;
}

.luw-sb__subtitle {
	font-size: 1rem;
	margin: 0 0 1.2rem;
	color: var(--luw-black);
}

.luw-sb__h3 {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 1.4rem 0 0.5rem;
}

/* ---------- 4-level visual hierarchy ---------- */
/* Level 1: Chapter bars (01 CONTEXT, 02 SCORING, 03 SONIC MIX) */
.luw-sb__chapter {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	background: var(--luw-black);
	color: var(--luw-white);
	padding: 0.7rem 1rem;
	margin: 1.8rem 0 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.luw-sb__chapter-num {
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}
.luw-sb__chapter-title {
	font-size: 1.05rem;
	font-weight: 700;
}
/* Chapter bars inside a panel stretch to the panel's full width (match 01 CONTEXT bar) */
.luw-sb__chapter--in-panel {
	margin-left: -1.2rem;
	margin-right: -1.2rem;
	padding-left: 1.2rem;
	padding-right: 1.2rem;
}

/* Level 2: Section titles (Sonic UX, DEAR Sonic Habitat, Present Sonic Mix) */
.luw-sb__section-title {
	font-size: 1.12rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}

/* Level 3: Question labels */
.luw-sb__q {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Level 4: Helper text (small, grey) */
.luw-sb__helper {
	font-size: 0.78rem;
	color: var(--luw-gray);
	margin: 0.15rem 0 0;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
}
.luw-sb__helper--spaced {
	margin: 0 0 0.9rem;
}

/* Section head: icon + title + helper stacked */
.luw-sb__section-headtext { display: flex; flex-direction: column; }

/* ---------- Collapsible guide / metrics ---------- */
.luw-sb__collapse {
	border: 1px solid var(--luw-border);
	background: var(--luw-white);
	margin: 0.8rem 0;
}

.luw-sb__collapse > summary {
	cursor: pointer;
	padding: 0.7rem 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.luw-sb__collapse > summary::-webkit-details-marker { display: none; }
.luw-sb__collapse > summary::after {
	content: "+";
	font-size: 1.2rem;
	font-weight: 400;
}
.luw-sb__collapse[open] > summary::after { content: "−"; }

.luw-sb__collapse-body {
	padding: 0 1rem 1rem;
}

.luw-sb__guide ol {
	margin: 0;
	padding-left: 1.2rem;
}
.luw-sb__guide li { margin-bottom: 0.4rem; }

.luw-sb__metrics-row {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin: 0.8rem 0;
}
.luw-sb__metrics-row img.luw-sb__icon {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
}
.luw-sb__metrics-text h4 { margin: 0 0 0.3rem; }
.luw-sb__metrics-text h4.luw-sb__metrics-label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 0.3rem;
}
.luw-sb__metrics-text p { margin: 0 2rem 0.3rem 0; }

.luw-sb__term {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.luw-sb__source-list {
	list-style: none;
	margin: 0.3rem 0 0.6rem;
	padding-left: 0;
}
.luw-sb__source-list li { margin-bottom: 0.3rem; }

/* ---------- Route selection ---------- */
.luw-sb__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1rem 0;
}
.luw-sb__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.luw-sb__field > span {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.luw-sb select,
.luw-sb input[type="text"],
.luw-sb input[type="date"],
.luw-sb input[type="time"],
.luw-sb input[type="number"],
.luw-sb textarea {
	border: 1px solid var(--luw-border);
	background: var(--luw-field-bg);
	color: var(--luw-black);
	border-radius: 0;
	padding: 0.45rem 0.5rem;
	font: inherit;
	width: 100%;
	max-width: 320px;
}
.luw-sb textarea { max-width: 100%; min-height: 70px; resize: vertical; }
.luw-sb select:focus,
.luw-sb input:focus,
.luw-sb textarea:focus {
	outline: 1px solid var(--luw-black);
	outline-offset: -1px;
}

.luw-sb__check-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
}

/* ---------- Map ---------- */
.luw-sb__map {
	width: 100%;
	height: 360px;
	border: 1px solid var(--luw-border);
	background: var(--luw-white);
	margin: 0.5rem 0 1rem;
}
.luw-sb__map .leaflet-control-attribution { font-size: 0.65rem; }

/* ---------- Tabs ---------- */
.luw-sb__tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--luw-border);
	margin: 1rem 0 0;
}
.luw-sb__tab {
	border: 1px solid var(--luw-border);
	border-bottom: none;
	background: var(--luw-white);
	color: var(--luw-black);
	padding: 0.5rem 1.4rem;
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-right: -1px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.luw-sb__tab[aria-selected="true"] {
	background: var(--luw-black);
	color: var(--luw-white);
}
.luw-sb__tab-point {
	font-weight: 600;
}
.luw-sb__tab:focus-visible { outline: 1px dashed var(--luw-black); outline-offset: 2px; }

.luw-sb__panel {
	border: none;
	padding: 1.2rem;
	display: none;
}
.luw-sb__panel.is-active { display: block; }

/* ---------- Form sections ---------- */
.luw-sb__section {
	padding-top: 0;
	margin-top: 0;
}
.luw-sb__section:first-child { margin-top: 0; padding-top: 0; }

/* ---------- SONIC MIX major sections (Present / Motif / Desired) ----------
 * Whitespace-driven hierarchy: clear separation between the three major
 * sections, a subtle divider to mark each section start, consistent
 * head typography, and identifiable control groups. */
.luw-sb__section--mix {
	margin-top: 2.2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--luw-border);
}
.luw-sb__section--mix .luw-sb__section-head {
	margin-top: 0;
	margin-bottom: 1.1rem;
}
.luw-sb__section--mix .luw-sb__section-title {
	font-size: 1.18rem;
	letter-spacing: 0.05em;
}
/* Interaction group: the four source controls + Sum status line. */
.luw-sb__mix-group {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-left: 0.4rem;
}
.luw-sb__mix-group .luw-sb__mixer {
	margin: 0;
}
.luw-sb__mix-group .luw-sb__mixer-sum {
	margin-top: 0.55rem;
	font-weight: 500;
	color: var(--luw-gray);
}
.luw-sb__mix-group .luw-sb__mixer-sum.is-over { color: var(--luw-black); font-weight: 700; }
/* Motif section: subordinate fields with consistent rhythm. */
.luw-sb__motif-fields {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-left: 0.4rem;
}
.luw-sb__motif-fields .luw-sb__form-group { margin-bottom: 0; }
.luw-sb__motif-fields .luw-sb__q { margin-bottom: 0.3rem; }


.luw-sb__section-head {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin-bottom: 0.9rem;
	margin-top: 1.6rem;
}
.luw-sb__section-head img.luw-sb__icon { width: 34px; height: 34px; flex: 0 0 auto; }
.luw-sb__section-head img.luw-sb__icon[src*="sonic-spatial-motif"] { width: 37px; height: 37px; }
.luw-sb__section-head h4 { margin: 0; }
/* Center the icon vertically with the title (e.g. Sonic Spatial Motif) */
.luw-sb__section-head--center { align-items: center; }

.luw-sb__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem 1.4rem;
}

.luw-sb__form-group { margin-bottom: 1rem; }
.luw-sb__form-group > label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* Date / time inputs: keep a gap between the two rectangles */
.luw-sb__form-group input[type="date"] { margin-bottom: 0.5rem; }

.luw-sb__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.2rem;
}
.luw-sb__checks label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- Sliders ---------- */
/* ---------- Rate component (label | value, then slider with end labels) ---------- */
.luw-sb__rate {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.6rem 0 0.1rem;
}
.luw-sb__rate-label {
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.luw-sb__rate-val {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.82rem;
}
.luw-sb__rate--exposure .luw-sb__rate-val { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.luw-sb__rate-slider {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.7rem;
	cursor: pointer;
}
.luw-sb__rate-end {
	font-size: 0.66rem;
	color: var(--luw-gray);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	flex: 0 0 auto;
}
.luw-sb__rate-slider input[type="range"] { flex: 1 1 auto; }

/* Sonic Affectivity (Sonic Spatial Motif): Likert wording under the slider */
.luw-sb__rate--motif .luw-sb__rate-val { font-weight: 600; }
.luw-sb__motif-label {
	font-size: 0.72rem;
	color: var(--luw-gray);
	letter-spacing: 0.03em;
	margin-bottom: 0.7rem;
}

/* Legacy slider row (kept for compatibility) */
.luw-sb__slider-row { margin-bottom: 1rem; }
.luw-sb__slider-row > label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
.luw-sb__slider-val {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	border: 1px solid var(--luw-border);
	padding: 0 0.4rem;
	min-width: 2.4rem;
	text-align: center;
	background: var(--luw-white);
}

.luw-sb input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	background: var(--luw-black);
	border-radius: 0;
	outline: none;
}
.luw-sb input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	background: var(--luw-black);
	border: 1px solid var(--luw-black);
	border-radius: 50%;
	cursor: pointer;
}
.luw-sb input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	background: var(--luw-black);
	border: 1px solid var(--luw-black);
	border-radius: 50%;
	cursor: pointer;
}

/* Vertical control-mixer (custom, cross-browser). A div track with a
   draggable black handle replaces the native vertical range input, which
   rendered inconsistently across Safari/Firefox/iPhone. A hidden range
   input keeps the data-source/data-desired + .value contract used by JS. */
.luw-sb__mixer {
	display: flex;
	gap: 1.4rem;
	flex-wrap: nowrap;
	margin: 0.6rem 0;
}
.luw-sb__mixer-channel {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 84px;
}
.luw-sb__mixer-label {
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.6rem;
	text-align: center;
	font-weight: 600;
	white-space: nowrap;
}
.luw-sb__mixer-val {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.78rem;
	margin-top: 0.3rem;
	text-align: center;
}
/* The visual vertical bar (track + fill + handle). */
.luw-sb__vbar {
	position: relative;
	width: 28px;
	height: 150px;
	border: 1px solid var(--luw-black);
	background: var(--luw-white);
	cursor: pointer;
	touch-action: none;
	user-select: none;
}
.luw-sb__vbar-track {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 4px;
	margin-left: -2px;
	background: var(--luw-white);
}
.luw-sb__vbar-fill {
	position: absolute;
	left: 50%;
	width: 4px;
	margin-left: -2px;
	bottom: 0;
	background: var(--luw-black);
}
.luw-sb__vbar-handle {
	position: absolute;
	left: 50%;
	width: 24px;
	margin-left: -12px;
	height: 12px;
	background: var(--luw-black);
	border: 1px solid var(--luw-black);
	cursor: grab;
}
.luw-sb__vbar-handle:active { cursor: grabbing; }
/* Hidden range input that holds the value (kept in sync by JS). */
.luw-sb input[type="range"].luw-sb__vslider-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Mobile: horizontal layout (reliable touch) ---------- */
@media (max-width: 600px) {
	.luw-sb__mixer {
		flex-direction: column;
		gap: 0.8rem;
	}
	.luw-sb__mixer-channel {
		display: grid;
		grid-template-columns: 4.5rem 1fr 3rem;
		align-items: center;
		width: 100%;
		gap: 0.6rem;
	}
	.luw-sb__mixer-label {
		margin-bottom: 0;
		text-align: left;
	}
	.luw-sb__mixer-val {
		margin-top: 0;
		text-align: right;
	}
	.luw-sb__vbar {
		height: 28px;
		width: 100%;
	}
	.luw-sb__vbar-track {
		left: 0;
		right: 0;
		top: 50%;
		bottom: auto;
		width: auto;
		height: 4px;
		margin-left: 0;
		margin-top: -2px;
	}
	.luw-sb__vbar-fill {
		left: 0;
		bottom: auto;
		top: 50%;
		width: auto;
		height: 4px;
		margin-top: -2px;
	}
	.luw-sb__vbar-handle {
		left: 0;
		top: 50%;
		width: 12px;
		height: 24px;
		margin-left: -6px;
		margin-top: -12px;
	}
}

.luw-sb__mixer-sum {
	font-size: 0.78rem;
	margin-top: 0.4rem;
	font-weight: 600;
}
.luw-sb__mixer-sum.is-over { color: var(--luw-black); font-weight: 700; }
.luw-sb__mixer-sum[data-ok="0"] { color: var(--luw-gray); }

/* ---------- Aggregate scores (inline, no contour) ---------- */
.luw-sb__agg-val {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Sub-section titles inside SONIC MIX (same size as SONIC UX / DEAR titles) */
.luw-sb__sub-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin: 1rem 0 0.4rem;
}

/* Total score line (closes a scoring section; not bigger than the section title) */
.luw-sb__total {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin: 0.8rem 0 0.2rem;
}
.luw-sb__total-val {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ---------- Project page link ---------- */
.luw-sb__project-link { margin: 0 0 1rem; }


/* ---------- Score result box ---------- */
.luw-sb__score-box {
	border: none;
	background: var(--luw-white);
	padding: 0.8rem 1rem;
	margin: 1rem 0 0.4rem;
	text-align: center;
}
.luw-sb__score-box-head {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.3rem;
}
.luw-sb__score-box-main {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.luw-sb__score-box-max { font-size: 0.9rem; font-weight: 400; color: var(--luw-gray); }
.luw-sb__score-box-band {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 0.25rem;
}

/* Small vertical spacer (e.g. between GPS button and the location input) */
.luw-sb__spacer { height: 0.6rem; }

/* ---------- Context: two-column rows + about-you ---------- */
.luw-sb__ctx-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem 1.4rem;
}
.luw-sb__about-you {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem 1.4rem;
	margin-top: 0.4rem;
}

/* ---------- Temperature (part of Weather Conditions) ---------- */
.luw-sb__temp-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.8rem; /* empty line between the weather checkboxes and the temperature field */
}
.luw-sb__temp-row > label {
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}
.luw-sb__temp-row > input[type="number"] {
	width: 4.5rem;
	padding: 0.2rem 0.4rem;
	font-size: 0.85rem;
	border: 1px solid var(--luw-black);
	border-radius: 0;
	background: var(--luw-white);
}

/* ---------- Exposure ---------- */
.luw-sb__exposure {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.luw-sb__exposure-cat {
	font-size: 0.8rem;
	font-weight: 600;
	border: 1px solid var(--luw-border);
	padding: 0.15rem 0.5rem;
	background: var(--luw-white);
}

/* ---------- Privacy + buttons ---------- */
.luw-sb__privacy-consent {
	border: none;
	padding: 0.6rem 0.9rem;
	margin: 1.2rem 0 0.8rem;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.luw-sb__privacy-consent input { margin-top: 0.25rem; }

/* Route-level actions block (outside listening-point tabs) */
.luw-sb__route-actions {
	border-top: none;
	margin-top: 1.6rem;
	padding-top: 0;
}

/* Route-level context block (shared by all listening points) */
.luw-sb__route-context {
	border: 1px solid var(--luw-border);
	padding: 0.8rem 1rem;
	margin: 1rem 0 1.4rem;
}

.luw-sb__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 1rem 0 1.4rem;
}
.luw-sb__btn {
	border: 1px solid var(--luw-black);
	background: var(--luw-white);
	color: var(--luw-black);
	padding: 0.55rem 1.1rem;
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font: inherit;
	border-radius: 0;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.luw-sb__btn:hover { background: var(--luw-black); color: var(--luw-white); }
.luw-sb__btn--primary { background: var(--luw-black); color: var(--luw-white); }
.luw-sb__btn--primary:hover { background: var(--luw-white); color: var(--luw-black); }
.luw-sb__btn--small { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.luw-sb__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.luw-sb__btn--primary:disabled { opacity: 1; background: var(--luw-white); color: var(--luw-black); border: 1px solid var(--luw-black); cursor: not-allowed; }
.luw-sb__btn--admin { border-style: dashed; }

.luw-sb__status {
	margin: 0.6rem 0;
	font-size: 0.9rem;
	min-height: 1.2em;
}
.luw-sb__status.is-error { font-weight: 600; }
.luw-sb__status.is-ok { font-weight: 600; }

.luw-sb__muted { color: var(--luw-gray); }

/* ---------- Privacy note footer ---------- */
.luw-sb__privacy-note {
	margin-top: 2rem;
	padding-top: 1rem;
	font-size: 0.82rem;
}
.luw-sb__privacy-note a { color: var(--luw-black); text-decoration: underline; }
.luw-sb__credit {
	margin-top: 0.6rem;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---------- Synthesis ---------- */
.luw-sb__synth-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1rem;
	margin-bottom: 1rem;
}
.luw-sb__synth-body { margin-top: 1rem; }
.luw-sb__chart { margin: 1rem 0; }
.luw-sb__chart-title {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
}
.luw-sb__bar-chart { display: grid; gap: 0.5rem; }
.luw-sb__bar-row {
	display: grid;
	grid-template-columns: 9rem 1fr 2.5rem;
	align-items: center;
	gap: 0.6rem;
}
.luw-sb__bar-track {
	height: 14px;
	border: 1px solid var(--luw-black);
	background: var(--luw-white);
	position: relative;
}
.luw-sb__bar-fill {
	height: 100%;
	background: var(--luw-black);
}
.luw-sb__bar-val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.luw-sb__admin-export {
	border: 1px dashed var(--luw-black);
	padding: 1rem;
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

@media (max-width: 600px) {
	.luw-sb__bar-row { grid-template-columns: 7rem 1fr 2rem; }
}

/* ---------- Audio block (route project pages) ---------- */
.luw-sb__audio-block {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 1.5rem 0 3rem;
}
.luw-sb__audio-block .luw-sb__h3 {
	margin: 0 0 0.6rem;
}
.luw-sb__audio-block .luw-audio-point {
	margin: 0 0 1rem;
}
.luw-sb__audio-block .luw-sb__audio-label {
	display: inline-block;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin: 0 1em 0 0;
	flex: 0 0 auto;
	min-width: 2.5em;
}
.luw-sb__audio-block .luw-audio-wrap {
	margin: 0;
	text-align: left;
}
.luw-sb__audio-block .luw-audio-min {
	margin: 0;
}
.luw-sb__back {
	text-align: center;
	margin: 3.6em 0 0;
}
.luw-sb__back-link {
	justify-content: center;
}

/* ---------- Per-listening-point repeatable block (02 SCORING + 03 SONIC MIX) ----------
   A fine black outline wraps the Scoring + Sonic Mix questions for each
   listening point so it is clear the user must repeat 02 and 03 for L1, L2, L3. */
.luw-sb__point-block {
	border: 1px solid var(--luw-black);
	padding: 1.2rem;
	margin: 0;
}
.luw-sb__point-block .luw-sb__chapter--in-panel {
	margin-left: -1.2rem;
	margin-right: -1.2rem;
	padding-left: 1.2rem;
	padding-right: 1.2rem;
}

/* ---------- Synthesis: per-point score cards (map popups) ---------- */
.luw-sb__point-card {
	font-size: 0.85rem;
	line-height: 1.4;
	min-width: 200px;
}
.luw-sb__point-card strong {
	font-size: 0.95rem;
	letter-spacing: 0.05em;
}
.luw-sb__point-card-table {
	border-collapse: collapse;
	margin: 0.5rem 0 0.3rem;
	width: 100%;
}
.luw-sb__point-card-table th {
	text-align: left;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid #000;
	padding: 0.25rem 0.4rem 0.25rem 0;
}
.luw-sb__point-card-table td {
	border-bottom: 1px solid #e0e0e0;
	padding: 0.2rem 0.4rem 0.2rem 0;
	font-variant-numeric: tabular-nums;
}
.luw-sb__point-card-table td:last-child {
	text-align: right;
	padding-right: 0;
}
.luw-sb__point-card-n {
	margin: 0.3rem 0 0;
	font-size: 0.75rem;
	color: #6b6b6b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Synthesis: 3D sonic spatial motif cube ---------- */
.luw-sb__motif-cube-wrap {
	border: 1px solid var(--luw-black);
	padding: 1rem;
	margin: 1rem 0;
	background: var(--luw-white);
}
.luw-sb__motif-cube {
	width: 100%;
	height: auto;
	display: block;
}
.luw-sb__motif-dot {
	cursor: pointer;
	transition: r 0.1s ease;
}
.luw-sb__motif-dot:hover {
	fill: #000;
}
.luw-sb__motif-legend-list {
	margin: 0.3rem 0 0;
	padding-left: 1.2rem;
}
.luw-sb__motif-legend-list li {
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
}