/* WispAyr Field PWA — operations-grade, single-accent, mobile-first */

:root {
  --bg:        #050505;
  --panel:     #0a0a0c;
  --panel-2:   #131317;
  --line:      rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.18);
  --fg:        #e6e6ea;
  --fg-mid:    #9aa0aa;
  --fg-dim:    #5a606a;
  --amber:     #ffb020;
  --green:     #34d399;
  --cyan:      #22d3ee;
  --red:       #ff3b30;
  --orange:    #ff7a18;
  --tempo-ms:  1000ms;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-feature-settings: "tnum" 1, "zero" 1; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
input, textarea, button { font-family: inherit; }
input { -webkit-user-select: text; user-select: text; }

[hidden] { display: none !important; }

/* ─── corner brackets ──────────────────────────────────── */
.corner-tl, .corner-tr, .corner-bl, .corner-br {
  position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--amber);
}
.corner-tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.corner-tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.corner-bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.corner-br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

/* ─── login screen ─────────────────────────────────────── */
.login {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(circle at 50% 30%, rgba(255,176,32,0.04), transparent 60%);
}
.login-card {
  position: relative;
  width: 100%; max-width: 360px;
  background: var(--panel); border: 1px solid var(--line);
  padding: 1.6rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.login-brand {
  font-family: var(--mono); font-size: 1.15rem; font-weight: 800;
  letter-spacing: 0.22em; color: var(--amber); text-align: center;
}
.login-sub {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em;
  color: var(--fg-dim); text-align: center; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding-bottom: 0.7rem; margin-bottom: 0.3rem;
}
.login input {
  background: #000; border: 1px solid var(--line); color: var(--fg);
  padding: 0.7rem 0.9rem;
  font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.04em;
}
.login input:focus { outline: none; border-color: var(--amber); }
.login button {
  background: var(--amber); color: #000; border: 0;
  padding: 0.8rem 1rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.login button:active { background: #ffc04d; }
.login-err {
  font-family: var(--mono); font-size: 0.7rem; color: var(--red);
  letter-spacing: 0.1em; text-align: center; min-height: 1em;
}

/* ─── app: top bar ─────────────────────────────────────── */
#app {
  display: grid;
  grid-template-rows: 38px 1fr auto auto;
  grid-template-areas: "top" "map" "act" "feed";
  height: 100vh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0a0a0c, #050505);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
}
.tb-brand { padding: 0 0.7rem; height: 100%; display: flex; align-items: center; gap: 0.5rem; border-right: 1px solid var(--line); }
.tb-brand b { color: var(--amber); letter-spacing: 0.18em; font-weight: 800; }
.tb-callsign { color: var(--fg); font-weight: 800; letter-spacing: 0.1em; }
.tb-cell { display: flex; align-items: center; gap: 0.35rem; padding: 0 0.6rem; height: 100%; border-right: 1px solid var(--line); flex: 0 0 auto; }
.tb-cell:last-child { border-right: 0; margin-left: auto; }
.tb-cell .k { color: var(--fg-dim); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tb-cell .v { color: var(--fg); font-family: var(--mono); }

.toggle { position: relative; width: 38px; height: 18px; }
.toggle input { display: none; }
.toggle .t-bg {
  position: absolute; inset: 0;
  background: var(--panel-2); border: 1px solid var(--line);
  transition: background var(--tempo-ms) ease;
}
.toggle .t-bg::before {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px;
  background: var(--fg-dim); transition: transform 200ms cubic-bezier(0.2,0,0,1), background 200ms;
}
.toggle input:checked + .t-bg { background: var(--green); border-color: var(--green); }
.toggle input:checked + .t-bg::before { transform: translateX(20px); background: #000; }

/* ─── map ──────────────────────────────────────────────── */
.map-wrap {
  grid-area: map; position: relative; min-height: 0;
  background: #000; border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.map-wrap svg { width: 100%; height: 100%; display: block; }
.ring { stroke: rgba(255,255,255,0.10); stroke-width: 0.6; fill: none; }
.ring.ring-crit  { stroke: rgba(255,59,48,0.55); stroke-dasharray: 2 1; }
.ring.ring-warn  { stroke: rgba(255,122,24,0.40); }
.ring.ring-watch { stroke: rgba(255,176,32,0.30); }
.ring.ring-outer { stroke: rgba(255,255,255,0.16); }
.ring-label { font-family: var(--mono); font-size: 4px; fill: var(--fg-dim); }
.cardinal   { font-family: var(--mono); font-size: 7px; fill: var(--fg-mid); font-weight: 800; }
.cross      { stroke: rgba(255,255,255,0.06); stroke-width: 0.4; }

.self-mark { fill: var(--amber); stroke: rgba(255,176,32,0.4); stroke-width: 1; }
.self-ring { fill: none; stroke: var(--amber); stroke-width: 0.4; opacity: 0.4; animation: heart 1s ease-in-out infinite; }
@keyframes heart { 0%,100% { r: 5; opacity: 0.2; } 50% { r: 7; opacity: 0.7; } }

.ntds-friend  { fill: var(--green);  stroke: rgba(0,0,0,0.5); stroke-width: 0.3; }
.ntds-neutral { fill: var(--cyan);   stroke: rgba(0,0,0,0.5); stroke-width: 0.3; }
.ntds-hostile { fill: var(--red);    stroke: #fff; stroke-width: 0.4; }
.ntds-strike  { fill: var(--red);    filter: drop-shadow(0 0 2px var(--red)); }
.ntds-pin     { fill: var(--amber);  stroke: rgba(0,0,0,0.5); stroke-width: 0.3; }
.ntds-unknown { fill: var(--orange); stroke: rgba(0,0,0,0.5); stroke-width: 0.3; }
.ntds-label { font-family: var(--mono); font-size: 3.4px; fill: var(--fg-mid); }

.map-legend {
  position: absolute; left: 0.5rem; bottom: 0.5rem;
  font-family: var(--mono); font-size: 0.6rem; color: var(--fg-mid);
  background: rgba(5,5,5,0.65); padding: 0.3rem 0.45rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.5rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.k-dot { display: inline-block; width: 8px; height: 8px; margin-right: 0.3rem; vertical-align: -1px; }
.k-self    { background: var(--amber); }
.k-friend  { background: var(--green); border-radius: 50%; }
.k-pin     { background: var(--amber); transform: rotate(45deg); }
.k-strike  { background: var(--red); border-radius: 50%; }

.map-status {
  position: absolute; right: 0.5rem; bottom: 0.5rem;
  font-family: var(--mono); font-size: 0.6rem; color: var(--fg-dim);
  background: rgba(5,5,5,0.65); padding: 0.3rem 0.45rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.map-cursor {
  position: absolute; pointer-events: none; display: none;
  background: #000; border: 1px solid var(--amber); padding: 0.2rem 0.4rem;
  font-family: var(--mono); font-size: 0.65rem; color: var(--amber);
  letter-spacing: 0.08em; white-space: nowrap; z-index: 50;
}

/* ─── actions ──────────────────────────────────────────── */
.actions {
  grid-area: act; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.act {
  background: #000; color: var(--fg); border: 0;
  padding: 0.85rem 0.4rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.act:active { background: var(--amber); color: #000; }
.act-haz   { color: var(--orange); }
.act-haz:active { background: var(--orange); color: #000; }
.act-evac  { color: var(--red); }
.act-evac:active { background: var(--red); color: #fff; }
.act-clear { color: var(--fg-dim); }

/* ─── feed ─────────────────────────────────────────────── */
.feed {
  grid-area: feed; max-height: 30vh; overflow: auto;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.feed-row {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 0.5rem; padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.7rem;
}
.feed-row .ft { color: var(--fg-dim); }
.feed-row .fk { color: var(--amber); font-weight: 800; }
.feed-row .ft-sev-warn { color: var(--orange); }
.feed-row .ft-sev-crit { color: var(--red); }
.feed-row .fb { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .fd { color: var(--fg-dim); }

/* ─── modal ────────────────────────────────────────────── */
#modal {
  position: fixed; inset: 0; background: rgba(5,5,5,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-card {
  position: relative; width: 100%; max-width: 360px;
  background: var(--panel); border: 1px solid var(--amber);
  padding: 1.2rem 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.modal-title { font-family: var(--mono); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.18em; color: var(--amber); text-align: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.modal-card input {
  background: #000; border: 1px solid var(--line); color: var(--fg);
  padding: 0.7rem 0.9rem; font-family: var(--mono); font-size: 0.9rem;
}
.modal-card input:focus { outline: none; border-color: var(--amber); }
.modal-meta { font-family: var(--mono); font-size: 0.66rem; color: var(--fg-dim); letter-spacing: 0.08em; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.modal-actions button {
  border: 0; padding: 0.7rem; font-family: var(--mono); font-size: 0.78rem;
  font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
#modal-cancel { background: #000; color: var(--fg-dim); border: 1px solid var(--line); }
#modal-send   { background: var(--amber); color: #000; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .self-ring, .ntds-strike { animation: none !important; }
}

/* ─── one-tap emergency button (hold-to-fire) ─────────── */
.emergency {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5rem));
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 18px rgba(255,59,48,0.5), inset 0 -3px 0 rgba(0,0,0,0.3);
  font-family: var(--mono);
  font-weight: 900; letter-spacing: 0.08em;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem;
  cursor: pointer;
  z-index: 500;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  transition: transform 120ms cubic-bezier(0.2,0,0,1), background 200ms;
}
.emergency:active { transform: scale(0.94); }
.emergency.holding {
  background: #ff7066;
  box-shadow: 0 4px 24px rgba(255,59,48,0.9), inset 0 0 0 4px rgba(255,255,255,0.4);
  animation: emerg-pulse 0.4s steps(2) infinite;
}
@keyframes emerg-pulse { 50% { background: var(--red); } }
.emerg-label { font-size: 0.85rem; }
.emerg-sub { font-size: 0.55rem; opacity: 0.75; letter-spacing: 0.14em; }

/* ─── route trace ─────────────────────────────────────── */
.route-trace { fill: none; stroke: var(--amber); stroke-opacity: 0.6; stroke-width: 0.4; }