/*
 * C4 · A-19 Start "View as": the people picker (search + Site and access filters; rows: avatar,
 * name over email, access level tag, job role, Site, "View as …") and the confirmation dialog
 * content (who card, the three explanation rows). Dialog chrome: components/dialogs.css.
 */
@layer pages {
  .viewas-search { width: 300px; }

  .viewas-list { --list-cols: 36px minmax(0, 1.7fr) 112px minmax(0, 1fr) minmax(0, 1.1fr) 170px; }
  .viewas-list__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
  }
  .viewas-list__name .list-row__meta { font-weight: 400; }
  .viewas-list__role { min-width: 0; }
  .viewas-list .scope-badge--inline {
    flex-shrink: 1;
    min-width: 0;
    white-space: normal;
    line-height: 1.55;
  }
  .viewas-list__go {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    color: var(--color-blue-deep); /* AA on the surface row */
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
  }
  .viewas-list__go .icon { font-size: 15px; }

  #view-as-dialog { width: 600px; }

  .viewas-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-row);
    background: var(--color-surface);
  }
  .viewas-who__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .viewas-who__name { font-size: 15px; font-weight: 700; line-height: 1.55; }
  /* "Lead Teacher · maya.chen@…" on one line when it fits. Otherwise the email moves to its own
     line as a whole and its separator, now left of the clipped box, does not show. */
  .viewas-who__meta {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-neutral-700);
  }
  .viewas-who__line {
    display: flex;
    flex-wrap: wrap;
    margin-left: -11px;
  }
  .viewas-who__role { padding-left: 11px; }
  .viewas-who__email { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .viewas-who__sep {
    display: inline-block;
    width: 11px;
    text-align: center;
  }

  .viewas-points {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .viewas-point {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-hairline);
  }
  .viewas-point__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    font-size: 17px;
  }
  .viewas-point__text { display: flex; flex-direction: column; gap: 2px; }
  .viewas-point__title { font-size: 14.5px; font-weight: 700; line-height: 1.55; }
  .viewas-point__body { font-size: 13px; line-height: 1.45; color: var(--color-neutral-700); }

  @media (max-width: 767px) {
    .viewas-search { width: 100%; }
    .viewas-list { --list-cols-mobile: 36px minmax(0, 1fr) auto; }
    .viewas-list .list-row > :is(:nth-child(3), :nth-child(4), :nth-child(5)) { display: none; }
    .viewas-list__go-text { display: none; }
    .viewas-who__line { display: block; margin-left: 0; }
    .viewas-who__role { display: block; padding-left: 0; }
    .viewas-who__email { display: block; }
    .viewas-who__sep { display: none; }
    .viewas-who { flex-wrap: wrap; row-gap: 8px; }
    .viewas-who__text { flex: 1 1 calc(100% - 54px); }
    .viewas-who .site-pill { margin-left: 54px; }
    #view-as-dialog { width: 100vw; }
  }
}