/* Guide page (คู่มือการใช้งาน) — a sidebar + white "panel" shell for the
   video player, sitting apart from the marketing header used on the rest
   of the site (see body.page-guide below).

   Dark and light mode share ONE structure here — same sidebar, same
   panel, same title/button layout — and differ only in color. Almost
   every color below is one of common.css's --color-*
   tokens (already dark/light aware via the header's mode-switch), so it
   swaps automatically; only the two page-background gradients use literal
   hex, because a pastel-pink gradient has no dark equivalent derivable
   from a token, so those two get one line each under body.page-light-preview
   / body.page-guide:not(.page-light-preview). Functionality/IDs are
   untouched — this file only styles the existing markup in guide.html. */

:root {
  --guide-radius-lg: 28px;
  --guide-radius-md: 16px;
  --guide-shadow: 0 24px 60px rgba(0, 0, 0, 0.16), 0 4px 18px rgba(0, 0, 0, 0.1);
  --guide-hot-pink: linear-gradient(90deg, #e2357a 0%, #f2649d 100%);
}

body.page-guide {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The site header stays at its natural height; the app shell below it
   grows to fill whatever's left of the viewport. */
body.page-guide .site-header {
  flex-shrink: 0;
}

.guide-app {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1;
  min-height: 0;
}

/* A touch wider than the default rail: the pill rows' longest label
   ("วิธีใช้คำสั่ง # ใน LINE กลุ่ม") needs it to stay on one line. */
@media (min-width: 1181px) {
  .guide-app {
    grid-template-columns: 310px 1fr;
  }
}

/* The only two spots that need literal (not token) color per mode: a
   pastel-pink page backdrop has no dark equivalent a token can derive. */
body.page-light-preview .guide-app {
  background: linear-gradient(160deg, #fff7fa 0%, #fdeef4 55%, #fbe3ed 100%);
}

body.page-guide:not(.page-light-preview) .guide-app {
  background: linear-gradient(160deg, #1c1326 0%, #170f20 55%, #110b18 100%);
}

/* Sidebar */
.guide-sidebar {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.page-light-preview .guide-sidebar {
  background: linear-gradient(190deg, #fff0f6 0%, #fde3ee 100%);
}

body.page-guide:not(.page-light-preview) .guide-sidebar {
  background: linear-gradient(190deg, #241730 0%, #160f1f 100%);
}

/* Reference look: the panel's own white/black fills the ENTIRE gutter
   between sidebar and panel for the full height, at every row, not just
   behind the active one — so every pill's rounded end simply sits on
   that shared backdrop instead of needing its own connecting shape. See
   .guide-stage-panel's inset and .guide-nav-groups's right padding
   below, which are what actually close the gutter; this rule only keeps
   the sidebar's OWN gradient from showing as a strip beside the panel. */
@media (min-width: 901px) {
  body.page-light-preview .guide-sidebar,
  body.page-guide:not(.page-light-preview) .guide-sidebar {
    background: transparent;
  }
}

/* Ambient glow at the sidebar's base — a soft pink blob with a highlight,
   purely decorative, sits behind the nav list, never intercepts clicks.
   Reads as a gentle blush on the light gradient and a warm glow on dark. */
.guide-sidebar::before,
.guide-sidebar::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.guide-sidebar::before {
  left: -18%;
  bottom: -16%;
  width: 65%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.7), transparent 42%),
    radial-gradient(circle at 50% 50%, #ffb3d7, #ff8dc2 55%, transparent 100%);
  opacity: 0.55;
  filter: blur(4px);
}

.guide-sidebar::after {
  left: 10%;
  bottom: -30%;
  width: 48%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.5), transparent 45%),
    radial-gradient(circle at 50% 50%, #ffa4cd, transparent 70%);
  opacity: 0.5;
}

/* Sidebar header — bold label with a pink book icon, no pill background.
   It doubles as the first group's own title, so that group's smaller
   title is hidden below it, and the second group gets a divider. */
.guide-sidebar-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 20px 6px;
  color: var(--color-text);
  font-size: 1.02rem;
  font-weight: 700;
}

.guide-sidebar-header-icon,
.guide-player-tag-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

.guide-sidebar-header-icon svg {
  width: 22px;
  height: 22px;
}

.guide-player-tag-icon svg {
  width: 18px;
  height: 18px;
}

.guide-nav-groups {
  position: relative;
  /* Above the sidebar's own ambient glow (z-index 0). */
  z-index: 5;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 14px 24px;
}

/* Beside the panel, items reach almost to the sidebar's own edge instead
   of stopping 14px short — closing most of the gap the panel's own left
   inset (below) doesn't already close. Must come after the base rule
   above, which would otherwise win on source order. */
@media (min-width: 901px) {
  .guide-nav-groups {
    padding-right: 4px;
  }
}

.guide-nav-group:first-child .guide-nav-group-title {
  display: none;
}

.guide-nav-group + .guide-nav-group {
  margin: 18px 8px 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.guide-nav-group-title {
  margin: 0 0 10px;
  padding: 0 12px;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.guide-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guide-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  /* var(--color-text-muted) reads too close to white in this site's own
     dark palette to work as a genuinely "muted" inactive state — a fixed
     scale (white-based in dark, neutral gray in light) instead. */
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.98rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.page-light-preview .guide-nav-item {
  color: #52525b;
}

.guide-nav-item:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

body.page-light-preview .guide-nav-item:hover {
  background: rgba(255, 255, 255, 0.55);
  color: #27272a;
}

.guide-nav-item:focus-visible {
  /* var(--color-primary) is the active pill's own fill, so it would
     disappear on that pill — white stands out on both the pill and the
     plain sidebar background in either mode. */
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* Active topic: a brand hot-pink pill with white text/icon, identical in
   both modes. */
.guide-nav-item[aria-current="true"],
.guide-nav-item[aria-current="true"]:hover {
  background: var(--guide-hot-pink);
  color: #fff;
  box-shadow: 0 12px 26px rgba(226, 53, 122, 0.35);
}

.guide-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.guide-nav-icon svg {
  width: 100%;
  height: 100%;
}

.guide-nav-label {
  line-height: 1.3;
  flex: 1;
}

/* Chevron on the active item only — a small "you are here, this opens
   into the panel on the right" cue. */
.guide-nav-chevron {
  flex-shrink: 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.guide-nav-item[aria-current="true"] .guide-nav-chevron {
  opacity: 1;
  transform: translateX(0);
}

/* Stage — the pink/dark backdrop the white/black panel floats on. */
.guide-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 28px;
  overflow: hidden;
}

/* The big panel — everything (badge, pagination, video, title, buttons)
   sits inside it. Inset from the stage so a sliver of the backdrop shows
   between it and the sidebar. Desktop/tablet only; mobile keeps a plain
   full-width card instead (see the max-width: 900px block). */
.guide-stage-panel {
  display: none;
}

@media (min-width: 901px) {
  .guide-stage-panel {
    display: block;
    position: absolute;
    z-index: 0;
    /* Left much tighter than the other three sides: this is what makes
       the panel's own color fill almost the whole gutter next to the
       sidebar (the rest is closed by .guide-nav-groups's own right
       padding), instead of leaving a strip of page backdrop there. */
    inset: 20px 24px 20px 4px;
    border-radius: 32px;
    background: var(--color-surface);
    box-shadow: var(--guide-shadow);
  }

  .guide-stage {
    /* Tight on top/bottom on purpose — this page is a video viewer
       first, so the video should claim as much of the vertical space
       as the chrome around it (topbar, title, buttons) allows. */
    /* Top is much taller than the panel's own 20px inset above: with
       only stage's own padding, the topbar pill sits 2px off the
       panel's top edge — basically touching it. */
    padding: 38px 40px 28px;
    /* Let the panel's soft shadow spill past the stage's left edge —
       clipped, it ended in a hard vertical line right at the sidebar
       edge. The page itself (body.page-guide) already clips overflow
       at this size. */
    overflow: visible;
  }

  .guide-stage-topbar {
    position: relative;
    z-index: 1;
  }
}

/* Topbar — the category badge and the pagination pill, floating above
   the panel. */
.guide-stage-topbar {
  width: 100%;
  max-width: 1440px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.guide-player-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Not used — dark and light now share the same category badge above, so
   there's nothing for the breadcrumb trail to show. */
.guide-breadcrumb {
  display: none;
}

.guide-pagination {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.guide-pagination-label {
  display: none;
}

.guide-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.guide-pagination-btn:hover {
  color: var(--color-primary);
}

.guide-pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.guide-player-index {
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--guide-hot-pink);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(226, 53, 122, 0.3);
}

/* The card itself, on mobile / narrower than 901px where there's no
   separate .guide-stage-panel: same rounding/shadow the panel carries at
   wider widths, just on the card directly. */
.guide-slide-card {
  position: relative;
  width: 100%;
  max-width: 1440px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border-radius: var(--guide-radius-lg);
  box-shadow: var(--guide-shadow);
  padding: 18px 18px 26px;
  /* The "balloon pop" in js/guide.js scales this on every topic change —
     center origin keeps it expanding evenly instead of drifting. */
  transform-origin: center;
}

/* At and above 901px, .guide-stage-panel (further up this file) is the
   one rounded, shadowed surface — this card becomes just a transparent
   layout wrapper inside it, so the video/title/buttons aren't sitting in
   a second rounded card nested inside the panel's own rounded corners. */
@media (min-width: 901px) {
  .guide-slide-card {
    z-index: 1;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* Bottom padding matters here even though the card has no visible
       edge of its own: with none, the button row's bottom == the
       card's bottom == only the stage/panel inset difference (8px)
       above the panel's own visible border, reading as buttons crammed
       against the frame. This reserves real breathing room there. */
    padding: 6px 0 22px;
  }
}

.guide-player-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  max-height: 84vh;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.3);
}

.guide-player-frame[data-aspect="landscape"] {
  aspect-ratio: 213 / 115;
}

.guide-player-frame[data-aspect="portrait"] {
  aspect-ratio: 98 / 213;
}

.guide-player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Fallback for browsers with no Fullscreen API on arbitrary elements
   (iOS Safari never implements it — requestFullscreen is undefined on
   every element there, not just the iframe). JS detects that and adds
   this class instead of calling the native API: fixed, edge-to-edge,
   aspect-ratio dropped so it fills the whole viewport regardless of the
   video's own shape. Needs its own close button since there's no
   Escape-key/native-chrome way out on a touch device. */
.guide-player-frame.is-fake-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
}

.guide-fs-exit-btn {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}

.guide-player-frame.is-fake-fullscreen .guide-fs-exit-btn {
  display: flex;
}

.guide-player-meta {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  flex: 0 0 auto;
}

.guide-player-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Icon matching the active topic's own sidebar icon — js/guide.js fills
   it in by cloning that item's icon SVG on every selection change. */
.guide-player-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.guide-player-icon svg {
  width: 30px;
  height: 30px;
}

.guide-player-heading h2 {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 800;
  text-wrap: balance;
}

.guide-player-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Two groups, not three equal buttons: ก่อนหน้า/ถัดไป are one paired
   navigation control (tight gap, so they read as a unit), and เต็มจอ is
   a separate view-mode toggle — set apart by a bigger gap and a
   vertical rule, and shrunk to a plain icon button so it doesn't
   compete with the navigation pair for attention. */
.guide-player-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.guide-player-actions-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guide-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.guide-player-actions .btn {
  padding: 8px 24px;
  font-size: 0.95rem;
}

.guide-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.guide-nav-btn:disabled:hover {
  border-color: var(--color-border) !important;
  background: transparent !important;
  color: var(--color-text) !important;
}

/* .btn-secondary itself (border/background/text) comes from common.css
   and is already dark/light aware — only the size above is guide-page
   specific. "Next" is the one primary action, in hot pink. */
.guide-player-actions .btn-primary {
  background: var(--guide-hot-pink);
  box-shadow: 0 12px 26px rgba(226, 53, 122, 0.35);
}

/* Same round-icon language as the pagination buttons up in the topbar,
   so it reads as "a view-mode control," not a third nav button. The
   vertical rule (::before) only draws when there's room beside the
   nav pair — on narrow widths flex-wrap can stack it onto its own row,
   where a floating line would look stray. */
.guide-fullscreen-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.guide-fullscreen-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface-alt);
}

@media (min-width: 421px) {
  .guide-fullscreen-btn::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: var(--color-border);
  }
}

/* ---------------------------------------------------------------------
   Responsive — shared between both modes; nothing below this point
   differs by color.
   --------------------------------------------------------------------- */

/* Tablet: a slightly narrower rail with tighter rows so the longer
   labels stay on one line, and the info box drops out of the panel's
   corner (too little width to float beside the centered buttons without
   covering them). */
@media (max-width: 1180px) and (min-width: 901px) {
  .guide-app {
    grid-template-columns: 264px 1fr;
  }

  .guide-nav-item {
    padding: 11px 14px;
    font-size: 0.92rem;
  }

  .guide-stage-panel {
    inset: 16px 18px 16px 4px;
    border-radius: 26px;
  }

  .guide-stage {
    padding: 32px 20px 22px;
  }
}

/* Mobile: drop the fixed-viewport app shell for a normal scrolling page —
   video first, full-width topic list stacked below it. */
@media (max-width: 900px) {
  body.page-guide {
    height: auto;
    overflow: visible;
  }

  .guide-app {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .guide-stage {
    order: 1;
    height: auto;
    padding: 20px 16px;
  }

  .guide-slide-card {
    height: auto;
    padding: 16px 14px 22px;
    border-radius: var(--guide-radius-md);
  }

  .guide-player-frame {
    flex: 0 0 auto;
    max-height: none;
  }

  .guide-player-frame[data-aspect="landscape"],
  .guide-player-frame[data-aspect="portrait"] {
    height: auto;
    width: 100%;
    max-width: 100%;
  }

  .guide-player-frame[data-aspect="portrait"] {
    max-width: 320px;
  }

  .guide-player-tag-pill {
    padding: 8px 14px 8px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .guide-pagination {
    gap: 6px;
  }

  .guide-pagination-btn {
    width: 32px;
    height: 32px;
  }

  .guide-player-index {
    padding: 6px 12px;
    font-size: 0.82rem;
  }

  .guide-sidebar {
    order: 2;
    height: auto;
  }

  .guide-nav-groups {
    overflow: visible;
  }
}

/* =====================================================================
   Dark mode only — glowing pink/purple borders around the shell, video,
   tip card and top pills, matching the neon reference. Light mode's flat
   pastel cards stay shadow-only (no glow border), so every rule below is
   scoped to body.page-guide:not(.page-light-preview). A box-shadow value
   fully replaces the previous one rather than stacking with it, so each
   override here repeats that element's existing drop-shadow alongside
   the new glow layer(s) instead of losing it.
   ===================================================================== */

/* The whole sidebar+panel shell sits inset with margin, rounded corners,
   and one glowing border wrapping both — not two separately bordered
   boxes. Desktop/tablet only; on the stacked mobile layout the sidebar
   and card are already full-width blocks with their own spacing. */
@media (min-width: 901px) {
  body.page-guide:not(.page-light-preview) .guide-app {
    margin: 18px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(236, 47, 125, 0.4);
    box-shadow:
      0 0 0 1px rgba(168, 85, 247, 0.14),
      0 0 40px rgba(236, 47, 125, 0.22),
      0 0 90px rgba(168, 85, 247, 0.12);
  }

  body.page-guide:not(.page-light-preview) .guide-stage-panel {
    box-shadow: var(--guide-shadow), 0 0 0 1px rgba(236, 47, 125, 0.3), 0 0 28px rgba(168, 85, 247, 0.12);
  }
}

body.page-guide:not(.page-light-preview) .guide-player-frame {
  box-shadow:
    0 26px 50px rgba(0, 0, 0, 0.3),
    0 0 0 1.5px rgba(236, 47, 125, 0.55),
    0 0 26px rgba(168, 85, 247, 0.25);
}

body.page-guide:not(.page-light-preview) .guide-player-tag-pill {
  border: 1px solid rgba(236, 47, 125, 0.3);
}

/* One outlined pill around the whole prev/count/next cluster, instead of
   three separately floating pieces. */
body.page-guide:not(.page-light-preview) .guide-pagination {
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(236, 47, 125, 0.3);
  background: rgba(255, 255, 255, 0.03);
}

body.page-guide:not(.page-light-preview) .guide-pagination-btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.page-guide:not(.page-light-preview) .guide-nav-item[aria-current="true"] {
  box-shadow: 0 12px 26px rgba(226, 53, 122, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* =====================================================================
   Extra ambient decoration on the page itself (behind the header, the
   sidebar and the panel) — two large, very soft blurred blobs anchored
   to the page's own corners, on top of the smaller ones already inside
   the sidebar/stage. Shared shape/position for both modes; only the
   color and opacity differ, since dark needs more presence to read
   against a near-black backdrop and light needs to stay subtle so it
   doesn't muddy the pastel gradient already there.
   ===================================================================== */

body.page-guide {
  position: relative;
}

body.page-guide::before,
body.page-guide::after {
  content: "";
  position: absolute;
  /* Negative, not 0: at z-index 0 this generated content is the LAST
     thing in body's paint order (::after always sinks after every real
     child), so it was drawing on top of the panel. Negative keeps it a
     true backdrop, behind all real content, still peeking around the
     edges where nothing opaque covers it. */
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

body.page-guide::before {
  top: -12%;
  right: -10%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #a855f7, transparent 70%);
  filter: blur(90px);
}

body.page-guide::after {
  bottom: -16%;
  left: -8%;
  width: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #ec2f7d, transparent 70%);
  filter: blur(100px);
}

body.page-guide:not(.page-light-preview)::before {
  opacity: 0.55;
}

body.page-guide:not(.page-light-preview)::after {
  opacity: 0.45;
}

body.page-light-preview.page-guide::before {
  opacity: 0.3;
}

body.page-light-preview.page-guide::after {
  opacity: 0.25;
}


/* Light mode's inactive color and hover rules (body.page-light-preview
   .guide-nav-item…) out-rank the plain active rule on specificity, which
   turned the active pill gray-text-on-white — and fully white on hover.
   Restate the active pill at the same specificity so it always wins. */
body.page-light-preview .guide-nav-item[aria-current="true"],
body.page-light-preview .guide-nav-item[aria-current="true"]:hover {
  background: var(--guide-hot-pink);
  color: #fff;
}