/* ============================================================
   Floating page outline (heading rail)
   ------------------------------------------------------------
   Pinned to the right edge, vertically centred. Collapsed it is a
   column of thin tick marks; on hover it expands into a labelled
   panel. Sits high in the stack but below modals/popovers.
   Theme-aware via core tokens; hidden by default (JS shows it).
   ============================================================ */

#page-outline {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;                 /* above content, below modals/popovers */
  max-height: 72vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px 8px;
  border-radius: var(--radius-card, 10px) 0 0 var(--radius-card, 10px);
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  cursor: default;
  transition: background 0.16s ease, border-color 0.16s ease,
              box-shadow 0.16s ease, padding 0.16s ease;
}

#page-outline.hidden { display: none; }

.po-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* ticks hug the right edge when collapsed */
  gap: 7px;
  width: 100%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;       /* keep the collapsed rail clean */
}
.po-inner::-webkit-scrollbar { width: 0; height: 0; }

/* ---- each entry: [ label ......... tick ] ---- */
.po-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  padding: 2px 2px 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-light, #676d89);
  transition: color 0.14s ease, background 0.14s ease;
}
.po-item:focus-visible {
  outline: 2px solid var(--accent, #5b5bd6);
  outline-offset: 1px;
}

/* the tick mark — width encodes heading level */
.po-tick {
  flex: 0 0 auto;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
  transition: width 0.16s ease, background 0.14s ease,
              opacity 0.14s ease, height 0.14s ease;
}
.po-l1 .po-tick { width: 18px; }
.po-l2 .po-tick { width: 13px; }
.po-l3 .po-tick { width: 9px; }

/* the label — hidden until the rail is hovered/focused */
.po-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-family: var(--font-body, "Instrument Sans", system-ui, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  transition: max-width 0.18s ease, opacity 0.16s ease;
}
/* nesting: deeper headings read as indented in the expanded panel */
.po-l2 .po-label { padding-left: 12px; }
.po-l3 .po-label { padding-left: 24px; }

/* hover / focus-within brightens the ticks a touch */
.po-item:hover { color: var(--text, #1f2335); }
.po-item:hover .po-tick { opacity: 0.9; }

/* active section */
.po-item.active { color: var(--accent, #5b5bd6); }
.po-item.active .po-tick {
  background: var(--accent, #5b5bd6);
  opacity: 1;
  height: 3px;
}
.po-item.active .po-label { color: var(--accent, #5b5bd6); font-weight: 600; }

/* ---- expanded state: hover (or keyboard focus) opens the panel ---- */
#page-outline:hover,
#page-outline:focus-within {
  background: var(--bg-modal, #fff);
  border-color: var(--border, #e7e8f1);
  box-shadow: var(--shadow-popover, 0 8px 28px rgba(20, 22, 43, 0.16));
  padding: 12px 12px;
}
#page-outline:hover .po-inner,
#page-outline:focus-within .po-inner {
  align-items: stretch;
  gap: 1px;
}
#page-outline:hover .po-item,
#page-outline:focus-within .po-item {
  justify-content: space-between;
  padding: 5px 8px;
}
#page-outline:hover .po-item:hover,
#page-outline:focus-within .po-item:hover {
  background: var(--bg-hover, rgba(35, 39, 74, 0.055));
}
#page-outline:hover .po-label,
#page-outline:focus-within .po-label {
  max-width: 210px;
  opacity: 1;
}
/* once labelled, ticks shrink to a compact leading dot */
#page-outline:hover .po-tick,
#page-outline:focus-within .po-tick {
  width: 6px !important;
  height: 6px;
  border-radius: 50%;
  opacity: 0.35;
}
#page-outline:hover .po-item.active .po-tick,
#page-outline:focus-within .po-item.active .po-tick {
  opacity: 1;
}

/* destination flash when you jump to a heading */
.block.po-flash {
  animation: po-flash 0.9s ease;
  border-radius: 6px;
}
@keyframes po-flash {
  0%   { background: color-mix(in srgb, var(--accent, #5b5bd6) 22%, transparent); }
  100% { background: transparent; }
}

/* ---- dark theme: tokens carry most of it; nudge tick contrast ---- */
:root[data-theme="dark"] .po-tick { opacity: 0.5; }
:root[data-theme="dark"] .po-item:hover .po-tick { opacity: 0.95; }

/* ---- small screens: never show the rail (JS also gates this) ---- */
@media (max-width: 1100px) {
  #page-outline { display: none !important; }
}

/* ---- reduced motion: no transitions (JS drops smooth scroll too) ---- */
@media (prefers-reduced-motion: reduce) {
  #page-outline,
  #page-outline * { transition: none !important; animation: none !important; }
}