/* ============================================================
   Poolside /government — dot-grid component (local replica)
   Faithful port of the scoped `.svelte-14olq78` styles.
   Dots are SQUARES (aspect-ratio:1/1, no border-radius) laid
   out in a 1fr grid; hover changes COLOR only (no scaling).
   ============================================================ */

:root {
  /* Primary (blue/indigo) */
  --color-pri-100: #e6e4ff;
  --color-pri-200: #c7c4ff;
  --color-pri-300: #9b96ff;
  --color-pri-400: #6f68ff;
  --color-pri-500: #4b44f5;
  --color-pri-800: #211b8c;
  /* Secondary (warm) */
  --color-sec-300: #ffb38a;
  --color-sec-600: #ff7a3c;
  --color-sec-800: #c43d12;
  /* Events */
  --color-events-green: #37d67a;
  /* Mono scale */
  --color-mono-200: #ece9e3;
  --color-mono-300: #cfccc4;
  --color-mono-400: #a39e95;
  --color-mono-500: #6f6b63;
  --color-mono-800: #26241f;
  --color-mono-900: #16140f;
}

/* ---------- Grid container ---------- */
.dot-grid {
  --columns: 20;
  --rows: 12;
  --hover-color: var(--color-pri-200);

  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: 2px;
  /* Explicit width: the original relies on a sized parent; in a flex
     gallery a `width:100%` + `container-type:inline-size` grid collapses
     to its padding/border (dots compute to 0px). Fix with a real width. */
  box-sizing: border-box;
  width: 260px;
  max-width: 260px;
  padding: 6px;

  background: transparent;
  border: none;
  border-radius: 16px;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ---------- Individual dot (a true square) ---------- */
.dot {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--color-mono-300);
  transition: background-color 0.14s ease-out, transform 0.18s ease-out;
}

/* Hover blend: base color -> --hover-color by --hover-intensity (0..1).
   Only ever added to base dots, so typed dots keep their color. */
.dot--hover {
  background: color-mix(
    in srgb,
    var(--hover-color) calc(var(--hover-intensity, 0) * 100%),
    var(--color-mono-300)
  );
}

/* ---------- Type colors (the illustration) ---------- */
/* NOTE: base dots intentionally have NO explicit light rule — they inherit
   `.dot`'s mono-300. `.dot--hover` (defined above) must win for hovered base
   dots, so we must not re-declare `.dot--base` here (it would override hover). */
.dot--edge        { background: var(--color-pri-100); }
.dot--wave        { background: var(--color-pri-500); }

.dot--green       { background: var(--color-events-green); }
.dot--green-edge  { background: color-mix(in srgb, var(--color-events-green) 35%, var(--color-mono-300)); }

.dot--warm-orange { background: var(--color-sec-600); }
.dot--warm-red    { background: var(--color-sec-800); }
.dot--warm-yellow { background: var(--color-sec-300); }

/* Invented-type colors */
.dot--pri   { background: var(--color-pri-400); }
.dot--sec   { background: var(--color-sec-300); }
.dot--mono  { background: var(--color-mono-500); }
.dot--cyan  { background: #4fd6e0; }
.dot--pink  { background: #ff7ad9; }

/* Extended palette — used by the extra pattern library */
.dot--blue    { background: #5b8def; }
.dot--red     { background: #ff5b6e; }
.dot--gold    { background: #ffd166; }
.dot--purple  { background: #b388ff; }
.dot--teal    { background: #2ec4b6; }
.dot--lime    { background: #a3e635; }
.dot--magenta { background: #ff5cf0; }
.dot--white   { background: #f4f4f5; }
.dot--orange  { background: #ff9f45; }
.dot--violet  { background: #8b5cf6; }
.dot--emerald { background: #34d399; }
.dot--rose    { background: #fb7185; }
.dot--sky     { background: #38bdf8; }
.dot--amber   { background: #fbbf24; }
.dot--indigo  { background: #818cf8; }
.dot--slate   { background: #64748b; }
.dot--green2  { background: #7ee787; }
.dot--yellow2 { background: #fde047; }

/* ---------- Dark theme ---------- */
[data-theme="dark"] .dot--base { background: rgb(40, 39, 36); }
[data-theme="dark"] .dot--hover {
  background: color-mix(
    in srgb,
    var(--hover-color) calc(var(--hover-intensity, 0) * 100%),
    rgb(40, 39, 36)
  );
}
[data-theme="dark"] .dot--green-edge {
  background: color-mix(in srgb, var(--color-events-green) 35%, rgb(40, 39, 36));
}

@media (prefers-reduced-motion: reduce) {
  .dot { transition: none; }
}

/* mount container — full-width, grid centered.
   The element uses the CLASS .dotgrid-mount (there can be several per page). */
.dotgrid-mount { margin: 0 0 16px; display: flex; justify-content: center; }
.dotgrid-mount .dot-grid { margin: 0; }