/*
 * Register-area extras for the five live virtual program pages:
 *   .pay-invoice-note  "pay by invoice or PO" line under register buttons and in tuition
 *   .reg-proof         participant quote + faculty list inside the register card
 * The program pages carry their own inline CSS and do not load main.css, so this one
 * small file is linked from each of them (like css/site-header.css).
 * Tokens fall back to the program-page palette when a page does not define them.
 */
.pay-invoice-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;color:#40566c;font-size:14px;line-height:1.5;text-align:left}
.pay-invoice-note svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--steel,#355f8a)}
.pay-invoice-note b{color:var(--navy,#11233c);font-weight:800}
.hero .pay-invoice-note{margin-top:14px}
.schedule-primary-main .pay-invoice-note{margin-top:14px;font-size:14.5px}
.footercta .pay-invoice-note,.iaml-next .pay-invoice-note{justify-content:center;margin:18px auto 0;color:#d9e3ee;text-align:center}
.footercta .pay-invoice-note svg,.iaml-next .pay-invoice-note svg{color:#d9e3ee}
.footercta .pay-invoice-note b,.iaml-next .pay-invoice-note b{color:#fff}

.reg-proof{margin-top:30px;padding-top:26px;border-top:1px solid var(--line,#d9e3ee);display:grid;gap:22px}
.reg-quote{margin:0}
.reg-quote blockquote{margin:0}
.reg-quote blockquote p{margin:0;font-family:var(--serif,Georgia,serif);font-size:21px;line-height:1.32;letter-spacing:-.01em;color:var(--navy,#11233c)}
.reg-quote figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:#52677a}
.reg-quote figcaption b{display:block;color:var(--ink,#101827);font-weight:800}
.reg-faculty-head{margin:0;font-size:14px;line-height:1.5;color:#52677a}
.reg-faculty-head b{color:var(--ink,#101827);font-weight:800}
.reg-faculty-head a{color:var(--orange2,#9a3412);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.reg-faculty-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 18px}
.reg-faculty-list li{display:flex;align-items:center;gap:12px;min-width:0}
.reg-faculty-list img{flex:0 0 auto;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 30%;background:#edf3f8}
.reg-faculty-list span{min-width:0;font-size:14px;line-height:1.35}
.reg-faculty-list b{display:block;color:var(--ink,#101827);font-weight:800}
.reg-faculty-list small{display:block;margin-top:2px;color:#5b6f80;font-size:12.5px;line-height:1.35}

@media(max-width:720px){
  .reg-proof{margin-top:24px;padding-top:22px}
  .reg-quote blockquote p{font-size:19px}
  .reg-faculty-list{grid-template-columns:1fr;gap:12px}
}

/* D108 (3), sitewide: the approver checklist's label column is as wide as its longest
   label ("Certificate", "Credits", "Changes"...), so no label touches its value. The list
   is one grid; each row shares its columns through subgrid. Phones stack label over value. */
#faculty .approver ul{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:16px;row-gap:12px}
#faculty .approver li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline}
@supports not (grid-template-columns:subgrid){#faculty .approver li{grid-template-columns:7.25em minmax(0,1fr);column-gap:16px}}
@media(max-width:720px){
  #faculty .approver ul{grid-template-columns:minmax(0,1fr)}
  #faculty .approver li{grid-template-columns:minmax(0,1fr);row-gap:2px}
}