/* @doxallia/design — Callout (admonition) styles */

.portail-content .callout {
	border-left-width: 4px;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--s-3) var(--s-4);
	margin: var(--s-4) 0;
	border-left-style: solid;
	background: transparent;
}

.portail-content .callout p {
	margin-bottom: 0;
	font-size: var(--text-sm);
}

.portail-content .callout::before {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-1);
}

.portail-content .callout--note {
	background: var(--callout-note-bg);
	border-left-color: var(--color-get-fg);
}

.portail-content .callout--note::before {
	content: "ℹ Note";
	color: var(--color-get-fg);
}

.portail-content .callout--note p {
	color: var(--callout-note-fg);
}

.portail-content .callout--warning {
	background: var(--callout-warning-bg);
	border-left-color: var(--color-warning);
}

.portail-content .callout--warning::before {
	content: "⚠ Attention";
	color: var(--color-warning);
}

.portail-content .callout--warning p {
	color: var(--callout-warning-fg);
}

.portail-content .callout--tip {
	background: var(--callout-tip-bg);
	border-left-color: var(--color-success);
}

.portail-content .callout--tip::before {
	content: "✦ Conseil";
	color: var(--color-success);
}

.portail-content .callout--tip p {
	color: var(--callout-tip-fg);
}

.portail-content .callout--danger {
	background: var(--callout-danger-bg);
	border-left-color: var(--color-delete-fg);
}

.portail-content .callout--danger::before {
	content: "✕ Attention critique";
	color: var(--color-delete-fg);
}

.portail-content .callout--danger p {
	color: var(--callout-danger-fg);
}

/* ── Titled callouts (markdown `:::type[Title]` admonitions) ──────────
 * A custom title replaces the generic ::before label and inherits the
 * per-type accent colour. */
.portail-content .callout--titled::before {
	display: none;
}

/* `.callout .callout-title` (0,3,0) — must outrank `.callout p` (0,2,1),
 * which zeroes margin-bottom and sets --text-sm. Titles use the per-type
 * BODY text colour (--callout-*-fg), not the accent colour: real text at
 * 12px must hold 4.5:1 on the callout background (axe color-contrast), which
 * the accents fail (e.g. #d97706 on #fffbeb = 3.07:1). The ::before labels
 * get away with the accent only because axe skips pseudo-elements. */
.portail-content .callout .callout-title {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-1);
}

.portail-content .callout--note .callout-title {
	color: var(--callout-note-fg);
}

.portail-content .callout--warning .callout-title {
	color: var(--callout-warning-fg);
}

.portail-content .callout--tip .callout-title {
	color: var(--callout-tip-fg);
}

.portail-content .callout--danger .callout-title {
	color: var(--callout-danger-fg);
}