:root {
  color-scheme: light;
  --attention: #f2c230;
  --on-attention: #2b2304;
  --bg: #e7ece7;
  --surface: #fafbf7;
  --surface-2: #edf1e9;
  --line: #ced8cf;
  --ink: #183b34;
  --ink-2: #576c63;
  --brand: #123e38;
  --brand-soft: #d0e8a9;
  --accent: #b87829;
  --danger: #a62e43;
  --focus: #287b70;
  --river-1: #1e6671;
  --river-2: #498b91;
  --river-3: #79a8a8;
  --section: #e8650a;
  --section-casing: #ffffff;
  --section-draft: var(--ink-2);
  --river-selected: #0b84c4;
  --river-casing: #ffffff;
  --start: #157a3f;
  /* Filled controls: dark green in light mode, lime in dark mode, so a primary
     button and a selected choice never melt into the panel behind them. */
  --primary: var(--brand);
  --on-primary: var(--brand-soft);
  --danger-fill: #a62e43;
  /* Field outlines reach 3:1 against the panel; button outlines are softer. */
  --control-line: #84958c;
  --button-line: #a9b8ae;
  --parking: #1d4ed8;
  --route-exit: #475569;
  --live: #16a34a;
  --visit: #805019;
  --closed: var(--danger);
  --gear: #7a4fd0;
  --dam: var(--ink-2);
  --shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
/* Dark theme: follows the device unless the viewer chose light; or chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #172722;
    --surface: #20362f;
    --surface-2: #2a4038;
    --line: #496156;
    --ink: #edf4e8;
    --ink-2: #b4c4b8;
    --brand: #123e38;
    --brand-soft: #d0e8a9;
    --accent: #e9b16c;
    --danger: #fa8c9e;
    --focus: #9bd5bc;
    --river-1: #93c9d0;
    --river-2: #75aeb6;
    --river-3: #577f87;
    --river-selected: #4fc3f7;
    --river-casing: #0d1b17;
    --section: #ff7a1a;
    --route-exit: #cbd5e1;
    --parking: #3b82f6;
    --gear: #a78bfa;
    --primary: #d0e8a9;
    --on-primary: #123e38;
    --control-line: #8fa89b;
    --button-line: #6d8579;
    --visit: #c18c4d;
  }
  :root:not([data-theme='light']) .leaflet-background-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.72) saturate(0.55) contrast(0.9);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #172722;
  --surface: #20362f;
  --surface-2: #2a4038;
  --line: #496156;
  --ink: #edf4e8;
  --ink-2: #b4c4b8;
  --brand: #123e38;
  --brand-soft: #d0e8a9;
  --accent: #e9b16c;
  --danger: #fa8c9e;
  --focus: #9bd5bc;
  --river-1: #93c9d0;
  --river-2: #75aeb6;
  --river-3: #577f87;
  --river-selected: #4fc3f7;
  --river-casing: #0d1b17;
  --section: #ff7a1a;
  --route-exit: #cbd5e1;
  --parking: #3b82f6;
  --gear: #a78bfa;
    --primary: #d0e8a9;
    --on-primary: #123e38;
    --control-line: #8fa89b;
    --button-line: #6d8579;
  --visit: #c18c4d;
}
:root[data-theme='dark'] .leaflet-background-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.72) saturate(0.55) contrast(0.9);
}
:root[data-theme='light'] {
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    400 16px/1.45 -apple-system,
    'Segoe UI',
    system-ui,
    sans-serif;
  color: var(--ink);
  background: var(--bg);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
button,
summary {
  cursor: pointer;
}
button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--button-line);
  border-radius: 12px;
  background: var(--surface);
  font-weight: 600;
  transition:
    background 150ms,
    transform 100ms;
}
button:hover,
summary:hover {
  background: var(--surface-2);
}
button:active,
summary:active {
  transform: scale(0.98);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button.btn-primary,
button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--button-line);
}
button.btn-text,
button.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
button.danger {
  color: var(--danger);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
a {
  color: var(--focus);
  text-underline-offset: 3px;
}
input,
select,
textarea {
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: 12px;
  padding: 10px;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
}
input[type='checkbox'],
input[type='radio'] {
  width: 22px;
  height: 22px;
  min-height: 22px;
  accent-color: var(--brand);
  flex: none;
}
label {
  min-height: 44px;
}
small,
.eyebrow {
  font-size: 13px;
  color: var(--ink-2);
}
h1,
h2 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  margin: 12px 0;
}
h3,
strong {
  font-size: 16px;
  font-weight: 600;
}
p {
  margin: 10px 0;
}
summary {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border-radius: 12px;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
svg.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  vertical-align: middle;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#map {
  height: 100dvh;
  width: 100%;
  background: var(--bg);
  /* The map's own layers (its buttons are at 1000) stay under the panel, the header and the
     banners whatever the order of the page: the panel comes before the map for the keyboard
     (AUDIT_REPORT L-18). */
  isolation: isolate;
}
header {
  position: absolute;
  /* Above the panel (#card, 1000) and the chat (1001): the search results open from here
     over them. The header itself does not overlap either. */
  z-index: 1002;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 20px;
  background: var(--brand);
  color: var(--brand-soft);
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.5px;
  white-space: nowrap;
  cursor: pointer;
}
.brand-mark {
  height: 28px;
  width: 28px;
}
.brand small {
  display: none;
}
header button {
  background: transparent;
  color: var(--brand-soft);
  border-color: var(--ink-2);
}
/* On the dark header the focus ring takes the header's own light colour: the light theme's
   focus colour is too close to the header (AUDIT_REPORT E-15). */
header > button:focus-visible {
  outline-color: var(--brand-soft);
}
#home {
  margin-left: auto;
}
#accountButton {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mine {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-soft);
}
#mapSearch {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 460px;
  min-width: 0;
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
}
#searchInput {
  width: 100%;
  border: 0;
  background: transparent;
}
#mapSearch > button {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px;
}
#searchResults {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  max-height: 55dvh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 8px;
}
#searchResults button {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 0;
  background: transparent;
}
#searchResults button:hover {
  background: var(--surface-2);
}
#searchResults strong,
#searchResults small {
  display: block;
}
#searchResults p {
  font-size: 13px;
  color: var(--ink-2);
}
#card {
  position: absolute;
  z-index: 1000;
  top: 92px;
  left: 12px;
  width: 380px;
  height: auto;
  max-height: calc(100dvh - 180px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: panel-enter 200ms ease-out;
}
#card > #name {
  margin-right: 44px;
  flex: none;
}
#close {
  position: absolute;
  right: 12px;
  top: 12px;
  border: 0;
  background: transparent;
  padding: 10px;
}
#collapse {
  align-self: flex-start;
  margin-right: 44px;
  font-size: 13px;
}
#cardBody {
  overflow: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
#description {
  color: var(--ink-2);
}
#drawTools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
#drawTools > button {
  width: 100%;
  text-align: left;
}
#drawTools > p,
#drawTools > label {
  width: 100%;
}
#drawTools label {
  display: flex;
  gap: 8px;
  align-items: center;
}
#drawTools label:has(input[type='text']),
#drawTools .detail-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
#drawTools input[type='text'],
#drawTools select {
  width: 100%;
}
.detail-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px;
  margin: 8px 0;
}
.detail-item strong,
.detail-item input {
  width: 100%;
}
.access-links a {
  display: block;
  padding: 12px;
  background: var(--surface);
  border-radius: 12px;
  margin: 8px 0;
  text-decoration: none;
}
.section-management {
  width: 100%;
  border-top: 1px solid var(--line);
}
.section-management button {
  width: 100%;
  text-align: left;
  margin: 4px 0;
}
.section-menu {
  width: 100%;
}
.section-menu summary {
  width: 44px;
}
.visits {
  width: 100%;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
}
.visits label {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.visits input,
.visits textarea,
.visits select {
  width: 100%;
}
.visits article {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}
.visits small {
  display: block;
  margin: 8px 0;
}
.visits button {
  margin: 4px 0;
}
/* Somebody fishing now: a green dot, like the live marker on the map. */
.visit-live {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
}
.visit-live::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--live);
  transform: translateY(-1px);
}
.outcome-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.outcome-buttons button[aria-pressed='true'] {
  background: var(--primary);
  color: var(--on-primary);
}
.details-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.details-fields,
.details-places {
  min-width: 0;
  max-height: 45dvh;
  overflow: auto;
}
.details-editor > p,
.details-actions {
  grid-column: 1/-1;
}
.details-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.detail-tabs {
  display: none;
}
#card[data-task='map'] {
  max-height: 240px;
  width: 440px;
  padding: 12px;
}
#card[data-task='form'] {
  width: 480px;
  padding: 12px;
  max-height: 65dvh;
}
#card[data-task='form']:has(.details-editor) {
  width: 620px;
}
#card[data-task='map'] > h1,
#card[data-task='map'] > #collapse,
#card[data-task='map'] > #close,
#card[data-task='map'] > .eyebrow,
#card[data-task='form'] > h1,
#card[data-task='form'] > #collapse,
#card[data-task='form'] > .eyebrow,
#card[data-task='form'] > #close {
  display: none;
}
#card[data-task='map'] #description,
#card[data-task='form'] #description,
#card[data-task='map'] .section-overview,
#card[data-task='form'] .section-overview,
#card[data-task='map'] .section-management,
#card[data-task='form'] .section-management {
  display: none;
}
#card[data-task='map'] #drawTools,
#card[data-task='form'] #drawTools {
  margin: 0;
}
#card[data-task='map'] .visits,
#card[data-task='form'] .visits {
  border: 0;
  margin: 0;
  padding: 0;
}
#card[data-task='map'] .visits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#card[data-task='map'] .visits > p {
  width: 100%;
  font-size: 13px;
}
#card[data-task='map'] #drawTools > button {
  width: auto;
}
#card[data-task='map'] .visits h3 {
  display: none;
}
#card[data-task='map'] button {
  font-size: 13px;
  padding: 8px;
}
#card[data-task='form'] #drawTools:has(.visits) > button,
#card[data-task='map'] #drawTools:has(.visits) > button {
  display: none;
}
#taskConfirmation {
  font-size: 13px;
  color: var(--focus);
}
footer {
  position: absolute;
  z-index: 900;
  bottom: 24px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 13px;
}
footer p {
  width: 100%;
  margin: 4px 0;
  font-size: 13px;
}
footer p:empty {
  display: none;
}
.legend-toggle {
  position: relative;
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.legend-toggle[open] .map-legend {
  position: absolute;
  bottom: 50px;
  left: 0;
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  width: 270px;
  display: grid;
}
.map-legend i {
  display: inline-block;
  width: 24px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--river-2);
}
.map-legend .major {
  background: var(--river-1);
  height: 4px;
}
.map-legend .stream {
  background: var(--river-3);
  height: 2px;
}
.map-legend .section {
  background: var(--section);
  height: 4px;
}
.map-legend .closed {
  background: var(--closed);
}
.map-legend .conditional {
  border-top: 3px dashed var(--gear);
  background: transparent;
}
.map-legend .dam {
  width: 12px;
  height: 12px;
  border: 2px solid var(--dam);
  border-radius: 999px;
  background: var(--surface);
}
#layerControls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#layerControls label {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* A switch that is not for this viewer (a guest's "Lõigud"): the rule above would show it. */
#layerControls label[hidden] {
  display: none;
}
#layerControls small {
  color: var(--ink-2);
}
#restrictionButton {
  color: var(--gear);
}
dialog {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 24px;
  width: min(540px, calc(100vw - 24px));
  max-height: 88dvh;
  /* Reaching the end of a dialog must not scroll the page or the map behind. */
  overscroll-behavior: contain;
}
dialog::backdrop {
  background: rgb(0 0 0 / 0.4);
}
#accountContent,
#accountContent form,
#restrictionContent {
  display: grid;
  gap: 12px;
}
#accountContent label {
  display: grid;
  gap: 8px;
}
/* A field kept out of sight (the invite request's trap): the rule above would show it. */
#accountContent label[hidden] {
  display: none;
}
#accountContent input {
  width: 100%;
}
/* The layers dialog scrolls as a whole. It used to hide its overflow and
   scroll only #restrictionContent, but the switches and the legend are placed
   next to that box (sheet.js, basemap.js), so on a phone the lower part of the
   dialog ("Välimus") could not be reached. */
#restrictionDialog[open] {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#restrictionDialog[open] > * {
  flex: none;
}
#restrictionContent button {
  text-align: left;
}
#restrictionContent a {
  display: block;
}
#restrictionDialog > button {
  align-self: flex-start;
}
#unsavedDialog button {
  width: 100%;
  margin: 4px 0;
}
.leaflet-container {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
}
.leaflet-container .leaflet-control-zoom {
  margin-top: 92px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.leaflet-container .leaflet-control-zoom a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 22px;
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.leaflet-container .leaflet-control-zoom a:active {
  background: var(--surface-2);
}
.location-control {
  border: 0;
  background: transparent;
}
.location-control button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 10px;
}
.leaflet-control-scale-line {
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink-2);
}
.leaflet-container .leaflet-control-attribution {
  font-size: 11px;
  background: var(--surface);
  color: var(--ink-2);
}
.leaflet-control-attribution a {
  color: var(--focus);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-tooltip {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.leaflet-popup-content {
  font: inherit;
  margin: 24px;
}
.leaflet-tooltip {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
}
.leaflet-container a.leaflet-popup-close-button {
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 44px;
  color: var(--ink);
}
.place-marker {
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--section);
  border: 2px solid var(--section);
  border-radius: 999px;
  font-weight: 600;
}
.river-handle {
  border: 3px solid var(--focus);
  cursor: grab;
  touch-action: none;
}
.river-handle:active {
  cursor: grabbing;
}
/* The aim of a point placed from the keyboard (river-handles.js): shown while points are
   placed and the map has the keyboard focus. The ring of a focused handle. */
#map.placing:focus-visible::after {
  content: '';
  position: absolute;
  left: var(--aim-x, 50%);
  top: var(--aim-y, 50%);
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 999px;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--focus);
  pointer-events: none;
  z-index: 1000;
}
.visit-active-marker {
  border-radius: 999px;
  background: var(--visit);
  color: var(--surface);
  font-size: 13px;
  text-align: center;
  line-height: 26px;
}
.visit-range-preview .section-endpoint:not(.visit-range-marker),
.visit-range-preview .visit-active-marker {
  display: none;
}
#toast {
  position: fixed;
  z-index: 2500;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--brand-soft);
  animation: toast-enter 150ms ease-out;
}
#toast[data-error='true'] {
  background: var(--danger);
  color: var(--surface);
}
@keyframes panel-enter {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-enter {
  from {
    transform: translate(-50%, 8px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@media (max-width: 900px) {
  header #home {
    display: none;
  }
}
@media (max-width: 600px) {
  h1,
  h2 {
    font-size: 22px;
  }
  header {
    top: 8px;
    left: 8px;
    right: 8px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    padding: 8px;
    gap: 8px;
  }
  header .brand {
    grid-column: 1;
  }
  #accountButton {
    max-width: 110px;
    font-size: 13px;
  }
  #mine {
    font-size: 13px;
  }
  #mapSearch {
    grid-column: 1/-1;
    grid-row: 2;
    max-width: none;
    width: 100%;
  }
  #card {
    top: auto;
    bottom: var(--footer-space, 100px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 60dvh;
    padding: 16px;
  }
  #cardBody {
    max-height: 43dvh;
  }
  #card[data-task='map'],
  #card[data-task='form'],
  #card[data-task='form']:has(.details-editor) {
    width: auto;
    bottom: 24px;
    max-height: 48dvh;
  }
  #card[data-task='map'] {
    max-height: 210px;
  }
  #card[data-task='form'] #cardBody {
    max-height: 44dvh;
  }
  .details-editor {
    display: flex;
    flex-wrap: wrap;
  }
  .detail-tabs {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  .detail-tabs button {
    flex: 1;
  }
  .details-fields,
  .details-places {
    width: 100%;
    max-height: 28dvh;
  }
  .details-editor[data-tab='fields'] .details-places,
  .details-editor[data-tab='places'] .details-fields {
    display: none;
  }
  body.task-map header {
    display: flex;
  }
  body.task-map #mapSearch,
  body.task-map #mine,
  body.task-map footer,
  body.task-form footer {
    display: none;
  }
  body.task-map .brand {
    flex: 1;
  }
  footer {
    left: 8px;
    right: 8px;
    max-width: none;
    justify-content: space-between;
  }
  .leaflet-container .leaflet-control-zoom {
    margin-top: 132px;
  }
  body.task-map .leaflet-container .leaflet-control-zoom {
    margin-top: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}
body [hidden] {
  display: none;
}
/* Map-first panels */
footer,
#collapse,
header #home {
  display: none;
}
.sheet-source {
  display: none;
}
#card {
  width: 380px;
  max-height: calc(100dvh - 104px);
}
#card #description {
  flex: none;
  margin: 4px 0 10px;
  font-size: 13px;
}
#card > #name {
  margin: 0 80px 6px 0;
}
#kind {
  align-self: flex-start;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 2px 8px;
}
#sheetHandle {
  display: none;
}
#sheetAction {
  flex: none;
  width: 100%;
  margin-bottom: 12px;
}
#card .section-menu {
  position: absolute;
  right: 56px;
  top: 12px;
  width: auto;
  z-index: 2;
}
#card .section-menu[open] {
  width: 250px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
}
#card .section-menu summary {
  margin-left: auto;
}
#card .section-menu button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 4px 0;
}
.map-actions {
  display: grid;
  gap: 8px;
}
.map-actions button {
  width: 44px;
  height: 44px;
  padding: 10px;
}
#card[data-task='map'],
#card[data-task='form'],
#card[data-task='form']:has(.details-editor) {
  width: 380px;
  max-height: calc(100dvh - 104px);
}
.details-editor {
  display: flex;
  flex-direction: column;
}
.details-fields,
.details-places {
  max-height: none;
  overflow: visible;
}
.details-editor .detail-tabs {
  display: flex;
}
.details-editor[data-tab='fields'] .details-places,
.details-editor[data-tab='places'] .details-fields {
  display: none;
}
@media (max-width: 600px) {
  header {
    display: flex;
    top: 8px;
    height: 64px;
    padding: 8px;
    gap: 4px;
  }
  header .brand {
    font-size: 21px;
    gap: 0;
  }
  .brand-mark {
    width: 22px;
  }
  #mapSearch {
    width: auto;
    flex: 1;
    min-width: 0;
    grid-row: auto;
  }
  #searchInput {
    padding: 8px;
    font-size: 13px;
  }
  #mapSearch > button {
    display: none;
  }
  #accountButton,
  #mine {
    font-size: 13px;
    padding: 8px;
    max-width: 64px;
  }
  #card,
  #card[data-task='map'],
  #card[data-task='form'],
  #card[data-task='form']:has(.details-editor) {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 14px 16px 12px;
    border-radius: 20px 20px 0 0;
    max-height: none;
    transition: height 200ms ease-out;
  }
  #card[data-sheet='strip'] {
    height: 88px;
    padding: 4px 12px;
  }
  #card[data-sheet='half'] {
    height: 45dvh;
  }
  #card[data-sheet='full'] {
    height: calc(100dvh - 80px);
  }
  #card #cardBody,
  #card[data-task='form'] #cardBody {
    max-height: none;
    overflow: auto;
    flex: 1;
  }
  #sheetHandle {
    display: grid;
    place-items: center;
    position: absolute;
    top: -26px;
    left: calc(50% - 30px);
    width: 60px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    touch-action: none;
    z-index: 3;
  }
  #sheetHandle span {
    width: 32px;
    height: 4px;
    background: var(--ink-2);
    border-radius: 999px;
  }
  #card[data-sheet='strip'] > #name {
    font-size: 16px;
    line-height: 24px;
    margin: 0 88px 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #card[data-sheet='strip'] > #description,
  #card[data-sheet='strip'] > #kind,
  #card[data-sheet='strip']:not([data-task='map']) #cardBody {
    display: none;
  }
  #card[data-sheet='strip'] #sheetAction {
    margin: 0;
    padding: 8px;
    min-height: 44px;
  }
  #card[data-sheet='strip'] #close {
    top: 0;
  }
  #card[data-sheet='strip'] .section-menu {
    top: 0;
  }
  #card[data-task='map'] #cardBody {
    overflow: auto;
  }
  #card[data-task='map'] #drawTools {
    flex-wrap: nowrap;
    align-items: center;
    overflow: auto;
  }
  #card[data-task='map'] #drawTools > p {
    min-width: 140px;
    max-width: 180px;
    margin: 0;
  }
  #card[data-task='map'] #drawTools > button {
    flex: none;
  }
  #card[data-task='map'] .visits {
    flex-wrap: nowrap;
  }
  #card[data-task='map'] .visits > p {
    min-width: 140px;
  }
  #card[data-task='map'] .visits > button {
    flex: none;
  }
  .leaflet-container .leaflet-control-zoom {
    margin-top: 80px;
  }
  #restrictionDialog {
    margin: auto 0 0;
    width: 100%;
    max-width: none;
    border-radius: 20px 20px 0 0;
    max-height: calc(100dvh - 80px);
  }
  body.task-map #mapSearch,
  body.task-map #mine {
    display: initial;
  }
}
@media (prefers-reduced-motion: reduce) {
  #card {
    transition: none;
  }
}

@media (max-width: 600px) {
  #sheetHandle span {
    box-shadow: 0 0 0 4px var(--surface);
  }
  #card[data-sheet='strip'] #sheetAction {
    width: calc(100% - 48px);
  }
  #card[data-sheet='strip'] #kind {
    display: none;
  }
}

#layerControls {
  display: grid;
  gap: 4px;
}
#layerControls i {
  margin-left: auto;
  width: 24px;
  height: 3px;
  background: var(--river-3);
}
#layerControls .section {
  height: 5px;
  border-radius: 3px;
  background: var(--section);
}
#layerControls .closed {
  background: var(--closed);
}
#layerControls .dam {
  width: 12px;
  height: 12px;
  border: 2px solid var(--dam);
  border-radius: 999px;
  background: transparent;
}
.leaflet-bar.location-control {
  border: 0;
  box-shadow: none;
}
@media (min-width: 601px) {
  #card,
  #card[data-task='map'],
  #card[data-task='form'],
  #card[data-task='form']:has(.details-editor) {
    max-height: calc(100dvh - 116px);
  }
}
@media (max-width: 600px) {
  body:has(#card[data-sheet='half']:not([hidden])) .leaflet-bottom {
    bottom: 45dvh;
  }
  body:has(#card[data-sheet='strip']:not([hidden])) .leaflet-bottom {
    bottom: 88px;
  }
  body:has(#card[data-sheet='full']:not([hidden])) .leaflet-bottom {
    visibility: hidden;
  }
}

#toast button {
  margin-left: 12px;
}
#offlineBanner {
  position: fixed;
  /* Over the panel, under the header's search results (1002). */
  z-index: 1001;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--danger);
  padding: 8px 16px;
  border-radius: 12px;
  max-width: 90vw;
  font-size: 13px;
}
/* The person's own running session (visits.js): the offline notice's pill with the live dot,
   below it when both are shown. A tap opens the section. */
#fishingNow {
  position: fixed;
  z-index: 1001;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  max-width: min(90vw, calc(100vw - 140px));
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fishingNow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--live);
  vertical-align: 1px;
}
#fishingNow[hidden],
body.task-map #fishingNow,
body.task-form #fishingNow {
  display: none;
}
body:has(#offlineBanner:not([hidden])) #fishingNow {
  top: 122px;
}
@media (max-width: 600px) {
  /* Left of the map buttons, with the room they leave. */
  #fishingNow {
    left: 12px;
    transform: none;
    max-width: calc(100vw - 76px);
  }
}
#mapProgress {
  position: absolute;
  z-index: 1400;
  top: 78px;
  left: 12px;
  right: 12px;
  height: 3px;
  background: var(--focus);
  animation: loading 1s ease-in-out infinite alternate;
}
@keyframes loading {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
.skeleton {
  height: 16px;
  border-radius: 12px;
  background: var(--surface-2);
  margin: 12px 0;
  animation: loading 1s infinite alternate;
}
#toast button {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand-soft);
}
dialog > button + button {
  margin-left: 8px;
}

fieldset.detail-field {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
fieldset.detail-field legend {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
#drawTools fieldset.detail-field {
  flex-direction: row;
  align-items: center;
}
fieldset.detail-field button {
  font-size: 13px;
  font-weight: 400;
  padding: 8px 12px;
}
fieldset.detail-field button[aria-pressed='true'] {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.password-wrap {
  position: relative;
}
.password-wrap input {
  padding-right: 50px;
}
.password-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  padding: 8px;
}
.account-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 8px 0;
}
.account-person details {
  position: relative;
}
.account-person details[open] {
  background: var(--surface-2);
  border-radius: 12px;
}

.direction-marker {
  color: var(--section);
  background: var(--surface);
  border-radius: 999px;
}
button[aria-pressed='true'] {
  border-color: var(--focus);
}
#drawTools .visits label {
  display: grid;
  align-items: stretch;
  gap: 8px;
}
#drawTools .visits textarea {
  width: 100%;
  resize: vertical;
}
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 3000;
  padding: 12px;
  background: var(--surface);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}
.info-content {
  width: 100%;
}
.info-content a {
  display: block;
  padding: 10px 0;
  min-height: 44px;
}
.info-content h2 {
  font-size: 16px;
  margin-top: 24px;
}
.info-content label {
  display: grid;
  gap: 8px;
}
.info-content textarea {
  width: 100%;
}
#drawTools .info-content label {
  display: grid;
}
.info-content small {
  display: block;
}
#visitPrivacy {
  font-size: 13px;
  color: var(--ink-2);
  flex: none;
  margin: 0 0 10px;
}
#card[data-sheet='strip'] #visitPrivacy {
  display: none;
}
#accountContent article {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
/* Browser error reports: route line, page state, stack. */
#accountContent .error-detail {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.leaflet-right {
  right: env(safe-area-inset-right, 0px);
}
.leaflet-left {
  left: env(safe-area-inset-left, 0px);
}
@media (max-width: 600px) {
  header {
    top: max(8px, var(--safe-top));
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
  }
  #card,
  #card[data-task='form'],
  #card[data-task='map'] {
    padding-bottom: calc(12px + var(--safe-bottom));
  }
  #card[data-sheet='strip'] {
    height: calc(88px + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
  }
  #card[data-sheet='full'] {
    height: calc(100dvh - 80px - var(--safe-top));
  }
  .leaflet-container .leaflet-control-zoom {
    margin-top: calc(80px + var(--safe-top));
  }
  body:has(#card[data-sheet='strip']:not([hidden])) .leaflet-bottom {
    bottom: calc(88px + var(--safe-bottom));
  }
  #restrictionDialog {
    padding-bottom: calc(24px + var(--safe-bottom));
  }
  #toast {
    bottom: calc(24px + var(--safe-bottom));
  }
  #offlineBanner {
    top: calc(80px + var(--safe-top));
  }
}
#card[data-task='map'] .section-menu,
#card[data-task='form'] .section-menu {
  display: none;
}

/* Refinements 2026-09-16: hidden panel, header avatar, compact attribution, dialogs, toast */
#card[hidden] {
  display: none;
}
header button {
  white-space: nowrap;
}
#accountButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
}
#accountButton .avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
#accountButton .avatar svg {
  width: 20px;
  height: 20px;
}
.leaflet-container .leaflet-control-attribution {
  padding: 2px 8px;
  border-radius: 8px 0 0 0;
  white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}
.leaflet-control-attribution a {
  color: var(--ink-2);
  text-decoration: none;
}
dialog > .dialog-close {
  position: absolute;
  right: 8px;
  top: 8px;
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  padding: 10px;
  display: grid;
  place-items: center;
}
dialog > h2 {
  margin: 4px 44px 12px 0;
}
.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.confirm-actions .btn-primary {
  background: var(--danger-fill);
  border-color: var(--danger-fill);
  color: #fff;
}
#toast {
  border-radius: 20px;
  box-shadow: var(--shadow);
}
@media (max-width: 600px) {
  .leaflet-control-zoom {
    display: none;
  }
  #accountButton .label {
    display: none;
  }
  #accountButton {
    padding: 4px;
    min-width: 44px;
    max-width: none;
    justify-content: center;
  }
  #mine {
    padding: 8px 12px;
    max-width: none;
  }
  #toast {
    top: calc(80px + var(--safe-top));
    bottom: auto;
  }
  dialog {
    margin: auto 0 0;
    width: 100%;
    max-width: none;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(24px + var(--safe-bottom));
  }
}
@media (max-width: 600px) {
  .leaflet-bar.location-control {
    margin-top: calc(80px + var(--safe-top));
  }
}

/* Refinements 2: search contrast, summary rows, restriction state */
#searchResults strong {
  color: var(--ink);
}
#searchResults small {
  color: var(--ink-2);
}
.access-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--ink);
}
.access-links a .icon {
  color: var(--section);
}
/* Refinements 3: map-task bar with visible primary action; forms scroll in half sheet */
@media (max-width: 600px) {
  #card[data-task='map'],
  #card[data-sheet='strip'][data-task='map'] {
    height: auto;
    max-height: 190px;
    padding: 10px 12px calc(10px + var(--safe-bottom));
  }
  #card[data-task='map'] #drawTools {
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
  }
  #card[data-task='map'] #drawTools > p,
  #card[data-task='map'] .visits > p {
    min-width: 0;
    max-width: none;
    width: 100%;
    margin: 0 0 2px;
    font-size: 14px;
  }
  #card[data-task='map'] #drawTools > button,
  #card[data-task='map'] .visits > button {
    flex: 1 1 auto;
    min-height: 40px;
    font-size: 14px;
  }
  #card[data-task='map'] #drawTools > button.btn-primary,
  #card[data-task='map'] .visits > button.btn-primary {
    flex: 1 1 100%;
    order: 9;
  }
  #card[data-task='map'] .visits {
    flex-wrap: wrap;
  }
  #card[data-task='map'] .endpoint-choice,
  #card[data-task='map'] .range-repick {
    display: none;
  }
  #card[data-task='form'] #cardBody {
    overflow: auto;
  }
  body:has(#card[data-task='map']:not([hidden])) .leaflet-bottom {
    visibility: hidden;
  }
}
/* Refinements 4: full-width search results on phones, softer dark basemap */
@media (max-width: 600px) {
  #searchResults {
    position: fixed;
    top: calc(76px + var(--safe-top));
    left: 8px;
    right: 8px;
    max-height: 60dvh;
  }
}
#drawTools .length-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  width: auto;
}
/* Messages wrap: a long one (location refused, link not copied, network
   error) was cut off at the edge of a phone. The button stays one line. */
#toast {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Centred with left: 50%, a shrink-to-fit box would get half the screen. */
  width: max-content;
  padding: 10px 18px;
  text-wrap: pretty;
}
#toast button {
  flex: none;
  min-height: 36px;
  padding: 6px 12px;
  margin: 0;
  white-space: nowrap;
}
#toast[hidden],
#offlineBanner[hidden] {
  display: none;
}

/* Refinements 5: section list cards, dark basemap inversion */
#drawTools > button.list-item {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  text-align: left;
}
#drawTools > button.list-item strong {
  font-size: 16px;
  font-weight: 600;
}
#drawTools > button.list-item small {
  font-weight: 400;
}

/* Refinements 6: sheet follows the finger while dragging */
#card.dragging {
  transition: none !important;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 600px) {
  #card > #name,
  #card > #kind,
  #card > #description {
    touch-action: none;
  }
}

/* Stage 1: section comment, marked places list, map popups */
.section-places span,
.place-popup p {
  color: var(--ink-2);
}
.place-popup p {
  margin: 4px 0 0;
  max-width: 240px;
  white-space: pre-line;
}
.detail-field textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
path.route-hit:focus {
  outline: none;
}

/* Stage 2: map legibility (variant A) */
.place-marker.marker-start {
  background: var(--start);
  border: 2px solid #fff;
  color: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
.place-marker.marker-end {
  border: 2px solid #fff;
  color: #fff;
  background-color: #111;
  /* Chequered flag with a solid centre so the letter stays readable. */
  background-image:
    radial-gradient(circle, #111 0 42%, transparent 44%),
    conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0);
  background-size:
    100% 100%,
    12px 12px;
  text-shadow:
    0 0 3px #000,
    0 0 3px #000,
    0 0 2px #000;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
.place-marker.marker-parking {
  border-radius: 10px;
  background: var(--parking);
  border: 2px solid #fff;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
.place-marker.marker-note {
  background: #fff;
  color: var(--section);
  border: 3px solid var(--section);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
.place-marker.river-handle.marker-start,
.place-marker.river-handle.marker-end {
  border-width: 3px;
}
.direction-arrow {
  pointer-events: none;
}
.direction-arrow path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.direction-arrow path.casing {
  stroke: rgb(0 0 0 / 0.55);
  stroke-width: 6;
}
.section-badge {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--section);
  color: #fff;
  border: 2px solid var(--section-casing);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
  cursor: pointer;
}
.visit-active-marker {
  background: none;
  line-height: normal;
}
.visit-active-marker span {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--live);
  color: #fff;
  border: 3px solid #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
/* Expanding ring behind the dot: visible on light and dark maps. */
.visit-active-marker span::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 999px;
  background: var(--live);
  opacity: 0.55;
  animation: live-pulse 1.8s ease-out infinite;
}
.visit-active-marker span[data-more]::after {
  content: attr(data-more);
  position: absolute;
  right: -10px;
  top: -8px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
}
@keyframes live-pulse {
  from {
    transform: scale(1);
    opacity: 0.55;
  }
  to {
    transform: scale(2.1);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .visit-active-marker span::before {
    animation: none;
    transform: scale(1.35);
    opacity: 0.3;
  }
}
.place-popup button {
  margin-top: 8px;
  width: 100%;
}
.theme-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  border: 0;
}
.theme-choice legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.theme-choice button[aria-pressed='true'] {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.access-links a .icon {
  color: var(--parking);
}

/* Stage 3: guided section setup */
#drawTools.wizard {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
}
.wizard-head {
  display: grid;
  gap: 2px;
}
.wizard-head small {
  color: var(--ink-2);
  font-size: 13px;
}
.wizard-head strong {
  font-size: 20px;
  line-height: 26px;
}
.wizard-steps {
  display: flex;
  gap: 8px;
}
.wizard-steps button {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--ink-2);
}
.wizard-steps button[aria-current='step'] {
  background: var(--primary);
  color: var(--on-primary);
}
.wizard-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wizard-body > p {
  margin: 0;
}
.wizard-body > button,
.wizard-nav button {
  width: 100%;
}
.wizard .detail-item {
  margin: 0;
}
.wizard .detail-item > button {
  flex: 1;
}
.wizard-nav {
  display: flex;
  gap: 8px;
}
.wizard-nav button:first-child:not(:last-child) {
  flex: 0 0 auto;
  width: auto;
}
.wizard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.wizard-foot button {
  width: auto;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 14px;
}
.wizard-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--ink);
}
.wizard-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.wizard-check li::before {
  content: '•';
  display: inline-block;
  width: 20px;
  color: var(--ink-2);
}
.wizard-check li[data-ok='true']::before {
  content: '✓';
  color: var(--start);
  font-weight: 700;
}
.wizard-check li[data-ok='false']::before {
  content: '!';
  color: var(--danger);
  font-weight: 700;
}
@media (min-width: 601px) {
  #card[data-task='form']:has(.wizard) {
    width: 400px;
    max-height: calc(100dvh - 104px);
  }
}
.wizard .detail-item .detail-field,
.wizard .detail-field input,
.wizard .detail-field textarea,
.wizard .detail-field select {
  width: 100%;
}

/* Stage 4: account, directory, list tools */
.field-hint {
  display: block;
  margin: -4px 0 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.field-hint[data-invalid='true'],
.form-error {
  color: var(--danger);
}
.form-error {
  margin: 8px 0 0;
  font-size: 14px;
}
#accountContent details {
  margin: 8px 0;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
#accountContent details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
#accountContent details[open] {
  padding-bottom: 12px;
}
#accountContent .account-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
#accountContent .account-person > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#accountContent .account-person small {
  color: var(--ink-2);
}
#accountContent .account-person details {
  border: 0;
  padding: 0;
  margin: 0;
}
#accountContent button.list-item {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  text-align: left;
}
#accountContent button.list-item small {
  font-weight: 400;
  color: var(--ink-2);
}
.list-tools {
  display: grid;
  gap: 8px;
  width: 100%;
}
.list-tools input,
.list-tools select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.list-filter {
  display: flex;
  gap: 8px;
}
.list-filter button {
  flex: 1;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 999px;
  text-align: center;
}
.list-filter button[aria-pressed='true'] {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.visit-delete {
  color: var(--danger);
}

/* Stage 5: legibility in both themes */
.section-badge {
  color: #1b1205;
}
.leaflet-container .leaflet-popup-content a,
.leaflet-container .leaflet-tooltip a {
  color: var(--focus);
}
.detail-field textarea,
.list-tools input,
.list-tools select {
  border-color: var(--control-line);
}
.wizard-steps button {
  min-height: 40px;
}
#toast button {
  min-height: 40px;
}
#toast {
  border: 1px solid color-mix(in srgb, var(--brand-soft) 35%, transparent);
}
header .brand {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Stage 5: one spacing scale (4 · 8 · 12 · 16 · 24), consistent controls */
@media (min-width: 601px) {
  /* The panel keeps one width in every mode instead of jumping 380-620 px. */
  #card,
  #card[data-task='map'],
  #card[data-task='form'],
  #card[data-task='form']:has(.wizard),
  #card[data-task='form']:has(.details-editor) {
    width: 400px;
    padding: 16px;
  }
}
/* Actions are centred; only list rows (sections, rivers) are left aligned. */
#drawTools > button,
#drawTools .visits > button {
  text-align: center;
}
#drawTools > button.list-item,
#drawTools button.list-item {
  text-align: left;
}
button.btn-text,
button.quiet {
  padding-inline: 8px;
}
input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  padding: 10px 12px;
}
/* Visit forms: full-width decisions, text links share one row. */
#card[data-task='form'] #drawTools .visits > button.btn-primary,
#card[data-task='form'] #drawTools .visits > button.btn-secondary {
  flex: 1 1 100%;
  width: 100%;
}
@media (min-width: 601px) {
  #card[data-task='map'] #drawTools .visits > button.btn-primary {
    flex: 1 1 100%;
  }
}
/* The "more" menu is one list of rows, not a mix of boxed and bare buttons. */
.section-menu[open] > button {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-weight: 500;
}
.section-menu[open] > button:hover {
  background: var(--surface-2);
}
.section-menu[open] > button + button {
  margin-top: 0;
}
.leaflet-popup-content a,
.leaflet-popup-content small {
  display: block;
  margin-top: 8px;
}
.wizard-steps button:not([aria-current='step']) {
  border-color: var(--button-line);
}
@media (max-width: 600px) {
  body > dialog:not(#restrictionDialog):not(#accountDialog) > button.btn-primary {
    width: 100%;
  }
}

/* Phone header: the mark alone; the wordmark crowded the search field. */
@media (max-width: 600px) {
  header .brand {
    font-size: 0;
    gap: 0;
    flex: none;
    min-width: 40px;
    justify-content: center;
  }
  header .brand .brand-mark {
    width: 28px;
    height: 28px;
  }
}
.access-links small {
  display: block;
  margin: 4px 0 8px;
  color: var(--ink-2);
}

/* Section menu: clearly separate rows with icons */
#card .section-menu[open] {
  padding: 4px;
}
#card .section-menu[open] > button {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
}
#card .section-menu[open] > button + button {
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
}
#card .section-menu[open] > button .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}
#card .section-menu[open] > button.danger .icon {
  color: var(--danger);
}
/* Phone header: room between controls, focus ring stays inside the field */
@media (max-width: 600px) {
  header {
    gap: 8px;
    padding: 8px 10px;
  }
  header #searchInput {
    font-size: 16px; /* below 16 px iOS zooms the page on focus */
    padding: 8px 12px;
  }
  header #searchInput:focus-visible {
    outline-offset: -3px;
  }
  header #accountButton {
    border-color: transparent;
    padding: 2px;
    min-width: 40px;
  }
  header #mine {
    padding: 8px 12px;
    max-width: none;
  }
}

.visit-privacy {
  display: block;
  color: var(--ink-2);
}
/* Without a lifted action the collapsed strip is just the title row. */
@media (max-width: 600px) {
  /* Only the plain info strip shrinks; marking bars size themselves. */
  #card[data-sheet='strip'][data-task='']:not(:has(#sheetAction:not([hidden]))),
  #card[data-sheet='strip']:not([data-task]):not(:has(#sheetAction:not([hidden]))) {
    height: calc(56px + var(--safe-bottom));
  }
}

/* Focus ring of fields inside the panel is drawn inside the field, so the
   scrolling panel never clips it. */
#card input:focus-visible,
#card textarea:focus-visible,
#card select:focus-visible,
dialog input:focus-visible {
  outline-offset: -2px;
}

/* Marking mode keeps the normal header layout (the mark used to stretch). */
body.task-map header .brand {
  flex: none;
}

/* Attribute choices: one pill size, clear groups, long answers as rows */
/* Attribute groups: a heading and its answers, divided by a hairline
   instead of a grey box inside the panel. */
.wizard fieldset.choice-field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.wizard fieldset.choice-field legend {
  float: left;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.wizard fieldset.choice-field button {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--button-line);
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
.wizard fieldset.choice-field button[aria-pressed='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
.wizard fieldset.choice-rows button {
  width: 100%;
  border-radius: 12px;
  text-align: left;
}

/* Visit range on the map: a fixed grid so nothing is pushed out of the bar.
   message / end-of-section shortcut / measured length / Tühista + Edasi */
#card[data-task='map'] #drawTools .visits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
#card[data-task='map'] #drawTools .visits > p,
#card[data-task='map'] #drawTools .visits > button.btn-secondary {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: none;
  width: 100%;
  margin: 0;
}
#card[data-task='map'] #drawTools .visits > button.btn-text {
  order: 1;
  grid-column: 1;
  width: 100%;
}
#card[data-task='map'] #drawTools .visits > button.btn-primary {
  order: 2;
  grid-column: 2;
  width: 100%;
  flex: none;
}
@media (max-width: 600px) {
  #card[data-task='map'] {
    max-height: 300px;
    overflow: auto;
  }
}

/* Section list: search, scope, sort and filters are different things and look it */
.list-tools {
  display: grid;
  gap: 12px;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.list-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid transparent;
}
.list-search:focus-within {
  border-color: var(--focus);
}
.list-search .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.list-tools .list-search input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
}
.list-tools .list-search input:focus-visible {
  outline: none;
}
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
}
.segmented .segment {
  min-height: 36px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
/* One look for "chosen" in the list: the same fill as the filter chips. */
.segmented .segment[aria-pressed='true'],
.segmented .segment[aria-selected='true'] {
  background: var(--primary);
  color: var(--on-primary);
}
.list-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.list-sort select {
  flex: 1;
  min-width: 0;
}
:root {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237f9188' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}
/* One drop-down arrow for every select, with room on its right. */
select,
.list-tools select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.list-tools .list-sort select {
  min-height: 40px;
  padding: 6px 40px 6px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.sort-dir {
  flex: none;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--button-line);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.list-filters > summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--button-line);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.list-filters > summary::-webkit-details-marker {
  display: none;
}
.list-filters > summary::after {
  content: '▾';
  margin-left: 8px;
  color: var(--ink-2);
}
.list-filters[open] > summary::after {
  content: '▴';
}
.list-filters[data-active='true'] > summary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.list-filters[data-active='true'] > summary::after {
  color: var(--on-primary);
}
.facet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.facet-label {
  flex: 0 0 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.chip {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--button-line);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
}
.chip[aria-pressed='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
.list-count {
  width: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}
.list-results {
  width: 100%;
  display: grid;
}
/* Rows, not boxes: a long list stays scannable */
#drawTools .list-results > button.list-item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 12px 28px 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none' stroke='%237f9188' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1 6.5 6l-5 5'/%3E%3C/svg%3E")
    no-repeat right 6px center;
  text-align: left;
}
#drawTools .list-results > button.list-item:hover {
  background-color: var(--surface-2);
}
#drawTools .list-results > button.list-item strong {
  font-size: 16px;
  font-weight: 600;
}
#drawTools .list-results > button.list-item small {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
}
#drawTools .list-results > button.list-item .list-facts {
  font-size: 13px;
}
#drawTools .list-results > button.list-item[data-draft] strong::after {
  content: 'Mustand';
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  vertical-align: middle;
}
.list-more {
  margin-top: 12px;
  width: 100%;
  text-align: center;
}
/* The station list (station-list.js) is this list. Where its distances are measured from,
   and the way to one's own position. */
.list-origin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.list-origin button {
  font-size: 13px;
}
/* The wind among a station's values: the arrow where it blows, before the speed. */
#drawTools .list-results .list-facts .wind-glyph {
  margin-right: 2px;
  vertical-align: -2px;
}
#drawTools .list-results .list-facts .wind-glyph path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Its way in from the layers dialog, under the switch "Seirejaamad", lined up with the
   switch's name. */
#layerControls .layer-list {
  justify-self: start;
  margin: -6px 0 2px 22px;
  font-size: 14px;
}
.list-empty {
  margin: 12px 0 4px;
  color: var(--ink-2);
}

/* On-screen keyboard on a phone (see keyboard.js). The page is not pinned:
   position: fixed on the body put the whole app under the toolbar of in-app
   browsers on the first load. While the keyboard is open the sheet ends at its
   top edge and takes its height from the visible area. */
.keyboard-probe {
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}
.viewport-debug {
  position: fixed;
  z-index: 3000;
  left: 8px;
  right: 8px;
  white-space: pre-wrap;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.8);
  color: #fff;
  font: 11px/1.35 ui-monospace, monospace;
  pointer-events: none;
}
@media (max-width: 600px) {
  /* Leaving the keyboard: the bottom edge follows it down while the top edge
     stays put (bottom and height change together, with the same timing). */
  :root #card[data-sheet] {
    transition:
      height 220ms ease-out,
      bottom 220ms ease-out;
  }
  :root.keyboard-card #card[data-sheet]:not([data-task='map']) {
    bottom: var(--keyboard, 0px);
    height: calc(var(--visible-height) - 80px - var(--safe-top));
    transition: none;
  }
  /* Room below the last fields, so any of them can be scrolled up above the
     keyboard before it opens. */
  #card.field-room #cardBody::after {
    content: '';
    display: block;
    height: 100dvh;
  }
  :root.keyboard dialog {
    margin-bottom: var(--keyboard-fixed, 0px);
    max-height: calc(var(--visible-height) - 24px);
    overflow: auto;
  }
}

/* Notes: an attention mark, "!" on amber with a light ring. Unlike parking
   (blue square), A/L, the station and the search pin; readable on the orange
   line, on roads and fields, in both map themes. The invisible halo keeps it
   easy to tap and drag. */
.place-marker.marker-note {
  background: var(--attention);
  color: var(--on-attention);
  border: 2px solid #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
}
.place-marker.marker-note::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}

/* Keyboard focus on a map line: a glow along the line instead of a rectangle
   around its bounding box. */
path.leaflet-interactive:focus,
path.leaflet-interactive:focus-visible {
  outline: none;
}
path.leaflet-interactive:focus-visible {
  filter: drop-shadow(0 0 2px var(--focus)) drop-shadow(0 0 4px var(--focus));
}

/* Header buttons sit on the dark brand bar in both themes, so their hover is a
   light veil, never the page's surface colour (lime text on a pale fill was
   unreadable in the light theme). */
header button:hover {
  background: rgb(255 255 255 / 0.14);
}
header #mine:hover {
  background: color-mix(in srgb, var(--brand-soft) 86%, #fff);
}

/* Account panel: a profile row and filled groups with a chevron, instead of a
   stack of identical outlined boxes. */
#accountContent .account-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}
.account-profile .avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 17px;
  font-weight: 700;
}
.account-profile > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.account-profile strong {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-profile small {
  font-size: 14px;
  color: var(--ink-2);
}
#accountContent > details {
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
}
#accountContent > details[open] {
  padding-bottom: 16px;
}
#accountContent > details > summary {
  min-height: 52px;
  padding: 0;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  background: transparent;
}
#accountContent > details > summary::-webkit-details-marker {
  display: none;
}
#accountContent > details > summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms;
}
#accountContent > details[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
#accountContent > details > :not(summary) {
  margin-top: 12px;
  margin-bottom: 0;
}
#accountContent > details > summary + * {
  margin-top: 0;
}
#accountContent > details label {
  gap: 6px;
  font-size: 14px;
  color: var(--ink-2);
}
#accountContent > details input {
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
}
#accountContent > details .field-hint {
  margin-top: 6px;
}
#accountContent > details h3 {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-2);
}
#accountContent > details > summary + h3 {
  margin-top: 4px;
}
#accountContent .stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
#accountContent h3 + .stat-row {
  margin-top: 8px;
}
#accountContent .stat-row strong {
  font-variant-numeric: tabular-nums;
}
#accountContent .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#accountContent > details button.list-item {
  background: var(--surface);
}
#accountContent > details > .account-person:first-of-type {
  border-top: 0;
}
#accountContent .account-logout {
  order: 99;
  justify-self: center;
  color: var(--danger);
}

/* Sademeradar: layer swatch and the timeline control (radar.js) */
#layerControls .radar {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, #3a9bd9, #4fc26b, #f2d43c, #e8650a);
}
.radar-bar {
  --pos: 0;
  --now: 1;
  --radar-observed: var(--focus);
  --radar-forecast: var(--accent);
  clear: both;
  display: grid;
  grid-template-columns: 44px auto minmax(0, 1fr) 44px;
  grid-template-areas:
    'play when track close'
    'note note note note';
  align-items: center;
  column-gap: 10px;
  width: min(580px, calc(100vw - 20px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
}
.radar-bar .radar-play,
.radar-bar .radar-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
}
.radar-bar .radar-play {
  grid-area: play;
  border: 0;
  background: var(--primary);
  color: var(--on-primary);
}
.radar-bar .radar-play:hover {
  background: var(--primary);
  filter: brightness(1.12);
}
.radar-bar .radar-play svg {
  fill: currentColor;
}
.radar-bar .radar-play:disabled {
  opacity: 0.45;
}
.radar-bar .radar-close {
  grid-area: close;
  border: 0;
  background: transparent;
  color: var(--ink-2);
}
.radar-bar .radar-close:hover {
  background: var(--surface-2);
}
.radar-when {
  grid-area: when;
  display: grid;
  /* Fixed: the rail must not move under the pointer when the text changes. */
  width: 136px;
  line-height: 1.2;
}
.radar-time {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.radar-bar:not([data-state='ready']) .radar-time {
  font-size: 14px;
  font-weight: 600;
}
.radar-bar[data-pending='true'] .radar-time {
  opacity: 0.55;
}
.radar-kind {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
}
/* The same marks as on the rail: solid is measured, dashed is forecast. */
.radar-bar[data-type] .radar-kind::before {
  content: '';
  flex: none;
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: var(--radar-observed);
}
.radar-bar[data-type='forecast'] .radar-kind::before {
  background: repeating-linear-gradient(90deg, var(--radar-forecast) 0 4px, transparent 4px 7px);
}
.radar-track {
  grid-area: track;
  min-width: 0;
}
.radar-slider {
  position: relative;
  display: grid;
  align-items: center;
  height: 40px;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.radar-rail {
  position: relative;
  height: 6px;
  margin: 0 14px;
}
.radar-rail i {
  position: absolute;
  top: 0;
  height: 100%;
}
.radar-rail-observed {
  left: 0;
  width: calc(var(--now) * 100%);
  border-radius: 3px 0 0 3px;
  background: var(--radar-observed);
}
.radar-rail-forecast {
  left: calc(var(--now) * 100%);
  right: 0;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, var(--radar-forecast) 0 6px, transparent 6px 10px);
}
/* Where the measurements end. */
.radar-rail-forecast::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -6px;
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--ink);
}
.radar-rail .radar-thumb {
  top: 50%;
  left: calc(var(--pos) * 100%);
  width: 24px;
  height: 24px;
  border: 4px solid var(--radar-observed);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
  transform: translate(-50%, -50%);
}
.radar-bar[data-type='forecast'] .radar-thumb {
  border-color: var(--radar-forecast);
}
.radar-slider:has(input:focus-visible) .radar-thumb {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.radar-scale {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  margin: -6px 14px 0;
  color: var(--ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.radar-bar .radar-now {
  position: absolute;
  top: 0;
  left: clamp(26px, calc(var(--now) * 100%), calc(100% - 26px));
  min-width: 52px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  transform: translateX(-50%);
}
/* A finger-sized target around the small pill. */
.radar-bar .radar-now::after {
  content: '';
  position: absolute;
  inset: -8px -6px -12px;
}
.radar-bar .radar-now[aria-pressed='true'] {
  border-color: transparent;
  background: var(--primary);
  color: var(--on-primary);
}
.radar-bar .radar-now:disabled {
  opacity: 0.45;
}
.radar-note {
  grid-area: note;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 4px 6px 0;
  color: var(--ink-2);
  font-size: 13px;
}
.radar-bar:not([data-state='ready']) .radar-track,
.radar-bar[data-state='failed'] .radar-play {
  visibility: hidden;
}
.radar-bar[data-state='failed'] {
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-areas: 'note close';
  width: auto;
  max-width: calc(100vw - 20px);
}
.radar-bar[data-state='failed'] .radar-play,
.radar-bar[data-state='failed'] .radar-when,
.radar-bar[data-state='failed'] .radar-track {
  display: none;
}
.radar-bar[data-state='failed'] .radar-note {
  margin: 0 0 0 8px;
}
@media (min-width: 601px) {
  /* The river panel stands on the left edge; the timeline moves beside it. */
  body:has(#card:not([hidden])) .radar-bar {
    margin-left: 402px;
    width: min(580px, calc(100vw - 422px));
  }
}
@media (min-width: 601px) and (max-width: 1000px) {
  body:has(#card:not([hidden])) .radar-bar[data-state='ready'],
  body:has(#card:not([hidden])) .radar-bar[data-state='loading'] {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      'play when close'
      'track track track'
      'note note note';
  }
}
@media (max-width: 600px) {
  .radar-bar {
    width: calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    padding: 6px 8px 4px;
  }
  .radar-bar[data-state='ready'],
  .radar-bar[data-state='loading'] {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      'play when close'
      'track track track'
      'note note note';
  }
  .radar-bar:not([data-state='ready']) .radar-track {
    display: none;
  }
  /* A half-open sheet leaves little map: only the time and play stay. */
  body:has(#card[data-sheet='half']:not([hidden])) .radar-track {
    display: none;
  }
  .radar-when {
    width: auto;
  }
  /* Two sources do not fit on one line of a phone: one line for each. */
  .leaflet-container .leaflet-control-attribution {
    max-width: calc(100vw - 96px);
    white-space: normal;
    text-align: right;
  }
}
.radar-credit {
  white-space: nowrap;
}
/* Veeolud: monitoring stations and the conditions block of a river. Rising and falling
   water is neither good nor bad, so directions carry no warning colours. */
.hydro-marker {
  display: grid;
  place-items: center;
  border: 2px solid var(--river-selected);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
  cursor: pointer;
}
.hydro-marker svg {
  fill: var(--river-selected);
}
/* A sea station's wind among its values: the arrow where it blows, before the number; the
   same arrow in a chart's tooltip and, turned for every few hours, under a chart's line. */
.hydro-popup .wind-glyph,
.hydro-values .wind-glyph,
.section-hydro-values .wind-glyph,
.hydro-tip .wind-glyph {
  margin-right: 3px;
  vertical-align: -3px;
}
.hydro-popup .wind-glyph path,
.hydro-values .wind-glyph path,
.section-hydro-values .wind-glyph path,
.hydro-tip .wind-glyph path,
.hydro-chart g.wind-glyph path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* A small mark with a finger-sized target. */
.hydro-marker::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}
.hydro-marker:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* Not ".hydro": that is the conditions block, whose spacing would stretch the mark. */
.map-legend .station,
#layerControls .station {
  width: 12px;
  height: 12px;
  border: 2px solid var(--river-selected);
  border-radius: 999px;
  background: radial-gradient(circle, var(--river-selected) 0 2.5px, transparent 3px);
}
.hydro-popup strong {
  display: block;
  font-size: 16px;
}
.hydro-popup p {
  margin: 0;
}
.hydro-popup .hydro-popup-river,
.hydro-popup .hydro-when {
  color: var(--ink-2);
  font-size: 13px;
}
.hydro-popup dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  margin: 10px 0;
}
.hydro-popup dt {
  color: var(--ink-2);
}
.hydro-popup dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hydro-popup button {
  width: 100%;
  margin-top: 10px;
}
.hydro {
  margin: 14px 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.hydro[hidden] {
  display: none;
}
.hydro-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hydro-head h2 {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.hydro .hydro-where {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.hydro-where .icon {
  width: 16px;
  height: 16px;
  color: var(--river-selected);
}
.hydro-stations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.hydro-hint {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 12px;
}
.hydro-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.hydro-values > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}
.hydro-values dt {
  color: var(--ink-2);
  font-size: 12px;
}
.hydro-values dd {
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hydro-values dd strong {
  font-size: 20px;
}
.hydro-unit {
  color: var(--ink-2);
  font-size: 13px;
}
.hydro-dir {
  margin-left: 4px;
  font-weight: 700;
}
.hydro-dir.hydro-same {
  color: var(--ink-2);
}
.hydro-values .hydro-older {
  order: -1;
  color: var(--ink-2);
  font-size: 11px;
  white-space: normal;
}
.hydro-tabs {
  margin-bottom: 10px;
}
.hydro-trend {
  display: grid;
  gap: 6px;
}
.hydro-arrows {
  margin: -6px 0 10px;
  color: var(--ink-2);
  font-size: 11px;
}
.hydro-changes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}
.hydro-changes dt {
  color: var(--ink-2);
  font-size: 12px;
}
.hydro-changes dd {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hydro-changes small {
  color: var(--ink-2);
  font-size: 12px;
}
.hydro-chart {
  position: relative;
  margin: 10px 0 0;
  min-height: 118px;
  touch-action: pan-y;
}
/* The chart itself; the wind's arrow in its tooltip is an svg too. */
.hydro-chart > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  cursor: crosshair;
}
.hydro-line {
  fill: none;
  stroke: var(--river-selected);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hydro-area {
  fill: var(--river-selected);
  opacity: 0.12;
}
.hydro-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.hydro-guide {
  stroke: var(--ink-2);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
/* An hour without a wind direction (calm or variable): a ring, as on the map. */
.hydro-calm {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.hydro-dot,
.hydro-last {
  fill: var(--river-selected);
  stroke: var(--surface);
  stroke-width: 2;
}
.hydro-axis {
  fill: var(--ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  /* Readable where the line runs behind a label. */
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.hydro-tip {
  position: absolute;
  top: -6px;
  margin: 0;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.hydro-tip[hidden] {
  display: none;
}
.hydro-loading,
.hydro-note,
.hydro-source {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 12px;
}
.hydro-note {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
}
.hydro-source a {
  color: inherit;
}
/* Task modes (drawing, forms) keep the panel to their own content. */
#card[data-task='map'] .hydro,
#card[data-task='form'] .hydro,
#card[data-task='map'] #riverRules,
#card[data-task='form'] #riverRules {
  display: none;
}
/* A river's rules above its water conditions (AUDIT_REPORT L-03). */
#riverRules {
  margin: 4px 0 14px;
}
/* Veeolud in the view of a fishing section: the nearest station of the same river.
   [ Lõik ] [ Veeolud ] above the summary; the second tab holds the block. */
.section-tabs {
  width: 100%;
}
.section-tabs[hidden],
.section-overview[hidden],
.section-hydro-teaser[hidden] {
  display: none;
}
/* One quiet row in "Lõik": weaker than the restrictions and the facts around it. */
.section-hydro-teaser-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}
.section-hydro-teaser-label {
  color: var(--ink);
  font-weight: 600;
}
.section-hydro-teaser-text {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.section-hydro-teaser-go {
  color: var(--ink-2);
  font-size: 16px;
}
.section-hydro[hidden] {
  display: none;
}
.section-hydro {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-2);
}
.section-hydro p,
.section-hydro h2,
.section-hydro h3,
.section-hydro dl {
  margin: 0;
}
.section-hydro-title {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.section-hydro-where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 14px;
}
.section-hydro-where span,
.section-hydro-far {
  color: var(--ink-2);
  font-size: 13px;
}
/* Two classes: the old ".section-overview dl" table rules (two columns, values to the right)
   would otherwise win over these. */
.section-hydro .section-hydro-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  font-size: 14px;
}
.section-hydro-values > div {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.section-hydro .section-hydro-values dd {
  margin: 0;
  white-space: nowrap;
  text-align: left;
  font-weight: 400;
}
.section-hydro-values .section-hydro-value {
  order: -1;
}
.section-hydro-values dd strong {
  font-size: 18px;
}
.section-hydro-values dt {
  margin-bottom: 4px;
  color: var(--ink-2);
  font-size: 12px;
}
.section-hydro-week {
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}
/* The time of a value from another moment, as in the river card (.hydro-older): quiet, and
   on two lines when the tile is narrow. */
.section-hydro .section-hydro-values .section-hydro-when {
  color: var(--ink-2);
  font-size: 12px;
  white-space: normal;
}
.section-hydro .hydro-note,
.section-hydro .hydro-source {
  margin: 0;
}
.section-hydro .section-hydro-more {
  justify-self: start;
  min-height: 36px;
  padding: 4px 0;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Drawing and forms keep the panel to themselves, as they do with the section overview. */
#card[data-task='map'] .section-tabs,
#card[data-task='form'] .section-tabs,
#card[data-task='map'] .section-hydro,
#card[data-task='form'] .section-hydro {
  display: none;
}

/* Visit result form: date, part of the day, the marked range, outcome */
.visits .visit-form-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}
.visits .visit-choice {
  min-width: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}
.visits .visit-choice legend,
.visits .visit-range-summary > span {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}
.visits .visit-choice button {
  width: 100%;
  min-height: 44px;
  margin: 0;
}
.visits .daypart-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.visits .visit-choice button[aria-pressed='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
.visits .visit-range-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 12px;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.visits .visit-range-summary > span {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--ink-2);
}
.visits .visit-range-summary strong {
  font-size: 15px;
  font-weight: 600;
}
.visits .visit-range-summary button {
  margin: 0;
  min-height: 40px;
  white-space: nowrap;
}
@media (max-width: 340px) {
  .visits .visit-range-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* Attribute chips: a quiet hint that several answers may be chosen */
.wizard fieldset.choice-field legend small {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

/* Basemap: [ Kaart ] [ Ortofoto ] in the layers dialog (basemap.js) */
.basemap-choice {
  margin: 12px 0 4px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.basemap-choice legend,
.layer-heading {
  padding: 0;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.layer-heading {
  margin-top: 12px;
}
.basemap-choice .segment {
  min-height: 44px;
  font-size: 15px;
}
/* The photo has a pane of its own, so the inversion of the grey map in the dark
   theme never reaches it: colours stay natural, only a little calmer at night. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .leaflet-backgroundOrtho-pane {
    filter: brightness(0.82) saturate(0.92);
  }
}
:root[data-theme='dark'] .leaflet-backgroundOrtho-pane {
  filter: brightness(0.82) saturate(0.92);
}

/* Vestlus: one shared room. A top-level header action with an unread badge, a
   panel on the right on a wide screen, a full-screen view on a phone. */
#chatButton,
#mine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#chatButton[hidden] {
  display: none;
}
#chatButton {
  position: relative;
}
#chatButton .icon,
#mine .icon {
  display: none;
  width: 22px;
  height: 22px;
}
#chatButton[aria-expanded='true'] {
  background: rgb(255 255 255 / 0.14);
  border-color: var(--brand-soft);
}
.chat-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--attention);
  color: var(--on-attention);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chat-badge[hidden] {
  display: none;
}
#chat {
  position: absolute;
  z-index: 1001;
  top: 92px;
  right: 12px;
  bottom: 24px;
  width: 380px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: panel-enter 200ms ease-out;
}
#chat[hidden],
#chat [hidden] {
  display: none !important;
}
.chat-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border-bottom: 1px solid var(--line);
}
.chat-head h2 {
  flex: 1;
  margin: 0;
  font-size: 18px;
}
.chat-back {
  display: none;
}
.chat-close,
.chat-unpin,
.chat-more {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
}
.chat-close {
  color: var(--ink);
}
.chat-pinned {
  position: relative;
  flex: none;
  margin: 10px 12px 0;
  padding: 8px 44px 8px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--surface-2);
}
.chat-pinned-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.chat-pinned-label .icon {
  width: 14px;
  height: 14px;
}
.chat-pinned .chat-text {
  max-height: 38dvh;
  overflow-y: auto;
  font-size: 14px;
}
.chat-pinned .chat-text.chat-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.chat-unpin {
  position: absolute;
  top: 0;
  right: 0;
}
.chat-unpin .icon {
  width: 18px;
  height: 18px;
}
button.chat-expand {
  min-height: 32px;
  padding: 4px 0;
  font-size: 13px;
}
.chat-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 8px 12px;
}
.chat-scroll:focus-visible {
  outline-offset: -3px;
}
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-msg {
  position: relative;
  padding: 6px 44px 7px 10px;
  border-radius: 12px;
}
.chat-msg:hover,
.chat-msg:focus-within {
  background: var(--surface-2);
}
.chat-mine {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.chat-by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.chat-by strong {
  font-size: 14px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.chat-role {
  align-self: center;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: var(--ink-2);
}
.chat-is-muted {
  border-color: currentColor;
  background: transparent;
  color: var(--danger);
}
.chat-text {
  margin: 2px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.4;
}
.chat-more {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}
.chat-msg:hover .chat-more,
.chat-more:focus-visible,
.chat-more[aria-expanded='true'] {
  opacity: 1;
}
@media (hover: none) {
  /* No hover to reveal it: always there, but quiet. */
  .chat-more {
    opacity: 0.6;
  }
}
.chat-menu.section-menu {
  position: absolute;
  z-index: 3;
  top: 40px;
  right: 4px;
  width: 250px;
  max-width: calc(100% - 8px);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.chat-menu.section-menu > button {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-weight: 600;
}
.chat-menu.section-menu > button + button {
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
}
.chat-menu.section-menu > button .icon {
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}
.chat-menu.section-menu > button.danger .icon {
  color: var(--danger);
}
.chat-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.chat-divider::before,
.chat-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.chat-empty {
  display: grid;
  gap: 4px;
  place-content: center;
  min-height: 60%;
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-2);
}
.chat-empty strong {
  color: var(--ink);
}
.chat-status {
  margin: 12px 8px;
  font-size: 14px;
  color: var(--danger);
}
button.chat-older {
  display: block;
  min-height: 36px;
  margin: 0 auto 8px;
  padding: 6px 12px;
  font-size: 13px;
}
button.chat-new {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 10px;
  width: fit-content;
  min-height: 36px;
  margin: 0 auto;
  padding: 6px 16px;
  border-color: var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow);
  font-size: 13px;
}
.chat-error {
  flex: none;
  margin: 0;
  padding: 6px 16px 0;
  font-size: 13px;
  color: var(--danger);
}
.chat-form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--line);
}
.chat-form textarea {
  flex: 1;
  height: 44px;
  min-height: 44px;
  max-height: 132px;
  padding: 10px 12px;
  resize: none;
  overflow-y: auto;
  font-size: 16px; /* below 16 px iOS zooms the page on focus */
  line-height: 1.4;
}
.chat-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-send .icon {
  width: 18px;
  height: 18px;
}
.chat-muted-note {
  flex: none;
  margin: 0;
  padding: 14px 16px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}
@media (min-width: 601px) {
  /* Map controls step aside instead of hiding under the panel. */
  body.chat-open .leaflet-right {
    right: calc(392px + env(safe-area-inset-right, 0px));
  }
  /* The radar timeline ends before the chat; between two panels it takes its
     compact form. On a narrow window it keeps a usable width and the chat,
     which is the temporary one, lies over its end. */
  body.chat-open .radar-bar {
    width: clamp(300px, calc(100vw - 424px), 580px);
  }
  body.chat-open:has(#card:not([hidden])) .radar-bar {
    width: clamp(300px, calc(100vw - 826px), 580px);
  }
}
@media (min-width: 601px) and (max-width: 1400px) {
  body.chat-open:has(#card:not([hidden])) .radar-bar[data-state='ready'],
  body.chat-open:has(#card:not([hidden])) .radar-bar[data-state='loading'] {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      'play when close'
      'track track track'
      'note note note';
  }
}
@media (max-width: 600px) {
  /* Phone header: mark · search · Lõigud · Vestlus · account. The two actions
     are icons with full-size touch targets, and the search field takes the row
     while it is being typed in. */
  header {
    gap: 6px;
  }
  header #mine[data-signed-in],
  header #chatButton {
    flex: none;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }
  header #mine[data-signed-in] .label,
  header #chatButton .label {
    display: none;
  }
  header #mine[data-signed-in] .icon,
  header #chatButton .icon {
    display: block;
  }
  header #chatButton {
    border-color: transparent;
  }
  header #chatButton .chat-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    box-shadow: 0 0 0 2px var(--brand);
  }
  header:has(#mapSearch:focus-within) #mine,
  header:has(#mapSearch:focus-within) #chatButton,
  header:has(#mapSearch:focus-within) #accountButton {
    display: none;
  }
  body.task-map #chatButton {
    display: none;
  }
  #chat {
    position: fixed;
    z-index: 2000;
    top: var(--chat-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    max-width: none;
    height: var(--chat-height, 100dvh);
    padding: var(--safe-top) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .chat-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 2px 8px;
  }
  .chat-head h2 {
    font-size: 17px;
    text-align: center;
  }
  .chat-back {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 2px;
    padding: 10px 12px 10px 2px;
    border: 0;
    background: transparent;
  }
  .chat-close {
    display: none;
  }
  .chat-send {
    justify-content: center;
    width: 48px;
    padding: 0;
  }
  .chat-send .label {
    display: none;
  }
  .chat-send .icon {
    width: 22px;
    height: 22px;
  }
  .chat-form {
    padding: 8px 10px calc(8px + var(--safe-bottom));
  }
  /* The keyboard covers the home-indicator area; no spare room above it. */
  #chat.chat-keyboard .chat-form {
    padding-bottom: 8px;
  }
  .chat-menu.section-menu > button {
    min-height: 48px;
  }
}
@media (max-width: 360px) {
  header {
    gap: 4px;
    padding: 8px 6px;
  }
  header .brand {
    min-width: 32px;
  }
  header #accountButton {
    min-width: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #chat {
    animation: none;
  }
}
@media (max-width: 600px) {
  /* With the keyboard up the room is short: the pinned update shrinks to a line. */
  #chat.chat-keyboard .chat-pinned .chat-text.chat-clamp {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  #chat.chat-keyboard .chat-expand {
    display: none;
  }
}

/* Section view ("Lõik" tab). All of it lives here; it used to be spread over
   eight places that overrode each other. No panel of its own: the groups sit
   on the card, separated by space and hairlines, so nothing is a box in a box.
   Order: restriction warning, facts, comment, notes, access, visits, meta. */
.section-overview {
  display: grid;
  gap: 18px;
  width: 100%;
  padding: 4px 0 0;
}
.section-overview > * {
  margin: 0;
}
.section-overview h2,
.section-overview h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.section-overview small {
  display: block;
}
.section-muted,
.section-meta {
  color: var(--ink-2);
  font-size: 13px;
}
/* Restrictions: a red card only when one applies; nothing found is a quiet
   line at the end (section-summary.js moves it there). */
.section-rules summary {
  min-height: 0;
  padding: 8px 0;
  color: var(--gear);
  font-weight: 600;
}
.section-rules[data-state='unknown'] summary {
  padding: 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 400;
}
.section-rules[data-state='notice'] {
  order: -1;
  padding: 4px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 11%, var(--surface));
}
.section-rules[data-state='notice'] summary {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.section-rules[data-state='notice'] summary::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--danger);
  vertical-align: middle;
}
.section-rules[data-state='notice'] article {
  padding: 10px 0 6px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  font-size: 14px;
}
/* Facts: label over value in two columns, so four answers read at a glance. */
.section-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 0;
  list-style: none;
}
.section-facts li {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.section-facts li span {
  color: var(--ink-2);
  font-size: 13px;
}
.section-facts li strong {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.section-overview .section-comment {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* Notes: things to watch out for, tinted, without a frame. */
.section-overview .section-notes {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--attention) 15%, var(--surface));
}
.section-notes ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-notes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.section-notes .note-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--attention);
  color: var(--on-attention);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.section-notes li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.section-notes li strong {
  font-size: 15px;
  font-weight: 600;
}
.section-notes li div span {
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}
/* Getting there: one list, rows divided by hairlines. */
.section-overview .section-places {
  display: grid;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}
.section-places li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.section-places li + li {
  border-top: 1px solid var(--line);
}
.section-places li > div {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.section-places li strong {
  font-size: 15px;
  font-weight: 600;
}
.section-places li > div span {
  color: var(--ink-2);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.section-places .place-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
}
.section-places .place-icon .icon {
  width: 20px;
  height: 20px;
}
.section-places li[data-kind='parking'] .place-icon {
  background: var(--parking);
  color: #fff;
}
.section-places li[data-kind='approach'] .place-icon {
  color: var(--parking);
}
.section-places li[data-kind='exit'] .place-icon {
  color: var(--route-exit);
}
.section-places a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--button-line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.section-activity {
  color: var(--ink-2);
  font-size: 14px;
}
/* The green of the map marker is too light for text; mixed with the ink it
   reads in both themes. */
.section-activity[data-active='true'] {
  color: color-mix(in srgb, var(--live) 70%, var(--ink));
  font-weight: 600;
}
/* A guest has "Logi sisse" in the header, which opens the same dialog. */
#accountButton[hidden] {
  display: none;
}

/* Restriction and dam popups (restrictions.js): the station popup's layout.
   What it is, its name, the facts (label above value), then the source.
   Two classes so Leaflet's own paragraph margins do not win. */
.leaflet-popup-content .map-popup {
  display: grid;
  gap: 8px;
}
.leaflet-popup-content .map-popup > * {
  margin: 0;
}
.map-popup-kind {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--closed) 14%, var(--surface));
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.map-popup.is-gear .map-popup-kind {
  background: color-mix(in srgb, var(--gear) 16%, var(--surface));
}
.map-popup.is-dam .map-popup-kind {
  background: var(--surface-2);
}
.map-popup strong {
  margin-top: -2px;
  font-size: 17px;
  line-height: 1.3;
}
.map-popup dl {
  display: grid;
  gap: 8px;
}
.map-popup dl > div {
  display: grid;
  gap: 1px;
}
.map-popup dt {
  color: var(--ink-2);
  font-size: 13px;
}
.map-popup dd {
  margin: 0;
  font-weight: 600;
}
.leaflet-popup-content .map-popup-note {
  color: var(--ink-2);
  font-size: 13px;
}
/* The other zones at a tapped place (AUDIT_REPORT L-01): a line each, under the answer, and
   a tap opens that zone. Their own box, apart from this zone's facts. */
.leaflet-popup-content .map-popup-others {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
}
.leaflet-popup-content .map-popup-others > * {
  margin: 0;
}
.leaflet-popup-content .map-popup-more {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.leaflet-popup-content button.map-popup-other {
  justify-self: stretch;
  padding: 4px 0;
  color: var(--focus);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}
#searchResults .search-source {
  margin: 0;
  padding: 8px 14px 10px;
  color: var(--ink-2);
  font-size: 12px;
}
/* Layers dialog: the legend lists only marks the switches do not show
   (river sizes and the two kinds of restriction area). */
#restrictionDialog .map-legend span:has(> i.section, > i.dam, > i.station) {
  display: none;
}
/* A visit: who and when, the result, then its actions in one row. */
.visits article {
  display: grid;
  gap: 4px;
}
.visits article > p {
  margin: 0;
}
.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.visits .visit-actions button {
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  font-size: 14px;
}
/* A visit's weather and water ("Ilm ja vesi") under its row: the section tab's tiles and the
   river card's tabs and chart, in the visit's own box. Eight values take two rows of tabs. */
.visits .visit-report {
  margin-top: 6px;
  padding: 0;
}
.visit-report .hydro-tabs {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
}
.visits .visit-report .segment {
  margin: 0;
  /* "Vooluhulk" in a quarter of a 360 px phone. */
  padding-inline: 2px;
}
.visit-report .hydro-axis {
  stroke: var(--surface-2);
}
/* "−3,6 hPa / 24 h" is wider than a third of a 360 px phone: the period goes under it. */
.visit-report .section-hydro-values .section-hydro-week {
  white-space: normal;
}
.hydro-band {
  fill: var(--ink);
  opacity: 0.08;
}
.hydro-bar {
  fill: var(--river-selected);
  opacity: 0.7;
}

/* Touch targets: at least 44 × 44 px (Apple Human Interface Guidelines; WCAG
   2.5.8 asks for 24). Form choices and action buttons are 44 px tall. Where
   the look should stay compact (tabs, filter chips, the section count badge),
   an invisible margin around the control takes the finger instead. */
.segmented .segment,
.chip {
  position: relative;
}
.segmented .segment::after,
.chip::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}
.section-badge::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 999px;
}
.wizard-steps button,
.wizard fieldset.choice-field button,
.sort-dir,
#card select,
.list-tools .list-search input,
#card .list-tools summary,
.section-places a,
.visits .visit-actions button,
#toast button,
.hydro .hydro-where {
  min-height: 44px;
}
.leaflet-control-attribution a {
  display: inline-block;
  padding: 5px 0;
}
@media (max-width: 600px) {
  header .brand {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  header #accountButton {
    min-width: 44px;
  }
}
/* A full-screen map app: pulling down at the top must not reload the page
   (Chrome on Android) and the page must not rubber-band (iOS). */
html,
body {
  overscroll-behavior: none;
}
/* Owner: a password reset link under the person it is for. */
#accountContent .reset-link {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
}
/* A download is a link (the browser saves the file) that looks like a button. */
#accountContent .backup-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
/* The panel title takes focus for keyboard users; it is not a control. */
#card > #name:focus {
  outline: none;
}
#card > #name:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Sea areas (sea-editor.js): points of the line are white dots with the section's
   orange ring inside a 40 px touch area; the "+" between two points is quieter. All
   readable on the orthophoto. */
.sea-handle {
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.sea-handle span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--section);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
}
.sea-handle.is-selected span {
  width: 24px;
  height: 24px;
  border-color: var(--focus);
  box-shadow:
    0 0 0 3px #fff,
    0 1px 6px rgb(0 0 0 / 0.5);
}
/* An end of a sea area on the shore: the river section's A/L handle without a letter, in
   the section's colour (an area has no start or end). */
.place-marker.river-handle.marker-sea {
  background: var(--section);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
/* Where the letter would be: a white centre, so it reads as a handle to grab. */
.place-marker.river-handle.marker-sea::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
}
.sea-handle:focus-visible {
  outline: none;
}
.sea-handle:focus-visible span {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--focus);
}
.sea-mid {
  display: grid;
  place-items: center;
  cursor: copy;
  touch-action: none;
}
.sea-mid span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  border: 2px solid var(--section);
  color: var(--section);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}
/* The list: marking a sea area starts here, for it has no object on the map. */
.list-add {
  display: grid;
  gap: 4px;
  margin: 4px 0 12px;
}
.list-add button {
  justify-self: start;
  width: auto;
}
.list-add small {
  color: var(--ink-2);
}
.list-kinds {
  margin-bottom: 8px;
}
#drawTools .sea-line-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#drawTools .sea-line-row button {
  width: auto;
}
/* A river-mouth zone in the sea, and whether it applies today. */
.leaflet-popup-content .map-popup-state {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  background: color-mix(in srgb, var(--closed) 14%, var(--surface));
}
.map-popup-state[data-state='seasonal'] {
  background: var(--surface-2);
}
.map-popup-state[data-state='gear'] {
  background: color-mix(in srgb, var(--gear) 16%, var(--surface));
}
.map-popup.is-inactive .map-popup-kind {
  background: var(--surface-2);
}
.map-legend .seasonal {
  border-top: 2px dotted var(--closed);
  background: transparent;
}
/* A sea area's wind (sea-conditions.js): one arrow beside the open area, with the speed
   and where the value comes from. White box with a dark ring: readable on the grey map,
   the orthophoto and in the dark theme. No colour scale: wind is not a warning. */
.sea-wind-marker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: 0;
  pointer-events: none;
}
/* The box grows away from the line (sea-conditions.js anchors it at the edge facing it). */
.sea-wind-marker.is-left {
  justify-content: flex-end;
}
.sea-wind-marker.is-up {
  align-items: flex-end;
  justify-content: center;
}
.sea-wind-marker.is-down {
  align-items: flex-start;
  justify-content: center;
}
.sea-wind-marker .sea-wind {
  pointer-events: auto;
}
.sea-wind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 150px;
  padding: 3px 10px 3px 3px;
  border-radius: 22px;
  background: rgb(255 255 255 / 0.94);
  color: #183b34;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.25),
    0 1px 4px rgb(0 0 0 / 0.35);
  cursor: pointer;
  white-space: nowrap;
}
.sea-wind .wind-glyph {
  flex: none;
}
.sea-wind .wind-glyph path {
  fill: none;
  stroke: #183b34;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sea-wind .wind-glyph path.casing {
  stroke: #fff;
  stroke-width: 5;
}
.sea-wind-dot {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 10px;
  border-radius: 999px;
  border: 2px solid #183b34;
  background: #fff;
}
.sea-wind-text {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}
.sea-wind-text strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.sea-wind-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: #3d544c;
}
.sea-wind[data-state='forecast'],
.sea-wind[data-state='model'] {
  box-shadow:
    0 0 0 2px #0b5f8e,
    0 1px 4px rgb(0 0 0 / 0.35);
}
.sea-wind-note {
  color: #8a2d3d !important;
  font-weight: 600;
}
.sea-wind-note:empty {
  display: none;
}
.sea-wind-marker:focus-visible {
  outline: none;
}
.sea-wind-marker:focus-visible .sea-wind {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--focus);
}
/* A sea area's "Veeolud" tab is a river section's; under it the forecast: three days as
   rows, the clock's 3-hour slots as columns, no sideways scrolling. Each day: the arrow
   (where the wind blows), the wind and the gusts. */
.forecast-dir .wind-glyph path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.forecast-dir .wind-glyph path.casing {
  display: none;
}
.forecast-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.forecast-grid th,
.forecast-grid td {
  padding: 2px 0;
  text-align: center;
}
.forecast-grid thead th {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 400;
}
.forecast-grid thead th:first-child {
  width: 56px;
}
.forecast-grid tbody {
  border-top: 1px solid var(--line);
}
.forecast-grid tbody th {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 400;
  text-align: left;
}
.forecast-grid .forecast-dir th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.forecast-grid .forecast-dir > * {
  padding-top: 6px;
}
.forecast-grid .forecast-dir td {
  line-height: 0;
}
.forecast-grid .forecast-dir .wind-glyph {
  display: inline-block;
}
.forecast-grid .forecast-speed td {
  font-size: 14px;
  font-weight: 700;
}
.forecast-grid .forecast-gust td {
  color: var(--ink-2);
  font-size: 12px;
}
.forecast-grid .forecast-gust > * {
  padding-bottom: 6px;
}
.forecast-calm {
  color: var(--ink-2);
  line-height: 1;
}
.hydro-line-op {
  stroke-dasharray: 4 4;
}
.hydro-op-note {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12px;
}
/* The sea line editor has a row more of actions than marking a river: its panel may be
   a little taller, so that "Edasi" stays in reach on a phone. */
#card.sea-editing[data-task='map'] {
  max-height: 300px;
}
@media (max-width: 600px) {
  #card.sea-editing[data-task='map'],
  #card.sea-editing[data-sheet='strip'][data-task='map'] {
    max-height: 260px;
  }
}