/* Browse & search — the merged page.
 *
 * Shares the Statistics / Downloads chrome (sticky section nav + `.access-card`
 * sections), so only what is specific to this page lives here: the numbered step
 * blocks, the searchable dataset combobox, and the source chips.
 */

/* ---- shared chrome, same values as Statistics/Downloads ---- */
/* ---- secondary header ----
 * The panels are alternative subjects, not sections of one document: nobody wants
 * the ClinVar table *below* the region table, they want it instead of it. A tab
 * strip says that; the scrolling section list this replaced said the opposite, and
 * cost a page of scrolling to act on.
 */
.bs-subheader {
    position: sticky; top: 0; z-index: 1020;
    margin: 0 -0.75rem 1rem;
    padding: 0 0.75rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.bs-subheader-inner {
    display: flex; align-items: stretch; gap: 0.15rem;
    overflow-x: auto; scrollbar-width: thin;
}
.bs-subheader-sep {
    align-self: center; width: 1px; height: 1.4rem;
    background: var(--bs-border-color); margin: 0 0.4rem;
    flex-shrink: 0;
}
.bs-tab {
    display: inline-flex; align-items: center; gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.7rem 0.85rem;
    border: 0; border-bottom: 3px solid transparent;
    background: transparent; color: var(--bs-secondary-color);
    font-size: 0.875rem; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}
.bs-tab:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.bs-tab.is-active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.bs-tab .material-symbols-outlined { font-size: 1.15rem; }
.bs-tab-about { padding-inline: 0.65rem; }

/* ---- panels ---- */
.bs-panel { display: none; }
.bs-panel.is-active { display: block; animation: bs-panel-in .16s ease both; }
@keyframes bs-panel-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bs-panel.is-active { animation: none; } }

/* An embedded view keeps its own scrolling, so the panel gives it a viewport rather
   than letting it push the tab strip off screen. */
.bs-frame-wrap { position: relative; min-height: 60vh; }
.bs-frame {
    width: 100%; height: calc(100vh - 12rem); min-height: 34rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
}
.bs-frame-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--bs-secondary-color); font-size: 0.9rem;
    pointer-events: none;
}
.bs-frame-wrap.is-ready .bs-frame-loading { display: none; }

.access-card { border: 1px solid var(--bs-border-color); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.06); }
[data-bs-theme="dark"] .access-card { box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.25); }
.access-card .card-header { border-bottom: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }

.bs-card-icon {
    font-size: 2rem;
    width: 2.5rem; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.35rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
    flex-shrink: 0;
}

/* ---- About tiles ---- */
.bs-about-tile {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    background: var(--bs-tertiary-bg);
}
.bs-about-tile .material-symbols-outlined { font-size: 1.6rem; flex-shrink: 0; }

/* ---- numbered steps ----
 * The controls are a sequence — which regions, over which proteins, counting which
 * variants, shown with which scores — and reading them as a sequence is what makes
 * a 20-control panel legible. Same idea as the numbered steps on Analysis. */
.bs-step {
    padding: 0.9rem 0 1.1rem;
    border-bottom: 1px dashed var(--bs-border-color);
}
.bs-step:last-child { border-bottom: 0; }
.bs-step-head {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.bs-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem;
    border-radius: 50%;
    background: var(--bs-primary); color: #fff;
    font-size: 0.72rem; font-weight: 700;
    flex-shrink: 0;
}

/* ---- searchable dataset combobox ----
 * A type-to-filter list rather than a <select>: the datasets carry a group, a
 * source and a colour, none of which an <option> can show, and there are enough of
 * them that scanning beats scrolling. */
.bs-combo-icon {
    position: absolute; left: 0.6rem; top: 0.42rem;
    font-size: 1.1rem; color: var(--bs-secondary-color);
    pointer-events: none;
}
.bs-combo-input { padding-left: 2rem; }
.bs-combo-list {
    margin-top: 0.4rem;
    max-height: 17rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}
.bs-combo-group {
    position: sticky; top: 0; z-index: 1;
    padding: 0.3rem 0.7rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}
.bs-combo-item {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.7rem;
    border: 0; border-bottom: 1px solid var(--bs-border-color);
    background: transparent; color: var(--bs-body-color);
    text-align: left; cursor: pointer;
}
.bs-combo-item:last-child { border-bottom: 0; }
.bs-combo-item:hover { background: var(--bs-tertiary-bg); }
.bs-combo-item.is-selected { background: rgba(var(--bs-primary-rgb), 0.10); }
.bs-combo-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.bs-combo-swatch {
    width: 0.7rem; height: 0.7rem; border-radius: 0.2rem;
    flex-shrink: 0; border: 1px solid rgba(0,0,0,.15);
}
.bs-combo-label { font-weight: 600; font-size: 0.85rem; }
.bs-combo-desc {
    font-size: 0.74rem; color: var(--bs-secondary-color);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bs-combo-count {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.7rem; color: var(--bs-secondary-color);
}
.bs-combo-empty { padding: 0.8rem; font-size: 0.85rem; color: var(--bs-secondary-color); }

.bs-dataset-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25em 0.7em;
    border-radius: 999px;
    font-size: 0.8rem; font-weight: 600;
}

/* ---- mutation source chips ---- */
.bs-src-group {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--bs-secondary-color);
}
.bs-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    font-size: 0.82rem; cursor: pointer; user-select: none;
    margin: 0;
}
.bs-chip:hover { border-color: var(--bs-secondary-color); }
.bs-chip:has(input:checked) {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
    font-weight: 600;
}
.bs-chip input { margin: 0; }
.bs-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }

/* ---- other-table tiles ---- */
.bs-more-tile {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    text-decoration: none; color: var(--bs-body-color);
    background: var(--bs-body-bg);
    transition: border-color .15s, background .15s;
}
.bs-more-tile:hover { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.bs-more-tile .material-symbols-outlined { font-size: 1.6rem; color: var(--bs-primary); }

/* ---- results table ---- */
table.bs-region-table thead tr.bs-col-filters th {
    border-top: 0; padding: 0.3rem 0.4rem; font-weight: normal;
}
table.bs-region-table thead tr.bs-col-filters input {
    width: 100%; min-width: 4rem;
    font-size: 0.75rem; padding: 0.15rem 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    background: var(--bs-body-bg); color: var(--bs-body-color);
}

/* Export buttons and the table itself are styled in discanvis-browse-tables.css,
   shared with the ClinVar / OMIM / mutated-region / PPI tables so all five look the
   same. Only the column-filter row is specific to this table. */

/* ---- search results (carried over from the old /search page) ---- */
:root {
    --dv-variant-missense: #2e86de;
    --dv-variant-frameshift: #a855f7;
    --dv-variant-indel: #0fb9b1;
    --dv-tag-mane-bg: #16a34a; --dv-tag-mane-fg: #f0fdf4;
    --dv-tag-canon-bg: rgba(255, 204, 0, 0.75); --dv-tag-canon-fg: #1e293b;
    --dv-tag-appris-bg: #32c023; --dv-tag-appris-fg: #0f172a;
}
[data-bs-theme="dark"] {
    --dv-variant-missense: #5dade2;
    --dv-variant-frameshift: #c084fc;
    --dv-variant-indel: #2ee6d6;
}
.dv-mini-bar {
    height: 10px; border-radius: 5px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
    min-width: 72px;
}
.dv-mini-bar-labels { font-size: 0.72rem; line-height: 1.2; margin-top: 0.25rem; color: var(--bs-secondary-color); }
.cancer-db-block { min-width: 140px; }
.search-tag-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 600; line-height: 1.2;
    padding: 0.18em 0.55em; border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.10); white-space: nowrap;
}
.bs-legend span { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.bs-legend i { width: 1rem; height: 0.65rem; border-radius: 0.15rem; display: inline-block; }
table#search-results-table thead th {
    white-space: nowrap; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--bs-secondary-color);
}