@layer modules {
  .salary-tables__intro,
  .salary-table-summary__description {
    color: var(--color-ink-light);
    max-inline-size: 72ch;
  }

  .salary-tables__table-wrap {
    overflow-x: auto;
  }

  .salary-tables__table {
    inline-size: 100%;
  }

  .salary-tables__code,
  .salary-version-row__date,
  .salary-version-row__publisher,
  .salary-matrix__row-meta,
  .salary-rate__basis {
    color: var(--color-ink-light);
    display: block;
    font-size: var(--text-small);
  }

  .salary-tables__status {
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: var(--text-small);
    font-weight: 600;
    padding: 0.25rem 0.625rem;
  }

  .salary-tables__status--active,
  .salary-tables__status--published {
    background: rgb(var(--palette-green-50));
    color: rgb(var(--palette-green-700));
  }

  .salary-tables__status--inactive,
  .salary-tables__status--draft {
    background: var(--color-surface-subtle);
    color: var(--color-ink-light);
  }

  .salary-table-summary__details,
  .salary-version-header,
  .salary-version-row,
  .salary-matrix__row-header,
  .salary-version-header__actions,
  .salary-matrix__row-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
  }

  .salary-table-summary__details > div {
    min-inline-size: 9rem;
  }

  .salary-table-summary__details dt {
    color: var(--color-ink-light);
    font-size: var(--text-small);
  }

  .salary-table-summary__details dd {
    font-weight: 600;
    margin-inline-start: 0;
  }

  .salary-tables__versions,
  .salary-matrix {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--gap-lg);
    padding-block-start: var(--gap-lg);
  }

  .salary-version-row {
    border-block-end: 1px solid var(--color-border);
    justify-content: space-between;
    padding-block: var(--gap-md);
  }

  .salary-version-row__identity,
  .salary-version-header > :first-child,
  .salary-matrix__row-header > :first-child {
    flex: 1;
  }

  .salary-version-header {
    justify-content: space-between;
    margin-block-end: var(--gap-lg);
  }

  .salary-matrix__row {
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--gap-lg);
  }

  .salary-matrix__row-header {
    justify-content: space-between;
  }

  .salary-matrix__row-title {
    font-size: var(--text-medium);
    margin: 0;
  }

  .salary-matrix__rates {
    display: grid;
    gap: var(--gap-sm);
    margin-block-start: var(--gap-md);
  }

  .salary-rate {
    align-items: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--gap-sm);
    grid-template-columns: minmax(12rem, 2fr) minmax(7rem, 1fr) minmax(10rem, 1fr) auto;
    padding: 0.75rem 1rem;
  }

  .salary-rate__amount {
    font-variant-numeric: tabular-nums;
  }

  .salary-tables__empty {
    color: var(--color-ink-light);
    padding-block: var(--gap-xl);
    text-align: center;
  }

  .salary-import-form,
  .salary-import-mapping,
  .salary-import-regions,
  .salary-import-results {
    border-block-start: 1px solid var(--color-border);
    display: grid;
    gap: var(--gap-md);
    margin-block-start: var(--gap-lg);
    padding-block-start: var(--gap-lg);
  }

  .salary-import-status,
  .salary-import-sheets {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin-block-end: var(--gap-md);
  }

  .salary-import-preview-grid {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    max-block-size: 22rem;
    overflow: auto;
  }

  .salary-import-columns {
    display: grid;
    gap: var(--gap-sm);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  .salary-import-column {
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--gap-sm);
    padding: var(--gap-md);
  }

  .salary-import-column__sample {
    min-block-size: 2.5rem;
    overflow-wrap: anywhere;
  }

  .salary-import-column__check {
    align-items: center;
    display: flex;
    gap: var(--gap-sm);
  }

  .salary-import-results__warning {
    background: color-mix(in oklch, var(--color-warning) 18%, var(--color-surface));
    border-radius: var(--radius-lg);
    color: var(--color-ink);
    padding: 0.75rem 1rem;
  }

  .salary-comparison-filter,
  .compensation-history__header,
  .compensation-history__summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
  }

  .salary-comparison-filter {
    margin-block-end: var(--gap-lg);
  }

  .salary-comparison-table-wrap {
    margin-block-end: var(--gap-lg);
    overflow-x: auto;
  }

  .salary-comparison-table {
    min-inline-size: 80rem;
  }

  .salary-comparison-table__row--error {
    background: color-mix(in oklch, var(--color-danger) 7%, var(--color-surface));
  }

  .salary-comparison-table__amount {
    min-inline-size: 8rem;
  }

  .salary-comparison-table__delta {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .salary-comparison-table__delta--positive {
    color: var(--color-success-strong);
  }

  .salary-comparison-table__delta--negative {
    color: var(--color-danger-strong);
  }

  .compensation-history {
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--gap-md);
    padding-block-end: var(--gap-md);
  }

  .compensation-history__header {
    justify-content: space-between;
  }

  .compensation-history__title {
    margin: 0;
  }

  .compensation-history__description,
  .compensation-history__notes {
    color: var(--color-ink-light);
    margin-block: 0.25rem 0;
  }

  .compensation-history__revision {
    border-block-start: 1px solid var(--color-border);
    padding-block: var(--gap-sm);
  }

  .compensation-history__summary {
    cursor: pointer;
    list-style: none;
  }

  .compensation-history__lines {
    display: grid;
    gap: var(--gap-xs);
    margin-block: var(--gap-sm);
  }

  .compensation-history__lines > div {
    display: flex;
    justify-content: space-between;
  }

  .compensation-history__lines dd {
    font-variant-numeric: tabular-nums;
    margin-inline-start: var(--gap-md);
  }

  @media (max-width: 48rem) {
    .salary-rate {
      grid-template-columns: 1fr;
    }
  }
}