:root {
  --bg: #f4f6f2;
  --paper: #ffffff;
  --paper-soft: #edf1ec;
  --ink: #17251f;
  --muted: #627069;
  --line: #ccd5cd;
  --line-strong: #9dab9f;
  --green: #1f654c;
  --green-dark: #153f31;
  --burgundy: #7b425e;
  --gold: #c69d42;
  --ap13: #8a6a25;
  --vs16: #216b55;
  --hap1: #315f75;
  --hap2: #b86b4f;
  --shadow: 0 12px 30px rgba(22, 47, 36, .08);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif; font-size: 14px; }
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(198,157,66,.35); outline-offset: 2px; }

.masthead {
  min-height: 176px; position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; overflow: hidden; padding: 30px clamp(20px,4vw,66px) 27px; color: white;
  background: #173b31 url("/static/assets/switchgrass-field-v2.webp") center 58% / cover no-repeat;
}
.masthead-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(10,35,27,.95),rgba(10,35,27,.78) 42%,rgba(10,35,27,.12)); }
.brand, .status { position: relative; z-index: 1; }
.brand-kicker { margin-bottom: 11px; color: #f2d58d; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.brand-kicker a { color: inherit; text-decoration: none; }
.brand-kicker span { display: inline-block; width: 18px; height: 1px; margin: 0 9px; background: rgba(255,255,255,.45); vertical-align: middle; }
h1 { margin: 0; font-size: clamp(31px,4vw,43px); line-height: 1.04; font-weight: 660; }
.brand p { max-width: 730px; margin: 10px 0 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.5; }
.status { padding-bottom: 4px; color: rgba(255,255,255,.86); font-size: 11px; text-align: right; line-height: 1.5; }
.status::before { content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#91d5a8; box-shadow:0 0 0 3px rgba(145,213,168,.18); }
.status.bad::before { background: #e4a188; }

.tabs { position: sticky; top: 0; z-index: 20; display: flex; min-height: 52px; padding: 0 clamp(12px,3.4vw,54px); overflow-x:auto; border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); box-shadow:0 4px 14px rgba(23,48,37,.05); }
.tab { min-height:52px; padding:0 19px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:650; }
.tab:hover { color:var(--ink); background:#f7f9f6; }
.tab.active { color:var(--green-dark); border-bottom-color:var(--burgundy); }

.workspace { width:min(100%,1500px); margin:0 auto; }
.tabpane { display:none; padding:28px clamp(18px,3.4vw,54px) 54px; }
.tabpane.active { display:block; }
.hidden { display:none !important; }

.searchbar { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:10px; align-items:end; padding-bottom:22px; border-bottom:1px solid var(--line); }
.primary-search { display:grid; gap:7px; color:var(--ink); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.primary-search input { width:100%; min-height:46px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:6px; background:var(--paper); color:var(--ink); font-size:14px; font-weight:400; text-transform:none; letter-spacing:0; box-shadow:inset 0 1px 2px rgba(23,37,31,.04); }
.searchbar button, .download { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border:1px solid var(--green-dark); border-radius:6px; background:var(--green-dark); color:#fff; cursor:pointer; font-size:12px; font-weight:700; text-decoration:none; }
.searchbar button:hover, .download:hover { border-color:var(--burgundy); background:var(--burgundy); }
#searchHelp { grid-column:1/-1; margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.message { margin:17px 0; padding:10px 12px; border-left:3px solid var(--gold); background:#fff8e8; color:#624b13; font-size:12px; line-height:1.5; }

.search-results { display:grid; gap:7px; margin:18px 0; }
.search-hit { display:grid; grid-template-columns:minmax(210px,.8fr) minmax(300px,1.5fr) auto; gap:12px 20px; align-items:center; width:100%; padding:13px 14px; border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:5px; background:var(--paper); color:var(--ink); cursor:pointer; text-align:left; }
.search-hit:hover { border-color:var(--burgundy); box-shadow:var(--shadow); }
.hit-gene { font-weight:750; overflow-wrap:anywhere; }
.hit-name { color:var(--muted); font-size:12px; line-height:1.4; }
.hit-flags { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; color:var(--muted); font-size:10px; }
.hit-flags span { border-bottom:2px solid var(--line-strong); padding-bottom:2px; }
.hit-flags .on { color:var(--green-dark); border-color:var(--green); font-weight:700; }

.gene-view { margin-top:22px; }
.gene-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; align-items:start; padding:4px 0 20px; border-bottom:1px solid var(--line-strong); }
.eyebrow { margin-bottom:6px; color:var(--burgundy); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.gene-header h2, .methods-lead h2 { margin:0; font-size:25px; line-height:1.25; overflow-wrap:anywhere; }
.gene-protein { margin:7px 0 0; color:var(--muted); line-height:1.5; }
.alias-line { grid-column:1/-1; color:var(--muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }

.analysis-section { margin-top:20px; padding:22px 0 25px; border-bottom:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
h3 { margin:0 0 6px; font-size:16px; }
.section-heading p, .methods p { max-width:980px; margin:0; color:var(--muted); line-height:1.6; }
.metric-select { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; white-space:nowrap; }
select { min-height:36px; padding:6px 30px 6px 9px; border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink); }
.legend, .bias-legend { display:flex; flex-wrap:wrap; gap:10px 20px; margin:16px 0 8px; color:var(--muted); font-size:11px; }
.legend span, .bias-legend span { display:inline-flex; align-items:center; gap:7px; }
.swatch { width:12px; height:12px; display:inline-block; border:1px solid rgba(23,37,31,.35); border-radius:2px; }
.swatch.ap13 { background:var(--ap13); } .swatch.vs16 { background:var(--vs16); }
.swatch.hap1 { background:var(--hap1); } .swatch.hap2 { background:var(--hap2); }
.replicate-dot { width:8px; height:8px; display:inline-block; border:2px solid var(--ink); border-radius:50%; background:#fff; }

.chart-wrap { min-height:340px; margin-top:6px; overflow-x:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.expression-svg { display:block; min-width:760px; width:100%; height:auto; }
.chart-axis { stroke:#68766e; stroke-width:1; }
.chart-grid { stroke:#dfe5df; stroke-width:1; }
.chart-label { fill:#526159; font-size:11px; }
.chart-title { fill:#26372f; font-size:11px; font-weight:700; }
.bar-ap13 { fill:var(--ap13); opacity:.88; } .bar-vs16 { fill:var(--vs16); opacity:.88; }
.bar-ap13:hover, .bar-vs16:hover { opacity:1; }
.error-line { stroke:#25362e; stroke-width:1.2; }
.rep-point { fill:#fff; stroke:#1c2b24; stroke-width:1.4; }

.detail-table { margin-top:13px; }
.detail-table summary { color:var(--green-dark); cursor:pointer; font-size:11px; font-weight:700; }
.table-scroll { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; }
.data-table, .detail-table table, .readiness-table { margin-top:12px; font-size:11px; }
th { padding:9px 10px; border-bottom:1px solid var(--line-strong); background:#e9eee9; color:#314139; font-size:10px; font-weight:800; text-align:left; text-transform:uppercase; white-space:nowrap; }
td { padding:8px 10px; border-bottom:1px solid #e2e7e2; vertical-align:middle; font-variant-numeric:tabular-nums; }
tbody tr:nth-child(even) { background:#fafbfa; }
.convention, .measurement-note { max-width:980px; margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.measurement-note { padding-left:12px; border-left:3px solid var(--green); }
.contrast-cell { min-width:270px; }
.contrast-cell b, .contrast-cell small, .lfc-direction { display:block; }
.contrast-cell small { margin-top:3px; color:var(--muted); font-size:9px; }
.lfc-cell { min-width:200px; }
.lfc-track { position:relative; display:inline-block; width:180px; height:16px; vertical-align:middle; background:linear-gradient(90deg,#f7f3e8 0 49.5%,#64716a 49.5% 50.5%,#edf5f1 50.5%); }
.lfc-mark { position:absolute; top:3px; height:10px; }
.lfc-mark.negative { right:50%; background:var(--ap13); }
.lfc-mark.positive { left:50%; background:var(--vs16); }
.lfc-number { display:inline-block; min-width:54px; margin-left:8px; text-align:right; }
.lfc-direction { margin-top:4px; color:var(--ink); font-size:9px; font-weight:700; }

.bias-share { min-width:240px; }
.bias-bar { width:190px; height:17px; display:flex; overflow:hidden; border:1px solid #6e7973; background:#eef1ee; }
.bias-bar span:first-child { background:var(--hap1); } .bias-bar span:last-child { background:var(--hap2); }
.bias-caption { margin-top:3px; color:var(--muted); font-size:10px; }
.call { font-weight:750; white-space:nowrap; }
.call.hap1 { color:var(--hap1); } .call.hap2 { color:var(--hap2); } .call.balanced { color:var(--green); } .call.low-total { color:var(--muted); font-weight:600; }

.annotation-section { padding:24px 0 4px; }
.annotation-section dl { display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px 18px; margin:14px 0 0; font-size:12px; line-height:1.55; }
.annotation-section dt { color:var(--muted); font-weight:700; }
.annotation-section dd { margin:0; overflow-wrap:anywhere; }

.methods { max-width:1120px; }
.methods-lead { margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--line-strong); }
.methods-lead p { margin-top:10px; }
.methods section { padding:18px 0; border-bottom:1px solid var(--line); }
.methods code { padding:2px 5px; border-radius:3px; background:#e7ece7; }
.methods .caution { margin-top:10px; padding-left:12px; border-left:3px solid var(--gold); color:#624b13; }
.readiness-table td:last-child { font-weight:700; color:var(--green-dark); }

footer { padding:20px clamp(18px,3.4vw,54px) 30px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; text-align:center; }

@media (max-width: 780px) {
  .masthead { min-height:195px; align-items:flex-start; flex-direction:column; justify-content:flex-end; gap:14px; padding:25px 18px 21px; background-position:62% center; }
  .masthead-shade { background:linear-gradient(90deg,rgba(10,35,27,.95),rgba(10,35,27,.55)); }
  .status { text-align:left; }
  .tabs { padding:0 5px; }
  .tabpane { padding:22px 14px 40px; }
  .searchbar { grid-template-columns:1fr; }
  #searchHelp { grid-column:1; }
  .search-hit { grid-template-columns:1fr; }
  .hit-flags { justify-content:flex-start; }
  .gene-header { grid-template-columns:1fr; }
  .gene-header .download, .alias-line { grid-column:1; }
  .download { justify-self:start; }
  .section-heading { flex-direction:column; gap:12px; }
  .annotation-section dl { grid-template-columns:1fr; gap:3px; }
  .annotation-section dd { margin-bottom:8px; }
}