/* ==========================================================================
   The visitor account: the header button and the sign-in dialog (js/account.js).
   Loaded by the portal, the toolbox, the e-learning and Bob, which sit on three
   different stylesheets, so this file brings its own colours and needs nothing
   from them. Values are the site tokens (css/style.css, section 1).
   ========================================================================== */
.acct-in, .acct-me__btn, .acct-go, .acct-link, .acct-me__menu button{font:inherit; cursor:pointer}

/* ---------- the header button ---------- */
[data-account]{display:flex; align-items:center; min-height:36px}
.acct-in{padding:7px 16px; border:1.5px solid #143058; border-radius:4px; background:#fff; color:#143058;
  font-size:14px; font-weight:700; line-height:1.2; white-space:nowrap}
.acct-in:hover{background:#143058; color:#fff}
.acct-me{position:relative}
.acct-me__btn{display:flex; align-items:center; gap:8px; padding:4px 8px 4px 4px; border:1px solid #E1E6EE; border-radius:999px;
  background:#fff; color:#143058; font-size:14px; font-weight:600; max-width:44vw}
.acct-me__btn:hover{border-color:#7D9CBB}
.acct-me__dot{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#143058; color:#fff;
  font-size:13px; font-weight:700}
.acct-me__name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acct-me__menu{position:absolute; right:0; top:calc(100% + 8px); z-index:80; min-width:240px; padding:14px; background:#fff;
  border:1px solid #E1E6EE; border-radius:6px; box-shadow:0 14px 34px rgba(11,28,56,.16); text-align:left}
.acct-me__menu p{margin:0 0 12px; font-size:14px; color:#143058; word-break:break-all}
.acct-me__menu small{display:block; font-size:12px; color:#5F6B7A}
.acct-me__menu button{width:100%; padding:9px 12px; border:1px solid #E1E6EE; border-radius:4px; background:#F3F5F9; color:#143058; font-size:14px; font-weight:600}
.acct-me__menu button:hover{background:#E1E6EE}
.acct-me__opt{display:flex; gap:9px; align-items:flex-start; margin:0 0 12px; font-size:13.5px; line-height:1.35; color:#34506E; cursor:pointer}
.acct-me__opt input{margin-top:1px; width:16px; height:16px; flex:none}
.acct-me__menu .acct-me__close{margin-top:8px; background:none; border-color:transparent; color:#9F0912; font-weight:600; font-size:13px}
.acct-me__menu .acct-me__close:hover{background:#F4CED0}

/* ---------- the dialog ---------- */
html.acct-locked{overflow:hidden}
/* Flex with auto margins, not grid centring: a card taller than a short
   screen then scrolls from its top instead of losing it above the fold. */
.acct-ov{position:fixed; inset:0; z-index:200; display:flex; justify-content:center; align-items:flex-start; padding:16px;
  background:rgba(11,28,56,.55); overflow-y:auto}
.acct-ov[hidden]{display:none}
.acct-card{position:relative; width:100%; max-width:440px; margin:auto 0; padding:clamp(22px, 4vw, 32px); background:#fff; border-radius:8px;
  box-shadow:0 24px 60px rgba(11,28,56,.3); color:#34506E; font-size:16px; line-height:1.5;
  font-family:'Source Sans 3','Source Sans Pro',system-ui,sans-serif}
.acct-x{position:absolute; top:10px; right:10px; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%;
  background:transparent; color:#143058; cursor:pointer}
.acct-x:hover{background:#F3F5F9}
.acct-x svg{width:18px; height:18px}
.acct-card h2{margin:0 40px 6px 0; font:700 24px/1.2 'Poppins',system-ui,sans-serif; color:#143058}
.acct-sub{margin:0 0 18px; font-size:15px}
.acct-sub b{color:#143058; word-break:break-all}
.acct-note{margin:0 0 16px; padding:10px 12px; border-left:3px solid #2277AA; background:#F3F5F9; font-size:14.5px; color:#143058}
.acct-step{display:grid; gap:12px}
.acct-step[hidden]{display:none}
.acct-f{display:grid; gap:5px}
.acct-f span{font-size:14px; font-weight:600; color:#143058}
.acct-f input, .acct-f select{width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid #B8C2CF; border-radius:4px; background:#fff;
  color:#143058; font:inherit; font-size:16px}
.acct-f input:focus, .acct-f select:focus{outline:2px solid #1F6FD1; outline-offset:1px; border-color:#1F6FD1}
.acct-code{font:700 26px/1.2 'IBM Plex Mono',ui-monospace,Consolas,monospace !important; letter-spacing:.35em; text-align:center}
.acct-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.acct-consent{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.acct-consent input{margin-top:3px; width:18px; height:18px; flex:none}
.acct-card a{color:#2277AA}
.acct-err{margin:0; min-height:0; font-size:14px; font-weight:600; color:#9F0912}
.acct-err:empty{display:none}
.acct-go{min-height:50px; padding:12px 18px; border:0; border-radius:4px; background:#C94F12; color:#fff; font-size:16.5px; font-weight:700}
.acct-go:hover{background:#AE430F}
.acct-go:disabled{opacity:.6; cursor:progress}
.acct-alt{margin:2px 0 0; font-size:14.5px; text-align:center}
.acct-link{padding:0; border:0; background:none; color:#2277AA; font-size:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px}
.acct-terms{margin:0; font-size:13px; color:#5F6B7A; text-align:center}

/* A phone's header has little room: the initial carries the account there. */
@media (max-width:600px){
  .acct-me__name{display:none}
  .acct-me__btn{padding:3px}
  .acct-me__btn > svg{display:none}
  .acct-in{padding:6px 12px; font-size:13px}
}