/* The sign-in and sign-up screens: a split screen with the form on the left and the product
   pitch on the right.

   Global rather than scoped to a component, because three things share it — the sign-up
   screen, the sign-in page and the pitch panel itself — and Blazor's scoped CSS reaches only
   the one component a file is named after. */

/* The sign-up page is a split screen: the form on the left and the pitch on the right. The
   two halves scroll independently, because the form is long and the pitch is not — tying them
   together would push the product preview off the top before the form was half filled in. */

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    background: #fff;
}

.auth-form-side {
    display: flex;
    justify-content: center;
    padding: 2.75rem 2rem 3rem;
    overflow-y: auto;
}

.auth-inner {
    width: 100%;
    max-width: 560px;
}

/* ---- Brand and heading ---------------------------------------------------------------- */

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #12314f;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}

.brand-name {
    font-size: 1.65rem;
    font-weight: 700;
    color: #12314f;
    letter-spacing: -0.01em;
}

.eyebrow {
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a9bad;
}

.auth-title {
    margin: 0 0 0.6rem;
    text-align: center;
    font-size: 2.1rem;
    font-weight: 600;
    color: #12314f;
    letter-spacing: -0.02em;
}

.auth-lede {
    margin: 0 auto 1.4rem;
    max-width: 440px;
    text-align: center;
    font-size: 0.92rem;
    color: #64748b;
}

/* ---- The three assurances ------------------------------------------------------------- */

.assurances {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    list-style: none;
    background: #f1f8f5;
    border: 1px solid #d8ece2;
    border-radius: 12px;
}

.assurances li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #2f5c48;
}

.assurances li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #12876f;
}

/* ---- The form ------------------------------------------------------------------------- */

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
    margin-bottom: 1.15rem;
}

.plan-pick { margin-bottom: 1.15rem; }

.plan-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    margin-top: 0.35rem;
}

.plan-choice {
    display: block;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid #dbe3ec;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.plan-choice:hover { border-color: #9fd3c8; }

/* The radio itself is off screen rather than hidden, so it is still reachable by keyboard
   and still announced — the whole card is its label. */
.plan-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-choice:has(input:checked) {
    border-color: #12876f;
    background: #f1f8f5;
}

.plan-choice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(18, 135, 111, 0.18);
}

.plan-body { display: grid; gap: 0.1rem; }
.plan-name { font-size: 0.88rem; font-weight: 700; color: #12314f; }
.plan-price { font-size: 0.82rem; color: #475569; }
.plan-per { color: #94a3b8; }

/* ---- No card required ----------------------------------------------------------------- */

.no-card {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.15rem;
    padding: 0.8rem 0.95rem;
    background: #f1f8f5;
    border: 1px solid #d8ece2;
    border-radius: 12px;
}

.no-card-tick {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #12876f;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

.no-card span strong { display: block; font-size: 0.86rem; color: #12314f; }
.no-card span { font-size: 0.8rem; color: #4b6b5e; line-height: 1.4; }

/* ---- Actions -------------------------------------------------------------------------- */

.auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.btn-trial,
.btn-back {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.btn-trial {
    border: 1.5px solid #12876f;
    background: #16a085;
    color: #fff;
}

.btn-trial:hover { background: #12876f; }

.btn-back {
    border: 1.5px solid #dbe3ec;
    background: #fff;
    color: #12876f;
}

.btn-back:hover { background: #f1f8f5; border-color: #9fd3c8; }

/* ---- The pitch ------------------------------------------------------------------------ */

.auth-pitch {
    position: relative;
    overflow: clip;
    display: flex;
    /* Top-aligned rather than centred: the form beside it is long, and centring against it
       left the pitch stranded in the middle of an empty navy column. Sticky so it stays with
       the reader while they work down the form. */
    align-items: flex-start;
    padding: 4.5rem 2.75rem 3.25rem;
    background: linear-gradient(150deg, #12314f 0%, #184a63 55%, #1d6b73 100%);
    color: #fff;
}

/* The soft disc behind the content, which is what keeps the gradient from reading as a flat
   block of colour. */
.auth-pitch::before {
    content: "";
    position: absolute;
    top: -22%;
    right: -18%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.pitch-inner {
    position: sticky;
    top: 4.5rem;
    max-width: 620px;
}

.eyebrow-light {
    margin: 0 0 0.75rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8fd4cd;
}

.pitch-title {
    margin: 0 0 0.85rem;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.pitch-lede {
    margin: 0 0 2.25rem;
    max-width: 30rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: #c5d9e2;
}

/* ---- The drawn product preview --------------------------------------------------------- */

.preview {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 60px rgba(4, 20, 35, 0.35);
}

.preview-chrome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.8rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.preview-chrome > span:not(.preview-brand) {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
}

.preview-brand {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.04em;
}

.preview-body { padding: 0.9rem 1rem 1.1rem; }

.preview-head {
    margin-bottom: 0.7rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #12314f;
}

.preview-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.tile {
    display: grid;
    gap: 0.08rem;
    padding: 0.5rem 0.55rem;
    border-radius: 9px;
    color: #fff;
}

.tile-label { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.85; }
.tile-value { font-size: 0.82rem; font-weight: 700; }
.tile-foot { font-size: 0.54rem; opacity: 0.8; }

.tile-red { background: #b42318; }
.tile-blue { background: #1d4ed8; }
.tile-green { background: #15803d; }
.tile-amber { background: #b45309; }

.preview-table { width: 100%; border-collapse: collapse; }

.preview-table td {
    padding: 0.32rem 0.2rem;
    font-size: 0.6rem;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}

.preview-table td:first-child { font-weight: 600; color: #12314f; }
.preview-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- The two floating badges ------------------------------------------------------------ */

.float-badge {
    position: absolute;
    display: grid;
    gap: 0.05rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(4, 20, 35, 0.28);
    font-size: 0.68rem;
    color: #64748b;
}

.badge-strong { font-size: 0.78rem; font-weight: 700; color: #12314f; letter-spacing: 0.02em; }

.badge-trial { top: 10.5rem; right: -0.75rem; }
.badge-secure { bottom: -0.9rem; left: -1.5rem; }

/* ---- Narrow ----------------------------------------------------------------------------- */

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

    /* The pitch leads on a phone, then the form. Putting a tall marketing panel above a long
       form on a narrow screen would bury the thing somebody came to do. */
    .auth-pitch { order: -1; padding: 2.25rem 1.5rem 3rem; }
    .pitch-title { font-size: 1.9rem; }
    .float-badge { display: none; }
}

@media (max-width: 620px) {
    .auth-form-side { padding: 2rem 1.25rem 2.5rem; }
    .assurances { grid-template-columns: 1fr; gap: 0.4rem; }
    .field-grid { grid-template-columns: 1fr; }
    .auth-actions { grid-template-columns: 1fr; }
    .auth-title { font-size: 1.7rem; }
}

/* ---- Resend and the foot link ----------------------------------------------------------- */

.resend-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef2f6;
}

.resend-form .form-control { flex: 1; min-width: 0; }

.link-button {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.82rem;
    font-weight: 700;
    color: #12876f;
    cursor: pointer;
    white-space: nowrap;
}

.link-button:hover { text-decoration: underline; }

.signup-foot {
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
}

.signup-foot a { color: #12876f; font-weight: 700; text-decoration: none; }
.signup-foot a:hover { text-decoration: underline; }

@media (max-width: 620px) {
    .resend-form { flex-direction: column; align-items: stretch; }
    .link-button { text-align: center; }
}

/* ---- The rotating banner ---------------------------------------------------------------- */

/* Each message is stacked on the same spot and the animation decides which is visible, so the
   panel does not resize as it turns. The height is reserved by the tallest message rather than
   measured, because measuring needs script and these pages have none. */
.pitch-banner {
    position: relative;
    min-height: 13.5rem;
    margin-bottom: 1.25rem;
}

.pitch-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: pitch-cycle var(--dwell, 18s) infinite;
}

/* The first message is painted before the animation has run a frame, so the panel is never
   momentarily blank. */
.pitch-slide:first-child { opacity: 1; }

.pitch-slide .pitch-title { margin-bottom: 0.85rem; }
.pitch-slide .pitch-lede { margin-bottom: 0; }

/* Each message fades up, holds, and fades away. The hold is the bulk of its share of the
   cycle; the crossfade is deliberately quick, because a slow one reads as a page still
   loading rather than as a banner turning. */
@keyframes pitch-cycle {
    0% { opacity: 0; transform: translateY(0.6rem); }
    2% { opacity: 1; transform: none; }
    30% { opacity: 1; transform: none; }
    33% { opacity: 0; transform: translateY(-0.6rem); }
    100% { opacity: 0; transform: translateY(0.6rem); }
}

.pitch-dots {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.pitch-dots li {
    width: 1.5rem;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    animation: pitch-dot var(--dwell, 18s) infinite;
}

.pitch-dots li:first-child { background: rgba(255, 255, 255, 0.75); }

@keyframes pitch-dot {
    0%, 2% { background: rgba(255, 255, 255, 0.75); }
    33% { background: rgba(255, 255, 255, 0.22); }
    100% { background: rgba(255, 255, 255, 0.22); }
}

/* Somebody who has asked for less motion gets the first message and nothing moving. A banner
   is not worth overriding that for. */
@media (prefers-reduced-motion: reduce) {
    .pitch-slide,
    .pitch-dots li { animation: none; }

    .pitch-slide { opacity: 0; }
    .pitch-slide:first-child { opacity: 1; }
}

/* ---- Sign-in, which uses the same screen with a shorter form ----------------------------- */

.auth-inner-narrow { max-width: 420px; }

.field-stack {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1.15rem;
}

.auth-actions-single { grid-template-columns: 1fr; }

/* ---- Consent ticks ---------------------------------------------------------------------- */

.consents {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1.15rem;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.84rem;
    line-height: 1.4;
    color: #475569;
    cursor: pointer;
}

.consent input {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    accent-color: #12876f;
    cursor: pointer;
}

.consent a { color: #12876f; font-weight: 600; }