/* =======================================================================
   Ham Radio Dispatch — Field Operator (mobile-first)
   Optimized for phones held outdoors: big touch targets, high contrast,
   one-hand-reachable primary actions, minimal chrome.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@600;700&display=swap');

:root {
  --bg:            #0b0e12;
  --bg-2:          #0f141a;
  --panel:         #151c27;
  --panel-2:       #1a2230;
  --border:        #253042;
  --border-strong: #374761;
  --fg:            #e5ecf7;
  --fg-dim:        #a9b7cd;
  --muted:         #6b7a92;

  --accent:        #42e3c1;
  --accent-dim:    #1ea88b;
  --ok:            #52e08b;
  --warn:          #f1b43a;
  --err:           #ff5a5a;
  --info:          #6ac6ff;

  --p1: #ff3b3b;
  --p2: #ff9b2e;
  --p3: #6ac6ff;
  --p4: #8ea0be;

  --ff-display: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  --ff-body:    'IBM Plex Sans', system-ui, sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(800px 500px at 50% -5%, #1a2436 0%, transparent 55%),
    var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ========== form controls ========== */
input, select, textarea, button {
  font-family: inherit;
  font-size: 1rem;
  color: var(--fg);
}
input[type=text], input[type=password], input[type=number] {
  width: 100%;
  background: #0a0e14;
  border: 1px solid var(--border);
  padding: 1rem .9rem;
  font-size: 1.15rem;
  font-family: var(--ff-mono);
  letter-spacing: .04em;
  outline: none;
  appearance: none;
  border-radius: 0;
}
input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(66,227,193,.2);
}

label {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .22em;
  color: var(--muted);
  margin-top: 1.25rem;
  margin-bottom: .4rem;
}

button { cursor: pointer; }

/* ========== LOGIN SCREEN ========== */
.field-login {
  display: grid;
  place-items: center;
  padding: calc(2rem + var(--safe-top)) 1.25rem calc(2rem + var(--safe-bottom));
  min-height: 100vh;
}
.field-login .wrap { width: 100%; max-width: 420px; }

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--accent);
  margin-bottom: 1.75rem;
}
.brand-main {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: .28em;
  color: var(--fg);
  line-height: 1;
}
.brand-sub {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .65rem;
  letter-spacing: .3em;
  color: var(--muted);
  margin-top: .4rem;
}

.event-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: .9rem 1rem;
  font-family: var(--ff-mono);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--fg-dim);
  margin-bottom: 1.25rem;
}

.err-box {
  background: rgba(255,90,90,.1);
  border-left: 3px solid var(--err);
  color: #ffbcbc;
  padding: .8rem 1rem;
  font-size: .95rem;
  margin-bottom: 1rem;
}

.btn-primary {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #041612;
  border: none;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 1.2rem 1rem;
  margin-top: 1.75rem;
  border-radius: 0;
}
.btn-primary:active { background: #5affd6; transform: translateY(1px); }

.help-text {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.55;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

/* ========== FEED SCREEN ========== */
.field-feed {
  padding-bottom: calc(3.5rem + var(--safe-bottom));
}

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: calc(.7rem + var(--safe-top)) 1rem .7rem;
  background: linear-gradient(180deg, #121927 0%, #0d1320 100%);
  border-bottom: 1px solid var(--border-strong);
}
.callsign {
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .05em;
  color: var(--accent);
}
.event-line {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .08em;
  margin-top: .15rem;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-status { display: flex; align-items: center; gap: .9rem; }
.linklike {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .22em;
  padding: .5rem;
  margin: -.5rem;
}
.linklike:active { color: var(--err); }

.conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
  transition: background .2s;
}
.conn-dot.off   { background: var(--err); box-shadow: 0 0 6px var(--err); }
.conn-dot.warn  { background: var(--warn); box-shadow: 0 0 6px var(--warn); }

main {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ========== CARDS ========== */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1rem;
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  opacity: .3;
}
.card-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; gap: 1rem; }
.card-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .22em;
  color: var(--fg);
}
.card-sub {
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: right;
}
.card-foot {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--muted);
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--border);
  letter-spacing: .04em;
}

.badge {
  display: inline-block;
  min-width: 1.4rem;
  padding: .15rem .4rem;
  background: var(--err);
  color: #fff;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: .7rem;
  text-align: center;
  letter-spacing: .05em;
  margin-left: .4rem;
  vertical-align: middle;
}
.badge.info { background: var(--info); color: #001826; }

/* ========== CHECK-IN CARD ========== */
.card-checkin { padding-bottom: 1.25rem; }
.big-btn {
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: transparent;
  border: 2px solid var(--ok);
  color: var(--ok);
  padding: 1.5rem 1rem;
  border-radius: 0;
  transition: all .1s;
}
.big-btn-top {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: .2em;
}
.big-btn-bottom {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--muted);
}
.big-btn.big-ok       { background: rgba(82,224,139,.08); }
.big-btn.big-ok:active{ background: var(--ok); color: #001c0e; }
.big-btn.warn         { border-color: var(--warn); color: var(--warn); background: rgba(241,180,58,.1); animation: pulse-warn 2s infinite; }
.big-btn.warn:active  { background: var(--warn); color: #1a1001; }
.big-btn.overdue      { border-color: var(--err); color: var(--err); background: rgba(255,90,90,.15); animation: pulse-err 1.4s infinite; }
.big-btn.overdue:active { background: var(--err); color: #fff; }

@keyframes pulse-warn { 0%,100% { box-shadow: 0 0 0 0 rgba(241,180,58,.4); } 50% { box-shadow: 0 0 0 12px rgba(241,180,58,0); } }
@keyframes pulse-err  { 0%,100% { box-shadow: 0 0 0 0 rgba(255,90,90,.5);  } 50% { box-shadow: 0 0 0 16px rgba(255,90,90,0);  } }

/* ========== STATUS GRID ========== */
.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem;
}
.status-btn {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border-strong);
  padding: 1rem .5rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .15em;
}
.status-btn.active {
  background: var(--accent);
  color: #041612;
  border-color: var(--accent);
}
.status-btn[data-status=available].active  { background: var(--ok);   border-color: var(--ok);   color: #001c0e; }
.status-btn[data-status=on_location].active   { background: var(--warn); border-color: var(--warn); color: #1a1001; }
.status-btn[data-status=unavailable].active{ background: var(--err);  border-color: var(--err);  color: #fff; }

/* ========== MESSAGES ========== */
.msg {
  padding: .85rem .9rem;
  background: var(--bg-2);
  border-left: 3px solid var(--info);
  margin-top: .5rem;
  position: relative;
}
.msg:first-child { margin-top: 0; }
.msg.urgent { border-left-color: var(--err); background: rgba(255,90,90,.06); animation: pulse-err 2s infinite; }
.msg.acked  { opacity: .5; filter: grayscale(.3); animation: none; }
.msg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .4rem;
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .06em;
}
.msg-from  { color: var(--accent); font-weight: 600; }
.msg-time  { color: var(--muted); }
.msg-prio  { font-weight: 600; padding: .15rem .35rem; }
.msg-prio.urgent { background: var(--err); color: #fff; }
.msg-prio.info   { color: var(--info); }
.msg-body {
  color: var(--fg);
  font-size: .95rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.msg-ack {
  width: 100%;
  background: transparent;
  color: var(--ok);
  border: 1px solid var(--ok);
  padding: .6rem;
  margin-top: .65rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
}
.msg-ack:active { background: var(--ok); color: #001c0e; }
.msg-acked-line {
  color: var(--muted);
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  margin-top: .5rem;
}
.msg-pending-line {
  color: var(--warn);
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  margin-top: .5rem;
}
.msg.dir-in {
  border-left-color: var(--accent);
  background: rgba(66,227,193,.06);
}
.msg-actions {
  display: flex;
  gap: .5rem;
  margin-top: .65rem;
}
.msg-actions .msg-ack  { flex: 1; margin-top: 0; }
.msg-actions .msg-reply { flex: 1; margin-top: 0; }
.msg-reply {
  width: 100%;
  background: transparent;
  color: var(--info);
  border: 1px solid var(--info);
  padding: .6rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
}
.msg-reply:active { background: var(--info); color: #001826; }

/* ========== INCIDENTS ========== */
.inc {
  padding: .8rem .9rem;
  background: var(--bg-2);
  border-left: 4px solid var(--border-strong);
  margin-top: .5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .75rem;
  cursor: pointer;
}
.inc:first-child { margin-top: 0; }
.inc.prio-1 { border-left-color: var(--p1); }
.inc.prio-2 { border-left-color: var(--p2); }
.inc.prio-3 { border-left-color: var(--p3); }
.inc.prio-4 { border-left-color: var(--p4); }
.inc-badge {
  grid-row: span 3;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  padding: .35rem .4rem;
  align-self: center;
  min-width: 2.4rem;
  text-align: center;
  background: #0a1020;
  border: 1px solid var(--border-strong);
}
.inc.prio-1 .inc-badge { background: var(--p1); color: #fff; border-color: var(--p1); }
.inc.prio-2 .inc-badge { background: var(--p2); color: #1a1001; border-color: var(--p2); }
.inc.prio-3 .inc-badge { background: transparent; color: var(--p3); border-color: var(--p3); }
.inc.prio-4 .inc-badge { background: transparent; color: var(--p4); border-color: var(--p4); }
.inc-num  { font-family: var(--ff-mono); font-size: .7rem; color: var(--muted); letter-spacing: .05em; }
.inc-title{ font-family: var(--ff-display); font-weight: 600; font-size: 1rem; color: var(--fg); }
.inc-meta { font-family: var(--ff-mono); font-size: .72rem; color: var(--fg-dim); }

/* ========== BULLETINS ========== */
.bul {
  padding: .75rem .85rem;
  background: var(--bg-2);
  border-left: 3px solid var(--info);
  margin-top: .5rem;
}
.bul:first-child { margin-top: 0; }
.bul.urgent { border-left-color: var(--err); background: rgba(255,90,90,.06); }
.bul.notice { border-left-color: var(--warn); }
.bul.pinned::after {
  content: 'PIN';
  float: right;
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--accent);
  letter-spacing: .15em;
  margin-left: .5rem;
}
.bul-title { font-family: var(--ff-display); font-weight: 600; font-size: .95rem; color: var(--fg); }
.bul-meta  { font-family: var(--ff-mono); font-size: .7rem; color: var(--muted); margin-top: .2rem; letter-spacing: .05em; }
.bul-body  { color: var(--fg-dim); font-size: .9rem; line-height: 1.5; margin-top: .45rem; white-space: pre-wrap; }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 1rem .5rem;
  font-family: var(--ff-mono);
  font-size: .8rem;
  letter-spacing: .1em;
}

/* ========== FOOTER ========== */
.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .55rem 1rem calc(.55rem + var(--safe-bottom));
  background: #080b10;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .05em;
  z-index: 10;
}

/* ========== INCIDENT DETAIL OVERLAY ========== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,8,12,.85);
  backdrop-filter: blur(5px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--safe-top) + .5rem);
}
.overlay[hidden] { display: none; }
.overlay-card {
  flex: 1;
  background: var(--panel);
  border-top: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}
.overlay-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
}
.overlay-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 2rem;
  padding: 0 .5rem;
  line-height: 1;
}
.overlay-close:active { color: var(--err); }
.overlay-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  padding-bottom: calc(2rem + var(--safe-bottom));
}
.kv {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: .5rem 1rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: .9rem;
}
.kv .k {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kv .v { color: var(--fg); }
.ov-desc {
  margin-top: 1rem;
  padding: .75rem;
  background: #0a0e14;
  border-left: 2px solid var(--border-strong);
  color: var(--fg-dim);
  font-size: .9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.ov-log {
  margin-top: 1rem;
  max-height: 40vh;
  overflow: auto;
  background: #0a0e14;
  border: 1px solid var(--border);
  padding: .5rem;
}
.ov-log-entry {
  padding: .4rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: .85rem;
}
.ov-log-entry:last-child { border-bottom: none; }
.ov-log-entry .lt {
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .05em;
}
.ov-log-entry .lu {
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--accent);
  margin-left: .4rem;
}
.ov-log-entry .le {
  color: var(--fg);
  margin-top: .15rem;
}
.ov-section-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--muted);
  margin: 1.25rem 0 .5rem;
}
.ov-actions {
  margin-top: 1.25rem;
  display: flex;
  gap: .5rem;
}
.ov-actions a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .9rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
}

/* ========== desktop preview (rare but possible) ========== */
@media (min-width: 720px) {
  main { max-width: 560px; margin: 0 auto; }
  .top { padding-left: calc((100vw - 560px)/2 + 1rem); padding-right: calc((100vw - 560px)/2 + 1rem); }
  .foot { padding-left: calc((100vw - 560px)/2 + 1rem); padding-right: calc((100vw - 560px)/2 + 1rem); }
}