/* Contrast: an optician's chart. The sample panel is the hero, painted in the colours being tested; verdicts
   below are plain pass and fail marks. Neutral grey page so it never biases the colours. */
:root { --page: #f2f2f2; --card: #ffffff; --ink: #161616; --soft: #595959; --line: #d6d6d6; --field: #e9e9e9; --act: #161616; --on-act: #ffffff; --stop: #b3261e; --ok: #1d7a3a; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #121212; --card: #1c1c1c; --ink: #ededed; --soft: #a6a6a6; --line: #333; --field: #121212; --act: #ededed; --on-act: #121212; --stop: #ff8a80; --ok: #7bd897; color-scheme: dark; }
}
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
@media (max-width: 480px) { .pair { grid-template-columns: minmax(0, 1fr); } #swap { justify-self: start; } }
.pick { display: flex; gap: 8px; }
.pick input[type="color"] { width: 52px; height: 46px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: var(--card); flex: none; }
.pick input:not([type="color"]) { font-family: ui-monospace, Menlo, monospace !important; text-transform: lowercase; }
.sample { border-radius: 12px; padding: 22px; border: 1px solid var(--line); gap: 10px; background: var(--s-bg, #fff); color: var(--s-fg, #000); }
.s-large { font-size: 24px; font-weight: 700; } .s-small { font-size: 14px; }
.list .yes { color: var(--ok); font-weight: 700; } .list .no { color: var(--stop); font-weight: 700; }
#fix button { margin-left: 8px; }