/* packedplans/trip-cost — the app's "Estimate my trip" screen on the page (APP-PLAN §4.6).
   The geometry the rest of the page already uses: the display face and tabular figures for the
   total, hairline rows for the breakdown, and no colour beyond the one accent. Two states live
   here, the printed list of totals and the app screen view.js builds, and only one is ever on
   screen. Sized for the 42rem reading column, and for a 390px phone. */

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

/* Matches the other section headings: the accent rule sits above the words (SPEC §9.4.4). */
.pp-tripcost__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;
}

/* `display` beats the `hidden` attribute, so every flex or grid box here has to opt back out of
   it. [hidden] is the only switch view.js touches; it never writes inline styles. */
.pp-tripcost__app[hidden],
.pp-tripcost__controls[hidden],
.pp-tripcost__result[hidden],
.pp-tripcost__static[hidden],
.pp-tripcost__countdown[hidden],
.pp-tripcost__note[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ the app screen */

.pp-tripcost__app {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pp-space-4);
}

.pp-tripcost__lead {
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-lead);
	line-height: var(--pp-lh-body);
}

.pp-tripcost__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--pp-space-5);
	margin: 0;
}

.pp-tripcost__legend {
	display: block;
	margin-block-end: var(--pp-space-2);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ nights */

.pp-tripcost__stepper {
	display: flex;
	align-items: center;
	min-inline-size: 11rem;
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-pill);
	background: var(--pp-surface);
}

.pp-tripcost__step {
	inline-size: 56px;
	min-block-size: 52px;
	border: 0;
	border-radius: var(--pp-radius-pill);
	background: transparent;
	color: var(--pp-accent);
	font: inherit;
	font-size: var(--pp-fs-h3);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
	cursor: pointer;
}

/* At 1 night and at 14 the button keeps its space and goes, so the row does not jump and there
   is no disabled control to tab into (DESIGN §5.2 G4, same as the app's spacer). */
.pp-tripcost__step--off {
	visibility: hidden;
}

.pp-tripcost__value {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	line-height: var(--pp-lh-ui);
}

.pp-tripcost__count {
	font-size: var(--pp-fs-h3);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-tripcost__unit {
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-xs);
}

/* ------------------------------------------------------------------ the dates */

.pp-tripcost__date {
	min-block-size: 52px;
	padding-inline: var(--pp-space-3);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
	color: var(--pp-text);
	font: inherit;
	line-height: var(--pp-lh-ui);
}

.pp-tripcost__countdown {
	margin: var(--pp-space-2) 0 0;
	color: var(--pp-accent);
	font-size: var(--pp-fs-sm);
	font-weight: 600;
}

.pp-tripcost__step:focus-visible,
.pp-tripcost__date:focus-visible,
.pp-tripcost__clear:focus-visible {
	outline: 2px solid var(--pp-focus);
	outline-offset: 2px;
}

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

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

.pp-tripcost__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pp-space-3);
	inline-size: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--pp-space-4);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface-2);
}

.pp-tripcost__amount {
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h2);
	line-height: var(--pp-lh-heading);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-tripcost__caption {
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
}

.pp-tripcost__subtitle {
	margin: var(--pp-space-2) 0 0;
	font-size: var(--pp-fs-h4);
	font-weight: 600;
	line-height: var(--pp-lh-heading);
}

/* ------------------------------------------------------------------ where it goes */

.pp-tripcost__lines {
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-tripcost__line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-4);
	padding-block: var(--pp-space-3);
	border-block-end: 1px solid var(--pp-border);
}

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

.pp-tripcost__linename {
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-ui);
}

.pp-tripcost__linedetail {
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
}

.pp-tripcost__linevalue {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------ what is booked */

.pp-tripcost__picks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pp-space-3);
	inline-size: 100%;
}

.pp-tripcost__pick {
	inline-size: 100%;
	box-sizing: border-box;
	padding: var(--pp-space-4);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
}

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

.pp-tripcost__pickmeta {
	margin: var(--pp-space-1) 0 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
	font-variant-numeric: tabular-nums;
}

/* The solid fill belongs to the stay grid further down the page; in a summary of what is already
   picked the link style is enough (DESIGN §6.9). */
.pp-tripcost__pickcta {
	margin: 0;
}

.pp-tripcost__prompt {
	max-width: 62ch;
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}

.pp-tripcost__clear {
	min-block-size: 48px;
	padding-inline: var(--pp-space-5);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-pill);
	background: var(--pp-surface);
	color: var(--pp-text);
	font: inherit;
	font-weight: 600;
	line-height: var(--pp-lh-ui);
	cursor: pointer;
}

/* The no-JavaScript rendering: the same figures as a plain list (DESIGN §5.2 G4). */
.pp-tripcost__static {
	margin: 0 0 var(--pp-space-3);
	padding: 0;
	list-style: none;
	font-variant-numeric: tabular-nums;
}

.pp-tripcost__row {
	margin: 0;
	padding-block: var(--pp-space-1);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}

.pp-tripcost__rowname {
	font-weight: 600;
}

.pp-tripcost__note {
	max-width: 62ch;
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}

/* On paper the estimate is frozen at whatever it last showed, so print the list instead. */
@media print {
	.pp-tripcost__app {
		display: none;
	}

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