/* Color Blindness Simulator — a hero uploader (after="hide") over a split: the
   Preview card (view switch, original | simulation, download) on the left, the
   type picker and severity on the right. The layout is
   styles/components/form.css and every canvas sits on a
   styles/components/preview.css stage; only the all-types grid and the type
   rows' tag and check are the page's own. */

/* Gradient title tile (stands in for a generated glass icon). */
.cb-title-icon {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #f59e0b, #d946ef);
}

/* All types: every simulation at full strength, as many across as fit. */
.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4) var(--space-3);
}
.cb-grid .preview {
  --preview-min-h: 120px;
  --preview-max-h: 32vh;
  border-radius: var(--radius-sm);
}

/* ── Type picker: one radio row per deficiency, a check on the chosen one. */
.cb-type {
  width: 100%;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--duration-snap) var(--ease-standard);
}
.cb-type:hover { background: var(--bg-hover); }
.cb-type:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.cb-type:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.cb-type__name { font-weight: 600; }
.cb-type__meta { font-weight: 400; margin-block-start: 2px; }

.cb-type__tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.cb-type__check {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
  visibility: hidden;
}
.cb-type.is-active .cb-type__check { visibility: visible; }

/* The grid view ignores severity: the slider is disabled and dimmed there. */
.cb-dim { opacity: 0.5; }