/* ============================================================================
   VOID HORIZON — landing "pipeline status" readout + reading aids (web-design-pass)
   The status block is a bridge-console readout rendered from web/status.json and
   web/posts.json by index.html: column counts, freshness dates and the latest
   build-log lines. It is a container-query component (modern-web-guidance:
   size-aware-styling), so the same markup reads as a 3-up console on desktop and
   a stacked list on a phone. Uses landing.css tokens.
   ========================================================================== */

#teaser :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px;
}

/* ── Pipeline status readout ──────────────────────────────────────────────── */
#pulse { container-type: inline-size; margin: 0 0 var(--sp-6); }
#pulse .pulse-panel {
  border: 1px solid var(--edge); border-radius: var(--r-xl); background: var(--panel);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hero-inset); overflow: hidden;
}
#pulse .pulse-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--edge-soft);
}
#pulse h2 {
  margin: 0; color: var(--cyan); font: 600 var(--fs-sec)/1.2 var(--display);
  letter-spacing: .24em; text-transform: uppercase;
}
#pulse .pulse-fresh { color: var(--text-dim); font-size: var(--fs-data); }
#pulse .pulse-fresh time { color: var(--ink-hi); }
#pulse .pulse-tiles { display: grid; grid-template-columns: 1fr; }
#pulse .pulse-tile {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px;
  padding: 14px 18px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--edge-soft);
  transition: background var(--dur-fast);
}
#pulse .pulse-tile:hover { background: var(--hover-fill); }
#pulse .pulse-tile b { grid-row: span 2; font: 700 clamp(30px, 6cqi, 44px)/1 var(--display); color: var(--c); min-width: 2ch; }
#pulse .pulse-tile span { font: 600 var(--fs-base)/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
#pulse .pulse-tile small { color: var(--text-dim); font-size: var(--fs-sm); }
#pulse .pulse-tile.live { --c: var(--live); }
#pulse .pulse-tile.wip  { --c: var(--wip); }
#pulse .pulse-tile.plan { --c: var(--plan); }
#pulse .pulse-feed { padding: 12px 18px 16px; }
#pulse .pulse-feed h3 {
  margin: 0 0 6px; color: var(--text-dim); font: 600 var(--fs-sm)/1.2 var(--display);
  letter-spacing: .14em; text-transform: uppercase;
}
#pulse .pulse-feed ul { list-style: none; margin: 0; padding: 0; }
/* Log lines are trusted inline HTML (<time>, <strong>, <a>) — keep them in normal inline flow and
   hang the date in a left gutter instead of making every child a flex item. */
#pulse .pulse-feed li {
  position: relative; padding: 7px 0 7px 64px; border-bottom: 1px solid var(--edge-soft);
  color: var(--text-2); font-size: var(--fs-data); line-height: 1.55;
}
#pulse .pulse-feed li:last-child { border-bottom: 0; }
#pulse .pulse-feed li time { position: absolute; left: 0; top: 8px; color: var(--cyan); font: 500 var(--fs-sm)/1.5 var(--display); letter-spacing: .04em; }
#pulse .pulse-feed li strong { color: var(--ink-hi); }
#pulse .pulse-feed a { color: var(--cyan); }
#pulse .pulse-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; }
#pulse .pulse-links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--edge);
  border-radius: var(--r-sm); color: var(--cyan); text-decoration: none; font-size: var(--fs-base);
}
#pulse .pulse-links a:hover { border-color: var(--cyan); background: var(--hover-fill); }
@container (min-width: 620px) {
  #pulse .pulse-tiles { grid-template-columns: repeat(3, 1fr); }
  #pulse .pulse-tile { grid-template-columns: 1fr; border-bottom: 0; border-right: 1px solid var(--edge-soft); }
  #pulse .pulse-tile:last-child { border-right: 0; }
  #pulse .pulse-tile b { grid-row: auto; }
  #pulse .pulse-feed { border-top: 1px solid var(--edge-soft); }
}

/* ── Dev blog: latest posts up front, the rest one tap away ───────────────── */
#teaser .blog-more { margin: 0 0 var(--sp-4); }
#teaser .blog-more > summary {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--edge); border-radius: var(--r-md); color: var(--cyan); background: var(--panel);
  font-size: var(--fs-base); margin-bottom: var(--sp-4);
}
#teaser .blog-more > summary:hover { border-color: var(--cyan); }

/* Studies list: withdrawn entries are labelled status, not links that go nowhere. */
#teaser nav.studies .navstatus {
  flex: 1 1 auto; min-width: 150px; text-align: center; color: var(--text-dim);
  border: 1px dashed var(--edge); border-radius: var(--r-md); padding: 12px; font-size: var(--fs-base);
}
#teaser nav.studies .navstatus .tag { font-size: 11px; }

/* Inline links in body copy use the phosphor accent, not the UA default blue/purple. */
#teaser :where(p, li, figcaption) a:not([class]) { color: var(--cyan); text-underline-offset: 3px; }