.training-grid {
  gap: var(--s5);
  margin-bottom: var(--s5);
}

.training-panel {
  padding: var(--s4);
}

.training-copy {
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

.training-focuses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.training-subhead {
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}

.training-facility-meter {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--gold);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.55rem);
  letter-spacing: 0.18em;
  box-shadow: var(--shadow-1);
}

.training-staff-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  margin-bottom: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent)),
    var(--glass);
  box-shadow: var(--shadow-1);
}

.training-staff-card .sava {
  align-self: start;
}

.training-staff-card .meta {
  min-width: 0;
}

.training-staff-card .name {
  font-size: var(--fs-body);
  font-weight: 650;
  color: var(--text);
}

.training-staff-card .sub {
  margin-top: var(--s1);
  margin-bottom: var(--s3);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.training-staff-card .bar {
  margin-top: var(--s2);
}

.training-fire-btn {
  margin-top: var(--s4);
}

.training-footnote {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.training-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  margin-top: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.training-controls > * {
  min-width: 0;
}

.training-controls select {
  flex: 1 1 12rem;
}

.training-preview {
  flex: 1 1 10rem;
  min-height: 1.5rem;
  font-size: var(--fs-sm);
}

.training-table {
  width: 100%;
  margin-top: var(--s4);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-1);
}

.training-table th,
.training-table td {
  padding: var(--s3);
  text-align: left;
  font-size: var(--fs-sm);
}

.training-table th {
  color: var(--text-2);
  font-weight: 600;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.training-table tr + tr td {
  border-top: 1px solid var(--line);
}

.training-table .num {
  text-align: right;
}

@media (max-width: 860px) {
  .training-staff-card {
    grid-template-columns: 1fr;
  }

  .training-controls {
    align-items: stretch;
  }

  .training-controls select,
  .training-controls #rtStart,
  .training-preview {
    flex-basis: 100%;
  }
}