/*
 * edu.krisyotam.com — shared theme toggle
 *
 * 3-state (auto / light / dark), fixed top-right. Pure CSS: works with
 * zero JavaScript via radio + :has(). theme.js is progressive
 * enhancement only — it adds persistence + no-flash restore. Without it
 * the toggle still flips the page, it just resets to auto per page load.
 *
 * Each page gates its own dark colours like this:
 *   html:has(#theme-dark:checked) body X,
 *   html.t-dark body X { ...dark... }
 *   @media (prefers-color-scheme: dark) {
 *     html:not(.t-light):not(.t-dark):has(#theme-auto:checked) body X { ...dark... }
 *   }
 */

/* native form controls follow an explicit choice */
html:has(#theme-light:checked) { color-scheme: light; }
html:has(#theme-dark:checked)  { color-scheme: dark; }

.mode-container {
  position: fixed;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 100;
}

.mode-container input { display: none; }

.mode-container label {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.25;
  transition: opacity 0.15s, border-color 0.15s;
}

.mode-container:hover label { opacity: 1; }

.mode-container label.auto  { background: linear-gradient(90deg, #fff 50%, #555 50%); }
.mode-container label.light { background: #fff; }
.mode-container label.dark  { background: #555; }

/* highlight the active square */
#theme-auto:checked  ~ label.auto,
#theme-light:checked ~ label.light,
#theme-dark:checked  ~ label.dark { opacity: 1; }

/* ---------- corner decoration (home: melancholia, chess: chess art) ---------- */

.corner-art {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}

.corner-art img {
  width: clamp(120px, 35vmin, 500px);
  height: auto;
}