/* ══ COCKPIT — mixed.css · HiL-Fall „gemischtes Packstück" (mixed.js) ══
   Vokabular des Bestands: Papier-Karte, Messing = Tinte der Entscheidung,
   GESTRICHELT = vorläufig (wie Intake-Badge / .rvpt--later / .acard--inactive).
   Signatur: die SUMMENWAAGE — Track + Füllung + Schwellen-Tick in der Sprache
   des Konfidenz-Balkens (.cb), Tick = gedrucktes Packstück-Netto, ±2 %-Band.
   Alle Textfarben aus den AA-gemessenen Tokens (tokens.css). */

/* Der Task nutzt die volle Breite des Arbeitsplatzes: Zone 2+3 werden EINE
   Fläche (die Karten tragen Ist-Zustand UND Korrektur in sich). Doppelklasse
   schlägt die Container-Query-Zweispaltigkeit aus review.css sicher. */
.rsplit2.rsplit2--mixed { grid-template-columns: minmax(0, 1fr); }

.mxprog {
  margin: .9rem 0 0; padding: .5rem .7rem;
  font-family: var(--f-mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: var(--brass); background: color-mix(in srgb, var(--brass-srf) 10%, var(--bg));
  border: 1px solid var(--line-soft); border-left: 3px solid var(--brass); border-radius: 3px;
}
.mxcards { display: grid; gap: 1rem; margin-top: .8rem; }

/* ── Karte je Packstück ── */
.mx {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .95rem 1.05rem 1.1rem; box-shadow: 0 1px 3px rgba(27, 24, 19, .05);
  border-left: 3px solid var(--brass);
}
.mx--done { border-left-color: var(--st-clear); }
.mx__head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.mx__title { margin: 0; font-family: var(--f-disp); font-weight: 800; font-stretch: 116%; font-size: 1.02rem; }
.mx__title b { color: var(--brass-disp); font-size: 1.25em; }
.mx__title span { font-family: var(--f-body); font-weight: 400; font-stretch: 100%; font-size: .8rem; color: var(--fg-dim); }
.mx__state {
  margin-left: auto; padding: .18rem .5rem .14rem;
  font-family: var(--f-mono); font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; border-radius: 3px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.mx__state--prop { color: var(--brass); border-style: dashed; }
.mx__state--open { color: var(--fg-dim); }
.mx__state--done { color: var(--st-clear); }

/* Die Frage aus dem Backend — prominent, davor nichts Konkurrierendes */
.mx__q { margin: .6rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--fg); max-width: 74ch; }
.mx__anchor {
  margin: .55rem 0 0; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .02em;
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.mx__anchor b { color: var(--fg); font-weight: 700; }
.mx__legend { margin: .55rem 0 0; font-size: .76rem; line-height: 1.45; color: var(--fg-dim); max-width: 74ch; }
.mx__legend b { color: var(--brass); }

/* ── Tabelle je Artikel ── */
.mx__tblwrap { margin-top: .7rem; overflow-x: auto; }
.mx__tbl { width: 100%; border-collapse: collapse; min-width: 480px; }
.mx__tbl thead th {
  padding: .35rem .5rem; text-align: left;
  font-family: var(--f-mono); font-size: .62rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--fg-dim); border-bottom: 1px solid var(--line);
}
.mx__tbl thead th.mx__num { text-align: right; }
.mx__row th, .mx__row td { padding: .45rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.mx__row:has(+ .mx__deriv) th, .mx__row:has(+ .mx__deriv) td { border-bottom: 0; }
.mx__art { font-family: var(--f-mono); font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-align: left; }
.mx__num { text-align: right; font-family: var(--f-mono); font-size: .78rem; font-variant-numeric: tabular-nums; }
.mx__row--err th, .mx__row--err td { background: color-mix(in srgb, var(--st-block) 6%, transparent); }

/* Eingabefelder: Mono, rechtsbündig; VORSCHLAG = gestrichelter Messing-Rahmen */
.mxin {
  width: 100%; max-width: 7.2rem; height: 40px; padding: 0 .55rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--f-mono); font-size: .8rem; color: var(--fg);
  text-align: right; font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.mxin:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.mxin:disabled { opacity: .6; cursor: not-allowed; }
.mxin--prop {
  border: 1px dashed var(--brass);
  background: color-mix(in srgb, var(--brass-srf) 9%, var(--bg));
}

/* Herleitungs-Nebenzeile (nur bei belegtem Vorschlag) */
.mx__deriv td {
  padding: 0 .5rem .5rem; border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: .62rem; line-height: 1.5; letter-spacing: .01em;
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.mx__deriv b { color: var(--brass); font-weight: 700; }

.mx__rowerr { margin: .55rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--st-block); }
.mx__rowerr[hidden] { display: none; }

/* ── SUMMENWAAGE — Sprache des Konfidenz-Balkens, Tick = gedrucktes Netto ── */
.mxs { margin-top: .8rem; }
.mxs__track {
  position: relative; display: block; height: 10px;
  background: var(--bg-3); border-radius: 2px; overflow: hidden;
}
/* Das ±2-%-Band liegt ÜBER der Füllung (DOM-Reihenfolge), sonst verschwindet
   die Toleranz-Zone, sobald die Summe sie erreicht — genau dann zählt sie. */
.mxs__band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--fg) 16%, transparent); }
.mxs__fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: color-mix(in srgb, var(--brass-srf) 75%, transparent);
  transition: width var(--dur) var(--ease-out), background-color var(--dur);
}
.mxs__fill--ok { background: color-mix(in srgb, var(--st-clear) 62%, transparent); }
.mxs__fill--bad { background: color-mix(in srgb, var(--st-block) 62%, transparent); }
.mxs__tick { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  .mxs__fill { transition: none; }
}

/* Summen-Text = die eigentliche Rückmeldung (aria-live) — nie nur Farbe */
.mx__sum { margin: .45rem 0 0; font-family: var(--f-mono); font-size: .72rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.mx__sum--wait { color: var(--fg-dim); }
.mx__sum--ok { color: var(--st-clear); font-weight: 700; }
.mx__sum--bad { color: var(--st-block); font-weight: 700; }
.mx__sumgw { margin: .25rem 0 0; font-family: var(--f-mono); font-size: .64rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.mx__sumgw:empty { display: none; }

.mx__noterow { margin-top: .9rem; }
.mx__note { max-width: 26rem; }
.mx__actions { margin-top: 1rem; }
.mx [data-hint] { margin-top: .55rem; }
.mx [data-hint][hidden] { display: none; }

/* ── 400er-Fall: Server-Begründung + EXPLIZITER zweiter Schritt (force) ── */
.mxerr {
  margin-top: .9rem; padding: .75rem .85rem;
  background: color-mix(in srgb, var(--st-block) 6%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--st-block) 32%, var(--line-soft));
  border-left: 3px solid var(--st-block); border-radius: var(--radius);
}
.mxerr[hidden] { display: none; }
.mxerr__msg { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--st-block); font-weight: 600; }
.mxerr__actions { margin-top: .7rem; }
.mxerr__actions[hidden] { display: none; }

/* Gespeichert-Zustand der Karte */
.mx__done {
  margin-top: .9rem; padding: .6rem .8rem;
  display: flex; gap: .7rem .9rem; align-items: center; flex-wrap: wrap; justify-content: space-between;
  background: color-mix(in srgb, var(--st-clear) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--st-clear) 30%, transparent);
  border-left: 3px solid var(--st-clear); border-radius: var(--radius);
}
.mx__done[hidden] { display: none; }
.mx__done p { margin: 0; flex: 1 1 14rem; font-size: .78rem; line-height: 1.45; color: var(--fg); }
.mx__done .btn-line { margin-top: 0; }

/* ── Schmale Container (≤ 559px, z. B. 360-px-Viewport): Tabelle → gestapelte
   Zeilen-Karten. Kopfzeile bleibt für Screenreader (visually hidden), jede
   Zelle trägt ihr Label selbst (data-l) — kein horizontales Scrollen nötig. ── */
@container rsp (max-width: 559px) {
  .mx__tblwrap { overflow-x: visible; }
  .mx__tbl { min-width: 0; display: block; }
  .mx__tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mx__tbl tbody { display: block; }
  .mx__row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem .7rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft);
  }
  .mx__row th, .mx__row td { display: block; padding: 0; border-bottom: 0; text-align: left; }
  .mx__row th[scope="row"] { grid-column: 1 / -1; }
  .mx__row td::before, .mx__row th::before {
    content: attr(data-l); display: block; margin-bottom: .15rem;
    font-family: var(--f-mono); font-size: .58rem; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase; color: var(--fg-dim);
  }
  .mxin { max-width: none; text-align: left; }
  .mx__deriv { display: block; padding: .1rem 0 .6rem; border-bottom: 1px solid var(--line-soft); }
  .mx__deriv td { display: block; padding: 0; border-bottom: 0; }
}