/*
 * Shared interactive primitives.
 *
 * Button, Field, TaskChoice, AnswerGroup, ChoiceTile, and MultiChoiceTile preserve the older
 * trainer roles while applying the accepted geometry, contrast, focus, and
 * touch-target contracts. FeedbackFrame and its accepted teaching/evidence slots stay in
 * this layer; poker-action colors and PlayingCard stay separate.
 * NumericAnswerForm, CompositeAnswerForm, and RepeatedFieldAnswerForm compose the accepted
 * controls. DS-26 adds post-commit grading to container controls with a real nested status;
 * NativeControlGrading keeps an accessible adjacent result for native Input and Select;
 * FieldValidation keeps their editable pre-commit errors separate from grading.
 * TrainerIndexCard preserves the older public-index navigation item without task semantics.
 * DS-31 adds the accepted task-boundary ResumePrompt before SessionSetup or the first task.
 */

.ds-button,
.ds-input,
.ds-choice,
.ds-choice-tile,
.ds-multi-choice-tile {
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  line-height: var(--ds-font-line-height-ui);
}

.ds-button {
  min-height: var(--ds-size-control-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-inline) var(--ds-spacing-group);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-action);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ds-button--primary {
  border-color: var(--ds-color-action-accent);
  background: var(--ds-color-action-accent);
  color: var(--ds-color-action-primary-text);
}

.ds-button--secondary {
  border-color: var(--ds-color-control-boundary);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
}

.ds-button--primary:hover:not(:disabled) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-color-action-accent) 35%, transparent);
}

.ds-button--secondary:hover:not(:disabled) {
  border-color: var(--ds-color-action-accent);
}

.ds-trainer-index-card {
  min-height: var(--ds-size-control-touch-min);
  display: grid;
  gap: var(--ds-spacing-tight);
  padding: var(--ds-spacing-section);
  border-radius: var(--ds-radius-shell);
  box-shadow: var(--ds-shadow-surface);
  color: inherit;
  text-decoration: none;
}

.ds-trainer-index-card:hover {
  border-color: var(--ds-color-action-accent);
}

.ds-trainer-index-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-spacing-inline);
}

.ds-trainer-index-card-title {
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-body);
  font-weight: 800;
  line-height: var(--ds-font-line-height-body);
}

.ds-trainer-index-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--ds-spacing-inline);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ds-trainer-index-card-description {
  margin: 0;
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  line-height: var(--ds-font-line-height-ui);
}

.ds-button:disabled,
.ds-input:disabled,
.ds-choice:disabled,
.ds-choice-tile:disabled,
.ds-multi-choice-tile:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ds-field {
  display: grid;
  gap: var(--ds-spacing-tight);
}

.ds-field-label {
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  font-weight: 700;
  line-height: var(--ds-font-line-height-ui);
}

.ds-field-help {
  margin: 0;
  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-field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-tight);
  margin: 0;
  color: var(--ds-color-feedback-error);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-field-error-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

.ds-input {
  width: 100%;
  min-height: var(--ds-size-control-touch-min);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border: 1px solid var(--ds-color-control-boundary);
  border-radius: var(--ds-radius-field);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
}

select.ds-input {
  appearance: none;
  padding-inline-end: calc(var(--ds-spacing-section) + var(--ds-spacing-control));
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ds-color-text-muted) 50%),
    linear-gradient(135deg, var(--ds-color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 21px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 5px 5px;
}

.ds-input[aria-invalid="true"] {
  border-color: var(--ds-color-feedback-error);
  background-color: color-mix(
    in srgb,
    var(--ds-color-feedback-error) 9%,
    var(--ds-color-surface-secondary)
  );
}

textarea.ds-input {
  min-height: calc(var(--ds-size-control-touch-min) * 2);
  resize: vertical;
}

.ds-input::placeholder {
  color: var(--ds-color-text-muted);
  opacity: 1;
}

.ds-choice-group {
  display: grid;
  gap: var(--ds-spacing-inline);
}

.ds-choice {
  width: 100%;
  min-height: var(--ds-size-control-touch-min);
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-control);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-action);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}

.ds-choice:hover:not(:disabled) {
  border-color: var(--ds-color-control-boundary);
}

.ds-choice-indicator {
  width: var(--ds-spacing-control);
  height: var(--ds-spacing-control);
  flex: none;
  border: 2px solid var(--ds-color-control-boundary);
  border-radius: var(--ds-radius-pill);
}

.ds-choice-status {
  margin-inline-start: auto;
  color: var(--ds-color-action-accent);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-choice:is(.is-selected, [aria-pressed="true"], [aria-checked="true"]) {
  border-color: var(--ds-color-action-accent);
  background: color-mix(
    in srgb,
    var(--ds-color-action-accent) 13%,
    var(--ds-color-surface-secondary)
  );
}

.ds-choice:is(.is-selected, [aria-pressed="true"], [aria-checked="true"])
  .ds-choice-indicator {
  border-color: var(--ds-color-action-accent);
  background: var(--ds-color-action-accent);
  box-shadow: inset 0 0 0 2px var(--ds-color-surface-secondary);
}

.ds-answer-group {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-control);
}

.ds-answer-group-label {
  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-answer-group-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-spacing-inline) var(--ds-spacing-control);
}

.ds-choice-tile-group {
  display: grid;
  gap: var(--ds-spacing-inline);
}

.ds-choice-tile-group--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-choice-tile-group--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-choice-tile-group--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ds-choice-tile,
.ds-multi-choice-tile {
  min-width: 0;
  min-height: var(--ds-size-control-touch-min);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--ds-spacing-tight);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-field);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
  text-align: center;
  cursor: pointer;
}

.ds-choice-tile:hover:not(:disabled),
.ds-multi-choice-tile:hover:not(:disabled) {
  border-color: var(--ds-color-control-boundary);
}

.ds-choice-tile-label,
.ds-multi-choice-tile-label {
  font-weight: 800;
}

.ds-choice-tile-detail,
.ds-multi-choice-tile-detail {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
}

.ds-choice-tile-status,
.ds-multi-choice-tile-status {
  color: var(--ds-color-action-accent);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-choice-tile:is(.is-selected, [aria-pressed="true"], [aria-checked="true"]),
.ds-multi-choice-tile:is(.is-selected, [aria-pressed="true"], [aria-checked="true"]) {
  border-color: var(--ds-color-action-accent);
  background: color-mix(
    in srgb,
    var(--ds-color-action-accent) 13%,
    var(--ds-color-surface-secondary)
  );
}

.ds-graded-control {
  --control-grade-color: var(--ds-color-feedback-review);
}

.ds-graded-control .ds-choice-tile-status,
.ds-graded-control .ds-multi-choice-tile-status {
  color: var(--control-grade-color);
}

.ds-graded-control.ds-grade--success {
  --control-grade-color: var(--ds-color-feedback-success);
}

.ds-graded-control.ds-grade--error {
  --control-grade-color: var(--ds-color-feedback-error);
}

.ds-graded-control.ds-grade--warning {
  --control-grade-color: var(--ds-color-feedback-warning);
}

.ds-graded-control.ds-grade--review {
  --control-grade-color: var(--ds-color-feedback-review);
}

.ds-graded-control:disabled {
  opacity: 1;
  cursor: default;
}

.ds-control-result {
  color: var(--control-grade-color);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-control-result-mark { display: inline-block; }

.ds-choice-tile.ds-graded-control:not(.ds-graded-control--expanded),
.ds-multi-choice-tile.ds-graded-control:not(.ds-graded-control--expanded) {
  position: relative;
  padding-inline-end: calc(var(--ds-spacing-control) + var(--ds-spacing-group));
  border-color: transparent;
  background: var(--ds-color-surface-secondary);
}

.ds-choice-tile.ds-graded-control:not(.ds-graded-control--expanded):is(
    .is-selected,
    [aria-pressed="true"],
    [aria-checked="true"]
  ),
.ds-multi-choice-tile.ds-graded-control:not(.ds-graded-control--expanded):is(
    .is-selected,
    [aria-pressed="true"],
    [aria-checked="true"]
  ) {
  border-color: var(--ds-color-action-accent);
  background: color-mix(
    in srgb,
    var(--ds-color-action-accent) 13%,
    var(--ds-color-surface-secondary)
  );
}

.ds-choice-tile.ds-graded-control:not(.ds-graded-control--expanded) .ds-control-result,
.ds-multi-choice-tile.ds-graded-control:not(.ds-graded-control--expanded) .ds-control-result {
  position: absolute;
  inset-block-start: var(--ds-spacing-inline);
  inset-inline-end: var(--ds-spacing-inline);
  font-size: var(--ds-font-size-ui);
  line-height: 1;
}

.ds-choice-tile.ds-graded-control:not(.ds-graded-control--expanded) .ds-control-result-label,
.ds-multi-choice-tile.ds-graded-control:not(.ds-graded-control--expanded) .ds-control-result-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ds-graded-control--expanded {
  border-color: var(--control-grade-color);
  background: color-mix(
    in srgb,
    var(--control-grade-color) 20%,
    var(--ds-color-surface-secondary)
  );
}

.ds-answer-group-grade {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-answer-group-grade--success { color: var(--ds-color-feedback-success); }
.ds-answer-group-grade--warning { color: var(--ds-color-feedback-warning); }
.ds-answer-group-grade--review { color: var(--ds-color-feedback-review); }

.ds-graded-field {
  --field-grade-color: var(--ds-color-feedback-review);
  min-width: 0;
}

.ds-graded-field.ds-grade--success {
  --field-grade-color: var(--ds-color-feedback-success);
}

.ds-graded-field.ds-grade--error {
  --field-grade-color: var(--ds-color-feedback-error);
}

.ds-graded-field.ds-grade--warning {
  --field-grade-color: var(--ds-color-feedback-warning);
}

.ds-graded-field.ds-grade--review {
  --field-grade-color: var(--ds-color-feedback-review);
}

.ds-graded-field > .ds-input,
.ds-graded-field .ds-numeric-answer-control > .ds-input {
  border-color: var(--field-grade-color);
  background-color: color-mix(
    in srgb,
    var(--field-grade-color) 12%,
    var(--ds-color-surface-secondary)
  );
}

.ds-graded-field .ds-input:disabled {
  opacity: 1;
  color: var(--ds-color-text-primary);
  -webkit-text-fill-color: var(--ds-color-text-primary);
  cursor: default;
}

.ds-field-result {
  display: block;
  margin: 0;
  color: var(--field-grade-color);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-repeated-field > .ds-field-result {
  grid-column: 2;
}

.ds-repeated-field > .ds-field-error {
  grid-column: 2;
}

.ds-multi-choice-group {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-control);
}

.ds-multi-choice-candidates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-spacing-inline);
}

.ds-multi-choice-none {
  display: grid;
}

.ds-composite-answer-form {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-section);
}

.ds-composite-answer-form > .ds-button {
  width: 100%;
}

.ds-repeated-field-answer-form {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-inline);
}

.ds-repeated-field-list {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-inline);
}

.ds-repeated-field {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-spacing-inline);
}

.ds-repeated-field-answer-form > .ds-button {
  min-width: 126px;
  margin-top: var(--ds-spacing-tight);
  justify-self: end;
}

.ds-feedback-frame {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-control);
  padding-block-start: var(--ds-spacing-group);
  border-block-start: 1px dashed var(--ds-color-border-default);
}

.ds-verdict {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-inline);
  margin: 0;
  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-verdict-mark {
  width: var(--ds-spacing-section);
  min-height: var(--ds-spacing-section);
  display: inline-grid;
  flex: none;
  place-items: center;
  font-weight: 900;
}

.ds-verdict--success { color: var(--ds-color-feedback-success); }
.ds-verdict--error { color: var(--ds-color-feedback-error); }
.ds-verdict--warning { color: var(--ds-color-feedback-warning); }
.ds-verdict--review { color: var(--ds-color-feedback-review); }

.ds-feedback-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-spacing-tight) var(--ds-spacing-group);
  margin: 0;
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  line-height: var(--ds-font-line-height-ui);
}

.ds-feedback-answer-label {
  color: var(--ds-color-text-muted);
}

.ds-feedback-answer strong {
  color: var(--ds-color-text-primary);
  text-align: end;
}

.ds-what-changes {
  min-width: 0;
  padding: var(--ds-spacing-control) var(--ds-spacing-group);
  border: 1px solid var(--ds-color-border-default);
  border-inline-start: 3px solid var(--ds-color-action-accent);
  border-radius: var(--ds-radius-task);
  background: var(--ds-color-surface-secondary);
  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);
  overflow-wrap: anywhere;
}

.ds-what-changes strong {
  color: var(--ds-color-action-accent);
}

.ds-calculation {
  min-width: 0;
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border-inline-start: 3px solid var(--ds-color-action-accent);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  font-variant-numeric: tabular-nums;
  line-height: var(--ds-font-line-height-ui);
  overflow-wrap: anywhere;
}

.ds-method-disclosure {
  min-width: 0;
  margin: 0;
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  line-height: var(--ds-font-line-height-body);
}

.ds-method-disclosure > summary {
  min-height: var(--ds-size-control-touch-min);
  display: list-item;
  padding-block: var(--ds-spacing-control);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-font-size-ui);
  font-weight: 750;
  line-height: var(--ds-font-line-height-ui);
  cursor: pointer;
}

.ds-method-disclosure > summary:focus-visible {
  border-radius: var(--ds-radius-field);
  outline: 3px solid var(--ds-color-action-accent);
  outline-offset: var(--ds-spacing-tight);
}

.ds-method-disclosure-body {
  display: grid;
  gap: var(--ds-spacing-inline);
  padding: 0 0 var(--ds-spacing-inline) var(--ds-spacing-section);
}

.ds-method-disclosure-body > * {
  margin: 0;
}

.ds-metric-group {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-spacing-inline);
}

.ds-metric {
  min-width: 0;
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-field);
  background: var(--ds-color-surface-secondary);
}

.ds-metric-label,
.ds-metric-value {
  display: block;
  overflow-wrap: anywhere;
}

.ds-metric-label {
  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-metric-value {
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: var(--ds-font-line-height-ui);
}

.ds-strategy-distribution {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-control);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
}

.ds-strategy-distribution-title {
  margin: 0;
  font-size: var(--ds-font-size-ui);
  font-weight: 800;
  line-height: var(--ds-font-line-height-ui);
}

.ds-strategy-strip {
  min-width: 0;
  height: 18px;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-field);
  background: var(--ds-color-surface-primary);
}

.ds-strategy-segment {
  width: var(--strategy-share);
  min-width: 0;
  flex: 0 0 var(--strategy-share);
  background: var(--strategy-action-color);
}

.ds-strategy-legend {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-inline);
  margin: 0;
  padding: 0;
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
  list-style: none;
}

.ds-strategy-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--ds-spacing-inline);
  align-items: center;
}

.ds-strategy-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--strategy-action-color);
}

.ds-strategy-value {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.ds-strategy-segment--fold,
.ds-strategy-item--fold {
  --strategy-action-color: var(--ds-color-strategy-fold);
}

.ds-strategy-segment--passive,
.ds-strategy-item--passive {
  --strategy-action-color: var(--ds-color-strategy-passive);
}

.ds-strategy-segment--aggressive,
.ds-strategy-item--aggressive {
  --strategy-action-color: var(--ds-color-strategy-aggressive);
}

.ds-strategy-segment--all-in,
.ds-strategy-item--all-in {
  --strategy-action-color: var(--ds-color-strategy-all-in);
}

.ds-strategy-distribution--chips .ds-strategy-strip {
  display: none;
}

.ds-strategy-distribution--chips .ds-strategy-legend {
  display: flex;
  flex-wrap: wrap;
}

.ds-strategy-distribution--chips .ds-strategy-item {
  min-height: 34px;
  grid-template-columns: minmax(0, auto) auto;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--strategy-action-color) 50%, var(--ds-color-border-default));
  border-radius: var(--ds-radius-field);
  background: color-mix(in srgb, var(--strategy-action-color) 22%, var(--ds-color-surface-secondary));
}

.ds-strategy-distribution--chips .ds-strategy-swatch {
  display: none;
}

.ds-action-ev-list {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-control);
}

.ds-action-ev-list-title {
  margin: 0;
  font-size: var(--ds-font-size-ui);
  font-weight: 800;
  line-height: var(--ds-font-line-height-ui);
}

.ds-action-ev-items {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-spacing-inline);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-action-ev-item {
  --action-ev-color: var(--ds-color-border-default);
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-tight);
  padding: var(--ds-spacing-control);
  border: 1px solid color-mix(in srgb, var(--action-ev-color) 54%, var(--ds-color-border-default));
  border-radius: var(--ds-radius-field);
  background: color-mix(in srgb, var(--action-ev-color) 14%, var(--ds-color-surface-secondary));
}

.ds-action-ev-item--fold { --action-ev-color: var(--ds-color-strategy-fold); }
.ds-action-ev-item--passive { --action-ev-color: var(--ds-color-strategy-passive); }
.ds-action-ev-item--aggressive { --action-ev-color: var(--ds-color-strategy-aggressive); }
.ds-action-ev-item--all-in { --action-ev-color: var(--ds-color-strategy-all-in); }

.ds-action-ev-label {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
}

.ds-action-ev-value {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-font-size-ui);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: var(--ds-font-line-height-ui);
  white-space: nowrap;
}

.ds-session-result {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: var(--ds-spacing-section);
  padding-block: var(--ds-spacing-section);
  text-align: center;
}

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

.ds-session-result-heading,
.ds-session-result-score {
  margin: 0;
}

.ds-session-result-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--ds-spacing-inline);
}

.ds-session-result-score-value {
  color: var(--ds-color-text-primary);
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.ds-session-result-score-label {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-ui);
  font-weight: 750;
  line-height: var(--ds-font-line-height-ui);
}

.ds-session-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-spacing-inline);
}

.ds-session-result-details {
  width: 100%;
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-field);
  overflow: hidden;
  text-align: start;
}

.ds-session-result-details > summary {
  min-height: var(--ds-size-control-touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-inline);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-font-size-ui);
  font-weight: 800;
  line-height: var(--ds-font-line-height-ui);
  cursor: pointer;
  list-style: none;
}

.ds-session-result-details > summary::-webkit-details-marker {
  display: none;
}

.ds-session-result-details-state {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-session-result-details-state--open {
  display: none;
}

.ds-session-result-details[open] .ds-session-result-details-state--closed {
  display: none;
}

.ds-session-result-details[open] .ds-session-result-details-state--open {
  display: inline;
}

.ds-session-result-details-body {
  display: grid;
  gap: var(--ds-spacing-control);
  padding: var(--ds-spacing-control);
  border-block-start: 1px solid var(--ds-color-border-default);
  background: var(--ds-color-surface-primary);
}

.ds-session-result-metrics,
.ds-session-result-breakdown {
  min-width: 0;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-session-result-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-spacing-inline);
}

.ds-session-result-metric {
  min-width: 0;
  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-field);
  background: var(--ds-color-surface-secondary);
}

.ds-session-result-metric-value {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-font-size-question);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: var(--ds-font-line-height-question);
}

.ds-session-result-metric-label {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
}

.ds-session-result-focus {
  display: grid;
  gap: var(--ds-spacing-tight);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border-inline-start: 3px solid var(--ds-color-action-accent);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
}

.ds-session-result-focus strong {
  color: var(--ds-color-text-primary);
}

.ds-session-result-breakdown {
  border-block: 1px solid var(--ds-color-border-default);
}

.ds-session-result-breakdown-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-spacing-control);
  padding-block: var(--ds-spacing-inline);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
}

.ds-session-result-breakdown-row + .ds-session-result-breakdown-row {
  border-block-start: 1px solid var(--ds-color-border-default);
}

.ds-session-result-breakdown-value {
  color: var(--ds-color-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* DS-36: bounded summary cards followed by open breakdown, weak-spot, and action sections. */
.ds-progress-dashboard {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-section);
}

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

.ds-progress-dashboard-heading,
.ds-progress-dashboard-scope {
  margin: 0;
}

.ds-progress-dashboard-scope {
  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-progress-dashboard-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-spacing-control);
  margin: 0;
}

.ds-progress-dashboard-metric {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-tight);
  margin: 0;
  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);
}

.ds-progress-dashboard-metric-value,
.ds-progress-dashboard-metric-label {
  margin: 0;
}

.ds-progress-dashboard-metric-value {
  grid-row: 1;
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-question);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: var(--ds-font-line-height-question);
}

.ds-progress-dashboard-metric-label {
  grid-row: 2;
  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-progress-dashboard-section {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-inline);
}

.ds-progress-dashboard-section-heading {
  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-progress-dashboard-disclosure {
  min-width: 0;
}

.ds-progress-dashboard-disclosure > summary {
  min-height: var(--ds-size-control-touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-inline);
  color: var(--ds-color-text-primary);
  cursor: pointer;
  list-style: none;
}

.ds-progress-dashboard-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ds-progress-dashboard-disclosure-state {
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-progress-dashboard-disclosure-state--open {
  display: none;
}

.ds-progress-dashboard-disclosure[open] .ds-progress-dashboard-disclosure-state--closed {
  display: none;
}

.ds-progress-dashboard-disclosure[open] .ds-progress-dashboard-disclosure-state--open {
  display: inline;
}

.ds-progress-dashboard-disclosure-body {
  padding-block-start: var(--ds-spacing-inline);
}

.ds-progress-dashboard-breakdown,
.ds-progress-dashboard-weak-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-progress-dashboard-breakdown {
  display: grid;
  gap: var(--ds-spacing-inline);
}

.ds-progress-dashboard-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, 3fr) 48px;
  align-items: center;
  gap: var(--ds-spacing-control);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
}

.ds-progress-dashboard-bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-action-accent);
  appearance: none;
}

.ds-progress-dashboard-bar::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--ds-color-surface-secondary);
}

.ds-progress-dashboard-bar::-webkit-progress-value {
  border-radius: inherit;
  background: var(--ds-color-action-accent);
}

.ds-progress-dashboard-bar::-moz-progress-bar {
  border-radius: inherit;
  background: var(--ds-color-action-accent);
}

.ds-progress-dashboard-row-value {
  color: var(--ds-color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.ds-progress-dashboard-weak-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-inline);
}

.ds-progress-dashboard-weak-item {
  min-width: 0;
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  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-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
  overflow-wrap: anywhere;
}

.ds-progress-dashboard-learning-actions,
.ds-progress-dashboard-data-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-spacing-inline);
}

.ds-progress-dashboard-data-actions {
  padding-block-start: var(--ds-spacing-control);
  border-block-start: 1px solid var(--ds-color-border-default);
}

.ds-mode-tabs {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-inline);
}

.ds-mode-tab {
  min-height: var(--ds-size-control-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-inline) var(--ds-spacing-group);
  border: 1px solid var(--ds-color-control-boundary);
  border-radius: var(--ds-radius-action);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  font-weight: 750;
  line-height: var(--ds-font-line-height-ui);
  cursor: pointer;
}

.ds-mode-tab:hover {
  border-color: var(--ds-color-text-muted);
  color: var(--ds-color-text-primary);
}

.ds-mode-tab[aria-selected="true"] {
  border-color: var(--ds-color-action-accent);
  color: var(--ds-color-text-primary);
}

.ds-filter-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ds-filter-group-label {
  margin-block-end: var(--ds-spacing-inline);
  padding: 0;
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ds-filter-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-inline);
}

.ds-filter-chip {
  position: relative;
  min-width: 0;
  min-height: var(--ds-size-control-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-inline);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  border: 1px solid var(--ds-color-control-boundary);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  font-weight: 750;
  line-height: var(--ds-font-line-height-ui);
  cursor: pointer;
}

.ds-filter-chip:hover {
  border-color: var(--ds-color-text-muted);
}

.ds-filter-chip:has(.ds-filter-chip-input:checked) {
  border-color: var(--ds-color-action-accent);
  background: color-mix(in srgb, var(--ds-color-action-accent) 13%, var(--ds-color-surface-secondary));
}

.ds-filter-chip-state {
  display: none;
  color: var(--ds-color-action-accent);
  font-weight: 900;
}

.ds-filter-chip:has(.ds-filter-chip-input:checked) .ds-filter-chip-state {
  display: inline;
}

.ds-filter-chip:has(.ds-filter-chip-input:disabled) {
  cursor: not-allowed;
  opacity: .55;
}

.ds-filter-chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.ds-mode-tab:focus-visible,
.ds-filter-chip:has(.ds-filter-chip-input:focus-visible) {
  border-color: var(--ds-color-action-accent);
  outline: 3px solid var(--ds-color-action-accent);
  outline-offset: var(--ds-spacing-tight);
}

/* DS-35: shared leading-rail surfaces; Notice remains non-blocking, ErrorState replaces work. */
.ds-notice,
.ds-error-state {
  --state-tone: var(--ds-color-control-boundary);
  min-width: 0;
  display: grid;
  grid-template-columns: var(--ds-spacing-section) minmax(0, 1fr);
  align-items: start;
  gap: var(--ds-spacing-control);
  padding: var(--ds-spacing-control) var(--ds-spacing-group);
  border: 1px solid var(--ds-color-border-default);
  border-inline-start: 3px solid var(--state-tone);
  border-radius: var(--ds-radius-task);
  background: color-mix(
    in srgb,
    var(--state-tone) 7%,
    var(--ds-color-surface-secondary)
  );
  color: var(--ds-color-text-primary);
}

.ds-notice--warning {
  --state-tone: var(--ds-color-feedback-warning);
}

.ds-error-state {
  --state-tone: var(--ds-color-feedback-error);
  padding: var(--ds-spacing-section);
}

.ds-state-mark {
  min-width: var(--ds-spacing-section);
  min-height: var(--ds-spacing-section);
  display: inline-grid;
  place-items: center;
  color: var(--state-tone);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  font-weight: 900;
  line-height: var(--ds-font-line-height-ui);
}

.ds-notice-content,
.ds-empty-state,
.ds-error-state-content {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-inline);
}

.ds-empty-state {
  padding-block: var(--ds-spacing-section);
  color: var(--ds-color-text-primary);
}

.ds-state-title,
.ds-state-body {
  margin: 0;
  font-family: var(--ds-font-family-sans);
}

.ds-state-title {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-font-size-ui);
  font-weight: 800;
  line-height: var(--ds-font-line-height-ui);
}

.ds-state-body {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-ui);
  line-height: var(--ds-font-line-height-body);
  overflow-wrap: anywhere;
}

.ds-state-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-spacing-inline);
  margin-block-start: var(--ds-spacing-tight);
}

.ds-resume-prompt {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-group);
  margin: 0;
  padding: var(--ds-spacing-section);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-shell);
  background: var(--ds-color-surface-primary);
  box-shadow: var(--ds-shadow-surface);
}

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

.ds-resume-prompt-heading,
.ds-resume-prompt-note,
.ds-resume-prompt-metadata,
.ds-resume-prompt-metric-label,
.ds-resume-prompt-metric-value {
  margin: 0;
}

.ds-resume-prompt-note,
.ds-resume-prompt-metric-label {
  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-resume-prompt-metadata {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-spacing-inline);
}

.ds-resume-prompt-metric {
  min-width: 0;
  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-field);
  background: var(--ds-color-surface-secondary);
}

.ds-resume-prompt-metric-value {
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-body);
  font-weight: 800;
  line-height: var(--ds-font-line-height-body);
}

.ds-resume-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-spacing-control);
}

.ds-resume-prompt-restart {
  color: var(--ds-color-feedback-error);
}

.ds-resume-prompt-restart:hover:not(:disabled) {
  border-color: var(--ds-color-feedback-error);
}

.ds-session-setup {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-group);
  margin: 0;
  padding: var(--ds-spacing-section);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-shell);
  background: var(--ds-color-surface-primary);
  box-shadow: var(--ds-shadow-surface);
}

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

.ds-session-setup-heading,
.ds-session-setup-note {
  margin: 0;
}

.ds-session-setup-note,
.ds-session-setup-count {
  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-session-setup-essentials,
.ds-session-setup-details-body {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-spacing-control);
}

.ds-session-setup-timer {
  min-height: var(--ds-size-control-touch-min);
  display: flex;
  align-items: center;
  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);
  font-weight: 750;
  line-height: var(--ds-font-line-height-ui);
}

.ds-session-setup-timer input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ds-color-action-accent);
}

.ds-session-setup-details {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-field);
  background: var(--ds-color-surface-primary);
}

.ds-session-setup-details > summary {
  min-height: var(--ds-size-control-touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-inline);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  background: var(--ds-color-surface-secondary);
  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);
  cursor: pointer;
  list-style: none;
}

.ds-session-setup-details > summary::-webkit-details-marker {
  display: none;
}

.ds-session-setup-details-state {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  font-weight: 750;
  line-height: var(--ds-font-line-height-metadata);
}

.ds-session-setup-details-state--open {
  display: none;
}

.ds-session-setup-details[open] .ds-session-setup-details-state--closed {
  display: none;
}

.ds-session-setup-details[open] .ds-session-setup-details-state--open {
  display: inline;
}

.ds-session-setup-details-body {
  padding: var(--ds-spacing-control);
  border-block-start: 1px solid var(--ds-color-border-default);
}

.ds-session-setup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-spacing-control);
}

.ds-session-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  min-width: 0;
  min-height: var(--ds-size-control-touch-min);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-spacing-control);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  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);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-ui);
  line-height: var(--ds-font-line-height-ui);
}

.ds-session-bar-context {
  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);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  font-weight: 800;
  line-height: var(--ds-font-line-height-metadata);
  white-space: nowrap;
}

.ds-session-bar-position,
.ds-session-bar-score {
  color: var(--ds-color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-session-bar-position strong,
.ds-session-bar-score strong {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-font-size-body);
}

.ds-session-bar-progress {
  width: 100%;
  height: 6px;
  flex: 1;
  min-width: 42px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface-secondary);
  color: var(--ds-color-action-accent);
  appearance: none;
}

.ds-session-bar-progress::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--ds-color-surface-secondary);
}

.ds-session-bar-progress::-webkit-progress-value {
  border-radius: inherit;
  background: var(--ds-color-action-accent);
}

.ds-session-bar-progress::-moz-progress-bar {
  border-radius: inherit;
  background: var(--ds-color-action-accent);
}

.ds-task-timer {
  min-width: 48px;
  padding: 4px 7px;
  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-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.ds-task-timer[data-state="warning"] {
  border-color: var(--ds-color-feedback-warning);
  color: var(--ds-color-feedback-warning);
}

.ds-task-timer[data-state="critical"] {
  border-color: var(--ds-color-feedback-error);
  color: var(--ds-color-feedback-error);
}

.ds-session-bar-next {
  margin-inline-start: auto;
}

.ds-reference-list {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-inline);
  margin: 0;
  padding: 0;
  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);
  list-style: none;
}

.ds-reference-list > li {
  min-width: 0;
}

.ds-reference-item {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-spacing-tight) var(--ds-spacing-control);
  padding: var(--ds-spacing-inline) 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: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.ds-reference-item:hover,
a.ds-reference-item:focus-visible {
  border-color: var(--ds-color-action-accent);
}

a.ds-reference-item:focus-visible {
  outline: 3px solid var(--ds-color-action-accent);
  outline-offset: var(--ds-spacing-tight);
}

.ds-reference-id {
  padding: 1px var(--ds-spacing-inline);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-mono);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ds-reference-text {
  min-width: 0;
  flex: 1 1 200px;
}

.ds-reference-source {
  color: var(--ds-color-action-accent);
  white-space: nowrap;
}

.ds-reference-note {
  font-style: italic;
}

.ds-evidence-status-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-inline);
  margin: 0;
  padding: 0;
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
  list-style: none;
}

.ds-evidence-status {
  display: inline-flex;
  gap: var(--ds-spacing-tight);
  align-items: center;
  padding: var(--ds-spacing-tight) var(--ds-spacing-inline);
  border: 1px solid currentColor;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface-secondary);
  font-weight: 800;
}

.ds-evidence-status-name {
  color: var(--ds-color-text-primary);
}

.ds-evidence-status--gradeable { color: var(--ds-color-evidence-gradeable); }
.ds-evidence-status--conditional { color: var(--ds-color-evidence-conditional); }
.ds-evidence-status--needs-solver { color: var(--ds-color-evidence-needs-solver); }
.ds-evidence-status--population-only { color: var(--ds-color-evidence-population-only); }
.ds-evidence-status--not-applicable { color: var(--ds-color-evidence-not-applicable); }

.ds-evidence-note-list {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-tight);
  margin: 0;
  padding: 0;
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  line-height: var(--ds-font-line-height-metadata);
  list-style: none;
}

.ds-evidence-note {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-tight);
  padding: var(--ds-spacing-inline);
  border-inline-start: 3px solid var(--ds-color-evidence-conditional);
  background: var(--ds-color-surface-secondary);
  overflow-wrap: anywhere;
}

.ds-evidence-note-title {
  color: var(--ds-color-text-primary);
}

.ds-evidence-note-reason {
  color: var(--ds-color-text-muted);
}

.ds-evidence-disclosure {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-control);
}

.ds-evidence-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-spacing-inline);
  margin: 0;
  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);
  list-style: none;
}

.ds-evidence-summary-fact {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-tight);
}

.ds-evidence-summary-label,
.ds-evidence-summary-value {
  overflow-wrap: anywhere;
}

.ds-evidence-summary-label {
  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-evidence-summary-value {
  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-evidence-technical {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-field);
  background: var(--ds-color-surface-primary);
}

.ds-evidence-technical > summary {
  min-height: var(--ds-size-control-touch-min);
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-inline);
  padding: var(--ds-spacing-inline) var(--ds-spacing-control);
  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);
  cursor: pointer;
  list-style: none;
}

.ds-evidence-technical > summary::-webkit-details-marker {
  display: none;
}

.ds-evidence-technical > summary::before {
  content: "+";
  color: var(--ds-color-action-accent);
  font-weight: 900;
}

.ds-evidence-technical[open] > summary::before {
  content: "−";
}

.ds-evidence-technical > summary small {
  margin-inline-start: auto;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-metadata);
  font-weight: 650;
  text-align: end;
}

.ds-evidence-technical > summary:focus-visible {
  outline: 3px solid var(--ds-color-action-accent);
  outline-offset: -3px;
}

.ds-evidence-technical-list {
  min-width: 0;
  display: grid;
  gap: var(--ds-spacing-inline);
  margin: 0;
  padding: var(--ds-spacing-control);
  border-block-start: 1px solid var(--ds-color-border-default);
  background: var(--ds-color-surface-secondary);
  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);
  list-style: none;
}

.ds-evidence-technical-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: var(--ds-spacing-inline);
}

.ds-evidence-technical-row code {
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-mono);
  font-size: inherit;
  overflow-wrap: anywhere;
}

.ds-numeric-answer-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--ds-spacing-inline);
}

.ds-numeric-answer-control {
  position: relative;
  display: block;
}

.ds-numeric-answer-input {
  padding-inline-end: calc(7ch + var(--ds-spacing-control));
  font-size: var(--ds-font-size-question);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ds-numeric-answer-suffix {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--ds-spacing-control);
  transform: translateY(-50%);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-metadata);
  font-weight: 700;
  line-height: var(--ds-font-line-height-metadata);
  pointer-events: none;
}

.ds-button:focus-visible,
.ds-trainer-index-card:focus-visible,
.ds-input:focus-visible,
.ds-choice:focus-visible,
.ds-choice-tile:focus-visible,
.ds-multi-choice-tile:focus-visible,
.ds-session-setup-details > summary:focus-visible,
.ds-session-result-details > summary:focus-visible,
.ds-progress-dashboard-disclosure > summary:focus-visible {
  border-color: var(--ds-color-action-accent);
  outline: 3px solid var(--ds-color-action-accent);
  outline-offset: var(--ds-spacing-tight);
}

.ds-input[aria-invalid="true"]:focus-visible {
  border-color: var(--ds-color-feedback-error);
}

@media (max-width: 650px) {
  .ds-choice-tile-group--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-multi-choice-candidates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-numeric-answer-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-numeric-answer-form > .ds-button {
    width: 100%;
  }

  .ds-repeated-field-answer-form > .ds-button {
    width: 100%;
  }

  .ds-session-bar {
    gap: var(--ds-spacing-inline);
    padding: var(--ds-spacing-inline);
  }

  .ds-session-bar-progress {
    order: 10;
    flex-basis: 100%;
  }

  .ds-session-setup-essentials,
  .ds-session-setup-details-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-resume-prompt-metadata {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-resume-prompt-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-resume-prompt-actions > .ds-button {
    width: 100%;
  }

  .ds-session-setup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-session-setup-actions > .ds-button {
    width: 100%;
  }

  .ds-progress-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-progress-dashboard-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ds-spacing-tight) var(--ds-spacing-control);
  }

  .ds-progress-dashboard-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ds-progress-dashboard-learning-actions,
  .ds-progress-dashboard-data-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-progress-dashboard-learning-actions > .ds-button,
  .ds-progress-dashboard-data-actions > .ds-button {
    width: 100%;
  }

  .ds-reference-source {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ds-evidence-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-evidence-technical > summary {
    align-items: flex-start;
  }

  .ds-evidence-technical-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-spacing-tight);
  }
}