.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s4);
    padding: var(--s5) var(--s4);
    background: var(--bg);
}

.auth__card {
    margin: auto;
    width: 100%;
    max-width: 420px;
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .06);
}


.auth__head { text-align: center; margin-bottom: var(--s4); }


.auth__h {
    font-size: var(--h1);
    font-weight: 700;
    letter-spacing: -.022em;
    margin: 0;
}

.auth__lead {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
    max-width: 34ch;
    margin: 6px auto 0;
}

.auth__form .fld { margin-bottom: var(--s4); }
.auth__form .fld:last-of-type { margin-bottom: var(--s4); }

.js .step { display: none; }
.js .step--on { display: block; }

.steps {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0 0 var(--s4);
    padding: 0;
}

.steps__s {
    flex: 1;
    min-width: 0;
    text-align: center;
    position: relative;
    color: var(--faint);
}

/* the rail must meet the dots' centre line, so this tracks half of .steps__n */
.steps__s::before {
    content: "";
    position: absolute;
    top: 13px; left: -50%; right: 50%;
    height: 2px;
    background: var(--n-200);
}

.steps__s:first-child::before { display: none; }

.steps__n {

    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin: 0 auto 5px;
    border-radius: var(--r-pill);
    border: 2px solid var(--n-200);
    background: var(--surface);
    font-size: 12.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.steps__l { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }

.steps__s--on { color: var(--text); }
.steps__s--on .steps__n { border-color: var(--brand-900); background: var(--brand-900); color: #fff; }

.steps__s--done { color: var(--muted); }
.steps__s--done .steps__n { border-color: var(--brand-900); color: var(--brand-900); }
.steps__s--done::before { background: var(--brand-900); }

.step__act { display: flex; gap: var(--s3); }

.step__act .btn { flex: 1 1 0; min-width: 0; }

.auth__sec {
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--faint);
    margin: var(--s4) 0 var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--n-100);
}
.auth__sec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.auth__alt {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin: var(--s4) 0 0;
}

.auth__forgot { text-align: right; font-size: 13px; margin: -4px 0 var(--s4); }

.auth__note { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.auth__note p + p { margin-top: var(--s3); }

.auth__foot { font-size: 11.5px; color: var(--faint); margin: 0; text-align: center; }


@media (max-width: 480px) {
    .auth { padding: var(--s4) var(--s3); }
    .auth__card { padding: var(--s5) var(--s4); }
}

.pro__id {
    display: flex;
    align-items: center;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s4);
}

.pro__av {
    width: 52px; height: 52px; flex: none;
    border-radius: var(--r-pill);
    background: var(--brand-900); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; letter-spacing: .02em;
}

.pro__who { min-width: 0; flex: 1 1 220px; }
.pro__name { font-size: var(--h1); font-weight: 700; letter-spacing: -.02em; margin: 0; }

.pro__meta { margin: 2px 0 0; font-size: 13px; }

.pro__code { font-weight: 640; font-variant-numeric: tabular-nums; }

.pro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--s5);
    align-items: start;
}

@media (min-width: 860px) {
    .pro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pro__col { min-width: 0; }
.pro__col .sl:first-child { margin-top: var(--s5); }

/* .truncate cannot shrink a nowrap flex item without this, so a long email overran the row on a phone */
.pro .rw__r { min-width: 0; }

.pwd { display: grid; grid-template-columns: 1fr; gap: 0 var(--s5); }

/* the page runs at the wide width, so without a cap the password fields stretch across the monitor */
@media (min-width: 860px) {
    .pwd { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
}

.pwd__col { min-width: 0; }
.pwd__col .sl:first-child { margin-top: var(--s5); }

.pwd__act { display: flex; flex-wrap: wrap; gap: var(--s2); }


/* the block-licence reason sits inline with its button and must not stretch the row */
/* no font-size of its own: an .inp under 16px makes iOS Safari zoom on focus */
.adm__reason {
    width: 130px;
    min-height: var(--ctl-h-sm);
    margin-bottom: 0;
    padding: var(--fld-py) var(--fld-px);
}

.adm__lic { display: block; }
.adm__lic small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

.adm__token {
    display: block;
    margin-top: var(--s2);
    padding: 10px;
    border: 1px solid var(--n-300);
    border-radius: var(--r-sm);
    background: var(--n-0);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
}

/* dates and codes wrapping would make one row two rows tall and break the grid the eye reads down */
.adm__tbl .num { white-space: nowrap; }

@media (min-width: 1280px) {
  :root.rail-mini .pro__col { break-inside: avoid; margin-bottom: var(--s6); }
}


@media (max-width: 760px) {
    /* the block-licence reason is typed in the dialog, so the field never needs room in a card */
    /* only the dialog makes this field redundant, so no-JS keeps it or the required input is unsubmittable */
    .js .tcards .adm__reason { display: none; }

    .adm__tbl .num { white-space: normal; }
}

/* a mouse needs no 46px target, so the auth card and the installer list tighten to CRM density */
@media (hover: hover) and (pointer: fine) {
    .auth__card { max-width: 380px; padding: var(--s5); }

    .auth__head { margin-bottom: var(--s4); }
    .auth__lead { font-size: 12.5px; max-width: 40ch; }

    .auth__mark { margin-bottom: 10px; }
    .auth__mark .logo { width: 34px; height: 34px; }

    .auth__form .fld { margin-bottom: var(--s3); }
    .auth__form .fld:last-of-type { margin-bottom: var(--s4); }

    .steps { margin-bottom: var(--s4); }
    .steps__s::before { top: 11px; }
    .steps__n { width: 22px; height: 22px; margin-bottom: 4px; font-size: 11.5px; }

    .auth__sec { font-size: 11px; margin: var(--s4) 0 var(--s2); padding-top: var(--s3); }

    .auth__alt { font-size: 12.5px; margin-top: var(--s3); }
    .auth__forgot { font-size: 12.5px; margin-bottom: var(--s3); }
    .auth__note { font-size: 13px; }

    .step__act { gap: var(--s2); }

    .pro__id { gap: var(--s3); margin-bottom: var(--s4); }
    .pro__av { width: 40px; height: 40px; font-size: 15px; }
    .pro__meta { font-size: 12.5px; }

    .adm__reason { width: 118px; }
    .adm__token { font-size: 12.5px; padding: 8px 10px; }

    /* five icon buttons per row: the shared var(--s2) gap costs a column of table width */
    .adm__tbl .tbl-act { gap: 5px; }
    .adm__tbl .tbl-act form { gap: 5px; }
    .adm__tbl .mt-1 { margin-top: 3px; }
}