/* AnyTeam site kit · post.css
   Article parts for blog posts and podcast episodes. Loaded only on those pages, after site.css.
   Owner: Rylan. Shell, tokens and page blocks stay in tokens.css / bundle.css / site.css (James).

   Rules: every colour, type style, space and radius is a token from tokens.css. Type and UI are
   black, white and grey. Approved exceptions (docs/site-design.md): the CTA sun button and the
   Day Arc contents bar use art-* tokens. Square corners everywhere except the
   design-system Button (at-btn), which keeps its pill. Both colour modes come from the tokens.

   Layout (12-column grid inside .at-container, so the left edge lines up with the nav logo).
   Reading measure 60–75 characters: 36rem column below 960px (body-1), 6 or 8 columns above (editorial-body):
     1280px+     contents 3 | article 6 | sticky CTA 3
     960–1279px  contents 3 | article 8 (sticky CTA hidden: 6 columns read too narrow)
     below 960   one column, contents in a disclosure, reading-progress line under the nav
   Markup: render_post_section() / render_episode_section() in scripts/build.py. */

.post { padding-block: var(--space-48) var(--space-120); }
@media (min-width: 960px) { .post { padding-block: var(--space-84) var(--space-120); } }
@media (prefers-reduced-motion: no-preference) { html:has(.post) { scroll-behavior: smooth; } }

/* ---------- Grid ---------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.post-main { min-width: 0; max-width: 36rem; }
.post-toc, .post-rail { display: none; }
@media (min-width: 960px) {
  .post-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
  .post-main { grid-column: 4 / span 8; max-width: none; }
  .post-toc { display: block; grid-column: 1 / span 3; grid-row: 1; position: sticky; top: calc(var(--nav-height) + var(--space-24)); padding-right: var(--space-24); }
}
@media (min-width: 1280px) {
  .post-main { grid-column: 4 / span 6; }
  .post-rail { display: block; grid-column: 10 / span 3; grid-row: 1; position: sticky; top: calc(var(--nav-height) + var(--space-24)); }
}

/* ---------- Head: breadcrumb, title, byline, dek ---------- */
.post-head { display: flex; flex-direction: column; gap: var(--space-16); padding-bottom: var(--space-36); border-bottom: 1px solid var(--border-tertiary); }
.post-crumb { display: flex; flex-wrap: wrap; gap: var(--space-8); font: var(--text-eyebrow); color: var(--text-secondary); }
.post-crumb a { color: var(--text-secondary); text-decoration: none; }
.post-crumb a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.post-title { font: var(--text-title-2); letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 960px) { .post-title { font: var(--text-section-heading); letter-spacing: -0.02em; } }
.post-meta { display: flex; flex-wrap: wrap; column-gap: var(--space-8); font: var(--text-eyebrow); color: var(--text-secondary); }
.post-meta > span + span::before { content: "\00b7"; margin-right: var(--space-8); }
.post-meta__author { color: var(--text-primary); }
.post-dek { font: var(--text-dek); color: var(--text-secondary); text-wrap: pretty; }
.post-cover img { display: block; width: 100%; height: auto; }

/* ---------- Contents (desktop): sticky list with an inset rule, like the legal pages ---------- */
.post-toc__h { font: var(--text-eyebrow); color: var(--text-secondary); margin-bottom: var(--space-12); }
.post-toc__scroll { max-height: calc(100vh - var(--nav-height) - var(--space-84)); overflow-y: auto; scrollbar-width: thin; }
.post-toc ol, .post-toc-mobile ol { display: flex; flex-direction: column; gap: var(--space-2); }
.post-toc a, .post-toc-mobile a { display: block; font: var(--text-body-2); color: var(--text-secondary); text-decoration: none; padding: var(--space-4) 0 var(--space-4) var(--space-12); box-shadow: inset 1px 0 0 var(--border-tertiary); transition: color var(--duration-150) var(--ease-functional), box-shadow var(--duration-150) var(--ease-functional); }
.post-toc a:hover, .post-toc-mobile a:hover { color: var(--text-primary); }
.post-toc a[aria-current="true"], .post-toc-mobile a[aria-current="true"] { color: var(--text-primary); }
/* Day Arc progress bar over the grey rule: from the top of the list to the bottom of the current
   link (--toc-fill, set by POST_JS). The gradient spans the filled height, so it always ends coral. */
.post-toc ol, .post-toc-mobile ol { position: relative; }
.post-toc ol::before, .post-toc-mobile ol::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: var(--toc-fill, 0px); background: linear-gradient(180deg, var(--art-night), var(--art-cobalt) 50%, var(--art-coral)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .post-toc ol::before, .post-toc-mobile ol::before { transition: height var(--duration-300) ease; }
}

/* ---------- Contents (below 960): a disclosure under the dek ---------- */
.post-toc-mobile { border-block: 1px solid var(--border-tertiary); }
.post-toc-mobile summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); min-height: var(--control-m); font: var(--text-body-2-strong); cursor: pointer; list-style: none; }
.post-toc-mobile summary small { font: var(--text-body-2); color: var(--text-secondary); }
.post-head:has(.post-toc-mobile) { padding-bottom: 0; border-bottom: 0; }
@media (min-width: 960px) { .post-head:has(.post-toc-mobile) { padding-bottom: var(--space-36); border-bottom: 1px solid var(--border-tertiary); } }
.post-toc-mobile summary::-webkit-details-marker { display: none; }
.post-toc-mobile summary::after { content: "+"; font: var(--text-body-1); color: var(--text-secondary); }
.post-toc-mobile[open] summary::after { content: "\2212"; }
.post-toc-mobile ol { padding-bottom: var(--space-12); }
@media (min-width: 960px) { .post-toc-mobile { display: none; } }

/* Reading progress: a hairline under the nav, phones and tablets only */
.post-progress { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--nav-height)); height: var(--stroke-l); z-index: var(--z-30); pointer-events: none; }
.post-progress span { display: block; height: 100%; background: var(--text-primary); transform: scaleX(0); transform-origin: 0 50%; }
@media (min-width: 960px) { .post-progress { display: none; } }

/* ---------- Body ---------- */
.post-body { padding-top: var(--space-36); font: var(--text-body-1); color: var(--text-primary); overflow-wrap: break-word; }
@media (min-width: 960px) { .post-body { font: var(--text-editorial-body); } }
.post-body > :first-child { margin-top: 0; }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote, .post-body pre { margin-bottom: var(--space-20); }
.post-body h2 { font: var(--text-card-headline); letter-spacing: -0.02em; text-wrap: balance; margin: var(--space-60) 0 var(--space-16); }
.post-body h3 { font: var(--text-rail-headline); text-wrap: balance; margin: var(--space-36) 0 var(--space-12); }
.post-body h4 { font: var(--text-body-1-strong); margin: var(--space-24) 0 var(--space-8); }
.post-body :is(h2, h3, h4, [id]) { scroll-margin-top: calc(var(--nav-height) + var(--space-24)); }
.post-body ul { list-style: disc; padding-left: var(--space-24); }
.post-body ol { list-style: decimal; padding-left: var(--space-24); }
.post-body li { margin-bottom: var(--space-8); }
.post-body li > ul, .post-body li > ol { margin: var(--space-8) 0 0; }
.post-body li::marker { color: var(--text-secondary); }
.post-body strong { font-weight: 600; }
.post-body a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--duration-150) var(--ease-functional); }
.post-body a:hover { color: var(--text-hover); }
.post-body a.at-btn { text-decoration: none; }
.post-body button.at-btn { vertical-align: middle; margin-left: var(--space-8); }
.post-body blockquote { padding-left: var(--space-24); box-shadow: inset var(--stroke-l) 0 0 var(--border-active); color: var(--text-secondary); }
.post-body hr { border: 0; border-top: 1px solid var(--border-tertiary); margin: var(--space-48) 0; }
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 0 var(--space-4); }
.post-body pre { background: var(--bg-secondary); padding: var(--space-16); overflow-x: auto; font: var(--text-body-2); }
.post-body pre code { background: none; padding: 0; }
.post-body img { max-width: 100%; height: auto; }
.post-body sup a { text-decoration: none; }

/* Tables: hairline rows under a strong top rule; wide ones scroll inside their own box */
.post-table { overflow-x: auto; margin: var(--space-24) 0 var(--space-32); border-top: 1px solid var(--border-active); -webkit-overflow-scrolling: touch; }
.post-table:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }
.post-table table { border-collapse: collapse; width: 100%; min-width: 600px; }
.post-table th, .post-table td { font: var(--text-body-2); text-align: left; vertical-align: top; padding: var(--space-12) var(--space-16) var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); }
.post-table th { font: var(--text-body-2-strong); color: var(--text-secondary); }
.post-table td :is(p, ul, ol) { margin: 0; }

/* FAQs: closed by default (native <details>), answers stay in the HTML.
   .post-faq is built from the FAQ H2's H3s; .blog-faq is the same thing hand-written in older posts. */
.post-faq, .post-body .blog-faq { margin: var(--space-24) 0 var(--space-32); border-top: 1px solid var(--border-active); }
.post-faq details, .post-body .blog-faq details { border-bottom: 1px solid var(--border-tertiary); }
.post-faq summary, .post-body .blog-faq summary { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-24); padding: var(--space-16) 0; font: var(--text-body-1-strong); cursor: pointer; list-style: none; transition: color var(--duration-150) var(--ease-functional); }
.post-faq summary::-webkit-details-marker, .post-body .blog-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after, .post-body .blog-faq summary::after { content: "+"; flex: none; font: var(--text-body-1); color: var(--text-secondary); }
.post-faq details[open] summary::after, .post-body .blog-faq details[open] summary::after { content: "\2212"; }
.post-faq summary:hover, .post-body .blog-faq summary:hover { color: var(--text-hover); }
.post-faq__a, .post-body .blog-faq details > :not(summary) { font: var(--text-body-1); color: var(--text-secondary); }
.post-faq__a { padding-bottom: var(--space-4); }
.post-faq__a > :last-child, .post-body .blog-faq details > :last-child { margin-bottom: var(--space-20); }

/* Figures, videos, sources */
.post-body figure { margin: var(--space-32) 0; }
.post-figure img { display: block; width: 100%; height: auto; }
.post-figure a { display: block; cursor: zoom-in; }
.post-body .blog-video-frame { position: relative; aspect-ratio: var(--ratio-16-9); background: var(--bg-image); }
.post-body .blog-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-body figcaption { margin-top: var(--space-12); font: var(--text-body-2); color: var(--text-secondary); }
.post-body .blog-sources { font: var(--text-body-2); color: var(--text-secondary); }

/* Meeting prep calculator (.post-calc; markup in the post, script in POST_JS) */
.post-calc { margin: var(--space-32) 0; border: 1px solid var(--border-tertiary); font: var(--text-body-2); }
.post-calc * { box-sizing: border-box; }
.post-body .post-calc :is(p, h3) { margin: 0; }
.post-calc__band { padding: var(--space-16) var(--space-24); background: var(--bg-secondary); border-bottom: 1px solid var(--border-tertiary); }
.post-calc__eyebrow { font: var(--text-eyebrow); color: var(--text-secondary); }
.post-body .post-calc__title { font: var(--text-title-4); }
.post-calc__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); padding: var(--space-24); }
@media (min-width: 600px) { .post-calc__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-32); } }
.post-calc__field + .post-calc__field { margin-top: var(--space-16); }
.post-calc__field label { display: block; font: var(--text-body-2-strong); }
.post-calc__hint { font: var(--text-body-2); color: var(--text-secondary); }
.post-calc__row { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-8); }
.post-calc__row output { min-width: 3ch; text-align: right; font: var(--text-body-2-strong); font-variant-numeric: tabular-nums; }
.post-calc input[type=range] { --pct: 50%; flex: 1; min-width: 0; height: var(--space-20); margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.post-calc input[type=range]::-webkit-slider-runnable-track { height: var(--space-4); background: linear-gradient(to right, var(--action-primary) 0 var(--pct), var(--border-secondary) var(--pct) 100%); }
.post-calc input[type=range]::-moz-range-track { height: var(--space-4); background: var(--border-secondary); }
.post-calc input[type=range]::-moz-range-progress { height: var(--space-4); background: var(--action-primary); }
.post-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--space-16); height: var(--space-16); margin-top: calc(var(--space-6) * -1); border-radius: var(--radius-rounded); background: var(--bg-primary); border: var(--stroke-l) solid var(--action-primary); }
.post-calc input[type=range]::-moz-range-thumb { width: var(--space-12); height: var(--space-12); border-radius: var(--radius-rounded); background: var(--bg-primary); border: var(--stroke-l) solid var(--action-primary); }
.post-calc input[type=range]:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 4px; }
.post-body .post-calc__label { font: var(--text-eyebrow); color: var(--text-secondary); margin-bottom: var(--space-8); }
.post-body .post-calc__label--emph { color: var(--text-primary); padding-left: var(--space-12); box-shadow: inset var(--stroke-l) 0 0 var(--border-active); }
.post-calc__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-bottom: var(--space-20); }
.post-calc__stats:last-child { margin-bottom: 0; }
.post-calc__stat { padding: var(--space-12) var(--space-8); text-align: center; border: 1px solid var(--border-tertiary); }
.post-calc__stat span { display: block; font: var(--text-title-3); font-variant-numeric: tabular-nums; }
.post-calc__stat small { display: block; margin-top: var(--space-4); font: var(--text-body-3); color: var(--text-secondary); }
.post-calc__stat--emph { border-color: var(--border-active); }
.post-body .post-calc__note { padding: var(--space-12) var(--space-24); border-top: 1px solid var(--border-tertiary); font: var(--text-body-3); color: var(--text-secondary); }

/* ---------- CTAs: one sticky card (1280px+), one wide card after the article ---------- */
.post-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20); padding: var(--space-24); background: var(--bg-secondary); }
.post-cta__h { font: var(--text-title-4); text-wrap: balance; }
.post-cta__copy { display: flex; flex-direction: column; gap: var(--space-8); }
.post-cta__sub { font: var(--text-body-1); color: var(--text-secondary); text-wrap: pretty; }
.post-cta--wide { margin-top: var(--space-72); padding: var(--space-32) var(--space-24); }
.post-cta--wide .post-cta__h { font: var(--text-card-headline); letter-spacing: -0.02em; }
@media (min-width: 960px) {
  .post-cta--wide { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-48); padding: var(--space-48); }
  .post-cta--wide .at-btn { flex: none; }
}

/* Sun button (both CTAs). The arrow is CSS so the label stays exactly SITE's (design guard);
   its alt text is empty, so screen readers read only the label. */
.post-cta__btn { height: 54px; padding: 0 28px; font: 600 18px/1 var(--font-sans); background: var(--art-sun); color: var(--black); }
.post-cta__btn:hover { background: color-mix(in srgb, var(--art-sun), var(--black) 12%); }
.post-cta__btn::after { content: "\2192"; content: "\2192" / ""; }
.post-cta__btn:focus-visible { outline: var(--stroke-l) solid var(--text-primary); outline-offset: 2px; }
.post-rail .post-cta__btn { align-self: stretch; }

/* ---------- Related reading ---------- */
.post-related { margin-top: var(--space-72); }
.post-related__h { font: var(--text-eyebrow); color: var(--text-secondary); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-active); }
.post-related li { border-bottom: 1px solid var(--border-tertiary); }
.post-related a { display: block; padding: var(--space-16) 0; font: var(--text-body-1-strong); color: var(--text-primary); text-decoration: none; transition: color var(--duration-150) var(--ease-functional); }
.post-related a:hover { color: var(--text-hover); }

/* The bottom CTA and related reading line up with the article column */
.post-cta--wide, .post-related { max-width: 36rem; }
@media (min-width: 960px) {
  .post-cta--wide, .post-related { max-width: none; margin-left: calc((100% - 11 * var(--gutter-grid-l)) / 12 * 3 + 3 * var(--gutter-grid-l)); }
  .post-related { margin-right: calc((100% - 11 * var(--gutter-grid-l)) / 12 * 1 + 1 * var(--gutter-grid-l)); }
}
@media (min-width: 1280px) {
  .post-related { margin-right: calc((100% - 11 * var(--gutter-grid-l)) / 12 * 3 + 3 * var(--gutter-grid-l)); }
}

/* ---------- Podcast episodes (render_episode_section): same column and type as a post ---------- */
.post--episode { padding-bottom: 0; }
.post--episode .post-main { padding-bottom: var(--space-120); }
.post-player { position: relative; margin-top: var(--space-36); aspect-ratio: var(--ratio-16-9); background: var(--bg-image); }
.post-player > a, .post-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.post-player img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-player__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: var(--control-l); height: var(--control-l); transform: translate(-50%, -50%); border-radius: var(--radius-rounded); background: var(--bg-on-image); color: var(--black); transition: transform var(--duration-150) var(--ease-functional); }
.post-player__play svg { width: var(--icon-m); height: var(--icon-m); fill: currentColor; }
.post-player a:hover .post-player__play { transform: translate(-50%, -50%) scale(1.06); }
.post-listen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-16); }
.post-listen > span { font: var(--text-eyebrow); color: var(--text-secondary); margin-right: var(--space-4); }
.post-guest { display: grid; grid-template-columns: var(--control-l) minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-36); padding-block: var(--space-24); border-block: 1px solid var(--border-tertiary); }
@media (min-width: 600px) { .post-guest { grid-template-columns: calc(var(--control-l) * 2) minmax(0, 1fr); gap: var(--space-24); } }
.post-guest__photo { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: var(--ratio-1-1); object-fit: cover; background: var(--bg-image); font: var(--text-title-4); color: var(--text-secondary); }
.post-guest > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.post-guest__eyebrow { font: var(--text-eyebrow); color: var(--text-secondary); }
.post-guest__name { font: var(--text-title-4); }
.post-guest__bio { font: var(--text-body-1); color: var(--text-secondary); }
.post-body .post-chapters { list-style: none; padding: 0; border-top: 1px solid var(--border-active); }
.post-body .post-chapters li { margin: 0; border-bottom: 1px solid var(--border-tertiary); }
.post-body .post-chapters a { display: grid; grid-template-columns: calc(var(--space-60) + var(--space-12)) minmax(0, 1fr); gap: var(--space-12); padding: var(--space-12) 0; font: var(--text-body-1); color: var(--text-primary); text-decoration: none; }
.post-body .post-chapters a:hover { color: var(--text-hover); }
.post-body .post-chapters span { font: var(--text-body-2); color: var(--text-secondary); font-variant-numeric: tabular-nums; padding-top: var(--space-2); }
.post-transcript { margin: var(--space-48) 0 var(--space-20); border-block: 1px solid var(--border-tertiary); }
.post-transcript summary { display: flex; justify-content: space-between; align-items: center; min-height: var(--control-m); font: var(--text-body-1-strong); cursor: pointer; list-style: none; }
.post-transcript summary::-webkit-details-marker { display: none; }
.post-transcript summary::after { content: "+"; font: var(--text-body-1); color: var(--text-secondary); }
.post-transcript[open] summary::after { content: "\2212"; }
.post-transcript__body { padding-bottom: var(--space-24); font: var(--text-body-1); }
.post-transcript__body h2 { font: var(--text-title-4); margin: var(--space-32) 0 var(--space-12); }
.post-body .post-ts { font: var(--text-body-2); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.post-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); margin-top: var(--space-48); }
.post-pager a { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16) 0; border-top: 1px solid var(--border-active); font: var(--text-body-1-strong); color: var(--text-primary); text-decoration: none; }
.post-pager a:hover { color: var(--text-hover); }
.post-pager span { font: var(--text-eyebrow); color: var(--text-secondary); }
.post-pager__next { grid-column: 2; text-align: right; align-items: flex-end; }