/* ==========================================================================
   Run Playgrounds — article-sidebar.css
   Right column: sticky stack (TOC → layout CTA → blog directory).
   Sticky offset clears the fixed topbar + sticky nav (~124px) with 16px air.
   ========================================================================== */

.article-sidebar,
.blog-sidebar {
  position: sticky; top: 140px; align-self: start;
  max-height: calc(100vh - 156px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 24px; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--line-white) transparent;
}

.side-card { border: 1px solid var(--line-white); border-radius: var(--radius); background: #FFFFFF; }
.side-card__head {
  margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line-white);
  font-family: var(--f-mono); font-size: var(--t-13); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--char);
}
.side-card__body { padding: 16px; }

/* layout CTA card (warm) */
.side-cta { background: #F4F1EA; border-color: var(--line-warm); }
.side-cta .side-card__head { border-color: var(--line-warm); }
.side-cta p { margin: 0 0 16px; font-size: var(--t-17); line-height: 1.5; }
.side-cta p b { font-family: var(--f-mono); font-weight: 500; box-shadow: inset 0 -3px 0 var(--yellow); }
.side-cta .btn { width: 100%; }

/* blog directory */
.blog-dir { list-style: none; margin: 0; padding: 0; }
.blog-dir li { border-bottom: 1px solid var(--line-white); }
.blog-dir li:last-child { border-bottom: 0; }
.blog-dir a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; color: var(--char); text-decoration: none; font-weight: 500; }
.blog-dir a:hover, .blog-dir a[aria-current="page"] { background: #F4F1EA; color: var(--green); }
.blog-dir span { font-family: var(--f-mono); font-size: var(--t-13); color: var(--muted); padding-top: 3px; }
.blog-dir__all { display: block; padding: 12px 16px; border-top: 1px solid var(--line-white); font-weight: 600; text-decoration: none; }

@media (max-width: 1000px) {
  .article-sidebar, .blog-sidebar { position: static; max-height: none; overflow: visible; order: -1; gap: 0; padding: 0; }
  .article-sidebar .side-cta, .article-sidebar .side-dir { display: none; }
}