/* Document page: header with codes and meta, reading typography of the body, markdown tables, quotes, the inline table of contents and the document footer. */

/* ---------- header ---------- */
.nb-dochead { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
.nb-dochead-codes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.nb-blocktab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px 2px 3px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 var(--t-sm) / 1.6 var(--font-ui);
}
.nb-blocktab:hover { color: var(--ink); text-decoration: none; border-color: var(--ink-4); }
.nb-blocktab .l {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--bg);
  font: 600 13px / 1 var(--font-read);
}

.nb-title {
  font: 500 var(--t-h1) / var(--lh-tight) var(--font-read);
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.012em;
}
.nb-lead {
  max-width: var(--read-w);
  color: var(--ink-2);
  font: 400 1.1875rem / 1.55 var(--font-read);
}

.nb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.nb-meta > div { display: grid; gap: 2px; }
.nb-meta dt { color: var(--ink-3); font-size: var(--t-xs); }
.nb-meta dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: var(--s2); }

/* document size against the 15 000-character limit of the library */
.nb-meter {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 6px;
  border-radius: 3px;
  background: var(--c1-wash);
  overflow: hidden;
  vertical-align: middle;
}
.nb-meter > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v, 0) * 100%);
  border-radius: 3px;
  background: var(--c1);
}
.nb-meter.is-near > i { background: var(--part); }
.nb-meter.is-over > i { background: var(--no); }

/* ---------- inline TOC when the rail is hidden ---------- */
.nb-toc-inline {
  display: none;
  margin: 0 0 var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
}
.nb-toc-inline summary {
  padding: 10px var(--s4);
  color: var(--ink-2);
  font-weight: 550;
  font-size: var(--t-sm);
  cursor: pointer;
  list-style: none;
}
.nb-toc-inline summary::-webkit-details-marker { display: none; }
.nb-toc-inline summary::after { content: " +"; color: var(--ink-3); }
.nb-toc-inline[open] summary::after { content: " −"; }
.nb-toc-inline .nb-toc { margin: 0 var(--s4) var(--s4); }
@media (max-width: 1180px) { .nb-toc-inline { display: block; } }
.nb-desk.is-wide .nb-toc-inline { display: block; }

/* ---------- body ---------- */
.nb-prose {
  font: 400 var(--t-body) / var(--lh-read) var(--font-read);
  color: var(--ink);
  font-variant-numeric: lining-nums;
  hanging-punctuation: first;
  overflow-wrap: break-word;
}
.nb-prose > * + * { margin-top: 1.05em; }
.nb-prose > :first-child { margin-top: 0; }

.nb-prose h2 {
  margin-top: 2.1em;
  font: 560 var(--t-h2) / 1.25 var(--font-read);
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.006em;
}
.nb-prose h3 {
  margin-top: 1.8em;
  font: 650 var(--t-h3) / 1.35 var(--font-ui);
  letter-spacing: -0.005em;
}
.nb-prose h4 {
  margin-top: 1.6em;
  font: 650 1rem / 1.4 var(--font-ui);
  color: var(--ink-2);
}
.nb-prose h2 + *, .nb-prose h3 + *, .nb-prose h4 + * { margin-top: 0.55em; }
.nb-prose :is(h2, h3, h4) { position: relative; scroll-margin-top: calc(var(--top-h) + 24px); }
.nb-anchor {
  position: absolute;
  left: -1.1em;
  padding-right: 0.3em;
  color: var(--ink-4);
  font-weight: 400;
  opacity: 0;
}
.nb-prose :is(h2, h3, h4):hover .nb-anchor, .nb-anchor:focus-visible { opacity: 1; text-decoration: none; }

.nb-prose strong { font-weight: 650; }
.nb-prose .nb-id { padding: 0 5px; font-size: 0.68em; vertical-align: 0.12em; }
.nb-prose em { font-style: italic; }
.nb-prose del { color: var(--ink-3); }
.nb-prose a:not(.nb-id):not(.nb-l):not(.nb-shot-thumb) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}
.nb-prose a:not(.nb-id):not(.nb-shot-thumb):hover { text-decoration-color: currentColor; }

.nb-prose ul, .nb-prose ol { padding-left: 1.35em; }
.nb-prose li + li { margin-top: 0.4em; }
.nb-prose li > ul, .nb-prose li > ol { margin-top: 0.4em; }
.nb-prose li::marker { color: var(--ink-4); }
.nb-prose ol > li::marker { font: 500 0.85em var(--font-ui); color: var(--ink-3); }
.nb-prose li > p + p { margin-top: 0.6em; }

.nb-prose blockquote {
  margin-inline: 0;
  padding: 0.15em 0 0.15em 1.1em;
  border-left: 2px solid var(--rule-2);
  color: var(--ink-2);
}
.nb-prose blockquote > * + * { margin-top: 0.7em; }

.nb-prose hr { height: 1px; margin-block: 2.4em; border: 0; background: var(--rule); }

.nb-prose code { padding: 0.08em 0.36em; border-radius: 4px; background: var(--sunken); color: var(--ink-2); }
.nb-prose pre {
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--sunken);
  font-size: 0.8em;
  line-height: 1.6;
  overflow-x: auto;
}
.nb-prose pre code { padding: 0; background: none; }

/* figures and components inside the text keep a little more air */
.nb-prose > .nb-c, .nb-prose > .nb-tablewrap { margin-top: 1.7em; margin-bottom: 0.5em; }

/* markdown tables */
.nb-tablewrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
}
.nb-tablewrap table, table.nb-t {
  width: 100%;
  font: 400 var(--t-sm) / 1.45 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.nb-tablewrap th, .nb-t th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--sunken);
  color: var(--ink-2);
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
}
.nb-tablewrap td, .nb-t td { padding: 9px 14px; vertical-align: top; }
.nb-tablewrap td:first-child, .nb-t td:first-child { min-width: 8.5rem; }
.nb-tablewrap tr + tr td, .nb-t tbody tr + tr td { border-top: 1px solid var(--rule); }
.nb-tablewrap .num, .nb-t .num { text-align: right; white-space: nowrap; }
.nb-tablewrap .ctr { text-align: center; }

/* ---------- model's emphasis assessment ---------- */
.nb-emph {
  display: grid;
  gap: 6px;
  padding: var(--s4) var(--s5);
  border-radius: var(--r);
  background: var(--op-wash);
}
.nb-emph-head { color: var(--op-ink); font: 600 var(--t-xs) / 1.3 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.nb-emph-head span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.nb-emph p { font-size: 1.0625rem; }

/* ---------- document footer ---------- */
.nb-docfoot { display: grid; gap: var(--s6); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.nb-srclist { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.nb-srclist li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.nb-srclist .t { color: var(--ink-2); overflow-wrap: anywhere; }
.nb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.nb-pager a {
  display: grid;
  gap: 4px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
}
.nb-pager a:hover { border-color: var(--rule-2); text-decoration: none; background: var(--hover); }
.nb-pager .dir { color: var(--ink-3); font-size: var(--t-xs); }
.nb-pager .t { font-weight: 550; line-height: 1.35; }
.nb-pager .next { text-align: right; grid-column: 2; }

/* the rail repeats the same blocks in a compact form */
.nb-rail .nb-srclist li { grid-template-columns: 1fr; gap: 2px; }

/* wide documents: running text keeps the reading measure, figures take the whole column */
.nb-desk.is-wide .nb-prose > :is(p, ul, ol, h2, h3, h4, blockquote, .nb-emph) { max-width: var(--read-w); }

@media (max-width: 640px) {
  .nb-prose { font-size: 1.0625rem; line-height: 1.62; }
  .nb-prose h2 { font-size: 1.375rem; }
  .nb-anchor { display: none; }
  .nb-meta { gap: var(--s2) var(--s4); }
  .nb-pager { grid-template-columns: 1fr; }
  .nb-pager .next { grid-column: 1; }
  .nb-srclist li { grid-template-columns: 1fr; gap: 2px; }
}
