/**
 * Still Water Day of light (Figma Home "V5 Signature · A day of light on the lake" 10:6125 /
 * 10:7230 / 10:8336; cabin pages "A day of light · <cabin>" 10:6726 / 10:7834 / 10:8955).
 *
 * Curve (Home, mist section): title (h1) in 744 at the left, the line (body-lg, muted) in 400 at
 * the right, level with the title's bottom. 40 under them a white panel (radius 16, padding
 * 32 40): the colour key (12 swatches, radius 2, items 20 apart), 20 under it the chart, 1120
 * wide: the sun curve (1040 × 216, degree labels after it), the day bar 12 under it (28 high,
 * radius 6), the hours 8 under that. 40 under the panel four moments, 24 apart (rule on top,
 * value numeral over label small muted). Tablet: heading stacked (12); panel padding 24; the
 * chart scrolls; moments centred (A10). Phone: panel padding 16 20, key stacked; moments one
 * per row, label left, time right (h3).
 *
 * Compass (cabin pages, white section): label + title (16 apart) in 588, line + source (16
 * apart) in 588 beside it; 48 under them the compass column (384) and, 24 to its right, the
 * day. Compass: drawing 384, the facing line 12 under it (16/24 semibold), the ray keys 12
 * under that (dash 16 × 2, 8 apart). Day: date label, band 16 under it (48 high, radius 4),
 * hours 16 under, key 16 under (16 swatches, items 24 apart), total 16 under (16/24), moments
 * 16 under in two columns 24 apart (time numeral, label 16/24 semibold). Tablet: one column,
 * compass 320, 32 between; phone: compass 300, moments one per row.
 */

.sw-dol {
	--sw-dol-night: var(--sw-c-ink);
	--sw-dol-twilight: var(--sw-c-muted);
	--sw-dol-golden: var(--sw-c-sun);
	--sw-dol-day: var(--sw-c-pale);
	--sw-dol-panel: var(--sw-c-white);
}

/* ---------- Heading ---------- */

.sw-dol__head {
	display: grid;
	grid-template-columns: minmax(0, 744px) minmax(0, 400px);
	justify-content: space-between;
	align-items: end;
	gap: 12px 56px;
	margin-bottom: 40px;
}

.sw-dol__title .sw-eyebrow {
	margin-bottom: 16px;
}

.sw-dol__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sw-dol--compass .sw-dol__head {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 16px 24px;
	margin-bottom: 48px;
}

/* ---------- Band, hours, key ---------- */

.sw-dol__seg--night {
	background: var(--sw-dol-night);
}

.sw-dol__seg--twilight {
	background: var(--sw-dol-twilight);
}

.sw-dol__seg--golden {
	background: var(--sw-dol-golden);
}

.sw-dol__seg--day {
	background: var(--sw-dol-day);
}

.sw-dol__band {
	display: flex;
	overflow: hidden;
	height: 48px;
	margin-top: 16px;
	border-radius: 4px;
}

.sw-dol__seg {
	flex: none;
	height: 100%;
}

.sw-dol__hours {
	position: relative;
	height: 20px;
	margin-top: 16px;
}

.sw-dol__hours li {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

.sw-dol__hours li:first-child {
	transform: none;
}

.sw-dol__hours li:last-child {
	transform: translateX(-100%);
}

.sw-dol__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 16px;
}

.sw-dol__key {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sw-heading);
}

.sw-dol__swatch {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 2px;
}

/* Daylight is pale on white: a line around its swatch, as drawn. */
.sw-dol__swatch.sw-dol__seg--day {
	border: 1px solid var(--sw-line);
}

/* ---------- Curve (Home) ---------- */

.sw-dol__panel {
	padding: 32px 40px;
	border-radius: var(--sw-radius-panel);
	background: var(--sw-dol-panel);
}

.sw-dol--curve .sw-dol__legend {
	gap: 8px 20px;
	margin-top: 0;
}

.sw-dol--curve .sw-dol__key {
	gap: 8px;
}

.sw-dol--curve .sw-dol__swatch {
	width: 12px;
	height: 12px;
}

.sw-dol__scroll {
	margin-top: 20px;
	overflow-x: auto;
	scrollbar-width: none;
}

.sw-dol__scroll::-webkit-scrollbar {
	display: none;
}

.sw-dol__chart {
	width: 1120px;
}

.sw .sw-dol__curve {
	display: block;
	width: 1120px;
	max-width: none;
	height: 216px;
	overflow: visible;
}

.sw-dol__chart .sw-dol__band,
.sw-dol__chart .sw-dol__hours {
	width: 1040px;
}

.sw-dol__chart .sw-dol__band {
	height: 28px;
	margin-top: 12px;
	border-radius: 6px;
}

.sw-dol__chart .sw-dol__hours {
	margin-top: 8px;
}

.sw-dol__line-zero {
	stroke: var(--sw-c-line);
	stroke-width: 1;
}

.sw-dol__line-golden {
	stroke: var(--sw-dol-golden);
	stroke-width: 1;
}

.sw-dol__path {
	fill: none;
	stroke: var(--sw-c-ink);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.sw-dol__dot {
	stroke: var(--sw-c-ink);
	stroke-width: 1;
}

.sw-dol__dot--rise {
	fill: var(--sw-c-white);
}

.sw-dol__dot--golden {
	fill: var(--sw-dol-golden);
}

.sw-dol__dot--peak {
	fill: var(--sw-c-ink);
}

.sw-dol__note,
.sw-dol__deg {
	font-family: var(--sw-sans);
	font-size: var(--sw-fs-small);
}

.sw-dol__note {
	fill: var(--sw-c-ink);
}

.sw-dol__deg {
	fill: var(--sw-c-muted);
	dominant-baseline: middle;
}

/* ---------- Moments ---------- */

.sw-dol__moments {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 40px 0 0;
}

/* Time over label, as drawn; the label stays first in the markup for screen readers. */
.sw-dol__moment {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	min-width: 0;
}

.sw-dol__what {
	margin-top: 4px;
	color: var(--sw-muted);
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
}

.sw-dol--compass .sw-dol__moments {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 16px;
}

.sw-dol--compass .sw-dol__what {
	margin-top: 8px;
	color: var(--sw-heading);
	font-size: var(--sw-fs-body);
	line-height: var(--sw-lh-body);
	font-weight: 600;
}

/* ---------- Compass (cabin pages) ---------- */

.sw-dol__diagram {
	display: grid;
	grid-template-columns: 384px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* One drawing per screen size (384 / 320 / 300), each at 1:1 so letters, dots and the 28
   margin keep their Figma size. */
.sw .sw-dol__compass {
	display: block;
	max-width: none;
}

.sw .sw-dol__compass--tablet,
.sw .sw-dol__compass--phone {
	display: none;
}

.sw-dol__view {
	fill: var(--sw-dol-day);
}

.sw-dol__horizon {
	fill: none;
	stroke: var(--sw-c-line);
	stroke-width: 1;
}

.sw-dol__cardinal {
	fill: var(--sw-c-muted);
	font-family: var(--sw-sans);
	font-size: var(--sw-fs-label);
	font-weight: 600;
	text-anchor: middle;
	dominant-baseline: middle;
}

.sw-dol__ray {
	stroke-width: 1.5;
}

.sw-dol__ray.sw-dol__ray--sun {
	stroke: var(--sw-dol-golden);
}

.sw-dol__ray.sw-dol__ray--muted {
	stroke: var(--sw-c-muted);
}

.sw-dol__sun.sw-dol__ray--sun,
.sw-dol__dash.sw-dol__ray--sun {
	fill: var(--sw-dol-golden);
	background: var(--sw-dol-golden);
}

.sw-dol__sun.sw-dol__ray--muted,
.sw-dol__dash.sw-dol__ray--muted {
	fill: var(--sw-c-muted);
	background: var(--sw-c-muted);
}

.sw-dol__cabin {
	fill: var(--sw-c-ink);
}

.sw-dol__facing {
	margin-top: 12px;
	color: var(--sw-heading);
	font-weight: 600;
}

.sw-dol__rays {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.sw-dol__ray-key {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sw-heading);
}

.sw-dol__dash {
	flex: none;
	width: 16px;
	height: 2px;
}

.sw-dol__day {
	min-width: 0;
}

.sw-dol__total {
	margin-top: 16px;
	color: var(--sw-heading);
}

/* Tablet (834). */
@media (max-width: 1024px) {
	.sw-dol__head,
	.sw-dol--compass .sw-dol__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.sw-dol--compass .sw-dol__head {
		margin-bottom: 48px;
	}

	.sw-dol__panel {
		padding: 24px;
	}

	.sw-dol--curve .sw-dol__moment {
		align-items: center;
		text-align: center;
	}

	.sw-dol__diagram {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.sw .sw-dol__compass--desktop {
		display: none;
	}

	.sw .sw-dol__compass--tablet {
		display: block;
	}
}

/* Phone (390). */
@media (max-width: 767px) {
	.sw-dol--compass .sw-dol__head {
		margin-bottom: 32px;
	}

	.sw-dol__panel {
		padding: 16px 20px;
	}

	.sw-dol--curve .sw-dol__legend {
		flex-direction: column;
	}

	.sw .sw-dol__compass--tablet {
		display: none;
	}

	.sw .sw-dol__compass--phone {
		display: block;
	}

	.sw-dol__moments,
	.sw-dol--compass .sw-dol__moments {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One moment per row: label left, time right (h3). */
	.sw-dol__moment,
	.sw-dol--curve .sw-dol__moment {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		text-align: left;
	}

	.sw-dol--compass .sw-dol__what {
		margin-top: 0;
	}

	.sw-dol__time {
		font-size: var(--sw-fs-h3);
		line-height: var(--sw-lh-h3);
	}
}