/* R6 — Sign-in page (pages/login.rs: sign in, register, verify code, reset password).
   Prototype: pigeonhole-app.html ?page=signin. Builds on .tl-signin / .tl-hero / .tl-word /
   .tl-card / .tl-tape / .tl-field / .tl-inp in teachloop.css; everything here is scoped
   under .tl-signin. */

.tl-signin { padding: 0 0 40px; }
.tl-signin .tl-hero { display: block; height: auto; max-width: 70vw; margin: 20px auto 0; }
/* The wordmark is the page's <h1>: beat the legacy h1 rule. */
.tl-signin h1.tl-word { font: 400 54px/1 var(--tl-font-slab); color: var(--tl-ink); letter-spacing: 0; margin: 12px 0 4px; }
.tl-signin .tl-signin-tag { padding: 0; font-size: 24px; }

.tl-signin .tl-signin-card { margin-bottom: 0; }

/* Labels are <label>s: undo the legacy label rule (keeps the .tl-field look). */
.tl-signin .tl-field > label { font: 600 12px/1.2 var(--tl-font-body); color: var(--tl-ink); }
.tl-signin .tl-grid2 { gap: 0 14px; } /* the fields carry their own bottom margin */
.tl-signin-opt { text-transform: none; letter-spacing: 0; opacity: .8; }

/* Inputs: shared .tl-inp at one height (legacy rules pin select height). */
.tl-signin input.tl-inp, .tl-signin select.tl-inp { height: 44px; }
.tl-signin select.tl-inp { background-color: var(--tl-white); }
.tl-signin input.tl-inp:focus,
.tl-signin select.tl-inp:focus { border-color: var(--tl-ink); background-color: var(--tl-white); box-shadow: 0 0 0 3px rgba(216,165,54,.45); }
.tl-signin input.tl-signin-code { font-size: 20px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* Step title (register / verify / reset) and guidance lines. */
.tl-signin-step { font: 400 22px/1.15 var(--tl-font-slab); margin: 0 0 14px; font-synthesis: none; }
.tl-signin-note { font-size: 14.5px; line-height: 1.45; opacity: .8; margin: 0 0 18px; }

/* Actions: mustard button left, the secondary link right (prototype). */
.tl-signin .tl-signin-acts { justify-content: space-between; margin-top: 6px; }
.tl-signin .tl-signin-acts .btn { padding: 9px 18px; font-size: 14.5px; }
.tl-signin-link {
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--tl-ink);
    text-decoration: underline; text-underline-offset: 3px;
}
.tl-signin-link:hover { color: var(--tl-teal); }
.tl-signin-foot {
    margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--tl-dash);
    font-size: 14px; text-align: center;
}

.tl-signin-err { font-size: 14px; margin: -4px 0 14px; }
.tl-signin-err p { margin: 0 0 6px; }
.tl-signin-errlinks { display: flex; gap: 16px; }

@media (max-width: 480px) {
    .tl-signin { margin-top: 3vh; }
    .tl-signin .tl-hero { width: 190px; }
    .tl-signin h1.tl-word { font-size: 44px; }
    .tl-signin .tl-signin-tag { font-size: 22px; }
    .tl-signin .tl-signin-card { padding: 26px 20px 22px; }
}