/* cv-lightning — storm status view (docs/design/lightning-proximity.html §6). */

/* .screen-body pads block-only (app-shell.css) — every child insets itself, like home.css's
   .section-title. The banner is a rounded card, so it insets with margin (padding would keep
   its background flush to the screen edge); the flat rows/bar use padding. */
.lp-status-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--success-bg);
  color: var(--success);
  font-weight: 700;
  margin-bottom: var(--space-4);

  &.is-active { background: var(--danger-bg); color: var(--danger); }
  &.is-clearing { background: var(--warning-bg); color: var(--ink); }

  & .lp-status-sub {
    display: block;
    font-weight: 400;
    font-size: .82rem;
    color: var(--ink-muted);
    margin-top: 2px;
  }
}

/* ── Storm map (cv-storm-map — aerial tiles + strike/facility markers, doc §6a) ────────── */
.lp-map-wrap {
  margin-inline: var(--space-4);
  margin-bottom: var(--space-4);
}

cv-storm-map {
  position: relative;
  display: block;
  height: min(46vh, 420px);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #1c2430; /* deep neutral behind tiles — visible only while imagery loads/fails */
  /* This element owns every touch on it (pan/pinch) — without this the browser claims the
     vertical drag as page scroll, the same trap the sheet grip hit. */
  touch-action: none;
}

.lp-map-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;

  &:active { cursor: grabbing; }
}

/* Viewport tiles fade in on load, and the outgoing set stays beneath until then — a level
   change sharpens in place instead of flashing the coarse backdrop. */
[data-layer="tiles"] image {
  transition: opacity .25s ease-out;

  &.is-loading { opacity: 0; }
}

/* Strike dots age-fade: danger-window strikes hot, the rest of the 3-hour feed cooling off.
   Hit-testable for the hover tooltip / tap-select time label (see the legend for the scale). */
.lp-strike {
  cursor: pointer;
  fill: #ffb42d;
  stroke: rgba(0, 0, 0, .45);

  &.is-recent { fill: #ff5a2d; }
  &.is-mid { opacity: .65; }
  &.is-old { opacity: .35; }
}

.lp-strike-halo {
  fill: none;
  stroke: #fff;
  pointer-events: none;
}

.lp-strike-label {
  fill: #fff;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(12, 18, 28, .8);
  stroke-width: .25em;
  text-anchor: middle;
  pointer-events: none;
}

/* Strike-age legend — bottom-left, mirroring the attribution's corner treatment. */
.lp-map-legend {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.lp-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffb42d;
  margin-left: 6px;

  &:first-child { margin-left: 0; }
  &.is-recent { background: #ff5a2d; }
  &.is-mid { opacity: .65; }
  &.is-old { opacity: .35; }
}

.lp-fac {
  & circle {
    fill: var(--brand);
    stroke: #fff;
  }
  &.is-active circle { fill: var(--danger); }
  &.is-clearing circle { fill: #c77400; }

  & text {
    fill: #fff;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(12, 18, 28, .8);
    stroke-width: .25em;
    text-anchor: middle;
    pointer-events: none;
  }
}

.lp-ring {
  fill: rgba(255, 90, 45, .06);
  stroke: rgba(255, 90, 45, .8);
  pointer-events: none;
}

/* Imagery attribution / failure note — small overlays pinned to the map's corners. */
.lp-map-attr,
.lp-map-note {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-1);
  font-size: .68rem;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.lp-map-note {
  right: auto;
  left: var(--space-2);
  top: var(--space-1);
  bottom: auto;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(12, 18, 28, .75);
  color: #fff;
  font-size: .75rem;
}

/* Off-extent strike count — the feed reaches beyond the imagery, and the pan can't. */
.lp-map-offmap {
  position: absolute;
  right: var(--space-2);
  top: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(12, 18, 28, .75);
  color: #ffb42d;
  font-size: .72rem;
  font-weight: 600;
  pointer-events: none;
}

.lp-facility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);

  &:last-child { border-bottom: none; }

  & .lp-facility-name { font-size: .95rem; font-weight: 700; color: var(--ink); }
  & .lp-facility-detail { font-size: .8rem; color: var(--ink-muted); margin-top: 2px; }
}

/* Row variant that deep-links into the facility's viewer (published overlays only). */
a.lp-facility-row {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  &:active { background: var(--line-soft); }
}

.lp-pill {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  background: var(--success-bg);
  color: var(--success);

  &.is-active { background: var(--danger-bg); color: var(--danger); }
  &.is-clearing { background: var(--warning-bg); color: var(--ink); }
}

.lp-asof-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-inline: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: .8rem;
  color: var(--ink-muted);

  & input[type="datetime-local"] {
    font-size: .85rem;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
}

/* Refresh-cadence pill in the as-of bar — mirrors .lp-pill: green while live-polling,
   muted while paused on a history snapshot. */
.lp-refresh-pill {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;

  &.is-live { background: var(--success-bg); color: var(--success); }
  &.is-paused { background: var(--line-soft); color: var(--ink-muted); }
}

/* List header: section title + the Name|Threat sort toggle on one line. */
.lp-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  margin-bottom: var(--space-2);

  & .section-title { padding-inline: 0; } /* head owns the inset */
}

.lp-sort {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: .75rem;
  color: var(--ink-muted);
}

.lp-sort-btn {
  padding: 2px 10px;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;

  &.is-active {
    color: var(--brand);
    background: var(--surface);
    border-color: var(--line);
  }
}