.contrast-color-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.contrast-color-row .workbench-field{margin-bottom:0}.contrast-color-inputs{display:flex;gap:8px;align-items:center}.contrast-color-inputs input[type=color]{width:48px;height:44px;flex:none;padding:2px;border:1px solid var(--color-slate-300);border-radius:8px;background:var(--color-surface-secondary);cursor:pointer}.contrast-color-inputs .workbench-input{font-family:var(--font-family-mono);text-transform:uppercase}.contrast-bold{align-self:end}.contrast-preview{margin-top:8px;border:1px solid var(--color-slate-200);border-radius:8px;padding:24px 16px;min-height:96px;display:flex;align-items:center;overflow-wrap:anywhere}.contrast-preview-text{line-height:1.5}.contrast-ratio{margin:0 0 8px;font-family:var(--font-family-heading);font-size:1.75rem;font-weight:700;color:var(--color-slate-900);font-variant-numeric:tabular-nums}.contrast-category{margin:0 0 16px;font-size:.875rem;color:var(--color-slate-700)}.contrast-wcag{list-style:none;margin:0;padding:0;display:grid;gap:8px}.contrast-wcag li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--color-slate-200);border-radius:8px;font-size:.875rem;color:var(--color-slate-600)}.contrast-wcag li.is-applicable{border:2px solid var(--color-slate-700);color:var(--color-slate-900);font-weight:500}.contrast-badge{flex:none;min-width:4.5em;text-align:center;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700}.is-pass .contrast-badge{background:var(--color-success-bg);color:var(--color-success-dark)}.is-fail .contrast-badge{background:var(--color-error-bg);color:var(--color-error-dark)}@media (max-width: 480px){.contrast-color-row{grid-template-columns:minmax(0,1fr);gap:0}.contrast-color-row .workbench-field{margin-bottom:16px}}.contrast-inline-label{font-size:.8125rem;color:var(--color-slate-600);margin-right:4px}