/*
 * Admin job offers
 *
 * Feature classes for the recruitment administration views.
 */

.admin-job-offer-modal-form {
  padding: 1rem 2.5rem;
}

.admin-job-offer-modal-form__field {
  margin-block-start: 1rem;
}

.admin-job-offer-modal-form__label {
  display: block;
  margin-block-end: 0.25rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

.admin-job-offer-form__content-action {
  display: flex;
  justify-content: center;
  margin-block-start: 1rem;
}

.admin-job-offers-page {
  display: grid;
  gap: 1rem;
}

.admin-job-offers-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.5rem;
}

.admin-job-offers-page__intro {
  max-inline-size: 62rem;
}

.admin-job-offers-page__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 600;
}

.admin-job-offers-page__heading {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.15;
}

.admin-job-offers-page__description {
  max-inline-size: 70ch;
  margin: 0.5rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-normal);
  line-height: 1.45;
}

.admin-job-offers-page__count {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.5rem;
  min-block-size: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.admin-job-offers-page__count-icon,
.admin-job-offer-row__icon,
.admin-job-offer-row__office-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-job-offers-page__count-icon .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.admin-job-offers-table {
  overflow-x: auto;
}

.admin-job-offers-table .simple-table {
  min-inline-size: 56rem;
  margin-block-start: 0;
}

.admin-job-offers-table .th {
  padding-block: 0.85rem;
  padding-inline: 1rem;
}

.admin-job-offer-row .td {
  vertical-align: middle;
  padding-block: 0.9rem;
  padding-inline: 1rem;
}

.admin-job-offer-row__main {
  inline-size: 42%;
  min-inline-size: 18rem;
}

.admin-job-offer-row__identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-inline-size: 0;
}

.admin-job-offer-row__icon {
  flex: 0 0 auto;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid rgb(var(--palette-blue-200));
  border-radius: var(--radius-lg);
  background-color: rgb(var(--palette-blue-50));
  color: rgb(var(--palette-blue-800));
}

.admin-job-offer-row__icon .icon {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.admin-job-offer-row__copy {
  display: grid;
  gap: 0.3rem;
  min-inline-size: 0;
}

.admin-job-offer-row__title {
  color: var(--color-ink);
  font-size: var(--text-normal);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.admin-job-offer-row__title:hover,
.admin-job-offer-row__title:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.admin-job-offer-row__office {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-inline-size: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 500;
}

.admin-job-offer-row__office-icon .icon {
  inline-size: 0.95rem;
  block-size: 0.95rem;
  color: var(--color-ink-lighter);
}

.admin-job-offer-row__period {
  min-inline-size: 13rem;
}

.admin-job-offer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  inline-size: fit-content;
  border-radius: var(--radius-pill);
  padding-block: 0.25rem;
  padding-inline: 0.55rem;
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1;
}

.admin-job-offer-status__dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

.admin-job-offer-status--active {
  background-color: rgb(var(--palette-green-50));
  color: rgb(var(--palette-green-700));
  box-shadow: inset 0 0 0 1px rgb(var(--palette-green-200));
}

.admin-job-offer-status--inactive {
  background-color: var(--color-surface-subtle);
  color: var(--color-ink-light);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.admin-job-offer-row__dates {
  display: block;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 500;
}

.admin-job-offer-row__metric {
  min-inline-size: 7.5rem;
}

.admin-job-offer-row__metric-value,
.admin-job-offer-row__metric-label {
  display: block;
}

.admin-job-offer-row__metric-value {
  color: var(--color-ink);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}

.admin-job-offer-row__metric-label {
  margin-block-start: 0.2rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 500;
}

.admin-job-offer-row__actions {
  inline-size: 4rem;
}

.admin-job-offers-table__pagination {
  display: flex;
  justify-content: flex-end;
  padding-block-start: 0.75rem;
}

.admin-job-offer-board {
  display: flex;
  align-items: flex-start;
  column-gap: 1.25rem;
  margin-block-start: 1rem;
  padding-block-end: 1rem;
  overflow-x: auto;
}

.admin-job-offer-edit {
  margin-block-start: 1.5rem;
  padding: 1.25rem 1rem;
}

@media (min-width: 640px) {
  .admin-job-offer-edit {
    padding: 1.5rem;
  }
}

@media (max-width: 760px) {
  .admin-job-offers-page__header {
    display: grid;
  }

  .admin-job-offers-page__count {
    justify-self: start;
  }

  .admin-job-offers-table {
    overflow-x: visible;
  }

  .admin-job-offers-table .simple-table {
    min-inline-size: 0;
  }

  .admin-job-offers-table thead {
    position: absolute;
    overflow: hidden;
    inline-size: 1px;
    block-size: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-job-offers-table tbody {
    display: grid;
    gap: 0.875rem;
    padding: 0.75rem;
    background-color: var(--color-surface-muted);
  }

  .admin-job-offer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }

  .admin-job-offer-row .td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
    text-align: end;
    white-space: normal;
  }

  .admin-job-offers-table .table-stripped > tbody > .admin-job-offer-row > .td {
    background-color: transparent;
  }

  .admin-job-offer-row .td::before {
    content: attr(data-label);
    flex: 0 1 42%;
    color: var(--color-ink-lighter);
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1.2;
    text-align: start;
  }

  .admin-job-offer-row__main {
    display: block !important;
    inline-size: 100%;
    min-inline-size: 0;
    padding-block-end: 0.75rem !important;
    border-block-end: 1px solid var(--color-border);
    text-align: start !important;
  }

  .admin-job-offer-row__main::before,
  .admin-job-offer-row__actions::before {
    content: none !important;
  }

  .admin-job-offer-row__period {
    min-inline-size: 0;
  }

  .admin-job-offer-row__metric-value,
  .admin-job-offer-row__metric-label {
    text-align: end;
  }

  .admin-job-offer-row__metric-label {
    display: none;
  }

  .admin-job-offer-row__actions {
    justify-content: flex-end !important;
    inline-size: 100%;
    padding-block-start: 0.25rem !important;
  }

  .admin-job-offers-table tfoot,
  .admin-job-offers-table tfoot tr,
  .admin-job-offers-table tfoot td {
    display: block;
  }

  .admin-job-offers-table__pagination {
    justify-content: center;
  }
}

@media (max-width: 48rem) {
  .training-compliance-form.form-frame {
    padding-inline: 0;
  }
}

@media (min-width: 768px) {
  .admin-job-offer-edit__form {
    grid-column: span 2 / span 2;
  }
}

.admin-job-offer-edit__heading--spaced {
  margin-block-start: 1rem;
}

.admin-job-offer-edit__copy,
.admin-job-offer-edit__link-row,
.admin-job-offer-public-page__copy,
.admin-job-offer-public-page__link-row {
  margin-block-start: 0.5rem;
}

.admin-job-offer-edit__form {
  margin-block-start: 1.5rem;
}

@media (min-width: 768px) {
  .admin-job-offer-edit__form {
    margin-block-start: 0;
  }
}

.admin-job-offer-content-form {
  padding-inline: 1.5rem;
}

.admin-job-offer-content-form__title {
  inline-size: 100%;
  border: 0;
  font-size: 1.5rem;
}

.admin-job-offer-content-form__body {
  margin-block-start: 2.5rem;
}

.admin-job-offer-content-form__description {
  inline-size: 100%;
  min-block-size: 40vh;
  border: 0;
  font-size: 1.25rem;
}

.admin-job-offer-public-page {
  display: flex;
  flex-direction: column;
}

.admin-job-offer-public-page__form {
  margin-block-start: 1.5rem;
}

.admin-job-offer-public-page__copy--strong {
  font-weight: 600;
}

@media (min-width: 640px) {
  .admin-job-offer-public-page {
    flex-direction: row-reverse;
  }

  .admin-job-offer-public-page__form {
    inline-size: 66.666667%;
  }

  .admin-job-offer-public-page__info {
    inline-size: 33.333333%;
  }
}

@media (min-width: 768px) {
  .admin-job-offer-public-page__form {
    margin-block-start: 0;
  }
}

.admin-job-offer-theme-picker__label {
  margin-block-end: 0.75rem;
}

.admin-job-offer-theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-job-offer-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: transparent;
  padding: 0.5rem;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.admin-job-offer-theme-card--idle:hover {
  border-color: var(--color-border-medium);
}

.admin-job-offer-theme-card--selected {
  border-color: var(--color-info);
  box-shadow: 0 0 0 2px rgb(var(--palette-blue-200));
}

.admin-job-offer-theme-card__preview {
  inline-size: 7rem;
  block-size: 4rem;
  margin-block-end: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.admin-job-offer-theme-card__hero,
.admin-job-offer-theme-card__body {
  block-size: 2rem;
}

.admin-job-offer-theme-card__body {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--color-surface);
  padding-inline: 0.5rem;
}

.admin-job-offer-theme-card__dot {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--radius-pill);
}

.admin-job-offer-theme-card__line {
  flex: 1 1 auto;
  block-size: 0.375rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-border);
}

.admin-job-offer-theme-card__label {
  color: var(--color-ink-light);
  font-size: 0.75rem;
  font-weight: 500;
}

.admin-job-offer-skill-fields__row,
.admin-job-offer-skill-fields__controls {
  display: flex;
  align-items: center;
}

.admin-job-offer-skill-fields__row {
  justify-content: space-between;
}

.admin-job-offer-skill-fields__controls {
  inline-size: 100%;
}

@media (min-width: 640px) {
  .admin-job-offer-skill-fields__controls {
    justify-content: space-between;
  }
}

.admin-job-offer-skill-fields__field {
  flex: 1 1 50%;
  inline-size: 50%;
  margin-block-start: 1rem;
  margin-inline-end: 1rem;
}

.admin-job-offer-skill-fields__field:first-child {
  flex-grow: 1;
  margin-inline-end: 1.5rem;
}

.admin-job-offer-skill-fields__control {
  margin-block-start: 0.25rem;
}

.admin-job-offer-skill-fields__remove {
  margin-block-start: 2.5rem;
}

.admin-job-offer-skill-fields__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger-strong);
}

.admin-job-offer-skill-fields__remove-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.job-architecture-filter {
  display: flex;
  gap: 1rem;
  margin-block-end: 1rem;
}

.job-architecture-filter__form {
  display: flex;
  gap: 1rem;
}

.job-architecture-filter__empty {
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
}

.job-architecture-page-section {
  margin-block-start: 1.5rem;
}

.job-architecture-form-stack {
  display: flex;
  flex-direction: column;
}

.job-architecture-form-stack > .alert + .job-architecture-form-section {
  margin-block-start: 2rem;
}

.job-architecture-form-section__description,
.job-architecture-form-section__hint {
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
}

.job-architecture-form-section__description {
  margin-block-start: 0.5rem;
  line-height: 1.25rem;
}

.job-architecture-form-section__hint {
  margin-block-start: 0.25rem;
  line-height: 1rem;
}

.job-architecture-form-section__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-inline-size: 0;
}

.job-architecture-form-section + .job-architecture-form-section {
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--color-border-medium);
  padding-block-start: 1.5rem;
}

.job-architecture-summary,
.job-architecture-score-card {
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  padding: 1rem;
}

.job-architecture-score-card__value {
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 600;
}

.job-architecture-detail-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 1rem;
}

.job-architecture-detail-list--stacked {
  display: flex;
  flex-direction: column;
}


.job-architecture-detail-list__description {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: 0.875rem;
}

.job-architecture-detail-list__description--prewrap {
  white-space: pre-wrap;
}

.job-architecture-detail-list__wide {
  min-inline-size: 0;
}

/* Job position profile */

.job-position-profile {
  max-inline-size: 78rem;
  margin-inline: auto;
  padding-block-end: 2rem;
  color: var(--color-ink);
}

.job-position-profile__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  border-block-end: 1px solid var(--color-border-medium);
  padding-block-end: 1.5rem;
}

.job-position-profile__identity {
  min-inline-size: 0;
}

.job-position-profile__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-xx-large);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

.job-position-profile__codes,
.job-position-profile__classification-list,
.job-position-profile__salary,
.job-position-profile__valuation {
  margin: 0;
}

.job-position-profile__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0;
  margin-block-start: 1rem;
}

.job-position-profile__code {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-inline-size: 0;
}

.job-position-profile__code + .job-position-profile__code {
  margin-inline-start: 1rem;
  border-inline-start: 1px solid var(--color-border-medium);
  padding-inline-start: 1rem;
}

.job-position-profile__code dt,
.job-position-profile__classification-item dt,
.job-position-profile__salary dt,
.job-position-profile__valuation dt {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.3;
}

.job-position-profile__code dd,
.job-position-profile__classification-item dd,
.job-position-profile__salary dd,
.job-position-profile__valuation dd {
  margin: 0;
}

.job-position-profile__code dd {
  font-size: var(--text-normal);
  font-weight: 600;
}

.job-position-profile__edit {
  flex: 0 0 auto;
}

.job-position-profile__classification {
  padding-block: 1.5rem 2rem;
}

.job-position-profile__classification-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.job-position-profile__classification-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-inline-size: 0;
}

.job-position-profile__classification-item dt,
.job-position-profile__classification-item dd {
  overflow-wrap: anywhere;
}

.job-position-profile__classification-item dd {
  margin-block-start: 0.25rem;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
}

.job-position-profile__classification-icon {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
}

.job-position-profile__classification-icon .icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.job-position-profile__layout {
  display: grid;
  gap: 2rem;
}

.job-position-profile__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-inline-size: 0;
}

.job-position-profile__narrative-section,
.job-position-profile__training {
  min-inline-size: 0;
}

.job-position-profile__section-title,
.job-position-profile__summary-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.job-position-profile__section-title {
  border-block-end: 1px solid var(--color-border-medium);
  padding-block-end: 0.75rem;
}

.job-position-profile__prose {
  max-inline-size: 70ch;
  margin-block: 1rem 0;
  color: var(--color-ink);
  font-size: var(--text-normal);
  line-height: 1.6;
  white-space: pre-wrap;
  text-wrap: pretty;
}

.job-position-profile__training-table-wrap {
  overflow-x: auto;
  margin-block-start: 0.75rem;
}

.job-position-profile__training-table {
  inline-size: 100%;
  min-inline-size: 40rem;
  border-collapse: collapse;
  color: var(--color-ink);
  font-size: var(--text-small);
}

.job-position-profile__training-table th,
.job-position-profile__training-table td {
  padding-block: 0.75rem;
  padding-inline: 0.5rem;
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.job-position-profile__training-table th {
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.job-position-profile__training-table th:first-child,
.job-position-profile__training-table td:first-child {
  padding-inline-start: 0;
}

.job-position-profile__training-table th:last-child,
.job-position-profile__training-table td:last-child {
  padding-inline-end: 0;
}

.job-position-profile__empty {
  margin-block: 1rem 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.job-position-profile__aside {
  align-self: start;
  min-inline-size: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
  padding: 1.5rem;
}

.job-position-profile__summary-section + .job-position-profile__summary-section {
  margin-block-start: 1.5rem;
  border-block-start: 1px solid var(--color-border-medium);
  padding-block-start: 1.5rem;
}

.job-position-profile__salary {
  margin-block-start: 0.75rem;
}

.job-position-profile__salary-item {
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--color-border-medium);
}

.job-position-profile__salary-item dd {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.job-position-profile__currency {
  padding-block-start: 0.75rem;
}

.job-position-profile__currency dd {
  margin-block-start: 0.25rem;
  font-size: var(--text-small);
  font-weight: 600;
}

.job-position-profile__valuation {
  margin-block-start: 0.75rem;
}

.job-position-profile__valuation-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.35rem;
}

.job-position-profile__valuation-row dt {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0.75rem;
}

.job-position-profile__valuation-row dt::after {
  content: "";
  flex: 1 1 auto;
  border-block-end: 1px dotted var(--color-border-strong);
}

.job-position-profile__valuation-row dd {
  flex: 0 0 auto;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
}

.job-position-profile__valuation-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 0.75rem;
  border-block-start: 1px solid var(--color-border-medium);
  padding-block-start: 1rem;
}

.job-position-profile__valuation-total dt {
  color: var(--color-ink);
  font-weight: 500;
}

.job-position-profile__valuation-total dd {
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1;
}

.required-trainings-table {
  overflow-x: auto;
}

.required-trainings-table__name {
  min-inline-size: 16rem;
}

.required-trainings-table__meta,
.training-compliance-table__meta {
  display: block;
  margin-block-start: 0.125rem;
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
}

.required-trainings-table__notes {
  min-inline-size: 16rem;
}

.training-compliance-intro {
  margin-block-end: 1rem;
}

.training-compliance-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-wrap: wrap;
}

.training-compliance-page-header__copy {
  min-inline-size: 0;
}

.training-compliance-page-header__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  line-height: 1.2;
  text-wrap: balance;
}

.training-compliance-page-header__description {
  max-inline-size: 70ch;
  margin: var(--gap-xs) 0 0;
  color: var(--color-ink-light);
  line-height: 1.5;
  text-wrap: pretty;
}

.training-compliance-intro__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 600;
}

.training-compliance-intro__description {
  max-inline-size: 70ch;
  margin-block-start: 0.375rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.4;
}

.training-compliance-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-end: 1rem;
}

.training-compliance-summary__item {
  min-inline-size: 9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  padding: 0.75rem;
}

.training-compliance-summary__label,
.training-compliance-table__primary {
  display: block;
  color: var(--color-ink);
  font-weight: 600;
}

.training-compliance-summary__value {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: 1.25rem;
  font-weight: 700;
}

.training-compliance-filter {
  flex-wrap: wrap;
  margin-block-end: 1rem;
}

.training-compliance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.training-compliance-table {
  overflow-x: auto;
}

.training-compliance-status {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.training-compliance-status--ok {
  background: rgb(var(--palette-green-50));
  color: rgb(var(--palette-green-700));
}

.training-compliance-status--approved,
.training-compliance-status--completed,
.training-compliance-status--closed {
  background: rgb(var(--palette-green-50));
  color: rgb(var(--palette-green-700));
}

.training-compliance-status--draft,
.training-compliance-status--proposed {
  background: var(--color-surface-subtle);
  color: var(--color-ink-light);
}

.training-compliance-status--in_review,
.training-compliance-status--planned,
.training-compliance-status--scheduled {
  background: rgb(var(--palette-blue-50));
  color: rgb(var(--palette-blue-700));
}

.training-compliance-status--cancelled {
  background: rgb(var(--palette-red-50));
  color: rgb(var(--palette-red-700));
}

.training-compliance-status--pending,
.training-compliance-status--missing_position {
  background: rgb(var(--palette-blue-50));
  color: rgb(var(--palette-blue-700));
}

.training-compliance-status--expiring_soon {
  background: rgb(var(--palette-amber-50));
  color: rgb(var(--palette-amber-800));
}

.training-compliance-status--expired {
  background: rgb(var(--palette-red-50));
  color: rgb(var(--palette-red-700));
}

.training-plan-item-detail {
  margin-block-start: 1rem;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 1rem;
}

.training-plan-item-detail__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
}

.training-plan-item-detail__row {
  min-inline-size: 0;
}

.training-plan-item-detail__term {
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
  font-weight: 600;
}

.training-plan-item-detail__description {
  margin: 0.25rem 0 0;
  color: var(--color-ink);
  font-weight: 600;
}

.training-plan-item-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-block-start: 1.25rem;
}

.training-plan-item-notes__block {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 1rem;
}

.job-architecture-show-header,
.job-architecture-show-body {
  padding: 1.25rem 1rem;
}

.job-architecture-show-header__subtitle {
  margin-block-start: 0.25rem;
  max-inline-size: 42rem;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
}

.job-architecture-show-body {
  border-block-start: 1px solid var(--color-border);
}

.job-template-title {
  color: var(--color-ink);
  font-weight: 600;
}

.job-template-content {
  margin-block-start: 1.5rem;
}

.job-template-list-pagination,
.job-step-template-list {
  margin-block-start: 1rem;
}

.job-step-template-header {
  display: flex;
  align-items: center;
}

.job-step-template-notification {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
}

.job-step-template-notification__action {
  margin-inline-start: 1.5rem;
}


.job-step-template-meeting-choice {
  margin: 1rem;
}

.job-step-template-meeting-choice__label {
  padding-inline-start: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

.job-valuation-form {
  padding-inline: 2.5rem;
  padding-block: 1rem;
}

.job-valuation-progress {
  margin-block-start: 0.5rem;
}

.job-valuation-progress__track {
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
}

.job-valuation-progress__bar {
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
}

.job-valuation-progress__bar--success {
  background-color: var(--color-success-strong);
}

.job-valuation-progress__bar--danger {
  background-color: var(--color-danger-strong);
}

@media (min-width: 640px) {
  .job-position-profile__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .job-position-profile__classification-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-architecture-show-header,
  .job-architecture-show-body {
    padding-inline: 1.5rem;
  }

  .job-step-template-notification {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .job-architecture-form-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .job-architecture-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-architecture-detail-list--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .job-architecture-detail-list--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .job-architecture-detail-list__wide {
    grid-column: span 2 / span 2;
  }
}

.candidate-meeting-page {
  max-inline-size: 80rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .job-position-profile__classification-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .job-position-profile__layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
    gap: 2.5rem;
  }

  .job-position-profile__aside {
    position: sticky;
    inset-block-start: 1rem;
  }

  .candidate-meeting-page__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
  }

  .candidate-meeting-page__main {
    grid-column: span 7 / span 7;
  }

  .candidate-meeting-page__aside {
    grid-column: span 5 / span 5;
  }
}

.candidate-meeting-page__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.candidate-meeting-card {
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow:
    var(--shadow-ring-subtle),
    var(--shadow-sm);
}

@media (min-width: 1024px) {
  .candidate-meeting-card--sticky {
    position: sticky;
    inset-block-start: 1.5rem;
  }
}

.candidate-meeting-card__header {
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border-muted);
}

.candidate-meeting-card__body {
  padding: 1rem 1.25rem;
}

.candidate-meeting-card__body--roomy {
  padding: 1.25rem 1.5rem;
}

.candidate-meeting-card__header-row,
.candidate-meeting-card__title-row {
  display: flex;
  align-items: center;
}

.candidate-meeting-card__header-row {
  justify-content: space-between;
}

.candidate-meeting-card__title-row {
  gap: 0.5rem;
}

.candidate-meeting-card__title-row--spaced {
  margin-block-end: 1rem;
}

.candidate-meeting-card__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-lg);
}

.candidate-meeting-card__icon-box--amber {
  background-color: rgb(var(--palette-amber-50));
}

.candidate-meeting-card__icon-box--blue {
  background-color: rgb(var(--palette-blue-50));
}

.candidate-meeting-card__icon-box--violet {
  background-color: rgb(var(--palette-violet-50));
}

.candidate-meeting-card__icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.candidate-meeting-card__icon--amber {
  color: rgb(var(--palette-amber-600));
}

.candidate-meeting-card__icon--blue {
  color: var(--color-info-strong);
}

.candidate-meeting-card__icon--violet {
  color: rgb(var(--palette-violet-600));
}

.candidate-meeting-card__add-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  background-color: rgb(var(--palette-indigo-50));
  padding: 0.375rem 0.75rem;
  color: rgb(var(--palette-indigo-700));
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-strong) 20%, transparent);
  transition: background-color 150ms ease;
}

.candidate-meeting-card__add-link:hover {
  background-color: rgb(var(--palette-indigo-100));
}

.candidate-meeting-card__add-icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.candidate-meeting-card__list {
  margin-block-start: 1rem;
}

.candidate-meeting-template-stack > * + * {
  margin-block-start: 1.25rem;
}

/* Job position editor */

.job-position-editor.panel {
  max-inline-size: 82rem;
  margin-inline: auto;
  padding: 0;
  color: var(--color-ink);
}

.job-position-editor > .alert {
  margin-block: 1rem;
}

.job-position-editor .btn {
  border-radius: var(--radius-xl);
}

.job-position-editor__header {
  border-block-end: 1px solid var(--color-border-medium);
  padding: 1.5rem;
}

.job-position-editor__identity {
  min-inline-size: 0;
}

.job-position-editor__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

.job-position-editor__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0;
  margin: 1rem 0 0;
}

.job-position-editor__metadata-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.job-position-editor__metadata-item + .job-position-editor__metadata-item {
  margin-inline-start: 1rem;
  border-inline-start: 1px solid var(--color-border-medium);
  padding-inline-start: 1rem;
}

.job-position-editor__metadata dt {
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.job-position-editor__metadata dd {
  margin: 0;
  font-weight: 600;
}

.job-position-editor__action-bar,
.job-position-editor__action-bar-buttons {
  display: flex;
  align-items: center;
}

.job-position-editor__save-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  white-space: nowrap;
}

.job-position-editor__save-status::before {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-success-strong);
  content: "";
}

.job-position-editor__save-status--dirty::before {
  background: rgb(var(--palette-amber-500));
}

.job-position-editor__mobile-navigation {
  display: none;
  padding: 1rem;
}

.job-position-editor__layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  min-block-size: 38rem;
  border-block-end: 1px solid var(--color-border-medium);
}

.job-position-editor__navigation {
  border-inline-end: 1px solid var(--color-border-medium);
  padding: 1.25rem 1rem;
}

.job-position-editor__navigation [role="tablist"] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.job-position-editor__navigation-item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  inline-size: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  padding: 0.75rem;
  color: var(--color-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.job-position-editor__navigation-item:hover {
  background: var(--color-surface-muted);
}

.job-position-editor__navigation-item:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.job-position-editor__navigation-item--active {
  background: rgb(var(--palette-indigo-50));
  color: var(--color-brand-strong);
}

.job-position-editor__navigation-item--active .job-position-editor__navigation-icon {
  border-color: var(--color-brand-strong);
  color: var(--color-brand-strong);
}

.job-position-editor__navigation-item--active .job-position-editor__navigation-icon .icon {
  opacity: 0;
}

.job-position-editor__navigation-icon {
  display: grid;
  place-items: center;
  inline-size: 1rem;
  block-size: 1rem;
  margin-block-start: 0.125rem;
  border: 2px solid currentcolor;
  border-radius: var(--radius-pill);
  color: var(--color-ink-medium);
}

.job-position-editor__navigation-icon--complete {
  border-color: var(--color-success-strong);
  color: var(--color-success-strong);
}

.job-position-editor__navigation-icon .icon {
  inline-size: 0.65rem;
  block-size: 0.65rem;
}

.job-position-editor__navigation-copy,
.job-position-editor__navigation-label,
.job-position-editor__navigation-status {
  display: block;
}

.job-position-editor__navigation-label {
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.25;
}

.job-position-editor__navigation-status {
  margin-block-start: 0.25rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.25;
}

.job-position-editor__workspace {
  min-inline-size: 0;
}

.job-position-editor__panel {
  padding: 1.75rem 1.5rem 2.5rem;
}

.job-position-editor__panel[hidden] {
  display: none;
}

.job-position-editor__panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-end: 1.75rem;
}

.job-position-editor__panel-title,
.job-position-editor__subsection-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.3;
}

.job-position-editor__panel-description,
.job-position-editor__subsection-description {
  max-inline-size: 65ch;
  margin: 0.5rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-normal);
  line-height: 1.5;
  text-wrap: pretty;
}

.job-position-editor__panel-summary {
  flex: 0 0 auto;
  margin: 0.125rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  white-space: nowrap;
}

.job-position-editor__training-summary {
  display: inline-flex;
  gap: 0.5rem;
}

.job-position-editor__fields {
  display: grid;
  gap: 1.25rem;
}

.job-position-editor__fields--two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-position-editor__fields--three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.job-position-editor__field-hint {
  margin: 0.25rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-normal);
  line-height: 1.4;
}

.job-position-editor__subsection + .job-position-editor__subsection {
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--color-border-medium);
  padding-block-start: 1.75rem;
}

.job-position-editor__subsection > .job-position-editor__fields {
  margin-block-start: 1.25rem;
}

.job-position-editor__score-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0;
  border-block-start: 1px solid var(--color-border-medium);
  padding-block-start: 1rem;
}

.job-position-editor__score-total dt {
  font-weight: 600;
}

.job-position-editor__score-total dd {
  margin: 0;
  font-size: var(--text-x-large);
  font-weight: 700;
}

.job-position-editor__training-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
}

.job-position-editor__training-search {
  position: relative;
  inline-size: min(100%, 17rem);
}

.job-position-editor__training-search > .icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.75rem;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--color-ink-light);
  pointer-events: none;
  transform: translateY(-50%);
}

.job-position-editor__training-search .input {
  padding-inline-start: 2.25rem;
}

.job-position-editor__training-message {
  margin: -0.5rem 0 1rem;
  color: var(--color-danger-strong);
  font-size: var(--text-normal);
}

.job-position-editor__training-table {
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-sm);
}

.job-position-editor__training-table-header,
.job-position-editor__training-row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 1.3fr) minmax(6rem, 0.65fr) minmax(8.5rem, 0.9fr) minmax(9rem, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.job-position-editor__training-table-header {
  background: var(--color-surface-muted);
  padding: 0.75rem;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.job-position-editor__training-row {
  padding: 1rem 0.75rem;
  border-block-start: 1px solid var(--color-border);
}

.job-position-editor__training-primary,
.job-position-editor__training-meta {
  display: block;
}

.job-position-editor__training-primary {
  font-size: var(--text-normal);
  font-weight: 600;
  line-height: 1.35;
}

.job-position-editor__training-meta {
  margin-block-start: 0.25rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.job-position-editor__toggle-field {
  position: relative;
}

.job-position-editor__toggle-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.job-position-editor__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink);
  font-size: var(--text-small);
  cursor: pointer;
}

.job-position-editor__toggle-control {
  position: relative;
  flex: 0 0 auto;
  inline-size: 2.25rem;
  block-size: 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition: background-color 150ms ease;
}

.job-position-editor__toggle-control::after {
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  content: "";
  transition: transform 150ms ease;
}

.job-position-editor__toggle-input:checked + .job-position-editor__toggle-label .job-position-editor__toggle-control {
  background: var(--color-brand);
}

.job-position-editor__toggle-input:checked + .job-position-editor__toggle-label .job-position-editor__toggle-control::after {
  transform: translateX(1rem);
}

.job-position-editor__toggle-input:focus-visible + .job-position-editor__toggle-label .job-position-editor__toggle-control {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.job-position-editor__training-notes .input {
  min-inline-size: 0;
  min-block-size: 3.75rem;
  resize: vertical;
}

.job-position-editor__remove-training {
  border: 0;
  background: transparent;
  padding: 0.5rem;
  color: var(--color-brand-strong);
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
}

.job-position-editor__remove-training:hover {
  text-decoration: underline;
}

.job-position-editor__remove-training:focus-visible,
.job-position-editor__add-another:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.job-position-editor__training-empty,
.job-position-editor__training-catalog-empty {
  margin: 0;
  padding: 1.5rem;
  color: var(--color-ink-light);
  font-size: var(--text-normal);
  text-align: center;
}

.job-position-editor__add-another {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  border: 0;
  border-block-start: 1px solid var(--color-border);
  background: transparent;
  padding: 0.9rem 1rem;
  color: var(--color-brand-strong);
  font: inherit;
  font-size: var(--text-small);
  text-align: start;
  cursor: pointer;
}

.job-position-editor__add-another:hover {
  background: var(--color-surface-muted);
}

.job-position-editor__add-another .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.job-position-editor__action-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 10;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--color-border-medium);
  background: var(--color-surface);
  padding: 1rem;
}

.job-position-editor__action-bar-buttons {
  gap: 0.75rem;
}

@container (max-width: 40rem) {
  .job-position-editor__training-table-header {
    display: none;
  }

  .job-position-editor__training-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-position-editor__training-name,
  .job-position-editor__training-notes {
    grid-column: 1 / -1;
  }

  .job-position-editor__remove-training {
    justify-self: start;
  }
}

@media (max-width: 70rem) {
  .job-position-editor__training-table-header {
    display: none;
  }

  .job-position-editor__training-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-position-editor__training-name,
  .job-position-editor__training-notes {
    grid-column: 1 / -1;
  }

  .job-position-editor__remove-training {
    justify-self: start;
  }
}

@media (max-width: 48rem) {
  .job-position-editor__header {
    padding: 1.25rem 1rem;
  }

  .job-position-editor__title {
    font-size: var(--text-x-large);
  }

  .job-position-editor__mobile-navigation {
    display: block;
  }

  .job-position-editor__layout {
    display: block;
    min-block-size: 0;
    border-block-start: 1px solid var(--color-border-medium);
  }

  .job-position-editor__navigation {
    display: none;
  }

  .job-position-editor__panel {
    padding: 1.25rem 1rem 2rem;
  }

  .job-position-editor__panel-header,
  .job-position-editor__training-toolbar {
    flex-direction: column;
  }

  .job-position-editor__panel-summary {
    white-space: normal;
  }

  .job-position-editor__fields--two-columns,
  .job-position-editor__fields--three-columns,
  .job-position-editor__training-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .job-position-editor__training-search {
    inline-size: 100%;
  }

  .job-position-editor__training-toolbar {
    align-items: stretch;
  }

  .job-position-editor__training-name,
  .job-position-editor__training-notes {
    grid-column: auto;
  }

  .job-position-editor__training-row {
    align-items: start;
  }

  .job-position-editor__action-bar {
    margin-inline: 0;
  }

  .job-position-editor__action-bar .job-position-editor__save-status {
    display: none;
  }

  .job-position-editor__action-bar-buttons {
    inline-size: 100%;
  }

  .job-position-editor__action-bar-buttons .btn {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .job-position-editor__toggle-control,
  .job-position-editor__toggle-control::after {
    transition-duration: 0.01ms;
  }
}