@layer components {
  .section-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
  .section-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
  }
  .section-card-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-block-end: 1rem;

    h2 {
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
    }
  }

  .member-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
  }
  .member-item {
    align-items: center;
    border-block-end: 1px solid var(--color-border);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding-block: 0.4rem;

    &:last-child { border-block-end: none; }
  }
  .member-item-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }
  .member-email {
    color: var(--color-text);
    font-size: 0.875rem;
  }

  /* "Also allocate [teacher] to [subject]?" straight after a teacher joins a
     class they have no allocation for (#1193). A question, not a warning. */
  .allocation-offer {
    background: var(--color-primary-tint);
    border: 1px solid var(--color-primary);
    border-radius: 0.5rem;
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;

    p { margin: 0 0 0.5rem; }
  }
  .allocation-offer__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .add-member-form {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: 1rem;
    padding-block-start: 1rem;

    h3 {
      color: var(--color-text-muted);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      margin: 0 0 0.5rem;
      text-transform: uppercase;
    }
    .form-row {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .form-control {
      flex: 1;
      min-inline-size: 10rem;
    }
  }

  .combobox {
    flex: 1;
    min-inline-size: 10rem;
    position: relative;

    .form-control { inline-size: 100%; }
  }
  .combobox-list,
  .combobox-empty {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    inset-block-start: calc(100% + 0.25rem);
    inset-inline: 0;
    max-block-size: 18rem;
    overflow-y: auto;
    position: absolute;
    z-index: 20;
  }
  .combobox-group-label {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    inset-block-start: 0;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
    position: sticky;
    text-transform: uppercase;
  }
  .combobox-option {
    color: var(--color-text);
    cursor: pointer;
    padding: 0.4rem 0.75rem;

    &:hover,
    &.is-active { background: var(--color-primary-tint); }
  }
  .combobox-empty {
    color: var(--color-text-muted);
    padding: 0.4rem 0.75rem;

    &:empty { display: none; }
  }

  .practice-section { margin-block-start: 1.5rem; }
  .practice-assignment-row {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .practice-assignment-info {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }
  .practice-window-form,
  .practice-window-fields {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .practice-window-fields label {
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.15rem;
  }
  .practice-picker-label {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.5rem;
    margin-block-end: 0.4rem;
  }
  .practice-assign-all {
    display: block;
    margin: 0.5rem 0;
  }

  /* Collapsible member list and add-member form: a chevron that turns when closed. */
  .section-toggle-summary {
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker { display: none; }
    &::after {
      color: var(--color-text-muted);
      content: '▾';
      font-size: 0.75rem;
      transition: transform 0.15s ease;
    }
  }
  .member-list-toggle:not([open]) {
    .section-toggle-summary::after { transform: rotate(-90deg); }
    .section-card-header { margin-block-end: 0; }
  }

  .add-member-toggle {
    > summary {
      align-items: center;
      cursor: pointer;
      display: flex;
      gap: 0.4rem;
      list-style: none;

      &::-webkit-details-marker { display: none; }
      h3 { margin: 0; }
      &::after {
        color: var(--color-text-muted);
        content: '▾';
        font-size: 0.75rem;
        transition: transform 0.15s ease;
      }
    }
    &:not([open]) > summary::after { transform: rotate(-90deg); }
    &[open] > summary { margin-block-end: 0.5rem; }
  }
}