/*
 * Shared static action-event primitives.
 *
 * The by-street layout follows DS-13 and DS-16: explicit street sections
 * contain compact rectangular heritage chips in a wrapping row by default.
 * The approved but inactive --vertical modifier changes only event flow. A
 * short ActionSequence follows DS-14 and renders the same semantic event as
 * an open heritage row. ReplayHistory adds only the accepted live-family
 * post-answer shell around the same ActionHistory. Events are informational,
 * not controls, and therefore have no hover, focus, or selected states.
 */

.ds-action-history,
.ds-action-history-street,
.ds-action-sequence {
  display: grid;
}

.ds-action-history {
  gap: 0;
}

.ds-action-history-street {
  padding-block: var(--ds-spacing-control);
  border-block-end: 1px solid var(--ds-color-border-default);
}

.ds-action-history-street:first-child {
  padding-block-start: 0;
}

.ds-action-history-street:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.ds-action-history-street-name {
  margin: 0;
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-mono);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ds-action-history-events {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-inline);
  margin-block-start: var(--ds-spacing-inline);
}

.ds-action-history--vertical .ds-action-history-events {
  display: grid;
  justify-items: start;
}

.ds-action-event {
  max-width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-spacing-inline);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  line-height: var(--ds-font-line-height-ui);
}

.ds-action-history .ds-action-event {
  flex-wrap: nowrap;
  padding: var(--ds-spacing-tight) var(--ds-spacing-inline);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-field);
  background: var(--ds-color-surface-primary);
  white-space: nowrap;
}

.ds-action-sequence {
  gap: var(--ds-spacing-inline);
}

.ds-action-sequence .ds-action-event-position {
  min-width: 38px;
  padding: 2px var(--ds-spacing-inline);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-field);
  background: var(--ds-color-surface-secondary);
  text-align: center;
}

.ds-action-event-position,
.ds-action-event-size,
.ds-action-event-profile {
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-mono);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-action-event-profile {
  padding: 1px var(--ds-spacing-inline);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-family-sans);
}

.ds-action-event-profile--hero {
  border-color: var(--ds-color-action-accent);
  color: var(--ds-color-action-accent);
}

.ds-action-event-action {
  font-weight: 800;
}

.ds-action-event-action--bet,
.ds-action-event-action--call {
  color: var(--ds-color-poker-bet);
}

.ds-action-event-action--check {
  color: var(--ds-color-poker-check);
}

.ds-action-event-action--fold {
  color: var(--ds-color-poker-fold);
}

.ds-replay-history {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-task);
  background: var(--ds-color-surface-secondary);
}

.ds-replay-history-head {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-spacing-tight) var(--ds-spacing-control);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border-block-end: 1px solid var(--ds-color-border-default);
}

.ds-replay-history-title {
  margin: 0;
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  font-weight: 800;
  line-height: var(--ds-font-line-height-ui);
}

.ds-replay-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-tight) var(--ds-spacing-inline);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
}

.ds-replay-history-body {
  min-width: 0;
  padding: var(--ds-spacing-control);
}