/* Page chrome: sandbox ribbon, header, main container. */
.sandbox-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pn-ribbon-h);
  padding: 0 var(--pn-sp-4);
  background: var(--pn-charcoal);
  color: var(--pn-on-navy);
  font-size: var(--pn-fs-14);
  font-weight: 500;
  text-align: center;
}

.site-header {
  background: var(--pn-surface);
  border-bottom: 3px solid var(--pn-red);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--pn-sp-6);
  max-width: var(--pn-max-width);
  height: var(--pn-header-h);
  margin: 0 auto;
  padding: 0 var(--pn-sp-6);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-sp-3);
  min-height: var(--pn-target);
  text-decoration: none;
}
.lockup__logo { display: block; width: auto; height: 32px; }
.lockup__divider { width: 1px; height: 28px; background: var(--pn-border); }
.lockup__name {
  color: var(--pn-navy);
  font-size: var(--pn-fs-20);
  font-weight: 600;
  white-space: nowrap;
}

.page-main {
  max-width: var(--pn-max-width);
  margin: 0 auto;
  padding: var(--pn-sp-8) var(--pn-sp-6) var(--pn-sp-16);
}

@media (max-width: 767.98px) {
  .site-header__inner { height: var(--pn-header-h-mobile); padding: 0 var(--pn-sp-4); }
  .lockup__logo { height: 24px; }
  .lockup__divider { height: 22px; }
  .lockup__name { font-size: var(--pn-fs-16); }
  .page-main { padding: var(--pn-sp-6) var(--pn-sp-4) var(--pn-sp-10); }
}

/* Skip link */
.skip-link { position: absolute; left: var(--pn-sp-4); top: -100px; z-index: 10; padding: var(--pn-sp-2) var(--pn-sp-4); background: var(--pn-navy); color: var(--pn-on-navy); border-radius: var(--pn-radius-sm); }
.skip-link:focus { top: var(--pn-sp-2); color: var(--pn-on-navy); }
.page-main:focus { outline: none; }

/* Section nav */
.site-nav { flex: 1; align-self: stretch; }
.site-nav ul { display: flex; gap: var(--pn-sp-1); height: 100%; margin: 0; padding: 0; list-style: none; }
.site-nav li { display: flex; }
.site-nav a {
  display: flex;
  align-items: center;
  padding: 0 var(--pn-sp-3);
  border-bottom: 2px solid transparent;
  color: var(--pn-muted);
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { color: var(--pn-navy); }
.site-nav a[aria-current="page"] { color: var(--pn-navy); border-bottom-color: var(--pn-navy); }

/* Account menu */
.account { position: relative; margin-left: auto; }
.account__button {
  display: flex;
  align-items: center;
  gap: var(--pn-sp-2);
  min-height: var(--pn-target);
  padding: 0 var(--pn-sp-3);
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-radius-sm);
  color: var(--pn-charcoal);
  font-size: var(--pn-fs-14);
  list-style: none;
  cursor: pointer;
}
.account__button::-webkit-details-marker { display: none; }
.account__button strong { color: var(--pn-navy); }
.account__chevron { width: 16px; height: 16px; color: var(--pn-muted); }
.account[open] .account__chevron { transform: rotate(180deg); }
.account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--pn-sp-2));
  z-index: 5;
  min-width: 12rem;
  padding: var(--pn-sp-2);
  background: var(--pn-surface);
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-radius-sm);
  box-shadow: var(--pn-shadow-menu);
}
.account__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--pn-target);
  padding: 0 var(--pn-sp-3);
  background: none;
  border: 0;
  border-radius: var(--pn-radius-sm);
  color: var(--pn-charcoal);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account__item:hover { background: var(--pn-tint); color: var(--pn-navy); }

/* Until the M9 mobile menu: keep the header usable on narrow screens. */
@media (max-width: 767.98px) {
  .site-header__inner { height: auto; min-height: var(--pn-header-h-mobile); flex-wrap: wrap; padding-top: var(--pn-sp-2); padding-bottom: var(--pn-sp-2); }
  .site-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .site-nav a { min-height: var(--pn-target); }
  .account__label { display: none; }
}