/* ⬇️ Fortschritt langer Bridge-Aufträge (jobprogress.js): Zeile + PS1-Retro-Balken, globaler Chip in der Kopfzeile.
   Projektregel: keine CSS-Gradients — Füllung einfarbig, Textur/„läuft"-Muster als PNG-Kachel (--dither/--hatch). */

.jp { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jp-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jp-l { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.jp-t { font-weight: 700; }
.jp-s { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.jp-row .btn { padding: 2px 6px; flex: none; }
.jp-bar {
  display: block; height: 12px; border: 2px solid var(--line); background: var(--bg);
  box-shadow: 2px 2px 0 var(--shadow-c); overflow: hidden;
}
.jp-bar i {
  display: block; height: 100%;
  background-color: var(--accent); background-image: var(--dither); background-size: 4px 4px;
  border-right: 2px solid var(--line);
  transition: width .4s steps(4, end);
}
/* Größe unbekannt / Phase ohne Bytes (entpacken, prüfen): wanderndes Schraffur-Muster */
.jp-bar.ind i {
  border-right: 0;
  background-image: var(--hatch); background-size: 8px 8px;
  animation: jp-march .8s steps(4, end) infinite;
}
@keyframes jp-march { to { background-position: 8px 0; } }
.jp.err .jp-bar i { background-color: var(--danger); background-image: none; border-right: 0; }
.jp.err .jp-s { color: var(--danger); }

/* in anderen Ansichten */
.lw-logjob { padding: 6px 8px; }
.lw-cprog:has(.jp) { align-self: stretch; animation: none; font-family: inherit; font-size: .84rem; color: var(--text); }
.hsx-prog { margin-top: 6px; }

/* globaler Hinweis in der Kopfzeile: „⬇️ Gemma 4 E4B 43 %" + Mini-Balken, Klick → Engine-Karte / Hindsight */
.jp-chip {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px;
  height: 34px; max-width: min(46vw, 260px); padding: 2px 8px;
  border: 2px solid var(--line); background: var(--surface); color: var(--text);
  box-shadow: 2px 2px 0 var(--shadow-c); cursor: pointer;
  font-family: var(--px); font-size: .55rem; font-weight: 700; line-height: 1.2;
  animation: pop .15s steps(3, end);
}
.jp-chip:active { transform: translate(2px, 2px); box-shadow: none; }
.jp-chip-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-chip-bar { display: block; height: 5px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.jp-chip-bar i { display: block; height: 100%; background-color: var(--accent); }
.jp-chip-bar.ind i { background-image: var(--hatch); background-size: 8px 8px; animation: jp-march .8s steps(4, end) infinite; }
@media (max-width: 560px) {
  .jp-chip-n { display: none; }   /* Handy: nur Symbol + Prozent */
  .jp-chip { max-width: 30vw; }
}
@media (prefers-reduced-motion: reduce) {
  .jp-bar i { transition: none; }
  .jp-bar.ind i, .jp-chip-bar.ind i { animation: none; }
}