/* /blog article and index pages. Loaded after store-errors.css, whose
   tokens (--se-*), fonts and chrome (.se-top, .se-foot, .se-crumbs) these
   pages share. This file only adds the article grid, the prose rendered
   from Markdown and the index list. */

/* article: header + body in the main column, contents/dates in a rail */
.bl-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
@media (min-width: 960px) {
  .bl-article { grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto 1fr; gap: 0 4rem; }
  .bl-rail { position: sticky; top: 1.5rem; align-self: start; grid-column: 2; grid-row: 1 / span 2; }
  .bl-head, .bl-prose { grid-column: 1; }
}

.bl-head { max-width: 72ch; padding-bottom: 1.5rem; border-bottom: 1px solid var(--se-line); }
@media (min-width: 960px) { .bl-head { margin-bottom: 2rem; } }
.bl-head h1 {
  font: 700 clamp(1.8rem, 4.4vw, 2.75rem)/1.1 var(--se-title); letter-spacing: -.02em;
  margin: 0 0 1rem; text-wrap: balance;
}
.bl-dek { font-size: 1.14rem; line-height: 1.55; color: var(--se-dim); margin: 0 0 1rem; text-wrap: pretty; }
.bl-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: .88rem; color: var(--se-quiet); }

/* rail: section list + dates, quiet and compact */
.bl-rail { font-size: .9rem; border-bottom: 1px solid var(--se-line); padding-bottom: 1rem; }
@media (min-width: 960px) { .bl-rail { border-bottom: 0; border-left: 1px solid var(--se-line); padding: .25rem 0 0 1.25rem; } }
.bl-rail h2 { font: 600 .78rem/1.3 var(--se-body); letter-spacing: .06em; text-transform: uppercase; color: var(--se-quiet); margin: 0 0 .6rem; }
.bl-toc { list-style: none; margin: 0 0 1.25rem; padding: 0; counter-reset: toc; }
.bl-toc li { margin: 0; }
.bl-toc a { display: block; padding: .32rem 0; color: var(--se-dim); text-decoration: none; line-height: 1.35; }
.bl-toc a:hover { color: var(--se-text); }
.bl-facts { margin: 0; }
.bl-facts div { padding: .5rem 0; border-top: 1px solid var(--se-line); }
.bl-facts dt { color: var(--se-quiet); font-size: .8rem; }
.bl-facts dd { margin: .1rem 0 0; color: var(--se-text); font-family: var(--se-mono); font-size: .82rem; }
@media (max-width: 959px) {
  .bl-toc { columns: 2 14rem; column-gap: 1.5rem; }
  .bl-toc li { break-inside: avoid; }
  .bl-facts { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .bl-facts div { border-top: 0; padding: .25rem 0; }
}

/* prose rendered from Markdown */
.bl-prose { max-width: 72ch; min-width: 0; }
.bl-prose > p:first-child { font-size: 1.08rem; color: var(--se-text); }
.bl-prose h2 { font: 650 1.35rem/1.25 var(--se-body); letter-spacing: -.005em; margin: 2.75rem 0 .8rem; scroll-margin-top: 1.25rem; text-wrap: balance; }
.bl-prose h3 { font: 600 1.05rem/1.3 var(--se-body); margin: 1.8rem 0 .5rem; scroll-margin-top: 1.25rem; }
.bl-prose p, .bl-prose li { color: var(--se-dim); }
.bl-prose p { margin: 0 0 1rem; text-wrap: pretty; }
.bl-prose strong { color: var(--se-text); font-weight: 600; }
.bl-prose ul, .bl-prose ol { padding-left: 1.25rem; margin: 0 0 1.1rem; }
.bl-prose li { margin: .35rem 0; }
.bl-prose li::marker { color: var(--se-quiet); }
.bl-prose a { overflow-wrap: anywhere; }
.bl-prose pre {
  margin: .25rem 0 1.4rem; padding: .85rem 1rem; overflow-x: auto;
  border: 1px solid var(--se-line); border-radius: 8px; background: var(--se-surface);
  font-size: .84rem; line-height: 1.6; color: var(--se-text);
}
.bl-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.bl-prose blockquote { margin: 0 0 1rem; padding: .1rem 0 .1rem 1rem; border-left: 1px solid var(--se-line-strong); }

/* tables: own horizontal scroll on phones, hairline rows */
.bl-table { overflow-x: auto; margin: .25rem 0 1.5rem; border: 1px solid var(--se-line); border-radius: 8px; }
.bl-prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bl-prose th, .bl-prose td { text-align: left; vertical-align: top; padding: .6rem .8rem; border-top: 1px solid var(--se-line); }
.bl-prose thead th { border-top: 0; background: var(--se-surface); color: var(--se-text); font-weight: 600; font-size: .82rem; white-space: nowrap; }
.bl-prose td { color: var(--se-dim); }
.bl-prose td:first-child { color: var(--se-text); }
.bl-prose td code, .bl-prose td a { white-space: nowrap; }
@media (max-width: 640px) {
  .bl-prose th, .bl-prose td { padding: .55rem .6rem; }
  /* Three columns or more do not fit a phone: each row becomes a stacked
     block (first cell as its title, then the others in reading order). */
  .bl-table:has(th:nth-child(3)) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bl-table:has(th:nth-child(3)) table, .bl-table:has(th:nth-child(3)) tbody,
  .bl-table:has(th:nth-child(3)) tr, .bl-table:has(th:nth-child(3)) td { display: block; }
  .bl-table:has(th:nth-child(3)) tr { padding: .7rem .8rem; border-top: 1px solid var(--se-line); }
  .bl-table:has(th:nth-child(3)) tbody tr:first-child { border-top: 0; }
  .bl-table:has(th:nth-child(3)) td { border: 0; padding: .15rem 0; }
  .bl-table:has(th:nth-child(3)) td:first-child { font-weight: 600; padding-bottom: .3rem; }
  .bl-table:has(th:nth-child(3)) td code, .bl-table:has(th:nth-child(3)) td a { white-space: normal; overflow-wrap: anywhere; }
}

/* official sources, numbered, with the host so the reader sees whose docs they are */
.bl-sources { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--se-line-strong); }
.bl-sources h2 { margin-top: 0; }
.bl-sources ol { padding-left: 1.6rem; }
.bl-sources li { margin: .55rem 0; }
.bl-host { display: block; font: 500 .76rem/1.4 var(--se-mono); color: var(--se-quiet); }

.bl-more { max-width: 72ch; margin-top: 3rem; border-top: 1px solid var(--se-line); padding-top: 1.25rem; }
.bl-more h2 { font: 600 1rem/1.3 var(--se-body); margin: 0 0 .6rem; }
.bl-more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

/* index list */
.bl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--se-line); max-width: 860px; }
.bl-list li { border-bottom: 1px solid var(--se-line); }
.bl-list a { display: grid; gap: .35rem; padding: 1.25rem .25rem; text-decoration: none; color: var(--se-text); }
.bl-list a:hover { background: var(--se-surface); }
.bl-list a:hover .t { color: var(--se-accent-hover); }
.bl-list .t { font: 700 1.3rem/1.2 var(--se-title); letter-spacing: -.01em; text-wrap: balance; }
.bl-list .x { color: var(--se-dim); max-width: 68ch; }
.bl-list .m { font-size: .84rem; color: var(--se-quiet); }
.bl-empty { color: var(--se-dim); }

@media (prefers-reduced-motion: no-preference) {
  .bl-list a, .bl-list .t, .bl-toc a { transition: background-color .15s ease-out, color .15s ease-out; }
  html { scroll-behavior: smooth; }
}
@media print {
  .bl-rail, .bl-more { display: none; }
  .bl-prose p, .bl-prose li, .bl-prose td { color: #000; }
}