/* packedplans/cost-by-month — DESIGN §6.3 (G1 + G3). The bar is the cell background. */

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

.pp-costs__title {
	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;
}

/* The when-to-go prose above the table: body text at the reading measure, not table text. */
.pp-costs__intro {
	max-inline-size: var(--pp-measure);
	margin: 0 0 var(--pp-space-4);
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
}

.pp-costs__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pp-fs-sm);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-costs__caption {
	caption-side: top;
	margin-bottom: var(--pp-space-4);
	max-width: var(--pp-measure);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
	text-align: left;
}

.pp-costs__table th,
.pp-costs__table td {
	padding: var(--pp-space-3);
	text-align: left;
	vertical-align: baseline;
}

/*
 * G1: the pinned header row. It pins *below* the sticky site header — top: 0 would park it
 * behind that header's opaque surface and the reader would never see it — and stays under the
 * header's z-index 50 so the two cannot fight over the same strip of screen.
 */
.pp-costs__table thead th {
	position: sticky;
	/* The header, plus the section-nav strip when that is pinned under it too (DESIGN §6.15);
	   --pp-secnav-h is 0 at lg and on a page with no nav. */
	top: calc(var(--pp-header-h, 0px) + var(--pp-secnav-h, 0px));
	z-index: 1;
	background: var(--pp-bg);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* An inset shadow, not a border, so the pinned edge cannot double up (G1). */
	box-shadow: var(--pp-shadow-inset);
}

.pp-costs__month {
	width: 4.5rem;
	padding-left: var(--pp-space-4);
	font-weight: 400;
}

.pp-costs__mark {
	margin-right: var(--pp-space-1);
	color: var(--pp-accent);
}

.pp-costs__price {
	position: relative;
	isolation: isolate;
}

/* The bar: absolutely positioned inside the price cell, sized from --pp-bar-pct. */
.pp-costs__bar {
	position: absolute;
	inset-block: 2px;
	inset-inline-start: 0;
	z-index: -1;
	inline-size: calc(var(--pp-bar-pct, 0) * 1%);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-bar);
}

.pp-costs__row--best .pp-costs__bar {
	background: var(--pp-bar-best);
}

.pp-costs__row--peak .pp-costs__bar {
	background: var(--pp-bar-peak);
}

.pp-costs__amount {
	display: inline-block;
	min-width: 4.5rem;
}

.pp-costs__delta {
	white-space: nowrap;
}

.pp-costs__delta--down {
	color: var(--pp-success);
}

.pp-costs__delta--up {
	color: var(--pp-warn);
}

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

/* A state fill always beats the zebra. */
.pp-costs__row--zebra > * {
	background: var(--pp-surface-2);
}

.pp-costs__row--best > * {
	background: var(--pp-success-weak);
}

.pp-costs__row--peak > * {
	background: var(--pp-warn-weak);
}

.pp-costs__row--best .pp-costs__month {
	box-shadow: inset 3px 0 0 var(--pp-accent);
}

.pp-costs__noterow td {
	padding-top: 0;
	padding-left: var(--pp-space-4);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-xs);
	line-height: var(--pp-lh-ui);
}

.pp-costs__noterow--best td {
	background: var(--pp-success-weak);
	color: var(--pp-text);
}

.pp-costs__noterow--peak td {
	background: var(--pp-warn-weak);
	color: var(--pp-text);
}

.pp-costs__legend {
	margin: var(--pp-space-3) 0 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-xs);
}

/* ------------------------------------------------- the tool (APP-PLAN §4.3, view.js only)
 *
 * Every element below is built by view.js after the city JSON has loaded, so none of it exists
 * on a page without the app's data or without JavaScript. The table above is untouched either
 * way: the tool sits over it, marks the months a budget reaches, and answers a picked month
 * underneath.
 */

.pp-costs__tool {
	max-inline-size: var(--pp-measure);
	margin-block-end: var(--pp-space-5);
	padding: var(--pp-space-4);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
}

.pp-costs__budgetlabel {
	display: block;
	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-costs__field {
	display: flex;
	align-items: center;
	gap: var(--pp-space-4);
	margin-block-start: var(--pp-space-2);
}

.pp-costs__slider {
	flex: 1 1 auto;
	min-inline-size: 0;
	/* DESIGN §5.3: the thumb is the touch target, so the track gets the full height. */
	block-size: 48px;
	accent-color: var(--pp-accent);
}

.pp-costs__budget {
	flex: 0 0 auto;
	min-inline-size: 4.5rem;
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h3);
	font-variant-numeric: tabular-nums;
	line-height: var(--pp-lh-heading);
	text-align: end;
}

.pp-costs__lit {
	margin: var(--pp-space-2) 0 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
}

/* Out of budget. Muted ink rather than opacity, so the number keeps its contrast. */
.pp-costs__row--dim > * {
	color: var(--pp-text-muted);
}

.pp-costs__row--dim .pp-costs__delta,
.pp-costs__row--dim .pp-costs__mark {
	color: var(--pp-text-muted);
}

.pp-costs__row--dim .pp-costs__bar {
	opacity: .35;
}

/* The month name is the control once the tool is up, so the cell gives it the whole box. */
.pp-costs[data-enhanced] .pp-costs__month {
	padding: 0;
}

.pp-costs__pick {
	display: flex;
	align-items: center;
	inline-size: 100%;
	min-block-size: 48px;
	padding-inline: var(--pp-space-4) var(--pp-space-2);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

@media (hover: hover) {
	.pp-costs__pick:hover {
		text-decoration: underline;
	}
}

/* DESIGN §9.9: the picked month changes fill, weight and edge, so it reads in greyscale. */
.pp-costs__row--picked > * {
	background: var(--pp-accent-weak);
}

.pp-costs__pick[aria-pressed="true"] {
	box-shadow: inset 3px 0 0 var(--pp-accent);
	font-weight: 600;
}

.pp-costs__panel {
	max-inline-size: var(--pp-measure);
	margin-block-start: var(--pp-space-5);
	padding: var(--pp-space-4);
	border-inline-start: 3px solid var(--pp-accent);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface-2);
}

.pp-costs__picked {
	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-costs__verdict {
	margin: var(--pp-space-2) 0 0;
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
}

.pp-costs__save {
	min-block-size: 48px;
	margin-block-start: var(--pp-space-4);
	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-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
	cursor: pointer;
}

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

.pp-costs__picks {
	display: grid;
	gap: var(--pp-space-3);
	max-inline-size: none;
	margin: var(--pp-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.pp-costs__hotel {
	margin: 0;
	padding-block-end: var(--pp-space-3);
	border-block-end: 1px solid var(--pp-border);
}

.pp-costs__hotel:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

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

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

.pp-costs__dot {
	padding-inline: var(--pp-space-1);
}

.pp-costs__hotel .pp-cta {
	margin-block-start: var(--pp-space-1);
}

.pp-costs__more {
	margin: var(--pp-space-3) 0 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-xs);
	line-height: var(--pp-lh-ui);
}

/* The rows view.js clones from, and the price strings it reads. Never on screen. */
.pp-costs__data[hidden] {
	display: none;
}

/*
 * Below 30em the flights column is taken out of the layout without being taken out of the
 * accessibility tree: the same clip technique as .pp-u-visually-hidden, so the value stays in
 * the DOM for screen readers and for print.
 */
@media (max-width: 29.99em) {
	.pp-costs__flights {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media print {
	.pp-costs__flights {
		position: static !important;
		width: auto;
		height: auto;
		clip-path: none;
	}

	.pp-costs__bar {
		display: none;
	}

	.pp-costs__table thead th {
		position: static;
		top: auto;
	}

	.pp-costs__price {
		border-bottom: 1px solid #000;
	}

	/* A slider and a saved month mean nothing on paper; the twelve rows print as they read. */
	.pp-costs__tool,
	.pp-costs__panel {
		display: none;
	}

	.pp-costs__row--dim > * {
		color: inherit;
	}

	.pp-costs__row--picked > * {
		background: none;
	}
}