.job-details summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
}

.job-details summary::-webkit-details-marker {
  display: none;
}

.job-details summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 999px;
}

.job-details-content {
  width: min(520px, 70vw);
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  overflow-wrap: anywhere;
}

.job-details-content p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.job-counts {
  grid-template-columns: minmax(90px, 1fr) auto;
  margin-top: 5px;
}

.job-message { margin: 0 0 8px; font-weight: 650; }
.job-progress { position: relative; height: 9px; overflow: hidden; border-radius: 999px; background: #e4e7ec; }
.job-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .25s ease;
}
.job-progress.indeterminate > span {
  position: absolute;
  animation: job-progress-slide 1.2s ease-in-out infinite;
}
@keyframes job-progress-slide {
  from { left: -35%; }
  to { left: 100%; }
}
.job-progress-text { margin: 5px 0 10px; color: var(--muted); font-size: 13px; }
.job-heartbeat-warning {
  margin: 8px 0;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fffaeb;
  color: var(--warning);
}
.job-error {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fef3f2;
  color: var(--danger);
}
.job-events-wrap { margin-top: 12px; }
.job-events {
  display: grid;
  gap: 5px;
  max-height: 190px;
  margin: 6px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.job-events li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  font-size: 13px;
}
.job-events time { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 850px) {
  .grid-two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .job-details-content { width: min(520px, calc(100vw - 90px)); }
}
@media (prefers-reduced-motion: reduce) {
  .job-progress.indeterminate > span { animation-duration: 2.5s; }
  .job-progress > span { transition: none; }
}
