/* === Drizzle === */
#drizzle-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#board-view, #post-view, #admin-view { position: relative; z-index: 1; }
#drizzle-ui {
  position: fixed; left: 20px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
#drizzle-hud {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--accent-soft); border-radius: 100px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink-dim); font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.02em; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#drizzle-hud:hover { color: var(--ink); border-color: var(--ink-dim); }
#drizzle-hud .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--drizzle-tint); box-shadow: 0 0 6px var(--drizzle-tint);
}
#drizzle-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--accent-soft); border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem;
  color: var(--ink-dim); width: 232px;
}
.dz-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dz-key { letter-spacing: 0.04em; text-transform: lowercase; }
.dz-seg { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.dz-seg button {
  padding: 3px 8px; border: 1px solid var(--accent-soft); border-radius: 100px;
  background: transparent; color: var(--ink-dim); font: inherit; cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.dz-seg button:hover { color: var(--ink); border-color: var(--ink-dim); }
.dz-seg button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dz-row input[type="range"] { width: 120px; accent-color: var(--drizzle-tint); cursor: pointer; }
.dz-swatches { display: flex; gap: 6px; }
.dz-swatches button {
  width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--sw); border: 1px solid var(--accent-soft); transition: box-shadow var(--motion-fast);
}
.dz-swatches button:hover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink-dim); }
.dz-swatches button.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
.dz-toggle {
  position: relative; width: 34px; height: 18px; border-radius: 100px; padding: 0;
  border: 1px solid var(--accent-soft); background: transparent; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dz-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ink-dim); transition: background-color var(--motion-fast);
}
.dz-toggle.active { background: var(--drizzle-tint); border-color: var(--drizzle-tint); }
.dz-toggle.active::after { transform: translateX(16px); background: var(--bg); }

/* === Sun === */
#sun-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
/* Read-only status pills for sun and moon (the drizzle one is a button). */
#sun-hud, #moon-hud {
  position: fixed; left: 20px; bottom: 18px; z-index: 2; display: none;
  align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--accent-soft); border-radius: 100px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink-dim); font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.02em; pointer-events: none;
}
#sun-hud .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun-tint); box-shadow: 0 0 6px var(--sun-tint);
}

/* === Moon === */
#moon-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
#moon-gl-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
#moon-hud .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--moon-tint); box-shadow: 0 0 6px var(--moon-tint);
}
.icon-btn.is-active { color: var(--ink); }