/* 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);
}

.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;
}

.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; }
}