/* Colorblind checker widget CSS (ADR-003 D2). */
.tool-panel { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-raised); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.tool-panel + .tool-panel { margin-block-start: var(--space-5); }
.tool-panel > h2 { margin-block: 0 var(--space-3); }
.tool-panel > p { color: var(--muted); margin-block: 0 var(--space-4); }
.cc__fields { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 30em) { .cc__fields { grid-template-columns: 1fr 1fr; } }
.cc__field { display: flex; flex-direction: column; gap: var(--space-1); border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.cc__legend { font-weight: var(--weight-semibold); padding: 0; }
.cc__inputs { display: flex; gap: var(--space-2); align-items: center; }
.cc__inputs input[type="text"] { flex: 1 1 auto; min-inline-size: 0; font-family: var(--font-mono); font-size: var(--size-03); padding: var(--space-1) var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.cc__inputs input[type="color"] { flex: 0 0 auto; inline-size: 2.75rem; block-size: 2.5rem; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: none; }
.cc__result { margin-block-start: var(--space-4); }
.cc__preview { border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--size-05); line-height: var(--lh-snug); }
.cc__preview-small { display: block; font-size: var(--size-02); }
.cc__ratio { font-family: var(--font-mono); font-size: var(--size-07); margin-block: var(--space-3); }
.cc__ratio-unit { font-size: var(--size-03); color: var(--muted); }
.cc__badges { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cc__badge { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--rule); font-size: var(--size-02); }
.cc__badge[data-pass="true"] { background: var(--signal-soft); border-color: var(--signal); }
.cc__badge[data-pass="false"] { background: var(--warn-soft); border-color: var(--warn); }
.cc__badge-state { font-weight: var(--weight-semibold); }
.cc__badge[data-pass="true"] .cc__badge-state { color: var(--signal); }
.cc__badge[data-pass="false"] .cc__badge-state { color: var(--warn); }
[data-contrast][data-invalid="true"] .cc__result { opacity: var(--opacity-disabled); }
.cvd__input { inline-size: 100%; box-sizing: border-box; resize: vertical; min-block-size: 4.5rem; font-family: var(--font-mono); font-size: var(--size-03); padding: var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.cvd__output { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-4); }
.cvd__row { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .cvd__row { grid-template-columns: repeat(4, 1fr); } }
.cvd__cell { display: flex; flex-direction: column; gap: var(--space-0); text-align: center; }
.cvd__swatch { display: block; block-size: 3rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.cvd__cap { font-size: var(--size-00); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.cvd__val { font-family: var(--font-mono); font-size: var(--size-01); }
[data-cvd][data-empty="true"] .cvd__output::after { content: "Enter hex colours above to preview them."; color: var(--muted); }
.wcag-table { inline-size: 100%; border-collapse: collapse; margin-block: var(--space-3); }
.wcag-table th, .wcag-table td { border: 1px solid var(--rule); padding: var(--space-1) var(--space-2); text-align: start; font-size: var(--size-02); }
.wcag-table th { font-weight: var(--weight-semibold); }
.wcag-table td:not(:first-child) { font-family: var(--font-mono); }