/* Article navigation. A real disclosure and a numbered, unclipped link list.
   Type roles and the brand palette stay owned by the existing design system. */
.post-toc {
  width: var(--article-wide);
  margin-inline: auto;
  padding-block: var(--space-9) 0;
}
.post-toc-inner {
  padding: var(--panel-padding);
  border-radius: var(--radius-2xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-panel);
}
.post-toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.post-toc-summary::-webkit-details-marker { display: none; }
.post-toc-title { margin: 0; }
.post-toc-meta { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.post-toc-toggle {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.post-toc-toggle::before, .post-toc-toggle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--motion-ui);
}
.post-toc-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.post-toc-inner[open] .post-toc-toggle::after { transform: translate(-50%, -50%) rotate(0); }
.post-toc-nav { margin-top: var(--space-5); }
.post-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: contents; }
.post-toc-list > li { counter-increment: contents; }
.post-toc-list > li + li { border-top: 1px solid var(--line); }
.post-toc-nav a {
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr) var(--space-4);
  align-items: baseline;
  gap: var(--space-4);
  min-height: 44px;
  padding-block: var(--space-3);
  color: var(--text);
  overflow-wrap: anywhere;
  transition: color var(--motion-ui);
}
.post-toc-nav a::before {
  content: counter(contents, decimal-leading-zero);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.post-toc-nav a::after { content: '↓'; color: var(--text-secondary); }
.post-toc-nav a:hover, .post-toc-nav a[aria-current="location"] { color: var(--brand); }
.post-toc-nav a[aria-current="location"]::before { color: var(--brand); }
.post-toc-list [data-toc-depth="3"] a { padding-inline-start: var(--space-5); }
@media (max-width: 720px) {
  .post-toc { padding-top: var(--space-7); }
  .post-toc-inner { padding: var(--panel-padding); border-radius: var(--radius-xl); }
  .post-toc-nav a { gap: var(--space-2); grid-template-columns: var(--space-6) minmax(0, 1fr) var(--space-4); }
  .post-toc-count { display: none; }
  .post-toc-list [data-toc-depth="3"] a { padding-inline-start: var(--space-3); }
}
@media print {
  .post-toc { display: none; }
}
