/* Background canvas sits behind .page (see index.css) */
#app {
  position: fixed;
  inset: 0;
  z-index: 0;
  cursor: default;
}

#webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Colors come from the tokens in index.css */
#theme-toggle {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  /* raised liquid glass pill (tokens in index.css) */
  background: var(--pill);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: blur(14px) saturate(160%); /* Safari ignores var() here */
  box-shadow: var(--glass-pill-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: transform 0.2s ease;
}
#theme-toggle:hover {
  transform: scale(1.06);
}
#theme-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--toggle-icon);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───────── Paint pen (js/sketch.js) ─────────
   Sits just above the theme toggle; its colours open upwards.
   While painting, the paint surface replaces the honeycomb. */
#sketch-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 0;
}
html.is-sketching #sketch-canvas { display: block; }
html.is-sketching #webgl-canvas { display: none; }

/* Pen cursor (and no touch scrolling) only on the empty space you can paint on. Everything
   inside it gets its normal cursor back instead of inheriting the pen; :where() keeps that reset
   weaker than any element's own cursor (buttons, cards, links keep their pointer). */
:where(html.is-sketching) :is(.page, .navigator, .navigator-inner, .content, .content-inner, .carousel-wrapper) {
  cursor: var(--sketch-pen, default);
  touch-action: none;
}
:where(html.is-sketching :is(.page, .navigator, .navigator-inner, .content, .content-inner, .carousel-wrapper)
       > :not(.navigator, .navigator-inner, .content, .content-inner, .carousel-wrapper)) {
  cursor: auto;
}

.sketch-dock {
  position: fixed;
  left: 28px;
  bottom: calc(28px + 44px + 12px);   /* toggle offset + toggle size + gap */
  z-index: 10;
  width: 44px;
}

#sketch-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--pill);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: blur(14px) saturate(160%); /* Safari ignores var() here */
  box-shadow: var(--glass-pill-shadow);
  cursor: pointer;
  transition: transform 0.2s ease;
}
#sketch-toggle:hover { transform: scale(1.06); }
#sketch-toggle:active { transform: scale(0.94); }
#sketch-toggle:focus-visible { outline: 2px solid var(--toggle-icon); outline-offset: 3px; }

.sketch-ico {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1), opacity 0.25s ease;
}
.sketch-pen path {
  fill: var(--tip, var(--toggle-icon));
  stroke: var(--toggle-icon);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.sketch-cross {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--toggle-icon);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transform: rotate(-135deg) scale(0.3);
}
.sketch-dock:not(.open) .sketch-pen path { fill: none; }   /* outline pen at rest, like the other icons */
.sketch-dock.open .sketch-pen { opacity: 0; transform: rotate(135deg) scale(0.3); }
.sketch-dock.open .sketch-cross { opacity: 1; transform: none; }

/* Colours: a column above the pen */
.sketch-swatches {
  position: absolute;
  left: 4px;
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  visibility: hidden;
  transition: visibility 0s 0.45s;
}
.sketch-dock.open .sketch-swatches { visibility: visible; transition-delay: 0s; }

.sketch-swatches .sw {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 6px 14px -6px rgb(0 0 0 / 0.4);
  opacity: 0;
  transform: translateY(26px) scale(0.3);
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1), opacity 0.2s ease, box-shadow 0.15s ease;
  transition-delay: calc(var(--i, 0) * 28ms);
}
.sketch-dock.open .sw { opacity: 1; transform: none; }
.sketch-dock.open .sw:hover { transform: scale(1.12); transition-delay: 0s; }
.sketch-swatches .sw[aria-pressed="true"],
.sketch-swatches .sw.custom.on {
  box-shadow: 0 0 0 3px var(--canvas-bg), 0 0 0 5px var(--toggle-icon), 0 6px 14px -6px rgb(0 0 0 / 0.4);
}
.sketch-swatches .sw:focus-visible,
.sketch-swatches .sw.custom:focus-within { outline: 2px solid var(--toggle-icon); outline-offset: 4px; }
.sketch-swatches .sw.custom {
  background: conic-gradient(#ff4d4d, #ffb84d, #f5ec4f, #5ee07a, #4dc3ff, #6b6bff, #d85cff, #ff4d4d);
  overflow: hidden;
}
.sketch-swatches .sw.custom::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--custom, var(--canvas-bg));
  box-shadow: 0 0 0 2px var(--canvas-bg);
  pointer-events: none;
}
.sketch-swatches .sw.custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

/* Below 1024px the toggle is top-right: the pen sits under it and the colours open downwards */
@media (max-width: 1023.98px) {
  .sketch-dock { display: none; }   /* no room to paint around the cards on a phone */
}

@media (prefers-reduced-motion: reduce) {
  .sketch-ico, .sketch-swatches .sw, #sketch-toggle { transition: none !important; }
}