src/frontend/styles.css

:root {
  --dark: #141c25; --blue: #3b8bbf; --blue-d: #357aa8; --line: #e2e6ea;
  --text: #2c3744; --muted: #8a97a4; --ok: #2e7d52; --warn: #8a5a00;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: #f7f9fb;
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
html.panel-open, body.panel-open { overflow: hidden; }

.topbar { display: flex; align-items: center; background: var(--dark); color: #fff; height: 56px; padding: 0 18px; }
.brand { font-weight: 800; letter-spacing: 1px; font-size: 19px; }
.topbar-title { flex: 1; text-align: center; font-weight: 700; font-size: 18px; }
.basket-btn { display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; background: transparent; color: #dbe5ec; border: 1px solid #43515f; border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.basket-btn:hover { color: #fff; background: #1d2a36; border-color: #667786; }
.basket-btn:focus-visible { outline: 2px solid #8bc7ed; outline-offset: 2px; }
.basket-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; color: #fff; background: var(--blue); border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

.category-select { width: 100%; padding: 10px 12px; border-radius: 7px; border: 1px solid #33424f; background: #1d2731; color: #fff; font-size: 15px; cursor: pointer; }
.category-select:focus { outline: none; border-color: var(--blue); }
.category-select option:disabled { color: #7d8b98; }
/* The search bar in code-lookup mode: monospace, because what goes in it is a
   code. The placeholder stays proportional so the hint reads as prose. */
.query-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.query-code::placeholder { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.layout { display: flex; min-height: calc(100vh - 56px); }
.sidebar { width: 270px; flex-shrink: 0; background: var(--dark); color: #cdd6df; padding: 22px 20px; }
.side-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin: 22px 0 8px; color: #fff; }
.side-label:first-child { margin-top: 0; }
#system-filters, #code-lookup { margin-top: 26px; border-top: 1px solid #2a3742; padding-top: 14px; }
/* The count box doubles as a vertical scrubber. The chevrons and the
   ns-resize cursor are the whole affordance; clicking without dragging
   focuses it for typing as usual. */
.k-input { width: 100%; padding: 10px 30px 10px 12px; border-radius: 7px; border: 1px solid #33424f; background: #1d2731; color: #fff; font-size: 15px;
  cursor: ns-resize; touch-action: none; appearance: textfield; -moz-appearance: textfield;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" viewBox="0 0 10 18"><path d="M2 6.5 5 3.5 8 6.5 M2 11.5 5 14.5 8 11.5" fill="none" stroke="%238fa1b0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat; background-position: right 10px center; }
.k-input::-webkit-outer-spin-button, .k-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.k-input:focus { outline: none; border-color: var(--blue); cursor: text; }
.filters { margin: 4px 0; }
.filter-opt { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.filter-opt input { accent-color: var(--blue); width: 15px; height: 15px; }
/* The last selected code system: it stays checked and cannot be cleared, since
   a search over no code system has nothing to return. Dimmed rather than
   hidden so it still reads as a choice that exists; the row's title says why. */
.filter-opt-locked { cursor: not-allowed; opacity: .55; }
.filter-opt-locked input { cursor: not-allowed; }
/* Collapsed Advanced group: ranking model + result count live here. */
.advanced { margin-top: 26px; border-top: 1px solid #2a3742; padding-top: 14px; }
.advanced > summary { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #8fa1b0; cursor: pointer; }
.advanced > summary:hover, .advanced[open] > summary { color: #fff; }
.advanced .side-label { margin-top: 16px; }
.export { width: 100%; margin-top: 30px; background: var(--blue); color: #fff; border: 0; border-radius: 6px; padding: 11px; font-size: 14px; cursor: pointer; }
.export:hover { background: var(--blue-d); }

.content { flex: 1; min-width: 0; max-width: 1080px; margin: 0 auto; padding: 30px 24px 70px; width: 100%; overflow-x: clip; }
.search-for { text-align: center; font-size: 12px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin: 6px 0 14px; }
/* The caption retires once there are results, but it keeps its space rather
   than collapsing: display:none would pull the search bar upward and the whole
   page would jump under the user's cursor mid-task. */
.caption-off { visibility: hidden; }
.search-row { display: flex; gap: 8px; }
.query-wrap { position: relative; flex: 1; display: flex; }
/* Recent searches for the current category. Opens on click with the full list;
   a <datalist> only opens while typing and paints a caret inside the field. */
.recent-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 28px rgba(20, 28, 37, .13); }
.recent-item { padding: 8px 12px; border-radius: 6px; font-size: 15px; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 10px; }
.recent-item:hover, .recent-item.active { background: #eaf3fb; }
.recent-item .recent-when { margin-left: auto; font-size: 12px; color: var(--muted); }
.recent-empty { padding: 8px 12px; font-size: 14px; color: var(--muted); }
.query { flex: 1; padding: 13px 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 16px; }
.query:focus { outline: none; border-color: var(--blue); }
.search-btn { background: var(--blue); color: #fff; border: 0; border-radius: 9px; padding: 0 26px; font-size: 15px; font-weight: 600; cursor: pointer; }
.search-btn:hover { background: var(--blue-d); }
.examples { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }
.examples a { color: var(--blue); cursor: pointer; }
.examples a:hover { text-decoration: underline; }

/* -- query planner -------------------------------------------------------- */
/* Sidebar mode switch: a segmented control, not a dropdown, so both modes are
   visible at once and the tool never looks like it only does one thing. */
.mode-switch { display: flex; gap: 4px; background: #1d2731; border: 1px solid #33424f; border-radius: 8px; padding: 3px; margin-bottom: 22px; }
.mode-btn { flex: 1; background: transparent; color: #9dabb8; border: 0; border-radius: 6px; padding: 9px 4px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mode-btn:hover { color: #fff; }
.mode-btn.on { background: var(--blue); color: #fff; }
.mode-btn:focus-visible { outline: 2px solid #8bc7ed; outline-offset: 1px; }
/* resize:none removes the drag handle the browser draws in the bottom-right
   corner of a textarea, which read as stray "//" glyphs against the border. */
.plan-query { resize: none; min-height: 52px; font-family: inherit; line-height: 1.45; }
/* Streamed reasoning. Fixed height with its own scroll so a 16,000-character
   monologue never pushes the plan off the screen; muted and monospaced so it
   reads as the model's working notes rather than as a result. */
/* One complete sentence of the model's reasoning at a time, at reading pace.
   The full text stays available underneath, verbatim. */
.cot { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; }
.cot > summary { padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.cot > summary:hover { color: var(--text); }
.cot-text { max-height: 190px; overflow-y: auto; margin: 0; padding: 0 12px 12px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #6b7885; white-space: pre-wrap; word-break: break-word; }

.side-link { display: block; background: none; border: 0; color: #8bc7ed; font: inherit; font-size: 12px; padding: 8px 0 0; cursor: pointer; }
.side-link:hover { text-decoration: underline; }

/* Add-a-model dialog. The element is its own backdrop so it never collides
   with the drawer's #overlay. */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(20, 28, 37, .55); padding: 20px; }
.modal-card { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 18px 50px rgba(20, 28, 37, .3); }
.modal-card h3 { margin: 0 0 14px; font-size: 17px; }
.modal-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin: 14px 0 5px; }
.modal-input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 14px; background: #fff; color: var(--text); }
.modal-input:focus { outline: none; border-color: var(--blue); }
.modal-note { font-size: 12px; color: #6b7885; background: #f5faff; border: 1px solid #c7dcf1; border-radius: 7px; padding: 9px 11px; margin: 18px 0 0; line-height: 1.55; }
/* Announced by screen readers, never painted: the visible counter next to it
   updates 4x a second and would be unbearable in a live region. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.modal-error { color: #b3403c; font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.modal-text { font-size: 14px; color: var(--text); margin: 0; line-height: 1.5; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; }
.modal-actions .search-btn { padding: 9px 20px; border-radius: 8px; }

/* The plan bar persists across searches, so it reads as a standing worklist
   rather than as the result of the last action. */
.plan-bar { border: 1px solid #c7dcf1; background: #f5faff; border-radius: 10px; padding: 12px 14px; margin-top: 18px; }
.plan-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.plan-head-q { flex: 1; font-weight: 600; color: #24486e; font-size: 14px; }
.plan-note { color: #5a6773; font-size: 14px; margin: 0 0 8px; }
.plan-chips, .plan-constraints { margin-bottom: 0; align-items: center; }
.plan-constraints { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #c7dcf1; }
/* The chip shell carries the border; the label and the pencil are separate
   controls inside it (nested <button>s would be invalid markup). */
.plan-chip { display: inline-flex; align-items: stretch; background: #fff; border: 1px solid #bcdcec; border-radius: 14px; overflow: hidden; font-size: 13px; }
.plan-chip-go { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: #1f6f9e; font: inherit; padding: 3px 8px 3px 11px; cursor: pointer; }
.plan-chip-go:hover { background: var(--blue); color: #fff; }
.plan-chip-go:hover .mention-cat { color: #dbe9f3; }
.plan-chip-edit { background: none; border: 0; border-left: 1px solid #dcecf4; color: var(--muted); font: inherit; font-size: 11px; padding: 0 8px; cursor: pointer; }
.plan-chip-edit:hover { background: var(--blue); color: #fff; }
/* Green marks the chip currently being looked at. Exactly one at a time, so
   it reads as focus rather than as an accumulating tally. */
.plan-chip.current { background: #e8f3ea; border-color: #7fb894; box-shadow: 0 0 0 2px rgba(46,125,82,.14); }
.plan-chip.current .plan-chip-go { color: var(--ok); font-weight: 600; }
.plan-chip.current .plan-chip-go .mention-cat { color: #5d9575; }
.plan-chip.current .plan-chip-edit { border-left-color: #cfe3d5; }

.plan-chip.editing { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(59,139,191,.18); }
.plan-chip-input { border: 0; outline: none; font: inherit; font-size: 13px; color: var(--text); padding: 3px 4px 3px 11px; min-width: 70px; background: transparent; }
.plan-chip-ok, .plan-chip-cancel { background: none; border: 0; border-left: 1px solid #dcecf4; font: inherit; font-size: 12px; padding: 0 8px; cursor: pointer; }
.plan-chip-ok { color: var(--ok); }
.plan-chip-ok:hover { background: var(--ok); color: #fff; }
.plan-chip-cancel { color: var(--muted); }
.plan-chip-cancel:hover { background: #d9534f; color: #fff; }
/* Constraints are deliberately styled as inert text, never as chips that
   look clickable: ENCODE does not filter on them. */
.constraint-chip { background: #fff; border-style: dashed; color: #6b7885; }

.status { color: #5a6773; font-size: 14px; margin: 22px 0 10px; min-height: 20px; }
.results { display: flex; flex-direction: column; gap: 14px; }
.results-list { display: flex; flex-direction: column; gap: 14px; }

/* empty state */
.empty { text-align: center; color: var(--muted); padding: 48px 10px; }
.empty-title { font-size: 26px; font-weight: 400; color: #6b7885; margin: 0 0 10px; }
.empty-sub { font-size: 15px; margin: 0 0 18px; }
.empty-try { font-size: 14px; margin-bottom: 8px; }
.example-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.example-chip { background: #fff; border: 1px solid var(--line); color: var(--blue); border-radius: 16px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.example-chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.empty-link { color: var(--blue); cursor: pointer; }
.empty-link:hover { text-decoration: underline; }
.empty-dot { color: var(--muted); }

/* code-result filter chips (narrow the table by code type) */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.filter-bar:empty { display: none; }
.fchip { background: #fff; border: 1px solid var(--line); color: #5a6773; border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.fchip:hover { border-color: var(--blue); color: var(--blue); }
.fchip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.fchip-all { font-weight: 600; color: var(--blue); border-color: #bcdcec; background: #f8fbfd; }
.fchip-all:hover { background: #eef5fa; }
.fchip-all:disabled { color: var(--muted); border-color: var(--line); background: #f3f6f8; cursor: default; }
.fchip-all:disabled:hover { background: #f3f6f8; border-color: var(--line); }
.fchip:disabled { color: var(--muted); border-color: var(--line); background: #f3f6f8; cursor: default; }

/* Client-side pages over the one fetched result set. */
.pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; }
.pager-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.filter-empty { color: var(--muted); font-size: 14px; padding: 18px 4px; text-align: center; }

/* code results table */
.table-wrap { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; background: #fff; }
.code-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.code-table th { text-align: left; font-weight: 600; color: #6b7885; background: #f6f8fa; border-bottom: 1px solid var(--line); padding: 12px 14px; white-space: nowrap; }
.code-table td { border-bottom: 1px solid #eef1f4; padding: 11px 14px; vertical-align: top; }
.code-table tbody tr:last-child td { border-bottom: 0; }
.code-table tbody tr { transition: background-color .12s; }
.code-table tbody tr:hover { background: #f9fbfc; }
.code-table tbody tr.row-click:hover { background: #e7f1f9; box-shadow: inset 3px 0 0 var(--blue); }
.ann-cell { text-align: center; width: 62px; }
.ann-cell input { accent-color: var(--blue); width: 15px; height: 15px; cursor: pointer; }
.col-rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 54px; }
.col-type { color: #5a6773; white-space: nowrap; }
/* Phenotype code-evidence summary: wraps, so the table fits and the
   Relevance column stays on screen. */
.col-codes { white-space: normal; min-width: 110px; max-width: 210px; }
.col-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #2c5e7e; word-break: break-all; max-width: 280px; }
.col-rel { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); width: 84px; white-space: nowrap; }
.col-desc { color: var(--text); min-width: 160px; }
.col-code span { font-family: inherit; }
/* Rows open the code detail drawer; the chevron is the visible affordance. */
.code-table tbody tr.row-click { cursor: pointer; }
.code-table tbody tr.row-click:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.derived-map { color: #a06a00; }
.code-detail-title { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* phenotype card head: rank badge + single relevance */
.rank-badge { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--blue); background: #e8f2f9; border: 1px solid #bcdcec; border-radius: 6px; padding: 1px 8px; font-size: 13px; }
.card-head-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.rel-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.rel-value { font-size: 17px; font-weight: 700; color: #1f6f9e; font-variant-numeric: tabular-nums; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.card-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 17px; }
.tag { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; }
.tag-ok { color: var(--ok); border-color: #bfe3cd; }
.tag-kind { color: #1f6f9e; border-color: #bcdcec; background: #f5faff; }
.tag-warn { color: var(--warn); border-color: #e8d9a8; background: #fdf6e3; }

/* Collect + the grade control as one group, matching the order and adjacency
   of the first two columns of the code-search table. */
.ann-box { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ann-box .collect-btn { margin-right: 2px; }

/* Single-select grade: one segmented control, click the active grade to clear. */
.grade-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; }
.grade-opt { background: none; border: 0; border-left: 1px solid var(--line); padding: 4px 10px; font: inherit; font-size: 12px; color: #5a6773; cursor: pointer; white-space: nowrap; }
.grade-opt:first-child { border-left: 0; }
.grade-opt:hover { background: #f2f6f9; color: var(--blue); }
.grade-opt.on { background: var(--blue); color: #fff; }
.grade-opt:focus-visible { outline: 2px solid #8bc7ed; outline-offset: -2px; }
.grade-seg-compact .grade-opt { padding: 3px 8px; font-size: 11px; }
.ann-cell-grade { width: auto; text-align: left; white-space: nowrap; }

.summary { color: #5a6773; margin: 10px 0 12px; }
.scores { display: flex; flex-direction: column; gap: 5px; max-width: 440px; margin-bottom: 10px; }
.score { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.score-primary .score-label, .score-primary .score-val { color: var(--text); font-weight: 700; }
.score-primary .score-fill { background: #1f6f9e; }
.score-label { width: 64px; color: var(--muted); }
.score-track { flex: 1; height: 6px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.score-fill { height: 100%; background: var(--blue); }
.score-val { width: 44px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-static { font-size: 11px; color: #5a6773; background: #f1f5f8; border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px; }
.warning { background: #fdf6e3; border: 1px solid #e8d9a8; color: var(--warn); border-radius: 7px; padding: 7px 10px; font-size: 13px; margin: 6px 0; }

.notice { border-radius: 7px; padding: 8px 12px; font-size: 14px; margin: 0 0 12px; }
.notice-suggest { background: #eef4fb; border: 1px solid #c7dcf1; color: #24486e; }
.notice-mentions { background: #f5faff; border: 1px solid #c7dcf1; color: #24486e; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mentions-lead { font-weight: 600; font-size: 13px; }
.mention-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #bcdcec; color: #1f6f9e; border-radius: 14px; padding: 3px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.mention-chip:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.mention-chip:hover .mention-cat { color: #dbe9f3; }
.mention-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.notice-low { background: #fdf6e3; border: 1px solid #e8d9a8; color: var(--warn); }
.suggest-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--blue); cursor: pointer; }
.suggest-link:hover { text-decoration: underline; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.card-foot-actions { display: flex; align-items: center; gap: 14px; }
.link { background: none; border: 0; color: var(--blue); cursor: pointer; font-size: 14px; padding: 0; }
.link:hover { text-decoration: underline; }
.pid { color: var(--muted); font-size: 12px; }

.submit-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 26px; }
.annotator { padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; font-size: 14px; min-width: 220px; }
.submit-btn { background: var(--blue); color: #fff; border: 0; border-radius: 7px; padding: 11px 22px; font-size: 14px; cursor: pointer; }
.submit-btn:hover { background: var(--blue-d); }
.submit-msg { color: var(--ok); font-size: 13px; }

/* Result grading is opt-in (sidebar → Advanced → Validation & Feedback). The
   controls are hidden by CSS from one class on <body> rather than by skipping
   their construction, so the grade column header and its cells can never fall
   out of step with each other, and a grade already picked survives a toggle. */
.ann-col-grade, .ann-cell-grade, .grade-seg, .submit-row { display: none; }
body.review-mode .ann-col-grade, body.review-mode .ann-cell-grade { display: table-cell; }
body.review-mode .grade-seg { display: inline-flex; }
body.review-mode .submit-row:not(.hidden) { display: flex; }

/* Absence marker, e.g. a VA lab test with no LOINC. Reads as an aside next to
   the code, not as a warning: an unmapped code is a fact, not an error. */
.tag-muted { background: #eef1f4; color: #6b7a87; border: 1px solid var(--line); margin-left: 8px;
             white-space: nowrap; }

/* Ignored-words panel under the toolbar while Merge duplicates is on: one
   chip per word (click removes), an add box, Reset once the list is edited. */
.merge-rules { margin: 2px 0 10px; }
.merge-rules .chips { margin-bottom: 4px; align-items: center; }
.chip-word { font-family: inherit; cursor: pointer; }
.chip-word:hover { text-decoration: line-through; border-color: #b3403c; color: #b3403c; }
.chip-add { font: inherit; font-size: 11px; color: var(--text); background: #fff;
            border: 1px dashed var(--line); border-radius: 5px; padding: 2px 8px; width: 84px; }
.chip-add:focus { outline: none; border-color: var(--blue); }
.chip-reset { font-size: 11px; }

/* Merged duplicate names. The face row's tag folds its hidden members out. */
button.tag { cursor: pointer; font-family: inherit; }
button.tag:hover, button.tag.on { color: var(--blue); border-color: var(--blue); }
.dupe-hidden { display: none; }
.dupe-member td { background: #fafcfe; }

.hidden { display: none; }

/* Fast tooltip. Fixed so it escapes any scroll container, pointer-events off
   so it can never sit between the cursor and what it explains. */
.tip { position: fixed; z-index: 60; max-width: 320px; background: #1d2731; color: #fff;
       border-radius: 6px; padding: 7px 10px; font-size: 12.5px; line-height: 1.45;
       box-shadow: 0 6px 20px rgba(20, 28, 37, .28); pointer-events: none;
       white-space: pre-line; }   /* titles carry \n bullet lists (merge rules) */

.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(640px, 94vw); background: #fff; border-left: 1px solid var(--line); padding: 24px 26px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; z-index: 20; box-shadow: -8px 0 30px rgba(0,0,0,.15); }
/* Sticky identity + grade header for the tabbed phenotype detail. */
.drawer-head { position: sticky; top: 0; z-index: 3; background: #fff; margin: -24px -26px 14px; padding: 24px 26px 0; border-bottom: 1px solid var(--line); }
.tab-bar { display: flex; gap: 18px; margin-top: 12px; }
.tab-btn { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 6px 2px 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tab-btn:hover { color: var(--blue); }
.tab-btn.on { color: var(--blue); border-bottom-color: var(--blue); }
.gen-note { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.chips-label { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); align-self: center; margin-right: 4px; }
.drawer.hidden, .overlay.hidden { display: none; }
.drawer-close { position: sticky; top: 2px; float: right; margin: -12px -10px 0 0; z-index: 4; background: none; border: 0; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; }
.drawer h2 { margin: 0 36px 8px 0; }
.drawer h4 { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--blue); }
.drawer-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.drawer ul { margin: 6px 0; padding-left: 18px; color: #5a6773; font-size: 13px; }
.help-list { margin: 6px 0; padding-left: 20px; font-size: 14px; }
.help-list li { margin: 5px 0; }
.help-defs { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.help-def b { margin-right: 6px; }
/* Corpus statistics in the About panel. Denser than the results table: it is
   read once, in a 640px drawer, and every column but the first is numeric. */
.corpus-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.corpus-table th { text-align: left; font-weight: 600; color: #6b7885; background: #f6f8fa; border-bottom: 1px solid var(--line); padding: 8px 10px; white-space: nowrap; }
.corpus-table td { border-bottom: 1px solid #eef1f4; padding: 7px 10px; white-space: nowrap; }
.corpus-table tbody tr:last-child td { border-bottom: 0; }
.corpus-num { text-align: right; font-variant-numeric: tabular-nums; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 10; }
.codegroup { border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; padding: 4px 10px; }
.codegroup summary { cursor: pointer; font-size: 14px; }
.codes { margin-top: 8px; }
/* Fixed columns — code, description, source — so the source reads as a column
   rather than floating after a description of unpredictable length. Mirrors the
   column layout of the code-search results table. */
.code-row {
  display: grid; grid-template-columns: 26px 104px 1fr 116px 24px; gap: 9px; align-items: center;
  padding: 4px 0; border-top: 1px solid #eef1f4; font-size: 12px;
}
.code-row .collect-icon { width: 24px; height: 24px; min-height: 24px; }
.code-act { display: flex; justify-content: center; }
.code-tree-btn { background: #f8fbfd; border: 1px solid #bcdcec; color: var(--blue); border-radius: 5px; width: 22px; height: 22px; padding: 0; font-size: 13px; line-height: 1; cursor: pointer; }
.code-tree-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
/* Group-level actions row inside a code group. */
.group-actions { display: flex; justify-content: flex-end; margin: 8px 0 2px; }
.group-add-all { background: #f8fbfd; border: 1px solid #bcdcec; color: var(--blue); border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.group-add-all:hover { background: #eef5fa; border-color: #7fb4d6; }
.code { color: #2c5e7e; font-family: ui-monospace, monospace; word-break: break-all; }
.code-label { color: var(--text); }
.code-label-gap { color: var(--muted); font-style: italic; }
/* Which vocabulary supplied the label; hover carries release and match detail. */
.code-src {
  justify-self: end; text-align: right; font-size: .72rem; letter-spacing: .02em;
  color: var(--muted); cursor: help; line-height: 1.3;
}
.code-src:empty { cursor: default; }
.code-src-approximate { font-style: italic; }

/* Algorithm components (professor 1.4) */
.algo-components { border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; }
.algo-row { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid #eef1f4; font-size: 13px; }
.algo-row:first-child { border-top: 0; }
.algo-key { flex-shrink: 0; width: 120px; color: var(--muted); font-weight: 600; }
.algo-val { color: #5a6773; }

/* More information -> CIPHER (professor 1.5) */
.drawer-more { margin-top: 18px; }
.cipher-link { display: inline-block; color: var(--blue); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; font-size: 14px; }
.cipher-link:hover { text-decoration: underline; }

/* knowledge-graph drawer (click a code -> parent/child ontology) */
.graph-drawer { z-index: 40; width: clamp(560px, 66vw, 1400px); }
.graph-overlay { z-index: 30; background: rgba(0,0,0,.25); }
.code-link { background: none; border: 0; padding: 0; font: inherit; color: #2c5e7e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.code-link:hover { color: var(--blue); text-decoration-style: solid; }
.code-cell-btn { word-break: break-all; text-align: left; }
.graph-sub { color: #5a6773; font-size: 13px; margin: 2px 0 14px; }
.graph-note { color: var(--muted); font-size: 12px; margin: 8px 2px 0; }
.graph-selection {
  margin: 0 0 12px; padding: 12px 14px; border: 1px solid #bcdcec;
  border-left: 4px solid var(--blue); border-radius: 8px; background: #f5faff;
}
.graph-selection:empty { display: none; }
.graph-selection h3 { margin: 0 0 8px; color: #234b65; font-size: 13px; }
.graph-selection-fields { margin: 0; display: grid; gap: 5px; }
.graph-selection-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
.graph-selection-row dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.graph-selection-row dd {
  margin: 0; color: var(--text); font-size: 13px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.graph-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfe; margin: 4px 0; }
.graph-svg { display: block; }
.graph-edge { fill: none; stroke: #cfd8e0; stroke-width: 1.4; }
.graph-edge-path { stroke: var(--blue); stroke-width: 2.5; }          /* the clicked root→…→code path */
.graph-rect { fill: #fff; stroke: var(--line); stroke-width: 1; }
.graph-rect-root { fill: #eef5fa; stroke: #bcdcec; }
.graph-rect-path { fill: #eaf3fb; stroke: #7fb4d6; stroke-width: 1.5; } /* ancestors on the path */
.graph-rect-current { fill: #cfe6f6; stroke: var(--blue); stroke-width: 2.5; } /* the clicked code */
.graph-rect-more { fill: #f6f8fa; stroke: #cbd5dd; stroke-dasharray: 4 3; }    /* "+N more" stub */
.graph-node-label { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #2c5e7e; }
.graph-node-cur { fill: #124b6b; font-weight: 800; }
.graph-node-more { fill: var(--muted); font-family: system-ui, sans-serif; font-weight: 500; }
.graph-node-sub { font: 11px system-ui, sans-serif; fill: #6b7885; }
.graph-node-clickable { cursor: pointer; }
.graph-node-clickable:hover .graph-rect { stroke: var(--blue); }
.graph-node-clickable:hover .graph-node-label { fill: var(--blue); }
.graph-node-clickable:focus { outline: none; }
.graph-node-clickable:focus .graph-rect { stroke: var(--blue); stroke-width: 2.5; }

@media (max-width: 700px) {
  .graph-selection-row { grid-template-columns: 1fr; gap: 1px; }
}

/* phenotype export + "view code hierarchy" triggers next to the code-groups heading */
.cg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cg-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.graph-btn { background: #eef5fa; color: var(--blue); border: 1px solid #bcdcec; border-radius: 6px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.graph-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* collected-codes basket */
.collect-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; background: #f8fbfd; border: 1px solid #bcdcec; color: var(--blue); border-radius: 6px; padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.collect-btn:hover { background: #eef5fa; border-color: #7fb4d6; }
.collect-btn:focus-visible { outline: 2px solid #8bc7ed; outline-offset: 2px; }
.collect-btn.on { background: #e8f2f9; color: #1f6f9e; border-color: #7fb4d6; }
.collect-mark { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; font-size: 14px; font-weight: 700; line-height: 1; }
.collect-btn.on .collect-mark { font-size: 12px; }
.collect-icon { width: 30px; height: 30px; min-height: 30px; padding: 0; }
.collect-icon .collect-mark { width: auto; height: auto; }
.basket-actions { display: flex; gap: 18px; align-items: center; margin: 10px 0 16px; }
.basket-list { display: flex; flex-direction: column; gap: 6px; }
.basket-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.basket-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.basket-desc { color: #5a6773; font-size: 13px; }
.basket-rm { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.basket-rm:hover { color: var(--warn); }

/* Family grouping: nested code families in the phenotype Codes tab. */
.codefam { border: 0; margin: 2px 0; padding: 0 0 0 2px; }
.codefam-sum { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px 0; border-top: 1px solid #eef1f4; font-size: 12px; }
.codefam-count { color: var(--muted); }
.codefam-sum .group-add-all { margin-left: auto; }
.codes-nested { margin-left: 22px; }
.codes-nested .code-row { grid-template-columns: 26px 88px 1fr 110px 24px; }

/* Family header rows in the grouped code-search table. */
.fam-row td { background: #f2f6f9; color: #234b65; font-weight: 600; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line); }
.fam-row.fam-collapsed td { color: var(--muted); }
.code-table tbody tr.fam-row:hover { background: #eaf3fb; }

/* Indented related-codes tree in the code detail drawer. */
.tree-host { margin: 4px 0 10px; }
.tree-list { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid #e2e6ea; }
.tree-host > .tree-list { padding-left: 0; border-left: 0; }
.tree-node { margin: 2px 0; }
.tree-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; padding: 2px 6px; border-radius: 5px; }
.tree-row .code { flex-shrink: 0; }
.tree-sub { color: #5a6773; }
.tree-cur { background: #cfe6f6; border: 1px solid var(--blue); }
.tree-cur .code { font-weight: 800; color: #124b6b; }
.tree-more { color: var(--muted); font-style: italic; }

/* Unvalidated (ENCODE-derived) mappings: amber code links, dashed graph edges. */
.code-link.derived-map { color: #a06a00; }
.code-link.derived-map:hover { color: #7c5200; }
.derived-graph .graph-edge { stroke-dasharray: 6 5; }
.derived-graph .graph-edge-path { stroke-dasharray: 6 5; }

/* ---- full-page detail view: pushes in over the results (left → right) ---- */
.detail-page {
  position: fixed; top: 56px; left: 270px; right: 0; bottom: 0; z-index: 8;
  background: #f7f9fb; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(103%); visibility: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s .3s;
  box-shadow: -8px 0 30px rgba(0,0,0,.12);
}
.detail-page.open { transform: translateX(0); visibility: visible; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
#main-screen { transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s; }
body.detail-open #main-screen { transform: translateX(-7%); opacity: .35; pointer-events: none; }
body.detail-open { overflow: hidden; }
.detail-topbar { position: sticky; top: 0; z-index: 5; background: #f7f9fb; padding: 12px 24px 10px; border-bottom: 1px solid var(--line); }
.detail-back { background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--blue);
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.detail-back:hover { border-color: var(--blue); background: #f5faff; }
.detail-body { padding: 18px 26px 70px; max-width: 1500px; }
.detail-body h2 { margin: 0 0 8px; }
.detail-body h4 { margin: 22px 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .4px; color: var(--blue); }
.detail-sec { max-width: 900px; }
.detail-cols { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 4px; }
.detail-cols > .detail-col { flex: 1; min-width: 320px; max-width: 640px; }

/* ---- mapping-flow graph (replaces the node-card diagram everywhere) ---- */
.flow-wrap { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px;
  background: #fbfdfe; margin: 10px 0; min-height: 380px; }
.flow-scroll { flex: 1; min-width: 0; overflow: auto; }
.flow-aside { width: 320px; flex-shrink: 0; border-left: 1px solid var(--line); padding: 14px 16px; overflow-y: auto; }
/* Plain display: no chip/card around the selected node's details. */
.flow-aside .graph-selection { border: 0; border-left: 0; background: none; padding: 0; margin: 0; }
.flow-aside .sel-title { margin: 0 0 10px; font-size: 16px; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.flow-select-all { width: 100%; margin: 0 0 12px; }
.flow-select-all:disabled { background: #f3f6f8; color: var(--muted); border-color: var(--line); cursor: default; }
.flow-select-all:disabled:hover { background: #f3f6f8; color: var(--muted); border-color: var(--line); }
.flow-aside-hint { color: var(--muted); font-size: 12.5px; padding: 6px 2px; }
.flow-aside.has-selection .flow-aside-hint { display: none; }
.flow-svg { display: block; }
/* Halo behind every graph label so a crossing edge can never strike the text. */
.flow-svg text { font: 12px system-ui, -apple-system, sans-serif; fill: var(--text);
  paint-order: stroke; stroke: #fbfdfe; stroke-width: 3.5px; stroke-linejoin: round; }
.flow-coltitle { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; fill: var(--muted); }
.flow-label-main { font-weight: 600; }
.flow-label-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; fill: #2c5e7e; }
.flow-label-sub { font-size: 10px; fill: #6b7885; }
.flow-linklab { font-size: 10px; font-style: italic; fill: #8a97a4; }
.flow-edge { fill: none; stroke: #cfd8e0; stroke-width: 1.2; }
/* Dashed means ENCODE derived the link; solid means a source provides it. */
.flow-edge-derived { stroke-dasharray: 5 4; stroke-width: 1.5; stroke: #c08a2e; }
.flow-edge-hot { stroke: var(--blue); stroke-width: 2.2; }
.flow-node { cursor: pointer; }
.flow-node:hover text { fill: var(--blue); }
.flow-more { fill: var(--muted); font-style: italic; }
/* The overflow stub reads as a control: a pill, not underlined prose. */
.flow-more-btn { fill: var(--blue); cursor: pointer; font-style: normal; font-size: 11px; font-weight: 600; }
.flow-more-pill { fill: #eef5fa; stroke: #bcdcec; stroke-width: 1; }
.flow-node:hover .flow-more-pill { fill: var(--blue); stroke: var(--blue); }
.flow-node:hover .flow-more-btn { fill: #fff; }
.flow-open-btn { margin-top: 10px; }
.graph-meta-line { color: var(--muted); font-size: 12px; margin: 2px 0 0; }
.flow-legend { display: flex; gap: 22px; align-items: center; margin: 8px 2px 2px; color: var(--muted); font-size: 12px; }
.flow-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.flow-legend-item svg { display: block; }
@media (max-width: 1100px) { .flow-aside { width: 260px; } }