/* ==========================================================================
 * app.css — TEMPLATE stylesheet for the co-evolve transcriptome browser.
 *
 * This file intentionally contains only the bare minimum to make the UI
 * readable; it is organised so you can restyle whole regions (header,
 * table, pagination, detail page) without touching the templates.
 *
 * All colors resolve to design tokens defined in base.css (:root). To
 * re-theme the site, edit those tokens — not this file.
 *
 * Selector contract with the Jinja templates:
 *
 *   Site chrome
 *     .site-header, .site-header__inner, .site-header__title,
 *     .site-header__nav, .site-header__nav-link
 *     .site-content
 *     .site-footer, .site-footer__inner, .site-footer__author
 *
 *   Listing page (templates/transcriptomes.html)
 *     .transcriptome-browser
 *     .transcriptome-search, .transcriptome-search__field,
 *       .transcriptome-search__label, .transcriptome-search__input,
 *       .transcriptome-search__select, .transcriptome-search__actions,
 *       .transcriptome-search__submit, .transcriptome-search__reset
 *     .transcriptome-summary
 *     .transcriptome-table__wrap, .transcriptome-table,
 *       .transcriptome-table__head, .transcriptome-table__body,
 *       .transcriptome-table__row, .transcriptome-table__th,
 *       .transcriptome-table__td, .transcriptome-table__id-link,
 *       .transcriptome-table__download-link,
 *       .transcriptome-table__sort-link, .transcriptome-table__sort-label,
 *       .transcriptome-table__sort-indicator
 *     .is-sorted, .is-sorted--asc, .is-sorted--desc   (on <th>)
 *     .pagination, .pagination__link, .pagination__link--prev,
 *       .pagination__link--next, .pagination__link--disabled,
 *       .pagination__status
 *
 *   Detail page (templates/transcriptome_detail.html)
 *     .breadcrumbs, .breadcrumbs__link, .breadcrumbs__sep,
 *       .breadcrumbs__current
 *     .transcriptome-detail, .transcriptome-detail__header,
 *       .transcriptome-detail__title, .transcriptome-detail__subtitle,
 *       .transcriptome-detail__common, .transcriptome-detail__metadata,
 *       .transcriptome-detail__row, .transcriptome-detail__key,
 *       .transcriptome-detail__value, .transcriptome-detail__empty,
 *       .transcriptome-detail__download-link
 *
 *   Column-specific hooks (on <th> / <td> / <dt> / <dd>):
 *     .col--<column_name>   e.g. .col--assembly_id, .col--species_binomial
 *     .col--kind-<kind>     where <kind> is 'id' | 'link' | 'number' | 'text'
 *
 * The column set is driven entirely by the data source (see ColumnSpec in
 * repository.py, optionally overridden by a per-CSV sidecar JSON file), so
 * adding or removing columns in the CSV is enough to change the UI — you
 * only need to touch this file if you want column-specific styling.
 * ========================================================================== */


/* -----------------------------------------------------------------------
 * Layout
 * --------------------------------------------------------------------- */

.site-content {
    padding: 1rem;
    overflow: hidden;
    min-height: 0;
}

.transcriptome-browser {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.site-header__inner,
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0rem;
}

.site-header__inner {
    padding: 8px 16px;
}

.site-header__title {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--text-on-dark);
    text-decoration: none;
}

.site-header__title:hover {
    color: var(--text-on-dark);
    text-decoration: none;
}

.site-header__nav {
    display: flex;
    gap: 1.25rem;
}

.site-header__nav-link {
    color: var(--text-on-dark-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.site-header__nav-link:hover {
    color: var(--text-on-dark);
    text-decoration: none;
}

.site-footer__author {
    text-decoration: underline;
}


/* -----------------------------------------------------------------------
 * Search form
 * --------------------------------------------------------------------- */

.transcriptome-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.transcriptome-search__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.transcriptome-search__field--query {
    flex-grow: 1;
    min-width: 16rem;
}

.transcriptome-search__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.transcriptome-search__input,
.transcriptome-search__select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text);
    font: inherit;
    transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.transcriptome-search__input:focus,
.transcriptome-search__select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.transcriptome-search__input::placeholder {
    color: var(--text-muted);
}

.transcriptome-search__input {
    width: 100%;
}

.transcriptome-search__actions {
    display: flex;
    gap: 0.5rem;
}

.transcriptome-search__submit {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent);
    color: var(--text-on-dark);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out;
}

.transcriptome-search__submit:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.transcriptome-search__reset {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}

.transcriptome-search__reset:hover {
    background: var(--bg-soft);
    color: var(--text);
    text-decoration: none;
}


/* -----------------------------------------------------------------------
 * Result summary
 * --------------------------------------------------------------------- */

.transcriptome-summary {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}


/* -----------------------------------------------------------------------
 * Table
 * --------------------------------------------------------------------- */

.transcriptome-table__wrap {
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow-x: auto;
    overflow-y: auto;
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    background: var(--bg-surface);
}

.transcriptome-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--text);
}

.transcriptome-table__th,
.transcriptome-table__td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-muted);
    white-space: nowrap;
}

.transcriptome-table__th {
    background: var(--bg-table-head);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: none;
    position: sticky;
    top: 0;
}

.transcriptome-table__th.is-sorted {
    background: var(--bg-table-head-sorted);
    color: var(--text);
}

.transcriptome-table__sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
}

.transcriptome-table__sort-link:hover {
    color: var(--text);
    text-decoration: none;
}

.transcriptome-table__sort-link:hover .transcriptome-table__sort-label {
    text-decoration: underline;
}

.transcriptome-table__sort-indicator {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-width: 0.75rem;
    text-align: center;
}

.transcriptome-table__th.is-sorted .transcriptome-table__sort-indicator {
    color: var(--accent);
}

.transcriptome-table__row:nth-child(odd) .transcriptome-table__td {
    background: var(--bg-surface);
}

.transcriptome-table__row:nth-child(even) .transcriptome-table__td {
    background: var(--bg-surface-alt);
}

.transcriptome-table__row:hover .transcriptome-table__td {
    background: var(--accent-soft);
}

.transcriptome-table__id-link,
.transcriptome-table__download-link,
.transcriptome-table__external-link {
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.transcriptome-table__id-link:hover,
.transcriptome-table__download-link:hover,
.transcriptome-table__external-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.transcriptome-table__external-link {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    font-size: 0.85rem;
}

.transcriptome-table__id-link {
    font-weight: 600;
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
}

/* Column-specific tweaks.
 *
 * The template emits both:
 *   .col--<column_name>   (e.g. .col--species_binomial)  — per-column
 *   .col--kind-<kind>     (e.g. .col--kind-number)       — per-column-kind
 *
 * on every <th>, <td>, <dt> and <dd>, so you can target either an individual
 * column or a whole category without changing the templates.
 */

/* Right-align numeric values only inside the listing table — there it
 * helps numbers line up across rows. On the detail page numbers sit next
 * to text labels in a definition list, where right-aligning them creates
 * a staircase effect against neighbouring text-kind values. Keep
 * tabular-nums everywhere so digits are still uniform-width. */
.col--kind-number {
    font-variant-numeric: tabular-nums;
}

.transcriptome-table .col--kind-number {
    text-align: right;
}

.col--kind-link {
    white-space: nowrap;
}

/* Italicise the species binomial wherever it appears as a data value
 * (table cells, definition-list values), but not on column-header
 * labels (<th> / <dt>) — "Species" is a UI label, not a Latin name. */
td.col--species_binomial,
dd.col--species_binomial {
    font-style: italic;
}

.col--notes {
    white-space: normal;
    max-width: 24rem;
}


/* -----------------------------------------------------------------------
 * Pagination
 * --------------------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pagination__link {
    background: var(--bg-surface);
    color: var(--accent);
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out, color 120ms ease-in-out;
}

.pagination__link:hover:not(.pagination__link--disabled) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
    text-decoration: none;
}

.pagination__link--disabled {
    color: var(--text-muted);
    border-color: var(--border-muted);
    background: var(--bg-surface);
    cursor: not-allowed;
}


/* -----------------------------------------------------------------------
 * Detail page
 * ---------------------------------------------------------------------
 *
 * The site shell (see base.css) is a column-flex layout where #content
 * has overflow:hidden so the listing's table can own its own internal
 * scroll. The detail page has no such scroll container, so without the
 * rules below long detail pages get clipped at the viewport edge.
 *
 * Letting the article itself flex-grow + scroll keeps the header/footer
 * fixed and only affects the detail route — the listing keeps its own
 * scrolling behaviour because .transcriptome-browser sits inside
 * #content instead of .transcriptome-detail.
 * --------------------------------------------------------------------- */

.transcriptome-detail {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
}

.breadcrumbs {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--text-secondary);
}

.breadcrumbs__link {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumbs__link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.breadcrumbs__sep {
    color: var(--text-muted);
}

.breadcrumbs__current {
    color: var(--text);
    font-weight: 600;
}

.transcriptome-detail__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
}

.transcriptome-detail__subtitle {
    margin-top: 0.25rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.transcriptome-detail__common {
    font-style: normal;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

/* Detail body: a 2-column × 2-row grid that pairs each column's heading
 * with its content. The page title sits above the metadata on the left;
 * the "Downloads" label sits above the downloads list on the right.
 * Because both rows are auto-sized, the downloads list starts at the
 * exact same vertical position as the first metadata row, regardless of
 * how tall the title block is — which is what we want so the right-hand
 * label doesn't appear visually detached from the page heading. */
.transcriptome-detail__body {
    display: grid;
    /* Downloads column has a fixed-ish target width (22rem) so each item
     * stays on a single line. Metadata is the flexible track (1fr) — it
     * shrinks on narrow viewports, with long values gracefully truncated
     * by the ellipsis rule on .transcriptome-detail__value. The body is
     * capped overall so the metadata pane doesn't grow unreadably wide
     * on big monitors and the two panes always sit close together. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    grid-template-areas:
        "title  dlhead"
        "meta   dllist";
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    align-items: start;
    margin-top: 1rem;
    max-width: 50rem;
}

.transcriptome-detail__header {
    grid-area: title;
}

.transcriptome-detail__metadata {
    grid-area: meta;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    min-width: 0;
}

/* The downloads <section> only exists for ARIA grouping; lift its
 * children into the body grid so the heading and the list can occupy
 * separate cells. */
.transcriptome-downloads {
    display: contents;
}

.transcriptome-downloads__header {
    grid-area: dlhead;
    /* Sit at the bottom of the (taller) header row so the "Downloads"
     * label baselines with the species subtitle on the left, rather than
     * floating at the top of an otherwise-empty cell. */
    align-self: end;
}

.transcriptome-downloads__list {
    grid-area: dllist;
}

/* Stack into a single column once the squeezed two-column grid stops
 * being comfortable. Below ~42rem the metadata's value column gets
 * narrow enough that lots of values ellipsize, so the layout reads
 * better as "title → metadata → downloads-heading → downloads-list". */
@media (max-width: 42rem) {
    .transcriptome-detail__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "meta"
            "dlhead"
            "dllist";
    }

    .transcriptome-downloads__header {
        align-self: start;
        margin-top: 0.5rem;
    }
}

.transcriptome-detail__row {
    display: contents;
}

.transcriptome-detail__key {
    font-weight: 600;
    color: var(--text-secondary);
}

.transcriptome-detail__value {
    color: var(--text);
    /* Single-line values; long content (URLs, accession-number lists,
     * sequencing-center names) clips with an ellipsis instead of pushing
     * the layout wider. The full text is still available via the cell's
     * title attribute (set in the template) and via the link target. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transcriptome-detail__download-link,
.transcriptome-detail__external-link {
    color: var(--accent);
    text-decoration: none;
}

.transcriptome-detail__download-link:hover,
.transcriptome-detail__external-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.transcriptome-detail__external-link {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
}

.transcriptome-detail__empty {
    color: var(--text-muted);
}


/* -----------------------------------------------------------------------
 * Detail page — downloads
 * --------------------------------------------------------------------- */

.transcriptome-downloads__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.transcriptome-downloads__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.transcriptome-downloads__item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: border-color 120ms ease-in-out, background-color 120ms ease-in-out;
}

.transcriptome-downloads__item:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.transcriptome-downloads__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    color: var(--accent);
}

.transcriptome-downloads__link:hover {
    color: var(--accent-hover);
}

.transcriptome-downloads__link:hover .transcriptome-downloads__label {
    text-decoration: underline;
}

.transcriptome-downloads__size {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    white-space: nowrap;
}


/* -----------------------------------------------------------------------
 * About page
 *
 * Same shell-fitting pattern as .transcriptome-detail: let the article
 * own its vertical scroll so the fixed header/footer stay put on long
 * content.
 * --------------------------------------------------------------------- */

.about-page {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 1.75rem 2rem;
    box-sizing: content-box;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    color: var(--text);
    /* Match the visual separation used by the Browse-page table:
     * a white surface set against the page's --bg-page, with the same
     * 1px --border ring and 4px corner radius. */
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.about-page__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
}

.about-page__lede {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.about-page__section {
    margin-top: 1.75rem;
}

.about-page__section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.about-page__section p {
    margin-top: 0.6rem;
}

.about-page__list {
    margin-top: 0.6rem;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.about-page em {
    font-style: italic;
}

.about-page strong {
    font-weight: 600;
}

.about-page__link {
    color: var(--accent);
    text-decoration: underline;
}

.about-page__link:hover {
    color: var(--accent-hover);
}

.about-page__citation {
    margin-top: 0.6rem;
    padding: 0.75rem 1rem;
    background: var(--bg-soft);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    font-size: 0.95rem;
    color: var(--text);
    word-break: break-word;
}

.about-page__links {
    margin-top: 0.75rem;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.95rem;
}