/* Blog-only structural styles.
 *
 * Everything visual — measure, type scale, link and table treatment — comes
 * from the shared `.article` primitives in site.css, which were written for
 * this DOM. Only what is genuinely blog-specific lives here.
 *
 * External on purpose. cp-web serves an ENFORCING CSP whose style-src is
 * "'self' 'nonce-<per-request>'" (apps/_shared/middleware.py), so an inline
 * <style> without a nonce is dropped silently: the page still returns 200 and
 * still paints, and only the behaviour disappears. A stylesheet served from
 * the same origin needs no nonce and cannot fail that way.
 */

/* A decision table can exceed a phone's width. Scroll the TABLE, never the
   page. tabindex keeps the scroll region reachable by keyboard; role=region
   plus the container makes it an announced landmark rather than a silent
   scroll trap. */
.blog-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* Breadcrumbs are an <ol> for the semantics — screen readers announce
   position — but must not render as a numbered list. Separator is a ::before
   on siblings so it is never read out as content. */
.blog-breadcrumb-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13px;
  color: var(--muted);
}
.blog-breadcrumb-item + .blog-breadcrumb-item::before {
  content: "/";
  margin-right: 8px;
  color: var(--line);
}

/* Provenance carries the shared .article-meta type; this is only the layout:
   label/value pairs on one line, wrapping on a phone. */
.blog-article-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 8px;
}
.blog-article-provenance-item {
  display: flex;
  gap: 6px;
}
.blog-article-provenance dt::after {
  content: ":";
}
.blog-article-provenance dd {
  margin: 0;
}