/* ══════════════════════════════════════════════════════════════
   Shared "Key Insights" + "In this article" nav styling
   Used by every LazyFox blog post. Depends on the page's own
   :root custom properties (--teal, --teal-dark, --ink, --paper,
   --stone, --muted, --border) already defined in each post's
   inline <style> block.
   ══════════════════════════════════════════════════════════════ */

/* ── KEY INSIGHTS ── */
.key-insights { background: var(--stone); padding: 40px 5% 72px; border-bottom: 1px solid var(--border); }
.key-insights-inner { max-width: 900px; margin: 0 auto; }
.key-insights-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.key-insights-kicker::before { content: ''; display: block; width: 24px; height: 2px; background: var(--teal); }
.key-insights-text {
  font-size: 14px; line-height: 1.6; color: var(--muted); font-weight: 400; max-width: 820px;
  background: var(--paper); border-radius: 10px; padding: 32px 36px;
}
.key-insights-text strong { font-weight: 600; }
.key-insights-list {
  list-style: none; margin: 0; padding: 32px 36px; max-width: 820px;
  background: var(--paper); border-radius: 10px;
}
.key-insights-list li {
  position: relative; padding-left: 22px; margin-bottom: 14px;
  font-size: 14px; line-height: 1.6; color: var(--muted); font-weight: 400;
}
.key-insights-list li:last-child { margin-bottom: 0; }
.key-insights-list li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}
.key-insights-list strong { font-weight: 600; }
.key-insights-text a, .key-insights-list a { color: var(--teal); text-decoration: none; }
.key-insights-text a:hover, .key-insights-list a:hover { color: var(--teal-dark); }

/* ── IN THIS ARTICLE NAV (fixed sidebar, wide viewports) ── */
.toc-nav {
  position: fixed;
  top: 140px;
  left: max(20px, calc(50% - 580px));
  width: 180px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 50;
}
.toc-nav.visible { opacity: 1; visibility: visible; transform: translateX(0); }
.toc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.toc-list { list-style: none; border-left: 2px solid var(--border); }
.toc-list li { margin-bottom: 2px; }
.toc-list a {
  display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); font-weight: 400;
  padding: 7px 0 7px 16px; border-left: 2px solid transparent; margin-left: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.toc-list a:hover { color: var(--ink); }
.toc-list a.active { color: var(--teal-dark); font-weight: 600; border-left-color: var(--teal); }
/* Below ~1200px there isn't reliably enough clear margin beside a 740px content column
   for a 180px sidebar without crowding the text, so it's hidden here and replaced by
   the inline collapsible version below. This also covers all mobile traffic, which is
   roughly half of all visits and was never going to fit a fixed sidebar regardless. */
@media (max-width: 1199px) { .toc-nav { display: none; } }

/* ── IN THIS ARTICLE (inline collapsible, narrower viewports incl. mobile) ── */
.toc-inline { display: block; max-width: 820px; margin-top: 28px; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); padding: 0 20px; }
.toc-inline summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-dark); padding: 16px 0; display: flex; align-items: center; justify-content: space-between;
}
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: '+'; font-size: 17px; font-weight: 400; color: var(--muted); transition: transform 0.2s; line-height: 1; }
.toc-inline[open] summary::after { transform: rotate(45deg); }
.toc-inline-list { list-style: none; padding: 0 0 8px; margin: 0; }
.toc-inline-list li { border-top: 1px solid var(--border); }
.toc-inline-list a { display: block; padding: 11px 0 11px 2px; font-size: 14px; color: var(--ink); font-weight: 400; }
.toc-inline-list a:hover { color: var(--teal-dark); }
@media (min-width: 1200px) { .toc-inline { display: none; } }