/**
 * Colour Palette Generator.
 *
 * Own stylesheet and own scoped palette, like every other tool family here.
 * The swatch blocks set their own background from a data value at runtime, so
 * nothing in this file decides what a colour looks like; it only makes the
 * layout, the labels and the contrast verdicts legible on top of them.
 */

.sk-pal-root {
  --sk-ink: #28323a;
  --sk-muted: #66727b;
  --sk-accent: #68438b;
  --sk-accent-strong: #452b61;
  --sk-on-accent: #ffffff;
  --sk-accent-bg: #68438b;
  --sk-accent-hover: #5c3b7a;
  --sk-accent-line: rgba(104, 67, 139, 0.34);
  --sk-accent-soft: rgba(104, 67, 139, 0.12);
  --sk-line: #dfe3e8;
  --sk-surface: #ffffff;
  --sk-soft: #f7f5fa;
  --sk-bg: #ffffff;
  --sk-shadow: 0 1px 2px rgba(20, 24, 30, 0.06), 0 6px 18px rgba(20, 24, 30, 0.05);
  --sk-pass: #1b5e20;
  --sk-warn: #8a5200;
  --sk-fail: #b3261e;

  display: block;
  box-sizing: border-box;
  margin-top: 20px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

html[data-sk-scheme="dark"] .sk-pal-root {
  --sk-ink: #e9edf2;
  --sk-muted: #aab5c1;
  --sk-accent: #c79bf0;
  --sk-accent-strong: #e6cbf8;
  --sk-on-accent: #1a1220;
  --sk-accent-bg: #a679dd;
  --sk-accent-hover: #b98ae4;
  --sk-accent-line: rgba(199, 155, 240, 0.34);
  --sk-accent-soft: rgba(199, 155, 240, 0.16);
  --sk-line: #333d48;
  --sk-surface: #222a33;
  --sk-soft: #1a2028;
  --sk-bg: #171d24;
  --sk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
}

.sk-pal-root *,
.sk-pal-root *::before,
.sk-pal-root *::after { box-sizing: border-box; }

.sk-pal-h2 { margin: 26px 0 10px; font-size: 1.35rem; color: var(--sk-ink); }
.sk-pal-h3 { margin: 26px 0 10px; font-size: 1.05rem; color: var(--sk-ink); }

.sk-pal-notice {
  margin-bottom: 14px;
  padding: 11px 14px;
  border-left: 4px solid var(--sk-accent);
  border-radius: 10px;
  background: var(--sk-soft);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ Drop */

.sk-pal-drop {
  display: block;
  padding: 30px 20px;
  border: 2px dashed var(--sk-line);
  border-radius: 16px;
  background: var(--sk-soft);
  text-align: center;
  cursor: pointer;
}

.sk-pal-drop:hover,
.sk-pal-drop:focus-visible { border-color: var(--sk-accent); }

.sk-pal-drop[data-drag="true"] {
  border-color: var(--sk-accent);
  background: var(--sk-accent-soft);
}

.sk-pal-drop:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 3px; }

.sk-pal-drop strong { display: block; font-size: 1.05rem; color: var(--sk-ink); }
.sk-pal-drop span { display: block; margin-top: 4px; color: var(--sk-muted); font-size: 0.88rem; }

.sk-pal-empty {
  margin-top: 20px;
  padding: 30px 22px;
  border: 1px dashed var(--sk-line);
  border-radius: 14px;
  background: var(--sk-soft);
  color: var(--sk-muted);
  text-align: center;
}

.sk-pal-empty p { max-width: 54ch; margin: 0 auto; font-size: 0.94rem; }

/* ------------------------------------------------------------------ Head */

.sk-pal-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--sk-line);
  border-radius: 16px;
  background: var(--sk-surface);
}

.sk-pal-preview {
  width: 132px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--sk-line);
}

.sk-pal-name { margin: 0; font-weight: 700; color: var(--sk-ink); overflow-wrap: anywhere; }
.sk-pal-meta { margin: 4px 0 0; color: var(--sk-muted); font-size: 0.85rem; }

.sk-pal-countwrap { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.sk-pal-label { font-weight: 700; font-size: 0.9rem; }

.sk-pal-count {
  width: 74px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--sk-line);
  border-radius: 9px;
  background: var(--sk-surface);
  color: var(--sk-ink);
  font: inherit;
}

.sk-pal-count:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }

/* --------------------------------------------------------------- Buttons */

.sk-pal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--sk-line);
  border-radius: 11px;
  background: var(--sk-surface);
  color: var(--sk-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.sk-pal-btn:hover { border-color: var(--sk-accent); background: var(--sk-accent-soft); }
.sk-pal-btn:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }

.sk-pal-btn-primary {
  border-color: var(--sk-accent);
  background: var(--sk-accent);
  color: var(--sk-on-accent);
}

.sk-pal-btn-primary:hover {
  background: var(--sk-accent-hover);
  border-color: var(--sk-accent-hover);
  color: var(--sk-on-accent);
}

/* -------------------------------------------------------------- Swatches */

.sk-pal-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.sk-pal-swatch {
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  background: var(--sk-surface);
  overflow: hidden;
}

.sk-pal-block {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 108px;
  padding: 10px;
  font-size: 1.5rem;
  font-weight: 800;
}

.sk-pal-blocktext { opacity: 0.92; }

.sk-pal-swmeta { padding: 11px 12px; }

.sk-pal-hex {
  display: block;
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--sk-line);
  border-radius: 8px;
  background: var(--sk-soft);
  color: var(--sk-ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: copy;
}

.sk-pal-hex:hover { border-color: var(--sk-accent); }
.sk-pal-hex:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }

.sk-pal-swline { margin: 7px 0 0; color: var(--sk-muted); font-size: 0.78rem; }

/* ---------------------------------------------------------------- Pairs */

.sk-pal-pairs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.sk-pal-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  background: var(--sk-surface);
  font-size: 0.88rem;
}

.sk-pal-pairchips { display: inline-flex; align-items: center; gap: 6px; color: var(--sk-ink); }

.sk-pal-chip {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 5px;
}

.sk-pal-verdict { font-weight: 700; }
.sk-pal-verdict.is-pass { color: var(--sk-pass); }
.sk-pal-verdict.is-large { color: var(--sk-warn); }
.sk-pal-verdict.is-fail { color: var(--sk-fail); }

html[data-sk-scheme="dark"] .sk-pal-verdict.is-pass { color: #a5d6a7; }
html[data-sk-scheme="dark"] .sk-pal-verdict.is-large { color: #ffcc80; }
html[data-sk-scheme="dark"] .sk-pal-verdict.is-fail { color: #ffb4a9; }

.sk-pal-help { margin: 8px 0 0; color: var(--sk-muted); font-size: 0.84rem; }

/* ----------------------------------------------------------------- Ramp */

.sk-pal-ramp {
  display: flex;
  flex-wrap: wrap;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sk-line);
}

.sk-pal-rampcell {
  flex: 1 1 90px;
  min-height: 62px;
  padding: 8px;
  border: 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: copy;
}

.sk-pal-rampcell:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: -3px; }

.sk-pal-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }

.sk-pal-note {
  margin-top: 20px;
  padding: 13px 15px;
  border-left: 4px solid var(--sk-accent);
  border-radius: 10px;
  background: var(--sk-soft);
  color: var(--sk-ink);
  font-size: 0.9rem;
}

.sk-pal-warn {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #f0c4c0;
  border-radius: 10px;
  background: #fff6f5;
  color: #8c1d18;
  font-size: 0.92rem;
}

html[data-sk-scheme="dark"] .sk-pal-warn {
  border-color: #6b2a24;
  background: #2a1512;
  color: #ffb4a9;
}

/* --------------------------------------------------------------- Narrow */

@media (max-width: 640px) {
  .sk-pal-root { margin-top: 12px; padding: 0 4px; }

  .sk-pal-head { grid-template-columns: minmax(0, 1fr); }

  .sk-pal-preview { width: 100%; max-height: 190px; object-fit: cover; }

  .sk-pal-swatches { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

  .sk-pal-btn { flex: 1 1 100%; }

  .sk-pal-rampcell { flex: 1 1 45%; }
}

html[data-sk-text-scale="large"] .sk-pal-head,
html[data-sk-text-scale="xlarge"] .sk-pal-head,
html[data-sk-text-scale="large"] .sk-pal-pair,
html[data-sk-text-scale="xlarge"] .sk-pal-pair {
  grid-template-columns: minmax(0, 1fr);
  flex-direction: column;
  align-items: flex-start;
}