.training-annual-hub {
  display: grid;
  gap: var(--gap-xl);
  min-inline-size: 0;
}

.training-annual-hub > *,
.training-annual-hub__header > *,
.training-annual-section > *,
.training-annual-section__header > *,
.training-annual-plan-group,
.training-annual-plan {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.training-annual-hub__header,
.training-annual-section__header,
.training-annual-plan__header {
  align-items: flex-start;
  display: flex;
  gap: var(--gap-md);
  justify-content: space-between;
}

.training-annual-hub__title,
.training-annual-section__title,
.training-annual-plan-group__title {
  color: var(--color-ink);
  font-size: var(--text-large);
  margin: 0;
}

.training-annual-hub__description,
.training-annual-section__description {
  color: var(--color-ink-light);
  margin-block: var(--gap-xs) 0;
  max-inline-size: 70ch;
}

.training-annual-hub__year-form {
  min-inline-size: 12rem;
}

.training-annual-hub__year-controls,
.training-annual-plan__actions {
  align-items: center;
  display: flex;
  gap: var(--gap-sm);
}

.training-annual-section {
  border-block-start: 1px solid var(--color-border);
  display: grid;
  gap: var(--gap-lg);
  padding-block-start: var(--gap-xl);
}

.training-annual-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  margin: 0;
}

.training-annual-summary__item {
  display: grid;
  gap: var(--gap-xs);
  min-inline-size: 6rem;
}

.training-annual-summary__item dt {
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.training-annual-summary__item dd {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  margin: 0;
}

.training-annual-plan-group {
  display: grid;
  gap: var(--gap-sm);
}

.training-annual-plan-group + .training-annual-plan-group {
  margin-block-start: var(--gap-lg);
}

.training-annual-plan-group__title {
  font-size: var(--text-normal);
}

.training-annual-plan {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--gap-sm);
}

.training-annual-plan .simple-table-scroll {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
}

.training-annual-plan__header {
  margin-block-end: var(--gap-sm);
}

.training-annual-plan__name {
  color: var(--color-link);
  font-weight: 700;
  margin-inline-end: var(--gap-sm);
}

.training-annual-plan__empty {
  color: var(--color-ink-light);
  margin: 0;
}

.training-annual-outcome {
  display: inline-block;
  margin-inline-end: var(--gap-sm);
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .training-annual-hub__header,
  .training-annual-section__header,
  .training-annual-plan__header {
    align-items: stretch;
    flex-direction: column;
  }

  .training-annual-hub__year-form {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .training-annual-hub__year-controls .form-field__input {
    flex: 1;
  }

  .training-annual-plan__actions {
    flex-wrap: wrap;
  }
}