:root {
  /* "civil" scheme; js/theme.js overrides these for "military" */
  --bg: #000;
  --bg-panel: #070707;
  --fg: #d4d4d4;
  --fg-dim: #a0a0a0; /* secondary text */
  --fg-muted: #6e6e6e; /* tertiary text: placeholders, hints, timestamps */
  --fg-faint: #2c2c2c; /* borders, fills */
  --fg-bright: #ffffff;
  --line: #141414;
  --alert: #ff4040;
  --pan: #ffa030;
  --sidebar-w: 17rem;
  --bottom-h: 15rem;
}

:root[data-theme="military"] {
  --bg-panel: #040a04;
  --fg: #33ff33;
  --fg-dim: #1a8f1a;
  --fg-muted: #126012;
  --fg-faint: #0c3f0c;
  --fg-bright: #a8ffa8;
  --line: #061406;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "DejaVu Sans Mono", "Consolas", "Menlo", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.screen { position: absolute; inset: 0; }
.hidden { display: none !important; }

button {
  font: inherit;
  letter-spacing: inherit;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
button:hover { background: var(--fg-faint); color: var(--fg-bright); }
button.primary { color: var(--fg-bright); box-shadow: 0 0 10px var(--fg-faint); }

input, textarea {
  font: inherit;
  letter-spacing: inherit;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg-dim);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--fg-muted); }
input:focus, textarea:focus { border-color: var(--fg); box-shadow: 0 0 8px var(--fg-faint); }

/* ---------- airport selection ---------- */

#select-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8vh 1rem 2rem;
  overflow-y: auto;
}

#select-screen h1 {
  margin: 0;
  font-size: 3rem;
  font-weight: normal;
  letter-spacing: 0.4em;
  text-shadow: 0 0 12px var(--fg);
  text-align: center;
}

.subtitle {
  display: block;
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--fg-dim);
  letter-spacing: 0.3em;
  text-shadow: none;
}

.intro {
  width: min(40rem, 100%);
  margin: 1.2rem 0 2rem;
  font-size: 0.8rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  text-align: center;
}
.intro strong { color: var(--fg); font-weight: normal; }
.intro a { color: var(--fg); }

#airport-search {
  width: min(40rem, 100%);
  padding: 0.7rem 1rem;
  border: 1px solid var(--fg);
  font-size: 1.1rem;
  text-transform: uppercase;
  box-shadow: 0 0 8px var(--fg-faint);
}
#airport-search:disabled { opacity: 0.4; }

.status {
  margin: 0.8rem 0;
  color: var(--fg-dim);
  min-height: 1.2em;
}

#airport-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(40rem, 100%);
}
#airport-list li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--fg-faint);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
#airport-list li:hover,
#airport-list li.active { background: var(--fg-faint); color: var(--fg-bright); }
#airport-list .icao { font-weight: bold; width: 4.5em; flex: none; }
#airport-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#airport-list .rwys { color: var(--fg-dim); flex: none; }

/* ---------- session options ---------- */

#position-step {
  width: min(40rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
#position-step .status { margin: 0; text-align: center; }
#position-airport { color: var(--fg-bright); }

.option-group {
  display: flex;
  gap: 0.8rem;
  align-items: stretch;
}
.option-label {
  flex: 0 0 6rem;
  align-self: center;
  color: var(--fg-dim);
  letter-spacing: 0.2em;
  font-size: 0.8rem;
}
.option-group button {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  text-align: left;
  border-color: var(--fg-dim);
  color: var(--fg-dim);
}
.option-group.small button { padding: 0.5rem; align-items: center; }
.option-group button.selected {
  border-color: var(--fg);
  color: var(--fg);
  box-shadow: 0 0 12px var(--fg-faint);
}
.option-group button.selected .pos-name { text-shadow: 0 0 8px var(--fg); }
.pos-name { font-size: 1.2rem; letter-spacing: 0.25em; }
.pos-desc { font-size: 0.75rem; line-height: 1.4; }
.pos-key { font-size: 0.75rem; align-self: flex-end; }
.step-actions { display: flex; justify-content: space-between; margin-top: 0.5rem; }

#select-footer {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
#select-footer a { color: var(--fg-dim); text-decoration: none; }
#select-footer a:hover { color: var(--fg); }
.theme-switch { display: inline-flex; gap: 0.3rem; align-items: center; }
.theme-switch button {
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  border-color: var(--fg-faint);
  color: var(--fg-dim);
}
.theme-switch button.selected { border-color: var(--fg); color: var(--fg); }

/* ---------- radar screen ---------- */

#radar-screen {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  grid-template-rows: 1fr var(--bottom-h);
  overflow: hidden;
}

#scope {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
}
#radar {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
#radar:active { cursor: grabbing; }

#btn-panels, #btn-panels-close { display: none; }

#scope-controls {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: flex;
  gap: 0.5rem;
  z-index: 4;
}
#btn-pause { padding: 0.3rem 0.7rem; background: rgba(0, 0, 0, 0.8); }
#btn-pause[aria-pressed="true"] { color: var(--fg-bright); border-color: var(--fg-bright); box-shadow: 0 0 10px var(--fg-faint); }

#scope.paused::after {
  content: "PAUSED · −50 POINTS";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--fg-dim);
  background: rgba(0, 0, 0, 0.8);
  color: var(--fg-bright);
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  text-shadow: 0 0 10px var(--fg);
  pointer-events: none;
}

#hud {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--fg-dim);
  background: rgba(0, 0, 0, 0.8);
  max-width: 26rem;
  font-size: 0.85rem;
}
.hud-title { font-size: 1.05rem; margin-bottom: 0.1rem; }
#hud-icao { font-weight: bold; color: var(--fg-bright); text-shadow: 0 0 8px var(--fg); }
#hud-position { color: var(--fg-bright); letter-spacing: 0.15em; }
.hud-sub { margin-bottom: 0.3rem; }
#hud-info { color: var(--fg-dim); margin-bottom: 0.5rem; }
#hud-runways { border-collapse: collapse; margin-bottom: 0.5rem; }
#hud-runways td { padding: 0.05rem 0.7rem 0.05rem 0; white-space: nowrap; }
#hud-runways td.num { text-align: right; }
#hud-runways td.dim { color: var(--fg-dim); }
#hud-runways tr.active td { color: var(--fg-bright); }
#hud-status { color: var(--fg-dim); margin: 0; }

#hud-hint {
  position: absolute;
  bottom: 0.4rem;
  right: 0.8rem;
  color: var(--fg-muted);
  font-size: 0.75rem;
}

/* ---------- sidebar ---------- */

#sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.6rem;
  border-left: 1px solid var(--fg-faint);
  background: var(--bg-panel);
  overflow: hidden;
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
}
.panel h2 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: normal;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--fg-faint);
  padding-bottom: 0.2rem;
}
#wind-panel { align-items: center; }
#wind-panel h2 { align-self: stretch; }
#wind-rose { width: 140px; height: 140px; }
#wind-text { font-size: 0.85rem; color: var(--fg-bright); text-align: center; white-space: pre-line; }
#notepad-panel { flex: 1 1 8rem; }
#notepad {
  flex: 1;
  resize: none;
  padding: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.4;
}
#lookup-panel { flex: 1 1 10rem; }
#lookup { padding: 0.35rem 0.5rem; font-size: 0.8rem; text-transform: uppercase; }
#lookup-results {
  flex: 1;
  overflow-y: auto;
  font-size: 0.75rem;
  line-height: 1.5;
}
#lookup-results .hit { border-bottom: 1px solid var(--fg-faint); padding: 0.2rem 0; }
#lookup-results .hit b { color: var(--fg-bright); }
#lookup-results .hit span { color: var(--fg-dim); }
#sidebar #btn-back { align-self: stretch; }
#sidebar-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}
#sidebar-links a { color: var(--fg-dim); text-decoration: none; }
#sidebar-links a:hover { color: var(--fg); }
#sidebar-links button { padding: 0.15rem 0.45rem; font-size: 0.7rem; letter-spacing: 0.1em; border-color: var(--fg-faint); color: var(--fg-dim); }
#sidebar-links button:hover { color: var(--fg); }

/* ---------- bottom panel ---------- */

#bottom {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fg-faint);
  background: var(--bg-panel);
  min-height: 0;
}
#command-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--fg-faint);
}
#command-prompt { color: var(--fg-bright); }
#command {
  flex: 1;
  padding: 0.35rem 0.5rem;
  text-transform: uppercase;
  font-size: 0.95rem;
}
#radio-log {
  flex: 0 0 4.2rem;
  overflow-y: auto;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--fg-faint);
  color: var(--fg-dim);
}
#radio-log .atc { color: var(--fg); }
#radio-log .pilot { color: var(--fg-bright); }
#radio-log .sys { color: var(--alert); }
#radio-log .twr { color: var(--fg-dim); font-style: italic; }
#radio-log .t { color: var(--fg-muted); margin-right: 0.5em; }

#traffic-list {
  flex: 1;
  display: block;
  overflow-y: auto;
  border-collapse: collapse;
  font-size: 0.82rem;
}
#traffic-list thead, #traffic-list tbody { display: table; width: 100%; table-layout: fixed; }
#traffic-list th {
  text-align: left;
  font-weight: normal;
  color: var(--fg-dim);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  padding: 0.2rem 0.6rem;
  position: sticky;
  top: 0;
  background: var(--bg-panel);
}
#traffic-list td { padding: 0.18rem 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#traffic-list .num { text-align: right; }
#traffic-list tbody tr { cursor: pointer; border-top: 1px solid var(--line); }
#traffic-list tbody tr:hover { background: var(--fg-faint); }
#traffic-list tbody tr.selected { background: var(--fg-faint); color: var(--fg-bright); }
#traffic-list tbody tr.new td:first-child::before { content: "● "; color: var(--fg-bright); }
#traffic-list tbody tr.conflict { color: var(--alert); animation: blink 0.8s steps(2, start) infinite; }
#traffic-list tbody tr.pan { color: var(--pan); }
#traffic-list tbody tr.mayday { color: var(--alert); }
#traffic-list tbody tr.pan .route, #traffic-list tbody tr.pan .flight,
#traffic-list tbody tr.mayday .route, #traffic-list tbody tr.mayday .flight { color: inherit; opacity: 0.7; }
#traffic-list .tag { font-size: 0.7rem; font-weight: bold; letter-spacing: 0.1em; }
#traffic-list td.cs { font-weight: bold; }
#traffic-list .route { color: var(--fg-dim); }
#traffic-list tbody tr.selected .route { color: var(--fg); }
#traffic-list .flight { color: var(--fg-dim); font-size: 0.7rem; }

@keyframes blink { to { visibility: hidden; } }

/* ---------- report ---------- */

#report {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
}
.report-box {
  border: 1px solid var(--fg);
  background: var(--bg);
  padding: 1.5rem 2rem;
  min-width: 24rem;
  box-shadow: 0 0 24px var(--fg-faint);
}
.report-box h2 { margin: 0 0 0.5rem; font-weight: normal; letter-spacing: 0.3em; text-shadow: 0 0 8px var(--fg); }
#report-reason { color: var(--fg-dim); margin: 0 0 1rem; }
#report-table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
#report-table td { padding: 0.15rem 0; }
#report-table td:last-child { text-align: right; color: var(--fg-bright); }
#report-table td.bad:last-child { color: var(--alert); }
#report-score { font-size: 1.2rem; color: var(--fg-bright); margin: 0 0 1rem; }
.report-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.report-actions button { padding: 0.5rem 1rem; }

/* ---------- mobile / narrow screens ---------- */

@media (max-width: 820px), (pointer: coarse) and (max-height: 600px) {
  html { font-size: 13px; }

  #select-screen { padding-top: 5vh; }
  #select-screen h1 { font-size: 2.2rem; }
  .intro { margin: 0.8rem 0 1.2rem; font-size: 0.75rem; }
  #airport-list li { padding: 0.7rem 0.8rem; }
  .option-group { flex-direction: column; gap: 0.5rem; }
  .option-group.small { flex-direction: row; flex-wrap: wrap; }
  .option-label { flex: none; }
  .option-group.small .option-label { flex: 0 0 100%; }
  .option-group.small button { padding: 0.7rem 0.5rem; }
  .step-actions { flex-direction: column-reverse; gap: 0.6rem; }
  .step-actions button { padding: 0.8rem; }
  .report-actions { flex-direction: column; }
  .report-actions button { padding: 0.8rem; }

  #radar-screen {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 42vh;
  }
  #scope { grid-column: 1; grid-row: 1; }
  #bottom { grid-column: 1; grid-row: 2; }

  /* sidebar becomes a drawer over the scope */
  #sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 42vh;
    width: min(20rem, 88vw);
    grid-column: auto;
    grid-row: auto;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    z-index: 5;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.8);
  }
  #sidebar.open { transform: none; }
  #scope-controls { top: 0.5rem; right: 0.5rem; }
  #btn-panels {
    display: block;
    padding: 0.3rem 0.7rem;
    font-size: 1.2rem;
  }
  #scope.paused::after { font-size: 1.1rem; }
  #btn-panels-close { display: block; align-self: flex-end; }
  #notepad-panel { flex: 1 1 6rem; }
  #lookup-panel { flex: 1 1 8rem; }

  #hud {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.75rem;
    max-width: calc(100vw - 12.5rem);
  }
  .hud-title { font-size: 0.9rem; }
  #hud-name, #hud-info, #hud-runways, #hud-hint { display: none; }

  #command { font-size: 1rem; padding: 0.5rem; }
  #radio-log { flex-basis: 3.3rem; font-size: 0.75rem; }
  #traffic-list td { padding: 0.45rem 0.4rem; }
  #traffic-list th { padding: 0.2rem 0.4rem; }
  /* drop WTC and HDG columns, keep callsign readable */
  #traffic-list th:nth-child(3), #traffic-list td:nth-child(3),
  #traffic-list th:nth-child(7), #traffic-list td:nth-child(7) { display: none; }
  #traffic-list th:nth-child(1) { width: 6.4rem; }
  #traffic-list th:nth-child(2) { width: 3.6rem; }
  #traffic-list th:nth-child(5) { width: 3.4rem; }
  #traffic-list th:nth-child(6) { width: 3rem; }
  #traffic-list th:nth-child(9) { width: 2.6rem; }

  .report-box { min-width: 0; width: 92vw; padding: 1rem 1.2rem; }
}