/* The sign-in page (login.html). Was a <style> block in the template; moved
   here on 3 Oct 2026 so the page carries no CSS of its own. */
  /* Show/hide: a typed password you cannot check is the commonest reason a
     correct one gets rejected. Inside the field's padding, so the field keeps
     its full width. Only this page has a password to show. */
  .lg-pw { position: relative; }
  .lg-pw input { padding-right: 46px; }
  .lg-pw button { position: absolute; top: 0; right: 0; width: 44px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; cursor: pointer; padding: 0;
    color: var(--lg-ink-2); font-size: 14px; }
  .lg-pw button svg { display: block; }
  .lg-pw button:hover { color: var(--lg-ink); }
  .lg-pw button:focus-visible { outline: 2px solid var(--lg-navy);
    outline-offset: -2px; border-radius: 8px; }

  /* ------------------------------------------------- the brand panel */
  /* No copy on this side.

     A sign-in is not where anyone reads a product description -- they are here
     to get in, and the words were repeating what the console says once they
     are. So the panel is a composition: a dot field for the sources, a soft
     light behind, and the scan emblem sitting on top of both.

     Everything is drawn: two CSS gradients and one inline SVG, so there is no
     image to download, nothing to go blurry on a retina screen, and nothing to
     re-export when the brand shifts. */
  .lg-art { position: relative; overflow: hidden; padding: 48px;
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(520px 380px at 74% 18%, rgba(54,194,162,.20), transparent 60%),
      radial-gradient(560px 460px at 18% 92%, rgba(109, 63, 209,.55), transparent 62%),
      linear-gradient(158deg, #5b32b8 0%, #2e1a5c 56%, #1f1440 100%); }

  /* The dot field: a repeating radial, masked so it fades out toward the
     edges rather than stopping in a hard line. */
  .lg-art::before {
    content: ""; position: absolute; inset: -10%;
    /* .22 alpha at .5 opacity is an effective .11 on navy -- invisible. The
       dots have to actually be visible to be texture. */
    background-image: radial-gradient(rgba(255,255,255,.40) 1.4px, transparent 1.4px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(closest-side, #000 46%, transparent 86%);
    mask-image: radial-gradient(closest-side, #000 46%, transparent 86%);
    opacity: .85; pointer-events: none; }

  /* A soft disc behind the emblem so it sits on something. */
  .lg-art::after {
    content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 72%);
    pointer-events: none; }
  /* A drawn emblem rather than the wordmark again -- the mark is already on
     the form beside it, and repeating it says nothing twice.

     Concentric rings for the sources a search reaches across, dots on them for
     what it finds, one of them flagged, and a settled tick at the centre for
     the answer that comes back. Abstract on purpose: no names, no verdicts, no
     invented record on a public page. Inline SVG, so it is crisp at any size
     and costs no request. */
  .lg-emblem { position: relative; width: 100%; max-width: 286px; height: auto;
    display: block; filter: drop-shadow(0 14px 30px rgba(3,18,40,.45)); }
  .lg-emblem .ring  { fill: none; stroke: #fff; }
  .lg-emblem .sweep { fill: none; stroke: #36C2A2; stroke-linecap: round; }
  .lg-emblem .dot   { fill: #fff; }
  .lg-emblem .flag  { fill: #36C2A2; }
  .lg-emblem .core  { fill: #36C2A2; }
  .lg-emblem .tick  { fill: none; stroke: #1f1440; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round; }

  /* ------------------------------------------------- continue with Google */
  /* Google renders its own button into .lg-google and its branding rules say
     to leave it alone, so there is nothing to style but the box it sits in.
     It is given a fixed height because the iframe arrives a moment after the
     page does, and without one the form below it jumps when it lands. */
  .lg-google { min-height: 44px; margin: 0 0 22px; display: flex;
    justify-content: center; }
  .lg-or { display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--lg-ink-2); }
  .lg-or::before, .lg-or::after { content: ""; flex: 1 1 auto; height: 1px;
    background: var(--lg-line); }

  /* ================================================== signing up, in a panel */
  /* The sign-up used to be a link at the foot of the form and a page of its
     own. It is a panel over the brand side now: the person stays on the page
     they arrived at, and the two halves of the card become "get in" and
     "start". The art behind it is decoration, so it is the half that gives way. */
  .lg-shell { position: relative; overflow: hidden; }
  /* It is a scroll container by virtue of overflow:hidden, and the halves are
     deliberately moved outside it. Nothing may scroll it back. */
  .lg-shell { scroll-behavior: auto; }

  .su-open { position: absolute; top: 18px; right: 20px; z-index: 6;
    border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14);
    color: #fff; padding: 8px 17px; border-radius: 20px; font-size: 13px;
    font-weight: 700; cursor: pointer; font-family: inherit;
    transition: background .18s ease, transform .18s ease, border-color .18s ease; }
  .su-open:hover { background: rgba(255,255,255,.26); border-color: #fff;
    transform: translateY(-1px); }
  .su-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* It stays put while the halves move underneath it, so what is behind it
     changes from navy to white -- and a white-on-white button is a button
     nobody can find. It inverts to match whichever half it is sitting on. */
  .lg-shell.su-on .su-open { background: var(--lg-navy); border-color: var(--lg-navy);
    color: #fff; }
  .lg-shell.su-on .su-open:hover { background: var(--lg-navy-d);
    border-color: var(--lg-navy-d); }
  .lg-shell.su-on .su-open:focus-visible { outline-color: var(--lg-navy); }
  /* One control, and its label says what pressing it does: it always offers
     whichever of the two the card is not showing. */

  /* .lg-card carries the sign-in's own typography, fields and button, so the
     two faces are the same component with different contents.

     The two HALVES trade places. The white half carries both forms and slides
     right; the brand half slides left the same distance, so the card turns
     over rather than one panel being laid over another -- and login and
     sign-up are never both on screen, because they are two faces of the same
     half.

     Moved with transform rather than by re-ordering the grid, so the browser
     animates them on the compositor and the layout underneath never reflows. */
  .lg-side { position: relative; z-index: 2; background: #fff;
    transition: transform .62s cubic-bezier(.65, 0, .35, 1);
    /* A grid item will not shrink below its content's minimum, and Google
       renders its button at a FIXED inline width -- 320px, plus 52px of
       padding, is a 372px floor under a card that only has 323px to give. The
       column then grew wider than the card and the fields ran off the edge.
       min-width:0 lets it shrink; the cap below keeps the button inside. */
    min-width: 0; }
  .lg-form, .su-panel { min-width: 0; }
  /* Google's button is drawn at the width it is asked for -- the width of the
     column, worked out when it is drawn and again whenever the column changes
     (renderGoogleButtons below) -- so nothing here caps it. A cap used to:
     max-width:100% on every div and iframe inside it. Google's iframe is 20px
     wider than the button it holds, with 10px either side for the hover
     shadow, so capping it to the column cut 10px off the right: the button's
     border and the end of its row went missing. */
  .lg-shell.su-on .lg-side { transform: translateX(100%); }
  .lg-art { transition: transform .62s cubic-bezier(.65, 0, .35, 1); }
  .lg-shell.su-on .lg-art { transform: translateX(-100%); }

  /* Inside the white half the two faces cross-fade. The arriving one waits
     until the slide is most of the way through, so what travels is a panel
     with a face on it rather than two faces dissolving in mid-air.

     visibility, not opacity alone: a transparent form is still in the tab
     order, and tabbing into a password field nobody can see is worse than the
     field simply being there. */
  /* Stacked in one grid cell rather than laid over each other with
     position:absolute. Absolutely placed, neither face gave the card any
     height, so the card was a fixed 600px and whatever did not fit scrolled
     inside it -- the sign-in by 13px, the last sign-up step by 41px. In one
     cell the card is as tall as the taller face, and nothing scrolls. The
     hidden face keeps its space (visibility, not display), so the card does
     not change height as the two cross-fade. */
  .lg-side { display: grid; }
  .lg-form, .su-panel { grid-area: 1 / 1;
    display: flex; flex-direction: column; justify-content: center; }
  .lg-form { opacity: 1; visibility: visible;
    transition: opacity .26s ease .22s, visibility 0s linear .22s; }
  .su-panel { opacity: 0; visibility: hidden;
    transition: opacity .26s ease, visibility 0s linear .26s; }
  .lg-shell.su-on .lg-form { opacity: 0; visibility: hidden;
    transition: opacity .26s ease, visibility 0s linear .26s; }
  .lg-shell.su-on .su-panel { opacity: 1; visibility: visible;
    transition: opacity .26s ease .22s, visibility 0s linear .22s; }

  /* The card fits the window, whatever the window. Every vertical measure --
     the padding round the card and inside it, the logo, the heading, the
     fields, the button, the gaps -- is a clamp() on the window's height: at
     its full size from 760px tall up, and shrinking together below that, so
     a short window gets a tighter card rather than a scrollbar.

     It used to tighten in one step, at 700px. A 1080p screen at Windows' 150%
     scaling leaves about 590px under the browser's own bars, and a 1366x768
     laptop with the bookmarks bar and the taskbar less than that -- both
     under the 616px the card still needed, so the form side scrolled.

     The floor keeps one height while the three sign-up steps come and go;
     the password step, the tallest, is what sets it. Wide windows only: on a
     phone the card is one column and has its own rules further down. */
  @media (min-width: 900px) {
    /* Each measure runs in a straight line from its smallest at a 540px
       window to its full size at 760px, and holds there either side. */
    body { --lg-pad: clamp(8px, calc(8px + (100vh - 540px) * 0.0818), 26px);
      padding-top: var(--lg-pad); padding-bottom: var(--lg-pad); }
    .lg-shell { min-height: min(630px, calc(100vh - 2 * var(--lg-pad))); }
    .lg-side .lg-form, .lg-side .su-panel {
      padding-top: clamp(14px, calc(14px + (100vh - 540px) * 0.1091), 38px); padding-bottom: clamp(14px, calc(14px + (100vh - 540px) * 0.1091), 38px); }
    .lg-side .logo { width: clamp(150px, calc(150px + (100vh - 540px) * 0.1727), 188px); margin-bottom: clamp(8px, calc(8px + (100vh - 540px) * 0.0818), 26px); }
    .lg-side h1 { font-size: clamp(22px, calc(22px + (100vh - 540px) * 0.0364), 30px); margin-bottom: clamp(3px, calc(3px + (100vh - 540px) * 0.0227), 8px); }
    .lg-side .lg-sub { margin-bottom: clamp(8px, calc(8px + (100vh - 540px) * 0.0727), 24px); }
    .lg-side label { margin-bottom: clamp(4px, calc(4px + (100vh - 540px) * 0.0136), 7px); }
    .lg-side input[type="email"], .lg-side input[type="password"],
    .lg-side input[type="text"] {
      min-height: clamp(38px, calc(38px + (100vh - 540px) * 0.0455), 48px); margin-bottom: clamp(8px, calc(8px + (100vh - 540px) * 0.0545), 20px); }
    .lg-side .lg-pw button { height: clamp(38px, calc(38px + (100vh - 540px) * 0.0455), 48px); }
    .lg-side .signin-btn { min-height: clamp(40px, calc(40px + (100vh - 540px) * 0.0455), 50px); margin-top: clamp(4px, calc(4px + (100vh - 540px) * 0.0182), 8px); }
    .lg-side .lg-google { margin-bottom: clamp(8px, calc(8px + (100vh - 540px) * 0.0636), 22px); }
    .lg-side .lg-or { margin-bottom: clamp(8px, calc(8px + (100vh - 540px) * 0.0636), 22px); }
    .lg-side .su-or { margin: clamp(6px, calc(6px + (100vh - 540px) * 0.0545), 18px) 0; }
    .lg-side .su-dots { margin-bottom: clamp(8px, calc(8px + (100vh - 540px) * 0.0545), 20px); }
    .lg-side .su-code { margin-bottom: clamp(8px, calc(8px + (100vh - 540px) * 0.0455), 18px); }
    .lg-side .su-code input { padding: clamp(7px, calc(7px + (100vh - 540px) * 0.0273), 13px) 0; }
  }

  /* Where in the three steps you are. Three marks rather than "Step 2 of 3",
     because the shape of the thing is the useful part -- how much is left. */
  .su-dots { display: flex; gap: 6px; margin: 0 0 20px; }
  .su-dots i { height: 3px; flex: 1 1 auto; border-radius: 99px;
    background: var(--lg-line); transition: background .3s ease; }
  .su-dots i.on { background: var(--lg-navy); }

  .su-step { display: none; }
  .su-step.on { display: block; animation: su-stepin .34s cubic-bezier(.22,.7,.3,1); }
  @keyframes su-stepin {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
  }

  .su-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

  /* Six boxes, the same shape the two-factor step uses, so a code typed here
     feels like a code typed there. */
  .su-code { display: flex; gap: 8px; margin: 0 0 18px; }
  .su-code input { flex: 1 1 0; min-width: 0; text-align: center; padding: 13px 0;
    font-size: 20px; font-weight: 700; letter-spacing: 0; }
  .su-back { display: inline-block; margin: 14px 0 0; font-size: 12.5px;
    font-weight: 600; color: var(--lg-navy); background: none; border: 0;
    padding: 0; cursor: pointer; font-family: inherit; }
  .su-back:hover { text-decoration: underline; }
  .su-sent { margin: -4px 0 18px; font-size: 12.5px; color: var(--lg-ink-2);
    line-height: 1.55; }
  .su-sent b { color: var(--lg-ink); }

  .su-or { display: flex; align-items: center; gap: 11px; margin: 18px 0;
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--lg-ink-2); }
  .su-or::before, .su-or::after { content: ""; flex: 1 1 auto; height: 1px;
    background: var(--lg-line); }
  .su-gbtn { min-height: 44px; display: flex; justify-content: center; }

  @media (prefers-reduced-motion: reduce) {
    .su-panel, .lg-form, .su-open { transition: none; }
    .su-step.on { animation: none; }
  }

  @media (max-width: 899.98px) {
    /* The brand panel gives way; the form is why anyone opened the page. */
    .lg-shell { grid-template-columns: 1fr; max-width: 460px; }
    .lg-art { display: none; }
    /* Both faces narrow together. The sign-up kept .lg-card's 54px side
       padding here and had no width of its own, so its content box filled the
       card and the padding pushed 51px of it off the right edge. */
    .lg-form, .su-panel { padding: 38px 26px; }
    /* One column and no brand half, so there is nothing to trade places with
       and the two faces simply swap where they stand. Sliding here would push
       the card clean off the side of the screen. The button is over white
       either way, so it inverts to stay readable. */
    .lg-shell.su-on .lg-side, .lg-shell.su-on .lg-art { transform: none; }
    .lg-shell { min-height: 0; }
    .su-panel, .lg-shell.su-on .lg-form { display: none; }
    .lg-shell.su-on .su-panel { display: flex; opacity: 1; visibility: visible; }
    .su-open { background: var(--lg-navy); border-color: var(--lg-navy);
      color: #fff; top: 14px; right: 14px; }
    .su-open:hover { background: var(--lg-navy-d); border-color: var(--lg-navy-d); }
  }
  /* A small phone (an iPhone SE is 375 x 667): the password step -- two names,
     the password and its rule, the confirmation -- ran 66px past the screen.
     Tighter all round, so it fits without the page scrolling. */
  @media (max-width: 899.98px) and (max-height: 740px) {
    body { padding: 10px; }
    .lg-side .lg-form, .lg-side .su-panel { padding: 24px 22px; }
    .lg-side .logo { width: 164px; margin-bottom: 16px; }
    .lg-form h1, .lg-card h1 { font-size: 26px; }
    .lg-side .lg-sub { margin-bottom: 16px; }
    .su-dots { margin-bottom: 14px; }
  }

/* The two-step code entry, which the page's script builds after a password is
   accepted (was a <style> string inside that script). */
#twofaStep .otp-head{font-size:19px;font-weight:800;letter-spacing:-.01em; color:var(--lg-ink);margin:0 0 4px;}
#twofaStep .otp-sub{font-size:13.5px;line-height:1.55;color:var(--lg-ink-2); margin:0 0 18px;}
#twofaStep .otp-row{display:flex;gap:8px;margin:0 0 4px;}
#twofaStep .otp-box{flex:1 1 0;min-width:0;height:54px;text-align:center; font-size:21px;font-weight:700;font-family:inherit;padding:0;margin:0; color:var(--lg-ink);background:var(--lg-field); border:1px solid #dfe5ec;border-radius:10px; transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;}
#twofaStep .otp-box:focus{outline:none;background:#fff;border-color:var(--lg-navy); box-shadow:0 0 0 3px rgba(109, 63, 209,.14);}
#twofaStep .otp-box.filled{border-color:var(--lg-navy);background:#fff;}
#twofaStep .otp-note{font-size:12.5px;color:var(--lg-ink-2);margin:10px 0 0;}
@media (max-width:420px){ #twofaStep .otp-box{height:48px;font-size:19px;}
#twofaStep .otp-row{gap:6px;}}

/* Hidden until the page's script shows it (replaces style="display:none"). */
.is-hidden:not(#_):not(#_):not(#_) { display: none; }

/* Cloudflare Turnstile above the button (7 Oct 2026). Its height is held
   before the check draws, so the button does not jump down under the cursor. */
.ts-box { margin: 12px 0 2px; min-height: 65px; }