/* ── Table of Contents Rail ── */

.gtoc-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 0;
  transition: none;

  /* Default: dark scheme — light dashes on dark bg, light popup bg with dark text */
  --gtoc-fg: var(--gtoc-dark-fg, color-mix(in srgb, var(--gtoc-light-color, #fff) 20%, transparent));
  --gtoc-fg-hover: color-mix(in srgb, var(--gtoc-light-color, #fff) 50%, transparent);
  --gtoc-fg-active: var(--gtoc-dark-fg-active, color-mix(in srgb, var(--gtoc-light-color, #fff) 85%, transparent));
  --gtoc-panel-bg: var(--gtoc-light-color, #fff);
  --gtoc-panel-border: transparent;
  --gtoc-h1: var(--gtoc-dark-color, #000);
  --gtoc-h2: var(--gtoc-dark-color, #000);
  --gtoc-h3: var(--gtoc-dark-color, #000);
  --gtoc-item-hover-bg: color-mix(in srgb, var(--gtoc-light-color, #fff) 80%, var(--gtoc-dark-color, #000));
  --gtoc-item-active: var(--gtoc-dark-color, #000);
}

/* Side positioning */
.gtoc-rail[data-side="left"]  { left: var(--gtoc-offset, 20px); }
.gtoc-rail[data-side="right"] { right: var(--gtoc-offset, 20px); flex-direction: row-reverse; }

/* ── Light scheme (explicit or auto-resolved) ── */
.gtoc-rail[data-scheme="light"],
.gtoc-rail[data-scheme="auto"][data-resolved="light"] {
  --gtoc-fg: var(--gtoc-light-fg, color-mix(in srgb, var(--gtoc-dark-color, #000) 18%, transparent));
  --gtoc-fg-hover: color-mix(in srgb, var(--gtoc-dark-color, #000) 45%, transparent);
  --gtoc-fg-active: var(--gtoc-light-fg-active, color-mix(in srgb, var(--gtoc-dark-color, #000) 80%, transparent));
  --gtoc-panel-bg: var(--gtoc-dark-color, #000);
  --gtoc-panel-border: transparent;
  --gtoc-h1: var(--gtoc-light-color, #fff);
  --gtoc-h2: var(--gtoc-light-color, #fff);
  --gtoc-h3: var(--gtoc-light-color, #fff);
  --gtoc-item-hover-bg: color-mix(in srgb, var(--gtoc-dark-color, #000) 80%, var(--gtoc-light-color, #fff));
  --gtoc-item-active: var(--gtoc-light-color, #fff);
}

/* ── Dark scheme (explicit or auto-resolved) ── */
.gtoc-rail[data-scheme="dark"],
.gtoc-rail[data-scheme="auto"][data-resolved="dark"] {
  --gtoc-fg: var(--gtoc-dark-fg, color-mix(in srgb, var(--gtoc-light-color, #fff) 20%, transparent));
  --gtoc-fg-hover: color-mix(in srgb, var(--gtoc-light-color, #fff) 50%, transparent);
  --gtoc-fg-active: var(--gtoc-dark-fg-active, color-mix(in srgb, var(--gtoc-light-color, #fff) 85%, transparent));
  --gtoc-panel-bg: var(--gtoc-light-color, #fff);
  --gtoc-panel-border: transparent;
  --gtoc-h1: var(--gtoc-dark-color, #000);
  --gtoc-h2: var(--gtoc-dark-color, #000);
  --gtoc-h3: var(--gtoc-dark-color, #000);
  --gtoc-item-hover-bg: color-mix(in srgb, var(--gtoc-light-color, #fff) 80%, var(--gtoc-dark-color, #000));
  --gtoc-item-active: var(--gtoc-dark-color, #000);
}

/* ── Dashes column ── */

.gtoc-dashes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 8px;
  cursor: pointer;
}

.gtoc-dash {
  height: 2px;
  border: none;
  border-radius: 1px;
  background: var(--gtoc-fg);
  padding: 0;
  cursor: pointer;
  transition: background 0.4s ease, height 0.2s;
  flex-shrink: 0;
  outline: none;
}

.gtoc-dash:focus { outline: none; }

.gtoc-dash:hover {
  background: var(--gtoc-fg-hover);
}

.gtoc-dash--active {
  background: var(--gtoc-fg-active);
  height: 2.5px;
}

/* ── Popover ── */

.gtoc-popover {
  position: absolute;
  top: 50%;
  pointer-events: none;
  opacity: 0;
  --gtoc-pop-shift: 0px;
  transition: opacity 0.2s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gtoc-rail[data-side="left"] .gtoc-popover {
  left: calc(100% + 24px);
  transform: translateY(calc(-50% + var(--gtoc-pop-shift))) translateX(-6px);
}

.gtoc-rail[data-side="right"] .gtoc-popover {
  right: calc(100% + 24px);
  transform: translateY(calc(-50% + var(--gtoc-pop-shift))) translateX(6px);
}

.gtoc-rail--open.gtoc-rail[data-side="left"] .gtoc-popover,
.gtoc-rail--open.gtoc-rail[data-side="right"] .gtoc-popover {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(calc(-50% + var(--gtoc-pop-shift))) translateX(0);
}

.gtoc-popover-inner {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: none;
}

/* ── Popover items ── */

.gtoc-popover-inner .gtoc-item {
  display: flex !important;
  flex: none !important;
  align-items: center;
  align-self: flex-start;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  background: var(--gtoc-panel-bg);
  border: none !important;
  color: var(--gtoc-h2);
  font-size: 14px;
  line-height: 1.4 !important;
  padding: 7px 14px !important;
  margin: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 0 !important;
  transition: color 0.4s ease, background 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  overflow: visible;
  font-family: 'DM Mono', monospace;
  outline: none;
}

.gtoc-item:focus { outline: none; }

.gtoc-item:hover {
  color: var(--gtoc-item-active);
  background: var(--gtoc-item-hover-bg);
}

.gtoc-popover-inner .gtoc-item--active {
  color: var(--gtoc-item-active);
  font-weight: 500;
  /* transform: translateX(16px); — disabled, re-enable to highlight active via indent */
}

/* Title glow — only when widget has `data-title-glow="yes"` */
.gtoc-rail[data-title-glow="yes"] .gtoc-popover-inner .gtoc-item {
  box-shadow: 0 0 var(--gtoc-glow-blur, 80px) var(--gtoc-glow-spread, 20px)
    color-mix(in srgb, var(--gtoc-item-active) var(--gtoc-glow-opacity, 6%), transparent);
}

/* .gtoc-rail[data-side="right"] .gtoc-popover-inner .gtoc-item--active {
  transform: translateX(-16px);
} */

.gtoc-popover-inner .gtoc-item--h1 {
  font-weight: 600;
  font-size: 14px;
  color: var(--gtoc-h1);
  margin-top: 4px;
}

.gtoc-popover-inner .gtoc-item--h1:first-child {
  margin-top: 0;
}

.gtoc-popover-inner .gtoc-item--h2 {
  margin-left: 24px !important;
  font-size: 14px;
  color: var(--gtoc-h2);
}

.gtoc-popover-inner .gtoc-item--h3 {
  margin-left: 48px !important;
  font-size: 14px;
  color: var(--gtoc-h3);
}

/* ── Page blur when popover is open — filter all body children except the rail ── */

body > *:not(.gtoc-rail) {
  transition: filter 0.3s ease;
}

body.gtoc-blur-on > *:not(.gtoc-rail) {
  filter: blur(var(--gtoc-page-blur, 4px));
}

/* ── Contrast overlay between page and rail ── */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  background: transparent;
  transition: background 0.3s ease;
}

/* Overlay reinforces the page scheme: dark scheme → dark overlay, light scheme → light overlay */
body.gtoc-overlay-on[data-gtoc-scheme="dark"]::after {
  background: color-mix(in srgb, var(--gtoc-dark-color, #000) calc(var(--gtoc-overlay-opacity, 0.35) * 100%), transparent);
}
body.gtoc-overlay-on[data-gtoc-scheme="light"]::after {
  background: color-mix(in srgb, var(--gtoc-light-color, #fff) calc(var(--gtoc-overlay-opacity, 0.35) * 100%), transparent);
}

/* ── Responsive: hide on narrow viewports ── */

/* ── Dash entrance animation ── */

@keyframes gtoc-dash-in {
  0%   { transform: scaleX(0); opacity: 0; }
  50%  { transform: scaleX(1.3); opacity: 1; }
  70%  { transform: scaleX(0.85); }
  85%  { transform: scaleX(1.1); }
  100% { transform: scaleX(1); opacity: 1; }
}

.gtoc-dash--anim {
  transform: scaleX(0);
  opacity: 0;
  animation: gtoc-dash-in 0.6s ease-out forwards;
  transform-origin: left center;
}

.gtoc-rail[data-side="right"] .gtoc-dash--anim {
  transform-origin: right center;
}

/* Popover items: clip-path reveal (no text stretching).
   End state uses negative insets so the box-shadow glow isn't clipped. */
@keyframes gtoc-item-in {
  0%   { clip-path: inset(-200px 100% -200px -200px); opacity: 0; }
  60%  { opacity: 1; }
  100% { clip-path: inset(-200px); opacity: 1; }
}

.gtoc-rail--open .gtoc-item {
  clip-path: inset(-200px 100% -200px -200px);
  opacity: 0;
  animation: gtoc-item-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gtoc-rail[data-side="right"].gtoc-rail--open .gtoc-item {
  animation-name: gtoc-item-in;
}

.gtoc-rail[data-side="right"] @keyframes gtoc-item-in {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0); }
}

@media (max-width: 900px) {
  .gtoc-rail {
    display: none;
  }
}