/*
 * Súkromie -- the GDPR section of the account. Ticket 25.
 *
 * Scoped entirely under `.sp-privacy`. Nothing here restyles `.sp-account__*`,
 * `.sp-btn` or any other shared component: five agents are editing this theme
 * at once, and a panel that reaches into a shared rule is a merge conflict with
 * somebody's Friday.
 *
 * Every colour, size, border and duration below is a token
 * `assets/css/tokens.css` already names. No new token, no radius (the theme has
 * none), no `@media` -- the two cards are `repeat(auto-fit, minmax(…, 1fr))`
 * and the type is fixed from the existing scale, so the section reflows by
 * itself at any width.
 *
 * THE ONE DELIBERATE PIECE OF COLOUR
 *
 * The erasure card carries the red left accent -- the same device the loyalty
 * panel uses for a statement of a rule -- and the export card does not. That
 * asymmetry is the whole visual argument of the section: one of these two
 * buttons is reversible and the other is not, and the page should say so
 * before it is read. It is never the *only* signal -- the heading, the list
 * of what survives and the warning sentence all say it in words -- because a
 * red stripe means nothing to somebody who cannot see it.
 */

/* ================================================================ holdings */

.sp-privacy__holds {
	margin-block: var(--sp-9) 0;
	padding: var(--sp-7);
	border: var(--sp-border);
	background: var(--sp-surface);
}

.sp-privacy__subtitle {
	margin: 0 0 var(--sp-4);
	font-family: var(--sp-font-display);
	font-size: var(--sp-fs-md-lg);
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: var(--sp-ls-btn);
	color: var(--sp-text);
}

.sp-privacy__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sp-2);
}

/*
 * A dash rather than a bullet glyph, drawn as a border so it inherits the muted
 * text colour and never needs a font that has the character.
 */
.sp-privacy__list-item {
	position: relative;
	padding-inline-start: var(--sp-5);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-78);
}

.sp-privacy__list-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.7em;
	width: 8px;
	border-block-start: 1px solid var(--sp-text-40);
}

.sp-privacy__note {
	margin: var(--sp-5) 0 0;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-55);
}

.sp-privacy__anonymised {
	margin: 0 0 var(--sp-5);
	padding-inline-start: var(--sp-5);
	border-inline-start: var(--sp-border-accent);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-82);
}

/* =================================================================== cards */

.sp-privacy__actions {
	margin-block-start: var(--sp-11);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--sp-grid-gap);
	align-items: start;
}

.sp-privacy__card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-9);
	border: var(--sp-border);
	background: var(--sp-surface);
}

/* The irreversible one. See the note at the top of this file. */
.sp-privacy__card--danger {
	border-inline-start: var(--sp-border-accent);
	background: var(--sp-bg-deep);
}

.sp-privacy__card-title {
	margin: 0;
	font-family: var(--sp-font-display);
	font-size: var(--sp-fs-lg);
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: var(--sp-ls-btn);
	color: var(--sp-text);
}

.sp-privacy__card-text {
	margin: 0;
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-78);
}

.sp-privacy__keeps-title {
	margin: var(--sp-2) 0 0;
	font-size: var(--sp-fs-micro);
	text-transform: uppercase;
	letter-spacing: var(--sp-ls-label);
	color: var(--sp-text-45);
}

.sp-privacy__list--keeps .sp-privacy__list-item {
	font-size: var(--sp-fs-xs);
	color: var(--sp-text-60);
}

.sp-privacy__warning {
	margin: 0;
	font-size: var(--sp-fs-sm);
	font-weight: 600;
	color: var(--sp-red-sublabel);
}

/*
 * Where a request has got to. A live region in the markup, so somebody using a
 * screen reader hears the state change after the redirect rather than having to
 * go looking for it.
 */
.sp-privacy__state {
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--sp-line-14);
	background: var(--sp-tint-white-3);
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-82);
}

.sp-privacy__form {
	margin: 0;
	margin-block-start: auto;
}

.sp-privacy__form .sp-btn {
	width: 100%;
	justify-content: center;
}

/* ================================================================== notice */

.sp-privacy__notice {
	margin-block-end: var(--sp-7);
}