/* BrainSaw adopter map — proof-of-principle styling.
   Everything is namespaced under .bsm- so it can drop into an existing page
   without colliding with the host theme. */

.bsm-overlay {
  --bsm-surface: #101a2b;      /* frame / chart surface */
  --bsm-surface-2: #16243a;    /* raised panels */
  --bsm-ocean: #0b1524;
  --bsm-land: #23324b;
  --bsm-land-lit: #2d4463;
  --bsm-edge: #3b5171;
  --bsm-ink: #f2f6fb;
  --bsm-ink-2: #a9bad2;
  --bsm-ink-3: #7286a3;
  --bsm-hair: rgba(255, 255, 255, 0.10);
  --bsm-accent: #4cc9f0;

  /* Status palette — fixed, never themed. Pin geometry and the chip labels
     carry the same information, so colour never acts alone.
     Four hues, not five: a fifth could not clear colour-blind separation
     against the others. "Paused" and "no longer in use" both mean "not
     running", so they share the grey and differ by fill (paused, solid)
     versus outline (retired, hollow). */
  --bsm-in-use: #0ca30c;
  --bsm-building: #fab219;
  --bsm-planned: #3987e5;
  --bsm-paused: #898781;
  --bsm-eol: #898781;

  --bsm-radius: 14px;
  --bsm-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2.2vmin, 28px);
  background: rgba(6, 11, 20, 0.72);
  backdrop-filter: blur(3px);
  font-family: var(--bsm-font);
  color: var(--bsm-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.bsm-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* ---- frame ------------------------------------------------------------- */

.bsm-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1600px, 100%);
  height: min(1000px, 100%);
  /* Flex items default to min-width:auto, which would let a wide toolbar push
     the frame past the viewport on a phone. */
  min-width: 0;
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hair);
  border-radius: var(--bsm-radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform: translateY(8px) scale(0.99);
  transition: transform 0.22s ease;
}

.bsm-overlay[data-open="true"] .bsm-frame {
  transform: none;
}

.bsm-bar {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bsm-hair);
  background: linear-gradient(180deg, #16243a, #101a2b);
  flex: none;
}

.bsm-close {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--bsm-hair);
  background: rgba(255, 255, 255, 0.05);
  color: var(--bsm-ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.bsm-close:hover { background: rgba(255, 255, 255, 0.13); }
.bsm-close:focus-visible,
.bsm-chip:focus-visible,
.bsm-pin:focus-visible,
.bsm-zoom button:focus-visible,
.bsm-panel-close:focus-visible {
  outline: 2px solid var(--bsm-accent);
  outline-offset: 2px;
}

.bsm-titles { flex: 1 1 auto; min-width: 0; }

.bsm-title {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.bsm-sub {
  font-size: 12px;
  color: var(--bsm-ink-3);
  margin-top: 1px;
}

.bsm-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0; /* let the row wrap rather than widen the frame */
}

.bsm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--bsm-ink-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bsm-hair);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.bsm-chip[aria-pressed="false"] { opacity: 0.42; }
.bsm-chip:hover { background: rgba(255, 255, 255, 0.09); }
.bsm-chip b { color: var(--bsm-ink); font-weight: 600; }

/* The glyph beside every status label: colour plus a distinct shape. */
.bsm-glyph {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  box-sizing: border-box;
}

.bsm-glyph[data-status="in-use"]   { background: var(--bsm-in-use); }
.bsm-glyph[data-status="building"] { background: var(--bsm-building); border: 2px solid var(--bsm-surface); box-shadow: 0 0 0 2px var(--bsm-building); }
.bsm-glyph[data-status="planned"]  { background: transparent; border: 3px solid var(--bsm-planned); }
.bsm-glyph[data-status="paused"]   { background: var(--bsm-paused); }
.bsm-glyph[data-status="eol"]      { background: transparent; border: 1.5px solid var(--bsm-eol); }

/* ---- body -------------------------------------------------------------- */

.bsm-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
}

.bsm-mapwrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bsm-ocean);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.bsm-mapwrap[data-panning="true"] { cursor: grabbing; }

.bsm-map, .bsm-legs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.bsm-legs { pointer-events: none; }

.bsm-country {
  fill: var(--bsm-land);
  stroke: var(--bsm-edge);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

/* Countries that host a system get a touch more presence. */
.bsm-country[data-has-systems="true"] { fill: var(--bsm-land-lit); }

.bsm-graticule {
  fill: none;
  stroke: rgba(255, 255, 255, 0.045);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bsm-leg {
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.25;
  stroke-dasharray: 2 3;
}

.bsm-anchor { fill: rgba(255, 255, 255, 0.5); }

/* ---- pins -------------------------------------------------------------- */

.bsm-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bsm-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  transition: width 0.12s, height 0.12s;
}

.bsm-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bsm-pin[data-status="in-use"]::before {
  background: var(--bsm-in-use);
  box-shadow: 0 0 0 2px rgba(16, 26, 43, 0.9), 0 0 12px rgba(12, 163, 12, 0.55);
}

.bsm-pin[data-status="building"]::before {
  background: var(--bsm-building);
  box-shadow: 0 0 0 2px rgba(16, 26, 43, 0.9), 0 0 0 4px var(--bsm-building),
              0 0 12px rgba(250, 178, 25, 0.4);
}

.bsm-pin[data-status="planned"]::before {
  background: rgba(16, 26, 43, 0.85);
  border: 4px solid var(--bsm-planned);
  box-shadow: 0 0 0 2px rgba(16, 26, 43, 0.9);
}

.bsm-pin[data-status="paused"]::before {
  background: var(--bsm-paused);
  box-shadow: 0 0 0 2px rgba(16, 26, 43, 0.9);
}

.bsm-pin[data-status="eol"]::before {
  background: rgba(16, 26, 43, 0.7);
  border: 2px solid var(--bsm-eol);
  opacity: 0.85;
}

.bsm-pin:hover::before,
.bsm-pin:focus-visible::before { transform: scale(1.32); }

.bsm-pin[data-selected="true"]::before {
  transform: scale(1.32);
  box-shadow: 0 0 0 2px var(--bsm-surface), 0 0 0 4px var(--bsm-accent);
}

/* Cluster pin: a ring segmented by the statuses it contains, plus a count. */
.bsm-pin[data-cluster="true"] {
  width: 34px;
  height: 34px;
}

.bsm-pin[data-cluster="true"]::before {
  background: var(--bsm-cluster-ring, var(--bsm-in-use));
  box-shadow: 0 0 0 2px rgba(16, 26, 43, 0.9), 0 4px 14px rgba(0, 0, 0, 0.5);
}

.bsm-count {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #16243a;
  color: var(--bsm-ink);
  font-size: 13px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bsm-pin[data-cluster="true"]:hover .bsm-count { background: #1d2f49; }

/* Names beside fanned-out pins, so a cluster is readable without hovering. */
.bsm-plabel {
  position: absolute;
  transform: translateY(-50%);
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(10, 17, 32, 0.86);
  border: 1px solid var(--bsm-hair);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--bsm-ink);
  cursor: pointer;
  pointer-events: auto;
}

.bsm-plabel[data-side="left"] { transform: translate(-100%, -50%); }

.bsm-plabel:hover {
  background: rgba(10, 17, 32, 0.97);
  border-color: var(--bsm-accent);
}

/* ---- tooltip ----------------------------------------------------------- */

.bsm-tip {
  position: absolute;
  z-index: 5;
  max-width: 260px;
  padding: 9px 12px;
  background: rgba(12, 20, 34, 0.97);
  border: 1px solid var(--bsm-hair);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-12px);
  transition: opacity 0.12s;
  font-size: 12.5px;
  line-height: 1.4;
}

.bsm-tip[data-show="true"] { opacity: 1; }
.bsm-tip strong { display: block; font-size: 13.5px; font-weight: 640; }
.bsm-tip span { color: var(--bsm-ink-2); }
.bsm-tip .bsm-tip-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--bsm-ink-2);
}
.bsm-tip .bsm-hint { color: var(--bsm-ink-3); font-size: 11.5px; }

/* ---- map controls ------------------------------------------------------ */

.bsm-zoom {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bsm-zoom button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--bsm-hair);
  background: rgba(12, 20, 34, 0.85);
  color: var(--bsm-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.bsm-zoom button:hover { background: rgba(30, 46, 72, 0.95); }

.bsm-scalenote {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 11.5px;
  color: var(--bsm-ink-3);
  background: rgba(12, 20, 34, 0.7);
  padding: 4px 9px;
  border-radius: 7px;
  pointer-events: none;
}

/* ---- detail panel ------------------------------------------------------ */

.bsm-panel {
  flex: none;
  width: 380px;
  border-left: 1px solid var(--bsm-hair);
  background: var(--bsm-surface-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}

.bsm-panel[data-open="true"] { display: block; }

.bsm-panel-figure {
  margin: 0; /* <figure> carries a 40px UA margin */
  position: relative;
  /* Matches the crop tools/make_thumbs.py writes. These microscopes are tall
     objects shot from the front; 3:2 took the objective off the top. */
  aspect-ratio: 4 / 3;
  background: #0a1120;
  /* The photographs are dark-cornered lab shots on a dark panel, so without an
     edge they bleed into the surround. One hairline of 75% black gives them a
     boundary without reading as a frame. */
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.75);
}

.bsm-panel-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No figcaption any more: the toy chainsaw announces itself, and captioning it
   only laboured the joke. The alt text still says so, for screen readers. */

.bsm-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--bsm-hair);
  background: rgba(10, 17, 32, 0.8);
  color: var(--bsm-ink);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.bsm-panel-body { padding: 16px 18px 26px; }

.bsm-panel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -0.015em;
}

.bsm-panel .bsm-where {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--bsm-ink-2);
}

.bsm-status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bsm-hair);
  font-size: 12.5px;
  color: var(--bsm-ink);
}

/* The build year rides inside the status pill, separated by a hairline rule
   rather than a bullet: it is a second fact about the system, not a
   continuation of the status. */
.bsm-built {
  padding-left: 8px;
  margin-left: 1px;
  border-left: 1px solid var(--bsm-hair);
  color: var(--bsm-ink-2);
}

.bsm-notes {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bsm-ink-2);
}

.bsm-sec {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--bsm-hair);
}

.bsm-sec h3 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bsm-ink-3);
  font-weight: 620;
}

.bsm-person { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.bsm-person span { color: var(--bsm-ink-3); font-size: 12.5px; }

.bsm-pubs { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.bsm-pubs li { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bsm-pubs li:last-child { border-bottom: none; }
.bsm-pubs a { color: var(--bsm-ink); text-decoration: none; }
.bsm-pubs a:hover { color: var(--bsm-accent); text-decoration: underline; }
.bsm-pubs em { display: block; font-style: normal; color: var(--bsm-ink-3); font-size: 12px; margin-top: 2px; }
.bsm-more {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 11px;
  margin-top: 4px;
  border-radius: 8px;
  border: 1px solid var(--bsm-hair);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bsm-ink-2);
  cursor: pointer;
}

.bsm-more:hover { background: rgba(255, 255, 255, 0.1); color: var(--bsm-ink); }

.bsm-siblings { display: flex; flex-wrap: wrap; gap: 6px; }
.bsm-siblings button {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--bsm-hair);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bsm-ink-2);
  cursor: pointer;
}
.bsm-siblings button:hover { background: rgba(255, 255, 255, 0.1); color: var(--bsm-ink); }

.bsm-links { display: flex; flex-wrap: wrap; gap: 8px; }
.bsm-links a {
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--bsm-hair);
  color: var(--bsm-ink);
  text-decoration: none;
}
.bsm-links a:hover { border-color: var(--bsm-accent); color: var(--bsm-accent); }

/* The amber provenance box is gone. It said where the data came from, which is
   a thing for the README to say, not for every card to repeat. */

/* ---- empty state ------------------------------------------------------- */

.bsm-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--bsm-ink-3);
  font-size: 13px;
}

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 820px) {
  .bsm-body { flex-direction: column; }
  .bsm-panel {
    width: auto;
    border-left: none;
    border-top: 1px solid var(--bsm-hair);
    max-height: 52%;
  }
  /* Give the chips their own full-width row instead of squeezing the title. */
  .bsm-bar { flex-wrap: wrap; gap: 10px; }
  .bsm-filters { flex: 1 0 100%; justify-content: flex-start; }
  .bsm-chip { padding: 4px 9px 4px 7px; font-size: 11.5px; }
  .bsm-panel-figure { aspect-ratio: 2 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bsm-overlay, .bsm-frame, .bsm-pin::before, .bsm-tip { transition: none; }
}