:root {
  --task-detail-gap: var(--space-4);
  --task-detail-filter-width: var(--size-178);
  --task-detail-filters-width: var(--size-480);
  --task-detail-section-gap: var(--space-6);
  --task-detail-inset: var(--space-10);
  --task-detail-summary-columns: 0.75fr 1fr 1fr 1.5fr;
  --task-detail-title-font: var(--font-type-heading-large);
  --task-detail-heading-font: var(--font-type-heading-small);
  --task-detail-value-font: var(--font-type-value);
  --task-detail-note-font: var(--font-type-caption);
  --task-detail-link-font: var(--font-type-label-strong);
  --task-detail-origin-background: var(--color-clear);
  --task-detail-min-table-width: var(--size-760);
  --task-detail-run-width: 10%;
  --task-detail-status-width: 14%;
  --task-detail-attempts-width: 14%;
  --task-detail-origin-width: 28%;
  --task-detail-started-width: 22%;
}

.task-detail { padding: var(--task-detail-inset); }
.task-detail > .index-layout { margin: 0; --index-layout-inset: 0; --index-layout-gap: var(--task-detail-gap); --index-layout-title-font: var(--task-detail-title-font); }
.task-detail .index-layout__body { display: grid; gap: var(--task-detail-gap); }
.task-detail__summary { --stat-summary-columns: var(--task-detail-summary-columns); }
.task-detail__summary .flyout__trigger { --button-font: var(--task-detail-value-font); --button-padding: 0; }
.task-detail__history { margin: 0; display: grid; gap: var(--task-detail-gap); min-inline-size: 0; }
.task-detail__history-header, .task-detail__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--task-detail-gap); }
.task-detail__history-copy { flex: 1; min-inline-size: 0; }
.task-detail__history-copy h2 { margin: 0; font: var(--task-detail-heading-font); }
.task-detail__history-copy p { margin: 0; font: var(--task-detail-note-font); color: var(--color-muted-foreground); }
.task-detail__filters { margin: 0; flex: 0 1 var(--task-detail-filters-width); }
.task-detail__filters .select-field { flex: 1 1 var(--task-detail-filter-width); inline-size: auto; }
.task-detail .index-layout__footer { justify-content: space-between; }
.task-detail .data-table { --table-min-width: var(--task-detail-min-table-width); }
.task-detail__run-column { inline-size: var(--task-detail-run-width); }
.task-detail__status-column { inline-size: var(--task-detail-status-width); }
.task-detail__attempts-column { inline-size: var(--task-detail-attempts-width); }
.task-detail__attempts { display: grid; gap: var(--task-detail-gap); padding: 0; margin: 0; list-style: none; }
.task-detail__attempts li { display: grid; gap: var(--task-detail-gap); overflow-wrap: anywhere; }
.task-detail__attempts p { margin: 0; }
.task-detail__attempt-header { display: flex; align-items: center; justify-content: space-between; gap: var(--task-detail-gap); }
.task-detail__attempt-header > a { min-inline-size: 0; }
.task-detail__attempt-header > .badge { flex-shrink: 0; }
.task-detail__origin-column { inline-size: var(--task-detail-origin-width); }
.task-detail__started-column { inline-size: var(--task-detail-started-width); }
.task-detail__run-link, .task-detail__origin-link { color: var(--color-link); }
.task-detail__run-link { font: var(--task-detail-link-font); }
.task-detail__definition { min-inline-size: 0; margin-block-start: var(--task-detail-section-gap); }
.task-detail__triggers { display: grid; gap: var(--task-detail-section-gap); padding: 0; margin: 0; list-style: none; }
.task-detail__triggers li { display: grid; gap: var(--task-detail-gap); overflow-wrap: anywhere; }
.task-detail__triggers p { margin: 0; }
.task-detail__origin-button { padding: 0; border: 0; background: var(--task-detail-origin-background); font: inherit; text-align: start; cursor: pointer; }

@media (max-width: 800px) {
  .task-detail__summary { --stat-summary-columns: repeat(2, minmax(0, 1fr)); }
  .task-detail__history-header { align-items: stretch; flex-direction: column; }
  .task-detail__filters { flex-basis: auto; }
}
@media (max-width: 600px) {
  .task-detail { --task-detail-inset: var(--space-4); }
  .task-detail__filters { inline-size: 100%; flex-basis: auto; }
  .task-detail__filters .select-field { flex: 1 1 40%; min-inline-size: 0; }
}