/* /product/menu-bar · page scoped CSS (prefix pg-mb-). Spacing between shared blocks only, plus the quoted card lines and the list of
   notifications (one per row on a hairline, as /security/employees). */

/* a section that is only its head ends with the head (no title gap under it) */
.pg-mb-only{margin-bottom:0}
/* a line the card shows, quoted in running text */
.pg-mb-quote{font-weight:500;color:var(--s-ink)}

/* states: the note one paragraph gap under the table */
.pg-mb-note{margin-top:28px;max-width:62ch;font-size:17px;line-height:1.5;color:var(--s-ink-2);text-wrap:pretty}
@media (min-width:768px){
  .pg-mb-states th[scope="row"]{width:20%}
  .pg-mb-states td:nth-child(2){width:36%}
  .pg-mb-icons th[scope="row"]{width:32%}
}

/* the numbers that stay: two short paragraphs in the split lead */
.pg-mb-private__text>.cy-lead+.cy-lead{margin-top:16px}

/* notifications: one per row on a hairline */
.pg-mb-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--s-line-2);max-width:760px}
.pg-mb-list li{padding:14px 0;border-bottom:1px solid var(--s-line-2);font-size:17px;line-height:1.45;color:var(--s-ink);text-wrap:pretty}
/* related: four links, one row on wide screens */
@media (min-width:1020px){.pg-mb-related{--cy-cols:4}}

/* the numbered parts beside the card: one column on phones and tablets, the card second; two columns from 1020px, the card sticky */
.pg-mb-anatomy{display:grid;gap:40px;align-items:start}
.pg-mb-parts,.pg-mb-switch{min-width:0}
@media (min-width:1020px){
  .pg-mb-anatomy{grid-template-columns:minmax(0,1fr) 420px;column-gap:64px}
  .pg-mb-switch{position:sticky;top:calc(var(--pg-header,72px) + 24px)}
}
.pg-mb-switch{display:grid;gap:20px}