/* ==========================================================================
   Run Playgrounds — article-toc.css
   Right-hand table of contents, built from the article's H2/H3 by article-shell.js
   (or pre-rendered). Class/ID names match post-optimizer (#toc-nav-container,
   #toc-list-content, .toc-title, .toc-toggle-icon) so either source works.
   Desktop: always open, inside the sticky sidebar. Mobile: collapsed, tap to open.
   ========================================================================== */

.toc-nav,
#toc-nav-container,
.article-toc {
  background: #FFFFFF; border: 1.5px solid var(--char); border-radius: var(--radius);
  margin: 0; padding: 0; box-shadow: none;
}
.toc-nav .toc-title {
  margin: 0; padding: 0; border-bottom: 1px solid var(--char);
  font-family: var(--f-mono); font-size: var(--t-13); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: var(--char);
}
.toc-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px;
  background: transparent; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer;
}
.toc-count { margin-left: auto; color: var(--muted); }
.toc-toggle-icon { display: none; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
.toc-nav.expanded .toc-toggle-icon { transform: rotate(-135deg) translate(-2px, -2px); }

.toc-list,
.article-toc-list { list-style: none; margin: 0; padding: 8px 0; counter-reset: toc-h2; }
.toc-list li { margin: 0; }
.toc-list a,
.article-toc-link {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px; align-items: baseline;
  padding: 5px 16px 5px 12px; border-left: 3px solid transparent;
  color: var(--char); text-decoration: none; font-size: var(--t-17); line-height: 1.35; font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.toc-list .toc-h2 > a::before { counter-increment: toc-h2; content: counter(toc-h2, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-13); color: var(--muted); }
.toc-list .toc-h3 > a { padding-top: 2px; padding-bottom: 2px; line-height: 1.3; font-weight: 400; color: var(--muted); }
.toc-list .toc-h3 > a::before { content: ""; }
.toc-list a:hover,
.article-toc-link:hover { background: #F4F1EA; color: var(--green); }
.toc-list a.is-active,
.toc-list a[aria-current="true"] { border-left-color: var(--green); background: #F4F1EA; color: var(--green); }
.toc-list a.is-active::before { color: var(--green); }

/* desktop: always open (overrides any collapsed-by-default rules injected later) */
@media (min-width: 1001px) {
  .toc-nav, .toc-nav:not(.expanded) { max-height: none !important; overflow: visible !important; }
  .toc-nav:not(.expanded) .toc-list { display: block !important; }
  .toc-toggle { cursor: default; }
}
/* mobile: collapsed until tapped */
@media (max-width: 1000px) {
  .toc-toggle-icon { display: inline-block; }
  .toc-nav:not(.expanded) .toc-list { display: none; }
  .toc-nav .toc-title { border-bottom: 0; }
  .toc-nav.expanded .toc-title { border-bottom: 1px solid var(--char); }
}

/* legacy structures */
.article-toc-title { font-family: var(--f-mono); font-size: var(--t-13); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; border-bottom: 1px solid var(--char); margin: 0; }
.article-toc-item { margin: 0; }