/* ============================================================
   SETTINGS

   Structure and colour both, because every colour in here is a token
   name rather than a value - which is the whole point of the page.

   David authorized 2026-08-31: Phase 2 of the settings work.
   ============================================================ */

/* ---------------- THE TWO COLUMNS ---------------- */

.settings {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}

@media screen and (min-width: 700px) {
	.settings {
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 28px;
	}
}

.settings-rail {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
}

@media screen and (min-width: 700px) {
	.settings-rail {
		flex-direction: column;
		position: sticky;
		top: 8px;
	}
}

.rail-item {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	text-align: left;
	padding: 8px 12px;
	cursor: pointer;
	background: transparent;
	color: var(--ink-muted);
	/* The bar on the left is what marks the current topic, so it is
	   declared transparent here rather than only on the selected item -
	   otherwise selecting one would shift the others sideways. */
	border: none;
	border-left: 3px solid transparent;
	border-radius: 0;
}

.rail-item:hover {
	background: var(--accent-soft);
	color: var(--accent);
}

.rail-item[aria-current="page"] {
	color: var(--accent);
	border-left-color: var(--accent);
	background: var(--accent-soft);
	font-weight: 700;
}


/* ---------------- PANELS ---------------- */

.settings-body {
	min-width: 0;
}

.settings-panel {
	display: none;
}

.settings-panel.is-showing {
	display: block;
}

.panel-title {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	letter-spacing: 3px;
	color: var(--accent);
	border-bottom: 2px solid var(--accent);
	padding-bottom: 6px;
	margin-bottom: 10px;
}

.panel-note {
	color: var(--ink-muted);
	font-size: 13px;
	max-width: 62ch;
}

.field-title {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 22px 0 8px;
}

/* Says what is not built yet without pretending otherwise. Quiet, so it
   reads as a note rather than as an error. */
.not-yet {
	font-size: 13px;
	color: var(--ink-muted);
	font-style: italic;
	border-left: 3px solid var(--rule-strong);
	padding: 6px 0 6px 10px;
	max-width: 62ch;
}

.signed-out-note {
	background: var(--warn-soft);
	border-left: 3px solid var(--warn);
	padding: 10px 12px;
	max-width: 62ch;
}

.held-list {
	list-style: none;
	padding: 0;
	font-size: 13px;
}

.held-list li {
	padding: 5px 0;
	border-bottom: 1px solid var(--rule);
}

.held-list li::before {
	content: '\2713\00a0\00a0';
	color: var(--ok);
	font-weight: bold;
}


/* ---------------- THEME CARDS ---------------- */

.theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 10px;
	max-width: 600px;
}

.theme-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 7px;
	cursor: pointer;
	background: transparent;
	border: 1.5px solid var(--rule-strong);
	border-radius: 4px;
	text-align: left;
}

.theme-card:hover {
	border-color: var(--accent);
}

.theme-card[aria-checked="true"] {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--focus-ring);
}

.theme-card-name {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--ink);
}

.theme-card-note {
	font-size: 10.5px;
	color: var(--ink-faint);
	line-height: 1.3;
}

/* Only on themes you made, since only those can be deleted. Positioned
   rather than in the flow so it does not push the name around, and the
   card needs to be a positioning context for it. */
.theme-card {
	position: relative;
}

.theme-card-bin {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 18px;
	height: 18px;
	line-height: 16px;
	text-align: center;
	font-size: 14px;
	border-radius: 50%;
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	color: var(--ink-faint);
	cursor: pointer;
}

.theme-card-bin:hover {
	border-color: var(--danger);
	color: var(--danger);
}


/* ---------------- THE MINIATURE ----------------

   The payoff of writing the theme selectors without :root. This swatch
   carries its own data-theme, so everything inside it resolves that
   theme's tokens while the page around it stays on yours - which is
   what lets a light card sit on a dark page. It is also the component
   the theme editor will render at a larger size.

   Every colour below is a plain token name. Nothing here knows which
   theme it is drawing. */

.theme-swatch {
	border: 1px solid var(--rule);
	border-radius: 3px;
	overflow: hidden;
	background: var(--ground);
	height: 74px;
	display: flex;
	flex-direction: column;
	/* Not interactive - the card around it takes the click. */
	pointer-events: none;
}

.tp-head {
	background: var(--header-bg);
	border-bottom: 1px solid var(--accent-line);
	padding: 4px 5px;
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 7px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--header-ink);
}

.tp-nav {
	background: var(--surface-alt);
	padding: 3px 5px;
	display: flex;
	gap: 3px;
}

.tp-pill {
	width: 16px;
	height: 6px;
	border-radius: 2px;
	background: var(--button-bg);
	border: 1px solid var(--rule-strong);
}

.tp-pill.on {
	background: var(--selected-bg);
	border-color: var(--accent);
}

.tp-page {
	flex: 1;
	background: var(--surface);
	padding: 5px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tp-line {
	height: 3px;
	border-radius: 2px;
	background: var(--ink);
	width: 80%;
}

.tp-line.muted {
	background: var(--ink-muted);
	width: 55%;
}

.tp-btn {
	margin-top: auto;
	align-self: flex-start;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 6px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 2px 6px;
	border-radius: 2px;
}


/* ---------------- TEXT SIZE ---------------- */

.size-row,
.player-size-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.size-btn {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	letter-spacing: 1px;
	padding: 6px 12px;
	cursor: pointer;
	background: var(--button-bg);
	color: var(--button-ink);
	border: 1.5px solid var(--rule-strong);
	border-radius: 3px;
}

.size-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.size-btn[aria-checked="true"] {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}

/* Grows with the setting, so the choice shows its own effect. */
.size-sample {
	margin-top: 12px;
	color: var(--ink-muted);
	font-size: calc(15px * var(--font-scale, 1));
}

/* ---------------- STORAGE (Your data) ---------------- */

/* Name on the left, the number beside it; one pair to a line. */
.storage-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 8px 0;
	font-size: calc(14px * var(--font-scale, 1));
}

.storage-list dt {
	color: var(--ink);
	font-weight: 700;
}

.storage-list dd {
	margin: 0;
	color: var(--ink-muted);
}

.storage-parts {
	color: var(--ink-faint);
	font-size: calc(12px * var(--font-scale, 1));
	overflow-wrap: anywhere;
}

/* ---------------- NAV BAR ---------------- */

/* One tick box to a line, the bar's own buttons first and then the apps
   that can be pinned. The bar at the top of the page is the preview. */
.bar-choices {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 8px;
}

.bar-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	color: var(--ink);
	font-size: calc(14px * var(--font-scale, 1));
	cursor: pointer;
}

.bar-choice input {
	accent-color: var(--accent);
	width: 16px;
	height: 16px;
	margin: 0;
}

.bar-choice-note {
	color: var(--ink-faint);
	font-size: calc(12px * var(--font-scale, 1));
}

/* The fit meter: the bar's width as a fill along a track that runs to a
   computer screen, with marks where a phone and a tablet end. Past a mark
   means two lines on that screen. js/settings.js sets the fill's width and
   the marks' left from pixel widths. */
.bar-fit {
	max-width: 30rem;
	margin: 12px 0;
}

.bar-fit-track {
	position: relative;
	height: 12px;
	border-radius: 6px;
	background: var(--surface-alt);
	border: 1px solid var(--rule);
}

.bar-fit-fill {
	height: 100%;
	border-radius: 6px;
	background: var(--accent);
	transition: width 0.2s;
}

.bar-fit-mark {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 2px;
	margin-left: -1px;
	background: var(--ink-muted);
}

.bar-fit-screens {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 10px 0 4px;
	padding: 0;
	list-style: none;
	font-size: calc(13px * var(--font-scale, 1));
}

/* A colour AND an icon, so it reads without the colour too. */
.bar-fit-screens .fits  { color: var(--ok); }
.bar-fit-screens .wraps { color: var(--warn); }

.bar-fit-say {
	margin: 0;
	color: var(--ink-muted);
	font-size: calc(13px * var(--font-scale, 1));
}

/* The one-tap suggestion under the meter. */
.bar-fit-hint {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--info-soft);
	color: var(--ink);
	font-size: calc(13px * var(--font-scale, 1));
	line-height: 1.6;
}

.bar-fit-hint .fa-lightbulb {
	color: var(--info);
}

.bar-fit-hint .set-btn {
	margin-left: 6px;
}

.settings-footer-note {
	color: var(--ink-faint);
	font-size: 12px;
}


/* ---------------- FORMS (Account, Redeem) ---------------- */

.set-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 420px;
	margin-top: 8px;
}

.set-form-inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.set-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.set-label {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.set-serial {
	flex: 0 1 260px;
	min-width: 170px;
	font-family: ui-monospace, Consolas, monospace;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Back up, Restore and Import under Your data - one small heading
   each, under the panel's own My Boxes title. */
.boxes-step {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	margin: 16px 0 2px;
}

/* The My Boxes import box, under Your data. */
.set-input {
	font: inherit;
	font-size: 13px;
	padding: 6px 8px;
	background: var(--field-bg);
	color: var(--ink);
	border: 1.5px solid var(--rule-strong);
	border-radius: 3px;
}

textarea.set-input {
	resize: vertical;
	min-height: 120px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 12px;
}

/* Warns before the button, not after. See the note in settings.html. */
.set-warning {
	background: var(--warn-soft);
	border-left: 3px solid var(--warn);
	padding: 8px 10px;
	font-size: 12.5px;
	color: var(--ink);
}

.set-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.set-btn {
	display: inline-block;
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	padding: 7px 14px;
	cursor: pointer;
	text-decoration: none;
	background: var(--button-bg);
	color: var(--button-ink);
	border: 1.5px solid var(--rule-strong);
	border-radius: 3px;
}

.set-btn:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
}

.set-btn:disabled {
	color: var(--button-disabled-ink);
	border-color: var(--rule);
	cursor: not-allowed;
}

.set-btn-primary {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
	font-weight: 700;
}

.set-btn-primary:hover:not(:disabled) {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: var(--on-accent);
}

.set-result {
	font-size: 12.5px;
	color: var(--ink-muted);
}

.set-result.is-good { color: var(--ok); }
.set-result.is-bad  { color: var(--danger); }

/* ---------------- SERIALS ---------------- */

.serial-list {
	list-style: none;
	padding: 0;
	font-size: 13px;
	max-width: 480px;
}

.serial-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding: 6px 0;
	border-bottom: 1px solid var(--rule);
}

.serial-list li.is-empty {
	color: var(--ink-faint);
	font-style: italic;
	border-bottom: none;
}

.serial-role {
	font-weight: 600;
	min-width: 110px;
}

.serial-code {
	font-family: ui-monospace, Consolas, monospace;
	letter-spacing: 1px;
	color: var(--ink-muted);
}

/* A band label across the whole grid - Light, Dark, Yours. Full width
   rather than a column, so it reads as a divider between rows instead
   of a card that lost its picture. */
.theme-band {
	grid-column: 1 / -1;
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ink-faint);
	border-bottom: 1px solid var(--rule);
	padding: 10px 0 4px;
	margin-top: 2px;
}

/* The first band sits directly under the Automatic card, so it does not
   need the extra breathing room the later ones do. */
.theme-band:first-of-type {
	margin-top: 0;
}