/* packedplans/duration-picker — DESIGN §6.4. */

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

.pp-duration__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 tablist only exists once view.js has booted. Without JavaScript every panel is open under
 * its own <h3>, and no control is on screen that would do nothing (DESIGN §5.2 G4).
 */
.pp-duration__tabs {
	display: none;
}

/*
 * No overflow:hidden on the group. The tabs fill it edge to edge, so clipping here would eat
 * the :focus-visible ring on every outer edge and leave slivers between segments — and this is
 * the only interactive control the blocks ship (DESIGN §5.3, polish #8). The end segments carry
 * the pill radius themselves instead, so the group still reads as one pill.
 */
.pp-duration[data-enhanced] .pp-duration__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-duration__tab {
	flex: 1 1 104px;
	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);
	cursor: pointer;
	transition: background-color var(--pp-dur-fast) var(--pp-ease);
}

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

/* Inner segments square, the ends pilled — the clipping the group used to do (DESIGN §6.4). */
.pp-duration__tab:first-child {
	border-start-start-radius: var(--pp-radius-pill);
	border-end-start-radius: var(--pp-radius-pill);
}

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

/* Selection changes three things: background, weight and border (DESIGN §9.9). */
.pp-duration__tab[aria-selected="true"] {
	background: var(--pp-accent);
	color: var(--pp-accent-text);
	font-weight: 600;
}

/*
 * A real outline as well as the shadow, and lifted into the positioned layer so the ring paints
 * over the neighbouring segment's fill instead of under it. The ring follows the segment's own
 * radius: pill on the ends, square in the middle.
 */
.pp-duration__tab:focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--pp-focus);
	outline-offset: 2px;
	box-shadow: var(--pp-shadow-focus);
}

.pp-duration__days {
	display: block;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-duration__hint {
	display: block;
	font-size: var(--pp-fs-xs);
	opacity: .85;
}

.pp-duration__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-duration__panel[hidden] {
	display: none !important;
}

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

.pp-duration__heading {
	margin: 0 0 var(--pp-space-3);
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h3);
	font-weight: var(--pp-fw-display, 400);
}

/* Enhanced, the panel heading is the tab label, so it stops earning its place on screen. */
.pp-duration[data-enhanced] .pp-duration__heading {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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

.pp-duration__outline li + li {
	margin-top: var(--pp-space-2);
}

@media (prefers-reduced-motion: no-preference) {
	.pp-duration__panel.pp-is-in {
		animation: pp-duration-in var(--pp-dur) var(--pp-ease) both;
	}
}

@keyframes pp-duration-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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

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

	.pp-duration[data-enhanced] .pp-duration__heading {
		position: static !important;
		width: auto;
		height: auto;
		clip-path: none;
	}
}