/* ============================================================
   Outcome Tracking (local evals)
   Editor "Results" section, quick-add row, quick-log dialog,
   and aggregate summary chips. Tokens only — no hardcoded colors.
   ============================================================ */

/* ---------- Editor section ---------- */

.outcome-section {
  margin-block-start: var(--space-4);
}

.outcome-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-1);
}

.outcome-empty,
.outcome-more-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.outcome-record-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------- Entry list ---------- */

.outcome-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.outcome-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.outcome-entry-stars {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--warning-600);
  line-height: 1.5;
  white-space: nowrap;
}

.outcome-entry-stars-none {
  color: var(--text-tertiary);
  letter-spacing: normal;
}

.outcome-entry-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.outcome-entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.outcome-entry-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.outcome-entry-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.outcome-entry-delete {
  flex: 0 0 auto;
  line-height: 1;
  color: var(--text-tertiary);
}

.outcome-entry-delete:hover {
  color: var(--text-primary);
}

/* ---------- Chips ---------- */

.outcome-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outcome-chip-model {
  font-family: var(--font-mono);
}

.outcome-chip-source {
  color: var(--text-tertiary);
}

.outcome-chip-summary .outcome-chip-star {
  color: var(--warning-600);
}

/* ---------- Win/loss (duel) summary ---------- */

.outcome-duel-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.outcome-duel-summary-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.outcome-chip-duel {
  font-family: var(--font-mono);
}

/* ---------- Quick-add row ---------- */

.outcome-quick-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px dashed var(--border-primary);
  border-radius: var(--radius-md);
}

.outcome-stars-field {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
}

.outcome-stars {
  display: inline-flex;
  gap: var(--space-1);
}

.outcome-star {
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.outcome-star-glyph {
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--text-tertiary);
  transition: color 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .outcome-star-glyph {
    transition: none;
  }
}

.outcome-stars[data-rating="1"] .outcome-star:nth-child(-n + 1) .outcome-star-glyph,
.outcome-stars[data-rating="2"] .outcome-star:nth-child(-n + 2) .outcome-star-glyph,
.outcome-stars[data-rating="3"] .outcome-star:nth-child(-n + 3) .outcome-star-glyph,
.outcome-stars[data-rating="4"] .outcome-star:nth-child(-n + 4) .outcome-star-glyph,
.outcome-stars[data-rating="5"] .outcome-star:nth-child(-n + 5) .outcome-star-glyph {
  color: var(--warning-500);
}

.outcome-star:has(.outcome-star-input:focus-visible) {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.outcome-quick-add-fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 16rem;
  min-width: 0;
}

.outcome-model-input {
  flex: 1 1 9rem;
  min-width: 8rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.outcome-note-input {
  flex: 2 1 12rem;
  min-width: 9rem;
  font-size: var(--text-sm);
}

.outcome-add-btn {
  flex: 0 0 auto;
}

/* ---------- Quick-log dialog ---------- */

.outcome-quicklog-modal .outcome-quicklog-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(34rem, 92vw);
  padding: var(--space-4);
}

.outcome-quicklog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.outcome-quicklog-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.outcome-quicklog-summary {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---------- Dark mode ----------
   All colors above are semantic tokens, which the dark theme remaps.
   Only the nested-well contrast needs a nudge so entry rows stay
   visibly raised against the modal surface. */

:root[data-theme="dark"] .outcome-entry {
  background: var(--surface-tertiary);
}

:root[data-theme="dark"] .outcome-chip {
  background: var(--surface-secondary);
}