/* ============================================================
   THEME EDITOR

   Two columns: the sample on the left, the colours on the right.

   Read the sample section carefully. Everything under .sample is
   painted from tokens WITHOUT the --ed- prefix, because it is meant to
   resolve the theme being edited, which the .sample element carries on
   its own data-theme. Everything outside it is ordinary page chrome
   and resolves the theme the person is actually using.

   That is the whole trick, and it only works because the theme
   selectors in siteTheme-Tokens.css carry no :root.

   David authorized 2026-09-01: Phase 3, the theme editor.
   ============================================================ */

.hidden {
	display: none;
}


/* ---------------- THE BAR ---------------- */

.editor-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--rule);
}

.bar-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

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

.theme-name {
	width: 190px;
}

.bar-gap {
	flex: 1;
}

.ed-btn {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 12.5px;
	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;
}

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

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

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

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

.editor-message {
	min-height: 1.4em;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--ink-muted);
}

.editor-message.is-good { color: var(--ok); }
.editor-message.is-bad  { color: var(--danger); }


/* ---------------- COLUMNS ---------------- */

.editor-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: start;
	margin-top: 10px;
}

@media screen and (min-width: 860px) {
	.editor-cols {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 24px;
	}

	.sample-wrap {
		position: sticky;
		top: 8px;
	}
}

.sample-note {
	font-size: 12px;
	color: var(--ink-faint);
	margin: 6px 0 0;
}


/* ---------------- THE SAMPLE ----------------
   Tokens with no prefix on purpose - see the file header. */

.sample {
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	overflow: hidden;
	background: var(--ground);
	color: var(--ink);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.45;
}

/* What a clicked colour lights up. Deliberately an outline and not a
   background: painting the highlight into the element would change the
   very colour being inspected. */
.sample [data-token].is-lit {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-radius: 2px;
}

.s-header {
	background: var(--header-bg);
	border-bottom: 1px solid var(--accent-line);
	padding: 8px 10px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.s-wordmark {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 4px;
	color: var(--header-ink);
}

.s-version {
	font-family: monospace;
	font-size: 10px;
	color: color-mix(in srgb, var(--header-ink) 55%, transparent);
}

.s-nav {
	background: var(--surface-alt);
	padding: 6px 10px;
	display: flex;
	gap: 5px;
}

.s-btn {
	font-size: 11px;
	padding: 3px 9px;
	border-radius: 2px;
	background: var(--button-bg);
	color: var(--button-ink);
	border: 1px solid var(--rule-strong);
}

.s-btn.s-on {
	background: var(--selected-bg);
	color: var(--ink);
	border-color: var(--accent);
	font-weight: 700;
}

.s-btn.s-off {
	color: var(--button-disabled-ink);
}

.s-page {
	background: var(--ground);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.s-card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 9px 11px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.s-h2 {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--ink);
}

.s-p     { color: var(--ink); }
.s-muted { color: var(--ink-muted); font-size: 11px; }

.s-faint {
	color: var(--ink-faint);
	font-size: 10px;
	letter-spacing: 2px;
}

.s-rule {
	border: none;
	border-top: 1px solid var(--rule);
	margin: 3px 0;
	width: 100%;
}

.s-link {
	color: var(--accent);
	text-decoration: underline;
	font-size: 11.5px;
	align-self: flex-start;
}

.s-row {
	display: flex;
	gap: 6px;
	align-items: center;
}

.s-field {
	flex: 1;
	min-width: 0;
	background: var(--field-bg);
	color: var(--field-ink);
	border: 1px solid var(--field-border);
	border-radius: 3px;
	padding: 4px 6px;
	font-size: 11px;
}

.s-field::placeholder {
	color: var(--field-placeholder);
	opacity: 1;
}

.s-field:focus {
	background: var(--field-focus-bg);
	outline: none;
}

.s-fill {
	background: var(--accent);
	color: var(--on-accent);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 3px;
	white-space: nowrap;
}

.s-code {
	background: var(--code-bg);
	color: var(--code-ink);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 11px;
	padding: 3px 6px;
	border-radius: 2px;
	align-self: flex-start;
}

.s-msg {
	color: var(--on-status);
	font-size: 11px;
	padding: 4px 9px;
	border-radius: 2px;
}

.s-ok     { background: var(--ok); }
.s-warn   { background: var(--warn); }
.s-danger { background: var(--danger); }
.s-info   { background: var(--info); }

.s-tints {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.s-tint {
	font-size: 10px;
	padding: 3px 7px;
	border-radius: 2px;
	color: var(--ink);
	border: 1px solid transparent;
}

.s-ok-soft     { background: var(--ok-soft); }
.s-warn-soft   { background: var(--warn-soft); }
.s-danger-soft { background: var(--danger-soft); }
.s-info-soft   { background: var(--info-soft); }

.s-accent-soft {
	background: var(--accent-soft);
	border-color: var(--accent-line);
}

.s-raised {
	background: var(--raised);
	border-color: var(--rule-strong);
}

.s-footer {
	background: var(--surface-alt);
	color: var(--ink-muted);
	font-size: 10.5px;
	padding: 7px 10px;
}


/* ---------------- THE COLOUR LIST ---------------- */

.swatches {
	min-width: 0;
}

.sw-group-name {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding: 14px 0 5px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 3px;
}

.sw-row {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
	padding: 4px 4px;
	border-radius: 3px;
	cursor: pointer;
}

.sw-row:hover {
	background: var(--accent-soft);
}

.sw-row.is-lit {
	background: var(--accent-soft);
	box-shadow: inset 3px 0 0 var(--accent);
}

/* The colour input itself. Stripped of its browser chrome so the whole
   thing reads as a swatch rather than as a form control. */
.sw-input {
	width: 30px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--rule-strong);
	border-radius: 3px;
	background: none;
	cursor: pointer;
}

.sw-input::-webkit-color-swatch-wrapper { padding: 2px; }
.sw-input::-webkit-color-swatch { border: none; border-radius: 2px; }
.sw-input::-moz-color-swatch { border: none; border-radius: 2px; }

.sw-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.sw-name {
	font-size: 12.5px;
	color: var(--ink);
}

.sw-token {
	font-family: monospace;
	font-size: 10px;
	color: var(--ink-faint);
	overflow: hidden;
	text-overflow: ellipsis;
}

.sw-hex {
	font-family: monospace;
	font-size: 10.5px;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

/* Only appears on a row that differs from the base, so the list also
   answers "what have I actually changed". */
.sw-revert {
	width: 18px;
	height: 18px;
	padding: 0;
	line-height: 1;
	font-size: 12px;
	cursor: pointer;
	background: none;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	color: var(--ink-faint);
	visibility: hidden;
}

.sw-row.is-changed .sw-revert {
	visibility: visible;
}

.sw-revert:hover {
	border-color: var(--accent);
	color: var(--accent);
}


/* ---------------- CONTRAST ---------------- */

.contrast-list {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contrast-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 11.5px;
	padding: 3px 5px;
	border-radius: 2px;
}

.contrast-row.is-fail {
	background: var(--danger-soft);
	color: var(--danger);
}

.contrast-what {
	color: var(--ink-muted);
}

.contrast-row.is-fail .contrast-what {
	color: var(--danger);
}

.contrast-value {
	font-family: monospace;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.contrast-ok-note {
	font-size: 11.5px;
	color: var(--ok);
	padding: 3px 5px;
}

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