/**
 * Single-post reading mode: html.hibrid-light + horizontal switch (js/theme-light.js).
 *
 * Dark (default): dark rounded-square knob LEFT, moon icon on knob, sun bare on right.
 * Light (--on):   white rounded-square knob RIGHT, sun icon on knob, moon bare on left.
 *
 * Track stays the same gray in both states. Knob slides left → right.
 */

/* ── Article light mode ──────────────────────────────────────── */
html.hibrid-light body.single .single-content-wrapper {
  background: #ffffff !important;
}

html.hibrid-light .single-content-wrapper .single-article-content {
  color: #333333;
}

html.hibrid-light .single-content-wrapper .single-article-content h2,
html.hibrid-light .single-content-wrapper .single-article-content h3 {
  color: #111111;
}

html.hibrid-light .single-content-wrapper .single-article-content p,
html.hibrid-light .single-content-wrapper .single-article-content li {
  color: #333333;
}

html.hibrid-light .single-content-wrapper .single-article-content blockquote {
  background: #f4f4f4;
  color: #444444;
}

html.hibrid-light .single-content-wrapper .page-links {
  color: #555555;
}

/* ── Float container ─────────────────────────────────────────── */
.single-reading-mode-float {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: max(18px, env(safe-area-inset-left, 0px));
  z-index: 5;
}

/* ── Button reset ────────────────────────────────────────────── */
.hibrid-rm-switch {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.hibrid-rm-switch:focus {
  outline: none;
}

.hibrid-rm-switch:focus-visible .hibrid-rm-switch-track {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

/* ── Track ───────────────────────────────────────────────────── */
/*
 * Width  = knob(32) + icon-slot(32) + 2*padding(3) = 70px
 * Height = knob(32) + 2*padding(3) = 38px
 */
.hibrid-rm-switch-track {
  display: block;
  position: relative;
  width: 70px;
  height: 38px;
  border-radius: 11px;
  background: #7a7a80;
  transition: background 0.35s ease;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* ── Icon slots: left and right halves of the track ─────────── */
.hibrid-rm-icon-slot {
  position: absolute;
  top: 0;
  width: 35px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  pointer-events: none;
  z-index: 0;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.hibrid-rm-icon-slot--left  { left: 0; }
.hibrid-rm-icon-slot--right { right: 0; }

/* Dark mode (default): knob is on the left (over moon) — hide left slot icon;
   sun is bare on the right — show it dimly */
.hibrid-rm-icon-slot--left  { opacity: 0; }
.hibrid-rm-icon-slot--right { color: rgba(255, 255, 255, 0.55); opacity: 1; }

/* Light mode (--on): knob slides right (over sun) — hide right slot icon;
   moon is bare on the left — show it dimly */
.hibrid-rm-switch--on .hibrid-rm-icon-slot--left  { color: rgba(255, 255, 255, 0.55); opacity: 1; }
.hibrid-rm-switch--on .hibrid-rm-icon-slot--right { opacity: 0; }

/* ── Knob ────────────────────────────────────────────────────── */
/*
 * Knob is 32×32, sits 3px from edges.
 * Default: left (over moon).  --on: right (over sun).
 * travel = 70 - 32 - 3 - 3 = 32px
 */
.hibrid-rm-switch-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #1c1c1e;
  overflow: hidden;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.35s ease;
  z-index: 1;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

/* Slide knob right and turn white when light mode is on */
.hibrid-rm-switch--on .hibrid-rm-switch-knob {
  transform: translateX(32px);
  background: #ffffff;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

/* ── Knob icons: the active icon shown on top of the knob ─────── */
.hibrid-rm-knob-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 2;
  transition: opacity 0.25s ease, color 0.35s ease;
  pointer-events: none;
}

/* Dark mode: show moon on knob (white), hide sun */
.hibrid-rm-knob-icon--moon { color: rgba(255, 255, 255, 0.9); opacity: 1; }
.hibrid-rm-knob-icon--sun  { opacity: 0; }

/* Light mode: show sun on knob (dark gray), hide moon */
.hibrid-rm-switch--on .hibrid-rm-knob-icon--moon { opacity: 0; }
.hibrid-rm-switch--on .hibrid-rm-knob-icon--sun  { color: rgba(80, 80, 85, 0.85); opacity: 1; }