/* ============================================================
   TOOT — blog pages
   Reuses the design tokens + atoms from styles.css and the
   reading-column typography from legal.css; this file only adds
   post-specific pieces: meta line, data table, code block,
   pull-quote, and the blog-index post cards.
   ============================================================ */

/* ---------- post meta line ---------- */
.post-meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 16px;
}
.post-meta b { color: var(--ink-soft); font-weight: 500; }

/* ---------- data table (the benchmark run table) ---------- */
.post-tablewrap { overflow-x: auto; margin: 18px 0 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-card); }
.post-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.post-table th, .post-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.post-table thead th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); text-align: right;
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.post-table thead th:first-child { text-align: left; }
.post-table td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.post-table td:first-child { text-align: left; font-weight: 500; }
.post-table tbody tr:last-child td { border-bottom: none; }
.post-table tbody tr.total td { border-top: 1px solid var(--line); font-weight: 600; background: var(--paper); }
.post-tablenote { font-size: 13px; color: var(--ink-faint); line-height: 1.6; margin: 10px 2px 22px; }

/* ---------- code / data block ---------- */
.post-code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  background: var(--navy-deep); color: #dbe4f7;
  border-radius: var(--r-md); padding: 16px 18px; margin: 14px 0 22px;
  overflow-x: auto; white-space: pre-wrap; overflow-wrap: break-word;
}

/* ---------- model quote ---------- */
.post-quote {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 18px; margin: 16px 0 22px;
  color: var(--ink-soft); font-size: 15.5px;
}

/* ---------- criteria list ---------- */
.post-criteria { margin: 14px 0 22px; padding-left: 22px; }
.post-criteria li { margin: 9px 0; }
.post-criteria li b { font-weight: 600; }

/* ---------- blog index ---------- */
.post-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.post-card h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; margin: 8px 0 10px; }
.post-card .date { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.post-card p { color: var(--ink-soft); line-height: 1.6; margin: 0; }
.post-card .readmore { display: inline-block; margin-top: 14px; color: var(--accent); font-weight: 500; }