.hub-acct-left{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.hub-acct-link{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;padding:8px 12px;border-radius:999px;border:1px solid #f68b1e;background:#282828;color:#fff!important;font:800 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.hub-acct-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hub-acct-link:hover,.hub-acct-link:focus-visible{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%);outline:0}
.hub-acct-link:focus-visible{box-shadow:0 0 0 3px #f68b1e}
.hub-acct-link.in{background:#fff;color:#282828!important;border-color:#282828}
.hub-acct-link.in:hover{background:transparent}
@media(max-width:480px){.hub-acct-link{padding:8px 10px;font-size:12px;gap:4px}.hub-acct-link svg{width:16px;height:16px}.hub-acct-left{gap:6px}}
/* home page header has its own wide padding; trim it so the button fits beside the logo and menu */
header.header .hub-acct-left{flex:0 1 auto}
header.header{padding-left:0;padding-right:clamp(12px,2vw,28px)}
header.header .hub-acct-left .logo{margin-left:0;margin-top:0;min-width:0}
header.header .hub-acct-left .logo img{width:76px}
@media(max-width:480px){
 header.header .hub-acct-left .logo img{width:44px}
 header.header .hub-acct-left .logo{font-size:13px}
 header.header .hub-acct-left .logo span{letter-spacing:1px;font-size:8px}
}

/* ---- COMPUTER LAYOUT ONLY (1001px and wider): logo at the left screen edge, Sign in at the opposite (right) edge ---- */
@media (min-width: 1001px) {
  .hub-acct-left { display: contents; }
  header.header { padding-left: 0; padding-right: 14px; }
  .hub-header { padding-left: 10px; padding-right: 14px; }
  header.header .logo, header.header .hub-acct-left .logo { margin-left: 0; margin-right: 12px; order: 0; }
  .hub-header .hub-header-brand { order: 0; margin-right: 12px; }
  .hub-header .hub-header-links, .header .page-nav { order: 1; margin-left: auto; }
  .hub-header .hub-header-menu { order: 2; }
  .hub-acct-link { order: 3; margin-left: 18px; }
}

/* ---- PHONE LAYOUT ONLY (1000px and narrower): orange icon-only Sign in button at the top right of the header
   (the MENU button now sits below the header, in the Back button bar) ---- */
@media (max-width: 1000px) {
  .hub-acct-left { display: contents; }
  header.header .logo, header.header .hub-acct-left .logo { order: 0; }
  header.header .page-nav { order: 2; }
  .hub-acct-link {
    position: static; order: 1; margin-left: auto;
    width: 38px; height: 38px; min-height: 0; padding: 0; gap: 0; justify-content: center;
    background: linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%); border: 2px solid #fff; color: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0, .28);
  }
  .hub-acct-link:hover, .hub-acct-link:focus-visible, .hub-acct-link.in, .hub-acct-link.in:hover { background: linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%); color: #fff !important; border-color: #fff; }
  .hub-acct-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hub-acct-link svg { width: 20px; height: 20px; }
}

/* ---- HOME PAGE HEADER (phones/tablets): logo, title and Sign in on ONE row; the page menu stays on its own row below ---- */
@media (max-width: 1000px) {
  header.header { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 8px; padding-left: 12px; padding-right: 12px; }
  header.header .logo, header.header .hub-acct-left .logo { flex: 1 1 0; min-width: 0; margin: 0; justify-content: flex-start; }
  header.header .hub-acct-link { margin-left: auto; flex: none; }
}

/* ---- Sign in button: no background shape ---- */
.hub-acct-link{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%);border-color:#d67600}
.hub-acct-link:hover,.hub-acct-link:focus-visible{background:transparent}
@media (max-width: 1000px) {
  .hub-acct-link{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%);border:2px solid #fff}
  .hub-acct-link:hover,.hub-acct-link:focus-visible,.hub-acct-link.in,.hub-acct-link.in:hover{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%);color:#fff!important;border-color:#fff}
}

/* unread notification count on the account icon */
.hub-acct-link{position:relative}
.hub-acct-link .hub-acct-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:#e53935;color:#fff;font:800 11px/18px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-style:normal;text-align:center;border:2px solid #fff;box-sizing:content-box;min-width:14px;height:14px;line-height:14px;pointer-events:none}
html[data-theme="dark"] .hub-acct-link .hub-acct-badge{border-color:#121316}

/* home page: the illustration replaces the sign-in icon */
.hub-acct-link .hub-acct-pic{width:30px;height:30px;flex:none;border-radius:50%;object-fit:cover;display:block;background:#fff}
.hub-acct-link:has(.hub-acct-pic){padding:4px 12px 4px 5px}
@media(max-width:1000px){.hub-acct-link:has(.hub-acct-pic){padding:3px}.hub-acct-link .hub-acct-pic{width:34px;height:34px}}

/* signed in: a white tent with a graduation cap inside it - no circle, no frame, no background */
html body:not(#_) .hub-acct-link.in{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;width:auto!important;height:auto!important;min-height:44px;gap:0}
html body:not(#_) .hub-acct-link.in .hub-acct-tent{display:block;width:42px!important;height:42px!important;fill:none;stroke:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
html body:not(#_) .hub-acct-link.in span{display:none!important}

/* profile picture is a transparent illustration: no circle crop or white backing */
.hub-acct-link .hub-acct-pic{border-radius:0!important;object-fit:contain!important;background:transparent!important;width:34px!important;height:34px!important}