/* Partner portal (DUKE-138): page layout only. Every component is a design-system class from
   public/duke/styles.css (v0.13.0; specimens cards/partner-portal.html and cards/lifecycle-track.html).
   Nothing below sets a colour, font, radius or shadow. Missing components go to the design-system
   session, never into this file. */

/* People, on a computer: the list and the partner's card side by side, as on the approved mockup. */
.pp-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-width: 0; }
.pp-rail { display: none; }
@media screen and (min-width: 992px) {
  .cp-main.pp-main { grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 2rem; align-items: start; }
  .pp-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
}

/* The Card / People switch shows where the header's nav folds into its menu (500 and below).
   Two classes each time: this sheet may load before the system's, so it never leans on order. */
.seg-control.pp-switch { display: none; justify-self: center; }
@media screen and (max-width: 500px) {
  .seg-control.pp-switch { display: inline-flex; }
}

/* The count tiles sit a step above the list (the specimen's spacing). */
.people-list > .glance-grid--counts { margin-bottom: .75rem; }
/* "Clients, later" is a placeholder: on a narrow list the three real counts keep the row. */
@container (max-width: 26rem) {
  .glance-tile.pp-later { display: none; }
}

/* A business line can be 80 characters. In the table it wraps inside its own cell, so the step and the
   progress bar never slide out of sight behind it (the system keeps every cell on one line). Table
   only: under 35rem of its own width the list is row cards, where the system already wraps. */
@container (min-width: 35.01rem) {
  .people-list__table td.pp-business { white-space: normal; min-width: 9rem; }
}

/* The card's brand is a link (back to the partner's people); the logo file fills the system's 22px. */
a.card-screen__brand { display: block; }
.card-screen__brand img { display: block; height: 100%; width: auto; }

/* The card is a phone screen. On anything wider its column keeps a phone's width, centred (the system
   sizes the card's inner spacing from that column), while the glow behind it still spans the page. */
.card-screen.pp-card { padding-inline: max(8%, calc(50% - 12.6rem)); }

/* The quiet "Your people" link sits a step under Share (the card's foot is centred by the system). */
.card-screen__foot .link-btn { margin-top: .5rem; }