/* CUTD Classical Codon Table — the Classical module's own stylesheet, loaded only by its pages (index.html: /classical/ and
   its table pages). The shared parts live in site-frame.css (fixed layer) and site-nav.css (changeable layer). */
.text-button, .inline-link { all: unset; color: var(--link); cursor: pointer; }
.text-button:hover, .inline-link:hover { text-decoration: underline; }
.text-button:focus-visible, .inline-link:focus-visible { outline: 2px solid var(--accent); }
.info-icon { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-right: 3px; border: 1px solid currentColor; border-radius: 50%; font: 600 9.5px/1 var(--cutd-font-body); vertical-align: 1.25px; }
/* icon centred on the label text */
.primary-button { height: 34px; padding: 0 16px; border: 1px solid var(--navy); border-radius: 2px; background: var(--navy); color: #fff; font-weight: 600; cursor: pointer; }
.primary-button:hover { background: #0f2738; }
.outline-button { padding: 5px 14px; border: 1px solid var(--navy); border-radius: 2px; background: #fff; color: var(--navy); cursor: pointer; }
.inline-error { margin: 6px 0 0; font-size: 13px; color: var(--err); }
/* ---------- one screen ---------- */
.screen { display: flex; flex-direction: column; }
@media (min-width: 1180px) and (min-height: 680px) {
  .home-page .screen { height: 100vh; height: 100svh; }
  .home-page .classical { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .home-page .home-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .home-page .taxon-directory { min-height: 0; overflow: auto; }
}
/* Results pages: natural height, page-level scrolling, footer right after the content.
   Empty/loading state keeps the footer at the screen bottom; under the footer of a short results page
   the leftover space takes the footer's bottom-bar colour. */
body:not(.home-page) .classical { padding-bottom: 24px; }
body:has(#empty-state:not([hidden])) .screen { flex: 1 0 auto; }
body:has(#results:not([hidden])) { min-height: 0; }
/* Table pages before their data arrives (body.table-loading is set before first paint by index.html and removed by app.js
   once a render settles): what arrives with the data keeps its final place, so nothing above the table jumps.
   The catalog part never shows on a table URL; the Data Version label and the taxon name + one lineage line take their
   space from the start; the footer waits just below the screen. (The catalog's pagination starts hidden in index.html
   and appears with the list.) */
body:not(.home-page) #home-view { display: none; }
body.table-loading:not(.home-page) #data-notice[hidden] { display: block !important; }
body.table-loading:not(.home-page) .identity-block { min-height: 43px; }
body.table-loading:not(.home-page) .screen { min-height: 100vh; min-height: 100svh; }
html:has(#results:not([hidden])) { background: #edecea; }
/* ---------- page ---------- */
/* The content box starts at the shell's left gutter on both states (2026-11-11), like Help; it keeps --page-max. */
.classical { max-width: var(--page-max); margin-inline: 0; padding: 14px 24px 12px; }
body:not(.home-page) .home-only { display: none !important; }
body.home-page .table-only { display: none !important; }
.home-page .search-label-short, body:not(.home-page) .search-label-home { display: none; }
/* Band: title + status (left) | finder + selection (right) */
/* 264 px: room for the 28 px table-page H1 (about 249 px wide) without wrapping; 250 px at 1360 px and below (26 px H1) */
.tool-band { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 0 28px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.page-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
/* H1: 26 px on the home state; 28 px on table pages (26 px at 1360 px and below), its letter tops level with the species
   name on the right. Compact band (2026-11-12): the Data Version block sits 12 px under the H1 (5 px margin + 7 px
   heading gap), and the identity block takes only the lines it needs, so the Compartment row follows the search row.
   The left column (H1, Data Version, About the data) is the taller one, so the band height does not depend on the
   lineage. */
.page-heading h1 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700; color: var(--ink); }
body:not(.home-page) .page-heading h1 { margin-bottom: 5px; font-size: 28px; }
@media (min-width: 1180px) {
  body:not(.home-page) .classical { padding-top: 8px; }
}
.home-intro { margin: 6px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
#data-notes { font-size: 13px; }
/* Data Version: a grey label, then the dataset version in bold and the update date, inside one accent bar (defaults in
   index.html repeat config/project.json data_release so the loading state has the final height). The source releases
   are in the About the data pop-up (#data-notes-releases). */
.data-notice { padding: 2px 0 2px 10px; border-left: 3px solid var(--accent); font-size: 13px; line-height: 1.36; color: var(--ink); }
.data-notice .notice-dot { display: none; }
.data-notice strong, .data-notice > span, .data-notice .dv-version, .data-notice .dv-meta { display: block; }
.data-notice strong { margin-bottom: 2px; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--muted); }
.data-notice .dv-version { margin: 0 0 2px; font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--ink); white-space: nowrap; }
#data-notes-releases { margin-top: 6px; color: var(--muted); }
#data-notes-releases:empty { display: none; }
@media (max-width: 1179px) {
  .data-notice .dv-meta { display: inline-block; white-space: nowrap; }
  .data-notice .dv-meta:last-child { display: block; }
  .data-notice .dv-meta + .dv-meta:not(:last-child)::before { content: "·"; margin: 0 .4em; }
}
.explorer { min-width: 0; }
.search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
#search-form { display: flex; align-items: center; }
#search-form label { margin-right: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.search-control { position: relative; }
#taxon-search { width: 290px; height: 34px; padding: 0 10px; border: 1px solid #84929b; border-right: 0; border-radius: 2px 0 0 2px; background: #fff; color: var(--ink); font: inherit; }
#search-form .primary-button { border-radius: 0 2px 2px 0; }
.suggestion-count { position: absolute; left: 0; top: calc(100% + 2px); z-index: 31; width: max(100%, 380px); padding: 3px 10px; border: 1px solid var(--rule); border-bottom: 0; background: #f3f6f8; font-size: 11.5px; color: var(--muted); }
.suggestions { position: absolute; left: 0; top: calc(100% + 2px); z-index: 30; width: 100%; box-sizing: border-box; max-height: 380px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--rule); background: #fff; box-shadow: 0 6px 14px rgba(23, 36, 45, .12); }
.suggestion { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 5px 10px; border: 0; border-bottom: 1px solid var(--rule-soft); background: #fff; color: var(--ink); text-align: left; font-size: 13px; cursor: pointer; }
.suggestion small { font: 11.5px var(--mono); color: var(--muted); }
.suggestion > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.suggestion > small { flex: 0 0 auto; white-space: nowrap; }
.suggestion:hover, .suggestion[aria-selected="true"] { background: var(--sel); }
.suggestion-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }
.identity-block { min-width: 0; flex: 1 1 320px; }
.taxon-identity { font-size: 20px; line-height: 1.25; }
.taxon-identity em { font-weight: 700; }
.taxid-tag { margin-left: 8px; font: 12px var(--mono); color: var(--muted); }
.taxid-value { font-size: 16px; font-weight: 600; color: var(--ink); }
/* Lineage: at most two lines (fitLineage hides whole nodes after the first two), full path in a hover/focus card */
.lineage { position: relative; min-width: 0; font-size: 12px; line-height: 18px; color: var(--muted); }
/* never more than two lines, in every layout: fitLineage measures scrollHeight, the cap covers any moment before it runs */
.lineage-text { display: block; max-height: 36px; overflow: hidden; outline: none; }
.lineage-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lineage .node { display: inline-block; white-space: nowrap; }
.lineage .sep { margin: 0 5px; color: var(--faint); }
.lineage .node.cut { display: none; }
.lineage-more { display: none; color: var(--faint); }
.lineage-text.truncated .lineage-more { display: inline-block; }
.lineage-card { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; display: none; padding: 8px 10px; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(23, 36, 45, .14); font-size: 12px; line-height: 18px; color: var(--ink); }
.lineage:hover .lineage-card, .lineage:focus-within .lineage-card { display: block; }
.ncbi-link { margin-left: 12px; font-size: 12.5px; white-space: nowrap; }
/* Filters: chips that wrap (room for more compartments and sources); the labels share one column through subgrid,
   so both rows line up whatever the longest label (the first grid-template-columns is the fallback) */
.filters { display: grid; grid-template-columns: minmax(82px, max-content) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.filters:not(:has(.filter-button)) { display: none; }
.filter-row { display: grid; grid-column: 1 / -1; grid-template-columns: 82px minmax(0, 1fr); grid-template-columns: subgrid; align-items: start; row-gap: 6px; }
.filter-label { padding-top: 5px; font-size: 13px; color: var(--muted); }
/* Source info: the i after the "Source" label links to the Help source table; mouse hover or keyboard
   focus shows a short, non-interactive note. No cursor: help, no "?" glyph; focus ring only for the keyboard. */
.info-wrap { position: relative; display: inline-block; margin-left: 5px; vertical-align: 0; }
.info-wrap.notes-wrap { margin-left: 0; }
.info-button { all: unset; display: inline-flex; color: var(--link); cursor: pointer; border-radius: 50%; }
.info-button .info-icon { margin-right: 0; }
.info-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; display: block; box-sizing: border-box; width: max-content; max-width: calc(100vw - 32px);
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 2px; background: #fff; box-shadow: 0 4px 14px rgba(23, 36, 45, .12);
  font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--ink); text-align: left; white-space: normal; pointer-events: none; }
.info-pop .info-line { display: block; }
.info-pop .info-line + .info-line { margin-top: 2px; }
.info-pop b { font-weight: 600; }
/* About the data: a paragraph, not short lines, so it wraps at about 34em instead of the window width */
#data-notes-tip { max-width: min(34em, calc(100vw - 32px)); }
.filter-options { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.filter-options:empty { display: none; }
.filter-button { padding: 4px 10px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.filter-button .count { margin-left: 6px; font: 11.5px var(--mono); color: var(--muted); }
.filter-button:hover:not(:disabled):not(.active) { background: var(--hover); }
.filter-button.active { border-color: var(--navy); background: var(--navy); color: #fff; }
.filter-button.active .count { color: #c5d8e4; }
.filter-button:disabled { border-color: var(--rule); background: #f6f8f9; color: #aab4ba; cursor: not-allowed; }
.filter-button:disabled .count { color: #b8c1c6; }
.minor-options { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12.5px; color: var(--muted); }
.minor-options button { all: unset; color: var(--link); cursor: pointer; }
.minor-options button:hover { text-decoration: underline; }
.minor-options button.active { color: var(--ink); font-weight: 600; }
.minor-options button + button::before { content: "·"; margin-right: 10px; color: var(--faint); font-weight: 400; }
.home-search-help { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.home-examples { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--muted); }
#example-taxa { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.example-taxon small { margin-left: 5px; font: 11.5px var(--mono); color: var(--muted); }
/* Home state */
.home-page .tool-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
.home-page #search-form { flex-wrap: wrap; }
.home-page #search-form label { flex-basis: 100%; margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.home-page #taxon-search { width: 440px; height: 38px; }
.home-page #search-form .primary-button { height: 38px; }
.home-catalog-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: 6px; }
.home-catalog-bar h2 { display: inline; margin: 0 10px 0 0; font-size: 17px; font-weight: 650; }
#home-coverage { font-size: 13px; font-weight: 400; color: var(--muted); }
.home-data-context { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 12.5px; color: var(--muted); }
.home-data-context > div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.home-data-context strong { color: var(--warn); font-weight: 600; }
.home-data-context p { margin: 0; }
.home-catalog-bar > a { font-size: 13px; }
.directory-heading { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.directory-heading p { margin: 0; }
.directory-head, .directory-item { display: grid; grid-template-columns: minmax(0, 2.2fr) 120px minmax(0, 1.4fr) 22px; align-items: baseline; gap: 0 16px; padding: 4px 10px; }
.directory-head { border: 1px solid var(--rule); border-bottom: 0; background: #eef2f4; font-size: 12px; font-weight: 600; color: var(--muted); }
.taxon-directory { border: 1px solid var(--rule); }
.directory-item { border-top: 1px solid var(--rule-soft); color: var(--ink); font-size: 13.5px; text-decoration: none !important; }
.directory-item:first-child { border-top: 0; }
a.directory-item:hover { background: var(--hover); }
.directory-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.directory-common { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.directory-id { font: 12.5px var(--mono); color: var(--muted); }
.directory-details { font-size: 12.5px; color: var(--muted); }
.directory-arrow { text-align: right; color: var(--faint); }
.directory-item.unavailable { color: var(--faint); }
.directory-empty { margin: 0; padding: 12px 10px; color: var(--muted); }
.directory-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.directory-pagination button { padding: 3px 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink); cursor: pointer; }
.directory-pagination button:disabled { color: #b3bcc2; cursor: not-allowed; }
.empty-state { padding: 32px 0; }
.empty-state h2 { margin: 0 0 6px; font-size: 18px; }
.empty-state p { margin: 0 0 12px; color: var(--muted); }
/* ---------- Table state: table | ranking ---------- */
/* Codon columns: 240 px with 13.5 px values above 1360 px (232 px / 13 px until 2026-11-12, enlarged at the user's
   request; the longest counts keep the same room to the cell edge). 210 px / 12 px at 1360 px and below: there the page
   has no room to widen them without narrowing the ranking column. */
body:not(.home-page):has(.classical) { --cell: 240px; --aside: 290px; --rgap: 28px; --page-max: calc(4 * var(--cell) + var(--rgap) + var(--aside) + 48px); }
.results { display: grid; grid-template-columns: minmax(0, calc(4 * var(--cell))) var(--aside); gap: 0 var(--rgap); align-items: start; }
/* Very wide screens (2026-11-11): when the table can show Across sources (body.three-columns, set by app.js at render from
   the source counts, so the layout is final before Across sources fills in), the home page's 1680 px box and three
   columns - the table (codon columns keep their fixed width) | Codon ranking + Compare (.aside-main) | Across sources +
   The Genetic Codes (.aside-more). Otherwise the page keeps table | ranking and its own width, so the header above is no
   wider than the content; The Genetic Codes stays under Codon ranking. Below 1640 px the two wrappers are plain blocks. */
@media (min-width: 1640px) {
  body.three-columns:not(.home-page):has(.classical) { --page-max: 1680px; }
  body.three-columns .results { grid-template-columns: calc(4 * var(--cell)) minmax(0, 1fr); }
  body.three-columns .ranking-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  body.three-columns .aside-main, body.three-columns .aside-more { min-width: 0; }
  body.three-columns .ranking-panel:has(#source-comparison-panel:not([hidden])) .aside-more { padding-left: 24px; border-left: 1px solid var(--rule); }
  body.three-columns .aside-more > .source-comparison-panel { margin-top: 0; padding-top: 0; border-top: 0; }
  body.three-columns .ranking-panel:not(:has(#source-comparison-panel:not([hidden]))) .aside-more { grid-column: 1; }
}
.table-panel { min-width: 0; }
.table-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#table-title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.3; }
#table-title em { font-weight: 700; }
.title-count { font: 400 14px var(--mono); color: var(--muted); }
.title-taxid { font-size: 17px; font-weight: 600; color: var(--ink); }
.title-n { font-size: 15px; color: var(--ink); }
/* Title line breaks (rule, every page): the units "[TaxID N]:", "N CDS’s" and "(N codons)" never break inside. Above
   760 px the count group always takes the second line, so every title has two lines (long names wrap in balanced
   lines); on phones the name runs on with "[TaxID N]:" and the counts take their own line. */
#table-title .title-unit { white-space: nowrap; }
@media (min-width: 761px) {
  #table-title { text-wrap: balance; }
  #table-title .title-meta { display: block; margin-top: 2px; line-height: 24px; }
}
@media (max-width: 760px) {
  #table-title { text-wrap: pretty; }
  #table-title .title-stats { display: block; line-height: 22px; }
}
.taxon-link, .taxon-link:hover { color: inherit; text-decoration: none; }
.taxon-link:focus-visible { color: var(--link); }
.view-tabs { display: inline-flex; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; }
.view-tabs button { padding: 4px 14px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; }
.view-tabs button:first-child { border-left: 0; }
.view-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.table-metadata { display: flex; flex-wrap: wrap; margin: 5px 0 0; font-size: 12px; color: var(--muted); }
/* the separator ends the previous item, so a wrapped line never starts with "·" */
.table-metadata span:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--faint); }
.sample-warning { margin: 6px 0 0; padding: 4px 10px; border-left: 3px solid #e0a030; background: var(--warn-bg); font-size: 12.5px; color: var(--warn); }
.table-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid var(--rule-soft); }
#fields-description { font: 12px var(--mono); color: var(--muted); }
/* right-aligned even when the toolbar wraps, and as tall as the value dropdown, so T/U keeps its place and the toolbar its
   height when the dropdown is hidden (Heatmap and Share views) */
.table-options { display: flex; align-items: center; gap: 10px; margin-left: auto; min-height: 28px; }
#value-mode { height: 28px; padding: 0 4px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; }
#value-mode:disabled { color: #aab4ba; }
.base-switch { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; }
.base-switch button { padding: 3px 10px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--ink); font: 12.5px var(--mono); cursor: pointer; }
.base-switch button:first-child { border-left: 0; }
.base-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
/* Heatmap legend */
.heatmap-legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.legend-title { font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; }
.legend-grey i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid var(--rule); vertical-align: -1px; }
/* Table grid; the Heatmap reuses its row height and block spacing (--row, --bs). One gap, (--bs - 1px) / 2, sits on both
   sides of every rule (the header line and the three block dividers) and under the last row, so all four blocks have the
   same white space. Each cell's content is centred; the count column fits the table's longest count (--cc, set by
   app.js), and --content-w is that content's width (IBM Plex Mono: 1ch = 0.6em). */
.table-scroll { --row: 23px; --bs: 7px; --gap: calc((var(--bs) - 1px) / 2); --cell-font: 13.5px; --inset: 10px; --content-w: calc((16 + var(--cc, 9)) * 0.6 * var(--cell-font)); overflow-x: auto; }
.codon-column-headings, .codon-row { display: grid; grid-template-columns: repeat(4, var(--cell)); }
.codon-column-headings span { padding: 4px var(--inset) 5px; border-bottom: 1px solid var(--rule); font-size: 11.5px; color: var(--muted); }
/* All fields view: each heading starts at the left edge of its column's centred content */
.codon-column-headings:has(+ .codon-grid:not(.single-value):not(.heat-a)) span { padding-left: max(var(--inset), (var(--cell) - var(--content-w)) / 2); }
.codon-column-headings b { font-family: var(--mono); color: var(--ink); }
.codon-cell { display: grid; grid-template-columns: 4ch 2ch 4.4ch 5.6ch calc(var(--cc, 9) * 1ch); justify-content: safe center; align-items: center; height: var(--row); padding: 0 var(--inset); border-left: 1px solid var(--rule-soft); font: var(--cell-font) var(--mono); white-space: nowrap; }
.codon-cell:first-child { border-left: 0; }
.codon-row:first-child .codon-cell { height: calc(var(--row) + var(--gap)); padding-top: var(--gap); }
.codon-row:last-child .codon-cell { height: calc(var(--row) + var(--gap)); padding-bottom: var(--gap); }
.codon-cell.block-end { height: calc(var(--row) + var(--gap)); padding-bottom: var(--gap); }
.codon-cell.block-start { height: calc(var(--row) + var(--gap) + 1px); padding-top: var(--gap); border-top: 1px solid var(--rule); }
.codon-grid.single-value .codon-cell { grid-template-columns: 4ch 2ch 4.4ch; justify-content: start; }
.triplet { font-weight: 600; }
.amino { color: #1b6f93; }
.number { text-align: right; }
.codon-count { padding-left: 1px; text-align: left; color: var(--faint); }
.codon-grid .codon-cell:hover { background: var(--hover); }
.codon-cell.highlight { box-shadow: inset 0 0 0 2px var(--ink); }
.codon-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table-scroll-hint { display: none; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-top: 8px; }
.gc-stats { display: flex; flex-wrap: wrap; gap: 0 10px; font: 12px var(--mono); color: var(--muted); }
.gc-stat span { margin-right: 5px; }
.gc-stat strong { color: var(--ink); font-weight: 600; }
.download-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 13px; }
.download-row > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.download-label { font-weight: 600; color: var(--ink); }
.download-row span[aria-disabled="true"] { color: #a7b1b7; cursor: default; }
.table-footnote { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--faint); }
.ranking-panel { min-width: 0; padding-left: 24px; border-left: 1px solid var(--rule); font-size: 13px; }
.aside-title { display: flex; justify-content: space-between; align-items: baseline; }
.aside-title h2 { margin: 0; font-size: 16px; font-weight: 650; line-height: 24px; }
.amino-acids { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.amino-acids button { min-height: 28px; padding: 5px 0; border: 0; border-radius: 2px; background: #fff; color: var(--ink); font-size: 12.5px; cursor: pointer; }
.amino-acids button:hover:not([aria-pressed="true"]) { background: var(--sel); }
.amino-acids button[aria-pressed="true"] { background: var(--pick); color: var(--ink); font-weight: 600; }
.amino-acids button[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }
.compare-control { margin-top: 12px; }
.compare-control label { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 600; }
.compare-search { position: relative; }
#compare-input { box-sizing: border-box; width: 100%; height: 30px; padding: 0 30px 0 8px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink); font: 12.5px var(--mono); }
#compare-input::placeholder { color: var(--faint); font-family: var(--cutd-font-body); }
#compare-input:disabled { background: #f6f8f9; color: #9aa5ab; cursor: not-allowed; }
.compare-clear { all: unset; position: absolute; top: 0; right: 0; width: 30px; height: 30px; text-align: center; font-size: 18px; line-height: 30px; color: var(--muted); cursor: pointer; }
.compare-clear:hover { color: var(--ink); }
.compare-clear:focus-visible { outline: 2px solid var(--accent); }
.compare-list { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; max-height: 300px; overflow: auto; border: 1px solid var(--rule); background: #fff; box-shadow: 0 6px 14px rgba(23, 36, 45, .12); }
.compare-option { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 5px 9px; border: 0; border-bottom: 1px solid var(--rule-soft); background: #fff; color: var(--ink); text-align: left; font-size: 12.5px; cursor: pointer; }
.compare-option:hover, .compare-option[aria-selected="true"] { background: var(--sel); }
.compare-option[aria-disabled="true"] { color: var(--faint); cursor: not-allowed; }
.compare-option[aria-disabled="true"]:hover { background: #fff; }
.compare-id { flex: none; font: 11.5px var(--mono); color: var(--muted); }
.compare-reason { display: block; font-size: 11px; color: var(--faint); }
.compare-empty { padding: 7px 9px; font-size: 12.5px; color: var(--muted); }
#compare-help { margin: 3px 0 0; font-size: 11.5px; color: var(--faint); }
#comparison-summary { margin-top: 12px; font-size: 12px; }
.comparison-stats { display: flex; align-items: baseline; gap: 8px; }
.comparison-stats small { color: var(--muted); }
.comparison-stats strong { font: 600 15px var(--mono); }
.comparison-legend { display: grid; gap: 10px; margin-top: 10px; }
.legend-name { display: flex; align-items: baseline; gap: 6px; }
.legend-name em { min-width: 0; overflow-wrap: anywhere; }
.legend-stats { display: grid; grid-template-columns: var(--cds-w, 14ch) auto; justify-content: start; column-gap: 12px; margin-left: 16px; font: 11.5px var(--mono); color: var(--muted); white-space: nowrap; }
.legend-swatch { position: relative; top: 1px; flex: none; width: 10px; height: 10px; background: var(--rank-top); }
.legend-swatch.secondary { background: var(--cmp); }
.legend-cds { text-align: right; }
.gc3-term { text-decoration: underline dotted var(--faint); text-underline-offset: 2px; }
.ranking-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
#ranking-title { margin: 0; font-size: 14px; font-weight: 650; }
.ranking-subtitle { font-size: 12px; font-weight: 400; color: var(--muted); }
#delta-heading { font: 11.5px var(--mono); color: var(--muted); }
.rank-row { display: grid; grid-template-columns: 16px 40px minmax(0, 1fr); align-items: center; gap: 6px; height: 26px; }
.rank-position { font: 11.5px var(--mono); color: var(--faint); }
.rank-codon { all: unset; font: 600 12.5px var(--mono); color: var(--ink); cursor: pointer; }
.rank-codon:hover { text-decoration: underline; }
.rank-codon:focus-visible { outline: 2px solid var(--accent); }
.rank-track { display: flex; align-items: center; gap: 6px; height: 14px; }
.rank-bar { display: block; height: 12px; background: var(--rank-bar); }
.rank-row:first-child .rank-bar, .paired-bars .rank-bar { background: var(--rank-top); }
.paired-bars .rank-track.secondary .rank-bar { background: var(--cmp); }
.rank-value { font: 11.5px var(--mono); white-space: nowrap; }
.paired-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 6px; padding: 3px 0; }
.paired-bars { display: grid; gap: 2px; }
.delta { font: 11.5px var(--mono); text-align: right; }
.delta-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.genetic-codes { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.genetic-codes h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; line-height: 24px; }
.genetic-code-list { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.4; }
.genetic-code-list li + li { margin-top: 4px; }
.genetic-code-list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 2px; color: var(--link); overflow-wrap: anywhere; }
.genetic-code-list a[aria-current="true"] .gc-num { font-weight: 600; }
.genetic-code-list a[aria-current="true"] .gc-title { font-weight: 700; }
.gc-num { font: 400 12px/1.55 var(--mono); }
/* ---------- overlays ---------- */
.cell-tooltip { position: fixed; z-index: 50; width: 300px; padding: 8px 10px; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(23, 36, 45, .14); font-size: 12px; pointer-events: none; }
.tooltip-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tooltip-title strong { font: 600 14px var(--mono); }
.tooltip-title span { color: var(--muted); }
.tooltip-values { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; }
.tooltip-values span { color: var(--muted); }
.tooltip-values b { font: 500 12px var(--mono); text-align: right; }
.tooltip-compare { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule-soft); }
/* ---------- shorter screens: tighter rows so the table stays in view ---------- */
@media (min-width: 1180px) and (max-height: 860px) {
  .classical { padding-top: 10px; }
  .tool-band { margin-bottom: 9px; padding-bottom: 9px; }
  .table-scroll { --row: 21px; --bs: 6px; }
  .directory-head, .directory-item { padding-block: 3px; }
}
@media (min-width: 1180px) and (max-height: 780px) {
  .table-scroll { --row: 19px; --bs: 5px; }
  .filters { margin-top: 7px; }
  .table-toolbar { margin-top: 6px; padding-top: 6px; }
}
@media (max-width: 1360px) {
  .table-scroll { --cell-font: 12px; --inset: 8px; }
  .codon-grid.heat-a .ha { font-size: 13px; }
  body:not(.home-page):has(.classical) { --cell: 210px; --aside: 270px; --rgap: 22px; }
  #table-title { font-size: 24px; }
  .ranking-panel { padding-left: 20px; }
  .tool-band { grid-template-columns: 250px minmax(0, 1fr); gap: 0 22px; }
  body:not(.home-page) .page-heading h1 { font-size: 26px; }
}
/* ---------- narrower: ranking moves under the table ---------- */
@media (max-width: 1179px) {
  .tool-band, .home-page .tool-band { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .page-heading { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  .page-heading > div:first-child { flex-basis: 100%; }
  .results { grid-template-columns: minmax(0, 1fr); max-width: calc(4 * var(--cell)); }
  .ranking-panel { margin-top: 18px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .classical { padding: 12px 16px 16px; }
  .filters, .filter-row { grid-template-columns: minmax(0, 1fr); }
  .filter-label { padding-top: 0; }
  .minor-options { grid-column: 1; }
  .filter-button { white-space: normal; text-align: left; }
  .filter-button .count { white-space: nowrap; }
  .search-row { gap: 8px; }
  #search-form, .home-page #search-form { position: relative; width: 100%; }
  .search-control { position: static; flex: 1; min-width: 0; }
  .suggestions { left: 0; width: 100%; max-width: 100%; }
  #taxon-search, .home-page #taxon-search { width: 100%; }
  .table-scroll-hint { display: block; }
  .table-title-row { flex-wrap: wrap; }
  .directory-head { display: none; }
  .directory-item { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
  .directory-details { grid-column: 1 / -1; }
  .directory-arrow { display: none; }
}
/* ---------- Heatmap (continuous RSCU colour on log2, petrol / white / rose) and the Share view ---------- */
:root {
  --h0: #62a4b2; --h1: #99d0dd; --h2: #d3ecf5; --h3: #ffffff; --h4: #f8e1e2; --h5: #e4b9be; --h6: #cf7c8b;   /* lightness matched pair by pair */
  --na: repeating-linear-gradient(135deg, #f3f5f6 0 4px, #dfe4e7 4px 5px);                                        /* stop / single-codon amino acid */
  --gc: #bfd1f6; --at: #f5c79f;                                                                                     /* third base G/C vs A/T (Share) */
  --run: #9aa7b0;
}
/* legends */
/* RSCU legend: one 210 px gradient bar on log2(RSCU), the same OKLab stops as the cells;
   ticks at <=0.5 (0%), 0.77, 1 (50%), 1.3 and >=2 (100%); 14 px side margins keep the end ticks clear of the words */
.legend-keep { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.legend-grad { position: relative; display: block; flex: none; width: 210px; height: 26px; padding-bottom: 14px; margin: 0 14px; }
.legend-grad::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11px; box-shadow: inset 0 0 0 1px #e1e7ea;
  background: linear-gradient(to right, var(--h0) 0%, var(--h1) 15.5%, var(--h2) 37%, var(--h3) 50%, var(--h4) 63%, var(--h5) 84.5%, var(--h6) 100%);
  background: linear-gradient(to right in oklab, var(--h0) 0%, var(--h1) 15.5%, var(--h2) 37%, var(--h3) 50%, var(--h4) 63%, var(--h5) 84.5%, var(--h6) 100%); }
.legend-grad b { position: absolute; top: 12px; transform: translateX(-50%); font: 400 10px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.legend-grad b::before { content: ""; position: absolute; top: -2px; left: 50%; height: 3px; border-left: 1px solid var(--muted); }
.legend-grey i { background: var(--na); }
.share-legend { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.share-legend b { margin-right: 2px; font-size: 12px; font-weight: 600; color: var(--ink); }
.share-legend i { display: inline-block; width: 24px; height: 11px; margin-left: 6px; box-shadow: inset 0 0 0 1px rgba(23, 36, 45, .18); }
.share-legend .gc, .share .gc { background: var(--gc); }
.share-legend .at, .share .at { background: var(--at); }
/* narrow screens (<= 760 px): the legend items join the toolbar rows: line 1 "RSCU" and the bar with "used less" /
   "used more" above its ends; line 2 "stop / single codon" and the right-aligned T/U */
@media (max-width: 760px) {
  .table-toolbar { justify-content: flex-start; }
  .heatmap-legend { display: contents; }
  .heatmap-legend .legend-keep { display: grid; grid-template-columns: auto auto; grid-template-areas: "less more" "bar bar"; row-gap: 2px; column-gap: 0; }
  .heatmap-legend .legend-less { grid-area: less; justify-self: start; font-size: 11px; }
  .heatmap-legend .legend-more { grid-area: more; justify-self: end; font-size: 11px; }
  .heatmap-legend .legend-grad { grid-area: bar; }
  .heatmap-legend > span, .heatmap-legend > abbr { white-space: nowrap; }
}
/* Heatmap: per 2nd-base column an amino-acid label spanning its run, the codon and an RSCU tile.
   Rows use the Table's row height and block spacing, so rows stay in place when switching views. */
.codon-grid.heat-a .ha { width: calc(4 * var(--cell)); border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 13.5px var(--mono); }
.ha .cl { width: 62px; }
.ha .cc { width: 50px; }
.ha td { height: var(--row); padding: 0; white-space: nowrap; }
.ha tbody + tbody tr:first-child td { height: calc(var(--row) + var(--bs)); border-top: var(--bs) solid #fff; }
.ha td.l { padding: 0 8px 0 4px; border-left: 1px solid var(--rule-soft); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: right; vertical-align: middle; color: var(--ink); }
.ha td.l:first-child { border-left: 0; }
.ha td.l small { display: block; font: 400 11px/1.2 var(--mono); color: #1b6f93; }
.ha td.l1 small { display: inline; margin-left: 4px; }
.ha td.c { padding-left: 2px; font-weight: 600; }
.ha td.v { padding-right: 10px; text-align: right; color: #111; cursor: default; }
.ha td.na { background: var(--na); color: #666; }
.ha td.nd { color: var(--muted); }
.ha .rs { box-shadow: inset 0 1px 0 var(--run); }
/* thin line between synonymous runs */
.ha .be { box-shadow: inset 0 -2px 0 var(--ink); }
/* heavy line after each first-base block */
.ha .rs.be { box-shadow: inset 0 1px 0 var(--run), inset 0 -2px 0 var(--ink); }
.ha td.v.highlight { outline: 2px solid var(--ink); outline-offset: -2px; }
.ha td.v:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ha td[data-a] { transition: opacity .12s; }
.ha:has([data-a="F"]:hover) [data-a]:not([data-a="F"]),
.ha:has([data-a="L"]:hover) [data-a]:not([data-a="L"]),
.ha:has([data-a="I"]:hover) [data-a]:not([data-a="I"]),
.ha:has([data-a="M"]:hover) [data-a]:not([data-a="M"]),
.ha:has([data-a="V"]:hover) [data-a]:not([data-a="V"]),
.ha:has([data-a="S"]:hover) [data-a]:not([data-a="S"]),
.ha:has([data-a="P"]:hover) [data-a]:not([data-a="P"]),
.ha:has([data-a="T"]:hover) [data-a]:not([data-a="T"]),
.ha:has([data-a="A"]:hover) [data-a]:not([data-a="A"]),
.ha:has([data-a="Y"]:hover) [data-a]:not([data-a="Y"]),
.ha:has([data-a="H"]:hover) [data-a]:not([data-a="H"]),
.ha:has([data-a="Q"]:hover) [data-a]:not([data-a="Q"]),
.ha:has([data-a="N"]:hover) [data-a]:not([data-a="N"]),
.ha:has([data-a="K"]:hover) [data-a]:not([data-a="K"]),
.ha:has([data-a="D"]:hover) [data-a]:not([data-a="D"]),
.ha:has([data-a="E"]:hover) [data-a]:not([data-a="E"]),
.ha:has([data-a="C"]:hover) [data-a]:not([data-a="C"]),
.ha:has([data-a="W"]:hover) [data-a]:not([data-a="W"]),
.ha:has([data-a="R"]:hover) [data-a]:not([data-a="R"]),
.ha:has([data-a="G"]:hover) [data-a]:not([data-a="G"]),
.ha:has([data-a="*"]:hover) [data-a]:not([data-a="*"]) { opacity: .22; }
/* Share: one 100% bar per amino acid, codons from most to least used; width = fraction, colour = third base */
.table-scroll[data-view="share"] .codon-column-headings { display: none; }
.share { width: calc(4 * var(--cell)); margin: 0; padding: 4px 0 0; list-style: none; font: 11.5px var(--mono); }
.share li { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 10px; margin-bottom: 4px; }
.share li.st, .share li.sg { margin-top: 10px; }
.share .fam { font-family: inherit; font-size: 12px; font-weight: 600; line-height: 20px; }
.share .fam .amino { margin-left: 6px; font: 400 12.5px var(--mono); }
.sbar { display: flex; height: 20px; border: 1px solid var(--line); }
.sbar i { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; border-left: 1px solid var(--line); font-style: normal; white-space: pre; color: #111; cursor: default; }
.sbar i:first-child { border-left: 0; }
.sbar b, .ol b { font-weight: 600; }
.sbar i.highlight { outline: 2px solid var(--ink); outline-offset: -2px; }
.sbar i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ol { position: relative; display: block; height: 15px; }
.ol span { position: absolute; top: 2px; transform: translateX(-50%); line-height: 13px; white-space: pre; }
.share .nd { color: var(--muted); }
/* home page, phones: the search box wraps onto the button's line instead of collapsing beside the label */
@media (max-width: 760px) {
  .home-page #search-form .search-control { flex: 1 1 180px; }
}
/* species title on phones */
@media (max-width: 760px) {
  #table-title { font-size: 21px; }
  .title-count { font-size: 12.5px; }
  .title-n { font-size: 13.5px; }
}
/* heatmap: the legend already says what the colours mean; keeps the toolbar on one line at the compact width */
.table-panel:has(.table-scroll[data-view="heatmap"]) #fields-description { display: none; }

/* Composition and Across sources: a compact composition strip and a small, independent source table. */
.composition-panel { margin-top: 12px; padding-top: 7px; border-top: 1px solid var(--rule); min-width: 0; }
.compact-heading { display: flex; align-items: center; gap: 14px; min-height: 23px; }
.compact-heading h3, .source-comparison-panel h3 { margin: 0; font-size: 16px; font-weight: 650; line-height: 24px; }
.composition-tabs { display: flex; align-items: center; gap: 12px; }
.composition-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 3px 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1.2; }
.composition-tabs button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.composition-tabs button:focus-visible, .compact-download:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compact-download { margin-left: auto; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 12px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.compact-download:hover { text-decoration: underline; }
/* Composition content: one box for both views, full strip width, a fixed minimum height per strip width so switching
   tabs does not move the page. Layout follows the strip's own width (container queries), not the viewport. */
/* Codon positions colours: the user's choice (2026-11-10, P2 with yellow G3): the same hues as before (A blue, C green,
   G yellow, T red) at the saturation and lightness of the Heatmap E1 light classes (OKLCH L ~0.80-0.84, C ~0.06-0.075).
   All labels ink: A 8.49:1, C 8.71:1, G 9.62:1, T 8.30:1. Amino-acid bars: one slate (categorical colouring judged
   unnecessary by the Fable vote). */
.composition-content {
  container: comp / inline-size; margin-top: 6px;
  --aa-bar: #5B7083;
  --nt-A: #A1C1E4; --nt-A-ink: var(--ink);
  --nt-C: #97CBB9; --nt-C-ink: var(--ink);
  --nt-G: #E3C693; --nt-G-ink: var(--ink);
  --nt-T: #E2B0A8; --nt-T-ink: var(--ink);
}
/* box heights: 1 row 15+44+1+3+15 = 78; 2 rows 2 x 60 + 8 = 128; 3 rows 3 x 48 + 16 = 160 (no slack: raise with any change) */
.composition-content > * { min-height: 78px; }
.aa-strip { --bar-max: 44px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-content: start; row-gap: 8px; }
.aa-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.aa-track { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-self: stretch; height: calc(15px + var(--bar-max)); border-bottom: 1px solid var(--rule-soft); }
.aa-value { font-size: 12px; line-height: 15px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.aa-bar { display: block; width: 55%; max-width: 26px; height: calc(var(--bar-max) * var(--f)); background: var(--aa-bar); }
.aa-name { margin-top: 3px; font-size: 12px; line-height: 15px; color: var(--muted); white-space: nowrap; }
/* empty cells that carry the baseline to the end of a short last row in the 2- and 3-row layouts */
.aa-fill { display: none; }
.aa-fill .aa-track { height: calc(15px + var(--bar-max)); }
/* the unit of the amino-acid values, stated once; kept (invisible) on the Codon positions tab so the heading keeps its height */
.aa-unit { margin-left: auto; font-size: 11.5px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.aa-unit.is-off { visibility: hidden; }
.aa-unit + .compact-download { margin-left: 14px; }
.pos-strip { display: grid; align-content: start; row-gap: 9px; }
.pos-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; }
.pos-label { font-size: 12px; line-height: 18px; color: var(--muted); white-space: nowrap; }
.pos-bar { display: flex; height: 18px; min-width: 0; }
.pos-seg { container: seg / inline-size; flex: var(--w) 0 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--seg); color: var(--seg-ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-seg > span { font-size: 12px; line-height: 18px; }
.pos-seg + .pos-seg { box-shadow: inset 1px 0 0 #fff; }
.pos-seg .k { font-weight: inherit; }
.nt-A { --seg: var(--nt-A); --seg-ink: var(--nt-A-ink); }
.nt-C { --seg: var(--nt-C); --seg-ink: var(--nt-C-ink); }
.nt-G { --seg: var(--nt-G); --seg-ink: var(--nt-G-ink); }
.nt-T { --seg: var(--nt-T); --seg-ink: var(--nt-T-ink); }
.aa-col:focus, .pos-seg:focus { outline: none; }
.aa-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pos-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
@container seg (max-width: 55px) { .pos-seg .k { display: none; } }
@container seg (max-width: 39px) { .pos-seg span { display: none; } }
/* three tiers by strip width: one row of 20 (values like "10.25" are 32 px at 12px, so >= 700 px of strip),
   two rows from 699 px, three rows from 419 px (phones); the position bars grow to use the same box */
@container comp (max-width: 699px) {
  .composition-content > * { min-height: 128px; }
  .aa-strip { --bar-max: 26px; grid-template-columns: repeat(var(--n2), minmax(0, 1fr)); }
  .aa-fill.f2 { display: flex; flex-direction: column; }
  .pos-strip { row-gap: 12px; }
  .pos-label { line-height: 24px; }
  .pos-bar { height: 24px; }
  .pos-seg > span { line-height: 24px; }
}
@container comp (max-width: 419px) {
  .composition-content > * { min-height: 160px; }
  .aa-strip { --bar-max: 14px; grid-template-columns: repeat(var(--n3), minmax(0, 1fr)); }
  .aa-fill.f2 { display: none; }
  .aa-fill.f3 { display: flex; flex-direction: column; }
  .pos-strip { row-gap: 16px; }
  .pos-row { grid-template-columns: 62px minmax(0, 1fr); }
  .pos-label { font-size: 11px; line-height: 32px; }
  .pos-bar { height: 32px; }
  .pos-seg > span { font-size: 11px; line-height: 32px; }
  /* smaller labels need less room: keep "T 16.8%" whole down to 42 px (10px text below 52 px), value only below 42 px */
  @container seg (min-width: 42px) { .pos-seg .k { display: inline; } }
  @container seg (max-width: 51px) { .pos-seg > span { font-size: 10px; } }
  @container seg (max-width: 41px) { .pos-seg .k { display: none; } }
}
/* phone heading: the unit caption takes its own line under the tabs on both tabs, TSV stays at the right */
@media (max-width: 760px) {
  .compact-heading:has(.aa-unit) { flex-wrap: wrap; }
  .aa-unit { order: 3; width: 100%; margin-left: 0; }
  .aa-unit + .compact-download { margin-left: auto; }
}
.compact-empty { margin: 7px 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.source-comparison-panel { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
@media (max-width:760px) { .compact-heading { gap: 10px; } .composition-tabs { gap: 10px; } .composition-tabs button { font-size: 11px; } }