:root {
  --bg: #0a0e12;
  --panel: #10161d;
  --green: #39ff8b;
  --amber: #ffc23d;
  --red: #ff5252;
  --dim: #5a6b7a;
  --text: #cfe3d8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Consolas", "Courier New", monospace;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid #1d2a36;
}

h1 { font-size: 1.2rem; margin: 0; color: var(--green); }
h1 .subtitle { font-size: 0.7rem; color: var(--dim); margin-left: 8px; }
h2 { font-size: 0.8rem; color: var(--dim); margin: 0 0 6px 0; text-transform: uppercase; letter-spacing: 2px; }

.controls { display: flex; align-items: center; gap: 10px; }
.controls select {
  background: #16202a;
  color: var(--text);
  border: 1px solid #2a3a4a;
  padding: 4px 8px;
  font-family: inherit;
}

.status { padding: 3px 10px; border-radius: 3px; font-size: 0.75rem; }
.status.connected { color: var(--green); border: 1px solid var(--green); }
.status.disconnected { color: var(--red); border: 1px solid var(--red); }
.status.lat-warn { color: var(--amber); border: 1px solid var(--amber); }

.controls button {
  background: #16202a;
  color: var(--dim);
  border: 1px solid #2a3a4a;
  padding: 4px 12px;
  font-family: inherit;
  cursor: pointer;
}
.controls button.active { color: var(--green); border-color: var(--green); }

.tabs {
  display: flex;
  gap: 4px;
  padding: 8px 20px 0;
  background: var(--panel);
  border-bottom: 1px solid #1d2a36;
}

.tab {
  background: transparent;
  color: var(--dim);
  border: 1px solid #1d2a36;
  border-bottom: none;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.tab.active {
  color: var(--green);
  background: var(--bg);
  border-color: #2a5a3a;
}

.mode main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 16px 20px;
  gap: 16px;
}

.scope-panel, .table-panel {
  background: var(--panel);
  border: 1px solid #1d2a36;
  padding: 12px;
}

canvas { display: block; width: 100%; height: auto; background: #060a0d; cursor: crosshair; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #1d2a36; }
th { color: var(--dim); font-weight: normal; text-transform: uppercase; font-size: 0.7rem; }
td.guidance-ok { color: var(--green); }
td.guidance-warn { color: var(--amber); }

.gci-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.gci-controls select {
  background: #16202a;
  color: var(--text);
  border: 1px solid #2a3a4a;
  padding: 3px 6px;
  font-family: inherit;
}

.gci-controls button {
  background: #16202a;
  color: var(--dim);
  border: 1px solid #2a3a4a;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.gci-controls .hint { color: var(--dim); font-size: 0.75rem; }

/* bullseye position of the pointer; pushed to the right so the hint text
   beside it does not shuffle as the digits change */
.gci-controls .cursor-readout { margin-left: auto; color: var(--amber); white-space: nowrap; }

/* the PPI is dragged, so a finger on it must pan the scope, not scroll the page */
#ppiScope { touch-action: none; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  font-size: 0.95rem;
}

.info-grid .cell { padding: 8px; background: #0c1218; border: 1px solid #1d2a36; }
.info-grid .cell .k { color: var(--dim); font-size: 0.7rem; text-transform: uppercase; }
.info-grid .cell .v { color: var(--green); margin-top: 4px; }

.log-panel {
  max-height: 220px;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}

.log-line { white-space: pre-wrap; }
.log-time { color: var(--dim); margin-right: 8px; }

/* ---------- approach digest ---------- */

.digest-panel { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.digest-empty { color: var(--dim); font-size: 0.8rem; }

.digest-row {
  padding: 8px;
  background: #0c1218;
  border: 1px solid #1d2a36;
}

.digest-head { display: flex; align-items: center; gap: 10px; }
.digest-callsign { color: var(--text); font-size: 0.9rem; }
.digest-status { color: var(--dim); font-size: 0.7rem; text-transform: uppercase; }

.grade {
  margin-left: auto;
  padding: 1px 8px;
  font-size: 0.7rem;
  border: 1px solid;
  border-radius: 3px;
}
.grade-good { color: var(--green); border-color: var(--green); }
.grade-fair { color: var(--amber); border-color: var(--amber); }
.grade-poor { color: var(--red); border-color: var(--red); }

.digest-stats { color: var(--dim); font-size: 0.72rem; margin: 4px 0; }

.sparkline { display: block; width: 100%; height: 40px; background: #060a0d; }

/* ---------- HD / wide-screen layout ---------- */

/* GCA: scopes on the left, log + digest + table on the right */
@media (min-width: 1100px) {
  #mode-gca main {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  }
  #mode-gca section.scope-panel:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  #mode-gca section.scope-panel:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  #mode-gca section.table-panel:nth-of-type(3) { grid-column: 2; grid-row: 1; }
  #mode-gca section.table-panel:nth-of-type(4) { grid-column: 2; grid-row: 2; }
  #mode-gca section.table-panel:nth-of-type(5) { grid-column: 2; grid-row: 3; }
}

/* GCI: solution panel beside the scope on very wide screens */
@media (min-width: 1400px) {
  #mode-gci main {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  }
  #mode-gci section.scope-panel { grid-column: 1; grid-row: 1; }
  #mode-gci section.table-panel { grid-column: 2; grid-row: 1; }
  #mode-gci canvas { max-width: 900px; margin: 0 auto; }
}

/* TWR: field table beside the scope */
@media (min-width: 1400px) {
  #mode-twr main {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  }
  #mode-twr section.scope-panel { grid-column: 1; grid-row: 1; }
  #mode-twr section.table-panel { grid-column: 2; grid-row: 1; }
}

/* ---------- smartphone / tablet ---------- */

@media (max-width: 720px) {
  header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  h1 { font-size: 1rem; }

  .tabs {
    overflow-x: auto;
    padding: 6px 10px 0;
    -webkit-overflow-scrolling: touch;
  }
  .tab {
    padding: 12px 16px;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .mode main { padding: 10px; gap: 10px; }
  .scope-panel, .table-panel { padding: 8px; }

  /* wide tables scroll horizontally instead of breaking the layout */
  .table-panel { overflow-x: auto; }
  table { min-width: 560px; }

  .gci-controls { flex-wrap: wrap; gap: 10px; }
  .log-panel { max-height: 150px; }
  .digest-panel { max-height: none; }

  /* larger touch targets */
  button, select { min-height: 40px; }
}

@media (max-width: 480px) {
  h1 .subtitle { display: none; }
}