/* The sign-in page: the card's own mark and realm, the two tabs, and the steps
   to getting an account. */

.navbar .nav-link {
    color: var(--steel) !important;
    font-size: 0.8rem;
}

.navbar .nav-link:hover {
    color: var(--gold) !important;
}

/* The installation's own mark, standing over its name. Set larger than the one
   in the page header, because here it is the first thing on an otherwise empty
   card rather than a mark beside a title. */
.login-logo {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.5rem;
}

/* Which directory the credentials are checked against. It sits under what this
   installation is, and is a step quieter: it names the machinery rather than
   the archive. */
.login-header .login-realm {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

/* Getting an account, on the second tab of the sign-in card. Two numbered
   steps, each a heading over what to do, since access is arranged at the
   accounts site rather than here. */
.signup-intro {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--steel);
}

.signup-steps {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.signup-steps li {
    line-height: 1.5;
}

.signup-step-title {
    display: block;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink);
    margin-bottom: 0.2rem;
}

.signup-steps p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--steel);
}

.signup-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--steel);
}

/* Nav tabs (LDAP login) */
.nav-tabs {
    border-color: var(--line);
}

.nav-tabs .nav-link {
    color: var(--steel);
    border-color: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-tabs .nav-link:hover {
    color: var(--ink);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    background: var(--slate);
    border-color: var(--line) var(--line) var(--slate);
    color: var(--gold);
}

/* ── In the title page's style, on the system's slate ──────────────────────── */
/* The way in is a system page, so the card sits on the slate the profile and
   the dashboard sit on: framed in the gold hairline, the projector's gold light
   falling across its head. The installation's name is set the way the title
   page names a title, heavy and close, and everything under it is named in a
   quiet hand rather than in tracked capitals. */
.login-card {
    max-width: 440px;
    background: var(--slate);
    border: 1px solid rgba(201, 166, 52, 0.22);
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.login-header {
    padding: 2.2rem 2rem 1.6rem;
    border-bottom: 1px solid rgba(201, 166, 52, 0.22);
    background:
        radial-gradient(ellipse 70% 140% at 50% 0%,
                        rgba(201, 166, 52, 0.14), rgba(201, 166, 52, 0) 70%);
}

.login-logo {
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 0.9rem;
    filter: drop-shadow(0 0 14px rgba(201, 166, 52, 0.35));
}

.login-header h1 {
    margin: 0;
    font-size: clamp(1.9rem, 5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.login-header .subtitle {
    margin-top: 0.4rem;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(247, 249, 251, 0.62);
}

.login-header .login-realm {
    margin-top: 0.9rem;
    font-size: 0.8rem;
    letter-spacing: 0;
    color: var(--gold);
}

/* The two tabs, as the views on a listing are drawn: words in the sheet's
   hand, the one being read in gold on a gold rule, and nothing boxed. */
.login-card .nav-tabs {
    gap: 1.6rem;
    border-bottom: 1px solid var(--line);
}

.login-card .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 0 0 0.6rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 -2px 0 transparent;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: rgba(247, 249, 251, 0.6);
    transition: color 0.12s ease, box-shadow 0.12s ease;
}

.login-card .nav-tabs .nav-link:hover {
    color: var(--ink);
}

.login-card .nav-tabs .nav-link.active {
    background: none;
    color: var(--gold);
    box-shadow: inset 0 -2px 0 var(--gold);
}

.login-card .nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* The fields, named and drawn the way the profile's are. */
.login-card label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(247, 249, 251, 0.72);
}

.login-card .form-control {
    padding: 0.7rem 0.95rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(201, 166, 52, 0.22) !important;
    border-radius: 4px;
}

.login-card .form-control:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 166, 52, 0.18) !important;
}

.login-card .btn-primary {
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(201, 166, 52, 0.18);
}

.login-card .btn-primary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* Getting an account. The steps are an order to follow, so each is led by its
   number, set in gold as the title page sets a figure. */
.signup-intro,
.signup-note,
.signup-steps p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(247, 249, 251, 0.72);
}

.signup-steps {
    counter-reset: signup-step;
    padding-left: 0;
    list-style: none;
    gap: 1.1rem;
}

.signup-steps li {
    counter-increment: signup-step;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: 0.6rem;
}

.signup-steps li::before {
    content: counter(signup-step);
    grid-row: 1 / span 2;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}

.signup-step-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media (max-width: 575px) {
    .login-header {
        padding: 1.7rem 1.3rem 1.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-card .nav-tabs .nav-link {
        transition: none;
    }
}