/* Hallmark · Workbench · Plungo console system · orange accent · P4 H5 E4 S5 R5 V4 */

/* Tasks: status tabs, search and the task table. */
.product-queue-heading { margin-bottom: var(--space-5); }
.product-task-queue {
  container-type: inline-size;
  --queue-columns: minmax(0, 2.3fr) minmax(8.75rem, .75fr) minmax(0, .95fr) minmax(0, .75fr) minmax(7rem, .55fr) 1rem;
}
.product-queue-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}
.task-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.task-tabs .task-summary-chip { min-height: 2.25rem; padding-inline: var(--space-3); border-color: var(--color-transparent); font-size: var(--text-sm); }
.task-tabs .task-summary-chip strong { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.task-tabs .task-summary-chip strong:empty { display: none; }
.task-tabs .task-summary-chip[aria-pressed="true"] { border-color: var(--color-rule-strong); background: var(--color-paper-4); }
.task-tabs .task-summary-sample { flex-basis: 100%; padding-inline: var(--space-3); font-size: var(--text-xs); }
.product-queue-search { position: relative; flex: 1 1 16rem; min-width: 0; }
.product-queue-search > svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-3);
  width: .875rem;
  height: .875rem;
  color: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.product-queue-search input { width: 100%; min-height: 2.5rem; padding-inline-start: calc(var(--space-3) + 1.375rem); }
.product-queue-agent-filter { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.product-queue-agent-filter[hidden] { display: none; }
.product-queue-agent-filter select { min-height: 2.5rem; max-width: 14rem; }
.product-queue-bar > .icon-button { flex: 0 0 auto; min-height: 2.5rem; }
.product-queue-status { padding: var(--space-2) var(--space-4) 0; color: var(--color-muted); font-size: var(--text-sm); }
.product-queue-status:empty { display: none; }
.product-queue-columns, #product-task-list .product-queue-row {
  display: grid;
  grid-template-columns: var(--queue-columns);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.product-queue-columns {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}
#product-task-list > li { padding: 0; }
#product-task-list .product-queue-row {
  min-height: 3.75rem;
  border-radius: 0;
  color: var(--color-body);
  overflow-wrap: anywhere;
}
#product-task-list .product-queue-row:hover { background: var(--color-paper-3); }
#product-task-list .product-queue-row:active { background: var(--color-paper-4); }
#product-task-list .product-queue-row:focus-visible { outline-offset: -2px; }
/* A long title (an older task's, or one from an intake source) keeps to two lines; its title attribute and the task view hold it whole. */
.product-queue-row .task-meta strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-body);
  font-weight: 560;
  line-height: 1.4;
}
.product-task-line { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.product-queue-row .product-task-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.product-task-line .product-task-reason { color: var(--color-body); }
.product-task-line .product-task-question-count { color: var(--color-warning); }
.product-queue-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.product-queue-scope, .product-queue-agent, #product-task-list .product-queue-updated { min-width: 0; color: var(--color-muted); font: var(--text-sm)/1.45 var(--font-body); }
#product-task-pagination { border-top: 1px solid var(--color-rule); }

/* One status badge per task: blue while Polo works, amber while it waits on a person. */
.badge.product-task-status { font-family: var(--font-body); font-size: var(--text-xs); }
.badge.product-task-status:is([data-state="running"], [data-state="queued"]) { color: var(--color-info); background: var(--color-info-soft); }
.badge.product-task-status[data-state="canceled"] { color: var(--color-muted); }

/* The task view. */
#product-task-dialog.product-task-inspector {
  width: min(calc(100% - 2rem), 68rem);
  max-height: min(92dvh, 64rem);
  background: var(--color-paper-2);
  scroll-padding-block-start: 7rem;
}
.product-task-inspector-header { padding: var(--space-4) var(--space-6); }
.product-task-inspector-header > div:first-child { min-width: 0; }
.product-task-inspector-header > .controls { gap: var(--space-1); }
#product-task-dialog #product-task-title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.product-task-inspector .panel-status:empty { display: none; }
.product-task-inspector :is(h3, h4, h5) { margin: 0; overflow-wrap: anywhere; }
.product-task-inspector h3 { font-size: var(--text-md); font-weight: 600; }
.product-task-inspector h4 { color: var(--color-ink); font-size: var(--text-body); font-weight: 600; }
.product-task-inspector h5 { color: var(--color-ink); font-size: var(--text-sm); font-weight: 550; }
.product-task-overview:empty { display: none; }
.product-task-overview-body { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-rule); }
.product-task-state { align-items: center; gap: var(--space-2); }
.product-task-state > button:first-of-type { margin-inline-start: auto; }
.product-task-headline { max-width: 72ch; color: var(--color-ink); font-size: var(--text-md); font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.product-task-overview-body .product-task-outcomes { color: var(--color-muted); font-size: var(--text-sm); }

/* The stages a task went through, left to right. */
.task-progress { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.task-progress > li {
  position: relative;
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  align-content: start;
  column-gap: var(--space-2);
  flex: 1 1 7.5rem;
  min-width: 0;
  padding-inline-end: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.task-progress > li::after {
  content: "";
  position: absolute;
  inset-block-start: .5rem;
  inset-inline: 1.5rem var(--space-2);
  height: 1px;
  background: var(--color-rule);
}
.task-progress > li:last-child::after { display: none; }
.task-progress-mark {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  line-height: 1rem;
  text-align: center;
}
.task-progress-label { position: relative; z-index: 1; justify-self: start; padding-inline-end: var(--space-2); background: var(--color-paper-2); line-height: 1.15rem; }
.task-progress-note { grid-column: 2; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.45; overflow-wrap: anywhere; }
.task-progress > [data-state="done"] { color: var(--color-body); }
.task-progress > [data-state="done"] .task-progress-mark { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-soft); }
.task-progress > [data-state="done"] .task-progress-mark::before { content: "✓"; }
.task-progress > [data-state="done"]::after { background: color-mix(in oklab, var(--color-success) 50%, var(--color-rule)); }
.task-progress > [data-state="active"] { color: var(--color-ink); }
.task-progress > [data-state="active"] .task-progress-mark { border-color: var(--color-info); background: var(--color-info-soft); box-shadow: 0 0 0 3px var(--color-info-soft); }
.task-progress > [data-state="waiting"] { color: var(--color-ink); }
.task-progress > [data-state="waiting"] .task-progress-mark { border-color: var(--color-warning); background: var(--color-warning-soft); box-shadow: 0 0 0 3px var(--color-warning-soft); }
.task-progress > [data-state="waiting"] .task-progress-note { color: var(--color-warning); }
.task-progress > [data-state="failed"] { color: var(--color-error); }
.task-progress > [data-state="failed"] .task-progress-mark { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-soft); }
.task-progress > [data-state="failed"] .task-progress-mark::before { content: "!"; font-weight: 700; }
.task-progress > [data-state="stopped"] .task-progress-mark { border-style: dashed; }
.task-progress > [data-state="pending"] .task-progress-mark { border-style: dashed; background: var(--color-transparent); }

.product-task-inspector .product-task-questions { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-rule); }
.product-task-inspector #product-detail-content { padding: var(--space-5) var(--space-6) var(--space-7); }
.product-task-inspector .product-task-detail { gap: var(--space-4); }
.product-task-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, .42fr); gap: var(--space-7); }
.product-task-main, .product-task-context { display: grid; align-content: start; gap: var(--space-5); min-width: 0; }
.product-task-main > .task-detail-block { gap: var(--space-3); }
.product-task-main > :first-child { padding-top: 0; border-top: 0; }
.product-task-summary .task-description { max-width: 72ch; color: var(--color-ink); line-height: 1.65; }
.product-task-summary .field-help { max-width: 72ch; }

/* The side panel: details, cost and the collapsed technical details. */
.product-task-context { align-content: start; gap: var(--space-4); border-inline-start: 1px solid var(--color-rule); padding-inline-start: var(--space-6); font-size: var(--text-sm); }
.product-task-context .operation-facts { grid-template-columns: minmax(5.5rem, .7fr) minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
.product-task-context .operation-facts dd { overflow-wrap: anywhere; }
.product-task-context .task-cost-headline { margin: 0; color: var(--color-ink); font: 500 var(--text-sm)/1.5 var(--font-body); }
.product-task-context .field-help { font-size: var(--text-xs); }
.product-task-context .task-cost-grid dd { font-variant-numeric: tabular-nums; }
.product-task-context .product-task-context-block { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-rule); }
.product-task-context .badge { justify-self: start; }
.product-task-context > details { padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.product-task-context > details[open] > :not(summary) { margin-top: var(--space-3); }
.product-task-technical { display: grid; }
.product-task-technical[open] > h4 { margin-top: var(--space-4); }
.product-task-technical code { font-size: var(--text-xs); overflow-wrap: anywhere; }
.product-task-usage > li { display: grid; gap: var(--space-2); }

/* Changes: each proposed change as a card. */
.product-task-approvals > .operation-card { padding: var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.product-task-decision > .operation-card:first-of-type { border-color: color-mix(in oklab, var(--color-warning) 45%, var(--color-rule)); }
.operation-card > header h4 { line-height: 1.45; }
.operation-card :is(.approval-closed, .approval-rule, .approval-decided) { color: var(--color-muted); font-size: var(--text-sm); }
.approval-expired { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--color-warning); font-size: var(--text-sm); }
.approval-expired > p { flex: 1 1 18rem; }
.product-approval-scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-3) 0;
  border-block: 1px solid var(--color-rule);
  overflow-wrap: anywhere;
}
.product-approval-scope dt { color: var(--color-muted); font-size: var(--text-xs); }
.product-approval-scope dd { color: var(--color-ink); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
/* A refused plan's explanation can name a 40-character branch head. */
.product-terraform-plan { overflow-wrap: anywhere; }
.product-plan-changes[open] > h5 { margin-top: var(--space-2); }
.product-plan-changes[open] > ul { margin-top: var(--space-1); }
.product-request-identity[open] > :not(summary) { margin-top: var(--space-2); }

/* Activity: each step's identifiers stay folded under it. */
.product-task-timeline .timeline-body > strong { font-weight: 500; }
.timeline-ids > summary { margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-xs); }
.timeline-ids[open] > .operation-facts { margin-top: var(--space-2); font-size: var(--text-xs); }

/* Polo and its helpers. */
.product-task-agents .product-run-tree { gap: 0; }
.product-task-agents .product-task-agent-run {
  padding: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--color-rule);
  border-radius: 0;
}
.product-task-agents .product-task-agent-run > .product-run-tree { margin-top: var(--space-1); }
.product-task-agents .product-task-agent-run > details[open] > .artifact-list { margin-top: var(--space-2); }
.product-task-agents .artifact-list > .product-evidence {
  border: 0;
  border-top: 1px solid var(--color-rule);
  border-radius: 0;
  background: var(--color-transparent);
  padding: var(--space-3) 0;
}
.product-task-agents .product-run-tree .product-run-tree .product-run-tree { padding-inline-start: 0; border-inline-start: 0; }

@container (max-width: 54rem) {
  .product-queue-columns { display: none; }
  #product-task-list .product-queue-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding-inline-end: var(--space-8);
  }
  .product-queue-row .task-meta { flex: 1 1 100%; }
  .product-queue-row > svg { position: absolute; inset-block-start: 50%; inset-inline-end: var(--space-4); transform: translateY(-50%); }
  .product-queue-row :is(.product-queue-agent, .product-queue-updated)::before { content: "· "; }
}
@container (max-width: 30rem) {
  .product-queue-bar { padding-inline: var(--space-3); }
  .task-tabs { flex: 1 1 100%; }
  .task-tabs .task-summary-chip { min-height: 2.5rem; }
  .product-queue-agent-filter { flex: 1 1 auto; }
  .product-queue-agent-filter select { flex: 1 1 auto; max-width: none; }
  .product-queue-row .product-queue-agent { display: none; }
}
@media (max-width: 760px) {
  #product-task-dialog.product-task-inspector {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .product-task-inspector-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4);
  }
  .product-task-inspector-header > div:first-child { display: contents; }
  .product-task-inspector-header .eyebrow { grid-column: 1; grid-row: 1; }
  .product-task-inspector-header > .controls { grid-column: 2; grid-row: 1; }
  .product-task-inspector-header .icon-button { min-height: 2.5rem; }
  #product-task-dialog #product-task-title { grid-column: 1 / -1; grid-row: 2; display: block; overflow: visible; margin-top: 0; }
  .product-task-inspector :is(.product-task-overview-body, .product-task-questions, #product-detail-content) { padding-inline: var(--space-4); }
  .product-task-state > button { min-height: 2.5rem; }
  .task-progress { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .task-progress > li::after { display: none; }
  .product-task-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .product-task-context { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--color-rule); padding-top: var(--space-5); }
  .product-task-approvals > .operation-card { padding: var(--space-3); }
}
@media (pointer: coarse) {
  .timeline-ids > summary { display: flex; align-items: center; min-height: 2.5rem; }
  .product-task-inspector details > summary { min-height: 2.5rem; display: flex; align-items: center; gap: var(--space-1); }
}