/* Topic overviews (explorable maps), built by scripts/build_overviews.py. Uses the site tokens in
   style.css; the result colours below follow the same light and dark pattern. */
:root {
    --ov-ok-bg: #DDF1EE;    --ov-ok: #0F5F58;
    --ov-mixed-bg: #FBF0D9; --ov-mixed: #7A4F00;
    --ov-null-bg: #E6EAEE;  --ov-null: #3F4A55;
    --ov-prop-bg: #EEE8FA;  --ov-prop: #533A95;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ov-ok-bg: #123A35;    --ov-ok: #7FF0DD;
        --ov-mixed-bg: #3A2E14; --ov-mixed: #F2C46B;
        --ov-null-bg: #24303A;  --ov-null: #C9D3DA;
        --ov-prop-bg: #2E2547;  --ov-prop: #CDBBFF;
    }
}
:root[data-theme="dark"] {
    --ov-ok-bg: #123A35;    --ov-ok: #7FF0DD;
    --ov-mixed-bg: #3A2E14; --ov-mixed: #F2C46B;
    --ov-null-bg: #24303A;  --ov-null: #C9D3DA;
    --ov-prop-bg: #2E2547;  --ov-prop: #CDBBFF;
}

.ov { display: grid; gap: 56px; max-width: 1040px; margin: 0 auto 64px; }
.ov section { display: grid; gap: 16px; min-width: 0; }
.ov h1, .ov h2, .ov h3, .ov h4 { text-wrap: balance; line-height: 1.2; }
.ov h1 { font-size: clamp(2.2em, 5vw, 3.2em); letter-spacing: -0.03em; }
.ov h2 { font-size: clamp(1.4em, 3vw, 1.8em); letter-spacing: -0.02em; }
.ov-head { display: grid; gap: 14px; padding-top: 12px; }
.ov-eyebrow { font-size: 0.8em; font-weight: 600; color: var(--primary); }
.ov-thesis { font-size: 1.3em; line-height: 1.45; max-width: 34em; }
.ov-def { max-width: 44em; color: var(--text-light); }
.ov-def b { color: var(--text); }
.ov-byline, .ov-hint, .ov-legend { font-size: 0.85em; color: var(--text-light); max-width: 52em; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }

/* result labels */
.ov-res { display: inline-block; font-size: 0.72em; font-weight: 600; line-height: 1.3; padding: 2px 9px; border-radius: 999px; white-space: nowrap; width: fit-content; }
.ov-res-ok { background: var(--ov-ok-bg); color: var(--ov-ok); }
.ov-res-mixed { background: var(--ov-mixed-bg); color: var(--ov-mixed); }
.ov-res-null { background: var(--ov-null-bg); color: var(--ov-null); }
.ov-res-prop { background: var(--ov-prop-bg); color: var(--ov-prop); }
.ov-kind { display: inline-block; font-size: 0.8em; font-weight: 500; padding: 1px 9px; border-radius: 999px; background: var(--bg-alt); color: var(--text-light); }

/* the model: how the studies fit together */
.ov-model { display: grid; gap: 12px; margin: 0; }
.ov-mflow { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: m; }
.ov-mflow li { position: relative; padding-right: 22px; display: grid; }
.ov-mflow li:not(:last-child)::after { content: ""; position: absolute; right: 7px; top: 50%; width: 10px; height: 10px;
    border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); transform: translateY(-50%) rotate(45deg); }
.ov-mnode { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--radius-sm); background: var(--bg-card);
    border: 1px solid var(--border); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); }
.ov-mnode b { font-size: 0.95em; }
.ov-mnode span { font-size: 0.82em; line-height: 1.4; color: var(--text-light); }
.ov-mnode:hover { border-color: var(--primary); text-decoration: none; }
.ov-mnode[aria-current="true"] { border: 2px solid var(--primary); padding: 13px; }
.ov-band { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--bg-alt); border: 1px dashed var(--primary); font-size: 0.9em; }
.ov-band span { color: var(--text-light); }
.ov-band-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ov-band-links a[aria-current="true"] { font-weight: 600; }
.ov-model figcaption { font-size: 0.85em; color: var(--text-light); max-width: 52em; }

/* the convergence grid: claims by papers */
.ov-grid { border-collapse: collapse; background: var(--bg-card); font-size: 0.85em; }
.ov-grid th, .ov-grid td { border-bottom: 1px solid var(--border); padding: 8px 10px; }
.ov-grid thead th { vertical-align: bottom; font-weight: 600; text-align: left; }
.ov-grid thead th:not(.ov-grid-corner) { padding: 8px 4px; width: 2.4em; }
.ov-grid thead th a { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; color: var(--text); font-size: 0.92em; }
.ov-grid thead th a:hover { color: var(--primary); }
.ov-grid tbody th { text-align: left; font-weight: 500; min-width: 15em; max-width: 24em; line-height: 1.35; }
.ov-grid tbody th a { color: var(--text); text-decoration: none; }
.ov-grid tbody th a:hover, .ov-grid tbody th a[aria-current="true"] { color: var(--primary); text-decoration: underline; }
.ov-grid tbody tr:has(a[aria-current="true"]) { background: var(--bg-alt); }
.ov-cell { text-align: center; font-size: 1.1em; }
.ov-core { color: var(--primary); }
.ov-supports { color: var(--text-light); }
.ov-complicates { color: var(--ov-mixed); }
.ov-cell-key { white-space: nowrap; margin-right: 14px; }
.ov-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* claim panels; without scripts every claim is listed */
.ov-claims { display: grid; gap: 14px; }
.ov-claim { display: grid; gap: 10px; padding: 20px 24px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); scroll-margin-top: 80px; }
.ov-claim h3 { font-size: 1.3em; }
.ov-synth { font-size: 1.05em; max-width: 44em; }
.ov-evline { font-size: 0.88em; color: var(--text-light); }
.ov-evline b { color: var(--text); }
.ov-group h4 { font-size: 0.85em; margin-bottom: 4px; }
.ov-group ul { list-style: none; display: grid; gap: 6px; }
.ov-group li { font-size: 0.92em; max-width: 46em; color: var(--text); }
.ov-group li a { font-weight: 600; margin-right: 4px; }
.ov-claim.is-current { border: 2px solid var(--primary); padding: 19px 23px; }

/* the audience lens */
.ov-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-tab { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 0.9em; font-weight: 500; text-decoration: none; }
.ov-tab[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ov-tab:hover { text-decoration: none; border-color: var(--primary); }
.ov-lens-panel { display: grid; gap: 18px; scroll-margin-top: 80px; }
.ov-lens-panel h3 { font-size: 1.15em; display: grid; gap: 2px; }
.ov-lens-panel h3 span { font-size: 0.75em; font-weight: 400; color: var(--text-light); }
.ov-lens-panel.is-current h3 { color: var(--primary); }
.ov-qa { display: grid; gap: 6px; max-width: 46em; }
.ov-qa h4 { font-size: 1em; }
.ov-inst { font-size: 0.85em; color: var(--text-light); }

/* key messages, gaps, papers, citation */
.ov-km { list-style: none; display: grid; gap: 12px; }
.ov-km li { display: grid; gap: 8px; padding: 14px 18px; border-left: 3px solid var(--primary); background: var(--bg-card); border-radius: 0; }
.ov-table-wrap { overflow-x: auto; }
.ov-gaps { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9em; background: var(--bg-card); }
.ov-gaps th, .ov-gaps td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ov-gaps th { font-size: 0.85em; color: var(--text-light); font-weight: 600; }
.ov-gap-not { color: var(--ov-mixed); font-weight: 600; white-space: nowrap; }
.ov-gap-part { color: var(--ov-ok); font-weight: 600; white-space: nowrap; }
.ov-papers { list-style: none; display: grid; gap: 12px; }
.ov-papers li { display: grid; gap: 2px; }
.ov-pmeta { font-size: 0.85em; color: var(--text-light); }
.ov-papers > li { scroll-margin-top: 80px; padding: 8px 10px; border-radius: var(--radius-sm); }
.ov-papers > li:target { background: var(--bg-alt); outline: 2px solid var(--primary); }
.ov-feeds { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 0.82em; }
.ov-feeds a { color: var(--text-light); }
.ov-cite { font-size: 0.85em; color: var(--text-light); background: var(--bg-alt); border-radius: var(--radius-sm); padding: 14px 18px; display: grid; gap: 6px; }

@media (max-width: 720px) {
    .ov { gap: 44px; }
    .ov-thesis { font-size: 1.12em; }
    .ov-mflow { grid-template-columns: 1fr; gap: 18px; }
    .ov-mflow li { padding-right: 0; }
    .ov-mflow li:not(:last-child)::after { right: auto; left: 22px; top: auto; bottom: -15px; transform: rotate(135deg); }
    .ov-claim { padding: 16px 18px; }
}

.ov-about { display: grid; gap: 8px; max-width: 44em; }
.ov-about p { color: var(--text); }
.ov-related { font-size: 0.95em; padding: 14px 18px; border-left: 3px solid var(--primary); background: var(--bg-card); }
.ov-feeds li { display: block; }