/* LIVIA Atlas — part of the LIVIA family: light ground, navy brand, teal query / coral partner, iLIS bands. */
:root {
  --ground: #F4F6F9; --card: #FFFFFF; --ink: #17263A; --ink-2: #445368; --ink-3: #627085; --line: #DDE3EA; --line-2: #EDF1F5;
  --navy: #1A5276; --blue: #2471A3; --blue-soft: #E8F1F8;
  --query: #00897B; --query-l: #B2DFDB; --partner: #E64A19; --partner-l: #FFCCBC;
  --fpr1: #6B21A8; --fpr5: #0C735C; --fpr10: #875F00; --below: #A7B2BF;   /* LIVIA's band colors */
  --fpr1-t: #6B21A8; --fpr5-t: #0C735C; --fpr10-t: #875F00; --below-t: #5F6771; --query-t: #00776B; --partner-t: #C13E15;   /* the same bands as text: at least 4.5:1 on white and on their chips */
  --display: 'Archivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r: 12px; --shadow: 0 1px 2px rgba(23, 38, 58, 0.06), 0 6px 24px rgba(23, 38, 58, 0.06);
  --top-h: 60px;   /* the header's height: what sticky bars below it sit under */
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px; }

/* ── top bar ── */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 18px; height: var(--top-h); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand span { color: var(--ink-3); font-weight: 600; }
.top nav { display: flex; gap: 16px; margin-left: auto; font-size: 14px; }
.top nav a { color: var(--ink-2); white-space: nowrap; }
.top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 2px var(--blue); text-underline-offset: 7px; }
.top-search { flex: 1; max-width: 460px; position: relative; }
@media (max-width: 760px) {   /* phones: the tabs move to a second row under the logo and the search */
  :root { --top-h: 86px; }
  .top .wrap { flex-wrap: wrap; align-content: center; row-gap: 4px; }
  .top nav { order: 3; width: 100%; margin-left: 0; gap: 18px; font-size: 13px; overflow-x: auto; scrollbar-width: none; }
  .top nav a[aria-current="page"] { text-underline-offset: 4px; }
  .brand span { display: none; }
}

/* ── search ── */
.search { position: relative; }
.search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font: 15px var(--sans); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36, 113, 163, 0.12); }
.search .glass { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search.big input { height: 58px; font-size: 18px; padding-left: 50px; border-radius: 14px; box-shadow: var(--shadow); }
.search.big .glass { left: 18px; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(23, 38, 58, 0.16); overflow: hidden; z-index: 30; max-height: 70vh; overflow-y: auto; }
.suggest[hidden] { display: none; }
.sg { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: baseline; padding: 9px 14px; cursor: pointer; border-top: 1px solid var(--line-2); }
.sg:first-child { border-top: 0; }
.sg.on, .sg:hover { background: var(--blue-soft); }
.sg b { font-family: var(--display); font-weight: 700; font-size: 16px; }
.sg .nm { color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg .ct { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sg .sub { grid-column: 2 / 4; font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.sg.on .ct, .sg.on .sub, .sg:hover .ct, .sg:hover .sub { color: var(--ink-2); }   /* at least 4.5:1 on the highlighted row */
.sg-note { padding: 10px 14px; font-size: 13px; color: var(--ink-2); background: #FAFBFC; }

/* ── home ── */
.hero { padding: 64px 0 36px; }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 16ch; text-wrap: balance; }
.hero h1 .ini { color: var(--query); }   /* the words the headline stresses */
.hero p.lede { font-size: 18px; color: var(--ink-2); max-width: 62ch; margin: 0 0 26px; }
@media (max-width: 480px) { .hero p.lede { font-size: 16px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.chip:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.chips .lbl { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.chips a.sp-link { color: var(--ink-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.chips a.sp-link:hover { color: var(--blue); text-decoration-color: currentColor; }
.section-h { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; margin: 44px 0 14px; }
.datasets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ds { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ds.live { box-shadow: var(--shadow); }
.ds h3 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ds .sp { font-size: 13px; color: var(--ink-3); font-style: italic; }
.ds .stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 22px; }
.ds .stats div { display: flex; flex-direction: column; }
.ds .stats b { font-family: var(--mono); font-size: 17px; font-weight: 600; }
.ds .stats span { font-size: 12px; color: var(--ink-3); }
.ds .src-line { font-size: 13px; color: var(--ink-2); }
.ds .badge { align-self: flex-start; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.badge.on { background: #E3F4EE; color: var(--fpr5-t); }
.badge.soon { background: #F1F3F6; color: var(--ink-3); }

/* ── cards / protein page ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow); }
.card h2 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card .muted { color: var(--ink-3); font-size: 13px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin: 22px 0 10px; }
.crumbs a { color: var(--ink-2); }
.phead { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.phead > .kpis { flex: 1 1 auto; justify-content: flex-end; } .phead > .kpis > .kpi { flex: 1 1 0; }   /* tiles fill their row: beside the title, or across the page when they wrap */
.phead h1 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.02em; line-height: 1; margin: 0; }
.phead .pname { color: var(--ink-2); font-size: 15px; margin-top: 8px; }   /* a description runs the width it has */
.phead .ids { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi { min-width: 96px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.kpi b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 1.1; }
.kpi span { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em; }
.runset { font-style: normal; color: var(--ink-3); }
.runset.off { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.srcs.ovl { font-size: 13px; margin-top: 4px; }
.kc { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-top: 1px; }   /* the iLIS cutoff under a count */
.kpi.f1 b { color: var(--fpr1-t); } .kpi.f5 b { color: var(--fpr5-t); } .kpi.f10 b { color: var(--fpr10-t); }
.kc { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-top: 1px; }   /* the iLIS cutoff under a count */
.kc.t { font-family: inherit; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 20px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px; font: 600 14px var(--sans); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.btn:hover { text-decoration: none; border-color: var(--blue); color: var(--blue); }
.flag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: #FFF4E0; color: #8A5A00; }
.controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin: 10px 0 12px; }
.ctl { display: inline-flex; align-items: center; gap: 6px; }   /* a label and its control stay together */
.controls select, .controls input[type=search], .controls input[type=number] { font: 13px var(--sans); padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { font: 600 12.5px var(--sans); padding: 6px 11px; border: 0; background: #fff; color: var(--ink-2); cursor: pointer; border-left: 1px solid var(--line); }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--navy); color: #fff; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hot span { font-family: var(--mono); font-size: 12.5px; padding: 3px 8px; border-radius: 6px; background: #E0F2F1; color: #00695C; }

/* partner table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 10px; }
table.pt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pt th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 12px; letter-spacing: 0.02em; padding: 9px 10px; border-bottom: 1px solid var(--line); background: #FAFBFC; position: relative; z-index: 2; transform: translateY(var(--hy, 0px)); cursor: pointer; white-space: nowrap; user-select: none; }
.pt.pinned th { box-shadow: inset 0 -1px 0 var(--line), 0 6px 8px -6px rgba(16, 24, 40, 0.22); }   /* header held under the page header */
.pt th.sorted::after { content: ' ▾'; color: var(--blue); }
.pt th.sorted.asc::after { content: ' ▴'; }
.pt td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.pt tr:hover td { background: #F8FAFC; }
.pt td.g a { font-weight: 600; }
.pt td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.pt td.nm { color: var(--ink-3); max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.pt.compact th, .pt.compact td { padding: 6px 7px; }
.pt.compact td.n, .pt.compact th.n { font-size: 12.5px; }
.bar { display: inline-block; width: 64px; height: 7px; border-radius: 4px; background: var(--line-2); vertical-align: middle; margin-left: 8px; position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.band { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; }
.band.b1 { background: #F3EAFB; color: var(--fpr1-t); } .band.b5 { background: #E1F1EB; color: var(--fpr5-t); } .band.b10 { background: #F6EEDC; color: var(--fpr10-t); } .band.b0 { background: #F1F3F6; color: var(--ink-3); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; font-size: 13px; color: var(--ink-2); margin-top: 10px; }

/* network */
.net { position: relative; height: 600px; border: 1px solid var(--line-2); border-radius: 10px; background: #FFFFFF; overflow: hidden; }
.net svg { width: 100%; height: 100%; display: block; cursor: grab; }
.net .tip { position: absolute; pointer-events: none; background: rgba(23, 38, 58, 0.92); color: #fff; font-size: 12.5px; padding: 6px 9px; border-radius: 7px; white-space: nowrap; transform: translate(-50%, -130%); }
.net .tip[hidden] { display: none; }

.empty { padding: 30px; text-align: center; color: var(--ink-3); }
.loading { color: var(--ink-3); font-size: 14px; padding: 18px 0; }
footer { margin-top: auto; border-top: 1px solid var(--line); background: #fff; }
footer .wrap { padding-block: 22px; font-size: 13px; color: var(--ink-3); display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: space-between; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── balance: headers split left/right, grids fill the row ── */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 4px; }
.card-head h2 { margin: 0; }
.phead .actions { margin: 16px 0 0; }
.datasets { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.reading { max-width: 820px; margin-inline: auto; }
.showcase { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px 16px; }
.showcase .sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.showcase .sc-top b { font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; }
.showcase .sc-top span { font-size: 12.5px; color: var(--ink-3); }
.showcase canvas { width: 100%; display: block; }
.showcase .sc-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.showcase .sc-foot span { text-wrap: pretty; }
.showcase .sc-top { flex-wrap: wrap; row-gap: 4px; }
.showcase .sc-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.showcase .sc-name a { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.showcase .sc-top .sc-sp { font-size: 12px; color: var(--ink-2); padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.showcase .sc-foot a { color: var(--blue); text-decoration: none; white-space: nowrap; }
.showcase .sc-top, .showcase .sc-stage, .showcase .sc-foot { transition: opacity .18s ease; }
.showcase.sc-out .sc-top, .showcase.sc-out .sc-stage, .showcase.sc-out .sc-foot { opacity: 0; }
.showcase .sc-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.showcase .sc-dots { display: flex; justify-content: center; gap: 2px; }
.showcase .sc-arrow { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
@media (hover: hover) { .showcase .sc-arrow:hover { color: var(--navy); border-color: var(--navy); } }   /* a tap must not leave it lit */
.showcase .sc-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.showcase .sc-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.showcase .sc-dots button::after { content: ''; width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .2s ease, background .2s ease; }
.showcase .sc-dots button[aria-current="true"]::after { width: 20px; background: var(--navy); }
.showcase .sc-dots button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .showcase .sc-top, .showcase .sc-stage, .showcase .sc-foot, .showcase .sc-dots button::after, .showcase .sc-arrow { transition: none; } }

/* datasets: live cards share the row; planned ones sit below, quieter */
.live-row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; padding: 12px 16px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-2); font-size: 13.5px; }
.pl b { color: var(--ink); }
.pl span:last-child { grid-column: 1 / -1; color: var(--ink-3); }
.ds .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
.dshead { margin-bottom: 16px; }
.dshead h1 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
.dshead h1 .tag-alpha { vertical-align: super; margin-left: 6px; font-size: 11px; letter-spacing: 0.06em; }   /* a page still taking shape */
.dshead .pname { color: var(--ink-2); margin-top: 8px; }
.dshead .ids { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (max-width: 480px) { .kpirow > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* phone, two columns: an odd last tile takes the whole row */

/* page-level tooltip: fixed, never clipped by a card */
.gtip { position: fixed; z-index: 100; pointer-events: none; background: rgba(23, 38, 58, 0.94); color: #fff; font-size: 12.5px; line-height: 1.4; padding: 7px 10px; border-radius: 8px; max-width: min(420px, calc(100vw - 20px)); box-shadow: 0 8px 24px rgba(23, 38, 58, 0.25); }
.gtip[hidden] { display: none; }
/* overview: scatter left, ranked list right */
.overview { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 8px; }
@media (max-width: 900px) { .overview { grid-template-columns: 1fr; } }
.toplist { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; gap: 2px; }
.toplist li, .tl-head { display: grid; grid-template-columns: 22px minmax(64px, 1fr) 46px repeat(4, 50px) 44px; align-items: center; gap: 6px; padding: 6px 8px; }
.toplist.one li, .tl-head.one { grid-template-columns: 22px minmax(64px, 1fr) 46px repeat(2, 56px); }   /* one model per pair: no averages */
.toplist li { counter-increment: t; border-radius: 8px; font-size: 13.5px; }
.tl-head { padding-block: 0 4px; font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.tl-head span:nth-child(n+4) { text-align: right; line-height: 1.15; }
.toplist .num { font-weight: 600; }
.tl-c { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.tl-key { margin-top: 10px; font-size: 12px; }
.toplist li::before { content: counter(t); font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); text-align: right; }
.toplist li:nth-child(odd) { background: #FAFBFC; }
.toplist li a { font-weight: 600; }
.toplist .num { font-family: var(--mono); font-size: 12.5px; text-align: right; }
.toplist .tl-past { font-weight: 400; color: var(--ink-3); }

/* ── shared bits ── */
.chip { font: 500 13px var(--sans); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.card h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.hot { align-items: center; }
.hot .hot-lbl { background: none; color: var(--ink-3); font-family: var(--sans); padding-left: 0; }
.mdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.more { all: unset; cursor: pointer; font-size: 12.5px; color: var(--blue); font-weight: 600; }
.more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.sites-more { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); }
.nf { outline: 2px solid #E8A09A; outline-offset: 1px; }
.note { background: #FFF7E6; color: #7A5200; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; margin: 0 0 12px; }

/* ── protein page: LIVIA cLIP report ── */
.subnav { position: sticky; top: var(--top-h); z-index: 15; display: flex; gap: 2px 4px; flex-wrap: wrap; justify-content: center; padding: 6px 8px; margin: 0 0 18px;
  background: rgba(244, 246, 249, 0.94); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; }
.subnav button { all: unset; cursor: pointer; font: 500 13px var(--sans); color: var(--ink-2); padding: 5px 11px; border-radius: 8px; }
.subnav button:hover { background: var(--blue-soft); color: var(--blue); }
.subnav button:focus-visible { outline: 2px solid var(--blue); }
.subnav button.on, .subnav button.on:hover { background: #1A5276; color: #fff; }   /* the section in view, as LIVIA's section bar */
.clip-ctl { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px; margin-left: auto; }   /* stays right when the head wraps */
.clip-ctl > span, .clip-ctl .ctl, .clip-ctl .seg button { white-space: nowrap; }
.clip-ctl input[type=text] { font: 13px var(--sans); width: 116px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); }
@media (max-width: 720px) {   /* phones: the residue box and the cutoff buttons wrap inside the card instead of running past it */
  .clip-ctl { margin-left: 0; justify-content: flex-start; max-width: 100%; }
  .clip-ctl .ctl { flex-wrap: wrap; max-width: 100%; }
  .clip-ctl .seg { max-width: 100%; }
  .clip-ctl .seg button { white-space: normal; padding: 6px 8px; min-width: 0; }
}
.res-warn { display: block; margin: 2px 0; color: #A04A12; }
.cite-box { display: block; width: 100%; max-width: 720px; margin: 10px 0 0; font: 12.5px var(--mono, monospace); padding: 8px; border: 1px solid var(--line); border-radius: 7px; resize: vertical; }
.sites-bg { margin: 2px 0 6px; font-size: 12.5px; line-height: 1.5; }
.res-note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.res-look { margin: -4px 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); border-left: 3px solid var(--ink); padding: 2px 0 2px 10px; }
.explain { color: var(--ink-2); font-size: 13.5px; margin: 12px 0 0; }
.cl-chips { margin: 8px 0 10px; gap: 6px; }
.cl-chips:empty { display: none; }
.cchip { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font: 500 12.5px var(--sans);
  color: var(--ink-2); background: #fff; cursor: pointer; user-select: none; transition: opacity .12s, background .12s; }
.cchip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cchip:hover { border-color: var(--blue); }
.cchip.sel { background: var(--navy); border-color: var(--navy); color: #fff; }
.cchip.off { opacity: 0.38; }
.cchip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.plot { position: relative; min-height: 40px; }
.plot canvas { display: block; }
.plot-empty { padding: 26px 0; text-align: center; color: var(--ink-3); font-size: 14px; }
.domlegend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.domlegend:empty { display: none; }
.domlegend > b { color: var(--ink); }
.clinfo { display: grid; gap: 8px; font-size: 13.5px; line-height: 1.65; }
.cl-row { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: #FBFCFD; }
.cl-names { margin-top: 2px; }   /* the partner names on their own line, under the cluster's summary */
.cl-row > i { width: 13px; height: 13px; border-radius: 3px; margin-top: 5px; }
/* reported in BioGRID: a highlighter mark in the network's colors, light (physical red, genetic green, both purple) */
.clinfo a.kb-p, .clinfo a.kb-g, #c-pt .pt td.g a.kb-p, #c-pt .pt td.g a.kb-g, .kb-mark { padding: 1px 5px; border-radius: 4px; text-decoration: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.clinfo a.kb-p, #c-pt .pt td.g a.kb-p, .kb-mark.kb-p { background: #FBE0DF; }
.clinfo a.kb-g, #c-pt .pt td.g a.kb-g, .kb-mark.kb-g { background: #DCEFDC; }
.clinfo a.kb-p.kb-g, #c-pt .pt td.g a.kb-p.kb-g, .kb-mark.kb-p.kb-g { background: #EADFF3; }
.legend i.kb-ring, .tl-name i.kb-ring { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid rgba(23, 38, 58, 0.6); background: none; box-sizing: border-box; }
.tl-name i.kb-ring { width: 9px; height: 9px; border-width: 1.4px; }
.legend .kb-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.legend .kb-toggle select { font: 12.5px var(--sans); padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); margin-left: 2px; }
.legend .kb-toggle i.kb-ring { margin-right: 0; }
.viewer3d { position: relative; height: 560px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; margin-top: 4px; }
.viewer3d iframe { width: 100%; height: 100%; border: 0; display: block; }
.v3d-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--ink-3); font-size: 14px; background: #fff; }
.v3d-msg[hidden] { display: none; }
.amgrad { display: inline-block; width: 140px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #2C7BB6, #E0E0E0, #D7191C); align-self: center; }
.scat2 { position: relative; }
.scat2 svg, .scat2 canvas { position: absolute; left: 0; top: 0; }
.netkey { display: flex; flex-wrap: wrap; gap: 14px 48px; justify-content: center; align-items: flex-start; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.netkey > div { display: flex; flex-direction: column; gap: 6px; }
#net-legend { justify-content: center; }

/* interaction residues (protein page card and pair page) */
.ifmap canvas { display: block; }
.seqpanels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.seqh { font-size: 13.5px; }
.seq-flow { font: 12.5px/2.6 var(--mono); color: var(--ink); margin-top: 6px; }
.seq-flow .g10 { position: relative; margin-right: 0.7em; white-space: nowrap; }
.seq-flow .g10::before { content: attr(data-n); position: absolute; top: -1.15em; right: 0.05em; font-size: 9.5px; line-height: 1; color: var(--ink-3); }
.seq-flow .g10.tail::before { right: auto; left: 0; }
.seq-flow .c { color: #fff; font-weight: 600; border-radius: 2px; }
.seq-flow .l { border-radius: 2px; }

/* pair page */
.pairwho { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 8px 40px; margin-top: 12px; }
.pairwho .who > span { color: var(--ink-2); font-size: 14px; }
.pairwho .ids { margin-top: 4px; }
.pt th.n { text-align: right; }
.models th { cursor: default; }
.models th.grp { text-align: center; }
.models th.q { color: var(--query-t); }
.models th.p { color: var(--partner-t); }
.models tbody tr { cursor: pointer; }
.models tbody tr.on td { background: var(--blue-soft); }

@media (max-width: 900px) { .seqpanels { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .viewer3d { height: 420px; } .pairwho { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .net { height: 440px; } }
@media (max-width: 720px) { .phead > .kpis { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* phone: the tiles fill the row */

/* ── screens (sources) ── */
.src { display: inline-block; font-size: 11.5px; font-weight: 600; font-style: normal; line-height: 1.5; padding: 0 7px; border-radius: 5px; margin-right: 4px;
  color: var(--c); background: color-mix(in srgb, var(--c) 11%, white); white-space: nowrap; }
.srcs { margin-top: 8px; font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.screens { display: grid; gap: 10px; margin-top: 8px; }
.screen { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: #FBFCFD; }
.screen .src { justify-self: start; }
.screen.sub { margin-left: 24px; }
@media (max-width: 480px) { .screen.sub { margin-left: 12px; } }
@media (max-width: 480px) { .screen { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.dmenu { position: relative; }
.dmenu > summary { list-style: none; }
.dmenu > summary::-webkit-details-marker { display: none; }
.dm-pop { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; min-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(23, 38, 58, 0.16); padding: 8px; display: grid; gap: 4px; }
.dm-row { display: grid; grid-template-columns: minmax(110px, auto) 1fr auto; gap: 14px; align-items: center; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; }
.dm-row:hover { background: #F6F8FB; }
/* card tools: caption + x-ticks, as LIVIA cLIP */
.card-tools { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; justify-content: flex-end; }
.xt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.xt input { width: 62px; font: 12.5px var(--mono); padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; }
/* LIVIA's figure export bar (↓ SVG · ↓ PNG · W · H · font ×), for the SVG figures too */
.xbar { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; justify-content: center; margin-top: 6px; font-size: 0.72rem; color: #6B6B6B; }
.xbar button { font-size: 0.72rem; color: #2471A3; background: none; border: none; cursor: pointer; font-weight: 600; padding: 0 6px; }
.xbar input { width: 58px; font-size: 0.7rem; padding: 1px 3px; color: #555; }
@media (max-width: 720px) { .dm-pop { min-width: 0; width: calc(100vw - 40px); } .dm-row { grid-template-columns: 1fr; gap: 4px; } }
.flags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.flags:empty { display: none; }
.card { scroll-margin-top: calc(var(--top-h) + 64px); }   /* scrollIntoView leaves room for the sticky header + section bar */
/* partner table: fits the card — colored numbers instead of bars, stacked source badges, truncated names */
.pt td.v { font-weight: 400; }   /* weight comes from the FPR band (BAND_W) */
.pt td.srcc { white-space: normal; max-width: 130px; }
.pt td.srcc .src { margin: 1px 4px 1px 0; }
.pt td.nm { max-width: 250px; }
/* phones: the overview and its ranked list shrink to the screen */
@media (max-width: 900px) { .overview { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .toplist li, .tl-head { grid-template-columns: 18px minmax(52px, 1fr) 12px repeat(4, 42px) 36px; gap: 4px; padding: 5px 4px; }
  .toplist.one li, .tl-head.one { grid-template-columns: 18px minmax(52px, 1fr) 12px repeat(2, 48px); }
  .tl-c { font-size: 0; } .tl-c .mdot { margin: 0; }
  .tl-head span:nth-child(3) { visibility: hidden; }
  .toplist .num { font-size: 11.5px; }
}
@media (max-width: 720px) { .subnav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; } .subnav button { flex: none; } }
.cite { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.cite a { color: var(--blue); }
.src-line a { color: var(--blue); }
.totals { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.totals b { font-family: var(--mono); color: var(--ink); font-weight: 600; }
.beta { font: 700 10px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #B45309; background: #FEF3C7; padding: 3px 6px; border-radius: 5px; margin-left: 2px; align-self: flex-start; margin-top: 2px; }
table.cuts { border-collapse: collapse; margin: 14px 0 6px; font-size: 13.5px; width: 100%; }
table.cuts caption { caption-side: top; text-align: left; font-size: 13px; color: var(--ink-2); padding-bottom: 6px; }
table.cuts th, table.cuts td { padding: 6px 14px 6px 0; text-align: left; border-bottom: 1px solid var(--line-2); }
table.cuts td, table.cuts thead th:not(:first-child) { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
table.cuts td { font-family: var(--mono); font-weight: 600; }
table.cuts thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; }
/* home hero: one centered column — headline, text, search, totals, examples, then the TP53 preview */
.hero-center { --col: 800px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 0 28px; }   /* one column under the title */
.hero-center h1 { max-width: 30ch; margin-inline: auto; }
.hero-center p.lede { max-width: var(--col); margin-inline: auto; text-wrap: balance; }   /* beats .hero p.lede's 62ch */
.hero-center .hero-search { width: 100%; max-width: var(--col); }
.hero-center .totals, .hero-center .chips { justify-content: center; }
.hero-center .chips { max-width: var(--col); column-gap: 18px; row-gap: 10px; }
.chip-group { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }   /* a species keeps its examples */
.hero-center .showcase { width: 100%; max-width: var(--col); margin-top: 34px; text-align: left; }
.showcase span.q { color: var(--query-t); font-weight: 600; }
.showcase .sc-own { margin-top: 10px; font-size: 13px; color: var(--ink-2); }   /* the way from the Atlas to cLIP on your own data */
.showcase .sc-own a { color: var(--blue); font-weight: 600; text-decoration: none; }
.showcase .sc-own a:hover { text-decoration: underline; }   /* cLIP and its initials, as the title's teal (beats .sc-top span) */
.sg .sub .sp-tag { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--line-2); border-radius: 5px; padding: 1px 6px; margin-right: 6px; }
.seq-flow .out { color: #B9C2CD; }
.chips .lbl.sp { margin-left: 10px; }
select { max-width: 100%; }
.setbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -6px 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card, #fff); font-size: 14px; color: var(--ink-2); }
.setchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.setchips > span { color: var(--ink-3); margin-right: 2px; }
.setchips a.src { text-decoration: none; }
.scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scope .lbl { color: var(--ink-3); margin-right: 2px; }
.scope .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.scope-chip { text-decoration: none; cursor: pointer; }
.scope-chip .n { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-left: 3px; }   /* ink, not the chip color: readable on every chip */
.scope-chip.on .n { color: inherit; }
.scope-chip.all { --c: #5B6B7F; }
.scope-chip.on { background: var(--c); color: #fff; }
.scope-chip.on .n { opacity: .9; }
.scope-chip:not(.on):hover { box-shadow: inset 0 0 0 1px var(--c); }
.scope-chip:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.setbar[hidden] { display: none; }
.isorow { margin: -4px 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card, #fff); }   /* a gene's isoforms, one shown at a time */
.isorow[hidden] { display: none; }
table.sets { width: 100%; border-collapse: collapse; font-size: 14px; }
.sets th, .sets td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.sets thead th { font-size: 12px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sets .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.sets tr.set-grp th { padding: 16px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.sets .set-name { white-space: nowrap; }
.sets .set-name i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; vertical-align: 0; }
.sets .set-name a { font-weight: 600; }
.sets .set-bar { width: 24%; min-width: 110px; }
.sets .set-bar div { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.sets .set-bar span { display: block; height: 100%; border-radius: 3px; opacity: .8; }
.sets tbody tr:not(.set-grp):hover td { background: #FAFBFD; }
.sets thead th, .sets tr.set-grp th { font-family: var(--sans); }
.sets .set-cite { margin-left: 10px; font-size: 12.5px; font-weight: 400; }
@media (max-width: 600px) { .sets th:nth-child(3), .sets td:nth-child(3), .sets th:nth-child(5), .sets td:nth-child(5) { display: none; } .sets .set-name { white-space: normal; } }
.sets thead th.n { font-family: var(--sans); color: var(--ink-3); }
@media (max-width: 600px) { .sets .set-cite { display: block; margin: 2px 0 0 19px; } }
/* a gene's isoforms side by side (protein page) */
.isotbl tbody tr.on td, .isotbl tbody tr.on:hover td { background: var(--blue-soft); }
.isotbl .iso-top { font-size: 13px; color: var(--ink-2); min-width: 220px; }
.isotbl .iso-top a { font-weight: 500; }
.isotbl .iso-top .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
@media (max-width: 600px) { .sets.isotbl th:nth-child(3), .sets.isotbl td:nth-child(3) { display: table-cell; }
  .sets.isotbl th:nth-child(2), .sets.isotbl td:nth-child(2), .sets.isotbl th:nth-child(6), .sets.isotbl td:nth-child(6) { display: none; } }

/* About: text and tables fill the reading column */
.about p { max-width: none; }
.refs { margin: 4px 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.refs-h { margin: 14px 0 6px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.card > .refs-h:first-of-type { margin-top: 4px; }
.refs li { line-height: 1.5; }
.refs a { word-break: break-word; }
/* a partner folded as several isoforms or constructs: a tag on its row; in the partner table the tag opens one row per construct */
.iso-tag { display: inline-block; font: 600 11px/1.5 var(--sans); color: var(--navy); background: var(--blue-soft); border: 0; border-radius: 999px; padding: 0 7px; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
button.iso-tag { cursor: pointer; }
button.iso-tag:hover { background: #D6E6F3; }
button.iso-tag:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pt tr.iso-sub td { background: #FAFCFE; font-size: 12.5px; }
.pt tr.iso-sub td.g { padding-left: 26px; color: var(--ink-2); font-weight: 500; }

/* Top partners: the name and its isoform tag share one cell (a long name is cut, the numbers keep their columns);
   the FPR key's swatches wrap together, never one by one */
.tl-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tl-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tl-name .iso-tag { flex: none; margin-left: 0; }
.tl-keys { display: inline-flex; flex-wrap: nowrap; gap: 12px; white-space: nowrap; }

/* a partner whose runs all repeat another partner's sequence pair (counted once, under that partner) */
.pt tr.rep td { color: var(--ink-3); }

/* binding sites: the page's one-line answer and a lane per site */
.sites-answer { font-size: 15px; line-height: 1.6; margin: 2px 0 12px; }
.sites-note { margin: 10px 0 0; font-size: 12.5px; }

/* status of reads from Zenodo: bottom center, above the page */
#loadbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; max-width: min(560px, calc(100vw - 32px)); padding: 9px 14px; border-radius: 10px;
  background: #1F2B3A; color: #F2F5F8; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 20px rgba(20, 30, 45, 0.25); }
#loadbar small { color: #C9D3DD; font-size: 12px; }
#loadbar.slow { background: #3A3320; }
#loadbar.fail { background: #5A2320; }
#loadbar button { margin-left: 8px; font: inherit; font-weight: 600; padding: 2px 10px; border-radius: 6px; border: 1px solid #F2F5F8; background: transparent; color: #F2F5F8; cursor: pointer; }
#loadbar .spin { display: inline-block; width: 11px; height: 11px; margin-right: 8px; border: 2px solid #8FA3B8; border-top-color: #F2F5F8; border-radius: 50%; vertical-align: -1px; animation: lb-spin 0.9s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #loadbar .spin { animation: none; } }

/* network builder: the list of proteins */
textarea.ids { width: 100%; box-sizing: border-box; font: 13.5px/1.5 var(--mono); padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #FBFCFD; color: var(--ink); resize: vertical; margin-top: 10px; }
textarea.ids:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
/* BioGRID key under a network */
.kbrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; flex-wrap: wrap; }
.kbkey .kbrow { gap: 6px 14px; margin-top: 0; }
.kbkey .kbrow span { display: inline-flex; align-items: center; gap: 6px; }
.kbkey .kbrow i { display: inline-block; width: 26px; height: 4px; border-radius: 2px; }
.kbkey .kbrow i.kb-dash { height: 0; border-top: 1.5px dashed #5B6573; border-radius: 0; }
.kbkey .kbrow i.kb-dot { height: 0; border-top: 2px dotted #5B6573; border-radius: 0; opacity: 0.8; }
.kbkey .kbrow i.kb-grad { width: 70px; background: linear-gradient(90deg, #C5CCD4, #1E2A38); }

#sites-answer a, .res-look a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }   /* links in running text are not told apart by color alone */
.muted a:not(.btn), footer a, .reading p a, .reading caption a, .reading li a, .crumbs a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }   /* links in notes and the footer */

.kb-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border: 1px solid #E6B8BF; border-radius: 999px; background: #FDF1F3; color: #8E1B2C; font-size: 13px; font-weight: 600; text-decoration: none; }   /* a reported interaction: jumps to its references */
.kb-badge:hover { background: #FAE3E7; }
.pt.ref-tbl { width: 100%; table-layout: fixed; }
.pt.ref-tbl th:nth-child(1) { width: 90px; } .pt.ref-tbl th:nth-child(2) { width: 150px; } .pt.ref-tbl th:nth-child(4) { width: 170px; } .pt.ref-tbl th:nth-child(5) { width: 64px; }
.pt.ref-tbl td.t, .pt.ref-tbl td.a { white-space: normal; line-height: 1.4; }

.lede-src { margin: -6px auto 18px; max-width: 640px; font-size: 13.5px; color: var(--ink-3); text-align: center; }   /* the source line under the home lede */
.lede a, .lede-src a { text-decoration: underline; text-underline-offset: 2px; }   /* links in running text */
.dev-note { margin: -8px auto 18px; max-width: 640px; width: fit-content; padding: 5px 12px; font-size: 12.5px; color: #92400E; background: #FEF3C7; border: 1px solid #F0DDA4; border-radius: 8px; text-align: center; }   /* the home page's note that the Atlas changes often */
.dev-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legend-text { margin: 2px 0 6px; font-size: 13px; color: var(--ink-3); }   /* a legend's sentence, above its swatches */
.lede span.q { color: var(--query-t); font-weight: 700; }   /* the letters that spell cLIP */
.cite-link { font: 500 13px var(--sans); color: var(--ink-3); background: none; border: 0; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; align-self: center; }
.cite-link:hover { color: var(--blue); }
.tbl-find { display: block; margin: 0 0 8px auto; width: 200px; }   /* a table's filter box */
.pt th.sortable { cursor: pointer; }
table.cuts td.mdl { color: var(--ink-3); text-align: left; font-variant-numeric: normal; } table.cuts tr.avg td, table.cuts tr.avg th { border-top: 0; }
.clinfo a.kb-p, .clinfo a.kb-g { padding: 0 3px; margin: 0 -1px; }   /* in running lists, a tighter mark, so the comma stays next to the name */

/* Find partner suggestions: the partner's name with its iLIS (colored by the FPR band it passes) and its cluster's dot */
.psug { position: fixed; z-index: 60; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(23, 38, 58, 0.16); padding: 4px; }
.psug[hidden] { display: none; }
.psug-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--ink); }
.psug-row.on, .psug-row:hover { background: var(--blue-soft); }
.psug-n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psug-v { font-size: 13px; }
.psug-more { padding: 6px 10px 4px; font-size: 12.5px; color: var(--ink-3); }

.nlab { display: block; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.nlab textarea.ids { font-weight: 400; margin-top: 6px; }

.ex-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-row { max-width: 100%; }
.ex-row select { max-width: min(360px, 100%); }
.ex-row label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }   /* the picker shrinks to the row, not to its longest name */
.ex-row label select { min-width: 0; flex: 1 1 auto; }
.kscan { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); max-width: 100%; overflow-x: auto; }
.kscan p { margin: 0 0 6px; }
.kscan .btn { padding: 2px 8px; font-size: 13px; }
.kscan-body { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 720px) { .kscan-body { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/* One control height and one type size in every control row: buttons, dropdowns, number and search boxes, and segmented
   buttons share 32 px and 13 px, so their tops, bottoms and text line up (larger stand-alone buttons keep .btn's 38 px). */
:root { --ctl-h: 32px; }
.controls .btn, .ex-row .btn { height: var(--ctl-h); padding: 0 12px; font-size: 13px; border-radius: 8px; }
.controls select, .controls input[type=search], .controls input[type=number], .controls input[type=text], .ex-row select { box-sizing: border-box; height: var(--ctl-h); padding: 0 8px; font-size: 13px; line-height: normal; }
.controls .seg { box-sizing: border-box; height: var(--ctl-h); }
.controls .seg button { display: inline-flex; align-items: center; height: 100%; padding: 0 11px; font-size: 13px; }
.controls input[type=checkbox], .controls input[type=radio] { margin: 0; vertical-align: middle; }
.controls label:has(> input[type=checkbox]) { display: inline-flex; align-items: center; gap: 6px; }
.ex-row label select { flex: 0 1 360px; width: auto; }   /* the label is as wide as the picker, not its longest example name */
.tag-alpha { display: inline-block; margin-left: 2px; padding: 1px 5px; border-radius: 5px; font: 700 10px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fpr10); background: #FFF4D6; border: 1px solid #F0DDA4; }
.tag-afdb { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font: 600 10.5px var(--sans); color: var(--ink-3); background: var(--line-2); border: 1px solid var(--line); vertical-align: 1px; white-space: nowrap; }
.khint { margin: -4px 0 8px; font-size: 13px; }
.khint:empty { display: none; }
.ctl[hidden], .controls [hidden] { display: none !important; }   /* hidden wins over the controls' own display */
.card.dropping { outline: 2px dashed var(--blue); outline-offset: -6px; background: var(--blue-soft); }   /* a file is being dragged over the card */
.miss { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--fpr10); background: #FFF8E6; border-radius: 0 8px 8px 0; font-size: 13px; color: var(--ink-2); display: grid; gap: 3px; }
.miss b { color: var(--ink); font-weight: 600; }
/* The network's options in labeled rows: what the pairs show, how proteins are colored or hidden, the layout and its groups,
   sharing, and exploring. Related settings stay on one row whatever the width. */
.optgrid { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 14px; align-items: center; margin: 10px 0 8px; }
.optgrid .controls { margin: 0; }
.optlab { font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 640px) { .optgrid { grid-template-columns: minmax(0, 1fr); gap: 4px; } .optlab { margin-top: 6px; } }

/* network: the partner count, its unit, auto and Suggest in one evenly spaced group */
#nw-k-wrap { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#nw-k-wrap .ctl { gap: 4px; }

.miss[hidden] { display: none !important; }   /* the not-found box keeps its own display rule; hidden must still win */
/* the network page's species picker: a search box over a scrolling, grouped list */
.sp-combo { position: relative; display: inline-block; }
.sp-combo input.sp-combo-in { box-sizing: border-box; width: 280px; max-width: 100%; height: var(--ctl-h); padding: 0 26px 0 8px; font: 13px var(--sans); color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23627085' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center; border: 1px solid var(--line); border-radius: 7px; }
.sp-combo-in:focus { outline: 2px solid #2E6A9E; outline-offset: 0; }
.sp-combo-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: max(100%, 320px); max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(23, 38, 58, 0.14); padding: 4px 0; }
.sp-combo-g { position: sticky; top: -4px; padding: 6px 12px 4px; font: 600 11px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: #fff; }
.sp-combo-o { padding: 5px 12px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-combo-o i { color: var(--ink-3); font-size: 12px; }
.sp-combo-o.cur { font-weight: 600; }
.sp-combo-o.act, .sp-combo-o:hover { background: var(--line-2); }
.sp-combo-none { padding: 8px 12px; font-size: 13px; color: var(--ink-3); }
/* the protein page's partner table: every score fits without sideways scrolling on a laptop screen */
#c-pt .pt th { padding: 8px 6px; font-size: 11.5px; letter-spacing: 0; }
#c-pt .pt td { padding: 6px 6px; }
#c-pt .pt td.n { font-size: 12.5px; }
#c-pt .pt th:first-child, #c-pt .pt td:first-child { padding-left: 10px; }
/* phones: a segmented control in a control row may take two lines per button rather than clip its text */
@media (max-width: 480px) { .controls .seg { height: auto; min-height: var(--ctl-h); } .controls .seg button { height: auto; min-height: var(--ctl-h); padding: 4px 8px; line-height: 1.25; } }
@media (max-width: 480px) { .sp-combo { max-width: calc(100vw - 150px); } .sp-combo input.sp-combo-in { width: 100%; } .sp-combo-list { width: min(320px, calc(100vw - 40px)); } }   /* phones: the species picker stays inside its card */

/* ── orthologs: the protein's orthologs and their cLIP, aligned ── */
.orth-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; font-size: 13.5px; }
.orth-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.orth-grid { border-collapse: collapse; font-size: 13px; }
.orth-grid th, .orth-grid td { padding: 3px 8px; border-bottom: 1px solid var(--line-2); text-align: right; }
.orth-grid thead th { font-weight: 600; }
.orth-grid tbody th { text-align: left; font-weight: 600; }
.orth-grid td[title] { cursor: help; background: #F2F6FA; }
.orth-pairs { list-style: none; margin: 0; padding: 0; font-size: 13px; display: grid; gap: 4px; }
.orth-none #orth-list, .orth-none #orth-wrap, .orth-none #orth-site, .orth-none #orth-key, .orth-none #orth-shared, .orth-none .xt { display: none; }
#orth-site:not(:empty) { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; }
.orth-site-head { margin-bottom: 6px; }
.orth-sh { margin-top: 8px; font-size: 13.5px; }
.orth-sh summary { cursor: pointer; padding: 2px 0; }
.orth-sh summary:hover b { text-decoration: underline; }
.orth-sh[open] summary { margin-bottom: 4px; }