/* Login-gate specific styles -- design tokens (--fad-*) come from ../docs/docs.css, shared across
   this whole project so the login page and the docs page never look like two different products. */

.fal-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fad-bg);
    color: var(--fad-text);
    font-family: var(--fad-font-body);
    padding: 2rem 1rem;
}

.fal-shell { width: 100%; max-width: 420px; }

.fal-card {
    background: var(--fad-surface);
    border: 1px solid var(--fad-border);
    border-radius: 12px;
    box-shadow: var(--fad-shadow);
    padding: 2rem;
}

.fal-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--fad-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}
.fal-brand-logo { width: 32px; height: 32px; color: var(--fad-primary); flex: none; }
.fal-brand-mark { color: var(--fad-primary); }
.fal-brand-rest { color: var(--fad-text); }

.fal-lede {
    color: var(--fad-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
}

.fal-form { display: flex; flex-direction: column; gap: 1rem; }
.fal-form-hidden { display: none; }

.fal-form-group { display: flex; flex-direction: column; gap: 0.35rem; }

.fal-form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fad-text-muted);
}

.fal-form-input {
    border: 1px solid var(--fad-border);
    background: var(--fad-surface-alt);
    color: var(--fad-text);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
}
.fal-form-input:focus {
    outline: none;
    border-color: var(--fad-primary);
    box-shadow: 0 0 0 3px var(--fad-primary-soft);
}

.fal-code-input {
    font-family: var(--fad-font-mono);
    font-size: 1.4rem;
    letter-spacing: 0.4rem;
    text-align: center;
}

.fal-verify-note {
    font-size: 0.85rem;
    color: var(--fad-text-muted);
    margin: 0;
    line-height: 1.5;
}

.fal-btn {
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.fal-btn-primary { background: var(--fad-primary); color: #fff; }
.fal-btn-primary:hover { background: var(--fad-primary-dark); }
.fal-btn-primary:disabled { opacity: 0.6; cursor: default; }
.fal-btn-ghost { background: transparent; color: var(--fad-primary); border: 1px solid var(--fad-border); }
.fal-btn-ghost:hover { background: var(--fad-surface-alt); }
.fal-btn-link { background: none; color: var(--fad-text-muted); padding: 0.25rem; text-decoration: underline; }

.fal-footnote {
    margin: 1.5rem 0 0;
    font-size: 0.78rem;
    color: var(--fad-text-muted);
    line-height: 1.5;
    border-top: 1px solid var(--fad-border);
    padding-top: 1rem;
}

/* =============================================================================
   The split layout added around the form.

   The form itself, and .fal-card, are unchanged -- login.js drives a two-step flow through fixed
   element ids and this file must not move them. What is new is the brand panel beside it, which
   exists because a bare credential box told a developer nothing about what the API covers or how
   machine authentication works, which is the first thing they need.

   ALL MOTION IS CSS AND ALL OF IT IS SUPPRESSED under prefers-reduced-motion at the foot. A docs
   login must not wait on a script to become usable.
   ========================================================================== */

.fal-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

/* ---------------------------------------------------------------- brand side */

.fal-brandside {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #08110f;
    color: #f2f6f5;
    padding: clamp(2rem, 4vw, 3.25rem);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    justify-content: space-between;
}

.fal-brandside::before,
.fal-brandside::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.fal-brandside::before {
    inset: -35% -20% auto -20%;
    height: 95%;
    background:
        radial-gradient(45% 55% at 22% 28%, rgba(24, 184, 166, .2), transparent 70%),
        radial-gradient(40% 50% at 78% 12%, rgba(127, 216, 204, .12), transparent 70%);
    animation: fal-drift 28s ease-in-out infinite alternate;
}

.fal-brandside::after {
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(127, 216, 204, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(127, 216, 204, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 80%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 80%);
    animation: fal-grid 44s linear infinite;
}

@keyframes fal-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.1); }
}

@keyframes fal-grid {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 44px 0, 0 44px; }
}

/* align-self, because this is a flex COLUMN: its cross axis is the width, and the default
   align-items:stretch would pull a 3.3:1 lockup out to the panel width at a fixed height. */
.fal-lockup {
    height: 62px;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    display: block;
    flex: none;
}

.fal-brandcopy { max-width: 34rem; }

.fal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--fad-font-mono, ui-monospace, monospace);
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #7fd8cc;
    margin-bottom: .8rem;
}

.fal-eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #18b8a6;
    animation: fal-pulse 2.4s ease-out infinite;
}

@keyframes fal-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(24, 184, 166, .55); }
    70%  { box-shadow: 0 0 0 11px rgba(24, 184, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(24, 184, 166, 0); }
}

.fal-brandcopy h1 {
    color: #f2f6f5;
    font-size: clamp(1.55rem, 1rem + 1.4vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 .8rem;
}

.fal-brandcopy > p {
    color: #a9c0bb;
    font-size: .98rem;
    line-height: 1.6;
    margin: 0;
}

.fal-cover {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem 1.25rem;
}

.fal-cover li {
    position: relative;
    padding-left: 1.05rem;
    font-size: .86rem;
    line-height: 1.45;
    color: #a9c0bb;
}

.fal-cover li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #18b8a6;
}

.fal-snippet {
    margin: 1.6rem 0 0;
    border: 1px solid #1b2c28;
    border-radius: 12px;
    background: rgba(6, 14, 12, .72);
    overflow: hidden;
}

.fal-snippet figcaption {
    padding: .6rem .9rem;
    border-bottom: 1px solid #1b2c28;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6f8783;
}

.fal-snippet pre {
    margin: 0;
    padding: .9rem;
    overflow-x: auto;
}

.fal-snippet code {
    font-family: var(--fad-font-mono, ui-monospace, monospace);
    font-size: .78rem;
    line-height: 1.65;
    color: #cfe3df;
    white-space: pre;
}

.fal-brandfoot {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: #6f8783;
}

.fal-brandfoot strong { color: #a9c0bb; }

/* ---------------------------------------------------------------- form side */

.fal-formside {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
}

/* The shell rule this replaces centred the card in the viewport; inside the grid the cell does
   that, so the card only needs its width back. */
.fal-formside .fal-card {
    width: 100%;
    max-width: 27rem;
    margin: 0;
}

.fal-form-input {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fal-form-input:focus {
    box-shadow: 0 0 0 4px rgba(24, 184, 166, .16);
    transform: translateY(-1px);
}

.fal-btn-primary {
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.fal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(24, 184, 166, .26);
    filter: brightness(1.05);
}

.fal-btn-primary:active { transform: translateY(0); }

/* Staggered so the panel reads top to bottom; the last item lands at 240ms. */
.fal-rise { animation: fal-riseIn .5s cubic-bezier(.2, .7, .3, 1) both; }
.fal-rise:nth-child(1) { animation-delay: .02s; }
.fal-rise:nth-child(2) { animation-delay: .08s; }
.fal-rise:nth-child(3) { animation-delay: .14s; }
.fal-rise:nth-child(4) { animation-delay: .2s; }
.fal-rise:nth-child(5) { animation-delay: .24s; }

@keyframes fal-riseIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 980px) {
    .fal-split { grid-template-columns: 1fr; }

    /* The panel becomes a header rather than vanishing: on a phone it is the only thing saying
       which API this is. The endpoint list and the curl block go -- a pre block cannot be made to
       read well at 390px and it is not what somebody signing in on a phone needs. */
    .fal-brandside {
        padding: 1.5rem 1.25rem 1.75rem;
        gap: 1.1rem;
    }

    .fal-cover,
    .fal-snippet,
    .fal-brandfoot { display: none; }

    .fal-lockup { height: 40px; }
    .fal-brandcopy h1 { font-size: 1.35rem; }
    .fal-brandcopy > p { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fal-brandside::before,
    .fal-brandside::after,
    .fal-eyebrow i { animation: none; }

    .fal-rise { animation: none; opacity: 1; transform: none; }

    .fal-form-input,
    .fal-btn-primary { transition: none; }

    .fal-form-input:focus,
    .fal-btn-primary:hover { transform: none; }
}

/* --- corrections found by looking at the rendered page ---------------------- */

/* .fal-body is a centring flex box with 2rem of padding, which was right when the page was one
   card floating in the middle. Inside the split it left a pale border down every edge and stopped
   the dark panel reaching the corners. */
.fal-body:has(.fal-split) {
    display: block;
    padding: 0;
    align-items: stretch;
}

/* The card's brand line was set at 1.4rem for "FleetMgtSystem API". At "Fleet Management System
   API" that wrapped to two ragged lines beside a 32px mark. Smaller, left-aligned, and the API
   label moved onto its own line as a tag rather than being part of the name. */
.fal-formside .fal-brand {
    justify-content: flex-start;
    align-items: center;
    font-size: 1.02rem;
    line-height: 1.2;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.fal-formside .fal-brand-logo { width: 26px; height: 26px; }

.fal-formside .fal-brand-rest {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* "API" as a chip after the name, so the product name reads as the product name. */
.fal-formside .fal-brand::after {
    content: "API";
    font-family: var(--fad-font-mono, ui-monospace, monospace);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    padding: .12rem .38rem;
    border: 1px solid var(--fad-border);
    border-radius: 5px;
    color: var(--fad-muted, #6b7280);
}