/* ═══════════════════════════════════════════════════════════
   Repko — Long-form Article UX
   Reading progress / Breadcrumbs / Cluster nav / TOC sidebar+drawer

   Mounted on tier-3 exercise deep-dives (3-5k word pages).
   Vanilla CSS — no dependencies. Companion: /assets/js/repko-toc.js
   ═══════════════════════════════════════════════════════════ */

/* ─── Reading progress bar (fixed top, gold) ─── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--brand, #DAA520);
  z-index: 110;
  transition: width 0.1s ease-out;
  pointer-events: none;
  will-change: width;
}

/* ─── Breadcrumbs ─── */
/* IMPORTANT: <nav class="breadcrumb"> would otherwise inherit the broad
   `nav { position: fixed; top: 0; ... }` rule from per-page <style> blocks
   (designed for the top site nav), positioning the breadcrumb at the top
   of the viewport on top of the actual nav. These resets keep the
   breadcrumb in normal document flow inside <main>. */
.breadcrumb {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  background: transparent;
  border: none;
  border-bottom: none;
  padding: 0;
  transform: none;
  font-size: 13px;
  color: var(--text-muted, #7A8194);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.4;
}
.breadcrumb a {
  color: var(--text-muted, #7A8194);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb a:hover {
  color: var(--text, #F1F3F8);
  opacity: 1;
}
.breadcrumb .sep {
  color: rgba(255, 255, 255, 0.2);
  user-select: none;
}
.breadcrumb [aria-current="page"] {
  color: var(--text, #F1F3F8);
  font-weight: 500;
}

/* ─── Cluster nav block (above-the-fold sibling discovery) ─── */
.cluster-nav {
  background: var(--bg-card, #12151E);
  border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0 32px;
  max-width: 65ch;
}
.cluster-nav-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #7A8194);
  margin: 0 0 8px;
  display: block;
}
.cluster-nav ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cluster-nav ul li {
  border: none !important;
  padding: 4px 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.cluster-nav ul li:last-child {
  border-bottom: none !important;
}
.cluster-nav ul li a {
  color: var(--brand, #DAA520);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.cluster-nav ul li a:hover {
  border-bottom-color: var(--brand, #DAA520);
  opacity: 1;
}
.cluster-nav ul li[aria-current="page"] {
  color: var(--text, #F1F3F8) !important;
  font-weight: 600;
}
.cluster-nav ul li[aria-current="page"]::before {
  content: '●  ';
  color: var(--brand, #DAA520);
  font-size: 9px;
  vertical-align: middle;
  margin-right: 2px;
}

/* ─── TOC list (shared between desktop sidebar + mobile drawer) ─── */
.toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.toc-list li {
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.toc-list li a {
  display: block;
  padding: 7px 12px;
  color: var(--text-dim, #8B93A7);
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  border-radius: 0 4px 4px 0;
}
.toc-list li a:hover {
  color: var(--text, #F1F3F8);
  background: rgba(255, 255, 255, 0.02);
  opacity: 1;
}
.toc-list li a.active {
  color: var(--brand, #DAA520);
  border-left-color: var(--brand, #DAA520);
  background: rgba(218, 165, 32, 0.06);
  font-weight: 600;
}
.toc-list li.toc-h3 a {
  padding-left: 26px;
  font-size: 12px;
  opacity: 0.85;
}

/* ─── Mobile drawer (default: hidden until FAB tap) ─── */
.toc-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--brand, #DAA520);
  color: #0A0D14;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 90;
  transition: transform 0.2s, box-shadow 0.2s;
}
.toc-fab:hover {
  transform: scale(1.04);
}
.toc-fab:active {
  transform: scale(0.98);
}
.toc-fab svg {
  width: 14px;
  height: 14px;
}

.toc-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 115;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.toc-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.toc-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card, #12151E);
  border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 16px 20px 32px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 120;
  -webkit-overflow-scrolling: touch;
}
.toc-drawer.open {
  transform: translateY(0);
}
.toc-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
  position: sticky;
  top: 0;
  background: var(--bg-card, #12151E);
}
.toc-drawer-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #7A8194);
}
.toc-drawer-close {
  background: none;
  border: none;
  color: var(--text-dim, #8B93A7);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
}
.toc-drawer-close:hover {
  color: var(--text, #F1F3F8);
}

/* ─── Desktop sticky sidebar (≥1240px viewport) ─── */
.toc-sidebar {
  display: none;
}

@media (min-width: 1240px) {
  .toc-sidebar {
    display: block;
    position: fixed;
    top: 110px;
    right: max(24px, calc((100vw - 1120px) / 2 - 240px));
    width: 220px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 0 8px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  }
  .toc-sidebar::-webkit-scrollbar {
    width: 4px;
  }
  .toc-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
  }
  .toc-sidebar-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #7A8194);
    margin-bottom: 12px;
    padding-left: 12px;
  }

  /* When desktop sidebar is active, hide mobile FAB+drawer */
  .toc-fab,
  .toc-drawer,
  .toc-drawer-backdrop {
    display: none !important;
  }
}

/* ─── Reduced motion accommodations ─── */
@media (prefers-reduced-motion: reduce) {
  .reading-progress,
  .toc-drawer,
  .toc-drawer-backdrop,
  .toc-fab,
  .cluster-nav ul li a,
  .toc-list li a {
    transition: none !important;
  }
}

/* ─── Print: hide all chrome ─── */
@media print {
  .reading-progress,
  .toc-fab,
  .toc-drawer,
  .toc-drawer-backdrop,
  .toc-sidebar,
  .cluster-nav,
  .breadcrumb {
    display: none !important;
  }
}