/* The map view. */
html, body { height: 100%; overflow: hidden; }
#globe { position: fixed; inset: 0; }

/* ---------- TOP BAR ---------- */
header { position: fixed; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: linear-gradient(to bottom, rgba(5, 7, 13, .92), rgba(5, 7, 13, 0)); z-index: 5; font-family: var(--mono); font-size: 12px; }
.count { color: var(--muted); } .count b { color: var(--text); }
.tagline { color: var(--muted); }
@media (max-width: 720px) { .tagline { display: none; } }

/* ---------- BREAKING BAR (bottom of the screen) ---------- */
#breaking { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(90deg, #7a0010, var(--active) 40%, #7a0010);
  color: #fff; font-family: var(--mono); font-size: 13px; cursor: pointer; border: 0; width: 100%; text-align: left;
  transform: translateY(140%); transition: transform .45s var(--ease); box-shadow: 0 -6px 30px rgba(255, 59, 78, .45); }
#breaking.show { transform: none; }
#breaking .tag { background: #fff; color: #a0001a; font-weight: 800; padding: 2px 8px; border-radius: 3px; letter-spacing: .12em; animation: flash .9s steps(2) infinite; }
#breaking .txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#breaking .more { opacity: .85; }
#breaking .x { background: none; border: 0; font-size: 18px; line-height: 1; color: #fff; padding: 0 4px; }

/* ---------- LABELS ON THE GLOBE ---------- */
.lbl { position: relative; width: 0; height: 0; --c: var(--active); transition: opacity .25s; }
.lbl.claimed { --c: var(--claimed); } .lbl.resolved { --c: var(--resolved); }
.lbl i { position: absolute; left: 0; bottom: 0; width: 1px; height: 44px; background: var(--c); opacity: .8; transform-origin: bottom; transform: rotate(35deg); }
.lbl b { position: absolute; left: 25px; bottom: 36px; white-space: nowrap; font: 500 11px/1.25 var(--mono); color: var(--text);
  background: rgba(11, 17, 28, .86); border: 1px solid var(--line); border-left: 2px solid var(--c); border-radius: 3px; padding: 4px 8px; cursor: pointer;
  transition: background .2s, box-shadow .2s; }
.lbl b:hover { background: var(--panel-2); box-shadow: 0 0 0 1px var(--c); }
.lbl em { display: block; font-style: normal; color: var(--c); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.lbl.blink b { animation: blink .5s steps(2) 10; }       /* 10 x 0.5 s = 5 seconds */
.lbl.blink i { animation: blinkline .5s steps(2) 10; }

/* ---------- DETAIL PANEL ---------- */
#panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: var(--panel); border-left: 1px solid var(--line); z-index: 8;
  transform: translateX(105%); transition: transform .35s var(--ease); display: flex; flex-direction: column; }
#panel.show { transform: none; }
#panel .head { padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
#panel h2 { margin: 10px 0 6px; font-size: 17px; }
.meta { font: 12px var(--mono); color: var(--muted); line-height: 1.7; }
#panel .close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 22px; color: var(--muted); }
.tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tab { padding: 16px 18px; overflow: auto; flex: 1; animation: fade .25s; }
.tab h3 { margin: 0 0 8px; font-size: 15px; }
.tab p { margin: 0 0 12px; line-height: 1.5; color: #b9c7da; font-size: 14px; }

/* ---------- LEGEND (moves up while the breaking bar is shown) ---------- */
#legend { position: fixed; left: 14px; bottom: 14px; z-index: 5; font: 11px var(--mono); color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; transition: bottom .45s var(--ease); }
#legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); }
body.breaking-on #legend { bottom: 62px; }

/* ---------- LOGIN ---------- */
#login { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 30%, #0d1830, var(--bg) 70%); }
.card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 26px; animation: rise .5s var(--ease); }
.card h1 { margin: 0 0 4px; font: 700 18px var(--mono); letter-spacing: .18em; color: var(--accent); }
.card .sub { margin: 0 0 16px; color: var(--muted); font: 12px var(--mono); }
.card p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.card input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 12px; color: var(--text); font-size: 16px; outline: none; }
.card input:focus { border-color: var(--accent); }
#code { font-family: var(--mono); font-size: 26px; letter-spacing: .5em; text-align: center; }
.card .go { width: 100%; margin-top: 12px; background: var(--accent); color: #04121a; border: 0; border-radius: 6px; padding: 12px; font-weight: 700; }
.card .go:disabled { opacity: .5; }
.card .link { background: none; border: 0; color: var(--muted); font-size: 12px; margin-top: 12px; text-decoration: underline; }
.err { color: var(--active); font-size: 13px; min-height: 18px; margin-top: 10px; }
.shake { animation: shake .35s; }

@keyframes flash { 50% { opacity: .35; } }
@keyframes blink { 50% { background: var(--active); color: #fff; border-color: #fff; box-shadow: 0 0 18px var(--active); } }
@keyframes blinkline { 50% { background: #fff; width: 2px; } }

/* ---------- PHONES ---------- */
header .chip { white-space: nowrap; }
@media (max-width: 520px) {
  header { gap: 6px; padding: 0 8px; }
  header .logo { letter-spacing: .06em; font-size: 11px; white-space: nowrap; }
  header .logo::before { margin-right: 6px; }
  header .count { white-space: nowrap; font-size: 11px; }
  header .chip { padding: 5px 7px; font-size: 11px; }
}

/* ---------- SEARCH DRAWER (left side) ---------- */
#search { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 100%); background: var(--panel); border-right: 1px solid var(--line); z-index: 7;
  transform: translateX(-105%); transition: transform .35s var(--ease); display: flex; flex-direction: column; }
#search.show { transform: none; }
#search .close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 22px; color: var(--muted); }
#search .head { padding: 18px 18px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
#search h2 { margin: 0 0 2px; font-size: 16px; }
#search label { display: grid; gap: 4px; font: 11px var(--mono); color: var(--muted); }
#search input, #search select { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; color: var(--text); font: 14px var(--sans); outline: none; }
#search input:focus, #search select:focus { border-color: var(--accent); }
#search .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#search .row { display: flex; align-items: center; gap: 14px; }
#search .go { background: var(--accent); color: #04121a; border: 0; border-radius: 6px; padding: 9px 18px; font-weight: 700; }
#search .link { background: none; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; }
#search .status { padding: 10px 18px 0; font: 12px var(--mono); color: var(--muted); min-height: 28px; }
#search .results { list-style: none; margin: 0; padding: 6px 10px 80px; overflow: auto; flex: 1; }
#search .results li { padding: 10px 8px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 4px; }
#search .results li:hover, #search .results li:focus { background: var(--panel-2); outline: none; }
#search .results b { font-size: 14px; font-weight: 600; }
#search .results small { display: block; margin-top: 4px; font: 11px var(--mono); color: var(--muted); }

/* ---------- ADMIN ACTIONS in the detail panel ---------- */
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.admin-actions .chip.danger:hover, .admin-actions .chip[data-armed] { border-color: var(--active); color: var(--active); }
.admin-actions .err { flex-basis: 100%; min-height: 0; margin: 0; }
body.breaking-on .admin-actions { padding-bottom: 62px; }

/* Phones: the buttons move to a second row under the name. */
@media (max-width: 520px) {
  header { height: auto; flex-wrap: wrap; padding: 8px; row-gap: 6px; }
  header .sp { flex-basis: 100%; height: 0; }
}