/* state-map.css — reusable US state-map navigator
   Design follows blog-editorial.css (one accent, one hairline, one radius,
   zero !important). The MAP PALETTE is owner-approved and deliberately kept
   exactly as it shipped — do not "brand" the state fills. */

.vshr-map {
  --vm-accent: #1479A3;
  --vm-accent-deep: #0F5C7F;
  --vm-ink: #0D1829;
  --vm-body: #33475B;
  --vm-muted: #64768A;
  --vm-line: #E4EAF0;
  --vm-surface: #FFFFFF;
  --vm-sunk: #F7F9FB;

  /* approved map palette */
  --vm-state: #DCEAF5;      /* baseline */
  --vm-state-rules: #D8CCE8; /* has its own entry */
  --vm-state-hover: #C6DDEE;
  --vm-state-rules-hover: #C7B4DE;
  --vm-state-border: #FFFFFF;

  --vm-radius: 10px;
  margin: 32px 0;
  background: var(--vm-surface);
  border: 1px solid var(--vm-line);
  border-radius: var(--vm-radius);
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.vshr-map .vm-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 20px 24px; border-bottom: 1px solid var(--vm-line); background: var(--vm-sunk);
}
/* min-width:0 so a long title wraps instead of forcing the flex header wider
   than the card — it also gives this wrapper a rule of its own, which the
   coverage gate requires of every rendered block. */
.vshr-map .vm-head-text { min-width: 0; }
.vshr-map .vm-title { margin: 0; color: var(--vm-ink); font-family: Poppins, system-ui, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.012em; line-height: 1.25; }
.vshr-map .vm-sub { margin: 4px 0 0; color: var(--vm-body); font-size: 14px; line-height: 1.5; }
.vshr-map .vm-updated { margin: 8px 0 0; color: var(--vm-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.vshr-map .vm-head-cta { flex: 0 0 auto; text-align: right; }
/* Scoped through .vm-head-cta on purpose: single-post.css ships
   `.bp-main .e-content a` at (0,2,1), which beats a (0,2,0) `.vshr-map .vm-cta`
   and painted this label blue-on-blue. (0,3,0) wins without !important. */
.vshr-map .vm-head-cta .vm-cta {
  display: inline-block; padding: 10px 18px;
  background: var(--vm-accent); border-radius: 8px;
  color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .18s ease;
}
.vshr-map .vm-head-cta .vm-cta:hover { background: var(--vm-accent-deep); color: #fff; }
.vshr-map .vm-cta:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 2px; }
.vshr-map .vm-cta-prompt { margin: 7px 0 0; color: var(--vm-muted); font-size: 12px; line-height: 1.45; }

/* ── map ────────────────────────────────────────────────────────────────── */
.vshr-map .vm-map-wrap { position: relative; padding: 22px 24px 6px; }
.vshr-map .vm-map-wrap svg { display: block; width: 100%; height: auto; }
.vshr-map .state-path {
  fill: var(--vm-state);
  stroke: var(--vm-state-border);
  stroke-width: 1;
  cursor: pointer;
  transition: fill .15s ease;
}
.vshr-map .state-path.has-rules { fill: var(--vm-state-rules); }
.vshr-map .state-path:hover { fill: var(--vm-state-hover); }
.vshr-map .state-path.has-rules:hover { fill: var(--vm-state-rules-hover); }
.vshr-map .state-path.is-selected { fill: var(--vm-accent); }
.vshr-map .state-path:focus { outline: none; }
.vshr-map .state-path:focus-visible { stroke: var(--vm-accent-deep); stroke-width: 2.5; }
.vshr-map .state-borders { pointer-events: none; }

/* ── tooltip ────────────────────────────────────────────────────────────── */
.vshr-map .vm-tip {
  position: absolute; z-index: 5; max-width: 260px;
  padding: 11px 13px;
  background: var(--vm-ink); border-radius: 8px;
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  pointer-events: none;
}
.vshr-map .vm-tip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.vshr-map .vm-tip-name { margin: 0; color: #fff; font-family: Poppins, system-ui, sans-serif; font-size: 14px; font-weight: 700; }
.vshr-map .vm-tip-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.vshr-map .vm-tip-tags:empty { display: none; }
.vshr-map .vm-tip .vm-tag { background: rgba(255,255,255,.14); color: #E8F1F7; }
.vshr-map .vm-tip-hint { margin: 8px 0 0; color: #9FB6C7; font-size: 11px; }
.vshr-map .vm-tip-src { margin: 3px 0 0; color: #7B93A6; font-size: 10.5px; }
.vshr-map .vm-tip-src:empty { display: none; }

/* ── legend ─────────────────────────────────────────────────────────────── */
.vshr-map .vm-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 6px 24px 20px; }
.vshr-map .vm-legend-item { display: inline-flex; align-items: center; gap: 7px; color: var(--vm-body); font-size: 13px; }
.vshr-map .vm-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--vm-state); }
.vshr-map .vm-swatch[data-key="has-rules"] { background: var(--vm-state-rules); }

/* ── tags ───────────────────────────────────────────────────────────────── */
.vshr-map .vm-tag {
  display: inline-block; padding: 3px 8px;
  background: #EEF3F7; border-radius: 20px;
  color: var(--vm-accent-deep);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.5;
}

/* ── detail panel ───────────────────────────────────────────────────────── */
.vshr-map .vm-panel { padding: 18px 24px 20px; border-top: 1px solid var(--vm-line); background: var(--vm-sunk); }
.vshr-map .vm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vshr-map .vm-panel-name { margin: 0; color: var(--vm-ink); font-family: Poppins, system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.vshr-map .vm-panel-close {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--vm-line); border-radius: 7px;
  color: var(--vm-muted); font-size: 17px; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.vshr-map .vm-panel-close:hover { color: var(--vm-ink); border-color: #B9C6D3; }
/* Nothing to dismiss and no state to name until one is picked. */
.vshr-map .vm-panel:not(.is-open) .vm-panel-close { display: none; }
.vshr-map .vm-panel-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.vshr-map .vm-panel-tags:empty { display: none; }
.vshr-map .vm-panel-body { margin-top: 14px; }
.vshr-map .vm-empty { margin: 0; padding: 6px 0 4px; color: var(--vm-muted); font-size: 14px; line-height: 1.6; }
.vshr-map .vm-lede { margin: 0 0 14px; color: var(--vm-body); font-size: 15px; line-height: 1.65; }

.vshr-map .vm-sec { border-top: 1px solid var(--vm-line); }
.vshr-map .vm-sec:first-of-type { border-top: 0; }
.vshr-map .vm-sec > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 2px; cursor: pointer; list-style: none;
  color: var(--vm-ink); font-size: 14px; font-weight: 600;
}
.vshr-map .vm-sec > summary::-webkit-details-marker { display: none; }
.vshr-map .vm-sec > summary::after {
  content: ""; margin-left: auto; flex: 0 0 8px; width: 8px; height: 8px;
  border-right: 2px solid var(--vm-muted); border-bottom: 2px solid var(--vm-muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.vshr-map .vm-sec[open] > summary::after { transform: rotate(-135deg) translateY(2px); border-color: var(--vm-accent); }
.vshr-map .vm-sec > summary:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 2px; }
.vshr-map .vm-sec svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: var(--vm-accent); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vshr-map .vm-sec-body { padding: 0 2px 14px 27px; }
.vshr-map .vm-sec-body p { margin: 0 0 6px; color: var(--vm-body); font-size: 14.5px; line-height: 1.6; }
.vshr-map .vm-sec-body ul { margin: 0; padding-left: 17px; }
.vshr-map .vm-sec-body li { margin: 0 0 5px; color: var(--vm-body); font-size: 14.5px; line-height: 1.55; }
.vshr-map .vm-src { color: var(--vm-muted); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .vshr-map .vm-tip,
  .vshr-map .state-path,
  .vshr-map .vm-sec > summary::after { transition: none; }
}

@media (max-width: 720px) {
  .vshr-map .vm-head { flex-direction: column; gap: 14px; padding: 16px; }
  .vshr-map .vm-head-cta { text-align: left; }
  .vshr-map .vm-cta { display: block; text-align: center; }
  .vshr-map .vm-map-wrap { padding: 16px 14px 4px; }
  .vshr-map .vm-legend { padding: 4px 16px 16px; }
  .vshr-map .vm-panel { padding: 16px; }
  /* Hover tooltips are meaningless on touch — tapping opens the panel. */
  .vshr-map .vm-tip { display: none; }
}