/*
File: assets/jta-signin.css
Creator: Mark Kiessling
Created: July 25th, 2026
Purpose: The sign-in box that drops from the menu bar, so nobody has to travel through the
         consultation page to reach their account. Colours and radii come from the tokens
         already declared in jta.css, so both themes are inherited with no extra rules.
Related files: assets/jta-signin.js, account.aspx
Revision history:
  July 25th, 2026 - Created so Sign In opens in place instead of navigating away.
*/
.signinVeil{position:fixed;inset:0;z-index:60;display:none;
  background:color-mix(in srgb,#000 62%,transparent);backdrop-filter:blur(3px)}
.signinVeil.open{display:block}

.signinBox{position:fixed;z-index:61;top:84px;right:24px;width:min(360px,calc(100% - 32px));
  border:1px solid var(--gold);border-radius:10px;background:var(--panel);
  box-shadow:0 18px 44px rgba(0,0,0,.55);padding:20px;display:none}
.signinBox.open{display:block}
@media(max-width:640px){.signinBox{top:76px;right:16px;left:16px;width:auto}}

.signinBox h3{font-size:17px;font-weight:700;margin-bottom:4px}
.signinBox .signinLead{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:14px}
.signinBox .field{margin-bottom:12px}
.signinBox .field label{display:block;color:var(--muted);font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;margin-bottom:5px}
.signinBox input{width:100%;min-height:44px;padding:10px 12px;border-radius:6px;
  border:1px solid color-mix(in srgb,var(--gold) 62%,transparent);
  background:var(--bg2);color:var(--ink);font-family:inherit;font-size:14px}
.signinBox input:focus{outline:none;border-color:var(--gold);border-width:2px;padding:9px 11px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 26%,transparent)}
.signinBox .button{width:100%;margin-top:4px}
.signinBox .signinLinks{display:flex;justify-content:space-between;gap:12px;margin-top:14px;
  font-size:12px}
.signinBox .signinLinks a{color:var(--gold);text-decoration:none}
.signinBox .signinLinks a:hover{text-decoration:underline}
.signinClose{position:absolute;top:10px;right:12px;border:0;background:transparent;
  color:var(--muted);font-size:19px;line-height:1;cursor:pointer;padding:4px 6px}
.signinClose:hover{color:var(--gold)}
.signinMsg{margin-top:12px;padding:10px 12px;border-radius:6px;font-size:12px;line-height:1.6;
  border:1px solid var(--danger);color:var(--danger);
  background:color-mix(in srgb,var(--danger) 12%,transparent);display:none}
.signinMsg.show{display:block}

/* Menu behaviour and the consultation tick ----------------------------------
   These live here rather than in jta.css so the original stylesheet stays as it was.
   Only the hover state is added - resting appearance is untouched. */
.siteNav a:hover,
.mainNav a:hover,
.footerNav a:hover{text-decoration:underline;text-underline-offset:4px}

/* Keeping the menu on one line, and making it look deliberate if it ever cannot.
   jta.css sets gap:22px and only tightens to 16px at a narrow breakpoint, so on a
   normal desktop window the row runs out of space and the last item drops to a second
   line, left aligned under the brand. Two changes:
     1. tighten the gap earlier, which buys roughly 50 pixels and usually avoids the wrap
     2. if it does wrap, keep the rows aligned to the right and spaced properly, so it
        reads as two tidy rows rather than as something broken */
.siteNav{row-gap:9px;justify-content:flex-end}
@media (max-width:1560px){
  .siteNav{gap:15px}
  .siteNav a{font-size:12.5px}
}
@media (max-width:1320px){
  .siteNav{gap:13px}
  .siteNav a{font-size:12px}
}

/* The white square and green tick that replaced the word "Book". Sits on the text
   baseline rather than floating above it, and never shrinks the row height. */
.navTick{vertical-align:-2px;margin-right:5px;flex:0 0 auto}
.siteNav a:has(.navTick),
.mainNav a:has(.navTick){white-space:nowrap}