/* The drugs map (drugs-map.html, js/drug-map/view.js): folded control boxes, the SVG
   scatter, then legend + axis boxes. Point colours are data (set inline); everything
   else reads the theme tokens. The page around it is css/drugs-map-page.css. */
.dm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.dm-controls .seg-switch, .dm-controls .list-toggle { margin: 0; }
/* Each control section is a rounded box, folded by default, its summary showing the
   current value so a folded box still says what it is set to. */
.dm-box { margin: 0 0 6px; border: 1px solid rgba(var(--ink), 0.14); border-radius: 8px; }
.dm-box > summary { display: flex; align-items: baseline; gap: 10px; padding: 5px 10px; cursor: pointer; }
.dm-box-title { flex: 0 0 auto; font-size: 12px; font-weight: 600; }
.dm-box-value { overflow: hidden; font-size: 11px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.dm-box-body { padding: 2px 10px 8px; }
.dm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.dm-row-label { flex: 0 0 auto; min-width: 48px; font-size: 11px; font-weight: 600; color: var(--muted); }
.dm-row-value { font-size: 11px; color: var(--muted); }
.dm-row .seg-switch { margin: 0; }
.dm-panel { margin: 0 0 4px; }
.dm-plot-btn {
  position: absolute;
  top: 6px;
  padding: 2px 7px;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  color: var(--muted);
  background: rgba(var(--ink), 0.08);
  border: 1px solid rgba(var(--ink), 0.15);
  border-radius: 5px;
  cursor: pointer;
}
.dm-plot-btn:hover { color: var(--text); }
.dm-plot-btn[hidden] { display: none; }
.dm-fullscreen { right: 6px; }
.dm-unrotate { right: 44px; font-size: 12px; }
/* Fullscreen (or its fixed-overlay fallback): the plot fills the screen. */
.dm-plot-wrap.dm-fs { position: fixed; inset: 0; z-index: 1000; background: var(--dm-plot-bg); }
.dm-plot-wrap.dm-fs .dm-plot { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.dm-unhide, .dm-chip {
  padding: 2px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  background: rgba(var(--ink), 0.06);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}
.dm-unhide:hover, .dm-chip:hover { color: var(--text); background: rgba(var(--ink), 0.12); }
.dm-chip { display: inline-flex; align-items: center; gap: 5px; }
.dm-chip[hidden] { display: none; }
.dm-chip.active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.dm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dm-plot {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 640;
  /* Opaque: the modal panel is translucent and the 3D scene would show through. */
  background: var(--dm-plot-bg);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 6px;
  cursor: grab;
  touch-action: none;
}
/* The outline reads the ink token so pale points stay visible on the light page too. */
.dm-point { cursor: pointer; stroke: rgba(var(--ink), 0.35); stroke-width: 0.6; }
.dm-grid line { stroke: var(--dm-grid); }
.dm-cats.dm-no-dots .dm-dot { display: none; }
/* A nudged dot's faint line back to its true place, and a dot fading out on re-render. */
.dm-leader { stroke: rgba(var(--ink), 0.35); }
.dm-ghost { pointer-events: none; stroke: rgba(var(--ink), 0.35); stroke-width: 0.6; }
.dm-point:hover { stroke: var(--text); }
.dm-label { fill: var(--text); cursor: pointer; }
.dm-label:hover { text-decoration: underline; }
/* focus.js: the meant drug's ring and name, over everything, with a halo in the plot's
   own background so the name stays legible across dots and other names. */
.dm-plot.dm-pointing { cursor: pointer; }
.dm-focus { pointer-events: none; }
.dm-focus-ring { fill: none; stroke: var(--text); }
.dm-focus-label { fill: var(--text); font-weight: 600; stroke: var(--dm-plot-bg); paint-order: stroke; stroke-linejoin: round; }
.dm-plot-wrap { position: relative; }
/* view.js plot title (js/drug-map/title.js): centred over the plot, clear of the corner
   buttons, wrapping as needed; the points are fitted below it. */
.dm-plot-title {
  position: absolute;
  top: 8px;
  left: 70px;
  right: 70px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  pointer-events: none;
}
.dm-plot-title:empty { display: none; }
@media (max-width: 500px) { .dm-plot-title { left: 36px; right: 36px; font-size: 12px; } }
/* Re-render under way: a spinner over the plot (shown only past a short delay), plus
   a "suspiciously slow" hint past a few seconds. */
.dm-busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.dm-busy[hidden], .dm-busy-text[hidden] { display: none; }
.dm-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(var(--ink), 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dm-spin 0.8s linear infinite;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-busy-text { max-width: 320px; margin: 0; padding: 4px 8px; font-size: 12px; text-align: center; color: var(--text); background: var(--dm-plot-bg); border-radius: 5px; }
/* A legible but quiet credit, so a shared screenshot says where it came from. */
.dm-watermark {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}
/* chipSearch's box (js/drug-map/dom.js) above a grouped chip list; the chips and groups
   it hides carry [hidden], which the chips' own display rule would otherwise beat. */
.dm-search {
  box-sizing: border-box;
  width: min(100%, 320px);
  margin: 4px 0 2px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.15);
  border-radius: 6px;
}
.dm-search:focus { outline: none; border-color: var(--accent); }
.dm-tlist [hidden] { display: none !important; }
/* Pickers: each group's heading above its indented items. */
.dm-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; }
.dm-hint { font-size: 11px; color: var(--muted); }
.dm-tlist { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.dm-tgroup { margin: 0 0 6px; }
.dm-tgroup-head {
  padding: 1px 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.dm-tgroup-head.active { color: var(--text); border-color: rgba(var(--ink), 0.15); }
.dm-titems { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0 18px; }
.dm-axes { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.dm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11px; color: var(--muted); }
.dm-key { display: inline-flex; align-items: center; gap: 5px; }
.dm-ramp {
  width: 160px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, hsl(212, 12%, 74%), hsl(212, 90%, 48%));
}
.dm-note { margin: 8px 0 0; font-size: 11px; }
/* The Drugs list's "map" link in a section heading, and the list's own map button. */
.drugs-map-link {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted rgba(var(--ink), 0.3);
}
.drugs-map-link:hover { color: var(--text); }
/* The list's entry point (a link to the map page): a full-width accent button, so it
   is not missed. */
#drugs-map {
  box-sizing: border-box;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
}
#drugs-map:hover { background: rgba(var(--ink), 0.12); }
#drugs-map .beta-tag { margin-left: 0; }
.drugs-map-icon { width: 14px; height: 14px; fill: var(--accent); }