/* THE LOGIN CARD AND THE JOIN CARD (Steven 2026-10-13 evening, his shot of
   /login: "I told you I wanted this login card to be the same as the other
   cards for the width; I want the style to look the same."). /login
   (templates/auth/login.html) and Join (templates/auth/register_phone.html)
   are THE ONE CARD: static/cards/card.css's .tb-card (its ring, radius,
   glow, night art band and white panel), at the visitor deck's width
   (static/css/pages/visitor-deck.css .vd-slide inside the landing's page):
   the feed's 3px gutter off each edge on a phone (--feed-card-gutter-mobile),
   the feed's width on a tablet, TikTok's 9:16 of the card's height from
   900px. The card is the screen's height (the deck card's shape; these
   pages have no header) and grows when a short phone needs more room.
   On the art band, the TOLL Bench wordmark giant in the header's type
   (.toll-bench-header__title, layout.css), then the title pair. Tokens
   only; no em-dashes. */

.tl-page {
    box-sizing: border-box;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-1) 0 var(--space-2);
    background: var(--auth-page-bg);
}

/* ---- the frame: the deck card's width and shape ---------------------- */
.tl-card {
    --tl-h: calc(100svh - var(--space-1) - var(--space-2));
    --tb-card-full-h: var(--tl-h);
    box-sizing: border-box;
    flex: none;
    width: 100%;
    max-width: var(--feed-card-max-width);
}
@media (max-width: 767px) {
    .tl-card {
        width: calc(100% - (var(--feed-card-gutter-mobile) * 2));
        max-width: calc(100% - (var(--feed-card-gutter-mobile) * 2));
    }
}
@media (min-width: 900px) {
    .tl-card { width: min(100%, calc(var(--tl-h) * 9 / 16)); }
}
.tl-card > .tb-card__inner { grid-template-rows: minmax(0, 1fr); }
.tl-face { display: flex; flex-direction: column; min-height: 0; }

/* ---- the art band: the wordmark giant, then the title pair ------------ */
/* never shorter than its words: on a short phone the card grows instead */
.tl-card .tl-art { flex: 1 1 auto; min-height: auto; gap: var(--space-6); }
.tl-wordmark {
    align-self: flex-start;
    color: var(--color-white);
    font-family: var(--font-heading);
    /* giant: the header's 30px grown to --text-5xl, and never wider than
       the band (the art is an inline-size container, card.css; 100cqi is
       its width inside the padding, the wordmark about 5.8em wide) */
    font-size: min(var(--text-5xl), calc(100cqi / 6));
    font-weight: var(--font-extrabold, 800);
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.tl-wordmark .toll-wordmark { display: block; }
.tl-wordmark:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: var(--space-1); border-radius: var(--radius-sm); }
.tl-art .tb-card__over { flex: none; }
.tl-title { margin-top: 0; }

/* ---- the white panel: the fields -------------------------------------- */
.tl-card .tl-panel { flex: none; gap: var(--space-4); padding-bottom: var(--space-5); }

.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-size: var(--auth-label-size);
    font-weight: var(--auth-label-weight);
    margin-bottom: var(--space-2);
    color: var(--auth-label-color);
    text-transform: uppercase;
    letter-spacing: var(--auth-label-tracking);
}

.form-input {
    box-sizing: border-box;
    width: 100%;
    height: var(--auth-input-height);
    padding: var(--auth-input-padding);
    border: var(--auth-input-border);
    border-radius: var(--auth-input-radius);
    background: var(--auth-input-bg);
    font-family: var(--font-sans);
    font-size: var(--auth-input-font-size);
    color: var(--auth-input-color);
    transition: var(--duration-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--auth-input-border-focus);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.remember-control { display: flex; align-items: center; gap: var(--space-2); }

.remember-row input[type="checkbox"] {
    width: var(--space-4);
    height: var(--space-4);
    accent-color: var(--accent-primary);
}

.remember-row label {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.forgot-link {
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}

.forgot-link:hover {
    color: var(--text-secondary);
}

/* the green button is the card's own (.tb-card__cta, card.css) */
.tl-card .auth-btn {
    box-sizing: border-box;
    width: 100%;
    border: 0;
    cursor: pointer;
}

/* one quiet line under the button: logging in agrees to the Terms (the
   checkbox itself is Join's) */
.tl-agree {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    text-align: center;
}
.tl-agree a { color: var(--text-secondary); text-decoration: underline; }
.tl-agree a:hover { color: var(--text-primary); }

.sms-login-option { text-align: center; }

.sms-login-link {
    background: none;
    border: none;
    color: var(--highlight-purple);
    font-size: var(--text-sm);
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-sans);
    padding: 0;
}

.auth-footer {
    text-align: center;
    padding-top: var(--space-4);
    border-top: var(--auth-footer-border);
}

.auth-footer p {
    color: var(--auth-footer-text-color);
    font-size: var(--auth-footer-text-size);
}

.auth-footer a {
    color: var(--highlight-purple);
    text-decoration: none;
    font-weight: var(--font-medium);
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* ---- Join (auth/register_phone.html): the same card ------------------- */
.tl-art .tb-card__top { position: relative; z-index: 1; }
.tl-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    opacity: 0.82;
}
.tl-back:hover,
.tl-back:focus-visible { opacity: 1; }
.tl-back svg { width: var(--space-4); height: var(--space-4); }
.tl-note { margin: 0; color: var(--color-white); font-size: var(--text-sm); font-style: italic; opacity: 0.82; }

.progress-steps {
    display: flex;
    justify-content: center;
    align-items: center;
}
.progress-step { display: flex; align-items: center; }
.progress-step__circle {
    width: calc(var(--space-6) + var(--space-1));
    height: calc(var(--space-6) + var(--space-1));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.progress-step--active .progress-step__circle {
    background: var(--accent);
    color: var(--color-white);
    border-color: var(--accent);
}
.progress-step__line {
    width: var(--space-10);
    height: calc(var(--space-1) / 2);
    background: var(--border-color);
}

.phone-input-wrapper { display: flex; gap: var(--space-2); }
.country-code {
    flex: none;
    width: calc(var(--space-16) + var(--space-2));
    text-align: center;
    background: var(--bg-secondary);
}
.phone-number { flex: 1; min-width: 0; }

.password-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--status-error);
    margin-top: var(--space-2);
    display: none;
}
.form-error--visible { display: block; }

/* the Terms checkbox: required, on Join only */
.opt-in-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}
.opt-in-row input[type="checkbox"] {
    width: calc(var(--space-4) + var(--space-1));
    height: calc(var(--space-4) + var(--space-1));
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.opt-in-row label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: pointer;
}
.opt-in-row a { color: var(--highlight-purple); text-decoration: underline; }

.auth-agree {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}
.auth-agree a { color: var(--text-secondary); text-decoration: underline; }
.auth-agree a:hover { color: var(--text-primary); }

.tl-card .auth-btn--create-account { background: var(--highlight-purple); color: var(--color-white); }
.tb-card .auth-btn--create-account:hover,
.tb-card .auth-btn--create-account:focus-visible { color: var(--color-white); }

/* ---- the back: the code (Steven 2026-10-13 night) ---------------------
   Asking for a login code turns the login card over (auth/login.html, the
   code side; /login/verify-code draws it already turned). The back is the
   same card: the night band with the giant wordmark, Back on its top,
   "Enter your code" and the line saying where the code went; then the white
   panel with the 6-digit field, the expiry, the green Verify, Try again. */
.tl-code {
    height: var(--size-14);
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    letter-spacing: var(--space-3);
    text-align: center;
}
.tl-code::placeholder { letter-spacing: var(--space-2); }
.tl-hint {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: center;
}
.tl-sent { overflow-wrap: anywhere; }
/* the back's band is taller than the front's (its panel is shorter), so its
   square night art covers the band, the larger side wins, instead of
   leaving a dark strip above and below */
.tl-face--code .tb-card__bg svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(1.18);
}
.tl-error {
    margin: 0 0 var(--space-3);
    color: var(--status-error);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    text-align: center;
}
.tl-error[hidden] { display: none; }
.sms-login-option .tl-error { margin: var(--space-2) 0 0; }

/* ---- THE LOGIN ART CLIPS (Steven 2026-10-14: "why is this [not] an
   animation, at a minimum it should be a funny gif"; templates/auth/
   _login_art.html, static/cards/login-art.js): the cat on the Log in card,
   the pig on Join. The loop sits over the band's drawing and under its
   shade and words, like object-fit: cover with the face in the upper
   middle (clear of the wordmark above and the title below; the kit's
   manifest gives the position). It fades in over the drawing once its
   poster has loaded. ------------------------------------------------- */
.tl-clip {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    background: transparent;
    opacity: 0;
    transition: opacity var(--duration-slow, 0.5s) ease;
    pointer-events: none;
}
.tl-clip[hidden] { display: none; }
.tl-clip.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .tl-clip { transition: none; }
}

/* ---- THE WHOLE CLIP, ON A PHONE FIRST (Steven 2026-10-15, on his iPhone: "you
   can't actually see our funny cat meme on this page") --------------------
   The clips are 9:16 and the phone's art band is nearly square (and a
   tablet's or a desktop's wider than tall: cover cut the paws and the keyboard
   off at 600, 768 and 1280 too, so this holds at every width), so cover
   zoomed into the cat's head, the dark shade hid the rest and the title sat
   on its face. On a phone the band is a column instead: the wordmark (and
   Back) on top, then the clip IN THE FLOW at its own aspect, object-fit:
   contain on black, the whole frame and no shade over the animal, then the
   title and its line as a band directly under the clip, above the fields.
   The video stays first in the markup (the drawing under it, the words
   after); order puts it between. A band without a clip (LOGIN_ART_CLIPS
   off, a kit missing a file) keeps the old layout (:has). The clip takes
   the height the white panel leaves, never under --tl-clip-min (the page
   then grows a little) and never taller than its own 9:16 at the band's
   width. Its space is kept while the poster loads, so nothing jumps. ---- */
.tl-card .tl-art:has(> .tl-clip) {
    --tl-clip-min: max(260px, 44svh);
    justify-content: flex-start;
    gap: var(--space-3);
}
.tl-art:has(> .tl-clip) > .tb-card__top { order: 0; }
.tl-art:has(> .tl-clip) > .tl-wordmark { order: 1; }
.tl-art:has(> .tl-clip) > .tl-clip,
.tl-art:has(> .tl-clip) > .tl-clip[hidden] {
    order: 2;
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    flex: 1 1 0;
    align-self: stretch;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: var(--tl-clip-min);
    max-height: calc(100cqi * 946 / 540);
    margin-inline: calc(var(--space-5) * -1);
    object-fit: contain;
    object-position: 50% 50% !important;
    background: var(--color-black);
}
.tl-art:has(> .tl-clip) > .tl-clip[hidden] { visibility: hidden; }
.tl-art:has(> .tl-clip) > .tb-card__shade { display: none; }
.tl-art:has(> .tl-clip) > .tb-card__over { order: 3; flex: none; margin-top: 0; justify-content: flex-start; }