/* ===== COLORS ===== */
.swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--cr-space-3); }
.swatch { border-radius:var(--cr-radius-control); overflow:hidden; border:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); }
.swatch .cap { height:84px; display:flex; align-items:flex-end; padding:10px; color:var(--cr-color-action-primary-on-fill); font-weight:700; font-size:.8rem; }
.swatch .meta { padding:10px 12px; }
.swatch .meta .nm { font-weight:700; font-size:.82rem; }
.swatch .meta .hx { font-family:var(--cr-font-mono); font-size:.72rem; color:var(--cr-color-text-secondary); }
.ramp { display:flex; border-radius:var(--cr-radius-control); overflow:hidden; border:1px solid var(--cr-site-hairline); }
.ramp span { flex:1; height:56px; }
.tokrow { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.radius-swatch { text-align:center; }
.radius-swatch .box { width:76px; height:76px; background:linear-gradient(135deg,var(--cr-color-action-primary-fill),var(--cr-color-action-tertiary-fill)); margin:0 auto 8px; }
.radius-swatch .nm { font-size:.78rem; font-weight:700; }
.radius-swatch .tk { font-family:var(--cr-font-mono); font-size:.68rem; color:var(--cr-color-text-secondary); }
/* --mdur / --mease are set per-card by the motion demo so each chip animates at
   the duration and easing token it is illustrating. */
.motion-chip { padding:12px 16px; border-radius:var(--cr-radius-control); background:var(--cr-site-surface-tint-3); font-weight:600; font-size:.82rem; cursor:default;
  transition:transform var(--mdur,300ms) var(--mease,cubic-bezier(0.2,0,0,1)), background var(--cr-motion-duration-short); }
.motion-chip:hover { transform:translateX(6px); background:var(--cr-color-action-primary-state-hover); }

/* ===== CONTRAST INTELLIGENCE ===== */
/* Pass/fail is never carried by color alone: every result also states its
   verdict in words and its required ratio, per the Crossroads color standard. */
.clab-head { display:flex; gap:var(--cr-space-4); align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.clab-sblink { font-size:.8rem; font-weight:700; color:var(--cr-site-primary-hover); text-decoration:none; border:1px solid var(--cr-site-hairline);
  border-radius:var(--cr-radius-pill); padding:8px 14px; white-space:nowrap; transition:background var(--cr-motion-duration-short) var(--cr-motion-ease-standard); }
.clab-sblink:hover { background:var(--cr-site-surface-tint-3); }

.clab-grid { display:grid; grid-template-columns:minmax(240px,1fr) minmax(260px,1.2fr); gap:var(--cr-space-5); margin-top:var(--cr-space-5); }
@media (max-width:760px) { .clab-grid { grid-template-columns:1fr; } }

.clab-controls { display:flex; flex-direction:column; gap:var(--cr-space-3); }
.clab-field { display:flex; flex-direction:column; gap:6px; }
.clab-field label { font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cr-color-text-secondary); }
.clab-field select { font:inherit; font-size:.84rem; padding:9px 12px; border-radius:var(--cr-radius-control);
  border:1px solid var(--cr-site-hairline); background:var(--cr-site-surface-tint-1); color:var(--cr-color-text-primary); }
.clab-field select:disabled { opacity:.55; }
.clab-field input[type="color"] { width:100%; height:38px; padding:2px; border:1px solid var(--cr-site-hairline); border-radius:var(--cr-radius-control); background:var(--cr-site-surface-tint-1); }
.clab-switch { display:flex; align-items:center; gap:10px; font-size:.84rem; font-weight:600; cursor:pointer; }
.clab-note { font-size:.76rem; margin:0; min-height:2.4em; }

.clab-preview { border-radius:var(--cr-radius-surface); padding:var(--cr-space-5); border:1px solid var(--cr-site-hairline);
  display:flex; flex-direction:column; gap:10px; transition:background var(--cr-motion-duration-short) var(--cr-motion-ease-standard), color var(--cr-motion-duration-short) var(--cr-motion-ease-standard); }
.clab-preview-eyebrow { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; opacity:.72; }
.clab-preview-title { font-size:1.02rem; }
.clab-preview-body { font-size:.84rem; margin:0; opacity:.9; }
.clab-preview-row { display:flex; align-items:center; gap:12px; margin-top:4px; }
.clab-preview-icon { width:26px; height:26px; flex:none; }
.clab-preview-btn { border:2px solid currentColor; border-radius:var(--cr-radius-pill); padding:7px 18px; font-size:.82rem; font-weight:700; }

.clab-ratio { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:var(--cr-space-5); }
.clab-ratio-value { font-family:var(--cr-font-sans); font-size:2.2rem; font-weight:700; line-height:1; }
.clab-ratio-pair { font-size:.76rem; color:var(--cr-color-text-secondary); }
.clab-ratio-invalid { font-size:.86rem; font-weight:600; color:var(--cr-color-action-warning-text); }

.clab-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--cr-space-3); margin-top:var(--cr-space-4); }
.clab-card { border-radius:var(--cr-radius-control); padding:12px 14px; border:1px solid var(--cr-site-hairline); background:var(--cr-site-surface-tint-1);
  display:flex; flex-direction:column; gap:3px; border-left:4px solid var(--cr-site-hairline); }
.clab-card[data-result="pass"] { border-left-color:var(--cr-color-action-success-fill); }
.clab-card[data-result="fail"] { border-left-color:var(--cr-color-action-warning-fill); }
.clab-card-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cr-color-text-secondary); }
.clab-card strong { font-size:.9rem; }
.clab-card-threshold { font-size:.72rem; color:var(--cr-color-text-secondary); }

.clab-advice:not(:empty) { margin-top:var(--cr-space-4); }
.clab-advice-inner { border-radius:var(--cr-radius-control); padding:14px 16px; background:var(--cr-color-feedback-warning-surface); border:1px solid var(--cr-site-hairline); }
.clab-advice-inner .muted { font-size:.78rem; margin:4px 0 10px; }
.clab-advice-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--cr-space-4); }
.clab-advice-title { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cr-color-text-secondary); }
.clab-advice-col ul { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.clab-advice-col li { display:flex; align-items:center; gap:8px; font-size:.76rem; }
.clab-advice-ratio { margin-inline-start:auto; font-weight:700; }
.clab-dot { width:16px; height:16px; border-radius:var(--cr-radius-field); flex:none; border:1px solid var(--cr-site-hairline); }

.clab-states-head { margin-top:var(--cr-space-6); }
.clab-subhead { font-size:.95rem; margin:0; }
.clab-states { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--cr-space-3); margin-top:var(--cr-space-3); }
.clab-state { border-radius:var(--cr-radius-control); border:1px solid var(--cr-site-hairline); padding:12px 14px; display:flex; flex-direction:column; gap:5px;
  border-left:4px solid var(--cr-site-hairline); background:var(--cr-site-surface-tint-1); }
.clab-state[data-result="pass"] { border-left-color:var(--cr-color-action-success-fill); }
.clab-state[data-result="fail"] { border-left-color:var(--cr-color-action-warning-fill); }
.clab-state-chip { align-self:flex-start; border-radius:var(--cr-radius-pill); padding:5px 14px; font-size:.76rem; font-weight:700; text-transform:capitalize; }
.clab-state-token { font-size:.68rem; color:var(--cr-color-text-secondary); overflow-wrap:anywhere; }
.clab-state strong { font-size:.94rem; }
.clab-state-verdict { font-size:.74rem; color:var(--cr-color-text-secondary); }