/* Apple-style section list, shared by the public site and the participant portal.
   The list sits in the left gutter and is out of flow, so desktop keeps a centered
   column. Breakpoints use the viewport width (not the user agent): iPad Safari
   reports a desktop UA, and a finger tap follows the link without any hover.
   Desktop >=1260px: 140px rail, public column stays 920px and centered.
   Tablet 700–1259px: 118px rail. The column stays centered while the gutter can
   hold the rail, and shifts right (narrower if needed) below that.
   Phones <700px: the rail is hidden. No horizontal chip row. */
:root{--sidenav-w:140px;--sidenav-gap:12px}
.portal{position:relative;--col:100%}
.portal.bleed{--col:var(--width)}
.portal-main .card:last-child{margin-bottom:0}
.portal-main .card,
.portal-main section,
.portal-main .section,
.portal-main .page-head,
.portal-main .intro,
.portal-main #invbox,
.portal-main #pay-method{scroll-margin-top:calc(var(--nav-h) + 24px)}
.sidenav{position:absolute;top:0;bottom:0;z-index:3;width:var(--sidenav-w);pointer-events:none;
  left:calc((100% - var(--col))/2 - var(--sidenav-gap) - var(--sidenav-w))}
/* One frosted panel, so the list stays a single object when white and gray
   sections scroll behind it. */
.sidenav-in{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:2px;
  max-height:calc(100vh - var(--nav-h) - 36px);overflow:auto;pointer-events:auto;
  padding:6px;border-radius:18px;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04)}
.sidenav a{display:block;padding:6px 8px;border-radius:10px;color:var(--text-2);font-size:13px;font-weight:500;line-height:1.3;overflow-wrap:break-word;text-wrap:balance;touch-action:manipulation}
.sidenav a.sub{padding-left:16px;font-size:12px}
.sidenav a:hover,.sidenav a:active{color:var(--text);text-decoration:none;background:rgba(0,0,0,.04)}
.sidenav a[aria-current="true"],
.sidenav a[aria-current="page"]{color:var(--text);background:rgba(0,0,0,.06);box-shadow:none}
.sidenav a[hidden]{display:none !important}
/* Tablet, including iPad landscape (~1024–1259) and portrait (~700–1024).
   8px edge + 118px rail + 8px gap. Public column stays 920px until the viewport
   is under 1070px; portal column stays 880px until it no longer fits. */
@media (min-width:700px) and (max-width:1259px){
  :root{
    --sidenav-w:118px;--sidenav-gap:8px;--nav-edge:8px;--right-reserve:16px;
    --nav-reserve:calc(var(--nav-edge) + var(--sidenav-w) + var(--sidenav-gap));
    --col-w:min(920px, calc(100vw - var(--nav-reserve) - var(--right-reserve)));
    --col-shift:max(var(--nav-reserve), calc((100vw - var(--col-w)) / 2));
    --portal-w:min(880px, calc(100vw - var(--nav-reserve) - var(--right-reserve)));
    --portal-shift:max(var(--nav-reserve), calc((100vw - var(--portal-w)) / 2));
    --side:max(22px, calc(var(--col-shift) + 22px));
  }
  .sidenav-in{padding:4px;border-radius:14px;gap:1px}
  .sidenav a{font-size:12px;padding:8px 8px}
  .sidenav a.sub{font-size:11px;padding:6px 8px 6px 14px}
  body:has(.portal.bleed) .portal.bleed .sidenav{left:var(--nav-edge)}
  body:has(.portal.bleed) .portal.bleed .wrap,
  body:has(.portal.bleed) footer .wrap{
    width:var(--col-w);max-width:var(--col-w);
    margin-left:var(--col-shift);margin-right:auto}
  body:not(:has(.portal.bleed)) main:has(.sidenav){
    width:var(--portal-w);max-width:var(--portal-w);
    margin-left:var(--portal-shift);margin-right:auto;
    padding-left:0}
  body:not(:has(.portal.bleed)) main:has(.sidenav) .sidenav{left:calc(var(--nav-edge) - var(--portal-shift))}
  body:not(:has(.portal.bleed)):has(.sidenav) footer .wrap{
    width:var(--portal-w);max-width:var(--portal-w);
    margin-left:var(--portal-shift);margin-right:auto}
}
/* Top bar follows the same column once it is wide enough to show the links.
   Below 834px the bar is the phone menu and stays full width. */
@media (min-width:834px) and (max-width:1259px){
  body:has(.portal.bleed) .gnav .in{
    width:var(--col-w);max-width:var(--col-w);
    margin-left:var(--col-shift);margin-right:auto}
  body:not(:has(.portal.bleed)):has(.sidenav) .gnav .in{
    width:var(--portal-w);max-width:var(--portal-w);
    margin-left:var(--portal-shift);margin-right:auto}
}
@media (max-width:699px){
  .sidenav{display:none}
}