/*
 * Celebration Planner
 *
 * Colours come from the theme's own custom properties, the same ones Holiday
 * Hub reads, so a change in the Customizer carries through here without this
 * file knowing what the palette is. Only the mixes are ours.
 *
 * The panel has no state of its own in JavaScript: a chip is a checkbox, the
 * "near me" fields are revealed by :has() on that checkbox, and the slider fill
 * is a custom property the input updates. Script is for talking to the server
 * and for drawing what comes back — nothing else.
 */

.cp {
	--cp-accent: var(--accent-color, #ff7618);
	--cp-ink: var(--headings-color, #23262c);
	--cp-text: var(--body-color, #4b505a);
	--cp-surface: var(--card-bg, #fff);

	--cp-muted: color-mix(in srgb, var(--cp-text) 74%, transparent);
	--cp-faint: color-mix(in srgb, var(--cp-text) 55%, transparent);
	--cp-line: color-mix(in srgb, var(--cp-ink) 13%, transparent);
	--cp-hair: color-mix(in srgb, var(--cp-ink) 8%, transparent);
	--cp-wash: color-mix(in srgb, var(--cp-ink) 4%, transparent);
	--cp-tint: color-mix(in srgb, var(--cp-accent) 9%, transparent);
	--cp-tint-strong: color-mix(in srgb, var(--cp-accent) 16%, transparent);

	--cp-radius: 18px;
	--cp-radius-sm: 12px;
	--cp-box: 19px;
	--cp-fold: 300px;

	margin: 34px 0;
	clear: both;
}

.cp *,
.cp *::before,
.cp *::after {
	box-sizing: border-box;
}

.cp__inner {
	position: relative;
	padding: 28px 28px 26px;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	background:
		linear-gradient(180deg, var(--cp-tint) 0, transparent 190px),
		var(--cp-surface);
	overflow: hidden;
}

/* A hairline of accent along the top edge, in place of a heavier header. */
.cp__inner::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--cp-accent), color-mix(in srgb, var(--cp-accent) 35%, transparent));
}

/* ---------------------------------------------------------------- heading */

.cp__head {
	margin-bottom: 22px;
}

.cp__eyebrow {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--cp-accent);
}

.cp__title {
	margin: 0 0 8px;
	font-size: clamp(20px, 2.4vw, 25px);
	line-height: 1.25;
	color: var(--cp-ink);
}

.cp__lede {
	margin: 0;
	/*
	 * 68ch, not the 60 a measure usually wants: the sentence is 87 characters
	 * and needs about 64 of them on one line, so 60 broke it in two with room
	 * to spare on the right. A cap that wraps a single short line is doing the
	 * opposite of what a measure is for.
	 */
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--cp-muted);
}

/* ----------------------------------------------------------------- groups */

.cp-group {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.cp-group__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 0;
	margin-bottom: 10px;
}

.cp-group__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-ink);
}

.cp-group__hint {
	font-size: 12.5px;
	color: var(--cp-faint);
}

.cp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

/* ------------------------------------------------------------------ chips */

.cp-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 10px 16px 10px 13px;
	border: 1px solid var(--cp-line);
	border-radius: 999px;
	background: var(--cp-surface);
	color: var(--cp-text);
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.cp-chip:hover {
	border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--cp-line));
	background: var(--cp-wash);
}

.cp-chip:has(.cp-chip__input:checked) {
	border-color: color-mix(in srgb, var(--cp-accent) 60%, transparent);
	background: var(--cp-tint);
	color: var(--cp-ink);
	font-weight: 600;
}

.cp-chip:has(.cp-chip__input:focus-visible) {
	outline: 2px solid var(--cp-accent);
	outline-offset: 2px;
}

/* Kept in the layout and reachable, just not drawn: the box next to it is. */
.cp-chip__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.cp-chip__box {
	flex: none;
	position: relative;
	width: var(--cp-box);
	height: var(--cp-box);
	border: 1.5px solid color-mix(in srgb, var(--cp-ink) 28%, transparent);
	border-radius: 6px;
	background: transparent;
	transition: border-color .15s ease, background-color .15s ease;
}

.cp-chip__box::after {
	content: "";
	position: absolute;
	top: calc(var(--cp-box) * .105);
	left: calc(var(--cp-box) * .32);
	width: calc(var(--cp-box) * .26);
	height: calc(var(--cp-box) * .53);
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.4);
	opacity: 0;
	transition: opacity .12s ease, transform .12s ease;
}

.cp-chip__input:checked + .cp-chip__box {
	border-color: var(--cp-accent);
	background: var(--cp-accent);
}

.cp-chip__input:checked + .cp-chip__box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.cp-chip__icon {
	display: inline-flex;
	flex: none;
	font-size: 16px;
	line-height: 1;
	color: var(--cp-faint);
}

.cp-chip__svg {
	display: block;
}

.cp-chip:has(.cp-chip__input:checked) .cp-chip__icon {
	color: var(--cp-accent);
}

.cp-chip__text {
	display: block;
}

.cp-chip--wide {
	width: 100%;
	align-items: flex-start;
	padding: 14px 18px 14px 15px;
	border-radius: var(--cp-radius-sm);
}

.cp-chip__sub {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--cp-faint);
}

/* ----------------------------------------------------------------- scales */

.cp-scales {
	display: grid;
	/*
	 * 360px is the width at which five tick labels fit on one line. Below it the
	 * two sliders stack rather than squeezing, because a wrapped tick row reads
	 * as noise under a control whose whole job is to be scannable at a glance.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: 24px 32px;
	margin: 24px 0 22px;
	padding: 20px 22px 16px;
	border: 1px solid var(--cp-hair);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-wash);
}

.cp-scale__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 12px;
	margin-bottom: 10px;
}

.cp-scale__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-ink);
}

.cp-scale__value {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--cp-accent);
}

.cp-scale__input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 22px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/*
 * The filled part of the track is painted with a gradient whose stop sits at
 * --cp-pos, which the script updates on input. Two vendor blocks because a
 * combined selector is dropped whole by both engines.
 */
.cp-scale__input::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background:
		linear-gradient(90deg, var(--cp-accent) 0 calc(var(--cp-pos, .5) * 100%),
			color-mix(in srgb, var(--cp-ink) 12%, transparent) calc(var(--cp-pos, .5) * 100%) 100%);
}

.cp-scale__input::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background:
		linear-gradient(90deg, var(--cp-accent) 0 calc(var(--cp-pos, .5) * 100%),
			color-mix(in srgb, var(--cp-ink) 12%, transparent) calc(var(--cp-pos, .5) * 100%) 100%);
}

.cp-scale__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -7px;
	border: 3px solid var(--cp-surface);
	border-radius: 50%;
	background: var(--cp-accent);
	box-shadow: 0 1px 4px color-mix(in srgb, var(--cp-ink) 35%, transparent);
}

.cp-scale__input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 3px solid var(--cp-surface);
	border-radius: 50%;
	background: var(--cp-accent);
	box-shadow: 0 1px 4px color-mix(in srgb, var(--cp-ink) 35%, transparent);
}

.cp-scale__input:focus-visible {
	outline: 2px solid var(--cp-accent);
	outline-offset: 4px;
	border-radius: 999px;
}

.cp-scale__ticks {
	display: flex;
	justify-content: space-between;
	gap: 4px;
	margin-top: 4px;
	font-size: 11px;
	color: var(--cp-faint);
}

.cp-scale__tick {
	flex: 1 1 0;
	text-align: center;
}

.cp-scale__tick:first-child {
	text-align: left;
}

.cp-scale__tick:last-child {
	text-align: right;
}

/* --------------------------------------------------------------- near me */

.cp-near {
	margin-bottom: 22px;
}

/*
 * Revealed by the checkbox above it, with no script involved. Hidden with
 * display so the fields are out of the tab order until they are asked for.
 */
.cp-near__panel {
	display: none;
	padding: 16px 18px 14px;
	margin-top: 10px;
	border: 1px dashed color-mix(in srgb, var(--cp-accent) 40%, transparent);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-tint);
}

.cp-near:has([data-cp-near-toggle]:checked) .cp-near__panel {
	display: block;
}

.cp-near__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}

.cp-near__field {
	flex: 1 1 220px;
	display: block;
}

.cp-near__fieldlabel {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-ink);
}

.cp-near__field input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--cp-line);
	border-radius: 10px;
	background: var(--cp-surface);
	color: var(--cp-ink);
	font-size: 15px;
	line-height: 1.3;
}

.cp-near__field input:focus-visible {
	outline: 2px solid var(--cp-accent);
	outline-offset: 1px;
	border-color: transparent;
}

.cp-near__gps {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 16px;
	border: 1px solid color-mix(in srgb, var(--cp-accent) 45%, transparent);
	border-radius: 10px;
	background: var(--cp-surface);
	color: var(--cp-ink);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.cp-near__gps:hover {
	background: var(--cp-tint-strong);
}

.cp-near__gps[disabled] {
	opacity: .6;
	cursor: default;
}

.cp-near__gpsicon {
	font-size: 16px;
	color: var(--cp-accent);
}

.cp-near__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cp-faint);
}

/* ---------------------------------------------------------------- actions */

.cp__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding-top: 18px;
	border-top: 1px solid var(--cp-hair);
}

.cp__go {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--cp-accent);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: filter .15s ease, opacity .15s ease;
}

.cp__go:hover:not([disabled]) {
	filter: brightness(1.07);
}

.cp__go[disabled] {
	opacity: .45;
	cursor: default;
}

.cp__go:focus-visible {
	outline: 2px solid var(--cp-ink);
	outline-offset: 3px;
}

.cp__gostar {
	font-size: 14px;
}

.cp.is-busy .cp__gostar {
	animation: cp-spin 1.1s linear infinite;
}

@keyframes cp-spin {
	to { transform: rotate(360deg); }
}

.cp__clear {
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--cp-faint);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cp__clear:hover {
	color: var(--cp-ink);
}

.cp__hint {
	flex: 1 1 200px;
	margin: 0;
	font-size: 13px;
	color: var(--cp-faint);
}

/* ---------------------------------------------------------------- results */

.cp__out:empty {
	display: none;
}

.cp__out {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--cp-hair);
}

.cp-result__intro {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--cp-ink);
}

.cp-ideas {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cp-idea;
}

.cp-idea {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	padding: 16px 18px;
	border: 1px solid var(--cp-hair);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-surface);
}

.cp-idea::before {
	counter-increment: cp-idea;
	content: counter(cp-idea);
	grid-row: 1 / span 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--cp-tint-strong);
	color: var(--cp-accent);
	font-size: 13px;
	font-weight: 700;
}

.cp-idea__title {
	margin: 3px 0 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cp-ink);
}

.cp-idea__detail {
	margin: 5px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cp-text);
}

.cp-idea__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-top: 10px;
}

.cp-idea__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--cp-tint);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cp-ink);
}

.cp-result__tip {
	margin: 16px 0 0;
	padding: 13px 16px;
	border-left: 3px solid var(--cp-accent);
	border-radius: 0 8px 8px 0;
	background: var(--cp-tint);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cp-ink);
}

.cp-note {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cp-faint);
}

.cp-error {
	margin: 0;
	padding: 15px 18px;
	border: 1px solid color-mix(in srgb, #d33 40%, var(--cp-line));
	border-radius: var(--cp-radius-sm);
	background: color-mix(in srgb, #d33 6%, transparent);
	font-size: 14.5px;
	color: var(--cp-ink);
}

/* --------------------------------------------------------------- waiting */

.cp-wait {
	display: grid;
	gap: 12px;
}

.cp-wait__says {
	margin: 0;
	font-size: 15px;
	color: var(--cp-muted);
}

.cp-wait__bar {
	height: 62px;
	border-radius: var(--cp-radius-sm);
	background: linear-gradient(90deg, var(--cp-wash) 25%, var(--cp-hair) 50%, var(--cp-wash) 75%);
	background-size: 280% 100%;
	animation: cp-shimmer 1.4s ease-in-out infinite;
}

.cp-wait__bar:nth-child(3) { opacity: .75; }
.cp-wait__bar:nth-child(4) { opacity: .5; }

@keyframes cp-shimmer {
	from { background-position: 140% 0; }
	to   { background-position: -40% 0; }
}

/* ------------------------------------------------------------- dark mode */

html[scheme="dark"] .cp {
	--cp-line: color-mix(in srgb, var(--cp-ink) 20%, transparent);
	--cp-hair: color-mix(in srgb, var(--cp-ink) 13%, transparent);
	--cp-wash: color-mix(in srgb, var(--cp-ink) 9%, transparent);
	--cp-tint: color-mix(in srgb, var(--cp-accent) 14%, transparent);
	--cp-tint-strong: color-mix(in srgb, var(--cp-accent) 24%, transparent);
}

html[scheme="dark"] .cp-chip__box {
	border-color: color-mix(in srgb, var(--cp-ink) 40%, transparent);
}

html[scheme="dark"] .cp-idea,
html[scheme="dark"] .cp-near__field input,
html[scheme="dark"] .cp-near__gps {
	background: color-mix(in srgb, var(--cp-ink) 6%, var(--cp-surface));
}

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

@media (max-width: 600px) {
	.cp__inner {
		padding: 22px 18px 20px;
		border-radius: 14px;
	}

	.cp-scales {
		padding: 16px 16px 12px;
	}

	.cp {
		--cp-box: 17px;
	}

	.cp-chips {
		gap: 7px;
	}

	.cp-chip {
		gap: 7px;
		font-size: 14px;
		padding: 8px 13px 8px 10px;
	}

	.cp-chip__icon {
		font-size: 15px;
	}

	.cp__go {
		width: 100%;
		justify-content: center;
	}

	.cp-scale__tick {
		font-size: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp *,
	.cp *::before,
	.cp *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* ----------------------------------------------------------- compact layout

   The classic layout gives every chip as much width as its words want, which
   reads well and makes a panel roughly a screen and a half tall. Compact trades
   that for a grid: every cell the same width, so the eye can run down a column
   instead of picking its way along ragged rows, and the whole block lands at
   about half the height.
   -------------------------------------------------------------------------- */

.cp--compact {
	--cp-box: 16px;
}

.cp--compact .cp__inner {
	padding: 22px 22px 20px;
}

.cp--compact .cp__head {
	margin-bottom: 18px;
}

.cp--compact .cp__title {
	font-size: clamp(18px, 2vw, 22px);
}

.cp--compact .cp__lede {
	font-size: 14px;
}

.cp--compact .cp-group {
	margin-bottom: 12px;
}

.cp--compact .cp-group__legend {
	margin-bottom: 6px;
}

.cp--compact .cp-group__label {
	font-size: 11px;
}

.cp--compact .cp-group__hint {
	font-size: 11.5px;
}

.cp--compact .cp-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
	gap: 5px;
}

.cp--compact .cp-chip {
	gap: 7px;
	min-height: 35px;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.25;
}

.cp--compact .cp-chip:has(.cp-chip__input:checked) {
	font-weight: 600;
}

.cp--compact .cp-chip--wide {
	min-height: 0;
	padding: 12px 14px;
	border-radius: var(--cp-radius-sm);
}

.cp--compact .cp-scales {
	gap: 16px 28px;
	margin: 16px 0 14px;
	padding: 14px 18px 10px;
}

.cp--compact .cp-near {
	margin-bottom: 16px;
}

.cp--compact .cp__actions {
	padding-top: 14px;
}

.cp--compact .cp__go {
	padding: 12px 22px;
	font-size: 15px;
}

/* ------------------------------------------------------------------- fold

   A panel this tall in the middle of an article is a wall. Collapsed, it shows
   enough to be recognised as something to fill in, and opens on a click
   anywhere in it — the veil is one big label, and the button at its foot is
   there for anyone who reads the affordance rather than guessing at it.
   -------------------------------------------------------------------------- */

.cp__foldwrap {
	position: relative;
}

.cp__open {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.cp__veil {
	display: none;
}

.cp--foldable .cp__fold {
	max-height: var(--cp-fold);
	overflow: hidden;
}

.cp--foldable .cp__veil {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 4px;
	cursor: pointer;
	background: linear-gradient(180deg,
		transparent 40%,
		color-mix(in srgb, var(--cp-surface) 78%, transparent) 72%,
		var(--cp-surface) 96%);
}

.cp--foldable:has(.cp__open:checked) .cp__fold {
	max-height: none;
	overflow: visible;
}

.cp--foldable:has(.cp__open:checked) .cp__veil {
	display: none;
}

.cp__reveal {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border: 1px solid color-mix(in srgb, var(--cp-accent) 45%, transparent);
	border-radius: 999px;
	background: var(--cp-surface);
	color: var(--cp-ink);
	font-size: 14px;
	font-weight: 600;
}

.cp--foldable .cp__veil:hover .cp__reveal {
	background: var(--cp-tint);
}

.cp--foldable:has(.cp__open:focus-visible) .cp__reveal {
	outline: 2px solid var(--cp-accent);
	outline-offset: 2px;
}

.cp__revealicon {
	color: var(--cp-accent);
}

/* --------------------------------------------------------------- footnotes

   The web-grounded model cites by writing a link into the middle of a sentence.
   Printed in full it breaks the line; as a number it reads the way a footnote
   has always read, and the sentence closes over it.
   -------------------------------------------------------------------------- */

.cp-ref {
	margin-left: 1px;
	font-size: .72em;
	line-height: 0;
	vertical-align: super;
}

.cp-ref a {
	display: inline-block;
	min-width: 15px;
	padding: 1px 3px;
	border-radius: 4px;
	background: var(--cp-tint-strong);
	color: var(--cp-accent);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.cp-ref a:hover,
.cp-ref a:focus-visible {
	background: var(--cp-accent);
	color: #fff;
}

.cp-result__place {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cp-accent);
}

.cp-idea__tagicon {
	flex: none;
	color: var(--cp-accent);
}

.cp-near__gpsicon {
	font-size: 16px;
	color: var(--cp-accent);
}

.cp-near__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cp-faint);
}

/* ---------------------------------------------------------------- actions */

.cp__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding-top: 18px;
	border-top: 1px solid var(--cp-hair);
}

.cp__go {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--cp-accent);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: filter .15s ease, opacity .15s ease;
}

.cp__go:hover:not([disabled]) {
	filter: brightness(1.07);
}

.cp__go[disabled] {
	opacity: .45;
	cursor: default;
}

.cp__go:focus-visible {
	outline: 2px solid var(--cp-ink);
	outline-offset: 3px;
}

.cp__gostar {
	font-size: 14px;
}

.cp.is-busy .cp__gostar {
	animation: cp-spin 1.1s linear infinite;
}

@keyframes cp-spin {
	to { transform: rotate(360deg); }
}

.cp__clear {
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--cp-faint);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cp__clear:hover {
	color: var(--cp-ink);
}

.cp__hint {
	flex: 1 1 200px;
	margin: 0;
	font-size: 13px;
	color: var(--cp-faint);
}

/* ---------------------------------------------------------------- results */

.cp__out:empty {
	display: none;
}

.cp__out {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--cp-hair);
}

.cp-result__intro {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--cp-ink);
}

.cp-ideas {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cp-idea;
}

.cp-idea {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	padding: 16px 18px;
	border: 1px solid var(--cp-hair);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-surface);
}

.cp-idea::before {
	counter-increment: cp-idea;
	content: counter(cp-idea);
	grid-row: 1 / span 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--cp-tint-strong);
	color: var(--cp-accent);
	font-size: 13px;
	font-weight: 700;
}

.cp-idea__title {
	margin: 3px 0 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cp-ink);
}

.cp-idea__detail {
	margin: 5px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cp-text);
}

.cp-idea__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-top: 10px;
}

.cp-idea__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--cp-tint);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cp-ink);
}

.cp-result__tip {
	margin: 16px 0 0;
	padding: 13px 16px;
	border-left: 3px solid var(--cp-accent);
	border-radius: 0 8px 8px 0;
	background: var(--cp-tint);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cp-ink);
}

.cp-note {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cp-faint);
}

.cp-error {
	margin: 0;
	padding: 15px 18px;
	border: 1px solid color-mix(in srgb, #d33 40%, var(--cp-line));
	border-radius: var(--cp-radius-sm);
	background: color-mix(in srgb, #d33 6%, transparent);
	font-size: 14.5px;
	color: var(--cp-ink);
}

/* --------------------------------------------------------------- waiting */

.cp-wait {
	display: grid;
	gap: 12px;
}

.cp-wait__says {
	margin: 0;
	font-size: 15px;
	color: var(--cp-muted);
}

.cp-wait__bar {
	height: 62px;
	border-radius: var(--cp-radius-sm);
	background: linear-gradient(90deg, var(--cp-wash) 25%, var(--cp-hair) 50%, var(--cp-wash) 75%);
	background-size: 280% 100%;
	animation: cp-shimmer 1.4s ease-in-out infinite;
}

.cp-wait__bar:nth-child(3) { opacity: .75; }
.cp-wait__bar:nth-child(4) { opacity: .5; }

@keyframes cp-shimmer {
	from { background-position: 140% 0; }
	to   { background-position: -40% 0; }
}

/* ------------------------------------------------------------- dark mode */

html[scheme="dark"] .cp {
	--cp-line: color-mix(in srgb, var(--cp-ink) 20%, transparent);
	--cp-hair: color-mix(in srgb, var(--cp-ink) 13%, transparent);
	--cp-wash: color-mix(in srgb, var(--cp-ink) 9%, transparent);
	--cp-tint: color-mix(in srgb, var(--cp-accent) 14%, transparent);
	--cp-tint-strong: color-mix(in srgb, var(--cp-accent) 24%, transparent);
}

html[scheme="dark"] .cp-chip__box {
	border-color: color-mix(in srgb, var(--cp-ink) 40%, transparent);
}

html[scheme="dark"] .cp-idea,
html[scheme="dark"] .cp-near__field input,
html[scheme="dark"] .cp-near__gps {
	background: color-mix(in srgb, var(--cp-ink) 6%, var(--cp-surface));
}

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

@media (max-width: 600px) {
	.cp__inner {
		padding: 22px 18px 20px;
		border-radius: 14px;
	}

	.cp-scales {
		padding: 16px 16px 12px;
	}

	.cp {
		--cp-box: 17px;
	}

	.cp-chips {
		gap: 7px;
	}

	.cp-chip {
		gap: 7px;
		font-size: 14px;
		padding: 8px 13px 8px 10px;
	}

	.cp-chip__icon {
		font-size: 15px;
	}

	.cp__go {
		width: 100%;
		justify-content: center;
	}

	.cp-scale__tick {
		font-size: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp *,
	.cp *::before,
	.cp *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* ----------------------------------------------------------- compact layout

   The classic layout gives every chip as much width as its words want, which
   reads well and makes a panel roughly a screen and a half tall. Compact trades
   that for a grid: every cell the same width, so the eye can run down a column
   instead of picking its way along ragged rows, and the whole block lands at
   about half the height.
   -------------------------------------------------------------------------- */

.cp--compact {
	--cp-box: 16px;
}

.cp--compact .cp__inner {
	padding: 22px 22px 20px;
}

.cp--compact .cp__head {
	margin-bottom: 18px;
}

.cp--compact .cp__title {
	font-size: clamp(18px, 2vw, 22px);
}

.cp--compact .cp__lede {
	font-size: 14px;
}

.cp--compact .cp-group {
	margin-bottom: 12px;
}

.cp--compact .cp-group__legend {
	margin-bottom: 6px;
}

.cp--compact .cp-group__label {
	font-size: 11px;
}

.cp--compact .cp-group__hint {
	font-size: 11.5px;
}

.cp--compact .cp-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
	gap: 5px;
}

.cp--compact .cp-chip {
	gap: 7px;
	min-height: 35px;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.25;
}

.cp--compact .cp-chip:has(.cp-chip__input:checked) {
	font-weight: 600;
}

.cp--compact .cp-chip--wide {
	min-height: 0;
	padding: 12px 14px;
	border-radius: var(--cp-radius-sm);
}

.cp--compact .cp-scales {
	gap: 16px 28px;
	margin: 16px 0 14px;
	padding: 14px 18px 10px;
}

.cp--compact .cp-near {
	margin-bottom: 16px;
}

.cp--compact .cp__actions {
	padding-top: 14px;
}

.cp--compact .cp__go {
	padding: 12px 22px;
	font-size: 15px;
}

/* ------------------------------------------------------------------- fold

   A panel this tall in the middle of an article is a wall. Collapsed, it shows
   enough to be recognised as something to fill in, and opens on a click
   anywhere in it — the veil is one big label, and the button at its foot is
   there for anyone who reads the affordance rather than guessing at it.
   -------------------------------------------------------------------------- */

.cp__foldwrap {
	position: relative;
}

.cp__open {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.cp__veil {
	display: none;
}

.cp--foldable .cp__fold {
	max-height: var(--cp-fold);
	overflow: hidden;
}

.cp--foldable .cp__veil {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 4px;
	cursor: pointer;
	background: linear-gradient(180deg,
		transparent 40%,
		color-mix(in srgb, var(--cp-surface) 78%, transparent) 72%,
		var(--cp-surface) 96%);
}

.cp--foldable:has(.cp__open:checked) .cp__fold {
	max-height: none;
	overflow: visible;
}

.cp--foldable:has(.cp__open:checked) .cp__veil {
	display: none;
}

.cp__reveal {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border: 1px solid color-mix(in srgb, var(--cp-accent) 45%, transparent);
	border-radius: 999px;
	background: var(--cp-surface);
	color: var(--cp-ink);
	font-size: 14px;
	font-weight: 600;
}

.cp--foldable .cp__veil:hover .cp__reveal {
	background: var(--cp-tint);
}

.cp--foldable:has(.cp__open:focus-visible) .cp__reveal {
	outline: 2px solid var(--cp-accent);
	outline-offset: 2px;
}

.cp__revealicon {
	color: var(--cp-accent);
}

/* --------------------------------------------------------------- footnotes

   The web-grounded model cites by writing a link into the middle of a sentence.
   Printed in full it breaks the line; as a number it reads the way a footnote
   has always read, and the sentence closes over it.
   -------------------------------------------------------------------------- */

.cp-ref {
	margin-left: 1px;
	font-size: .72em;
	line-height: 0;
	vertical-align: super;
}

.cp-ref a {
	display: inline-block;
	min-width: 15px;
	padding: 1px 3px;
	border-radius: 4px;
	background: var(--cp-tint-strong);
	color: var(--cp-accent);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.cp-ref a:hover,
.cp-ref a:focus-visible {
	background: var(--cp-accent);
	color: #fff;
}

.cp-result__place {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cp-accent);
}

.cp-idea__tagicon {
	flex: none;
	color: var(--cp-accent);
}

/* ------------------------------------------------------- the location fix */

.cp-near__fix {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 0;
	padding: 8px 12px;
	border: 1px solid var(--cp-line);
	border-radius: 10px;
	background: var(--cp-surface);
	font-size: 13px;
	color: var(--cp-ink);
}

.cp-near__fixicon {
	flex: none;
	color: var(--cp-accent);
}

.cp-near__drop {
	margin-left: auto;
	padding: 2px 0;
	border: 0;
	background: none;
	color: var(--cp-faint);
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.cp-near__drop:hover {
	color: var(--cp-ink);
}

.cp-near__gpsicon {
	color: var(--cp-accent);
}

/* ------------------------------------------------------------ members only

   Dimmed rather than removed: the point is that the reader can see what they
   are missing. The plate is click-through so a tap cannot land on a control
   that would not answer, and the whole box opens the sign-up dialog instead.
   -------------------------------------------------------------------------- */

.cp-near--locked {
	cursor: pointer;
}

.cp-near--locked .cp-near__plate {
	opacity: .45;
	filter: saturate(.45);
	pointer-events: none;
	user-select: none;
}

.cp-near--locked:hover .cp-near__plate {
	opacity: .6;
}

.cp-near__gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 9px;
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--cp-muted);
}

.cp-near__gateicon {
	flex: none;
	color: var(--cp-accent);
}

.cp-near__join {
	padding: 0;
	border: 0;
	background: none;
	color: var(--cp-accent);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ----------------------------------------------------- compact, on a phone */

@media (max-width: 600px) {
	.cp--compact .cp__inner {
		padding: 18px 14px 16px;
	}

	.cp--compact .cp-chips {
		grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
		gap: 5px;
	}

	.cp--compact .cp-chip {
		min-height: 36px;
		padding: 6px 8px;
		gap: 6px;
		font-size: 12.5px;
	}
}

html[scheme="dark"] .cp__reveal {
	background: color-mix(in srgb, var(--cp-ink) 6%, var(--cp-surface));
}

/* ------------------------------------------------------------ keeping ideas

   The card is a two-column grid — number, then content — so the button takes a
   third track rather than floating over the text it would otherwise cover on a
   narrow screen.
   -------------------------------------------------------------------------- */

.cp-idea {
	grid-template-columns: auto 1fr auto;
}

.cp-keep {
	grid-row: 1;
	grid-column: 3;
	align-self: start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: -2px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: none;
	color: var(--cp-faint);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.cp-keep:hover {
	background: var(--cp-tint);
	color: var(--cp-accent);
}

.cp-keep.is-kept {
	color: var(--cp-accent);
	cursor: default;
}

.cp-keep:focus-visible {
	outline: 2px solid var(--cp-accent);
	outline-offset: 1px;
}

.cp-idea__title,
.cp-idea__detail,
.cp-idea__meta {
	grid-column: 2;
}

/* --------------------------------------------------- kept ideas, in the agenda

   The agenda row is a four-column grid. The drawer is given the full width so
   it reads as something belonging to the row above it rather than as another
   column that happened to wrap.
   -------------------------------------------------------------------------- */

.ccp-extras {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 2px;
}

/*
 * The chips are indented, what opens from them is not.
 *
 * The first column of an agenda row holds the countdown — "in 3 days",
 * "Tomorrow" — and a chip starting under it read as though it belonged to the
 * date rather than to the holiday. So the chips begin level with the picture,
 * while the drawer keeps the full width of the row, which is what it needs to
 * lay an idea or a recipe out in.
 *
 * The numbers are Holiday Hub's own: a 66px countdown column and the 13px gap
 * after it. They are restated rather than derived because a flex child cannot
 * read the grid line its parent spans from, and the wrapper has to span the
 * whole row for the drawer's sake.
 */
.ccp-extras--agenda > .ccp-chip:first-of-type {
	margin-left: calc(66px + 13px);
}

@media (max-width: 680px) {
	/* One column fewer and a 12px gap, but the same 66px countdown. */
	.ccp-extras--agenda > .ccp-chip:first-of-type {
		margin-left: calc(66px + 12px);
	}
}

.ccp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border: 1px solid var(--cp-line, color-mix(in srgb, currentColor 16%, transparent));
	border-radius: 999px;
	background: none;
	color: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.ccp-chip:hover {
	border-color: color-mix(in srgb, var(--accent-color, #ff7618) 50%, transparent);
	background: color-mix(in srgb, var(--accent-color, #ff7618) 8%, transparent);
}

.ccp-chip__icon {
	color: var(--accent-color, #ff7618);
}

.ccp-chip__caret {
	opacity: .55;
	transition: transform .15s ease;
}

.ccp-chip[aria-expanded="true"] .ccp-chip__caret {
	transform: rotate(180deg);
}

/*
 * The attribute decides, not the class.
 *
 * `display: grid` on the panel itself outranks the `[hidden] { display: none }`
 * every browser ships, so the drawer rendered open and the toggle could not
 * shut it again — the script was setting `hidden` faithfully and the stylesheet
 * was overruling it. Scoping the display to :not([hidden]) hands the decision
 * back to the attribute.
 */
.ccp-kept:not([hidden]) {
	display: grid;
}

.ccp-kept {
	flex: 0 0 100%;
	gap: 8px;
	margin-top: 4px;
	padding: 12px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.ccp-kept__item {
	position: relative;
	padding-right: 30px;
}

.ccp-kept__title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
}

.ccp-kept__detail {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	opacity: .85;
}

.ccp-kept__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	margin: 7px 0 0;
	font-size: 12px;
	opacity: .7;
}

.ccp-kept__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ccp-kept__metaicon {
	color: var(--accent-color, #ff7618);
}

.ccp-kept__drop {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	padding: 4px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: inherit;
	opacity: .45;
	cursor: pointer;
}

.ccp-kept__drop:hover {
	opacity: 1;
	color: #d33;
}

/* ------------------------------------------------------------ recipes here

   An idea about cooking can turn into a recipe without leaving the page. The
   button is quiet until it is wanted and then replaces itself with what it
   asked for, which is why it removes itself rather than staying disabled.
   -------------------------------------------------------------------------- */

.cp-cook {
	grid-column: 2;
	justify-self: start;
	margin-top: 10px;
	padding: 7px 14px;
	border: 1px dashed color-mix(in srgb, var(--cp-accent) 45%, transparent);
	border-radius: 999px;
	background: none;
	color: var(--cp-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.cp-cook:hover {
	background: var(--cp-tint);
}

.cp-cook:focus-visible {
	outline: 2px solid var(--cp-accent);
	outline-offset: 2px;
}

.cp-recipe:empty {
	display: none;
}

.cp-recipe {
	grid-column: 2;
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--cp-hair);
}

/* =========================================================== standing our ground

   The theme styles every bare <button> on the site:

     button          { color: #fff; background-color: var(--accent-color); }
     button:hover    { background: #292d39; color: #fff; }
     button:disabled { background-color: #797d86; opacity: .7; }

   Those are (0,1,1) selectors, so a plain `.cp-keep { background: none }` at
   (0,1,0) loses to them. The result was visible: a kept idea's bookmark sat on
   a dark grey plate, because it was left disabled, and "Show me the recipe"
   turned white-on-pale on hover, because the theme set a colour our hover rule
   never mentioned.

   Every button this plugin draws therefore states its own background, colour and
   opacity for every state, at a specificity that wins outright rather than one
   that depends on which stylesheet the browser read last.
   -------------------------------------------------------------------------- */

.cp .cp__go,
.cp .cp__go:hover,
.cp .cp__go:focus,
.cp .cp__go[disabled] {
	background: var(--cp-accent);
	background-color: var(--cp-accent);
	color: #fff;
	opacity: 1;
}

.cp .cp__go:hover:not([disabled]) {
	filter: brightness(1.07);
}

.cp .cp__go[disabled] {
	opacity: .45;
	cursor: default;
	filter: none;
}

.cp .cp__clear,
.cp .cp__clear:hover,
.cp .cp__clear:focus {
	padding: 8px 4px;
	border-radius: 0;
	background: none;
	background-color: transparent;
	color: var(--cp-faint);
	opacity: 1;
	white-space: normal;
}

.cp .cp__clear:hover {
	color: var(--cp-ink);
}

.cp .cp-keep,
.cp .cp-keep:hover,
.cp .cp-keep:focus,
.cp .cp-keep[disabled] {
	background: none;
	background-color: transparent;
	color: var(--cp-faint);
	opacity: 1;
	padding: 0;
	white-space: normal;
}

.cp .cp-keep:hover {
	background-color: var(--cp-tint);
	color: var(--cp-accent);
}

.cp .cp-keep.is-kept,
.cp .cp-keep.is-kept:hover {
	background-color: transparent;
	color: var(--cp-accent);
}

.cp .cp-cook,
.cp .cp-cook:hover,
.cp .cp-cook:focus,
.cp .cp-cook[disabled] {
	background: none;
	background-color: transparent;
	color: var(--cp-ink);
	opacity: 1;
	white-space: normal;
}

.cp .cp-cook:hover {
	background-color: var(--cp-tint);
	color: var(--cp-ink);
}

.cp .cp-near__gps,
.cp .cp-near__gps:hover,
.cp .cp-near__gps:focus,
.cp .cp-near__gps[disabled] {
	background: var(--cp-surface);
	background-color: var(--cp-surface);
	color: var(--cp-ink);
	opacity: 1;
	white-space: normal;
}

.cp .cp-near__gps:hover {
	background-color: var(--cp-tint-strong);
}

.cp .cp-near__gps[disabled] {
	opacity: .6;
}

.cp .cp-near__join,
.cp .cp-near__join:hover,
.cp .cp-near__join:focus {
	padding: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	color: var(--cp-accent);
	opacity: 1;
	white-space: normal;
}

.ccp-extras .ccp-chip,
.ccp-extras .ccp-chip:hover,
.ccp-extras .ccp-chip:focus {
	background: none;
	background-color: transparent;
	color: inherit;
	opacity: 1;
	white-space: normal;
}

.ccp-extras .ccp-chip:hover {
	background-color: color-mix(in srgb, var(--accent-color, #ff7618) 8%, transparent);
}

.ccp-extras .ccp-kept__drop,
.ccp-extras .ccp-kept__drop:hover,
.ccp-extras .ccp-kept__drop:focus {
	padding: 4px;
	background: none;
	background-color: transparent;
	color: inherit;
	white-space: normal;
}

/* ------------------------------------------------- the fold hides the actions

   The button and its hint used to sit below the "Show all the filters" pill,
   which read as two calls to action stacked on top of each other — and the
   lower one belonged to a form the reader could not see yet. Folded, the panel
   now offers exactly one thing to press.
   -------------------------------------------------------------------------- */

.cp--foldable:not(:has(.cp__open:checked)) .cp__actions {
	display: none;
}

/* ----------------------------------------------------- the same drawer, boxed

   In Holiday Hub's agenda a row is a four-column grid and the drawer spans it.
   On an account profile the same drawer sits inside a card body, where there is
   no grid to span and the card already has its own padding.
   -------------------------------------------------------------------------- */

.ccp-extras--card {
	grid-column: auto;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}