@layer brand, tokens, density, elements, values, brand-mark, spacing, cut-edges, actions, panels, marks, roles, headings, regions, authored-text, shell, absence, layouts, motion, states, embed, tables, truncation, print, without-fills, hidden;
@layer spacing {
  .kit-role-list-line {
    --_kit-stack-gap: inherit;
  }
  .kit-role-list-line + .kit-role-list-line {
    margin-block-start: calc(var(--_kit-stack) - var(--_kit-stack-gap, var(--_kit-stack)));
  }
}
@layer actions {
  @media (hover: hover) and (pointer: fine) {
    .kit-role-list-line:hover {
      background-image: linear-gradient(var(--_kit-wash-hover), var(--_kit-wash-hover));
    }
  }
}
@layer roles {
  .kit-role-list-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    line-height: normal;
    --_kit-list-line-leading: calc(var(--_kit-body-leading) * 1em - 1lh);
    gap: max(0px, var(--_kit-list-line-leading)) var(--_kit-stack);
  }
  .kit-role-list-line > .kit-region-name {
    font-weight: var(--_kit-strong-weight);
  }
  .kit-role-list-line > a.kit-region-name {
    --_kit-cut-floor: var(--_kit-target);
    min-inline-size: var(--_kit-target);
    padding-block: calc(max(0px, var(--_kit-target) - 1lh) / 2);
    margin-block: calc(var(--_kit-list-line-leading) / -2);
    text-decoration-line: none;
    text-box-trim: none;
  }
  .kit-role-list-line > a.kit-region-name:focus-visible {
    text-decoration-line: underline;
  }
  @media (hover: hover) and (pointer: fine) {
    .kit-role-list-line > a.kit-region-name:hover {
      text-decoration-line: underline;
    }
  }
  @media screen and (width < 720px) {
    .kit-role-list-line {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .kit-role-list-line > .kit-region-name {
      grid-column: 1;
      grid-row: 1;
    }
    .kit-role-list-line > a.kit-region-name {
      margin-block-end: calc(var(--_kit-rhythm) - var(--_kit-list-line-leading) - max(0px, var(--_kit-target) - 1lh) / 2);
    }
    .kit-role-list-line > .kit-region-description {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    .kit-role-list-line > .kit-region-age {
      grid-column: 2;
      grid-row: 1;
    }
  }
  .kit-role-list-line[data-kit-state~=read],
  .kit-role-list-line[data-kit-state~=read] > .kit-region-name,
  .kit-role-list-line > :where([data-kit-region]).kit-region-description,
  .kit-role-list-line > :where([data-kit-region]).kit-region-age {
    color: var(--_kit-text-muted);
  }
}