:root {
  color-scheme: light;
  font-family: "Segoe UI", Arial, sans-serif;
  --navy: #123a5f;
  --navy-dark: #08243b;
  --blue: #1262ff;
  --line: #b9cedd;
  --paper: #fff;
  --footer-height: 78px;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 300px; height: 100%; margin: 0; overflow: hidden; }
body { color: #14283b; background: #dbe7ef; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
button, input { font: inherit; }
button { min-height: 40px; border: 1px solid #7798af; border-radius: 7px; background: #f7fbfe; color: #123a5f; padding: 7px 11px; cursor: pointer; font-weight: 650; }
button:hover { background: #e4f2fb; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #f7b733; outline-offset: 2px; }
a { color: #075f9d; }
.skip-link { position: fixed; z-index: 5000; left: 8px; top: -80px; background: #fff; padding: 10px; }
.skip-link:focus { top: 8px; }

.app-header { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: max(6px, env(safe-area-inset-top)) 12px 6px; background: var(--navy); color: #fff; }
.back-link { color: #fff; text-decoration: none; white-space: nowrap; padding: 8px 4px; }
.app-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.app-brand img { width: 38px; height: 38px; }
.app-brand div { min-width: 0; }
.app-brand strong, .app-brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-brand small { color: #d8ecf9; font-size: .78rem; }
.network-state { max-width: 32vw; text-align: right; font-size: .8rem; color: #d8ecf9; }
.network-state.error { color: #ffe0dc; font-weight: 700; }

.location-panel { position: relative; z-index: 900; padding: 7px 10px; background: rgb(255 255 255 / 97%); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgb(10 45 70 / 10%); }
.location-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.location-actions label { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; }
.location-actions input[type="checkbox"] { width: 20px; height: 20px; }
.location-form { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)) auto; gap: 7px; margin-top: 7px; }
.location-form label { font-size: .78rem; color: #40596b; }
.location-form input { width: 100%; min-height: 38px; border: 1px solid #7999b0; border-radius: 5px; padding: 5px 7px; }
.location-summary { margin: 5px 0 0; font-size: .78rem; color: #3d586c; }

.view-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-bottom: 1px solid var(--line); }
.view-tabs button { border: 0; border-radius: 0; border-bottom: 4px solid transparent; min-height: 45px; }
.view-tabs button[aria-selected="true"] { color: #fff; background: #17638f; border-color: #73c8ec; }

.app-main, .view, #map, .sky-view { min-height: 0; width: 100%; height: 100%; }
.view { position: relative; }
.view[hidden] { display: none !important; }
#map { background: #d9e2e7; }
.leaflet-control-scale { border: 1px solid #39576b; border-top: 0; background: rgb(255 255 255 / 85%); }
.observer-marker { width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; background: #0878bc; box-shadow: 0 0 0 2px #0a3754, 0 2px 7px rgb(0 0 0 / 40%); }
.map-legend { position: absolute; z-index: 600; right: 10px; bottom: 10px; display: grid; gap: 3px; padding: 8px 10px; border: 1px solid #9eb6c7; border-radius: 7px; background: rgb(255 255 255 / 90%); box-shadow: 0 2px 8px rgb(0 0 0 / 18%); font-size: .78rem; }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.rising { background: #1262ff; }.dot.falling { background: #087f23; }.dot.level { background: #6e7880; }

.sky-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 30%); background: #071b2e; color: #fff; }
.sky-stage { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
#skySvg { display: block; width: min(100%, 92vh); height: min(100%, 92vh); touch-action: manipulation; }
.sky-info { overflow: auto; padding: 14px; background: #0d2f4a; border-left: 1px solid #355d79; }
.sky-info h2 { margin: 0 0 8px; font-size: 1.1rem; }
.orientation-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 9px; margin: 0 0 10px; padding: 9px; border: 1px solid #527890; border-radius: 8px; background: rgb(4 29 48 / 72%); }
.orientation-controls button, .orientation-controls input, .orientation-controls .orientation-status { grid-column: 1 / -1; }
.orientation-controls label { color: #d7eaf6; font-size: .8rem; }
.orientation-controls output { font-weight: 700; color: #ffe06b; }
.orientation-controls input[type="range"] { width: 100%; accent-color: #70c9ef; }
.orientation-status { margin: 0; color: #cfe6f4; font-size: .78rem; line-height: 1.35; }
.orientation-status.active { color: #fff3a6; font-weight: 650; }
.terrain-controls { display: grid; gap: 6px; margin: 0 0 10px; padding: 9px; border: 1px solid #527890; border-radius: 8px; background: rgb(4 29 48 / 72%); }
.terrain-status { margin: 0; color: #cfe6f4; font-size: .78rem; line-height: 1.35; }
.terrain-status.active { color: #b8f5cf; font-weight: 650; }
.sky-info ol { padding-left: 1.35rem; }
.sky-info li { margin-bottom: 7px; }
.sky-info button { width: 100%; text-align: left; }
.explanation { color: #c6dcea; font-size: .82rem; }

.sonde-details { position: fixed; z-index: 3000; right: 12px; top: 70px; width: min(390px, calc(100vw - 24px)); max-height: calc(100dvh - 160px); overflow: auto; background: #fff; border: 2px solid #1d668f; border-radius: 10px; box-shadow: 0 8px 26px rgb(0 0 0 / 30%); padding: 14px; }
.sonde-details > button { float: right; min-width: 38px; font-size: 1.3rem; }
.sonde-details h2 { margin-top: 0; color: #123a5f; }
.sonde-details dl { display: grid; grid-template-columns: minmax(115px, 1fr) minmax(120px, 1.15fr); margin: 0; }
.sonde-details dt, .sonde-details dd { margin: 0; padding: 6px 3px; border-bottom: 1px solid #d7e3eb; }
.sonde-details dt { font-weight: 700; }

.app-footer { min-height: var(--footer-height); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 7px 12px max(7px, env(safe-area-inset-bottom)); background: var(--navy); color: #fff; }
.app-footer > div:first-child { min-width: 0; }
.app-footer strong, .app-footer span { display: block; }
.app-footer span { color: #cfe5f3; font-size: .78rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-footer small { grid-column: 1 / -1; color: #d6e9f5; }
.app-footer a { color: #fff; }
.footer-actions { display: flex; gap: 6px; }

.first-use { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: 18px; background: rgb(2 22 36 / 75%); }
.first-use[hidden] { display: none; }
.first-use > div { width: min(460px, 100%); background: #fff; border-radius: 12px; padding: 22px; box-shadow: 0 12px 34px rgb(0 0 0 / 35%); }
.first-use h2 { margin-top: 0; color: #123a5f; }
.first-use button { margin: 3px; }

@media (max-width: 760px) {
  .app-header { gap: 7px; }
  .app-brand img { width: 32px; height: 32px; }
  .app-brand small { display: none; }
  .network-state { font-size: .72rem; }
  .location-panel { padding: 5px 7px; }
  .location-actions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .location-actions > * { flex: 0 0 auto; }
  .location-form { grid-template-columns: 1fr 1fr; }
  .location-form button { align-self: end; }
  .location-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sky-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .sky-info { max-height: 30dvh; border-left: 0; border-top: 1px solid #355d79; padding: 9px 12px; }
  .orientation-controls { grid-template-columns: minmax(170px, 1fr) minmax(120px, .7fr); align-items: center; }
  .orientation-controls button { grid-column: 1; grid-row: 1 / span 2; }
  .orientation-controls label, .orientation-controls input { grid-column: 2; }
  .orientation-controls .orientation-status { grid-column: 1 / -1; }
  .sky-info ol { display: flex; gap: 6px; overflow-x: auto; list-style: none; padding: 0; margin: 7px 0; }
  .sky-info li { flex: 0 0 170px; }
  .explanation { display: none; }
  .sonde-details { top: 62px; max-height: calc(100dvh - 145px); }
  .app-footer { padding-inline: 8px; }
  .map-legend { right: 6px; bottom: 6px; }
}

@media (max-width: 430px) {
  .back-link { font-size: 0; }
  .back-link::after { content: "‹"; font-size: 1.5rem; }
  .app-brand strong { font-size: .9rem; }
  .location-actions button, .location-actions label { font-size: .78rem; min-height: 38px; }
  .location-form { grid-template-columns: 1fr 1fr 1fr; }
  .location-form button { grid-column: 1 / -1; }
  .app-footer { grid-template-columns: minmax(0, 1fr) auto; }
  .app-footer small { font-size: .67rem; }
  .footer-actions button { padding-inline: 8px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}