/* DrugDis additions to the shared project-page styles. The two component
   colours follow Fig. 1 of the manuscript: additive blue, interaction purple. */
:root{--dd-add:#2c5aa0;--dd-add-2:#a9bfe1;--dd-add-3:#6488c4;--dd-int:#a1488f}
.result-strip.five{grid-template-columns:repeat(5,1fr)}
.result-card .pds-fill{background:var(--dd-add)}
.result-card .pds-fill.int{left:auto;right:0;width:var(--pint);background:var(--dd-int);opacity:.85}
.result-card .dof-note{display:block;margin-top:8px;font-size:9px;color:var(--muted)}
.pooled-row{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:22px;font-size:12px;color:var(--text)}
.pooled-row strong{font:400 22px/1 var(--serif);color:var(--ink);margin-right:6px}
.swatch{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.swatch.add{background:var(--dd-add)}.swatch.int{background:var(--dd-int)}
.delta-pos{color:var(--dd-add);font-weight:700}.delta-neg{color:var(--accent-dark);font-weight:700}
@media(max-width:1000px){.result-strip.five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.result-strip.five{grid-template-columns:1fr}}
/* science.css replaces the framework-panel text with PertResolve-specific copy
   keyed on its own panel names; restore the text that site.js writes. */
#framework #panel-copy{font-size:13px!important;line-height:1.65!important;color:var(--muted)}
#framework #panel-note{font-size:11px!important;color:var(--text)!important}
#framework #panel-copy::after,#framework #panel-note::after{content:none!important}
#framework .diag-vis-heading{display:flex!important}
#framework .vis-caption{display:block!important}
/* keep long code lines inside the card on narrow screens instead of widening the page */
.software-grid>*{min-width:0}
.code-card pre{max-width:100%;overflow-x:auto}
/* Balance: the DrugDis title is longer than the one the shared styles were sized
   for, so on wide screens the text column is narrowed and the type scaled down,
   giving the Fig. 1 excerpt more width. Below 900px the shared single-column
   layout applies unchanged. */
@media(min-width:901px){
  .hero{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px;padding:64px 0 60px}
  .hero h1{font-size:clamp(38px,3.4vw,50px);line-height:1.06;margin:18px 0 20px}
  .hero-lead{font-size:18px}
  .section h2{font-size:clamp(30px,2.6vw,36px);line-height:1.12}
  .section-head{gap:60px;margin-bottom:38px}
  .compatibility-callout{grid-template-columns:270px 1fr}
  .compatibility-number{font-size:34px;white-space:nowrap}
}
@media(max-width:560px){.hero h1{font-size:36px}}

/* Concise broad-audience findings grid. */
.finding-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:4px solid var(--ink);border-bottom:1px solid var(--ink)}
.finding-card{padding:28px 30px 28px 0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.finding-card:nth-child(even){padding-left:30px;border-right:0}
.finding-card:nth-child(n+3){border-bottom:0}
.finding-metric{display:block;margin-bottom:20px;font:400 34px/1 var(--serif);color:var(--accent)}
.finding-card h3{max-width:430px;font:400 23px/1.24 var(--serif);color:var(--ink)}
.finding-card p{max-width:500px;margin-top:11px;font-size:11px;line-height:1.75;color:var(--muted)}
.finding-callout{display:grid;grid-template-columns:220px 1fr;gap:34px;margin-top:30px;padding:20px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.finding-callout>span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.finding-callout p{max-width:760px;font:400 18px/1.45 var(--serif);color:var(--ink)}
.finding-callout strong{font-weight:700}
@media(max-width:800px){.finding-grid{grid-template-columns:1fr}.finding-card,.finding-card:nth-child(even){padding:24px 0;border-right:0;border-bottom:1px solid var(--rule)}.finding-card:last-child{border-bottom:0}.finding-callout{grid-template-columns:1fr;gap:10px}}