/* The standalone drugs map page (drugs-map.html): a scrolling reading page, not the
   viewer's fixed full-screen canvas, so it undoes base.css's html/body lock. The map
   itself keeps its css/drug-map.css look; this file is only the page around it. */
html:has(body.dmp), body.dmp { height: auto; min-height: 100%; overflow: auto; touch-action: auto; }
.dmp-header, .dmp-main { width: min(1100px, calc(100vw - 32px)); margin: 0 auto; }
.dmp-header { padding: 18px 0 8px; }
/* Title centred over the page, theme + language buttons pinned right: a 3-column grid
   whose empty first column balances the buttons' width. */
.dmp-title-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.dmp-title-btns { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.dmp-title { grid-column: 2; margin: 0; font-size: 20px; text-align: center; }
.dmp-title .beta-tag { margin-left: 8px; vertical-align: middle; }
.dmp-lang { margin: 0; }
.dmp-byline { margin: 4px 0 10px; text-align: center; }
.dmp-intro { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.dmp-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.dmp-links a, .dmp-intro a { color: var(--accent-light); }
.dmp-main { padding: 8px 0 32px; font-size: 14px; }
.dmp-loading { color: var(--muted); }
@media (max-width: 560px) {
  .dmp-header, .dmp-main { width: calc(100vw - 20px); }
}