/* digotech/toc */
.dg-toc{display:grid;gap:var(--gap-stack);min-width:0}
.dg-toc[hidden]{display:none}
.dg-toc__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.dg-toc .dg-toc__x{display:none} /* only the phone panel (below) has a close button */
.dg-toc__list{position:relative;display:grid;gap:2px;padding-left:var(--s-4)}
.dg-toc__list::before,.dg-toc__list::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:1px;background:var(--rule)}
.dg-toc__list::after{bottom:auto;height:calc(var(--dg-toc-p, 0) * 100%);background:var(--accent-fill);transition:height var(--dur) linear}
.dg-toc__list a{display:block;padding:var(--s-1) var(--s-2);border-radius:var(--r);color:var(--ink-2);font-size:var(--t-s);line-height:1.35;text-decoration:none;transition:color var(--dur) var(--ease-press),background-color var(--dur) var(--ease-press)}
.dg-toc__list a.is-h3{padding-left:var(--s-4);font-size:var(--t-xs)}
.dg-toc__list a:hover{color:var(--ink)}
.dg-toc__list a[aria-current]{color:var(--ink);background:var(--paper-2);font-weight:600}

/* phones and tablets (the side column comes after the article, base nw.css): a tab on the right edge opens the list in a
   panel (view.js, native popover) */
.dg-toc-tab{display:none}
@media (max-width: 1023px){
  .dg-toc-tab{position:fixed;top:50%;right:0;z-index:var(--z-rail);display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-2);border:1px solid var(--rule);border-right:0;border-radius:var(--r) 0 0 var(--r);background:var(--card);color:var(--ink);box-shadow:var(--shadow-lift);font:600 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;writing-mode:vertical-rl;transform:translateY(-50%);cursor:pointer}
  .dg-toc-tab::before{content:"";flex:none;width:var(--icon-s);height:var(--icon-s);background:currentColor;-webkit-mask:url(../../icons/list.svg?ver=1b055ffd) center / contain no-repeat;mask:url(../../icons/list.svg?ver=1b055ffd) center / contain no-repeat}
  .dg-toc-tab:hover{color:var(--accent)}
}
.dg-toc-sheet{inset:auto;top:50%;right:var(--s-3);width:min(var(--sheet-w), calc(100vw - 2 * var(--s-3)));max-height:calc(100dvh - 2 * var(--s-8));margin:0;padding:var(--gap-card-s);overflow:auto;overscroll-behavior:contain;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);color:var(--ink);box-shadow:var(--shadow-lift);transform:translateY(-50%);opacity:0;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),display var(--dur) allow-discrete,overlay var(--dur) allow-discrete}
.dg-toc-sheet:popover-open{display:grid;align-content:start;gap:var(--gap-stack);opacity:1}
/* as tall as its list, never stretched to the screen (iPhone Safari spread the rows over the whole height) */
.dg-toc-sheet{bottom:auto;height:fit-content}
.dg-toc-sheet .dg-toc__list{align-content:start}
.dg-toc-sheet .dg-toc__head{justify-content:space-between}
.dg-toc-sheet .dg-toc__x{display:inline-grid;flex:none;width:var(--s-6);height:var(--s-6)}
.dg-toc-sheet .dg-toc__x svg{width:var(--icon-s);height:var(--icon-s)}
@starting-style{.dg-toc-sheet:popover-open{opacity:0;transform:translate(var(--s-4), -50%)}}
.dg-toc-sheet::backdrop{background:var(--shadow)}
@media (prefers-reduced-motion: reduce){.dg-toc-sheet{transition:none}}