@layer modules {
  .page {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    margin-block: var(--block-space-double);
    margin-inline: auto;
    max-inline-size: var(--main-width);
  }

  .page--narrow {
    max-inline-size: 100ch;
  }

  .page__eyebrow {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .page__title {
    font-size: var(--text-x-large);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
  }

  .home-grid {
    align-items: start;
    display: grid;
    gap: var(--block-space);
    grid-template-columns: minmax(0, 1fr);
    inline-size: 100%;

    @media (min-width: 1024px) {
      grid-template-areas:
        "status   status"
        "calendar calendar"
        "mine     activity";
      grid-template-columns: repeat(2, minmax(0, 1fr));

      .home-grid__status {
        grid-area: status;
      }

      .home-grid__calendar {
        grid-area: calendar;
      }

      .home-grid__activity {
        grid-area: activity;
      }

      .home-grid__mine {
        grid-area: mine;
      }
    }
  }

  .home-list__row {
    display: block;
    margin-inline: calc(var(--inline-space-half) * -1);
    padding-inline: var(--inline-space-half);

    @media (any-hover: hover) {
      &:where(a):hover {
        background-color: var(--color-ink-lightest);
      }
    }
  }

  .banned-guests {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .banned-guests__photo {
    aspect-ratio: 1;
    inline-size: 100%;
    object-fit: cover;
  }

  .team-grid {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    list-style: none;
    margin: var(--block-space) 0;
    padding: 0;
  }

  .team-grid__member {
    background-color: var(--color-surface);
    display: grid;
    min-inline-size: 0;
  }

  .team-grid__photo {
    display: block;
  }

  /* Template editor row: move, label, optional position, remove. The quiet
     position select drops below the label on narrow screens, its text lined
     up with the label's. */
  .walkthrough-template-item {
    align-items: center;
    display: grid;
    gap: var(--block-space-half) var(--inline-space-half);
    grid-template-areas:
      "move label remove"
      ". position .";
    grid-template-columns: auto minmax(0, 1fr) auto;

    @media (min-width: 640px) {
      grid-template-areas: "move label position remove";
      grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 12rem) auto;
    }
  }

  .walkthrough-template-item__move {
    grid-area: move;
  }

  .walkthrough-template-item__label {
    grid-area: label;
  }

  .walkthrough-template-item__position {
    grid-area: position;
    justify-self: start;
    margin-inline-start: 0.4em;
    max-inline-size: calc(100% - 0.4em);
  }

  .walkthrough-template-item__remove {
    grid-area: remove;
  }

  /* Template list: "List" shows items in order with position chips; "By
     position" groups them. The page-level radio picks one, so frames that
     re-render (edit, cancel) keep the current view. */
  /* Styled like the profile page's theme choice: ghost buttons, with the
     chosen one outlined on a shaded fill. */
  .walkthrough-templates__view {
    border: 0;
    display: flex;
    gap: var(--inline-space-half);
    margin: 0;
    padding: 0;

    .btn:has(input:checked) {
      --btn-background: var(--color-ink-lightest);
      --btn-border-color: var(--color-ink-medium);
      --btn-color: var(--color-ink);
    }
  }

  /* "Items" over the numbers, "Position" over the right-floated positions. */
  .walkthrough-template__columns {
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--block-space-half);

    @media (max-width: 639px) {
      display: none;
    }
  }

  /* The collapsed remainder of a split walkthrough checklist. */
  .walkthrough-others > summary {
    color: var(--color-ink);
    font-weight: 600;
    padding-block-start: var(--block-space-half);
  }

  .walkthrough-template__list,
  .walkthrough-template__by-position {
    margin-block: var(--block-space);
  }

  .walkthrough-template__items {
    display: flex;
    flex-direction: column;
    font-size: var(--text-small);
    gap: var(--block-space-half);
    margin: 0;
    padding-inline-start: 2.5ch;

    li::marker {
      color: var(--color-ink-medium);
    }
  }

  /* Wide screens float the position into the column under "Position", with
     its prefix left for screen readers. Narrow screens drop the column
     header and stack "Position: Doors" under the label. */
  .walkthrough-template__position {
    float: inline-end;
    margin-inline-start: var(--inline-space);
    padding-block: 0.4em 0;

    @media (max-width: 639px) {
      float: none;
      margin-inline-start: 0;
      padding-block: 0.25em 0;
    }
  }

  .walkthrough-template__position-prefix {
    @media (min-width: 640px) {
      block-size: 1px;
      clip-path: inset(50%);
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }
  }

  .walkthrough-template__by-position {
    display: none;
    flex-direction: column;
    gap: var(--block-space);
  }

  .walkthrough-template__group-name {
    align-items: baseline;
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    margin-block: 0 var(--block-space-half);

    .txt-subtle {
      font-size: var(--text-x-small);
      font-weight: 400;
    }
  }

  .walkthrough-templates:has(.walkthrough-templates__view input[value="position"]:checked) {
    .walkthrough-template__list {
      display: none;
    }

    .walkthrough-template__by-position {
      display: flex;
    }
  }

  .walkthrough-item {
    background-color: var(--color-ink-lightest);
    border: 1px solid var(--color-ink-light);
  }

  .walkthrough-item--checked {
    border-color: var(--color-positive);
    background-color: color-mix(in srgb, var(--color-positive) 8%, transparent);
  }

  .walkthrough-item__author {
    align-items: center;
    color: var(--color-ink-dark);
    column-gap: var(--column-gap, var(--inline-space-half));
    display: flex;
    flex-direction: row;
    font-size: var(--text-x-small);
    row-gap: var(--row-gap, var(--block-space-half));

    @media (max-width: 639px) {
      --row-gap: calc(var(--block-space-half) / 2);

      align-items: end;
      flex-direction: column;
      font-size: var(--text-xx-small);
      white-space: nowrap;
    }
  }

  .report__images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);

    img {
      block-size: 8rem;
      border: 1px solid var(--color-ink-light);
      object-fit: cover;
    }
  }

  .page__header-row {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
    justify-content: space-between;
  }

}