/* nt-toc — scoped styles. Brand teal #00677f, dark #042935. */
.nt-toc, .nt-toc-rail, .nt-toc-drawer, .nt-toc-trigger, .nt-toc-scrim {
  --nt-toc-teal:#00677f; --nt-toc-dark:#042935; --nt-toc-tint:#eef6f8; --nt-toc-border:#dfe6e9;
}
.nt-toc-drawer[hidden], .nt-toc-scrim[hidden] { display: none !important; }

/* Shared nav/list. The rail now lives inside the post content, so reset the
   editor/plugin content list & link styling aggressively (bullets, markers, etc.). */
.nt-toc-nav { font-size: 14px; line-height: 1.4; }
.nt-toc-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nt-toc-teal); font-weight: 700; margin: 0 0 12px; }
.nt-toc-list { list-style: none !important; margin: 0; padding: 0; }
.nt-toc-list li { list-style: none !important; margin: 0; padding: 0; }
.nt-toc-list li::before, .nt-toc-list li::marker { content: "" !important; }
.nt-toc-list .nt-toc-list { margin: 0; } /* nested */
/* subtle connected guide rail behind the items */
.nt-toc-nav > .nt-toc-list { border-left: 2px solid #e4eaec; }
.nt-toc-link { display: block; padding: 7px 12px; margin-left: -2px;
  border-left: 3px solid transparent; color: #42555b; text-decoration: none !important;
  line-height: 1.35; transition: color .12s ease, background-color .12s ease, border-color .12s ease; }
.nt-toc-l3 .nt-toc-link { padding-left: 24px; font-size: 13px; color: #5a6a70; }
.nt-toc-link:hover { color: var(--nt-toc-dark); background: #f4f8f9; border-left-color: #bcd3d9; }
.nt-toc-link.is-active { border-left-color: var(--nt-toc-teal);
  background: var(--nt-toc-tint); color: var(--nt-toc-dark); font-weight: 600;
  border-radius: 0 4px 4px 0; }
.nt-toc-link:focus-visible { outline: 3px solid var(--nt-toc-teal); outline-offset: 2px; }

/* Desktop: the rail is outdented into the left gutter beside the content column,
   so it does NOT take width from the article. It's shown only when the gutter is
   actually wide enough — measured in JS, which adds .nt-toc-rail--pinned (and marks
   the placeholder .nt-toc--rail-active to hide the button). Sticky = stays in view
   as you scroll. Integrated look, no floating card. Otherwise the button+drawer show. */
.nt-toc-rail { display: none; }
.nt-toc-rail.nt-toc-rail--pinned {
  display: block; position: sticky; top: 100px; float: left;
  width: 240px; margin: 2px 0 24px -280px; /* 240 width + 40px gutter gap */
  max-height: calc(100vh - 130px); overflow: auto;
}
.nt-toc--rail-active .nt-toc-trigger { display: none !important; } /* rail replaces the button */

/* Inline trigger button (mid-width and down) */
.nt-toc-trigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--nt-toc-teal); color: var(--nt-toc-teal); background: #fff;
  border-radius: 6px; padding: 9px 14px; font-size: 14px; font-weight: 600; }
.nt-toc-trigger:focus-visible { outline: 3px solid var(--nt-toc-teal); outline-offset: 2px; }

/* Drawer + scrim */
/* z-index scale: rail 100, scrim 10090, drawer 10100 — must clear Salient's #header-outer (9999). */
.nt-toc-scrim { position: fixed; inset: 0; background: rgba(4,41,53,.45);
  opacity: 0; transition: opacity .2s ease; z-index: 10090; }
.nt-toc-scrim.is-open { opacity: 1; }
.nt-toc-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 82vw);
  background: #fff; box-shadow: 4px 0 16px rgba(0,0,0,.25); padding: 20px 16px; overflow: auto;
  z-index: 10100; transform: translateX(-100%); transition: transform .2s ease; }
.nt-toc-drawer.is-open { transform: translateX(0); }
.nt-toc-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
  border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--nt-toc-dark); }
.nt-toc-close:focus-visible { outline: 3px solid var(--nt-toc-teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nt-toc-scrim, .nt-toc-drawer { transition: none; }
}