/* The Nightly Build — site chrome + shared article chrome.
   The system: ONE content column (800px) for everything — bar content,
   front page, prose, furniture, footer. The bar is two elements (wordmark +
   menu) at every width. All color through the theme tokens (themes/*.css).
   Article-facing classes (.nb-article and below) are an append-only API:
   published articles are frozen HTML — restyle values, never rename. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.nb-shell {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  flex: 1;
  width: 100%;
}

/* articles: article fills the viewport so the footer sits at the bottom */
.nb-article article {
  flex: 1;
  width: 100%;
}

/* jump targets land below the sticky bar */
section[data-nb-section],
.nb-sources li[id],
sup.nb-cite a[id],
[id^="nb-"] {
  scroll-margin-top: 62px;
}

/* --------------------------------------------- the bar: two elements, always */
.nb-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.nb-bar-in {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
}

.nb-wordmark {
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 32;
}

.nb-wordmark .nb-period {
  color: var(--accent);
}

.nb-menu {
  position: relative;
}

.nb-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}

.nb-menu summary::-webkit-details-marker {
  display: none;
}

.nb-burger {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--ink);
  display: block;
}

.nb-burger::before,
.nb-burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
}

.nb-burger::before {
  top: -6px;
}

.nb-burger::after {
  top: 6px;
}

.nb-menu[open] .nb-burger {
  background: transparent;
}

.nb-menu[open] .nb-burger::before {
  top: 0;
  transform: rotate(45deg);
}

.nb-menu[open] .nb-burger::after {
  top: 0;
  transform: rotate(-45deg);
}

.nb-menu-panel {
  position: absolute;
  right: -10px;
  top: calc(100% + 9px);
  z-index: 60;
  width: max-content;
  min-width: 200px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgb(0 0 0 / 18%);
  padding: 6px 0;
}

.nb-menu-panel a {
  display: block;
  padding: 11px 18px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--hair);
}

.nb-menu-panel a:last-child {
  border-bottom: 0;
}

.nb-menu-panel a:hover,
.nb-menu-panel a[aria-current] {
  color: var(--accent);
}

.nb-menu-nav a:last-child {
  border-bottom: 0;
}

.nb-menu-eco {
  border-top: 1px solid var(--line);
  margin-top: 5px;
  padding-top: 5px;
}

.nb-menu-eco a {
  color: var(--ink-soft);
  font-size: 13px;
  white-space: nowrap;
}

/* ------------------------------------------------------------- front page */
.nb-articleline {
  display: flex;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 14px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.nb-articleline-facts {
  color: var(--faint);
}

.nb-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

/* the lead: full-width first cell of the ruled table */
.nb-lead-cell {
  grid-column: 1 / -1;
  padding: 20px 16px 16px;
}

.nb-lead-cell h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 5.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.016em;
  margin: 0 0 10px;
  font-variation-settings: "opsz" 60;
}

.nb-lead-cell .nb-dek {
  margin-bottom: 12px;
}

.nb-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.nb-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--faint);
}

/* the ruled table: outer border + full internal rules; the last row's cells
   drop their bottom border (the table closes them) */
.nb-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  margin-top: 12px;
}

.nb-grid .nb-item {
  border-bottom: 1px solid var(--line);
  padding: 14px 16px 12px;
}

.nb-grid .nb-item:last-child {
  border-bottom: 0;
}

.nb-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.nb-item .nb-meta {
  margin-top: auto;
  font-size: 11px;
}

.nb-item h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.3;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

.nb-item .nb-kicker {
  font-size: 10px;
  margin-bottom: 5px;
  color: var(--ink-soft);
}

.nb-lead-cell .nb-kicker {
  font-size: 11px;
  color: var(--accent);
}

.nb-cell-dek {
  font-size: 14px;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nb-lead-cell .nb-cell-dek {
  font-size: 16.5px;
  -webkit-line-clamp: 4;
}

/* story-cell deks are opt-in (site.yaml front: comfortable), seriestop only */
.nb-item:not(.nb-lead-cell) .nb-cell-dek {
  display: none;
}

@media (width >=640px) {
  .nb-front-comfortable .nb-item:not(.nb-lead-cell) .nb-cell-dek {
    display: -webkit-box;
  }
}

@media (width >=640px) {
  .nb-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* the lead is child 1 and spans the row, so story cells start at child 2:
     left column = even children (divider on their right), right column =
     odd. The last row's cells drop their bottom border. */
  .nb-grid .nb-item:nth-child(even) {
    border-right: 1px solid var(--line);
  }

  .nb-grid .nb-item:nth-last-child(2):nth-child(even) {
    border-bottom: 0;
  }
}

/* night-to-night navigation */
.nb-nightnav {
  display: flex;
  align-items: baseline;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 0 2px;
  font-family: var(--sans);
  font-size: 13px;
}

.nb-nightnav a {
  color: var(--accent-2);
  text-decoration: none;
}

.nb-nightnav a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------ pages: shared head */
.nb-pagehead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0 10px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 6px;
}

.nb-pagehead h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 5vw, 30px);
  letter-spacing: -0.015em;
  margin: 0;
}

.nb-pagehead-facts {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--faint);
}

/* ------------------------------------------------------------ sections page */
.nb-secgroup {
  margin-top: 24px;
}

.nb-sechead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
}

.nb-sechead h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.008em;
  margin: 0;
}

.nb-sechead span {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--faint);
}

.nb-series {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 18px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
}

.nb-series-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16.5px;
}

.nb-series-latest {
  grid-column: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nb-series:hover .nb-series-name {
  color: var(--accent);
}

.nb-series-status {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nb-series-done .nb-series-name {
  color: var(--ink-soft);
}

.nb-progress {
  width: 52px;
  height: 3px;
  background: var(--hair);
  display: inline-block;
  overflow: hidden;
}

.nb-progress b {
  display: block;
  height: 100%;
  background: var(--accent);
}

.nb-inactive-series {
  margin-top: 28px;
}

.nb-inactive-series summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--faint);
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
}

.nb-inactive-series summary::-webkit-details-marker {
  display: none;
}

.nb-inactive-series .nb-series {
  opacity: 0.7;
}

/* --------------------------------------------------------- series pages */
.nb-serieshead {
  margin: 20px 0 4px;
}

.nb-serieshead h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 6vw, 30px);
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.nb-serieshead .nb-series-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}

.nb-seq {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nb-seq li {
  border-bottom: 1px solid var(--hair);
}

.nb-seq a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 4px;
  text-decoration: none;
  min-height: 44px;
}

.nb-seq .nb-seq-n {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--faint);
  flex: 0 0 2em;
}

.nb-seq .nb-seq-t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  flex: 1;
}

.nb-list .nb-item {
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--hair);
}

.nb-month-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin: 18px 0 2px;
}

/* ------------------------------------------------------------- search page */
.nb-searchbox {
  margin: 16px 0 12px;
}

.nb-searchbox input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--serif);
  font-size: 17px;
}

.nb-searchbox input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.nb-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.nb-chips::-webkit-scrollbar {
  display: none;
}

.nb-chips a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.nb-chips a.on {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.nb-results-count {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--faint);
  margin: 14px 0 2px;
}

.nb-results .nb-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}

.nb-results .nb-item h3 {
  font-size: 18px;
}

.nb-results .nb-snippet {
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 2px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nb-results mark {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

/* ------------------------------------------------------------- empty states */
.nb-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  color: var(--ink-soft);
  margin: 26px 0;
}

.nb-empty h2 {
  font-family: var(--serif);
  margin: 0 0 6px;
  color: var(--ink);
}

.nb-empty p {
  font-size: 14.5px;
  margin: 0;
}

/* ----------------------------------------------------------------- footer */
.nb-footer {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.nb-footer-in {
  max-width: 800px;
  margin: 0 auto;
  padding: 2px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 40px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}

.nb-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}

.nb-footer a:hover {
  color: var(--ink);
}

.nb-footer .nb-appearance {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--ink-soft);
  min-height: 36px;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
}

.nb-footer .nb-appearance:hover {
  color: var(--ink);
}

/* ============================ article chrome ============================ */

/* Everything below styles published articles — append-only API. */

.nb-article {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
}

.nb-reading {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.nb-article .nb-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 24px 0 10px;
}

.nb-article .nb-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.nb-article .nb-eyebrow a:hover {
  color: var(--accent-2);
}

/* Prose links. An article body may link a sibling library article or an
   external page outside the citation apparatus, and the global anchor reset
   leaves those links indistinguishable from prose. Scoped to direct children
   of body paragraphs so citation sups, source lists, and chrome keep their
   own rules. */
.nb-article .nb-reading section p > a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--hair);
  text-underline-offset: 2px;
}

.nb-article .nb-reading section p > a:hover {
  text-decoration-color: var(--accent);
}

/* Inline literals carry an exact spelling the reader must preserve. Scoped to
   direct text children so code listings, citations, and source links keep their
   own treatment. Long literals may wrap rather than forcing a narrow screen to
   scroll sideways. */
.nb-article .nb-reading :is(p, li, figcaption) > code {
  padding: 0.08em 0.32em 0.13em;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--wash);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: -0.035em;
  font-variant-ligatures: none;
  box-decoration-break: clone;
}

.nb-article .nb-eyebrow .nb-eyebrow-progress {
  color: var(--ink-soft);
}

.nb-article h1.nb-title {
  font-size: clamp(26px, 6.5vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.016em;
  margin: 0 0 10px;
  font-weight: 600;
  font-variation-settings: "opsz" 60;
}

.nb-article .nb-dekline {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 17.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.nb-byline {
  display: flex;
  gap: 12px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.015em;
  color: var(--ink-soft);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.nb-byline .nb-hide {
  display: none;
}

.nb-byline .nb-date {
  margin-left: auto;
}

.nb-article h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 34px 0 10px;
  line-height: 1.25;
  font-weight: 600;
}

.nb-article h3 {
  font-size: 18px;
  margin: 24px 0 8px;
}

.nb-article p {
  margin: 0 0 14px;
}

.nb-article blockquote {
  margin: 18px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}

.nb-section-n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  margin-right: 8px;
}

.nb-jumpnav {
  display: none;
} /* superseded by the runtime Contents */

@media (width >=1080px) {
  .nb-article {
    font-size: 18.5px;
  }

  .nb-article h1.nb-title {
    font-size: clamp(32px, 3.2vw, 42px);
  }

  .nb-article .nb-dekline {
    font-size: 19px;
  }

  .nb-article h2 {
    font-size: 25px;
  }
}

/* contents (built by nb.js from the article's own sections) */
.nb-toc {
  margin: -13px 0 24px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--sans);
}

.nb-toc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 11px 2px;
}

.nb-toc summary::-webkit-details-marker {
  display: none;
}

.nb-toc summary::after {
  content: "+";
  margin-left: auto;
  font-size: 15px;
  color: var(--faint);
}

.nb-toc[open] summary::after {
  content: "–";
}

.nb-toc ol {
  margin: 0 0 12px;
  padding-left: 24px;
}

.nb-toc ol ol {
  margin: 8px 0 0;
  padding-left: 18px;
  list-style: lower-alpha;
  color: var(--ink-soft);
}

.nb-toc li {
  margin: 0 0 8px;
  font-size: 14px;
}

.nb-toc a {
  color: var(--ink);
  text-decoration: none;
}

.nb-toc a:hover {
  color: var(--accent);
}

/* inline citations: quiet chips; tapping opens the source sheet */
sup.nb-cite {
  line-height: 0;
}

sup.nb-cite a {
  font-family: var(--sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-2);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 0 3px;
}

sup.nb-cite a:hover {
  border-color: var(--accent-2);
}

/* the source sheet (built by nb.js) */
.nb-veil {
  position: fixed;
  inset: 0;
  background: rgb(10 14 22 / 40%);
  z-index: 60;
}

.nb-sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: min(560px, calc(100vw - 20px));
  z-index: 61;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 16px 48px rgb(0 0 0 / 28%);
  padding: 14px 16px 12px;
}

.nb-sheet-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.nb-sheet-body {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: break-word;
}

.nb-sheet-body a {
  color: var(--accent-2);
}

.nb-sheet-context {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 9px;
}

.nb-sheet-context p {
  margin: 5px 0;
}

.nb-sheet-locator {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
}

/* sources list: the title is the link; ↩ returns to the citing sentence */
.nb-sources ol {
  padding-left: 22px;
  font-family: var(--sans);
  font-size: 13.5px;
}

.nb-sources li {
  margin: 0 0 8px;
  color: var(--ink-soft);
}

.nb-sources a {
  color: var(--accent-2);
  word-break: normal;
  overflow-wrap: anywhere;
}

a.nb-backref {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  color: var(--faint);
  padding: 0 3px;
}

a.nb-backref:hover {
  color: var(--accent);
}

/* sequence prev/next (built by nb.js when a published neighbor exists) */
.nb-endnav {
  border-top: 1px solid var(--line);
  margin-top: 36px;
  padding: 14px 0 4px;
  font-family: var(--sans);
  font-size: 13px;
}

.nb-endnav-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.nb-endnav a {
  display: block;
  max-width: 47%;
  text-decoration: none;
}

.nb-endnav a.next {
  margin-left: auto;
  text-align: right;
}

.nb-endnav-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.nb-endnav-title {
  display: block;
  line-height: 1.45;
  color: var(--accent-2);
}

.nb-endnav a:hover .nb-endnav-title {
  color: var(--accent);
}

/* charts */
figure.nb-figure {
  margin: 24px 0;
  padding: 12px;
  background: var(--wash);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

figure.nb-figure img {
  display: block;
  width: 100%;
  height: auto;
}

figure.nb-figure figcaption {
  margin-top: 8px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11.5px;
}

figure.nb-chart {
  margin: 22px 0;
  padding: 14px;
  background: var(--wash);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

figure.nb-chart figcaption {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* legacy: canvas/noscript serve articles published before PNG charts */
figure.nb-chart canvas {
  width: 100%;
  max-height: 260px;
}

figure.nb-chart noscript {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--faint);
}

/* stat strip, as ledger rows: hairline rows on phones, columns with
   vertical dividers on wide screens. No boxes. Extends to
   any count, one included. */
.nb-stat-strip {
  display: grid;
  grid-template-columns: 1fr;
  margin: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.nb-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
}

.nb-stat + .nb-stat {
  border-top: 1px solid var(--hair);
}

.nb-stat .nb-stat-n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--accent-2);
}

.nb-stat .nb-stat-l {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
}

@media (width >= 641px) {
  .nb-stat-strip {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .nb-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 16px;
  }

  .nb-stat + .nb-stat {
    border-top: none;
    border-left: 1px solid var(--hair);
  }

  .nb-stat .nb-stat-l {
    text-align: left;
  }
}

/* the note: the one labeled-passage component. The writer supplies the
   label (a definition's term, "In plain language", "Verdict", "Next
   article", a coined label) and any content: prose, a list, a quotation.
   `nb-note-strong` is the landing intensity; use it at most once. */
.nb-note {
  margin: 18px 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line);
}

.nb-note .nb-note-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: block;
  margin-bottom: 4px;
}

.nb-note > p,
.nb-note > ul,
.nb-note > ol,
.nb-note > blockquote {
  margin: 0;
}

.nb-note > ul,
.nb-note > ol {
  padding-left: 20px;
}

.nb-note li {
  margin: 3px 0;
}

.nb-note blockquote {
  font-style: italic;
}

.nb-note .nb-note-who {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-style: normal;
  color: var(--faint);
}

.nb-note.nb-note-strong {
  border-left: 3px solid var(--accent-2);
  background: var(--wash);
  padding: 14px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* the rubric: scored criteria for a review (engine contract: an integer
   data-score 0-5, the rendered nb-rubric-score agreeing, the note cited).
   Meter width and color follow data-score via the semantic tokens. */
.nb-rubric {
  background: var(--wash);
  border-left: 3px solid var(--accent-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px 6px;
  margin: 14px 0;
}

.nb-rubric-row {
  padding: 8px 0 10px;
  border-top: 1px solid var(--line);
}

.nb-rubric-row:first-child {
  border-top: none;
}

.nb-rubric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nb-rubric-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
}

.nb-rubric-gauge {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.nb-rubric-meter {
  width: 84px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  flex: none;
}

.nb-rubric-meter i {
  display: block;
  height: 100%;
  background: var(--warn);
}

.nb-rubric-score {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}

.nb-rubric-row[data-score="0"] .nb-rubric-meter i {
  width: 0%;
  background: var(--bad);
}

.nb-rubric-row[data-score="1"] .nb-rubric-meter i {
  width: 20%;
  background: var(--bad);
}

.nb-rubric-row[data-score="2"] .nb-rubric-meter i {
  width: 40%;
  background: var(--warn);
}

.nb-rubric-row[data-score="3"] .nb-rubric-meter i {
  width: 60%;
  background: var(--warn);
}

.nb-rubric-row[data-score="4"] .nb-rubric-meter i {
  width: 80%;
  background: var(--ok);
}

.nb-rubric-row[data-score="5"] .nb-rubric-meter i {
  width: 100%;
  background: var(--ok);
}

.nb-rubric-note {
  margin: 3px 0 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* the table: compact worked rows (design adopted from the example press's
   rs-worked): mono numerals, spaced digits fit a phone, the caption carries
   the citation. A `txt` cell drops to serif, left-aligns, and wraps.

   Authored markup is the bare table; the runtime dresses every one in the
   data-block card (nb-table-card > nb-table-scroll, the caption re-seated
   as the card's figcaption footer), so wide rows scroll inside the card
   and never push the page. The no-JS fallback below makes the bare table
   its own scroll container, so the page holds even before the card. */
.nb-table {
  display: block;
  overflow-x: auto;
  margin: 24px auto;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink);
}

.nb-table caption {
  caption-side: bottom;
  padding-top: 10px;
  font-family: var(--sans);
  font-size: 0.82rem;
  text-align: left;
  color: var(--ink-soft);
}

.nb-table-card {
  margin: 24px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.nb-table-scroll {
  overflow-x: auto;
  padding: 12px 14px;
}

.nb-table-scroll .nb-table {
  display: table;
  overflow: visible;
  margin: 0 auto;
}

.nb-table-card figcaption {
  border-top: 1px solid var(--hair);
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.nb-table th {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--faint);
}

.nb-table th:first-child,
.nb-table td:first-child {
  padding-left: 0;
  text-align: left;
}

.nb-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--hair);
  text-align: center;
  white-space: nowrap;
}

.nb-table tr:last-child td {
  border-bottom: none;
}

.nb-table .nb-table-token {
  display: inline-block;
  padding: 1px 7px;
  background: var(--faint);
  border-radius: 4px;
  color: var(--bg);
}

.nb-table td.txt {
  font-family: var(--serif);
  font-size: 0.95rem;
}

.nb-table td.txt,
.nb-table th.txt {
  text-align: left;
  white-space: normal;
}

@media (width <= 640px) {
  .nb-table .nb-table-token {
    max-inline-size: min(7rem, 30vw);
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }

  .nb-table td.txt,
  .nb-table th.txt {
    min-inline-size: min(14rem, 68vw);
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* lesson furniture */

/* @deprecated nb-objectives -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-objectives {
  background: var(--wash);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 8px;
}

.nb-objectives .nb-objectives-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.nb-objectives ul {
  margin: 0;
  padding-left: 20px;
  font-family: var(--sans);
  font-size: 14.5px;
}

.nb-objectives li {
  margin: 4px 0;
}

/* @deprecated nb-callout -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-callout {
  border-left: 3px solid var(--accent);
  background: var(--wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  margin: 18px 0;
}

.nb-callout .nb-callout-term {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

/* @deprecated nb-check-box -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-check-box {
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 6px 0 14px;
  margin: 10px 0;
}

.nb-check-box ol {
  font-family: var(--sans);
  font-size: 15px;
}

.nb-check-box li {
  margin: 10px 0;
}

/* @deprecated nb-bridge -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-bridge {
  border-left: 3px solid var(--accent-2);
  background: var(--wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px;
  margin: 14px 0;
}

.nb-bridge .nb-bridge-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: block;
  margin-bottom: 4px;
}

/* brief furniture */
.nb-brief-item {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}

.nb-brief-item:last-child {
  border-bottom: 0;
}

.nb-brief-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}

.nb-brief-item h3 {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.nb-brief-item h3 > a {
  color: inherit;
}

.nb-brief-item h3 > a[href]::after {
  content: "\2197";
  font-family: var(--sans);
  font-size: 12px;
  color: var(--accent);
  margin-left: 6px;
  vertical-align: 2px;
}

.nb-brief-item p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

@media (width >=640px) {
  .nb-brief-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0 18px;
  }

  /* The tag owns the gutter and everything else owns the text column. Naming
     only the prose left any furniture the item carries unassigned, and grid
     auto-placement dropped it into the 110px gutter. */
  .nb-brief-item > * {
    grid-column: 2;
  }

  .nb-brief-item > .nb-brief-tag {
    grid-column: 1;
    margin-top: 4px;
  }
}

/* paper furniture */

/* @deprecated nb-abstract -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-abstract {
  background: var(--wash);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 8px;
}

.nb-abstract .nb-abstract-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.nb-holdsup {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px 0;
}

@media (width >=640px) {
  .nb-holdsup {
    grid-template-columns: 1fr 1fr;
  }
}

.nb-holdsup > div {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--panel);
}

.nb-holdsup .nb-holdsup-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.nb-holdsup > div.good .nb-holdsup-label {
  color: var(--ok);
}

.nb-holdsup > div.careful .nb-holdsup-label {
  color: var(--warn);
}

.nb-holdsup ul {
  margin: 0;
  padding-left: 18px;
  font-family: var(--sans);
  font-size: 14.5px;
}

.nb-holdsup li {
  margin: 6px 0;
}

/* @deprecated nb-verdict -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-verdict {
  border-left: 3px solid var(--accent-2);
  background: var(--wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px;
  margin: 14px 0;
}

.nb-verdict .nb-verdict-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: block;
  margin-bottom: 4px;
}

/* chronicle furniture */
.nb-timeline {
  list-style: none;
  margin: 16px 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--line);
  position: relative;
}

.nb-tl-event {
  position: relative;
  margin: 0 0 22px;
}

.nb-tl-event::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}

.nb-tl-event.major::before {
  background: var(--accent);
}

.nb-tl-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
}

.nb-tl-event h3 {
  font-family: var(--serif);
  font-size: 18px;
  margin: 0 0 6px;
  line-height: 1.3;
}

.nb-tl-event p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.nb-tl-interlude {
  margin: 26px 0;
}

.nb-tl-interlude p {
  font-style: italic;
}

/* shared furniture: prose ornaments */
.nb-pull {
  margin: 26px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.nb-pull p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

/* @deprecated nb-epigraph -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-epigraph {
  margin: 0 0 26px;
  padding: 0 24px;
  text-align: center;
}

.nb-epigraph p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 6px;
  color: var(--ink-soft);
}

.nb-epigraph .nb-epigraph-who {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

/* @deprecated nb-aside -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-aside {
  background: var(--wash);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 18px 0;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
}

@media (width >=640px) {
  .nb-aside {
    float: right;
    width: 220px;
    margin: 4px 0 12px 20px;
  }
}

/* shared furniture: structured blocks */
.nb-steps {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  counter-reset: nb-step;
}

.nb-steps > li {
  position: relative;
  padding: 0 0 18px 44px;
  counter-increment: nb-step;
}

.nb-steps > li::before {
  content: counter(nb-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--accent);
}

.nb-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
}

.nb-steps h3 {
  font-family: var(--serif);
  font-size: 17.5px;
  margin: 0 0 4px;
  line-height: 1.3;
}

.nb-steps p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

/* @deprecated nb-cast -> nb-note: retired from the catalog (the nb-note
   primitive carries this move); kept so the published shelf renders */
.nb-cast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.nb-cast > div {
  background: var(--panel);
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.nb-cast .nb-cast-name {
  font-family: var(--serif);
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
}

.nb-cast .nb-cast-role {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.nb-position {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--wash);
  border-left: 3px solid var(--accent-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.nb-position-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.nb-position-who {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.nb-position-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.nb-position-statement {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--ink);
}

.nb-position-summary {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin: 0;
}

/* the claim card carries its whole lifecycle: open the night it is made,
   hit or miss when a later article judges it (data-nb-resolution), so no
   separate grading component exists. */
.nb-claim {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
  padding: 14px 16px;
  margin: 14px 0;
}

.nb-claim[data-nb-resolution="hit"] {
  border-left-color: var(--ok);
}

.nb-claim[data-nb-resolution="miss"] {
  border-left-color: var(--bad);
}

.nb-claim-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.nb-claim-state {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid currentcolor;
  white-space: nowrap;
  color: var(--warn);
}

.nb-claim[data-nb-resolution="hit"] .nb-claim-state {
  color: var(--ok);
}

.nb-claim[data-nb-resolution="miss"] .nb-claim-state {
  color: var(--bad);
}

.nb-claim-outcome {
  margin: 8px 0 2px;
  font-size: 15px;
  color: var(--ink);
}

.nb-claim h3 {
  font-family: var(--serif);
  font-size: 17.5px;
  margin: 0 0 8px;
  line-height: 1.3;
}

.nb-claim p {
  margin: 0 0 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.nb-claim-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hair);
  padding-top: 8px;
}

.nb-claim-meta span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 2px 10px;
}

/* math: the writer authors LaTeX as the element's text and the runtime
   typesets it with KaTeX (nb.js, pinned, loaded only when a page carries
   the furniture). No JS, the raw TeX shows — honest and copyable. The
   annotated form colors terms via \htmlClass spans (.nb-mc*) from the
   chart tokens, so the palette holds in both schemes.

   Three tiers. Inline rides the prose line. A bare display equation sits
   open on the page, journal-style: the prose around it carries the
   citation. The moment text is grouped with the equation — a caption, a
   legend — the whole thing becomes a data-block card (the same card the
   code listing and the table wear), so the attached text reads as the
   block's own and never as a stray paragraph. */
.nb-math {
  margin: 26px 0;
}

.nb-math-eq {
  overflow: auto hidden;
  padding: 6px 3px;
  text-align: center;
  font-size: 17px;
  color: var(--ink);
}

.nb-math-eq .katex {
  font-size: 1.16em;
}

.nb-math-in .katex {
  font-size: 1.02em;

  /* inline math must ride the line: let it wrap at KaTeX's top-level
     operator boundaries instead of forcing the page wide on a phone */
  white-space: normal;
}

/* attached text promotes the figure to the card */
.nb-math:has(figcaption),
.nb-math:has(.nb-math-legend) {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 18px 0;
}

.nb-math:has(figcaption) .nb-math-eq,
.nb-math:has(.nb-math-legend) .nb-math-eq {
  padding: 5px 0 12px;
}

.nb-math figcaption {
  border-top: 1px solid var(--hair);
  margin: 0 -18px;
  padding: 9px 18px 11px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* legend without a caption still closes the card cleanly */
.nb-math:has(.nb-math-legend):not(:has(figcaption)) {
  padding-bottom: 14px;
}

.nb-math-legend {
  list-style: none;
  margin: 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 7px 13px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.nb-math-legend li {
  display: contents;
}

.nb-math-legend .nb-math-term {
  font-size: 13px;
  white-space: nowrap;
  justify-self: end;
  padding-top: 1px;
}

/* a legend above the caption supplies the closing hairline itself */
.nb-math-legend + figcaption {
  margin-top: 13px;
}

.nb-math .nb-mc1 {
  color: var(--chart-2);
}

.nb-math .nb-mc2 {
  color: var(--chart-3);
}

.nb-math .nb-mc3 {
  color: var(--chart-1);
}

.nb-math .nb-mc4 {
  color: var(--chart-4);
}

.nb-math .nb-mc5 {
  color: var(--chart-5);
}

/* phones: display math steps down a size before it resorts to scrolling */
@media (width <= 480px) {
  .nb-math-eq {
    font-size: 15px;
  }

  .nb-math-eq .katex {
    font-size: 1.05em;
  }
}

/* code: a real listing with a header (file · language) and an optional
   cited caption. The article writes plain <pre><code class="language-…">;
   Prism (nb.js, pinned, loaded only when a page carries the furniture)
   highlights it into .token spans colored below. No-JS readers get clean
   monospace. Token colors are scoped to the component, set for day and
   overridden for night, so they never leak into the page. */
.nb-code {
  --tk-com: #7a8494;
  --tk-kw: #9a2b6b;
  --tk-fn: #2b5b9a;
  --tk-str: #2f7d4f;
  --tk-num: #9c5a00;
  --tk-builtin: #7a3ba0;

  margin: 24px 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (prefers-color-scheme: dark) {
  .nb-code {
    --tk-com: #7f8a9c;
    --tk-kw: #e58ab8;
    --tk-fn: #82b4ec;
    --tk-str: #86cf9e;
    --tk-num: #e6b968;
    --tk-builtin: #c9a2ec;
  }
}

:root[data-mode="light"] .nb-code {
  --tk-com: #7a8494;
  --tk-kw: #9a2b6b;
  --tk-fn: #2b5b9a;
  --tk-str: #2f7d4f;
  --tk-num: #9c5a00;
  --tk-builtin: #7a3ba0;
}

:root[data-mode="dark"] .nb-code {
  --tk-com: #7f8a9c;
  --tk-kw: #e58ab8;
  --tk-fn: #82b4ec;
  --tk-str: #86cf9e;
  --tk-num: #e6b968;
  --tk-builtin: #c9a2ec;
}

.nb-code-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--hair);
  background: var(--wash);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--faint);
}

.nb-code-file {
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.nb-code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

.nb-code pre code {
  font-family: inherit;
}

.nb-code-cap {
  display: block;
  padding: 9px 14px;
  border-top: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.nb-code .token.comment,
.nb-code .token.prolog,
.nb-code .token.doctype {
  color: var(--tk-com);
  font-style: italic;
}

.nb-code .token.keyword {
  color: var(--tk-kw);
  font-weight: 500;
}

.nb-code .token.function,
.nb-code .token.class-name {
  color: var(--tk-fn);
}

.nb-code .token.string,
.nb-code .token.char {
  color: var(--tk-str);
}

.nb-code .token.number,
.nb-code .token.boolean {
  color: var(--tk-num);
}

.nb-code .token.builtin,
.nb-code .token.decorator,
.nb-code .token.annotation {
  color: var(--tk-builtin);
}

.nb-code .token.operator {
  color: var(--ink-soft);
  background: none;
}

/* @deprecated nb-grade -> nb-claim: retired from the catalog (the claim card
   carries its own resolution); kept so the published shelf renders */
.nb-grade {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}

.nb-grade:last-child {
  border-bottom: 0;
}

.nb-grade .nb-grade-verdict {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex: 0 0 52px;
}

.nb-grade.hit .nb-grade-verdict {
  color: var(--ok);
}

.nb-grade.miss .nb-grade-verdict {
  color: var(--bad);
}

.nb-grade.open .nb-grade-verdict {
  color: var(--warn);
}

.nb-grade p {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-soft);
}

@media print {
  .nb-bar,
  .nb-menu,
  .nb-footer,
  .nb-toc,
  .nb-endnav,
  .nb-nightnav {
    display: none !important;
  }
}