/* ForecastsPro blog: /blog and /blog/<slug> only (devtools/blog_build.py writes the pages).
 * Everything else on those pages is site.css: the hero, the table of contents, the reading
 * column, tables, the summary box, the FAQ. Colours and sizes come from tokens.css.
 */

/* Where you are: Home / Blog, above the title. */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 8px; margin-bottom: 14px; list-style: none; font-size: var(--lp-small); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 8px; color: var(--text-dim); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-muted); }
.crumbs a:hover { color: var(--text-primary); text-decoration: none; }
@media (pointer: coarse) {
  .crumbs a { min-height: var(--lp-tap); }
}

/* A long question as a title: a little smaller than a page title, in a shorter line. */
.post-hero h1 { max-width: 22em; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }

/* The table of contents has no numbers here, so its links start at the rail. */
.post-layout .toc a:not(:has(.toc-n)) { padding-left: 10px; }

/* A table's long headings wrap (site.css keeps them on one line), so on a phone every column
   is on screen. */
.post-layout th { white-space: normal; }

/* The small number after a fact: a link to its line in the sources. */
.ref { font-size: 0.72em; line-height: 0; }
.ref a { padding: 0 1px; font-weight: 600; text-decoration: none; }
.ref + .ref { margin-left: 1px; }

/* The FAQ inside the article: the site's accordion, without the article's paragraph gaps. */
.prose .faq-list { margin: 0 0 18px; }
.prose .faq-answer p { margin: 0; }
.prose .faq-answer p + p { margin-top: 10px; }

.post-sources { color: var(--text-muted); font-size: 14.5px; overflow-wrap: anywhere; }
.post-more { padding-left: 0; list-style: none; }

/* The index: one card per post, newest first, in the reading column. */
.post-index { padding-top: clamp(32px, 5vw, 56px); padding-bottom: var(--lp-section-y); }
.post-list { display: grid; gap: var(--lp-gap); max-width: var(--lp-narrow); list-style: none; }
.post-card {
  position: relative;
  padding: var(--lp-card-pad);
  border: 1px solid var(--border-soft);
  border-radius: var(--lp-card-radius);
  background: var(--bg-base);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.post-card:hover,
.post-card:focus-within { border-color: var(--accent); background: var(--bg-card); }
.post-card h2 { margin: 6px 0 8px; font-size: 1.25rem; line-height: 1.3; }
.post-card h2 a { color: var(--text-primary); }
.post-card h2 a:hover { text-decoration: none; }
/* The whole card is the link. */
.post-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card p { color: var(--text-muted); font-size: var(--lp-card-text); line-height: 1.6; }
.post-card .post-card-date { font-size: var(--lp-small); }