/* alert.css — "alert mode" for the France · mobilisation layers.
 *
 * Active while html.alert-fr is set (app.js _syncAlert: a France layer is on).
 * Red is kept for signals only: the accent (live badge, switches, active
 * states), a thin hazard stripe, the logo, the alert card and the dots on the
 * map. Surfaces, text and the map itself stay neutral dark. Motion stays slow
 * (nothing flashes faster than once a second) and stops entirely under
 * prefers-reduced-motion.
 */

/* ─── Palette: only the accent turns red (both interfaces, dark and dusk) ─ */
html.alert-fr,
html.ui2.alert-fr:not([data-theme="light"]),
html.ui2.alert-fr[data-theme="light"] {
  --accent: #ff3347;
  --alert: #ff3347;
  --u-ink: #160003;               /* text on red fills */
  --u-live: #c8102e;
  --vignette: rgba(60, 0, 8, 0.45);
}

/* Hazard stripe along the top edge */
.alert-stripe { display: none; }
html.alert-fr .alert-stripe {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9997;
  height: 3px;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, #ff3347 0 10px, #0a0d10 10px 20px);
  background-size: 28.28px 3px;
  opacity: 0.85;
  animation: alert-stripe 2.4s linear infinite;
}
@keyframes alert-stripe { to { background-position: 28.28px 0; } }

/* Logo: red, with a brief glitch every few seconds */
html.alert-fr .logo {
  color: #ff3347;
  text-shadow: 0 0 16px rgba(255, 51, 71, 0.35);
  animation: alert-glitch 6s steps(1, end) infinite;
}
@keyframes alert-glitch {
  0%, 90%, 100% { transform: none; clip-path: none; }
  92% { transform: translate(-2px, 1px) skewX(-8deg); }
  94% { transform: translate(2px, -1px); clip-path: inset(0 0 48% 0); }
  96% { transform: translate(-1px, 0) skewX(5deg); clip-path: inset(40% 0 0 0); }
}

/* Live badge, pinned card edge, quick-view tiles: all red */
html.alert-fr .news-live { background: #c8102e; }
html.alert-fr .dot-on { background: #ff3347; color: #ff3347; }

/* ─── Alert card (replaces the active-layer chips) ──────────────────────── */
html.alert-fr .legend { display: none !important; }
.alert-card {
  position: fixed;
  top: 92px;
  left: 28px;
  z-index: 18;
  width: 360px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(7, 12, 14, 0.9);
  border: 1px solid rgba(150, 255, 215, 0.1);
  box-shadow: inset 0 2px 0 #ff3347, 0 16px 48px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #dfe8ee;
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  font-stretch: 92%;
}
.alert-card[hidden] { display: none; }
.alert-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ff3347;
}
.alert-kicker i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3347;
  box-shadow: 0 0 12px #ff3347;
  animation: alert-blink 1.2s steps(2, end) infinite;
}
@keyframes alert-blink { 50% { opacity: 0.2; } }
.alert-title {
  margin: 8px 0 6px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
}
.alert-stats { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #9aa8b3; }
.alert-curfews { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.alert-curfews:empty { display: none; }
.alert-lbl {
  width: 100%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7f8d98;
}
.alert-curfews button {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(150, 255, 215, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #dfe8ee;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.alert-curfews button:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 51, 71, 0.5); color: #ffffff; }
.alert-more { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #9aa8b3; }
.alert-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(150, 255, 215, 0.1);
}
.alert-note { font-size: 12px; line-height: 1.35; color: #7f8d98; }
.alert-exit {
  flex: none;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(150, 255, 215, 0.2);
  background: transparent;
  color: #dfe8ee;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.alert-exit:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.alert-exit:focus-visible, .alert-curfews button:focus-visible { outline: 2px solid #ff3347; outline-offset: 2px; }

/* A pinned event card stays below the alert card, which then folds down */
html.alert-fr body:has(.info-panel.pinned) :is(.alert-curfews, .alert-note) { display: none; }
@media (min-width: 721px) {
  html.alert-fr .info-panel { max-height: calc(100vh - 360px); }
}

/* Mid widths: the headline bar sits under the logo, the card under it */
@media (min-width: 721px) and (max-width: 1179px) {
  html.ui2 body:has(.news-bar:not([hidden])) .alert-card { top: 146px; }
}
/* Phones: a compact card under the headlines */
@media (max-width: 720px) {
  .alert-card { top: 108px; left: 12px; right: 12px; width: auto; padding: 12px 12px 10px; }
  .alert-title { margin: 4px 0; font-size: 20px; }
  .alert-note { display: none; }
  .alert-curfews { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
  .alert-curfews::-webkit-scrollbar { display: none; }
  .alert-curfews button { flex: none; height: 34px; }
  .alert-lbl { display: none; }
  .alert-foot { margin-top: 8px; padding-top: 8px; }
  .alert-exit { height: 40px; margin-left: auto; }
}

/* ─── The France quick view, always a little alarming ───────────────────── */
.preset-chip[data-preset="france"] { color: #ff3347; border-color: rgba(255, 51, 71, 0.6); }
html.ui2 .presets::before { order: -2; }
html.ui2 .preset-chip[data-preset="france"] {
  order: -1;
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  background: repeating-linear-gradient(-45deg, rgba(255, 51, 71, 0.08) 0 10px, transparent 10px 20px);
  border-color: rgba(255, 51, 71, 0.4);
  color: var(--text-bright);
  font-size: 13.5px;
  font-weight: 600;
  font-stretch: 92%;
  --ic: var(--i-alert);
  --pc: #ff3347;
}
html.ui2 .preset-chip[data-preset="france"]::after {
  content: 'LIVE';
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 5px;
  background: #c8102e;
  color: #ffffff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
html.ui2[data-theme="light"]:not(.alert-fr) .preset-chip[data-preset="france"] { color: #8a0016; }

/* Embedded globe: keep the red look, drop the chrome */
html.embed .alert-card, html.embed .alert-stripe { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.alert-fr .alert-stripe, html.alert-fr .logo, .alert-kicker i { animation: none; }
}

/* Old interface: its vertical zoom sits where the alert card goes — move it right. */
@media (min-width: 721px) {
  html.alert-fr:not(.ui2) .zoom-ctrl { left: auto; right: 340px; }
  html.alert-fr:not(.ui2) .panel.hidden ~ .zoom-ctrl { right: 22px; }
}