/* Colours: the middle of the page. The current colour, the cards (picture, palette, made from it, contrast) and the
   swatches. A swatch's label is drawn in black or white, whichever reads better on it (js/swatches.js). */
.co-hero { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.co-big { border-radius: var(--co-radius); min-height: 150px; display: grid; place-items: end start; padding: 12px; border: 1px solid var(--co-line);
  font: 700 20px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.co-big-col, .co-vals { display: grid; gap: 8px; align-content: start; min-width: 0; }
.co-big-col .co-big { min-height: 150px; }
.co-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: center; }
.co-value { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.co-vk { font-size: 12px; font-weight: 700; color: var(--co-dim); }
.co-copy { min-height: 30px; padding: 4px 10px; }
.co-card { background: var(--co-panel); border: 1px solid var(--co-line); border-radius: var(--co-radius); padding: 14px; display: grid; gap: 12px; }
.co-card h2 { font-size: 16px; }
.co-card h3 { font-size: 13px; color: var(--co-dim); font-weight: 600; }
.co-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.co-head h2 { flex: 1 1 auto; }
.co-row { display: grid; gap: 8px; justify-items: start; }
.co-note { color: var(--co-dim); font-size: 13px; }
.co-note:empty { display: none; }
.co-drop { border: 1px dashed var(--co-line); border-radius: var(--co-radius); padding: 12px; }
.co-pic { position: relative; display: grid; place-items: center; background: var(--co-bg); border-radius: 8px; padding: 6px; }
.co-canvas { max-width: 100%; max-height: 60vh; height: auto; cursor: crosshair; border-radius: 4px; touch-action: none; }
.co-canvas:focus-visible { outline: 3px solid var(--co-accent); outline-offset: 2px; }
.co-loupe { position: absolute; width: 132px; height: 132px; border-radius: 12px; border: 2px solid var(--co-fg); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); pointer-events: none; image-rendering: pixelated; }
/* swatches */
.co-swatches { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.co-sw { display: grid; gap: 2px; }
.co-sw-btn { font: 600 12px/1.2 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); width: 92px; min-height: 64px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--co-fg) 25%, transparent); display: grid; align-content: end; justify-items: start; gap: 2px; padding: 6px 7px; cursor: pointer; text-align: left; }
.co-sw-btn:focus-visible { outline: 3px solid var(--co-accent); outline-offset: 2px; }
.co-sw.is-on .co-sw-btn { box-shadow: 0 0 0 3px var(--co-bg), 0 0 0 5px var(--co-fg); }
.co-sw-share { font-weight: 400; }
.co-sw-tools { display: flex; justify-content: space-between; }
.co-sw-tool { font: inherit; font-size: 13px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--co-fg); cursor: pointer; }
.co-sw-tool:hover, .co-sw-tool:focus-visible { background: color-mix(in srgb, var(--co-fg) 14%, transparent); }
@media (pointer: coarse) { .co-sw-tool { width: 44px; height: 44px; } .co-sw-btn { width: 96px; min-height: 72px; } .co-sw-tools { gap: 0; } }
.co-palette:empty { display: none; }
/* contrast */
.co-con-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-sample { border-radius: 8px; padding: 16px; border: 1px solid var(--co-line); display: grid; gap: 6px; font-size: 16px; }
.co-sample-big { font-size: 24px; }
.co-ratio { font: 700 28px/1.1 system-ui, sans-serif; }
.co-verdicts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.co-verdict { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--co-line); }
.co-verdict.ok { background: color-mix(in srgb, #1a7f37 18%, var(--co-panel)); }
.co-verdict.bad { background: color-mix(in srgb, #d92d20 16%, var(--co-panel)); }
@media (max-width: 600px) {
  .co-view { padding: 12px; }
  .co-hero { grid-template-columns: 1fr; }
  .co-big { min-height: 96px; }
  .co-con-pair { grid-template-columns: 1fr; }
  .co-sw-btn { width: 84px; }
}