/*
 * Recipe Lab
 *
 * The same palette hooks and the same furniture as Celebration Planner, on a
 * separate prefix: a holiday page can carry both blocks, and they should read
 * as one piece of design without either being able to restyle the other.
 *
 * Colours come from the theme's own custom properties, so a change in the
 * Customizer carries through. Only the mixes are ours.
 */

/*
 * `.rl-host` is any container another plugin hands us to draw into — the slot
 * under a Celebration Planner idea, today. It carries the palette and nothing
 * else, so the card looks the same there as it does in this plugin's own block
 * without dragging that block's margins and borders along with it.
 */
.rl,
.rl-kept,
.rl-host {
	--rl-accent: var(--accent-color, #ff7618);
	--rl-ink: var(--headings-color, #23262c);
	--rl-text: var(--body-color, #4b505a);
	--rl-surface: var(--card-bg, #fff);

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

	--rl-radius: 18px;
	--rl-radius-sm: 12px;
	--rl-box: 16px;
	--rl-fold: 260px;
}

.rl {
	margin: 34px 0;
	clear: both;
}

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

.rl__inner {
	position: relative;
	padding: 22px 22px 20px;
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-radius);
	background:
		linear-gradient(180deg, var(--rl-tint) 0, transparent 170px),
		var(--rl-surface);
	overflow: hidden;
}

.rl__inner::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--rl-accent), color-mix(in srgb, var(--rl-accent) 35%, transparent));
}

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

.rl__head {
	margin-bottom: 18px;
}

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

.rl__title {
	margin: 0 0 8px;
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.25;
	color: var(--rl-ink);
}

.rl__lede {
	margin: 0;
	max-width: 68ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--rl-muted);
}

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

.rl-group {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
}

.rl-group__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3px 9px;
	padding: 0;
	margin-bottom: 6px;
}

.rl-group__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rl-ink);
}

.rl-group__hint {
	font-size: 11.5px;
	color: var(--rl-faint);
}

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

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

.rl-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 35px;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid var(--rl-line);
	border-radius: 10px;
	background: var(--rl-surface);
	color: var(--rl-text);
	font-size: 13.5px;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

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

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

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

/*
 * A dietary rule is not a preference, and the block says so before the label is
 * read: a ticked rule turns red rather than accent, which is the one place in
 * either plugin where a colour carries meaning on its own.
 */
.rl-chips--rules .rl-chip:has(.rl-chip__input:checked) {
	border-color: color-mix(in srgb, #c0392b 55%, transparent);
	background: color-mix(in srgb, #c0392b 9%, transparent);
}

.rl-chips--rules .rl-chip:has(.rl-chip__input:checked) .rl-chip__icon,
.rl-chips--rules .rl-chip__input:checked + .rl-chip__box {
	color: #c0392b;
	border-color: #c0392b;
	background: transparent;
}

.rl-chips--rules .rl-chip__input:checked + .rl-chip__box {
	background: #c0392b;
}

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

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

.rl-chip__box::after {
	content: "";
	position: absolute;
	top: calc(var(--rl-box) * .1);
	left: calc(var(--rl-box) * .32);
	width: calc(var(--rl-box) * .26);
	height: calc(var(--rl-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;
}

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

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

.rl-chip__icon {
	display: inline-flex;
	flex: none;
	color: var(--rl-faint);
}

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

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

.rl-scales {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px 28px;
	margin: 16px 0 14px;
	padding: 14px 18px 10px;
	border: 1px solid var(--rl-hair);
	border-radius: var(--rl-radius-sm);
	background: var(--rl-wash);
}

.rl-scale__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 5px 12px;
	margin-bottom: 8px;
}

.rl-scale__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rl-ink);
}

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

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

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

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

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

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

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

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

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

.rl-scale__tick:first-child { text-align: left; }
.rl-scale__tick:last-child  { text-align: right; }

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

.rl__foldwrap {
	position: relative;
}

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

.rl__veil {
	display: none;
}

.rl--foldable .rl__fold {
	max-height: var(--rl-fold);
	overflow: hidden;
}

.rl--foldable .rl__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(--rl-surface) 78%, transparent) 72%,
		var(--rl-surface) 96%);
}

.rl--foldable:has(.rl__open:checked) .rl__fold {
	max-height: none;
	overflow: visible;
}

.rl--foldable:has(.rl__open:checked) .rl__veil {
	display: none;
}

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

.rl--foldable .rl__veil:hover .rl__reveal {
	background: var(--rl-tint);
}

.rl--foldable:has(.rl__open:focus-visible) .rl__reveal {
	outline: 2px solid var(--rl-accent);
	outline-offset: 2px;
}

.rl__revealicon {
	color: var(--rl-accent);
}

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

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

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

.rl__go:hover:not([disabled]) { filter: brightness(1.07); }
.rl__go[disabled] { opacity: .45; cursor: default; }

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

.rl__gostar {
	display: inline-flex;
}

.rl.is-busy .rl__gostar {
	animation: rl-spin 1.1s linear infinite;
}

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

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

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

/* ----------------------------------------------------------------- output */

.rl__out:empty { display: none; }

.rl__out {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--rl-hair);
}

.rl-card__head {
	position: relative;
	padding-right: 40px;
}

.rl-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--rl-ink);
}

.rl-card__summary {
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--rl-muted);
}

.rl-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 12px 0 0;
}

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

.rl-fact__icon { color: var(--rl-accent); }

.rl-i { display: inline-flex; }

.rl-keep {
	position: absolute;
	top: -4px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: none;
	color: var(--rl-faint);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.rl-keep:hover { background: var(--rl-tint); color: var(--rl-accent); }
.rl-keep.is-kept { color: var(--rl-accent); cursor: default; }

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

/* ---------------------------------------------------------- the two columns

   Method on the left because it is the longer read and the eye starts there;
   the shopping list on the right, where it can be glanced at while cooking. On
   a phone they stack in the same order.
   -------------------------------------------------------------------------- */

.rl-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 20px 28px;
	margin-top: 18px;
}

@media (max-width: 640px) {
	.rl-cols { grid-template-columns: 1fr; gap: 20px; }
}

.rl-col__head {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rl-hair);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rl-ink);
}

.rl-col__icon { color: var(--rl-accent); }

.rl-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rl-step;
}

.rl-step {
	position: relative;
	padding: 0 0 14px 34px;
}

.rl-step::before {
	counter-increment: rl-step;
	content: counter(rl-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--rl-tint-strong);
	color: var(--rl-accent);
	font-size: 12px;
	font-weight: 700;
}

/* A rule joining one step to the next, so the method reads as a sequence. */
.rl-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 28px;
	bottom: 4px;
	left: 11.5px;
	width: 1px;
	background: var(--rl-hair);
}

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

.rl-step__time {
	display: inline-block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--rl-faint);
}

.rl-things {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Amounts align into a column while they are short, which is most of them, and
 * a long one — "2 cans (15 oz / 425 g each)" — takes the line to itself and lets
 * the ingredient wrap underneath rather than squeezing it into a inch-wide
 * ribbon. That is what the wrap is for; a fixed two-column grid cannot do both.
 */
.rl-thing {
	display: flex;
	flex-wrap: wrap;
	gap: 1px 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--rl-hair);
	font-size: 14px;
	line-height: 1.45;
	color: var(--rl-text);
}

.rl-thing:last-child { border-bottom: 0; }

.rl-thing__amount {
	flex: 0 0 auto;
	min-width: 62px;
	max-width: 100%;
	font-weight: 700;
	color: var(--rl-ink);
}

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

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

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

/* --------------------------------------------------------------- the photo */

.rl-shot:empty { display: none; }

.rl-shot {
	margin-top: 16px;
}

.rl-shot__img {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	border-radius: var(--rl-radius-sm);
}

.rl-shot__ask {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px dashed color-mix(in srgb, var(--rl-accent) 45%, transparent);
	border-radius: 999px;
	background: none;
	color: var(--rl-ink);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.rl-shot__ask:hover { background: var(--rl-tint); }
.rl-shot__ask[disabled] { opacity: .65; cursor: default; }
.rl-shot__icon { color: var(--rl-accent); }

.rl-shot.is-drawing .rl-shot__icon { animation: rl-pulse 1.2s ease-in-out infinite; }

@keyframes rl-pulse { 50% { opacity: .35; } }

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

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

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

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

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

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

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

/*
 * 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.
 */
.rl-kept:not([hidden]) {
	display: grid;
}

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

.rl-kept__item {
	position: relative;
	display: flex;
	gap: 12px;
	padding-right: 30px;
}

.rl-kept__shot {
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: 9px;
	object-fit: cover;
}

.rl-kept__body { min-width: 0; }

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

.rl-kept__summary {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: .85;
}

.rl-kept__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 6px 0 0;
	font-size: 12px;
	opacity: .7;
}

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

.rl-kept__facticon { color: var(--accent-color, #ff7618); }

.rl-kept__full { margin-top: 7px; }

.rl-kept__full summary {
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	color: var(--accent-color, #ff7618);
}

.rl-kept__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 12px 22px;
	margin-top: 8px;
	font-size: 13px;
}

.rl-kept__cols h5 {
	margin: 0 0 5px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .65;
}

.rl-kept__cols ul,
.rl-kept__cols ol {
	margin: 0;
	padding-left: 18px;
	line-height: 1.55;
}

.rl-kept__cols em {
	display: block;
	font-size: 11.5px;
	font-style: normal;
	opacity: .6;
}

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

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

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

html[scheme="dark"] .rl__reveal,
html[scheme="dark"] .rl-chip {
	background: color-mix(in srgb, var(--rl-ink) 5%, var(--rl-surface));
}

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

@media (max-width: 600px) {
	.rl__inner { padding: 18px 14px 16px; border-radius: 14px; }
	.rl-chips { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
	.rl-chip { font-size: 12.5px; padding: 5px 8px; gap: 6px; }
	.rl__go { width: 100%; justify-content: center; }
	.rl-scale__tick { font-size: 10px; }
	.rl-kept__shot { width: 64px; height: 64px; }
}

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

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

   The theme styles every bare <button> on the site — `button:hover` sets a white
   colour, `button:disabled` a dark grey plate — with (0,1,1) selectors that beat
   a lone class. That is why "Show me a picture" turned white-on-pale on hover.
   Every button here states its own colours for every state, at a specificity
   that wins outright rather than one that depends on stylesheet order.
   -------------------------------------------------------------------------- */

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

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

.rl .rl__go[disabled] {
	opacity: .45;
	cursor: default;
	filter: none;
}

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

.rl .rl__clear:hover {
	color: var(--rl-ink);
}

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

.rl .rl-keep:hover,
.rl-host .rl-keep:hover {
	background-color: var(--rl-tint);
	color: var(--rl-accent);
}

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

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

.rl .rl-shot__ask:hover,
.rl-host .rl-shot__ask:hover {
	background-color: var(--rl-tint);
	color: var(--rl-ink);
}

.rl .rl-shot__ask[disabled],
.rl-host .rl-shot__ask[disabled] {
	opacity: .65;
	cursor: default;
}

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

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

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

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

.rl--foldable:not(:has(.rl__open:checked)) .rl__actions {
	display: none;
}

/* ------------------------------------------- the same drawer, on a profile card */

.rl-extras.ccp-extras--card,
.ccp-extras--card .rl-kept {
	grid-column: auto;
}

/* ------------------------------------- the chips, when there is no planner here

   With Celebration Planner active its stylesheet owns the chip rail and this
   never applies. Without it, `.rl-extras` is the rail, and the chip still wants
   to start level with the holiday's picture while the drawer keeps the row's
   full width. The numbers are Holiday Hub's countdown column and its gap.
   -------------------------------------------------------------------------- */

.rl-extras.ccp-extras--agenda > .ccp-chip:first-of-type {
	margin-left: calc(66px + 13px);
}

@media (max-width: 680px) {
	.rl-extras.ccp-extras--agenda > .ccp-chip:first-of-type {
		margin-left: calc(66px + 12px);
	}
}