/*
 * Issue Map radar ("situation room"): the darker map treatment, graticule,
 * sweep canvas, pin heat and pings (assets/js/issues-radar.js), the live
 * readout and the briefing card that slides up when a pin is clicked.
 */

.im-app[data-radar] {
  --rd-gold: #E2B865;
  --rd-gold-soft: rgba(226, 184, 101, 0.32);
  --rd-glass: rgba(15, 8, 32, 0.78);
  --im-sea: #0E0822;
  --im-land: #2B1F45;
  --im-border: #4B3A6E;
}
.im-app[data-radar] .im-map,
.im-app[data-radar] .im-stage {
  background: radial-gradient(ellipse 85% 75% at 55% 45%, #1A1036 0%, #0E0822 62%, #07040F 100%);
}
.im-app[data-radar] .im-land.is-pak { fill: #4A2F73; stroke: var(--accent-soft); }
.im-app[data-radar] .im-label-country { text-shadow: 0 0 4px #0E0822; }

/* Labels of the disputed territory, as on the provinces map. */
.im-label-disputed {
  font-family: var(--font-serif); font-style: italic; font-optical-sizing: auto; font-size: 0.78rem;
  color: #E7DEF2; letter-spacing: 0.02em; text-shadow: 0 0 4px #0E0822, 0 0 2px #0E0822;
}

.im-grat {
  fill: none; stroke: rgba(201, 184, 222, 0.075); stroke-width: 0.8px; vector-effect: non-scaling-stroke; pointer-events: none;
}
.im-radar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }

/* --------------------------------------------------- Pins: heat and pings */

.im-app[data-radar] .im-marker-dot {
  position: relative;
  box-shadow: 0 0 0 1.5px #0E0822, 0 2px 8px rgba(10, 4, 24, 0.6);
  box-shadow: 0 0 0 1.5px #0E0822,
    0 0 calc(3px + 16px * var(--heat, 0)) calc(1px + 3px * var(--heat, 0)) color-mix(in srgb, var(--status) calc(15% + 70% * var(--heat, 0)), transparent);
}
.im-ping {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 1.5px solid var(--status, #9AA0A6); opacity: 0; pointer-events: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--status) 60%, transparent);
}

/* -------------------------------------------------------- Live readout */

.im-radar {
  position: absolute; left: 24px; top: 22px; z-index: 15; max-width: min(360px, calc(100% - 340px));
  padding: 12px 16px 13px; color: var(--on-ink); background: var(--rd-glass);
  border: 1px solid rgba(226, 184, 101, 0.22); border-radius: 2px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(4, 2, 12, 0.45);
  font-variant-numeric: tabular-nums;
}
.im-radar::before, .im-radar::after {
  content: ""; position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--rd-gold); pointer-events: none;
}
.im-radar::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.im-radar::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.im-radar-kicker {
  display: flex; align-items: center; gap: 0.55em; margin: 0 0 0.45rem;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--rd-gold);
}
.im-radar-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rd-gold); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(226, 184, 101, 0.6); animation: rd-live 2.4s ease-out infinite;
}
@keyframes rd-live {
  0% { box-shadow: 0 0 0 0 rgba(226, 184, 101, 0.55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(226, 184, 101, 0); }
}
.im-radar-figs { margin: 0; font-size: 0.86rem; line-height: 1.4; color: #E7DEF2; }
.im-radar-figs strong, .im-radar-sub strong {
  font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 500; font-size: 1.35em; color: #fff; letter-spacing: -0.01em;
}
.im-radar-sep { color: var(--rd-gold); }
.im-radar-last { white-space: nowrap; }
.im-radar-sub { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--on-ink-muted); }

/* ------------------------------------------------------- Briefing card */

.im-brief {
  position: absolute; left: 50%; bottom: 26px; z-index: 32; width: min(540px, calc(100% - 220px));
  margin-left: calc(min(540px, calc(100% - 220px)) / -2);
  background: #F7F6F3; color: #141414; border-radius: 2px; padding: 22px 26px 20px;
  box-shadow: 0 24px 60px rgba(4, 2, 12, 0.6), 0 2px 8px rgba(4, 2, 12, 0.35);
  border-top: 3px solid var(--rd-gold, #E2B865);
  transform: translateY(calc(100% + 40px)); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.im-brief.is-open { transform: none; opacity: 1; }
.im-brief:focus { outline: none; }
.im-brief::before {
  content: "Briefing"; position: absolute; left: 22px; top: -25px; padding: 5px 12px 4px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: #2A1B45; background: var(--rd-gold, #E2B865); border-radius: 2px 2px 0 0;
}
.im-brief-close {
  position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; display: grid; place-items: center;
  font: inherit; font-size: 1.5rem; line-height: 1; color: #6A6A66; background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.im-brief-close:hover { color: #141414; background: rgba(42, 27, 69, 0.07); }
.im-brief-close:focus-visible, .im-brief-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.im-brief-kicker { margin: 0 2.2rem 0.4rem 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #6A6A66; }
.im-brief-title {
  margin: 0 2rem 0.55rem 0; font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 500;
  font-size: 1.6rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink);
}
.im-brief-summary { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.5; color: #3A3A36; }
.im-brief-meta {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0.5rem 1.6rem;
  margin: 0 0 1rem; padding-top: 0.8rem; border-top: 1px solid #DAD8D2;
}
.im-brief-meta dt { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #8A8A85; margin-bottom: 0.15rem; }
.im-brief-meta dd { margin: 0; font-size: 0.88rem; display: flex; align-items: center; gap: 0.45em; font-variant-numeric: tabular-nums; }
.im-brief-cta {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.15em; border-radius: 2px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--ink); text-decoration: none;
}
.im-brief-cta:hover { background: var(--accent); }
.im-app[data-radar] .im-legend { transition: opacity 0.3s; }
.im-app.has-brief .im-legend { opacity: 0; }

@media (max-width: 1100px) {
  .im-brief-meta { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 860px) {
  .im-radar.is-standby { display: none; } /* the coming-soon card says it on small screens */
  .im-radar { left: 12px; top: 44px; max-width: calc(100% - 24px); padding: 9px 12px 10px; }
  .im-radar-figs { font-size: 0.78rem; }
  .im-radar-sub { font-size: 0.72rem; }
  .im-brief {
    left: 10px; right: 10px; width: auto; margin-left: 0; padding: 18px 18px 16px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .im-brief-title { font-size: 1.32rem; }
  .im-brief-summary { font-size: 0.86rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .im-radar-live { animation: none; }
  .im-brief { transition: none; }
}