/*
 * Découverte Community.
 *
 * Two families live in this sheet and they are not the same thing.
 *
 * THE ARTICLE SECTIONS — « le carnet des lecteurs » and « la conversation » —
 * are editorial surfaces that happen to accept input. They sit INSIDE
 * `.dcv-article`, so they take that container's measure and gutter and never
 * open one of their own: the rejected version carried `.dcv-wrap` inside a
 * container that already had a gutter, and the discussion sat 70px right of
 * everything above it.
 *
 * THE COMMUNITY PAGES — sign-in, the account, a member's profile — are utility
 * surfaces on their own canvas, and keep the ruled utility grammar they had.
 *
 * What is deliberately absent from both: a cell grid of counts. Five reactions
 * rendered as five bordered cells each showing « 0 » is a stat-tile dashboard
 * on a reading page, which is the pattern ANTI-PATTERNS.md rejects twice.
 */

/* ===========================================================================
 * 1. Shared: the community's action grammar
 * ======================================================================== */

/*
 * `.dcv-action` is the theme's own action component (components.css), plate,
 * wipe and all, with a documented contract for the `::before`/`::after` layers
 * that draw it. It is USED here, never redefined: an earlier pass declared its
 * own `.dcv-action` in this sheet, killed those two layers, and produced a
 * button with no fill at all — the naming collision ANTI-PATTERNS.md records.
 *
 * Only the buttons this sheet actually owns are neutralised below, because
 * Blocksy claims every `[type="submit"]` on the page and renders a blurred
 * shadow plate into its `::before`.
 */
/*
 * Blocksy owns `[type="submit"]` and repaints it on hover:
 * `background-color: var(--theme-button-background-hover-color)`, plus a lift.
 * Every button in this zone is a submit, so a hovered reaction grew a filled
 * rectangle behind its circle in the section's own accent — measured
 * `oklch(0.76 0.072 236)` where `transparent` was authored.
 *
 * `blocksy-bridge.css` resolves after this sheet, so an equal-specificity rule
 * here loses. Two classes and the pseudo-class win it back on specificity
 * instead of on order, and without `!important`.
 */
.dcv-carnet .dcv-carnet__reaction,
.dcv-carnet .dcv-carnet__reaction:hover,
.dcv-carnet .dcv-carnet__reaction:focus-visible,
.dcv-carnet .dcv-carnet__reaction:active,
.dcv-carnet .dcv-carnet__keep-action,
.dcv-carnet .dcv-carnet__keep-action:hover,
.dcv-carnet .dcv-carnet__keep-action:focus-visible,
.dcv-carnet .dcv-carnet__keep-action:active,
.dcv-reply .dcv-vote__arrow,
.dcv-reply .dcv-vote__arrow:hover,
.dcv-reply .dcv-vote__arrow:focus-visible,
.dcv-reply .dcv-vote__arrow:active,
.dcv-reply .dcv-reply__spine,
.dcv-reply .dcv-reply__spine:hover,
.dcv-reply .dcv-reply__unfold,
.dcv-reply .dcv-reply__unfold:hover {
	background-color: transparent;
	box-shadow: none;
	transform: none;
}

/* The one transform this zone does want, restated after the reset above. */
.dcv-carnet button.dcv-carnet__reaction:active .dcv-carnet__reaction-mark { transform: scale(0.94); }

.dcv-carnet__reaction::before,
.dcv-carnet__reaction::after,
.dcv-carnet__keep-action::before,
.dcv-carnet__keep-action::after,
.dcv-vote__arrow::before,
.dcv-vote__arrow::after,
.dcv-reply__spine::before,
.dcv-reply__unfold::before,
.dcv-reply__unfold::after { content: none !important; display: none !important; }

/* The one action that destroys something says so with its edge, not with a
   fill: a red plate on a reading page is a scare, and the confirmation step in
   front of it is what actually protects the member. */
.dcv-action--grave {
	color: var(--dcv-ink);
	border-color: var(--dcv-muted);
}

.dcv-action--grave::after { background: transparent; }

:is(.dcv-carnet__reaction, .dcv-carnet__keep-action, .dcv-vote__arrow, .dcv-reply__act, .dcv-reply__spine, .dcv-reply__unfold, .dcv-conversation__orders a):focus-visible {
	outline: var(--dcv-focus-width) solid var(--dcv-focus-ring);
	outline-offset: var(--dcv-focus-offset);
}

/*
 * `[hidden]` is a user-agent rule, and any author `display` beats it. Several
 * elements here toggle on that attribute, so it is restated where it has to
 * win: a cancel link that would not hide is a control offering to undo
 * something the reader never started.
 */
.dcv-carnet [hidden],
.dcv-conversation [hidden] { display: none !important; }

.dcv-community-status {
	margin: var(--dcv-space-sm) 0 0;
	font-size: var(--dcv-text-sm);
	color: var(--dcv-muted);
}

.dcv-community-status:empty { display: none; }
.dcv-community-status[data-tone="error"] { color: var(--dcv-cat-ink); }
/* ===========================================================================
 * 1b. The community zone — where the readership answers
 *
 * The two sections below are one moment to a reader, and rendered as two bare
 * ruled rows they read as more Article: the reported failure was « la section
 * est invisible dans la page ». A page has to announce that something else
 * starts here, and the device is the one the design system already owns — the
 * SECTION'S OWN PIGMENT at its faintest, so the zone takes the colour of the
 * room the reader is standing in and no two Hubs answer in the same tint.
 *
 * Not the olive band: that is the page's strongest transition and it is spent,
 * deliberately once, on the related slate at the foot. Not a card either. One
 * tinted band bled to the Article column's own edges, and inside it a single
 * hairline between the two halves.
 * ======================================================================== */

.dcv-community-zone {
	/*
	 * TWO GROUNDS, ONE BAND. The impression plate is short, iconic and
	 * expressive, so it takes the pigment. The conversation is long-form
	 * reading, so it takes the reading canvas — body text on a tinted ground is
	 * measurably harder to read, and a thread can run for screens.
	 *
	 * Derived rather than picked, so all nine pigments answer the same way and
	 * dark mode is not a second set of guesses.
	 */
	--dcv-carnet-ground: var(--dcv-cat-wash);
	--dcv-carnet-line: var(--dcv-cat-line);

	margin: var(--dcv-space-section) calc(-1 * var(--dcv-gutter)) 0;
	border-block: 1px solid var(--dcv-cat-line);
	background: var(--dcv-canvas);
}

/*
 * Dark. The wash token is tuned for a tint under a pointer; across a whole
 * plate it went muddy. Mixing the pigment INTO the sunk canvas did not fix it
 * either — the sunk canvas is green at hue 138, and fourteen percent of a blue
 * could not overcome it: measured, the plate came out at rgb(43,53,51), a
 * grey-green with no pigment left in it.
 *
 * So the plate is DERIVED the way tokens.css derives its five roles — the hue
 * and chroma of the section, at a lightness fixed here — instead of mixed with
 * a surface that has a hue of its own. Only the hue moves between sections,
 * which is what keeps nine pigments looking like one publication.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-dcv-theme="light"]) .dcv-community-zone {
		--dcv-carnet-ground: oklch(0.285 calc(var(--dcv-cat-c) * 0.42) var(--dcv-cat-h));
		--dcv-carnet-line: oklch(0.760 calc(var(--dcv-cat-c) * 0.72) var(--dcv-cat-h) / 0.42);
	}
}

:root[data-dcv-theme="dark"] .dcv-community-zone {
	--dcv-carnet-ground: oklch(0.285 calc(var(--dcv-cat-c) * 0.42) var(--dcv-cat-h));
	--dcv-carnet-line: oklch(0.760 calc(var(--dcv-cat-c) * 0.72) var(--dcv-cat-h) / 0.42);
}

/* The plate. It bleeds to the band's own edges and carries its colour alone. */
.dcv-community-zone .dcv-carnet {
	margin: 0;
	padding: clamp(1.4rem, 2.4vw, 2rem) var(--dcv-gutter);
	border-block: 0;
	border-bottom: 1px solid var(--dcv-carnet-line);
	background: var(--dcv-carnet-ground);
}

/* The reading half, on the canvas. */
.dcv-community-zone .dcv-conversation {
	margin: 0;
	padding: clamp(1.4rem, 2.4vw, 2rem) var(--dcv-gutter) clamp(1.6rem, 2.8vw, 2.4rem);
}

/* ===========================================================================
 * 2. « Le carnet des lecteurs »
 *
 * ONE RULED ROW, NOT A PANEL. The two treatments this replaces both failed the
 * same way: the reactions became a grid of bordered cells with a headline above
 * them, and the whole thing cost about six hundred pixels to ask a one-word
 * question. It now costs roughly a hundred and twenty, and it earns them.
 *
 * WHY THE HEADING IS SMALL. It is a section label on a page whose H1 is the
 * Article, not a second front page. A three-rem display line here competes with
 * the title the reader came for and pushes the controls below the fold.
 *
 * WHY THE REACTIONS ARE MARKS ALONE. Five words plus five icons said the same
 * thing twice and set the width of the row. Each Mark keeps its word in the
 * document for assistive technology and for a hover tooltip; only the drawing
 * is on screen, in the hairline circle the design system already uses. Never a
 * coloured tile.
 * ======================================================================== */

.dcv-carnet {
	margin-top: var(--dcv-space-section);
	padding-block: var(--dcv-space-md);
	border-block: 1px solid var(--dcv-line-strong);
	color: var(--dcv-ink);
}

.dcv-carnet__head { display: grid; gap: var(--dcv-space-3xs); }

.dcv-carnet__kicker {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--dcv-cat-ink);
}

.dcv-carnet__nudge {
	margin: 0;
	max-width: 44ch;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-sm);
	line-height: 1.5;
}

.dcv-carnet__title {
	margin: 0;
	color: var(--dcv-ink);
	font-family: var(--dcv-font-display);
	font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
	font-weight: 400;
	line-height: var(--dcv-leading-title);
	letter-spacing: -0.016em;
}

/* --- the five impressions -------------------------------------------------- */

.dcv-carnet__reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* The chosen Mark carries a ring three pixels outside its circle; the row
	   leaves it that room rather than letting it collide with its neighbour. */
	gap: var(--dcv-space-xs);
	margin: 0;
	padding: 0.2rem 0;
	border: 0;
	list-style: none;
}

.dcv-carnet__reaction {
	/* The clipped word is absolutely positioned; it needs this as its containing
	   block so it cannot escape to the corner of the document. */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 44px;
	padding: 0 0.35rem;
	border: 0;
	border-radius: var(--dcv-radius);
	background: transparent;
	box-shadow: none;
	color: var(--dcv-muted);
	cursor: pointer;
	font: 620 var(--dcv-text-xs) / 1 var(--dcv-font-ui);
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-carnet__reactions--static .dcv-carnet__reaction { cursor: default; }

/*
 * THE MARK, ITS CIRCLE, AND THE DISC THAT ARRIVES BEHIND IT.
 *
 * The circle is the project's own device — a Mark may sit in a hairline circle,
 * never in a coloured tile. What changes on hover is a DISC that grows from the
 * centre behind the drawing, on the long exponential ease the whole site uses.
 * It is a pseudo-element and it scales, so nothing in the row reflows and the
 * ban on animating layout holds.
 *
 * The previous states were unusable and it was one mistake: the chosen state
 * filled the circle with `--dcv-cat-wash`, which was the plate's own
 * background. Zero contrast against its own ground, so « choisi » and
 * « survolé » looked identical. Every state below now lands on a fill that is
 * measurably different from what is under it.
 */
.dcv-carnet__reaction-mark {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	border: 1px solid var(--dcv-line-strong);
	border-radius: 50%;
	color: var(--dcv-muted);
	transition:
		border-color var(--dcv-duration) var(--dcv-ease),
		color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-carnet__reaction-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--dcv-cat-fill);
	transform: scale(0);
	transition: transform var(--dcv-duration) var(--dcv-ease), background-color var(--dcv-duration-fast) var(--dcv-ease);
}

/* The drawing lifts a hair as the disc arrives. Transform only. */
.dcv-carnet__reaction-mark .dcv-mark {
	transition: transform var(--dcv-duration) var(--dcv-ease);
}

.dcv-carnet__reaction-mark .dcv-mark { width: 1.05rem; height: 1.05rem; }

/*
 * The word stays in the document — it is the button's accessible name and its
 * tooltip — and only leaves the screen. `display: none` would take it out of
 * the accessibility tree as well and leave five unlabelled buttons.
 */
.dcv-carnet__word {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dcv-carnet__count {
	min-width: 1ch;
	color: var(--dcv-muted);
	font-variant-numeric: tabular-nums;
}

/* --- HOVER: the disc arrives, the drawing turns cream ---------------------- */

button.dcv-carnet__reaction:hover .dcv-carnet__reaction-mark,
button.dcv-carnet__reaction:focus-visible .dcv-carnet__reaction-mark {
	border-color: var(--dcv-cat-fill);
	color: var(--dcv-on-olive);
}

button.dcv-carnet__reaction:hover .dcv-carnet__reaction-mark::after,
button.dcv-carnet__reaction:focus-visible .dcv-carnet__reaction-mark::after { transform: scale(1); }

button.dcv-carnet__reaction:hover .dcv-mark,
button.dcv-carnet__reaction:focus-visible .dcv-mark { transform: translateY(-1px); }

button.dcv-carnet__reaction:hover .dcv-carnet__count,
button.dcv-carnet__reaction:focus-visible .dcv-carnet__count { color: var(--dcv-ink); }

/* The press is felt, briefly, and only on a real press. */
button.dcv-carnet__reaction:active .dcv-carnet__reaction-mark { transform: scale(0.94); transition-duration: var(--dcv-duration-fast); }

/* --- CHOSEN: the disc has arrived and stays ------------------------------- */

.dcv-carnet__reaction[aria-pressed="true"] { color: var(--dcv-cat-ink); }

/*
 * The chosen one also carries a ring, held off the disc by a band of the plate
 * itself. Without it, hovering an unchosen Mark produced exactly the chosen
 * look and the row lost track of which one the reader had actually pressed.
 * The seal is the register the design language already uses for a maker's mark.
 */
.dcv-carnet__reaction[aria-pressed="true"] .dcv-carnet__reaction-mark {
	border-color: var(--dcv-cat-fill);
	color: var(--dcv-on-olive);
	box-shadow: 0 0 0 2px var(--dcv-carnet-ground), 0 0 0 3px var(--dcv-cat-fill);
}
.dcv-carnet__reaction[aria-pressed="true"] .dcv-carnet__reaction-mark::after { transform: scale(1); }
.dcv-carnet__reaction[aria-pressed="true"] .dcv-carnet__count { color: var(--dcv-cat-ink); font-weight: 700; }

/*
 * CHOSEN AND HOVERED — the one state that has to say « press again to undo ».
 * It inverts to ink and canvas, which is the recorded house rule for an
 * action's hover and the only pair that inverts by construction in both themes.
 */
button.dcv-carnet__reaction[aria-pressed="true"]:hover .dcv-carnet__reaction-mark,
button.dcv-carnet__reaction[aria-pressed="true"]:focus-visible .dcv-carnet__reaction-mark {
	border-color: var(--dcv-ink);
	color: var(--dcv-canvas);
	box-shadow: 0 0 0 2px var(--dcv-carnet-ground), 0 0 0 3px var(--dcv-ink);
}

button.dcv-carnet__reaction[aria-pressed="true"]:hover .dcv-carnet__reaction-mark::after,
button.dcv-carnet__reaction[aria-pressed="true"]:focus-visible .dcv-carnet__reaction-mark::after { background: var(--dcv-ink); }

/* --- what the readership retained, and what the reader keeps ---------------- */

.dcv-carnet__verdict {
	margin: 0;
	color: var(--dcv-muted);
	font-family: var(--dcv-font-display);
	font-size: 0.98rem;
	line-height: 1.4;
}

.dcv-carnet__keep { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--dcv-space-sm); }
.dcv-carnet__keep-label { flex: 0 0 100%; color: var(--dcv-muted); }
.dcv-carnet__keep form { display: contents; }

.dcv-carnet__keep-action {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--dcv-muted);
	cursor: pointer;
	font: 620 var(--dcv-text-xs) / 1.3 var(--dcv-font-ui);
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-carnet__keep-action .dcv-mark { width: 1.05rem; height: 1.05rem; }
.dcv-carnet__keep-action:hover { color: var(--dcv-ink); }
.dcv-carnet__keep-action[aria-pressed="true"] { color: var(--dcv-cat-ink); }

.dcv-carnet__signin,
.dcv-carnet__invite { margin: 0; font-size: var(--dcv-text-sm); }
.dcv-carnet__invite--muted { color: var(--dcv-muted); }
.dcv-carnet__signin a { display: inline-flex; align-items: center; gap: 0.4em; color: var(--dcv-cat-ink); }
.dcv-carnet__signin a .dcv-mark { width: 1em; height: 1em; }
.dcv-carnet__signin a:hover { color: var(--dcv-ink); }

/*
 * The whole block on one line once there is room: question on the left, the
 * five Marks and the private actions on the right, the verdict underneath.
 */
.dcv-carnet {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--dcv-space-sm);
	align-items: center;
}

.dcv-carnet__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dcv-space-2xs) var(--dcv-space-md);
}

@media (min-width: 52rem) {
	.dcv-carnet { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--dcv-space-lg); }
	.dcv-carnet__head { grid-column: 1; grid-row: 1; }
	.dcv-carnet__reactions { grid-column: 2; grid-row: 1; justify-content: flex-end; }
	.dcv-carnet__foot { grid-column: 1 / -1; grid-row: 2; }
	.dcv-carnet__signin { grid-column: 1 / -1; }
	.dcv-carnet__keep-label { flex: none; }
}

/* ===========================================================================
 * 3. « La conversation »
 *
 * Read top to bottom: what this is, then the field to add to it, THEN the way
 * the list below is ordered, then the list. The sort control used to sit above
 * the composer, which put a filter for a list before the list and before the
 * form — it now sits directly on top of the thing it reorders, and it does not
 * render at all when there is nothing to reorder.
 * ======================================================================== */

.dcv-conversation {
	margin-top: var(--dcv-space-section);
	color: var(--dcv-ink);
}

.dcv-conversation__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dcv-space-2xs) var(--dcv-space-sm);
	padding-bottom: var(--dcv-space-xs);
	border-bottom: 1px solid var(--dcv-line-strong);
}

.dcv-conversation__identity { display: grid; gap: var(--dcv-space-3xs); }

.dcv-conversation__kicker {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--dcv-cat-ink);
}

.dcv-conversation__title {
	margin: 0;
	color: var(--dcv-ink);
	font-family: var(--dcv-font-display);
	font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
	font-weight: 400;
	line-height: var(--dcv-leading-title);
	letter-spacing: -0.016em;
}

.dcv-conversation__count {
	margin-inline-start: 0.35em;
	color: var(--dcv-muted);
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-xs);
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	vertical-align: 0.5em;
}

/* --- the sort, immediately above the list it reorders ---------------------- */

.dcv-conversation__orders {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--dcv-space-sm);
	margin-top: var(--dcv-space-md);
	padding-bottom: var(--dcv-space-2xs);
	border-bottom: 1px solid var(--dcv-line);
	font-size: var(--dcv-text-xs);
}

.dcv-conversation__orders-label { margin: 0; color: var(--dcv-muted); }

.dcv-conversation__orders a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--dcv-muted);
	font-weight: 620;
	text-decoration: none;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-conversation__orders a:hover { color: var(--dcv-ink); }
.dcv-conversation__orders a[aria-current="true"] { color: var(--dcv-cat-ink); text-decoration: underline; text-underline-offset: 0.4em; }

.dcv-conversation__notice,
.dcv-conversation__closed,
.dcv-conversation__invite {
	max-width: var(--dcv-measure);
	margin: var(--dcv-space-md) 0 0;
	font-size: var(--dcv-text-sm);
}

.dcv-conversation__notice { padding-block: var(--dcv-space-xs); border-block: 1px solid var(--dcv-line); }
.dcv-conversation__notice[data-tone="error"] { color: var(--dcv-cat-ink); }
.dcv-conversation__closed,
.dcv-conversation__invite--muted { color: var(--dcv-muted); }

.dcv-conversation__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--dcv-space-sm);
	margin-inline-end: var(--dcv-space-md);
	color: var(--dcv-cat-ink);
	font-size: var(--dcv-text-sm);
	font-weight: 620;
	text-decoration: underline;
	text-decoration-color: var(--dcv-cat-line);
	text-underline-offset: 0.32em;
}

.dcv-conversation__more:hover { color: var(--dcv-ink); text-decoration-color: currentColor; }

/* --- the one composer ------------------------------------------------------ */

.dcv-composer {
	max-width: var(--dcv-measure);
	margin: var(--dcv-space-md) 0 0;
}

.dcv-composer--nested {
	margin-block: var(--dcv-space-sm) var(--dcv-space-xs);
	padding-inline-start: var(--dcv-space-sm);
	border-inline-start: 1px solid var(--dcv-cat-line);
}

.dcv-composer__context {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dcv-space-xs);
	margin: 0 0 var(--dcv-space-2xs);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-xs);
}

.dcv-composer__cancel { color: var(--dcv-cat-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.dcv-composer__label { display: block; margin-bottom: var(--dcv-space-2xs); }

/* On the tinted ground a field has to state its own surface, or it reads as a
   hole in the band rather than as something to type into. */
.dcv-composer__field,
.dcv-inline__field,
.dcv-inline__select {
	display: block;
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--dcv-line-strong);
	border-radius: var(--dcv-radius);
	background: var(--dcv-canvas);
	color: var(--dcv-ink);
	font: 400 var(--dcv-text-base) / var(--dcv-leading-ui) var(--dcv-font-ui);
	transition: border-color var(--dcv-duration-fast) var(--dcv-ease);
}

/*
 * Three rows at rest, growing with what is written in it. `height` and not only
 * `min-height`: the parent theme sets a height on every textarea, so `rows="3"`
 * was being overruled and the field opened at 170px — a screen of nothing
 * asking to be filled. The auto-grow script takes over from the first keystroke.
 */
.dcv-composer__field {
	height: 5.25rem;
	min-height: 5.25rem;
	resize: vertical;
	overflow-y: hidden;
}
.dcv-inline__field { resize: vertical; }

.dcv-composer__field:focus,
.dcv-inline__field:focus,
.dcv-inline__select:focus {
	border-color: var(--dcv-cat-ink);
	outline: var(--dcv-focus-width) solid var(--dcv-focus-ring);
	outline-offset: 1px;
}

.dcv-composer__field::placeholder { color: var(--dcv-muted); }

.dcv-composer__preview {
	margin-top: var(--dcv-space-sm);
	padding: var(--dcv-space-sm);
	border: 1px dashed var(--dcv-line-strong);
	border-radius: var(--dcv-radius);
	font-size: var(--dcv-text-base);
	line-height: 1.62;
}

.dcv-composer__preview > * + * { margin-top: 0.8em; }

.dcv-composer__actions,
.dcv-inline__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dcv-space-xs) var(--dcv-space-sm);
	margin-top: var(--dcv-space-sm);
}

.dcv-composer__note {
	flex: 1 1 15rem;
	margin: 0;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-xs);
	line-height: 1.5;
}

/* At rest the composer is a field and one action. The anti-robot widget and
   the small print appear when the reader actually starts writing. */
.dcv-composer[data-dcv-idle="true"] .dcv-community__turnstile,
.dcv-composer[data-dcv-idle="true"] .dcv-composer__note { display: none; }

.dcv-composer .dcv-community__turnstile,
.dcv-inline .dcv-community__turnstile { margin-block: var(--dcv-space-2xs) 0; }

/* --- what the field accepts, on one line until someone asks ---------------- */

.dcv-syntax {
	margin-top: var(--dcv-space-sm);
	border-block: 1px solid var(--dcv-cat-line);
}

.dcv-syntax__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dcv-space-2xs) var(--dcv-space-xs);
	min-height: 40px;
	padding-block: var(--dcv-space-2xs);
	cursor: pointer;
	list-style: none;
}

.dcv-syntax__summary::-webkit-details-marker { display: none; }
.dcv-syntax__summary .dcv-label { color: var(--dcv-cat-ink); }
.dcv-syntax__summary:hover .dcv-label { color: var(--dcv-ink); }
.dcv-syntax__hint { color: var(--dcv-muted); font-size: var(--dcv-text-xs); }
.dcv-syntax[open] .dcv-syntax__hint { display: none; }

.dcv-syntax__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--dcv-space-3xs) var(--dcv-space-md);
	margin: 0 0 var(--dcv-space-2xs);
}

.dcv-syntax__list > div {
	display: flex;
	align-items: baseline;
	gap: var(--dcv-space-2xs);
	font-size: var(--dcv-text-xs);
}

.dcv-syntax__list dt { margin: 0; }
.dcv-syntax__list dd { margin: 0; color: var(--dcv-muted); }

.dcv-syntax__list code {
	padding: 0.1em 0.35em;
	border-radius: var(--dcv-radius);
	background: var(--dcv-canvas);
	color: var(--dcv-ink);
	font-size: 0.95em;
	white-space: nowrap;
}

.dcv-syntax__foot {
	margin: 0 0 var(--dcv-space-2xs);
	max-width: 62ch;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-xs);
	line-height: 1.5;
}

/* --- one Reply ------------------------------------------------------------- */

.dcv-conversation__thread,
.dcv-reply__branch { margin: 0; padding: 0; list-style: none; }

.dcv-conversation__thread { margin-top: var(--dcv-space-sm); }
.dcv-conversation__thread > li { padding-top: var(--dcv-space-sm); border-top: 1px solid var(--dcv-line); }
.dcv-conversation__thread > li:first-child { border-top: 0; }

.dcv-reply {
	--dcv-reply-indent: clamp(1rem, 2vw, 1.6rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	scroll-margin-top: calc(var(--dcv-topbar-height) + 1rem);
}

/* The hairline down the left of a branch IS the control that folds it. */
.dcv-reply:has(> .dcv-reply__branch) { grid-template-columns: var(--dcv-reply-indent) minmax(0, 1fr); }
.dcv-reply > :not(.dcv-reply__spine):not(.dcv-reply__branch) { grid-column: 1 / -1; }
.dcv-reply__spine { grid-column: 1; }
.dcv-reply__branch { grid-column: 2; }

.dcv-reply[data-dcv-depth="4"],
.dcv-reply[data-dcv-depth="5"],
.dcv-reply[data-dcv-depth="6"] { --dcv-reply-indent: 0.7rem; }

.dcv-reply__spine {
	align-self: stretch;
	min-height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
}

.dcv-reply__spine::after {
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	margin-inline: auto;
	background: var(--dcv-line-strong);
	transition: background-color var(--dcv-duration-fast) var(--dcv-ease), width var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-reply__spine:hover::after,
.dcv-reply__spine:focus-visible::after { width: 2px; background: var(--dcv-cat-ink); }

.dcv-reply__unfold {
	grid-column: 1 / -1;
	justify-self: start;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--dcv-cat-ink);
	cursor: pointer;
	font: 620 var(--dcv-text-xs) / 1.3 var(--dcv-font-ui);
	text-decoration: underline;
	text-underline-offset: 0.32em;
}

.dcv-reply__unfold:hover { color: var(--dcv-ink); }
.dcv-reply__branch > li { margin-top: var(--dcv-space-sm); }
.dcv-reply__context { margin: 0 0 var(--dcv-space-3xs); color: var(--dcv-muted); font-size: var(--dcv-text-xs); }

.dcv-reply__by { display: flex; align-items: center; gap: var(--dcv-space-2xs); }

.dcv-reply__face {
	width: 1.85rem;
	height: 1.85rem;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	background: var(--dcv-canvas-sunk);
}

.dcv-reply__face--initial {
	display: grid;
	place-items: center;
	border: 1px solid var(--dcv-line-strong);
	background: transparent;
	color: var(--dcv-muted);
	font: 400 0.85rem / 1 var(--dcv-font-display);
}

.dcv-reply__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--dcv-space-2xs); min-width: 0; }

.dcv-reply__handle {
	color: var(--dcv-ink);
	font-family: var(--dcv-font-display);
	font-size: 0.98rem;
	text-decoration: none;
}

a.dcv-reply__handle:hover { color: var(--dcv-cat-ink); }

.dcv-reply__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4em;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-xs);
	font-variant-numeric: tabular-nums;
}

.dcv-reply__meta a { color: inherit; text-decoration: none; }
.dcv-reply__meta a:hover { color: var(--dcv-ink); }

.dcv-reply__body {
	max-width: 68ch;
	margin-top: var(--dcv-space-3xs);
	padding-inline-start: calc(1.85rem + var(--dcv-space-2xs));
	font-size: var(--dcv-text-base);
	line-height: 1.6;
}

.dcv-reply__body > * + * { margin-top: 0.7em; }
.dcv-reply__body :is(ul, ol) { padding-inline-start: 1.2em; }
.dcv-reply__body blockquote { margin-inline: 0; padding-inline-start: var(--dcv-space-sm); border-inline-start: 1px solid var(--dcv-cat-line); color: var(--dcv-muted); }
.dcv-reply__body pre { max-width: 100%; overflow-x: auto; padding: var(--dcv-space-sm); border-radius: var(--dcv-radius); background: var(--dcv-canvas-sunk); font-size: var(--dcv-text-sm); }
.dcv-reply__body code { font-size: 0.92em; }
.dcv-reply__body a { color: var(--dcv-cat-ink); text-decoration: underline; text-decoration-color: var(--dcv-cat-line); text-underline-offset: 0.22em; }

.dcv-reply--gone .dcv-reply__body,
.dcv-reply--held .dcv-reply__body { color: var(--dcv-muted); font-style: italic; }

.dcv-reply__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--dcv-space-sm);
	padding-inline-start: calc(1.85rem + var(--dcv-space-2xs));
}

.dcv-reply__act {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-xs);
	font-weight: 620;
	text-decoration: none;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-reply__act:hover { color: var(--dcv-cat-ink); }
.dcv-reply__act--quiet { font-weight: 400; letter-spacing: 0.02em; }

/* --- the vote pair --------------------------------------------------------- */

.dcv-vote { display: inline-flex; align-items: center; gap: 0.1rem; margin: 0; }

.dcv-vote__arrow {
	display: inline-grid;
	place-items: center;
	width: 28px;
	min-height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--dcv-radius);
	background: transparent;
	box-shadow: none;
	color: var(--dcv-muted);
	cursor: pointer;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-vote__arrow svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dcv-vote__arrow:hover { color: var(--dcv-ink); }
.dcv-vote__arrow[aria-pressed="true"] { color: var(--dcv-cat-ink); }
.dcv-vote__arrow[aria-pressed="true"] svg { stroke-width: 2.3; }

.dcv-vote__score {
	min-width: 1.4em;
	color: var(--dcv-ink);
	font-size: var(--dcv-text-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-vote--static .dcv-vote__score,
.dcv-vote__score[data-zero="true"] { color: var(--dcv-muted); font-weight: 620; }

/* The read-only tally: the voters' own chevron, not a control. */
.dcv-vote__arrow--static { width: auto; min-height: 0; cursor: default; }
.dcv-vote__arrow--static svg { width: 12px; height: 12px; }

/* The sentence is the figure's accessible meaning; the figure carries it on
   screen. */
.dcv-vote__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dcv-vote--static { position: relative; }

/* --- an inline form (edit, report, delete confirmation) --------------------- */

.dcv-inline {
	max-width: var(--dcv-measure);
	margin: var(--dcv-space-sm) 0 var(--dcv-space-xs);
	padding-inline-start: var(--dcv-space-sm);
	border-inline-start: 1px solid var(--dcv-cat-line);
}

.dcv-inline__label { display: block; margin-bottom: var(--dcv-space-2xs); }
.dcv-inline__label + .dcv-inline__label,
.dcv-inline__select + .dcv-inline__label { margin-top: var(--dcv-space-sm); }
.dcv-inline__warning { margin: 0; max-width: 60ch; color: var(--dcv-muted); font-size: var(--dcv-text-sm); line-height: 1.55; }
.dcv-inline--grave { border-inline-start-color: var(--dcv-line-strong); }

/* ===========================================================================
 * 4. Phones
 * ======================================================================== */

@media (max-width: 46rem) {
	.dcv-reply { --dcv-reply-indent: 0.7rem; }
	.dcv-reply__body,
	.dcv-reply__acts { padding-inline-start: 0; }
	.dcv-carnet__reactions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.dcv-carnet *,
	.dcv-conversation *,
	.dcv-community-page * { transition-duration: 0.01ms !important; }
}

/* ===========================================================================
 * 6. The identity page — sign in, join, verify, forget, reset
 *
 * The one surface on the site whose job is entirely persuasion: a reader
 * standing here is deciding whether an account is worth having. It therefore
 * spends the commissioned illustration at full bleed, which no other utility
 * page does.
 *
 * TWO PANELS, AND THE TYPE IS NEVER ON THE PICTURE. Form on the canvas beside
 * the Rail, illustration crossing the viewport's own right edge — the house
 * rule that photography touches the edge on the canvas side, and the house rule
 * that legibility never depends on what an image is doing behind the words.
 * The only type on the illustration is one caption line, and it sits on the
 * project's own bottom scrim token rather than on a bet about the picture.
 *
 * The panel stays on the CANVAS rather than taking olive: the Rail immediately
 * to its left is already olive in both themes, and a second olive plate beside
 * it would read as one undifferentiated dark mass instead of as a composition.
 * ======================================================================== */

.dcv-auth {
	display: grid;
	align-content: start;
	min-height: calc(100svh - var(--dcv-topbar-height));
}

/* --- the illustration ------------------------------------------------------ */

.dcv-auth__plate {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--dcv-olive-deep);
}

.dcv-auth__art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Not centred. The picture is a 4:5 portrait whose subject — the open
	 * carnet and the brass compass — sits low and slightly right; a centred
	 * crop in a tall column keeps the sky and loses both objects, which are the
	 * only two things in the frame that say what this page is for.
	 */
	object-position: 55% 66%;
}

.dcv-auth__caption {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: var(--dcv-space-xl) var(--dcv-gutter) var(--dcv-space-md);
	background: var(--dcv-scrim-bottom);
	color: var(--dcv-on-olive);
	font-family: var(--dcv-font-display);
	font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
	line-height: 1.25;
	text-wrap: balance;
}

.dcv-auth__caption .dcv-mark { color: var(--dcv-gold); }

/* --- the type -------------------------------------------------------------- */

.dcv-auth__panel {
	display: grid;
	align-content: center;
	padding: clamp(2.5rem, 6vw, 5rem) var(--dcv-gutter);
}

/* A sign-in form is a short column. Letting it run to the panel's full width
   turns four fields into a form that looks like paperwork. */
.dcv-auth__column { width: 100%; max-width: 26rem; }

.dcv-auth__kicker {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--dcv-cat-ink);
}

.dcv-auth__title {
	margin: var(--dcv-space-2xs) 0 0;
	max-width: 14ch;
	color: var(--dcv-ink);
	font-family: var(--dcv-font-display);
	font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
	font-weight: 400;
	line-height: var(--dcv-leading-title);
	letter-spacing: -0.024em;
	text-wrap: balance;
}

.dcv-auth__standfirst {
	margin: var(--dcv-space-sm) 0 0;
	max-width: 34ch;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-base);
	line-height: 1.6;
}

.dcv-auth__notice {
	margin: var(--dcv-space-md) 0 0;
	padding: var(--dcv-space-sm);
	border: 1px solid var(--dcv-line-strong);
	border-radius: var(--dcv-radius);
	background: var(--dcv-canvas-sunk);
	color: var(--dcv-ink);
	font-size: var(--dcv-text-sm);
	line-height: 1.55;
}

.dcv-auth__notice[data-tone="error"] { border-color: var(--dcv-cat-line); }

.dcv-auth__closed {
	margin: var(--dcv-space-md) 0 0;
	padding-block: var(--dcv-space-sm);
	border-block: 1px solid var(--dcv-line);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-sm);
}

.dcv-auth__form {
	display: grid;
	gap: var(--dcv-space-md);
	margin-top: var(--dcv-space-lg);
}

/* --- one field ------------------------------------------------------------- */

.dcv-field { display: grid; gap: var(--dcv-space-2xs); }

.dcv-field__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dcv-space-sm);
}

.dcv-field__label {
	color: var(--dcv-ink);
	font-size: var(--dcv-text-sm);
	font-weight: 650;
}

.dcv-field__aside {
	color: var(--dcv-cat-ink);
	font-size: var(--dcv-text-xs);
	text-decoration: underline;
	text-decoration-color: var(--dcv-cat-line);
	text-underline-offset: 0.3em;
}

.dcv-field__aside:hover { color: var(--dcv-ink); text-decoration-color: currentColor; }

/*
 * The hint is a sibling read through `aria-describedby`, not text swallowed
 * into the `<label>`: inside the label a screen reader announces the whole
 * paragraph as the field's name, every time the field takes focus.
 */
.dcv-field__hint {
	margin: 0;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-xs);
	line-height: 1.5;
}

.dcv-field__wrap { position: relative; display: grid; }

.dcv-field__input {
	width: 100%;
	min-height: 3rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--dcv-line-strong);
	border-radius: var(--dcv-radius);
	background: var(--dcv-canvas-sunk);
	color: var(--dcv-ink);
	font: 400 var(--dcv-text-base) / var(--dcv-leading-ui) var(--dcv-font-ui);
	transition: border-color var(--dcv-duration-fast) var(--dcv-ease), background-color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-field__wrap .dcv-field__input { padding-inline-end: 5.5rem; }
.dcv-field__input:hover { border-color: var(--dcv-muted); }

.dcv-field__input:focus {
	border-color: var(--dcv-cat-ink);
	background: var(--dcv-canvas);
	outline: var(--dcv-focus-width) solid var(--dcv-focus-ring);
	outline-offset: 1px;
}

.dcv-field__reveal {
	position: absolute;
	inset-inline-end: 1px;
	inset-block: 1px;
	display: inline-flex;
	align-items: center;
	padding-inline: 0.9rem;
	border: 0;
	border-radius: 0 var(--dcv-radius) var(--dcv-radius) 0;
	background: transparent;
	box-shadow: none;
	color: var(--dcv-muted);
	cursor: pointer;
	font: 620 var(--dcv-text-xs) / 1 var(--dcv-font-ui);
}

.dcv-field__reveal::before,
.dcv-field__reveal::after { content: none !important; display: none !important; }
.dcv-field__reveal:hover { color: var(--dcv-ink); }
.dcv-field__reveal:focus-visible { outline: var(--dcv-focus-width) solid var(--dcv-focus-ring); outline-offset: -2px; }

.dcv-check {
	display: flex;
	align-items: flex-start;
	gap: var(--dcv-space-xs);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-sm);
	line-height: 1.5;
}

.dcv-check input {
	width: 1rem;
	height: 1rem;
	margin-top: 0.16em;
	flex: none;
	accent-color: var(--dcv-accent-action);
}

/* The page has exactly one primary action, and it spans the column: there is
   nothing else on this screen competing to be pressed. */
.dcv-auth__submit { justify-content: center; width: 100%; }

.dcv-auth__foot {
	margin: var(--dcv-space-lg) 0 0;
	padding-top: var(--dcv-space-sm);
	border-top: 1px solid var(--dcv-line);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-sm);
}

.dcv-auth__foot a {
	color: var(--dcv-cat-ink);
	font-weight: 620;
	text-decoration: underline;
	text-decoration-color: var(--dcv-cat-line);
	text-underline-offset: 0.3em;
}

.dcv-auth__foot a:hover { color: var(--dcv-ink); text-decoration-color: currentColor; }

.dcv-auth .dcv-community__turnstile { margin: 0; }

/* --- the two compositions -------------------------------------------------- */

/*
 * Phone: the picture first, then the type beneath it — the same inversion the
 * Article opening makes, for the same reason. The band is sized for the type it
 * carries, not for the picture, so it cannot become a screen of nothing the day
 * the image is slow.
 */
@media (max-width: 62rem) {
	.dcv-auth__plate { min-height: clamp(13rem, 42vw, 20rem); }
	.dcv-auth__art { position: absolute; inset: 0; }
	.dcv-auth__panel { justify-items: start; }
}

/* Desktop: two columns, the illustration crossing the viewport's right edge. */
@media (min-width: 62rem) {
	.dcv-auth {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		align-content: stretch;
	}

	.dcv-auth__panel { grid-column: 1; justify-items: end; }
	.dcv-auth__column { margin-inline-end: clamp(0rem, 4vw, 4rem); }

	/* The canvas puts no padding of its own on this page, so the second column
	   already ends at the window. A negative margin here does not bleed, it
	   overflows — measured at 58px of horizontal scroll before it came out. */
	.dcv-auth__plate { grid-column: 2; grid-row: 1; }
}

@media (min-width: 90rem) {
	.dcv-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* ===========================================================================
 * 6. A member's public profile
 *
 * The one community surface a signed-out reader can land on. It shares the
 * account's canvas and its heading voice; everything specific to the private
 * space lives in section 7.
 * ======================================================================== */

.dcv-community-page {
	color: var(--dcv-ink);
	font-family: var(--dcv-font-ui);
}

.dcv-community-page :is(h1, h2, h3) {
	margin: 0;
	color: var(--dcv-ink);
	font-family: var(--dcv-font-display);
	font-style: normal;
	font-weight: 400;
	line-height: var(--dcv-leading-title);
}

.dcv-community-page h1 { font-size: var(--dcv-display-2); }
.dcv-community-page h2 { font-size: var(--dcv-display-3); }
.dcv-community-page h3 { font-size: var(--dcv-display-4); margin-top: var(--dcv-space-lg); }

.dcv-community-ledger {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	margin-block: var(--dcv-space-md) var(--dcv-space-lg);
	border-block: 1px solid var(--dcv-line);
}

.dcv-community-ledger div { padding: var(--dcv-space-sm) var(--dcv-space-xs); border-inline-end: 1px solid var(--dcv-line); }
.dcv-community-ledger div:last-child { border-inline-end: 0; }
.dcv-community-ledger dt { color: var(--dcv-muted); font-size: var(--dcv-text-xs); letter-spacing: var(--dcv-label-tracking); text-transform: uppercase; }
.dcv-community-ledger dd { margin: var(--dcv-space-2xs) 0 0; font-family: var(--dcv-font-display); font-size: var(--dcv-display-4); }

.dcv-community-list { margin-top: var(--dcv-space-lg); }
.dcv-community-list > article { padding-block: var(--dcv-space-sm); border-bottom: 1px solid var(--dcv-line); }
.dcv-community-list > article[data-unread="true"] { background: var(--dcv-cat-wash); }
.dcv-community-list p { max-width: 65ch; color: var(--dcv-muted); }

.dcv-community-profile__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--dcv-space-md); max-width: var(--dcv-breakout); }
.dcv-community-profile__head img,
.dcv-community-avatar { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; }
.dcv-community-avatar { display: grid; place-items: center; background: var(--dcv-olive); color: var(--dcv-gold); font: 400 var(--dcv-display-3) / 1 var(--dcv-font-display); }

.dcv-community-utility { display: flex; align-items: center; gap: var(--dcv-space-2xs); min-height: 40px; padding: var(--dcv-space-2xs); color: var(--dcv-on-olive-muted); text-decoration: none; }
.dcv-community-utility:hover,
.dcv-community-utility:focus-visible { color: var(--dcv-cat-glow); }
.dcv-rail__foot .dcv-community-utility { margin-bottom: var(--dcv-space-2xs); }

@media (max-width: 46rem) {
	.dcv-community-profile__head { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * 7. « Mon compte » — the member's private space
 *
 * WHY THIS IS NOT A DASHBOARD, IN CSS.
 *
 * The page opens on the olive band — the site's strongest transition, spent
 * once, with the whole panel between it and the olive footer — and it is the
 * only surface where a member's OWN public name is set in the display face.
 * Below it, two things and nothing else: a ruled index and one panel.
 *
 * The index borrows the Rail's grammar deliberately (`.dcv-ia__link`): a 2px
 * marker that GROWS out of the row's left edge under `transform`, the label
 * and the count taking the accent, and no filled block anywhere. That is the
 * project's own navigation idiom, and it is the reason eight sections read as
 * an index rather than as an admin menu or a tab strip.
 *
 * No number is set as a display figure. A count lives beside the name of the
 * section it opens, at the interface size, because a figure a reader does
 * nothing with has not earned a voice of its own — which is exactly what the
 * ledger of five stat tiles this replaces was doing.
 *
 * Nothing here is a card. Every group is made by a hairline, a micro-label and
 * type, which is the same sentence the Journal, the Hub and the Article make.
 * ======================================================================== */

.dcv-compte {
	/* One column width, so the index and its breakpoint cannot drift apart. */
	--dcv-compte-index: 15rem;
}

/* --- the identity: the member's own name, on flat olive --------------------- */

.dcv-compte__plate {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(var(--dcv-space-sm), 2.2vw, var(--dcv-space-md));
	padding-block: clamp(var(--dcv-space-sm), 2.2vw, var(--dcv-space-md));
}

/*
 * The portrait is a maker's mark, not an avatar chip: a hairline in the
 * ornament colour, and the olive-deep ground showing through when there is no
 * image, so the empty state is a plate rather than a hole.
 */
.dcv-compte__face {
	width: clamp(2.75rem, 5.2vw, 4.25rem);
	aspect-ratio: 1;
	border: 1px solid var(--dcv-on-olive-line);
	border-radius: 50%;
	background: var(--dcv-olive-deep);
	object-fit: cover;
}

.dcv-compte__face--initial {
	display: grid;
	place-items: center;
	color: var(--dcv-cat-glow);
	font-family: var(--dcv-font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.75rem);
	line-height: 1;
	user-select: none;
}

/*
 * The face is the door to the portrait form, which lives in Profil. The cue is
 * a SOLID disc of the ground the portrait already sits on — not a blur and not
 * a translucent film over a photograph, both of which the design language
 * refuses — and it answers focus exactly as it answers hover.
 */
.dcv-compte__portrait {
	position: relative;
	display: block;
	border-radius: 50%;
	text-decoration: none;
}

.dcv-compte__portrait-cue {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--dcv-olive-deep);
	color: var(--dcv-cat-glow);
	font-size: 0.625rem;
	font-weight: var(--dcv-label-weight);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-compte__portrait:hover .dcv-compte__portrait-cue,
.dcv-compte__portrait:focus-visible .dcv-compte__portrait-cue { opacity: 1; }
.dcv-compte__portrait:hover .dcv-compte__face { border-color: var(--dcv-cat-glow); }

/*
 * A wrapping flex row rather than a stack: the lines of type each take a full
 * line, and the facts and the actions — the two shortest things in the band —
 * share the last one instead of costing a row each. Order-independent on
 * purpose, because the biography line is only there when the member wrote one.
 */
.dcv-compte__type {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--dcv-space-lg);
	min-width: 0;
}

.dcv-compte__kicker,
.dcv-compte .dcv-compte__handle,
.dcv-compte__standfirst { flex: 0 0 100%; }

.dcv-compte__kicker {
	display: flex;
	align-items: center;
	gap: 0.55em;
}

/*
 * A handle runs to 24 characters plus its `@`, so this is clamped well under
 * the display-2 the page's own h1 rule would give it, and it is allowed to
 * break: a name that overflows its band is worse than a name set one step
 * smaller.
 */
.dcv-compte .dcv-compte__handle {
	margin: var(--dcv-space-3xs) 0 0;
	color: var(--dcv-on-olive);
	font-family: var(--dcv-font-display);
	font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.5rem);
	font-weight: 400;
	line-height: var(--dcv-leading-title);
	letter-spacing: -0.022em;
	overflow-wrap: break-word;
}

.dcv-compte__standfirst {
	margin: var(--dcv-space-2xs) 0 0;
	max-width: 62ch;
	color: var(--dcv-on-olive-muted);
	font-size: var(--dcv-text-base);
	line-height: 1.65;
	text-wrap: pretty;
}

/*
 * The three facts read as a masthead colophon: label and value on one
 * baseline, generously spaced, in the interface voice. Deliberately not ruled
 * into cells — a wrapped row would leave a rule hanging at the end of a line,
 * and three cells with figures in them is the stat-tile shape this page exists
 * to avoid.
 */
.dcv-compte__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcv-space-2xs) var(--dcv-space-md);
	margin: var(--dcv-space-sm) 0 0;
}

.dcv-compte__facts > div {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin: 0;
}

.dcv-compte__facts dt {
	color: var(--dcv-muted);
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-xs);
	font-weight: var(--dcv-label-weight);
	letter-spacing: var(--dcv-label-tracking);
	text-transform: uppercase;
}

.dcv-compte__facts dd {
	margin: 0;
	color: var(--dcv-ink);
	font-size: var(--dcv-text-sm);
}

.dcv-compte__identity .dcv-compte__facts dt { color: var(--dcv-on-olive-muted); }
.dcv-compte__identity .dcv-compte__facts dd { color: var(--dcv-on-olive); }

.dcv-compte__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dcv-space-2xs) var(--dcv-space-md);
	margin: var(--dcv-space-sm) 0 0;
	margin-inline-start: auto;
}

/* The band's action is short here: it stands beside the facts, not under a
   paragraph of its own. */
.dcv-compte__acts .dcv-action { padding: 0.55em 1.05em; }

/* Signing out is a real exit, never a button competing with the page's own
   action: it is set as a label, and it answers in the ornament colour. */
.dcv-compte__quit {
	color: var(--dcv-on-olive-muted);
	font-size: var(--dcv-text-xs);
	font-weight: var(--dcv-label-weight);
	letter-spacing: var(--dcv-label-tracking);
	text-transform: uppercase;
	text-decoration-line: underline;
	text-decoration-color: var(--dcv-on-olive-line);
	text-underline-offset: 0.42em;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-compte__quit:hover,
.dcv-compte__quit:focus-visible { color: var(--dcv-cat-glow); text-decoration-color: currentColor; }

/* --- the body -------------------------------------------------------------- */

/*
 * The minimum is what keeps the olive band off the olive footer on the two
 * sections that can legitimately render almost nothing.
 */
.dcv-compte__body {
	min-height: 26rem;
	padding-block: var(--dcv-space-lg) var(--dcv-space-section);
}

/*
 * What the last submission did. A ruled block on the sunk canvas, never a
 * coloured alert with a stripe down its side: the tone is carried by the rule
 * and by the ink, which is the only device on this site that means « attend to
 * this » without shouting.
 */
.dcv-compte__notice {
	margin: 0 0 var(--dcv-space-lg);
	padding: var(--dcv-space-sm) var(--dcv-space-md);
	border: 1px solid var(--dcv-line);
	border-radius: var(--dcv-radius);
	background: var(--dcv-canvas-sunk);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-sm);
	line-height: 1.65;
}

.dcv-compte__notice a {
	color: var(--dcv-cat-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--dcv-cat-line);
	text-underline-offset: 0.3em;
}

.dcv-compte__notice a:hover { text-decoration-color: currentColor; }

.dcv-compte__notice[data-tone="attention"],
.dcv-compte__notice[data-tone="warn"],
.dcv-compte__notice[data-tone="error"] {
	border-color: var(--dcv-cat-line);
	background: transparent;
	color: var(--dcv-ink);
}

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

.dcv-compte__columns {
	display: grid;
	gap: var(--dcv-space-xl);
}

/* --- the index ------------------------------------------------------------- */

.dcv-compte__index {
	display: grid;
	align-content: start;
	border-top: 1px solid var(--dcv-line);
}

.dcv-compte__index-title {
	margin: var(--dcv-space-md) 0 var(--dcv-space-3xs);
	color: var(--dcv-muted);
}

.dcv-compte__entry {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dcv-space-sm);
	padding: var(--dcv-space-xs) 0 var(--dcv-space-xs) var(--dcv-space-sm);
	border-bottom: 1px solid var(--dcv-line);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-sm);
	text-decoration: none;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

/*
 * The Rail's marker, on the canvas. It grows out of the row's edge under
 * `transform` rather than switching a border on, which is the difference
 * between an addressed row and a dashboard tell — and it is the active state
 * the visual language mandates: a marker plus accent, never a filled block.
 */
.dcv-compte__entry::before {
	content: "";
	position: absolute;
	inset: 20% auto 20% 0;
	width: 2px;
	border-radius: 2px;
	background: var(--dcv-cat-ink);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-compte__entry:hover,
.dcv-compte__entry:focus-visible { color: var(--dcv-ink); }
.dcv-compte__entry:hover::before { transform: scaleY(0.55); }

.dcv-compte__entry[aria-current="page"] { color: var(--dcv-cat-ink); font-weight: 650; }
.dcv-compte__entry[aria-current="page"]::before { transform: scaleY(1); }

.dcv-compte__entry-count {
	flex: none;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-xs);
	font-variant-numeric: tabular-nums;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-compte__entry:hover .dcv-compte__entry-count,
.dcv-compte__entry[aria-current="page"] .dcv-compte__entry-count { color: var(--dcv-cat-ink); }

/* A section name is never wrapped away from its count and never truncated. */
.dcv-compte__entry-label { min-width: 0; }

/* Unread is the one count that is a fact about right now rather than a total. */
.dcv-compte__entry-count[data-dcv-unread="true"] { color: var(--dcv-cat-ink); font-weight: 650; }

/* --- the panel ------------------------------------------------------------- */

.dcv-compte__panel { max-width: var(--dcv-breakout); }

/*
 * The head owns the step below it rather than the panel owning the step above
 * every child: a `> * + *` rule loses to the single-class rules that reset
 * `margin` on the lists further down this sheet, and the two hairlines then
 * stacked into one 2px rule the page never authored. Adjacent margins collapse,
 * so a block that states its own step still gets the larger of the two.
 */
.dcv-compte__panel-head {
	margin-bottom: var(--dcv-space-lg);
	padding-bottom: var(--dcv-space-md);
	border-bottom: 1px solid var(--dcv-line-strong);
}

.dcv-compte__panel-head .dcv-label { color: var(--dcv-cat-ink); }

.dcv-compte .dcv-compte__panel-head h2 {
	margin: var(--dcv-space-2xs) 0 0;
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
	letter-spacing: -0.018em;
	text-wrap: balance;
}

/* One sentence on what the section is for. It is the reason the section has a
   title at all, so it is set at reading size, not as fine print. */
.dcv-compte__panel-note {
	margin: var(--dcv-space-sm) 0 0;
	max-width: 58ch;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-base);
	line-height: 1.65;
	text-wrap: pretty;
}

.dcv-compte__aside .dcv-compte__panel-note { margin-top: var(--dcv-space-2xs); }

/* --- an empty section ------------------------------------------------------ */

/*
 * An empty carnet says what puts something in it and offers the one door out.
 * It is prose at reading size rather than a shrugging grey line, because this
 * is the surface a new member sees first and it is the whole page.
 */
.dcv-compte__empty {
	display: grid;
	justify-items: start;
	gap: var(--dcv-space-md);
	max-width: var(--dcv-measure);
	padding-block: var(--dcv-space-md) var(--dcv-space-lg);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-prose);
	line-height: var(--dcv-leading-prose);
	text-wrap: pretty;
}

.dcv-compte__empty p { margin: 0; max-width: 54ch; }

/* --- the first-run steps --------------------------------------------------- */

.dcv-compte__steps {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dcv-line);
	list-style: none;
}

.dcv-compte__steps > li {
	display: grid;
	justify-items: start;
	gap: var(--dcv-space-2xs);
	max-width: var(--dcv-measure);
	padding-block: var(--dcv-space-md);
	border-bottom: 1px solid var(--dcv-line);
}

.dcv-compte__steps .dcv-label { color: var(--dcv-cat-ink); }

.dcv-compte .dcv-compte__steps h3 {
	margin: 0;
	font-size: var(--dcv-display-4);
}

.dcv-compte__steps p:not(.dcv-label) {
	margin: 0;
	max-width: 56ch;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-base);
	line-height: 1.65;
}

/* --- the quiet text link, wherever the panel needs one --------------------- */

.dcv-compte__steps a,
.dcv-compte__more a,
.dcv-compte__row-meta a {
	color: var(--dcv-cat-ink);
	font-size: var(--dcv-text-xs);
	font-weight: var(--dcv-label-weight);
	letter-spacing: var(--dcv-label-tracking);
	text-transform: uppercase;
	text-decoration-line: underline;
	text-decoration-color: var(--dcv-cat-line);
	text-underline-offset: 0.4em;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-compte__steps a:hover,
.dcv-compte__more a:hover,
.dcv-compte__row-meta a:hover { color: var(--dcv-ink); text-decoration-color: currentColor; }

.dcv-compte__steps a { margin-top: var(--dcv-space-2xs); }
.dcv-compte__more { margin: var(--dcv-space-md) 0 0; }

/* --- the overview blocks --------------------------------------------------- */

.dcv-compte__block + .dcv-compte__block { margin-top: var(--dcv-space-section); }

.dcv-compte .dcv-compte__block h3 {
	margin: 0 0 var(--dcv-space-sm);
	font-size: var(--dcv-display-3);
}

/* --- ruled rows: contributions, and the inbox ------------------------------ */

.dcv-compte__rows {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dcv-line);
	list-style: none;
}

.dcv-compte__row {
	position: relative;
	display: grid;
	gap: var(--dcv-space-3xs);
	padding: var(--dcv-space-sm) var(--dcv-space-sm) var(--dcv-space-sm) var(--dcv-space-sm);
	border-bottom: 1px solid var(--dcv-line);
	transition: background-color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-compte__row:hover { background-color: var(--dcv-canvas-sunk); }

/* Unread is a leading mark, not a coloured plate: one dot on the row's
   baseline, in the accent, which is the smallest thing that can carry it. */
.dcv-compte__row[data-unread="true"]::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: calc(var(--dcv-space-sm) + 0.42em);
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--dcv-cat-ink);
}

.dcv-compte__row-label { color: var(--dcv-muted); }

.dcv-compte__row-title {
	margin: 0;
	color: var(--dcv-ink);
	font-size: var(--dcv-text-base);
	font-weight: 620;
}

.dcv-compte__row-text {
	margin: 0;
	max-width: 62ch;
	color: var(--dcv-ink);
	font-size: var(--dcv-text-base);
	line-height: 1.6;
}

.dcv-compte__row-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dcv-space-2xs) var(--dcv-space-md);
	margin: var(--dcv-space-2xs) 0 0;
	color: var(--dcv-muted);
	font-size: var(--dcv-text-xs);
}

/* The form is one control in the meta row, not a block of its own. */
.dcv-compte__row-meta form { display: contents; }

.dcv-compte__score {
	color: var(--dcv-ink);
	font-variant-numeric: tabular-nums;
}

/* --- what the member reacted to -------------------------------------------- */

.dcv-compte__marks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dcv-line);
	list-style: none;
}

.dcv-compte__marks > li {
	display: grid;
	gap: var(--dcv-space-3xs);
	padding: var(--dcv-space-sm) var(--dcv-space-md) var(--dcv-space-sm) 0;
	border-bottom: 1px solid var(--dcv-line);
}

.dcv-compte__marks .dcv-label { color: var(--dcv-cat-ink); }

.dcv-compte__marks a {
	color: var(--dcv-ink);
	font-family: var(--dcv-font-display);
	font-size: var(--dcv-display-4);
	line-height: var(--dcv-leading-title);
	text-wrap: balance;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-compte__marks a:hover { color: var(--dcv-cat-ink); }

/* --- the forms ------------------------------------------------------------- */

.dcv-compte__form {
	display: grid;
	gap: var(--dcv-space-md);
	max-width: var(--dcv-measure);
	margin-top: var(--dcv-space-md);
}

.dcv-compte__form .dcv-action { justify-self: start; }

/*
 * THE ANTI-ROBOT WIDGET RESERVES NOTHING UNTIL IT IS REAL.
 *
 * Its container holds 73px whether or not it has mounted, and the loader only
 * mounts it on first contact with its own form — so the Sécurité page, which
 * carries two of them, showed a screen of nothing between a field and its
 * button. The reservation guards against a layout shift, and it is not needed
 * here for the reason `newsletter.css` already gives on the same widget: the
 * shift happens when the reader focuses the first field, not when they reach
 * for the button.
 */
.dcv-compte__form .tsg-field { margin: 0; max-width: 100%; }
.dcv-compte__form .tsg-field--deferred .tsg-widget { min-height: 0; max-width: 100%; }
.dcv-compte__form .tsg-widget:not(:empty) { margin-top: var(--dcv-space-2xs); }

.dcv-compte__textarea {
	min-height: 7.5rem;
	line-height: 1.6;
	resize: vertical;
}

.dcv-compte__file {
	padding: 0.72rem 0.9rem;
	font-size: var(--dcv-text-sm);
	line-height: 1.5;
}

.dcv-compte__file::file-selector-button {
	margin-inline-end: var(--dcv-space-sm);
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--dcv-muted);
	border-radius: var(--dcv-radius);
	background: transparent;
	color: var(--dcv-ink);
	cursor: pointer;
	font: var(--dcv-label-weight) var(--dcv-text-xs) / 1 var(--dcv-font-ui);
	letter-spacing: var(--dcv-label-tracking);
	text-transform: uppercase;
}

/*
 * `border: 0` on purpose: with a border the legend is punched into it, and the
 * checkbox set below reads as a boxed control panel. A rule above the legend
 * groups it the way every other group on this page is grouped.
 */
.dcv-compte__fieldset {
	margin: 0;
	padding: var(--dcv-space-md) 0 0;
	border: 0;
	border-top: 1px solid var(--dcv-line);
}

/*
 * The rule runs out of the group's title, because every engine cuts a
 * fieldset's border where the legend sits — which is the same hairline-and-type
 * grammar the rest of the page uses, arrived at for free.
 *
 * `margin-inline` is reset because Blocksy out-dents every legend by 15px, and
 * a title that hangs left of its own column is the only thing on this page that
 * would not sit on the form's edge. Two classes, because the bridge sheet
 * resolves after this one.
 */
.dcv-compte .dcv-compte__fieldset legend {
	margin-inline: 0;
	padding: 0;
	color: var(--dcv-ink);
	font-size: var(--dcv-text-sm);
	font-weight: 650;
}

.dcv-compte__fieldset .dcv-check { margin-top: var(--dcv-space-xs); }

/* --- a sub-section inside a panel ------------------------------------------ */

.dcv-compte__aside {
	margin-top: var(--dcv-space-section);
	padding-top: var(--dcv-space-md);
	border-top: 1px solid var(--dcv-line);
}

.dcv-compte .dcv-compte__aside h3 {
	margin: 0;
	font-size: var(--dcv-display-4);
}

/* The one action that destroys something states it with its rule, not with a
   red plate: the confirmation in front of it is what protects the member. */
.dcv-compte__aside--grave { border-top-color: var(--dcv-cat-line); }
.dcv-compte .dcv-compte__aside--grave h3 { color: var(--dcv-cat-ink); }

.dcv-compte__avatar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--dcv-space-md);
	margin-top: var(--dcv-space-md);
}

.dcv-compte__avatar img {
	width: 5.5rem;
	aspect-ratio: 1;
	border: 1px solid var(--dcv-line-strong);
	border-radius: 50%;
	object-fit: cover;
}

.dcv-compte__avatar .dcv-compte__face--initial { width: 5.5rem; font-size: 2rem; }
.dcv-compte__avatar-forms { display: grid; gap: var(--dcv-space-md); min-width: 0; }
.dcv-compte__avatar-forms .dcv-compte__form { margin-top: 0; }

.dcv-compte__prose {
	max-width: var(--dcv-measure);
	margin-top: var(--dcv-space-md);
}

.dcv-compte__prose p {
	margin: 0 0 var(--dcv-space-sm);
	color: var(--dcv-muted);
	font-size: var(--dcv-text-base);
	line-height: 1.7;
	text-wrap: pretty;
}

.dcv-compte__prose p:last-child { margin-bottom: 0; }

/* --- the inline submit ----------------------------------------------------- */

/*
 * Blocksy claims every `[type="submit"]` on the page and paints a plate, a
 * shadow layer in the element's own `::before` and a 3px lift on hover; and
 * `blocksy-bridge.css` resolves after this sheet, so an equal-specificity rule
 * here would lose on order. Two classes win it back without `!important`,
 * exactly as the reaction buttons in section 1 do.
 */
.dcv-compte .dcv-compte__inline,
.dcv-compte .dcv-compte__inline:hover,
.dcv-compte .dcv-compte__inline:focus-visible,
.dcv-compte .dcv-compte__inline:active {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	transform: none;
}

.dcv-compte__inline::before,
.dcv-compte__inline::after { content: none !important; display: none !important; }

.dcv-compte .dcv-compte__inline {
	color: var(--dcv-muted);
	cursor: pointer;
	font: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--dcv-line-strong);
	text-underline-offset: 0.3em;
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-compte .dcv-compte__inline:hover { color: var(--dcv-ink); text-decoration-color: currentColor; }
.dcv-compte .dcv-compte__inline--grave:hover { color: var(--dcv-cat-ink); }

.dcv-compte__inline:focus-visible {
	outline: var(--dcv-focus-width) solid var(--dcv-focus-ring);
	outline-offset: var(--dcv-focus-offset);
}

/* --- the ruled facts, on the canvas ---------------------------------------- */

/*
 * No rule of its own at either end: the panel's head closes with one directly
 * above it and the sub-section below opens with one, and a second hairline
 * 44px from the first, with nothing between them, is a rule the page did not
 * mean to draw.
 */
.dcv-compte__facts--ruled {
	display: grid;
	margin: var(--dcv-space-md) 0 0;
}

.dcv-compte__facts--ruled > div {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	align-items: baseline;
	gap: var(--dcv-space-3xs) var(--dcv-space-md);
	padding-block: var(--dcv-space-sm);
	border-bottom: 1px solid var(--dcv-line);
}

.dcv-compte__facts--ruled > div:last-child { border-bottom: 0; }
.dcv-compte__facts--ruled dd { overflow-wrap: break-word; }

/* --- desktop: the index becomes a margin column ---------------------------- */

@media (min-width: 62rem) {
	.dcv-compte__columns {
		grid-template-columns: var(--dcv-compte-index) minmax(0, 1fr);
		gap: clamp(var(--dcv-space-lg), 5vw, var(--dcv-space-xl));
		align-items: start;
	}

	/* The panel scrolls; the index stays where the reader left it. */
	.dcv-compte__index {
		position: sticky;
		top: var(--dcv-space-lg);
	}
}

/* --- below that: the index is a ruled block above the panel ----------------- */

@media (max-width: 61.999rem) {
	.dcv-compte__index { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
	.dcv-compte__index-title { grid-column: 1 / -1; }
	.dcv-compte__entry { padding-inline-end: var(--dcv-space-sm); }
}

@media (max-width: 46rem) {
	.dcv-compte__plate {
		grid-template-columns: auto;
		gap: var(--dcv-space-sm);
	}

	.dcv-compte__facts { gap: var(--dcv-space-2xs) var(--dcv-space-md); }
	.dcv-compte__acts { margin-inline-start: 0; }
	.dcv-compte__facts--ruled > div { grid-template-columns: minmax(0, 1fr); }
	.dcv-compte__avatar { grid-template-columns: minmax(0, 1fr); }
	.dcv-compte__body { padding-block: var(--dcv-space-lg) var(--dcv-space-section); }
}