/* Blog — article typography and the generated claim-status block.
 *
 * Loaded only by /blog pages. Tokens come from design-system.css; nothing here
 * redefines a colour, so the blog cannot drift from the rest of the site.
 *
 * The status block is the reason this file exists. It has to read as editorial
 * apparatus — dated, checkable, a little dry — rather than as a marketing badge.
 * A reader who suspects it is decoration gets nothing from it. */

/* ---------- Navigation (shared shell, matches the other marketing pages) ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-container {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: var(--space-sm) var(--space-lg);
}
.nav-brand { font-size: 1.25rem; font-weight: 700; color: #3b82f6; text-decoration: none; white-space: nowrap; }
.nav-brand span { color: var(--text); }
.nav-links { display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
.nav-links a { color: #e2e8f0; font-size: var(--font-size-sm); font-weight: 500; transition: color var(--transition-fast); white-space: nowrap; }
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links .btn-primary { background: var(--accent-strong); border: none; color: #fff; padding: 0.625rem 1.5rem; border-radius: 24px; }
.nav-links .btn-primary:hover { background: #1c5fcc; color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-sm);
}

/* ---------- Article shell ---------- */
.post { max-width: 760px; padding-bottom: var(--space-2xl); }
.post-breadcrumb { margin: var(--space-lg) 0 0; font-size: var(--font-size-sm); }
.post-header { padding: var(--space-lg) 0 var(--space-md); }
.post-header h1 {
  font-size: clamp(28px, 5.5vw, 42px); line-height: 1.15; text-wrap: balance;
  margin: 0 0 var(--space-md);
}
.post-standfirst { font-size: var(--font-size-lg); color: var(--text-muted); line-height: 1.6; margin: 0; }

.post-body { font-size: 17px; line-height: 1.75; }
.post-body > p { margin: 0 0 var(--space-lg); }
.post-body h2 {
  font-size: var(--font-size-xl); line-height: 1.3; text-wrap: balance;
  margin: var(--space-2xl) 0 var(--space-md);
}
.post-body strong { color: #fff; }
.post-body em { color: var(--text); }
.post-body code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.1em 0.4em;
  overflow-wrap: anywhere;
}

/* Tabular figures right-aligned, so columns of money actually line up. */
.post-table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--space-lg);
  font-size: var(--font-size-sm); display: block; overflow-x: auto;
}
.post-table th, .post-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap;
}
.post-table thead th { color: var(--text-muted); font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.5px; }
.post-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.post-table .total td { font-weight: 700; color: #fff; border-top: 2px solid var(--border); border-bottom: none; }

/* ---------- The claim-status block (generated — see scripts/render-blog-status.mjs) ---------- */
.post-status {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-lg); margin: var(--space-lg) 0 var(--space-2xl);
  font-size: var(--font-size-sm);
}
.post-status.status-holds { border-left-color: var(--success); }
.post-status.status-decayed { border-left-color: var(--warning); }
.post-status.status-superseded { border-left-color: var(--warning); }
.post-status.status-retracted { border-left-color: var(--danger); }

.status-head { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.status-badge {
  font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(63, 185, 80, 0.14); color: var(--success); border: 1px solid rgba(63, 185, 80, 0.35);
}
/* Both forms are needed: descendant for the block (.post-status.status-X .status-badge)
   and direct for the index listing, where the badge carries the status class itself. */
.status-decayed .status-badge, .status-superseded .status-badge,
.status-badge.status-decayed, .status-badge.status-superseded {
  background: rgba(210, 153, 34, 0.14); color: var(--warning); border-color: rgba(210, 153, 34, 0.35);
}
.status-retracted .status-badge, .status-badge.status-retracted {
  background: rgba(248, 81, 73, 0.14); color: var(--danger); border-color: rgba(248, 81, 73, 0.35);
}
.status-title { font-size: var(--font-size-md); margin: 0; font-weight: 600; }
.status-dates { color: var(--text-muted); margin: var(--space-sm) 0 var(--space-md); font-variant-numeric: tabular-nums; }

.status-claims, .status-changelog { margin-bottom: var(--space-md); }
.status-claims > summary, .status-changelog > summary {
  cursor: pointer; color: var(--text-link); font-weight: 500;
  padding: var(--space-xs) 0;
}
.status-claims > summary:hover, .status-changelog > summary:hover { color: #fff; }

.claim-list { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
/* Hanging indent via grid, not a flex row per item: the status chip stays in its
   own column so long claim text wraps under itself instead of under the chip. */
/* minmax(0, 1fr) rather than 1fr: a claim quoting an unbreakable token (an API error
   constant, a long URL) has a min-content width wider than the card, and a bare 1fr
   lets that inflate the track past the container — the text then clips at the page
   edge with no page scroll to reach it. Measured at 390px: a 41-char constant grew
   the track to 373px inside a 290px box. Both this and overflow-wrap are needed. */
.claim {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) 0; border-top: 1px solid var(--border-light);
  line-height: 1.6;
}
.claim-state {
  grid-column: 1; grid-row: 1 / span 2;
  font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--success); padding-top: 2px; white-space: nowrap;
}
.claim-decayed .claim-state, .claim-superseded .claim-state { color: var(--warning); }
.claim-retracted .claim-state { color: var(--danger); }
.claim-text { grid-column: 2; overflow-wrap: anywhere; }
.claim-source { grid-column: 2; color: var(--text-muted); font-size: var(--font-size-xs); }
.claim-basis { font-family: var(--font-mono); overflow-wrap: anywhere; }

.status-disclosure {
  margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--border-light);
  color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.6;
}

@media (max-width: 720px) {
  /* The brand gets its own row and the links wrap beneath it. Without this the
     nowrap flex row squeezes .nav-links into ~205px, which wraps onto three lines
     and renders "Features"/"Pricing" on top of the IDEA Base wordmark. */
  .nav-container { flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
  .nav-brand { flex: 1 0 100%; }
  .nav-links { width: 100%; gap: var(--space-md); row-gap: var(--space-sm); font-size: var(--font-size-sm); }
  .nav-links .btn-primary { margin-left: auto; padding: 0.5rem 1.1rem; }
}

@media (max-width: 560px) {
  /* Stack the chip above the claim rather than squeezing two columns into 320px. */
  .claim { grid-template-columns: minmax(0, 1fr); }
  .claim-state { grid-row: auto; }
  .claim-text, .claim-source { grid-column: 1; }
}

/* ---------- End-of-post CTA ---------- */
.post-cta {
  margin-top: var(--space-2xl); padding: var(--space-xl);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.post-cta h2 { font-size: var(--font-size-lg); margin: 0 0 var(--space-sm); }
.post-cta p { color: var(--text-muted); margin: 0 0 var(--space-md); }
.post-cta p:last-child { margin-bottom: 0; display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* ---------- Index listing ---------- */
.blog-index { max-width: 760px; }
.blog-index-header { padding: var(--space-2xl) 0 var(--space-lg); }
.blog-index-header h1 { font-size: clamp(28px, 5.5vw, 40px); margin: 0 0 var(--space-md); }
.blog-index-header p { color: var(--text-muted); font-size: var(--font-size-lg); line-height: 1.6; margin: 0; }

.post-list { list-style: none; padding: 0; margin: 0 0 var(--space-2xl); }
.post-list > li { border-top: 1px solid var(--border); padding: var(--space-lg) 0; }
.post-list h2 { font-size: var(--font-size-lg); margin: 0 0 var(--space-sm); line-height: 1.35; }
.post-list h2 a { color: var(--text); }
.post-list h2 a:hover { color: var(--accent); text-decoration: none; }
.post-list .meta { color: var(--text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; margin: 0 0 var(--space-sm); display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.post-list .dek { color: var(--text-muted); margin: 0; line-height: 1.65; }

.how-we-write { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-2xl); }
.how-we-write h2 { font-size: var(--font-size-md); margin: 0 0 var(--space-sm); }
.how-we-write p { color: var(--text-muted); font-size: var(--font-size-sm); line-height: 1.7; margin: 0 0 var(--space-md); }
.how-we-write p:last-child { margin-bottom: 0; }
.how-we-write dl { margin: 0; font-size: var(--font-size-sm); }
.how-we-write dt { font-weight: 700; color: var(--text); margin-top: var(--space-md); }
.how-we-write dd { margin: 2px 0 0; color: var(--text-muted); line-height: 1.6; }
/* The box ends with a <p> after the <dl>; :last-child zeroes its margin, so
   without this it butts straight against the final <dd>. */
.how-we-write dl + p { margin-top: var(--space-lg); }