/**
 * The floating table of contents.
 *
 * Loaded only where one is going to be printed. Everything the Customizer
 * touches is a custom property, declared here with its default and then
 * re-declared by the inline block inc/toc.php prints -- so the rules below
 * never fork, and the panel still looks right if that block goes missing.
 *
 * The open/closed state is the <details> element's own. No script is
 * involved, which matters on a site that defers its JavaScript until the
 * reader touches something.
 */

:root{
  --rtoc-w:300px;
  --rtoc-maxh:70vh;
  --rtoc-fs:14px;
  --rtoc-indent:14px;
  --rtoc-bw:1px;
  --rtoc-r:16px;
  --rtoc-gap:0px;
  --rtoc-off:140px;
  --rtoc-shadow:0 10px 34px rgba(11,11,13,.11);
  --rtoc-bg:#FFFFFF;
  --rtoc-fg:#3A3A42;
  --rtoc-accent:#E8262A;
  --rtoc-edge:#E4E4E7;
  --rtoc-tab-bg:#FFFFFF;
  --rtoc-tab-fg:#0B0B0D;
  --rtoc-scroll:110px;
}

/* ══════════════════════════════════════════════════════════
   1. Shell
   ══════════════════════════════════════════════════════════ */
/* Under the top bar (z-index 200) on purpose: the bar is the page's fixed
   furniture and should pass over the panel, not under it. */
.rtoc{
  position:fixed;z-index:150;
  display:flex;align-items:center;
  max-width:calc(100vw - 8px);
  font-family:var(--ui);
}
.rtoc--right{right:var(--rtoc-gap);flex-direction:row-reverse}
.rtoc--left{left:var(--rtoc-gap);flex-direction:row}
.rtoc--middle{top:50%;transform:translateY(-50%)}
.rtoc--top{top:var(--rtoc-off)}
.rtoc--bottom{bottom:var(--rtoc-off)}

/* ══════════════════════════════════════════════════════════
   2. The tab
   ══════════════════════════════════════════════════════════ */
/* vertical-rl runs the text top to bottom; the half turn puts it the way
   round a spine label reads, and carries the arrow to the top with it. */
.rtoc-tab{
  display:flex;align-items:center;gap:9px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  padding:18px 10px;
  background:var(--rtoc-tab-bg);color:var(--rtoc-tab-fg);
  border:var(--rtoc-bw) solid var(--rtoc-edge);
  box-shadow:var(--rtoc-shadow);
  font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.055em;white-space:nowrap;
  list-style:none;cursor:pointer;user-select:none;
  transition:color .18s,background .18s;
}
.rtoc-tab::-webkit-details-marker{display:none}
.rtoc-tab::marker{content:''}
.rtoc-tab:hover{color:var(--rtoc-accent)}

/* Round only the edge that faces the page, so a tab flush against the
   window still meets it squarely. Open, the rounding swaps sides and the
   tab loses the border it shares with the panel. */
.rtoc--right .rtoc-tab{border-radius:var(--rtoc-r) 0 0 var(--rtoc-r)}
.rtoc--left .rtoc-tab{border-radius:0 var(--rtoc-r) var(--rtoc-r) 0}
.rtoc--right[open] .rtoc-tab{border-radius:0 var(--rtoc-r) var(--rtoc-r) 0;border-left-width:0}
.rtoc--left[open] .rtoc-tab{border-radius:var(--rtoc-r) 0 0 var(--rtoc-r);border-right-width:0}

/* The arrow is drawn pointing left, then turned to suit the side it is on
   and the state it is in: into the page to open, out of it to close. */
.rtoc-tab-i{display:flex}
.rtoc-tab-i svg{transition:transform .2s}
.rtoc--right .rtoc-tab-i svg{transform:rotate(180deg)}
.rtoc--right[open] .rtoc-tab-i svg{transform:rotate(0)}
.rtoc--left .rtoc-tab-i svg{transform:rotate(0)}
.rtoc--left[open] .rtoc-tab-i svg{transform:rotate(180deg)}

/* ══════════════════════════════════════════════════════════
   3. The panel
   ══════════════════════════════════════════════════════════ */
.rtoc-panel{
  display:flex;flex-direction:column;min-height:0;
  width:var(--rtoc-w);max-width:calc(100vw - 90px);
  max-height:var(--rtoc-maxh);
  background:var(--rtoc-bg);color:var(--rtoc-fg);
  border:var(--rtoc-bw) solid var(--rtoc-edge);
  border-radius:var(--rtoc-r);
  box-shadow:var(--rtoc-shadow);
  overflow:hidden;
}
/* An animation, not a transition: the panel goes from display:none to
   shown, and a transition has nothing to run between. */
.rtoc[open] .rtoc-panel{animation:rtoc-in .22s cubic-bezier(.2,.7,.3,1)}
.rtoc--left[open] .rtoc-panel{animation-name:rtoc-in-left}
@keyframes rtoc-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes rtoc-in-left{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

.rtoc-title{
  margin:0;padding:15px 17px 9px;
  font-family:var(--display);font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rtoc-accent);
}
.rtoc-bar{
  height:3px;margin:0 17px 11px;border-radius:2px;
  background:var(--rtoc-edge);overflow:hidden;
}
.rtoc-title + .rtoc-bar{margin-top:2px}
.rtoc-bar > i{
  display:block;height:100%;width:0;
  background:var(--rtoc-accent);transition:width .12s linear;
}

/* ══════════════════════════════════════════════════════════
   4. The list
   ══════════════════════════════════════════════════════════ */
.rtoc-list{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:6px 9px 13px;scrollbar-width:thin;
}
.rtoc-title + .rtoc-list,.rtoc-bar + .rtoc-list{padding-top:0}
.rtoc-list ul{margin:0;padding:0;list-style:none}
.rtoc-list a{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 11px;border-radius:9px;
  font-size:var(--rtoc-fs);line-height:1.45;color:inherit;
  text-wrap:pretty;transition:color .15s,background .15s;
}
.rtoc-list a:hover{color:var(--rtoc-accent)}
.rtoc-l3 a{padding-left:calc(11px + var(--rtoc-indent))}
.rtoc-l4 a{padding-left:calc(11px + var(--rtoc-indent) * 2)}
.rtoc-l5 a{padding-left:calc(11px + var(--rtoc-indent) * 3)}
.rtoc-l6 a{padding-left:calc(11px + var(--rtoc-indent) * 4)}
/* Depth, not level: an article written entirely in H3 should not start
   one step indented. PHP works it out from the shallowest heading used. */
.rtoc-d1 a{padding-left:11px}
.rtoc-d2 a{padding-left:calc(11px + var(--rtoc-indent))}
.rtoc-d3 a{padding-left:calc(11px + var(--rtoc-indent) * 2)}
.rtoc-d4 a{padding-left:calc(11px + var(--rtoc-indent) * 3)}
.rtoc-d5 a{padding-left:calc(11px + var(--rtoc-indent) * 4)}

/* Markers */
.rtoc--m-dot .rtoc-list a::before{
  content:'';flex:none;align-self:flex-start;
  width:5px;height:5px;margin-top:.62em;border-radius:50%;
  background:var(--rtoc-accent);opacity:.45;transition:opacity .15s;
}
.rtoc--m-dot .rtoc-list a:hover::before,
.rtoc--m-dot .rtoc-list a[aria-current]::before{opacity:1}
.rtoc-n{
  flex:none;min-width:1.2em;
  font-family:var(--display);font-weight:700;font-size:.87em;
  color:var(--rtoc-accent);opacity:.6;font-variant-numeric:tabular-nums;
}
.rtoc--m-outline .rtoc-n{min-width:2.3em}
.rtoc-list a[aria-current] .rtoc-n{opacity:1}

/* Active entry */
.rtoc-list a[aria-current]{font-weight:600}
.rtoc--a-color .rtoc-list a[aria-current]{color:var(--rtoc-accent)}
.rtoc--a-bar .rtoc-list a[aria-current]{
  color:var(--rtoc-accent);box-shadow:inset 2px 0 0 var(--rtoc-accent);
}
.rtoc--a-fill .rtoc-list a[aria-current]{background:var(--rtoc-accent);color:#fff}
.rtoc--a-fill .rtoc-list a[aria-current] .rtoc-n{color:#fff;opacity:.8}
.rtoc--a-fill .rtoc-list a[aria-current]::before{background:#fff;opacity:.9}

/* ══════════════════════════════════════════════════════════
   5. Where a link lands
   ══════════════════════════════════════════════════════════ */
/* The top bar is sticky, so a heading scrolled to exactly its own top ends
   up behind it. This is the setting that pushes it clear. */
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6{scroll-margin-top:var(--rtoc-scroll)}

@media print{.rtoc{display:none}}