/* =====================================================================
   Chip Vortex — Reading Table of Contents  (v2.10.1)
   ---------------------------------------------------------------------
   Loaded only on single posts (see inc/toc.php).

   WHERE THE PANEL SITS
   The v2.9.4 reading column centres the article on a 700px axis inside a
   full-width <article>, which leaves a wide empty gutter on both sides of
   a desktop screen. The panel is parked in the right-hand gutter and
   tracks the same centre line, so it stays the same distance from the
   text at every window width:

       left  = 50%  +  half the media column  +  32px gap

   It is position:fixed rather than sticky on purpose. The single-post
   compatibility block in style.css forces article.reader to
   position:relative/overflow:visible and rewrites its display, and a
   sticky child inside that stack proved fragile against pasted post CSS.
   Fixed positioning cannot be reached by anything inside .content.

   BELOW 1280px
   There is no gutter left to park in, so the same panel becomes a drawer
   that slides in from the right, opened by a floating button that doubles
   as the progress ring.

   COLOURS
   Cyan is the brand's "active" colour and green its "done" colour, so the
   current section reads cyan and finished sections tick green. This is
   the same pairing the header underline and the buttons already use.
   ===================================================================== */

:root{
  --cv-toc-w:     300px;   /* panel width on desktop */
  --cv-toc-gap:   32px;    /* space between the text column and the panel */
  --cv-toc-top:   132px;   /* re-set at runtime from the real header height */
  --cv-toc-anchor:116px;   /* scroll-margin for headings jumped to */
}

/* ---------------------------------------------------------------------
   Headings need to clear the sticky header when jumped to.
   --------------------------------------------------------------------- */
.cv-toc-target{ scroll-margin-top: var(--cv-toc-anchor, 116px); }

/* ---------------------------------------------------------------------
   1. Thin progress bar across the very top of the page
   --------------------------------------------------------------------- */
.cv-toc-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;                 /* header is 50 */
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.cv-toc-bar-fill{
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 10px rgba(0,212,255,.55);
  transition: transform .12s linear;
}
.admin-bar .cv-toc-bar{ top: 32px; }
@media(max-width:782px){ .admin-bar .cv-toc-bar{ top: 46px; } }

/* ---------------------------------------------------------------------
   2. The panel
   --------------------------------------------------------------------- */
.cv-toc{
  position: fixed;
  top: var(--cv-toc-top, 132px);
  left: calc(50% + (var(--cv-media, 700px) / 2) + var(--cv-toc-gap));
  width: min(var(--cv-toc-w), calc(50vw - (var(--cv-media, 700px) / 2) - 56px));
  max-height: calc(100vh - var(--cv-toc-top, 132px) - 28px);
  z-index: 40;
  display: flex;
  pointer-events: none;        /* the panel itself catches clicks, not the gutter */
}
.cv-toc[hidden]{ display: none; }

.cv-toc-panel{
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  background: linear-gradient(180deg, var(--bg2), var(--bg3));
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: 0 22px 50px -26px rgba(0,0,0,.85);
  overflow: hidden;
}
/* A hairline of brand colour along the top edge, echoing the header. */
.cv-toc-panel::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 25%, var(--green) 55%, transparent);
  opacity: .55;
}

/* ---- head: title + progress ring ------------------------------------ */
.cv-toc-head{
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.05rem .85rem;
  border-bottom: 1px solid var(--line);
}
.cv-toc-title{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.35;
}

.cv-toc-ring{
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}
.cv-toc-ring svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* start the fill at 12 o'clock */
}
.cv-ring-track{
  fill: none;
  stroke: rgba(255,255,255,.13);
  stroke-width: 4;
}
.cv-ring-fill{
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset .18s linear, stroke .3s ease;
}
.cv-toc.is-done .cv-ring-fill,
.cv-toc-fab.is-done .cv-ring-fill{ stroke: var(--green); }

.cv-toc-pct{
  position: relative;
  font-family: var(--display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* The close button only exists for the mobile drawer. */
.cv-toc-x{
  display: none;
  flex: none;
  width: 32px; height: 32px;
  background: none;
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--muted2);
  font-size: 1.25rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.cv-toc-x:hover{ color: var(--cyan); border-color: var(--cyan); }

/* ---- the scrolling list --------------------------------------------- */
.cv-toc-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .55rem .55rem .75rem;
  scrollbar-width: thin;
  scrollbar-color: #1c2740 transparent;
}
.cv-toc-scroll::-webkit-scrollbar{ width: 6px; }
.cv-toc-scroll::-webkit-scrollbar-track{ background: transparent; }
.cv-toc-scroll::-webkit-scrollbar-thumb{ background: #1c2740; border-radius: 6px; }

.cv-toc-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.cv-toc-item{ margin: 0; }

.cv-toc-link{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 9px;
  color: var(--muted3);
  font-size: .82rem;
  line-height: 1.45;
  font-weight: 500;
  transition: color .18s ease, background .18s ease;
}
.cv-toc-link:hover{ color: var(--cyan); background: rgba(0,212,255,.07); }

.cv-toc-text{
  flex: 1 1 auto;
  min-width: 0;
  /* Long headings wrap to three lines, then ellipsis — a contents entry
     that runs to six lines stops being scannable. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ---- the tick marker (top-level entries only) ------------------------ */
.cv-toc-mark{
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: .16rem;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cyan-d, #0A0E1A);
  background: transparent;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.cv-toc-mark svg{
  width: 11px;
  height: 11px;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}

/* read */
.cv-toc-item.is-read > .cv-toc-link{ color: var(--muted2); }
.cv-toc-item.is-read .cv-toc-mark{
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px -2px rgba(0,212,255,.6);
}
.cv-toc-item.is-read .cv-toc-mark svg{ opacity: 1; transform: scale(1); }

/* currently on screen */
.cv-toc-item.is-current > .cv-toc-link{
  background: rgba(0,212,255,.12);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(0,212,255,.28);
}
.cv-toc-item.is-current.is-read .cv-toc-mark{ box-shadow: 0 0 14px -1px rgba(0,212,255,.85); }

/* levels — sub-entries are indented and have no marker, so they read as
   children of the section above them, like a book contents page. */
.cv-toc-item.cv-lv-1 > .cv-toc-link{ padding-left: 2.2rem; font-size: .78rem; }
.cv-toc-item.cv-lv-2 > .cv-toc-link{ padding-left: 3.1rem; font-size: .75rem; }
.cv-toc-item.cv-lv-1 > .cv-toc-link,
.cv-toc-item.cv-lv-2 > .cv-toc-link{ color: rgba(255,255,255,.52); }
.cv-toc-item.cv-lv-1.is-read > .cv-toc-link,
.cv-toc-item.cv-lv-2.is-read > .cv-toc-link{ color: rgba(255,255,255,.7); }
.cv-toc-item.cv-lv-1.is-current > .cv-toc-link,
.cv-toc-item.cv-lv-2.is-current > .cv-toc-link{ color: var(--text); }

/* ---------------------------------------------------------------------
   3. Floating button — the drawer's handle below 1280px
   --------------------------------------------------------------------- */
.cv-toc-fab{
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 61;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--bg3), var(--bg2));
  color: var(--muted);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.8);
  place-items: center;
}
.cv-toc-fab[hidden]{ display: none !important; }
.cv-toc-fab:hover{ color: var(--cyan); border-color: var(--cyan); }

.cv-fab-ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.cv-fab-ring .cv-ring-track{ stroke: rgba(255,255,255,.10); stroke-width: 3; }
.cv-fab-ring .cv-ring-fill{ stroke-width: 3; }

.cv-fab-icon{ width: 21px; height: 21px; }

/* The percentage rides in a small chip on the button's shoulder. */
.cv-fab-pct{
  position: absolute;
  right: -4px;
  bottom: -2px;
  min-width: 30px;
  padding: 2px 5px;
  border-radius: 20px;
  background: var(--cyan);
  color: #06121C;
  font-family: var(--display);
  font-size: .55rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -4px rgba(0,212,255,.9);
}
.cv-toc-fab.is-done .cv-fab-pct{ background: var(--green); }

/* ---------------------------------------------------------------------
   4. Below the desktop breakpoint: panel becomes a right-hand drawer
   --------------------------------------------------------------------- */
@media (max-width: 1279.98px){
  .cv-toc{
    top: 0;
    left: auto;
    right: 0;
    width: min(330px, 88vw);
    max-height: none;
    height: 100%;
    height: 100dvh;
    padding: 0;
    z-index: 62;
    transform: translateX(102%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .cv-toc[data-state="open"]{ transform: translateX(0); }

  .cv-toc-panel{
    border-radius: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: -20px 0 50px -20px rgba(0,0,0,.9);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .cv-toc-head{ padding: 1.1rem 1.1rem .9rem; }
  .cv-toc-title{ font-size: .82rem; }
  .cv-toc-x{ display: inline-flex; }
  .cv-toc-link{ font-size: .88rem; padding: .62rem .7rem; }
  .cv-toc-item.cv-lv-1 > .cv-toc-link{ font-size: .83rem; }
  .cv-toc-item.cv-lv-2 > .cv-toc-link{ font-size: .8rem; }

  .cv-toc-fab{ display: grid; }

  /* Dim the article behind an open drawer. */
  body.cv-toc-open::after{
    content: '';
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(5,8,15,.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.cv-toc-open{ overflow: hidden; }
}

@media (max-width: 520px){
  .cv-toc-fab{ right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .cv-fab-icon{ width: 19px; height: 19px; }
}

/* Between 1280px and roughly 1360px the gutter is only just wide enough;
   trim the type so three-line entries do not appear on every heading. */
@media (min-width: 1280px) and (max-width: 1400px){
  .cv-toc-link{ font-size: .78rem; }
  .cv-toc-item.cv-lv-1 > .cv-toc-link{ padding-left: 2rem; font-size: .74rem; }
  .cv-toc-item.cv-lv-2 > .cv-toc-link{ padding-left: 2.7rem; font-size: .72rem; }
  .cv-toc-title{ font-size: .72rem; letter-spacing: 1px; }
  .cv-toc-ring{ width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------------
   5. Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .cv-toc,
  .cv-toc-bar-fill,
  .cv-ring-fill,
  .cv-toc-mark,
  .cv-toc-mark svg,
  .cv-toc-link{ transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   6. Print — a contents panel is meaningless on paper
   --------------------------------------------------------------------- */
@media print{
  .cv-toc, .cv-toc-fab, .cv-toc-bar{ display: none !important; }
}

/* ---------------------------------------------------------------------
   7. Dusk mode
   The dusk palette lifts the page off near-black (see inc/theme-mode.php).
   The panel needs its own surface colours to stay a step above that
   background instead of disappearing into it.
   --------------------------------------------------------------------- */
html[data-theme="dim"] body.chipvortex-theme .cv-toc-panel{
  background: linear-gradient(180deg, #2B3449, #232B3C) !important;
  border-color: rgba(0,212,255,.28) !important;
}
html[data-theme="dim"] body.chipvortex-theme .cv-toc-fab{
  background: linear-gradient(180deg, #2B3449, #232B3C) !important;
  border-color: rgba(0,212,255,.28) !important;
}
html[data-theme="dim"] body.chipvortex-theme .cv-ring-track{ stroke: rgba(255,255,255,.18) !important; }
html[data-theme="dim"] body.chipvortex-theme .cv-toc-mark{ border-color: rgba(255,255,255,.34) !important; }
html[data-theme="dim"] body.chipvortex-theme .cv-toc-link{ color: rgba(255,255,255,.68) !important; }
html[data-theme="dim"] body.chipvortex-theme .cv-toc-item.cv-lv-1 > .cv-toc-link,
html[data-theme="dim"] body.chipvortex-theme .cv-toc-item.cv-lv-2 > .cv-toc-link{ color: rgba(255,255,255,.6) !important; }
html[data-theme="dim"] body.chipvortex-theme .cv-toc-item.is-current > .cv-toc-link{ color: #fff !important; }
html[data-theme="dim"] body.chipvortex-theme .cv-toc-bar{ background: rgba(255,255,255,.10); }
html[data-theme="dim"] body.chipvortex-theme .cv-toc-scroll::-webkit-scrollbar-thumb{ background: #556488; }

/* ---------------------------------------------------------------------
   8. Content-style shield
   Pasted post HTML sometimes ships global rules (a{color:#333},
   ul{list-style:disc}, svg{width:100%}). The panel lives outside .content
   but not outside the document, so the few properties that would visibly
   break it are pinned.
   --------------------------------------------------------------------- */
html body.chipvortex-theme .cv-toc-list{ list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body.chipvortex-theme .cv-toc-item{ margin: 0 !important; }
html body.chipvortex-theme .cv-toc-link{ text-decoration: none !important; }
html body.chipvortex-theme .cv-toc-panel svg,
html body.chipvortex-theme .cv-toc-fab svg{ max-width: none; }
html body.chipvortex-theme .cv-toc-title{ font-family: var(--display) !important; color: var(--text) !important; }