/* Aufbau: Die Karte füllt den ganzen Bildschirm, der Kompass liegt mittig darüber.
   Oben schwebt die Peilung, unten Sonnenzeile und Koordinaten.
   Helles Thema für Sonnenlicht, dunkles für die Nacht. */
:root {
  --bg: #e9ede6;
  --face: #fbfcf8;
  --ink: #15201c;
  --muted: #5b6962;
  --rule: #c5cec6;
  /* Akzent zu den Grauwerten: Blaugrün. Norden trägt das Orange der Sonne, Rot warnt nur. */
  --accent: #0b8f88;
  --warn: #cf3a2c;
  --sun: #e3890a;
  --sun-ink: #965500;
  --north: var(--sun);
  --night: #4a7d84;
  --pos: var(--accent);
  --pos-ring: #ffffff;
  /* Karte: Schwarzplan – Grund, Höhenlinien, Wege, Gebäude */
  --map-ground: #fbfcf8;
  --map-contour: #8cc7c1;
  --map-way: #76827c;
  --map-building: #15201c;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1513;
    --face: #161f1c;
    --ink: #e9efea;
    --muted: #93a29b;
    --rule: #33423c;
    --accent: #38cfc2;
    --warn: #ff6152;
    --sun: #ffb13b;
    --sun-ink: #ffc56e;
    --night: #7fb4b9;
    --pos-ring: #ffffff;
    --map-ground: #121a17;
    --map-contour: #2b6c66;
    --map-way: #7f8d86;
    --map-building: #e9efea;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

p { margin: 0; }

[hidden] { display: none !important; }

/* Die Karte füllt den ganzen Bildschirm; Peilung, Infozeilen und Knöpfe schweben als Tafeln darüber. */
.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  --top: env(safe-area-inset-top, 0px);
  --right: env(safe-area-inset-right, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --left: env(safe-area-inset-left, 0px);
  --edge: 10px;
  /* Platz über und unter der Scheibe für Peilung und Infozeilen */
  --reserve: 190px;
}

/* ---------- Tafeln oben und unten ---------- */

.bar {
  position: absolute;
  z-index: 2;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  background: var(--face);
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.3);
  text-align: center;
  transform: translateX(-50%);
}

.bar--top {
  top: calc(var(--top) + var(--edge));
  max-width: calc(100% - 128px - var(--left) - var(--right));
  min-height: 44px;
  padding: 6px 16px;
  border-radius: 22px;
}

/* Steht nur der Knopf in der Tafel, braucht er keinen eigenen Hintergrund. */
.bar--top:has(.start:not([hidden])) { padding: 0; background: none; box-shadow: none; }

.bar--bottom {
  bottom: calc(var(--bottom) + var(--edge));
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 2 * var(--edge) - var(--left) - var(--right));
  padding: 8px 16px;
  border-radius: 16px;
}

.heading__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.heading__deg { min-width: 3ch; text-align: right; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.heading__dir { min-width: 3ch; font-size: 18px; font-weight: 600; color: var(--accent); text-align: left; }
.heading__note { font-size: 13px; color: var(--muted); }

.start {
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--face);
  font: 600 16px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.start--small { margin: 6px 0 2px; padding: 10px 18px; font-size: 15px; }

.sunline {
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sunline strong { color: var(--ink); font-weight: 600; }

.placeline:empty { display: none; }
.placeline { font-size: 13px; font-variant-numeric: tabular-nums; }
.placeline span { color: var(--muted); }

/* ---------- Karte mit Kompass darüber ---------- */

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--map-ground);
  container-type: size;
  isolation: isolate;
}

#map { position: absolute; inset: 0; background: var(--map-ground); font-family: var(--font); }

/* Die Scheibenmitte liegt genau auf der Kartenmitte. Die Spitze oben macht den Rahmen
   etwas höher als breit, deshalb die ungerade Verschiebung. */
.dial-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw - 20px, 100vh - var(--reserve) - var(--top) - var(--bottom), 480px);
  width: min(100cqw - 20px, 100cqh - var(--reserve) - var(--top) - var(--bottom), 480px);
  aspect-ratio: 400 / 416;
  transform: translate(-50%, -51.923%);
  pointer-events: none; /* Fingergesten gehen an die Karte darunter */
}

.dial {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
}

/* Beschriftung mit Saum in Kartenfarbe, damit sie über Linien und Gebäuden lesbar bleibt */
.dial text {
  text-anchor: middle;
  dominant-baseline: central;
  font-variant-numeric: tabular-nums;
  stroke: var(--map-ground);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* Nur der Ring mit der Gradskala ist hinterlegt (leicht durchscheinend), die Mitte bleibt ganz frei für die Karte */
.bezel { fill: none; stroke: var(--face); stroke-width: 50; stroke-opacity: 0.8; }
.rim { fill: none; stroke: var(--muted); stroke-width: 1; stroke-opacity: 0.6; }
.lubber { fill: var(--accent); stroke: var(--map-ground); stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
.northmark { fill: var(--north); }

/* Mitte der Scheibe = eigener Standort */
.center { fill: var(--ink); stroke: var(--map-ground); stroke-width: 2; }
.center.is-located { fill: var(--pos); stroke: var(--pos-ring); stroke-width: 3; }

.tick { stroke: var(--muted); stroke-width: 1; }
.tick--major { stroke: var(--ink); stroke-width: 2; }
.deg { font-size: 11px; fill: var(--muted); }
.card { font-size: 24px; font-weight: 700; fill: var(--ink); stroke-width: 4px; }
.card--north { fill: var(--north); }

/* Sonnenuhr: Tagbogen von Aufgang bis Untergang, Nachtbogen gepunktet */
.sunring { fill: none; stroke: var(--rule); stroke-width: 1; }
.sunring.is-day { stroke: var(--sun); stroke-width: 9; }
.sunring.is-night { stroke: var(--night); stroke-width: 2; stroke-dasharray: 1 6; stroke-linecap: round; }
.dayarc { fill: none; stroke: var(--sun); stroke-width: 9; stroke-linecap: round; }
.nightarc { fill: none; stroke: var(--night); stroke-width: 2; stroke-dasharray: 1 6; stroke-linecap: round; }
.hourtick { stroke: #fff; stroke-width: 1.5; }
.hour { font-size: 11px; font-weight: 600; fill: var(--sun-ink); }
.sunend { fill: var(--map-ground); stroke: var(--sun); stroke-width: 3; }
.suntime { font-size: 15px; font-weight: 700; fill: var(--ink); stroke-width: 4px; }
.suntime__arrow { fill: var(--sun-ink); }
.ray { stroke: var(--sun); stroke-width: 2; stroke-dasharray: 0.1 6; stroke-linecap: round; }
.shadow__near { stop-color: var(--ink); stop-opacity: 0.45; }
.shadow__far { stop-color: var(--ink); stop-opacity: 0.08; }
.sun { fill: var(--sun); stroke: var(--map-ground); stroke-width: 3; }
.sun.is-below { fill: var(--map-ground); stroke: var(--night); stroke-width: 2.5; }

/* ---------- Runde Knöpfe auf der Karte ---------- */

.round {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--face);
  color: var(--muted);
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.3);
  cursor: pointer;
}

.round svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Plus und Minus unten rechts, über den Infozeilen */
.zoom {
  position: absolute;
  right: calc(var(--right) + var(--edge));
  bottom: calc(var(--bottom) + 80px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Kalibrier-Knopf: liegende Acht */
.calibrate {
  position: absolute;
  top: calc(var(--top) + var(--edge));
  right: calc(var(--right) + var(--edge));
}

.calibrate svg { width: 26px; height: 26px; }
.calibrate.is-warn { color: var(--warn); box-shadow: 0 0 0 2px var(--warn), 0 1px 5px rgb(0 0 0 / 0.3); }
.calibrate.is-warn::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--face);
  border-radius: 50%;
  background: var(--warn);
}

.start:focus-visible, .round:focus-visible, .sheet__done:focus-visible, .sheet__later:focus-visible {
  outline: 3px solid var(--pos);
  outline-offset: 3px;
}

/* ---------- Anleitung zum Kalibrieren: Blatt am unteren Rand ---------- */

.sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  margin: 0 auto;
  padding: 16px max(20px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--face);
  color: var(--ink);
  font-size: 15px;
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.25);
}

.sheet::backdrop { background: rgb(0 0 0 / 0.15); }
.sheet[open] { display: flex; flex-direction: column; gap: 10px; }

.sheet__figure { align-self: center; width: 200px; max-width: 100%; height: 90px; overflow: visible; }
.sheet__track { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.sheet__phone rect { fill: var(--face); stroke: var(--ink); stroke-width: 2; }
.sheet__phone path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

.sheet__title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; }
.sheet__accuracy { font-weight: 600; font-variant-numeric: tabular-nums; }
.sheet__accuracy.is-warn { color: var(--warn); }
.sheet__tips { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 14px; }

.sheet__done {
  align-self: stretch;
  margin-top: 4px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--face);
  font: 600 16px/1 var(--font);
  cursor: pointer;
}

.sheet__later {
  align-self: center;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 15px/1 var(--font);
  cursor: pointer;
}

/* ---------- Quellenangabe der Karte ---------- */

.maplibregl-map { font-family: var(--font); }
.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--face); color: var(--muted); }
.maplibregl-ctrl-attrib a { color: var(--muted); }
.maplibregl-ctrl-top-left { top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px); }

@media (prefers-color-scheme: dark) {
  .maplibregl-ctrl-attrib-button { filter: invert(1); }
}

/* Steht unten zusätzlich der Freigabe-Knopf, rücken Plus und Minus höher. */
.app:has(#locBtn:not([hidden])) .zoom { bottom: calc(var(--bottom) + 130px); }

/* Flache Bildschirme (Handy quer): Peilung und Infozeilen an den linken Rand,
   so bleibt die ganze Höhe für die Scheibe. */
@media (orientation: landscape) and (max-height: 520px) {
  .app { --reserve: 24px; }
  .bar { transform: none; }
  .bar--top { left: calc(var(--left) + 50px); max-width: calc(50% - 50vh - 40px - var(--left)); }
  .bar--bottom {
    left: calc(var(--left) + var(--edge));
    align-items: flex-start;
    max-width: calc(50% - 50vh - var(--edge) - var(--left));
    text-align: left;
  }
  .zoom, .app:has(#locBtn:not([hidden])) .zoom { bottom: calc(var(--bottom) + var(--edge)); }
}