.triage-main { padding-top: var(--space-32); }

.triage-header { margin-bottom: var(--space-32); }
.triage-headline {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-8);
  font-variation-settings: "opsz" 36;
}
.triage-headline em { font-style: italic; color: var(--accent); font-weight: 400; }
.triage-summary {
  font-family: var(--sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.triage-list {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.triage-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-micro) ease-out;
}
.triage-row:last-child { border-bottom: none; }
.triage-row:hover { background: var(--surface-2); }
.triage-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.triage-name {
  font-family: var(--serif-display);
  font-size: var(--text-lg);
  font-weight: 500;
  font-variation-settings: "opsz" 18;
  line-height: 1.2;
  margin: 0;
}
.triage-reason {
  font-family: var(--serif-body);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.45;
}
.triage-action {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-decoration: none;
}
.triage-action:hover { color: var(--accent); }

@media (max-width: 640px) {
  .triage-row {
    grid-template-columns: 40px 1fr auto;
    grid-template-areas:
      "avatar name pill"
      ". reason reason"
      ". action action";
    row-gap: var(--space-8);
  }
  .triage-row .avatar { grid-area: avatar; }
  .triage-row .triage-content { grid-area: name; }
  .triage-row .triage-pill { grid-area: pill; align-self: start; }
  .triage-row .triage-action { grid-area: action; justify-self: end; }
}
