@layer modules {
  .status-banner {
    --status-banner-tone: var(--color-primary);
    --tabs-current-border-color: var(--color-ink);

    background-color: color-mix(in srgb, var(--status-banner-tone) 25%, var(--color-canvas));
    border: var(--border);
    border-color: color-mix(in srgb, var(--status-banner-tone) 75%, var(--color-canvas));
    column-gap: var(--inline-space-double);
    display: grid;
    grid-template-areas:
      "header action"
      "people action";
    grid-template-columns: minmax(0, 1fr) auto;
    inline-size: 100%;
    padding: var(--block-space) var(--inline-space-double);
    row-gap: var(--block-space-half);

    .status-banner__header {
      grid-area: header;
    }

    .status-banner__people {
      grid-area: people;
    }

    .status-banner__action {
      align-self: center;
      grid-area: action;
    }

    button.status-banner__person {
      background: transparent;
      border: 0;
      display: inline-flex;
      padding: 0;
    }

    @media (max-width: 639px) {
      grid-template-areas:
        "header"
        "people"
        "action";
      grid-template-columns: minmax(0, 1fr);

      .status-banner__action {
        inline-size: 100%;
      }
    }
  }

  .status-card__heading {
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
  }

  .duty-team__heading {
    border-block-end: 1px solid var(--color-ink-light);
    padding-block-end: var(--block-space-half);
  }

  .assignee-row {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: var(--block-space-half);
    border: none;
    background-color: var(--canvas);
  }

  .assignee-row--leader {
    background-color: color-mix(in srgb, var(--color-link) 10%, transparent);
  }

  .assignee-row--off-duty :is(.avatar, .credential-badge__stack) {
    opacity: 0.5;
  }

  button.assignee-row {
    cursor: pointer;
    inline-size: 100%;
    text-align: start;

    &:hover {
      background-color: var(--color-ink-lightest);
    }
  }

  .assignee-row__presence {
    position: relative;

    &::after {
      background-color: var(--presence-color, var(--color-negative));
      block-size: var(--presence-size, 0.6rem);
      border: 1px solid var(--color-surface);
      border-radius: 50%;
      content: "";
      inline-size: var(--presence-size, 0.6rem);
      inset-block-end: -1px;
      inset-inline-end: -1px;
      position: absolute;
    }
  }

  .assignee-row__presence--on::after {
    --presence-color: var(--color-positive);
  }

  /* Engagement rows on the duty calendar, toned by state */
  .engagement-row {
    background-color: color-mix(in srgb, var(--engagement-tone, var(--color-ink-medium)) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--engagement-tone, var(--color-ink-medium)) 25%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space) var(--block-space);
    padding: var(--block-space-half) var(--inline-space);
  }

  .engagement-row--future,
  .engagement-row--no_walkthrough {
    --engagement-tone: var(--color-ink-medium);
  }

  .engagement-row--today {
    --engagement-tone: var(--color-link);
  }

  .engagement-row--complete {
    --engagement-tone: var(--color-positive);
  }


  .avatar__stack {
    display: inline-flex;

    .avatar + .avatar {
      margin-inline-start: -0.75rem;
    }
  }

  /* Fixed exit bar at the bottom of duty mode */
  .duty__exit-bar {
    background-color: var(--color-canvas);
    border-block-start: 1px solid var(--color-ink-light);
    inset-block-end: 0;
    inset-inline: 0;
    position: fixed;
    z-index: var(--z-nav);
  }

  /* Engagement form: title and schedule share the first row on wide screens;
   * the schedule column sizes to its summary. */
  .engagement-fields__headline {
    display: grid;
    gap: var(--block-space) var(--inline-space);

    @media (min-width: 700px) {
      align-items: end;
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  /* Previous/next links below the duty table. Both links share the row
   * equally; each can shrink until its date line would wrap, while the title
   * truncates. */
  .engagement-pager {
    display: flex;
    gap: var(--inline-space);

    .engagement-pager__link {
      flex: 1 1 0;
    }

    .engagement-pager__label {
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    /* Zero intrinsic width keeps a long title from widening the link; it
     * then stretches to whatever width the date line and row allow. */
    .engagement-pager__title {
      inline-size: 0;
      min-inline-size: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}