.genome-panel{margin:24px 0;min-width:0;border-top:3px solid var(--teal)}
.gb-controls{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin:18px 0 12px}.gb-controls>label{flex:1;min-width:240px;max-width:100%}
.gb-controls label,.gb-seq-tools label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.gb-controls select{width:100%;max-width:100%;font-size:14px}
.gb-zoom{display:flex;gap:6px;flex-wrap:wrap}.gb-zoom button,.gb-seq-tools button{font-size:13px;padding:9px 12px}
.gb-reference{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0;font-size:14px}.gb-reference .code{overflow-wrap:anywhere}
.gb-view{min-width:0;width:100%;overflow:hidden}
/* IGV renders in its own shadow DOM with fixed light chrome; in dark mode it is
   presented as an intentional light figure card rather than half-themed. */
html[data-theme=dark] .gb-view{background:#fff;border-radius:4px}.gb-view .igv-container{margin:0;border:1px solid var(--line);font-family:var(--sans)}
.gb-view .igv-track-label{font-size:12px}.gb-view .igv-navbar{flex-wrap:wrap;height:auto;min-height:38px}
.gb-view .igv-navbar input{min-width:0}.gb-view .igv-viewport-div{background:var(--panel)}
.gb-view-warning{color:var(--brown-text);font-size:13px;padding-top:6px}.genome-panel p.gb-footnote{font-size:13px;line-height:1.6;max-width:1100px}
.gb-sequence{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}.gb-sequence summary,.gb-source summary{cursor:pointer;font-size:15px;font-weight:600}
.gb-seq-tools{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:16px 0}.gb-seq-tools select{font-size:14px}
.gb-seq-meta{font-size:13px;line-height:1.8;margin:10px 0}.gb-bases{max-height:260px;overflow:auto;padding:14px;background:var(--row);border:1px solid var(--line)}
.gb-bases>div{display:flex;gap:18px;white-space:nowrap;font-family:var(--mono);font-size:14px;line-height:1.8}.gb-coordinate{min-width:105px;text-align:right;color:var(--grey-text);user-select:none}.gb-bases code{font:inherit}
.gb-bases .base{display:inline-block;width:10px;text-align:center}.base-A{color:var(--green-text)}.base-C{color:var(--blue-text)}.base-G{color:var(--olive-text)}.base-T{color:var(--red-text)}.base-N{color:var(--grey-text-2)}.target-base{background:var(--tint-orange)}
.genome-panel p.gb-copy-status{font-size:13px;margin:5px 0}.gb-source{margin-top:14px;color:var(--muted)}.gb-source .kv{color:var(--ink)}
@media(max-width:600px){.gb-view{overflow:auto}.gb-view .igv-container{min-width:500px}.gb-controls>label{min-width:0;width:100%}.gb-seq-tools label{width:100%}.gb-reference .pill{font-size:12px}.gb-controls select{font-size:12px}.gb-coordinate{min-width:90px}}
.gb-ucsc{display:inline-flex;align-items:center;gap:4px;margin-left:10px;font-size:12.5px;white-space:nowrap}

/* igv.js 3.4.x has no native dark theme; invert its canvas chrome in dark mode while
   keeping hue relationships, so the browser panel follows the site theme. The explicit
   host colour prevents the site's light inherited text colour from reaching IGV's
   shadow DOM (which would render white-on-white before the inversion). */
html[data-theme=dark] .gb-view{filter:invert(1) hue-rotate(180deg);color:#202124}
@media print{html[data-theme=dark] .gb-view{filter:none}}