/* ==========================================================================
   browse.css — the #browse finder, and the landing page's token pass
   --------------------------------------------------------------------------
   Everything here reads from css/phid-tokens.css, which is vendored one-way
   from data-conductor. No colour literals: if a value is missing, add a token
   upstream and re-vendor rather than hard-coding it here.

   Loaded AFTER style.css, so these rules win where they overlap. style.css is
   the older sheet and still owns the viewer layout; it is being narrowed rather
   than rewritten in one go.
   ========================================================================== */

/* --- the finder ---------------------------------------------------------- */

#browse {
  background: var(--phid-surface-page);
  color: var(--phid-text);
  min-height: calc(100vh - 56px);
}
.browse-wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 8px var(--phid-space-5) 72px;
}
.browse-title {
  font-size: 23px;
  font-weight: 650;
  letter-spacing: var(--phid-tracking-tight);
  margin: var(--phid-space-6) 0 var(--phid-space-1);
  text-wrap: balance;
}
.browse-lede {
  color: var(--phid-text-muted);
  font-size: var(--phid-text-md);
  margin: 0 0 var(--phid-space-5);
  max-width: 64ch;
}

/* Numbered because the three steps ARE a sequence: each one narrows what the
   next one offers. */
.step {
  font-size: var(--phid-text-xs);
  /* 2026-09-06: not uppercased — the Data page says "Genome Assembly",
     "Cell Type", "Assay", "Sort" in its own words now, matching the shell
     and the metadata section. */
  letter-spacing: 0.06em;
  color: var(--phid-text-muted);
  font-weight: var(--phid-weight-medium);
  margin: 0 0 var(--phid-space-2);
  display: flex;
  align-items: center;
  gap: var(--phid-space-2);
}
.step b {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: var(--phid-radius-pill);
  background: var(--phid-accent);
  color: var(--phid-text-on-accent);
  font-size: 10px;
  font-weight: var(--phid-weight-bold);
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--phid-space-5); }
.chip-btn {
  border: 1px solid var(--phid-border);
  background: var(--phid-surface-card);
  color: var(--phid-text);
  cursor: pointer;
  padding: 7px 13px;
  border-radius: var(--phid-radius-sm);
  font: inherit;
  font-size: var(--phid-text-sm);
  display: flex;
  gap: 7px;
  align-items: center;
  max-width: 290px;
  transition: background var(--phid-transition), border-color var(--phid-transition);
}
.chip-btn:hover { background: var(--phid-surface-hover); }
.chip-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-btn .n {
  font-family: var(--phid-font-mono);
  font-size: var(--phid-text-xs);
  color: var(--phid-text-muted);
  font-variant-numeric: tabular-nums;
}
.chip-btn[aria-pressed="true"] {
  background: var(--phid-accent);
  border-color: var(--phid-accent);
  color: var(--phid-text-on-accent);
}
.chip-btn[aria-pressed="true"] .n { color: var(--phid-text-on-accent); opacity: 0.8; }

/* GRCh38 alone reaches 120 cell types, so the zone holds two rows until asked. */
.zone { margin-bottom: var(--phid-space-5); }
.zone .chips { margin-bottom: 0; max-height: 82px; overflow: hidden; }
.zone.open .chips { max-height: none; }
.zone-more {
  margin-top: var(--phid-space-2);
  background: none;
  border: 0;
  color: var(--phid-accent);
  cursor: pointer;
  font: inherit;
  font-size: var(--phid-text-sm);
  padding: 0;
  text-decoration: underline;
}

.facets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--phid-space-3);
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border);
  border-radius: var(--phid-radius-md);
  padding: var(--phid-space-4);
  box-shadow: var(--phid-shadow-card);
}
.facets .f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.facets .f label {
  font-size: var(--phid-text-xs);
  letter-spacing: var(--phid-tracking-caps);
  color: var(--phid-text-muted);
  font-weight: var(--phid-weight-medium);
}
.facets select {
  font: inherit;
  font-size: var(--phid-text-sm);
  color: var(--phid-text);
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border-control);
  border-radius: var(--phid-radius-sm);
  padding: 7px 9px;
  width: 100%;
  min-width: 0;
}
.facets input[type="range"] { accent-color: var(--phid-accent); width: 100%; }
.facets .val {
  font-family: var(--phid-font-mono);
  font-size: 12px;
  color: var(--phid-text-muted);
  font-variant-numeric: tabular-nums;
}

.browse-bar {
  display: flex;
  align-items: baseline;
  gap: var(--phid-space-3);
  flex-wrap: wrap;
  margin: var(--phid-space-4) 0 var(--phid-space-3);
}
.browse-count { font-size: var(--phid-text-lg); font-weight: 650; }
.browse-count span {
  font-family: var(--phid-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--phid-accent);
}
/* Pushed to its own line below the count and Reset button: .browse-bar is a
   baseline-aligned flex row, and margin-inline-start:auto would strand the
   sentence against the right edge on a wide viewport. 100% basis wraps it
   instead, so it reads as a caption to the table rather than a third control. */
.browse-legend {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--phid-text-sm);
  line-height: 1.5;
  color: var(--phid-text-muted);
  /* 96ch, not 78ch, from 2026-10-19 (#58): the heading "Quality Score of PHi-C
     Analysis:" and the three keys share one row; the two sentences sit below. */
  max-width: 96ch;
}
.browse-legend b { font-weight: 650; color: var(--phid-text); }
.browse-legend i { font-style: italic; }
.browse-clear {
  background: none;
  border: 0;
  color: var(--phid-accent);
  cursor: pointer;
  font: inherit;
  font-size: var(--phid-text-sm);
  padding: 0;
  text-decoration: underline;
}

/* --- 2026-09-04: search, typeahead, bands, sticky summary, cards ----------
   The finder's unit changed from a leaf to an EXPERIMENT. Built from
   mockup-browse-next.html, the layout reference (removed 2026-10-09, #44; in git
   history at 7487700).
   Everything above is reused rather than replaced: .step, .chip-btn, .facets,
   .browse-wrap, .browse-clear and .browse-legend are unchanged.
   ------------------------------------------------------------------------- */

/* Labels that must exist for a control but must not take space on screen. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --- the search field ----------------------------------------------------- */
.find {
  display: flex;
  align-items: center;
  gap: var(--phid-space-3);
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border-control);
  border-radius: var(--phid-radius-md);
  padding: 0 var(--phid-space-4);
  box-shadow: var(--phid-shadow-card);
  margin-bottom: var(--phid-space-5);
}
.find:focus-within { outline: 2px solid var(--phid-accent); outline-offset: 2px; }
.find .ic { color: var(--phid-text-muted); font-size: 17px; }
.find input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  color: var(--phid-text);
  font: inherit;
  font-size: var(--phid-text-lg);
  padding: 13px 0;
  min-width: 0;
}
.find input::placeholder { color: var(--phid-text-muted); }
.find .clr {
  border: 0;
  background: none;
  color: var(--phid-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}
.find .clr:hover { color: var(--phid-text); }

/* --- step 2: the cell-type typeahead -------------------------------------- */
.cell-pick {
  position: relative;
  display: flex;
  gap: var(--phid-space-3);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--phid-space-5);
}
.cell-field { position: relative; flex: 0 0 268px; max-width: 100%; }
.cell-field input {
  width: 100%;
  font: inherit;
  font-size: var(--phid-text-sm);
  color: var(--phid-text);
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border-control);
  border-radius: var(--phid-radius-sm);
  padding: 7px 9px;
}
/* Below the topbar's z-index of 60, so a long menu scrolls under the bar
   rather than over it. */
.menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 264px;
  overflow-y: auto;
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border);
  border-radius: var(--phid-radius-sm);
  box-shadow: var(--phid-shadow-card);
}
.menu[data-open="0"] { display: none; }
.menu button {
  display: flex;
  width: 100%;
  gap: var(--phid-space-3);
  align-items: baseline;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--phid-text-sm);
  color: var(--phid-text);
  padding: 7px 10px;
}
.menu button:hover { background: var(--phid-surface-hover); }
.menu button .n {
  margin-left: auto;
  font-family: var(--phid-font-mono);
  font-size: var(--phid-text-xs);
  color: var(--phid-text-muted);
  font-variant-numeric: tabular-nums;
}
.menu .none { padding: 10px; color: var(--phid-text-muted); font-size: var(--phid-text-sm); }
.pinned { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* "Show all N biosources" on its own line under the top 10 - 2026-09-29. Styled
   like .zone-more, the other "there is more here" link on this page. */
.pinned .more {
  flex-basis: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  margin-top: var(--phid-space-1, 4px);
  color: var(--phid-accent);
  cursor: pointer;
  font: inherit;
  font-size: var(--phid-text-sm);
  text-decoration: underline;
}
.pinned .hint {
  font-size: var(--phid-text-xs);
  color: var(--phid-text-muted);
  letter-spacing: var(--phid-tracking-caps);
  margin-right: 2px;
}

/* --- quality bands, in place of the correlation slider -------------------- */
/* A group of buttons rather than a <label>ed control, so it takes the label
   styling from a span instead. */
.facets .f .lbl-as-label {
  font-size: var(--phid-text-xs);
  letter-spacing: var(--phid-tracking-caps);
  color: var(--phid-text-muted);
  font-weight: var(--phid-weight-medium);
}
.bands { display: flex; gap: 6px; }
.bands button {
  flex: 1;
  font: inherit;
  font-size: var(--phid-text-sm);
  cursor: pointer;
  padding: 6px 4px;
  border-radius: var(--phid-radius-sm);
  border: 1px solid var(--phid-border);
  background: var(--phid-surface-card);
  color: var(--phid-text-muted);
}
.bands button[aria-pressed="true"] {
  border-color: var(--phid-accent);
  background: var(--phid-accent-wash);
  color: var(--phid-text);
  font-weight: var(--phid-weight-medium);
}

/* --- the sticky summary --------------------------------------------------- */
/* 61px is #topbar's 60px min-height plus its 1px bottom border — the bar is
   position:sticky at top:0 with z-index 60, so this has to clear it and sit
   under it. Move the two together. (80 -> 60 on 2026-09-06.) */
/* IN THE PAGE, NOT OVER IT — 2026-09-28, at the maintainer's request. It was
   sticky at top: 61px so the active filters never scrolled away, which was
   written for the 60 px workspace header; on the full-page finder the header is
   109 px, so the bar slid underneath it, and its page-colour fill sat as a grey
   slab on the landing gradient. It now scrolls with the cards like any other
   line of the page, on the page's own ground, with the rule beneath it kept as
   the divider between the filters and the results. */
.summary {
  display: flex;
  align-items: center;
  gap: var(--phid-space-3);
  flex-wrap: wrap;
  padding: 10px 0;
  margin: var(--phid-space-4) 0 var(--phid-space-3);
  border-bottom: 1px solid var(--phid-border);
}
.summary .count { font-size: var(--phid-text-lg); font-weight: 650; white-space: nowrap; }
.summary .count b {
  font-family: var(--phid-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--phid-accent);
  font-weight: 650;
}
.summary .count small {
  color: var(--phid-text-muted);
  font-weight: 400;
  font-size: var(--phid-text-sm);
}
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--phid-accent-edge);
  background: var(--phid-accent-wash);
  color: var(--phid-text);
  border-radius: var(--phid-radius-pill);
  padding: 3px 6px 3px 10px;
  font-size: var(--phid-text-sm);
}
.pill b { font-weight: var(--phid-weight-medium); }
.pill .k {
  color: var(--phid-text-muted);
  font-size: var(--phid-text-xs);
  letter-spacing: var(--phid-tracking-caps);
}
.pill button {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--phid-text-muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.pill button:hover { color: var(--phid-text); }
.summary .sort { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.summary .sort label {
  font-size: var(--phid-text-xs);
  color: var(--phid-text-muted);
  letter-spacing: var(--phid-tracking-caps);
}
.summary .sort select {
  font: inherit;
  font-size: var(--phid-text-sm);
  color: var(--phid-text);
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border-control);
  border-radius: var(--phid-radius-sm);
  padding: 5px 8px;
}
/* Cards or List (#45), just before Sort: it takes Sort's push to the right edge. */
.summary .layout { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.summary .layout + .sort { margin-left: 0; }
.summary .layout .k {
  font-size: var(--phid-text-xs);
  color: var(--phid-text-muted);
  letter-spacing: var(--phid-tracking-caps);
}
.summary .seg {
  display: inline-flex;
  border: 1px solid var(--phid-border-control);
  border-radius: var(--phid-radius-sm);
  overflow: hidden;
}
.summary .seg button {
  font: inherit;
  font-size: var(--phid-text-sm);
  color: var(--phid-text);
  background: var(--phid-surface-card);
  border: 0;
  padding: 5px 12px;
  cursor: pointer;
}
.summary .seg button + button { border-left: 1px solid var(--phid-border-control); }
.summary .seg button:hover { background: var(--phid-surface-hover); }
.summary .seg button[aria-pressed="true"] {
  background: var(--phid-accent);
  color: var(--phid-text-on-accent);
}

/* --- the cards ------------------------------------------------------------ */
.cards {
  display: grid;
  gap: var(--phid-space-4);
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
}
.card {
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border);
  border-radius: var(--phid-radius-md);
  box-shadow: var(--phid-shadow-card);
  padding: var(--phid-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--phid-space-3);
  transition: border-color var(--phid-transition), box-shadow var(--phid-transition);
}
.card:hover { border-color: var(--phid-accent-edge); }
.card .top { display: flex; align-items: flex-start; gap: var(--phid-space-3); }
.card .cell {
  font-size: var(--phid-text-lg);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: var(--phid-tracking-tight);
  min-width: 0;
  overflow-wrap: anywhere;
}
.card .asm {
  margin-left: auto;
  flex: none;
  font-size: var(--phid-text-xs);
  font-family: var(--phid-font-mono);
  color: var(--phid-text-muted);
  border: 1px solid var(--phid-border);
  border-radius: var(--phid-radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
/* The lines under the title (#58): Condition, Experiment Type · Resolution,
   Publication, Data Source. Close together, as one block; a label column keeps the
   values aligned from card to card. */
.card .facts {
  display: grid;
  gap: 2px;
  margin-top: -6px;
  font-size: var(--phid-text-sm);
  color: var(--phid-text-muted);
}
.card .facts .line { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--phid-space-2); }
.card .facts .line .k { font-size: var(--phid-text-xs); line-height: 1.7; }
.card .facts .line .v { color: var(--phid-text); min-width: 0; overflow-wrap: anywhere; }
.card .facts .line .v a { color: var(--accent); }
.card .facts .line .none { color: var(--phid-text-muted); font-style: italic; }
.card .facts .who { color: var(--phid-text); }
.card .stat {
  display: flex;
  align-items: baseline;
  gap: var(--phid-space-3);
  font-size: var(--phid-text-sm);
  color: var(--phid-text-muted);
}
.card .stat .r {
  font-family: var(--phid-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--phid-text);
  font-size: var(--phid-text-md);
}

/* The chromosome strip is the card's navigation AND its quality picture: one
   square per published chromosome, coloured by the band browse.js defines.
   Nothing here is decorative — every square opens a result. A square that the
   current filter excludes dims rather than vanishing, so the card keeps its
   shape while the reader narrows. */
.chrs { display: flex; flex-wrap: wrap; gap: 3px; }
.chrs button {
  font: inherit;
  font-family: var(--phid-font-mono);
  font-size: 11px;
  min-width: 25px;
  padding: 3px 4px;
  cursor: pointer;
  border-radius: var(--phid-radius-sm);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
/* TWO KINDS, NO COLOUR — 2026-09-28, after the team lead disliked the green /
   blue / red bands. The exact value is on hover. The band classes stay on the
   element (quality.js still assigns them), so a graded look is a CSS change, not
   a JS one.
   THE RING MARKS r >= 0.95, NOT BELOW IT — flipped 2026-09-29 at the maintainer's
   request. It was on the squares below 0.95, on the argument that most leaves sit
   at 0.99 or above and the reader needs the few that fall short. The cost of the
   flip, named: the ring is now on nearly every square, and a low-r square is the
   plain one. */
.chrs button.q-hi,
.chrs button.q-mid,
.chrs button.q-lo {
  position: relative;
  background: var(--phid-surface-card);
  color: var(--phid-text);
  border-color: var(--phid-border);
}
.chrs button.q-hi::after,
.chrs button.q-mid::after {
  /* On the corner, like a badge, so it never touches a two-digit label; the
     card-coloured fill cuts it cleanly out of the square's border. */
  content: '';
  position: absolute;
  top: -4px; right: -4px;
  width: 6px; height: 6px;
  background: var(--phid-surface-card);
  border: 1.5px solid var(--phid-text-muted);
  border-radius: 50%;
}
.chrs button.q-hi:hover,
.chrs button.q-mid:hover,
.chrs button.q-lo:hover { border-color: var(--phid-accent); }
/* The legend line under the count bar. */
.browse-legend { margin: 0 0 var(--phid-space-3); font-size: var(--phid-text-sm); color: var(--phid-text-muted); display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.browse-legend .k { display: inline-flex; align-items: center; gap: 6px; }
/* 2026-10-09 (#46): what the Score measures, on a line of its own under the keys. */
.browse-legend .note { flex-basis: 100%; }
.browse-legend .sw { position: relative; display: inline-block; flex: none; width: 20px; height: 16px; border-radius: 4px; background: var(--phid-surface-card); border: 1px solid var(--phid-border); }
.browse-legend .sw.ok::after { content: ''; position: absolute; top: -4px; right: -4px; width: 6px; height: 6px; background: var(--phid-surface-card); border: 1.5px solid var(--phid-text-muted); border-radius: 50%; }
.browse-legend .sw.na { background: transparent; border: 1px dashed var(--phid-border-control); }
.chrs button:hover { border-color: currentColor; }
.chrs button.dim { opacity: 0.28; }
/* A leaf that did not finish (failed.json, 2026-09-28): listed so the reader can see
   it exists and where it stopped, but it opens nothing. Outlined rather than filled,
   so it cannot be mistaken for a quality band. */
.chrs button.q-na {
  background: transparent;
  color: var(--phid-text-muted);
  border: 1px dashed var(--phid-border-control);
  cursor: not-allowed;
}
.chrs button.q-na:hover { border-color: var(--phid-border-control); }
.card.na { opacity: 0.75; }

/* --- the list (#45) ------------------------------------------------------- */
/* One row per experiment in a box of its own; a narrow window scrolls the box
   sideways rather than squeezing the columns. */
.cards.as-list {
  display: block;
  overflow-x: auto;
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border);
  border-radius: var(--phid-radius-md);
  box-shadow: var(--phid-shadow-card);
}
.lv { min-width: 1168px; font-size: var(--phid-text-sm); }
.lrow {
  display: grid;
  /* The two count columns are as wide as their capitalised headings, which must
     not break inside a word; the last holds 13 squares a line. */
  grid-template-columns: minmax(90px, 1fr) 72px minmax(170px, 2.6fr) minmax(120px, 1.2fr)
    minmax(110px, 1fr) 104px 100px 72px 330px;
  align-items: center;
  border-bottom: 1px solid var(--phid-border-subtle);
}
.lrow:last-child { border-bottom: 0; }
.lrow > div { padding: 8px 10px; min-width: 0; overflow-wrap: anywhere; }
.lrow:not(.lhead):hover { background: var(--phid-surface-hover); }
.lrow.na { opacity: 0.75; }
.lrow .num { text-align: right; font-variant-numeric: tabular-nums; }
.lrow .mono { font-family: var(--phid-font-mono); }
.lrow .l-cell { font-weight: 650; }
.lrow .l-asm { font-family: var(--phid-font-mono); font-size: var(--phid-text-xs); color: var(--phid-text-muted); }
.lrow a { color: var(--accent); }
.lrow .none { color: var(--phid-text-muted); font-style: italic; }
.lhead {
  background: var(--phid-surface-inset);
  border-bottom: 1px solid var(--phid-border);
  font-size: var(--phid-text-xs);
  letter-spacing: var(--phid-tracking-caps);
  color: var(--phid-text-muted);
  font-weight: var(--phid-weight-medium);
}
.lhead > div { overflow-wrap: normal; }
.lhead > div:has(button) { padding: 0; }
.lhead button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  text-align: inherit;
  cursor: pointer;
}
.lhead button:hover { color: var(--phid-accent); }
.lhead [aria-sort="ascending"] button,
.lhead [aria-sort="descending"] button { color: var(--phid-text); }
/* The card's squares a size smaller, spaced so each ring clears its neighbour: a
   human row is two lines of 13. */
.as-list .chrs { gap: 6px 4px; padding-top: 3px; }
.as-list .chrs button { font-size: 9.5px; min-width: 20px; padding: 1px 2px; }

.browse-tail {
  margin-top: var(--phid-space-5);
  padding: var(--phid-space-4);
  text-align: center;
  color: var(--phid-text-muted);
  font-size: var(--phid-text-sm);
  border: 1px dashed var(--phid-border);
  border-radius: var(--phid-radius-md);
}

/* --- empty result, and focus rings for the finder's controls ------------- */
.browse-empty { padding: 52px var(--phid-space-5); text-align: center; color: var(--phid-text-muted); font-size: var(--phid-text-md); }

#browse :is(button, select, input):focus-visible {
  outline: 2px solid var(--phid-accent);
  outline-offset: 2px;
}

/* --- landing page: onto the design language ------------------------------ */

body { background: var(--phid-surface-page); color: var(--phid-text); }

#topbar {
  background: var(--phid-surface-card);
  border-bottom: 1px solid var(--phid-border);
  color: var(--phid-text);
}
#topbar .brand .title { color: var(--phid-text); font-weight: var(--phid-weight-bold); }
#topbar nav a { color: var(--phid-text-muted); }
#topbar nav a:hover { color: var(--phid-text); }
#topbar nav a.active { color: var(--phid-accent); }

#home { background: var(--phid-surface-page); }
#home .hero-title {
  color: var(--phid-text);
  letter-spacing: var(--phid-tracking-tight);
  text-wrap: balance;
}
#home .hero-subtitle { color: var(--phid-text-muted); }
#home .hero-subtitle b { color: var(--phid-text-strong); }
#home .btn.primary {
  background: var(--phid-accent);
  color: var(--phid-text-on-accent);
  border: 1px solid var(--phid-accent);
  border-radius: var(--phid-radius-sm);
}
#home .btn.primary:hover { background: var(--phid-accent-hover); border-color: var(--phid-accent-hover); }
#home .stage .hint,
#home .stage .meta { color: var(--phid-text-muted); }
#home .stage .meta .id { font-family: var(--phid-font-mono); }

#home .explain { color: var(--phid-text); }
#home .explain .key { color: var(--phid-accent); font-weight: var(--phid-weight-bold); }

/* The beta notice is a state, not decoration — it takes the warn token. */
#home .beta-note {
  background: var(--phid-warn-wash);
  border: 1px solid var(--phid-warn);
  border-radius: var(--phid-radius-sm);
  color: var(--phid-warn);
}

#home .section-title { color: var(--phid-text); }
#home .link-card {
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border);
  border-radius: var(--phid-radius-md);
  box-shadow: var(--phid-shadow-card);
  color: inherit;
  transition: border-color var(--phid-transition), box-shadow var(--phid-transition);
}
#home .link-card:hover { border-color: var(--phid-accent); box-shadow: var(--phid-shadow-pop); }
#home .card-title { color: var(--phid-text); }
#home .card-text { color: var(--phid-text-muted); }


/* --- result view: IGV as a full-width strip, panels at 500px -------------- */
/* 2026-08-17. IGV was one pane among six; it now spans the workspace and acts
   as navigation for the panels beneath it. The panels start at 500px; these
   rules set the look and the floor. */

/* 2026-08-25: #viewer-sticky pins the strip to the top of the scrolling workspace.
   The margins that used to sit on #igv-strip moved out to the wrapper as padding, so
   the wrapper paints the page background across the full width and panels scrolling
   underneath do not show beside the strip. */
/* 2026-10-09 (#48): shown in place of the panels and IGV when the browser has no
   usable WebGL - see app.js showWebglNeeded. */
.webgl-needed {
  margin: var(--phid-space-4);
  padding: var(--phid-space-4) var(--phid-space-5);
  max-width: 46rem;
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border);
  border-left: 4px solid var(--phid-warn);
  border-radius: var(--phid-radius-md);
  color: var(--phid-text);
  line-height: 1.5;
}
.webgl-needed p { margin: 0 0 var(--phid-space-2); }
.webgl-needed p:last-child { margin-bottom: 0; }
.webgl-needed .why { color: var(--phid-text-muted); }

#viewer-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--phid-surface-page);
  padding: var(--phid-space-3) var(--phid-space-4) var(--phid-space-3);
}

#igv-strip {
  margin: 0;
  background: var(--phid-surface-card);
  border: 1px solid var(--phid-border);
  border-radius: var(--phid-radius-md);
  box-shadow: var(--phid-shadow-card);
  overflow: hidden;
}
/* 2026-08-25: .strip-head rules removed with the bar itself — see index.html. */
/* 2026-08-25: 200px. The 60% pass took this to 120 and clipped the track rows —
   ideogram + ruler + the collapsed gene track need the height back, and 170 was still
   short by a row. Back to where it was before the 60% pass. */
#igv-strip .igv-host { height: 200px; background: var(--phid-surface-card); }

/* A panel never gets narrower than this, so the workspace scrolls rather than
   crushing a contact map into an unreadable strip. */
/* 2026-08-25: 300px = 60% of the 500px floor, in step with the pane sizes in
   style.css. */
#panes .pane { min-width: 300px; }
@media (max-width: 640px) { #panes .pane { min-width: 0; } }

/* --- topbar: the official PHi-D mark ------------------------------------- */
/* The wordmark is 138px wide by the guideline's minimum (page 09), which makes
   it 94px tall — so the bar has to grow to hold it with its isolation zone,
   the same way the Data Conductor pages went to 102px. .brand-logo itself is
   defined in phid-tokens.css; only the bar around it is set here. */

/* 2026-08-17: the mark is shown BELOW the guideline minimum, by the
   maintainer's decision. Page 09 sets 138px as the smallest the basic lockup
   should appear, which is why the Data Conductor bar is 102px. 100px is a
   deliberate departure, recorded rather than hidden — the compact-mark item
   (parked 2026-08-14) is the proper fix, and the same missing asset also
   blocks the favicon. Restore by deleting the width override below. */
/* 2026-09-06: the bar is 60px, at the maintainer's request, down from 80. The
   mark scales with it — at 76px wide it is 52px tall, which is what fits inside
   60px with the padding. THAT IS A SECOND DEPARTURE FROM THE GUIDELINE and it is
   larger than the first: page 09's minimum is 138px, the bar already showed 100,
   and this is 76. The compact-mark asset (parked 2026-08-14) remains the proper
   fix, and the same missing asset still blocks the favicon. Restoring is these
   two numbers, not a rewrite. */
#topbar {
  padding: 4px var(--phid-space-4);
  min-height: 60px;
  border-bottom: 1px solid var(--phid-border);
}
#topbar .brand-logo { width: 76px; }   /* guideline minimum is 138px */
#topbar .brand { display: flex; align-items: center; gap: 0; }
#topbar .brand .title {
  font-size: var(--phid-text-md);
  font-weight: var(--phid-weight-medium);
  color: var(--phid-text-muted);
  letter-spacing: 0.01em;
}
/* The old placeholder block, superseded by the real mark. */
#topbar .logo-placeholder { display: none; }

/* --- result header: centred running text, not a panel --------------------- */
/* 2026-08-17. It used to be a Gridstack widget competing with the panels for
   space. It says what the reader is looking at, which is a caption, not a
   panel — so it sits centred above the IGV strip and leaves the grid alone. */

/* 2026-08-25: the caption moved beneath the IGV strip and inside the sticky block,
   so its top padding closes up — #viewer-sticky already spaces the block above it.
   Held to ~25px total at the maintainer's request: 17px type at leading-tight is a
   21.25px line box, plus 2px above and below. The glyphs need about 20px, so there is
   roughly 5px of slack; much under 22px and the descenders start to clip. */
#viewer-header {
  text-align: center;
  line-height: var(--phid-leading-tight);
  padding: 2px var(--phid-space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 var(--phid-space-2);
}
#viewer-header #vh-title {
  margin: 0;
  font-size: var(--phid-text-xl);
  font-weight: 400;                 /* the weight lives on the two values */
  letter-spacing: var(--phid-tracking-tight);
  color: var(--phid-text);
}
#viewer-header #vh-title b { font-weight: var(--phid-weight-bold); }
#viewer-header #vh-title .sep { color: var(--phid-text-muted); margin: 0 2px; }
/* 2026-08-25: inline, so the accession, chromosome and the run parameters read as
   one line rather than the subtitle dropping to a second. */
#viewer-header #vh-sub {
  display: inline;
  margin-top: 0;
  font-size: var(--phid-text-sm);
  color: var(--phid-text-muted);
}

/* --- metadata panel: leads the grid, and reflows as it is resized --------- */
/* auto-fit rather than a fixed two-column grid, so narrowing the panel drops it
   to one column and widening it packs more per row, instead of the labels and
   values drifting apart. */

#metadata-panel .meta-body,
.meta-pane .meta-body { overflow: auto; }
#metadata-panel .meta-grid,
.meta-pane .meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--phid-space-2) var(--phid-space-4);
  align-content: start;
}
/* #28 metadata tabs after Overview. Hidden outside the IDE shell, which removes the
   attribute; .pane's display: flex would otherwise win. */
.meta-pane[hidden] { display: none; }
/* PHi-C INFO, COMPACT (2026-10-20, #28). The bottom section is 200 px tall and the
   tab holds four sections (Run, Optimization Hyperparameters, Optimization Result,
   Calculator), which took about 294 px and hid Calculator behind a scrollbar few
   readers find. Each section's name now sits in a left column on its own row, and
   the spacing is tighter: about 144 px, all in view from 1280 px wide up. */
.meta-pane .meta-body { padding: 4px 12px; min-height: 0; }
.meta-pane .meta-grid {
  grid-template-columns: 200px repeat(auto-fit, minmax(150px, 1fr));
  row-gap: 2px;
}
.meta-pane .meta-grid .k { line-height: 1.2; }
.meta-pane .meta-grid .v { line-height: 1.3; }
.meta-pane .meta-grid .meta-sub { grid-column: 1; margin-top: 0; align-self: center; line-height: 1.2; }
/* A heading across the grid, and the placeholder for a field this result does not
   have yet. The job UUID is one long word, so values may break. */
.meta-grid .meta-sub {
  grid-column: 1 / -1;
  margin-top: var(--phid-space-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.meta-grid .v { overflow-wrap: anywhere; }
.meta-grid .v.muted { font-style: italic; }