/* post.css: layout layer for /playbooks/* and /insights/*.
   Loads after site.css. Changes layout and spacing only. No new colors, no new type,
   radius stays 0. Everything here lives inside the rules in design-rules.md.

   Why: the posts were rendering as one 650 to 820px column pinned to the left of a
   1440px canvas, with the right half of the page empty. The contents list filled
   left to right (02, 04, 06 down the left), and had no label because the eyebrow
   stripper removes one. This layer gives the post a reading layout: a sticky
   contents rail on the left, a 760px reading column beside it, and the author box
   at the end of that column. Below 1200px it goes back to a single column, with the
   contents list flowing down then across.
   John, 2026-10-28 */

/* ---- 1. Reading layout at desktop ---------------------------------------- */
@media (min-width: 1200px) {
  #article {
    display: grid !important;
    /* The rail and reading column span the same width as the homepage sections, from
       gutter to gutter (John, 2026-10-28; was a centered 300 + 820px pair). */
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 96px;
    row-gap: 40px !important;
    align-items: start;
  }
  /* the 6px rule spans both columns */
  #article > :first-child { grid-column: 1 / -1; }

  /* contents rail */
  #article > nav.toc-grid {
    grid-column: 1; grid-row: 2;
    display: flex !important; flex-direction: column;
    max-width: none !important;
    position: sticky !important; top: 104px !important;
    max-height: calc(100vh - 128px); overflow: auto;
    border-bottom: 0 !important;
  }
  #article > nav.toc-grid .toc-link:last-child { border-bottom: 1px solid #000000; }

  /* reading column: the body wrapper, then the author box under it */
  #article > nav.toc-grid + div { grid-column: 2; grid-row: 2; max-width: none !important; }
  #article > .author-box { grid-column: 2; max-width: none !important; margin-top: 0 !important; }

  /* the column is the measure now; drop the inline caps that were set for a wide canvas */

}

/* ---- 2. Contents list: label and reading order --------------------------- */
/* The eyebrow stripper removes a label element above the list. A CSS label is not
   an element, so it survives the build and still tells people what this is. */
nav.toc-grid[aria-label]::before {
  content: attr(aria-label);
  display: block;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: 12px; color: #5E5E5E;
  padding: 0 0 12px 0;
}
nav.toc-grid .toc-link { padding: 11px 0 !important; }
nav.toc-grid .toc-link span:last-child { font-size: 16px !important; line-height: 24px !important; }
nav.toc-grid .toc-link .meta:empty { display: none; }

/* Between 701 and 1199px the list is two columns. Flow down, then across, so the
   left column reads 01, 02, 03 instead of 01, 03, 05. */
@media (min-width: 701px) and (max-width: 1199px) {
  /* site.css makes any nav[aria-label="On this page"] sticky from 1001px, for the
     legal pages' sidebar. Here the contents list is a block in the reading flow,
     not a rail, so sticky leaves it pinned over the text scrolling under it. The
     rail only exists from 1200px, so below that it stays in the flow.
     (John, 2026-10-28: text was rendering through the contents list at ~1100px.) */
  #article nav.toc-grid {
    position: static !important; top: auto !important;
    max-height: none !important; overflow: visible !important;
  }
  nav.toc-grid { display: block !important; columns: 2; column-gap: 48px; }
  nav.toc-grid::before { column-span: all; }
  nav.toc-grid .toc-link { break-inside: avoid; }
}

/* ---- 3. Rhythm inside the reading column --------------------------------- */
/* Headings carry more air above than below, so a section reads as a unit. */
#article h2.h3 { margin-top: 32px !important; }
#article h2.h3 + p, #article h2.h3 + ul { margin-top: -4px; }

/* Numbered playbook sections: a clear break before each one, and a number that can
   hold its own next to a 48px heading. 24px green on white is inside the color rule. */
#article .pb-section { margin-top: 56px !important; padding-top: 28px !important; }
#article .pb-section > .meta { font-size: 24px !important; line-height: 1 !important; letter-spacing: 0 !important; color: #4A7A2E !important; padding-top: 14px !important; }
#article .pb-section + p.body { font-size: 19px; line-height: 29px; }

/* Note boxes get the same inset on every side and a little more separation. */
#article p.body[style*="background: #EFEFEF"] { padding: 24px 28px !important; margin: 16px 0 !important; }

/* Checklist rows breathe a touch more; the Blocker tag sits on the baseline. */
#article ul[style*="gap: 14px"] { gap: 16px !important; }
#article li .meta[style*="background: #000000"] { position: relative; top: -2px; }

/* ---- 4. Author box ------------------------------------------------------- */
.author-box { padding: 32px !important; gap: 28px !important; }
.author-box .meta { font-size: 12px; }

/* ---- 5. Related and index cards ------------------------------------------ */
/* Three equal columns from 1000px up, whatever the count, so two cards do not sit
   in a 2/3 width row with a hole on the right. */
@media (min-width: 1000px) {
  #read-next [style*="grid-template-columns"],
  #list [style*="grid-template-columns"],
  main section [style*="auto-fill, minmax(340px"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---- 6. Hero ------------------------------------------------------------- */
/* The Short answer box reads as part of the hero, not a second hero. */
#hero > div[style*="border: 1px solid rgba(255,255,255,0.3)"] { padding: 20px 24px !important; gap: 8px !important; }
#hero > div[style*="border: 1px solid rgba(255,255,255,0.3)"] p.body { font-size: 18px !important; line-height: 28px !important; }

/* ---- 7. Phones ----------------------------------------------------------- */
@media (max-width: 700px) {
  /* The contents list was a 1,000px column of rows (the stacking rule forces a 32px
     row gap on every inline grid). On a phone it becomes a strip of chips you can
     swipe, about 100px tall, with the label above it. */
  nav.toc-grid {
    display: flex !important; flex-wrap: wrap; gap: 8px !important; row-gap: 8px !important;
    border-bottom: 0 !important; max-width: none !important;
  }
  nav.toc-grid::before { flex-basis: 100%; padding-bottom: 4px; }
  nav.toc-grid .toc-link {
    border: 1px solid #000000 !important; padding: 9px 12px !important; gap: 8px !important;
    align-items: center !important;
  }
  nav.toc-grid .toc-link span:last-child { font-size: 14px !important; line-height: 18px !important; }
  nav.toc-grid .toc-link .meta { min-width: 0 !important; }

  /* checklist copy one step smaller; 16 sections at 18/28 is the 24,000px page */
  #article li, #article li > span { font-size: 17px !important; line-height: 26px !important; }
  #article .pb-section { margin-top: 44px !important; }
  #article ul[style*="gap: 14px"] { gap: 12px !important; }
  .author-box { padding: 24px !important; }
}


/* The read-position marker. site.css paints the current row #4A7A2E, which is a
   16px green on white and outside the color rule (green on white at 24px and up).
   On a post the row goes bold black instead, and the position is shown with a
   green bar, which is a mark rather than text. The legal pages keep their own. */
#article nav.toc-grid a[aria-current="true"] {
  color: #000000 !important;
  font-weight: 700;
  box-shadow: inset 3px 0 0 0 #4A7A2E;
  padding-left: 10px !important;
}
@media (max-width: 700px) {
  #article nav.toc-grid a[aria-current="true"] { box-shadow: inset 0 -3px 0 0 #4A7A2E; padding-left: 0 !important; }
}


/* Content runs the full width of the reading column at every width, not only from
   1200px up. The inline max-width: 820px was leaving a 116px gap inside a 936px
   column in the middle range, and the author bio never filled its own box.
   (John, 2026-10-28.) */
#article .lead,
#article p.body,
#article figure,
#article .video,
#article ul,
.author-box,
.author-box p.body { max-width: none !important; }


/* Contents links land below the pinned nav (80px on desktop, 72px on phones), not under
   it, and the rail pins below it too (top: 104px above). The headings carried an inline
   24px scroll margin, so a jump hid each section's first line behind the nav.
   (John, 2026-10-28: "TOC tabs, content gets slightly cut off".) */
#article [id] { scroll-margin-top: 104px !important; }
@media (max-width: 1080px) { #article [id] { scroll-margin-top: 96px !important; } }