/* @doxallia/design — Prose (markdown typography) styles */

.portail-content h1 {
	font-size: var(--text-2xl);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	line-height: var(--lh-tight);
	margin-bottom: var(--s-4);
}

.portail-content h2 {
	font-size: var(--text-xl);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	line-height: var(--lh-tight);
	margin-top: var(--s-10);
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 2px solid
		color-mix(in srgb, var(--color-brand) 15%, transparent);
}

.portail-content h3 {
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	margin-top: var(--s-8);
	margin-bottom: var(--s-2);
}

.portail-content h4 {
	font-size: var(--text-base);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	margin-top: var(--s-6);
	margin-bottom: var(--s-2);
}

.portail-content p {
	margin-bottom: var(--s-4);
}

/* :not(.btn) excludes call-to-action pills — their color comes from .btn--*
   rules and would otherwise lose to this rule's specificity (0,1,1 > 0,1,0),
   rendering navy text on navy background. */
.portail-content a:not(.btn) {
	color: var(--color-brand-text);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 2px;
	transition: text-decoration-color var(--transition);
}

.portail-content a:not(.btn):hover {
	text-decoration-color: currentColor;
}

.portail-content ul,
.portail-content ol {
	padding-left: var(--s-6);
	margin-bottom: var(--s-4);
}

.portail-content li {
	margin-bottom: var(--s-1);
}

.portail-content ul:has(.task-item) {
	padding-left: var(--s-2);
}

.portail-content .task-item {
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
}

.task-checkbox {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.15em;
	accent-color: var(--color-brand-text);
	cursor: pointer;
}

.checklist-reset {
	display: inline-block;
	margin-top: var(--s-2);
	padding: 0;
	background: none;
	border: none;
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.checklist-reset:hover {
	color: var(--color-text-muted);
}

.portail-content code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: color-mix(in srgb, var(--color-brand) 8%, white);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
	border-radius: var(--radius-sm);
	padding: 0.125em 0.375em;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .portail-content code {
		background: color-mix(
			in srgb,
			var(--color-brand) 25%,
			var(--color-surface)
		);
		border-color: color-mix(
			in srgb,
			var(--color-brand) 35%,
			var(--color-border)
		);
		color: var(--color-text);
	}
}
:root[data-theme="dark"] .portail-content code {
	background: color-mix(in srgb, var(--color-brand) 25%, var(--color-surface));
	border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border));
	color: var(--color-text);
}

.portail-content pre {
	background: var(--color-code-bg);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--s-4);
	scrollbar-width: thin;
	scrollbar-color: var(--color-text-subtle) transparent;
}

@media (max-width: 480px) {
	.portail-content pre {
		white-space: pre-wrap;
		word-wrap: break-word;
		overflow-x: hidden;
	}
}

.portail-content pre[data-language] {
	position: relative;
}

.portail-content pre code {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	background: none;
	border: none;
	padding: 0;
	color: var(--color-code-text);
}

.portail-content blockquote {
	border-left: 3px solid var(--color-brand-active);
}

.portail-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--s-4);
	font-size: var(--text-sm);
}

.portail-content th {
	text-align: left;
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	background: color-mix(in srgb, var(--color-brand) 6%, white);
	padding: var(--s-2) var(--s-3);
	border-bottom: 2px solid
		color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
}

.portail-content td {
	padding: var(--s-2) var(--s-3);
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

.portail-content tr:last-child td {
	border-bottom: none;
}

/* Date de dernière mise à jour — affichée sous le h1 */
.prose-meta {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	margin-top: calc(var(--s-2) * -1);
	margin-bottom: var(--s-8);
}