/* Zielbild ist ein Instrumentendisplay, kein Web-Dashboard: es sitzt jemand
   in vier Metern Entfernung davor (§6.3). */

:root {
  --bg:        #07131A;  /* tiefes Petrol statt Schwarz */
  --land:      #12303B;
  --coast:     #1E4C5C;
  --graticule: #0F2530;
  --ink:       #DCE7EC;
  --dim:       #7E939C;

  --ok:    #3FBFA0;
  --warn:  #E8C547;
  --error: #E05C5C;

  /* Bandfarben, auf dunklem Grund gut voneinander zu trennen. */
  --b160: #8E7CC3;
  --b80:  #4A90D9;
  --b40:  #3FBFA0;
  --b20:  #E8C547;
  --b15:  #E88C3C;
  --b10:  #E05C5C;
  --b6:   #F06BB0;
  --bx:   #9AA5AB;

  --pad: clamp(0.6rem, 1.2vw, 1.4rem);

  /* Vom Startbildschirm gestartet liegt die Karte unter Statusleiste,
     Kamera-Aussparung und Wischbalken (viewport-fit=cover). Die Karte soll
     genau das — die Schrift darüber nicht. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.35;
  /* Rufzeichen und Zeiten dürfen beim Einlaufen nicht springen. */
  font-variant-numeric: tabular-nums;
}

#map, #map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#map {
  /* Auf dem Tablet: kein Doppeltipp-Zoom (der Doppeltipp schaltet das
     Vollbild), kein Überziehen der Seite beim Drehen des Globus. `none`
     statt `manipulation`, weil sonst der Browser den Pinch an sich zieht
     und die ganze Seite aufzöge, statt in die Karte zu zoomen. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- Kopfzeile ---- */

#head {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  padding: calc(var(--pad) + var(--safe-t)) calc(var(--pad) + var(--safe-r))
           var(--pad) calc(var(--pad) + var(--safe-l));
  /* Kein Kasten, kein Schatten: nur ein sanfter Verlauf, damit die Schrift
     über hellen Landflächen lesbar bleibt. */
  background: linear-gradient(to bottom, rgba(7,19,26,.85), rgba(7,19,26,0));
  pointer-events: none;
}

.spacer { flex: 1; }
.dim { color: var(--dim); }

#station { font-weight: 600; letter-spacing: .01em; }
#count { font-weight: 600; }

.dots { display: inline-flex; gap: .35em; align-self: center; }

.dot {
  width: .62em; height: .62em;
  border-radius: 50%;
  background: var(--dim);
  display: inline-block;
}
/* Auf dem öffentlichen Server gibt es keine zweite Strecke. */
.dot[hidden] { display: none; }
.dot.ok    { background: var(--ok); }
.dot.warn  { background: var(--warn); }
.dot.error { background: var(--error); }

/* ---- QSO-Liste ---- */

#list {
  position: absolute;
  right: 0;
  /* Unterhalb der Kopfzeile samt ihres Verlaufs, sonst steht der neueste
     Eintrag im Halbschatten. */
  top: calc(4.4em + var(--safe-t));
  bottom: calc(3.2em + var(--safe-b));
  width: min(19em, 34vw);
  padding: 0 calc(var(--pad) + var(--safe-r)) 0 var(--pad);
  overflow: hidden;
  background: linear-gradient(to left, rgba(7,19,26,.82), rgba(7,19,26,0));
  pointer-events: none;
}

#qsos {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .28em;
}

#qsos li {
  display: grid;
  grid-template-columns: 4.6em 1fr auto;
  gap: .5em;
  align-items: baseline;
  white-space: nowrap;
}

#qsos .time { color: var(--dim); font-size: .82em; }
#qsos .call { font-weight: 600; letter-spacing: .02em; }
#qsos .band { font-size: .8em; opacity: .85; }
#qsos .mult::after { content: "●"; color: var(--warn); margin-left: .3em; font-size: .6em; vertical-align: middle; }

/* Der einzige Bewegungseffekt neben dem einlaufenden Bogen. */
#qsos li.new { animation: slide .45s ease-out; }
@keyframes slide {
  from { opacity: 0; transform: translateY(-.5em); }
  to   { opacity: 1; transform: none; }
}

/* ---- Bandlegende ---- */

#legend {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 1.1em;
  padding: var(--pad) calc(var(--pad) + var(--safe-r))
           calc(var(--pad) + var(--safe-b)) calc(var(--pad) + var(--safe-l));
  background: linear-gradient(to top, rgba(7,19,26,.85), rgba(7,19,26,0));
  pointer-events: none;
  font-size: .92em;
}

#legend .band { display: inline-flex; align-items: baseline; gap: .35em; }
#legend .swatch { width: .8em; height: .28em; border-radius: .14em; display: inline-block; }
#legend .n { color: var(--dim); font-size: .85em; }
#legend .band.off { opacity: .35; }

/* ---- Bedienleiste für Touch ---- */

/* Grundsätzlich nicht vorhanden. Der Anzeigerechner am Beamer hat Maus und
   Tastatur, dort greift die Media Query unten nie — das Bild bleibt frei von
   Bedienelementen. */
#touch { display: none; }

@media (hover: none) and (pointer: coarse) {
  #touch {
    position: absolute;
    left: 0;
    bottom: calc(3.4em + var(--safe-b));
    display: flex;
    gap: .4em;
    padding: var(--pad) var(--pad) var(--pad) calc(var(--pad) + var(--safe-l));
    /* Die Legende sitzt darunter am selben Rand: die Leiste liegt darüber,
       damit sie nicht in deren Verlauf verschwindet. */
    z-index: 1;
    transition: opacity .5s ease;
  }

  /* Ohne Berührung tritt die Leiste zurück, bleibt aber bedienbar — auf dem
     Telefon ist die Karte das Bild, nicht die Knöpfe. */
  #touch.idle { opacity: .3; }

  #touch button {
    -webkit-appearance: none;
    appearance: none;
    width: 2.6em; height: 2.6em;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(220,231,236,.18);
    border-radius: .7em;
    background: rgba(7,19,26,.55);
    color: var(--dim);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #touch button[aria-pressed="true"] {
    color: var(--ok);
    border-color: rgba(63,191,160,.55);
  }

  #touch svg {
    width: 1.4em; height: 1.4em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
  }
}

/* Beschriftung für Vorleseprogramme; title allein trägt auf Touch nicht. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Empty State ---- */

#empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .4em;
  pointer-events: none;
}
#empty p { margin: 0; }
#empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #qsos li.new { animation: none; }
}