@charset "UTF-8";
/*
 * NINA NOIR — share this story.
 * ============================================================================
 *
 * A row of quiet editorial controls, not a social plugin. It borrows the
 * system's own tokens, so it inherits the palette and the type scale rather
 * than declaring a second set: ink on ivory, hairline rules, wine only on
 * hover and focus. No gradients, no shadows, no pills, no brand colours, and
 * nothing fixed to the viewport.
 *
 * Loaded on single articles only, where the component exists.
 */

/*
 * The tint is pulled out past the reading measure by exactly the padding it
 * adds back, so the label and the controls sit on the same left edge as the
 * body copy and the "Filed in" line above. Everything in an article aligns to
 * the measure; a band that indents its own contents breaks that.
 *
 * The pull is --s-4 (max 20.8px) against a --gutter that never falls below
 * 18.4px and grows faster, so the band can never reach the viewport edge.
 */
.n-share {
	margin-block: var(--s-6) var(--s-5);
	margin-inline: calc(var(--s-4) * -1);
	padding-block: var(--s-5);
	padding-inline: var(--s-4);
	border-block: 1px solid var(--n-rule);
	background: var(--n-paper-warm);
}

.n-share__label {
	margin-bottom: var(--s-4);
}

.n-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.n-share__item {
	margin: 0;
}

/*
 * A text control with a line icon, not a button object: no fill, no border,
 * no radius. The 44px floor is the touch target, met with padding rather
 * than a box, so nothing looks padded on a desktop row.
 */
.n-share__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	padding-block: var(--s-2);
	border: 0;
	background: none;
	font-family: var(--n-util);
	font-size: var(--t-small);
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--n-ink);
	text-decoration: none;
	cursor: pointer;
	transition: color .18s ease;
}

.n-share__btn:hover,
.n-share__btn:focus-visible {
	color: var(--n-wine);
}

/* The label is the accessible name; the icon is decoration beside it. */
.n-share__txt {
	position: relative;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--n-rule-firm);
	transition: border-color .18s ease;
}

.n-share__btn:hover .n-share__txt,
.n-share__btn:focus-visible .n-share__txt {
	border-bottom-color: var(--n-wine);
}

.n-share__btn .n-sicon {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.n-share__ico {
	display: inline-flex;
}

.n-share__ico[hidden] {
	display: none;
}

.n-share__btn.is-done {
	color: var(--n-wine);
}

.n-share__btn.is-done .n-share__txt {
	border-bottom-color: var(--n-wine);
}

/*
 * The live region. Empty most of the time, so it must not reserve a gap or
 * the row's rhythm changes every time something is announced.
 */
.n-share__status {
	font-family: var(--n-util);
	font-size: var(--t-small);
	color: var(--n-ink-soft);
	margin: 0;
	line-height: 1.5;
}

.n-share__status:not(:empty) {
	margin-top: var(--s-3);
}

/*
 * Phones. Left to wrap, four controls break 3 + 1 and strand the last one
 * against a wide empty gap, which reads as an accident. Two columns put them
 * in a deliberate block, keep every label visible, and hold the 44px target.
 */
@media (max-width: 30rem) {
	.n-share__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-1) var(--s-4);
	}

	.n-share__btn {
		font-size: var(--t-micro);
		letter-spacing: .06em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.n-share__btn,
	.n-share__txt {
		transition: none;
	}
}