/* Colour contrast checker. The sample's colours are set from script (CSSOM). */
.cc-color { display: flex; gap: 6px; min-width: 0; }
.cc-pick { flex: none; width: 44px; min-width: 44px; padding: 3px; cursor: pointer; }
.cc-color .e-input[type="text"] { font-family: var(--e-mono); }
.cc-tools { margin: 8px 0 var(--e-gap); }
.cc-swap { font-size: .85em; }
.cc-sample { border: 1px solid var(--e-line); border-radius: 10px; padding: 12px 14px; overflow-wrap: anywhere; }
.cc-sample p { margin: 0 0 6px; }
.cc-large { font-size: 24px; line-height: 1.2; font-weight: 600; }
.cc-normal { font-size: 16px; line-height: 1.45; }
.cc-ui { display: inline-block; font-size: 14px; font-weight: 600; padding: 4px 12px; border: 2px solid; border-radius: 6px; }
.cc-checks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.cc-check { display: flex; align-items: center; gap: 10px; font-size: .9em; }
.cc-badge {
    flex: none; min-width: 44px; text-align: center; font-size: .8em; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    border: 1px solid currentColor;
}
.cc-pass .cc-badge { color: var(--e-ok); }
.cc-fail .cc-badge { color: var(--e-bad); }