/* packedplans/itinerary-builder — docs/ITINERARY.md §3, §4, §9.3. The server's no-script line
   and guide links, then the planner view.js draws in their place. One column on a phone, the
   plan plus a cost column from 64rem (§4.7). The cost card is all that column holds, and it pins
   beside the days. Add and Share are dialogs over a scrim at every width, a sheet from the bottom
   on a phone and a modal in the middle of a wide screen, so opening one never moves the page.
   Tokens only, never defined here. */

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

/* `display` beats the `hidden` attribute, so everything the script hides opts back out of it. */
.pp-plan [hidden],
.pp-plan__fallback[hidden] {
	display: none !important;
}

/* The theme caps lists and paragraphs at the reading measure. The planner's lists are rows and
   racks of controls, not prose, so they take the column. */
.pp-plan__rows,
.pp-plan__options,
.pp-plan__hotellist,
.pp-plan__chips,
.pp-plan__guides {
	max-inline-size: none;
}

/* ------------------------------------------------------------------ no script */

.pp-plan__lede,
.pp-plan__note {
	margin: 0 0 var(--pp-space-4);
	max-width: var(--pp-maxw-prose);
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
}

.pp-plan__guides,
.pp-plan__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-2);
	margin: 0 0 var(--pp-space-4);
	padding: 0;
	list-style: none;
}

.pp-plan__guide a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--pp-space-2) var(--pp-space-4);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-pill);
	color: var(--pp-text);
	font-size: var(--pp-fs-sm);
	text-decoration: none;
}

/* ------------------------------------------------------------------ controls */

.pp-plan__pill,
.pp-plan__chip,
.pp-plan__step,
.pp-plan__tab,
.pp-plan__add-open,
.pp-plan__iconbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pp-space-1);
	box-sizing: border-box;
	min-height: 44px;
	min-width: 44px;
	padding: var(--pp-space-2) 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);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--pp-dur-fast) var(--pp-ease), background-color var(--pp-dur-fast) var(--pp-ease);
}

.pp-plan__chip {
	font-weight: 400;
}

.pp-plan__pill--solid,
.pp-plan__chip[aria-pressed="true"],
.pp-plan__tab[aria-selected="true"] {
	border-color: var(--pp-accent);
	background: var(--pp-accent);
	color: var(--pp-accent-text);
}

.pp-plan__pill--danger {
	color: var(--pp-warn);
}

.pp-plan__pill:disabled,
.pp-plan__chip:disabled,
.pp-plan__step:disabled,
.pp-plan__iconbutton:disabled {
	opacity: .45;
	cursor: default;
}

.pp-plan__pill.is-added:disabled {
	opacity: 1;
	border-color: var(--pp-success);
	color: var(--pp-success);
}

.pp-plan__textbutton {
	min-height: 44px;
	padding: var(--pp-space-2) 0;
	border: 0;
	background: transparent;
	color: var(--pp-accent);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.pp-plan button:focus-visible,
.pp-plan a:focus-visible,
.pp-plan input:focus-visible,
.pp-plan__row--marker:focus-visible,
.pp-plan [tabindex="-1"]:focus-visible {
	outline: 2px solid var(--pp-focus);
	outline-offset: 2px;
	box-shadow: var(--pp-shadow-focus);
}

@media (hover: hover) {
	.pp-plan__pill:hover:not(:disabled),
	.pp-plan__chip:hover:not(:disabled),
	.pp-plan__step:hover:not(:disabled),
	.pp-plan__tab:hover,
	.pp-plan__add-open:hover,
	.pp-plan__iconbutton:hover:not(:disabled),
	.pp-plan__guide a:hover {
		border-color: var(--pp-accent);
	}

	.pp-plan__handle:hover {
		color: var(--pp-text);
	}
}

.pp-plan__menuline,
.pp-plan__choices {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-2);
}

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

.pp-plan__meta .pp-cta--link {
	min-height: 0;
	padding: 0;
	font-size: var(--pp-fs-xs);
}

/* ------------------------------------------------------------------ notes, banner, picker */

.pp-plan__notes {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-3);
	margin-bottom: var(--pp-space-5);
}

.pp-plan__ask,
.pp-plan__banner {
	padding: var(--pp-space-4);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-md);
	background: var(--pp-accent-weak);
}

.pp-plan__asktext,
.pp-plan__bannertext {
	margin: 0 0 var(--pp-space-3);
	font-weight: 600;
	line-height: var(--pp-lh-body);
}

.pp-plan__banner .pp-plan__bannertext:last-child {
	margin-bottom: 0;
}

.pp-plan__note {
	margin: 0;
	color: var(--pp-text-muted);
}

.pp-plan__pickertitle,
.pp-plan__title {
	margin: 0 0 var(--pp-space-3);
	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;
}

/* ------------------------------------------------------------------ title row */

.pp-plan__head {
	margin-bottom: var(--pp-space-4);
}

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

.pp-plan__stepper {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-space-2);
}

.pp-plan__step {
	padding: 0;
	font-size: var(--pp-fs-body);
}

.pp-plan__stepvalue {
	min-width: 3.5em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

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

.pp-plan__datelabel,
.pp-plan__fieldlabel,
.pp-plan__menulabel {
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pp-plan__dateinput,
.pp-plan__copyinput {
	box-sizing: border-box;
	min-height: 44px;
	max-width: 100%;
	padding: var(--pp-space-2) var(--pp-space-3);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-surface);
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
}

.pp-plan__datestext,
.pp-plan__staydates {
	margin: 0;
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}

/* ------------------------------------------------------------------ stay */

.pp-plan__staycard {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-3) var(--pp-space-4);
	padding: var(--pp-space-4);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
}

.pp-plan__staythumb {
	flex: 0 0 auto;
	width: 96px;
	height: 72px;
	border-radius: var(--pp-radius-sm);
	object-fit: cover;
	filter: var(--pp-photo-filter, none);
}

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

.pp-plan__stayname {
	margin: 0;
	font-weight: 600;
	line-height: var(--pp-lh-tight);
}

.pp-plan__stayactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-2) var(--pp-space-3);
	flex: 1 1 100%;
}

.pp-plan__stayactions .pp-cta--solid {
	width: auto;
	flex: 0 1 16rem;
}

.pp-plan__hotels {
	margin-top: var(--pp-space-3);
	padding: var(--pp-space-4);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
}

.pp-plan__staysteppers {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-3);
	margin-bottom: var(--pp-space-4);
}

.pp-plan__stayfield {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-2);
}

.pp-plan__hotellist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-plan__hotel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 var(--pp-space-3);
	border-top: 1px solid var(--pp-border);
}

.pp-plan__hotellabel {
	display: flex;
	align-items: center;
	gap: var(--pp-space-3);
	flex: 1 1 14rem;
	min-height: 48px;
	padding-block: var(--pp-space-2);
	cursor: pointer;
}

.pp-plan__radio {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--pp-accent);
}

.pp-plan__hoteltext {
	display: flex;
	flex-direction: column;
}

.pp-plan__hotelname {
	font-weight: 600;
	line-height: var(--pp-lh-tight);
}

/* ------------------------------------------------------------------ sheets */

.pp-plan__sheethead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-3);
	margin-bottom: var(--pp-space-3);
}

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

/* Add and Share open only when asked for (§4.2, §4.5): a sheet over the bottom of a phone's
   screen, a modal on a wide one (below). The scrim behind them closes them on a click. */
.pp-plan__scrim {
	display: none;
}

.pp-plan__scrim.is-open {
	position: fixed;
	inset: 0;
	z-index: 59;
	display: block;
	background: rgb(26 23 20 / .45);
}

.pp-plan__sheet {
	display: none;
}

.pp-plan__sheet.is-open {
	position: fixed;
	inset: auto 0 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-3);
	box-sizing: border-box;
	max-height: 80vh;
	overflow-y: auto;
	padding: var(--pp-space-4) var(--pp-gutter, var(--pp-space-4)) var(--pp-space-6);
	border-top: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-lg) var(--pp-radius-lg) 0 0;
	background: var(--pp-bg);
	box-shadow: var(--pp-shadow-2);
	overscroll-behavior: contain;
}

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

.pp-plan__options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-plan__option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-1) var(--pp-space-3);
	padding-block: var(--pp-space-2);
	border-top: 1px solid var(--pp-border);
}

.pp-plan__optiontext {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
}

.pp-plan__optionname {
	font-weight: 600;
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-tight);
}

.pp-plan__sharepreview {
	padding: var(--pp-space-3);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-surface-2);
}

.pp-plan__shareline {
	margin: 0;
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}

.pp-plan__shareline:first-child {
	font-weight: 600;
}

.pp-plan__sharestatus {
	margin: 0;
	min-height: 1.5em;
	color: var(--pp-success);
	font-size: var(--pp-fs-sm);
}

/* ------------------------------------------------------------------ cost and budget */

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

.pp-plan__costtotal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--pp-space-3);
}

.pp-plan__costtotal .pp-plan__fieldlabel {
	flex: 1 1 100%;
}

.pp-plan__costamount {
	margin: 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-tight);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-plan__costlines {
	margin: 0;
	padding: 0;
}

.pp-plan__costline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pp-space-3);
	padding-block: var(--pp-space-2);
	border-top: 1px solid var(--pp-border);
}

.pp-plan__costname {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

.pp-plan__costlabel {
	font-size: var(--pp-fs-sm);
	font-weight: 600;
	line-height: var(--pp-lh-tight);
}

.pp-plan__costvalue {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--pp-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-plan__costline.is-estimate .pp-plan__costvalue::before {
	content: "~";
	color: var(--pp-text-muted);
}

.pp-plan__budget {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
	padding-top: var(--pp-space-3);
	border-top: 1px solid var(--pp-border);
}

.pp-plan__budget .pp-plan__budgetset {
	align-self: flex-start;
}

.pp-plan__budgetfield {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-2);
}

.pp-plan__budgetinput {
	box-sizing: border-box;
	width: 7.5em;
	min-height: 44px;
	padding: var(--pp-space-2);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-bg);
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-body);
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-plan__meter {
	display: flex;
	overflow: hidden;
	height: 8px;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-surface-2);
}

.pp-plan__meterfill {
	display: block;
	height: 100%;
	background: var(--pp-success);
}

.pp-plan__meter--near .pp-plan__meterfill {
	background: var(--pp-warn);
}

/* Over budget: the budget's share goes quiet, only the overshoot takes the warning tone. */
.pp-plan__meter--over .pp-plan__meterfill {
	background: var(--pp-text-muted);
}

.pp-plan__meterover {
	display: block;
	height: 100%;
	background: var(--pp-warn);
	opacity: .75;
}

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

.pp-plan__budgettext--over {
	color: var(--pp-warn);
}

.pp-plan__budget .pp-plan__budgetclear {
	align-self: flex-start;
}

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

.pp-plan__daycost {
	flex: 0 0 auto;
	/* The day heading leaves the rest of the row empty, so the figure takes the right edge. */
	margin-inline-start: auto;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-xs);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------ the rows */

.pp-plan__listtools {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--pp-space-3);
}

.pp-plan__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-plan__row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-1) var(--pp-space-2);
	padding-block: var(--pp-space-2);
	background: var(--pp-bg);
}

.pp-plan__row--day {
	margin-top: var(--pp-space-4);
	padding-top: var(--pp-space-3);
	border-top: 2px solid var(--pp-text);
}

.pp-plan__row--ideas {
	border-bottom: 1px solid var(--pp-border);
}

.pp-plan__row--item,
.pp-plan__row--marker {
	flex-wrap: nowrap;
	align-items: flex-start;
	border-top: 1px solid var(--pp-border);
}

.pp-plan__row--empty {
	justify-content: center;
	min-height: 48px;
	border: 1px dashed var(--pp-border-strong);
	border-radius: var(--pp-radius-sm);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
}

.pp-plan__dayname {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--pp-fs-sm);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: var(--pp-lh-ui);
}

.pp-plan__dayactions {
	display: flex;
	align-items: center;
	gap: var(--pp-space-1);
}

.pp-plan__iconbutton {
	padding: 0;
	font-weight: 400;
}

.pp-plan__add-open {
	border-color: transparent;
	background: transparent;
	color: var(--pp-accent);
}

.pp-plan__ideastoggle {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.pp-plan__ideastoggle::before {
	content: "▸ ";
}

.pp-plan__ideastoggle[aria-expanded="true"]::before {
	content: "▾ ";
}

.pp-plan__nohotel {
	flex: 1 1 100%;
	margin: 0;
	padding-top: var(--pp-space-1);
	border-top: 1px solid var(--pp-warn);
	color: var(--pp-warn);
	font-size: var(--pp-fs-xs);
}

/* The handle is the only thing that grabs a touch, so the page scrolls everywhere else. */
.pp-plan__handle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-block: -2px;
	padding: 0;
	border: 0;
	border-radius: var(--pp-radius-sm);
	background: transparent;
	color: var(--pp-text-muted);
	cursor: grab;
	touch-action: none;
}

.pp-plan__grip {
	width: 12px;
	height: 18px;
	background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
	background-size: 6px 6px;
}

.pp-plan__handle[aria-pressed="true"] {
	background: var(--pp-accent);
	color: var(--pp-accent-text);
}

.pp-plan__kind {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: 17px;
	border-radius: 50%;
	background: var(--pp-border-strong);
}

.pp-plan__kind--activity,
.pp-plan__kind--step {
	background: var(--pp-accent);
}

.pp-plan__kind--gem,
.pp-plan__kind--free {
	background: var(--pp-success);
}

.pp-plan__kind--eat,
.pp-plan__kind--market {
	background: var(--pp-warn);
}

.pp-plan__kind--stay {
	border-radius: 2px;
	background: var(--pp-text);
}

.pp-plan__itembody {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-plan__itemtitle {
	display: block;
	min-height: 44px;
	padding: var(--pp-space-2) 0 0;
	border: 0;
	background: transparent;
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-body);
	font-weight: 600;
	line-height: var(--pp-lh-tight);
	text-align: left;
	cursor: pointer;
}

.pp-plan__markertext {
	flex: 1 1 auto;
	padding-top: var(--pp-space-2);
	font-size: var(--pp-fs-sm);
	font-weight: 600;
}

.pp-plan__detail {
	margin-top: var(--pp-space-2);
}

.pp-plan__why {
	margin: 0 0 var(--pp-space-3);
	max-width: var(--pp-maxw-prose);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}

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

/* A small menu next to the button that opened it: a row's options, the stay's dates and nights.
   It sits over the list and never scrolls on its own, so the page keeps its one scroll bar. */
.pp-plan__popanchor {
	position: relative;
	display: inline-flex;
	margin-inline-start: auto;
}

.pp-plan__more {
	padding: 0;
	border-color: transparent;
	background: transparent;
	font-size: var(--pp-fs-lg, 1.25rem);
	line-height: 1;
}

.pp-plan__more:hover,
.pp-plan__more[aria-expanded="true"] {
	border-color: var(--pp-border-strong);
	background: var(--pp-surface);
}

.pp-plan__pop {
	position: absolute;
	top: calc(100% + var(--pp-space-1));
	right: 0;
	z-index: 55;
	box-sizing: border-box;
	width: max-content;
	max-width: min(22rem, calc(100vw - 2 * var(--pp-space-4)));
	padding: var(--pp-space-3);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
	box-shadow: var(--pp-shadow-2);
	text-align: start;
}

.pp-plan__pop.is-up {
	top: auto;
	bottom: calc(100% + var(--pp-space-1));
}

/* In the title row the city menu opens under its button, left aligned. */
.pp-plan__headcontrols .pp-plan__popanchor {
	margin-inline-start: 0;
}

.pp-plan__headcontrols .pp-plan__pop {
	right: auto;
	left: 0;
	width: min(24rem, calc(100vw - 2 * var(--pp-space-4)));
}

.pp-plan__citychips {
	margin: 0;
	padding: 0;
}

.pp-plan__pop .pp-plan__staysteppers {
	min-width: 16rem;
}

.pp-plan__row.is-lifted,
.pp-plan__row.is-dragging {
	z-index: 2;
	box-shadow: var(--pp-shadow-2);
	outline: 2px solid var(--pp-accent);
}

.pp-plan__row.is-dragging {
	opacity: .92;
	cursor: grabbing;
}

.pp-sort-marker {
	position: relative;
	height: 0;
	list-style: none;
}

.pp-sort-marker::before {
	content: "";
	position: absolute;
	inset: -2px 0 auto;
	height: 4px;
	border-radius: 2px;
	background: var(--pp-accent);
}

.pp-plan__rows.is-collapsed .pp-plan__row--day {
	margin-top: 0;
	border-top-width: 1px;
}

/* ------------------------------------------------------------------ your plans, §5.6 */

/* One chip per plan above the title row. The chips wrap onto more lines on a phone, never a
   sideways scroller. */
.pp-plan__plans {
	margin-bottom: var(--pp-space-5);
}

.pp-plan__planstitle {
	margin: 0 0 var(--pp-space-2);
	font-size: var(--pp-fs-h4);
	line-height: var(--pp-lh-tight);
}

.pp-plan__planlist {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--pp-space-2);
	max-inline-size: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-plan__planitem {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
	transition: border-color var(--pp-dur-fast) var(--pp-ease), background-color var(--pp-dur-fast) var(--pp-ease);
}

.pp-plan__planitem.is-current {
	border-color: var(--pp-accent);
	background: var(--pp-accent-weak);
	box-shadow: inset 0 0 0 1px var(--pp-accent);
}

.pp-plan__planitem--new {
	border: 0;
	background: transparent;
}

.pp-plan__newplan {
	height: 100%;
	border-style: dashed;
	border-radius: var(--pp-radius-md);
}

.pp-plan__plan {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	min-height: 44px;
	padding: var(--pp-space-2) var(--pp-space-1) var(--pp-space-2) var(--pp-space-3);
	border: 0;
	border-radius: var(--pp-radius-md) 0 0 var(--pp-radius-md);
	background: transparent;
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	text-align: start;
	cursor: pointer;
}

.pp-plan__planitem.is-current .pp-plan__plan {
	cursor: default;
}

.pp-plan__planname {
	font-size: var(--pp-fs-sm);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
	overflow-wrap: anywhere;
}

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

.pp-plan__planremove {
	flex: none;
	align-self: stretch;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0 var(--pp-radius-md) var(--pp-radius-md) 0;
	background: transparent;
	color: var(--pp-text-muted);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-lg, 1.25rem);
	line-height: 1;
	cursor: pointer;
}

/* Phones and narrow windows: one "Your plans" button with the list in its small menu. */
.pp-plan__plansbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-2);
}

.pp-plan__plansbar .pp-plan__popanchor {
	margin-inline-start: 0;
}

.pp-plan__plansbar .pp-plan__pop {
	right: auto;
	left: 0;
	width: min(22rem, calc(100vw - 2 * var(--pp-space-4)));
}

.pp-plan__planlist.pp-plan__planlist--menu {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 0;
}

.pp-plan__planlist--menu .pp-plan__planitem {
	width: 100%;
}

.pp-plan__visuallyhidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 40rem) {

	.pp-plan__plan {
		flex: 1 1 auto;
		padding-inline-start: var(--pp-space-2);
	}

	.pp-plan__planremove {
		min-width: 36px;
	}

	.pp-plan__planlist .pp-plan__newplan {
		width: 100%;
	}
}

.pp-plan__plansstatus {
	margin: var(--pp-space-2) 0 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
}

.pp-plan__plansstatus:empty {
	display: none;
}

.pp-plan__popnote {
	margin: 0;
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}

@media (hover: hover) {
	.pp-plan__planitem:not(.is-current):not(.pp-plan__planitem--new):hover {
		border-color: var(--pp-accent);
	}

	.pp-plan__planremove:hover {
		color: var(--pp-warn);
	}
}

/* ------------------------------------------------------------------ status bar */

.pp-plan__bar {
	position: sticky;
	bottom: 0;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-2) var(--pp-space-3);
	margin-top: var(--pp-space-5);
	padding: var(--pp-space-2) 0;
	border-top: 1px solid var(--pp-border-strong);
	background: var(--pp-bg);
}

.pp-plan__bartotal {
	margin: 0 0 0 auto;
	font-size: var(--pp-fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-plan__bartotallabel {
	color: var(--pp-text-muted);
	font-weight: 400;
}

.pp-plan__status,
.pp-plan__undobox {
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
}

.pp-plan__undobox .pp-plan__undotext {
	color: var(--pp-text);
}

/* Handles hide on a shared plan that isn't kept yet (§4.6). */
.pp-plan.is-looking .pp-plan__handle {
	display: none;
}

/* ------------------------------------------------------------------ desktop, §4.7 */

@media (min-width: 64rem) {
	.pp-plan__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
		gap: var(--pp-space-6);
		align-items: start;
	}

	/* The column holds the cost card and nothing else (placeCost moves it in). It pins beside the
	   days, stops short of the status bar, and scrolls inside itself only when a budget makes
	   the card taller than that. The few pixels of padding keep focus rings clear of the edge. */
	.pp-plan__side {
		--pp-plan-side-top: calc(var(--pp-header-h, 0px) + var(--pp-space-4));
		position: sticky;
		inset-block-start: var(--pp-plan-side-top);
		display: flex;
		flex-direction: column;
		gap: var(--pp-space-4);
		box-sizing: border-box;
		max-height: calc(100vh - var(--pp-plan-side-top) - var(--pp-plan-bar-h, 4.5rem));
		max-height: calc(100dvh - var(--pp-plan-side-top) - var(--pp-plan-bar-h, 4.5rem));
		margin: -4px;
		padding: 4px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	/* view.js moves the cost panel in here at this width (placeCost). */
	.pp-plan__side .pp-plan__cost {
		flex: none;
		margin-top: 0;
	}


	/* A row leaves its right half empty at this width, so the meta line, which carries the
	   slot, the price and the booking link, moves out of the title's column and on to the
	   right edge where the eye can compare one row against the next. */
	.pp-plan__row--item > .pp-plan__itembody {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
		column-gap: var(--pp-space-4);
		align-items: start;
	}

	.pp-plan__row--item > .pp-plan__itembody > .pp-plan__itemtitle {
		grid-column: 1;
		grid-row: 1;
	}

	.pp-plan__row--item > .pp-plan__itembody > .pp-plan__meta {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		padding-top: var(--pp-space-3);
		text-align: end;
	}

	.pp-plan__row--item > .pp-plan__itembody > .pp-plan__detail {
		grid-column: 1 / -1;
	}

	/* The card has the width for a real photograph and for the two actions to sit apart. */
	.pp-plan__staycard {
		flex-wrap: nowrap;
	}

	.pp-plan__staythumb {
		width: 140px;
		height: 105px;
		border-radius: var(--pp-radius-md);
	}

	.pp-plan__stayactions {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: stretch;
	}

	.pp-plan__stayactions .pp-cta--solid {
		flex: 0 0 auto;
	}

	/* A modal in the middle of the screen, bounded to it, scrolling inside itself. */
	.pp-plan__sheet.is-open {
		inset: 50% auto auto 50%;
		width: min(36rem, calc(100vw - 2 * var(--pp-space-6)));
		max-height: min(85vh, 52rem);
		padding: var(--pp-space-5) var(--pp-space-5) var(--pp-space-6);
		border: 1px solid var(--pp-border-strong);
		border-radius: var(--pp-radius-lg);
		transform: translate(-50%, -50%);
	}

	.pp-plan__barshare {
		display: none;
	}
}

/* The sheet or modal scrolls inside itself (overscroll-behavior: contain above), the page behind
   holds still while it is open. */
html.pp-plan-sheet-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.pp-plan__pill,
	.pp-plan__chip,
	.pp-plan__step,
	.pp-plan__tab,
	.pp-plan__planitem {
		transition: none;
	}
}

/* ------------------------------------------------------------------ print */

@media print {
	.pp-plan__handle,
	.pp-plan__headcontrols,
	.pp-plan__dayactions,
	.pp-plan__listtools,
	.pp-plan__plans,
	.pp-plan__side,
	.pp-plan__cost,
	.pp-plan__daycost,
	.pp-plan__sheet,
	.pp-plan__hotels,
	.pp-plan__bar,
	.pp-plan__notes,
	.pp-plan__menu,
	.pp-plan__popanchor,
	.pp-plan__stayactions,
	.pp-plan__textbutton,
	.pp-plan__row--empty,
	.pp-plan__live {
		display: none !important;
	}

	.pp-plan__layout {
		display: block;
	}

	.pp-plan__row--day {
		break-after: avoid;
	}

	.pp-plan__row--item {
		break-inside: avoid;
	}
}