/* The customer portal's top bar (views/customer/partials/portal-top.ejs):
   the powered-by line in the corner, "Customer Portal", and — signed in —
   their initials and Sign Out. The home, the sign-in pages and the CIS each
   load it beside their own sheet, so every name here starts portal-top and
   nothing here styles anything else; its colours are written out rather
   than borrowed, because the CIS's sheet names its own. */
.portal-top {
  background: #fff; border-bottom: 1px solid #e2e8f0; color: #6f7d90;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px; line-height: 1.5;
}
.portal-top-inner {
  box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 74px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.portal-top-corner { display: flex; align-items: center; gap: 11px; min-width: 0; }
.portal-top-logo {
  height: 36px; width: 36px; flex: none; background: #244e89; color: #fff; display: grid;
  place-items: center; border-radius: 10px; font-size: 22px; line-height: 1;
}
.portal-top-right { display: flex; align-items: center; gap: 20px; }
.portal-top-avatar {
  height: 34px; width: 34px; border-radius: 50%; background: #edf4fd; color: #244e89;
  font-weight: 800; display: grid; place-items: center; flex: none;
}
.portal-top-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portal-top-signout { margin: 0; }
.portal-top-link {
  border: 0; background: none; padding: 0; color: #6f7d90; font: inherit; font-size: 13px; cursor: pointer;
}
.portal-top-link:hover { color: #244e89; }
.portal-top-link:focus-visible { outline: 3px solid #76a8ed; outline-offset: 2px; }

/* A phone: the corner and the initials. Sign Out is on the home's Account tab. */
@media (max-width: 650px) {
  .portal-top-inner { height: 62px; padding: 0 16px; }
  .portal-top-right { gap: 0; }
  .portal-top-where, .portal-top-signout { display: none; }
  .portal-top-logo { height: 33px; width: 33px; font-size: 20px; }
}
@media (max-width: 370px) {
  .portal-top .powered-by { font-size: 12px !important; }
}
@media print {
  .portal-top { display: none; }
}