/* Paralleles Kettenrechnen – nur Theme-Tokens aus style.css */
.parallel { display:flex; flex-direction:column; gap:16px; }

.pl-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.pl-card {
  position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; min-height:132px;
  padding:10px 10px 12px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card);
  transition:border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.pl-card-head { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:22px; }
.pl-id { font-size:0.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.pl-badge {
  padding:2px 8px; border-radius:999px; font-size:0.6875rem; font-weight:800;
  background:var(--accent); color:var(--on-accent); animation:pl-badge-in 300ms var(--ease);
}
.pl-main {
  flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:clamp(1.75rem, 9vw, 2.75rem); font-weight:800; line-height:1.1;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.pl-main.is-start { color:var(--text); }
.pl-main.is-op { color:var(--accent-text); }
.pl-main.is-idle { color:var(--muted); opacity:.5; }
.pl-main.is-answer { font-size:clamp(1.25rem, 7vw, 2rem); }
.pl-recent { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; min-height:22px; }
.pl-chip {
  padding:1px 8px; border-radius:999px; font-size:0.75rem; font-variant-numeric:tabular-nums;
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
}
.pl-chip.is-last { color:var(--text); }

.pl-card.is-pulse {
  border-color:var(--accent); background:var(--accent-soft);
  animation:pl-pulse 900ms var(--ease);
}
.pl-card.is-active { border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--glow-accent); }
.pl-card.is-answered .pl-main { color:var(--muted); }

.pl-time { display:flex; align-items:center; gap:10px; }
.pl-time-track { flex:1; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.pl-time-fill {
  height:100%; width:100%; border-radius:999px; background:var(--accent);
  transform-origin:left center; transform:scaleX(var(--pl-ratio, 1));
}
.pl-secs { min-width:3ch; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted); }
.pl-paused { text-align:center; font-weight:700; color:var(--warn); }
.pl-paused[hidden] { display:none; }
.pl-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.pl-progress { text-align:center; font-weight:700; letter-spacing:.04em; color:var(--muted); font-variant-numeric:tabular-nums; }
.pl-answer { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pl-prompt { font-size:1.125rem; }

.pl-summary { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.pl-results { display:flex; flex-direction:column; gap:10px; }
.pl-res {
  display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border);
}
.pl-res.is-good { border-color:var(--good); background:var(--good-soft); }
.pl-res.is-bad { border-color:var(--bad); background:var(--bad-soft); }
.pl-res-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pl-res.is-good .pl-verdict { color:var(--good); font-weight:800; }
.pl-res.is-bad .pl-verdict { color:var(--bad); font-weight:800; }
.pl-res-nums { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-weight:700; font-variant-numeric:tabular-nums; }
.pl-history { font-size:0.875rem; color:var(--muted); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; line-height:1.5; }

@keyframes pl-pulse {
  0% { transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  25% { transform:scale(1.04); box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes pl-badge-in { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .pl-card.is-pulse, .pl-badge { animation:none; }
  .pl-card { transition:none; }
}