/* Extended color tools - shared styling */

.ce-help { font-size: .8125rem; color: var(--color-text-muted); margin: 8px 0 0; }

/* Generic swatch */
.ce-swatch { display: inline-flex; flex-direction: column; align-items: center; }
.ce-swatch-color { width: 100%; height: 60px; border: 1px solid rgba(0,0,0,.06); border-radius: 6px; cursor: default; }
.ce-swatch-meta { padding-top: 4px; text-align: center; font-size: .75rem; }
.ce-swatch-label { color: var(--color-text-muted); }
.ce-swatch-hex { font-family: ui-monospace, Menlo, monospace; cursor: pointer; }
.ce-swatch-hex.is-copied,
[data-copy].is-copied { color: #15803D; }

/* WCAG Contrast preview */
.ce-preview { padding: 24px; border-radius: 12px; border: 1px solid var(--color-border); margin-top: 16px; }
.ce-preview-large { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.ce-preview-normal { font-size: 1rem; margin-bottom: 4px; }
.ce-preview-small { font-size: .75rem; }

/* Color blindness cards */
.ce-cb-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; height: 100%; }
.ce-cb-swatch { width: 100%; height: 80px; border-radius: 6px; }
.ce-cb-label { font-size: .75rem; color: var(--color-text-muted); text-align: center; }
.ce-cb-hex { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; cursor: pointer; }
.ce-cb-hex.is-copied { color: #15803D; }

/* Palette generator strips */
.ce-palette { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.ce-palette-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: .9375rem; }
.ce-palette-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }

/* Tailwind scale */
.ce-tw-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 991.98px) { .ce-tw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ce-tw-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ce-tw-color { width: 100%; height: 70px; border-radius: 6px; border: 1px solid rgba(0,0,0,.05); }
.ce-tw-stop { font-size: .75rem; font-weight: 700; color: var(--color-text-muted); }
.ce-tw-hex { font-family: ui-monospace, Menlo, monospace; font-size: .6875rem; cursor: pointer; word-break: break-all; text-align: center; }

/* Random color grid */
.ce-random-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ce-random-card { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.ce-random-color { height: 100px; }
.ce-random-hex { padding: 8px 10px; font-family: ui-monospace, Menlo, monospace; font-size: .8125rem; cursor: pointer; text-align: center; }

/* Color name finder */
.ce-name-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; align-items: center; height: 100%; }
.ce-name-card.is-best { border-color: var(--color-primary); background: var(--color-primary-light); }
.ce-name-color { width: 60px; height: 60px; border-radius: 6px; flex-shrink: 0; }
.ce-name-meta { flex: 1; min-width: 0; }
.ce-name-name { font-size: .9375rem; font-weight: 600; }
.ce-name-hex { font-family: ui-monospace, Menlo, monospace; font-size: .8125rem; cursor: pointer; }
.ce-name-dist { font-size: .6875rem; color: var(--color-text-muted); }

/* Lighten/darken */
.ce-side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; }
.ce-big-swatch { width: 100%; height: 120px; border-radius: 12px; border: 1px solid rgba(0,0,0,.06); margin-bottom: 8px; }
.ce-big-label { font-size: .8125rem; color: var(--color-text-muted); }
.ce-big-label code { color: var(--color-text); cursor: pointer; }

.ce-ld-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 991.98px) { .ce-ld-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ce-ld-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ce-ld-step.is-current { transform: scale(1.05); }
.ce-ld-color { width: 100%; height: 60px; border-radius: 6px; border: 1px solid rgba(0,0,0,.05); }
.ce-ld-pct { font-size: .75rem; font-weight: 600; color: var(--color-text-muted); }
.ce-ld-hex { font-family: ui-monospace, Menlo, monospace; font-size: .6875rem; cursor: pointer; }