/* Page layouts: home (hero, block cards A–Z, recent documents), block page (sections and document rows), sources reference and the components showcase. */

/* ---------- section scaffolding shared by wide pages ---------- */
.nb-hero { display: grid; gap: var(--s4); max-width: 46rem; margin-bottom: var(--s7); }
.nb-hero h1 {
  font: 480 var(--t-hero) / 1.06 var(--font-read);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.018em;
}
.nb-hero .nb-lead { font-size: 1.25rem; }

.nb-sec { margin-top: var(--s8); }
.nb-sec:first-child { margin-top: 0; }
.nb-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s5);
}
.nb-sec-head h2 {
  font: 560 1.625rem / 1.2 var(--font-read);
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.008em;
}
.nb-sec-head p { color: var(--ink-3); font-size: var(--t-sm); max-width: 36rem; }

/* library facts under the hero: plain numbers in a ruled row, not cards */
.nb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.nb-facts > div { display: grid; gap: 2px; padding: var(--s4) var(--s4) var(--s4) 0; }
.nb-facts dt { color: var(--ink-3); font-size: var(--t-sm); }
.nb-facts dd { margin: 0; font: 600 1.625rem / 1.15 var(--font-ui); letter-spacing: -0.015em; }
.nb-facts dd small { color: var(--ink-3); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; }

/* ---------- block cards on the home page ---------- */
.nb-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nb-block {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--s4);
  row-gap: var(--s2);
  height: 100%;
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
a.nb-block:hover { border-color: var(--rule-2); text-decoration: none; background: color-mix(in srgb, var(--surface) 92%, var(--accent-wash)); }
.nb-block-letter {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 4rem;
  border-radius: 10px 10px 10px 4px;
  background: var(--ink);
  color: var(--bg);
  font: 500 2.125rem / 1 var(--font-read);
  font-variation-settings: "opsz" 72;
}
.nb-block h3 { font: 600 1.125rem / 1.3 var(--font-ui); letter-spacing: -0.008em; }
.nb-block p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.nb-block-stats { display: grid; gap: var(--s2); margin-top: var(--s2); }
.nb-block-nums { display: flex; flex-wrap: wrap; gap: var(--s4); color: var(--ink-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.nb-block-nums b { color: var(--ink); font-weight: 600; font-size: var(--t-sm); }
.nb-block.is-empty { background: transparent; box-shadow: none; }
.nb-block.is-empty .nb-block-letter { background: transparent; border: 1px solid var(--rule-2); color: var(--ink-3); }
.nb-block.is-empty h3 { color: var(--ink-2); }

/* ---------- recently updated ---------- */
.nb-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.nb-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 7.5rem 6rem 5.5rem;
  gap: var(--s4);
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
a.nb-row:hover { background: var(--hover); text-decoration: none; }
.nb-row .t { font-weight: 500; line-height: 1.35; }
.nb-row .t small { display: block; margin-top: 2px; color: var(--ink-3); font-weight: 400; font-size: var(--t-xs); }
.nb-row .size { display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.nb-row .date { color: var(--ink-3); font-size: var(--t-xs); text-align: right; font-variant-numeric: tabular-nums; }
.nb-row-head { padding-block: 8px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 500; }
.nb-row-head:hover { background: transparent; }

.nb-ministack { display: flex; gap: 2px; width: 100%; height: 6px; }
.nb-ministack > i { min-width: 3px; background: var(--seg); }
.nb-ministack > i:first-child { border-radius: 3px 0 0 3px; }
.nb-ministack > i:last-child { border-radius: 0 3px 3px 0; }
.nb-ministack > i:only-child { border-radius: 3px; }
.nb-ministack.is-empty { background: var(--sunken); border-radius: 3px; }
.nb-empty { padding: var(--s6) var(--s5); border: 1px solid var(--rule); border-radius: var(--r-lg); color: var(--ink-3); text-align: center; }

/* ---------- block page ---------- */
.nb-blockhead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2) var(--s5);
  align-items: center;
  margin-bottom: var(--s6);
}
.nb-blockhead .nb-block-letter { grid-row: span 2; width: 4.5rem; height: 5.25rem; font-size: 2.75rem; }
.nb-blockhead h1 { align-self: end; font: 500 var(--t-h1) / 1.1 var(--font-read); font-variation-settings: "opsz" 60; letter-spacing: -0.012em; }
.nb-blockhead p { align-self: start; max-width: 40rem; color: var(--ink-2); font: 400 1.125rem / 1.5 var(--font-read); }
.nb-sec--tight { margin-top: var(--s6); }
.nb-blockfigs { display: grid; gap: var(--s5); }
.nb-secgroup + .nb-secgroup { margin-top: var(--s6); }
.nb-secgroup h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font: 560 1.3125rem / 1.3 var(--font-read);
  font-variation-settings: "opsz" 28;
}
.nb-secgroup h2 .n { color: var(--ink-3); font: 600 var(--t-sm) / 1 var(--font-ui); font-variant-numeric: tabular-nums; }

/* ---------- sources reference ---------- */
.nb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.nb-filters input {
  flex: 1 1 16rem;
  min-width: 0;
  height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.nb-chipbtn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--s3);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 var(--t-sm) / 1 var(--font-ui);
  cursor: pointer;
}
.nb-chipbtn:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.nb-chipbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.nb-chipbtn .c { margin-left: 4px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.nb-srctable td:first-child { white-space: nowrap; }
.nb-srctable .url { color: var(--ink-3); overflow-wrap: anywhere; font-size: var(--t-xs); }
.nb-srctable .used { display: flex; flex-wrap: wrap; gap: 4px; }
.nb-srctable tr:target td { background: var(--accent-wash); }
.nb-srctable tr { scroll-margin-top: calc(var(--top-h) + 24px); }

/* ---------- components showcase ---------- */
.nb-show-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s7); }
.nb-show-group + .nb-show-group { margin-top: var(--s8); }
.nb-show-item { display: grid; gap: var(--s4); margin-top: var(--s7); scroll-margin-top: calc(var(--top-h) + 24px); }
.nb-show-head { display: grid; gap: 6px; max-width: 46rem; }
.nb-show-head h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); font: 600 1.1875rem / 1.3 var(--font-ui); }
.nb-show-head p { color: var(--ink-2); font-size: var(--t-ui); }
.nb-show-head code { color: var(--ink-3); font-size: var(--t-sm); }
.nb-show-demo { min-width: 0; }
.nb-show-demo.is-narrow { max-width: var(--read-w); }
.nb-show-code { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.nb-show-code summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 8px 8px 8px var(--s4);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}
.nb-show-code summary::-webkit-details-marker { display: none; }
.nb-show-code pre {
  margin: 0;
  max-height: 26rem;
  padding: var(--s4);
  border-top: 1px solid var(--rule);
  background: var(--sunken);
  color: var(--ink-2);
  font: 400 0.78rem / 1.6 var(--font-code);
  overflow: auto;
  border-radius: 0 0 var(--r) var(--r);
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .nb-blocks { grid-template-columns: minmax(0, 1fr); }
  .nb-row { grid-template-columns: 4.75rem minmax(0, 1fr) 4.75rem; }
  .nb-row .size, .nb-row .st { display: none; }
  .nb-row-head { display: none; }
}
@media (max-width: 640px) {
  /* sources become cards: a seven-column table does not fit a phone */
  .nb-srctable thead { display: none; }
  .nb-srctable, .nb-srctable tbody, .nb-srctable td { display: block; }
  .nb-srctable tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px 14px; }
  .nb-srctable tr + tr { border-top: 1px solid var(--rule); }
  .nb-tablewrap .nb-srctable td { min-width: 0; padding: 0; border: 0; }
  .nb-srctable td:nth-child(2) { align-self: center; color: var(--ink-3); font-size: var(--t-xs); }
  .nb-srctable td:nth-child(n + 3) { grid-column: 1 / -1; }
  .nb-srctable td.num { text-align: left; color: var(--ink-3); font-size: var(--t-xs); }
  .nb-hero { margin-bottom: var(--s6); }
  .nb-hero .nb-lead { font-size: 1.0625rem; }
  .nb-sec { margin-top: var(--s7); }
  .nb-block { grid-template-columns: 2.75rem minmax(0, 1fr); padding: var(--s4); column-gap: var(--s3); }
  .nb-block-letter { width: 2.75rem; height: 3.25rem; font-size: 1.625rem; }
  .nb-blockhead { grid-template-columns: minmax(0, 1fr); }
  .nb-blockhead .nb-block-letter { grid-row: auto; width: 3.25rem; height: 3.75rem; font-size: 2rem; }
  .nb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-facts dd { font-size: 1.375rem; }
}