/* LEA Produkttexte — Auswertung (Brand Marketing). Own prefix `sv4a-`, so nothing here can reach
   the editor's `sv4-` rules: the two pages share a tool but no markup. */

/* Scoped via :has(), like prompt_rules.css — the grey ground must not leak to other tools. */
body:has(.sv4a-page) {
  background: var(--grey-100);
}

.sv4a-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  font-family: var(--font-base);
  color: var(--fill-primary);
}

/* ── Header ────────────────────────────────────────────────────────────── */

.sv4a-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.sv4a-header h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}

.sv4a-header__actions { display: flex; gap: 0.5rem; }

/* ── Filter ────────────────────────────────────────────────────────────── */

.sv4a-filter {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-none);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.sv4a-filter__row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.sv4a-filter__field { display: flex; flex-direction: column; gap: 0.25rem; }

.sv4a-filter__field label,
.sv4a-filter__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-600);
}

.sv4a-filter__field input[type="date"] {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-none);
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--white);
  color: inherit;
}

.sv4a-filter__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.sv4a-filter__reset {
  font-size: 0.8125rem;
  color: var(--grey-600);
}

/* Quick picks sit in the same row as the dates and look like a pair of toggles — the active one
   is marked, because after a reload the two date fields alone do not say which button set them. */
.sv4a-quick { display: flex; gap: 0.375rem; }

.sv4a-quick__btn {
  padding: 0.4rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-none);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
}

.sv4a-quick__btn:hover { background: var(--grey-100); }

.sv4a-quick__btn--on {
  background: var(--bm-main);
  border-color: var(--bm-main);
  color: var(--white);
}

/* ── Division multi-select ─────────────────────────────────────────────── */

.sv4a-divisions {
  margin: 1rem 0 0;
  padding: 0;
  border: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* A legend inside a flex fieldset becomes a flex item; the full basis keeps it on its own line
   above the checkboxes instead of squeezing in beside the first one. */
.sv4a-divisions legend {
  padding: 0;
  margin-bottom: 0.5rem;
  flex-basis: 100%;
}

.sv4a-divisions__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.sv4a-divisions__hint {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--grey-600);
}

/* ── Period line ───────────────────────────────────────────────────────── */

.sv4a-period {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--grey-600);
}

.sv4a-period strong { color: var(--fill-primary); }

/* ── Card + table ──────────────────────────────────────────────────────── */

.sv4a-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-none);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  /* Two bars at 15rem each overflow a narrow window; the page body must not. */
  overflow-x: auto;
}

.sv4a-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* The row rule is deliberately lighter than the group rule below (--rule is --grey-400, so the
   two would otherwise be the same line and the table would read as a plain grid). The horizontal
   lines separate divisions, the vertical ones separate metrics — only one of the two may be the
   stronger, and here it has to be the metrics. */
.sv4a-table th,
.sv4a-table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, var(--white));
  text-align: left;
}

.sv4a-table thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-600);
  vertical-align: bottom;
}

/* The first column of each metric. The rule runs from the header through the total and down
   every division — stopping it at the header is what left the numbers in a queue, with no telling
   which one belonged to which heading. The extra air in front of it separates the metrics a
   second time, so the grouping survives even where the line is faint on a bad screen. */
.sv4a-table__start {
  border-left: 1px solid var(--rule);
  padding-left: 1.25rem;
}

.sv4a-table__row-head { font-weight: 600; }

.sv4a-table__num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.sv4a-table__rows tr:hover { background: var(--grey-100); }

/* ── The total, as a card of its own above its table ───────────────────────
   Feedback 2026-11-04: as a row among ten it went unread. NOT a second table — two tables
   measure their columns separately and would never line up; the card carries its own shape and
   the bar captions do what the column heads do over there. */
.sv4a-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.sv4a-total__head { flex: 0 0 auto; }

.sv4a-total__figure,
.sv4a-total__rate {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.sv4a-total__count,
.sv4a-total__rate strong {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sv4a-total__rate strong { font-size: 1.25rem; }
.sv4a-total__unit { color: var(--grey-600); font-size: 0.8125rem; }

/* The bars take the rest of the row and share it evenly. `min-width: 0` so a long legend wraps
   inside its own column instead of pushing the other bar out of the card. */
.sv4a-total__bars {
  flex: 1 1 24rem;
  display: flex;
  gap: 2rem;
}

.sv4a-total__bar {
  flex: 1 1 0;
  min-width: 0;
}

.sv4a-total__caption {
  margin: 0 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-600);
}

/* One under the other where there is no room for two bars side by side. */
@media (max-width: 860px) {
  .sv4a-total__bars { flex-direction: column; gap: 1rem; }
}

/* ── Distribution bars ─────────────────────────────────────────────────────
   Same marks and the same palette as "Rating distribution by engine" in LUCAS CC
   (tools/tickets_analysis.css) — one visual language for one kind of statement. The values are
   repeated rather than imported because the two tools share no stylesheet; they must be changed
   together. Where this page diverges on purpose is WHICH bar wears the traffic light: see the
   segment rules below.

   Checked with the palette validator against the white card: amber↔green sit at ΔE 7.0 under
   protanopia and amber reaches only 2.09:1 against the surface. Both are allowed only WITH
   secondary encoding — hence the per-segment legend text below every bar, and the 2px gap between
   the fills. Never drop either and keep the colours. */

.sv4a-card__head { margin-bottom: 1rem; }

.sv4a-card__head h2 {
  margin: 0;
  font-size: 1rem;
}

.sv4a-card__note {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--grey-600);
  max-width: 70ch;
}

/* Both bar tables — the distribution (Sicht A) and the usage (Sicht B). Listed rather than given
   one shared class, so a test can still address exactly one of them. */
.sv4a-table--dist thead th,
.sv4a-table--usage thead th { text-align: left; }

.sv4a-table--dist .sv4a-bar-col,
.sv4a-table--usage .sv4a-bar-col { min-width: 15rem; width: 30%; }

.sv4a-stack {
  display: flex;
  height: 0.875rem;
  border-radius: var(--radius-none);
  overflow: hidden;
  background: var(--grey-100);
}

.sv4a-stack__seg { display: block; }

/* ── The build ─────────────────────────────────────────────────────────────
   The bars wipe in from the left when the table loads.

   A CLIP, not a width and not a scaleX: the segments keep their final geometry from the first
   frame, so the 2px surface gaps never stretch and nothing half-drawn is measurable as a wrong
   proportion. A growing width would also reflow the segments beside it on every frame.

   The clip runs on `__fill`, never on `.sv4a-stack` itself: the grey track has to stand from the
   start, because it is what says what the shares are shares OF. Clipping the track with it makes
   the bar grow out of nothing.

   `backwards` holds the clipped state through the delay — without it a row shows whole, waits,
   and then wipes a second time. */
@keyframes sv4a-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.sv4a-stack__fill {
  display: flex;
  flex: none;
  width: 100%;
  height: 100%;
  animation: sv4a-wipe 500ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  /* Separate from the shorthand above, which would reset it to 0. */
  animation-delay: calc(var(--sv4a-row, 0) * 60ms);
}

/* The quality bar follows its own transfer bar by a beat, so a row builds left to right as well
   as top to bottom. Ten rows at 60ms puts the last one at 0.6s and the whole table under 1.3s.
   The overview's card has no row counter, so its pair just builds in the same order. */
.sv4a-bar-col:last-child .sv4a-stack__fill,
.sv4-stats__row:last-child .sv4a-stack__fill {
  animation-delay: calc(var(--sv4a-row, 0) * 60ms + 100ms);
}

/* Motion is a preference, and this wipe is decoration: every number it draws also stands in the
   legend under the bar, so a reader who asked for less movement loses nothing by switching it
   off — and must not sit through a delay in front of an empty bar. */
@media (prefers-reduced-motion: reduce) {
  .sv4a-stack__fill,
  .sv4a-bar-col:last-child .sv4a-stack__fill,
  .sv4-stats__row:last-child .sv4a-stack__fill {
    animation: none;
  }
}

/* The 2px surface gap, as a shadow rather than a `gap`: a flex gap would push the segments past
   100 % of the track and clip the last one, which silently shortens the worst-news segment. */
.sv4a-stack__seg + .sv4a-stack__seg { box-shadow: -2px 0 0 var(--white); }

/* The traffic light, value for value from tools/tickets_analysis.css (`.ta-page`, --ta-good/ok/bad).
   Declared as tokens with the same names rather than written out as literals: the two bars are one
   visual, and test/assets/sv4_evaluation_palette_test.rb fails if either file moves without the
   other. Hard-coded hex passed that test by accident and drifted silently.

   Which check state wears which severity:
     ok    -> good (gruen)
     warn  -> ok   (bernstein) — Hinweise, kein Verstoss
     fail  -> bad  (rot)

   The overview renders the same bars in its own card (`.sv4-stats`), so the tokens have to
   reach there too. Listed as a second selector rather than copied: a second set of the same hex
   values is exactly the drift the palette test exists to catch. */
.sv4a-page,
.sv4-stats {
  --sv4a-good: #16a34a;
  --sv4a-ok:   #f59e0b;
  --sv4a-bad:  #dc2626;
}

/* BOTH bars carry the traffic light. This is a deliberate divergence from LUCAS CC, where the
   coverage bar is neutral slate/grey: Brand Marketing reads this page for progress, and asked for
   the transfer to be green/orange rather than two greys (28.10.). The colours are severities, not
   identities, so green standing for both "übertragen" and "ok" is correct — each segment carries
   its own label, which is what keeps the two readings apart.

   There is no amber "Hinweise" segment (29.10.): a hint is not a half failure, and a clean check is
   one verdict — it wears one colour. See Evaluation::QUALITY_STATES. */
.sv4a-stack__seg--pushed { background: var(--sv4a-good); }
.sv4a-stack__seg--open   { background: var(--sv4a-ok); }
.sv4a-stack__seg--clean  { background: var(--sv4a-good); }
.sv4a-stack__seg--fail   { background: var(--sv4a-bad); }

/* Sicht B, same pair as the transfer bar and for the same reading: amber is the part that is
   still open, not a fault. A text written by hand in the PIM is not a defect — the gap is simply
   what an adoption rate measures. Red here would call the editors' own work an error. */
.sv4a-stack__seg--via-lea     { background: var(--sv4a-good); }
.sv4a-stack__seg--without-lea { background: var(--sv4a-ok); }

/* Not judged yet wears the same orange as "noch offen" in the transfer bar: both mean outstanding
   work, and saying so in one colour is the point (Lars, 28.10.). It was grey once, which made the
   whole bar read as one flat block wherever nothing had been checked.

   NOTE: this is the same value as --warn above, so "Hinweise" and "ungeprüft" are one colour.
   They are told apart by their legend text only. If that ever has to be separated, give this one
   its own token — do NOT recolour --warn, which is shared with LUCAS CC. */
.sv4a-stack__seg--unchecked { background: var(--sv4a-ok); }

.sv4a-stack-legend {
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--grey-600);
}

.sv4a-stack-legend__item { display: inline-flex; align-items: center; gap: 0.25rem; }

.sv4a-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-none);
  display: inline-block;
  flex: none;
}

.sv4a-dot--pushed { background: var(--sv4a-good); }
.sv4a-dot--open   { background: var(--sv4a-ok); }
.sv4a-dot--clean  { background: var(--sv4a-good); }
.sv4a-dot--fail   { background: var(--sv4a-bad); }
.sv4a-dot--unchecked { background: var(--sv4a-ok); }
.sv4a-dot--via-lea     { background: var(--sv4a-good); }
.sv4a-dot--without-lea { background: var(--sv4a-ok); }

.sv4a-muted { color: var(--grey-600); }

/* ── Legend ────────────────────────────────────────────────────────────── */

.sv4a-legend h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.sv4a-legend dl { margin: 0; }

.sv4a-legend dt {
  font-weight: 700;
  font-size: 0.8125rem;
  margin-top: 0.75rem;
}

.sv4a-legend dt:first-child { margin-top: 0; }

.sv4a-legend dd {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--grey-600);
  max-width: 70ch;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Scoped like every other tool's: the classes are not global in this repo. */

.sv4a-page .btn-primary {
  padding: 0.5rem 1rem;
  background: var(--bm-main);
  color: var(--white);
  border: none;
  border-radius: var(--radius-none);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.sv4a-page .btn-secondary {
  padding: 0.5rem 1rem;
  background: var(--grey-100);
  color: var(--fill-primary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-none);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

.sv4a-page .btn-secondary:hover { background: var(--rule); }