/* Recoding-diversity map: layout, controls, and plot chrome. */

:root {
  color-scheme: light;
  --ink: #1b2733;
  --ink-muted: #4a5568;
  --line: #d9e0e7;
  --line-strong: #98a2b3;
  --surface: #ffffff;
  --surface-sunken: #f4f6f8;
  --accent: #1f5f7d;
  --accent-soft: #e4eef3;
  --danger: #b3261e;
  --focus: #1a73e8;
  --gap: 1rem;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(27, 39, 51, 0.08), 0 4px 12px rgba(27, 39, 51, 0.05);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Several components below set `display`, which outranks the user-agent rule for
   the `hidden` attribute. This is the one place the cascade cannot be corrected
   locally, because any of them may be hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.35rem; }
h4 { font-size: 0.9rem; margin: 0 0 0.35rem; }
p { margin: 0 0 0.5rem; }
code, pre { font-family: var(--mono); font-size: 0.85em; }
pre {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Immediate replacements for native title hints. The controller writes the
   position, while this shared surface owns wrapping and pointer transparency. */
.instant-hint {
  position: fixed;
  z-index: 100;
  width: max-content;
  max-width: min(32rem, calc(100vw - 16px));
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--ink);
  box-shadow: var(--shadow);
  color: var(--surface);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  pointer-events: none;
  white-space: pre-wrap;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: top 120ms ease;
}
.skip-link:focus { top: 0.5rem; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.header-text { max-width: 62ch; }
.tagline { color: var(--ink-muted); margin: 0; }
.site-byline { margin: 0.25rem 0 0; color: var(--ink-muted); font-size: 0.82rem; }
/* The organism selector: two direct organism links, one conventional-strain
   disclosure, and the exact strain and assembly being shown. */
.organism-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.organism-identity { color: var(--ink-muted); font-size: 0.8rem; }
.organism-dropdown { position: relative; }
.organism-group-trigger { display: inline-flex; align-items: center; gap: 0.35rem; }
.organism-group-selection { font-size: 0.8rem; }
.organism-group-caret { transition: transform 120ms ease; }
.organism-group-trigger[aria-expanded="true"] .organism-group-caret { transform: rotate(180deg); }
.organism-strain-menu {
  position: fixed;
  z-index: 20;
  width: max-content;
  min-width: 13.5rem;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}
.organism-strain-option {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: calc(var(--radius) - 2px);
  white-space: normal;
}
.organism-strain-option:hover,
.organism-strain-option:focus-visible { background: var(--accent-soft); }
.organism-strain-option.active { background: var(--accent); color: #fff; }
.header-actions {
  display: grid;
  gap: 0.35rem;
  flex: 1 1 24rem;
  max-width: 34rem;
  min-width: min(100%, 19rem);
}
.header-action-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.header-load-slot { height: 4.75rem; min-width: 0; }

.upstream-source-catalogue { margin-top: 0.6rem; }
.upstream-source-catalogue summary { cursor: pointer; }
.upstream-source-catalogue ul { padding-left: 1.25rem; }
.upstream-artifact { margin-block: 0.8rem; overflow-wrap: anywhere; }
.upstream-artifact dl { margin: 0.4rem 0; font-size: 0.85rem; }
.upstream-artifact dt { font-weight: 600; margin-top: 0.3rem; }
.upstream-artifact dd { margin-left: 0; }
.upstream-artifact code { overflow-wrap: anywhere; white-space: normal; }
.header-link { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }

.help {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem 1.25rem;
}
.help-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 130ch;
}
.help h3:first-child { margin-top: 0; }
.help p { max-width: 68ch; }

.load-status {
  margin: 2rem 1.25rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 72ch;
}
.load-status.error { border-color: var(--danger); }

/* Loading shell ---------------------------------------------------------- */

/* While the data loads the page is an empty version of itself: the header bar,
   the left column, the right column, and the centre area, with only an empty
   grid and the chromosome loading bar, credit and status in the centre. Page
   content is hidden until the reveal. Children use `visibility`, keeping each
   box its real size, so the bars and columns are the page's own and not a separate skeleton
   that could drift from it. */
.is-loading .site-header > *,
.is-loading .column.controls > .card > *,
.is-loading .column.detail > * { visibility: hidden; }
.is-loading .resize-handle { visibility: hidden; }
/* A load that failed leaves the shell up. The selector comes back then, so a
   reader on an organism whose data is missing has a way to the other one. */
.is-loading.load-failed .organism-selector { visibility: visible; }
.is-loading #help,
.is-loading #metric-agreement,
.is-loading .analysis > :not(#map-section),
.is-loading #map-section > :not(#load-stage) { display: none; }
.is-loading .column.controls > .card { min-height: 7rem; }
.is-loading .column.detail { min-height: 18rem; }
/* One column on a narrow screen stacks controls, map, detail. The grid is what
   the visitor is waiting on, so while loading it leads and stays within view. */
@media (max-width: 959px) {
  .is-loading .analysis { order: -1; }
  /* Long hidden organism descriptions must not push progress below the fold.
     Failed loads restore the header text so organism navigation stays usable. */
  .is-loading:not(.load-failed) .header-text { display: none; }
  .is-loading .column.controls > .card { min-height: 3.5rem; }
  .is-loading .column.detail { min-height: 5rem; }
}

/* The same box the map canvas takes, so the grid stands where the map will. */
.load-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(320px, 58vh, 620px);
}
.load-grid {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 12.5% 20%;
}
.load-progress-presentation {
  position: relative;
  display: grid;
  gap: 0.25rem;
  width: min(80%, 34rem);
}
.load-progress { width: 100%; }
.load-byline { margin: 0; text-align: center; }
.load-progress-status {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
}
.load-chromosome { display: block; width: 100%; height: 44px; overflow: visible; }
.load-chromosome-axis { stroke: #536774; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* The whole track is there from the first paint, faint and neutral, so the bar
   reads as a chromosome before any gene has loaded. A gene takes its colour the
   instant the progress reaches it: no grow, no fade. By owner decision of
   2026-09-30 the segments just appear, because easing them in made the blocky
   load read as fluid again. */
.load-gene { fill: #dfe5ea; }
.load-gene.is-on { fill: var(--gene); }
/* Activity is named in the status; the bar stays at full opacity in every phase. */

/* After reveal the same chromosome presentation continues in the fixed header
   slot beneath its actions. The slot, buttons and header geometry do not move
   when progress completes; long failures scroll inside it and keep Retry reachable. */
.load-tail {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  height: 100%;
  overflow: auto;
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.load-tail.has-failures {
  place-items: stretch;
}
.load-tail .load-progress-presentation { width: min(100%, 34rem); }
.load-tail .load-byline { display: none; }
.load-failures { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.load-failure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
  color: var(--danger);
}
.load-failure > span { overflow-wrap: anywhere; }
.load-failure .chip-button { min-height: 28px; padding: 0.1rem 0.6rem; }

/* One selection-scoped, measured bar overlays whichever map is active. */
.dataset-color-progress {
  position: absolute;
  inset: 0.65rem 0.75rem auto;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 0.55rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}
.dataset-color-progress[hidden] { display: none; }
.dataset-color-progress-label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.dataset-color-progress-meter {
  height: 0.45rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-sunken);
}
.dataset-color-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.dataset-color-progress.is-error { border-color: var(--danger); }
.dataset-color-progress-retry { min-height: 28px; padding: 0.1rem 0.6rem; }

/* Evidence whose file has not landed, or could not be loaded: never drawn as
   absent, and never as a value. */
.evidence-pending { color: var(--ink-muted); font-style: italic; }
.evidence-pending[data-pending="loading"] { animation: evidence-pulse 1.4s ease-in-out infinite; }
.evidence-pending[data-pending="failed"] { color: var(--danger); font-style: normal; }
@keyframes evidence-pulse { 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .evidence-pending[data-pending="loading"] { animation: none; }
}

.layout {
  display: grid;
  gap: var(--gap);
  padding: var(--gap) 1.25rem;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.resize-handle { display: none; align-self: stretch; position: relative; cursor: col-resize; touch-action: none; }
.resize-grip {
  display: block;
  position: sticky;
  top: max(1rem, calc(50vh - 2.5rem));
  width: 7px;
  height: 5rem;
  margin-inline: auto;
  border: 1px solid #a6b0bc;
  border-radius: 6px;
  background: repeating-linear-gradient(to bottom, #c4ccd5 0 4px, #eef1f4 4px 8px);
}
.resize-handle:hover .resize-grip { border-color: var(--accent); background: #c2d6e1; }
.resize-handle:focus-visible { outline: none; }
.resize-handle:focus-visible .resize-grip { outline: 2px solid var(--focus); outline-offset: 3px; }
.resize-handle.dragging .resize-grip { border-color: var(--accent); background: var(--accent-soft); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.85rem 1rem 1rem;
}

.column { min-width: 0; }
.controls { display: grid; gap: var(--gap); align-content: start; }
.analysis {
  display: grid;
  gap: var(--gap);
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
}
.analysis > * { min-width: 0; }
.map { display: flex; flex-direction: column; gap: 0.6rem; }
.detail { max-height: none; overflow: visible; }
.detail-jump { align-self: flex-start; }

@media (min-width: 960px) {
  .layout {
    grid-template-columns: var(--controls-width, 300px) var(--gap) minmax(0, 1fr);
    column-gap: 0;
    row-gap: var(--gap);
  }
  .controls { grid-column: 1; }
  .resize-handle-left { display: block; grid-column: 2; grid-row: 1; }
  .analysis { grid-column: 3; }
  .detail { grid-column: 1 / -1; }
  .shortlist-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 1240px) {
  .layout {
    grid-template-columns: var(--controls-width, 280px) var(--gap) minmax(0, 1fr)
      var(--gap) var(--detail-width, 320px);
  }
  .resize-handle-right { display: block; grid-column: 4; grid-row: 1; }
  .detail { grid-column: 5; grid-row: 1; }
  .detail-jump { display: none; }
  .detail {
    position: sticky;
    top: var(--gap);
    max-height: calc(100vh - 2 * var(--gap));
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* Controls -------------------------------------------------------------- */

.button-row, .field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.field-row label { color: var(--ink-muted); font-size: 0.85rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.4rem; flex-wrap: nowrap; }
.checkbox-row input { margin-top: 0.3rem; flex: none; }
.checkbox-row label { color: var(--ink); }
/* The colour-source checkboxes sit inside the category legend above the rows. */
.source-toggles { border: 0; padding: 0; margin: 0 0 0.4rem; display: flex; max-width: 100%; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: center; }
/* A fieldset's legend is laid out outside the flex row by browsers, so the visible
   label is a plain flex item and the real legend stays for assistive technology. */
.source-toggles-label { color: var(--ink-muted); font-size: 0.85rem; }
.source-toggles .source-toggle { align-items: center; font-size: 0.85rem; white-space: nowrap; }
.source-toggles .source-toggle input { margin-top: 0; }

button, select, input[type="text"], input[type="number"], input[type="search"] {
  font: inherit;
  color: inherit;
}

.chip-button {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  min-height: 32px;
}
.chip-button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.chip-button:disabled { color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; background: var(--surface-sunken); }
.chip-button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-button.active:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-button.danger { border-color: #d2a19d; color: var(--danger); }
.chip-button.danger:hover:not(:disabled) { background: #fbeceb; }

.help-toggle-caret {
  width: 0.65em;
  height: 0.65em;
  margin-left: 0.35em;
  vertical-align: -0.05em;
  transition: transform 0.15s ease;
}
#help-toggle[aria-expanded="true"] .help-toggle-caret { transform: rotate(180deg); }

.icon-button {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
}
.icon-button:hover { color: var(--danger); border-color: var(--line); }

.chip-link {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--accent);
  cursor: pointer;
  padding: 0.1rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
}
.chip-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

select, input[type="text"], input[type="number"], input[type="search"] {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.28rem 0.45rem;
  min-height: 32px;
  max-width: 100%;
}
/* Reserve text space for a chevron inset from the right border on every select. */
select {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%234a5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 0.75rem 0.5rem;
}
@media (forced-colors: active) {
  select { appearance: auto; background-image: none; }
}
input[type="number"] { width: 7.5rem; }
input[type="range"] { width: 100%; }

/* A native select is as wide as its widest option, which would burst a narrow
   column. Let the flex row size it instead. */
.field-row { min-width: 0; }
.field-row > select,
.field-row > input[type="text"],
.field-row > input[type="search"] {
  flex: 1 1 9rem;
  min-width: 0;
}
.controls select { width: 100%; }
.target-replacement { width: 100%; }

.panel-note { color: var(--ink-muted); font-size: 0.83rem; margin: 0.25rem 0 0.5rem; }
.empty-state { color: var(--ink-muted); font-style: italic; }

/* Deposited recoded-genome facts ---------------------------------------- */

.recoded-genome-panel { border-left: 3px solid var(--accent); padding-inline-start: 1rem; }
.recoded-genome-lead { font-weight: 600; }
.recoded-genome-facts { display: grid; gap: 0.45rem; margin: 0.75rem 0; }
.recoded-genome-fact {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.2rem 0.65rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
}
.recoded-genome-fact dt { color: var(--ink-muted); font-size: 0.8rem; font-weight: 600; }
.recoded-genome-fact dd { margin: 0; overflow-wrap: anywhere; }
.recoded-genome-convention { margin-top: 0.75rem; }

@media (max-width: 420px) {
  .recoded-genome-fact { grid-template-columns: 1fr; }
}

/* Scheme editor --------------------------------------------------------- */

.target-list { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.4rem; }
.target-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.25rem 0.5rem;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.45rem 0.55rem;
  background: var(--surface-sunken);
}
.target-codon { font-family: var(--mono); font-weight: 700; font-size: 1rem; }
.target-aa { color: var(--ink-muted); font-size: 0.82rem; }
.target-arrow { color: var(--ink-muted); font-size: 0.8rem; }
.target-replacement { font-family: var(--mono); grid-column: 2 / 3; }
.target-count { color: var(--ink-muted); font-size: 0.78rem; grid-column: 1 / 3; }
.target-count.warn { color: #8a5300; font-weight: 600; }
.target-item > .icon-button { grid-row: 1 / 2; grid-column: 3 / 4; }
.target-empty { color: var(--ink-muted); font-style: italic; font-size: 0.86rem; }

/* A spread target: one replacement per row with its whole-percent share. The
   toggle and the rows span the whole item so a narrow column never clips them. */
.target-spread-toggle {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
}
.target-spread-toggle input { margin: 0; flex: 0 0 auto; }
.target-shares {
  grid-column: 1 / 4;
  display: grid;
  gap: 0.3rem;
  margin-top: 0.1rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--line);
}
.target-share-row {
  display: grid;
  grid-template-columns: minmax(3.5rem, 1fr) 3.5rem auto auto;
  gap: 0.35rem;
  align-items: center;
}
.share-remove {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: var(--radius);
  line-height: 1;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.share-remove:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.share-remove:disabled { opacity: 0.4; cursor: default; }
.target-share-codon { font-family: var(--mono); min-width: 0; }
.target-share-value { font-family: var(--mono); width: 100%; min-width: 0; }
.target-share-unit { color: var(--ink-muted); font-size: 0.78rem; }
.target-share-total { margin: 0; color: var(--ink-muted); font-size: 0.78rem; }
.target-share-total.warn { color: #8a5300; font-weight: 600; }
.target-share-note { margin: 0; color: var(--ink-muted); font-size: 0.75rem; }
.target-shares .chip-button { justify-self: start; }

/* The compact remove keeps the row on one line at every width, so there is no
   breakpoint here: the three controls fit the controls column as it is. */

.scheme-status {
  font-size: 0.83rem;
  color: var(--ink-muted);
  border-left: 3px solid var(--line-strong);
  padding-left: 0.5rem;
  margin: 0.5rem 0;
}
.scheme-status.error { color: var(--danger); border-left-color: var(--danger); }
.scheme-note { display: block; margin-top: 0.25rem; }
.scheme-note.warn { color: #6b4100; font-weight: 600; }

/* A recomputed metric that disagrees with the pipeline means the map and the
   controls no longer describe the same numbers. It is a red condition, not a
   note, so it uses the strongest treatment on the page and never colour alone. */
.metric-alert {
  margin: 0 1.25rem var(--gap);
  padding: 0.7rem 0.9rem;
  border: 2px solid #8c1d18;
  border-left-width: 6px;
  border-radius: var(--radius);
  background: #fdecea;
  color: #5c1512;
  font-size: 0.86rem;
}
.metric-alert strong { display: block; font-size: 0.95rem; margin-bottom: 0.3rem; }
.metric-alert p { margin: 0.3rem 0; }
.metric-alert ul { margin: 0.3rem 0; padding-left: 1.2rem; }
.metric-alert li { margin: 0.15rem 0; font-variant-numeric: tabular-nums; }

/* Filters --------------------------------------------------------------- */

.traffic-filter { border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
.traffic-filter > .field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.traffic-heading { margin: 0 0 0.35rem; font-size: 0.92rem; }
.traffic-label { display: block; font-size: 0.85rem; color: var(--ink-muted); }
.traffic-readout { display: block; font-size: 0.85rem; font-weight: 600; }

/* A measurement borrowed from another organism, or any value the reader should
   not take at face value, is marked where it is shown rather than in a tooltip. */
.provenance-warning {
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  color: #6b4100;
  background: #fdf3e2;
  border: 1px solid #e3c893;
  border-radius: var(--radius);
  padding: 0.3rem 0.45rem;
  margin: 0.35rem 0;
}

.flag-filter { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 0.6rem; padding: 0.4rem 0.6rem; }
.flag-filter legend { font-size: 0.8rem; color: var(--ink-muted); padding: 0 0.25rem; }
.flag-filter .checkbox-row { margin-bottom: 0.15rem; font-size: 0.85rem; }
.missing-control { font-size: 0.8rem; margin-top: 0.4rem; }

.gene-flag {
  font-size: 0.8rem;
  color: #6b4100;
  background: #fdf3e2;
  border-left: 3px solid #c98a1b;
  padding: 0.35rem 0.5rem;
  margin: 0.35rem 0;
}

.filter-list { display: grid; gap: 0.6rem; }
.filter-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.6rem; }
.filter-heading { display: flex; align-items: baseline; gap: 0.4rem; }
.filter-title { font-weight: 600; font-size: 0.88rem; }
.filter-unit { color: var(--ink-muted); font-size: 0.76rem; flex: 1; }
.filter-histogram { display: block; width: 100%; height: 34px; margin: 0.35rem 0; }
.filter-inputs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter-input { display: flex; align-items: center; gap: 0.3rem; }
.filter-input label { font-size: 0.78rem; color: var(--ink-muted); }
.filter-input input { width: 6.5rem; }

.filter-summary { font-size: 0.86rem; margin: 0.6rem 0; }
.filter-summary.hiding { font-weight: 600; border-left: 3px solid #8a5300; padding-left: 0.5rem; }

/* Gene search results ---------------------------------------------------- */

#gene-search-results { margin-top: 0.25rem; }
.search-status { margin: 0.25rem 0; font-size: 0.85rem; color: var(--ink-muted); }
.search-alias-note {
  margin: 0.25rem 0;
  font-size: 0.8rem;
  color: #6b4100;
  background: #fdf3e2;
  border: 1px solid #e3c893;
  border-radius: var(--radius);
  padding: 0.25rem 0.45rem;
}
.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-height: 22rem;
  overflow-y: auto;
}
/* Narrow enough and the two buttons would squeeze the product text to a word per
   line, so they drop to their own line instead. */
.search-result {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.search-result-text { flex: 1 1 15rem; min-width: 0; }
.search-result-name { margin: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.search-result-field { color: var(--ink-muted); font-size: 0.78rem; }
.search-result-product {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.search-result-actions { display: flex; gap: 0.3rem; flex: 0 0 auto; flex-wrap: wrap; }
/* Noncoding genes and pseudogenes: annotation records, opened in place, never CDSs. */
.search-records-heading { margin-top: 0.6rem; }
.search-record > .annotation-record { flex: 1 1 100%; }
/* An opened record is read in full, not inside the list's scroll box. */
.search-records:has(.annotation-record) { max-height: none; }
.annotation-record {
  margin: 0.4rem 0 0; padding: 0.45rem 0.55rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-sunken); font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.annotation-record > .panel-note:first-child { margin-top: 0; }
.annotation-record-facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.6rem; margin: 0.4rem 0;
}
.annotation-record-facts dt { color: var(--ink-muted); }
.annotation-record-facts dd { margin: 0; }
.gene-function-status { color: var(--ink-muted); font-style: italic; }
.gene-function-status-detail { color: var(--ink-muted); }
.gene-function-status-disagreement { color: var(--ink-muted); }

/* Map ------------------------------------------------------------------- */

.tablist { display: flex; flex-wrap: wrap; column-gap: 0.3rem; row-gap: 0; border-bottom: 1px solid var(--line); }
.tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  color: var(--ink-muted);
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); background: var(--accent-soft); }
.tab.active {
  color: var(--ink);
  font-weight: 600;
  background: var(--surface);
  border-color: var(--line);
  border-bottom: 2px solid var(--accent);
}

/*
 * View navigation (#panel-tabs): the genome viewer, the Map space select and
 * the other views. The first two share a row while it holds them; the other
 * views take a full-width row that scrolls sideways, with an edge cue, only
 * when its tabs do not fit.
 */
.view-nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; }
.view-nav-group { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.view-nav-label {
  color: var(--ink-muted); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.view-nav-map { flex: 1 1 15rem; max-width: 24rem; }
.view-nav-map select, .genome-viewer-tab { min-height: 2.25rem; }
.view-nav-map:not(.active) select { color: var(--ink-muted); }
.view-nav-map.active select {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  background-color: var(--accent-soft); font-weight: 600;
}
.view-nav-other { flex: 1 1 100%; position: relative; }
.genome-viewer-list { display: flex; }
.view-nav .genome-viewer-tab {
  border: 1px solid var(--accent); border-radius: var(--radius); margin: 0;
  padding: 0.35rem 0.9rem; color: var(--accent); font-weight: 600; background: var(--surface);
}
.view-nav .genome-viewer-tab:hover { background: var(--accent-soft); color: var(--accent); }
.view-nav .genome-viewer-tab.active { background: var(--accent); color: #fff; }
.view-nav .tablist {
  position: relative; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
/* Padding stands in for the current tab's underline, so selecting shifts nothing. */
.view-nav .tablist .tab { flex: none; white-space: nowrap; margin-bottom: 0; padding-bottom: calc(0.4rem + 2px); }
.view-nav .tablist .tab.active { padding-bottom: 0.4rem; }
.view-nav .tablist .tab:focus-visible { outline-offset: -3px; }
.view-nav-other::before, .view-nav-other::after {
  content: ''; position: absolute; z-index: 1; bottom: 1px; width: 2.25rem; height: 2.1rem;
  pointer-events: none; opacity: 0; transition: opacity 0.15s ease;
  background-repeat: no-repeat; background-size: 0.5rem 0.75rem, auto;
}
.view-nav-other::before {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M6 1 1 6l5 5' fill='none' stroke='%234a5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(to right, var(--surface) 60%, transparent);
  background-position: left 0.2rem center, 0 0;
}
.view-nav-other::after {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='m2 1 5 5-5 5' fill='none' stroke='%234a5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(to left, var(--surface) 60%, transparent);
  background-position: right 0.2rem center, 0 0;
}
.view-nav-other.scrolls-start::before, .view-nav-other.scrolls-end::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .view-nav-other::before, .view-nav-other::after { transition: none; }
}
/* Forced colours drop the fills, so the current genome tab and map keep a heavier border. */
@media (forced-colors: active) {
  .view-nav .genome-viewer-tab.active, .view-nav-map.active select { border-width: 3px; }
}

.panel-blurb { color: var(--ink-muted); max-width: 88ch; font-size: 0.88rem; margin: 0; }
.method-help { max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.65rem; }
.method-help summary { font-size: 0.86rem; font-weight: 600; }
.method-help .help-content { padding-top: 0.45rem; font-size: 0.82rem; }
.metric-help-list { margin: 0; display: grid; gap: 0.45rem; }
.metric-help-list > div { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); gap: 0.55rem; }
.metric-help-list dt { font-weight: 600; }
.metric-help-list dd { margin: 0; overflow-wrap: anywhere; }
.projection-feature-list { display: grid; gap: 0.35rem; padding-left: 1.2rem; max-height: 20rem; overflow-y: auto; }
.method-help a { overflow-wrap: anywhere; }
/*
 * The Draw on top control, at the foot of the colour explanation disclosure.
 * A `details` that is closed renders only its summary, so this whole block —
 * label, select, hint, and reason — has no height until the reader opens it,
 * which is what keeps it out of every primary area. It is separated from the
 * explanation above it by a rule rather than by a heading, because it is a
 * control and not another paragraph of that explanation.
 */
.draw-direction {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.draw-direction > .field-row { margin-bottom: 0; }
.draw-direction-hint, .draw-direction-notice { margin: 0; }
/*
 * What the picture is currently doing about overlapping marks. By owner decision
 * of 2026-09-30 this disclosure is the only visible place those sentences appear,
 * so they must fit the narrowest stage: a grid of separate paragraphs wraps each
 * sentence on its own, and `overflow-wrap` keeps a long accession or a figure
 * from pushing the block past a 375 px viewport.
 */
.draw-direction-state { display: grid; gap: 0.3rem; }
.draw-direction-state > p { margin: 0; overflow-wrap: anywhere; }
.draw-direction-state:empty { display: none; }
@media (max-width: 480px) {
  .metric-help-list > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}
/* Optional axis controls precede colour/search and view controls. */
.map-toolbar { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.map-toolbar-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.axis-chooser { padding: 0.65rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-sunken); }
.axis-chooser > .field-row { flex: 1 1 11rem; }
.axis-chooser > .panel-note { flex: 2 1 16rem; margin: 0; font-size: 0.8rem; }
.axis-source-button { flex: 1 1 9rem; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.map-toolbar .field-row { margin-bottom: 0; }
.map-toolbar-row > .field-row { flex: 1 1 11rem; min-width: 0; }

/* Colour by and Scale are one row of two columns at every width down to 360 px,
   the single exception to the toolbar's stack-rather-than-compress rule
   (docs/validation/responsive-workspace.md): the owner asked for the two on one
   line. A grid rather than a wrapping flex row, so the pair cannot split, and
   the two fields always take the same label placement as each other — never one
   inline and the other stacked, which is what left them 13 px out of line.

   Below 560 px both labels sit above their controls. Inline, the two labels and
   their gaps eat 134 of a 274 px row, which leaves the selects nothing: a
   content-sized Scale column reduced Colour by to 30 px of dropdown arrow with
   no text in it at all. Stacked, each select gets its whole column and both read
   at 360 px. From 560 px up there is room for the labels beside their controls,
   so both go back inline, Scale's column is sized to its own longest option, and
   Colour by takes every remaining pixel — it has the toolbar's longest option
   text, and it is the field that truncates when a row is short, which costs
   little because the full metric label heads the explanation directly beneath
   and the legend names the scale in full.

   Both toolbars use this one rule, so the selector names both hosts and beats
   their generic row rule wherever it sits. */
.map-toolbar .colour-scale-row,
.chromosome-toolbar .colour-scale-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}
.colour-scale-row > .field-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  min-width: 0;
  margin-bottom: 0;
}
.colour-scale-row > .field-row > label { white-space: nowrap; }
.colour-scale-row > .field-row > label,
.scale-label-row { display: inline-flex; align-items: center; min-height: 1.35rem; }
.scale-label-row { gap: 0.4rem; }
.scale-label-row > label { white-space: nowrap; }
.scale-label-row > .info-popover { align-self: center; }
/* A column flex basis would be read as a height, so the stacked select sizes
   itself from the column it is in. */
.colour-scale-row > .field-row > select { flex: none; width: 100%; }
.info-popover { position: relative; display: inline-flex; align-self: flex-start; }
.info-popover-button {
  width: 1.35rem; height: 1.35rem; padding: 0; border: 1px solid var(--line-strong);
  border-radius: 50%; background: var(--surface); color: var(--accent); font: 700 0.78rem/1 system-ui;
  cursor: help;
}
.info-popover-button:hover, .info-popover-button:focus-visible,
.info-popover-button[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.info-popover-content {
  position: fixed; z-index: 20;
  width: min(30rem, calc(100vw - 2rem)); padding: 0.65rem 0.75rem;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 8px 24px rgba(27, 39, 51, 0.18); color: var(--ink); font-size: 0.82rem;
  line-height: 1.45; overflow-wrap: anywhere;
}
@media (min-width: 560px) {
  .map-toolbar .colour-scale-row,
  .chromosome-toolbar .colour-scale-row { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .colour-scale-row > .field-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
  }
  .colour-scale-row > .field-row > select { flex: 1 1 9rem; width: auto; }
}
/* The reasons beneath that row: muted, tight against it, and gone when empty. */
.scale-notice { margin: 0; }
/* Alone on its row at every breakpoint, so it grows into the whole width. */
.map-toolbar .field-row-grow { flex: 3 1 14rem; }
.map-toolbar .field-row-grow > input[type="search"] { flex: 1 1 12rem; }

.filter-banner { margin: 0; font-size: 0.85rem; color: transparent; min-height: 1.2rem; }
.filter-banner.active {
  color: #6b4100;
  background: #fdf3e2;
  border: 1px solid #e3c893;
  border-radius: var(--radius);
  padding: 0.25rem 0.5rem;
}

.canvas-host {
  position: relative;
  width: 100%;
  height: clamp(320px, 58vh, 620px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
#map-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }

.hint { color: var(--ink-muted); font-size: 0.8rem; margin: 0; }
.view-controls > ul { margin: 0.5rem 0; padding-left: 1.25rem; }
.view-controls li + li { margin-top: 0.35rem; }
.view-controls .legend-ramp-note { max-width: none; margin: 0.5rem 0; }

.map-footer { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.legend { min-width: 220px; }
.legend.category-mode { flex: 1 0 100%; }
.legend-title { font-weight: 600; font-size: 0.86rem; margin: 0; }
.legend-unit { font-weight: 400; color: var(--ink-muted); }
.legend-ramp { display: block; border: 1px solid var(--line-strong); border-radius: 3px; }
/* The scale's name reads beside the ramp it applies to. */
.legend-ramp-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.legend-scale-name { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); }
/* Ticks are placed at the ramp position their value actually takes, not spaced
   evenly, so a nonlinear scale's labels cannot imply a linear reading. */
.legend-ticks { position: relative; width: 196px; height: 1.1em; font-size: 0.75rem; color: var(--ink-muted); }
/* A crowded tick keeps its position and takes a second row; see rampTicks. */
.legend-ticks.stacked { height: 2.2em; }
.legend-ticks > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.legend-ticks > span.below { top: 1.1em; }
.legend-ticks > span.at-start { transform: none; }
.legend-ticks > span.at-end { transform: translateX(-100%); }
.legend-notes { list-style: none; margin: 0.35rem 0 0; padding: 0; font-size: 0.78rem; color: var(--ink-muted); }
.legend-notes li { display: flex; align-items: center; gap: 0.35rem; }
.category-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.3rem 0.8rem; }
.category-legend li { align-items: flex-start; }
.legend-marker { width: 1.1em; height: 1.1em; flex: none; overflow: visible; }
.category-legend .legend-marker { margin-top: 0.04rem; }
.legend-ramp-note { font-size: 0.76rem; color: var(--ink-muted); margin: 0.35rem 0 0; max-width: 38ch; }
.category-legend-row {
  display: inline-flex; align-items: flex-start; gap: 0.35rem; cursor: pointer;
  border-radius: 3px; padding: 0.05rem 0.2rem; margin: -0.05rem -0.2rem;
}
.category-legend-row:hover { background: var(--surface-sunken); }
.category-legend-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.category-legend-row.selected { background: var(--accent-soft); font-weight: 600; }
.category-legend-reset { margin-top: 0.5rem; }
.legend-evidence { max-width: 60ch; }
.function-category-sources { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.function-category-sources li { margin: 0.15rem 0; }
.function-category-block p { margin: 0.5rem 0; }
.function-category-block > :first-child { margin-top: 0; }
.function-category-block > :last-child { margin-bottom: 0; }

.timing { font-size: 0.76rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; max-width: 46ch; }

#loadings-details { border-top: 1px solid var(--line); padding-top: 0.5rem; }
#loadings-details summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.loading-table { border-collapse: collapse; font-size: 0.82rem; margin-top: 0.4rem; }
.loading-table caption { text-align: left; color: var(--ink-muted); padding-bottom: 0.25rem; }
.loading-table th, .loading-table td { padding: 0.15rem 0.5rem; text-align: left; }
.loading-table thead th { border-bottom: 1px solid var(--line); }
.loading-sub { color: var(--ink-muted); font-weight: 400; font-size: 0.76rem; }
.loading-bar-cell { white-space: nowrap; }
.loading-bar {
  display: inline-block;
  position: relative;
  width: 78px;
  height: 9px;
  background: var(--surface-sunken);
  border-left: 1px solid var(--line-strong);
  vertical-align: middle;
}
.loading-fill { position: absolute; top: 0; height: 9px; }
.loading-fill.positive { left: 50%; background: var(--accent); }
.loading-fill.negative { right: 50%; background: #b3670b; }
.loading-bar { border-left: none; background: linear-gradient(to right, var(--surface-sunken) 49.6%, var(--line-strong) 49.6%, var(--line-strong) 50.4%, var(--surface-sunken) 50.4%); }
.loading-value { font-variant-numeric: tabular-nums; margin-left: 0.4rem; color: var(--ink-muted); }

/* Citations --------------------------------------------------------------- */

#main.citations-active {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
  margin-inline: auto;
}
#main.citations-active > .analysis,
#main.regulatory-active > .analysis { grid-column: 1; grid-row: 1; }
#main.citations-active > .controls,
#main.citations-active > .resize-handle,
#main.citations-active > .detail,
#main.citations-active .analysis > :not(#map-section) { display: none; }
#main.regulatory-active {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
  margin-inline: auto;
}
#main.regulatory-active > .controls,
#main.regulatory-active > .resize-handle,
#main.regulatory-active > .detail,
#main.regulatory-active .analysis > :not(#map-section) { display: none; }
/* Strain fitness ---------------------------------------------------------- */

/* One column, like the other tabs whose rows are not genes: there is no gene to
   select here, so the controls rail and the gene detail rail have nothing to
   act on and are hidden rather than left beside a table they cannot touch. */
#main.fitness-active {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
  margin-inline: auto;
}
#main.fitness-active > .analysis { grid-column: 1; grid-row: 1; }
#main.fitness-active > .controls,
#main.fitness-active > .resize-handle,
#main.fitness-active > .detail,
#main.fitness-active .analysis > :not(#map-section) { display: none; }
#strain-fitness-view { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.75rem; }
#strain-fitness-view h3 { margin: 0; font-size: 0.95rem; }
.fitness-dataset {
  display: grid;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}
.fitness-dataset label { display: grid; gap: 0.25rem; font-size: 0.88rem; }
.fitness-dataset select { width: 100%; min-width: 0; }
.fitness-dataset-context, .fitness-dataset-ambiguity, .fitness-load-error {
  margin: 0;
  overflow-wrap: anywhere;
}
.fitness-dataset-context { font-size: 0.86rem; }
.fitness-dataset-ambiguity { color: var(--danger); font-size: 0.83rem; }
.fitness-source { display: grid; gap: 0.1rem; }
.fitness-source .panel-note { margin: 0; overflow-wrap: anywhere; }
.fitness-controls { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.fitness-controls label { display: grid; gap: 0.25rem; flex: 1 1 13rem; font-size: 0.88rem; }
.fitness-controls input, .fitness-controls select { width: 100%; min-width: 0; }
/* The selection every table below is read under. It stays on screen rather than
   living in the rows, so a narrow table never drops the context with a column. */
.fitness-context {
  margin: 0;
  font-size: 0.83rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.fitness-definitions {
  margin: 0.4rem 0 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.15rem 0.7rem;
  font-size: 0.82rem;
}
.fitness-definitions dt { color: var(--ink-muted); }
.fitness-definitions dd { margin: 0; overflow-wrap: anywhere; }
.fitness-section { display: grid; gap: 0.45rem; }
.fitness-paging { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; }
.fitness-paging span { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.fitness-export { display: grid; gap: 0.3rem; }
.fitness-export > .panel-note { margin: 0; overflow-wrap: anywhere; }
/* `.table-scroll` keeps the overflow inside the card; the table itself is wide
   enough that its columns stay readable rather than wrapping to one word each. */
.fitness-table {
  width: 100%;
  min-width: 48rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.fitness-table caption { text-align: left; font-weight: 600; padding-bottom: 0.3rem; }
.fitness-table th, .fitness-table td {
  border-top: 1px solid var(--line);
  padding: 0.3rem 0.45rem;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.fitness-table th { text-align: left; font-weight: 600; }
/* The declared unit, under its column name. Muted and lighter so the name is
   what a reader scans and the unit is what they find when they need it. */
.fitness-unit {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.fitness-table thead th { color: var(--ink-muted); border-top: none; }
.fitness-table td.numeric, .fitness-table th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* The shared `.numeric` rule keeps one number on one line, which is right for
     a number and wrong for the two things that share these columns: a declared
     unit and a numbered replicate series. Both are prose and must wrap inside
     their column rather than run out of the table. */
  white-space: normal;
}
#citations-view { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 0.75rem; }
#main.lengths-active > .detail,
#main.lengths-active .analysis > :not(#map-section) { display: none; }
#main.lengths-active > .analysis { order: -1; }
@media (min-width: 960px) {
  #main.lengths-active > .analysis { order: 0; }
}
@media (min-width: 1240px) {
  #main.lengths-active {
    grid-template-columns: var(--controls-width, 280px) var(--gap) minmax(0, 1fr);
  }
  #main.lengths-active > .resize-handle-right { display: none; }
}
/* Chromosome ------------------------------------------------------------- */

/* No layout class changes the column count here: the chromosome view keeps the
   controls rail and the gene detail rail, because selecting a CDS on the track
   is how a reader opens it in the gene visualizer beside it. */
#chromosome-view { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
/* This toolbar has the map toolbar's structure: a stack of rows, Colour by and
   Scale on the first of them under the shared `.colour-scale-row` rule above,
   the scale note and the colour explanation directly beneath that row, and the
   view buttons on their own row last. One flat wrapping row left `Zoom in (+)`
   beside Scale at 375 px with Colour by stranded above it. */
.chromosome-toolbar { display: flex; flex-direction: column; gap: 0.5rem; }
.chromosome-toolbar-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.chromosome-window {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.chromosome-canvas-host {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.25rem;
  overflow: hidden;
}
.chromosome-canvas-host canvas { display: block; width: 100%; touch-action: none; }
.chromosome-tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.chromosome-tracks li { font-size: 0.8rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.chromosome-tracks strong { color: var(--ink); font-family: var(--mono); font-size: 0.78rem; }
.chromosome-unavailable {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  background: var(--surface);
}
.chromosome-unavailable p { margin: 0 0 0.35rem; }
.chromosome-unavailable ul { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }

/* Independent noncoding tRNA tab ---------------------------------------- */

/* One column, like the other tabs whose rows are not protein-coding genes:
   there is no CDS to select here, so the controls rail and the gene detail rail
   have nothing to act on and are hidden rather than left beside a list they
   cannot touch. The hand-off button is how this tab reaches the chromosome. */
#main.trna-active {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
  margin-inline: auto;
}
#main.trna-active > .analysis { grid-column: 1; grid-row: 1; }
#main.trna-active > .controls,
#main.trna-active > .resize-handle,
#main.trna-active > .detail,
#main.trna-active .analysis > :not(#map-section) { display: none; }
#trna-view { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.75rem; }
.trna-viewer { display: grid; gap: 0.5rem; }
.trna-show-on-chromosome { margin-bottom: 0.65rem; }
.trna-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.trna-heading-row h3 { margin: 0; }
.trna-count-summary,
.trna-results-summary,
.trna-track-caption { margin: 0; color: var(--ink-muted); font-size: 0.82rem; }
.trna-status { padding: 0.6rem 0; }
.trna-status p { margin: 0 0 0.5rem; }
.trna-ready { display: grid; gap: 0.65rem; }
.trna-visibility { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.trna-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: start;
}
.trna-filters .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  width: 100%;
  margin: 0;
}
.trna-search-field { grid-column: 1 / -1; }
.trna-filters input,
.trna-filters select { width: 100%; min-width: 0; }
.trna-track-figure {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55rem 0.65rem 0.7rem;
  background: var(--surface-sunken);
}
.trna-track {
  position: relative;
  height: 2.25rem;
  margin-top: 0.35rem;
}
.trna-track-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.05rem;
  border-top: 2px solid #536774;
}
.trna-track-markers { position: absolute; inset: 0; }
.trna-track-window-note { margin: 0; }
.trna-marker {
  position: absolute;
  top: 0.46rem;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  padding: 0;
  transform: translateX(-50%);
  border: 2px solid #244f6c;
  border-radius: 50%;
  background: #d9edf7;
  color: #17394e;
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1;
  z-index: 1;
}
.trna-marker:hover,
.trna-marker:focus-visible { z-index: 2; transform: translateX(-50%) scale(1.15); }
.trna-marker.has-candidate {
  border-radius: 0;
  border-color: #8a4c13;
  background: #fff0d8;
  transform: translateX(-50%) rotate(45deg);
}
.trna-marker.has-candidate > span { display: inline-block; transform: rotate(-45deg); }
.trna-marker.has-candidate:hover,
.trna-marker.has-candidate:focus-visible {
  transform: translateX(-50%) rotate(45deg) scale(1.15);
}
.trna-marker.has-candidate.is-cluster { border-radius: 0.2rem; }
.trna-track-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-size: 0.78rem;
}
.trna-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.4rem;
  max-height: 20rem;
  overflow: auto;
}
.trna-row {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  display: grid;
  gap: 0.2rem;
}
.trna-row:hover { border-color: #7794a7; }
.trna-row.is-selected { border-color: #9f2f2f; box-shadow: inset 3px 0 #9f2f2f; }
.trna-row strong { overflow-wrap: anywhere; }
.trna-row > span { color: var(--ink-muted); font-size: 0.78rem; }
.trna-candidate-badge,
.trna-retained { font-weight: 650; }
.trna-candidate-badge { color: #7d430c !important; }
.trna-retained { color: #8a2c2c !important; }
.trna-empty { margin: 0; padding: 0.75rem; border: 1px dashed var(--line); }
.trna-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem;
  background: var(--surface-sunken);
}
.trna-detail h4,
.trna-detail h5 { margin: 0 0 0.45rem; overflow-wrap: anywhere; }
.trna-detail h5 { margin-top: 0.8rem; }
.trna-detail-status { margin: 0 0 0.65rem; }
.trna-facts {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  gap: 0.3rem 0.75rem;
  margin: 0;
}
.trna-facts dt { color: var(--ink-muted); font-size: 0.8rem; }
.trna-facts dd { margin: 0; overflow-wrap: anywhere; }
.trna-sequence {
  display: block;
  padding: 0.55rem;
  border: 1px solid var(--line);
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.trna-sources { margin: 0; }

@media (max-width: 600px) {
  .trna-filters { grid-template-columns: 1fr; }
  .trna-search-field { grid-column: auto; }
  .trna-facts { grid-template-columns: 1fr; gap: 0.1rem; }
  .trna-facts dd { margin-bottom: 0.35rem; }
  .trna-list { max-height: 24rem; }
}

#length-view { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.length-summary { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.length-chart { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem; background: var(--surface); }
.length-chart svg { display: block; width: 100%; height: auto; max-height: 340px; }
.length-chart .panel-note { margin: 0.3rem 0 0; }
.length-range-controls { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.length-range-controls label { display: grid; gap: 0.3rem; font-size: 0.88rem; }
.length-range-controls input { width: 9rem; }
#regulatory-view { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.75rem; }
.regulatory-controls { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.regulatory-controls label { display: grid; gap: 0.25rem; flex: 1 1 13rem; font-size: 0.88rem; }
.regulatory-controls input, .regulatory-controls select { width: 100%; min-width: 0; }
.regulatory-list { display: grid; gap: 0.45rem; }
.regulatory-site { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.55rem 0.7rem; }
.regulatory-site summary { overflow-wrap: anywhere; font-family: var(--mono); font-size: 0.85rem; }
.regulatory-site > .panel-note { margin: 0.5rem 0; }
.regulatory-site .tss-table { margin-top: 0.6rem; }
.regulatory-site .tss-table caption { text-align: left; font-weight: 600; }
/* A page turn scrolls the status to the top; keep it clear of the viewport edge. */
.regulatory-status { scroll-margin-top: 0.7rem; }
.regulatory-paging { display: flex; align-items: center; gap: 0.7rem; }
.regulatory-paging span { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.citation-section { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.citation-section:first-child { border-top: none; padding-top: 0; }
.citation-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.citation-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.75rem; background: var(--surface); }
.citation-text { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.citation-text a { color: var(--accent); }
.citation-contribution { margin: 0.3rem 0 0; color: var(--ink-muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.citation-downloads {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.citation-download { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; max-width: 100%; }
.citation-download-link {
  font-size: 0.8rem;
  padding: 0.15rem 0.55rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: left;
}
.citation-download-status { color: var(--ink-muted); font-size: 0.75rem; }
.citation-download-kind { color: var(--ink-muted); font-size: 0.75rem; }
.citation-download-path { color: var(--ink-muted); font-size: 0.75rem; overflow-wrap: anywhere; }

/* Gene detail ----------------------------------------------------------- */

.gene-header { border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.gene-title { margin: 0; font-family: var(--mono); font-size: 1rem; }
.gene-name { font-family: var(--font); color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.gene-status { font-size: 0.78rem; color: var(--ink-muted); margin: 0.1rem 0 0.3rem; }
.gene-status-row { display: flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0 0.3rem; }
.gene-status-row .gene-status { margin: 0; }
.unpin-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; padding: 0; border: none; font-size: 0.78rem; flex: none; }
.unpin-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.unpin-button svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gene-product { margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.gene-location { font-size: 0.8rem; color: var(--ink-muted); margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.gene-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.delta-section { margin-bottom: 0.75rem; }
.delta-table, .metric-table { border-collapse: collapse; width: 100%; font-size: 0.83rem; }
.delta-table th, .delta-table td, .metric-table th, .metric-table td {
  padding: 0.22rem 0.3rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.delta-table thead th { color: var(--ink-muted); font-weight: 600; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numeric.up { color: #0a6b3d; }
.numeric.down { color: var(--danger); }
.row-unit { color: var(--ink-muted); font-weight: 400; font-size: 0.72rem; }
.metric-table td.numeric .row-unit { white-space: normal; }

.metric-group { border-bottom: 1px solid var(--line); }
.metric-group summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; padding: 0.35rem 0; }
.annotation-evidence { overflow-wrap: anywhere; }
.candidate-evidence { overflow-wrap: anywhere; }
.candidate-tested-claim { margin: 0.4rem 0; font-weight: 600; }
.candidate-borrowed-caution { margin: 0.55rem 0 0; padding: 0.4rem 0.5rem; border: 1px solid #e3c893; border-radius: var(--radius); background: #fdf3e2; font-size: 0.8rem; }
.candidate-borrowed-caution strong { color: #6b4100; }
.tan-disclosure {
  margin: 0.45rem 0; padding: 0.4rem 0.55rem; border: 1px solid #e3c893;
  border-left: 3px solid #c98a1b; border-radius: var(--radius); background: #fdf3e2;
  color: #6b4100; font-size: 0.8rem; overflow-wrap: anywhere;
}
.tan-disclosure > summary {
  width: fit-content; cursor: pointer; color: #6b4100; font-weight: 600;
}
.tan-disclosure > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tan-disclosure > .provenance-warning,
.tan-disclosure > .gene-flag,
.tan-disclosure > .search-alias-note,
.tan-disclosure > .filter-banner,
.tan-disclosure > .candidate-borrowed-caution {
  min-height: 0; margin: 0.45rem 0 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit;
}
.tan-disclosure p { margin: 0.5rem 0; }
.tan-disclosure ul, .tss-caveat { padding-left: 1.25rem; }
.tan-disclosure li + li, .tss-caveat li + li { margin-top: 0.35rem; }
.tan-disclosure > :not(summary) > :first-child { margin-top: 0; }
.tan-disclosure > :not(summary) > :last-child { margin-bottom: 0; }
.filter-disclosure[hidden] { display: none; }
.filter-disclosure > .filter-bypass-row { margin-top: 0.45rem; }
.filter-disclosure > .filter-bypass-row label { color: inherit; font-weight: 600; }
.candidate-tier { margin: 0.35rem 0 0.2rem; font-size: 0.8rem; }
.candidate-go-context { margin: 0.55rem 0 0; padding: 0.4rem 0.5rem; border: 1px dashed #9aa3b5; border-radius: var(--radius); background: #f4f6fa; font-size: 0.8rem; }
.candidate-go-context p { margin: 0 0 0.3rem; }
.candidate-go-context p:last-child { margin-bottom: 0; }
.candidate-go-context strong { color: #33405a; }
.candidate-discrepancies { margin: 0.55rem 0 0; padding: 0.4rem 0.5rem; border: 1px solid #d9a3a3; border-left-width: 4px; border-radius: var(--radius); background: #fcf1f1; font-size: 0.8rem; }
.candidate-discrepancies strong { color: #7a1f1f; }
.candidate-discrepancies ul { margin: 0.25rem 0; padding-left: 1.1rem; }
.candidate-discrepancies li { margin-bottom: 0.15rem; }
.candidate-discrepancies p { margin: 0.2rem 0 0; }
.annotation-evidence > .panel-note { margin: 0.15rem 0 0.55rem; }
.annotation-evidence-list { margin: 0 0 0.55rem; font-size: 0.78rem; }
.annotation-evidence-list > div { margin-bottom: 0.45rem; }
.annotation-evidence-list dt { color: var(--ink-muted); font-weight: 600; }
.annotation-evidence-list dd { margin: 0.08rem 0 0; overflow-wrap: anywhere; }
.annotation-evidence-list ul { margin: 0; padding-left: 1.1rem; }
.annotation-evidence-list li { margin-bottom: 0.12rem; }
.go-term-controls { margin: 0.75rem 0; padding: 0.75rem 0; border-block: 1px solid var(--line); }
.go-term-controls select { min-width: 0; width: 100%; max-width: 100%; }
.go-term-controls input { min-width: 0; width: 100%; max-width: 100%; }
.go-term-controls .field-row { min-width: 0; }
.go-term-controls h3 { margin-top: 0; }
.go-term-controls .panel-note { overflow-wrap: anywhere; }
.tss-evidence { overflow-wrap: anywhere; }
.tss-caveat { margin: 0.15rem 0 0.55rem; }
.tss-empty { margin: 0.3rem 0 0.55rem; font-size: 0.8rem; color: var(--ink-muted); }
.tss-site-list { display: grid; gap: 0.65rem; margin: 0.2rem 0 0.6rem; }
.tss-site {
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}
.tss-site h4 { margin: 0; font-family: var(--mono); font-size: 0.84rem; }
.tss-site h5 { margin: 0.5rem 0 0.2rem; font-size: 0.76rem; }
.tss-location { margin: 0.1rem 0 0.35rem; color: var(--ink-muted); font-size: 0.75rem; }
.tss-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.74rem; }
.tss-table th, .tss-table td {
  min-width: 0;
  padding: 0.2rem 0.25rem;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  white-space: normal;
}
.tss-table th { text-align: left; }
.tss-table thead th { color: var(--ink-muted); font-weight: 600; }
.tss-table td.numeric { text-align: right; }
.tss-source { margin: 0.4rem 0 0.55rem; }
/* PXD036717 APEX2 evidence: prose lists that wrap in the narrow detail rail. */
.pxd036717-evidence { overflow-wrap: anywhere; }
.pxd036717-list { margin: 0.25rem 0 0.4rem; padding-left: 1rem; font-size: 0.74rem; }
.pxd036717-list li { margin: 0.15rem 0; }
.metric-label { display: block; font-weight: 600; }
.metric-desc { display: block; color: var(--ink-muted); font-weight: 400; font-size: 0.75rem; }
.rank-cell { width: 6.5rem; }
.rank-text { display: block; font-size: 0.74rem; color: var(--ink-muted); text-align: right; }
.rank-track { display: block; height: 4px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 2px; }
.rank-fill { display: block; height: 100%; background: var(--accent); }

/* The metric description, value, and percentile do not fit as three columns in
   either the phone card or the fixed 320 px desktop detail rail. Give the label
   the first row and the percentile the full second row instead of wrapping the
   description into a vertical ribbon of one-word lines. */
@media (max-width: 520px), (min-width: 1240px) {
  .metric-table tr {
    display: grid;
    /* A measured metric's unit can be a phrase ("summed mean TSS counts"), and
       an unbounded max-content column would hand it the rail and squeeze the
       description back into a one-word ribbon. Cap the value column and let the
       unit wrap inside it; the number itself still never breaks. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 8rem);
    align-items: start;
    column-gap: 0.65rem;
    border-bottom: 1px solid var(--line);
  }
  .metric-table th,
  .metric-table td { min-width: 0; border-bottom: 0; }
  .metric-table td.numeric { grid-column: 2; }
  .metric-table .rank-cell {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: max-content minmax(4rem, 1fr);
    align-items: center;
    gap: 0.5rem;
    width: auto;
    padding-top: 0;
  }
  .metric-table .rank-text { text-align: left; }
  .metric-table td[colspan] { grid-column: 1 / -1; }
}

/* Shortlist and comparison --------------------------------------------- */

/* A readable list the lab can prune without going back to the map. */
.shortlist-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; }
.shortlist-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.shortlist-row-text { flex: 1 1 12rem; min-width: 0; }
.shortlist-row-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
}
.shortlist-row-link:hover { text-decoration: underline; }
.shortlist-row-product {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.shortlist-row-metrics {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.shortlist-row > .chip-button { flex: 0 0 auto; }
#shortlist > .panel-note[role="status"],
.panel-export > .panel-note[role="status"] { overflow-wrap: anywhere; }

/* A locus tag is an identifier the reader copies, so it reads as one. */
.locus-tag { font-family: var(--mono); }
.identity-tag[tabindex] { cursor: help; border-bottom: 1px dotted currentColor; }
.identity-tag[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shortlist-empty { color: var(--ink-muted); font-style: italic; font-size: 0.85rem; }
.export-saved-row { font-size: 0.85rem; margin-bottom: 0.5rem; }

.compare-section, .panel-section { margin: 0; }
.compare-panel { padding-top: 0.6rem; }
.axis-picker { margin: 0.5rem 0; }
.axis-picker summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; }
.axis-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.axis-group { border: 1px solid var(--line); border-radius: var(--radius); margin: 0; padding: 0.35rem 0.5rem; }
.axis-group legend { font-size: 0.78rem; color: var(--ink-muted); padding: 0 0.25rem; }
.axis-option { display: block; font-size: 0.82rem; }

.chart-host { width: 100%; height: clamp(280px, 42vh, 440px); }
.chart-host.empty { height: 7rem; }
/* When axis labels need more room than the viewport gives, the chart keeps its
   minimum width and scrolls sideways rather than clipping a name. */
.chart-host.scrolls { overflow-x: auto; overflow-y: hidden; }
.compare-canvas { display: block; width: 100%; height: 100%; }
.series-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0; margin: 0.4rem 0; font-size: 0.83rem; }
.series-legend .dimmed { opacity: 0.45; }
.series-legend .focused .legend-entry { border-bottom: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.legend-entry[aria-pressed="true"] { background: var(--accent-soft); border-radius: 4px 4px 0 0; }
.legend-swatch { vertical-align: middle; width: 38px; height: 14px; flex: none; }
.legend-missing { color: #6b4100; font-weight: 600; }
.legend-clamped { color: #4a5560; font-weight: 600; }
.focus-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; margin: 0.25rem 0; }
.focus-bar .chip-button { min-height: 28px; padding: 0.15rem 0.6rem; }
.axis-unavailable { color: var(--ink-muted); font-size: 0.76rem; }
.axis-unavailable-note { margin-top: -0.25rem; }

/* Where an expression value comes from, said beside the number every time. The
   panel's role pill is the same small-pill token under its own name. */
.basis-tag, .panel-role-tag {
  display: inline-block;
  font-size: 0.68rem;
  line-height: 1.3;
  padding: 0 0.3rem;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  background: var(--surface-sunken);
  vertical-align: middle;
}
.basis-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.panel-role-tag { white-space: nowrap; }
.basis-tag.basis-measured { border-color: #7fb1c6; color: #1f5f7d; background: var(--accent-soft); }
.basis-tag.basis-proxy { border-color: #e3c893; color: #6b4100; background: #fdf3e2; }
.basis-tag.basis-none, .basis-tag.basis-unrecorded { border-style: dashed; }

.panel-role-tag { font-size: 0.68rem; line-height: 1.3; }

/* A row-identity swatch that doubles as the focus toggle in the shared table. */
.series-focus {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.05rem 0.2rem;
  cursor: pointer;
  vertical-align: middle;
  line-height: 0;
}
.series-focus:hover { border-color: var(--line-strong); }
.series-focus[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.data-table tbody tr.focused td, .data-table tbody tr.focused th { background: var(--accent-soft); font-weight: 600; }
.data-table tbody tr.dimmed td, .data-table tbody tr.dimmed th:not(:first-child) { color: var(--ink-muted); }
.data-table td.missing { color: var(--ink-muted); }
.data-table td.missing::before { content: '—'; color: var(--line-strong); }

.delta-controls { display: flex; flex-wrap: wrap; gap: 1rem; }
.delta-controls .field-row { margin-bottom: 0; }
.delta-track { position: relative; display: block; width: 112px; height: 9px; background: var(--surface-sunken); border: 1px solid var(--line); }
.delta-fill { position: absolute; top: 0; height: 100%; }
.delta-bar-cell { white-space: nowrap; }
.delta-magnitude { font-size: 0.74rem; color: var(--ink-muted); margin-left: 0.4rem; font-variant-numeric: tabular-nums; }
/* The signed result and its visual scale are the purpose of this table, so they
   precede the supporting raw values. A bounded, wrapping metric label keeps all
   three core columns visible when the centre workspace is narrow. */
.delta-data-table .delta-column-metric {
  min-width: 7rem;
  width: 15rem;
  max-width: 15rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.delta-data-table tbody .delta-column-metric { z-index: 1; }
.delta-data-table thead .delta-column-metric {
  left: 0;
  z-index: 2;
}
.delta-data-table .delta-column-difference,
.delta-data-table .delta-column-a,
.delta-data-table .delta-column-b { text-align: right; }

.table-heading { margin-top: 1rem; }
/* The shared metric table is far wider than any viewport and scrolls inside this
   box. `contain: paint` keeps that scrolling contained: without it the table's
   width leaks into the document's scroll area, and the whole page scrolls
   sideways over several thousand pixels of blank space. Paint containment says
   what this box already means, that nothing inside it is drawn outside it. */
.table-scroll { overflow-x: auto; max-width: 100%; contain: paint; }
.data-table { border-collapse: collapse; font-size: 0.82rem; min-width: 100%; }
.table-caption { color: var(--ink-muted); margin: 0 0 0.35rem; font-size: 0.8rem; }
.data-table th, .data-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table thead th { background: var(--surface-sunken); position: sticky; top: 0; text-align: left; }
/* A heading over a column of right-aligned numbers has to be right-aligned too,
   and the rule above is specific enough to need saying explicitly. */
.data-table thead th.numeric { text-align: right; }
.data-table tbody th { position: sticky; left: 0; background: var(--surface); text-align: left; }
.data-table tbody tr:hover td, .data-table tbody tr:hover th { background: var(--accent-soft); }
.sort-button { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; padding: 0; text-align: left; }
.sort-arrow { color: var(--accent); }

/* The center column keeps workflow content in document flow. These small
   disclosures explain the relocated panels without recreating a tall sidebar. */
.workflow-help,
.provenance-disclosure { margin: 0 0 0.65rem; }
.workflow-help summary,
.provenance-disclosure summary { cursor: pointer; color: var(--ink-muted); font-size: 0.82rem; }
.workflow-help p { margin: 0.45rem 0 0; max-width: 72ch; font-size: 0.82rem; color: var(--ink-muted); }
.provenance-disclosure > #provenance { margin-top: 0.65rem; }

/* Long meta.json field names would break a character at a time inside the
   provenance list, so this nested disclosure gives them the full card width. */
.convention-details { margin-top: 0.5rem; font-size: 0.8rem; }
.convention-details summary { cursor: pointer; color: var(--ink-muted); }
.convention-details ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.convention-details li { margin-bottom: 0.35rem; }

.provenance-list { margin: 0; font-size: 0.8rem; }
.provenance-list dt { color: var(--ink-muted); margin-top: 0.5rem; }
.provenance-list dt:first-child { margin-top: 0; }
.provenance-list dd { margin: 0; overflow-wrap: anywhere; }

/* Panel design ---------------------------------------------------------- */

.panel-workflow > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.panel-workflow[open] > summary { margin-bottom: 0.75rem; }

/* The card is a long form followed by a long result, so it reads as one column
   of prose width rather than spreading a checkbox across a wide screen. */
.panel-help { margin: 0.5rem 0 0.75rem; }
.panel-help summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.panel-help-grid {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 0.5rem;
  max-width: 130ch;
}
.panel-help-grid h3 { margin-top: 0; font-size: 0.9rem; }
.panel-help-grid p { max-width: 62ch; font-size: 0.85rem; color: var(--ink-muted); }

.panel-config {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  margin-bottom: 1rem;
}
.panel-config > .button-row { grid-column: 1 / -1; margin-bottom: 0; }
.panel-settings-heading { grid-column: 1 / -1; margin: 0; }
.panel-config .field-row { margin-bottom: 0.4rem; }
.panel-config .flag-filter { margin: 0; }
.panel-disabled-label { color: var(--ink-muted); }

.panel-chips { margin-top: 0.6rem; }
.panel-chips h4 { margin-bottom: 0.25rem; }
.panel-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.panel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.2rem 0.1rem 0.55rem;
  background: var(--surface-sunken);
  font-size: 0.82rem;
}
.panel-ranges { margin-top: 0.6rem; display: grid; gap: 0.5rem; }
.panel-ranges h4 { margin: 0; }

/* A grid track defaults to max-content, so without this the scheme and coverage
   tables push the whole document sideways instead of scrolling inside their own
   box, the same trap `.table-scroll` exists to close. */
.panel-result { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.panel-result > * { min-width: 0; }
.panel-result:empty { display: none; }
.panel-summary { margin: 0; overflow-wrap: anywhere; }
.panel-coverage h3, .panel-genes h3, .panel-matrix h3 { margin-top: 0; }

/* One card per gene: the identifier and its two actions on a line that wraps,
   then the reasons underneath, so a long product description cannot push the
   buttons out of reach at a narrow viewport. */
.panel-gene-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
.panel-gene {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  background: var(--surface);
}
.panel-gene-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem 0.6rem;
}
.panel-gene-title { margin: 0; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.panel-gene-product { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.panel-gene-line { margin: 0.25rem 0 0; font-size: 0.83rem; }
.panel-gene-details { margin-top: 0.3rem; font-size: 0.83rem; }
.panel-gene-details summary { cursor: pointer; color: var(--accent); }
.panel-reason-list { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; }
.panel-reason-list li { margin-bottom: 0.15rem; overflow-wrap: anywhere; }
.panel-gene .gene-flag { margin-bottom: 0; }
.panel-gene .gene-flag ul { margin: 0.2rem 0 0; }

.site-footer { padding: 0 1.25rem 2rem; color: var(--ink-muted); font-size: 0.82rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
/* Folding reports remain readable without creating horizontal table scrolling. */
.folding-panel { margin-top: var(--gap); min-width: 0; }
.folding-panel summary { cursor: pointer; font-size: .85rem; }
.folding-panel progress { max-width: 100%; width: 100%; }
.folding-result { margin-block: .75rem; font-size: .8rem; overflow-wrap: anywhere; }
.folding-result p { margin-block: .25rem; }
.folding-comparison { min-width: 0; margin-block: .35rem .75rem; }
.folding-alignment { max-width: 100%; white-space: pre; overflow-wrap: normal; font-size: .75rem; padding-left: 0; }
.folding-alignment-row { display: block; width: max-content; }
.folding-alignment-row > span:first-child { position: sticky; left: 0; display: inline-block; padding-left: .75rem; background: var(--surface-sunken); }
.folding-pair-change { background: var(--accent-soft); font-weight: 700; }
.folding-sequence-edit { text-decoration: underline; text-decoration-thickness: 2px; }
.rosetta-handoff { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; min-width: 0; }
.rosetta-handoff h3 { margin-top: 0; }
.rosetta-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .55rem; margin-bottom: .55rem; }
.rosetta-controls label { display: grid; gap: .2rem; color: var(--ink-muted); font-size: .82rem; min-width: 0; }
.rosetta-controls select { width: 100%; min-width: 0; }
.rosetta-link { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.rosetta-output { border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem; margin-block: .55rem; min-width: 0; }
.rosetta-output > strong { display: block; text-transform: uppercase; font-size: .78rem; margin-bottom: .35rem; }
.rosetta-output pre { max-height: 12rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Controls-column panels: collapse and reorder -------------------------- */

.panel-card { padding-top: 0.5rem; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.panel-toggle {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.25rem 0.2rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.panel-toggle:hover { background: var(--surface-sunken); }
.panel-title { overflow-wrap: anywhere; }

.panel-caret {
  flex: none;
  width: 0.7em;
  height: 0.7em;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}

/* Down when open, pointing at the content; right when closed. */
.panel-toggle[aria-expanded="false"] .panel-caret { transform: rotate(-90deg); }

.panel-controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.panel-move {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.panel-move:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.panel-move:disabled { color: var(--line-strong); cursor: not-allowed; }

.panel-collapsed { padding-bottom: 0.5rem; }
.panel-collapsed .panel-head { margin-bottom: 0; }

/* Reset confirmation ---------------------------------------------------- */

.confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(27, 39, 51, 0.45);
}

.confirm-dialog {
  width: min(28rem, 100%);
  padding: 1rem 1.15rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(27, 39, 51, 0.28);
}

.confirm-title { font-size: 1.05rem; margin: 0 0 0.4rem; }
.confirm-body { margin: 0 0 1rem; color: var(--ink-muted); }

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* The destructive answer is the only red control on screen while it is open. */
.confirm-reset {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 600;
}

.confirm-reset:hover:not(:disabled) { background: #8f1e17; border-color: #8f1e17; }

.axis-reset-row { margin-top: 0.6rem; }

/* Gene visualizer ------------------------------------------------------- */

.gene-view-heading { margin-bottom: 0.4rem; }
.gene-view-product { color: var(--ink-muted); font-size: 0.85rem; }

.gene-view-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 8rem;
  margin-bottom: 0.4rem;
  overflow: visible;
}

.gene-view-ruler line { stroke: var(--line-strong); stroke-width: 1; }
.gene-view-ruler text { fill: var(--ink-muted); font-size: 8px; font-family: var(--font); }
.gene-view-cds { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.gene-view-join { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.gene-view-codon-start { fill: var(--accent); }
.gene-view-codon-stop { fill: var(--danger); }
.gene-view-arrow { fill: var(--accent); }
.gene-view-zero { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 2 2; }
.gene-view-tss line { stroke: #6b4f9e; stroke-width: 1.4; }
.gene-view-tss circle { fill: #6b4f9e; }
.gene-view-marker-supplementary circle { fill-opacity: 0.62; }
.gene-view-annotation { outline: none; }
.gene-view-codon.gene-view-annotation:hover,
.gene-view-codon.gene-view-annotation.is-hit-hovered,
.gene-view-codon.gene-view-annotation:focus-visible {
  stroke: var(--focus);
  stroke-width: 2.5;
}
.gene-view-marker.gene-view-annotation:hover circle,
.gene-view-marker.gene-view-annotation:focus-visible circle {
  stroke: var(--focus);
  stroke-width: 2;
}
.gene-view-marker.gene-view-annotation:hover line,
.gene-view-marker.gene-view-annotation:focus-visible line { stroke: var(--focus); stroke-width: 2; }

/* The start-site layer's own show/hide. Compact enough to sit between the
   picture and the legend in a side rail: the label is the row, so the words are
   part of the hit target, and it wraps rather than pushing the rail wider. */
.gene-view-layer {
  align-items: center;
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.gene-view-layer input { margin-top: 0; }

.gene-view-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin: 0 0 0.4rem;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.gene-view-key {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  vertical-align: -0.05em;
}

.gene-view-key-cds { background: var(--accent-soft); border: 1px solid var(--accent); }
.gene-view-key-start { background: var(--accent); }
.gene-view-key-stop { background: var(--danger); }
.gene-view-key-tss { background: #6b4f9e; border-radius: 50%; }
.gene-view-key-neighbor-site { background: linear-gradient(90deg, transparent 40%, #882255 40% 60%, transparent 60%); border-radius: 0; }
.gene-view-key-join { background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 6px); }

.gene-view-scale { font-size: 0.78rem; }

.gene-view-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.6rem;
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
}

.gene-view-facts dt { color: var(--ink-muted); }
.gene-view-facts dd { margin: 0; }
.gene-view-sites summary { font-weight: 600; font-size: 0.82rem; }
.gene-view-site-rows {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--ink-muted);
}
.gene-view-site-rows li { overflow-wrap: anywhere; }
.gene-view-site-id { font-family: var(--mono); color: var(--ink); }

/* Overlapping genes (OG) ------------------------------------------------- */

:root {
  /* The OG strand relations, matching OVERLAP_CLASS_COLORS in ui/colors.js. */
  --og-same: #009e73;
  --og-opposite: #e69f00;
  --og-unknown: #687583;
  --og-shared: #1b2733;
}

.gene-view-og-badge {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px solid var(--og-same);
  border-radius: 999px;
  background: #e7f5f0;
  color: #0a6049;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.05em;
}

.gene-view-og-badge.none {
  border-color: var(--line-strong);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.gene-view-og-badge.unavailable {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink-muted);
}

.gene-view-overlap-tail {
  stroke: var(--og-unknown);
  stroke-width: 3;
  stroke-linecap: butt;
}
.gene-view-overlap-with .gene-view-overlap-tail { stroke: var(--og-same); }
.gene-view-overlap-against .gene-view-overlap-tail { stroke: var(--og-opposite); }
.gene-view-overlap-arrow {
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: 1;
}
.gene-view-overlap-with { color: var(--og-same); }
.gene-view-overlap-against { color: var(--og-opposite); }

.gene-view-overlap.gene-view-annotation:hover .gene-view-overlap-tail,
.gene-view-overlap.gene-view-annotation.is-hit-hovered .gene-view-overlap-tail,
.gene-view-overlap.gene-view-annotation:focus-visible .gene-view-overlap-tail {
  stroke-width: 5;
  outline: none;
}

.gene-view-key-overlap { background: var(--og-same); }

.gene-view-overlap-list { margin-top: 0.5rem; }
.gene-view-overlap-heading {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.82rem;
}

.gene-view-partners {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.76rem;
  color: var(--ink-muted);
}

.gene-view-partners li { min-width: 0; overflow-wrap: anywhere; }
.gene-view-partner-note { color: var(--ink-muted); }
.gene-view-open-partner { margin-left: 0.35rem; }
.gene-view-overlap-bases { width: 100%; min-width: 0; margin-top: 0.25rem; }
.gene-view-overlap-bases summary { cursor: pointer; font-weight: 600; }
.gene-view-overlap-base-block {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.3rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  overflow-x: auto;
}
.gene-view-overlap-base-block p { margin: 0 0 0.2rem; }
.gene-view-overlap-base-grid {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content;
  column-gap: 0.35rem;
  width: max-content;
  min-width: 100%;
  align-items: baseline;
}
.gene-view-overlap-base-grid code {
  white-space: pre;
}
.gene-view-overlap-base-label { font-family: var(--mono); }

.chromosome-overlap-row {
  display: flex;
  align-items: baseline;
  min-height: 1.9rem;
}

.chromosome-overlap-steppers { flex: 0 0 auto; min-height: 1.9rem; }

.chromosome-overlap-hint {
  position: fixed;
  z-index: 2;
  width: min(20rem, calc(100% - 1rem));
  overflow: auto;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.35;
  pointer-events: none;
  overflow-wrap: anywhere;
}

.overlap-filter { margin-bottom: 0.5rem; }

/* Specific enough to beat `.gene-sequence-labels text`, which is 11px in the
   body face: at that size a locus tag is about 7.2px a character and runs off
   the left of the strip. The monospace advance at 9px is what
   PARTNER_LABEL_CHARS budgets for. */
.gene-sequence-labels text.gene-sequence-partner-label {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--ink-muted);
}
.gene-sequence-labels text.gene-sequence-partner-orientation {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--ink-muted);
}

.gene-sequence-partner-bar {
  fill: var(--surface-sunken);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.gene-sequence-partner-shared-tail { stroke-width: 3; stroke-linecap: butt; }
.gene-sequence-partner-same .gene-sequence-partner-shared-tail { stroke: var(--og-same); }
.gene-sequence-partner-opposite .gene-sequence-partner-shared-tail { stroke: var(--og-opposite); }
.gene-sequence-partner-unknown .gene-sequence-partner-shared-tail { stroke: var(--og-unknown); }

.gene-sequence-partner-arrow {
  fill: var(--surface);
  stroke-width: 1.2;
}
.gene-sequence-partner-same .gene-sequence-partner-arrow { stroke: var(--og-same); }
.gene-sequence-partner-opposite .gene-sequence-partner-arrow { stroke: var(--og-opposite); }
.gene-sequence-partner-continues { fill: var(--og-shared); }
.gene-sequence-partner-base {
  fill: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  pointer-events: none;
}

.gene-sequence-partner:hover .gene-sequence-partner-bar,
.gene-sequence-partner:focus-visible .gene-sequence-partner-bar {
  stroke: var(--og-shared);
  stroke-width: 1.6;
  outline: none;
}

/* Protein lanes under partner and upstream-context rows: one cell per codon
   in the feature's own frame. A partial codon is clipped by the shown
   sequence, so it is outlined dashed rather than drawn as a whole cell. */
.gene-sequence-labels text.gene-sequence-lane-label {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--ink-muted);
}
.gene-sequence-coding-residue rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 0.5; }
.gene-sequence-coding-alt rect { fill: var(--surface-sunken); }
.gene-sequence-coding-partial rect { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 2 2; }
.gene-sequence-coding-residue-letter { fill: var(--ink); font-family: var(--mono); font-weight: 600; pointer-events: none; }
.gene-sequence-coding-stop .gene-sequence-coding-residue-letter { fill: var(--danger); }

/* Annotated genes inside the shown upstream sequence. Coding context is a
   pale blue; known noncoding context is neutral grey; a pseudogene or an
   unclassified biotype keeps a dashed outline and its own label. */
.gene-sequence-neighbour-bar { stroke-width: 1; }
.gene-sequence-neighbour-coding .gene-sequence-neighbour-bar { fill: #e8f0fa; stroke: #3f6fa8; }
.gene-sequence-neighbour-noncoding .gene-sequence-neighbour-bar { fill: #e6e7e9; stroke: #7d838c; }
.gene-sequence-neighbour-pseudogene .gene-sequence-neighbour-bar,
.gene-sequence-neighbour-unclassified .gene-sequence-neighbour-bar {
  fill: var(--surface-sunken); stroke: var(--line-strong); stroke-dasharray: 3 2;
}
.gene-sequence-neighbour-base { fill: var(--ink); font-family: var(--mono); font-weight: 700; pointer-events: none; }
.gene-sequence-neighbour-noncoding .gene-sequence-neighbour-base { fill: var(--ink-muted); }
.gene-sequence-neighbour-direction { stroke: var(--ink-muted); stroke-width: 1; }
.gene-sequence-neighbour-arrow { fill: var(--ink-muted); }
.gene-sequence-neighbour:hover .gene-sequence-neighbour-bar,
.gene-sequence-neighbour:focus-visible .gene-sequence-neighbour-bar {
  stroke: var(--og-shared);
  stroke-width: 1.6;
  outline: none;
}

/* Published start sites further upstream than the shown sequence: a passive
   left chevron with its count in the gutter, and the same words in text. */
.gene-sequence-upstream-hidden-arrow { fill: #6b4f9e; }
.gene-sequence-upstream-hidden-count { fill: var(--ink); font-family: var(--mono); font-size: 9px; }
.gene-sequence-upstream-hidden:focus-visible .gene-sequence-upstream-hidden-arrow,
.gene-sequence-upstream-hidden:hover .gene-sequence-upstream-hidden-arrow {
  stroke: var(--focus);
  stroke-width: 2;
  outline: none;
}
.gene-sequence-upstream-cue { margin: 0.25rem 0 0; overflow-wrap: anywhere; }
.gene-sequence-context-list summary { font-weight: 600; font-size: 0.82rem; }
.gene-view-upstream-context { margin-top: 0.5rem; min-width: 0; overflow-wrap: anywhere; }
.gene-view-upstream-context .gene-neighbour-noncoding {
  color: var(--ink-muted); background: var(--surface-sunken);
  border-left: 3px solid var(--line-strong); padding: 4px 8px;
}
.gene-view-partner-protein { overflow-wrap: anywhere; }

.gene-sequence-partners-list summary { font-weight: 600; font-size: 0.82rem; }
.gene-sequence-partner-rows {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--ink-muted);
  list-style: disc;
}
.gene-sequence-partner-rows li { overflow-wrap: anywhere; }

/* Sequence close-up, at the foot of the chromosome tab ------------------ */

.chromosome-sequence { margin-top: 0.75rem; }
.gene-sequence-figure { display: grid; gap: 0.5rem; }
.gene-sequence-facts { color: var(--ink-muted); font-size: 0.85rem; font-weight: normal; }
.gene-sequence-strip {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.gene-sequence-strip.is-dragging { cursor: grabbing; }
.gene-sequence-strip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gene-sequence-upstream-control {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
}
.gene-sequence-upstream-control select { min-height: 2rem; max-width: 8rem; }
.gene-sequence-svg { display: block; width: 100%; height: auto; font-family: var(--mono); }
.gene-sequence-labels text { fill: var(--ink-muted); font-family: var(--font); font-size: 11px; }
.gene-sequence-ruler line { stroke: var(--line-strong); stroke-width: 1; }
.gene-sequence-ruler text { fill: var(--ink-muted); font-family: var(--font); font-size: 9px; }
.gene-sequence-upstream rect { fill: var(--surface-sunken); stroke: var(--line); stroke-width: 0.5; }
.gene-sequence-upstream text { fill: var(--ink-muted); }
.gene-sequence-codon text { fill: var(--ink); }
.gene-sequence-bases, .gene-sequence-recoded { fill: var(--surface); stroke: var(--line-strong); stroke-width: 0.6; }
.gene-sequence-codon-alt .gene-sequence-bases,
.gene-sequence-codon-alt .gene-sequence-recoded { fill: var(--accent-soft); }
.gene-sequence-codon-start .gene-sequence-bases,
.gene-sequence-codon-start .gene-sequence-recoded,
.gene-sequence-start-mark { fill: var(--accent); }
.gene-sequence-codon-stop .gene-sequence-bases,
.gene-sequence-codon-stop .gene-sequence-recoded,
.gene-sequence-stop-mark { fill: var(--danger); }
/* Only the base letters lie on the solid start and stop cells, so only they
   read white. Selecting every `text` in those cells also caught the residue
   letter and the residue number, which sit on the white protein cell below and
   carry their own colours: the first codon's "M" and its "1" were white on
   white. Keying the rule on the letter classes is what keeps the two rows apart. */
.gene-sequence-codon-start .gene-sequence-letter-original,
.gene-sequence-codon-start .gene-sequence-letter-recoded,
.gene-sequence-codon-stop .gene-sequence-letter-original,
.gene-sequence-codon-stop .gene-sequence-letter-recoded { fill: #fff; }
/* A codon the scheme changed is amber in the recoded row, a reassigned terminal
   stop included, so its recoded letters come back to dark ink. */
.gene-sequence-changed .gene-sequence-recoded, .gene-sequence-change-tick { fill: #f6d98a; }
.gene-sequence-changed .gene-sequence-letter-recoded { fill: var(--ink); }
.gene-sequence-change-mark { fill: var(--ink); }
.gene-sequence-residue { fill: var(--surface); stroke: var(--line); stroke-width: 0.5; }
.gene-sequence-residue-letter { fill: var(--ink); font-weight: 600; }
.gene-sequence-codon-stop .gene-sequence-residue-letter { fill: var(--danger); }
.gene-sequence-residue-number { fill: var(--ink-muted); font-family: var(--font); }
.gene-sequence-selected rect { stroke: var(--focus); stroke-width: 2; }
.gene-sequence-selected-mark { fill: none; stroke: var(--focus); stroke-width: 2; }
.gene-sequence-upstream-bar { fill: var(--surface-sunken); stroke: var(--line); }
.gene-sequence-cds-bar { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.gene-sequence-junctions line { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.gene-sequence-junctions text { fill: var(--ink-muted); font-family: var(--font); }
.gene-sequence-selection { margin: 0; font-size: 0.85rem; }

/* Marker layers above the ruler. The same purple the gene visualizer and the
   chromosome tick row use, so one layer reads as one layer in all three. A head
   sits over the base its own published coordinate names, and the outlined
   column underneath is what ties the two together: the outline is a ring rather
   than a fill so the letter beneath it stays legible. */
.gene-sequence-markers .gene-sequence-marker-head { fill: #6b4f9e; }
.gene-sequence-markers .gene-sequence-marker-span {
  fill: #6b4f9e;
  fill-opacity: 0.35;
  stroke: #6b4f9e;
  stroke-width: 1;
}
.gene-sequence-markers .gene-sequence-marker-stem { stroke: #6b4f9e; stroke-width: 1.2; }
.gene-sequence-markers .gene-sequence-marker-column {
  fill: none;
  stroke: #6b4f9e;
  stroke-width: 1.6;
}
/* A head sharing drawn space with another is outlined, so the picture says a
   cluster is there rather than leaving one head to stand for several. */
.gene-sequence-marker-shared .gene-sequence-marker-head { stroke: var(--surface); stroke-width: 1; }
.gene-sequence-marker-supplementary .gene-sequence-marker-head,
.gene-sequence-marker-supplementary .gene-sequence-marker-span { fill-opacity: 0.62; }
.gene-sequence-annotation { outline: none; }
.gene-sequence-codon.gene-sequence-annotation:hover .gene-sequence-bases,
.gene-sequence-codon.gene-sequence-annotation:focus-visible .gene-sequence-bases,
.gene-sequence-codon.gene-sequence-annotation:hover .gene-sequence-recoded,
.gene-sequence-codon.gene-sequence-annotation:focus-visible .gene-sequence-recoded,
.gene-sequence-annotation.gene-sequence-start-mark:hover,
.gene-sequence-annotation.gene-sequence-start-mark.is-hit-hovered,
.gene-sequence-annotation.gene-sequence-start-mark:focus-visible,
.gene-sequence-annotation.gene-sequence-stop-mark:hover,
.gene-sequence-annotation.gene-sequence-stop-mark.is-hit-hovered,
.gene-sequence-annotation.gene-sequence-stop-mark:focus-visible {
  stroke: var(--focus);
  stroke-width: 2.5;
}
.gene-sequence-marker.gene-sequence-annotation:hover .gene-sequence-marker-head,
.gene-sequence-marker.gene-sequence-annotation:focus-visible .gene-sequence-marker-head,
.gene-sequence-marker.gene-sequence-annotation:hover .gene-sequence-marker-span,
.gene-sequence-marker.gene-sequence-annotation:focus-visible .gene-sequence-marker-span,
.gene-sequence-marker.gene-sequence-annotation:hover .gene-sequence-marker-column,
.gene-sequence-marker.gene-sequence-annotation:focus-visible .gene-sequence-marker-column {
  stroke: var(--focus);
  stroke-width: 2.5;
}

/* The marker layer's own show/hide, between the strip and its readout. */
.gene-sequence-marker-row:empty { display: none; }
.gene-sequence-layer {
  align-items: center;
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.gene-sequence-layer input { margin-top: 0; }
.gene-sequence-sites summary { font-weight: 600; font-size: 0.82rem; }

@media (prefers-reduced-motion: reduce) {
  .panel-caret { transition: none; }
}

/* A finger needs more than a pointer does; the move controls grow on touch. */
@media (pointer: coarse) {
  .panel-move { width: 2.4rem; height: 2.4rem; }
}

/* Data Sources: the section under Colour by, and the data selection peek. */
.data-sources-row { align-items: flex-start; }
.data-sources { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem 0.6rem; background: var(--surface); }
.data-sources-summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; }
.data-sources-list, .data-sources-actions, .data-sources-toggles { font-size: 0.82rem; }
.data-sources-toggles { margin: 0.3rem 0; }
.data-sources-annotation-explanation {
  width: 100%; max-width: none; margin: 0.35rem 0 0.5rem; color: var(--ink-muted);
  font-size: 0.82rem; line-height: 1.45; overflow-wrap: anywhere;
}
.data-sources-list { list-style: none; margin: 0.3rem 0; padding: 0; max-height: 11rem; overflow: auto; }
.data-sources-list li { padding: 0.15rem 0; border-bottom: 1px dotted var(--line); }
.data-sources-type { color: var(--ink-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 0 !important; }
/* Why a kind of measurement reads one dataset while several are included. */
.data-sources-note { color: var(--ink-muted); font-size: 0.78rem; line-height: 1.35; border-bottom: 0 !important; }
.data-sources-acc { font-weight: 600; }
.data-sources-label, .data-sources-empty { color: var(--ink-muted); font-size: 0.85rem; }
.data-sources-actions { margin-top: 0.3rem; }
.data-sources-hide { flex: none; }

.peek-backdrop {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(27, 39, 51, 0.55);
}
.peek {
  display: flex; flex-direction: column; width: min(1360px, 96vw); height: min(900px, 92vh);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); color: var(--ink); font-size: 0.85rem;
}
.peek-head { display: flex; gap: 0.75rem; align-items: center; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); }
.peek-title { font-size: 1rem; margin: 0; margin-right: auto; }
.peek-tabs { display: flex; gap: 0.4rem; }
@media (max-width: 600px) {
  .peek-head { flex-wrap: wrap; }
  .peek-title { flex: 1; }
  .peek-close { order: 1; }
  .peek-tabs { order: 2; flex: 1 0 100%; flex-wrap: wrap; }
}
.peek-bar { flex-shrink: 0; max-height: 25vh; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--surface-sunken); }
.peek-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.peek-filter { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.4rem; }
.peek-filter input[type="number"] { width: 4.2rem; }
.peek-filter input[type="search"] { width: 9rem; }
.peek-filter-remove { border: 0; background: none; padding: 0 0.2rem; font-size: 1rem; line-height: 1; color: var(--ink-muted); cursor: pointer; }
.peek-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; padding: 0.4rem 0.9rem; border-bottom: 1px solid var(--line); color: var(--ink-muted); font-size: 0.8rem; }
.peek-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 370px; grid-template-rows: minmax(0, 1fr) auto; }
.peek-list { grid-row: 1; grid-column: 1; min-width: 0; overflow: auto; border-right: 1px solid var(--line); }
.peek-side { grid-row: 1; grid-column: 2; overflow: auto; padding: 0.75rem 0.9rem; }
.peek-side h3 { font-size: 0.95rem; margin: 0 0 0.3rem; }
.peek-side h4 { font-size: 0.8rem; margin: 0.9rem 0 0.3rem; color: var(--ink-muted); }
.peek-foot { grid-row: 2; grid-column: 1 / -1; display: flex; gap: 0.6rem; align-items: center; justify-content: flex-end; padding: 0.5rem 0.9rem; border-top: 1px solid var(--line); }
.peek-count { margin-right: auto; color: var(--ink-muted); }
@media (max-width: 1320px) {
  .peek-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 3fr) auto minmax(0, 2fr); }
  .peek-list { border-right: 0; }
  .peek-side { grid-row: 3; grid-column: 1; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .data-selection-backdrop { padding: 0; }
  .data-selection { width: 100%; height: 100dvh; border-radius: 0; }
  .data-selection .peek-body {
    grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto;
  }
  .data-selection .peek-side { grid-row: 2; }
  .data-selection .peek-foot { grid-row: 3; }
}

.ds-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.3rem; vertical-align: -1px; }
.ds-swatch-hatched { border-radius: 2px; border: 1px solid #cfd4da; background: repeating-linear-gradient(135deg, #fff, #fff 2px, #cfd4da 2px, #cfd4da 4px); }
.ds-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 940px; table-layout: fixed; }
.ds-table th, .ds-table td { padding: 0.3rem 0.4rem; text-align: left; vertical-align: middle; border-bottom: 1px solid #edf0f2; overflow-wrap: anywhere; }
.ds-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); font-weight: 600; font-size: 0.78rem; color: var(--ink-muted); border-bottom: 1px solid var(--line); vertical-align: bottom; }
.ds-table thead th:nth-child(1) { width: 30px; }
.ds-table thead th:nth-child(3), .ds-table thead th:nth-child(4), .ds-table thead th:nth-child(5) { width: 112px; }
.ds-table thead th:nth-child(6) { width: 104px; }
.ds-table thead th:nth-child(7) { width: 100px; }
.ds-table thead th:nth-child(8) { width: 104px; }
.ds-table thead th:nth-child(9) { width: 128px; }
.ds-table tr.ds-group th { background: var(--surface-sunken); font-size: 0.85rem; border-top: 1px solid var(--line); }
.ds-table tr.ds-subgroup th { background: #fafbfc; font-size: 0.78rem; color: var(--ink-muted); padding-left: 1.2rem; }
.ds-group-rule { font-weight: 400; color: var(--ink-muted); }
.ds-group-n { font-weight: 400; color: var(--ink-muted); float: right; }
.ds-table tr.ds-selected td { background: var(--accent-soft); }
.ds-name-top { display: flex; gap: 0.25rem; align-items: flex-start; }
.ds-name-id { flex: 1; min-width: 0; }
.ds-name-id .ds-chip { max-width: 100%; white-space: normal; }
.ds-acc { font-weight: 600; }
.ds-label { display: block; color: var(--ink-muted); font-size: 0.8rem; }
.ds-chip { display: inline-block; border: 1px solid var(--line); border-radius: 10px; padding: 0 0.45rem; font-size: 0.72rem; color: var(--ink-muted); background: var(--surface); margin: 1px 2px 1px 0; white-space: nowrap; }
.ds-chip-array { border-style: dashed; }
.ds-chip-wrap { white-space: normal; }
.ds-chip-active { border-color: var(--accent); color: var(--accent); }
.ds-two { font-size: 0.8rem; line-height: 1.3; }
.ds-two small, .ds-where { display: block; color: var(--ink-muted); font-size: 0.72rem; margin-top: 0.1rem; }
.ds-missing { display: inline-block; white-space: nowrap; font-size: 0.72rem; color: var(--ink-muted); padding: 1px 0.4rem; border: 1px solid #cfd4da; border-radius: 3px; background: repeating-linear-gradient(135deg, #fff, #fff 3px, #eceff2 3px, #eceff2 6px); }
.ds-none { color: var(--ink-muted); font-size: 0.8rem; }
.ds-info { flex: none; width: 22px; height: 22px; border-radius: 50%; padding: 0; line-height: 1; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-style: italic; font-family: Georgia, serif; cursor: pointer; }
.ds-info:hover { background: var(--accent-soft); border-color: var(--accent); }
.ds-track { display: block; }
.ds-column-guides {
  position: fixed; pointer-events: none; overflow: hidden; z-index: 3;
  stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.35;
}
.ds-empty { padding: 1.2rem; color: var(--ink-muted); }
.ds-study-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0.6rem 0.9rem 0.9rem; font-size: 0.78rem; color: var(--ink-muted); border-top: 1px solid var(--line); }
.ds-study-legend-title { font-weight: 600; width: 100%; }
/* A compendium's single row, and the grid peek stacked over the selection. */
.ds-compendium td.ds-name { padding-bottom: 0.5rem; }
.ds-compendium .ds-label { display: block; margin: 0.15rem 0 0.35rem; color: var(--ink-muted); }
.ds-choose { margin-left: 0; }
.data-sources-compendium { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

/* The stacked peek sits above the one it was opened from. */
.peek-backdrop-stacked { z-index: 60; background: rgba(27, 39, 51, 0.35); }
.peek.condition-grid { width: min(1040px, 94vw); height: min(760px, 88vh); }
.cg-note { margin: 0; padding: 0.5rem 0.9rem 0; color: var(--ink-muted); font-size: 0.8rem; }
.cg-bar { display: flex; gap: 0.5rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--line); }
.cg-body { flex: 1; min-height: 0; overflow: auto; padding: 0.4rem 0.9rem 0.9rem; }
.cg-grid { display: flex; flex-direction: column; }
/* Compound down the side, its doses across; rows are ragged because each
   compound was tested at its own number of doses and padding would invent
   cells that no experiment ran. */
.cg-row { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0.5rem; align-items: start; padding: 0.35rem 0; border-top: 1px solid var(--line); }
.cg-row:first-child { border-top: 0; }
.cg-rowhead { display: flex; gap: 0.4rem; align-items: baseline; }
.cg-rowhead input { margin: 0; flex: 0 0 auto; }
.cg-compound { overflow-wrap: anywhere; font-weight: 600; font-size: 0.8rem; }
.cg-cells { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cg-cell { display: inline-flex; gap: 0.3rem; align-items: center; padding: 0.2rem 0.45rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.78rem; cursor: pointer; background: var(--surface); }
.cg-cell input { margin: 0; }
.cg-cell.cg-on { border-color: var(--accent, #2a78d6); background: var(--surface-sunken); }
.cg-dose { white-space: nowrap; }
.cg-row-loose .cg-dose { white-space: normal; }
@media (max-width: 700px) {
  .cg-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

.ds-cmp-row { display: grid; grid-template-columns: 104px 1fr; gap: 0.4rem; align-items: center; padding: 0.1rem 0; font-size: 0.8rem; }
.ds-cmp-who { overflow-wrap: anywhere; color: var(--ink-muted); }
.ds-cmp-who small { display: block; font-size: 0.7rem; }
@media (max-width: 420px) {
  .ds-cmp-row { grid-template-columns: minmax(0, 1fr); }
  .ds-cmp-who:empty { display: none; }
}
.ds-spread { color: var(--ink-muted); font-size: 0.8rem; margin: 0.1rem 0 0 110px; }
.ds-kv { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.ds-kv th, .ds-kv td { border-bottom: 1px solid #edf0f2; padding: 0.3rem 0.4rem; text-align: left; vertical-align: top; }
.ds-kv th { width: 92px; color: var(--ink-muted); font-weight: 600; }
.ds-kv q { display: block; color: var(--ink-muted); font-style: italic; }
.ds-cite { margin: 0.4rem 0; font-size: 0.8rem; }
/* Source-unit diagnostics: each source owns its scale, with numeric equivalents. */
.ds-distributions { margin: 0.55rem 0; padding: 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-sunken); }
.ds-distributions > summary { cursor: pointer; font-size: 0.82rem; font-weight: 650; }
.ds-distributions summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ds-distribution-body { min-width: 0; overflow-wrap: anywhere; }
.ds-distribution-body p { margin: 0.4rem 0; font-size: 0.75rem; line-height: 1.45; }
.ds-distribution-source { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.ds-distribution-source h5, .peek-side .ds-distribution-source h5 { font-size: 0.8rem; margin: 0 0 0.4rem; }
.ds-distribution-population { margin: 0.6rem 0; }
.ds-distribution-population h6 { font-size: 0.74rem; margin: 0; }
.ds-distribution-population svg { display: block; width: 100%; height: 32px; }
.ds-distribution-whisker { stroke: var(--ink-muted); stroke-width: 1.5; }
.ds-distribution-box { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.ds-distribution-median { stroke: var(--accent); stroke-width: 2.5; }
.ds-distribution-numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; margin: 0; font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.ds-distribution-numbers dt { color: var(--ink-muted); }
.ds-distribution-numbers dd { margin: 0; }
.ds-distribution-scale, .ds-distribution-signs { color: var(--ink-muted); }
.ds-distribution-provenance { font-size: 0.74rem; margin-top: 0.6rem; }
.ds-distribution-provenance > summary { cursor: pointer; font-weight: 600; }
.ds-agreement-heading { padding-top: 0.7rem; border-top: 1px solid var(--line); }
.ds-agreement-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.ds-agreement-select { display: grid; gap: 0.15rem; color: var(--ink-muted); font-size: 0.75rem; }
.ds-agreement-select select { width: 100%; min-width: 0; }
.ds-agreement-source {
  margin-top: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-sunken); overflow-wrap: anywhere;
}
.ds-agreement-source h5, .peek-side .ds-agreement-source h5 {
  margin: 0 0 0.25rem; color: var(--ink); font-size: 0.78rem;
}
.ds-agreement-source p { margin: 0.25rem 0; font-size: 0.76rem; line-height: 1.4; }
.ds-agreement-range, .ds-agreement-pair { font-variant-numeric: tabular-nums; }
.ds-agreement-pair {
  margin: 0.55rem 0; padding: 0.45rem 0.55rem; border-left: 3px solid var(--accent);
  background: var(--accent-soft); font-size: 0.8rem; line-height: 1.4;
}
.ds-agreement-caveat { margin-top: 0.3rem; font-size: 0.74rem; color: var(--ink-muted); }
.ds-agreement-caveat summary { cursor: pointer; font-weight: 600; }
.ds-agreement-caveat p { overflow-wrap: anywhere; }
.ds-agreement-sample-pairs, .ds-agreement-limitations ul { margin: 0.3rem 0; padding-left: 1.1rem; }
.ds-agreement-sample-pairs li, .ds-agreement-limitations li { margin: 0.25rem 0; }
.ds-agreement-responses { margin: 0.35rem 0; padding-left: 1.1rem; }
.ds-agreement-responses li { margin: 0.45rem 0; font-size: 0.76rem; line-height: 1.4; }
.ds-agreement-responses strong, .ds-agreement-responses span { display: block; }
.ds-agreement-error { padding: 0.5rem; border: 1px solid var(--danger, #b42318); border-radius: var(--radius); }
.ds-agreement-error p { margin-top: 0; }
.ds-agreement-no-threshold { padding-bottom: 0.5rem; }

@media (min-width: 700px) {
  .ds-agreement-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Two-thumb range slider: two native range inputs over one track, a filled bar between. */
.range-slider { position: relative; height: 1.6rem; margin: 0.35rem 0 0.15rem; }
.range-slider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px;
  transform: translateY(-50%); border-radius: 2px; background: var(--line);
}
.range-slider-fill {
  position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
  border-radius: 2px; background: var(--accent);
}
.range-slider-thumb {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.range-slider-thumb::-webkit-slider-runnable-track { background: none; height: 100%; }
.range-slider-thumb::-moz-range-track { background: none; }
.range-slider-thumb::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px;
  margin-top: 0.3rem; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--accent); box-shadow: var(--shadow); cursor: ew-resize;
}
.range-slider-thumb::-moz-range-thumb {
  pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); cursor: ew-resize;
}
.range-slider-thumb:focus-visible { outline: none; }
.range-slider-thumb:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
.range-slider-thumb:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
.length-slider-host { max-width: 32rem; }

/* Native flanks have their own disclosure; annotation geometry never changes the sequence camera. */
.gene-neighbours { margin-top: 8px; min-width: 0; }
.gene-neighbours-content { overflow-wrap: anywhere; }
.gene-neighbours-schematic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 8px; }
.gene-neighbours-schematic > strong { text-align: center; white-space: nowrap; color: var(--ink); }
.gene-neighbours-schematic > :last-child { text-align: right; }
.gene-neighbours-side .gene-view-partners { margin-top: 4px; }
.gene-neighbours summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gene-neighbours .gene-neighbour-noncoding { color: var(--ink-muted); background: var(--surface-sunken); border-left: 3px solid var(--line-strong); padding: 4px 8px; }
.gene-neighbours .gene-neighbour-coding { color: var(--ink); }

/* Native neighbouring-site marks retain exact coordinates; lists resolve crowding. */
.neighbor-site-mark:focus-visible { outline: none; }
.neighbor-site-mark:focus-visible rect { stroke: var(--ink, #1b2733); stroke-width: 1; }
.neighbor-site-details { margin-block: 0.5rem; }
.neighbor-site-row button { margin: 0.25rem 0.35rem 0.25rem 0; }
.neighbor-site-row, .neighbor-site-provenance dd { overflow-wrap: anywhere; }
.neighbor-site-provenance dl { font-size: 0.8rem; }
.neighbor-site-provenance dt { font-weight: 600; }
.neighbor-site-provenance dd { margin: 0 0 0.35rem; }

/* Computed family intervals retain a head at small scales; exact bp stay in detail. */
.rfam-sites { min-width: 0; }
.rfam-sites .help-content { overflow-wrap: anywhere; }
.rfam-inspect { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.rfam-marker { cursor: pointer; }
.rfam-legend-swatch {
  display: inline-block; width: 16px; height: 7px; background: currentColor;
  opacity: 0.62; position: relative; margin-inline: 3px;
}
.rfam-legend-swatch::after {
  content: ''; position: absolute; top: 0; left: 5px;
  border-inline: 3px solid transparent; border-top: 10px solid currentColor;
}
.rfam-marker:focus, .rfam-marker:hover { outline: none; stroke: var(--ink); stroke-width: 2; }