/* The .faq-item component lives in static/css/src/35-ui.css and nowhere
   else. It was forked here with 14px padding instead of 13px, no
   min-height on the summary (so the tap target was smaller than the
   system's) and a "+" / "-" glyph drawn with CSS `content`, and because
   this file loads after app.css the fork won on every page that linked
   it. One component, one definition. */
.blog-wrap { max-width:780px; margin:0 auto; }
.blog-crumbs { font-size:.82rem; color:var(--muted); margin-bottom:14px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.blog-crumbs a { color:var(--muted); }
.blog-crumbs a:hover { color:var(--primary-ink); }
.blog-crumbs .sep { color:var(--faint); }

.blog-meta { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-bottom:12px; }
.blog-meta .m { font-size:.85rem; color:var(--muted); }
.blog-title { font-size:clamp(1.42rem, 4.6vw, 2rem); line-height:1.22; letter-spacing:-.012em; margin:4px 0 10px; color:var(--ink); }
.blog-lead { font-size:1.04rem; color:var(--muted); line-height:1.6; margin:0; }

/* Awaiting / cancelled card */
.fp-await { text-align:center; padding:24px 20px; margin:22px 0; }
.fp-await .countdown { justify-content:center; margin:14px 0; }

/* Preview page: the draw's stored facts as a tile grid (ADR-0018) */
.pv-facts { list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.pv-facts li { display:grid; gap:3px; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface-2); }
.pv-facts .k { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.pv-facts .v { color:var(--ink); font-weight:600; font-size:.95rem; line-height:1.35; }
/* The recent-results rows reuse the shared result-row grid; the row itself is
   not a link here (the page carries no list script), so it does not invite a
   click the way the home list does. */
.pv-recent .result-row { cursor:auto; }

/* Post-hero status strip: AI pick graded against this draw */
.ai-graded { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:0 0 18px;
  padding:13px 16px; border:1px solid var(--line-2); border-left:4px solid var(--primary);
  border-radius:var(--radius-sm); background:var(--surface); font-size:.9rem; }
.ai-graded .ai-ico { width:34px; height:34px; border-radius:var(--r-xs); display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary-ink); font-size:1.05rem; flex:none; }
.ai-graded .txt { flex:1; min-width:180px; color:var(--ink-2); }
.ai-graded .txt strong { color:var(--ink); }
.ai-graded a { color:var(--primary-ink); font-weight:600; white-space:nowrap; }

/* Jump-to strip, built by JS from the article's <h2>s */
.blog-toc { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; align-items:center; }
.blog-toc .tl { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin-right:4px; }
.blog-toc a { font-size:.8rem; padding:6px 11px; margin:0; }

/* Body typography */
.blog-body { font-size:1.03rem; line-height:1.75; color:var(--ink-2); }
.blog-body > :first-child { margin-top:0; }
.blog-body h2 { font-size:clamp(1.22rem, 4vw, 1.42rem); margin:32px 0 12px; color:var(--ink); letter-spacing:-.01em;
  padding-top:2px; scroll-margin-top:90px; }
.blog-body h2::before { content:""; display:block; width:34px; height:3px; border-radius:2px; margin-bottom:10px;
  background:var(--grad-brand); }
.blog-body h3 { font-size:1.08rem; margin:22px 0 8px; color:var(--ink); }
.blog-body p { margin:0 0 15px; }
.blog-body ul, .blog-body ol { margin:0 0 16px; padding-left:20px; }
.blog-body li { margin:5px 0; }
.blog-body a { color:var(--primary-ink); text-decoration:underline; text-underline-offset:2px; }
.blog-body strong { color:var(--ink); }
.blog-body blockquote { margin:16px 0; padding:12px 16px; border-left:3px solid var(--primary); background:var(--surface-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.blog-body blockquote p:last-child { margin:0; }

/* Prize tables — desktop */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0; border:1px solid var(--line-2);
  border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-sm); }
.blog-body table { width:100%; border-collapse:collapse; font-size:.92rem; margin:0; }
.blog-body th, .blog-body td { border-bottom:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top; }
.blog-body thead th { background:var(--surface-2); color:var(--muted); font-weight:700; white-space:nowrap;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; }
.blog-body tbody tr:last-child td { border-bottom:0; }
.blog-body tbody tr:hover td { background:var(--surface-2); }
.blog-body td:first-child { white-space:nowrap; font-weight:700; color:var(--ink); }
.blog-body td.cell-amount { font-family:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Menlo, monospace; font-weight:600; color:var(--accent);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.blog-body tr.tier-top td { background:linear-gradient(90deg, var(--good-soft), transparent 70%); }
.blog-body tr.tier-top td:first-child::after { content:"🏆"; margin-left:6px; }

/* Winning numbers rendered as a scannable chip grid (built by JS) */
.num-count { font-size:.7rem; color:var(--muted); margin-bottom:7px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; }
.num-grid { display:flex; flex-wrap:wrap; gap:6px; }
.tier-top 
/* Next-draw guessing CTA */
.next-cta { margin:24px 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  background:linear-gradient(150deg, var(--primary-soft), var(--surface)); border:1px solid var(--primary); }
.next-cta .ico { width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none;
  background:var(--surface); border:1px solid var(--accent); font-size:1.35rem; }
.next-cta .ttl { font-weight:800; color:var(--accent-ink); line-height:1.3; }
.next-cta .sub { font-size:.9rem; margin-top:3px; }
@media (max-width:520px) { .next-cta .btn { width:100%; } }

/* FAQ accordion */
.blog-faq { margin-top:32px; }
.blog-faq h2 { font-size:clamp(1.2rem,4vw,1.4rem); margin-bottom:12px; color:var(--ink); }

/* Recent */
.blog-recent { margin-top:28px; }
.recent-link { display:flex; align-items:center; gap:12px; padding:11px 2px; color:var(--ink-2); border-bottom:1px solid var(--line); font-size:.95rem; }
.recent-link:last-of-type { border-bottom:0; }
.recent-link:hover { color:var(--primary-ink); }
.recent-link .code { font-family:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Menlo, monospace; font-size:.72rem; font-weight:700; color:var(--ink-2);
  background:var(--surface-3); border-radius:7px; padding:4px 7px; flex:none; min-width:38px; text-align:center; }
.recent-link .nm { flex:1; min-width:0; }
.recent-link .dt { font-size:.8rem; color:var(--muted); flex:none; }
.recent-link .arr { color:var(--faint); flex:none; }

.blog-source { font-size:.8rem; color:var(--muted); margin:24px 0 0; border-top:1px solid var(--line); padding-top:16px; line-height:1.6; }

@media (max-width:600px) {
  .blog-body { font-size:1rem; }
  .fp-await { padding:20px 14px; }

  /* Prize tables → stacked, labelled cards (no tiny 4-col horizontal scroll).
     Each tier becomes a card; winning numbers get the full width, so the
     long lower-tier lists flow wide instead of running endlessly tall. */
  .table-scroll { border:0; overflow:visible; margin:16px 0; background:transparent; box-shadow:none; }
  .blog-body table, .blog-body tbody, .blog-body tr, .blog-body td { display:block; width:100%; }
  .blog-body thead { display:none; }
  .blog-body tr { border:1px solid var(--line-2); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
    margin:0 0 12px; padding-bottom:6px; background:var(--surface); overflow:hidden; }
  .blog-body tr.tier-top { border-color:var(--accent); }
  .blog-body tr.tier-top td { background:transparent; }
  .blog-body tbody tr:hover td { background:transparent; }
  .blog-body td { border:0; padding:7px 14px; font-size:.92rem; line-height:1.6; }
  .blog-body td.cell-empty { display:none; }
  .blog-body td::before { content:attr(data-label); display:block; font-size:.64rem;
    text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-bottom:3px; }
  .blog-body td:first-child { white-space:normal; background:var(--surface-2); padding:10px 14px;
    margin-bottom:4px; font-size:1.02rem; font-weight:700; color:var(--ink); }
  .blog-body tr.tier-top td:first-child { background:var(--good-soft); color:var(--accent-ink); }
  .blog-body td:first-child::before { display:none; }
  .blog-body td.cell-amount { font-size:1.05rem; }
}

/* AI forecast (Claude + ML) */
.ai-digits { display:flex; gap:9px; justify-content:center; margin:6px 0 14px; }
.ai-digit { width:46px; height:58px; display:grid; place-items:center;
  font-family:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Menlo, monospace; font-size:1.5rem; font-weight:700;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-xs); }
.ai-ticket { display:inline-block; font-family:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Menlo, monospace; font-weight:700;
  font-size:1.05rem; letter-spacing:.05em; color:var(--primary-ink); background:var(--primary-soft);
  padding:6px 14px; border-radius:var(--r-xs); cursor:pointer; }
.ai-cands { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.ai-cand { display:flex; align-items:center; gap:10px; padding:8px 11px;
  border:1px solid var(--line); border-radius:var(--radius-sm); flex-wrap:wrap; }
.ai-cand .nm { font-family:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Menlo, monospace; font-weight:700; color:var(--ink); font-size:1rem; }
.ai-cand .rs { color:var(--muted); font-size:.85rem; flex:1; min-width:140px; }
.ai-rationale { margin-top:14px; padding:12px 14px; background:var(--surface-2);
  border-left:3px solid var(--primary); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink-2); font-size:.92rem; line-height:1.6; }