/* ==========================================================================
   Row primitive — ported from design/claude-design/aos-primitives.jsx (Row).
   auto 1fr auto auto · leading · primary/secondary · meta · trailing.
   State stripe color maps 1:1 with the stateColor() helper in the source.
   ========================================================================== */

.row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--aos-border-subtle);
  cursor: default;
}

.row[data-clickable="true"],
.row[tabindex],
a.row,
button.row {
  cursor: pointer;
}

.row[data-clickable="true"]:hover,
.row[tabindex]:hover,
a.row:hover,
button.row:hover {
  /* Finding 7: rows rest on bare canvas at REST (editorial register — kept),
     but hover wasn't surfaced with a real DS token — it used the ad hoc
     --nfn-bg-subtle wash instead of --aos-bg-surface-1. */
  background: var(--aos-bg-surface-1);
}

.row[data-clickable="true"]:focus-visible,
.row[tabindex]:focus-visible,
a.row:focus-visible,
button.row:focus-visible {
  outline: none;
  box-shadow: inset var(--nfn-shadow-focus);
}

.row:last-child {
  border-bottom: none;
}

/* Dashboard density — tighter rows for high-volume lists */
.row.dashboard {
  min-height: 28px;
  padding: 6px 14px 6px 16px;
}

/* State stripe — absolute 3px bar, left edge, color via --row-state */
.row-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--row-state, var(--aos-state-idle));
}

.row-leading {
  display: flex;
  align-items: center;
  color: var(--aos-text-tertiary);
}

.row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row-primary {
  font-size: 14px;
  font-weight: 500;
  color: var(--aos-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-secondary {
  font-size: 12px;
  color: var(--aos-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-meta {
  font-size: 12px;
  color: var(--aos-text-tertiary);
  white-space: nowrap;
  font-family: var(--aos-font-mono);
  letter-spacing: 0.02em;
}

.row-trailing {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* State-stripe color map — mirrors stateColor() in aos-primitives.jsx */
.row[data-state="idle"]            { --row-state: var(--aos-state-idle); }
.row[data-state="running"]         { --row-state: var(--aos-state-running); }
.row[data-state="blocked"]         { --row-state: var(--aos-state-blocked); }
.row[data-state="awaiting-human"]  { --row-state: var(--aos-state-awaiting-human); }
.row[data-state="errored"]         { --row-state: var(--aos-state-errored); }
.row[data-state="complete"]        { --row-state: var(--aos-state-complete); }