/* Alveolar niche architecture.
 *
 * The page reuses molecule.css for every shared component: .mol-wrap, .mol-seek,
 * .mol-head, .mol-filters, .mol-card, .mol-tools, .mol-seg, .mol-plot, .mol-note and
 * .mol-legend. This file adds only what that page has no equivalent for: the archetype
 * tile gallery, the labelled bar row, the one-dot-per-sample strip and the gene lists.
 *
 * Colour is taken from molecule.css and tokens.css, never invented here. Two exceptions
 * are named where they occur: a signed value uses the site's own --mol-down to --mol-up
 * scale, and a sequential value uses Spectral, because the lab bans the cyan-to-yellow
 * ramp that molecule.css uses for expression.
 */

:root {
  --na-epi:  #2e7fa8;   /* the four lineages, as the cartoons draw them */
  --na-endo: #b8443e;
  --na-mes:  #c08428;
  --na-imm:  #7355a3;
}

/* ------------------------------------------------------------ entry points */

.na-modes { margin-bottom: 10px; }

.na-lead {
  background: var(--mol-brand-soft);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--mol-ink);
  line-height: 1.55;
}

.na-lead b { color: var(--mol-brand); }

/* -------------------------------------------------------------- the tiles */

.na-gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

.na-tile {
  background: var(--mol-paper);
  border: 1px solid var(--mol-line);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.na-tile:hover { border-color: var(--mol-brand); }

.na-tile[aria-pressed="true"] {
  border-color: var(--mol-brand);
  box-shadow: inset 0 0 0 1px var(--mol-brand);
}

.na-tile svg { width: 100%; height: auto; display: block; }

.na-tile .t {
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--mol-ink);
}

/* The two enriched cell types and the disease statistic under each card. Readable, not fine print. */
.na-tile .s { font-size: 11.5px; }
.na-tile .na-enr,
.na-tile .na-stat { margin-top: 4px; color: var(--mol-ink); font-size: 11.5px; }

.na-tile .s {
  font-family: var(--lm-font-mono);
  font-size: 10px;
  color: var(--mol-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- the rows */

.na-row {
  display: grid;
  grid-template-columns: 118px 1fr 96px;
  gap: 9px;
  align-items: center;
  font-family: var(--lm-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 1px 0;
}

.na-track {
  background: var(--mol-mid);
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
}

.na-fill { height: 100%; }

.na-dotrow {
  display: grid;
  grid-template-columns: 162px 1fr 106px;
  gap: 9px;
  align-items: center;
  font-family: var(--lm-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.na-dotrow svg { width: 100%; height: 20px; }

/* -------------------------------------------------------------- the table */

.na-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--lm-font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* Keep scientific tables readable without widening the page on small screens. */
.na-compact .mol-plot, .na-compact #na-methods {
  max-width: 100%;
  overflow-x: auto;
}

.na-table th,
.na-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--mol-line);
  text-align: right;
  white-space: nowrap;
}

.na-table th:first-child,
.na-table td:first-child { text-align: left; }

.na-table thead th {
  background: var(--mol-ground);
  font-family: var(--lm-font-sans);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mol-muted);
  font-weight: 600;
}

.na-table tbody tr:last-child td { border-bottom: 0; }

.na-cell { text-align: center; color: #101010; }

/* --------------------------------------------------------------- the genes */

.na-genes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 767.98px) { .na-genes { grid-template-columns: 1fr; } }

.na-gl {
  display: grid;
  gap: 2px;
  font-family: var(--lm-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.na-gl div { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; }

/* A result the reader must not over-read carries this flag, not a footnote. */
.na-flag {
  border-left: 3px solid var(--mol-up);
  background: #fdf4f2;
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--mol-ink);
  margin-top: 12px;
  line-height: 1.5;
}

h3.na-h {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mol-muted);
  font-weight: 600;
  margin: 0 0 7px;
}

.na-fig {
  border: 1px solid var(--mol-line);
  border-radius: 10px;
  background: var(--mol-paper);
  padding: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
}

.na-fig svg { display: block; width: 100%; height: auto; min-width: 700px; }

/* ------------------------------------------------ the box-and-dot rows */

.na-iqrhead,
.na-iqrrow {
  display: grid;
  grid-template-columns: 168px 1fr 150px 78px;
  gap: 10px;
  align-items: center;
  font-family: var(--lm-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.na-iqrhead {
  font-family: var(--lm-font-sans);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mol-muted);
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--mol-line);
  margin-bottom: 4px;
}

.na-iqrrow { padding: 1px 0; }
.na-iqrrow svg { width: 100%; height: 24px; display: block; }
.na-iqrrow circle { cursor: default; }
.na-stat { color: var(--mol-muted); }
.na-stat em { font-style: normal; color: var(--mol-ink); }

/* ------------------------------------------------------ the gene panels */

#na-volcano svg,
#na-dotplot svg { display: block; max-width: 100%; height: auto; }
#na-dotplot { overflow-x: auto; }
#na-dotplot svg { max-width: none; }
.na-vpt { cursor: pointer; }
.na-vpt:hover { stroke: var(--mol-brand); stroke-width: 1.6; }

/* --------------------------------------------------- the pathology score */

/* A reader meeting an architecture needs to know at once whether it belongs to
   healthy or to remodelled tissue. The bar is the pathologist's own 0 to 100 grade,
   averaged over the tissue that architecture occupies, so it needs no key. */
.na-score { margin-top: 7px; }

.na-score .na-scorebar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #2c6fb5 0%, #f2f4f7 50%, #c0392b 100%);
  opacity: .38;
}

.na-score .na-marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--mol-ink);
}

.na-score .na-ci {
  position: absolute;
  top: 1px;
  height: 6px;
  border-radius: 3px;
  background: rgba(27, 39, 51, .28);
}

.na-score .na-cohort {
  position: absolute;
  top: -2px;
  width: 1px;
  height: 12px;
  background: var(--mol-muted);
}

.na-score .na-scoretext {
  font-family: var(--lm-font-mono);
  font-size: 10px;
  color: var(--mol-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

.na-score .na-scoretext b { color: var(--mol-ink); font-size: 11px; }

.na-scorewrap { position: relative; }

.na-iqraxis svg { height: 16px; }
.na-iqraxis { margin-bottom: 2px; }

/* The two switchers sit above the masthead, because together they decide what the page
   is about. The niche type comes first: it says which air spaces are in view, and the
   grouping below it says how those air spaces are divided. Each row carries its own label
   so a reader can tell the two axes apart at a glance. */
.na-modes { margin-bottom: 12px; }
.na-modes .mol-seg { flex-wrap: wrap; }
.na-modes .mol-seg button { font-size: 12.5px; padding: 8px 14px; }

.na-axis {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.na-axis-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mol-muted);
  min-width: 76px;
}

.na-axis-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mol-muted);
  margin: 6px 0 0 86px;
  max-width: 900px;
}

@media (max-width: 767.98px) {
  .na-axis-lab { min-width: 0; }
  .na-axis-note { margin-left: 0; }
}

/* ---------------------------------------------------- folded cards */

/* Two cards explain rather than report, so they open on request. The disclosure uses
   the same triangle and behaviour as the filter drawer, and keeps the card heading. */
details.na-fold { padding: 0; }

details.na-fold > summary {
  padding: 16px 22px;
  cursor: pointer;
  font-family: var(--lm-font-sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--mol-ink);
  list-style: none;
}

details.na-fold > summary::-webkit-details-marker { display: none; }

details.na-fold > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 10px;
  color: var(--mol-muted);
  font-size: 15px;
  transition: transform .15s;
}

details.na-fold[open] > summary::before { transform: rotate(90deg); }

details.na-fold > summary:hover { color: var(--mol-brand); }

details.na-fold > p.mol-why,
details.na-fold > .mol-plot,
details.na-fold > .mol-two,
details.na-fold > p.mol-note { margin-left: 22px; margin-right: 22px; }

details.na-fold > p.mol-note { padding-bottom: 18px; }
details.na-fold > .mol-plot:last-child { padding-bottom: 18px; }
details.na-fold > .mol-two { padding-bottom: 18px; }

/* ------------------------------------------------- one heading rank
 *
 * Card headings, folded-card summaries and the sample-restriction summary all sit at
 * the same level in the page, so they take one size. molecule.css sets its filter
 * summary at 14.5px, which is right on that page and out of rank here; the override is
 * scoped to this page's own id so the molecule page is untouched.
 */
#na-filters > summary {
  font-family: var(--lm-font-sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--mol-ink);
  padding: 16px 22px;
}

#na-filters > summary::before {
  font-size: 15px;
  margin-right: 10px;
}

#na-filters > summary:hover { color: var(--mol-brand); }

/* ------------------------------------------------ the Search by cell fork
 *
 * Two destinations, side by side, each carrying enough text for a reader to know which
 * question it answers. Built from the molecule tokens so it needs no new palette.
 */
.na-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

@media (max-width: 991.98px) { .na-choose { grid-template-columns: 1fr; } }

.na-choice {
  display: flex;
  flex-direction: column;
  background: var(--mol-paper);
  border: 1px solid var(--mol-line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--mol-ink);
  transition: border-color .15s, box-shadow .15s;
}

.na-choice:hover {
  border-color: var(--mol-brand);
  box-shadow: 0 4px 18px rgba(16, 32, 56, .10);
  text-decoration: none;
  color: var(--mol-ink);
}

/* The two images have very different proportions: the cell-type hierarchy is close to
   square and the niche gallery is twice as wide as it is tall. A short slot rendered the
   hierarchy at about 190px across, too small to read, so the slot is tall enough for the
   squarer image and both are fitted by height rather than cropped. */
.na-choice-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  background: var(--mol-ground);
  border-bottom: 1px solid var(--mol-line);
  padding: 14px 18px;
}

.na-choice-art img {
  max-width: 100%;
  max-height: 232px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.na-choice-body { padding: 18px 22px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }

.na-choice h2 {
  font-family: var(--lm-font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--lm-blue);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.na-choice-lead {
  font-size: 15px;
  color: var(--mol-ink);
  margin: 0 0 10px;
  font-weight: 600;
}

.na-choice-text {
  font-size: 13.5px;
  color: var(--mol-muted);
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1 1 auto;
}

.na-choice-meta {
  display: block;
  font-family: var(--lm-font-mono);
  font-size: 11px;
  color: var(--mol-muted);
  letter-spacing: .03em;
  margin-bottom: 12px;
}

.na-choice-go {
  display: inline-block;
  align-self: flex-start;
  background: var(--mol-brand);
  color: var(--mol-paper);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
}

.na-choice:hover .na-choice-go { background: var(--lm-blue); }

.na-choose-note {
  font-size: 12.5px;
  color: var(--mol-muted);
  line-height: 1.5;
  max-width: 100ch;
}

/* --------------------------------------------- sample names as links
 * A sample name reaches the imaging data behind it. A solid underline marks a
 * per-sample Vitessce view; a dotted one marks the study-page fallback, so a reader
 * can see before clicking whether the link lands on that sample or on the study.
 */
a.na-samp {
  color: var(--mol-brand);
  text-decoration: none;
  border-bottom: 1px dotted var(--mol-rule);
}

a.na-samp:hover { color: var(--lm-blue); border-bottom-color: var(--lm-blue); }
a.na-samp-direct { border-bottom: 1px solid var(--mol-brand); }
a.na-samp-current { font-weight: 700; }

/* The diverging contrast between one niche type and the rest. The class-averaged
   outlines are nearly the same shape, so this is where the real difference is stated. */
.na-divhead,
.na-divrow {
  display: grid;
  grid-template-columns: 168px 1fr 150px;
  gap: 12px;
  align-items: center;
}

.na-divhead {
  font-size: 11px;
  color: var(--mol-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mol-rule);
  margin-bottom: 8px;
}

.na-divhead span:nth-child(2) { text-align: center; text-transform: none; letter-spacing: 0; }
.na-divhead span:nth-child(3) { text-align: right; }

.na-divrow { font-size: 12.5px; padding: 2px 0; }

.na-divrow > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.na-divtrack {
  position: relative;
  height: 13px;
  background: var(--mol-shade, #f0f3f4);
  border-radius: 3px;
}

.na-divmid {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--mol-rule);
}

.na-divfill { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; }

.na-divnum { text-align: right; font-variant-numeric: tabular-nums; }
.na-divnum em { color: var(--mol-muted); font-style: normal; }

@media (max-width: 767.98px) {
  .na-divhead, .na-divrow { grid-template-columns: 110px 1fr 96px; gap: 7px; font-size: 11.5px; }
}

/* ---------------------------------------------- legacy-candidate status banner */
.na-legacy {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 6px;
  background: #fff6e5; border: 1px solid #e0b877; color: #6b4a12;
  font-size: 12.5px; line-height: 1.45;
}
.na-legacy strong { color: #8a5a08; }

/* ------------------------------------------------ the discovered-state overview */
.na-ov { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.na-ov-cell {
  border: 1px solid #dde3ea; border-radius: 6px; padding: 10px; background: #ffffff;
}
.na-ov-cell.is-current { border-color: #0b3d78; box-shadow: 0 0 0 2px #e8f0f9 inset; }
.na-ov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.na-ov-name { font-weight: 700; color: #1b2733; font-size: 13px; }
.na-ov-burden { font-variant-numeric: tabular-nums; color: #0b3d78; font-weight: 700; }
.na-ov-thumb { height: 76px; display: flex; align-items: center; justify-content: center;
               margin: 6px 0; }
.na-ov-thumb svg { max-height: 76px; max-width: 100%; }
.na-ov-row { display: flex; justify-content: space-between; font-size: 11.5px; color: #46586b;
             padding: 1px 0; }
.na-ov-row b { font-weight: 600; color: #1b2733; font-variant-numeric: tabular-nums; }
.na-ov-bar { height: 6px; background: #eef2f6; border-radius: 3px; overflow: hidden;
             margin: 5px 0 2px; }
.na-ov-bar i { display: block; height: 100%; background: #4a86c8; }
.na-ov-obs { font-size: 10.5px; color: #7b6a3a; background: #fff6e5; border-radius: 3px;
             padding: 1px 5px; display: inline-block; margin-top: 4px; }
.na-ov-note { font-size: 11.5px; color: #5d6b7a; margin-top: 10px; }

/* ------------------------------------------------ methods and validation block */
.na-meth h3 { font-size: 13px; margin: 14px 0 6px; color: #1b2733; }
.na-meth p { font-size: 12.5px; line-height: 1.5; color: #46586b; margin: 4px 0 8px; }
.na-meth table { border-collapse: collapse; font-size: 11.5px; margin: 4px 0 10px; width: 100%; }
.na-meth th, .na-meth td { border: 1px solid #e3e8ee; padding: 3px 7px; text-align: left; }
.na-meth th { background: #f5f8fb; font-weight: 600; color: #1b2733; }
.na-meth td.num { text-align: right; font-variant-numeric: tabular-nums; }
.na-meth .verdict { padding: 8px 11px; border-radius: 5px; font-size: 12.5px; margin: 6px 0; }
.na-meth .neg { background: #fdf2f2; border: 1px solid #e0b4b4; color: #7b2d2d; }
.na-meth .open { background: #fff6e5; border: 1px solid #e0b877; color: #6b4a12; }
.na-meth ul { font-size: 12.5px; color: #46586b; margin: 4px 0 8px 18px; }
.na-meth li { margin: 3px 0; }

/* Which groupings the data produced, and which are an outside label applied to the units. */
.na-sup { margin-left: 6px; font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
          opacity: .8; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; }
.na-sup-line { margin: 0 0 6px; font-size: 13px; }

/* Provenance and scope. The data are another group's; the analyses are ours; neither is a
   validated prediction. */
.na-source { border: 1px solid currentColor; border-radius: 4px; padding: 10px 14px;
             margin: 0 0 14px; font-size: 13px; line-height: 1.5; opacity: .95; }
.na-source p { margin: 0 0 8px; }
.na-source p:last-child { margin-bottom: 0; }
.na-source .na-cite { font-size: 12px; padding-left: 12px; border-left: 2px solid currentColor; }

/* Region-family cards: one real region per state, drawn from its measured cells. */
/* Tile scale follows /niche/: a 168 px cartoon, never upscaled past its own drawing. */
.na-famgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.na-famcard { background: var(--mol-paper); border: 1px solid var(--mol-line);
              border-radius: 10px; padding: 9px; }
.na-famcard h3 { margin: 0 0 6px; font-size: 14px; }
.na-famcard svg { width: 100%; max-width: 168px; height: auto; display: block; }
.na-famcard dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 8px 0 0; font-size: 12px; }
.na-famcard dt { opacity: .7; }
.na-famcard dd { margin: 0; }
.na-famcard code { font-size: 11px; word-break: break-all; }

/* One statistic per cartoon, naming the comparison it came from. */
.na-headline { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; }

/* One family at a time. The card leads with a name and one statistic; the rest is a toggle. */
.na-famtabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.na-famtabs button { font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer;
                     border: 1px solid currentColor; border-radius: 4px; background: transparent; }
.na-famtabs button.on { font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; }
.na-famcard details { margin-top: 8px; font-size: 12px; }
.na-famcard summary { cursor: pointer; opacity: .75; }

.na-facts { margin: 2px 0; font-size: 12px; font-family: ui-monospace, Menlo, monospace; opacity: .85; }

/* The /niche/ pathology bar, on the family cards too. */
.na-famcard .na-score { margin-top: 9px; }
.na-famcard .na-score .na-scoretext { font-size: 12px; }
.na-famcard .na-score .na-scoretext b { font-size: 12px; }

/* One type size in the cards. */
.na-famcard, .na-famcard dl, .na-famcard dd, .na-famcard dt, .na-famcard summary { font-size: 13px; }
.na-famcard h3 { font-size: 14px; margin: 0 0 8px; }
.na-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 8px 0 0; }
.na-kv dt { opacity: .65; }
.na-kv dd { margin: 0; }
.na-key { font-size: 12px; opacity: .75; margin: 10px 0 0; }

/* Scientist-facing compact explorer. Scoped to this page; the original is unchanged. */
.na-compact { color: #273440; font-size: 13px; line-height: 1.4; }
.na-compact .mol-card { padding: 12px 14px; margin: 8px 0; border-radius: 7px; }
.na-compact details.na-fold:not([open]) { padding: 8px 14px; }
.na-compact .na-fold > summary,
.na-compact #na-methods-card > summary,
.na-compact .na-source > summary { font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; }
.na-compact .na-fold > summary { padding: 0; }
.na-compact .na-fold > p.mol-why, .na-compact .na-fold > .mol-plot,
.na-compact .na-fold > p.mol-note { margin-left: 0; margin-right: 0; padding-bottom: 0; }
.na-compact .na-fold > summary h2, .na-compact #na-methods-card h2 { font-size: 14px; }
.na-compact .mol-why, .na-compact .mol-note { font-size: 12px; line-height: 1.45; margin: 6px 0; }
.na-compact .mol-two { gap: 20px; }
.na-compact .na-h { font-size: 12px; margin: 6px 0; }
.na-compact .na-source { font-size: 12px; margin: 6px 0; padding: 8px 14px; border-color: #dce3ec; }
.na-compact .na-source p { font-size: 12px; margin-top: 8px; }
.na-compact .mol-head { margin: 8px 0; padding: 10px 14px; }
.na-compact .mol-head h1 { font-size: 22px; margin: 0 0 4px; }
.na-compact .mol-sub { font-size: 13px; line-height: 1.4; margin: 4px 0; }
.na-compact .mol-facts { gap: 6px; margin-top: 6px; }
.na-compact .na-axis { margin: 4px 0; }
.na-compact .mol-seg button { padding: 5px 9px; font-size: 12px; }
.na-compact .na-gal { gap: 8px; margin-top: 6px; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); }
.na-compact .na-tile { padding: 7px; border-radius: 6px; }
.na-compact .na-tile > svg { width: 100%; height: 155px; object-fit: contain; }
.na-compact .na-tile .t { font-size: 12px; line-height: 1.35; margin: 4px 0; }
.na-compact .na-tile .s { font: 11px/1.4 system-ui,sans-serif; margin: 3px 0; }
.na-compact .na-tile .na-scoretext { font-size: 11px; line-height: 1.3; }
.na-compact .na-tile .na-score { margin: 5px 0; }
.na-compact .mol-legend { font-size: 11px; line-height: 1.4; margin: 6px 0 0; gap: 10px; }
.na-compact .na-cell-legend { border-top: 1px solid #e2e7ed; margin-top: 9px; padding-top: 6px; }
.na-compact .na-cell-legend h3 { font-size: 12px; line-height: 18px; margin: 0 0 4px; font-weight: 600; }
.na-compact .na-cell-legend h3 span { color: #586777; font-weight: 400; }
.na-compact .na-cell-key-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 2px 8px; }
.na-compact .na-cell-key { display: flex; align-items: center; gap: 4px; min-width: 0; font: 11px/1.25 system-ui,sans-serif; }
.na-compact .na-cell-key svg { width: 26px; height: 22px; flex: 0 0 26px; }
.na-compact .na-cell-key small { font-size: 10px; color: #596879; white-space: nowrap; }
.na-compact .na-inline-method { font-size: 12px; margin: 5px 0; }
.na-compact .na-inline-method > summary { font-size: 12px; cursor: pointer; color: #4e6072; font-weight: 400; }
.na-compact .na-inline-method p { font-size: 12px; line-height: 1.45; margin: 6px 0; }
.na-compact code, .na-compact .na-kv dd { overflow-wrap: anywhere; }
.na-compact .na-pub-head, .na-compact .na-pub-row { display: grid; grid-template-columns: 36px minmax(40px,1fr) 42px 70px; gap: 8px; align-items: center; }
.na-compact .na-pub-head { font: 10px/1.3 system-ui,sans-serif; color: #586777; margin: 5px 0; }
.na-compact .na-pub-row { font: 11px/1.3 ui-monospace,monospace; height: 23px; }
.na-compact .na-pub-row > span:nth-last-child(-n+2), .na-compact .na-pub-head > span:nth-last-child(-n+2) { text-align: right; white-space: nowrap; }
.na-compact .na-pub-track { display: block; height: 7px; background: #eef1f5; border-radius: 2px; overflow: hidden; }
.na-compact .na-pub-track i { display: block; height: 100%; }
.na-compact .na-pub-coverage { font: 11px/1.4 system-ui,sans-serif; color: #526171; margin: 5px 0; }
.na-compact .na-method-label { margin: 0 0 5px; font-size: 13px; line-height: 1.4; color: #163e62; }
.na-compact .na-method-label strong { border-left: 3px solid #24648e; padding-left: 7px; }
.na-compact .na-method-label span { font-size: 11px; color: #675333; margin-left: 8px; }
.na-compact .na-result-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  padding: 7px 0; margin: 2px 0; font-size: 12px; border-bottom: 1px solid #dce3ec; }
.na-compact .na-result-nav > span { color: #586777; margin-right: 4px; }
.na-compact .na-result-nav a { padding: 4px 8px; border-radius: 4px; text-decoration: none;
  color: #234e71; background: #edf3f7; font-size: 12px; line-height: 18px; }
.na-compact .na-result-nav a:hover { background: #dce9f3; }
.na-compact a:focus-visible, .na-compact button:focus-visible,
.na-compact summary:focus-visible { outline: 2px solid #2673ad; outline-offset: 3px; }
.na-compact details[id] { scroll-margin-top: 80px; }
.na-compact .na-row { font-size: 11px; line-height: 1.4; min-height: 22px; margin: 2px 0; }
@media (max-width: 767.98px) {
  .na-compact .mol-two { grid-template-columns: minmax(0,1fr); }
  .na-compact .na-cell-key-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .na-compact .mol-card { padding: 10px; }
  .na-compact .na-gal { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .na-compact .na-tile > svg { height: 125px; }
  .na-compact .na-pub-head,.na-compact .na-pub-row { gap: 4px; grid-template-columns: 28px minmax(30px,1fr) 36px 62px; }
}