/* Form and status components shared by the offline tools that have log
   forms (confirm, notfunk): buttons, fields, completion dropdowns and info
   lines, radio chips, banners, chips. Loaded after tools.css and before the
   tool's own style.css, which may refine any of it. Colours only from the
   tokens in tools.css.

   Sizes are for hectic use and readers of every age: fields, buttons and
   option chips 15px, labels 12.5px, hints and info lines 13.5px, nothing
   under 12px. */

.spacer{ flex:1; }

.chip{
  font-size:12.5px; padding:.15em .6em; border-radius:999px;
  border:1px solid var(--line); color:var(--text-dim); white-space:nowrap;
}
.chip.ok{ color:var(--ok); border-color:currentColor; }
.chip.warn{ color:var(--warn); border-color:currentColor; }
.chip.err{ color:var(--err); border-color:currentColor; }
/* The offline chip goes from "offline: prüfe…" to "offline: lädt…" (seconds
   on a slow line, while the page can already be used) to "offline bereit ✓":
   all of them fit this width, so the change cannot wrap the header bar and
   move the page under the pointer (#36). Only failures are wider. */
#st-offline{ box-sizing:border-box; min-width:9em; text-align:center; }

.toolbar{ display:flex; align-items:center; gap:.5em; flex-wrap:wrap; margin-bottom:1em; }

button, .btn{
  font:inherit; font-size:15px;
  background:var(--bg-raised); color:var(--text);
  border:1px solid var(--line-strong); border-radius:5px;
  padding:.4em .9em; cursor:pointer;
}
button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent-text); }
button:disabled{ opacity:.45; cursor:default; }
button.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover:not(:disabled){ color:#fff; filter:brightness(1.1); }
button.danger:hover:not(:disabled){ border-color:var(--err); color:var(--err); }
button.link{ background:none; border:none; padding:0; color:var(--accent-text); }
/* one size for every field in the forms (15px, easy to read while
   logging); a tool may set a bigger one where it matters (confirm's
   callsign field) */
input[type=text], input[type=search], input[type=url], input[type=password], input:not([type]), select, textarea{
  font:inherit; font-size:15px; color:var(--text); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:4px; padding:.35em .5em;
}
/* callsign fields show capitals while typing; the placeholder keeps its own case */
.call-input{ text-transform:uppercase; }
.call-input::placeholder{ text-transform:none; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
label.field, div.field{ display:flex; flex-direction:column; gap:.2em; font-size:12.5px; color:var(--text-dim); }
label.field > span, div.field > span, div.field > label{ text-transform:uppercase; letter-spacing:.04em; font-weight:500; }

/* completion: info right under the field, suggestions as a dropdown */
.ac-wrap{ position:relative; }
.ac-pop{
  position:absolute; top:calc(100% + 2px); left:0; z-index:30;
  min-width:100%; width:max-content; max-width:min(36em, 92vw);
  display:flex; flex-direction:column; gap:1px; padding:.25em;
  background:var(--bg); border:1px solid var(--accent); border-radius:6px;
  box-shadow:0 6px 18px #0003;
}
.ac-pop[hidden]{ display:none !important; }
.ac-pop .ac-head{ font-size:12.5px; color:var(--text-dim); padding:.1em .4em; text-transform:none; letter-spacing:0; }
.ac-pop button.ac-item{
  display:flex; gap:.6em; align-items:baseline; text-align:left; width:100%;
  border:none; border-radius:4px; background:none; padding:.4em .55em; font-size:15px; color:var(--text);
}
.ac-pop button.ac-item:hover, .ac-pop button.ac-item:focus{ background:var(--accent-soft); outline:none; color:var(--text); }
.ac-pop button.ac-item b{ font-family:var(--font-mono); }
.ac-pop button.ac-item small{ color:var(--text-dim); }
.ac-pop button.ac-item .alt{ color:var(--text); }
.ac-pop button.ac-item .lc-conf{ margin-left:auto; }
/* info lines under a field never widen the field: they take its width and wrap */
.ac-info{ width:0; min-width:100%; font-size:13.5px; text-transform:none; letter-spacing:0; overflow-wrap:anywhere; }
.ac-info:empty{ display:none; }
.ac-info.known{ color:var(--ok); }
.ac-info.unknown, .ac-info.warn{ color:var(--warn); }

.banner{
  padding:.6em 1em; margin-bottom:1em; border-radius:4px;
  border:1px solid currentColor;
}
.banner.err{ color:var(--err); background:var(--err-soft); font-weight:600; }
.banner.warn{ color:var(--warn); background:var(--warn-soft); }
.banner button{ margin-left:.6em; }
.banner button[aria-disabled="true"]{ opacity:.55; cursor:progress; }
.banner textarea{ display:block; width:100%; box-sizing:border-box; margin:.4em 0; font:inherit; }
/* text plus buttons, wrapping below the text when narrow (#old-install) */
.banner.move{ display:flex; flex-wrap:wrap; align-items:center; gap:.6em; }
.banner.move p{ margin:0; flex:1 1 32ch; min-width:0; }
.banner.move button{ margin-left:0; }

label.check{ display:flex; align-items:center; gap:.4em; font-size:15px; }
label.check input[type=checkbox]{ width:1.15em; height:1.15em; margin:0; }
div.field > label.check{ text-transform:none; letter-spacing:0; color:var(--text); }

.hint{ font-size:13.5px; color:var(--text-dim); }

.radio-group{ display:flex; flex-wrap:wrap; gap:.3em; }
.radio-group label{
  font-size:15px; color:var(--text); text-transform:none; letter-spacing:0;
  border:1px solid var(--line-strong); border-radius:5px; padding:.4em .75em; cursor:pointer;
  background:var(--bg); user-select:none;
}
.radio-group input{ position:absolute; opacity:0; width:0; height:0; }
.radio-group input:checked + span{ color:var(--accent-text); font-weight:600; }
.radio-group label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.radio-group label:has(input:focus-visible){ outline:2px solid var(--accent); }
/* Browsers without :has() (Firefox < 121, incl. 115 ESR): selection and
   focus shown on the label text instead of the whole button. */
@supports not selector(:has(a)){
  .radio-group input:checked + span{ text-decoration:underline; text-underline-offset:.25em; }
  .radio-group input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
}
.radio-group label[hidden]{ display:none; }

/* touch screens: every control at least 44px high */
@media (pointer: coarse){
  button, .btn, .radio-group label{ min-height:44px; box-sizing:border-box; }
  .radio-group label{ display:inline-flex; align-items:center; }
  label.check{ min-height:44px; }
  /* inline links and the small header toggles stay compact */
  button.link, #theme-toggle button, #time-toggle button{ min-height:0; }
}

/* A status chip never pushes a narrow page sideways (WCAG 1.4.10): its
   text wraps instead. */
@media (max-width: 480px){ .chip{ white-space:normal; max-width:100%; } }

/* ---------- location lookup (../js/locationui.js): the search panel
   ("📍 Standort") and the candidates, also in the location fields ---------- */
#loc-q{ width:100%; font-size:16px; }
#loc-status.ok{ color:var(--ok); }
#loc-status.err{ color:var(--err); font-weight:600; }
#loc-examples button{ margin-right:.7em; font-size:13.5px; }
#loc-results{ display:grid; gap:.5em; margin-top:.7em; }
.loc-cand{ border:1px solid var(--line); border-left:4px solid var(--line); border-radius:6px; padding:.5em .8em; background:var(--bg); }
.loc-cand.conf-exact, .loc-cand.conf-high{ border-left-color:var(--ok); }
.loc-cand.conf-likely{ border-left-color:var(--accent); }
.loc-cand.conf-ambiguous, .loc-cand.conf-low{ border-left-color:var(--warn); }
.loc-cand.auto{ box-shadow:0 0 0 2px var(--ok) inset; }
.lc-head{ display:flex; gap:.5em; align-items:baseline; flex-wrap:wrap; }
.lc-type{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.lc-conf{ font-size:12.5px; padding:0 .45em; border-radius:999px; border:1px solid currentColor; }
.conf-exact .lc-conf, .conf-high .lc-conf{ color:var(--ok); }
.conf-likely .lc-conf{ color:var(--accent-text); }
.conf-ambiguous .lc-conf, .conf-low .lc-conf{ color:var(--warn); }
.lc-meta{ font-family:var(--font-mono); font-size:14.5px; margin:.15em 0; }
.lc-why, .lc-detail{ font-size:13.5px; color:var(--text-dim); }
.lc-note{ font-size:13.5px; color:var(--warn); }
.lc-name{ font-size:13.5px; }
.lc-name q{ font-weight:600; quotes:"„" "“"; }
.nt, .lc-outside{ font-size:12.5px; padding:0 .45em; border-radius:999px; border:1px solid var(--line); color:var(--text-dim); white-space:nowrap; }
.nt{ background:var(--bg-raised); }
.nt.hist{ border-style:dashed; }
.lc-actions{ display:flex; gap:.35em; flex-wrap:wrap; margin-top:.35em; }

/* ---------- offline map (../js/basemap.js): Confirm, Notfunk ---------- */
#map-panel{ margin-bottom:1em; }
/* isolation: keep Leaflet's internal z-indices (400-1000) below the sticky header */
#map{ height:60vh; min-height:320px; border:1px solid var(--line); border-radius:6px; background:var(--bg); position:relative; z-index:0; isolation:isolate; }
#map-unplaced{ margin-top:.3em; }
.leaflet-container{ font-family:var(--font-ui); background:var(--bg); }
.leaflet-control-layers-toggle{ background-image:none !important; } /* never request Leaflet's PNG */
.leaflet-control-layers-toggle::after{ content:"Ebenen"; display:flex; height:100%; align-items:center; justify-content:center; font-size:12px; color:var(--text); }
.leaflet-touch .leaflet-control-layers-toggle{ width:64px; }
.leaflet-control-layers, .leaflet-bar a, .leaflet-control-attribution{ background:var(--bg-raised) !important; color:var(--text) !important; }
.leaflet-control-attribution{ font-size:10px; }
.leaflet-tooltip.map-district{ background:none; border:none; box-shadow:none; color:var(--text-dim); font-weight:700; font-size:13px; }
.leaflet-tooltip.map-grid-label{ background:none; border:none; box-shadow:none; color:var(--accent-text); font-family:var(--font-mono); font-size:10px; opacity:.8; }
.leaflet-tooltip.map-district::before, .leaflet-tooltip.map-grid-label::before{ display:none; }
/* Pins stand out on any part of the map, in both themes: a white ring
   and a dark outer ring (one of them always contrasts, also on water and
   roads), and a shadow. 22 px (iconSize in the mapviews). */
.map-pin{ border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:0 0 0 1.5px #000c, 0 1px 5px #0009;
  display:flex !important; align-items:center; justify-content:center; color:#fff; font:700 11px var(--font-ui); }
/* Notfunk: the most pressing priority of a pin's messages */
/* fills, not text colours: a clear amber (dark number) and red; the rings
   give the contrast against the map */
.map-pin.prio-priority{ background:#f2a900; color:#1a1a1a; }
.map-pin.prio-emergency{ background:#d7261e; }
/* an uncertain place: hollow, dashed */
.map-pin.weak{ background:var(--bg); border:2.5px dashed var(--warn); color:var(--text); }
/* the own station: a neutral disc with a star, never a pin's colour */
.map-own{ border-radius:50%; background:var(--text); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--text), 0 2px 8px #0008;
  display:flex !important; align-items:center; justify-content:center; color:var(--bg); font-size:15px; }
.leaflet-tooltip.pin-tip, .pin-tip .leaflet-popup-content-wrapper{ background:var(--bg); color:var(--text); border:1px solid var(--accent); }
.pin-tip-body{ font-size:12px; width:max-content; max-width:260px; white-space:normal; }
.pin-tip-head{ font-size:13px; }
.pin-tip-loc{ color:var(--text-dim); }
.pin-tip-body b{ font-family:var(--font-mono); }
.pin-tip-body ul{ margin:.25em 0 0; padding:0; list-style:none; }
.pin-tip-body li + li{ margin-top:.1em; }
.pin-tip-more{ color:var(--text-dim); }
.pin-tip-warn{ color:var(--warn); }
.pin-tip-body .map-links{ display:flex; margin:.3em 0 0; }
#btn-map.active{ border-color:var(--accent); color:var(--accent-text); }

/* .over-suggestions: the action row under a field with an .ac-pop list
   (Save, Discard …). With a mouse the open list (z-index 30) lies over it:
   the whole list stays readable. On touch screens and phones the row stays
   above the list: a tap on Save must never pick a suggestion that happens
   to lie under it. */
.over-suggestions{ background:var(--bg-raised); }
@media (max-width: 640px), (pointer: coarse){
  .over-suggestions{ position:relative; z-index:31; }
}