/* ══════════════════════════════════════════════════════════════════════════
 * Blog-only styles. Loaded IN ADDITION to /styles.css, never instead of it.
 *
 * WHY A SECOND STYLESHEET AT ALL. styles.css is 99 KB and every page pays for
 * it; these six classes are read by two index pages and however many posts
 * exist, and by nothing else on the site. Putting them in styles.css would
 * make every visitor to /pricing download the figure caption rules. An inline
 * block in the page is not available either: the origin runs a strict CSP with
 * no 'unsafe-inline', and CI greps src/web/ for inline style and script — this
 * file is what a post uses INSTEAD of one.
 *
 * WHY EXACTLY SIX CLASSES, AND WHY THAT IS WRITTEN DOWN. Post authors were
 * given this list as the complete set of new classes available to them. The
 * alternative — each post inventing the class it needs — is precisely how the
 * nav reached eight variants and the footer five (see scripts/sync-nav.mjs).
 * A blog is the surface most likely to accumulate one-off styling, because
 * every post is written once and never revisited, so the constraint has to
 * exist before the second post, not after the tenth.
 *
 * Everything else a post needs is already in styles.css and must be taken from
 * there: `.article` typography, `pre.code`, `.tl-table`, `.callout`,
 * `.cta-band`, `.crosslinks`, `.lede`.
 *
 * NO LITERAL COLOURS. Every value below is a var() from the :root token block
 * in styles.css, which is what makes the dark theme free: styles.css reassigns
 * the tokens in its two dark blocks and nothing here needs a dark rule of its
 * own. (test/app/i18n.test.ts asserts the same property for the rules it
 * guards, for the same reason.) NO `!important` either — a post that needs to
 * override one of these rules has a markup problem, not a specificity problem.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── The byline line, under the h1 ────────────────────────────────────────
 *
 * On a post: date, and where the measurement came from. On an index entry:
 * date and reading time. One class for both, because they are the same line —
 * small, quiet, factual — and a second class would drift from this one. */
.post-meta {
  margin: 0 0 0.35rem;
  color: var(--text-faint);
  font-size: 0.85rem;
  line-height: 1.5;
}

.post-meta time {
  white-space: nowrap;
}

/* ── The single `Reference:` guide link ───────────────────────────────────
 *
 * Exactly one per post, under the byline (marketing/BLOG-PLAN.md §2, rule 1).
 * It is styled as a rule-marked line rather than a card so that it reads as
 * part of the byline block and not as a call to action — the post's only call
 * to action is at the end, and it points at the tool, never at /pricing. */
.post-reference {
  margin: 0 0 2rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--border-strong);
  color: var(--text-faint);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ── A diagram, inline ────────────────────────────────────────────────────
 *
 * Wraps an inline <svg>. Inline and not <img> on purpose: an SVG in the
 * document inherits currentColor, so one diagram renders correctly in both
 * themes, whereas a PNG or an external SVG is baked at one lightness and is
 * wrong in the other half the time. */
.post-figure {
  margin: 1.75rem 0;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-inset);
  color: var(--text-muted);
  overflow-x: auto;
}

.post-figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-figure figcaption {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* ── A wide table ─────────────────────────────────────────────────────────
 *
 * The wrapper only: it scrolls, the table inside keeps its own styling. A
 * scrollable region must be focusable or a keyboard-only visitor can never
 * reach the columns that are off screen (WCAG 2.1.1), so the markup carries
 * `tabindex="0"` and `role="region"` and this makes that focus visible — the
 * same arrangement `.table-scroll` already has in styles.css.
 *
 * A blog table is mostly prose (issuer names, caveats), so unlike `.tl-table`
 * — which is a data grid and sets a monospace body — cells here stay in the
 * body face. A post that wants the data-grid look can still say
 * `<table class="tl-table">` inside this wrapper. */
.post-table {
  margin: 0 0 1.5rem;
  overflow-x: auto;
}

.post-table:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.post-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.post-table th,
.post-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--text-article);
  line-height: 1.5;
}

.post-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 700;
  white-space: nowrap;
}

/* Right-align a numeric column by marking the cells, not by counting them:
 * `<td class="num">`. Numbers line up only when they share a width, so the
 * figures also take the tabular face. */
.post-table .num {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.post-table tr:last-child th,
.post-table tr:last-child td {
  border-bottom: none;
}

/* ── A caveat, or an honesty note ─────────────────────────────────────────
 *
 * Distinct from `.callout` in styles.css, which is an instructional aside on
 * a guide page and speaks as Tamperlens. This one is the first-person "here is
 * what this does not support" block that a dated post carries and a guide page
 * cannot — the split marketing/BLOG-PLAN.md §1 is built on. It is quieter than
 * `.callout` on purpose: a limit stated in a loud box reads as a disclaimer
 * somebody's lawyer added, which is the opposite of the intended effect. */
.post-callout {
  margin: 0 0 1.5rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-raised);
}

.post-callout > :last-child {
  margin-bottom: 0;
}

.post-callout p,
.post-callout li {
  font-size: 0.94rem;
}

/* The one-word label a post can open the block with: <p><b>Caveat</b> …</p>
 * reads as bold prose; this reads as a label. */
.post-callout .label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ── The closing "run this yourself" block ────────────────────────────────
 *
 * Every post ends with a link to the TOOL that produced the evidence, never to
 * /pricing (BLOG-PLAN §2, rule 2 — the report is the demo). Deliberately less
 * emphatic than `.cta-band`: this is an invitation to reproduce a measurement,
 * and a marketing panel at the end of a measurement undoes the measurement. */
.post-cta {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--accent-wash);
}

.post-cta > :last-child {
  margin-bottom: 0;
}

.post-cta h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.post-cta p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

/* ── Narrow viewports ─────────────────────────────────────────────────────
 *
 * Only the blocks that carry their own padding need it back; the type scale
 * above is already fluid. Kept in ONE media query for the same reason
 * styles.css keeps its narrow-nav rules in one: two blocks can disagree. */
@media (max-width: 620px) {
  .post-figure,
  .post-callout,
  .post-cta {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .post-table th,
  .post-table td {
    padding: 0.4rem 0.45rem;
  }
}