.settings-container {
	/* The action buttons are the tallest thing a row can hold, so they set the
	   row height. Shared, so the two cannot drift apart. */
	--settings-action-size: 1.85rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	margin: var(--space-lg) auto var(--space-2xl);
	max-width: 60ch;
	padding: 0 var(--space-md);
	width: 100%;
}

.settings-section {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg);
}

.settings-section-header {
	align-items: flex-start;
	display: flex;
	gap: var(--space-md);
	justify-content: space-between;
}

.settings-section-heading {
	/* Small uppercase label rather than a display heading, matching the field
     labels in the item modal and the planner's column headers. */
	h2 {
		color: var(--color-text);
		font-family: "Hanken Grotesk", sans-serif;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		margin: 0;
		text-transform: uppercase;
	}
}

.settings-section-hint {
	color: var(--color-text-subtle);
	font-size: 0.85rem;
	margin: 0.35em 0 0;
}

/* Add: quiet until you reach for it, like every other add in the app. */
.settings-add {
	align-items: center;
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	display: flex;
	flex-shrink: 0;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	gap: 0.4em;
	letter-spacing: -0.01em;
	padding: 0.45em 0.9em;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;

	svg {
		height: 0.8rem;
		width: 0.8rem;
	}

	&:hover {
		background: var(--color-accent-tint);
		color: var(--color-accent);
	}

	&:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}
}

/* Rows -------------------------------------------------------------------- */

.settings-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.settings-row {
	align-items: center;
	display: flex;
	gap: 0.75em;
	margin: 0 calc(var(--space-sm) * -1);
	/* Every row the same height, whether or not it happens to carry a delete
	   button, a badge or an access select. The owner's row has no delete, and
	   was coming out shorter than the rest. */
	min-height: calc(var(--settings-action-size) + 1.1em);
	padding: 0.55em var(--space-sm);
	position: relative;
	transition: background-color 0.15s ease;

	/* Hairlines between rows, not around them. */
	& + .settings-row {
		box-shadow: inset 0 1px 0 var(--color-surface-alt);
	}

	/* Only rows that go somewhere light up. */
	&:has(.settings-row-link):hover {
		background: var(--color-surface-alt);
		box-shadow: none;
	}

	&:has(.settings-row-link):hover + .settings-row {
		box-shadow: none;
	}
}

/* The row itself is the edit action; the overlay makes all of it clickable
   without wrapping the delete form in an anchor. */
.settings-row-link {
	/* Baseline, so the smaller meta text sits on the same line as the label
     rather than being centred against it. */
	align-items: baseline;
	/* Takes the free space, so whatever follows — the badge, the access
	   select, the actions — sits against the right edge of the row. */
	flex: 1;
	color: inherit;
	display: flex;
	gap: 0.75em;
	min-width: 0;
	text-decoration: none;

	/* Neither of these has text on the baseline, so they keep their centring. */
	.settings-row-dot,
	.settings-row-monogram {
		align-self: center;
	}

	&::after {
		content: "";
		inset: 0;
		position: absolute;
	}

	&:focus-visible {
		outline: none;

		&::after {
			border-radius: var(--radius-md);
			outline: 2px solid var(--color-accent);
			outline-offset: -2px;
		}
	}
}

.settings-row-dot {
	background: var(--dot, var(--color-text-subtle));
	border-radius: 50%;
	flex-shrink: 0;
	height: 0.7em;
	width: 0.7em;
}

.settings-row-monogram {
	align-items: center;
	background: var(--color-surface-alt);
	border-radius: 50%;
	color: var(--color-text-muted);
	display: flex;
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 700;
	height: 1.9em;
	justify-content: center;
	letter-spacing: 0.02em;
	width: 1.9em;
}

.settings-row-label {
	color: var(--color-text);
	font-weight: 500;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.settings-row-meta {
	color: var(--color-text-subtle);
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 500;
	margin-left: auto;
	white-space: nowrap;
}

/* The control is the whole form: changing it saves. */
.settings-row-role {
	margin-left: auto;
	position: relative;
	z-index: 1;

	select {
		appearance: none;
		background: transparent
			url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736c7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")
			no-repeat right 0.2em center / 0.8em;
		border: none;
		border-radius: var(--radius-sm);
		color: var(--color-text-muted);
		cursor: pointer;
		font-family: "Hanken Grotesk", sans-serif;
		font-size: 0.75rem;
		font-weight: 600;
		padding: 0.25em 1.4em 0.25em 0.4em;

		&:hover {
			background-color: var(--color-surface-alt);
			color: var(--color-text);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent);
			outline-offset: 1px;
		}
	}
}

.settings-row-badge {
	margin-left: auto;
	position: relative;
	z-index: 1;
	background: var(--color-accent-tint);
	border-radius: var(--radius-pill);
	color: var(--color-accent);
	flex-shrink: 0;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.25em 0.7em;
	text-transform: uppercase;
}

.settings-row-actions {
	align-items: center;
	display: flex;
	gap: 0.15em;
	margin-left: auto;
	position: relative;
	z-index: 1;

	/* button_to wraps each button in a form. */
	form {
		display: flex;
		margin: 0;
		padding: 0;
	}
}

.settings-row-action {
	align-items: center;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--color-text-subtle);
	cursor: pointer;
	display: flex;
	height: var(--settings-action-size);
	justify-content: center;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
	width: var(--settings-action-size);

	svg {
		height: 0.85rem;
		width: 0.85rem;
	}

	&:hover {
		background: var(--color-accent-tint);
		color: var(--color-accent);
	}

	&:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}
}

.settings-row-action--destroy:hover {
	background: color-mix(in srgb, var(--color-destroy) 12%, transparent);
	color: var(--color-destroy);
}

.settings-empty {
	color: var(--color-text-subtle);
	font-size: 0.9rem;
	margin: 0;
	padding: 0.5em 0;
}

/* Small viewports ---------------------------------------------------------- */

/* A feed that couldn't be read says so where it says everything else, in the
   row's own meta line, rather than being hidden behind a click. */
.settings-row-meta--error {
	color: var(--color-destroy);
}

/* --- Calendars -----------------------------------------------------------
   A calendar carries more than a label and a word of meta: where its events go,
   how many there are, how fresh they are, and sometimes why the last look
   failed. Stacked, so none of that has to fight for the one line the column and
   person rows get by with. */

/* Everything in a stacked row hangs from the top; the badge and the actions
   would otherwise float to the middle of three lines of text. */
.settings-row:has(.settings-row-link--stacked) {
	align-items: flex-start;

	/* A pill and a button are not the same height, so top-aligning them was
	   enough to line up their boxes and not their contents — the badge rode six
	   pixels above the icons. Giving both the action height and centring inside
	   it makes the cluster read as the single line it looks like. */
	.settings-row-badge,
	.settings-row-actions {
		min-height: var(--settings-action-size);
	}

	.settings-row-badge {
		align-items: center;
		display: inline-flex;
	}

	/* Room for both actions whether or not this row has both — only a
	   subscription can be re-synced, and without this the badge on an imported
	   row sits a button further right than the ones above it. */
	.settings-row-actions {
		justify-content: flex-end;
		min-width: calc(var(--settings-action-size) * 2 + 0.15em);
	}
}

.settings-row-link--stacked {
	align-items: flex-start;
	gap: 0.6em;

	/* Level with the name rather than centred on the whole block, so it stays
	   put however many lines end up underneath it. */
	.settings-row-dot {
		align-self: flex-start;
		margin-top: 0.45em;
	}
}

.settings-row-text {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	min-width: 0;

	/* Free to wrap and to sit under the name, rather than pinned to the right
	   edge on one nowrap line. */
	.settings-row-meta {
		flex-shrink: 1;
		margin-left: 0;
		white-space: normal;
	}
}

/* Which calendar this came from, when the name doesn't already say it. */
.settings-row-source {
	color: var(--color-text-subtle);
	font-size: 0.7rem;
	letter-spacing: 0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Subscribed or imported once is a standing fact about the row, not a status
   worth the accent the owner badge earns. */
.settings-row-badge--quiet {
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
}

/* The same fact as the badge, folded into the meta line. Only one of the two is
   ever in the document: see the narrow-width block below. */
.settings-row-mode {
	display: none;

	&::after {
		content: " · ";
	}
}

/* The container tops out at 60ch, so it only starts shrinking below ~512px —
   that is where a row stops fitting on one line, not any round number. A
   person's row wants about 520px to lay out monogram, name, email, access and
   delete side by side, and a phone offers 211–321px. So below here the row
   stops being a line and becomes a block. */
@media (max-width: 34rem) {
	.settings-container {
		/* Fingers, not pointers: the delete target grows, and the row minimum
		   grows with it since the two are already tied together. */
		--settings-action-size: 2.5rem;
		padding: 0 var(--space-sm);
	}

	.settings-section {
		gap: var(--space-sm);
		/* Reclaims 24px of row width, which is most of a truncated name. */
		padding: var(--space-md);
	}

	/* The add button was squeezing the hint into a narrow column beside it. */
	.settings-section-header {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.settings-add {
		align-self: flex-start;
		/* No hover on a touch screen to reveal it, so it carries a resting fill
		   instead — quiet, but visibly a control. */
		background: var(--color-surface-alt);
		padding: 0.6em 1em;
	}

	.settings-row {
		flex-wrap: wrap;
		row-gap: 0.5em;
	}

	/* Name over email, both against the same left edge, with the monogram
	   spanning the pair. The email can then take a whole line instead of
	   crowding the name off its own row. */
	.settings-row-link {
		align-items: center;
		column-gap: 0.7em;
		display: grid;
		grid-template-areas:
			"avatar label"
			"avatar meta";
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 0.1em;
	}

	.settings-row-dot,
	.settings-row-monogram {
		grid-area: avatar;
	}

	.settings-row-label {
		grid-area: label;
	}

	.settings-row-meta {
		grid-area: meta;
		/* Was pinned right by an auto margin and refused to shrink; here it is a
		   line of its own and long addresses trail off rather than push. */
		margin-left: 0;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* A calendar row already stacks its own text, so it opts out of the grid the
	   rows above use — it has no separate meta cell to place things into. */
	.settings-row-link--stacked {
		display: flex;
	}

	/* On a phone the badge and the reserved second action were taking 162px of a
	   320px row between them, squeezing the name into 60px and pushing the meta
	   to five lines. The badge goes; the fact it carried moves into the meta
	   line, which was already wrapping. Nothing needs aligning against it any
	   more either, so the actions size to their contents — the last icon sits on
	   the right edge whether or not there are two of them. */
	.settings-row:has(.settings-row-link--stacked) {
		/* Matched through :has, like the rule it overrides — a bare
		   .settings-row-badge--quiet loses to it on specificity. */
		.settings-row-badge {
			display: none;
		}

		.settings-row-actions {
			min-width: 0;
		}
	}

	.settings-row-mode {
		display: inline;
	}

	/* Ordered after the actions so it wraps onto its own line, where it can be a
	   real control rather than 0.75rem of text wedged against a bin icon. */
	.settings-row-role {
		flex-basis: 100%;
		margin-left: 0;
		order: 1;

		select {
			background-color: var(--color-surface-alt);
			background-position: right 0.7em center;
			font-size: 0.8rem;
			padding: 0.55em 2em 0.55em 0.8em;
			width: 100%;
		}
	}
}