/* theme.css for nx-content's /posts/ pages on neuxscience.com.
 *
 * tokens.css carries the site's whole stylesheet as built (the drop's tokens and base,
 * the hover and responsive rules), so this file holds only what /posts/ adds: the
 * page shell _base's base.html draws, and running prose for a post's body, in the
 * drop's tokens and nothing else.
 *
 * Hand-written in neuxscience-com ssr-theme/chrome.css; exported by
 * scripts/ssr-theme.mjs. Edit it there, not here. */

/* The shell: src/layouts/Base.astro's body and column, under _base's class names. */
body { margin: 0; background: var(--surface-page); }
.bb-shell { min-height: 100vh; display: flex; flex-direction: column; }
.bb-shell-main { flex: 1; }

/* A post's body: the legal page's reading register. Headings in the display face,
 * body at --type-body, every number a reader might cite (code, tables) in mono. */
.ns-prose { font: var(--type-body); color: var(--text-body); overflow-wrap: break-word; }
.ns-prose > :first-child { margin-top: 0; }
.ns-prose p, .ns-prose ul, .ns-prose ol, .ns-prose blockquote,
.ns-prose pre, .ns-prose table, .ns-prose figure { margin: 0 0 var(--space-5); }
.ns-prose h2 { font: var(--type-h3); color: var(--text-heading); margin: var(--space-10) 0 var(--space-4); }
.ns-prose h3 { font: var(--type-h4); color: var(--text-heading); margin: var(--space-8) 0 var(--space-3); }
.ns-prose h4 { font: var(--type-label); color: var(--text-heading); margin: var(--space-6) 0 var(--space-2); }
.ns-prose a { color: var(--text-link); text-underline-offset: 3px; }
.ns-prose a:hover { color: var(--text-link-hover); }
.ns-prose a:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; }
.ns-prose ul, .ns-prose ol { padding-left: 1.4em; }
.ns-prose li + li { margin-top: 6px; }
.ns-prose strong { color: var(--text-heading); }
.ns-prose blockquote { padding: 0 0 0 var(--space-5); border-left: 2px solid var(--border-subtle); color: var(--text-muted); }
.ns-prose img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.ns-prose figcaption { margin-top: 8px; font: var(--type-body-sm); color: var(--text-muted); }
.ns-prose code { font: var(--type-mono); font-size: 0.92em; background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 0 4px; }
.ns-prose pre { font: var(--type-mono); background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; }
.ns-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.ns-prose table { width: 100%; border-collapse: collapse; font: var(--type-body-sm); display: block; overflow-x: auto; }
.ns-prose th, .ns-prose td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ns-prose th { color: var(--text-heading); }
.ns-prose hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-10) 0; }

/* Related posts: three Cards, then one column on a phone. */
@media (max-width: 780px) {
  .ns-related-grid { grid-template-columns: minmax(0, 1fr) !important; }
}