/* Auth - one stylesheet for every sign-in screen.

   Login, register, forgot, reset, verification and the lock screen all
   share this file.

   The page is two full-width bands - a dark one carrying the product, a
   white one under it carrying the proof - with the form card laid over
   the right of both, crossing the line where the colour stops.

   Three rules run through it.

   1. The radii are the theme's. 5px on anything square because .btn and
      .card are 5px, 6px on inputs because .form-control is. Where a
      theme class does the job the theme class is used and nothing is set
      here at all. Nothing on this page should make the rest of the
      product look wrong.

   2. The page does not scroll above lg. The window is the frame and the
      bands give up their own spacing as it gets shorter, in the order
      things are worth least. Below lg it stacks and scrolls, because a
      phone scrolls.

   3. Everything on the left is drawn, not photographed. An agent
      platform has nothing to photograph, and a stock glowing brain says
      less than a picture of what actually happens to a question. */

:root {
    --auth-ink: #07090a;
    --auth-ink-2: #151d1e;
    --auth-line: rgba(255, 255, 255, .10);
    --auth-dim: rgba(255, 255, 255, .66);
    --auth-faint: rgba(255, 255, 255, .46);

    /* the right column, exactly: 1fr of 1.16fr + 1fr. The bands stay
       clear of the form by this plus whatever padding the tier uses, so
       the content sits in the column it always sat in while only the
       background runs the full width. */
    --auth-col2: 46.2963%;
}

/* ---------- the page ---------- */

.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(56% 52% at 8% 2%, rgba(var(--primary-rgb), .08) 0%, transparent 62%),
        radial-gradient(50% 48% at 96% 98%, rgba(255, 162, 1, .10) 0%, transparent 62%),
        #eef1f3;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    row-gap: 16px;
    min-height: 100vh;
}

/* the form column sits over both rows, so the card crosses the line
   where the colour stops and the white starts */
.auth-right {
    grid-column: 2;
    grid-row: 1 / 3;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 26px 44px 18px;
}

/* ---------- the dark band: the product ---------- */

.auth-hero {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 38px calc(var(--auth-col2) + 44px) 38px 44px;
    color: #fff;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(92% 86% at 90% 0%, rgba(var(--primary-rgb), .42) 0%, transparent 58%),
        radial-gradient(72% 72% at 0% 100%, rgba(255, 162, 1, .15) 0%, transparent 60%),
        linear-gradient(150deg, var(--auth-ink-2) 0%, var(--auth-ink) 68%);
    box-shadow: 0 14px 34px rgba(10, 12, 12, .16);
}

.auth-hero > * { position: relative; z-index: 2; }

/* the logo holds the top edge and this takes everything left over, so a
   tall band fills rather than leaving a hole under the pitch */
.auth-hero-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.auth-grid {
    position: absolute;
    inset: -30%;
    z-index: 0;
    background-image:
        linear-gradient(var(--auth-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--auth-line) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: perspective(760px) rotateX(58deg);
    transform-origin: 50% 0;
    mask-image: linear-gradient(to bottom, #000, transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 74%);
    animation: auth-drift 20s linear infinite;
    pointer-events: none;
}

@keyframes auth-drift {
    to { background-position: 0 46px, 46px 0; }
}

.auth-sweep {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(112deg, transparent 40%,
        rgba(255, 255, 255, .05) 50%, transparent 60%);
    background-size: 250% 100%;
    animation: auth-sweep 12s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auth-sweep {
    0%, 100% { background-position: 130% 0; }
    50%      { background-position: -30% 0; }
}

.auth-logo { height: 28px; width: auto; }

.auth-mid {
    display: flex;
    align-items: center;
    gap: 32px;
}

.auth-said { flex: 1 1 auto; min-width: 0; }

.auth-name {
    margin: 0 0 12px;
    color: #fff;
    font-size: 38px;
    line-height: 1.14;
    font-weight: 600;
    letter-spacing: -.02em;
}

.auth-name span { color: var(--secondary); }

.auth-lede {
    margin: 0;
    max-width: 520px;
    color: var(--auth-dim);
    font-size: 14.5px;
    line-height: 1.72;
}

/* ---------- the circle: the agent and what it reaches ---------- */

/* Three speeds turning at once is what makes a circle read as working
   rather than as a border somebody drew: the outer ring one way, the
   inner ring the other, and a dot running the orbit faster than both. */

.auth-orbit {
    position: relative;
    flex: 0 0 auto;
    width: 208px;
    height: 208px;
    margin: 0 18px;
}

.auth-orbit-ring,
.auth-orbit-ring-2 {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .17);
}

.auth-orbit-ring {
    inset: 0;
    animation: auth-spin 34s linear infinite;
}

.auth-orbit-ring-2 {
    inset: 34px;
    border-color: rgba(255, 255, 255, .12);
    animation: auth-spin-back 22s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

@keyframes auth-spin-back {
    to { transform: rotate(-360deg); }
}

/* the dot that travels the orbit. The arm is what turns; the dot only
   sits at the top of it. */
.auth-orbit-arm {
    position: absolute;
    inset: 0;
    animation: auth-spin 7s linear infinite;
    pointer-events: none;
}

.auth-orbit-arm::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow:
        0 0 0 4px rgba(255, 162, 1, .18),
        0 0 12px 2px rgba(255, 162, 1, .55);
}

.auth-orbit-sweep {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg, transparent 268deg,
        rgba(var(--primary-rgb), .95) 330deg,
        var(--secondary) 356deg, transparent 360deg);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: auth-orbit-run 5.5s linear infinite;
}

@keyframes auth-orbit-run {
    to { transform: rotate(360deg); }
}

/* 5px, because every square thing in this theme is 5px */
.auth-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: linear-gradient(150deg, var(--primary) 0%, #8f1204 100%);
    box-shadow:
        0 0 0 6px rgba(var(--primary-rgb), .14),
        0 14px 30px rgba(0, 0, 0, .5);
    color: #fff;
}

.auth-core i {
    font-size: 34px;
    animation: auth-nudge 3.2s ease-in-out infinite;
}

@keyframes auth-nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

.auth-core::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), .35);
    animation: auth-breathe 3.2s ease-in-out infinite;
}

@keyframes auth-breathe {
    0%, 100% { opacity: .9; transform: scale(1); }
    50%      { opacity: .3; transform: scale(1.07); }
}

/* A name under every module rather than one caption naming whichever is
   lit. Four modules with four labels is the picture; one label is a
   quiz. */
.auth-sat {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 68px;
}

.auth-sat-tile {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    border: 1px solid var(--auth-line);
    background: rgba(21, 29, 30, .94);
    color: rgba(255, 255, 255, .6);
    font-size: 19px;
    transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.auth-sat-tag {
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--auth-faint);
    transition: color .3s ease;
}

.auth-sat.is-on .auth-sat-tile {
    color: #fff;
    border-color: rgba(var(--primary-rgb), .8);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .16);
    transform: translateY(-2px);
}

.auth-sat.is-on .auth-sat-tag { color: var(--secondary); }

.auth-sat-1 { top: -12px;    left: 50%;    margin-left: -34px; }
.auth-sat-2 { top: 50%;      right: -34px; margin-top: -31px; }
.auth-sat-3 { bottom: -22px; left: 50%;    margin-left: -34px; }
.auth-sat-4 { top: 50%;      left: -34px;  margin-top: -31px; }

/* ---------- the four steps: what happens to a question ---------- */

.auth-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 26px;
    max-width: 660px;
}

/* the arrow between two steps. A real element rather than a border,
   because it has to light up when the work passes through it. */
.auth-arrow {
    flex: 0 0 auto;
    width: 26px;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: rgba(255, 255, 255, .22);
    transition: color .3s ease, transform .3s ease;
}

.auth-arrow.is-on {
    color: var(--secondary);
    transform: translateX(2px);
}

.auth-step {
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 14px 15px;
    border: 1px solid var(--auth-line);
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}

.auth-step.is-on {
    border-color: rgba(var(--primary-rgb), .7);
    background: rgba(var(--primary-rgb), .14);
    transform: translateY(-3px);
}

.auth-step.is-done {
    border-color: rgba(26, 190, 23, .4);
    background: rgba(26, 190, 23, .09);
}

.auth-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.auth-step-ico {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: var(--secondary);
    font-size: 17px;
    transition: background .3s ease, color .3s ease;
}

.auth-step.is-on .auth-step-ico {
    background: var(--primary);
    color: #fff;
}

.auth-step.is-done .auth-step-ico {
    background: rgba(26, 190, 23, .18);
    color: #4ade5b;
}

.auth-step-no {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--auth-faint);
}

.auth-step.is-done .auth-step-no { display: none; }

.auth-step b {
    display: block;
    margin-bottom: 3px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}

.auth-step-said {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    color: var(--auth-faint);
}

/* the bar that fills while the step is working. It is the difference
   between a box that is highlighted and a box that is busy. */
.auth-step-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .07);
}

.auth-step-bar i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--primary);
}

.auth-step.is-on .auth-step-bar i {
    animation: auth-fill 900ms linear forwards;
}

.auth-step.is-done .auth-step-bar i {
    width: 100%;
    background: #1abe17;
}

@keyframes auth-fill {
    from { width: 0; }
    to   { width: 100%; }
}

/* the tick that says the step finished, rather than that it is next */
.auth-step-tick {
    margin-left: auto;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1abe17;
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transform: scale(.4);
}

.auth-step.is-done .auth-step-tick {
    animation: auth-tick .4s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

@keyframes auth-tick {
    0%   { opacity: 0; transform: scale(.4); }
    60%  { opacity: 1; transform: scale(1.18); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---------- the white band: proof and modules ---------- */

.auth-proof {
    grid-column: 1 / -1;
    grid-row: 2;
    z-index: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 24px calc(var(--auth-col2) + 44px) 26px 44px;
    box-shadow: 0 10px 26px rgba(10, 12, 12, .07);
}

.auth-kicker {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* a .card is a flex column, so an inline-flex child still stretches */
.auth-trust {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 12px;
    padding: 7px 14px 7px 8px;
    border-radius: 5px;
    background: var(--bs-tertiary-bg);
}

.auth-stars { color: var(--secondary); font-size: 14px; }

.auth-mods {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.auth-mod {
    padding: 12px 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    text-align: center;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.auth-mod:hover {
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow: 0 6px 16px rgba(10, 12, 12, .07);
}

.auth-mod i {
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
    color: var(--primary);
}

.auth-mod b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* the live number - what makes it a system somebody already has rather
   than a grid of logos */
.auth-mod span {
    display: block;
    font-size: 10.5px;
    color: var(--bs-secondary-color);
}

.auth-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--bs-border-color);
    font-size: 11.5px;
    color: var(--bs-secondary-color);
}

.auth-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1abe17;
    font-weight: 500;
}

.auth-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1abe17;
    animation: auth-pulse 1.6s ease-in-out infinite;
}

@keyframes auth-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.7); opacity: .35; }
}

/* ---------- the form card ---------- */

/* Boxed, shadowed, and given room to breathe. The height of every
   control comes from padding on the theme's own classes, deliberately
   not from .form-control-lg or .btn-lg - each of those brings a larger
   corner radius with it and would put this page out of step with the
   rest of the product. */

.auth-right-mid {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.auth-form-card {
    width: 100%;
    max-width: 470px;
    padding: 36px 38px 34px;
    box-shadow: 0 16px 40px rgba(10, 12, 12, .12);
}

.auth-head {
    margin: 0 0 6px;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.015em;
}

.auth-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--bs-secondary-color);
}

/* the top line of the card: who this is, and the way out if it is going
   wrong. The way out belongs here rather than at the bottom, because
   somebody who cannot get in stops reading after the first screenful. */
.auth-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bs-border-color);
}

.auth-mark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.auth-mark-badge {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--primary);
    color: #fff;
    font-size: 16px;
}

.auth-form-card .form-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--bs-body-color);
}

.auth-form-card .form-control,
.auth-form-card .input-group-text {
    padding-top: 10px;
    padding-bottom: 10px;
}

.auth-form-card .btn {
    padding-top: 11px;
    padding-bottom: 11px;
}

.auth-terms { font-size: 12px; line-height: 1.6; }

/* the way to an account is a footer, not another line under the button.
   A rule and real space above it stop the bottom of the card reading as
   four things stacked without air. */
.auth-new {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border-color);
}

.auth-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-top: 16px;
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.auth-foot a { color: var(--bs-secondary-color); }

.auth-foot a:hover { color: var(--primary); }

/* ---------- narrower ---------- */

@media (max-width: 1399.98px) {
    .auth-hero { padding: 30px calc(var(--auth-col2) + 32px) 30px 32px; gap: 20px; }
    .auth-proof { padding: 20px calc(var(--auth-col2) + 32px) 22px 32px; }
    .auth-name { font-size: 33px; }
    .auth-orbit { width: 180px; height: 180px; }
    .auth-core { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
    .auth-core i { font-size: 29px; }
    .auth-mid { gap: 24px; }
    .auth-form-card { padding: 30px 30px 26px; }
}

@media (max-width: 1199.98px) {
    .auth-shell { --auth-col2: 50%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .auth-right { padding: 20px 26px 16px; }
    .auth-hero { padding: 26px calc(var(--auth-col2) + 26px) 26px 26px; }
    .auth-proof { padding: 18px calc(var(--auth-col2) + 26px) 20px 26px; }
    .auth-name { font-size: 28px; }
    .auth-lede { font-size: 13.5px; }
    .auth-orbit { display: none; }
    .auth-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* On a hand-held the form comes first and everything else follows it.

   The person on a phone is nearly always coming back rather than
   deciding, so the password field is the top of the screen and the case
   for the product is underneath it, for whoever scrolls. Nothing is
   thrown away and nothing is duplicated - the same three blocks, in a
   different order.

   The colour moves to the page itself so the form and the pitch sit on
   one continuous background rather than on two panels that restart the
   same gradient and show the seam. */

@media (max-width: 991.98px) {
    body.auth-page {
        background:
            radial-gradient(80% 40% at 90% 0%, rgba(var(--primary-rgb), .40) 0%, transparent 60%),
            radial-gradient(70% 40% at 0% 62%, rgba(255, 162, 1, .13) 0%, transparent 62%),
            linear-gradient(170deg, var(--auth-ink-2) 0%, var(--auth-ink) 62%);
    }

    .auth-shell {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    /* 1. the form */
    .auth-right {
        order: 1;
        padding: 26px 16px 10px;
    }

    .auth-right-mid { flex: 0 0 auto; }

    .auth-form-card { max-width: 470px; margin: 0 auto; }

    /* 2. the product, on the same colour */
    .auth-hero {
        order: 2;
        padding: 14px 20px 30px;
        gap: 20px;
        background: transparent;
        box-shadow: none;
    }

    /* the logo goes: the card already carries the mark, and two of them
       one above the other is just the name twice */
    .auth-hero > div:not(.auth-grid):not(.auth-sweep):not(.auth-hero-body) {
        display: none;
    }

    .auth-grid { inset: -40% -30% 0; }

    .auth-name { font-size: 26px; }
    .auth-lede { font-size: 13.5px; }
    .auth-orbit { display: none; }
    .auth-flow { flex-wrap: wrap; gap: 8px; max-width: none; }
    .auth-step { flex: 1 1 calc(50% - 4px); }
    .auth-arrow { display: none; }

    /* 3. the proof, still white, still the full width */
    .auth-proof {
        order: 3;
        padding: 22px 20px 26px;
        border-top: 0;
    }

    .auth-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* the footer sits on the dark now, so it reads on the dark */
    .auth-foot { color: var(--auth-faint); padding-top: 14px; }
    .auth-foot a { color: var(--auth-faint); }
    .auth-foot a:hover { color: var(--secondary); }
}

@media (max-width: 575.98px) {
    .auth-right { padding: 20px 14px 8px; }
    .auth-form-card { padding: 24px 20px 22px; }
    .auth-hero { padding: 12px 16px 26px; }
    .auth-proof { padding: 20px 16px 24px; }
    .auth-name { font-size: 23px; }
    .auth-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the page does not scroll above lg ---------- */

@media (min-width: 992px) {
    html, body.auth-page { height: 100%; overflow: hidden; }

    .auth-shell { height: 100vh; min-height: 0; }
}

@media (min-width: 992px) and (max-height: 880px) {
    .auth-hero { padding: 30px calc(var(--auth-col2) + 34px) 30px 34px; gap: 20px; }
    .auth-proof { padding: 20px calc(var(--auth-col2) + 34px) 22px 34px; }
    .auth-right { padding: 24px 38px 18px; }
    .auth-name { font-size: 32px; }
    .auth-head { font-size: 25px; }
    .auth-form-card { padding: 30px 32px 26px; }
    .auth-orbit { width: 184px; height: 184px; }
    .auth-core { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
    .auth-core i { font-size: 29px; }
}

/* The three extra ways in cost the card about 70px, and on a short
   window that has to come from somewhere. The supporting line goes
   first: it is the one thing in the card nobody needs in order to sign
   in. The four steps keep their captions - they are the picture. */

@media (min-width: 992px) and (max-height: 780px) {
    .auth-hero { padding: 22px calc(var(--auth-col2) + 28px) 22px 28px; gap: 14px; }
    .auth-proof { padding: 16px calc(var(--auth-col2) + 28px) 18px 28px; }
    .auth-right { padding: 12px 32px 10px; }
    .auth-foot { display: none; }
    .auth-logo { height: 25px; }
    .auth-name { font-size: 27px; }
    .auth-lede { font-size: 13px; }
    .auth-head { font-size: 23px; margin-bottom: 16px; }
    body:not(.auth-roomy) .auth-sub { display: none; }
    .auth-form-card { padding: 26px 28px 26px; }
    .auth-card-top { margin-bottom: 18px; padding-bottom: 14px; }
    .auth-flow { margin-top: 18px; }
    .auth-step { padding: 11px 12px 13px; }
    .auth-step-ico { width: 30px; height: 30px; font-size: 15px; }
    .auth-step-head { margin-bottom: 7px; }
    .auth-arrow { width: 20px; }
    .auth-orbit { width: 152px; height: 152px; margin: 0 22px; }
    .auth-core { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
    .auth-core i { font-size: 24px; }
    .auth-sat-tile { width: 40px; height: 40px; font-size: 16px; }
    .auth-mod { padding: 9px 8px; }
    .auth-status { margin-top: 13px; padding-top: 11px; }
    .auth-form-card .form-control,
    .auth-form-card .input-group-text { padding-top: 8px; padding-bottom: 8px; }
    .auth-form-card .btn { padding-top: 9px; padding-bottom: 9px; }
}

@media (min-width: 992px) and (max-height: 640px) {
    .auth-lede { display: none; }
    .auth-status { display: none; }
    .auth-step-said { display: none; }
    .auth-hero { padding: 16px calc(var(--auth-col2) + 24px) 16px 24px; gap: 10px; }
    .auth-proof { padding: 12px calc(var(--auth-col2) + 24px) 14px 24px; }
    .auth-name { font-size: 24px; }
    .auth-orbit { display: none; }
}

/* ---------- for anyone who asked motion to stop ---------- */

@media (prefers-reduced-motion: reduce) {
    .auth-grid,
    .auth-sweep,
    .auth-orbit-ring,
    .auth-orbit-ring-2,
    .auth-orbit-arm,
    .auth-orbit-sweep,
    .auth-core i,
    .auth-core::after,
    .auth-live-dot,
    .auth-step.is-on .auth-step-bar i,
    .auth-step.is-done .auth-step-tick {
        animation: none !important;
    }

    .auth-step.is-done .auth-step-tick { opacity: 1; transform: none; }

    .auth-sat-tile,
    .auth-step,
    .auth-arrow { transition: none !important; }
}


/* ---------- the screens either side of signing in ---------- */

/* something worth reading before pressing the button */
.auth-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    margin: 0 0 16px;
    border-radius: 6px;
    background: var(--light-300);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bs-secondary-color);
}

.auth-note > i { margin-top: 1px; font-size: 15px; flex-shrink: 0; }

/* whose session is waiting, so nobody types into somebody else's screen */
.auth-who {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.auth-who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.auth-who > div { display: flex; flex-direction: column; min-width: 0; }

.auth-who b { font-size: 14px; font-weight: 500; color: var(--heading-color); }

.auth-who span { font-size: 12.5px; color: var(--bs-secondary-color); }

/* the shortest route to one that passes every rule below */
.auth-make {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--primary);
}

.auth-make:hover { text-decoration: underline; }

/* whether the two match, said next to the second one rather than on submit */
.auth-match {
    display: none;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 12.5px;
}

.auth-match.is-on { display: inline-flex; }
.auth-match.is-ok { color: var(--success); }
.auth-match.is-no { color: var(--danger); }

.auth-meter {
    padding: 13px 14px;
    margin-bottom: 18px;
    border-radius: 6px;
    background: var(--light-300);
}

.auth-meter-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--bs-secondary-color);
}

.auth-meter-top b { font-size: 14px; font-weight: 600; }

.auth-bar { display: flex; gap: 5px; }

.auth-bar b { flex: 1 1 0; height: 5px; border-radius: 99px; background: rgba(0, 0, 0, .09); }

[data-bs-theme=dark] .auth-bar b { background: rgba(255, 255, 255, .14); }

.auth-bar b.is-weak   { background: var(--danger); }
.auth-bar b.is-fair   { background: var(--warning); }
.auth-bar b.is-good   { background: var(--info); }
.auth-bar b.is-strong { background: var(--success); }

.auth-score-weak   { color: var(--danger); }
.auth-score-fair   { color: var(--warning); }
.auth-score-good   { color: var(--info); }
.auth-score-strong { color: var(--success); }

.auth-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 18px;
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
}

.auth-rules li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--bs-secondary-color);
}

.auth-rules li > i { font-size: 14px; opacity: .5; }

.auth-rules li.is-ok { color: var(--success); }

.auth-rules li.is-ok > i { opacity: 1; }

@media (max-width: 575.98px) {
    .auth-rules { grid-template-columns: minmax(0, 1fr); }
}