/* color-contrast-checker: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.cc-color { display: flex; gap: 8px; }
.cc-color input[type="color"] { flex: none; width: 48px; height: 46px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--paper); cursor: pointer; }
.cc-color input[type="text"] { flex: 1; min-width: 0; }
input.is-invalid { border-color: var(--bad); }
.cc-result { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.cc-ratio { display: flex; flex-direction: column; }
.cc-ratio-label { color: var(--slate); font-size: 0.9rem; }
.cc-ratio strong { font: 800 2.6rem/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-checks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
.cc-checks li { position: relative; padding-left: 24px; }
.cc-checks li::before { position: absolute; left: 0; font-weight: 700; }
.cc-checks .is-ok::before { content: "✓"; color: var(--good); }
.cc-checks .is-bad::before { content: "✕"; color: var(--bad); }
.cc-preview { --cc-fg: #FF5A1F; --cc-bg: #FFFFFF; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--cc-bg); color: var(--cc-fg); }
.cc-preview p { margin: 0 0 10px; }
.cc-preview p:last-child { margin: 0; }
.cc-preview .cc-large { font-size: 1.5rem; font-weight: 700; }
.cc-preview a { color: inherit; }
.cc-ui { display: flex; align-items: center; gap: 16px; }
.cc-button { padding: 8px 16px; border: 2px solid var(--cc-fg); border-radius: 8px; font-weight: 600; }
.cc-icon { font-size: 1.4rem; }