/* =============================================================================
   Status Downloader — blog post stylesheet

   Loaded after blog.css, on a post page only. Every token it uses (--border,
   --radius-lg, --bg-card, --shadow, --platform-color-rgb, …) is already defined
   by style.css and by its [data-platform="blog"] block, so no colour is
   declared here. Same light-only palette as the rest of the site.
   ============================================================================= */

/* ── Measure ───────────────────────────────────────────────────────────────
   760px read cramped at this type size. blog.css widens .blog-main to 1100px
   at 900px and clamps .blog-article back to 760px inside it, for a related-post
   grid this page no longer carries; a later sheet beats a media query of the
   same specificity, so both have to be restated rather than inherited. */
.blog-main {
  max-width: 840px;
}

@media (min-width: 900px) {
  .blog-main {
    max-width: 840px;
  }

  .blog-article {
    max-width: none;
  }
}

/* ── Key takeaways ─────────────────────────────────────────────────────── */
.blog-takeaways {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid rgba(var(--platform-color-rgb), 0.22);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg,
      rgba(var(--platform-color-rgb), 0.09),
      rgba(var(--platform-color-rgb), 0.03));
}

.blog-takeaways-title,
.blog-toc-title {
  /* .section-label is centred sitewide; in a left-aligned card it is not. */
  text-align: left;
  margin-bottom: 12px;
}

.blog-takeaways ul {
  display: grid;
  gap: 10px;
  list-style: none;
}

.blog-takeaways li {
  position: relative;
  padding-left: 24px;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text);
}

.blog-takeaways li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--platform-color);
}

/* ── Table of contents ─────────────────────────────────────────────────────
   Built by src/js/blog.js from the body's own headings, and unhidden only when
   there are at least three. Inline at every width: a sidebar would have to take
   its column out of the 840px measure. */
.blog-toc {
  margin-top: 28px;
  margin-bottom: 36px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.blog-toc-list,
.blog-toc-sub {
  list-style: none;
}

.blog-toc-item a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.45;
  text-decoration: none;
  transition: var(--transition);
}

/* The nesting is the only level marker — the h2 rows carry no number or bullet
   either, so an indent plus a smaller size has to read as "inside this one". */
.blog-toc-sub .blog-toc-item a {
  padding-left: 30px;
  font-size: 0.88rem;
}

.blog-toc-item a:hover {
  border-left-color: rgba(var(--platform-color-rgb), 0.45);
  color: var(--platform-color-accessible);
}

.blog-toc-item a.blog-toc-current {
  border-left-color: var(--platform-color);
  color: var(--platform-color-accessible);
  font-weight: 600;
}

/* ── Previous / next post ──────────────────────────────────────────────────
   The nav is always in the markup: the renderer cannot nest one conditional in
   another, so "prev or next" has no guard to hang on. With both arrays empty
   it has no children, and nothing here paints a childless nav. */
.blog-adjacent {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}

.blog-adjacent-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  text-decoration: none;
  transition: var(--transition);
}

.blog-adjacent-link:hover {
  border-color: rgba(var(--platform-color-rgb), 0.35);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.blog-adjacent-link:hover * {
  text-decoration: none;
}

.blog-adjacent-dir {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--platform-color-accessible);
}

.blog-adjacent-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

@media (min-width: 640px) {
  .blog-adjacent {
    grid-template-columns: 1fr 1fr;
  }

  .blog-adjacent-prev {
    grid-column: 1;
  }

  /* Pinned right so a post with no previous still lands on the right side. */
  .blog-adjacent-next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
  }
}