/*
 * The sign up, log in and onboarding pages. Bump the version in
 * OnboardingStylesheet (cmd/web/components/stylesheets.go) whenever this file
 * changes.
 */

:root {
    --ease-out: cubic-bezier(.2, .7, .3, 1);
}

/* Frame (split.Shell): the 640 px form panel on the left, the right side beside it. */
.split {
    display: flex;
    min-height: 100vh;
}
.split-form {
    width: 640px;
    flex: 0 0 640px;
    background: var(--tblr-bg-surface);
    border-right: 1px solid var(--tblr-border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
}
.form-head {
    padding: 1.5rem 2.5rem 0;
}
.form-logo {
    height: 24px;
    width: auto;
}
.form-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 2.5rem 2.5rem;
}
.form-foot {
    border-top: 1px solid var(--tblr-border-color);
    padding: .875rem 2.5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--tblr-bg-surface);
}
.split-side {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 3rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: background-color .5s ease;
}
.split-side-inner {
    width: 100%;
    max-width: 38rem;
}
/* Give the plan comparison more room than the other previews. */
.split-side-inner:has(#preview-side[data-panel="plan"]) {
    max-width: 60rem;
}
/* Without centered, the right side starts level with the form title. */
.split-side:not(.centered) {
    padding-top: 7.5rem;
}
/* Auto margins drop to 0 when the content is taller than the screen, so it can scroll. */
.split-side.centered .split-side-inner {
    margin: auto 0;
}
@media (min-width: 992px) {
    /* The split fills the height under the impersonation banner, so the footer bar stays on screen. */
    body:has(> .split) {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    body > .split {
        flex: 1 1 0;
        min-height: 0;
    }
    body > .split > .split-form,
    body > .split > .split-side {
        height: auto;
        position: static;
    }
    /* Phones keep the form at the top, where it stays above the keyboard. */
    .form-body.centered {
        display: flex;
        flex-direction: column;
    }
    .form-body.centered > .body-inner {
        margin: auto 0;
    }
}
@media (max-width: 991.98px) {
    .split {
        display: block;
    }
    .split-form {
        width: auto;
        height: auto;
        min-height: 100vh;
        position: static;
        border-right: 0;
    }
    .form-head,
    .form-body,
    .form-foot {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .form-foot {
        position: sticky;
        bottom: 0;
    }
}

/* Auth pages */
.auth-switch {
    margin-top: 2rem;
    text-align: center;
    color: var(--tblr-secondary);
}
/* The log out buttons of the code forms look like the links beside them. */
.auth-switch .btn-link {
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
/* The cards of the form panel are not links, so they keep Tabler's own
   shadow, not dashboard.css's hover lift. */
.split-form .card.card-sm,
.split-form .card.card-sm:hover {
    box-shadow: var(--tblr-card-box-shadow) !important;
}
/* Icons in a line of text, and in buttons, are the size of the text. */
.split-form .btn {
    --tblr-btn-icon-size: 1rem;
}
.auth-switch .icon,
.split-form .input-group-text .icon,
.split-form .alert .icon {
    --tblr-icon-size: 1rem;
    vertical-align: -.125rem;
}
.auth-switch .icon {
    margin-right: .25rem;
}
.auth-switch .btn-link .icon {
    margin: 0 .25rem 0 0;
}
/* Code field: one field for the whole six-digit code, with space between
   the digits so the code is easy to check. The text-indent balances the
   space after the last digit, so the code sits in the middle. The message
   under the field explains an error, so the field has no error icon. */
.code-input,
.code-input.is-invalid {
    text-align: center;
    letter-spacing: .3em;
    text-indent: .3em;
    font-size: 1.25rem;
    font-weight: 600;
    padding-right: 1.5rem;
    background-image: none;
}
/* The example code is light, so it does not look like a code already typed. */
.code-input::placeholder {
    font-weight: 400;
}
.auth-foot {
    font-size: .8125rem;
    color: var(--tblr-secondary);
}
.auth-foot a {
    color: var(--tblr-secondary);
}
/* The first letter of the account's name, in place of its logo. */
.letter-logo {
    font-size: 1.125rem;
    font-weight: 600;
}

/* What's new */
.split-caption {
    margin-bottom: 1rem;
}
.split-caption .eyebrow {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--tblr-secondary);
}
a.news-link {
    color: inherit;
    text-decoration: none;
}
a.news-link:hover .news-title {
    color: var(--tblr-primary);
}
.news-cover {
    display: block;
    width: 100%;
    aspect-ratio: 2.1 / 1;
    object-fit: cover;
    background: var(--tblr-bg-surface-secondary);
}
/* The post's text is cut to three lines, and each changelog entry's text to two. */
.news-text,
.cl-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.cl-text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
/* The icons of the changelog card's header are the size of its text. */
.news-changelog .card-header .icon {
    --tblr-icon-size: 1em;
    vertical-align: -.125em;
}
.cl-tag {
    font-size: .6875rem;
    min-width: 4.75rem;
    text-align: center;
    flex: 0 0 auto;
    align-self: center;
}

/* Onboarding steps. The step counter sits on the logo row, and the progress
   bar under it. */
.form-head:has(> .step-counter) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.step-counter {
    margin-left: auto;
    font-size: .875em;
    color: var(--tblr-secondary);
}
/* Progress bar: one group per group of steps, one segment per step. */
.step-bar {
    flex: 0 0 100%;
    display: flex;
    gap: .25rem;
    margin-top: 1.5rem;
}
.step-group {
    flex: 1;
    min-width: 0;
}
.step-group-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--tblr-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .375rem;
    transition: color .3s ease;
}
.step-group-label .icon {
    --tblr-icon-size: .875rem;
    vertical-align: -.125rem;
}
.step-group.active .step-group-label {
    color: var(--tblr-primary);
}
.step-group.done .step-group-label {
    color: var(--tblr-green);
}
.step-segments {
    display: flex;
    gap: .25rem;
}
.step-segment {
    flex: 1;
    height: .25rem;
    border-radius: 1rem;
    background: var(--tblr-border-color);
    position: relative;
    overflow: hidden;
}
/* The color is a layer that grows from the left. */
.step-segment::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--tblr-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-out), background-color .3s ease;
}
.step-segment.active::after {
    transform: scaleX(1);
}
.step-segment.done::after {
    transform: scaleX(1);
    background: var(--tblr-green);
}
.step-segment.skipped {
    background: repeating-linear-gradient(90deg, var(--tblr-border-color) 0 4px, transparent 4px 7px);
}

/* Questions of the step forms */
.q {
    margin-bottom: 1.75rem;
}
.q:last-child {
    margin-bottom: 0;
}
.q-label {
    font-weight: 600;
    margin-bottom: .5rem;
    display: block;
}
.q-hint {
    color: var(--tblr-secondary);
    font-size: .875rem;
    margin: -.25rem 0 .5rem;
}
.choice-grid {
    display: grid;
    gap: .5rem;
}
.choice-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.form-selectgroup.choice-grid {
    margin: 0;
}
.choice-grid .form-selectgroup-item {
    margin: 0 !important;
    min-width: 0;
}
.choice-grid .form-selectgroup-label {
    height: 100%;
    text-align: left;
}
.form-selectgroup-check {
    flex: 0 0 auto;
}
/* The plans of the Plan step, one under the other. */
.form-selectgroup.plan-list {
    margin: 0;
}
.plan-list .form-selectgroup-item {
    margin: 0 !important;
    width: 100%;
}
/* Three boxes in a row do not fit a phone, so they stack. */
@media (max-width: 575.98px) {
    .choice-grid.stack-sm {
        grid-template-columns: 1fr;
    }
}
/* Back and up to two more buttons fit the footer bar of a phone. */
@media (max-width: 575.98px) {
    .form-foot .btn {
        padding-left: .625rem;
        padding-right: .625rem;
    }
    .form-foot .btn-link {
        padding-left: .375rem;
        padding-right: .375rem;
    }
}
@media (max-width: 399.98px) {
    .form-foot .btn .icon {
        display: none;
    }
}

/* Icons in a line of small text are the size of the text. */
.split-form .small > .icon,
.split-side .small > .icon {
    --tblr-icon-size: 1em;
    vertical-align: -.125em;
    margin-right: .25rem;
}
/* The company card: the logo, the account name and the website, then their
   fields. The gap above the fields goes with the row, so a hidden row leaves
   none. */
.company-row {
    display: flex;
    align-items: center;
}
/* A logo keeps its shape: a wide logo is as tall as the letter that stands in
   for a missing one, and at most 7rem wide. */
.brand-logo {
    height: 2.5rem;
    width: auto;
    max-width: 7rem;
    object-fit: contain;
    border-radius: var(--tblr-border-radius);
}
/* Without JavaScript nothing runs a lookup or opens a folded part, so these
   classes show what a script would show, and hide what only a script uses.
   They win over the display: none that the server draws for the first paint
   with JavaScript. */
@media (scripting: none) {
    .nojs-hidden {
        display: none !important;
    }
    .nojs-shown {
        display: block !important;
    }
    .company-row.nojs-shown {
        display: flex !important;
    }
}
/* The check result's icon is the size of its text. */
.company-row .small .icon {
    --tblr-icon-size: 1em;
    vertical-align: -.125em;
    margin-right: .125rem;
}
/* The icon of an alert is a little larger than its text, as Tabler draws it. */
.split-form .alert-icon .icon {
    --tblr-icon-size: 1.25rem;
}

/* The first letter of the account's name, in place of its logo. The page
   sets its colors: the brand's primary color and the primary text color. */
.brand-letter {
    font-weight: 700;
    transition: background-color .4s ease, color .4s ease;
}

/* Right side of the step pages. Each panel sits in the same grid cell, so on a
   step change to another panel the old one fades out while the new one fades
   in, in the same place. */
.panel-stack {
    display: grid;
}
.panel-stack > * {
    grid-area: 1 / 1;
    min-width: 0;
}
.panel-fade {
    transition: opacity .22s ease;
}
.panel-hidden {
    opacity: 0;
}

/* The toast of the step pages, over the middle of the form panel. */
.step-toast {
    position: fixed;
    left: 320px;
    bottom: 5rem;
    z-index: 1100;
    transform: translateX(-50%);
    width: max-content;
    max-width: 37.5rem;
}
@media (max-width: 991.98px) {
    .step-toast {
        left: 50%;
        max-width: calc(100vw - 2rem);
    }
}
/* Tabler's alert color lets the page show through; here it lies over the
   surface color, so the text under the toast does not show. */
.step-toast .alert {
    --step-toast-bg: color-mix(in srgb, var(--tblr-alert-bg), var(--tblr-bg-surface));
    background-color: var(--tblr-bg-surface);
    background-image: linear-gradient(var(--step-toast-bg), var(--step-toast-bg));
    animation: pop .22s var(--ease-out) both;
}
/* In dark mode the alert color is the color of the form panel, and a shadow
   does not show, so the toast takes a lighter gray and a border. */
[data-bs-theme=dark] .step-toast .alert {
    --step-toast-bg: var(--tblr-gray-700);
    border-color: var(--tblr-gray-600);
}
.step-toast .icon {
    --tblr-icon-size: 1rem;
    vertical-align: -.125rem;
}

/* Right side of the step pages: the example email. An email is light in
   dark mode too, so .mail carries data-bs-theme="light" for the colors of its
   parts, and sets the text color itself, which text would otherwise inherit
   from the dark page. */
.mail {
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(24, 36, 51, .14);
    background: #fff;
    color: var(--tblr-body-color);
}
.mail-chrome {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem .875rem;
    background: #f1f3f5;
    border-bottom: 1px solid #e6e8eb;
}
.mail-chrome .dot {
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    display: inline-block;
    background: #d0d5db;
}
.mail-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem .5rem;
}
.mail-subject {
    padding: 0 1.25rem .875rem;
    font-weight: 600;
    font-size: 1.0625rem;
}
.mail-body {
    background: #f4f6f8;
    padding: 1.5rem;
}
.mail-card {
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    max-width: 30rem;
    margin: 0 auto;
}
.mail-bar {
    padding: .875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}
.mail-cta {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: .375rem;
    font-weight: 600;
}
.mail-bar,
.mail-cta {
    transition: background-color .4s ease, color .4s ease;
}
.mail-logo {
    height: 2rem;
    width: auto;
    max-width: 6rem;
    object-fit: contain;
    border-radius: var(--tblr-border-radius);
}
.mail-placeholder {
    height: 8rem;
}
/* On Company, grey lines take the place of the example email's text. A line
   takes the color of the text it replaces. */
.mail-line {
    display: block;
    height: 1em;
    border-radius: .25rem;
    background-color: currentColor;
    opacity: .25;
}
.mail-line-title {
    height: 1.2em;
    opacity: .35;
}
.mail-cta .mail-line {
    display: inline-block;
    width: 6rem;
    opacity: .6;
    vertical-align: middle;
}
/* On Domain, the domain in the sender line is highlighted. */
.hl {
    background: #fff3bf;
    border-radius: .25rem;
    padding: 0 .125rem;
    transition: background .6s;
}
.mono {
    font-family: var(--tblr-font-monospace);
    font-size: .8125rem;
}
/* The brand colors, under the example email on Company. */
.brand-swatches {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
    margin-top: 1rem;
}
.swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .25rem;
    border: 1px solid rgba(0, 0, 0, .08);
    display: inline-block;
}
/* The icons of the About you panel. */
.about-icon .icon {
    --tblr-icon-size: 1.5rem;
}

/* DNS records: the records card. Each record shows its name and value, each
   with a copy button; the optional records fold under their row. */
.rec-grid {
    display: grid;
    grid-template-columns: 3.25rem 1fr auto;
    gap: .125rem .5rem;
    align-items: center;
}
.rec-grid .rec-key {
    font-size: .75rem;
    color: var(--tblr-secondary);
}
.rec-grid .mono {
    word-break: break-all;
}
.rec-what {
    font-size: .8125rem;
    color: var(--tblr-secondary);
    margin: -.375rem 0 .5rem;
}
.opt-toggle {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: left;
    color: inherit;
}
.opt-toggle:hover {
    background: var(--tblr-bg-surface-tertiary, #eef1f4);
}
.opt-toggle .icon {
    transition: transform .25s ease;
}
.opt-toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}
/* The link to the DNS host's guide, and the link to its DNS page: the icons
   are the size of the text, with a gap on the side of the text. */
.dns-guide .icon {
    --tblr-icon-size: 1rem;
    vertical-align: -.125rem;
}
.dns-guide .icon:first-child {
    margin-right: .25rem;
}
.dns-guide .icon:last-child {
    margin-left: .25rem;
}
.btn.dns-open .icon {
    margin: 0 -.125rem 0 .375rem;
}
/* Check now while its check runs: its trigger drops a press, and the button
   is not disabled, so it keeps the keyboard focus. */
#dns-check-now.htmx-request {
    pointer-events: none;
    opacity: .65;
}
/* The slot of the Check now note: a line of its own under the card header's
   count and buttons. It keeps the line's height when it is empty, so a new
   note, or none, moves no row. */
.dns-card-header {
    flex-wrap: wrap;
}
/* The count shrinks and wraps beside the countdown and Check now, as in the
   mockup. The countdown keeps its box when it hides, so the header keeps its
   height when the last required record turns found. */
.dns-required-count {
    flex: 1 1 0;
    min-width: 0;
}
.dns-note {
    flex: 0 0 100%;
    min-height: 1.25rem;
    line-height: 1.25rem;
    margin-top: .25rem;
}
.dns-note .icon {
    --tblr-icon-size: 1em;
    vertical-align: -.125em;
    margin-right: .25rem;
}
/* The checks of the right side. Their badges change color with a short fade. */
.split-side .badge {
    transition: background-color .3s ease, color .3s ease;
}
.dns-check-icon .icon {
    --tblr-icon-size: 1.5rem;
}
/* The check after the sender line is the size of its text. */
.dns-inbox .icon {
    --tblr-icon-size: 1em;
    vertical-align: -.125em;
}

/* The colleague modal of DNS records on the DNS records step: Tabler's modal,
   which Alpine shows. The dialog pops in over a backdrop that fades in, as in
   the mockup. dashboard.css holds the rules of its body, which the domain
   page shares. */
.dns-share .modal-dialog {
    animation: pop .22s var(--ease-out) both;
}
/* No end frame and no forward fill: the backdrop ends at its own see-through
   opacity. */
@keyframes backdrop-in {
    from { opacity: 0; }
}
.dns-share .modal-backdrop {
    animation: backdrop-in .2s ease backwards;
}
/* Tabler's dark backdrop is a gray lighter than the page, so it does not
   darken it. */
[data-bs-theme=dark] .dns-share .modal-backdrop {
    --tblr-backdrop-bg: #000;
    --tblr-backdrop-opacity: .6;
}
/* The plain page (the colleague's DNS records page): the product logo and the
   content in a centered column, on the secondary surface, as in the mockup.
   Its toast sits over the middle of the page. */
.plain-page {
    min-height: 100vh;
    background: var(--tblr-bg-surface-secondary);
}
.plain-column {
    max-width: 42rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}
.colleague-tips .icon {
    --tblr-icon-size: 1rem;
    vertical-align: -.125rem;
}
.plain-logo {
    display: block;
    height: 24px;
    width: auto;
    margin-bottom: 1.5rem;
}
.plain-page .step-toast {
    left: 50%;
}

/* First email: the key that the step made, in a box as high as a field. */
.first-email-key-made {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5625rem .75rem;
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}
/* The code samples, light text on a dark ground under the tabs. */
.code-block {
    background: #182433;
    color: #e6edf5;
    padding: 1rem;
    font-size: .75rem;
    white-space: pre;
    overflow-x: auto;
    margin: 0;
    border-radius: 0 0 var(--tblr-border-radius) var(--tblr-border-radius);
}
/* The timeline of the test email: a dot for each stage, which changes color
   with a short fade. */
.timeline-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: .3rem;
    transition: background-color .3s ease, color .3s ease;
}
/* The time of a stage comes in as the stage is reached: a short rise and
   fade, as the shared reveal draws it. Each answer of the timeline replaces
   the card, so an animation would run again on every poll; a transition runs
   once, when htmx's settle takes the time out of pending. */
.first-email-time {
    flex: 0 0 auto;
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.first-email-time.pending,
.first-email-slot-empty .first-email-time {
    opacity: 0;
    transform: translateY(.5rem);
}
/* The narrow-screen slot's first answer has no old dots to settle from: its
   dots start grey, as the card's do before any test (Tabler's bg-secondary-lt). */
.first-email-slot-empty .timeline-dot {
    background-color: color-mix(in srgb, var(--tblr-secondary-lt) calc(var(--tblr-bg-opacity, 1) * 100%), transparent) !important;
}
/* The message line under the timeline takes no room while it is empty. */
.first-email-message:empty {
    display: none;
}

/* Motion. Content moves a short way and fades, in under 0.3 s, so nothing jumps. */
@keyframes enter-next {
    from { opacity: 0; transform: translateX(1.25rem); }
    to { opacity: 1; transform: none; }
}
@keyframes enter-back {
    from { opacity: 0; transform: translateX(-1.25rem); }
    to { opacity: 1; transform: none; }
}
@keyframes enter-up {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: none; }
}
@keyframes pop {
    from { opacity: 0; transform: translateY(.5rem) scale(.97); }
    to { opacity: 1; transform: none; }
}
/* Continue slides the next step in from the right, and Back from the left.
   These animations end at the element's own style, so they fill backwards
   only. A transform animation that stays in effect makes its element the
   frame of its fixed children, even at transform: none, and the colleague
   modal and its backdrop would then cover only the step. */
.anim-next {
    animation: enter-next .3s var(--ease-out) backwards;
}
.anim-back {
    animation: enter-back .3s var(--ease-out) backwards;
}
.anim-up {
    animation: enter-up .3s var(--ease-out) backwards;
}
/* A CSS animation runs again each time x-show shows its element, so this plays on every reveal. */
.reveal {
    animation: enter-up .25s var(--ease-out) backwards;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
    }
}