/* ---- sTWAS Portal styles (complements the bslib theme in app.R) ---------- */

:root {
  --navy: #1F4E8C;
  --teal: #1BA3A6;
  --orange: #E8633A;
  --ink: #1F2937;
  --muted: #64748B;
  --line: #E5E9F0;
  --surface: #FFFFFF;
  --surface-2: #F5F7FA;
}

body { -webkit-font-smoothing: antialiased; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; }

/* Navbar ------------------------------------------------------------------ */
.navbar .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: 0.01em; }
.navbar .brand svg { opacity: 0.9; }
.navbar .nav-link { font-weight: 500; }

/* Full-bleed content: page_navbar wraps panels in .container-fluid with 12px padding */
.bslib-page-navbar > .container-fluid, .navbar + .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
/* Footer pinned to the bottom of short pages */
body.bslib-page-navbar { min-height: 100vh; display: flex; flex-direction: column; }
body.bslib-page-navbar > .container-fluid { flex: 1 0 auto; display: flex; flex-direction: column; }
.portal-footer { margin-top: auto; }
/* ...and flush to the navbar, so the hero starts directly under it */
.navbar + .container-fluid > .tab-content > .tab-pane { margin-top: 0 !important; }

/* Cards that should grow with their content rather than scroll */
.card.grow, .card.grow > .card-body { overflow: visible !important; max-height: none !important; }
.card.grow:not(.h-100) { height: auto !important; }
.card.grow .html-widget-output, .card.grow .shiny-html-output { height: auto !important; flex: 0 0 auto !important; }
.card.h-100 { min-height: 100%; }

/* Sections ----------------------------------------------------------------- */
.section { padding: 1.75rem 0 3rem; }
/* One-screen pages: tight vertical rhythm so content fits a laptop viewport */
.section-tight { padding: 0.9rem 0 0.9rem; }

/* Hero --------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(27,163,166,0.45), transparent 60%),
    linear-gradient(135deg, #173E72 0%, var(--navy) 55%, #2A6AB8 100%);
  color: #fff;
  padding: 1.25rem 0;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; }
.hero-inner { max-width: 720px; }
.hero-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 600; opacity: 0.8; margin-bottom: 0.5rem; }
.hero-title { font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 0; }
.hero-lead { font-size: 0.97rem; opacity: 0.92; margin: 0.7rem 0 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hero-actions .btn { font-weight: 600; }
.hero .btn-light { color: var(--navy); }

/* Hero stat tiles ---------------------------------------------------------- */
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.stat { border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); border-radius: 0.6rem; padding: 0.65rem 0.9rem; }
.stat-accent { background: rgba(27,163,166,0.28); border-color: rgba(27,163,166,0.55); }
.stat-v { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-t { font-size: 0.8rem; font-weight: 600; margin-top: 0.15rem; }
.stat-s { font-size: 0.72rem; opacity: 0.75; }

/* Cards -------------------------------------------------------------------- */
.card { box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.card-header .hint { font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.abstract-body { display: flex; align-items: center; justify-content: center; padding: 0.75rem; }
/* Height left after navbar, hero, section padding and footer */
.abstract-img { display: block; margin: 0 auto; max-height: max(240px, calc(100vh - 440px)); }
.feat-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: rgba(31,78,140,0.08); color: var(--navy); flex: none; }
.card h5 { font-weight: 650; }
.feat-list { display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.feat { display: flex; gap: 0.8rem; align-items: flex-start; }
.feat h6 { font-weight: 650; margin: 0.1rem 0 0.2rem; }
.feat p { font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.45; }

/* Downloads ---------------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 0.8rem; }
.page-head h3 { margin: 0; font-weight: 650; }
.dl-title { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.dl-title h5 { margin: 0; font-size: 1.02rem; }
.dl-card p { font-size: 0.9rem; }

/* Filters, inline in the Associations card header ---------------------------- */
.assoc-head { align-items: center; padding-top: 0.35rem; padding-bottom: 0.35rem; }
.assoc-head .filter-row { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-weight: 400; }
.assoc-head .shiny-input-container { margin-bottom: 0 !important; }
.assoc-head select.form-select, .assoc-head .selectize-input { font-size: 0.82rem; padding-top: 0.2rem; padding-bottom: 0.2rem; min-height: 0; }
.assoc-head .form-check { margin: 0; font-size: 0.85rem; }

/* DataTable ---------------------------------------------------------------- */
.dt-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.dt-top .dataTables_info { padding-top: 0 !important; }
/* Beats DataTables bootstrap5 "width: auto" (div.dataTables_wrapper div.dataTables_filter input) */
div.dataTables_wrapper .dt-top div.dataTables_filter input { width: 300px; max-width: 60vw; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.25rem 0.6rem; margin-left: 0 !important; }
.dt-bottom { display: flex; justify-content: flex-end; align-items: center; margin-top: 0.35rem; font-size: 0.82rem; }
.dt-bottom .pagination { margin: 0; }
.dt-bottom .page-link { padding: 0.2rem 0.55rem; }
table.dataTable { font-size: 0.86rem; border-collapse: collapse !important; }
table.dataTable thead th { font-weight: 600; color: var(--muted); font-size: 0.8rem; border-bottom: 1px solid var(--line) !important; }
table.dataTable td.nowrap { white-space: nowrap; }
table.dataTable tbody td { border-top: 1px solid var(--line); padding: 0.32rem 0.55rem !important; vertical-align: middle; white-space: nowrap; }
/* Single-line rows: long gene lists and descriptions are clipped (full text on hover) */
table.dataTable td.clip { overflow: hidden; text-overflow: ellipsis; }
table.dataTable td.clip:first-child { max-width: 110px; }
table.dataTable td.clip:not(:first-child) { max-width: 200px; }
table.dataTable tbody tr.selected td,
table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px rgba(31,78,140,0.10) !important; color: var(--ink) !important; }
table.dataTable tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--navy), inset 0 0 0 9999px rgba(31,78,140,0.10) !important; }
table.dataTable tbody tr:hover td { background: var(--surface-2); }
table.dataTable td.dt-right { text-align: right; font-variant-numeric: tabular-nums; }
.dataTables_paginate .paginate_button { border-radius: 0.4rem; }

/* Detail header ------------------------------------------------------------ */
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--line); }
.detail-title h3, .detail-title h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.detail-title h3 { font-size: 1.4rem; }
.ext-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.92rem; }
.detail-title .sep { color: var(--muted); font-weight: 400; margin: 0 0.5rem; }
.eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-bottom: 0.2rem; }
.detail-badges, .badges-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pill { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 0.8rem; overflow: hidden; }
.pill-k { padding: 0.2rem 0.55rem; background: var(--surface-2); color: var(--muted); font-weight: 600; border-right: 1px solid var(--line); }
.pill-v { padding: 0.2rem 0.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pill-good { border-color: rgba(27,163,166,0.45); }
.pill-good .pill-v { color: #0E7C7F; }
.pill-good .pill-k { background: rgba(27,163,166,0.10); color: #0E7C7F; border-color: rgba(27,163,166,0.3); }
.pill-muted { color: var(--muted); }

/* Key-value lists ---------------------------------------------------------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.25rem; font-size: 0.92rem; }
.kv-k { color: var(--muted); font-weight: 500; }
.kv-v { word-break: break-word; }
.linkrow { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
a.ext { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(31,78,140,0.25); }
a.ext:hover { border-bottom-color: var(--navy); }

.cohort-table { font-size: 0.9rem; margin-bottom: 0; }
.cohort-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--line); }
.cohort-table td { font-variant-numeric: tabular-nums; }
.cohort-table .meta-row td { font-weight: 600; border-top: 2px solid var(--line); }

/* Placeholders ------------------------------------------------------------- */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed #C7D2E0; border-radius: 0.75rem; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, #FAFBFD 0 10px, #F3F6FA 10px 20px);
  color: var(--muted);
}
.ph-icon { color: var(--navy); opacity: 0.6; margin-bottom: 0.5rem; }
.ph-title { font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; }
.ph-text { font-size: 0.84rem; max-width: 46ch; line-height: 1.45; }
.ph-locked { background: var(--surface-2); border-style: solid; border-color: var(--line); }
.ph-locked .ph-icon { opacity: 0.35; }

/* Pre-rendered figures: image and placeholder share the image's aspect ratio */
.fig-img { display: block; width: 100%; height: auto; margin: 0 auto; }
.fig-frame { width: 100%; }
.fig-frame > .ph { height: 100%; }

.pill-novel { border-color: rgba(232,99,58,0.45); }
.pill-novel .pill-v { color: #B9461F; }
.pill-novel .pill-k { background: rgba(232,99,58,0.10); color: #B9461F; border-color: rgba(232,99,58,0.3); }
.pill-warn { border-color: rgba(212,63,58,0.45); }
.pill-warn .pill-v { color: #A12A26; }

/* LD key under the coloc plot ---------------------------------------------- */
/* Font scales with the card width so the key stays on one row (it is ~54× the font size wide) */
.coloc-wrap { container-type: inline-size; }
.ld-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4em 0.8em; margin-top: 0.6rem; color: var(--muted);
  font-size: clamp(0.55rem, calc(100cqi / 57), 0.74rem);
}
.ld-item { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.ld-swatch { width: 0.8em; height: 0.8em; border-radius: 50%; box-shadow: 0 0 0 1px rgba(17,24,39,0.55); flex: none; }
.ld-swatch.ld-ref { border-radius: 1px; transform: rotate(45deg) scale(0.9); }

/* Tissue & literature ------------------------------------------------------ */
.tissue-list { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow: auto; font-size: 0.86rem; }
.tissue-list li {
  display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.28rem 0.4rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(27,163,166,0.13) var(--w, 0%), transparent var(--w, 0%));
}
/* Proportion view: bar = share of the tissue's samples (0-100%), navy tick = overall rate */
.tissue-list[style*="--base"] li {
  display: grid; grid-template-columns: 1fr auto 3.2em; align-items: baseline;
  background:
    linear-gradient(90deg, transparent calc(var(--base) - 1px), rgba(31,78,140,0.55) calc(var(--base) - 1px), rgba(31,78,140,0.55) var(--base), transparent var(--base)),
    linear-gradient(90deg, rgba(27,163,166,0.16) var(--w, 0%), transparent var(--w, 0%));
}
.tissue-list .t-n { color: var(--muted); font-size: 0.78em; }
.tissue-list .t-p { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tissue-rare { margin-top: 0.6rem; font-size: 0.84rem; }
.tissue-rare summary { color: var(--muted); cursor: pointer; }
.tissue-rare .tissue-list { margin-top: 0.3rem; max-height: 180px; }
.tissue-note { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--muted); line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { font-size: 0.76rem; padding: 0.08rem 0.5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.lit-sub { margin: 1.1rem 0 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ref-list { padding-left: 1.2rem; font-size: 0.86rem; margin: 0; }
.ref-list li { margin-bottom: 0.35rem; line-height: 1.4; }
.ref-list a { text-decoration: none; }
.ref-list a:hover { text-decoration: underline; }
.ref-id { margin-left: 0.4rem; font-size: 0.78rem; white-space: nowrap; }
.ref-id a { color: var(--muted); }
.ref-loose { margin-top: 0.4rem; font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; }
.ref-chip a { text-decoration: none; }
.lit-conflict { margin-top: 0.9rem; padding: 0.55rem 0.75rem; border-left: 3px solid #D43F3A; background: rgba(212,63,58,0.06); border-radius: 0.35rem; font-size: 0.84rem; }
.lit-conflict-k { display: block; font-weight: 600; color: #A12A26; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }

/* Footer ------------------------------------------------------------------- */
.portal-footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.8rem; padding: 0.55rem 0; }
.portal-footer a { color: var(--navy); text-decoration: none; font-weight: 500; }

/* Misc --------------------------------------------------------------------- */
.cite { font-size: 1rem; }
@media (max-width: 768px) {
  .hero { padding: 1.5rem 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .kv-k { margin-top: 0.5rem; }
}