/* skin.css — maps the blyg's public pages onto the jdbb design system.
 * Loaded AFTER the blyg's /style.css and the frozen jdbb theme.css.
 * The blyg's own tokens are pointed at jdbb's, so its stylesheet repaints
 * itself; :root:root outranks the blyg's :root, its dark-preference block
 * and the author-theme block. Only public pages get this (proxy.mjs). */
:root:root {
  color-scheme: light;
  --page: var(--bg);
  --paper: var(--bg);
  --paper-sunk: var(--well-bg);
  --ink: var(--text);
  --ink-soft: var(--text-secondary);
  --rule: var(--border);
  --pencil: var(--accent);
  --gen-bg: var(--well-bg);
  --gen-rule: var(--border);
  --block-pad: 0rem;
  --serif: var(--body);
  --sans: var(--mono);
  --apparatus: 12px/1.55 var(--mono);
}
html.dark:root { color-scheme: dark; }

body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: var(--body); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.jdbb-shell { padding-bottom: 0; }
.jdbb-masthead nav { margin-left: auto; }

/* The blyg block: www's reading measure, left-aligned in the shell like
   www's sections, so the column starts under the wordmark. */
.blyg {
  max-width: var(--prose-measure);
  margin: 0; padding: 0;
  background: transparent; border-radius: 0;
  font-family: var(--body); font-size: 16.5px; line-height: 1.6;
}
.blyg a { color: var(--accent); text-underline-offset: 3px; }
.blyg :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }

/* RSS link: a small mono label above the hero, right-aligned. */
.blyg-header, .blyg-header.bare { margin: 1.4rem 0 0; }
.blyg-header a { font: 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.blyg-header a:hover { color: var(--accent); }

/* Masthead → www hero: mono kicker (title — author), lede (bio), mono link. */
.masthead { display: block; margin: 1.2rem 0 2.6rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border-strong); }
.masthead .avatar { display: none; }
.masthead .site-name, .masthead .author-name {
  display: inline; margin: 0;
  font: 400 12.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.masthead .site-name a { color: var(--text-muted); text-decoration: none; }
.masthead .site-name a:hover { color: var(--accent); }
.masthead .author-name::before { content: " \2014  "; }
.masthead .author-bio {
  display: block; max-width: var(--prose-measure);
  margin-top: 1.1rem; font: 20px/1.55 var(--body); color: var(--text);
}
.masthead .author-links { margin-top: 1rem; font: 13px/1.5 var(--mono); }
.masthead .author-links a { color: var(--accent); border-bottom: none; text-decoration: underline; text-underline-offset: 3px; }

/* Items: hairline rules, no radius. */
article.fragment, article.thread { border-top: 1px solid var(--border); padding: 2rem 0 1.8rem; }
article.fragment:first-of-type, article.thread:first-of-type { border-top: none; padding-top: 0; }
article.fragment img, article.thread img { border-radius: 0; }
.blyg h1, .blyg h2, .blyg h3 { font-family: var(--mono); font-weight: 600; letter-spacing: -.01em; }
.blyg h1 { font-size: 1.35rem; }
.blyg h2 { font-size: 1.15rem; }
.blyg h3 { font-size: 1rem; }
.blyg pre, .blyg code { font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; }
.blyg pre { border-radius: 0; }
.blyg blockquote:not(.blyg-transclusion) { margin: 1.2rem 0; padding-left: 1rem; border-left: 2px solid var(--border-strong); color: var(--text-secondary); }

/* The apparatus: www's ledger labels (small mono caps, muted). */
.version-line, .timestamps { text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.version-note { font-family: var(--body); font-size: 14px; color: var(--text-secondary); }
a.permalink { font: 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); border-bottom: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
a.permalink:hover { color: var(--text); }
.version-line .vstep { border-radius: 0; border-color: var(--border-strong); color: var(--text); }
.version-line .vstep:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.card-kind, .stub-cite .label, .responses h2 { font-family: var(--mono); color: var(--accent); }
.kind-chip { font-family: var(--mono); font-style: normal; color: var(--accent); }
.kind-chip::before { content: "["; } .kind-chip::after { content: "]"; }
.pinned-banner { border-radius: 0; border-left-color: var(--accent); }
article.showing-pin .item-content { border-radius: 0; }
blockquote.blyg-transclusion { border-left-color: var(--accent); }
.gen-pop { border-radius: 0; box-shadow: none; border-color: var(--border-strong); background: var(--surface); }
.blogroll, .collections, footer.older { border-top-color: var(--border-strong); }
.blogroll h2, .collections h2 { font: 700 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.blogroll a, .collections a, .version-line .pins a, .version-line .vextra a, .pinned-banner a, .responses a { border-bottom: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
ul.archive li { border-top-color: var(--border); }
footer.older a { font: 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 30rem) {
  body { padding: 0; }
  .blyg { padding: 0; max-width: none; }
  .masthead .author-bio { font-size: 18px; }
}
/* No nav links on the blyg, so the theme bar can stay on the wordmark's row on phones. */
@media (max-width: 640px) {
  .jdbb-masthead { flex-wrap: nowrap; }
  .jdbb-masthead nav { width: auto; }
}

/* "How this blyg runs" page (/_jdbb/how-this-blyg-runs, served by proxy.mjs). */
.jdbb-doc table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; font-size: 14px; }
.jdbb-doc th, .jdbb-doc td { text-align: left; vertical-align: top; padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
.jdbb-doc th { font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom-color: var(--border-strong); }
.jdbb-doc pre { overflow-x: auto; padding: .8rem 1rem; background: var(--well-bg); font-size: 13px; }