spb/cancerindex
Public
1@import 'tailwindcss';23/*4 CancerIndex design language (CLAUDE.md UI rules): scientific / editorial / institutional / dense.5 Off-white paper, deep charcoal ink, muted neutrals, ONE restrained accent (deep teal) for links and6 active states, thin rules, tabular numerals. No gradients, no card grids, no decorative colour.7 Colour is never the sole carrier of meaning: every badge also carries text.8*/910@theme {11 --font-sans: var(--font-ui), ui-sans-serif, system-ui, sans-serif;12 --font-serif: var(--font-display), 'Iowan Old Style', Georgia, serif;13 --font-mono: var(--font-code), ui-monospace, 'SF Mono', Menlo, monospace;1415 --color-paper: #fafaf7;16 --color-paper-2: #f3f3ee;17 --color-paper-3: #ebebe4;18 --color-ink: #1c1c1a;19 --color-ink-2: #4a4a46;20 --color-ink-3: #7b7b75;21 --color-ink-4: #a8a8a1;22 --color-rule: #dcdcd4;23 --color-rule-strong: #b8b8ae;24 --color-accent: #0f5f63;25 --color-accent-2: #0b4a4d;26 --color-accent-soft: #e2eeee;27 --color-warn: #8a4b0a;28 --color-warn-soft: #f6ead8;29 --color-danger: #8b1e2d;30 --color-danger-soft: #f4e1e4;31 --color-ok: #2d5f2e;32 --color-ok-soft: #e1ecdf;3334 --radius-sm: 2px;35 --radius-md: 3px;36}3738:root {39 color-scheme: light;40 --ci-header-h: 56px;41}4243html {44 background: var(--color-paper);45 color: var(--color-ink);46 font-family: var(--font-sans);47 font-size: 15px;48 line-height: 1.5;49 -webkit-text-size-adjust: 100%;50 scroll-padding-top: calc(var(--ci-header-h) + 56px);51}5253body {54 font-variant-numeric: tabular-nums;55 font-feature-settings: 'tnum' 1, 'cv11' 1;56 text-rendering: optimizeLegibility;57}5859h1,60h2,61h3,62.font-display {63 font-family: var(--font-serif);64 font-weight: 500;65 letter-spacing: -0.005em;66 text-wrap: balance;67}6869a {70 text-underline-offset: 2px;71}7273:focus-visible {74 outline: 2px solid var(--color-accent);75 outline-offset: 2px;76}7778::selection {79 background: var(--color-accent-soft);80}8182/*83 Grid children default to min-width:auto, so a wide SVG, a long identifier or a mono formula84 would stretch a column past the viewport on mobile. Let columns shrink; inner tables scroll85 inside .ci-table-wrap and long strings wrap through overflow-wrap.86*/87.grid > * {88 min-width: 0;89}90code,91kbd,92.ci-mono {93 overflow-wrap: anywhere;94}9596/* --- Utility classes shared by components (kept minimal; Tailwind does the rest) --- */9798.ci-link {99 color: var(--color-accent);100 text-decoration: underline;101 text-decoration-color: color-mix(in oklab, var(--color-accent) 35%, transparent);102}103.ci-link:hover {104 text-decoration-color: var(--color-accent);105}106107.ci-rule {108 border-top: 1px solid var(--color-rule);109}110111.ci-kicker {112 font-family: var(--font-sans);113 font-size: 11px;114 font-weight: 600;115 letter-spacing: 0.08em;116 text-transform: uppercase;117 color: var(--color-ink-3);118}119120.ci-mono {121 font-family: var(--font-mono);122 font-size: 0.86em;123 letter-spacing: 0;124}125126.ci-num {127 font-variant-numeric: tabular-nums;128 text-align: right;129 white-space: nowrap;130}131132/* Dense data table */133.ci-table-wrap {134 overflow-x: auto;135 -webkit-overflow-scrolling: touch;136 border-top: 1px solid var(--color-rule-strong);137 border-bottom: 1px solid var(--color-rule);138}139.ci-table {140 width: 100%;141 min-width: 100%;142 border-collapse: separate;143 border-spacing: 0;144 font-size: 13.5px;145}146.ci-table thead th {147 position: sticky;148 top: 0;149 z-index: 1;150 background: var(--color-paper);151 border-bottom: 1px solid var(--color-rule-strong);152 padding: 8px 10px;153 text-align: left;154 font-family: var(--font-sans);155 font-size: 11px;156 font-weight: 600;157 letter-spacing: 0.06em;158 text-transform: uppercase;159 color: var(--color-ink-3);160 white-space: nowrap;161}162.ci-table thead th.num,163.ci-table td.num {164 text-align: right;165}166.ci-table tbody td {167 padding: 7px 10px;168 border-bottom: 1px solid var(--color-rule);169 vertical-align: top;170}171.ci-table tbody tr:hover td {172 background: var(--color-paper-2);173}174.ci-table th.sticky-col,175.ci-table td.sticky-col {176 position: sticky;177 left: 0;178 background: var(--color-paper);179 z-index: 2;180}181182/* Sticky in-page tabs */183.ci-tabs {184 position: sticky;185 top: var(--ci-header-h);186 z-index: 20;187 background: color-mix(in oklab, var(--color-paper) 94%, transparent);188 backdrop-filter: saturate(120%) blur(6px);189 border-bottom: 1px solid var(--color-rule);190 overflow-x: auto;191 scrollbar-width: none;192}193.ci-tabs::-webkit-scrollbar {194 display: none;195}196.ci-tab {197 display: inline-block;198 padding: 10px 2px;199 margin-right: 18px;200 font-size: 13.5px;201 color: var(--color-ink-2);202 border-bottom: 2px solid transparent;203 white-space: nowrap;204}205.ci-tab:hover {206 color: var(--color-ink);207}208.ci-tab[aria-current='page'] {209 color: var(--color-accent);210 border-bottom-color: var(--color-accent);211 font-weight: 500;212}213214/* Popover used for provenance (CSS-only, hover + focus) */215.ci-pop {216 position: relative;217 display: inline-block;218}219.ci-pop > .ci-pop-panel {220 display: none;221 position: absolute;222 z-index: 40;223 left: 0;224 top: calc(100% + 4px);225 min-width: 260px;226 max-width: 360px;227 background: #fff;228 border: 1px solid var(--color-rule-strong);229 box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.25);230 padding: 10px 12px;231 font-size: 12.5px;232 line-height: 1.45;233 text-align: left;234 white-space: normal;235 font-weight: 400;236 text-transform: none;237 letter-spacing: 0;238 color: var(--color-ink);239}240.ci-pop:hover > .ci-pop-panel,241.ci-pop:focus-within > .ci-pop-panel {242 display: block;243}244@media (max-width: 640px) {245 .ci-pop > .ci-pop-panel {246 position: fixed;247 left: 12px;248 right: 12px;249 top: auto;250 bottom: 12px;251 max-width: none;252 }253}254255/* Completeness dots */256.ci-dots {257 display: inline-flex;258 gap: 3px;259 vertical-align: middle;260}261.ci-dot {262 width: 7px;263 height: 7px;264 border-radius: 50%;265 border: 1px solid var(--color-ink-4);266 background: transparent;267}268.ci-dot.on {269 background: var(--color-accent);270 border-color: var(--color-accent);271}272273details > summary {274 cursor: pointer;275 list-style: none;276}277details > summary::-webkit-details-marker {278 display: none;279}280281.ci-prose p + p {282 margin-top: 0.75em;283}284.ci-prose h2 {285 font-size: 1.35rem;286 margin-top: 2rem;287 margin-bottom: 0.5rem;288}289.ci-prose h3 {290 font-size: 1.1rem;291 margin-top: 1.4rem;292 margin-bottom: 0.35rem;293}294.ci-prose ul {295 list-style: disc;296 padding-left: 1.25rem;297 margin: 0.5rem 0;298}299.ci-prose li + li {300 margin-top: 0.25rem;301}302.ci-prose code {303 font-family: var(--font-mono);304 font-size: 0.85em;305 background: var(--color-paper-3);306 padding: 0 4px;307}308309pre.ci-code {310 font-family: var(--font-mono);311 font-size: 12.5px;312 line-height: 1.5;313 background: var(--color-paper-2);314 border: 1px solid var(--color-rule);315 padding: 10px 12px;316 overflow-x: auto;317 white-space: pre;318}319320@media print {321 .no-print {322 display: none !important;323 }324}325326/* ------------------------------------------------------------------------------------------------327 Hardening pass (pagination, table weight, accessibility). Appended; nothing above is rewritten.328 ------------------------------------------------------------------------------------------------ */329330/* Badges: one short class per tone instead of a long utility string repeated on every table row331 (every className ships twice — HTML + RSC payload). Text always accompanies the colour. */332.ci-badge {333 display: inline-flex;334 align-items: center;335 gap: 4px;336 border: 1px solid transparent;337 border-radius: var(--radius-sm);338 padding: 1px 6px;339 font-size: 11px;340 font-weight: 500;341 line-height: 16px;342 letter-spacing: 0.02em;343}344.ci-badge--neutral {345 background: var(--color-paper-3);346 color: var(--color-ink-2);347}348.ci-badge--accent {349 background: var(--color-accent-soft);350 color: var(--color-accent-2);351}352.ci-badge--warn {353 background: var(--color-warn-soft);354 color: var(--color-warn);355}356.ci-badge--danger {357 background: var(--color-danger-soft);358 color: var(--color-danger);359}360.ci-badge--ok {361 background: var(--color-ok-soft);362 color: var(--color-ok);363}364.ci-badge--outline {365 background: transparent;366 color: var(--color-ink-2);367 border-color: var(--color-rule-strong);368}369370/* Source badge link (compact rows and popover trigger share one class) */371.ci-src {372 font-family: var(--font-mono);373 display: inline-flex;374 align-items: center;375 border: 1px solid var(--color-rule-strong);376 border-radius: var(--radius-sm);377 background: var(--color-paper);378 padding: 0 4px;379 font-size: 10.5px;380 line-height: 16px;381 color: var(--color-ink-2);382 text-decoration: none;383 white-space: nowrap;384}385.ci-src:hover,386.ci-src:focus-visible {387 border-color: var(--color-accent);388 color: var(--color-accent);389}390391/* Pager */392.ci-pager-link {393 display: inline-block;394 min-width: 28px;395 border: 1px solid var(--color-rule);396 padding: 4px 8px;397 text-align: center;398 color: var(--color-ink-2);399 text-decoration: none;400 line-height: 1.2;401}402.ci-pager-link:hover {403 border-color: var(--color-accent);404 color: var(--color-accent);405}406.ci-pager-link.is-current {407 border-color: var(--color-accent);408 background: var(--color-accent-soft);409 color: var(--color-accent-2);410 font-weight: 500;411}412.ci-pager-link.is-disabled {413 color: var(--color-ink-4);414 cursor: default;415}416417/* Filter chips (status / phase / cohort / jurisdiction selectors) */418.ci-chip {419 display: inline-block;420 border: 1px solid var(--color-rule);421 padding: 2px 8px;422 color: var(--color-ink-2);423 text-decoration: none;424 line-height: 1.35;425}426.ci-chip:hover {427 border-color: var(--color-accent);428}429.ci-chip[aria-current='page'],430.ci-chip.is-selected {431 border-color: var(--color-accent);432 background: var(--color-accent-soft);433 color: var(--color-accent-2);434}435436/* Focus visibility: links inside dense tables, tabs, chips and pager get a visible ring even when437 the surrounding element clips overflow (outline-offset 0 keeps the ring inside table cells). */438.ci-tab:focus-visible,439.ci-chip:focus-visible,440.ci-pager-link:focus-visible,441.ci-src:focus-visible,442.ci-table a:focus-visible,443.ci-table summary:focus-visible {444 outline: 2px solid var(--color-accent);445 outline-offset: 0;446 border-radius: 2px;447}448.ci-tabs a:focus-visible {449 outline-offset: -2px;450}451details > summary:focus-visible {452 outline: 2px solid var(--color-accent);453 outline-offset: 2px;454}455456/* Table captions live above the table (visible text, not sr-only) — the caption is the place where457 the ONE provenance popover per table sits. */458.ci-table caption {459 caption-side: top;460 text-align: left;461 padding: 0 0 6px;462 font-size: 12px;463 color: var(--color-ink-3);464}465.ci-table thead th[aria-sort] {466 cursor: default;467}468469/* Skeletons (loading.tsx) — never look like data */470.ci-skeleton {471 background: linear-gradient(90deg, var(--color-paper-3) 0%, var(--color-paper-2) 50%, var(--color-paper-3) 100%);472 background-size: 200% 100%;473 border-radius: 2px;474 animation: ci-shimmer 1.4s ease-in-out infinite;475}476@keyframes ci-shimmer {477 from {478 background-position: 200% 0;479 }480 to {481 background-position: -200% 0;482 }483}484@media (prefers-reduced-motion: reduce) {485 .ci-skeleton {486 animation: none;487 }488}489490/* Keep the sticky provenance popover reachable by keyboard users: the panel becomes visible while491 any element inside is focused (focus-within already covers the trigger). */492.ci-pop:focus-within > .ci-pop-panel {493 display: block;494}495496/* Row-group header inside a single dense table (one <tbody> per variant / cancer group) */497.ci-table tr.ci-group th {498 position: static;499 background: var(--color-paper-2);500 border-top: 1px solid var(--color-rule-strong);501 border-bottom: 1px solid var(--color-rule);502 padding: 7px 10px;503 text-align: left;504 font-family: var(--font-sans);505 font-size: 13.5px;506 font-weight: 500;507 letter-spacing: 0;508 text-transform: none;509 color: var(--color-ink);510 white-space: normal;511 overflow-wrap: anywhere;512}513.ci-table tbody:first-of-type tr.ci-group th {514 border-top: 0;515}516.ci-evidence td.w-t {517 min-width: 160px;518}519abbr.no-underline {520 text-decoration: none;521}522523/* Compact list rows (e.g. variants on a gene page): link left, meta right */524.ci-rows {525 margin: 0;526 padding: 0;527 list-style: none;528 font-size: 13.5px;529}530.ci-rows > li {531 display: flex;532 align-items: baseline;533 justify-content: space-between;534 gap: 8px;535 border-bottom: 1px solid var(--color-rule);536 padding: 4px 0;537}538.ci-rows > li > span {539 font-size: 11.5px;540 color: var(--color-ink-3);541 text-align: right;542}543544/* Publication list */545.ci-pubs {546 margin: 0;547 padding: 0;548 list-style: none;549}550.ci-pub {551 padding: 10px 0;552 border-bottom: 1px solid var(--color-rule);553 font-size: 13.5px;554}555.ci-pub > div {556 display: flex;557 flex-wrap: wrap;558 align-items: baseline;559 column-gap: 8px;560}561.ci-pub > p {562 margin-top: 2px;563 font-size: 12.5px;564 color: var(--color-ink-3);565}566567/* Evidence table: link, level and details styles are scoped here instead of per-cell classes568 (50 rows × ~8 classes × 2 copies per page). */569.ci-evidence a {570 color: var(--color-accent);571 text-decoration: underline;572 text-decoration-color: color-mix(in oklab, var(--color-accent) 35%, transparent);573}574.ci-evidence a:hover {575 text-decoration-color: var(--color-accent);576}577.ci-evidence tr.ci-group a.ci-mono {578 color: var(--color-ink-3);579 text-decoration: none;580}581.ci-evidence tr.ci-group a.ci-mono:hover {582 color: var(--color-accent);583}584.ci-evidence abbr {585 font-family: var(--font-mono);586 font-size: 0.86em;587 font-weight: 500;588 text-decoration: none;589}590.ci-evidence td.ev {591 max-width: 360px;592 font-size: 12.5px;593 color: var(--color-ink-2);594}595.ci-evidence td.ev summary {596 color: var(--color-accent);597 text-decoration: underline;598 text-decoration-color: color-mix(in oklab, var(--color-accent) 35%, transparent);599}600.ci-evidence td.ev details p {601 margin-top: 4px;602}603