/* Conference guides (templates/landing/conferences/*) — the cg-* layer on top of landing-shared.css.
   Ported from Frances Yun's designed mockup (the retired scripts/conferences/ashg2026/build_mockup.py, in git history)
   with the mockup scaffolding removed. Loaded only on conference pages, so the page-wide rules below (the static nav) stay scoped. */
/* ── conference guide (cg-*) — candidate additions to landing-shared.css ── */
/* THIS PAGE ONLY: the site nav scrolls with the page instead of floating (landing-shared.css fixes it), so sticky organization rows
   can pin at the very top of the viewport. The nav keeps its pill styling; the page just no longer reserves space under a fixed bar.
   relative, not static: z-index only applies to a positioned box, and without it the Free Tools dropdown painted under every
   positioned element further down (the chart bars, the search box). */
body > nav { position: relative; }
.cg-page { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }
/* eyebrow + h1 match the homepage's .section-eyebrow / .section-title (inline in templates/landing/index.html) */
.cg-eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #1A6B6A; margin: 0 0 .5rem; }
/* h1 size tracks the hero's left column (viewport − page padding − 1rem gap − 440px chart) so the title stays on ONE line down to ~940px:
   the title needs ≈565px at 44px, i.e. font ≤ 44px × (vw − 496px) / 565px ≈ 7.6vw − 38px; capped at the homepage's 2.75rem. */
.cg-h1 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(1.75rem, calc(7.6vw - 38px), 2.75rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; color: #1A1814; margin: 0 0 1rem; }
/* landing-shared.css's .nav-links a.btn-primary never sets color, so .nav-links a (gray) wins; the homepage patches it inline — same patch here */
.nav-links a.btn-primary { color: #fff; }
/* chart column fixed at 440px so the h1 ("Who’s Going to ASHG 2026" ≈ 565px at 44px) fits on one line at the 1100px page width */
.cg-hero { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 1rem; align-items: end; margin-bottom: 1.5rem; }  /* both columns bottom-aligned: chart base = "Last updated" line */
.cg-hero .rp-subtitle { font-size: 1rem; padding-right: 1rem; }
.cg-updated { font-size: .8rem; color: #9ca3af; margin: 0; } .cg-updated b { color: #6b7280; font-weight: 500; } .cg-updated a { color: #1A6B6A; font-weight: 600; text-decoration: none; } .cg-updated a:hover { text-decoration: underline; }
.cg-updated .sep { margin: 0 .4rem; color: #d1d5db; }
/* "Get notified" email capture — same interaction + rules as the account-map request form (static/landing/account-maps.css .am-capture*), teal instead of blue */
.cg-notify { margin: .75rem 0 0; max-width: 460px; }
.cg-notify-row { display: flex; gap: 8px; flex-wrap: wrap; } .cg-notify-row[hidden] { display: none; }
.cg-notify-input { flex: 1 1 180px; min-width: 0; font: 500 .875rem/1.2 Inter, sans-serif; color: #1A1814; background: #fff; border: 1px solid #d1d5db; border-radius: .6rem; padding: .55rem .75rem; outline: none; -webkit-appearance: none; }
.cg-notify-input:focus { border-color: #1A6B6A; box-shadow: 0 0 0 3px rgba(26,107,106,.15); }
.cg-notify-btn { flex: none; white-space: nowrap; } .cg-notify-btn:disabled { opacity: .7; cursor: default; }
.cg-notify-note { font-size: .68rem; color: #6b7280; margin: 7px 0 0; line-height: 1.45; } .cg-notify-note-privacy, .cg-cta p.cg-notify-note-privacy, .cg-modal-box p.cg-notify-note-privacy { font-size: .66rem; margin: 10px 0 0; line-height: 1.3; }  /* outranks the band's own p rule (.92rem, margin 0) */ .cg-notify-note a { color: inherit; text-decoration: underline; }
.cg-notify-msg { font-size: .78rem; color: #b45309; margin: 8px 0 0; } .cg-notify-msg.ok { color: #047857; font-size: .875rem; font-weight: 600; }
/* vertical category chart = the primary filter */
.cg-vchart { margin: 0; padding: 0; background: none; border: 0; transform: translateY(8px); }  /* a static, integrated graphic — not a card, not a control; base sits 8px below the "Last updated" line */
.cg-vbars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 150px; }
.cg-vbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.cg-vbar-fill { position: relative; width: 75%; background: #0D9488; border-radius: 0; min-height: 24px; transition: background .12s; }  /* min-height keeps the in-bar number legible on the shortest bar */
/* family palette = Tailwind v2 600s: academic teal, hospital blue, gov yellow, industry pink */
.cg-vbar-n { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: .74rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.cg-vbar[data-family="clinical"] .cg-vbar-fill { background: #2563EB; } .cg-vbar[data-family="public"] .cg-vbar-fill { background: #D97706; } .cg-vbar[data-family="industry"] .cg-vbar-fill { background: #DB2777; }
.cg-vlabels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 7px; align-items: start; }
.cg-vlabel { font-size: .72rem; color: #1f2937; text-align: center; line-height: 1.15; }
.cg-vgroups { display: grid; grid-template-columns: 2fr 1fr 1fr 3fr; gap: 6px; margin-top: 8px; }
.cg-vgroup { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #4b5563; text-align: center; border-top: 2px solid #d1d5db; padding-top: 5px; white-space: nowrap; }
/* family label + rule in the family's color (rule = the 600 used on the bars, text = the 800) */
.cg-vgroup[data-family="academic"] { color: #115E59; border-top-color: #0D9488; } .cg-vgroup[data-family="clinical"] { color: #1E40AF; border-top-color: #2563EB; }
.cg-vgroup[data-family="public"] { color: #92400E; border-top-color: #D97706; } .cg-vgroup[data-family="industry"] { color: #9D174D; border-top-color: #DB2777; }
/* search + in-place filter chips */
.cg-search { position: relative; margin: 0 0 .75rem; }
.cg-search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #9ca3af; pointer-events: none; }
.cg-search input { width: 100%; font: 500 .95rem/1.2 Inter, sans-serif; color: #111827; background: #fff; border: 1px solid #d1d5db; border-radius: .75rem; padding: .7rem 1rem .7rem 2.4rem; outline: none; -webkit-appearance: none; }
.cg-search input:focus { border-color: #1A6B6A; box-shadow: 0 0 0 3px rgba(26,107,106,.15); }
.cg-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }  /* our own ×, visible whenever there is a query, not only while focused */
.cg-q-clear { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: #e5e7eb; color: #4b5563; font-size: 1rem; line-height: 1; cursor: pointer; } .cg-q-clear:hover { background: #d1d5db; color: #111827; } .cg-q-clear[hidden] { display: none; }
.cg-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: .9rem; padding: 1rem 1.1rem .95rem .45rem; margin: 0 0 1rem; }  /* the caret column lives in the trimmed left padding */
.cg-panel .cg-search { margin: 0 0 .9rem .65rem; }
.cg-filters { display: grid; gap: .9rem; }
.cg-fgroup { display: grid; grid-template-columns: 1.1rem 8rem minmax(0, 1fr); gap: .35rem; align-items: start; }  /* caret col + fixed label col (8rem fits "MOST REPRESENTED") = every group's chips start on one vertical line */
.cg-caret { width: 1.1rem; height: 1.1rem; margin-top: .4rem; padding: 0; border: 0; background: none; color: #9ca3af; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cg-caret:hover { color: #374151; } .cg-caret svg { width: 13px; height: 13px; transition: transform .15s; }
.cg-filters.is-collapsed .cg-caret svg { transform: rotate(-90deg); }
.cg-filters.is-collapsed .cg-fchips, .cg-filters.is-collapsed .cg-fgroup:not(:first-child) { display: none; }
.cg-filter-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; padding-top: .45rem; line-height: 1.2; white-space: nowrap; }
.cg-fchips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }  /* 5 equal columns: chips align across rows and groups; long names ellipsize (full name in the tooltip) */
.cg-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-fchips .cg-chip { min-width: 0; justify-content: flex-start; padding-left: .62rem; padding-right: .62rem; }  /* bordered white chips at the base .cg-chip size — the borderless/smaller variant read less clearly */
.cg-fchips .cg-chip small { margin-left: auto; padding-left: .2rem; }
.cg-chip-logo { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
.cg-chip-ico { width: 13px; height: 13px; flex-shrink: 0; }
.cg-chip[data-family="academic"] .cg-chip-ico { color: #0D9488; } .cg-chip[data-family="clinical"] .cg-chip-ico { color: #2563EB; }
.cg-chip[data-family="public"] .cg-chip-ico { color: #D97706; } .cg-chip[data-family="industry"] .cg-chip-ico { color: #DB2777; }
.cg-chip[data-f="focus"] .cg-chip-ico { color: #6b7280; }
.cg-chip.is-on .cg-chip-ico { color: #fff; }
.cg-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 500; color: #374151; background: #fff; border: 1px solid #d1d5db; border-radius: 9999px; padding: .28rem .75rem; text-decoration: none; font-family: inherit; cursor: pointer; }
.cg-chip:hover { border-color: #6b7280; background: #f9fafb; } .cg-chip.is-on { background: #111827; color: #fff; border-color: #111827; }
.cg-chip small { color: #9ca3af; font-weight: 500; } .cg-chip.is-on small { color: #d1d5db; }
.cg-chip-break { flex-basis: 100%; height: 0; }
/* table (campaigns-style) with count + pagination bound to its header */
.cg-table-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: #fff; border: 1px solid #e5e7eb; border-bottom: 0; border-radius: .75rem .75rem 0 0; padding: .6rem .85rem; }
.cg-table-count { font-size: .85rem; color: #374151; } .cg-table-count b { color: #111827; font-weight: 600; }
.cg-clear { font-size: .8rem; color: #1A6B6A; background: none; border: 0; padding: 0 0 0 .6rem; cursor: pointer; font-family: inherit; font-weight: 600; } .cg-clear[hidden] { display: none; }
.cg-pager { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: #6b7280; }
.cg-pg { font-family: inherit; font-size: .85rem; line-height: 1; color: #374151; background: #fff; border: 1px solid #d1d5db; border-radius: .5rem; padding: .35rem .6rem; cursor: pointer; }
.cg-pg:hover:not(:disabled) { background: #f9fafb; border-color: #6b7280; } .cg-pg:disabled { color: #d1d5db; cursor: default; }
/* Sticky organization rows at EVERY width: each organization row pins to the top of the viewport while its group sub-rows scroll past
   (column headers do not stick). Sticky needs the WINDOW as the scroller, so the wrapper never clips overflow; on narrow screens the
   table drops its right-hand columns instead of scrolling sideways (see the media queries at the end). */
.cg-table-wrap { overflow: visible; border: 1px solid #e5e7eb; border-radius: 0 0 .75rem .75rem; background: #fff; }
/* Every row group is its OWN table (display: table on thead/tbody, the <table> itself a block) with identical fixed column widths, so
   an organization row can be position: sticky natively: a sticky row is constrained to its table, which is now exactly its group —
   it pins under the header and is pushed out by the group's end with no per-scroll JS (JS-set offsets lag the compositor and popped
   into view on scroll-up). The thead is sticky as a whole for the same reason. */
.cg-table { display: block; } .cg-table thead, .cg-table tbody { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.cg-table th:nth-child(1), .cg-table tr.cg-org-row > td:nth-child(1) { width: 35%; } .cg-table th:nth-child(2), .cg-table tr.cg-org-row > td:nth-child(2) { width: 65%; }  /* two columns: the At-a-glance cards sit under the lab / company description */
.cg-sigs { margin-top: 8px; padding-bottom: 10px; }  /* air under the last card before the row divider */
.cg-table thead { position: sticky; top: 0; z-index: 3; } .cg-table thead th { box-shadow: inset 0 -1px 0 #e5e7eb; }  /* the collapsed border stays behind when pinned — an inset shadow travels with the cell */
/* The organization row pins through its CELLS, not the <tr>: Firefox does not layer a sticky table row above the rows after it (the lab
   rows' background painted over the pinned organization mid-scroll). The scroll handler only adds the drop shadow (.is-stuck). */
.cg-table tbody tr.cg-org-row > td { background: #fff; }  /* top-aligned like every other cell */
.cg-table tbody.cg-has-labs tr.cg-org-row > td { position: sticky; top: var(--cg-line, 39px); z-index: 2; }  /* --cg-line = header height − 1, measured once by JS; the push-out is native */
.cg-table tbody.cg-has-labs tr.cg-org-row > td { box-shadow: inset 0 -1px 0 #e5e7eb; }
.cg-table tr.cg-org-row > td { vertical-align: middle; }
  /* the roles summary sits centred beside the two-line name block */  /* the collapsed bottom border belongs to the table and stays behind when the row pins; an inset line travels with the cell (same trick as the header) */
.cg-table tbody tr.cg-org-row.is-stuck > td { box-shadow: inset 0 -1px 0 #d1d5db, 0 6px 14px rgba(17, 24, 39, .12); }  /* inset rule always paints inside the pinned cell; the drop shadow falls onto the rows beneath */
.cg-pres-item { display: flex; gap: .45rem; align-items: flex-start; font-size: .78rem; color: #1f2937; line-height: 1.3; margin-bottom: 5px; min-width: 0; }
.cg-pres-item + .cg-pres-item { border-top: 1px solid #ebe9e4; padding-top: 7px; margin-top: 7px; }  /* divider between stacked items (booth first, then talks) */
.cg-pres-pills { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 4.6rem; flex-shrink: 0; }
.cg-when { font-size: .68rem; color: #6b7280; line-height: 1.3; text-align: center; font-variant-numeric: tabular-nums; } .cg-when b { font-weight: 500; color: #4b5563; }
.cg-pres-item .cg-fmt { margin-top: 1px; text-align: center; box-sizing: border-box; } .cg-pres-pills .cg-role { justify-content: center; } .cg-pres-item > div { min-width: 0; }  /* uniform pill width → titles start on one line */
.cg-pres-indent { margin-left: calc(4.6rem + .45rem); }
.cg-sig { border: 1px solid #e5e7eb; border-radius: 8px; font-size: .74rem; line-height: 1.35; color: #4b5563; background: #fff; margin-bottom: 4px; }
.cg-sig summary { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; cursor: pointer; list-style: none; } .cg-sig summary::-webkit-details-marker { display: none; }
.cg-sig b { color: #111827; font-weight: 700; } .cg-sig-ico { width: 22px; height: 22px; padding: 3px; box-sizing: border-box; border-radius: 50%; flex-shrink: 0; }  .cg-sig-ico-papers { background: #d9efec; } .cg-sig-ico-funding { background: #dcf5e3; } .cg-sig-ico-news { background: #ece8fb; } .cg-sig-ico-platforms { background: #dbeafe; } .cg-sig-ico-products { background: #dbeafe; } .cg-sig-ico-hiring { background: #fdecd2; } .cg-sig-ico-hiring-none { background: #ebe9e4; }
.cg-sig-chev { margin-left: auto; color: #9ca3af; font-size: 1rem; line-height: 1; padding-left: 4px; transition: transform .15s; align-self: center; } .cg-sig[open] .cg-sig-chev { transform: rotate(90deg); }
.cg-sig-body { padding: 7px 8px 7px 8px; margin-top: 2px; border-top: 1px solid #ebe9e4; font-size: .7rem; color: #4b5563; line-height: 1.4; }  /* full card width under a divider — the column is narrow */ .cg-sig-src { color: #9ca3af; } .cg-sig-more { color: #9ca3af; margin: 2px 0 4px; }
.cg-sig-strong { font-weight: 500; } .cg-sig-none { font-size: .72rem; color: #9ca3af; margin: 4px 0 0 2px; } .cg-sig-list { color: #374151; line-height: 1.4; } .cg-sig b.cg-sig-lead { font-weight: 600; } .cg-sig-row { margin-bottom: 6px; } .cg-sig-paper { margin-bottom: 7px; } .cg-sig-paper > b { font-weight: 600; color: #1f2937; } .cg-sig-paper-meta { color: #6b7280; font-size: .95em; margin-top: 1px; } .cg-sig-entry { margin-bottom: 6px; } .cg-sig-entry > b { color: #111827; font-weight: 600; } .cg-sig-quote { color: #6b7280; font-style: italic; margin-top: 1px; } .cg-sig-lbl { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-bottom: 3px; } .cg-sig-row .cg-tracks { margin-top: 0; } .cg-sig-src a { color: #2563EB; text-decoration: none; } .cg-sig-src a:hover { text-decoration: underline; }
.cg-sig summary > div { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }  /* snippet ≤ 3 lines; the rest lives in the expander */  /* 8px pad + 22px icon + 6px gap = flush with the summary text */
.cg-kws { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 4px; } .cg-coauth { color: #4b5563; }
.cg-pres-item .cg-rc { display: inline-block; margin: 0 0 3px; }
.cg-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 2px 0 3px; }
.cg-tag { font-size: .68rem; font-weight: 600; color: #4b5563; background: #ebe9e4; border-radius: 4px; padding: 1px 6px; letter-spacing: .01em; }
.cg-tag-dry { color: #8a6d3b; background: #f5efe3; } .cg-tag-wet { color: #1D4ED8; background: #DBEAFE; } .cg-tag-mixed { color: #047857; background: #D1FAE5; }  /* dry = sand, wet = blue (water), both = green */
.cg-roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 3px; }
.cg-nb { white-space: nowrap; } mark.cg-hl { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; } ::highlight(cg-hl) { background: #fef08a; }  /* no content-visibility on .cg-lazy (each lab's talk list): its paint containment clipped the first talk's tooltip in every
   engine, and overflow-clip-margin does not help in Safari. Cost on page 1: ~0.45 s more to full load at 4x CPU in Chromium */ .cg-role-ico { width: 11px; height: 11px; } .cg-cell-sub.cg-roles-line { font-size: .8rem; }  /* outranks the generic .cg-cell-sub size */
/* instant CSS tooltip (native title tooltips are slow and inconsistent) */
[data-tip] { position: relative; }
.cg-lock-hdr[data-tip]:hover::after { bottom: auto; top: calc(100% + 6px); left: 0; transform: none; }  /* below the pill: above it sits the pinned header and the nav */
/* modal: the same "full dataset" capture as the band at the foot of the table, opened from the header pill and the per-row pills */
/* the Request-access dialog is a native <dialog> (focus trap, Esc, backdrop); the box keeps the mockup's look */
.cg-dialog { padding: 0; border: 0; background: transparent; width: min(560px, calc(100% - 2rem)); max-width: none; overflow: visible; }
.cg-dialog::backdrop { background: rgba(17, 24, 39, .45); }
.cg-dialog .cg-modal-box { width: 100%; }
.cg-modal-box { position: relative; width: min(560px, 100%); background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 1rem; padding: 1.6rem 1.7rem 1.5rem; box-shadow: 0 20px 60px rgba(17, 24, 39, .25); }
.cg-modal-box .cg-cta-eyebrow { margin-bottom: .45rem; } .cg-modal-box h3 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .3rem; color: #111827; } .cg-modal-box p { margin: 0; color: #4b5563; font-size: .92rem; line-height: 1.5; }
.cg-modal-close { position: absolute; top: .7rem; right: .8rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #6b7280; font-size: 1.3rem; line-height: 1; cursor: pointer; } .cg-modal-close:hover { background: #ede9fe; color: #111827; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: #111827; color: #fff; font: 500 .68rem/1.3 Inter, sans-serif; text-transform: none; letter-spacing: 0; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 30; pointer-events: none; }
.cg-role { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 600; color: #6d28d9; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 9999px; padding: 1px 8px; line-height: 1.5; white-space: nowrap; } .cg-table tr.cg-sub .cg-role b { color: #6d28d9; font-weight: 700; }  /* outranks the lab-row `.cg-sub b` gray rule */
.cg-people-line { font-size: .85rem; color: #1f2937; } .cg-people-line b, .cg-fmts b, .cg-cell-sub b { font-weight: 700; color: #111827; }
.cg-lock-hdr { margin-left: .4rem; vertical-align: middle; text-transform: none; letter-spacing: 0; font-size: .72rem; font-weight: 600; line-height: 1.5; padding: 1px 8px 1px 6px; gap: 3px; }  /* same metrics as a role pill ("1 PhD Student moderating") */
.cg-ev { display: flex; align-items: flex-start; gap: 6px; font-size: .76rem; color: #4b5563; line-height: 1.3; margin-top: 5px; }
.cg-post { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; padding: 6px 9px; background: #F4F3F0; border: 0; border-radius: 8px; font-size: .74rem; color: #374151; line-height: 1.35; font-style: italic; }
.cg-post b { flex-shrink: 0; font-style: normal; font-weight: 800; font-size: .68rem; color: #0A66C2; margin-top: 1px; }
.cg-post-bluesky b { color: #1185FE; } .cg-post-x b { color: #111827; }
.cg-pres-item.cg-pres-post:not(:first-child) { border-top: 1px solid #ebe9e4; padding-top: 7px; margin-top: 7px; } .cg-pres-post .cg-post { margin-top: 0; } .cg-fmt.is-attendee { background: #f3f4f6; color: #6b7280; }
.cg-post-linkedin { background: #fff; border: 1px solid #0A66C2; } a.cg-post-linkedin b { color: #0A66C2; } a.cg-post { text-decoration: none; color: #374151; } a.cg-post:hover span { text-decoration: underline; }
.cg-roles { align-items: center; }
/* a tall lab row (many posters) keeps its name/description and its At-a-glance cards in view: the cell content is sticky inside its own
   cell, pinned just under the pinned organization row (--cg-stick-top is set per frame by markStuck) */
.cg-table tr.cg-sub td > .cg-stick { position: sticky; top: var(--cg-stick-top, 37px); z-index: 1; }
.cg-ev b { flex-shrink: 0; width: 16px; text-align: center; font-size: .68rem; font-weight: 700; color: #6b7280; margin-top: 1px; }
.cg-pres-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cg-pres-item .cg-rc { display: inline-block; margin-top: 3px; }
.cg-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .85rem; table-layout: fixed; }  /* explicit column widths (colgroup) — auto layout starved People/Presentations */
.cg-table th { text-align: left; font-weight: 600; color: #374151; background: #f9fafb; padding: .6rem .85rem; border-bottom: 1px solid #e5e7eb; white-space: nowrap; font-size: .78rem; }
.cg-table td { padding: .6rem .85rem; border-bottom: 1px solid #e5e7eb; color: #1f2937; vertical-align: top; }  /* top-aligned so names stay put as cell heights vary */  /* lab-row divider (medium) */
.cg-table tbody.cg-group > tr.cg-org-row > td { border-top: 1px solid #d1d5db; }  /* organization divider: 1px, one shade darker than the lab-row divider — `tr:last-child` would match every group's last row, so borders are top-anchored */
.cg-table tbody:last-child > tr:last-child > td { border-bottom: none; } .cg-table tr[hidden] { display: none; } /* no hover state on any row: organization rows stay white, sub-rows keep their off-white */
.cg-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-org { display: flex; align-items: center; gap: .65rem; min-width: 0; } .cg-org > div { min-width: 0; }  /* lets a long lab URL ellipsize instead of spilling into the next column */
.cg-logo { width: 30px; height: 30px; border-radius: 7px; border: 1px solid #e5e7eb; background: #fff; object-fit: contain; flex-shrink: 0; padding: 3px; }
.cg-avatar { width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: .02em; }
.cg-org-name { font-weight: 600; color: #111827; text-decoration: none; line-height: 1.25; display: block; } a.cg-org-name:hover { text-decoration: underline; }
.cg-org-sub { font-size: .75rem; color: #6b7280; margin-top: 2px; line-height: 1.3; } .cg-org-desc { font-size: .8rem; color: #4b5563; line-height: 1.35; }  /* the lab description reads a step larger and darker than a location line */ .cg-org-sub a { color: inherit; text-decoration: none; } .cg-org-sub a:hover { color: #111827; text-decoration: underline; }
.cg-cat { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; border-radius: 6px; padding: 2px 7px; white-space: nowrap; border: 1px solid; }
.cg-cat .cg-chip-ico { width: 12px; height: 12px; }
.cg-cat[data-family="academic"] { color: #0F766E; background: #F0FDFA; border-color: #99F6E4; } .cg-cat[data-family="clinical"] { color: #1D4ED8; background: #EFF6FF; border-color: #BFDBFE; }
.cg-cat[data-family="public"] { color: #B45309; background: #FFFBEB; border-color: #FDE68A; } .cg-cat[data-family="industry"] { color: #BE185D; background: #FDF2F8; border-color: #FBCFE8; }
.cg-people { display: inline-flex; align-items: center; gap: .4rem; } .cg-people b { font-weight: 600; color: #111827; }
.cg-lock { display: inline-flex; align-items: center; gap: 3px; color: #6d28d9; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 9999px; padding: 1px 6px 1px 5px; font-size: .68rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.cg-lock .rp-lock-svg { width: 10px; height: 10px; color: inherit; } .cg-lock:hover { background: #f3e8ff; }
.cg-fmts { font-size: .75rem; color: #6b7280; white-space: nowrap; }
.cg-fmt { font-size: .68rem; font-weight: 600; color: #4b5563; background: #ebe9e4; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }  /* one step darker than the lab-row background, no more */
.cg-fmt.is-poster { background: #E0F0EF; color: #124A4A; } .cg-fmt.is-talk { background: #fdecd2; color: #8a5514; } .cg-fmt.is-mod { background: #dbeafe; color: #1e40af; } .cg-fmt.is-invited { background: #eef2ff; color: #3730a3; } .cg-fmt.is-plenary { background: #111827; color: #fff; } .cg-fmt.is-exhibit { background: #ffedd5; color: #c2410c; }
.cg-tracks { display: flex; flex-wrap: wrap; gap: .3rem; }
.cg-track { font-size: .68rem; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 9999px; padding: 0 7px; white-space: nowrap; }
.cg-cell-sub { font-size: .72rem; color: #6b7280; margin-top: 3px; white-space: normal; line-height: 1.3; }
.cg-table td.num { white-space: normal; } .cg-table td.num > b, .cg-table td.num .cg-people { white-space: nowrap; }
.cg-fmts { white-space: normal; display: inline; }
.cg-booth { font-variant-numeric: tabular-nums; font-weight: 600; color: #124A4A; background: #E0F0EF; border-radius: 6px; padding: 1px 7px; font-size: .74rem; white-space: nowrap; }
.cg-table td.cg-booth-cell { white-space: nowrap; }
/* research-group sub-rows under an organization */
.cg-table tr.cg-sub td { background: #fafaf9; padding-top: .6rem; padding-bottom: .6rem; font-size: .8rem; border-bottom: 1px solid #d6d3d1; }  /* lab divider: a step darker than the #ebe9e4 line between one lab's talks, with a little more air */
.cg-table tr.cg-sub[hidden] { display: none; }
.cg-org-group { padding-left: .6rem; align-items: flex-start; }
.cg-tree { display: inline-block; width: 10px; height: 10px; border-left: 1.5px solid #c7c4bd; border-bottom: 1.5px solid #c7c4bd; margin: 3px .5rem 0 0; flex-shrink: 0; }
.cg-sub-name { font-weight: 600; color: #1f2937; display: block; font-size: .85rem; }  /* same size as the organization name */
.cg-sub-links { display: flex; align-items: center; gap: .35rem; min-width: 0; margin: 1px 0 2px; } .cg-sub-links .cg-sub-url { display: inline-block; min-width: 0; margin: 0; }
.cg-sub-li { flex-shrink: 0; } .cg-sub-sep { color: #9ca3af; font-size: .76rem; flex-shrink: 0; }  /* "labcorp.com | LinkedIn" */
.cg-sub-url { display: block; font-size: .76rem; color: #2563EB; text-decoration: none; margin: 1px 0 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cg-sub-url:hover { text-decoration: underline; }
.cg-pres-meta { font-size: .72rem; color: #6b7280; line-height: 1.3; margin-top: 2px; }
.cg-hours { display: grid; grid-template-columns: max-content max-content; column-gap: 10px; row-gap: 2px; margin-top: 3px; font-size: .72rem; color: #6b7280; line-height: 1.3; font-variant-numeric: tabular-nums; } .cg-hours span:nth-child(odd) { color: #4b5563; font-weight: 500; }
.cg-pres-t { font-weight: 500; } a.cg-pres-t { color: inherit; text-decoration: none; } a.cg-pres-t:hover { text-decoration: underline; color: #1A6B6A; }
.cg-table td .cg-tracks { margin-top: 6px; }
.cg-table tr.cg-sub-anon > td:first-child { }  /* unnamed sub-row: empty name cell */
.cg-table tr.cg-sub-rest td { color: #9ca3af; font-size: .74rem; font-style: italic; padding-left: 1.85rem; }
.cg-src { display: inline-flex; flex-direction: column; gap: 2px; }  /* plain icon + text, one source per line — not buttons */
.cg-src-pill { display: inline-flex; align-items: flex-start; gap: 5px; font-size: .72rem; color: #6b7280; line-height: 1.25; }
.cg-src-pill b { font-weight: 700; font-size: .66rem; width: 14px; text-align: center; color: #9ca3af; }
.cg-dash { color: #d1d5db; }
/* institution page: lab cards */
.cg-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.cg-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: .9rem; padding: .9rem 1rem; }
.cg-stat-n { font-family: 'Newsreader', Georgia, serif; font-size: 1.9rem; line-height: 1; color: #111827; font-weight: 600; }
.cg-stat-l { font-size: .78rem; color: #6b7280; margin-top: .35rem; line-height: 1.3; } .cg-stat-l b { color: #374151; font-weight: 600; }
.cg-crumb { font-size: .8125rem; color: #6b7280; margin-bottom: 1.2rem; } .cg-crumb a { color: inherit; text-decoration: none; } .cg-crumb a:hover { color: #111827; }
.cg-h2 { font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: #111827; margin: 2rem 0 .35rem; }
.cg-h2-sub { font-size: .95rem; color: #6b7280; margin: 0 0 1rem; max-width: 70ch; }
.cg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: .9rem; padding: 1rem 1.05rem .85rem; min-width: 0; }
.cg-card:hover { border-color: #9ca3af; box-shadow: 0 4px 16px rgba(17,24,39,.06); }
.cg-card-head { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.cg-group-name { font-family: 'Newsreader', Georgia, serif; font-size: 1.12rem; font-weight: 600; color: #111827; text-decoration: none; line-height: 1.25; display: block; }
a.cg-group-name:hover { text-decoration: underline; }
.cg-inst { font-size: .8rem; color: #6b7280; margin-top: .15rem; }
.cg-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.cg-count { font-size: .72rem; color: #6b7280; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.cg-card .cg-people { display: grid; gap: .45rem; margin-bottom: .6rem; }
.cg-person-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.cg-name { font-weight: 600; color: #111827; font-size: .9rem; }
.cg-title { font-size: .82rem; color: #374151; } .cg-muted { color: #9ca3af; font-style: italic; }
.cg-sub { font-size: .78rem; color: #6b7280; } .cg-sub b { color: #374151; font-weight: 500; }
.cg-pres-list { list-style: none; margin: 0 0 .7rem; padding: .6rem 0 0; border-top: 1px solid #f3f4f6; display: grid; gap: .4rem; }
.cg-pres { display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; color: #1f2937; line-height: 1.35; }
.cg-pres-title { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-rc { flex-shrink: 0; font-size: .72rem; font-weight: 600; color: #b45309; white-space: nowrap; }  /* plain text with a star, beside the presenter pill */
.cg-more { color: #9ca3af; font-size: .78rem; }
.cg-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid #f3f4f6; }
.cg-card .cg-tracks { flex: 1; max-width: none; }
.cg-reveal { cursor: pointer; margin-left: auto; } .cg-reveal:hover { background: #f3e8ff; }
/* shared tail */
/* sign-in band in the reveal purple (same family as .reveal-pill / .cg-lock) — the pitch is revealing names, not tracking */
.cg-cta { margin: 2.5rem 0 0; background: #faf5ff; color: #111827; border: 1px solid #e9d5ff; border-radius: 1rem; padding: 1.5rem 1.6rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
.cg-capture-reveal { margin-top: .9rem; max-width: 520px; } .cg-capture-reveal .cg-notify-input:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.15); } .cg-capture-reveal .cg-notify-btn { padding: .55rem 1rem; } .cg-capture-reveal .cg-notify-msg.ok { color: #6d28d9; }
.cg-cta-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: #6d28d9; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .45rem; } .cg-cta-eyebrow .rp-lock-svg { color: inherit; }
.cg-cta h3 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .3rem; color: #111827; } .cg-cta p { margin: 0; color: #4b5563; font-size: .95rem; max-width: 62ch; }
.cg-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #6d28d9; color: #fff; white-space: nowrap; box-shadow: 0 2px 12px rgba(109,40,217,.25); } .cg-cta-btn:hover { background: #5b21b6; color: #fff; }
.cg-cta-btn .rp-lock-svg { width: 15px; height: 15px; color: #fff; }
.cg-faq { margin: 2rem 0 0; max-width: 75ch; } .cg-faq h3 { font-size: 1rem; font-weight: 600; color: #111827; margin: 1rem 0 .3rem; } .cg-faq p { margin: 0; color: #374151; line-height: 1.55; font-size: .95rem; }
.cg-fine { font-size: .78rem; color: #9ca3af; margin-top: 1.5rem; line-height: 1.5; }
/* narrow screens: shed columns gradually (Booth + Found via, then Focus, then Presentations) so the table fits without a horizontal
   scroller; the fixed percentage widths are released too, or the hidden columns would keep reserving empty space */
@media (max-width: 1040px) { .cg-table { min-width: 0; } }
@media (max-width: 900px) { .cg-hero { grid-template-columns: 1fr; } .cg-h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); } .cg-fchips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cg-cta { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cg-table th:nth-child(1), .cg-table tr.cg-org-row > td:nth-child(1) { width: 42%; } .cg-table th:nth-child(2), .cg-table tr.cg-org-row > td:nth-child(2) { width: 58%; } .cg-pres-item { flex-direction: column; gap: 3px; } .cg-pres-pills { flex-direction: row; width: auto; } .cg-pres-indent { margin-left: 0; }
  /* phones: every horizontal pixel goes to content — no page gutter, no card border-radius at the edges, tighter cells, no lab indent or tree mark */
  .cg-page { padding-left: 0; padding-right: 0; } .cg-hero, .cg-filters, .cg-cta, .cg-faq { margin-left: .75rem; margin-right: .75rem; }
  .cg-table-top, .cg-table-wrap { border-left: 0; border-right: 0; border-radius: 0; }  /* the "Showing …" bar and the table run edge to edge together */ .cg-table { min-width: 0; } .cg-table td, .cg-table th { padding-left: .55rem; padding-right: .55rem; }
  .cg-org-group { padding-left: 0; } .cg-tree { display: none; } .cg-sub-rest .cg-tree { display: none; }
  /* a lab / company sub-row stacks: name, description and cards full-width on top, the talks beneath (two 150px columns were unreadable) */
  /* the table becomes blocks on phones: header + organization rows are flex (two cells, 42 / 58), a sub-row is one block; the organization
     row stays position: sticky inside its block tbody */
  .cg-table thead, .cg-table tbody { display: block; width: 100%; } .cg-table thead tr, .cg-table tr.cg-org-row { display: flex; width: 100%; }
  .cg-table th:nth-child(1), .cg-table tr.cg-org-row > td:nth-child(1) { flex: 0 0 42%; width: auto; box-sizing: border-box; } .cg-table th:nth-child(2), .cg-table tr.cg-org-row > td:nth-child(2) { flex: 0 0 58%; width: auto; box-sizing: border-box; }
  .cg-table tr.cg-sub { display: block; width: 100%; } .cg-table tr.cg-sub > td { display: block; width: 100%; box-sizing: border-box; } .cg-table tr.cg-sub > td:first-child { padding-bottom: 0; } .cg-table tr.cg-sub > td:first-child:empty { display: none; }
  .cg-table tr.cg-sub td > .cg-stick { position: static; }  /* nothing to pin beside when cells stack */
  /* the organization row is a flex box here, not a table row, so the ROW pins (a sticky cell could not move outside its row) */
  .cg-table tbody.cg-has-labs tr.cg-org-row { position: sticky; top: var(--cg-line, 39px); z-index: 2; } .cg-table tbody.cg-has-labs tr.cg-org-row > td { position: static; }
  .cg-table tr.cg-sub > td:first-child { border-bottom-color: #ebe9e4; }  /* stacked cells: the line between a lab and its own talks stays light */
  .cg-nb { white-space: normal; } .cg-table th { min-width: 0; white-space: normal; } .cg-lock-hdr { display: flex; width: max-content; margin: 4px 0 0; white-space: nowrap; }  /* the "Full dataset" pill drops under its label instead of being clipped */ .cg-table th:nth-child(2), .cg-table tr.cg-org-row > td:nth-child(2) { flex: 0 1 58%; }
  .cg-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 6px; } .cg-sig { margin-bottom: 0; } .cg-sig-none { grid-column: 1 / -1; }
  /* nothing may push the page wider than the phone: pills and posts wrap, long words break, the header pill drops under its label */
  .cg-role { white-space: normal; } .cg-post { min-width: 0; } .cg-table td { overflow-wrap: anywhere; } .cg-lock-hdr { display: inline-flex; margin: 4px 0 0; }
  .cg-chip { padding-top: .4rem; padding-bottom: .4rem; }
  /* one line per item head on phones: format pill · day · time · role pill, then the title full width; the whole list indented under its lab */
  .cg-table tr.cg-sub .c-pres > .cg-lazy, .cg-table tr.cg-sub-anon .c-pres { padding-left: .9rem; }
  .cg-pres-item { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; }
  .cg-pres-item > div:last-child { display: contents; }  /* the body's children join the item's own flex flow */
  .cg-pres-pills { display: contents; } .cg-pres-item .cg-fmt { margin-top: 0; }
  .cg-when { text-align: left; font-size: .72rem; } .cg-when br { display: none; } .cg-when b::after { content: " · "; font-weight: 400; color: #9ca3af; }
  .cg-roles { display: inline-flex; margin-bottom: 0; } .cg-role-verb { display: none; }  /* "1 PhD Student" — the verb is what pushed the pill to a second line */
  .cg-pres-t, .cg-pres-meta, .cg-coauth, .cg-kws, .cg-post, .cg-pres-booth-meta { flex-basis: 100%; } .cg-pres-t { margin-top: 1px; }
  /* pager spans the row: Prev at the left edge, page label centred, Next at the right edge */
  .cg-table-top > * { flex: 1 1 100%; } .cg-pager { display: flex; width: 100%; justify-content: space-between; } .cg-pager > * { flex: 0 0 auto; }
  /* filters: caret and label share one centred line (the caret carried a desktop top margin) */
  .cg-fgroup { align-items: center; } .cg-caret { margin-top: 0; } .cg-filter-label { padding-top: 0; line-height: 1.1rem; }
  /* cards in the two-column grid stretch to the row height: keep icon + text centred within the card, not pinned to its top */
  .cg-sigs .cg-sig { display: flex; flex-direction: column; justify-content: center; } .cg-sigs .cg-sig summary { align-items: center; } }
@media (max-width: 600px) { .cg-page { padding-top: .75rem; } .cg-grid { grid-template-columns: 1fr; } .cg-src { display: none; } .cg-vlabel { font-size: .6rem; } .cg-vbars, .cg-vlabels, .cg-vgroups { gap: 4px; } .cg-fgroup { grid-template-columns: 1.1rem 1fr; gap: .25rem; } .cg-fgroup .cg-filter-label { grid-column: 2; padding-top: 0; } .cg-fgroup .cg-fchips { grid-column: 2; } .cg-fchips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── the live page (not in the mockup) ── */
button.cg-role { font-family: inherit; text-align: left; }  /* role pills are buttons: they open the Request-access dialog */
.cg-link { background: none; border: 0; padding: 0; font: inherit; color: #1A6B6A; font-weight: 600; cursor: pointer; } .cg-link:hover { text-decoration: underline; }  /* "Get notified" */
.cg-notify-msg:empty { display: none; }  /* an always-present live region (announced when filled), invisible while empty */
.cg-fine a { color: inherit; text-decoration: underline; } .cg-fine a:hover { color: #374151; }  /* "Submit a correction" */
/* the hub's plain directory of organization pages (crawlable without JavaScript) */
.cg-dir { margin: 2rem 0 0; } .cg-dir h3 { font-size: 1rem; font-weight: 600; color: #111827; margin: 0 0 .3rem; } .cg-dir-sub { font-size: .85rem; color: #6b7280; margin: 0 0 .7rem; }
.cg-dir-list { list-style: none; margin: 0; padding: 0; columns: 4 14rem; column-gap: 1.25rem; font-size: .82rem; line-height: 1.7; }
.cg-dir-list li { break-inside: avoid; } .cg-dir-list a { color: #374151; text-decoration: none; } .cg-dir-list a:hover { color: #1A6B6A; text-decoration: underline; }
/* organization pages (org.html): one organization, so nothing pins; a header with the logo, stat cards and the way back to the hub */
.cg-org-page .cg-table thead, .cg-org-page .cg-table tbody.cg-has-labs tr.cg-org-row, .cg-org-page .cg-table tbody.cg-has-labs tr.cg-org-row > td, .cg-org-page .cg-table tr.cg-sub td > .cg-stick { position: static; }
.cg-org-hero { margin: 0 0 1.5rem; } .cg-org-hero .cg-org { gap: .9rem; margin-bottom: .6rem; } .cg-org-hero .cg-logo, .cg-org-hero .cg-avatar { width: 48px; height: 48px; font-size: .9rem; }
.cg-org-hero .cg-eyebrow { margin: 0 0 .25rem; } .cg-org-hero .cg-h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); } .cg-org-hero .cg-org-sub { font-size: .9rem; margin: .2rem 0 0; }
.cg-org-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1rem 0; } .cg-org-cta { margin: .25rem 0 0; }
@media (max-width: 700px) { .cg-org-hero, .cg-crumb, .cg-dir, .cg-fine { margin-left: .75rem; margin-right: .75rem; } .cg-org-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }