/* The query-first landing screen, which is also the home page. Scoped under
   .welcome--query so nothing here can reach the standard welcome or the
   campaign screen.

   Most colours still come from the brand custom properties in style.css. The
   2026-08-24 redesign brought its own blue and its own near-black, declared
   as --ql-* on the container below; the note that used to sit here saying the
   design's tokens matched --brand-blue exactly was true of the 2026-07-31
   concept mock and is not true of this one. */

.welcome--query {
    max-width: 1080px;
    margin: 0 auto;
    padding: 30px 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    /* THE LOGO'S OWN BLUE (Eran, 2026-08-24). Sampled from
       img/Worldesk logo w-white background.png, where #008CFF is 5,038 of the
       blue pixels and everything else in that range is anti-aliasing.

       Declared here rather than in style.css: the header and the sidebar were
       not part of this redesign, and re-pointing --brand-blue would repaint
       every page on the site from one landing change.

       Measured against white it is 3.39:1. That clears the 3:1 floor WCAG
       sets for large text, icons and control edges, which is all but three of
       the uses below. It does not clear the 4.5:1 floor for small text, so
       those three take --ql-blue-ink instead: the same hue at 85% brightness,
       far enough apart to read and close enough that nobody sees two blues.
       The alternative was darkening the button, which is the one thing this
       change exists to stop doing. */
    --ql-blue: #008CFF;
    --ql-blue-hover: #0077D8;

    /* Small blue TEXT only, never a fill or an edge. #0077D8 is the lightest
       point on the logo's own hue ramp that reaches 4.5:1 on white, measured
       at 4.54:1. */
    --ql-blue-ink: #0077D8;
    --ql-ink: #0B1533;
    --ql-body: #33415B;
    --ql-line: #DFE5EF;

    /* A SECOND, darker line colour, for the borders that are the only thing
       telling a visitor where a control is. WCAG 1.4.11 asks 3:1 of anything
       that identifies a user interface component, and the hairline above is
       1.27:1 against white -- fine for a separator, not for the edge of a box
       someone is meant to type in. #8B95A9 is the lightest value on this hue
       ramp that clears it, measured at 3.01:1.

       The design this screen was built from draws both lines the same
       near-invisible grey. That is the one place it is not followed, and the
       reason is written here rather than left to be rediscovered. */
    --ql-field-line: #8B95A9;
}

/* The dotted world map behind this screen.

   Attached to the scroller rather than to .welcome--query, which is a
   centred 900px column and would crop the map to its own width. The
   :has() half releases the moment this screen leaves the DOM, so the map
   does not sit behind a conversation; that is the same mechanism the
   bottom-bar rule at the end of this file uses, and for the same reason.

   No .ql-ready guard here, unlike that rule: a background cannot leave the
   visitor with a broken control if the controller never runs.

   background-attachment defaults to `scroll`, which on a scrolling element
   pins the image to the element's own box rather than to its content, so
   the map stays put while the page moves. */
.main:has(.welcome--query) #chatMessages {
    background-color: #FBFCFE;
    background-image: url("../img/world-dots.svg");
    background-repeat: no-repeat;
    background-position: center 84px;
    background-size: 1400px auto;
}

/* Hero */
.welcome--query .ql-hero {
    text-align: center;
}

.welcome--query .ql-wordmark {
    position: relative;
    margin: 0;
    font-size: clamp(34px, 6.2vw, 86px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: var(--ql-ink);
}

/* The wordmark's own box. The h1 is a full-width centred block, so a child
   positioned against it lands at the left edge of the column instead of
   beside the A; this wrapper is only as wide as the words. */
.welcome--query .ql-wordmark-line {
    position: relative;
    display: inline-block;
}

/* The two stars hang off the top-left of the A rather than sitting in the
   text flow, so they cannot push the wordmark off centre or wrap onto a line
   of their own. aria-hidden in the markup, so nothing reads them out. */
.welcome--query .ql-spark {
    position: absolute;
    top: -0.34em;
    left: -0.26em;
    width: 0.58em;
    height: 0.58em;
    color: var(--ql-blue);
    pointer-events: none;
}

.welcome--query .ql-wordmark-ai {
    color: var(--ql-blue);
}

.welcome--query .ql-lede {
    margin: 24px auto 0;
    max-width: 566px;
    font-size: 19px;
    line-height: 1.48;
    font-weight: 500;
    color: var(--ql-body);
}

.welcome--query .ql-lede-lead {
    color: var(--ql-blue);
    font-weight: 700;
}

/* A short rule, not a full-width one: it separates the description from the
   promise without reading as the end of a section. */
.welcome--query .ql-rule {
    display: block;
    width: 68px;
    height: 2px;
    margin: 22px auto;
    background: var(--ql-blue);
    opacity: 0.55;
}

.welcome--query .ql-promise {
    margin: 0 auto;
    max-width: 578px;
    font-size: 18.5px;
    line-height: 1.42;
    font-weight: 700;
    color: var(--ql-ink);
}

/* The answer and desk screens' hero, unchanged. Both carry .welcome--query
   for the shared card, so they would otherwise pick up the wordmark sizing
   above -- which is right for two words and absurd for a sentence. The home
   screen uses .ql-wordmark / .ql-lede and never these. */
.welcome--query .ql-headline {
    margin: 0;
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--brand-primary);
}

.welcome--query .ql-sub {
    margin: 10px auto 0;
    max-width: 480px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* And their own column width. The home screen widened to 900px to fit the
   four capability columns under the card; these two have no such row, and a
   wider measure would change the copy they are being tested on. */
.welcome--answer,
.welcome--desk {
    max-width: 660px;
}

/* The query card */
.welcome--query .ql-card {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    background: var(--bg-white);
    border: 1px solid var(--ql-line);
    border-radius: 18px;
    box-shadow: 0 14px 44px rgba(11, 21, 51, 0.07);
    overflow: hidden;
}

.welcome--query .ql-tabs {
    display: flex;
    border-bottom: 1px solid var(--ql-line);
}

.welcome--query .ql-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 17px 8px;
    border: 0;
    background: var(--bg-white);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--ql-ink);
    cursor: pointer;
    transition: color 0.15s ease;
}

.welcome--query .ql-tab-ico {
    flex: 0 0 auto;
}

.welcome--query .ql-tab:hover {
    color: var(--ql-blue-ink);
}

/* The LABEL takes the ink, the underline takes the logo blue. A 15px bold
   label is small text and needs 4.5:1; a 3px bar is a UI edge and needs 3:1,
   which the logo blue clears. */
.welcome--query .ql-tab.is-on {
    color: var(--ql-blue-ink);
    box-shadow: inset 0 -3px 0 var(--ql-blue);
    cursor: default;
}

/* The payment icon fills in when its tab is the live one. Two rules rather
   than a second <svg>, so the markup carries one icon and the state lives
   where every other state on this card lives. */
.welcome--query .ql-tab.is-on .ql-tab-ico--pay .ql-ico-disc {
    fill: currentColor;
}

.welcome--query .ql-tab.is-on .ql-tab-ico--pay .ql-ico-arrow {
    stroke: #FFFFFF;
}

.welcome--query .ql-tab:focus-visible {
    outline: 3px solid var(--brand-accent);
    outline-offset: -3px;
}

/* .welcome carries text-align:center from style.css, which is right for the
   hero and the trust row but wrong for everything inside the card: without
   this the recap sentence, the wait notes and, worst, the streamed answer
   prose all render centred. Only looking at a screenshot caught it; every
   measurement passed. The few genuinely centred children set it themselves. */
.welcome--query .ql-body {
    padding: 24px;
    text-align: left;
}

/* The three labelled fields. A grid rather than a running sentence, so each
   control can carry its own <label for>. */
.welcome--query .ql-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    text-align: left;
}

.welcome--query .ql-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.welcome--query .ql-field-label {
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ql-ink);
}

.welcome--query .ql-fld {
    width: 100%;
    border: 1.5px solid var(--ql-field-line);
    border-radius: 10px;
    padding: 13px 13px;
    background: var(--bg-white);
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ql-ink);
    min-width: 0;
}

.welcome--query .ql-fld:focus {
    outline: none;
    border-color: var(--ql-blue);
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.18);
}

.welcome--query input.ql-amount {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.welcome--query .ql-error {
    margin: 12px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--danger);
}

.welcome--query .ql-go {
    display: block;
    width: 100%;
    margin-top: 18px;
    border: 0;
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--ql-blue);
    color: var(--text-on-brand);
    font-family: inherit;
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 140, 255, 0.26);
    transition: background 0.15s ease, transform 0.15s ease;
}

.welcome--query .ql-go:hover {
    background: var(--ql-blue-hover);
}

.welcome--query .ql-go:active {
    transform: translateY(1px);
}

.welcome--query .ql-go:focus-visible {
    outline: 3px solid var(--brand-accent);
    outline-offset: 2px;
}

.welcome--query .ql-go[disabled] {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

/* The expectation line under each CTA. Small and quiet: it is there to stop
   the intake questions reading as the product stalling, not to compete with
   the button above it. */
.welcome--query .ql-expect {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* "Ask anything" composer. Lives in this card rather than swapping the
   screen for the standard welcome, which is the screen that took 118 paid
   sessions and produced zero queries in campaign week 1. */
.welcome--query .ql-ask-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.welcome--query .ql-ask-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--ql-field-line);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--bg-white);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
    resize: vertical;
}

.welcome--query .ql-ask-input:focus {
    outline: none;
    border-color: var(--ql-blue);
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.18);
}

.welcome--query .ql-ask-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}


/* Analyzing state */
.welcome--query .ql-asked {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.welcome--query .ql-wait-note {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-muted);
}

/* The long-wait line, revealed after 8s. CSS rather than a timer on purpose:
   the controller must never script the passage of time, or the narration
   stops being evidence that work is happening. The panel is [hidden] between
   runs, so going from display:none back to shown restarts this cleanly.

   Held out of the reduced-motion block below deliberately: a delay is not
   motion, and revealing it immediately would put a 20-40s claim in front of
   the 6s path -- which is the timing this whole pair exists to avoid. */
.welcome--query .ql-wait-long {
    margin-top: -8px;
    opacity: 0;
    animation: ql-late-reveal 0s linear 8s forwards;
}

@keyframes ql-late-reveal {
    to { opacity: 1; }
}

.welcome--query .ql-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
    animation: ql-step-in 0.3s ease both;
}

.welcome--query .ql-step .ql-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--brand-accent-light);
}

/* The newest line is the one the eye should land on. */
.welcome--query .ql-step.is-latest {
    color: var(--text-primary);
    font-weight: 600;
}

.welcome--query .ql-step.is-latest .ql-dot {
    background: var(--ql-blue);
    animation: ql-pulse 1.4s ease-in-out infinite;
}

@keyframes ql-step-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes ql-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.4); opacity: 0.55; }
}

/* The streamed answer draft. Same content the chat's thinking bubble shows,
   rendered through the same function, so the two cannot diverge. */
.welcome--query .ql-draft:not(:empty) {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--ql-line);
}

.welcome--query .ql-draft .section-card {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

/* Failure state */
.welcome--query .ql-failed-text {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
}

.welcome--query .ql-retry {
    border: 1.5px solid var(--ql-blue);
    border-radius: 10px;
    padding: 10px 16px;
    background: var(--bg-white);
    color: var(--ql-blue-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.welcome--query .ql-retry:hover {
    background: rgba(0, 140, 255, 0.09);
}

/* The assurance line under the payment CTA. Quiet, and centred under the
   button rather than left with the fields, because it qualifies the button. */
.welcome--query .ql-assure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ql-body);
}

.welcome--query .ql-assure svg {
    flex: 0 0 auto;
    opacity: 0.75;
}

/* The four capability columns under the card. Hairline separators between
   them rather than around them, so the row reads as one band. */
.welcome--query .ql-caps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.welcome--query .ql-cap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 16px;
    border-left: 1px solid var(--ql-line);
}

.welcome--query .ql-cap:first-child {
    border-left: 0;
    padding-left: 0;
}

.welcome--query .ql-cap-ico {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ql-blue);
}

.welcome--query .ql-cap-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.welcome--query .ql-cap-text b {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ql-ink);
}

.welcome--query .ql-cap-text span {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ql-body);
}

/* The trust chips, still used by the answer and desk screens. The home
   screen dropped them in the 2026-08-24 redesign -- the signup claim moved
   into the card's assurance line and the rest became the capability row --
   but those two screens are a running comparison and their copy was not part
   of that change. */
.welcome--query .ql-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.welcome--query .ql-trust b {
    color: var(--brand-accent);
}

/* The duplicate bottom chat bar, suppressed while this screen is up.
   .input-area is a SIBLING of #chatMessages, so it cannot be reached by a
   descendant selector scoped under .welcome--query -- hence the two-part
   condition, which is also what makes it safe:

     .ql-ready              set by query_landing.js once it has wired itself,
                            so a controller that never ran leaves the bottom
                            bar working instead of leaving the visitor with
                            one hidden input and one inert one;
     :has(.welcome--query)  releases the moment this screen leaves the DOM,
                            which it does by four different routes (answer
                            handoff, Clear chat, home overlay, first message).
                            A hand-removed class would have to know all four,
                            and the forgotten one would hide the composer
                            permanently after an answer.

   Either half unsupported or absent degrades to "bottom bar visible", which
   is exactly what v1 did. Pinned by
   test_the_duplicate_composer_is_hidden_only_while_this_screen_is_up.

   ONLY THE FORM IS HIDDEN, not .input-area itself (Eran, 2026-08-23). The
   legal footer lives inside .input-area -- the copyright line plus How it
   works, Privacy, Terms and Legal Disclaimer -- so `display: none` on the
   container took every one of them off this screen. It shipped that way from
   2026-07-31 and no assertion could see it, because each one was written
   about the INPUT. The identical bug was made and fixed on the standard
   welcome on 2026-08-14; this rule now matches that one line for line.

   The border and the top padding go with the form, or the page ends in an
   empty bordered strip where the composer used to be. */
.main.ql-ready:has(.welcome--query) #chatForm {
    display: none;
}

.main.ql-ready:has(.welcome--query) .input-area {
    border-top: none;
    padding-top: 0;
}

@media (max-width: 860px) {
    .welcome--query .ql-caps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 0;
    }

    .welcome--query .ql-cap:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .welcome--query {
        padding: 26px 16px 32px;
        gap: 18px;
    }

    .welcome--query .ql-headline {
        font-size: 25px;
    }

    .welcome--query .ql-lede {
        font-size: 16.5px;
    }

    .welcome--query .ql-promise {
        font-size: 16px;
    }

    .welcome--query .ql-body {
        padding: 20px 16px;
    }

    /* One field per row rather than three squeezed ones: the amount is typed
       into and the two pickers carry long option text, so a third of a phone
       width truncates all three. */
    .welcome--query .ql-fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .welcome--query .ql-tab {
        font-size: 12.5px;
        padding: 12px 6px;
        gap: 6px;
    }

    .welcome--query .ql-tab-ico {
        width: 17px;
        height: 17px;
    }

    .welcome--query .ql-caps {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .welcome--query .ql-cap {
        border-left: 0;
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome--query .ql-step,
    .welcome--query .ql-step.is-latest .ql-dot {
        animation: none;
    }
}