Spaces:
Running
Running
Search defaults, LLM search count and grading, links panel clicks and card under the graph; asset version label9
243e328 verified | :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; } | |
| /* body only: overflow hidden on <html> turns the root into the scroll | |
| container and the sticky top bar stops tracking the viewport. */ | |
| body.panel-open { overflow: hidden; } | |
| /* Keep the scrollbar's space when an overlay locks page scroll, so the layout | |
| does not jump 15px sideways each time a detail page or panel opens. */ | |
| html { scrollbar-gutter: stable; } | |
| /* Sticky, not in flow: the detail page is a fixed overlay that starts 56px | |
| down, and it must always sit under this bar, not under wherever the page | |
| was scrolled to when a row was clicked. z-index sits above .detail-page (8) | |
| and below every drawer, overlay and modal. */ | |
| .topbar { position: sticky; top: 0; z-index: 9; display: flex; align-items: center; min-width: 0; background: var(--dark); color: #fff; height: 56px; padding: 0 18px; } | |
| /* auto margin keeps the buttons right-aligned when the title is hidden. */ | |
| .brand { margin-right: auto; font-weight: 800; letter-spacing: 1px; font-size: 19px; } | |
| /* The bar has a fixed height, so the title must never wrap; it clips with an | |
| ellipsis and goes away on narrow windows (zoomed laptops, half screens). */ | |
| .topbar-title { flex: 1; min-width: 0; padding: 0 12px; text-align: center; font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| @media (max-width: 720px) { .topbar-title { display: none; } } | |
| .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; } | |
| .k-input:disabled { opacity: .4; cursor: not-allowed; } | |
| .side-label-off { color: #6b7b88; } | |
| .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: search 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; min-width: 0; 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); } | |
| /* min-width 0 lets the input shrink below its intrinsic width, so the Search | |
| button is never clipped off the right edge of a narrow window. */ | |
| .query { flex: 1; min-width: 0; width: 100%; 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 { flex-shrink: 0; 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); } | |
| /* -- 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; } | |
| /* 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; } | |
| /* 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-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 { margin-bottom: 0; align-items: center; } | |
| /* 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; } | |
| .status { color: #5a6773; font-size: 14px; margin: 22px 0 10px; min-height: 20px; } | |
| .results { 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; } | |
| .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); } | |
| /* 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; } | |
| /* 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; } | |
| .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-kind { color: #1f6f9e; border-color: #bcdcec; background: #f5faff; } | |
| .tag-warn { color: var(--warn); border-color: #e8d9a8; background: #fdf6e3; } | |
| /* 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; } | |
| .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; } | |
| .notice { border-radius: 7px; padding: 8px 12px; font-size: 14px; margin: 0 0 12px; } | |
| .notice-suggest { background: #eef4fb; border: 1px solid #c7dcf1; color: #24486e; } | |
| .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; } | |
| .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); } | |
| .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; } | |
| /* 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; } | |
| .codegroup-count { float: right; color: #7fa6c9; font-size: 12px; line-height: 20px; } | |
| .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; } | |
| /* 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) */ | |
| .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; } | |
| /* 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; } | |
| /* Unvalidated (ENCODE-derived) mappings: amber code links, dashed graph edges. */ | |
| .code-link.derived-map { color: #a06a00; } | |
| .code-link.derived-map:hover { color: #7c5200; } | |
| /* ---- 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); | |
| } | |
| /* none, not translateX(0): an open page that keeps a transform stays a layer of its own, and the | |
| links panel inside it draws softer text and solid leaders than it does anywhere else. */ | |
| .detail-page.open { transform: none; 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; } | |
| /* ---- narrow windows (zoomed laptops, half screens, phones) ---- | |
| The sidebar stacks above the content, and every overlay that assumed the | |
| 270px sidebar or a wide viewport spans the full width instead. */ | |
| @media (max-width: 720px) { | |
| .layout { flex-direction: column; } | |
| .sidebar { width: 100%; padding: 16px 16px 20px; } | |
| .content { padding: 20px 16px 60px; } | |
| .detail-page { left: 0; } | |
| .detail-body { padding: 16px 16px 60px; } | |
| .drawer { width: 100vw; border-left: 0; } | |
| } | |
| /* ---- links panel (rings.js): one ring graph per code; every mark encodes one thing ---- */ | |
| .lr { --lr-ok: #2e7d52; --lr-derived: #5f6b77; --lr-setline: #b4bec8; --lr-surface: #fff; | |
| --lr-dark: #141c25; --lr-focus: #1f6fa3; --lr-hl: #e7f1f8; --lr-muted: #5f6b77; --lr-line: #e2e6ea; --lr-ink: #2c3744; | |
| background: var(--lr-surface); border: 1px solid var(--lr-line); border-radius: 10px; color: var(--lr-ink); font-size: 14px; line-height: 1.4; margin: 8px 0 4px; | |
| /* the face rings.js measures labels with, whatever the host page uses */ | |
| font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } | |
| /* The panel sizes its own boxes, so it lays out the same in any host page. */ | |
| .lr, .lr *, .lr *::before, .lr *::after { box-sizing: border-box; } | |
| .lr .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } | |
| .lr button { font: inherit; color: inherit; } | |
| .lr :focus-visible { outline: 2px solid var(--lr-focus); outline-offset: 2px; } | |
| .lr-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--lr-line); } | |
| .lr-where { font-weight: 600; font-size: 13px; } | |
| .lr-where:empty { display: none; } | |
| .lr-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--lr-line); border-radius: 7px; overflow: hidden; } | |
| .lr-seg button { border: 0; background: transparent; padding: 4px 10px; cursor: pointer; border-right: 1px solid var(--lr-line); white-space: nowrap; font-size: 13px; } | |
| .lr-seg button:last-child { border-right: 0; } | |
| .lr-seg button[aria-pressed="true"] { background: var(--lr-dark); color: #fff; } | |
| .lr-seg .n { opacity: .8; margin-left: 5px; font-variant-numeric: tabular-nums; } | |
| .lr-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--lr-muted); margin-left: auto; align-items: center; } | |
| .lr-legend span { display: inline-flex; align-items: center; gap: 6px; } | |
| .lr-btn { border: 1px solid var(--lr-line); background: var(--lr-surface); border-radius: 7px; padding: 5px 11px; cursor: pointer; font-size: 13px; } | |
| .lr-btn:hover { border-color: var(--lr-muted); } | |
| .lr-btn.pri { background: var(--lr-dark); border-color: var(--lr-dark); color: #fff; } | |
| .lr-body { display: flex; align-items: stretch; } | |
| .lr-graph { position: relative; flex: 1; min-width: 0; overflow: hidden; min-height: 120px; } | |
| .lr-graph.loading { opacity: .5; } | |
| .lr.lr-none .lr-graph::before { content: "No links for this code."; position: absolute; left: 16px; top: 16px; color: var(--lr-muted); } | |
| .lr-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; } | |
| .lr .e { fill: none; stroke-width: 1.3; opacity: .55; transition: opacity .15s; } | |
| .lr .e.src { stroke: var(--lr-ok); } | |
| .lr .e.no { stroke: var(--lr-derived); stroke-dasharray: 4 3; } | |
| .lr .e.set { stroke: var(--lr-setline); opacity: 1; } | |
| .lr .e.path { opacity: .9; stroke-width: 2; } | |
| .lr .e.hot { opacity: 1; stroke-width: 2.4; } | |
| .lr .e.trunk { stroke: var(--lr-line); stroke-width: 1.4; opacity: 1; } | |
| /* A branch waiting on the left is faint until the pointer or the keyboard is on it. */ | |
| .lr .e.wait { opacity: .22; } | |
| .lr .e.wait.hot { opacity: 1; } | |
| .lr-node.stack:not(:hover):not(:focus-visible) { opacity: .4; } | |
| /* Hovering a node that would turn the wheel lights up the waiting branch it would bring to the front. */ | |
| .lr .lr-node.stack.peek { opacity: 1; } | |
| .lr .e.wait.peek { opacity: .6; } | |
| .lr-node { position: absolute; left: 0; top: 0; border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 6px; | |
| white-space: nowrap; border-radius: 6px; text-align: left; --lr-tbg: rgba(255,255,255,.9); } | |
| /* A node is a layer of its own only while it moves. At rest a layer can sit on a fractional pixel | |
| (the detail page slides in), which blurs its label and turns its dotted leader solid. */ | |
| .lr.moving .lr-node { will-change: transform; } | |
| .lr-node .g { flex: none; display: block; line-height: 0; border-radius: 50%; } | |
| /* The label box is clear; only the words cover the lines, each on a backing just wider than itself. */ | |
| .lr-node .t { display: inline-flex; align-items: baseline; gap: 6px; border-radius: 4px; padding: 1px 3px; } | |
| .lr-node .t > span { background: var(--lr-tbg); box-shadow: -2px 0 var(--lr-tbg), 2px 0 var(--lr-tbg); border-radius: 2px; } | |
| .lr-node .c { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; } | |
| .lr-node .nm { font-size: 12.5px; } | |
| .lr-node .ct { font-size: 12px; color: var(--lr-muted); font-variant-numeric: tabular-nums; } | |
| .lr-node .inc { font-size: 11px; color: var(--lr-ok); font-weight: 700; } | |
| .lr-node .sys { font-size: 11px; color: var(--lr-muted); } | |
| /* The leader from an outer-ring dot to its label in the label column. */ | |
| .lr-node .lead { flex: none; align-self: center; width: var(--pad, 0); height: 0; border-top: 1px dotted var(--lr-setline); margin: 0 -2px; } | |
| .lr-node.lay-r { height: 24px; padding: 0 4px 0 3px; } | |
| .lr-node.lay-b { flex-direction: column; gap: 2px; align-items: center; text-align: center; padding: 2px 3px; } | |
| .lr-node.lay-a { flex-direction: column-reverse; gap: 2px; align-items: center; text-align: center; padding: 2px 3px; } | |
| .lr-node.lay-al { flex-direction: column-reverse; gap: 2px; align-items: flex-end; text-align: right; padding: 2px 3px; } | |
| .lr-node.lay-bl { flex-direction: column; gap: 2px; align-items: flex-end; text-align: right; padding: 2px 3px; } | |
| .lr-node.lay-l { flex-direction: row-reverse; text-align: right; padding: 2px 3px; } | |
| .lr-node.pn { gap: 12px; } | |
| .lr-node.lay-l .t, .lr-node.lay-r.stack .t { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.25; } | |
| .lr-node.lay-r.stack .t { align-items: flex-start; } | |
| .lr-node.lay-a .nm, .lr-node.lay-b .nm, .lr-node.lay-al .nm, .lr-node.lay-bl .nm, .lr-node.lay-l .nm, .lr-node.lay-r.stack .nm { | |
| white-space: normal; overflow-wrap: break-word; max-width: var(--lw, 150px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } | |
| .lr-node.lay-b .t, .lr-node.lay-a .t, .lr-node.lay-al .t, .lr-node.lay-bl .t { flex-direction: column; align-items: center; gap: 0; line-height: 1.25; } | |
| .lr-node.lay-al .t, .lr-node.lay-bl .t { align-items: flex-end; } | |
| .lr-node:hover, .lr-node.hot, .lr-node.sel { --lr-tbg: var(--lr-hl); } | |
| .lr-node.hot .g, .lr-node.sel .g { box-shadow: 0 0 0 2px var(--lr-surface), 0 0 0 4px var(--lr-focus); } | |
| .lr-node.dim .g { opacity: .4; } | |
| .lr-node.dim .t, .lr-node.dim .c, .lr-node.dim .nm { color: var(--lr-muted); } | |
| .lr-node.anchor { flex-direction: column; gap: 2px; align-items: center; padding: 0; z-index: 2; } | |
| .lr-node.anchor .c { font-size: 13px; font-weight: 700; } | |
| .lr-node.anchor .nm { font-size: 13px; font-weight: 700; } | |
| .lr-node.set .nm b { font-weight: 700; } | |
| .lr-node.more .t { border: 1px dashed var(--lr-muted); border-radius: 999px; padding: 1px 9px; font-size: 12px; background: var(--lr-tbg); } | |
| .lr-node.empty { cursor: default; font-size: 12px; color: var(--lr-muted); } | |
| .lr-node.empty .t { background: var(--lr-tbg); } | |
| .lr-node.enter, .lr .e.enter { animation: lr-fin .28s ease-out both; } | |
| /* A turning node's next label, carried in during the turn; the node's own dot stays the one drawn. */ | |
| .lr-node.ghost { pointer-events: none; } | |
| .lr-node.ghost .g { visibility: hidden; } | |
| @keyframes lr-fin { from { opacity: 0; } } | |
| .lr-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--lr-surface); border: 1px solid var(--lr-line); box-shadow: 0 4px 16px rgba(20,28,37,.08); | |
| border-radius: 8px; padding: 7px 9px; font-size: 12px; max-width: 300px; display: none; } | |
| .lr-tip .tn { font-weight: 600; font-size: 12.5px; margin-bottom: 2px; } | |
| .lr-tip .tm { color: var(--lr-muted); } | |
| .lr-tip .tt { margin-top: 4px; } | |
| .lr .trust { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; } | |
| .lr .trust.src { color: var(--lr-ok); } | |
| .lr .trust.no { color: var(--lr-muted); } | |
| .lr .trust .dotg { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; } | |
| .lr .trust.src .dotg { background: var(--lr-ok); border: 2px solid var(--lr-ok); } | |
| .lr .trust.no .dotg { background: transparent; border: 1.6px solid var(--lr-derived); } | |
| .lr-panel { width: 290px; flex: none; border-left: 1px solid var(--lr-line); padding: 14px 16px 18px; overflow: auto; } | |
| .lr-panel h3 { margin: 3px 0 2px; font-size: 16px; line-height: 1.3; word-break: break-word; } | |
| .lr-panel .kick, .lr-panel .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--lr-muted); font-weight: 700; } | |
| .lr-panel .lbl { margin: 14px 0 6px; } | |
| .lr-panel .meta { font-size: 12.5px; color: var(--lr-muted); } | |
| .lr-panel .tdef { font-size: 12.5px; color: var(--lr-muted); margin: 4px 0 0; } | |
| .lr-panel .key { margin: 0 0 6px; font-size: 13px; } | |
| .lr-panel dl.types { margin: 0; } | |
| .lr-panel .types dt { font-size: 12.5px; font-weight: 600; margin-top: 8px; } | |
| .lr-panel .types dd { font-size: 12.5px; color: var(--lr-muted); margin: 1px 0 0; } | |
| .lr-panel dl.kv { margin: 6px 0 0; display: grid; grid-template-columns: 80px 1fr; gap: 4px 8px; font-size: 12.5px; } | |
| .lr-panel dl.kv dt { color: var(--lr-muted); } | |
| .lr-panel dl.kv dd { margin: 0; word-break: break-word; min-width: 0; } | |
| .lr-panel .sfull { font-size: 13px; font-weight: 600; } | |
| .lr-panel .stmt { font-size: 13px; margin-top: 3px; } | |
| .lr-panel .rec { font-size: 11.5px; color: var(--lr-muted); margin-top: 3px; word-break: break-word; } | |
| .lr-panel .srcs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } | |
| .lr-panel .acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } | |
| .lr-panel .note { font-size: 12.5px; color: var(--lr-muted); margin: 8px 0 0; } | |
| .lr-panel .note:empty { display: none; } | |
| .lr-panel .hops { list-style: none; margin: 0; padding: 0; } | |
| .lr-panel .hops li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; font-size: 12.5px; } | |
| .lr-panel .hops .hn { padding: 2px 0; } | |
| .lr-panel .hops .hg { line-height: 0; } | |
| .lr-panel .sharebar { display: block; max-width: 100%; } | |
| .lr-panel .meta.share { margin: 6px 0; } | |
| .lr-panel .lbl.first { margin-top: 0; } | |
| .lr-panel .hops .hl { grid-column: 2; color: var(--lr-muted); font-size: 12px; padding: 3px 0 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } | |
| .lr-panel .hops .ln { grid-column: 1; justify-self: center; width: 0; height: 100%; min-height: 22px; border-left: 2px solid var(--lr-ok); } | |
| .lr-panel .hops .ln.no { border-left: 2px dashed var(--lr-derived); } | |
| .lr-card { margin-top: 14px; border: 1px solid var(--lr-line); border-radius: 6px; padding: 8px 10px; } | |
| .lr-cardhead { display: flex; align-items: center; justify-content: space-between; } | |
| .lr-cardhead .lbl { margin: 0; } | |
| .lr .aigen { position: relative; font-size: 11px; color: var(--lr-muted); border: 1px dashed var(--lr-muted); border-radius: 3px; padding: 0 5px; cursor: help; } | |
| .lr .aigen:hover::after, .lr .aigen:focus::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); width: 230px; z-index: 6; | |
| background: var(--lr-surface); color: var(--lr-ink); border: 1px solid var(--lr-line); box-shadow: 0 4px 16px rgba(20,28,37,.1); border-radius: 6px; padding: 6px 8px; font-size: 12px; line-height: 1.4; } | |
| .lr-close { display: none; } | |
| .lr.lr-stacked .lr-body { display: block; } | |
| /* scroll-margin keeps a scrolled-to panel clear of the detail page's sticky top bar */ | |
| .lr.lr-stacked .lr-panel { width: auto; border-left: 0; border-top: 1px solid var(--lr-line); scroll-margin-top: 64px; } | |
| .lr.lr-stacked .lr-pbody { max-width: 760px; } | |
| /* In the detail page the panel takes the page's full width. */ | |
| .detail-body .lr { margin-left: -14px; margin-right: -14px; } | |
| @media (max-width: 720px) { | |
| .lr-body { display: block; } | |
| .lr-legend { margin-left: 0; } | |
| .lr-panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; border-left: 0; border-top: 1px solid var(--lr-line); background: var(--lr-surface); | |
| box-shadow: 0 -6px 24px rgba(0,0,0,.18); border-radius: 12px 12px 0 0; z-index: 20; transform: translateY(105%); transition: transform .2s; } | |
| .lr-panel.open { transform: none; } | |
| .lr-close { display: block; position: absolute; right: 10px; top: 8px; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { .lr-panel { transition: none; } .lr .e { transition: none; } .lr-node.enter, .lr .e.enter { animation: none; } } | |
| /* Label search: three groups, Relevant open first, Not relevant closed. */ | |
| .label-group { margin: 0 0 18px; } | |
| .label-head { cursor: pointer; font-weight: 600; font-size: 15px; padding: 6px 0 10px; color: var(--text); } | |
| .label-relevant > .label-head { color: var(--ok); } | |
| .label-not_relevant > .label-head { color: var(--muted); } | |
| .unit-row td { background: #f6f8fa; font-weight: 500; } | |
| .unit-facts { display: block; font-size: 12px; font-weight: 400; color: #6b7885; margin-top: 2px; } | |