.value-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-inline) var(--ds-spacing-group);
  margin-block-end: var(--ds-spacing-inline);
}

.value-header-copy {
  display: grid;
  gap: var(--ds-spacing-tight);
}

.value-info-button {
  width: var(--ds-size-control-touch-min);
  min-width: var(--ds-size-control-touch-min);
  padding-inline: 0;
  border-radius: var(--ds-radius-pill);
}

.value-method {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-spacing-group);
  margin-block: var(--ds-spacing-control) var(--ds-spacing-group);
  padding-block: var(--ds-spacing-control);
  border-block: 1px solid var(--ds-color-border-default);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-ui);
}

.value-method strong {
  display: block;
  margin-block-end: var(--ds-spacing-tight);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-font-size-metadata);
  letter-spacing: .04em;
  text-transform: uppercase;
}

#trainerTabs,
#runtimeStatus,
#scorebar {
  margin-block-end: var(--ds-spacing-group);
}

.value-session-bar-content {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: var(--ds-spacing-control);
}

.value-exit-button {
  min-height: 36px;
  margin-inline-start: auto;
  padding-block: var(--ds-spacing-tight);
}

.value-task {
  display: grid;
  gap: var(--ds-spacing-section);
}

.value-task-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-spacing-inline);
}

.value-task-badge {
  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-secondary);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
}

.value-answer-hint,
.value-targets {
  margin: 0;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-ui);
}

.value-answer-help {
  min-width: 0;
}

.value-answer-help summary {
  min-height: var(--ds-size-control-touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-inline);
  list-style: none;
  cursor: pointer;
}

.value-answer-help summary::-webkit-details-marker {
  display: none;
}

.value-answer-help-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-inline);
}

.value-answer-help-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
}

.value-answer-help summary:hover .value-answer-help-mark {
  border-color: var(--ds-color-control-boundary);
  color: var(--ds-color-text-primary);
}

.value-answer-help summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-color-action-accent) 48%, transparent);
  outline-offset: 3px;
}

.value-answer-help .value-answer-hint {
  margin-block-end: var(--ds-spacing-control);
}

.value-terminal-note {
  display: grid;
  gap: var(--ds-spacing-tight);
  padding: var(--ds-spacing-control);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-task);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-muted);
}

.value-terminal-note strong {
  color: var(--ds-color-text-primary);
}

.value-red {
  color: var(--ds-color-card-red);
}

.value-turn-review {
  display: grid;
  gap: var(--ds-spacing-inline);
}

.value-turn-note {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: var(--ds-spacing-control);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border-inline-start: 3px solid var(--ds-color-border-default);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-muted);
}

.value-turn-note.is-brake {
  border-inline-start-color: var(--ds-color-feedback-warning);
}

.value-turn-note.is-safe {
  border-inline-start-color: var(--ds-color-feedback-success);
}

.value-turn-note strong {
  color: var(--ds-color-text-primary);
}

.value-next {
  position: fixed;
  z-index: 6;
  right: 50%;
  bottom: var(--ds-spacing-control);
  width: min(
    calc(100vw - var(--ds-spacing-section) - var(--ds-spacing-section)),
    var(--ds-layout-width-complex)
  );
  display: flex;
  justify-content: flex-end;
  padding: var(--ds-spacing-inline);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-task);
  background: var(--ds-color-surface-primary);
  box-shadow: var(--ds-shadow-surface);
  transform: translateX(50%);
}

.value-next:empty {
  display: none;
}

.value-next-button {
  min-width: min(280px, 100%);
}

.value-next:not(:empty) + [data-feedback] {
  padding-block-end: calc(
    var(--ds-size-control-touch-min) + var(--ds-spacing-section) + var(--ds-spacing-section)
  );
}

@media (max-width: 650px) {
  .value-method {
    grid-template-columns: 1fr;
  }

  .value-turn-note {
    grid-template-columns: 1fr;
  }

  #scorebar {
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .value-session-bar-content {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .value-session-bar-content .ds-session-bar-progress {
    grid-column: 1 / -1;
  }

  .value-session-bar-content .ds-session-bar-score {
    justify-self: end;
  }

  .value-exit-button {
    flex: 0 0 auto;
  }

  .value-next {
    bottom: max(var(--ds-spacing-tight), env(safe-area-inset-bottom));
  }

  .value-next-button {
    width: 100%;
  }
}