/**
 * Westphal Solutions - Contrast checker
 *
 * Owns the `wscc` prefix. Reads only brand tokens from main.css. Safe to edit
 * or delete on its own.
 *
 * Three regions, top to bottom: the score panel and live preview, the editable
 * palette, and the full-palette grid. One color editor popover serves all three
 * entry points (foreground bead, background bead, palette tile).
 */

.wscc {
	--wscc-mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

	/* fail hatch. chevron, not stripes. one place to change our mind. */
	--wscc-fail-ink: #E2E2E6;
	--wscc-fail-bg: #F2F2F4;

	position: relative;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	background: var(--ws-surface);
	font-family: var(--ws-font);
	color: var(--ws-text);
}

.wscc__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws-muted);
	margin: 0 0 12px;
}
.wscc__note { font-size: 0.8rem; color: var(--ws-muted); margin: 12px 0 0; }
/* Notes that open a pane instead of trailing one. */
.wscc__note--flush { margin: 0 0 12px; }
.wscc__sug .wscc__note--flush:only-child { margin: 0; }
.wscc__spacer { flex: 1 1 auto; }
.wscc__fieldlabel { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ws-muted); margin-bottom: 6px; }

/* === Buttons === */
.wscc__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ws-font);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	padding: 9px 14px;
	border-radius: var(--ws-radius);
	border: 1px solid var(--ws-border);
	background: var(--ws-surface);
	color: var(--ws-text);
	cursor: pointer;
	transition: transform 0.15s var(--ws-ease), border-color 0.2s var(--ws-ease);
}
.wscc__btn:hover { border-color: var(--ws-accent); }
.wscc__btn:active { transform: translateY(1px); }
.wscc__btn:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }
.wscc__btn--primary { background: var(--ws-accent); border-color: var(--ws-accent); color: var(--ws-black); }
.wscc__btn--wide { width: 100%; justify-content: center; }
.wscc__btn[disabled] { opacity: 0.55; cursor: progress; }

.wscc__iconbtn {
	width: 34px;
	height: 34px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	background: var(--ws-surface);
	color: var(--ws-slate);
	cursor: pointer;
	transition: border-color 0.2s var(--ws-ease);
}
.wscc__iconbtn:hover { border-color: var(--ws-accent); }
.wscc__iconbtn:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }
.wscc__iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===========================================================================
   Score panel + live preview
   =========================================================================== */
.wscc__top {
	display: grid;
	grid-template-columns: 430px 1fr;
	border-bottom: 1px solid var(--ws-border);
}

.wscc__score { padding: 22px; border-right: 1px solid var(--ws-border); }

.wscc__ratiorow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.wscc__ratio {
	font-size: 2.8rem;
	font-weight: 900;
	line-height: 1;
	color: var(--ws-black);
	font-variant-numeric: tabular-nums;
}
.wscc__ratio span { font-size: 1.1rem; font-weight: 700; color: var(--ws-muted); }

.wscc__verdict {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 5px 10px;
	border-radius: var(--ws-radius-pill);
	white-space: nowrap;
}
.wscc__verdict.is-pass { background: var(--ws-accent); color: var(--ws-black); }
.wscc__verdict.is-part { background: var(--ws-light-grey); color: var(--ws-charcoal); }
.wscc__verdict.is-fail { background: var(--ws-error); color: var(--ws-white); }

/* Foreground and background are chosen here, and only here. */
/* min-width 0 or the grid items refuse to shrink and blow past the panel. */
.wscc__pair { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: end; gap: 8px; min-width: 0; }
.wscc__field { min-width: 0; }

.wscc__input {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	padding: 6px 8px;
	background: var(--ws-bg);
}
.wscc__input:focus-within { box-shadow: inset 0 0 0 2px var(--ws-accent); }

.wscc__bead {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.wscc__bead:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }

.wscc__hex {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	outline: 0;
	font-family: var(--wscc-mono);
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var(--ws-text);
}

.wscc__swap { align-self: center; justify-self: center; margin-bottom: 3px; }

/* === Detail tabs === */
.wscc__tabs { display: flex; gap: 18px; margin-top: 24px; border-bottom: 1px solid var(--ws-border); }
.wscc__tab {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0 0 10px;
	margin-bottom: -1px;
	font-family: var(--ws-font);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ws-grey);
	border-bottom: 2px solid transparent;
	transition: color 0.2s var(--ws-ease), border-color 0.2s var(--ws-ease);
}
.wscc__tab[aria-selected="true"] { color: var(--ws-black); border-bottom-color: var(--ws-accent); }
.wscc__tab:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }

.wscc__pane { display: none; padding-top: 16px; }
.wscc__pane.is-active { display: block; }

/* === Summary table === */
.wscc__table { width: 100%; border-collapse: collapse; }
.wscc__table th {
	text-align: left;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws-muted);
	padding: 8px 0;
	border-bottom: 1px solid var(--ws-border);
}
.wscc__table th:not(:first-child) { text-align: center; width: 72px; }
.wscc__table td { padding: 12px 0; border-bottom: 1px solid var(--ws-border); font-size: 0.9rem; }
.wscc__table td:not(:first-child) { text-align: center; }
.wscc__table small { display: block; font-size: 0.72rem; color: var(--ws-grey); font-weight: 400; }

.wscc__mark { font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.wscc__mark.is-pass { color: var(--ws-charcoal); }
.wscc__mark.is-fail { color: var(--ws-error); }
.wscc__mark.is-na { color: var(--ws-grey); font-weight: 400; }
.wscc__mark svg {
	width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px;
	fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* === Suggestions === */
.wscc__sug { display: flex; flex-direction: column; gap: 8px; }
.wscc__sugrow {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: var(--ws-font);
	transition: border-color 0.2s var(--ws-ease);
}
.wscc__sugrow:hover { border-color: var(--ws-accent); }
.wscc__sugrow:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }
.wscc__sugchip { width: 34px; height: 34px; border-radius: var(--ws-radius); border: 1px solid rgba(0, 0, 0, 0.15); }
.wscc__sughex { font-family: var(--wscc-mono); font-size: 0.85rem; font-weight: 700; }
.wscc__sugmeta { font-size: 0.78rem; color: var(--ws-muted); }
.wscc__sugratio { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.wscc__target { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wscc__range { flex: 1 1 auto; accent-color: var(--ws-slate); }
.wscc__targetval {
	font-family: var(--wscc-mono);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 58px;
}

/* === Live preview === */
.wscc__preview { padding: 22px; display: flex; flex-direction: column; }
.wscc__stage {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	overflow: hidden;
}
.wscc__chrome {
	flex: 0 0 30px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	background: var(--ws-light-grey);
}
.wscc__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--ws-grey); }

.wscc__canvas { flex: 1 1 auto; padding: 40px 36px; }
.wscc__hero {
	width: 46px; height: 46px; margin-bottom: 18px;
	fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.wscc__h2 { margin: 0 0 16px; font-size: 2.6rem; line-height: 1.1; font-weight: 900; color: inherit; }
.wscc__body { margin: 0 0 24px; font-size: 1rem; line-height: 1.6; max-width: 44ch; }
.wscc__cta {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid;
	border-radius: var(--ws-radius);
	font-weight: 700;
	font-size: 0.95rem;
}
.wscc__uirow { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.wscc__uirow svg {
	width: 24px; height: 24px;
	fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wscc__bar { flex: 1 1 auto; height: 2px; background: currentColor; opacity: 0.5; }

/* ===========================================================================
   Palette strip
   =========================================================================== */
.wscc__palette { padding: 22px; border-bottom: 1px solid var(--ws-border); }
.wscc__strip { display: flex; flex-wrap: wrap; gap: 8px; }

.wscc__tile {
	position: relative;
	width: 132px;
	height: 132px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--ws-radius);
	overflow: hidden;
}
.wscc__tile.is-open { box-shadow: 0 0 0 2px var(--ws-slate); }

/* Hex chip opens the editor. Chip flips to a light-on-dark treatment so it
   stays legible on charcoal and black without a second class. */
.wscc__tilehex {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 5px 8px;
	border: 0;
	border-radius: var(--ws-radius);
	font-family: var(--wscc-mono);
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.9);
	color: var(--ws-charcoal);
	cursor: pointer;
}
.wscc__tile[data-dark="1"] .wscc__tilehex { background: rgba(0, 0, 0, 0.55); color: var(--ws-white); }
.wscc__tilehex:hover { outline: 1px solid var(--ws-slate); }
.wscc__tilehex:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 1px; }

.wscc__tilename {
	position: absolute;
	left: 8px;
	bottom: 34px;
	max-width: 112px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 3px 7px;
	border-radius: var(--ws-radius);
	font-size: 0.68rem;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.9);
	color: var(--ws-charcoal);
}
.wscc__tile[data-dark="1"] .wscc__tilename { background: rgba(0, 0, 0, 0.55); color: var(--ws-white); }

.wscc__tilebar {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	transition: opacity 0.15s var(--ws-ease);
}
.wscc__tile:hover .wscc__tilebar,
.wscc__tile:focus-within .wscc__tilebar { opacity: 1; }

.wscc__tilebtn {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: var(--ws-radius);
	background: rgba(255, 255, 255, 0.9);
	color: var(--ws-charcoal);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wscc__tile[data-dark="1"] .wscc__tilebtn { background: rgba(0, 0, 0, 0.5); color: var(--ws-white); }
.wscc__tilebtn:hover { outline: 1px solid var(--ws-slate); }
.wscc__tilebtn:focus-visible { outline: 2px solid var(--ws-slate); }
.wscc__tilebtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wscc__tip {
	position: absolute;
	left: 8px;
	bottom: 40px;
	padding: 5px 9px;
	border-radius: var(--ws-radius);
	background: var(--ws-charcoal);
	color: var(--ws-white);
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s var(--ws-ease);
}
.wscc__tilehex:hover ~ .wscc__tip,
.wscc__tilehex:focus-visible ~ .wscc__tip { opacity: 1; }
/* Named tiles already show a label there. Suppress the tooltip, no stacking. */
.wscc__tile.has-name .wscc__tip { display: none; }

.wscc__add {
	width: 132px;
	height: 132px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--ws-border);
	border-radius: var(--ws-radius);
	background: transparent;
	color: var(--ws-slate);
	font-size: 1.8rem;
	font-weight: 300;
	cursor: pointer;
	transition: border-color 0.2s var(--ws-ease);
}
.wscc__add:hover { border-color: var(--ws-accent); }
.wscc__add:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }

/* ===========================================================================
   Color editor. One popover, three callers.
   =========================================================================== */
.wscc__editor {
	position: absolute;
	z-index: 40;
	width: 300px;
	padding: 16px;
	background: var(--ws-surface);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	box-shadow: 0 8px 28px rgba(28, 28, 30, 0.16);
}
.wscc__editor[hidden] { display: none; }

.wscc__edhead { display: flex; align-items: center; margin-bottom: 14px; }
.wscc__edtitle { font-size: 0.95rem; font-weight: 900; }

.wscc__format,
.wscc__select {
	font-family: var(--ws-font);
	font-size: 0.8rem;
	font-weight: 700;
	padding: 6px 8px;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	background: var(--ws-surface);
	color: var(--ws-text);
	cursor: pointer;
}
.wscc__select { font-size: 0.85rem; padding: 8px 10px; }

/* Palette row only makes sense when editing the pair. Editing a palette color
   from its own tile hides this: picking from the palette would be circular. */
.wscc__edpal {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ws-border);
}
.wscc__edpal[hidden] { display: none; }
.wscc__edpaltitle { margin: 0 0 8px; font-size: 0.75rem; font-weight: 700; color: var(--ws-muted); }
.wscc__edswatches { display: flex; flex-wrap: wrap; gap: 6px; }
.wscc__edsw {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--ws-radius);
	cursor: pointer;
}
.wscc__edsw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ws-surface), 0 0 0 4px var(--ws-slate); }
.wscc__edsw:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }

.wscc__sv {
	position: relative;
	width: 100%;
	height: 140px;
	border-radius: var(--ws-radius);
	overflow: hidden;
	cursor: crosshair;
	touch-action: none;
}
.wscc__sv canvas { display: block; width: 100%; height: 140px; }
.wscc__svdot {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	border: 2px solid var(--ws-white);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.wscc__hue {
	width: 100%;
	height: 12px;
	margin-top: 12px;
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--ws-radius-pill);
	outline: 0;
	background: linear-gradient(to right, #F00 0%, #FF0 17%, #0F0 33%, #0FF 50%, #00F 67%, #F0F 83%, #F00 100%);
}
.wscc__hue::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ws-white);
	border: 2px solid var(--ws-charcoal);
	cursor: pointer;
}
.wscc__hue::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ws-white);
	border: 2px solid var(--ws-charcoal);
	cursor: pointer;
}
.wscc__hue:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 3px; }

.wscc__vals { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wscc__val { display: grid; grid-template-columns: 22px 1fr 62px; align-items: center; gap: 8px; }
.wscc__val label { font-size: 0.78rem; font-weight: 700; color: var(--ws-muted); }
.wscc__val input[type="range"] { width: 100%; accent-color: var(--ws-slate); }
.wscc__val input[type="text"] {
	font-family: var(--wscc-mono);
	font-size: 0.8rem;
	text-align: center;
	padding: 6px 4px;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	background: var(--ws-bg);
	color: var(--ws-text);
}

.wscc__valhex,
.wscc__nameinput {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	background: var(--ws-bg);
	color: var(--ws-text);
	font-family: var(--wscc-mono);
	font-size: 0.9rem;
}
.wscc__valhex { text-transform: uppercase; }
.wscc__valhex:focus,
.wscc__nameinput:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ws-accent); }

.wscc__edname { margin-top: 14px; }
.wscc__edname[hidden] { display: none; }
.wscc__edfoot { margin-top: 14px; }

/* ===========================================================================
   Full-palette grid
   =========================================================================== */
.wscc__grid { padding: 22px; }

.wscc__gridbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; }
.wscc__modes { display: flex; gap: 22px; }
.wscc__mode {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--ws-font);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ws-grey);
	border-bottom: 2px solid transparent;
	transition: color 0.2s var(--ws-ease), border-color 0.2s var(--ws-ease);
}
.wscc__mode[aria-selected="true"] { color: var(--ws-black); border-bottom-color: var(--ws-accent); }
.wscc__mode:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }
.wscc__mode svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wscc__levellabel { font-size: 0.8rem; font-weight: 700; color: var(--ws-muted); }

.wscc__matrixwrap { overflow-x: auto; }
.wscc__matrix { border-collapse: separate; border-spacing: 7px; }
.wscc__corner { width: 150px; }
.wscc__colhead { width: 58px; text-align: center; }
.wscc__colhead b { font-size: 1.15rem; font-weight: 900; }
.wscc__colhead svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wscc__rowhead {
	text-align: left;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ws-charcoal);
	white-space: nowrap;
}
.wscc__rowhead span {
	display: inline-block;
	width: 28px;
	height: 28px;
	margin-right: 10px;
	vertical-align: -8px;
	border-radius: var(--ws-radius);
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.wscc__cell {
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: var(--ws-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ws-font);
	font-weight: 900;
	font-size: 1.15rem;
	cursor: pointer;
	transition: transform 0.15s var(--ws-ease);
}
.wscc__cell:hover { transform: scale(1.08); }
.wscc__cell:focus-visible { outline: 2px solid var(--ws-slate); outline-offset: 2px; }
.wscc__cell svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* A failing pair carries no ink. Chevron, so it reads as ours, not Adobe's.
   Identical colors land here too: 1.00 to 1 fails every threshold, so the
   diagonal needs no special case. */
.wscc__cell.is-fail {
	cursor: not-allowed;
	color: transparent !important;
	background-color: var(--wscc-fail-bg) !important;
	background-image:
		linear-gradient(135deg, var(--wscc-fail-ink) 25%, transparent 25%),
		linear-gradient(225deg, var(--wscc-fail-ink) 25%, transparent 25%),
		linear-gradient(315deg, var(--wscc-fail-ink) 25%, transparent 25%),
		linear-gradient(45deg, var(--wscc-fail-ink) 25%, transparent 25%) !important;
	background-position: -5px 0, -5px 0, 0 0, 0 0 !important;
	background-size: 10px 10px !important;
	background-repeat: repeat !important;
}
.wscc__cell.is-fail:hover { transform: none; }
.wscc__cell.is-fail svg { display: none; }

.wscc__tally { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wscc__tallynum { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.wscc__tallytext { margin: 0; }

.wscc__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* ===========================================================================
   Narrow screens
   =========================================================================== */
@media (max-width: 880px) {
	.wscc__top { grid-template-columns: 1fr; }
	.wscc__score { border-right: 0; border-bottom: 1px solid var(--ws-border); }
	.wscc__h2 { font-size: 2rem; }
	.wscc__canvas { padding: 28px 24px; }
	.wscc__editor { width: calc(100% - 32px); }
}

@media (max-width: 520px) {
	.wscc__pair { grid-template-columns: 1fr; }
	.wscc__swap { justify-self: start; margin: 4px 0; }
	.wscc__tabs { gap: 12px; }
	.wscc__tab { font-size: 0.8rem; }
	.wscc__modes { gap: 14px; }
	.wscc__mode { font-size: 0.8rem; }
	.wscc__tile, .wscc__add { width: 104px; height: 104px; }
}

/* ===========================================================================
   Motion and dark mode
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.wscc__cell,
	.wscc__btn,
	.wscc__tilebar { transition: none; }
	.wscc__cell:hover { transform: none; }
}

/* Chrome tiles and the fail hatch are pinned light in the mockup. In dark mode
   the hatch needs to sit on the dark surface or it glows. */
@media (prefers-color-scheme: dark) {
	.wscc {
		--wscc-fail-ink: #34343A;
		--wscc-fail-bg: #232327;
	}
}