/* Frames the final contract result as a position-neutral strike comparison. */
.surface[data-component="outcome-report"] {
  overflow: hidden;
}

@scope (.surface[data-component="outcome-report"]) {
  :scope > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-7) var(--space-fluid-card);
    background: linear-gradient(135deg, var(--color-surface-muted), transparent);
  }

  :scope > header > div:first-child {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  :scope > header > div:first-child > p {
    margin: 0;
    color: var(--color-accent-strong);
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: var(--letter-spacing-label);
  }

  h2 {
    max-width: var(--copy-width);
    margin: 0;
    font-size: var(--font-size-h2);
  }

  :scope > .notice {
    margin: var(--space-8) var(--space-fluid-card) var(--space-fluid-card);
  }

  :scope > footer[data-context] {
    margin-inline: var(--space-fluid-card);
  }
}

@media (max-width: 640px) {
  @scope (.surface[data-component="outcome-report"]) {
    :scope > header {
      align-items: flex-start;
      flex-direction: column-reverse;
      gap: var(--space-4);
    }

    :scope > header > div:first-child {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-2);
    }
  }
}

.data-table[data-kind="opportunity-ledger"] {
  min-width: 57.5rem;
}

@scope (.data-table[data-kind="opportunity-ledger"]) {
  th,
  td {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  :is(th, td):first-child,
  :is(th, td):nth-child(2) {
    text-align: left;
  }

  td:first-child small {
    display: block;
    color: var(--color-text-faint);
  }

  tr[data-kind="expiration"] td {
    background: color-mix(in srgb, var(--color-accent-soft), transparent 88%);
    color: var(--color-heading);
    font-weight: 700;
  }
}

.outcome-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--border-width);
  border-block: var(--border-width) solid var(--color-border);
  background: var(--color-border);
}

@scope (.outcome-metrics) {
  article {
    padding: var(--space-8);
    background: var(--color-surface-strong);
  }

  span,
  strong,
  small {
    display: block;
  }

  span,
  small {
    color: var(--color-text-faint);
    font-size: var(--font-size-sm);
  }

  strong {
    margin-block: var(--space-2);
    color: var(--color-heading);
    font-size: var(--font-size-h3);
    font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 720px) {
  .outcome-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .outcome-metrics {
    grid-template-columns: 1fr;
  }
}

/* Makes dollar performance scannable while keeping the ledger as the exact record. */
.outcome-change-chart {
  padding: var(--space-fluid-card);
  border-block-end: var(--border-width) solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-muted), transparent 55%);
}

@scope (.outcome-change-chart) {
  :scope > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-block-end: var(--space-5);
  }

  h3,
  p {
    margin: 0;
  }

  h3 {
    margin-block-start: var(--space-2);
  }

  :scope > p:last-child {
    max-width: var(--copy-width);
    margin-top: var(--space-6);
    color: var(--color-text-muted);
  }

  :scope > .notice {
    margin-block: var(--space-8) 0;
  }
}

@media (max-width: 640px) {
  @scope (.outcome-change-chart) {
    :scope > header {
      align-items: start;
      flex-direction: column;
      gap: var(--space-4);
    }
  }
}