/* panels.css — the contents of the 3a panels: the log window, the Kennwerte
   table with its Beleg column, the § rule overlays on the isometry and the
   plan, the isometry controls, the variant picker.

   Loaded after components.css and before shell.css. */

/* ---- 1. log window ----------------------------------------------------
   The reason the tool looks like this: a deterministic pipeline that shows
   its steps, the § that fired at each one, and every assumption it made.
   Three columns, monospaced, one line per event. */

#log-filter {
  /* Darf umbrechen: auf schmalen Fenstern standen die Zaehler auf 28 px
     Hoehe aneinandergequetscht. */
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 14px;
  min-height: 28px; padding: 6px 14px;
  border-bottom: 1px solid var(--hair-soft);
  font: 700 13px/1.4 var(--font-num); color: var(--txt3);
}
#log-filter .lf-acc { color: var(--acc); }
#log-filter .lf-warn { color: var(--assume); }
#log-filter .lf-right { margin-left: auto; }

#log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 8px; }

.log-line {
  display: grid; grid-template-columns: 88px 30px minmax(0, 1fr);
  align-items: baseline; gap: 4px;
  padding: 1px 6px; border-radius: var(--r-row);
  font: 700 13.5px/1.35 var(--font-num);
}
.log-line:hover { background: rgba(255, 255, 255, .05); }
.log-line .t { color: var(--faint); }
.log-line .b { font-weight: 700; }
.log-line .m { overflow-wrap: anywhere; }

.log-line.step .b { color: var(--lbl); }   .log-line.step .m { color: var(--txt2); }
.log-line.ok   .b { color: var(--ok); }    .log-line.ok   .m { color: var(--log-ok); }
.log-line.cite .b { color: var(--acc); }   .log-line.cite .m { color: var(--log-cite); }
.log-line.warn .b { color: var(--assume); }.log-line.warn .m { color: var(--log-warn); }

#log-sources {
  flex: none; padding: 7px 14px 8px;
  border-top: 1px solid var(--hair-soft);
  font: 700 12.5px/1.5 var(--font-num); color: var(--txt3);
}
#log-sources .ls-k {
  display: block; margin-bottom: 3px;
  font: 700 12px/1 var(--font-ui); letter-spacing: .11em; color: var(--lbl);
}
#log-sources .ls-row { display: flex; gap: 8px; }
#log-sources .ls-row .d { margin-left: auto; color: var(--faint); }

/* ---- 2. Kennwerte table -----------------------------------------------
   Kennwert / Wert / Beleg. Hovering a row writes that value's derivation
   into the HERLEITUNG bar -- every value carries the string, so nothing on
   this screen is a number without a visible way it was reached. */

#kennwerte { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 6px 6px; }

.kw-group { margin-bottom: 2px; }
.kw-group-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 8px 3px;
  font: 700 12px/1 var(--font-ui); letter-spacing: .11em; color: var(--acc);
  text-transform: lowercase;
}
.kw-group-head .note {
  margin-left: auto; letter-spacing: .02em; text-transform: none;
  font: 700 12.5px/1 var(--font-num); color: var(--txt3);
}

/* --- Sicherheitsstufen (js/core/sicherheit.js) ---------------------------
   Zweite Achse neben `kind`: nicht WOHER der Wert kommt, sondern WIE
   BELASTBAR er ist. Das Zeichen steht vorne in einer eigenen Kolonne, damit
   sich die Tafel von oben nach unten ueberfliegen laesst.

   Farbe ist hier NICHT die Kennzeichnung, sondern ihre Verstaerkung: jede
   Stufe hat ein eigenes Zeichen (§ ≈ ~ ?) und bleibt damit lesbar, wenn das
   Blatt schwarzweiss gedruckt wird oder der Leser Farben nicht unterscheidet. */
.sich {
  font: 700 13px/1.25 var(--font-num);
  text-align: center; cursor: help; user-select: none;
}
.s-BELEGT { color: var(--ok); }
.s-VEREINFACHT { color: var(--acc2); }
.s-ANNAHME { color: var(--assume); }
.s-NICHT_ERMITTELBAR { color: var(--txt3); }
/* Geerbt heisst: der Wert selbst waere sicherer, ein Eingang ist es nicht.
   Der Ring sagt "nicht von hier" — der Grund steht im Titel. */
.sich.is-vererbt {
  border: 1px dotted currentColor; border-radius: 50%;
  width: 13px; height: 13px; display: inline-block; line-height: 11px;
}
/* Alles unterhalb von "belegt" bekommt eine Kante: eine Zeile, die etwas
   nicht Belegtes traegt, darf sich nicht wie eine belegte lesen. */
.kw-row.kw-s-VEREINFACHT { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--acc2) 55%, transparent); }
.kw-row.kw-s-ANNAHME { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--assume) 65%, transparent); }
.kw-row.kw-s-NICHT_ERMITTELBAR { box-shadow: inset 2px 0 0 var(--txt3); }

/* Gemeinde ohne hinterlegte BZO: der Abbruch, benannt. Kein Ergebnis —
   aber lesbar, welche Norm auf welcher Stufe fehlt. */
.nicht-gerechnet { padding: 10px 10px 12px; }
.ng-head {
  font: 700 13.5px/1.3 var(--font-ui); color: var(--txt);
  letter-spacing: .04em; text-transform: lowercase; margin-bottom: 5px;
}
.ng-intro, .ng-foot, .ng-none {
  font: 700 13px/1.45 var(--font-ui); color: var(--txt2); margin: 0 0 9px;
}
.ng-foot { color: var(--txt3); margin-top: 9px; margin-bottom: 0; }
.ng-sec h4 {
  font: 700 12px/1.3 var(--font-num); color: var(--txt3);
  letter-spacing: .07em; text-transform: lowercase;
  margin: 0 0 3px; padding-top: 6px; border-top: 1px solid var(--row-rule);
}
.ng-list { list-style: none; margin: 0 0 8px; padding: 0; }
.ng-list li {
  display: grid; grid-template-columns: 13px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 5px; align-items: baseline; padding: 2px 0;
}
.ng-lb { font: 700 13px/1.3 var(--font-ui); color: var(--txt2); }
.ng-lb.ng-wide { grid-column: 2 / -1; }
.ng-src { font: 700 12px/1.35 var(--font-num); color: var(--txt3); text-align: right; }

.sich-legende {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  padding: 4px 8px 5px;
  font: 700 12px/1.3 var(--font-num); color: var(--txt3);
}
.sich-legende span { display: inline-flex; align-items: center; gap: 3px; }
.sich-legende .sich { font-size: 12.5px; font-style: normal; }

/* Herleitung als Popover neben der Zeile: in der einen Fussleiste passte
   eine lange Formel nie hinein. Schwebt links neben der Kennwerte-Tafel,
   nimmt keine Zeigerereignisse an. */
#kw-tip {
  position: fixed; z-index: 1300; max-width: 380px;
  border-radius: var(--r-overlay); border: 1px solid var(--hair);
  background: rgba(22, 22, 22, .96);
  box-shadow: var(--shadow-panel);
  padding: 8px 11px 9px;
  font: 700 13px/1.55 var(--font-num); color: var(--txt2);
  pointer-events: none; white-space: pre-line;
}

.kw-row {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) 124px 106px;
  align-items: baseline; gap: 5px;
  padding: 2px 8px 3px; border-radius: var(--r-row);
  border-top: 1px solid var(--row-rule);
  transition: background .15s;
  cursor: default;
}
.kw-row:hover { background: color-mix(in srgb, var(--acc) 9%, transparent); }
.kw-row .lb { font: 700 13px/1.25 var(--font-ui); color: var(--txt2); }
.kw-row .vl {
  font: 700 13.5px/1.25 var(--font-num); color: var(--txt);
  text-align: right; overflow-wrap: break-word;
}
.kw-row .bg {
  font: 700 11.5px/1.25 var(--font-num); text-align: right;
  /* Umbrechen statt abschneiden: "Art. 17/18 BZO Zumikon" auf zwei Zeilen
     ist lesbar, "Art. 17/18 BZ…" ist es nicht. Aber `break-word` statt
     `anywhere`: letzteres trennte auch mitten im Wort, sobald die Schrift
     groesser wurde. */
  overflow-wrap: break-word;
}
/* § references in the accent, plain dataset names in tertiary: the eye can
   tell a legal citation from a data source without reading either. */
.kw-row .bg.is-par { color: var(--acc); }
.kw-row .bg.is-src { color: var(--txt3); }
/* Die Art steht unter der Fundstelle in derselben Spalte: nebeneinander
   bliebe fuer keine von beiden genug Breite, und die Art ist die Angabe,
   die man ueberfliegt, nicht liest. */
.kw-row .kd {
  grid-column: 4; text-align: right;
  font: 700 11.5px/1.25 var(--font-num); letter-spacing: .06em;
}
.kd-GEHOLT { color: var(--txt3); }
.kd-BERECHNET { color: var(--acc2); }
.kd-GEPRUEFT { color: var(--ok); }
.kd-ANNAHME { color: var(--assume); }
.kd-ENTWURF { color: var(--txt2); }

/* The § evidence button rides along inside the Beleg cell. */
.kw-row .prov-btn { padding: 0 3px; font-size: 12px; line-height: 1.2; }

/* Wenn nichts darstellbar ist: der Grund, mittig, statt eines leeren
   Rahmens, der wie ein Ladefehler aussieht. */
.pane-empty {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center; text-align: center; padding: 24px;
  font: 700 14.5px/1.5 var(--font-num); color: var(--assume);
}

/* ---- 3. overlays on the drawings --------------------------------------
   REGELN IM MODELL over the isometry, ABSTÄNDE & ABZÜGE over the plan.
   Both are built from the values that actually fired in this run. */

.ovl {
  position: absolute; z-index: 6;
  border-radius: var(--r-overlay);
  background: var(--overlay-box);
  backdrop-filter: var(--blur-overlay); -webkit-backdrop-filter: var(--blur-overlay);
  border: 1px solid var(--hair);
  padding: 9px 12px 10px;
  /* Never wider than the pane leaves room for -- in a narrow column a fixed
     300px would run past the right edge. */
  max-width: min(300px, calc(100% - 28px));
}
/* Collapsed to the title chip unless hovered: the full list covered most of
   the drawing it annotates. pointer-events stays on for the hover; the chip
   is small enough not to matter for dragging the model. */
.ovl:not(:hover) .o-row { display: none; }
.ovl:not(:hover) .o-k { margin-bottom: 0; }
.ovl .o-k {
  display: block; margin-bottom: 6px;
  font: 700 12px/1 var(--font-ui); letter-spacing: .11em; color: var(--lbl);
  text-transform: lowercase;
}
.ovl .o-row {
  display: flex; gap: 7px; align-items: baseline;
  font: 700 13px/1.5 var(--font-num); color: var(--txt2);
}
.ovl .o-row .g { flex: none; width: 9px; }
.ovl .o-row .p { margin-left: auto; color: var(--faint); font-size: 12px; }
.ovl .o-row.is-ok .g { color: var(--ok); }
/* Eine Warnzeile muss als Warnung LESBAR sein, nicht nur einen anderen
   Glyphen tragen: amber, halbfett, eigener Grund hinter der ganzen Zeile. */
.ovl .o-row.is-assume {
  color: var(--assume); font-weight: 700;
  background: color-mix(in srgb, var(--assume) 14%, transparent);
  border-radius: 6px; padding: 2px 6px; margin: 2px 0;
}
.ovl .o-row.is-assume .g { color: var(--assume); }
.ovl .o-row.is-na { color: var(--lbl); }
.ovl .o-row.is-na .g { color: var(--lbl); }

/* Bottom-left, not top-left: the model/plan sits centred in the pane, and
   the other corners are taken (iso readout bottom-right, controls and zoom
   top-right, north arrow top-left). */
#ovl-modell { top: 44px; left: 14px; }
#ovl-plan { bottom: 14px; left: 14px; max-width: 268px; }

/* ---- 4. isometry controls --------------------------------------------- */

#iso-controls {
  position: absolute; z-index: 7; top: 38px; right: 14px;
  display: flex; align-items: center; gap: 5px;
}
#iso-controls button {
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--hair);
  background: var(--overlay-box); color: var(--txt2);
  cursor: pointer; transition: background .15s, color .15s;
}
#iso-controls button.wide { width: auto; padding: 0 11px; font: 700 12px/1 var(--font-ui); letter-spacing: .12em; }
#iso-controls button:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }
#iso-controls svg { width: 14px; height: 14px; stroke-width: 1.5; }

#iso-readout {
  position: absolute; z-index: 7; right: 14px; bottom: 12px;
  font: 700 11.5px/1 var(--font-num); color: var(--txt3);
  background: var(--overlay-box); border-radius: 999px; padding: 5px 10px;
  pointer-events: none;
}

/* ---- 5. variant picker (Geschossvarianten) ----------------------------
   The storey count is a design decision, not a result -- every option in
   the row is equally lawful. It sits under the isometry because that is
   what changes when it is clicked. */

#variants { flex: none; display: flex; gap: 1px; border-top: 1px solid var(--hair-soft); }
#variants:empty { display: none; }
.variant {
  flex: 1 1 0; min-width: 0; border: none; cursor: pointer; text-align: left;
  padding: 7px 12px 8px; background: transparent;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--hair-soft);
  transition: background .15s;
}
.variant:first-child { border-left: none; }
.variant .n { font: 700 13px/1.2 var(--font-ui); color: var(--txt2); }
.variant .d { font: 700 12.5px/1.3 var(--font-num); color: var(--txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.variant:hover { background: color-mix(in srgb, var(--acc) 9%, transparent); }
.variant.active { background: color-mix(in srgb, var(--acc) 14%, transparent); }
.variant.active .n { color: var(--acc); }
.variant.unavailable .n { text-decoration: line-through; opacity: .7; }
/* Die gesperrte Karte traegt ihre Begruendung statt Kennzahlen — die darf
   umbrechen und ist als Warnung gefaerbt. */
.variant.unavailable .d { white-space: normal; color: var(--assume); }

/* ---- 6. map footer / selection ---------------------------------------- */

#map-foot .hover-hint { color: var(--txt2); }
#map-foot .sel-empty { color: var(--faint); font-style: italic; }

/* Leaflet inside a dark panel: the raster basemap is inverted (see
   --map-filter in tokens.css) and the controls take the panel's palette. */
#map .leaflet-tile-pane { filter: var(--map-filter); }
/* No tile-size hack here any more: stretching tiles to 256.5px hid the
   hairline seams but visibly mis-registered the map content at the seams
   (roads and parcel lines jumped). The panel behind the tiles is dark, so
   the sub-pixel seams read as nothing on the inverted map. */
#map .leaflet-container { background: var(--draw); }
#map .leaflet-bar a {
  background: rgba(28, 28, 28, .9); color: var(--txt2);
  border-color: var(--hair) !important;
}
#map .leaflet-bar a:hover { color: var(--acc); }
#map .leaflet-control-scale-line {
  background: var(--overlay-box); color: var(--txt2);
  border-color: var(--hair) !important;
}
#map .leaflet-control-attribution {
  background: var(--overlay-box); color: var(--faint);
  font-family: var(--font-num); font-size: 11.5px;
}
#map .leaflet-control-attribution a { color: var(--txt3); }

/* ---- 7. plan zoom buttons (reused from the old shell) ------------------ */

.plan-zoom { position: absolute; z-index: 7; top: 38px; right: 14px; display: flex; flex-direction: column; gap: 4px; }
.plan-zoom button {
  width: 26px; height: 26px; padding: 0; font: 700 16.5px/1 var(--font-num);
  border-radius: 999px; border: 1px solid var(--hair);
  background: var(--overlay-box); color: var(--txt2); cursor: pointer;
}
.plan-zoom button:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }

/* ---- 8. address suggestions ------------------------------------------- */

.combo { position: relative; flex: 1 1 auto; min-width: 0; }
.combo-list {
  position: absolute; z-index: 1200; top: calc(100% + 10px); left: -4px; right: -4px;
  margin: 0; padding: 4px; list-style: none;
  border-radius: var(--r-overlay); border: 1px solid var(--hair);
  background: rgba(22, 22, 22, .94);
  backdrop-filter: var(--blur-overlay); -webkit-backdrop-filter: var(--blur-overlay);
  box-shadow: var(--shadow-panel);
  max-height: 320px; overflow-y: auto;
}
.combo-list[hidden] { display: none; }
.combo-opt {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 8px;
  border-radius: var(--r-row); cursor: pointer;
  font: 700 14px/1.3 var(--font-num); color: var(--txt2);
}
.combo-opt[aria-selected="true"], .combo-opt:hover {
  background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--txt);
}
.combo-opt .opt-kind {
  flex: none; font: 700 11.5px/1.5 var(--font-ui); letter-spacing: .1em;
  text-transform: lowercase; color: var(--lbl);
}
.combo-opt .opt-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-opt .opt-sub { flex: none; color: var(--faint); font-size: 13px; }
.combo-empty { padding: 6px 8px; font: 700 13.5px/1.3 var(--font-num); color: var(--faint); }

/* Gemeinde override: a bare select in the header cell, no chrome until hover. */
#gemeinde-select {
  border: none; background: none; appearance: none; -webkit-appearance: none;
  font: 700 13px/1 var(--font-num); color: var(--lbl); cursor: pointer; padding: 0;
}
#gemeinde-select:hover { color: var(--txt2); }
#gemeinde-select option { background: #1a1a1a; color: var(--txt); }