/* annotated panel (assets/panelmap.js) */
.pm-wrap { position: relative; line-height: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.pm-wrap img { display: block; width: 100%; height: auto; }
.pm-mark { position: absolute; inset: 0; pointer-events: none; }
.pm-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; aspect-ratio: auto;
  border: 3px solid transparent; transition: border-color .15s, box-shadow .15s; }
.pm-mark.on .pm-ring { border-color: #f2c230; box-shadow: 0 0 0 4px rgba(242,194,48,.28); }
.pm-badge { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
  width: clamp(20px, 6.2%, 28px); aspect-ratio: 1; padding: 0; border-radius: 50%;
  background: #f2c230; color: #17140a; border: 2px solid #17140a;
  font: 700 clamp(11px, 3.4vw, 14px)/1 "Barlow Condensed", "Arial Narrow", sans-serif;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .15s; }
.pm-mark.on .pm-badge { transform: translate(-50%, -50%) scale(1.18); background: #17140a; color: #f2c230; border-color: #f2c230; }
.pm-badge:focus-visible { outline: 3px solid #5aa8ff; outline-offset: 2px; }
.pm-tip { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  background: #10151d; color: #fff; border: 1px solid #f2c230; border-radius: 4px; padding: 5px 8px;
  font: 600 14px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transition: opacity .12s; z-index: 3; }
.pm-tip.l { left: auto; right: calc(100% + 6px); }
.pm-mark.on .pm-tip { opacity: 1; }

.pm-group { font: 600 13px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: #8a95a6; margin: 22px 0 8px; }
.pm-group:first-child { margin-top: 0; }
.pm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pm-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 12px;
  border: 1px solid rgba(160,176,200,.16); border-radius: 6px; background: rgba(14,21,32,.6); cursor: default; transition: border-color .15s, background .15s; }
.pm-item.on, .pm-item.flash { border-color: #f2c230; background: rgba(242,194,48,.08); }
.pm-item:focus-visible { outline: 2px solid #5aa8ff; outline-offset: 2px; }
.pm-item.off { opacity: .55; }
.pm-n { width: 26px; height: 26px; border-radius: 50%; background: #f2c230; color: #17140a; display: grid; place-items: center;
  font: 700 14px/1 "Barlow Condensed", "Arial Narrow", sans-serif; }
.pm-t { display: grid; gap: 2px; line-height: 1.25; }
.pm-ctl { font: 600 12px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a95a6; }
.pm-fn { font: 700 19px/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #eef2f7; }
.pm-p { font-size: 15px; line-height: 1.45; color: #b9c2cf; margin-top: 3px; }
.pm-p b { color: #eef2f7; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pm-ring, .pm-badge, .pm-item, .pm-tip { transition: none; } }