/**
 * Albert Admin Settings Styles
 *
 * @package Albert
 * @since   1.0.0
 */

/**
 * No page-shell rules live here.
 *
 * This file used to restate the shell three ways: a `max-width: 80rem` on
 * `.albert-wrap`/`.albert-settings` (both classes since removed, so the rule
 * was dead), and a `display: flex` + `gap` on `.albert-page` paired with a
 * `margin: 0` reset on `.albert-page__header`. That second pair produced the
 * same 16px rhythm the primitive already produces with a margin — but only on
 * the two screens that load this stylesheet, so Albert had one shell
 * implemented two ways and no way to change it in one place.
 *
 * `.albert-page` and everything under it is owned by albert-primitives.css.
 */

/*
 * The field system moved to albert-primitives.css in 1.4.0.
 *
 * It lived here, and this stylesheet loads only on Settings and Dashboard —
 * so Connections and Context could not render a labelled field at all, and any
 * add-on screen would have had to reinvent one. A field is a shared component,
 * not a Settings component.
 */

/* --------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------- */

/**
 * The two-column body, 2fr and 1fr (handoff §8.1). The wider column carries
 * the thing you came to read (recent activity, or the setup steps); the
 * narrower one carries reference material beside it.
 *
 * Mobile first: one column, promoted to two only when there is room for the
 * aside to be a genuine column rather than a squeezed strip.
 */
.albert-dashboard__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--albert-space-400);
	align-items: start;
}

@media screen and (min-width: 48rem) {
	.albert-dashboard__split {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

/* The stacked cards in the narrow column. */
.albert-dashboard__aside {
	display: grid;
	gap: var(--albert-space-400);
	min-inline-size: 0;
}

.albert-dashboard__empty {
	margin: 0;
	color: var(--albert-color-text-muted);
}

/* Ability categories: label left, count right. */
/* --------------------------------------------------------------
   Dashboard onboarding
   -------------------------------------------------------------- */

.albert-setup__head {
	flex-wrap: wrap;
}

/**
 * The progress bar. `role="progressbar"` with the real step numbers, so the
 * proportion is available to a screen reader as a count rather than only as a
 * width nobody can read.
 */
.albert-setup__progress {
	flex: 1 1 8rem;
	block-size: 5px;
	border-radius: var(--albert-radius-sm);
	background: var(--albert-color-surface-sunken);
	border: 1px solid var(--albert-color-border);
	overflow: hidden;
}

.albert-setup__progress-fill {
	display: block;
	block-size: 100%;
	background: var(--albert-color-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.albert-setup__progress-fill {
		transition: inline-size var(--albert-duration-fast) var(--albert-easing-fast);
	}
}

.albert-setup__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.albert-setup__step {
	display: flex;
	gap: 14px;
	padding: var(--albert-space-400) var(--albert-card-padding);
}

.albert-setup__step + .albert-setup__step {
	border-block-start: 1px solid var(--albert-color-border-subtle);
}

/* The current step is the only tinted row, so the eye lands on the one thing
   there is to do. Never tint alone: the marker also changes shape and the row
   carries screen-reader text saying which step this is. */
.albert-setup__step--current {
	background: var(--albert-color-accent-surface);
}

/**
 * The step marker: a numbered circle, a filled accent circle when current, a
 * success tick when done. Three distinguishable shapes, not three colours.
 */
.albert-setup__marker {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	border: 1px solid var(--albert-color-border-input);
	color: var(--albert-color-text-faint);
	font-size: var(--albert-font-size-sm);
	font-weight: var(--albert-font-weight-semibold);
}

.albert-setup__step--current .albert-setup__marker {
	background: var(--albert-color-accent);
	border-color: var(--albert-color-accent);
	color: var(--albert-color-accent-contrast);
}

.albert-setup__step--done .albert-setup__marker {
	background: var(--albert-color-success-surface);
	border-color: transparent;
	color: var(--albert-color-success);
}

.albert-setup__body {
	min-inline-size: 0;
	flex: 1;
}

.albert-setup__title {
	margin: 0;
	font-size: var(--albert-font-size-body);
	font-weight: var(--albert-font-weight-semibold);
	color: var(--albert-color-text);
}

.albert-setup__step--done .albert-setup__title,
.albert-setup__step:not(.albert-setup__step--current):not(.albert-setup__step--done) .albert-setup__title {
	color: var(--albert-color-text-muted);
}

.albert-setup__description {
	margin: 3px 0 0;
	font-size: var(--albert-font-size-sm);
	line-height: var(--albert-line-height-snug);
	color: var(--albert-color-text-muted);
}

.albert-setup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--albert-space-200);
	margin-block-start: var(--albert-space-300);
}

.albert-setup__step .albert-endpoint {
	margin-block-start: var(--albert-space-300);
}

.albert-setup__aside-link {
	margin: var(--albert-space-100) 0 0;
	font-size: var(--albert-font-size-sm);
}

/* Resources List */
/* No padding of its own: this sits inside .albert-card__body, which already
   pads, and the two together were what made the card look loose and unfinished.
   No dividers either. Two links do not need ruling off from each other. */
/* Dormant, not dead: the Resources card is switched off while the pages it
   links to are being written (see Dashboard::show_resources()). Do not remove
   in a dead-CSS sweep, the card comes back with one word. */
.albert-resources-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--albert-space-300);
}

.albert-resources-list li {
	display: flex;
	align-items: center;
	gap: var(--albert-space-200);
}

.albert-resources-list li .dashicons {
	color: var(--albert-color-text-faint);
	font-size: 16px;
	inline-size: 16px;
	block-size: 16px;
	flex: none;
}

.albert-resources-list a {
	text-decoration: none;
	color: var(--albert-color-link);
	font-size: var(--albert-font-size-sm);
}

.albert-resources-list a:hover {
	text-decoration: underline;
}

.albert-resources-list a:hover {
	text-decoration: underline;
	color: var(--albert-color-accent-hover);
}

/**
 * Setup complete — a one-line banner, not a card.
 *
 * This state used to render as a full card with its own heading and a 48px
 * checkmark centred in an otherwise empty body, so the least actionable thing
 * on the Dashboard took the most vertical space on it. It is now a single row:
 * icon, what happened, and the one action worth offering.
 *
 * The detail line's figures are the same two the stat row shows, and both are
 * computed from the site — see Dashboard::render_stat_row().
 */
.albert-setupdone {
	display: flex;
	align-items: center;
	gap: var(--albert-space-400);
	padding: var(--albert-space-400) var(--albert-space-500);
	background: var(--albert-color-surface);
	border: 1px solid var(--albert-color-border);
	border-radius: var(--albert-radius-md);
}

.albert-setupdone__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background: var(--albert-color-success-surface);
	color: var(--albert-color-success);
}

.albert-setupdone__text {
	min-inline-size: 0;
	flex: 1;
}

.albert-setupdone__title {
	margin: 0;
	font-size: var(--albert-font-size-section-title);
	font-weight: var(--albert-font-weight-semibold);
	color: var(--albert-color-text);
}

.albert-setupdone__detail {
	margin: 3px 0 0;
	font-size: var(--albert-font-size-body);
	color: var(--albert-color-text-muted);
}

.albert-setupdone__action {
	flex: none;
}

@media screen and (max-width: 600px) {
	.albert-setupdone {
		align-items: flex-start;
		flex-wrap: wrap;
	}
}


/* --------------------------------------------------------------
   Status dot — .albert-status-dot (additive; replaces the pill on
   Free's compact surfaces). Dot + visible word, never colour alone.
   -------------------------------------------------------------- */

.albert-status-dot {
	display: inline-flex;
	align-items: center;
	gap: var(--albert-space-100);
	vertical-align: middle;
	line-height: 1.4;
}

.albert-status-dot__dot {
	flex-shrink: 0;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	/* Glow rings built from alpha tokens — no animation (reduced-motion safe). */
	box-shadow: 0 0 0 3px var(--albert-color-accent-tint-10), 0 0 6px var(--albert-color-accent-tint-20);
	background-color: var(--albert-color-accent);
}

.albert-status-dot__label {
	font-size: var(--albert-font-size-sm);
	font-weight: 600;
	color: var(--albert-color-text);
}

.albert-status-dot--success .albert-status-dot__dot {
	background-color: var(--albert-color-success);
	box-shadow: 0 0 0 3px var(--albert-color-success-tint-10), 0 0 6px var(--albert-color-success-tint-20);
}

/* Failures read as more prominent: stronger glow + bolder label. */
.albert-status-dot--error .albert-status-dot__dot {
	background-color: var(--albert-color-danger);
	box-shadow: 0 0 0 3px var(--albert-color-danger-tint-20), 0 0 8px var(--albert-color-danger-tint-20);
}

.albert-status-dot--error .albert-status-dot__label {
	font-weight: 700;
	color: var(--albert-color-danger);
}

/* Blocked by policy: nothing broke, so it must not read like the failure two
   rows down — but the site did say no, so it must not disappear either. It
   sits between the two: the ring the quiet success has, none of the weight the
   error adds. */
.albert-status-dot--warning .albert-status-dot__dot {
	background-color: var(--albert-color-warning-dot);
	box-shadow: 0 0 0 3px var(--albert-color-warning-tint-10), 0 0 6px var(--albert-color-warning-tint-20);
}

.albert-status-dot--warning .albert-status-dot__label {
	color: var(--albert-color-warning);
}

/* A status value this build does not recognise — an add-on writing its own.
   Neutral dot beside the raw word: inventing a colour for it would be a claim
   about something we cannot read. Consumes the existing neutral tokens; this
   state gets no colour of its own. */
.albert-status-dot--neutral .albert-status-dot__dot {
	background-color: var(--albert-color-switch-off);
	box-shadow: none;
}

.albert-status-dot--neutral .albert-status-dot__label {
	color: var(--albert-color-neutral);
}

.albert-status-dot--connection .albert-status-dot__dot {
	background-color: var(--albert-color-accent);
	box-shadow: 0 0 0 3px var(--albert-color-accent-tint-10), 0 0 6px var(--albert-color-accent-tint-20);
}

/* --------------------------------------------------------------
   Compact log table — .albert-log-table (new shared class)
   -------------------------------------------------------------- */

.albert-log-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--albert-font-size-base);
	text-align: start;
}

.albert-log-table thead th {
	padding-block: var(--albert-space-200);
	padding-inline: var(--albert-card-padding);
	text-align: start;
	font-size: var(--albert-font-size-micro);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--albert-color-text-muted);
	background-color: var(--albert-color-canvas);
	border-block-end: 1px solid var(--albert-color-border);
}

.albert-log-table tbody td {
	padding-block: var(--albert-space-300);
	padding-inline: var(--albert-card-padding);
	border-block-end: 1px solid var(--albert-color-border-subtle);
	color: var(--albert-color-text);
	vertical-align: middle;
}

.albert-log-table tbody tr:last-child td {
	border-block-end: none;
}

.albert-log-table tbody tr:hover {
	background-color: var(--albert-color-canvas);
}

/*
 * The human label, then the ability id on its own line beneath it (handoff
 * §8.1). Stacked rather than inline: the two are the same fact at two levels
 * of precision, and side by side the id wrapped mid-slug into the label and
 * the pair stopped reading as one thing.
 */
.albert-log-table__event {
	font-weight: 500;
}

.albert-log-table__label {
	display: block;
}

.albert-log-table__id {
	display: block;
	margin-block-start: 2px;
	padding: 0;
	background: none;
	font-family: var(--albert-font-family-mono);
	font-size: var(--albert-font-size-mono-sm);
	font-weight: var(--albert-font-weight-normal);
	color: var(--albert-color-text-faint);
	overflow-wrap: anywhere;
}

.albert-log-table__by {
	color: var(--albert-color-text-muted);
}

.albert-log-table__when {
	white-space: nowrap;
	color: var(--albert-color-text-muted);
	font-size: var(--albert-font-size-sm);
}

/*
 * Narrow screens: shrink the table's intrinsic width so it fits a 375px
 * viewport without bleeding off the right edge. Tighten the horizontal
 * cell padding (20px → spacing-sm), drop the type size a notch, and let
 * the By/When columns release their nowrap so they can wrap instead of
 * forcing overflow. The .albert-activity-card__body wrapper keeps
 * overflow-x: auto as a safety net if content is still too wide.
 */
@media screen and (max-width: 600px) {
	.albert-log-table {
		font-size: var(--albert-font-size-sm);
	}

	.albert-log-table thead th,
	.albert-log-table tbody td {
		padding-inline: var(--albert-space-200);
	}

	.albert-log-table__by,
	.albert-log-table__when {
		white-space: normal;
	}
}

/* --------------------------------------------------------------
   Soft-paywall upsell — .albert-upsell-cta
   --------------------------------------------------------------
   The gradient over the foot of the table is drawn only when there genuinely
   are more entries than the five shown, so its presence is a fact rather than
   decoration. The block underneath states the limit in words as well. */

/* overflow-x: auto keeps a wide log table scrollable inside the card
 * instead of bleeding past the viewport on narrow screens (≤375px). */
.albert-activity-card__body {
	overflow-x: auto;
}

/**
 * A distinct block at the foot of the card, not a centred paywall prompt.
 *
 * It used to be centred, which made sense when it sat under a gradient as the
 * "you have hit the limit" moment. It no longer does, and centred text with no
 * ground under it read as stray content spilling out of the table rather than
 * as an offer: the surface and the rule above it are what make it a thing.
 */
.albert-upsell-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--albert-space-200);
	padding: var(--albert-card-padding);
	background: var(--albert-color-surface-sunken);
}

/* A rule above the offer would stop the eye at the exact point the fade is
   carrying it across, so the two are separated by tone alone. The border comes
   back when there is no fade, because then there is nothing to flow from and
   the block needs its own edge. */
.albert-upsell-cta:first-child,
.albert-card__body + .albert-upsell-cta {
	border-block-start: 1px solid var(--albert-color-border-subtle);
}

.albert-activity-card__body:has( .albert-activity__fade ) + .albert-upsell-cta {
	border-block-start: 0;
}

.albert-upsell-cta__title {
	margin: 0;
	font-size: var(--albert-font-size-section-title);
	color: var(--albert-color-text);
}

.albert-upsell-cta__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--albert-font-size-base);
	color: var(--albert-color-text-muted);
}

.albert-upsell-cta__benefits li {
	margin: 0;
}

.albert-upsell-cta__benefits li::before {
	content: "✓";
	margin-inline-end: var(--albert-space-100);
	color: var(--albert-color-success);
	font-weight: 700;
}

/*
 * WCAG 2.2 (2.5.8) — 44px minimum touch target. WP core
 * `.wp-core-ui .button-primary` (two classes) sets min-height: 40px,
 * line-height: ~38px and zero vertical padding, which out-specified the
 * single-class selector and capped the rendered height at 40px. Scoping
 * under the parent (.albert-upsell-cta .albert-upsell-cta__button — two
 * classes) ties that specificity and, loading after core, wins the
 * cascade without !important. We reset the core line-height/height,
 * set border-box, and add vertical padding so the rendered box is ≥44px
 * regardless of WP's metrics.
 */
.albert-upsell-cta .albert-upsell-cta__button {
	box-sizing: border-box;
	margin-block-start: var(--albert-space-100);
	min-block-size: 44px;
	block-size: auto;
	padding-block: var(--albert-space-200);
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.albert-upsell-cta__button:focus-visible {
	outline: 2px solid var(--albert-color-accent);
	outline-offset: 2px;
}

/*
 * Mobile (≤600px): stretch the CTA button to the full width of the
 * column so the primary action is an easy, obvious tap target rather
 * than a cramped half-width control. align-self: stretch overrides the
 * parent's align-items: center; justify-content keeps the label centred.
 * Desktop keeps the natural content-width inline button above.
 */
@media screen and (max-width: 600px) {
	.albert-upsell-cta .albert-upsell-cta__button {
		align-self: stretch;
		inline-size: 100%;
	}
}

/* ==========================================================================
   Needs your attention
   ==========================================================================
   Severity is carried three ways, because colour alone fails 1.4.1 and a
   coloured stripe alone tells a screen reader nothing: the stripe, the
   uppercase word above the title, and the wording of the title itself.

   Tones reuse the status tokens rather than introducing a fourth vocabulary.
   The stripes take the *dot* tokens, not the text ones: at 3px wide a
   text-weight colour reads as a dark smudge rather than as a severity.
   -------------------------------------------------------------------------- */
.albert-attention__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.albert-attention__item {
	display: flex;
	gap: var(--albert-space-300);
	align-items: flex-start;
	padding: var(--albert-space-300) var(--albert-card-padding);
	border-block-end: 1px solid var(--albert-color-border-subtle);
}

.albert-attention__item:last-child {
	border-block-end: 0;
}

.albert-attention__stripe {
	inline-size: 3px;
	align-self: stretch;
	border-radius: 2px;
	flex: none;
}

.albert-attention__item--danger .albert-attention__stripe {
	background: var(--albert-color-danger-dot);
}

.albert-attention__item--warning .albert-attention__stripe {
	background: var(--albert-color-warning-dot);
}

.albert-attention__item--info .albert-attention__stripe {
	background: var(--albert-color-info);
}

.albert-attention__text {
	flex: 1;
	min-inline-size: 0;
}

.albert-attention__tone {
	display: block;
	font-size: var(--albert-font-size-micro);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: var(--albert-font-weight-semibold);
}

/* The word takes the text token, which is tuned to be read. */
.albert-attention__item--danger .albert-attention__tone {
	color: var(--albert-color-danger);
}

.albert-attention__item--warning .albert-attention__tone {
	color: var(--albert-color-warning);
}

.albert-attention__item--info .albert-attention__tone {
	color: var(--albert-color-info);
}

.albert-attention__title {
	margin: 0;
	font-weight: var(--albert-font-weight-medium);
	color: var(--albert-color-text);
}

.albert-attention__detail {
	margin: 2px 0 0;
	font-size: var(--albert-font-size-sm);
	color: var(--albert-color-text-muted);
}

.albert-attention__action {
	flex: none;
	align-self: center;
	display: flex;
	align-items: center;
	gap: var(--albert-space-300);
}

/* Quiet, so it never competes with the action that actually resolves the item. */
.albert-attention__dismiss {
	background: none;
	border: 0;
	padding: 0;
	color: var(--albert-color-text-faint);
	font-size: var(--albert-font-size-sm);
	text-decoration: underline;
	cursor: pointer;
}

.albert-attention__dismiss:hover,
.albert-attention__dismiss:focus-visible {
	color: var(--albert-color-text-muted);
}

.albert-attention__empty {
	display: flex;
	gap: var(--albert-space-300);
	align-items: center;
	color: var(--albert-color-text-muted);
	font-size: var(--albert-font-size-sm);
}

.albert-attention__empty p {
	margin: 0;
}

.albert-attention__empty .dashicons {
	color: var(--albert-color-success);
	flex: none;
}

/* Narrow: the action drops under the text rather than squeezing beside it,
   and lines up with the title by clearing the stripe and its gap. */
@media (max-width: 782px) {
	.albert-attention__item {
		flex-wrap: wrap;
	}

	.albert-attention__action {
		align-self: flex-start;
		margin-inline-start: calc(3px + var(--albert-space-300));
	}
}

/* Degree of privacy: a status light beside the mode's name, never instead of
   it. Dot tokens, not text tokens, for the reason recorded in albert-tokens.css. */
.albert-stat__value--word {
	display: flex;
	align-items: center;
	gap: var(--albert-space-200);
	font-size: var(--albert-font-size-section-title);
	padding-block: 0.35rem 0.1rem;
}

.albert-degree {
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	flex: none;
}

.albert-degree--strict { background: var(--albert-color-success-dot); }
.albert-degree--balanced { background: var(--albert-color-warning-dot); }
.albert-degree--off { background: var(--albert-color-danger-dot); }

/* ==========================================================================
   Try asking your assistant
   ========================================================================== */
.albert-suggestions__list { list-style: none; margin: 0; padding: 0; }

.albert-suggestions__item {
	display: flex;
	gap: var(--albert-space-300);
	align-items: center;
	padding: var(--albert-space-300) var(--albert-card-padding);
	border-block-end: 1px solid var(--albert-color-border-subtle);
}

.albert-suggestions__item:last-child { border-block-end: 0; }

.albert-suggestions__mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--albert-color-text-faint);
	flex: none;
	align-self: flex-start;
}

.albert-suggestions__text {
	margin: 0;
	flex: 1;
	min-inline-size: 0;
	color: var(--albert-color-text);
}

/* Always visible, not hover-revealed. A control that appears on hover cannot be
   found by touch and cannot be found by anyone scanning the page. */
.albert-suggestions__copy { flex: none; }

/* ==========================================================================
   Add-on recommendation
   ========================================================================== */
.albert-recommend__head { display: flex; gap: var(--albert-space-300); align-items: flex-start; }

.albert-recommend__mark {
	inline-size: 28px;
	block-size: 28px;
	font-size: 17px;
	flex: none;
	border-radius: var(--albert-radius-sm);
	display: grid;
	place-items: center;
	background: var(--albert-color-accent-surface);
	color: var(--albert-color-accent);
}

.albert-recommend__because {
	margin: 0;
	font-size: var(--albert-font-size-micro);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--albert-color-text-faint);
	font-weight: var(--albert-font-weight-medium);
}

.albert-recommend__title {
	margin: 2px 0 0;
	font-size: var(--albert-font-size-card-title);
	font-weight: var(--albert-font-weight-semibold);
}

.albert-recommend__detail {
	margin: var(--albert-space-300) 0;
	font-size: var(--albert-font-size-sm);
	color: var(--albert-color-text-muted);
}

.albert-recommend__actions { display: flex; gap: var(--albert-space-300); align-items: center; }

/* The endpoint's override notice sits under the field it qualifies. */
.albert-endpoint__notice { margin-block-start: var(--albert-space-300); }

.albert-endpoint__more { margin: var(--albert-space-300) 0 0; font-size: var(--albert-font-size-sm); }

/* The left column carries two cards now, so it stacks them. */
.albert-dashboard__main {
	display: flex;
	flex-direction: column;
	gap: var(--albert-space-400);
	min-inline-size: 0;
}

.albert-upsell-cta__lede {
	margin: 0 0 var(--albert-space-300);
	font-size: var(--albert-font-size-sm);
	color: var(--albert-color-text-muted);
}

/* Only drawn when the list is genuinely truncated, so it always means "there is
   more" rather than decorating the bottom edge of a complete list. */
/**
 * The list runs out under a fade that leads straight into the offer.
 *
 * Drawn only when there genuinely are more entries than the five shown, which
 * is what makes it a statement rather than an ornament: the rows really do
 * continue, and the block below is how you see the rest. Deep enough to read
 * as "cut off" rather than as a stray gradient, and it ends in the surface
 * colour so the eye carries straight down into the upsell.
 */
.albert-activity__fade {
	position: sticky;
	inset-block-end: 0;
	block-size: 56px;
	margin-block-start: -56px;
	background: linear-gradient(
		to bottom,
		rgb( 255 255 255 / 0 ),
		color-mix( in oklab, var( --albert-color-surface ) 70%, transparent ) 45%,
		var( --albert-color-surface )
	);
	pointer-events: none;
}

/* The one sentence that answers what actually stops somebody mid-setup. Sits
   under the prompts, on the sunken surface, so it reads as a footnote to them
   rather than as another list item. */
.albert-suggestions__assurance {
	border-block-start: 1px solid var(--albert-color-border-subtle);
	background: var(--albert-color-surface-sunken);
	font-size: var(--albert-font-size-sm);
	color: var(--albert-color-text-muted);
}

.albert-suggestions__assurance p {
	margin: 0;
}