/* systemmap · redaktion.css
 * ════════════════════════════════════════════════════════════════════
 * Die redaktionelle Werkbank. Sie erfindet keine Farbe, keinen Radius
 * und keine Schriftgroesse: alles kommt aus werter-tokens.css, nach
 * docs/ui/tokens.md. Raster, Panelbau und Abstaende kommen aus
 * dashboard.css; hier steht nur, was es dort nicht gibt.
 *
 * Die Radienregel gilt durchgehend. Belegstuecke -- Pillen, der
 * Quellkasten, die Warenklassen, die Meldungen -- tragen 2px, weil
 * Tatsachen scharfe Ecken haben. Bedienelemente tragen 8px. Panels
 * tragen 18px.
 *
 * Der Aufbau ist eine Werkbank und kein Formular: die Schlange links
 * bleibt stehen, waehrend der Vorgang unter Entscheidung rechts den
 * Platz fuellt. Wer sich durch achtzig Zeilen arbeitet, soll seinen
 * Ort nie verlieren.
 *
 * Seit dem Umzug der TED-Pruefung traegt dieselbe Bauform zwei
 * Vorraete. Sie bekommt dafuer fast nichts Neues: pr__bar, pr__zahl,
 * pr__item, pr__review, pr__source, pr__field, pr__row, pr__decide,
 * pr__hint, pr__saved, pr__empty, rpill und der 900px-Block tragen die
 * Bekanntmachung unveraendert. Dazugekommen sind der Umschalter, das
 * Zitat, die Warenklassen, die Kennzeichnungsleiste und die Meldung.
 */

/* Das Attribut hidden muss gewinnen. dashboard.css loest das fuer
   .panel ("display:flex wuerde das Attribut hidden stillschweigend
   uebergehen"); der Statusstreifen, alles darunter und die bedingten
   Felder der Kennzeichnung brauchen dieselbe Behandlung. */
[hidden] { display: none !important; }

/* ── .input: das fehlende Bedienelement des Hauses ────────────────── */
/* werter-controls.css fuehrt .btn-primary, .btn-quiet, .cite, .chip,
   .progpick, .search, .select und .slider -- aber KEIN .input, und
   dashboard.css auch nicht. Nachgesehen, nicht vermutet:
   Systemmap-main/assets/css/werter-controls.css enthaelt den Selektor
   nicht. Die Eingabefelder beider Strecken (body, source, fpga_class,
   fpga_why, die Entwurfszeilen und .red__addlink) standen deshalb als
   Browser-Vorgabe da: ohne Rahmen aus --line und ohne die 8px, die die
   Radienregel fuer Bedienelemente vorschreibt -- unmittelbar neben dem
   sauber gestalteten .select im selben Block.
   Die Werte sind die von .select, Zeichen fuer Zeichen. Diese Regel
   gehoert nach werter-controls.css, sobald diese Datei einmal zu einer
   Lieferung gehoert; bis dahin steht sie hier, damit sie ueberhaupt
   irgendwo steht -- und an genau einer Stelle. */
.input {
  font-family: var(--sans); font-size: 0.875rem;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; min-height: 36px;
  transition: border-color 0.12s;
}
.input:hover { border-color: var(--dim); }

/* ── Die Leiste der Hinterzimmer ──────────────────────────────────── */
/* Die beiden internen Bereiche gehoeren zusammen und sollen sich
   gegenseitig kennen. Gruen, weil es der Briefkopf ist -- und weil es
   an dieser Stelle den Unterschied macht: hier ist Betriebsgelaende,
   nicht das Board, das ein Kunde sieht. */
.deskbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 9px 24px; background: var(--green); color: #FFFFFF;
}
.deskbar__here {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.deskbar__go {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #FFFFFF; text-decoration: none; opacity: .72;
  border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 1px;
}
.deskbar__go:hover { opacity: 1; border-bottom-color: #FFFFFF; }
.deskbar__grow { flex: 1 1 auto; }
.deskbar__who {
  font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.7);
}
@media (max-width: 640px) { .deskbar { padding: 9px 18px; } .deskbar__who { display: none; } }

/* ── Kopfleiste der Strecke ───────────────────────────────────────── */
/* Zwei Zahlen, gross genug, dass man sie im Vorbeigehen liest. Die
   offene Menge traegt Gewicht, die erledigte nicht -- was noch zu tun
   ist, ist die Nachricht. */
.pr__bar {
  display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.pr__zahl { display: flex; align-items: baseline; gap: 10px; }
.pr__zahl b {
  font-family: var(--serif, Merriweather, Georgia, serif);
  font-weight: 700; font-size: 40px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--green);
}
.pr__zahl--still b { color: var(--dim); font-size: 28px; }
.pr__zahl__l {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  line-height: 1.5;
}
.pr__filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ── Der Umschalter der Vorraete ──────────────────────────────────── */
/* Links, vor den Zahlen: erst waehlt man den Vorrat, dann engt man ihn
   ein. Der Zustand haengt an aria-pressed, weil werter-controls.css
   genau daran haengt -- .chip--on ist in keiner Stilvorlage des Hauses
   definiert und hat nie etwas gefaerbt.
   Die Zahl steht im Chip und ist die Zahl des jeweiligen Vorrats, auch
   des nicht gewaehlten: ein Umschalter, der die andere Menge
   verschweigt, waere ein Versteck. */
.pr__wahl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr__wahl b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 700; margin-left: 4px;
}

/* ── Meldung neben der Strecke ────────────────────────────────────── */
/* Fuer das eine, was nicht in eine Zahl passt: ein Vorrat, der sich
   nicht laden liess -- und fuer ein Konto, dem die Rolle fehlt.
   Scharfe Ecken, weil es ein Befund ist und kein Bedienelement.
   Flaeche und Schrift stehen NICHT hier, sondern unten bei
   .rpill--bad: dieselbe Aussage, derselbe Ton, und die Zahl steht in
   dieser Datei genau einmal. Ein Token fuer die drei Belegtinten
   (#E6EFE6 / #F6E6E4 / #F7EEDA) fehlt in werter-tokens.css; solange
   es fehlt, ist EIN Fundort das Beste, was diese Datei tun kann --
   ein zweiter machte jede spaetere Korrektur zu zwei Stellen. */
.pr__melde {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.5;
  border-radius: 2px; padding: 8px 10px;
}
.pr__melde:empty { display: none; }

/* ── Zwei Spalten: Schlange und Entscheidung ──────────────────────── */
.pr__body {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 0; align-items: start;
  padding: 0 !important;   /* die Spalten bringen ihre Abstaende mit */
  border-top: 1px solid var(--line);
}

.pr__queue {
  border-right: 1px solid var(--line);
  max-height: 70vh; overflow-y: auto;
  background: var(--hover);
}
.pr__list { list-style: none; margin: 0; padding: 0; }

/* Eine Zeile in der Schlange: Fach, Titel, Datum. Der laufende Vorgang
   traegt links eine Marke in Terra -- die einzige Stelle, an der die
   Akzentfarbe auftaucht, damit sie etwas bedeutet. */
.pr__item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit; background: none;
  border: 0; border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  padding: 12px 14px 12px 13px;
}
.pr__item:hover { background: var(--panel); }
.pr__item[aria-current="true"] {
  background: var(--panel); border-left-color: var(--terra);
}
/* Der Fokusring bleibt sichtbar. Er ist die einzige Anzeige, die der
   Browser ohnehin zeichnet, und beantwortet die Frage, worauf die
   naechste Taste wirkt.
   Damit er das WAHR beantwortet, hat die Schlange genau einen
   Tabstopp, und der sitzt auf der laufenden Zeile (renderQueue()
   setzt tabindex je Zeile). Vorher konnte man sich mit Tab auf Zeile
   05 stellen -- Ring dort, Terra auf Zeile 01 -- und F entschied
   Zeile 01: zwei Marken auf zwei Zeilen, und die falsche davon sah
   nach "hier wirkt die naechste Taste" aus. */
.pr__item:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.pr__item__top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
/* Die Laufnummer wie auf einem Korrekturbogen: man sagt "die
   siebenundzwanzig", nicht "die mit dem langen Titel". */
.pr__item__nr {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--line); letter-spacing: .06em; flex: none;
}
.pr__item[aria-current="true"] .pr__item__nr { color: var(--terra); }
.pr__item__title {
  font-size: 13.5px; line-height: 1.45; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pr__item__date {
  font-family: var(--mono); font-size: 10px; color: var(--dim);
  margin-left: auto; white-space: nowrap;
}

/* ── Der Vorgang zur Entscheidung ─────────────────────────────────── */
.pr__review { padding: 22px 24px 0; min-width: 0; }

.pr__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
/* Der Stand in der Strecke, gesetzt wie ein Seitenzaehler. */
.pr__pos {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--terra); line-height: 1;
}
.pr__pos small {
  font-size: 11px; font-weight: 600; color: var(--dim);
  letter-spacing: .08em; margin-left: 2px;
}

/* Der Titel eines Waechterfunds ist ein Textfeld, sieht aber wie eine
   Ueberschrift aus, bis man hineinklickt: bearbeiten soll
   selbstverstaendlich sein und kein eigener Modus.

   Ein Textfeld und kein einzeiliges Eingabefeld, weil eine
   Bekanntmachung regelmaessig laenger als eine Zeile heisst. Ein
   Titel, dessen Ende der Pruefer nicht sieht, ist nicht pruefbar. */
.pr__title {
  display: block; width: calc(100% + 8px);
  margin: 8px 0 0 -8px; padding: 6px 8px;
  font-family: var(--serif, Merriweather, Georgia, serif);
  font-weight: 700; font-size: 21px; line-height: 1.32; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: 8px;
  resize: vertical; overflow: hidden; min-height: 2.9em;
}
.pr__title:hover  { border-color: var(--line); }
.pr__title:focus  { border-color: var(--green); background: var(--panel); outline: none; overflow: auto; }

/* Der Titel einer TED-Bekanntmachung ist dagegen ein Zitat und
   deshalb KEIN Feld: gleiche Schrift, gleicher Platz, aber kein
   Rahmen, der zum Hineinschreiben einlaedt. Was wir zitieren,
   schreiben wir nicht um. */
.pr__zitat {
  margin: 8px 0 0; padding: 6px 0;
  font-family: var(--serif, Merriweather, Georgia, serif);
  font-weight: 700; font-size: 21px; line-height: 1.32; color: var(--text);
}

.pr__meta {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  margin: 6px 0 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

/* Die Warenklassen einer Bekanntmachung. Die Codes, wegen derer die
   Zeile ueberhaupt eingesammelt wurde, stehen gruen gerahmt -- der
   Rest blass. Keine Pille: eine Pille waere eine Aussage, ein Code ist
   ein Fundort. */
.cpv { display: flex; gap: 5px; flex-wrap: wrap; }
.cpv__x {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 2px; padding: 2px 5px;
}
.cpv__x--traf { color: var(--text); border-color: var(--green); font-weight: 600; }

/* Die Quelle: das Belegstueck. 2px, scharfe Ecken. */
.pr__source {
  border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 2px; padding: 12px 14px; margin: 16px 0 0;
  background: var(--hover);
}
.pr__source__label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  display: block; margin-bottom: 6px;
}
.pr__source a { word-break: break-all; font-size: 13.5px; }

.pr__field { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.pr__field > .meta { color: var(--dim); }
.pr__field textarea {
  min-height: 96px; resize: vertical; font: inherit; line-height: 1.6;
}
.pr__row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.pr__row > * { flex: 1 1 200px; }

/* ── Die FPGA-Kennzeichnung ───────────────────────────────────────── */
/* Sie gehoert zur Entscheidung und nicht zum Datensatz: sie entsteht
   in dem Augenblick, in dem jemand die Zeile in den Radar stellt.
   Deshalb steht sie unmittelbar ueber der Entscheidungsleiste, durch
   dieselbe gestrichelte Linie mit ihr verbunden, die sie auf dem
   Kundendesk hatte. Die Trennung belegt/vermutet ist dieselbe wie
   ueberall im Haus; die Pruefregel der Tabelle weist alles andere ab,
   also fragt die Oberflaeche vorher. */
.pr__fp {
  margin-top: 22px; padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.pr__fp__label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  display: block;
}
.pr__fp .pr__field { margin-top: 10px; }
/* Die Herleitung ist ein Satz, kein Aufsatz. */
.pr__fp .pr__field textarea { min-height: 62px; }
.pr__fp__hint { font-size: 12.5px; line-height: 1.5; color: var(--dim); margin: 10px 0 0; }

/* ── Die Entscheidung ─────────────────────────────────────────────── */
.pr__decide {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px -24px 0; padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.pr__hint {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--dim);
}
.pr__hint kbd {
  font-family: var(--mono); font-size: 10px;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 1px 4px; margin: 0 1px; background: var(--hover);
}
.pr__saved {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sttext-green, #2E6B32);
}

/* ── Leerer Vorrat ────────────────────────────────────────────────── */
/* Ein leerer Arbeitsplatz soll nach Feierabend aussehen, nicht nach
   Fehler. Die Marke oben ist dieselbe, die eine laufende Zeile traegt
   -- nur ohne Inhalt dahinter.
   Dasselbe Bild traegt den anderen Fall: ein Vorrat, der sich nicht
   laden liess. Der Unterschied steht im Text, nicht in der Form --
   "alles entschieden" und "ich weiss es nicht" duerfen nie gleich
   klingen, aber sie stehen am selben Ort. */
.pr__empty {
  padding: 56px 24px 64px; text-align: center; color: var(--dim);
  max-width: 42ch; margin: 0 auto;
}
.pr__empty::before {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--terra); margin: 0 auto 20px; border-radius: 2px;
}
.pr__empty b {
  display: block; font-family: var(--serif, Merriweather, Georgia, serif);
  font-size: 20px; line-height: 1.35; color: var(--text); margin-bottom: 8px;
}
.pr__empty span { font-size: 14px; line-height: 1.6; }
/* Die Rueckmeldung der letzten Entscheidung steht im Leerbild, weil der
   Entscheidungsfuss mit der letzten Zeile verschwindet. Sie steht
   unter dem Text, nicht darin: erst die Quittung lesen, dann den
   Feierabend. */
.pr__empty .pr__saved { display: block; margin-top: 18px; font-size: 10px; }

/* Der Hinweis auf den anderen Vorrat. Terra, weil er auf etwas zeigt,
   das NICHT hier liegt -- dieselbe Bedeutung, die Terra im Haus ueberall
   traegt. Scharfe Ecken: es ist ein Befund ueber den Bestand, kein
   Bedienelement. */
.pr__empty__hin {
  display: block; margin-top: 16px;
  border: 1px solid var(--terra); border-radius: 2px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.55;
}

/* ── Pillen: scharfe Ecken, weil sie Belege sind ──────────────────── */
.rpill {
  display: inline-block; border-radius: 2px; padding: 2px 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.rpill--ok    { background: #E6EFE6; color: var(--sttext-green, #2E6B32); }
/* .pr__melde teilt sich diese Zeile: dieselbe Aussage ("hier stimmt
   etwas nicht"), derselbe Ton, EINE Zahl. Siehe dort. */
.rpill--bad,
.pr__melde    { background: #F6E6E4; color: var(--sttext-red, #9B2C22); }
.rpill--warn  { background: #F7EEDA; color: var(--sttext-amber, #B5801F); }
.rpill--quiet { background: var(--hover); color: var(--dim); }

/* ══ Zugaenge: wer welche Werkzeuge hat ════════════════════════════ */

.zg { display: flex; flex-direction: column; gap: 8px; }
.zg__row {
  display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
}
.zg__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zg__who b { font-size: 14.5px; word-break: break-all; }
.zg__who .meta { color: var(--dim); }
.zg__tools { display: flex; gap: 6px; flex-wrap: wrap; }
.zg__act { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }

@media (max-width: 760px) {
  .zg__row { grid-template-columns: 1fr; }
  .zg__act { justify-content: flex-start; }
}

/* ══ Entwuerfe: die tiefe Pruefung ═════════════════════════════════ */

.red__work { display: flex; flex-direction: column; gap: 8px; }
.red__workrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
  background: none; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.red__workrow:hover { background: var(--hover); }
.red__workrow[aria-current="true"] { border-color: var(--green); }
.red__workname { font-weight: 700; }
.red__workcounts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.red__filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 20px; }
.red__rows { display: flex; flex-direction: column; gap: 16px; }

.red__row { border: 1px solid var(--line); border-radius: 18px; padding: 0; overflow: hidden; }
.red__row[data-verdict="approved"] { border-color: var(--st-green, #2E6B32); }
.red__row[data-verdict="gap"]      { border-color: var(--terra); }
.red__row[data-verdict="rejected"] { opacity: .55; }

.red__rowhead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--hover);
}
.red__ord { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--dim); flex: none; }
.red__supplier { font-weight: 700; }
.red__system { color: var(--dim); font-size: 14px; flex: 1 1 320px; }
.red__pills { display: flex; gap: 6px; flex-wrap: wrap; }

.red__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.red__claim { padding: 16px 18px; border-right: 1px solid var(--line); }
.red__proof { padding: 16px 18px; }

.red__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.red__cell { display: flex; flex-direction: column; gap: 3px; }
.red__cell--wide { grid-column: 1 / -1; }
.red__cell > .meta { color: var(--dim); }

.red__context {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 12px 14px; max-height: 260px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.red__context mark {
  background: #E6EFE6; color: var(--sttext-green, #2E6B32);
  padding: 1px 2px; font-weight: 700;
}
.red__context--miss mark { background: #F6E6E4; color: var(--sttext-red, #9B2C22); }
.red__why { font-size: 13.5px; color: var(--dim); margin: 10px 0 0; }

.red__links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.red__link {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 2px; padding: 6px 8px; font-size: 13px;
}
.red__link a { word-break: break-all; }
.red__addlink { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.red__addlink .input { flex: 1 1 200px; }

.red__verdict {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--line);
}
.red__verdict .red__saved {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sttext-green, #2E6B32); margin-left: auto;
}

.red__item {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
}
.red__itembody { flex: 1 1 320px; }
.red__itembody h3 { margin: 0 0 4px; font-size: 15px; }
.red__itembody p  { margin: 0; font-size: 13.5px; color: var(--dim); }

/* ── Schmale Schirme ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pr__body { grid-template-columns: 1fr; }
  .pr__queue {
    border-right: 0; border-bottom: 1px solid var(--line);
    max-height: 240px;
  }
  .pr__review { padding: 18px 18px 0; }
  .pr__decide { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .pr__hint { display: none; }
}
@media (max-width: 860px) {
  .red__body  { grid-template-columns: 1fr; }
  .red__claim { border-right: 0; border-bottom: 1px solid var(--line); }
  .red__grid  { grid-template-columns: 1fr; }
}