/* components.css — the widgets of the DETAIL screen: Parkierung, Ablauf &
   Normkette, the Zonen-Steckbrief, the Prüfliste, Quellen, the cost
   estimate and the Grundbuch form. Depends on tokens.css; loaded before
   panels.css and shell.css, which own the analysis screen.

   These were written against the old two-theme vocabulary (--bg-pane,
   --text-muted, --accent…). tokens.css keeps those names and points them at
   the 3a palette, so the whole detail screen follows the accent without
   being rewritten.

   ---- base type for the detail screen ---------------------------------- */

#screen-detail, #screen-detail input, #screen-detail select,
#screen-detail textarea, #screen-detail button {
  font-family: var(--font-ui);
}
#screen-detail { font-size: 14.5px; line-height: 1.5; color: var(--txt2); }
#screen-detail table.numbers td:nth-child(2),
#screen-detail .nk-wert, #screen-detail .nk-verlust {
  font-family: var(--font-num); font-size: 14px; color: var(--txt);
}
#screen-detail button {
  padding: 5px 12px; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: var(--txt2);
  font: 700 13px/1 var(--font-ui); letter-spacing: .08em;
}
#screen-detail button:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }
#screen-detail input[type=text], #screen-detail input[type=number], #screen-detail textarea {
  background: rgba(0,0,0,.3); color: var(--txt);
  border: 1px solid var(--hair); border-radius: 8px; padding: 5px 8px;
  font: 700 14px/1.4 var(--font-num);
}
#screen-detail a { color: var(--acc); }
.pane-hint { font-weight: 700; color: var(--txt3); font-size: 13px; letter-spacing: .04em; }
#pane-ablauf > summary { color: var(--txt2); }

/* ---- Parkierung -------------------------------------------------------
   Eigener Block statt weiterer Zeilen in der Zahlentabelle: hier steht ein
   Eingabefeld (Wohnungszahl = Entwurfsentscheidung) und eine Aussage, die
   die Tabelle nicht macht -- ab wann die Garage und nicht die
   Ausnuetzungsziffer das Volumen begrenzt. */
#parkierung:empty { display: none; }
#parkierung { margin: 1.1rem 0 0.6rem; }
.sub-head { font-size: 1.05rem; margin: 0 0 0.4rem; display: flex; align-items: baseline; gap: 0.4rem; }
.sub-note { font-weight: 700; font-size: 0.92rem; color: var(--text-muted); }
/* Werkzeug-Annahmen tragen ueberall dieselbe, zurueckhaltende Auszeichnung:
   sie duerfen nie wie ein zitierter Rechtswert aussehen. */
.assumption { font-size: 0.9rem; color: var(--text-faint); font-style: italic; }
.flag.flag-binding { background: var(--flag-bg); border-color: var(--flag-badge); color: var(--flag-badge); font-weight: 700; }
#parkierung input[type=number] { padding: 0.15rem 0.3rem; font-size: 1rem;
   background: var(--bg-pane); color: var(--text); border: 1px solid var(--border); border-radius: 3px; }

/* ---- Ablauf & Normkette ---------------------------------------------
   Ein einklappbares Panel am Fuss der linken Spalte: waehrend der Rechnung
   das Live-Protokoll, danach die Normkette mit der Rangordnung der
   angewandten Vorschriften und der Schicht-Animation daneben.
   <details> bleibt bewusst display:block -- .pane ist display:flex, und
   ein flex-Container als <details> hat in mehreren Engines den
   zugeklappten Zustand aufgebrochen. */
#pane-ablauf { display: block; flex: 0 0 auto; overflow: hidden;
               border-top: 1px solid var(--border); background: var(--bg-pane);
               padding: 0.4rem 0.8rem 0.5rem; }
#pane-ablauf > summary { cursor: pointer; list-style: none; display: flex;
               justify-content: space-between; align-items: baseline; gap: 0.5rem;
               font-size: 0.86rem; text-transform: lowercase; letter-spacing: .09em;
               color: var(--accent); padding: 0.2rem 0; }
#pane-ablauf > summary::-webkit-details-marker { display: none; }
#pane-ablauf > summary::before { content: '\25B8'; margin-right: 0.35rem; transition: transform .15s; }
#pane-ablauf[open] > summary::before { transform: rotate(90deg); display: inline-block; }
.ablauf-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0.8rem;
               max-height: 44vh; overflow-y: auto; padding: 0.4rem 0 0.2rem; }
@media (max-width: 1100px) { .ablauf-body { grid-template-columns: 1fr; } }
.nk-stage { border: 1px solid var(--border); border-radius: 4px; background: var(--bg-raised); }
.nk-stage svg { display: block; border-radius: 4px; }
.nk-caption { font-size: 0.92rem; color: var(--text-muted); margin: 0.3rem 0; min-height: 1.1em; }
#nk-play { font-size: 0.92rem; padding: 0.25rem 0.6rem; }
.nk-legend { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.nk-ebene, .nk-rang { font-size: 0.8rem; text-transform: lowercase; letter-spacing: .05em;
               padding: 0.08rem 0.32rem; border-radius: 3px; white-space: nowrap;
               color: var(--nk-col); border: 1px solid var(--nk-col); background: transparent; }
.nk-live { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem;
           color: var(--text-muted); background: var(--bg-sunken); border: 1px solid var(--border-soft);
           border-radius: 4px; padding: 0.3rem 0.45rem; max-height: 7.5em; overflow-y: auto;
           margin-bottom: 0.5rem; }
.nk-live:empty { display: none; }
.nk-live-line { white-space: pre-wrap; }
.nk-list { list-style: none; margin: 0; padding: 0; }
.nk-step { display: flex; gap: 0.45rem; align-items: baseline; padding: 0.3rem 0.35rem;
           border-bottom: 1px solid var(--border-soft); border-radius: 3px; }
.nk-step[data-stage]:not([data-stage="-1"]) { cursor: pointer; }
.nk-step[data-stage]:not([data-stage="-1"]):hover { background: var(--bg-sunken); }
.nk-step.is-current { background: var(--accent-soft); outline: 1px solid var(--accent); }
.nk-rang { flex: none; }
.nk-body { min-width: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: baseline; }
.nk-titel { font-size: 0.98rem; font-weight: 700; }
.nk-wert { font-size: 0.95rem; color: var(--text); }
.nk-verlust { font-size: 0.92rem; color: var(--flag-badge); font-variant-numeric: tabular-nums; }
/* Messweise ueber Wert: die hoehere Norm sagt WIE gemessen wird, die tiefere
   sagt WIEVIEL. Untereinander gesetzt ist die Ableitung PBG/ABV -> BZO an
   jedem Schritt ablesbar, statt in einer Zeile zu verschwimmen. */
.nk-messweise, .nk-grundlage { flex-basis: 100%; font-size: 0.88rem; color: var(--text-faint); }
.nk-messweise i, .nk-grundlage i {
  display: inline-block; min-width: 4.4em; font-style: normal;
  font-size: 0.8rem; letter-spacing: .06em; text-transform: lowercase;
  color: var(--text-faint); opacity: .7;
}
.nk-step .sich { margin-left: 2px; font-size: 0.92rem; }
.nk-detail { flex-basis: 100%; font-size: 0.9rem; color: var(--text-muted); }
/* Ein Ausfall wird nie gruen dargestellt (REGELN.md 2/3.17) -- 'review'
   traegt hier dieselbe Farbe wie in der Checkliste. */
.nk-step.nk-review { background: var(--review-bg); }
.nk-step.nk-review .nk-wert { color: var(--review-badge); }
.nk-step.nk-skip { opacity: .62; }
.nk-step.nk-info .nk-wert { color: var(--text-faint); font-style: italic; }

/* Icon only, and deliberately quiet: a mode switch is a preference, not
   one of the tool's actions, so it shouldn't carry the same weight as
   "Analysieren". Sized to the text next to it, not to a button. */

/* ---- Gemeinde picker ------------------------------------------------
   Styled as a quiet secondary control with its own chevron: the native
   select's platform arrow made it read like a third primary action next
   to "Analysieren". */

/* Root cause of the tearing along tile boundaries: Leaflet positions each
   256px tile <img> with its own `transform: translate3d(Xpx, Ypx, 0)` for
   GPU-accelerated panning -- which is exactly the kind of transform that
   gets each tile promoted to its OWN compositor layer in Chromium. A
   `filter` on the parent (.leaflet-tile-pane) is spec'd to apply to the
   flattened result of the whole subtree, but in practice the per-tile
   layers can still be individually snapped to the device pixel grid before
   that flattening -- and because the map pans in fractional CSS pixels
   (only the ZOOM level is snapped to integers here, not panning), adjacent
   tiles' layers get snapped to slightly different sub-pixel offsets. A
   linear filter like brightness/contrast tolerates that; invert() does
   not, because it amplifies small per-pixel differences at the edge
   between two independently-antialiased/rounded layers into a visible
   seam -- which is why the tearing tracks the tile GRID specifically
   (every tile boundary, both axes) rather than looking like random noise.
   `will-change: filter` + `isolation: isolate` force Chromium to rasterize
   the ENTIRE tile pane to one offscreen buffer first and apply the filter
   to that single buffer, instead of filtering (and pixel-snapping) each
   tile layer independently -- this is the actual fix; the tile oversize
   below is a secondary, unrelated mitigation for genuine sub-pixel gaps
   between tiles (not a filter artifact) and is kept as a second line of
   defence. */
/* Secondary mitigation, independent of the above: Leaflet's per-tile
   transform offset is not always a whole pixel, which can leave a
   hairline GAP (not a filter seam) between two tiles showing the same
   continuous raster. Oversizing each tile by half a pixel makes adjacent
   tiles overlap slightly instead of gapping. */
/* Selection styling (leaflet-drawn polygons) uses inline SVG colours from
   JS, not CSS, so it is unaffected by the tile invert filter above. */

.version-banner { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 1.05rem; }
.binding { background: var(--pass-bg); border: 1px solid var(--pass-badge); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.binding.zero { background: var(--flag-bg); border-color: var(--flag-badge); }

/* Which zone the parcel is in decides every number below it, so it leads
   the result panel rather than sitting as one row among thirty. */
.zone-headline { background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 6px; padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; }
.zone-headline .zone-code { font-size: 1.65rem; font-weight: 700; line-height: 1.1;
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.zone-headline .zone-label { font-size: 1.1rem; margin-top: 0.15rem; }
.zone-headline .zone-meta { font-size: 0.95rem; color: var(--text-muted); margin-top: 0.3rem; }
/* Sits next to the zone code: the derivation and the Grundmasse live in the
   Zonenplan tab, this is the way there. */
.zone-proof-btn { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; text-transform: lowercase;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 3px; padding: 0.15rem 0.4rem; cursor: pointer; }
.zone-proof-btn:hover { background: var(--accent-soft); }
.steckbrief-h { font-size: 1rem; text-transform: lowercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin: 1.1rem 0 0.35rem; }
table.numbers { border-collapse: collapse; margin-bottom: 1rem; }
table.numbers td { padding: 0.25rem 0.75rem 0.25rem 0; }
table.numbers td:first-child { color: var(--text-muted); }
.caption-line { font-size: 1rem; color: var(--text-muted); margin: 0 0 1.2rem; }
.flag { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); border-radius: 4px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-size: 1.05rem; }

.checklist-tier { margin-bottom: 1rem; }
.checklist-tier h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.checklist-item { display: flex; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 4px; margin-bottom: 0.3rem; font-size: 1.05rem; align-items: baseline; }
.checklist-item .badge { flex-shrink: 0; font-weight: bold; font-size: 0.88rem; padding: 0.1rem 0.4rem; border-radius: 3px; color: #fff; }
.checklist-item.pass { background: var(--pass-bg); }
.checklist-item.pass .badge { background: var(--pass-badge); }
.checklist-item.flag { background: var(--flag-bg); }
.checklist-item.flag .badge { background: var(--flag-badge); }
.checklist-item.review { background: var(--review-bg); }
.checklist-item.review .badge { background: var(--review-badge); }
.tier-a { border-left: 3px solid var(--text-faint); padding-left: 0.75rem; }
.tier-b { border-left: 3px solid var(--accent); padding-left: 0.75rem; }

.grundbuch-form { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.grundbuch-form h3 { font-size: 1.1rem; margin-top: 0; margin-bottom: 0.75rem; }
.grundbuch-form p.hint { font-size: 0.95rem; color: var(--text-muted); margin-top: -0.5rem; margin-bottom: 0.75rem; }
.grundbuch-form .field-group { margin-bottom: 0.75rem; }
.grundbuch-form label { display: block; font-size: 1.05rem; margin-bottom: 0.25rem; }
.grundbuch-form .sub-fields { display: none; margin-top: 0.4rem; padding-left: 1.25rem; }
.grundbuch-form .sub-fields.visible { display: block; }
.grundbuch-form input[type=text], .grundbuch-form textarea { width: 100%; padding: 0.4rem; font-size: 1.05rem; box-sizing: border-box; font-family: inherit; background: var(--bg-pane); color: var(--text); border: 1px solid var(--border); }
.grundbuch-form textarea { min-height: 3rem; resize: vertical; }

.zoning-map { position: relative; display: inline-block; margin-bottom: 1rem; border: 1px solid var(--border); background: #fff; }
.sources-section { margin-bottom: 1rem; font-size: 1.05rem; }
.sources-section .source-row { padding: 0.4rem 0; border-bottom: 1px solid var(--border-soft); }
.sources-section .source-row .article { color: var(--text-muted); font-size: 0.95rem; }
.cost-estimate { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.cost-estimate .total { font-size: 1.45rem; font-weight: bold; color: var(--accent); }
.cost-estimate .note { font-size: 0.95rem; color: var(--text-muted); margin-top: 0.5rem; }
/* Kein display:none mehr. Der Knopf steht jetzt fest in der Kopfzeile und
   wird bei fehlender Analyse deaktiviert statt ausgeblendet — ausgeblendet
   liess er die Kopfzeile bei jeder Suche springen. Das display:none hier
   stammte aus der Zeit im Ergebnispanel, wo app.js es auf 'inline-block'
   umstellte; ohne diese Zeile in app.js blieb der Knopf unsichtbar. */