/* packedplans/sleep-picker — APP-PLAN §4.5. Two renderings of one tool: the grouped list of
   every place we track, which is what a reader with no JavaScript gets, and the three question
   rows plus one answer that view.js swaps in. Both use the geometry already on the page, the
   pill chips from the duration picker and the trip cost tiers, and the card shell from the stay
   grid. Only ever consumes --pp-*; tokens.css defines them. */

.pp-sleep {
	margin-block: var(--pp-space-8);
}

/* The accent rule sits above the words, like every other section heading (SPEC §9.4.4). */
.pp-sleep__title {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: var(--pp-space-3);
	margin: 0 0 var(--pp-space-4);
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h2);
	font-weight: var(--pp-fw-display, 400);
	line-height: var(--pp-lh-heading);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.pp-sleep__intro {
	max-inline-size: var(--pp-measure);
	margin: 0 0 var(--pp-space-5);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
}

/* `display` beats the `hidden` attribute, so every box here has to opt back out of it. The
   attribute is the only switch view.js touches; it never writes an inline style. */
.pp-sleep__form[hidden],
.pp-sleep__result[hidden],
.pp-sleep__areas[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ the three questions */

.pp-sleep__form {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-5);
	margin-block-end: var(--pp-space-6);
}

.pp-sleep__q {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
}

.pp-sleep__qlabel {
	margin: 0;
	font-size: var(--pp-fs-h4);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
}

.pp-sleep__opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-2);
}

.pp-sleep__opt {
	display: inline-flex;
	align-items: center;
	/* DESIGN §5.3: 48px of target, 8px between neighbours. */
	min-block-size: 48px;
	padding-inline: var(--pp-space-4);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-pill);
	background: var(--pp-surface);
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
	cursor: pointer;
}

/* DESIGN §9.9: the chosen answer changes fill, border and weight, so it reads in greyscale. */
.pp-sleep__opt[aria-pressed="true"] {
	border-color: var(--pp-accent);
	background: var(--pp-accent-weak);
	font-weight: 600;
}

.pp-sleep__opt:focus-visible,
.pp-sleep__pick:focus-visible {
	outline: 2px solid var(--pp-focus);
	outline-offset: 2px;
}

@media (hover: hover) {
	.pp-sleep__opt:hover,
	.pp-sleep__pick:hover {
		border-color: var(--pp-accent);
	}
}

/* ------------------------------------------------------------------ the answer */

.pp-sleep__result {
	margin-block-end: var(--pp-space-6);
}

.pp-sleep__eyebrow {
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	line-height: var(--pp-lh-ui);
	text-transform: uppercase;
}

.pp-sleep__areapick {
	margin: var(--pp-space-1) 0 0;
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h2);
	font-weight: var(--pp-fw-display, 400);
	line-height: var(--pp-lh-heading);
	letter-spacing: -.02em;
}

.pp-sleep__why {
	max-inline-size: var(--pp-measure);
	margin: var(--pp-space-2) 0 0;
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
}

.pp-sleep__cards {
	display: grid;
	gap: var(--pp-space-4);
	margin-block-start: var(--pp-space-5);
}

/* auto-fill, not auto-fit: one hotel is one card the width of a column, never a card stretched
   across the whole article. The two-column layout at lg takes width back and drops a column. */
@media (min-width: 37.5em) {
	.pp-sleep__cards {
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	}
}

.pp-sleep__card {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-1);
	padding: var(--pp-space-4);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
}

.pp-sleep__card[data-picked="true"] {
	border-color: var(--pp-accent);
	background: var(--pp-accent-weak);
}

.pp-sleep__cardarea {
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	line-height: var(--pp-lh-ui);
	text-transform: uppercase;
}

.pp-sleep__cardname {
	margin: 0;
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h3);
	font-weight: var(--pp-fw-display, 400);
	line-height: var(--pp-lh-heading);
}

.pp-sleep__cardprice {
	margin: 0;
	font-size: var(--pp-fs-body);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	line-height: var(--pp-lh-ui);
}

.pp-sleep__cardrating {
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	line-height: var(--pp-lh-ui);
}

.pp-sleep__cardcta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-2);
	margin-block-start: var(--pp-space-3);
}

.pp-sleep__pick {
	display: inline-flex;
	align-items: center;
	min-block-size: 48px;
	padding-inline: var(--pp-space-4);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-pill);
	background: transparent;
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
	cursor: pointer;
}

.pp-sleep__pick[aria-pressed="true"] {
	border-color: var(--pp-accent);
	background: var(--pp-surface);
	font-weight: 600;
}

/* ------------------------------------------------- the list with no JavaScript (DESIGN §5.2 G4) */

.pp-sleep__areastitle {
	margin: 0 0 var(--pp-space-4);
	font-size: var(--pp-fs-h4);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
}

.pp-sleep__area + .pp-sleep__area {
	margin-block-start: var(--pp-space-5);
}

.pp-sleep__areaname {
	margin: 0 0 var(--pp-space-2);
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h3);
	font-weight: var(--pp-fw-display, 400);
	line-height: var(--pp-lh-heading);
}

.pp-sleep__rows {
	max-inline-size: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-sleep__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pp-space-1) var(--pp-space-3);
	margin: 0;
	padding-block: var(--pp-space-2);
	border-block-start: 1px solid var(--pp-border);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
}

.pp-sleep__name {
	flex: 1 1 10rem;
	font-weight: 600;
}

.pp-sleep__band {
	flex: 0 0 auto;
}

/* The whole basis forces the break, so every row is the name and the band, then the figures. */
.pp-sleep__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-1) var(--pp-space-3);
	flex: 1 0 100%;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-sleep__rating {
	color: var(--pp-text-muted);
}

/* On paper the questions are frozen at whatever they last showed, so print the list instead. */
@media print {
	.pp-sleep__form,
	.pp-sleep__result {
		display: none;
	}

	.pp-sleep__areas[hidden] {
		display: block !important;
	}
}