/* packedplans/day-builder — APP-PLAN §4.4. Two states in one section: the server's list of
   everything the research holds, and the builder view.js puts in its place once the city JSON
   has loaded. Both read as the same section, so the swap is not a jolt. */

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

/* The accent rule sits above the words, like every other section heading (SPEC §9.4.4). */
.pp-days__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-days__lead {
	margin: 0 0 var(--pp-space-5);
	max-width: var(--pp-maxw-prose);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
}

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

/* ------------------------------------------------------------------ the no-script list */

.pp-days__group + .pp-days__group {
	margin-top: var(--pp-space-5);
}

.pp-days__grouptitle {
	margin: 0 0 var(--pp-space-2);
	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);
}

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

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

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

.pp-days__rowmeta {
	color: var(--pp-text-muted);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------ trip length */

/*
 * The duration picker's segmented control, same geometry and same reasons: no overflow clipping
 * on the group, the end segments carry the pill radius, the focus ring rides above its
 * neighbour's fill (DESIGN §6.4, §5.3).
 */
.pp-days__tabs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--pp-space-5);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-pill);
}

.pp-days__tab {
	flex: 1 1 88px;
	min-height: 56px;
	padding: var(--pp-space-2) var(--pp-space-3);
	border: 0;
	border-right: 1px solid var(--pp-border-strong);
	background: transparent;
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	font-weight: 400;
	line-height: var(--pp-lh-ui);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	cursor: pointer;
	transition: background-color var(--pp-dur-fast) var(--pp-ease);
}

.pp-days__tab:last-child {
	border-right: 0;
}

.pp-days__tab:first-child {
	border-start-start-radius: var(--pp-radius-pill);
	border-end-start-radius: var(--pp-radius-pill);
}

.pp-days__tab:last-child {
	border-start-end-radius: var(--pp-radius-pill);
	border-end-end-radius: var(--pp-radius-pill);
}

.pp-days__tab[aria-selected="true"] {
	background: var(--pp-accent);
	color: var(--pp-accent-text);
	font-weight: 600;
}

.pp-days__tab:focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--pp-focus);
	outline-offset: 2px;
	box-shadow: var(--pp-shadow-focus);
}

/* One trip length is a label, not a control (DESIGN §5.2). */
.pp-days__static {
	margin: 0 0 var(--pp-space-4);
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h4);
	font-weight: var(--pp-fw-display, 400);
}

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

.pp-days__panel:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--pp-shadow-focus);
	border-radius: var(--pp-radius-md);
}

/* ------------------------------------------------------------------ the days */

.pp-days__days {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--pp-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-days__day {
	display: flex;
	flex-direction: column;
	gap: 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-days__dayname {
	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);
}

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

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

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

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

.pp-days__cardmeta,
.pp-days__steptime {
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-xs);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-days__steptime {
	letter-spacing: .08em;
}

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

.pp-days__cardcta {
	margin: var(--pp-space-1) 0 0;
}

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

/* ------------------------------------------------------------------ swapping */

.pp-days__swapper {
	margin-top: var(--pp-space-1);
}

/* The summary is the button: 48px tall, pill, and no disclosure triangle. */
.pp-days__swap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	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-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
	list-style: none;
	cursor: pointer;
}

.pp-days__swap::-webkit-details-marker {
	display: none;
}

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

@media (hover: hover) {
	.pp-days__swap:hover,
	.pp-days__option:hover,
	.pp-days__save:hover {
		border-color: var(--pp-accent);
	}
}

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

.pp-days__optionlist {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
	margin: 0;
	padding: 0;
	max-height: 22rem;
	overflow-y: auto;
	list-style: none;
}

.pp-days__option {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-1);
	inline-size: 100%;
	min-height: 48px;
	padding: var(--pp-space-2) var(--pp-space-3);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface-2);
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
	text-align: left;
	cursor: pointer;
}

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

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

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

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

/* ------------------------------------------------------------------ saving */

.pp-days__actions {
	margin: var(--pp-space-5) 0 0;
}

.pp-days__save {
	min-height: 48px;
	padding: var(--pp-space-2) 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);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
	cursor: pointer;
}

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

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

/* On paper the controls do nothing, so print the plan and drop them. */
@media print {
	.pp-days__tabs,
	.pp-days__swapper,
	.pp-days__actions,
	.pp-days__note,
	.pp-days__live {
		display: none !important;
	}

	.pp-days__days {
		display: block;
	}

	.pp-days__day {
		break-inside: avoid;
		margin-bottom: var(--pp-space-4);
	}
}

/* The hand-off to the planner (docs/ITINERARY.md §4.8): a plain link beside the save button. */
.pp-days__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-3) var(--pp-space-5);
}

.pp-days__handoff {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-space-2);
	min-height: 48px;
	color: var(--pp-accent);
	font-size: var(--pp-fs-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

@media print {
	.pp-days__handoff {
		display: none !important;
	}
}