@layer components {
  /* Column
  /* ------------------------------------------------------------------------ */

  .cards {
    --column-color: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas));

    inline-size: var(--column-width-expanded);
    outline: none;
    position: relative;
    scroll-snap-align: center;
  }

  .cards__list {
    display: flex;
    flex-direction: column;
    gap: var(--cards-gap);
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Cards grid: the member cards on the ala, teachers and students pages
  /* -------------------------------------------------------------------------- */

  .cards--grid {
    --cards-gap: 1rem;
    --card-grid-columns: 1;

    container-type: inline-size;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: var(--main-width);

    @media (min-width: 640px) {
      --card-grid-columns: 2;
    }

    @media (min-width: 960px) {
      --card-grid-columns: 3;
    }

    .cards__list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--cards-gap);
      justify-content: center;
      padding: 1ch;
    }

    .card {
      inline-size: calc((100% - var(--cards-gap) * (var(--card-grid-columns) - 1) ) / var(--card-grid-columns));
    }
  }

  /* Card column indicators
  /* -------------------------------------------------------------------------- */

  .card__column-name {
    --btn-background: transparent;
    --btn-padding: 0.2em 0.5em;
    --btn-border-size: 0;
    --btn-border-radius: 0.2em;

    color: inherit;
    inline-size: 100%;
    justify-content: flex-start;
    text-transform: uppercase;

    @media (hover: hover) {
      &:not(.card__column-name--current):hover {
        --btn-background: color(from var(--column-color) srgb r g b / 0.15);

        color: var(--column-color);
      }
    }
  }

  .card__column-name--current {
    --btn-background: var(--card-color);

    color: var(--color-ink-inverted);

    /* The current stage can't be picked again, but it doesn't fade like a
       disabled one: it's the stage the card is in. */
    &:disabled {
      opacity: 1;
    }

    @media (hover: hover) {
      &:hover {
        --btn-background: var(--card-color);
      }
    }
  }
}

/* Compact member rows on phones
/* -------------------------------------------------------------------------- */

/* The member cards on segment show / teachers / students index (.cards--grid
 * .profile-layout .panel) get their desktop centered-card look from utility
 * classes — .flex-column, .align-center, .txt-align-center — defined in
 * utilities.css. _global.css declares
 * `@layer reset, base, components, modules, utilities, native, platform;`,
 * putting `utilities` after this file's `components` layer, so a rule in
 * `@layer components` can never beat those utility classes here, no matter
 * how specific the selector — layer order always wins over specificity.
 * This block is therefore intentionally left unlayered: unlayered rules
 * always beat layered ones, which lets us restyle these rows for mobile
 * without touching the shared utility classes or resorting to !important. */
@media (max-width: 639px) {
  /* The panel's --panel-size: 45ch inline style (set in the view) is wider
   * than a 390px viewport. .cards__list wraps flex items but never shrinks
   * them, and .profile-layout (a plain flex child) doesn't stretch to the
   * row's available width on its own, so both the wrapper and the panel
   * rendered at their 45ch preferred size — overflowing .cards__list's
   * overflow-x: hidden and silently clipping the edit button's right edge.
   * Force both to the full row width so the panel's max-inline-size: 100%
   * (from the base .panel rule) has a sane 100% to clamp against. */
  .cards--grid .profile-layout {
    inline-size: 100%;
  }

  .cards--grid .profile-layout .panel {
    inline-size: 100%;
    max-inline-size: 100%;
    padding: 0.75rem 1rem;
    text-align: start;
  }

  .cards--grid .profile-layout .panel > .flex.flex-column {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .cards--grid .profile-layout .avatar {
    --avatar-size: 44px;

    /* .center (margin-inline: auto) is meant for the desktop column layout;
     * in this row layout it eats all the row's free space and shoves the
     * text flush against the right edge, under the edit button. */
    font-size: 1rem;
    flex: none;
    margin-inline: 0;
  }

  .cards--grid .profile-layout h1 {
    font-size: var(--text-medium);
  }

  .cards--grid .profile-layout .align-center {
    align-items: flex-start;
  }

  .cards--grid .profile-layout a[href^="mailto:"] {
    word-break: break-all;
  }
}