/* Faction selection extends the existing B-version agent module. */
.zzz-home .roster__item[aria-pressed="true"] .roster__thumb { opacity: 1; }
.zzz-home .roster__item[aria-pressed="true"]::after { background: var(--signal); }
.zzz-home .roster__item[aria-pressed="true"] .roster__name { color: var(--text); }
.zzz-home .roster__thumb { isolation: isolate; }
.zzz-home .roster__thumb img { position: absolute; inset: 0; user-select: none; -webkit-user-drag: none; }
.zzz-home .roster, .zzz-home .faction-members { touch-action: auto; overscroll-behavior-x: contain; }
.zzz-home .roster.is-scrollable, .zzz-home .faction-members.is-scrollable { cursor: grab; user-select: none; }
.zzz-home .roster.is-scrollable .roster__item, .zzz-home .faction-members.is-scrollable .roster__item { cursor: inherit; }
.zzz-home .roster.is-dragging, .zzz-home .faction-members.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
/* Preserve the source artwork and its alpha channel over the supplied backdrop. */
.zzz-home .roster__thumb, .zzz-home .dossier__portrait {
  background: transparent url("design/10003.webp") center / cover no-repeat;
  clip-path: none;
}
.zzz-home .roster__thumb img, .zzz-home .dossier__portrait img {
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
}
.zzz-home .roster__thumb img[data-source="store"], .zzz-home .dossier__portrait img[data-source="store"] { transform: none; }
/* Fill the large backdrop proportionally, with every selected agent centered. */
.zzz-home .dossier__portrait img { object-fit: cover; object-position: 50% 50%; }
.zzz-home .dossier__portrait img[hidden] { display: none; }
.zzz-home .dossier[hidden] { display: none; }
.zzz-home .dossier__side { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.zzz-home .dossier__side .zzz-btn { max-width: 100%; height: auto; min-height: 40px; white-space: normal; }
.zzz-home .agent-initials { position: absolute; inset: 0; display: grid; place-items: center; color: #65635d; font: 700 30px var(--display); z-index: -1; }
.zzz-home .agent-initials[hidden] { display: none; }
.zzz-home .faction-toggle { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--signal); font: inherit; text-align: left; letter-spacing: inherit; text-transform: uppercase; }
.zzz-home .faction-toggle[hidden], .zzz-home .faction-picker[hidden] { display: none; }
.zzz-home .faction-toggle:hover { color: var(--text); }
.zzz-home .faction-picker { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.zzz-home .faction-picker__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.zzz-home .faction-picker__head h4 { margin: 0; color: var(--text-2); line-height: 1.6; }
.zzz-home .faction-picker__close { flex: none; min-height: 32px; padding: 4px 0 4px 10px; border: 0; background: none; color: var(--text-2); font-size: 12px; }
.zzz-home .faction-picker__close:hover { color: var(--signal); }
.zzz-home .faction-members { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 86px; justify-content: start; gap: 12px; overflow-x: auto; padding: 4px 2px; }
.zzz-home .faction-member .roster__name { font-size: 13px; }
.zzz-home .agent-empty { grid-column: 1 / -1; padding: 30px 0; color: var(--text-2); }
.zzz-home .grid--agent.is-empty { display: block; }
.zzz-home .agent-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Tablet and phone keep the selected agent visible, with merchandise below the profile. */
@media (max-width: 1180px) {
  .zzz-home .roster {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 112px;
    gap: 14px;
    padding-block: 2px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
  }
  .zzz-home .roster__item { scroll-snap-align: start; }
  .zzz-home .roster__thumb { aspect-ratio: 1; }
  .zzz-home .roster__name { font-size: 14px; line-height: 1.15; }
  .zzz-home .dossier {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 24px;
    margin-top: 24px;
  }
  /* The existing body wrapper has no class; expose its profile, picker and grid as grid items. */
  .zzz-home .dossier > div { display: contents; }
  .zzz-home .dossier__portrait {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: clamp(250px, 30vw, 330px);
    min-width: 0;
    min-height: 0;
  }
  .zzz-home .dossier__portrait img { object-fit: contain; object-position: center; }
  .zzz-home .dossier__head {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
    gap: 18px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .zzz-home .dossier__head > div { min-width: 0; max-width: 100%; }
  .zzz-home .dossier__name { font-size: clamp(32px, 4vw, 48px); overflow-wrap: anywhere; }
  .zzz-home .dossier__side { width: 100%; gap: 12px; }
  .zzz-home .dossier__side .zzz-btn { min-height: 44px; }
  .zzz-home .faction-toggle { min-height: 44px; overflow-wrap: anywhere; }
  .zzz-home .faction-picker { grid-column: 1 / -1; min-width: 0; padding: 16px 0; border-top: 1px solid var(--line); }
  .zzz-home .faction-picker__head { align-items: flex-start; }
  .zzz-home .faction-picker__head h4 { min-width: 0; overflow-wrap: anywhere; }
  .zzz-home .faction-members { min-width: 0; max-width: 100%; grid-auto-columns: 104px; scroll-snap-type: x proximity; }
  .zzz-home .grid--agent {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 28px 18px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
  }
  /* Override both the six-item tablet cap and the phone's single horizontal product row. */
  .zzz-home .grid--agent > .card:nth-child(n) { display: flex; }
  .zzz-home .grid--agent > .agent-empty { display: block; }
}
@media (min-width: 641px) and (max-width: 760px) {
  .zzz-home .grid--agent { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .zzz-home .roster { grid-auto-columns: 104px; gap: 12px; }
  .zzz-home .dossier { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .zzz-home .dossier__portrait { height: clamp(220px, 64vw, 300px); }
  .zzz-home .dossier__head { grid-column: 1; grid-row: 2; align-self: start; gap: 14px; }
  .zzz-home .dossier__name { font-size: clamp(32px, 9vw, 40px); }
  .zzz-home .faction-members { grid-auto-columns: 96px; gap: 12px; }
  .zzz-home .grid--agent { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
}