/* Pardori Outdoor, UI variant B "lišta a karty": a top bar with the 2D/3D switch,
   a bottom bar (desktop: a left rail) with four tabs that each open one
   section in a sheet (desktop: a side panel). Two themes from the PARDORI
   identity, Smrek (light) and Hlbina (dark); theme.js sets data-theme. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("vendor/plex/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("vendor/plex/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("vendor/plex/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("vendor/plex/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("vendor/plex/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("vendor/plex/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-024F; }

:root,
:root[data-theme="smrek"] {
  --paper: #f3f0e8;
  --card: #faf8f2;
  --band: #e9e4d8;
  --ink: #0f2e31;
  --soft: #4a5f61;
  --rule: #d8d2c3;
  --input-border: #c3bba8;
  --accent: #1f7f83;
  --accent-text: #176b6f;
  --amber: #d9962f;
  --on-accent: #ffffff;
  --shadow: 0 6px 24px rgba(15, 46, 49, 0.18), 0 1px 3px rgba(15, 46, 49, 0.12);
  --scrim: rgba(15, 46, 49, 0.18);
  --ctrl-invert: 0; /* MapLibre's own dark icons (attribution) */
  color-scheme: light;
}
:root[data-theme="hlbina"] {
  --paper: #1f2a36;
  --card: #283544;
  --band: #1a232d;
  --ink: #e6edf2;
  --soft: #9fb0bd;
  --rule: #ffffff1a;
  --input-border: #7f8f9c;
  --accent: #4fb3c4;
  --accent-text: #4fb3c4;
  --amber: #e6a06a;
  --on-accent: #0a0f14;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --scrim: rgba(10, 15, 20, 0.35);
  --ctrl-invert: 1;
  color-scheme: dark;
}
:root {
  --top-h: 56px;
  --nav-h: 68px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font: 15px/1.4 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible, .row.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 18px; height: 18px; }

/* ---- layout. Phone: top bar, the view, bottom bar; the sheet floats above
   the bottom bar. Desktop: top bar over a rail, the panel and the view.
   The 3D view has no bottom bar (its toolbar has Vrstvy and Viac); with the
   controls hidden (the floating button) neither bar is shown; while typing
   in the point editor on a phone neither is either (the keyboard is up). */
body {
  --bar-top: calc(var(--top-h) + var(--safe-top));
  --bar-bottom: calc(var(--nav-h) + var(--safe-bottom));
  --rail-w: 84px;
  display: grid;
  grid-template: "top" var(--bar-top) "main" 1fr "nav" var(--bar-bottom) / 1fr;
}
body.in-3d { --bar-bottom: 0px; --rail-w: 0px; }
body.controls-hidden { --bar-top: 0px; --bar-bottom: 0px; --rail-w: 0px; }
body.in-3d #navbar, body.controls-hidden :is(#topbar, #navbar) { display: none; }
@media (max-width: 899px) {
  body.typing { --bar-top: 0px; --bar-bottom: 0px; }
  /* (the map controls too: the short view would fold the rail over the chip) */
  body.typing :is(#topbar, #navbar, .fab, #info, #view-map .maplibregl-ctrl-top-right) { display: none; }
}
#topbar {
  grid-area: top;
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--safe-top) 8px 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
.brand .ic { color: var(--accent-text); }
#topbar .seg { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); }
.brand { min-width: 0; }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the Android app draws its menu button at the right end of the bar */
:root[data-host="android"] #topbar { padding-right: 60px; }
/* a phone: the switch right of the name, which does not fit beside a centred one */
@media (max-width: 560px) { #topbar .seg { position: static; transform: none; margin-left: auto; flex: none; } }
#views { grid-area: main; position: relative; min-height: 0; min-width: 0; }
.view { position: absolute; inset: 0; overflow: hidden; }

#navbar {
  grid-area: nav;
  position: relative;
  z-index: 30;
  display: flex;
  padding-bottom: var(--safe-bottom);
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
#navbar button {
  flex: 1;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--soft);
}
#navbar .pill { width: 60px; height: 30px; border-radius: 999px; display: grid; place-items: center; }
#navbar button[aria-expanded="true"] { color: var(--ink); font-weight: 600; }
#navbar button[aria-expanded="true"] .pill { background: var(--band); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-text); }

#scrim { position: fixed; left: 0; right: 0; top: var(--bar-top); bottom: var(--bar-bottom); z-index: 19; background: var(--scrim); }
#sheet {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: max(var(--bar-bottom), var(--safe-bottom));
  max-height: calc(100% - var(--bar-top) - max(var(--bar-bottom), var(--safe-bottom)) - 48px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
#sheet .handle { flex: none; height: 24px; display: grid; place-items: center; touch-action: none; cursor: grab; }
#sheet .handle::before { content: ""; width: 40px; height: 5px; border-radius: 999px; background: var(--input-border); opacity: 0.7; }
.sheet-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 8px 8px 16px; }
.sheet-head h2 { margin: 0; font-size: 18px; font-weight: 600; flex: 1; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 12px; }

@media (min-width: 900px) {
  body {
    grid-template:
      "top top top" var(--bar-top)
      "nav sheet main" 1fr
      / var(--rail-w) auto 1fr;
  }
  #navbar { flex-direction: column; gap: 6px; padding: 12px 0 0; border-top: 0; border-right: 1px solid var(--rule); }
  #navbar button { flex: none; height: 64px; }
  #scrim { display: none !important; }
  #sheet {
    grid-area: sheet;
    position: relative;
    z-index: 10;
    inset: auto;
    width: 360px;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid var(--rule);
  }
  #sheet .handle { display: none; }
  .sheet-head { padding-top: 14px; }
}

/* ---- controls */
.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--band);
  border: 1px solid var(--rule);
}
.seg button {
  position: relative;
  min-width: 44px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--soft);
  font-weight: 500;
}
/* 44 px touch target around the 38 px pill */
.seg button::after { content: ""; position: absolute; inset: -3px 0; }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; min-width: 0; height: 44px; padding: 0 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button:disabled { opacity: 0.45; cursor: default; }

.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--soft); }
.icon-btn.confirm { width: auto; padding: 0 12px; color: var(--amber); font-weight: 600; font-size: 13px; }

.section { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 0 14px 6px; }
.row { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--rule); }
.row:first-child, .sub-head + .row, .sub-head + div > .row:first-child { border-top: 0; }
.row .label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.row .label small { display: block; color: var(--soft); font-size: 12.5px; }
.row .label small.warn { color: var(--ink); font-weight: 600; }
.row > .ic, .row .top > .ic { color: var(--soft); }
label.row, label.top { cursor: pointer; }
.row.stack { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0; }
.row.stack .top { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.row.sub { padding-left: 34px; }
.row.link { width: 100%; text-align: left; border-left: 0; border-right: 0; border-bottom: 0; background: none; padding: 6px 0; }
/* Nastavenia at the end of Viac: a row that opens the section */
.settings-head { margin-top: 6px; font-weight: 600; color: var(--ink); }
.settings-head > .ic:last-child { color: var(--soft); transition: transform 0.15s; }
.settings-head[aria-expanded="true"] > .ic:last-child { transform: rotate(180deg); }
#settings > .row:first-child { border-top: 1px solid var(--rule); }
.row.off, .off .row { opacity: 0.5; }
.value { color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.value.soft { color: var(--soft); font-weight: 500; }
.note { color: var(--soft); font-size: 12.5px; margin: 6px 0 8px; overflow-wrap: anywhere; }
.note:empty { display: none; }
.row.stack .note { margin: 0; }
.sub-head { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); margin: 14px 0 2px; }
.sub-head:first-child { margin-top: 10px; }

input.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: var(--band);
  border: 1.5px solid var(--input-border);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
input.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: var(--soft);
  transition: left 0.15s;
}
input.switch:checked { background: var(--accent); border-color: var(--accent); }
input.switch:checked::after { left: 21px; background: var(--on-accent); }
input.switch:disabled { opacity: 0.45; cursor: default; }

.select { position: relative; display: flex; align-items: center; min-width: 0; }
.select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 38px 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--input-border);
  background: var(--paper);
  color: var(--ink);
  text-overflow: ellipsis;
}
.select .ic { position: absolute; right: 12px; pointer-events: none; color: var(--soft); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair label { font-size: 12.5px; color: var(--soft); display: block; margin: 0 0 4px 4px; }

/* Sliders: the filled part comes from --fill (set by app.js). */
input.slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  background: transparent;
  --fill: 50%;
}
input.slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill), var(--band) var(--fill)); }
input.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
input.slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--band); }
input.slider::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
input.slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: var(--card); border: 2px solid var(--accent); }

.swatch { width: 18px; height: 18px; border-radius: 6px; flex: none; border: 1px solid rgba(0, 0, 0, 0.12); }
.badge { display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--band); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.badge.miss { background: var(--band); color: var(--soft); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent-text);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.block { display: flex; width: 100%; margin: 8px 0 6px; }
.btn.small { padding: 0 14px; }
.btn:disabled { opacity: 0.5; cursor: default; }
progress { width: 100%; height: 8px; accent-color: var(--accent); }

/* My layers: colour dot (a colour input), name, switch, delete */
input.color { width: 44px; height: 44px; flex: none; padding: 11px; border: 0; background: none; cursor: pointer; }
input.color::-webkit-color-swatch-wrapper { padding: 0; }
input.color::-webkit-color-swatch { border: 2px solid var(--card); border-radius: 999px; box-shadow: 0 0 0 1px var(--rule); }
input.color::-moz-color-swatch { border: 2px solid var(--card); border-radius: 999px; }
.layer .label { cursor: pointer; }
.layer .label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.layer { gap: 4px; }
.switch-hit { display: grid; place-items: center; height: 48px; padding: 0 4px 0 8px; cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- map view */
#maps { position: absolute; inset: 0; overflow: hidden; }
.map { position: absolute; inset: 0; }
/* The compare map only mirrors the main one: every gesture goes to #map. */
#map2 { clip-path: inset(0 0 0 50%); pointer-events: none; }

.chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.chip b, #info-elev { color: var(--ink); font-weight: 600; }
.chip.wrap { padding: 5px 12px; border-radius: 15px; line-height: 1.35; }
#info { left: 12px; top: 12px; }
#info-zoom::before { content: "·"; margin-right: 6px; }

#split { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 3; }
#split::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5px;
  width: 3px;
  background: var(--card);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
#split .handle {
  position: absolute;
  top: 50%;
  left: -22px;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
#compare-labels {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 0 68px 0 12px;
  pointer-events: none;
}
#compare-labels span {
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--ink);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Selection frame: fixed box, the map moves under it. The huge shadow dims
   the area outside. Only the corners take pointer events. */
#frame {
  position: absolute;
  z-index: 2;
  border: 2px solid #fff;
  outline: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 100vmax var(--scrim);
  pointer-events: none;
}
#frame-size {
  position: absolute;
  left: -2px;
  top: -30px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
#frame .corner {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 4px;
  pointer-events: auto;
  touch-action: none;
}
/* a finger needs a bigger handle (and a 44 px target around it) */
#frame .corner::after { content: ""; position: absolute; inset: -12px; }
#frame .corner.t { top: -10px; }
#frame .corner.b { bottom: -10px; }
#frame .corner.l { left: -10px; }
#frame .corner.r { right: -10px; }
@media (pointer: coarse) {
  #frame .corner { width: 24px; height: 24px; border-radius: 6px; }
  #frame .corner.t { top: -13px; }
  #frame .corner.b { bottom: -13px; }
  #frame .corner.l { left: -13px; }
  #frame .corner.r { right: -13px; }
}
#frame .corner.t.l, #frame .corner.b.r { cursor: nwse-resize; }
#frame .corner.t.r, #frame .corner.b.l { cursor: nesw-resize; }

/* ---- MapLibre chrome, themed: our icons in round groups, 44 px targets */
.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 12px 12px 0 0; }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0 0 12px 12px; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 12px 12px 0; }
.maplibregl-ctrl-group { background: var(--card); border-radius: 999px; overflow: hidden; }
.maplibregl-ctrl-group:not(:empty) { box-shadow: var(--shadow); }
.maplibregl-ctrl-group button { width: 44px; height: 44px; color: var(--ink); }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--rule); }
/* MapLibre's own images (per state) have higher specificity: drop them all. */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { background-image: none !important; display: grid; place-items: center; animation: none; }
/* our GPS button (app.js): following the position, waiting for the first fix, no GPS */
.gps-btn { display: grid; place-items: center; }
.gps-btn.waiting .ic { animation: locus-pulse 1.2s ease-in-out infinite; }
@keyframes locus-pulse { 50% { opacity: 0.35; } }
.maplibregl-ctrl button:not(:disabled):hover { background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.maplibregl-ctrl-group button.gps-btn.follow { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.maplibregl-ctrl-group button.gps-btn.error { color: var(--amber); }
.maplibregl-ctrl-scale {
  background: var(--card);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border-color: var(--ink);
  color: var(--ink);
  font-size: 11px;
}
.maplibregl-ctrl.maplibregl-ctrl-attrib { background: var(--card); background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--soft); }
.maplibregl-ctrl-attrib a { color: var(--soft); }
.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.maplibregl-ctrl-attrib-button { filter: invert(var(--ctrl-invert)); }
.maplibregl-popup-content { background: var(--card); color: var(--ink); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--card); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--card); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--card); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--card); }
.maplibregl-popup-close-button { width: 44px; height: 44px; font-size: 22px; color: var(--soft); border-radius: 999px; }
.feature-popup { padding-right: 30px; }
.feature-popup p { margin: 4px 0 0; white-space: pre-wrap; max-height: 160px; overflow-y: auto; font-size: 13px; color: var(--soft); }
.popup-offer { display: flex; flex-direction: column; gap: 6px; margin: 6px 36px 0 0; }
.popup-offer .btn { justify-content: flex-start; gap: 8px; }
/* opened from Locus Map: a pin with its tag, for 30 s */
.locus-marker { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.locus-marker .tag { padding: 2px 8px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
.locus-marker .pin { width: 3px; height: 14px; background: var(--ink); }
.locus-marker .pin::after { content: ""; display: block; width: 12px; height: 12px; margin: 12px 0 0 -4.5px; border-radius: 999px; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
/* #map2 paints above #map (clip-path makes a stacking context): keep the
   main map's popups on top in compare mode. */
#map .maplibregl-popup { z-index: 3; }

/* the GPS position, the heading and the crosshair over the maps (position-2d.js) */
.pos-layer { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; color: var(--accent); }
.pos-layer.weak { color: var(--amber); }
.pos-layer .acc { fill: rgba(26, 115, 232, 0.12); stroke: rgba(26, 115, 232, 0.5); stroke-width: 1; }
.pos-layer .ray-halo { stroke: rgba(255, 255, 255, 0.75); stroke-width: 3.5; stroke-linecap: round; }
.pos-layer .ray { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.pos-layer :is(.ray-vis, .ray-hid, .ray-far) { fill: none; stroke-linecap: round; }
/* the sight line (round 8): full where the ground is seen, thin grey where hidden, faint beyond its range */
.pos-layer .ray-vis { stroke: currentColor; stroke-width: 2.5; }
.pos-layer .ray-hid { stroke: #7d848c; stroke-width: 1.2; }
.pos-layer .ray-far { stroke: currentColor; stroke-width: 1.2; stroke-opacity: 0.45; }
.pos-layer .cone { fill: url(#pos-cone-fill); stroke: currentColor; stroke-width: 1; stroke-opacity: 0.7; }
.pos-layer .dot { fill: #1a73e8; stroke: #fff; stroke-width: 2.5; }
.crosshair { position: absolute; z-index: 2; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; pointer-events: none; }
.crosshair svg { display: block; width: 32px; height: 32px; overflow: visible; fill: none; stroke-linecap: round; }
.crosshair path { stroke: #1a1a1a; stroke-width: 1.5; }
.crosshair path.halo { stroke: rgba(255, 255, 255, 0.85); stroke-width: 4; }
.crosshair-label {
  position: absolute;
  left: 30px;
  top: -14px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ---- Skryť ovládače: the floating button (controls-toggle.js places it) */
.fab {
  position: fixed;
  z-index: 18; /* over the views, under the scrim and the sheet */
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.fab[aria-pressed="true"] { color: var(--accent-text); }
.fab.dragging { box-shadow: 0 0 0 3px var(--accent), var(--shadow); cursor: grabbing; }
/* hidden: everything but this button, the "i" buttons and the map's content
   (and the one-hand strips in 3D, at the edges: see .hand-strip) */
body.controls-hidden :is(.toolbar, .popover, .area-bar, .edge-handle, #info, .chips3d, #compass, #tool-rail-3d, #strip, .tool-chip, #compare-labels, #view-map .maplibregl-ctrl-top-right, #view-map .maplibregl-ctrl-bottom-left) { display: none !important; }

/* ---- 3D view */
#scene { position: absolute; inset: 0; touch-action: none; }
#scene canvas { display: block; }
.chips3d { position: absolute; z-index: 4; left: 12px; top: 12px; right: 68px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.chips3d .chip { position: static; }
.chips3d .chip:empty { display: none; }

#compass {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  pointer-events: none;
}
#compass::before {
  /* the needle, pointing to north */
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom: 15px solid #c8102e;
  border-top: 0;
}
#compass span { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 11px; font-weight: 700; color: var(--ink); }

.toolbar {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  max-width: calc(100% - 16px);
  padding: 4px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.toolbar button {
  flex: 1 1 0;
  min-width: 44px;
  max-width: 64px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10.5px;
  line-height: 1.1;
  color: var(--soft);
  white-space: nowrap;
}
/* Eight or nine buttons (with Kde som, and Viac: the 3D view has no bottom
   bar): full width up to 520 px, smaller labels on a phone. */
.toolbar { width: calc(100% - 16px); max-width: 520px; }
/* nine buttons on a 360 px phone: about 38 px each (the toolbar is still one tap high) */
@media (max-width: 480px) { .toolbar { gap: 0; } .toolbar button { min-width: 0; font-size: 9.5px; } }
.toolbar button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.toolbar button[aria-pressed="true"] .ic { color: var(--on-accent); }
.toolbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.toolbar button .ic { color: var(--ink); }
.toolbar button[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.toolbar button[aria-expanded="true"] .ic { color: var(--accent-text); }
.popover {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(84px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(280px, calc(100% - 24px));
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.popover .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-weight: 600; }
.popover .ends { display: flex; justify-content: space-between; color: var(--soft); font-size: 12.5px; }
.popover .opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  text-align: left;
}
.popover .opt:first-child { border-top: 0; }
.popover .opt span { flex: 1; }
.popover .opt .ic { color: var(--accent-text); visibility: hidden; }
.popover .opt[aria-checked="true"] { color: var(--accent-text); font-weight: 600; }
.popover .opt[aria-checked="true"] .ic { visibility: visible; }

/* ---- busy: a spinner in the 2D chip, a bar at the top of the 3D view */
.spinner {
  display: none;
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: locus-spin 0.8s linear infinite;
}
#info.busy .spinner { display: block; }
#info.busy > .ic { display: none; }
@keyframes locus-spin { to { transform: rotate(360deg); } }
.progress {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  overflow: hidden;
  background: var(--band);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.progress .bar { height: 100%; width: var(--p, 0%); background: var(--accent); transition: width 0.2s; }
.progress.indeterminate .bar { width: 30%; animation: locus-slide 1.1s ease-in-out infinite; }
@keyframes locus-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.toolbar button:disabled { opacity: 0.4; cursor: default; }

/* ---- 3D billboards (labels3d.js): a name in a small themed box, an icon
   (legend sprite) or a dot (imported point) on the anchor below it, or a
   leader when there is no icon; the GPS position as a blue dot */
.labels3d { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.lbl3d { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lbl3d .name {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.lbl3d .name.strong { font-weight: 600; font-size: 13px; }
.lbl3d small { font-size: 11px; font-weight: 500; color: var(--soft); }
.lbl3d .name.lead { margin-bottom: 10px; }
.lbl3d .name.lead::after {
  /* the leader down to the anchor, with a dot */
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 10px;
  margin-left: -0.75px;
  background: var(--ink);
  opacity: 0.7;
}
.lbl3d .name.lead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 999px;
  background: var(--ink);
}
.icon3d { display: block; width: 18px; height: 18px; background-repeat: no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45)); }
.dot3d { display: block; width: 12px; height: 12px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.gps3d { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 1; }
.gps3d .dot { position: absolute; inset: 4px; border-radius: 999px; background: #1a73e8; border: 2.5px solid #fff; box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25), 0 1px 3px rgba(0, 0, 0, 0.5); }
/* the accuracy under the dot (the heading lies on the surface, model3d.js) */
.gps3d .acc { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: var(--card); background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--ink); font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.gps3d .acc:empty { display: none; }

/* ---- 3D: the model's state behind "i", bottom right above the toolbar
   (the 2D map's attribution works the same way) */
#about3d {
  position: absolute;
  z-index: 5;
  left: 68px; /* clear of the floating button's first place */
  right: 12px;
  bottom: calc(84px + var(--safe-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}
#about3d .chip { position: static; max-width: calc(100% - 44px); pointer-events: auto; }
.info-btn { flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--card); color: var(--soft); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); pointer-events: auto; position: relative; }
.info-btn::after { content: ""; position: absolute; inset: -6px; } /* a 44 px target */
.info-btn[aria-expanded="true"] { color: var(--accent-text); }
body.strip-open #about3d { bottom: calc(var(--strip-h, 0px) + 84px); }
body.controls-hidden #about3d { bottom: calc(12px + var(--safe-bottom)); }

/* ---- tap info */
.info-type { margin: 12px 0 4px; font-weight: 600; color: var(--accent-text); }
.info-desc { margin: 4px 0 8px; white-space: pre-wrap; color: var(--soft); font-size: 13px; }
.info-tags { border-top: 1px solid var(--rule); padding: 10px 0 6px; }
.info-tags summary { min-height: 32px; cursor: pointer; font-weight: 500; color: var(--soft); }
.info-tags dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0 0; font-size: 13px; }
.info-tags dt { color: var(--soft); }
.info-tags dd { margin: 0; overflow-wrap: anywhere; }

/* ---- what applies where (app.js markScope): the controls of the other view
   are inert and dimmed under a one-line hint; in 3D the texture comes first */
.scope { display: none; margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--soft); }
body:not(.in-3d) .only3d > .scope, body.in-3d .only2d > .scope { display: block; }
body:not(.in-3d) .only3d > :not(.scope), body.in-3d .only2d > :not(.scope) { opacity: 0.45; }
#sec-map { display: flex; flex-direction: column; }
#sec-map[hidden] { display: none; }
#texture-block { order: 1; }
body.in-3d #texture-block { order: -1; border-top: 0; }
.scope-all { margin: 10px 0 2px; }
/* Mapa card dividers: between the blocks in the order shown (the texture
   moves up in 3D), none above the first */
#sec-map .row { border-top: 0; }
#sec-map > :is(*, .row) { border-top: 1px solid var(--rule); }
body.in-3d #texture-block, body:not(.in-3d) #base-block { border-top: 0; }
.popover .top + .opt { border-top: 0; }

/* ---- a map tool's chip (e.g. Viditeľnosť) over both views: what to tap or
   the result, and a cross that ends the tool */
.tool-chip {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content; /* not only the right half of the view (left: 50%) */
  max-width: calc(100% - 24px);
  min-height: 44px;
  padding: 0 4px 0 14px;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  box-shadow: var(--shadow);
}
.tool-chip > .ic { color: var(--accent-text); }
/* two lines at most, so the instruction never disappears */
#vs-chip-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 4px 0; }
/* (in 3D above the toolbar and the "i" at its right end) */
body.in-3d .tool-chip { bottom: calc(124px + var(--safe-bottom)); }
body.strip-open .tool-chip { bottom: calc(var(--strip-h, 0px) + 12px); }
body.strip-open.in-3d .tool-chip { bottom: calc(var(--strip-h, 0px) + 124px); }
/* the selection buttons and the 3D popovers sit where the chip is */
body.selecting .tool-chip, body.popover-open .tool-chip, body.area-edit .tool-chip { display: none; }

/* ---- the download form (Oblasti, Android) */
input.text {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--input-border);
  background: var(--paper);
  color: var(--ink);
}
/* readable on both themes: ink text, the warning colour as a bar */
.note.error { color: var(--ink); font-weight: 600; border-left: 3px solid var(--amber); padding-left: 8px; }
.row.download progress { margin: 2px 0 4px; }


/* ---- OSM legend: one row (switch and chevron), the groups when expanded */
.legend-row .label { cursor: pointer; }
.legend-row .chevron { margin-right: -10px; }
.legend-row .chevron .ic { transition: transform 0.15s; }
.legend-row .chevron[aria-expanded="true"] .ic { transform: rotate(180deg); }

/* ---- map tools (tools.js): the rail of icon buttons and the strip at the
   bottom of the view with the open tool's controls */
.rail-btn { position: relative; display: grid; place-items: center; }
.rail-btn[aria-pressed="true"] { background: var(--accent) !important; }
.rail-btn[aria-pressed="true"] .ic { color: var(--on-accent); }
#tool-rail-3d {
  position: absolute;
  z-index: 4;
  top: 68px;
  right: 12px;
  display: flex;
  flex-direction: column;
  border-radius: 999px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
#tool-rail-3d .rail-btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; }
#tool-rail-3d .rail-btn + .rail-btn { border-top: 1px solid var(--rule); }

.strip {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  max-height: 55%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 2px 8px 12px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
}
.strip-body { flex: 1; min-width: 0; }
.strip > .icon-btn { margin: -4px 0 -4px auto; }
.strip-text { flex: 1; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.strip-slider { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.strip-slider .label { color: var(--soft); font-size: 12.5px; flex: none; }
.strip-slider .slider { flex: 1; min-width: 0; }
.strip-slider .value { flex: none; min-width: 42px; text-align: right; }
/* the map's own controls (scale, attribution), the 3D toolbar and its
   popovers move up over an open strip */
@media (max-width: 699px) { body.strip-open #view-map .maplibregl-ctrl-bottom-left, body.strip-open #view-map .maplibregl-ctrl-bottom-right { bottom: var(--strip-h, 0px); } }
body.strip-open .toolbar { bottom: calc(var(--strip-h, 0px) + 12px); }
body.strip-open :is(.popover, .area-bar) { bottom: calc(var(--strip-h, 0px) + 80px); }
@media (min-width: 700px) { .strip { left: 50%; right: auto; width: 640px; transform: translateX(-50%); } }
/* typing in the point editor: the strip above the keyboard, taller (app.js
   sets --kb when the keyboard lies over the page) */
@media (max-width: 899px) { body.typing .strip { bottom: var(--kb, 0px); max-height: calc((100% - var(--kb, 0px)) * 0.9); } }
/* a phone on its side: zoom, GPS and the rail side by side, not one column */
@media (max-height: 480px) {
  .maplibregl-ctrl-top-right { display: flex; flex-direction: row-reverse; align-items: flex-start; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl { margin-left: 0; }
  #tool-rail { display: flex; }
  #tool-rail .rail-btn + .rail-btn { border-top: 0; border-left: 1px solid var(--rule); }
  #tool-rail-3d { flex-direction: row; top: 12px; right: 68px; }
  #tool-rail-3d .rail-btn + .rail-btn { border-top: 0; border-left: 1px solid var(--rule); }
}

/* area: the size, Zrušiť, Potvrdiť in one row */
#strip-area:not([hidden]) { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 8px; }

/* sun: date, time, Teraz in the first row; the dial and the day slider in
   the second (the module's parts as grid items); the notes under them */
#strip-sun:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pick pick" "dial day" "note note"; gap: 6px 12px; align-items: center; }
#strip-sun #sun-panel, #strip-sun .sun-panel { display: contents; }
.sun-dial { grid-area: dial; display: flex; align-items: center; gap: 6px; }
.sun-dial svg { width: 44px; height: 44px; flex: none; overflow: visible; }
.sun-dial .rim { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--rule); stroke-width: 1.5; }
.sun-dial .mid { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 2; }
.sun-dial .north { font: 600 8px/1 "IBM Plex Sans", sans-serif; fill: var(--soft); text-anchor: middle; }
.sun-dial .ray { stroke: #e9a400; stroke-width: 2; stroke-linecap: round; }
.sun-dial .sun { fill: #f5b800; stroke: #8a5a00; stroke-width: 1; }
.sun-dial.below .ray { stroke: var(--soft); stroke-dasharray: 2 2; }
.sun-dial.below .sun { fill: var(--paper); stroke: var(--soft); }
.sun-dial .deg { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
#sun-notes { grid-area: note; margin: 0; }
#strip-sun .sun-pickers { grid-area: pick; flex-wrap: wrap; align-items: center; gap: 6px; } /* wraps only with a large system font */
#strip-sun .sun-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#strip-sun .sun-field, #strip-sun .sun-field:first-child { flex: none; min-width: 0; }
/* the WebView gives a time input 140 px by default: sized, all three fit at 360 px */
#strip-sun .sun-field input { height: 40px; padding: 0 6px; font-size: 14px; }
#strip-sun .sun-field:first-child input { width: 130px; }
#strip-sun .sun-field:nth-child(2) input { width: 90px; }
#strip-sun .sun-now { flex: none; height: 40px; padding: 0 12px; }
#strip-sun .sun-day { grid-area: day; min-width: 0; }
#strip-sun .sun-day-top { display: none; }
#strip-sun input.slider.sun-slider { margin: 0; height: 30px; }
#strip-sun .sun-marks { height: 15px; font-size: 11px; }
#strip-sun .sun-readout { display: none; } /* the dial shows the position */

/* the sun on the 2D map: the arrow from the view centre, the night */
.sun-arrow { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.sun-arrow[hidden] { display: none; }
.sun-arrow line { stroke-linecap: round; }
.sun-arrow .halo { stroke: rgba(20, 16, 6, 0.55); stroke-width: 7; }
.sun-arrow .shaft { stroke: #f5b800; stroke-width: 3.5; }
.sun-arrow .head { fill: #f5b800; stroke: rgba(20, 16, 6, 0.55); stroke-width: 1.5; }
.sun-arrow .disc { fill: #ffd84a; stroke: rgba(20, 16, 6, 0.6); stroke-width: 1.5; }
.sun-arrow.below .shaft { stroke: #9aa3b5; stroke-dasharray: 8 6; }
.sun-arrow.below :is(.head, .disc) { fill: #9aa3b5; }
.night-shade { position: absolute; inset: 0; z-index: 1; background: #03060c; opacity: 0; pointer-events: none; transition: opacity 0.15s; }

/* canopy: the note (or the tapped height), the opacity and the legend */
#strip-canopy:not([hidden]) { display: flex; flex-direction: column; gap: 4px; min-height: 44px; justify-content: center; }
#strip-canopy .strip-text { margin: 0; padding: 4px 0; font-weight: 600; }
#canopy-body:not([hidden]) { display: flex; flex-direction: column; gap: 2px; }
#strip-canopy .canopy-legend-title { display: none; }

/* canopy: the relief with vegetation (a terrain setting) under the note */
.relief-rows { display: flex; flex-wrap: wrap; gap: 0 16px; }
.relief-row { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 13.5px; }
.relief-row:has(input:disabled) { opacity: 0.5; cursor: default; }
#relief-note { margin: 0; }
#relief-note:empty { display: none; }
/* a rail tool with a setting in force (the relief with vegetation) */
.rail-btn.marked::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 2px var(--card); }
.rail-btn.marked[aria-pressed="true"]::after { background: var(--on-accent); box-shadow: none; }

/* Filip's own points: the editor in the strip, the card, the list, 3D */
#strip-point:not([hidden]) { padding-right: 10px; }
#pt-form { display: flex; flex-direction: column; gap: 6px; }
#pt-form input.text { min-height: 44px; }
.pt-icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.pt-icon { height: 52px; padding: 0; border: 1.5px solid var(--input-border); border-radius: 12px; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; line-height: 1.1; min-width: 0; }
.pt-icon span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-icon[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.pt-colours { display: flex; gap: 2px; }
.pt-colour { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.pt-colour i { display: block; width: 26px; height: 26px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule); }
.pt-colour[aria-checked="true"] i { box-shadow: 0 0 0 2.5px var(--ink); }
#pt-error:empty { display: none; }
#pt-form .pair .btn { gap: 6px; }
.pt-sym { width: 26px; height: 26px; flex: none; }
.pt-type { display: flex; align-items: center; gap: 8px; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 4px; }
.pt-actions .btn { gap: 6px; padding: 0 12px; }
.pt-actions .btn.confirm { border-color: var(--amber); color: var(--ink); font-weight: 600; }
.pt-row { width: 100%; }
.pt3d { display: block; width: 24px; height: 24px; background-size: 100% 100%; }

/* slope: the mode, then the opacity and the legend */
#strip-slope:not([hidden]) { display: flex; flex-direction: column; gap: 4px; }
#strip-slope .seg button { height: 40px; }
#slope-body:not([hidden]) { display: flex; flex-direction: column; gap: 2px; }
#strip-slope .slope-legend-title { display: none; }
#strip-slope .slope-legend { font-size: 12px; }
#strip-slope .slope-legend-items, #strip-slope .slope-legend.aspect .slope-legend-items { display: flex; flex-wrap: wrap; gap: 4px 10px; }
#strip-slope .slope-legend-items i { width: 12px; height: 12px; }

/* viewshed: compact, the observer height, then the radius with Vymazať and
   Viac; expanded, the module's whole panel (target, curvature, line of
   sight, stats, profile) and the opacity */
#strip-vs .vs-panel .row { border-top: 0; }
#strip-vs:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
#strip-vs:not(.expanded) #vs-panel { display: contents; }
#strip-vs:not(.expanded) .vs-panel > :is(.note, .vs-stats, .vs-los, label.row, .row:has([data-vs="target"])) { display: none; }
#strip-vs:not(.expanded) .row:has([data-vs="observer"]) { grid-column: 1 / -1; padding: 0; }
#strip-vs:not(.expanded) .row:has([data-vs="observer"]) :is(.top, [data-vs="observer-range"]) { display: none; }
#strip-vs:not(.expanded) .row:has([data-vs="radius"]) { grid-column: 1; flex-direction: row; align-items: center; gap: 8px; padding: 0; }
#strip-vs:not(.expanded) .row:has([data-vs="radius"]) .top { order: 2; flex: none; min-height: 0; }
#strip-vs:not(.expanded) .row:has([data-vs="radius"]) .top .label { display: none; }
#strip-vs:not(.expanded) .row:has([data-vs="radius"]) .slider { order: 1; flex: 1; min-width: 0; }
#strip-vs .vs-clear { width: auto; min-height: 40px; margin: 0; padding: 0 12px; }
#strip-vs:not(.expanded) .vs-clear { grid-column: 2; }
#strip-vs:not(.expanded) #vs-more { display: none; }
#strip-vs .seg.wide button { height: 40px; }
#vs-expand { grid-column: 3; min-height: 40px; padding: 0 10px; gap: 4px; }
#vs-expand[aria-expanded="true"] .ic { transform: rotate(180deg); }
#strip-vs.expanded #vs-panel, #strip-vs.expanded #vs-more { grid-column: 1 / -1; }

/* ---- 3D: Oblasť (round 8): the area bar over the toolbar and the arrows
   on the model's edges (model3d.js places them in every frame) */
.area-bar {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(84px + var(--safe-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 6px 6px 8px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.area-bar[hidden] { display: none; }
.area-row { display: flex; align-items: center; gap: 6px; }
.area-bar .seg button { height: 40px; padding: 0 12px; } /* (44 px with the seg's ::after) */
.area-size { flex: 1; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; }
.area-new { flex-wrap: wrap; row-gap: 4px; }
.area-label { color: var(--soft); font-size: 12.5px; }
.chip-btn, .chip-group button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--input-border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}
.chip-btn:disabled, .chip-group button:disabled { opacity: 0.45; cursor: default; }
.chip-group { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; } /* (wraps to its own row with a large system font) */
.chip-group[hidden] { display: none; }
.chip-group > .ic { color: var(--accent-text); margin-right: 2px; }
.chip-group.off > .ic { color: var(--soft); }
.chip-group button { min-width: 44px; justify-content: center; padding: 0 9px; }
.chip-group button[aria-pressed="true"]:not(:disabled) { border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.area-hint { margin: 0; padding: 0 4px 2px; color: var(--soft); font-size: 12px; }
.edge-handle {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.edge-handle[hidden] { display: none; }
.edge-handle .ic { color: var(--on-accent); width: 24px; height: 24px; }
.edge-handle:active { filter: brightness(1.15); }

/* ---- 3D: one-hand strips (round 8): see-through, along the bottom above the
   toolbar and along the right edge under the rail */
.hand-strip {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.hand-strip[hidden] { display: none; }
.hand-strip.active { background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* (both as thick: --hand-w; the right one's length with the controls hidden: --hand-y-length, round 10b) */
#view-3d { --hand-w: 44px; --hand-y-length: 40%; }
.hand-strip.x { left: 64px; right: 64px; height: var(--hand-w); bottom: calc(84px + var(--safe-bottom)); }
.hand-strip.y { right: 12px; width: var(--hand-w); top: calc(var(--rail3d-bottom, 260px) + 16px); bottom: calc(140px + var(--safe-bottom)); }
.hand-strip.y .ic { transform: rotate(90deg); }
body.strip-open .hand-strip.x { bottom: calc(var(--strip-h, 0px) + 80px); }
body.strip-open .hand-strip.y { bottom: calc(var(--strip-h, 0px) + 136px); }
/* the area bar takes the bottom strip's place */
body.area-edit:not(.controls-hidden) .hand-strip.x { display: none; }
/* with the controls hidden (the eye button) they stay, at the very edges:
   the bottom one where the toolbar was, the right one short, in the lower
   part of the view where the thumb reaches, just above the info button
   (round 10b: the rest of the view is free) */
body.controls-hidden .hand-strip.x { bottom: calc(12px + var(--safe-bottom)); }
body.controls-hidden .hand-strip.y { top: auto; height: var(--hand-y-length); bottom: calc(60px + var(--safe-bottom)); }

/* ---- compact strips in 3D (round 8, #strip.compact): one row, the value
   and the main control; the chevron shows the rest */
#strip-expand[aria-expanded="true"] .ic { transform: rotate(180deg); }
.strip > #strip-expand { margin: -4px 0 -4px auto; }
.strip > #strip-expand:not([hidden]) + #strip-close { margin-left: 0; }
#strip.compact { padding-top: 4px; padding-bottom: 4px; }
/* sun: the dial with its degrees and the day slider */
#strip.compact #strip-sun:not([hidden]) { grid-template-areas: "dial day"; }
#strip.compact #strip-sun :is(.sun-pickers, #sun-notes) { display: none; }
/* slope: the mode only */
#strip.compact #slope-body { display: none; }
/* canopy: the note (or the tapped height) only */
#strip.compact #strip-canopy :is(.relief-rows, #relief-note, #canopy-body) { display: none; }
/* viewshed: the observer height and Vymazať */
#strip.compact #strip-vs .row:has([data-vs="radius"]), #strip.compact #vs-expand { display: none; }
#strip.compact #strip-vs .row:has([data-vs="observer"]) { grid-column: 1; }
#strip.compact #strip-vs .vs-clear { grid-column: 2 / -1; }

/* Nastavenia: the sight line's own switches under Smer pohľadu */
.row.sub { padding-left: 28px; }

/* ---- round 9: Profily, Nastavenia, Správa oblastí, Moje body */
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 10px; }
.chip-btn.profile { position: relative; padding: 0 14px; font-weight: 500; }
.chip-btn.profile[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.chip-btn.profile.add { border-style: dashed; color: var(--soft); }
.profile-panel { border: 1px solid var(--rule); border-radius: 12px; padding: 10px; margin-bottom: 8px; background: var(--paper); }
.profile-panel form { display: flex; flex-direction: column; gap: 8px; }
.profile-panel .pt-actions { padding: 0; }
.profile-panel .note { margin: 0; }
.row[hidden] { display: none !important; }

/* ---- round 10: Nastavenia with the profile bar pinned on top and collapsible
   groups (a header with the name, the summary of the values, a chevron) */
.profile-bar { position: sticky; top: 0; z-index: 3; margin: 0 -14px; padding: 6px 14px 0; background: var(--card); border-bottom: 1px solid var(--rule); border-radius: 16px 16px 0 0; }
.set-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; border-top: 1px solid var(--rule); background: none; text-align: left; font-weight: 600; }
.profile-bar + .set-group .set-head { border-top: 0; }
.set-head > .ic:first-child { color: var(--accent-text); }
.set-head .label { flex: 1; min-width: 0; }
.set-head .label small { display: block; color: var(--soft); font-size: 12.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-head > .ic:last-child { color: var(--soft); transition: transform 0.15s; }
.set-head[aria-expanded="true"] > .ic:last-child { transform: rotate(180deg); }
.set-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.set-body { padding: 0 0 8px; }
.set-body > .row:first-child, .set-body > label.row:first-child { border-top: 1px solid var(--rule); }
.set-body .sub-head { margin-top: 12px; }
/* Tieňovanie: three choices that fit a phone; the strength rests while it is off */
:is(#shading, #set-shading).seg.wide button { font-size: 13px; padding: 0 2px; }
.shading-strength.off { opacity: 0.5; }

/* the toast after a change went into the profile: over the bottom of the card
   or the view, above the 3D toolbar and an open strip */
.toast { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar-bottom) + 12px); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px); padding: 6px 6px 6px 16px; border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow); font-weight: 500; }
.toast span { min-width: 0; }
.toast .btn { flex: none; background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 60%, transparent); }
body.in-3d .toast { bottom: calc(var(--safe-bottom) + 84px); }
body.strip-open .toast { bottom: calc(var(--bar-bottom) + var(--strip-h, 0px) + 12px); }
body.strip-open.in-3d .toast { bottom: calc(var(--strip-h, 0px) + 84px); }
/* (an open 3D popover keeps its choices: the toast goes to the top) */
body.popover-open .toast { top: calc(var(--bar-top) + 12px); bottom: auto; }

/* areas: the row's main part flies there, the ellipsis opens the menu */
.area-row { gap: 4px; }
.area-item { border-top: 1px solid var(--rule); }
.area-item:first-child { border-top: 0; }
.area-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; border: 0; background: none; text-align: left; }
.area-main .label small.sets { font-size: 11.5px; }
.area-actions { padding: 0 0 6px 34px; }
.area-actions .note { margin: 0 0 4px; }
.area-actions .btn.confirm { border-color: var(--amber); font-weight: 600; }
.area-rename { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px 34px; }
/* the old area inside the extend frame */
#frame-inner { position: absolute; z-index: 2; border: 2px dashed #fff; outline: 1px dashed rgba(0, 0, 0, 0.5); pointer-events: none; }

/* Moje body: search, sort, groups */
.pt-search { position: relative; display: flex; align-items: center; margin: 10px 0 8px; }
.pt-search .ic { position: absolute; left: 12px; color: var(--soft); pointer-events: none; }
.pt-search input.text { padding-left: 38px; }
#pt-sort { margin-bottom: 6px; }
.row.pt-group { font-weight: 600; gap: 10px; }
.row.pt-group > .ic:last-child { color: var(--soft); transition: transform 0.15s; }
.row.pt-group[aria-expanded="true"] > .ic:last-child { transform: rotate(180deg); }
.pt-group-body .row { padding-left: 8px; }
#pt-form input.text + input.text { margin-top: 0; }

/* the point card: photos and Zmeniť polohu */
.pt-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-thumb { width: 72px; height: 72px; padding: 0; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--band); display: grid; place-items: center; color: var(--soft); }
.pt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-thumb.add { border-style: dashed; border-width: 1.5px; background: var(--paper); }
.pt-thumb:disabled { opacity: 0.45; }
.pt-move { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
.pt-move .btn { gap: 6px; padding: 0 12px; }
#strip-move:not([hidden]) { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 8px; flex-wrap: wrap; }
#strip-move .strip-text { font-weight: 500; flex-basis: 100%; }
.photo-view { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; }
.photo-view img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.photo-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.photo-bar .icon-btn { color: #fff; }
.photo-bar .btn.confirm { border-color: var(--amber); font-weight: 600; }
.photo-bar .btn { color: #fff; border-color: rgba(255, 255, 255, 0.8); }

/* ---- round 11: the point panel (point-panel.js), a name label grown into a
   small card: on the map a MapLibre marker on the point (.pp2d, the icon's
   centre on it), in 3D the billboard itself (labels3d.js). The name box with
   its lines above the icon, no pointer events (a drag through it moves the
   map or orbits; a tap in it opens the full card), a short scale-in (not
   again when only its text changes: .steady); the crosshair's own distance
   steps aside meanwhile */
.pp2d { z-index: 2; pointer-events: none; }
.pp2d .lbl3d { position: relative; }
.lbl3d.panel { z-index: 1; }
.lbl3d.panel .name {
  max-width: 200px;
  padding: 3px 8px 4px;
  background: var(--card);
  white-space: normal;
  text-align: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 100%;
  animation: pp-in 150ms ease-out;
}
.lbl3d.panel.steady .name { animation: none; }
.lbl3d.panel .name > span { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.lbl3d.panel small { font-size: 11.5px; line-height: 1.25; overflow-wrap: anywhere; }
.lbl3d.panel .pp-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; color: var(--ink); font-weight: 400; }
.lbl3d.panel .pp-dist { color: var(--accent-text); }
@keyframes pp-in { from { opacity: 0; transform: scale(0.9) translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .lbl3d.panel .name { animation: none; } }
body.cross-snap #view-map .crosshair-label { display: none; }
/* Karta pri krížiku: plain checkboxes in a 44 px target */
input.check { width: 22px; height: 22px; margin: 0 11px; flex: none; accent-color: var(--accent); }

/* ---- the sign-in screen of the hosted web (round 2, account.js): one card over the paper,
   the app's bars stay hidden behind it; both themes through the tokens */
.signin {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background: var(--paper);
}
html.signin-open #topbar, html.signin-open #navbar, html.signin-open #views, html.signin-open #sheet { visibility: hidden; }
.signin-card {
  width: 100%;
  max-width: 400px;
  padding: 24px 22px 18px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.signin-brand { display: flex; align-items: center; gap: 8px; color: var(--accent-text); font-weight: 600; }
.signin h1 { margin: 18px 0 6px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.signin-lead { margin: 0 0 14px; color: var(--soft); }
.signin .btn.block { margin: 10px 0 4px; }
.signin-google { text-decoration: none; background: var(--paper); color: var(--ink); border-color: var(--input-border); }
.signin-google .g-logo { width: 20px; height: 20px; flex: none; }
.signin-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--soft); font-size: 13px; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.signin-label { display: block; margin: 0 0 6px; font-weight: 500; }
.signin #signin-status:not(:empty) { color: var(--ink); border-left: 3px solid var(--accent); padding-left: 8px; }
.signin-foot { margin: 14px 0 0; text-align: center; }
/* the app's first sign-in asks about the phone's points (round 4): the same card over the map */
.upload-ask { z-index: 1001; background: color-mix(in srgb, var(--ink) 40%, transparent); }
.upload-ask h1 { margin-top: 0; }