/* Color contrast checker — tool UI. Chrome from shared.css/utilities.css. */
.cc-stage { max-width: 640px; margin: 0 auto; }
.cc-inputs { display: flex; align-items: flex-end; gap: 12px; }
.cc-field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cc-label { font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.cc-pick { display: flex; gap: 8px; align-items: center; }
.cc-pick input[type=color] { width: 46px; height: 42px; padding: 0; border: 1px solid var(--border-control); border-radius: var(--radius); background: none; cursor: pointer; flex: none; }
.cc-hex { flex: 1; min-width: 0; font: inherit; font-family: var(--mono); font-weight: 600; text-transform: uppercase; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border-control); background: var(--surface2); color: var(--text); }
.cc-hex:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.cc-swap { flex: none; align-self: center; margin-bottom: 6px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-control); background: var(--surface); color: var(--text); font-size: 1.2rem; cursor: pointer; }
.cc-swap:hover { border-color: var(--accent); color: var(--accent); }

.cc-preview { margin: 18px 0; padding: 28px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); text-align: center; transition: background .1s, color .1s; }
.cc-big { font-size: 1.9rem; font-weight: 700; margin: 0 0 10px; }
.cc-small { font-size: 1rem; margin: 0; line-height: 1.6; }

.cc-ratio-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.cc-ratio { font-family: 'Orbitron', var(--mono); font-weight: 900; font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.cc-ratio-note { font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.cc-grades { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cc-grade { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.cc-grade-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.cc-badge { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: .8rem; padding: 4px 12px; border-radius: 999px; letter-spacing: .04em; background: var(--surface2); color: var(--muted); }
.cc-badge.pass { background: #ecfdf5; color: var(--teal-dark); }
.cc-badge.fail { background: var(--accent-bg); color: var(--accent-fg); }

@media (max-width: 480px) { .cc-grades { grid-template-columns: 1fr; } }